@bridge-ui/vue 0.0.8 → 0.0.10

package/dist/index.js

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

package/dist/theme.css

@@ -258,14 +258,14 @@
 
   .bridge-field-adornment-button {
     @apply cursor-pointer transition-colors duration-150 ease-in-out select-none;
-    @apply text-gray-500 hover:bg-gray-100 hover:text-gray-700;
-    @apply active:bg-gray-200 active:text-gray-900;
-    @apply focus-visible:bg-gray-100 focus-visible:text-gray-700 focus-visible:outline-none;
-    @apply dark:text-gray-400 dark:hover:bg-gray-700/50 dark:hover:text-gray-200;
-    @apply dark:active:bg-gray-700 dark:active:text-white;
-    @apply dark:focus-visible:bg-gray-700/50 dark:focus-visible:text-gray-200;
+    @apply text-dark-500 hover:bg-dark-100 hover:text-dark-700;
+    @apply active:bg-dark-200 active:text-dark-900;
+    @apply focus-visible:bg-dark-100 focus-visible:text-dark-700 focus-visible:outline-none;
+    @apply dark:text-dark-400 dark:hover:bg-dark-700/50 dark:hover:text-dark-200;
+    @apply dark:active:bg-dark-700 dark:active:text-white;
+    @apply dark:focus-visible:bg-dark-700/50 dark:focus-visible:text-dark-200;
     @apply disabled:cursor-not-allowed disabled:opacity-50;
-    @apply disabled:hover:bg-transparent disabled:hover:text-gray-500;
-    @apply dark:disabled:hover:bg-transparent dark:disabled:hover:text-gray-400;
+    @apply disabled:hover:text-dark-500 disabled:hover:bg-transparent;
+    @apply dark:disabled:hover:text-dark-400 dark:disabled:hover:bg-transparent;
   }
 }

package/docs/README.md

@@ -4,6 +4,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 
 ## Components
 
+- [Accordion](./components/Accordion.md)
 - [Alert](./components/Alert.md)
 - [Autocomplete](./components/Autocomplete.md)
 - [Avatar](./components/Avatar.md)
@@ -11,8 +12,21 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [BaseField](./components/BaseField.md)
 - [BridgeUIProvider](./components/BridgeUIProvider.md)
 - [Button](./components/Button.md)
+- [Calendar](./components/Calendar.md)
+- [CalendarDate](./components/CalendarDate.md)
+- [CalendarMonth](./components/CalendarMonth.md)
+- [CalendarRange](./components/CalendarRange.md)
+- [CalendarYear](./components/CalendarYear.md)
 - [Card](./components/Card.md)
 - [Checkbox](./components/Checkbox.md)
+- [DateField](./components/DateField.md)
+- [DatePicker](./components/DatePicker.md)
+- [DateRangeField](./components/DateRangeField.md)
+- [DateRangePicker](./components/DateRangePicker.md)
+- [DateTimeField](./components/DateTimeField.md)
+- [DateTimePicker](./components/DateTimePicker.md)
+- [DateTimeRangeField](./components/DateTimeRangeField.md)
+- [DateTimeRangePicker](./components/DateTimeRangePicker.md)
 - [Divider](./components/Divider.md)
 - [Drawer](./components/Drawer.md)
 - [FormControl](./components/FormControl.md)
@@ -36,8 +50,13 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [Spinner](./components/Spinner.md)
 - [Switch](./components/Switch.md)
 - [Tabs](./components/Tabs.md)
-- [TextField](./components/TextField.md)
 - [Textarea](./components/Textarea.md)
+- [TextField](./components/TextField.md)
+- [TimeField](./components/TimeField.md)
+- [TimePanel](./components/TimePanel.md)
+- [TimePicker](./components/TimePicker.md)
+- [TimeRangeField](./components/TimeRangeField.md)
+- [TimeRangePicker](./components/TimeRangePicker.md)
 - [Tooltip](./components/Tooltip.md)
 - [useBreakpoint](./components/useBreakpoint.md)
 - [useDialogAction](./components/useDialogAction.md)

