@auronui/vue 1.0.20 → 1.0.22

package/dist/components/combo-box/ComboBoxEmpty.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxEmpty.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxEmpty } from 'reka-ui'\n</script>\n\n<template>\n  <ComboboxEmpty\n    class=\"py-3 text-center text-sm text-default-400\"\n    data-slot=\"empty-content\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ComboBoxEmpty.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxEmpty } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  as: undefined,\n  asChild: false,\n})\n</script>\n\n<template>\n  <ComboboxEmpty\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    class=\"py-3 text-center text-sm text-default-400\"\n    data-slot=\"empty-content\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n"],"mappings":""}

package/dist/components/combo-box/ComboBoxEmpty.vue_vue_type_script_setup_true_lang.js

@@ -3,15 +3,25 @@ import { ComboboxEmpty } from "reka-ui";
 //#region src/components/combo-box/ComboBoxEmpty.vue?vue&type=script&setup=true&lang.ts
 var ComboBoxEmpty_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ComboBoxEmpty",
+	props: {
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		}
+	},
 	setup(__props) {
+		const props = __props;
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxEmpty), {
+				as: props.as,
+				"as-child": props.asChild,
 				class: "py-3 text-center text-sm text-default-400",
 				"data-slot": "empty-content"
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			});
+			}, 8, ["as", "as-child"]);
 		};
 	}
 });

package/dist/components/combo-box/ComboBoxEmpty.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxEmpty.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxEmpty } from 'reka-ui'\n</script>\n\n<template>\n  <ComboboxEmpty\n    class=\"py-3 text-center text-sm text-default-400\"\n    data-slot=\"empty-content\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n"],"mappings":";;;;;;;uBAKE,YAKgB,MAAA,cAAA,EAAA;IAJd,OAAM;IACN,aAAU;;2BAEF,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ComboBoxEmpty.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxEmpty } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  as: undefined,\n  asChild: false,\n})\n</script>\n\n<template>\n  <ComboboxEmpty\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    class=\"py-3 text-center text-sm text-default-400\"\n    data-slot=\"empty-content\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAGA,MAAM,QAAQ;;uBAYZ,YAOgB,MAAA,cAAA,EAAA;IANb,IAAI,MAAM;IACV,YAAU,MAAM;IACjB,OAAM;IACN,aAAU;;2BAEF,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/combo-box/ComboBoxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxInput.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useComboBoxInject()\n</script>\n\n<template>\n  <ComboboxAnchor\n    :class=\"ctx.slots.value.inputGroup()\"\n    data-slot=\"input-group\"\n  >\n    <ComboboxInput\n      :placeholder=\"props.placeholder\"\n      :disabled=\"ctx.isDisabled.value\"\n      :display-value=\"ctx.displayValue.value\"\n      class=\"combo-box__input\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n    />\n    <!-- Clear button: shown when there's input -->\n    <ComboboxCancel\n      class=\"combo-box__clear-button\"\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          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    </ComboboxCancel>\n    <!-- Dropdown trigger -->\n    <ComboboxTrigger\n      :class=\"ctx.slots.value.trigger()\"\n      data-slot=\"selector-button\"\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          data-slot=\"combo-box-trigger-default-icon\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </ComboboxTrigger>\n  </ComboboxAnchor>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ComboBoxInput.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n  /** Custom reference element for the anchor. */\n  anchorReference?: object | null\n  /** Render the anchor as a different element. */\n  anchorAs?: string\n  /** Merge anchor props onto child element. */\n  anchorAsChild?: boolean\n  /** Function to compute the display value from the current model value. */\n  displayValue?: (value: string) => string\n  /** Two-way bound search input value. */\n  modelValue?: string\n  /** Auto-focus the input on mount. */\n  autoFocus?: boolean\n  /** Disable the input. Falls back to context isDisabled. */\n  disabled?: boolean\n  /** Render the input as a different element. */\n  as?: string\n  /** Merge input props onto child element. */\n  asChild?: boolean\n  /** Disable the trigger button. */\n  triggerDisabled?: boolean\n  /** Render the trigger as a different element. */\n  triggerAs?: string\n  /** Merge trigger props onto child element. */\n  triggerAsChild?: boolean\n  /** Render the cancel button as a different element. */\n  cancelAs?: string\n  /** Merge cancel props onto child element. */\n  cancelAsChild?: boolean\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n  anchorReference: undefined,\n  anchorAs: undefined,\n  anchorAsChild: false,\n  displayValue: undefined,\n  modelValue: undefined,\n  autoFocus: false,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n  triggerDisabled: undefined,\n  triggerAs: undefined,\n  triggerAsChild: false,\n  cancelAs: undefined,\n  cancelAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst ctx = useComboBoxInject()\n</script>\n\n<template>\n  <ComboboxAnchor\n    :reference=\"(props.anchorReference as any)\"\n    :as=\"props.anchorAs\"\n    :as-child=\"props.anchorAsChild\"\n    :class=\"ctx.slots.value.inputGroup()\"\n    data-slot=\"input-group\"\n  >\n    <ComboboxInput\n      :placeholder=\"props.placeholder\"\n      :model-value=\"props.modelValue\"\n      :auto-focus=\"props.autoFocus\"\n      :disabled=\"props.disabled ?? ctx.isDisabled.value\"\n      :display-value=\"props.displayValue ?? ctx.displayValue.value\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      class=\"combo-box__input\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n      @update:model-value=\"emit('update:modelValue', $event)\"\n    />\n    <!-- Clear button: shown when there's input -->\n    <ComboboxCancel\n      :as=\"props.cancelAs\"\n      :as-child=\"props.cancelAsChild\"\n      class=\"combo-box__clear-button\"\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          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    </ComboboxCancel>\n    <!-- Dropdown trigger -->\n    <ComboboxTrigger\n      :disabled=\"props.triggerDisabled\"\n      :as=\"props.triggerAs\"\n      :as-child=\"props.triggerAsChild\"\n      :class=\"ctx.slots.value.trigger()\"\n      data-slot=\"selector-button\"\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          data-slot=\"combo-box-trigger-default-icon\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </ComboboxTrigger>\n  </ComboboxAnchor>\n</template>\n"],"mappings":""}

