@ecoma-io/loom 0.4.0 → 0.6.0

package/dist/primitives/toggle-group/src/ToggleGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,111 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useFieldControl } from "../../../labels/src/field-context.js";
+import { useAncestorDisabled } from "../../../labels/src/ancestor-disabled.js";
+import "../../../labels/src/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, withCtx } from "vue";
+import { ToggleGroupItem, ToggleGroupRoot } from "reka-ui";
+//#region packages/primitives/toggle-group/src/ToggleGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "group-data-[disabled]/item:text-muted-foreground" };
+var ToggleGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ToggleGroup",
+	props: {
+		modelValue: {},
+		items: {},
+		type: { default: "single" },
+		variant: { default: "secondary" },
+		size: { default: "md" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { attrs, rest: groupAttrs } = useSplitAttrs();
+		/**
+		* The buttons are real `<button>`s, so a `<fieldset disabled>` above this
+		* group already makes each of them inert — but Reka's roving focus is what
+		* decides where Tab lands, and it is driven by the group's own `disabled`,
+		* which the fieldset never reaches. Its own `disabled` prop sets that to
+		* `-1`, exactly as SegmentedControl does.
+		*
+		* Read off the DOM rather than taken from the Field context, which publishes
+		* no `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.
+		*/
+		const root = useTemplateRef("root");
+		const groupDisabled = useAncestorDisabled(() => root.value?.$el);
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			disabled: groupDisabled.value ? true : props.disabled
+		}));
+		/**
+		* Reka's own model is `AcceptableValue` for `"single"` and `AcceptableValue[]`
+		* for `"multiple"`, and its typing has no `undefined` rung under
+		* `exactOptionalPropertyTypes`. The seam's contract adds `null` for "nothing
+		* pressed" and keeps a `null`/absent model from reaching Reka as a stray
+		* non-string: a single group with nothing pressed shows Reka `""`, which is
+		* no item's value — and `data-state="off"` on every button — in both engines.
+		*/
+		const rootValue = computed(() => {
+			if (props.type === "multiple") return Array.isArray(props.modelValue) ? props.modelValue : [];
+			return typeof props.modelValue === "string" ? props.modelValue : "";
+		});
+		function onUpdate(value) {
+			if (props.type === "multiple") emit("update:modelValue", Array.isArray(value) ? value : []);
+			else emit("update:modelValue", typeof value === "string" && value !== "" ? value : null);
+		}
+		const iconClass = computed(() => props.size === "sm" ? "size-3.5" : "size-4");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ToggleGroupRoot), mergeProps({
+				ref_key: "root",
+				ref: root,
+				type: __props.type,
+				"model-value": rootValue.value,
+				orientation: "horizontal",
+				disabled: unref(field).disabled
+			}, {
+				...unref(groupAttrs),
+				...unref(field).attrs
+			}, {
+				class: unref(cn)("inline-flex items-center gap-0.5 rounded-md p-0.5", __props.variant === "secondary" && "border border-input bg-muted", __props.variant === "outline" && "border border-input bg-background", __props.variant === "ghost" && "bg-transparent", unref(field).disabled && __props.variant !== "ghost" && "border-border cursor-not-allowed", unref(attrs).class),
+				"onUpdate:modelValue": onUpdate
+			}), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (opt) => {
+					return openBlock(), createBlock(unref(ToggleGroupItem), mergeProps({
+						key: opt.value,
+						value: opt.value,
+						disabled: opt.disabled ?? false
+					}, { ref_for: true }, unref(optional)({ "data-testid": opt.testId }), { class: unref(cn)("group/item relative inline-flex items-center justify-center gap-1.5 rounded-sm text-muted-foreground", __props.size === "sm" && "min-h-6 min-w-6 px-1.5 py-px text-micro", __props.size === "md" && "min-h-8 px-3 py-1 text-sm", __props.size === "lg" && "min-h-10 px-4 py-1.5", "data-[state=off]:hover:bg-subtle", "data-[state=on]:bg-primary data-[state=on]:font-medium data-[state=on]:text-primary-foreground data-[state=on]:shadow-sm", "active:scale-press", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "disabled:pointer-events-none data-[disabled]:bg-background") }), {
+						default: withCtx(() => [opt.icon ? (openBlock(), createBlock(resolveDynamicComponent(opt.icon), {
+							key: 0,
+							"aria-hidden": "true",
+							class: normalizeClass(unref(cn)("shrink-0", iconClass.value))
+						}, null, 8, ["class"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_1, toDisplayString(opt.label), 1)]),
+						_: 2
+					}, 1040, [
+						"value",
+						"disabled",
+						"class"
+					]);
+				}), 128))]),
+				_: 1
+			}, 16, [
+				"type",
+				"model-value",
+				"disabled",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { ToggleGroup_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ToggleGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/toggle-group/src/ToggleGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/toggle-group/src/ToggleGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Component } from \"vue\";\n\n/** One toggle inside a {@link ToggleGroup}. */\nexport interface ToggleGroupItem {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered inside the button. */\n  label: string;\n  /** Optional glyph rendered before the label; hidden from the tree, the label is the name. */\n  icon?: Component;\n  /** Disables this button alone, leaving its neighbours toggleable. */\n  disabled?: boolean;\n  /** Forwarded to the button's DOM node — lets hosts keep stable test hooks. */\n  testId?: string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useTemplateRef } from \"vue\";\nimport { ToggleGroupRoot, ToggleGroupItem as RekaToggleGroupItem } from \"reka-ui\";\nimport type { AcceptableValue } from \"reka-ui\";\nimport { useAncestorDisabled, useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { cn, optional, useSplitAttrs } from \"@ecoma-io/loom-core\";\n\n/**\n * ToggleGroup — a set of toggle actions or filters whose pressed state is the\n * value: bold/italic/underline, column filters, metric toggles. Each item is\n * a real `<button aria-pressed>` — deliberately **not** `aria-checked`/radio\n * semantics, which is the whole distinction from\n * [SegmentedControl](../../segmented-control): a segmented control is a value\n * picker where one option is always active, while here zero-or-more buttons\n * can be on at once and the group's `type` says which contract the model\n * follows — `\"single\"` holds one value or `null`, `\"multiple\"` a `string[]`.\n * Built on Reka UI's ToggleGroup: the group is one Tab stop (roving\n * tabindex), Arrow keys move focus between buttons skipping disabled ones —\n * they move *focus only* and never flip a toggle, unlike a radio group where\n * the arrows change the value. Styled with Loom tokens; a pressed button\n * fills with the primary token and takes weight, so the state is carried by\n * `aria-pressed` plus fill plus weight — never colour alone.\n *\n * Inside a [Field](../Field/Field.vue) the row's description, `required` and\n * `invalid` reach the group through `useFieldControl()`, and a\n * `<Fieldset disabled>` above it disables every button.\n *\n * **A row's label does not name this group.** `<label for>` names a labelable\n * element and this renders a `div[role=\"group\"]`, so the row's label resolves\n * to the element and names nobody. Name it with a\n * [Fieldset](../Fieldset/Fieldset.vue)'s real `<legend>`, or with an\n * `aria-label`/`aria-labelledby` of its own — which is what every example\n * already does, because the component carries no label text of its own and\n * therefore no labels prop: the item labels are the caller's content.\n *\n * There is no `readonly`: a toggle that displays a state but cannot change it\n * is a disabled one showing an answer, so a row's `readonly` arrives as\n * nothing at all rather than as that disguise.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The pressed value (`\"single\"`), the pressed values (`\"multiple\"`), or nothing pressed. */\n    modelValue?: string | string[] | null;\n    /** The buttons to render, in order. */\n    items: ToggleGroupItem[];\n    /** `\"single\"` models one value or `null`; `\"multiple\"` a `string[]`. */\n    type?: \"single\" | \"multiple\";\n    /** The track's resting look; a pressed button fills with the primary token in every variant. */\n    variant?: \"secondary\" | \"outline\" | \"ghost\";\n    /** `\"sm\"` is the compressed form for dense chrome — e.g. an editor toolbar. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Disables every button at once, distinct from a single item's own `disabled`. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n  }>(),\n  {\n    // Not `false`: absent has to stay tellable from `false` for a Field above\n    // to disable the group and for `:disabled=\"false\"` to overrule one that\n    // does. Vue casts an absent Boolean prop with no declared default to\n    // `false`, which would leave the context wired and inert.\n    disabled: undefined,\n    type: \"single\",\n    variant: \"secondary\",\n    size: \"md\",\n  },\n);\n\nconst emit = defineEmits<{ \"update:modelValue\": [value: string | null | string[]] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: groupAttrs } = useSplitAttrs();\n\n/**\n * The buttons are real `<button>`s, so a `<fieldset disabled>` above this\n * group already makes each of them inert — but Reka's roving focus is what\n * decides where Tab lands, and it is driven by the group's own `disabled`,\n * which the fieldset never reaches. Its own `disabled` prop sets that to\n * `-1`, exactly as SegmentedControl does.\n *\n * Read off the DOM rather than taken from the Field context, which publishes\n * no `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst root = useTemplateRef<{ $el?: Element }>(\"root\");\nconst groupDisabled = useAncestorDisabled(() => root.value?.$el);\n\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\n  // the buttons themselves.\n  disabled: groupDisabled.value ? true : props.disabled,\n}));\n\n/**\n * Reka's own model is `AcceptableValue` for `\"single\"` and `AcceptableValue[]`\n * for `\"multiple\"`, and its typing has no `undefined` rung under\n * `exactOptionalPropertyTypes`. The seam's contract adds `null` for \"nothing\n * pressed\" and keeps a `null`/absent model from reaching Reka as a stray\n * non-string: a single group with nothing pressed shows Reka `\"\"`, which is\n * no item's value — and `data-state=\"off\"` on every button — in both engines.\n */\nconst rootValue = computed<string | string[]>(() => {\n  if (props.type === \"multiple\") {\n    return Array.isArray(props.modelValue) ? props.modelValue : [];\n  }\n  return typeof props.modelValue === \"string\" ? props.modelValue : \"\";\n});\n\nfunction onUpdate(value: AcceptableValue | AcceptableValue[]) {\n  if (props.type === \"multiple\") {\n    // Every item's value is a caller-provided `string`, so the array Reka\n    // hands back can only hold those strings.\n    emit(\"update:modelValue\", Array.isArray(value) ? (value as string[]) : []);\n  } else {\n    // Reka hands back `undefined` when the pressed button is pressed again —\n    // the seam publishes that as `null`, the model's spelling of \"nothing\".\n    emit(\"update:modelValue\", typeof value === \"string\" && value !== \"\" ? value : null);\n  }\n}\n\nconst iconClass = computed(() => (props.size === \"sm\" ? \"size-3.5\" : \"size-4\"));\n</script>\n\n<template>\n  <ToggleGroupRoot\n    ref=\"root\"\n    :type=\"type\"\n    :model-value=\"rootValue\"\n    orientation=\"horizontal\"\n    :disabled=\"field.disabled\"\n    v-bind=\"{ ...groupAttrs, ...field.attrs }\"\n    :class=\"\n      cn(\n        'inline-flex items-center gap-0.5 rounded-md p-0.5',\n        // The track has three resting looks. `secondary` is SegmentedControl's\n        // own track — a muted well with a rim; `outline` keeps the rim but\n        // sits on the page ground; `ghost` has neither rim nor well and leans\n        // entirely on the buttons.\n        variant === 'secondary' && 'border border-input bg-muted',\n        variant === 'outline' && 'border border-input bg-background',\n        variant === 'ghost' && 'bg-transparent',\n        // The one thing the *track* has left to say when the whole group is\n        // unavailable: the rim slackening from `input` to the lighter\n        // `border` — the well is already spent. A ghost track has no rim to\n        // slacken, so it says it through its buttons alone.\n        field.disabled && variant !== 'ghost' && 'border-border cursor-not-allowed',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"onUpdate\"\n  >\n    <RekaToggleGroupItem\n      v-for=\"opt in items\"\n      :key=\"opt.value\"\n      :value=\"opt.value\"\n      :disabled=\"opt.disabled ?? false\"\n      v-bind=\"optional({ 'data-testid': opt.testId })\"\n      :class=\"\n        cn(\n          // Named, not the bare `group`: this control is dropped into\n          // application chrome, and a bare `group-*` would also answer to any\n          // ancestor a host happened to mark up as one.\n          // `min-h-6`/`min-w-6` are the WCAG 2.5.8 target floors made\n          // explicit in the sm form, whose one-character labels would\n          // otherwise collapse under 24px.\n          'group/item relative inline-flex items-center justify-center gap-1.5 rounded-sm text-muted-foreground',\n          size === 'sm' && 'min-h-6 min-w-6 px-1.5 py-px text-micro',\n          size === 'md' && 'min-h-8 px-3 py-1 text-sm',\n          size === 'lg' && 'min-h-10 px-4 py-1.5',\n          'data-[state=off]:hover:bg-subtle',\n          // The pressed state is fill plus weight plus `aria-pressed` — never\n          // colour alone.\n          'data-[state=on]:bg-primary data-[state=on]:font-medium data-[state=on]:text-primary-foreground data-[state=on]:shadow-sm',\n          'active:scale-press',\n          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n          // No `opacity` here either, for SegmentedControl's reason: the label\n          // is most of the button, and a dim took it to 1.96:1. Unavailability\n          // is a fill instead — the cell drains to the page ground — and the\n          // mute lives on the span, where it beats whatever the button\n          // resolved to.\n          'disabled:pointer-events-none data-[disabled]:bg-background',\n        )\n      \"\n    >\n      <component\n        :is=\"opt.icon\"\n        v-if=\"opt.icon\"\n        aria-hidden=\"true\"\n        :class=\"cn('shrink-0', iconClass)\"\n      />\n      <span class=\"group-data-[disabled]/item:text-muted-foreground\">{{ opt.label }}</span>\n    </RekaToggleGroupItem>\n  </ToggleGroupRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDA,MAAM,QAAQ;EA2Bd,MAAM,OAAO;EAGb,MAAM,EAAE,OAAO,MAAM,eAAe,cAAc;;;;;;;;;;;EAYlD,MAAM,OAAO,eAAkC,MAAM;EACrD,MAAM,gBAAgB,0BAA0B,KAAK,OAAO,GAAG;EAE/D,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GAGnB,UAAU,cAAc,QAAQ,OAAO,MAAM;EAC/C,EAAE;;;;;;;;;EAUF,MAAM,YAAY,eAAkC;GAClD,IAAI,MAAM,SAAS,YACjB,OAAO,MAAM,QAAQ,MAAM,UAAU,IAAI,MAAM,aAAa,CAAC;GAE/D,OAAO,OAAO,MAAM,eAAe,WAAW,MAAM,aAAa;EACnE,CAAC;EAED,SAAS,SAAS,OAA4C;GAC5D,IAAI,MAAM,SAAS,YAGjB,KAAK,qBAAqB,MAAM,QAAQ,KAAK,IAAK,QAAqB,CAAC,CAAC;QAIzE,KAAK,qBAAqB,OAAO,UAAU,YAAY,UAAU,KAAK,QAAQ,IAAI;EAEtF;EAEA,MAAM,YAAY,eAAgB,MAAM,SAAS,OAAO,aAAa,QAAS;;GAI5E,OAAA,UAAA,GAAA,YAoEkB,MAAA,eAAA,GApElB,WAoEkB;IAnEZ,SAAA;IAAJ,KAAI;IACH,MAAM,QAAA;IACN,eAAa,UAAA;IACd,aAAY;IACX,UAAU,MAAA,KAAA,CAAK,CAAC;GACJ,GAAA;IAAA,GAAA,MAAA,UAAA;IAAU,GAAK,MAAA,KAAA,CAAK,CAAC;GAAK,GAAA;IACtC,OAAc,MAAA,EAAA,CAAE,CAAA,qDAAsV,QAAA,YAAO,eAAA,gCAA4D,QAAA,YAAO,aAAA,qCAA+D,QAAA,YAAO,WAAA,kBAAwU,MAAA,KAAA,CAAK,CAAC,YAAY,QAAA,YAAO,WAAA,oCAA4D,MAAA,KAAA,CAAK,CAAC,KAAA;IAkBz5B,uBAAoB;;IAGnB,SAAA,cAAoB,EADtB,UAAA,IAAA,GAAA,mBAwCsB,UAAA,MAAA,WAvCN,QAAA,QAAP,QAAG;KADZ,OAAA,UAAA,GAAA,YAwCsB,MAAA,eAAA,GAxCtB,WAwCsB;MAtCnB,KAAK,IAAI;MACT,OAAO,IAAI;MACX,UAAU,IAAI,YAAQ;KACf,GAAA,EAAA,SAAA,KAAA,GAAA,MAAA,QAAA,CAAQ,CAAA,EAAA,eAAkB,IAAI,OAAM,CAAA,GAAA,EAC3C,OAAgB,MAAA,EAAA,CAAE,CAAA,wGAAugB,QAAA,SAAI,QAAA,2CAAkE,QAAA,SAAI,QAAA,6BAAoD,QAAA,SAAI,QAAA,wBAAA,oCAAA,4HAAA,sBAAA,+GAAA,4DAAA,EAAA,CAAA,GAAA;MA2B5pB,SAAA,cAKE,CAHM,IAAI,QAFZ,UAAA,GAAA,YAKE,wBAJK,IAAI,IAAI,GAAA;;OAEb,eAAY;OACX,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,YAAa,UAAA,KAAS,CAAA;MAElC,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,mBAAqF,QAArF,YAAqF,gBAAnB,IAAI,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/primitives/toggle-group/src/index.js

@@ -0,0 +1,2 @@
+import ToggleGroup_default from "./ToggleGroup.js";
+export { ToggleGroup_default as default };

package/dist/primitives/toolbar/src/Toolbar.js

@@ -0,0 +1,7 @@
+import Toolbar_vue_vue_type_script_setup_true_lang_default, { TOOLBAR_CONTEXT } from "./Toolbar.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/toolbar/src/Toolbar.vue
+var Toolbar_default = Toolbar_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TOOLBAR_CONTEXT, Toolbar_default as default };
+
+//# sourceMappingURL=Toolbar.js.map