package/docs/components/Accordion.md

@@ -0,0 +1,104 @@
+# Accordion
+
+Expandable sections for FAQs, settings groups, and stacked content. Single or multiple panels open at once. Compose with `AccordionItem`.
+
+## Import
+
+```ts
+import { Accordion } from "@bridge-ui/vue/Components/Accordion";
+import { AccordionItem } from "@bridge-ui/vue/Components/AccordionItem";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Accordion v-model="open">
+  <AccordionItem title="Shipping" value="a">
+    Delivery in 2–5 business days.
+  </AccordionItem>
+  <AccordionItem title="Returns" value="b">
+    Free returns within 30 days.
+  </AccordionItem>
+</Accordion>
+```
+
+### Multiple open
+
+```vue
+<Accordion multiple :model-value="['a', 'b']">
+  <AccordionItem title="One" value="a">
+    First
+  </AccordionItem>
+  <AccordionItem title="Two" value="b">
+    Second
+  </AccordionItem>
+</Accordion>
+```
+
+### Outlined variant
+
+```vue
+<Accordion model-value="a" variant="outlined">
+  <AccordionItem title="Shipping" value="a">
+    Delivery in 2–5 business days.
+  </AccordionItem>
+  <AccordionItem title="Returns" value="b">
+    Free returns within 30 days.
+  </AccordionItem>
+</Accordion>
+```
+
+### Separated variant
+
+```vue
+<Accordion model-value="a" variant="separated">
+  <AccordionItem title="Shipping" value="a">
+    Delivery in 2–5 business days.
+  </AccordionItem>
+  <AccordionItem title="Returns" value="b">
+    Free returns within 30 days.
+  </AccordionItem>
+</Accordion>
+```
+
+### Plain variant
+
+```vue
+<Accordion model-value="a" variant="plain">
+  <AccordionItem title="Shipping" value="a">
+    Delivery in 2–5 business days.
+  </AccordionItem>
+  <AccordionItem title="Returns" value="b">
+    Free returns within 30 days.
+  </AccordionItem>
+</Accordion>
+```
+
+### Disabled item
+
+```vue
+<Accordion model-value="a">
+  <AccordionItem title="Open" value="a">
+    Visible content
+  </AccordionItem>
+  <AccordionItem disabled title="Locked" value="b">
+    Hidden while disabled
+  </AccordionItem>
+</Accordion>
+```
+
+### Custom title slot
+
+```vue
+<Accordion model-value="a">
+  <AccordionItem value="a">
+    <template #title>
+      <span class="font-semibold">Shipping rates</span>
+    </template>
+
+    Delivery in 2–5 business days.
+  </AccordionItem>
+</Accordion>
+```

package/docs/components/Autocomplete.md

@@ -124,6 +124,17 @@ Use the default slot with `ListSection` / `ListItem` to build the dropdown list
 </Autocomplete>
 ```
 
+### Overlay
+
+```vue
+<Autocomplete overlay="auto" label="Country" :options="countries" />
+
+<Autocomplete label="Country" overlay="drawer" :options="countries" />
+```
+
+Default `overlay` is `auto`: `menu` on desktop and bottom `drawer` on mobile.
+When unset, `showFooter` defaults to `true` on mobile (`false` on desktop). Selection stays draft until Apply.
+
 ### customProps
 
 ```vue
@@ -142,26 +153,28 @@ Use the default slot with `ListSection` / `ListItem` to build the dropdown list
 
 ### Autocomplete-specific
 
