@auronui/vue 1.0.21 → 1.0.22

package/dist/components/list-box/ListBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.js","names":[],"sources":["../../../src/components/list-box/ListBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, useAttrs } from 'vue'\nimport { ListboxRoot, ListboxContent } from 'reka-ui'\nimport { listboxVariants, type ListBoxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxProvide } from './ListBox.context'\nimport ListBoxItem from './ListBoxItem.vue'\n\ntype ListBoxShorthandItem = { value: string; label?: string; disabled?: boolean; textValue?: string }\n\n// Disable Vue attribute fallthrough — we manually forward ARIA attrs to ListboxContent\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | string[]\n  defaultValue?: string | string[]\n  selectionMode?: 'single' | 'multiple'\n  variant?: ListBoxVariants['variant']\n  isDisabled?: boolean\n  class?: ClassValue\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Shorthand API: render list items from an array instead of the compound slot API */\n  items?: ListBoxShorthandItem[]\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  selectionMode: 'single',\n  variant: 'default',\n  isDisabled: false,\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined]\n}>()\n\nconst attrs = useAttrs()\n\n// Provide context for ListBoxItem and ListBoxSection children\nuseListBoxProvide({\n  variant: toRef(props, 'variant'),\n  itemVariant: toRef(props, 'variant'),\n  isDisabled: toRef(props, 'isDisabled'),\n})\n\nconst slotFns = computed(() =>\n  listboxVariants({ variant: props.variant })\n)\n</script>\n\n<template>\n  <!-- ListboxRoot is an invisible wrapper that manages state; ListboxContent carries role=\"listbox\" -->\n  <!-- We forward attrs (aria-label, aria-labelledby, etc.) to ListboxContent, not the root -->\n  <ListboxRoot\n    :model-value=\"props.modelValue == null ? undefined : ([] as string[]).concat(props.modelValue)\"\n    :default-value=\"props.defaultValue == null ? undefined : ([] as string[]).concat(props.defaultValue)\"\n    :multiple=\"props.selectionMode === 'multiple'\"\n    :selection-behavior=\"props.selectionMode === 'multiple' ? 'toggle' : 'replace'\"\n    :disabled=\"props.isDisabled\"\n    @update:model-value=\"emit('update:modelValue', props.selectionMode === 'single' ? (Array.isArray($event) ? ($event as string[])[0] : $event as string) : $event as string[])\"\n  >\n    <ListboxContent\n      v-bind=\"attrs\"\n      :class=\"composeClassName(slotFns, props.class, props.classNames?.base)\"\n    >\n      <template v-if=\"props.items\">\n        <ListBoxItem\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n          :text-value=\"item.textValue\"\n        >{{ item.label ?? item.value }}</ListBoxItem>\n      </template>\n      <slot v-else />\n    </ListboxContent>\n  </ListboxRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ListBox.js","names":[],"sources":["../../../src/components/list-box/ListBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, useAttrs } from 'vue'\nimport { ListboxRoot, ListboxContent } from 'reka-ui'\nimport { listboxVariants, type ListBoxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxProvide } from './ListBox.context'\nimport ListBoxItem from './ListBoxItem.vue'\n\ntype ListBoxShorthandItem = { value: string; label?: string; disabled?: boolean; textValue?: string }\n\n// Disable Vue attribute fallthrough — we manually forward ARIA attrs to ListboxContent\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | string[]\n  defaultValue?: string | string[]\n  selectionMode?: 'single' | 'multiple'\n  variant?: ListBoxVariants['variant']\n  isDisabled?: boolean\n  class?: ClassValue\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Shorthand API: render list items from an array instead of the compound slot API */\n  items?: ListBoxShorthandItem[]\n  /** Allow selecting multiple values (alias for selectionMode=\"multiple\"). */\n  multiple?: boolean\n  /** Orientation of the listbox for keyboard navigation. */\n  orientation?: 'horizontal' | 'vertical'\n  /** Reading direction for the component. */\n  dir?: 'ltr' | 'rtl'\n  /** Selection behavior when multiple is true. */\n  selectionBehavior?: 'toggle' | 'replace'\n  /** Highlight item on hover. */\n  highlightOnHover?: boolean\n  /** Key used to compare items for equality. */\n  by?: string\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  /** Form field name for native form submission. */\n  name?: string\n  /** Mark the field as required. */\n  required?: boolean\n  /** Render the ListboxContent as a different element. */\n  contentAs?: string\n  /** Merge content props onto child element. */\n  contentAsChild?: boolean\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  selectionMode: 'single',\n  variant: 'default',\n  isDisabled: false,\n  class: undefined,\n  multiple: undefined,\n  orientation: undefined,\n  dir: undefined,\n  selectionBehavior: undefined,\n  highlightOnHover: undefined,\n  by: undefined,\n  as: undefined,\n  asChild: false,\n  name: undefined,\n  required: undefined,\n  contentAs: undefined,\n  contentAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined]\n  'highlight': [context: unknown]\n  'entry-focus': [event: Event]\n  'leave': [event: Event]\n}>()\n\nconst attrs = useAttrs()\n\n// Provide context for ListBoxItem and ListBoxSection children\nuseListBoxProvide({\n  variant: toRef(props, 'variant'),\n  itemVariant: toRef(props, 'variant'),\n  isDisabled: toRef(props, 'isDisabled'),\n})\n\nconst slotFns = computed(() =>\n  listboxVariants({ variant: props.variant })\n)\n</script>\n\n<template>\n  <!-- ListboxRoot is an invisible wrapper that manages state; ListboxContent carries role=\"listbox\" -->\n  <!-- We forward attrs (aria-label, aria-labelledby, etc.) to ListboxContent, not the root -->\n  <ListboxRoot\n    :model-value=\"props.modelValue == null ? undefined : ([] as string[]).concat(props.modelValue)\"\n    :default-value=\"props.defaultValue == null ? undefined : ([] as string[]).concat(props.defaultValue)\"\n    :multiple=\"props.multiple ?? props.selectionMode === 'multiple'\"\n    :selection-behavior=\"props.selectionBehavior ?? (props.selectionMode === 'multiple' ? 'toggle' : 'replace')\"\n    :disabled=\"props.isDisabled\"\n    :orientation=\"props.orientation\"\n    :dir=\"props.dir\"\n    :highlight-on-hover=\"props.highlightOnHover\"\n    :by=\"props.by\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    @update:model-value=\"emit('update:modelValue', props.selectionMode === 'single' ? (Array.isArray($event) ? ($event as string[])[0] : $event as string) : $event as string[])\"\n    @highlight=\"emit('highlight', $event)\"\n    @entry-focus=\"emit('entry-focus', $event)\"\n    @leave=\"emit('leave', $event)\"\n  >\n    <ListboxContent\n      v-bind=\"attrs\"\n      :as=\"props.contentAs\"\n      :as-child=\"props.contentAsChild\"\n      :class=\"composeClassName(slotFns, props.class, props.classNames?.base)\"\n    >\n      <template v-if=\"props.items\">\n        <ListBoxItem\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n          :text-value=\"item.textValue\"\n        >{{ item.label ?? item.value }}</ListBoxItem>\n      </template>\n      <slot v-else />\n    </ListboxContent>\n  </ListboxRoot>\n</template>\n"],"mappings":""}

package/dist/components/list-box/ListBox.vue_vue_type_script_setup_true_lang.js

@@ -28,9 +28,41 @@ var ListBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			default: void 0
 		},
 		classNames: {},
