@ecoma-io/loom 0.5.0 → 0.6.0

package/dist/primitives/list/src/ListItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,101 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { Check } from "@lucide/vue";
+import { cva } from "class-variance-authority";
+//#region packages/primitives/list/src/ListItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "min-w-0 flex-1" };
+var _hoisted_2 = {
+	key: 0,
+	class: "block truncate text-sm font-medium"
+};
+var _hoisted_3 = {
+	key: 1,
+	class: "mt-0.5 block text-small text-muted-foreground"
+};
+var _hoisted_4 = {
+	key: 0,
+	class: "shrink-0 text-small tabular text-muted-foreground"
+};
+var listItemVariants = cva("flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left transition-colors duration-fast ease-out", { variants: {
+	shape: {
+		static: "",
+		link: "cursor-pointer outline-none hover:bg-subtle/60 focus-visible:bg-subtle/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out)] active:scale-press-soft",
+		interactive: "cursor-pointer hover:bg-subtle/60 focus-visible:bg-subtle/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo active:bg-subtle"
+	},
+	dense: {
+		true: "px-2 py-1.5",
+		false: ""
+	}
+} });
+var ListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ListItem",
+	props: {
+		title: {},
+		description: {},
+		meta: {},
+		href: {},
+		interactive: {
+			type: Boolean,
+			default: false
+		},
+		selected: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		dense: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["activate"],
+	setup(__props) {
+		const props = __props;
+		const shape = computed(() => props.href ? "link" : props.interactive ? "interactive" : "static");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", null, [(openBlock(), createBlock(resolveDynamicComponent(__props.href ? "a" : __props.interactive ? "button" : "div"), {
+				href: __props.disabled ? void 0 : __props.href,
+				type: __props.interactive && !__props.href ? "button" : void 0,
+				disabled: __props.interactive && !__props.href ? __props.disabled : void 0,
+				"aria-disabled": __props.disabled || void 0,
+				"aria-current": __props.selected || void 0,
+				class: normalizeClass(unref(cn)(unref(listItemVariants)({
+					shape: shape.value,
+					dense: __props.dense
+				}), __props.selected && !__props.disabled && "bg-primary-muted/40 aria-current:bg-primary-muted/40", __props.disabled && "cursor-not-allowed bg-transparent")),
+				onClick: _cache[0] || (_cache[0] = ($event) => __props.interactive && !__props.disabled && _ctx.$emit("activate"))
+			}, {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "leading"),
+					createElementVNode("span", _hoisted_1, [
+						__props.title ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+						__props.description ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+						renderSlot(_ctx.$slots, "default")
+					]),
+					__props.selected ? (openBlock(), createBlock(unref(Check), {
+						key: 0,
+						class: "h-4 w-4 shrink-0 text-primary-text",
+						"aria-hidden": "true"
+					})) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "trailing", {}, () => [__props.meta ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.meta), 1)) : createCommentVNode("", true)])
+				]),
+				_: 3
+			}, 8, [
+				"href",
+				"type",
+				"disabled",
+				"aria-disabled",
+				"aria-current",
+				"class"
+			]))]);
+		};
+	}
+});
+//#endregion
+export { ListItem_vue_vue_type_script_setup_true_lang_default as default, listItemVariants };
+
+//# sourceMappingURL=ListItem.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/list/src/ListItem.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../packages/primitives/list/src/ListItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Interactive comes in exactly two shapes, the same honesty Card documents:\n * `href` makes the whole row one real anchor (nothing interactive inside),\n * `interactive` paints hover/press while the host owns role/handler. Plain\n * rows are just rows.\n */\nexport type ListItemShape = \"static\" | \"link\" | \"interactive\";\n\nexport const listItemVariants = cva(\n  \"flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left transition-colors duration-fast ease-out\",\n  {\n    variants: {\n      shape: {\n        static: \"\",\n        // The shared clickable-row language: lift by fill, never by shadow.\n        // The soft press weight, not `scale-press` — a full-width row moving\n        // the full 3% reads as the page jolting rather than the row answering.\n        link: \"cursor-pointer outline-none hover:bg-subtle/60 focus-visible:bg-subtle/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out)] active:scale-press-soft\",\n        interactive:\n          \"cursor-pointer hover:bg-subtle/60 focus-visible:bg-subtle/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo active:bg-subtle\",\n      },\n      dense: { true: \"px-2 py-1.5\", false: \"\" },\n    },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Check } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The row's heading; omit when the default slot carries custom composition. */\n    title?: string;\n    /** Supporting line beneath the title. */\n    description?: string;\n    /** Trailing metadata — a count, a timestamp. Reads in tabular digits. */\n    meta?: string;\n    /** Makes the whole row one link. Nothing interactive may sit inside. */\n    href?: string;\n    /**\n     * Hover/press language for a clickable row whose behaviour belongs to\n     * the host; attach the handler yourself.\n     */\n    interactive?: boolean;\n    /** Marks this row as the current choice among its peers (`aria-current`). */\n    selected?: boolean;\n    /** Unavailable rather than hidden: drained, inert, still announced. */\n    disabled?: boolean;\n    /** Tighter rhythm inside dense chrome. */\n    dense?: boolean;\n  }>(),\n  {\n    interactive: false,\n    selected: false,\n    disabled: false,\n    dense: false,\n  },\n);\n\ndefineEmits<{ activate: [] }>();\n\n// One of three shapes decides the element; a disabled row is an inert button\n// rather than a missing one, so it stays announced.\nconst shape = computed<\"link\" | \"interactive\" | \"static\">(() =>\n  props.href ? \"link\" : props.interactive ? \"interactive\" : \"static\",\n);\n</script>\n\n<template>\n  <li>\n    <component\n      :is=\"href ? 'a' : interactive ? 'button' : 'div'\"\n      :href=\"disabled ? undefined : href\"\n      :type=\"interactive && !href ? 'button' : undefined\"\n      :disabled=\"interactive && !href ? disabled : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :aria-current=\"selected || undefined\"\n      :class=\"\n        cn(\n          listItemVariants({ shape, dense }),\n          selected && !disabled && 'bg-primary-muted/40 aria-current:bg-primary-muted/40',\n          disabled && 'cursor-not-allowed bg-transparent',\n        )\n      \"\n      @click=\"interactive && !disabled && $emit('activate')\"\n    >\n      <!-- @slot Before the title: an icon, an Avatar. -->\n      <slot name=\"leading\" />\n\n      <span class=\"min-w-0 flex-1\">\n        <span v-if=\"title\" class=\"block truncate text-sm font-medium\">{{ title }}</span>\n        <span v-if=\"description\" class=\"mt-0.5 block text-small text-muted-foreground\">{{\n          description\n        }}</span>\n        <!-- @slot Custom body; replaces title/description entirely. -->\n        <slot />\n      </span>\n\n      <!-- Selection is stated twice: aria-current for technology, a glyph\n           for eyes — colour alone is not a state. -->\n      <Check v-if=\"selected\" class=\"h-4 w-4 shrink-0 text-primary-text\" aria-hidden=\"true\" />\n\n      <!-- @slot After everything: actions, a Badge, a RowActions cluster. -->\n      <slot name=\"trailing\">\n        <span v-if=\"meta\" class=\"shrink-0 text-small tabular text-muted-foreground\">{{\n          meta\n        }}</span>\n      </slot>\n    </component>\n  </li>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAWA,IAAa,mBAAmB,IAC9B,4GACA,EACE,UAAU;CACR,OAAO;EACL,QAAQ;EAIR,MAAM;EACN,aACE;CACJ;CACA,OAAO;EAAE,MAAM;EAAe,OAAO;CAAG;AAC1C,EACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAkCd,MAAM,QAAQ,eACZ,MAAM,OAAO,SAAS,MAAM,cAAc,gBAAgB,QAC5D;;GAIE,OAAA,UAAA,GAAA,mBAwCK,MAAA,MAAA,EAvCH,UAAA,GAAA,YAsCY,wBArCL,QAAA,OAAI,MAAS,QAAA,cAAW,WAAA,KAAA,GAAA;IAC5B,MAAM,QAAA,WAAW,KAAA,IAAY,QAAA;IAC7B,MAAM,QAAA,eAAW,CAAK,QAAA,OAAI,WAAc,KAAA;IACxC,UAAU,QAAA,eAAW,CAAK,QAAA,OAAO,QAAA,WAAW,KAAA;IAC5C,iBAAe,QAAA,YAAY,KAAA;IAC3B,gBAAc,QAAA,YAAY,KAAA;IAC1B,OAAK,eAAW,MAAA,EAAA,CAAE,CAAY,MAAA,gBAAA,CAAgB,CAAA;KAAA,OAAG,MAAA;KAAK,OAAE,QAAA;IAAK,CAAA,GAAe,QAAA,YAAQ,CAAK,QAAA,YAAQ,wDAAsE,QAAA,YAAQ,mCAAA,CAAA;IAO/K,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,eAAW,CAAK,QAAA,YAAYA,KAAAA,MAAK,UAAA;;IAGzC,SAAA,cAAuB;KAAvB,WAAuB,KAAA,QAAA,SAAA;KAEvB,mBAOO,QAPP,YAOO;MANO,QAAA,SAAZ,UAAA,GAAA,mBAAgF,QAAhF,YAAgF,gBAAf,QAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;MAC1D,QAAA,eAAZ,UAAA,GAAA,mBAES,QAFT,YAES,gBADP,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;MAGb,WAAQ,KAAA,QAAA,SAAA;;KAKG,QAAA,YAAb,UAAA,GAAA,YAAuF,MAAA,KAAA,GAAA;;MAAhE,OAAM;MAAqC,eAAY;;KAG9E,WAIO,KAAA,QAAA,YAAA,CAAA,SAAA,CAHO,QAAA,QAAZ,UAAA,GAAA,mBAES,QAFT,YAES,gBADP,QAAA,IAAI,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/primitives/live-region/src/LiveRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion.js","names":[],"sources":["../../../../packages/primitives/live-region/src/LiveRegion.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * LiveRegion — a permanently mounted, visually hidden `aria-live` region and\n * the seam (`useAnnounce()`) that writes into it. Screen readers announce a\n * live region only when its content *changes* after the region exists, so\n * the region renders empty and stays mounted for its whole lifetime: a\n * region added in the same tick as its message is announced unreliably, and\n * a region toggled into existence per message misses its first announcement.\n *\n * The hiding is the clip technique, delegated to VisuallyHidden — never\n * `display: none`, which removes the region from the accessibility tree\n * entirely. No `role=\"status\"`/`role=\"alert\"` is layered on top: the\n * politeness prop *is* the semantics, mapped straight onto `aria-live`, and\n * duplicating it in a role would only let the two disagree. The component\n * owns no strings, so there is nothing to localise and no labels prop.\n */\nexport type { LiveRegionContext, LiveRegionPoliteness } from \"./context\";\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, provide, ref, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport VisuallyHidden from \"@ecoma-io/loom-visually-hidden\";\nimport { LIVE_REGION_KEY, announce, mountingStandalone, registerWriter } from \"./context\";\nimport type { LiveRegionPoliteness } from \"./context\";\n\nconst props = defineProps({\n  /** How urgent announcements through this region are — mapped to `aria-live` verbatim. */\n  politeness: {\n    type: String as PropType<LiveRegionPoliteness>,\n    default: \"polite\",\n  },\n});\n\nconst node = ref<HTMLElement | null>(null);\n\nlet unregister: (() => void) | null = null;\n\nfunction bind(politeness: LiveRegionPoliteness): () => void {\n  const el = node.value;\n  if (!el) return () => {};\n  return registerWriter(\n    politeness,\n    (message) => {\n      // Clear first: assistive tech compares region content, and rewriting\n      // identical text in place announces nothing. Re-adding across the next\n      // frame makes the repeat a real content addition, which\n      // `aria-relevant=\"additions text\"` then reads.\n      el.textContent = \"\";\n      requestAnimationFrame(() => {\n        el.textContent = message;\n      });\n    },\n    mountingStandalone,\n  );\n}\n\nonMounted(() => {\n  unregister = bind(props.politeness);\n});\n\nwatch(\n  () => props.politeness,\n  (politeness) => {\n    if (!unregister) return;\n    unregister();\n    unregister = bind(politeness);\n  },\n);\n\nonBeforeUnmount(() => {\n  unregister?.();\n  unregister = null;\n});\n\n// Every region provides the seam for the subtree under it, so a component\n// sitting beside a region reaches `useAnnounce()` through the tree; with no\n// region mounted anywhere, `useAnnounce()` falls back to the standalone pair.\nprovide(LIVE_REGION_KEY, { announce });\n</script>\n\n<template>\n  <VisuallyHidden as=\"div\">\n    <div ref=\"node\" :aria-live=\"politeness\" aria-relevant=\"additions text\" aria-atomic=\"true\" />\n  </VisuallyHidden>\n</template>\n"],"mappings":""}

package/dist/primitives/live-region/src/LiveRegion.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/live-region/src/LiveRegion.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * LiveRegion — a permanently mounted, visually hidden `aria-live` region and\n * the seam (`useAnnounce()`) that writes into it. Screen readers announce a\n * live region only when its content *changes* after the region exists, so\n * the region renders empty and stays mounted for its whole lifetime: a\n * region added in the same tick as its message is announced unreliably, and\n * a region toggled into existence per message misses its first announcement.\n *\n * The hiding is the clip technique, delegated to VisuallyHidden — never\n * `display: none`, which removes the region from the accessibility tree\n * entirely. No `role=\"status\"`/`role=\"alert\"` is layered on top: the\n * politeness prop *is* the semantics, mapped straight onto `aria-live`, and\n * duplicating it in a role would only let the two disagree. The component\n * owns no strings, so there is nothing to localise and no labels prop.\n */\nexport type { LiveRegionContext, LiveRegionPoliteness } from \"./context\";\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, provide, ref, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport VisuallyHidden from \"@ecoma-io/loom-visually-hidden\";\nimport { LIVE_REGION_KEY, announce, mountingStandalone, registerWriter } from \"./context\";\nimport type { LiveRegionPoliteness } from \"./context\";\n\nconst props = defineProps({\n  /** How urgent announcements through this region are — mapped to `aria-live` verbatim. */\n  politeness: {\n    type: String as PropType<LiveRegionPoliteness>,\n    default: \"polite\",\n  },\n});\n\nconst node = ref<HTMLElement | null>(null);\n\nlet unregister: (() => void) | null = null;\n\nfunction bind(politeness: LiveRegionPoliteness): () => void {\n  const el = node.value;\n  if (!el) return () => {};\n  return registerWriter(\n    politeness,\n    (message) => {\n      // Clear first: assistive tech compares region content, and rewriting\n      // identical text in place announces nothing. Re-adding across the next\n      // frame makes the repeat a real content addition, which\n      // `aria-relevant=\"additions text\"` then reads.\n      el.textContent = \"\";\n      requestAnimationFrame(() => {\n        el.textContent = message;\n      });\n    },\n    mountingStandalone,\n  );\n}\n\nonMounted(() => {\n  unregister = bind(props.politeness);\n});\n\nwatch(\n  () => props.politeness,\n  (politeness) => {\n    if (!unregister) return;\n    unregister();\n    unregister = bind(politeness);\n  },\n);\n\nonBeforeUnmount(() => {\n  unregister?.();\n  unregister = null;\n});\n\n// Every region provides the seam for the subtree under it, so a component\n// sitting beside a region reaches `useAnnounce()` through the tree; with no\n// region mounted anywhere, `useAnnounce()` falls back to the standalone pair.\nprovide(LIVE_REGION_KEY, { announce });\n</script>\n\n<template>\n  <VisuallyHidden as=\"div\">\n    <div ref=\"node\" :aria-live=\"politeness\" aria-relevant=\"additions text\" aria-atomic=\"true\" />\n  </VisuallyHidden>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EA0BA,MAAM,QAAQ;EAQd,MAAM,OAAO,IAAwB,IAAI;EAEzC,IAAI,aAAkC;EAEtC,SAAS,KAAK,YAA8C;GAC1D,MAAM,KAAK,KAAK;GAChB,IAAI,CAAC,IAAI,aAAa,CAAC;GACvB,OAAO,eACL,aACC,YAAY;IAKX,GAAG,cAAc;IACjB,4BAA4B;KAC1B,GAAG,cAAc;IACnB,CAAC;GACH,GACA,kBACF;EACF;EAEA,gBAAgB;GACd,aAAa,KAAK,MAAM,UAAU;EACpC,CAAC;EAED,YACQ,MAAM,aACX,eAAe;GACd,IAAI,CAAC,YAAY;GACjB,WAAW;GACX,aAAa,KAAK,UAAU;EAC9B,CACF;EAEA,sBAAsB;GACpB,aAAa;GACb,aAAa;EACf,CAAC;EAKD,QAAQ,iBAAiB,EAAE,SAAS,CAAC;;GAInC,OAAA,UAAA,GAAA,YAEiB,MAAA,sBAAA,GAAA,EAFD,IAAG,MAAK,GAAA;IACtB,SAAA,cAA4F,CAA5F,mBAA4F,OAAA;KAAnF,SAAA;KAAJ,KAAI;KAAQ,aAAW,QAAA;KAAY,iBAAc;KAAiB,eAAY"}

