@astryx-vue/core 0.1.0 → 0.1.3

package/dist/{SideNav-D9lnn-sM.js → SideNav-Cdrigq2A.js}

@@ -1,25 +1,14 @@
 import { t as useHotkeys } from "./useHotkeys-dABSK1o9.js";
-import { a as useAstryxMessages } from "./locale-56lkR7OK.js";
-import { t as _sfc_main$5 } from "./Icon-B6qNgBP9.js";
+import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { i as useSideNavRenderMode, r as useSideNavCollapse, t as sideNavCollapseKey } from "./context-BjNya0v8.js";
+import { t as _sfc_main$5 } from "./Icon-5MdZQ18k.js";
 import { n as resolveNavRoot } from "./link-CdcUSxAj.js";
 import { t as _sfc_main$6 } from "./NavItem-FFOisITc.js";
 import { t as _sfc_main$7 } from "./NavDisclosure-DHrSNRDR.js";
 import { t as _sfc_main$8 } from "./Tooltip-mp0NMh_Y.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, normalizeClass, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, watch, withCtx, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, normalizeClass, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, watch, withCtx, withModifiers } from "vue";
 import "../styles/visually-hidden.css";
 import "../styles/side-nav.css";
-//#region src/SideNav/context.ts
-const sideNavCollapseKey = Symbol("astryx-side-nav-collapse");
-const fallbackCollapse = {
-	isCollapsed: ref(false),
-	isCollapsible: ref(false),
-	navId: "",
-	toggle: () => {}
-};
-function useSideNavCollapse() {
-	return inject(sideNavCollapseKey, fallbackCollapse);
-}
-//#endregion
 //#region src/SideNav/SideNavCollapseButton.vue
 const _hoisted_1$4 = [
 	"aria-label",
@@ -76,17 +65,22 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 });
 //#endregion
 //#region src/SideNav/SideNav.vue
-const _hoisted_1$3 = ["aria-label", "data-collapsed"];
+const _hoisted_1$3 = {
+	key: 0,
+	class: "astryx-side-nav astryx-side-nav--topbar",
+	"data-mode": "topbar"
+};
 const _hoisted_2$3 = {
 	key: 0,
-	class: "astryx-side-nav__top"
+	class: "astryx-side-nav__topbar-icons"
 };
 const _hoisted_3$3 = {
-	key: 0,
-	class: "astryx-side-nav__heading-row"
+	key: 1,
+	class: "astryx-side-nav astryx-side-nav--drawer",
+	"data-mode": "drawer"
 };
 const _hoisted_4$3 = {
-	key: 1,
+	key: 0,
 	class: "astryx-side-nav__top-content"
 };
 const _hoisted_5$2 = { class: "astryx-side-nav__body" };
@@ -98,6 +92,28 @@ const _hoisted_7$2 = {
 	key: 0,
 	class: "astryx-side-nav__footer-icons"
 };
+const _hoisted_8$2 = ["aria-label", "data-collapsed"];
+const _hoisted_9$1 = {
+	key: 0,
+	class: "astryx-side-nav__top"
+};
+const _hoisted_10$1 = {
+	key: 0,
+	class: "astryx-side-nav__heading-row"
+};
+const _hoisted_11$1 = {
+	key: 1,
+	class: "astryx-side-nav__top-content"
+};
+const _hoisted_12$1 = { class: "astryx-side-nav__body" };
+const _hoisted_13$1 = {
+	key: 1,
+	class: "astryx-side-nav__bottom"
+};
+const _hoisted_14$1 = {
+	key: 0,
+	class: "astryx-side-nav__footer-icons"
+};
 const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 	name: "AstryxSideNav",
 	__name: "SideNav",
@@ -132,6 +148,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		const hasTop = computed(() => slots.header != null || slots.top != null || showButton.value);
 		const hasBottom = computed(() => slots.footer != null || slots.footerIcons != null);
 		const label = computed(() => props.label || messages.value.nav.sideNav);
