@bridge-ui/vue 0.5.1 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/ai/skills/bridge-ui-components/SKILL.md +2 -2
  2. package/dist/Adapters/I18n/useI18nAdapter.d.ts +1 -1
  3. package/dist/Adapters/I18n/useI18nAdapter.js +4 -1
  4. package/dist/Components/Accordion/Accordion.vue_vue_type_script_setup_true_lang.js +1 -1
  5. package/dist/Components/Accordion/accordion.types.d.ts +2 -2
  6. package/dist/Components/Alert/alertDefaultIcons.js +1 -0
  7. package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts +2 -2
  8. package/dist/Components/Autocomplete/composables/useAutocomplete.js +150 -145
  9. package/dist/Components/BaseField/BaseField.vue_vue_type_script_setup_true_lang.js +33 -28
  10. package/dist/Components/BaseField/BaseFieldCorner.js +5 -0
  11. package/dist/Components/BaseField/BaseFieldCorner.vue.d.ts +17 -0
  12. package/dist/Components/BaseField/BaseFieldCorner.vue_vue_type_script_setup_true_lang.js +17 -0
  13. package/dist/Components/BaseField/baseField.types.d.ts +4 -2
  14. package/dist/Components/BaseField/composables/useBaseField.d.ts +1 -1
  15. package/dist/Components/BaseField/composables/useBaseField.js +11 -8
  16. package/dist/Components/Button/Button.vue_vue_type_script_setup_true_lang.js +1 -0
  17. package/dist/Components/Button/button.types.d.ts +6 -0
  18. package/dist/Components/Button/composables/useButton.d.ts +4 -1
  19. package/dist/Components/Button/composables/useButton.js +88 -69
  20. package/dist/Components/ButtonGroup/ButtonGroup.js +5 -0
  21. package/dist/Components/ButtonGroup/ButtonGroup.vue.d.ts +14 -0
  22. package/dist/Components/ButtonGroup/ButtonGroup.vue_vue_type_script_setup_true_lang.js +37 -0
  23. package/dist/Components/ButtonGroup/buttonGroup.types.d.ts +93 -0
  24. package/dist/Components/ButtonGroup/buttonGroupInjectionKey.d.ts +7 -0
  25. package/dist/Components/ButtonGroup/buttonGroupInjectionKey.js +4 -0
  26. package/dist/Components/ButtonGroup/composables/useButtonGroup.d.ts +16 -0
  27. package/dist/Components/ButtonGroup/composables/useButtonGroup.js +66 -0
  28. package/dist/Components/ButtonGroup/index.d.ts +4 -0
  29. package/dist/Components/ButtonGroup/index.js +4 -0
  30. package/dist/Components/Calendar/Calendar.vue_vue_type_script_setup_true_lang.js +1 -1
  31. package/dist/Components/CalendarRange/CalendarRange.vue_vue_type_script_setup_true_lang.js +2 -2
  32. package/dist/Components/Checkbox/composables/useCheckbox.js +1 -1
  33. package/dist/Components/ColorField/composables/useColorField.d.ts +1 -1
  34. package/dist/Components/DataTable/DataTable.vue_vue_type_script_setup_true_lang.js +180 -158
  35. package/dist/Components/DataTable/DataTableColumnsMenu.vue_vue_type_script_setup_true_lang.js +1 -1
  36. package/dist/Components/DataTable/DataTableFilterMenu.vue_vue_type_script_setup_true_lang.js +1 -1
  37. package/dist/Components/DataTable/DataTableFilterOptions.vue_vue_type_script_setup_true_lang.js +1 -1
  38. package/dist/Components/DataTable/DataTablePagination.js +5 -0
  39. package/dist/Components/DataTable/DataTablePagination.vue.d.ts +24 -0
  40. package/dist/Components/DataTable/DataTablePagination.vue_vue_type_script_setup_true_lang.js +40 -0
  41. package/dist/Components/DataTable/DataTableSortButton.vue.d.ts +5 -11
  42. package/dist/Components/DataTable/DataTableSortButton.vue_vue_type_script_setup_true_lang.js +22 -26
  43. package/dist/Components/DataTable/composables/useDataTable.d.ts +8 -6
  44. package/dist/Components/DataTable/composables/useDataTable.js +268 -263
  45. package/dist/Components/DataTable/composables/useDataTablePagination.d.ts +69 -0
  46. package/dist/Components/DataTable/composables/useDataTablePagination.js +130 -0
  47. package/dist/Components/DataTable/dataTable.types.d.ts +27 -12
  48. package/dist/Components/DataTable/dataTablePagination.types.d.ts +169 -0
  49. package/dist/Components/DataTable/index.d.ts +2 -1
  50. package/dist/Components/DateField/composables/useDateField.d.ts +1 -1
  51. package/dist/Components/DateRangeField/composables/useDateRangeField.d.ts +1 -1
  52. package/dist/Components/DateTimeField/composables/useDateTimeField.d.ts +1 -1
  53. package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.d.ts +1 -1
  54. package/dist/Components/FieldOverlay/composables/useFieldOverlay.js +4 -1
  55. package/dist/Components/FormField/FilledFormField.vue.d.ts +7 -7
  56. package/dist/Components/FormField/FilledFormField.vue_vue_type_script_setup_true_lang.js +32 -27
  57. package/dist/Components/FormField/FormFieldCorner.js +5 -0
  58. package/dist/Components/FormField/FormFieldCorner.vue.d.ts +17 -0
  59. package/dist/Components/FormField/FormFieldCorner.vue_vue_type_script_setup_true_lang.js +17 -0
  60. package/dist/Components/FormField/NotchedFormField.vue.d.ts +7 -7
  61. package/dist/Components/FormField/NotchedFormField.vue_vue_type_script_setup_true_lang.js +31 -26
  62. package/dist/Components/FormField/OutlinedFormField.vue.d.ts +7 -7
  63. package/dist/Components/FormField/OutlinedFormField.vue_vue_type_script_setup_true_lang.js +32 -27
  64. package/dist/Components/FormField/StackedFormField.vue.d.ts +6 -6
  65. package/dist/Components/FormField/StackedFormField.vue_vue_type_script_setup_true_lang.js +34 -29
  66. package/dist/Components/FormField/UnderlinedFormField.vue.d.ts +7 -7
  67. package/dist/Components/FormField/UnderlinedFormField.vue_vue_type_script_setup_true_lang.js +32 -27
  68. package/dist/Components/FormField/composables/useFormField.d.ts +1 -1
  69. package/dist/Components/FormField/composables/useFormField.js +15 -9
  70. package/dist/Components/FormField/formField.types.d.ts +4 -2
  71. package/dist/Components/List/composables/useList.js +1 -1
  72. package/dist/Components/ListItem/ListItem.vue.d.ts +1 -1
  73. package/dist/Components/ListItem/composables/useListItem.d.ts +2 -2
  74. package/dist/Components/ListItem/composables/useListItem.js +101 -86
  75. package/dist/Components/ListSection/composables/useListSection.js +34 -31
  76. package/dist/Components/ListSection/listSection.types.d.ts +2 -1
  77. package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js +82 -82
  78. package/dist/Components/Listbox/collectComposedListboxOptions.d.ts +5 -0
  79. package/dist/Components/Listbox/collectComposedListboxOptions.js +27 -0
  80. package/dist/Components/NumberField/composables/useNumberField.d.ts +1 -1
  81. package/dist/Components/OtpField/composables/useOtpField.d.ts +1 -1
  82. package/dist/Components/Pagination/Pagination.vue_vue_type_script_setup_true_lang.js +6 -6
  83. package/dist/Components/Pagination/composables/usePagination.d.ts +4 -2
  84. package/dist/Components/Pagination/composables/usePagination.js +125 -127
  85. package/dist/Components/Pagination/pagination.types.d.ts +5 -5
  86. package/dist/Components/PasswordField/composables/usePasswordField.d.ts +1 -1
  87. package/dist/Components/Radio/composables/useRadio.js +2 -1
  88. package/dist/Components/Select/composables/useSelect.d.ts +2 -2
  89. package/dist/Components/Select/composables/useSelect.js +104 -99
  90. package/dist/Components/Sidebar/composables/useSidebarListItem.js +29 -28
  91. package/dist/Components/Sidebar/composables/useSidebarTrigger.js +14 -14
  92. package/dist/Components/Slider/composables/useSlider.d.ts +1 -1
  93. package/dist/Components/Slider/composables/useSlider.js +53 -53
  94. package/dist/Components/Snackbar/snackbarDefaultIcons.js +1 -0
  95. package/dist/Components/Tabs/Tabs.vue_vue_type_script_setup_true_lang.js +13 -12
  96. package/dist/Components/Tabs/composables/useTabs.js +16 -10
  97. package/dist/Components/Tabs/tabs.types.d.ts +3 -3
  98. package/dist/Components/TextField/composables/useTextField.d.ts +1 -1
  99. package/dist/Components/Textarea/composables/useTextarea.d.ts +1 -1
  100. package/dist/Components/TimeField/composables/useTimeField.d.ts +1 -1
  101. package/dist/Components/TimePanel/composables/useTimePanel.js +106 -106
  102. package/dist/Components/TimeRangeField/composables/useTimeRangeField.d.ts +1 -1
  103. package/dist/augments.d.ts +5 -0
  104. package/dist/index.d.ts +3 -1
  105. package/dist/index.js +150 -147
  106. package/docs/README.md +1 -0
  107. package/docs/components/Accordion.md +1 -1
  108. package/docs/components/Badge.md +2 -0
  109. package/docs/components/Button.md +5 -1
  110. package/docs/components/ButtonGroup.md +124 -0
  111. package/docs/components/DataTable.md +9 -11
  112. package/docs/components/Divider.md +1 -0
  113. package/docs/components/I18n.md +65 -24
  114. package/docs/components/Pagination.md +5 -3
  115. package/docs/components/Table.md +2 -2
  116. package/docs/components/Tabs.md +24 -6
  117. package/docs/components/ToggleGroup.md +1 -1
  118. package/docs/examples/i18n-dictionary.ts +31 -10
  119. package/docs/examples/i18n-vue-i18n.ts +7 -6
  120. package/docs/examples/icon-fontawesome.ts +4 -0
  121. package/docs/examples/icon-heroicons.ts +5 -1
  122. package/docs/examples/icon-lucide.ts +4 -0
  123. package/docs/examples/icon-phosphor.ts +4 -0
  124. package/docs/examples/icon-tabler.ts +4 -0
  125. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -20,150 +20,153 @@ import { useLabel as k } from "./Components/Label/composables/useLabel.js";
