@ecoma-io/loom 0.3.0 → 0.5.0

package/dist/packages/primitives/toast/src/ToastItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastItem.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/toast/src/ToastItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToastLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const TOAST_LABELS: ToastLabels = {\n  close: \"Close\",\n  announce: \"Notification\",\n  region: ({ hotkey }) => `Notifications (${hotkey})`,\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose } from \"reka-ui\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { Info, CircleCheck, TriangleAlert, CircleX, Sparkles, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport type { ToastVariant } from \"./Toast.vue\";\n\n/**\n * ToastItem — one toast card (ToastRoot + Loom treatment), INTERNAL to\n * the design system. It must live inside a `ToastProvider` whose\n * `ToastViewport` it teleports into: `Toast` bundles that pair for the\n * standalone case. Not exported from the barrel — hosts use `Toast`.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Controls visibility; pair with `v-model:open`. Omit to let the toast own its own open state. */\n    open?: boolean | undefined;\n    /** The toast's headline — always shown. */\n    title: string;\n    /** An optional second line of detail below the title. */\n    description?: string;\n    /** Selects the accent icon and colour. */\n    variant?: ToastVariant;\n    /** ms before auto-dismiss; the Reka default pauses on hover/focus. */\n    duration?: number;\n    /** Shows the ✕ close button. */\n    closable?: boolean;\n    /** Renders a single inline action button; emits `action` when pressed. */\n    actionLabel?: string;\n    /** Names for what the card says on its own account, as any subset of `ToastLabels`. */\n    labels?: LabelOverrides<ToastLabels>;\n  }>(),\n  {\n    // See Toast.vue: `undefined` is the uncontrolled state, and only an\n    // explicit default keeps it reachable past Vue's Boolean casting.\n    open: undefined,\n    variant: \"info\",\n    duration: 5000,\n    closable: true,\n  },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean]; action: [] }>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"toast\", TOAST_LABELS, () => props.labels);\n\n// `satisfies` binds this map to ToastVariant so a variant added to the type\n// without a matching entry here fails at compile time (Button's own idiom).\nconst toastAccents = {\n  info: { icon: Info, color: \"text-info-text\" },\n  success: { icon: CircleCheck, color: \"text-success-text\" },\n  warning: { icon: TriangleAlert, color: \"text-warning\" },\n  destructive: { icon: CircleX, color: \"text-destructive-text\" },\n  accent: { icon: Sparkles, color: \"text-primary-text\" },\n} satisfies Record<ToastVariant, { icon: typeof Info; color: string }>;\n\nconst accent = computed(() => toastAccents[props.variant]);\n</script>\n\n<template>\n  <!-- The slide-in animation rides this inner card, never ToastRoot: Reka\n       drives ToastRoot's own transform for the swipe-to-dismiss gesture, so a\n       filled entrance transform there would freeze the swipe. ToastRoot itself\n       carries no animation, so Reka Presence unmounts it immediately on close. -->\n  <ToastRoot\n    v-bind=\"optional({ open })\"\n    :duration=\"duration\"\n    class=\"outline-none\"\n    @update:open=\"$emit('update:open', $event)\"\n  >\n    <div\n      :class=\"\n        cn(\n          'relative flex animate-toast-in items-start gap-3 rounded-md border border-border bg-popover p-3 pr-8 text-popover-foreground shadow-lg',\n          // Accent variant: a highlighted border to draw attention to the\n          // toast's distinctiveness from the standard variants.\n          variant === 'accent' && 'border-primary/40',\n        )\n      \"\n    >\n      <component\n        :is=\"accent.icon\"\n        :class=\"cn('mt-0.5 h-4 w-4 shrink-0', accent.color)\"\n        aria-hidden=\"true\"\n      />\n      <div class=\"min-w-0 flex-1\">\n        <ToastTitle class=\"text-sm font-medium\">{{ title }}</ToastTitle>\n        <ToastDescription v-if=\"description\" class=\"mt-0.5 text-xs text-muted-foreground\">\n          {{ description }}\n        </ToastDescription>\n      </div>\n\n      <ToastAction v-if=\"actionLabel\" :alt-text=\"actionLabel\" as-child @click=\"$emit('action')\">\n        <button\n          type=\"button\"\n          class=\"shrink-0 rounded-sm px-2 py-1 text-xs font-medium text-primary-text transition-colors duration-fast ease-out hover:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        >\n          {{ actionLabel }}\n        </button>\n      </ToastAction>\n\n      <ToastClose\n        v-if=\"closable\"\n        :aria-label=\"text.close\"\n        class=\"absolute right-2 top-2 inline-flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n      >\n        <X class=\"h-3.5 w-3.5\" />\n      </ToastClose>\n    </div>\n  </ToastRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AASA,IAAa,eAA4B;CACvC,OAAO;CACP,UAAU;CACV,SAAS,EAAE,aAAa,kBAAkB,OAAO;AACnD;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,QAAQ;EAkCd,MAAM,OAAO,UAAU,SAAS,oBAAoB,MAAM,MAAM;EAIhE,MAAM,eAAe;GACnB,MAAM;IAAE,MAAM;IAAM,OAAO;GAAiB;GAC5C,SAAS;IAAE,MAAM;IAAa,OAAO;GAAoB;GACzD,SAAS;IAAE,MAAM;IAAe,OAAO;GAAe;GACtD,aAAa;IAAE,MAAM;IAAS,OAAO;GAAwB;GAC7D,QAAQ;IAAE,MAAM;IAAU,OAAO;GAAoB;EACvD;EAEA,MAAM,SAAS,eAAe,aAAa,MAAM,QAAQ;;GAQvD,OAAA,UAAA,GAAA,YA6CY,MAAA,SAAA,GA7CZ,WACU,MA4CE,QAAA,CA5CM,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA;IACtB,UAAU,QAAA;IACX,OAAM;IACL,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM;;IAEzC,SAAA,cAsCM,CAtCN,mBAsCM,OAAA,EArCH,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,0IAA4S,QAAA,YAAO,YAAA,mBAAA,CAAA,EAAA,GAAA;MAStU,UAAA,GAAA,YAIE,wBAHK,OAAA,MAAO,IAAI,GAAA;MACf,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,2BAA4B,OAAA,MAAO,KAAK,CAAA;MAClD,eAAY;;KAEd,mBAKM,OALN,YAKM,CAJJ,YAAgE,MAAA,UAAA,GAAA,EAApD,OAAM,sBAAqB,GAAA;MAAC,SAAA,cAAW,CAAR,gBAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;KACxB,CAAA,GAAA,QAAA,eAAxB,UAAA,GAAA,YAEmB,MAAA,gBAAA,GAAA;;MAFkB,OAAM;;MACzC,SAAA,cAAiB,CAAd,gBAAA,gBAAA,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA;;;KAIC,QAAA,eAAnB,UAAA,GAAA,YAOc,MAAA,WAAA,GAAA;;MAPmB,YAAU,QAAA;MAAa,YAAA;MAAU,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,QAAA;;MAC5E,SAAA,cAKS,CALT,mBAKS,UALT,YAKS,gBADJ,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA;;;KAKV,QAAA,YADR,UAAA,GAAA,YAMa,MAAA,UAAA,GAAA;;MAJV,cAAY,MAAA,IAAA,CAAI,CAAC;MAClB,OAAM;;MAEN,SAAA,cAAyB,CAAzB,YAAyB,MAAA,CAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ToastItem.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/toast/src/ToastItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToastLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const TOAST_LABELS: ToastLabels = {\n  close: \"Close\",\n  announce: \"Notification\",\n  region: ({ hotkey }) => `Notifications (${hotkey})`,\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose } from \"reka-ui\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { Info, CircleCheck, TriangleAlert, CircleX, Sparkles, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport type { ToastVariant } from \"./Toast.vue\";\n\n/**\n * ToastItem — one toast card (ToastRoot + Loom treatment), INTERNAL to\n * the design system. It must live inside a `ToastProvider` whose\n * `ToastViewport` it teleports into: `Toast` bundles that pair for the\n * standalone case. Not exported from the barrel — hosts use `Toast`.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Controls visibility; pair with `v-model:open`. Omit to let the toast own its own open state. */\n    open?: boolean | undefined;\n    /** The toast's headline — always shown. */\n    title: string;\n    /** An optional second line of detail below the title. */\n    description?: string;\n    /** Selects the accent icon and colour. */\n    variant?: ToastVariant;\n    /** ms before auto-dismiss; the Reka default pauses on hover/focus. */\n    duration?: number;\n    /** Shows the ✕ close button. */\n    closable?: boolean;\n    /** Renders a single inline action button; emits `action` when pressed. */\n    actionLabel?: string;\n    /** Names for what the card says on its own account, as any subset of `ToastLabels`. */\n    labels?: LabelOverrides<ToastLabels>;\n  }>(),\n  {\n    // See Toast.vue: `undefined` is the uncontrolled state, and only an\n    // explicit default keeps it reachable past Vue's Boolean casting.\n    open: undefined,\n    variant: \"info\",\n    duration: 5000,\n    closable: true,\n  },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean]; action: [] }>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"toast\", TOAST_LABELS, () => props.labels);\n\n// `satisfies` binds this map to ToastVariant so a variant added to the type\n// without a matching entry here fails at compile time (Button's own idiom).\nconst toastAccents = {\n  info: { icon: Info, color: \"text-info-text\" },\n  success: { icon: CircleCheck, color: \"text-success-text\" },\n  // `-text` like its four siblings. The bare `warning` hue is a fill colour —\n  // as text it fails on the dark theme, and the functional `-text` tokens are\n  // the ones measured legible on every surface (theme.css carries the ratios).\n  warning: { icon: TriangleAlert, color: \"text-warning-text\" },\n  destructive: { icon: CircleX, color: \"text-destructive-text\" },\n  accent: { icon: Sparkles, color: \"text-primary-text\" },\n} satisfies Record<ToastVariant, { icon: typeof Info; color: string }>;\n\nconst accent = computed(() => toastAccents[props.variant]);\n\n// Severity alone decides how the toast interrupts (issue #91): a destructive\n// report announced politely can be swallowed by whatever the screen reader is\n// already saying — exactly the messages that must not be missed. The knob is\n// Reka's own `type`: it hard-wires the hidden announce region's `role` to\n// `alert` and picks that region's politeness from this prop — `foreground`\n// announces `aria-live=\"assertive\"`, `background` politely. Destructive\n// routes foreground; every other severity stays polite, so an ordinary\n// notification never interrupts. Deliberately no prop of Loom's own: the\n// variant the card already carries *is* the severity, and a second way to set\n// it would only let the two disagree.\nconst announceType = computed<\"foreground\" | \"background\">(() =>\n  props.variant === \"destructive\" ? \"foreground\" : \"background\",\n);\n</script>\n\n<template>\n  <!-- Entrance and exit deliberately do not share an element, and the split is\n       forced by Reka rather than taste. The swipe gesture marks ToastRoot\n       itself (data-swipe plus --reka-toast-swipe-* custom properties), so the\n       root's transform stays reserved and the entrance rides the inner card.\n       The exit cannot ride along: Presence decides an element's fate by\n       reading the computed animation-name of the node it mounted — never a\n       descendant's — and by waiting for an animationend whose target is that\n       same node (usePresence.js). A toast-out confined to the inner card would\n       leave the root's own name `none` and be unmounted before its first\n       frame; on ToastRoot it genuinely plays. -->\n  <ToastRoot\n    v-bind=\"optional({ open })\"\n    :type=\"announceType\"\n    :duration=\"duration\"\n    class=\"outline-none data-[state=closed]:animate-toast-out\"\n    @update:open=\"$emit('update:open', $event)\"\n  >\n    <div\n      :class=\"\n        cn(\n          'relative flex animate-toast-in items-start gap-3 rounded-md border border-border bg-popover p-3 pr-8 text-popover-foreground shadow-lg',\n          // Accent variant: a highlighted border to draw attention to the\n          // toast's distinctiveness from the standard variants.\n          variant === 'accent' && 'border-primary/40',\n        )\n      \"\n    >\n      <component\n        :is=\"accent.icon\"\n        :class=\"cn('mt-0.5 h-4 w-4 shrink-0', accent.color)\"\n        aria-hidden=\"true\"\n      />\n      <div class=\"min-w-0 flex-1\">\n        <ToastTitle class=\"text-sm font-medium\">{{ title }}</ToastTitle>\n        <ToastDescription v-if=\"description\" class=\"mt-0.5 text-xs text-muted-foreground\">\n          {{ description }}\n        </ToastDescription>\n      </div>\n\n      <ToastAction v-if=\"actionLabel\" :alt-text=\"actionLabel\" as-child @click=\"$emit('action')\">\n        <button\n          type=\"button\"\n          class=\"shrink-0 rounded-sm px-2 py-1 text-xs font-medium text-primary-text transition-colors duration-fast ease-out hover:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        >\n          {{ actionLabel }}\n        </button>\n      </ToastAction>\n\n      <ToastClose\n        v-if=\"closable\"\n        :aria-label=\"text.close\"\n        class=\"absolute right-2 top-2 inline-flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n      >\n        <X class=\"h-3.5 w-3.5\" />\n      </ToastClose>\n    </div>\n  </ToastRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AASA,IAAa,eAA4B;CACvC,OAAO;CACP,UAAU;CACV,SAAS,EAAE,aAAa,kBAAkB,OAAO;AACnD;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,QAAQ;EAkCd,MAAM,OAAO,UAAU,SAAS,oBAAoB,MAAM,MAAM;EAIhE,MAAM,eAAe;GACnB,MAAM;IAAE,MAAM;IAAM,OAAO;GAAiB;GAC5C,SAAS;IAAE,MAAM;IAAa,OAAO;GAAoB;GAIzD,SAAS;IAAE,MAAM;IAAe,OAAO;GAAoB;GAC3D,aAAa;IAAE,MAAM;IAAS,OAAO;GAAwB;GAC7D,QAAQ;IAAE,MAAM;IAAU,OAAO;GAAoB;EACvD;EAEA,MAAM,SAAS,eAAe,aAAa,MAAM,QAAQ;EAYzD,MAAM,eAAe,eACnB,MAAM,YAAY,gBAAgB,eAAe,YACnD;;GAcE,OAAA,UAAA,GAAA,YA8CY,MAAA,SAAA,GA9CZ,WACU,MA6CE,QAAA,CA7CM,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA;IACtB,MAAM,aAAA;IACN,UAAU,QAAA;IACX,OAAM;IACL,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM;;IAEzC,SAAA,cAsCM,CAtCN,mBAsCM,OAAA,EArCH,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,0IAA4S,QAAA,YAAO,YAAA,mBAAA,CAAA,EAAA,GAAA;MAStU,UAAA,GAAA,YAIE,wBAHK,OAAA,MAAO,IAAI,GAAA;MACf,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,2BAA4B,OAAA,MAAO,KAAK,CAAA;MAClD,eAAY;;KAEd,mBAKM,OALN,YAKM,CAJJ,YAAgE,MAAA,UAAA,GAAA,EAApD,OAAM,sBAAqB,GAAA;MAAC,SAAA,cAAW,CAAR,gBAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;KACxB,CAAA,GAAA,QAAA,eAAxB,UAAA,GAAA,YAEmB,MAAA,gBAAA,GAAA;;MAFkB,OAAM;;MACzC,SAAA,cAAiB,CAAd,gBAAA,gBAAA,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA;;;KAIC,QAAA,eAAnB,UAAA,GAAA,YAOc,MAAA,WAAA,GAAA;;MAPmB,YAAU,QAAA;MAAa,YAAA;MAAU,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,QAAA;;MAC5E,SAAA,cAKS,CALT,mBAKS,UALT,YAKS,gBADJ,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA;;;KAKV,QAAA,YADR,UAAA,GAAA,YAMa,MAAA,UAAA,GAAA;;MAJV,cAAY,MAAA,IAAA,CAAI,CAAC;MAClB,OAAM;;MAEN,SAAA,cAAyB,CAAzB,YAAyB,MAAA,CAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,CAAA,CAAA"}

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

