@astryx-vue/core 0.1.1 → 0.1.3

package/dist/TabList-C411uNQU.js

@@ -0,0 +1,380 @@
+import { t as useDismiss } from "./useDismiss-CAiHU6QD.js";
+import { t as useListFocus } from "./useListFocus-D0iOJl39.js";
+import { t as _sfc_main$3 } from "./Icon-5MdZQ18k.js";
+import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.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 "../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 _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	__name: "Tab",
+	props: {
+		value: {},
+		panelId: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const context = inject(tabListContextKey);
+		const rootRef = ref();
+		const isSelected = computed(() => context?.value.value === props.value);
+		const tabIndex = computed(() => isSelected.value && !props.disabled ? 0 : -1);
+		const classes = computed(() => [
+			"astryx-tab",
+			`astryx-tab--size-${context?.size.value ?? "md"}`,
+			isSelected.value && "astryx-tab--selected",
+			props.disabled && "astryx-tab--disabled"
+		]);
+		function handleClick() {
+			if (props.disabled || !context) 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);
+			}
+		}
+		onMounted(() => {
+			if (!context || !rootRef.value) return;
+			context.registerTab({
+				value: props.value,
+				disabled: props.disabled,
+				el: rootRef.value
+			});
+		});
+		onUnmounted(() => {
+			context?.unregisterTab(props.value);
+		});
+		watch(() => props.disabled, (disabled) => {
+			if (!context || !rootRef.value) return;
+			context.registerTab({
+				value: props.value,
+				disabled,
+				el: rootRef.value
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				id: `astryx-tab-${__props.value}`,
+				ref_key: "rootRef",
+				ref: rootRef,
+				type: "button",
+				role: "tab",
+				class: normalizeClass(classes.value),
+				"aria-selected": isSelected.value,
+				"aria-controls": __props.panelId,
+				tabindex: tabIndex.value,
+				disabled: __props.disabled,
+				onClick: handleClick,
+				onKeydown: handleKeydown
+			}, [createElementVNode("span", _hoisted_2$1, [renderSlot(_ctx.$slots, "default")])], 42, _hoisted_1$2);
+		};
+	}
+});
+//#endregion
+//#region src/TabList/TabList.vue
+const _hoisted_1$1 = { class: "astryx-tab-list__strip" };
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "TabList",
+	props: {
+		value: {},
+		size: { default: "md" },
+		layout: { default: "hug" },
+		hasDivider: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:value", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const tabs = reactive([]);
+		const focusedValue = ref(props.value);
+		const enabledTabs = computed(() => tabs.filter((tab) => !tab.disabled));
+		function selectTab(value) {
+			if (value === props.value) return;
+			emit("update:value", value);
+			emit("change", value);
+			focusedValue.value = value;
+		}
+		function moveFocus(direction, value) {
+			const stops = enabledTabs.value;
+			if (stops.length === 0) return;
+			const index = stops.findIndex((tab) => tab.value === value);
+			let nextIndex = index;
+			switch (direction) {
+				case "next":
+					nextIndex = index >= 0 ? (index + 1) % stops.length : 0;
+					break;
+				case "prev":
+					nextIndex = index >= 0 ? (index - 1 + stops.length) % stops.length : stops.length - 1;
+					break;
+				case "first":
+					nextIndex = 0;
+					break;
+				case "last": nextIndex = stops.length - 1;
+			}
+			const next = stops[nextIndex];
+			if (!next) return;
+			focusedValue.value = next.value;
+			if (next.selectsOnFocus !== false) selectTab(next.value);
+			next.el.focus();
+		}
+		function registerTab(tab) {
+			const existingIndex = tabs.findIndex((t) => t.value === tab.value);
+			if (existingIndex >= 0) tabs.splice(existingIndex, 1, tab);
+			else tabs.push(tab);
+		}
+		function unregisterTab(value) {
+			const index = tabs.findIndex((t) => t.value === value);
+			if (index >= 0) tabs.splice(index, 1);
+		}
+		provide(tabListContextKey, {
+			value: computed(() => props.value),
+			size: computed(() => props.size),
+			layout: computed(() => props.layout),
+			hasDivider: computed(() => props.hasDivider),
+			tabs,
+			focusedValue,
+			registerTab,
+			unregisterTab,
+			selectTab,
+			moveFocus
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["astryx-tab-list", [
+					`astryx-tab-list--size-${__props.size}`,
+					`astryx-tab-list--layout-${__props.layout}`,
+					__props.hasDivider && "astryx-tab-list--has-divider"
+				]]),
+				role: "tablist"
+			}, [createElementVNode("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")])], 2);
+		};
+	}
+});
+//#endregion
+//#region src/TabList/TabMenu.vue
+const _hoisted_1 = [
+	"id",
+	"aria-expanded",
+	"tabindex"
+];
+const _hoisted_2 = { class: "astryx-tab__label" };
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = {
+	class: "astryx-tab-menu-heading",
+	role: "presentation"
+};
+const _hoisted_5 = [
+	"data-selected",
+	"aria-checked",
+	"onClick",
+	"onKeydown"
+];
+const _hoisted_6 = { class: "astryx-tab-menu-item-label" };
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxTabMenu",
+	__name: "TabMenu",
+	props: {
+		label: {},
+		options: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const context = inject(tabListContextKey);
+		const uid = useId();
+		const stopValue = `tab-menu:${uid}`;
+		const menuId = `astryx-tab-menu-${uid}`;
+		const anchorRef = ref(null);
+		const surfaceRef = ref(null);
+		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 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({
+			alignment,
+			anchor: anchorRef,
+			gap: 4,
+			isOpen,
+			layer: surfaceRef,
+			placement
+		});
+		const listFocus = useListFocus({
+			hasRovingTabIndex: true,
+			itemSelector: "[role=\"menuitemradio\"]",
+			onEscape: () => {
+				isOpen.value = false;
+			}
+		});
+		useDismiss({
+			container: surfaceRef,
+			isEnabled: isOpen,
+			onDismiss: () => {
+				isOpen.value = false;
+			},
+			trigger: anchorRef
+		});
+		function register() {
+			if (!context || anchorRef.value == null) return;
+			context.registerTab({
+				disabled: false,
+				el: anchorRef.value,
+				selectsOnFocus: false,
+				value: stopValue
+			});
+		}
+		function toggle() {
+			isOpen.value = !isOpen.value;
+		}
+		function select(value) {
+			context?.selectTab(value);
+			isOpen.value = false;
+		}
+		function onTriggerKeyDown(event) {
+			if (!context || isOpen.value) return;
+			switch (event.key) {
+				case "ArrowRight":
+				case "ArrowDown":
+					event.preventDefault();
+					context.moveFocus("next", stopValue);
+					break;
+				case "ArrowLeft":
+				case "ArrowUp":
+					event.preventDefault();
+					context.moveFocus("prev", stopValue);
+					break;
+				case "Home":
+					event.preventDefault();
+					context.moveFocus("first", stopValue);
+					break;
+				case "End":
+					event.preventDefault();
+					context.moveFocus("last", stopValue);
+			}
+		}
+		function onMenuKeyDown(event) {
+			if (event.key === "Tab") {
+				isOpen.value = false;
+				return;
+			}
+			listFocus.handleKeyDown(event);
+		}
+		function onItemKeyDown(event, value) {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			select(value);
+		}
+		watch(surfaceRef, (element) => {
+			listFocus.listRef.value = element;
+		}, { immediate: true });
+		watch(isOpen, async (open) => {
+			if (!open) {
+				const shouldRestore = surfaceRef.value?.contains(document.activeElement) ?? false;
+				await nextTick();
+				if (shouldRestore) anchorRef.value?.focus();
+				return;
+			}
+			await nextTick();
+			listFocus.focusFirst();
+		});
+		onMounted(register);
+		onUnmounted(() => {
+			context?.unregisterTab(stopValue);
+			detach();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("button", {
+				id: `astryx-tab-menu-trigger-${unref(uid)}`,
+				ref_key: "anchorRef",
+				ref: anchorRef,
+				type: "button",
+				class: normalizeClass(["astryx-tab astryx-tab-menu", [sizeClass.value, hasSelectedOption.value && "astryx-tab--selected"]]),
+				"data-tab-menu": "",
+				"aria-controls": menuId,
+				"aria-haspopup": "menu",
+				"aria-expanded": isOpen.value,
+				tabindex: hasSelectedOption.value ? 0 : -1,
+				onClick: toggle,
+				onKeydown: onTriggerKeyDown
+			}, [createElementVNode("span", _hoisted_2, toDisplayString(triggerLabel.value), 1), createVNode(_sfc_main$3, {
+				class: "astryx-tab-menu-chevron",
+				"data-state": isOpen.value ? "expanded" : "collapsed",
+				color: "inherit",
+				icon: "chevronDown",
+				size: "sm"
+			}, null, 8, ["data-state"])], 42, _hoisted_1), (openBlock(), createBlock(Teleport, { to: "body" }, [isOpen.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: menuId,
+				ref_key: "surfaceRef",
+				ref: surfaceRef,
+				class: "astryx-tab-menu-dropdown",
+				role: "menu",
+				tabindex: "-1",
+				"aria-label": __props.label,
+				style: normalizeStyle({
+					top: `${unref(position).top}px`,
+					left: `${unref(position).left}px`
+				}),
+				onKeydown: onMenuKeyDown,
+				onFocusin: _cache[0] || (_cache[0] = (...args) => unref(listFocus).handleFocus && unref(listFocus).handleFocus(...args))
+			}, [createElementVNode("span", _hoisted_4, toDisplayString(__props.label), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+				return openBlock(), createElementBlock("div", {
+					key: option.value,
+					class: "astryx-tab-menu-item",
+					"data-selected": option.value === unref(context)?.value.value || void 0,
+					role: "menuitemradio",
+					"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, {
+					key: 0,
+					color: "accent",
+					icon: "check",
+					size: "sm"
+				})) : createCommentVNode("v-if", true)], 40, _hoisted_5);
+			}), 128))], 44, _hoisted_3)) : createCommentVNode("v-if", true)]))], 64);
+		};
+	}
+});
+//#endregion
+export { _sfc_main$1 as n, _sfc_main$2 as r, _sfc_main as t };

