@astryx-vue/core 0.2.6 → 0.3.0

package/dist/{PowerSearch-DHoiObLn.js → PowerSearch-DvjiPqMZ.js}

@@ -5,21 +5,22 @@ import { n as useDismiss } from "./usePositionedLayer-Cru9_00b.js";
 import { a as useAstryxLocale, o as useAstryxMessages } from "./context-iABt_ueM.js";
 import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
 import { t as _sfc_main$6 } from "./Tooltip-C4Vaqd3G.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { t as _sfc_main$7 } from "./Icon-bteSId7T.js";
 import { t as _sfc_main$8 } from "./Field-D5gUEGw4.js";
-import { t as _sfc_main$9 } from "./DateInput-u2XKccpK.js";
-import { t as _sfc_main$10 } from "./DateRangeInput-u7LhH6up.js";
-import { t as _sfc_main$11 } from "./DateTimeInput-DHp683jZ.js";
+import { t as _sfc_main$9 } from "./DateInput-DT518j5E.js";
+import { t as _sfc_main$10 } from "./DateRangeInput-Bqi5tlIA.js";
+import { t as _sfc_main$11 } from "./DateTimeInput-A7m2O3bg.js";
 import { t as _sfc_main$12 } from "./Token-DsntTYhQ.js";
 import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-DwztMNjP.js";
-import { t as _sfc_main$13 } from "./MultiSelector-BeV98x7X.js";
+import { t as _sfc_main$13 } from "./MultiSelector-BtAUfQ3t.js";
 import { t as _sfc_main$14 } from "./NumberInput-AZ9x3oja.js";
-import { t as _sfc_main$15 } from "./Selector-DuVozKNq.js";
+import { t as _sfc_main$15 } from "./Selector-DJ2BhUTV.js";
 import { r as useTypeaheadMenu } from "./TypeaheadMenu-DBW6rHeO.js";
 import { t as _sfc_main$16 } from "./TextInput-zFT1_qgI.js";
-import { t as _sfc_main$17 } from "./TimeInput-S8n946tp.js";
-import { t as _sfc_main$18 } from "./Tokenizer-41p035dX.js";
-import { t as _sfc_main$19 } from "./Typeahead-k3xhFxkr.js";
+import { t as _sfc_main$17 } from "./TimeInput-D2k3Ux3p.js";
+import { t as _sfc_main$18 } from "./Tokenizer-B5C_qY7t.js";
+import { t as _sfc_main$19 } from "./Typeahead-JP9RT87x.js";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 import "../styles/visually-hidden-utility.css";
 import "../styles/typeahead.css";
@@ -1555,6 +1556,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const queryMirror = ref("");
 		const anchorRef = useTemplateRef("anchorRef");
 		const listboxRef = useTemplateRef("listboxRef");
+		useScrollbars(listboxRef);
 		const inputRef = useTemplateRef("inputRef");
 		const editorRef = useTemplateRef("editorRef");
 		const tokenEls = /* @__PURE__ */ new Map();

package/dist/ProgressBar/index.d.ts

@@ -1,2 +1,2 @@
-import { a as ProgressBarVariant, i as ProgressBarSize, n as ProgressBarMark, r as ProgressBarProps, t as _default } from "../index-YKCx03zD.js";
+import { a as ProgressBarVariant, i as ProgressBarSize, n as ProgressBarMark, r as ProgressBarProps, t as _default } from "../index-COgrQZIL.js";
 export { _default as ProgressBar, type ProgressBarMark, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant };

package/dist/Radio/index.d.ts

@@ -1,2 +1,2 @@
-import { Ar as RadioChangeEvent, Br as RadioStatus, Fr as RadioOption, Hr as RadioValue, Ir as RadioOrientation, Lr as RadioProps, Mr as RadioGroupProps, Nr as RadioGroupSlots, Or as _default$1, Rr as RadioSize, Vr as RadioStatusType, jr as RadioGroupEmits, kr as _default, zr as RadioSlots } from "../index-CdtZjkmG.js";
+import { Ar as RadioChangeEvent, Br as RadioStatus, Fr as RadioOption, Hr as RadioValue, Ir as RadioOrientation, Lr as RadioProps, Mr as RadioGroupProps, Nr as RadioGroupSlots, Or as _default$1, Rr as RadioSize, Vr as RadioStatusType, jr as RadioGroupEmits, kr as _default, zr as RadioSlots } from "../index-DUaLJO7l.js";
 export { _default as Radio, type RadioChangeEvent, _default$1 as RadioGroup, type RadioGroupEmits, type RadioGroupProps, type RadioGroupSlots, type RadioOption, type RadioOrientation, type RadioProps, type RadioSize, type RadioSlots, type RadioStatus, type RadioStatusType, type RadioValue };

package/dist/RadioList/index.d.ts

@@ -1,2 +1,2 @@
-import { Dr as _default, Er as RadioListItemProps, Pr as RadioListProps, Tr as _default$1 } from "../index-CdtZjkmG.js";
+import { Dr as _default, Er as RadioListItemProps, Pr as RadioListProps, Tr as _default$1 } from "../index-DUaLJO7l.js";
 export { _default as RadioList, _default$1 as RadioListItem, type RadioListItemProps, type RadioListProps };

package/dist/Resizable/index.d.ts

@@ -1,2 +1,2 @@
-import { a as ResizePillPlacement, i as ResizeHandleSlots, n as ResizeDirection, o as ResizePosition, r as ResizeHandleProps, t as _default } from "../index-BPYzIIYn.js";
+import { a as ResizePillPlacement, i as ResizeHandleSlots, n as ResizeDirection, o as ResizePosition, r as ResizeHandleProps, t as _default } from "../index-Crp3NFLW.js";
 export { type ResizeDirection, _default as ResizeHandle, type ResizeHandleProps, type ResizeHandleSlots, type ResizePillPlacement, type ResizePosition };

package/dist/ScrollableArea/index.d.ts

@@ -1,2 +1,2 @@
-import { Cr as ScrollableAreaProps, Sr as _default, wr as ScrollableAreaSlots } from "../index-CdtZjkmG.js";
+import { Cr as ScrollableAreaProps, Sr as _default, wr as ScrollableAreaSlots } from "../index-DUaLJO7l.js";
 export { _default as ScrollableArea, type ScrollableAreaProps, type ScrollableAreaSlots };

package/dist/ScrollableArea/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../ScrollableArea-CJiaALHm.js";
+import { t as _sfc_main } from "../ScrollableArea-D4dCJv9I.js";
 export { _sfc_main as ScrollableArea };

package/dist/{ScrollableArea-CJiaALHm.js → ScrollableArea-D4dCJv9I.js}

