@ecoma-io/loom 0.1.0 → 0.2.0

package/dist/primitives/Accordion/Accordion.vue.d.ts

@@ -0,0 +1,68 @@
+/**
+ * One collapsible section of the accordion. The list is data rather than markup
+ * because the primitive stays free of structure logic — toggling a section emits
+ * its `value` and the host decides what that open state means.
+ */
+export interface AccordionItem {
+    /** Unique key for the item. */
+    value: string;
+    /** The heading text shown on the trigger. */
+    label: string;
+    /** Inert: announced as disabled, and toggling it does nothing. */
+    disabled?: boolean;
+}
+/**
+ * Whether the accordion allows one open item or many. The members mirror Reka's
+ * own `AccordionType`, and the template binding is what enforces that.
+ */
+export type AccordionType = "single" | "multiple";
+/**
+ * Vertical gap between items, tightening below the `sm` breakpoint where the
+ * accordion is more likely inside a narrow panel.
+ */
+export type AccordionGap = "sm" | "md" | "lg";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The sections, in order. Each needs a unique `value`. */
+    items: AccordionItem[];
+    /** Whether one or many items can be open at once. */
+    type?: AccordionType;
+    /** In single mode, whether the open item can be closed. Ignored in multiple mode. */
+    collapsible?: boolean;
+    /** Drive the open state from the host with `v-model`; omit it and the accordion owns its own state. */
+    modelValue?: string | string[] | undefined;
+    /** Vertical gap between items. */
+    gap?: AccordionGap;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The sections, in order. Each needs a unique `value`. */
+    items: AccordionItem[];
+    /** Whether one or many items can be open at once. */
+    type?: AccordionType;
+    /** In single mode, whether the open item can be closed. Ignored in multiple mode. */
+    collapsible?: boolean;
+    /** Drive the open state from the host with `v-model`; omit it and the accordion owns its own state. */
+    modelValue?: string | string[] | undefined;
+    /** Vertical gap between items. */
+    gap?: AccordionGap;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string | string[]) => any;
+}>, {
+    gap: AccordionGap;
+    modelValue: string | string[] | undefined;
+    type: AccordionType;
+    collapsible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        item: AccordionItem;
+        index: number;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Accordion.vue.d.ts.map

package/dist/primitives/Accordion/Accordion.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Accordion/Accordion.vue"],"names":[],"mappings":"AAiKA;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAC5B,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElD;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;wBACzB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAmBd,2DAA2D;WACpD,aAAa,EAAE;IACtB,qDAAqD;WAC9C,aAAa;IACpB,qFAAqF;kBACvE,OAAO;IACrB,uGAAuG;iBAC1F,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;IAC1C,kCAAkC;UAC5B,YAAY;;;;IATlB,2DAA2D;WACpD,aAAa,EAAE;IACtB,qDAAqD;WAC9C,aAAa;IACpB,qFAAqF;kBACvE,OAAO;IACrB,uGAAuG;iBAC1F,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;IAC1C,kCAAkC;UAC5B,YAAY;;;;SAAZ,YAAY;gBAFL,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;UAJnC,aAAa;iBAEN,OAAO;;cAwMX,CAAC,KAAK;;;KAAiB,KAAK,GAAG;EAWzC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/primitives/Accordion/Accordion.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,67 @@
+import { cn } from "../../lib/cn.js";
+import { optional } from "../../lib/props.js";
+import { ChevronDown } from "@lucide/vue";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger } from "reka-ui";
+//#region src/primitives/Accordion/Accordion.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "px-4 pb-3 text-sm text-muted-foreground" };
+var Accordion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Accordion",
+	props: {
+		items: {},
+		type: { default: "single" },
+		collapsible: {
+			type: Boolean,
+			default: true
+		},
+		modelValue: { default: void 0 },
+		gap: { default: "md" }
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const GAP_CLASSES = {
+			sm: "gap-1 sm:gap-2",
+			md: "gap-2 sm:gap-3",
+			lg: "gap-3 sm:gap-4"
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(AccordionRoot), mergeProps({
+				type: __props.type,
+				collapsible: __props.collapsible
+			}, unref(optional)({ modelValue: __props.modelValue }), {
+				class: unref(cn)("flex flex-col", GAP_CLASSES[__props.gap]),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+			}), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+					return openBlock(), createBlock(unref(AccordionItem), {
+						key: item.value,
+						value: item.value,
+						disabled: item.disabled ?? false,
+						class: "border-b border-border last:border-b-0"
+					}, {
+						default: withCtx(() => [createVNode(unref(AccordionTrigger), { class: normalizeClass(unref(cn)("flex items-center justify-between w-full px-4 py-3 text-sm font-medium text-foreground transition-colors duration-fast ease-out hover:bg-subtle rounded-md", "data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground")) }, {
+							default: withCtx(() => [createTextVNode(toDisplayString(item.label) + " ", 1), createVNode(unref(ChevronDown), { class: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-fast ease-out data-[state=open]:rotate-180" })]),
+							_: 2
+						}, 1032, ["class"]), createVNode(unref(AccordionContent), { class: "overflow-hidden data-[state=closed]:animate-fade-fall data-[state=open]:animate-fade-rise" }, {
+							default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default", {
+								item,
+								index: __props.items.indexOf(item)
+							})])]),
+							_: 2
+						}, 1024)]),
+						_: 2
+					}, 1032, ["value", "disabled"]);
+				}), 128))]),
+				_: 3
+			}, 16, [
+				"type",
+				"collapsible",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { Accordion_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Accordion.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/Accordion/Accordion.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/Accordion/Accordion.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * One collapsible section of the accordion. The list is data rather than markup\n * because the primitive stays free of structure logic — toggling a section emits\n * its `value` and the host decides what that open state means.\n */\nexport interface AccordionItem {\n  /** Unique key for the item. */\n  value: string;\n  /** The heading text shown on the trigger. */\n  label: string;\n  /** Inert: announced as disabled, and toggling it does nothing. */\n  disabled?: boolean;\n}\n\n/**\n * Whether the accordion allows one open item or many. The members mirror Reka's\n * own `AccordionType`, and the template binding is what enforces that.\n */\nexport type AccordionType = \"single\" | \"multiple\";\n\n/**\n * Vertical gap between items, tightening below the `sm` breakpoint where the\n * accordion is more likely inside a narrow panel.\n */\nexport type AccordionGap = \"sm\" | \"md\" | \"lg\";\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  AccordionItem as RekaAccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n} from \"reka-ui\";\nimport { ChevronDown } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * Accordion — vertically stacked, expandable sections: each trigger reveals\n * its panel and collapses the rest (single mode) or lets several panels stay\n * open at once (multiple mode). Built on Reka UI's Accordion, which supplies\n * the `accordion`/`accordion-item`/`button`/`region` semantics and the\n * arrow-key navigation between triggers.\n *\n * Items are data rather than markup. A scoped default slot receives each item\n * so the host can render arbitrary content inside a panel — the primitive\n * owns the open/close mechanics and the trigger chrome, not what is inside the\n * panel.\n *\n * `collapsible` only matters in single mode: it governs whether the one open\n * item can be closed again. A non-collapsible single accordion always has\n * exactly one panel open. In multiple mode the prop is ignored — every item\n * can close independently.\n */\nwithDefaults(\n  defineProps<{\n    /** The sections, in order. Each needs a unique `value`. */\n    items: AccordionItem[];\n    /** Whether one or many items can be open at once. */\n    type?: AccordionType;\n    /** In single mode, whether the open item can be closed. Ignored in multiple mode. */\n    collapsible?: boolean;\n    /** Drive the open state from the host with `v-model`; omit it and the accordion owns its own state. */\n    modelValue?: string | string[] | undefined;\n    /** Vertical gap between items. */\n    gap?: AccordionGap;\n  }>(),\n  {\n    type: \"single\",\n    collapsible: true,\n    modelValue: undefined,\n    gap: \"md\",\n  },\n);\n\n// `modelValue: undefined` is load-bearing, not a redundant default — it is\n// what keeps the uncontrolled third state reachable past Vue's absent-Boolean\n// casting. `optional()` in the template is the other half; its docblock\n// carries the reasoning for both.\n\ndefineEmits<{ \"update:modelValue\": [value: string | string[]] }>();\n\nconst GAP_CLASSES: Record<AccordionGap, string> = {\n  sm: \"gap-1 sm:gap-2\",\n  md: \"gap-2 sm:gap-3\",\n  lg: \"gap-3 sm:gap-4\",\n};\n</script>\n\n<template>\n  <AccordionRoot\n    :type=\"type\"\n    :collapsible=\"collapsible\"\n    v-bind=\"optional({ modelValue })\"\n    :class=\"cn('flex flex-col', GAP_CLASSES[gap])\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <RekaAccordionItem\n      v-for=\"item in items\"\n      :key=\"item.value\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled ?? false\"\n      class=\"border-b border-border last:border-b-0\"\n    >\n      <AccordionTrigger\n        :class=\"\n          cn(\n            'flex items-center justify-between w-full px-4 py-3 text-sm font-medium text-foreground transition-colors duration-fast ease-out hover:bg-subtle rounded-md',\n            // A disabled trigger must still be reachable by arrow key, so the\n            // pointer is silenced but the element stays in the tab order.\n            'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n          )\n        \"\n      >\n        {{ item.label }}\n        <!-- The chevron rotates 180deg when the item opens, matching the\n             `data-[state=open]` attribute Reka sets on the trigger. A\n             transition rather than an animation, because the rotation has no\n             entrance/exit split — it just flips. -->\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-fast ease-out data-[state=open]:rotate-180\"\n        />\n      </AccordionTrigger>\n      <!-- Scoped to the open/closed state, never unconditional. Reka's\n           Presence keeps closed content mounted until an animationend arrives,\n           and a mount-only animation never fires a second one — so an\n           unconditional animation class strands invisible content over the\n           page. Scoped, the closed element computes `animation-name: none` and\n           Presence unmounts it at once.\n\n           The rise/fall pair is the existing vocabulary — a height animation\n           keyed to Reka's `--reka-accordion-content-height` would need its own\n           keyframe and utility registration, which belongs in `global.css` and\n           `theme.css` rather than in a single component. -->\n      <AccordionContent\n        class=\"overflow-hidden data-[state=closed]:animate-fade-fall data-[state=open]:animate-fade-rise\"\n      >\n        <div class=\"px-4 pb-3 text-sm text-muted-foreground\">\n          <!-- @slot The content of each panel. Receives the item as a slot prop. -->\n          <slot :item=\"item\" :index=\"items.indexOf(item)\" />\n        </div>\n      </AccordionContent>\n    </RekaAccordionItem>\n  </AccordionRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAoFA,MAAM,cAA4C;GAChD,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;;GAIE,OAAA,UAAA,GAAA,YAqDgB,MAAA,aAAA,GArDhB,WAqDgB;IApDb,MAAM,QAAA;IACN,aAAa,QAAA;GACN,GAAA,MAAA,QAAA,CAAQ,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA,GAAA;IAC5B,OAAO,MAAA,EAAA,CAAE,CAAA,iBAAkB,YAAY,QAAA,IAAG;IAC1C,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAGpD,SAAA,cAAqB,EADvB,UAAA,IAAA,GAAA,mBA6CoB,UAAA,MAAA,WA5CH,QAAA,QAAR,SAAI;KADb,OAAA,UAAA,GAAA,YA6CoB,MAAA,aAAA,GAAA;MA3CjB,KAAK,KAAK;MACV,OAAO,KAAK;MACZ,UAAU,KAAK,YAAQ;MACxB,OAAM;;MAEN,SAAA,cAkBmB,CAlBnB,YAkBmB,MAAA,gBAAA,GAAA,EAjBhB,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,8JAAA,2EAAA,CAAA,EAAA,GAAA;OASrB,SAAA,cAAgB,CAAb,gBAAA,gBAAA,KAAK,KAAK,IAAG,KAKhB,CAAA,GAAA,YAEE,MAAA,WAAA,GAAA,EADA,OAAM,kHAAiH,CAAA,CAAA,CAAA;;MAc3H,GAAA,MAAA,CAAA,OAAA,CAAA,GAAA,YAOmB,MAAA,gBAAA,GAAA,EANjB,OAAM,4FAA2F,GAAA;OAEjG,SAAA,cAGM,CAHN,mBAGM,OAHN,YAGM,CADJ,WAAkD,KAAA,QAAA,WAAA;QAArC;QAAO,OAAO,QAAA,MAAM,QAAQ,IAAI"}

package/dist/primitives/AlertDialog/AlertDialog.js

@@ -0,0 +1,7 @@
+import AlertDialog_vue_vue_type_script_setup_true_lang_default, { ALERT_DIALOG_LABELS } from "./AlertDialog.vue_vue_type_script_setup_true_lang.js";
+//#region src/primitives/AlertDialog/AlertDialog.vue
+var AlertDialog_default = AlertDialog_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ALERT_DIALOG_LABELS, AlertDialog_default as default };
+
+//# sourceMappingURL=AlertDialog.js.map

