@astryx-vue/core 0.1.3 → 0.2.1

package/dist/Selector-DkJOLZSR.js

@@ -0,0 +1,468 @@
+import { t as useCombobox } from "./useCombobox-CTo5C-gc.js";
+import { t as useDismiss } from "./useDismiss-CAiHU6QD.js";
+import { a as useAstryxMessages } from "./context-DzcK4T_C.js";
+import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
+import { t as _sfc_main$1 } from "./BottomSheet-Dg95HB1s.js";
+import { t as _sfc_main$2 } from "./Field-8zRxzDHE.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import "../styles/visually-hidden-utility.css";
+import "../styles/selector.css";
+//#region src/Selector/Selector.vue
+const _hoisted_1 = [
+	"disabled",
+	"aria-expanded",
+	"aria-label",
+	"aria-activedescendant",
+	"title"
+];
+const _hoisted_2 = ["aria-label"];
+const _hoisted_3 = { class: "astryx-selector-sheet-title" };
+const _hoisted_4 = ["data-placement"];
+const _hoisted_5 = {
+	key: 0,
+	class: "astryx-selector-search"
+};
+const _hoisted_6 = [
+	"id",
+	"aria-label",
+	"placeholder",
+	"value"
+];
+const _hoisted_7 = {
+	key: 1,
+	class: "astryx-selector-options"
+};
+const _hoisted_8 = {
+	key: 0,
+	class: "astryx-selector-section",
+	role: "presentation"
+};
+const _hoisted_9 = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onClick",
+	"onKeydown"
+];
+const _hoisted_10 = { class: "astryx-selector-option-label" };
+const _hoisted_11 = {
+	key: 1,
+	class: "astryx-selector-option-description"
+};
+const _hoisted_12 = {
+	key: 2,
+	class: "astryx-selector-empty"
+};
+const _hoisted_13 = [
+	"id",
+	"name",
+	"value",
+	"aria-label"
+];
+const _hoisted_14 = ["value"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxSelector",
+	inheritAttrs: false,
+	__name: "Selector",
+	props: {
+		modelValue: { default: null },
+		options: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		disabledReason: {},
+		status: { default: "default" },
+		statusMessage: {},
+		statusVariant: { default: "attached" },
+		size: { default: "md" },
+		variant: { default: "default" },
+		presentation: { default: "popover" },
+		searchable: {
+			type: Boolean,
+			default: false
+		},
+		searchPlaceholder: {},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		clearLabel: {},
+		emptyText: {},
+		label: {},
+		isLabelHidden: {
+			type: Boolean,
+			default: false
+		},
+		description: {},
+		width: {},
+		name: {}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"search"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const selectorId = `astryx-selector-${useId()}`;
+		const listboxId = `${selectorId}-listbox`;
+		const messages = useAstryxMessages();
+		const resolvedPlaceholder = computed(() => props.placeholder ?? messages.value.selector.placeholder);
+		const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? messages.value.selector.search);
+		const resolvedClearLabel = computed(() => props.clearLabel ?? messages.value.selector.clear);
+		const resolvedEmptyText = computed(() => props.emptyText ?? messages.value.selector.empty);
+		const fieldRef = useTemplateRef("fieldRef");
+		const listboxRef = useTemplateRef("listboxRef");
+		const searchInputRef = useTemplateRef("searchInputRef");
+		const sheetSlot = useTemplateRef("sheetSlot");
+		const isSheet = computed(() => props.presentation === "bottom-sheet");
+		const sheetLabel = computed(() => props.label || resolvedPlaceholder.value);
+		const isEnabled = computed(() => !props.disabled);
+		const isSearchable = computed(() => props.searchable);
+		function isSection(entry) {
+			return typeof entry === "object" && entry !== null && "type" in entry && entry.type === "section";
+		}
+		function asOption(entry) {
+			if (typeof entry === "string") return {
+				value: entry,
+				label: entry
+			};
+			return entry;
+		}
+		const normalizedEntries = computed(() => props.options.map((entry) => {
+			if (isSection(entry)) return {
+				...entry,
+				options: entry.options.map(asOption)
+			};
+			return asOption(entry);
+		}));
+		const flatOptions = computed(() => normalizedEntries.value.flatMap((entry) => isSection(entry) ? entry.options : [entry]));
+		const comboboxOptions = computed(() => flatOptions.value.map((opt) => ({
+			value: opt.value,
+			label: opt.label,
+			disabled: opt.disabled ?? false
+		})));
+		const modelValueRef = computed({
+			get: () => props.modelValue,
+			set: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
+		});
+		const combobox = useCombobox({
+			options: comboboxOptions,
+			modelValue: modelValueRef,
+			isEnabled,
+			isSearchable,
+			onChange: (value) => {
+				modelValueRef.value = value;
+			},
+			onOpenChange: (isOpen) => {
+				if (isOpen && props.searchable) nextTick(() => {
+					searchInputRef.value?.focus();
+				});
+			}
+		});
+		const sheetOpen = computed({
+			get: () => isSheet.value && combobox.isOpen.value,
+			set: (open) => {
+				if (!open && combobox.isOpen.value) combobox.close();
+			}
+		});
+		const popoverOpen = computed(() => combobox.isOpen.value && !isSheet.value);
+		const listboxTarget = computed(() => isSheet.value && sheetSlot.value ? sheetSlot.value : "body");
+		const { position } = usePositionedLayer({
+			anchor: fieldRef,
+			layer: listboxRef,
+			isOpen: popoverOpen,
+			placement: computed(() => "below"),
+			alignment: computed(() => "start"),
+			gap: 4
+		});
+		useDismiss({
+			container: listboxRef,
+			trigger: fieldRef,
+			isEnabled: popoverOpen,
+			enableEscape: ref(true),
+			onDismiss: () => {
+				combobox.close();
+			}
+		});
+		const selectedOption = computed(() => {
+			if (props.modelValue == null) return null;
+			return flatOptions.value.find((opt) => opt.value === props.modelValue) ?? null;
+		});
+		const fieldLabel = computed(() => props.label || resolvedPlaceholder.value);
+		const hideLabel = computed(() => props.isLabelHidden || !props.label);
+		const statusType = computed(() => {
+			const status = props.status;
+			if (status == null || status === "default") return "default";
+			if (typeof status === "string") return status;
+			return status.type;
+		});
+		const fieldStatus = computed(() => {
+			const status = props.status;
+			if (status && typeof status === "object") return status;
+			if (!props.statusMessage || statusType.value === "default") return void 0;
+			return {
+				type: statusType.value,
+				message: props.statusMessage
+			};
+		});
+		const displayRows = computed(() => {
+			const indexByValue = new Map(combobox.filteredOptions.value.map((option, index) => [option.value, index]));
+			const rows = [];
+			for (const entry of normalizedEntries.value) {
+				if (isSection(entry)) {
+					const children = entry.options.filter((option) => indexByValue.has(option.value));
+					if (children.length === 0) continue;
+					rows.push({
+						kind: "section",
+						title: entry.title
+					});
+					for (const option of children) rows.push({
+						kind: "option",
+						option,
+						index: indexByValue.get(option.value)
+					});
+					continue;
+				}
+				if (!indexByValue.has(entry.value)) continue;
+				rows.push({
+					kind: "option",
+					option: entry,
+					index: indexByValue.get(entry.value)
+				});
+			}
+			return rows;
+		});
+		const displayText = computed(() => {
+			return selectedOption.value?.label ?? resolvedPlaceholder.value;
+		});
+		const isEmpty = computed(() => {
+			return combobox.filteredOptions.value.length === 0;
+		});
+		function onTriggerClick() {
+			if (isEnabled.value) combobox.toggle();
+		}
+		function onTriggerKeyDown(event) {
+			combobox.onKeyDown(event);
+		}
+		function onOptionClick(option) {
+			if (!option.disabled) combobox.select(option.value);
+		}
+		function onClear(event) {
+			event.stopPropagation();
+			modelValueRef.value = null;
+			combobox.close();
+		}
+		function onSearchInput(event) {
+			const target = event.target;
+			combobox.setSearchQuery(target.value);
+			emit("search", target.value);
+		}
+		function getOptionId(index) {
+			return `${listboxId}-option-${index}`;
+		}
+		const anchorWidth = ref(0);
+		function syncAnchorWidth() {
+			anchorWidth.value = fieldRef.value?.getBoundingClientRect().width ?? 0;
+		}
+		const listboxStyle = computed(() => isSheet.value ? void 0 : {
+			top: `${position.value.top}px`,
+			left: `${position.value.left}px`,
+			minWidth: anchorWidth.value > 0 ? `${anchorWidth.value}px` : void 0
+		});
+		watch(combobox.isOpen, (open) => {
+			if (open) syncAnchorWidth();
+		}, { flush: "pre" });
+		onMounted(syncAnchorWidth);
+		watch(() => combobox.activeIndex.value, (index) => {
+			if (index >= 0 && combobox.isOpen.value) nextTick(() => {
+				const listbox = listboxRef.value;
+				const optionEl = listbox?.querySelector(`#${getOptionId(index)}`);
+				if (!listbox || !optionEl) return;
+				const listboxRect = listbox.getBoundingClientRect();
+				const optionRect = optionEl.getBoundingClientRect();
+				if (optionRect.top < listboxRect.top) listbox.scrollTop -= listboxRect.top - optionRect.top;
+				else if (optionRect.bottom > listboxRect.bottom) listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$2, {
+				class: normalizeClass(["astryx-selector", [
+					`size-${props.size}`,
+					`status-${statusType.value}`,
+					`variant-${props.variant}`
+				]]),
+				label: fieldLabel.value,
+				"input-id": selectorId,
+				description: props.description,
+				"is-label-hidden": hideLabel.value,
+				"is-disabled": props.disabled,
+				status: fieldStatus.value,
+				"status-variant": props.statusVariant,
+				width: props.width
+			}, {
+				default: withCtx(() => [
+					createElementVNode("div", {
+						ref_key: "fieldRef",
+						ref: fieldRef,
+						class: normalizeClass(["astryx-selector-field", {
+							"is-open": unref(combobox).isOpen.value,
+							"is-disabled": props.disabled,
+							"is-ghost": props.variant === "ghost"
+						}])
+					}, [createElementVNode("button", {
+						id: selectorId,
+						type: "button",
+						class: normalizeClass(["astryx-selector-trigger", {
+							"is-open": unref(combobox).isOpen.value,
+							"is-disabled": props.disabled
+						}]),
+						disabled: props.disabled,
+						"aria-haspopup": "listbox",
+						"aria-expanded": unref(combobox).isOpen.value,
+						"aria-controls": listboxId,
+						"aria-label": props.label,
+						"aria-activedescendant": unref(combobox).activeIndex.value >= 0 ? getOptionId(unref(combobox).activeIndex.value) : void 0,
+						title: props.disabledReason,
+						onClick: onTriggerClick,
+						onKeydown: onTriggerKeyDown
+					}, [createElementVNode("span", { class: normalizeClass(["astryx-selector-value", {
+						"is-placeholder": !selectedOption.value,
+						"is-rich": unref(slots).selected
+					}]) }, [unref(slots).selected ? renderSlot(_ctx.$slots, "selected", { option: selectedOption.value }, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(displayText.value), 1)], 64))], 2), _cache[1] || (_cache[1] = createElementVNode("span", {
+						class: "astryx-selector-icon",
+						"aria-hidden": "true"
+					}, [createElementVNode("svg", {
+						width: "16",
+						height: "16",
+						viewBox: "0 0 16 16",
+						fill: "none"
+					}, [createElementVNode("path", {
+						d: "M4 6L8 10L12 6",
+						stroke: "currentColor",
+						"stroke-width": "1.5",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					})])], -1))], 42, _hoisted_1), props.clearable && selectedOption.value ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "astryx-selector-clear",
+						"aria-label": resolvedClearLabel.value,
+						onClick: onClear
+					}, [..._cache[2] || (_cache[2] = [createElementVNode("svg", {
+						width: "16",
+						height: "16",
+						viewBox: "0 0 16 16",
+						fill: "none"
+					}, [createElementVNode("path", {
+						d: "M12 4L4 12M4 4L12 12",
+						stroke: "currentColor",
+						"stroke-width": "1.5",
+						"stroke-linecap": "round"
+					})], -1)])], 8, _hoisted_2)) : createCommentVNode("v-if", true)], 2),
+					isSheet.value ? (openBlock(), createBlock(_sfc_main$1, {
+						key: 0,
+						"is-open": sheetOpen.value,
+						"onUpdate:isOpen": _cache[0] || (_cache[0] = ($event) => sheetOpen.value = $event),
+						height: "hug",
+						label: sheetLabel.value,
+						padding: 2
+					}, {
+						default: withCtx(() => [createElementVNode("div", {
+							ref_key: "sheetSlot",
+							ref: sheetSlot,
+							class: "astryx-selector-sheet"
+						}, [createElementVNode("div", _hoisted_3, toDisplayString(sheetLabel.value), 1)], 512)]),
+						_: 1
+					}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true),
+					(openBlock(), createBlock(Teleport, { to: listboxTarget.value }, [withDirectives(createElementVNode("div", {
+						id: listboxId,
+						ref_key: "listboxRef",
+						ref: listboxRef,
+						role: "listbox",
+						class: normalizeClass(["astryx-selector-listbox", { "is-sheet": isSheet.value }]),
+						"data-placement": isSheet.value ? void 0 : unref(position).placement,
+						style: normalizeStyle(listboxStyle.value),
+						tabindex: "-1"
+					}, [props.searchable ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("input", {
+						id: `${selectorId}-search`,
+						ref_key: "searchInputRef",
+						ref: searchInputRef,
+						type: "text",
+						class: "astryx-selector-search-input",
+						"aria-label": resolvedSearchPlaceholder.value,
+						placeholder: resolvedSearchPlaceholder.value,
+						value: unref(combobox).searchQuery.value,
+						onInput: onSearchInput
+					}, null, 40, _hoisted_6)])) : createCommentVNode("v-if", true), !isEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_7, [(openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, rowIndex) => {
+						return openBlock(), createElementBlock(Fragment, { key: row.kind === "section" ? `section-${rowIndex}` : row.option?.value }, [row.kind === "section" ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(row.title), 1)) : row.option && row.index != null ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							id: getOptionId(row.index),
+							role: "option",
+							tabindex: "0",
+							class: normalizeClass(["astryx-selector-option", {
+								"is-active": row.index === unref(combobox).activeIndex.value,
+								"is-selected": row.option.value === props.modelValue,
+								"is-disabled": row.option.disabled
+							}]),
+							"aria-selected": row.option.value === props.modelValue,
+							"aria-disabled": row.option.disabled,
+							onClick: ($event) => onOptionClick(row.option),
+							onKeydown: [withKeys(($event) => onOptionClick(row.option), ["enter"]), withKeys(withModifiers(($event) => onOptionClick(row.option), ["prevent"]), ["space"])]
+						}, [unref(slots).option ? renderSlot(_ctx.$slots, "option", {
+							option: row.option,
+							isActive: row.index === unref(combobox).activeIndex.value,
+							isSelected: row.option.value === props.modelValue
+						}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+							row.option.icon ? (openBlock(), createElementBlock("span", {
+								key: 0,
+								class: normalizeClass(["astryx-selector-option-icon", row.option.icon]),
+								"aria-hidden": "true"
+							}, null, 2)) : createCommentVNode("v-if", true),
+							createElementVNode("span", _hoisted_10, toDisplayString(row.option.label), 1),
+							row.option.description ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(row.option.description), 1)) : createCommentVNode("v-if", true)
+						], 64))], 42, _hoisted_9)) : createCommentVNode("v-if", true)], 64);
+					}), 128))])) : (openBlock(), createElementBlock("div", _hoisted_12, [unref(slots).empty ? renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(resolvedEmptyText.value), 1)], 64))]))], 14, _hoisted_4), [[vShow, unref(combobox).isOpen.value]])], 8, ["to"])),
+					props.name ? (openBlock(), createElementBlock("select", {
+						key: 1,
+						id: `${selectorId}-hidden-select`,
+						name: props.name,
+						value: props.modelValue ?? "",
+						"aria-label": props.label || resolvedPlaceholder.value,
+						tabindex: "-1",
+						style: {
+							"position": "absolute",
+							"left": "-9999px",
+							"width": "1px",
+							"height": "1px"
+						}
+					}, [_cache[3] || (_cache[3] = createElementVNode("option", { value: "" }, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(flatOptions.value, (option) => {
+						return openBlock(), createElementBlock("option", {
+							key: option.value,
+							value: option.value
+						}, toDisplayString(option.label), 9, _hoisted_14);
+					}), 128))], 8, _hoisted_13)) : createCommentVNode("v-if", true)
+				]),
+				_: 3
+			}, 8, [
+				"class",
+				"label",
+				"description",
+				"is-label-hidden",
+				"is-disabled",
+				"status",
+				"status-variant",
+				"width"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/SideNav/index.d.ts

@@ -1,2 +1,2 @@
-import { Bt as _default$1, Gt as SideNavHeadingProps, Ht as SideNavCollapseButtonProps, Jt as SideNavProps, Kt as SideNavItemEmits, Lt as _default$4, Rt as _default$3, Ut as SideNavCollapsible, Vt as _default, Wt as SideNavEmits, Xt as SideNavCollapseContext, Yt as SideNavSectionProps, Zt as useSideNavCollapse, qt as SideNavItemProps, zt as _default$2 } from "../index-Df2YvC8o.js";
+import { Bt as _default$1, Gt as SideNavHeadingProps, Ht as SideNavCollapseButtonProps, Jt as SideNavProps, Kt as SideNavItemEmits, Lt as _default$4, Rt as _default$3, Ut as SideNavCollapsible, Vt as _default, Wt as SideNavEmits, Xt as SideNavCollapseContext, Yt as SideNavSectionProps, Zt as useSideNavCollapse, qt as SideNavItemProps, zt as _default$2 } from "../index-DeOftUMq.js";
 export { _default as SideNav, _default$1 as SideNavCollapseButton, type SideNavCollapseButtonProps, type SideNavCollapseContext, type SideNavCollapsible, type SideNavEmits, _default$2 as SideNavHeading, type SideNavHeadingProps, _default$3 as SideNavItem, type SideNavItemEmits, type SideNavItemProps, type SideNavProps, _default$4 as SideNavSection, type SideNavSectionProps, useSideNavCollapse };

package/dist/SideNav/index.js

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

package/dist/{SideNav-Cdrigq2A.js → SideNav-DcDWBnXJ.js}

@@ -1,11 +1,11 @@
 import { t as useHotkeys } from "./useHotkeys-dABSK1o9.js";
-import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { a as useAstryxMessages } from "./context-DzcK4T_C.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 { t as _sfc_main$5 } from "./Tooltip-mp0NMh_Y.js";
+import { t as _sfc_main$6 } from "./Icon-Bku25g_K.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 { t as _sfc_main$7 } from "./NavItem-FFOisITc.js";
+import { t as _sfc_main$8 } from "./NavDisclosure-DHrSNRDR.js";
 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";
@@ -55,7 +55,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 				"aria-expanded": collapsed.value ? "false" : "true",
 				"aria-controls": unref(collapse).navId || void 0,
 				onClick
-			}, [createElementVNode("span", _hoisted_2$4, [createVNode(_sfc_main$5, {
+			}, [createElementVNode("span", _hoisted_2$4, [createVNode(_sfc_main$6, {
 				icon: "chevronLeft",
 				size: "sm",
 				class: normalizeClass(["astryx-side-nav-collapse__chevron", { "astryx-side-nav-collapse__chevron--collapsed": collapsed.value }])
@@ -307,12 +307,12 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 		const wholeLink = computed(() => Boolean(props.headingHref) && !hasMenu.value && !props.superheadingHref && !props.subheadingHref);
 		const linkRoot = computed(() => resolveNavRoot(props.headingHref, false, props.as));
 		return (_ctx, _cache) => {
-			return collapsed.value && hasIcon.value ? (openBlock(), createBlock(_sfc_main$8, {
+			return collapsed.value && hasIcon.value ? (openBlock(), createBlock(_sfc_main$5, {
 				key: 0,
 				content: __props.heading,
 				placement: "end"
 			}, {
-				default: withCtx(() => [hasMenu.value ? (openBlock(), createBlock(_sfc_main$7, {
+				default: withCtx(() => [hasMenu.value ? (openBlock(), createBlock(_sfc_main$8, {
 					key: 0,
 					hover: "",
 					placement: "end",
@@ -359,7 +359,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 					_ctx.$slots.end ? (openBlock(), createElementBlock("span", _hoisted_12, [renderSlot(_ctx.$slots, "end")])) : createCommentVNode("v-if", true)
 				]),
 				_: 3
-			}, 8, ["href", "to"])) : !collapsed.value && hasMenu.value ? (openBlock(), createBlock(_sfc_main$7, {
+			}, 8, ["href", "to"])) : !collapsed.value && hasMenu.value ? (openBlock(), createBlock(_sfc_main$8, {
 				key: 2,
 				hover: "",
 				label: __props.heading
@@ -407,7 +407,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 							"aria-expanded": isOpen ? "true" : "false",
 							"aria-controls": panelId,
 							"aria-haspopup": "menu"
-						}, [createVNode(_sfc_main$5, {
+						}, [createVNode(_sfc_main$6, {
 							icon: "chevronDown",
 							size: "sm",
 							class: normalizeClass({ "astryx-side-nav-heading__chevron-icon--open": isOpen })
@@ -571,12 +571,12 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		}
 		const toggleLabel = computed(() => nestedCollapsed.value ? messages.value.nav.expandItem(props.label) : messages.value.nav.collapseItem(props.label));
 		return (_ctx, _cache) => {
-			return sidebarCollapsed.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [hasIcon.value && !hasChildren.value ? (openBlock(), createBlock(_sfc_main$8, {
+			return sidebarCollapsed.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [hasIcon.value && !hasChildren.value ? (openBlock(), createBlock(_sfc_main$5, {
 				key: 0,
 				content: __props.label,
 				placement: "end"
 			}, {
-				default: withCtx(() => [createVNode(_sfc_main$6, {
+				default: withCtx(() => [createVNode(_sfc_main$7, {
 					block: "",
 					"is-icon-only": "",
 					as: __props.as,
@@ -611,7 +611,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"target"
 				])]),
 				_: 3
-			}, 8, ["content"])) : hasIcon.value ? (openBlock(), createBlock(_sfc_main$7, {
+			}, 8, ["content"])) : hasIcon.value ? (openBlock(), createBlock(_sfc_main$8, {
 				key: 1,
 				hover: "",
 				placement: "end",
@@ -638,7 +638,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			}, 8, ["label"])) : createCommentVNode("v-if", true)], 64)) : (openBlock(), createElementBlock("div", _hoisted_5, [splitToggle.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: normalizeClass(["astryx-nav-item astryx-nav-item--block", [`astryx-nav-item--${__props.size}`, { "astryx-nav-item--selected": __props.isSelected }]])
-			}, [createVNode(_sfc_main$6, {
+			}, [createVNode(_sfc_main$7, {
 				plain: "",
 				class: "astryx-side-nav-item__split",
 				as: __props.as,
@@ -686,11 +686,11 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				"aria-controls": childrenId,
 				"aria-label": toggleLabel.value,
 				onClick: withModifiers(toggleNested, ["stop"])
-			}, [createVNode(_sfc_main$5, {
+			}, [createVNode(_sfc_main$6, {
 				icon: "chevronDown",
 				size: "sm",
 				class: normalizeClass(["astryx-side-nav-item__chevron", { "astryx-side-nav-item__chevron--open": !nestedCollapsed.value }])
-			}, null, 8, ["class"])], 8, _hoisted_6)], 2)) : (openBlock(), createBlock(_sfc_main$6, {
+			}, null, 8, ["class"])], 8, _hoisted_6)], 2)) : (openBlock(), createBlock(_sfc_main$7, {
 				key: 1,
 				block: "",
 				as: __props.as,
@@ -719,7 +719,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				} : void 0,
 				_ctx.$slots.end || canNest.value ? {
 					name: "end",
-					fn: withCtx(() => [renderSlot(_ctx.$slots, "end"), canNest.value ? (openBlock(), createBlock(_sfc_main$5, {
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "end"), canNest.value ? (openBlock(), createBlock(_sfc_main$6, {
 						key: 0,
 						icon: "chevronDown",
 						size: "sm",

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-CVn0GBdB.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-cG1E0U2s.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-DxmLfh8O.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../Stepper-DZKaqEoz.js";
 export { _sfc_main as Step, _sfc_main$1 as Stepper };

package/dist/{Stepper-DxmLfh8O.js → Stepper-DZKaqEoz.js}

@@ -1,5 +1,5 @@
 import { t as _sfc_main$3 } from "./VisuallyHidden-C7NN3VEP.js";
-import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { a as useAstryxMessages } from "./context-DzcK4T_C.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-Df2YvC8o.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-DeOftUMq.js";
 export { _default as Switch, type SwitchChangeAction, type SwitchChangeEvent, type SwitchEmits, type SwitchProps, type SwitchSize, type SwitchSlots, type SwitchStatus, type SwitchStatusType };

package/dist/TabList/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TabListProps, c as TabMenuOption, 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";
+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-CNjbOgty.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$1, r as _sfc_main, t as _sfc_main$2 } from "../TabList-C411uNQU.js";
+import { n as _sfc_main$1, r as _sfc_main, t as _sfc_main$2 } from "../TabList-hm06QPiW.js";
 export { _sfc_main as Tab, _sfc_main$1 as TabList, _sfc_main$2 as TabMenu };

package/dist/{TabList-C411uNQU.js → TabList-hm06QPiW.js}

@@ -1,7 +1,7 @@
 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 { t as _sfc_main$3 } from "./Icon-Bku25g_K.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";
@@ -114,12 +114,18 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		hasDivider: {
 			type: Boolean,
 			default: false
-		}
+		},
+		isFullBleed: {
+			type: Boolean,
+			default: false
+		},
+		edgeCompensation: {}
 	},
 	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);
 		const tabs = reactive([]);
 		const focusedValue = ref(props.value);
 		const enabledTabs = computed(() => tabs.filter((tab) => !tab.disabled));
@@ -178,7 +184,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				class: normalizeClass(["astryx-tab-list", [
 					`astryx-tab-list--size-${__props.size}`,
 					`astryx-tab-list--layout-${__props.layout}`,
-					__props.hasDivider && "astryx-tab-list--has-divider"
+					__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);