@auronui/vue 1.0.10 → 1.0.12

package/dist/components/autocomplete/AutocompleteInput.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,8 @@
 import Spinner_default from "../spinner/Spinner.js";
+import Chip_default from "../chip/Chip.js";
 import { useAutocompleteInject } from "./Autocomplete.context.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useTemplateRef, withCtx } from "vue";
+import AutocompleteOverflowChips_default from "./AutocompleteOverflowChips.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, unref, useTemplateRef, withCtx, withModifiers } from "vue";
 import { useFocusWithin } from "@vueuse/core";
 import { AutocompleteAnchor, AutocompleteCancel, AutocompleteInput, AutocompleteTrigger } from "reka-ui";
 //#region src/components/autocomplete/AutocompleteInput.vue?vue&type=script&setup=true&lang.ts
@@ -20,6 +22,8 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const ctx = useAutocompleteInject();
 		const { focused: isFocused } = useFocusWithin(useTemplateRef("anchor"));
 		const showInsideLabel = computed(() => ctx.hasLabel.value && ctx.labelPlacement.value === "inside");
+		const effectivePlaceholder = computed(() => ctx.multiple.value && ctx.selectedValues.value.length > 0 ? void 0 : props.placeholder);
+		const getLabel = (v) => ctx.selectedLabels.value.find((l) => l.value === v)?.label ?? v;
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(AutocompleteAnchor), {
 				ref: "anchor",
@@ -29,6 +33,7 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				"data-invalid": unref(ctx).isInvalid.value || void 0,
 				"data-disabled": unref(ctx).isDisabled.value || void 0,
 				"data-readonly": unref(ctx).isReadonly.value || void 0,
+				"data-multiple-overflow": unref(ctx).multiple.value ? unref(ctx).multipleOverflow.value : void 0,
 				"data-slot": "trigger"
 			}, {
 				default: withCtx(() => [
@@ -42,15 +47,38 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						class: normalizeClass(unref(ctx).slots.value.startContent()),
 						"data-slot": "start-content"
 					}, [renderSlot(_ctx.$slots, "startContent")], 2)) : createCommentVNode("", true),
+					unref(ctx).multiple.value && unref(ctx).multipleOverflow.value === "collapse" && unref(ctx).selectedValues.value.length > 0 ? (openBlock(), createBlock(AutocompleteOverflowChips_default, {
+						key: 2,
+						values: unref(ctx).selectedValues.value,
+						"get-label": getLabel,
+						"remove-value": unref(ctx).removeValue
+					}, null, 8, ["values", "remove-value"])) : unref(ctx).multiple.value && unref(ctx).multipleOverflow.value === "wrap" ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(unref(ctx).selectedLabels.value, (item) => {
+						return openBlock(), createBlock(Chip_default, {
+							key: item.value,
+							size: "sm",
+							"is-closable": "",
+							"close-aria-label": `Remove ${item.label}`,
+							"data-slot": "selected-chip",
+							onClose: withModifiers(($event) => unref(ctx).removeValue(item.value), ["stop"])
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+							_: 2
+						}, 1032, ["close-aria-label", "onClose"]);
+					}), 128)) : createCommentVNode("", true),
 					createVNode(unref(AutocompleteInput), {
 						id: unref(ctx).inputId.value,
-						placeholder: props.placeholder,
+						placeholder: effectivePlaceholder.value,
 						disabled: unref(ctx).isDisabled.value,
 						readonly: unref(ctx).isReadonly.value,
 						required: unref(ctx).isRequired.value,
 						"aria-invalid": unref(ctx).isInvalid.value || void 0,
 						"aria-describedby": unref(ctx).ariaDescribedBy.value,
 						class: normalizeClass(unref(ctx).slots.value.input()),
+						style: normalizeStyle(unref(ctx).multiple.value && unref(ctx).multipleOverflow.value === "collapse" && unref(ctx).selectedValues.value.length > 0 ? {
+							flex: "0 0 auto",
+							minWidth: "80px",
+							width: "auto"
+						} : void 0),
 						"data-slot": "input",
 						autocomplete: "off"
 					}, null, 8, [
@@ -61,15 +89,17 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						"required",
 						"aria-invalid",
 						"aria-describedby",
-						"class"
+						"class",
+						"style"
 					]),
 					createVNode(unref(AutocompleteCancel), {
 						class: normalizeClass(unref(ctx).slots.value.clearButton()),
 						"data-empty": !unref(ctx).isFilled.value || unref(ctx).isReadonly.value || unref(ctx).isDisabled.value ? "true" : void 0,
 						"data-slot": "clear-button",
-						"aria-label": "Clear"
+						"aria-label": "Clear",
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(ctx).multiple.value ? unref(ctx).clearAll() : void 0)
 					}, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "clearIcon", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "clearIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "10",
 							height: "10",
@@ -95,19 +125,19 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						_: 3
 					}, 8, ["class", "data-empty"]),
 					unref(ctx).isLoading.value ? (openBlock(), createElementBlock("span", {
-						key: 2,
+						key: 4,
 						class: normalizeClass(unref(ctx).slots.value.indicator()),
 						"data-slot": "autocomplete-loading-indicator",
 						role: "status",
 						"aria-live": "polite",
 						"aria-label": "Loading suggestions"
 					}, [createVNode(Spinner_default, { size: "sm" })], 2)) : (openBlock(), createBlock(unref(AutocompleteTrigger), {
-						key: 3,
+						key: 5,
 						class: normalizeClass(unref(ctx).slots.value.indicator()),
 						"data-slot": "autocomplete-default-indicator",
 						"aria-label": "Toggle suggestions"
 					}, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "triggerIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "triggerIcon", {}, () => [_cache[2] || (_cache[2] = createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "16",
 							height: "16",
@@ -129,7 +159,8 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				"data-focused",
 				"data-invalid",
 				"data-disabled",
-				"data-readonly"
+				"data-readonly",
+				"data-multiple-overflow"
 			]);
 		};
 	}

