BbColorPalette

External activator element or component ref. When provided, the activator slot is not rendered and click listeners are attached programmatically to the referenced element — mirroring the BbDropdown activator API.

The escape hatch for a trigger you already hold — a component ref, a control from elsewhere. When set, the activator slot is not rendered, so you also give up the scope (open, value, disabled) it would have handed you.

When true, the palette opens as a bottom off-canvas sheet on mobile viewports instead of a floating popover; on desktop it stays a popover. Mirrors the adaptive behaviour of BbPopover/BbDropdown/BbDatePicker. When unset, falls back to the global config.adaptive.

On a viewport below config.mobileMaxWidth the palette is a bottom sheet, which ignores every positioning prop, is draggable outside the picker surfaces; the canvas and sliders are excluded from sheet dragging, and is latched for the open cycle so a resize never swaps the surface mid-pick.

Enable the alpha channel. The picker shows an opacity slider and emits #RRGGBBAA hex8 values.

Enable it wherever eight-digit values can occur: an incoming #RRGGBBAA cannot round-trip without it, and a sampled eyedropper color always comes back opaque.

Element or component ref the popover positions itself relative to. Defaults to the activator element when omitted, allowing the popover to be anchored to a larger container (e.g. the full input row) while a smaller element (e.g. a color dot) remains the click target.

The prop form of the slot scope's anchorProps, for an element you hold a ref to. Use either to let the popover line up with something larger than the click target — a whole settings row rather than the dot inside it.

Constrains the popover within a bounding element. Accepts an HTMLElement, a Vue component ref, or a CSS selector string.

Reach for it when the palette lives inside a panel that scrolls, so the popover is kept in the panel rather than in the viewport.

Disable all interaction (activator and palette).

Blocks the activator entirely. The slot scope mirrors it as disabled, so your own markup can grey out in step rather than guessing.

Disables the automatic flip to the opposite side when the popover would overflow (flipping is on by default).

v2 spelled this flip, on by default. The polarity is inverted, so :flip="false" becomes disable-flip — the one edit on this component a type-check catches, since flip no longer exists.

Prevents rendering content before it's made visible.

Off by default, so the palette body mounts lazily on first open. Turn it on only for measurement or SSR — not to make the popover feel faster.

Show an eyedropper button inside the palette to sample any color on screen. Uses the native EyeDropper API — hidden automatically on unsupported browsers.

The button renders only where the browser implements the native EyeDropper API — Chromium-based browsers, not Firefox or Safari — and is simply absent elsewhere, with nothing in its place and nothing logged. Keep the gradient and the swatches as the path everyone has. Called picker in v2; a leftover picker lands in $attrs and does nothing.

Accessible label applied to the activator element via aria-label. Defaults to the locale string for "Open color picker" when omitted.

On a bare color dot this is the only accessible name there is, and it also names the mobile sheet. Say which color is being changed — "Color for the bug label" — rather than accepting the generic fallback.

v-model: the current color as a #RRGGBB hex string (or #RRGGBBAA when alpha is enabled), or null when empty.

Props for the phone sheet. A pt inside it, object or colon keys, styles only that sheet. Extra props forwarded to the BbOffCanvas sheet when adaptive is active on mobile (e.g. title, size, persistent). Spread over the defaults: the sheet is draggable (the colour square and sliders never drag it) and hides its ✕ (backdrop, Escape and drag close it); pass { hideClose: false } to bring the ✕ back. A pt inside it styles ONLY the sheet, in BbOffCanvas's part words (root, header, title, description, content, footer, close; state open), object ({ pt: { header: '…' } }) or colon keys ({ 'pt:header': '…' }) alike. It merges after what this component forwards to its sheet, so it wins a conflict and drops nothing — see the passthrough guide § Inside the sheet. For this component it is the only way to style the sheet's header, title and ✕: none of its own parts reach inside the sheet.

Space the floating container will maintain from the activator.

Minimum empty space to keep from the edge of the page

Position of the overlay in respect to the related activator.

A preference, not a guarantee: the popover flips to the opposite side when it would overflow, unless disable-flip says otherwise. The mobile sheet ignores it entirely.

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Prevent opening the palette while keeping the activator visible.

Keeps the activator visible and focusable and never opens the palette. Prefer it to a disabled-looking custom style for a review state, so the color stays in the reading order.

Controls swatches display in the picker: - true — show the built-in Material-palette swatches - string[][] — show custom swatches (each inner array = a column of shades) - false / omitted — no swatches section

Each inner array is a **column** of shades, so ramps are designed vertically. A row-wise string[][] type-checks and renders a grid nobody can scan.

How long the transition has to last in milliseconds

Seed it explicitly — modelValue is required, and null is the correct "no color yet" value. null goes in but never comes out: since v3 the palette emits only concrete colors.

Drag-frequency, not a commit: it fires on every frame while a handle moves. Repaint from it freely, debounce anything that persists. In v3 the payload is always a concrete color, so a handler narrowing on null has a dead branch — and clearing a color is now the consumer's job.

Custom activator element. Apply v-bind="props" to the element you want to use as the trigger — this wires up the ref callback that lets BbColorPalette track the element.

The scope also carries value (paint the trigger), open (read-only, for a caret or a ring), disabled and anchorProps. value was called color in v2. There is no open prop and no update:open event to pair with it — observing this flag is the whole open-state API.