-| Prop                | Type                  | Default       | Description                                                                                             |
-| ------------------- | --------------------- | ------------- | ------------------------------------------------------------------------------------------------------- |
-| `asyncData`         | `SelectAsyncData`     | —             | Remote data source. Implies `searchable`.                                                               |
-| `clearable`         | `boolean`             | `true`        | Whether the value can be cleared.                                                                       |
-| `defaultValue`      | `SelectModel`         | —             | Initial value when uncontrolled.                                                                        |
-| `disableMaxHeight`  | `boolean`             | `false`       | When true, the dropdown options list is not height-limited. Forwarded to the internal `Listbox`.        |
-| `emptyMessage`      | `string`              | "No options"  | Message when the filtered list is empty.                                                                |
-| `flipOptions`       | `boolean`             | `false`       | Inverts the visual order of options.                                                                    |
-| `freeSolo`          | `boolean`             | `true`        | Allows committing typed text that is not in `options` (Enter, Tab, or closing the menu).                |
-| `hideEmptyMessage`  | `boolean`             | `false`       | Hides the empty-state message.                                                                          |
-| `loading`           | `boolean`             | —             | External or async loading state.                                                                        |
-| `maxHeight`         | `string`              | "max-h-60"    | Tailwind max-height class for the dropdown options area. Forwarded to the internal `Listbox`.           |
-| `minItemsForSearch` | `number`              | 11            | Minimum option count before search UI is enabled.                                                       |
-| `multiple`          | `boolean`             | `false`       | Whether multiple values can be selected.                                                                |
-| `optionDescription` | `string`              | "description" | Key used to read the description from option objects.                                                   |
-| `optionLabel`       | `string`              | "label"       | Key used to read the label from option objects.                                                         |
-| `options`           | `ListboxOptionsInput` | —             | Options to display. May include section groups (`{ title, options, sticky? }`) mixed with flat options. |
-| `optionValue`       | `string`              | "value"       | Key used to read the value from option objects.                                                         |
-| `placeholder`       | `string`              | —             | Placeholder shown when no value is selected.                                                            |
-| `searchable`        | `boolean`             | `true`        | Whether options can be filtered via the trigger input.                                                  |
+| Prop                | Type                  | Default                               | Description                                                                                             |
+| ------------------- | --------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `asyncData`         | `SelectAsyncData`     | —                                     | Remote data source. Implies `searchable`.                                                               |
+| `clearable`         | `boolean`             | `true`                                | Whether the value can be cleared.                                                                       |
+| `defaultValue`      | `SelectModel`         | —                                     | Initial value when uncontrolled.                                                                        |
+| `disableMaxHeight`  | `boolean`             | `false`                               | When true, the dropdown options list is not height-limited. Forwarded to the internal `Listbox`.        |
+| `emptyMessage`      | `string`              | "No options"                          | Message when the filtered list is empty.                                                                |
+| `flipOptions`       | `boolean`             | `false`                               | Inverts the visual order of options.                                                                    |
+| `freeSolo`          | `boolean`             | `true`                                | Allows committing typed text that is not in `options` (Enter, Tab, or closing the menu).                |
+| `hideEmptyMessage`  | `boolean`             | `false`                               | Hides the empty-state message.                                                                          |
+| `loading`           | `boolean`             | —                                     | External or async loading state.                                                                        |
+| `maxHeight`         | `string`              | "max-h-60"                            | Tailwind max-height class for the dropdown options area. Forwarded to the internal `Listbox`.           |
+| `minItemsForSearch` | `number`              | 11                                    | Minimum option count before search UI is enabled.                                                       |
+| `multiple`          | `boolean`             | `false`                               | Whether multiple values can be selected.                                                                |
+| `optionDescription` | `string`              | "description"                         | Key used to read the description from option objects.                                                   |
+| `optionLabel`       | `string`              | "label"                               | Key used to read the label from option objects.                                                         |
+| `options`           | `ListboxOptionsInput` | —                                     | Options to display. May include section groups (`{ title, options, sticky? }`) mixed with flat options. |
+| `optionValue`       | `string`              | "value"                               | Key used to read the value from option objects.                                                         |
+| `overlay`           | `FieldOverlayMode`    | `"auto"`                              | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                                                    |
+| `placeholder`       | `string`              | —                                     | Placeholder shown when no value is selected.                                                            |
+| `searchable`        | `boolean`             | `true`                                | Whether options can be filtered via the trigger input.                                                  |
+| `showFooter`        | `boolean`             | `false` (`true` on mobile when unset) | Shows Cancel / Apply on the nested listbox. Selection stays draft until Apply.                          |
 
 ### v-model
 
