@ecoma-io/loom 0.2.0 → 0.3.0

package/dist/packages/primitives/slider/src/Slider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,209 @@
+import { cn } from "../../../core/src/cn.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 { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, onBeforeUnmount, openBlock, ref, unref, useTemplateRef, watch, withCtx } from "vue";
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui";
+//#region packages/primitives/slider/src/Slider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"name",
+	"value",
+	"disabled"
+];
+/**
+* Slider — one continuous value inside a bounded range. Reach for it when the
+* range itself is the information: a volume, a ratio, a share of something
+* whole. A number that happens to be numeric but has no meaningful ceiling —
+* a coordinate, an angle — belongs in a NumberField instead.
+*
+* Built on Reka UI's Slider for the `role="slider"` semantics, the pointer
+* drag and the arrow / Home / End stepping. Single-thumb only: Reka models the
+* value as an array, and this exposes a scalar.
+*
+* Two things are added here.
+*
+* The first is the drag buffer, and without it the component silently drops
+* changes. Given a defined model value Reka runs fully controlled, and its
+* release-time "did this change?" check compares against whatever it was last
+* fed — not against what it emitted. A host that correctly withholds transient
+* values until commit therefore leaves that check reading the pre-drag value
+* for the whole gesture, so it always answers no and the commit never fires.
+* `lastValue` below feeds Reka's own transient ticks back into its model, which
+* is exactly the fix NumberField applies for the same reason. Keyboard steps
+* need no buffer: Reka updates and commits inside one synchronous call, so it
+* compares against a value that is still old either way.
+*
+* The second is the abort path. Reka has no drag cancellation of its own — it
+* handles pointerdown, move and up, and commits whenever the release value
+* differs from the one it snapshotted — so Escape or a browser-issued
+* `pointercancel` mid-drag would still write one checkpoint on release. The
+* bail-out mirrors NumberField's: reset `lastValue` to the committed value, so
+* Reka's own comparison sees no change and never commits, and swallow the
+* still-captured pointer's remaining ticks until it releases.
+*
+* Inside a [Field](../Field/Field.vue) it wires itself through
+* `useFieldControl()`: the row's id, the id of its hint or error line,
+* `required` and `invalid` all reach the thumb — which is the `role="slider"`
+* element, and therefore the thing the row is talking about — and the row's
+* `name` reaches a hidden input, so
+* `<Field label="Volume" error="…"><Slider /></Field>` needs no attributes at
+* the call site. `disabled` still wins wherever it is set, in both directions,
+* which is why it defaults to `undefined` rather than `false`.
+*
+* **A row's label does not name it.** `<label for>` names a labelable element
+* and the thumb is a `span[role="slider"]`, so the row's label resolves to it
+* and announces nobody. `aria-label`/`aria-labelledby` are still what name this
+* control, exactly as they were before — and they were always routed to the
+* thumb for the same reason the rest of this bag is.
+*
+* There is no `readonly`, and a row's is ignored rather than approximated. The
+* whole control is the drag: a track that shows a value and refuses to move is
+* a [Progress](../Progress/Progress.vue) bar wearing a thumb, and painting one
+* as live while swallowing every gesture is the state worse than either.
+*/
+var Slider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Slider",
+	props: {
+		modelValue: {},
+		min: { default: 0 },
+		max: { default: 1 },
+		step: { default: .01 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue", "commit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { attrs, rest: thumbAttrs } = useSplitAttrs();
+		/**
+		* The one control in the library the platform cannot disable for us.
+		*
+		* `<fieldset disabled>` reaches `<input>`, `<button>`, `<select>` and
+		* `<textarea>` and stops there, and Reka renders this thumb as a
+		* `<span role="slider" tabindex="0">`. Measured in jsdom, a Slider inside a
+		* disabled group kept its tab stop and still moved its value on Home and End —
+		* identical behaviour to an available one. Painting it unavailable without
+		* this would produce the worse defect rather than fix the visible one: a
+		* control that looks unreachable and answers the keyboard anyway.
+		*
+		* It is read off the DOM rather than taken from the Field context because
+		* `Fieldset.vue` deliberately publishes no `disabled` there — see
+		* `../../lib/ancestor-disabled.ts` for why a read cannot drift from the
+		* attribute the way a second declaration would.
+		*/
+		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
+		}));
+		const thumbFieldAttrs = computed(() => {
+			const aria = { ...field.attrs };
+			delete aria.name;
+			return aria;
+		});
+		const lastValue = ref(props.modelValue);
+		watch(() => props.modelValue, (value) => {
+			lastValue.value = value;
+		});
+		const values = computed(() => lastValue.value === void 0 ? [] : [lastValue.value]);
+		function onUpdate(next) {
+			const value = next?.[0];
+			if (value === void 0 || aborted) return;
+			lastValue.value = value;
+			emit("update:modelValue", value);
+		}
+		function onCommit(next) {
+			if (next[0] !== void 0 && !aborted) emit("commit", next[0]);
+		}
+		let aborted = false;
+		let teardownDrag;
+		function resetToCommitted() {
+			if (lastValue.value === props.modelValue) return;
+			lastValue.value = props.modelValue;
+			if (props.modelValue !== void 0) emit("update:modelValue", props.modelValue);
+		}
+		function onRootPointerDown() {
+			if (field.disabled) return;
+			aborted = false;
+			const onDragKeydown = (keyEvent) => {
+				if (keyEvent.key !== "Escape" || aborted) return;
+				keyEvent.preventDefault();
+				keyEvent.stopPropagation();
+				aborted = true;
+				resetToCommitted();
+			};
+			const onPointerUp = () => {
+				teardownDrag?.();
+				aborted = false;
+			};
+			const onPointerCancel = () => {
+				teardownDrag?.();
+				aborted = false;
+				resetToCommitted();
+			};
+			window.addEventListener("pointerup", onPointerUp);
+			window.addEventListener("pointercancel", onPointerCancel);
+			window.addEventListener("keydown", onDragKeydown, true);
+			teardownDrag = () => {
+				window.removeEventListener("pointerup", onPointerUp);
+				window.removeEventListener("pointercancel", onPointerCancel);
+				window.removeEventListener("keydown", onDragKeydown, true);
+				teardownDrag = void 0;
+			};
+		}
+		onBeforeUnmount(() => teardownDrag?.());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SliderRoot), {
+				ref_key: "root",
+				ref: root,
+				"model-value": values.value,
+				min: __props.min,
+				max: __props.max,
+				step: __props.step,
+				disabled: unref(field).disabled,
+				class: normalizeClass(unref(cn)("relative flex w-full touch-none items-center py-2 data-[disabled]:cursor-not-allowed", unref(attrs).class)),
+				onPointerdown: onRootPointerDown,
+				"onUpdate:modelValue": onUpdate,
+				onValueCommit: onCommit
+			}, {
+				default: withCtx(() => [
+					unref(field).name !== void 0 ? (openBlock(), createElementBlock("input", {
+						key: 0,
+						type: "hidden",
+						name: unref(field).name,
+						value: lastValue.value,
+						disabled: unref(field).disabled
+					}, null, 8, _hoisted_1)) : createCommentVNode("", true),
+					createVNode(unref(SliderTrack), { class: "relative h-1.5 w-full grow rounded-full bg-muted" }, {
+						default: withCtx(() => [createVNode(unref(SliderRange), { class: "absolute h-full rounded-full bg-primary data-[disabled]:bg-muted-foreground" })]),
+						_: 1
+					}),
+					createVNode(unref(SliderThumb), mergeProps({
+						...unref(thumbAttrs),
+						...thumbFieldAttrs.value
+					}, { class: "block h-6 w-6 rounded-full border-2 border-primary bg-background shadow-sm transition-transform duration-fast ease-spring hover:scale-110 active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo data-[disabled]:pointer-events-none data-[disabled]:border-muted-foreground" }), null, 16)
+				]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"min",
+				"max",
+				"step",
+				"disabled",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { Slider_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Slider.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/slider/src/Slider.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/slider/src/Slider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, useTemplateRef, watch } from \"vue\";\nimport { SliderRoot, SliderTrack, SliderRange, SliderThumb } from \"reka-ui\";\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\";\n\n/**\n * Slider — one continuous value inside a bounded range. Reach for it when the\n * range itself is the information: a volume, a ratio, a share of something\n * whole. A number that happens to be numeric but has no meaningful ceiling —\n * a coordinate, an angle — belongs in a NumberField instead.\n *\n * Built on Reka UI's Slider for the `role=\"slider\"` semantics, the pointer\n * drag and the arrow / Home / End stepping. Single-thumb only: Reka models the\n * value as an array, and this exposes a scalar.\n *\n * Two things are added here.\n *\n * The first is the drag buffer, and without it the component silently drops\n * changes. Given a defined model value Reka runs fully controlled, and its\n * release-time \"did this change?\" check compares against whatever it was last\n * fed — not against what it emitted. A host that correctly withholds transient\n * values until commit therefore leaves that check reading the pre-drag value\n * for the whole gesture, so it always answers no and the commit never fires.\n * `lastValue` below feeds Reka's own transient ticks back into its model, which\n * is exactly the fix NumberField applies for the same reason. Keyboard steps\n * need no buffer: Reka updates and commits inside one synchronous call, so it\n * compares against a value that is still old either way.\n *\n * The second is the abort path. Reka has no drag cancellation of its own — it\n * handles pointerdown, move and up, and commits whenever the release value\n * differs from the one it snapshotted — so Escape or a browser-issued\n * `pointercancel` mid-drag would still write one checkpoint on release. The\n * bail-out mirrors NumberField's: reset `lastValue` to the committed value, so\n * Reka's own comparison sees no change and never commits, and swallow the\n * still-captured pointer's remaining ticks until it releases.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`: the row's id, the id of its hint or error line,\n * `required` and `invalid` all reach the thumb — which is the `role=\"slider\"`\n * element, and therefore the thing the row is talking about — and the row's\n * `name` reaches a hidden input, so\n * `<Field label=\"Volume\" error=\"…\"><Slider /></Field>` needs no attributes at\n * the call site. `disabled` still wins wherever it is set, in both directions,\n * which is why it defaults to `undefined` rather than `false`.\n *\n * **A row's label does not name it.** `<label for>` names a labelable element\n * and the thumb is a `span[role=\"slider\"]`, so the row's label resolves to it\n * and announces nobody. `aria-label`/`aria-labelledby` are still what name this\n * control, exactly as they were before — and they were always routed to the\n * thumb for the same reason the rest of this bag is.\n *\n * There is no `readonly`, and a row's is ignored rather than approximated. The\n * whole control is the drag: a track that shows a value and refuses to move is\n * a [Progress](../Progress/Progress.vue) bar wearing a thumb, and painting one\n * as live while swallowing every gesture is the state worse than either.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current value. Transient drag positions are reported before it changes. */\n    modelValue?: number;\n    /** The floor of the range, and where Home lands. */\n    min?: number;\n    /** The ceiling of the range, and where End lands. */\n    max?: number;\n    /** The granularity of one arrow-key step and of the drag's own snapping. */\n    step?: number;\n    /** Unavailable: dims the track and refuses both the pointer and the keyboard. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n  }>(),\n  {\n    min: 0,\n    max: 1,\n    step: 0.01,\n    // Not `false`: absent has to stay tellable from `false` for a Field above\n    // to disable the row and for `:disabled=\"false\"` to overrule one that does.\n    // Vue casts an absent Boolean prop with no declared default to `false`,\n    // which would leave the context wired and inert.\n    disabled: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** Transient: every position the thumb passes through during a drag. Not a checkpoint. */\n  \"update:modelValue\": [value: number];\n  /** Committed: once at the end of a gesture — drag release, or a keyboard step. */\n  commit: [value: number];\n}>();\n\n// The root renders a real element, and it is the one a caller's `class` has to\n// land on — sizing and layout (`flex-1` to grow in a toolbar) are dead weight\n// on the thumb, which is a 16px absolutely-positioned circle no flex rule\n// reaches. Every other fallthrough attribute goes the other way, onto the\n// thumb: `aria-labelledby` describes the `role=\"slider\"` element, not the box\n// around it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: thumbAttrs } = useSplitAttrs();\n\n/**\n * The one control in the library the platform cannot disable for us.\n *\n * `<fieldset disabled>` reaches `<input>`, `<button>`, `<select>` and\n * `<textarea>` and stops there, and Reka renders this thumb as a\n * `<span role=\"slider\" tabindex=\"0\">`. Measured in jsdom, a Slider inside a\n * disabled group kept its tab stop and still moved its value on Home and End —\n * identical behaviour to an available one. Painting it unavailable without\n * this would produce the worse defect rather than fix the visible one: a\n * control that looks unreachable and answers the keyboard anyway.\n *\n * It is read off the DOM rather than taken from the Field context because\n * `Fieldset.vue` deliberately publishes no `disabled` there — see\n * `../../lib/ancestor-disabled.ts` for why a read cannot drift from the\n * attribute the way a second declaration would.\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`,\n// `required` and `invalid` are absent from the object because there is no prop\n// to oppose the row with; the row's answer stands unopposed, which is what\n// wrapping the slider in a Field asked for.\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 a\n  // native control: an `<input :disabled=\"false\">` inside a disabled group is\n  // disabled too, so a Slider that said the same must not be the one exception.\n  disabled: groupDisabled.value ? true : props.disabled,\n}));\n\n// The resolved bag lands on the thumb for the same reason every other\n// fallthrough attribute does — it is the `role=\"slider\"` element, and an id, a\n// description or an `aria-invalid` describes that, not the box around it.\n//\n// `name` is the one key that goes the other way: a name on a thumb submits\n// nothing, so it drives the hidden input inside the root instead. Removed from\n// a copy rather than listed positively, so a key added to the resolved bag\n// later reaches the thumb without anyone remembering to come back here.\nconst thumbFieldAttrs = computed(() => {\n  const aria: Record<string, unknown> = { ...field.attrs };\n  delete aria.name;\n  return aria;\n});\n\n// What the Reka root is fed as its own model value: seeded from the prop, then\n// advanced on every tick Reka emits, so its release-time check sees the drag's\n// real end position rather than the frozen prop.\nconst lastValue = ref(props.modelValue);\nwatch(\n  () => props.modelValue,\n  (value) => {\n    lastValue.value = value;\n  },\n);\n\nconst values = computed(() => (lastValue.value === undefined ? [] : [lastValue.value]));\n\nfunction onUpdate(next: number[] | undefined) {\n  const value = next?.[0];\n  if (value === undefined || aborted) return;\n  lastValue.value = value;\n  emit(\"update:modelValue\", value);\n}\n\nfunction onCommit(next: number[]) {\n  if (next[0] !== undefined && !aborted) emit(\"commit\", next[0]);\n}\n\n// The abort path. Its window listeners live for the duration of one pointer\n// gesture and no longer.\nlet aborted = false;\nlet teardownDrag: (() => void) | undefined;\n\nfunction resetToCommitted() {\n  if (lastValue.value === props.modelValue) return;\n  lastValue.value = props.modelValue;\n  // One transient tick carrying the committed value, so the host can restore\n  // its pre-drag preview. Still never a checkpoint.\n  if (props.modelValue !== undefined) emit(\"update:modelValue\", props.modelValue);\n}\n\nfunction onRootPointerDown() {\n  if (field.disabled) return;\n  aborted = false;\n  const onDragKeydown = (keyEvent: KeyboardEvent) => {\n    if (keyEvent.key !== \"Escape\" || aborted) return;\n    keyEvent.preventDefault();\n    keyEvent.stopPropagation();\n    // Reka keeps the pointer captured until release, so `aborted` is what\n    // stops the remaining move ticks from resurrecting the gesture.\n    aborted = true;\n    resetToCommitted();\n  };\n  const onPointerUp = () => {\n    // This runs after Reka's own element-level release handling, so a\n    // swallowed gesture has already settled by the time the abort re-arms.\n    teardownDrag?.();\n    aborted = false;\n  };\n  const onPointerCancel = () => {\n    teardownDrag?.();\n    aborted = false; // a cancelled pointer emits no further ticks\n    resetToCommitted();\n  };\n  window.addEventListener(\"pointerup\", onPointerUp);\n  window.addEventListener(\"pointercancel\", onPointerCancel);\n  window.addEventListener(\"keydown\", onDragKeydown, true);\n  teardownDrag = () => {\n    window.removeEventListener(\"pointerup\", onPointerUp);\n    window.removeEventListener(\"pointercancel\", onPointerCancel);\n    window.removeEventListener(\"keydown\", onDragKeydown, true);\n    teardownDrag = undefined;\n  };\n}\n\nonBeforeUnmount(() => teardownDrag?.());\n</script>\n\n<template>\n  <SliderRoot\n    ref=\"root\"\n    :model-value=\"values\"\n    :min=\"min\"\n    :max=\"max\"\n    :step=\"step\"\n    :disabled=\"field.disabled\"\n    :class=\"\n      cn(\n        // Unavailability is painted in measured greys, never as an alpha over\n        // the available state: the filled range and the thumb's rim *are* the\n        // value, and `opacity-50` here took the range from 7.53:1 to 2.36:1\n        // on the page ground — below WCAG 1.4.11's 3:1 floor for a graphical\n        // object required to understand the control. The two parts drain to\n        // their own tokens below; `aria-valuenow` announces the number, but\n        // nothing re-paints it for a sighted reader, so the pixels stay.\n        'relative flex w-full touch-none items-center py-2 data-[disabled]:cursor-not-allowed',\n        attrs.class as string,\n      )\n    \"\n    @pointerdown=\"onRootPointerDown\"\n    @update:model-value=\"onUpdate\"\n    @value-commit=\"onCommit\"\n  >\n    <!-- Reka would mint this itself from a `name` on the root, but it models\n         the value as an array and posts it as `volume[0]`. This control\n         exposes a scalar and a row's `name` has to post one: a field that\n         spells itself differently depending on which control its row holds is\n         exactly the surprise the Field context exists to remove.\n\n         `lastValue` and not `modelValue`, so what is submitted is what the\n         thumb is showing: a host that withholds transient values until commit\n         leaves the prop behind for the length of a gesture. -->\n    <input\n      v-if=\"field.name !== undefined\"\n      type=\"hidden\"\n      :name=\"field.name\"\n      :value=\"lastValue\"\n      :disabled=\"field.disabled\"\n    />\n    <SliderTrack class=\"relative h-1.5 w-full grow rounded-full bg-muted\">\n      <!-- The filled range is a value a person set, so it is painted flat in\n           the primary colour rather than in a gradient. Unavailable, it\n           falls to the neutral well like every other control's value, keyed\n           off Reka's own `data-disabled` on this node: `muted-foreground` is\n           5.25:1 on the page ground and 4.67:1 against the `bg-muted` track\n           it sits on, both measured. -->\n      <SliderRange\n        class=\"absolute h-full rounded-full bg-primary data-[disabled]:bg-muted-foreground\"\n      />\n    </SliderTrack>\n    <!-- The thumb's position is the value, so its rim drains with the range —\n         `muted-foreground` at 5.25:1 on the page ground — while its fill,\n         which is the page's own ground, needs no dim. -->\n    <SliderThumb\n      v-bind=\"{ ...thumbAttrs, ...thumbFieldAttrs }\"\n      class=\"block h-6 w-6 rounded-full border-2 border-primary bg-background shadow-sm transition-transform duration-fast ease-spring hover:scale-110 active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo data-[disabled]:pointer-events-none data-[disabled]:border-muted-foreground\"\n    />\n  </SliderRoot>\n</template>\n"],"mappings":"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"}