-		items: {}
+		items: {},
+		multiple: {
+			type: Boolean,
+			default: void 0
+		},
+		orientation: { default: void 0 },
+		dir: { default: void 0 },
+		selectionBehavior: { default: void 0 },
+		highlightOnHover: {
+			type: Boolean,
+			default: void 0
+		},
+		by: { default: void 0 },
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		name: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		contentAs: { default: void 0 },
+		contentAsChild: {
+			type: Boolean,
+			default: false
+		}
 	},
-	emits: ["update:modelValue"],
+	emits: [
+		"update:modelValue",
+		"highlight",
+		"entry-focus",
+		"leave"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -45,12 +77,27 @@ var ListBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			return openBlock(), createBlock(unref(ListboxRoot), {
 				"model-value": props.modelValue == null ? void 0 : [].concat(props.modelValue),
 				"default-value": props.defaultValue == null ? void 0 : [].concat(props.defaultValue),
-				multiple: props.selectionMode === "multiple",
-				"selection-behavior": props.selectionMode === "multiple" ? "toggle" : "replace",
+				multiple: props.multiple ?? props.selectionMode === "multiple",
+				"selection-behavior": props.selectionBehavior ?? (props.selectionMode === "multiple" ? "toggle" : "replace"),
 				disabled: props.isDisabled,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", props.selectionMode === "single" ? Array.isArray($event) ? $event[0] : $event : $event))
+				orientation: props.orientation,
+				dir: props.dir,
+				"highlight-on-hover": props.highlightOnHover,
+				by: props.by,
+				as: props.as,
+				"as-child": props.asChild,
+				name: props.name,
+				required: props.required,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", props.selectionMode === "single" ? Array.isArray($event) ? $event[0] : $event : $event)),
+				onHighlight: _cache[1] || (_cache[1] = ($event) => emit("highlight", $event)),
+				onEntryFocus: _cache[2] || (_cache[2] = ($event) => emit("entry-focus", $event)),
+				onLeave: _cache[3] || (_cache[3] = ($event) => emit("leave", $event))
 			}, {
-				default: withCtx(() => [createVNode(unref(ListboxContent), mergeProps(unref(attrs), { class: unref(composeClassName)(slotFns.value, props.class, props.classNames?.base) }), {
+				default: withCtx(() => [createVNode(unref(ListboxContent), mergeProps(unref(attrs), {
+					as: props.contentAs,
+					"as-child": props.contentAsChild,
+					class: unref(composeClassName)(slotFns.value, props.class, props.classNames?.base)
+				}), {
 					default: withCtx(() => [props.items ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.items, (item) => {
 						return openBlock(), createBlock(ListBoxItem_default, {
 							key: item.value,
@@ -67,14 +114,26 @@ var ListBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 						]);
 					}), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })]),
 					_: 3
-				}, 16, ["class"])]),
+				}, 16, [
+					"as",
+					"as-child",
+					"class"
+				])]),
 				_: 3
 			}, 8, [
 				"model-value",
 				"default-value",
 				"multiple",
 				"selection-behavior",
-				"disabled"
+				"disabled",
+				"orientation",
+				"dir",
+				"highlight-on-hover",
+				"by",
+				"as",
+				"as-child",
+				"name",
+				"required"
 			]);
 		};
 	}