package/dist/primitives/live-region/src/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../packages/primitives/live-region/src/context.ts"],"sourcesContent":["import { createApp } from \"vue\";\nimport type { InjectionKey } from \"vue\";\n// Self-import: the fallback pair is real LiveRegion instances, so it\n// inherits the VisuallyHidden clip technique instead of duplicating it. The\n// cycle is benign — this module touches the SFC only inside\n// `ensureStandaloneRegions()`, long after both modules have evaluated.\nimport LiveRegion from \"./LiveRegion.vue\";\n\n/**\n * The seam's machinery, kept out of the SFC so the module-level state it\n * needs — the writer registries and the standalone fallback — is genuinely\n * module-level rather than per-instance.\n */\nexport type LiveRegionPoliteness = \"polite\" | \"assertive\";\n\n/** The write half of the seam — what `useAnnounce()` hands back. */\nexport type Announce = (message: string, politeness?: LiveRegionPoliteness) => void;\n\n/** The provide/inject shape a mounted region shares with its subtree. */\nexport interface LiveRegionContext {\n  announce: Announce;\n}\n\nexport const LIVE_REGION_KEY: InjectionKey<LiveRegionContext> = Symbol(\"loom-live-region\");\n\n/** The write function a mounted region registers. */\ntype Writer = Announce;\n\n/**\n * Writers registered by regions mounted in the component tree, per\n * politeness. The earliest still-mounted region of a politeness wins, so a\n * region near the app root owns the channel and a stray duplicate deeper in\n * the tree stays silent.\n */\nconst regionWriters = new Map<LiveRegionPoliteness, Writer[]>();\n\n/**\n * Writers for the standalone pair mounted on `document.body`, kept apart\n * from `regionWriters` so an in-tree region always outranks the fallback\n * without the lookup depending on mount order.\n */\nconst standaloneWriters = new Map<LiveRegionPoliteness, Writer>();\n\nexport function registerWriter(\n  politeness: LiveRegionPoliteness,\n  writer: Writer,\n  standalone: boolean,\n): () => void {\n  if (standalone) {\n    standaloneWriters.set(politeness, writer);\n    return () => {\n      if (standaloneWriters.get(politeness) === writer) standaloneWriters.delete(politeness);\n    };\n  }\n  const list = regionWriters.get(politeness) ?? [];\n  list.push(writer);\n  regionWriters.set(politeness, list);\n  return () => {\n    regionWriters.set(\n      politeness,\n      (regionWriters.get(politeness) ?? []).filter((registered) => registered !== writer),\n    );\n  };\n}\n\n/**\n * True while the fallback pair is mounting, so those instances register as\n * the fallback rather than as in-tree regions. `createApp().mount()` runs\n * synchronously, so the flag cannot interleave.\n */\nexport let mountingStandalone = false;\n\nlet standaloneMounted = false;\n\n/**\n * Mounts the standalone polite + assertive pair on `document.body` — the\n * default for callers that never mounted a region. It runs when the seam is\n * first asked for (`useAnnounce()`), never at announce time: a region added\n * in the same tick as its message is announced unreliably, so the pair has\n * to pre-exist the first message.\n */\nexport function ensureStandaloneRegions(): void {\n  if (standaloneMounted || typeof document === \"undefined\") return;\n  standaloneMounted = true;\n  const host = document.createElement(\"div\");\n  host.setAttribute(\"data-loom-live-region\", \"\");\n  const apps: ReturnType<typeof createApp>[] = [];\n  for (const politeness of [\"polite\", \"assertive\"] as const) {\n    const mountPoint = document.createElement(\"div\");\n    host.appendChild(mountPoint);\n    mountingStandalone = true;\n    try {\n      const app = createApp(LiveRegion, { politeness });\n      app.mount(mountPoint);\n      apps.push(app);\n    } finally {\n      mountingStandalone = false;\n    }\n  }\n  document.body.appendChild(host);\n  // The pair is a page-lifetime singleton — it must outlive the component\n  // that first asked for it, or in-flight announcements would die with it —\n  // so its teardown rides the page's, not any caller's.\n  window.addEventListener(\n    \"pagehide\",\n    () => {\n      for (const app of apps) app.unmount();\n      standaloneWriters.clear();\n      standaloneMounted = false;\n      host.remove();\n    },\n    { once: true },\n  );\n}\n\n/**\n * The shared announcer: the in-tree region of that politeness if one is\n * mounted, else the standalone pair. Never mounts anything — regions must\n * pre-exist announcements, so the pair is mounted when `useAnnounce()` first\n * runs, not here.\n */\nexport const announce: Announce = (message, politeness = \"polite\") => {\n  if (typeof document === \"undefined\") return;\n  const writer = regionWriters.get(politeness)?.[0] ?? standaloneWriters.get(politeness);\n  writer?.(message);\n};\n"],"mappings":";;;AAuBA,IAAa,kBAAmD,OAAO,kBAAkB;;;;;;;AAWzF,IAAM,gCAAgB,IAAI,IAAoC;;;;;;AAO9D,IAAM,oCAAoB,IAAI,IAAkC;AAEhE,SAAgB,eACd,YACA,QACA,YACY;CACZ,IAAI,YAAY;EACd,kBAAkB,IAAI,YAAY,MAAM;EACxC,aAAa;GACX,IAAI,kBAAkB,IAAI,UAAU,MAAM,QAAQ,kBAAkB,OAAO,UAAU;EACvF;CACF;CACA,MAAM,OAAO,cAAc,IAAI,UAAU,KAAK,CAAC;CAC/C,KAAK,KAAK,MAAM;CAChB,cAAc,IAAI,YAAY,IAAI;CAClC,aAAa;EACX,cAAc,IACZ,aACC,cAAc,IAAI,UAAU,KAAK,CAAC,EAAA,CAAG,QAAQ,eAAe,eAAe,MAAM,CACpF;CACF;AACF;;;;;;AAOA,IAAW,qBAAqB;AAEhC,IAAI,oBAAoB;;;;;;;;AASxB,SAAgB,0BAAgC;CAC9C,IAAI,qBAAqB,OAAO,aAAa,aAAa;CAC1D,oBAAoB;CACpB,MAAM,OAAO,SAAS,cAAc,KAAK;CACzC,KAAK,aAAa,yBAAyB,EAAE;CAC7C,MAAM,OAAuC,CAAC;CAC9C,KAAK,MAAM,cAAc,CAAC,UAAU,WAAW,GAAY;EACzD,MAAM,aAAa,SAAS,cAAc,KAAK;EAC/C,KAAK,YAAY,UAAU;EAC3B,qBAAqB;EACrB,IAAI;GACF,MAAM,MAAM,UAAU,oBAAY,EAAE,WAAW,CAAC;GAChD,IAAI,MAAM,UAAU;GACpB,KAAK,KAAK,GAAG;EACf,UAAU;GACR,qBAAqB;EACvB;CACF;CACA,SAAS,KAAK,YAAY,IAAI;CAI9B,OAAO,iBACL,kBACM;EACJ,KAAK,MAAM,OAAO,MAAM,IAAI,QAAQ;EACpC,kBAAkB,MAAM;EACxB,oBAAoB;EACpB,KAAK,OAAO;CACd,GACA,EAAE,MAAM,KAAK,CACf;AACF;;;;;;;AAQA,IAAa,YAAsB,SAAS,aAAa,aAAa;CACpE,IAAI,OAAO,aAAa,aAAa;CAErC,CADe,cAAc,IAAI,UAAU,CAAC,GAAG,MAAM,kBAAkB,IAAI,UAAU,EAAA,GAC5E,OAAO;AAClB"}

package/dist/primitives/live-region/src/useAnnounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnnounce.js","names":[],"sources":["../../../../packages/primitives/live-region/src/useAnnounce.ts"],"sourcesContent":["import { inject } from \"vue\";\nimport { LIVE_REGION_KEY, ensureStandaloneRegions, announce } from \"./context\";\nimport type { Announce } from \"./context\";\n\n/**\n * The announcement seam. Call once in `setup()`:\n *\n *   const announce = useAnnounce();\n *   announce(\"3 results found\");            // politely\n *   announce(\"Upload failed\", \"assertive\"); // interrupting\n *\n * Under a mounted `<LiveRegion>` the message goes to the region registered\n * for that politeness; with no region in the tree it goes to the standalone\n * pair that this call mounts on `document.body` — mounted here, at setup\n * time, so the regions pre-exist the first message rather than appearing in\n * the same tick as it. SSR-safe: with no `document` there is nowhere to\n * announce to, and the function is a no-op.\n */\nexport function useAnnounce(): Announce {\n  ensureStandaloneRegions();\n  return inject(LIVE_REGION_KEY, null)?.announce ?? announce;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAgB,cAAwB;CACtC,wBAAwB;CACxB,OAAO,OAAO,iBAAiB,IAAI,CAAC,EAAE,YAAY;AACpD"}