package/dist/packages/primitives/slider/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Slider.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/slider/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/slider/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/packages/primitives/slider/src/index.js

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

package/dist/packages/primitives/speed-dial/src/SpeedDial.js

@@ -0,0 +1,7 @@
+import SpeedDial_vue_vue_type_script_setup_true_lang_default from "./SpeedDial.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/speed-dial/src/SpeedDial.vue
+var SpeedDial_default = SpeedDial_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SpeedDial_default as default };
+
+//# sourceMappingURL=SpeedDial.js.map

package/dist/packages/primitives/speed-dial/src/SpeedDial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDial.js","names":[],"sources":["../../../../../packages/primitives/speed-dial/src/SpeedDial.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Component } from \"vue\";\n\n/**\n * One action in the fan.\n *\n * `label` is required and it is not a tooltip: it is rendered as real text\n * beside the glyph. A column of unlabelled circles is the failure mode of this\n * pattern — it reads only to whoever already knows the icons — and a `title`\n * attribute does not fix it, because it is not an accessible name and never\n * appears for a touch or keyboard user at all.\n */\nexport interface SpeedDialAction {\n  /** The visible text on the action, and its accessible name. Required. */\n  label: string;\n  /** A glyph shown before the label. Decorative — the label carries the meaning. */\n  icon?: Component;\n  /** Visible but inert: announced as disabled, and choosing it emits nothing. */\n  disabled?: boolean;\n}\n\n/** Which side of the trigger the fan opens onto. */\nexport type SpeedDialDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\n/**\n * The three things a direction decides — which side the popper puts the fan\n * on, which axis it stacks along, and which axis the arrow keys walk — are one\n * decision, so they are one table rather than a `cva` map plus two lookups.\n * Split across three structures they drift, and a fan laid out on one axis and\n * navigated on another is exactly the defect that is invisible until someone\n * reaches for the keyboard.\n *\n * `flex-col` for `up` and not `flex-col-reverse`: reversing the visual order\n * would put `actions[0]` nearest the trigger, which is the convention, at the\n * price of making Arrow Down move the highlight *up* the screen and making a\n * screen reader read the fan bottom-to-top. So the rule is one line instead —\n * the actions always render in array order along the fan's own reading\n * direction — and the arrow keys, the reading order and the eye all agree.\n */\nconst FANS = {\n  up: { side: \"top\", stack: \"flex-col\", axis: \"vertical\" },\n  down: { side: \"bottom\", stack: \"flex-col\", axis: \"vertical\" },\n  left: { side: \"left\", stack: \"flex-row\", axis: \"horizontal\" },\n  right: { side: \"right\", stack: \"flex-row\", axis: \"horizontal\" },\n} satisfies Record<\n  SpeedDialDirection,\n  { side: \"top\" | \"bottom\" | \"left\" | \"right\"; stack: string; axis: \"vertical\" | \"horizontal\" }\n>;\n\n/**\n * Button's press language, mirrored rather than imported. A FAB is circular,\n * elevated and sized off its own scale, so `Button`'s height variants would\n * fight it — but the *feel* of a press is not per-component, so the transform\n * spring, the 0.97 press and the focus treatment are the same strings Button\n * carries.\n */\nconst PRESS = [\n  \"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]\",\n  \"active:scale-press\",\n  \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n].join(\" \");\n\n/**\n * Reka's menu is a *vertical* roving-focus group: `MenuContentImpl` hard-codes\n * `arrowKeyOptions: \"vertical\"`, so Arrow Left and Arrow Right do nothing in\n * it. In a `left` or `right` fan that leaves the keys that move the highlight\n * running across the axis the reader can see.\n *\n * Re-issuing the press as the key Reka already listens for keeps one\n * implementation of the navigation — the typeahead, the highlight bookkeeping\n * and the skipping of disabled items all still come from Reka — instead of a\n * second, hand-rolled one running beside it and disagreeing with it.\n */\nconst MIRRORED_ARROWS: Record<string, string | undefined> = {\n  ArrowRight: \"ArrowDown\",\n  ArrowLeft: \"ArrowUp\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport {\n  DropdownMenuRoot,\n  DropdownMenuTrigger,\n  DropdownMenuPortal,\n  DropdownMenuContent,\n  DropdownMenuItem,\n} from \"reka-ui\";\nimport { Plus, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\n\n/**\n * SpeedDial — one prominent circular button that expands into a short fan of\n * related actions. The floating-action-button pattern: the single most likely\n * thing to do on a screen, with its three or four near neighbours a press\n * away.\n *\n * Built on Reka UI's DropdownMenu parts, and that is the load-bearing decision\n * here. Strip the circle and the fan away and what is left is a menu button:\n * `aria-haspopup=\"menu\"`, `aria-expanded` tracking the state, one Tab stop with\n * roving focus across the actions, typeahead, Esc closing and returning focus\n * to the trigger. Reka supplies every one of those, tested, and `DropdownMenu`\n * in this same directory already proves the wiring. Hand-rolling it would mean\n * re-solving focus management — the part of this pattern that is actually hard\n * and the part that silently rots — in order to change nothing a reader could\n * name. What is different about a SpeedDial is its *shape*: a circular trigger,\n * a fan of labelled pills instead of a panel of rows, and a direction. That is\n * layout, and layout is all this component adds.\n *\n * It is deliberately not modal, unlike `DropdownMenu`. Reka's modal path locks\n * the body and compensates for the vanished scrollbar with padding — which\n * widens the viewport and slides a viewport-pinned trigger sideways the moment\n * it opens. A control whose whole job is to sit in a corner cannot jump out of\n * it on press.\n *\n * **Positioning is the caller's.** This renders as an ordinary inline-level\n * element and pins itself to nothing; a `class` of `fixed bottom-6 right-6`\n * lands on the trigger. A library that nailed itself to a viewport corner could\n * never be placed in a panel.\n *\n * Reach for `DropdownMenu` when the trigger belongs in a toolbar or a row and\n * the commands are a list rather than a fan, and for `Button` when there is one\n * action and no menu at all.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The actions, in the order they read along the fan. Three or four; this is a shortcut, not a menu. */\n    actions: SpeedDialAction[];\n    /** The trigger's accessible name, e.g. \"Create\". Required — a lone glyph names nothing. */\n    label: string;\n    /** Drive the fan from the host with `v-model:open`; omit it and the component owns its own state. */\n    open?: boolean | undefined;\n    /** Which side of the trigger the fan opens onto. */\n    direction?: SpeedDialDirection;\n  }>(),\n  // `open: undefined` is load-bearing rather than a redundant default — it is\n  // what keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both.\n  { open: undefined, direction: \"up\" },\n);\n\nconst emit = defineEmits<{\n  /** The chosen action, and its index in `actions` — the index is the stable identity, since a label is display text and gets translated. */\n  select: [action: SpeedDialAction, index: number];\n  /** The fan opened or closed, for `v-model:open`. */\n  \"update:open\": [value: boolean];\n}>();\n\nconst fan = computed(() => FANS[props.direction]);\n\n// `DropdownMenuRoot` renders no DOM node at all, so fallthrough attributes\n// would be dropped on the floor rather than landing anywhere. They go to the\n// trigger, which is both the interactive element they describe and the element\n// a caller positions.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead:\n// spreading it alongside the trigger's own `:class` only concatenates the two\n// lists — Vue's merge is generic, not Tailwind-aware — so a caller's `h-12`\n// would lose to the trigger's own `h-14` depending on which utility Tailwind\n// happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: triggerAttrs } = useSplitAttrs();\n\n/**\n * A disabled action selects nothing. Reka already blocks the pointer path on\n * the disabled row; this is the second half, for a keyboard press that reaches\n * it anyway.\n */\nfunction choose(action: SpeedDialAction, index: number): void {\n  if (action.disabled) return;\n  emit(\"select\", action, index);\n}\n\n/** See `MIRRORED_ARROWS`. Vertical fans are left alone — Reka already owns them. */\nfunction mirrorArrows(event: KeyboardEvent): void {\n  if (fan.value.axis !== \"horizontal\") return;\n  const mapped = MIRRORED_ARROWS[event.key];\n  if (mapped === undefined) return;\n  event.preventDefault();\n  (event.currentTarget as HTMLElement | null)?.dispatchEvent(\n    new KeyboardEvent(\"keydown\", { key: mapped, bubbles: true, cancelable: true }),\n  );\n}\n</script>\n\n<template>\n  <DropdownMenuRoot\n    v-bind=\"optional({ open })\"\n    :modal=\"false\"\n    @update:open=\"$emit('update:open', $event)\"\n  >\n    <DropdownMenuTrigger\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      :aria-label=\"label\"\n      :class=\"\n        cn(\n          // `shadow-lg`, which `theme.css` reserves for true overlays and which\n          // would be wrong on an ordinary control: this one genuinely floats\n          // over the page rather than sitting in it, so the largest elevation is\n          // depth reported honestly rather than a glow on something flush.\n          'group inline-flex h-14 w-14 shrink-0 select-none items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg',\n          'hover:bg-primary/90',\n          PRESS,\n          attrs.class as string,\n        )\n      \"\n    >\n      <!-- Both glyphs are hidden from assistive technology: the button's name\n           is `label`, and a second reading of \"plus\" would only compete with\n           it. The open glyph cross-fades rather than the trigger simply\n           rotating 45° into a cross, because the slot lets a caller supply a\n           domain glyph — a pencil rotated 45° is a tilted pencil, not a\n           dismissal. -->\n      <span aria-hidden=\"true\" class=\"inline-grid place-items-center\">\n        <span\n          class=\"[grid-area:1/1] transition-[opacity,transform] duration-fast ease-out group-data-[state=open]:rotate-45 group-data-[state=open]:opacity-0\"\n        >\n          <!-- @slot The trigger's resting glyph. Defaults to a plus. -->\n          <slot><Plus class=\"h-6 w-6\" /></slot>\n        </span>\n        <span\n          class=\"[grid-area:1/1] -rotate-45 opacity-0 transition-[opacity,transform] duration-fast ease-out group-data-[state=open]:rotate-0 group-data-[state=open]:opacity-100\"\n        >\n          <X class=\"h-6 w-6\" />\n        </span>\n      </span>\n    </DropdownMenuTrigger>\n\n    <DropdownMenuPortal>\n      <!-- `as-child` for one reason: `aria-orientation`. Reka hard-codes it to\n           \"vertical\" as a *prop*, which a fallthrough attribute cannot beat —\n           and announcing a `left` or `right` fan as a vertical menu tells a\n           screen-reader user the opposite of what the arrow keys now do. The\n           slot's own props win the merge, so the element below is where the\n           correction can land. -->\n      <DropdownMenuContent\n        as-child\n        :side=\"fan.side\"\n        :side-offset=\"12\"\n        align=\"center\"\n        @keydown=\"mirrorArrows\"\n      >\n        <div\n          :aria-orientation=\"fan.axis\"\n          :class=\"\n            cn(\n              // No popover surface of its own. The fan is a set of floating\n              // pills over the page, not a panel holding them, so the elevation\n              // belongs to each action and there is no box drawn around them.\n              'z-50 flex items-center gap-3 outline-none',\n              fan.stack,\n            )\n          \"\n        >\n          <DropdownMenuItem\n            v-for=\"(action, index) in actions\"\n            :key=\"index\"\n            :disabled=\"action.disabled ?? false\"\n            :class=\"\n              cn(\n                'inline-flex h-9 shrink-0 cursor-pointer select-none items-center gap-2 whitespace-nowrap rounded-full border border-border bg-popover px-3 text-sm text-popover-foreground shadow-md outline-none',\n                PRESS,\n                'data-[highlighted]:bg-subtle',\n                // The pill drains rather than fades. Each action is a floating\n                // label — it has no panel behind it and no tooltip beside it,\n                // so the words *are* the control, and `data-[disabled]:opacity-50`\n                // composited them to 3.21:1 against the page showing through.\n                // Drained, the fill goes to the neutral well and the label to\n                // the measured muted colour: 4.67:1 over it, and a pill that\n                // has plainly given up its card-white surface. The elevation\n                // goes with it, because a shadow is depth and an unavailable\n                // action is not lifted off the page.\n                //\n                // The rim is the one place this pill diverges from the library's\n                // disabled row, which slackens `input` to the lighter `border`\n                // — and it has to. Every other control drains against a surface\n                // that stays behind it; this one floats, so once the shadow\n                // goes the rim is the only thing delimiting it, and `muted` on\n                // the page ground is 1.12:1. Tightening to the strong weight is\n                // what keeps an unavailable action locatable at all, which is\n                // the prior question to it reading as unavailable.\n                'data-[disabled]:pointer-events-none data-[disabled]:border-border-strong data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none',\n                // The actions fan out one after another, which is what makes\n                // this read as a fan opening rather than a block appearing. The\n                // delay is the shared stagger vocabulary, capped there so a\n                // fifth action does not trail in noticeably later than the\n                // second.\n                //\n                // Entry only, and it stays that way for free: the content\n                // declares no animation of its own, so on close Reka's Presence\n                // sees `animation-name: none`, unmounts the whole fan in one\n                // frame, and there is no interval left for the stagger to play\n                // backwards in. Collapsing is instant by construction, not by a\n                // second set of reversed delays.\n                'animate-scale-in',\n              )\n            \"\n            :style=\"{ animationDelay: listStaggerDelay(index) }\"\n            @select=\"choose(action, index)\"\n          >\n            <component :is=\"action.icon\" v-if=\"action.icon\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n            <span>{{ action.label }}</span>\n          </DropdownMenuItem>\n        </div>\n      </DropdownMenuContent>\n    </DropdownMenuPortal>\n  </DropdownMenuRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/speed-dial/src/SpeedDial.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDial.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/speed-dial/src/SpeedDial.vue"],"names":[],"mappings":"AA2UA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAErC;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC9B,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,oDAAoD;AACpD,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;wBAuD7C,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAmCd,wGAAwG;aAC/F,eAAe,EAAE;IAC1B,2FAA2F;WACpF,MAAM;IACb,qGAAqG;WAC9F,OAAO,GAAG,SAAS;IAC1B,oDAAoD;gBACxC,kBAAkB;;;;;IAP9B,wGAAwG;aAC/F,eAAe,EAAE;IAC1B,2FAA2F;WACpF,MAAM;IACb,qGAAqG;WAC9F,OAAO,GAAG,SAAS;IAC1B,oDAAoD;gBACxC,kBAAkB;;;;;UAFvB,OAAO,GAAG,SAAS;eAEd,kBAAkB;;cA6YpB,CAAC,KAAK,IAAiB,KAAK,GAAG;EAWzC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/primitives/speed-dial/src/SpeedDial.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,176 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import { listStaggerDelay } from "../../../core/src/motion.js";
+import "../../../core/src/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { Plus, X } from "@lucide/vue";
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from "reka-ui";
+//#region packages/primitives/speed-dial/src/SpeedDial.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	"aria-hidden": "true",
+	class: "inline-grid place-items-center"
+};
+var _hoisted_2 = { class: "[grid-area:1/1] transition-[opacity,transform] duration-fast ease-out group-data-[state=open]:rotate-45 group-data-[state=open]:opacity-0" };
+var _hoisted_3 = { class: "[grid-area:1/1] -rotate-45 opacity-0 transition-[opacity,transform] duration-fast ease-out group-data-[state=open]:rotate-0 group-data-[state=open]:opacity-100" };
+var _hoisted_4 = ["aria-orientation"];
+/**
+* The three things a direction decides — which side the popper puts the fan
+* on, which axis it stacks along, and which axis the arrow keys walk — are one
+* decision, so they are one table rather than a `cva` map plus two lookups.
+* Split across three structures they drift, and a fan laid out on one axis and
+* navigated on another is exactly the defect that is invisible until someone
+* reaches for the keyboard.
+*
+* `flex-col` for `up` and not `flex-col-reverse`: reversing the visual order
+* would put `actions[0]` nearest the trigger, which is the convention, at the
+* price of making Arrow Down move the highlight *up* the screen and making a
+* screen reader read the fan bottom-to-top. So the rule is one line instead —
+* the actions always render in array order along the fan's own reading
+* direction — and the arrow keys, the reading order and the eye all agree.
+*/
+var FANS = {
+	up: {
+		side: "top",
+		stack: "flex-col",
+		axis: "vertical"
+	},
+	down: {
+		side: "bottom",
+		stack: "flex-col",
+		axis: "vertical"
+	},
+	left: {
+		side: "left",
+		stack: "flex-row",
+		axis: "horizontal"
+	},
+	right: {
+		side: "right",
+		stack: "flex-row",
+		axis: "horizontal"
+	}
+};
+/**
+* Button's press language, mirrored rather than imported. A FAB is circular,
+* elevated and sized off its own scale, so `Button`'s height variants would
+* fight it — but the *feel* of a press is not per-component, so the transform
+* spring, the 0.97 press and the focus treatment are the same strings Button
+* carries.
+*/
+var PRESS = [
+	"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]",
+	"active:scale-press",
+	"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo"
+].join(" ");
+/**
+* Reka's menu is a *vertical* roving-focus group: `MenuContentImpl` hard-codes
+* `arrowKeyOptions: "vertical"`, so Arrow Left and Arrow Right do nothing in
+* it. In a `left` or `right` fan that leaves the keys that move the highlight
+* running across the axis the reader can see.
+*
+* Re-issuing the press as the key Reka already listens for keeps one
+* implementation of the navigation — the typeahead, the highlight bookkeeping
+* and the skipping of disabled items all still come from Reka — instead of a
+* second, hand-rolled one running beside it and disagreeing with it.
+*/
+var MIRRORED_ARROWS = {
+	ArrowRight: "ArrowDown",
+	ArrowLeft: "ArrowUp"
+};
+var SpeedDial_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "SpeedDial",
+	props: {
+		actions: {},
+		label: {},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		direction: { default: "up" }
+	},
+	emits: ["select", "update:open"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const fan = computed(() => FANS[props.direction]);
+		const { attrs, rest: triggerAttrs } = useSplitAttrs();
+		/**
+		* A disabled action selects nothing. Reka already blocks the pointer path on
+		* the disabled row; this is the second half, for a keyboard press that reaches
+		* it anyway.
+		*/
+		function choose(action, index) {
+			if (action.disabled) return;
+			emit("select", action, index);
+		}
+		/** See `MIRRORED_ARROWS`. Vertical fans are left alone — Reka already owns them. */
+		function mirrorArrows(event) {
+			if (fan.value.axis !== "horizontal") return;
+			const mapped = MIRRORED_ARROWS[event.key];
+			if (mapped === void 0) return;
+			event.preventDefault();
+			event.currentTarget?.dispatchEvent(new KeyboardEvent("keydown", {
+				key: mapped,
+				bubbles: true,
+				cancelable: true
+			}));
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DropdownMenuRoot), mergeProps(unref(optional)({ open: __props.open }), {
+				modal: false,
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:open", $event))
+			}), {
+				default: withCtx(() => [createVNode(unref(DropdownMenuTrigger), mergeProps(unref(triggerAttrs), {
+					type: "button",
+					"aria-label": __props.label,
+					class: unref(cn)("group inline-flex h-14 w-14 shrink-0 select-none items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", "hover:bg-primary/90", unref(PRESS), unref(attrs).class)
+				}), {
+					default: withCtx(() => [createElementVNode("span", _hoisted_1, [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(Plus), { class: "h-6 w-6" })])]), createElementVNode("span", _hoisted_3, [createVNode(unref(X), { class: "h-6 w-6" })])])]),
+					_: 3
+				}, 16, ["aria-label", "class"]), createVNode(unref(DropdownMenuPortal), null, {
+					default: withCtx(() => [createVNode(unref(DropdownMenuContent), {
+						"as-child": "",
+						side: fan.value.side,
+						"side-offset": 12,
+						align: "center",
+						onKeydown: mirrorArrows
+					}, {
+						default: withCtx(() => [createElementVNode("div", {
+							"aria-orientation": fan.value.axis,
+							class: normalizeClass(unref(cn)("z-50 flex items-center gap-3 outline-none", fan.value.stack))
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions, (action, index) => {
+							return openBlock(), createBlock(unref(DropdownMenuItem), {
+								key: index,
+								disabled: action.disabled ?? false,
+								class: normalizeClass(unref(cn)("inline-flex h-9 shrink-0 cursor-pointer select-none items-center gap-2 whitespace-nowrap rounded-full border border-border bg-popover px-3 text-sm text-popover-foreground shadow-md outline-none", unref(PRESS), "data-[highlighted]:bg-subtle", "data-[disabled]:pointer-events-none data-[disabled]:border-border-strong data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none", "animate-scale-in")),
+								style: normalizeStyle({ animationDelay: unref(listStaggerDelay)(index) }),
+								onSelect: ($event) => choose(action, index)
+							}, {
+								default: withCtx(() => [action.icon ? (openBlock(), createBlock(resolveDynamicComponent(action.icon), {
+									key: 0,
+									class: "h-4 w-4",
+									"aria-hidden": "true"
+								})) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(action.label), 1)]),
+								_: 2
+							}, 1032, [
+								"disabled",
+								"class",
+								"style",
+								"onSelect"
+							]);
+						}), 128))], 10, _hoisted_4)]),
+						_: 1
+					}, 8, ["side"])]),
+					_: 1
+				})]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { SpeedDial_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SpeedDial.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/speed-dial/src/SpeedDial.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDial.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/speed-dial/src/SpeedDial.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Component } from \"vue\";\n\n/**\n * One action in the fan.\n *\n * `label` is required and it is not a tooltip: it is rendered as real text\n * beside the glyph. A column of unlabelled circles is the failure mode of this\n * pattern — it reads only to whoever already knows the icons — and a `title`\n * attribute does not fix it, because it is not an accessible name and never\n * appears for a touch or keyboard user at all.\n */\nexport interface SpeedDialAction {\n  /** The visible text on the action, and its accessible name. Required. */\n  label: string;\n  /** A glyph shown before the label. Decorative — the label carries the meaning. */\n  icon?: Component;\n  /** Visible but inert: announced as disabled, and choosing it emits nothing. */\n  disabled?: boolean;\n}\n\n/** Which side of the trigger the fan opens onto. */\nexport type SpeedDialDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\n/**\n * The three things a direction decides — which side the popper puts the fan\n * on, which axis it stacks along, and which axis the arrow keys walk — are one\n * decision, so they are one table rather than a `cva` map plus two lookups.\n * Split across three structures they drift, and a fan laid out on one axis and\n * navigated on another is exactly the defect that is invisible until someone\n * reaches for the keyboard.\n *\n * `flex-col` for `up` and not `flex-col-reverse`: reversing the visual order\n * would put `actions[0]` nearest the trigger, which is the convention, at the\n * price of making Arrow Down move the highlight *up* the screen and making a\n * screen reader read the fan bottom-to-top. So the rule is one line instead —\n * the actions always render in array order along the fan's own reading\n * direction — and the arrow keys, the reading order and the eye all agree.\n */\nconst FANS = {\n  up: { side: \"top\", stack: \"flex-col\", axis: \"vertical\" },\n  down: { side: \"bottom\", stack: \"flex-col\", axis: \"vertical\" },\n  left: { side: \"left\", stack: \"flex-row\", axis: \"horizontal\" },\n  right: { side: \"right\", stack: \"flex-row\", axis: \"horizontal\" },\n} satisfies Record<\n  SpeedDialDirection,\n  { side: \"top\" | \"bottom\" | \"left\" | \"right\"; stack: string; axis: \"vertical\" | \"horizontal\" }\n>;\n\n/**\n * Button's press language, mirrored rather than imported. A FAB is circular,\n * elevated and sized off its own scale, so `Button`'s height variants would\n * fight it — but the *feel* of a press is not per-component, so the transform\n * spring, the 0.97 press and the focus treatment are the same strings Button\n * carries.\n */\nconst PRESS = [\n  \"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]\",\n  \"active:scale-press\",\n  \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n].join(\" \");\n\n/**\n * Reka's menu is a *vertical* roving-focus group: `MenuContentImpl` hard-codes\n * `arrowKeyOptions: \"vertical\"`, so Arrow Left and Arrow Right do nothing in\n * it. In a `left` or `right` fan that leaves the keys that move the highlight\n * running across the axis the reader can see.\n *\n * Re-issuing the press as the key Reka already listens for keeps one\n * implementation of the navigation — the typeahead, the highlight bookkeeping\n * and the skipping of disabled items all still come from Reka — instead of a\n * second, hand-rolled one running beside it and disagreeing with it.\n */\nconst MIRRORED_ARROWS: Record<string, string | undefined> = {\n  ArrowRight: \"ArrowDown\",\n  ArrowLeft: \"ArrowUp\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport {\n  DropdownMenuRoot,\n  DropdownMenuTrigger,\n  DropdownMenuPortal,\n  DropdownMenuContent,\n  DropdownMenuItem,\n} from \"reka-ui\";\nimport { Plus, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\n\n/**\n * SpeedDial — one prominent circular button that expands into a short fan of\n * related actions. The floating-action-button pattern: the single most likely\n * thing to do on a screen, with its three or four near neighbours a press\n * away.\n *\n * Built on Reka UI's DropdownMenu parts, and that is the load-bearing decision\n * here. Strip the circle and the fan away and what is left is a menu button:\n * `aria-haspopup=\"menu\"`, `aria-expanded` tracking the state, one Tab stop with\n * roving focus across the actions, typeahead, Esc closing and returning focus\n * to the trigger. Reka supplies every one of those, tested, and `DropdownMenu`\n * in this same directory already proves the wiring. Hand-rolling it would mean\n * re-solving focus management — the part of this pattern that is actually hard\n * and the part that silently rots — in order to change nothing a reader could\n * name. What is different about a SpeedDial is its *shape*: a circular trigger,\n * a fan of labelled pills instead of a panel of rows, and a direction. That is\n * layout, and layout is all this component adds.\n *\n * It is deliberately not modal, unlike `DropdownMenu`. Reka's modal path locks\n * the body and compensates for the vanished scrollbar with padding — which\n * widens the viewport and slides a viewport-pinned trigger sideways the moment\n * it opens. A control whose whole job is to sit in a corner cannot jump out of\n * it on press.\n *\n * **Positioning is the caller's.** This renders as an ordinary inline-level\n * element and pins itself to nothing; a `class` of `fixed bottom-6 right-6`\n * lands on the trigger. A library that nailed itself to a viewport corner could\n * never be placed in a panel.\n *\n * Reach for `DropdownMenu` when the trigger belongs in a toolbar or a row and\n * the commands are a list rather than a fan, and for `Button` when there is one\n * action and no menu at all.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The actions, in the order they read along the fan. Three or four; this is a shortcut, not a menu. */\n    actions: SpeedDialAction[];\n    /** The trigger's accessible name, e.g. \"Create\". Required — a lone glyph names nothing. */\n    label: string;\n    /** Drive the fan from the host with `v-model:open`; omit it and the component owns its own state. */\n    open?: boolean | undefined;\n    /** Which side of the trigger the fan opens onto. */\n    direction?: SpeedDialDirection;\n  }>(),\n  // `open: undefined` is load-bearing rather than a redundant default — it is\n  // what keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both.\n  { open: undefined, direction: \"up\" },\n);\n\nconst emit = defineEmits<{\n  /** The chosen action, and its index in `actions` — the index is the stable identity, since a label is display text and gets translated. */\n  select: [action: SpeedDialAction, index: number];\n  /** The fan opened or closed, for `v-model:open`. */\n  \"update:open\": [value: boolean];\n}>();\n\nconst fan = computed(() => FANS[props.direction]);\n\n// `DropdownMenuRoot` renders no DOM node at all, so fallthrough attributes\n// would be dropped on the floor rather than landing anywhere. They go to the\n// trigger, which is both the interactive element they describe and the element\n// a caller positions.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead:\n// spreading it alongside the trigger's own `:class` only concatenates the two\n// lists — Vue's merge is generic, not Tailwind-aware — so a caller's `h-12`\n// would lose to the trigger's own `h-14` depending on which utility Tailwind\n// happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: triggerAttrs } = useSplitAttrs();\n\n/**\n * A disabled action selects nothing. Reka already blocks the pointer path on\n * the disabled row; this is the second half, for a keyboard press that reaches\n * it anyway.\n */\nfunction choose(action: SpeedDialAction, index: number): void {\n  if (action.disabled) return;\n  emit(\"select\", action, index);\n}\n\n/** See `MIRRORED_ARROWS`. Vertical fans are left alone — Reka already owns them. */\nfunction mirrorArrows(event: KeyboardEvent): void {\n  if (fan.value.axis !== \"horizontal\") return;\n  const mapped = MIRRORED_ARROWS[event.key];\n  if (mapped === undefined) return;\n  event.preventDefault();\n  (event.currentTarget as HTMLElement | null)?.dispatchEvent(\n    new KeyboardEvent(\"keydown\", { key: mapped, bubbles: true, cancelable: true }),\n  );\n}\n</script>\n\n<template>\n  <DropdownMenuRoot\n    v-bind=\"optional({ open })\"\n    :modal=\"false\"\n    @update:open=\"$emit('update:open', $event)\"\n  >\n    <DropdownMenuTrigger\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      :aria-label=\"label\"\n      :class=\"\n        cn(\n          // `shadow-lg`, which `theme.css` reserves for true overlays and which\n          // would be wrong on an ordinary control: this one genuinely floats\n          // over the page rather than sitting in it, so the largest elevation is\n          // depth reported honestly rather than a glow on something flush.\n          'group inline-flex h-14 w-14 shrink-0 select-none items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg',\n          'hover:bg-primary/90',\n          PRESS,\n          attrs.class as string,\n        )\n      \"\n    >\n      <!-- Both glyphs are hidden from assistive technology: the button's name\n           is `label`, and a second reading of \"plus\" would only compete with\n           it. The open glyph cross-fades rather than the trigger simply\n           rotating 45° into a cross, because the slot lets a caller supply a\n           domain glyph — a pencil rotated 45° is a tilted pencil, not a\n           dismissal. -->\n      <span aria-hidden=\"true\" class=\"inline-grid place-items-center\">\n        <span\n          class=\"[grid-area:1/1] transition-[opacity,transform] duration-fast ease-out group-data-[state=open]:rotate-45 group-data-[state=open]:opacity-0\"\n        >\n          <!-- @slot The trigger's resting glyph. Defaults to a plus. -->\n          <slot><Plus class=\"h-6 w-6\" /></slot>\n        </span>\n        <span\n          class=\"[grid-area:1/1] -rotate-45 opacity-0 transition-[opacity,transform] duration-fast ease-out group-data-[state=open]:rotate-0 group-data-[state=open]:opacity-100\"\n        >\n          <X class=\"h-6 w-6\" />\n        </span>\n      </span>\n    </DropdownMenuTrigger>\n\n    <DropdownMenuPortal>\n      <!-- `as-child` for one reason: `aria-orientation`. Reka hard-codes it to\n           \"vertical\" as a *prop*, which a fallthrough attribute cannot beat —\n           and announcing a `left` or `right` fan as a vertical menu tells a\n           screen-reader user the opposite of what the arrow keys now do. The\n           slot's own props win the merge, so the element below is where the\n           correction can land. -->\n      <DropdownMenuContent\n        as-child\n        :side=\"fan.side\"\n        :side-offset=\"12\"\n        align=\"center\"\n        @keydown=\"mirrorArrows\"\n      >\n        <div\n          :aria-orientation=\"fan.axis\"\n          :class=\"\n            cn(\n              // No popover surface of its own. The fan is a set of floating\n              // pills over the page, not a panel holding them, so the elevation\n              // belongs to each action and there is no box drawn around them.\n              'z-50 flex items-center gap-3 outline-none',\n              fan.stack,\n            )\n          \"\n        >\n          <DropdownMenuItem\n            v-for=\"(action, index) in actions\"\n            :key=\"index\"\n            :disabled=\"action.disabled ?? false\"\n            :class=\"\n              cn(\n                'inline-flex h-9 shrink-0 cursor-pointer select-none items-center gap-2 whitespace-nowrap rounded-full border border-border bg-popover px-3 text-sm text-popover-foreground shadow-md outline-none',\n                PRESS,\n                'data-[highlighted]:bg-subtle',\n                // The pill drains rather than fades. Each action is a floating\n                // label — it has no panel behind it and no tooltip beside it,\n                // so the words *are* the control, and `data-[disabled]:opacity-50`\n                // composited them to 3.21:1 against the page showing through.\n                // Drained, the fill goes to the neutral well and the label to\n                // the measured muted colour: 4.67:1 over it, and a pill that\n                // has plainly given up its card-white surface. The elevation\n                // goes with it, because a shadow is depth and an unavailable\n                // action is not lifted off the page.\n                //\n                // The rim is the one place this pill diverges from the library's\n                // disabled row, which slackens `input` to the lighter `border`\n                // — and it has to. Every other control drains against a surface\n                // that stays behind it; this one floats, so once the shadow\n                // goes the rim is the only thing delimiting it, and `muted` on\n                // the page ground is 1.12:1. Tightening to the strong weight is\n                // what keeps an unavailable action locatable at all, which is\n                // the prior question to it reading as unavailable.\n                'data-[disabled]:pointer-events-none data-[disabled]:border-border-strong data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none',\n                // The actions fan out one after another, which is what makes\n                // this read as a fan opening rather than a block appearing. The\n                // delay is the shared stagger vocabulary, capped there so a\n                // fifth action does not trail in noticeably later than the\n                // second.\n                //\n                // Entry only, and it stays that way for free: the content\n                // declares no animation of its own, so on close Reka's Presence\n                // sees `animation-name: none`, unmounts the whole fan in one\n                // frame, and there is no interval left for the stagger to play\n                // backwards in. Collapsing is instant by construction, not by a\n                // second set of reversed delays.\n                'animate-scale-in',\n              )\n            \"\n            :style=\"{ animationDelay: listStaggerDelay(index) }\"\n            @select=\"choose(action, index)\"\n          >\n            <component :is=\"action.icon\" v-if=\"action.icon\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n            <span>{{ action.label }}</span>\n          </DropdownMenuItem>\n        </div>\n      </DropdownMenuContent>\n    </DropdownMenuPortal>\n  </DropdownMenuRoot>\n</template>\n"],"mappings":"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"}

