openpencil/packages/docs/programmable/sdk/api/components/fill-picker-root.md
Danila Poyarkov 422f83331f feat(vue): promote color and fill primitives
- Add accessible OkHCL channel sliders and use Reka ColorSlider for standard color channels

- Split fill state and binding-aware swatches from application popover composition

- Add keyboard-operable gradient stops, shared demos, generated docs, and focused coverage
2026-07-13 23:41:04 +03:00

1.8 KiB

title description
FillPickerRoot Headless popover-based fill picker primitive.

FillPickerRoot

::: warning Deprecated Compose FillRoot, FillSwatch, and your application's popover instead. FillPickerRoot remains temporarily available for migration compatibility. :::

FillPickerRoot is the legacy popover-based fill picker for solid, gradient, and image fills.

Props

Events

Slots

Trigger slot props

{
  style: Record<string, string>
}

Default slot props

{
  fill: Fill
  category: 'SOLID' | 'GRADIENT' | 'IMAGE'
  toSolid: () => void
  toGradient: () => void
  toImage: () => void
  update: (fill: Fill) => void
}

Example

<FillPickerRoot :fill="fill" @update="fill = $event">
  <template #default="{ fill, category, toSolid, toGradient, update }">
    <div>{{ category }}</div>
    <button @click="toSolid">Solid</button>
    <button @click="toGradient">Gradient</button>
    <MyFillEditor :fill="fill" @change="update" />
  </template>
</FillPickerRoot>