@bridge-ui/vue 0.3.0 → 0.5.0

package/dist/index.js

@@ -88,67 +88,82 @@ import { useDateTimeRangeField as Ue } from "./Components/DateTimeRangeField/com
 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 };
+import { useEmptyState as qe } from "./Components/EmptyState/composables/useEmptyState.js";
+import Je from "./Components/EmptyState/EmptyState.js";
+import { useLink as Ye } from "./Components/Link/composables/useLink.js";
+import Xe from "./Components/Link/Link.js";
+import { useNumberField as Ze } from "./Components/NumberField/composables/useNumberField.js";
+import Qe from "./Components/NumberField/NumberField.js";
+import { useOtpField as $e } from "./Components/OtpField/composables/useOtpField.js";
+import et from "./Components/OtpField/OtpField.js";
+import { usePagination as tt } from "./Components/Pagination/composables/usePagination.js";
+import nt from "./Components/Pagination/Pagination.js";
+import { usePasswordField as rt } from "./Components/PasswordField/composables/usePasswordField.js";
+import it from "./Components/PasswordField/PasswordField.js";
+import { useRadio as at } from "./Components/Radio/composables/useRadio.js";
+import ot from "./Components/Radio/Radio.js";
+import st from "./Components/Select/Select.js";
+import ct from "./Components/Select/SelectOption.js";
+import { useSidebar as lt } from "./Components/Sidebar/composables/useSidebar.js";
+import { useSidebarInset as ut } from "./Components/Sidebar/composables/useSidebarInset.js";
+import { useSidebarList as dt } from "./Components/Sidebar/composables/useSidebarList.js";
+import { useSidebarListItem as ft } from "./Components/Sidebar/composables/useSidebarListItem.js";
+import { useSidebarProvider as pt } from "./Components/Sidebar/composables/useSidebarProvider.js";
+import { useSidebarShell as mt } from "./Components/Sidebar/composables/useSidebarShell.js";
+import { useSidebarTrigger as ht } from "./Components/Sidebar/composables/useSidebarTrigger.js";
+import gt from "./Components/Sidebar/Sidebar.js";
+import _t from "./Components/Sidebar/SidebarInset.js";
+import vt from "./Components/Sidebar/SidebarList.js";
+import { useTooltip as yt } from "./Components/Tooltip/composables/useTooltip.js";
+import bt from "./Components/Tooltip/Tooltip.js";
+import xt from "./Components/Sidebar/SidebarListItem.js";
+import St from "./Components/Sidebar/SidebarProvider.js";
+import Ct from "./Components/Sidebar/SidebarTrigger.js";
+import { useSkeleton as wt } from "./Components/Skeleton/composables/useSkeleton.js";
+import Tt from "./Components/Skeleton/Skeleton.js";
+import { useSlider as Et } from "./Components/Slider/composables/useSlider.js";
+import Dt from "./Components/Slider/Slider.js";
+import { useSnackbar as Ot } from "./Components/Snackbar/composables/useSnackbar.js";
+import kt from "./Components/Snackbar/Snackbar.js";
+import { useSpinner as At } from "./Components/Spinner/composables/useSpinner.js";
+import jt from "./Components/Spinner/Spinner.js";
+import { useStep as Mt } from "./Components/Step/composables/useStep.js";
+import Nt from "./Components/Step/Step.js";
+import { useStepper as Pt } from "./Components/Stepper/composables/useStepper.js";
+import Ft from "./Components/Stepper/Stepper.js";
+import { useSwitch as It } from "./Components/Switch/composables/useSwitch.js";
+import Lt from "./Components/Switch/Switch.js";
+import { TABS_INJECTION_KEY as Rt } from "./Components/Tabs/tabsInjectionKey.js";
+import { useTab as zt } from "./Components/Tab/composables/useTab.js";
+import Bt from "./Components/Tab/Tab.js";
+import { useTabItem as Vt } from "./Components/TabItem/composables/useTabItem.js";
+import Ht from "./Components/TabItem/TabItem.js";
+import { useTabList as Ut } from "./Components/TabList/composables/useTabList.js";
+import Wt from "./Components/TabList/TabList.js";
+import { useTabPanel as Gt } from "./Components/TabPanel/composables/useTabPanel.js";
+import Kt from "./Components/TabPanel/TabPanel.js";
+import { useTabs as qt } from "./Components/Tabs/composables/useTabs.js";
+import Jt from "./Components/Tabs/Tabs.js";
+import { useTextarea as Yt } from "./Components/Textarea/composables/useTextarea.js";
+import Xt from "./Components/Textarea/Textarea.js";
+import { useTextField as Zt } from "./Components/TextField/composables/useTextField.js";
+import Qt from "./Components/TextField/TextField.js";
+import { useTimeField as $t } from "./Components/TimeField/composables/useTimeField.js";
+import { useTimePicker as en } from "./Components/TimePicker/composables/useTimePicker.js";
+import tn from "./Components/TimePicker/TimePicker.js";
+import nn from "./Components/TimeField/TimeField.js";
+import { useTimeRangeField as rn } from "./Components/TimeRangeField/composables/useTimeRangeField.js";
+import { useTimeRangePicker as an } from "./Components/TimeRangePicker/composables/useTimeRangePicker.js";
+import on from "./Components/TimeRangePicker/TimeRangePicker.js";
+import sn from "./Components/TimeRangeField/TimeRangeField.js";
+import { TOGGLE_GROUP_INJECTION_KEY as cn } from "./Components/ToggleGroup/toggleGroupInjectionKey.js";
+import { useToggleGroup as ln } from "./Components/ToggleGroup/composables/useToggleGroup.js";
+import un from "./Components/ToggleGroup/ToggleGroup.js";
+import { useToggleItem as dn } from "./Components/ToggleItem/composables/useToggleItem.js";
+import fn from "./Components/ToggleItem/ToggleItem.js";
+import pn from "./Provider/BridgeUIProvider.js";
+import { createBridgeUI as mn } from "./Provider/createBridgeUI.js";
+import { SEMANTIC_ICON_NAMES as hn, resolveMessage as gn } from "@bridge-ui/core/Adapters";
+import { cn as _n } from "@bridge-ui/core/Utils";
+import { BRIDGE_UI_DEFAULT_GLOBAL as vn, mergeBridgeUIComponents as yn, mergeBridgeUIGlobal as bn, resolveBridgeUIOptions as xn } 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, vn as BRIDGE_UI_DEFAULT_GLOBAL, ee as Badge, te as BaseField, oe as Breadcrumb, ae as BreadcrumbItem, pn 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, Je as EmptyState, H as FieldOverlay, Se as FormControl, j as FormField, g as Icon, A as Label, Xe as Link, W as List, G as ListItem, K as ListSection, Y as Listbox, z as Menu, V as Modal, Qe as NumberField, et as OtpField, nt as Pagination, it as PasswordField, J as Progress, ot as Radio, hn as SEMANTIC_ICON_NAMES, st as Select, ct as SelectOption, gt as Sidebar, _t as SidebarInset, vt as SidebarList, xt as SidebarListItem, St as SidebarProvider, Ct as SidebarTrigger, Tt as Skeleton, Dt as Slider, kt as Snackbar, jt as Spinner, Nt as Step, Ft as Stepper, Lt as Switch, Rt as TABS_INJECTION_KEY, cn as TOGGLE_GROUP_INJECTION_KEY, Bt as Tab, Ht as TabItem, Wt as TabList, Kt as TabPanel, Jt as Tabs, Qt as TextField, Xt as Textarea, nn as TimeField, Be as TimePanel, tn as TimePicker, sn as TimeRangeField, on as TimeRangePicker, un as ToggleGroup, fn as ToggleItem, bt as Tooltip, _n as cn, mn as createBridgeUI, x as findFirstEnabledOptionIndex, S as findLastEnabledOptionIndex, C as getListboxActiveDescendantId, w as getListboxOptionId, yn as mergeBridgeUIComponents, bn as mergeBridgeUIGlobal, T as moveListboxHighlight, xn as resolveBridgeUIOptions, gn 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, qe as useEmptyState, F as useFieldOverlay, xe as useFormControl, b as useFormField, a as useI18nAdapter, c as useIconAdapter, k as useLabel, Ye as useLink, U as useList, M as useListbox, E as useListboxNavigation, R as useMenu, B as useModal, Ze as useNumberField, $e as useOtpField, tt as usePagination, rt as usePasswordField, q as useProgress, at as useRadio, o as useResolveMessage, lt as useSidebar, ut as useSidebarInset, dt as useSidebarList, ft as useSidebarListItem, pt as useSidebarProvider, mt as useSidebarShell, ht as useSidebarTrigger, wt as useSkeleton, Et as useSlider, Ot as useSnackbar, At as useSpinner, Mt as useStep, Pt as useStepper, It as useSwitch, zt as useTab, Vt as useTabItem, Ut as useTabList, Gt as useTabPanel, qt as useTabs, Zt as useTextField, Yt as useTextarea, $t as useTimeField, ze as useTimePanel, en as useTimePicker, rn as useTimeRangeField, an as useTimeRangePicker, ln as useToggleGroup, dn as useToggleItem, yt as useTooltip };

