@bridge-ui/vue 0.1.0 → 0.2.0

package/dist/index.js

@@ -57,90 +57,98 @@ import { useCalendarYear as fe } from "./Components/CalendarYear/composables/use
 import pe from "./Components/CalendarYear/CalendarYear.js";
 import me from "./Components/Calendar/Calendar.js";
 import { useCalendarRange as he } from "./Components/CalendarRange/composables/useCalendarRange.js";
-import ge from "./Components/CalendarRange/CalendarRange.js";
-import { useCard as _e } from "./Components/Card/composables/useCard.js";
-import ve from "./Components/Card/Card.js";
-import { useFormControl as ye } from "./Components/FormControl/composables/useFormControl.js";
-import be from "./Components/FormControl/FormControl.js";
-import { useCheckbox as xe } from "./Components/Checkbox/composables/useCheckbox.js";
-import Se from "./Components/Checkbox/Checkbox.js";
-import { useDateField as Ce } from "./Components/DateField/composables/useDateField.js";
-import { useDatePicker as we } from "./Components/DatePicker/composables/useDatePicker.js";
-import Te from "./Components/DatePicker/DatePicker.js";
-import Ee from "./Components/DateField/DateField.js";
-import { useDateRangeField as De } from "./Components/DateRangeField/composables/useDateRangeField.js";
-import { useDateRangePicker as Oe } from "./Components/DateRangePicker/composables/useDateRangePicker.js";
-import ke from "./Components/DateRangePicker/DateRangePicker.js";
-import Ae from "./Components/DateRangeField/DateRangeField.js";
-import { useDateTimeField as je } from "./Components/DateTimeField/composables/useDateTimeField.js";
-import { useDateTimePicker as Me } from "./Components/DateTimePicker/composables/useDateTimePicker.js";
-import { useTimePanel as Ne } from "./Components/TimePanel/composables/useTimePanel.js";
-import Pe from "./Components/TimePanel/TimePanel.js";
-import Fe from "./Components/DateTimePicker/DateTimePicker.js";
-import Ie from "./Components/DateTimeField/DateTimeField.js";
-import { useDateTimeRangeField as Le } from "./Components/DateTimeRangeField/composables/useDateTimeRangeField.js";
-import { useDateTimeRangePicker as Re } from "./Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js";
-import ze from "./Components/DateTimeRangePicker/DateTimeRangePicker.js";
-import Be from "./Components/DateTimeRangeField/DateTimeRangeField.js";
-import { useDivider as Ve } from "./Components/Divider/composables/useDivider.js";
-import He from "./Components/Divider/Divider.js";
-import { useLink as Ue } from "./Components/Link/composables/useLink.js";
-import We from "./Components/Link/Link.js";
-import { useNumberField as Ge } from "./Components/NumberField/composables/useNumberField.js";
-import Ke from "./Components/NumberField/NumberField.js";
-import { useOtpField as qe } from "./Components/OtpField/composables/useOtpField.js";
-import Je from "./Components/OtpField/OtpField.js";
-import { usePagination as Ye } from "./Components/Pagination/composables/usePagination.js";
-import Xe from "./Components/Pagination/Pagination.js";
-import { usePasswordField as Ze } from "./Components/PasswordField/composables/usePasswordField.js";
-import Qe from "./Components/PasswordField/PasswordField.js";
-import { useRadio as $e } from "./Components/Radio/composables/useRadio.js";
-import et from "./Components/Radio/Radio.js";
-import tt from "./Components/Select/Select.js";
-import nt from "./Components/Select/SelectOption.js";
-import { useSkeleton as rt } from "./Components/Skeleton/composables/useSkeleton.js";
-import it from "./Components/Skeleton/Skeleton.js";
-import { useSlider as at } from "./Components/Slider/composables/useSlider.js";
-import { useTooltip as ot } from "./Components/Tooltip/composables/useTooltip.js";
-import st from "./Components/Tooltip/Tooltip.js";
-import ct from "./Components/Slider/Slider.js";
-import { useSnackbar as lt } from "./Components/Snackbar/composables/useSnackbar.js";
-import ut from "./Components/Snackbar/Snackbar.js";
-import { useSpinner as dt } from "./Components/Spinner/composables/useSpinner.js";
-import ft from "./Components/Spinner/Spinner.js";
-import { useSwitch as pt } from "./Components/Switch/composables/useSwitch.js";
-import mt from "./Components/Switch/Switch.js";
-import { TABS_INJECTION_KEY as ht } from "./Components/Tabs/tabsInjectionKey.js";
-import { useTab as gt } from "./Components/Tab/composables/useTab.js";
-import _t from "./Components/Tab/Tab.js";
-import { useTabItem as vt } from "./Components/TabItem/composables/useTabItem.js";
-import yt from "./Components/TabItem/TabItem.js";
-import { useTabList as bt } from "./Components/TabList/composables/useTabList.js";
-import xt from "./Components/TabList/TabList.js";
-import { useTabPanel as St } from "./Components/TabPanel/composables/useTabPanel.js";
-import Ct from "./Components/TabPanel/TabPanel.js";
-import { useTabs as wt } from "./Components/Tabs/composables/useTabs.js";
-import Tt from "./Components/Tabs/Tabs.js";
-import { useTextarea as Et } from "./Components/Textarea/composables/useTextarea.js";
-import Dt from "./Components/Textarea/Textarea.js";
-import { useTextField as Ot } from "./Components/TextField/composables/useTextField.js";
-import kt from "./Components/TextField/TextField.js";
-import { useTimeField as At } from "./Components/TimeField/composables/useTimeField.js";
-import { useTimePicker as jt } from "./Components/TimePicker/composables/useTimePicker.js";
-import Mt from "./Components/TimePicker/TimePicker.js";
-import Nt from "./Components/TimeField/TimeField.js";
-import { useTimeRangeField as Pt } from "./Components/TimeRangeField/composables/useTimeRangeField.js";
-import { useTimeRangePicker as Ft } from "./Components/TimeRangePicker/composables/useTimeRangePicker.js";
-import It from "./Components/TimeRangePicker/TimeRangePicker.js";
-import Lt from "./Components/TimeRangeField/TimeRangeField.js";
-import { TOGGLE_GROUP_INJECTION_KEY as Rt } from "./Components/ToggleGroup/toggleGroupInjectionKey.js";
-import { useToggleGroup as zt } from "./Components/ToggleGroup/composables/useToggleGroup.js";
-import Bt from "./Components/ToggleGroup/ToggleGroup.js";
-import { useToggleItem as Vt } from "./Components/ToggleItem/composables/useToggleItem.js";
-import Ht from "./Components/ToggleItem/ToggleItem.js";
-import Ut from "./Provider/BridgeUIProvider.js";
-import { createBridgeUI as Wt } from "./Provider/createBridgeUI.js";
-import { SEMANTIC_ICON_NAMES as Gt, resolveMessage as Kt } from "@bridge-ui/core/Adapters";
-import { cn as qt } from "@bridge-ui/core/Utils";
-import { BRIDGE_UI_DEFAULT_GLOBAL as Jt, mergeBridgeUIComponents as Yt, mergeBridgeUIGlobal as Xt, resolveBridgeUIOptions as Zt } from "@bridge-ui/core/Config";
-export { l as ACCORDION_INJECTION_KEY, m as Accordion, _ as AccordionItem, y as Alert, X as Autocomplete, Z as AutocompleteOption, Q as Avatar, Jt as BRIDGE_UI_DEFAULT_GLOBAL, ee as Badge, te as BaseField, oe as Breadcrumb, ae as BreadcrumbItem, Ut as BridgeUIProvider, P as Button, me as Calendar, le as CalendarDate, de as CalendarMonth, ge as CalendarRange, pe as CalendarYear, ve as Card, Se as Checkbox, O as Chip, Ee as DateField, Te as DatePicker, Ae as DateRangeField, ke as DateRangePicker, Ie as DateTimeField, Fe as DateTimePicker, Be as DateTimeRangeField, ze as DateTimeRangePicker, He as Divider, L as Drawer, H as FieldOverlay, be as FormControl, j as FormField, g as Icon, A as Label, We as Link, W as List, G as ListItem, K as ListSection, Y as Listbox, z as Menu, V as Modal, Ke as NumberField, Je as OtpField, Xe as Pagination, Qe as PasswordField, J as Progress, et as Radio, Gt as SEMANTIC_ICON_NAMES, tt as Select, nt as SelectOption, it as Skeleton, ct as Slider, ut as Snackbar, ft as Spinner, mt as Switch, ht as TABS_INJECTION_KEY, Rt as TOGGLE_GROUP_INJECTION_KEY, _t as Tab, yt as TabItem, xt as TabList, Ct as TabPanel, Tt as Tabs, kt as TextField, Dt as Textarea, Nt as TimeField, Pe as TimePanel, Mt as TimePicker, Lt as TimeRangeField, It as TimeRangePicker, Bt as ToggleGroup, Ht as ToggleItem, st as Tooltip, qt as cn, Wt as createBridgeUI, x as findFirstEnabledOptionIndex, S as findLastEnabledOptionIndex, C as getListboxActiveDescendantId, w as getListboxOptionId, Yt as mergeBridgeUIComponents, Xt as mergeBridgeUIGlobal, T as moveListboxHighlight, Zt as resolveBridgeUIOptions, Kt as resolveMessage, t as setDateAdapterForTests, i as setI18nAdapterForTests, s as setIconAdapterForTests, p as useAccordion, h as useAccordionItem, v as useAlert, $ as useBadge, ne as useBaseField, re as useBreadcrumb, ie as useBreadcrumbItem, u as useBreakpoint, e as useBridgeUI, d as useBridgeUIComponent, f as useBridgeUIMergedRegistryClasses, N as useButton, se as useCalendar, ce as useCalendarDate, ue as useCalendarMonth, he as useCalendarRange, fe as useCalendarYear, _e as useCard, xe as useCheckbox, D as useChip, n as useDateAdapter, r as useDateAdapterContext, Ce as useDateField, we as useDatePicker, De as useDateRangeField, Oe as useDateRangePicker, je as useDateTimeField, Me as useDateTimePicker, Le as useDateTimeRangeField, Re as useDateTimeRangePicker, Ve as useDivider, I as useDrawer, F as useFieldOverlay, ye as useFormControl, b as useFormField, a as useI18nAdapter, c as useIconAdapter, k as useLabel, Ue as useLink, U as useList, M as useListbox, E as useListboxNavigation, R as useMenu, B as useModal, Ge as useNumberField, qe as useOtpField, Ye as usePagination, Ze as usePasswordField, q as useProgress, $e as useRadio, o as useResolveMessage, rt as useSkeleton, at as useSlider, lt as useSnackbar, dt as useSpinner, pt as useSwitch, gt as useTab, vt as useTabItem, bt as useTabList, St as useTabPanel, wt as useTabs, Ot as useTextField, Et as useTextarea, At as useTimeField, Ne as useTimePanel, jt as useTimePicker, Pt as useTimeRangeField, Ft as useTimeRangePicker, zt as useToggleGroup, Vt as useToggleItem, ot as useTooltip };
+import { useDivider as ge } from "./Components/Divider/composables/useDivider.js";
+import _e from "./Components/Divider/Divider.js";
+import ve from "./Components/CalendarRange/CalendarRange.js";
+import { useCard as ye } from "./Components/Card/composables/useCard.js";
+import be from "./Components/Card/Card.js";
+import { useFormControl as xe } from "./Components/FormControl/composables/useFormControl.js";
+import Se from "./Components/FormControl/FormControl.js";
+import { useCheckbox as Ce } from "./Components/Checkbox/composables/useCheckbox.js";
+import we from "./Components/Checkbox/Checkbox.js";
+import { useColorField as Te } from "./Components/ColorField/composables/useColorField.js";
+import { useColorPicker as Ee } from "./Components/ColorPicker/composables/useColorPicker.js";
+import De from "./Components/ColorPicker/ColorPicker.js";
+import Oe from "./Components/ColorField/ColorField.js";
+import { useDateField as ke } from "./Components/DateField/composables/useDateField.js";
+import { useDatePicker as Ae } from "./Components/DatePicker/composables/useDatePicker.js";
+import je from "./Components/DatePicker/DatePicker.js";
+import Me from "./Components/DateField/DateField.js";
+import { useDateRangeField as Ne } from "./Components/DateRangeField/composables/useDateRangeField.js";
+import { useDateRangePicker as Pe } from "./Components/DateRangePicker/composables/useDateRangePicker.js";
+import Fe from "./Components/DateRangePicker/DateRangePicker.js";
+import Ie from "./Components/DateRangeField/DateRangeField.js";
+import { useDateTimeField as Le } from "./Components/DateTimeField/composables/useDateTimeField.js";
+import { useDateTimePicker as Re } from "./Components/DateTimePicker/composables/useDateTimePicker.js";
+import { useTimePanel as ze } from "./Components/TimePanel/composables/useTimePanel.js";
+import Be from "./Components/TimePanel/TimePanel.js";
+import Ve from "./Components/DateTimePicker/DateTimePicker.js";
+import He from "./Components/DateTimeField/DateTimeField.js";
+import { useDateTimeRangeField as Ue } from "./Components/DateTimeRangeField/composables/useDateTimeRangeField.js";
+import { useDateTimeRangePicker as We } from "./Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js";
+import Ge from "./Components/DateTimeRangePicker/DateTimeRangePicker.js";
+import Ke from "./Components/DateTimeRangeField/DateTimeRangeField.js";
+import { useLink as qe } from "./Components/Link/composables/useLink.js";
+import Je from "./Components/Link/Link.js";
+import { useNumberField as Ye } from "./Components/NumberField/composables/useNumberField.js";
+import Xe from "./Components/NumberField/NumberField.js";
+import { useOtpField as Ze } from "./Components/OtpField/composables/useOtpField.js";
+import Qe from "./Components/OtpField/OtpField.js";
+import { usePagination as $e } from "./Components/Pagination/composables/usePagination.js";
+import et from "./Components/Pagination/Pagination.js";
+import { usePasswordField as tt } from "./Components/PasswordField/composables/usePasswordField.js";
+import nt from "./Components/PasswordField/PasswordField.js";
+import { useRadio as rt } from "./Components/Radio/composables/useRadio.js";
+import it from "./Components/Radio/Radio.js";
+import at from "./Components/Select/Select.js";
+import ot from "./Components/Select/SelectOption.js";
+import { useSkeleton as st } from "./Components/Skeleton/composables/useSkeleton.js";
+import ct from "./Components/Skeleton/Skeleton.js";
+import { useSlider as lt } from "./Components/Slider/composables/useSlider.js";
+import { useTooltip as ut } from "./Components/Tooltip/composables/useTooltip.js";
+import dt from "./Components/Tooltip/Tooltip.js";
+import ft from "./Components/Slider/Slider.js";
+import { useSnackbar as pt } from "./Components/Snackbar/composables/useSnackbar.js";
+import mt from "./Components/Snackbar/Snackbar.js";
+import { useSpinner as ht } from "./Components/Spinner/composables/useSpinner.js";
+import gt from "./Components/Spinner/Spinner.js";
+import { useStep as _t } from "./Components/Step/composables/useStep.js";
+import vt from "./Components/Step/Step.js";
+import { useStepper as yt } from "./Components/Stepper/composables/useStepper.js";
+import bt from "./Components/Stepper/Stepper.js";
+import { useSwitch as xt } from "./Components/Switch/composables/useSwitch.js";
+import St from "./Components/Switch/Switch.js";
+import { TABS_INJECTION_KEY as Ct } from "./Components/Tabs/tabsInjectionKey.js";
+import { useTab as wt } from "./Components/Tab/composables/useTab.js";
+import Tt from "./Components/Tab/Tab.js";
+import { useTabItem as Et } from "./Components/TabItem/composables/useTabItem.js";
+import Dt from "./Components/TabItem/TabItem.js";
+import { useTabList as Ot } from "./Components/TabList/composables/useTabList.js";
+import kt from "./Components/TabList/TabList.js";
+import { useTabPanel as At } from "./Components/TabPanel/composables/useTabPanel.js";
+import jt from "./Components/TabPanel/TabPanel.js";
+import { useTabs as Mt } from "./Components/Tabs/composables/useTabs.js";
+import Nt from "./Components/Tabs/Tabs.js";
+import { useTextarea as Pt } from "./Components/Textarea/composables/useTextarea.js";
+import Ft from "./Components/Textarea/Textarea.js";
+import { useTextField as It } from "./Components/TextField/composables/useTextField.js";
+import Lt from "./Components/TextField/TextField.js";
+import { useTimeField as Rt } from "./Components/TimeField/composables/useTimeField.js";
+import { useTimePicker as zt } from "./Components/TimePicker/composables/useTimePicker.js";
+import Bt from "./Components/TimePicker/TimePicker.js";
+import Vt from "./Components/TimeField/TimeField.js";
+import { useTimeRangeField as Ht } from "./Components/TimeRangeField/composables/useTimeRangeField.js";
+import { useTimeRangePicker as Ut } from "./Components/TimeRangePicker/composables/useTimeRangePicker.js";
+import Wt from "./Components/TimeRangePicker/TimeRangePicker.js";
+import Gt from "./Components/TimeRangeField/TimeRangeField.js";
+import { TOGGLE_GROUP_INJECTION_KEY as Kt } from "./Components/ToggleGroup/toggleGroupInjectionKey.js";
+import { useToggleGroup as qt } from "./Components/ToggleGroup/composables/useToggleGroup.js";
+import Jt from "./Components/ToggleGroup/ToggleGroup.js";
+import { useToggleItem as Yt } from "./Components/ToggleItem/composables/useToggleItem.js";
+import Xt from "./Components/ToggleItem/ToggleItem.js";
+import Zt from "./Provider/BridgeUIProvider.js";
+import { createBridgeUI as Qt } from "./Provider/createBridgeUI.js";
+import { SEMANTIC_ICON_NAMES as $t, resolveMessage as en } from "@bridge-ui/core/Adapters";
+import { cn as tn } from "@bridge-ui/core/Utils";
+import { BRIDGE_UI_DEFAULT_GLOBAL as nn, mergeBridgeUIComponents as rn, mergeBridgeUIGlobal as an, resolveBridgeUIOptions as on } from "@bridge-ui/core/Config";
+export { l as ACCORDION_INJECTION_KEY, m as Accordion, _ as AccordionItem, y as Alert, X as Autocomplete, Z as AutocompleteOption, Q as Avatar, nn as BRIDGE_UI_DEFAULT_GLOBAL, ee as Badge, te as BaseField, oe as Breadcrumb, ae as BreadcrumbItem, Zt as BridgeUIProvider, P as Button, me as Calendar, le as CalendarDate, de as CalendarMonth, ve as CalendarRange, pe as CalendarYear, be as Card, we as Checkbox, O as Chip, Oe as ColorField, De as ColorPicker, Me as DateField, je as DatePicker, Ie as DateRangeField, Fe as DateRangePicker, He as DateTimeField, Ve as DateTimePicker, Ke as DateTimeRangeField, Ge as DateTimeRangePicker, _e as Divider, L as Drawer, H as FieldOverlay, Se as FormControl, j as FormField, g as Icon, A as Label, Je as Link, W as List, G as ListItem, K as ListSection, Y as Listbox, z as Menu, V as Modal, Xe as NumberField, Qe as OtpField, et as Pagination, nt as PasswordField, J as Progress, it as Radio, $t as SEMANTIC_ICON_NAMES, at as Select, ot as SelectOption, ct as Skeleton, ft as Slider, mt as Snackbar, gt as Spinner, vt as Step, bt as Stepper, St as Switch, Ct as TABS_INJECTION_KEY, Kt as TOGGLE_GROUP_INJECTION_KEY, Tt as Tab, Dt as TabItem, kt as TabList, jt as TabPanel, Nt as Tabs, Lt as TextField, Ft as Textarea, Vt as TimeField, Be as TimePanel, Bt as TimePicker, Gt as TimeRangeField, Wt as TimeRangePicker, Jt as ToggleGroup, Xt as ToggleItem, dt as Tooltip, tn as cn, Qt as createBridgeUI, x as findFirstEnabledOptionIndex, S as findLastEnabledOptionIndex, C as getListboxActiveDescendantId, w as getListboxOptionId, rn as mergeBridgeUIComponents, an as mergeBridgeUIGlobal, T as moveListboxHighlight, on as resolveBridgeUIOptions, en as resolveMessage, t as setDateAdapterForTests, i as setI18nAdapterForTests, s as setIconAdapterForTests, p as useAccordion, h as useAccordionItem, v as useAlert, $ as useBadge, ne as useBaseField, re as useBreadcrumb, ie as useBreadcrumbItem, u as useBreakpoint, e as useBridgeUI, d as useBridgeUIComponent, f as useBridgeUIMergedRegistryClasses, N as useButton, se as useCalendar, ce as useCalendarDate, ue as useCalendarMonth, he as useCalendarRange, fe as useCalendarYear, ye as useCard, Ce as useCheckbox, D as useChip, Te as useColorField, Ee as useColorPicker, n as useDateAdapter, r as useDateAdapterContext, ke as useDateField, Ae as useDatePicker, Ne as useDateRangeField, Pe as useDateRangePicker, Le as useDateTimeField, Re as useDateTimePicker, Ue as useDateTimeRangeField, We as useDateTimeRangePicker, ge as useDivider, I as useDrawer, F as useFieldOverlay, xe as useFormControl, b as useFormField, a as useI18nAdapter, c as useIconAdapter, k as useLabel, qe as useLink, U as useList, M as useListbox, E as useListboxNavigation, R as useMenu, B as useModal, Ye as useNumberField, Ze as useOtpField, $e as usePagination, tt as usePasswordField, q as useProgress, rt as useRadio, o as useResolveMessage, st as useSkeleton, lt as useSlider, pt as useSnackbar, ht as useSpinner, _t as useStep, yt as useStepper, xt as useSwitch, wt as useTab, Et as useTabItem, Ot as useTabList, At as useTabPanel, Mt as useTabs, It as useTextField, Pt as useTextarea, Rt as useTimeField, ze as useTimePanel, zt as useTimePicker, Ht as useTimeRangeField, Ut as useTimeRangePicker, qt as useToggleGroup, Yt as useToggleItem, ut as useTooltip };

