@slotted/react 0.1.0-beta.5 → 0.1.0-beta.7

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 (91) hide show
  1. package/dist/{action-bar-ti3e6FK1.js → action-bar-C5zaYrEW.js} +2 -2
  2. package/dist/action-bar.js +1 -1
  3. package/dist/{action-sheet-C60BWUW8.js → action-sheet-CaUaP0K2.js} +1 -1
  4. package/dist/action-sheet.js +1 -1
  5. package/dist/{app-shell-nnSP44OO.js → app-shell-DNdZ5ys0.js} +1 -1
  6. package/dist/app-shell.js +1 -1
  7. package/dist/{color-picker-BcRCeISx.js → color-picker-amz8XfXm.js} +1 -1
  8. package/dist/color-picker.js +1 -1
  9. package/dist/{column-manager-BtkYLs5G.js → column-manager-CFtJxQWS.js} +2 -2
  10. package/dist/column-manager.js +1 -1
  11. package/dist/{command-palette-DFLbSOiv.js → command-palette-D1C1GDWC.js} +1 -1
  12. package/dist/command-palette.js +1 -1
  13. package/dist/{context-menu-B00UIBVC.js → context-menu-g3DMZKR3.js} +1 -1
  14. package/dist/context-menu.js +1 -1
  15. package/dist/{dashboard-grid-CoLKLvYL.js → dashboard-grid-DsovCuVC.js} +1 -1
  16. package/dist/dashboard-grid.js +1 -1
  17. package/dist/{data-grid-DX95Y7mY.js → data-grid-CjFQ2U6v.js} +1 -1
  18. package/dist/data-grid.js +1 -1
  19. package/dist/{data-list-CWYTPNm-.js → data-list-UtLdop-1.js} +1 -1
  20. package/dist/data-list.js +1 -1
  21. package/dist/{detail-panel-z6WGleP4.js → detail-panel-ChaIgrw3.js} +2 -2
  22. package/dist/detail-panel.js +1 -1
  23. package/dist/{dialog-BHYDDj1S.js → dialog-yT-x3B9s.js} +1 -1
  24. package/dist/dialog.js +1 -1
  25. package/dist/docs/menu.json +12 -0
  26. package/dist/docs/menu.md +2 -0
  27. package/dist/docs/segmented-control.json +7 -11
  28. package/dist/docs/segmented-control.md +1 -1
  29. package/dist/docs/side-navigation.json +1 -0
  30. package/dist/docs/side-navigation.md +1 -1
  31. package/dist/docs/table.examples.md +13 -17
  32. package/dist/docs/table.json +3 -3
  33. package/dist/docs/tabs.json +4 -1
  34. package/dist/docs/tabs.md +1 -1
  35. package/dist/{drawer-LXM44eso.js → drawer-B_EgvFeX.js} +1 -1
  36. package/dist/drawer.js +1 -1
  37. package/dist/{event-calendar-CiphPXdV.js → event-calendar-VUGigZIP.js} +3 -3
  38. package/dist/event-calendar.js +1 -1
  39. package/dist/{filter-bar-C_dXljI_.js → filter-bar-BzSOD3ad.js} +2 -2
  40. package/dist/filter-bar.js +1 -1
  41. package/dist/{import-export-center-BQnMJz4g.js → import-export-center-BuEBO1CB.js} +2 -2
  42. package/dist/import-export-center.js +1 -1
  43. package/dist/index.js +30 -30
  44. package/dist/{loading-overlay-COfnckse.js → loading-overlay-RRsNK1FN.js} +1 -1
  45. package/dist/loading-overlay.js +1 -1
  46. package/dist/{menu-parts-D6v_mz6O.js → menu-parts-BpQu2s4z.js} +210 -206
  47. package/dist/menu.js +1 -1
  48. package/dist/{menubar-DApIg1eR.js → menubar-rpNcgIrw.js} +1 -1
  49. package/dist/menubar.js +1 -1
  50. package/dist/{navigation-menu-parts-D8qFAwHX.js → navigation-menu-parts-Cn-OAadu.js} +1 -1
  51. package/dist/navigation-menu.js +1 -1
  52. package/dist/{page-IiYXk1sz.js → page-QP8Zyz8-.js} +1 -1
  53. package/dist/{page-header-Bn4nIGfF.js → page-header-BP_Wt3eS.js} +1 -1
  54. package/dist/page-header.js +1 -1
  55. package/dist/page.js +1 -1
  56. package/dist/{saved-views-B3brBTD9.js → saved-views-DB2IIdhH.js} +1 -1
  57. package/dist/saved-views.js +1 -1
  58. package/dist/{side-navigation-Bm-BZma1.js → side-navigation-BnUKTrtd.js} +1 -1
  59. package/dist/side-navigation.js +1 -1
  60. package/dist/{split-button-DKRm0j5c.js → split-button-p97Bd5wM.js} +1 -1
  61. package/dist/split-button.js +1 -1
  62. package/dist/styles.css +1 -1
  63. package/dist/{table-BYEvFr4P.js → table-C1kLS0-9.js} +2 -2
  64. package/dist/table.js +1 -1
  65. package/dist/{toast-Bf3e0AgC.js → toast-BTN_F9No.js} +1 -1
  66. package/dist/toast.js +1 -1
  67. package/dist/{toolbar-B9knmgHA.js → toolbar-U-CFEb1c.js} +1 -1
  68. package/dist/toolbar.js +1 -1
  69. package/dist/{top-navigation-DiG2PF5W.js → top-navigation-BjIRQfkK.js} +2 -2
  70. package/dist/top-navigation.js +1 -1
  71. package/dist/types/action-bar/action-bar.d.ts.map +1 -1
  72. package/dist/types/app-shell/app-shell.d.ts.map +1 -1
  73. package/dist/types/dialog/dialog.d.ts.map +1 -1
  74. package/dist/types/drawer/drawer.d.ts.map +1 -1
  75. package/dist/types/loading-overlay/loading-overlay.d.ts.map +1 -1
  76. package/dist/types/menu/index.d.ts +1 -1
  77. package/dist/types/menu/index.d.ts.map +1 -1
  78. package/dist/types/menu/menu-defaults.d.ts.map +1 -1
  79. package/dist/types/menu/menu-parts.d.ts.map +1 -1
  80. package/dist/types/menu/menu.d.ts +1 -1
  81. package/dist/types/menu/menu.d.ts.map +1 -1
  82. package/dist/types/menu/menu.types.d.ts +10 -0
  83. package/dist/types/menu/menu.types.d.ts.map +1 -1
  84. package/dist/types/navigation-menu/navigation-menu-parts.d.ts.map +1 -1
  85. package/dist/types/page/page.d.ts.map +1 -1
  86. package/dist/types/table/table-parts.d.ts +4 -0
  87. package/dist/types/table/table-parts.d.ts.map +1 -1
  88. package/dist/types/toast/toast-parts.d.ts.map +1 -1
  89. package/dist/{upload-CLX5cURk.js → upload-CXDjxuS8.js} +1 -1
  90. package/dist/upload.js +1 -1
  91. package/package.json +6 -6
