@astryx-vue/core 0.3.0 → 0.4.0

package/dist/{Switch-DaVPRxvN.js → Switch-Z2Vfiiic.js}

@@ -1,8 +1,12 @@
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
-import { i as useAriaRequired } from "./context-Cfjh8te1.js";
-import { t as _sfc_main$3 } from "./FieldLabel-BNeXRuGH.js";
+import { n as useButtonTooltip } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$2 } from "./ButtonTooltip-CNKOQHYR.js";
+import { t as useAnnounce } from "./announce-B210eJVf.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { i as useAriaRequired } from "./context-Cfml4jaK.js";
+import { t as _sfc_main$3 } from "./FieldLabel-jxIiWgLw.js";
+import { t as _sfc_main$4 } from "./FieldStatus-MjY19ERl.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, renderSlot, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/switch.css";
 //#region src/Switch/useSwitchAction.ts
@@ -108,7 +112,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		hasAutoFocus: { type: Boolean },
 		htmlName: {},
 		form: {},
-		loadingLabel: { default: "Loading" },
+		loadingLabel: {},
 		label: {},
 		isLabelHidden: { type: Boolean },
 		isDisabled: { type: Boolean },
@@ -117,7 +121,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		labelIcon: {},
 		labelTooltip: {},
 		optionalLabel: {},