package/dist/components/combo-box/ComboBoxInput.vue_vue_type_script_setup_true_lang.js

@@ -6,35 +6,89 @@ var ComboBoxInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	__name: "ComboBoxInput",
 	props: {
 		placeholder: { default: void 0 },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		anchorReference: { default: void 0 },
+		anchorAs: { default: void 0 },
+		anchorAsChild: {
+			type: Boolean,
+			default: false
+		},
+		displayValue: {
+			type: Function,
+			default: void 0
+		},
+		modelValue: { default: void 0 },
+		autoFocus: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		triggerDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		triggerAs: { default: void 0 },
+		triggerAsChild: {
+			type: Boolean,
+			default: false
+		},
+		cancelAs: { default: void 0 },
+		cancelAsChild: {
+			type: Boolean,
+			default: false
+		}
 	},
-	setup(__props) {
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const ctx = useComboBoxInject();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxAnchor), {
+				reference: props.anchorReference,
+				as: props.anchorAs,
+				"as-child": props.anchorAsChild,
 				class: normalizeClass(unref(ctx).slots.value.inputGroup()),
 				"data-slot": "input-group"
 			}, {
 				default: withCtx(() => [
 					createVNode(unref(ComboboxInput), {
 						placeholder: props.placeholder,
-						disabled: unref(ctx).isDisabled.value,
-						"display-value": unref(ctx).displayValue.value,
+						"model-value": props.modelValue,
+						"auto-focus": props.autoFocus,
+						disabled: props.disabled ?? unref(ctx).isDisabled.value,
+						"display-value": props.displayValue ?? unref(ctx).displayValue.value,
+						as: props.as,
+						"as-child": props.asChild,
 						class: "combo-box__input",
 						"data-slot": "input",
-						autocomplete: "off"
+						autocomplete: "off",
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
 					}, null, 8, [
 						"placeholder",
+						"model-value",
+						"auto-focus",
 						"disabled",
-						"display-value"
+						"display-value",
+						"as",
+						"as-child"
 					]),
 					createVNode(unref(ComboboxCancel), {
+						as: props.cancelAs,
+						"as-child": props.cancelAsChild,
 						class: "combo-box__clear-button",
 						"data-slot": "clear-button",
 						"aria-label": "Clear"
 					}, {
-						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",
@@ -57,13 +111,16 @@ var ComboBoxInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							y2: "18"
 						})], -1))])]),
 						_: 3
-					}),
+					}, 8, ["as", "as-child"]),
 					createVNode(unref(ComboboxTrigger), {
+						disabled: props.triggerDisabled,
+						as: props.triggerAs,
+						"as-child": props.triggerAsChild,
 						class: normalizeClass(unref(ctx).slots.value.trigger()),
 						"data-slot": "selector-button",
 						"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",
@@ -77,10 +134,20 @@ var ComboBoxInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							"aria-hidden": "true"
 						}, [createElementVNode("polyline", { points: "6 9 12 15 18 9" })], -1))])]),
 						_: 3
-					}, 8, ["class"])
+					}, 8, [
+						"disabled",
+						"as",
+						"as-child",
+						"class"
+					])
 				]),
 				_: 3