@@ -2,5 +2,5 @@ export { default, TOAST_LABELS } from "./Toast.vue";
 export { default as Toast } from "./Toast.vue";
 export type { ToastVariant } from "./Toast.vue";
 export { default as ToastItem } from "./ToastItem.vue";
-export type { ToastLabels } from "@ecoma-io/loom-labels";
+export type { ToastLabels } from "../../../labels/src/index";
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,7 @@
+import ToggleGroup_vue_vue_type_script_setup_true_lang_default from "./ToggleGroup.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/toggle-group/src/ToggleGroup.vue
+var ToggleGroup_default = ToggleGroup_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ToggleGroup_default as default };
+
+//# sourceMappingURL=ToggleGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.js","names":[],"sources":["../../../../../packages/primitives/toggle-group/src/ToggleGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Component } from \"vue\";\n\n/** One toggle inside a {@link ToggleGroup}. */\nexport interface ToggleGroupItem {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered inside the button. */\n  label: string;\n  /** Optional glyph rendered before the label; hidden from the tree, the label is the name. */\n  icon?: Component;\n  /** Disables this button alone, leaving its neighbours toggleable. */\n  disabled?: boolean;\n  /** Forwarded to the button's DOM node — lets hosts keep stable test hooks. */\n  testId?: string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useTemplateRef } from \"vue\";\nimport { ToggleGroupRoot, ToggleGroupItem as RekaToggleGroupItem } from \"reka-ui\";\nimport type { AcceptableValue } from \"reka-ui\";\nimport { useAncestorDisabled, useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { cn, optional, useSplitAttrs } from \"@ecoma-io/loom-core\";\n\n/**\n * ToggleGroup — a set of toggle actions or filters whose pressed state is the\n * value: bold/italic/underline, column filters, metric toggles. Each item is\n * a real `<button aria-pressed>` — deliberately **not** `aria-checked`/radio\n * semantics, which is the whole distinction from\n * [SegmentedControl](../../segmented-control): a segmented control is a value\n * picker where one option is always active, while here zero-or-more buttons\n * can be on at once and the group's `type` says which contract the model\n * follows — `\"single\"` holds one value or `null`, `\"multiple\"` a `string[]`.\n * Built on Reka UI's ToggleGroup: the group is one Tab stop (roving\n * tabindex), Arrow keys move focus between buttons skipping disabled ones —\n * they move *focus only* and never flip a toggle, unlike a radio group where\n * the arrows change the value. Styled with Loom tokens; a pressed button\n * fills with the primary token and takes weight, so the state is carried by\n * `aria-pressed` plus fill plus weight — never colour alone.\n *\n * Inside a [Field](../Field/Field.vue) the row's description, `required` and\n * `invalid` reach the group through `useFieldControl()`, and a\n * `<Fieldset disabled>` above it disables every button.\n *\n * **A row's label does not name this group.** `<label for>` names a labelable\n * element and this renders a `div[role=\"group\"]`, so the row's label resolves\n * to the element and names nobody. Name it with a\n * [Fieldset](../Fieldset/Fieldset.vue)'s real `<legend>`, or with an\n * `aria-label`/`aria-labelledby` of its own — which is what every example\n * already does, because the component carries no label text of its own and\n * therefore no labels prop: the item labels are the caller's content.\n *\n * There is no `readonly`: a toggle that displays a state but cannot change it\n * is a disabled one showing an answer, so a row's `readonly` arrives as\n * nothing at all rather than as that disguise.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The pressed value (`\"single\"`), the pressed values (`\"multiple\"`), or nothing pressed. */\n    modelValue?: string | string[] | null;\n    /** The buttons to render, in order. */\n    items: ToggleGroupItem[];\n    /** `\"single\"` models one value or `null`; `\"multiple\"` a `string[]`. */\n    type?: \"single\" | \"multiple\";\n    /** The track's resting look; a pressed button fills with the primary token in every variant. */\n    variant?: \"secondary\" | \"outline\" | \"ghost\";\n    /** `\"sm\"` is the compressed form for dense chrome — e.g. an editor toolbar. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Disables every button at once, distinct from a single item's own `disabled`. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n  }>(),\n  {\n    // Not `false`: absent has to stay tellable from `false` for a Field above\n    // to disable the group and for `:disabled=\"false\"` to overrule one that\n    // does. Vue casts an absent Boolean prop with no declared default to\n    // `false`, which would leave the context wired and inert.\n    disabled: undefined,\n    type: \"single\",\n    variant: \"secondary\",\n    size: \"md\",\n  },\n);\n\nconst emit = defineEmits<{ \"update:modelValue\": [value: string | null | string[]] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: groupAttrs } = useSplitAttrs();\n\n/**\n * The buttons are real `<button>`s, so a `<fieldset disabled>` above this\n * group already makes each of them inert — but Reka's roving focus is what\n * decides where Tab lands, and it is driven by the group's own `disabled`,\n * which the fieldset never reaches. Its own `disabled` prop sets that to\n * `-1`, exactly as SegmentedControl does.\n *\n * Read off the DOM rather than taken from the Field context, which publishes\n * no `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst root = useTemplateRef<{ $el?: Element }>(\"root\");\nconst groupDisabled = useAncestorDisabled(() => root.value?.$el);\n\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  // The fieldset beats the prop in both directions, exactly as it does for\n  // the buttons themselves.\n  disabled: groupDisabled.value ? true : props.disabled,\n}));\n\n/**\n * Reka's own model is `AcceptableValue` for `\"single\"` and `AcceptableValue[]`\n * for `\"multiple\"`, and its typing has no `undefined` rung under\n * `exactOptionalPropertyTypes`. The seam's contract adds `null` for \"nothing\n * pressed\" and keeps a `null`/absent model from reaching Reka as a stray\n * non-string: a single group with nothing pressed shows Reka `\"\"`, which is\n * no item's value — and `data-state=\"off\"` on every button — in both engines.\n */\nconst rootValue = computed<string | string[]>(() => {\n  if (props.type === \"multiple\") {\n    return Array.isArray(props.modelValue) ? props.modelValue : [];\n  }\n  return typeof props.modelValue === \"string\" ? props.modelValue : \"\";\n});\n\nfunction onUpdate(value: AcceptableValue | AcceptableValue[]) {\n  if (props.type === \"multiple\") {\n    // Every item's value is a caller-provided `string`, so the array Reka\n    // hands back can only hold those strings.\n    emit(\"update:modelValue\", Array.isArray(value) ? (value as string[]) : []);\n  } else {\n    // Reka hands back `undefined` when the pressed button is pressed again —\n    // the seam publishes that as `null`, the model's spelling of \"nothing\".\n    emit(\"update:modelValue\", typeof value === \"string\" && value !== \"\" ? value : null);\n  }\n}\n\nconst iconClass = computed(() => (props.size === \"sm\" ? \"size-3.5\" : \"size-4\"));\n</script>\n\n<template>\n  <ToggleGroupRoot\n    ref=\"root\"\n    :type=\"type\"\n    :model-value=\"rootValue\"\n    orientation=\"horizontal\"\n    :disabled=\"field.disabled\"\n    v-bind=\"{ ...groupAttrs, ...field.attrs }\"\n    :class=\"\n      cn(\n        'inline-flex items-center gap-0.5 rounded-md p-0.5',\n        // The track has three resting looks. `secondary` is SegmentedControl's\n        // own track — a muted well with a rim; `outline` keeps the rim but\n        // sits on the page ground; `ghost` has neither rim nor well and leans\n        // entirely on the buttons.\n        variant === 'secondary' && 'border border-input bg-muted',\n        variant === 'outline' && 'border border-input bg-background',\n        variant === 'ghost' && 'bg-transparent',\n        // The one thing the *track* has left to say when the whole group is\n        // unavailable: the rim slackening from `input` to the lighter\n        // `border` — the well is already spent. A ghost track has no rim to\n        // slacken, so it says it through its buttons alone.\n        field.disabled && variant !== 'ghost' && 'border-border cursor-not-allowed',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"onUpdate\"\n  >\n    <RekaToggleGroupItem\n      v-for=\"opt in items\"\n      :key=\"opt.value\"\n      :value=\"opt.value\"\n      :disabled=\"opt.disabled ?? false\"\n      v-bind=\"optional({ 'data-testid': opt.testId })\"\n      :class=\"\n        cn(\n          // Named, not the bare `group`: this control is dropped into\n          // application chrome, and a bare `group-*` would also answer to any\n          // ancestor a host happened to mark up as one.\n          // `min-h-6`/`min-w-6` are the WCAG 2.5.8 target floors made\n          // explicit in the sm form, whose one-character labels would\n          // otherwise collapse under 24px.\n          'group/item relative inline-flex items-center justify-center gap-1.5 rounded-sm text-muted-foreground',\n          size === 'sm' && 'min-h-6 min-w-6 px-1.5 py-px text-micro',\n          size === 'md' && 'min-h-8 px-3 py-1 text-sm',\n          size === 'lg' && 'min-h-10 px-4 py-1.5',\n          'data-[state=off]:hover:bg-subtle',\n          // The pressed state is fill plus weight plus `aria-pressed` — never\n          // colour alone.\n          'data-[state=on]:bg-primary data-[state=on]:font-medium data-[state=on]:text-primary-foreground data-[state=on]:shadow-sm',\n          'active:scale-press',\n          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n          // No `opacity` here either, for SegmentedControl's reason: the label\n          // is most of the button, and a dim took it to 1.96:1. Unavailability\n          // is a fill instead — the cell drains to the page ground — and the\n          // mute lives on the span, where it beats whatever the button\n          // resolved to.\n          'disabled:pointer-events-none data-[disabled]:bg-background',\n        )\n      \"\n    >\n      <component\n        :is=\"opt.icon\"\n        v-if=\"opt.icon\"\n        aria-hidden=\"true\"\n        :class=\"cn('shrink-0', iconClass)\"\n      />\n      <span class=\"group-data-[disabled]/item:text-muted-foreground\">{{ opt.label }}</span>\n    </RekaToggleGroupItem>\n  </ToggleGroupRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/toggle-group/src/ToggleGroup.vue.d.ts