-		requiredLabel: {}
+		requiredLabel: {},
+		targetClass: {}
 	}, {
 		"modelValue": {
 			type: Boolean,
@@ -130,14 +135,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const ariaRequired = useAriaRequired(props);
+		const messages = useAstryxMessages();
+		const announce = useAnnounce();
+		const press = usePressFeedback({ hasOverlay: false });
 		const model = useModel(__props, "modelValue");
 		const attrs = useAttrs();
 		const input = useTemplateRef("input");
 		const generatedId = `astryx-switch-${useId()}`;
 		const inputId = computed(() => props.id ?? generatedId);
 		const descriptionId = computed(() => props.description ? `${inputId.value}-description` : void 0);
+		const statusId = computed(() => props.status?.message ? props.status.messageId ?? `${inputId.value}-status` : void 0);
 		const disabledId = `${generatedId}-disabled`;
-		const loadingId = `${generatedId}-loading`;
 		const showsDisabledMessage = computed(() => !!props.isDisabled && !!props.disabledMessage?.trim());
 		const tooltip = useButtonTooltip(showsDisabledMessage);
 		const action = useSwitchAction({
@@ -148,6 +156,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		const busy = computed(() => !!props.isLoading || action.isPending.value);
 		const blocked = computed(() => props.isDisabled || props.isReadOnly || busy.value);
+		const loadingText = computed(() => props.loadingLabel || messages.value.switch.loading);
+		watch(busy, (isBusy) => {
+			if (isBusy) announce(loadingText.value);
+		}, { immediate: true });
 		const widthStyle = computed(() => ({ width: typeof props.width === "number" ? `${props.width}px` : props.width }));
 		const element = computed(() => input.value ?? null);
 		function focus(options) {
@@ -186,8 +198,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return [
 				attrs["aria-describedby"],
 				descriptionId.value,
-				showsDisabledMessage.value ? disabledId : void 0,
-				busy.value ? loadingId : void 0
+				statusId.value,
+				showsDisabledMessage.value ? disabledId : void 0
 			].filter(Boolean).join(" ") || void 0;
 		}
 		function syncNative() {
@@ -226,11 +238,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"data-status": __props.status?.type,
 				"data-blocked": blocked.value || void 0
 			}, [
-				createElementVNode("div", {
-					class: "astryx-switch-row",
+				createElementVNode("div", mergeProps({ class: "astryx-switch-row" }, blocked.value ? void 0 : unref(press).pressableProps, {
 					onPointerenter: _cache[2] || (_cache[2] = (...args) => unref(tooltip).onPointerEnter && unref(tooltip).onPointerEnter(...args)),
 					onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(tooltip).onPointerLeave && unref(tooltip).onPointerLeave(...args))
-				}, [createElementVNode("span", _hoisted_2, [createElementVNode("input", mergeProps(inputAttrs(), {
+				}), [createElementVNode("span", _hoisted_2, [createElementVNode("input", mergeProps(inputAttrs(), {
 					id: inputId.value,
 					ref_key: "input",
 					ref: input,
@@ -265,6 +276,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"is-disabled": __props.isDisabled,
 					"is-optional": __props.isOptional,
 					"is-required": __props.isRequired,
+					"target-class": "astryx-switch-label",
 					"label-icon": __props.labelIcon,
 					"label-tooltip": __props.labelTooltip,
 					"optional-label": __props.optionalLabel,
@@ -287,21 +299,25 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"label-tooltip",
 					"optional-label",
 					"required-label"
-				])])], 32),
-				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$1, {
+				])])], 16),
+				__props.status?.message ? (openBlock(), createBlock(_sfc_main$4, {
 					key: 0,
+					id: statusId.value,
+					type: __props.status.type,
+					message: __props.status.message,
+					variant: __props.statusVariant === "attached" ? "attached" : "detached"
+				}, null, 8, [
+					"id",
+					"type",
+					"message",
+					"variant"
+				])) : createCommentVNode("v-if", true),
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$1, {
+					key: 1,
 					id: disabledId
 				}, {
 					default: withCtx(() => [createTextVNode(toDisplayString(__props.disabledMessage), 1)]),
 					_: 1
-				})) : createCommentVNode("v-if", true),
-				busy.value ? (openBlock(), createBlock(_sfc_main$1, {
-					key: 1,
-					id: loadingId,
-					role: "status"
-				}, {
-					default: withCtx(() => [createTextVNode(toDisplayString(__props.loadingLabel), 1)]),
-					_: 1
 				})) : createCommentVNode("v-if", true)
 			], 14, _hoisted_1), showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
 				key: 0,

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-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 };
+import { a as TabListLayout, c as TabListSize, d as TabMenuProps, f as TabProps, i as TabListEdgeCompensation, l as TabListTab, n as _default$1, o as TabListOverflow, p as TabSlots, r as _default, s as TabListProps, t as _default$2, u as TabMenuOption } from "../index-DLAG3m9W.js";
+export { _default as Tab, _default$1 as TabList, type TabListEdgeCompensation, type TabListLayout, type TabListOverflow, type TabListProps, type TabListSize, type TabListTab, _default$2 as TabMenu, type TabMenuOption, type TabMenuProps, type TabProps, type TabSlots };

package/dist/TabList/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main$1, r as _sfc_main, t as _sfc_main$2 } from "../TabList-DIkK9sgK.js";
+import { n as _sfc_main$1, r as _sfc_main, t as _sfc_main$2 } from "../TabList-DRqP0Hrv.js";
 export { _sfc_main as Tab, _sfc_main$1 as TabList, _sfc_main$2 as TabMenu };

package/dist/{TabList-DIkK9sgK.js → TabList-DRqP0Hrv.js}

@@ -1,18 +1,32 @@
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
+import { n as readLayerScoped, t as defineLayerScopedKey } from "./scopedProvide-C-Df7c15.js";
 import { n as useLinkComponent } from "./context-C_peZbXf.js";
 import { n as useDevWarning } from "./useDevWarning-DznOpOHT.js";
-import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { t as useListFocus } from "./useListFocus-D0iOJl39.js";
-import { t as _sfc_main$3 } from "./Icon-bteSId7T.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRaw, unref, useId, watch, withCtx } from "vue";
+import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-B7cvG-_v.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { t as useListFocus } from "./useListFocus-ChxLg0b4.js";
+import { t as useScrollOverflow } from "./useScrollOverflow-DuMoGXmm.js";
+import { t as _sfc_main$3 } from "./Icon-KDnUyY7f.js";
+import { n as isNavigableHref } from "./link-DuuA2eCL.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRaw, unref, useId, watch, withCtx, withModifiers } from "vue";
+import "../styles/layer.css";
 import "../styles/visually-hidden-utility.css";
 import "../styles/tab-list.css";
 import "../styles/tab-menu.css";
 //#region src/TabList/context.ts
-const tabListContextKey = Symbol("tabListContext");
+const tabListContextKey = defineLayerScopedKey("tabListContext", null);
+/**
+* 读最近的 `TabList`。不在 `TabList` 里（包括被浮层边界截断的情况）就报错，
+* 报错方式和上游 `useTabListContext` 一致。
+*/
+function useTabListContext() {
+	const context = readLayerScoped(tabListContextKey);
+	if (context == null) throw new Error("useTabListContext must be used within TabList. Wrap your Tab in <TabList>.");
+	return context;
+}
 //#endregion
 //#region src/TabList/Tab.vue
-const _hoisted_1$2 = {
+const _hoisted_1$1 = {
 	key: 0,
 	class: "astryx-tab__icon",
 	"aria-hidden": "true"
@@ -47,13 +61,14 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
-		const context = inject(tabListContextKey);
+		const context = useTabListContext();
 		const linkComponent = useLinkComponent();
 		const rootRef = ref();
-		const isTabsPattern = computed(() => context?.isTabsPattern.value ?? false);
-		const isSelected = computed(() => context?.value.value === props.value);
+		const isTabsPattern = computed(() => context.isTabsPattern.value);
+		const isSelected = computed(() => context.value.value === props.value);
 		const tabIndex = computed(() => isSelected.value && !props.disabled ? 0 : -1);
-		const isLink = computed(() => !isTabsPattern.value && props.href != null && props.href !== "" && !props.disabled);
+		const { pressableProps } = usePressFeedback({ hasOverlay: false });
+		const isLink = computed(() => !isTabsPattern.value && isNavigableHref(props.href, props.disabled));
 		/** 自己的 `as` 优先，其次是 LinkProvider 给的默认链接组件。 */
 		const customLink = computed(() => props.as ?? linkComponent.value);
 		const root = computed(() => {
@@ -62,40 +77,30 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 		});
 		const classes = computed(() => [
 			"astryx-tab",
-			`astryx-tab--size-${context?.size.value ?? "md"}`,
+			`astryx-tab--size-${context.size.value}`,
 			isSelected.value && "astryx-tab--selected",
 			props.disabled && "astryx-tab--disabled",
 			props.isLabelHidden && "astryx-tab--label-hidden"
 		]);
 		useDevWarning("Tab", "`panelId` only applies under the tabs pattern; give the TabList `role=\"tablist\"` to wire up aria-controls.", () => props.panelId != null && !isTabsPattern.value);
 		function handleClick() {
-			if (props.disabled || !context) return;
+			if (props.disabled) return;
 			context.selectTab(props.value);
 		}
 		function handleKeydown(event) {
-			if (props.disabled || !context) return;
-			switch (event.key) {
-				case "ArrowRight":
-				case "ArrowDown":
-					event.preventDefault();
-					context.moveFocus("next", props.value);
-					break;
-				case "ArrowLeft":
-				case "ArrowUp":
-					event.preventDefault();
-					context.moveFocus("prev", props.value);
-					break;
-				case "Home":
-					event.preventDefault();
-					context.moveFocus("first", props.value);
-					break;
-				case "End":
-					event.preventDefault();
-					context.moveFocus("last", props.value);
-			}
+			if (props.disabled) return;
+			const vertical = !isTabsPattern.value;
+			let direction = null;
+			if (event.key === "ArrowRight" || vertical && event.key === "ArrowDown") direction = "next";
+			else if (event.key === "ArrowLeft" || vertical && event.key === "ArrowUp") direction = "prev";
+			else if (event.key === "Home") direction = "first";
+			else if (event.key === "End") direction = "last";
+			if (direction == null) return;
+			event.preventDefault();
+			context.moveFocus(direction, props.value);
 		}
 		onMounted(() => {
-			if (!context || !rootRef.value) return;
+			if (!rootRef.value) return;
 			context.registerTab({
 				value: props.value,
 				disabled: props.disabled,
@@ -103,10 +108,10 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			});
 		});
 		onUnmounted(() => {
-			context?.unregisterTab(props.value);
+			context.unregisterTab(props.value);
 		});
 		watch(() => props.disabled, (disabled) => {
-			if (!context || !rootRef.value) return;
+			if (!rootRef.value) return;
 			context.registerTab({
 				value: props.value,
 				disabled,
@@ -114,13 +119,13 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			});
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(root.value), {
+			return openBlock(), createBlock(resolveDynamicComponent(root.value), mergeProps({
 				id: `astryx-tab-${__props.value}`,
 				ref_key: "rootRef",
 				ref: rootRef,
 				type: isLink.value ? void 0 : "button",
 				role: isTabsPattern.value ? "tab" : void 0,
-				class: normalizeClass(classes.value),
+				class: classes.value,
 				href: isLink.value ? __props.href : void 0,
 				to: isLink.value && customLink.value != null ? __props.href : void 0,
 				"aria-selected": isTabsPattern.value ? isSelected.value : void 0,
@@ -130,16 +135,18 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 				tabindex: tabIndex.value,
 				disabled: isLink.value ? void 0 : __props.disabled,
 				"data-selected": isSelected.value ? "selected" : void 0,
+				"data-tab-value": __props.value
+			}, __props.disabled ? {} : unref(pressableProps), {
 				onClick: handleClick,
 				onKeydown: handleKeydown
-			}, {
+			}), {
 				default: withCtx(() => [
-					_ctx.$slots.icon || _ctx.$slots.selectedIcon ? (openBlock(), createElementBlock("span", _hoisted_1$2, [isSelected.value && _ctx.$slots.selectedIcon ? renderSlot(_ctx.$slots, "selectedIcon", {}, void 0, void 0, 0) : renderSlot(_ctx.$slots, "icon", {}, void 0, void 0, 1)])) : createCommentVNode("v-if", true),
+					_ctx.$slots.icon || _ctx.$slots.selectedIcon ? (openBlock(), createElementBlock("span", _hoisted_1$1, [isSelected.value && _ctx.$slots.selectedIcon ? renderSlot(_ctx.$slots, "selectedIcon", {}, void 0, void 0, 0) : renderSlot(_ctx.$slots, "icon", {}, void 0, void 0, 1)])) : createCommentVNode("v-if", true),
 					createElementVNode("span", { class: normalizeClass(["astryx-tab__label", { "astryx-visually-hidden": __props.isLabelHidden }]) }, [createElementVNode("span", _hoisted_2$1, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]), !__props.isLabelHidden ? (openBlock(), createElementBlock("span", _hoisted_3$1, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])) : createCommentVNode("v-if", true)], 2),
 					_ctx.$slots.endContent ? (openBlock(), createElementBlock("span", _hoisted_4$1, [renderSlot(_ctx.$slots, "endContent")])) : createCommentVNode("v-if", true)
 				]),
 				_: 3
-			}, 40, [
+			}, 16, [
 				"id",
 				"type",
 				"role",
@@ -152,14 +159,105 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 				"aria-label",
 				"tabindex",
 				"disabled",
-				"data-selected"
+				"data-selected",
+				"data-tab-value"
 			]);
 		};
 	}
 });
 //#endregion