-			}, 8, ["class"]);
+			}, 8, [
+				"reference",
+				"as",
+				"as-child",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/combo-box/ComboBoxInput.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useComboBoxInject()\n</script>\n\n<template>\n  <ComboboxAnchor\n    :class=\"ctx.slots.value.inputGroup()\"\n    data-slot=\"input-group\"\n  >\n    <ComboboxInput\n      :placeholder=\"props.placeholder\"\n      :disabled=\"ctx.isDisabled.value\"\n      :display-value=\"ctx.displayValue.value\"\n      class=\"combo-box__input\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n    />\n    <!-- Clear button: shown when there's input -->\n    <ComboboxCancel\n      class=\"combo-box__clear-button\"\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          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    </ComboboxCancel>\n    <!-- Dropdown trigger -->\n    <ComboboxTrigger\n      :class=\"ctx.slots.value.trigger()\"\n      data-slot=\"selector-button\"\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          data-slot=\"combo-box-trigger-default-icon\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </ComboboxTrigger>\n  </ComboboxAnchor>\n</template>\n"],"mappings":";;;;;;;;;;;EAIA,MAAM,QAAQ;EAQd,MAAM,MAAM,mBAAkB;;uBAI5B,YAsEiB,MAAA,eAAA,EAAA;IArEd,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,YAAU,CAAA;IAClC,aAAU;;2BASR;KAPF,YAOE,MAAA,cAAA,EAAA;MANC,aAAa,MAAM;MACnB,UAAU,MAAA,IAAG,CAAC,WAAW;MACzB,iBAAe,MAAA,IAAG,CAAC,aAAa;MACjC,OAAM;MACN,aAAU;MACV,cAAa;;;;;;KAGf,YAgCiB,MAAA,eAAA,EAAA;MA/Bf,OAAM;MACN,aAAU;MACV,cAAW;;6BA4BJ,CA1BP,WA0BO,KAAA,QAAA,aAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAzBL,mBAwBM,OAAA;OAvBJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,eAAY;UAEZ,mBAKE,QAAA;OAJA,IAAG;OACH,IAAG;OACH,IAAG;OACH,IAAG;UAEL,mBAKE,QAAA;OAJA,IAAG;OACH,IAAG;OACH,IAAG;OACH,IAAG;;;;KAMX,YAsBkB,MAAA,gBAAA,EAAA;MArBf,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,CAAA;MAC/B,aAAU;MACV,cAAW;;6BAkBJ,CAhBP,WAgBO,KAAA,QAAA,eAAA,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"}
+{"version":3,"file":"ComboBoxInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n  /** Custom reference element for the anchor. */\n  anchorReference?: object | null\n  /** Render the anchor as a different element. */\n  anchorAs?: string\n  /** Merge anchor props onto child element. */\n  anchorAsChild?: boolean\n  /** Function to compute the display value from the current model value. */\n  displayValue?: (value: string) => string\n  /** Two-way bound search input value. */\n  modelValue?: string\n  /** Auto-focus the input on mount. */\n  autoFocus?: boolean\n  /** Disable the input. Falls back to context isDisabled. */\n  disabled?: boolean\n  /** Render the input as a different element. */\n  as?: string\n  /** Merge input props onto child element. */\n  asChild?: boolean\n  /** Disable the trigger button. */\n  triggerDisabled?: boolean\n  /** Render the trigger as a different element. */\n  triggerAs?: string\n  /** Merge trigger props onto child element. */\n  triggerAsChild?: boolean\n  /** Render the cancel button as a different element. */\n  cancelAs?: string\n  /** Merge cancel props onto child element. */\n  cancelAsChild?: boolean\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n  anchorReference: undefined,\n  anchorAs: undefined,\n  anchorAsChild: false,\n  displayValue: undefined,\n  modelValue: undefined,\n  autoFocus: false,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n  triggerDisabled: undefined,\n  triggerAs: undefined,\n  triggerAsChild: false,\n  cancelAs: undefined,\n  cancelAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst ctx = useComboBoxInject()\n</script>\n\n<template>\n  <ComboboxAnchor\n    :reference=\"(props.anchorReference as any)\"\n    :as=\"props.anchorAs\"\n    :as-child=\"props.anchorAsChild\"\n    :class=\"ctx.slots.value.inputGroup()\"\n    data-slot=\"input-group\"\n  >\n    <ComboboxInput\n      :placeholder=\"props.placeholder\"\n      :model-value=\"props.modelValue\"\n      :auto-focus=\"props.autoFocus\"\n      :disabled=\"props.disabled ?? ctx.isDisabled.value\"\n      :display-value=\"props.displayValue ?? ctx.displayValue.value\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      class=\"combo-box__input\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n      @update:model-value=\"emit('update:modelValue', $event)\"\n    />\n    <!-- Clear button: shown when there's input -->\n    <ComboboxCancel\n      :as=\"props.cancelAs\"\n      :as-child=\"props.cancelAsChild\"\n      class=\"combo-box__clear-button\"\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          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    </ComboboxCancel>\n    <!-- Dropdown trigger -->\n    <ComboboxTrigger\n      :disabled=\"props.triggerDisabled\"\n      :as=\"props.triggerAs\"\n      :as-child=\"props.triggerAsChild\"\n      :class=\"ctx.slots.value.trigger()\"\n      data-slot=\"selector-button\"\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          data-slot=\"combo-box-trigger-default-icon\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </ComboboxTrigger>\n  </ComboboxAnchor>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIA,MAAM,QAAQ;EAkDd,MAAM,OAAO;EAIb,MAAM,MAAM,mBAAkB;;uBAI5B,YAmFiB,MAAA,eAAA,EAAA;IAlFd,WAAY,MAAM;IAClB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,YAAU,CAAA;IAClC,aAAU;;2BAcR;KAZF,YAYE,MAAA,cAAA,EAAA;MAXC,aAAa,MAAM;MACnB,eAAa,MAAM;MACnB,cAAY,MAAM;MAClB,UAAU,MAAM,YAAY,MAAA,IAAG,CAAC,WAAW;MAC3C,iBAAe,MAAM,gBAAgB,MAAA,IAAG,CAAC,aAAa;MACtD,IAAI,MAAM;MACV,YAAU,MAAM;MACjB,OAAM;MACN,aAAU;MACV,cAAa;MACZ,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,qBAAsB,OAAM;;;;;;;;;;KAGvD,YAkCiB,MAAA,eAAA,EAAA;MAjCd,IAAI,MAAM;MACV,YAAU,MAAM;MACjB,OAAM;MACN,aAAU;MACV,cAAW;;6BA4BJ,CA1BP,WA0BO,KAAA,QAAA,aAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAzBL,mBAwBM,OAAA;OAvBJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,eAAY;UAEZ,mBAKE,QAAA;OAJA,IAAG;OACH,IAAG;OACH,IAAG;OACH,IAAG;UAEL,mBAKE,QAAA;OAJA,IAAG;OACH,IAAG;OACH,IAAG;OACH,IAAG;;;;KAMX,YAyBkB,MAAA,gBAAA,EAAA;MAxBf,UAAU,MAAM;MAChB,IAAI,MAAM;MACV,YAAU,MAAM;MAChB,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,CAAA;MAC/B,aAAU;MACV,cAAW;;6BAkBJ,CAhBP,WAgBO,KAAA,QAAA,eAAA,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"}

