@sparklingopinions/sparkling-ui 0.3.0 → 0.4.0

package/dist/aliases.d.ts

@@ -589,15 +589,39 @@ export declare const InlineField: import("vue").DefineComponent<EditableProps &
 /** @deprecated Renamed to EditableProps. */
 export type InlineFieldProps = EditableProps;
 /** @deprecated Renamed to PropertyList. */
-export declare const InlineForm: import("vue").DefineComponent<{
-    fields: PropertyListField[];
-} & {
-    modelValue: Record<string, unknown>;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (id: string, value: unknown) => any;
-    submit: () => any;
-    "update:modelValue": (value: Record<string, unknown>) => any;
-}, string, import("vue").PublicProps, Readonly<{
+export declare const InlineForm: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+        fields: PropertyListField[];
+    } & {
+        modelValue: Record<string, unknown>;
+    }> & Readonly<{
+        onChange?: ((id: string, value: unknown) => any) | undefined;
+        onSubmit?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (id: string, value: unknown) => any;
+        submit: () => any;
+        "update:modelValue": (value: Record<string, unknown>) => any;
+    }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        fields: PropertyListField[];
+    } & {
+        modelValue: Record<string, unknown>;
+    }> & Readonly<{
+        onChange?: ((id: string, value: unknown) => any) | undefined;
+        onSubmit?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+    }>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{
     fields: PropertyListField[];
 } & {
     modelValue: Record<string, unknown>;
@@ -605,7 +629,20 @@ export declare const InlineForm: import("vue").DefineComponent<{
     onChange?: ((id: string, value: unknown) => any) | undefined;
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (id: string, value: unknown) => any;
+    submit: () => any;
+    "update:modelValue": (value: Record<string, unknown>) => any;
+}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        [x: `field-${string}`]: ((props: {
+            id: string;
+            field: PropertyListField;
+            update: (value: unknown) => void;
+            value: unknown;
+        }) => any) | undefined;
+    };
+});
 /** @deprecated Renamed to PropertyListField. */
 export type InlineFormField = PropertyListField;
 /** @deprecated Renamed to Collapsible. */

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","names":["_sfc_main","Calendar_vue_vue_type_script_setup_true_lang_default","Calendar_default"],"sources":["../../../src/components/Calendar/Calendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  addDays,\n  addMonths,\n  differenceInDays,\n  isSameDay,\n  isSameMonth,\n  startOfDay,\n  startOfMonth,\n  startOfWeek\n} from '../../utils/dates'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport ChevronIcon from '../internal/ChevronIcon.vue'\n\nexport interface CalendarProps {\n  /** Selects a day; with `end`, a range. */\n  start?: Date | null\n  end?: Date | null\n  /** For the month's name; the browser's language by default. */\n  locale?: string\n  /** Monday first. */\n  weekdays?: string[]\n  previousLabel?: string\n  nextLabel?: string\n}\n\nconst props = withDefaults(defineProps<CalendarProps>(), {\n  start: null,\n  end: null,\n  locale: undefined,\n  weekdays: () => ['M', 'T', 'W', 'T', 'F', 'S', 'S'],\n  previousLabel: 'Previous month',\n  nextLabel: 'Next month'\n})\n\nconst emit = defineEmits<{ pick: [date: Date] }>()\n\nconst view = ref(startOfMonth(props.end ?? props.start ?? new Date()))\n\n// Follows the selection to its month, when it's picked elsewhere (a shortcut, say).\nwatch(\n  () => props.end ?? props.start,\n  (date) => {\n    if (date) view.value = startOfMonth(date)\n  }\n)\n\nconst title = computed(() =>\n  new Intl.DateTimeFormat(props.locale, { month: 'long', year: 'numeric' }).format(view.value)\n)\n\nconst shiftMonth = (months: number) => (view.value = addMonths(view.value, months))\n\nconst cells = computed(() => {\n  const first = startOfWeek(view.value)\n  const last = addDays(addMonths(view.value, 1), -1)\n  const count = Math.ceil((differenceInDays(last, first) + 1) / 7) * 7\n  const today = startOfDay(new Date())\n  const [start, end] = [props.start, props.end].map((date) => (date ? startOfDay(date) : null))\n  const ranged = !!start && !!end && !isSameDay(start, end)\n  const [low, high] = ranged ? [start!, end!].sort((a, b) => a.getTime() - b.getTime()) : []\n\n  return Array.from({ length: count }, (_, i) => {\n    const date = addDays(first, i)\n    const isStart = !!start && isSameDay(date, start)\n    const isEnd = !!end && isSameDay(date, end)\n    const selected = isStart || isEnd\n    const inRange = ranged && date >= low! && date <= high!\n    const isToday = isSameDay(date, today)\n    const column = i % 7\n\n    return {\n      key: date.toISOString(),\n      date,\n      label: date.getDate(),\n      selected,\n      isToday,\n      // The range is a band behind the days, rounded where it starts, ends or wraps.\n      band: inRange\n        ? ['bg-sui-accent-wash', (isStart || column === 0) && 'rounded-l-lg', (isEnd || column === 6) && 'rounded-r-lg']\n        : '',\n      classes: selected\n        ? 'bg-sui-accent-solid font-semibold text-sui-on-accent'\n        : [\n            'hover:bg-sui-sunken',\n            isToday\n              ? 'font-semibold text-sui-accent ring-1 ring-sui-accent-line ring-inset'\n              : inRange\n                ? 'font-medium text-sui-accent'\n                : !isSameMonth(date, view.value) || date > today\n                  ? 'text-sui-ink-muted'\n                  : 'text-sui-ink'\n          ]\n    }\n  })\n})\n</script>\n\n<!-- A month of days, weeks from Monday: today outlined with a dot, future days and other months muted. Picking a day\n     emits it; the host decides what it selects. -->\n<template>\n  <div>\n    <div class=\"flex h-11 items-center justify-between\">\n      <span class=\"pl-1.5 text-13 font-semibold text-sui-ink\">{{ title }}</span>\n      <div class=\"flex gap-0.5\">\n        <Tooltip :text=\"previousLabel\">\n          <button\n            :aria-label=\"previousLabel\"\n            class=\"flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-sui-sunken focus-visible:sui-ring\"\n            type=\"button\"\n            @click=\"shiftMonth(-1)\"\n          >\n            <ChevronIcon class=\"h-4 w-4 fill-sui-ink-body stroke-sui-ink-body\" direction=\"left\" />\n          </button>\n        </Tooltip>\n        <Tooltip :text=\"nextLabel\">\n          <button\n            :aria-label=\"nextLabel\"\n            class=\"flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-sui-sunken focus-visible:sui-ring\"\n            type=\"button\"\n            @click=\"shiftMonth(1)\"\n          >\n            <ChevronIcon class=\"h-4 w-4 fill-sui-ink-body stroke-sui-ink-body\" direction=\"right\" />\n          </button>\n        </Tooltip>\n      </div>\n    </div>\n    <div aria-hidden=\"true\" class=\"grid h-5.5 grid-cols-7 items-center\">\n      <span v-for=\"(day, i) in weekdays\" :key=\"i\" class=\"text-center text-11 font-semibold text-sui-ink-muted\">\n        {{ day }}\n      </span>\n    </div>\n    <div class=\"mt-0.5 grid grid-cols-7 gap-y-0.5\">\n      <button\n        v-for=\"cell in cells\"\n        :key=\"cell.key\"\n        :aria-current=\"cell.isToday ? 'date' : undefined\"\n        :aria-label=\"cell.date.toLocaleDateString(locale, { dateStyle: 'full' })\"\n        :aria-pressed=\"cell.selected\"\n        :class=\"['group flex h-9 items-center justify-center outline-hidden', cell.band]\"\n        type=\"button\"\n        @click=\"emit('pick', cell.date)\"\n      >\n        <span\n          class=\"relative flex h-8.5 w-9 items-center justify-center rounded-lg text-13 tabular-nums transition-colors group-focus-visible:sui-ring\"\n          :class=\"cell.classes\"\n        >\n          {{ cell.label }}\n          <span\n            v-if=\"cell.isToday\"\n            class=\"absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full\"\n            :class=\"cell.selected ? 'bg-sui-on-accent' : 'bg-sui-accent-solid'\"\n          />\n        </span>\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Calendar.js","names":["_sfc_main","Calendar_vue_vue_type_script_setup_true_lang_default","Calendar_default"],"sources":["../../../src/components/Calendar/Calendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  addDays,\n  addMonths,\n  differenceInDays,\n  isSameDay,\n  isSameMonth,\n  startOfDay,\n  startOfMonth,\n  startOfWeek\n} from '../../utils/dates'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport ChevronIcon from '../internal/ChevronIcon.vue'\n\nexport interface CalendarProps {\n  /** Selects a day; with `end`, a range. */\n  start?: Date | null\n  end?: Date | null\n  /** For the month's name and the weekdays; the browser's language by default. */\n  locale?: string\n  /** Monday first; the locale's narrow names by default. */\n  weekdays?: string[]\n  previousLabel?: string\n  nextLabel?: string\n}\n\nconst props = withDefaults(defineProps<CalendarProps>(), {\n  start: null,\n  end: null,\n  locale: undefined,\n  weekdays: undefined,\n  previousLabel: 'Previous month',\n  nextLabel: 'Next month'\n})\n\nconst emit = defineEmits<{ pick: [date: Date] }>()\n\nconst view = ref(startOfMonth(props.end ?? props.start ?? new Date()))\n\n// Follows the selection to its month, when it's picked elsewhere (a shortcut, say).\nwatch(\n  () => props.end ?? props.start,\n  (date) => {\n    if (date) view.value = startOfMonth(date)\n  }\n)\n\nconst title = computed(() =>\n  new Intl.DateTimeFormat(props.locale, { month: 'long', year: 'numeric' }).format(view.value)\n)\n\n// 1 January 2024 was a Monday.\nconst dayNames = computed(\n  () =>\n    props.weekdays ??\n    Array.from({ length: 7 }, (_, i) =>\n      new Intl.DateTimeFormat(props.locale, { weekday: 'narrow' }).format(new Date(2024, 0, 1 + i))\n    )\n)\n\nconst shiftMonth = (months: number) => (view.value = addMonths(view.value, months))\n\nconst cells = computed(() => {\n  const first = startOfWeek(view.value)\n  const last = addDays(addMonths(view.value, 1), -1)\n  const count = Math.ceil((differenceInDays(last, first) + 1) / 7) * 7\n  const today = startOfDay(new Date())\n  const [start, end] = [props.start, props.end].map((date) => (date ? startOfDay(date) : null))\n  const ranged = !!start && !!end && !isSameDay(start, end)\n  const [low, high] = ranged ? [start!, end!].sort((a, b) => a.getTime() - b.getTime()) : []\n\n  return Array.from({ length: count }, (_, i) => {\n    const date = addDays(first, i)\n    const isStart = !!start && isSameDay(date, start)\n    const isEnd = !!end && isSameDay(date, end)\n    const selected = isStart || isEnd\n    const inRange = ranged && date >= low! && date <= high!\n    const isToday = isSameDay(date, today)\n    const column = i % 7\n\n    return {\n      key: date.toISOString(),\n      date,\n      label: date.getDate(),\n      selected,\n      isToday,\n      // The range is a band behind the days, rounded where it starts, ends or wraps.\n      band: inRange\n        ? ['bg-sui-accent-wash', (isStart || column === 0) && 'rounded-l-lg', (isEnd || column === 6) && 'rounded-r-lg']\n        : '',\n      classes: selected\n        ? 'bg-sui-accent-solid font-semibold text-sui-on-accent'\n        : [\n            'hover:bg-sui-sunken',\n            isToday\n              ? 'font-semibold text-sui-accent ring-1 ring-sui-accent-line ring-inset'\n              : inRange\n                ? 'font-medium text-sui-accent'\n                : !isSameMonth(date, view.value) || date > today\n                  ? 'text-sui-ink-muted'\n                  : 'text-sui-ink'\n          ]\n    }\n  })\n})\n</script>\n\n<!-- A month of days, weeks from Monday: today outlined with a dot, future days and other months muted. Picking a day\n     emits it; the host decides what it selects. -->\n<template>\n  <div>\n    <div class=\"flex h-11 items-center justify-between\">\n      <span class=\"pl-1.5 text-13 font-semibold text-sui-ink\">{{ title }}</span>\n      <div class=\"flex gap-0.5\">\n        <Tooltip :text=\"previousLabel\">\n          <button\n            :aria-label=\"previousLabel\"\n            class=\"flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-sui-sunken focus-visible:sui-ring\"\n            type=\"button\"\n            @click=\"shiftMonth(-1)\"\n          >\n            <ChevronIcon class=\"h-4 w-4 fill-sui-ink-body stroke-sui-ink-body\" direction=\"left\" />\n          </button>\n        </Tooltip>\n        <Tooltip :text=\"nextLabel\">\n          <button\n            :aria-label=\"nextLabel\"\n            class=\"flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-sui-sunken focus-visible:sui-ring\"\n            type=\"button\"\n            @click=\"shiftMonth(1)\"\n          >\n            <ChevronIcon class=\"h-4 w-4 fill-sui-ink-body stroke-sui-ink-body\" direction=\"right\" />\n          </button>\n        </Tooltip>\n      </div>\n    </div>\n    <div aria-hidden=\"true\" class=\"grid h-5.5 grid-cols-7 items-center\">\n      <span v-for=\"(day, i) in dayNames\" :key=\"i\" class=\"text-center text-11 font-semibold text-sui-ink-muted\">\n        {{ day }}\n      </span>\n    </div>\n    <div class=\"mt-0.5 grid grid-cols-7 gap-y-0.5\">\n      <button\n        v-for=\"cell in cells\"\n        :key=\"cell.key\"\n        :aria-current=\"cell.isToday ? 'date' : undefined\"\n        :aria-label=\"cell.date.toLocaleDateString(locale, { dateStyle: 'full' })\"\n        :aria-pressed=\"cell.selected\"\n        :class=\"['group flex h-9 items-center justify-center outline-hidden', cell.band]\"\n        type=\"button\"\n        @click=\"emit('pick', cell.date)\"\n      >\n        <span\n          class=\"relative flex h-8.5 w-9 items-center justify-center rounded-lg text-13 tabular-nums transition-colors group-focus-visible:sui-ring\"\n          :class=\"cell.classes\"\n        >\n          {{ cell.label }}\n          <span\n            v-if=\"cell.isToday\"\n            class=\"absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full\"\n            :class=\"cell.selected ? 'bg-sui-on-accent' : 'bg-sui-accent-solid'\"\n          />\n        </span>\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/Calendar/Calendar.vue.d.ts