package/dist/theme.css

@@ -1,3 +1,5 @@
+@import "@bridge-ui/core/utilities.css";
+
 @source "./Actions";
 @source "./Components";
 @source "../../core/dist/Tokens";

package/docs/README.md

@@ -20,6 +20,8 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [CalendarYear](./components/CalendarYear.md)
 - [Card](./components/Card.md)
 - [Checkbox](./components/Checkbox.md)
+- [ColorField](./components/ColorField.md)
+- [ColorPicker](./components/ColorPicker.md)
 - [DateField](./components/DateField.md)
 - [DatePicker](./components/DatePicker.md)
 - [DateRangeField](./components/DateRangeField.md)
@@ -50,6 +52,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [Slider](./components/Slider.md)
 - [Snackbar](./components/Snackbar.md)
 - [Spinner](./components/Spinner.md)
+- [Stepper](./components/Stepper.md)
 - [Switch](./components/Switch.md)
 - [Tabs](./components/Tabs.md)
 - [Textarea](./components/Textarea.md)
@@ -67,6 +70,10 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [useModalAction](./components/useModalAction.md)
 - [useSnackbarAction](./components/useSnackbarAction.md)
 
+## Theme CSS
+
+- [Scroll utilities](./ScrollUtilities.md)
+
 ## Examples (adapters)
 
 - [`examples/i18n-dictionary.ts`](./examples/i18n-dictionary.ts)