package/dist/components/autocomplete/AutocompleteInput.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteInput.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/autocomplete/AutocompleteInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useTemplateRef } from 'vue'\nimport { useFocusWithin } from '@vueuse/core'\nimport { AutocompleteInput, AutocompleteTrigger, AutocompleteCancel, AutocompleteAnchor } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\nimport Spinner from '../spinner/Spinner.vue';\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useAutocompleteInject()\n\n// Track focused state via useFocusWithin (NOT manual @focus/@blur listeners) — the\n// inner Reka <AutocompleteInput> wraps the native <input>; useFocusWithin observes\n// the actual DOM subtree of the anchor, so isFocused flips reliably regardless of\n// how Reka forwards refs/attrs.\nconst anchorRef = useTemplateRef<HTMLElement>('anchor')\nconst { focused: isFocused } = useFocusWithin(anchorRef)\n\n// Render the inside-label only when (a) a label is set and (b) labelPlacement is 'inside'\nconst showInsideLabel = computed(\n  () => ctx.hasLabel.value && ctx.labelPlacement.value === 'inside',\n)\n</script>\n\n<template>\n  <AutocompleteAnchor\n    ref=\"anchor\"\n    :class=\"ctx.slots.value.trigger()\"\n    :data-filled=\"ctx.hasLabel.value ? (ctx.isFilled.value || undefined) : undefined\"\n    :data-focused=\"isFocused || undefined\"\n    :data-invalid=\"ctx.isInvalid.value || undefined\"\n    :data-disabled=\"ctx.isDisabled.value || undefined\"\n    :data-readonly=\"ctx.isReadonly.value || undefined\"\n    data-slot=\"trigger\"\n  >\n    <label\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.inputId.value\"\n      :class=\"ctx.slots.value.label()\"\n    >{{ ctx.label.value }}<span\n      v-if=\"ctx.isRequired.value\"\n      aria-hidden=\"true\"\n    > *</span></label>\n    <span\n      v-if=\"$slots.startContent\"\n      :class=\"ctx.slots.value.startContent()\"\n      data-slot=\"start-content\"\n    >\n      <slot name=\"startContent\" />\n    </span>\n    <AutocompleteInput\n      :id=\"ctx.inputId.value\"\n      :placeholder=\"props.placeholder\"\n      :disabled=\"ctx.isDisabled.value\"\n      :readonly=\"ctx.isReadonly.value\"\n      :required=\"ctx.isRequired.value\"\n      :aria-invalid=\"ctx.isInvalid.value || undefined\"\n      :aria-describedby=\"ctx.ariaDescribedBy.value\"\n      :class=\"ctx.slots.value.input()\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n    />\n    <!-- Clear button: only shown when filled and not in a readonly/disabled state.\n         Reka's AutocompleteCancel does not set data-empty itself, so we drive it here. -->\n    <AutocompleteCancel\n      :class=\"ctx.slots.value.clearButton()\"\n      :data-empty=\"(!ctx.isFilled.value || ctx.isReadonly.value || ctx.isDisabled.value) ? 'true' : undefined\"\n      data-slot=\"clear-button\"\n      aria-label=\"Clear\"\n    >\n      <slot name=\"clearIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"10\"\n          height=\"10\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"autocomplete-clear-button-icon\"\n          aria-hidden=\"true\"\n        >\n          <line\n            x1=\"18\"\n            y1=\"6\"\n            x2=\"6\"\n            y2=\"18\"\n          />\n          <line\n            x1=\"6\"\n            y1=\"6\"\n            x2=\"18\"\n            y2=\"18\"\n          />\n        </svg>\n      </slot>\n    </AutocompleteCancel>\n    <!-- Inline loading spinner: replaces the dropdown indicator while loadItems is pending -->\n    <span\n      v-if=\"ctx.isLoading.value\"\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"autocomplete-loading-indicator\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label=\"Loading suggestions\"\n    >\n      <Spinner size=\"sm\" />\n    </span>\n    <!-- Dropdown trigger indicator (hidden while loading) -->\n    <AutocompleteTrigger\n      v-else\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"autocomplete-default-indicator\"\n      aria-label=\"Toggle suggestions\"\n    >\n      <slot name=\"triggerIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </AutocompleteTrigger>\n  </AutocompleteAnchor>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAQd,MAAM,MAAM,uBAAsB;EAOlC,MAAM,EAAE,SAAS,cAAc,eADb,eAA4B,SAAQ,CACC;EAGvD,MAAM,kBAAkB,eAChB,IAAI,SAAS,SAAS,IAAI,eAAe,UAAU,SAC3D;;uBAIE,YA6GqB,MAAA,mBAAA,EAAA;IA5GnB,KAAI;IACH,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,CAAA;IAC9B,eAAa,MAAA,IAAG,CAAC,SAAS,QAAS,MAAA,IAAG,CAAC,SAAS,SAAS,KAAA,IAAa,KAAA;IACtE,gBAAc,MAAA,UAAS,IAAI,KAAA;IAC3B,gBAAc,MAAA,IAAG,CAAC,UAAU,SAAS,KAAA;IACrC,iBAAe,MAAA,IAAG,CAAC,WAAW,SAAS,KAAA;IACvC,iBAAe,MAAA,IAAG,CAAC,WAAW,SAAS,KAAA;IACxC,aAAU;;2BASQ;KANV,gBAAA,SAAA,WAAA,EADR,mBAOkB,SAAA;;MALf,KAAK,MAAA,IAAG,CAAC,QAAQ;MACjB,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,OAAK,CAAA;yCAC3B,MAAA,IAAG,CAAC,MAAM,MAAK,EAAA,EAAA,EACX,MAAA,IAAG,CAAC,WAAW,SAAA,WAAA,EADD,mBAGZ,QAHY,YAGrB,KAAE,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;KAEKA,KAAAA,OAAO,gBAAA,WAAA,EADf,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,cAAY,CAAA;MACpC,aAAU;SAEV,WAA4B,KAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAE9B,YAWE,MAAA,kBAAA,EAAA;MAVC,IAAI,MAAA,IAAG,CAAC,QAAQ;MAChB,aAAa,MAAM;MACnB,UAAU,MAAA,IAAG,CAAC,WAAW;MACzB,UAAU,MAAA,IAAG,CAAC,WAAW;MACzB,UAAU,MAAA,IAAG,CAAC,WAAW;MACzB,gBAAc,MAAA,IAAG,CAAC,UAAU,SAAS,KAAA;MACrC,oBAAkB,MAAA,IAAG,CAAC,gBAAgB;MACtC,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,OAAK,CAAA;MAC7B,aAAU;MACV,cAAa;;;;;;;;;;;KAIf,YAkCqB,MAAA,mBAAA,EAAA;MAjClB,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,aAAW,CAAA;MAClC,cAAU,CAAI,MAAA,IAAG,CAAC,SAAS,SAAS,MAAA,IAAG,CAAC,WAAW,SAAS,MAAA,IAAG,CAAC,WAAW,QAAK,SAAa,KAAA;MAC9F,aAAU;MACV,cAAW;;6BA6BJ,CA3BP,WA2BO,KAAA,QAAA,aAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KA1BL,mBAyBM,OAAA;OAxBJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAKE,QAAA;OAJA,IAAG;OACH,IAAG;OACH,IAAG;OACH,IAAG;UAEL,mBAKE,QAAA;OAJA,IAAG;OACH,IAAG;OACH,IAAG;OACH,IAAG;;;;KAOH,MAAA,IAAG,CAAC,UAAU,SAAA,WAAA,EADtB,mBASO,QAAA;;MAPJ,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,WAAS,CAAA;MACjC,aAAU;MACV,MAAK;MACL,aAAU;MACV,cAAW;SAEX,YAAqB,iBAAA,EAAZ,MAAK,MAAI,CAAA,CAAA,EAAA,EAAA,KAAA,WAAA,EAGpB,YAsBsB,MAAA,oBAAA,EAAA;;MApBnB,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,WAAS,CAAA;MACjC,aAAU;MACV,cAAW;;6BAiBJ,CAfP,WAeO,KAAA,QAAA,eAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAdL,mBAaM,OAAA;OAZJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"AutocompleteInput.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/autocomplete/AutocompleteInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useTemplateRef } from 'vue'\nimport { useFocusWithin } from '@vueuse/core'\nimport { AutocompleteInput, AutocompleteTrigger, AutocompleteCancel, AutocompleteAnchor } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\nimport Chip from '../chip/Chip.vue'\nimport Spinner from '../spinner/Spinner.vue'\nimport AutocompleteOverflowChips from './AutocompleteOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useAutocompleteInject()\n\n// Track focused state via useFocusWithin (NOT manual @focus/@blur listeners) — the\n// inner Reka <AutocompleteInput> wraps the native <input>; useFocusWithin observes\n// the actual DOM subtree of the anchor, so isFocused flips reliably regardless of\n// how Reka forwards refs/attrs.\nconst anchorRef = useTemplateRef<HTMLElement>('anchor')\nconst { focused: isFocused } = useFocusWithin(anchorRef)\n\n// Render the inside-label only when (a) a label is set and (b) labelPlacement is 'inside'\nconst showInsideLabel = computed(\n  () => ctx.hasLabel.value && ctx.labelPlacement.value === 'inside',\n)\n\n// In multiple mode, hide placeholder once chips are present\nconst effectivePlaceholder = computed(() =>\n  ctx.multiple.value && ctx.selectedValues.value.length > 0 ? undefined : props.placeholder,\n)\n\nconst getLabel = (v: string) => ctx.selectedLabels.value.find(l => l.value === v)?.label ?? v\n</script>\n\n<template>\n  <AutocompleteAnchor\n    ref=\"anchor\"\n    :class=\"ctx.slots.value.trigger()\"\n    :data-filled=\"ctx.hasLabel.value ? (ctx.isFilled.value || undefined) : undefined\"\n    :data-focused=\"isFocused || undefined\"\n    :data-invalid=\"ctx.isInvalid.value || undefined\"\n    :data-disabled=\"ctx.isDisabled.value || undefined\"\n    :data-readonly=\"ctx.isReadonly.value || undefined\"\n    :data-multiple-overflow=\"ctx.multiple.value ? ctx.multipleOverflow.value : undefined\"\n    data-slot=\"trigger\"\n  >\n    <label\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.inputId.value\"\n      :class=\"ctx.slots.value.label()\"\n    >{{ ctx.label.value }}<span\n      v-if=\"ctx.isRequired.value\"\n      aria-hidden=\"true\"\n    > *</span></label>\n    <span\n      v-if=\"$slots.startContent\"\n      :class=\"ctx.slots.value.startContent()\"\n      data-slot=\"start-content\"\n    >\n      <slot name=\"startContent\" />\n    </span>\n    <!-- Multiple/collapse: overflow chip area with truncation -->\n    <AutocompleteOverflowChips\n      v-if=\"ctx.multiple.value && ctx.multipleOverflow.value === 'collapse' && ctx.selectedValues.value.length > 0\"\n      :values=\"ctx.selectedValues.value\"\n      :get-label=\"getLabel\"\n      :remove-value=\"ctx.removeValue\"\n    />\n    <!-- Multiple/wrap: chips that wrap onto new lines -->\n    <template v-else-if=\"ctx.multiple.value && ctx.multipleOverflow.value === 'wrap'\">\n      <Chip\n        v-for=\"item in ctx.selectedLabels.value\"\n        :key=\"item.value\"\n        size=\"sm\"\n        is-closable\n        :close-aria-label=\"`Remove ${item.label}`\"\n        data-slot=\"selected-chip\"\n        @close.stop=\"ctx.removeValue(item.value)\"\n      >\n        {{ item.label }}\n      </Chip>\n    </template>\n    <AutocompleteInput\n      :id=\"ctx.inputId.value\"\n      :placeholder=\"effectivePlaceholder\"\n      :disabled=\"ctx.isDisabled.value\"\n      :readonly=\"ctx.isReadonly.value\"\n      :required=\"ctx.isRequired.value\"\n      :aria-invalid=\"ctx.isInvalid.value || undefined\"\n      :aria-describedby=\"ctx.ariaDescribedBy.value\"\n      :class=\"ctx.slots.value.input()\"\n      :style=\"ctx.multiple.value && ctx.multipleOverflow.value === 'collapse' && ctx.selectedValues.value.length > 0\n        ? { flex: '0 0 auto', minWidth: '80px', width: 'auto' }\n        : undefined\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n    />\n    <!-- Clear button: only shown when filled and not in a readonly/disabled state.\n         Reka's AutocompleteCancel does not set data-empty itself, so we drive it here.\n         In multiple mode also clears selectedValues via ctx.clearAll(). -->\n    <AutocompleteCancel\n      :class=\"ctx.slots.value.clearButton()\"\n      :data-empty=\"(!ctx.isFilled.value || ctx.isReadonly.value || ctx.isDisabled.value) ? 'true' : undefined\"\n      data-slot=\"clear-button\"\n      aria-label=\"Clear\"\n      @click=\"ctx.multiple.value ? ctx.clearAll() : undefined\"\n    >\n      <slot name=\"clearIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"10\"\n          height=\"10\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"autocomplete-clear-button-icon\"\n          aria-hidden=\"true\"\n        >\n          <line\n            x1=\"18\"\n            y1=\"6\"\n            x2=\"6\"\n            y2=\"18\"\n          />\n          <line\n            x1=\"6\"\n            y1=\"6\"\n            x2=\"18\"\n            y2=\"18\"\n          />\n        </svg>\n      </slot>\n    </AutocompleteCancel>\n    <!-- Inline loading spinner: replaces the dropdown indicator while loadItems is pending -->\n    <span\n      v-if=\"ctx.isLoading.value\"\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"autocomplete-loading-indicator\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label=\"Loading suggestions\"\n    >\n      <Spinner size=\"sm\" />\n    </span>\n    <!-- Dropdown trigger indicator (hidden while loading) -->\n    <AutocompleteTrigger\n      v-else\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"autocomplete-default-indicator\"\n      aria-label=\"Toggle suggestions\"\n    >\n      <slot name=\"triggerIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </AutocompleteTrigger>\n  </AutocompleteAnchor>\n</template>\n"],"mappings":"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"}