package/dist/primitives/toolbar/src/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","names":[],"sources":["../../../../packages/primitives/toolbar/src/Toolbar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { InjectionKey } from \"vue\";\n/** Which axis the controls run along. */\nexport type ToolbarOrientation = \"horizontal\" | \"vertical\";\n\n/** What the toolbar hands to its slotted children — only its axis. */\nexport interface ToolbarContext {\n  orientation: ToolbarOrientation;\n}\n\nexport const TOOLBAR_CONTEXT: InjectionKey<ToolbarContext> = Symbol(\"loom-toolbar\");\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, provide, ref } from \"vue\";\nimport { cn, useSplitAttrs } from \"@ecoma-io/loom-core\";\n\n/**\n * WAI-ARIA APG toolbar pattern: Tab enters the toolbar and lands on its\n * active control, Tab again leaves it, and the arrow keys walk between the\n * controls inside. For a text-format strip, a view's zoom/filter row, a\n * table's bulk actions — anywhere seven individual Tab stops would stand\n * between a keyboard user and the rest of the page.\n *\n * **Participation needs no contract on the controls.** The toolbar does not\n * wrap its children in registration components and does not require them to\n * consume an injection: on mount, on every render, and on subtree mutations\n * it collects its own focusable descendants — `button`, `input`, `select`,\n * `textarea`, links with `href`, `summary`, and anything carrying a real\n * `tabindex` — and manages their `tabindex` itself. Any control, Loom or\n * native, participates by being slotted in; that is the point of the\n * pattern, and it is why the component ships no `items` prop.\n *\n * The roving index only lands on enabled, visible items: a control disabled\n * (`disabled` or `aria-disabled=\"true\"`) or hidden (`[hidden]`,\n * `aria-hidden=\"true\"`, `display: none`, `visibility: hidden`) is skipped by\n * the arrows but keeps its position, and focus never rests on it. Visibility\n * through `getComputedStyle` is exact in a real browser; under jsdom only\n * inline styles and attributes resolve, which the unit tests work within.\n *\n * Every walk key (both arrow pairs, Home, End) is left to the control when\n * focus rests inside an editable one (`input`, `select`, `textarea`,\n * `contenteditable`) — caret movement, native `select` value stepping and\n * text-field Home/End are not the toolbar's to hijack. Tab is the way out\n * of an editable stop, as it is everywhere else.\n *\n * Wrapping is ON: an arrow at either edge carries to the opposite end, the\n * way every editor's format strip behaves. Home/End jump to the first and\n * last enabled control. Both arrow pairs work in both orientations (each\n * key maps to one direction), so `orientation` is a layout and AT-announced\n * axis, not a key-availability switch.\n *\n * The accessible name is the consumer's to supply — `label` or a\n * pass-through `aria-label` — because a toolbar names its own purpose, and\n * the component owns no other string (separators carry no text). There is\n * deliberately no labels prop: zero localisable strings, nothing to seam.\n *\n * ```vue\n * <Toolbar label=\"Text formatting\">\n *   <IconButton label=\"Bold\"><BoldIcon class=\"size-4\" /></IconButton>\n *   <IconButton label=\"Italic\"><ItalicIcon class=\"size-4\" /></IconButton>\n *   <ToolbarSeparator />\n *   <Select :options=\"zoomLevels\" aria-label=\"Zoom\" />\n * </Toolbar>\n * ```\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Layout and announced axis of the control run. */\n    orientation?: ToolbarOrientation;\n    /** The toolbar's accessible name, for when no better label sits in the DOM. */\n    label?: string;\n  }>(),\n  { orientation: \"horizontal\" },\n);\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n// The consumer's own `aria-label` beats the `label` prop — an explicitly\n// passed attribute is the more specific intent.\nconst ariaLabel = computed(() => (rest.value[\"aria-label\"] as string | undefined) ?? props.label);\n\nprovide(TOOLBAR_CONTEXT, {\n  get orientation() {\n    return props.orientation;\n  },\n});\n\n// One selector for every kind of control a toolbar can hold. `:not([disabled])`\n// prunes natively disabled controls at query time; the property check in\n// `participating` covers the ones an attribute cannot see — a control inside a\n// disabled `<fieldset>` reports `.disabled === true` with no attribute of its\n// own. `[tabindex]` catches custom controls that are none of the above; the\n// root itself carries none, so it never collects itself.\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled]):not([type='hidden'])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"summary\",\n  \"[tabindex]:not([tabindex='-1'])\",\n  \"[contenteditable='true']\",\n  \"[contenteditable='']\",\n].join(\",\");\n\nconst EDITABLE_SELECTOR = \"input, select, textarea, [contenteditable='true'], [contenteditable='']\";\n\nconst root = ref<HTMLElement | null>(null);\n/** The enabled, visible controls, in DOM order — disabled and hidden ones are not in it, which is exactly \"skipped but keeping their position\". */\nconst items = ref<HTMLElement[]>([]);\nconst activeIndex = ref(0);\n\nfunction participating(el: HTMLElement): boolean {\n  const maybeDisableable = el as HTMLButtonElement;\n  if (maybeDisableable.disabled || el.getAttribute(\"aria-disabled\") === \"true\") return false;\n  if (el.hasAttribute(\"hidden\") || el.closest(\"[aria-hidden='true']\") !== null) return false;\n  // Exact in a browser; under jsdom only inline styles resolve, so the unit\n  // tests drive this path with attributes and inline styles.\n  const style = window.getComputedStyle(el);\n  return style.display !== \"none\" && style.visibility !== \"hidden\";\n}\n\n/** Re-collect the participating controls and re-apply the roving tab stops. */\nfunction collect(): void {\n  const rootEl = root.value;\n  if (!rootEl) return;\n  const next = Array.from(rootEl.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(\n    participating,\n  );\n  // Anything that just left the set — it went disabled or hidden while\n  // holding the roving stop — must give the stop back: an `aria-disabled`\n  // control is still natively focusable, and a stale `tabindex=\"0\"` would\n  // leave it a standing Tab stop the walk can never land on.\n  for (const el of items.value) {\n    if (!next.includes(el)) el.removeAttribute(\"tabindex\");\n  }\n  if (activeIndex.value >= next.length) activeIndex.value = 0;\n  next.forEach((el, i) => {\n    el.tabIndex = i === activeIndex.value ? 0 : -1;\n  });\n  items.value = next;\n}\n\n// Only structural and state attributes are watched — not `tabindex`, which\n// `collect()` itself writes: an observer reacting to its own writes would\n// loop. CSS-driven visibility changes are also missed; that limit is named in\n// the docblock and covered by the real-browser e2e instead.\nlet observer: MutationObserver | undefined;\nlet scheduled = false;\nfunction schedule(): void {\n  if (scheduled) return;\n  scheduled = true;\n  queueMicrotask(() => {\n    scheduled = false;\n    collect();\n  });\n}\n\nonMounted(() => {\n  collect();\n  observer = new MutationObserver(schedule);\n  observer.observe(root.value!, {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: [\"hidden\", \"disabled\", \"aria-disabled\", \"aria-hidden\", \"href\", \"type\"],\n  });\n});\n\nonBeforeUnmount(() => observer?.disconnect());\n\nfunction moveTo(index: number): void {\n  if (!items.value.length) return;\n  // Modulo makes both edges wrap: -1 lands on the last, `length` on the first.\n  const next = items.value[(index + items.value.length) % items.value.length]!;\n  activeIndex.value = items.value.indexOf(next);\n  items.value.forEach((el, i) => {\n    el.tabIndex = i === activeIndex.value ? 0 : -1;\n  });\n  next.focus();\n}\n\n/**\n * Pointer focus has to move the roving stop too — whoever actually holds\n * focus is the active control, whatever moved focus there.\n */\nfunction onFocusin(event: FocusEvent): void {\n  const target = event.target as Element;\n  const item =\n    items.value.indexOf(target as HTMLElement) >= 0\n      ? (target as HTMLElement)\n      : (target.closest(FOCUSABLE_SELECTOR) as HTMLElement | null);\n  if (item) {\n    activeIndex.value = items.value.indexOf(item);\n    items.value.forEach((el, i) => {\n      el.tabIndex = i === activeIndex.value ? 0 : -1;\n    });\n  }\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  // Arrows inside a control that consumes them — caret movement, `select`\n  // value stepping — belong to that control. Tab is the exit, as always.\n  if ((event.target as Element).closest(EDITABLE_SELECTOR)) return;\n  collect(); // fresh on every keystroke: cheap at toolbar scale, never stale\n  if (!items.value.length) return;\n  const current = items.value.indexOf(document.activeElement as HTMLElement);\n  const from = current === -1 ? 0 : current;\n  switch (event.key) {\n    case \"ArrowLeft\":\n    case \"ArrowUp\":\n      moveTo(from - 1);\n      break;\n    case \"ArrowRight\":\n    case \"ArrowDown\":\n      moveTo(from + 1);\n      break;\n    case \"Home\":\n      moveTo(0);\n      break;\n    case \"End\":\n      moveTo(items.value.length - 1);\n      break;\n    default:\n      return; // Space, Enter and every other key are the control's own\n  }\n  event.preventDefault();\n}\n</script>\n\n<template>\n  <!-- `role=\"toolbar\"` is the pattern's name for this container — not\n       redundant on a `div`, which carries no role to repeat — and the two\n       delegated handlers are the pattern's plumbing: focus and keys are\n       handled once here for every control slotted inside. The rule models\n       neither. The comments lead the template, which makes the component\n       multi-root; attrs are bound explicitly below, so nothing is lost to\n       fallthrough. -->\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions, vuejs-accessibility/no-redundant-roles -->\n  <div\n    v-bind=\"rest\"\n    ref=\"root\"\n    role=\"toolbar\"\n    :aria-label=\"ariaLabel\"\n    :aria-orientation=\"orientation\"\n    :class=\"\n      cn(\n        'inline-flex items-center gap-1 rounded-lg border border-border bg-background p-1',\n        // A vertical toolbar stacks, and its separators stretch across it.\n        orientation === 'vertical' ? 'flex-col items-stretch' : 'max-w-full flex-row',\n        attrs.class as string,\n      )\n    \"\n    @focusin=\"onFocusin\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- @slot The controls — any focusable element participates, no wrapper required. -->\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/primitives/toolbar/src/Toolbar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,149 @@
+import { cn } from "../../../core/src/cn.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { computed, createElementBlock, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, unref } from "vue";
+//#region packages/primitives/toolbar/src/Toolbar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "aria-orientation"];
+var TOOLBAR_CONTEXT = Symbol("loom-toolbar");
+var Toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Toolbar",
+	props: {
+		orientation: { default: "horizontal" },
+		label: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { attrs, rest } = useSplitAttrs();
+		const ariaLabel = computed(() => rest.value["aria-label"] ?? props.label);
+		provide(TOOLBAR_CONTEXT, { get orientation() {
+			return props.orientation;
+		} });
+		const FOCUSABLE_SELECTOR = [
+			"a[href]",
+			"button:not([disabled])",
+			"input:not([disabled]):not([type='hidden'])",
+			"select:not([disabled])",
+			"textarea:not([disabled])",
+			"summary",
+			"[tabindex]:not([tabindex='-1'])",
+			"[contenteditable='true']",
+			"[contenteditable='']"
+		].join(",");
+		const EDITABLE_SELECTOR = "input, select, textarea, [contenteditable='true'], [contenteditable='']";
+		const root = ref(null);
+		/** The enabled, visible controls, in DOM order — disabled and hidden ones are not in it, which is exactly "skipped but keeping their position". */
+		const items = ref([]);
+		const activeIndex = ref(0);
+		function participating(el) {
+			if (el.disabled || el.getAttribute("aria-disabled") === "true") return false;
+			if (el.hasAttribute("hidden") || el.closest("[aria-hidden='true']") !== null) return false;
+			const style = window.getComputedStyle(el);
+			return style.display !== "none" && style.visibility !== "hidden";
+		}
+		/** Re-collect the participating controls and re-apply the roving tab stops. */
+		function collect() {
+			const rootEl = root.value;
+			if (!rootEl) return;
+			const next = Array.from(rootEl.querySelectorAll(FOCUSABLE_SELECTOR)).filter(participating);
+			for (const el of items.value) if (!next.includes(el)) el.removeAttribute("tabindex");
+			if (activeIndex.value >= next.length) activeIndex.value = 0;
+			next.forEach((el, i) => {
+				el.tabIndex = i === activeIndex.value ? 0 : -1;
+			});
+			items.value = next;
+		}
+		let observer;
+		let scheduled = false;
+		function schedule() {
+			if (scheduled) return;
+			scheduled = true;
+			queueMicrotask(() => {
+				scheduled = false;
+				collect();
+			});
+		}
+		onMounted(() => {
+			collect();
+			observer = new MutationObserver(schedule);
+			observer.observe(root.value, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				attributeFilter: [
+					"hidden",
+					"disabled",
+					"aria-disabled",
+					"aria-hidden",
+					"href",
+					"type"
+				]
+			});
+		});
+		onBeforeUnmount(() => observer?.disconnect());
+		function moveTo(index) {
+			if (!items.value.length) return;
+			const next = items.value[(index + items.value.length) % items.value.length];
+			activeIndex.value = items.value.indexOf(next);
+			items.value.forEach((el, i) => {
+				el.tabIndex = i === activeIndex.value ? 0 : -1;
+			});
+			next.focus();
+		}
+		/**
+		* Pointer focus has to move the roving stop too — whoever actually holds
+		* focus is the active control, whatever moved focus there.
+		*/
+		function onFocusin(event) {
+			const target = event.target;
+			const item = items.value.indexOf(target) >= 0 ? target : target.closest(FOCUSABLE_SELECTOR);
+			if (item) {
+				activeIndex.value = items.value.indexOf(item);
+				items.value.forEach((el, i) => {
+					el.tabIndex = i === activeIndex.value ? 0 : -1;
+				});
+			}
+		}
+		function onKeydown(event) {
+			if (event.target.closest(EDITABLE_SELECTOR)) return;
+			collect();
+			if (!items.value.length) return;
+			const current = items.value.indexOf(document.activeElement);
+			const from = current === -1 ? 0 : current;
+			switch (event.key) {
+				case "ArrowLeft":
+				case "ArrowUp":
+					moveTo(from - 1);
+					break;
+				case "ArrowRight":
+				case "ArrowDown":
+					moveTo(from + 1);
+					break;
+				case "Home":
+					moveTo(0);
+					break;
+				case "End":
+					moveTo(items.value.length - 1);
+					break;
+				default: return;
+			}
+			event.preventDefault();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(unref(rest), {
+				ref_key: "root",
+				ref: root,
+				role: "toolbar",
+				"aria-label": ariaLabel.value,
+				"aria-orientation": __props.orientation,
+				class: unref(cn)("inline-flex items-center gap-1 rounded-lg border border-border bg-background p-1", __props.orientation === "vertical" ? "flex-col items-stretch" : "max-w-full flex-row", unref(attrs).class),
+				onFocusin,
+				onKeydown
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TOOLBAR_CONTEXT, Toolbar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Toolbar.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/toolbar/src/Toolbar.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/toolbar/src/Toolbar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { InjectionKey } from \"vue\";\n/** Which axis the controls run along. */\nexport type ToolbarOrientation = \"horizontal\" | \"vertical\";\n\n/** What the toolbar hands to its slotted children — only its axis. */\nexport interface ToolbarContext {\n  orientation: ToolbarOrientation;\n}\n\nexport const TOOLBAR_CONTEXT: InjectionKey<ToolbarContext> = Symbol(\"loom-toolbar\");\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, provide, ref } from \"vue\";\nimport { cn, useSplitAttrs } from \"@ecoma-io/loom-core\";\n\n/**\n * WAI-ARIA APG toolbar pattern: Tab enters the toolbar and lands on its\n * active control, Tab again leaves it, and the arrow keys walk between the\n * controls inside. For a text-format strip, a view's zoom/filter row, a\n * table's bulk actions — anywhere seven individual Tab stops would stand\n * between a keyboard user and the rest of the page.\n *\n * **Participation needs no contract on the controls.** The toolbar does not\n * wrap its children in registration components and does not require them to\n * consume an injection: on mount, on every render, and on subtree mutations\n * it collects its own focusable descendants — `button`, `input`, `select`,\n * `textarea`, links with `href`, `summary`, and anything carrying a real\n * `tabindex` — and manages their `tabindex` itself. Any control, Loom or\n * native, participates by being slotted in; that is the point of the\n * pattern, and it is why the component ships no `items` prop.\n *\n * The roving index only lands on enabled, visible items: a control disabled\n * (`disabled` or `aria-disabled=\"true\"`) or hidden (`[hidden]`,\n * `aria-hidden=\"true\"`, `display: none`, `visibility: hidden`) is skipped by\n * the arrows but keeps its position, and focus never rests on it. Visibility\n * through `getComputedStyle` is exact in a real browser; under jsdom only\n * inline styles and attributes resolve, which the unit tests work within.\n *\n * Every walk key (both arrow pairs, Home, End) is left to the control when\n * focus rests inside an editable one (`input`, `select`, `textarea`,\n * `contenteditable`) — caret movement, native `select` value stepping and\n * text-field Home/End are not the toolbar's to hijack. Tab is the way out\n * of an editable stop, as it is everywhere else.\n *\n * Wrapping is ON: an arrow at either edge carries to the opposite end, the\n * way every editor's format strip behaves. Home/End jump to the first and\n * last enabled control. Both arrow pairs work in both orientations (each\n * key maps to one direction), so `orientation` is a layout and AT-announced\n * axis, not a key-availability switch.\n *\n * The accessible name is the consumer's to supply — `label` or a\n * pass-through `aria-label` — because a toolbar names its own purpose, and\n * the component owns no other string (separators carry no text). There is\n * deliberately no labels prop: zero localisable strings, nothing to seam.\n *\n * ```vue\n * <Toolbar label=\"Text formatting\">\n *   <IconButton label=\"Bold\"><BoldIcon class=\"size-4\" /></IconButton>\n *   <IconButton label=\"Italic\"><ItalicIcon class=\"size-4\" /></IconButton>\n *   <ToolbarSeparator />\n *   <Select :options=\"zoomLevels\" aria-label=\"Zoom\" />\n * </Toolbar>\n * ```\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Layout and announced axis of the control run. */\n    orientation?: ToolbarOrientation;\n    /** The toolbar's accessible name, for when no better label sits in the DOM. */\n    label?: string;\n  }>(),\n  { orientation: \"horizontal\" },\n);\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n// The consumer's own `aria-label` beats the `label` prop — an explicitly\n// passed attribute is the more specific intent.\nconst ariaLabel = computed(() => (rest.value[\"aria-label\"] as string | undefined) ?? props.label);\n\nprovide(TOOLBAR_CONTEXT, {\n  get orientation() {\n    return props.orientation;\n  },\n});\n\n// One selector for every kind of control a toolbar can hold. `:not([disabled])`\n// prunes natively disabled controls at query time; the property check in\n// `participating` covers the ones an attribute cannot see — a control inside a\n// disabled `<fieldset>` reports `.disabled === true` with no attribute of its\n// own. `[tabindex]` catches custom controls that are none of the above; the\n// root itself carries none, so it never collects itself.\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled]):not([type='hidden'])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"summary\",\n  \"[tabindex]:not([tabindex='-1'])\",\n  \"[contenteditable='true']\",\n  \"[contenteditable='']\",\n].join(\",\");\n\nconst EDITABLE_SELECTOR = \"input, select, textarea, [contenteditable='true'], [contenteditable='']\";\n\nconst root = ref<HTMLElement | null>(null);\n/** The enabled, visible controls, in DOM order — disabled and hidden ones are not in it, which is exactly \"skipped but keeping their position\". */\nconst items = ref<HTMLElement[]>([]);\nconst activeIndex = ref(0);\n\nfunction participating(el: HTMLElement): boolean {\n  const maybeDisableable = el as HTMLButtonElement;\n  if (maybeDisableable.disabled || el.getAttribute(\"aria-disabled\") === \"true\") return false;\n  if (el.hasAttribute(\"hidden\") || el.closest(\"[aria-hidden='true']\") !== null) return false;\n  // Exact in a browser; under jsdom only inline styles resolve, so the unit\n  // tests drive this path with attributes and inline styles.\n  const style = window.getComputedStyle(el);\n  return style.display !== \"none\" && style.visibility !== \"hidden\";\n}\n\n/** Re-collect the participating controls and re-apply the roving tab stops. */\nfunction collect(): void {\n  const rootEl = root.value;\n  if (!rootEl) return;\n  const next = Array.from(rootEl.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(\n    participating,\n  );\n  // Anything that just left the set — it went disabled or hidden while\n  // holding the roving stop — must give the stop back: an `aria-disabled`\n  // control is still natively focusable, and a stale `tabindex=\"0\"` would\n  // leave it a standing Tab stop the walk can never land on.\n  for (const el of items.value) {\n    if (!next.includes(el)) el.removeAttribute(\"tabindex\");\n  }\n  if (activeIndex.value >= next.length) activeIndex.value = 0;\n  next.forEach((el, i) => {\n    el.tabIndex = i === activeIndex.value ? 0 : -1;\n  });\n  items.value = next;\n}\n\n// Only structural and state attributes are watched — not `tabindex`, which\n// `collect()` itself writes: an observer reacting to its own writes would\n// loop. CSS-driven visibility changes are also missed; that limit is named in\n// the docblock and covered by the real-browser e2e instead.\nlet observer: MutationObserver | undefined;\nlet scheduled = false;\nfunction schedule(): void {\n  if (scheduled) return;\n  scheduled = true;\n  queueMicrotask(() => {\n    scheduled = false;\n    collect();\n  });\n}\n\nonMounted(() => {\n  collect();\n  observer = new MutationObserver(schedule);\n  observer.observe(root.value!, {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: [\"hidden\", \"disabled\", \"aria-disabled\", \"aria-hidden\", \"href\", \"type\"],\n  });\n});\n\nonBeforeUnmount(() => observer?.disconnect());\n\nfunction moveTo(index: number): void {\n  if (!items.value.length) return;\n  // Modulo makes both edges wrap: -1 lands on the last, `length` on the first.\n  const next = items.value[(index + items.value.length) % items.value.length]!;\n  activeIndex.value = items.value.indexOf(next);\n  items.value.forEach((el, i) => {\n    el.tabIndex = i === activeIndex.value ? 0 : -1;\n  });\n  next.focus();\n}\n\n/**\n * Pointer focus has to move the roving stop too — whoever actually holds\n * focus is the active control, whatever moved focus there.\n */\nfunction onFocusin(event: FocusEvent): void {\n  const target = event.target as Element;\n  const item =\n    items.value.indexOf(target as HTMLElement) >= 0\n      ? (target as HTMLElement)\n      : (target.closest(FOCUSABLE_SELECTOR) as HTMLElement | null);\n  if (item) {\n    activeIndex.value = items.value.indexOf(item);\n    items.value.forEach((el, i) => {\n      el.tabIndex = i === activeIndex.value ? 0 : -1;\n    });\n  }\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  // Arrows inside a control that consumes them — caret movement, `select`\n  // value stepping — belong to that control. Tab is the exit, as always.\n  if ((event.target as Element).closest(EDITABLE_SELECTOR)) return;\n  collect(); // fresh on every keystroke: cheap at toolbar scale, never stale\n  if (!items.value.length) return;\n  const current = items.value.indexOf(document.activeElement as HTMLElement);\n  const from = current === -1 ? 0 : current;\n  switch (event.key) {\n    case \"ArrowLeft\":\n    case \"ArrowUp\":\n      moveTo(from - 1);\n      break;\n    case \"ArrowRight\":\n    case \"ArrowDown\":\n      moveTo(from + 1);\n      break;\n    case \"Home\":\n      moveTo(0);\n      break;\n    case \"End\":\n      moveTo(items.value.length - 1);\n      break;\n    default:\n      return; // Space, Enter and every other key are the control's own\n  }\n  event.preventDefault();\n}\n</script>\n\n<template>\n  <!-- `role=\"toolbar\"` is the pattern's name for this container — not\n       redundant on a `div`, which carries no role to repeat — and the two\n       delegated handlers are the pattern's plumbing: focus and keys are\n       handled once here for every control slotted inside. The rule models\n       neither. The comments lead the template, which makes the component\n       multi-root; attrs are bound explicitly below, so nothing is lost to\n       fallthrough. -->\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions, vuejs-accessibility/no-redundant-roles -->\n  <div\n    v-bind=\"rest\"\n    ref=\"root\"\n    role=\"toolbar\"\n    :aria-label=\"ariaLabel\"\n    :aria-orientation=\"orientation\"\n    :class=\"\n      cn(\n        'inline-flex items-center gap-1 rounded-lg border border-border bg-background p-1',\n        // A vertical toolbar stacks, and its separators stretch across it.\n        orientation === 'vertical' ? 'flex-col items-stretch' : 'max-w-full flex-row',\n        attrs.class as string,\n      )\n    \"\n    @focusin=\"onFocusin\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- @slot The controls — any focusable element participates, no wrapper required. -->\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;AAUA,IAAa,kBAAgD,OAAO,cAAc;;;;;;;;;EAwDlF,MAAM,QAAQ;EAWd,MAAM,EAAE,OAAO,SAAS,cAAc;EAItC,MAAM,YAAY,eAAgB,KAAK,MAAM,iBAAwC,MAAM,KAAK;EAEhG,QAAQ,iBAAiB,EACvB,IAAI,cAAc;GAChB,OAAO,MAAM;EACf,EACF,CAAC;EAQD,MAAM,qBAAqB;GACzB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EAEV,MAAM,oBAAoB;EAE1B,MAAM,OAAO,IAAwB,IAAI;;EAEzC,MAAM,QAAQ,IAAmB,CAAC,CAAC;EACnC,MAAM,cAAc,IAAI,CAAC;EAEzB,SAAS,cAAc,IAA0B;GAE/C,IAAI,GAAiB,YAAY,GAAG,aAAa,eAAe,MAAM,QAAQ,OAAO;GACrF,IAAI,GAAG,aAAa,QAAQ,KAAK,GAAG,QAAQ,sBAAsB,MAAM,MAAM,OAAO;GAGrF,MAAM,QAAQ,OAAO,iBAAiB,EAAE;GACxC,OAAO,MAAM,YAAY,UAAU,MAAM,eAAe;EAC1D;;EAGA,SAAS,UAAgB;GACvB,MAAM,SAAS,KAAK;GACpB,IAAI,CAAC,QAAQ;GACb,MAAM,OAAO,MAAM,KAAK,OAAO,iBAA8B,kBAAkB,CAAC,CAAC,CAAC,OAChF,aACF;GAKA,KAAK,MAAM,MAAM,MAAM,OACrB,IAAI,CAAC,KAAK,SAAS,EAAE,GAAG,GAAG,gBAAgB,UAAU;GAEvD,IAAI,YAAY,SAAS,KAAK,QAAQ,YAAY,QAAQ;GAC1D,KAAK,SAAS,IAAI,MAAM;IACtB,GAAG,WAAW,MAAM,YAAY,QAAQ,IAAI;GAC9C,CAAC;GACD,MAAM,QAAQ;EAChB;EAMA,IAAI;EACJ,IAAI,YAAY;EAChB,SAAS,WAAiB;GACxB,IAAI,WAAW;GACf,YAAY;GACZ,qBAAqB;IACnB,YAAY;IACZ,QAAQ;GACV,CAAC;EACH;EAEA,gBAAgB;GACd,QAAQ;GACR,WAAW,IAAI,iBAAiB,QAAQ;GACxC,SAAS,QAAQ,KAAK,OAAQ;IAC5B,WAAW;IACX,SAAS;IACT,YAAY;IACZ,iBAAiB;KAAC;KAAU;KAAY;KAAiB;KAAe;KAAQ;IAAM;GACxF,CAAC;EACH,CAAC;EAED,sBAAsB,UAAU,WAAW,CAAC;EAE5C,SAAS,OAAO,OAAqB;GACnC,IAAI,CAAC,MAAM,MAAM,QAAQ;GAEzB,MAAM,OAAO,MAAM,OAAO,QAAQ,MAAM,MAAM,UAAU,MAAM,MAAM;GACpE,YAAY,QAAQ,MAAM,MAAM,QAAQ,IAAI;GAC5C,MAAM,MAAM,SAAS,IAAI,MAAM;IAC7B,GAAG,WAAW,MAAM,YAAY,QAAQ,IAAI;GAC9C,CAAC;GACD,KAAK,MAAM;EACb;;;;;EAMA,SAAS,UAAU,OAAyB;GAC1C,MAAM,SAAS,MAAM;GACrB,MAAM,OACJ,MAAM,MAAM,QAAQ,MAAqB,KAAK,IACzC,SACA,OAAO,QAAQ,kBAAkB;GACxC,IAAI,MAAM;IACR,YAAY,QAAQ,MAAM,MAAM,QAAQ,IAAI;IAC5C,MAAM,MAAM,SAAS,IAAI,MAAM;KAC7B,GAAG,WAAW,MAAM,YAAY,QAAQ,IAAI;IAC9C,CAAC;GACH;EACF;EAEA,SAAS,UAAU,OAA4B;GAG7C,IAAK,MAAM,OAAmB,QAAQ,iBAAiB,GAAG;GAC1D,QAAQ;GACR,IAAI,CAAC,MAAM,MAAM,QAAQ;GACzB,MAAM,UAAU,MAAM,MAAM,QAAQ,SAAS,aAA4B;GACzE,MAAM,OAAO,YAAY,KAAK,IAAI;GAClC,QAAQ,MAAM,KAAd;IACE,KAAK;IACL,KAAK;KACH,OAAO,OAAO,CAAC;KACf;IACF,KAAK;IACL,KAAK;KACH,OAAO,OAAO,CAAC;KACf;IACF,KAAK;KACH,OAAO,CAAC;KACR;IACF,KAAK;KACH,OAAO,MAAM,MAAM,SAAS,CAAC;KAC7B;IACF,SACE;GACJ;GACA,MAAM,eAAe;EACvB;;GAYE,OAAA,UAAA,GAAA,mBAmBM,OAnBN,WACU,MAkBJ,IAAA,GAlBQ;IACR,SAAA;IAAJ,KAAI;IACJ,MAAK;IACJ,cAAY,UAAA;IACZ,oBAAkB,QAAA;IAClB,OAAc,MAAA,EAAA,CAAE,CAAA,oFAAkL,QAAA,gBAAW,aAAA,2BAAA,uBAA4E,MAAA,KAAA,CAAK,CAAC,KAAA;IAQtR;IACA;GAGV,CAAA,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/primitives/toolbar/src/ToolbarSeparator.js

@@ -0,0 +1,7 @@
+import ToolbarSeparator_vue_vue_type_script_setup_true_lang_default from "./ToolbarSeparator.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/toolbar/src/ToolbarSeparator.vue
+var ToolbarSeparator_default = ToolbarSeparator_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ToolbarSeparator_default as default };
+
+//# sourceMappingURL=ToolbarSeparator.js.map

package/dist/primitives/toolbar/src/ToolbarSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSeparator.js","names":[],"sources":["../../../../packages/primitives/toolbar/src/ToolbarSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport type { ToolbarContext, ToolbarOrientation } from \"./Toolbar.vue\";\nimport { TOOLBAR_CONTEXT } from \"./Toolbar.vue\";\n\n/**\n * ToolbarSeparator — the divider between groups of controls inside a\n * Toolbar. It reads the toolbar's own orientation through the context the\n * toolbar provides and draws along the perpendicular axis, so a horizontal\n * toolbar gets vertical hairlines and a vertical one gets horizontal. Its\n * `role=\"separator\"` is the one an APG toolbar wants between its groups —\n * which is why `decorative` is not offered here: inside a toolbar the line\n * is never merely visual, it IS the group boundary.\n *\n * Composing the `Separator` primitive instead of drawing the hairline here\n * was considered and rejected: the primitive binds `h-full w-px` for its\n * vertical axis, and the short, centered divider a toolbar wants would fight\n * that on Tailwind's emitted order — a coin flip, not a decision. Four lines\n * of divider here beat a class-order lottery.\n */\nconst props = defineProps<{\n  /** Only for standalone use — inside a Toolbar the axis is inherited. */\n  orientation?: ToolbarOrientation;\n}>();\n\nconst inherited = inject<ToolbarContext | null>(TOOLBAR_CONTEXT, null);\nconst axis = computed(\n  () => props.orientation ?? (inherited ? inherited.orientation : \"horizontal\"),\n);\n</script>\n\n<template>\n  <div\n    role=\"separator\"\n    :aria-orientation=\"axis === 'vertical' ? 'horizontal' : 'vertical'\"\n    :class=\"axis === 'vertical' ? 'mx-2 h-px w-4 self-center' : 'h-4 w-px self-center'\"\n    class=\"shrink-0 bg-border\"\n  />\n</template>\n"],"mappings":""}