package/dist/components/list-box/ListBox.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/list-box/ListBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, useAttrs } from 'vue'\nimport { ListboxRoot, ListboxContent } from 'reka-ui'\nimport { listboxVariants, type ListBoxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxProvide } from './ListBox.context'\nimport ListBoxItem from './ListBoxItem.vue'\n\ntype ListBoxShorthandItem = { value: string; label?: string; disabled?: boolean; textValue?: string }\n\n// Disable Vue attribute fallthrough — we manually forward ARIA attrs to ListboxContent\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | string[]\n  defaultValue?: string | string[]\n  selectionMode?: 'single' | 'multiple'\n  variant?: ListBoxVariants['variant']\n  isDisabled?: boolean\n  class?: ClassValue\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Shorthand API: render list items from an array instead of the compound slot API */\n  items?: ListBoxShorthandItem[]\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  selectionMode: 'single',\n  variant: 'default',\n  isDisabled: false,\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined]\n}>()\n\nconst attrs = useAttrs()\n\n// Provide context for ListBoxItem and ListBoxSection children\nuseListBoxProvide({\n  variant: toRef(props, 'variant'),\n  itemVariant: toRef(props, 'variant'),\n  isDisabled: toRef(props, 'isDisabled'),\n})\n\nconst slotFns = computed(() =>\n  listboxVariants({ variant: props.variant })\n)\n</script>\n\n<template>\n  <!-- ListboxRoot is an invisible wrapper that manages state; ListboxContent carries role=\"listbox\" -->\n  <!-- We forward attrs (aria-label, aria-labelledby, etc.) to ListboxContent, not the root -->\n  <ListboxRoot\n    :model-value=\"props.modelValue == null ? undefined : ([] as string[]).concat(props.modelValue)\"\n    :default-value=\"props.defaultValue == null ? undefined : ([] as string[]).concat(props.defaultValue)\"\n    :multiple=\"props.selectionMode === 'multiple'\"\n    :selection-behavior=\"props.selectionMode === 'multiple' ? 'toggle' : 'replace'\"\n    :disabled=\"props.isDisabled\"\n    @update:model-value=\"emit('update:modelValue', props.selectionMode === 'single' ? (Array.isArray($event) ? ($event as string[])[0] : $event as string) : $event as string[])\"\n  >\n    <ListboxContent\n      v-bind=\"attrs\"\n      :class=\"composeClassName(slotFns, props.class, props.classNames?.base)\"\n    >\n      <template v-if=\"props.items\">\n        <ListBoxItem\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n          :text-value=\"item.textValue\"\n        >{{ item.label ?? item.value }}</ListBoxItem>\n      </template>\n      <slot v-else />\n    </ListboxContent>\n  </ListboxRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQ;EAyBd,MAAM,OAAO;EAIb,MAAM,QAAQ,UAAS;AAGvB,oBAAkB;GAChB,SAAS,MAAM,OAAO,UAAU;GAChC,aAAa,MAAM,OAAO,UAAU;GACpC,YAAY,MAAM,OAAO,aAAa;GACvC,CAAA;EAED,MAAM,UAAU,eACd,gBAAgB,EAAE,SAAS,MAAM,SAAS,CAAA,CAC5C;;uBAME,YAuBc,MAAA,YAAA,EAAA;IAtBX,eAAa,MAAM,cAAU,OAAW,KAAA,IAAS,EAAA,CAAoB,OAAO,MAAM,WAAU;IAC5F,iBAAe,MAAM,gBAAY,OAAW,KAAA,IAAS,EAAA,CAAoB,OAAO,MAAM,aAAY;IAClG,UAAU,MAAM,kBAAa;IAC7B,sBAAoB,MAAM,kBAAa,aAAA,WAAA;IACvC,UAAU,MAAM;IAChB,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,qBAAsB,MAAM,kBAAa,WAAiB,MAAM,QAAQ,OAAM,GAAK,OAAM,KAAmB,SAAoB,OAAM;;2BAgB9I,CAdjB,YAciB,MAAA,eAAA,EAdjB,WACU,MAaO,MAbF,EAAA,EACZ,OAAO,MAAA,iBAAgB,CAAC,QAAA,OAAS,MAAM,OAAO,MAAM,YAAY,KAAI,EAAA,CAAA,EAAA;4BAU1D,CARK,MAAM,SAAA,UAAA,KAAA,EACpB,mBAM6C,UAAA,EAAA,KAAA,GAAA,EAAA,WAL5B,MAAM,QAAd,SAAI;0BADb,YAM6C,qBAAA;OAJ1C,KAAK,KAAK;OACV,OAAO,KAAK;OACZ,eAAa,KAAK;OAClB,cAAY,KAAK;;8BACW,CAAA,gBAAA,gBAA3B,KAAK,SAAS,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;iBAE9B,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ListBox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/list-box/ListBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, useAttrs } from 'vue'\nimport { ListboxRoot, ListboxContent } from 'reka-ui'\nimport { listboxVariants, type ListBoxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxProvide } from './ListBox.context'\nimport ListBoxItem from './ListBoxItem.vue'\n\ntype ListBoxShorthandItem = { value: string; label?: string; disabled?: boolean; textValue?: string }\n\n// Disable Vue attribute fallthrough — we manually forward ARIA attrs to ListboxContent\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | string[]\n  defaultValue?: string | string[]\n  selectionMode?: 'single' | 'multiple'\n  variant?: ListBoxVariants['variant']\n  isDisabled?: boolean\n  class?: ClassValue\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Shorthand API: render list items from an array instead of the compound slot API */\n  items?: ListBoxShorthandItem[]\n  /** Allow selecting multiple values (alias for selectionMode=\"multiple\"). */\n  multiple?: boolean\n  /** Orientation of the listbox for keyboard navigation. */\n  orientation?: 'horizontal' | 'vertical'\n  /** Reading direction for the component. */\n  dir?: 'ltr' | 'rtl'\n  /** Selection behavior when multiple is true. */\n  selectionBehavior?: 'toggle' | 'replace'\n  /** Highlight item on hover. */\n  highlightOnHover?: boolean\n  /** Key used to compare items for equality. */\n  by?: string\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  /** Form field name for native form submission. */\n  name?: string\n  /** Mark the field as required. */\n  required?: boolean\n  /** Render the ListboxContent as a different element. */\n  contentAs?: string\n  /** Merge content props onto child element. */\n  contentAsChild?: boolean\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  selectionMode: 'single',\n  variant: 'default',\n  isDisabled: false,\n  class: undefined,\n  multiple: undefined,\n  orientation: undefined,\n  dir: undefined,\n  selectionBehavior: undefined,\n  highlightOnHover: undefined,\n  by: undefined,\n  as: undefined,\n  asChild: false,\n  name: undefined,\n  required: undefined,\n  contentAs: undefined,\n  contentAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined]\n  'highlight': [context: unknown]\n  'entry-focus': [event: Event]\n  'leave': [event: Event]\n}>()\n\nconst attrs = useAttrs()\n\n// Provide context for ListBoxItem and ListBoxSection children\nuseListBoxProvide({\n  variant: toRef(props, 'variant'),\n  itemVariant: toRef(props, 'variant'),\n  isDisabled: toRef(props, 'isDisabled'),\n})\n\nconst slotFns = computed(() =>\n  listboxVariants({ variant: props.variant })\n)\n</script>\n\n<template>\n  <!-- ListboxRoot is an invisible wrapper that manages state; ListboxContent carries role=\"listbox\" -->\n  <!-- We forward attrs (aria-label, aria-labelledby, etc.) to ListboxContent, not the root -->\n  <ListboxRoot\n    :model-value=\"props.modelValue == null ? undefined : ([] as string[]).concat(props.modelValue)\"\n    :default-value=\"props.defaultValue == null ? undefined : ([] as string[]).concat(props.defaultValue)\"\n    :multiple=\"props.multiple ?? props.selectionMode === 'multiple'\"\n    :selection-behavior=\"props.selectionBehavior ?? (props.selectionMode === 'multiple' ? 'toggle' : 'replace')\"\n    :disabled=\"props.isDisabled\"\n    :orientation=\"props.orientation\"\n    :dir=\"props.dir\"\n    :highlight-on-hover=\"props.highlightOnHover\"\n    :by=\"props.by\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    @update:model-value=\"emit('update:modelValue', props.selectionMode === 'single' ? (Array.isArray($event) ? ($event as string[])[0] : $event as string) : $event as string[])\"\n    @highlight=\"emit('highlight', $event)\"\n    @entry-focus=\"emit('entry-focus', $event)\"\n    @leave=\"emit('leave', $event)\"\n  >\n    <ListboxContent\n      v-bind=\"attrs\"\n      :as=\"props.contentAs\"\n      :as-child=\"props.contentAsChild\"\n      :class=\"composeClassName(slotFns, props.class, props.classNames?.base)\"\n    >\n      <template v-if=\"props.items\">\n        <ListBoxItem\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n          :text-value=\"item.textValue\"\n        >{{ item.label ?? item.value }}</ListBoxItem>\n      </template>\n      <slot v-else />\n    </ListboxContent>\n  </ListboxRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQ;EA6Dd,MAAM,OAAO;EAOb,MAAM,QAAQ,UAAS;AAGvB,oBAAkB;GAChB,SAAS,MAAM,OAAO,UAAU;GAChC,aAAa,MAAM,OAAO,UAAU;GACpC,YAAY,MAAM,OAAO,aAAa;GACvC,CAAA;EAED,MAAM,UAAU,eACd,gBAAgB,EAAE,SAAS,MAAM,SAAS,CAAA,CAC5C;;uBAME,YAoCc,MAAA,YAAA,EAAA;IAnCX,eAAa,MAAM,cAAU,OAAW,KAAA,IAAS,EAAA,CAAoB,OAAO,MAAM,WAAU;IAC5F,iBAAe,MAAM,gBAAY,OAAW,KAAA,IAAS,EAAA,CAAoB,OAAO,MAAM,aAAY;IAClG,UAAU,MAAM,YAAY,MAAM,kBAAa;IAC/C,sBAAoB,MAAM,sBAAsB,MAAM,kBAAa,aAAA,WAAA;IACnE,UAAU,MAAM;IAChB,aAAa,MAAM;IACnB,KAAK,MAAM;IACX,sBAAoB,MAAM;IAC1B,IAAI,MAAM;IACV,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,MAAM,MAAM;IACZ,UAAU,MAAM;IAChB,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,qBAAsB,MAAM,kBAAa,WAAiB,MAAM,QAAQ,OAAM,GAAK,OAAM,KAAmB,SAAoB,OAAM;IAC9J,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,aAAc,OAAM;IACnC,cAAW,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,eAAgB,OAAM;IACvC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAU,OAAM;;2BAkBX,CAhBjB,YAgBiB,MAAA,eAAA,EAhBjB,WACU,MAeO,MAfF,EAAA;KACZ,IAAI,MAAM;KACV,YAAU,MAAM;KAChB,OAAO,MAAA,iBAAgB,CAAC,QAAA,OAAS,MAAM,OAAO,MAAM,YAAY,KAAI;;4BAU1D,CARK,MAAM,SAAA,UAAA,KAAA,EACpB,mBAM6C,UAAA,EAAA,KAAA,GAAA,EAAA,WAL5B,MAAM,QAAd,SAAI;0BADb,YAM6C,qBAAA;OAJ1C,KAAK,KAAK;OACV,OAAO,KAAK;OACZ,eAAa,KAAK;OAClB,cAAY,KAAK;;8BACW,CAAA,gBAAA,gBAA3B,KAAK,SAAS,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;iBAE9B,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/list-box/ListBoxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBoxItem.js","names":[],"sources":["../../../src/components/list-box/ListBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ListboxItem, ListboxItemIndicator } from 'reka-ui'\nimport { listboxItemVariants, type ListBoxItemVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxInject } from './ListBox.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  textValue?: string\n  isDisabled?: boolean\n  variant?: ListBoxItemVariants['variant']\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    item: ClassValue\n    indicator: ClassValue\n  }>\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  variant: undefined,\n  class: undefined,\n  classNames: undefined,\n})\n\n// Inject context with fallback (standalone usage)\nconst ctx = useListBoxInject({\n  variant: ref('default'),\n  itemVariant: ref('default'),\n  isDisabled: ref(false),\n})\n\nconst finalVariant = computed(() => props.variant ?? ctx.itemVariant.value)\nconst finalDisabled = computed(() => ctx.isDisabled.value || props.isDisabled)\n\nconst slotFns = computed(() =>\n  listboxItemVariants({ variant: finalVariant.value as ListBoxItemVariants['variant'] })\n)\n</script>\n\n<template>\n  <ListboxItem\n    :value=\"props.value\"\n    :disabled=\"finalDisabled\"\n    :text-value=\"props.textValue ?? props.value\"\n    :class=\"composeClassName(slotFns.item(), props.class, props.classNames?.item)\"\n  >\n    <slot name=\"startContent\" />\n    <slot />\n    <slot name=\"endContent\" />\n    <ListboxItemIndicator :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\">\n      <slot name=\"selectedIcon\">\n        <!-- Default check icon -->\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    </ListboxItemIndicator>\n  </ListboxItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ListBoxItem.js","names":[],"sources":["../../../src/components/list-box/ListBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ListboxItem, ListboxItemIndicator } from 'reka-ui'\nimport { listboxItemVariants, type ListBoxItemVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxInject } from './ListBox.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  textValue?: string\n  isDisabled?: boolean\n  variant?: ListBoxItemVariants['variant']\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    item: ClassValue\n    indicator: ClassValue\n  }>\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 ListboxItemIndicator as a different element. */\n  indicatorAs?: string\n  /** Merge indicator props onto child element. */\n  indicatorAsChild?: boolean\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  variant: undefined,\n  class: undefined,\n  classNames: 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\n// Inject context with fallback (standalone usage)\nconst ctx = useListBoxInject({\n  variant: ref('default'),\n  itemVariant: ref('default'),\n  isDisabled: ref(false),\n})\n\nconst finalVariant = computed(() => props.variant ?? ctx.itemVariant.value)\nconst finalDisabled = computed(() => ctx.isDisabled.value || props.isDisabled)\n\nconst slotFns = computed(() =>\n  listboxItemVariants({ variant: finalVariant.value as ListBoxItemVariants['variant'] })\n)\n</script>\n\n<template>\n  <ListboxItem\n    :value=\"props.value\"\n    :disabled=\"props.disabled ?? finalDisabled\"\n    :text-value=\"props.textValue ?? props.value\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(slotFns.item(), props.class, props.classNames?.item)\"\n    @select=\"emit('select', $event)\"\n  >\n    <slot name=\"startContent\" />\n    <slot />\n    <slot name=\"endContent\" />\n    <ListboxItemIndicator\n      :as=\"props.indicatorAs\"\n      :as-child=\"props.indicatorAsChild\"\n      :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\"\n    >\n      <slot name=\"selectedIcon\">\n        <!-- Default check icon -->\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    </ListboxItemIndicator>\n  </ListboxItem>\n</template>\n"],"mappings":""}