20
20
  import A from "./Components/Label/Label.js";
21
21
  import j from "./Components/FormField/FormField.js";
22
22
  import { useListbox as M } from "./Components/Listbox/composables/useListbox.js";
23
- import { useButton as N } from "./Components/Button/composables/useButton.js";
24
- import P from "./Components/Button/Button.js";
25
- import { useFieldOverlay as F } from "./Components/FieldOverlay/composables/useFieldOverlay.js";
26
- import { useDrawer as I } from "./Components/Drawer/composables/useDrawer.js";
27
- import L from "./Components/Drawer/Drawer.js";
28
- import { useMenu as R } from "./Components/Menu/composables/useMenu.js";
29
- import z from "./Components/Menu/Menu.js";
30
- import { useModal as B } from "./Components/Modal/composables/useModal.js";
31
- import V from "./Components/Modal/Modal.js";
32
- import H from "./Components/FieldOverlay/FieldOverlay.js";
33
- import { useList as U } from "./Components/List/composables/useList.js";
34
- import W from "./Components/List/List.js";
35
- import G from "./Components/ListItem/ListItem.js";
36
- import K from "./Components/ListSection/ListSection.js";
37
- import { useProgress as q } from "./Components/Progress/composables/useProgress.js";
38
- import J from "./Components/Progress/Progress.js";
39
- import Y from "./Components/Listbox/Listbox.js";
40
- import X from "./Components/Autocomplete/Autocomplete.js";
41
- import Z from "./Components/Autocomplete/AutocompleteOption.js";
42
- import Q from "./Components/Avatar/Avatar.js";
43
- import { useBadge as $ } from "./Components/Badge/composables/useBadge.js";
44
- import ee from "./Components/Badge/Badge.js";
45
- import te from "./Components/BaseField/BaseField.js";
46
- import { useBaseField as ne } from "./Components/BaseField/composables/useBaseField.js";
47
- import { useBreadcrumb as re } from "./Components/Breadcrumb/composables/useBreadcrumb.js";
48
- import { useBreadcrumbItem as ie } from "./Components/BreadcrumbItem/composables/useBreadcrumbItem.js";
49
- import ae from "./Components/BreadcrumbItem/BreadcrumbItem.js";
50
- import oe from "./Components/Breadcrumb/Breadcrumb.js";
51
- import { useCalendar as se } from "./Components/Calendar/composables/useCalendar.js";
52
- import { useCalendarDate as ce } from "./Components/CalendarDate/composables/useCalendarDate.js";
53
- import le from "./Components/CalendarDate/CalendarDate.js";
54
- import { useCalendarMonth as ue } from "./Components/CalendarMonth/composables/useCalendarMonth.js";
55
- import de from "./Components/CalendarMonth/CalendarMonth.js";
56
- import { useCalendarYear as fe } from "./Components/CalendarYear/composables/useCalendarYear.js";
57
- import pe from "./Components/CalendarYear/CalendarYear.js";
58
- import me from "./Components/Calendar/Calendar.js";
59
- import { useCalendarRange as he } from "./Components/CalendarRange/composables/useCalendarRange.js";
60
- import { useDivider as ge } from "./Components/Divider/composables/useDivider.js";
61
- import _e from "./Components/Divider/Divider.js";
62
- import ve from "./Components/CalendarRange/CalendarRange.js";
63
- import { useCard as ye } from "./Components/Card/composables/useCard.js";
64
- import be from "./Components/Card/Card.js";
65
- import { useFormControl as xe } from "./Components/FormControl/composables/useFormControl.js";
66
- import Se from "./Components/FormControl/FormControl.js";
67
- import { useCheckbox as Ce } from "./Components/Checkbox/composables/useCheckbox.js";
68
- import we from "./Components/Checkbox/Checkbox.js";
69
- import { useColorField as Te } from "./Components/ColorField/composables/useColorField.js";
70
- import { useColorPicker as Ee } from "./Components/ColorPicker/composables/useColorPicker.js";
71
- import De from "./Components/ColorPicker/ColorPicker.js";
72
- import Oe from "./Components/ColorField/ColorField.js";
73
- import { useDateField as ke } from "./Components/DateField/composables/useDateField.js";
74
- import { useDatePicker as Ae } from "./Components/DatePicker/composables/useDatePicker.js";
75
- import je from "./Components/DatePicker/DatePicker.js";
76
- import Me from "./Components/DateField/DateField.js";
77
- import { useDateRangeField as Ne } from "./Components/DateRangeField/composables/useDateRangeField.js";
78
- import { useDateRangePicker as Pe } from "./Components/DateRangePicker/composables/useDateRangePicker.js";
79
- import Fe from "./Components/DateRangePicker/DateRangePicker.js";
80
- import Ie from "./Components/DateRangeField/DateRangeField.js";
81
- import { useDateTimeField as Le } from "./Components/DateTimeField/composables/useDateTimeField.js";
82
- import { useDateTimePicker as Re } from "./Components/DateTimePicker/composables/useDateTimePicker.js";
83
- import { useTimePanel as ze } from "./Components/TimePanel/composables/useTimePanel.js";
84
- import Be from "./Components/TimePanel/TimePanel.js";
85
- import Ve from "./Components/DateTimePicker/DateTimePicker.js";
86
- import He from "./Components/DateTimeField/DateTimeField.js";
87
- import { useDateTimeRangeField as Ue } from "./Components/DateTimeRangeField/composables/useDateTimeRangeField.js";
88
- import { useDateTimeRangePicker as We } from "./Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js";
89
- import Ge from "./Components/DateTimeRangePicker/DateTimeRangePicker.js";
90
- import Ke from "./Components/DateTimeRangeField/DateTimeRangeField.js";
91
- import { useEmptyState as qe } from "./Components/EmptyState/composables/useEmptyState.js";
92
- import Je from "./Components/EmptyState/EmptyState.js";
93
- import { useLink as Ye } from "./Components/Link/composables/useLink.js";
94
- import Xe from "./Components/Link/Link.js";
95
- import { useNumberField as Ze } from "./Components/NumberField/composables/useNumberField.js";
96
- import Qe from "./Components/NumberField/NumberField.js";
97
- import { useOtpField as $e } from "./Components/OtpField/composables/useOtpField.js";
98
- import et from "./Components/OtpField/OtpField.js";
99
- import { usePagination as tt } from "./Components/Pagination/composables/usePagination.js";
100
- import nt from "./Components/Pagination/Pagination.js";
101
- import { usePasswordField as rt } from "./Components/PasswordField/composables/usePasswordField.js";
102
- import it from "./Components/PasswordField/PasswordField.js";
103
- import { useRadio as at } from "./Components/Radio/composables/useRadio.js";
104
- import ot from "./Components/Radio/Radio.js";
105
- import st from "./Components/Select/Select.js";
106
- import ct from "./Components/Select/SelectOption.js";
107
- import { useSidebar as lt } from "./Components/Sidebar/composables/useSidebar.js";
108
- import { useSidebarInset as ut } from "./Components/Sidebar/composables/useSidebarInset.js";
109
- import { useSidebarList as dt } from "./Components/Sidebar/composables/useSidebarList.js";
110
- import { useSidebarListItem as ft } from "./Components/Sidebar/composables/useSidebarListItem.js";
111
- import { useSidebarProvider as pt } from "./Components/Sidebar/composables/useSidebarProvider.js";
112
- import { useSidebarShell as mt } from "./Components/Sidebar/composables/useSidebarShell.js";
113
- import { useSidebarTrigger as ht } from "./Components/Sidebar/composables/useSidebarTrigger.js";
114
- import gt from "./Components/Sidebar/Sidebar.js";
115
- import _t from "./Components/Sidebar/SidebarInset.js";
116
- import vt from "./Components/Sidebar/SidebarList.js";
117
- import { useTooltip as yt } from "./Components/Tooltip/composables/useTooltip.js";
118
- import bt from "./Components/Tooltip/Tooltip.js";
119
- import xt from "./Components/Sidebar/SidebarListItem.js";
120
- import St from "./Components/Sidebar/SidebarProvider.js";
121
- import Ct from "./Components/Sidebar/SidebarTrigger.js";
122
- import { useSkeleton as wt } from "./Components/Skeleton/composables/useSkeleton.js";
123
- import Tt from "./Components/Skeleton/Skeleton.js";
124
- import { useSlider as Et } from "./Components/Slider/composables/useSlider.js";
125
- import Dt from "./Components/Slider/Slider.js";
126
- import { useSnackbar as Ot } from "./Components/Snackbar/composables/useSnackbar.js";
127
- import kt from "./Components/Snackbar/Snackbar.js";
128
- import { useSpinner as At } from "./Components/Spinner/composables/useSpinner.js";
129
- import jt from "./Components/Spinner/Spinner.js";
130
- import { useStep as Mt } from "./Components/Step/composables/useStep.js";
131
- import Nt from "./Components/Step/Step.js";
132
- import { useStepper as Pt } from "./Components/Stepper/composables/useStepper.js";
133
- import Ft from "./Components/Stepper/Stepper.js";
134
- import { useSwitch as It } from "./Components/Switch/composables/useSwitch.js";
135
- import Lt from "./Components/Switch/Switch.js";
136
- import { TABS_INJECTION_KEY as Rt } from "./Components/Tabs/tabsInjectionKey.js";
137
- import { useTab as zt } from "./Components/Tab/composables/useTab.js";
138
- import Bt from "./Components/Tab/Tab.js";
139
- import { useTabItem as Vt } from "./Components/TabItem/composables/useTabItem.js";
140
- import Ht from "./Components/TabItem/TabItem.js";
141
- import { useTabList as Ut } from "./Components/TabList/composables/useTabList.js";
142
- import Wt from "./Components/TabList/TabList.js";
143
- import { useTabPanel as Gt } from "./Components/TabPanel/composables/useTabPanel.js";
144
- import Kt from "./Components/TabPanel/TabPanel.js";
145
- import { useTabs as qt } from "./Components/Tabs/composables/useTabs.js";
146
- import Jt from "./Components/Tabs/Tabs.js";
147
- import { useTextarea as Yt } from "./Components/Textarea/composables/useTextarea.js";
148
- import Xt from "./Components/Textarea/Textarea.js";
149
- import { useTextField as Zt } from "./Components/TextField/composables/useTextField.js";
150
- import Qt from "./Components/TextField/TextField.js";
151
- import { useTimeField as $t } from "./Components/TimeField/composables/useTimeField.js";
152
- import { useTimePicker as en } from "./Components/TimePicker/composables/useTimePicker.js";
153
- import tn from "./Components/TimePicker/TimePicker.js";
154
- import nn from "./Components/TimeField/TimeField.js";
155
- import { useTimeRangeField as rn } from "./Components/TimeRangeField/composables/useTimeRangeField.js";
156
- import { useTimeRangePicker as an } from "./Components/TimeRangePicker/composables/useTimeRangePicker.js";
157
- import on from "./Components/TimeRangePicker/TimeRangePicker.js";
158
- import sn from "./Components/TimeRangeField/TimeRangeField.js";
159
- import { TOGGLE_GROUP_INJECTION_KEY as cn } from "./Components/ToggleGroup/toggleGroupInjectionKey.js";
160
- import { useToggleGroup as ln } from "./Components/ToggleGroup/composables/useToggleGroup.js";
161
- import un from "./Components/ToggleGroup/ToggleGroup.js";
162
- import { useToggleItem as dn } from "./Components/ToggleItem/composables/useToggleItem.js";
163
- import fn from "./Components/ToggleItem/ToggleItem.js";
164
- import pn from "./Provider/BridgeUIProvider.js";
165
- import { createBridgeUI as mn } from "./Provider/createBridgeUI.js";
166
- import { SEMANTIC_ICON_NAMES as hn, resolveMessage as gn } from "@bridge-ui/core/Adapters";
167
- import { cn as _n } from "@bridge-ui/core/Utils";
168
- import { BRIDGE_UI_DEFAULT_GLOBAL as vn, mergeBridgeUIComponents as yn, mergeBridgeUIGlobal as bn, resolveBridgeUIOptions as xn } from "@bridge-ui/core/Config";
169
- 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 };
23
+ import { BUTTON_GROUP_INJECTION_KEY as N } from "./Components/ButtonGroup/buttonGroupInjectionKey.js";
24
+ import { useButton as P } from "./Components/Button/composables/useButton.js";
25
+ import F from "./Components/Button/Button.js";
26
+ import { useFieldOverlay as I } from "./Components/FieldOverlay/composables/useFieldOverlay.js";
27
+ import { useDrawer as L } from "./Components/Drawer/composables/useDrawer.js";
28
+ import R from "./Components/Drawer/Drawer.js";
29
+ import { useMenu as z } from "./Components/Menu/composables/useMenu.js";
30
+ import B from "./Components/Menu/Menu.js";
31
+ import { useModal as V } from "./Components/Modal/composables/useModal.js";
32
+ import H from "./Components/Modal/Modal.js";
33
+ import U from "./Components/FieldOverlay/FieldOverlay.js";
34
+ import { useList as W } from "./Components/List/composables/useList.js";
35
+ import G from "./Components/List/List.js";
36
+ import K from "./Components/ListItem/ListItem.js";
37
+ import q from "./Components/ListSection/ListSection.js";
38
+ import { useProgress as J } from "./Components/Progress/composables/useProgress.js";
39
+ import Y from "./Components/Progress/Progress.js";
40
+ import X from "./Components/Listbox/Listbox.js";
41
+ import Z from "./Components/Autocomplete/Autocomplete.js";
42
+ import Q from "./Components/Autocomplete/AutocompleteOption.js";
43
+ import $ from "./Components/Avatar/Avatar.js";
44
+ import { useBadge as ee } from "./Components/Badge/composables/useBadge.js";
45
+ import te from "./Components/Badge/Badge.js";
46
+ import ne from "./Components/BaseField/BaseField.js";
47
+ import { useBaseField as re } from "./Components/BaseField/composables/useBaseField.js";
48
+ import { useBreadcrumb as ie } from "./Components/Breadcrumb/composables/useBreadcrumb.js";
49
+ import { useBreadcrumbItem as ae } from "./Components/BreadcrumbItem/composables/useBreadcrumbItem.js";
50
+ import oe from "./Components/BreadcrumbItem/BreadcrumbItem.js";
51
+ import se from "./Components/Breadcrumb/Breadcrumb.js";
52
+ import { useButtonGroup as ce } from "./Components/ButtonGroup/composables/useButtonGroup.js";
53
+ import le from "./Components/ButtonGroup/ButtonGroup.js";
54
+ import { useCalendar as ue } from "./Components/Calendar/composables/useCalendar.js";
55
+ import { useCalendarDate as de } from "./Components/CalendarDate/composables/useCalendarDate.js";
56
+ import fe from "./Components/CalendarDate/CalendarDate.js";
57
+ import { useCalendarMonth as pe } from "./Components/CalendarMonth/composables/useCalendarMonth.js";
58
+ import me from "./Components/CalendarMonth/CalendarMonth.js";
59
+ import { useCalendarYear as he } from "./Components/CalendarYear/composables/useCalendarYear.js";
60
+ import ge from "./Components/CalendarYear/CalendarYear.js";
61
+ import _e from "./Components/Calendar/Calendar.js";
62
+ import { useCalendarRange as ve } from "./Components/CalendarRange/composables/useCalendarRange.js";
63
+ import { useDivider as ye } from "./Components/Divider/composables/useDivider.js";
64
+ import be from "./Components/Divider/Divider.js";
65
+ import xe from "./Components/CalendarRange/CalendarRange.js";
66
+ import { useCard as Se } from "./Components/Card/composables/useCard.js";
67
+ import Ce from "./Components/Card/Card.js";
68
+ import { useFormControl as we } from "./Components/FormControl/composables/useFormControl.js";
69
+ import Te from "./Components/FormControl/FormControl.js";
70
+ import { useCheckbox as Ee } from "./Components/Checkbox/composables/useCheckbox.js";
71
+ import De from "./Components/Checkbox/Checkbox.js";
72
+ import { useColorField as Oe } from "./Components/ColorField/composables/useColorField.js";
73
+ import { useColorPicker as ke } from "./Components/ColorPicker/composables/useColorPicker.js";
74
+ import Ae from "./Components/ColorPicker/ColorPicker.js";
75
+ import je from "./Components/ColorField/ColorField.js";
76
+ import { useDateField as Me } from "./Components/DateField/composables/useDateField.js";
77
+ import { useDatePicker as Ne } from "./Components/DatePicker/composables/useDatePicker.js";
78
+ import Pe from "./Components/DatePicker/DatePicker.js";
79
+ import Fe from "./Components/DateField/DateField.js";
80
+ import { useDateRangeField as Ie } from "./Components/DateRangeField/composables/useDateRangeField.js";
81
+ import { useDateRangePicker as Le } from "./Components/DateRangePicker/composables/useDateRangePicker.js";
82
+ import Re from "./Components/DateRangePicker/DateRangePicker.js";
83
+ import ze from "./Components/DateRangeField/DateRangeField.js";
84
+ import { useDateTimeField as Be } from "./Components/DateTimeField/composables/useDateTimeField.js";
85
+ import { useDateTimePicker as Ve } from "./Components/DateTimePicker/composables/useDateTimePicker.js";
86
+ import { useTimePanel as He } from "./Components/TimePanel/composables/useTimePanel.js";
87
+ import Ue from "./Components/TimePanel/TimePanel.js";
88
+ import We from "./Components/DateTimePicker/DateTimePicker.js";
89
+ import Ge from "./Components/DateTimeField/DateTimeField.js";
90
+ import { useDateTimeRangeField as Ke } from "./Components/DateTimeRangeField/composables/useDateTimeRangeField.js";
91
+ import { useDateTimeRangePicker as qe } from "./Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js";
92
+ import Je from "./Components/DateTimeRangePicker/DateTimeRangePicker.js";
93
+ import Ye from "./Components/DateTimeRangeField/DateTimeRangeField.js";
94
+ import { useEmptyState as Xe } from "./Components/EmptyState/composables/useEmptyState.js";
95
+ import Ze from "./Components/EmptyState/EmptyState.js";
96
+ import { useLink as Qe } from "./Components/Link/composables/useLink.js";
97
+ import $e from "./Components/Link/Link.js";
98
+ import { useNumberField as et } from "./Components/NumberField/composables/useNumberField.js";
99
+ import tt from "./Components/NumberField/NumberField.js";
100
+ import { useOtpField as nt } from "./Components/OtpField/composables/useOtpField.js";
101
+ import rt from "./Components/OtpField/OtpField.js";
102
+ import { usePagination as it } from "./Components/Pagination/composables/usePagination.js";
103
+ import at from "./Components/Pagination/Pagination.js";
104
+ import { usePasswordField as ot } from "./Components/PasswordField/composables/usePasswordField.js";
105
+ import st from "./Components/PasswordField/PasswordField.js";
106
+ import { useRadio as ct } from "./Components/Radio/composables/useRadio.js";
107
+ import lt from "./Components/Radio/Radio.js";
108
+ import ut from "./Components/Select/Select.js";
109
+ import dt from "./Components/Select/SelectOption.js";
110
+ import { useSidebar as ft } from "./Components/Sidebar/composables/useSidebar.js";
111
+ import { useSidebarInset as pt } from "./Components/Sidebar/composables/useSidebarInset.js";
112
+ import { useSidebarList as mt } from "./Components/Sidebar/composables/useSidebarList.js";
113
+ import { useSidebarListItem as ht } from "./Components/Sidebar/composables/useSidebarListItem.js";
114
+ import { useSidebarProvider as gt } from "./Components/Sidebar/composables/useSidebarProvider.js";
115
+ import { useSidebarShell as _t } from "./Components/Sidebar/composables/useSidebarShell.js";
116
+ import { useSidebarTrigger as vt } from "./Components/Sidebar/composables/useSidebarTrigger.js";
117
+ import yt from "./Components/Sidebar/Sidebar.js";
118
+ import bt from "./Components/Sidebar/SidebarInset.js";
119
+ import xt from "./Components/Sidebar/SidebarList.js";
120
+ import { useTooltip as St } from "./Components/Tooltip/composables/useTooltip.js";
121
+ import Ct from "./Components/Tooltip/Tooltip.js";
122
+ import wt from "./Components/Sidebar/SidebarListItem.js";
123
+ import Tt from "./Components/Sidebar/SidebarProvider.js";
124
+ import Et from "./Components/Sidebar/SidebarTrigger.js";
125
+ import { useSkeleton as Dt } from "./Components/Skeleton/composables/useSkeleton.js";
126
+ import Ot from "./Components/Skeleton/Skeleton.js";
127
+ import { useSlider as kt } from "./Components/Slider/composables/useSlider.js";
128
+ import At from "./Components/Slider/Slider.js";
129
+ import { useSnackbar as jt } from "./Components/Snackbar/composables/useSnackbar.js";
130
+ import Mt from "./Components/Snackbar/Snackbar.js";
131
+ import { useSpinner as Nt } from "./Components/Spinner/composables/useSpinner.js";
132
+ import Pt from "./Components/Spinner/Spinner.js";
133
+ import { useStep as Ft } from "./Components/Step/composables/useStep.js";
134
+ import It from "./Components/Step/Step.js";
135
+ import { useStepper as Lt } from "./Components/Stepper/composables/useStepper.js";
136
+ import Rt from "./Components/Stepper/Stepper.js";
137
+ import { useSwitch as zt } from "./Components/Switch/composables/useSwitch.js";
138
+ import Bt from "./Components/Switch/Switch.js";
139
+ import { TABS_INJECTION_KEY as Vt } from "./Components/Tabs/tabsInjectionKey.js";
140
+ import { useTab as Ht } from "./Components/Tab/composables/useTab.js";
141
+ import Ut from "./Components/Tab/Tab.js";
142
+ import { useTabItem as Wt } from "./Components/TabItem/composables/useTabItem.js";
143
+ import Gt from "./Components/TabItem/TabItem.js";
144
+ import { useTabList as Kt } from "./Components/TabList/composables/useTabList.js";
145
+ import qt from "./Components/TabList/TabList.js";
146
+ import { useTabPanel as Jt } from "./Components/TabPanel/composables/useTabPanel.js";
147
+ import Yt from "./Components/TabPanel/TabPanel.js";
148
+ import { useTabs as Xt } from "./Components/Tabs/composables/useTabs.js";
149
+ import Zt from "./Components/Tabs/Tabs.js";
150
+ import { useTextarea as Qt } from "./Components/Textarea/composables/useTextarea.js";
151
+ import $t from "./Components/Textarea/Textarea.js";
152
+ import { useTextField as en } from "./Components/TextField/composables/useTextField.js";
153
+ import tn from "./Components/TextField/TextField.js";
154
+ import { useTimeField as nn } from "./Components/TimeField/composables/useTimeField.js";
155
+ import { useTimePicker as rn } from "./Components/TimePicker/composables/useTimePicker.js";
156
+ import an from "./Components/TimePicker/TimePicker.js";
157
+ import on from "./Components/TimeField/TimeField.js";
158
+ import { useTimeRangeField as sn } from "./Components/TimeRangeField/composables/useTimeRangeField.js";
159
+ import { useTimeRangePicker as cn } from "./Components/TimeRangePicker/composables/useTimeRangePicker.js";
160
+ import ln from "./Components/TimeRangePicker/TimeRangePicker.js";
161
+ import un from "./Components/TimeRangeField/TimeRangeField.js";
162
+ import { TOGGLE_GROUP_INJECTION_KEY as dn } from "./Components/ToggleGroup/toggleGroupInjectionKey.js";
163
+ import { useToggleGroup as fn } from "./Components/ToggleGroup/composables/useToggleGroup.js";
164
+ import pn from "./Components/ToggleGroup/ToggleGroup.js";
165
+ import { useToggleItem as mn } from "./Components/ToggleItem/composables/useToggleItem.js";
166
+ import hn from "./Components/ToggleItem/ToggleItem.js";
167
+ import gn from "./Provider/BridgeUIProvider.js";
168
+ import { createBridgeUI as _n } from "./Provider/createBridgeUI.js";
169
+ import { SEMANTIC_ICON_NAMES as vn, interpolateMessage as yn, resolveMessage as bn, selectPluralMessage as xn } from "@bridge-ui/core/Adapters";
170
+ import { cn as Sn } from "@bridge-ui/core/Utils";
171
+ import { BRIDGE_UI_DEFAULT_GLOBAL as Cn, mergeBridgeUIComponents as wn, mergeBridgeUIGlobal as Tn, resolveBridgeUIOptions as En } from "@bridge-ui/core/Config";
172
+ export { l as ACCORDION_INJECTION_KEY, m as Accordion, _ as AccordionItem, y as Alert, Z as Autocomplete, Q as AutocompleteOption, $ as Avatar, Cn as BRIDGE_UI_DEFAULT_GLOBAL, N as BUTTON_GROUP_INJECTION_KEY, te as Badge, ne as BaseField, se as Breadcrumb, oe as BreadcrumbItem, gn as BridgeUIProvider, F as Button, le as ButtonGroup, _e as Calendar, fe as CalendarDate, me as CalendarMonth, xe as CalendarRange, ge as CalendarYear, Ce as Card, De as Checkbox, O as Chip, je as ColorField, Ae as ColorPicker, Fe as DateField, Pe as DatePicker, ze as DateRangeField, Re as DateRangePicker, Ge as DateTimeField, We as DateTimePicker, Ye as DateTimeRangeField, Je as DateTimeRangePicker, be as Divider, R as Drawer, Ze as EmptyState, U as FieldOverlay, Te as FormControl, j as FormField, g as Icon, A as Label, $e as Link, G as List, K as ListItem, q as ListSection, X as Listbox, B as Menu, H as Modal, tt as NumberField, rt as OtpField, at as Pagination, st as PasswordField, Y as Progress, lt as Radio, vn as SEMANTIC_ICON_NAMES, ut as Select, dt as SelectOption, yt as Sidebar, bt as SidebarInset, xt as SidebarList, wt as SidebarListItem, Tt as SidebarProvider, Et as SidebarTrigger, Ot as Skeleton, At as Slider, Mt as Snackbar, Pt as Spinner, It as Step, Rt as Stepper, Bt as Switch, Vt as TABS_INJECTION_KEY, dn as TOGGLE_GROUP_INJECTION_KEY, Ut as Tab, Gt as TabItem, qt as TabList, Yt as TabPanel, Zt as Tabs, tn as TextField, $t as Textarea, on as TimeField, Ue as TimePanel, an as TimePicker, un as TimeRangeField, ln as TimeRangePicker, pn as ToggleGroup, hn as ToggleItem, Ct as Tooltip, Sn as cn, _n as createBridgeUI, x as findFirstEnabledOptionIndex, S as findLastEnabledOptionIndex, C as getListboxActiveDescendantId, w as getListboxOptionId, yn as interpolateMessage, wn as mergeBridgeUIComponents, Tn as mergeBridgeUIGlobal, T as moveListboxHighlight, En as resolveBridgeUIOptions, bn as resolveMessage, xn as selectPluralMessage, t as setDateAdapterForTests, i as setI18nAdapterForTests, s as setIconAdapterForTests, p as useAccordion, h as useAccordionItem, v as useAlert, ee as useBadge, re as useBaseField, ie as useBreadcrumb, ae as useBreadcrumbItem, u as useBreakpoint, e as useBridgeUI, d as useBridgeUIComponent, f as useBridgeUIMergedRegistryClasses, P as useButton, ce as useButtonGroup, ue as useCalendar, de as useCalendarDate, pe as useCalendarMonth, ve as useCalendarRange, he as useCalendarYear, Se as useCard, Ee as useCheckbox, D as useChip, Oe as useColorField, ke as useColorPicker, n as useDateAdapter, r as useDateAdapterContext, Me as useDateField, Ne as useDatePicker, Ie as useDateRangeField, Le as useDateRangePicker, Be as useDateTimeField, Ve as useDateTimePicker, Ke as useDateTimeRangeField, qe as useDateTimeRangePicker, ye as useDivider, L as useDrawer, Xe as useEmptyState, I as useFieldOverlay, we as useFormControl, b as useFormField, a as useI18nAdapter, c as useIconAdapter, k as useLabel, Qe as useLink, W as useList, M as useListbox, E as useListboxNavigation, z as useMenu, V as useModal, et as useNumberField, nt as useOtpField, it as usePagination, ot as usePasswordField, J as useProgress, ct as useRadio, o as useResolveMessage, ft as useSidebar, pt as useSidebarInset, mt as useSidebarList, ht as useSidebarListItem, gt as useSidebarProvider, _t as useSidebarShell, vt as useSidebarTrigger, Dt as useSkeleton, kt as useSlider, jt as useSnackbar, Nt as useSpinner, Ft as useStep, Lt as useStepper, zt as useSwitch, Ht as useTab, Wt as useTabItem, Kt as useTabList, Jt as useTabPanel, Xt as useTabs, en as useTextField, Qt as useTextarea, nn as useTimeField, He as useTimePanel, rn as useTimePicker, sn as useTimeRangeField, cn as useTimeRangePicker, fn as useToggleGroup, mn as useToggleItem, St as useTooltip };
package/docs/README.md CHANGED
@@ -13,6 +13,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
13
13
  - [BridgeUIProvider](./components/BridgeUIProvider.md)
