iryx-ui 0.13.0 → 0.14.0

package/dist/component-names.d.ts

@@ -3,5 +3,5 @@
  * Consumed by the Vue plugin (global registration) and the Nuxt module
  * (auto-imports). Keep in sync with `src/components/index.ts`.
  */
-export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DatePicker", "DateRangePicker", "Dialog", "Drawer", "DropdownMenu", "EmptyState", "FileUpload", "Form", "FormField", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
+export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DatePicker", "DateRangePicker", "Dialog", "Drawer", "DropdownMenu", "EmptyState", "FileUpload", "Form", "FormField", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
 export type ComponentName = (typeof componentNames)[number];

package/dist/component-names.js

@@ -1,4 +1,4 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DatePicker.DateRangePicker.Dialog.Drawer.DropdownMenu.EmptyState.FileUpload.Form.FormField.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split(".");
+var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DatePicker.DateRangePicker.Dialog.Drawer.DropdownMenu.EmptyState.FileUpload.Form.FormField.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split(".");
 //#endregion
 export { e as componentNames };

package/dist/components/Banner.vue.d.ts

@@ -65,9 +65,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onClose?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    label: string;
     unstyled: boolean;
     as: string;
-    label: string;
     closeLabel: string;
     contained: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/Breadcrumb.vue.d.ts

