@astryx-vue/core 0.2.5 → 0.3.0

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

@@ -1,5 +1,6 @@
-import { t as _sfc_main$3 } from "./Stack-gGcYdOAh.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({
@@ -18,7 +19,11 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 		minHeight: {},
 		padding: {},
 		paddingBlock: {},
+		paddingBlockEnd: {},
+		paddingBlockStart: {},
 		paddingInline: {},
+		paddingInlineEnd: {},
+		paddingInlineStart: {},
 		width: {},
 		wrap: {}
 	},
@@ -48,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,
@@ -90,7 +101,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		minHeight: {},
 		padding: {},
 		paddingBlock: {},
+		paddingBlockEnd: {},
+		paddingBlockStart: {},
 		paddingInline: {},
+		paddingInlineEnd: {},
+		paddingInlineStart: {},
 		width: {},
 		wrap: {}
 	},

package/dist/{Stack-gGcYdOAh.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({
@@ -21,7 +22,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		minHeight: {},
 		padding: {},
 		paddingBlock: {},
+		paddingBlockEnd: {},
+		paddingBlockStart: {},
 		paddingInline: {},
+		paddingInlineEnd: {},
+		paddingInlineStart: {},
 		vAlign: {},
 		width: {},
 		wrap: { default: "nowrap" }
@@ -29,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)",
@@ -52,22 +59,30 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const crossAlign = computed(() => props.direction === "horizontal" ? resolvedVAlign.value : resolvedHAlign.value);
 		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
 		const rootClass = computed(() => ["astryx-stack", attrs.class]);
+		function spacingValue(step) {
+			return step == null ? void 0 : spacingVariables[step];
+		}
 		const rootStyle = computed(() => {
-			const paddingInline = props.paddingInline ?? props.padding;
-			const paddingBlock = props.paddingBlock ?? props.padding;
 			const stackStyle = {
 				height: formatSize(props.height),
 				maxWidth: formatSize(props.maxWidth),
 				minHeight: formatSize(props.minHeight),
 				width: formatSize(props.width)
 			};
-			stackStyle["--astryx-stack-gap"] = props.gap == null ? void 0 : spacingVariables[props.gap];
-			stackStyle["--astryx-stack-padding-block"] = paddingBlock == null ? void 0 : spacingVariables[paddingBlock];
-			stackStyle["--astryx-stack-padding-inline"] = paddingInline == null ? void 0 : spacingVariables[paddingInline];
+			stackStyle["--astryx-stack-gap"] = spacingValue(props.gap);
+			stackStyle["--astryx-stack-padding-block"] = spacingValue(props.paddingBlock ?? props.padding);
+			stackStyle["--astryx-stack-padding-block-start"] = spacingValue(props.paddingBlockStart);
+			stackStyle["--astryx-stack-padding-block-end"] = spacingValue(props.paddingBlockEnd);
+			stackStyle["--astryx-stack-padding-inline"] = spacingValue(props.paddingInline ?? props.padding);
+			stackStyle["--astryx-stack-padding-inline-start"] = spacingValue(props.paddingInlineStart);
+			stackStyle["--astryx-stack-padding-inline-end"] = spacingValue(props.paddingInlineEnd);
 			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/StatusDot/index.d.ts

@@ -1,2 +1,2 @@
-import { n as StatusDotProps, r as StatusDotVariant, t as _default } from "../index-BmAxqw1G.js";
+import { n as StatusDotProps, r as StatusDotVariant, t as _default } from "../index-DG52Bg0W.js";
 export { _default as StatusDot, type StatusDotProps, type StatusDotVariant };

package/dist/StatusDot/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../StatusDot-CaoIapp4.js";
+import { t as _sfc_main } from "../StatusDot-BPUhMOff.js";
 export { _sfc_main as StatusDot };

package/dist/StatusDot-BPUhMOff.js

@@ -0,0 +1,45 @@
+import { t as _sfc_main$1 } from "./Tooltip-C4Vaqd3G.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
+import "../styles/status-dot.css";
+//#region src/StatusDot/StatusDot.vue
+const _hoisted_1 = ["data-variant", "aria-label"];
+const _hoisted_2 = {
+	key: 0,
+	class: "astryx-status-dot__icon",
+	"aria-hidden": "true"
+};
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxStatusDot",
+	__name: "StatusDot",
+	props: {
+		variant: { default: "neutral" },
+		label: {},
+		isPulsing: {
+			type: Boolean,
+			default: false
+		},
+		tooltip: {}
+	},
+	setup(__props) {
+		const props = __props;
+		/** Renders the child as-is, so the dot keeps its own root element. */
+		const Passthrough = defineComponent({ setup(_props, { slots }) {
+			return () => slots.default?.();
+		} });
+		const wrapper = computed(() => props.tooltip ? _sfc_main$1 : Passthrough);
+		const wrapperProps = computed(() => props.tooltip ? { content: props.tooltip } : {});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(wrapper.value), normalizeProps(guardReactiveProps(wrapperProps.value)), {
+				default: withCtx(() => [createElementVNode("span", {
+					class: normalizeClass(["astryx-status-dot", { "astryx-status-dot--pulsing": __props.isPulsing }]),
+					"data-variant": __props.variant,
+					role: "img",
+					"aria-label": __props.label
+				}, [_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("v-if", true)], 10, _hoisted_1)]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

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/Stepper/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../Stepper-BqhVCgC-.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../Stepper-CE8dHysu.js";
 export { _sfc_main as Step, _sfc_main$1 as Stepper };

package/dist/{Stepper-BqhVCgC-.js → Stepper-CE8dHysu.js}

@@ -1,5 +1,5 @@
 import { t as _sfc_main$3 } from "./VisuallyHidden-C7NN3VEP.js";
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, onMounted, onUnmounted, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/stepper.css";
 //#region src/Stepper/context.ts

package/dist/Switch/index.d.ts

@@ -1,2 +1,2 @@
-import { At as SwitchChangeEvent, Ft as SwitchStatus, It as SwitchStatusType, Mt as SwitchProps, Nt as SwitchSize, Ot as _default, Pt as SwitchSlots, jt as SwitchEmits, kt as SwitchChangeAction } from "../index-B9rqmYxh.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/Switch/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Switch-SesQzPGZ.js";
+import { t as _sfc_main } from "../Switch-DaVPRxvN.js";
 export { _sfc_main as Switch };

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

@@ -1,8 +1,8 @@
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip } from "./Button-DrqeomlE.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-DmmJyX7w.js";
+import { t as _sfc_main$3 } from "./FieldLabel-BNeXRuGH.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

package/dist/TabList/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TabListProps, c as TabMenuOption, 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-C-QpeUlQ.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 };
+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/TabList/index.js

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

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

@@ -1,44 +1,73 @@
-import { t as useDismiss } from "./useDismiss-Cj8x_51F.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 usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.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, toDisplayString, unref, useId, watch } from "vue";
+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 "../styles/visually-hidden-utility.css";
 import "../styles/tab-list.css";
 import "../styles/tab-menu.css";
 //#region src/TabList/context.ts
 const tabListContextKey = Symbol("tabListContext");
 //#endregion
 //#region src/TabList/Tab.vue
-const _hoisted_1$2 = [
-	"id",
-	"aria-selected",
-	"aria-controls",
-	"tabindex",
-	"disabled"
-];
-const _hoisted_2$1 = { class: "astryx-tab__label" };
+const _hoisted_1$2 = {
+	key: 0,
+	class: "astryx-tab__icon",
+	"aria-hidden": "true"
+};
+const _hoisted_2$1 = { class: "astryx-tab__label-text" };
+const _hoisted_3$1 = {
+	key: 0,
+	class: "astryx-tab__label-sizer",
+	"aria-hidden": "true"
+};
+const _hoisted_4$1 = {
+	key: 1,
+	class: "astryx-tab__end"
+};
 const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTab",
 	__name: "Tab",
 	props: {
 		value: {},
+		label: {},
 		panelId: {},
 		disabled: {
 			type: Boolean,
 			default: false
+		},
+		href: {},
+		as: {},
+		isLabelHidden: {
+			type: Boolean,
+			default: false
 		}
 	},
 	setup(__props) {
 		const props = __props;
 		const context = inject(tabListContextKey);
+		const linkComponent = useLinkComponent();
 		const rootRef = ref();
+		const isTabsPattern = computed(() => context?.isTabsPattern.value ?? false);
 		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);
+		/** 自己的 `as` 优先，其次是 LinkProvider 给的默认链接组件。 */
+		const customLink = computed(() => props.as ?? linkComponent.value);
+		const root = computed(() => {
+			if (isLink.value) return customLink.value == null ? "a" : toRaw(customLink.value);
+			return "button";
+		});
 		const classes = computed(() => [
 			"astryx-tab",
 			`astryx-tab--size-${context?.size.value ?? "md"}`,
 			isSelected.value && "astryx-tab--selected",
-			props.disabled && "astryx-tab--disabled"
+			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;
 			context.selectTab(props.value);
@@ -85,20 +114,46 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			});
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", {
+			return openBlock(), createBlock(resolveDynamicComponent(root.value), {
 				id: `astryx-tab-${__props.value}`,
 				ref_key: "rootRef",
 				ref: rootRef,
-				type: "button",
-				role: "tab",
+				type: isLink.value ? void 0 : "button",
+				role: isTabsPattern.value ? "tab" : void 0,
 				class: normalizeClass(classes.value),
-				"aria-selected": isSelected.value,
-				"aria-controls": __props.panelId,
+				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,
+				"aria-current": isTabsPattern.value ? void 0 : isSelected.value ? "true" : void 0,
+				"aria-controls": isTabsPattern.value ? __props.panelId : void 0,
+				"aria-label": __props.isLabelHidden ? __props.label : void 0,
 				tabindex: tabIndex.value,
-				disabled: __props.disabled,
+				disabled: isLink.value ? void 0 : __props.disabled,
+				"data-selected": isSelected.value ? "selected" : void 0,
 				onClick: handleClick,
 				onKeydown: handleKeydown
-			}, [createElementVNode("span", _hoisted_2$1, [renderSlot(_ctx.$slots, "default")])], 42, _hoisted_1$2);
+			}, {
+				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),
+					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, [
+				"id",
+				"type",
+				"role",
+				"class",
+				"href",
+				"to",
+				"aria-selected",
+				"aria-current",
+				"aria-controls",
+				"aria-label",
+				"tabindex",
+				"disabled",
+				"data-selected"
+			]);
 		};
 	}
 });