14
14
  - [Breadcrumb](./components/Breadcrumb.md)
15
15
  - [Button](./components/Button.md)
16
+ - [ButtonGroup](./components/ButtonGroup.md)
16
17
  - [Calendar](./components/Calendar.md)
17
18
  - [CalendarDate](./components/CalendarDate.md)
18
19
  - [CalendarMonth](./components/CalendarMonth.md)
@@ -1,6 +1,6 @@
1
1
  # Accordion
2
2
 
3
- Expandable sections for FAQs, settings groups, and stacked content. Single or multiple panels open at once. Compose with `AccordionItem`.
3
+ Expandable sections for FAQs, settings groups, and stacked content. Single or multiple panels open at once. Compose with `AccordionItem`. Expanded items stay on the same quiet text color; `color` optionally accents the open trigger.
4
4
 
5
5
  ## Import
6
6
 
@@ -20,6 +20,8 @@ import { Badge } from "@bridge-ui/vue/Components/Badge";
20
20
  <Badge variant="flat" color="success">
21
21
  Active
22
22
  </Badge>
23
+
24
+ <Badge color="black">Black</Badge>
23
25
  ```
24
26
 
25
27
  ### Custom classes
@@ -15,6 +15,8 @@ import { Button } from "@bridge-ui/vue/Components/Button";
15
15
  ```vue