package/docs/ScrollUtilities.md

@@ -0,0 +1,89 @@
+# Scroll utilities
+
+CSS utilities for overflow scrollers. They ship in `theme.css` — no extra import.
+
+Not a component. Put the class on the element that has `overflow-y-auto` / `overflow-x-auto`.
+
+## Classes
+
+| Class                     | Role                                                                   |
+| ------------------------- | ---------------------------------------------------------------------- |
+| `bridge-scroll-fade`      | Vertical fade (alias of `-y`).                                         |
+| `bridge-scroll-fade-y`    | Vertical fade on the overflow scroller.                                |
+| `bridge-scroll-fade-x`    | Horizontal fade on the overflow scroller.                              |
+| `bridge-scroll-fade-none` | Disable the fade. Works in any class order.                            |
+| `bridge-soft-scrollbar`   | Thin, rounded thumb.                                                   |
+| `bridge-hide-scrollbar`   | Hide the scrollbar; wheel / keyboard / programmatic scroll still work. |
+
+## Examples
+
+### Vertical fade
+
+```vue
+<div class="bridge-scroll-fade-y overflow-y-auto">…</div>
+```
+
+### Horizontal fade
+
+```vue
+<div class="flex bridge-scroll-fade-x overflow-x-auto">…</div>
+```
+
+### Hide scrollbar
+
+```vue
+<div class="bridge-scroll-fade-y bridge-hide-scrollbar overflow-y-auto">
+  …
+</div>
+```
+
+### Fade size
+
+Depth defaults to `12%` of the container, capped at `40px`. Override with `--bridge-scroll-fade-size`:
+
+```vue
+<div
+  class="bridge-scroll-fade-y overflow-y-auto [--bridge-scroll-fade-size:1.5rem]"
+>
+  …
+</div>
+```
+
+### Disable the fade
+
+```vue
+<div class="bridge-scroll-fade-y bridge-scroll-fade-none overflow-y-auto">
+  …
+</div>
+```
+
+### Soft scrollbar
+
+```vue
+<div class="bridge-soft-scrollbar overflow-y-auto">…</div>
+```
+
+Do not pair `bridge-scroll-fade-*` with `bridge-soft-scrollbar` on the same node — the mask dissolves the thumb at the edges. Use fade + `bridge-hide-scrollbar` when the fade is the overflow hint.
+
+Do not put `bridge-scroll-fade-x` and `bridge-scroll-fade-y` on the same node — both set `mask-image`, and the later rule wins.
+
+Put background and border on a wrapper; put `bridge-scroll-fade-*` on the inner scroller so the mask dissolves content, not the card chrome.
+
+## Behavior
+
+- Scroll-aware when the browser supports scroll-driven animations: crisp start edge at rest, both edges mid-scroll, crisp end edge at the end.
+- If content does not overflow, no fade.
+- Without scroll-driven animations, no fade. Wheel / keyboard / programmatic scroll still work.
+- `bridge-scroll-fade-x` follows reading direction (RTL included).
+
+## TimePanel
+
+TimePanel columns use `bridge-scroll-fade-y` and `bridge-hide-scrollbar` by default. Add `bridge-scroll-fade-none` via `classes.column` to disable the fade.
+
+## Also used by
+
+| Component                       | Classes                                                                  |
+| ------------------------------- | ------------------------------------------------------------------------ |
+| Select / Listbox                | `bridge-soft-scrollbar` on the options scroller.                         |
+| Modal / Drawer `scroll="paper"` | `bridge-scroll-fade-y` and `bridge-hide-scrollbar` on the panel.         |
+| FieldOverlay drawer             | Inner `bridge-scroll-fade-x`; vertical fade comes from `scroll="paper"`. |