package/dist/primitives/AlertDialog/AlertDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.js","names":[],"sources":["../../../src/primitives/AlertDialog/AlertDialog.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * The two buttons, which are the whole of what this component says on its own\n * account: the title and the consequence line are the host's, and there is no\n * body slot for anything else to arrive through.\n *\n * These were `confirmLabel` and `cancelLabel` props, and folding them in here\n * is not a rename. A prop default is per-instance by construction, so\n * \"Confirm\" and \"Cancel\" were the two strings in this library that a host\n * could correct at every call site and nowhere else — an application in\n * Vietnamese had to restate `cancelLabel` on every alert it rendered, and\n * forgetting one left an English button in the middle of a Vietnamese\n * decision. As a slot, `cancel` is set once for the application and `confirm`\n * is corrected per instance, which is the split these two actually want.\n */\nexport interface AlertDialogLabels {\n  /**\n   * The action button. **Replace it with the verb it performs** — \"Delete\",\n   * \"Discard\", \"Leave without saving\". The default is a placeholder: \"Confirm\"\n   * tells a reader they are confirming and not what.\n   */\n  readonly confirm: string;\n  /**\n   * The way out, and the control that opens with focus. Unlike `confirm` this\n   * one usually is the same word everywhere in an application, which is what\n   * makes a vocabulary rather than a prop the right home for it.\n   */\n  readonly cancel: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const ALERT_DIALOG_LABELS: AlertDialogLabels = {\n  confirm: \"Confirm\",\n  cancel: \"Cancel\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport {\n  AlertDialogRoot,\n  AlertDialogTrigger,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n} from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { buttonVariants } from \"../Button/Button.vue\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\n\n/**\n * AlertDialog — the modal that demands a decision before anything else\n * happens: \"Delete this permanently?\", \"Discard unsaved changes?\".\n *\n * It is `Dialog` with the exits removed, and that is the whole of the\n * difference. A `Dialog` is dismissible: Esc, a click on the overlay and the\n * close glyph all mean \"not now\", which is right for a task surface. An\n * AlertDialog has no such exit — a click outside does nothing, there is no\n * close glyph, and the only ways out are the two buttons. It carries\n * `role=\"alertdialog\"`, so its description is announced with its name rather\n * than waiting to be navigated to.\n *\n * Reach for it only when dismissing by accident would lose work or destroy\n * something. Reach for `Dialog` for everything else — an AlertDialog used for\n * an ordinary form is a control that traps a reader for no reason.\n *\n * There is deliberately no body slot. A question that needs body content is a\n * task, and a task is a `Dialog`; keeping the surface to a title, a\n * consequence line and two buttons is what stops this component from becoming\n * an undismissible form.\n *\n * Initial focus lands on **Cancel**, never on the action. A destructive\n * confirm that focuses \"Delete\" turns a reflexive Enter — from a reader who\n * has not finished the sentence — into a deletion. Reka does this in\n * `AlertDialogContent`; the test pins it, because it is the single behaviour\n * this component exists to guarantee.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Drive the alert from the host with `v-model:open`; omit it and the alert owns its own state. */\n    open?: boolean | undefined;\n    /** The accessible name, and the decision being asked for. State the consequence (\"Delete scene?\"), not \"Are you sure?\". */\n    title: string;\n    /** The consequence line, announced with the title rather than found later. Omit it only when the title already says everything. */\n    description?: string;\n    /** Paints the action in the destructive language. The verb in `labels.confirm` is what carries the meaning; this only adds emphasis to it. */\n    destructive?: boolean;\n    /**\n     * The two button names, as any subset of `AlertDialogLabels` — what it\n     * leaves out stays as the host's `provideLoomLabels` vocabulary left it,\n     * and then as Loom's English.\n     *\n     * **`confirm` is meant to be set here on all but the rarest alert**, since\n     * the verb is what tells a reader what the button does; `cancel` belongs in\n     * the application's vocabulary, where it is written once.\n     */\n    labels?: LabelOverrides<AlertDialogLabels>;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting, and `optional()` in the template is the other half. Its docblock\n  // carries the reasoning for both.\n  {\n    open: undefined,\n    destructive: false,\n  },\n);\n\ndefineEmits<{\n  /** The reader chose the action. The alert does not close itself — the host decides, so a failed save can keep it open. */\n  confirm: [];\n  /** The reader backed out, by the cancel button or by Esc. */\n  cancel: [];\n  /** A close was requested. Fires alongside `confirm` and `cancel`, so a host driving `v-model:open` needs only this one. */\n  \"update:open\": [value: boolean];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"alertDialog\", ALERT_DIALOG_LABELS, () => props.labels);\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the panel,\n// which is the only element this component reliably renders — there may be no\n// trigger at all when the host drives `open` itself.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead:\n// spreading it alongside the panel's own `:class` only concatenates the two\n// lists, so a caller's width silently wins or loses depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: panelAttrs } = useSplitAttrs();\n\n// Reka wires `aria-describedby` to its own description id unconditionally, so\n// a panel rendered without a description ships a reference to an element that\n// does not exist. That is not cosmetic here: `role=\"alertdialog\"` earns its\n// keep by having the description announced with the name, and a dangling IDREF\n// announces nothing. Clearing the attribute is what removes it — fallthrough\n// attributes are merged after Reka's own, and Vue drops an attribute bound to\n// `undefined`. A caller's own `aria-describedby` still wins, because\n// `panelAttrs` is spread last.\nconst panelBindings = computed(() => ({\n  ...(props.description ? {} : { \"aria-describedby\": undefined }),\n  ...panelAttrs.value,\n}));\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The control that opens the alert. Optional — omit it and drive\n         the alert entirely from the host with `v-model:open`. -->\n    <AlertDialogTrigger v-if=\"$slots.trigger\" as-child>\n      <slot name=\"trigger\" />\n    </AlertDialogTrigger>\n\n    <AlertDialogPortal>\n      <!-- Same scrim as Dialog, and it is inert here: Reka's AlertDialogContent\n           prevents both `pointerDownOutside` and `interactOutside`, so a click\n           lands on nothing. That is the point — an accidental click at the edge\n           of the screen must not be able to answer the question. -->\n      <AlertDialogOverlay\n        class=\"fixed inset-0 z-50 bg-foreground/70 data-[state=open]:animate-fade\"\n      />\n      <AlertDialogContent\n        v-bind=\"panelBindings\"\n        :data-destructive=\"destructive || undefined\"\n        :class=\"\n          cn(\n            'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n            // One width, and no `size` prop to vary it. A decision has one\n            // shape; the wider panels exist on Dialog because an authoring\n            // surface needs them, and there is no authoring surface here.\n            'w-[min(92vw,32rem)]',\n            'rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-none',\n            // Scoped to the open state, never unconditional. Reka's Presence\n            // keeps closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — which here would\n            // strand a full-screen, input-blocking overlay over a page with no\n            // alert on it. Scoped, the closed element computes\n            // `animation-name: none` and Presence unmounts it at once.\n            'data-[state=open]:animate-scale-in',\n            attrs.class as string,\n          )\n        \"\n        @escape-key-down=\"$emit('cancel')\"\n      >\n        <AlertDialogTitle class=\"text-base font-semibold\">{{ title }}</AlertDialogTitle>\n        <AlertDialogDescription v-if=\"description\" class=\"mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </AlertDialogDescription>\n\n        <div class=\"mt-6 flex items-center justify-end gap-2\">\n          <!-- Cancel is first in the DOM as well as first visually, so the\n               order a screen reader reads matches the order the eye does. It is\n               also the element Reka focuses on open. -->\n          <AlertDialogCancel\n            :class=\"buttonVariants({ variant: 'subtle' })\"\n            @click=\"$emit('cancel')\"\n          >\n            {{ text.cancel }}\n          </AlertDialogCancel>\n          <!-- The destructive paint is emphasis, not the signal. What tells a\n               reader this button destroys something is the verb in its label,\n               which is why `labels.confirm` is meant to be replaced rather than\n               left as \"Confirm\". -->\n          <AlertDialogAction\n            :class=\"buttonVariants({ variant: destructive ? 'destructive' : 'primary' })\"\n            @click=\"$emit('confirm')\"\n          >\n            {{ text.confirm }}\n          </AlertDialogAction>\n        </div>\n      </AlertDialogContent>\n    </AlertDialogPortal>\n  </AlertDialogRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/AlertDialog/AlertDialog.vue.d.ts