@@ -2,9 +2,9 @@ export interface CalendarProps {
     /** Selects a day; with `end`, a range. */
     start?: Date | null;
     end?: Date | null;
-    /** For the month's name; the browser's language by default. */
+    /** For the month's name and the weekdays; the browser's language by default. */
     locale?: string;
-    /** Monday first. */
+    /** Monday first; the locale's narrow names by default. */
     weekdays?: string[];
     previousLabel?: string;
     nextLabel?: string;

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

@@ -17,15 +17,7 @@ var T = { class: "flex h-11 items-center justify-between" }, E = { class: "pl-1.
 		start: { default: null },
 		end: { default: null },
 		locale: { default: void 0 },
-		weekdays: { default: () => [
-			"M",
-			"T",
-			"W",
-			"T",
-			"F",
-			"S",
-			"S"
-		] },
+		weekdays: { default: void 0 },
 		previousLabel: { default: "Previous month" },
 		nextLabel: { default: "Next month" }
 	},
@@ -38,7 +30,7 @@ var T = { class: "flex h-11 items-center justify-between" }, E = { class: "pl-1.
 		let L = d(() => new Intl.DateTimeFormat(P.locale, {
 			month: "long",
 			year: "numeric"
-		}).format(I.value)), R = (e) => I.value = n(I.value, e), z = d(() => {
+		}).format(I.value)), R = d(() => P.weekdays ?? Array.from({ length: 7 }, (e, t) => new Intl.DateTimeFormat(P.locale, { weekday: "narrow" }).format(new Date(2024, 0, 1 + t)))), z = (e) => I.value = n(I.value, e), B = d(() => {
 			let e = c(I.value), s = t(n(I.value, 1), -1), l = Math.ceil((r(s, e) + 1) / 7) * 7, u = o(/* @__PURE__ */ new Date()), [d, f] = [P.start, P.end].map((e) => e ? o(e) : null), p = !!d && !!f && !i(d, f), [m, h] = p ? [d, f].sort((e, t) => e.getTime() - t.getTime()) : [];
 			return Array.from({ length: l }, (n, r) => {
 				let o = t(e, r), s = !!d && i(o, d), c = !!f && i(o, f), l = s || c, g = p && o >= m && o <= h, _ = i(o, u), v = r % 7;
@@ -63,7 +55,7 @@ var T = { class: "flex h-11 items-center justify-between" }, E = { class: "pl-1.
 					"aria-label": _.previousLabel,
 					class: "flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-sui-sunken focus-visible:sui-ring",
 					type: "button",
-					onClick: n[0] ||= (e) => R(-1)
+					onClick: n[0] ||= (e) => z(-1)
 				}, [g(l, {
 					class: "h-4 w-4 fill-sui-ink-body stroke-sui-ink-body",
 					direction: "left"
@@ -74,18 +66,18 @@ var T = { class: "flex h-11 items-center justify-between" }, E = { class: "pl-1.
 					"aria-label": _.nextLabel,
 					class: "flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-sui-sunken focus-visible:sui-ring",
 					type: "button",
-					onClick: n[1] ||= (e) => R(1)
+					onClick: n[1] ||= (e) => z(1)
 				}, [g(l, {
 					class: "h-4 w-4 fill-sui-ink-body stroke-sui-ink-body",
 					direction: "right"
 				})], 8, k)]),
 				_: 1
 			}, 8, ["text"])])]),