16
16
  <Button color="primary">Click me</Button>
17
17
 
18
+ <Button color="black">Black</Button>
19
+
18
20
  <Button variant="outline" :start-icon="Plus">
19
21
  With icon
20
22
  </Button>
@@ -35,6 +37,7 @@ import { Button } from "@bridge-ui/vue/Components/Button";
35
37
  ```vue
36
38
  <Button loading>Loading</Button>
37
39
  <Button disabled>Disabled</Button>
40
+ <Button selected>Selected</Button>
38
41
  ```
39
42
 
40
43
  ### Slots
@@ -83,6 +86,7 @@ import { Button } from "@bridge-ui/vue/Components/Button";
83
86
  | `icon` | `LucideIcon` | — | Icon for mini density (replaces label and start/end icons). |
84
87
  | `loading` | `boolean` | `false` | Whether the button is loading. |
85
88
  | `rounded` | `ButtonRounded` | "md" | The roundedness of the button. |
89
+ | `selected` | `boolean` | `false` | Whether the button is in a selected / pressed state. |
86
90
  | `size` | `ButtonSize` | "md" | The size of the button. |
87
91
  | `startIcon` | `LucideIcon` | — | Icon at the **inline start** (physical left in `ltr`, physical right in `rtl`). |
88
92
  | `text` | `string` | — | Label text when the default slot is not used. |