@@ -0,0 +1,94 @@
+import { type LabelOverrides } from "../../lib/labels";
+/**
+ * The two buttons, which are the whole of what this component says on its own
+ * account: the title and the consequence line are the host's, and there is no
+ * body slot for anything else to arrive through.
+ *
+ * These were `confirmLabel` and `cancelLabel` props, and folding them in here
+ * is not a rename. A prop default is per-instance by construction, so
+ * "Confirm" and "Cancel" were the two strings in this library that a host
+ * could correct at every call site and nowhere else — an application in
+ * Vietnamese had to restate `cancelLabel` on every alert it rendered, and
+ * forgetting one left an English button in the middle of a Vietnamese
+ * decision. As a slot, `cancel` is set once for the application and `confirm`
+ * is corrected per instance, which is the split these two actually want.
+ */
+export interface AlertDialogLabels {
+    /**
+     * The action button. **Replace it with the verb it performs** — "Delete",
+     * "Discard", "Leave without saving". The default is a placeholder: "Confirm"
+     * tells a reader they are confirming and not what.
+     */
+    readonly confirm: string;
+    /**
+     * The way out, and the control that opens with focus. Unlike `confirm` this
+     * one usually is the same word everywhere in an application, which is what
+     * makes a vocabulary rather than a prop the right home for it.
+     */
+    readonly cancel: string;
+}
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it, and
+ * exported so a host can build a partial vocabulary against the real thing.
+ */
+export declare const ALERT_DIALOG_LABELS: AlertDialogLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Drive the alert from the host with `v-model:open`; omit it and the alert owns its own state. */
+    open?: boolean | undefined;
+    /** The accessible name, and the decision being asked for. State the consequence ("Delete scene?"), not "Are you sure?". */
+    title: string;
+    /** The consequence line, announced with the title rather than found later. Omit it only when the title already says everything. */
+    description?: string;
+    /** Paints the action in the destructive language. The verb in `labels.confirm` is what carries the meaning; this only adds emphasis to it. */
+    destructive?: boolean;
+    /**
+     * The two button names, as any subset of `AlertDialogLabels` — what it
+     * leaves out stays as the host's `provideLoomLabels` vocabulary left it,
+     * and then as Loom's English.
+     *
+     * **`confirm` is meant to be set here on all but the rarest alert**, since
+     * the verb is what tells a reader what the button does; `cancel` belongs in
+     * the application's vocabulary, where it is written once.
+     */
+    labels?: LabelOverrides<AlertDialogLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    cancel: () => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** Drive the alert from the host with `v-model:open`; omit it and the alert owns its own state. */
+    open?: boolean | undefined;
+    /** The accessible name, and the decision being asked for. State the consequence ("Delete scene?"), not "Are you sure?". */
+    title: string;
+    /** The consequence line, announced with the title rather than found later. Omit it only when the title already says everything. */
+    description?: string;
+    /** Paints the action in the destructive language. The verb in `labels.confirm` is what carries the meaning; this only adds emphasis to it. */
+    destructive?: boolean;
+    /**
+     * The two button names, as any subset of `AlertDialogLabels` — what it
+     * leaves out stays as the host's `provideLoomLabels` vocabulary left it,
+     * and then as Loom's English.
+     *
+     * **`confirm` is meant to be set here on all but the rarest alert**, since
+     * the verb is what tells a reader what the button does; `cancel` belongs in
+     * the application's vocabulary, where it is written once.
+     */
+    labels?: LabelOverrides<AlertDialogLabels>;
+}> & Readonly<{
+    "onUpdate:open"?: (value: boolean) => any;
+    onCancel?: () => any;
+    onConfirm?: () => any;
+}>, {
+    open: boolean | undefined;
+    destructive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    trigger?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=AlertDialog.vue.d.ts.map

package/dist/primitives/AlertDialog/AlertDialog.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/AlertDialog/AlertDialog.vue"],"names":[],"mappings":"AAqPA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlE;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,iBAGjC,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IA6Bd,mGAAmG;WAC5F,OAAO,GAAG,SAAS;IAC1B,2HAA2H;WACpH,MAAM;IACb,mIAAmI;kBACrH,MAAM;IACpB,8IAA8I;kBAChI,OAAO;IACrB;;;;;;;;OAQG;aACM,cAAc,CAAC,iBAAiB,CAAC;;;;;;IAjB1C,mGAAmG;WAC5F,OAAO,GAAG,SAAS;IAC1B,2HAA2H;WACpH,MAAM;IACb,mIAAmI;kBACrH,MAAM;IACpB,8IAA8I;kBAChI,OAAO;IACrB;;;;;;;;OAQG;aACM,cAAc,CAAC,iBAAiB,CAAC;;;;;;UAhBnC,OAAO,GAAG,SAAS;iBAMZ,OAAO;;cAmVX,CAAC,KAAK,IAAiB,KAAK,GAAG;EAWzC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/primitives/AlertDialog/AlertDialog.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,99 @@
+import { cn } from "../../lib/cn.js";
+import { optional } from "../../lib/props.js";
+import { useLabels } from "../../lib/labels.js";
+import { useSplitAttrs } from "../../lib/attrs.js";
+import { buttonVariants } from "../Button/Button.vue_vue_type_script_setup_true_lang.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger } from "reka-ui";
+//#region src/primitives/AlertDialog/AlertDialog.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "mt-6 flex items-center justify-end gap-2" };
+/**
+* Loom's English, co-located with the component so it tree-shakes with it, and
+* exported so a host can build a partial vocabulary against the real thing.
+*/
+var ALERT_DIALOG_LABELS = {
+	confirm: "Confirm",
+	cancel: "Cancel"
+};
+var AlertDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "AlertDialog",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		title: {},
+		description: {},
+		destructive: {
+			type: Boolean,
+			default: false
+		},
+		labels: {}
+	},
+	emits: [
+		"confirm",
+		"cancel",
+		"update:open"
+	],
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("alertDialog", ALERT_DIALOG_LABELS, () => props.labels);
+		const { attrs, rest: panelAttrs } = useSplitAttrs();
+		const panelBindings = computed(() => ({
+			...props.description ? {} : { "aria-describedby": void 0 },
+			...panelAttrs.value
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(AlertDialogRoot), mergeProps(unref(optional)({ open: __props.open }), { "onUpdate:open": _cache[3] || (_cache[3] = ($event) => _ctx.$emit("update:open", $event)) }), {
+				default: withCtx(() => [_ctx.$slots.trigger ? (openBlock(), createBlock(unref(AlertDialogTrigger), {
+					key: 0,
+					"as-child": ""
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger")]),
+					_: 3
+				})) : createCommentVNode("", true), createVNode(unref(AlertDialogPortal), null, {
+					default: withCtx(() => [createVNode(unref(AlertDialogOverlay), { class: "fixed inset-0 z-50 bg-foreground/70 data-[state=open]:animate-fade" }), createVNode(unref(AlertDialogContent), mergeProps(panelBindings.value, {
+						"data-destructive": __props.destructive || void 0,
+						class: unref(cn)("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "w-[min(92vw,32rem)]", "rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-none", "data-[state=open]:animate-scale-in", unref(attrs).class),
+						onEscapeKeyDown: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("cancel"))
+					}), {
+						default: withCtx(() => [
+							createVNode(unref(AlertDialogTitle), { class: "text-base font-semibold" }, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.title), 1)]),
+								_: 1
+							}),
+							__props.description ? (openBlock(), createBlock(unref(AlertDialogDescription), {
+								key: 0,
+								class: "mt-1 text-sm text-muted-foreground"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.description), 1)]),
+								_: 1
+							})) : createCommentVNode("", true),
+							createElementVNode("div", _hoisted_1, [createVNode(unref(AlertDialogCancel), {
+								class: normalizeClass(unref(buttonVariants)({ variant: "subtle" })),
+								onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("cancel"))
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(unref(text).cancel), 1)]),
+								_: 1
+							}, 8, ["class"]), createVNode(unref(AlertDialogAction), {
+								class: normalizeClass(unref(buttonVariants)({ variant: __props.destructive ? "destructive" : "primary" })),
+								onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("confirm"))
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(unref(text).confirm), 1)]),
+								_: 1
+							}, 8, ["class"])])
+						]),
+						_: 1
+					}, 16, ["data-destructive", "class"])]),
+					_: 1
+				})]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ALERT_DIALOG_LABELS, AlertDialog_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=AlertDialog.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/AlertDialog/AlertDialog.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.vue_vue_type_script_setup_true_lang.js","names":["$emit","$slots"],"sources":["../../../src/primitives/AlertDialog/AlertDialog.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * The two buttons, which are the whole of what this component says on its own\n * account: the title and the consequence line are the host's, and there is no\n * body slot for anything else to arrive through.\n *\n * These were `confirmLabel` and `cancelLabel` props, and folding them in here\n * is not a rename. A prop default is per-instance by construction, so\n * \"Confirm\" and \"Cancel\" were the two strings in this library that a host\n * could correct at every call site and nowhere else — an application in\n * Vietnamese had to restate `cancelLabel` on every alert it rendered, and\n * forgetting one left an English button in the middle of a Vietnamese\n * decision. As a slot, `cancel` is set once for the application and `confirm`\n * is corrected per instance, which is the split these two actually want.\n */\nexport interface AlertDialogLabels {\n  /**\n   * The action button. **Replace it with the verb it performs** — \"Delete\",\n   * \"Discard\", \"Leave without saving\". The default is a placeholder: \"Confirm\"\n   * tells a reader they are confirming and not what.\n   */\n  readonly confirm: string;\n  /**\n   * The way out, and the control that opens with focus. Unlike `confirm` this\n   * one usually is the same word everywhere in an application, which is what\n   * makes a vocabulary rather than a prop the right home for it.\n   */\n  readonly cancel: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const ALERT_DIALOG_LABELS: AlertDialogLabels = {\n  confirm: \"Confirm\",\n  cancel: \"Cancel\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport {\n  AlertDialogRoot,\n  AlertDialogTrigger,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n} from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { buttonVariants } from \"../Button/Button.vue\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\n\n/**\n * AlertDialog — the modal that demands a decision before anything else\n * happens: \"Delete this permanently?\", \"Discard unsaved changes?\".\n *\n * It is `Dialog` with the exits removed, and that is the whole of the\n * difference. A `Dialog` is dismissible: Esc, a click on the overlay and the\n * close glyph all mean \"not now\", which is right for a task surface. An\n * AlertDialog has no such exit — a click outside does nothing, there is no\n * close glyph, and the only ways out are the two buttons. It carries\n * `role=\"alertdialog\"`, so its description is announced with its name rather\n * than waiting to be navigated to.\n *\n * Reach for it only when dismissing by accident would lose work or destroy\n * something. Reach for `Dialog` for everything else — an AlertDialog used for\n * an ordinary form is a control that traps a reader for no reason.\n *\n * There is deliberately no body slot. A question that needs body content is a\n * task, and a task is a `Dialog`; keeping the surface to a title, a\n * consequence line and two buttons is what stops this component from becoming\n * an undismissible form.\n *\n * Initial focus lands on **Cancel**, never on the action. A destructive\n * confirm that focuses \"Delete\" turns a reflexive Enter — from a reader who\n * has not finished the sentence — into a deletion. Reka does this in\n * `AlertDialogContent`; the test pins it, because it is the single behaviour\n * this component exists to guarantee.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Drive the alert from the host with `v-model:open`; omit it and the alert owns its own state. */\n    open?: boolean | undefined;\n    /** The accessible name, and the decision being asked for. State the consequence (\"Delete scene?\"), not \"Are you sure?\". */\n    title: string;\n    /** The consequence line, announced with the title rather than found later. Omit it only when the title already says everything. */\n    description?: string;\n    /** Paints the action in the destructive language. The verb in `labels.confirm` is what carries the meaning; this only adds emphasis to it. */\n    destructive?: boolean;\n    /**\n     * The two button names, as any subset of `AlertDialogLabels` — what it\n     * leaves out stays as the host's `provideLoomLabels` vocabulary left it,\n     * and then as Loom's English.\n     *\n     * **`confirm` is meant to be set here on all but the rarest alert**, since\n     * the verb is what tells a reader what the button does; `cancel` belongs in\n     * the application's vocabulary, where it is written once.\n     */\n    labels?: LabelOverrides<AlertDialogLabels>;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting, and `optional()` in the template is the other half. Its docblock\n  // carries the reasoning for both.\n  {\n    open: undefined,\n    destructive: false,\n  },\n);\n\ndefineEmits<{\n  /** The reader chose the action. The alert does not close itself — the host decides, so a failed save can keep it open. */\n  confirm: [];\n  /** The reader backed out, by the cancel button or by Esc. */\n  cancel: [];\n  /** A close was requested. Fires alongside `confirm` and `cancel`, so a host driving `v-model:open` needs only this one. */\n  \"update:open\": [value: boolean];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"alertDialog\", ALERT_DIALOG_LABELS, () => props.labels);\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the panel,\n// which is the only element this component reliably renders — there may be no\n// trigger at all when the host drives `open` itself.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead:\n// spreading it alongside the panel's own `:class` only concatenates the two\n// lists, so a caller's width silently wins or loses depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: panelAttrs } = useSplitAttrs();\n\n// Reka wires `aria-describedby` to its own description id unconditionally, so\n// a panel rendered without a description ships a reference to an element that\n// does not exist. That is not cosmetic here: `role=\"alertdialog\"` earns its\n// keep by having the description announced with the name, and a dangling IDREF\n// announces nothing. Clearing the attribute is what removes it — fallthrough\n// attributes are merged after Reka's own, and Vue drops an attribute bound to\n// `undefined`. A caller's own `aria-describedby` still wins, because\n// `panelAttrs` is spread last.\nconst panelBindings = computed(() => ({\n  ...(props.description ? {} : { \"aria-describedby\": undefined }),\n  ...panelAttrs.value,\n}));\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The control that opens the alert. Optional — omit it and drive\n         the alert entirely from the host with `v-model:open`. -->\n    <AlertDialogTrigger v-if=\"$slots.trigger\" as-child>\n      <slot name=\"trigger\" />\n    </AlertDialogTrigger>\n\n    <AlertDialogPortal>\n      <!-- Same scrim as Dialog, and it is inert here: Reka's AlertDialogContent\n           prevents both `pointerDownOutside` and `interactOutside`, so a click\n           lands on nothing. That is the point — an accidental click at the edge\n           of the screen must not be able to answer the question. -->\n      <AlertDialogOverlay\n        class=\"fixed inset-0 z-50 bg-foreground/70 data-[state=open]:animate-fade\"\n      />\n      <AlertDialogContent\n        v-bind=\"panelBindings\"\n        :data-destructive=\"destructive || undefined\"\n        :class=\"\n          cn(\n            'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n            // One width, and no `size` prop to vary it. A decision has one\n            // shape; the wider panels exist on Dialog because an authoring\n            // surface needs them, and there is no authoring surface here.\n            'w-[min(92vw,32rem)]',\n            'rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-none',\n            // Scoped to the open state, never unconditional. Reka's Presence\n            // keeps closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — which here would\n            // strand a full-screen, input-blocking overlay over a page with no\n            // alert on it. Scoped, the closed element computes\n            // `animation-name: none` and Presence unmounts it at once.\n            'data-[state=open]:animate-scale-in',\n            attrs.class as string,\n          )\n        \"\n        @escape-key-down=\"$emit('cancel')\"\n      >\n        <AlertDialogTitle class=\"text-base font-semibold\">{{ title }}</AlertDialogTitle>\n        <AlertDialogDescription v-if=\"description\" class=\"mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </AlertDialogDescription>\n\n        <div class=\"mt-6 flex items-center justify-end gap-2\">\n          <!-- Cancel is first in the DOM as well as first visually, so the\n               order a screen reader reads matches the order the eye does. It is\n               also the element Reka focuses on open. -->\n          <AlertDialogCancel\n            :class=\"buttonVariants({ variant: 'subtle' })\"\n            @click=\"$emit('cancel')\"\n          >\n            {{ text.cancel }}\n          </AlertDialogCancel>\n          <!-- The destructive paint is emphasis, not the signal. What tells a\n               reader this button destroys something is the verb in its label,\n               which is why `labels.confirm` is meant to be replaced rather than\n               left as \"Confirm\". -->\n          <AlertDialogAction\n            :class=\"buttonVariants({ variant: destructive ? 'destructive' : 'primary' })\"\n            @click=\"$emit('confirm')\"\n          >\n            {{ text.confirm }}\n          </AlertDialogAction>\n        </div>\n      </AlertDialogContent>\n    </AlertDialogPortal>\n  </AlertDialogRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;AAkCA,IAAa,sBAAyC;CACpD,SAAS;CACT,QAAQ;AACV;;;;;;;;;;;;;;;;;;;;;;;EAiDA,MAAM,QAAQ;EA2Cd,MAAM,OAAO,UAAU,eAAe,2BAA2B,MAAM,MAAM;EAY7E,MAAM,EAAE,OAAO,MAAM,eAAe,cAAc;EAUlD,MAAM,gBAAgB,gBAAgB;GACpC,GAAI,MAAM,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GAC7D,GAAG,WAAW;EAChB,EAAE;;GAIA,OAAA,UAAA,GAAA,YAkEkB,MAAA,eAAA,GAlElB,WAAyB,MAkEP,QAAA,CAlEe,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,EAAM,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM,GAAA,CAAA,GAAA;IAGpF,SAAA,cAEqB,CAFKC,KAAAA,OAAO,WAAjC,UAAA,GAAA,YAEqB,MAAA,kBAAA,GAAA;;KAFqB,YAAA;;KACxC,SAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;IAGzB,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,YA0DoB,MAAA,iBAAA,GAAA,MAAA;KArDlB,SAAA,cAEE,CAFF,YAEE,MAAA,kBAAA,GAAA,EADA,OAAM,qEAAoE,CAAA,GAE5E,YAiDqB,MAAA,kBAAA,GAjDrB,WACU,cAgDW,OAhDE;MACpB,oBAAkB,QAAA,eAAe,KAAA;MACjC,OAAkB,MAAA,EAAA,CAAE,CAAA,iEAAA,uBAAA,iGAAA,sCAAu8B,MAAA,KAAA,CAAK,CAAC,KAAA;MAkBj+B,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAED,KAAAA,MAAK,QAAA;;MAEvB,SAAA,cAAgF;OAAhF,YAAgF,MAAA,gBAAA,GAAA,EAA9D,OAAM,0BAAyB,GAAA;QAAC,SAAA,cAAW,CAAR,gBAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;OAC5B,QAAA,eAA9B,UAAA,GAAA,YAEyB,MAAA,sBAAA,GAAA;;QAFkB,OAAM;;QAC/C,SAAA,cAAiB,CAAd,gBAAA,gBAAA,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA;;;OAGhB,mBAoBM,OApBN,YAoBM,CAhBJ,YAKoB,MAAA,iBAAA,GAAA;QAJjB,OAAK,eAAE,MAAA,cAAA,CAAc,CAAA,EAAA,SAAA,SAAA,CAAA,CAAA;QACrB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,QAAA;;QAEb,SAAA,cAAiB,CAAd,gBAAA,gBAAA,MAAA,IAAA,CAAI,CAAC,MAAM,GAAA,CAAA,CAAA,CAAA;;OAMhB,GAAA,GAAA,CAAA,OAAA,CAAA,GAAA,YAKoB,MAAA,iBAAA,GAAA;QAJjB,OAAK,eAAE,MAAA,cAAA,CAAc,CAAA,EAAA,SAAY,QAAA,cAAW,gBAAA,UAAA,CAAA,CAAA;QAC5C,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,SAAA;;QAEb,SAAA,cAAkB,CAAf,gBAAA,gBAAA,MAAA,IAAA,CAAI,CAAC,OAAO,GAAA,CAAA,CAAA,CAAA"}