@@ -119,13 +174,20 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: false
 		},
-		edgeCompensation: {}
+		edgeCompensation: {},
+		role: {}
 	},
 	emits: ["update:value", "change"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const bleedsInline = computed(() => props.edgeCompensation === "inline" || props.edgeCompensation == null && props.isFullBleed);
+		/** `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");
+		const messages = useAstryxMessages();
+		/** 导航模式的标签条是个 landmark，没有名字读屏没法区分；调用方用 `aria-label` 覆盖。 */
+		const defaultLabel = computed(() => props.role == null ? messages.value.tabList.label : void 0);
 		const tabs = reactive([]);
 		const focusedValue = ref(props.value);
 		const enabledTabs = computed(() => tabs.filter((tab) => !tab.disabled));
@@ -172,6 +234,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			size: computed(() => props.size),
 			layout: computed(() => props.layout),
 			hasDivider: computed(() => props.hasDivider),
+			isTabsPattern,
 			tabs,
 			focusedValue,
 			registerTab,
@@ -180,15 +243,23 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			moveFocus
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
+			return openBlock(), createBlock(resolveDynamicComponent(rootTag.value), {
 				class: normalizeClass(["astryx-tab-list", [
 					`astryx-tab-list--size-${__props.size}`,
 					`astryx-tab-list--layout-${__props.layout}`,
 					__props.hasDivider && "astryx-tab-list--has-divider",
 					bleedsInline.value && "astryx-tab-list--full-bleed"
 				]]),
-				role: "tablist"
-			}, [createElementVNode("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")])], 2);
+				role: __props.role,
+				"aria-label": defaultLabel.value
+			}, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")])]),
+				_: 3
+			}, 8, [
+				"class",
+				"role",
+				"aria-label"
+			]);
 		};
 	}
 });