package/dist/primitives/toolbar/src/ToolbarSeparator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,40 @@
+import { TOOLBAR_CONTEXT } from "./Toolbar.vue_vue_type_script_setup_true_lang.js";
+import "./Toolbar.js";
+import { computed, createElementBlock, defineComponent, inject, normalizeClass, openBlock } from "vue";
+//#region packages/primitives/toolbar/src/ToolbarSeparator.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-orientation"];
+/**
+* ToolbarSeparator — the divider between groups of controls inside a
+* Toolbar. It reads the toolbar's own orientation through the context the
+* toolbar provides and draws along the perpendicular axis, so a horizontal
+* toolbar gets vertical hairlines and a vertical one gets horizontal. Its
+* `role="separator"` is the one an APG toolbar wants between its groups —
+* which is why `decorative` is not offered here: inside a toolbar the line
+* is never merely visual, it IS the group boundary.
+*
+* Composing the `Separator` primitive instead of drawing the hairline here
+* was considered and rejected: the primitive binds `h-full w-px` for its
+* vertical axis, and the short, centered divider a toolbar wants would fight
+* that on Tailwind's emitted order — a coin flip, not a decision. Four lines
+* of divider here beat a class-order lottery.
+*/
+var ToolbarSeparator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ToolbarSeparator",
+	props: { orientation: {} },
+	setup(__props) {
+		const props = __props;
+		const inherited = inject(TOOLBAR_CONTEXT, null);
+		const axis = computed(() => props.orientation ?? (inherited ? inherited.orientation : "horizontal"));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "separator",
+				"aria-orientation": axis.value === "vertical" ? "horizontal" : "vertical",
+				class: normalizeClass([axis.value === "vertical" ? "mx-2 h-px w-4 self-center" : "h-4 w-px self-center", "shrink-0 bg-border"])
+			}, null, 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { ToolbarSeparator_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ToolbarSeparator.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/toolbar/src/ToolbarSeparator.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSeparator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/toolbar/src/ToolbarSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport type { ToolbarContext, ToolbarOrientation } from \"./Toolbar.vue\";\nimport { TOOLBAR_CONTEXT } from \"./Toolbar.vue\";\n\n/**\n * ToolbarSeparator — the divider between groups of controls inside a\n * Toolbar. It reads the toolbar's own orientation through the context the\n * toolbar provides and draws along the perpendicular axis, so a horizontal\n * toolbar gets vertical hairlines and a vertical one gets horizontal. Its\n * `role=\"separator\"` is the one an APG toolbar wants between its groups —\n * which is why `decorative` is not offered here: inside a toolbar the line\n * is never merely visual, it IS the group boundary.\n *\n * Composing the `Separator` primitive instead of drawing the hairline here\n * was considered and rejected: the primitive binds `h-full w-px` for its\n * vertical axis, and the short, centered divider a toolbar wants would fight\n * that on Tailwind's emitted order — a coin flip, not a decision. Four lines\n * of divider here beat a class-order lottery.\n */\nconst props = defineProps<{\n  /** Only for standalone use — inside a Toolbar the axis is inherited. */\n  orientation?: ToolbarOrientation;\n}>();\n\nconst inherited = inject<ToolbarContext | null>(TOOLBAR_CONTEXT, null);\nconst axis = computed(\n  () => props.orientation ?? (inherited ? inherited.orientation : \"horizontal\"),\n);\n</script>\n\n<template>\n  <div\n    role=\"separator\"\n    :aria-orientation=\"axis === 'vertical' ? 'horizontal' : 'vertical'\"\n    :class=\"axis === 'vertical' ? 'mx-2 h-px w-4 self-center' : 'h-4 w-px self-center'\"\n    class=\"shrink-0 bg-border\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EAKd,MAAM,YAAY,OAA8B,iBAAiB,IAAI;EACrE,MAAM,OAAO,eACL,MAAM,gBAAgB,YAAY,UAAU,cAAc,aAClE;;GAIE,OAAA,UAAA,GAAA,mBAKE,OAAA;IAJA,MAAK;IACJ,oBAAkB,KAAA,UAAI,aAAA,eAAA;IACtB,OAAK,eAAA,CAAE,KAAA,UAAI,aAAA,8BAAA,wBACN,oBAAoB,CAAA"}

