@auronui/vue 1.0.21 → 1.0.23

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

@@ -1,10 +1,23 @@
 import { composeClassName } from "../../utils/composeClassName.js";
+import Button_default from "../button/Button.js";
 import { useListBoxProvide } from "./ListBox.context.js";
 import ListBoxItem_default from "./ListBoxItem.js";
-import { Fragment, computed, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderList, renderSlot, toDisplayString, toRef, unref, useAttrs, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, ref, renderList, renderSlot, toDisplayString, toRef, unref, useAttrs, useTemplateRef, withCtx } from "vue";
+import { useInfiniteScroll } from "@vueuse/core";
 import { listboxVariants } from "@auronui/styles";
-import { ListboxContent, ListboxRoot } from "reka-ui";
+import { ListboxContent, ListboxRoot, ListboxVirtualizer } from "reka-ui";
 //#region src/components/list-box/ListBox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"data-slot": "list-box-loading",
+	role: "status",
+	"aria-live": "polite"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "flex justify-center p-2",
+	"data-slot": "list-box-load-more"
+};
 var ListBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ListBox",
@@ -28,9 +41,67 @@ 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
+		},
+		hideSelectedIcon: {
+			type: Boolean,
+			default: false
+		},
+		virtualized: {
+			type: Boolean,
+			default: false
+		},
+		estimateSize: {
+			type: [Number, Function],
+			default: 36
+		},
+		overscan: { default: 12 },
+		maxHeight: { default: "16rem" },
+		hasMore: {
+			type: Boolean,
+			default: false
+		},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		loadMoreDistance: { default: 120 },
+		loadMode: { default: "scroll" },
+		loadMoreLabel: { default: "Load more" }
 	},
