@auronui/vue 1.0.20 → 1.0.22

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

@@ -19,10 +19,27 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		textValue: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		indicatorAs: { default: void 0 },
+		indicatorAsChild: {
+			type: Boolean,
+			default: false
+		}
 	},
-	setup(__props) {
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const slots = useSlots();
 		const ctx = useAutocompleteInject();
 		function extractText(nodes) {
@@ -45,6 +62,7 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			ctx.unregisterItem(props.value);
 		});
 		function handleSelect(event) {
+			emit("select", event);
 			if (ctx.multiple.value) {
 				event.preventDefault();
 				ctx.onMultipleSelect(props.value);
@@ -53,8 +71,10 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(AutocompleteItem), {
 				value: displayText.value,
-				"text-value": displayText.value,
-				disabled: props.isDisabled,
+				"text-value": props.textValue ?? displayText.value,
+				disabled: props.disabled ?? props.isDisabled,
+				as: props.as,
+				"as-child": props.asChild,
 				"data-item-value": props.value,
 				"data-selected": isChecked.value || void 0,
 				class: "list-box-item list-box-item--default",
@@ -66,6 +86,8 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default")]),
 					!unref(ctx).multiple.value ? (openBlock(), createBlock(unref(ComboboxItemIndicator), {
 						key: 0,
+						as: props.indicatorAs,
+						"as-child": props.indicatorAsChild,
 						class: "list-box-item__indicator",
 						"data-slot": "list-box-item-indicator"
 					}, {
@@ -83,7 +105,7 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 							"aria-hidden": "true"
 						}, [createElementVNode("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					})) : isChecked.value ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
+					}, 8, ["as", "as-child"])) : isChecked.value ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						width: "12",
 						height: "12",
@@ -103,6 +125,8 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				"value",
 				"text-value",
 				"disabled",
+				"as",
+				"as-child",
 				"data-item-value",
 				"data-selected"
 			]);

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

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

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { AvatarRoot, AvatarImage, AvatarFallback } from 'reka-ui'\nimport { avatarVariants, type AvatarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useAvatarGroupInject } from './avatar-group.context'\n\nconst props = withDefaults(defineProps<{\n  src?: string\n  alt?: string\n  name?: string\n  size?: AvatarVariants['size']\n  color?: AvatarVariants['color']\n  variant?: AvatarVariants['variant']\n  isBordered?: boolean\n  isDisabled?: boolean\n  showFallback?: boolean\n  class?: ClassValue\n  /** Per-slot class name overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    image: ClassValue\n    fallback: ClassValue\n  }>\n}>(), {\n  isBordered: false,\n  isDisabled: false,\n  showFallback: false,\n})\n\n// Inject AvatarGroup context with ref-based fallbacks (mirrors Button.vue pattern)\nconst groupCtx = useAvatarGroupInject({\n  size: ref('md'),\n  isBordered: ref(false),\n  isDisabled: ref(false),\n  isGrid: ref(false),\n  isInGroup: ref(false),\n})\n\n// Prop precedence rules (matching ButtonGroup D-13):\n// - group disabled ALWAYS wins over child prop\n// - other props: child prop wins over group value (child ?? group)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\nconst finalIsBordered = computed(() => props.isBordered || groupCtx.isBordered.value)\nconst isDisabled = computed(() => groupCtx.isDisabled.value || props.isDisabled)\nconst isInGroup = computed(() => groupCtx.isInGroup.value)\n\n// Compute initials from name: first letter of up to 2 words\nconst initials = computed(() => {\n  if (!props.name) return ''\n  const parts = props.name.trim().split(/\\s+/)\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n})\n\nconst slotFns = computed(() =>\n  avatarVariants({\n    size: finalSize.value,\n    color: props.color,\n    variant: props.variant,\n  })\n)\n\n// Border class applied manually since the styles don't have isBordered variant\nconst borderedClass = computed(() =>\n  finalIsBordered.value ? 'ring-2 ring-offset-2 ring-default' : undefined\n)\n\n// InGroup class for negative margin overlap\nconst inGroupClass = computed(() =>\n  isInGroup.value ? '-me-2' : undefined\n)\n</script>\n\n<template>\n  <AvatarRoot\n    :class=\"composeClassName(slotFns.base(), borderedClass, inGroupClass, props.class, props.classNames?.base)\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-bordered=\"finalIsBordered || undefined\"\n  >\n    <AvatarImage\n      v-if=\"props.src && !props.showFallback\"\n      :src=\"props.src\"\n      :alt=\"props.alt ?? props.name ?? ''\"\n      :class=\"composeClassName(slotFns.image(), props.classNames?.image)\"\n    />\n    <!--\n      delayMs: only pass a value when we have a src — Reka UI treats delayMs=undefined\n      as \"show immediately\" (canRender starts true). Passing delayMs=0 is falsy but\n      not undefined, so the timeout never fires and fallback stays hidden forever.\n    -->\n    <AvatarFallback\n      :class=\"composeClassName(slotFns.fallback(), props.classNames?.fallback)\"\n      v-bind=\"props.src && !props.showFallback ? { 'delay-ms': 600 } : {}\"\n    >\n      <slot name=\"fallback\">\n        <span\n          v-if=\"initials\"\n          :class=\"'avatar__name text-xs font-medium leading-none'\"\n        >{{ initials }}</span>\n        <svg\n          v-else\n          class=\"avatar__icon size-4/5\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\" />\n        </svg>\n      </slot>\n    </AvatarFallback>\n  </AvatarRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { AvatarRoot, AvatarImage, AvatarFallback } from 'reka-ui'\nimport { avatarVariants, type AvatarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useAvatarGroupInject } from './avatar-group.context'\n\nconst props = withDefaults(defineProps<{\n  src?: string\n  alt?: string\n  name?: string\n  size?: AvatarVariants['size']\n  color?: AvatarVariants['color']\n  variant?: AvatarVariants['variant']\n  isBordered?: boolean\n  isDisabled?: boolean\n  showFallback?: boolean\n  /** AvatarRoot props */\n  as?: string\n  asChild?: boolean\n  /** AvatarImage props */\n  referrerPolicy?: string\n  crossOrigin?: string\n  imageAs?: string\n  imageAsChild?: boolean\n  /** AvatarFallback props */\n  delayMs?: number\n  fallbackAs?: string\n  fallbackAsChild?: boolean\n  class?: ClassValue\n  /** Per-slot class name overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    image: ClassValue\n    fallback: ClassValue\n  }>\n}>(), {\n  isBordered: false,\n  isDisabled: false,\n  showFallback: false,\n})\n\nconst emit = defineEmits<{\n  'loading-status-change': [status: string]\n}>()\n\n// Inject AvatarGroup context with ref-based fallbacks (mirrors Button.vue pattern)\nconst groupCtx = useAvatarGroupInject({\n  size: ref('md'),\n  isBordered: ref(false),\n  isDisabled: ref(false),\n  isGrid: ref(false),\n  isInGroup: ref(false),\n})\n\n// Prop precedence rules (matching ButtonGroup D-13):\n// - group disabled ALWAYS wins over child prop\n// - other props: child prop wins over group value (child ?? group)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\nconst finalIsBordered = computed(() => props.isBordered || groupCtx.isBordered.value)\nconst isDisabled = computed(() => groupCtx.isDisabled.value || props.isDisabled)\nconst isInGroup = computed(() => groupCtx.isInGroup.value)\n\n// Compute initials from name: first letter of up to 2 words\nconst initials = computed(() => {\n  if (!props.name) return ''\n  const parts = props.name.trim().split(/\\s+/)\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n})\n\nconst slotFns = computed(() =>\n  avatarVariants({\n    size: finalSize.value,\n    color: props.color,\n    variant: props.variant,\n  })\n)\n\n// Border class applied manually since the styles don't have isBordered variant\nconst borderedClass = computed(() =>\n  finalIsBordered.value ? 'ring-2 ring-offset-2 ring-default' : undefined\n)\n\n// InGroup class for negative margin overlap\nconst inGroupClass = computed(() =>\n  isInGroup.value ? '-me-2' : undefined\n)\n</script>\n\n<template>\n  <AvatarRoot\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(slotFns.base(), borderedClass, inGroupClass, props.class, props.classNames?.base)\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-bordered=\"finalIsBordered || undefined\"\n  >\n    <AvatarImage\n      v-if=\"props.src && !props.showFallback\"\n      :src=\"props.src\"\n      :alt=\"props.alt ?? props.name ?? ''\"\n      :as=\"props.imageAs\"\n      :as-child=\"props.imageAsChild\"\n      :referrer-policy=\"(props.referrerPolicy as any)\"\n      :cross-origin=\"(props.crossOrigin as any)\"\n      :class=\"composeClassName(slotFns.image(), props.classNames?.image)\"\n      @loading-status-change=\"emit('loading-status-change', $event)\"\n    />\n    <!--\n      delayMs: only pass a value when we have a src — Reka UI treats delayMs=undefined\n      as \"show immediately\" (canRender starts true). Passing delayMs=0 is falsy but\n      not undefined, so the timeout never fires and fallback stays hidden forever.\n    -->\n    <AvatarFallback\n      :as=\"props.fallbackAs\"\n      :as-child=\"props.fallbackAsChild\"\n      :delay-ms=\"props.delayMs\"\n      :class=\"composeClassName(slotFns.fallback(), props.classNames?.fallback)\"\n      v-bind=\"props.src && !props.showFallback && props.delayMs === undefined ? { 'delay-ms': 600 } : {}\"\n    >\n      <slot name=\"fallback\">\n        <span\n          v-if=\"initials\"\n          :class=\"'avatar__name text-xs font-medium leading-none'\"\n        >{{ initials }}</span>\n        <svg\n          v-else\n          class=\"avatar__icon size-4/5\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\" />\n        </svg>\n      </slot>\n    </AvatarFallback>\n  </AvatarRoot>\n</template>\n"],"mappings":""}

package/dist/components/avatar/Avatar.vue_vue_type_script_setup_true_lang.js

@@ -37,6 +37,15 @@ var Avatar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			type: Boolean,
 			default: false
 		},
+		as: {},
+		asChild: { type: Boolean },
+		referrerPolicy: {},
+		crossOrigin: {},
+		imageAs: {},
+		imageAsChild: { type: Boolean },
+		delayMs: {},
+		fallbackAs: {},
+		fallbackAsChild: { type: Boolean },
 		class: { type: [
 			String,
 			Boolean,
@@ -46,8 +55,10 @@ var Avatar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		] },
 		classNames: {}
 	},
-	setup(__props) {
+	emits: ["loading-status-change"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const groupCtx = useAvatarGroupInject({
 			size: ref("md"),
 			isBordered: ref(false),
@@ -74,6 +85,8 @@ var Avatar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		const inGroupClass = computed(() => isInGroup.value ? "-me-2" : void 0);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(AvatarRoot), {
+				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), borderedClass.value, inGroupClass.value, props.class, props.classNames?.base)),
 				"data-disabled": isDisabled.value || void 0,
 				"data-bordered": finalIsBordered.value || void 0
@@ -82,17 +95,38 @@ var Avatar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 					key: 0,
 					src: props.src,
 					alt: props.alt ?? props.name ?? "",
-					class: normalizeClass(unref(composeClassName)(slotFns.value.image(), props.classNames?.image))
+					as: props.imageAs,
+					"as-child": props.imageAsChild,
+					"referrer-policy": props.referrerPolicy,
+					"cross-origin": props.crossOrigin,
+					class: normalizeClass(unref(composeClassName)(slotFns.value.image(), props.classNames?.image)),
+					onLoadingStatusChange: _cache[0] || (_cache[0] = ($event) => emit("loading-status-change", $event))
 				}, null, 8, [
 					"src",
 					"alt",
+					"as",
+					"as-child",
+					"referrer-policy",
+					"cross-origin",
 					"class"
-				])) : createCommentVNode("", true), createVNode(unref(AvatarFallback), mergeProps({ class: unref(composeClassName)(slotFns.value.fallback(), props.classNames?.fallback) }, props.src && !props.showFallback ? { "delay-ms": 600 } : {}), {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "fallback", {}, () => [initials.value ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(initials.value), 1)) : (openBlock(), createElementBlock("svg", _hoisted_2, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" }, null, -1)])]))])]),
+				])) : createCommentVNode("", true), createVNode(unref(AvatarFallback), mergeProps({
+					as: props.fallbackAs,
+					"as-child": props.fallbackAsChild,
+					"delay-ms": props.delayMs,
+					class: unref(composeClassName)(slotFns.value.fallback(), props.classNames?.fallback)
+				}, props.src && !props.showFallback && props.delayMs === void 0 ? { "delay-ms": 600 } : {}), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "fallback", {}, () => [initials.value ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(initials.value), 1)) : (openBlock(), createElementBlock("svg", _hoisted_2, [..._cache[1] || (_cache[1] = [createElementVNode("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" }, null, -1)])]))])]),
 					_: 3
-				}, 16, ["class"])]),
+				}, 16, [
+					"as",
+					"as-child",
+					"delay-ms",
+					"class"
+				])]),
 				_: 3
 			}, 8, [
+				"as",
+				"as-child",
 				"class",
 				"data-disabled",
 				"data-bordered"

package/dist/components/avatar/Avatar.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { AvatarRoot, AvatarImage, AvatarFallback } from 'reka-ui'\nimport { avatarVariants, type AvatarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useAvatarGroupInject } from './avatar-group.context'\n\nconst props = withDefaults(defineProps<{\n  src?: string\n  alt?: string\n  name?: string\n  size?: AvatarVariants['size']\n  color?: AvatarVariants['color']\n  variant?: AvatarVariants['variant']\n  isBordered?: boolean\n  isDisabled?: boolean\n  showFallback?: boolean\n  class?: ClassValue\n  /** Per-slot class name overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    image: ClassValue\n    fallback: ClassValue\n  }>\n}>(), {\n  isBordered: false,\n  isDisabled: false,\n  showFallback: false,\n})\n\n// Inject AvatarGroup context with ref-based fallbacks (mirrors Button.vue pattern)\nconst groupCtx = useAvatarGroupInject({\n  size: ref('md'),\n  isBordered: ref(false),\n  isDisabled: ref(false),\n  isGrid: ref(false),\n  isInGroup: ref(false),\n})\n\n// Prop precedence rules (matching ButtonGroup D-13):\n// - group disabled ALWAYS wins over child prop\n// - other props: child prop wins over group value (child ?? group)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\nconst finalIsBordered = computed(() => props.isBordered || groupCtx.isBordered.value)\nconst isDisabled = computed(() => groupCtx.isDisabled.value || props.isDisabled)\nconst isInGroup = computed(() => groupCtx.isInGroup.value)\n\n// Compute initials from name: first letter of up to 2 words\nconst initials = computed(() => {\n  if (!props.name) return ''\n  const parts = props.name.trim().split(/\\s+/)\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n})\n\nconst slotFns = computed(() =>\n  avatarVariants({\n    size: finalSize.value,\n    color: props.color,\n    variant: props.variant,\n  })\n)\n\n// Border class applied manually since the styles don't have isBordered variant\nconst borderedClass = computed(() =>\n  finalIsBordered.value ? 'ring-2 ring-offset-2 ring-default' : undefined\n)\n\n// InGroup class for negative margin overlap\nconst inGroupClass = computed(() =>\n  isInGroup.value ? '-me-2' : undefined\n)\n</script>\n\n<template>\n  <AvatarRoot\n    :class=\"composeClassName(slotFns.base(), borderedClass, inGroupClass, props.class, props.classNames?.base)\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-bordered=\"finalIsBordered || undefined\"\n  >\n    <AvatarImage\n      v-if=\"props.src && !props.showFallback\"\n      :src=\"props.src\"\n      :alt=\"props.alt ?? props.name ?? ''\"\n      :class=\"composeClassName(slotFns.image(), props.classNames?.image)\"\n    />\n    <!--\n      delayMs: only pass a value when we have a src — Reka UI treats delayMs=undefined\n      as \"show immediately\" (canRender starts true). Passing delayMs=0 is falsy but\n      not undefined, so the timeout never fires and fallback stays hidden forever.\n    -->\n    <AvatarFallback\n      :class=\"composeClassName(slotFns.fallback(), props.classNames?.fallback)\"\n      v-bind=\"props.src && !props.showFallback ? { 'delay-ms': 600 } : {}\"\n    >\n      <slot name=\"fallback\">\n        <span\n          v-if=\"initials\"\n          :class=\"'avatar__name text-xs font-medium leading-none'\"\n        >{{ initials }}</span>\n        <svg\n          v-else\n          class=\"avatar__icon size-4/5\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\" />\n        </svg>\n      </slot>\n    </AvatarFallback>\n  </AvatarRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAwBd,MAAM,WAAW,qBAAqB;GACpC,MAAM,IAAI,KAAK;GACf,YAAY,IAAI,MAAM;GACtB,YAAY,IAAI,MAAM;GACtB,QAAQ,IAAI,MAAM;GAClB,WAAW,IAAI,MAAM;GACtB,CAAA;EAKD,MAAM,YAAY,eAAe,MAAM,QAAQ,SAAS,KAAK,MAAK;EAClE,MAAM,kBAAkB,eAAe,MAAM,cAAc,SAAS,WAAW,MAAK;EACpF,MAAM,aAAa,eAAe,SAAS,WAAW,SAAS,MAAM,WAAU;EAC/E,MAAM,YAAY,eAAe,SAAS,UAAU,MAAK;EAGzD,MAAM,WAAW,eAAe;AAC9B,OAAI,CAAC,MAAM,KAAM,QAAO;GACxB,MAAM,QAAQ,MAAM,KAAK,MAAM,CAAC,MAAM,MAAK;AAC3C,OAAI,MAAM,WAAW,EAAG,QAAO,MAAM,GAAG,OAAO,EAAE,CAAC,aAAY;AAC9D,WAAQ,MAAM,GAAG,OAAO,EAAE,GAAG,MAAM,MAAM,SAAS,GAAG,OAAO,EAAE,EAAE,aAAY;IAC7E;EAED,MAAM,UAAU,eACd,eAAe;GACb,MAAM,UAAU;GAChB,OAAO,MAAM;GACb,SAAS,MAAM;GAChB,CAAA,CACH;EAGA,MAAM,gBAAgB,eACpB,gBAAgB,QAAQ,sCAAsC,KAAA,EAChE;EAGA,MAAM,eAAe,eACnB,UAAU,QAAQ,UAAU,KAAA,EAC9B;;uBAIE,YAqCa,MAAA,WAAA,EAAA;IApCV,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,cAAA,OAAe,aAAA,OAAc,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IACxG,iBAAe,WAAA,SAAc,KAAA;IAC7B,iBAAe,gBAAA,SAAmB,KAAA;;2BAOjC,CAJM,MAAM,OAAG,CAAK,MAAM,gBAAA,WAAA,EAD5B,YAKE,MAAA,YAAA,EAAA;;KAHC,KAAK,MAAM;KACX,KAAK,MAAM,OAAO,MAAM,QAAI;KAC5B,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;;;;;wCAOnE,YAoBiB,MAAA,eAAA,EApBjB,WAoBiB,EAnBd,OAAO,MAAA,iBAAgB,CAAC,QAAA,MAAQ,UAAQ,EAAI,MAAM,YAAY,SAAQ,EAAA,EAC/D,MAAM,OAAG,CAAK,MAAM,eAAY,EAAA,YAAA,KAAA,GAAA,EAAA,CAAA,EAAA;4BAiBjC,CAfP,WAeO,KAAA,QAAA,YAAA,EAAA,QAAA,CAbG,SAAA,SAAA,WAAA,EADR,mBAGsB,QAHtB,YAGsB,gBAAlB,SAAA,MAAQ,EAAA,EAAA,KAAA,WAAA,EACZ,mBASM,OATN,YASM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAyJ,QAAA,EAAnJ,GAAE,gJAA8I,EAAA,MAAA,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"Avatar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { AvatarRoot, AvatarImage, AvatarFallback } from 'reka-ui'\nimport { avatarVariants, type AvatarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useAvatarGroupInject } from './avatar-group.context'\n\nconst props = withDefaults(defineProps<{\n  src?: string\n  alt?: string\n  name?: string\n  size?: AvatarVariants['size']\n  color?: AvatarVariants['color']\n  variant?: AvatarVariants['variant']\n  isBordered?: boolean\n  isDisabled?: boolean\n  showFallback?: boolean\n  /** AvatarRoot props */\n  as?: string\n  asChild?: boolean\n  /** AvatarImage props */\n  referrerPolicy?: string\n  crossOrigin?: string\n  imageAs?: string\n  imageAsChild?: boolean\n  /** AvatarFallback props */\n  delayMs?: number\n  fallbackAs?: string\n  fallbackAsChild?: boolean\n  class?: ClassValue\n  /** Per-slot class name overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    image: ClassValue\n    fallback: ClassValue\n  }>\n}>(), {\n  isBordered: false,\n  isDisabled: false,\n  showFallback: false,\n})\n\nconst emit = defineEmits<{\n  'loading-status-change': [status: string]\n}>()\n\n// Inject AvatarGroup context with ref-based fallbacks (mirrors Button.vue pattern)\nconst groupCtx = useAvatarGroupInject({\n  size: ref('md'),\n  isBordered: ref(false),\n  isDisabled: ref(false),\n  isGrid: ref(false),\n  isInGroup: ref(false),\n})\n\n// Prop precedence rules (matching ButtonGroup D-13):\n// - group disabled ALWAYS wins over child prop\n// - other props: child prop wins over group value (child ?? group)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\nconst finalIsBordered = computed(() => props.isBordered || groupCtx.isBordered.value)\nconst isDisabled = computed(() => groupCtx.isDisabled.value || props.isDisabled)\nconst isInGroup = computed(() => groupCtx.isInGroup.value)\n\n// Compute initials from name: first letter of up to 2 words\nconst initials = computed(() => {\n  if (!props.name) return ''\n  const parts = props.name.trim().split(/\\s+/)\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n})\n\nconst slotFns = computed(() =>\n  avatarVariants({\n    size: finalSize.value,\n    color: props.color,\n    variant: props.variant,\n  })\n)\n\n// Border class applied manually since the styles don't have isBordered variant\nconst borderedClass = computed(() =>\n  finalIsBordered.value ? 'ring-2 ring-offset-2 ring-default' : undefined\n)\n\n// InGroup class for negative margin overlap\nconst inGroupClass = computed(() =>\n  isInGroup.value ? '-me-2' : undefined\n)\n</script>\n\n<template>\n  <AvatarRoot\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(slotFns.base(), borderedClass, inGroupClass, props.class, props.classNames?.base)\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-bordered=\"finalIsBordered || undefined\"\n  >\n    <AvatarImage\n      v-if=\"props.src && !props.showFallback\"\n      :src=\"props.src\"\n      :alt=\"props.alt ?? props.name ?? ''\"\n      :as=\"props.imageAs\"\n      :as-child=\"props.imageAsChild\"\n      :referrer-policy=\"(props.referrerPolicy as any)\"\n      :cross-origin=\"(props.crossOrigin as any)\"\n      :class=\"composeClassName(slotFns.image(), props.classNames?.image)\"\n      @loading-status-change=\"emit('loading-status-change', $event)\"\n    />\n    <!--\n      delayMs: only pass a value when we have a src — Reka UI treats delayMs=undefined\n      as \"show immediately\" (canRender starts true). Passing delayMs=0 is falsy but\n      not undefined, so the timeout never fires and fallback stays hidden forever.\n    -->\n    <AvatarFallback\n      :as=\"props.fallbackAs\"\n      :as-child=\"props.fallbackAsChild\"\n      :delay-ms=\"props.delayMs\"\n      :class=\"composeClassName(slotFns.fallback(), props.classNames?.fallback)\"\n      v-bind=\"props.src && !props.showFallback && props.delayMs === undefined ? { 'delay-ms': 600 } : {}\"\n    >\n      <slot name=\"fallback\">\n        <span\n          v-if=\"initials\"\n          :class=\"'avatar__name text-xs font-medium leading-none'\"\n        >{{ initials }}</span>\n        <svg\n          v-else\n          class=\"avatar__icon size-4/5\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\" />\n        </svg>\n      </slot>\n    </AvatarFallback>\n  </AvatarRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAmCd,MAAM,OAAO;EAKb,MAAM,WAAW,qBAAqB;GACpC,MAAM,IAAI,KAAK;GACf,YAAY,IAAI,MAAM;GACtB,YAAY,IAAI,MAAM;GACtB,QAAQ,IAAI,MAAM;GAClB,WAAW,IAAI,MAAM;GACtB,CAAA;EAKD,MAAM,YAAY,eAAe,MAAM,QAAQ,SAAS,KAAK,MAAK;EAClE,MAAM,kBAAkB,eAAe,MAAM,cAAc,SAAS,WAAW,MAAK;EACpF,MAAM,aAAa,eAAe,SAAS,WAAW,SAAS,MAAM,WAAU;EAC/E,MAAM,YAAY,eAAe,SAAS,UAAU,MAAK;EAGzD,MAAM,WAAW,eAAe;AAC9B,OAAI,CAAC,MAAM,KAAM,QAAO;GACxB,MAAM,QAAQ,MAAM,KAAK,MAAM,CAAC,MAAM,MAAK;AAC3C,OAAI,MAAM,WAAW,EAAG,QAAO,MAAM,GAAG,OAAO,EAAE,CAAC,aAAY;AAC9D,WAAQ,MAAM,GAAG,OAAO,EAAE,GAAG,MAAM,MAAM,SAAS,GAAG,OAAO,EAAE,EAAE,aAAY;IAC7E;EAED,MAAM,UAAU,eACd,eAAe;GACb,MAAM,UAAU;GAChB,OAAO,MAAM;GACb,SAAS,MAAM;GAChB,CAAA,CACH;EAGA,MAAM,gBAAgB,eACpB,gBAAgB,QAAQ,sCAAsC,KAAA,EAChE;EAGA,MAAM,eAAe,eACnB,UAAU,QAAQ,UAAU,KAAA,EAC9B;;uBAIE,YA+Ca,MAAA,WAAA,EAAA;IA9CV,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,cAAA,OAAe,aAAA,OAAc,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IACxG,iBAAe,WAAA,SAAc,KAAA;IAC7B,iBAAe,gBAAA,SAAmB,KAAA;;2BAYjC,CATM,MAAM,OAAG,CAAK,MAAM,gBAAA,WAAA,EAD5B,YAUE,MAAA,YAAA,EAAA;;KARC,KAAK,MAAM;KACX,KAAK,MAAM,OAAO,MAAM,QAAI;KAC5B,IAAI,MAAM;KACV,YAAU,MAAM;KAChB,mBAAkB,MAAM;KACxB,gBAAe,MAAM;KACrB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;KAChE,uBAAqB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,yBAA0B,OAAM;;;;;;;;;wCAO9D,YAuBiB,MAAA,eAAA,EAvBjB,WAuBiB;KAtBd,IAAI,MAAM;KACV,YAAU,MAAM;KAChB,YAAU,MAAM;KAChB,OAAO,MAAA,iBAAgB,CAAC,QAAA,MAAQ,UAAQ,EAAI,MAAM,YAAY,SAAQ;OAC/D,MAAM,OAAG,CAAK,MAAM,gBAAgB,MAAM,YAAY,KAAA,IAAS,EAAA,YAAA,KAAA,GAAA,EAAA,CAAA,EAAA;4BAiBhE,CAfP,WAeO,KAAA,QAAA,YAAA,EAAA,QAAA,CAbG,SAAA,SAAA,WAAA,EADR,mBAGsB,QAHtB,YAGsB,gBAAlB,SAAA,MAAQ,EAAA,EAAA,KAAA,WAAA,EACZ,mBASM,OATN,YASM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAyJ,QAAA,EAAnJ,GAAE,gJAA8I,EAAA,MAAA,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,CAAA"}

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { buttonVariants, type ButtonVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useButtonGroupInject } from './button-group.context'\nimport Spinner from '../spinner/Spinner.vue'\n\nconst props = withDefaults(defineProps<{\n  variant?: ButtonVariants['variant']\n  color?: ButtonVariants['color']\n  size?: ButtonVariants['size']\n  radius?: ButtonVariants['radius']\n  isIconOnly?: boolean\n  fullWidth?: boolean\n  disabled?: boolean\n  isLoading?: boolean\n  as?: string | object\n  class?: ClassValue\n  /** Override classes for individual slots (base, startContent, label, endContent, spinner) */\n  classNames?: Partial<{\n    base: ClassValue\n    startContent: ClassValue\n    label: ClassValue\n    endContent: ClassValue\n    spinner: ClassValue\n  }>\n  value?: string | number\n}>(), {\n  variant: undefined,\n  color: undefined,\n  size: undefined,\n  radius: undefined,\n  isIconOnly: false,\n  fullWidth: false,\n  disabled: false,\n  isLoading: false,\n  as: 'button',\n  value: undefined,\n})\n\n// Inject ButtonGroup context unconditionally with fallback defaults (D-12)\n// When no ButtonGroup is present, inject returns these fallback values (no-op)\nconst groupCtx = useButtonGroupInject({\n  variant: ref('solid'),\n  color: ref('primary'),\n  size: ref('md'),\n  disabled: ref(false),\n  fullWidth: ref(false),\n  orientation: ref('horizontal'),\n  selectionMode: ref('single'),\n  selectedValue: ref(null),\n  isValueSelected: () => false,\n  selectValue: () => {},\n})\n\nconst isSelected = computed(() => groupCtx.isValueSelected(props.value))\n\nfunction handleClick() {\n  if (props.value !== undefined) groupCtx.selectValue(props.value)\n}\n\n// Prop precedence rules (D-13):\n// - group disabled ALWAYS wins over child prop\n// - all other props: child prop wins over group value (child ?? group)\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\nconst finalColor = computed(() => props.color ?? groupCtx.color.value)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\nconst finalFullWidth = computed(() => props.fullWidth || groupCtx.fullWidth.value)\n\n// Map legacy variant names to new variant+color so old usage keeps working\nconst LEGACY_VARIANTS: Record<string, { variant: string; color: string }> = {\n  primary:       { variant: 'solid',   color: 'primary' },\n  secondary:     { variant: 'default', color: 'default' },\n  tertiary:      { variant: 'default', color: 'default' },\n  danger:        { variant: 'solid',   color: 'danger' },\n  'danger-soft': { variant: 'soft',    color: 'danger' },\n  success:       { variant: 'solid',   color: 'success' },\n  'success-soft':{ variant: 'soft',    color: 'success' },\n  warning:       { variant: 'solid',   color: 'warning' },\n  'warning-soft':{ variant: 'soft',    color: 'warning' },\n}\n\nconst resolvedVariant = computed(() => {\n  const v = finalVariant.value\n  if (!v) return v\n  return (LEGACY_VARIANTS[v]?.variant ?? v) as ButtonVariants['variant']\n})\n\nconst resolvedColor = computed(() => {\n  const v = finalVariant.value\n  // If caller explicitly set color, respect it; otherwise infer from legacy variant\n  if (props.color === undefined && v && LEGACY_VARIANTS[v]) return LEGACY_VARIANTS[v].color as ButtonVariants['color']\n  return finalColor.value\n})\n\nconst slotFns = computed(() =>\n  buttonVariants({\n    variant: resolvedVariant.value,\n    color: resolvedColor.value,\n    size: finalSize.value,\n    radius: props.radius,\n    isIconOnly: props.isIconOnly,\n    fullWidth: finalFullWidth.value,\n    isLoading: props.isLoading,\n  })\n)\n\n// Spinner size scales with button size\nconst spinnerSize = computed(() => {\n  if (finalSize.value === 'xs' || finalSize.value === 'sm') return 'sm' as const\n  if (finalSize.value === 'lg' || finalSize.value === 'xl') return 'lg' as const\n  return 'md' as const\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"props.as\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :disabled=\"isDisabled || props.isLoading || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-loading=\"props.isLoading || undefined\"\n    :data-orientation=\"groupCtx.orientation.value\"\n    :data-selected=\"isSelected || undefined\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick\"\n  >\n    <!-- startContent named slot -->\n    <span\n      v-if=\"$slots.startContent\"\n      :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n    >\n      <slot name=\"startContent\" />\n    </span>\n\n    <!-- default (label) slot -->\n    <span :class=\"composeClassName(slotFns.label(), props.classNames?.label)\">\n      <slot />\n    </span>\n\n    <!-- endContent named slot -->\n    <span\n      v-if=\"$slots.endContent\"\n      :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n    >\n      <slot name=\"endContent\" />\n    </span>\n\n    <!-- Loading spinner: absolute-centered, only rendered when isLoading=true (D-08, D-09) -->\n    <!-- color=\"current\" inherits --button-fg so spinner contrasts with the button background -->\n    <span\n      v-if=\"props.isLoading\"\n      :class=\"composeClassName(slotFns.spinner(), props.classNames?.spinner)\"\n      aria-hidden=\"true\"\n      data-slot=\"spinner\"\n    >\n      <Spinner\n        :size=\"spinnerSize\"\n        color=\"current\"\n      />\n    </span>\n  </Primitive>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { buttonVariants, type ButtonVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useButtonGroupInject } from './button-group.context'\nimport Spinner from '../spinner/Spinner.vue'\nimport { warnDeprecatedVariant } from '../../utils/warnDeprecated'\n\nconst props = withDefaults(defineProps<{\n  /**\n   * Visual style of the button.\n   * @deprecated 'outline' — use 'bordered' instead.\n   */\n  variant?: ButtonVariants['variant'] | 'outline'\n  color?: ButtonVariants['color']\n  size?: ButtonVariants['size']\n  radius?: ButtonVariants['radius']\n  isIconOnly?: boolean\n  fullWidth?: boolean\n  disabled?: boolean\n  isLoading?: boolean\n  as?: string | object\n  class?: ClassValue\n  /** Override classes for individual slots (base, startContent, label, endContent, spinner) */\n  classNames?: Partial<{\n    base: ClassValue\n    startContent: ClassValue\n    label: ClassValue\n    endContent: ClassValue\n    spinner: ClassValue\n  }>\n  value?: string | number\n}>(), {\n  variant: undefined,\n  color: undefined,\n  size: undefined,\n  radius: undefined,\n  isIconOnly: false,\n  fullWidth: false,\n  disabled: false,\n  isLoading: false,\n  as: 'button',\n  value: undefined,\n})\n\n// Inject ButtonGroup context unconditionally with fallback defaults (D-12)\n// When no ButtonGroup is present, inject returns these fallback values (no-op)\nconst groupCtx = useButtonGroupInject({\n  variant: ref('solid'),\n  color: ref('primary'),\n  size: ref('md'),\n  disabled: ref(false),\n  fullWidth: ref(false),\n  orientation: ref('horizontal'),\n  selectionMode: ref('single'),\n  selectedValue: ref(null),\n  isValueSelected: () => false,\n  selectValue: () => {},\n})\n\nconst isSelected = computed(() => groupCtx.isValueSelected(props.value))\n\nfunction handleClick() {\n  if (props.value !== undefined) groupCtx.selectValue(props.value)\n}\n\n// Prop precedence rules (D-13):\n// - group disabled ALWAYS wins over child prop\n// - all other props: child prop wins over group value (child ?? group)\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\nconst finalColor = computed(() => props.color ?? groupCtx.color.value)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\nconst finalFullWidth = computed(() => props.fullWidth || groupCtx.fullWidth.value)\n\n// Map legacy variant names to new variant+color so old usage keeps working\nconst LEGACY_VARIANTS: Record<string, { variant: string; color: string }> = {\n  primary:       { variant: 'solid',   color: 'primary' },\n  secondary:     { variant: 'default', color: 'default' },\n  tertiary:      { variant: 'default', color: 'default' },\n  danger:        { variant: 'solid',   color: 'danger' },\n  'danger-soft': { variant: 'soft',    color: 'danger' },\n  success:       { variant: 'solid',   color: 'success' },\n  'success-soft':{ variant: 'soft',    color: 'success' },\n  warning:       { variant: 'solid',   color: 'warning' },\n  'warning-soft':{ variant: 'soft',    color: 'warning' },\n}\n\nconst resolvedVariant = computed(() => {\n  const v = finalVariant.value\n  if (!v) return v\n  if (v === 'outline') {\n    warnDeprecatedVariant('Button', 'outline', 'bordered')\n    return 'bordered' as ButtonVariants['variant']\n  }\n  return (LEGACY_VARIANTS[v]?.variant ?? v) as ButtonVariants['variant']\n})\n\nconst resolvedColor = computed(() => {\n  const v = finalVariant.value\n  // If caller explicitly set color, respect it; otherwise infer from legacy variant\n  if (props.color === undefined && v && LEGACY_VARIANTS[v]) return LEGACY_VARIANTS[v].color as ButtonVariants['color']\n  return finalColor.value\n})\n\nconst slotFns = computed(() =>\n  buttonVariants({\n    variant: resolvedVariant.value,\n    color: resolvedColor.value,\n    size: finalSize.value,\n    radius: props.radius,\n    isIconOnly: props.isIconOnly,\n    fullWidth: finalFullWidth.value,\n    isLoading: props.isLoading,\n  })\n)\n\n// Spinner size scales with button size\nconst spinnerSize = computed(() => {\n  if (finalSize.value === 'xs' || finalSize.value === 'sm') return 'sm' as const\n  if (finalSize.value === 'lg' || finalSize.value === 'xl') return 'lg' as const\n  return 'md' as const\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"props.as\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :disabled=\"isDisabled || props.isLoading || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-loading=\"props.isLoading || undefined\"\n    :data-orientation=\"groupCtx.orientation.value\"\n    :data-selected=\"isSelected || undefined\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick\"\n  >\n    <!-- startContent named slot -->\n    <span\n      v-if=\"$slots.startContent\"\n      :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n    >\n      <slot name=\"startContent\" />\n    </span>\n\n    <!-- default (label) slot -->\n    <span :class=\"composeClassName(slotFns.label(), props.classNames?.label)\">\n      <slot />\n    </span>\n\n    <!-- endContent named slot -->\n    <span\n      v-if=\"$slots.endContent\"\n      :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n    >\n      <slot name=\"endContent\" />\n    </span>\n\n    <!-- Loading spinner: absolute-centered, only rendered when isLoading=true (D-08, D-09) -->\n    <!-- color=\"current\" inherits --button-fg so spinner contrasts with the button background -->\n    <span\n      v-if=\"props.isLoading\"\n      :class=\"composeClassName(slotFns.spinner(), props.classNames?.spinner)\"\n      aria-hidden=\"true\"\n      data-slot=\"spinner\"\n    >\n      <Spinner\n        :size=\"spinnerSize\"\n        color=\"current\"\n      />\n    </span>\n  </Primitive>\n</template>\n"],"mappings":""}

package/dist/components/button/Button.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import { composeClassName } from "../../utils/composeClassName.js";
 import Spinner_default from "../spinner/Spinner.js";
+import "../../utils/warnDeprecated.js";
 import { useButtonGroupInject } from "./button-group.context.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, unref, withCtx } from "vue";
 import { buttonVariants } from "@auronui/styles";
@@ -103,6 +104,7 @@ var Button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		const resolvedVariant = computed(() => {
 			const v = finalVariant.value;
 			if (!v) return v;
+			if (v === "outline") return "bordered";
 			return LEGACY_VARIANTS[v]?.variant ?? v;
 		});
 		const resolvedColor = computed(() => {

package/dist/components/button/Button.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../src/components/button/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { buttonVariants, type ButtonVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useButtonGroupInject } from './button-group.context'\nimport Spinner from '../spinner/Spinner.vue'\n\nconst props = withDefaults(defineProps<{\n  variant?: ButtonVariants['variant']\n  color?: ButtonVariants['color']\n  size?: ButtonVariants['size']\n  radius?: ButtonVariants['radius']\n  isIconOnly?: boolean\n  fullWidth?: boolean\n  disabled?: boolean\n  isLoading?: boolean\n  as?: string | object\n  class?: ClassValue\n  /** Override classes for individual slots (base, startContent, label, endContent, spinner) */\n  classNames?: Partial<{\n    base: ClassValue\n    startContent: ClassValue\n    label: ClassValue\n    endContent: ClassValue\n    spinner: ClassValue\n  }>\n  value?: string | number\n}>(), {\n  variant: undefined,\n  color: undefined,\n  size: undefined,\n  radius: undefined,\n  isIconOnly: false,\n  fullWidth: false,\n  disabled: false,\n  isLoading: false,\n  as: 'button',\n  value: undefined,\n})\n\n// Inject ButtonGroup context unconditionally with fallback defaults (D-12)\n// When no ButtonGroup is present, inject returns these fallback values (no-op)\nconst groupCtx = useButtonGroupInject({\n  variant: ref('solid'),\n  color: ref('primary'),\n  size: ref('md'),\n  disabled: ref(false),\n  fullWidth: ref(false),\n  orientation: ref('horizontal'),\n  selectionMode: ref('single'),\n  selectedValue: ref(null),\n  isValueSelected: () => false,\n  selectValue: () => {},\n})\n\nconst isSelected = computed(() => groupCtx.isValueSelected(props.value))\n\nfunction handleClick() {\n  if (props.value !== undefined) groupCtx.selectValue(props.value)\n}\n\n// Prop precedence rules (D-13):\n// - group disabled ALWAYS wins over child prop\n// - all other props: child prop wins over group value (child ?? group)\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\nconst finalColor = computed(() => props.color ?? groupCtx.color.value)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\nconst finalFullWidth = computed(() => props.fullWidth || groupCtx.fullWidth.value)\n\n// Map legacy variant names to new variant+color so old usage keeps working\nconst LEGACY_VARIANTS: Record<string, { variant: string; color: string }> = {\n  primary:       { variant: 'solid',   color: 'primary' },\n  secondary:     { variant: 'default', color: 'default' },\n  tertiary:      { variant: 'default', color: 'default' },\n  danger:        { variant: 'solid',   color: 'danger' },\n  'danger-soft': { variant: 'soft',    color: 'danger' },\n  success:       { variant: 'solid',   color: 'success' },\n  'success-soft':{ variant: 'soft',    color: 'success' },\n  warning:       { variant: 'solid',   color: 'warning' },\n  'warning-soft':{ variant: 'soft',    color: 'warning' },\n}\n\nconst resolvedVariant = computed(() => {\n  const v = finalVariant.value\n  if (!v) return v\n  return (LEGACY_VARIANTS[v]?.variant ?? v) as ButtonVariants['variant']\n})\n\nconst resolvedColor = computed(() => {\n  const v = finalVariant.value\n  // If caller explicitly set color, respect it; otherwise infer from legacy variant\n  if (props.color === undefined && v && LEGACY_VARIANTS[v]) return LEGACY_VARIANTS[v].color as ButtonVariants['color']\n  return finalColor.value\n})\n\nconst slotFns = computed(() =>\n  buttonVariants({\n    variant: resolvedVariant.value,\n    color: resolvedColor.value,\n    size: finalSize.value,\n    radius: props.radius,\n    isIconOnly: props.isIconOnly,\n    fullWidth: finalFullWidth.value,\n    isLoading: props.isLoading,\n  })\n)\n\n// Spinner size scales with button size\nconst spinnerSize = computed(() => {\n  if (finalSize.value === 'xs' || finalSize.value === 'sm') return 'sm' as const\n  if (finalSize.value === 'lg' || finalSize.value === 'xl') return 'lg' as const\n  return 'md' as const\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"props.as\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :disabled=\"isDisabled || props.isLoading || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-loading=\"props.isLoading || undefined\"\n    :data-orientation=\"groupCtx.orientation.value\"\n    :data-selected=\"isSelected || undefined\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick\"\n  >\n    <!-- startContent named slot -->\n    <span\n      v-if=\"$slots.startContent\"\n      :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n    >\n      <slot name=\"startContent\" />\n    </span>\n\n    <!-- default (label) slot -->\n    <span :class=\"composeClassName(slotFns.label(), props.classNames?.label)\">\n      <slot />\n    </span>\n\n    <!-- endContent named slot -->\n    <span\n      v-if=\"$slots.endContent\"\n      :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n    >\n      <slot name=\"endContent\" />\n    </span>\n\n    <!-- Loading spinner: absolute-centered, only rendered when isLoading=true (D-08, D-09) -->\n    <!-- color=\"current\" inherits --button-fg so spinner contrasts with the button background -->\n    <span\n      v-if=\"props.isLoading\"\n      :class=\"composeClassName(slotFns.spinner(), props.classNames?.spinner)\"\n      aria-hidden=\"true\"\n      data-slot=\"spinner\"\n    >\n      <Spinner\n        :size=\"spinnerSize\"\n        color=\"current\"\n      />\n    </span>\n  </Primitive>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Button.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../src/components/button/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { buttonVariants, type ButtonVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useButtonGroupInject } from './button-group.context'\nimport Spinner from '../spinner/Spinner.vue'\nimport { warnDeprecatedVariant } from '../../utils/warnDeprecated'\n\nconst props = withDefaults(defineProps<{\n  /**\n   * Visual style of the button.\n   * @deprecated 'outline' — use 'bordered' instead.\n   */\n  variant?: ButtonVariants['variant'] | 'outline'\n  color?: ButtonVariants['color']\n  size?: ButtonVariants['size']\n  radius?: ButtonVariants['radius']\n  isIconOnly?: boolean\n  fullWidth?: boolean\n  disabled?: boolean\n  isLoading?: boolean\n  as?: string | object\n  class?: ClassValue\n  /** Override classes for individual slots (base, startContent, label, endContent, spinner) */\n  classNames?: Partial<{\n    base: ClassValue\n    startContent: ClassValue\n    label: ClassValue\n    endContent: ClassValue\n    spinner: ClassValue\n  }>\n  value?: string | number\n}>(), {\n  variant: undefined,\n  color: undefined,\n  size: undefined,\n  radius: undefined,\n  isIconOnly: false,\n  fullWidth: false,\n  disabled: false,\n  isLoading: false,\n  as: 'button',\n  value: undefined,\n})\n\n// Inject ButtonGroup context unconditionally with fallback defaults (D-12)\n// When no ButtonGroup is present, inject returns these fallback values (no-op)\nconst groupCtx = useButtonGroupInject({\n  variant: ref('solid'),\n  color: ref('primary'),\n  size: ref('md'),\n  disabled: ref(false),\n  fullWidth: ref(false),\n  orientation: ref('horizontal'),\n  selectionMode: ref('single'),\n  selectedValue: ref(null),\n  isValueSelected: () => false,\n  selectValue: () => {},\n})\n\nconst isSelected = computed(() => groupCtx.isValueSelected(props.value))\n\nfunction handleClick() {\n  if (props.value !== undefined) groupCtx.selectValue(props.value)\n}\n\n// Prop precedence rules (D-13):\n// - group disabled ALWAYS wins over child prop\n// - all other props: child prop wins over group value (child ?? group)\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\nconst finalColor = computed(() => props.color ?? groupCtx.color.value)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\nconst finalFullWidth = computed(() => props.fullWidth || groupCtx.fullWidth.value)\n\n// Map legacy variant names to new variant+color so old usage keeps working\nconst LEGACY_VARIANTS: Record<string, { variant: string; color: string }> = {\n  primary:       { variant: 'solid',   color: 'primary' },\n  secondary:     { variant: 'default', color: 'default' },\n  tertiary:      { variant: 'default', color: 'default' },\n  danger:        { variant: 'solid',   color: 'danger' },\n  'danger-soft': { variant: 'soft',    color: 'danger' },\n  success:       { variant: 'solid',   color: 'success' },\n  'success-soft':{ variant: 'soft',    color: 'success' },\n  warning:       { variant: 'solid',   color: 'warning' },\n  'warning-soft':{ variant: 'soft',    color: 'warning' },\n}\n\nconst resolvedVariant = computed(() => {\n  const v = finalVariant.value\n  if (!v) return v\n  if (v === 'outline') {\n    warnDeprecatedVariant('Button', 'outline', 'bordered')\n    return 'bordered' as ButtonVariants['variant']\n  }\n  return (LEGACY_VARIANTS[v]?.variant ?? v) as ButtonVariants['variant']\n})\n\nconst resolvedColor = computed(() => {\n  const v = finalVariant.value\n  // If caller explicitly set color, respect it; otherwise infer from legacy variant\n  if (props.color === undefined && v && LEGACY_VARIANTS[v]) return LEGACY_VARIANTS[v].color as ButtonVariants['color']\n  return finalColor.value\n})\n\nconst slotFns = computed(() =>\n  buttonVariants({\n    variant: resolvedVariant.value,\n    color: resolvedColor.value,\n    size: finalSize.value,\n    radius: props.radius,\n    isIconOnly: props.isIconOnly,\n    fullWidth: finalFullWidth.value,\n    isLoading: props.isLoading,\n  })\n)\n\n// Spinner size scales with button size\nconst spinnerSize = computed(() => {\n  if (finalSize.value === 'xs' || finalSize.value === 'sm') return 'sm' as const\n  if (finalSize.value === 'lg' || finalSize.value === 'xl') return 'lg' as const\n  return 'md' as const\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"props.as\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :disabled=\"isDisabled || props.isLoading || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-loading=\"props.isLoading || undefined\"\n    :data-orientation=\"groupCtx.orientation.value\"\n    :data-selected=\"isSelected || undefined\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick\"\n  >\n    <!-- startContent named slot -->\n    <span\n      v-if=\"$slots.startContent\"\n      :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n    >\n      <slot name=\"startContent\" />\n    </span>\n\n    <!-- default (label) slot -->\n    <span :class=\"composeClassName(slotFns.label(), props.classNames?.label)\">\n      <slot />\n    </span>\n\n    <!-- endContent named slot -->\n    <span\n      v-if=\"$slots.endContent\"\n      :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n    >\n      <slot name=\"endContent\" />\n    </span>\n\n    <!-- Loading spinner: absolute-centered, only rendered when isLoading=true (D-08, D-09) -->\n    <!-- color=\"current\" inherits --button-fg so spinner contrasts with the button background -->\n    <span\n      v-if=\"props.isLoading\"\n      :class=\"composeClassName(slotFns.spinner(), props.classNames?.spinner)\"\n      aria-hidden=\"true\"\n      data-slot=\"spinner\"\n    >\n      <Spinner\n        :size=\"spinnerSize\"\n        color=\"current\"\n      />\n    </span>\n  </Primitive>\n</template>\n"],"mappings":"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"}

package/dist/components/button/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","names":[],"sources":["../../../src/components/button/ToggleButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Toggle } from 'reka-ui'\nimport { toggleButtonVariants, type ToggleButtonVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useToggleButtonGroupInject } from './toggle-button-group.context'\n\nconst props = withDefaults(defineProps<{\n  variant?: ToggleButtonVariants['variant']\n  size?: ToggleButtonVariants['size']\n  isIconOnly?: boolean\n  disabled?: boolean\n  modelValue?: boolean\n  defaultValue?: boolean\n  value?: string\n  class?: string\n}>(), {\n  variant: undefined,\n  size: undefined,\n  isIconOnly: false,\n  disabled: false,\n  modelValue: undefined,\n  defaultValue: false,\n  value: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n}>()\n\n// Inject ToggleButtonGroup context with fallback defaults (mirrors Button → ButtonGroup pattern)\nconst groupCtx = useToggleButtonGroupInject({\n  variant: ref('default'),\n  size: ref('md'),\n  disabled: ref(false),\n  fullWidth: ref(false),\n  orientation: ref('horizontal'),\n  selectionMode: ref('multiple'),\n  selectedValues: ref([]),\n  toggleValue: () => {},\n})\n\n// Prop precedence: group disabled wins; child prop wins for variant/size\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\n\n// When inside a group with selectionMode and a value prop, derive pressed from group state\nconst isGroupManaged = computed(() => props.value !== undefined)\nconst isPressed = computed(() => {\n  if (isGroupManaged.value) {\n    return groupCtx.selectedValues.value.includes(props.value!)\n  }\n  return props.modelValue\n})\n\nfunction handleUpdate(val: boolean) {\n  if (isGroupManaged.value) {\n    groupCtx.toggleValue(props.value!)\n  } else {\n    emit('update:modelValue', val)\n  }\n}\n\nconst classes = computed(() =>\n  toggleButtonVariants({\n    variant: finalVariant.value,\n    size: finalSize.value,\n    isIconOnly: props.isIconOnly,\n  })\n)\n</script>\n\n<template>\n  <!--\n    Use as-child so Reka's Toggle merges data-state / aria-pressed / onClick directly\n    onto OUR <button> element instead of relying on a 2-level inheritAttrs chain\n    (Toggle → Primitive → button). This guarantees the toggle-button CSS class and\n    data-state=\"on\" are always on the same DOM element, so [data-state=\"on\"] selectors\n    apply correctly.\n  -->\n  <Toggle\n    as-child\n    :disabled=\"isDisabled\"\n    :model-value=\"isPressed\"\n    :default-value=\"props.defaultValue\"\n    @update:model-value=\"handleUpdate\"\n  >\n    <button\n      :class=\"composeClassName(classes, props.class)\"\n      :disabled=\"isDisabled || undefined\"\n      :data-orientation=\"groupCtx.orientation.value\"\n      :type=\"'button'\"\n    >\n      <slot />\n    </button>\n  </Toggle>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ToggleButton.js","names":[],"sources":["../../../src/components/button/ToggleButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Toggle } from 'reka-ui'\nimport { toggleButtonVariants, type ToggleButtonVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useToggleButtonGroupInject } from './toggle-button-group.context'\n\nconst props = withDefaults(defineProps<{\n  variant?: ToggleButtonVariants['variant']\n  size?: ToggleButtonVariants['size']\n  isIconOnly?: boolean\n  disabled?: boolean\n  modelValue?: boolean\n  defaultValue?: boolean\n  value?: string\n  class?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n}>(), {\n  variant: undefined,\n  size: undefined,\n  isIconOnly: false,\n  disabled: false,\n  modelValue: undefined,\n  defaultValue: false,\n  value: undefined,\n  as: undefined,\n  asChild: false,\n  name: undefined,\n  required: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n}>()\n\n// Inject ToggleButtonGroup context with fallback defaults (mirrors Button → ButtonGroup pattern)\nconst groupCtx = useToggleButtonGroupInject({\n  variant: ref('default'),\n  size: ref('md'),\n  disabled: ref(false),\n  fullWidth: ref(false),\n  orientation: ref('horizontal'),\n  selectionMode: ref('multiple'),\n  selectedValues: ref([]),\n  toggleValue: () => {},\n})\n\n// Prop precedence: group disabled wins; child prop wins for variant/size\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\n\n// When inside a group with selectionMode and a value prop, derive pressed from group state\nconst isGroupManaged = computed(() => props.value !== undefined)\nconst isPressed = computed(() => {\n  if (isGroupManaged.value) {\n    return groupCtx.selectedValues.value.includes(props.value!)\n  }\n  return props.modelValue\n})\n\nfunction handleUpdate(val: boolean) {\n  if (isGroupManaged.value) {\n    groupCtx.toggleValue(props.value!)\n  } else {\n    emit('update:modelValue', val)\n  }\n}\n\nconst classes = computed(() =>\n  toggleButtonVariants({\n    variant: finalVariant.value,\n    size: finalSize.value,\n    isIconOnly: props.isIconOnly,\n  })\n)\n</script>\n\n<template>\n  <!--\n    Use as-child so Reka's Toggle merges data-state / aria-pressed / onClick directly\n    onto OUR <button> element instead of relying on a 2-level inheritAttrs chain\n    (Toggle → Primitive → button). This guarantees the toggle-button CSS class and\n    data-state=\"on\" are always on the same DOM element, so [data-state=\"on\"] selectors\n    apply correctly.\n  -->\n  <Toggle\n    as-child\n    :disabled=\"isDisabled\"\n    :model-value=\"isPressed\"\n    :default-value=\"props.defaultValue\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    @update:model-value=\"handleUpdate\"\n  >\n    <button\n      :class=\"composeClassName(classes, props.class)\"\n      :disabled=\"isDisabled || undefined\"\n      :data-orientation=\"groupCtx.orientation.value\"\n      :type=\"'button'\"\n    >\n      <slot />\n    </button>\n  </Toggle>\n</template>\n"],"mappings":""}

package/dist/components/button/ToggleButton.vue_vue_type_script_setup_true_lang.js

@@ -27,7 +27,17 @@ var ToggleButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			default: false
 		},
 		value: { default: void 0 },
-		class: {}
+		class: {},
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		name: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: false
+		}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -66,6 +76,8 @@ var ToggleButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				disabled: isDisabled.value,
 				"model-value": isPressed.value,
 				"default-value": props.defaultValue,
+				name: props.name,
+				required: props.required,
 				"onUpdate:modelValue": handleUpdate
 			}, {
 				default: withCtx(() => [createElementVNode("button", {
@@ -78,7 +90,9 @@ var ToggleButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			}, 8, [
 				"disabled",
 				"model-value",
-				"default-value"
+				"default-value",
+				"name",
+				"required"
 			]);
 		};
 	}

package/dist/components/button/ToggleButton.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/button/ToggleButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Toggle } from 'reka-ui'\nimport { toggleButtonVariants, type ToggleButtonVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useToggleButtonGroupInject } from './toggle-button-group.context'\n\nconst props = withDefaults(defineProps<{\n  variant?: ToggleButtonVariants['variant']\n  size?: ToggleButtonVariants['size']\n  isIconOnly?: boolean\n  disabled?: boolean\n  modelValue?: boolean\n  defaultValue?: boolean\n  value?: string\n  class?: string\n}>(), {\n  variant: undefined,\n  size: undefined,\n  isIconOnly: false,\n  disabled: false,\n  modelValue: undefined,\n  defaultValue: false,\n  value: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n}>()\n\n// Inject ToggleButtonGroup context with fallback defaults (mirrors Button → ButtonGroup pattern)\nconst groupCtx = useToggleButtonGroupInject({\n  variant: ref('default'),\n  size: ref('md'),\n  disabled: ref(false),\n  fullWidth: ref(false),\n  orientation: ref('horizontal'),\n  selectionMode: ref('multiple'),\n  selectedValues: ref([]),\n  toggleValue: () => {},\n})\n\n// Prop precedence: group disabled wins; child prop wins for variant/size\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\n\n// When inside a group with selectionMode and a value prop, derive pressed from group state\nconst isGroupManaged = computed(() => props.value !== undefined)\nconst isPressed = computed(() => {\n  if (isGroupManaged.value) {\n    return groupCtx.selectedValues.value.includes(props.value!)\n  }\n  return props.modelValue\n})\n\nfunction handleUpdate(val: boolean) {\n  if (isGroupManaged.value) {\n    groupCtx.toggleValue(props.value!)\n  } else {\n    emit('update:modelValue', val)\n  }\n}\n\nconst classes = computed(() =>\n  toggleButtonVariants({\n    variant: finalVariant.value,\n    size: finalSize.value,\n    isIconOnly: props.isIconOnly,\n  })\n)\n</script>\n\n<template>\n  <!--\n    Use as-child so Reka's Toggle merges data-state / aria-pressed / onClick directly\n    onto OUR <button> element instead of relying on a 2-level inheritAttrs chain\n    (Toggle → Primitive → button). This guarantees the toggle-button CSS class and\n    data-state=\"on\" are always on the same DOM element, so [data-state=\"on\"] selectors\n    apply correctly.\n  -->\n  <Toggle\n    as-child\n    :disabled=\"isDisabled\"\n    :model-value=\"isPressed\"\n    :default-value=\"props.defaultValue\"\n    @update:model-value=\"handleUpdate\"\n  >\n    <button\n      :class=\"composeClassName(classes, props.class)\"\n      :disabled=\"isDisabled || undefined\"\n      :data-orientation=\"groupCtx.orientation.value\"\n      :type=\"'button'\"\n    >\n      <slot />\n    </button>\n  </Toggle>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAmBd,MAAM,OAAO;EAKb,MAAM,WAAW,2BAA2B;GAC1C,SAAS,IAAI,UAAU;GACvB,MAAM,IAAI,KAAK;GACf,UAAU,IAAI,MAAM;GACpB,WAAW,IAAI,MAAM;GACrB,aAAa,IAAI,aAAa;GAC9B,eAAe,IAAI,WAAW;GAC9B,gBAAgB,IAAI,EAAE,CAAC;GACvB,mBAAmB;GACpB,CAAA;EAGD,MAAM,aAAa,eAAe,SAAS,SAAS,SAAS,MAAM,SAAQ;EAC3E,MAAM,eAAe,eAAe,MAAM,WAAW,SAAS,QAAQ,MAAK;EAC3E,MAAM,YAAY,eAAe,MAAM,QAAQ,SAAS,KAAK,MAAK;EAGlE,MAAM,iBAAiB,eAAe,MAAM,UAAU,KAAA,EAAS;EAC/D,MAAM,YAAY,eAAe;AAC/B,OAAI,eAAe,MACjB,QAAO,SAAS,eAAe,MAAM,SAAS,MAAM,MAAM;AAE5D,UAAO,MAAM;IACd;EAED,SAAS,aAAa,KAAc;AAClC,OAAI,eAAe,MACjB,UAAS,YAAY,MAAM,MAAM;OAEjC,MAAK,qBAAqB,IAAG;;EAIjC,MAAM,UAAU,eACd,qBAAqB;GACnB,SAAS,aAAa;GACtB,MAAM,UAAU;GAChB,YAAY,MAAM;GACnB,CAAA,CACH;;uBAWE,YAeS,MAAA,OAAA,EAAA;IAdP,YAAA;IACC,UAAU,WAAA;IACV,eAAa,UAAA;IACb,iBAAe,MAAM;IACrB,uBAAoB;;2BASZ,CAPT,mBAOS,UAAA;KANN,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,OAAS,MAAM,MAAK,CAAA;KAC5C,UAAU,WAAA,SAAc,KAAA;KACxB,oBAAkB,MAAA,SAAQ,CAAC,YAAY;KACvC,MAAM;QAEP,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA,CAAA,CAAA"}
+{"version":3,"file":"ToggleButton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/button/ToggleButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Toggle } from 'reka-ui'\nimport { toggleButtonVariants, type ToggleButtonVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useToggleButtonGroupInject } from './toggle-button-group.context'\n\nconst props = withDefaults(defineProps<{\n  variant?: ToggleButtonVariants['variant']\n  size?: ToggleButtonVariants['size']\n  isIconOnly?: boolean\n  disabled?: boolean\n  modelValue?: boolean\n  defaultValue?: boolean\n  value?: string\n  class?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n}>(), {\n  variant: undefined,\n  size: undefined,\n  isIconOnly: false,\n  disabled: false,\n  modelValue: undefined,\n  defaultValue: false,\n  value: undefined,\n  as: undefined,\n  asChild: false,\n  name: undefined,\n  required: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n}>()\n\n// Inject ToggleButtonGroup context with fallback defaults (mirrors Button → ButtonGroup pattern)\nconst groupCtx = useToggleButtonGroupInject({\n  variant: ref('default'),\n  size: ref('md'),\n  disabled: ref(false),\n  fullWidth: ref(false),\n  orientation: ref('horizontal'),\n  selectionMode: ref('multiple'),\n  selectedValues: ref([]),\n  toggleValue: () => {},\n})\n\n// Prop precedence: group disabled wins; child prop wins for variant/size\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\n\n// When inside a group with selectionMode and a value prop, derive pressed from group state\nconst isGroupManaged = computed(() => props.value !== undefined)\nconst isPressed = computed(() => {\n  if (isGroupManaged.value) {\n    return groupCtx.selectedValues.value.includes(props.value!)\n  }\n  return props.modelValue\n})\n\nfunction handleUpdate(val: boolean) {\n  if (isGroupManaged.value) {\n    groupCtx.toggleValue(props.value!)\n  } else {\n    emit('update:modelValue', val)\n  }\n}\n\nconst classes = computed(() =>\n  toggleButtonVariants({\n    variant: finalVariant.value,\n    size: finalSize.value,\n    isIconOnly: props.isIconOnly,\n  })\n)\n</script>\n\n<template>\n  <!--\n    Use as-child so Reka's Toggle merges data-state / aria-pressed / onClick directly\n    onto OUR <button> element instead of relying on a 2-level inheritAttrs chain\n    (Toggle → Primitive → button). This guarantees the toggle-button CSS class and\n    data-state=\"on\" are always on the same DOM element, so [data-state=\"on\"] selectors\n    apply correctly.\n  -->\n  <Toggle\n    as-child\n    :disabled=\"isDisabled\"\n    :model-value=\"isPressed\"\n    :default-value=\"props.defaultValue\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    @update:model-value=\"handleUpdate\"\n  >\n    <button\n      :class=\"composeClassName(classes, props.class)\"\n      :disabled=\"isDisabled || undefined\"\n      :data-orientation=\"groupCtx.orientation.value\"\n      :type=\"'button'\"\n    >\n      <slot />\n    </button>\n  </Toggle>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EA2Bd,MAAM,OAAO;EAKb,MAAM,WAAW,2BAA2B;GAC1C,SAAS,IAAI,UAAU;GACvB,MAAM,IAAI,KAAK;GACf,UAAU,IAAI,MAAM;GACpB,WAAW,IAAI,MAAM;GACrB,aAAa,IAAI,aAAa;GAC9B,eAAe,IAAI,WAAW;GAC9B,gBAAgB,IAAI,EAAE,CAAC;GACvB,mBAAmB;GACpB,CAAA;EAGD,MAAM,aAAa,eAAe,SAAS,SAAS,SAAS,MAAM,SAAQ;EAC3E,MAAM,eAAe,eAAe,MAAM,WAAW,SAAS,QAAQ,MAAK;EAC3E,MAAM,YAAY,eAAe,MAAM,QAAQ,SAAS,KAAK,MAAK;EAGlE,MAAM,iBAAiB,eAAe,MAAM,UAAU,KAAA,EAAS;EAC/D,MAAM,YAAY,eAAe;AAC/B,OAAI,eAAe,MACjB,QAAO,SAAS,eAAe,MAAM,SAAS,MAAM,MAAM;AAE5D,UAAO,MAAM;IACd;EAED,SAAS,aAAa,KAAc;AAClC,OAAI,eAAe,MACjB,UAAS,YAAY,MAAM,MAAM;OAEjC,MAAK,qBAAqB,IAAG;;EAIjC,MAAM,UAAU,eACd,qBAAqB;GACnB,SAAS,aAAa;GACtB,MAAM,UAAU;GAChB,YAAY,MAAM;GACnB,CAAA,CACH;;uBAWE,YAiBS,MAAA,OAAA,EAAA;IAhBP,YAAA;IACC,UAAU,WAAA;IACV,eAAa,UAAA;IACb,iBAAe,MAAM;IACrB,MAAM,MAAM;IACZ,UAAU,MAAM;IAChB,uBAAoB;;2BASZ,CAPT,mBAOS,UAAA;KANN,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,OAAS,MAAM,MAAK,CAAA;KAC5C,UAAU,WAAA,SAAc,KAAA;KACxB,oBAAkB,MAAA,SAAQ,CAAC,YAAY;KACvC,MAAM;QAEP,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA,CAAA,CAAA"}

package/dist/components/calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","names":[],"sources":["../../../src/components/calendar/Calendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, shallowRef } from 'vue'\nimport {\n  CalendarRoot,\n  CalendarHeader,\n  CalendarHeading,\n  CalendarGrid,\n  CalendarGridHead,\n  CalendarGridRow,\n  CalendarHeadCell,\n  CalendarGridBody,\n  CalendarCell,\n  CalendarCellTrigger,\n  CalendarNext,\n  CalendarPrev,\n  MonthPickerRoot,\n  MonthPickerHeader,\n  MonthPickerHeading,\n  MonthPickerPrev,\n  MonthPickerNext,\n  MonthPickerGrid,\n  MonthPickerGridBody,\n  MonthPickerGridRow,\n  MonthPickerCell,\n  MonthPickerCellTrigger,\n} from 'reka-ui'\nimport { today, getLocalTimeZone, type DateValue } from '@internationalized/date'\nimport { calendarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport CalendarYearPicker from '../calendar-year-picker/CalendarYearPicker.vue'\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: DateValue\n  defaultPlaceholder?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateDisabled?: (date: DateValue) => boolean\n  isDateUnavailable?: (date: DateValue) => boolean\n  locale?: string\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  fixedWeeks?: boolean\n  numberOfMonths?: number\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  pagedNavigation?: boolean\n  preventDeselect?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  calendarLabel?: string\n  class?: ClassValue\n  /** Override classes on any named slot */\n  classNames?: Partial<{\n    base: ClassValue\n    header: ClassValue\n    navButton: ClassValue\n    navButtonIcon: ClassValue\n    heading: ClassValue\n    headingButton: ClassValue\n    grid: ClassValue\n    gridHeader: ClassValue\n    gridRow: ClassValue\n    headerCell: ClassValue\n    gridBody: ClassValue\n    cell: ClassValue\n    cellButton: ClassValue\n    monthGrid: ClassValue\n    monthGridBody: ClassValue\n    monthGridRow: ClassValue\n    monthCell: ClassValue\n  }>\n}>(), {\n  weekdayFormat: 'narrow',\n  fixedWeeks: false,\n  numberOfMonths: 1,\n  pagedNavigation: false,\n  preventDeselect: false,\n  readonly: false,\n  disabled: false,\n})\n\nconst modelValue = defineModel<DateValue>()\n\nconst slotFns = computed(() => calendarVariants())\n\n// View-switcher state: 'date' (default 7-col calendar), 'month' (3x4 months), 'year' (3x4 years)\ntype View = 'date' | 'month' | 'year'\nconst view = ref<View>('date')\n\n// Shared placeholder synced with CalendarRoot/MonthPickerRoot/YearPickerRoot.\n// NOTE: shallowRef preserves reka-ui's `DateValue` discriminated-union without\n// deep reactive unwrapping that would break structural type matching on bind sites.\nconst placeholder = shallowRef<DateValue>(\n  (props.defaultValue ?? props.defaultPlaceholder ?? today(getLocalTimeZone())) as DateValue\n)\n\nfunction cycleView(): void {\n  view.value = view.value === 'date' ? 'month' : view.value === 'month' ? 'year' : 'date'\n}\n\nfunction onMonthSelect(val: DateValue | DateValue[] | undefined): void {\n  if (!val) return\n  const next = Array.isArray(val) ? val[val.length - 1] : val\n  if (!next) return\n  placeholder.value = next\n  view.value = 'date'\n}\n\nfunction onYearSelect(val: DateValue | DateValue[] | undefined): void {\n  if (!val) return\n  const next = Array.isArray(val) ? val[val.length - 1] : val\n  if (!next) return\n  placeholder.value = next\n  view.value = 'month'\n}\n\nconst nextViewLabel = computed(() =>\n  view.value === 'date' ? 'month' : view.value === 'month' ? 'year' : 'date'\n)\n</script>\n\n<template>\n  <CalendarRoot\n    v-model=\"modelValue\"\n    v-model:placeholder=\"placeholder\"\n    :default-value=\"defaultValue\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-disabled=\"isDateDisabled\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :locale=\"locale\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths\"\n    :week-starts-on=\"weekStartsOn\"\n    :paged-navigation=\"pagedNavigation\"\n    :prevent-deselect=\"preventDeselect\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :calendar-label=\"calendarLabel\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n  >\n    <template #default=\"{ grid, weekDays }\">\n      <template v-if=\"view === 'date'\">\n        <CalendarHeader :class=\"composeClassName(slotFns.header(), props.classNames?.header)\">\n          <CalendarPrev\n            :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n            aria-label=\"Previous month\"\n          >\n            <svg\n              :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"15 18 9 12 15 6\" />\n            </svg>\n          </CalendarPrev>\n\n          <CalendarHeading\n            v-slot=\"{ headingValue }\"\n            :class=\"composeClassName(slotFns.heading(), props.classNames?.heading)\"\n          >\n            <button\n              type=\"button\"\n              :class=\"composeClassName(slotFns.headingButton(), props.classNames?.headingButton)\"\n              :aria-label=\"`Switch to ${nextViewLabel} view`\"\n              @click=\"cycleView\"\n            >\n              {{ headingValue }}\n            </button>\n          </CalendarHeading>\n\n          <CalendarNext\n            :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n            aria-label=\"Next month\"\n          >\n            <svg\n              :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"9 18 15 12 9 6\" />\n            </svg>\n          </CalendarNext>\n        </CalendarHeader>\n\n        <CalendarGrid\n          v-for=\"month in grid\"\n          :key=\"month.value.toString()\"\n          :class=\"composeClassName(slotFns.grid(), props.classNames?.grid)\"\n        >\n          <CalendarGridHead :class=\"composeClassName(slotFns.gridHeader(), props.classNames?.gridHeader)\">\n            <CalendarGridRow :class=\"composeClassName(slotFns.gridRow(), props.classNames?.gridRow)\">\n              <CalendarHeadCell\n                v-for=\"day in weekDays\"\n                :key=\"day\"\n                :class=\"composeClassName(slotFns.headerCell(), props.classNames?.headerCell)\"\n              >\n                {{ day }}\n              </CalendarHeadCell>\n            </CalendarGridRow>\n          </CalendarGridHead>\n          <CalendarGridBody :class=\"composeClassName(slotFns.gridBody(), props.classNames?.gridBody)\">\n            <CalendarGridRow\n              v-for=\"(week, weekIndex) in month.rows\"\n              :key=\"weekIndex\"\n              :class=\"composeClassName(slotFns.gridRow(), props.classNames?.gridRow)\"\n            >\n              <CalendarCell\n                v-for=\"day in week\"\n                :key=\"day.toString()\"\n                :date=\"day\"\n                :class=\"composeClassName(slotFns.cell(), props.classNames?.cell)\"\n              >\n                <CalendarCellTrigger\n                  :day=\"day\"\n                  :month=\"month.value\"\n                  :class=\"composeClassName(slotFns.cellButton(), props.classNames?.cellButton)\"\n                />\n              </CalendarCell>\n            </CalendarGridRow>\n          </CalendarGridBody>\n        </CalendarGrid>\n      </template>\n    </template>\n  </CalendarRoot>\n\n  <MonthPickerRoot\n    v-if=\"view === 'month'\"\n    :placeholder=\"placeholder\"\n    :locale=\"locale\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"onMonthSelect\"\n    @update:placeholder=\"(val: DateValue | undefined) => { if (val) placeholder = val }\"\n  >\n    <template #default=\"{ grid: monthGrid }\">\n      <MonthPickerHeader :class=\"composeClassName(slotFns.header(), props.classNames?.header)\">\n        <MonthPickerPrev\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Previous year\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </MonthPickerPrev>\n\n        <MonthPickerHeading\n          v-slot=\"{ headingValue }\"\n          :class=\"composeClassName(slotFns.heading(), props.classNames?.heading)\"\n        >\n          <button\n            type=\"button\"\n            :class=\"composeClassName(slotFns.headingButton(), props.classNames?.headingButton)\"\n            :aria-label=\"`Switch to ${nextViewLabel} view`\"\n            @click=\"cycleView\"\n          >\n            {{ headingValue }}\n          </button>\n        </MonthPickerHeading>\n\n        <MonthPickerNext\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Next year\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </MonthPickerNext>\n      </MonthPickerHeader>\n\n      <MonthPickerGrid :class=\"composeClassName(slotFns.monthGrid(), props.classNames?.monthGrid)\">\n        <MonthPickerGridBody :class=\"composeClassName(slotFns.monthGridBody(), props.classNames?.monthGridBody)\">\n          <MonthPickerGridRow\n            v-for=\"(row, i) in monthGrid.rows\"\n            :key=\"i\"\n            :class=\"composeClassName(slotFns.monthGridRow(), props.classNames?.monthGridRow)\"\n          >\n            <MonthPickerCell\n              v-for=\"monthValue in row\"\n              :key=\"monthValue.toString()\"\n              :date=\"monthValue\"\n            >\n              <MonthPickerCellTrigger\n                :month=\"monthValue\"\n                as=\"button\"\n                :class=\"composeClassName(slotFns.monthCell(), props.classNames?.monthCell)\"\n              />\n            </MonthPickerCell>\n          </MonthPickerGridRow>\n        </MonthPickerGridBody>\n      </MonthPickerGrid>\n    </template>\n  </MonthPickerRoot>\n\n  <CalendarYearPicker\n    v-if=\"view === 'year'\"\n    v-model:placeholder=\"placeholder\"\n    :locale=\"locale\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(props.class, props.classNames?.base)\"\n    @update:model-value=\"onYearSelect\"\n  >\n    <template #heading=\"{ headingValue }\">\n      <button\n        type=\"button\"\n        :class=\"composeClassName(slotFns.headingButton(), props.classNames?.headingButton)\"\n        :aria-label=\"`Switch to ${nextViewLabel} view`\"\n        @click=\"cycleView\"\n      >\n        {{ headingValue }}\n      </button>\n    </template>\n  </CalendarYearPicker>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Calendar.js","names":[],"sources":["../../../src/components/calendar/Calendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, shallowRef } from 'vue'\nimport {\n  CalendarRoot,\n  CalendarHeader,\n  CalendarHeading,\n  CalendarGrid,\n  CalendarGridHead,\n  CalendarGridRow,\n  CalendarHeadCell,\n  CalendarGridBody,\n  CalendarCell,\n  CalendarCellTrigger,\n  CalendarNext,\n  CalendarPrev,\n  MonthPickerRoot,\n  MonthPickerHeader,\n  MonthPickerHeading,\n  MonthPickerPrev,\n  MonthPickerNext,\n  MonthPickerGrid,\n  MonthPickerGridBody,\n  MonthPickerGridRow,\n  MonthPickerCell,\n  MonthPickerCellTrigger,\n} from 'reka-ui'\nimport { today, getLocalTimeZone, type DateValue } from '@internationalized/date'\nimport { calendarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport CalendarYearPicker from '../calendar-year-picker/CalendarYearPicker.vue'\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: DateValue\n  defaultPlaceholder?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateDisabled?: (date: DateValue) => boolean\n  isDateUnavailable?: (date: DateValue) => boolean\n  locale?: string\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  fixedWeeks?: boolean\n  numberOfMonths?: number\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  pagedNavigation?: boolean\n  preventDeselect?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  calendarLabel?: string\n  /** Initial focus state. */\n  initialFocus?: boolean\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** Navigate to next page. */\n  nextPage?: (placeholder: DateValue) => DateValue\n  /** Navigate to previous page. */\n  prevPage?: (placeholder: DateValue) => DateValue\n  /** Allow multiple date selections. */\n  multiple?: boolean\n  /** Disable days outside the current view. */\n  disableDaysOutsideCurrentView?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Render child as root element. */\n  asChild?: boolean\n  /** MonthPicker: disable specific months. */\n  isMonthDisabled?: (date: DateValue) => boolean\n  /** MonthPicker: mark specific months as unavailable. */\n  isMonthUnavailable?: (date: DateValue) => boolean\n  class?: ClassValue\n  /** Override classes on any named slot */\n  classNames?: Partial<{\n    base: ClassValue\n    header: ClassValue\n    navButton: ClassValue\n    navButtonIcon: ClassValue\n    heading: ClassValue\n    headingButton: ClassValue\n    grid: ClassValue\n    gridHeader: ClassValue\n    gridRow: ClassValue\n    headerCell: ClassValue\n    gridBody: ClassValue\n    cell: ClassValue\n    cellButton: ClassValue\n    monthGrid: ClassValue\n    monthGridBody: ClassValue\n    monthGridRow: ClassValue\n    monthCell: ClassValue\n  }>\n}>(), {\n  weekdayFormat: 'narrow',\n  fixedWeeks: false,\n  numberOfMonths: 1,\n  pagedNavigation: false,\n  preventDeselect: false,\n  readonly: false,\n  disabled: false,\n})\n\nconst modelValue = defineModel<DateValue>()\n\nconst slotFns = computed(() => calendarVariants())\n\n// View-switcher state: 'date' (default 7-col calendar), 'month' (3x4 months), 'year' (3x4 years)\ntype View = 'date' | 'month' | 'year'\nconst view = ref<View>('date')\n\n// Shared placeholder synced with CalendarRoot/MonthPickerRoot/YearPickerRoot.\n// NOTE: shallowRef preserves reka-ui's `DateValue` discriminated-union without\n// deep reactive unwrapping that would break structural type matching on bind sites.\nconst placeholder = shallowRef<DateValue>(\n  (props.defaultValue ?? props.defaultPlaceholder ?? today(getLocalTimeZone())) as DateValue\n)\n\nfunction cycleView(): void {\n  view.value = view.value === 'date' ? 'month' : view.value === 'month' ? 'year' : 'date'\n}\n\nfunction onMonthSelect(val: DateValue | DateValue[] | undefined): void {\n  if (!val) return\n  const next = Array.isArray(val) ? val[val.length - 1] : val\n  if (!next) return\n  placeholder.value = next\n  view.value = 'date'\n}\n\nfunction onYearSelect(val: DateValue | DateValue[] | undefined): void {\n  if (!val) return\n  const next = Array.isArray(val) ? val[val.length - 1] : val\n  if (!next) return\n  placeholder.value = next\n  view.value = 'month'\n}\n\nconst nextViewLabel = computed(() =>\n  view.value === 'date' ? 'month' : view.value === 'month' ? 'year' : 'date'\n)\n</script>\n\n<template>\n  <CalendarRoot\n    v-model=\"modelValue\"\n    v-model:placeholder=\"placeholder\"\n    :default-value=\"defaultValue\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-disabled=\"isDateDisabled\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :locale=\"locale\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths\"\n    :week-starts-on=\"weekStartsOn\"\n    :paged-navigation=\"pagedNavigation\"\n    :prevent-deselect=\"preventDeselect\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :calendar-label=\"calendarLabel\"\n    :initial-focus=\"initialFocus\"\n    :dir=\"dir\"\n    :next-page=\"nextPage\"\n    :prev-page=\"prevPage\"\n    :multiple=\"multiple\"\n    :disable-days-outside-current-view=\"disableDaysOutsideCurrentView\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n  >\n    <template #default=\"{ grid, weekDays }\">\n      <template v-if=\"view === 'date'\">\n        <CalendarHeader :class=\"composeClassName(slotFns.header(), props.classNames?.header)\">\n          <CalendarPrev\n            :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n            aria-label=\"Previous month\"\n          >\n            <svg\n              :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"15 18 9 12 15 6\" />\n            </svg>\n          </CalendarPrev>\n\n          <CalendarHeading\n            v-slot=\"{ headingValue }\"\n            :class=\"composeClassName(slotFns.heading(), props.classNames?.heading)\"\n          >\n            <button\n              type=\"button\"\n              :class=\"composeClassName(slotFns.headingButton(), props.classNames?.headingButton)\"\n              :aria-label=\"`Switch to ${nextViewLabel} view`\"\n              @click=\"cycleView\"\n            >\n              {{ headingValue }}\n            </button>\n          </CalendarHeading>\n\n          <CalendarNext\n            :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n            aria-label=\"Next month\"\n          >\n            <svg\n              :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"9 18 15 12 9 6\" />\n            </svg>\n          </CalendarNext>\n        </CalendarHeader>\n\n        <CalendarGrid\n          v-for=\"month in grid\"\n          :key=\"month.value.toString()\"\n          :class=\"composeClassName(slotFns.grid(), props.classNames?.grid)\"\n        >\n          <CalendarGridHead :class=\"composeClassName(slotFns.gridHeader(), props.classNames?.gridHeader)\">\n            <CalendarGridRow :class=\"composeClassName(slotFns.gridRow(), props.classNames?.gridRow)\">\n              <CalendarHeadCell\n                v-for=\"day in weekDays\"\n                :key=\"day\"\n                :class=\"composeClassName(slotFns.headerCell(), props.classNames?.headerCell)\"\n              >\n                {{ day }}\n              </CalendarHeadCell>\n            </CalendarGridRow>\n          </CalendarGridHead>\n          <CalendarGridBody :class=\"composeClassName(slotFns.gridBody(), props.classNames?.gridBody)\">\n            <CalendarGridRow\n              v-for=\"(week, weekIndex) in month.rows\"\n              :key=\"weekIndex\"\n              :class=\"composeClassName(slotFns.gridRow(), props.classNames?.gridRow)\"\n            >\n              <CalendarCell\n                v-for=\"day in week\"\n                :key=\"day.toString()\"\n                :date=\"day\"\n                :class=\"composeClassName(slotFns.cell(), props.classNames?.cell)\"\n              >\n                <CalendarCellTrigger\n                  :day=\"day\"\n                  :month=\"month.value\"\n                  :class=\"composeClassName(slotFns.cellButton(), props.classNames?.cellButton)\"\n                />\n              </CalendarCell>\n            </CalendarGridRow>\n          </CalendarGridBody>\n        </CalendarGrid>\n      </template>\n    </template>\n  </CalendarRoot>\n\n  <MonthPickerRoot\n    v-if=\"view === 'month'\"\n    :placeholder=\"placeholder\"\n    :locale=\"locale\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :initial-focus=\"initialFocus\"\n    :dir=\"dir\"\n    :next-page=\"nextPage\"\n    :prev-page=\"prevPage\"\n    :multiple=\"multiple\"\n    :is-month-disabled=\"isMonthDisabled\"\n    :is-month-unavailable=\"isMonthUnavailable\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"onMonthSelect\"\n    @update:placeholder=\"(val: DateValue | undefined) => { if (val) placeholder = val }\"\n  >\n    <template #default=\"{ grid: monthGrid }\">\n      <MonthPickerHeader :class=\"composeClassName(slotFns.header(), props.classNames?.header)\">\n        <MonthPickerPrev\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Previous year\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </MonthPickerPrev>\n\n        <MonthPickerHeading\n          v-slot=\"{ headingValue }\"\n          :class=\"composeClassName(slotFns.heading(), props.classNames?.heading)\"\n        >\n          <button\n            type=\"button\"\n            :class=\"composeClassName(slotFns.headingButton(), props.classNames?.headingButton)\"\n            :aria-label=\"`Switch to ${nextViewLabel} view`\"\n            @click=\"cycleView\"\n          >\n            {{ headingValue }}\n          </button>\n        </MonthPickerHeading>\n\n        <MonthPickerNext\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Next year\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </MonthPickerNext>\n      </MonthPickerHeader>\n\n      <MonthPickerGrid :class=\"composeClassName(slotFns.monthGrid(), props.classNames?.monthGrid)\">\n        <MonthPickerGridBody :class=\"composeClassName(slotFns.monthGridBody(), props.classNames?.monthGridBody)\">\n          <MonthPickerGridRow\n            v-for=\"(row, i) in monthGrid.rows\"\n            :key=\"i\"\n            :class=\"composeClassName(slotFns.monthGridRow(), props.classNames?.monthGridRow)\"\n          >\n            <MonthPickerCell\n              v-for=\"monthValue in row\"\n              :key=\"monthValue.toString()\"\n              :date=\"monthValue\"\n            >\n              <MonthPickerCellTrigger\n                :month=\"monthValue\"\n                as=\"button\"\n                :class=\"composeClassName(slotFns.monthCell(), props.classNames?.monthCell)\"\n              />\n            </MonthPickerCell>\n          </MonthPickerGridRow>\n        </MonthPickerGridBody>\n      </MonthPickerGrid>\n    </template>\n  </MonthPickerRoot>\n\n  <CalendarYearPicker\n    v-if=\"view === 'year'\"\n    v-model:placeholder=\"placeholder\"\n    :locale=\"locale\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(props.class, props.classNames?.base)\"\n    @update:model-value=\"onYearSelect\"\n  >\n    <template #heading=\"{ headingValue }\">\n      <button\n        type=\"button\"\n        :class=\"composeClassName(slotFns.headingButton(), props.classNames?.headingButton)\"\n        :aria-label=\"`Switch to ${nextViewLabel} view`\"\n        @click=\"cycleView\"\n      >\n        {{ headingValue }}\n      </button>\n    </template>\n  </CalendarYearPicker>\n</template>\n"],"mappings":""}