package/dist/packages/primitives/speed-dial/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./SpeedDial.vue";
+export type { SpeedDialAction, SpeedDialDirection } from "./SpeedDial.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/speed-dial/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/speed-dial/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/packages/primitives/speed-dial/src/index.js

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

package/dist/packages/primitives/spinner/src/Spinner.js

@@ -0,0 +1,7 @@
+import Spinner_vue_vue_type_script_setup_true_lang_default, { spinnerVariants } from "./Spinner.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/spinner/src/Spinner.vue
+var Spinner_default = Spinner_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Spinner_default as default, spinnerVariants };
+
+//# sourceMappingURL=Spinner.js.map

package/dist/packages/primitives/spinner/src/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":[],"sources":["../../../../../packages/primitives/spinner/src/Spinner.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\nexport type SpinnerSize = \"sm\" | \"md\" | \"lg\";\n\nexport const spinnerVariants = cva(\"animate-spin text-current\", {\n  variants: {\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-8 w-8\",\n    } satisfies Record<SpinnerSize, string>,\n  },\n  defaultVariants: { size: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\n/**\n * Spinner — indeterminate loading indicator: the wait has no known length or\n * layout shape yet (e.g. waiting on a network request). Once the layout IS\n * known (a card, a list row), use Skeleton instead so the placeholder already\n * reads as the coming content.\n *\n * The root carries `role=\"status\"` + `aria-label` (from `label`) so screen\n * readers announce the wait; the decorative SVG arc is `aria-hidden` since\n * the label already carries the meaning. Color inherits from the caller via\n * `text-current`/`stroke-current`/`fill-current` — set text color on an\n * ancestor, never hardcode it here.\n *\n * Button deliberately does not reuse this component for its own loading\n * state: it inlines the same arc instead, because `role=\"status\"` inside a\n * button that is already `aria-busy` would announce the wait twice.\n */\nwithDefaults(\n  defineProps<{\n    /** Control diameter. */\n    size?: SpinnerSize;\n    /** What a screen reader announces for the wait — always describe the specific work in progress (e.g. \"Saving changes\") rather than leaving the generic default. */\n    label?: string;\n  }>(),\n  { size: \"md\", label: \"Loading\" },\n);\n</script>\n\n<template>\n  <span role=\"status\" :aria-label=\"label\" class=\"inline-flex\">\n    <svg :class=\"cn(spinnerVariants({ size }))\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <circle class=\"stroke-current opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"4\" />\n      <path class=\"fill-current opacity-75\" d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z\" />\n    </svg>\n  </span>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/spinner/src/Spinner.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/spinner/src/Spinner.vue"],"names":[],"mappings":"AA+DA,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,eAAO,MAAM,eAAe;;8EAS1B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAkBd,wBAAwB;WACjB,WAAW;IAClB,mKAAmK;YAC3J,MAAM;;IAHd,wBAAwB;WACjB,WAAW;IAClB,mKAAmK;YAC3J,MAAM;;UAFP,WAAW;WAEV,MAAM;6EA6Dd,CAAC"}