package/dist/primitives/Avatar/Avatar.js

@@ -1,7 +1,7 @@
-import Avatar_vue_vue_type_script_setup_true_lang_default from "./Avatar.vue_vue_type_script_setup_true_lang.js";
+import Avatar_vue_vue_type_script_setup_true_lang_default, { avatarVariants } from "./Avatar.vue_vue_type_script_setup_true_lang.js";
 //#region src/primitives/Avatar/Avatar.vue
 var Avatar_default = Avatar_vue_vue_type_script_setup_true_lang_default;
 //#endregion
-export { Avatar_default as default };
+export { avatarVariants, Avatar_default as default };
 
 //# sourceMappingURL=Avatar.js.map

package/dist/primitives/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/primitives/Avatar/Avatar.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Control height, and text size for the initials fallback. */\nexport type AvatarSize = \"sm\" | \"md\" | \"lg\";\n</script>\n\n<script setup lang=\"ts\">\nimport { AvatarRoot, AvatarImage, AvatarFallback } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Avatar — a user or agent's picture, with a graceful initials fallback for\n * no `src`, a broken URL, or a still-loading image. Built on Reka UI's\n * Avatar: the image only paints once it has actually finished loading, so\n * the fallback stays visible the whole time until then — first paint is\n * either the real photo or the initials, never a broken-image icon.\n */\nwithDefaults(\n  defineProps<{\n    /** Image URL. Omit it to render the fallback outright. */\n    src?: string;\n    /** Accessible name for the photo — required on `AvatarImage` so a screen reader announces who it is, not just that an image loaded. */\n    alt?: string;\n    /** Initials to show while there is no image, or once one has failed — computed by the caller, never derived from `alt` here. */\n    fallback?: string;\n    /** Control height. */\n    size?: AvatarSize;\n  }>(),\n  {\n    alt: \"\",\n    size: \"md\",\n  },\n);\n</script>\n\n<template>\n  <AvatarRoot\n    :class=\"\n      cn(\n        'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground select-none',\n        size === 'sm' && 'h-8 w-8 text-xs',\n        size === 'md' && 'h-10 w-10 text-sm',\n        size === 'lg' && 'h-12 w-12 text-base',\n      )\n    \"\n  >\n    <!-- Reka paints AvatarImage only once the photo has loaded, so scale-in\n         plays exactly on that swap-in — a gentle settle over the fallback. -->\n    <AvatarImage\n      v-if=\"src\"\n      :src=\"src\"\n      :alt=\"alt\"\n      class=\"h-full w-full animate-scale-in object-cover\"\n    />\n    <AvatarFallback class=\"font-medium\">{{ fallback }}</AvatarFallback>\n  </AvatarRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/primitives/Avatar/Avatar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** Control height, and the text size the initials fallback prints at. */\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/** A circle, or a rounded square tile. */\nexport type AvatarShape = \"circle\" | \"square\";\n\n/**\n * Which visual treatment the avatar receives. `accent` applies the accent\n * colour as a rim, signalling a second semantic category distinct from the\n * default — a different role, origin, or mode.\n */\nexport type AvatarVariant = \"default\" | \"accent\";\n\nexport const avatarVariants = cva(\n  \"relative inline-flex shrink-0 items-center justify-center overflow-hidden select-none\",\n  {\n    // `satisfies` keeps the two halves honest: the unions above are the names a\n    // consumer imports and the documentation prints, the maps below are the\n    // classes. Adding a member to one and not the other stops compiling — which\n    // is what the three inline `size === '…' &&` conditionals this replaced\n    // could not do, and the reason five sizes could not stay written that way.\n    variants: {\n      size: {\n        // `text-xs` twice, deliberately. It is the smallest step Tailwind's own\n        // scale has, and the step below it — Loom's `text-micro` — is a name\n        // tailwind-merge classifies as a text *colour* rather than a size, so\n        // `cn()` drops it the moment the force map adds `text-muted-foreground`\n        // after it. Two initials at 12px still fit inside 24px.\n        xs: \"h-6 w-6 text-xs\",\n        sm: \"h-8 w-8 text-xs\",\n        md: \"h-10 w-10 text-sm\",\n        lg: \"h-12 w-12 text-base\",\n        xl: \"h-16 w-16 text-lg\",\n      } satisfies Record<AvatarSize, string>,\n      force: {\n        default: \"bg-muted text-muted-foreground\",\n        // The accent rim. Two signals, not one: the rim's *presence* is what a\n        // reader who cannot resolve the hue still sees — a default avatar has no\n        // edge at all — and the hidden `accentLabel` is what a reader who sees\n        // no avatar hears. The corner is left alone on purpose, because the\n        // corner is Indicator's: a presence dot pinned there would land on top\n        // of anything this component drew.\n        accent: \"border-2 border-accent bg-accent-muted text-accent\",\n      } satisfies Record<AvatarVariant, string>,\n    },\n    defaultVariants: { size: \"md\", force: \"default\" },\n  },\n);\n\n/**\n * A square avatar's corner radius, one value per size rather than the control\n * radius throughout. `rounded-md` is calibrated against a ~36px control; on a\n * 24px tile it is a third of the side, where a milled fillet stops reading as\n * a corner and starts reading as a blob, and on a 64px one it has almost\n * disappeared. Stepping it holds the corner between a sixth and a quarter of\n * the side at every size — the band the control radius already sits in — which\n * is the nesting law applied to a tile whose \"padding\" is its own edge.\n */\nconst SQUARE_RADIUS = {\n  xs: \"rounded-sm\",\n  sm: \"rounded-md\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n} satisfies Record<AvatarSize, string>;\n\n/**\n * The rounding for one size and shape. A circle is one value at every size; a\n * square is not, which is why the radius cannot live in the `cva` map beside\n * the heights. Kept off the public surface deliberately: a consumer wanting an\n * avatar-shaped tile should render an `Avatar`, not reassemble one.\n */\nfunction avatarRadius(size: AvatarSize, shape: AvatarShape): string {\n  return shape === \"circle\" ? \"rounded-full\" : SQUARE_RADIUS[size];\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { AvatarRoot, AvatarImage, AvatarFallback } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\n\n/**\n * Avatar — a user's picture, with a graceful initials fallback for\n * no `src`, a broken URL, or a still-loading image. Built on Reka UI's\n * Avatar: the image only paints once it has actually finished loading, so\n * the fallback stays visible the whole time until then — first paint is\n * either the real photo or the initials, never a broken-image icon.\n *\n * Two neighbours are worth naming. Several faces standing for one thing — the\n * people on a task, the agents on a run — are an `AvatarGroup`, which owns the\n * overlap, the stacking order and the \"+3\" so a row of them is one object to a\n * screen reader rather than N unrelated images. Anything pinned onto the\n * avatar's corner — a presence dot, an unread count — is an `Indicator`\n * wrapped around it; this component deliberately draws nothing there.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Image URL. Omit it to render the fallback outright. */\n    src?: string;\n    /** Accessible name for the photo — required on `AvatarImage` so a screen reader announces who it is, not just that an image loaded. */\n    alt?: string;\n    /** Initials to show while there is no image, or once one has failed — computed by the caller, never derived from `alt` here. */\n    fallback?: string;\n    /** Control height. */\n    size?: AvatarSize;\n    /** A circle, or a rounded square tile. Square suits a subject a circle would misdescribe — an organisation, a project, a repository — and takes a radius that steps with the size rather than one fixed value. */\n    shape?: AvatarShape;\n    /** Which visual treatment the avatar receives. `accent` applies the accent rim and `accentLabel` for a screen reader, so the distinction never rests on the hue alone. */\n    variant?: AvatarVariant;\n    /** What a screen reader announces after the name of an `accent` avatar. Localise it. Set it empty when something outside already says so — `AvatarGroup` does, because each row item composes its own name — and nothing is added for a `default` avatar either way. */\n    accentLabel?: string;\n  }>(),\n  {\n    alt: \"\",\n    size: \"md\",\n    shape: \"circle\",\n    variant: \"default\",\n    accentLabel: \"\",\n  },\n);\n\n// One rendered node, and it is the right home for every fallthrough attribute\n// — but `class` still goes the long way round, through `cn()`. Vue's own merge\n// only concatenates, so the `bg-subtle` an AvatarGroup paints its overflow tile\n// with would win or lose against this root's `bg-muted` depending on the order\n// Tailwind happened to emit the two rules in, rather than on intent.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\nconst radius = computed(() => avatarRadius(props.size, props.shape));\n</script>\n\n<template>\n  <AvatarRoot\n    v-bind=\"rest\"\n    :data-variant=\"variant\"\n    :class=\"cn(avatarVariants({ size, force: variant }), radius, attrs.class as string)\"\n  >\n    <!-- Reka paints AvatarImage only once the photo has loaded, so scale-in\n         plays exactly on that swap-in — a gentle settle over the fallback. -->\n    <AvatarImage\n      v-if=\"src\"\n      :src=\"src\"\n      :alt=\"alt\"\n      class=\"h-full w-full animate-scale-in object-cover\"\n    />\n    <AvatarFallback class=\"font-medium\">{{ fallback }}</AvatarFallback>\n    <!-- The half of the accent signal a rim cannot carry. It sits after the\n         image so it is announced as a qualifier on the name rather than in\n         place of it, and it is dropped entirely for an empty `accentLabel`: a\n         wrapper that has already worked the qualifier into its own name would\n         otherwise leave a second copy of it in the tree. -->\n    <span v-if=\"variant === 'accent' && accentLabel\" class=\"sr-only\">{{ accentLabel }}</span>\n  </AvatarRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/Avatar/Avatar.vue.d.ts