package/dist/components/autocomplete/AutocompleteItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteItem.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type Slots, type VNode } from 'vue'\nimport { AutocompleteItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  isDisabled: false,\n  class: undefined,\n})\n\nconst slots: Slots = useSlots()\nconst ctx = useAutocompleteInject()\n\n// Extract plain text from default slot VNodes at render time.\nfunction extractText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\n// The display text Reka writes into the input when this item is selected.\n// Reads slot text content — no extra props needed.\nconst displayText = computed((): string => {\n  const vnodes: VNode[] | undefined = (slots.default as (() => VNode[]) | undefined)?.()\n  if (!vnodes) return props.value\n  return extractText(vnodes).trim() || props.value\n})\n\n// Register this item's value→label mapping with the parent Autocomplete bridge\n// so valueFor() can translate the display label back to the real value.\nonMounted(() => {\n  ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n  ctx.unregisterItem(props.value)\n})\n</script>\n\n<template>\n  <AutocompleteItem\n    :value=\"displayText\"\n    :text-value=\"displayText\"\n    :disabled=\"props.isDisabled\"\n    :data-item-value=\"props.value\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n  >\n    <slot name=\"startContent\" />\n    <span\n      class=\"autocomplete-item__text\"\n      data-slot=\"item-text\"\n    ><slot /></span>\n    <ComboboxItemIndicator\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </ComboboxItemIndicator>\n    <slot name=\"endContent\" />\n  </AutocompleteItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"AutocompleteItem.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type Slots, type VNode } from 'vue'\nimport { AutocompleteItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  isDisabled: false,\n  class: undefined,\n})\n\nconst slots: Slots = useSlots()\nconst ctx = useAutocompleteInject()\n\nfunction extractText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\nconst displayText = computed((): string => {\n  const vnodes: VNode[] | undefined = (slots.default as (() => VNode[]) | undefined)?.()\n  if (!vnodes) return props.value\n  return extractText(vnodes).trim() || props.value\n})\n\n// In multiple mode, track whether this item is in the selected array\nconst isChecked = computed(() => ctx.multiple.value && ctx.isSelected(props.value))\n\nonMounted(() => {\n  ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n  ctx.unregisterItem(props.value)\n})\n\nfunction handleSelect(event: Event) {\n  if (ctx.multiple.value) {\n    // Prevent Reka from overwriting the combobox value with the selected item's text.\n    // Without this, Reka's internal handler fires after ours and sets searchTerm = displayText.\n    event.preventDefault()\n    ctx.onMultipleSelect(props.value)\n  }\n}\n</script>\n\n<template>\n  <AutocompleteItem\n    :value=\"displayText\"\n    :text-value=\"displayText\"\n    :disabled=\"props.isDisabled\"\n    :data-item-value=\"props.value\"\n    :data-selected=\"isChecked || undefined\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n    @select=\"handleSelect\"\n  >\n    <slot name=\"startContent\" />\n    <span\n      class=\"autocomplete-item__text\"\n      data-slot=\"item-text\"\n    ><slot /></span>\n    <!-- Single mode: Reka's ComboboxItemIndicator handles the checkmark natively -->\n    <ComboboxItemIndicator\n      v-if=\"!ctx.multiple.value\"\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </ComboboxItemIndicator>\n    <!-- Multiple mode: check against our selectedValues array instead -->\n    <span\n      v-else-if=\"isChecked\"\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </span>\n    <slot name=\"endContent\" />\n  </AutocompleteItem>\n</template>\n"],"mappings":""}