+		const renderMode = useSideNavRenderMode();
 		watch(() => config.value.defaultIsCollapsed, (value) => {
 			if (value != null && props.isCollapsed === void 0 && config.value.isCollapsed === void 0) localCollapsed.value = value;
 		}, { immediate: true });
@@ -159,19 +176,24 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 			toggle
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("nav", {
+			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")]),
+				hasBottom.value ? (openBlock(), createElementBlock("div", _hoisted_6$2, [renderSlot(_ctx.$slots, "footer"), slots.footerIcons ? (openBlock(), createElementBlock("div", _hoisted_7$2, [renderSlot(_ctx.$slots, "footerIcons")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
+			])) : (openBlock(), createElementBlock("nav", {
+				key: 2,
 				id: navId,
 				class: normalizeClass(["astryx-side-nav", { "astryx-side-nav--collapsed": isCollapsed.value }]),
 				"aria-label": label.value,
 				"data-collapsed": isCollapsed.value || void 0
 			}, [
-				hasTop.value ? (openBlock(), createElementBlock("div", _hoisted_2$3, [slots.header || showButton.value ? (openBlock(), createElementBlock("div", _hoisted_3$3, [renderSlot(_ctx.$slots, "header"), showButton.value ? (openBlock(), createBlock(_sfc_main$4, {
+				hasTop.value ? (openBlock(), createElementBlock("div", _hoisted_9$1, [slots.header || showButton.value ? (openBlock(), createElementBlock("div", _hoisted_10$1, [renderSlot(_ctx.$slots, "header"), showButton.value ? (openBlock(), createBlock(_sfc_main$4, {
 					key: 0,
 					label: config.value.buttonLabel
-				}, null, 8, ["label"])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), slots.top ? (openBlock(), createElementBlock("div", _hoisted_4$3, [renderSlot(_ctx.$slots, "top")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
-				createElementVNode("div", _hoisted_5$2, [renderSlot(_ctx.$slots, "default")]),
-				hasBottom.value ? (openBlock(), createElementBlock("div", _hoisted_6$2, [renderSlot(_ctx.$slots, "footer"), slots.footerIcons ? (openBlock(), createElementBlock("div", _hoisted_7$2, [renderSlot(_ctx.$slots, "footerIcons")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
-			], 10, _hoisted_1$3);
+				}, null, 8, ["label"])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), slots.top ? (openBlock(), createElementBlock("div", _hoisted_11$1, [renderSlot(_ctx.$slots, "top")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
+				createElementVNode("div", _hoisted_12$1, [renderSlot(_ctx.$slots, "default")]),
+				hasBottom.value ? (openBlock(), createElementBlock("div", _hoisted_13$1, [renderSlot(_ctx.$slots, "footer"), slots.footerIcons ? (openBlock(), createElementBlock("div", _hoisted_14$1, [renderSlot(_ctx.$slots, "footerIcons")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
+			], 10, _hoisted_8$2));
 		};
 	}
 });
@@ -774,4 +796,4 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-export { _sfc_main$4 as a, _sfc_main$3 as i, _sfc_main$1 as n, useSideNavCollapse as o, _sfc_main$2 as r, _sfc_main as t };
+export { _sfc_main$4 as a, _sfc_main$3 as i, _sfc_main$1 as n, _sfc_main$2 as r, _sfc_main as t };

package/dist/Slider/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Slider-DTnWxtnb.js";
+import { t as _sfc_main } from "../Slider-D8h_RKcF.js";
 export { _sfc_main as Slider };

package/dist/{Slider-DTnWxtnb.js → Slider-D8h_RKcF.js}

@@ -1,7 +1,7 @@
 import { t as _sfc_main$2 } from "./VisuallyHidden-C7NN3VEP.js";
 import { n as useButtonTooltip } from "./Button-DrqeomlE.js";
 import { t as _sfc_main$3 } from "./ButtonTooltip-nWWrth8j.js";
-import { t as _sfc_main$4 } from "./Field-VlTBsIEo.js";
+import { t as _sfc_main$4 } from "./Field-8zRxzDHE.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeStyle, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx, withKeys } from "vue";
 import "../styles/button.css";
 import "../styles/slider.css";

package/dist/Stack/index.d.ts

@@ -1,3 +1,3 @@
 import { a as StackDirection, c as StackItemProps, d as StackProps, f as StackSizeValue, i as StackCrossAlignment, l as StackItemSize, m as VStackProps, n as SpacingStep, o as StackElement, p as StackWrap, r as StackAlignment, s as StackItemCrossAlignSelf, t as HStackProps, u as StackMainAlignment } from "../types-D7QNSqoN.js";
-import { i as _default, n as _default$2, r as _default$1, t as _default$3 } from "../index-MPcg1Pm4.js";
+import { i as _default, n as _default$2, r as _default$1, t as _default$3 } from "../index-BKr7yvVv.js";
 export { _default as HStack, type HStackProps, type SpacingStep, _default$1 as Stack, type StackAlignment, type StackCrossAlignment, type StackDirection, type StackElement, _default$2 as StackItem, type StackItemCrossAlignSelf, type StackItemProps, type StackItemSize, type StackMainAlignment, type StackProps, type StackSizeValue, type StackWrap, _default$3 as VStack, type VStackProps };

package/dist/Stepper/index.d.ts

@@ -0,0 +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-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

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

package/dist/Stepper-DxmLfh8O.js

@@ -0,0 +1,423 @@
+import { t as _sfc_main$3 } from "./VisuallyHidden-C7NN3VEP.js";
+import { a as useAstryxMessages } from "./context-D6ECRdc5.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
+const stepperContextKey = Symbol("stepper");
+function shouldCollapseStepper(width, count, minimumStepWidth, orientation) {
+	if (orientation !== "horizontal" || count < 1) return false;
+	return width < count * (minimumStepWidth ?? 112);
+}
+function resolveStepGlyph(options) {
+	if (options.status === "warning") return "warning";
+	if (options.status === "error") return "error";
+	if (options.status === "success" || options.status == null && options.progress === "completed" && options.indicator === "auto") return "check";
+	if (options.indicator === "none") return "none";
+	if (options.indicator === "number" || options.indicator === "auto" && options.progress === "not-started") return "number";
+	if (options.indicator === "auto" && options.progress === "in-progress") return "ring";
+	return "none";
+}
+//#endregion
+//#region src/Stepper/StepMarker.vue
+const _hoisted_1$2 = ["data-glyph"];
+const _hoisted_2$2 = {
+	key: 0,
+	viewBox: "0 0 16 16"
+};
+const _hoisted_3$2 = {
+	key: 1,
+	viewBox: "0 0 16 16"
+};
+const _hoisted_4$2 = {
+	key: 2,
+	viewBox: "0 0 16 16"
+};
+const _hoisted_5$2 = {
+	key: 3,
+	viewBox: "0 0 16 16"
+};
+const _hoisted_6$2 = { key: 4 };
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	name: "AstryxStepMarker",
+	__name: "StepMarker",
+	props: {
+		glyph: {},
+		numberLabel: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return __props.glyph !== "none" ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: "astryx-step-indicator",
+				"data-glyph": __props.glyph,
+				"aria-hidden": "true"
+			}, [__props.glyph === "warning" ? (openBlock(), createElementBlock("svg", _hoisted_2$2, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+				d: "M8 1.8 14.5 14H1.5L8 1.8z",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "1.5"
+			}, null, -1), createElementVNode("path", {
+				d: "M8 6.2v4.2",
+				stroke: "currentColor",
+				"stroke-linecap": "round"
+			}, null, -1)])])) : __props.glyph === "error" ? (openBlock(), createElementBlock("svg", _hoisted_3$2, [..._cache[1] || (_cache[1] = [createElementVNode("circle", {
+				cx: "8",
+				cy: "8",
+				r: "6",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "1.5"
+			}, null, -1), createElementVNode("path", {
+				d: "M5.5 5.5l5 5M10.5 5.5l-5 5",
+				stroke: "currentColor",
+				"stroke-linecap": "round"
+			}, null, -1)])])) : __props.glyph === "check" ? (openBlock(), createElementBlock("svg", _hoisted_4$2, [..._cache[2] || (_cache[2] = [createElementVNode("circle", {
+				cx: "8",
+				cy: "8",
+				r: "8",
+				fill: "currentColor"
+			}, null, -1), createElementVNode("path", {
+				d: "M4.4 8.2 6.7 10.5 11.7 5.5",
+				fill: "none",
+				stroke: "var(--astryx-color-background-surface, #fff)",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				"stroke-width": "1.6"
+			}, null, -1)])])) : __props.glyph === "ring" ? (openBlock(), createElementBlock("svg", _hoisted_5$2, [..._cache[3] || (_cache[3] = [createElementVNode("circle", {
+				cx: "8",
+				cy: "8",
+				r: "5.25",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "1.5"
+			}, null, -1), createElementVNode("circle", {
+				cx: "8",
+				cy: "8",
+				r: "2.25",
+				fill: "currentColor"
+			}, null, -1)])])) : (openBlock(), createElementBlock("span", _hoisted_6$2, toDisplayString(__props.numberLabel), 1))], 8, _hoisted_1$2)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/Stepper/Step.vue
+const _hoisted_1$1 = [
+	"aria-current",
+	"data-density",
+	"data-indicator-position",
+	"data-orientation",
+	"data-progress",
+	"data-status"
+];
+const _hoisted_2$1 = ["data-filled"];
+const _hoisted_3$1 = {
+	key: 1,
+	class: "astryx-step-rail"
+};
+const _hoisted_4$1 = ["data-filled"];
+const _hoisted_5$1 = ["data-filled"];
+const _hoisted_6$1 = ["data-glyph"];
+const _hoisted_7$1 = { class: "astryx-step-copy" };
+const _hoisted_8$1 = { class: "astryx-step-label-row" };
+const _hoisted_9$1 = { class: "astryx-step-label" };
+const _hoisted_10 = {
+	key: 1,
+	class: "astryx-step-optional"
+};
+const _hoisted_11 = {
+	key: 0,
+	class: "astryx-step-description"
+};
+const _hoisted_12 = {
+	key: 2,
+	class: "astryx-step-content"
+};
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxStep",
+	__name: "Step",
+	props: {
+		step: {},
+		label: {},
+		description: {},
+		status: {},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		isOptional: {
+			type: Boolean,
+			default: false
+		},
+		indicator: { default: "auto" },
+		density: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const stepper = inject(stepperContextKey);
+		const messages = useAstryxMessages();
+		const progress = computed(() => {
+			const active = stepper?.activeStep.value ?? 0;
+			if (props.step === active) return "in-progress";
+			if (props.step < active) return "completed";
+			return "not-started";
+		});
+		const density = computed(() => props.density ?? stepper?.density.value ?? "balanced");
+		const orientation = computed(() => stepper?.orientation.value ?? "horizontal");
+		const indicatorPosition = computed(() => stepper?.indicatorPosition.value ?? "separated");
+		const isClickable = computed(() => stepper?.isNonLinear.value === true && !props.isDisabled);
+		const numberLabel = computed(() => String(props.step + 1));
+		const glyph = computed(() => resolveStepGlyph({
+			progress: progress.value,
+			indicator: props.indicator,
+			status: props.status
+		}));
+		const collapsed = computed(() => stepper?.collapsed.value === true);
+		const leadFilled = computed(() => props.step <= (stepper?.activeStep.value ?? 0));
+		const trailFilled = computed(() => props.step < (stepper?.activeStep.value ?? 0));
+		const accessibleName = computed(() => {
+			const stepNumber = props.step + 1;
+			const status = props.status === "error" ? messages.value.stepper.status.error : props.status === "warning" ? messages.value.stepper.status.warning : progress.value === "completed" ? messages.value.stepper.status.completed : null;
+			if (status == null) return messages.value.stepper.goToStep(stepNumber);
+			return messages.value.stepper.goToStepWithStatus(stepNumber, status);
+		});
+		const hiddenStatus = computed(() => {
+			if (progress.value === "in-progress") return null;
+			if (props.status === "error") return messages.value.stepper.status.error;
+			if (props.status === "warning") return messages.value.stepper.status.warning;
+			if (props.status === "success" || progress.value === "completed") return messages.value.stepper.status.completed;
+			return null;
+		});
+		function activate() {
+			if (!isClickable.value) return;
+			stepper?.select.value?.(props.step);
+		}
+		if (stepper) {
+			const context = stepper;
+			watch(() => ({
+				step: props.step,
+				label: props.label,
+				description: props.description,
+				indicator: props.indicator,
+				status: props.status,
+				isDisabled: props.isDisabled
+			}), (record) => context.register(record), { immediate: true });
+			onUnmounted(() => context.unregister(props.step));
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", {
+				class: "astryx-step",
+				"aria-current": progress.value === "in-progress" ? "step" : void 0,
+				"data-density": density.value,
+				"data-indicator-position": indicatorPosition.value,
+				"data-orientation": orientation.value,
+				"data-progress": progress.value,
+				"data-status": __props.status
+			}, [
+				indicatorPosition.value === "separated" || collapsed.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "astryx-step-bar",
+					"data-filled": leadFilled.value || void 0
+				}, null, 8, _hoisted_2$1)) : (openBlock(), createElementBlock("span", _hoisted_3$1, [createElementVNode("span", {
+					class: "astryx-step-connector astryx-step-connector-lead",
+					"data-filled": leadFilled.value || void 0
+				}, null, 8, _hoisted_4$1), createElementVNode("span", {
+					class: "astryx-step-connector astryx-step-connector-trail",
+					"data-filled": trailFilled.value || void 0
+				}, null, 8, _hoisted_5$1)])),
+				(openBlock(), createBlock(resolveDynamicComponent(isClickable.value ? "button" : "div"), {
+					class: "astryx-step-control",
+					"aria-label": isClickable.value ? accessibleName.value : void 0,
+					type: isClickable.value ? "button" : void 0,
+					onClick: activate
+				}, {
+					default: withCtx(() => [_ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: "astryx-step-indicator",
+						"data-glyph": glyph.value,
+						"aria-hidden": "true"
+					}, [renderSlot(_ctx.$slots, "icon")], 8, _hoisted_6$1)) : (openBlock(), createBlock(_sfc_main$2, {
+						key: 1,
+						glyph: glyph.value,
+						"number-label": numberLabel.value
+					}, null, 8, ["glyph", "number-label"])), createElementVNode("span", _hoisted_7$1, [createElementVNode("span", _hoisted_8$1, [
+						createElementVNode("span", _hoisted_9$1, toDisplayString(__props.label), 1),
+						hiddenStatus.value ? (openBlock(), createBlock(_sfc_main$3, { key: 0 }, {
+							default: withCtx(() => [createTextVNode(toDisplayString(hiddenStatus.value), 1)]),
+							_: 1
+						})) : createCommentVNode("v-if", true),
+						__props.isOptional ? (openBlock(), createElementBlock("span", _hoisted_10, "• " + toDisplayString(unref(messages).stepper.optional), 1)) : createCommentVNode("v-if", true),
+						renderSlot(_ctx.$slots, "end")
+					]), __props.description ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(__props.description), 1)) : createCommentVNode("v-if", true)])]),
+					_: 3
+				}, 8, ["aria-label", "type"])),
+				_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_12, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("v-if", true)
+			], 8, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/Stepper/Stepper.vue
+const _hoisted_1 = ["data-collapsed"];
+const _hoisted_2 = [
+	"aria-label",
+	"data-collapsible",
+	"data-indicator-position",
+	"data-orientation"
+];
+const _hoisted_3 = {
+	key: 0,
+	class: "astryx-stepper-summary"
+};
+const _hoisted_4 = ["aria-label", "disabled"];
+const _hoisted_5 = { class: "astryx-stepper-summary-body" };
+const _hoisted_6 = { class: "astryx-stepper-summary-row" };
+const _hoisted_7 = { class: "astryx-step-label" };
+const _hoisted_8 = {
+	key: 0,
+	class: "astryx-step-description"
+};
+const _hoisted_9 = ["aria-label", "disabled"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxStepper",
+	__name: "Stepper",
+	props: {
+		activeStep: {},
+		orientation: { default: "horizontal" },
+		onStepClick: {},
+		label: {},
+		density: { default: "balanced" },
+		indicatorPosition: { default: "separated" },
+		hasCollapsibleLabels: {
+			type: Boolean,
+			default: false
+		},
+		horizontalOptions: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const messages = useAstryxMessages();
+		const root = useTemplateRef("root");
+		const width = ref(Number.POSITIVE_INFINITY);
+		const steps = ref([]);
+		const activeStep = computed(() => props.activeStep);
+		const orientation = computed(() => props.orientation);
+		const density = computed(() => props.density);
+		const indicatorPosition = computed(() => props.indicatorPosition);
+		const hasCollapsibleLabels = computed(() => props.hasCollapsibleLabels && props.orientation === "horizontal");
+		const select = computed(() => props.onStepClick ?? null);
+		const isNonLinear = computed(() => select.value != null);
+		const collapsed = computed(() => shouldCollapseStepper(width.value, steps.value.length, props.horizontalOptions?.minimumStepWidth, props.orientation));
+		const collapsedVariant = computed(() => props.horizontalOptions?.collapsedVariant ?? "withLabelAndControls");
+		const orderedSteps = computed(() => [...steps.value].sort((left, right) => left.step - right.step));
+		const current = computed(() => steps.value.find((step) => step.step === props.activeStep) ?? null);
+		const showSummary = computed(() => collapsed.value && current.value != null && collapsedVariant.value !== "hiddenLabel");
+		const showControls = computed(() => showSummary.value && collapsedVariant.value === "withLabelAndControls" && select.value != null);
+		const currentGlyph = computed(() => {
+			const step = current.value;
+			if (step == null) return "none";
+			return resolveStepGlyph({
+				progress: "in-progress",
+				indicator: step.indicator,
+				status: step.status
+			});
+		});
+		function register(record) {
+			if (steps.value.findIndex((step) => step.step === record.step) === -1) steps.value = [...steps.value, record];
+			else steps.value = steps.value.map((step) => step.step === record.step ? record : step);
+		}
+		function unregister(step) {
+			steps.value = steps.value.filter((item) => item.step !== step);
+		}
+		function neighbor(delta) {
+			const ordered = orderedSteps.value;
+			let cursor = ordered.findIndex((step) => step.step === props.activeStep) + delta;
+			while (cursor >= 0 && cursor < ordered.length && ordered[cursor]?.isDisabled) cursor += delta;
+			if (cursor < 0 || cursor >= ordered.length) return null;
+			return ordered[cursor]?.step ?? null;
+		}
+		function move(delta) {
+			const next = neighbor(delta);
+			if (next == null) return;
+			select.value?.(next);
+		}
+		let observer;
+		onMounted(() => {
+			const node = root.value;
+			if (node == null || typeof ResizeObserver === "undefined") return;
+			observer = new ResizeObserver((entries) => {
+				width.value = entries[0]?.contentRect.width ?? node.clientWidth;
+			});
+			observer.observe(node);
+		});
+		onUnmounted(() => observer?.disconnect());
+		provide(stepperContextKey, {
+			activeStep,
+			collapsed,
+			density,
+			hasCollapsibleLabels,
+			indicatorPosition,
+			isNonLinear,
+			orientation,
+			register,
+			select,
+			unregister
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: "astryx-stepper-root",
+				"data-collapsed": collapsed.value || void 0
+			}, [createElementVNode("ol", {
+				class: "astryx-stepper",
+				"aria-label": __props.label || unref(messages).stepper.progress,
+				"data-collapsible": hasCollapsibleLabels.value || void 0,
+				"data-indicator-position": indicatorPosition.value,
+				"data-orientation": orientation.value
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_2), showSummary.value && current.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+				showControls.value ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "astryx-stepper-nav",
+					type: "button",
+					"aria-label": unref(messages).stepper.previous,
+					disabled: neighbor(-1) == null,
+					onClick: _cache[0] || (_cache[0] = ($event) => move(-1))
+				}, [..._cache[2] || (_cache[2] = [createElementVNode("svg", {
+					viewBox: "0 0 16 16",
+					"aria-hidden": "true"
+				}, [createElementVNode("path", {
+					d: "M10 3.5 5.5 8 10 12.5",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"stroke-width": "1.5"
+				})], -1)])], 8, _hoisted_4)) : createCommentVNode("v-if", true),
+				createElementVNode("span", _hoisted_5, [createElementVNode("span", _hoisted_6, [createVNode(_sfc_main$2, {
+					glyph: currentGlyph.value,
+					"number-label": String(activeStep.value + 1)
+				}, null, 8, ["glyph", "number-label"]), createElementVNode("span", _hoisted_7, toDisplayString(current.value.label), 1)]), current.value.description ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(current.value.description), 1)) : createCommentVNode("v-if", true)]),
+				showControls.value ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					class: "astryx-stepper-nav",
+					type: "button",
+					"aria-label": unref(messages).stepper.next,
+					disabled: neighbor(1) == null,
+					onClick: _cache[1] || (_cache[1] = ($event) => move(1))
+				}, [..._cache[3] || (_cache[3] = [createElementVNode("svg", {
+					viewBox: "0 0 16 16",
+					"aria-hidden": "true"
+				}, [createElementVNode("path", {
+					d: "M6 3.5 10.5 8 6 12.5",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"stroke-width": "1.5"
+				})], -1)])], 8, _hoisted_9)) : createCommentVNode("v-if", true)
+			])) : createCommentVNode("v-if", true)], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main$1 as n, _sfc_main as t };

package/dist/Switch/index.d.ts

@@ -1,2 +1,2 @@
-import { _t as SwitchSize, bt as SwitchStatusType, ft as _default, gt as SwitchProps, ht as SwitchEmits, mt as SwitchChangeEvent, pt as SwitchChangeAction, vt as SwitchSlots, yt as SwitchStatus } from "../index-CaHXYQ_E.js";
+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-Df2YvC8o.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-CNdnr5TP.js";
+import { t as _sfc_main } from "../Switch-SesQzPGZ.js";
 export { _sfc_main as Switch };

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

@@ -1,7 +1,8 @@
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
 import { n as useButtonTooltip } from "./Button-DrqeomlE.js";
 import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
-import { t as _sfc_main$3 } from "./FieldLabel-B1NRyQlS.js";
+import { i as useAriaRequired } from "./context-Cfjh8te1.js";
+import { t as _sfc_main$3 } from "./FieldLabel-DmmJyX7w.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
@@ -128,6 +129,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const ariaRequired = useAriaRequired(props);
 		const model = useModel(__props, "modelValue");
 		const attrs = useAttrs();
 		const input = useTemplateRef("input");
@@ -246,7 +248,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"aria-disabled": showsDisabledMessage.value || void 0,
 					"aria-readonly": __props.isReadOnly || void 0,
 					"aria-busy": busy.value || void 0,
-					"aria-required": __props.isRequired && !__props.isOptional || void 0,
+					"aria-required": unref(ariaRequired),
 					"aria-invalid": __props.status?.type === "error" ? true : inputAttrs()["aria-invalid"],
 					onClick: click,
 					onChange: change,

package/dist/TabList/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TabListSize, i as TabListProps, n as _default, o as TabListTab, r as TabListLayout, s as TabProps, t as _default$1 } from "../index-CCA4R0Mf.js";
-export { _default as Tab, _default$1 as TabList, type TabListLayout, type TabListProps, type TabListSize, type TabListTab, type TabProps };
+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-DT9S92sh.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 };

package/dist/TabList/index.js

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