package/dist/components/combo-box/ComboBoxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type Slots, type VNode } from 'vue'\nimport { ComboboxItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.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 = useComboBoxInject()\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 ComboBox bridge\n// so displayValue() and handleModelValueUpdate() can translate correctly.\nonMounted(() => {\n  ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n  ctx.unregisterItem(props.value)\n})\n</script>\n\n<template>\n  <ComboboxItem\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    <slot />\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  </ComboboxItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ComboBoxItem.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type Slots, type VNode } from 'vue'\nimport { ComboboxItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  isDisabled?: boolean\n  class?: string\n  /** A string value for typeahead matching. Defaults to display text. */\n  textValue?: string\n  /** Whether the item is disabled. Alias for isDisabled. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n  /** Render the ComboboxItemIndicator as a different element. */\n  indicatorAs?: string\n  /** Merge indicator props onto child element. */\n  indicatorAsChild?: boolean\n}>(), {\n  isDisabled: false,\n  class: undefined,\n  textValue: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n  indicatorAs: undefined,\n  indicatorAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'select': [event: Event]\n}>()\n\nconst slots: Slots = useSlots()\nconst ctx = useComboBoxInject()\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 ComboBox bridge\n// so displayValue() and handleModelValueUpdate() can translate correctly.\nonMounted(() => {\n  ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n  ctx.unregisterItem(props.value)\n})\n</script>\n\n<template>\n  <ComboboxItem\n    :value=\"displayText\"\n    :text-value=\"props.textValue ?? displayText\"\n    :disabled=\"props.disabled ?? props.isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :data-item-value=\"props.value\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n    @select=\"emit('select', $event)\"\n  >\n    <slot name=\"startContent\" />\n    <slot />\n    <ComboboxItemIndicator\n      :as=\"props.indicatorAs\"\n      :as-child=\"props.indicatorAsChild\"\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  </ComboboxItem>\n</template>\n"],"mappings":""}

package/dist/components/combo-box/ComboBoxItem.vue_vue_type_script_setup_true_lang.js

@@ -10,10 +10,27 @@ var ComboBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		textValue: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		indicatorAs: { default: void 0 },
+		indicatorAsChild: {
+			type: Boolean,
+			default: false
+		}
 	},
-	setup(__props) {
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const slots = useSlots();
 		const ctx = useComboBoxInject();
 		function extractText(nodes) {
@@ -37,20 +54,25 @@ var ComboBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxItem), {
 				value: displayText.value,
-				"text-value": displayText.value,
-				disabled: props.isDisabled,
+				"text-value": props.textValue ?? displayText.value,
+				disabled: props.disabled ?? props.isDisabled,
+				as: props.as,
+				"as-child": props.asChild,
 				"data-item-value": props.value,
 				class: "list-box-item list-box-item--default",
-				"data-slot": "list-box-item"
+				"data-slot": "list-box-item",
+				onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event))
 			}, {
 				default: withCtx(() => [
 					renderSlot(_ctx.$slots, "startContent"),
 					renderSlot(_ctx.$slots, "default"),
 					createVNode(unref(ComboboxItemIndicator), {
+						as: props.indicatorAs,
+						"as-child": props.indicatorAsChild,
 						class: "list-box-item__indicator",
 						"data-slot": "list-box-item-indicator"
 					}, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "12",
 							height: "12",
@@ -64,7 +86,7 @@ var ComboBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 							"aria-hidden": "true"
 						}, [createElementVNode("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					}),
+					}, 8, ["as", "as-child"]),
 					renderSlot(_ctx.$slots, "endContent")
 				]),
 				_: 3
@@ -72,6 +94,8 @@ var ComboBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				"value",
 				"text-value",
 				"disabled",
+				"as",
+				"as-child",
 				"data-item-value"
 			]);
 		};