package/dist/Table/index.d.ts

@@ -1,2 +1,3 @@
-import { $ as TableTextOverflow, A as generateColumns, B as TableColumn, C as UseTableColumnSettingsConfig, D as useTableColumnResize, E as UseTableColumnResizeConfig, F as sortRows, G as TableFilterState, H as TableDensity, I as ColumnWidth, J as TableProps, K as TableFilterValue, L as PixelWidth, M as pixel, N as proportional, O as capitalize, P as resolveColumnWidths, Q as TableSortState, R as ProportionalWidth, S as ColumnSettingsOption, T as useTableColumnSettingsState, U as TableDividers, V as TableColumnAlign, W as TableFilterField, X as TableSortDirection, Y as TableRowProps, Z as TableSortEntry, _ as useTablePagination, a as _default$3, b as useTableFilterState, c as _default, d as useTableSortableState, et as TableVerticalAlign, f as UseTableSelectionConfig, g as UseTablePaginationConfig, h as useTableSelectionState, i as _default$4, j as paginateData, k as cellText, l as UseTableSortableConfig, m as useTableSelection, n as _default$6, o as _default$2, p as UseTableSelectionStateConfig, q as TablePlugin, r as _default$5, s as _default$1, t as _default$7, u as useTableSortable, v as UseTableFilteringConfig, w as useTableColumnSettings, x as useTableFiltering, y as applyTableFilters, z as TableCellProps } from "../index-CR6sUmRT.js";
+import { _ as TableSortEntry, a as TableColumn, b as TableVerticalAlign, c as TableDividers, d as TableFilterValue, f as TablePlugin, g as TableSortDirection, i as TableCellProps, l as TableFilterField, m as TableRowProps, n as PixelWidth, o as TableColumnAlign, p as TableProps, r as ProportionalWidth, s as TableDensity, t as ColumnWidth, u as TableFilterState, v as TableSortState, y as TableTextOverflow } from "../types-JktRxujg.js";
+import { A as generateColumns, C as UseTableColumnSettingsConfig, D as useTableColumnResize, E as UseTableColumnResizeConfig, F as sortRows, M as pixel, N as proportional, O as capitalize, P as resolveColumnWidths, S as ColumnSettingsOption, T as useTableColumnSettingsState, _ as useTablePagination, a as _default$3, b as useTableFilterState, c as _default, d as useTableSortableState, f as UseTableSelectionConfig, g as UseTablePaginationConfig, h as useTableSelectionState, i as _default$4, j as paginateData, k as cellText, l as UseTableSortableConfig, m as useTableSelection, n as _default$6, o as _default$2, p as UseTableSelectionStateConfig, r as _default$5, s as _default$1, t as _default$7, u as useTableSortable, v as UseTableFilteringConfig, w as useTableColumnSettings, x as useTableFiltering, y as applyTableFilters } from "../index-DXSs3rwa.js";
 export { type ColumnSettingsOption, type ColumnWidth, type PixelWidth, type ProportionalWidth, _default as Table, _default$1 as TableBody, _default$2 as TableCell, type TableCellProps, type TableColumn, type TableColumnAlign, type TableDensity, type TableDividers, type TableFilterField, type TableFilterState, type TableFilterValue, _default$3 as TableFooter, _default$4 as TableHeader, _default$5 as TableHeaderCell, type TablePlugin, type TableProps, _default$6 as TableRow, type TableRowProps, _default$7 as TableSelectionToolbar, type TableSortDirection, type TableSortEntry, type TableSortState, type TableTextOverflow, type TableVerticalAlign, type UseTableColumnResizeConfig, type UseTableColumnSettingsConfig, type UseTableFilteringConfig, type UseTablePaginationConfig, type UseTableSelectionConfig, type UseTableSelectionStateConfig, type UseTableSortableConfig, applyTableFilters, capitalize, cellText, generateColumns, paginateData, paginateData as paginateTableData, pixel, proportional, resolveColumnWidths, sortRows, useTableColumnResize, useTableColumnSettings, useTableColumnSettingsState, useTableFilterState, useTableFiltering, useTablePagination, useTableSelection, useTableSelectionState, useTableSortable, useTableSortableState };