package/dist/components/list-box/ListBoxItem.vue_vue_type_script_setup_true_lang.js

@@ -24,10 +24,26 @@ var ListBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			],
 			default: void 0
 		},
-		classNames: { default: void 0 }
+		classNames: { 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 ctx = useListBoxInject({
 			variant: ref("default"),
 			itemVariant: ref("default"),
@@ -39,16 +55,23 @@ var ListBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ListboxItem), {
 				value: props.value,
-				disabled: finalDisabled.value,
+				disabled: props.disabled ?? finalDisabled.value,
 				"text-value": props.textValue ?? props.value,
-				class: normalizeClass(unref(composeClassName)(slotFns.value.item(), props.class, props.classNames?.item))
+				as: props.as,
+				"as-child": props.asChild,
+				class: normalizeClass(unref(composeClassName)(slotFns.value.item(), props.class, props.classNames?.item)),
+				onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event))
 			}, {
 				default: withCtx(() => [
 					renderSlot(_ctx.$slots, "startContent"),
 					renderSlot(_ctx.$slots, "default"),
 					renderSlot(_ctx.$slots, "endContent"),
-					createVNode(unref(ListboxItemIndicator), { class: normalizeClass(unref(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)) }, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
+					createVNode(unref(ListboxItemIndicator), {
+						as: props.indicatorAs,
+						"as-child": props.indicatorAsChild,
+						class: normalizeClass(unref(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator))
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "12",
 							height: "12",
@@ -62,13 +85,19 @@ var ListBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 							"aria-hidden": "true"
 						}, [createElementVNode("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					}, 8, ["class"])
+					}, 8, [
+						"as",
+						"as-child",
+						"class"
+					])
 				]),
 				_: 3
 			}, 8, [
 				"value",
 				"disabled",
 				"text-value",
+				"as",
+				"as-child",
 				"class"
 			]);
 		};