package/dist/components/calendar/Calendar.vue_vue_type_script_setup_true_lang.js

@@ -42,6 +42,16 @@ var Calendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			default: false
 		},
 		calendarLabel: {},
+		initialFocus: { type: Boolean },
+		dir: {},
+		nextPage: {},
+		prevPage: {},
+		multiple: { type: Boolean },
+		disableDaysOutsideCurrentView: { type: Boolean },
+		as: {},
+		asChild: { type: Boolean },
+		isMonthDisabled: {},
+		isMonthUnavailable: {},
 		class: { type: [
 			String,
 			Boolean,
@@ -102,6 +112,14 @@ var Calendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					readonly: __props.readonly,
 					disabled: __props.disabled,
 					"calendar-label": __props.calendarLabel,
+					"initial-focus": __props.initialFocus,
+					dir: __props.dir,
+					"next-page": __props.nextPage,
+					"prev-page": __props.prevPage,
+					multiple: __props.multiple,
+					"disable-days-outside-current-view": __props.disableDaysOutsideCurrentView,
+					as: __props.as,
+					"as-child": __props.asChild,
 					class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base))
 				}, {
 					default: withCtx(({ grid, weekDays }) => [view.value === "date" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(CalendarHeader), { class: normalizeClass(unref(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
@@ -226,6 +244,14 @@ var Calendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"readonly",
 					"disabled",
 					"calendar-label",
+					"initial-focus",
+					"dir",
+					"next-page",
+					"prev-page",
+					"multiple",
+					"disable-days-outside-current-view",
+					"as",
+					"as-child",
 					"class"
 				]),
 				view.value === "month" ? (openBlock(), createBlock(unref(MonthPickerRoot), {
@@ -236,6 +262,15 @@ var Calendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"max-value": __props.maxValue,
 					readonly: __props.readonly,
 					disabled: __props.disabled,
+					"initial-focus": __props.initialFocus,
+					dir: __props.dir,
+					"next-page": __props.nextPage,
+					"prev-page": __props.prevPage,
+					multiple: __props.multiple,
+					"is-month-disabled": __props.isMonthDisabled,
+					"is-month-unavailable": __props.isMonthUnavailable,
+					as: __props.as,
+					"as-child": __props.asChild,
 					class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 					"onUpdate:modelValue": onMonthSelect,
 					"onUpdate:placeholder": _cache[2] || (_cache[2] = (val) => {
@@ -328,6 +363,15 @@ var Calendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"max-value",
 					"readonly",
 					"disabled",
+					"initial-focus",
+					"dir",
+					"next-page",
+					"prev-page",
+					"multiple",
+					"is-month-disabled",
+					"is-month-unavailable",
+					"as",
+					"as-child",
 					"class"
 				])) : createCommentVNode("", true),
 				view.value === "year" ? (openBlock(), createBlock(CalendarYearPicker_default, {