package/dist/Table/index.js

@@ -1,2 +1,2 @@
-import { C as paginateData, D as sortRows, E as resolveColumnWidths, S as generateColumns, T as proportional, _ as useTableColumnSettings, a as _sfc_main$3, b as capitalize, c as _sfc_main, d as useTableSelection, f as useTableSelectionState, g as useTableFiltering, h as useTableFilterState, i as _sfc_main$4, l as useTableSortable, m as applyTableFilters, n as _sfc_main$6, o as _sfc_main$2, p as useTablePagination, r as _sfc_main$5, s as _sfc_main$1, t as _sfc_main$7, u as useTableSortableState, v as useTableColumnSettingsState, w as pixel, x as cellText, y as useTableColumnResize } from "../Table-D5zWaITo.js";
+import { C as paginateData, D as sortRows, E as resolveColumnWidths, S as generateColumns, T as proportional, _ as useTableColumnSettings, a as _sfc_main$3, b as capitalize, c as _sfc_main, d as useTableSelection, f as useTableSelectionState, g as useTableFiltering, h as useTableFilterState, i as _sfc_main$4, l as useTableSortable, m as applyTableFilters, n as _sfc_main$6, o as _sfc_main$2, p as useTablePagination, r as _sfc_main$5, s as _sfc_main$1, t as _sfc_main$7, u as useTableSortableState, v as useTableColumnSettingsState, w as pixel, x as cellText, y as useTableColumnResize } from "../Table-7qRmlIQd.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, capitalize, cellText, generateColumns, paginateData, paginateData as paginateTableData, pixel, proportional, resolveColumnWidths, sortRows, useTableColumnResize, useTableColumnSettings, useTableColumnSettingsState, useTableFilterState, useTableFiltering, useTablePagination, useTableSelection, useTableSelectionState, useTableSortable, useTableSortableState };