package/dist/packages/primitives/spinner/src/Spinner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,64 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, unref } from "vue";
+import { cva } from "class-variance-authority";
+//#region packages/primitives/spinner/src/Spinner.vue?vue&type=script&setup=true&lang.ts
+/**
+* Spinner — indeterminate loading indicator: the wait has no known length or
+* layout shape yet (e.g. waiting on a network request). Once the layout IS
+* known (a card, a list row), use Skeleton instead so the placeholder already
+* reads as the coming content.
+*
+* The root carries `role="status"` + `aria-label` (from `label`) so screen
+* readers announce the wait; the decorative SVG arc is `aria-hidden` since
+* the label already carries the meaning. Color inherits from the caller via
+* `text-current`/`stroke-current`/`fill-current` — set text color on an
+* ancestor, never hardcode it here.
+*
+* Button deliberately does not reuse this component for its own loading
+* state: it inlines the same arc instead, because `role="status"` inside a
+* button that is already `aria-busy` would announce the wait twice.
+*/
+var _hoisted_1 = ["aria-label"];
+var spinnerVariants = cva("animate-spin text-current", {
+	variants: { size: {
+		sm: "h-4 w-4",
+		md: "h-5 w-5",
+		lg: "h-8 w-8"
+	} },
+	defaultVariants: { size: "md" }
+});
+var Spinner_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Spinner",
+	props: {
+		size: { default: "md" },
+		label: { default: "Loading" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				role: "status",
+				"aria-label": __props.label,
+				class: "inline-flex"
+			}, [(openBlock(), createElementBlock("svg", {
+				class: normalizeClass(unref(cn)(unref(spinnerVariants)({ size: __props.size }))),
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"aria-hidden": "true"
+			}, [..._cache[0] || (_cache[0] = [createElementVNode("circle", {
+				class: "stroke-current opacity-25",
+				cx: "12",
+				cy: "12",
+				r: "10",
+				"stroke-width": "4"
+			}, null, -1), createElementVNode("path", {
+				class: "fill-current opacity-75",
+				d: "M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z"
+			}, null, -1)])], 2))], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { Spinner_vue_vue_type_script_setup_true_lang_default as default, spinnerVariants };
+
+//# sourceMappingURL=Spinner.vue_vue_type_script_setup_true_lang.js.map