@ecoma-io/loom 0.3.0 → 0.4.0

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

@@ -39,9 +39,12 @@ var _hoisted_1 = [
 * 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.
+* bail-out mirrors NumberField's: reset `lastValue` to where the gesture
+* started, so Reka's own comparison sees no change and never commits, and
+* swallow the still-captured pointer's remaining ticks until it releases. The
+* gesture's own start value rather than the prop, because an uncontrolled
+* host never feeds the prop back — resetting to it blanked the thumb to an
+* empty value set.
 *
 * Inside a [Field](../Field/Field.vue) it wires itself through
 * `useFieldControl()`: the row's id, the id of its hint or error line,
@@ -125,20 +128,22 @@ var Slider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		}
 		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;
+			teardownDrag?.();
 			aborted = false;
+			const startValue = lastValue.value;
+			const resetToStart = () => {
+				if (lastValue.value === startValue) return;
+				lastValue.value = startValue;
+				if (startValue !== void 0) emit("update:modelValue", startValue);
+			};
 			const onDragKeydown = (keyEvent) => {
 				if (keyEvent.key !== "Escape" || aborted) return;
 				keyEvent.preventDefault();
 				keyEvent.stopPropagation();
 				aborted = true;
-				resetToCommitted();
+				resetToStart();
 			};
 			const onPointerUp = () => {
 				teardownDrag?.();
@@ -147,7 +152,7 @@ var Slider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			const onPointerCancel = () => {
 				teardownDrag?.();
 				aborted = false;
-				resetToCommitted();
+				resetToStart();
 			};
 			window.addEventListener("pointerup", onPointerUp);
 			window.addEventListener("pointercancel", onPointerCancel);

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

@@ -1 +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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"}
+{"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 where the gesture\n * started, so Reka's own comparison sees no change and never commits, and\n * swallow the still-captured pointer's remaining ticks until it releases. The\n * gesture's own start value rather than the prop, because an uncontrolled\n * host never feeds the prop back — resetting to it blanked the thumb to an\n * empty value set.\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 onRootPointerDown() {\n  if (field.disabled) return;\n  // Disarm before arming: a second concurrent pointerdown used to overwrite\n  // `teardownDrag` instead of running it, so the first pointer's release tore\n  // *this* gesture down mid-drag and its capture-phase keydown stayed on the\n  // window swallowing every later Escape. Only after the old handlers are off\n  // does the latch clear, so nothing stale observes the fresh gesture.\n  teardownDrag?.();\n  aborted = false;\n  // What an abort restores: where this gesture set out from — captured now,\n  // before any tick — rather than the prop. Mirrors NumberField's abort.\n  const startValue = lastValue.value;\n\n  const resetToStart = () => {\n    if (lastValue.value === startValue) return;\n    lastValue.value = startValue;\n    // One transient tick carrying the restored value, so the host can roll\n    // back its pre-drag preview. Still never a checkpoint.\n    if (startValue !== undefined) emit(\"update:modelValue\", startValue);\n  };\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    resetToStart();\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    resetToStart();\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/stepper/src/Stepper.vue.d.ts

@@ -1,5 +1,5 @@
-import { type LabelOverrides } from "@ecoma-io/loom-labels";
-import type { StepperLabels } from "@ecoma-io/loom-labels";
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { StepperLabels } from "../../../labels/src/index";
 /**
 
 /**

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

@@ -1,4 +1,4 @@
 export { default, STEPPER_LABELS } from "./Stepper.vue";
 export type { StepperStep, StepperOrientation } from "./Stepper.vue";
-export type { StepperLabels } from "@ecoma-io/loom-labels";
+export type { StepperLabels } from "../../../labels/src/index";
 //# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/switch/src/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":[],"sources":["../../../../../packages/primitives/switch/src/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SwitchRoot, SwitchThumb } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Switch — toggles a boolean setting that takes effect immediately, with no\n * \"Save\" step. Built on Reka UI's Switch for role=\"switch\" + aria-checked +\n * Space/Enter. Label and description live on the surrounding setting row —\n * wire them in with `aria-labelledby`, since Switch renders a button, not a\n * labelable input.\n *\n * Inside a [Field](../Field/Field.vue) that row is the wrapper itself, and the\n * wiring stops being the caller's job: `useFieldControl()` puts the row's id on\n * the button — labelable, so the row's `<label for>` names the control that has\n * no name of its own — and brings the row's description, `name`, `required` and\n * `invalid` with it.\n *\n * There is no `readonly` here, and a row's is ignored rather than approximated.\n * A switch that cannot be flipped is disabled; one that looks live and refuses\n * the flip is the only state worse than either.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Whether the setting is currently on. Omit to let the switch own its own state. */\n    modelValue?: boolean | undefined;\n    /** Blocks both click and keyboard input, and dims the control. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n  }>(),\n  {\n    // Not `false` — see Checkbox: a concrete default claims host ownership and\n    // leaves an unbound switch emitting updates while never moving.\n    modelValue: undefined,\n    // Not `false` either: absent has to stay tellable from `false` for a Field\n    // above to disable the row 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  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: switchAttrs } = useSplitAttrs();\n\n// One rendered node, so the split is only about `class` — a caller's class\n// needs a Tailwind-aware merge rather than Vue's concatenating fallthrough.\n//\n// `id` and `aria-describedby` arrive as fallthrough attrs rather than props, so\n// they are handed in as this caller's own values; `field.attrs` then spreads\n// **after** `switchAttrs`, and that position is the contract (see\n// TextField.vue). `name` in that bag reaches SwitchRoot's own `name` prop,\n// which is what mints the hidden input a `<form>` submits.\n//\n// `name`, `required` and `invalid` are omitted below because Switch has no prop\n// for any of them: the row's answer stands unopposed. `readonly` is omitted for\n// the reason the docblock gives.\n//\n// The resolved `required` then reaches the element through Reka's own prop\n// rather than the `aria-required` in `field.attrs` — see Checkbox.vue, which\n// carries the reasoning. SwitchRoot happens to spread the fallthrough last, so\n// the attribute would win here; going through the prop keeps the four\n// Reka-rooted controls one shape instead of four merge orders to re-derive.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n}));\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"{ modelValue, ...switchAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    :class=\"\n      cn(\n        'relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent',\n        'transition-[background-color,filter,box-shadow] duration-instant ease-out',\n        'hover:brightness-95',\n        // Checked = a decision (Loom law): the track fills with primary.\n        'data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30',\n        // Focus draws the weave tight: the brand ring blooms.\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <SwitchThumb\n      style=\"\n        transition:\n          left var(--duration-instant) var(--ease-out),\n          transform var(--duration-fast) var(--ease-spring);\n      \"\n      :class=\"\n        cn(\n          'absolute top-1/2 left-0.5 block h-5 w-5 -translate-y-1/2 rounded-full bg-background shadow-sm',\n          'active:scale-x-[1.15] active:scale-y-[0.85]',\n          'data-[state=checked]:left-[1.125rem]',\n        )\n      \"\n    />\n  </SwitchRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../../../packages/primitives/switch/src/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SwitchRoot, SwitchThumb } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Switch — toggles a boolean setting that takes effect immediately, with no\n * \"Save\" step. Built on Reka UI's Switch for role=\"switch\" + aria-checked +\n * Space/Enter. Label and description live on the surrounding setting row —\n * wire them in with `aria-labelledby`, since Switch renders a button, not a\n * labelable input.\n *\n * Inside a [Field](../Field/Field.vue) that row is the wrapper itself, and the\n * wiring stops being the caller's job: `useFieldControl()` puts the row's id on\n * the button — labelable, so the row's `<label for>` names the control that has\n * no name of its own — and brings the row's description, `name`, `required` and\n * `invalid` with it.\n *\n * There is no `readonly` here, and a row's is ignored rather than approximated.\n * A switch that cannot be flipped is disabled; one that looks live and refuses\n * the flip is the only state worse than either.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Whether the setting is currently on. Omit to let the switch own its own state. */\n    modelValue?: boolean | undefined;\n    /** Blocks both click and keyboard input, and drains the control to the neutral well. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n  }>(),\n  {\n    // Not `false` — see Checkbox: a concrete default claims host ownership and\n    // leaves an unbound switch emitting updates while never moving.\n    modelValue: undefined,\n    // Not `false` either: absent has to stay tellable from `false` for a Field\n    // above to disable the row 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  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: switchAttrs } = useSplitAttrs();\n\n// One rendered node, so the split is only about `class` — a caller's class\n// needs a Tailwind-aware merge rather than Vue's concatenating fallthrough.\n//\n// `id` and `aria-describedby` arrive as fallthrough attrs rather than props, so\n// they are handed in as this caller's own values; `field.attrs` then spreads\n// **after** `switchAttrs`, and that position is the contract (see\n// TextField.vue). `name` in that bag reaches SwitchRoot's own `name` prop,\n// which is what mints the hidden input a `<form>` submits.\n//\n// `name`, `required` and `invalid` are omitted below because Switch has no prop\n// for any of them: the row's answer stands unopposed. `readonly` is omitted for\n// the reason the docblock gives.\n//\n// The resolved `required` then reaches the element through Reka's own prop\n// rather than the `aria-required` in `field.attrs` — see Checkbox.vue, which\n// carries the reasoning. SwitchRoot happens to spread the fallthrough last, so\n// the attribute would win here; going through the prop keeps the four\n// Reka-rooted controls one shape instead of four merge orders to re-derive.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n}));\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"{ modelValue, ...switchAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    :class=\"\n      cn(\n        'relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent',\n        'transition-[background-color,filter,box-shadow] duration-instant ease-out',\n        'hover:brightness-95',\n        // Checked = a decision (Loom law): the track fills with primary.\n        'data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30',\n        // Focus draws the weave tight: the brand ring blooms.\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n        // Drained, not dimmed. `opacity-50` faded track and thumb together,\n        // compositing both below their measured contrast — the same failure\n        // Button records for its own dim. The unchecked track falls to\n        // `bg-muted`, the well every unavailable control drains to, with the\n        // rim Chip slackens to; a *checked* one keeps its primary fill,\n        // because switched-on is information (Chip and Pagination keep the\n        // wash a selected control already wears) and the native `disabled`\n        // attribute carries unavailability to assistive tech regardless.\n        // The compound `disabled:data-[state=unchecked]:` form is deliberate:\n        // Tailwind sorts data variants after plain `disabled:`, so a bare\n        // `disabled:bg-muted` would lose to `data-[state=unchecked]:bg-*` and\n        // never fire.\n        'disabled:cursor-not-allowed disabled:data-[state=unchecked]:bg-muted disabled:data-[state=unchecked]:border-border',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <SwitchThumb\n      style=\"transition: transform var(--duration-fast) var(--ease-spring)\"\n      :class=\"\n        cn(\n          'absolute top-1/2 left-0.5 block h-5 w-5 -translate-y-1/2 rounded-full bg-background shadow-sm',\n          'active:scale-x-[1.15] active:scale-y-[0.85]',\n          // The travel is a translate, not a `left` change: animating an inset\n          // property relayouts the track on every frame of the slide, while a\n          // transform stays on the compositor. The distance is the checked\n          // inset (1.125rem) minus the resting one (left-0.5), and the\n          // -translate-y-1/2 above composes with it — Tailwind's translate\n          // utilities stack rather than overwrite.\n          'data-[state=checked]:translate-x-[1rem]',\n        )\n      \"\n    />\n  </SwitchRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/switch/src/Switch.vue.d.ts

@@ -18,7 +18,7 @@
 type __VLS_Props = {
     /** Whether the setting is currently on. Omit to let the switch own its own state. */
     modelValue?: boolean | undefined;
-    /** Blocks both click and keyboard input, and dims the control. Unset defers to a wrapping Field. */
+    /** Blocks both click and keyboard input, and drains the control to the neutral well. Unset defers to a wrapping Field. */
     disabled?: boolean | undefined;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/packages/primitives/switch/src/Switch.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/switch/src/Switch.vue"],"names":[],"mappings":"AAoHA;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,WAAW,GAAG;IACf,qFAAqF;IACrF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,oGAAoG;IACpG,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC;AAoKJ,QAAA,MAAM,YAAY;;;;;cArKH,OAAO,GAAG,SAAS;gBAFjB,OAAO,GAAG,SAAS;6EA2KlC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Switch.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/switch/src/Switch.vue"],"names":[],"mappings":"AAkIA;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,WAAW,GAAG;IACf,qFAAqF;IACrF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,0HAA0H;IAC1H,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC;AAwMJ,QAAA,MAAM,YAAY;;;;;cAzMH,OAAO,GAAG,SAAS;gBAFjB,OAAO,GAAG,SAAS;6EA+MlC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/packages/primitives/switch/src/Switch.vue_vue_type_script_setup_true_lang.js

@@ -53,12 +53,12 @@ var Switch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			}, {
 				disabled: unref(field).disabled,
 				required: unref(field).required,
-				class: unref(cn)("relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent", "transition-[background-color,filter,box-shadow] duration-instant ease-out", "hover:brightness-95", "data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "disabled:cursor-not-allowed disabled:opacity-50", unref(attrs).class),
+				class: unref(cn)("relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent", "transition-[background-color,filter,box-shadow] duration-instant ease-out", "hover:brightness-95", "data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "disabled:cursor-not-allowed disabled:data-[state=unchecked]:bg-muted disabled:data-[state=unchecked]:border-border", unref(attrs).class),
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
 			}), {
 				default: withCtx(() => [createVNode(unref(SwitchThumb), {
-					style: { "transition": "left var(--duration-instant) var(--ease-out),\n          transform var(--duration-fast) var(--ease-spring)" },
-					class: normalizeClass(unref(cn)("absolute top-1/2 left-0.5 block h-5 w-5 -translate-y-1/2 rounded-full bg-background shadow-sm", "active:scale-x-[1.15] active:scale-y-[0.85]", "data-[state=checked]:left-[1.125rem]"))
+					style: { "transition": "transform var(--duration-fast) var(--ease-spring)" },
+					class: normalizeClass(unref(cn)("absolute top-1/2 left-0.5 block h-5 w-5 -translate-y-1/2 rounded-full bg-background shadow-sm", "active:scale-x-[1.15] active:scale-y-[0.85]", "data-[state=checked]:translate-x-[1rem]"))
 				}, null, 8, ["class"])]),
 				_: 1
 			}, 16, [

package/dist/packages/primitives/switch/src/Switch.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/switch/src/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SwitchRoot, SwitchThumb } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Switch — toggles a boolean setting that takes effect immediately, with no\n * \"Save\" step. Built on Reka UI's Switch for role=\"switch\" + aria-checked +\n * Space/Enter. Label and description live on the surrounding setting row —\n * wire them in with `aria-labelledby`, since Switch renders a button, not a\n * labelable input.\n *\n * Inside a [Field](../Field/Field.vue) that row is the wrapper itself, and the\n * wiring stops being the caller's job: `useFieldControl()` puts the row's id on\n * the button — labelable, so the row's `<label for>` names the control that has\n * no name of its own — and brings the row's description, `name`, `required` and\n * `invalid` with it.\n *\n * There is no `readonly` here, and a row's is ignored rather than approximated.\n * A switch that cannot be flipped is disabled; one that looks live and refuses\n * the flip is the only state worse than either.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Whether the setting is currently on. Omit to let the switch own its own state. */\n    modelValue?: boolean | undefined;\n    /** Blocks both click and keyboard input, and dims the control. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n  }>(),\n  {\n    // Not `false` — see Checkbox: a concrete default claims host ownership and\n    // leaves an unbound switch emitting updates while never moving.\n    modelValue: undefined,\n    // Not `false` either: absent has to stay tellable from `false` for a Field\n    // above to disable the row 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  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: switchAttrs } = useSplitAttrs();\n\n// One rendered node, so the split is only about `class` — a caller's class\n// needs a Tailwind-aware merge rather than Vue's concatenating fallthrough.\n//\n// `id` and `aria-describedby` arrive as fallthrough attrs rather than props, so\n// they are handed in as this caller's own values; `field.attrs` then spreads\n// **after** `switchAttrs`, and that position is the contract (see\n// TextField.vue). `name` in that bag reaches SwitchRoot's own `name` prop,\n// which is what mints the hidden input a `<form>` submits.\n//\n// `name`, `required` and `invalid` are omitted below because Switch has no prop\n// for any of them: the row's answer stands unopposed. `readonly` is omitted for\n// the reason the docblock gives.\n//\n// The resolved `required` then reaches the element through Reka's own prop\n// rather than the `aria-required` in `field.attrs` — see Checkbox.vue, which\n// carries the reasoning. SwitchRoot happens to spread the fallthrough last, so\n// the attribute would win here; going through the prop keeps the four\n// Reka-rooted controls one shape instead of four merge orders to re-derive.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n}));\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"{ modelValue, ...switchAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    :class=\"\n      cn(\n        'relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent',\n        'transition-[background-color,filter,box-shadow] duration-instant ease-out',\n        'hover:brightness-95',\n        // Checked = a decision (Loom law): the track fills with primary.\n        'data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30',\n        // Focus draws the weave tight: the brand ring blooms.\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <SwitchThumb\n      style=\"\n        transition:\n          left var(--duration-instant) var(--ease-out),\n          transform var(--duration-fast) var(--ease-spring);\n      \"\n      :class=\"\n        cn(\n          'absolute top-1/2 left-0.5 block h-5 w-5 -translate-y-1/2 rounded-full bg-background shadow-sm',\n          'active:scale-x-[1.15] active:scale-y-[0.85]',\n          'data-[state=checked]:left-[1.125rem]',\n        )\n      \"\n    />\n  </SwitchRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAsBd,MAAM,EAAE,OAAO,MAAM,gBAAgB,cAAc;EAoBnD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,UAAU,MAAM;EAClB,EAAE;;GAIA,OAAA,UAAA,GAAA,YAiCa,MAAA,UAAA,GAjCb,WAiCa;IAAA,YAhCD,QAAA;IAAU,GAAK,MAAA,WAAA;IAAW,GAAK,MAAA,KAAA,CAAK,CAAC;GAAK,GAAA;IACnD,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,OAAc,MAAA,EAAA,CAAE,CAAA,6GAAA,6EAAA,uBAAA,iFAAA,+GAAA,mDAAuoB,MAAA,KAAA,CAAK,CAAC,KAAA;IAa7pB,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAEtD,SAAA,cAaE,CAbF,YAaE,MAAA,WAAA,GAAA;KAZA,OAAA,EAAA,cAAA,6GAAA;KAKC,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,iGAAA,+CAAA,sCAAA,CAAA"}
+{"version":3,"file":"Switch.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/switch/src/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SwitchRoot, SwitchThumb } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Switch — toggles a boolean setting that takes effect immediately, with no\n * \"Save\" step. Built on Reka UI's Switch for role=\"switch\" + aria-checked +\n * Space/Enter. Label and description live on the surrounding setting row —\n * wire them in with `aria-labelledby`, since Switch renders a button, not a\n * labelable input.\n *\n * Inside a [Field](../Field/Field.vue) that row is the wrapper itself, and the\n * wiring stops being the caller's job: `useFieldControl()` puts the row's id on\n * the button — labelable, so the row's `<label for>` names the control that has\n * no name of its own — and brings the row's description, `name`, `required` and\n * `invalid` with it.\n *\n * There is no `readonly` here, and a row's is ignored rather than approximated.\n * A switch that cannot be flipped is disabled; one that looks live and refuses\n * the flip is the only state worse than either.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Whether the setting is currently on. Omit to let the switch own its own state. */\n    modelValue?: boolean | undefined;\n    /** Blocks both click and keyboard input, and drains the control to the neutral well. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n  }>(),\n  {\n    // Not `false` — see Checkbox: a concrete default claims host ownership and\n    // leaves an unbound switch emitting updates while never moving.\n    modelValue: undefined,\n    // Not `false` either: absent has to stay tellable from `false` for a Field\n    // above to disable the row 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  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: switchAttrs } = useSplitAttrs();\n\n// One rendered node, so the split is only about `class` — a caller's class\n// needs a Tailwind-aware merge rather than Vue's concatenating fallthrough.\n//\n// `id` and `aria-describedby` arrive as fallthrough attrs rather than props, so\n// they are handed in as this caller's own values; `field.attrs` then spreads\n// **after** `switchAttrs`, and that position is the contract (see\n// TextField.vue). `name` in that bag reaches SwitchRoot's own `name` prop,\n// which is what mints the hidden input a `<form>` submits.\n//\n// `name`, `required` and `invalid` are omitted below because Switch has no prop\n// for any of them: the row's answer stands unopposed. `readonly` is omitted for\n// the reason the docblock gives.\n//\n// The resolved `required` then reaches the element through Reka's own prop\n// rather than the `aria-required` in `field.attrs` — see Checkbox.vue, which\n// carries the reasoning. SwitchRoot happens to spread the fallthrough last, so\n// the attribute would win here; going through the prop keeps the four\n// Reka-rooted controls one shape instead of four merge orders to re-derive.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n}));\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"{ modelValue, ...switchAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    :class=\"\n      cn(\n        'relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent',\n        'transition-[background-color,filter,box-shadow] duration-instant ease-out',\n        'hover:brightness-95',\n        // Checked = a decision (Loom law): the track fills with primary.\n        'data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30',\n        // Focus draws the weave tight: the brand ring blooms.\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n        // Drained, not dimmed. `opacity-50` faded track and thumb together,\n        // compositing both below their measured contrast — the same failure\n        // Button records for its own dim. The unchecked track falls to\n        // `bg-muted`, the well every unavailable control drains to, with the\n        // rim Chip slackens to; a *checked* one keeps its primary fill,\n        // because switched-on is information (Chip and Pagination keep the\n        // wash a selected control already wears) and the native `disabled`\n        // attribute carries unavailability to assistive tech regardless.\n        // The compound `disabled:data-[state=unchecked]:` form is deliberate:\n        // Tailwind sorts data variants after plain `disabled:`, so a bare\n        // `disabled:bg-muted` would lose to `data-[state=unchecked]:bg-*` and\n        // never fire.\n        'disabled:cursor-not-allowed disabled:data-[state=unchecked]:bg-muted disabled:data-[state=unchecked]:border-border',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <SwitchThumb\n      style=\"transition: transform var(--duration-fast) var(--ease-spring)\"\n      :class=\"\n        cn(\n          'absolute top-1/2 left-0.5 block h-5 w-5 -translate-y-1/2 rounded-full bg-background shadow-sm',\n          'active:scale-x-[1.15] active:scale-y-[0.85]',\n          // The travel is a translate, not a `left` change: animating an inset\n          // property relayouts the track on every frame of the slide, while a\n          // transform stays on the compositor. The distance is the checked\n          // inset (1.125rem) minus the resting one (left-0.5), and the\n          // -translate-y-1/2 above composes with it — Tailwind's translate\n          // utilities stack rather than overwrite.\n          'data-[state=checked]:translate-x-[1rem]',\n        )\n      \"\n    />\n  </SwitchRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAsBd,MAAM,EAAE,OAAO,MAAM,gBAAgB,cAAc;EAoBnD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,UAAU,MAAM;EAClB,EAAE;;GAIA,OAAA,UAAA,GAAA,YA+Ca,MAAA,UAAA,GA/Cb,WA+Ca;IAAA,YA9CD,QAAA;IAAU,GAAK,MAAA,WAAA;IAAW,GAAK,MAAA,KAAA,CAAK,CAAC;GAAK,GAAA;IACnD,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,OAAc,MAAA,EAAA,CAAE,CAAA,6GAAA,6EAAA,uBAAA,iFAAA,+GAAA,sHAAqiD,MAAA,KAAA,CAAK,CAAC,KAAA;IAyB3jD,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAEtD,SAAA,cAeE,CAfF,YAeE,MAAA,WAAA,GAAA;KAdA,OAAA,EAAA,cAAA,oDAAA;KACC,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,iGAAA,+CAAA,yCAAA,CAAA"}

package/dist/packages/primitives/table/src/Table.js

@@ -0,0 +1,7 @@
+import Table_vue_vue_type_script_setup_true_lang_default, { TABLE_LABELS } from "./Table.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/table/src/Table.vue
+var Table_default = Table_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TABLE_LABELS, Table_default as default };
+
+//# sourceMappingURL=Table.js.map

package/dist/packages/primitives/table/src/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":[],"sources":["../../../../../packages/primitives/table/src/Table.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TableLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it.\n */\nexport const TABLE_LABELS: TableLabels = {\n  region: \"Data table\",\n  sortedAscending: \"Sorted ascending\",\n  sortedDescending: \"Sorted descending\",\n  sort: \"Sort\",\n};\n\n/** The wrapper owns row padding so every cell under it tightens together. */\nexport type TableDensity = \"comfortable\" | \"compact\";\n\n/** Alignment vocabulary shared by headers and cells. */\nexport type TableAlign = \"left\" | \"center\" | \"right\";\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from \"vue\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The table's caption, rendered as a real `<caption>` — the accessible\n     * name for the whole table and the first thing a screen reader says.\n     */\n    caption?: string;\n    /** Row padding. Compact suits dense application chrome. */\n    density?: TableDensity;\n    /** Names what the table is when no caption fits visually; falls to the labels seam otherwise. */\n    labels?: LabelOverrides<TableLabels>;\n  }>(),\n  { density: \"comfortable\" },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves, and a template reading the raw prop would be reading the\n// overrides rather than the answer.\nconst text = useLabels(\"table\", TABLE_LABELS, () => props.labels);\n\n// The region is focusable only while it can actually scroll: a Tab stop that\n// never moves is a dead one. Overflow is measured, not assumed — tables fit\n// their container most of the time — and re-measured whenever either side of\n// the ratio changes.\nconst region = ref<HTMLElement | null>(null);\nconst table = ref<HTMLElement | null>(null);\nconst scrollable = ref(false);\n\nfunction measure(): void {\n  const el = region.value;\n  if (el) scrollable.value = el.scrollWidth > el.clientWidth;\n}\n\nlet observer: ResizeObserver | undefined;\nonMounted(() => {\n  measure();\n  observer = new ResizeObserver(measure);\n  if (table.value) observer.observe(table.value);\n  window.addEventListener(\"resize\", measure, { passive: true });\n});\nonBeforeUnmount(() => {\n  observer?.disconnect();\n  window.removeEventListener(\"resize\", measure);\n});\n</script>\n\n<template>\n  <!-- A scroll container, not the table itself: wide tables overflow their\n       region instead of stretching the page (Loom's content-never-stretches\n       law), and the region carries the caption as its accessible name so a\n       screen reader announces what this scrollable thing IS before entering.\n       Focusable only while it can actually scroll — measured below, since a\n       focusable region that never scrolls is a dead Tab stop. -->\n  <div\n    ref=\"region\"\n    role=\"region\"\n    :aria-label=\"caption ?? text.region\"\n    :tabindex=\"scrollable ? 0 : undefined\"\n    class=\"w-full overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n  >\n    <table\n      ref=\"table\"\n      :data-density=\"density\"\n      :class=\"\n        cn(\n          'w-full border-collapse text-left text-sm',\n          // Descendant styling is the wrapper's job: writing these per-cell\n          // would re-litigate the hairline at every call site.\n          '[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-xs [&_th]:font-semibold [&_th]:text-muted-foreground [&_th]:whitespace-nowrap',\n          '[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:align-top [&_td]:text-foreground',\n          `[&[data-density='comfortable']_td]:py-3`,\n          `[&[data-density='compact']_td]:py-1.5`,\n          `[&[data-density='compact']_th]:py-1.5`,\n          '[&_tbody_tr:last-child_td]:border-b-0',\n          '[&_tfoot_td]:border-t [&_tfoot_td]:border-border-strong [&_tfoot_td]:font-medium',\n        )\n      \"\n    >\n      <caption v-if=\"caption\" class=\"sr-only\">\n        {{\n          caption\n        }}\n      </caption>\n      <!-- @slot Real table markup: `<thead>`/`<tbody>`/`<tfoot>` rows built\n           from `TableRow`, `TableHead` and `TableCell`. -->\n      <slot />\n    </table>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/table/src/Table.vue.d.ts

@@ -0,0 +1,45 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { TableLabels } from "../../../labels/src/index";
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it,
+ * and exported so a host can build a partial vocabulary against the real
+ * thing rather than a transcription of it.
+ */
+export declare const TABLE_LABELS: TableLabels;
+/** The wrapper owns row padding so every cell under it tightens together. */
+export type TableDensity = "comfortable" | "compact";
+/** Alignment vocabulary shared by headers and cells. */
+export type TableAlign = "left" | "center" | "right";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * The table's caption, rendered as a real `<caption>` — the accessible
+     * name for the whole table and the first thing a screen reader says.
+     */
+    caption?: string;
+    /** Row padding. Compact suits dense application chrome. */
+    density?: TableDensity;
+    /** Names what the table is when no caption fits visually; falls to the labels seam otherwise. */
+    labels?: LabelOverrides<TableLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The table's caption, rendered as a real `<caption>` — the accessible
+     * name for the whole table and the first thing a screen reader says.
+     */
+    caption?: string;
+    /** Row padding. Compact suits dense application chrome. */
+    density?: TableDensity;
+    /** Names what the table is when no caption fits visually; falls to the labels seam otherwise. */
+    labels?: LabelOverrides<TableLabels>;
+}> & Readonly<{}>, {
+    density: TableDensity;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Table.vue.d.ts.map

package/dist/packages/primitives/table/src/Table.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,72 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, toDisplayString, unref } from "vue";
+//#region packages/primitives/table/src/Table.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "tabindex"];
+var _hoisted_2 = ["data-density"];
+var _hoisted_3 = {
+	key: 0,
+	class: "sr-only"
+};
+/**
+* Loom's English, co-located with the component so it tree-shakes with it,
+* and exported so a host can build a partial vocabulary against the real
+* thing rather than a transcription of it.
+*/
+var TABLE_LABELS = {
+	region: "Data table",
+	sortedAscending: "Sorted ascending",
+	sortedDescending: "Sorted descending",
+	sort: "Sort"
+};
+var Table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Table",
+	props: {
+		caption: {},
+		density: { default: "comfortable" },
+		labels: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("table", TABLE_LABELS, () => props.labels);
+		const region = ref(null);
+		const table = ref(null);
+		const scrollable = ref(false);
+		function measure() {
+			const el = region.value;
+			if (el) scrollable.value = el.scrollWidth > el.clientWidth;
+		}
+		let observer;
+		onMounted(() => {
+			measure();
+			observer = new ResizeObserver(measure);
+			if (table.value) observer.observe(table.value);
+			window.addEventListener("resize", measure, { passive: true });
+		});
+		onBeforeUnmount(() => {
+			observer?.disconnect();
+			window.removeEventListener("resize", measure);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "region",
+				ref: region,
+				role: "region",
+				"aria-label": __props.caption ?? unref(text).region,
+				tabindex: scrollable.value ? 0 : void 0,
+				class: "w-full overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo"
+			}, [createElementVNode("table", {
+				ref_key: "table",
+				ref: table,
+				"data-density": __props.density,
+				class: normalizeClass(unref(cn)("w-full border-collapse text-left text-sm", "[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-xs [&_th]:font-semibold [&_th]:text-muted-foreground [&_th]:whitespace-nowrap", "[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:align-top [&_td]:text-foreground", `[&[data-density='comfortable']_td]:py-3`, `[&[data-density='compact']_td]:py-1.5`, `[&[data-density='compact']_th]:py-1.5`, "[&_tbody_tr:last-child_td]:border-b-0", "[&_tfoot_td]:border-t [&_tfoot_td]:border-border-strong [&_tfoot_td]:font-medium"))
+			}, [__props.caption ? (openBlock(), createElementBlock("caption", _hoisted_3, toDisplayString(__props.caption), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 10, _hoisted_2)], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TABLE_LABELS, Table_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Table.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/table/src/Table.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/table/src/Table.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TableLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it.\n */\nexport const TABLE_LABELS: TableLabels = {\n  region: \"Data table\",\n  sortedAscending: \"Sorted ascending\",\n  sortedDescending: \"Sorted descending\",\n  sort: \"Sort\",\n};\n\n/** The wrapper owns row padding so every cell under it tightens together. */\nexport type TableDensity = \"comfortable\" | \"compact\";\n\n/** Alignment vocabulary shared by headers and cells. */\nexport type TableAlign = \"left\" | \"center\" | \"right\";\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from \"vue\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The table's caption, rendered as a real `<caption>` — the accessible\n     * name for the whole table and the first thing a screen reader says.\n     */\n    caption?: string;\n    /** Row padding. Compact suits dense application chrome. */\n    density?: TableDensity;\n    /** Names what the table is when no caption fits visually; falls to the labels seam otherwise. */\n    labels?: LabelOverrides<TableLabels>;\n  }>(),\n  { density: \"comfortable\" },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves, and a template reading the raw prop would be reading the\n// overrides rather than the answer.\nconst text = useLabels(\"table\", TABLE_LABELS, () => props.labels);\n\n// The region is focusable only while it can actually scroll: a Tab stop that\n// never moves is a dead one. Overflow is measured, not assumed — tables fit\n// their container most of the time — and re-measured whenever either side of\n// the ratio changes.\nconst region = ref<HTMLElement | null>(null);\nconst table = ref<HTMLElement | null>(null);\nconst scrollable = ref(false);\n\nfunction measure(): void {\n  const el = region.value;\n  if (el) scrollable.value = el.scrollWidth > el.clientWidth;\n}\n\nlet observer: ResizeObserver | undefined;\nonMounted(() => {\n  measure();\n  observer = new ResizeObserver(measure);\n  if (table.value) observer.observe(table.value);\n  window.addEventListener(\"resize\", measure, { passive: true });\n});\nonBeforeUnmount(() => {\n  observer?.disconnect();\n  window.removeEventListener(\"resize\", measure);\n});\n</script>\n\n<template>\n  <!-- A scroll container, not the table itself: wide tables overflow their\n       region instead of stretching the page (Loom's content-never-stretches\n       law), and the region carries the caption as its accessible name so a\n       screen reader announces what this scrollable thing IS before entering.\n       Focusable only while it can actually scroll — measured below, since a\n       focusable region that never scrolls is a dead Tab stop. -->\n  <div\n    ref=\"region\"\n    role=\"region\"\n    :aria-label=\"caption ?? text.region\"\n    :tabindex=\"scrollable ? 0 : undefined\"\n    class=\"w-full overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n  >\n    <table\n      ref=\"table\"\n      :data-density=\"density\"\n      :class=\"\n        cn(\n          'w-full border-collapse text-left text-sm',\n          // Descendant styling is the wrapper's job: writing these per-cell\n          // would re-litigate the hairline at every call site.\n          '[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-xs [&_th]:font-semibold [&_th]:text-muted-foreground [&_th]:whitespace-nowrap',\n          '[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:align-top [&_td]:text-foreground',\n          `[&[data-density='comfortable']_td]:py-3`,\n          `[&[data-density='compact']_td]:py-1.5`,\n          `[&[data-density='compact']_th]:py-1.5`,\n          '[&_tbody_tr:last-child_td]:border-b-0',\n          '[&_tfoot_td]:border-t [&_tfoot_td]:border-border-strong [&_tfoot_td]:font-medium',\n        )\n      \"\n    >\n      <caption v-if=\"caption\" class=\"sr-only\">\n        {{\n          caption\n        }}\n      </caption>\n      <!-- @slot Real table markup: `<thead>`/`<tbody>`/`<tfoot>` rows built\n           from `TableRow`, `TableHead` and `TableCell`. -->\n      <slot />\n    </table>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;AAQA,IAAa,eAA4B;CACvC,QAAQ;CACR,iBAAiB;CACjB,kBAAkB;CAClB,MAAM;AACR;;;;;;;;;EAcA,MAAM,QAAQ;EAkBd,MAAM,OAAO,UAAU,SAAS,oBAAoB,MAAM,MAAM;EAMhE,MAAM,SAAS,IAAwB,IAAI;EAC3C,MAAM,QAAQ,IAAwB,IAAI;EAC1C,MAAM,aAAa,IAAI,KAAK;EAE5B,SAAS,UAAgB;GACvB,MAAM,KAAK,OAAO;GAClB,IAAI,IAAI,WAAW,QAAQ,GAAG,cAAc,GAAG;EACjD;EAEA,IAAI;EACJ,gBAAgB;GACd,QAAQ;GACR,WAAW,IAAI,eAAe,OAAO;GACrC,IAAI,MAAM,OAAO,SAAS,QAAQ,MAAM,KAAK;GAC7C,OAAO,iBAAiB,UAAU,SAAS,EAAE,SAAS,KAAK,CAAC;EAC9D,CAAC;EACD,sBAAsB;GACpB,UAAU,WAAW;GACrB,OAAO,oBAAoB,UAAU,OAAO;EAC9C,CAAC;;GAUC,OAAA,UAAA,GAAA,mBAkCM,OAAA;IAjCA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACJ,cAAY,QAAA,WAAW,MAAA,IAAA,CAAI,CAAC;IAC5B,UAAU,WAAA,QAAU,IAAO,KAAA;IAC5B,OAAM;GAEN,GAAA,CAAA,mBA0BQ,SAAA;IAzBF,SAAA;IAAJ,KAAI;IACH,gBAAc,QAAA;IACd,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,4CAAA,mKAAA,4FAAA,2CAAA,yCAAA,yCAAA,yCAAA,kFAAA,CAAA;GAeJ,GAAA,CAAA,QAAA,WAAf,UAAA,GAAA,mBAIU,WAJV,YAIU,gBAFN,QAAA,OAAO,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAKX,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA,CAAA,GAAA,GAAA,UAAA"}

package/dist/packages/primitives/table/src/TableCell.js

@@ -0,0 +1,7 @@
+import TableCell_vue_vue_type_script_setup_true_lang_default from "./TableCell.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/table/src/TableCell.vue
+var TableCell_default = TableCell_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TableCell_default as default };
+
+//# sourceMappingURL=TableCell.js.map

package/dist/packages/primitives/table/src/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","names":[],"sources":["../../../../../packages/primitives/table/src/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { headAlignClass } from \"./TableHead.vue\";\nimport type { TableAlign } from \"./Table.vue\";\n\nwithDefaults(\n  defineProps<{\n    /** Text alignment; numeric figures want `\"right\"` for the tabular digits. */\n    align?: TableAlign;\n  }>(),\n  {},\n);\n</script>\n\n<template>\n  <td :class=\"headAlignClass(align)\">\n    <!-- @slot The cell's content — text, a Badge, a RowActions cluster. -->\n    <slot />\n  </td>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/table/src/TableCell.vue.d.ts

@@ -0,0 +1,19 @@
+import type { TableAlign } from "./Table.vue";
+type __VLS_Props = {
+    /** Text alignment; numeric figures want `"right"` for the tabular digits. */
+    align?: TableAlign;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=TableCell.vue.d.ts.map

package/dist/packages/primitives/table/src/TableCell.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/table/src/TableCell.vue"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,KAAK,WAAW,GAAG;IACf,6EAA6E;IAC7E,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AA8BJ,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,kSAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/primitives/table/src/TableCell.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,17 @@
+import { headAlignClass } from "./TableHead.vue_vue_type_script_setup_true_lang.js";
+import "./TableHead.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#region packages/primitives/table/src/TableCell.vue?vue&type=script&setup=true&lang.ts
+var TableCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "TableCell",
+	props: { align: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("td", { class: normalizeClass(unref(headAlignClass)(__props.align)) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { TableCell_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=TableCell.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/table/src/TableCell.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/table/src/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { headAlignClass } from \"./TableHead.vue\";\nimport type { TableAlign } from \"./Table.vue\";\n\nwithDefaults(\n  defineProps<{\n    /** Text alignment; numeric figures want `\"right\"` for the tabular digits. */\n    align?: TableAlign;\n  }>(),\n  {},\n);\n</script>\n\n<template>\n  <td :class=\"headAlignClass(align)\">\n    <!-- @slot The cell's content — text, a Badge, a RowActions cluster. -->\n    <slot />\n  </td>\n</template>\n"],"mappings":";;;;;;;;;GAcE,OAAA,UAAA,GAAA,mBAGK,MAAA,EAHA,OAAK,eAAE,MAAA,cAAA,CAAc,CAAC,QAAA,KAAK,CAAA,EAAA,GAAA,CAE9B,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/packages/primitives/table/src/TableHead.js

@@ -0,0 +1,7 @@
+import TableHead_vue_vue_type_script_setup_true_lang_default, { headAlignClass, nextSort } from "./TableHead.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/table/src/TableHead.vue
+var TableHead_default = TableHead_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TableHead_default as default, headAlignClass, nextSort };
+
+//# sourceMappingURL=TableHead.js.map

package/dist/packages/primitives/table/src/TableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.js","names":[],"sources":["../../../../../packages/primitives/table/src/TableHead.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TableAlign } from \"./Table.vue\";\n\n/**\n * Sort state for a sortable header. Tri-state by omission: a sortable column\n * that is not the active sort simply has no direction, which is what\n * `aria-sort`'s absent-attribute form expresses.\n */\nexport type TableSort = \"asc\" | \"desc\";\n\n/** Alignment vocabulary shared with `TableCell`. */\nconst ALIGN_CLASS: Record<TableAlign, string> = {\n  left: \"text-left\",\n  center: \"text-center\",\n  // Numeric columns are read down, not across; tabular digits keep the\n  // places lined up while the eye travels.\n  right: \"text-right [font-variant-numeric:tabular-nums]\",\n};\n\nexport const headAlignClass = (align: TableAlign | undefined): string =>\n  align ? ALIGN_CLASS[align] : \"\";\n\n/** Cycle order: nothing → ascending → descending → nothing. */\nexport const nextSort = (current: TableSort | undefined): TableSort | undefined =>\n  current === undefined ? \"asc\" : current === \"asc\" ? \"desc\" : undefined;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { ChevronDown, ChevronsUpDown, ChevronUp } from \"@lucide/vue\";\nimport { useLabels, type LabelOverrides, type TableLabels } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { TABLE_LABELS } from \"./Table.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text alignment; numeric columns want `\"right\"`. */\n    align?: TableAlign;\n    /**\n     * Renders the header as a sort control cycling asc → desc → none.\n     * State is the host's through `v-model:sort`; omit the binding and the\n     * header cycles on its own while still reporting each change.\n     */\n    sortable?: boolean;\n    /** The current direction when sortable. Omit it for an uncontrolled cycle. */\n    sort?: TableSort | undefined;\n    /** Names what the control says on its own account, as any subset of `TableLabels`. */\n    labels?: LabelOverrides<TableLabels>;\n  }>(),\n  { sortable: false },\n);\n\nconst emit = defineEmits<{ \"update:sort\": [value: TableSort | undefined] }>();\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"table\", TABLE_LABELS, () => props.labels);\n\n// Uncontrolled fallback lives here so a host can write plain `sortable`.\nconst inner = ref<TableSort | undefined>(undefined);\nconst current = computed(() => props.sort ?? inner.value);\n\nfunction toggle(): void {\n  const next = nextSort(current.value);\n  inner.value = next;\n  emit(\"update:sort\", next);\n}\n\nconst SORT_ICON = { asc: ChevronUp, desc: ChevronDown } as const;\nconst sortIcon = computed(() => (current.value ? SORT_ICON[current.value] : ChevronsUpDown));\n\n// aria-sort takes full ARIA tokens, not our compact union.\nconst ARIA_SORT = { asc: \"ascending\", desc: \"descending\" } as const;\nconst ariaSort = computed(() => (current.value ? ARIA_SORT[current.value] : undefined));\n</script>\n\n<template>\n  <th scope=\"col\" :aria-sort=\"ariaSort\" :class=\"cn(headAlignClass(align))\">\n    <!-- The sort control carries its state in words as well as glyphs — a\n         chevron alone is colour/shape-only semantics. `min-h-6` is the WCAG\n         2.5.8 floor made explicit: a text-xs label alone sits under the 24px\n         target every interactive control owes. -->\n    <button\n      v-if=\"sortable\"\n      type=\"button\"\n      class=\"inline-flex min-h-6 items-center gap-1 rounded-sm px-1 transition-colors duration-fast ease-out hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n      @click=\"toggle()\"\n    >\n      <span class=\"group inline-flex items-center gap-1 font-semibold\">\n        <slot />\n      </span>\n      <component\n        :is=\"sortIcon\"\n        class=\"h-3.5 w-3.5 shrink-0 text-muted-foreground\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"sr-only\">{{\n        current === \"asc\"\n          ? text.sortedAscending\n          : current === \"desc\"\n            ? text.sortedDescending\n            : text.sort\n      }}</span>\n    </button>\n    <template v-else><slot /></template>\n  </th>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/table/src/TableHead.vue.d.ts

@@ -0,0 +1,56 @@
+import { type LabelOverrides, type TableLabels } from "../../../labels/src/index";
+import type { TableAlign } from "./Table.vue";
+/**
+ * Sort state for a sortable header. Tri-state by omission: a sortable column
+ * that is not the active sort simply has no direction, which is what
+ * `aria-sort`'s absent-attribute form expresses.
+ */
+export type TableSort = "asc" | "desc";
+export declare const headAlignClass: (align: TableAlign | undefined) => string;
+/** Cycle order: nothing → ascending → descending → nothing. */
+export declare const nextSort: (current: TableSort | undefined) => TableSort | undefined;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Text alignment; numeric columns want `"right"`. */
+    align?: TableAlign;
+    /**
+     * Renders the header as a sort control cycling asc → desc → none.
+     * State is the host's through `v-model:sort`; omit the binding and the
+     * header cycles on its own while still reporting each change.
+     */
+    sortable?: boolean;
+    /** The current direction when sortable. Omit it for an uncontrolled cycle. */
+    sort?: TableSort | undefined;
+    /** Names what the control says on its own account, as any subset of `TableLabels`. */
+    labels?: LabelOverrides<TableLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:sort": (value: TableSort | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** Text alignment; numeric columns want `"right"`. */
+    align?: TableAlign;
+    /**
+     * Renders the header as a sort control cycling asc → desc → none.
+     * State is the host's through `v-model:sort`; omit the binding and the
+     * header cycles on its own while still reporting each change.
+     */
+    sortable?: boolean;
+    /** The current direction when sortable. Omit it for an uncontrolled cycle. */
+    sort?: TableSort | undefined;
+    /** Names what the control says on its own account, as any subset of `TableLabels`. */
+    labels?: LabelOverrides<TableLabels>;
+}> & Readonly<{
+    "onUpdate:sort"?: (value: TableSort | undefined) => any;
+}>, {
+    sortable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=TableHead.vue.d.ts.map