@bridge-ui/vue 0.1.0 → 0.2.0

package/docs/components/ColorPicker.md

@@ -0,0 +1,78 @@
+# ColorPicker
+
+Inline color picker with a saturation/brightness area, hue slider, optional alpha, and preset swatches. Optional Cancel / Apply footer.
+
+## Import
+
+```ts
+import { ColorPicker } from "@bridge-ui/vue/Components/ColorPicker";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<ColorPicker />
+
+<ColorPicker :value="color" v-on:change="color = $event" />
+
+<ColorPicker
+  alpha
+  show-footer
+  format="rgba"
+  :value="color"
+  v-on:change="color = $event"
+/>
+```
+
+### Preset swatches
+
+```vue
+<ColorPicker
+  :value="color"
+  v-on:change="color = $event"
+  :swatches="['#0f766e', '#2563eb', '#dc2626', '#000000']"
+/>
+```
+
+### Output format
+
+```vue
+<ColorPicker format="hex" :value="color" v-on:change="color = $event" />
+
+<ColorPicker format="rgb" :value="color" v-on:change="color = $event" />
+
+<ColorPicker format="rgba" :value="color" v-on:change="color = $event" />
+```
+
+## Props
+
+| Prop           | Type                     | Default | Description                                                         |
+| -------------- | ------------------------ | ------- | ------------------------------------------------------------------- |
+| `alpha`        | `boolean`                | —       | Shows the alpha slider. Unset: `true` for `hexa` / `rgba` / `hsla`. |
+| `classes`      | `ColorPickerClasses`     | —       | Classes for picker regions.                                         |
+| `customProps`  | `ColorPickerCustomProps` | —       | Extra props for internal parts.                                     |
+| `defaultValue` | `string \| null`         | `null`  | Uncontrolled initial value.                                         |
+| `disabled`     | `boolean`                | `false` | Disables the picker.                                                |
+| `fill`         | `boolean`                | `false` | Fills the container width.                                          |
+| `format`       | `ColorFormat`            | `"hex"` | Serialized output: `hex`, `hexa`, `rgb`, `rgba`, `hsl`, `hsla`.     |
+| `readOnly`     | `boolean`                | `false` | Prevents selection.                                                 |
+| `rounded`      | `ColorPickerRounded`     | `"md"`  | Border radius of the picker shell and swatches.                     |
+| `showFooter`   | `boolean`                | `false` | Shows Cancel / Apply. Selection is draft until Apply.               |
+| `swatches`     | `string[]`               | —       | Preset colors shown below the sliders.                              |
+| `value`        | `string \| null`         | —       | Controlled value.                                                   |
+
+Picker tokens live on `components.ColorPicker` (`rounded`, `size`).
+
+## Events
+
+| Event         | Payload                   | Description                                                             |
+| ------------- | ------------------------- | ----------------------------------------------------------------------- |
+| `v-on:apply`  | `()`                      | Emitted when Apply is pressed (`showFooter`).                           |
+| `v-on:cancel` | `()`                      | Emitted when Cancel is pressed.                                         |
+| `v-on:change` | `(value: string \| null)` | Emitted when Apply is pressed (`showFooter`) or when the value commits. |
+
+## Related components
+
+ColorField, FormField, FieldOverlay

package/docs/components/DatePicker.md

@@ -73,7 +73,6 @@ Call `apply()` to commit and close the overlay, or `cancel()` to discard and clo
 | `slots`           | `DatePickerSlots`       | —           | Named slots (`day` on the calendar, `footer` for Cancel / Apply). |
 | `startOfWeek`     | `StartOfWeek`           | `0`         | First day of the week.                                            |
 | `timeZone`        | `string`                | —           | IANA time zone.                                                   |
-| `tokens`          | `DatePickerTokens`      | —           | Token overrides.                                                  |
 | `value`           | `DatePickerModel`       | —           | Controlled value.                                                 |
 
 ### v-model
@@ -83,6 +82,8 @@ Call `apply()` to commit and close the overlay, or `cancel()` to discard and clo
 | `modelValue`        | `DatePickerModel`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: DatePickerModel) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar tokens live on `components.Calendar` (`color`, `day`, `rounded`).
+
 ## Events
 
 | Event         | Payload                    | Description                                                             |

package/docs/components/DateRangePicker.md