@@ -196,7 +267,10 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 //#region src/TabList/TabMenu.vue
 const _hoisted_1 = [
 	"id",
+	"aria-current",
+	"aria-selected",
 	"aria-expanded",
+	"role",
 	"tabindex"
 ];
 const _hoisted_2 = { class: "astryx-tab__label" };
@@ -334,8 +408,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-haspopup": "menu",
 				"aria-expanded": isOpen.value,
+				role: unref(context)?.isTabsPattern.value ? "tab" : void 0,
 				tabindex: hasSelectedOption.value ? 0 : -1,
 				onClick: toggle,
 				onKeydown: onTriggerKeyDown

package/dist/Table/index.d.ts

@@ -1,3 +1,3 @@
-import { C as TableSortEntry, E as TableVerticalAlign, S as TableSortDirection, T as TableTextOverflow, _ as TableProps, a as TableCellProps, b as TableRowProps, c as TableDensity, d as TableFilterState, f as TableFilterValue, g as TablePlugin, h as TablePanelPatch, i as TableCellPatch, l as TableDividers, m as TableHeaderPatch, n as PixelWidth, o as TableColumn, p as TableGroupPatch, r as ProportionalWidth, s as TableColumnAlign, t as ColumnWidth, u as TableFilterField, v as TableRowMenuItem, w as TableSortState, y as TableRowPatch } from "../types-Cp4liug-.js";
-import { $ as UseTableColumnResizeConfig, A as TableRowStatusName, B as isInteractiveRowClick, C as UseTableSelectionConfig, D as TableCustomRowStatus, E as useTableSelectionState, F as useTableRowIndex, G as UseTableFilteringConfig, H as buildGroupedRows, I as UseTableRowExpansionConfig, J as useTableFiltering, K as applyTableFilters, L as useTableRowExpansion, M as UseTableRowStatusConfig, N as useTableRowStatus, O as TableRowStatus, P as UseTableRowIndexConfig, Q as useTableColumnSettingsState, R as UseTablePaginationConfig, S as useTableSortableState, T as useTableSelection, U as isTableGroupHeader, V as UseTableGroupedRowsConfig, W as useTableGroupedRows, X as UseTableColumnSettingsConfig, Y as ColumnSettingsOption, Z as useTableColumnSettings, _ as resolveStickySide, a as _default$3, at as pixel, b as UseTableSortableConfig, c as _default, ct as resolveColumnWidths, d as UseTableTreeStateConfig, et as useTableColumnResize, f as flattenTree, g as UseTableStickyColumnsConfig, h as StickySide, i as _default$4, it as paginateData, j as TableSemanticRowStatus, k as TableRowStatusColor, l as TableTreeRowMeta, lt as sortRows, m as useTableTreeState, n as _default$6, nt as cellText, o as _default$2, ot as proportional, p as useTableTreeData, q as useTableFilterState, r as _default$5, rt as generateColumns, s as _default$1, st as resolveColumnFloorWidths, t as _default$7, tt as capitalize, u as UseTableTreeDataConfig, v as stickyOffsets, w as UseTableSelectionStateConfig, x as useTableSortable, y as useTableStickyColumns, z as useTablePagination } from "../index-CngORuiq.js";
-export { 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 TableCustomRowStatus, type TableDensity, type TableDividers, type TableFilterField, type TableFilterState, type TableFilterValue, _default$3 as TableFooter, type TableGroupPatch, _default$4 as TableHeader, _default$5 as TableHeaderCell, type TableHeaderPatch, type TablePanelPatch, type TablePlugin, type TableProps, _default$6 as TableRow, type TableRowMenuItem, type TableRowPatch, type TableRowProps, type TableRowStatus, type TableRowStatusColor, type TableRowStatusName, _default$7 as TableSelectionToolbar, type TableSemanticRowStatus, type TableSortDirection, type TableSortEntry, type TableSortState, type TableTextOverflow, type TableTreeRowMeta, type TableVerticalAlign, type UseTableColumnResizeConfig, type UseTableColumnSettingsConfig, 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, flattenTree, generateColumns, isInteractiveRowClick, isTableGroupHeader, paginateData, paginateData as paginateTableData, pixel, proportional, 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-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 resolveColumnWidths, C as isInteractiveRowClick, D as applyTableFilters, E as useTableGroupedRows, F as generateColumns, I as paginateData, L as pixel, M as useTableColumnResize, N as capitalize, O as useTableFilterState, P as cellText, R as proportional, S as useTablePagination, T as isTableGroupHeader, V as sortRows, _ 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 resolveColumnFloorWidths } from "../Table-CsdH8fCB.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, flattenTree, generateColumns, isInteractiveRowClick, isTableGroupHeader, paginateData, paginateData as paginateTableData, pixel, proportional, resolveColumnFloorWidths, resolveColumnWidths, resolveStickySide, sortRows, stickyOffsets, useTableColumnResize, useTableColumnSettings, useTableColumnSettingsState, useTableFilterState, useTableFiltering, useTableGroupedRows, useTablePagination, useTableRowExpansion, useTableRowIndex, useTableRowStatus, useTableSelection, useTableSelectionState, useTableSortable, useTableSortableState, useTableStickyColumns, useTableTreeData, useTableTreeState };
+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 };