package/dist/theme.css

@@ -170,15 +170,51 @@
   }
 }
 
-/**
- * FormField slot adornments (`bridge-start-adornment` / `bridge-end-adornment`).
- * Parent `.group/field` sets `data-bridge-rounded` from FormField `rounded`.
- * Suffix `!` overrides Button/Badge `rounded-*` from the utilities layer.
- */
+/* Adornment radius from `data-bridge-rounded`. Underlined: top corner only. */
 @layer components {
   .bridge-end-adornment,
   .bridge-start-adornment {
-    @apply h-full min-h-0 rounded-none!;
+    @apply min-h-0 rounded-none!;
+  }
+
+  [data-bridge-rounded="none"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-none!;
+  }
+
+  [data-bridge-rounded="xs"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-xs!;
+  }
+
+  [data-bridge-rounded="sm"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-sm!;
+  }
+
+  [data-bridge-rounded="md"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-md!;
+  }
+
+  [data-bridge-rounded="lg"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-lg!;
+  }
+
+  [data-bridge-rounded="xl"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-xl!;
+  }
+
+  [data-bridge-rounded="2xl"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-2xl!;
+  }
+
+  [data-bridge-rounded="3xl"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-3xl!;
+  }
+
+  [data-bridge-rounded="4xl"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-4xl!;
+  }
+
+  [data-bridge-rounded="full"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-full!;
   }
 
   [data-bridge-rounded="none"] .bridge-start-adornment {
@@ -221,44 +257,12 @@
     @apply rounded-s-full! rounded-e-none!;
   }
 
-  [data-bridge-rounded="none"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-none!;
-  }
-
-  [data-bridge-rounded="xs"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-xs!;
-  }
-
-  [data-bridge-rounded="sm"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-sm!;
-  }
-
-  [data-bridge-rounded="md"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-md!;
-  }
-
-  [data-bridge-rounded="lg"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-lg!;
-  }
-
-  [data-bridge-rounded="xl"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-xl!;
-  }
-
-  [data-bridge-rounded="2xl"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-2xl!;
+  [data-bridge-variant="underlined"] .bridge-end-adornment {
+    @apply rounded-ee-none!;
   }
 
-  [data-bridge-rounded="3xl"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-3xl!;
-  }
-
-  [data-bridge-rounded="4xl"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-4xl!;
-  }
-
-  [data-bridge-rounded="full"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-full!;
+  [data-bridge-variant="underlined"] .bridge-start-adornment {
+    @apply rounded-es-none!;
   }
 
   .bridge-field-adornment-button {

package/docs/README.md

@@ -33,6 +33,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [DateTimeRangePicker](./components/DateTimeRangePicker.md)
 - [Divider](./components/Divider.md)
 - [Drawer](./components/Drawer.md)
+- [EmptyState](./components/EmptyState.md)
 - [FormControl](./components/FormControl.md)
 - [FormField](./components/FormField.md)
 - [I18n](./components/I18n.md)
@@ -49,6 +50,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [Progress](./components/Progress.md)
 - [Radio](./components/Radio.md)
 - [Select](./components/Select.md)
+- [Sidebar](./components/Sidebar.md)
 - [Skeleton](./components/Skeleton.md)
 - [Slider](./components/Slider.md)
 - [Snackbar](./components/Snackbar.md)

package/docs/ScrollUtilities.md

@@ -73,7 +73,7 @@ Put background and border on a wrapper; put `bridge-scroll-fade-*` on the inner
 
 - 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.
+- Without scroll-driven animations, both edges fade statically. Wheel / keyboard / programmatic scroll still work.
 - `bridge-scroll-fade-x` follows reading direction (RTL included).
 
 ## TimePanel

package/docs/components/DataTable.md

@@ -46,7 +46,7 @@ DataTable chrome (`plain` / `ghost` / `bordered`). Built-in `Pagination` follows
 <DataTable striped :rows="users" :columns="columns" />
 ```
 
-`:full="false"` sizes columns to content instead of stretching the table:
+`:full="false"` sizes columns to content instead of stretching the table. The bordered wrapper, per-page select, and pagination follow that width. Default `full` stretches the table to the wrapper width:
 
 ```vue
 <DataTable :full="false" :rows="users" :columns="columns" />
@@ -126,18 +126,6 @@ Slot replaces the built-in Pagination and/or per-page Select (`#pagination` / `#
 </DataTable>
 ```
 
-Align the built-in Pagination with `pagination-align` (`start` / `center` / `end`, default `end`):
-
-```vue
-<DataTable
-  :rows="users"
-  :columns="columns"
-  v-model:page="page"
-  :page-count="pageCount"
-  pagination-align="start"
-/>
-```
-
 When `page` and `page-count` (or `total-count`) are set, DataTable does not sort or filter `rows` locally — bind `sorting` / `filters` / `page` / `per-page` and fetch the current page in the app:
 
 ```vue
@@ -153,7 +141,7 @@ When `page` and `page-count` (or `total-count`) are set, DataTable does not sort
 
 ### Empty, loading, and footer
 
-Empty rows show a default empty state; `#empty` replaces it. `loading` keeps the table visible. `loadingVariant="overlay"` (default) dims the table with a spin; `loadingVariant="bar"` dims the table and draws a progress line under the header. `#loading` replaces the indicator. `#footer` renders below the table, above pagination:
+Empty rows render `EmptyState` at the table `size`, with the i18n title `"No data"`. `#empty` replaces it. `loading` keeps the table visible. `loadingVariant="overlay"` (default) dims the table with a spin; `loadingVariant="bar"` dims the table and draws a progress line under the header. `#loading` replaces the indicator. `#footer` renders below the table, above pagination:
 
 ```vue
 <DataTable :rows="[]" :columns="columns" :loading="isLoading">
@@ -212,7 +200,18 @@ Table-level slots stay `empty` / `expanded` / `footer` / `item.{id}` / `item` /
 
 Set `filters` on a column to show a funnel in that header. The panel uses checkboxes (`filterMultiple`, default) or radios (`:filter-multiple="false"`), and **Select all items** for multiple filters. Nested `children` render as a group in the same panel. **OK** commits; **Reset** clears the draft (commit on **OK**); closing without **OK** discards it.
 
-Set `searchable` on a column to add a text field in that same menu. Queries are stored in `columnSearch` (column id → string), not used to filter the option list.
+Set `searchable` on a column to add a text field in that same overlay. Queries are stored in `columnSearch` (column id → string), not used to filter the option list.
+
+Column filters open in a `FieldOverlay`. Default `filter-overlay` is `auto` (`menu` on desktop, `drawer` on mobile). Pass `menu`, `modal`, or `drawer` to pin a shell:
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  filter-overlay="drawer"
+  v-model:filters="filters"
+/>
+```
 
 ```vue
 <DataTable
@@ -253,7 +252,7 @@ Client-side filtering applies when the table is not server-paged (`page` + `page
 const columns = [
   {
     id: "name",
-    width: 160,
+    width: 120,
     header: "Name",
     sticky: "start",
     cell: (row) => row.name,
@@ -283,12 +282,39 @@ const columns = [
 ];
 ```
 
+### Column classes
+
+`classes.header` and `classes.cell` merge onto that column’s `th` / `td`. Use width utilities for breakpoint-based sizing. Do not set `width` on the same column when the class should control width — inline `width` wins.
+
+```ts
+const columns = [
+  {
+    id: "name",
+    header: "Name",
+    cell: (row) => row.name,
+    classes: {
+      cell: "w-24 sm:w-40",
+      header: "w-24 sm:w-40",
+    },
+  },
+];
+```
+
 ### Column visibility
 
 Pass `hiddenColumns` and/or listen to `update:hiddenColumns` to show a **Columns** icon in the toolbar. `hideable: false` keeps a column out of the toggle (or disabled). At least one column stays visible.
 
+The panel opens in a `FieldOverlay`. Default `columns-overlay` is `auto` (`menu` on desktop, `drawer` on mobile). Pass `menu`, `modal`, or `drawer` to pin a shell.
+
+When unset, `columns-show-footer` is `true` for `modal` / `drawer` (`false` for `menu`). Reset restores hideable columns; OK commits and closes. Closing without OK discards.
+
 ```vue
-<DataTable :rows="users" :columns="columns" v-model:hidden-columns="hidden" />
+<DataTable
+  :rows="users"
+  :columns="columns"
+  columns-overlay="drawer"
+  v-model:hidden-columns="hidden"
+/>
 ```
 
 ### Search

package/docs/components/Drawer.md

@@ -134,4 +134,4 @@ import { Drawer } from "@bridge-ui/vue/Components/Drawer";
 
 ## Related components
 
-Card, useDialogAction, useDrawerAction, useModalAction
+Card, Sidebar, useDialogAction, useDrawerAction, useModalAction

package/docs/components/EmptyState.md

@@ -0,0 +1,125 @@
+# EmptyState
+
+Placeholder when a list, table, or view has no data. Title, description, optional media, and actions. Pass illustration through the `media` slot or `icon` — Bridge does not ship a stock set.
+
+Does not set `role` by default. Pass `role="status"` when the empty state is a live update.
+
+## Import
+
+```ts
+import { EmptyState } from "@bridge-ui/vue/Components/EmptyState";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<EmptyState
+  icon="search"
+  title="No projects yet"
+  description="Create your first project to get started."
+>
+  <template #action>
+    <Button color="primary">New project</Button>
+  </template>
+</EmptyState>
+```
+
+### Compact
+
+```vue
+<EmptyState size="sm" title="No results" description="Try another filter." />
+```
+
+### Alignment
+
+```vue
+<EmptyState
+  align="start"
+  title="No files"
+  description="Drop a file here to get started."
+/>
+```
+
+### Heading
+
+Use `title-as` when the page outline needs a heading. The default is `p` so the block is safe inside tables and lists.
+
+```vue
+<EmptyState title-as="h2" title="No projects yet" />
+```
+
+### Media slot
+
+```vue
+<EmptyState
+  title="No projects yet"
+  description="Create your first project to get started."
+>
+  <template #media>
+    <Icon icon="search" />
+  </template>
+  <template #action>
+    <Button color="primary">New project</Button>
+    <Button variant="flat">Learn more</Button>
+  </template>
+</EmptyState>
+```
+
+### DataTable
+
+Override the DataTable default with a richer `EmptyState` via `#empty`.
+
+```vue
+<DataTable :rows="[]" :columns="columns">
+  <template #empty>
+    <EmptyState
+      size="sm"
+      title="No users"
+      description="Invite a teammate to get started."
+    >
+      <template #action>
+        <Button size="sm">Invite</Button>
+      </template>
+    </EmptyState>
+  </template>
+</DataTable>
+```
+
+### customProps
+
+```vue
+<EmptyState
+  title="No results"
+  description="Try another filter."
+  :custom-props="{
+    title: { id: 'empty-title' },
+    media: { 'aria-hidden': true },
+    root: { id: 'empty-root', role: 'status' },
+    description: { 'aria-describedby': 'empty-title' },
+  }"
+/>
+```
+
+## Props
+
+| Prop              | Type                    | Default    | Description                                                                                                                   |
+| ----------------- | ----------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `align`           | `EmptyStateAlign`       | `"center"` | Horizontal alignment of the stack (`start`, `center`, `end`).                                                                 |
+| `classes`         | `EmptyStateClasses`     | —          | Part classes (`root`, `media`, `title`, `description`, `actions`, `icon`).                                                    |
+| `customProps`     | `EmptyStateCustomProps` | —          | Extra props for internal parts (`media`, `title`, `description`, etc.). Root HTML attributes stay on the component top level. |
+| `description`     | `string`                | —          | Supporting copy below the title.                                                                                              |
+| `icon`            | `IconSource`            | —          | Default media icon. Use the `media` slot to replace it.                                                                       |
+| `mediaDecorative` | `boolean`               | `true`     | When true, the media wrapper is hidden from assistive tech.                                                                   |
+| `size`            | `EmptyStateSize`        | `"md"`     | Spacing and typography scale (`sm`, `md`, `lg`).                                                                              |
+| `title`           | `string`                | —          | Primary heading copy.                                                                                                         |
+| `titleAs`         | `"p" \| "h1"` … `"h6"`  | `"p"`      | Element used to render `title`.                                                                                               |
+
+## Accessibility
+
+Keep default media decorative (`media-decorative`). Set `media-decorative` to `false` when the illustration conveys meaning that is not in the title or description. Use `title-as` with a heading level when the empty state is the main content of the view. For live updates after a filter or fetch, pass `role="status"`.
+
+## Related components
+
+Alert, Card, DataTable, Icon, List, Skeleton, Table

package/docs/components/List.md

@@ -164,4 +164,4 @@ With the default `as="li"`, sticky styles apply on the section root. The list (o
 
 ## Related components
 
-Menu, Select
+Menu, Select, Sidebar

package/docs/components/NumberField.md

@@ -28,6 +28,16 @@ import { NumberField } from "@bridge-ui/vue/Components/NumberField";
 />
 ```
 
+### Control variants
+
+```vue
+<NumberField label="Stacked" />
+
+<NumberField label="Split" control-variant="split" />
+
+<NumberField label="Inline" control-variant="inline" />
+```
+
 ### Min, max, and step
 
 ```vue
@@ -51,12 +61,13 @@ import { NumberField } from "@bridge-ui/vue/Components/NumberField";
 
 ### NumberField-specific
 
-| Prop      | Type                 | Default | Description                               |
-| --------- | -------------------- | ------- | ----------------------------------------- |
-| `classes` | `NumberFieldClasses` | —       | The classes to apply to the number field. |
-| `max`     | `number`             | —       | The maximum value.                        |
-| `min`     | `number`             | —       | The minimum value.                        |
-| `step`    | `number`             | 1       | The step increment value.                 |
+| Prop             | Type                               | Default     | Description                                                                                            |
+| ---------------- | ---------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------ |
+| `classes`        | `NumberFieldClasses`               | —           | The classes to apply to the number field.                                                              |
+| `controlVariant` | `"inline" \| "split" \| "stacked"` | `"stacked"` | Layout of increment and decrement controls. `split` uses minus/plus icons and occupies the start slot. |
+| `max`            | `number`                           | —           | The maximum value.                                                                                     |
+| `min`            | `number`                           | —           | The minimum value.                                                                                     |
+| `step`           | `number`                           | 1           | The step increment value.                                                                              |
 
 ### v-model