+//#region src/TabList/useTabListScroll.ts
+/** 点一次箭头，滚过可见宽度的这一截。和上游的滚动步长一致。 */
+const SCROLL_PAGE_RATIO = .8;
+/**
+* 标签条比容器宽时横向滚动。
+* 选中项或刚获得焦点的项如果被挡住，立刻滚回可见区域，不走平滑滚动。
+*/
+function useTabListScroll(options) {
+	let strip = null;
+	let resizeObserver;
+	let revealedValue = null;
+	const { scrollRef, overflowStart, overflowEnd } = useScrollOverflow();
+	function insetOf(node) {
+		const style = getComputedStyle(node);
+		const raw = style.scrollPaddingInlineStart || style.scrollPaddingLeft;
+		const parsed = Number.parseFloat(raw);
+		return Number.isFinite(parsed) ? parsed : 0;
+	}
+	function readingRtl(node) {
+		return getComputedStyle(node).direction === "rtl";
+	}
+	function revealStop(stop) {
+		if (!options.enabled.value || strip == null || stop == null) return;
+		const stripBox = strip.getBoundingClientRect();
+		const stopBox = stop.getBoundingClientRect();
+		const inset = insetOf(strip);
+		const pastEnd = stopBox.right - (stripBox.right - inset);
+		const pastStart = stopBox.left - (stripBox.left + inset);
+		const delta = stopBox.width > stripBox.width - 2 * inset ? readingRtl(strip) ? pastEnd : pastStart : pastEnd > 0 ? pastEnd : pastStart < 0 ? pastStart : 0;
+		if (delta !== 0) strip.scrollBy({
+			behavior: "instant",
+			left: delta
+		});
+	}
+	function selectedStop() {
+		if (strip == null) return null;
+		const value = CSS.escape(options.selectedValue.value);
+		return strip.querySelector(`[data-tab-value="${value}"]`);
+	}
+	function revealSelected() {
+		revealStop(selectedStop());
+	}
+	function bind(node) {
+		const host = node instanceof HTMLElement ? node : null;
+		resizeObserver?.disconnect();
+		resizeObserver = void 0;
+		strip = host;
+		scrollRef(options.enabled.value ? host : null);
+		if (host == null || !options.enabled.value || typeof ResizeObserver === "undefined") return;
+		resizeObserver = new ResizeObserver(() => revealSelected());
+		resizeObserver.observe(host);
+	}
+	function scrollByPage(direction) {
+		if (strip == null) return;
+		const rtlSign = readingRtl(strip) ? -1 : 1;
+		strip.scrollBy({ left: rtlSign * direction * strip.clientWidth * SCROLL_PAGE_RATIO });
+	}
+	function onFocusIn(event) {
+		const target = event.target;
+		if (!(target instanceof Element) || strip == null || !strip.contains(target)) return;
+		revealStop(target.closest("[data-tab-value], [data-tab-menu]"));
+	}
+	watch(options.enabled, (enabled) => {
+		bind(strip);
+		if (enabled) revealSelected();
+	});
+	watch(options.selectedValue, (value) => {
+		if (!options.enabled.value) {
+			revealedValue = value;
+			return;
+		}
+		if (revealedValue === value) return;
+		revealedValue = value;
+		revealSelected();
+	});
+	onMounted(() => {
+		revealedValue = options.selectedValue.value;
+		if (options.enabled.value) revealSelected();
+	});
+	onScopeDispose(() => {
+		resizeObserver?.disconnect();
+	});
+	return {
+		bind,
+		onFocusIn,
+		overflowEnd,
+		overflowStart,
+		scrollByPage
+	};
+}
+//#endregion
 //#region src/TabList/TabList.vue