@@ -1,7 +1,8 @@
 # DateRangePicker
 
-Inline dual-month picker for an inclusive date range (`[start, end]`). The header
-exposes year, start month, and end month selectors in one row.
+Inline dual-month picker for an inclusive date range (`[start, end]`). Year sits
+on the left and nav on the right; month selectors sit inward from the header
+midpoint.
 
 ## Import
 
@@ -50,7 +51,6 @@ import { DateRangePicker } from "@bridge-ui/vue/Components/DateRangePicker";
 | `slots`           | `DateRangePickerSlots`       | —              | Named slots (`day` on the calendars, `footer` for Cancel / Apply). |
 | `startOfWeek`     | `StartOfWeek`                | `0`            | First day of the week.                                             |
 | `timeZone`        | `string`                     | —              | IANA time zone.                                                    |
-| `tokens`          | `DateRangePickerTokens`      | —              | Token overrides.                                                   |
 | `value`           | `DateRangeValue \| null`     | —              | Controlled value (`[start, end]`).                                 |
 
 ### v-model
@@ -60,6 +60,8 @@ import { DateRangePicker } from "@bridge-ui/vue/Components/DateRangePicker";
 | `modelValue`        | `DateRangeValue \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: DateRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar tokens live on `components.Calendar` (`color`, `day`, `rounded`).
+
 ## Events
 
 | Event         | Payload                           | Description                                                             |

package/docs/components/DateTimePicker.md

@@ -54,7 +54,6 @@ import { DateTimePicker } from "@bridge-ui/vue/Components/DateTimePicker";
 | `slots`           | `DateTimePickerSlots`       | —           | Named slots (`day` on the calendar, `footer` for Cancel / Apply). |
 | `startOfWeek`     | `StartOfWeek`               | `0`         | First day of the week.                                            |
 | `timeZone`        | `string`                    | —           | IANA time zone.                                                   |
-| `tokens`          | `DateTimePickerTokens`      | —           | Token overrides.                                                  |
 | `value`           | `Date \| null`              | —           | Controlled date-time value.                                       |
 
 ### v-model
@@ -64,6 +63,8 @@ import { DateTimePicker } from "@bridge-ui/vue/Components/DateTimePicker";
 | `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar tokens live on `components.Calendar`. Time panel tokens live on `components.TimePanel`.
+
 ## Events
 
 | Event         | Payload                 | Description                                                             |

package/docs/components/DateTimeRangePicker.md

@@ -54,7 +54,6 @@ import { DateTimeRangePicker } from "@bridge-ui/vue/Components/DateTimeRangePick
 | `slots`           | `DateTimeRangePickerSlots`       | —              | Named slots (`day` on the calendars, `footer` for Cancel / Apply). |
 | `startOfWeek`     | `StartOfWeek`                    | `0`            | First day of the week.                                             |
 | `timeZone`        | `string`                         | —              | IANA time zone.                                                    |
-| `tokens`          | `DateTimeRangePickerTokens`      | —              | Token overrides.                                                   |
 | `value`           | `DateRangeValue \| null`         | —              | Controlled value (`[start, end]` date-times).                      |
 
 ### v-model