@@ -90,4 +94,4 @@ import { Button } from "@bridge-ui/vue/Components/Button";
90
94
 
91
95
  ## Related components
92
96
 
93
- Link, Icon
97
+ Link, Icon, ButtonGroup
@@ -0,0 +1,124 @@
1
+ # ButtonGroup
2
+
3
+ Groups related action buttons in a joined strip with a full-height divider between children. The divider fill matches the button text color. Set `size`, `variant`, `color`, `density`, or `rounded` on the group to apply them to nested `Button` children. A `Button` can still override any of those props. Set `selected` on a `Button` to show a pressed state. Use `ToggleGroup` when the controls select a value.
4
+
5
+ ## Import
6
+
7
+ ```ts
8
+ import { ButtonGroup } from "@bridge-ui/vue/Components/ButtonGroup";
9
+ ```
10
+
11
+ ## Examples
12
+
13
+ ### Usage
14
+
15
+ ```vue
16
+ <ButtonGroup variant="outline" aria-label="Export">
17
+ <Button>Copy</Button>
18
+ <Button>Paste</Button>
19
+ </ButtonGroup>
20
+ ```
21
+
22
+ ### Orientation
23
+
24
+ ```vue
25
+ <ButtonGroup variant="outline" aria-label="Zoom" orientation="vertical">
26
+ <Button>+</Button>
27
+ <Button>-</Button>
28
+ </ButtonGroup>
29
+ ```
30
+
31
+ ### Size
32
+
33
+ ```vue
34
+ <ButtonGroup size="sm" variant="outline" aria-label="Small">
35
+ <Button>One</Button>
36
+ <Button>Two</Button>
37
+ </ButtonGroup>
38
+ ```
39
+
40
+ ### Selected
41
+
42
+ Set `selected` on a `Button` for a pressed action. Use `ToggleGroup` when the controls select a value.
43
+
44
+ ```vue
45
+ <ButtonGroup variant="outline" aria-label="Format">
46
+ <Button selected>Bold</Button>
47
+ <Button>Italic</Button>
48
+ <Button>Underline</Button>
49
+ </ButtonGroup>
50
+ ```
51
+
52
+ ### Color
53
+
54
+ ```vue
55
+ <ButtonGroup color="primary" variant="outline" aria-label="Export">
56
+ <Button>Copy</Button>
57
+ <Button>Paste</Button>
58
+ </ButtonGroup>
59
+ ```
60
+
61
+ ### Nested
62
+
63
+ Nest groups to space clusters of actions. Joined edges and dividers stay inside each inner group. Appearance props cascade through nested groups. Keep inner groups as the only direct children of the outer group — mixing loose `Button` children with nested groups removes the hairline divider between all children.
64
+
65
+ ```vue
66
+ <ButtonGroup variant="outline" aria-label="Editor">
67
+ <ButtonGroup>
68
+ <Button>Bold</Button>
69
+ <Button>Italic</Button>
70
+ </ButtonGroup>
71
+ <ButtonGroup>
72
+ <Button>Undo</Button>
73
+ <Button>Redo</Button>
74
+ </ButtonGroup>
75
+ </ButtonGroup>
76
+ ```
77
+
78
+ ### Split
79
+
80
+ ```vue
81
+ <ButtonGroup aria-label="Save">
82
+ <Button>Save</Button>
83
+ <Button density="mini" :icon="ChevronDown" aria-label="More save options" />
84
+ </ButtonGroup>
85
+ ```
86
+
87
+ ### Full width
88
+
89
+ ```vue
90
+ <ButtonGroup full variant="outline" aria-label="Export">
91
+ <Button>Copy</Button>
92
+ <Button>Paste</Button>
93
+ </ButtonGroup>
94
+ ```
95
+
96
+ ### No separator
97
+
98
+ ```vue
99
+ <ButtonGroup variant="outline" aria-label="Export" :separator="false">
100
+ <Button>Copy</Button>
101
+ <Button>Paste</Button>
102
+ </ButtonGroup>
103
+ ```
104
+
105
+ ## Props
106
+
107
+ | Prop | Type | Default | Description |
108
+ | ------------- | ------------------------ | -------------- | --------------------------------------------------------------------------------------------- |
109
+ | `classes` | `ButtonGroupClasses` | — | Classes for button group parts. |
110
+ | `color` | `ButtonColor` | `"primary"` | Color applied to nested buttons when set. The divider follows the button text color. |
111
+ | `customProps` | `ButtonGroupCustomProps` | — | Extra props for internal parts. |
112
+ | `density` | `ButtonDensity` | — | Density applied to nested buttons unless they set `density`. |
113
+ | `full` | `boolean` | `false` | Stretch the group to the container width. |
114
+ | `orientation` | `ButtonGroupOrientation` | `"horizontal"` | Layout orientation of the group. |
115
+ | `rounded` | `ButtonRounded` | — | Roundness applied to nested buttons unless they set `rounded`. |
116
+ | `separator` | `boolean` | `true` | Draw a full-height divider between adjacent children. The fill matches the button text color. |
117
+ | `size` | `ButtonSize` | — | Size applied to nested buttons unless they set `size`. |
118
+ | `variant` | `ButtonVariant` | — | Variant applied to nested buttons unless they set `variant`. |
119
+
120
+ Pass `aria-label` or `aria-labelledby` on the group.
121
+
122
+ ## Related components
123
+
124
+ Button, ToggleGroup
@@ -26,7 +26,7 @@ import { DataTable } from "@bridge-ui/vue/Components/DataTable";
26
26
 