package/dist/{Table-D5zWaITo.js → Table-7qRmlIQd.js}

@@ -1,12 +1,12 @@
 import { t as _sfc_main$10 } from "./Button-DrqeomlE.js";
+import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
 import { t as _sfc_main$11 } from "./IconButton-BNQuz9W_.js";
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
 import { t as _sfc_main$12 } from "./Icon-5MdZQ18k.js";
-import { t as _sfc_main$13 } from "./CheckboxInput-C86o3XoG.js";
+import { t as _sfc_main$13 } from "./CheckboxInput-CMsEE1_4.js";
 import { t as _sfc_main$14 } from "./Popover-Crhk9PNP.js";
-import { t as _sfc_main$15 } from "./Pagination-BRStpeSB.js";
-import { t as _sfc_main$16 } from "./Selector-DvEUIVEC.js";
-import { t as _sfc_main$17 } from "./TextInput-B0IKC7g5.js";
+import { t as _sfc_main$15 } from "./Pagination-DXfgMUKJ.js";
+import { t as _sfc_main$16 } from "./Selector-DlZpQh42.js";
+import { t as _sfc_main$17 } from "./TextInput-BasnjVvy.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, watch, withCtx } from "vue";
 import "../styles/table.css";
 function proportional(value = 1, options) {

package/dist/TextArea/index.d.ts

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

package/dist/TextArea/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../TextArea-BL0NuB99.js";
+import { t as _sfc_main } from "../TextArea-Cv9UVbzS.js";
 export { _sfc_main as TextArea };

package/dist/{TextArea-BL0NuB99.js → TextArea-Cv9UVbzS.js}

@@ -3,8 +3,9 @@ import { n as useButtonTooltip, r as _sfc_main$2 } from "./Button-DrqeomlE.js";
 import { t as _sfc_main$3 } from "./ButtonTooltip-nWWrth8j.js";
 import { t as _sfc_main$4 } from "./FieldIcon--NTgW5IU.js";
 import { t as _sfc_main$5 } from "./IconButton-BNQuz9W_.js";
-import { n as _sfc_main$6 } from "./FieldLabel-B1NRyQlS.js";
-import { t as _sfc_main$7 } from "./Field-VlTBsIEo.js";
+import { i as useAriaRequired } from "./context-Cfjh8te1.js";
+import { n as _sfc_main$6 } from "./FieldLabel-DmmJyX7w.js";
+import { t as _sfc_main$7 } from "./Field-8zRxzDHE.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/text-area.css";
 //#region src/TextArea/useTextAreaAction.ts
@@ -148,6 +149,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");
@@ -300,7 +302,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							readonly: __props.isReadOnly || showsDisabledMessage.value,
 							"aria-disabled": showsDisabledMessage.value || 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"],
 							"aria-labelledby": labelledBy(field.labelId),
 							"aria-describedby": describedBy(field.describedBy),

package/dist/TextInput/index.d.ts

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

package/dist/TextInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../TextInput-B0IKC7g5.js";
+import { t as _sfc_main } from "../TextInput-BasnjVvy.js";
 export { _sfc_main as TextInput };

package/dist/{TextInput-B0IKC7g5.js → TextInput-BasnjVvy.js}

@@ -3,8 +3,9 @@ import { n as useButtonTooltip, r as _sfc_main$2 } from "./Button-DrqeomlE.js";
 import { t as _sfc_main$3 } from "./ButtonTooltip-nWWrth8j.js";
 import { t as _sfc_main$4 } from "./FieldIcon--NTgW5IU.js";
 import { t as _sfc_main$5 } from "./IconButton-BNQuz9W_.js";
-import { n as _sfc_main$6 } from "./FieldLabel-B1NRyQlS.js";
-import { t as _sfc_main$7 } from "./Field-VlTBsIEo.js";
+import { i as useAriaRequired } from "./context-Cfjh8te1.js";
+import { n as _sfc_main$6 } from "./FieldLabel-DmmJyX7w.js";
+import { t as _sfc_main$7 } from "./Field-8zRxzDHE.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/text-input.css";
 //#region src/TextInput/useTextInputAction.ts
@@ -140,6 +141,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");
@@ -284,7 +286,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							readonly: __props.isReadOnly || showsDisabledMessage.value,
 							"aria-disabled": showsDisabledMessage.value || 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"],
 							"aria-labelledby": labelledBy(field.labelId),
 							"aria-describedby": describedBy(field.describedBy),

package/dist/Thumbnail/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Thumbnail-DMOgWncm.js";
+import { t as _sfc_main } from "../Thumbnail-BWVzLLyI.js";
 export { _sfc_main as Thumbnail };

package/dist/{Thumbnail-DMOgWncm.js → Thumbnail-BWVzLLyI.js}

@@ -1,5 +1,5 @@
+import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
 import { t as _sfc_main$1 } from "./IconButton-BNQuz9W_.js";
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
 import { t as _sfc_main$2 } from "./Icon-5MdZQ18k.js";
 import { t as _sfc_main$3 } from "./Spinner-9cYUCnDy.js";
 import { t as _sfc_main$4 } from "./Tooltip-mp0NMh_Y.js";

package/dist/{TimeField-DeQ1ukHl.js → TimeField-l3QzU6vC.js}

@@ -1,7 +1,7 @@
 import { c as useCoarsePointer, i as parseDisplayTime, o as resolveTimeSurface, r as isTimeInRange, s as shiftTime, t as formatDisplayTime } from "./useTimeValue-DWk6oTAZ.js";
+import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
 import { t as _sfc_main$1 } from "./FieldIcon--NTgW5IU.js";
 import { t as _sfc_main$2 } from "./IconButton-BNQuz9W_.js";
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
 import { t as _sfc_main$3 } from "./Icon-5MdZQ18k.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeModels, openBlock, shallowRef, useModel, watch, withCtx } from "vue";
 import "../styles/bordered-control.css";

package/dist/TimeInput/index.d.ts

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

package/dist/TimeInput/index.js

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

package/dist/{TimeInput-jb1nLqZk.js → TimeInput-OkgX-xbQ.js}

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

package/dist/Timestamp/index.d.ts

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

package/dist/Timestamp/index.js

@@ -1,2 +1,2 @@
-import { i as formatInstant, n as formatTooltipLines, r as formatRelativeTime, t as _sfc_main } from "../Timestamp-DrWwVQBL.js";
+import { i as formatInstant, n as formatTooltipLines, r as formatRelativeTime, t as _sfc_main } from "../Timestamp-DUoP9ari.js";
 export { _sfc_main as Timestamp, formatInstant, formatRelativeTime, formatTooltipLines };

package/dist/{Timestamp-DrWwVQBL.js → Timestamp-DUoP9ari.js}

@@ -1,6 +1,6 @@
 import { t as _sfc_main$2 } from "./Text-CKd7e3gK.js";
+import { a as useAstryxMessages, i as useAstryxLocale } from "./context-D6ECRdc5.js";
 import { t as _sfc_main$3 } from "./IconButton-BNQuz9W_.js";
-import { a as useAstryxMessages, i as useAstryxLocale } from "./context-BshXcNYX.js";
 import { t as _sfc_main$4 } from "./Icon-5MdZQ18k.js";
 import { t as _sfc_main$5 } from "./HoverCard-EhbWaGOW.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch, withCtx } from "vue";

package/dist/ToggleButton/index.d.ts

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

package/dist/Token/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TokenProps, i as TokenEmits, n as TOKEN_COLORS, o as TokenSize, r as TokenColor, s as TokenSlots, t as _default } from "../index-BlWLperN.js";
+import { a as TokenProps, i as TokenEmits, n as TOKEN_COLORS, o as TokenSize, r as TokenColor, s as TokenSlots, t as _default } from "../index-4FM5lQdV.js";
 export { TOKEN_COLORS, _default as Token, type TokenColor, type TokenEmits, type TokenProps, type TokenSize, type TokenSlots };