package/dist/primitives/toolbar/src/index.js

@@ -0,0 +1,3 @@
+import Toolbar_default from "./Toolbar.js";
+import ToolbarSeparator_default from "./ToolbarSeparator.js";
+export { ToolbarSeparator_default as ToolbarSeparator, Toolbar_default as default };

package/dist/primitives/tooltip/src/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../../packages/primitives/tooltip/src/Tooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Which edge of the trigger the tip prefers, before collision flipping. The\n * members mirror Reka's own `Side`, and the template binding is what enforces\n * that: a member Reka does not accept stops `:side=\"side\"` type-checking.\n * Declared here rather than aliased so the generated props table prints the\n * four values instead of a name that tells the reader nothing.\n */\nexport type TooltipSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  TooltipProvider,\n  TooltipRoot,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipContent,\n  TooltipArrow,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Tooltip — a short, non-interactive hint on hover or keyboard focus of its\n * trigger: the label for an icon-only button, or one terse explanation.\n *\n * A tooltip is not a small dialog, and the difference is the whole contract.\n * It never takes focus — focus stays on the trigger the entire time it is\n * shown, which is what lets a keyboard user read it and keep going. Hovering\n * the trigger or focusing it opens the tip; Esc, blur and moving the pointer\n * away close it; the page behind never stops scrolling. Nothing inside it can\n * be reached, so nothing interactive belongs inside it. The moment a hint\n * needs a link or a button, it is a `Popover`.\n *\n * It is wired as `aria-describedby`, never `aria-labelledby`: it *supplements*\n * an accessible name and must never be the only source of one. An icon-only\n * button still carries its own `aria-label` — a screen reader user who never\n * hovers would otherwise meet an unnamed button.\n *\n * The provider is bundled in so a single tooltip works with no setup. An\n * application with many can hoist one Reka `TooltipProvider` higher later,\n * which is what shares the hover delay across them.\n */\nwithDefaults(\n  defineProps<{\n    /** The hint text. The default slot overrides it where the hint needs markup. */\n    content?: string;\n    /** The edge of the trigger to anchor against, before collision flipping. */\n    side?: TooltipSide;\n    /** Gap in pixels between the trigger and the tip. */\n    sideOffset?: number;\n    /** Milliseconds of hover before the tip appears. Keyboard focus is always immediate. */\n    delay?: number;\n    /** Drive the tip from the host with `v-model:open` — an onboarding hint, say. Omit it for hover and focus alone. */\n    open?: boolean | undefined;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both. `content` needs no such entry: a string\n  // prop is already `undefined` when absent.\n  { open: undefined, side: \"top\", sideOffset: 6, delay: 300 },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"delay\">\n    <TooltipRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n      <!-- @slot The element the hint describes. Rendered `as-child`, so the\n           caller's own element *is* the trigger and keeps its own accessible\n           name. -->\n      <TooltipTrigger as-child>\n        <slot name=\"trigger\" />\n      </TooltipTrigger>\n\n      <TooltipPortal>\n        <TooltipContent\n          :side=\"side\"\n          :side-offset=\"sideOffset\"\n          :class=\"\n            cn(\n              'z-overlay max-w-[16rem] rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md',\n              // Scoped to the open state, never unconditional. Reka's Presence\n              // keeps closed content mounted until an animationend arrives, and\n              // a mount-only animation never fires a second one — so an\n              // unconditional animation class leaves a stray tip in the page.\n              // Scoped, the closed element computes `animation-name: none` and\n              // Presence unmounts it at once; the paired exit is precisely what\n              // Presence is waiting to hold it for.\n              //\n              // `delayed-open` rather than `open`: the animation belongs to the\n              // hover path, which the user waited for. A tip opened by keyboard\n              // focus appears instantly, because a keyboard user asked for it\n              // deliberately and has nothing to wait through. The exit needs no\n              // such split — Reka reports both open flavours as plain `closed`\n              // on the way out, so one class answers them both.\n              'data-[state=delayed-open]:animate-scale-in data-[state=closed]:animate-scale-out',\n            )\n          \"\n          style=\"transform-origin: var(--reka-popper-transform-origin)\"\n        >\n          <!-- @slot The hint, where markup is needed. Takes precedence over\n               `content`. Nothing interactive belongs here — a tooltip cannot be\n               reached by keyboard or pointer. -->\n          <slot>{{ content }}</slot>\n          <TooltipArrow class=\"fill-foreground\" :width=\"10\" :height=\"5\" />\n        </TooltipContent>\n      </TooltipPortal>\n    </TooltipRoot>\n  </TooltipProvider>\n</template>\n"],"mappings":""}