-const _hoisted_1$1 = { class: "astryx-tab-list__strip" };
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	__name: "TabList",
 	props: {
@@ -175,6 +273,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			default: false
 		},
 		edgeCompensation: {},
+		overflow: { default: "auto" },
 		role: {}
 	},
 	emits: ["update:value", "change"],
@@ -182,6 +281,11 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const bleedsInline = computed(() => props.edgeCompensation === "inline" || props.edgeCompensation == null && props.isFullBleed);
+		const scrolls = computed(() => props.overflow !== "visible");
+		const { bind: bindStrip, onFocusIn: onStripFocusIn, overflowEnd, overflowStart, scrollByPage } = useTabListScroll({
+			enabled: scrolls,
+			selectedValue: computed(() => props.value)
+		});
 		/** `role="tablist"` switches the strip from a nav landmark to the tabs pattern. */
 		const isTabsPattern = computed(() => props.role === "tablist");
 		const rootTag = computed(() => props.role == null ? "nav" : "div");
@@ -251,14 +355,52 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					bleedsInline.value && "astryx-tab-list--full-bleed"
 				]]),
 				role: __props.role,
-				"aria-label": defaultLabel.value
+				"aria-label": defaultLabel.value,
+				onFocusin: unref(onStripFocusIn)
 			}, {
-				default: withCtx(() => [createElementVNode("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")])]),
+				default: withCtx(() => [
+					createElementVNode("div", {
+						ref: unref(bindStrip),
+						class: normalizeClass(["astryx-tab-list__strip", {
+							"astryx-tab-list__strip--scroll": scrolls.value,
+							"astryx-tab-list__strip--fade-both": scrolls.value && unref(overflowStart) && unref(overflowEnd),
+							"astryx-tab-list__strip--fade-start": scrolls.value && unref(overflowStart) && !unref(overflowEnd),
+							"astryx-tab-list__strip--fade-end": scrolls.value && unref(overflowEnd) && !unref(overflowStart)
+						}])
+					}, [renderSlot(_ctx.$slots, "default")], 2),
+					scrolls.value && unref(overflowStart) ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "astryx-tab-scroll-button astryx-tab-scroll-button--start",
+						"aria-hidden": "true",
+						tabindex: "-1",
+						onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+						onClick: _cache[1] || (_cache[1] = ($event) => unref(scrollByPage)(-1))
+					}, [createVNode(_sfc_main$3, {
+						class: "astryx-tab-scroll-button__icon",
+						icon: "chevronLeft",
+						size: "sm"
+					})], 32)) : createCommentVNode("v-if", true),
+					scrolls.value && unref(overflowEnd) ? (openBlock(), createElementBlock("button", {
+						key: 1,
+						type: "button",
+						class: "astryx-tab-scroll-button astryx-tab-scroll-button--end",
+						"aria-hidden": "true",
+						tabindex: "-1",
+						onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+						onClick: _cache[3] || (_cache[3] = ($event) => unref(scrollByPage)(1))
+					}, [createVNode(_sfc_main$3, {
+						class: "astryx-tab-scroll-button__icon",
+						icon: "chevronRight",
+						size: "sm"
+					})], 32)) : createCommentVNode("v-if", true)
+				]),
 				_: 3