-			m("div", A, [(y(!0), p(u, null, x(_.weekdays, (e, t) => (y(), p("span", {
+			m("div", A, [(y(!0), p(u, null, x(R.value, (e, t) => (y(), p("span", {
 				key: t,
 				class: "text-center text-11 font-semibold text-sui-ink-muted"
 			}, S(e), 1))), 128))]),
-			m("div", j, [(y(!0), p(u, null, x(z.value, (e) => (y(), p("button", {
+			m("div", j, [(y(!0), p(u, null, x(B.value, (e) => (y(), p("button", {
 				key: e.key,
 				"aria-current": e.isToday ? "date" : void 0,
 				"aria-label": e.date.toLocaleDateString(_.locale, { dateStyle: "full" }),

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_createVNode","Tooltip","_withCtx","ChevronIcon","_Fragment","_renderList","_normalizeClass","_createTextVNode","_createCommentVNode","Tooltip_default","ChevronIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","Calendar_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","view","ref","startOfMonth","date","title","computed","shiftMonth","addMonths","months","cells","first","startOfWeek","last","addDays","count","differenceInDays","today","startOfDay","start","end","ranged","isSameDay","low","high","a","b","i","isStart","isEnd","selected","inRange","isToday","column","isSameMonth","openBlock","createElementBlock","createElementVNode","toDisplayString","createVNode","withCtx","_cache","Fragment","renderList","day","cell","normalizeClass","createTextVNode","createCommentVNode"],"sources":["../../../src/components/Calendar/Calendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  addDays,\n  addMonths,\n  differenceInDays,\n  isSameDay,\n  isSameMonth,\n  startOfDay,\n  startOfMonth,\n  startOfWeek\n} from '../../utils/dates'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport ChevronIcon from '../internal/ChevronIcon.vue'\n\nexport interface CalendarProps {\n  /** Selects a day; with `end`, a range. */\n  start?: Date | null\n  end?: Date | null\n  /** For the month's name; the browser's language by default. */\n  locale?: string\n  /** Monday first. */\n  weekdays?: string[]\n  previousLabel?: string\n  nextLabel?: string\n}\n\nconst props = withDefaults(defineProps<CalendarProps>(), {\n  start: null,\n  end: null,\n  locale: undefined,\n  weekdays: () => ['M', 'T', 'W', 'T', 'F', 'S', 'S'],\n  previousLabel: 'Previous month',\n  nextLabel: 'Next month'\n})\n\nconst emit = defineEmits<{ pick: [date: Date] }>()\n\nconst view = ref(startOfMonth(props.end ?? props.start ?? new Date()))\n\n// Follows the selection to its month, when it's picked elsewhere (a shortcut, say).\nwatch(\n  () => props.end ?? props.start,\n  (date) => {\n    if (date) view.value = startOfMonth(date)\n  }\n)\n\nconst title = computed(() =>\n  new Intl.DateTimeFormat(props.locale, { month: 'long', year: 'numeric' }).format(view.value)\n)\n\nconst shiftMonth = (months: number) => (view.value = addMonths(view.value, months))\n\nconst cells = computed(() => {\n  const first = startOfWeek(view.value)\n  const last = addDays(addMonths(view.value, 1), -1)\n  const count = Math.ceil((differenceInDays(last, first) + 1) / 7) * 7\n  const today = startOfDay(new Date())\n  const [start, end] = [props.start, props.end].map((date) => (date ? startOfDay(date) : null))\n  const ranged = !!start && !!end && !isSameDay(start, end)\n  const [low, high] = ranged ? [start!, end!].sort((a, b) => a.getTime() - b.getTime()) : []\n\n  return Array.from({ length: count }, (_, i) => {\n    const date = addDays(first, i)\n    const isStart = !!start && isSameDay(date, start)\n    const isEnd = !!end && isSameDay(date, end)\n    const selected = isStart || isEnd\n    const inRange = ranged && date >= low! && date <= high!\n    const isToday = isSameDay(date, today)\n    const column = i % 7\n\n    return {\n      key: date.toISOString(),\n      date,\n      label: date.getDate(),\n      selected,\n      isToday,\n      // The range is a band behind the days, rounded where it starts, ends or wraps.\n      band: inRange\n        ? ['bg-sui-accent-wash', (isStart || column === 0) && 'rounded-l-lg', (isEnd || column === 6) && 'rounded-r-lg']\n        : '',\n      classes: selected\n        ? 'bg-sui-accent-solid font-semibold text-sui-on-accent'\n        : [\n            'hover:bg-sui-sunken',\n            isToday\n              ? 'font-semibold text-sui-accent ring-1 ring-sui-accent-line ring-inset'\n              : inRange\n                ? 'font-medium text-sui-accent'\n                : !isSameMonth(date, view.value) || date > today\n                  ? 'text-sui-ink-muted'\n                  : 'text-sui-ink'\n          ]\n    }\n  })\n})\n</script>\n\n<!-- A month of days, weeks from Monday: today outlined with a dot, future days and other months muted. Picking a day\n     emits it; the host decides what it selects. -->\n<template>\n  <div>\n    <div class=\"flex h-11 items-center justify-between\">\n      <span class=\"pl-1.5 text-13 font-semibold text-sui-ink\">{{ title }}</span>\n      <div class=\"flex gap-0.5\">\n        <Tooltip :text=\"previousLabel\">\n          <button\n            :aria-label=\"previousLabel\"\n            class=\"flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-sui-sunken focus-visible:sui-ring\"\n            type=\"button\"\n            @click=\"shiftMonth(-1)\"\n          >\n            <ChevronIcon class=\"h-4 w-4 fill-sui-ink-body stroke-sui-ink-body\" direction=\"left\" />\n          </button>\n        </Tooltip>\n        <Tooltip :text=\"nextLabel\">\n          <button\n            :aria-label=\"nextLabel\"\n            class=\"flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-sui-sunken focus-visible:sui-ring\"\n            type=\"button\"\n            @click=\"shiftMonth(1)\"\n          >\n            <ChevronIcon class=\"h-4 w-4 fill-sui-ink-body stroke-sui-ink-body\" direction=\"right\" />\n          </button>\n        </Tooltip>\n      </div>\n    </div>\n    <div aria-hidden=\"true\" class=\"grid h-5.5 grid-cols-7 items-center\">\n      <span v-for=\"(day, i) in weekdays\" :key=\"i\" class=\"text-center text-11 font-semibold text-sui-ink-muted\">\n        {{ day }}\n      </span>\n    </div>\n    <div class=\"mt-0.5 grid grid-cols-7 gap-y-0.5\">\n      <button\n        v-for=\"cell in cells\"\n        :key=\"cell.key\"\n        :aria-current=\"cell.isToday ? 'date' : undefined\"\n        :aria-label=\"cell.date.toLocaleDateString(locale, { dateStyle: 'full' })\"\n        :aria-pressed=\"cell.selected\"\n        :class=\"['group flex h-9 items-center justify-center outline-hidden', cell.band]\"\n        type=\"button\"\n        @click=\"emit('pick', cell.date)\"\n      >\n        <span\n          class=\"relative flex h-8.5 w-9 items-center justify-center rounded-lg text-13 tabular-nums transition-colors group-focus-visible:sui-ring\"\n          :class=\"cell.classes\"\n        >\n          {{ cell.label }}\n          <span\n            v-if=\"cell.isToday\"\n            class=\"absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full\"\n            :class=\"cell.selected ? 'bg-sui-on-accent' : 'bg-sui-accent-solid'\"\n          />\n        </span>\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Calendar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_createVNode","Tooltip","_withCtx","ChevronIcon","_Fragment","_renderList","_normalizeClass","_createTextVNode","_createCommentVNode","Tooltip_default","ChevronIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","Calendar_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","view","ref","startOfMonth","date","title","computed","dayNames","i","shiftMonth","addMonths","months","cells","first","startOfWeek","last","addDays","count","differenceInDays","today","startOfDay","start","end","ranged","isSameDay","low","high","a","b","isStart","isEnd","selected","inRange","isToday","column","isSameMonth","openBlock","createElementBlock","createElementVNode","toDisplayString","createVNode","withCtx","_cache","Fragment","renderList","day","cell","normalizeClass","createTextVNode","createCommentVNode"],"sources":["../../../src/components/Calendar/Calendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  addDays,\n  addMonths,\n  differenceInDays,\n  isSameDay,\n  isSameMonth,\n  startOfDay,\n  startOfMonth,\n  startOfWeek\n} from '../../utils/dates'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport ChevronIcon from '../internal/ChevronIcon.vue'\n\nexport interface CalendarProps {\n  /** Selects a day; with `end`, a range. */\n  start?: Date | null\n  end?: Date | null\n  /** For the month's name and the weekdays; the browser's language by default. */\n  locale?: string\n  /** Monday first; the locale's narrow names by default. */\n  weekdays?: string[]\n  previousLabel?: string\n  nextLabel?: string\n}\n\nconst props = withDefaults(defineProps<CalendarProps>(), {\n  start: null,\n  end: null,\n  locale: undefined,\n  weekdays: undefined,\n  previousLabel: 'Previous month',\n  nextLabel: 'Next month'\n})\n\nconst emit = defineEmits<{ pick: [date: Date] }>()\n\nconst view = ref(startOfMonth(props.end ?? props.start ?? new Date()))\n\n// Follows the selection to its month, when it's picked elsewhere (a shortcut, say).\nwatch(\n  () => props.end ?? props.start,\n  (date) => {\n    if (date) view.value = startOfMonth(date)\n  }\n)\n\nconst title = computed(() =>\n  new Intl.DateTimeFormat(props.locale, { month: 'long', year: 'numeric' }).format(view.value)\n)\n\n// 1 January 2024 was a Monday.\nconst dayNames = computed(\n  () =>\n    props.weekdays ??\n    Array.from({ length: 7 }, (_, i) =>\n      new Intl.DateTimeFormat(props.locale, { weekday: 'narrow' }).format(new Date(2024, 0, 1 + i))\n    )\n)\n\nconst shiftMonth = (months: number) => (view.value = addMonths(view.value, months))\n\nconst cells = computed(() => {\n  const first = startOfWeek(view.value)\n  const last = addDays(addMonths(view.value, 1), -1)\n  const count = Math.ceil((differenceInDays(last, first) + 1) / 7) * 7\n  const today = startOfDay(new Date())\n  const [start, end] = [props.start, props.end].map((date) => (date ? startOfDay(date) : null))\n  const ranged = !!start && !!end && !isSameDay(start, end)\n  const [low, high] = ranged ? [start!, end!].sort((a, b) => a.getTime() - b.getTime()) : []\n\n  return Array.from({ length: count }, (_, i) => {\n    const date = addDays(first, i)\n    const isStart = !!start && isSameDay(date, start)\n    const isEnd = !!end && isSameDay(date, end)\n    const selected = isStart || isEnd\n    const inRange = ranged && date >= low! && date <= high!\n    const isToday = isSameDay(date, today)\n    const column = i % 7\n\n    return {\n      key: date.toISOString(),\n      date,\n      label: date.getDate(),\n      selected,\n      isToday,\n      // The range is a band behind the days, rounded where it starts, ends or wraps.\n      band: inRange\n        ? ['bg-sui-accent-wash', (isStart || column === 0) && 'rounded-l-lg', (isEnd || column === 6) && 'rounded-r-lg']\n        : '',\n      classes: selected\n        ? 'bg-sui-accent-solid font-semibold text-sui-on-accent'\n        : [\n            'hover:bg-sui-sunken',\n            isToday\n              ? 'font-semibold text-sui-accent ring-1 ring-sui-accent-line ring-inset'\n              : inRange\n                ? 'font-medium text-sui-accent'\n                : !isSameMonth(date, view.value) || date > today\n                  ? 'text-sui-ink-muted'\n                  : 'text-sui-ink'\n          ]\n    }\n  })\n})\n</script>\n\n<!-- A month of days, weeks from Monday: today outlined with a dot, future days and other months muted. Picking a day\n     emits it; the host decides what it selects. -->\n<template>\n  <div>\n    <div class=\"flex h-11 items-center justify-between\">\n      <span class=\"pl-1.5 text-13 font-semibold text-sui-ink\">{{ title }}</span>\n      <div class=\"flex gap-0.5\">\n        <Tooltip :text=\"previousLabel\">\n          <button\n            :aria-label=\"previousLabel\"\n            class=\"flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-sui-sunken focus-visible:sui-ring\"\n            type=\"button\"\n            @click=\"shiftMonth(-1)\"\n          >\n            <ChevronIcon class=\"h-4 w-4 fill-sui-ink-body stroke-sui-ink-body\" direction=\"left\" />\n          </button>\n        </Tooltip>\n        <Tooltip :text=\"nextLabel\">\n          <button\n            :aria-label=\"nextLabel\"\n            class=\"flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-sui-sunken focus-visible:sui-ring\"\n            type=\"button\"\n            @click=\"shiftMonth(1)\"\n          >\n            <ChevronIcon class=\"h-4 w-4 fill-sui-ink-body stroke-sui-ink-body\" direction=\"right\" />\n          </button>\n        </Tooltip>\n      </div>\n    </div>\n    <div aria-hidden=\"true\" class=\"grid h-5.5 grid-cols-7 items-center\">\n      <span v-for=\"(day, i) in dayNames\" :key=\"i\" class=\"text-center text-11 font-semibold text-sui-ink-muted\">\n        {{ day }}\n      </span>\n    </div>\n    <div class=\"mt-0.5 grid grid-cols-7 gap-y-0.5\">\n      <button\n        v-for=\"cell in cells\"\n        :key=\"cell.key\"\n        :aria-current=\"cell.isToday ? 'date' : undefined\"\n        :aria-label=\"cell.date.toLocaleDateString(locale, { dateStyle: 'full' })\"\n        :aria-pressed=\"cell.selected\"\n        :class=\"['group flex h-9 items-center justify-center outline-hidden', cell.band]\"\n        type=\"button\"\n        @click=\"emit('pick', cell.date)\"\n      >\n        <span\n          class=\"relative flex h-8.5 w-9 items-center justify-center rounded-lg text-13 tabular-nums transition-colors group-focus-visible:sui-ring\"\n          :class=\"cell.classes\"\n        >\n          {{ cell.label }}\n          <span\n            v-if=\"cell.isToday\"\n            class=\"absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full\"\n            :class=\"cell.selected ? 'bg-sui-on-accent' : 'bg-sui-accent-solid'\"\n          />\n        </span>\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["_sfc_main","Dialog_vue_vue_type_script_setup_true_lang_default","Dialog_default"],"sources":["../../../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\n\nimport { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport CloseIcon from '../internal/CloseIcon.vue'\nimport { focusFirst } from './focus'\n\nexport interface DialogProps {\n  title?: string\n  /** The close button in the header. */\n  closable?: boolean\n  closeLabel?: string\n  cancelLabel?: string\n  /** Shows the standard footer's confirm button, which emits `confirm`, as ⌘ or Ctrl Enter does. */\n  confirmLabel?: string\n  confirmIcon?: string\n  confirmVariant?: 'primary' | 'danger' | 'contrast'\n  confirmDisabled?: boolean\n  /** sm 432px, md 512px, record 520px (the default with a band), lg 672px, xl 768px. */\n  size?: 'sm' | 'md' | 'record' | 'lg' | 'xl'\n  /** A record form's tinted header band: a CSS colour such as `rgb(var(--sui-hue-blue-soft))`, or `true` for the accent\n   *  wash. The `hero` slot sits centred in it. */\n  band?: string | boolean\n  /** Muted text at the footer's start, e.g. `saveHint()`. */\n  hint?: string\n  /** The body draws its own header, edge to edge. */\n  headerless?: boolean\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  closable: true,\n  closeLabel: 'Close',\n  cancelLabel: 'Cancel',\n  confirmLabel: undefined,\n  confirmIcon: undefined,\n  confirmVariant: 'primary',\n  size: undefined,\n  band: undefined,\n  hint: undefined\n})\n\nconst emit = defineEmits<{ confirm: []; cancel: [] }>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst slots = useSlots()\nconst hasFooter = computed(() => !!slots.footer || !!props.confirmLabel)\nconst banded = computed(() => !!props.band || !!slots.hero)\n\nconst sizes = {\n  sm: 'max-w-[27rem]',\n  md: 'max-w-lg',\n  record: 'max-w-130',\n  lg: 'max-w-2xl',\n  xl: 'max-w-3xl'\n}\nconst width = computed(() => sizes[props.size ?? (banded.value ? 'record' : 'md')])\nconst bandColour = computed(() => (typeof props.band === 'string' ? props.band : 'rgb(var(--sui-accent-wash))'))\n\nconst iconColours = { primary: 'on-accent', danger: 'on-danger', contrast: 'on-contrast' } as const\n\nfunction cancel() {\n  emit('cancel')\n  open.value = false\n}\n\nfunction confirmFromKeyboard(event: KeyboardEvent) {\n  if (!event.metaKey && !event.ctrlKey) return\n  event.preventDefault()\n  if (props.confirmLabel && !props.confirmDisabled) emit('confirm')\n}\n</script>\n\n<!-- The one dialog: a header, body and canvas footer; or, with a `band` or `hero`, a record form under a tinted band. -->\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay\n        class=\"fixed inset-0 z-[1100] flex items-center justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in\"\n      >\n        <DialogContent\n          :aria-describedby=\"undefined\"\n          class=\"flex max-h-[90vh] w-full flex-col bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in\"\n          :class=\"[width, banded ? 'rounded-2xl' : 'rounded-xl']\"\n          @escape-key-down=\"emit('cancel')\"\n          @interact-outside.prevent\n          @keydown.enter=\"confirmFromKeyboard\"\n          @open-auto-focus=\"focusFirst\"\n        >\n          <div\n            v-if=\"banded\"\n            class=\"shrink-0 rounded-t-2xl pt-3.5 pr-3.5 pb-4.5 pl-5 transition-colors duration-200\"\n            data-modal-header\n            :style=\"{ backgroundColor: bandColour }\"\n          >\n            <div class=\"flex items-center justify-between gap-3\">\n              <DialogTitle class=\"text-13 leading-5 font-medium text-sui-ink-body\">{{ title }}</DialogTitle>\n              <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n                <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                  <CloseIcon class=\"fill-sui-ink-muted stroke-sui-ink-muted\" />\n                </Button>\n              </Tooltip>\n            </div>\n            <div v-if=\"$slots.hero\" class=\"mt-0.5 flex flex-col items-center gap-1.5 pr-1.5\">\n              <slot name=\"hero\" />\n            </div>\n          </div>\n          <div\n            v-else-if=\"!headerless\"\n            class=\"flex shrink-0 items-center justify-between gap-3 rounded-t-xl border-b border-sui-line-subtle bg-sui-surface px-5 py-4 text-sui-ink\"\n            data-modal-header\n          >\n            <DialogTitle class=\"min-w-0\">\n              <slot name=\"title\">\n                <h2 v-if=\"title\" class=\"truncate text-base font-semibold text-sui-ink\">{{ title }}</h2>\n              </slot>\n            </DialogTitle>\n            <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n              <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                <CloseIcon class=\"fill-sui-ink-subtle stroke-sui-ink-subtle\" />\n              </Button>\n            </Tooltip>\n          </div>\n          <DialogTitle v-else class=\"sr-only\">{{ title }}</DialogTitle>\n\n          <div\n            class=\"overflow-y-auto bg-sui-surface text-sm text-sui-ink-emphasis\"\n            :class=\"[banded ? 'px-5 pt-0.5 pb-4' : 'p-5', !hasFooter && (banded ? 'rounded-b-2xl' : 'rounded-b-xl')]\"\n            data-modal-body\n          >\n            <slot />\n          </div>\n\n          <div\n            v-if=\"hasFooter\"\n            class=\"flex shrink-0 items-center border-t border-sui-line-subtle bg-sui-canvas text-sui-ink\"\n            :class=\"banded ? 'gap-2 rounded-b-2xl py-3 pr-4 pl-5' : 'gap-3 rounded-b-xl px-5 py-4'\"\n            data-modal-footer\n          >\n            <slot name=\"footer\">\n              <slot name=\"footer-start\" />\n              <span v-if=\"hint\" class=\"min-w-0 truncate text-xs text-sui-ink-muted\">{{ hint }}</span>\n              <span class=\"flex-1\" />\n              <Button type=\"button\" variant=\"ghost\" @click=\"cancel\">{{ cancelLabel }}</Button>\n              <Button :disabled=\"confirmDisabled\" type=\"button\" :variant=\"confirmVariant\" @click=\"emit('confirm')\">\n                <Icon v-if=\"confirmIcon\" :color=\"iconColours[confirmVariant]\" :name=\"confirmIcon\" />\n                {{ confirmLabel }}\n              </Button>\n            </slot>\n          </div>\n        </DialogContent>\n      </DialogOverlay>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Dialog.js","names":["_sfc_main","Dialog_vue_vue_type_script_setup_true_lang_default","Dialog_default"],"sources":["../../../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\n\nimport { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport CloseIcon from '../internal/CloseIcon.vue'\nimport { focusFirst } from './focus'\n\nexport interface DialogProps {\n  title?: string\n  /** The close button in the header. */\n  closable?: boolean\n  closeLabel?: string\n  cancelLabel?: string\n  /** Shows the standard footer's confirm button, which emits `confirm`, as ⌘ or Ctrl Enter does. */\n  confirmLabel?: string\n  confirmIcon?: string\n  confirmVariant?: 'primary' | 'danger' | 'contrast'\n  confirmDisabled?: boolean\n  /** sm 432px, md 512px, record 520px (the default with a band), lg 672px, xl 768px. */\n  size?: 'sm' | 'md' | 'record' | 'lg' | 'xl'\n  /** A record form's tinted header band: a CSS colour such as `rgb(var(--sui-hue-blue-soft))`, or `true` for the accent\n   *  wash. The `hero` slot sits centred in it. */\n  band?: string | boolean\n  /** Muted text at the footer's start, e.g. `saveHint()`. */\n  hint?: string\n  /** The body draws its own header, edge to edge. */\n  headerless?: boolean\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  closable: true,\n  closeLabel: 'Close',\n  cancelLabel: 'Cancel',\n  confirmLabel: undefined,\n  confirmIcon: undefined,\n  confirmVariant: 'primary',\n  size: undefined,\n  band: undefined,\n  hint: undefined\n})\n\nconst emit = defineEmits<{ confirm: []; cancel: [] }>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst slots = useSlots()\nconst hasFooter = computed(() => !!slots.footer || !!props.confirmLabel)\nconst banded = computed(() => !!props.band || !!slots.hero)\n\nconst sizes = {\n  sm: 'max-w-[27rem]',\n  md: 'max-w-lg',\n  record: 'max-w-130',\n  lg: 'max-w-2xl',\n  xl: 'max-w-3xl'\n}\nconst width = computed(() => sizes[props.size ?? (banded.value ? 'record' : 'md')])\nconst bandColour = computed(() => (typeof props.band === 'string' ? props.band : 'rgb(var(--sui-accent-wash))'))\n\nconst iconColours = { primary: 'on-accent', danger: 'on-danger', contrast: 'on-contrast' } as const\n\nfunction cancel() {\n  emit('cancel')\n  open.value = false\n}\n\nfunction confirmFromKeyboard(event: KeyboardEvent) {\n  if (!event.metaKey && !event.ctrlKey) return\n  event.preventDefault()\n  if (props.confirmLabel && !props.confirmDisabled) emit('confirm')\n}\n</script>\n\n<!-- The one dialog: a header, body and canvas footer; or, with a `band` or `hero`, a record form under a tinted band. -->\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay\n        class=\"fixed inset-0 z-[1100] flex items-center justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in\"\n      >\n        <DialogContent\n          :aria-describedby=\"undefined\"\n          class=\"flex max-h-[90vh] w-full flex-col bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in\"\n          :class=\"[width, banded ? 'rounded-2xl' : 'rounded-xl']\"\n          @escape-key-down=\"emit('cancel')\"\n          @interact-outside.prevent\n          @keydown.enter=\"confirmFromKeyboard\"\n          @open-auto-focus=\"focusFirst\"\n        >\n          <div\n            v-if=\"banded\"\n            class=\"shrink-0 rounded-t-2xl pt-3.5 pr-3.5 pb-4.5 pl-5 transition-colors duration-200\"\n            data-modal-header\n            :style=\"{ backgroundColor: bandColour }\"\n          >\n            <div class=\"flex items-center justify-between gap-3\">\n              <DialogTitle class=\"text-13 leading-5 font-medium text-sui-ink-body\">{{ title }}</DialogTitle>\n              <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n                <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                  <CloseIcon class=\"fill-sui-ink-muted stroke-sui-ink-muted\" />\n                </Button>\n              </Tooltip>\n            </div>\n            <div v-if=\"$slots.hero\" class=\"mt-0.5 flex flex-col items-center gap-1.5 pr-1.5\">\n              <slot name=\"hero\" />\n            </div>\n          </div>\n          <div\n            v-else-if=\"!headerless\"\n            class=\"flex shrink-0 items-center justify-between gap-3 rounded-t-xl border-b border-sui-line-subtle bg-sui-surface px-5 py-4 text-sui-ink\"\n            data-modal-header\n          >\n            <DialogTitle class=\"min-w-0 truncate text-base font-semibold text-sui-ink\">\n              <slot name=\"title\">{{ title }}</slot>\n            </DialogTitle>\n            <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n              <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                <CloseIcon class=\"fill-sui-ink-subtle stroke-sui-ink-subtle\" />\n              </Button>\n            </Tooltip>\n          </div>\n          <DialogTitle v-else class=\"sr-only\">{{ title }}</DialogTitle>\n\n          <div\n            class=\"overflow-y-auto bg-sui-surface text-sm text-sui-ink-emphasis\"\n            :class=\"[banded ? 'px-5 pt-0.5 pb-4' : 'p-5', !hasFooter && (banded ? 'rounded-b-2xl' : 'rounded-b-xl')]\"\n            data-modal-body\n          >\n            <slot />\n          </div>\n\n          <div\n            v-if=\"hasFooter\"\n            class=\"flex shrink-0 items-center border-t border-sui-line-subtle bg-sui-canvas text-sui-ink\"\n            :class=\"banded ? 'gap-2 rounded-b-2xl py-3 pr-4 pl-5' : 'gap-3 rounded-b-xl px-5 py-4'\"\n            data-modal-footer\n          >\n            <slot name=\"footer\">\n              <slot name=\"footer-start\" />\n              <span v-if=\"hint\" class=\"min-w-0 truncate text-xs text-sui-ink-muted\">{{ hint }}</span>\n              <span class=\"flex-1\" />\n              <Button type=\"button\" variant=\"ghost\" @click=\"cancel\">{{ cancelLabel }}</Button>\n              <Button :disabled=\"confirmDisabled\" type=\"button\" :variant=\"confirmVariant\" @click=\"emit('confirm')\">\n                <Icon v-if=\"confirmIcon\" :color=\"iconColours[confirmVariant]\" :name=\"confirmIcon\" />\n                {{ confirmLabel }}\n              </Button>\n            </slot>\n          </div>\n        </DialogContent>\n      </DialogOverlay>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":""}

package/dist/components/Dialog/Dialog.vue_vue_type_script_setup_true_lang.js

@@ -14,12 +14,9 @@ var A = { class: "flex items-center justify-between gap-3" }, j = {
 	class: "flex shrink-0 items-center justify-between gap-3 rounded-t-xl border-b border-sui-line-subtle bg-sui-surface px-5 py-4 text-sui-ink",
 	"data-modal-header": ""
 }, N = {
-	key: 0,
-	class: "truncate text-base font-semibold text-sui-ink"
-}, P = {
 	key: 0,
 	class: "min-w-0 truncate text-xs text-sui-ink-muted"
-}, F = /*@__PURE__*/ f({
+}, P = /*@__PURE__*/ f({
 	__name: "Dialog",
 	props: /*@__PURE__*/ p({
 		title: { default: void 0 },
@@ -49,43 +46,43 @@ var A = { class: "flex items-center justify-between gap-3" }, j = {
 	}),
 	emits: /*@__PURE__*/ p(["confirm", "cancel"], ["update:open"]),
 	setup(f, { emit: p }) {
-		let F = f, I = p, L = b(f, "open"), R = x(), z = a(() => !!R.footer || !!F.confirmLabel), B = a(() => !!F.band || !!R.hero), V = {
+		let P = f, F = p, I = b(f, "open"), L = x(), R = a(() => !!L.footer || !!P.confirmLabel), z = a(() => !!P.band || !!L.hero), B = {
 			sm: "max-w-[27rem]",
 			md: "max-w-lg",
 			record: "max-w-130",
 			lg: "max-w-2xl",
 			xl: "max-w-3xl"
-		}, H = a(() => V[F.size ?? (B.value ? "record" : "md")]), U = a(() => typeof F.band == "string" ? F.band : "rgb(var(--sui-accent-wash))"), W = {
+		}, V = a(() => B[P.size ?? (z.value ? "record" : "md")]), H = a(() => typeof P.band == "string" ? P.band : "rgb(var(--sui-accent-wash))"), U = {
 			primary: "on-accent",
 			danger: "on-danger",
 			contrast: "on-contrast"
 		};
-		function G() {
-			I("cancel"), L.value = !1;
+		function W() {
+			F("cancel"), I.value = !1;
 		}
-		function K(e) {
-			(e.metaKey || e.ctrlKey) && (e.preventDefault(), F.confirmLabel && !F.confirmDisabled && I("confirm"));
+		function G(e) {
+			(e.metaKey || e.ctrlKey) && (e.preventDefault(), P.confirmLabel && !P.confirmDisabled && F("confirm"));
 		}
 		return (a, p) => (g(), o(y(O), {
-			open: L.value,
-			"onUpdate:open": p[3] ||= (e) => L.value = e
+			open: I.value,
+			"onUpdate:open": p[3] ||= (e) => I.value = e
 		}, {
 			default: S(() => [d(y(D), null, {
 				default: S(() => [d(y(E), { class: "fixed inset-0 z-[1100] flex items-center justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in" }, {
 					default: S(() => [d(y(T), {
 						"aria-describedby": void 0,
-						class: m(["flex max-h-[90vh] w-full flex-col bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in", [H.value, B.value ? "rounded-2xl" : "rounded-xl"]]),
-						onEscapeKeyDown: p[1] ||= (e) => I("cancel"),
+						class: m(["flex max-h-[90vh] w-full flex-col bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in", [V.value, z.value ? "rounded-2xl" : "rounded-xl"]]),
+						onEscapeKeyDown: p[1] ||= (e) => F("cancel"),
 						onInteractOutside: p[2] ||= w(() => {}, ["prevent"]),
-						onKeydown: C(K, ["enter"]),
+						onKeydown: C(G, ["enter"]),
 						onOpenAutoFocus: y(i)
 					}, {
 						default: S(() => [
-							B.value ? (g(), c("div", {
+							z.value ? (g(), c("div", {
 								key: 0,
 								class: "shrink-0 rounded-t-2xl pt-3.5 pr-3.5 pb-4.5 pl-5 transition-colors duration-200",
 								"data-modal-header": "",
-								style: h({ backgroundColor: U.value })
+								style: h({ backgroundColor: H.value })
 							}, [l("div", A, [d(y(k), { class: "text-13 leading-5 font-medium text-sui-ink-body" }, {
 								default: S(() => [u(v(f.title), 1)]),
 								_: 1
@@ -99,7 +96,7 @@ var A = { class: "flex items-center justify-between gap-3" }, j = {
 									"icon-only": "",
 									size: "sm",
 									variant: "ghost",
-									onClick: G
+									onClick: W
 								}, {
 									default: S(() => [d(r, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })]),
 									_: 1
@@ -111,8 +108,8 @@ var A = { class: "flex items-center justify-between gap-3" }, j = {
 							}, {
 								default: S(() => [u(v(f.title), 1)]),
 								_: 1
-							})) : (g(), c("div", M, [d(y(k), { class: "min-w-0" }, {
-								default: S(() => [_(a.$slots, "title", {}, () => [f.title ? (g(), c("h2", N, v(f.title), 1)) : s("", !0)])]),
+							})) : (g(), c("div", M, [d(y(k), { class: "min-w-0 truncate text-base font-semibold text-sui-ink" }, {
+								default: S(() => [_(a.$slots, "title", {}, () => [u(v(f.title), 1)])]),
 								_: 3
 							}), f.closable ? (g(), o(n, {
 								key: 0,
@@ -124,7 +121,7 @@ var A = { class: "flex items-center justify-between gap-3" }, j = {
 									"icon-only": "",
 									size: "sm",
 									variant: "ghost",
-									onClick: G
+									onClick: W
 								}, {
 									default: S(() => [d(r, { class: "fill-sui-ink-subtle stroke-sui-ink-subtle" })]),
 									_: 1
@@ -132,21 +129,21 @@ var A = { class: "flex items-center justify-between gap-3" }, j = {
 								_: 1
 							}, 8, ["text"])) : s("", !0)])),
 							l("div", {
-								class: m(["overflow-y-auto bg-sui-surface text-sm text-sui-ink-emphasis", [B.value ? "px-5 pt-0.5 pb-4" : "p-5", !z.value && (B.value ? "rounded-b-2xl" : "rounded-b-xl")]]),
+								class: m(["overflow-y-auto bg-sui-surface text-sm text-sui-ink-emphasis", [z.value ? "px-5 pt-0.5 pb-4" : "p-5", !R.value && (z.value ? "rounded-b-2xl" : "rounded-b-xl")]]),
 								"data-modal-body": ""
 							}, [_(a.$slots, "default")], 2),
-							z.value ? (g(), c("div", {
+							R.value ? (g(), c("div", {
 								key: 3,
-								class: m(["flex shrink-0 items-center border-t border-sui-line-subtle bg-sui-canvas text-sui-ink", B.value ? "gap-2 rounded-b-2xl py-3 pr-4 pl-5" : "gap-3 rounded-b-xl px-5 py-4"]),
+								class: m(["flex shrink-0 items-center border-t border-sui-line-subtle bg-sui-canvas text-sui-ink", z.value ? "gap-2 rounded-b-2xl py-3 pr-4 pl-5" : "gap-3 rounded-b-xl px-5 py-4"]),
 								"data-modal-footer": ""
 							}, [_(a.$slots, "footer", {}, () => [
 								_(a.$slots, "footer-start"),
-								f.hint ? (g(), c("span", P, v(f.hint), 1)) : s("", !0),
+								f.hint ? (g(), c("span", N, v(f.hint), 1)) : s("", !0),
 								p[4] ||= l("span", { class: "flex-1" }, null, -1),
 								d(e, {
 									type: "button",
 									variant: "ghost",
-									onClick: G
+									onClick: W
 								}, {
 									default: S(() => [u(v(f.cancelLabel), 1)]),
 									_: 1
@@ -155,11 +152,11 @@ var A = { class: "flex items-center justify-between gap-3" }, j = {
 									disabled: f.confirmDisabled,
 									type: "button",
 									variant: f.confirmVariant,
-									onClick: p[0] ||= (e) => I("confirm")
+									onClick: p[0] ||= (e) => F("confirm")
 								}, {
 									default: S(() => [f.confirmIcon ? (g(), o(t, {
 										key: 0,
-										color: W[f.confirmVariant],
+										color: U[f.confirmVariant],
 										name: f.confirmIcon
 									}, null, 8, ["color", "name"])) : s("", !0), u(" " + v(f.confirmLabel), 1)]),
 									_: 1
@@ -177,6 +174,6 @@ var A = { class: "flex items-center justify-between gap-3" }, j = {
 	}
 });
 //#endregion
-export { F as default };
+export { P as default };
 
 //# sourceMappingURL=Dialog.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Dialog/Dialog.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_normalizeClass","_withModifiers","_withKeys","_createElementBlock","_normalizeStyle","_createElementVNode","_createTextVNode","_toDisplayString","Tooltip","Button","CloseIcon","_createCommentVNode","_renderSlot","Icon","Button_default","Icon_default","Tooltip_default","CloseIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","Dialog_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","emit","open","useModel","slots","useSlots","hasFooter","computed","banded","sizes","width","bandColour","iconColours","cancel","confirmFromKeyboard","event","openBlock","createBlock","unref","DialogRoot","_cache","$event","withCtx","createVNode","DialogPortal","DialogOverlay","DialogContent","normalizeClass","withModifiers","withKeys","focusFirst","createElementBlock","normalizeStyle","createElementVNode","DialogTitle","createTextVNode","toDisplayString","createCommentVNode","_ctx","renderSlot"],"sources":["../../../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\n\nimport { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport CloseIcon from '../internal/CloseIcon.vue'\nimport { focusFirst } from './focus'\n\nexport interface DialogProps {\n  title?: string\n  /** The close button in the header. */\n  closable?: boolean\n  closeLabel?: string\n  cancelLabel?: string\n  /** Shows the standard footer's confirm button, which emits `confirm`, as ⌘ or Ctrl Enter does. */\n  confirmLabel?: string\n  confirmIcon?: string\n  confirmVariant?: 'primary' | 'danger' | 'contrast'\n  confirmDisabled?: boolean\n  /** sm 432px, md 512px, record 520px (the default with a band), lg 672px, xl 768px. */\n  size?: 'sm' | 'md' | 'record' | 'lg' | 'xl'\n  /** A record form's tinted header band: a CSS colour such as `rgb(var(--sui-hue-blue-soft))`, or `true` for the accent\n   *  wash. The `hero` slot sits centred in it. */\n  band?: string | boolean\n  /** Muted text at the footer's start, e.g. `saveHint()`. */\n  hint?: string\n  /** The body draws its own header, edge to edge. */\n  headerless?: boolean\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  closable: true,\n  closeLabel: 'Close',\n  cancelLabel: 'Cancel',\n  confirmLabel: undefined,\n  confirmIcon: undefined,\n  confirmVariant: 'primary',\n  size: undefined,\n  band: undefined,\n  hint: undefined\n})\n\nconst emit = defineEmits<{ confirm: []; cancel: [] }>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst slots = useSlots()\nconst hasFooter = computed(() => !!slots.footer || !!props.confirmLabel)\nconst banded = computed(() => !!props.band || !!slots.hero)\n\nconst sizes = {\n  sm: 'max-w-[27rem]',\n  md: 'max-w-lg',\n  record: 'max-w-130',\n  lg: 'max-w-2xl',\n  xl: 'max-w-3xl'\n}\nconst width = computed(() => sizes[props.size ?? (banded.value ? 'record' : 'md')])\nconst bandColour = computed(() => (typeof props.band === 'string' ? props.band : 'rgb(var(--sui-accent-wash))'))\n\nconst iconColours = { primary: 'on-accent', danger: 'on-danger', contrast: 'on-contrast' } as const\n\nfunction cancel() {\n  emit('cancel')\n  open.value = false\n}\n\nfunction confirmFromKeyboard(event: KeyboardEvent) {\n  if (!event.metaKey && !event.ctrlKey) return\n  event.preventDefault()\n  if (props.confirmLabel && !props.confirmDisabled) emit('confirm')\n}\n</script>\n\n<!-- The one dialog: a header, body and canvas footer; or, with a `band` or `hero`, a record form under a tinted band. -->\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay\n        class=\"fixed inset-0 z-[1100] flex items-center justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in\"\n      >\n        <DialogContent\n          :aria-describedby=\"undefined\"\n          class=\"flex max-h-[90vh] w-full flex-col bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in\"\n          :class=\"[width, banded ? 'rounded-2xl' : 'rounded-xl']\"\n          @escape-key-down=\"emit('cancel')\"\n          @interact-outside.prevent\n          @keydown.enter=\"confirmFromKeyboard\"\n          @open-auto-focus=\"focusFirst\"\n        >\n          <div\n            v-if=\"banded\"\n            class=\"shrink-0 rounded-t-2xl pt-3.5 pr-3.5 pb-4.5 pl-5 transition-colors duration-200\"\n            data-modal-header\n            :style=\"{ backgroundColor: bandColour }\"\n          >\n            <div class=\"flex items-center justify-between gap-3\">\n              <DialogTitle class=\"text-13 leading-5 font-medium text-sui-ink-body\">{{ title }}</DialogTitle>\n              <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n                <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                  <CloseIcon class=\"fill-sui-ink-muted stroke-sui-ink-muted\" />\n                </Button>\n              </Tooltip>\n            </div>\n            <div v-if=\"$slots.hero\" class=\"mt-0.5 flex flex-col items-center gap-1.5 pr-1.5\">\n              <slot name=\"hero\" />\n            </div>\n          </div>\n          <div\n            v-else-if=\"!headerless\"\n            class=\"flex shrink-0 items-center justify-between gap-3 rounded-t-xl border-b border-sui-line-subtle bg-sui-surface px-5 py-4 text-sui-ink\"\n            data-modal-header\n          >\n            <DialogTitle class=\"min-w-0\">\n              <slot name=\"title\">\n                <h2 v-if=\"title\" class=\"truncate text-base font-semibold text-sui-ink\">{{ title }}</h2>\n              </slot>\n            </DialogTitle>\n            <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n              <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                <CloseIcon class=\"fill-sui-ink-subtle stroke-sui-ink-subtle\" />\n              </Button>\n            </Tooltip>\n          </div>\n          <DialogTitle v-else class=\"sr-only\">{{ title }}</DialogTitle>\n\n          <div\n            class=\"overflow-y-auto bg-sui-surface text-sm text-sui-ink-emphasis\"\n            :class=\"[banded ? 'px-5 pt-0.5 pb-4' : 'p-5', !hasFooter && (banded ? 'rounded-b-2xl' : 'rounded-b-xl')]\"\n            data-modal-body\n          >\n            <slot />\n          </div>\n\n          <div\n            v-if=\"hasFooter\"\n            class=\"flex shrink-0 items-center border-t border-sui-line-subtle bg-sui-canvas text-sui-ink\"\n            :class=\"banded ? 'gap-2 rounded-b-2xl py-3 pr-4 pl-5' : 'gap-3 rounded-b-xl px-5 py-4'\"\n            data-modal-footer\n          >\n            <slot name=\"footer\">\n              <slot name=\"footer-start\" />\n              <span v-if=\"hint\" class=\"min-w-0 truncate text-xs text-sui-ink-muted\">{{ hint }}</span>\n              <span class=\"flex-1\" />\n              <Button type=\"button\" variant=\"ghost\" @click=\"cancel\">{{ cancelLabel }}</Button>\n              <Button :disabled=\"confirmDisabled\" type=\"button\" :variant=\"confirmVariant\" @click=\"emit('confirm')\">\n                <Icon v-if=\"confirmIcon\" :color=\"iconColours[confirmVariant]\" :name=\"confirmIcon\" />\n                {{ confirmLabel }}\n              </Button>\n            </slot>\n          </div>\n        </DialogContent>\n      </DialogOverlay>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_normalizeClass","_withModifiers","_withKeys","_createElementBlock","_normalizeStyle","_createElementVNode","_createTextVNode","_toDisplayString","Tooltip","Button","CloseIcon","_createCommentVNode","_renderSlot","Icon","Button_default","Icon_default","Tooltip_default","CloseIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","Dialog_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","emit","open","useModel","slots","useSlots","hasFooter","computed","banded","sizes","width","bandColour","iconColours","cancel","confirmFromKeyboard","event","openBlock","createBlock","unref","DialogRoot","_cache","$event","withCtx","createVNode","DialogPortal","DialogOverlay","DialogContent","normalizeClass","withModifiers","withKeys","focusFirst","createElementBlock","normalizeStyle","createElementVNode","DialogTitle","createTextVNode","toDisplayString","createCommentVNode","_ctx","renderSlot"],"sources":["../../../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\n\nimport { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport CloseIcon from '../internal/CloseIcon.vue'\nimport { focusFirst } from './focus'\n\nexport interface DialogProps {\n  title?: string\n  /** The close button in the header. */\n  closable?: boolean\n  closeLabel?: string\n  cancelLabel?: string\n  /** Shows the standard footer's confirm button, which emits `confirm`, as ⌘ or Ctrl Enter does. */\n  confirmLabel?: string\n  confirmIcon?: string\n  confirmVariant?: 'primary' | 'danger' | 'contrast'\n  confirmDisabled?: boolean\n  /** sm 432px, md 512px, record 520px (the default with a band), lg 672px, xl 768px. */\n  size?: 'sm' | 'md' | 'record' | 'lg' | 'xl'\n  /** A record form's tinted header band: a CSS colour such as `rgb(var(--sui-hue-blue-soft))`, or `true` for the accent\n   *  wash. The `hero` slot sits centred in it. */\n  band?: string | boolean\n  /** Muted text at the footer's start, e.g. `saveHint()`. */\n  hint?: string\n  /** The body draws its own header, edge to edge. */\n  headerless?: boolean\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  closable: true,\n  closeLabel: 'Close',\n  cancelLabel: 'Cancel',\n  confirmLabel: undefined,\n  confirmIcon: undefined,\n  confirmVariant: 'primary',\n  size: undefined,\n  band: undefined,\n  hint: undefined\n})\n\nconst emit = defineEmits<{ confirm: []; cancel: [] }>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst slots = useSlots()\nconst hasFooter = computed(() => !!slots.footer || !!props.confirmLabel)\nconst banded = computed(() => !!props.band || !!slots.hero)\n\nconst sizes = {\n  sm: 'max-w-[27rem]',\n  md: 'max-w-lg',\n  record: 'max-w-130',\n  lg: 'max-w-2xl',\n  xl: 'max-w-3xl'\n}\nconst width = computed(() => sizes[props.size ?? (banded.value ? 'record' : 'md')])\nconst bandColour = computed(() => (typeof props.band === 'string' ? props.band : 'rgb(var(--sui-accent-wash))'))\n\nconst iconColours = { primary: 'on-accent', danger: 'on-danger', contrast: 'on-contrast' } as const\n\nfunction cancel() {\n  emit('cancel')\n  open.value = false\n}\n\nfunction confirmFromKeyboard(event: KeyboardEvent) {\n  if (!event.metaKey && !event.ctrlKey) return\n  event.preventDefault()\n  if (props.confirmLabel && !props.confirmDisabled) emit('confirm')\n}\n</script>\n\n<!-- The one dialog: a header, body and canvas footer; or, with a `band` or `hero`, a record form under a tinted band. -->\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay\n        class=\"fixed inset-0 z-[1100] flex items-center justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in\"\n      >\n        <DialogContent\n          :aria-describedby=\"undefined\"\n          class=\"flex max-h-[90vh] w-full flex-col bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in\"\n          :class=\"[width, banded ? 'rounded-2xl' : 'rounded-xl']\"\n          @escape-key-down=\"emit('cancel')\"\n          @interact-outside.prevent\n          @keydown.enter=\"confirmFromKeyboard\"\n          @open-auto-focus=\"focusFirst\"\n        >\n          <div\n            v-if=\"banded\"\n            class=\"shrink-0 rounded-t-2xl pt-3.5 pr-3.5 pb-4.5 pl-5 transition-colors duration-200\"\n            data-modal-header\n            :style=\"{ backgroundColor: bandColour }\"\n          >\n            <div class=\"flex items-center justify-between gap-3\">\n              <DialogTitle class=\"text-13 leading-5 font-medium text-sui-ink-body\">{{ title }}</DialogTitle>\n              <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n                <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                  <CloseIcon class=\"fill-sui-ink-muted stroke-sui-ink-muted\" />\n                </Button>\n              </Tooltip>\n            </div>\n            <div v-if=\"$slots.hero\" class=\"mt-0.5 flex flex-col items-center gap-1.5 pr-1.5\">\n              <slot name=\"hero\" />\n            </div>\n          </div>\n          <div\n            v-else-if=\"!headerless\"\n            class=\"flex shrink-0 items-center justify-between gap-3 rounded-t-xl border-b border-sui-line-subtle bg-sui-surface px-5 py-4 text-sui-ink\"\n            data-modal-header\n          >\n            <DialogTitle class=\"min-w-0 truncate text-base font-semibold text-sui-ink\">\n              <slot name=\"title\">{{ title }}</slot>\n            </DialogTitle>\n            <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n              <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                <CloseIcon class=\"fill-sui-ink-subtle stroke-sui-ink-subtle\" />\n              </Button>\n            </Tooltip>\n          </div>\n          <DialogTitle v-else class=\"sr-only\">{{ title }}</DialogTitle>\n\n          <div\n            class=\"overflow-y-auto bg-sui-surface text-sm text-sui-ink-emphasis\"\n            :class=\"[banded ? 'px-5 pt-0.5 pb-4' : 'p-5', !hasFooter && (banded ? 'rounded-b-2xl' : 'rounded-b-xl')]\"\n            data-modal-body\n          >\n            <slot />\n          </div>\n\n          <div\n            v-if=\"hasFooter\"\n            class=\"flex shrink-0 items-center border-t border-sui-line-subtle bg-sui-canvas text-sui-ink\"\n            :class=\"banded ? 'gap-2 rounded-b-2xl py-3 pr-4 pl-5' : 'gap-3 rounded-b-xl px-5 py-4'\"\n            data-modal-footer\n          >\n            <slot name=\"footer\">\n              <slot name=\"footer-start\" />\n              <span v-if=\"hint\" class=\"min-w-0 truncate text-xs text-sui-ink-muted\">{{ hint }}</span>\n              <span class=\"flex-1\" />\n              <Button type=\"button\" variant=\"ghost\" @click=\"cancel\">{{ cancelLabel }}</Button>\n              <Button :disabled=\"confirmDisabled\" type=\"button\" :variant=\"confirmVariant\" @click=\"emit('confirm')\">\n                <Icon v-if=\"confirmIcon\" :color=\"iconColours[confirmVariant]\" :name=\"confirmIcon\" />\n                {{ confirmLabel }}\n              </Button>\n            </slot>\n          </div>\n        </DialogContent>\n      </DialogOverlay>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/DropdownMenu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","names":["_sfc_main","DropdownMenu_vue_vue_type_script_setup_true_lang_default","DropdownMenu_default"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from 'reka-ui'\n\nimport { useConfirm } from '../../composables/useConfirm'\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\n\nexport interface DropdownMenuAction {\n  type: 'action'\n  label: string\n  action?: string\n  icon?: string\n  variant?: 'danger'\n  shortcut?: string\n  /** Asks first, with this wording; `confirmed: true` asks with the generic wording. */\n  confirm?: { message: string; title?: string; acceptLabel?: string }\n  confirmed?: boolean\n  [key: string]: unknown\n}\n\nexport type DropdownMenuEntry = DropdownMenuAction | { type: 'separator' }\n\nexport interface DropdownMenuProps {\n  /** Passed back with every clicked item, e.g. the record the menu acts on. */\n  id?: string\n  items?: DropdownMenuEntry[]\n  buttonIcon?: string\n  /** A label beside the icon; without one the button is icon-only, named by the tooltip. */\n  buttonLabel?: string\n  /** The trigger's tooltip and name; null for none. */\n  tooltip?: string | null\n  /** Lines the menu up with the trigger's start or end edge. */\n  align?: 'start' | 'end'\n  confirmTitle?: string\n  confirmMessage?: string\n  confirmLabel?: string\n  deleteLabel?: string\n  cancelLabel?: string\n}\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  id: undefined,\n  items: () => [],\n  buttonIcon: 'more-vertical',\n  buttonLabel: undefined,\n  tooltip: 'More actions',\n  align: 'start',\n  confirmTitle: 'Are you sure?',\n  confirmMessage: \"This can't be undone.\",\n  confirmLabel: 'Confirm',\n  deleteLabel: 'Delete',\n  cancelLabel: 'Cancel'\n})\n\nconst emit = defineEmits<{ 'click-item': [item: DropdownMenuAction & { id?: string }]; show: []; hide: [] }>()\n\nconst open = ref(false)\nconst confirm = useConfirm()\n\nasync function select(item: DropdownMenuAction) {\n  if (item.confirm || item.confirmed) {\n    const destructive = item.variant === 'danger' || item.action === 'delete'\n    const confirmed = await confirm({\n      title: item.confirm?.title ?? props.confirmTitle,\n      message: item.confirm?.message ?? props.confirmMessage,\n      cancelLabel: props.cancelLabel,\n      confirmLabel: item.confirm?.acceptLabel ?? (item.action === 'delete' ? props.deleteLabel : props.confirmLabel),\n      confirmVariant: destructive ? 'danger' : 'primary'\n    })\n    if (!confirmed) return\n  }\n  emit('click-item', { id: props.id, ...item })\n}\n\nfunction onOpenChange(value: boolean) {\n  open.value = value\n  if (value) emit('show')\n  else emit('hide')\n}\n</script>\n\n<template>\n  <div>\n    <!-- Not modal: the page stays live (hover, scroll) while it's open. -->\n    <DropdownMenuRoot :modal=\"false\" :open=\"open\" @update:open=\"onOpenChange\">\n      <!-- The tooltip inside the menu's trigger: Reka's anchors attach to the nearest popper, which must be the menu's. -->\n      <DropdownMenuTrigger as-child>\n        <Tooltip :disabled=\"!tooltip || open\" :text=\"tooltip ?? undefined\">\n          <slot name=\"trigger\" :open=\"open\">\n            <Button\n              :aria-label=\"buttonLabel ? undefined : (tooltip ?? undefined)\"\n              :icon-only=\"!buttonLabel\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              @click.stop\n            >\n              <span v-if=\"buttonLabel\">{{ buttonLabel }}</span>\n              <Icon v-if=\"buttonIcon\" color=\"ink-subtle\" :name=\"buttonIcon\" />\n            </Button>\n          </slot>\n        </Tooltip>\n      </DropdownMenuTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuContent\n          :align=\"align\"\n          class=\"z-[1000] min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in\"\n          side=\"bottom\"\n        >\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <DropdownMenuSeparator v-if=\"item.type === 'separator'\" class=\"my-1 border-t border-sui-line-subtle\" />\n            <DropdownMenuItem\n              v-else\n              class=\"relative rounded-lg text-sm text-sui-ink transition-colors duration-150 outline-hidden hover:bg-sui-sunken focus-visible:sui-ring-inset data-highlighted:bg-sui-sunken\"\n              @select=\"select(item)\"\n            >\n              <div\n                class=\"flex cursor-pointer items-center gap-2.5 px-2.5 py-1.5\"\n                :class=\"item.variant === 'danger' ? 'text-sui-danger' : 'text-sui-ink'\"\n              >\n                <Icon\n                  v-if=\"item.icon\"\n                  class=\"h-4 w-4 shrink-0\"\n                  :color=\"item.variant === 'danger' ? 'danger' : 'ink-muted'\"\n                  :name=\"item.icon\"\n                />\n                <span class=\"flex-1 text-13\">{{ item.label }}</span>\n                <span v-if=\"item.shortcut\" class=\"text-11 text-sui-ink-muted\">{{ item.shortcut }}</span>\n              </div>\n            </DropdownMenuItem>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenuPortal>\n    </DropdownMenuRoot>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DropdownMenu.js","names":["_sfc_main","DropdownMenu_vue_vue_type_script_setup_true_lang_default","DropdownMenu_default"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from 'reka-ui'\n\nimport { useConfirm } from '../../composables/useConfirm'\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\n\nexport interface DropdownMenuAction {\n  type: 'action'\n  label: string\n  action?: string\n  icon?: string\n  variant?: 'danger'\n  shortcut?: string\n  /** Asks first, with this wording; `confirmed: true` asks with the generic wording. */\n  confirm?: { message: string; title?: string; acceptLabel?: string }\n  confirmed?: boolean\n  [key: string]: unknown\n}\n\nexport type DropdownMenuEntry = DropdownMenuAction | { type: 'separator' }\n\nexport interface DropdownMenuProps {\n  /** Passed back with every clicked item, e.g. the record the menu acts on. */\n  id?: string\n  items?: DropdownMenuEntry[]\n  buttonIcon?: string\n  /** A label beside the icon; without one the button is icon-only, named by the tooltip. */\n  buttonLabel?: string\n  /** The trigger's tooltip and name; null for none. */\n  tooltip?: string | null\n  /** Lines the menu up with the trigger's start or end edge. */\n  align?: 'start' | 'end'\n  confirmTitle?: string\n  confirmMessage?: string\n  confirmLabel?: string\n  deleteLabel?: string\n  cancelLabel?: string\n}\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  id: undefined,\n  items: () => [],\n  buttonIcon: 'more-vertical',\n  buttonLabel: undefined,\n  tooltip: 'More actions',\n  align: 'start',\n  confirmTitle: 'Are you sure?',\n  confirmMessage: \"This can't be undone.\",\n  confirmLabel: 'Confirm',\n  deleteLabel: 'Delete',\n  cancelLabel: 'Cancel'\n})\n\nconst emit = defineEmits<{ 'click-item': [item: DropdownMenuAction & { id?: string }]; show: []; hide: [] }>()\n\nconst open = ref(false)\nconst confirm = useConfirm()\n\nasync function select(item: DropdownMenuAction) {\n  if (item.confirm || item.confirmed) {\n    const destructive = item.variant === 'danger' || item.action === 'delete'\n    const confirmed = await confirm({\n      title: item.confirm?.title ?? props.confirmTitle,\n      message: item.confirm?.message ?? props.confirmMessage,\n      cancelLabel: props.cancelLabel,\n      confirmLabel: item.confirm?.acceptLabel ?? (item.action === 'delete' ? props.deleteLabel : props.confirmLabel),\n      confirmVariant: destructive ? 'danger' : 'primary'\n    })\n    if (!confirmed) return\n  }\n  emit('click-item', { id: props.id, ...item })\n}\n\nfunction onOpenChange(value: boolean) {\n  open.value = value\n  if (value) emit('show')\n  else emit('hide')\n}\n</script>\n\n<template>\n  <div>\n    <!-- Not modal: the page stays live (hover, scroll) while it's open. -->\n    <DropdownMenuRoot :modal=\"false\" :open=\"open\" @update:open=\"onOpenChange\">\n      <!-- The tooltip inside the menu's trigger: Reka's anchors attach to the nearest popper, which must be the menu's. -->\n      <DropdownMenuTrigger as-child>\n        <Tooltip :disabled=\"!tooltip || open\" :text=\"tooltip ?? undefined\">\n          <slot name=\"trigger\" :open=\"open\">\n            <Button\n              :aria-label=\"buttonLabel ? undefined : (tooltip ?? undefined)\"\n              :icon-only=\"!buttonLabel\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              @click.stop\n            >\n              <span v-if=\"buttonLabel\">{{ buttonLabel }}</span>\n              <Icon v-if=\"buttonIcon\" color=\"ink-subtle\" :name=\"buttonIcon\" />\n            </Button>\n          </slot>\n        </Tooltip>\n      </DropdownMenuTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuContent\n          :align=\"align\"\n          class=\"z-[1100] min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in\"\n          side=\"bottom\"\n        >\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <DropdownMenuSeparator v-if=\"item.type === 'separator'\" class=\"my-1 border-t border-sui-line-subtle\" />\n            <DropdownMenuItem\n              v-else\n              class=\"relative rounded-lg text-sm text-sui-ink transition-colors duration-150 outline-hidden hover:bg-sui-sunken focus-visible:sui-ring-inset data-highlighted:bg-sui-sunken\"\n              @select=\"select(item)\"\n            >\n              <div\n                class=\"flex cursor-pointer items-center gap-2.5 px-2.5 py-1.5\"\n                :class=\"item.variant === 'danger' ? 'text-sui-danger' : 'text-sui-ink'\"\n              >\n                <Icon\n                  v-if=\"item.icon\"\n                  class=\"h-4 w-4 shrink-0\"\n                  :color=\"item.variant === 'danger' ? 'danger' : 'ink-muted'\"\n                  :name=\"item.icon\"\n                />\n                <span class=\"flex-1 text-13\">{{ item.label }}</span>\n                <span v-if=\"item.shortcut\" class=\"text-11 text-sui-ink-muted\">{{ item.shortcut }}</span>\n              </div>\n            </DropdownMenuItem>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenuPortal>\n    </DropdownMenuRoot>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/DropdownMenu/DropdownMenu.vue_vue_type_script_setup_true_lang.js

@@ -80,7 +80,7 @@ var E = { key: 0 }, D = { class: "flex-1 text-13" }, O = {
 			}), l(_(S), null, {
 				default: v(() => [l(_(b), {
 					align: u.align,
-					class: "z-[1000] min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in",
+					class: "z-[1100] min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in",
 					side: "bottom"
 				}, {
 					default: v(() => [(f(!0), s(i, null, m(u.items, (e, n) => (f(), s(i, { key: n }, [e.type === "separator" ? (f(), a(_(w), {

package/dist/components/DropdownMenu/DropdownMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","Tooltip","_renderSlot","Button","_withModifiers","_toDisplayString","_createCommentVNode","_createBlock","Icon","_Fragment","_renderList","_createElementVNode","_normalizeClass","Button_default","Icon_default","Tooltip_default","_hoisted_1","_hoisted_2","_hoisted_3","DropdownMenu_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","open","ref","confirm","useConfirm","select","item","destructive","onOpenChange","value","openBlock","createElementBlock","createVNode","unref","DropdownMenuRoot","withCtx","DropdownMenuTrigger","renderSlot","_ctx","_cache","withModifiers","toDisplayString","createCommentVNode","createBlock","DropdownMenuPortal","DropdownMenuContent","Fragment","renderList","index","DropdownMenuSeparator","DropdownMenuItem","createElementVNode","normalizeClass"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from 'reka-ui'\n\nimport { useConfirm } from '../../composables/useConfirm'\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\n\nexport interface DropdownMenuAction {\n  type: 'action'\n  label: string\n  action?: string\n  icon?: string\n  variant?: 'danger'\n  shortcut?: string\n  /** Asks first, with this wording; `confirmed: true` asks with the generic wording. */\n  confirm?: { message: string; title?: string; acceptLabel?: string }\n  confirmed?: boolean\n  [key: string]: unknown\n}\n\nexport type DropdownMenuEntry = DropdownMenuAction | { type: 'separator' }\n\nexport interface DropdownMenuProps {\n  /** Passed back with every clicked item, e.g. the record the menu acts on. */\n  id?: string\n  items?: DropdownMenuEntry[]\n  buttonIcon?: string\n  /** A label beside the icon; without one the button is icon-only, named by the tooltip. */\n  buttonLabel?: string\n  /** The trigger's tooltip and name; null for none. */\n  tooltip?: string | null\n  /** Lines the menu up with the trigger's start or end edge. */\n  align?: 'start' | 'end'\n  confirmTitle?: string\n  confirmMessage?: string\n  confirmLabel?: string\n  deleteLabel?: string\n  cancelLabel?: string\n}\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  id: undefined,\n  items: () => [],\n  buttonIcon: 'more-vertical',\n  buttonLabel: undefined,\n  tooltip: 'More actions',\n  align: 'start',\n  confirmTitle: 'Are you sure?',\n  confirmMessage: \"This can't be undone.\",\n  confirmLabel: 'Confirm',\n  deleteLabel: 'Delete',\n  cancelLabel: 'Cancel'\n})\n\nconst emit = defineEmits<{ 'click-item': [item: DropdownMenuAction & { id?: string }]; show: []; hide: [] }>()\n\nconst open = ref(false)\nconst confirm = useConfirm()\n\nasync function select(item: DropdownMenuAction) {\n  if (item.confirm || item.confirmed) {\n    const destructive = item.variant === 'danger' || item.action === 'delete'\n    const confirmed = await confirm({\n      title: item.confirm?.title ?? props.confirmTitle,\n      message: item.confirm?.message ?? props.confirmMessage,\n      cancelLabel: props.cancelLabel,\n      confirmLabel: item.confirm?.acceptLabel ?? (item.action === 'delete' ? props.deleteLabel : props.confirmLabel),\n      confirmVariant: destructive ? 'danger' : 'primary'\n    })\n    if (!confirmed) return\n  }\n  emit('click-item', { id: props.id, ...item })\n}\n\nfunction onOpenChange(value: boolean) {\n  open.value = value\n  if (value) emit('show')\n  else emit('hide')\n}\n</script>\n\n<template>\n  <div>\n    <!-- Not modal: the page stays live (hover, scroll) while it's open. -->\n    <DropdownMenuRoot :modal=\"false\" :open=\"open\" @update:open=\"onOpenChange\">\n      <!-- The tooltip inside the menu's trigger: Reka's anchors attach to the nearest popper, which must be the menu's. -->\n      <DropdownMenuTrigger as-child>\n        <Tooltip :disabled=\"!tooltip || open\" :text=\"tooltip ?? undefined\">\n          <slot name=\"trigger\" :open=\"open\">\n            <Button\n              :aria-label=\"buttonLabel ? undefined : (tooltip ?? undefined)\"\n              :icon-only=\"!buttonLabel\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              @click.stop\n            >\n              <span v-if=\"buttonLabel\">{{ buttonLabel }}</span>\n              <Icon v-if=\"buttonIcon\" color=\"ink-subtle\" :name=\"buttonIcon\" />\n            </Button>\n          </slot>\n        </Tooltip>\n      </DropdownMenuTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuContent\n          :align=\"align\"\n          class=\"z-[1000] min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in\"\n          side=\"bottom\"\n        >\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <DropdownMenuSeparator v-if=\"item.type === 'separator'\" class=\"my-1 border-t border-sui-line-subtle\" />\n            <DropdownMenuItem\n              v-else\n              class=\"relative rounded-lg text-sm text-sui-ink transition-colors duration-150 outline-hidden hover:bg-sui-sunken focus-visible:sui-ring-inset data-highlighted:bg-sui-sunken\"\n              @select=\"select(item)\"\n            >\n              <div\n                class=\"flex cursor-pointer items-center gap-2.5 px-2.5 py-1.5\"\n                :class=\"item.variant === 'danger' ? 'text-sui-danger' : 'text-sui-ink'\"\n              >\n                <Icon\n                  v-if=\"item.icon\"\n                  class=\"h-4 w-4 shrink-0\"\n                  :color=\"item.variant === 'danger' ? 'danger' : 'ink-muted'\"\n                  :name=\"item.icon\"\n                />\n                <span class=\"flex-1 text-13\">{{ item.label }}</span>\n                <span v-if=\"item.shortcut\" class=\"text-11 text-sui-ink-muted\">{{ item.shortcut }}</span>\n              </div>\n            </DropdownMenuItem>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenuPortal>\n    </DropdownMenuRoot>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","Tooltip","_renderSlot","Button","_withModifiers","_toDisplayString","_createCommentVNode","_createBlock","Icon","_Fragment","_renderList","_createElementVNode","_normalizeClass","Button_default","Icon_default","Tooltip_default","_hoisted_1","_hoisted_2","_hoisted_3","DropdownMenu_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","open","ref","confirm","useConfirm","select","item","destructive","onOpenChange","value","openBlock","createElementBlock","createVNode","unref","DropdownMenuRoot","withCtx","DropdownMenuTrigger","renderSlot","_ctx","_cache","withModifiers","toDisplayString","createCommentVNode","createBlock","DropdownMenuPortal","DropdownMenuContent","Fragment","renderList","index","DropdownMenuSeparator","DropdownMenuItem","createElementVNode","normalizeClass"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from 'reka-ui'\n\nimport { useConfirm } from '../../composables/useConfirm'\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\n\nexport interface DropdownMenuAction {\n  type: 'action'\n  label: string\n  action?: string\n  icon?: string\n  variant?: 'danger'\n  shortcut?: string\n  /** Asks first, with this wording; `confirmed: true` asks with the generic wording. */\n  confirm?: { message: string; title?: string; acceptLabel?: string }\n  confirmed?: boolean\n  [key: string]: unknown\n}\n\nexport type DropdownMenuEntry = DropdownMenuAction | { type: 'separator' }\n\nexport interface DropdownMenuProps {\n  /** Passed back with every clicked item, e.g. the record the menu acts on. */\n  id?: string\n  items?: DropdownMenuEntry[]\n  buttonIcon?: string\n  /** A label beside the icon; without one the button is icon-only, named by the tooltip. */\n  buttonLabel?: string\n  /** The trigger's tooltip and name; null for none. */\n  tooltip?: string | null\n  /** Lines the menu up with the trigger's start or end edge. */\n  align?: 'start' | 'end'\n  confirmTitle?: string\n  confirmMessage?: string\n  confirmLabel?: string\n  deleteLabel?: string\n  cancelLabel?: string\n}\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  id: undefined,\n  items: () => [],\n  buttonIcon: 'more-vertical',\n  buttonLabel: undefined,\n  tooltip: 'More actions',\n  align: 'start',\n  confirmTitle: 'Are you sure?',\n  confirmMessage: \"This can't be undone.\",\n  confirmLabel: 'Confirm',\n  deleteLabel: 'Delete',\n  cancelLabel: 'Cancel'\n})\n\nconst emit = defineEmits<{ 'click-item': [item: DropdownMenuAction & { id?: string }]; show: []; hide: [] }>()\n\nconst open = ref(false)\nconst confirm = useConfirm()\n\nasync function select(item: DropdownMenuAction) {\n  if (item.confirm || item.confirmed) {\n    const destructive = item.variant === 'danger' || item.action === 'delete'\n    const confirmed = await confirm({\n      title: item.confirm?.title ?? props.confirmTitle,\n      message: item.confirm?.message ?? props.confirmMessage,\n      cancelLabel: props.cancelLabel,\n      confirmLabel: item.confirm?.acceptLabel ?? (item.action === 'delete' ? props.deleteLabel : props.confirmLabel),\n      confirmVariant: destructive ? 'danger' : 'primary'\n    })\n    if (!confirmed) return\n  }\n  emit('click-item', { id: props.id, ...item })\n}\n\nfunction onOpenChange(value: boolean) {\n  open.value = value\n  if (value) emit('show')\n  else emit('hide')\n}\n</script>\n\n<template>\n  <div>\n    <!-- Not modal: the page stays live (hover, scroll) while it's open. -->\n    <DropdownMenuRoot :modal=\"false\" :open=\"open\" @update:open=\"onOpenChange\">\n      <!-- The tooltip inside the menu's trigger: Reka's anchors attach to the nearest popper, which must be the menu's. -->\n      <DropdownMenuTrigger as-child>\n        <Tooltip :disabled=\"!tooltip || open\" :text=\"tooltip ?? undefined\">\n          <slot name=\"trigger\" :open=\"open\">\n            <Button\n              :aria-label=\"buttonLabel ? undefined : (tooltip ?? undefined)\"\n              :icon-only=\"!buttonLabel\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              @click.stop\n            >\n              <span v-if=\"buttonLabel\">{{ buttonLabel }}</span>\n              <Icon v-if=\"buttonIcon\" color=\"ink-subtle\" :name=\"buttonIcon\" />\n            </Button>\n          </slot>\n        </Tooltip>\n      </DropdownMenuTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuContent\n          :align=\"align\"\n          class=\"z-[1100] min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in\"\n          side=\"bottom\"\n        >\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <DropdownMenuSeparator v-if=\"item.type === 'separator'\" class=\"my-1 border-t border-sui-line-subtle\" />\n            <DropdownMenuItem\n              v-else\n              class=\"relative rounded-lg text-sm text-sui-ink transition-colors duration-150 outline-hidden hover:bg-sui-sunken focus-visible:sui-ring-inset data-highlighted:bg-sui-sunken\"\n              @select=\"select(item)\"\n            >\n              <div\n                class=\"flex cursor-pointer items-center gap-2.5 px-2.5 py-1.5\"\n                :class=\"item.variant === 'danger' ? 'text-sui-danger' : 'text-sui-ink'\"\n              >\n                <Icon\n                  v-if=\"item.icon\"\n                  class=\"h-4 w-4 shrink-0\"\n                  :color=\"item.variant === 'danger' ? 'danger' : 'ink-muted'\"\n                  :name=\"item.icon\"\n                />\n                <span class=\"flex-1 text-13\">{{ item.label }}</span>\n                <span v-if=\"item.shortcut\" class=\"text-11 text-sui-ink-muted\">{{ item.shortcut }}</span>\n              </div>\n            </DropdownMenuItem>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenuPortal>\n    </DropdownMenuRoot>\n  </div>\n</template>\n"],"mappings":"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"}