package/docs/components/Autocomplete.md

@@ -2,6 +2,8 @@
 
 Combobox with single/multiple value, search, async data, and optional free-solo input.
 
+The options list uses `bridge-soft-scrollbar`. See [Scroll utilities](../ScrollUtilities.md).
+
 ## Import
 
 ```ts
@@ -187,7 +189,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.Autocomplete` (`size`, `color`, `rounded`, `variant`, …). Dropdown option tokens are nested under `components.Autocomplete.tokens.listbox`.
+See [FormField](./FormField.md) (building-block chrome). Field tokens live on `components.Autocomplete` (`size`, `color`, `rounded`, `variant`, …). Dropdown option tokens live on `components.Listbox`.
 
 ## Slots
 

package/docs/components/BridgeUIProvider.md

@@ -99,7 +99,7 @@ app.use(
 
 ### Nested chrome tokens
 
-Building blocks (`FormField`, `FormControl`, `BaseField`, `Listbox`) are not registry keys. Theme chrome under the public parent:
+Building blocks (`FormField`, `FormControl`, `BaseField`) are not registry keys. Theme chrome under the public parent. Dropdown tokens live on `components.Listbox`:
 
 ```ts
 app.use(
@@ -121,17 +121,15 @@ app.use(
           },
         },
       },
-      Select: {
+      Listbox: {
         tokens: {
-          listbox: {
-            size: {
-              md: {
-                option: "px-3 py-2 text-sm",
-                check: "size-4",
-                message: "text-xs",
-                primary: "font-medium",
-                secondary: "text-xs opacity-70",
-              },
+          size: {
+            md: {
+              option: "px-3 py-2 text-sm",
+              check: "size-4",
+              message: "text-xs",
+              primary: "font-medium",
+              secondary: "text-xs opacity-70",
             },
           },
         },

package/docs/components/Calendar.md

@@ -72,7 +72,6 @@ import { Calendar } from "@bridge-ui/vue/Components/Calendar";
 | `slots`           | `CalendarDateSlots`   | —           | Named slots forwarded to `CalendarDate` (`day`).          |
 | `startOfWeek`     | `StartOfWeek`         | `0`         | First day of the week (`0` = Sunday).                     |
 | `timeZone`        | `string`              | —           | IANA time zone.                                           |
-| `tokens`          | `CalendarTokens`      | —           | Token overrides.                                          |
 | `value`           | `DatePickerModel`     | —           | Controlled selection model.                               |
 | `view`            | `CalendarView`        | —           | Controlled panel view. Pair with `view-change`.           |
 | `viewDate`        | `Date`                | —           | Controlled displayed month. Pair with `view-date-change`. |
@@ -84,6 +83,8 @@ import { Calendar } from "@bridge-ui/vue/Components/Calendar";
 | `modelValue`        | `DatePickerModel`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: DatePickerModel) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar chrome tokens live on `components.Calendar` (`color`, `day`, `rounded`).
+
 ## Events
 
 | Event                      | Payload                    | Description                                        |

package/docs/components/CalendarDate.md

@@ -48,7 +48,6 @@ import { CalendarDate } from "@bridge-ui/vue/Components/CalendarDate";
 | `slots`           | `{ day?: … }`             | —           | Named slots (`day`).                              |
 | `startOfWeek`     | `StartOfWeek`             | `0`         | First day of the week.                            |
 | `timeZone`        | `string`                  | —           | IANA time zone.                                   |
-| `tokens`          | `CalendarDateTokens`      | —           | Token overrides.                                  |
 | `value`           | `DatePickerModel`         | —           | Controlled selection model.                       |
 | `viewDate`        | `Date`                    | —           | Month currently displayed in the grid.            |
 
@@ -59,6 +58,8 @@ import { CalendarDate } from "@bridge-ui/vue/Components/CalendarDate";
 | `modelValue`        | `DatePickerModel`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: DatePickerModel) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar chrome tokens live on `components.Calendar` (`color`, `day`, `rounded`).
+
 ## Events
 
 | Event                      | Payload                    | Description                                        |

package/docs/components/CalendarMonth.md

@@ -31,7 +31,6 @@ import { CalendarMonth } from "@bridge-ui/vue/Components/CalendarMonth";
 | `readOnly`      | `boolean`                  | `false`      | Prevents selection.                                  |
 | `rounded`       | `CalendarRounded`          | `"md"`       | Border radius of month tiles.                        |
 | `timeZone`      | `string`                   | —            | IANA time zone.                                      |
-| `tokens`        | `CalendarMonthTokens`      | —            | Token overrides.                                     |
 | `value`         | `number`                   | —            | Selected month (`0`–`11`).                           |
 | `year`          | `number`                   | current year | Year context for min/max month disabling.            |
 
@@ -42,6 +41,8 @@ import { CalendarMonth } from "@bridge-ui/vue/Components/CalendarMonth";
 | `modelValue`        | `number`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: number) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar chrome tokens live on `components.Calendar` (`color`, `day`, `rounded`).
+
 ## Events
 
 | Event         | Payload           | Description                                  |

package/docs/components/CalendarRange.md

@@ -1,7 +1,8 @@
 # CalendarRange
 
-Dual-month calendar for selecting a date range. Shared year/month selectors with
-two date panels (`orientation="horizontal"` side-by-side, or `"vertical"` stacked).
+Dual-month calendar for selecting a date range. Year sits on the left and nav
+on the right; month selectors sit inward from the header midpoint
+(`orientation="horizontal"` side-by-side, or `"vertical"` stacked).
 
 ## Import
 
@@ -28,7 +29,7 @@ import { CalendarRange } from "@bridge-ui/vue/Components/CalendarRange";
 ```vue
 <CalendarRange
   :custom-props="{
-    panels: { class: 'gap-4' },
+    startHeader: { class: 'pr-2' },
     root: { 'data-testid': 'calendar-range' },
   }"
 />