package/dist/components/list-box/ListBoxItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBoxItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/list-box/ListBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ListboxItem, ListboxItemIndicator } from 'reka-ui'\nimport { listboxItemVariants, type ListBoxItemVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxInject } from './ListBox.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  textValue?: string\n  isDisabled?: boolean\n  variant?: ListBoxItemVariants['variant']\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    item: ClassValue\n    indicator: ClassValue\n  }>\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  variant: undefined,\n  class: undefined,\n  classNames: undefined,\n})\n\n// Inject context with fallback (standalone usage)\nconst ctx = useListBoxInject({\n  variant: ref('default'),\n  itemVariant: ref('default'),\n  isDisabled: ref(false),\n})\n\nconst finalVariant = computed(() => props.variant ?? ctx.itemVariant.value)\nconst finalDisabled = computed(() => ctx.isDisabled.value || props.isDisabled)\n\nconst slotFns = computed(() =>\n  listboxItemVariants({ variant: finalVariant.value as ListBoxItemVariants['variant'] })\n)\n</script>\n\n<template>\n  <ListboxItem\n    :value=\"props.value\"\n    :disabled=\"finalDisabled\"\n    :text-value=\"props.textValue ?? props.value\"\n    :class=\"composeClassName(slotFns.item(), props.class, props.classNames?.item)\"\n  >\n    <slot name=\"startContent\" />\n    <slot />\n    <slot name=\"endContent\" />\n    <ListboxItemIndicator :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\">\n      <slot name=\"selectedIcon\">\n        <!-- Default check icon -->\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    </ListboxItemIndicator>\n  </ListboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAoBd,MAAM,MAAM,iBAAiB;GAC3B,SAAS,IAAI,UAAU;GACvB,aAAa,IAAI,UAAU;GAC3B,YAAY,IAAI,MAAM;GACvB,CAAA;EAED,MAAM,eAAe,eAAe,MAAM,WAAW,IAAI,YAAY,MAAK;EAC1E,MAAM,gBAAgB,eAAe,IAAI,WAAW,SAAS,MAAM,WAAU;EAE7E,MAAM,UAAU,eACd,oBAAoB,EAAE,SAAS,aAAa,OAAyC,CAAA,CACvF;;uBAIE,YA6Bc,MAAA,YAAA,EAAA;IA5BX,OAAO,MAAM;IACb,UAAU,cAAA;IACV,cAAY,MAAM,aAAa,MAAM;IACrC,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;;2BAEhD;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,WAAQ,KAAA,QAAA,UAAA;KACR,WAA0B,KAAA,QAAA,aAAA;KAC1B,YAmBuB,MAAA,qBAAA,EAAA,EAnBA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA,EAAA,EAAA;6BAkBtF,CAjBP,WAiBO,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"}
+{"version":3,"file":"ListBoxItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/list-box/ListBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ListboxItem, ListboxItemIndicator } from 'reka-ui'\nimport { listboxItemVariants, type ListBoxItemVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxInject } from './ListBox.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  textValue?: string\n  isDisabled?: boolean\n  variant?: ListBoxItemVariants['variant']\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    item: ClassValue\n    indicator: ClassValue\n  }>\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 ListboxItemIndicator as a different element. */\n  indicatorAs?: string\n  /** Merge indicator props onto child element. */\n  indicatorAsChild?: boolean\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  variant: undefined,\n  class: undefined,\n  classNames: 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\n// Inject context with fallback (standalone usage)\nconst ctx = useListBoxInject({\n  variant: ref('default'),\n  itemVariant: ref('default'),\n  isDisabled: ref(false),\n})\n\nconst finalVariant = computed(() => props.variant ?? ctx.itemVariant.value)\nconst finalDisabled = computed(() => ctx.isDisabled.value || props.isDisabled)\n\nconst slotFns = computed(() =>\n  listboxItemVariants({ variant: finalVariant.value as ListBoxItemVariants['variant'] })\n)\n</script>\n\n<template>\n  <ListboxItem\n    :value=\"props.value\"\n    :disabled=\"props.disabled ?? finalDisabled\"\n    :text-value=\"props.textValue ?? props.value\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(slotFns.item(), props.class, props.classNames?.item)\"\n    @select=\"emit('select', $event)\"\n  >\n    <slot name=\"startContent\" />\n    <slot />\n    <slot name=\"endContent\" />\n    <ListboxItemIndicator\n      :as=\"props.indicatorAs\"\n      :as-child=\"props.indicatorAsChild\"\n      :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\"\n    >\n      <slot name=\"selectedIcon\">\n        <!-- Default check icon -->\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    </ListboxItemIndicator>\n  </ListboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAkCd,MAAM,OAAO;EAKb,MAAM,MAAM,iBAAiB;GAC3B,SAAS,IAAI,UAAU;GACvB,aAAa,IAAI,UAAU;GAC3B,YAAY,IAAI,MAAM;GACvB,CAAA;EAED,MAAM,eAAe,eAAe,MAAM,WAAW,IAAI,YAAY,MAAK;EAC1E,MAAM,gBAAgB,eAAe,IAAI,WAAW,SAAS,MAAM,WAAU;EAE7E,MAAM,UAAU,eACd,oBAAoB,EAAE,SAAS,aAAa,OAAyC,CAAA,CACvF;;uBAIE,YAoCc,MAAA,YAAA,EAAA;IAnCX,OAAO,MAAM;IACb,UAAU,MAAM,YAAY,cAAA;IAC5B,cAAY,MAAM,aAAa,MAAM;IACrC,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,OAAM;;2BAEF;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,WAAQ,KAAA,QAAA,UAAA;KACR,WAA0B,KAAA,QAAA,aAAA;KAC1B,YAuBuB,MAAA,qBAAA,EAAA;MAtBpB,IAAI,MAAM;MACV,YAAU,MAAM;MAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA;;6BAmBlE,CAjBP,WAiBO,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"}

package/dist/components/list-box/ListBoxSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBoxSection.js","names":[],"sources":["../../../src/components/list-box/ListBoxSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ListboxGroup, ListboxGroupLabel } from 'reka-ui'\nimport { listboxSectionVariants } from '@auronui/styles'\n\nconst props = withDefaults(defineProps<{\n  title?: string\n  showDivider?: boolean\n  class?: string\n}>(), {\n  title: undefined,\n  showDivider: false,\n  class: undefined,\n})\n\nconst sectionClass = computed(() =>\n  listboxSectionVariants()\n)\n</script>\n\n<template>\n  <ListboxGroup :class=\"sectionClass.base()\">\n    <ListboxGroupLabel\n      v-if=\"props.title\"\n      :class=\"sectionClass.label()\"\n    >\n      {{ props.title }}\n    </ListboxGroupLabel>\n    <slot />\n    <div\n      v-if=\"props.showDivider\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"separator\"\n      data-orientation=\"horizontal\"\n      :class=\"sectionClass.separator()\"\n    />\n  </ListboxGroup>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ListBoxSection.js","names":[],"sources":["../../../src/components/list-box/ListBoxSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ListboxGroup, ListboxGroupLabel } from 'reka-ui'\nimport { listboxSectionVariants } from '@auronui/styles'\n\nconst props = withDefaults(defineProps<{\n  title?: string\n  showDivider?: boolean\n  class?: string\n  /** Render the ListboxGroup as a different element. */\n  as?: string\n  /** Merge group props onto child element. */\n  asChild?: boolean\n  /** The id of the element the label describes (for ListboxGroupLabel). */\n  for?: string\n  /** Render the ListboxGroupLabel as a different element. */\n  labelAs?: string\n  /** Merge label props onto child element. */\n  labelAsChild?: boolean\n}>(), {\n  title: undefined,\n  showDivider: false,\n  class: undefined,\n  as: undefined,\n  asChild: false,\n  for: undefined,\n  labelAs: undefined,\n  labelAsChild: false,\n})\n\nconst sectionClass = computed(() =>\n  listboxSectionVariants()\n)\n</script>\n\n<template>\n  <ListboxGroup\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"sectionClass.base()\"\n  >\n    <ListboxGroupLabel\n      v-if=\"props.title\"\n      :for=\"props.for\"\n      :as=\"props.labelAs\"\n      :as-child=\"props.labelAsChild\"\n      :class=\"sectionClass.label()\"\n    >\n      {{ props.title }}\n    </ListboxGroupLabel>\n    <slot />\n    <div\n      v-if=\"props.showDivider\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"separator\"\n      data-orientation=\"horizontal\"\n      :class=\"sectionClass.separator()\"\n    />\n  </ListboxGroup>\n</template>\n"],"mappings":""}

package/dist/components/list-box/ListBoxSection.vue_vue_type_script_setup_true_lang.js

@@ -10,21 +10,44 @@ var ListBoxSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		for: { default: void 0 },
+		labelAs: { default: void 0 },
+		labelAsChild: {
+			type: Boolean,
+			default: false
+		}
 	},
 	setup(__props) {
 		const props = __props;
 		const sectionClass = computed(() => listboxSectionVariants());
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ListboxGroup), { class: normalizeClass(sectionClass.value.base()) }, {
+			return openBlock(), createBlock(unref(ListboxGroup), {
+				as: props.as,
+				"as-child": props.asChild,
+				class: normalizeClass(sectionClass.value.base())
+			}, {
 				default: withCtx(() => [
 					props.title ? (openBlock(), createBlock(unref(ListboxGroupLabel), {
 						key: 0,
+						for: props.for,
+						as: props.labelAs,
+						"as-child": props.labelAsChild,
 						class: normalizeClass(sectionClass.value.label())
 					}, {
 						default: withCtx(() => [createTextVNode(toDisplayString(props.title), 1)]),
 						_: 1
-					}, 8, ["class"])) : createCommentVNode("", true),
+					}, 8, [
+						"for",
+						"as",
+						"as-child",
+						"class"
+					])) : createCommentVNode("", true),
 					renderSlot(_ctx.$slots, "default"),
 					props.showDivider ? (openBlock(), createElementBlock("div", {
 						key: 1,
@@ -36,7 +59,11 @@ var ListBoxSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					}, null, 2)) : createCommentVNode("", true)
 				]),
 				_: 3