27
27
  ### Variants
28
28
 
29
- DataTable chrome (`plain` / `ghost` / `bordered`). Built-in `Pagination` follows the matching variant unless the `pagination` slot overrides it:
29
+ DataTable chrome (`plain` / `ghost` / `bordered`). The built-in footer pager is first / previous / next / last and does not follow table variant:
30
30
 
31
31
  ```vue
32
32
  <DataTable :rows="users" variant="plain" :columns="columns" />
@@ -34,12 +34,6 @@ DataTable chrome (`plain` / `ghost` / `bordered`). Built-in `Pagination` follows
34
34
  <DataTable :rows="users" variant="bordered" :columns="columns" />
35
35
  ```
36
36
 
37
- | DataTable `variant` | Pagination `variant` |
38
- | ------------------- | -------------------- |
39
- | `plain` | `text` |
40
- | `ghost` | `ghost` |
41
- | `bordered` | `outlined` |
42
-
43
37
  `striped` is independent of variant:
44
38
 
45
39
  ```vue
@@ -66,7 +60,7 @@ DataTable chrome (`plain` / `ghost` / `bordered`). Built-in `Pagination` follows
66
60
 
67
61
  ### Selection + pagination
68
62
 
69
- Built-in Pagination when `page` is set with `page-count` or `total-count` (server fetch stays in the app). `page` + `per-page` without those totals slices `rows` locally. `per-page` also renders a Select (`per-page-options`, default 10 / 25 / 50 / 100). `#pagination` and `#perPage` replace each control:
63
+ The chrome footer shows a selection summary when `selection` is bound, a per-page Select when `per-page` is set (`per-page-options`, default 10 / 25 / 50 / 100), and a first / previous / next / last pager when `page` is set with `page-count` or `total-count` (server fetch stays in the app). `page` + `per-page` without those totals slices `rows` locally. `#selected`, `#pagination`, and `#perPage` replace each control:
70
64
 