package/dist/Token/index.js

@@ -1,3 +1,3 @@
-import { t as _sfc_main } from "../Token-CV2J94bn.js";
+import { t as _sfc_main } from "../Token-C4KD0fZD.js";
 import { t as TOKEN_COLORS } from "../Token-BdRzlXzm.js";
 export { TOKEN_COLORS, _sfc_main as Token };

package/dist/{Token-CV2J94bn.js → Token-C4KD0fZD.js}

@@ -1,4 +1,4 @@
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
+import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, useAttrs, withCtx } from "vue";
 import "../styles/token.css";
 import "../styles/visually-hidden-utility.css";

package/dist/Tokenizer/index.js

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

package/dist/{Tokenizer-DF9r4hTW.js → Tokenizer-BA8sTMPZ.js}

@@ -1,8 +1,8 @@
 import { t as useAnnounce } from "./announce-Cnio10Wk.js";
 import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
-import { t as _sfc_main$1 } from "./Field-VlTBsIEo.js";
-import { t as _sfc_main$2 } from "./Token-CV2J94bn.js";
+import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { t as _sfc_main$1 } from "./Field-8zRxzDHE.js";
+import { t as _sfc_main$2 } from "./Token-C4KD0fZD.js";
 import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-7W90Ny-9.js";
 import { n as _sfc_main$3, t as useTypeaheadMenu } from "./useTypeaheadMenu-Ba7XpcZl.js";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";