-	emits: ["update:modelValue"],
+	emits: [
+		"update:modelValue",
+		"highlight",
+		"entry-focus",
+		"leave",
+		"load-more"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -38,43 +109,137 @@ var ListBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		useListBoxProvide({
 			variant: toRef(props, "variant"),
 			itemVariant: toRef(props, "variant"),
-			isDisabled: toRef(props, "isDisabled")
+			isDisabled: toRef(props, "isDisabled"),
+			hideSelectedIcon: toRef(props, "hideSelectedIcon")
 		});
 		const slotFns = computed(() => listboxVariants({ variant: props.variant }));
+		const contentRef = useTemplateRef("content");
+		const lastRequestedCount = ref(-1);
+		useInfiniteScroll(contentRef, () => {
+			lastRequestedCount.value = props.items?.length ?? 0;
+			emit("load-more");
+		}, {
+			distance: props.loadMoreDistance,
+			canLoadMore: () => props.loadMode === "scroll" && props.hasMore && !props.isLoading && (props.items?.length ?? 0) !== lastRequestedCount.value
+		});
+		function requestLoadMore() {
+			if (props.hasMore && !props.isLoading) emit("load-more");
+		}
+		const needsScroll = computed(() => props.virtualized);
+		const contentStyle = computed(() => needsScroll.value ? {
+			maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight,
+			overflowY: "auto"
+		} : void 0);
+		const rekaModelValue = computed(() => props.modelValue == null ? void 0 : [].concat(props.modelValue));
+		const rekaDefaultValue = computed(() => props.defaultValue == null ? void 0 : [].concat(props.defaultValue));
 		return (_ctx, _cache) => {
 			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",
+				"model-value": rekaModelValue.value,
+				"default-value": rekaDefaultValue.value,
+				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(() => [props.items ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.items, (item) => {
-						return openBlock(), createBlock(ListBoxItem_default, {
-							key: item.value,
-							value: item.value,
-							"is-disabled": item.disabled,
-							"text-value": item.textValue
+				default: withCtx(() => [
+					createVNode(unref(ListboxContent), mergeProps({ ref: "content" }, unref(attrs), {
+						as: props.contentAs,
+						"as-child": props.contentAsChild,
+						style: contentStyle.value,
+						class: unref(composeClassName)(slotFns.value, props.class, props.classNames?.base)
+					}), {
+						default: withCtx(() => [props.virtualized && props.items ? (openBlock(), createBlock(unref(ListboxVirtualizer), {
+							key: 0,
+							options: props.items,
+							"estimate-size": props.estimateSize,
+							overscan: props.overscan,
+							"text-content": (o) => o.label ?? o.value
 						}, {
-							default: withCtx(() => [createTextVNode(toDisplayString(item.label ?? item.value), 1)]),
-							_: 2
-						}, 1032, [
-							"value",
-							"is-disabled",
-							"text-value"
-						]);
-					}), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })]),
-					_: 3
-				}, 16, ["class"])]),
+							default: withCtx(({ option, virtualItem }) => [renderSlot(_ctx.$slots, "item", {
+								item: option,
+								index: virtualItem.index
+							}, () => [createVNode(ListBoxItem_default, {
+								value: option.value,
+								"is-disabled": option.disabled,
+								"text-value": option.textValue
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(option.label ?? option.value), 1)]),
+								_: 2
+							}, 1032, [
+								"value",
+								"is-disabled",
+								"text-value"
+							])])]),
+							_: 3
+						}, 8, [
+							"options",
+							"estimate-size",
+							"overscan",
+							"text-content"
+						])) : props.items ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(props.items, (item) => {
+							return openBlock(), createBlock(ListBoxItem_default, {
+								key: item.value,
+								value: item.value,
+								"is-disabled": item.disabled,
+								"text-value": item.textValue
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(item.label ?? item.value), 1)]),
+								_: 2
+							}, 1032, [
+								"value",
+								"is-disabled",
+								"text-value"
+							]);
+						}), 128)) : renderSlot(_ctx.$slots, "default", { key: 2 })]),
+						_: 3
+					}, 16, [
+						"as",
+						"as-child",
+						"style",
+						"class"
+					]),
+					props.loadMode === "scroll" && props.isLoading ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "loading", {}, () => [_cache[4] || (_cache[4] = createTextVNode("Loading…", -1))])])) : createCommentVNode("", true),
+					props.loadMode === "button" && props.hasMore ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "loadMore", {
+						loadMore: requestLoadMore,
+						isLoading: props.isLoading,
+						hasMore: props.hasMore
+					}, () => [createVNode(Button_default, {
+						size: "sm",
+						"is-loading": props.isLoading,
+						disabled: props.isLoading,
+						"data-slot": "load-more-button",
+						onClick: requestLoadMore
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(props.loadMoreLabel), 1)]),
+						_: 1
+					}, 8, ["is-loading", "disabled"])])])) : createCommentVNode("", true)
+				]),
 				_: 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, ref, toRef, useAttrs, useTemplateRef } from 'vue'\nimport { useInfiniteScroll } from '@vueuse/core'\nimport { ListboxRoot, ListboxContent, ListboxVirtualizer } 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'\nimport Button from '../button/Button.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  /** Hide the selected checkmark on all items (forwarded via context). */\n  hideSelectedIcon?: boolean\n  /** Enable windowed rendering (opt-in). Renders from `items`. */\n  virtualized?: boolean\n  /** Estimated row height in px (or per-index fn) for the virtualizer. */\n  estimateSize?: number | ((index: number) => number)\n  /** Rows rendered outside the visible area. */\n  overscan?: number\n  /** Scroll-viewport height for the content when scrolling is active. */\n  maxHeight?: string | number\n  /** Whether more pages remain to load (gates load-more). */\n  hasMore?: boolean\n  /** A page is currently loading (gates load-more; drives #loading slot). */\n  isLoading?: boolean\n  /** Distance in px from the bottom that triggers load-more. */\n  loadMoreDistance?: number\n  /** How the next page is requested: auto on scroll, or a manual button. */\n  loadMode?: 'scroll' | 'button'\n  /** Label for the manual load-more button (loadMode=\"button\"). */\n  loadMoreLabel?: string\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  hideSelectedIcon: false,\n  virtualized: false,\n  estimateSize: 36,\n  overscan: 12,\n  maxHeight: '16rem',\n  hasMore: false,\n  isLoading: false,\n  loadMoreDistance: 120,\n  loadMode: 'scroll',\n  loadMoreLabel: 'Load more',\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  'load-more': []\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  hideSelectedIcon: toRef(props, 'hideSelectedIcon'),\n})\n\nconst slotFns = computed(() =>\n  listboxVariants({ variant: props.variant })\n)\n\n// Bounded scroll viewport only when the content actually needs to scroll, so\n// default (non-virtualized) ListBoxes are visually unchanged.\n// useTemplateRef on a Reka component resolves to its instance; useInfiniteScroll's\n// internal unrefElement reads `.$el` to get the scroll DOM node.\nconst contentRef = useTemplateRef<HTMLElement>('content')\n\n// Re-arm latch. useInfiniteScroll keeps re-invoking onLoadMore while the scroll\n// element stays at the bottom and canLoadMore is true. Emitting `load-more` does\n// not itself flip hasMore/isLoading, so without this guard it fires in a tight\n// loop (unbounded emits → hang). We record the item count at the moment we ask\n// for a page and refuse to ask again until the dataset actually grows — i.e.\n// until the consumer has appended the next page.\nconst lastRequestedCount = ref(-1)\nuseInfiniteScroll(\n  contentRef,\n  () => {\n    lastRequestedCount.value = props.items?.length ?? 0\n    emit('load-more')\n  },\n  {\n    // Read once at setup: useScroll consumes `offset.bottom` as a raw number\n    // (no toValue), so a getter/ref here would break arrival math. Hot-swapping\n    // loadMoreDistance after mount is not supported (not a real use case).\n    distance: props.loadMoreDistance,\n    canLoadMore: () =>\n      props.loadMode === 'scroll'\n      && props.hasMore\n      && !props.isLoading\n      && (props.items?.length ?? 0) !== lastRequestedCount.value,\n  },\n)\n\n// Manual load-more (loadMode=\"button\"). User-driven, so no re-arm latch needed —\n// the hasMore/isLoading gate is enough (and the button is disabled while loading).\nfunction requestLoadMore() {\n  if (props.hasMore && !props.isLoading) emit('load-more')\n}\n\nconst needsScroll = computed(() => props.virtualized)\nconst contentStyle = computed(() =>\n  needsScroll.value\n    ? { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflowY: 'auto' as const }\n    : undefined,\n)\n\n// Stable array references for Reka. Building a fresh array inline on every render\n// would retrigger Reka's `watch(modelValue)`, which re-highlights and\n// scrollIntoView's the selected/first item — making the list jump to the top on\n// any unrelated re-render (e.g. when isLoading toggles during load-more). A\n// computed is cached, so the reference only changes when the value really does.\nconst rekaModelValue = computed(() =>\n  props.modelValue == null ? undefined : ([] as string[]).concat(props.modelValue),\n)\nconst rekaDefaultValue = computed(() =>\n  props.defaultValue == null ? undefined : ([] as string[]).concat(props.defaultValue),\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=\"rekaModelValue\"\n    :default-value=\"rekaDefaultValue\"\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      ref=\"content\"\n      v-bind=\"attrs\"\n      :as=\"props.contentAs\"\n      :as-child=\"props.contentAsChild\"\n      :style=\"contentStyle\"\n      :class=\"composeClassName(slotFns, props.class, props.classNames?.base)\"\n    >\n      <ListboxVirtualizer\n        v-if=\"props.virtualized && props.items\"\n        :options=\"props.items\"\n        :estimate-size=\"props.estimateSize\"\n        :overscan=\"props.overscan\"\n        :text-content=\"(o) => (o.label ?? o.value)\"\n      >\n        <template #default=\"{ option, virtualItem }\">\n          <slot name=\"item\" :item=\"option\" :index=\"virtualItem.index\">\n            <ListBoxItem\n              :value=\"option.value\"\n              :is-disabled=\"option.disabled\"\n              :text-value=\"option.textValue\"\n            >{{ option.label ?? option.value }}</ListBoxItem>\n          </slot>\n        </template>\n      </ListboxVirtualizer>\n\n      <template v-else-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\n      <slot v-else />\n    </ListboxContent>\n\n    <!-- Bottom area, rendered outside role=\"listbox\" so it does not violate\n         aria-required-children. Scroll mode shows a loading row; button mode\n         shows a manual \"Load more\" button (which conveys its own loading state). -->\n    <div\n      v-if=\"props.loadMode === 'scroll' && props.isLoading\"\n      data-slot=\"list-box-loading\"\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <slot name=\"loading\">Loading…</slot>\n    </div>\n\n    <div\n      v-if=\"props.loadMode === 'button' && props.hasMore\"\n      class=\"flex justify-center p-2\"\n      data-slot=\"list-box-load-more\"\n    >\n      <slot\n        name=\"loadMore\"\n        :load-more=\"requestLoadMore\"\n        :is-loading=\"props.isLoading\"\n        :has-more=\"props.hasMore\"\n      >\n        <Button\n          size=\"sm\"\n          :is-loading=\"props.isLoading\"\n          :disabled=\"props.isLoading\"\n          data-slot=\"load-more-button\"\n          @click=\"requestLoadMore\"\n        >\n          {{ props.loadMoreLabel }}\n        </Button>\n      </slot>\n    </div>\n  </ListboxRoot>\n</template>\n"],"mappings":"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"}

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  /** Hide this item's selected indicator. Falls back to the ListBox setting. */\n  hideSelectedIcon?: 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  hideSelectedIcon: undefined,\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  hideSelectedIcon: ref(false),\n})\n\nconst finalVariant = computed(() => props.variant ?? ctx.itemVariant.value)\nconst finalDisabled = computed(() => ctx.isDisabled.value || props.isDisabled)\nconst finalHideSelectedIcon = computed(\n  () => props.hideSelectedIcon ?? ctx.hideSelectedIcon.value,\n)\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      v-if=\"!finalHideSelectedIcon\"\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