@@ -0,0 +1,53 @@
+import type { Component } from "vue";
+/** One toggle inside a {@link ToggleGroup}. */
+export interface ToggleGroupItem {
+    /** Matched against `modelValue`. */
+    value: string;
+    /** Visible label, rendered inside the button. */
+    label: string;
+    /** Optional glyph rendered before the label; hidden from the tree, the label is the name. */
+    icon?: Component;
+    /** Disables this button alone, leaving its neighbours toggleable. */
+    disabled?: boolean;
+    /** Forwarded to the button's DOM node — lets hosts keep stable test hooks. */
+    testId?: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The pressed value (`"single"`), the pressed values (`"multiple"`), or nothing pressed. */
+    modelValue?: string | string[] | null;
+    /** The buttons to render, in order. */
+    items: ToggleGroupItem[];
+    /** `"single"` models one value or `null`; `"multiple"` a `string[]`. */
+    type?: "single" | "multiple";
+    /** The track's resting look; a pressed button fills with the primary token in every variant. */
+    variant?: "secondary" | "outline" | "ghost";
+    /** `"sm"` is the compressed form for dense chrome — e.g. an editor toolbar. */
+    size?: "sm" | "md" | "lg";
+    /** Disables every button at once, distinct from a single item's own `disabled`. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | null) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The pressed value (`"single"`), the pressed values (`"multiple"`), or nothing pressed. */
+    modelValue?: string | string[] | null;
+    /** The buttons to render, in order. */
+    items: ToggleGroupItem[];
+    /** `"single"` models one value or `null`; `"multiple"` a `string[]`. */
+    type?: "single" | "multiple";
+    /** The track's resting look; a pressed button fills with the primary token in every variant. */
+    variant?: "secondary" | "outline" | "ghost";
+    /** `"sm"` is the compressed form for dense chrome — e.g. an editor toolbar. */
+    size?: "sm" | "md" | "lg";
+    /** Disables every button at once, distinct from a single item's own `disabled`. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string | string[] | null) => any;
+}>, {
+    size: "sm" | "md" | "lg";
+    type: "single" | "multiple";
+    disabled: boolean | undefined;
+    variant: "secondary" | "outline" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=ToggleGroup.vue.d.ts.map

package/dist/packages/primitives/toggle-group/src/ToggleGroup.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/toggle-group/src/ToggleGroup.vue"],"names":[],"mappings":"AA6NA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAErC,+CAA+C;AAC/C,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAkCd,6FAA6F;iBAChF,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;IACrC,uCAAuC;WAChC,eAAe,EAAE;IACxB,wEAAwE;WACjE,QAAQ,GAAG,UAAU;IAC5B,gGAAgG;cACtF,WAAW,GAAG,SAAS,GAAG,OAAO;IAC3C,+EAA+E;WACxE,IAAI,GAAG,IAAI,GAAG,IAAI;IACzB,qHAAqH;eAC1G,OAAO,GAAG,SAAS;;;;IAX9B,6FAA6F;iBAChF,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;IACrC,uCAAuC;WAChC,eAAe,EAAE;IACxB,wEAAwE;WACjE,QAAQ,GAAG,UAAU;IAC5B,gGAAgG;cACtF,WAAW,GAAG,SAAS,GAAG,OAAO;IAC3C,+EAA+E;WACxE,IAAI,GAAG,IAAI,GAAG,IAAI;IACzB,qHAAqH;eAC1G,OAAO,GAAG,SAAS;;;;UAFvB,IAAI,GAAG,IAAI,GAAG,IAAI;UAJlB,QAAQ,GAAG,UAAU;cAMjB,OAAO,GAAG,SAAS;aAJpB,WAAW,GAAG,SAAS,GAAG,OAAO;6EAiS3C,CAAC"}

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

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

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

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

package/dist/packages/primitives/toggle-group/src/index.d.ts

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

package/dist/packages/primitives/toggle-group/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/toggle-group/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

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

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

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

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

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

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

package/dist/packages/primitives/toolbar/src/Toolbar.vue.d.ts

@@ -0,0 +1,31 @@
+import type { InjectionKey } from "vue";
+/** Which axis the controls run along. */
+export type ToolbarOrientation = "horizontal" | "vertical";
+/** What the toolbar hands to its slotted children — only its axis. */
+export interface ToolbarContext {
+    orientation: ToolbarOrientation;
+}
+export declare const TOOLBAR_CONTEXT: InjectionKey<ToolbarContext>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Layout and announced axis of the control run. */
+    orientation?: ToolbarOrientation;
+    /** The toolbar's accessible name, for when no better label sits in the DOM. */
+    label?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Layout and announced axis of the control run. */
+    orientation?: ToolbarOrientation;
+    /** The toolbar's accessible name, for when no better label sits in the DOM. */
+    label?: string;
+}> & Readonly<{}>, {
+    orientation: ToolbarOrientation;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Toolbar.vue.d.ts.map

package/dist/packages/primitives/toolbar/src/Toolbar.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/toolbar/src/Toolbar.vue"],"names":[],"mappings":"AA6QA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAC;AACxC,yCAAyC;AACzC,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D,sEAAsE;AACtE,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,kBAAkB,CAAC;CACjC;AAED,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,cAAc,CAA0B,CAAC;wBAC/D,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAmDd,oDAAoD;kBACtC,kBAAkB;IAChC,+EAA+E;YACvE,MAAM;;IAHd,oDAAoD;kBACtC,kBAAkB;IAChC,+EAA+E;YACvE,MAAM;;iBAFA,kBAAkB;;cAiNtB,CAAC,KAAK,IAAgB,KAAK,GAAG;EAYxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

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

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

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

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

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

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

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

package/dist/packages/primitives/toolbar/src/ToolbarSeparator.vue.d.ts

@@ -0,0 +1,24 @@
+import type { ToolbarOrientation } from "./Toolbar.vue";
+/**
+ * ToolbarSeparator — the divider between groups of controls inside a
+ * Toolbar. It reads the toolbar's own orientation through the context the
+ * toolbar provides and draws along the perpendicular axis, so a horizontal
+ * toolbar gets vertical hairlines and a vertical one gets horizontal. Its
+ * `role="separator"` is the one an APG toolbar wants between its groups —
+ * which is why `decorative` is not offered here: inside a toolbar the line
+ * is never merely visual, it IS the group boundary.
+ *
+ * Composing the `Separator` primitive instead of drawing the hairline here
+ * was considered and rejected: the primitive binds `h-full w-px` for its
+ * vertical axis, and the short, centered divider a toolbar wants would fight
+ * that on Tailwind's emitted order — a coin flip, not a decision. Four lines
+ * of divider here beat a class-order lottery.
+ */
+type __VLS_Props = {
+    /** Only for standalone use — inside a Toolbar the axis is inherited. */
+    orientation?: ToolbarOrientation;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=ToolbarSeparator.vue.d.ts.map

package/dist/packages/primitives/toolbar/src/ToolbarSeparator.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSeparator.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/toolbar/src/ToolbarSeparator.vue"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAkB,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxE;;;;;;;;;;;;;;GAcG;AACH,KAAK,WAAW,GAAG;IACjB,wEAAwE;IACxE,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC,CAAC;AAqCF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}