@@ -32,8 +32,8 @@ type __VLS_Slots = {} & {
     separator?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<BreadcrumbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbProps> & Readonly<{}>, {
-    unstyled: boolean;
     label: string;
+    unstyled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/Combobox.vue.d.ts

@@ -21,8 +21,22 @@ export interface ComboboxProps extends ComboboxRootProps {
     /** Mark the field as invalid — styles the border and ring red. */
     invalid?: boolean;
     id?: string;
+    /**
+     * Hold several values. The model becomes an array and each choice is drawn
+     * as a removable chip inside the field.
+     */
+    multiple?: boolean;
     /** Shown when the query matches nothing. Override for non-English apps. */
     emptyText?: string;
+    /**
+     * Swap the dropdown arrow for a clear button once something is selected.
+     * Clearing empties the query too and returns focus to the input.
+     */
+    clearable?: boolean;
+    /** Accessible name for that button — override for non-English apps. */
+    clearLabel?: string;
+    /** Accessible name for a chip's remove button. Receives the chip's label. */
+    removeLabel?: (label: string) => string;
     /**
      * Offer a "create" row when the query matches no option's label, for
      * adding a client or item without leaving the field. Selecting it emits
@@ -49,6 +63,10 @@ export interface ComboboxProps extends ComboboxRootProps {
         anchor?: string;
         input?: string;
         trigger?: string;
+        clear?: string;
+        tag?: string;
+        tagText?: string;
+        tagDelete?: string;
         content?: string;
         viewport?: string;
         item?: string;
@@ -57,21 +75,26 @@ export interface ComboboxProps extends ComboboxRootProps {
         groupLabel?: string;
     };
 }
-declare var __VLS_50: {
+declare var __VLS_16: {
+    option: ComboboxItemOption;
+    remove: () => void;
+}, __VLS_70: {
     query: string;
-}, __VLS_58: {
+}, __VLS_78: {
     query: string;
-}, __VLS_60: {}, __VLS_139: {
+}, __VLS_80: {}, __VLS_159: {
     query: string;
 };
 type __VLS_Slots = {} & {
-    empty?: (props: typeof __VLS_50) => any;
+    tag?: (props: typeof __VLS_16) => any;
+} & {
+    empty?: (props: typeof __VLS_70) => any;
 } & {
-    empty?: (props: typeof __VLS_58) => any;
+    empty?: (props: typeof __VLS_78) => any;
 } & {
-    default?: (props: typeof __VLS_60) => any;
+    default?: (props: typeof __VLS_80) => any;
 } & {
-    create?: (props: typeof __VLS_139) => any;
+    create?: (props: typeof __VLS_159) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: AcceptableValue) => any;
@@ -90,12 +113,16 @@ declare const __VLS_base: import("vue").DefineComponent<ComboboxProps, {}, {}, {
     } | undefined) => any) | undefined;
     onCreate?: ((query: string) => any) | undefined;
 }>, {
+    multiple: boolean;
     disabled: boolean;
     unstyled: boolean;
     open: boolean;
     defaultOpen: boolean;
     invalid: boolean;
     emptyText: string;
+    clearable: boolean;
+    clearLabel: string;
+    removeLabel: (label: string) => string;
     create: boolean;
     createLabel: (query: string) => string;
     virtual: boolean;

package/dist/components/Combobox.vue_vue_type_script_setup_true_lang.js

@@ -2,11 +2,11 @@ import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
 import { useFormField as n } from "../composables/form.js";
 import { comboboxTheme as ee } from "../theme/combobox.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, vShow as te, withCtx as y, withDirectives as b } from "vue";
-import { ArrowDown01Icon as x, Tick02Icon as S } from "@hugeicons/core-free-icons";
-import { ComboboxAnchor as ne, ComboboxContent as re, ComboboxEmpty as ie, ComboboxGroup as ae, ComboboxInput as oe, ComboboxItem as C, ComboboxItemIndicator as w, ComboboxLabel as se, ComboboxPortal as T, ComboboxRoot as E, ComboboxTrigger as D, ComboboxViewport as O, ComboboxVirtualizer as k, useFilter as A, useForwardPropsEmits as j } from "reka-ui";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, vShow as b, watch as x, withCtx as S, withDirectives as te, withModifiers as ne } from "vue";
+import { ArrowDown01Icon as re, Cancel01Icon as C, Tick02Icon as w } from "@hugeicons/core-free-icons";
+import { ComboboxAnchor as T, ComboboxCancel as ie, ComboboxContent as ae, ComboboxEmpty as oe, ComboboxGroup as se, ComboboxInput as ce, ComboboxItem as E, ComboboxItemIndicator as D, ComboboxLabel as le, ComboboxPortal as ue, ComboboxRoot as de, ComboboxTrigger as fe, ComboboxViewport as pe, ComboboxVirtualizer as me, useFilter as he, useForwardPropsEmits as ge } from "reka-ui";
 //#region src/components/Combobox.vue?vue&type=script&setup=true&lang.ts
-var M = /*@__PURE__*/ u({
+var _e = ["aria-label", "onClick"], O = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "Combobox",
 	props: {
@@ -18,7 +18,20 @@ var M = /*@__PURE__*/ u({
 			default: void 0
 		},
 		id: {},
+		multiple: {
+			type: Boolean,
+			default: void 0
+		},
 		emptyText: { default: "No results found." },
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		clearLabel: { default: "Clear" },
+		removeLabel: {
+			type: Function,
+			default: (e) => `Remove ${e}`
+		},
 		create: {
 			type: Boolean,
 			default: void 0
@@ -55,7 +68,6 @@ var M = /*@__PURE__*/ u({
 		resetModelValueOnClear: { type: Boolean },
 		modelValue: {},
 		defaultValue: {},
-		multiple: { type: Boolean },
 		dir: {},
 		disabled: {
 			type: Boolean,
@@ -74,128 +86,185 @@ var M = /*@__PURE__*/ u({
 		"update:open",
 		"create"
 	],
-	setup(u, { emit: M }) {
-		let N = u, P = M, F = j(i(() => {
-			let { items: e, placeholder: t, size: n, invalid: ee, id: r, emptyText: i, create: a, createLabel: o, virtual: s, estimateSize: c, overscan: l, unstyled: u, class: d, ui: f, ...p } = N;
-			return p;
-		}), P);
-		function I(e) {
+	setup(d, { emit: O }) {
+		let k = d, A = O, j = h(k.modelValue ?? k.defaultValue);
+		x(() => k.modelValue, (e) => {
+			e !== void 0 && (j.value = e);
+		});
+		function M(e) {
+			j.value = e, A("update:modelValue", e);
+		}
+		let N = i(() => {
+			if (!k.clearable || k.disabled) return !1;
+			let e = j.value;
+			return Array.isArray(e) ? e.length > 0 : e != null && e !== "";
+		}), P = ge(i(() => {
+			let { items: e, placeholder: t, size: n, invalid: ee, id: r, emptyText: i, clearable: a, clearLabel: o, removeLabel: s, create: c, createLabel: l, virtual: u, estimateSize: d, overscan: f, unstyled: p, class: m, ui: h, defaultValue: g, modelValue: _, ...v } = k;
+			return {
+				...v,
+				modelValue: j.value
+			};
+		}), A);
+		function F(e) {
 			return typeof e == "string" ? {
 				label: e,
 				value: e
 			} : e;
 		}
-		function L(e) {
+		function I(e) {
 			return typeof e != "string" && "items" in e;
 		}
-		let R = i(() => {
-			let e = N.items ?? [];
-			return e.some(L) ? e.map((e) => L(e) ? e : {
+		let L = i(() => {
+			let e = k.items ?? [];
+			return e.some(I) ? e.map((e) => I(e) ? e : {
 				label: "",
 				items: [e]
 			}) : void 0;
-		}), z = i(() => (N.items ?? []).flatMap((e) => L(e) ? e.items.map(I) : [I(e)])), B = i(() => !!N.virtual), V = m(""), H = m("");
-		function U(e) {
-			H.value = e.target.value;
+		}), R = i(() => (k.items ?? []).flatMap((e) => I(e) ? e.items.map(F) : [F(e)])), z = i(() => !!k.virtual), B = h(""), V = h("");
+		function ve(e) {
+			V.value = e.target.value;
 		}
-		let { contains: W } = A({ sensitivity: "base" }), G = i(() => {
-			let e = H.value.trim();
-			return e ? z.value.filter((t) => W(t.label, e)) : z.value;
-		});
-		function ce(e) {
-			let t = (e) => z.value.find((t) => t.value === e)?.label ?? String(e ?? "");
-			return Array.isArray(e) ? e.map(t).join(", ") : e == null || e === "" ? "" : t(e);
+		let { contains: ye } = he({ sensitivity: "base" }), H = i(() => {
+			let e = V.value.trim();
+			return e ? R.value.filter((t) => ye(t.label, e)) : R.value;
+		}), U = i(() => {
+			let e = j.value;
+			return Array.isArray(e) ? e.map((e) => R.value.find((t) => t.value === e) ?? {
+				label: String(e),
+				value: String(e)
+			}) : [];
+		}), W = i(() => !!k.multiple && U.value.length > 0);
+		function G(e) {
+			let t = j.value;
+			Array.isArray(t) && M(t.filter((t) => t !== e));
 		}
-		function le(e) {
+		function be(e) {
+			e.key !== "Backspace" || !W.value || e.target.value === "" && (e.preventDefault(), G(U.value[U.value.length - 1].value));
+		}
+		function xe(e) {
+			let t = (e) => R.value.find((t) => t.value === e)?.label ?? String(e ?? "");
+			return Array.isArray(e) ? W.value ? "" : e.map(t).join(", ") : e == null || e === "" ? "" : t(e);
+		}
+		function Se(e) {
 			let t = e.target;
 			requestAnimationFrame(() => {
 				document.activeElement === t && t.select();
-			}), H.value = "";
+			}), V.value = "";
 		}
 		let K = i(() => {
-			let e = H.value.trim();
-			return !!N.create && e.length > 0 && !z.value.some((t) => t.label.toLowerCase() === e.toLowerCase());
+			let e = V.value.trim();
+			return !!k.create && e.length > 0 && !R.value.some((t) => t.label.toLowerCase() === e.toLowerCase());
 		});
 		function q(e) {
-			e.preventDefault(), P("create", H.value.trim()), e.target?.dispatchEvent(new KeyboardEvent("keydown", {
+			e.preventDefault(), A("create", V.value.trim()), e.target?.dispatchEvent(new KeyboardEvent("keydown", {
 				key: "Escape",
 				bubbles: !0
 			}));
 		}
-		let J = n(), ue = i(() => N.id ?? J?.id.value), Y = i(() => N.invalid ?? J?.invalid.value ?? !1), de = e(), X = i(() => N.unstyled ?? de.unstyled), Z = i(() => ee({
-			size: N.size,
+		let J = n(), Ce = i(() => k.id ?? J?.id.value), Y = i(() => k.invalid ?? J?.invalid.value ?? !1), we = e(), X = i(() => k.unstyled ?? we.unstyled), Z = i(() => ee({
+			size: k.size,
+			chips: W.value,
 			invalid: Y.value,
-			disabled: N.disabled
+			disabled: k.disabled
 		}));
 		function Q(e, t) {
-			let n = N.ui?.[e];
+			let n = k.ui?.[e];
 			return X.value ? [n, t] : Z.value[e]({ class: [n, t] });
 		}
 		let $ = i(() => X.value ? void 0 : Z.value.itemIndicator());
-		return (e, n) => (p(), a(v(E), d(v(F), {
+		return (e, n) => (m(), a(y(de), f(y(P), {
 			"open-on-click": "",
-			class: "contents"
+			"reset-model-value-on-clear": k.clearable || k.resetModelValueOnClear,
+			class: "contents",
+			"onUpdate:modelValue": n[1] ||= (e) => j.value = e
 		}), {
-			default: y(() => [l(v(ne), { class: f(Q("anchor", N.class)) }, {
-				default: y(() => [l(v(oe), d({
-					id: ue.value,
-					modelValue: V.value,
-					"onUpdate:modelValue": n[0] ||= (e) => V.value = e
-				}, e.$attrs, {
-					placeholder: N.placeholder,
-					"display-value": ce,
-					"aria-invalid": Y.value || void 0,
-					"aria-describedby": v(J)?.describedBy.value,
-					class: Q("input"),
-					onFocus: le,
-					onInput: U
-				}), null, 16, [
-					"id",
-					"modelValue",
-					"placeholder",
-					"aria-invalid",
-					"aria-describedby",
-					"class"
-				]), l(v(D), { class: f(Q("trigger")) }, {
-					default: y(() => [l(t, { icon: v(x) }, null, 8, ["icon"])]),
-					_: 1
-				}, 8, ["class"])]),
-				_: 1
-			}, 8, ["class"]), l(v(T), null, {
-				default: y(() => [l(v(re), {
-					class: f(Q("content")),
+			default: S(() => [u(y(T), { class: p(Q("anchor", k.class)) }, {
+				default: S(() => [
+					(m(!0), s(r, null, g(U.value, (n) => (m(), s("span", {
+						key: String(n.value),
+						class: p(Q("tag"))
+					}, [_(e.$slots, "tag", {
+						option: n,
+						remove: () => G(n.value)
+					}, () => [c("span", { class: p(Q("tagText")) }, v(n.label), 3), c("button", {
+						type: "button",
+						tabindex: "-1",
+						"aria-label": k.removeLabel(n.label),
+						class: p(Q("tagDelete")),
+						onClick: ne((e) => G(n.value), ["stop"])
+					}, [u(t, { icon: y(C) }, null, 8, ["icon"])], 10, _e)])], 2))), 128)),
+					u(y(ce), f({
+						id: Ce.value,
+						modelValue: B.value,
+						"onUpdate:modelValue": n[0] ||= (e) => B.value = e
+					}, e.$attrs, {
+						placeholder: k.placeholder,
+						"display-value": xe,
+						"aria-invalid": Y.value || void 0,
+						"aria-describedby": y(J)?.describedBy.value,
+						class: Q("input"),
+						onFocus: Se,
+						onInput: ve,
+						onKeydown: be
+					}), null, 16, [
+						"id",
+						"modelValue",
+						"placeholder",
+						"aria-invalid",
+						"aria-describedby",
+						"class"
+					]),
+					N.value ? (m(), a(y(ie), {
+						key: 0,
+						"aria-label": k.clearLabel,
+						class: p(Q("clear"))
+					}, {
+						default: S(() => [u(t, { icon: y(C) }, null, 8, ["icon"])]),
+						_: 1
+					}, 8, ["aria-label", "class"])) : (m(), a(y(fe), {
+						key: 1,
+						class: p(Q("trigger"))
+					}, {
+						default: S(() => [u(t, { icon: y(re) }, null, 8, ["icon"])]),
+						_: 1
+					}, 8, ["class"]))
+				]),
+				_: 3
+			}, 8, ["class"]), u(y(ue), null, {
+				default: S(() => [u(y(ae), {
+					class: p(Q("content")),
 					position: "popper",
 					"side-offset": 4
 				}, {
-					default: y(() => [l(v(O), { class: f(Q("viewport")) }, {
-						default: y(() => [
-							B.value ? b((p(), s("div", {
+					default: S(() => [u(y(pe), { class: p(Q("viewport")) }, {
+						default: S(() => [
+							z.value ? te((m(), s("div", {
 								key: 0,
-								class: f(Q("empty"))
-							}, [g(e.$slots, "empty", { query: H.value }, () => [c(_(N.emptyText), 1)])], 2)), [[te, !K.value && G.value.length === 0]]) : K.value ? o("", !0) : (p(), a(v(ie), {
+								class: p(Q("empty"))
+							}, [_(e.$slots, "empty", { query: V.value }, () => [l(v(k.emptyText), 1)])], 2)), [[b, !K.value && H.value.length === 0]]) : K.value ? o("", !0) : (m(), a(y(oe), {
 								key: 1,
-								class: f(Q("empty"))
+								class: p(Q("empty"))
 							}, {
-								default: y(() => [g(e.$slots, "empty", { query: H.value }, () => [c(_(N.emptyText), 1)])]),
+								default: S(() => [_(e.$slots, "empty", { query: V.value }, () => [l(v(k.emptyText), 1)])]),
 								_: 3
 							}, 8, ["class"])),
-							g(e.$slots, "default", {}, () => [B.value ? (p(), a(v(k), {
+							_(e.$slots, "default", {}, () => [z.value ? (m(), a(y(me), {
 								key: 0,
-								options: G.value,
-								"estimate-size": N.estimateSize,
-								overscan: N.overscan,
+								options: H.value,
+								"estimate-size": k.estimateSize,
+								overscan: k.overscan,
 								"text-content": (e) => e.label
 							}, {
-								default: y(({ option: e }) => [l(v(C), {
+								default: S(({ option: e }) => [u(y(E), {
 									value: e.value,
 									"text-value": e.label,
 									disabled: e.disabled,
-									class: f(Q("item"))
+									class: p(Q("item"))
 								}, {
-									default: y(() => [l(v(w), { class: f($.value) }, {
-										default: y(() => [l(t, { icon: v(S) }, null, 8, ["icon"])]),
+									default: S(() => [u(y(D), { class: p($.value) }, {
+										default: S(() => [u(t, { icon: y(w) }, null, 8, ["icon"])]),
 										_: 1
-									}, 8, ["class"]), c(" " + _(e.label), 1)]),
+									}, 8, ["class"]), l(" " + v(e.label), 1)]),
 									_: 2
 								}, 1032, [
 									"value",
@@ -209,27 +278,27 @@ var M = /*@__PURE__*/ u({
 								"estimate-size",
 								"overscan",
 								"text-content"
-							])) : R.value ? (p(!0), s(r, { key: 1 }, h(R.value, (e, n) => (p(), a(v(ae), {
+							])) : L.value ? (m(!0), s(r, { key: 1 }, g(L.value, (e, n) => (m(), a(y(se), {
 								key: e.label || n,
-								class: f(Q("group"))
+								class: p(Q("group"))
 							}, {
-								default: y(() => [e.label ? (p(), a(v(se), {
+								default: S(() => [e.label ? (m(), a(y(le), {
 									key: 0,
-									class: f(Q("groupLabel"))
+									class: p(Q("groupLabel"))
 								}, {
-									default: y(() => [c(_(e.label), 1)]),
+									default: S(() => [l(v(e.label), 1)]),
 									_: 2
-								}, 1032, ["class"])) : o("", !0), (p(!0), s(r, null, h(e.items, (e) => (p(), a(v(C), {
+								}, 1032, ["class"])) : o("", !0), (m(!0), s(r, null, g(e.items, (e) => (m(), a(y(E), {
 									key: typeof e == "string" ? e : e.value,
 									value: typeof e == "string" ? e : e.value,
 									"text-value": typeof e == "string" ? e : e.label,
 									disabled: typeof e == "string" ? void 0 : e.disabled,
-									class: f(Q("item"))
+									class: p(Q("item"))
 								}, {
-									default: y(() => [l(v(w), { class: f($.value) }, {
-										default: y(() => [l(t, { icon: v(S) }, null, 8, ["icon"])]),
+									default: S(() => [u(y(D), { class: p($.value) }, {
+										default: S(() => [u(t, { icon: y(w) }, null, 8, ["icon"])]),
 										_: 1
-									}, 8, ["class"]), c(" " + _(typeof e == "string" ? e : e.label), 1)]),
+									}, 8, ["class"]), l(" " + v(typeof e == "string" ? e : e.label), 1)]),
 									_: 2
 								}, 1032, [
 									"value",
@@ -238,17 +307,17 @@ var M = /*@__PURE__*/ u({
 									"class"
 								]))), 128))]),
 								_: 2
-							}, 1032, ["class"]))), 128)) : (p(!0), s(r, { key: 2 }, h(z.value, (e) => (p(), a(v(C), {
+							}, 1032, ["class"]))), 128)) : (m(!0), s(r, { key: 2 }, g(R.value, (e) => (m(), a(y(E), {
 								key: e.value,
 								value: e.value,
 								"text-value": e.label,
 								disabled: e.disabled,
-								class: f(Q("item"))
+								class: p(Q("item"))
 							}, {
-								default: y(() => [l(v(w), { class: f($.value) }, {
-									default: y(() => [l(t, { icon: v(S) }, null, 8, ["icon"])]),
+								default: S(() => [u(y(D), { class: p($.value) }, {
+									default: S(() => [u(t, { icon: y(w) }, null, 8, ["icon"])]),
 									_: 1
-								}, 8, ["class"]), c(" " + _(e.label), 1)]),
+								}, 8, ["class"]), l(" " + v(e.label), 1)]),
 								_: 2
 							}, 1032, [
 								"value",
@@ -256,15 +325,15 @@ var M = /*@__PURE__*/ u({
 								"disabled",
 								"class"
 							]))), 128))]),
-							K.value ? (p(), a(v(C), {
-								key: H.value,
-								value: H.value,
+							K.value ? (m(), a(y(E), {
+								key: V.value,
+								value: V.value,
 								"data-create": "",
-								"text-value": H.value,
-								class: f(Q("item")),
+								"text-value": V.value,
+								class: p(Q("item")),
 								onSelect: q
 							}, {
-								default: y(() => [g(e.$slots, "create", { query: H.value }, () => [c(_(N.createLabel(H.value.trim())), 1)])]),
+								default: S(() => [_(e.$slots, "create", { query: V.value }, () => [l(v(k.createLabel(V.value.trim())), 1)])]),
 								_: 3
 							}, 8, [
 								"value",
@@ -279,8 +348,8 @@ var M = /*@__PURE__*/ u({
 				_: 3
 			})]),
 			_: 3
-		}, 16));
+		}, 16, ["reset-model-value-on-clear"]));
 	}
 });
 //#endregion
-export { M as default };
+export { O as default };

package/dist/components/CommandPalette.vue.d.ts

@@ -45,8 +45,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onSelect?: ((item: CommandItem) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
-    unstyled: boolean;
     label: string;
+    unstyled: boolean;
     placeholder: string;
     footer: boolean;
     emptyText: string;

package/dist/components/DatePicker.vue.d.ts

@@ -43,8 +43,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     unstyled: boolean;
     placeholder: string;
     invalid: boolean;
-    todayLabel: string;
     clearLabel: string;
+    todayLabel: string;
     previousLabel: string;
     nextLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/DateRangePicker.vue.d.ts

@@ -51,8 +51,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     placeholder: string;
     separator: string;
     invalid: boolean;
-    months: number;
     clearLabel: string;
+    months: number;
     previousLabel: string;
     nextLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/FileUpload.vue.d.ts

@@ -51,11 +51,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
     onReject?: ((rejections: FileRejection[]) => any) | undefined;
 }>, {
-    unstyled: boolean;
     label: string;
+    unstyled: boolean;
     invalid: boolean;
-    browseLabel: string;
     removeLabel: string;
+    browseLabel: string;
     tooLargeText: string;
     wrongTypeText: string;
     tooManyText: string;

package/dist/components/Icon.vue.d.ts

@@ -1,6 +1,12 @@
 import type { IconLike } from '../composables/icon';
 export interface IconProps {
     icon?: IconLike;
+    /**
+     * Names the icon for assistive technology. Icons are decorative by default
+     * and hidden; set this only when the icon is the sole carrier of meaning,
+     * such as inside a control with no visible text.
+     */
+    label?: string;
     class?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/Icon.vue_vue_type_script_setup_true_lang.js

@@ -1,25 +1,27 @@
 import { isIconArray as e } from "../composables/icon.js";
-import { computed as t, createBlock as n, createCommentVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, resolveDynamicComponent as s, unref as c } from "vue";
+import { computed as t, createBlock as n, createCommentVNode as r, defineComponent as i, mergeProps as a, openBlock as o, resolveDynamicComponent as s, unref as c } from "vue";
 import { HugeiconsIcon as l } from "@hugeicons/vue";
 //#region src/components/Icon.vue?vue&type=script&setup=true&lang.ts
 var u = /*@__PURE__*/ i({
 	__name: "Icon",
 	props: {
 		icon: {},
+		label: {},
 		class: {}
 	},
 	setup(i) {
-		let u = i, d = t(() => u.icon && e(u.icon) ? u.icon : void 0);
-		return (e, t) => d.value ? (o(), n(c(l), {
+		let u = i, d = t(() => u.icon && e(u.icon) ? u.icon : void 0), f = t(() => u.label ? {
+			role: "img",
+			"aria-label": u.label
+		} : { "aria-hidden": "true" });
+		return (e, t) => d.value ? (o(), n(c(l), a({
 			key: 0,
 			icon: d.value,
-			class: a(u.class),
-			"aria-hidden": "true"
-		}, null, 8, ["icon", "class"])) : u.icon ? (o(), n(s(u.icon), {
+			class: u.class
+		}, f.value), null, 16, ["icon", "class"])) : u.icon ? (o(), n(s(u.icon), a({
 			key: 1,
-			class: a(u.class),
-			"aria-hidden": "true"
-		}, null, 8, ["class"])) : r("", !0);
+			class: u.class
+		}, f.value), null, 16, ["class"])) : r("", !0);
 	}
 });
 //#endregion

package/dist/components/NavigationMenu.vue.d.ts

@@ -60,9 +60,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    label: string;
     unstyled: boolean;
     orientation: "horizontal" | "vertical";
-    label: string;
     columns: 1 | 2 | 3;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;