@@ -1,6 +1,6 @@
 import { composeClassName } from "../../utils/composeClassName.js";
 import { useListBoxInject } from "./ListBox.context.js";
-import { computed, createBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, unref, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, unref, withCtx } from "vue";
 import { listboxItemVariants } from "@auronui/styles";
 import { ListboxItem, ListboxItemIndicator } from "reka-ui";
 //#region src/components/list-box/ListBoxItem.vue?vue&type=script&setup=true&lang.ts
@@ -24,31 +24,61 @@ 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
+		},
+		hideSelectedIcon: {
+			type: Boolean,
+			default: void 0
+		}
 	},
-	setup(__props) {
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const ctx = useListBoxInject({
 			variant: ref("default"),
 			itemVariant: ref("default"),
-			isDisabled: ref(false)
+			isDisabled: ref(false),
+			hideSelectedIcon: ref(false)
 		});
 		const finalVariant = computed(() => props.variant ?? ctx.itemVariant.value);
 		const finalDisabled = computed(() => ctx.isDisabled.value || props.isDisabled);
+		const finalHideSelectedIcon = computed(() => props.hideSelectedIcon ?? ctx.hideSelectedIcon.value);
 		const slotFns = computed(() => listboxItemVariants({ variant: finalVariant.value }));
 		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", {
+					!finalHideSelectedIcon.value ? (openBlock(), createBlock(unref(ListboxItemIndicator), {
+						key: 0,
+						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 +92,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"
+					])) : createCommentVNode("", true)
 				]),
 				_: 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  /** Hide this item's selected indicator. Falls back to the ListBox setting. */\n  hideSelectedIcon?: 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  hideSelectedIcon: undefined,\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  hideSelectedIcon: ref(false),\n})\n\nconst finalVariant = computed(() => props.variant ?? ctx.itemVariant.value)\nconst finalDisabled = computed(() => ctx.isDisabled.value || props.isDisabled)\nconst finalHideSelectedIcon = computed(\n  () => props.hideSelectedIcon ?? ctx.hideSelectedIcon.value,\n)\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      v-if=\"!finalHideSelectedIcon\"\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;EAqCd,MAAM,OAAO;EAKb,MAAM,MAAM,iBAAiB;GAC3B,SAAS,IAAI,UAAU;GACvB,aAAa,IAAI,UAAU;GAC3B,YAAY,IAAI,MAAM;GACtB,kBAAkB,IAAI,MAAM;GAC7B,CAAA;EAED,MAAM,eAAe,eAAe,MAAM,WAAW,IAAI,YAAY,MAAK;EAC1E,MAAM,gBAAgB,eAAe,IAAI,WAAW,SAAS,MAAM,WAAU;EAC7E,MAAM,wBAAwB,eACtB,MAAM,oBAAoB,IAAI,iBAAiB,MACvD;EAEA,MAAM,UAAU,eACd,oBAAoB,EAAE,SAAS,aAAa,OAAyC,CAAA,CACvF;;uBAIE,YAqCc,MAAA,YAAA,EAAA;IApCX,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;MAEjB,sBAAA,SAAA,WAAA,EADT,YAwBuB,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":""}