@auronui/vue 1.0.21 → 1.0.23

package/dist/components/date-time-picker/DateTimePickerTimeScroller.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { Fragment, computed, createElementBlock, defineComponent, nextTick, normalizeClass, onMounted, openBlock, ref, renderList, toDisplayString, watch } from "vue";
+import { Fragment, computed, createElementBlock, defineComponent, normalizeClass, onMounted, openBlock, ref, renderList, toDisplayString } from "vue";
 //#region src/components/date-time-picker/DateTimePickerTimeScroller.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label", "onScrollPassive"];
 var _hoisted_2 = [
@@ -6,6 +6,7 @@ var _hoisted_2 = [
 	"aria-selected",
 	"onClick"
 ];
+var REPEAT = 3;
 var ITEM_H = 40;
 var DateTimePickerTimeScroller_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "DateTimePickerTimeScroller",
@@ -28,51 +29,62 @@ var DateTimePickerTimeScroller_vue_vue_type_script_setup_true_lang_default = /*
 		const columns = computed(() => {
 			const cols = [{
 				key: "hour",
-				items: hourItems.value
+				items: hourItems.value,
+				loop: true
 			}, {
 				key: "minute",
-				items: minutes
+				items: minutes,
+				loop: true
 			}];
 			if (props.granularity === "second") cols.push({
 				key: "second",
-				items: seconds
+				items: seconds,
+				loop: true
 			});
 			if (props.hourCycle === 12) cols.push({
 				key: "ampm",
-				items: ampm
+				items: ampm,
+				loop: false
 			});
 			return cols;
 		});
-		function currentIndexFor(key) {
-			const v = props.modelValue;
-			if (key === "hour") {
-				if (props.hourCycle === 12) {
-					const h12 = v.hour % 12 === 0 ? 12 : v.hour % 12;
-					return hours12.indexOf(h12);
-				}
-				return v.hour;
-			}
-			if (key === "minute") return v.minute;
-			if (key === "second") return v.second ?? 0;
-			if (key === "ampm") return v.hour >= 12 ? 1 : 0;
-			return 0;
-		}
 		const columnRefs = ref([]);
-		function scrollColumnToIndex(colEl, index) {
-			colEl.scrollTop = index * ITEM_H;
+		function renderItems(col) {
+			if (!col.loop) return col.items;
+			const out = [];
+			for (let r = 0; r < REPEAT; r++) out.push(...col.items);
+			return out;
+		}
+		function cycleHeight(col) {
+			return col.items.length * ITEM_H;
 		}
-		function syncScrollPositions() {
+		function onColumnScroll(i, colEl) {
+			const col = columns.value[i];
+			if (!col.loop) return;
+			const cycle = cycleHeight(col);
+			const total = cycle * REPEAT;
+			const recenter = (REPEAT - 2) * cycle;
+			if (colEl.scrollTop < cycle) colEl.scrollTop += recenter;
+			else if (colEl.scrollTop >= total - cycle) colEl.scrollTop -= recenter;
+		}
+		onMounted(() => {
 			columns.value.forEach((col, i) => {
 				const el = columnRefs.value[i];
-				if (el) scrollColumnToIndex(el, currentIndexFor(col.key));
+				if (el && col.loop) el.scrollTop = cycleHeight(col) * Math.floor(REPEAT / 2);
 			});
+		});
+		function isSelected(key, item) {
+			const v = props.modelValue;
+			if (key === "hour") {
+				if (props.hourCycle === 12) return item === (v.hour % 12 === 0 ? 12 : v.hour % 12);
+				return item === v.hour;
+			}
+			if (key === "minute") return item === v.minute;
+			if (key === "second") return item === (v.second ?? 0);
+			if (key === "ampm") return item === (v.hour >= 12 ? "PM" : "AM");
+			return false;
 		}
-		onMounted(() => nextTick(syncScrollPositions));
-		watch(() => props.modelValue, () => nextTick(syncScrollPositions));
-		function onColumnScroll(key, colEl) {
-			const idx = Math.round(colEl.scrollTop / ITEM_H);
-			const item = columns.value.find((c) => c.key === key).items[idx];
-			if (item === void 0) return;
+		function onItemClick(key, item) {
 			const v = props.modelValue;
 			if (key === "hour") {
 				let newHour;
@@ -89,35 +101,19 @@ var DateTimePickerTimeScroller_vue_vue_type_script_setup_true_lang_default = /*
 				if (isPm !== v.hour >= 12) emit("update:modelValue", v.set({ hour: isPm ? v.hour + 12 : v.hour - 12 }));
 			}
 		}
-		function onKeyDown(e, colEl) {
-			if (e.key === "ArrowDown") {
-				e.preventDefault();
-				colEl.scrollTop += ITEM_H;
-			} else if (e.key === "ArrowUp") {
-				e.preventDefault();
-				colEl.scrollTop -= ITEM_H;
-			}
-		}
-		function onItemClick(colEl, idx) {
-			colEl.scrollTo({
-				top: idx * ITEM_H,
-				behavior: "smooth"
-			});
-		}
 		function columnLabel(key) {
 			if (key === "hour") return "Hour";
 			if (key === "minute") return "Minute";
 			if (key === "second") return "Second";
 			return "AM/PM";
 		}
-		function itemLabel(_key, item) {
+		function itemLabel(item) {
 			if (typeof item === "string") return item;
 			return String(item).padStart(2, "0");
 		}
 		__expose({
 			columnRefs,
-			columns,
-			currentIndexFor
+			columns
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
@@ -135,17 +131,16 @@ var DateTimePickerTimeScroller_vue_vue_type_script_setup_true_lang_default = /*
 					"data-slot": "scroller-column",
 					role: "listbox",
 					tabindex: "0",
-					onScrollPassive: ($event) => onColumnScroll(col.key, $event.currentTarget),
-					onKeydown: _cache[0] || (_cache[0] = ($event) => onKeyDown($event, $event.currentTarget))
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(col.items, (item, idx) => {
+					onScrollPassive: ($event) => onColumnScroll(i, $event.currentTarget)
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(renderItems(col), (item, idx) => {
 					return openBlock(), createElementBlock("div", {
 						key: idx,
 						class: "date-time-picker__scroller-item",
-						"data-selected": idx === currentIndexFor(col.key) ? "true" : void 0,
-						"aria-selected": idx === currentIndexFor(col.key),
+						"data-selected": isSelected(col.key, item) ? "true" : void 0,
+						"aria-selected": isSelected(col.key, item),
 						role: "option",
-						onClick: ($event) => onItemClick(columnRefs.value[i], idx)
-					}, toDisplayString(itemLabel(col.key, item)), 9, _hoisted_2);
+						onClick: ($event) => onItemClick(col.key, item)
+					}, toDisplayString(itemLabel(item)), 9, _hoisted_2);
 				}), 128))], 40, _hoisted_1);
 			}), 128))], 2);
 		};

package/dist/components/date-time-picker/DateTimePickerTimeScroller.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePickerTimeScroller.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePickerTimeScroller.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePickerTimeScroller.vue -->\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { CalendarDateTime } from '@internationalized/date'\n\nconst props = withDefaults(defineProps<{\n  modelValue: CalendarDateTime\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  class?: string\n}>(), {\n  granularity: 'minute',\n  hourCycle: 24,\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: CalendarDateTime]\n}>()\n\n// ─── Column data ─────────────────────────────────────────────────────────\n\nconst hours24 = Array.from({ length: 24 }, (_, i) => i)\nconst hours12 = [12, ...Array.from({ length: 11 }, (_, i) => i + 1)] // 12,1..11\nconst minutes = Array.from({ length: 60 }, (_, i) => i)\nconst seconds = Array.from({ length: 60 }, (_, i) => i)\nconst ampm = ['AM', 'PM']\n\nconst hourItems = computed(() =>\n  props.hourCycle === 12 ? hours12 : hours24,\n)\n\nconst columns = computed(() => {\n  const cols: Array<{ key: string; items: (number | string)[] }> = [\n    { key: 'hour', items: hourItems.value },\n    { key: 'minute', items: minutes },\n  ]\n  if (props.granularity === 'second') cols.push({ key: 'second', items: seconds })\n  if (props.hourCycle === 12) cols.push({ key: 'ampm', items: ampm })\n  return cols\n})\n\n// ─── Current index computation ───────────────────────────────────────────\n\nfunction currentIndexFor(key: string): number {\n  const v = props.modelValue\n  if (key === 'hour') {\n    if (props.hourCycle === 12) {\n      const h12 = v.hour % 12 === 0 ? 12 : v.hour % 12\n      return hours12.indexOf(h12)\n    }\n    return v.hour\n  }\n  if (key === 'minute') return v.minute\n  if (key === 'second') return v.second ?? 0\n  if (key === 'ampm') return v.hour >= 12 ? 1 : 0\n  return 0\n}\n\n// ─── Scroll-to-selected ──────────────────────────────────────────────────\n\nconst columnRefs = ref<HTMLElement[]>([])\n\nconst ITEM_H = 40 // 2.5rem at 16px base\n\nfunction scrollColumnToIndex(colEl: HTMLElement, index: number) {\n  colEl.scrollTop = index * ITEM_H\n}\n\nfunction syncScrollPositions() {\n  columns.value.forEach((col, i) => {\n    const el = columnRefs.value[i]\n    if (el) scrollColumnToIndex(el, currentIndexFor(col.key))\n  })\n}\n\nonMounted(() => nextTick(syncScrollPositions))\nwatch(() => props.modelValue, () => nextTick(syncScrollPositions))\n\n// ─── Scroll → value update ───────────────────────────────────────────────\n\nfunction onColumnScroll(key: string, colEl: HTMLElement) {\n  const idx = Math.round(colEl.scrollTop / ITEM_H)\n  const col = columns.value.find(c => c.key === key)!\n  const item = col.items[idx]\n  if (item === undefined) return\n\n  const v = props.modelValue\n  if (key === 'hour') {\n    let newHour: number\n    if (props.hourCycle === 12) {\n      const isPm = v.hour >= 12\n      const h12 = item as number\n      newHour = h12 === 12 ? (isPm ? 12 : 0) : isPm ? h12 + 12 : h12\n    } else {\n      newHour = item as number\n    }\n    emit('update:modelValue', v.set({ hour: newHour }))\n  } else if (key === 'minute') {\n    emit('update:modelValue', v.set({ minute: item as number }))\n  } else if (key === 'second') {\n    emit('update:modelValue', v.set({ second: item as number }))\n  } else if (key === 'ampm') {\n    const isPm = item === 'PM'\n    const currentPm = v.hour >= 12\n    if (isPm !== currentPm) {\n      emit('update:modelValue', v.set({ hour: isPm ? v.hour + 12 : v.hour - 12 }))\n    }\n  }\n}\n\n// ─── Keyboard navigation ─────────────────────────────────────────────────\n\nfunction onKeyDown(e: KeyboardEvent, colEl: HTMLElement) {\n  if (e.key === 'ArrowDown') {\n    e.preventDefault()\n    colEl.scrollTop += ITEM_H\n  } else if (e.key === 'ArrowUp') {\n    e.preventDefault()\n    colEl.scrollTop -= ITEM_H\n  }\n}\n\n// ─── Click-to-select ─────────────────────────────────────────────────────\n\nfunction onItemClick(colEl: HTMLElement, idx: number) {\n  colEl.scrollTo({ top: idx * ITEM_H, behavior: 'smooth' })\n}\n\n// ─── Label helpers ───────────────────────────────────────────────────────\n\nfunction columnLabel(key: string): string {\n  if (key === 'hour') return 'Hour'\n  if (key === 'minute') return 'Minute'\n  if (key === 'second') return 'Second'\n  return 'AM/PM'\n}\n\nfunction itemLabel(_key: string, item: number | string): string {\n  if (typeof item === 'string') return item\n  return String(item).padStart(2, '0')\n}\n\n// expose for testing\ndefineExpose({ columnRefs, columns, currentIndexFor })\n</script>\n\n<template>\n  <div\n    :class=\"['date-time-picker__scroller-wrap', props.class]\"\n    data-slot=\"time-scroller\"\n  >\n    <div\n      v-for=\"(col, i) in columns\"\n      :key=\"col.key\"\n      :ref=\"(el) => { if (el) columnRefs[i] = el as HTMLElement }\"\n      class=\"date-time-picker__scroller-column\"\n      :aria-label=\"columnLabel(col.key)\"\n      data-slot=\"scroller-column\"\n      role=\"listbox\"\n      tabindex=\"0\"\n      @scroll.passive=\"onColumnScroll(col.key, ($event.currentTarget as HTMLElement))\"\n      @keydown=\"onKeyDown($event, ($event.currentTarget as HTMLElement))\"\n    >\n      <div\n        v-for=\"(item, idx) in col.items\"\n        :key=\"idx\"\n        class=\"date-time-picker__scroller-item\"\n        :data-selected=\"idx === currentIndexFor(col.key) ? 'true' : undefined\"\n        :aria-selected=\"idx === currentIndexFor(col.key)\"\n        role=\"option\"\n        @click=\"onItemClick(columnRefs[i]!, idx)\"\n      >\n        {{ itemLabel(col.key, item) }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"DateTimePickerTimeScroller.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePickerTimeScroller.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePickerTimeScroller.vue -->\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\nimport { CalendarDateTime } from '@internationalized/date'\n\nconst props = withDefaults(defineProps<{\n  modelValue: CalendarDateTime\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  class?: string\n}>(), {\n  granularity: 'minute',\n  hourCycle: 24,\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: CalendarDateTime]\n}>()\n\n// ─── Column data ─────────────────────────────────────────────────────────\n\nconst hours24 = Array.from({ length: 24 }, (_, i) => i)\nconst hours12 = [12, ...Array.from({ length: 11 }, (_, i) => i + 1)] // 12,1..11\nconst minutes = Array.from({ length: 60 }, (_, i) => i)\nconst seconds = Array.from({ length: 60 }, (_, i) => i)\nconst ampm = ['AM', 'PM']\n\nconst hourItems = computed(() =>\n  props.hourCycle === 12 ? hours12 : hours24,\n)\n\ntype Column = { key: string; items: (number | string)[]; loop: boolean }\n\nconst columns = computed<Column[]>(() => {\n  const cols: Column[] = [\n    { key: 'hour', items: hourItems.value, loop: true },\n    { key: 'minute', items: minutes, loop: true },\n  ]\n  if (props.granularity === 'second') cols.push({ key: 'second', items: seconds, loop: true })\n  // AM/PM is a short, finite column — it does not loop.\n  if (props.hourCycle === 12) cols.push({ key: 'ampm', items: ampm, loop: false })\n  return cols\n})\n\n// ─── Infinite circular scroll ─────────────────────────────────────────────\n// Numeric columns repeat their list REPEAT times and start in the middle copy.\n// On scroll, whenever the position drifts out of the middle band we jump it\n// back by whole cycles — invisible because the content is identical — so the\n// wheel can be dragged endlessly in either direction.\n\n// Three copies is the minimum for a seamless loop: a buffer copy at each end\n// plus the middle copy the user actually sits in. More copies = needless DOM.\nconst REPEAT = 3\nconst ITEM_H = 40 // 2.5rem at 16px base\nconst columnRefs = ref<HTMLElement[]>([])\n\nfunction renderItems(col: Column): (number | string)[] {\n  if (!col.loop) return col.items\n  const out: (number | string)[] = []\n  for (let r = 0; r < REPEAT; r++) out.push(...col.items)\n  return out\n}\n\nfunction cycleHeight(col: Column): number {\n  return col.items.length * ITEM_H\n}\n\n// Keep the scroll position inside the inner copies [cycle, total-cycle); when it\n// drifts into the first or last buffer copy, jump it by (REPEAT-2) cycles. The\n// content is identical, so the jump is invisible and the wheel feels endless.\nfunction onColumnScroll(i: number, colEl: HTMLElement) {\n  const col = columns.value[i]\n  if (!col.loop) return\n  const cycle = cycleHeight(col)\n  const total = cycle * REPEAT\n  const recenter = (REPEAT - 2) * cycle\n  if (colEl.scrollTop < cycle) {\n    colEl.scrollTop += recenter\n  } else if (colEl.scrollTop >= total - cycle) {\n    colEl.scrollTop -= recenter\n  }\n}\n\nonMounted(() => {\n  columns.value.forEach((col, i) => {\n    const el = columnRefs.value[i]\n    if (el && col.loop) el.scrollTop = cycleHeight(col) * Math.floor(REPEAT / 2)\n  })\n})\n\n// ─── Selection (tap to select) ─────────────────────────────────────────────\n// Selection is by VALUE, so every repeated copy of the chosen number highlights.\n\nfunction isSelected(key: string, item: number | string): boolean {\n  const v = props.modelValue\n  if (key === 'hour') {\n    if (props.hourCycle === 12) {\n      const h12 = v.hour % 12 === 0 ? 12 : v.hour % 12\n      return item === h12\n    }\n    return item === v.hour\n  }\n  if (key === 'minute') return item === v.minute\n  if (key === 'second') return item === (v.second ?? 0)\n  if (key === 'ampm') return item === (v.hour >= 12 ? 'PM' : 'AM')\n  return false\n}\n\nfunction onItemClick(key: string, item: number | string) {\n  const v = props.modelValue\n  if (key === 'hour') {\n    let newHour: number\n    if (props.hourCycle === 12) {\n      const isPm = v.hour >= 12\n      const h12 = item as number\n      newHour = h12 === 12 ? (isPm ? 12 : 0) : isPm ? h12 + 12 : h12\n    } else {\n      newHour = item as number\n    }\n    emit('update:modelValue', v.set({ hour: newHour }))\n  } else if (key === 'minute') {\n    emit('update:modelValue', v.set({ minute: item as number }))\n  } else if (key === 'second') {\n    emit('update:modelValue', v.set({ second: item as number }))\n  } else if (key === 'ampm') {\n    const isPm = item === 'PM'\n    const currentPm = v.hour >= 12\n    if (isPm !== currentPm) {\n      emit('update:modelValue', v.set({ hour: isPm ? v.hour + 12 : v.hour - 12 }))\n    }\n  }\n}\n\n// ─── Label helpers ───────────────────────────────────────────────────────\n\nfunction columnLabel(key: string): string {\n  if (key === 'hour') return 'Hour'\n  if (key === 'minute') return 'Minute'\n  if (key === 'second') return 'Second'\n  return 'AM/PM'\n}\n\nfunction itemLabel(item: number | string): string {\n  if (typeof item === 'string') return item\n  return String(item).padStart(2, '0')\n}\n\n// expose for testing\ndefineExpose({ columnRefs, columns })\n</script>\n\n<template>\n  <div\n    :class=\"['date-time-picker__scroller-wrap', props.class]\"\n    data-slot=\"time-scroller\"\n  >\n    <div\n      v-for=\"(col, i) in columns\"\n      :key=\"col.key\"\n      :ref=\"(el) => { if (el) columnRefs[i] = el as HTMLElement }\"\n      class=\"date-time-picker__scroller-column\"\n      :aria-label=\"columnLabel(col.key)\"\n      data-slot=\"scroller-column\"\n      role=\"listbox\"\n      tabindex=\"0\"\n      @scroll.passive=\"onColumnScroll(i, ($event.currentTarget as HTMLElement))\"\n    >\n      <div\n        v-for=\"(item, idx) in renderItems(col)\"\n        :key=\"idx\"\n        class=\"date-time-picker__scroller-item\"\n        :data-selected=\"isSelected(col.key, item) ? 'true' : undefined\"\n        :aria-selected=\"isSelected(col.key, item)\"\n        role=\"option\"\n        @click=\"onItemClick(col.key, item)\"\n      >\n        {{ itemLabel(item) }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/drawer/DrawerClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerClose.js","names":[],"sources":["../../../src/components/drawer/DrawerClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose, Primitive } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useDrawerInject } from './drawer.context'\n\nconst props = withDefaults(defineProps<{\n  asChild?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n})\n\nconst ctx = useDrawerInject()\nconst styles = drawerVariants()\n</script>\n\n<template>\n  <!-- dock mode: close open state directly (no Reka dialog context) -->\n  <Primitive\n    v-if=\"ctx.dock.value\"\n    :as-child=\"props.asChild\"\n    as=\"button\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n    @click=\"ctx.closeDock()\"\n  >\n    <slot />\n  </Primitive>\n\n  <!-- default / inline / hideBackdrop modes: Reka manages close -->\n  <DialogClose\n    v-else\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DrawerClose.js","names":[],"sources":["../../../src/components/drawer/DrawerClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose, Primitive } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useDrawerInject } from './drawer.context'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n})\n\nconst ctx = useDrawerInject()\nconst styles = drawerVariants()\n</script>\n\n<template>\n  <!-- dock mode: close open state directly (no Reka dialog context) -->\n  <Primitive\n    v-if=\"ctx.dock.value\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as ?? 'button'\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n    @click=\"ctx.closeDock()\"\n  >\n    <slot />\n  </Primitive>\n\n  <!-- default / inline / hideBackdrop modes: Reka manages close -->\n  <DialogClose\n    v-else\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/drawer/DrawerClose.vue_vue_type_script_setup_true_lang.js

@@ -7,6 +7,7 @@ import { DialogClose, Primitive } from "reka-ui";
 var DrawerClose_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "DrawerClose",
 	props: {
+		as: {},
 		asChild: {
 			type: Boolean,
 			default: false
@@ -21,20 +22,29 @@ var DrawerClose_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			return unref(ctx).dock.value ? (openBlock(), createBlock(unref(Primitive), {
 				key: 0,
 				"as-child": props.asChild,
-				as: "button",
+				as: props.as ?? "button",
 				class: normalizeClass(unref(composeClassName)(unref(styles).closeTrigger(), props.class)),
 				onClick: _cache[0] || (_cache[0] = ($event) => unref(ctx).closeDock())
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["as-child", "class"])) : (openBlock(), createBlock(unref(DialogClose), {
+			}, 8, [
+				"as-child",
+				"as",
+				"class"
+			])) : (openBlock(), createBlock(unref(DialogClose), {
 				key: 1,
+				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/drawer/DrawerClose.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerClose.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/drawer/DrawerClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose, Primitive } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useDrawerInject } from './drawer.context'\n\nconst props = withDefaults(defineProps<{\n  asChild?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n})\n\nconst ctx = useDrawerInject()\nconst styles = drawerVariants()\n</script>\n\n<template>\n  <!-- dock mode: close open state directly (no Reka dialog context) -->\n  <Primitive\n    v-if=\"ctx.dock.value\"\n    :as-child=\"props.asChild\"\n    as=\"button\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n    @click=\"ctx.closeDock()\"\n  >\n    <slot />\n  </Primitive>\n\n  <!-- default / inline / hideBackdrop modes: Reka manages close -->\n  <DialogClose\n    v-else\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAOd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,SAAS,gBAAe;;UAMpB,MAAA,IAAG,CAAC,KAAK,SAAA,WAAA,EADjB,YAQY,MAAA,UAAA,EAAA;;IANT,YAAU,MAAM;IACjB,IAAG;IACF,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,cAAY,EAAI,MAAM,MAAK,CAAA;IAC1D,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,IAAG,CAAC,WAAS;;2BAEb,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;iDAIV,YAMc,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":"DrawerClose.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/drawer/DrawerClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose, Primitive } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useDrawerInject } from './drawer.context'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n})\n\nconst ctx = useDrawerInject()\nconst styles = drawerVariants()\n</script>\n\n<template>\n  <!-- dock mode: close open state directly (no Reka dialog context) -->\n  <Primitive\n    v-if=\"ctx.dock.value\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as ?? 'button'\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n    @click=\"ctx.closeDock()\"\n  >\n    <slot />\n  </Primitive>\n\n  <!-- default / inline / hideBackdrop modes: Reka manages close -->\n  <DialogClose\n    v-else\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":";;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAQd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,SAAS,gBAAe;;UAMpB,MAAA,IAAG,CAAC,KAAK,SAAA,WAAA,EADjB,YAQY,MAAA,UAAA,EAAA;;IANT,YAAU,MAAM;IAChB,IAAI,MAAM,MAAE;IACZ,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,cAAY,EAAI,MAAM,MAAK,CAAA;IAC1D,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,IAAG,CAAC,WAAS;;2BAEb,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;;;;uBAIV,YAOc,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/drawer/DrawerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.js","names":[],"sources":["../../../src/components/drawer/DrawerContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DialogPortal, DialogContent } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useDrawerInject } from './drawer.context'\nimport DrawerOverlay from './DrawerOverlay.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\nconst ctx = useDrawerInject()\nconst styles = drawerVariants()\n\nconst isHorizontal = computed(() =>\n  ctx.placement.value === 'left' || ctx.placement.value === 'right',\n)\nconst dockTransitionName = computed(() =>\n  isHorizontal.value ? 'drawer-dock-h' : 'drawer-dock-v',\n)\n\nfunction handlePointerDownOutside(event: Event) {\n  if (ctx.hideBackdrop.value) {\n    // Prevent close — user must use the close icon\n    event.preventDefault()\n    return\n  }\n  emit('pointer-down-outside', event)\n}\n\nfunction handleInteractOutside(event: Event) {\n  if (ctx.hideBackdrop.value) {\n    // Prevent close — user must use the close icon\n    event.preventDefault()\n    return\n  }\n  emit('interact-outside', event)\n}\n\nfunction handleEscapeKeyDown(event: KeyboardEvent) {\n  if (ctx.hideBackdrop.value) {\n    // Prevent close — user must use the close icon\n    event.preventDefault()\n    return\n  }\n  emit('escape-key-down', event)\n}\n</script>\n\n<template>\n  <!--\n    dock mode: DOM-flow panel that pushes adjacent content aside.\n    The parent Drawer renders a flex container; this panel is a flex item.\n    Requires DrawerMain to wrap the main content area.\n  -->\n  <template v-if=\"ctx.dock.value\">\n    <Transition :name=\"dockTransitionName\">\n      <div\n        v-show=\"ctx.dockOpen.value\"\n        :class=\"composeClassName(styles.dialog({ placement: ctx.placement.value, dock: true }), props.class)\"\n        :data-placement=\"ctx.placement.value\"\n        :data-state=\"ctx.dockOpen.value ? 'open' : 'closed'\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </template>\n\n  <!--\n    inline mode: renders position:absolute within the nearest positioned container.\n    The parent element must have position:relative and overflow:hidden.\n  -->\n  <template v-else-if=\"ctx.inline.value\">\n    <DialogContent\n      :class=\"composeClassName(styles.dialog({ placement: ctx.placement.value, inline: true }), props.class)\"\n      :data-placement=\"ctx.placement.value\"\n      @pointer-down-outside=\"handlePointerDownOutside\"\n      @interact-outside=\"handleInteractOutside\"\n      @escape-key-down=\"handleEscapeKeyDown\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <slot />\n    </DialogContent>\n  </template>\n\n  <!-- default mode: teleported to <body>, optional backdrop -->\n  <DialogPortal v-else>\n    <DrawerOverlay v-if=\"!ctx.hideBackdrop.value\" />\n    <DialogContent\n      :class=\"composeClassName(styles.dialog({ placement: ctx.placement.value }), props.class)\"\n      :data-placement=\"ctx.placement.value\"\n      @pointer-down-outside=\"handlePointerDownOutside\"\n      @interact-outside=\"handleInteractOutside\"\n      @escape-key-down=\"handleEscapeKeyDown\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <slot />\n    </DialogContent>\n  </DialogPortal>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DrawerContent.js","names":[],"sources":["../../../src/components/drawer/DrawerContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DialogPortal, DialogContent } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useDrawerInject } from './drawer.context'\nimport DrawerOverlay from './DrawerOverlay.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\nconst ctx = useDrawerInject()\nconst styles = drawerVariants()\n\nconst isHorizontal = computed(() =>\n  ctx.placement.value === 'left' || ctx.placement.value === 'right',\n)\nconst dockTransitionName = computed(() =>\n  isHorizontal.value ? 'drawer-dock-h' : 'drawer-dock-v',\n)\n\nfunction handlePointerDownOutside(event: Event) {\n  if (ctx.hideBackdrop.value) {\n    // Prevent close — user must use the close icon\n    event.preventDefault()\n    return\n  }\n  emit('pointer-down-outside', event)\n}\n\nfunction handleInteractOutside(event: Event) {\n  if (ctx.hideBackdrop.value) {\n    // Prevent close — user must use the close icon\n    event.preventDefault()\n    return\n  }\n  emit('interact-outside', event)\n}\n\nfunction handleEscapeKeyDown(event: KeyboardEvent) {\n  if (ctx.hideBackdrop.value) {\n    // Prevent close — user must use the close icon\n    event.preventDefault()\n    return\n  }\n  emit('escape-key-down', event)\n}\n</script>\n\n<template>\n  <!--\n    dock mode: DOM-flow panel that pushes adjacent content aside.\n    The parent Drawer renders a flex container; this panel is a flex item.\n    Requires DrawerMain to wrap the main content area.\n  -->\n  <template v-if=\"ctx.dock.value\">\n    <Transition :name=\"dockTransitionName\">\n      <div\n        v-show=\"ctx.dockOpen.value\"\n        :class=\"composeClassName(styles.dialog({ placement: ctx.placement.value, dock: true }), props.class)\"\n        :data-placement=\"ctx.placement.value\"\n        :data-state=\"ctx.dockOpen.value ? 'open' : 'closed'\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </template>\n\n  <!--\n    inline mode: renders position:absolute within the nearest positioned container.\n    The parent element must have position:relative and overflow:hidden.\n  -->\n  <template v-else-if=\"ctx.inline.value\">\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.dialog({ placement: ctx.placement.value, inline: true }), props.class)\"\n      :data-placement=\"ctx.placement.value\"\n      @pointer-down-outside=\"handlePointerDownOutside\"\n      @interact-outside=\"handleInteractOutside\"\n      @escape-key-down=\"handleEscapeKeyDown\"\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      <slot />\n    </DialogContent>\n  </template>\n\n  <!-- default mode: teleported to <body>, optional backdrop -->\n  <DialogPortal v-else :to=\"props.to\" :disabled=\"props.disabled\" :defer=\"props.defer\" :force-mount=\"props.forceMount\">\n    <DrawerOverlay v-if=\"!ctx.hideBackdrop.value\" />\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.dialog({ placement: ctx.placement.value }), props.class)\"\n      :data-placement=\"ctx.placement.value\"\n      @pointer-down-outside=\"handlePointerDownOutside\"\n      @interact-outside=\"handleInteractOutside\"\n      @escape-key-down=\"handleEscapeKeyDown\"\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      <slot />\n    </DialogContent>\n  </DialogPortal>\n</template>\n"],"mappings":""}

package/dist/components/drawer/DrawerContent.vue_vue_type_script_setup_true_lang.js

@@ -8,13 +8,38 @@ import { DialogContent, DialogPortal } from "reka-ui";
 var _hoisted_1 = ["data-placement", "data-state"];
 var DrawerContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "DrawerContent",
-	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;
@@ -60,6 +85,10 @@ var DrawerContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				_: 3
 			}, 8, ["name"])) : unref(ctx).inline.value ? (openBlock(), createBlock(unref(DialogContent), {
 				key: 1,
+				as: props.as,
+				"as-child": props.asChild,
+				"force-mount": props.forceMount,
+				"disable-outside-pointer-events": props.disableOutsidePointerEvents,
 				class: normalizeClass(unref(composeClassName)(unref(styles).dialog({
 					placement: unref(ctx).placement.value,
 					inline: true
@@ -69,25 +98,56 @@ var DrawerContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				onInteractOutside: handleInteractOutside,
 				onEscapeKeyDown: handleEscapeKeyDown,
 				onOpenAutoFocus: _cache[0] || (_cache[0] = ($event) => emit("open-auto-focus", $event)),
-				onCloseAutoFocus: _cache[1] || (_cache[1] = ($event) => emit("close-auto-focus", $event))
+				onCloseAutoFocus: _cache[1] || (_cache[1] = ($event) => emit("close-auto-focus", $event)),
+				onFocusOutside: _cache[2] || (_cache[2] = ($event) => emit("focus-outside", $event))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["class", "data-placement"])) : (openBlock(), createBlock(unref(DialogPortal), { key: 2 }, {
+			}, 8, [
+				"as",
+				"as-child",
+				"force-mount",
+				"disable-outside-pointer-events",
+				"class",
+				"data-placement"
+			])) : (openBlock(), createBlock(unref(DialogPortal), {
+				key: 2,
+				to: props.to,
+				disabled: props.disabled,
+				defer: props.defer,
+				"force-mount": props.forceMount
+			}, {
 				default: withCtx(() => [!unref(ctx).hideBackdrop.value ? (openBlock(), createBlock(DrawerOverlay_default, { key: 0 })) : createCommentVNode("", true), 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).dialog({ placement: unref(ctx).placement.value }), props.class)),
 					"data-placement": unref(ctx).placement.value,
 					onPointerDownOutside: handlePointerDownOutside,
 					onInteractOutside: handleInteractOutside,
 					onEscapeKeyDown: handleEscapeKeyDown,
-					onOpenAutoFocus: _cache[2] || (_cache[2] = ($event) => emit("open-auto-focus", $event)),
-					onCloseAutoFocus: _cache[3] || (_cache[3] = ($event) => emit("close-auto-focus", $event))
+					onOpenAutoFocus: _cache[3] || (_cache[3] = ($event) => emit("open-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(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
-				}, 8, ["class", "data-placement"])]),
+				}, 8, [
+					"as",
+					"as-child",
+					"force-mount",
+					"disable-outside-pointer-events",
+					"class",
+					"data-placement"
+				])]),
 				_: 3
-			}));
+			}, 8, [
+				"to",
+				"disabled",
+				"defer",
+				"force-mount"
+			]));
 		};
 	}
 });

package/dist/components/drawer/DrawerContent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/drawer/DrawerContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DialogPortal, DialogContent } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useDrawerInject } from './drawer.context'\nimport DrawerOverlay from './DrawerOverlay.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\nconst ctx = useDrawerInject()\nconst styles = drawerVariants()\n\nconst isHorizontal = computed(() =>\n  ctx.placement.value === 'left' || ctx.placement.value === 'right',\n)\nconst dockTransitionName = computed(() =>\n  isHorizontal.value ? 'drawer-dock-h' : 'drawer-dock-v',\n)\n\nfunction handlePointerDownOutside(event: Event) {\n  if (ctx.hideBackdrop.value) {\n    // Prevent close — user must use the close icon\n    event.preventDefault()\n    return\n  }\n  emit('pointer-down-outside', event)\n}\n\nfunction handleInteractOutside(event: Event) {\n  if (ctx.hideBackdrop.value) {\n    // Prevent close — user must use the close icon\n    event.preventDefault()\n    return\n  }\n  emit('interact-outside', event)\n}\n\nfunction handleEscapeKeyDown(event: KeyboardEvent) {\n  if (ctx.hideBackdrop.value) {\n    // Prevent close — user must use the close icon\n    event.preventDefault()\n    return\n  }\n  emit('escape-key-down', event)\n}\n</script>\n\n<template>\n  <!--\n    dock mode: DOM-flow panel that pushes adjacent content aside.\n    The parent Drawer renders a flex container; this panel is a flex item.\n    Requires DrawerMain to wrap the main content area.\n  -->\n  <template v-if=\"ctx.dock.value\">\n    <Transition :name=\"dockTransitionName\">\n      <div\n        v-show=\"ctx.dockOpen.value\"\n        :class=\"composeClassName(styles.dialog({ placement: ctx.placement.value, dock: true }), props.class)\"\n        :data-placement=\"ctx.placement.value\"\n        :data-state=\"ctx.dockOpen.value ? 'open' : 'closed'\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </template>\n\n  <!--\n    inline mode: renders position:absolute within the nearest positioned container.\n    The parent element must have position:relative and overflow:hidden.\n  -->\n  <template v-else-if=\"ctx.inline.value\">\n    <DialogContent\n      :class=\"composeClassName(styles.dialog({ placement: ctx.placement.value, inline: true }), props.class)\"\n      :data-placement=\"ctx.placement.value\"\n      @pointer-down-outside=\"handlePointerDownOutside\"\n      @interact-outside=\"handleInteractOutside\"\n      @escape-key-down=\"handleEscapeKeyDown\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <slot />\n    </DialogContent>\n  </template>\n\n  <!-- default mode: teleported to <body>, optional backdrop -->\n  <DialogPortal v-else>\n    <DrawerOverlay v-if=\"!ctx.hideBackdrop.value\" />\n    <DialogContent\n      :class=\"composeClassName(styles.dialog({ placement: ctx.placement.value }), props.class)\"\n      :data-placement=\"ctx.placement.value\"\n      @pointer-down-outside=\"handlePointerDownOutside\"\n      @interact-outside=\"handleInteractOutside\"\n      @escape-key-down=\"handleEscapeKeyDown\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <slot />\n    </DialogContent>\n  </DialogPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAId,MAAM,OAAO;EAQb,MAAM,MAAM,iBAAgB;EAC5B,MAAM,SAAS,gBAAe;EAE9B,MAAM,eAAe,eACnB,IAAI,UAAU,UAAU,UAAU,IAAI,UAAU,UAAU,QAC5D;EACA,MAAM,qBAAqB,eACzB,aAAa,QAAQ,kBAAkB,gBACzC;EAEA,SAAS,yBAAyB,OAAc;AAC9C,OAAI,IAAI,aAAa,OAAO;AAE1B,UAAM,gBAAe;AACrB;;AAEF,QAAK,wBAAwB,MAAK;;EAGpC,SAAS,sBAAsB,OAAc;AAC3C,OAAI,IAAI,aAAa,OAAO;AAE1B,UAAM,gBAAe;AACrB;;AAEF,QAAK,oBAAoB,MAAK;;EAGhC,SAAS,oBAAoB,OAAsB;AACjD,OAAI,IAAI,aAAa,OAAO;AAE1B,UAAM,gBAAe;AACrB;;AAEF,QAAK,mBAAmB,MAAK;;;UAUb,MAAA,IAAG,CAAC,KAAK,SAAA,WAAA,EACvB,YASa,YAAA;;IATA,MAAM,mBAAA;;2BAQX,CAAA,eAPN,mBAOM,OAAA;KALH,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAM;MAAA,WAAc,MAAA,IAAG,CAAC,UAAU;MAAK,MAAA;MAAA,CAAA,EAAiB,MAAM,MAAK,CAAA;KAClG,kBAAgB,MAAA,IAAG,CAAC,UAAU;KAC9B,cAAY,MAAA,IAAG,CAAC,SAAS,QAAK,SAAA;QAE/B,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA,EAAA,CAAA,CAAA,OALA,MAAA,IAAG,CAAC,SAAS,MAAK,CAAA,CAAA,CAAA,CAAA;;sBAcX,MAAA,IAAG,CAAC,OAAO,SAAA,WAAA,EAC9B,YAUgB,MAAA,cAAA,EAAA;;IATb,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAM;KAAA,WAAc,MAAA,IAAG,CAAC,UAAU;KAAK,QAAA;KAAA,CAAA,EAAmB,MAAM,MAAK,CAAA;IACpG,kBAAgB,MAAA,IAAG,CAAC,UAAU;IAC9B,sBAAsB;IACtB,mBAAkB;IAClB,iBAAiB;IACjB,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;IAC/C,kBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;;2BAE1C,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;uDAKZ,YAae,MAAA,aAAA,EAAA,EAAA,KAAA,GAAA,EAAA;2BAZmC,CAAA,CAA1B,MAAA,IAAG,CAAC,aAAa,SAAA,WAAA,EAAvC,YAAgD,uBAAA,EAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,EAChD,YAUgB,MAAA,cAAA,EAAA;KATb,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAM,EAAA,WAAc,MAAA,IAAG,CAAC,UAAU,OAAK,CAAA,EAAK,MAAM,MAAK,CAAA;KACtF,kBAAgB,MAAA,IAAG,CAAC,UAAU;KAC9B,sBAAsB;KACtB,mBAAkB;KAClB,iBAAiB;KACjB,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;KAC/C,kBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;;4BAE1C,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"DrawerContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/drawer/DrawerContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DialogPortal, DialogContent } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useDrawerInject } from './drawer.context'\nimport DrawerOverlay from './DrawerOverlay.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\nconst ctx = useDrawerInject()\nconst styles = drawerVariants()\n\nconst isHorizontal = computed(() =>\n  ctx.placement.value === 'left' || ctx.placement.value === 'right',\n)\nconst dockTransitionName = computed(() =>\n  isHorizontal.value ? 'drawer-dock-h' : 'drawer-dock-v',\n)\n\nfunction handlePointerDownOutside(event: Event) {\n  if (ctx.hideBackdrop.value) {\n    // Prevent close — user must use the close icon\n    event.preventDefault()\n    return\n  }\n  emit('pointer-down-outside', event)\n}\n\nfunction handleInteractOutside(event: Event) {\n  if (ctx.hideBackdrop.value) {\n    // Prevent close — user must use the close icon\n    event.preventDefault()\n    return\n  }\n  emit('interact-outside', event)\n}\n\nfunction handleEscapeKeyDown(event: KeyboardEvent) {\n  if (ctx.hideBackdrop.value) {\n    // Prevent close — user must use the close icon\n    event.preventDefault()\n    return\n  }\n  emit('escape-key-down', event)\n}\n</script>\n\n<template>\n  <!--\n    dock mode: DOM-flow panel that pushes adjacent content aside.\n    The parent Drawer renders a flex container; this panel is a flex item.\n    Requires DrawerMain to wrap the main content area.\n  -->\n  <template v-if=\"ctx.dock.value\">\n    <Transition :name=\"dockTransitionName\">\n      <div\n        v-show=\"ctx.dockOpen.value\"\n        :class=\"composeClassName(styles.dialog({ placement: ctx.placement.value, dock: true }), props.class)\"\n        :data-placement=\"ctx.placement.value\"\n        :data-state=\"ctx.dockOpen.value ? 'open' : 'closed'\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </template>\n\n  <!--\n    inline mode: renders position:absolute within the nearest positioned container.\n    The parent element must have position:relative and overflow:hidden.\n  -->\n  <template v-else-if=\"ctx.inline.value\">\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.dialog({ placement: ctx.placement.value, inline: true }), props.class)\"\n      :data-placement=\"ctx.placement.value\"\n      @pointer-down-outside=\"handlePointerDownOutside\"\n      @interact-outside=\"handleInteractOutside\"\n      @escape-key-down=\"handleEscapeKeyDown\"\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      <slot />\n    </DialogContent>\n  </template>\n\n  <!-- default mode: teleported to <body>, optional backdrop -->\n  <DialogPortal v-else :to=\"props.to\" :disabled=\"props.disabled\" :defer=\"props.defer\" :force-mount=\"props.forceMount\">\n    <DrawerOverlay v-if=\"!ctx.hideBackdrop.value\" />\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.dialog({ placement: ctx.placement.value }), props.class)\"\n      :data-placement=\"ctx.placement.value\"\n      @pointer-down-outside=\"handlePointerDownOutside\"\n      @interact-outside=\"handleInteractOutside\"\n      @escape-key-down=\"handleEscapeKeyDown\"\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      <slot />\n    </DialogContent>\n  </DialogPortal>\n</template>\n"],"mappings":"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"}

package/dist/components/drawer/DrawerOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerOverlay.js","names":[],"sources":["../../../src/components/drawer/DrawerOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogOverlay } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\n\nconst styles = drawerVariants()\n</script>\n\n<template>\n  <DialogOverlay :class=\"styles.backdrop()\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"DrawerOverlay.js","names":[],"sources":["../../../src/components/drawer/DrawerOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogOverlay } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\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 styles = drawerVariants()\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(), props.class)\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/drawer/DrawerOverlay.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,37 @@
+import { composeClassName } from "../../utils/composeClassName.js";
 import { drawerVariants } from "../../packages/styles/src/components/drawer/drawer.styles.js";
 import { createBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
 import { DialogOverlay } from "reka-ui";
 //#region src/components/drawer/DrawerOverlay.vue?vue&type=script&setup=true&lang.ts
 var DrawerOverlay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "DrawerOverlay",
+	props: {
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		forceMount: {
+			type: Boolean,
+			default: false
+		},
+		class: {}
+	},
 	setup(__props) {
+		const props = __props;
 		const styles = drawerVariants();
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(DialogOverlay), { class: normalizeClass(unref(styles).backdrop()) }, null, 8, ["class"]);
+			return openBlock(), createBlock(unref(DialogOverlay), {
+				as: props.as,
+				"as-child": props.asChild,
+				"force-mount": props.forceMount,
+				class: normalizeClass(unref(composeClassName)(unref(styles).backdrop(), props.class))
+			}, null, 8, [
+				"as",
+				"as-child",
+				"force-mount",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/drawer/DrawerOverlay.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerOverlay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/drawer/DrawerOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogOverlay } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\n\nconst styles = drawerVariants()\n</script>\n\n<template>\n  <DialogOverlay :class=\"styles.backdrop()\" />\n</template>\n"],"mappings":";;;;;;;EAIA,MAAM,SAAS,gBAAe;;uBAI5B,YAA4C,MAAA,cAAA,EAAA,EAA5B,OAAK,eAAE,MAAA,OAAM,CAAC,UAAQ,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA"}
+{"version":3,"file":"DrawerOverlay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/drawer/DrawerOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogOverlay } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\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 styles = drawerVariants()\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(), props.class)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAUd,MAAM,SAAS,gBAAe;;uBAI5B,YAKE,MAAA,cAAA,EAAA;IAJC,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,eAAa,MAAM;IACnB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,UAAQ,EAAI,MAAM,MAAK,CAAA"}

package/dist/components/drawer/DrawerTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerTitle.js","names":[],"sources":["../../../src/components/drawer/DrawerTitle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTitle } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  class?: string\n}>(), {\n  as: 'h2',\n})\n\nconst styles = drawerVariants()\n</script>\n\n<template>\n  <DialogTitle\n    :as=\"props.as\"\n    :class=\"composeClassName(styles.heading(), props.class)\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DrawerTitle.js","names":[],"sources":["../../../src/components/drawer/DrawerTitle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTitle, Primitive } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useDrawerInject } from './drawer.context'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  as: 'h2',\n  asChild: false,\n})\n\nconst ctx = useDrawerInject()\nconst styles = drawerVariants()\n</script>\n\n<template>\n  <!-- dock mode: no DialogRoot context, render a plain heading -->\n  <Primitive\n    v-if=\"ctx.dock.value\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.heading(), props.class)\"\n  >\n    <slot />\n  </Primitive>\n\n  <!-- default / inline / hideBackdrop modes: Reka provides accessible title -->\n  <DialogTitle\n    v-else\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.heading(), props.class)\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"],"mappings":""}

package/dist/components/drawer/DrawerTitle.vue_vue_type_script_setup_true_lang.js

@@ -1,25 +1,49 @@
 import { composeClassName } from "../../utils/composeClassName.js";
 import { drawerVariants } from "../../packages/styles/src/components/drawer/drawer.styles.js";
+import { useDrawerInject } from "./drawer.context.js";
 import { createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
-import { DialogTitle } from "reka-ui";
+import { DialogTitle, Primitive } from "reka-ui";
 //#region src/components/drawer/DrawerTitle.vue?vue&type=script&setup=true&lang.ts
 var DrawerTitle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "DrawerTitle",
 	props: {
 		as: { default: "h2" },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
 		class: {}
 	},
 	setup(__props) {
 		const props = __props;
+		const ctx = useDrawerInject();
 		const styles = drawerVariants();
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(DialogTitle), {
+			return unref(ctx).dock.value ? (openBlock(), createBlock(unref(Primitive), {
+				key: 0,
 				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(unref(styles).heading(), props.class))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["as", "class"]);
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			])) : (openBlock(), createBlock(unref(DialogTitle), {
+				key: 1,
+				as: props.as,
+				"as-child": props.asChild,
+				class: normalizeClass(unref(composeClassName)(unref(styles).heading(), props.class))
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			]));
 		};
 	}
 });

package/dist/components/drawer/DrawerTitle.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerTitle.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/drawer/DrawerTitle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTitle } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  class?: string\n}>(), {\n  as: 'h2',\n})\n\nconst styles = drawerVariants()\n</script>\n\n<template>\n  <DialogTitle\n    :as=\"props.as\"\n    :class=\"composeClassName(styles.heading(), props.class)\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"],"mappings":";;;;;;;;;;;;EAKA,MAAM,QAAQ;EAOd,MAAM,SAAS,gBAAe;;uBAI5B,YAKc,MAAA,YAAA,EAAA;IAJX,IAAI,MAAM;IACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,SAAO,EAAI,MAAM,MAAK,CAAA;;2BAE9C,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"DrawerTitle.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/drawer/DrawerTitle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTitle, Primitive } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useDrawerInject } from './drawer.context'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  as: 'h2',\n  asChild: false,\n})\n\nconst ctx = useDrawerInject()\nconst styles = drawerVariants()\n</script>\n\n<template>\n  <!-- dock mode: no DialogRoot context, render a plain heading -->\n  <Primitive\n    v-if=\"ctx.dock.value\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.heading(), props.class)\"\n  >\n    <slot />\n  </Primitive>\n\n  <!-- default / inline / hideBackdrop modes: Reka provides accessible title -->\n  <DialogTitle\n    v-else\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.heading(), props.class)\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EASd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,SAAS,gBAAe;;UAMpB,MAAA,IAAG,CAAC,KAAK,SAAA,WAAA,EADjB,YAOY,MAAA,UAAA,EAAA;;IALT,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,SAAO,EAAI,MAAM,MAAK,CAAA;;2BAE9C,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;;;;uBAIV,YAOc,MAAA,YAAA,EAAA;;IALX,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,SAAO,EAAI,MAAM,MAAK,CAAA;;2BAE9C,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/drawer/DrawerTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerTrigger.js","names":[],"sources":["../../../src/components/drawer/DrawerTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTrigger, Primitive } from 'reka-ui'\nimport { useDrawerInject } from './drawer.context'\n\nconst props = withDefaults(defineProps<{\n  asChild?: boolean\n}>(), {\n  asChild: false,\n})\n\nconst ctx = useDrawerInject()\n</script>\n\n<template>\n  <!-- dock mode: toggle open state directly (no Reka dialog context) -->\n  <Primitive\n    v-if=\"ctx.dock.value\"\n    :as-child=\"props.asChild\"\n    as=\"button\"\n    @click=\"ctx.toggleDock()\"\n  >\n    <slot />\n  </Primitive>\n\n  <!-- default / inline / hideBackdrop modes: Reka manages open state -->\n  <DialogTrigger v-else :as-child=\"props.asChild\">\n    <slot />\n  </DialogTrigger>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DrawerTrigger.js","names":[],"sources":["../../../src/components/drawer/DrawerTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTrigger, Primitive } from 'reka-ui'\nimport { useDrawerInject } from './drawer.context'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n}>(), {\n  asChild: false,\n})\n\nconst ctx = useDrawerInject()\n</script>\n\n<template>\n  <!-- dock mode: toggle open state directly (no Reka dialog context) -->\n  <Primitive\n    v-if=\"ctx.dock.value\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as ?? 'button'\"\n    @click=\"ctx.toggleDock()\"\n  >\n    <slot />\n  </Primitive>\n\n  <!-- default / inline / hideBackdrop modes: Reka manages open state -->\n  <DialogTrigger v-else :as=\"props.as\" :as-child=\"props.asChild\">\n    <slot />\n  </DialogTrigger>\n</template>\n"],"mappings":""}