package/dist/primitives/tooltip/src/Tooltip.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../packages/primitives/tooltip/src/Tooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Which edge of the trigger the tip prefers, before collision flipping. The\n * members mirror Reka's own `Side`, and the template binding is what enforces\n * that: a member Reka does not accept stops `:side=\"side\"` type-checking.\n * Declared here rather than aliased so the generated props table prints the\n * four values instead of a name that tells the reader nothing.\n */\nexport type TooltipSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  TooltipProvider,\n  TooltipRoot,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipContent,\n  TooltipArrow,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Tooltip — a short, non-interactive hint on hover or keyboard focus of its\n * trigger: the label for an icon-only button, or one terse explanation.\n *\n * A tooltip is not a small dialog, and the difference is the whole contract.\n * It never takes focus — focus stays on the trigger the entire time it is\n * shown, which is what lets a keyboard user read it and keep going. Hovering\n * the trigger or focusing it opens the tip; Esc, blur and moving the pointer\n * away close it; the page behind never stops scrolling. Nothing inside it can\n * be reached, so nothing interactive belongs inside it. The moment a hint\n * needs a link or a button, it is a `Popover`.\n *\n * It is wired as `aria-describedby`, never `aria-labelledby`: it *supplements*\n * an accessible name and must never be the only source of one. An icon-only\n * button still carries its own `aria-label` — a screen reader user who never\n * hovers would otherwise meet an unnamed button.\n *\n * The provider is bundled in so a single tooltip works with no setup. An\n * application with many can hoist one Reka `TooltipProvider` higher later,\n * which is what shares the hover delay across them.\n */\nwithDefaults(\n  defineProps<{\n    /** The hint text. The default slot overrides it where the hint needs markup. */\n    content?: string;\n    /** The edge of the trigger to anchor against, before collision flipping. */\n    side?: TooltipSide;\n    /** Gap in pixels between the trigger and the tip. */\n    sideOffset?: number;\n    /** Milliseconds of hover before the tip appears. Keyboard focus is always immediate. */\n    delay?: number;\n    /** Drive the tip from the host with `v-model:open` — an onboarding hint, say. Omit it for hover and focus alone. */\n    open?: boolean | undefined;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both. `content` needs no such entry: a string\n  // prop is already `undefined` when absent.\n  { open: undefined, side: \"top\", sideOffset: 6, delay: 300 },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"delay\">\n    <TooltipRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n      <!-- @slot The element the hint describes. Rendered `as-child`, so the\n           caller's own element *is* the trigger and keeps its own accessible\n           name. -->\n      <TooltipTrigger as-child>\n        <slot name=\"trigger\" />\n      </TooltipTrigger>\n\n      <TooltipPortal>\n        <TooltipContent\n          :side=\"side\"\n          :side-offset=\"sideOffset\"\n          :class=\"\n            cn(\n              'z-overlay max-w-[16rem] rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md',\n              // Scoped to the open state, never unconditional. Reka's Presence\n              // keeps closed content mounted until an animationend arrives, and\n              // a mount-only animation never fires a second one — so an\n              // unconditional animation class leaves a stray tip in the page.\n              // Scoped, the closed element computes `animation-name: none` and\n              // Presence unmounts it at once; the paired exit is precisely what\n              // Presence is waiting to hold it for.\n              //\n              // `delayed-open` rather than `open`: the animation belongs to the\n              // hover path, which the user waited for. A tip opened by keyboard\n              // focus appears instantly, because a keyboard user asked for it\n              // deliberately and has nothing to wait through. The exit needs no\n              // such split — Reka reports both open flavours as plain `closed`\n              // on the way out, so one class answers them both.\n              'data-[state=delayed-open]:animate-scale-in data-[state=closed]:animate-scale-out',\n            )\n          \"\n          style=\"transform-origin: var(--reka-popper-transform-origin)\"\n        >\n          <!-- @slot The hint, where markup is needed. Takes precedence over\n               `content`. Nothing interactive belongs here — a tooltip cannot be\n               reached by keyboard or pointer. -->\n          <slot>{{ content }}</slot>\n          <TooltipArrow class=\"fill-foreground\" :width=\"10\" :height=\"5\" />\n        </TooltipContent>\n      </TooltipPortal>\n    </TooltipRoot>\n  </TooltipProvider>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;GAqEE,OAAA,UAAA,GAAA,YA2CkB,MAAA,eAAA,GAAA,EA3CA,kBAAgB,QAAA,MAAK,GAAA;IACrC,SAAA,cAyCc,CAzCd,YAyCc,MAAA,WAAA,GAzCd,WAAqB,MAyCP,QAAA,CAzCe,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,EAAM,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM,GAAA,CAAA,GAAA;KAIhF,SAAA,cAEiB,CAFjB,YAEiB,MAAA,cAAA,GAAA,EAFD,YAAA,GAAQ,GAAA;MACtB,SAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;KAGzB,CAAA,GAAA,YAgCgB,MAAA,aAAA,GAAA,MAAA;MA/Bd,SAAA,cA8BiB,CA9BjB,YA8BiB,MAAA,cAAA,GAAA;OA7Bd,MAAM,QAAA;OACN,eAAa,QAAA;OACb,OAAK,eAAe,MAAA,EAAA,CAAE,CAAA,4GAAA,kFAAA,CAAA;OAoBvB,OAAA,EAAA,oBAAA,sCAAA;;OAKA,SAAA,cAA0B,CAA1B,WAA0B,KAAA,QAAA,WAAA,CAAA,SAAA,CAAjB,gBAAA,gBAAA,QAAA,OAAO,GAAA,CAAA,CAAA,CAAA,GAChB,YAAgE,MAAA,YAAA,GAAA;QAAlD,OAAM;QAAmB,OAAO;QAAK,QAAQ"}