package/dist/components/combo-box/ComboBoxItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type Slots, type VNode } from 'vue'\nimport { ComboboxItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.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 = useComboBoxInject()\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 ComboBox bridge\n// so displayValue() and handleModelValueUpdate() can translate correctly.\nonMounted(() => {\n  ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n  ctx.unregisterItem(props.value)\n})\n</script>\n\n<template>\n  <ComboboxItem\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    <slot />\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  </ComboboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EASd,MAAM,QAAe,UAAS;EAC9B,MAAM,MAAM,mBAAkB;EAG9B,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,YAiCe,MAAA,aAAA,EAAA;IAhCZ,OAAO,YAAA;IACP,cAAY,YAAA;IACZ,UAAU,MAAM;IAChB,mBAAiB,MAAM;IACxB,OAAM;IACN,aAAU;;2BAEkB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,WAAQ,KAAA,QAAA,UAAA;KACR,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":"ComboBoxItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type Slots, type VNode } from 'vue'\nimport { ComboboxItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  isDisabled?: boolean\n  class?: string\n  /** A string value for typeahead matching. Defaults to display text. */\n  textValue?: string\n  /** Whether the item is disabled. Alias for isDisabled. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n  /** Render the ComboboxItemIndicator as a different element. */\n  indicatorAs?: string\n  /** Merge indicator props onto child element. */\n  indicatorAsChild?: boolean\n}>(), {\n  isDisabled: false,\n  class: undefined,\n  textValue: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n  indicatorAs: undefined,\n  indicatorAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'select': [event: Event]\n}>()\n\nconst slots: Slots = useSlots()\nconst ctx = useComboBoxInject()\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 ComboBox bridge\n// so displayValue() and handleModelValueUpdate() can translate correctly.\nonMounted(() => {\n  ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n  ctx.unregisterItem(props.value)\n})\n</script>\n\n<template>\n  <ComboboxItem\n    :value=\"displayText\"\n    :text-value=\"props.textValue ?? displayText\"\n    :disabled=\"props.disabled ?? props.isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :data-item-value=\"props.value\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n    @select=\"emit('select', $event)\"\n  >\n    <slot name=\"startContent\" />\n    <slot />\n    <ComboboxItemIndicator\n      :as=\"props.indicatorAs\"\n      :as-child=\"props.indicatorAsChild\"\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  </ComboboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EA2Bd,MAAM,OAAO;EAIb,MAAM,QAAe,UAAS;EAC9B,MAAM,MAAM,mBAAkB;EAG9B,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,YAsCe,MAAA,aAAA,EAAA;IArCZ,OAAO,YAAA;IACP,cAAY,MAAM,aAAa,YAAA;IAC/B,UAAU,MAAM,YAAY,MAAM;IAClC,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,mBAAiB,MAAM;IACxB,OAAM;IACN,aAAU;IACT,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,OAAM;;2BAEF;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,WAAQ,KAAA,QAAA,UAAA;KACR,YAuBwB,MAAA,sBAAA,EAAA;MAtBrB,IAAI,MAAM;MACV,YAAU,MAAM;MACjB,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"}

package/dist/components/date-input/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.vue"],"sourcesContent":["<!--\n  DateInput — form-field mirror of Input.vue for @internationalized/date.\n\n  Anatomy, data-attributes, floating-label behavior, start/end content\n  slots, and a11y wiring all mirror Input.vue. See the Input.vue docblock\n  for the canonical contract.\n-->\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\nimport { DateFieldRoot, DateFieldInput } from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport { dateInputVariants, type DateInputVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n})\n\nconst modelValue = defineModel<DateValue | null | undefined>()\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: DateInputVariants['variant']\n  /** Field height. @default 'md' */\n  size?: DateInputVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: DateInputVariants['color']\n  /** Label placement relative to the field. @default 'inside' */\n  labelPlacement?: DateInputVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadOnly?: boolean\n  /** Adds a required asterisk next to the label. @default false */\n  isRequired?: boolean\n  /** Field label. When omitted, floating-label behavior is skipped. */\n  label?: string\n  /** Helper text below the field. Suppressed when isInvalid && errorMessage is shown. */\n  description?: string\n  /** Error text below the field. Only rendered when isInvalid is true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper. */\n  class?: ClassValue\n  /** Per-slot class overrides. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    startContent: ClassValue\n    segmentList: ClassValue\n    segment: ClassValue\n    endContent: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n  }>\n\n  /* ─── DateInput-specific ──────────────────────────────────────── */\n  defaultValue?: DateValue\n  placeholderValue?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  locale?: string\n  name?: string\n  hideTimeZone?: boolean\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst fieldId = computed(() => (attrs.id as string | undefined) ?? `${generatedId}-field`)\nconst labelId = computed(() => `${generatedId}-label`)\nconst descriptionId = computed(() => `${generatedId}-description`)\nconst errorMessageId = computed(() => `${generatedId}-error`)\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null)\n\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n  if (showError.value) return errorMessageId.value\n  if (showDescription.value) return descriptionId.value\n  return undefined\n})\n\nconst fieldRef = ref<HTMLElement | null>(null)\n// Reka components expose their root DOM node via $el — unwrap before using DOM APIs.\nconst fieldEl = computed<HTMLElement | null>(() => {\n  const r = fieldRef.value as unknown as { $el?: HTMLElement } | HTMLElement | null\n  if (!r) return null\n  if (r instanceof HTMLElement) return r\n  return r.$el ?? null\n})\n\n// `isFocused` tracks focus on a DATE SEGMENT specifically — not any descendant.\n// This prevents nested interactive children (e.g. a DatePickerTrigger button in\n// endContent) from flipping the field into the focused visual state.\nconst isFocused = ref(false)\nfunction updateSegmentFocus() {\n  const root = fieldEl.value\n  if (!root) { isFocused.value = false; return }\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  isFocused.value = !!active\n    && root.contains(active)\n    && active.hasAttribute('data-reka-date-field-segment')\n}\nfunction onDocFocusIn() { updateSegmentFocus() }\nfunction onDocFocusOut() { queueMicrotask(updateSegmentFocus) }\n\n// Guard against a focus snap-back after an outside click. When the user\n// clicks outside the field, we mark a short-lived \"suppress segment focus\"\n// window. Any focusin landing on a segment inside that window gets blurred\n// immediately — kills the two-click-to-blur UX regardless of which internal\n// mechanism (Reka VisuallyHidden, label-for, contenteditable selection\n// restoration) tried to restore the focus.\nlet suppressSegmentFocusUntil = 0\nfunction onDocPointerDown(e: PointerEvent) {\n  const root = fieldEl.value\n  if (!root) return\n  const target = e.target as Node | null\n  if (!target || root.contains(target)) return\n  suppressSegmentFocusUntil = performance.now() + 250\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-date-field-segment')) {\n    active.blur()\n  }\n}\nfunction onDocFocusInGuard(e: FocusEvent) {\n  if (performance.now() >= suppressSegmentFocusUntil) return\n  const root = fieldEl.value\n  if (!root) return\n  const t = e.target as HTMLElement | null\n  if (t && root.contains(t) && t.hasAttribute?.('data-reka-date-field-segment')) {\n    t.blur()\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('focusin', onDocFocusIn)\n  document.addEventListener('focusout', onDocFocusOut)\n  document.addEventListener('pointerdown', onDocPointerDown, true)\n  document.addEventListener('focusin', onDocFocusInGuard, true)\n})\nonBeforeUnmount(() => {\n  document.removeEventListener('focusin', onDocFocusIn)\n  document.removeEventListener('focusout', onDocFocusOut)\n  document.removeEventListener('pointerdown', onDocPointerDown, true)\n  document.removeEventListener('focusin', onDocFocusInGuard, true)\n})\n\n// Track data-filled synchronously from the rendered segments — defaultValue +\n// isFilled from modelValue misses the uncontrolled case and the partially-typed\n// case. After each value/segment render, sniff any non-literal segment that\n// carries data-placeholder=\"false\".\nconst segmentsFilled = ref(false)\nfunction recomputeFilled() {\n  const root = fieldEl.value\n  if (!root || typeof root.querySelectorAll !== 'function') {\n    segmentsFilled.value = false\n    return\n  }\n  const segs = root.querySelectorAll('[data-reka-date-field-segment]:not([data-reka-date-field-segment=\"literal\"])')\n  let anyFilled = false\n  segs.forEach((el) => {\n    if ((el as HTMLElement).dataset.placeholder === 'false') anyFilled = true\n  })\n  segmentsFilled.value = anyFilled\n}\nwatch([modelValue, () => props.defaultValue, () => props.granularity], () => {\n  queueMicrotask(recomputeFilled)\n}, { immediate: true })\n\nconst effectiveFilled = computed(() => isFilled.value || segmentsFilled.value)\n\n// Only intervene on the INITIAL click that enters the field. Once a segment\n// already holds focus, leave subsequent mousedowns alone so the user can\n// blur naturally (clicking elsewhere) without focus snapping back to a\n// segment and requiring a second click.\nfunction handleFieldMousedown(e: MouseEvent) {\n  const target = e.target as HTMLElement | null\n  if (!target) return\n  if (target.closest('[data-reka-date-field-segment]')) return\n  if (target.closest('[data-slot=\"start-content\"]')) return\n  if (target.closest('[data-slot=\"end-content\"]')) return\n  if (target.closest('button, [role=\"button\"]')) return\n  const root = fieldEl.value\n  if (!root) return\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-date-field-segment')) {\n    return\n  }\n  const first = root.querySelector<HTMLElement>(\n    '[data-reka-date-field-segment]:not([data-reka-date-field-segment=\"literal\"])',\n  )\n  if (first) {\n    e.preventDefault()\n    first.focus()\n  }\n}\n\nconst slotFns = computed(() =>\n  dateInputVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadOnly,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\nconst showOutsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement !== 'inside',\n)\nconst showInsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement === 'inside',\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-invalid=\"isInvalid || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-readonly=\"isReadOnly || undefined\"\n    :data-required=\"isRequired || undefined\"\n    :data-has-label=\"hasLabel || undefined\"\n    :data-has-helper=\"hasHelper || undefined\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <DateFieldRoot\n        :id=\"fieldId\"\n        ref=\"fieldRef\"\n        v-model=\"modelValue\"\n        :default-value=\"defaultValue\"\n        :placeholder=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :granularity=\"granularity\"\n        :hour-cycle=\"hourCycle\"\n        :locale=\"locale\"\n        :disabled=\"isDisabled\"\n        :readonly=\"isReadOnly\"\n        :name=\"name\"\n        :hide-time-zone=\"hideTimeZone\"\n        :aria-labelledby=\"hasLabel ? labelId : undefined\"\n        :aria-describedby=\"ariaDescribedBy\"\n        :aria-required=\"isRequired || undefined\"\n        :aria-invalid=\"isInvalid || undefined\"\n        :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n        :data-filled=\"hasLabel ? (effectiveFilled || undefined) : undefined\"\n        :data-focused=\"isFocused || undefined\"\n        :data-invalid=\"isInvalid || undefined\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-readonly=\"isReadOnly || undefined\"\n        @mousedown=\"handleFieldMousedown\"\n      >\n        <template #default=\"{ segments }\">\n          <label\n            v-if=\"showInsideLabel\"\n            :id=\"labelId\"\n            :for=\"fieldId\"\n            :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n          >{{ label }}<span\n            v-if=\"isRequired\"\n            aria-hidden=\"true\"\n          > *</span></label>\n\n          <span\n            v-if=\"$slots.startContent\"\n            :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n            data-slot=\"start-content\"\n          >\n            <slot name=\"startContent\" />\n          </span>\n\n          <div\n            :class=\"composeClassName(slotFns.segmentList(), props.classNames?.segmentList)\"\n            data-slot=\"segment-list\"\n          >\n            <template\n              v-for=\"(segment, _i) in segments\"\n              :key=\"_i\"\n            >\n              <DateFieldInput\n                :part=\"segment.part\"\n                :class=\"composeClassName(slotFns.segment(), props.classNames?.segment)\"\n              >\n                {{ segment.value }}\n              </DateFieldInput>\n            </template>\n          </div>\n\n          <span\n            v-if=\"$slots.endContent\"\n            :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n            data-slot=\"end-content\"\n          >\n            <slot name=\"endContent\" />\n          </span>\n        </template>\n      </DateFieldRoot>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n          role=\"alert\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.vue"],"sourcesContent":["<!--\n  DateInput — form-field mirror of Input.vue for @internationalized/date.\n\n  Anatomy, data-attributes, floating-label behavior, start/end content\n  slots, and a11y wiring all mirror Input.vue. See the Input.vue docblock\n  for the canonical contract.\n-->\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\nimport { DateFieldRoot, DateFieldInput } from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\n\nimport { dateInputVariants, type DateInputVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n})\n\nconst modelValue = defineModel<DateValue | null | undefined>()\n\n// Reka treats `undefined` as \"uncontrolled mode\". Passing undefined back causes\n// DateFieldRoot to drop its controlled state mid-type, breaking updates from a\n// ref that starts with a value. Always pass null (= controlled + empty) instead.\nconst rekaValue = computed<DateValue | null>({\n  get: () => modelValue.value ?? null,\n  set: (val: DateValue | null) => { modelValue.value = val ?? null },\n})\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: DateInputVariants['variant']\n  /** Field height. @default 'md' */\n  size?: DateInputVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: DateInputVariants['color']\n  /** Label placement relative to the field. @default 'inside' */\n  labelPlacement?: DateInputVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadOnly?: boolean\n  /** Adds a required asterisk next to the label. @default false */\n  isRequired?: boolean\n  /** Field label. When omitted, floating-label behavior is skipped. */\n  label?: string\n  /** Helper text below the field. Suppressed when isInvalid && errorMessage is shown. */\n  description?: string\n  /** Error text below the field. Only rendered when isInvalid is true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper. */\n  class?: ClassValue\n  /** Per-slot class overrides. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    startContent: ClassValue\n    segmentList: ClassValue\n    segment: ClassValue\n    endContent: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n  }>\n\n  /* ─── DateInput-specific ──────────────────────────────────────── */\n  defaultValue?: DateValue\n  defaultPlaceholder?: DateValue\n  placeholderValue?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  locale?: string\n  name?: string\n  hideTimeZone?: boolean\n  isDateUnavailable?: (date: DateValue) => boolean\n  /** Marks the field as required for form submission. */\n  required?: boolean\n  /** Text direction for the field. */\n  dir?: 'ltr' | 'rtl'\n  /** Render as a different element or component. */\n  as?: string\n  /** Render child as root element. */\n  asChild?: boolean\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst fieldId = computed(() => (attrs.id as string | undefined) ?? `${generatedId}-field`)\nconst labelId = computed(() => `${generatedId}-label`)\nconst descriptionId = computed(() => `${generatedId}-description`)\nconst errorMessageId = computed(() => `${generatedId}-error`)\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null)\n\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n  if (showError.value) return errorMessageId.value\n  if (showDescription.value) return descriptionId.value\n  return undefined\n})\n\nconst fieldRef = ref<HTMLElement | null>(null)\n// Reka components expose their root DOM node via $el — unwrap before using DOM APIs.\nconst fieldEl = computed<HTMLElement | null>(() => {\n  const r = fieldRef.value as unknown as { $el?: HTMLElement } | HTMLElement | null\n  if (!r) return null\n  if (r instanceof HTMLElement) return r\n  return r.$el ?? null\n})\n\n// `isFocused` tracks focus on a DATE SEGMENT specifically — not any descendant.\n// This prevents nested interactive children (e.g. a DatePickerTrigger button in\n// endContent) from flipping the field into the focused visual state.\nconst isFocused = ref(false)\nfunction updateSegmentFocus() {\n  const root = fieldEl.value\n  if (!root) { isFocused.value = false; return }\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  isFocused.value = !!active\n    && root.contains(active)\n    && active.hasAttribute('data-reka-date-field-segment')\n}\nfunction onDocFocusIn() { updateSegmentFocus() }\nfunction onDocFocusOut() { queueMicrotask(updateSegmentFocus) }\n\n// Guard against a focus snap-back after an outside click. When the user\n// clicks outside the field, we mark a short-lived \"suppress segment focus\"\n// window. Any focusin landing on a segment inside that window gets blurred\n// immediately — kills the two-click-to-blur UX regardless of which internal\n// mechanism (Reka VisuallyHidden, label-for, contenteditable selection\n// restoration) tried to restore the focus.\nlet suppressSegmentFocusUntil = 0\nfunction onDocPointerDown(e: PointerEvent) {\n  const root = fieldEl.value\n  if (!root) return\n  const target = e.target as Node | null\n  if (!target || root.contains(target)) return\n  suppressSegmentFocusUntil = performance.now() + 250\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-date-field-segment')) {\n    active.blur()\n  }\n}\nfunction onDocFocusInGuard(e: FocusEvent) {\n  if (performance.now() >= suppressSegmentFocusUntil) return\n  const root = fieldEl.value\n  if (!root) return\n  const t = e.target as HTMLElement | null\n  if (t && root.contains(t) && t.hasAttribute?.('data-reka-date-field-segment')) {\n    t.blur()\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('focusin', onDocFocusIn)\n  document.addEventListener('focusout', onDocFocusOut)\n  document.addEventListener('pointerdown', onDocPointerDown, true)\n  document.addEventListener('focusin', onDocFocusInGuard, true)\n})\nonBeforeUnmount(() => {\n  document.removeEventListener('focusin', onDocFocusIn)\n  document.removeEventListener('focusout', onDocFocusOut)\n  document.removeEventListener('pointerdown', onDocPointerDown, true)\n  document.removeEventListener('focusin', onDocFocusInGuard, true)\n})\n\n// Track data-filled synchronously from the rendered segments — defaultValue +\n// isFilled from modelValue misses the uncontrolled case and the partially-typed\n// case. After each value/segment render, sniff any non-literal segment that\n// carries data-placeholder=\"false\".\nconst segmentsFilled = ref(false)\nfunction recomputeFilled() {\n  const root = fieldEl.value\n  if (!root || typeof root.querySelectorAll !== 'function') {\n    segmentsFilled.value = false\n    return\n  }\n  const segs = root.querySelectorAll('[data-reka-date-field-segment]:not([data-reka-date-field-segment=\"literal\"])')\n  let anyFilled = false\n  segs.forEach((el) => {\n    if ((el as HTMLElement).dataset.placeholder === 'false') anyFilled = true\n  })\n  segmentsFilled.value = anyFilled\n}\nwatch([modelValue, () => props.defaultValue, () => props.granularity], () => {\n  queueMicrotask(recomputeFilled)\n}, { immediate: true })\n\nconst effectiveFilled = computed(() => isFilled.value || segmentsFilled.value)\n\n// Only intervene on the INITIAL click that enters the field. Once a segment\n// already holds focus, leave subsequent mousedowns alone so the user can\n// blur naturally (clicking elsewhere) without focus snapping back to a\n// segment and requiring a second click.\nfunction handleFieldMousedown(e: MouseEvent) {\n  const target = e.target as HTMLElement | null\n  if (!target) return\n  if (target.closest('[data-reka-date-field-segment]')) return\n  if (target.closest('[data-slot=\"start-content\"]')) return\n  if (target.closest('[data-slot=\"end-content\"]')) return\n  if (target.closest('button, [role=\"button\"]')) return\n  const root = fieldEl.value\n  if (!root) return\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-date-field-segment')) {\n    return\n  }\n  const first = root.querySelector<HTMLElement>(\n    '[data-reka-date-field-segment]:not([data-reka-date-field-segment=\"literal\"])',\n  )\n  if (first) {\n    e.preventDefault()\n    first.focus()\n  }\n}\n\nconst slotFns = computed(() =>\n  dateInputVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadOnly,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\nconst showOutsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement !== 'inside',\n)\nconst showInsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement === 'inside',\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-invalid=\"isInvalid || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-readonly=\"isReadOnly || undefined\"\n    :data-required=\"isRequired || undefined\"\n    :data-has-label=\"hasLabel || undefined\"\n    :data-has-helper=\"hasHelper || undefined\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <DateFieldRoot\n        :id=\"fieldId\"\n        ref=\"fieldRef\"\n        v-model=\"rekaValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"defaultPlaceholder\"\n        :placeholder=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :granularity=\"granularity\"\n        :hour-cycle=\"hourCycle\"\n        :step=\"step\"\n        :locale=\"locale\"\n        :disabled=\"isDisabled\"\n        :readonly=\"isReadOnly\"\n        :name=\"name\"\n        :hide-time-zone=\"hideTimeZone\"\n        :is-date-unavailable=\"isDateUnavailable\"\n        :required=\"required\"\n        :dir=\"dir\"\n        :as=\"as\"\n        :as-child=\"asChild\"\n        :aria-labelledby=\"hasLabel ? labelId : undefined\"\n        :aria-describedby=\"ariaDescribedBy\"\n        :aria-required=\"isRequired || undefined\"\n        :aria-invalid=\"isInvalid || undefined\"\n        :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n        :data-filled=\"hasLabel ? (effectiveFilled || undefined) : undefined\"\n        :data-focused=\"isFocused || undefined\"\n        :data-invalid=\"isInvalid || undefined\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-readonly=\"isReadOnly || undefined\"\n        @mousedown=\"handleFieldMousedown\"\n      >\n        <template #default=\"{ segments }\">\n          <label\n            v-if=\"showInsideLabel\"\n            :id=\"labelId\"\n            :for=\"fieldId\"\n            :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n          >{{ label }}<span\n            v-if=\"isRequired\"\n            aria-hidden=\"true\"\n          > *</span></label>\n\n          <span\n            v-if=\"$slots.startContent\"\n            :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n            data-slot=\"start-content\"\n          >\n            <slot name=\"startContent\" />\n          </span>\n\n          <div\n            :class=\"composeClassName(slotFns.segmentList(), props.classNames?.segmentList)\"\n            data-slot=\"segment-list\"\n          >\n            <template\n              v-for=\"(segment, _i) in segments\"\n              :key=\"_i\"\n            >\n              <DateFieldInput\n                :part=\"segment.part\"\n                :class=\"composeClassName(slotFns.segment(), props.classNames?.segment)\"\n              >\n                {{ segment.value }}\n              </DateFieldInput>\n            </template>\n          </div>\n\n          <span\n            v-if=\"$slots.endContent\"\n            :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n            data-slot=\"end-content\"\n          >\n            <slot name=\"endContent\" />\n          </span>\n        </template>\n      </DateFieldRoot>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n          role=\"alert\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/date-input/DateInput.vue_vue_type_script_setup_true_lang.js