-			}, 8, ["class"]);
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/list-box/ListBoxSection.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBoxSection.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/list-box/ListBoxSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ListboxGroup, ListboxGroupLabel } from 'reka-ui'\nimport { listboxSectionVariants } from '@auronui/styles'\n\nconst props = withDefaults(defineProps<{\n  title?: string\n  showDivider?: boolean\n  class?: string\n}>(), {\n  title: undefined,\n  showDivider: false,\n  class: undefined,\n})\n\nconst sectionClass = computed(() =>\n  listboxSectionVariants()\n)\n</script>\n\n<template>\n  <ListboxGroup :class=\"sectionClass.base()\">\n    <ListboxGroupLabel\n      v-if=\"props.title\"\n      :class=\"sectionClass.label()\"\n    >\n      {{ props.title }}\n    </ListboxGroupLabel>\n    <slot />\n    <div\n      v-if=\"props.showDivider\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"separator\"\n      data-orientation=\"horizontal\"\n      :class=\"sectionClass.separator()\"\n    />\n  </ListboxGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAUd,MAAM,eAAe,eACnB,wBAAuB,CACzB;;uBAIE,YAgBe,MAAA,aAAA,EAAA,EAhBA,OAAK,eAAE,aAAA,MAAa,MAAI,CAAA,EAAA,EAAA;2BAMjB;KAJZ,MAAM,SAAA,WAAA,EADd,YAKoB,MAAA,kBAAA,EAAA;;MAHjB,OAAK,eAAE,aAAA,MAAa,OAAK,CAAA;;6BAET,CAAA,gBAAA,gBAAd,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;;KAEhB,WAAQ,KAAA,QAAA,UAAA;KAEA,MAAM,eAAA,WAAA,EADd,mBAOE,OAAA;;MALA,MAAK;MACL,oBAAiB;MACjB,aAAU;MACV,oBAAiB;MAChB,OAAK,eAAE,aAAA,MAAa,WAAS,CAAA"}
+{"version":3,"file":"ListBoxSection.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/list-box/ListBoxSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ListboxGroup, ListboxGroupLabel } from 'reka-ui'\nimport { listboxSectionVariants } from '@auronui/styles'\n\nconst props = withDefaults(defineProps<{\n  title?: string\n  showDivider?: boolean\n  class?: string\n  /** Render the ListboxGroup as a different element. */\n  as?: string\n  /** Merge group props onto child element. */\n  asChild?: boolean\n  /** The id of the element the label describes (for ListboxGroupLabel). */\n  for?: string\n  /** Render the ListboxGroupLabel as a different element. */\n  labelAs?: string\n  /** Merge label props onto child element. */\n  labelAsChild?: boolean\n}>(), {\n  title: undefined,\n  showDivider: false,\n  class: undefined,\n  as: undefined,\n  asChild: false,\n  for: undefined,\n  labelAs: undefined,\n  labelAsChild: false,\n})\n\nconst sectionClass = computed(() =>\n  listboxSectionVariants()\n)\n</script>\n\n<template>\n  <ListboxGroup\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"sectionClass.base()\"\n  >\n    <ListboxGroupLabel\n      v-if=\"props.title\"\n      :for=\"props.for\"\n      :as=\"props.labelAs\"\n      :as-child=\"props.labelAsChild\"\n      :class=\"sectionClass.label()\"\n    >\n      {{ props.title }}\n    </ListboxGroupLabel>\n    <slot />\n    <div\n      v-if=\"props.showDivider\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"separator\"\n      data-orientation=\"horizontal\"\n      :class=\"sectionClass.separator()\"\n    />\n  </ListboxGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAyBd,MAAM,eAAe,eACnB,wBAAuB,CACzB;;uBAIE,YAuBe,MAAA,aAAA,EAAA;IAtBZ,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,aAAA,MAAa,MAAI,CAAA;;2BAUL;KAPZ,MAAM,SAAA,WAAA,EADd,YAQoB,MAAA,kBAAA,EAAA;;MANjB,KAAK,MAAM;MACX,IAAI,MAAM;MACV,YAAU,MAAM;MAChB,OAAK,eAAE,aAAA,MAAa,OAAK,CAAA;;6BAET,CAAA,gBAAA,gBAAd,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;;KAEhB,WAAQ,KAAA,QAAA,UAAA;KAEA,MAAM,eAAA,WAAA,EADd,mBAOE,OAAA;;MALA,MAAK;MACL,oBAAiB;MACjB,aAAU;MACV,oBAAiB;MAChB,OAAK,eAAE,aAAA,MAAa,WAAS,CAAA"}

package/dist/components/modal/ModalClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalClose.js","names":[],"sources":["../../../src/components/modal/ModalClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  asChild?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n})\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogClose\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ModalClose.js","names":[],"sources":["../../../src/components/modal/ModalClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n})\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogClose\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"mappings":""}

package/dist/components/modal/ModalClose.vue_vue_type_script_setup_true_lang.js

@@ -6,6 +6,7 @@ import { DialogClose } from "reka-ui";
 var ModalClose_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ModalClose",
 	props: {
+		as: {},
 		asChild: {
 			type: Boolean,
 			default: false
@@ -17,12 +18,17 @@ var ModalClose_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const styles = modalVariants();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DialogClose), {
+				as: props.as,
 				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(unref(styles).closeTrigger(), props.class))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["as-child", "class"]);
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/modal/ModalClose.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalClose.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  asChild?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n})\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogClose\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAOd,MAAM,SAAS,eAAc;;uBAI3B,YAKc,MAAA,YAAA,EAAA;IAJX,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,cAAY,EAAI,MAAM,MAAK,CAAA;;2BAEnD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ModalClose.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n})\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogClose\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAQd,MAAM,SAAS,eAAc;;uBAI3B,YAMc,MAAA,YAAA,EAAA;IALX,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,cAAY,EAAI,MAAM,MAAK,CAAA;;2BAEnD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/modal/ModalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.js","names":[],"sources":["../../../src/components/modal/ModalContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogPortal, DialogContent, injectDialogRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\nimport ModalOverlay from './ModalOverlay.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n}>(), {})\n\nconst emit = defineEmits<{\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\n// Inject context from Modal root\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\n\n// Inject Reka's dialog root context to read open state for AnimatePresence\nconst dialogRootContext = injectDialogRootContext()\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogPortal>\n    <div class=\"modal__portal\">\n    <ModalOverlay />\n    <DialogContent\n      :class=\"composeClassName(styles.container({ scroll: ctx.scroll }), props.class)\"\n      :data-placement=\"ctx.placement\"\n      :aria-hidden=\"!dialogRootContext.open.value || undefined\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <AnimatePresence>\n        <motion.div\n          v-if=\"dialogRootContext.open.value\"\n          :class=\"composeClassName(styles.dialog({ size: ctx.size, scroll: ctx.scroll }), 'modal-content-inner')\"\n          :data-placement=\"ctx.placement\"\n          :initial=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :animate=\"{ opacity: 1, scale: 1, y: 0 }\"\n          :exit=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        >\n          <slot />\n        </motion.div>\n      </AnimatePresence>\n    </DialogContent>\n    </div>\n  </DialogPortal>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ModalContent.js","names":[],"sources":["../../../src/components/modal/ModalContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogPortal, DialogContent, injectDialogRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\nimport ModalOverlay from './ModalOverlay.vue'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  forceMount?: boolean\n  disableOutsidePointerEvents?: boolean\n  to?: string | HTMLElement\n  disabled?: boolean\n  defer?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n  forceMount: false,\n  disableOutsidePointerEvents: false,\n  disabled: false,\n  defer: false,\n})\n\nconst emit = defineEmits<{\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n  'focus-outside': [event: Event]\n}>()\n\n// Inject context from Modal root\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\n\n// Inject Reka's dialog root context to read open state for AnimatePresence\nconst dialogRootContext = injectDialogRootContext()\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogPortal :to=\"props.to\" :disabled=\"props.disabled\" :defer=\"props.defer\" :force-mount=\"props.forceMount\">\n    <div class=\"modal__portal\">\n    <ModalOverlay />\n    <DialogContent\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :force-mount=\"props.forceMount\"\n      :disable-outside-pointer-events=\"props.disableOutsidePointerEvents\"\n      :class=\"composeClassName(styles.container({ scroll: ctx.scroll }), props.class)\"\n      :data-placement=\"ctx.placement\"\n      :aria-hidden=\"!dialogRootContext.open.value || undefined\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n    >\n      <AnimatePresence>\n        <motion.div\n          v-if=\"dialogRootContext.open.value\"\n          :class=\"composeClassName(styles.dialog({ size: ctx.size, scroll: ctx.scroll }), 'modal-content-inner')\"\n          :data-placement=\"ctx.placement\"\n          :initial=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :animate=\"{ opacity: 1, scale: 1, y: 0 }\"\n          :exit=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        >\n          <slot />\n        </motion.div>\n      </AnimatePresence>\n    </DialogContent>\n    </div>\n  </DialogPortal>\n</template>\n"],"mappings":""}