package/dist/components/autocomplete/AutocompleteItem.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,16 @@
 import { useAutocompleteInject } from "./Autocomplete.context.js";
-import { computed, createBlock, createElementVNode, createVNode, defineComponent, onMounted, onUnmounted, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, onMounted, onUnmounted, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
 import { AutocompleteItem, ComboboxItemIndicator } from "reka-ui";
 //#region src/components/autocomplete/AutocompleteItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	class: "autocomplete-item__text",
 	"data-slot": "item-text"
 };
+var _hoisted_2 = {
+	key: 1,
+	class: "list-box-item__indicator",
+	"data-slot": "list-box-item-indicator"
+};
 var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "AutocompleteItem",
 	props: {
@@ -32,25 +37,35 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			if (!vnodes) return props.value;
 			return extractText(vnodes).trim() || props.value;
 		});
+		const isChecked = computed(() => ctx.multiple.value && ctx.isSelected(props.value));
 		onMounted(() => {
 			ctx.registerItem(props.value, displayText.value);
 		});
 		onUnmounted(() => {
 			ctx.unregisterItem(props.value);
 		});
+		function handleSelect(event) {
+			if (ctx.multiple.value) {
+				event.preventDefault();
+				ctx.onMultipleSelect(props.value);
+			}
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(AutocompleteItem), {
 				value: displayText.value,
 				"text-value": displayText.value,
 				disabled: props.isDisabled,
 				"data-item-value": props.value,
+				"data-selected": isChecked.value || void 0,
 				class: "list-box-item list-box-item--default",
-				"data-slot": "list-box-item"
+				"data-slot": "list-box-item",
+				onSelect: handleSelect
 			}, {
 				default: withCtx(() => [
 					renderSlot(_ctx.$slots, "startContent"),
 					createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default")]),
-					createVNode(unref(ComboboxItemIndicator), {
+					!unref(ctx).multiple.value ? (openBlock(), createBlock(unref(ComboboxItemIndicator), {
+						key: 0,
 						class: "list-box-item__indicator",
 						"data-slot": "list-box-item-indicator"
 					}, {
@@ -68,7 +83,19 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 							"aria-hidden": "true"
 						}, [createElementVNode("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					}),
+					})) : isChecked.value ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						width: "12",
+						height: "12",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "3",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"data-slot": "list-box-item-indicator--checkmark",
+						"aria-hidden": "true"
+					}, [createElementVNode("polyline", { points: "20 6 9 17 4 12" })], -1))])])) : createCommentVNode("", true),
 					renderSlot(_ctx.$slots, "endContent")
 				]),
 				_: 3
@@ -76,7 +103,8 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				"value",
 				"text-value",
 				"disabled",
-				"data-item-value"
+				"data-item-value",
+				"data-selected"
 			]);
 		};
 	}