@@ -1,6 +1,7 @@
 import { t as useScrollableArea } from "./useScrollableArea-DDk_CluT.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { i as spacingVariable, n as resolvePadding, t as formatSize } from "./size-Cpn_wzXi.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, openBlock, renderSlot, unref, useAttrs } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, openBlock, renderSlot, shallowRef, unref, useAttrs } from "vue";
 import "../styles/scrollable-area.css";
 //#region src/ScrollableArea/ScrollableArea.vue
 const _hoisted_1 = ["data-axis", "data-full-bleed"];
@@ -22,6 +23,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		scrollbars: {
+			type: Boolean,
+			default: true
+		},
 		padding: { default: 0 },
 		paddingInline: {},
 		paddingInlineStart: {},
@@ -34,6 +39,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const attrs = useAttrs();
 		const scroll = useScrollableArea(props);
+		const viewportEl = shallowRef(null);
+		function bindViewport(el) {
+			scroll.viewport(el);
+			viewportEl.value = el instanceof HTMLElement ? el : null;
+		}
+		useScrollbars(viewportEl, { enabled: () => props.scrollbars });
 		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
 		const rootClass = computed(() => ["astryx-scrollable-area", attrs.class]);
 		const rootStyle = computed(() => [
@@ -57,7 +68,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			};
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ ref: unref(scroll).viewport }, {
+			return openBlock(), createElementBlock("div", mergeProps({ ref: bindViewport }, {
 				...forwardedAttrs.value,
 				...unref(scroll).viewportAttrs.value
 			}, {

package/dist/Scrollbars/index.d.ts

@@ -0,0 +1,2 @@
+import { a as ScrollbarsContext, c as ScrollbarsProviderProps, d as UseScrollbarsResult, i as ScrollbarsAutoHide, l as ScrollbarsProviderSlots, n as _default, o as ScrollbarsHandle, r as scrollbarsKey, s as ScrollbarsOptions, t as useScrollbars, u as UseScrollbarsOptions } from "../index-fAZaRruV.js";
+export { type ScrollbarsAutoHide, type ScrollbarsContext, type ScrollbarsHandle, type ScrollbarsOptions, _default as ScrollbarsProvider, type ScrollbarsProviderProps, type ScrollbarsProviderSlots, type UseScrollbarsOptions, type UseScrollbarsResult, scrollbarsKey, useScrollbars };

package/dist/Scrollbars/index.js

@@ -0,0 +1,3 @@
+import { n as scrollbarsKey, t as useScrollbars } from "../useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main } from "../Scrollbars-D_93hJYK.js";
+export { _sfc_main as ScrollbarsProvider, scrollbarsKey, useScrollbars };

package/dist/Scrollbars-D_93hJYK.js

@@ -0,0 +1,75 @@
+import { n as scrollbarsKey } from "./useScrollbars-C2NJ6Qwq.js";
+import { computed, defineComponent, provide, renderSlot } from "vue";
+import { OverlayScrollbars } from "overlayscrollbars";
+import "../styles/scrollbars.css";
+//#region src/Scrollbars/options.ts
+function isPlainObject(value) {
+	if (value === null || typeof value !== "object") return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+}
+/**
+* 把 `override` 深合并到 `base` 上，返回新对象，两个入参都不会被改动。
+* 只有纯对象会递归合并，数组和其他值直接用 `override` 的。
+* `override` 里值为 `undefined` 的字段会被忽略。
+*/
+function mergeOptions(base, override) {
+	const result = { ...base };
+	if (!override) return result;
+	for (const [key, value] of Object.entries(override)) {
+		if (value === void 0) continue;
+		const current = result[key];
+		result[key] = isPlainObject(current) && isPlainObject(value) ? mergeOptions(current, value) : value;
+	}
+	return result;
+}
+//#endregion
+//#region src/Scrollbars/ScrollbarsProvider.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxScrollbarsProvider",
+	inheritAttrs: false,
+	__name: "ScrollbarsProvider",
+	props: {
+		enabled: {
+			type: Boolean,
+			default: true
+		},
+		autoHide: { default: "scroll" },
+		autoHideDelay: { default: 800 },
+		options: { default: void 0 }
+	},
+	setup(__props) {
+		const props = __props;
+		/** 什么都不做的句柄：元素已被别处接管时使用，避免一方销毁连带另一方。 */
+		const noopHandle = {
+			update: () => {},
+			destroy: () => {}
+		};
+		const options = computed(() => mergeOptions({ scrollbars: {
+			theme: "os-theme-astryx",
+			autoHide: props.autoHide,
+			autoHideDelay: props.autoHideDelay
+		} }, props.options));
+		function mount(element, initial) {
+			if (OverlayScrollbars(element)) return noopHandle;
+			const instance = OverlayScrollbars({
+				target: element,
+				elements: { viewport: element }
+			}, initial);
+			return {
+				update: (next) => instance.options(next, true),
+				destroy: () => instance.destroy()
+			};
+		}
+		provide(scrollbarsKey, {
+			enabled: computed(() => props.enabled),
+			options,
+			mount
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/SegmentedControl/index.d.ts

@@ -1,2 +1,2 @@
-import { a as SegmentedControlItemProps, c as SegmentedControlProps, i as SegmentedControlEmits, l as SegmentedControlSize, n as _default, o as SegmentedControlItemSlots, r as SegmentedControlContextValue, s as SegmentedControlLayout, t as _default$1, u as SegmentedControlSlots } from "../index-COxy6LEW.js";
+import { a as SegmentedControlItemProps, c as SegmentedControlProps, i as SegmentedControlEmits, l as SegmentedControlSize, n as _default, o as SegmentedControlItemSlots, r as SegmentedControlContextValue, s as SegmentedControlLayout, t as _default$1, u as SegmentedControlSlots } from "../index-gW0HW02U.js";
 export { _default as SegmentedControl, type SegmentedControlContextValue, type SegmentedControlEmits, _default$1 as SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlItemSlots, type SegmentedControlLayout, type SegmentedControlProps, type SegmentedControlSize, type SegmentedControlSlots };

package/dist/SelectableCard/index.d.ts

@@ -1,2 +1,2 @@
-import { br as SelectableCardProps, vr as _default, xr as SelectableCardSlots, yr as SelectableCardEmits } from "../index-CdtZjkmG.js";
+import { br as SelectableCardProps, vr as _default, xr as SelectableCardSlots, yr as SelectableCardEmits } from "../index-DUaLJO7l.js";
 export { _default as SelectableCard, _default as default, type SelectableCardEmits, type SelectableCardProps, type SelectableCardSlots };

package/dist/SelectableCard/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as SelectableCard_default } from "../SelectableCard-Bj5s_tIN.js";
+import { n as _sfc_main, t as SelectableCard_default } from "../SelectableCard-Cku4dRzc.js";
 export { _sfc_main as SelectableCard, SelectableCard_default as default };

package/dist/{SelectableCard-Bj5s_tIN.js → SelectableCard-Cku4dRzc.js}

@@ -1,6 +1,6 @@
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
 import { n as useClickableContainer } from "./useClickableContainer-DyNpnSEa.js";
-import { t as _sfc_main$2 } from "./Card-HAjZQg2s.js";
+import { t as _sfc_main$2 } from "./Card-B-I24X9S.js";
 import { computed, createBlock, createVNode, defineComponent, mergeModels, openBlock, renderSlot, useModel, useTemplateRef, withCtx } from "vue";
 import "../styles/clickable-card.css";
 //#region src/SelectableCard/SelectableCard.vue

package/dist/Selector/index.d.ts

@@ -1,2 +1,2 @@
-import { a as SelectorOption, c as SelectorProps, d as SelectorSlots, f as SelectorStatus, h as SelectorVariant, i as SelectorIndicatorPosition, l as SelectorSection, m as SelectorStatusVariant, n as SelectorEmits, o as SelectorOptionInput, p as SelectorStatusInput, r as SelectorEntry, s as SelectorPresentation, t as _default, u as SelectorSize } from "../index-N7OVZ38M.js";
+import { a as SelectorOption, c as SelectorProps, d as SelectorSlots, f as SelectorStatus, h as SelectorVariant, i as SelectorIndicatorPosition, l as SelectorSection, m as SelectorStatusVariant, n as SelectorEmits, o as SelectorOptionInput, p as SelectorStatusInput, r as SelectorEntry, s as SelectorPresentation, t as _default, u as SelectorSize } from "../index-yT1yiiww.js";
 export { _default as Selector, type SelectorEmits, type SelectorEntry, type SelectorIndicatorPosition, type SelectorOption, type SelectorOptionInput, type SelectorPresentation, type SelectorProps, type SelectorSection, type SelectorSize, type SelectorSlots, type SelectorStatus, type SelectorStatusInput, type SelectorStatusVariant, type SelectorVariant };

package/dist/Selector/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Selector-DuVozKNq.js";
+import { t as _sfc_main } from "../Selector-DJ2BhUTV.js";
 export { _sfc_main as Selector };

package/dist/{Selector-DuVozKNq.js → Selector-DJ2BhUTV.js}

@@ -6,7 +6,8 @@ import { t as useCombobox } from "./useCombobox-CTo5C-gc.js";
 import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
 import { t as useFieldControlState } from "./useFieldControlState-voICDrys.js";
 import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { t as _sfc_main$3 } from "./BottomSheet-eJ3FzTBD.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$3 } from "./BottomSheet-pt7m4CvC.js";
 import { t as _sfc_main$4 } from "./Icon-bteSId7T.js";
 import { t as _sfc_main$5 } from "./Spinner-9cYUCnDy.js";
 import { t as useIndicator } from "./useIndicator-i1NORM7W.js";
@@ -196,6 +197,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const listboxRef = useTemplateRef("listboxRef");
 		const searchInputRef = useTemplateRef("searchInputRef");
 		const sheetSlot = useTemplateRef("sheetSlot");
+		useScrollbars(listboxRef);
 		const isSheet = computed(() => props.presentation === "bottom-sheet");
 		const sheetLabel = computed(() => props.label || resolvedPlaceholder.value);
 		const isEnabled = control.canActivate;

package/dist/SideNav/index.d.ts

@@ -1,2 +1,2 @@
-import { $n as _default$3, Qn as _default$4, _r as useSideNavCollapse, ar as SideNavCollapseButtonSlots, cr as SideNavEmits, dr as SideNavItemEmits, er as _default$2, fr as SideNavItemProps, gr as SideNavCollapseContext, hr as SideNavSectionProps, ir as SideNavCollapseButtonSize, lr as SideNavHandle, mr as SideNavResizable, nr as _default, or as SideNavCollapsible, pr as SideNavProps, rr as SideNavCollapseButtonProps, sr as SideNavControlledCollapsible, tr as _default$1, ur as SideNavHeadingProps } from "../index-CdtZjkmG.js";
+import { $n as _default$3, Qn as _default$4, _r as useSideNavCollapse, ar as SideNavCollapseButtonSlots, cr as SideNavEmits, dr as SideNavItemEmits, er as _default$2, fr as SideNavItemProps, gr as SideNavCollapseContext, hr as SideNavSectionProps, ir as SideNavCollapseButtonSize, lr as SideNavHandle, mr as SideNavResizable, nr as _default, or as SideNavCollapsible, pr as SideNavProps, rr as SideNavCollapseButtonProps, sr as SideNavControlledCollapsible, tr as _default$1, ur as SideNavHeadingProps } from "../index-DUaLJO7l.js";
 export { _default as SideNav, _default$1 as SideNavCollapseButton, type SideNavCollapseButtonProps, type SideNavCollapseButtonSize, type SideNavCollapseButtonSlots, type SideNavCollapseContext, type SideNavCollapsible, type SideNavControlledCollapsible, type SideNavEmits, type SideNavHandle, _default$2 as SideNavHeading, type SideNavHeadingProps, _default$3 as SideNavItem, type SideNavItemEmits, type SideNavItemProps, type SideNavProps, type SideNavResizable, _default$4 as SideNavSection, type SideNavSectionProps, useSideNavCollapse };

package/dist/SideNav/index.js

@@ -1,3 +1,3 @@
 import { r as useSideNavCollapse } from "../context-BjNya0v8.js";
-import { a as _sfc_main$1, i as _sfc_main, n as _sfc_main$3, r as _sfc_main$2, t as _sfc_main$4 } from "../SideNav-Dtv8eA2j.js";
+import { a as _sfc_main$1, i as _sfc_main, n as _sfc_main$3, r as _sfc_main$2, t as _sfc_main$4 } from "../SideNav-BF8mYDxl.js";
 export { _sfc_main as SideNav, _sfc_main$1 as SideNavCollapseButton, _sfc_main$2 as SideNavHeading, _sfc_main$3 as SideNavItem, _sfc_main$4 as SideNavSection, useSideNavCollapse };

package/dist/{SideNav-Dtv8eA2j.js → SideNav-BF8mYDxl.js}

@@ -4,6 +4,7 @@ import { t as useHandleRef } from "./useHandleRef-6cdKugm8.js";
 import { n as useResizable, r as useHotkeys } from "./useResizable-B3ahKLoZ.js";
 import { o as useAstryxMessages } from "./context-iABt_ueM.js";
 import { t as _sfc_main$6 } from "./Tooltip-C4Vaqd3G.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { i as useSideNavRenderMode, r as useSideNavCollapse, t as sideNavCollapseKey } from "./context-BjNya0v8.js";
 import { t as _sfc_main$7 } from "./Icon-bteSId7T.js";
 import { n as resolveNavRoot } from "./link-C4_WogdF.js";
@@ -11,7 +12,7 @@ import { t as _sfc_main$8 } from "./NavItem-BBIGSvDj.js";
 import { t as _sfc_main$9 } from "./NavDisclosure-C_fugrQ3.js";
 import { t as _sfc_main$10 } from "./ResizeHandle-q4nD_586.js";
 import { t as _sfc_main$11 } from "./NavHeadingSurface-B3yJspSN.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, inject, normalizeClass, normalizeProps, normalizeStyle, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, watch, watchEffect, withCtx, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, inject, normalizeClass, normalizeProps, normalizeStyle, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, useTemplateRef, watch, watchEffect, withCtx, withModifiers } from "vue";
 import "../styles/visually-hidden.css";
 import "../styles/side-nav.css";
 //#region src/SideNav/SideNavCollapseButton.vue
@@ -202,7 +203,10 @@ const _hoisted_4$3 = {
 	key: 0,
 	class: "astryx-side-nav__top-content"
 };
-const _hoisted_5$2 = { class: "astryx-side-nav__body" };
+const _hoisted_5$2 = {
+	ref: "body",
+	class: "astryx-side-nav__body"
+};
 const _hoisted_6$2 = {
 	key: 1,
 	class: "astryx-side-nav__bottom"
@@ -224,7 +228,10 @@ const _hoisted_11 = {
 	key: 1,
 	class: "astryx-side-nav__top-content"
 };
-const _hoisted_12 = { class: "astryx-side-nav__body" };
+const _hoisted_12 = {
+	ref: "body",
+	class: "astryx-side-nav__body"
+};
 const _hoisted_13 = {
 	key: 1,
 	class: "astryx-side-nav__bottom"
@@ -264,6 +271,8 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		const messages = useAstryxMessages();
 		const navId = `astryx-side-nav-${useId()}`;
 		const localCollapsed = ref(false);
+		const bodyEl = useTemplateRef("body");
+		useScrollbars(bodyEl);
 		const config = computed(() => typeof props.collapsible === "object" ? props.collapsible : {});
 		function controlledCollapsed() {
 			if (props.isCollapsed !== void 0) return props.isCollapsed;
@@ -340,7 +349,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		return (_ctx, _cache) => {
 			return unref(renderMode) === "topbar" ? (openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "header"), slots.footerIcons ? (openBlock(), createElementBlock("div", _hoisted_2$3, [renderSlot(_ctx.$slots, "footerIcons")])) : createCommentVNode("v-if", true)])) : unref(renderMode) === "drawer" || unref(renderMode) === "drawer-content" ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
 				slots.top ? (openBlock(), createElementBlock("div", _hoisted_4$3, [renderSlot(_ctx.$slots, "top")])) : createCommentVNode("v-if", true),
-				createElementVNode("div", _hoisted_5$2, [renderSlot(_ctx.$slots, "default")]),
+				createElementVNode("div", _hoisted_5$2, [renderSlot(_ctx.$slots, "default")], 512),
 				hasBottom.value ? (openBlock(), createElementBlock("div", _hoisted_6$2, [renderSlot(_ctx.$slots, "footer"), slots.footerIcons ? (openBlock(), createElementBlock("div", _hoisted_7$1, [renderSlot(_ctx.$slots, "footerIcons")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
 			])) : (openBlock(), createElementBlock("div", {
 				key: 2,
@@ -359,7 +368,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 					key: 0,
 					label: config.value.buttonLabel
 				}, null, 8, ["label"])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), slots.top ? (openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "top")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
-				createElementVNode("div", _hoisted_12, [renderSlot(_ctx.$slots, "default")]),
+				createElementVNode("div", _hoisted_12, [renderSlot(_ctx.$slots, "default")], 512),
 				hasBottom.value ? (openBlock(), createElementBlock("div", _hoisted_13, [renderSlot(_ctx.$slots, "footer"), slots.footerIcons ? (openBlock(), createElementBlock("div", _hoisted_14, [renderSlot(_ctx.$slots, "footerIcons")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
 			], 14, _hoisted_8$1), showResizeHandle.value ? (openBlock(), createBlock(_sfc_main$10, {
 				key: 0,

package/dist/Stack/index.js

@@ -1,3 +1,3 @@
-import { t as _sfc_main$1 } from "../Stack-D_Bhs-3r.js";
-import { n as _sfc_main$2, r as _sfc_main, t as _sfc_main$3 } from "../Stack-CjQEavuq.js";
+import { t as _sfc_main$1 } from "../Stack-kQlYbbL4.js";
+import { n as _sfc_main$2, r as _sfc_main, t as _sfc_main$3 } from "../Stack-CTsTFfar.js";
 export { _sfc_main as HStack, _sfc_main$1 as Stack, _sfc_main$2 as StackItem, _sfc_main$3 as VStack };

package/dist/{Stack-CjQEavuq.js → Stack-CTsTFfar.js}

@@ -1,5 +1,6 @@
-import { t as _sfc_main$3 } from "./Stack-D_Bhs-3r.js";
-import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, useAttrs, withCtx } from "vue";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$3 } from "./Stack-kQlYbbL4.js";
+import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, useAttrs, useTemplateRef, withCtx } from "vue";
 import "../styles/stack.css";
 //#region src/Stack/HStack.vue
 const _sfc_main$2 = /*@__PURE__*/ defineComponent({
@@ -52,12 +53,18 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		size: { default: "static" }
 	},
 	setup(__props) {
+		const props = __props;
 		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		useScrollbars(root, { enabled: () => props.isScrollable });
 		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
 		const rootClass = computed(() => ["astryx-stack-item", attrs.class]);
 		const rootStyle = computed(() => attrs.style);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps(forwardedAttrs.value, {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+				ref_key: "root",
+				ref: root
+			}, forwardedAttrs.value, {
 				class: rootClass.value,
 				"data-cross-align-self": __props.crossAlignSelf,
 				"data-scrollable": __props.isScrollable || void 0,

package/dist/{Stack-D_Bhs-3r.js → Stack-kQlYbbL4.js}

@@ -1,4 +1,5 @@
-import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, useAttrs, withCtx } from "vue";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, useAttrs, useTemplateRef, withCtx } from "vue";
 import "../styles/stack.css";
 //#region src/Stack/Stack.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
@@ -33,6 +34,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		useScrollbars(root, { enabled: () => props.isScrollable });
 		const spacingVariables = {
 			0: "var(--astryx-spacing-0, 0px)",
 			.5: "var(--astryx-spacing-0-5, 2px)",
@@ -76,7 +79,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return [attrs.style, stackStyle];
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps(forwardedAttrs.value, {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+				ref_key: "root",
+				ref: root
+			}, forwardedAttrs.value, {
 				class: rootClass.value,
 				"data-cross-align": crossAlign.value,
 				"data-direction": __props.direction,

package/dist/Stepper/index.d.ts

@@ -1,2 +1,2 @@
-import { a as StepProps, c as StepperCollapsedVariant, d as StepperIndicatorPosition, f as StepperOrientation, i as StepProgress, l as StepperDensity, m as StepperSlots, n as _default, o as StepSlots, p as StepperProps, r as StepIndicator, s as StepStatus, t as _default$1, u as StepperHorizontalOptions } from "../index-Ca8VIE4l.js";
+import { a as StepProps, c as StepperCollapsedVariant, d as StepperIndicatorPosition, f as StepperOrientation, i as StepProgress, l as StepperDensity, m as StepperSlots, n as _default, o as StepSlots, p as StepperProps, r as StepIndicator, s as StepStatus, t as _default$1, u as StepperHorizontalOptions } from "../index-CVn0GBdB.js";
 export { _default as Step, type StepIndicator, type StepProgress, type StepProps, type StepSlots, type StepStatus, _default$1 as Stepper, type StepperCollapsedVariant, type StepperDensity, type StepperHorizontalOptions, type StepperIndicatorPosition, type StepperOrientation, type StepperProps, type StepperSlots };

package/dist/Switch/index.d.ts

@@ -1,2 +1,2 @@
-import { Gn as SwitchChangeEvent, Jn as SwitchSize, Kn as SwitchEmits, Un as _default, Wn as SwitchChangeAction, Xn as SwitchStatus, Yn as SwitchSlots, Zn as SwitchStatusType, qn as SwitchProps } from "../index-CdtZjkmG.js";
+import { Gn as SwitchChangeEvent, Jn as SwitchSize, Kn as SwitchEmits, Un as _default, Wn as SwitchChangeAction, Xn as SwitchStatus, Yn as SwitchSlots, Zn as SwitchStatusType, qn as SwitchProps } from "../index-DUaLJO7l.js";
 export { _default as Switch, type SwitchChangeAction, type SwitchChangeEvent, type SwitchEmits, type SwitchProps, type SwitchSize, type SwitchSlots, type SwitchStatus, type SwitchStatusType };

package/dist/TabList/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TabListProps, c as TabMenuOption, d as TabSlots, i as TabListLayout, l as TabMenuProps, n as _default$1, o as TabListSize, r as _default, s as TabListTab, t as _default$2, u as TabProps } from "../index-DamRHh1i.js";
+import { a as TabListProps, c as TabMenuOption, d as TabSlots, i as TabListLayout, l as TabMenuProps, n as _default$1, o as TabListSize, r as _default, s as TabListTab, t as _default$2, u as TabProps } from "../index-C2nbK2AA.js";
 export { _default as Tab, _default$1 as TabList, type TabListLayout, type TabListProps, type TabListSize, type TabListTab, _default$2 as TabMenu, type TabMenuOption, type TabMenuProps, type TabProps, type TabSlots };

package/dist/Table/index.d.ts

@@ -1,3 +1,3 @@
-import { $t as TableSemanticRowStatus, An as columnResizeStep, At as _default$4, Bn as resolveColumnFloorWidths, Bt as useTableTreeState, Cn as useTableColumnSettings, Dn as UseTableColumnResizeConfig, Dt as _default$7, En as ColumnResizeSnapshot, Fn as cellText, Ft as TableTreeRowMeta, Gt as useTableStickyColumns, Hn as sortRows, Ht as UseTableStickyColumnsConfig, In as generateColumns, It as UseTableTreeDataConfig, Jt as useTableSortableState, Kt as UseTableSortableConfig, Ln as paginateData, Lt as UseTableTreeStateConfig, Mn as resizeColumnWidths, Mt as _default$2, Nn as useTableColumnResize, Nt as _default$1, On as columnResizeDirectionSign, Ot as _default$6, Pn as capitalize, Pt as _default, Qt as TableRowStatusName, Rn as pixel, Rt as flattenTree, Sn as UseTableColumnSettingsConfig, Tn as ColumnResizePlan, Ut as resolveStickySide, Vn as resolveColumnWidths, Vt as StickySide, Wt as stickyOffsets, Xt as TableRowStatus, Yt as TableCustomRowStatus, Zt as TableRowStatusColor, _n as applyTableFilters, an as useTableRowExpansion, bn as ColumnSettingsOption, cn as useTablePagination, dn as buildGroupedRows, en as UseTableRowStatusConfig, fn as isTableGroupHeader, gn as UseTableFilteringConfig, hn as UseTableFilterStateOptions, in as UseTableRowExpansionConfig, jn as isProportionalColumnWidth, jt as _default$3, kn as columnResizeMinWidth, kt as _default$5, ln as isInteractiveRowClick, mn as TableFilterStateHandle, nn as UseTableRowIndexConfig, on as TablePaginationVariant, pn as useTableGroupedRows, qt as useTableSortable, rn as useTableRowIndex, sn as UseTablePaginationConfig, tn as useTableRowStatus, un as UseTableGroupedRowsConfig, vn as useTableFilterState, wn as useTableColumnSettingsState, xn as TableColumnSettingsState, yn as useTableFiltering, zn as proportional, zt as useTableTreeData } from "../index-CdtZjkmG.js";
+import { $t as TableSemanticRowStatus, An as columnResizeStep, At as _default$4, Bn as resolveColumnFloorWidths, Bt as useTableTreeState, Cn as useTableColumnSettings, Dn as UseTableColumnResizeConfig, Dt as _default$7, En as ColumnResizeSnapshot, Fn as cellText, Ft as TableTreeRowMeta, Gt as useTableStickyColumns, Hn as sortRows, Ht as UseTableStickyColumnsConfig, In as generateColumns, It as UseTableTreeDataConfig, Jt as useTableSortableState, Kt as UseTableSortableConfig, Ln as paginateData, Lt as UseTableTreeStateConfig, Mn as resizeColumnWidths, Mt as _default$2, Nn as useTableColumnResize, Nt as _default$1, On as columnResizeDirectionSign, Ot as _default$6, Pn as capitalize, Pt as _default, Qt as TableRowStatusName, Rn as pixel, Rt as flattenTree, Sn as UseTableColumnSettingsConfig, Tn as ColumnResizePlan, Ut as resolveStickySide, Vn as resolveColumnWidths, Vt as StickySide, Wt as stickyOffsets, Xt as TableRowStatus, Yt as TableCustomRowStatus, Zt as TableRowStatusColor, _n as applyTableFilters, an as useTableRowExpansion, bn as ColumnSettingsOption, cn as useTablePagination, dn as buildGroupedRows, en as UseTableRowStatusConfig, fn as isTableGroupHeader, gn as UseTableFilteringConfig, hn as UseTableFilterStateOptions, in as UseTableRowExpansionConfig, jn as isProportionalColumnWidth, jt as _default$3, kn as columnResizeMinWidth, kt as _default$5, ln as isInteractiveRowClick, mn as TableFilterStateHandle, nn as UseTableRowIndexConfig, on as TablePaginationVariant, pn as useTableGroupedRows, qt as useTableSortable, rn as useTableRowIndex, sn as UseTablePaginationConfig, tn as useTableRowStatus, un as UseTableGroupedRowsConfig, vn as useTableFilterState, wn as useTableColumnSettingsState, xn as TableColumnSettingsState, yn as useTableFiltering, zn as proportional, zt as useTableTreeData } from "../index-DUaLJO7l.js";
 import { A as TablePanelPatch, B as TableSortEntry, C as TableFilterField, D as TableFilterVariant, E as TableFilterValue, F as TableRowProps, G as TableSelectionState, H as TableTextOverflow, I as TableSelectionToolbarProps, J as useTableSelection, K as UseTableSelectionConfig, L as TableSelectionToolbarSlots, M as TableProps, N as TableRowMenuItem, O as TableGroupPatch, P as TableRowPatch, S as TableDividers, T as TableFilterState, U as TableVerticalAlign, V as TableSortState, W as TableSelectedKeysSetter, Y as useTableSelectionState, _ as TableCellProps, b as TableColumnResizeContribution, g as TableCellPatch, h as ProportionalWidth, j as TablePlugin, k as TableHeaderPatch, m as PixelWidth, p as ColumnWidth, q as UseTableSelectionStateConfig, v as TableColumn, w as TableFilterFieldType, x as TableDensity, y as TableColumnAlign, z as TableSortDirection } from "../useResizable-DDwPpPe6.js";
 export { type ColumnResizePlan, type ColumnResizeSnapshot, type ColumnSettingsOption, type ColumnWidth, type PixelWidth, type ProportionalWidth, type StickySide, _default as Table, _default$1 as TableBody, _default$2 as TableCell, type TableCellPatch, type TableCellProps, type TableColumn, type TableColumnAlign, type TableColumnResizeContribution, type TableColumnSettingsState, type TableCustomRowStatus, type TableDensity, type TableDividers, type TableFilterField, type TableFilterFieldType, type TableFilterState, type TableFilterStateHandle, type TableFilterValue, type TableFilterVariant, _default$3 as TableFooter, type TableGroupPatch, _default$4 as TableHeader, _default$5 as TableHeaderCell, type TableHeaderPatch, type TablePaginationVariant, type TablePanelPatch, type TablePlugin, type TableProps, _default$6 as TableRow, type TableRowMenuItem, type TableRowPatch, type TableRowProps, type TableRowStatus, type TableRowStatusColor, type TableRowStatusName, type TableSelectedKeysSetter, type TableSelectionState, _default$7 as TableSelectionToolbar, type TableSelectionToolbarProps, type TableSelectionToolbarSlots, type TableSemanticRowStatus, type TableSortDirection, type TableSortEntry, type TableSortState, type TableTextOverflow, type TableTreeRowMeta, type TableVerticalAlign, type UseTableColumnResizeConfig, type UseTableColumnSettingsConfig, type UseTableFilterStateOptions, type UseTableFilteringConfig, type UseTableGroupedRowsConfig, type UseTablePaginationConfig, type UseTableRowExpansionConfig, type UseTableRowIndexConfig, type UseTableRowStatusConfig, type UseTableSelectionConfig, type UseTableSelectionStateConfig, type UseTableSortableConfig, type UseTableStickyColumnsConfig, type UseTableTreeDataConfig, type UseTableTreeStateConfig, applyTableFilters, buildGroupedRows, capitalize, cellText, columnResizeDirectionSign, columnResizeMinWidth, columnResizeStep, flattenTree, generateColumns, isInteractiveRowClick, isProportionalColumnWidth, isTableGroupHeader, paginateData, paginateData as paginateTableData, pixel, proportional, resizeColumnWidths, resolveColumnFloorWidths, resolveColumnWidths, resolveStickySide, sortRows, stickyOffsets, useTableColumnResize, useTableColumnSettings, useTableColumnSettingsState, useTableFilterState, useTableFiltering, useTableGroupedRows, useTablePagination, useTableRowExpansion, useTableRowIndex, useTableRowStatus, useTableSelection, useTableSelectionState, useTableSortable, useTableSortableState, useTableStickyColumns, useTableTreeData, useTableTreeState };

package/dist/Table/index.js

@@ -1,2 +1,2 @@
-import { A as useTableColumnSettings, B as generateColumns, C as isInteractiveRowClick, D as applyTableFilters, E as useTableGroupedRows, F as isProportionalColumnWidth, G as resolveColumnWidths, H as pixel, I as resizeColumnWidths, K as sortRows, L as useTableColumnResize, M as columnResizeDirectionSign, N as columnResizeMinWidth, O as useTableFilterState, P as columnResizeStep, R as capitalize, S as useTablePagination, T as isTableGroupHeader, U as proportional, V as paginateData, W as resolveColumnFloorWidths, _ as useTableSelection, a as _sfc_main$3, b as useTableRowIndex, c as _sfc_main, d as useTableTreeState, f as resolveStickySide, g as useTableSortableState, h as useTableSortable, i as _sfc_main$4, j as useTableColumnSettingsState, k as useTableFiltering, l as flattenTree, m as useTableStickyColumns, n as _sfc_main$6, o as _sfc_main$2, p as stickyOffsets, r as _sfc_main$5, s as _sfc_main$1, t as _sfc_main$7, u as useTableTreeData, v as useTableSelectionState, w as buildGroupedRows, x as useTableRowExpansion, y as useTableRowStatus, z as cellText } from "../Table-hqZMmzfU.js";
+import { A as useTableColumnSettings, B as generateColumns, C as isInteractiveRowClick, D as applyTableFilters, E as useTableGroupedRows, F as isProportionalColumnWidth, G as resolveColumnWidths, H as pixel, I as resizeColumnWidths, K as sortRows, L as useTableColumnResize, M as columnResizeDirectionSign, N as columnResizeMinWidth, O as useTableFilterState, P as columnResizeStep, R as capitalize, S as useTablePagination, T as isTableGroupHeader, U as proportional, V as paginateData, W as resolveColumnFloorWidths, _ as useTableSelection, a as _sfc_main$3, b as useTableRowIndex, c as _sfc_main, d as useTableTreeState, f as resolveStickySide, g as useTableSortableState, h as useTableSortable, i as _sfc_main$4, j as useTableColumnSettingsState, k as useTableFiltering, l as flattenTree, m as useTableStickyColumns, n as _sfc_main$6, o as _sfc_main$2, p as stickyOffsets, r as _sfc_main$5, s as _sfc_main$1, t as _sfc_main$7, u as useTableTreeData, v as useTableSelectionState, w as buildGroupedRows, x as useTableRowExpansion, y as useTableRowStatus, z as cellText } from "../Table-fecqnm7P.js";
 export { _sfc_main as Table, _sfc_main$1 as TableBody, _sfc_main$2 as TableCell, _sfc_main$3 as TableFooter, _sfc_main$4 as TableHeader, _sfc_main$5 as TableHeaderCell, _sfc_main$6 as TableRow, _sfc_main$7 as TableSelectionToolbar, applyTableFilters, buildGroupedRows, capitalize, cellText, columnResizeDirectionSign, columnResizeMinWidth, columnResizeStep, flattenTree, generateColumns, isInteractiveRowClick, isProportionalColumnWidth, isTableGroupHeader, paginateData, paginateData as paginateTableData, pixel, proportional, resizeColumnWidths, resolveColumnFloorWidths, resolveColumnWidths, resolveStickySide, sortRows, stickyOffsets, useTableColumnResize, useTableColumnSettings, useTableColumnSettingsState, useTableFilterState, useTableFiltering, useTableGroupedRows, useTablePagination, useTableRowExpansion, useTableRowIndex, useTableRowStatus, useTableSelection, useTableSelectionState, useTableSortable, useTableSortableState, useTableStickyColumns, useTableTreeData, useTableTreeState };

package/dist/{Table-hqZMmzfU.js → Table-fecqnm7P.js}

@@ -3,17 +3,18 @@ import { t as _sfc_main$15 } from "./Button-B6Hj_O_s.js";
 import { t as _sfc_main$16 } from "./IconButton-DDNgNl7B.js";
 import { o as useAstryxMessages } from "./context-iABt_ueM.js";
 import { t as _sfc_main$17 } from "./Tooltip-C4Vaqd3G.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { t as _sfc_main$18 } from "./Icon-bteSId7T.js";
 import { t as _sfc_main$19 } from "./CheckboxInput-BS9J6edf.js";
-import { t as _sfc_main$20 } from "./Popover-CtoBfVlD.js";
-import { t as _sfc_main$21 } from "./DateInput-u2XKccpK.js";
-import { t as _sfc_main$22 } from "./MultiSelector-BeV98x7X.js";
+import { t as _sfc_main$20 } from "./Popover-DJf8POzL.js";
+import { t as _sfc_main$21 } from "./DateInput-DT518j5E.js";
+import { t as _sfc_main$22 } from "./MultiSelector-BtAUfQ3t.js";
 import { t as _sfc_main$23 } from "./NumberInput-AZ9x3oja.js";
-import { t as _sfc_main$24 } from "./Pagination-Cc4BrjQg.js";
-import { t as _sfc_main$25 } from "./Selector-DuVozKNq.js";
+import { t as _sfc_main$24 } from "./Pagination-DqwNQFRp.js";
+import { t as _sfc_main$25 } from "./Selector-DJ2BhUTV.js";
 import { t as _sfc_main$26 } from "./TextInput-zFT1_qgI.js";
 import { t as _sfc_main$27 } from "./Toolbar-BrgvvTCk.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, watch, withCtx, withModifiers } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 import "../styles/table.css";
 function proportional(value = 1, options) {
 	return {
@@ -1843,6 +1844,7 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const messages = useAstryxMessages();
 		const scrollRoot = ref(null);
+		useScrollbars(scrollRoot);
 		const menu = ref(null);
 		const resolvedColumns = computed(() => props.plugins.reduce((columns, plugin) => plugin.transformColumns?.(columns) ?? columns, [...props.columns]));
 		const widths = computed(() => resolveColumnWidths(resolvedColumns.value));
@@ -2384,6 +2386,8 @@ const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 		const plugins = computed(() => Object.values(props.plugins ?? {}).filter((plugin) => plugin != null));
 		const dataMode = computed(() => props.data != null);
 		const columns = computed(() => props.columns ?? []);
+		const scrollEl = useTemplateRef("scroll");
+		useScrollbars(scrollEl);
 		return (_ctx, _cache) => {
 			return dataMode.value ? (openBlock(), createBlock(_sfc_main$8, {
 				key: 0,
@@ -2424,6 +2428,7 @@ const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 				"row-count"
 			])) : (openBlock(), createElementBlock("div", {
 				key: 1,
+				ref: "scroll",
 				class: "astryx-table-scroll",
 				role: "group",
 				"aria-label": __props.label ?? unref(messages).table.label

package/dist/Text/index.d.ts

@@ -1,3 +1,3 @@
-import { a as TextProps, c as TextType, d as TextWrap, i as TextJustify, l as TextWeight, n as TextColor, o as TextSize, r as TextDisplay, s as TextTruncateTooltip, t as TextAs, u as TextWordBreak } from "../types-BBWrcHMD.js";
-import { t as _default } from "../index-DdGck82Y.js";
+import { a as TextProps, c as TextType, d as TextWrap, i as TextJustify, l as TextWeight, n as TextColor, o as TextSize, r as TextDisplay, s as TextTruncateTooltip, t as TextAs, u as TextWordBreak } from "../types-Ckih2YJi.js";
+import { t as _default } from "../index-CICeEoZV.js";
 export { _default as Text, type TextAs, type TextColor, type TextDisplay, type TextJustify, type TextProps, type TextSize, type TextTruncateTooltip, type TextType, type TextWeight, type TextWordBreak, type TextWrap };

package/dist/TextArea/index.d.ts

@@ -1,2 +1,2 @@
-import { Ct as TextAreaSlots, Et as TextAreaWrap, St as TextAreaSize, Tt as TextAreaStatusType, _t as TextAreaChangeAction, bt as TextAreaProps, gt as _default, vt as TextAreaChangeEvent, wt as TextAreaStatus, xt as TextAreaResize, yt as TextAreaEmits } from "../index-CdtZjkmG.js";
+import { Ct as TextAreaSlots, Et as TextAreaWrap, St as TextAreaSize, Tt as TextAreaStatusType, _t as TextAreaChangeAction, bt as TextAreaProps, gt as _default, vt as TextAreaChangeEvent, wt as TextAreaStatus, xt as TextAreaResize, yt as TextAreaEmits } from "../index-DUaLJO7l.js";
 export { _default as TextArea, type TextAreaChangeAction, type TextAreaChangeEvent, type TextAreaEmits, type TextAreaProps, type TextAreaResize, type TextAreaSize, type TextAreaSlots, type TextAreaStatus, type TextAreaStatusType, type TextAreaWrap };

package/dist/TextInput/index.d.ts

@@ -1,2 +1,2 @@
-import { ct as TextInputChangeEvent, dt as TextInputSize, ft as TextInputSlots, ht as TextInputType, lt as TextInputEmits, mt as TextInputStatusType, ot as _default, pt as TextInputStatus, st as TextInputChangeAction, ut as TextInputProps } from "../index-CdtZjkmG.js";
+import { ct as TextInputChangeEvent, dt as TextInputSize, ft as TextInputSlots, ht as TextInputType, lt as TextInputEmits, mt as TextInputStatusType, ot as _default, pt as TextInputStatus, st as TextInputChangeAction, ut as TextInputProps } from "../index-DUaLJO7l.js";
 export { _default as TextInput, type TextInputChangeAction, type TextInputChangeEvent, type TextInputEmits, type TextInputProps, type TextInputSize, type TextInputSlots, type TextInputStatus, type TextInputStatusType, type TextInputType };

package/dist/{TimeField-ByiJKBRM.js → TimeField-CoHDGmsP.js}

@@ -6,6 +6,7 @@ import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-C
 import { t as _sfc_main$3 } from "./FieldIcon--NTgW5IU.js";
 import { t as _sfc_main$4 } from "./IconButton-DDNgNl7B.js";
 import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { t as _sfc_main$5 } from "./Icon-bteSId7T.js";
 import { t as _sfc_main$6 } from "./Spinner-9cYUCnDy.js";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, shallowRef, toDisplayString, unref, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
@@ -110,6 +111,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const draft = shallowRef("");
 		const container = useTemplateRef("container");
 		const optionsRef = useTemplateRef("options");
+		useScrollbars(optionsRef);
 		const generatedId = `astryx-time-field-${useId()}`;
 		const listboxId = `${props.inputId ?? generatedId}-options`;
 		const disabledMessageId = `${props.inputId ?? generatedId}-disabled`;

package/dist/TimeInput/index.d.ts

@@ -1,2 +1,2 @@
-import { at as TimeInputSize, it as TimeInputProps, nt as _default, rt as TimeInputEmits } from "../index-CdtZjkmG.js";
+import { at as TimeInputSize, it as TimeInputProps, nt as _default, rt as TimeInputEmits } from "../index-DUaLJO7l.js";
 export { _default as TimeInput, type TimeInputEmits, type TimeInputProps, type TimeInputSize };

package/dist/TimeInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../TimeInput-S8n946tp.js";
+import { t as _sfc_main } from "../TimeInput-D2k3Ux3p.js";
 export { _sfc_main as TimeInput };

package/dist/{TimeInput-S8n946tp.js → TimeInput-D2k3Ux3p.js}

@@ -1,5 +1,5 @@
 import { t as _sfc_main$1 } from "./Field-D5gUEGw4.js";
-import { t as _sfc_main$2 } from "./TimeField-ByiJKBRM.js";
+import { t as _sfc_main$2 } from "./TimeField-CoHDGmsP.js";
 import { computed, createBlock, createVNode, defineComponent, mergeModels, openBlock, useId, useModel, withCtx } from "vue";
 //#region src/TimeInput/TimeInput.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({

package/dist/Timer/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TimerFormat, i as TimerType, n as TimerColor, o as TimerPresentation, r as TimerProps, s as getPresentation, t as _default } from "../index-csA1lH_0.js";
+import { a as TimerFormat, i as TimerType, n as TimerColor, o as TimerPresentation, r as TimerProps, s as getPresentation, t as _default } from "../index-xrzJC4wm.js";
 export { _default as Timer, type TimerColor, type TimerFormat, type TimerPresentation, type TimerProps, type TimerType, getPresentation };

package/dist/Timestamp/index.d.ts

@@ -1,2 +1,2 @@
-import { $ as FormatInstantOptions, G as TimestampColor, J as TimestampTooltipEntry, K as TimestampFormat, Q as formatRelativeTime, W as _default, X as TimestampTooltipLine, Y as TimestampTooltipFormat, Z as formatTooltipLines, et as InstantFormat, q as TimestampProps, tt as formatInstant } from "../index-CdtZjkmG.js";
+import { $ as FormatInstantOptions, G as TimestampColor, J as TimestampTooltipEntry, K as TimestampFormat, Q as formatRelativeTime, W as _default, X as TimestampTooltipLine, Y as TimestampTooltipFormat, Z as formatTooltipLines, et as InstantFormat, q as TimestampProps, tt as formatInstant } from "../index-DUaLJO7l.js";
 export { type FormatInstantOptions, type InstantFormat, _default as Timestamp, type TimestampColor, type TimestampFormat, type TimestampProps, type TimestampTooltipEntry, type TimestampTooltipFormat, type TimestampTooltipLine, formatInstant, formatRelativeTime, formatTooltipLines };

package/dist/ToggleButton/index.d.ts

@@ -1,2 +1,2 @@
-import { A as ToggleButtonEmits, B as ToggleButtonPressedChangeHandler, D as _default, E as _default$1, F as ToggleButtonGroupProps, H as ToggleButtonSize, I as ToggleButtonGroupSingleProps, L as ToggleButtonGroupSlots, M as ToggleButtonGroupEmits, N as ToggleButtonGroupMultipleProps, O as ToggleButtonChangeAction, P as ToggleButtonGroupOrientation, R as ToggleButtonGroupType, U as ToggleButtonSlots, V as ToggleButtonProps, j as ToggleButtonGroupBaseProps, k as ToggleButtonElevation, z as ToggleButtonGroupValue } from "../index-CdtZjkmG.js";
+import { A as ToggleButtonEmits, B as ToggleButtonPressedChangeHandler, D as _default, E as _default$1, F as ToggleButtonGroupProps, H as ToggleButtonSize, I as ToggleButtonGroupSingleProps, L as ToggleButtonGroupSlots, M as ToggleButtonGroupEmits, N as ToggleButtonGroupMultipleProps, O as ToggleButtonChangeAction, P as ToggleButtonGroupOrientation, R as ToggleButtonGroupType, U as ToggleButtonSlots, V as ToggleButtonProps, j as ToggleButtonGroupBaseProps, k as ToggleButtonElevation, z as ToggleButtonGroupValue } from "../index-DUaLJO7l.js";
 export { _default as ToggleButton, _default as default, type ToggleButtonChangeAction, type ToggleButtonElevation, type ToggleButtonEmits, _default$1 as ToggleButtonGroup, type ToggleButtonGroupBaseProps, type ToggleButtonGroupEmits, type ToggleButtonGroupMultipleProps, type ToggleButtonGroupOrientation, type ToggleButtonGroupProps, type ToggleButtonGroupSingleProps, type ToggleButtonGroupSlots, type ToggleButtonGroupType, type ToggleButtonGroupValue, type ToggleButtonPressedChangeHandler, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonSlots };

package/dist/Tokenizer/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Tokenizer-41p035dX.js";
+import { t as _sfc_main } from "../Tokenizer-B5C_qY7t.js";
 export { _sfc_main as Tokenizer };

package/dist/{Tokenizer-41p035dX.js → Tokenizer-B5C_qY7t.js}

@@ -3,6 +3,7 @@ import { t as _sfc_main$1 } from "./ButtonTooltip-nWWrth8j.js";
 import { t as useAnnounce } from "./announce-Cnio10Wk.js";
 import { o as useAstryxMessages } from "./context-iABt_ueM.js";
 import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { t as _sfc_main$2 } from "./Field-D5gUEGw4.js";
 import { t as _sfc_main$3 } from "./Token-DsntTYhQ.js";
 import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-DwztMNjP.js";
@@ -137,6 +138,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const announce = useAnnounce();
 		const anchorRef = useTemplateRef("anchorRef");
 		const listboxRef = useTemplateRef("listboxRef");
+		useScrollbars(listboxRef);
 		const inputRef = useTemplateRef("inputRef");
 		const tokenEls = /* @__PURE__ */ new Map();
 		const placeholder = computed(() => props.placeholder ?? messages.value.tokenizer.placeholder);