-			}, 8, [
+			}, 40, [
 				"class",
 				"role",
-				"aria-label"
+				"aria-label",
+				"onFocusin"
 			]);
 		};
 	}
@@ -295,7 +437,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
-		const context = inject(tabListContextKey);
+		const context = useTabListContext();
 		const uid = useId();
 		const stopValue = `tab-menu:${uid}`;
 		const menuId = `astryx-tab-menu-${uid}`;
@@ -304,11 +446,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const isOpen = ref(false);
 		const placement = computed(() => "below");
 		const alignment = computed(() => "start");
-		const selectedOption = computed(() => props.options.find((option) => option.value === context?.value.value));
+		const selectedOption = computed(() => props.options.find((option) => option.value === context.value.value));
 		const triggerLabel = computed(() => selectedOption.value?.label ?? props.label);
 		const hasSelectedOption = computed(() => selectedOption.value != null);
-		const sizeClass = computed(() => `astryx-tab--size-${context?.size.value ?? "md"}`);
-		const { position, detach } = usePositionedLayer({
+		const sizeClass = computed(() => `astryx-tab--size-${context.size.value}`);
+		const { position, teleportTarget, detach } = usePositionedLayer({
 			alignment,
 			anchor: anchorRef,
 			gap: 4,
@@ -332,7 +474,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			trigger: anchorRef
 		});
 		function register() {
-			if (!context || anchorRef.value == null) return;
+			if (anchorRef.value == null) return;
 			context.registerTab({
 				disabled: false,
 				el: anchorRef.value,
@@ -344,11 +486,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			isOpen.value = !isOpen.value;
 		}
 		function select(value) {
-			context?.selectTab(value);
+			context.selectTab(value);
 			isOpen.value = false;
 		}
 		function onTriggerKeyDown(event) {
-			if (!context || isOpen.value) return;
+			if (isOpen.value) return;
 			switch (event.key) {
 				case "ArrowRight":
 				case "ArrowDown":
@@ -396,7 +538,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		onMounted(register);
 		onUnmounted(() => {
-			context?.unregisterTab(stopValue);
+			context.unregisterTab(stopValue);
 			detach();
 		});
 		return (_ctx, _cache) => {
@@ -408,11 +550,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				class: normalizeClass(["astryx-tab astryx-tab-menu", [sizeClass.value, hasSelectedOption.value && "astryx-tab--selected"]]),
 				"data-tab-menu": "",
 				"aria-controls": menuId,
-				"aria-current": !unref(context)?.isTabsPattern.value && hasSelectedOption.value ? "true" : void 0,
-				"aria-selected": unref(context)?.isTabsPattern.value ? hasSelectedOption.value : void 0,
+				"aria-current": !unref(context).isTabsPattern.value && hasSelectedOption.value ? "true" : void 0,
+				"aria-selected": unref(context).isTabsPattern.value ? hasSelectedOption.value : void 0,
 				"aria-haspopup": "menu",
 				"aria-expanded": isOpen.value,
-				role: unref(context)?.isTabsPattern.value ? "tab" : void 0,
+				role: unref(context).isTabsPattern.value ? "tab" : void 0,
 				tabindex: hasSelectedOption.value ? 0 : -1,
 				onClick: toggle,
 				onKeydown: onTriggerKeyDown
@@ -422,7 +564,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				color: "inherit",
 				icon: "chevronDown",
 				size: "sm"
-			}, null, 8, ["data-state"])], 42, _hoisted_1), (openBlock(), createBlock(Teleport, { to: "body" }, [isOpen.value ? (openBlock(), createElementBlock("div", {
+			}, null, 8, ["data-state"])], 42, _hoisted_1), (openBlock(), createBlock(Teleport, { to: unref(teleportTarget) }, [isOpen.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				id: menuId,
 				ref_key: "surfaceRef",
@@ -441,22 +583,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				return openBlock(), createElementBlock("div", {
 					key: option.value,
 					class: "astryx-tab-menu-item",
-					"data-selected": option.value === unref(context)?.value.value || void 0,
+					"data-selected": option.value === unref(context).value.value || void 0,
 					role: "menuitemradio",
-					"aria-checked": option.value === unref(context)?.value.value,
+					"aria-checked": option.value === unref(context).value.value,
 					tabindex: "-1",
 					onClick: ($event) => select(option.value),
 					onKeydown: ($event) => onItemKeyDown($event, option.value)
 				}, [createElementVNode("span", _hoisted_6, [option.iconClass ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					class: normalizeClass(["astryx-tab-menu-icon", option.iconClass])
-				}, null, 2)) : createCommentVNode("v-if", true), createTextVNode(" " + toDisplayString(option.label), 1)]), option.value === unref(context)?.value.value ? (openBlock(), createBlock(_sfc_main$3, {
+				}, null, 2)) : createCommentVNode("v-if", true), createTextVNode(" " + toDisplayString(option.label), 1)]), option.value === unref(context).value.value ? (openBlock(), createBlock(_sfc_main$3, {
 					key: 0,
 					color: "accent",
 					icon: "check",
 					size: "sm"
 				})) : createCommentVNode("v-if", true)], 40, _hoisted_5);
-			}), 128))], 44, _hoisted_3)) : createCommentVNode("v-if", true)]))], 64);
+			}), 128))], 44, _hoisted_3)) : createCommentVNode("v-if", true)], 8, ["to"]))], 64);
 		};
 	}
 });

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-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 };
+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-CpNlPLBF.js";
+import { A as TablePanelPatch, B as TableSortDirection, C as TableFilterField, D as TableFilterVariant, E as TableFilterValue, F as TableRowPatch, G as TableSelectedKeysSetter, H as TableSortState, I as TableRowProps, J as UseTableSelectionStateConfig, K as TableSelectionState, L as TableSelectionToolbarProps, M as TableProps, N as TableRowListeners, O as TableGroupPatch, P as TableRowMenuItem, R as TableSelectionToolbarSlots, S as TableDividers, T as TableFilterState, U as TableTextOverflow, V as TableSortEntry, W as TableVerticalAlign, X as useTableSelectionState, Y as useTableSelection, _ 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 UseTableSelectionConfig, v as TableColumn, w as TableFilterFieldType, x as TableDensity, y as TableColumnAlign } from "../useResizable-1MHPNaRD.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 TableRowListeners, 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-fecqnm7P.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-BcrrylMX.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 };