package/dist/Toolbar/index.d.ts

@@ -1,2 +1,2 @@
-import { C as _default, E as ToolbarSize, T as ToolbarProps, w as ToolbarOrientation } from "../index-CQ9F1f_F.js";
+import { C as _default, E as ToolbarSize, T as ToolbarProps, w as ToolbarOrientation } from "../index-Df2YvC8o.js";
 export { _default as Toolbar, type ToolbarOrientation, type ToolbarProps, type ToolbarSize };

package/dist/Tooltip/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TooltipProps, i as TooltipPlacement, n as TooltipAlignment, o as TooltipTouchTrigger, r as TooltipFocusTrigger, t as _default } from "../index-BkIgRYGz.js";
+import { a as TooltipProps, i as TooltipPlacement, n as TooltipAlignment, o as TooltipTouchTrigger, r as TooltipFocusTrigger, t as _default } from "../index-C5p2NeCr.js";
 export { _default as Tooltip, type TooltipAlignment, type TooltipFocusTrigger, type TooltipPlacement, type TooltipProps, type TooltipTouchTrigger };

package/dist/TopNav/index.d.ts

@@ -1,2 +1,2 @@
-import { S as TopNavProps, _ as TopNavMegaMenuItemProps, a as _default$6, b as TopNavMenuItem, c as _default$3, d as _default, f as TopNavHeadingProps, g as TopNavMegaMenuFeaturedCardProps, h as TopNavMegaMenuEmits, l as _default$2, m as TopNavItemProps, o as _default$5, p as TopNavItemEmits, s as _default$4, u as _default$1, v as TopNavMegaMenuProps, x as TopNavMenuProps, y as TopNavMenuEmits } from "../index-CQ9F1f_F.js";
+import { S as TopNavProps, _ as TopNavMegaMenuItemProps, a as _default$6, b as TopNavMenuItem, c as _default$3, d as _default, f as TopNavHeadingProps, g as TopNavMegaMenuFeaturedCardProps, h as TopNavMegaMenuEmits, l as _default$2, m as TopNavItemProps, o as _default$5, p as TopNavItemEmits, s as _default$4, u as _default$1, v as TopNavMegaMenuProps, x as TopNavMenuProps, y as TopNavMenuEmits } from "../index-Df2YvC8o.js";
 export { _default as TopNav, _default$1 as TopNavHeading, type TopNavHeadingProps, _default$2 as TopNavItem, type TopNavItemEmits, type TopNavItemProps, _default$3 as TopNavMegaMenu, type TopNavMegaMenuEmits, _default$4 as TopNavMegaMenuFeaturedCard, type TopNavMegaMenuFeaturedCardProps, _default$5 as TopNavMegaMenuItem, type TopNavMegaMenuItemProps, type TopNavMegaMenuProps, _default$6 as TopNavMenu, type TopNavMenuEmits, type TopNavMenuItem, type TopNavMenuProps, type TopNavProps };

package/dist/TopNav/index.js

@@ -1,2 +1,2 @@
-import { a as _sfc_main$2, i as _sfc_main$3, n as _sfc_main$5, o as _sfc_main$1, r as _sfc_main$4, s as _sfc_main, t as _sfc_main$6 } from "../TopNav-BH_s3uap.js";
+import { a as _sfc_main$2, i as _sfc_main$3, n as _sfc_main$5, o as _sfc_main$1, r as _sfc_main$4, s as _sfc_main, t as _sfc_main$6 } from "../TopNav-CZokS7E_.js";
 export { _sfc_main as TopNav, _sfc_main$1 as TopNavHeading, _sfc_main$2 as TopNavItem, _sfc_main$3 as TopNavMegaMenu, _sfc_main$4 as TopNavMegaMenuFeaturedCard, _sfc_main$5 as TopNavMegaMenuItem, _sfc_main$6 as TopNavMenu };