package/dist/components/autocomplete/AutocompleteItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type Slots, type VNode } from 'vue'\nimport { AutocompleteItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  isDisabled: false,\n  class: undefined,\n})\n\nconst slots: Slots = useSlots()\nconst ctx = useAutocompleteInject()\n\n// Extract plain text from default slot VNodes at render time.\nfunction extractText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\n// The display text Reka writes into the input when this item is selected.\n// Reads slot text content — no extra props needed.\nconst displayText = computed((): string => {\n  const vnodes: VNode[] | undefined = (slots.default as (() => VNode[]) | undefined)?.()\n  if (!vnodes) return props.value\n  return extractText(vnodes).trim() || props.value\n})\n\n// Register this item's value→label mapping with the parent Autocomplete bridge\n// so valueFor() can translate the display label back to the real value.\nonMounted(() => {\n  ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n  ctx.unregisterItem(props.value)\n})\n</script>\n\n<template>\n  <AutocompleteItem\n    :value=\"displayText\"\n    :text-value=\"displayText\"\n    :disabled=\"props.isDisabled\"\n    :data-item-value=\"props.value\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n  >\n    <slot name=\"startContent\" />\n    <span\n      class=\"autocomplete-item__text\"\n      data-slot=\"item-text\"\n    ><slot /></span>\n    <ComboboxItemIndicator\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </ComboboxItemIndicator>\n    <slot name=\"endContent\" />\n  </AutocompleteItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EASd,MAAM,QAAe,UAAS;EAC9B,MAAM,MAAM,uBAAsB;EAGlC,SAAS,YAAY,OAAwB;AAC3C,UAAO,MAAM,KAAI,MAAK;AACpB,QAAI,OAAO,EAAE,aAAa,SAAU,QAAO,EAAE;AAC7C,QAAI,MAAM,QAAQ,EAAE,SAAS,CAAE,QAAO,YAAY,EAAE,SAAmB;AACvE,WAAO;KACP,CAAC,KAAK,GAAE;;EAKZ,MAAM,cAAc,eAAuB;GACzC,MAAM,SAA+B,MAAM,WAA0C;AACrF,OAAI,CAAC,OAAQ,QAAO,MAAM;AAC1B,UAAO,YAAY,OAAO,CAAC,MAAM,IAAI,MAAM;IAC5C;AAID,kBAAgB;AACd,OAAI,aAAa,MAAM,OAAO,YAAY,MAAK;IAChD;AAED,oBAAkB;AAChB,OAAI,eAAe,MAAM,MAAK;IAC/B;;uBAIC,YAoCmB,MAAA,iBAAA,EAAA;IAnChB,OAAO,YAAA;IACP,cAAY,YAAA;IACZ,UAAU,MAAM;IAChB,mBAAiB,MAAM;IACxB,OAAM;IACN,aAAU;;2BAEkB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,mBAGgB,QAHhB,YAGgB,CAAf,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;KACT,YAqBwB,MAAA,sBAAA,EAAA;MApBtB,OAAM;MACN,aAAU;;6BAkBH,CAhBP,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA;;;KAIvC,WAA0B,KAAA,QAAA,aAAA"}
+{"version":3,"file":"AutocompleteItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type Slots, type VNode } from 'vue'\nimport { AutocompleteItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  isDisabled: false,\n  class: undefined,\n})\n\nconst slots: Slots = useSlots()\nconst ctx = useAutocompleteInject()\n\nfunction extractText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\nconst displayText = computed((): string => {\n  const vnodes: VNode[] | undefined = (slots.default as (() => VNode[]) | undefined)?.()\n  if (!vnodes) return props.value\n  return extractText(vnodes).trim() || props.value\n})\n\n// In multiple mode, track whether this item is in the selected array\nconst isChecked = computed(() => ctx.multiple.value && ctx.isSelected(props.value))\n\nonMounted(() => {\n  ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n  ctx.unregisterItem(props.value)\n})\n\nfunction handleSelect(event: Event) {\n  if (ctx.multiple.value) {\n    // Prevent Reka from overwriting the combobox value with the selected item's text.\n    // Without this, Reka's internal handler fires after ours and sets searchTerm = displayText.\n    event.preventDefault()\n    ctx.onMultipleSelect(props.value)\n  }\n}\n</script>\n\n<template>\n  <AutocompleteItem\n    :value=\"displayText\"\n    :text-value=\"displayText\"\n    :disabled=\"props.isDisabled\"\n    :data-item-value=\"props.value\"\n    :data-selected=\"isChecked || undefined\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n    @select=\"handleSelect\"\n  >\n    <slot name=\"startContent\" />\n    <span\n      class=\"autocomplete-item__text\"\n      data-slot=\"item-text\"\n    ><slot /></span>\n    <!-- Single mode: Reka's ComboboxItemIndicator handles the checkmark natively -->\n    <ComboboxItemIndicator\n      v-if=\"!ctx.multiple.value\"\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </ComboboxItemIndicator>\n    <!-- Multiple mode: check against our selectedValues array instead -->\n    <span\n      v-else-if=\"isChecked\"\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </span>\n    <slot name=\"endContent\" />\n  </AutocompleteItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EASd,MAAM,QAAe,UAAS;EAC9B,MAAM,MAAM,uBAAsB;EAElC,SAAS,YAAY,OAAwB;AAC3C,UAAO,MAAM,KAAI,MAAK;AACpB,QAAI,OAAO,EAAE,aAAa,SAAU,QAAO,EAAE;AAC7C,QAAI,MAAM,QAAQ,EAAE,SAAS,CAAE,QAAO,YAAY,EAAE,SAAmB;AACvE,WAAO;KACP,CAAC,KAAK,GAAE;;EAGZ,MAAM,cAAc,eAAuB;GACzC,MAAM,SAA+B,MAAM,WAA0C;AACrF,OAAI,CAAC,OAAQ,QAAO,MAAM;AAC1B,UAAO,YAAY,OAAO,CAAC,MAAM,IAAI,MAAM;IAC5C;EAGD,MAAM,YAAY,eAAe,IAAI,SAAS,SAAS,IAAI,WAAW,MAAM,MAAM,CAAA;AAElF,kBAAgB;AACd,OAAI,aAAa,MAAM,OAAO,YAAY,MAAK;IAChD;AAED,oBAAkB;AAChB,OAAI,eAAe,MAAM,MAAK;IAC/B;EAED,SAAS,aAAa,OAAc;AAClC,OAAI,IAAI,SAAS,OAAO;AAGtB,UAAM,gBAAe;AACrB,QAAI,iBAAiB,MAAM,MAAK;;;;uBAMlC,YAgEmB,MAAA,iBAAA,EAAA;IA/DhB,OAAO,YAAA;IACP,cAAY,YAAA;IACZ,UAAU,MAAM;IAChB,mBAAiB,MAAM;IACvB,iBAAe,UAAA,SAAa,KAAA;IAC7B,OAAM;IACN,aAAU;IACT,UAAQ;;2BAEmB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,mBAGgB,QAHhB,YAGgB,CAAf,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;MAGA,MAAA,IAAG,CAAC,SAAS,SAAA,WAAA,EADtB,YAsBwB,MAAA,sBAAA,EAAA;;MApBtB,OAAM;MACN,aAAU;;6BAkBH,CAhBP,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA;;WAM1B,UAAA,SAAA,WAAA,EADb,mBAsBO,QAtBP,YAsBO,CAjBL,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;MAbJ,OAAM;MACN,OAAM;MACN,QAAO;MACP,SAAQ;MACR,MAAK;MACL,QAAO;MACP,gBAAa;MACb,kBAAe;MACf,mBAAgB;MAChB,aAAU;MACV,eAAY;SAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;KAIvC,WAA0B,KAAA,QAAA,aAAA"}