71
65
  ```vue
72
66
  <DataTable
@@ -98,7 +92,7 @@ Client paging slices `rows`. Server paging with a total uses `total-count` inste
98
92
  />
99
93
  ```
100
94
 
101
- Slot replaces the built-in Pagination and/or per-page Select (`#pagination` / `#perPage`; slot props match the built-ins):
95
+ Slot replaces the built-in footer controls (`#selected` / `#pagination` / `#perPage`; slot props match the built-ins):
102
96
 
103
97
  ```vue
104
98
  <DataTable :rows="users" :columns="columns" :get-row-id="(row) => row.id">
@@ -141,7 +135,7 @@ When `page` and `page-count` (or `total-count`) are set, DataTable does not sort
141
135
 
142
136
  ### Empty, loading, and footer
143
137
 
144
- Empty rows render `EmptyState` at the table `size`, with the semantic `inbox` icon and 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:
138
+ Empty rows render `EmptyState` at the table `size`, with the semantic `inbox` icon and 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 the chrome footer:
145
139
 
146
140
  ```vue
147
141
  <DataTable :rows="[]" :columns="columns" :loading="isLoading">
@@ -180,7 +174,7 @@ const columns = [
180
174
  ];
181
175
  ```
182
176
 
183
- Table-level slots stay `empty` / `expanded` / `footer` / `item.{id}` / `item` / `loading` / `pagination` / `perPage` / `search` / `toolbar` / `toolbarActions`. `#item` is a catch-all when `#item.{id}` is not set.
177
+ Table-level slots stay `empty` / `expanded` / `footer` / `item.{id}` / `item` / `loading` / `pagination` / `perPage` / `search` / `selected` / `toolbar` / `toolbarActions`. `#item` is a catch-all when `#item.{id}` is not set.
184
178
 
185
179
  ### Selection
186
180
 
@@ -196,6 +190,10 @@ Table-level slots stay `empty` / `expanded` / `footer` / `item.{id}` / `item` /
196
190
  />
197
191
  ```
198
192
 
193
+ ### Sorting
194
+
195
+ Set `sortable` on a column to show a sort button in that header, matching the filter control. Clicks cycle unsorted → ascending → descending → unsorted. Bind `v-model:sorting`. The header cell keeps `aria-sort`.
196
+
199
197
  ### Filters
200
198
 
201
199
  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.
@@ -34,6 +34,7 @@ import { Divider } from "@bridge-ui/vue/Components/Divider";
34
34
 
35
35
  ```vue
36
36
  <Divider color="primary" />
37
+ <Divider color="black" />
37
38
  <Divider color="error" />
38
39
  ```
39
40