package/dist/components/modal/ModalContent.vue_vue_type_script_setup_true_lang.js

@@ -10,13 +10,38 @@ import { DialogContent, DialogPortal, injectDialogRootContext } from "reka-ui";
 var _hoisted_1 = { class: "modal__portal" };
 var ModalContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ModalContent",
-	props: { class: {} },
+	props: {
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		forceMount: {
+			type: Boolean,
+			default: false
+		},
+		disableOutsidePointerEvents: {
+			type: Boolean,
+			default: false
+		},
+		to: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		defer: {
+			type: Boolean,
+			default: false
+		},
+		class: {}
+	},
 	emits: [
 		"escape-key-down",
 		"pointer-down-outside",
 		"interact-outside",
 		"open-auto-focus",
-		"close-auto-focus"
+		"close-auto-focus",
+		"focus-outside"
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
@@ -30,8 +55,17 @@ var ModalContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		const dialogRootContext = injectDialogRootContext();
 		const styles = modalVariants();
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(DialogPortal), null, {
+			return openBlock(), createBlock(unref(DialogPortal), {
+				to: props.to,
+				disabled: props.disabled,
+				defer: props.defer,
+				"force-mount": props.forceMount
+			}, {
 				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(ModalOverlay_default), createVNode(unref(DialogContent), {
+					as: props.as,
+					"as-child": props.asChild,
+					"force-mount": props.forceMount,
+					"disable-outside-pointer-events": props.disableOutsidePointerEvents,
 					class: normalizeClass(unref(composeClassName)(unref(styles).container({ scroll: unref(ctx).scroll }), props.class)),
 					"data-placement": unref(ctx).placement,
 					"aria-hidden": !unref(dialogRootContext).open.value || void 0,
@@ -39,7 +73,8 @@ var ModalContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					onPointerDownOutside: _cache[1] || (_cache[1] = ($event) => emit("pointer-down-outside", $event)),
 					onInteractOutside: _cache[2] || (_cache[2] = ($event) => emit("interact-outside", $event)),
 					onOpenAutoFocus: _cache[3] || (_cache[3] = ($event) => emit("open-auto-focus", $event)),
-					onCloseAutoFocus: _cache[4] || (_cache[4] = ($event) => emit("close-auto-focus", $event))
+					onCloseAutoFocus: _cache[4] || (_cache[4] = ($event) => emit("close-auto-focus", $event)),
+					onFocusOutside: _cache[5] || (_cache[5] = ($event) => emit("focus-outside", $event))
 				}, {
 					default: withCtx(() => [createVNode(unref(AnimatePresence_default), null, {
 						default: withCtx(() => [unref(dialogRootContext).open.value ? (openBlock(), createBlock(unref(motion).div, {
@@ -76,12 +111,21 @@ var ModalContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					})]),
 					_: 3
 				}, 8, [
+					"as",
+					"as-child",
+					"force-mount",
+					"disable-outside-pointer-events",
 					"class",
 					"data-placement",
 					"aria-hidden"
 				])])]),
 				_: 3
-			});
+			}, 8, [
+				"to",
+				"disabled",
+				"defer",
+				"force-mount"
+			]);
 		};
 	}
 });