@@ -63,17 +63,24 @@ var DateInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		] },
 		classNames: {},
 		defaultValue: {},
+		defaultPlaceholder: {},
 		placeholderValue: {},
 		minValue: {},
 		maxValue: {},
 		granularity: {},
 		hourCycle: {},
+		step: {},
 		locale: {},
 		name: {},
 		hideTimeZone: {
 			type: Boolean,
 			default: false
-		}
+		},
+		isDateUnavailable: {},
+		required: { type: Boolean },
+		dir: {},
+		as: {},
+		asChild: { type: Boolean }
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -82,6 +89,12 @@ var DateInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 	setup(__props) {
 		const props = __props;
 		const modelValue = useModel(__props, "modelValue");
+		const rekaValue = computed({
+			get: () => modelValue.value ?? null,
+			set: (val) => {
+				modelValue.value = val ?? null;
+			}
+		});
 		const attrs = useAttrs();
 		const generatedId = useId();
 		const fieldId = computed(() => attrs.id ?? `${generatedId}-field`);
@@ -219,19 +232,26 @@ var DateInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
-				modelValue: modelValue.value,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				modelValue: rekaValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => rekaValue.value = $event),
 				"default-value": __props.defaultValue,
+				"default-placeholder": __props.defaultPlaceholder,
 				placeholder: __props.placeholderValue,
 				"min-value": __props.minValue,
 				"max-value": __props.maxValue,
 				granularity: __props.granularity,
 				"hour-cycle": __props.hourCycle,
+				step: __props.step,
 				locale: __props.locale,
 				disabled: __props.isDisabled,
 				readonly: __props.isReadOnly,
 				name: __props.name,
 				"hide-time-zone": __props.hideTimeZone,
+				"is-date-unavailable": __props.isDateUnavailable,
+				required: __props.required,
+				dir: __props.dir,
+				as: __props.as,
+				"as-child": __props.asChild,
 				"aria-labelledby": hasLabel.value ? labelId.value : void 0,
 				"aria-describedby": ariaDescribedBy.value,
 				"aria-required": __props.isRequired || void 0,
@@ -280,16 +300,23 @@ var DateInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				"id",
 				"modelValue",
 				"default-value",
+				"default-placeholder",
 				"placeholder",
 				"min-value",
 				"max-value",
 				"granularity",
 				"hour-cycle",
+				"step",
 				"locale",
 				"disabled",
 				"readonly",
 				"name",
 				"hide-time-zone",
+				"is-date-unavailable",
+				"required",
+				"dir",
+				"as",
+				"as-child",
 				"aria-labelledby",
 				"aria-describedby",
 				"aria-required",