@@ -64,6 +63,8 @@ import { DateTimeRangePicker } from "@bridge-ui/vue/Components/DateTimeRangePick
 | `modelValue`        | `DateRangeValue \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: DateRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar tokens live on `components.Calendar`. Time panel tokens live on `components.TimePanel`.
+
 ## Events
 
 | Event         | Payload                           | Description                                                             |

package/docs/components/Drawer.md

@@ -96,27 +96,27 @@ import { Drawer } from "@bridge-ui/vue/Components/Drawer";
 
 ## Props
 
-| Prop                  | Type                | Default | Description                                                                                |
-| --------------------- | ------------------- | ------- | ------------------------------------------------------------------------------------------ |
-| `ariaLabel`           | `string`            | —       | Accessible name for the dialog (`aria-label`).                                             |
-| `ariaLabelledBy`      | `string`            | —       | Id of the element that labels the dialog (`aria-labelledby`).                              |
-| `autoFocus`           | `boolean`           | `false` | When true, focuses the first focusable element inside the drawer on open.                  |
-| `blur`                | `DrawerBlur`        | "none"  | Backdrop blur on the overlay.                                                              |
-| `classes`             | `DrawerClasses`     | —       | The classes to apply to the drawer.                                                        |
-| `closeOnEscape`       | `boolean`           | `true`  | Whether the drawer closes on escape key press.                                             |
-| `closeOnOverlay`      | `boolean`           | `true`  | Whether the drawer closes on overlay click.                                                |
-| `customProps`         | `DrawerCustomProps` | —       | Props forwarded to each drawer part.                                                       |
-| `disableEnforceFocus` | `boolean`           | `false` | When true, focus is not trapped inside the drawer while open.                              |
-| `disableRestoreFocus` | `boolean`           | `false` | When true, focus is not restored to the previously focused element on close.               |
-| `disableScrollLock`   | `boolean`           | `false` | When true, body scroll is not locked while the drawer is open.                             |
-| `hideBackdrop`        | `boolean`           | `false` | When true, the backdrop overlay is not rendered.                                           |
-| `keepMounted`         | `boolean`           | `false` | When true, the drawer stays mounted in the DOM after closing (hidden).                     |
-| `persistent`          | `boolean`           | `false` | When true, escape and overlay clicks do not close the drawer.                              |
-| `placement`           | `DrawerPlacement`   | "left"  | Edge the panel docks to.                                                                   |
-| `scroll`              | `DrawerScroll`      | "paper" | Where scroll happens: the page (`body`) or the drawer panel (`paper`).                     |
-| `size`                | `DrawerSize`        | "md"    | Panel size along the placement axis (width for `left`/`right`, height for `top`/`bottom`). |
-| `teleportTo`          | `string \| false`   | "body"  | Where to teleport the drawer. Pass `false` to render in place.                             |
-| `transition`          | `DrawerTransition`  | "slide" | Enter/leave animation for overlay and panel.                                               |
+| Prop                  | Type                | Default | Description                                                                                                                             |
+| --------------------- | ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `ariaLabel`           | `string`            | —       | Accessible name for the dialog (`aria-label`).                                                                                          |
+| `ariaLabelledBy`      | `string`            | —       | Id of the element that labels the dialog (`aria-labelledby`).                                                                           |
+| `autoFocus`           | `boolean`           | `false` | When true, focuses the first focusable element inside the drawer on open.                                                               |
+| `blur`                | `DrawerBlur`        | "none"  | Backdrop blur on the overlay.                                                                                                           |
+| `classes`             | `DrawerClasses`     | —       | The classes to apply to the drawer.                                                                                                     |
+| `closeOnEscape`       | `boolean`           | `true`  | Whether the drawer closes on escape key press.                                                                                          |
+| `closeOnOverlay`      | `boolean`           | `true`  | Whether the drawer closes on overlay click.                                                                                             |
+| `customProps`         | `DrawerCustomProps` | —       | Props forwarded to each drawer part.                                                                                                    |
+| `disableEnforceFocus` | `boolean`           | `false` | When true, focus is not trapped inside the drawer while open.                                                                           |
+| `disableRestoreFocus` | `boolean`           | `false` | When true, focus is not restored to the previously focused element on close.                                                            |
+| `disableScrollLock`   | `boolean`           | `false` | When true, body scroll is not locked while the drawer is open.                                                                          |
+| `hideBackdrop`        | `boolean`           | `false` | When true, the backdrop overlay is not rendered.                                                                                        |
+| `keepMounted`         | `boolean`           | `false` | When true, the drawer stays mounted in the DOM after closing (hidden).                                                                  |
+| `persistent`          | `boolean`           | `false` | When true, escape and overlay clicks do not close the drawer.                                                                           |
+| `placement`           | `DrawerPlacement`   | "left"  | Edge the panel docks to.                                                                                                                |
+| `scroll`              | `DrawerScroll`      | "paper" | Where scroll happens: the page (`body`) or the drawer panel (`paper`). `paper` uses `bridge-scroll-fade-y` and `bridge-hide-scrollbar`. |
+| `size`                | `DrawerSize`        | "md"    | Panel size along the placement axis (width for `left`/`right`, height for `top`/`bottom`).                                              |
+| `teleportTo`          | `string \| false`   | "body"  | Where to teleport the drawer. Pass `false` to render in place.                                                                          |
+| `transition`          | `DrawerTransition`  | "slide" | Enter/leave animation for overlay and panel.                                                                                            |
 
 ### v-model
 

package/docs/components/FieldOverlay.md

@@ -2,9 +2,10 @@
 
 Switches between `Menu`, `Modal`, and `Drawer` shells for field pickers and listboxes.
 Dialog shells size to the picker: `modal` uses `w-fit` up to the viewport;
-`drawer` is full width and up to `90dvh`, and scrolls horizontally when dual
-calendars or time columns overflow. Nested pickers flush the bottom radius in a
-drawer so the shell meets the screen edge.
+`drawer` is full width and up to `90dvh`. Dual calendars and time columns that
+overflow the sheet width scroll on an inner scroller (`bridge-scroll-fade-x`).
+Vertical fade comes from `scroll="paper"`. Nested pickers flush the bottom
+radius in a drawer so the shell meets the screen edge.
 
 ## Import
 
@@ -38,7 +39,7 @@ import { FieldOverlay } from "@bridge-ui/vue/Components/FieldOverlay";
 
 ### customProps
 
-Forward props to the active shell via `customProps.menu`, `customProps.modal`, or `customProps.drawer`. Menu-only options such as `anchorEl`, `placement`, `disableAutoFocus`, and `rounded` go through `customProps.menu`.
+Forward props to the active shell via `customProps.menu`, `customProps.modal`, or `customProps.drawer`. The drawer inner scroller accepts `customProps.drawerScroller`. Menu-only options such as `anchorEl`, `placement`, `disableAutoFocus`, and `rounded` go through `customProps.menu`.
 
 ```vue
 <FieldOverlay