package/dist/primitives/menubar/src/Menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.js","names":[],"sources":["../../../../packages/primitives/menubar/src/Menubar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Menubar — the classic desktop-app menu strip (File · View · Help …).\n *\n * Data-driven: pass a `menus` array; the component owns open/close, hover-to-switch,\n * keyboard nav and click-outside. Selecting an item emits `select` with its `command`\n * id — the host maps that id to an action (keeps the primitive free of app logic).\n *\n * A11y: WAI-ARIA menubar semantics over real DOM focus, not aria-activedescendant.\n * Opening a menu moves focus onto its first enabled row and the arrows walk it from\n * there, so \"the highlighted row\" and \"the focused row\" are the same thing by\n * construction and a screen reader announces each walked row natively — no\n * bookkeeping that could drift out of sync with what is actually announced.\n */\nexport interface MenubarItem {\n  /** Visible label. */\n  label: string;\n  /** Command id emitted on select. Omit for a non-actionable row. */\n  command?: string;\n  /** Right-aligned accelerator hint, e.g. \"Ctrl+S\". */\n  shortcut?: string;\n  /** Render a divider instead of an item (label ignored). */\n  separator?: boolean;\n  disabled?: boolean;\n}\n\nexport interface MenubarMenu {\n  id: string;\n  label: string;\n  items: MenubarItem[];\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, nextTick } from \"vue\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n  /** The top-level menus; their reading order follows `dir`. */\n  menus: MenubarMenu[];\n  /**\n   * Reading direction. Right-to-left mirrors the strip's arrow keys —\n   * ArrowRight travels toward the visual left — which a hand-rolled\n   * handler must do itself, unlike its Reka siblings.\n   */\n  dir?: \"ltr\" | \"rtl\";\n}>();\nconst emit = defineEmits<{ select: [command: string] }>();\n\n// Horizontal arrows are visual, not logical: in right-to-left, ArrowRight\n// moves toward the previous menu.\nconst horizontal = computed(() => (props.dir === \"rtl\" ? -1 : 1) as 1 | -1);\n\nconst openId = ref<string | null>(null);\nconst activeIndex = ref(-1); // the focused row within the open menu\n// String refs would do here only outside a v-for; inside one Vue collects them\n// into arrays. Function refs keyed BY MENU ID instead: during a menu switch the\n// incoming panel can mount before the outgoing one unmounts, so a single\n// latest-wins slot would let the outgoing null clobber the just-bound element.\nconst panelEls = new Map<string, HTMLElement>();\nconst triggerEls = new Map<string, HTMLButtonElement>();\n\nfunction bindPanel(id: string, el: unknown): void {\n  if (el instanceof HTMLElement) panelEls.set(id, el);\n  else panelEls.delete(id);\n}\n\nfunction bindTrigger(id: string, el: unknown): void {\n  if (el instanceof HTMLButtonElement) triggerEls.set(id, el);\n  else triggerEls.delete(id);\n}\n\nfunction boundPanel(): HTMLElement | null {\n  return openId.value ? (panelEls.get(openId.value) ?? null) : null;\n}\n\nconst openMenu = (menu: MenubarMenu | undefined) => menu?.items ?? [];\nconst firstEnabled = (items: MenubarItem[], from = 0, dir = 1): number => {\n  for (let i = from; i >= 0 && i < items.length; i += dir) {\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n};\n\n/** One arrow-step away from `from`, wrapping through every slot exactly once. */\nfunction neighborEnabled(items: MenubarItem[], from: number, dir: 1 | -1): number {\n  const n = items.length;\n  for (let step = 1; step <= n; step++) {\n    const i = (((from + dir * step) % n) + n) % n;\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n}\n\n/** Rows render only for non-separator items, so an item index maps to its button's ordinal among the rendered ones. */\nfunction rowOrdinal(items: MenubarItem[], index: number): number {\n  let ordinal = -1;\n  for (let k = 0; k <= index && k < items.length; k++) {\n    if (!items[k]?.separator) ordinal++;\n  }\n  return ordinal;\n}\n\nfunction rowButtons(): HTMLButtonElement[] {\n  const panel = boundPanel();\n  return panel\n    ? Array.from(panel.querySelectorAll<HTMLButtonElement>('button[role=\"menuitem\"]'))\n    : [];\n}\n\nfunction focusRow(items: MenubarItem[], index: number): void {\n  rowButtons()[rowOrdinal(items, index)]?.focus();\n}\n\nfunction goTo(items: MenubarItem[], index: number): void {\n  if (index < 0) return;\n  activeIndex.value = index;\n  focusRow(items, index);\n}\n\nasync function openAndFocusFirst(id: string, items: MenubarItem[]): Promise<void> {\n  await nextTick();\n  // A hover or another key can supersede this open within the same tick; only\n  // the menu that still owns `openId` may claim focus.\n  if (openId.value !== id) return;\n  goTo(items, firstEnabled(items));\n}\n\nasync function toggle(id: string): Promise<void> {\n  if (openId.value === id) {\n    close(true);\n    return;\n  }\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = id;\n  activeIndex.value = -1;\n  await openAndFocusFirst(id, menu.items);\n}\n\nasync function hover(id: string, via: \"pointer\" | \"trigger-focus\"): Promise<void> {\n  if (openId.value === null || openId.value === id) return;\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = id;\n  activeIndex.value = -1;\n  // Pointer switching takes focus into the new menu like a desktop menubar.\n  // A switch caused by tabbing between triggers must not yank focus out of\n  // the tab order mid-Tab, so it switches the panel and leaves focus alone.\n  if (via === \"pointer\") await openAndFocusFirst(id, menu.items);\n}\n\nfunction choose(item: MenubarItem): void {\n  if (item.separator || item.disabled) return;\n  close(true);\n  if (item.command) emit(\"select\", item.command);\n}\n\nfunction close(restoreFocus = false): void {\n  const id = openId.value;\n  openId.value = null;\n  activeIndex.value = -1;\n  // Escape and selection hand focus back to the owning trigger; Tab-out and\n  // outside clicks do not — focus has already gone where the user sent it.\n  if (restoreFocus && id) triggerEls.get(id)?.focus();\n}\n\nasync function moveMenu(dir: 1 | -1): Promise<void> {\n  const ids = props.menus.map((m) => m.id);\n  const cur = openId.value ? ids.indexOf(openId.value) : 0;\n  const id = ids[(cur + dir + ids.length) % ids.length];\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = menu.id;\n  activeIndex.value = -1;\n  await openAndFocusFirst(menu.id, menu.items);\n}\n\n/**\n * Pointer highlight of an enabled row moves focus with it — under the roving\n * model the highlighted row IS the focused row, and screen readers announce\n * focus changes, not CSS classes.\n */\nfunction pointAtRow(items: MenubarItem[], item: MenubarItem, index: number): void {\n  if (item.disabled || item.separator || activeIndex.value === index) return;\n  activeIndex.value = index;\n  focusRow(items, index);\n}\n\n/** Native focus landing on a row keeps `activeIndex` truthful about it. */\nfunction noteFocus(item: MenubarItem, index: number): void {\n  if (item.disabled || item.separator) return;\n  activeIndex.value = index;\n}\n/*\n * The typeahead. APG menubars match a prefix of the item's label, starting\n * after the focused row and wrapping; a character's repeated key re-cycles\n * to its own next match rather than extending the prefix to a non-match, so\n * the pending buffer is kept but the repeated final character is not\n * appended. The buffer is 500 ms, case-insensitive, and the timer is released\n * on unmount so a menubar torn down mid-typeahead leaves nothing pending —\n * the same contract the TreeView sibling keeps.\n */\nconst TYPEAHEAD_RESET_MS = 500;\nlet typeaheadBuffer = \"\";\nlet typeaheadTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction typeaheadJump(items: MenubarItem[], from: number): void {\n  const query = typeaheadBuffer;\n  // The whole buffered prefix decides the match: repeated characters extend\n  // it, and a fresh character restarts it, so \"Co\" reaches \"Copy\" only when\n  // both keys follow each other within the timeout.\n  const n = items.length;\n  for (let step = 1; step <= n; step++) {\n    const i = (from + step) % n;\n    const item = items[i];\n    if (item && !item.separator && !item.disabled && item.label.toLowerCase().startsWith(query)) {\n      goTo(items, i);\n      break;\n    }\n  }\n}\n\nfunction handleTypeahead(e: KeyboardEvent, items: MenubarItem[]): void {\n  if (e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) return;\n  if (e.key === \" \" || e.key === \"Enter\") return; // activation keys, handled above\n  const char = e.key.toLowerCase();\n  if (typeaheadBuffer.slice(-1) !== char) typeaheadBuffer += char;\n  e.preventDefault();\n  typeaheadJump(items, activeIndex.value);\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n  typeaheadTimer = setTimeout(() => {\n    typeaheadBuffer = \"\";\n    typeaheadTimer = undefined;\n  }, TYPEAHEAD_RESET_MS);\n}\n\nonBeforeUnmount(() => {\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n});\n\n/**\n * The APG's closed-state traversal: Left/Right across the strip land on the\n * neighbouring trigger without opening anything — opening is ArrowDown,\n * Enter or Space's job.\n */\nfunction moveTriggerFocus(from: string, dir: 1 | -1): void {\n  const ids = props.menus.map((m) => m.id);\n  const cur = ids.indexOf(from);\n  if (cur === -1) return;\n  triggerEls.get(ids[(cur + dir + ids.length) % ids.length] ?? \"\")?.focus();\n}\n\nasync function onTriggerKeydown(e: KeyboardEvent, menu: MenubarMenu): Promise<void> {\n  switch (e.key) {\n    case \"ArrowDown\":\n    case \"Enter\":\n    case \" \":\n      e.preventDefault(); // suppresses the button's own activation click\n      openId.value = menu.id;\n      activeIndex.value = -1;\n      await openAndFocusFirst(menu.id, menu.items);\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      if (openId.value) void moveMenu(horizontal.value);\n      else moveTriggerFocus(menu.id, horizontal.value);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      if (openId.value) void moveMenu(-horizontal.value as 1 | -1);\n      else moveTriggerFocus(menu.id, -horizontal.value as 1 | -1);\n      break;\n    case \"Escape\":\n      e.preventDefault();\n      close(true);\n      break;\n  }\n}\n\nfunction onMenuKeydown(e: KeyboardEvent, menu: MenubarMenu): void {\n  const items = menu.items;\n  switch (e.key) {\n    case \"ArrowDown\":\n      e.preventDefault();\n      goTo(items, neighborEnabled(items, activeIndex.value, 1));\n      break;\n    case \"ArrowUp\":\n      e.preventDefault();\n      goTo(items, neighborEnabled(items, activeIndex.value, -1));\n      break;\n    case \"Home\":\n      e.preventDefault();\n      goTo(items, firstEnabled(items, 0, 1));\n      break;\n    case \"End\":\n      e.preventDefault();\n      goTo(items, firstEnabled(items, items.length - 1, -1));\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      void moveMenu(horizontal.value);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      void moveMenu(-horizontal.value as 1 | -1);\n      break;\n    // Handled here rather than left to the button's native activation:\n    // preventDefault stops the browser's synthesized click, which would run\n    // choose() a second time alongside this delegated handler.\n    case \"Enter\":\n    case \" \": {\n      e.preventDefault();\n      const item = items[activeIndex.value];\n      if (item) choose(item);\n      break;\n    }\n    case \"Escape\":\n      e.preventDefault();\n      close(true);\n      break;\n    // Every other key is a printable character: APG typeahead moves focus to\n    // the next item whose label begins with it. `default` sees only these —\n    // Space/Enter/Escape each have their own case above.\n    default:\n      handleTypeahead(e, items);\n      break;\n  }\n}\n\nfunction onRootFocusout(e: FocusEvent): void {\n  if (!openId.value) return;\n  const root = e.currentTarget;\n  const next = e.relatedTarget;\n  // Tab out of the strip dismisses the menu and leaves focus where the browser\n  // put it. Moves that stay inside the menubar (opening handing focus to a\n  // row) keep it.\n  if (!(root instanceof Element) || !(next instanceof Node) || !root.contains(next)) close();\n}\n\n// A wrapper, not `close` itself: the listener's event argument would otherwise\n// arrive as `restoreFocus`, and an outside click would yank focus back to the\n// trigger instead of leaving it where the press landed.\nconst onWindowClick = (): void => close();\nonMounted(() => window.addEventListener(\"click\", onWindowClick));\nonBeforeUnmount(() => window.removeEventListener(\"click\", onWindowClick));\n</script>\n\n<template>\n  <!-- The attribute rides the strip itself, not just the prop: a host may\n       pass dir without setting document direction, and both the flex order\n       and the mirrored keys must agree with what is on screen. -->\n  <div\n    :dir=\"dir\"\n    role=\"menubar\"\n    class=\"flex items-center gap-0.5\"\n    style=\"-webkit-app-region: no-drag\"\n    @click.stop\n    @focusout=\"onRootFocusout\"\n  >\n    <div v-for=\"menu in menus\" :key=\"menu.id\" class=\"relative\">\n      <button\n        :id=\"`menubar-trigger-${menu.id}`\"\n        :ref=\"(el) => bindTrigger(menu.id, el)\"\n        type=\"button\"\n        role=\"menuitem\"\n        :aria-haspopup=\"'menu'\"\n        :aria-expanded=\"openId === menu.id\"\n        class=\"min-h-6 rounded-sm px-2 py-1 text-xs text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n        :class=\"openId === menu.id && 'bg-subtle text-foreground'\"\n        @click.stop=\"toggle(menu.id)\"\n        @mouseenter=\"hover(menu.id, 'pointer')\"\n        @focus=\"hover(menu.id, 'trigger-focus')\"\n        @keydown=\"onTriggerKeydown($event, menu)\"\n      >\n        {{ menu.label }}\n      </button>\n\n      <!-- Scoped presence, matching every sibling overlay: enter animates in,\n           leave answers with scale-out. The unconditional mount-only animation\n           this used to carry never plays on close at all. In jsdom, with no\n           stylesheet loaded, Vue computes zero animation duration and ends both\n           phases immediately, so tests see plain unmount. -->\n      <Transition enter-active-class=\"animate-scale-in\" leave-active-class=\"animate-scale-out\">\n        <div\n          v-if=\"openId === menu.id\"\n          :ref=\"(el) => bindPanel(menu.id, el)\"\n          role=\"menu\"\n          :aria-label=\"menu.label\"\n          tabindex=\"-1\"\n          class=\"absolute left-0 top-full z-overlay mt-1 min-w-[13rem] origin-top-left rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n          @click.stop\n          @keydown=\"onMenuKeydown($event, menu)\"\n        >\n          <template v-for=\"(item, i) in openMenu(menu)\" :key=\"i\">\n            <div v-if=\"item.separator\" role=\"separator\" class=\"my-1 h-px bg-border\" />\n            <!-- The row's colour, not its alpha, says it is unavailable. A menu\n                 row is nothing but its label, and `disabled:opacity-40` composited\n                 that label to 2.40:1 on the popover — a disabled row a reader\n                 cannot make out tells them nothing about what is unavailable,\n                 which is the only thing it is there to say. Muted instead: 5.76:1\n                 at rest, and a clear drop from the 15.46:1 an available row wears,\n                 so the state still reads at a glance. The shortcut beside it\n                 declares `text-muted-foreground` on its own element, so it lands\n                 on the same colour rather than inheriting this one.\n\n                 Rows sit at text-sm/py-1.5 like DropdownMenu's — one row grammar\n                 across menus; the compact trigger above stays desktop chrome.\n                 Every row carries tabindex -1: focus arrives programmatically,\n                 never by tabbing through the strip. -->\n            <button\n              v-else\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              :disabled=\"item.disabled\"\n              :data-highlighted=\"activeIndex === i || undefined\"\n              :style=\"{ animationDelay: listStaggerDelay(i) }\"\n              class=\"flex w-full items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-left text-sm text-foreground transition-colors duration-fast ease-out hover:bg-subtle disabled:pointer-events-none disabled:text-muted-foreground data-[highlighted]:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo animate-fade-rise\"\n              @click=\"choose(item)\"\n              @mouseenter=\"pointAtRow(openMenu(menu), item, i)\"\n              @focus=\"noteFocus(item, i)\"\n            >\n              <span>{{ item.label }}</span>\n              <span v-if=\"item.shortcut\" class=\"tabular text-micro text-muted-foreground\">\n                {{ item.shortcut }}\n              </span>\n            </button>\n          </template>\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/primitives/menubar/src/Menubar.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/menubar/src/Menubar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Menubar — the classic desktop-app menu strip (File · View · Help …).\n *\n * Data-driven: pass a `menus` array; the component owns open/close, hover-to-switch,\n * keyboard nav and click-outside. Selecting an item emits `select` with its `command`\n * id — the host maps that id to an action (keeps the primitive free of app logic).\n *\n * A11y: WAI-ARIA menubar semantics over real DOM focus, not aria-activedescendant.\n * Opening a menu moves focus onto its first enabled row and the arrows walk it from\n * there, so \"the highlighted row\" and \"the focused row\" are the same thing by\n * construction and a screen reader announces each walked row natively — no\n * bookkeeping that could drift out of sync with what is actually announced.\n */\nexport interface MenubarItem {\n  /** Visible label. */\n  label: string;\n  /** Command id emitted on select. Omit for a non-actionable row. */\n  command?: string;\n  /** Right-aligned accelerator hint, e.g. \"Ctrl+S\". */\n  shortcut?: string;\n  /** Render a divider instead of an item (label ignored). */\n  separator?: boolean;\n  disabled?: boolean;\n}\n\nexport interface MenubarMenu {\n  id: string;\n  label: string;\n  items: MenubarItem[];\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, nextTick } from \"vue\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n  /** The top-level menus; their reading order follows `dir`. */\n  menus: MenubarMenu[];\n  /**\n   * Reading direction. Right-to-left mirrors the strip's arrow keys —\n   * ArrowRight travels toward the visual left — which a hand-rolled\n   * handler must do itself, unlike its Reka siblings.\n   */\n  dir?: \"ltr\" | \"rtl\";\n}>();\nconst emit = defineEmits<{ select: [command: string] }>();\n\n// Horizontal arrows are visual, not logical: in right-to-left, ArrowRight\n// moves toward the previous menu.\nconst horizontal = computed(() => (props.dir === \"rtl\" ? -1 : 1) as 1 | -1);\n\nconst openId = ref<string | null>(null);\nconst activeIndex = ref(-1); // the focused row within the open menu\n// String refs would do here only outside a v-for; inside one Vue collects them\n// into arrays. Function refs keyed BY MENU ID instead: during a menu switch the\n// incoming panel can mount before the outgoing one unmounts, so a single\n// latest-wins slot would let the outgoing null clobber the just-bound element.\nconst panelEls = new Map<string, HTMLElement>();\nconst triggerEls = new Map<string, HTMLButtonElement>();\n\nfunction bindPanel(id: string, el: unknown): void {\n  if (el instanceof HTMLElement) panelEls.set(id, el);\n  else panelEls.delete(id);\n}\n\nfunction bindTrigger(id: string, el: unknown): void {\n  if (el instanceof HTMLButtonElement) triggerEls.set(id, el);\n  else triggerEls.delete(id);\n}\n\nfunction boundPanel(): HTMLElement | null {\n  return openId.value ? (panelEls.get(openId.value) ?? null) : null;\n}\n\nconst openMenu = (menu: MenubarMenu | undefined) => menu?.items ?? [];\nconst firstEnabled = (items: MenubarItem[], from = 0, dir = 1): number => {\n  for (let i = from; i >= 0 && i < items.length; i += dir) {\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n};\n\n/** One arrow-step away from `from`, wrapping through every slot exactly once. */\nfunction neighborEnabled(items: MenubarItem[], from: number, dir: 1 | -1): number {\n  const n = items.length;\n  for (let step = 1; step <= n; step++) {\n    const i = (((from + dir * step) % n) + n) % n;\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n}\n\n/** Rows render only for non-separator items, so an item index maps to its button's ordinal among the rendered ones. */\nfunction rowOrdinal(items: MenubarItem[], index: number): number {\n  let ordinal = -1;\n  for (let k = 0; k <= index && k < items.length; k++) {\n    if (!items[k]?.separator) ordinal++;\n  }\n  return ordinal;\n}\n\nfunction rowButtons(): HTMLButtonElement[] {\n  const panel = boundPanel();\n  return panel\n    ? Array.from(panel.querySelectorAll<HTMLButtonElement>('button[role=\"menuitem\"]'))\n    : [];\n}\n\nfunction focusRow(items: MenubarItem[], index: number): void {\n  rowButtons()[rowOrdinal(items, index)]?.focus();\n}\n\nfunction goTo(items: MenubarItem[], index: number): void {\n  if (index < 0) return;\n  activeIndex.value = index;\n  focusRow(items, index);\n}\n\nasync function openAndFocusFirst(id: string, items: MenubarItem[]): Promise<void> {\n  await nextTick();\n  // A hover or another key can supersede this open within the same tick; only\n  // the menu that still owns `openId` may claim focus.\n  if (openId.value !== id) return;\n  goTo(items, firstEnabled(items));\n}\n\nasync function toggle(id: string): Promise<void> {\n  if (openId.value === id) {\n    close(true);\n    return;\n  }\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = id;\n  activeIndex.value = -1;\n  await openAndFocusFirst(id, menu.items);\n}\n\nasync function hover(id: string, via: \"pointer\" | \"trigger-focus\"): Promise<void> {\n  if (openId.value === null || openId.value === id) return;\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = id;\n  activeIndex.value = -1;\n  // Pointer switching takes focus into the new menu like a desktop menubar.\n  // A switch caused by tabbing between triggers must not yank focus out of\n  // the tab order mid-Tab, so it switches the panel and leaves focus alone.\n  if (via === \"pointer\") await openAndFocusFirst(id, menu.items);\n}\n\nfunction choose(item: MenubarItem): void {\n  if (item.separator || item.disabled) return;\n  close(true);\n  if (item.command) emit(\"select\", item.command);\n}\n\nfunction close(restoreFocus = false): void {\n  const id = openId.value;\n  openId.value = null;\n  activeIndex.value = -1;\n  // Escape and selection hand focus back to the owning trigger; Tab-out and\n  // outside clicks do not — focus has already gone where the user sent it.\n  if (restoreFocus && id) triggerEls.get(id)?.focus();\n}\n\nasync function moveMenu(dir: 1 | -1): Promise<void> {\n  const ids = props.menus.map((m) => m.id);\n  const cur = openId.value ? ids.indexOf(openId.value) : 0;\n  const id = ids[(cur + dir + ids.length) % ids.length];\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = menu.id;\n  activeIndex.value = -1;\n  await openAndFocusFirst(menu.id, menu.items);\n}\n\n/**\n * Pointer highlight of an enabled row moves focus with it — under the roving\n * model the highlighted row IS the focused row, and screen readers announce\n * focus changes, not CSS classes.\n */\nfunction pointAtRow(items: MenubarItem[], item: MenubarItem, index: number): void {\n  if (item.disabled || item.separator || activeIndex.value === index) return;\n  activeIndex.value = index;\n  focusRow(items, index);\n}\n\n/** Native focus landing on a row keeps `activeIndex` truthful about it. */\nfunction noteFocus(item: MenubarItem, index: number): void {\n  if (item.disabled || item.separator) return;\n  activeIndex.value = index;\n}\n/*\n * The typeahead. APG menubars match a prefix of the item's label, starting\n * after the focused row and wrapping; a character's repeated key re-cycles\n * to its own next match rather than extending the prefix to a non-match, so\n * the pending buffer is kept but the repeated final character is not\n * appended. The buffer is 500 ms, case-insensitive, and the timer is released\n * on unmount so a menubar torn down mid-typeahead leaves nothing pending —\n * the same contract the TreeView sibling keeps.\n */\nconst TYPEAHEAD_RESET_MS = 500;\nlet typeaheadBuffer = \"\";\nlet typeaheadTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction typeaheadJump(items: MenubarItem[], from: number): void {\n  const query = typeaheadBuffer;\n  // The whole buffered prefix decides the match: repeated characters extend\n  // it, and a fresh character restarts it, so \"Co\" reaches \"Copy\" only when\n  // both keys follow each other within the timeout.\n  const n = items.length;\n  for (let step = 1; step <= n; step++) {\n    const i = (from + step) % n;\n    const item = items[i];\n    if (item && !item.separator && !item.disabled && item.label.toLowerCase().startsWith(query)) {\n      goTo(items, i);\n      break;\n    }\n  }\n}\n\nfunction handleTypeahead(e: KeyboardEvent, items: MenubarItem[]): void {\n  if (e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) return;\n  if (e.key === \" \" || e.key === \"Enter\") return; // activation keys, handled above\n  const char = e.key.toLowerCase();\n  if (typeaheadBuffer.slice(-1) !== char) typeaheadBuffer += char;\n  e.preventDefault();\n  typeaheadJump(items, activeIndex.value);\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n  typeaheadTimer = setTimeout(() => {\n    typeaheadBuffer = \"\";\n    typeaheadTimer = undefined;\n  }, TYPEAHEAD_RESET_MS);\n}\n\nonBeforeUnmount(() => {\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n});\n\n/**\n * The APG's closed-state traversal: Left/Right across the strip land on the\n * neighbouring trigger without opening anything — opening is ArrowDown,\n * Enter or Space's job.\n */\nfunction moveTriggerFocus(from: string, dir: 1 | -1): void {\n  const ids = props.menus.map((m) => m.id);\n  const cur = ids.indexOf(from);\n  if (cur === -1) return;\n  triggerEls.get(ids[(cur + dir + ids.length) % ids.length] ?? \"\")?.focus();\n}\n\nasync function onTriggerKeydown(e: KeyboardEvent, menu: MenubarMenu): Promise<void> {\n  switch (e.key) {\n    case \"ArrowDown\":\n    case \"Enter\":\n    case \" \":\n      e.preventDefault(); // suppresses the button's own activation click\n      openId.value = menu.id;\n      activeIndex.value = -1;\n      await openAndFocusFirst(menu.id, menu.items);\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      if (openId.value) void moveMenu(horizontal.value);\n      else moveTriggerFocus(menu.id, horizontal.value);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      if (openId.value) void moveMenu(-horizontal.value as 1 | -1);\n      else moveTriggerFocus(menu.id, -horizontal.value as 1 | -1);\n      break;\n    case \"Escape\":\n      e.preventDefault();\n      close(true);\n      break;\n  }\n}\n\nfunction onMenuKeydown(e: KeyboardEvent, menu: MenubarMenu): void {\n  const items = menu.items;\n  switch (e.key) {\n    case \"ArrowDown\":\n      e.preventDefault();\n      goTo(items, neighborEnabled(items, activeIndex.value, 1));\n      break;\n    case \"ArrowUp\":\n      e.preventDefault();\n      goTo(items, neighborEnabled(items, activeIndex.value, -1));\n      break;\n    case \"Home\":\n      e.preventDefault();\n      goTo(items, firstEnabled(items, 0, 1));\n      break;\n    case \"End\":\n      e.preventDefault();\n      goTo(items, firstEnabled(items, items.length - 1, -1));\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      void moveMenu(horizontal.value);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      void moveMenu(-horizontal.value as 1 | -1);\n      break;\n    // Handled here rather than left to the button's native activation:\n    // preventDefault stops the browser's synthesized click, which would run\n    // choose() a second time alongside this delegated handler.\n    case \"Enter\":\n    case \" \": {\n      e.preventDefault();\n      const item = items[activeIndex.value];\n      if (item) choose(item);\n      break;\n    }\n    case \"Escape\":\n      e.preventDefault();\n      close(true);\n      break;\n    // Every other key is a printable character: APG typeahead moves focus to\n    // the next item whose label begins with it. `default` sees only these —\n    // Space/Enter/Escape each have their own case above.\n    default:\n      handleTypeahead(e, items);\n      break;\n  }\n}\n\nfunction onRootFocusout(e: FocusEvent): void {\n  if (!openId.value) return;\n  const root = e.currentTarget;\n  const next = e.relatedTarget;\n  // Tab out of the strip dismisses the menu and leaves focus where the browser\n  // put it. Moves that stay inside the menubar (opening handing focus to a\n  // row) keep it.\n  if (!(root instanceof Element) || !(next instanceof Node) || !root.contains(next)) close();\n}\n\n// A wrapper, not `close` itself: the listener's event argument would otherwise\n// arrive as `restoreFocus`, and an outside click would yank focus back to the\n// trigger instead of leaving it where the press landed.\nconst onWindowClick = (): void => close();\nonMounted(() => window.addEventListener(\"click\", onWindowClick));\nonBeforeUnmount(() => window.removeEventListener(\"click\", onWindowClick));\n</script>\n\n<template>\n  <!-- The attribute rides the strip itself, not just the prop: a host may\n       pass dir without setting document direction, and both the flex order\n       and the mirrored keys must agree with what is on screen. -->\n  <div\n    :dir=\"dir\"\n    role=\"menubar\"\n    class=\"flex items-center gap-0.5\"\n    style=\"-webkit-app-region: no-drag\"\n    @click.stop\n    @focusout=\"onRootFocusout\"\n  >\n    <div v-for=\"menu in menus\" :key=\"menu.id\" class=\"relative\">\n      <button\n        :id=\"`menubar-trigger-${menu.id}`\"\n        :ref=\"(el) => bindTrigger(menu.id, el)\"\n        type=\"button\"\n        role=\"menuitem\"\n        :aria-haspopup=\"'menu'\"\n        :aria-expanded=\"openId === menu.id\"\n        class=\"min-h-6 rounded-sm px-2 py-1 text-xs text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n        :class=\"openId === menu.id && 'bg-subtle text-foreground'\"\n        @click.stop=\"toggle(menu.id)\"\n        @mouseenter=\"hover(menu.id, 'pointer')\"\n        @focus=\"hover(menu.id, 'trigger-focus')\"\n        @keydown=\"onTriggerKeydown($event, menu)\"\n      >\n        {{ menu.label }}\n      </button>\n\n      <!-- Scoped presence, matching every sibling overlay: enter animates in,\n           leave answers with scale-out. The unconditional mount-only animation\n           this used to carry never plays on close at all. In jsdom, with no\n           stylesheet loaded, Vue computes zero animation duration and ends both\n           phases immediately, so tests see plain unmount. -->\n      <Transition enter-active-class=\"animate-scale-in\" leave-active-class=\"animate-scale-out\">\n        <div\n          v-if=\"openId === menu.id\"\n          :ref=\"(el) => bindPanel(menu.id, el)\"\n          role=\"menu\"\n          :aria-label=\"menu.label\"\n          tabindex=\"-1\"\n          class=\"absolute left-0 top-full z-overlay mt-1 min-w-[13rem] origin-top-left rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n          @click.stop\n          @keydown=\"onMenuKeydown($event, menu)\"\n        >\n          <template v-for=\"(item, i) in openMenu(menu)\" :key=\"i\">\n            <div v-if=\"item.separator\" role=\"separator\" class=\"my-1 h-px bg-border\" />\n            <!-- The row's colour, not its alpha, says it is unavailable. A menu\n                 row is nothing but its label, and `disabled:opacity-40` composited\n                 that label to 2.40:1 on the popover — a disabled row a reader\n                 cannot make out tells them nothing about what is unavailable,\n                 which is the only thing it is there to say. Muted instead: 5.76:1\n                 at rest, and a clear drop from the 15.46:1 an available row wears,\n                 so the state still reads at a glance. The shortcut beside it\n                 declares `text-muted-foreground` on its own element, so it lands\n                 on the same colour rather than inheriting this one.\n\n                 Rows sit at text-sm/py-1.5 like DropdownMenu's — one row grammar\n                 across menus; the compact trigger above stays desktop chrome.\n                 Every row carries tabindex -1: focus arrives programmatically,\n                 never by tabbing through the strip. -->\n            <button\n              v-else\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              :disabled=\"item.disabled\"\n              :data-highlighted=\"activeIndex === i || undefined\"\n              :style=\"{ animationDelay: listStaggerDelay(i) }\"\n              class=\"flex w-full items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-left text-sm text-foreground transition-colors duration-fast ease-out hover:bg-subtle disabled:pointer-events-none disabled:text-muted-foreground data-[highlighted]:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo animate-fade-rise\"\n              @click=\"choose(item)\"\n              @mouseenter=\"pointAtRow(openMenu(menu), item, i)\"\n              @focus=\"noteFocus(item, i)\"\n            >\n              <span>{{ item.label }}</span>\n              <span v-if=\"item.shortcut\" class=\"tabular text-micro text-muted-foreground\">\n                {{ item.shortcut }}\n              </span>\n            </button>\n          </template>\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/primitives/meter/src/Meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.js","names":[],"sources":["../../../../packages/primitives/meter/src/Meter.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MeterLabels } from \"@ecoma-io/loom-labels\";\nimport { cva } from \"class-variance-authority\";\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 METER_LABELS: MeterLabels = {\n  name: \"Meter\",\n  valueText: ({ value, max }) => `${value} of ${max}`,\n  optimal: \"Optimal\",\n  cautionary: \"Caution\",\n  critical: \"Critical\",\n};\n\n/**\n * The track's thickness, the same scale as Progress — a meter is a gauge, not a\n * form control, so it stays a stroke rather than aligning with input height.\n */\nexport type MeterSize = \"sm\" | \"md\" | \"lg\";\n\nexport const meterVariants = cva(\"relative w-full overflow-hidden rounded-full bg-muted\", {\n  variants: {\n    size: {\n      sm: \"h-1\",\n      md: \"h-2\",\n      lg: \"h-3\",\n    } satisfies Record<MeterSize, string>,\n  },\n  defaultVariants: { size: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useId } from \"vue\";\nimport { Check, CircleAlert, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Meter — a scalar capacity gauge on the WAI-ARIA meter role, visually a sibling\n * of Progress (same stroke scale, track/fill anatomy). Renders a measured\n * quantity against a known capacity — disk usage, budget consumption, seat\n * allocation — things that are not tasks and should never say \"loading.\"\n *\n * Built directly on `<div role=\"meter\">` rather than a headless component: the\n * ARIA meter role carries the same contract as the HTML meter element (min, max,\n * value, low, high, optimum) and a headless abstraction would add nothing but\n * an extra dependency — Progress uses Reka UI because progressbar's indeterminate\n * animation requires real DOM transitions Meter does not need.\n *\n * The accessible name is mandatory: a meter without a name is a number with no\n * referent. Four sources, resolved in order:\n * 1. `ariaLabelledby` (external element)\n * 2. `ariaLabel` (explicit string, no visible text)\n * 3. `label` (visible text, same string as the name)\n * 4. `text.name` (the labels-seam fallback — guaranteed non-empty)\n *\n * A `value` above `max` paints the bar full but `aria-valuenow` reports the\n * clamped value, because a spoken number outside the declared range is a lie\n * — the Progress lesson, carried forward.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The measured amount, clamped into [min, max] for both the fill and the announced value. */\n    value: number;\n    /** The value at which the gauge reads 0% full. */\n    min?: number;\n    /** The value at which the gauge reads 100% full. */\n    max?: number;\n    /** Low threshold — the boundary between the low and medium regions (HTML meter semantics). */\n    low?: number;\n    /** High threshold — the boundary between the medium and high regions (HTML meter semantics). */\n    high?: number;\n    /** The optimal value; decides which region is the good one. Defaults to the midpoint. */\n    optimum?: number;\n    /** Visible text that also supplies the accessible name when no ariaLabel/ariaLabelledby is set. */\n    label?: string;\n    /** Accessible name for the gauge, in place of a visible label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`/`label`. */\n    ariaLabelledby?: string;\n    /** Track thickness. Its own scale, not the control-height scale — a gauge is a stroke. */\n    size?: MeterSize;\n    /** Opt-in band recolouring (success/warning/destructive) with a redundant non-colour cue per band. */\n    threshold?: boolean;\n    /** Print the localised value text beside the track. Hidden from AT — the role already announces it. */\n    showValue?: boolean;\n    /**\n     * How the gauge speaks, as any subset of `MeterLabels` — the rest stay as\n     * the host's `provideLoomLabels` vocabulary left them, and then as Loom's\n     * English.\n     */\n    labels?: LabelOverrides<MeterLabels>;\n  }>(),\n  {\n    min: 0,\n    max: 100,\n    size: \"md\",\n    threshold: false,\n    showValue: false,\n  },\n);\n\nconst text = useLabels(\"meter\", METER_LABELS, () => props.labels);\n\n/** Track label text sizing, matching Progress's readout scale exactly. */\nconst VALUE_TEXT = {\n  sm: \"text-micro\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n} satisfies Record<MeterSize, string>;\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\nconst labelElId = useId();\n\n// ---------------------------------------------------------------------------\n// Value clamping — the Progress lesson: a spoken value outside [min, max] is a lie.\n// ---------------------------------------------------------------------------\n\n/** Clamped value, for the fill AND the aria attributes — never out of range. */\nconst clamped = computed<number>(() => {\n  const v = props.value;\n  if (Number.isNaN(v)) return props.min;\n  return Math.min(Math.max(v, props.min), props.max);\n});\n\n/** Percentage 0–100, from the clamped value. */\nconst pct = computed<number>(() => {\n  const range = props.max - props.min;\n  if (range <= 0) return 100;\n  return ((clamped.value - props.min) / range) * 100;\n});\n\n// ---------------------------------------------------------------------------\n// Band logic — HTML meter element's three-quality model, exactly.\n//\n// Three regions: low [min, low), medium [low, high], high (high, max].\n// The optimum point selects which region is preferred, and how the others rank.\n//\n// Per HTML spec §4.10.16:\n//   optimum in low    → low=preferred, medium=suboptimal, high=even-less-good\n//   optimum in medium → medium=preferred, low=suboptimal, high=suboptimal\n//   optimum in high   → high=preferred, medium=suboptimal, low=even-less-good\n//\n// When a region is \"even less good\" it maps to critical; \"suboptimal\" maps\n// to cautionary. No critical band exists when optimum is in the medium region\n// (both extremes are equally suboptimal).\n// ---------------------------------------------------------------------------\n\ntype Band = \"optimal\" | \"cautionary\" | \"critical\";\n\nconst band = computed<Band | undefined>(() => {\n  if (!props.threshold) return undefined;\n\n  let lo = props.low ?? props.min;\n  let hi = props.high ?? props.max;\n\n  // Clamp both boundaries into [min, max], then reject an inverted pair the\n  // way the HTML meter element does: treat both as unset rather than build a\n  // region model out of crossed boundaries.\n  lo = Math.min(Math.max(lo, props.min), props.max);\n  hi = Math.min(Math.max(hi, props.min), props.max);\n  if (lo > hi) {\n    lo = props.min;\n    hi = props.max;\n  }\n\n  const o = Math.min(Math.max(props.optimum ?? (props.min + props.max) / 2, props.min), props.max);\n  const v = clamped.value;\n\n  // Determine which region contains the optimum.\n  // Boundaries: low < value < high belongs to medium; low ≤ optimum ≤ high is medium.\n  // Region 0: [min, lo)   Region 1: [lo, hi]   Region 2: (hi, max]\n  const optRegion = o < lo ? 0 : o <= hi ? 1 : 2;\n\n  // Map regions to qualities per the table.\n  const regionMap: { optimal: number; cautionary: number[]; critical: number | null } =\n    optRegion === 0\n      ? { optimal: 0, cautionary: [1], critical: 2 }\n      : optRegion === 1\n        ? { optimal: 1, cautionary: [0, 2], critical: null }\n        : { optimal: 2, cautionary: [1], critical: 0 };\n\n  // Determine which region the current value falls into.\n  const valueRegion = v < lo ? 0 : v <= hi ? 1 : 2;\n\n  if (valueRegion === regionMap.optimal) return \"optimal\";\n  if (regionMap.cautionary.includes(valueRegion)) return \"cautionary\";\n  if (regionMap.critical === valueRegion) return \"critical\";\n  return \"optimal\"; // fallback — should not be reached\n});\n\n/** The fill colour when threshold is on; stays primary otherwise. */\nconst fillClass = computed(() => {\n  if (!props.threshold) return \"bg-primary\";\n  const b = band.value;\n  if (b === \"optimal\") return \"bg-success\";\n  if (b === \"cautionary\") return \"bg-warning\";\n  return \"bg-destructive\";\n});\n\n/** The band cue word from labels. */\nconst cueWord = computed(() => {\n  if (!band.value) return \"\";\n  return text.value[band.value];\n});\n\n/** The band cue icon component. */\nconst cueIcon = computed(() => {\n  if (band.value === \"optimal\") return Check;\n  if (band.value === \"cautionary\") return CircleAlert;\n  return X;\n});\n\n/** The cue colour class — the `-text` token of the band, never the fill token:\n * `--color-success` in dark is a fill lightness and fails text contrast. */\nconst cueColorClass = computed(() => {\n  if (band.value === \"optimal\") return \"text-success-text\";\n  if (band.value === \"cautionary\") return \"text-warning-text\";\n  return \"text-destructive-text\";\n});\n\n/** The fill indicator style — translateX slides the fill from right to left. */\nconst indicatorStyle = computed(() => ({\n  transition:\n    \"transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)\",\n  transform: `translateX(${pct.value - 100}%)`,\n}));\n\n/** aria-valuetext — localisable; never absent because the role is meaningless without it. */\nconst valuetext = computed(() =>\n  text.value.valueText({ value: clamped.value, min: props.min, max: props.max }),\n);\n\n// ---------------------------------------------------------------------------\n// Accessible name resolution — four sources, in precedence order.\n// ---------------------------------------------------------------------------\n\n/**\n * `label` is a content prop and always renders; `ariaLabel`/`ariaLabelledby`\n * choose only where the NAME comes from. A caller passing both wants visible\n * text under one name and a different announced name — silencing the visible\n * text would make the pair unrepresentable. And because assistive tech reads\n * `aria-labelledby` ahead of `aria-label`, whichever source loses must not\n * emit its attribute at all: an `ariaLabel` beside a label-pointing\n * `aria-labelledby` would be read past, not preferred.\n */\nconst ariaLabelAttr = computed(() => {\n  if (props.ariaLabelledby) return undefined;\n  if (props.ariaLabel) return props.ariaLabel;\n  if (props.label) return undefined; // named through the span's id instead\n  return text.value.name; // the seam fallback — a name is never absent\n});\n\nconst ariaLabelledbyAttr = computed(() => {\n  if (props.ariaLabelledby) return props.ariaLabelledby;\n  if (props.ariaLabel) return undefined; // ariaLabel wins the name\n  if (props.label) return labelElId;\n  return undefined;\n});\n\n/** Whether the visible `label` text renders. */\nconst hasVisibleLabel = computed(() => !!props.label);\n\n/** Whether the gauge row needs extra content beside the track. */\nconst hasRow = computed(() => props.showValue || (props.threshold && band.value));\n</script>\n\n<template>\n  <!-- Visible label — only when `label` is set and no ariaLabel/ariaLabelledby overrides it.\n       Rendered as a <span> rather than <label> because a div[role=\"meter\"] is not a\n       labelable element; the association is through aria-labelledby pointing at the span's id. -->\n  <span\n    v-if=\"hasVisibleLabel\"\n    :id=\"labelElId\"\n    :class=\"cn('block text-sm font-medium text-foreground mb-1', VALUE_TEXT[size])\"\n  >\n    {{ label }}\n  </span>\n\n  <!-- Branch 1: bare track — nothing beside it, no wrapper. Mirrors Progress's\n       default branch: the component's box is the track itself, and it keeps\n       the exact sizing it had before `showValue`/`threshold` existed. -->\n  <div\n    v-if=\"!hasRow\"\n    role=\"meter\"\n    :aria-valuenow=\"clamped\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-valuetext=\"valuetext\"\n    :aria-label=\"ariaLabelAttr\"\n    :aria-labelledby=\"ariaLabelledbyAttr\"\n    v-bind=\"rest\"\n    :class=\"cn(meterVariants({ size }), attrs.class as string)\"\n  >\n    <div :class=\"cn('h-full rounded-full', fillClass)\" :style=\"indicatorStyle\" />\n  </div>\n\n  <!-- Branch 2: gauge row with cue/readout — a flex row so the track and the\n       side content share a single box. `class` from the caller lands on this\n       row (the outermost box the caller sees), and everything else lands on the\n       meter element through `rest`. -->\n  <div v-else :class=\"cn('flex w-full items-center gap-3', attrs.class as string)\">\n    <div\n      role=\"meter\"\n      :aria-valuenow=\"clamped\"\n      :aria-valuemin=\"min\"\n      :aria-valuemax=\"max\"\n      :aria-valuetext=\"valuetext\"\n      :aria-label=\"ariaLabelAttr\"\n      :aria-labelledby=\"ariaLabelledbyAttr\"\n      v-bind=\"rest\"\n      :class=\"cn(meterVariants({ size }), 'w-auto min-w-0 flex-1')\"\n    >\n      <div :class=\"cn('h-full rounded-full', fillClass)\" :style=\"indicatorStyle\" />\n    </div>\n\n    <!-- Value readout + band cue, aria-hidden (the meter role already announces the\n         value via aria-valuetext, and the band is derivable from it). Fixed width so\n         the row does not resize as the digits change. -->\n    <div aria-hidden=\"true\" :class=\"cn('flex items-center gap-2 shrink-0')\">\n      <span\n        v-if=\"showValue\"\n        :class=\"cn('tabular w-10 text-right text-muted-foreground', VALUE_TEXT[size])\"\n      >\n        {{ valuetext }}\n      </span>\n      <span\n        v-if=\"threshold && band\"\n        :class=\"cn('flex items-center gap-1 whitespace-nowrap', cueColorClass, VALUE_TEXT[size])\"\n      >\n        <component :is=\"cueIcon\" class=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n        <span>{{ cueWord }}</span>\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/primitives/meter/src/Meter.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/meter/src/Meter.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MeterLabels } from \"@ecoma-io/loom-labels\";\nimport { cva } from \"class-variance-authority\";\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 METER_LABELS: MeterLabels = {\n  name: \"Meter\",\n  valueText: ({ value, max }) => `${value} of ${max}`,\n  optimal: \"Optimal\",\n  cautionary: \"Caution\",\n  critical: \"Critical\",\n};\n\n/**\n * The track's thickness, the same scale as Progress — a meter is a gauge, not a\n * form control, so it stays a stroke rather than aligning with input height.\n */\nexport type MeterSize = \"sm\" | \"md\" | \"lg\";\n\nexport const meterVariants = cva(\"relative w-full overflow-hidden rounded-full bg-muted\", {\n  variants: {\n    size: {\n      sm: \"h-1\",\n      md: \"h-2\",\n      lg: \"h-3\",\n    } satisfies Record<MeterSize, string>,\n  },\n  defaultVariants: { size: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useId } from \"vue\";\nimport { Check, CircleAlert, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Meter — a scalar capacity gauge on the WAI-ARIA meter role, visually a sibling\n * of Progress (same stroke scale, track/fill anatomy). Renders a measured\n * quantity against a known capacity — disk usage, budget consumption, seat\n * allocation — things that are not tasks and should never say \"loading.\"\n *\n * Built directly on `<div role=\"meter\">` rather than a headless component: the\n * ARIA meter role carries the same contract as the HTML meter element (min, max,\n * value, low, high, optimum) and a headless abstraction would add nothing but\n * an extra dependency — Progress uses Reka UI because progressbar's indeterminate\n * animation requires real DOM transitions Meter does not need.\n *\n * The accessible name is mandatory: a meter without a name is a number with no\n * referent. Four sources, resolved in order:\n * 1. `ariaLabelledby` (external element)\n * 2. `ariaLabel` (explicit string, no visible text)\n * 3. `label` (visible text, same string as the name)\n * 4. `text.name` (the labels-seam fallback — guaranteed non-empty)\n *\n * A `value` above `max` paints the bar full but `aria-valuenow` reports the\n * clamped value, because a spoken number outside the declared range is a lie\n * — the Progress lesson, carried forward.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The measured amount, clamped into [min, max] for both the fill and the announced value. */\n    value: number;\n    /** The value at which the gauge reads 0% full. */\n    min?: number;\n    /** The value at which the gauge reads 100% full. */\n    max?: number;\n    /** Low threshold — the boundary between the low and medium regions (HTML meter semantics). */\n    low?: number;\n    /** High threshold — the boundary between the medium and high regions (HTML meter semantics). */\n    high?: number;\n    /** The optimal value; decides which region is the good one. Defaults to the midpoint. */\n    optimum?: number;\n    /** Visible text that also supplies the accessible name when no ariaLabel/ariaLabelledby is set. */\n    label?: string;\n    /** Accessible name for the gauge, in place of a visible label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`/`label`. */\n    ariaLabelledby?: string;\n    /** Track thickness. Its own scale, not the control-height scale — a gauge is a stroke. */\n    size?: MeterSize;\n    /** Opt-in band recolouring (success/warning/destructive) with a redundant non-colour cue per band. */\n    threshold?: boolean;\n    /** Print the localised value text beside the track. Hidden from AT — the role already announces it. */\n    showValue?: boolean;\n    /**\n     * How the gauge speaks, as any subset of `MeterLabels` — the rest stay as\n     * the host's `provideLoomLabels` vocabulary left them, and then as Loom's\n     * English.\n     */\n    labels?: LabelOverrides<MeterLabels>;\n  }>(),\n  {\n    min: 0,\n    max: 100,\n    size: \"md\",\n    threshold: false,\n    showValue: false,\n  },\n);\n\nconst text = useLabels(\"meter\", METER_LABELS, () => props.labels);\n\n/** Track label text sizing, matching Progress's readout scale exactly. */\nconst VALUE_TEXT = {\n  sm: \"text-micro\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n} satisfies Record<MeterSize, string>;\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\nconst labelElId = useId();\n\n// ---------------------------------------------------------------------------\n// Value clamping — the Progress lesson: a spoken value outside [min, max] is a lie.\n// ---------------------------------------------------------------------------\n\n/** Clamped value, for the fill AND the aria attributes — never out of range. */\nconst clamped = computed<number>(() => {\n  const v = props.value;\n  if (Number.isNaN(v)) return props.min;\n  return Math.min(Math.max(v, props.min), props.max);\n});\n\n/** Percentage 0–100, from the clamped value. */\nconst pct = computed<number>(() => {\n  const range = props.max - props.min;\n  if (range <= 0) return 100;\n  return ((clamped.value - props.min) / range) * 100;\n});\n\n// ---------------------------------------------------------------------------\n// Band logic — HTML meter element's three-quality model, exactly.\n//\n// Three regions: low [min, low), medium [low, high], high (high, max].\n// The optimum point selects which region is preferred, and how the others rank.\n//\n// Per HTML spec §4.10.16:\n//   optimum in low    → low=preferred, medium=suboptimal, high=even-less-good\n//   optimum in medium → medium=preferred, low=suboptimal, high=suboptimal\n//   optimum in high   → high=preferred, medium=suboptimal, low=even-less-good\n//\n// When a region is \"even less good\" it maps to critical; \"suboptimal\" maps\n// to cautionary. No critical band exists when optimum is in the medium region\n// (both extremes are equally suboptimal).\n// ---------------------------------------------------------------------------\n\ntype Band = \"optimal\" | \"cautionary\" | \"critical\";\n\nconst band = computed<Band | undefined>(() => {\n  if (!props.threshold) return undefined;\n\n  let lo = props.low ?? props.min;\n  let hi = props.high ?? props.max;\n\n  // Clamp both boundaries into [min, max], then reject an inverted pair the\n  // way the HTML meter element does: treat both as unset rather than build a\n  // region model out of crossed boundaries.\n  lo = Math.min(Math.max(lo, props.min), props.max);\n  hi = Math.min(Math.max(hi, props.min), props.max);\n  if (lo > hi) {\n    lo = props.min;\n    hi = props.max;\n  }\n\n  const o = Math.min(Math.max(props.optimum ?? (props.min + props.max) / 2, props.min), props.max);\n  const v = clamped.value;\n\n  // Determine which region contains the optimum.\n  // Boundaries: low < value < high belongs to medium; low ≤ optimum ≤ high is medium.\n  // Region 0: [min, lo)   Region 1: [lo, hi]   Region 2: (hi, max]\n  const optRegion = o < lo ? 0 : o <= hi ? 1 : 2;\n\n  // Map regions to qualities per the table.\n  const regionMap: { optimal: number; cautionary: number[]; critical: number | null } =\n    optRegion === 0\n      ? { optimal: 0, cautionary: [1], critical: 2 }\n      : optRegion === 1\n        ? { optimal: 1, cautionary: [0, 2], critical: null }\n        : { optimal: 2, cautionary: [1], critical: 0 };\n\n  // Determine which region the current value falls into.\n  const valueRegion = v < lo ? 0 : v <= hi ? 1 : 2;\n\n  if (valueRegion === regionMap.optimal) return \"optimal\";\n  if (regionMap.cautionary.includes(valueRegion)) return \"cautionary\";\n  if (regionMap.critical === valueRegion) return \"critical\";\n  return \"optimal\"; // fallback — should not be reached\n});\n\n/** The fill colour when threshold is on; stays primary otherwise. */\nconst fillClass = computed(() => {\n  if (!props.threshold) return \"bg-primary\";\n  const b = band.value;\n  if (b === \"optimal\") return \"bg-success\";\n  if (b === \"cautionary\") return \"bg-warning\";\n  return \"bg-destructive\";\n});\n\n/** The band cue word from labels. */\nconst cueWord = computed(() => {\n  if (!band.value) return \"\";\n  return text.value[band.value];\n});\n\n/** The band cue icon component. */\nconst cueIcon = computed(() => {\n  if (band.value === \"optimal\") return Check;\n  if (band.value === \"cautionary\") return CircleAlert;\n  return X;\n});\n\n/** The cue colour class — the `-text` token of the band, never the fill token:\n * `--color-success` in dark is a fill lightness and fails text contrast. */\nconst cueColorClass = computed(() => {\n  if (band.value === \"optimal\") return \"text-success-text\";\n  if (band.value === \"cautionary\") return \"text-warning-text\";\n  return \"text-destructive-text\";\n});\n\n/** The fill indicator style — translateX slides the fill from right to left. */\nconst indicatorStyle = computed(() => ({\n  transition:\n    \"transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)\",\n  transform: `translateX(${pct.value - 100}%)`,\n}));\n\n/** aria-valuetext — localisable; never absent because the role is meaningless without it. */\nconst valuetext = computed(() =>\n  text.value.valueText({ value: clamped.value, min: props.min, max: props.max }),\n);\n\n// ---------------------------------------------------------------------------\n// Accessible name resolution — four sources, in precedence order.\n// ---------------------------------------------------------------------------\n\n/**\n * `label` is a content prop and always renders; `ariaLabel`/`ariaLabelledby`\n * choose only where the NAME comes from. A caller passing both wants visible\n * text under one name and a different announced name — silencing the visible\n * text would make the pair unrepresentable. And because assistive tech reads\n * `aria-labelledby` ahead of `aria-label`, whichever source loses must not\n * emit its attribute at all: an `ariaLabel` beside a label-pointing\n * `aria-labelledby` would be read past, not preferred.\n */\nconst ariaLabelAttr = computed(() => {\n  if (props.ariaLabelledby) return undefined;\n  if (props.ariaLabel) return props.ariaLabel;\n  if (props.label) return undefined; // named through the span's id instead\n  return text.value.name; // the seam fallback — a name is never absent\n});\n\nconst ariaLabelledbyAttr = computed(() => {\n  if (props.ariaLabelledby) return props.ariaLabelledby;\n  if (props.ariaLabel) return undefined; // ariaLabel wins the name\n  if (props.label) return labelElId;\n  return undefined;\n});\n\n/** Whether the visible `label` text renders. */\nconst hasVisibleLabel = computed(() => !!props.label);\n\n/** Whether the gauge row needs extra content beside the track. */\nconst hasRow = computed(() => props.showValue || (props.threshold && band.value));\n</script>\n\n<template>\n  <!-- Visible label — only when `label` is set and no ariaLabel/ariaLabelledby overrides it.\n       Rendered as a <span> rather than <label> because a div[role=\"meter\"] is not a\n       labelable element; the association is through aria-labelledby pointing at the span's id. -->\n  <span\n    v-if=\"hasVisibleLabel\"\n    :id=\"labelElId\"\n    :class=\"cn('block text-sm font-medium text-foreground mb-1', VALUE_TEXT[size])\"\n  >\n    {{ label }}\n  </span>\n\n  <!-- Branch 1: bare track — nothing beside it, no wrapper. Mirrors Progress's\n       default branch: the component's box is the track itself, and it keeps\n       the exact sizing it had before `showValue`/`threshold` existed. -->\n  <div\n    v-if=\"!hasRow\"\n    role=\"meter\"\n    :aria-valuenow=\"clamped\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-valuetext=\"valuetext\"\n    :aria-label=\"ariaLabelAttr\"\n    :aria-labelledby=\"ariaLabelledbyAttr\"\n    v-bind=\"rest\"\n    :class=\"cn(meterVariants({ size }), attrs.class as string)\"\n  >\n    <div :class=\"cn('h-full rounded-full', fillClass)\" :style=\"indicatorStyle\" />\n  </div>\n\n  <!-- Branch 2: gauge row with cue/readout — a flex row so the track and the\n       side content share a single box. `class` from the caller lands on this\n       row (the outermost box the caller sees), and everything else lands on the\n       meter element through `rest`. -->\n  <div v-else :class=\"cn('flex w-full items-center gap-3', attrs.class as string)\">\n    <div\n      role=\"meter\"\n      :aria-valuenow=\"clamped\"\n      :aria-valuemin=\"min\"\n      :aria-valuemax=\"max\"\n      :aria-valuetext=\"valuetext\"\n      :aria-label=\"ariaLabelAttr\"\n      :aria-labelledby=\"ariaLabelledbyAttr\"\n      v-bind=\"rest\"\n      :class=\"cn(meterVariants({ size }), 'w-auto min-w-0 flex-1')\"\n    >\n      <div :class=\"cn('h-full rounded-full', fillClass)\" :style=\"indicatorStyle\" />\n    </div>\n\n    <!-- Value readout + band cue, aria-hidden (the meter role already announces the\n         value via aria-valuetext, and the band is derivable from it). Fixed width so\n         the row does not resize as the digits change. -->\n    <div aria-hidden=\"true\" :class=\"cn('flex items-center gap-2 shrink-0')\">\n      <span\n        v-if=\"showValue\"\n        :class=\"cn('tabular w-10 text-right text-muted-foreground', VALUE_TEXT[size])\"\n      >\n        {{ valuetext }}\n      </span>\n      <span\n        v-if=\"threshold && band\"\n        :class=\"cn('flex items-center gap-1 whitespace-nowrap', cueColorClass, VALUE_TEXT[size])\"\n      >\n        <component :is=\"cueIcon\" class=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n        <span>{{ cueWord }}</span>\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/primitives/navigation-menu/src/NavigationMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../../packages/primitives/navigation-menu/src/NavigationMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A navigation link shown inside a dropdown panel. The list is data rather than\n * markup because the primitive stays free of routing logic — the host provides\n * `href` values and decides what navigation means.\n */\nexport interface NavigationMenuLink {\n  /** Visible label. */\n  label: string;\n  /** Link target. */\n  href: string;\n  /** Whether this link is the current page. */\n  active?: boolean;\n  /** Optional description shown below the label. */\n  description?: string;\n  /** Disabled state. */\n  disabled?: boolean;\n}\n\n/**\n * One top-level navigation entry. An item with `children` opens a dropdown\n * panel; an item without them is a plain link.\n */\nexport interface NavigationMenuItem {\n  /** Visible label for the trigger button. */\n  label: string;\n  /** Unique key identifying this item. */\n  value: string;\n  /** The link target. When set, this item is a simple link rather than a dropdown trigger. */\n  href?: string;\n  /** Whether this item is currently active (shows aria-current). */\n  active?: boolean;\n  /** Nested navigation items shown in a dropdown panel. */\n  children?: NavigationMenuLink[];\n  /** Disabled state. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  NavigationMenuRoot,\n  NavigationMenuList,\n  NavigationMenuItem as RekaNavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuLink as RekaNavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * NavigationMenu — the WAI-ARIA navigation menu pattern: a landmark containing\n * triggers that open dropdown panels of navigation links.\n *\n * Unlike `DropdownMenu` (button → command list) or `Menubar` (horizontal strip\n * of command menus), this component is a site-navigation landmark. Its panels\n * contain links, not actions, and the whole structure is wrapped in a `<nav>`\n * landmark.\n *\n * Items are data rather than markup. A top-level item with `children` opens a\n * dropdown panel; one without renders as a direct link. The keyboard model\n * follows the APG Navigation Menu pattern: roving tabindex across triggers,\n * Left/Right arrows move between triggers, ArrowDown opens, Escape closes.\n */\nwithDefaults(\n  defineProps<{\n    /** The top-level navigation items, in order. */\n    items: NavigationMenuItem[];\n    /** Layout direction of the trigger bar. */\n    orientation?: \"horizontal\" | \"vertical\";\n    /** Reading direction. Mirrors arrow keys when right-to-left. */\n    dir?: \"ltr\" | \"rtl\";\n    /** Drive the open trigger from the host; omit it and the menu owns its own state. */\n    modelValue?: string | undefined;\n    /** Accessible label for the nav landmark. */\n    ariaLabel?: string;\n  }>(),\n  // `modelValue: undefined` is load-bearing — it keeps the uncontrolled third\n  // state reachable past Vue's absent-Boolean casting. `optional()` in the\n  // template is the other half.\n  { modelValue: undefined, orientation: \"horizontal\", ariaLabel: \"Navigation\" },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <nav :aria-label=\"ariaLabel\" :dir=\"dir\">\n    <NavigationMenuRoot\n      :orientation=\"orientation\"\n      v-bind=\"optional({ modelValue, dir })\"\n      class=\"relative\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n    >\n      <NavigationMenuList\n        :class=\"\n          cn('flex items-center gap-0.5', orientation === 'vertical' && 'flex-col items-stretch')\n        \"\n      >\n        <RekaNavigationMenuItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value\">\n          <!-- Items with children get a trigger button that opens a panel. -->\n          <NavigationMenuTrigger\n            v-if=\"item.children && item.children.length > 0\"\n            :disabled=\"item.disabled ?? false\"\n            aria-haspopup=\"menu\"\n            :class=\"\n              cn(\n                'min-h-6 rounded-sm px-2 py-1 text-sm text-muted-foreground transition-colors duration-fast ease-out',\n                'hover:bg-subtle hover:text-foreground',\n                'focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n                'data-[state=open]:bg-subtle data-[state=open]:text-foreground',\n              )\n            \"\n          >\n            {{ item.label }}\n          </NavigationMenuTrigger>\n\n          <!-- Simple link items wrapped in NavigationMenuLink for roving focus. -->\n          <RekaNavigationMenuLink\n            v-else\n            v-bind=\"optional({ asChild: true, active: item.active })\"\n            :class=\"\n              cn(\n                'min-h-6 rounded-sm px-2 py-1 text-sm text-muted-foreground transition-colors duration-fast ease-out',\n                'hover:bg-subtle hover:text-foreground',\n                'focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                item.active && 'bg-primary-muted text-primary-text',\n                item.disabled && 'pointer-events-none text-muted-foreground',\n              )\n            \"\n          >\n            <a\n              :href=\"item.href\"\n              :aria-current=\"item.active ? 'page' : undefined\"\n              :aria-disabled=\"item.disabled || undefined\"\n              :tabindex=\"item.disabled ? -1 : undefined\"\n            >\n              {{ item.label }}\n            </a>\n          </RekaNavigationMenuLink>\n\n          <NavigationMenuContent\n            v-if=\"item.children && item.children.length > 0\"\n            :class=\"\n              cn(\n                'z-overlay min-w-[16rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none',\n                'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n              )\n            \"\n            style=\"transform-origin: var(--reka-popper-transform-origin)\"\n          >\n            <div class=\"flex flex-col gap-1 p-1\">\n              <a\n                v-for=\"(link, i) in item.children\"\n                :key=\"link.href\"\n                :href=\"link.href\"\n                :aria-current=\"link.active ? 'page' : undefined\"\n                :aria-disabled=\"link.disabled || undefined\"\n                :tabindex=\"link.disabled ? -1 : undefined\"\n                :style=\"{ animationDelay: listStaggerDelay(i) }\"\n                :class=\"\n                  cn(\n                    'block rounded-sm px-2 py-1.5 text-sm text-foreground no-underline outline-none',\n                    'transition-colors duration-fast ease-out',\n                    'hover:bg-subtle',\n                    'focus-visible:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                    link.active && 'bg-primary-muted text-primary-text',\n                    link.disabled && 'pointer-events-none text-muted-foreground',\n                    'animate-fade-rise',\n                  )\n                \"\n              >\n                <div class=\"font-medium\">{{ link.label }}</div>\n                <div v-if=\"link.description\" class=\"text-xs text-muted-foreground\">\n                  {{ link.description }}\n                </div>\n              </a>\n            </div>\n          </NavigationMenuContent>\n        </RekaNavigationMenuItem>\n      </NavigationMenuList>\n\n      <!-- Animated indicator bar (horizontal mode only). -->\n      <NavigationMenuIndicator\n        v-if=\"orientation === 'horizontal'\"\n        :class=\"\n          cn(\n            'top-full z-10 h-0.5 bg-primary',\n            'data-[state=hidden]:animate-fade-fall data-[state=visible]:animate-fade-rise',\n          )\n        \"\n      />\n\n      <NavigationMenuViewport\n        :class=\"cn('data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out')\"\n        style=\"transform-origin: var(--reka-navigation-menu-viewport-transform-origin)\"\n      />\n    </NavigationMenuRoot>\n  </nav>\n</template>\n"],"mappings":""}