package/dist/components/modal/ModalContent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogPortal, DialogContent, injectDialogRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\nimport ModalOverlay from './ModalOverlay.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n}>(), {})\n\nconst emit = defineEmits<{\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\n// Inject context from Modal root\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\n\n// Inject Reka's dialog root context to read open state for AnimatePresence\nconst dialogRootContext = injectDialogRootContext()\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogPortal>\n    <div class=\"modal__portal\">\n    <ModalOverlay />\n    <DialogContent\n      :class=\"composeClassName(styles.container({ scroll: ctx.scroll }), props.class)\"\n      :data-placement=\"ctx.placement\"\n      :aria-hidden=\"!dialogRootContext.open.value || undefined\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <AnimatePresence>\n        <motion.div\n          v-if=\"dialogRootContext.open.value\"\n          :class=\"composeClassName(styles.dialog({ size: ctx.size, scroll: ctx.scroll }), 'modal-content-inner')\"\n          :data-placement=\"ctx.placement\"\n          :initial=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :animate=\"{ opacity: 1, scale: 1, y: 0 }\"\n          :exit=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        >\n          <slot />\n        </motion.div>\n      </AnimatePresence>\n    </DialogContent>\n    </div>\n  </DialogPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAId,MAAM,OAAO;EASb,MAAM,MAAM,eAAe;GAAE,MAAM;GAAM,QAAQ;GAAU,SAAS;GAAU,WAAW;GAAQ,CAAA;EAGjG,MAAM,oBAAoB,yBAAwB;EAElD,MAAM,SAAS,eAAc;;uBAI3B,YA4Be,MAAA,aAAA,EAAA,MAAA;2BADP,CA1BN,mBA0BM,OA1BN,YA0BM,CAzBN,YAAgB,qBAAA,EAChB,YAuBgB,MAAA,cAAA,EAAA;KAtBb,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,UAAS,EAAA,QAAW,MAAA,IAAG,CAAC,QAAM,CAAA,EAAK,MAAM,MAAK,CAAA;KAC7E,kBAAgB,MAAA,IAAG,CAAC;KACpB,eAAW,CAAG,MAAA,kBAAiB,CAAC,KAAK,SAAS,KAAA;KAC9C,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;KAC/C,sBAAoB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,wBAAyB,OAAM;KACzD,mBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;KACjD,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;KAC/C,kBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;;4BAchC,CAZlB,YAYkB,MAAA,wBAAA,EAAA,MAAA;6BADH,CATL,MAAA,kBAAiB,CAAC,KAAK,SAAA,WAAA,EAD/B,YAUa,MAAA,OAAA,CAAA,KAAA;;OARV,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAM;QAAA,MAAS,MAAA,IAAG,CAAC;QAAI,QAAU,MAAA,IAAG,CAAC;QAAM,CAAA,EAAA,sBAAA,CAAA;OAC1E,kBAAgB,MAAA,IAAG,CAAC;OACpB,SAAS;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAAmC;OAC5C,SAAS;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAA8B;OACvC,MAAM;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAAmC;OACzC,YAAY;QAAA,UAAA;QAAA,MAAA;QAAkC;;8BAEvC,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ModalContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogPortal, DialogContent, injectDialogRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\nimport ModalOverlay from './ModalOverlay.vue'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  forceMount?: boolean\n  disableOutsidePointerEvents?: boolean\n  to?: string | HTMLElement\n  disabled?: boolean\n  defer?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n  forceMount: false,\n  disableOutsidePointerEvents: false,\n  disabled: false,\n  defer: false,\n})\n\nconst emit = defineEmits<{\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n  'focus-outside': [event: Event]\n}>()\n\n// Inject context from Modal root\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\n\n// Inject Reka's dialog root context to read open state for AnimatePresence\nconst dialogRootContext = injectDialogRootContext()\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogPortal :to=\"props.to\" :disabled=\"props.disabled\" :defer=\"props.defer\" :force-mount=\"props.forceMount\">\n    <div class=\"modal__portal\">\n    <ModalOverlay />\n    <DialogContent\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :force-mount=\"props.forceMount\"\n      :disable-outside-pointer-events=\"props.disableOutsidePointerEvents\"\n      :class=\"composeClassName(styles.container({ scroll: ctx.scroll }), props.class)\"\n      :data-placement=\"ctx.placement\"\n      :aria-hidden=\"!dialogRootContext.open.value || undefined\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n    >\n      <AnimatePresence>\n        <motion.div\n          v-if=\"dialogRootContext.open.value\"\n          :class=\"composeClassName(styles.dialog({ size: ctx.size, scroll: ctx.scroll }), 'modal-content-inner')\"\n          :data-placement=\"ctx.placement\"\n          :initial=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :animate=\"{ opacity: 1, scale: 1, y: 0 }\"\n          :exit=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        >\n          <slot />\n        </motion.div>\n      </AnimatePresence>\n    </DialogContent>\n    </div>\n  </DialogPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAiBd,MAAM,OAAO;EAUb,MAAM,MAAM,eAAe;GAAE,MAAM;GAAM,QAAQ;GAAU,SAAS;GAAU,WAAW;GAAQ,CAAA;EAGjG,MAAM,oBAAoB,yBAAwB;EAElD,MAAM,SAAS,eAAc;;uBAI3B,YAiCe,MAAA,aAAA,EAAA;IAjCA,IAAI,MAAM;IAAK,UAAU,MAAM;IAAW,OAAO,MAAM;IAAQ,eAAa,MAAM;;2BAgCzF,CA/BN,mBA+BM,OA/BN,YA+BM,CA9BN,YAAgB,qBAAA,EAChB,YA4BgB,MAAA,cAAA,EAAA;KA3Bb,IAAI,MAAM;KACV,YAAU,MAAM;KAChB,eAAa,MAAM;KACnB,kCAAgC,MAAM;KACtC,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,UAAS,EAAA,QAAW,MAAA,IAAG,CAAC,QAAM,CAAA,EAAK,MAAM,MAAK,CAAA;KAC7E,kBAAgB,MAAA,IAAG,CAAC;KACpB,eAAW,CAAG,MAAA,kBAAiB,CAAC,KAAK,SAAS,KAAA;KAC9C,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;KAC/C,sBAAoB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,wBAAyB,OAAM;KACzD,mBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;KACjD,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;KAC/C,kBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;KACjD,gBAAa,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,iBAAkB,OAAM;;4BAc1B,CAZlB,YAYkB,MAAA,wBAAA,EAAA,MAAA;6BADH,CATL,MAAA,kBAAiB,CAAC,KAAK,SAAA,WAAA,EAD/B,YAUa,MAAA,OAAA,CAAA,KAAA;;OARV,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAM;QAAA,MAAS,MAAA,IAAG,CAAC;QAAI,QAAU,MAAA,IAAG,CAAC;QAAM,CAAA,EAAA,sBAAA,CAAA;OAC1E,kBAAgB,MAAA,IAAG,CAAC;OACpB,SAAS;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAAmC;OAC5C,SAAS;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAA8B;OACvC,MAAM;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAAmC;OACzC,YAAY;QAAA,UAAA;QAAA,MAAA;QAAkC;;8BAEvC,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/modal/ModalDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDescription.js","names":[],"sources":["../../../src/components/modal/ModalDescription.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogDescription } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  class?: string\n}>(), {\n  as: 'p',\n})\n</script>\n\n<template>\n  <DialogDescription\n    :as=\"props.as\"\n    :class=\"composeClassName('text-sm text-muted', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ModalDescription.js","names":[],"sources":["../../../src/components/modal/ModalDescription.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogDescription } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  as: 'p',\n  asChild: false,\n})\n</script>\n\n<template>\n  <DialogDescription\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName('text-sm text-muted', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"],"mappings":""}

package/dist/components/modal/ModalDescription.vue_vue_type_script_setup_true_lang.js

@@ -6,6 +6,10 @@ var ModalDescription_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 	__name: "ModalDescription",
 	props: {
 		as: { default: "p" },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
 		class: {}
 	},
 	setup(__props) {
@@ -13,11 +17,16 @@ var ModalDescription_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DialogDescription), {
 				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)("text-sm text-muted", props.class))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["as", "class"]);
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/modal/ModalDescription.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDescription.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalDescription.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogDescription } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  class?: string\n}>(), {\n  as: 'p',\n})\n</script>\n\n<template>\n  <DialogDescription\n    :as=\"props.as\"\n    :class=\"composeClassName('text-sm text-muted', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"],"mappings":";;;;;;;;;;;EAIA,MAAM,QAAQ;;uBASZ,YAKoB,MAAA,kBAAA,EAAA;IAJjB,IAAI,MAAM;IACV,OAAK,eAAE,MAAA,iBAAgB,CAAA,sBAAuB,MAAM,MAAK,CAAA;;2BAElD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ModalDescription.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalDescription.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogDescription } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  as: 'p',\n  asChild: false,\n})\n</script>\n\n<template>\n  <DialogDescription\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName('text-sm text-muted', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAIA,MAAM,QAAQ;;uBAWZ,YAMoB,MAAA,kBAAA,EAAA;IALjB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAA,sBAAuB,MAAM,MAAK,CAAA;;2BAElD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/modal/ModalOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalOverlay.js","names":[],"sources":["../../../src/components/modal/ModalOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogOverlay } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n}>(), {})\n\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogOverlay :class=\"composeClassName(styles.backdrop({ variant: ctx.variant }), props.class)\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"ModalOverlay.js","names":[],"sources":["../../../src/components/modal/ModalOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogOverlay } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  forceMount?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n  forceMount: false,\n})\n\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogOverlay\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :force-mount=\"props.forceMount\"\n    :class=\"composeClassName(styles.backdrop({ variant: ctx.variant }), props.class)\"\n  />\n</template>\n"],"mappings":""}