@@ -64,6 +65,16 @@ Forward props to the active shell via `customProps.menu`, `customProps.modal`, o
 >
   <PickerContent />
 </FieldOverlay>
+
+<FieldOverlay
+  v-model="open"
+  overlay="drawer"
+  :custom-props="{
+    drawerScroller: { class: 'bridge-scroll-fade-none' },
+  }"
+>
+  <PickerContent />
+</FieldOverlay>
 ```
 
 ### Footer close
@@ -79,10 +90,10 @@ overlay. Use the picker slot callbacks in custom footers so Apply still commits.
 
 ## Props
 
-| Prop          | Type                      | Default  | Description                                                |
-| ------------- | ------------------------- | -------- | ---------------------------------------------------------- |
-| `customProps` | `FieldOverlayCustomProps` | —        | Extra props for nested shells (`menu`, `modal`, `drawer`). |
-| `overlay`     | `FieldOverlayMode`        | `"auto"` | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.       |
+| Prop          | Type                      | Default  | Description                                                                                           |
+| ------------- | ------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
+| `customProps` | `FieldOverlayCustomProps` | —        | Extra props for nested shells (`menu`, `modal`, `drawer`) and the drawer scroller (`drawerScroller`). |
+| `overlay`     | `FieldOverlayMode`        | `"auto"` | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                                                  |
 
 ### v-model
 
@@ -100,4 +111,4 @@ overlay. Use the picker slot callbacks in custom footers so Apply still commits.
 
 ## Related components
 
-Menu, Modal, Drawer, Select, Autocomplete, DateField, TimeField, DateTimeField, DateRangeField, TimeRangeField, DateTimeRangeField, Listbox
+Menu, Modal, Drawer, Select, Autocomplete, DateField, TimeField, DateTimeField, DateRangeField, TimeRangeField, DateTimeRangeField, ColorField, Listbox

package/docs/components/Modal.md

@@ -115,25 +115,25 @@ const breakpoint = useBreakpoint();
 
 ## Props
 
-| Prop                  | Type               | Default         | Description                                                                                                        |
-| --------------------- | ------------------ | --------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `align`               | `ModalAlign`       | "middle-center" | Panel position on all breakpoints (`{row}-{column}` grid). Use `useBreakpoint` for a different align per viewport. |
-| `autoFocus`           | `boolean`          | `false`         | When true, focuses the first focusable element inside the dialog on open.                                          |
-| `blur`                | `ModalBlur`        | "none"          | Backdrop blur on the overlay.                                                                                      |
-| `classes`             | `ModalClasses`     | —               | The classes to apply to the modal.                                                                                 |
-| `closeOnEscape`       | `boolean`          | `true`          | Whether the modal closes on escape key press.                                                                      |
-| `closeOnOverlay`      | `boolean`          | `true`          | Whether the modal closes on overlay click.                                                                         |
-| `customProps`         | `ModalCustomProps` | —               | Props forwarded to each modal part.                                                                                |
-| `disableEnforceFocus` | `boolean`          | `false`         | When true, focus is not trapped inside the modal while open.                                                       |
-| `disableRestoreFocus` | `boolean`          | `false`         | When true, focus is not restored to the previously focused element on close.                                       |
-| `disableScrollLock`   | `boolean`          | `false`         | When true, body scroll is not locked while the modal is open.                                                      |
-| `hideBackdrop`        | `boolean`          | `false`         | When true, the backdrop overlay is not rendered.                                                                   |
-| `keepMounted`         | `boolean`          | `false`         | When true, the modal stays mounted in the DOM after closing (hidden).                                              |
-| `persistent`          | `boolean`          | `false`         | When true, escape and overlay clicks do not close the modal.                                                       |
-| `scroll`              | `ModalScroll`      | "body"          | Where scroll happens: the page (`body`) or the dialog panel (`paper`).                                             |
-| `size`                | `ModalSize`        | "md"            | Max width of the dialog from the `sm` breakpoint up (`sm:max-w-*`).                                                |
-| `teleportTo`          | `string \| false`  | "body"          | Where to teleport the modal. Pass `false` to render in place.                                                      |
-| `transition`          | `ModalTransition`  | "fade"          | Enter/leave animation for overlay and panel.                                                                       |
+| Prop                  | Type               | Default         | Description                                                                                                                             |
+| --------------------- | ------------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `align`               | `ModalAlign`       | "middle-center" | Panel position on all breakpoints (`{row}-{column}` grid). Use `useBreakpoint` for a different align per viewport.                      |
+| `autoFocus`           | `boolean`          | `false`         | When true, focuses the first focusable element inside the dialog on open.                                                               |
+| `blur`                | `ModalBlur`        | "none"          | Backdrop blur on the overlay.                                                                                                           |
+| `classes`             | `ModalClasses`     | —               | The classes to apply to the modal.                                                                                                      |
+| `closeOnEscape`       | `boolean`          | `true`          | Whether the modal closes on escape key press.                                                                                           |
+| `closeOnOverlay`      | `boolean`          | `true`          | Whether the modal closes on overlay click.                                                                                              |
+| `customProps`         | `ModalCustomProps` | —               | Props forwarded to each modal part.                                                                                                     |
+| `disableEnforceFocus` | `boolean`          | `false`         | When true, focus is not trapped inside the modal while open.                                                                            |
+| `disableRestoreFocus` | `boolean`          | `false`         | When true, focus is not restored to the previously focused element on close.                                                            |
+| `disableScrollLock`   | `boolean`          | `false`         | When true, body scroll is not locked while the modal is open.                                                                           |
+| `hideBackdrop`        | `boolean`          | `false`         | When true, the backdrop overlay is not rendered.                                                                                        |
+| `keepMounted`         | `boolean`          | `false`         | When true, the modal stays mounted in the DOM after closing (hidden).                                                                   |
+| `persistent`          | `boolean`          | `false`         | When true, escape and overlay clicks do not close the modal.                                                                            |
+| `scroll`              | `ModalScroll`      | "body"          | Where scroll happens: the page (`body`) or the dialog panel (`paper`). `paper` uses `bridge-scroll-fade-y` and `bridge-hide-scrollbar`. |
+| `size`                | `ModalSize`        | "md"            | Max width of the dialog from the `sm` breakpoint up (`sm:max-w-*`).                                                                     |
+| `teleportTo`          | `string \| false`  | "body"          | Where to teleport the modal. Pass `false` to render in place.                                                                           |
+| `transition`          | `ModalTransition`  | "fade"          | Enter/leave animation for overlay and panel.                                                                                            |
 
 ### v-model
 

package/docs/components/Select.md

@@ -2,6 +2,8 @@
 
 Dropdown select with single/multiple value, search, and async data.
 
+The options list uses `bridge-soft-scrollbar`. See [Scroll utilities](../ScrollUtilities.md).
+
 ## Import
 
 ```ts