@@ -183,16 +196,17 @@ See [FormField](./FormField.md) (building-block chrome). Field tokens live on `c
 
 ## Events
 
-| Event           | Payload                  | Description                                           |
-| --------------- | ------------------------ | ----------------------------------------------------- |
-| `v-on:change`   | `(value: SelectModel)`   | Emitted when the selection changes.                   |
-| `v-on:clear`    | —                        | Emitted when the value is cleared.                    |
-| `v-on:close`    | —                        | Emitted when the menu closes.                         |
-| `v-on:deselect` | `(option: SelectOption)` | Emitted when an option is deselected (multiple mode). |
-| `v-on:open`     | —                        | Emitted when the menu opens.                          |
-| `v-on:search`   | `(query: string)`        | Emitted when the search query changes.                |
-| `v-on:select`   | `(option: SelectOption)` | Emitted when an option is selected.                   |
+| Event           | Payload                  | Description                                                          |
+| --------------- | ------------------------ | -------------------------------------------------------------------- |
+| `v-on:cancel`   | —                        | Emitted when Cancel is pressed on the listbox footer (`showFooter`). |
+| `v-on:change`   | `(value: SelectModel)`   | Emitted when the selection changes.                                  |
+| `v-on:clear`    | —                        | Emitted when the value is cleared.                                   |
+| `v-on:close`    | —                        | Emitted when the menu closes.                                        |
+| `v-on:deselect` | `(option: SelectOption)` | Emitted when an option is deselected (multiple mode).                |
+| `v-on:open`     | —                        | Emitted when the menu opens.                                         |
+| `v-on:search`   | `(query: string)`        | Emitted when the search query changes.                               |
+| `v-on:select`   | `(option: SelectOption)` | Emitted when an option is selected.                                  |
 
 ## Related components
 
-Menu, List, ListItem, ListSection, FormField
+Menu, Modal, Drawer, FieldOverlay, List, ListItem, ListSection, FormField

package/docs/components/Breadcrumb.md

@@ -0,0 +1,74 @@
+# Breadcrumb
+
+Navigation trail for hierarchy (home → section → page). Compose with `BreadcrumbItem`, or pass `items` for a data-driven list. Supports icon crumbs and a custom separator icon.
+
+## Import
+
+```ts
+import { Breadcrumb } from "@bridge-ui/vue/Components/Breadcrumb";
+import { BreadcrumbItem } from "@bridge-ui/vue/Components/BreadcrumbItem";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Breadcrumb>
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
+  <BreadcrumbItem current>Avatar</BreadcrumbItem>
+</Breadcrumb>
+```
+
+### From items array
+
+```vue
+<Breadcrumb :items="crumbs" />
+```
+
+```ts
+const crumbs = [
+  { href: "/", label: "Home", startIcon: Home },
+  { href: "/docs", label: "Docs" },
+  { label: "Avatar", current: true },
+];
+```
+
+### Icon only
+
+Omit the label and set `aria-label` for assistive tech.
+
+```vue
+<Breadcrumb>
+  <BreadcrumbItem href="/" :start-icon="Home" aria-label="Home" />
+  <BreadcrumbItem href="/projects">Projects</BreadcrumbItem>
+  <BreadcrumbItem current>Project Nero</BreadcrumbItem>
+</Breadcrumb>
+```
+
+### Custom separator
+
+```vue
+<Breadcrumb separator="chevronLeft">
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem current>Page</BreadcrumbItem>
+</Breadcrumb>
+```
+
+```vue
+<Breadcrumb>
+  <template #separator>
+    <span>/</span>
+  </template>
+
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem current>Page</BreadcrumbItem>
+</Breadcrumb>
+```
+
+### Collapse middle crumbs
+
+```vue
+<Breadcrumb :max-items="3" :items="deepCrumbs" />
+```