@@ -1,5 +1,17 @@
-/** Control height, and text size for the initials fallback. */
-export type AvatarSize = "sm" | "md" | "lg";
+/** Control height, and the text size the initials fallback prints at. */
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+/** A circle, or a rounded square tile. */
+export type AvatarShape = "circle" | "square";
+/**
+ * Which visual treatment the avatar receives. `accent` applies the accent
+ * colour as a rim, signalling a second semantic category distinct from the
+ * default — a different role, origin, or mode.
+ */
+export type AvatarVariant = "default" | "accent";
+export declare const avatarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+    force?: "accent" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
@@ -11,6 +23,12 @@ declare const __VLS_export: import("vue").DefineComponent<{
     fallback?: string;
     /** Control height. */
     size?: AvatarSize;
+    /** A circle, or a rounded square tile. Square suits a subject a circle would misdescribe — an organisation, a project, a repository — and takes a radius that steps with the size rather than one fixed value. */
+    shape?: AvatarShape;
+    /** Which visual treatment the avatar receives. `accent` applies the accent rim and `accentLabel` for a screen reader, so the distinction never rests on the hue alone. */
+    variant?: AvatarVariant;
+    /** What a screen reader announces after the name of an `accent` avatar. Localise it. Set it empty when something outside already says so — `AvatarGroup` does, because each row item composes its own name — and nothing is added for a `default` avatar either way. */
+    accentLabel?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** Image URL. Omit it to render the fallback outright. */
     src?: string;
@@ -20,8 +38,17 @@ declare const __VLS_export: import("vue").DefineComponent<{
     fallback?: string;
     /** Control height. */
     size?: AvatarSize;
+    /** A circle, or a rounded square tile. Square suits a subject a circle would misdescribe — an organisation, a project, a repository — and takes a radius that steps with the size rather than one fixed value. */
+    shape?: AvatarShape;
+    /** Which visual treatment the avatar receives. `accent` applies the accent rim and `accentLabel` for a screen reader, so the distinction never rests on the hue alone. */
+    variant?: AvatarVariant;
+    /** What a screen reader announces after the name of an `accent` avatar. Localise it. Set it empty when something outside already says so — `AvatarGroup` does, because each row item composes its own name — and nothing is added for a `default` avatar either way. */
+    accentLabel?: string;
 }> & Readonly<{}>, {
-    alt: string;
     size: AvatarSize;
+    shape: AvatarShape;
+    variant: AvatarVariant;
+    alt: string;
+    accentLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=Avatar.vue.d.ts.map

package/dist/primitives/Avatar/Avatar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Avatar/Avatar.vue"],"names":[],"mappings":"AA+DA,+DAA+D;AAC/D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;wBACvB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IASd,0DAA0D;UACpD,MAAM;IACZ,uIAAuI;UACjI,MAAM;IACZ,gIAAgI;eACrH,MAAM;IACjB,sBAAsB;WACf,UAAU;;IAPjB,0DAA0D;UACpD,MAAM;IACZ,uIAAuI;UACjI,MAAM;IACZ,gIAAgI;eACrH,MAAM;IACjB,sBAAsB;WACf,UAAU;;SAJX,MAAM;UAIL,UAAU;6EA2GjB,CAAC"}
+{"version":3,"file":"Avatar.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Avatar/Avatar.vue"],"names":[],"mappings":"AA2KA,yEAAyE;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D,0CAA0C;AAC1C,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9C;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEjD,eAAO,MAAM,cAAc;;;8EAkC1B,CAAC;wBA4BmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAgBd,0DAA0D;UACpD,MAAM;IACZ,uIAAuI;UACjI,MAAM;IACZ,gIAAgI;eACrH,MAAM;IACjB,sBAAsB;WACf,UAAU;IACjB,kNAAkN;YAC1M,WAAW;IACnB,0KAA0K;cAChK,aAAa;IACvB,wQAAwQ;kBAC1P,MAAM;;IAbpB,0DAA0D;UACpD,MAAM;IACZ,uIAAuI;UACjI,MAAM;IACZ,gIAAgI;eACrH,MAAM;IACjB,sBAAsB;WACf,UAAU;IACjB,kNAAkN;YAC1M,WAAW;IACnB,0KAA0K;cAChK,aAAa;IACvB,wQAAwQ;kBAC1P,MAAM;;UANb,UAAU;WAET,WAAW;aAET,aAAa;SARjB,MAAM;iBAUE,MAAM;6EA4HpB,CAAC"}