@astryx-vue/core 0.2.2 → 0.2.4

package/dist/RadioList/index.d.ts

@@ -1,2 +1,2 @@
-import { an as _default$1, mn as RadioListProps, on as RadioListItemProps, sn as _default } from "../index-DNRBbwp_.js";
+import { cn as RadioListItemProps, gn as RadioListProps, ln as _default, sn as _default$1 } from "../index-EtZgovdH.js";
 export { _default as RadioList, _default$1 as RadioListItem, type RadioListItemProps, type RadioListProps };

package/dist/RadioList/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../RadioList-DI8ujXcT.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../RadioList-CPOJn9Th.js";
 export { _sfc_main as RadioList, _sfc_main$1 as RadioListItem };

package/dist/{RadioList-DI8ujXcT.js → RadioList-CPOJn9Th.js}

@@ -1,4 +1,4 @@
-import { n as _sfc_main$3, t as _sfc_main$2 } from "./RadioGroup-BqjdSCfJ.js";
+import { n as _sfc_main$3, t as _sfc_main$2 } from "./RadioGroup-CBqUPq_L.js";
 import { createBlock, createSlots, defineComponent, mergeModels, openBlock, renderSlot, useModel, withCtx } from "vue";
 //#region src/Radio/RadioList.vue
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({

package/dist/Resizable/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Resizable-D-TBCg0Y.js";
+import { t as _sfc_main } from "../ResizeHandle-DYy0e3v9.js";
 export { _sfc_main as ResizeHandle };

package/dist/{Resizable-D-TBCg0Y.js → ResizeHandle-DYy0e3v9.js}

@@ -1,4 +1,4 @@
-import { a as useAstryxMessages } from "./context-CiKncNSH.js";
+import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, useAttrs, useTemplateRef } from "vue";
 import "../styles/resize-handle.css";
 //#region src/Resizable/ResizeHandle.vue

package/dist/ScrollableArea/index.d.ts

@@ -1,2 +1,2 @@
-import { in as ScrollableAreaSlots, nn as _default, rn as ScrollableAreaProps } from "../index-DNRBbwp_.js";
+import { an as ScrollableAreaProps, in as _default, on as ScrollableAreaSlots } from "../index-EtZgovdH.js";
 export { _default as ScrollableArea, type ScrollableAreaProps, type ScrollableAreaSlots };

package/dist/SelectableCard/index.d.ts

@@ -1,2 +1,2 @@
-import { $t as SelectableCardEmits, Qt as _default, en as SelectableCardProps, tn as SelectableCardSlots } from "../index-DNRBbwp_.js";
+import { en as _default, nn as SelectableCardProps, rn as SelectableCardSlots, tn as SelectableCardEmits } from "../index-EtZgovdH.js";
 export { _default as SelectableCard, _default as default, type SelectableCardEmits, type SelectableCardProps, type SelectableCardSlots };

package/dist/Selector/index.d.ts

@@ -1,2 +1,2 @@
-import { a as SelectorOptionInput, c as SelectorSection, d as SelectorStatus, f as SelectorStatusInput, i as SelectorOption, l as SelectorSize, m as SelectorVariant, n as SelectorEmits, o as SelectorPresentation, p as SelectorStatusVariant, r as SelectorEntry, s as SelectorProps, t as _default, u as SelectorSlots } from "../index-DGXviOlp.js";
-export { _default as Selector, type SelectorEmits, type SelectorEntry, type SelectorOption, type SelectorOptionInput, type SelectorPresentation, type SelectorProps, type SelectorSection, type SelectorSize, type SelectorSlots, type SelectorStatus, type SelectorStatusInput, type SelectorStatusVariant, type SelectorVariant };
+import { a as SelectorOption, c as SelectorProps, d as SelectorSlots, f as SelectorStatus, h as SelectorVariant, i as SelectorIndicatorPosition, l as SelectorSection, m as SelectorStatusVariant, n as SelectorEmits, o as SelectorOptionInput, p as SelectorStatusInput, r as SelectorEntry, s as SelectorPresentation, t as _default, u as SelectorSize } from "../index-D-ezcKaY.js";
+export { _default as Selector, type SelectorEmits, type SelectorEntry, type SelectorIndicatorPosition, type SelectorOption, type SelectorOptionInput, type SelectorPresentation, type SelectorProps, type SelectorSection, type SelectorSize, type SelectorSlots, type SelectorStatus, type SelectorStatusInput, type SelectorStatusVariant, type SelectorVariant };

package/dist/Selector/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Selector-DE2IEFML.js";
+import { t as _sfc_main } from "../Selector-5N-hq2nF.js";
 export { _sfc_main as Selector };

package/dist/Selector-5N-hq2nF.js

@@ -0,0 +1,618 @@
+import { t as useAnnounce } from "./announce-Cnio10Wk.js";
+import { t as useCombobox } from "./useCombobox-CTo5C-gc.js";
+import { t as useDismiss } from "./useDismiss-Cj8x_51F.js";
+import { t as useFieldControlState } from "./useFieldControlState-voICDrys.js";
+import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
+import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
+import { t as _sfc_main$1 } from "./BottomSheet-BV6vfgGu.js";
+import { t as _sfc_main$2 } from "./Icon-bteSId7T.js";
+import { t as _sfc_main$3 } from "./Spinner-9cYUCnDy.js";
+import { t as useIndicator } from "./useIndicator-i1NORM7W.js";
+import { t as _sfc_main$4 } from "./Field-8zRxzDHE.js";
+import { t as INPUT_GROUP_KEY } from "./context-D5-MwxnN.js";
+import { n as fieldStatusPlacement, r as _sfc_main$5, t as searchResultMessage } from "./searchResultMessage-CCnq-_ce.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, 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",
+	"role",
+	"aria-haspopup",
+	"aria-expanded",
+	"aria-controls",
+	"aria-readonly",
+	"aria-busy",
+	"aria-required",
+	"aria-label",
+	"aria-describedby",
+	"aria-autocomplete",
+	"aria-activedescendant",
+	"title"
+];
+const _hoisted_2 = { class: "astryx-selector-value-label" };
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = { class: "astryx-selector-sheet-title" };
+const _hoisted_5 = ["data-placement"];
+const _hoisted_6 = {
+	key: 0,
+	class: "astryx-selector-search"
+};
+const _hoisted_7 = [
+	"id",
+	"aria-label",
+	"aria-expanded",
+	"aria-activedescendant",
+	"placeholder",
+	"value"
+];
+const _hoisted_8 = ["aria-label"];
+const _hoisted_9 = {
+	key: 1,
+	class: "astryx-selector-options"
+};
+const _hoisted_10 = {
+	key: 0,
+	class: "astryx-selector-section",
+	role: "presentation"
+};
+const _hoisted_11 = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onClick",
+	"onKeydown"
+];
+const _hoisted_12 = {
+	key: 0,
+	class: "astryx-selector-option-mark"
+};
+const _hoisted_13 = { class: "astryx-selector-option-body" };
+const _hoisted_14 = { class: "astryx-selector-option-copy" };
+const _hoisted_15 = { class: "astryx-selector-option-label" };
+const _hoisted_16 = {
+	key: 0,
+	class: "astryx-selector-option-description"
+};
+const _hoisted_17 = {
+	key: 1,
+	class: "astryx-selector-option-mark"
+};
+const _hoisted_18 = {
+	key: 2,
+	class: "astryx-selector-empty",
+	role: "presentation"
+};
+const _hoisted_19 = [
+	"id",
+	"name",
+	"value",
+	"disabled",
+	"aria-label"
+];
+const _hoisted_20 = ["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: {},
+		emptySearchText: {},
+		label: {},
+		isLabelHidden: {
+			type: Boolean,
+			default: false
+		},
+		description: {},
+		width: {},
+		name: {},
+		isReadOnly: {
+			type: Boolean,
+			default: false
+		},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		isOptional: {
+			type: Boolean,
+			default: false
+		},
+		isRequired: {
+			type: Boolean,
+			default: false
+		},
+		indicatorPosition: { default: "end" }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"search"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const SelectionMark = useIndicator("check");
+		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 resolvedEmptySearchText = computed(() => props.emptySearchText ?? messages.value.selector.emptySearch);
+		const inputGroup = inject(INPUT_GROUP_KEY, null);
+		const inGroup = computed(() => inputGroup != null);
+		const control = useFieldControlState({
+			disabled: () => props.disabled || (inputGroup?.disabled.value ?? false),
+			readOnly: () => props.isReadOnly,
+			loading: () => props.isLoading
+		});
+		const announce = useAnnounce();
+		const readOnlyId = `${selectorId}-readonly`;
+		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 = control.canActivate;
+		const isSearchable = computed(() => props.searchable && control.canActivate.value);
+		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 effectiveStatusVariant = computed(() => fieldStatusPlacement(props.variant, props.statusVariant));
+		const statusGlyph = computed(() => {
+			const type = statusType.value;
+			if (type !== "error" && type !== "warning" && type !== "success" || effectiveStatusVariant.value === "detached") return void 0;
+			return type;
+		});
+		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;
+		});
+		const isSearching = computed(() => props.searchable && combobox.searchQuery.value.trim() !== "");
+		const showEmpty = computed(() => isEmpty.value && !control.isLoading.value);
+		const describedBy = computed(() => {
+			return [inGroup.value ? inputGroup?.describedBy.value : void 0, control.isReadOnly.value ? readOnlyId : void 0].filter(Boolean).join(" ") || void 0;
+		});
+		const announcement = computed(() => searchResultMessage({
+			isOpen: combobox.isOpen.value,
+			isLoading: control.isLoading.value,
+			query: combobox.searchQuery.value,
+			matchCount: combobox.filteredOptions.value.length,
+			emptyText: resolvedEmptyText.value,
+			emptySearchText: resolvedEmptySearchText.value,
+			resultCount: messages.value.selector.resultCount
+		}));
+		watch(announcement, (message) => {
+			if (message) announce(message);
+		});
+		function onTriggerClick() {
+			if (control.canActivate.value) combobox.toggle();
+		}
+		function onTriggerKeyDown(event) {
+			combobox.onKeyDown(event);
+		}
+		function onOptionClick(option) {
+			if (!option.disabled) combobox.select(option.value);
+		}
+		function onClear(event) {
+			event.stopPropagation();
+			if (!control.canActivate.value) return;
+			modelValueRef.value = null;
+			combobox.close();
+		}
+		function clearSearch(event) {
+			event.stopPropagation();
+			combobox.setSearchQuery("");
+			emit("search", "");
+			searchInputRef.value?.focus();
+		}
+		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$4, {
+				class: normalizeClass(["astryx-selector", [
+					`size-${props.size}`,
+					`status-${statusType.value}`,
+					`variant-${props.variant}`
+				]]),
+				label: fieldLabel.value,
+				"input-id": selectorId,
+				"is-label-hidden": inGroup.value || hideLabel.value,
+				"is-disabled": unref(control).isDisabled.value,
+				"is-optional": inGroup.value ? false : props.isOptional,
+				"is-required": inGroup.value ? false : props.isRequired,
+				description: inGroup.value ? void 0 : props.description,
+				status: inGroup.value ? void 0 : fieldStatus.value,
+				"status-variant": effectiveStatusVariant.value,
+				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": unref(control).isDisabled.value,
+							"is-readonly": unref(control).isReadOnly.value,
+							"is-loading": unref(control).isLoading.value,
+							"is-ghost": props.variant === "ghost"
+						}])
+					}, [
+						createElementVNode("button", {
+							id: selectorId,
+							type: "button",
+							class: normalizeClass(["astryx-selector-trigger", {
+								"is-open": unref(combobox).isOpen.value,
+								"is-disabled": unref(control).isDisabled.value
+							}]),
+							disabled: unref(control).isDisabled.value,
+							role: unref(control).isReadOnly.value || !props.searchable ? "combobox" : void 0,
+							"aria-haspopup": unref(control).isReadOnly.value ? void 0 : "listbox",
+							"aria-expanded": unref(control).isReadOnly.value ? false : unref(combobox).isOpen.value,
+							"aria-controls": unref(control).isReadOnly.value ? void 0 : listboxId,
+							"aria-readonly": unref(control).isReadOnly.value || void 0,
+							"aria-busy": unref(control).isLoading.value || void 0,
+							"aria-required": props.isRequired || void 0,
+							"aria-label": props.label,
+							"aria-describedby": describedBy.value,
+							"aria-autocomplete": props.searchable ? void 0 : "none",
+							"aria-activedescendant": !props.searchable && !unref(control).isReadOnly.value && 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,
+							"is-grouped": inGroup.value
+						}]) }, [unref(slots).selected ? renderSlot(_ctx.$slots, "selected", { option: selectedOption.value }, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [selectedOption.value?.icon ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							class: normalizeClass(["astryx-selector-value-icon", selectedOption.value.icon]),
+							"aria-hidden": "true"
+						}, null, 2)) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, toDisplayString(displayText.value), 1)], 64))], 2)], 42, _hoisted_1),
+						unref(control).isLoading.value ? (openBlock(), createBlock(_sfc_main$3, {
+							key: 0,
+							class: "astryx-selector-spinner",
+							size: "sm",
+							"aria-label": unref(messages).selector.loading
+						}, null, 8, ["aria-label"])) : createCommentVNode("v-if", true),
+						props.clearable && selectedOption.value && unref(control).canActivate.value ? (openBlock(), createElementBlock("button", {
+							key: 1,
+							type: "button",
+							class: "astryx-selector-clear",
+							"aria-label": resolvedClearLabel.value,
+							onClick: onClear
+						}, [createVNode(_sfc_main$2, {
+							icon: "close",
+							size: "sm"
+						})], 8, _hoisted_3)) : createCommentVNode("v-if", true),
+						statusGlyph.value ? (openBlock(), createBlock(_sfc_main$5, {
+							key: 2,
+							type: statusGlyph.value,
+							message: fieldStatus.value?.message,
+							tooltip: effectiveStatusVariant.value === "tooltip"
+						}, null, 8, [
+							"type",
+							"message",
+							"tooltip"
+						])) : unref(control).canActivate.value ? (openBlock(), createBlock(_sfc_main$2, {
+							key: 3,
+							class: "astryx-selector-icon",
+							icon: "chevronDown",
+							size: "sm"
+						})) : createCommentVNode("v-if", true),
+						unref(control).isReadOnly.value ? (openBlock(), createElementBlock("span", {
+							key: 4,
+							id: readOnlyId,
+							class: "astryx-visually-hidden"
+						}, toDisplayString(unref(messages).selector.readOnly), 1)) : 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_4, 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_6, [
+						createVNode(_sfc_main$2, {
+							class: "astryx-selector-search-icon",
+							icon: "search",
+							size: "sm"
+						}),
+						createElementVNode("input", {
+							id: `${selectorId}-search`,
+							ref_key: "searchInputRef",
+							ref: searchInputRef,
+							type: "text",
+							class: "astryx-selector-search-input",
+							role: "combobox",
+							autocomplete: "off",
+							"aria-label": resolvedSearchPlaceholder.value,
+							"aria-expanded": unref(combobox).isOpen.value,
+							"aria-controls": listboxId,
+							"aria-autocomplete": "list",
+							"aria-activedescendant": unref(combobox).activeIndex.value >= 0 ? getOptionId(unref(combobox).activeIndex.value) : void 0,
+							placeholder: resolvedSearchPlaceholder.value,
+							value: unref(combobox).searchQuery.value,
+							onInput: onSearchInput,
+							onKeydown: onTriggerKeyDown
+						}, null, 40, _hoisted_7),
+						unref(combobox).searchQuery.value ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: "astryx-selector-search-clear",
+							"aria-label": resolvedClearLabel.value,
+							onClick: clearSearch
+						}, [createVNode(_sfc_main$2, {
+							icon: "close",
+							size: "sm"
+						})], 8, _hoisted_8)) : createCommentVNode("v-if", true)
+					])) : createCommentVNode("v-if", true), !unref(control).isLoading.value && !isEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_9, [(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_10, 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"])]
+						}, [
+							props.indicatorPosition === "start" ? (openBlock(), createElementBlock("span", _hoisted_12, [(openBlock(), createBlock(resolveDynamicComponent(unref(SelectionMark)), {
+								class: "astryx-selector-check",
+								state: row.option.value === props.modelValue ? "checked" : "unchecked",
+								size: "sm",
+								"is-disabled": row.option.disabled
+							}, null, 8, ["state", "is-disabled"]))])) : createCommentVNode("v-if", true),
+							createElementVNode("span", _hoisted_13, [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_14, [createElementVNode("span", _hoisted_15, toDisplayString(row.option.label), 1), row.option.description ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(row.option.description), 1)) : createCommentVNode("v-if", true)])], 64))]),
+							props.indicatorPosition === "end" ? (openBlock(), createElementBlock("span", _hoisted_17, [(openBlock(), createBlock(resolveDynamicComponent(unref(SelectionMark)), {
+								class: "astryx-selector-check",
+								state: row.option.value === props.modelValue ? "checked" : "unchecked",
+								size: "sm",
+								"is-disabled": row.option.disabled
+							}, null, 8, ["state", "is-disabled"]))])) : createCommentVNode("v-if", true)
+						], 42, _hoisted_11)) : createCommentVNode("v-if", true)], 64);
+					}), 128))])) : showEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_18, [!isSearching.value && unref(slots).empty ? renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(isSearching.value ? resolvedEmptySearchText.value : resolvedEmptyText.value), 1)], 64))])) : createCommentVNode("v-if", true)], 14, _hoisted_5), [[vShow, unref(combobox).isOpen.value]])], 8, ["to"])),
+					props.name ? (openBlock(), createElementBlock("select", {
+						key: 1,
+						id: `${selectorId}-hidden-select`,
+						name: props.name,
+						value: props.modelValue ?? "",
+						disabled: unref(control).isDisabled.value,
+						"aria-label": props.label || resolvedPlaceholder.value,
+						tabindex: "-1",
+						style: {
+							"position": "absolute",
+							"left": "-9999px",
+							"width": "1px",
+							"height": "1px"
+						}
+					}, [_cache[1] || (_cache[1] = 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_20);
+					}), 128))], 8, _hoisted_19)) : createCommentVNode("v-if", true)
+				]),
+				_: 3
+			}, 8, [
+				"class",
+				"label",
+				"is-label-hidden",
+				"is-disabled",
+				"is-optional",
+				"is-required",
+				"description",
+				"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-DNRBbwp_.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 };
+import { $t as useSideNavCollapse, Bt as _default$1, Gt as SideNavHandle, Ht as SideNavCollapseButtonProps, Jt as SideNavItemProps, Kt as SideNavHeadingProps, Lt as _default$4, Qt as SideNavCollapseContext, Rt as _default$3, Ut as SideNavCollapsible, Vt as _default, Wt as SideNavEmits, Xt as SideNavResizable, Yt as SideNavProps, Zt as SideNavSectionProps, qt as SideNavItemEmits, zt as _default$2 } from "../index-EtZgovdH.js";
+export { _default as SideNav, _default$1 as SideNavCollapseButton, type SideNavCollapseButtonProps, type SideNavCollapseContext, type SideNavCollapsible, type SideNavEmits, type SideNavHandle, _default$2 as SideNavHeading, type SideNavHeadingProps, _default$3 as SideNavItem, type SideNavItemEmits, type SideNavItemProps, type SideNavProps, type SideNavResizable, _default$4 as SideNavSection, type SideNavSectionProps, useSideNavCollapse };