@@ -170,7 +172,7 @@ When unset, `showFooter` defaults to `true` for `modal` / `drawer` overlays (`fa
 
 ### Inherited from FormField
 
-See [FormField](./FormField.md) (building-block chrome). Field tokens live on `components.Select` (`size`, `color`, `rounded`, `variant`, …). Dropdown option tokens are nested under `components.Select.tokens.listbox`.
+See [FormField](./FormField.md) (building-block chrome). Field tokens live on `components.Select` (`size`, `color`, `rounded`, `variant`, …). Dropdown option tokens live on `components.Listbox`.
 
 ## Slots
 

package/docs/components/Stepper.md

@@ -0,0 +1,60 @@
+# Stepper
+
+Multi-step flow indicator for checkout, onboarding, and wizards. Shows progress through ordered steps; optional click-to-navigate when steps are completed or `linear` is off. Compose with `Step`.
+
+Wizard footer actions (`Next` / `Back`) stay in the app — `Stepper` is the indicator (plus optional vertical step bodies). A labeled progress bar is `Progress`, not `Stepper`.
+
+## Import
+
+```ts
+import { Stepper } from "@bridge-ui/vue/Components/Stepper";
+import { Step } from "@bridge-ui/vue/Components/Step";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Stepper v-model="active">
+  <Step label="Account" />
+  <Step label="Profile" />
+  <Step label="Confirm" />
+</Stepper>
+```
+
+### Vertical
+
+```vue
+<Stepper v-model="active" orientation="vertical">
+  <Step label="Cart" description="Review items">
+    Cart details…
+  </Step>
+  <Step label="Shipping" description="Address">
+    Shipping form…
+  </Step>
+  <Step label="Pay" description="Payment">
+    Payment form…
+  </Step>
+</Stepper>
+```
+
+### Non-linear
+
+```vue
+<Stepper :linear="false" v-model="active">
+  <Step label="Account" />
+  <Step label="Profile" />
+  <Step label="Confirm" />
+</Stepper>
+```
+
+### Error and disabled
+
+```vue
+<Stepper v-model="active">
+  <Step label="Account" />
+  <Step error label="Profile" />
+  <Step disabled label="Confirm" />
+</Stepper>
+```

package/docs/components/TimePanel.md

@@ -37,7 +37,6 @@ import { TimePanel } from "@bridge-ui/vue/Components/TimePanel";
 | `rounded`      | `CalendarRounded`      | `"md"`      | Border radius of time tiles.                    |
 | `showSeconds`  | `boolean`              | `false`     | Shows seconds in the panel and formatted value. |
 | `timeZone`     | `string`               | —           | IANA time zone.                                 |
-| `tokens`       | `TimePanelTokens`      | —           | Token overrides.                                |
 | `value`        | `Date \| null`         | —           | Selected time (`Date` wall clock).              |
 
 ### v-model
@@ -47,6 +46,10 @@ import { TimePanel } from "@bridge-ui/vue/Components/TimePanel";
 | `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
+
+Columns use `bridge-scroll-fade-y` and `bridge-hide-scrollbar` by default. Add `bridge-scroll-fade-none` via `classes.column` to disable the fade. See [Scroll utilities](../ScrollUtilities.md).
+
 ## Events
 
 | Event         | Payload                 | Description                    |

package/docs/components/TimePicker.md

@@ -42,7 +42,6 @@ import { TimePicker } from "@bridge-ui/vue/Components/TimePicker";
 | `showSeconds`  | `boolean`               | `false`     | Shows seconds in the panel and formatted value.       |
 | `slots`        | `TimePickerSlots`       | —           | Named slots (`footer` for Cancel / Apply).            |
 | `timeZone`     | `string`                | —           | IANA time zone.                                       |
-| `tokens`       | `TimePickerTokens`      | —           | Token overrides.                                      |
 | `value`        | `Date \| null`          | —           | Controlled value.                                     |
 
 ### v-model
@@ -52,6 +51,8 @@ import { TimePicker } from "@bridge-ui/vue/Components/TimePicker";
 | `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
+
 ## Events
 
 | Event         | Payload                 | Description                                                             |

package/docs/components/TimeRangePicker.md

@@ -37,7 +37,6 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
 | `interval`     | `number`                     | `1`            | Minute step between options.                          |
 | `maxTime`      | `Date`                       | —              | Latest selectable time.                               |
 | `minTime`      | `Date`                       | —              | Earliest selectable time.                             |
-| `orientation`  | `"horizontal" \| "vertical"` | `"horizontal"` | Layout of start / end time panels.                    |
 | `readOnly`     | `boolean`                    | `false`        | Prevents selection.                                   |
 | `rounded`      | `CalendarRounded`            | `"md"`         | Border radius of time tiles and chrome.               |
 | `showFooter`   | `boolean`                    | `false`        | Shows Cancel / Apply. Selection is draft until Apply. |
@@ -45,7 +44,6 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
 | `slots`        | `TimeRangePickerSlots`       | —              | Named slots (`footer` for Cancel / Apply).            |
 | `startTitle`   | `string`                     | `"Start time"` | Label above the start time panel.                     |
 | `timeZone`     | `string`                     | —              | IANA time zone.                                       |
-| `tokens`       | `TimeRangePickerTokens`      | —              | Token overrides.                                      |
 | `value`        | `TimeRangeValue \| null`     | —              | Controlled value (`[start, end]`).                    |
 
 ### v-model
@@ -55,6 +53,8 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
 | `modelValue`        | `TimeRangeValue \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: TimeRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
+
 ## Events
 
 | Event         | Payload                           | Description                                                             |

package/docs/examples/icon-fontawesome.ts

@@ -24,6 +24,7 @@ import {
   faClock,
   faEye,
   faEyeSlash,
+  faPalette,
   faSpinner,
   faTriangleExclamation,
   faUpDown,
@@ -92,6 +93,7 @@ const icons = {
   loader: faSpinner,
   info: faCircleInfo,
   eyeOff: faEyeSlash,
+  palette: faPalette,
   error: faCircleXmark,
   success: faCircleCheck,
   chevronUp: faChevronUp,

package/docs/examples/icon-heroicons.ts

@@ -22,6 +22,7 @@ import {
   EyeIcon,
   EyeSlashIcon,
   InformationCircleIcon,
+  SwatchIcon,
   UserIcon,
   XCircleIcon,
   XMarkIcon,
@@ -39,6 +40,7 @@ const icons = {
   check: CheckIcon,
   clock: ClockIcon,
   error: XCircleIcon,
+  palette: SwatchIcon,
   eyeOff: EyeSlashIcon,
   loader: ArrowPathIcon,
   success: CheckCircleIcon,

package/docs/examples/icon-lucide.ts

@@ -22,6 +22,7 @@ import {
   EyeOff,
   Info,
   Loader2,
+  Palette,
   TriangleAlert,
   User,
   X,
@@ -42,6 +43,7 @@ const icons = {
   error: CircleX,
   eyeOff: EyeOff,
   loader: Loader2,
+  palette: Palette,
   alert: CircleAlert,
   calendar: Calendar,
   success: CircleCheck,

package/docs/examples/icon-phosphor.ts

@@ -19,6 +19,7 @@ import {
   PhEye,
   PhEyeSlash,
   PhInfo,
+  PhPalette,
   PhSpinnerGap,
   PhUser,
   PhWarning,
@@ -41,6 +42,7 @@ const icons = {
   clock: PhClock,
   error: PhXCircle,
   eyeOff: PhEyeSlash,
+  palette: PhPalette,
   warning: PhWarning,
   loader: PhSpinnerGap,
   chevronUp: PhCaretUp,

package/docs/examples/icon-tabler.ts

@@ -22,6 +22,7 @@ import {
   IconEyeOff,
   IconInfoCircle,
   IconLoader2,
+  IconPalette,
   IconSelector,
   IconUser,
   IconX,
@@ -42,6 +43,7 @@ const icons = {
   eyeOff: IconEyeOff,
   loader: IconLoader2,
   info: IconInfoCircle,
+  palette: IconPalette,
   alert: IconAlertCircle,
   success: IconCircleCheck,
   chevronUp: IconChevronUp,

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "license": "MIT",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "BridgeUI",
   "sideEffects": false,
   "name": "@bridge-ui/vue",
@@ -83,7 +83,7 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@bridge-ui/core": "^0.1.0",
+    "@bridge-ui/core": "^0.2.0",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.50.0",
     "tailwind-merge": "^3.6.0"