@@ -61,7 +62,6 @@ import { CalendarRange } from "@bridge-ui/vue/Components/CalendarRange";
 | `slots`           | `CalendarRangeSlots`         | —              | Named slots (`day`, optional `startAside` / `endAside`).    |
 | `startOfWeek`     | `StartOfWeek`                | `0`            | First day of the week.                                      |
 | `timeZone`        | `string`                     | —              | IANA time zone.                                             |
-| `tokens`          | `CalendarRangeTokens`        | —              | Token overrides.                                            |
 | `value`           | `DateRangeValue \| null`     | —              | Controlled range value (`[start, end]`).                    |
 | `viewDate`        | `Date`                       | —              | Controlled start (left) displayed month.                    |
 
@@ -72,6 +72,8 @@ import { CalendarRange } from "@bridge-ui/vue/Components/CalendarRange";
 | `modelValue`        | `DateRangeValue \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: DateRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar chrome tokens live on `components.Calendar` (`color`, `day`, `rounded`).
+
 ## Events
 
 | Event                      | Payload                           | Description                                        |

package/docs/components/CalendarYear.md

@@ -33,7 +33,6 @@ import { CalendarYear } from "@bridge-ui/vue/Components/CalendarYear";
 | `rounded`      | `CalendarRounded`         | `"md"`      | Border radius of year tiles.              |
 | `startYear`    | `number`                  | —           | First year of the visible page.           |
 | `timeZone`     | `string`                  | —           | IANA time zone.                           |
-| `tokens`       | `CalendarYearTokens`      | —           | Token overrides.                          |
 | `value`        | `number`                  | —           | Selected year.                            |
 
 ### v-model
@@ -43,6 +42,8 @@ import { CalendarYear } from "@bridge-ui/vue/Components/CalendarYear";
 | `modelValue`        | `number`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: number) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar chrome tokens live on `components.Calendar` (`color`, `day`, `rounded`).
+
 ## Events
 
 | Event         | Payload          | Description                      |

package/docs/components/ColorField.md

@@ -0,0 +1,93 @@
+# ColorField
+
+Form field that opens a `ColorPicker` in an overlay (`auto` by default: `menu` on desktop, bottom `drawer` on mobile). Extends FormField props. Shows a start swatch for the selected color. Uses the semantic `palette` icon by default.
+
+## Import
+
+```ts
+import { ColorField } from "@bridge-ui/vue/Components/ColorField";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<ColorField label="Brand color" />
+
+<ColorField label="Brand" v-model="color" />
+
+<ColorField error label="Color" error-message="Pick a valid color." />
+```
+
+Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `auto`).
+The input is read-only by default (picker only). Set `editable` to unlock typing; typed text is parsed on blur or Enter:
+
+```vue
+<ColorField editable label="Color" />
+```
+
+### Output format
+
+```vue
+<ColorField label="Hex" format="hex" v-model="color" />
+
+<ColorField label="RGBA" format="rgba" v-model="color" />
+```
+
+### customProps
+
+```vue
+<ColorField
+  label="Color"
+  :custom-props="{
+    input: { name: 'color' },
+    colorPicker: { root: { 'data-testid': 'color-picker' } },
+  }"
+/>
+```
+
+## Props
+
+### ColorField-specific
+
+| Prop           | Type                    | Default                                      | Description                                                                        |
+| -------------- | ----------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `alpha`        | `boolean`               | —                                            | Shows the alpha slider. Unset: `true` for `hexa` / `rgba` / `hsla`.                |
+| `classes`      | `ColorFieldClasses`     | —                                            | Classes for field / input regions.                                                 |
+| `clearable`    | `boolean`               | `true`                                       | Whether the value can be cleared.                                                  |
+| `customProps`  | `ColorFieldCustomProps` | —                                            | Extra props for internal parts.                                                    |
+| `defaultValue` | `string \| null`        | `null`                                       | Uncontrolled initial value.                                                        |
+| `editable`     | `boolean`               | `false`                                      | Unlocks the input. Typed text is parsed on blur or Enter.                          |
+| `fill`         | `boolean`               | —                                            | Fills the overlay width. Unset: `true` for `drawer`, `false` for `menu` / `modal`. |
+| `format`       | `ColorFormat`           | `"hex"`                                      | Serialized output: `hex`, `hexa`, `rgb`, `rgba`, `hsl`, `hsla`.                    |
+| `overlay`      | `FieldOverlayMode`      | `"auto"`                                     | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                               |
+| `showFooter`   | `boolean`               | `false` (`true` for modal/drawer when unset) | Shows Cancel / Apply on the nested picker.                                         |
+| `showSwatch`   | `boolean`               | `true`                                       | Shows the selected color at the start of the field.                                |
+| `swatches`     | `string[]`              | —                                            | Preset colors forwarded to the nested picker.                                      |
+
+### v-model
+
+| Prop / Event        | Type                              | Default | Description                           |
+| ------------------- | --------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `string \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: string \| null) => void` | —       | Emitted when `v-model` should update. |
+
+### Inherited from FormField
+
+See [FormField](./FormField.md).
+
+## Events
+
+| Event         | Payload                   | Description                                    |
+| ------------- | ------------------------- | ---------------------------------------------- |
+| `v-on:apply`  | `()`                      | Emitted when Apply is pressed (`showFooter`).  |
+| `v-on:cancel` | `()`                      | Emitted when Cancel is pressed (`showFooter`). |
+| `v-on:change` | `(value: string \| null)` | Emitted when the color changes.                |
+| `v-on:clear`  | `()`                      | Emitted when the value is cleared.             |
+| `v-on:close`  | `()`                      | Emitted when the menu closes.                  |
+| `v-on:open`   | `()`                      | Emitted when the menu opens.                   |
+
+## Related components
+
+ColorPicker, FormField, FieldOverlay, Menu, Modal, Drawer