package/dist/primitives/tree-view/src/TreeView.js

@@ -0,0 +1,7 @@
+import TreeView_vue_vue_type_script_setup_true_lang_default, { TREE_VIEW_LABELS } from "./TreeView.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/tree-view/src/TreeView.vue
+var TreeView_default = TreeView_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TREE_VIEW_LABELS, TreeView_default as default };
+
+//# sourceMappingURL=TreeView.js.map

package/dist/primitives/tree-view/src/TreeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.js","names":[],"sources":["../../../../packages/primitives/tree-view/src/TreeView.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { LabelOverrides, TreeViewLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it.\n * Everything else a tree renders is a node's own label, so the bag is one\n * string — but it is a string a reader waits on.\n */\nexport const TREE_VIEW_LABELS: TreeViewLabels = {\n  loading: \"Loading…\",\n};\n\n/**\n * One node of the tree. `children`'s shape is the contract for expansion: an\n * array of any length (including empty — a known leaf) is static data the\n * tree renders directly, while a node *without* one under a `loadChildren`\n * tree is treated as a branch still to fetch.\n */\nexport interface TreeNode {\n  /** The value bound to `v-model` when this node is chosen. Unique within the tree. */\n  value: string | number;\n  /** The text shown on the row and matched by the typeahead. */\n  label: string;\n  /** This node's children. Their presence is what makes the row expandable. */\n  children?: TreeNode[];\n  /** Present but unchoosable: visible, arrow-reachable, refuses selection and expansion. */\n  disabled?: boolean;\n}\n\n/** Whether one node or several can be chosen at once. */\nexport type TreeViewSelectionMode = \"single\" | \"multiple\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onScopeDispose, provide, ref, watch } from \"vue\";\nimport { useAncestorDisabled, useLabels } from \"@ecoma-io/loom-labels\";\nimport { TREE_VIEW_CONTEXT, type TreeViewContext, type TreeViewNodeState } from \"./context\";\nimport TreeViewNode from \"./TreeViewNode.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The nodes, in the order they are shown, parents before children. */\n    nodes: TreeNode[];\n    /**\n     * The chosen node's `value` — or every chosen value, when `selectionMode`\n     * is \"multiple\". The union, not two generic shapes, for the same reason\n     * Combobox is: `v-model` needs one binding whose type does not depend on\n     * another prop's value, and a scalar/array mismatch is caught the same\n     * place the tree catches it — at the render.\n     */\n    modelValue?: string | number | Array<string | number> | undefined;\n    /** Whether one node or several can be chosen at once. */\n    selectionMode?: TreeViewSelectionMode;\n    /**\n     * Fetch a branch's children the first time it is expanded. A node with no\n     * `children` of its own is treated as lazily loadable; one that resolves\n     * to an empty array becomes a leaf, and a rejected fetch leaves the node\n     * collapsed so the next activation retries rather than caching failure.\n     */\n    loadChildren?: (node: TreeNode) => Promise<TreeNode[]>;\n    /** Node values expanded on mount. After mount the tree owns the state. */\n    defaultExpanded?: Array<string | number>;\n    /**\n     * Unavailable: the rows dim, refuse selection and expansion, and drop out\n     * of the tab order. Unset defers to an enclosing `<fieldset disabled>`\n     * read straight off the DOM.\n     */\n    disabled?: boolean | undefined;\n    /** Names for the strings this control supplies itself. */\n    labels?: LabelOverrides<TreeViewLabels> | undefined;\n  }>(),\n  {\n    modelValue: undefined,\n    selectionMode: \"single\",\n    defaultExpanded: () => [],\n    disabled: undefined,\n    labels: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The chosen node's `value` — or the whole chosen list, when `selectionMode` is \"multiple\". */\n  \"update:modelValue\": [value: string | number | Array<string | number>];\n}>();\n\n/**\n * A row as the keyboard sees it: one step of the depth-first walk of the\n * visible tree, with everything the key map needs resolved once per change\n * instead of per keystroke.\n */\ninterface FlatRow {\n  value: string | number;\n  node: TreeNode;\n  level: number;\n  setsize: number;\n  posinset: number;\n  parentId: string | number | null;\n  expandable: boolean;\n  expanded: boolean;\n  selected: boolean;\n  busy: boolean;\n  disabled: boolean;\n}\n\nconst rootEl = ref<HTMLUListElement | null>(null);\n\nconst ancestorDisabled = useAncestorDisabled(() => rootEl.value);\nconst controlDisabled = computed(() => (props.disabled ?? false) || ancestorDisabled.value);\n\nconst text = useLabels(\"treeView\", TREE_VIEW_LABELS, () => props.labels);\n\n// Seeded once from `defaultExpanded`, then the tree owns it — a prop the user\n// edits after mount silently losing their edits is worse than a seed.\nconst expandedKeys = ref(new Set<string | number>(props.defaultExpanded));\nconst loadingKeys = ref(new Set<string | number>());\nconst lazyChildren = ref(new Map<string | number, TreeNode[]>());\nconst focusValue = ref<string | number | null>(null);\n\nfunction toKeySet(\n  model: string | number | Array<string | number> | undefined,\n): Set<string | number> {\n  if (model == null) return new Set();\n  return new Set(Array.isArray(model) ? model : [model]);\n}\n\n// A mirror rather than a read-through, so the tree works uncontrolled (`v-model`\n// absent, `modelValue` never supplied) exactly as it does controlled — the same\n// contract Combobox keeps.\nconst selectedKeys = ref(toKeySet(props.modelValue));\nwatch(\n  () => props.modelValue,\n  (next) => {\n    selectedKeys.value = toKeySet(next);\n  },\n);\n\nfunction childrenOf(node: TreeNode): TreeNode[] {\n  if (Array.isArray(node.children)) return node.children;\n  return lazyChildren.value.get(node.value) ?? [];\n}\n\n/**\n * A row can open when it has children to show: a non-empty `children` array,\n * or a fetch already resolved beneath it — an empty resolution *is* the\n * answer, and the row collapses back to a leaf rather than offering a branch\n * that opens onto nothing.\n */\nfunction isExpandable(node: TreeNode): boolean {\n  if (Array.isArray(node.children)) return node.children.length > 0;\n  const loaded = lazyChildren.value.get(node.value);\n  if (loaded) return loaded.length > 0;\n  return props.loadChildren != null;\n}\n\nconst flatRows = computed<FlatRow[]>(() => {\n  const rows: FlatRow[] = [];\n  const walk = (nodes: TreeNode[], level: number, parentId: string | number | null): void => {\n    for (let index = 0; index < nodes.length; index++) {\n      const node = nodes[index];\n      if (!node) continue;\n      const expandable = isExpandable(node);\n      const expanded = expandable && expandedKeys.value.has(node.value);\n      rows.push({\n        value: node.value,\n        node,\n        level,\n        setsize: nodes.length,\n        posinset: index + 1,\n        parentId,\n        expandable,\n        expanded,\n        selected: selectedKeys.value.has(node.value),\n        busy: loadingKeys.value.has(node.value),\n        disabled: (node.disabled ?? false) || controlDisabled.value,\n      });\n      if (expanded) walk(childrenOf(node), level + 1, node.value);\n    }\n  };\n  walk(props.nodes, 1, null);\n  return rows;\n});\n\nconst rowByValue = computed(() => new Map(flatRows.value.map((row) => [row.value, row])));\n\n// The roving tab stop: wherever the reader last was, or — before the first\n// arrow key — the first row a Tab is allowed to land on. A disabled row is\n// reachable from inside the tree but never *entered* from outside it.\nconst tabStopValue = computed<string | number | null>(() => {\n  // The stop answers \"where Tab would land\", not \"where the reader is\": the\n  // arrows deliberately rest on disabled rows, but entering the tree from\n  // outside must land on the first enabled one.\n  const focused = focusValue.value != null ? rowByValue.value.get(focusValue.value) : undefined;\n  if (focused && !focused.disabled) return focusValue.value;\n  const firstEnabled = flatRows.value.find((row) => !row.disabled);\n  return firstEnabled?.value ?? null;\n});\n\nfunction stateFor(node: TreeNode): TreeViewNodeState {\n  const row = rowByValue.value.get(node.value);\n  return {\n    expandable: row?.expandable ?? false,\n    expanded: row?.expanded ?? false,\n    selected: row?.selected ?? false,\n    busy: row?.busy ?? false,\n    disabled: row?.disabled ?? false,\n    focusable: !controlDisabled.value && row?.value === tabStopValue.value,\n  };\n}\n\nasync function expandRow(row: FlatRow): Promise<void> {\n  const value = row.node.value;\n  if (\n    row.disabled ||\n    !row.expandable ||\n    expandedKeys.value.has(value) ||\n    loadingKeys.value.has(value)\n  ) {\n    return;\n  }\n  const isLazy =\n    !Array.isArray(row.node.children) &&\n    props.loadChildren != null &&\n    !lazyChildren.value.has(value);\n  if (isLazy && props.loadChildren) {\n    loadingKeys.value = new Set(loadingKeys.value).add(value);\n    try {\n      const children = await props.loadChildren(row.node);\n      const next = new Map(lazyChildren.value);\n      next.set(value, children);\n      lazyChildren.value = next;\n    } catch {\n      // The fetch failed: leave the row collapsed and still expandable, so\n      // the next activation retries rather than caching a broken branch.\n      return;\n    } finally {\n      const settled = new Set(loadingKeys.value);\n      settled.delete(value);\n      loadingKeys.value = settled;\n    }\n  }\n  expandedKeys.value = new Set(expandedKeys.value).add(value);\n}\n\nfunction collapseRow(value: string | number): void {\n  const next = new Set(expandedKeys.value);\n  next.delete(value);\n  expandedKeys.value = next;\n}\n\nfunction selectRow(node: TreeNode): void {\n  if (controlDisabled.value || node.disabled) return;\n  if (props.selectionMode === \"multiple\") {\n    const next = new Set(selectedKeys.value);\n    if (next.has(node.value)) next.delete(node.value);\n    else next.add(node.value);\n    selectedKeys.value = next;\n    emit(\"update:modelValue\", [...next]);\n    return;\n  }\n  selectedKeys.value = new Set([node.value]);\n  emit(\"update:modelValue\", node.value);\n}\n\nfunction rowElement(value: string | number): HTMLElement | null {\n  const root = rootEl.value;\n  if (!root) return null;\n  return root.querySelector<HTMLElement>(`[data-tree-value=\"${CSS.escape(String(value))}\"]`);\n}\n\nfunction focusRow(row: FlatRow | undefined): void {\n  if (!row) return;\n  focusValue.value = row.node.value;\n  void nextTick(() => {\n    rowElement(row.value)?.focus();\n  });\n}\n\nfunction onRowFocus(node: TreeNode): void {\n  focusValue.value = node.value;\n}\n\nfunction onRowActivate(node: TreeNode): void {\n  const row = rowByValue.value.get(node.value);\n  if (!row || controlDisabled.value) return;\n  focusRow(row);\n  selectRow(node);\n}\n\nfunction onChevronActivate(node: TreeNode): void {\n  const row = rowByValue.value.get(node.value);\n  if (!row || controlDisabled.value || row.disabled) return;\n  focusRow(row);\n  if (row.expanded) collapseRow(node.value);\n  else void expandRow(row);\n}\n\nfunction currentRowIndex(): number {\n  if (focusValue.value == null) return -1;\n  return flatRows.value.findIndex((row) => row.value === focusValue.value);\n}\n\n/*\n * The typeahead. APG trees match a prefix of the row's label, starting after\n * the current row and wrapping; the same character typed again cycles to that\n * character's next match rather than extending a prefix to itself. The buffer\n * is 500 ms, and the timer is released with the scope so a tree torn down\n * mid-typeahead leaves nothing pending.\n */\nconst TYPEAHEAD_RESET_MS = 500;\nlet typeaheadBuffer = \"\";\nlet typeaheadTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction handleTypeahead(event: KeyboardEvent): void {\n  if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) return;\n  if (flatRows.value.length === 0) return;\n  const char = event.key.toLowerCase();\n  // Repeat detection reads the buffer's LAST character: a multi-character\n  // prefix must survive a repeated final character so the walk cycles to\n  // the next match instead of extending the prefix to a non-match.\n  if (typeaheadBuffer.slice(-1) !== char) typeaheadBuffer += char;\n  const query = typeaheadBuffer;\n  const start = currentRowIndex() + 1;\n  for (let step = 0; step < flatRows.value.length; step++) {\n    const row = flatRows.value[(start + step) % flatRows.value.length];\n    // Typeahead is a jump made from outside the walk, like the entry tab\n    // stop: it lands on a row the reader can act on. The arrows remain the\n    // way to deliberately rest on a disabled row.\n    if (row && !row.disabled && row.node.label.toLowerCase().startsWith(query)) {\n      focusRow(row);\n      break;\n    }\n  }\n  event.preventDefault();\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n  typeaheadTimer = setTimeout(() => {\n    typeaheadBuffer = \"\";\n    typeaheadTimer = undefined;\n  }, TYPEAHEAD_RESET_MS);\n}\n\nonScopeDispose(() => {\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n});\n\n/**\n * One keydown on the root, reached from every row by bubbling: the key map is\n * written once against the flat visible walk instead of duplicated per row.\n * Disabled rows stay in the arrow walk — present and reachable, per the APG —\n * but Enter, Space and the disclosure keys refuse them.\n */\nfunction onKeydown(event: KeyboardEvent): void {\n  if (controlDisabled.value) return;\n  const rows = flatRows.value;\n  if (rows.length === 0) return;\n  const index = currentRowIndex();\n  const row = index >= 0 ? rows[index] : undefined;\n\n  switch (event.key) {\n    case \"ArrowDown\": {\n      const next = rows[index + 1];\n      if (next) focusRow(next);\n      break;\n    }\n    case \"ArrowUp\": {\n      const previous = index > 0 ? rows[index - 1] : undefined;\n      if (previous) focusRow(previous);\n      break;\n    }\n    case \"Home\":\n      focusRow(rows[0]);\n      break;\n    case \"End\":\n      focusRow(rows[rows.length - 1]);\n      break;\n    case \"ArrowRight\": {\n      if (!row) break;\n      if (row.disabled) break;\n      if (row.expandable && !row.expanded) {\n        void expandRow(row);\n        break;\n      }\n      if (row.expanded) {\n        const child = rows[index + 1];\n        if (child && child.level === row.level + 1) focusRow(child);\n      }\n      break;\n    }\n    case \"ArrowLeft\": {\n      if (!row) break;\n      if (row.disabled) break;\n      if (row.expandable && row.expanded) {\n        collapseRow(row.value);\n        break;\n      }\n      if (row.parentId != null) {\n        const parent = rowByValue.value.get(row.parentId);\n        if (parent) focusRow(parent);\n      }\n      break;\n    }\n    case \"Enter\":\n    case \" \":\n      if (row) selectRow(row.node);\n      break;\n    default:\n      handleTypeahead(event);\n      return;\n  }\n  event.preventDefault();\n}\n\nprovide(TREE_VIEW_CONTEXT, {\n  stateFor,\n  childrenOf,\n  loadingText: computed(() => text.value.loading),\n  onRowFocus,\n  onRowActivate,\n  onChevronActivate,\n} satisfies TreeViewContext);\n</script>\n\n<!--\n  The tree is a plain `<ul>`, so the caller's `aria-label`, `aria-labelledby`\n  and `id` fall through to it untouched — naming the tree is naming the\n  element, exactly as the APG example does. Rows render one tab stop at a\n  time (roving tabindex); the keydown above is the only keyboard listener.\n-->\n<template>\n  <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -- the container is deliberately not focusable: focus roves across the rows (APG tree view), so exactly one row holds the tab stop and the `<ul>` itself never takes one. -->\n  <ul\n    ref=\"rootEl\"\n    role=\"tree\"\n    :aria-multiselectable=\"selectionMode === 'multiple' ? 'true' : undefined\"\n    :aria-disabled=\"controlDisabled ? 'true' : undefined\"\n    class=\"m-0 list-none select-none p-0 text-sm text-foreground\"\n    @keydown=\"onKeydown\"\n  >\n    <TreeViewNode\n      v-for=\"(node, index) in nodes\"\n      :key=\"node.value\"\n      :node=\"node\"\n      :level=\"1\"\n      :setsize=\"nodes.length\"\n      :posinset=\"index + 1\"\n    />\n  </ul>\n</template>\n"],"mappings":""}