@@ -1,6 +1,6 @@
1
1
  import { t as e } from "./button-defaults-DNq_DDJh.js";
2
2
  import { n as t, t as n } from "./icon-T9Yt4tnm.js";
3
- import { _ as r, g as i, n as a, t as o } from "./menu-parts-D6v_mz6O.js";
3
+ import { _ as r, g as i, n as a, t as o } from "./menu-parts-BpQu2s4z.js";
4
4
  import { Fragment as s, createContext as c, useCallback as l, useContext as u, useEffect as d, useId as f, useMemo as p, useRef as m, useState as h } from "react";
5
5
  import { jsx as g, jsxs as _ } from "react/jsx-runtime";
6
6
  import { createCollapse as v } from "@slotted/core/overflow";
@@ -87,7 +87,7 @@ function I({ align: t, children: n, className: r, onOverflowChange: i, present:
87
87
  Y.current?.sync(q);
88
88
  }, [q]), d(() => {
89
89
  let e = Y.current;
90
- return () => e?.destroy();
90
+ return () => e?.stop();
91
91
  }, []);
92
92
  let X = l((e) => R(e), []), Z = l((e) => B(e), []), ie = p(() => ({
93
93
  counterpart: (e) => k.current.get(e) ?? null,
@@ -1,2 +1,2 @@
1
- import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./action-bar-ti3e6FK1.js";
1
+ import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./action-bar-C5zaYrEW.js";
2
2
  export { a as ActionBar, c as ActionBarAction, i as ActionBarActions, s as ActionBarDefaultsProvider, e as ActionBarOverflow, o as ActionBarSeparator, n as ActionBarStatus, t as useActionBarDefaults, r as useActionBarOverflow };
@@ -1,6 +1,6 @@
1
1
  import { r as e } from "./i18n-DpW8lqJ1.js";
2
2
  /* empty css */
3
- import { c as t, d as n, l as r, o as i, r as a, u as o } from "./drawer-LXM44eso.js";
3
+ import { c as t, d as n, l as r, o as i, r as a, u as o } from "./drawer-B_EgvFeX.js";
4
4
  import { createRovingTabindex as s } from "@slotted/core/focus";
5
5
  import { createControllable as c } from "@slotted/core/state";
6
6
  import { createContext as l, useCallback as u, useContext as d, useEffect as f, useId as p, useImperativeHandle as m, useMemo as h, useRef as g, useState as _ } from "react";
@@ -1,2 +1,2 @@
1
- import { a as e, c as t, d as n, f as r, h as i, i as a, l as o, m as s, n as c, o as l, p as u, r as d, s as f, t as p, u as m } from "./action-sheet-C60BWUW8.js";
1
+ import { a as e, c as t, d as n, f as r, h as i, i as a, l as o, m as s, n as c, o as l, p as u, r as d, s as f, t as p, u as m } from "./action-sheet-CaUaP0K2.js";
2
2
  export { r as ActionSheet, p as ActionSheetCancel, c as ActionSheetContent, s as ActionSheetDefaultsProvider, d as ActionSheetGroup, a as ActionSheetGroupLabel, e as ActionSheetHeader, l as ActionSheetItem, f as ActionSheetList, t as ActionSheetMessage, o as ActionSheetSeparator, m as ActionSheetTitle, n as ActionSheetTrigger, u as useActionSheet, i as useActionSheetDefaults };
@@ -616,7 +616,7 @@ function Fe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
616
616
  Z.current?.sync(lt);
617
617
  }, [lt]), p(() => {
618
618
  let e = Z.current;
619
- return () => e?.destroy();
619
+ return () => e?.stop();
620
620
  }, []);
621
621
  let ft = d((e) => {
622
622
  Z.current?.setNode(e);
package/dist/app-shell.js CHANGED
@@ -1,2 +1,2 @@
1
- import { C as e, S as t, T as n, _ as r, a as i, b as a, c as o, d as s, f as c, g as l, h as u, i as d, l as f, m as p, n as m, o as h, p as g, r as _, s as v, t as y, u as b, v as x, w as S, x as C, y as w } from "./app-shell-nnSP44OO.js";
1
+ import { C as e, S as t, T as n, _ as r, a as i, b as a, c as o, d as s, f as c, g as l, h as u, i as d, l as f, m as p, n as m, o as h, p as g, r as _, s as v, t as y, u as b, v as x, w as S, x as C, y as w } from "./app-shell-DNdZ5ys0.js";
2
2
  export { y as APP_SHELL_OVERLAY_AT, m as AppShell, i as AppShellActions, h as AppShellAside, v as AppShellAsideBody, o as AppShellAsideFooter, f as AppShellAsideHeader, b as AppShellAsideResizer, s as AppShellAsideToggle, c as AppShellBanner, g as AppShellBrand, p as AppShellCentre, S as AppShellDefaultsProvider, u as AppShellFooter, l as AppShellMain, r as AppShellNav, x as AppShellNavBody, w as AppShellNavFooter, a as AppShellNavHeader, C as AppShellNavRail, t as AppShellNavToggle, e as AppShellProgress, _ as useAppShell, n as useAppShellDefaults, d as useAppShellIfPresent };
@@ -1,5 +1,5 @@
1
1
  import { n as e, t } from "./icon-T9Yt4tnm.js";
2
- import { _ as n, h as r, m as i, n as a, t as o } from "./menu-parts-D6v_mz6O.js";
2
+ import { _ as n, h as r, m as i, n as a, t as o } from "./menu-parts-BpQu2s4z.js";
3
3
  import { r as s } from "./i18n-DpW8lqJ1.js";
4
4
  import { b as c } from "./field-BxQFpOXS.js";
5
5
  import { t as l } from "./text-field-CbQ6UCAP.js";
@@ -1,2 +1,2 @@
1
- import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "./color-picker-BcRCeISx.js";
1
+ import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "./color-picker-amz8XfXm.js";
2
2
  export { f as ColorField, s as ColorPicker, u as ColorPickerArea, i as ColorPickerChannel, e as ColorPickerContrast, l as ColorPickerDefaultsProvider, c as ColorPickerEyedropper, d as ColorPickerFormat, t as ColorPickerGamut, a as ColorPickerInput, p as ColorPickerPresets, n as ColorPickerRow, r as ColorPickerSwatch, o as useColorPickerDefaults };
@@ -1,7 +1,7 @@
1
1
  import { n as e, t } from "./icon-T9Yt4tnm.js";
2
- import { _ as n, c as r, n as i, t as a } from "./menu-parts-D6v_mz6O.js";
2
+ import { _ as n, c as r, n as i, t as a } from "./menu-parts-BpQu2s4z.js";
3
3
  import { r as o } from "./i18n-DpW8lqJ1.js";
4
- import { d as s, o as c, u as l } from "./drawer-LXM44eso.js";
4
+ import { d as s, o as c, u as l } from "./drawer-B_EgvFeX.js";
5
5
  import { n as u } from "./icon-button-CCWkCDMs.js";
6
6
  import { t as d } from "./checkbox-B4Sb1eXj.js";
7
7
  import { t as f } from "./text-field-CbQ6UCAP.js";
@@ -1,2 +1,2 @@
1
- import { a as e, i as t, n, r, t as i } from "./column-manager-BtkYLs5G.js";
1
+ import { a as e, i as t, n, r, t as i } from "./column-manager-CFtJxQWS.js";
2
2
  export { i as ColumnManager, t as ColumnManagerProvider, n as ColumnManagerRoot, r as ColumnManagerTrigger, e as useColumnManagerDefaults };
@@ -4,7 +4,7 @@ import { a as i } from "./kbd-defaults-CDgRhiep.js";
4
4
  /* empty css */
5
5
  /* empty css */
6
6
  import { t as a } from "./highlight-0Qw23QPp.js";
7
- import { d as o, o as s, p as c } from "./dialog-BHYDDj1S.js";
7
+ import { d as o, o as s, p as c } from "./dialog-yT-x3B9s.js";
8
8
  import { t as l } from "./kbd-eFSWTKxN.js";
9
9
  import { createControllable as u } from "@slotted/core/state";
10
10
  import { createContext as d, useCallback as f, useContext as p, useEffect as m, useId as ee, useImperativeHandle as te, useMemo as h, useRef as g, useState as _ } from "react";
@@ -1,2 +1,2 @@
1
- import { a as e, i as t, n, r, t as i } from "./command-palette-DFLbSOiv.js";
1
+ import { a as e, i as t, n, r, t as i } from "./command-palette-D1C1GDWC.js";
2
2
  export { r as COMMAND_PALETTE_FALLBACK, i as CommandPalette, t as CommandPaletteDefaultsProvider, n as CommandPaletteTrigger, e as useCommandPaletteDefaults };
@@ -1,4 +1,4 @@
1
- import { _ as e, b as t } from "./menu-parts-D6v_mz6O.js";
1
+ import { _ as e, b as t } from "./menu-parts-BpQu2s4z.js";
2
2
  import { createContext as n, useCallback as r, useContext as i, useEffect as a, useImperativeHandle as o, useRef as s, useState as c } from "react";
3
3
  import { jsx as l } from "react/jsx-runtime";
4
4
  //#region src/context-menu/context-menu-defaults.tsx
@@ -1,2 +1,2 @@
1
- import { a as e, i as t, n, o as r, r as i, t as a } from "./context-menu-B00UIBVC.js";
1
+ import { a as e, i as t, n, o as r, r as i, t as a } from "./context-menu-g3DMZKR3.js";
2
2
  export { t as CONTEXT_MENU_FALLBACK, a as ContextMenu, e as ContextMenuDefaultsProvider, n as ContextMenuTrigger, i as useContextMenu, r as useContextMenuDefaults };
@@ -1,5 +1,5 @@
1
1
  import { n as e, t } from "./icon-T9Yt4tnm.js";
2
- import { _ as n, c as r, d as i, g as a, n as o, p as s, t as c } from "./menu-parts-D6v_mz6O.js";
2
+ import { _ as n, c as r, d as i, g as a, n as o, p as s, t as c } from "./menu-parts-BpQu2s4z.js";
3
3
  import { r as l } from "./i18n-DpW8lqJ1.js";
4
4
  /* empty css */
5
5
  import { n as u, t as d } from "./icon-button-CCWkCDMs.js";
@@ -1,2 +1,2 @@
1
- import { a as e, i as t, n, o as r, r as i, t as a } from "./dashboard-grid-CoLKLvYL.js";
1
+ import { a as e, i as t, n, o as r, r as i, t as a } from "./dashboard-grid-DsovCuVC.js";
2
2
  export { t as DASHBOARD_GRID_FALLBACK, i as DashboardGrid, e as DashboardGridDefaultsProvider, n as DashboardWidget, r as useDashboardGridDefaults, a as usePersistedDashboardLayout };
@@ -1,5 +1,5 @@
1
1
  import { n as e, t } from "./icon-T9Yt4tnm.js";
2
- import { _ as n, c as r, g as i, n as a, t as o } from "./menu-parts-D6v_mz6O.js";
2
+ import { _ as n, c as r, g as i, n as a, t as o } from "./menu-parts-BpQu2s4z.js";
3
3
  import { n as s, r as c } from "./i18n-DpW8lqJ1.js";
4
4
  import { n as l } from "./icon-button-CCWkCDMs.js";
5
5
  import { a as u, i as d, n as f, r as p } from "./tooltip-CgjIROUy.js";
package/dist/data-grid.js CHANGED
@@ -1,2 +1,2 @@
1
- import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./data-grid-DX95Y7mY.js";
1
+ import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./data-grid-CjFQ2U6v.js";
2
2
  export { e as DRAG_COLUMN, n as DataGrid, i as DataGridDefaultsProvider, r as EXPANDER_COLUMN, a as SELECTION_COLUMN, t as useDataGridDefaults, o as usePersistedGridView };
@@ -1,5 +1,5 @@
1
1
  import { n as e, t } from "./icon-T9Yt4tnm.js";
2
- import { _ as n, g as r, h as i, m as a, n as o, o as s, t as c } from "./menu-parts-D6v_mz6O.js";
2
+ import { _ as n, g as r, h as i, m as a, n as o, o as s, t as c } from "./menu-parts-BpQu2s4z.js";
3
3
  import { n as ee, r as te } from "./i18n-DpW8lqJ1.js";
4
4
  import { n as l } from "./icon-button-CCWkCDMs.js";
5
5
  import { t as ne } from "./checkbox-B4Sb1eXj.js";
package/dist/data-list.js CHANGED
@@ -1,2 +1,2 @@
1
- import { n as e, r as t, t as n } from "./data-list-CWYTPNm-.js";
1
+ import { n as e, r as t, t as n } from "./data-list-UtLdop-1.js";
2
2
  export { n as DataList, e as DataListDefaultsProvider, t as useDataListDefaults };
@@ -2,8 +2,8 @@ import { r as e } from "./i18n-DpW8lqJ1.js";
2
2
  import { n as t } from "./badge-C6rbwVpu.js";
3
3
  import { t as n } from "./skeleton-2LSpg84Z.js";
4
4
  import { n as r } from "./container-CjxY6rYv.js";
5
- import { a as i } from "./page-IiYXk1sz.js";
6
- import { w as a } from "./page-header-Bn4nIGfF.js";
5
+ import { a as i } from "./page-QP8Zyz8-.js";
6
+ import { w as a } from "./page-header-BP_Wt3eS.js";
7
7
  import { a as o, l as s, n as c, o as l, s as u, t as d } from "./section-Be7dX9MC.js";
8
8
  import { a as f, n as p, o as m, r as h, t as g } from "./tabs-HWmvOKM4.js";
9
9
  import { createControllable as _ } from "@slotted/core/state";
@@ -1,2 +1,2 @@
1
- import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./detail-panel-z6WGleP4.js";
1
+ import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./detail-panel-ChaIgrw3.js";
2
2
  export { t as DetailPanel, o as DetailPanelBody, r as DetailPanelDefaultsProvider, n as DetailPanelSection, i as DetailPanelTabs, e as useDetailPanel, a as useDetailPanelDefaults };
@@ -60,7 +60,7 @@ function E({ back: e, children: t, container: r, defaultFullscreen: a, defaultOp
60
60
  X.current?.sync(z);
61
61
  }, [z]), c(() => {
62
62
  let e = X.current;
63
- return () => e?.destroy();
63
+ return () => e?.stop();
64
64
  }, []);
65
65
  let me = p(z);
66
66
  z && (me.current = !0);
package/dist/dialog.js CHANGED
@@ -1,2 +1,2 @@
1
- import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./dialog-BHYDDj1S.js";
1
+ import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./dialog-yT-x3B9s.js";
2
2
  export { r as AlertDialog, m as AlertDialogAction, l as AlertDialogCancel, f as AlertDialogIcon, d as Dialog, o as DialogBody, e as DialogClose, u as DialogContent, a as DialogDefaultsProvider, p as DialogDescription, t as DialogFooter, s as DialogHeader, h as DialogTitle, n as DialogTrigger, c as useDialog, i as useDialogDefaults };
@@ -12,6 +12,10 @@
12
12
  "md",
13
13
  "lg"
14
14
  ],
15
+ "width": [
16
+ "content",
17
+ "anchor"
18
+ ],
15
19
  "side": [
16
20
  "bottom",
17
21
  "top",
@@ -84,6 +88,7 @@
84
88
  "nativeElement": "div",
85
89
  "defaults": {
86
90
  "size": "md",
91
+ "width": "content",
87
92
  "side": "bottom",
88
93
  "align": "start",
89
94
  "mount": "active",
@@ -309,6 +314,13 @@
309
314
  "appliesTo": "Menu",
310
315
  "description": "The width of the surface and the height of its items."
311
316
  },
317
+ {
318
+ "name": "width",
319
+ "type": "'content' | 'anchor'",
320
+ "defaultValue": "content",
321
+ "appliesTo": "Menu",
322
+ "description": "content: the surface takes its own measure; anchor: it is exactly as wide as its trigger, capped by the available width. A submenu is always content."
323
+ },
312
324
  {
313
325
  "name": "side",
314
326
  "type": "'top' | 'bottom' | 'inline-start' | 'inline-end' | 'left' | 'right'",
package/dist/docs/menu.md CHANGED
@@ -74,6 +74,7 @@ export default function MenuBasic() {
74
74
  | `defaultValue` | `string` | — | MenuRadioGroup | The value an uncontrolled group starts with. |
75
75
  | `onValueChange` | `(value, request) => void` | — | MenuRadioGroup | Called before the chosen value changes, with pointer or keyboard as the reason. |
76
76
  | `size` | `'sm' \| 'md' \| 'lg'` | md | Menu | The width of the surface and the height of its items. |
77
+ | `width` | `'content' \| 'anchor'` | content | Menu | content: the surface takes its own measure; anchor: it is exactly as wide as its trigger, capped by the available width. A submenu is always content. |
77
78
  | `side` | `'top' \| 'bottom' \| 'inline-start' \| 'inline-end' \| 'left' \| 'right'` | bottom | Menu | The edge of the trigger the surface opens from. inline-start and inline-end follow the reading direction. |
78
79
  | `align` | `'start' \| 'center' \| 'end'` | start | Menu | Where the surface sits along that edge. |
79
80
  | `anchor` | `PositionerAnchor \| null` | — | Menu | What the surface is positioned against instead of the trigger, such as a table row or a point. Focus still returns to the trigger. |
@@ -130,6 +131,7 @@ export default function MenuBasic() {
130
131
  | Axis | Values | Default |
131
132
  | --- | --- | --- |
132
133
  | `size` | `sm`, `md`, `lg` | `md` |
134
+ | `width` | `content`, `anchor` | `content` |
133
135
  | `side` | `bottom`, `top`, `inline-start`, `inline-end`, `left`, `right` | `bottom` |
134
136
  | `align` | `start`, `center`, `end` | `start` |
135
137
  | `mount` | `active`, `lazy`, `eager` | `active` |
@@ -280,15 +280,12 @@
280
280
  }
281
281
  },
282
282
  "tokens": [
283
- "--slotted-border-subtle",
284
283
  "--slotted-border-width-thick",
285
- "--slotted-control-border-color",
286
284
  "--slotted-control-border-width",
287
285
  "--slotted-control-font-family",
288
286
  "--slotted-control-font-size-lg",
289
287
  "--slotted-control-font-size-md",
290
288
  "--slotted-control-font-size-sm",
291
- "--slotted-control-font-weight",
292
289
  "--slotted-control-gap-lg",
293
290
  "--slotted-control-gap-md",
294
291
  "--slotted-control-gap-sm",
@@ -305,8 +302,6 @@
305
302
  "--slotted-control-padding-inline-md",
306
303
  "--slotted-control-padding-inline-sm",
307
304
  "--slotted-control-radius",
308
- "--slotted-control-shadow",
309
- "--slotted-control-surface",
310
305
  "--slotted-control-transition-duration",
311
306
  "--slotted-control-transition-easing",
312
307
  "--slotted-disabled-background",
@@ -320,6 +315,7 @@
320
315
  "--slotted-focus-ring-offset",
321
316
  "--slotted-focus-ring-width",
322
317
  "--slotted-font-weight-medium",
318
+ "--slotted-radius-full",
323
319
  "--slotted-radius-xs",
324
320
  "--slotted-segmented-control-active-background",
325
321
  "--slotted-segmented-control-background",
@@ -330,9 +326,12 @@
330
326
  "--slotted-segmented-control-disabled-color",
331
327
  "--slotted-segmented-control-disabled-indicator-background",
332
328
  "--slotted-segmented-control-divider-color",
329
+ "--slotted-segmented-control-font-weight",
330
+ "--slotted-segmented-control-gap",
333
331
  "--slotted-segmented-control-hover-background",
334
332
  "--slotted-segmented-control-indicator-background",
335
333
  "--slotted-segmented-control-indicator-border-color",
334
+ "--slotted-segmented-control-indicator-shadow",
336
335
  "--slotted-segmented-control-inset",
337
336
  "--slotted-segmented-control-invalid-border-color",
338
337
  "--slotted-segmented-control-invalid-edge-width",
@@ -342,17 +341,14 @@
342
341
  "--slotted-segmented-control-underline-checked-color",
343
342
  "--slotted-segmented-control-underline-color",
344
343
  "--slotted-segmented-control-underline-gap",
344
+ "--slotted-shadow-xs",
345
345
  "--slotted-space-1",
346
346
  "--slotted-space-6",
347
+ "--slotted-surface-raised",
347
348
  "--slotted-target-min",
348
349
  "--slotted-text",
349
350
  "--slotted-text-muted",
350
- "--slotted-tone-accent-border",
351
- "--slotted-tone-accent-subtle-active",
352
- "--slotted-tone-accent-text",
353
- "--slotted-tone-danger-border",
354
- "--slotted-tone-secondary-subtle-active",
355
- "--slotted-tone-secondary-subtle-hover"
351
+ "--slotted-tone-danger-border"
356
352
  ],
357
353
  "examples": [
358
354
  {
@@ -85,7 +85,7 @@ Excerpt — not a complete module
85
85
 
86
86
  ## Tokens
87
87
 
88
- `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-radius-xs`, `--slotted-segmented-control-active-background`, `--slotted-segmented-control-background`, `--slotted-segmented-control-border-color`, `--slotted-segmented-control-checked-color`, `--slotted-segmented-control-color`, `--slotted-segmented-control-disabled-border-color`, `--slotted-segmented-control-disabled-color`, `--slotted-segmented-control-disabled-indicator-background`, `--slotted-segmented-control-divider-color`, `--slotted-segmented-control-hover-background`, `--slotted-segmented-control-indicator-background`, `--slotted-segmented-control-indicator-border-color`, `--slotted-segmented-control-inset`, `--slotted-segmented-control-invalid-border-color`, `--slotted-segmented-control-invalid-edge-width`, `--slotted-segmented-control-invalid-focus-ring-color`, `--slotted-segmented-control-radius`, `--slotted-segmented-control-shadow`, `--slotted-segmented-control-underline-checked-color`, `--slotted-segmented-control-underline-color`, `--slotted-segmented-control-underline-gap`, `--slotted-space-1`, `--slotted-space-6`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
88
+ `--slotted-border-width-thick`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-radius-full`, `--slotted-radius-xs`, `--slotted-segmented-control-active-background`, `--slotted-segmented-control-background`, `--slotted-segmented-control-border-color`, `--slotted-segmented-control-checked-color`, `--slotted-segmented-control-color`, `--slotted-segmented-control-disabled-border-color`, `--slotted-segmented-control-disabled-color`, `--slotted-segmented-control-disabled-indicator-background`, `--slotted-segmented-control-divider-color`, `--slotted-segmented-control-font-weight`, `--slotted-segmented-control-gap`, `--slotted-segmented-control-hover-background`, `--slotted-segmented-control-indicator-background`, `--slotted-segmented-control-indicator-border-color`, `--slotted-segmented-control-indicator-shadow`, `--slotted-segmented-control-inset`, `--slotted-segmented-control-invalid-border-color`, `--slotted-segmented-control-invalid-edge-width`, `--slotted-segmented-control-invalid-focus-ring-color`, `--slotted-segmented-control-radius`, `--slotted-segmented-control-shadow`, `--slotted-segmented-control-underline-checked-color`, `--slotted-segmented-control-underline-color`, `--slotted-segmented-control-underline-gap`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-6`, `--slotted-surface-raised`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-danger-border`
89
89
 
90
90
  ## Examples
91
91
 
@@ -429,6 +429,7 @@
429
429
  "--slotted-app-shell-row-inset",
430
430
  "--slotted-app-shell-row-line-height",
431
431
  "--slotted-app-shell-row-mark",
432
+ "--slotted-app-shell-row-ring-inset",
432
433
  "--slotted-border-subtle",
433
434
  "--slotted-border-width-thin",
434
435
  "--slotted-control-font-family",
@@ -130,7 +130,7 @@ export default function SideNavigationBasic() {
130
130
 
131
131
  ## Tokens
132
132
 
133
- `--slotted-app-shell-row-font-size`, `--slotted-app-shell-row-gap`, `--slotted-app-shell-row-height`, `--slotted-app-shell-row-inset`, `--slotted-app-shell-row-line-height`, `--slotted-app-shell-row-mark`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-current-edge`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-md`, `--slotted-shadow-md`, `--slotted-side-navigation-active-background`, `--slotted-side-navigation-color`, `--slotted-side-navigation-current-background`, `--slotted-side-navigation-current-color`, `--slotted-side-navigation-current-description-color`, `--slotted-side-navigation-current-edge`, `--slotted-side-navigation-description-color`, `--slotted-side-navigation-description-gap`, `--slotted-side-navigation-dot-color`, `--slotted-side-navigation-dot-size`, `--slotted-side-navigation-flyout-border-color`, `--slotted-side-navigation-flyout-measure`, `--slotted-side-navigation-flyout-min-measure`, `--slotted-side-navigation-flyout-radius`, `--slotted-side-navigation-flyout-shadow`, `--slotted-side-navigation-flyout-surface`, `--slotted-side-navigation-guide-color`, `--slotted-side-navigation-hover-background`, `--slotted-side-navigation-hover-color`, `--slotted-side-navigation-indent`, `--slotted-side-navigation-indent-step`, `--slotted-side-navigation-radius`, `--slotted-side-navigation-row-gap`, `--slotted-side-navigation-section-color`, `--slotted-side-navigation-section-gap`, `--slotted-side-navigation-section-label-gap`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
133
+ `--slotted-app-shell-row-font-size`, `--slotted-app-shell-row-gap`, `--slotted-app-shell-row-height`, `--slotted-app-shell-row-inset`, `--slotted-app-shell-row-line-height`, `--slotted-app-shell-row-mark`, `--slotted-app-shell-row-ring-inset`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-current-edge`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-md`, `--slotted-shadow-md`, `--slotted-side-navigation-active-background`, `--slotted-side-navigation-color`, `--slotted-side-navigation-current-background`, `--slotted-side-navigation-current-color`, `--slotted-side-navigation-current-description-color`, `--slotted-side-navigation-current-edge`, `--slotted-side-navigation-description-color`, `--slotted-side-navigation-description-gap`, `--slotted-side-navigation-dot-color`, `--slotted-side-navigation-dot-size`, `--slotted-side-navigation-flyout-border-color`, `--slotted-side-navigation-flyout-measure`, `--slotted-side-navigation-flyout-min-measure`, `--slotted-side-navigation-flyout-radius`, `--slotted-side-navigation-flyout-shadow`, `--slotted-side-navigation-flyout-surface`, `--slotted-side-navigation-guide-color`, `--slotted-side-navigation-hover-background`, `--slotted-side-navigation-hover-color`, `--slotted-side-navigation-indent`, `--slotted-side-navigation-indent-step`, `--slotted-side-navigation-radius`, `--slotted-side-navigation-row-gap`, `--slotted-side-navigation-section-color`, `--slotted-side-navigation-section-gap`, `--slotted-side-navigation-section-label-gap`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
134
134
 
135
135
  ## Examples
136
136
 
@@ -1021,11 +1021,9 @@ Excerpt — not a complete module
1021
1021
  <TableLoader skeletonRows={5} />
1022
1022
  ) : rows.length === 0 ? (
1023
1023
  <TableBody>
1024
- <TableRow>
1025
- <TableEmpty>
1026
- <ResultState status="no-results" title="No invoices match this filter" />
1027
- </TableEmpty>
1028
- </TableRow>
1024
+ <TableEmpty>
1025
+ <ResultState status="no-results" title="No invoices match this filter" />
1026
+ </TableEmpty>
1029
1027
  </TableBody>
1030
1028
  ) : (
1031
1029
  <TableBody>{rows}</TableBody>
@@ -1222,18 +1220,16 @@ export default function TableEmptyExample() {
1222
1220
  </TableRow>
1223
1221
  </TableHead>
1224
1222
  <TableBody>
1225
- <TableRow>
1226
- <TableEmpty>
1227
- <ResultState status="empty">
1228
- <ResultStateContent>
1229
- <ResultStateTitle>No returns this week</ResultStateTitle>
1230
- <ResultStateDescription>
1231
- Returns appear here as soon as a customer opens one from their order page.
1232
- </ResultStateDescription>
1233
- </ResultStateContent>
1234
- </ResultState>
1235
- </TableEmpty>
1236
- </TableRow>
1223
+ <TableEmpty>
1224
+ <ResultState status="empty">
1225
+ <ResultStateContent>
1226
+ <ResultStateTitle>No returns this week</ResultStateTitle>
1227
+ <ResultStateDescription>
1228
+ Returns appear here as soon as a customer opens one from their order page.
1229
+ </ResultStateDescription>
1230
+ </ResultStateContent>
1231
+ </ResultState>
1232
+ </TableEmpty>
1237
1233
  </TableBody>
1238
1234
  </TableContent>
1239
1235
  </Table>
@@ -364,7 +364,7 @@
364
364
  "part": "empty",
365
365
  "element": "td",
366
366
  "required": false,
367
- "purpose": "What is shown when there is nothing, spanning every column. It takes a ResultState, which already separates an empty set from a set a filter emptied."
367
+ "purpose": "What is shown when there is nothing, spanning every column, in a row the part writes itself. It takes a ResultState, which already separates an empty set from a set a filter emptied."
368
368
  },
369
369
  {
370
370
  "part": "loader",
@@ -1012,7 +1012,7 @@
1012
1012
  "title": "Nothing yet, nothing at all, and something arriving",
1013
1013
  "note": "A first load draws skeleton rows, so the shape is visible before the content. A refresh over rows already read writes aria-busy and dims them without moving anything — a reader looking at row forty stays there.",
1014
1014
  "language": "tsx",
1015
- "source": "{\n loading && rows.length === 0 ? (\n <TableLoader skeletonRows={5} />\n ) : rows.length === 0 ? (\n <TableBody>\n <TableRow>\n <TableEmpty>\n <ResultState status=\"no-results\" title=\"No invoices match this filter\" />\n </TableEmpty>\n </TableRow>\n </TableBody>\n ) : (\n <TableBody>{rows}</TableBody>\n );\n}\n",
1015
+ "source": "{\n loading && rows.length === 0 ? (\n <TableLoader skeletonRows={5} />\n ) : rows.length === 0 ? (\n <TableBody>\n <TableEmpty>\n <ResultState status=\"no-results\" title=\"No invoices match this filter\" />\n </TableEmpty>\n </TableBody>\n ) : (\n <TableBody>{rows}</TableBody>\n );\n}\n",
1016
1016
  "verdict": "excerpt"
1017
1017
  },
1018
1018
  {
@@ -1076,7 +1076,7 @@
1076
1076
  "title": "empty.tsx",
1077
1077
  "note": null,
1078
1078
  "language": "tsx",
1079
- "source": "import {\n ResultState,\n ResultStateContent,\n ResultStateDescription,\n ResultStateTitle,\n} from '@slotted/react/result-state';\nimport {\n Table,\n TableBody,\n TableColumnHeader,\n TableContent,\n TableEmpty,\n TableHead,\n TableRow,\n} from '@slotted/react/table';\n\nexport default function TableEmptyExample() {\n return (\n <Table columns={4}>\n <TableContent aria-label=\"Returns this week\">\n <TableHead>\n <TableRow>\n <TableColumnHeader>Return</TableColumnHeader>\n <TableColumnHeader>Order</TableColumnHeader>\n <TableColumnHeader>Customer</TableColumnHeader>\n <TableColumnHeader numeric>Refund</TableColumnHeader>\n </TableRow>\n </TableHead>\n <TableBody>\n <TableRow>\n <TableEmpty>\n <ResultState status=\"empty\">\n <ResultStateContent>\n <ResultStateTitle>No returns this week</ResultStateTitle>\n <ResultStateDescription>\n Returns appear here as soon as a customer opens one from their order page.\n </ResultStateDescription>\n </ResultStateContent>\n </ResultState>\n </TableEmpty>\n </TableRow>\n </TableBody>\n </TableContent>\n </Table>\n );\n}\n",
1079
+ "source": "import {\n ResultState,\n ResultStateContent,\n ResultStateDescription,\n ResultStateTitle,\n} from '@slotted/react/result-state';\nimport {\n Table,\n TableBody,\n TableColumnHeader,\n TableContent,\n TableEmpty,\n TableHead,\n TableRow,\n} from '@slotted/react/table';\n\nexport default function TableEmptyExample() {\n return (\n <Table columns={4}>\n <TableContent aria-label=\"Returns this week\">\n <TableHead>\n <TableRow>\n <TableColumnHeader>Return</TableColumnHeader>\n <TableColumnHeader>Order</TableColumnHeader>\n <TableColumnHeader>Customer</TableColumnHeader>\n <TableColumnHeader numeric>Refund</TableColumnHeader>\n </TableRow>\n </TableHead>\n <TableBody>\n <TableEmpty>\n <ResultState status=\"empty\">\n <ResultStateContent>\n <ResultStateTitle>No returns this week</ResultStateTitle>\n <ResultStateDescription>\n Returns appear here as soon as a customer opens one from their order page.\n </ResultStateDescription>\n </ResultStateContent>\n </ResultState>\n </TableEmpty>\n </TableBody>\n </TableContent>\n </Table>\n );\n}\n",
1080
1080
  "verdict": "example"
1081
1081
  },
1082
1082
  {
@@ -143,7 +143,7 @@
143
143
  "part": "marker",
144
144
  "element": "span, aria-hidden",
145
145
  "required": false,
146
- "purpose": "The bar under the selected tab. The list draws one and slides it between tabs; it spans the tab’s content box, never the close button. --slotted-tabs-marker-size, --slotted-tabs-marker-radius and --slotted-tabs-marker-inset shape it, and the hover bar takes the same geometry at --slotted-tabs-hover-marker-opacity."
146
+ "purpose": "The bar under the selected tab. The list draws one and slides it between tabs; it spans the tab’s content box, never the close button. --slotted-tabs-marker-size, --slotted-tabs-marker-radius, --slotted-tabs-marker-inset and --slotted-tabs-marker-offset (1px above the list’s edge) shape it, and the hover bar takes the same geometry at --slotted-tabs-hover-marker-opacity."
147
147
  },
148
148
  {
149
149
  "part": "panel",
@@ -413,6 +413,7 @@
413
413
  "--slotted-disabled-background",
414
414
  "--slotted-disabled-border",
415
415
  "--slotted-disabled-foreground",
416
+ "--slotted-duration-medium",
416
417
  "--slotted-duration-short",
417
418
  "--slotted-easing-enter",
418
419
  "--slotted-focus-ring-color",
@@ -447,7 +448,9 @@
447
448
  "--slotted-tabs-hover-marker-opacity",
448
449
  "--slotted-tabs-list-gap",
449
450
  "--slotted-tabs-marker-color",
451
+ "--slotted-tabs-marker-easing",
450
452
  "--slotted-tabs-marker-inset",
453
+ "--slotted-tabs-marker-offset",
451
454
  "--slotted-tabs-marker-radius",
452
455
  "--slotted-tabs-marker-size",
453
456
  "--slotted-tabs-scroll-color",
package/dist/docs/tabs.md CHANGED
@@ -180,7 +180,7 @@ export default function TabsBasic() {
180
180
 
181
181
  ## Tokens
182
182
 
183
- `--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-full`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-tabs-actions-gap`, `--slotted-tabs-active-background`, `--slotted-tabs-active-marker-color`, `--slotted-tabs-color`, `--slotted-tabs-contained-background`, `--slotted-tabs-contained-selected-background`, `--slotted-tabs-dismiss-active-background`, `--slotted-tabs-dismiss-active-color`, `--slotted-tabs-dismiss-color`, `--slotted-tabs-dismiss-hover-background`, `--slotted-tabs-dismiss-hover-color`, `--slotted-tabs-fade-size`, `--slotted-tabs-gap`, `--slotted-tabs-hover-background`, `--slotted-tabs-hover-color`, `--slotted-tabs-hover-marker-color`, `--slotted-tabs-hover-marker-opacity`, `--slotted-tabs-list-gap`, `--slotted-tabs-marker-color`, `--slotted-tabs-marker-inset`, `--slotted-tabs-marker-radius`, `--slotted-tabs-marker-size`, `--slotted-tabs-scroll-color`, `--slotted-tabs-selected-color`, `--slotted-tabs-track-color`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
183
+ `--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-full`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-tabs-actions-gap`, `--slotted-tabs-active-background`, `--slotted-tabs-active-marker-color`, `--slotted-tabs-color`, `--slotted-tabs-contained-background`, `--slotted-tabs-contained-selected-background`, `--slotted-tabs-dismiss-active-background`, `--slotted-tabs-dismiss-active-color`, `--slotted-tabs-dismiss-color`, `--slotted-tabs-dismiss-hover-background`, `--slotted-tabs-dismiss-hover-color`, `--slotted-tabs-fade-size`, `--slotted-tabs-gap`, `--slotted-tabs-hover-background`, `--slotted-tabs-hover-color`, `--slotted-tabs-hover-marker-color`, `--slotted-tabs-hover-marker-opacity`, `--slotted-tabs-list-gap`, `--slotted-tabs-marker-color`, `--slotted-tabs-marker-easing`, `--slotted-tabs-marker-inset`, `--slotted-tabs-marker-offset`, `--slotted-tabs-marker-radius`, `--slotted-tabs-marker-size`, `--slotted-tabs-scroll-color`, `--slotted-tabs-selected-color`, `--slotted-tabs-track-color`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
184
184
 
185
185
  ## Examples
186
186
 
@@ -74,7 +74,7 @@ function le({ children: e, back: t, container: r, defaultExtent: a, defaultOpen:
74
74
  z && de(null);
75
75
  }, [z]), c(() => {
76
76
  let e = Z.current;
77
- return () => e?.destroy();
77
+ return () => e?.stop();
78
78
  }, []);
79
79
  let ye = p(z);
80
80
  z && (ye.current = !0);
package/dist/drawer.js CHANGED
@@ -1,2 +1,2 @@
1
- import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, p as c, r as l, s as u, t as d, u as f } from "./drawer-LXM44eso.js";
1
+ import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, p as c, r as l, s as u, t as d, u as f } from "./drawer-B_EgvFeX.js";
2
2
  export { f as Drawer, d as DrawerBody, o as DrawerClose, r as DrawerDefaultsProvider, l as DrawerDescription, i as DrawerFooter, e as DrawerHeader, s as DrawerPanel, u as DrawerResizer, t as DrawerTitle, a as DrawerTrigger, n as useDrawer, c as useDrawerDefaults };
@@ -1,11 +1,11 @@
1
1
  import { n as e, t } from "./icon-T9Yt4tnm.js";
2
- import { _ as n, n as r, r as i, t as a } from "./menu-parts-D6v_mz6O.js";
2
+ import { _ as n, n as r, r as i, t as a } from "./menu-parts-BpQu2s4z.js";
3
3
  import { n as o, r as s } from "./i18n-DpW8lqJ1.js";
4
- import { a as c, c as l, n as u, o as d, r as f, s as p, t as m, u as h } from "./drawer-LXM44eso.js";
4
+ import { a as c, c as l, n as u, o as d, r as f, s as p, t as m, u as h } from "./drawer-B_EgvFeX.js";
5
5
  import { n as g } from "./progress-indicator-DwvUSFFs.js";
6
6
  /* empty css */
7
7
  import { a as _, c as v, f as ee, i as te, l as ne, o as re, p as ie, r as ae, u as oe } from "./popover-DEp8Bf3e.js";
8
- import { n as se, r as y, t as ce } from "./context-menu-B00UIBVC.js";
8
+ import { n as se, r as y, t as ce } from "./context-menu-g3DMZKR3.js";
9
9
  import { a as le, t as ue } from "./segmented-control-C-PzkTtg.js";
10
10
  import { createContext as de, createElement as fe, useCallback as b, useContext as pe, useEffect as me, useId as he, useImperativeHandle as ge, useLayoutEffect as _e, useMemo as x, useRef as S, useState as C } from "react";
11
11
  import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
@@ -1,2 +1,2 @@
1
- import { i as e, n as t, r as n, t as r } from "./event-calendar-CiphPXdV.js";
1
+ import { i as e, n as t, r as n, t as r } from "./event-calendar-VUGigZIP.js";
2
2
  export { t as EVENT_CALENDAR_FALLBACK, r as EventCalendar, n as EventCalendarDefaultsProvider, e as useEventCalendarDefaults };
@@ -1,7 +1,7 @@
1
1
  import { n as e, t } from "./icon-T9Yt4tnm.js";
2
- import { _ as n, a as r, c as i, d as a, h as o, m as s, n as c, t as l, u } from "./menu-parts-D6v_mz6O.js";
2
+ import { _ as n, a as r, c as i, d as a, h as o, m as s, n as c, t as l, u } from "./menu-parts-BpQu2s4z.js";
3
3
  import { r as d } from "./i18n-DpW8lqJ1.js";
4
- import { a as f, c as p, i as m, n as h, o as g, t as ee, u as te } from "./drawer-LXM44eso.js";
4
+ import { a as f, c as p, i as m, n as h, o as g, t as ee, u as te } from "./drawer-B_EgvFeX.js";
5
5
  import { n as _, t as v } from "./icon-button-CCWkCDMs.js";
6
6
  import { t as ne } from "./text-field-CbQ6UCAP.js";
7
7
  import { a as re, d as ie, f as ae, l as oe, p as se, r as ce } from "./popover-DEp8Bf3e.js";
@@ -1,2 +1,2 @@
1
- import { i as e, n as t, r as n, t as r } from "./filter-bar-C_dXljI_.js";
1
+ import { i as e, n as t, r as n, t as r } from "./filter-bar-BzSOD3ad.js";
2
2
  export { r as FILTER_BAR_FALLBACK, t as FilterBar, n as FilterBarDefaultsProvider, e as useFilterBarDefaults };
@@ -7,8 +7,8 @@ import { a as s, i as c, n as l, r as u } from "./tooltip-CgjIROUy.js";
7
7
  import { i as d, t as f } from "./skeleton-2LSpg84Z.js";
8
8
  import { i as p, n as m, o as h, r as g, t as _ } from "./result-state-CZsQfdN4.js";
9
9
  import { a as ee, r as te, t as v } from "./tabs-HWmvOKM4.js";
10
- import { A as y, O as ne, b, c as x, f as S, l as C, u as w, v as re } from "./table-BYEvFr4P.js";
11
- import { v as T } from "./toast-Bf3e0AgC.js";
10
+ import { A as y, O as ne, b, c as x, f as S, l as C, u as w, v as re } from "./table-C1kLS0-9.js";
11
+ import { v as T } from "./toast-BTN_F9No.js";
12
12
  import { createControllable as ie } from "@slotted/core/state";
13
13
  import { createContext as ae, useCallback as E, useContext as oe, useEffect as D, useId as se, useImperativeHandle as ce, useLayoutEffect as le, useMemo as ue, useRef as O, useState as k } from "react";
14
14
  import { Fragment as de, jsx as A, jsxs as j } from "react/jsx-runtime";
@@ -1,2 +1,2 @@
1
- import { i as e, n as t, r as n, t as r } from "./import-export-center-BQnMJz4g.js";
1
+ import { i as e, n as t, r as n, t as r } from "./import-export-center-BuEBO1CB.js";
2
2
  export { t as ImportExportCenter, n as ImportExportCenterDefaultsProvider, e as useImportExportCenterDefaults, r as useJobToasts };