@ecoma-io/loom 0.3.0 → 0.5.0

package/dist/packages/primitives/select/src/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../../../packages/primitives/select/src/Select.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** One row of the list. `value` is what the model carries; `label` is what a reader sees. */\nexport interface SelectOption {\n  /** The value bound to `v-model` when this row is chosen. Unique within the list. */\n  value: string;\n  /** The text shown on the row, and on the trigger once it is chosen. */\n  label: string;\n  /** Present but unchoosable — visible, skipped by the keyboard, unclickable. */\n  disabled?: boolean;\n}\n\n/**\n * The trigger's height scale. It matches the text input scale exactly, so a\n * form row mixing a Select beside a text field never comes out uneven — which\n * is why reaching past `size` for an `h-*` class is always the wrong fix.\n */\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nexport const selectVariants = cva(\n  [\n    \"group inline-flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground\",\n    \"transition-[color,background-color,box-shadow] duration-fast ease-out hover:bg-subtle\",\n    // Rim-lit at rest; the ring blooms on focus.\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n    // No `opacity` here, and that is the point. The trigger is the node that\n    // carries the chosen label, and what a reader needs from an unavailable\n    // Select is exactly that: what it is set to. `disabled:opacity-50`\n    // composited `text-foreground` down to 3.06:1 on this fill — halving the\n    // alpha more than halves the contrast. Unavailability is painted in\n    // measured colours instead: the fill drains to the neutral well and the\n    // label lands on `--color-muted-foreground`, 4.68:1 over it.\n    //\n    // Both survive their neighbours on this element. `hover:` sorts *before*\n    // `disabled:` in Tailwind's variant order, so the disabled fill wins over\n    // `hover:bg-subtle` rather than flickering under a pointer; and\n    // `data-[placeholder]:text-muted-foreground` names the same colour, so the\n    // two colour rules agree whatever the sort puts last.\n    //\n    // The third channel — the rim slackening from `input` to `border` — is\n    // **not** here, and cannot be: a `disabled:` variant outranks a plain\n    // `border-destructive` on specificity, so a Select that was both in error\n    // and unavailable would lose its destructive rim to it. It is written as a\n    // plain conditional in the template, where `cn()` can order the two.\n    \"disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\",\n    \"data-[placeholder]:text-muted-foreground\",\n  ],\n  {\n    // `satisfies` keeps the two halves honest: the union above is the name a\n    // consumer imports and the documentation prints, the map below is the\n    // classes. Adding a member to one and not the other stops compiling.\n    variants: {\n      size: {\n        sm: \"h-8 px-2.5 text-xs\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-11 px-4 text-base\",\n      } satisfies Record<SelectSize, string>,\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n  SelectIcon,\n  SelectPortal,\n  SelectContent,\n  SelectViewport,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n} from \"reka-ui\";\nimport { computed } from \"vue\";\nimport { Check, ChevronDown } from \"@lucide/vue\";\nimport { cn, listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Select — pick one value out of a closed list, through a compact trigger and\n * a popover listbox. It suits roughly three to fifteen rows where one value is\n * always chosen: a language, a resolution, a quality preset.\n *\n * Below that, two to five options a reader should see all of at once are\n * better shown than hidden. Above it, a list long enough to need searching\n * wants a combobox, which is a different control rather than a longer version\n * of this one.\n *\n * Built on Reka UI's Select, which supplies the listbox semantics: arrow-key\n * navigation, first-character typeahead, Escape and outside-click to close, and\n * the `role=\"combobox\"` trigger wired to the listbox by `aria-expanded` and\n * `aria-controls`. The active row is tracked by moving real focus onto it, not\n * by `aria-activedescendant`.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id of\n * its hint or error line, `required`, `invalid`, `disabled` and the name the\n * chosen value is submitted under all arrive through `useFieldControl()`, so\n * `<Field label=\"Language\" error=\"…\"><Select … /></Field>` needs no attributes\n * at the call site. Both booleans below still win over the row when they are\n * set, in both directions — which is why they default to `undefined` rather\n * than `false`.\n *\n * A row's `readonly` is deliberately ignored. A read-only value is one a reader\n * may see and copy but not change, and a closed list has nothing to show that\n * the trigger is not already showing — so a read-only Select is a disabled\n * Select that lies about being reachable. Rows holding a value nobody may edit\n * want a disabled Select, or no control at all.\n *\n * The consequence is that the library's three resting appearances collapse to\n * two here. A TextField rests available, on show, or unavailable; this control\n * has no middle state, so the lifted `subtle` fill never appears on it and the\n * trigger goes straight from `background` to the drained fill, muted label and\n * slackened rim of the disabled row.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The chosen option's `value`. Leave it unset to show the placeholder. */\n    modelValue?: string;\n    /** The rows, in the order they are shown. */\n    options: SelectOption[];\n    /** Shown on the trigger while nothing is chosen. It is not an option. */\n    placeholder?: string;\n    /** Unavailable: dims the trigger and refuses to open. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */\n    size?: SelectSize;\n  }>(),\n  {\n    // Not `false`, for either. `false` is a caller saying \"this control is fine\n    // / enabled even though its row is not\"; absent is a caller saying nothing,\n    // and only `undefined` survives to mean that past Vue's\n    // absent-Boolean-casts-to-false rule — see TextField.vue, which carries the\n    // full reasoning.\n    disabled: undefined,\n    invalid: undefined,\n    size: \"md\",\n  },\n);\n\ndefineEmits<{\n  /** The chosen option's `value`. Fires once per choice; the list closes with it. */\n  \"update:modelValue\": [value: string];\n}>();\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the trigger,\n// which is the interactive element they describe.\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 `w-28`\n// silently loses to the trigger's own `w-full` depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: triggerAttrs } = useSplitAttrs();\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// `readonly` and `required` are absent from this object because there is no\n// prop to oppose the row with; the row's answer stands unopposed, which is\n// what is wanted.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n  invalid: props.invalid,\n}));\n\n// Two of the resolved keys do not travel with the bag, and both are Reka\n// facts rather than preferences.\n//\n// `aria-required` cannot be delivered this way at all: Reka's `Slot` merges an\n// as-child chain as `mergeProps(attrs, child.props)`, so the trigger's own\n// declaration — `aria-required` off the root's `required` prop — beats anything\n// arriving from outside, and a value spread here would be dropped silently.\n// The root's prop below is the only lever, and it is bound from the same\n// resolved value.\n//\n// `name` would be the `name` of a `<button type=\"button\">`, which no form\n// submission has ever included; the hidden input at the end of the template\n// carries the value instead.\nconst triggerFieldAttrs = computed(() => {\n  // Removed from a copy rather than listed positively, so a key added to the\n  // resolved bag later reaches this trigger without anyone remembering to come\n  // back here.\n  const aria: Record<string, unknown> = { ...field.attrs };\n  delete aria.name;\n  delete aria[\"aria-required\"];\n  return aria;\n});\n</script>\n\n<template>\n  <SelectRoot\n    :model-value=\"modelValue ?? ''\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <SelectTrigger\n      v-bind=\"{ ...triggerAttrs, ...triggerFieldAttrs }\"\n      :data-invalid=\"field.invalid || undefined\"\n      :class=\"\n        cn(\n          selectVariants({ size }),\n          !field.invalid && 'focus-visible:shadow-halo',\n          // The border half of the disabled treatment, and it lives here rather\n          // than beside the fill in the variant map for the reason written\n          // there. Read as a pair with the line below: `cn()` resolves a border\n          // colour by whichever class it saw last, so an unavailable trigger\n          // that is also in error still shows the destructive rim.\n          field.disabled && 'border-border',\n          field.invalid && 'border-destructive focus-visible:outline-destructive',\n          attrs.class as string,\n        )\n      \"\n    >\n      <SelectValue :placeholder=\"placeholder ?? ''\" />\n      <SelectIcon class=\"shrink-0 text-muted-foreground\">\n        <ChevronDown\n          class=\"h-4 w-4 transition-transform duration-fast ease-out group-data-[state=open]:rotate-180\"\n        />\n      </SelectIcon>\n    </SelectTrigger>\n\n    <SelectPortal>\n      <SelectContent\n        position=\"popper\"\n        :side-offset=\"6\"\n        :class=\"\n          cn(\n            'z-50 min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md',\n            // Scoped to the open state, never unconditional. Reka keeps the\n            // closed content mounted while it waits for an animationend that a\n            // mount-only animation never fires again — an invisible overlay\n            // eating clicks. Scoping it makes the closed element compute\n            // `animation-name: none`, which is the immediate-unmount branch.\n            'data-[state=open]:animate-fade-rise',\n          )\n        \"\n      >\n        <SelectViewport class=\"p-1\">\n          <!-- The rows reveal one step after another, from the shared stagger\n               vocabulary rather than a per-template delay of its own. -->\n          <SelectItem\n            v-for=\"(option, index) in options\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled ?? false\"\n            :style=\"{ animationDelay: listStaggerDelay(index) }\"\n            :class=\"\n              cn(\n                'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-1.5 pr-8 text-sm text-foreground outline-none',\n                'transition-colors duration-fast ease-out',\n                'animate-fade-rise',\n                'data-[highlighted]:bg-subtle',\n                'data-[state=checked]:bg-primary-muted data-[state=checked]:text-primary-text',\n                // Inert, but still readable: a row a reader cannot pick is\n                // still a row they have to read to understand why the list is\n                // shaped the way it is. `data-[disabled]:opacity-50` took the\n                // label to 3.13:1 on the popover; the colour on the text node\n                // below leaves it at 5.76:1 and still visibly lighter than the\n                // rows around it.\n                'data-[disabled]:pointer-events-none',\n              )\n            \"\n          >\n            <!-- The mute lives here rather than on the row, and it has to.\n                 `data-[disabled]:` sorts *before* `data-[state=checked]:` in\n                 Tailwind's variant order, so a disabled row that is also the\n                 chosen one would take `text-primary-text` from the container and a\n                 container colour is only inherited. Declared on the text node\n                 it wins whatever the row resolved to. -->\n            <SelectItemText :class=\"option.disabled && 'text-muted-foreground'\">{{\n              option.label\n            }}</SelectItemText>\n            <SelectItemIndicator class=\"absolute right-2 inline-flex items-center\">\n              <Check class=\"h-4 w-4\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n\n    <!-- What a surrounding `<form>` reads, and only once a row has given this\n         control a name. Reka can render a hidden native `<select>` from the\n         root's own `name` instead, and two of its behaviours are wrong here: a\n         native select always resolves to one of its options, so it would post\n         the first row while the placeholder was still showing, and `required`\n         on a visually-hidden control arms browser validation the library\n         deliberately never arms — a submission blocked with \"an invalid form\n         control is not focusable\" and no bubble anyone can see. A hidden input\n         posts the model and nothing else. -->\n    <input\n      v-if=\"field.name\"\n      type=\"hidden\"\n      :name=\"field.name\"\n      :value=\"modelValue ?? ''\"\n      :disabled=\"field.disabled\"\n    />\n  </SelectRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../../../packages/primitives/select/src/Select.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** One row of the list. `value` is what the model carries; `label` is what a reader sees. */\nexport interface SelectOption {\n  /** The value bound to `v-model` when this row is chosen. Unique within the list. */\n  value: string;\n  /** The text shown on the row, and on the trigger once it is chosen. */\n  label: string;\n  /** Present but unchoosable — visible, skipped by the keyboard, unclickable. */\n  disabled?: boolean;\n}\n\n/**\n * The trigger's height scale. It matches the text input scale exactly, so a\n * form row mixing a Select beside a text field never comes out uneven — which\n * is why reaching past `size` for an `h-*` class is always the wrong fix.\n */\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nexport const selectVariants = cva(\n  [\n    \"group inline-flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground\",\n    \"transition-[color,background-color,box-shadow] duration-fast ease-out hover:bg-subtle\",\n    // Rim-lit at rest; the ring blooms on focus.\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n    // No `opacity` here, and that is the point. The trigger is the node that\n    // carries the chosen label, and what a reader needs from an unavailable\n    // Select is exactly that: what it is set to. `disabled:opacity-50`\n    // composited `text-foreground` down to 3.06:1 on this fill — halving the\n    // alpha more than halves the contrast. Unavailability is painted in\n    // measured colours instead: the fill drains to the neutral well and the\n    // label lands on `--color-muted-foreground`, 4.68:1 over it.\n    //\n    // Both survive their neighbours on this element. `hover:` sorts *before*\n    // `disabled:` in Tailwind's variant order, so the disabled fill wins over\n    // `hover:bg-subtle` rather than flickering under a pointer; and\n    // `data-[placeholder]:text-muted-foreground` names the same colour, so the\n    // two colour rules agree whatever the sort puts last.\n    //\n    // The third channel — the rim slackening from `input` to `border` — is\n    // **not** here, and cannot be: a `disabled:` variant outranks a plain\n    // `border-destructive` on specificity, so a Select that was both in error\n    // and unavailable would lose its destructive rim to it. It is written as a\n    // plain conditional in the template, where `cn()` can order the two.\n    \"disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\",\n    \"data-[placeholder]:text-muted-foreground\",\n  ],\n  {\n    // `satisfies` keeps the two halves honest: the union above is the name a\n    // consumer imports and the documentation prints, the map below is the\n    // classes. Adding a member to one and not the other stops compiling.\n    variants: {\n      size: {\n        sm: \"h-8 px-2.5 text-xs\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-11 px-4 text-base\",\n      } satisfies Record<SelectSize, string>,\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n  SelectIcon,\n  SelectPortal,\n  SelectContent,\n  SelectViewport,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n} from \"reka-ui\";\nimport { computed } from \"vue\";\nimport { Check, ChevronDown } from \"@lucide/vue\";\nimport { cn, listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Select — pick one value out of a closed list, through a compact trigger and\n * a popover listbox. It suits roughly three to fifteen rows where one value is\n * always chosen: a language, a resolution, a quality preset.\n *\n * Below that, two to five options a reader should see all of at once are\n * better shown than hidden. Above it, a list long enough to need searching\n * wants a combobox, which is a different control rather than a longer version\n * of this one.\n *\n * Built on Reka UI's Select, which supplies the listbox semantics: arrow-key\n * navigation, first-character typeahead, Escape and outside-click to close, and\n * the `role=\"combobox\"` trigger wired to the listbox by `aria-expanded` and\n * `aria-controls`. The active row is tracked by moving real focus onto it, not\n * by `aria-activedescendant`.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id of\n * its hint or error line, `required`, `invalid`, `disabled` and the name the\n * chosen value is submitted under all arrive through `useFieldControl()`, so\n * `<Field label=\"Language\" error=\"…\"><Select … /></Field>` needs no attributes\n * at the call site. Both booleans below still win over the row when they are\n * set, in both directions — which is why they default to `undefined` rather\n * than `false`.\n *\n * A row's `readonly` is deliberately ignored. A read-only value is one a reader\n * may see and copy but not change, and a closed list has nothing to show that\n * the trigger is not already showing — so a read-only Select is a disabled\n * Select that lies about being reachable. Rows holding a value nobody may edit\n * want a disabled Select, or no control at all.\n *\n * The consequence is that the library's three resting appearances collapse to\n * two here. A TextField rests available, on show, or unavailable; this control\n * has no middle state, so the lifted `subtle` fill never appears on it and the\n * trigger goes straight from `background` to the drained fill, muted label and\n * slackened rim of the disabled row.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The chosen option's `value`. Leave it unset to show the placeholder. */\n    modelValue?: string;\n    /** The rows, in the order they are shown. */\n    options: SelectOption[];\n    /** Shown on the trigger while nothing is chosen. It is not an option. */\n    placeholder?: string;\n    /** Unavailable: dims the trigger and refuses to open. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */\n    size?: SelectSize;\n  }>(),\n  {\n    // Not `false`, for either. `false` is a caller saying \"this control is fine\n    // / enabled even though its row is not\"; absent is a caller saying nothing,\n    // and only `undefined` survives to mean that past Vue's\n    // absent-Boolean-casts-to-false rule — see TextField.vue, which carries the\n    // full reasoning.\n    disabled: undefined,\n    invalid: undefined,\n    size: \"md\",\n  },\n);\n\ndefineEmits<{\n  /** The chosen option's `value`. Fires once per choice; the list closes with it. */\n  \"update:modelValue\": [value: string];\n}>();\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the trigger,\n// which is the interactive element they describe.\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 `w-28`\n// silently loses to the trigger's own `w-full` depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: triggerAttrs } = useSplitAttrs();\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// `readonly` and `required` are absent from this object because there is no\n// prop to oppose the row with; the row's answer stands unopposed, which is\n// what is wanted.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n  invalid: props.invalid,\n}));\n\n// Two of the resolved keys do not travel with the bag, and both are Reka\n// facts rather than preferences.\n//\n// `aria-required` cannot be delivered this way at all: Reka's `Slot` merges an\n// as-child chain as `mergeProps(attrs, child.props)`, so the trigger's own\n// declaration — `aria-required` off the root's `required` prop — beats anything\n// arriving from outside, and a value spread here would be dropped silently.\n// The root's prop below is the only lever, and it is bound from the same\n// resolved value.\n//\n// `name` would be the `name` of a `<button type=\"button\">`, which no form\n// submission has ever included; the hidden input at the end of the template\n// carries the value instead.\nconst triggerFieldAttrs = computed(() => {\n  // Removed from a copy rather than listed positively, so a key added to the\n  // resolved bag later reaches this trigger without anyone remembering to come\n  // back here.\n  const aria: Record<string, unknown> = { ...field.attrs };\n  delete aria.name;\n  delete aria[\"aria-required\"];\n  return aria;\n});\n</script>\n\n<template>\n  <SelectRoot\n    :model-value=\"modelValue ?? ''\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <SelectTrigger\n      v-bind=\"{ ...triggerAttrs, ...triggerFieldAttrs }\"\n      :data-invalid=\"field.invalid || undefined\"\n      :class=\"\n        cn(\n          selectVariants({ size }),\n          !field.invalid && 'focus-visible:shadow-halo',\n          // The border half of the disabled treatment, and it lives here rather\n          // than beside the fill in the variant map for the reason written\n          // there. Read as a pair with the line below: `cn()` resolves a border\n          // colour by whichever class it saw last, so an unavailable trigger\n          // that is also in error still shows the destructive rim.\n          field.disabled && 'border-border',\n          field.invalid && 'border-destructive focus-visible:outline-destructive',\n          attrs.class as string,\n        )\n      \"\n    >\n      <SelectValue :placeholder=\"placeholder ?? ''\" />\n      <SelectIcon class=\"shrink-0 text-muted-foreground\">\n        <ChevronDown\n          class=\"h-4 w-4 transition-transform duration-fast ease-out group-data-[state=open]:rotate-180\"\n        />\n      </SelectIcon>\n    </SelectTrigger>\n\n    <SelectPortal>\n      <SelectContent\n        position=\"popper\"\n        :side-offset=\"6\"\n        :class=\"\n          cn(\n            'z-overlay min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md',\n            // Each half of the motion is scoped to its own state, never\n            // unconditional. Closing swaps the computed animation-name to\n            // fade-fall's, which is what Reka's Presence reads: it holds the\n            // panel mounted until that exit's animationend and only then takes\n            // it away. Unconditional, a finished entrance animation sat on the\n            // closed element and stranded it invisible over the page, eating\n            // clicks.\n            'data-[state=open]:animate-fade-rise data-[state=closed]:animate-fade-fall',\n          )\n        \"\n      >\n        <SelectViewport class=\"p-1\">\n          <!-- The rows reveal one step after another, from the shared stagger\n               vocabulary rather than a per-template delay of its own. -->\n          <SelectItem\n            v-for=\"(option, index) in options\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled ?? false\"\n            :style=\"{ animationDelay: listStaggerDelay(index) }\"\n            :class=\"\n              cn(\n                'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-1.5 pr-8 text-sm text-foreground outline-none',\n                'transition-colors duration-fast ease-out',\n                'animate-fade-rise',\n                'data-[highlighted]:bg-subtle',\n                'data-[state=checked]:bg-primary-muted data-[state=checked]:text-primary-text',\n                // Inert, but still readable: a row a reader cannot pick is\n                // still a row they have to read to understand why the list is\n                // shaped the way it is. `data-[disabled]:opacity-50` took the\n                // label to 3.13:1 on the popover; the colour on the text node\n                // below leaves it at 5.76:1 and still visibly lighter than the\n                // rows around it.\n                'data-[disabled]:pointer-events-none',\n              )\n            \"\n          >\n            <!-- The mute lives here rather than on the row, and it has to.\n                 `data-[disabled]:` sorts *before* `data-[state=checked]:` in\n                 Tailwind's variant order, so a disabled row that is also the\n                 chosen one would take `text-primary-text` from the container and a\n                 container colour is only inherited. Declared on the text node\n                 it wins whatever the row resolved to. -->\n            <SelectItemText :class=\"option.disabled && 'text-muted-foreground'\">{{\n              option.label\n            }}</SelectItemText>\n            <SelectItemIndicator class=\"absolute right-2 inline-flex items-center\">\n              <Check class=\"h-4 w-4\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n\n    <!-- What a surrounding `<form>` reads, and only once a row has given this\n         control a name. Reka can render a hidden native `<select>` from the\n         root's own `name` instead, and two of its behaviours are wrong here: a\n         native select always resolves to one of its options, so it would post\n         the first row while the placeholder was still showing, and `required`\n         on a visually-hidden control arms browser validation the library\n         deliberately never arms — a submission blocked with \"an invalid form\n         control is not focusable\" and no bubble anyone can see. A hidden input\n         posts the model and nothing else. -->\n    <input\n      v-if=\"field.name\"\n      type=\"hidden\"\n      :name=\"field.name\"\n      :value=\"modelValue ?? ''\"\n      :disabled=\"field.disabled\"\n    />\n  </SelectRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/select/src/Select.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/select/src/Select.vue"],"names":[],"mappings":"AA+UA,6FAA6F;AAC7F,MAAM,WAAW,YAAY;IAC3B,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,eAAO,MAAM,cAAc;;8EAyC1B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAsCd,2EAA2E;iBAC9D,MAAM;IACnB,6CAA6C;aACpC,YAAY,EAAE;IACvB,yEAAyE;kBAC3D,MAAM;IACpB,2FAA2F;eAChF,OAAO,GAAG,SAAS;IAC9B,gIAAgI;cACtH,OAAO,GAAG,SAAS;IAC7B,sFAAsF;WAC/E,UAAU;;;;IAXjB,2EAA2E;iBAC9D,MAAM;IACnB,6CAA6C;aACpC,YAAY,EAAE;IACvB,yEAAyE;kBAC3D,MAAM;IACpB,2FAA2F;eAChF,OAAO,GAAG,SAAS;IAC9B,gIAAgI;cACtH,OAAO,GAAG,SAAS;IAC7B,sFAAsF;WAC/E,UAAU;;;;UAAV,UAAU;cAJN,OAAO,GAAG,SAAS;aAEpB,OAAO,GAAG,SAAS;6EAsa7B,CAAC"}
+{"version":3,"file":"Select.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/select/src/Select.vue"],"names":[],"mappings":"AAiVA,6FAA6F;AAC7F,MAAM,WAAW,YAAY;IAC3B,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,eAAO,MAAM,cAAc;;8EAyC1B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAsCd,2EAA2E;iBAC9D,MAAM;IACnB,6CAA6C;aACpC,YAAY,EAAE;IACvB,yEAAyE;kBAC3D,MAAM;IACpB,2FAA2F;eAChF,OAAO,GAAG,SAAS;IAC9B,gIAAgI;cACtH,OAAO,GAAG,SAAS;IAC7B,sFAAsF;WAC/E,UAAU;;;;IAXjB,2EAA2E;iBAC9D,MAAM;IACnB,6CAA6C;aACpC,YAAY,EAAE;IACvB,yEAAyE;kBAC3D,MAAM;IACpB,2FAA2F;eAChF,OAAO,GAAG,SAAS;IAC9B,gIAAgI;cACtH,OAAO,GAAG,SAAS;IAC7B,sFAAsF;WAC/E,UAAU;;;;UAAV,UAAU;cAJN,OAAO,GAAG,SAAS;aAEpB,OAAO,GAAG,SAAS;6EA0a7B,CAAC"}

