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. For a bare dot in a table cell, the v-bb-color directive does the same with no component at all.

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.

Below config.mobileMaxWidth the palette opens as a bottom sheet. The sheet ignores the positioning props, drags anywhere except the colour square and sliders, and stays a sheet until it closes, even if the window is resized.

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 colour 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: it stays inside it alongside its trigger (sideways for a popover above or below); away from the trigger it may pass the edge, and it flips at the viewport only. 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).

Stops the palette opening. The activator props carry no disabled or inert, so bind the slot scope's disabled onto your own element to take it out of the tab order and grey it out.

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.

Renders the palette panel at mount instead of on the first open (the phone sheet's too).

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 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. The activator is named by it followed by the activator's own text, through aria-labelledby. Defaults to the locale string for "Open color picker" when omitted.

The trigger is named by this text followed by whatever the trigger shows (a hex code, say), and the mobile sheet by the same pair. On a bare colour dot it is the whole name, so say which colour is being changed ("Colour 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 (the BbOffCanvas that adaptive renders on mobile), spread over its defaults. A pt inside it styles only the sheet (passthrough guide § Inside the sheet). The sheet hides its ✕; { hideClose: false } brings it back.

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.

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: panel, root, sheet, swatch. States: open, selected.

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 colour 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 colour yet" value. null goes in but never comes out: since v3 the palette emits only concrete colours.

Emitted once the palette has finished closing.

Emitted as soon as the palette starts to close.

Emitted as soon as the palette (the popover, or the sheet on a phone) starts to open.

Emitted once the palette is open and its open transition has finished.

Emitted when a color is picked. Payload is a concrete #RRGGBB (or #RRGGBBAA when alpha is enabled) — the palette always emits a color, never null.

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.

Spread props on the trigger and the palette sets aria-haspopup, aria-expanded and aria-labelledby on it for you. 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.