package/dist/components/autocomplete/AutocompleteOverflowChips.js

@@ -0,0 +1,7 @@
+import AutocompleteOverflowChips_vue_vue_type_script_setup_true_lang_default from "./AutocompleteOverflowChips.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/autocomplete/AutocompleteOverflowChips.vue
+var AutocompleteOverflowChips_default = AutocompleteOverflowChips_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { AutocompleteOverflowChips_default as default };
+
+//# sourceMappingURL=AutocompleteOverflowChips.js.map

package/dist/components/autocomplete/AutocompleteOverflowChips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteOverflowChips.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\n\nconst props = defineProps<{\n  values: string[]\n  getLabel: (value: string) => string\n  removeValue: (value: string) => void\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n  if (measuring) return\n  measuring = true\n\n  try {\n    const el = containerEl.value\n    if (!el) return\n\n    // Phase 1: show all chips to measure their natural widths\n    visibleCount.value = props.values.length\n    await nextTick()\n\n    const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n    if (!chips.length) return\n\n    const containerW = el.offsetWidth\n    if (!containerW) return\n\n    // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n    const BADGE_W = 76\n\n    let usedW = 0\n    let n = 0\n\n    for (let i = 0; i < chips.length; i++) {\n      const gap = i > 0 ? 4 : 0\n      const chipW = chips[i].offsetWidth\n      const isLast = i === chips.length - 1\n      const budget = isLast ? containerW : containerW - BADGE_W\n\n      if (usedW + gap + chipW > budget) break\n      usedW += gap + chipW\n      n++\n    }\n\n    visibleCount.value = Math.max(1, n)\n  } finally {\n    measuring = false\n  }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\nwatch(\n  () => props.values.join('\\x00'),\n  () => reflow(),\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n  >\n    <Chip\n      v-for=\"(val, i) in values\"\n      :key=\"val\"\n      data-chip-item\n      size=\"sm\"\n      is-closable\n      :style=\"i >= visibleCount ? 'display: none' : undefined\"\n      @close.stop=\"removeValue(val)\"\n    >\n      {{ getLabel(val) }}\n    </Chip>\n    <Chip\n      v-if=\"overflowCount > 0\"\n      size=\"sm\"\n      color=\"default\"\n    >\n      +{{ overflowCount }} more\n    </Chip>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/autocomplete/AutocompleteOverflowChips.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,88 @@
+import Chip_default from "../chip/Chip.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, nextTick, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+//#region src/components/autocomplete/AutocompleteOverflowChips.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	ref: "container",
+	style: {
+		"display": "flex",
+		"flex-wrap": "nowrap",
+		"align-items": "center",
+		"gap": "4px",
+		"overflow": "hidden",
+		"flex": "1",
+		"min-width": "0"
+	}
+};
+var AutocompleteOverflowChips_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "AutocompleteOverflowChips",
+	props: {
+		values: {},
+		getLabel: { type: Function },
+		removeValue: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const containerEl = useTemplateRef("container");
+		const visibleCount = ref(props.values.length);
+		const overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value));
+		let measuring = false;
+		async function reflow() {
+			if (measuring) return;
+			measuring = true;
+			try {
+				const el = containerEl.value;
+				if (!el) return;
+				visibleCount.value = props.values.length;
+				await nextTick();
+				const chips = [...el.querySelectorAll("[data-chip-item]")];
+				if (!chips.length) return;
+				const containerW = el.offsetWidth;
+				if (!containerW) return;
+				const BADGE_W = 76;
+				let usedW = 0;
+				let n = 0;
+				for (let i = 0; i < chips.length; i++) {
+					const gap = i > 0 ? 4 : 0;
+					const chipW = chips[i].offsetWidth;
+					const budget = i === chips.length - 1 ? containerW : containerW - BADGE_W;
+					if (usedW + gap + chipW > budget) break;
+					usedW += gap + chipW;
+					n++;
+				}
+				visibleCount.value = Math.max(1, n);
+			} finally {
+				measuring = false;
+			}
+		}
+		onMounted(reflow);
+		useResizeObserver(containerEl, reflow);
+		watch(() => props.values.join("\0"), () => reflow(), { flush: "post" });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.values, (val, i) => {
+				return openBlock(), createBlock(Chip_default, {
+					key: val,
+					"data-chip-item": "",
+					size: "sm",
+					"is-closable": "",
+					style: normalizeStyle(i >= visibleCount.value ? "display: none" : void 0),
+					onClose: withModifiers(($event) => __props.removeValue(val), ["stop"])
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.getLabel(val)), 1)]),
+					_: 2
+				}, 1032, ["style", "onClose"]);
+			}), 128)), overflowCount.value > 0 ? (openBlock(), createBlock(Chip_default, {
+				key: 0,
+				size: "sm",
+				color: "default"
+			}, {
+				default: withCtx(() => [createTextVNode(" +" + toDisplayString(overflowCount.value) + " more ", 1)]),
+				_: 1
+			})) : createCommentVNode("", true)], 512);
+		};
+	}
+});
+//#endregion
+export { AutocompleteOverflowChips_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=AutocompleteOverflowChips.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/autocomplete/AutocompleteOverflowChips.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteOverflowChips.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\n\nconst props = defineProps<{\n  values: string[]\n  getLabel: (value: string) => string\n  removeValue: (value: string) => void\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n  if (measuring) return\n  measuring = true\n\n  try {\n    const el = containerEl.value\n    if (!el) return\n\n    // Phase 1: show all chips to measure their natural widths\n    visibleCount.value = props.values.length\n    await nextTick()\n\n    const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n    if (!chips.length) return\n\n    const containerW = el.offsetWidth\n    if (!containerW) return\n\n    // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n    const BADGE_W = 76\n\n    let usedW = 0\n    let n = 0\n\n    for (let i = 0; i < chips.length; i++) {\n      const gap = i > 0 ? 4 : 0\n      const chipW = chips[i].offsetWidth\n      const isLast = i === chips.length - 1\n      const budget = isLast ? containerW : containerW - BADGE_W\n\n      if (usedW + gap + chipW > budget) break\n      usedW += gap + chipW\n      n++\n    }\n\n    visibleCount.value = Math.max(1, n)\n  } finally {\n    measuring = false\n  }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\nwatch(\n  () => props.values.join('\\x00'),\n  () => reflow(),\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n  >\n    <Chip\n      v-for=\"(val, i) in values\"\n      :key=\"val\"\n      data-chip-item\n      size=\"sm\"\n      is-closable\n      :style=\"i >= visibleCount ? 'display: none' : undefined\"\n      @close.stop=\"removeValue(val)\"\n    >\n      {{ getLabel(val) }}\n    </Chip>\n    <Chip\n      v-if=\"overflowCount > 0\"\n      size=\"sm\"\n      color=\"default\"\n    >\n      +{{ overflowCount }} more\n    </Chip>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAMd,MAAM,cAAc,eAA4B,YAAW;EAC3D,MAAM,eAAe,IAAI,MAAM,OAAO,OAAM;EAC5C,MAAM,gBAAgB,eAAe,KAAK,IAAI,GAAG,MAAM,OAAO,SAAS,aAAa,MAAM,CAAA;EAG1F,IAAI,YAAY;EAEhB,eAAe,SAAS;AACtB,OAAI,UAAW;AACf,eAAY;AAEZ,OAAI;IACF,MAAM,KAAK,YAAY;AACvB,QAAI,CAAC,GAAI;AAGT,iBAAa,QAAQ,MAAM,OAAO;AAClC,UAAM,UAAS;IAEf,MAAM,QAAQ,CAAC,GAAG,GAAG,iBAA8B,mBAAmB,CAAA;AACtE,QAAI,CAAC,MAAM,OAAQ;IAEnB,MAAM,aAAa,GAAG;AACtB,QAAI,CAAC,WAAY;IAGjB,MAAM,UAAU;IAEhB,IAAI,QAAQ;IACZ,IAAI,IAAI;AAER,SAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;KACrC,MAAM,MAAM,IAAI,IAAI,IAAI;KACxB,MAAM,QAAQ,MAAM,GAAG;KAEvB,MAAM,SADS,MAAM,MAAM,SAAS,IACZ,aAAa,aAAa;AAElD,SAAI,QAAQ,MAAM,QAAQ,OAAQ;AAClC,cAAS,MAAM;AACf;;AAGF,iBAAa,QAAQ,KAAK,IAAI,GAAG,EAAC;aAC1B;AACR,gBAAY;;;AAIhB,YAAU,OAAM;AAChB,oBAAkB,aAAa,OAAM;AACrC,cACQ,MAAM,OAAO,KAAK,KAAO,QACzB,QAAQ,EACd,EAAE,OAAO,QAAQ,CACnB;;uBAIE,mBAsBM,OAtBN,YAsBM,EAAA,UAAA,KAAA,EAlBJ,mBAUO,UAAA,MAAA,WATc,QAAA,SAAX,KAAK,MAAC;wBADhB,YAUO,cAAA;KARJ,KAAK;KACN,kBAAA;KACA,MAAK;KACL,eAAA;KACC,OAAK,eAAE,KAAK,aAAA,QAAY,kBAAqB,KAAA,EAAS;KACtD,SAAK,eAAA,WAAO,QAAA,YAAY,IAAG,EAAA,CAAA,OAAA,CAAA;;4BAET,CAAA,gBAAA,gBAAhB,QAAA,SAAS,IAAG,CAAA,EAAA,EAAA,CAAA,CAAA;;;cAGT,cAAA,QAAa,KAAA,WAAA,EADrB,YAMO,cAAA;;IAJL,MAAK;IACL,OAAM;;2BAEL,CAAA,gBADF,OACE,gBAAG,cAAA,MAAa,GAAG,UACtB,EAAA,CAAA,CAAA"}

package/dist/components/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, provide } from 'vue'\nimport { formContextKey } from './form.context'\nimport { runValidation } from './validation'\nimport type { ValidationMode, FieldRegistration, FormContext } from './form.context'\n\nconst props = withDefaults(\n  defineProps<{\n    validationMode?: ValidationMode\n    isDisabled?: boolean\n    class?: string\n  }>(),\n  {\n    validationMode: 'on-submit',\n    isDisabled: false,\n    class: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  submit: [payload: { values: Record<string, unknown>; setErrors: (e: Record<string, string>) => void }]\n  invalid: [errors: Record<string, string>]\n}>()\n\nconst errors = ref<Record<string, string>>({})\nconst isSubmitting = ref(false)\nconst fields = new Map<string, FieldRegistration>()\n\nfunction registerField(reg: FieldRegistration): void {\n  fields.set(reg.name, reg)\n}\n\nfunction unregisterField(name: string): void {\n  fields.delete(name)\n  const next = { ...errors.value }\n  delete next[name]\n  errors.value = next\n}\n\nasync function triggerFieldValidation(name: string): Promise<void> {\n  const field = fields.get(name)\n  if (!field) return\n  const error = await runValidation(field.getValue(), field.rules, field.validate)\n  const next = { ...errors.value }\n  if (error) {\n    next[name] = error\n  } else {\n    delete next[name]\n  }\n  errors.value = next\n}\n\nfunction setErrors(newErrors: Record<string, string>): void {\n  errors.value = { ...errors.value, ...newErrors }\n  isSubmitting.value = false\n}\n\nasync function handleSubmit(): Promise<void> {\n  isSubmitting.value = true\n\n  const results = await Promise.all(\n    [...fields.entries()].map(async ([name, field]) => {\n      const error = await runValidation(field.getValue(), field.rules, field.validate)\n      return { name, error }\n    }),\n  )\n\n  const nextErrors: Record<string, string> = {}\n  for (const { name, error } of results) {\n    if (error) nextErrors[name] = error\n  }\n\n  if (Object.keys(nextErrors).length > 0) {\n    errors.value = nextErrors\n    isSubmitting.value = false\n    emit('invalid', nextErrors)\n    return\n  }\n\n  errors.value = {}\n\n  const values: Record<string, unknown> = {}\n  for (const [name, field] of fields.entries()) {\n    values[name] = field.getValue()\n  }\n\n  emit('submit', { values, setErrors })\n}\n\nconst ctx: FormContext = {\n  errors,\n  isSubmitting,\n  isDisabled: computed(() => props.isDisabled),\n  validationMode: computed(() => props.validationMode),\n  registerField,\n  unregisterField,\n  triggerFieldValidation,\n  setErrors,\n}\n\nprovide(formContextKey, ctx)\n</script>\n\n<template>\n  <form\n    :class=\"props.class\"\n    novalidate\n    @submit.prevent=\"handleSubmit\"\n  >\n    <slot\n      :is-submitting=\"isSubmitting\"\n      :is-disabled=\"props.isDisabled\"\n      :errors=\"errors\"\n    />\n  </form>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, provide } from 'vue'\nimport { formContextKey } from './form.context'\nimport { runValidation } from './validation'\nimport type { ValidationMode, FieldRegistration, FormContext } from './form.context'\n\nconst props = withDefaults(\n  defineProps<{\n    validationMode?: ValidationMode\n    isDisabled?: boolean\n    class?: string\n  }>(),\n  {\n    validationMode: 'on-submit',\n    isDisabled: false,\n    class: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  submit: [payload: { values: Record<string, unknown>; setErrors: (e: Record<string, string>) => void }]\n  invalid: [errors: Record<string, string>]\n  reset: []\n}>()\n\nconst errors = ref<Record<string, string>>({})\nconst isSubmitting = ref(false)\nconst isSubmitted = ref(false)\nconst submitCount = ref(0)\nconst fields = new Map<string, FieldRegistration>()\n\n// Reactive field count so computed properties re-evaluate when fields register/unregister\nconst fieldCount = ref(0)\n\nfunction registerField(reg: FieldRegistration): void {\n  fields.set(reg.name, reg)\n  fieldCount.value++\n}\n\nfunction unregisterField(name: string): void {\n  fields.delete(name)\n  fieldCount.value--\n  const next = { ...errors.value }\n  delete next[name]\n  errors.value = next\n}\n\n// ── Computed state ──────────────────────────────────────────────────────────\n\nconst isValid = computed(() => {\n  void fieldCount.value // track reactivity\n  return Object.keys(errors.value).length === 0\n})\n\nconst isDirty = computed(() => {\n  void fieldCount.value\n  for (const field of fields.values()) {\n    if (field.dirty.value) return true\n  }\n  return false\n})\n\nconst isTouched = computed(() => {\n  void fieldCount.value\n  for (const field of fields.values()) {\n    if (field.touched.value) return true\n  }\n  return false\n})\n\n// ── Helpers ─────────────────────────────────────────────────────────────────\n\nfunction getAllValues(): Record<string, unknown> {\n  const values: Record<string, unknown> = {}\n  for (const [name, field] of fields.entries()) {\n    values[name] = field.getValue()\n  }\n  return values\n}\n\n// ── Validation ───────────────────────────────────────────────────────────────\n\nasync function triggerFieldValidation(name: string): Promise<void> {\n  const field = fields.get(name)\n  if (!field) return\n  const error = await runValidation(\n    field.getValue(),\n    field.rules,\n    field.validate,\n    { values: getAllValues() },\n  )\n  const next = { ...errors.value }\n  if (error) {\n    next[name] = error\n  } else {\n    delete next[name]\n  }\n  errors.value = next\n}\n\nasync function trigger(name?: string): Promise<boolean> {\n  if (name) {\n    await triggerFieldValidation(name)\n    return !errors.value[name]\n  }\n\n  const results = await Promise.all(\n    [...fields.entries()].map(async ([fieldName, field]) => {\n      const error = await runValidation(\n        field.getValue(),\n        field.rules,\n        field.validate,\n        { values: getAllValues() },\n      )\n      return { name: fieldName, error }\n    }),\n  )\n\n  const next: Record<string, string> = {}\n  for (const { name: fieldName, error } of results) {\n    if (error) next[fieldName] = error\n  }\n  errors.value = next\n  return Object.keys(next).length === 0\n}\n\n// ── Error management ─────────────────────────────────────────────────────────\n\nfunction setErrors(newErrors: Record<string, string>): void {\n  errors.value = { ...errors.value, ...newErrors }\n  isSubmitting.value = false\n}\n\nfunction setError(name: string, message: string): void {\n  errors.value = { ...errors.value, [name]: message }\n}\n\nfunction clearErrors(name?: string): void {\n  if (name) {\n    const next = { ...errors.value }\n    delete next[name]\n    errors.value = next\n  } else {\n    errors.value = {}\n  }\n}\n\n// ── Values ───────────────────────────────────────────────────────────────────\n\nfunction getValues(): Record<string, unknown> {\n  return getAllValues()\n}\n\nfunction setValue(name: string, value: unknown): void {\n  const field = fields.get(name)\n  if (field) field.setValue(value)\n}\n\n// ── Reset ────────────────────────────────────────────────────────────────────\n\nfunction reset(): void {\n  for (const field of fields.values()) {\n    field.reset()\n  }\n  errors.value = {}\n  isSubmitting.value = false\n  isSubmitted.value = false\n  submitCount.value = 0\n  emit('reset')\n}\n\n// ── Submit ───────────────────────────────────────────────────────────────────\n\nasync function handleSubmit(): Promise<void> {\n  isSubmitting.value = true\n  submitCount.value++\n\n  const values = getAllValues()\n  const context = { values }\n\n  const results = await Promise.all(\n    [...fields.entries()].map(async ([name, field]) => {\n      const error = await runValidation(field.getValue(), field.rules, field.validate, context)\n      return { name, error }\n    }),\n  )\n\n  const nextErrors: Record<string, string> = {}\n  for (const { name, error } of results) {\n    if (error) nextErrors[name] = error\n  }\n\n  if (Object.keys(nextErrors).length > 0) {\n    errors.value = nextErrors\n    isSubmitting.value = false\n    isSubmitted.value = true\n    emit('invalid', nextErrors)\n    return\n  }\n\n  errors.value = {}\n  isSubmitted.value = true\n  isSubmitting.value = false\n  emit('submit', { values, setErrors })\n}\n\n// ── Context ──────────────────────────────────────────────────────────────────\n\nconst ctx: FormContext = {\n  errors,\n  isSubmitting,\n  isSubmitted,\n  submitCount,\n  isDisabled: computed(() => props.isDisabled),\n  isValid,\n  isDirty,\n  isTouched,\n  validationMode: computed(() => props.validationMode),\n  registerField,\n  unregisterField,\n  triggerFieldValidation,\n  setErrors,\n  setError,\n  clearErrors,\n  getValues,\n  setValue,\n  trigger,\n  reset,\n}\n\nprovide(formContextKey, ctx)\n\ndefineExpose({\n  errors,\n  isSubmitting,\n  isSubmitted,\n  submitCount,\n  isValid,\n  isDirty,\n  isTouched,\n  getValues,\n  setValue,\n  setErrors,\n  setError,\n  clearErrors,\n  trigger,\n  reset,\n})\n</script>\n\n<template>\n  <form\n    :class=\"props.class\"\n    novalidate\n    @submit.prevent=\"handleSubmit\"\n  >\n    <slot\n      :is-submitting=\"isSubmitting\"\n      :is-submitted=\"isSubmitted\"\n      :submit-count=\"submitCount\"\n      :is-disabled=\"props.isDisabled\"\n      :is-valid=\"isValid\"\n      :is-dirty=\"isDirty\"\n      :is-touched=\"isTouched\"\n      :errors=\"errors\"\n      :get-values=\"getValues\"\n      :set-value=\"setValue\"\n      :set-errors=\"setErrors\"\n      :set-error=\"setError\"\n      :clear-errors=\"clearErrors\"\n      :trigger=\"trigger\"\n      :reset=\"reset\"\n    />\n  </form>\n</template>\n"],"mappings":""}