package/dist/packages/primitives/select/src/Select.vue_vue_type_script_setup_true_lang.js

@@ -122,7 +122,7 @@ var Select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 						default: withCtx(() => [createVNode(unref(SelectContent), {
 							position: "popper",
 							"side-offset": 6,
-							class: normalizeClass(unref(cn)("z-50 min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", "data-[state=open]:animate-fade-rise"))
+							class: normalizeClass(unref(cn)("z-overlay min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", "data-[state=open]:animate-fade-rise data-[state=closed]:animate-fade-fall"))
 						}, {
 							default: withCtx(() => [createVNode(unref(SelectViewport), { class: "p-1" }, {
 								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {

package/dist/packages/primitives/select/src/Select.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/select/src/Select.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** One row of the list. `value` is what the model carries; `label` is what a reader sees. */\nexport interface SelectOption {\n  /** The value bound to `v-model` when this row is chosen. Unique within the list. */\n  value: string;\n  /** The text shown on the row, and on the trigger once it is chosen. */\n  label: string;\n  /** Present but unchoosable — visible, skipped by the keyboard, unclickable. */\n  disabled?: boolean;\n}\n\n/**\n * The trigger's height scale. It matches the text input scale exactly, so a\n * form row mixing a Select beside a text field never comes out uneven — which\n * is why reaching past `size` for an `h-*` class is always the wrong fix.\n */\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nexport const selectVariants = cva(\n  [\n    \"group inline-flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground\",\n    \"transition-[color,background-color,box-shadow] duration-fast ease-out hover:bg-subtle\",\n    // Rim-lit at rest; the ring blooms on focus.\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n    // No `opacity` here, and that is the point. The trigger is the node that\n    // carries the chosen label, and what a reader needs from an unavailable\n    // Select is exactly that: what it is set to. `disabled:opacity-50`\n    // composited `text-foreground` down to 3.06:1 on this fill — halving the\n    // alpha more than halves the contrast. Unavailability is painted in\n    // measured colours instead: the fill drains to the neutral well and the\n    // label lands on `--color-muted-foreground`, 4.68:1 over it.\n    //\n    // Both survive their neighbours on this element. `hover:` sorts *before*\n    // `disabled:` in Tailwind's variant order, so the disabled fill wins over\n    // `hover:bg-subtle` rather than flickering under a pointer; and\n    // `data-[placeholder]:text-muted-foreground` names the same colour, so the\n    // two colour rules agree whatever the sort puts last.\n    //\n    // The third channel — the rim slackening from `input` to `border` — is\n    // **not** here, and cannot be: a `disabled:` variant outranks a plain\n    // `border-destructive` on specificity, so a Select that was both in error\n    // and unavailable would lose its destructive rim to it. It is written as a\n    // plain conditional in the template, where `cn()` can order the two.\n    \"disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\",\n    \"data-[placeholder]:text-muted-foreground\",\n  ],\n  {\n    // `satisfies` keeps the two halves honest: the union above is the name a\n    // consumer imports and the documentation prints, the map below is the\n    // classes. Adding a member to one and not the other stops compiling.\n    variants: {\n      size: {\n        sm: \"h-8 px-2.5 text-xs\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-11 px-4 text-base\",\n      } satisfies Record<SelectSize, string>,\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n  SelectIcon,\n  SelectPortal,\n  SelectContent,\n  SelectViewport,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n} from \"reka-ui\";\nimport { computed } from \"vue\";\nimport { Check, ChevronDown } from \"@lucide/vue\";\nimport { cn, listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Select — pick one value out of a closed list, through a compact trigger and\n * a popover listbox. It suits roughly three to fifteen rows where one value is\n * always chosen: a language, a resolution, a quality preset.\n *\n * Below that, two to five options a reader should see all of at once are\n * better shown than hidden. Above it, a list long enough to need searching\n * wants a combobox, which is a different control rather than a longer version\n * of this one.\n *\n * Built on Reka UI's Select, which supplies the listbox semantics: arrow-key\n * navigation, first-character typeahead, Escape and outside-click to close, and\n * the `role=\"combobox\"` trigger wired to the listbox by `aria-expanded` and\n * `aria-controls`. The active row is tracked by moving real focus onto it, not\n * by `aria-activedescendant`.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id of\n * its hint or error line, `required`, `invalid`, `disabled` and the name the\n * chosen value is submitted under all arrive through `useFieldControl()`, so\n * `<Field label=\"Language\" error=\"…\"><Select … /></Field>` needs no attributes\n * at the call site. Both booleans below still win over the row when they are\n * set, in both directions — which is why they default to `undefined` rather\n * than `false`.\n *\n * A row's `readonly` is deliberately ignored. A read-only value is one a reader\n * may see and copy but not change, and a closed list has nothing to show that\n * the trigger is not already showing — so a read-only Select is a disabled\n * Select that lies about being reachable. Rows holding a value nobody may edit\n * want a disabled Select, or no control at all.\n *\n * The consequence is that the library's three resting appearances collapse to\n * two here. A TextField rests available, on show, or unavailable; this control\n * has no middle state, so the lifted `subtle` fill never appears on it and the\n * trigger goes straight from `background` to the drained fill, muted label and\n * slackened rim of the disabled row.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The chosen option's `value`. Leave it unset to show the placeholder. */\n    modelValue?: string;\n    /** The rows, in the order they are shown. */\n    options: SelectOption[];\n    /** Shown on the trigger while nothing is chosen. It is not an option. */\n    placeholder?: string;\n    /** Unavailable: dims the trigger and refuses to open. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */\n    size?: SelectSize;\n  }>(),\n  {\n    // Not `false`, for either. `false` is a caller saying \"this control is fine\n    // / enabled even though its row is not\"; absent is a caller saying nothing,\n    // and only `undefined` survives to mean that past Vue's\n    // absent-Boolean-casts-to-false rule — see TextField.vue, which carries the\n    // full reasoning.\n    disabled: undefined,\n    invalid: undefined,\n    size: \"md\",\n  },\n);\n\ndefineEmits<{\n  /** The chosen option's `value`. Fires once per choice; the list closes with it. */\n  \"update:modelValue\": [value: string];\n}>();\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the trigger,\n// which is the interactive element they describe.\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 `w-28`\n// silently loses to the trigger's own `w-full` depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: triggerAttrs } = useSplitAttrs();\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// `readonly` and `required` are absent from this object because there is no\n// prop to oppose the row with; the row's answer stands unopposed, which is\n// what is wanted.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n  invalid: props.invalid,\n}));\n\n// Two of the resolved keys do not travel with the bag, and both are Reka\n// facts rather than preferences.\n//\n// `aria-required` cannot be delivered this way at all: Reka's `Slot` merges an\n// as-child chain as `mergeProps(attrs, child.props)`, so the trigger's own\n// declaration — `aria-required` off the root's `required` prop — beats anything\n// arriving from outside, and a value spread here would be dropped silently.\n// The root's prop below is the only lever, and it is bound from the same\n// resolved value.\n//\n// `name` would be the `name` of a `<button type=\"button\">`, which no form\n// submission has ever included; the hidden input at the end of the template\n// carries the value instead.\nconst triggerFieldAttrs = computed(() => {\n  // Removed from a copy rather than listed positively, so a key added to the\n  // resolved bag later reaches this trigger without anyone remembering to come\n  // back here.\n  const aria: Record<string, unknown> = { ...field.attrs };\n  delete aria.name;\n  delete aria[\"aria-required\"];\n  return aria;\n});\n</script>\n\n<template>\n  <SelectRoot\n    :model-value=\"modelValue ?? ''\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <SelectTrigger\n      v-bind=\"{ ...triggerAttrs, ...triggerFieldAttrs }\"\n      :data-invalid=\"field.invalid || undefined\"\n      :class=\"\n        cn(\n          selectVariants({ size }),\n          !field.invalid && 'focus-visible:shadow-halo',\n          // The border half of the disabled treatment, and it lives here rather\n          // than beside the fill in the variant map for the reason written\n          // there. Read as a pair with the line below: `cn()` resolves a border\n          // colour by whichever class it saw last, so an unavailable trigger\n          // that is also in error still shows the destructive rim.\n          field.disabled && 'border-border',\n          field.invalid && 'border-destructive focus-visible:outline-destructive',\n          attrs.class as string,\n        )\n      \"\n    >\n      <SelectValue :placeholder=\"placeholder ?? ''\" />\n      <SelectIcon class=\"shrink-0 text-muted-foreground\">\n        <ChevronDown\n          class=\"h-4 w-4 transition-transform duration-fast ease-out group-data-[state=open]:rotate-180\"\n        />\n      </SelectIcon>\n    </SelectTrigger>\n\n    <SelectPortal>\n      <SelectContent\n        position=\"popper\"\n        :side-offset=\"6\"\n        :class=\"\n          cn(\n            'z-50 min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md',\n            // Scoped to the open state, never unconditional. Reka keeps the\n            // closed content mounted while it waits for an animationend that a\n            // mount-only animation never fires again — an invisible overlay\n            // eating clicks. Scoping it makes the closed element compute\n            // `animation-name: none`, which is the immediate-unmount branch.\n            'data-[state=open]:animate-fade-rise',\n          )\n        \"\n      >\n        <SelectViewport class=\"p-1\">\n          <!-- The rows reveal one step after another, from the shared stagger\n               vocabulary rather than a per-template delay of its own. -->\n          <SelectItem\n            v-for=\"(option, index) in options\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled ?? false\"\n            :style=\"{ animationDelay: listStaggerDelay(index) }\"\n            :class=\"\n              cn(\n                'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-1.5 pr-8 text-sm text-foreground outline-none',\n                'transition-colors duration-fast ease-out',\n                'animate-fade-rise',\n                'data-[highlighted]:bg-subtle',\n                'data-[state=checked]:bg-primary-muted data-[state=checked]:text-primary-text',\n                // Inert, but still readable: a row a reader cannot pick is\n                // still a row they have to read to understand why the list is\n                // shaped the way it is. `data-[disabled]:opacity-50` took the\n                // label to 3.13:1 on the popover; the colour on the text node\n                // below leaves it at 5.76:1 and still visibly lighter than the\n                // rows around it.\n                'data-[disabled]:pointer-events-none',\n              )\n            \"\n          >\n            <!-- The mute lives here rather than on the row, and it has to.\n                 `data-[disabled]:` sorts *before* `data-[state=checked]:` in\n                 Tailwind's variant order, so a disabled row that is also the\n                 chosen one would take `text-primary-text` from the container and a\n                 container colour is only inherited. Declared on the text node\n                 it wins whatever the row resolved to. -->\n            <SelectItemText :class=\"option.disabled && 'text-muted-foreground'\">{{\n              option.label\n            }}</SelectItemText>\n            <SelectItemIndicator class=\"absolute right-2 inline-flex items-center\">\n              <Check class=\"h-4 w-4\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n\n    <!-- What a surrounding `<form>` reads, and only once a row has given this\n         control a name. Reka can render a hidden native `<select>` from the\n         root's own `name` instead, and two of its behaviours are wrong here: a\n         native select always resolves to one of its options, so it would post\n         the first row while the placeholder was still showing, and `required`\n         on a visually-hidden control arms browser validation the library\n         deliberately never arms — a submission blocked with \"an invalid form\n         control is not focusable\" and no bubble anyone can see. A hidden input\n         posts the model and nothing else. -->\n    <input\n      v-if=\"field.name\"\n      type=\"hidden\"\n      :name=\"field.name\"\n      :value=\"modelValue ?? ''\"\n      :disabled=\"field.disabled\"\n    />\n  </SelectRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAa,iBAAiB,IAC5B;CACE;CACA;CAEA;CAoBA;CACA;AACF,GACA;CAIE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;;;;;EA0DA,MAAM,QAAQ;EA0Cd,MAAM,EAAE,OAAO,MAAM,iBAAiB,cAAc;EASpD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,UAAU,MAAM;GAChB,SAAS,MAAM;EACjB,EAAE;EAeF,MAAM,oBAAoB,eAAe;GAIvC,MAAM,OAAgC,EAAE,GAAG,MAAM,MAAM;GACvD,OAAO,KAAK;GACZ,OAAO,KAAK;GACZ,OAAO;EACT,CAAC;;GAIC,OAAA,UAAA,GAAA,YA2Ga,MAAA,UAAA,GAAA;IA1GV,eAAa,QAAA,cAAU;IACvB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAE7D,SAAA,cAwBgB;KAxBhB,YAwBgB,MAAA,aAAA,GAxBhB,WAwBgB;MAAA,GAvBD,MAAA,YAAA;MAAY,GAAK,kBAAA;KAAiB,GAAA;MAC9C,gBAAc,MAAA,KAAA,CAAK,CAAC,WAAW,KAAA;MAC/B,OAAgB,MAAA,EAAA,CAAE,CAAY,MAAA,cAAA,CAAc,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAgB,CAAA,MAAA,KAAA,CAAK,CAAC,WAAO,6BAA2a,MAAA,KAAA,CAAK,CAAC,YAAQ,iBAA+B,MAAA,KAAA,CAAK,CAAC,WAAO,wDAAsE,MAAA,KAAA,CAAK,CAAC,KAAA;;MAeloB,SAAA,cAAgD,CAAhD,YAAgD,MAAA,WAAA,GAAA,EAAlC,aAAa,QAAA,eAAW,GAAA,GAAA,MAAA,GAAA,CAAA,aAAA,CAAA,GACtC,YAIa,MAAA,UAAA,GAAA,EAJD,OAAM,iCAAgC,GAAA;OAChD,SAAA,cAEE,CAFF,YAEE,MAAA,WAAA,GAAA,EADA,OAAM,yFAAwF,CAAA,CAAA,CAAA;;;;;KAKpG,YAyDe,MAAA,YAAA,GAAA,MAAA;MAxDb,SAAA,cAuDgB,CAvDhB,YAuDgB,MAAA,aAAA,GAAA;OAtDd,UAAS;OACR,eAAa;OACb,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,8IAAA,qCAAA,CAAA;;OAYrB,SAAA,cAuCiB,CAvCjB,YAuCiB,MAAA,cAAA,GAAA,EAvCD,OAAM,MAAK,GAAA;QAIvB,SAAA,cAAkC,EADpC,UAAA,IAAA,GAAA,mBAmCa,UAAA,MAAA,WAlCe,QAAA,UAAlB,QAAQ,UAAK;SADvB,OAAA,UAAA,GAAA,YAmCa,MAAA,UAAA,GAAA;UAjCV,KAAK,OAAO;UACZ,OAAO,OAAO;UACd,UAAU,OAAO,YAAQ;UACzB,OAAK,eAAA,EAAA,gBAAoB,MAAA,gBAAA,CAAgB,CAAC,KAAK,EAAA,CAAA;UAC/C,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,gIAAA,4CAAA,qBAAA,gCAAA,gFAAA,qCAAA,CAAA;;UAuBzB,SAAA,cAEmB,CAFnB,YAEmB,MAAA,cAAA,GAAA,EAFF,OAAK,eAAE,OAAO,YAAQ,uBAAA,EAAA,GAAA;WAA6B,SAAA,cAElE,CADA,gBAAA,gBAAA,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA;;UAEd,GAAA,MAAA,CAAA,OAAA,CAAA,GAAA,YAEsB,MAAA,mBAAA,GAAA,EAFD,OAAM,4CAA2C,GAAA;WACpE,SAAA,cAAyB,CAAzB,YAAyB,MAAA,KAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;KAiBxB,MAAA,KAAA,CAAK,CAAC,QADd,UAAA,GAAA,mBAME,SAAA;;MAJA,MAAK;MACJ,MAAM,MAAA,KAAA,CAAK,CAAC;MACZ,OAAO,QAAA,cAAU;MACjB,UAAU,MAAA,KAAA,CAAK,CAAC"}
+{"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/select/src/Select.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** One row of the list. `value` is what the model carries; `label` is what a reader sees. */\nexport interface SelectOption {\n  /** The value bound to `v-model` when this row is chosen. Unique within the list. */\n  value: string;\n  /** The text shown on the row, and on the trigger once it is chosen. */\n  label: string;\n  /** Present but unchoosable — visible, skipped by the keyboard, unclickable. */\n  disabled?: boolean;\n}\n\n/**\n * The trigger's height scale. It matches the text input scale exactly, so a\n * form row mixing a Select beside a text field never comes out uneven — which\n * is why reaching past `size` for an `h-*` class is always the wrong fix.\n */\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nexport const selectVariants = cva(\n  [\n    \"group inline-flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground\",\n    \"transition-[color,background-color,box-shadow] duration-fast ease-out hover:bg-subtle\",\n    // Rim-lit at rest; the ring blooms on focus.\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n    // No `opacity` here, and that is the point. The trigger is the node that\n    // carries the chosen label, and what a reader needs from an unavailable\n    // Select is exactly that: what it is set to. `disabled:opacity-50`\n    // composited `text-foreground` down to 3.06:1 on this fill — halving the\n    // alpha more than halves the contrast. Unavailability is painted in\n    // measured colours instead: the fill drains to the neutral well and the\n    // label lands on `--color-muted-foreground`, 4.68:1 over it.\n    //\n    // Both survive their neighbours on this element. `hover:` sorts *before*\n    // `disabled:` in Tailwind's variant order, so the disabled fill wins over\n    // `hover:bg-subtle` rather than flickering under a pointer; and\n    // `data-[placeholder]:text-muted-foreground` names the same colour, so the\n    // two colour rules agree whatever the sort puts last.\n    //\n    // The third channel — the rim slackening from `input` to `border` — is\n    // **not** here, and cannot be: a `disabled:` variant outranks a plain\n    // `border-destructive` on specificity, so a Select that was both in error\n    // and unavailable would lose its destructive rim to it. It is written as a\n    // plain conditional in the template, where `cn()` can order the two.\n    \"disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\",\n    \"data-[placeholder]:text-muted-foreground\",\n  ],\n  {\n    // `satisfies` keeps the two halves honest: the union above is the name a\n    // consumer imports and the documentation prints, the map below is the\n    // classes. Adding a member to one and not the other stops compiling.\n    variants: {\n      size: {\n        sm: \"h-8 px-2.5 text-xs\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-11 px-4 text-base\",\n      } satisfies Record<SelectSize, string>,\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n  SelectIcon,\n  SelectPortal,\n  SelectContent,\n  SelectViewport,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n} from \"reka-ui\";\nimport { computed } from \"vue\";\nimport { Check, ChevronDown } from \"@lucide/vue\";\nimport { cn, listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Select — pick one value out of a closed list, through a compact trigger and\n * a popover listbox. It suits roughly three to fifteen rows where one value is\n * always chosen: a language, a resolution, a quality preset.\n *\n * Below that, two to five options a reader should see all of at once are\n * better shown than hidden. Above it, a list long enough to need searching\n * wants a combobox, which is a different control rather than a longer version\n * of this one.\n *\n * Built on Reka UI's Select, which supplies the listbox semantics: arrow-key\n * navigation, first-character typeahead, Escape and outside-click to close, and\n * the `role=\"combobox\"` trigger wired to the listbox by `aria-expanded` and\n * `aria-controls`. The active row is tracked by moving real focus onto it, not\n * by `aria-activedescendant`.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id of\n * its hint or error line, `required`, `invalid`, `disabled` and the name the\n * chosen value is submitted under all arrive through `useFieldControl()`, so\n * `<Field label=\"Language\" error=\"…\"><Select … /></Field>` needs no attributes\n * at the call site. Both booleans below still win over the row when they are\n * set, in both directions — which is why they default to `undefined` rather\n * than `false`.\n *\n * A row's `readonly` is deliberately ignored. A read-only value is one a reader\n * may see and copy but not change, and a closed list has nothing to show that\n * the trigger is not already showing — so a read-only Select is a disabled\n * Select that lies about being reachable. Rows holding a value nobody may edit\n * want a disabled Select, or no control at all.\n *\n * The consequence is that the library's three resting appearances collapse to\n * two here. A TextField rests available, on show, or unavailable; this control\n * has no middle state, so the lifted `subtle` fill never appears on it and the\n * trigger goes straight from `background` to the drained fill, muted label and\n * slackened rim of the disabled row.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The chosen option's `value`. Leave it unset to show the placeholder. */\n    modelValue?: string;\n    /** The rows, in the order they are shown. */\n    options: SelectOption[];\n    /** Shown on the trigger while nothing is chosen. It is not an option. */\n    placeholder?: string;\n    /** Unavailable: dims the trigger and refuses to open. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */\n    size?: SelectSize;\n  }>(),\n  {\n    // Not `false`, for either. `false` is a caller saying \"this control is fine\n    // / enabled even though its row is not\"; absent is a caller saying nothing,\n    // and only `undefined` survives to mean that past Vue's\n    // absent-Boolean-casts-to-false rule — see TextField.vue, which carries the\n    // full reasoning.\n    disabled: undefined,\n    invalid: undefined,\n    size: \"md\",\n  },\n);\n\ndefineEmits<{\n  /** The chosen option's `value`. Fires once per choice; the list closes with it. */\n  \"update:modelValue\": [value: string];\n}>();\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the trigger,\n// which is the interactive element they describe.\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 `w-28`\n// silently loses to the trigger's own `w-full` depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: triggerAttrs } = useSplitAttrs();\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// `readonly` and `required` are absent from this object because there is no\n// prop to oppose the row with; the row's answer stands unopposed, which is\n// what is wanted.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n  invalid: props.invalid,\n}));\n\n// Two of the resolved keys do not travel with the bag, and both are Reka\n// facts rather than preferences.\n//\n// `aria-required` cannot be delivered this way at all: Reka's `Slot` merges an\n// as-child chain as `mergeProps(attrs, child.props)`, so the trigger's own\n// declaration — `aria-required` off the root's `required` prop — beats anything\n// arriving from outside, and a value spread here would be dropped silently.\n// The root's prop below is the only lever, and it is bound from the same\n// resolved value.\n//\n// `name` would be the `name` of a `<button type=\"button\">`, which no form\n// submission has ever included; the hidden input at the end of the template\n// carries the value instead.\nconst triggerFieldAttrs = computed(() => {\n  // Removed from a copy rather than listed positively, so a key added to the\n  // resolved bag later reaches this trigger without anyone remembering to come\n  // back here.\n  const aria: Record<string, unknown> = { ...field.attrs };\n  delete aria.name;\n  delete aria[\"aria-required\"];\n  return aria;\n});\n</script>\n\n<template>\n  <SelectRoot\n    :model-value=\"modelValue ?? ''\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <SelectTrigger\n      v-bind=\"{ ...triggerAttrs, ...triggerFieldAttrs }\"\n      :data-invalid=\"field.invalid || undefined\"\n      :class=\"\n        cn(\n          selectVariants({ size }),\n          !field.invalid && 'focus-visible:shadow-halo',\n          // The border half of the disabled treatment, and it lives here rather\n          // than beside the fill in the variant map for the reason written\n          // there. Read as a pair with the line below: `cn()` resolves a border\n          // colour by whichever class it saw last, so an unavailable trigger\n          // that is also in error still shows the destructive rim.\n          field.disabled && 'border-border',\n          field.invalid && 'border-destructive focus-visible:outline-destructive',\n          attrs.class as string,\n        )\n      \"\n    >\n      <SelectValue :placeholder=\"placeholder ?? ''\" />\n      <SelectIcon class=\"shrink-0 text-muted-foreground\">\n        <ChevronDown\n          class=\"h-4 w-4 transition-transform duration-fast ease-out group-data-[state=open]:rotate-180\"\n        />\n      </SelectIcon>\n    </SelectTrigger>\n\n    <SelectPortal>\n      <SelectContent\n        position=\"popper\"\n        :side-offset=\"6\"\n        :class=\"\n          cn(\n            'z-overlay min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md',\n            // Each half of the motion is scoped to its own state, never\n            // unconditional. Closing swaps the computed animation-name to\n            // fade-fall's, which is what Reka's Presence reads: it holds the\n            // panel mounted until that exit's animationend and only then takes\n            // it away. Unconditional, a finished entrance animation sat on the\n            // closed element and stranded it invisible over the page, eating\n            // clicks.\n            'data-[state=open]:animate-fade-rise data-[state=closed]:animate-fade-fall',\n          )\n        \"\n      >\n        <SelectViewport class=\"p-1\">\n          <!-- The rows reveal one step after another, from the shared stagger\n               vocabulary rather than a per-template delay of its own. -->\n          <SelectItem\n            v-for=\"(option, index) in options\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled ?? false\"\n            :style=\"{ animationDelay: listStaggerDelay(index) }\"\n            :class=\"\n              cn(\n                'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-1.5 pr-8 text-sm text-foreground outline-none',\n                'transition-colors duration-fast ease-out',\n                'animate-fade-rise',\n                'data-[highlighted]:bg-subtle',\n                'data-[state=checked]:bg-primary-muted data-[state=checked]:text-primary-text',\n                // Inert, but still readable: a row a reader cannot pick is\n                // still a row they have to read to understand why the list is\n                // shaped the way it is. `data-[disabled]:opacity-50` took the\n                // label to 3.13:1 on the popover; the colour on the text node\n                // below leaves it at 5.76:1 and still visibly lighter than the\n                // rows around it.\n                'data-[disabled]:pointer-events-none',\n              )\n            \"\n          >\n            <!-- The mute lives here rather than on the row, and it has to.\n                 `data-[disabled]:` sorts *before* `data-[state=checked]:` in\n                 Tailwind's variant order, so a disabled row that is also the\n                 chosen one would take `text-primary-text` from the container and a\n                 container colour is only inherited. Declared on the text node\n                 it wins whatever the row resolved to. -->\n            <SelectItemText :class=\"option.disabled && 'text-muted-foreground'\">{{\n              option.label\n            }}</SelectItemText>\n            <SelectItemIndicator class=\"absolute right-2 inline-flex items-center\">\n              <Check class=\"h-4 w-4\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n\n    <!-- What a surrounding `<form>` reads, and only once a row has given this\n         control a name. Reka can render a hidden native `<select>` from the\n         root's own `name` instead, and two of its behaviours are wrong here: a\n         native select always resolves to one of its options, so it would post\n         the first row while the placeholder was still showing, and `required`\n         on a visually-hidden control arms browser validation the library\n         deliberately never arms — a submission blocked with \"an invalid form\n         control is not focusable\" and no bubble anyone can see. A hidden input\n         posts the model and nothing else. -->\n    <input\n      v-if=\"field.name\"\n      type=\"hidden\"\n      :name=\"field.name\"\n      :value=\"modelValue ?? ''\"\n      :disabled=\"field.disabled\"\n    />\n  </SelectRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAa,iBAAiB,IAC5B;CACE;CACA;CAEA;CAoBA;CACA;AACF,GACA;CAIE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;;;;;EA0DA,MAAM,QAAQ;EA0Cd,MAAM,EAAE,OAAO,MAAM,iBAAiB,cAAc;EASpD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,UAAU,MAAM;GAChB,SAAS,MAAM;EACjB,EAAE;EAeF,MAAM,oBAAoB,eAAe;GAIvC,MAAM,OAAgC,EAAE,GAAG,MAAM,MAAM;GACvD,OAAO,KAAK;GACZ,OAAO,KAAK;GACZ,OAAO;EACT,CAAC;;GAIC,OAAA,UAAA,GAAA,YA6Ga,MAAA,UAAA,GAAA;IA5GV,eAAa,QAAA,cAAU;IACvB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAE7D,SAAA,cAwBgB;KAxBhB,YAwBgB,MAAA,aAAA,GAxBhB,WAwBgB;MAAA,GAvBD,MAAA,YAAA;MAAY,GAAK,kBAAA;KAAiB,GAAA;MAC9C,gBAAc,MAAA,KAAA,CAAK,CAAC,WAAW,KAAA;MAC/B,OAAgB,MAAA,EAAA,CAAE,CAAY,MAAA,cAAA,CAAc,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAgB,CAAA,MAAA,KAAA,CAAK,CAAC,WAAO,6BAA2a,MAAA,KAAA,CAAK,CAAC,YAAQ,iBAA+B,MAAA,KAAA,CAAK,CAAC,WAAO,wDAAsE,MAAA,KAAA,CAAK,CAAC,KAAA;;MAeloB,SAAA,cAAgD,CAAhD,YAAgD,MAAA,WAAA,GAAA,EAAlC,aAAa,QAAA,eAAW,GAAA,GAAA,MAAA,GAAA,CAAA,aAAA,CAAA,GACtC,YAIa,MAAA,UAAA,GAAA,EAJD,OAAM,iCAAgC,GAAA;OAChD,SAAA,cAEE,CAFF,YAEE,MAAA,WAAA,GAAA,EADA,OAAM,yFAAwF,CAAA,CAAA,CAAA;;;;;KAKpG,YA2De,MAAA,YAAA,GAAA,MAAA;MA1Db,SAAA,cAyDgB,CAzDhB,YAyDgB,MAAA,aAAA,GAAA;OAxDd,UAAS;OACR,eAAa;OACb,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,mJAAA,2EAAA,CAAA;;OAcrB,SAAA,cAuCiB,CAvCjB,YAuCiB,MAAA,cAAA,GAAA,EAvCD,OAAM,MAAK,GAAA;QAIvB,SAAA,cAAkC,EADpC,UAAA,IAAA,GAAA,mBAmCa,UAAA,MAAA,WAlCe,QAAA,UAAlB,QAAQ,UAAK;SADvB,OAAA,UAAA,GAAA,YAmCa,MAAA,UAAA,GAAA;UAjCV,KAAK,OAAO;UACZ,OAAO,OAAO;UACd,UAAU,OAAO,YAAQ;UACzB,OAAK,eAAA,EAAA,gBAAoB,MAAA,gBAAA,CAAgB,CAAC,KAAK,EAAA,CAAA;UAC/C,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,gIAAA,4CAAA,qBAAA,gCAAA,gFAAA,qCAAA,CAAA;;UAuBzB,SAAA,cAEmB,CAFnB,YAEmB,MAAA,cAAA,GAAA,EAFF,OAAK,eAAE,OAAO,YAAQ,uBAAA,EAAA,GAAA;WAA6B,SAAA,cAElE,CADA,gBAAA,gBAAA,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA;;UAEd,GAAA,MAAA,CAAA,OAAA,CAAA,GAAA,YAEsB,MAAA,mBAAA,GAAA,EAFD,OAAM,4CAA2C,GAAA;WACpE,SAAA,cAAyB,CAAzB,YAAyB,MAAA,KAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;KAiBxB,MAAA,KAAA,CAAK,CAAC,QADd,UAAA,GAAA,mBAME,SAAA;;MAJA,MAAK;MACJ,MAAM,MAAA,KAAA,CAAK,CAAC;MACZ,OAAO,QAAA,cAAU;MACjB,UAAU,MAAA,KAAA,CAAK,CAAC"}

package/dist/packages/primitives/skip-link/src/SkipLink.js

@@ -0,0 +1,7 @@
+import SkipLink_vue_vue_type_script_setup_true_lang_default, { SKIP_LINK_LABELS, skipLinkClass } from "./SkipLink.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/skip-link/src/SkipLink.vue
+var SkipLink_default = SkipLink_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SKIP_LINK_LABELS, SkipLink_default as default, skipLinkClass };
+
+//# sourceMappingURL=SkipLink.js.map

package/dist/packages/primitives/skip-link/src/SkipLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLink.js","names":[],"sources":["../../../../../packages/primitives/skip-link/src/SkipLink.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { SkipLinkLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * SkipLink — the WCAG 2.4.1 (Bypass Blocks) affordance.\n *\n * A link to the main content that is the page's first focusable element and\n * stays visually hidden until something focuses it. A keyboard user tabs\n * once from the top of the document and lands on it; a pointer user never\n * meets it. It is a primitive beside `Link` rather than a variant of it\n * because the two answer different questions: `Link` navigates, `SkipLink`\n * bypasses — and its entire presentation *is* the hidden-until-focus\n * contract, which is exactly what no consumer should re-answer per product.\n *\n * Placement is the consumer's half of the contract: render it first in the\n * DOM, before the header and navigation it bypasses (next to the app shell),\n * and give the destination `tabindex=\"-1\"` so following the link moves focus\n * there instead of only scrolling.\n */\nexport const SKIP_LINK_LABELS: SkipLinkLabels = {\n  label: \"Skip to main content\",\n};\n\n/**\n * Visually hidden until focused. `absolute` takes the link out of flow so\n * being first in the document reserves no space; the 1px clipped box is the\n * visually-hidden pattern — out of sight but focusable, so DOM order keeps\n * it the first tab stop.\n *\n * The reveal keys on `:focus`, deliberately not `:focus-visible`: focus\n * arriving from a skip target's own activation, from programmatic handoff\n * or from an assistive technology is real focus, and a link that stays\n * hidden for it would be a trap. Every reveal utility carries the `:focus`\n * variant, so each out-specifies its hidden twin and the pair cannot\n * reorder regardless of stylesheet order.\n *\n * The revealed state speaks tokens only — `bg-primary`/`text-primary-text`\n * is the theme's pinned contrast pair and `outline-ring` + `shadow-halo`\n * are the shared focus markers — and carries no transition, so\n * `prefers-reduced-motion` needs no exception here.\n */\nexport const skipLinkClass = [\n  \"absolute h-px w-px overflow-hidden whitespace-nowrap [clip:rect(0,0,0,0)]\",\n  \"focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:h-auto focus:w-auto focus:overflow-visible focus:whitespace-normal focus:[clip:auto] focus:p-4 focus:rounded-md focus:bg-primary focus:text-primary-text focus:text-sm focus:font-medium focus:underline focus:underline-offset-4 focus:shadow-halo focus:outline-2 focus:outline-offset-2 focus:outline-ring\",\n].join(\" \");\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The in-page destination. Defaults to `#main`, the id the documentation names as the main-content landmark. */\n    href?: string;\n    /**\n     * Names for what the link says, as any subset of `SkipLinkLabels` — the\n     * per-instance correction over `SKIP_LINK_LABELS`, in the same shape\n     * every component's `labels` prop takes.\n     */\n    labels?: LabelOverrides<SkipLinkLabels>;\n  }>(),\n  { href: \"#main\" },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves (own prop, then the host vocabulary from\n// `provideLoomLabels`, then these English defaults), and a template reading\n// the raw prop would be reading the overrides rather than the answer.\nconst text = useLabels(\"skipLink\", SKIP_LINK_LABELS, () => props.labels);\n</script>\n\n<template>\n  <a :href=\"href\" :class=\"cn(skipLinkClass, $attrs.class)\">{{ text.label }}</a>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/skip-link/src/SkipLink.vue.d.ts

@@ -0,0 +1,62 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { SkipLinkLabels } from "../../../labels/src/index";
+/**
+ * SkipLink — the WCAG 2.4.1 (Bypass Blocks) affordance.
+ *
+ * A link to the main content that is the page's first focusable element and
+ * stays visually hidden until something focuses it. A keyboard user tabs
+ * once from the top of the document and lands on it; a pointer user never
+ * meets it. It is a primitive beside `Link` rather than a variant of it
+ * because the two answer different questions: `Link` navigates, `SkipLink`
+ * bypasses — and its entire presentation *is* the hidden-until-focus
+ * contract, which is exactly what no consumer should re-answer per product.
+ *
+ * Placement is the consumer's half of the contract: render it first in the
+ * DOM, before the header and navigation it bypasses (next to the app shell),
+ * and give the destination `tabindex="-1"` so following the link moves focus
+ * there instead of only scrolling.
+ */
+export declare const SKIP_LINK_LABELS: SkipLinkLabels;
+/**
+ * Visually hidden until focused. `absolute` takes the link out of flow so
+ * being first in the document reserves no space; the 1px clipped box is the
+ * visually-hidden pattern — out of sight but focusable, so DOM order keeps
+ * it the first tab stop.
+ *
+ * The reveal keys on `:focus`, deliberately not `:focus-visible`: focus
+ * arriving from a skip target's own activation, from programmatic handoff
+ * or from an assistive technology is real focus, and a link that stays
+ * hidden for it would be a trap. Every reveal utility carries the `:focus`
+ * variant, so each out-specifies its hidden twin and the pair cannot
+ * reorder regardless of stylesheet order.
+ *
+ * The revealed state speaks tokens only — `bg-primary`/`text-primary-text`
+ * is the theme's pinned contrast pair and `outline-ring` + `shadow-halo`
+ * are the shared focus markers — and carries no transition, so
+ * `prefers-reduced-motion` needs no exception here.
+ */
+export declare const skipLinkClass: string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The in-page destination. Defaults to `#main`, the id the documentation names as the main-content landmark. */
+    href?: string;
+    /**
+     * Names for what the link says, as any subset of `SkipLinkLabels` — the
+     * per-instance correction over `SKIP_LINK_LABELS`, in the same shape
+     * every component's `labels` prop takes.
+     */
+    labels?: LabelOverrides<SkipLinkLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The in-page destination. Defaults to `#main`, the id the documentation names as the main-content landmark. */
+    href?: string;
+    /**
+     * Names for what the link says, as any subset of `SkipLinkLabels` — the
+     * per-instance correction over `SKIP_LINK_LABELS`, in the same shape
+     * every component's `labels` prop takes.
+     */
+    labels?: LabelOverrides<SkipLinkLabels>;
+}> & Readonly<{}>, {
+    href: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=SkipLink.vue.d.ts.map

package/dist/packages/primitives/skip-link/src/SkipLink.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 { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+//#region packages/primitives/skip-link/src/SkipLink.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["href"];
+/**
+* SkipLink — the WCAG 2.4.1 (Bypass Blocks) affordance.
+*
+* A link to the main content that is the page's first focusable element and
+* stays visually hidden until something focuses it. A keyboard user tabs
+* once from the top of the document and lands on it; a pointer user never
+* meets it. It is a primitive beside `Link` rather than a variant of it
+* because the two answer different questions: `Link` navigates, `SkipLink`
+* bypasses — and its entire presentation *is* the hidden-until-focus
+* contract, which is exactly what no consumer should re-answer per product.
+*
+* Placement is the consumer's half of the contract: render it first in the
+* DOM, before the header and navigation it bypasses (next to the app shell),
+* and give the destination `tabindex="-1"` so following the link moves focus
+* there instead of only scrolling.
+*/
+var SKIP_LINK_LABELS = { label: "Skip to main content" };
+/**
+* Visually hidden until focused. `absolute` takes the link out of flow so
+* being first in the document reserves no space; the 1px clipped box is the
+* visually-hidden pattern — out of sight but focusable, so DOM order keeps
+* it the first tab stop.
+*
+* The reveal keys on `:focus`, deliberately not `:focus-visible`: focus
+* arriving from a skip target's own activation, from programmatic handoff
+* or from an assistive technology is real focus, and a link that stays
+* hidden for it would be a trap. Every reveal utility carries the `:focus`
+* variant, so each out-specifies its hidden twin and the pair cannot
+* reorder regardless of stylesheet order.
+*
+* The revealed state speaks tokens only — `bg-primary`/`text-primary-text`
+* is the theme's pinned contrast pair and `outline-ring` + `shadow-halo`
+* are the shared focus markers — and carries no transition, so
+* `prefers-reduced-motion` needs no exception here.
+*/
+var skipLinkClass = ["absolute h-px w-px overflow-hidden whitespace-nowrap [clip:rect(0,0,0,0)]", "focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:h-auto focus:w-auto focus:overflow-visible focus:whitespace-normal focus:[clip:auto] focus:p-4 focus:rounded-md focus:bg-primary focus:text-primary-text focus:text-sm focus:font-medium focus:underline focus:underline-offset-4 focus:shadow-halo focus:outline-2 focus:outline-offset-2 focus:outline-ring"].join(" ");
+var SkipLink_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SkipLink",
+	props: {
+		href: { default: "#main" },
+		labels: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("skipLink", SKIP_LINK_LABELS, () => props.labels);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("a", {
+				href: __props.href,
+				class: normalizeClass(unref(cn)(unref(skipLinkClass), _ctx.$attrs.class))
+			}, toDisplayString(unref(text).label), 11, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { SKIP_LINK_LABELS, SkipLink_vue_vue_type_script_setup_true_lang_default as default, skipLinkClass };
+
+//# sourceMappingURL=SkipLink.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/skip-link/src/SkipLink.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLink.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../../packages/primitives/skip-link/src/SkipLink.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { SkipLinkLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * SkipLink — the WCAG 2.4.1 (Bypass Blocks) affordance.\n *\n * A link to the main content that is the page's first focusable element and\n * stays visually hidden until something focuses it. A keyboard user tabs\n * once from the top of the document and lands on it; a pointer user never\n * meets it. It is a primitive beside `Link` rather than a variant of it\n * because the two answer different questions: `Link` navigates, `SkipLink`\n * bypasses — and its entire presentation *is* the hidden-until-focus\n * contract, which is exactly what no consumer should re-answer per product.\n *\n * Placement is the consumer's half of the contract: render it first in the\n * DOM, before the header and navigation it bypasses (next to the app shell),\n * and give the destination `tabindex=\"-1\"` so following the link moves focus\n * there instead of only scrolling.\n */\nexport const SKIP_LINK_LABELS: SkipLinkLabels = {\n  label: \"Skip to main content\",\n};\n\n/**\n * Visually hidden until focused. `absolute` takes the link out of flow so\n * being first in the document reserves no space; the 1px clipped box is the\n * visually-hidden pattern — out of sight but focusable, so DOM order keeps\n * it the first tab stop.\n *\n * The reveal keys on `:focus`, deliberately not `:focus-visible`: focus\n * arriving from a skip target's own activation, from programmatic handoff\n * or from an assistive technology is real focus, and a link that stays\n * hidden for it would be a trap. Every reveal utility carries the `:focus`\n * variant, so each out-specifies its hidden twin and the pair cannot\n * reorder regardless of stylesheet order.\n *\n * The revealed state speaks tokens only — `bg-primary`/`text-primary-text`\n * is the theme's pinned contrast pair and `outline-ring` + `shadow-halo`\n * are the shared focus markers — and carries no transition, so\n * `prefers-reduced-motion` needs no exception here.\n */\nexport const skipLinkClass = [\n  \"absolute h-px w-px overflow-hidden whitespace-nowrap [clip:rect(0,0,0,0)]\",\n  \"focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:h-auto focus:w-auto focus:overflow-visible focus:whitespace-normal focus:[clip:auto] focus:p-4 focus:rounded-md focus:bg-primary focus:text-primary-text focus:text-sm focus:font-medium focus:underline focus:underline-offset-4 focus:shadow-halo focus:outline-2 focus:outline-offset-2 focus:outline-ring\",\n].join(\" \");\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The in-page destination. Defaults to `#main`, the id the documentation names as the main-content landmark. */\n    href?: string;\n    /**\n     * Names for what the link says, as any subset of `SkipLinkLabels` — the\n     * per-instance correction over `SKIP_LINK_LABELS`, in the same shape\n     * every component's `labels` prop takes.\n     */\n    labels?: LabelOverrides<SkipLinkLabels>;\n  }>(),\n  { href: \"#main\" },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves (own prop, then the host vocabulary from\n// `provideLoomLabels`, then these English defaults), and a template reading\n// the raw prop would be reading the overrides rather than the answer.\nconst text = useLabels(\"skipLink\", SKIP_LINK_LABELS, () => props.labels);\n</script>\n\n<template>\n  <a :href=\"href\" :class=\"cn(skipLinkClass, $attrs.class)\">{{ text.label }}</a>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAa,mBAAmC,EAC9C,OAAO,uBACT;;;;;;;;;;;;;;;;;;;AAoBA,IAAa,gBAAgB,CAC3B,6EACA,qWACF,CAAC,CAAC,KAAK,GAAG;;;;;;;;EAOV,MAAM,QAAQ;EAkBd,MAAM,OAAO,UAAU,YAAY,wBAAwB,MAAM,MAAM;;GAIrE,OAAA,UAAA,GAAA,mBAA6E,KAAA;IAAzE,MAAM,QAAA;IAAO,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,aAAA,GAAeA,KAAAA,OAAO,KAAK,CAAA;GAAM,GAAA,gBAAA,MAAA,IAAA,CAAI,CAAC,KAAK,GAAA,IAAA,UAAA"}

package/dist/packages/primitives/skip-link/src/index.d.ts

@@ -0,0 +1,3 @@
+export { SKIP_LINK_LABELS, default } from "./SkipLink.vue";
+export type { SkipLinkLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/skip-link/src/index.js

@@ -0,0 +1,3 @@
+import { SKIP_LINK_LABELS } from "./SkipLink.vue_vue_type_script_setup_true_lang.js";
+import SkipLink_default from "./SkipLink.js";
+export { SKIP_LINK_LABELS, SkipLink_default as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.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":""}
+{"version":3,"file":"Slider.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":""}

package/dist/packages/primitives/slider/src/Slider.vue.d.ts

@@ -25,9 +25,12 @@
  * 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,

package/dist/packages/primitives/slider/src/Slider.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/slider/src/Slider.vue"],"names":[],"mappings":"AAsSA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,KAAK,WAAW,GAAG;IACf,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mHAAmH;IACnH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC;AA6VJ,QAAA,MAAM,YAAY;;;;;;;SAlWR,MAAM;cAID,OAAO,GAAG,SAAS;SANxB,MAAM;UAIL,MAAM;6EAoWf,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Slider.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/slider/src/Slider.vue"],"names":[],"mappings":"AAkTA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,KAAK,WAAW,GAAG;IACf,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mHAAmH;IACnH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC;AAsWJ,QAAA,MAAM,YAAY;;;;;;;SA3WR,MAAM;cAID,OAAO,GAAG,SAAS;SANxB,MAAM;UAIL,MAAM;6EA6Wf,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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);