package/dist/primitives/navigation-menu/src/NavigationMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../packages/primitives/navigation-menu/src/NavigationMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A navigation link shown inside a dropdown panel. The list is data rather than\n * markup because the primitive stays free of routing logic — the host provides\n * `href` values and decides what navigation means.\n */\nexport interface NavigationMenuLink {\n  /** Visible label. */\n  label: string;\n  /** Link target. */\n  href: string;\n  /** Whether this link is the current page. */\n  active?: boolean;\n  /** Optional description shown below the label. */\n  description?: string;\n  /** Disabled state. */\n  disabled?: boolean;\n}\n\n/**\n * One top-level navigation entry. An item with `children` opens a dropdown\n * panel; an item without them is a plain link.\n */\nexport interface NavigationMenuItem {\n  /** Visible label for the trigger button. */\n  label: string;\n  /** Unique key identifying this item. */\n  value: string;\n  /** The link target. When set, this item is a simple link rather than a dropdown trigger. */\n  href?: string;\n  /** Whether this item is currently active (shows aria-current). */\n  active?: boolean;\n  /** Nested navigation items shown in a dropdown panel. */\n  children?: NavigationMenuLink[];\n  /** Disabled state. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  NavigationMenuRoot,\n  NavigationMenuList,\n  NavigationMenuItem as RekaNavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuLink as RekaNavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * NavigationMenu — the WAI-ARIA navigation menu pattern: a landmark containing\n * triggers that open dropdown panels of navigation links.\n *\n * Unlike `DropdownMenu` (button → command list) or `Menubar` (horizontal strip\n * of command menus), this component is a site-navigation landmark. Its panels\n * contain links, not actions, and the whole structure is wrapped in a `<nav>`\n * landmark.\n *\n * Items are data rather than markup. A top-level item with `children` opens a\n * dropdown panel; one without renders as a direct link. The keyboard model\n * follows the APG Navigation Menu pattern: roving tabindex across triggers,\n * Left/Right arrows move between triggers, ArrowDown opens, Escape closes.\n */\nwithDefaults(\n  defineProps<{\n    /** The top-level navigation items, in order. */\n    items: NavigationMenuItem[];\n    /** Layout direction of the trigger bar. */\n    orientation?: \"horizontal\" | \"vertical\";\n    /** Reading direction. Mirrors arrow keys when right-to-left. */\n    dir?: \"ltr\" | \"rtl\";\n    /** Drive the open trigger from the host; omit it and the menu owns its own state. */\n    modelValue?: string | undefined;\n    /** Accessible label for the nav landmark. */\n    ariaLabel?: string;\n  }>(),\n  // `modelValue: undefined` is load-bearing — it keeps the uncontrolled third\n  // state reachable past Vue's absent-Boolean casting. `optional()` in the\n  // template is the other half.\n  { modelValue: undefined, orientation: \"horizontal\", ariaLabel: \"Navigation\" },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <nav :aria-label=\"ariaLabel\" :dir=\"dir\">\n    <NavigationMenuRoot\n      :orientation=\"orientation\"\n      v-bind=\"optional({ modelValue, dir })\"\n      class=\"relative\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n    >\n      <NavigationMenuList\n        :class=\"\n          cn('flex items-center gap-0.5', orientation === 'vertical' && 'flex-col items-stretch')\n        \"\n      >\n        <RekaNavigationMenuItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value\">\n          <!-- Items with children get a trigger button that opens a panel. -->\n          <NavigationMenuTrigger\n            v-if=\"item.children && item.children.length > 0\"\n            :disabled=\"item.disabled ?? false\"\n            aria-haspopup=\"menu\"\n            :class=\"\n              cn(\n                'min-h-6 rounded-sm px-2 py-1 text-sm text-muted-foreground transition-colors duration-fast ease-out',\n                'hover:bg-subtle hover:text-foreground',\n                'focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n                'data-[state=open]:bg-subtle data-[state=open]:text-foreground',\n              )\n            \"\n          >\n            {{ item.label }}\n          </NavigationMenuTrigger>\n\n          <!-- Simple link items wrapped in NavigationMenuLink for roving focus. -->\n          <RekaNavigationMenuLink\n            v-else\n            v-bind=\"optional({ asChild: true, active: item.active })\"\n            :class=\"\n              cn(\n                'min-h-6 rounded-sm px-2 py-1 text-sm text-muted-foreground transition-colors duration-fast ease-out',\n                'hover:bg-subtle hover:text-foreground',\n                'focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                item.active && 'bg-primary-muted text-primary-text',\n                item.disabled && 'pointer-events-none text-muted-foreground',\n              )\n            \"\n          >\n            <a\n              :href=\"item.href\"\n              :aria-current=\"item.active ? 'page' : undefined\"\n              :aria-disabled=\"item.disabled || undefined\"\n              :tabindex=\"item.disabled ? -1 : undefined\"\n            >\n              {{ item.label }}\n            </a>\n          </RekaNavigationMenuLink>\n\n          <NavigationMenuContent\n            v-if=\"item.children && item.children.length > 0\"\n            :class=\"\n              cn(\n                'z-overlay min-w-[16rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none',\n                'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n              )\n            \"\n            style=\"transform-origin: var(--reka-popper-transform-origin)\"\n          >\n            <div class=\"flex flex-col gap-1 p-1\">\n              <a\n                v-for=\"(link, i) in item.children\"\n                :key=\"link.href\"\n                :href=\"link.href\"\n                :aria-current=\"link.active ? 'page' : undefined\"\n                :aria-disabled=\"link.disabled || undefined\"\n                :tabindex=\"link.disabled ? -1 : undefined\"\n                :style=\"{ animationDelay: listStaggerDelay(i) }\"\n                :class=\"\n                  cn(\n                    'block rounded-sm px-2 py-1.5 text-sm text-foreground no-underline outline-none',\n                    'transition-colors duration-fast ease-out',\n                    'hover:bg-subtle',\n                    'focus-visible:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                    link.active && 'bg-primary-muted text-primary-text',\n                    link.disabled && 'pointer-events-none text-muted-foreground',\n                    'animate-fade-rise',\n                  )\n                \"\n              >\n                <div class=\"font-medium\">{{ link.label }}</div>\n                <div v-if=\"link.description\" class=\"text-xs text-muted-foreground\">\n                  {{ link.description }}\n                </div>\n              </a>\n            </div>\n          </NavigationMenuContent>\n        </RekaNavigationMenuItem>\n      </NavigationMenuList>\n\n      <!-- Animated indicator bar (horizontal mode only). -->\n      <NavigationMenuIndicator\n        v-if=\"orientation === 'horizontal'\"\n        :class=\"\n          cn(\n            'top-full z-10 h-0.5 bg-primary',\n            'data-[state=hidden]:animate-fade-fall data-[state=visible]:animate-fade-rise',\n          )\n        \"\n      />\n\n      <NavigationMenuViewport\n        :class=\"cn('data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out')\"\n        style=\"transform-origin: var(--reka-navigation-menu-viewport-transform-origin)\"\n      />\n    </NavigationMenuRoot>\n  </nav>\n</template>\n"],"mappings":"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"}

package/dist/primitives/number-field/src/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","names":[],"sources":["../../../../packages/primitives/number-field/src/NumberField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { NumberFieldLabels } from \"@ecoma-io/loom-labels\";\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 NUMBER_FIELD_LABELS: NumberFieldLabels = {\n  increment: \"Increase value\",\n  decrement: \"Decrease value\",\n  roleDescription: \"Number field\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, useTemplateRef, watch } from \"vue\";\nimport {\n  NumberFieldRoot,\n  NumberFieldInput,\n  NumberFieldIncrement,\n  NumberFieldDecrement,\n} from \"reka-ui\";\nimport { ChevronUp, ChevronDown } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useAncestorDisabled } from \"@ecoma-io/loom-labels\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * NumberField — a constrained number input you can also *scrub*: drag\n * horizontally anywhere on the field and the value runs with the pointer, the\n * gesture professional editors trained everyone to expect on a numeric row.\n *\n * Built on Reka UI's NumberField, which supplies the spinbutton semantics and\n * the typed-value parsing. Two things are added here because Reka has no\n * equivalent: the scrub-drag gesture, and a Shift multiplier on the arrow\n * keys.\n *\n * The event contract is what makes it usable behind an undo stack.\n * `update:modelValue` is transient — it fires on every drag tick, every arrow\n * tick and every applied edit, so a host can paint a live preview. `commit`\n * fires once per gesture boundary — drag release, Enter, or focus leaving the\n * field. One long drag is therefore one undo checkpoint rather than one per\n * pixel, and a gesture that ends where it started produces none at all.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id of\n * its hint or error line, `required`, `invalid`, `disabled`, `readonly` and the\n * name the value is submitted under all arrive through `useFieldControl()`, so\n * `<Field label=\"Rotation\" error=\"…\"><NumberField … /></Field>` needs no\n * attributes at the call site. Every prop below still wins over the row when it\n * is set, in both directions — which is why the three booleans default to\n * `undefined` rather than `false`.\n *\n * `readonly` and `disabled` are different states here for the same reason they\n * are on a text input, and a number is the case that makes it obvious: a rate,\n * a computed total or a locked coordinate is a value on show. It stays a Tab\n * stop, stays in the form's submitted data, and takes a lifted fill with the\n * number at full strength, one step short of the disabled state's drained fill,\n * muted number and slackened rim — and every path that would change it is\n * closed, the stepper included, because a control offering a gesture that does\n * nothing is worse than one that offers none.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current value. Transient edits are reported before it changes. */\n    modelValue?: number;\n    /** Lower bound. Every path — typing, arrows, scrub — is clamped to it. */\n    min?: number;\n    /** Upper bound, clamped the same way. It wins over step alignment. */\n    max?: number;\n    /** The granularity of one arrow tick or one scrub step. Shift multiplies it by ten. */\n    step?: number;\n    /** A presentational suffix such as `px` or `deg`. It is never part of the value. */\n    unit?: string;\n    /** Unavailable: dims the field and refuses every edit path. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the value without allowing an edit — typing, arrows, stepper and scrub all closed — while staying focusable and still submitted. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `NumberFieldLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the per-instance correction, not the place to localise an\n     * application: the case it exists for is `roleDescription`, where a field\n     * holding a rotation or a price is more useful named as that than as a\n     * number field.\n     */\n    labels?: LabelOverrides<NumberFieldLabels>;\n  }>(),\n  {\n    step: 1,\n    // Not `false`, for any of the three. `false` is a caller saying \"this field\n    // is fine / enabled / editable even though its row is not\"; absent is a\n    // caller saying nothing, and only `undefined` survives to mean that past\n    // Vue's absent-Boolean-casts-to-false rule — see TextField.vue, which\n    // carries the full reasoning.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** Transient: every drag tick, arrow tick, or applied edit. Not a checkpoint. */\n  \"update:modelValue\": [value: number];\n  /** Committed: once per gesture boundary — drag release, Enter, or focus leaving. */\n  commit: [value: number];\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(\"numberField\", NUMBER_FIELD_LABELS, () => props.labels);\n\n// The rendered root is a non-focusable `role=\"group\"` wrapper, so fallthrough\n// attributes that describe the *control* — `aria-labelledby`, `data-testid` —\n// belong on the spinbutton inside it, not on the group. `class` is the one\n// exception and goes the other way: a caller's sizing or layout class has to\n// land on the element that participates in the parent's layout, merged through\n// `cn()` so a caller's `w-24` actually beats the root's own `w-full` instead of\n// losing to whichever utility Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: inputAttrs } = useSplitAttrs();\n\n/**\n * The scrub is the reason this control cannot be left to the platform.\n *\n * `<fieldset disabled>` makes the inner `<input>` and the two stepper buttons\n * inert on its own, which covers the keyboard and the two clicks — but the\n * drag-to-change gesture is a `pointerdown` on the **root**, and a `<div>` is\n * not a form control, so nothing native stops it. `onPointerDown` bails on\n * `field.disabled`, and that is exactly the value a disabled fieldset does not\n * reach. Without this, a field inside a disabled group looked unavailable,\n * refused the keyboard, and still changed its number under a drag.\n *\n * Read off the DOM rather than taken from the Field context, which publishes no\n * `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst root = useTemplateRef<{ $el?: Element }>(\"root\");\nconst groupDisabled = useAncestorDisabled(() => root.value?.$el);\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are read off `attrs` and handed in as this caller's own\n// values — a caller who sets either still beats the row, and the row's\n// description is merged into theirs rather than replacing it. `name` and\n// `required` are absent from this object because there is no prop to oppose\n// the row with; the row's answer stands unopposed, which is what is wanted.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  // The fieldset beats the prop in both directions, exactly as it does for the\n  // `<input>` inside this very control.\n  disabled: groupDisabled.value ? true : props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n}));\n\n// `name` is the one resolved key that does not travel with the bag, and here\n// it is a defect rather than a nicety: the bag lands on the spinbutton, and\n// what the spinbutton holds is the *formatted* number — `1,234` for 1234. A\n// `name` on it would post the grouping separators along with the digits. Reka\n// submits the model value itself through a hidden input it renders from the\n// root's own `name`, so that is where the row's name goes. Everything else in\n// the bag — the id, the merged description, `aria-required`, `aria-invalid` —\n// belongs on the `role=\"spinbutton\"` node, which is that input.\nconst inputFieldAttrs = computed(() => {\n  // Removed from a copy rather than listed positively, so a key added to the\n  // resolved bag later reaches this input without anyone remembering to come\n  // back here.\n  const aria: Record<string, unknown> = { ...field.attrs };\n  delete aria.name;\n  return aria;\n});\n\n// `optional()` drops the absent bounds and an absent name rather than\n// forwarding `undefined`, which Reka would read as \"a bound that is undefined\"\n// rather than \"no bound\" — and, for the name, would have it render a hidden\n// form input for a field nothing is submitting.\nconst rootProps = computed(() =>\n  optional({\n    modelValue: lastValue.value,\n    min: props.min,\n    max: props.max,\n    name: field.name,\n  }),\n);\n\nfunction clampValue(value: number): number {\n  const step = props.step || 1;\n  const stepped = Math.round(value / step) * step;\n  const withMin = props.min !== undefined ? Math.max(props.min, stepped) : stepped;\n  return props.max !== undefined ? Math.min(props.max, withMin) : withMin;\n}\n\n// The single source of truth for \"the last value we know about\", updated the\n// moment it changes — never re-derived from `props.modelValue` at commit time,\n// because that prop only reflects a new value after the host's v-model\n// round-trip re-renders us, which is a tick later than the blur or keydown\n// being handled.\n//\n// It is also what the Reka root binds as its own `model-value`, rather than\n// `props.modelValue`. Given a defined model value Reka runs fully controlled:\n// its increment reads back through that prop, so a host that correctly\n// withholds transient echoes until commit would freeze every arrow tick at\n// start + 1 and freeze the readout at the gesture's start value. Feeding it\n// `lastValue` keeps the ticks accumulating and the readout live inside a\n// gesture, while the host still sees nothing but transient emits until the\n// boundary.\nconst lastValue = ref(props.modelValue);\n\n// The value the host last acknowledged. `commit` only fires when `lastValue`\n// differs from it, so overlapping boundaries (Enter then blur, drag release\n// then blur) and no-edit focus passes (Tab in, Tab out) produce no extra\n// checkpoints.\nconst lastCommittedValue = ref(props.modelValue);\n\n// True while an uncommitted edit is in flight. An external prop change\n// re-baselines `lastCommittedValue` only when nothing is pending — otherwise\n// the host echoing our own transient emits back down would make the pending\n// edit look already committed and swallow its `commit`.\nlet editPending = false;\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    lastValue.value = value;\n    if (!editPending) lastCommittedValue.value = value;\n  },\n);\n\nfunction onUpdate(value: number | undefined) {\n  // Reka clears its model to `undefined` when the text in the field does not\n  // parse — an emptied field, most reachably. The contract here is a number,\n  // so the field falls back to its own floor instead of forwarding a hole,\n  // which is also what Reka itself does when a stepper is pressed on\n  // unparseable text.\n  const next = value ?? props.min ?? 0;\n  editPending = true;\n  lastValue.value = next;\n  emit(\"update:modelValue\", next);\n}\n\nfunction commitLastValue() {\n  // The boundary ends the edit session even when the value ended up back where\n  // it started — a drag that returned to its origin still ends the gesture.\n  editPending = false;\n  if (lastValue.value === lastCommittedValue.value) return;\n  lastCommittedValue.value = lastValue.value;\n  emit(\"commit\", lastValue.value ?? props.min ?? 0);\n}\n\n// Shift = ×10. Reka's own arrow handling is bound on the input and ignores\n// `shiftKey`, so this intercepts in the capture phase — strictly before the\n// event reaches the input — and fully replaces the default ×1 tick for this\n// one case. Letting both run would double-step.\nfunction onKeydownCapture(event: KeyboardEvent) {\n  // Read-only closes this path as firmly as disabled does. Reka's own arrow\n  // handling already bails on `readonly`, and this override replaces it — so\n  // without the guard Shift+Arrow would be the one way to edit a field that\n  // says it cannot be edited.\n  if (field.disabled || field.readonly) return;\n  if (!event.shiftKey || (event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\")) return;\n  event.preventDefault();\n  event.stopPropagation();\n  const tick = (props.step || 1) * 10;\n  const current = lastValue.value ?? props.min ?? 0;\n  onUpdate(clampValue(event.key === \"ArrowUp\" ? current + tick : current - tick));\n}\n\n// Bubble phase, not capture: by the time this fires, the input's own Enter\n// handling has already applied the typed text, because bubbling visits the\n// target before its ancestors.\nfunction onKeydownCommit(event: KeyboardEvent) {\n  if (event.key !== \"Enter\") return;\n  commitLastValue();\n}\n\n// A held arrow key is one gesture, exactly like a pointer drag: every keydown,\n// including the operating system's auto-repeats, only ticks the transient\n// value, and the keyup ends the gesture and commits the summed delta once. A\n// single tap is a keydown plus a keyup, so it still commits once.\nfunction onKeyupCommit(event: KeyboardEvent) {\n  if (event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") return;\n  commitLastValue();\n}\n\n// `focusout` bubbles where `blur` does not, so this reliably runs after the\n// input's own blur handling — but it only commits once focus has actually left\n// the field, not when it shifts internally to the hover-revealed stepper.\nfunction onFocusOut(event: FocusEvent) {\n  const root = event.currentTarget as HTMLElement;\n  if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;\n  commitLastValue();\n}\n\n// Horizontal scrub. A plain click must still place the caret for typing, so\n// the gesture does not take over until the pointer has moved past a small\n// threshold.\nconst DRAG_THRESHOLD_PX = 3;\nconst PIXELS_PER_STEP = 4;\n\n// Set while a drag's window listeners are attached, so unmounting mid-drag\n// detaches them instead of leaking handlers onto `window`.\nlet removeDragListeners: (() => void) | undefined;\nonUnmounted(() => removeDragListeners?.());\n\nfunction onPointerDown(event: PointerEvent) {\n  // A read-only field still places the caret and still selects text, which is\n  // the whole point of it — it simply never starts a scrub.\n  if (field.disabled || field.readonly || event.button !== 0) return;\n  // Disarm before arming: a second concurrent pointerdown used to overwrite\n  // `removeDragListeners` instead of running it, so the first pointer's\n  // release committed this half-finished scrub and its move handler stayed on\n  // the window ticking values with no pointer anywhere near the field.\n  removeDragListeners?.();\n  const startX = event.clientX;\n  const startValue = lastValue.value ?? props.min ?? 0;\n  const step = props.step || 1;\n  let dragging = false;\n\n  function onPointerMove(moveEvent: PointerEvent) {\n    const deltaX = moveEvent.clientX - startX;\n    if (!dragging) {\n      if (Math.abs(deltaX) < DRAG_THRESHOLD_PX) return;\n      dragging = true;\n      window.getSelection()?.removeAllRanges();\n    }\n    moveEvent.preventDefault();\n    const deltaSteps = Math.round(deltaX / PIXELS_PER_STEP);\n    const next = clampValue(startValue + deltaSteps * step);\n    if (next !== lastValue.value) onUpdate(next);\n  }\n\n  function onPointerUp() {\n    removeDragListeners?.();\n    if (dragging) commitLastValue();\n  }\n\n  // Bail-out (Escape mid-scrub, or a browser-issued pointercancel): the\n  // gesture is discarded. Nothing commits, and one last transient update\n  // carrying the start value lets the host restore the pre-drag preview.\n  function abortDrag() {\n    removeDragListeners?.();\n    if (!dragging) return;\n    if (lastValue.value !== startValue) onUpdate(startValue);\n    editPending = false;\n  }\n\n  function onDragKeydown(keyEvent: KeyboardEvent) {\n    if (keyEvent.key !== \"Escape\" || !dragging) return;\n    keyEvent.preventDefault();\n    keyEvent.stopPropagation();\n    abortDrag();\n  }\n\n  window.addEventListener(\"pointermove\", onPointerMove);\n  window.addEventListener(\"pointerup\", onPointerUp);\n  window.addEventListener(\"pointercancel\", abortDrag);\n  window.addEventListener(\"keydown\", onDragKeydown, true);\n  removeDragListeners = () => {\n    window.removeEventListener(\"pointermove\", onPointerMove);\n    window.removeEventListener(\"pointerup\", onPointerUp);\n    window.removeEventListener(\"pointercancel\", abortDrag);\n    window.removeEventListener(\"keydown\", onDragKeydown, true);\n    removeDragListeners = undefined;\n  };\n}\n</script>\n\n<template>\n  <NumberFieldRoot\n    ref=\"root\"\n    v-bind=\"rootProps\"\n    :step=\"step\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    :aria-disabled=\"field.disabled || undefined\"\n    :data-invalid=\"field.invalid || undefined\"\n    :class=\"\n      cn(\n        'group relative inline-flex h-9 w-full items-center rounded-md border border-input bg-background',\n        'transition-[color,background-color,box-shadow] duration-fast ease-out',\n        // Rim-lit at rest; the ring blooms on focus.\n        'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n        !field.invalid && 'focus-within:shadow-halo',\n        // Three resting appearances, three channels — the same treatment\n        // TextField carries at length. Read-only and disabled used to share one\n        // fill and part only on the text colour, which is a distinction made in\n        // hue alone; the fill and the border weight now part them twice more.\n        //\n        // Read-only keeps its focus ring and its full-strength number: a\n        // read-only value is on show, not an unavailable control. The fill lifts\n        // to `subtle`, the rim stays `input` because the field's reach has not\n        // changed, and Reka's native `readonly` on the input carries the state\n        // to assistive tech, so nothing here rests on colour.\n        field.readonly && 'bg-subtle',\n        // Unavailable is a *colour* and a *weight*, never an opacity.\n        // `opacity-50` on this box faded the value inside it:\n        // `--color-foreground` measures 14.09:1 on the resting fill and 2.99:1\n        // once composited at half alpha, and the unit suffix beside it — muted,\n        // and smaller — fell to 2.02:1. The fill drains a step past read-only\n        // and the rim slackens to `border`; the input below takes the matching\n        // text colour, which has to be declared there rather than inherited from\n        // here because the input names `text-foreground` itself.\n        field.disabled && 'border-border bg-muted',\n        // Last of the rules that name a border colour: `cn()` resolves one by\n        // whichever class it saw last, so a field that is both in error and\n        // unavailable would otherwise lose its destructive rim to the disabled\n        // one.\n        field.invalid && 'border-destructive focus-within:outline-destructive',\n        'data-[disabled]:cursor-not-allowed',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"onUpdate\"\n    @keydown.capture=\"onKeydownCapture\"\n    @keydown=\"onKeydownCommit\"\n    @keyup=\"onKeyupCommit\"\n    @focusout=\"onFocusOut\"\n    @pointerdown=\"onPointerDown\"\n  >\n    <!-- `aria-roledescription` is written before the `v-bind` rather than after\n         it, which is the opposite of the field bag below and deliberate: it is\n         replacing Reka's own literal, not a caller's, so a caller who passes\n         the attribute directly should still beat it. Reka's is merged inside\n         its render function and Vue applies everything from here afterwards,\n         so both orders defeat Reka and only this one leaves the caller a way\n         past Loom. -->\n    <NumberFieldInput\n      :aria-roledescription=\"text.roleDescription\"\n      v-bind=\"{ ...inputAttrs, ...inputFieldAttrs }\"\n      :class=\"\n        cn(\n          'tabular h-full w-full flex-1 rounded-md bg-transparent px-3 text-sm text-foreground outline-none',\n          unit ? 'pr-9' : 'pr-3',\n          // 4.68:1 against the drained fill the root takes, and two steps back\n          // from the black an editable value keeps — the state stays plain to\n          // see and the number stays plain to read. `cn()` is what makes the\n          // pair work: it drops the `text-foreground` above rather than leaving\n          // two colours for the stylesheet to order.\n          field.disabled && 'cursor-not-allowed text-muted-foreground',\n          // The scrub cursor is a promise the field makes about the gesture it\n          // takes. Read-only takes no gesture, so it must not make the promise\n          // — the caret cursor is the honest one for a value you may select\n          // and copy but not change.\n          !field.disabled && !field.readonly && 'cursor-ew-resize',\n        )\n      \"\n    />\n    <!-- The unit is presentation, so it is hidden from assistive technology\n         and it clears out on hover to make room for the stepper. -->\n    <span\n      v-if=\"unit\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute right-2 text-xs text-muted-foreground transition-opacity duration-fast group-hover:opacity-0\"\n    >\n      {{ unit }}\n    </span>\n    <!-- The stepper is hidden until hover: a column of these is read as a\n         column of numbers, and a permanent pair of chevrons on every row turns\n         that into a column of controls.\n\n         It is not rendered at all on a read-only field. Reka's own\n         `handleChangingValue` bails on `readonly` *after* focusing the input,\n         so a rendered stepper would be two named buttons that a pointer or a\n         screen reader can still reach and press, and that answer by moving\n         focus and changing nothing. Absent is the honest state. -->\n    <div\n      v-if=\"!field.readonly\"\n      class=\"absolute right-1 flex flex-col opacity-0 transition-opacity duration-fast group-hover:opacity-100\"\n    >\n      <!-- Both `:aria-label`s replace one Reka writes in English inside its own\n           render function — \"Increase\" and \"Decrease\". They reach the DOM node\n           as fallthrough attributes, which Vue merges last, so each is a\n           replacement rather than a second name. Removing one does not fall\n           back to nothing; it falls back to Reka's English.\n\n           The two keep `data-[disabled]:opacity-50` where the box around them\n           gave it up, and the difference is that each holds a chevron and\n           nothing else. Fading a glyph costs a reader nothing; their names are\n           in `aria-label`, not in dimmed text. -->\n      <NumberFieldIncrement\n        :aria-label=\"text.increment\"\n        class=\"flex min-h-6 min-w-6 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <!-- Stroke lives on the 24 grid and scales with size, so the inherited\n             1.5 would render 0.75 device pixels at this 12px box and all but\n             disappear. 2.5 restores the optical weight. -->\n        <ChevronUp class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </NumberFieldIncrement>\n      <NumberFieldDecrement\n        :aria-label=\"text.decrement\"\n        class=\"flex min-h-6 min-w-6 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <ChevronDown class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </NumberFieldDecrement>\n    </div>\n  </NumberFieldRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/number-field/src/NumberField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/number-field/src/NumberField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { NumberFieldLabels } from \"@ecoma-io/loom-labels\";\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 NUMBER_FIELD_LABELS: NumberFieldLabels = {\n  increment: \"Increase value\",\n  decrement: \"Decrease value\",\n  roleDescription: \"Number field\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, useTemplateRef, watch } from \"vue\";\nimport {\n  NumberFieldRoot,\n  NumberFieldInput,\n  NumberFieldIncrement,\n  NumberFieldDecrement,\n} from \"reka-ui\";\nimport { ChevronUp, ChevronDown } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useAncestorDisabled } from \"@ecoma-io/loom-labels\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * NumberField — a constrained number input you can also *scrub*: drag\n * horizontally anywhere on the field and the value runs with the pointer, the\n * gesture professional editors trained everyone to expect on a numeric row.\n *\n * Built on Reka UI's NumberField, which supplies the spinbutton semantics and\n * the typed-value parsing. Two things are added here because Reka has no\n * equivalent: the scrub-drag gesture, and a Shift multiplier on the arrow\n * keys.\n *\n * The event contract is what makes it usable behind an undo stack.\n * `update:modelValue` is transient — it fires on every drag tick, every arrow\n * tick and every applied edit, so a host can paint a live preview. `commit`\n * fires once per gesture boundary — drag release, Enter, or focus leaving the\n * field. One long drag is therefore one undo checkpoint rather than one per\n * pixel, and a gesture that ends where it started produces none at all.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id of\n * its hint or error line, `required`, `invalid`, `disabled`, `readonly` and the\n * name the value is submitted under all arrive through `useFieldControl()`, so\n * `<Field label=\"Rotation\" error=\"…\"><NumberField … /></Field>` needs no\n * attributes at the call site. Every prop below still wins over the row when it\n * is set, in both directions — which is why the three booleans default to\n * `undefined` rather than `false`.\n *\n * `readonly` and `disabled` are different states here for the same reason they\n * are on a text input, and a number is the case that makes it obvious: a rate,\n * a computed total or a locked coordinate is a value on show. It stays a Tab\n * stop, stays in the form's submitted data, and takes a lifted fill with the\n * number at full strength, one step short of the disabled state's drained fill,\n * muted number and slackened rim — and every path that would change it is\n * closed, the stepper included, because a control offering a gesture that does\n * nothing is worse than one that offers none.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current value. Transient edits are reported before it changes. */\n    modelValue?: number;\n    /** Lower bound. Every path — typing, arrows, scrub — is clamped to it. */\n    min?: number;\n    /** Upper bound, clamped the same way. It wins over step alignment. */\n    max?: number;\n    /** The granularity of one arrow tick or one scrub step. Shift multiplies it by ten. */\n    step?: number;\n    /** A presentational suffix such as `px` or `deg`. It is never part of the value. */\n    unit?: string;\n    /** Unavailable: dims the field and refuses every edit path. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the value without allowing an edit — typing, arrows, stepper and scrub all closed — while staying focusable and still submitted. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `NumberFieldLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the per-instance correction, not the place to localise an\n     * application: the case it exists for is `roleDescription`, where a field\n     * holding a rotation or a price is more useful named as that than as a\n     * number field.\n     */\n    labels?: LabelOverrides<NumberFieldLabels>;\n  }>(),\n  {\n    step: 1,\n    // Not `false`, for any of the three. `false` is a caller saying \"this field\n    // is fine / enabled / editable even though its row is not\"; absent is a\n    // caller saying nothing, and only `undefined` survives to mean that past\n    // Vue's absent-Boolean-casts-to-false rule — see TextField.vue, which\n    // carries the full reasoning.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** Transient: every drag tick, arrow tick, or applied edit. Not a checkpoint. */\n  \"update:modelValue\": [value: number];\n  /** Committed: once per gesture boundary — drag release, Enter, or focus leaving. */\n  commit: [value: number];\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(\"numberField\", NUMBER_FIELD_LABELS, () => props.labels);\n\n// The rendered root is a non-focusable `role=\"group\"` wrapper, so fallthrough\n// attributes that describe the *control* — `aria-labelledby`, `data-testid` —\n// belong on the spinbutton inside it, not on the group. `class` is the one\n// exception and goes the other way: a caller's sizing or layout class has to\n// land on the element that participates in the parent's layout, merged through\n// `cn()` so a caller's `w-24` actually beats the root's own `w-full` instead of\n// losing to whichever utility Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: inputAttrs } = useSplitAttrs();\n\n/**\n * The scrub is the reason this control cannot be left to the platform.\n *\n * `<fieldset disabled>` makes the inner `<input>` and the two stepper buttons\n * inert on its own, which covers the keyboard and the two clicks — but the\n * drag-to-change gesture is a `pointerdown` on the **root**, and a `<div>` is\n * not a form control, so nothing native stops it. `onPointerDown` bails on\n * `field.disabled`, and that is exactly the value a disabled fieldset does not\n * reach. Without this, a field inside a disabled group looked unavailable,\n * refused the keyboard, and still changed its number under a drag.\n *\n * Read off the DOM rather than taken from the Field context, which publishes no\n * `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst root = useTemplateRef<{ $el?: Element }>(\"root\");\nconst groupDisabled = useAncestorDisabled(() => root.value?.$el);\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are read off `attrs` and handed in as this caller's own\n// values — a caller who sets either still beats the row, and the row's\n// description is merged into theirs rather than replacing it. `name` and\n// `required` are absent from this object because there is no prop to oppose\n// the row with; the row's answer stands unopposed, which is what is wanted.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  // The fieldset beats the prop in both directions, exactly as it does for the\n  // `<input>` inside this very control.\n  disabled: groupDisabled.value ? true : props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n}));\n\n// `name` is the one resolved key that does not travel with the bag, and here\n// it is a defect rather than a nicety: the bag lands on the spinbutton, and\n// what the spinbutton holds is the *formatted* number — `1,234` for 1234. A\n// `name` on it would post the grouping separators along with the digits. Reka\n// submits the model value itself through a hidden input it renders from the\n// root's own `name`, so that is where the row's name goes. Everything else in\n// the bag — the id, the merged description, `aria-required`, `aria-invalid` —\n// belongs on the `role=\"spinbutton\"` node, which is that input.\nconst inputFieldAttrs = computed(() => {\n  // Removed from a copy rather than listed positively, so a key added to the\n  // resolved bag later reaches this input without anyone remembering to come\n  // back here.\n  const aria: Record<string, unknown> = { ...field.attrs };\n  delete aria.name;\n  return aria;\n});\n\n// `optional()` drops the absent bounds and an absent name rather than\n// forwarding `undefined`, which Reka would read as \"a bound that is undefined\"\n// rather than \"no bound\" — and, for the name, would have it render a hidden\n// form input for a field nothing is submitting.\nconst rootProps = computed(() =>\n  optional({\n    modelValue: lastValue.value,\n    min: props.min,\n    max: props.max,\n    name: field.name,\n  }),\n);\n\nfunction clampValue(value: number): number {\n  const step = props.step || 1;\n  const stepped = Math.round(value / step) * step;\n  const withMin = props.min !== undefined ? Math.max(props.min, stepped) : stepped;\n  return props.max !== undefined ? Math.min(props.max, withMin) : withMin;\n}\n\n// The single source of truth for \"the last value we know about\", updated the\n// moment it changes — never re-derived from `props.modelValue` at commit time,\n// because that prop only reflects a new value after the host's v-model\n// round-trip re-renders us, which is a tick later than the blur or keydown\n// being handled.\n//\n// It is also what the Reka root binds as its own `model-value`, rather than\n// `props.modelValue`. Given a defined model value Reka runs fully controlled:\n// its increment reads back through that prop, so a host that correctly\n// withholds transient echoes until commit would freeze every arrow tick at\n// start + 1 and freeze the readout at the gesture's start value. Feeding it\n// `lastValue` keeps the ticks accumulating and the readout live inside a\n// gesture, while the host still sees nothing but transient emits until the\n// boundary.\nconst lastValue = ref(props.modelValue);\n\n// The value the host last acknowledged. `commit` only fires when `lastValue`\n// differs from it, so overlapping boundaries (Enter then blur, drag release\n// then blur) and no-edit focus passes (Tab in, Tab out) produce no extra\n// checkpoints.\nconst lastCommittedValue = ref(props.modelValue);\n\n// True while an uncommitted edit is in flight. An external prop change\n// re-baselines `lastCommittedValue` only when nothing is pending — otherwise\n// the host echoing our own transient emits back down would make the pending\n// edit look already committed and swallow its `commit`.\nlet editPending = false;\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    lastValue.value = value;\n    if (!editPending) lastCommittedValue.value = value;\n  },\n);\n\nfunction onUpdate(value: number | undefined) {\n  // Reka clears its model to `undefined` when the text in the field does not\n  // parse — an emptied field, most reachably. The contract here is a number,\n  // so the field falls back to its own floor instead of forwarding a hole,\n  // which is also what Reka itself does when a stepper is pressed on\n  // unparseable text.\n  const next = value ?? props.min ?? 0;\n  editPending = true;\n  lastValue.value = next;\n  emit(\"update:modelValue\", next);\n}\n\nfunction commitLastValue() {\n  // The boundary ends the edit session even when the value ended up back where\n  // it started — a drag that returned to its origin still ends the gesture.\n  editPending = false;\n  if (lastValue.value === lastCommittedValue.value) return;\n  lastCommittedValue.value = lastValue.value;\n  emit(\"commit\", lastValue.value ?? props.min ?? 0);\n}\n\n// Shift = ×10. Reka's own arrow handling is bound on the input and ignores\n// `shiftKey`, so this intercepts in the capture phase — strictly before the\n// event reaches the input — and fully replaces the default ×1 tick for this\n// one case. Letting both run would double-step.\nfunction onKeydownCapture(event: KeyboardEvent) {\n  // Read-only closes this path as firmly as disabled does. Reka's own arrow\n  // handling already bails on `readonly`, and this override replaces it — so\n  // without the guard Shift+Arrow would be the one way to edit a field that\n  // says it cannot be edited.\n  if (field.disabled || field.readonly) return;\n  if (!event.shiftKey || (event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\")) return;\n  event.preventDefault();\n  event.stopPropagation();\n  const tick = (props.step || 1) * 10;\n  const current = lastValue.value ?? props.min ?? 0;\n  onUpdate(clampValue(event.key === \"ArrowUp\" ? current + tick : current - tick));\n}\n\n// Bubble phase, not capture: by the time this fires, the input's own Enter\n// handling has already applied the typed text, because bubbling visits the\n// target before its ancestors.\nfunction onKeydownCommit(event: KeyboardEvent) {\n  if (event.key !== \"Enter\") return;\n  commitLastValue();\n}\n\n// A held arrow key is one gesture, exactly like a pointer drag: every keydown,\n// including the operating system's auto-repeats, only ticks the transient\n// value, and the keyup ends the gesture and commits the summed delta once. A\n// single tap is a keydown plus a keyup, so it still commits once.\nfunction onKeyupCommit(event: KeyboardEvent) {\n  if (event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") return;\n  commitLastValue();\n}\n\n// `focusout` bubbles where `blur` does not, so this reliably runs after the\n// input's own blur handling — but it only commits once focus has actually left\n// the field, not when it shifts internally to the hover-revealed stepper.\nfunction onFocusOut(event: FocusEvent) {\n  const root = event.currentTarget as HTMLElement;\n  if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;\n  commitLastValue();\n}\n\n// Horizontal scrub. A plain click must still place the caret for typing, so\n// the gesture does not take over until the pointer has moved past a small\n// threshold.\nconst DRAG_THRESHOLD_PX = 3;\nconst PIXELS_PER_STEP = 4;\n\n// Set while a drag's window listeners are attached, so unmounting mid-drag\n// detaches them instead of leaking handlers onto `window`.\nlet removeDragListeners: (() => void) | undefined;\nonUnmounted(() => removeDragListeners?.());\n\nfunction onPointerDown(event: PointerEvent) {\n  // A read-only field still places the caret and still selects text, which is\n  // the whole point of it — it simply never starts a scrub.\n  if (field.disabled || field.readonly || event.button !== 0) return;\n  // Disarm before arming: a second concurrent pointerdown used to overwrite\n  // `removeDragListeners` instead of running it, so the first pointer's\n  // release committed this half-finished scrub and its move handler stayed on\n  // the window ticking values with no pointer anywhere near the field.\n  removeDragListeners?.();\n  const startX = event.clientX;\n  const startValue = lastValue.value ?? props.min ?? 0;\n  const step = props.step || 1;\n  let dragging = false;\n\n  function onPointerMove(moveEvent: PointerEvent) {\n    const deltaX = moveEvent.clientX - startX;\n    if (!dragging) {\n      if (Math.abs(deltaX) < DRAG_THRESHOLD_PX) return;\n      dragging = true;\n      window.getSelection()?.removeAllRanges();\n    }\n    moveEvent.preventDefault();\n    const deltaSteps = Math.round(deltaX / PIXELS_PER_STEP);\n    const next = clampValue(startValue + deltaSteps * step);\n    if (next !== lastValue.value) onUpdate(next);\n  }\n\n  function onPointerUp() {\n    removeDragListeners?.();\n    if (dragging) commitLastValue();\n  }\n\n  // Bail-out (Escape mid-scrub, or a browser-issued pointercancel): the\n  // gesture is discarded. Nothing commits, and one last transient update\n  // carrying the start value lets the host restore the pre-drag preview.\n  function abortDrag() {\n    removeDragListeners?.();\n    if (!dragging) return;\n    if (lastValue.value !== startValue) onUpdate(startValue);\n    editPending = false;\n  }\n\n  function onDragKeydown(keyEvent: KeyboardEvent) {\n    if (keyEvent.key !== \"Escape\" || !dragging) return;\n    keyEvent.preventDefault();\n    keyEvent.stopPropagation();\n    abortDrag();\n  }\n\n  window.addEventListener(\"pointermove\", onPointerMove);\n  window.addEventListener(\"pointerup\", onPointerUp);\n  window.addEventListener(\"pointercancel\", abortDrag);\n  window.addEventListener(\"keydown\", onDragKeydown, true);\n  removeDragListeners = () => {\n    window.removeEventListener(\"pointermove\", onPointerMove);\n    window.removeEventListener(\"pointerup\", onPointerUp);\n    window.removeEventListener(\"pointercancel\", abortDrag);\n    window.removeEventListener(\"keydown\", onDragKeydown, true);\n    removeDragListeners = undefined;\n  };\n}\n</script>\n\n<template>\n  <NumberFieldRoot\n    ref=\"root\"\n    v-bind=\"rootProps\"\n    :step=\"step\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    :aria-disabled=\"field.disabled || undefined\"\n    :data-invalid=\"field.invalid || undefined\"\n    :class=\"\n      cn(\n        'group relative inline-flex h-9 w-full items-center rounded-md border border-input bg-background',\n        'transition-[color,background-color,box-shadow] duration-fast ease-out',\n        // Rim-lit at rest; the ring blooms on focus.\n        'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n        !field.invalid && 'focus-within:shadow-halo',\n        // Three resting appearances, three channels — the same treatment\n        // TextField carries at length. Read-only and disabled used to share one\n        // fill and part only on the text colour, which is a distinction made in\n        // hue alone; the fill and the border weight now part them twice more.\n        //\n        // Read-only keeps its focus ring and its full-strength number: a\n        // read-only value is on show, not an unavailable control. The fill lifts\n        // to `subtle`, the rim stays `input` because the field's reach has not\n        // changed, and Reka's native `readonly` on the input carries the state\n        // to assistive tech, so nothing here rests on colour.\n        field.readonly && 'bg-subtle',\n        // Unavailable is a *colour* and a *weight*, never an opacity.\n        // `opacity-50` on this box faded the value inside it:\n        // `--color-foreground` measures 14.09:1 on the resting fill and 2.99:1\n        // once composited at half alpha, and the unit suffix beside it — muted,\n        // and smaller — fell to 2.02:1. The fill drains a step past read-only\n        // and the rim slackens to `border`; the input below takes the matching\n        // text colour, which has to be declared there rather than inherited from\n        // here because the input names `text-foreground` itself.\n        field.disabled && 'border-border bg-muted',\n        // Last of the rules that name a border colour: `cn()` resolves one by\n        // whichever class it saw last, so a field that is both in error and\n        // unavailable would otherwise lose its destructive rim to the disabled\n        // one.\n        field.invalid && 'border-destructive focus-within:outline-destructive',\n        'data-[disabled]:cursor-not-allowed',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"onUpdate\"\n    @keydown.capture=\"onKeydownCapture\"\n    @keydown=\"onKeydownCommit\"\n    @keyup=\"onKeyupCommit\"\n    @focusout=\"onFocusOut\"\n    @pointerdown=\"onPointerDown\"\n  >\n    <!-- `aria-roledescription` is written before the `v-bind` rather than after\n         it, which is the opposite of the field bag below and deliberate: it is\n         replacing Reka's own literal, not a caller's, so a caller who passes\n         the attribute directly should still beat it. Reka's is merged inside\n         its render function and Vue applies everything from here afterwards,\n         so both orders defeat Reka and only this one leaves the caller a way\n         past Loom. -->\n    <NumberFieldInput\n      :aria-roledescription=\"text.roleDescription\"\n      v-bind=\"{ ...inputAttrs, ...inputFieldAttrs }\"\n      :class=\"\n        cn(\n          'tabular h-full w-full flex-1 rounded-md bg-transparent px-3 text-sm text-foreground outline-none',\n          unit ? 'pr-9' : 'pr-3',\n          // 4.68:1 against the drained fill the root takes, and two steps back\n          // from the black an editable value keeps — the state stays plain to\n          // see and the number stays plain to read. `cn()` is what makes the\n          // pair work: it drops the `text-foreground` above rather than leaving\n          // two colours for the stylesheet to order.\n          field.disabled && 'cursor-not-allowed text-muted-foreground',\n          // The scrub cursor is a promise the field makes about the gesture it\n          // takes. Read-only takes no gesture, so it must not make the promise\n          // — the caret cursor is the honest one for a value you may select\n          // and copy but not change.\n          !field.disabled && !field.readonly && 'cursor-ew-resize',\n        )\n      \"\n    />\n    <!-- The unit is presentation, so it is hidden from assistive technology\n         and it clears out on hover to make room for the stepper. -->\n    <span\n      v-if=\"unit\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute right-2 text-xs text-muted-foreground transition-opacity duration-fast group-hover:opacity-0\"\n    >\n      {{ unit }}\n    </span>\n    <!-- The stepper is hidden until hover: a column of these is read as a\n         column of numbers, and a permanent pair of chevrons on every row turns\n         that into a column of controls.\n\n         It is not rendered at all on a read-only field. Reka's own\n         `handleChangingValue` bails on `readonly` *after* focusing the input,\n         so a rendered stepper would be two named buttons that a pointer or a\n         screen reader can still reach and press, and that answer by moving\n         focus and changing nothing. Absent is the honest state. -->\n    <div\n      v-if=\"!field.readonly\"\n      class=\"absolute right-1 flex flex-col opacity-0 transition-opacity duration-fast group-hover:opacity-100\"\n    >\n      <!-- Both `:aria-label`s replace one Reka writes in English inside its own\n           render function — \"Increase\" and \"Decrease\". They reach the DOM node\n           as fallthrough attributes, which Vue merges last, so each is a\n           replacement rather than a second name. Removing one does not fall\n           back to nothing; it falls back to Reka's English.\n\n           The two keep `data-[disabled]:opacity-50` where the box around them\n           gave it up, and the difference is that each holds a chevron and\n           nothing else. Fading a glyph costs a reader nothing; their names are\n           in `aria-label`, not in dimmed text. -->\n      <NumberFieldIncrement\n        :aria-label=\"text.increment\"\n        class=\"flex min-h-6 min-w-6 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <!-- Stroke lives on the 24 grid and scales with size, so the inherited\n             1.5 would render 0.75 device pixels at this 12px box and all but\n             disappear. 2.5 restores the optical weight. -->\n        <ChevronUp class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </NumberFieldIncrement>\n      <NumberFieldDecrement\n        :aria-label=\"text.decrement\"\n        class=\"flex min-h-6 min-w-6 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <ChevronDown class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </NumberFieldDecrement>\n    </div>\n  </NumberFieldRoot>\n</template>\n"],"mappings":"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"}