@ecoma-io/loom 0.4.0 → 0.6.0

package/dist/packages/primitives/hover-card/src/HoverCard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HoverCard.js","names":[],"sources":["../../../../../packages/primitives/hover-card/src/HoverCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Which edge of the trigger the card prefers, before collision flipping. The\n * members mirror Reka's own `Side`, and the template binding is what enforces\n * that: a member Reka does not accept stops `:side=\"side\"` type-checking.\n * Declared here rather than aliased so the generated props table prints the\n * four values instead of a name that tells the reader nothing.\n */\nexport type HoverCardSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/**\n * How the card aligns against the trigger along the cross-axis, before\n * collision flipping. Same rationale as `HoverCardSide`.\n */\nexport type HoverCardAlign = \"start\" | \"center\" | \"end\";\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  HoverCardRoot,\n  HoverCardTrigger,\n  HoverCardPortal,\n  HoverCardContent,\n  HoverCardArrow,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * HoverCard — a supplementary preview surface on hover, for content the user\n * reads rather than operates.\n *\n * The pointer can travel from the trigger into the card without closing it —\n * the close delay exists for that transit, which is what makes a hover card a\n * complementary surface and a tooltip a non-interactive hint. But that reach\n * is a pointer privilege only. Reka strips `tabindex=\"-1\"` onto every tabbable\n * node inside the content on mount, and the trigger closes the card on blur\n * after `closeDelay` (300ms by default) — so by the time a keyboard user\n * tabbed toward anything inside, the card would already be gone. Interactive\n * content inside a HoverCard is unreachable by keyboard (WCAG 2.1.1), whatever\n * the markup allows.\n *\n * The honest contract: keep the card's content non-interactive — text, an\n * image, a definition — and duplicate anything actionable somewhere reachable.\n * When a preview genuinely needs its own links or buttons, it is not a hover\n * card; it is a `Popover`, whose content takes focus and whose Esc/outside\n * dismissal gives a keyboard user a way in and out.\n *\n * The content is NOT wired as `aria-describedby` — it is a supplementary panel,\n * not an accessible name supplement. A screen reader user who never hovers\n * should still have the trigger's own accessible name, and the card is extra\n * rather than essential.\n */\nwithDefaults(\n  defineProps<{\n    /** The edge of the trigger to anchor against, before collision flipping. */\n    side?: HoverCardSide;\n    /** Gap in pixels between the trigger and the card. */\n    sideOffset?: number;\n    /** Alignment against the trigger along the cross-axis, before collision flipping. */\n    align?: HoverCardAlign;\n    /** Alignment offset in pixels from the chosen alignment position. */\n    alignOffset?: number;\n    /** Milliseconds of hover before the card appears. */\n    openDelay?: number;\n    /** Milliseconds before the card disappears after the pointer leaves both trigger and content. */\n    closeDelay?: number;\n    /** Drive the card from the host with `v-model:open`. Omit for hover alone. */\n    open?: boolean | undefined;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both.\n  {\n    side: \"bottom\",\n    sideOffset: 6,\n    align: \"start\",\n    alignOffset: 0,\n    openDelay: 300,\n    closeDelay: 300,\n    open: undefined,\n  },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n</script>\n\n<template>\n  <HoverCardRoot\n    :open-delay=\"openDelay\"\n    :close-delay=\"closeDelay\"\n    v-bind=\"optional({ open })\"\n    @update:open=\"$emit('update:open', $event)\"\n  >\n    <!-- @slot The element that opens the card on hover. Rendered `as-child`, so\n         the caller's own element *is* the trigger and keeps its own accessible\n         name. -->\n    <HoverCardTrigger as-child>\n      <slot name=\"trigger\" />\n    </HoverCardTrigger>\n\n    <HoverCardPortal>\n      <HoverCardContent\n        :side=\"side\"\n        :side-offset=\"sideOffset\"\n        :align=\"align\"\n        :align-offset=\"alignOffset\"\n        :class=\"\n          cn(\n            'z-overlay w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none',\n            // Both states scoped, never unconditional. Reka's Presence\n            // keeps closed content mounted until an animationend arrives, and\n            // a mount-only animation never fires a second one — so an\n            // unconditional animation class leaves a stray card in the page.\n            // Scoped, the closed element computes `animation-name: none` and\n            // Presence unmounts it at once; the paired exit is precisely what\n            // Presence is waiting to hold it for.\n            'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n          )\n        \"\n        style=\"transform-origin: var(--reka-popper-transform-origin)\"\n      >\n        <!-- @slot The card content. Pointer-reachable, but keep it\n             non-interactive — see the component docblock for why keyboard\n             users cannot reach anything focusable in here. -->\n        <slot />\n        <HoverCardArrow class=\"fill-popover\" :width=\"10\" :height=\"5\" />\n      </HoverCardContent>\n    </HoverCardPortal>\n  </HoverCardRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/hover-card/src/HoverCard.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HoverCard.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/hover-card/src/HoverCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Which edge of the trigger the card prefers, before collision flipping. The\n * members mirror Reka's own `Side`, and the template binding is what enforces\n * that: a member Reka does not accept stops `:side=\"side\"` type-checking.\n * Declared here rather than aliased so the generated props table prints the\n * four values instead of a name that tells the reader nothing.\n */\nexport type HoverCardSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/**\n * How the card aligns against the trigger along the cross-axis, before\n * collision flipping. Same rationale as `HoverCardSide`.\n */\nexport type HoverCardAlign = \"start\" | \"center\" | \"end\";\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  HoverCardRoot,\n  HoverCardTrigger,\n  HoverCardPortal,\n  HoverCardContent,\n  HoverCardArrow,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * HoverCard — a supplementary preview surface on hover, for content the user\n * reads rather than operates.\n *\n * The pointer can travel from the trigger into the card without closing it —\n * the close delay exists for that transit, which is what makes a hover card a\n * complementary surface and a tooltip a non-interactive hint. But that reach\n * is a pointer privilege only. Reka strips `tabindex=\"-1\"` onto every tabbable\n * node inside the content on mount, and the trigger closes the card on blur\n * after `closeDelay` (300ms by default) — so by the time a keyboard user\n * tabbed toward anything inside, the card would already be gone. Interactive\n * content inside a HoverCard is unreachable by keyboard (WCAG 2.1.1), whatever\n * the markup allows.\n *\n * The honest contract: keep the card's content non-interactive — text, an\n * image, a definition — and duplicate anything actionable somewhere reachable.\n * When a preview genuinely needs its own links or buttons, it is not a hover\n * card; it is a `Popover`, whose content takes focus and whose Esc/outside\n * dismissal gives a keyboard user a way in and out.\n *\n * The content is NOT wired as `aria-describedby` — it is a supplementary panel,\n * not an accessible name supplement. A screen reader user who never hovers\n * should still have the trigger's own accessible name, and the card is extra\n * rather than essential.\n */\nwithDefaults(\n  defineProps<{\n    /** The edge of the trigger to anchor against, before collision flipping. */\n    side?: HoverCardSide;\n    /** Gap in pixels between the trigger and the card. */\n    sideOffset?: number;\n    /** Alignment against the trigger along the cross-axis, before collision flipping. */\n    align?: HoverCardAlign;\n    /** Alignment offset in pixels from the chosen alignment position. */\n    alignOffset?: number;\n    /** Milliseconds of hover before the card appears. */\n    openDelay?: number;\n    /** Milliseconds before the card disappears after the pointer leaves both trigger and content. */\n    closeDelay?: number;\n    /** Drive the card from the host with `v-model:open`. Omit for hover alone. */\n    open?: boolean | undefined;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both.\n  {\n    side: \"bottom\",\n    sideOffset: 6,\n    align: \"start\",\n    alignOffset: 0,\n    openDelay: 300,\n    closeDelay: 300,\n    open: undefined,\n  },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n</script>\n\n<template>\n  <HoverCardRoot\n    :open-delay=\"openDelay\"\n    :close-delay=\"closeDelay\"\n    v-bind=\"optional({ open })\"\n    @update:open=\"$emit('update:open', $event)\"\n  >\n    <!-- @slot The element that opens the card on hover. Rendered `as-child`, so\n         the caller's own element *is* the trigger and keeps its own accessible\n         name. -->\n    <HoverCardTrigger as-child>\n      <slot name=\"trigger\" />\n    </HoverCardTrigger>\n\n    <HoverCardPortal>\n      <HoverCardContent\n        :side=\"side\"\n        :side-offset=\"sideOffset\"\n        :align=\"align\"\n        :align-offset=\"alignOffset\"\n        :class=\"\n          cn(\n            'z-overlay w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none',\n            // Both states scoped, never unconditional. Reka's Presence\n            // keeps closed content mounted until an animationend arrives, and\n            // a mount-only animation never fires a second one — so an\n            // unconditional animation class leaves a stray card in the page.\n            // Scoped, the closed element computes `animation-name: none` and\n            // Presence unmounts it at once; the paired exit is precisely what\n            // Presence is waiting to hold it for.\n            'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n          )\n        \"\n        style=\"transform-origin: var(--reka-popper-transform-origin)\"\n      >\n        <!-- @slot The card content. Pointer-reachable, but keep it\n             non-interactive — see the component docblock for why keyboard\n             users cannot reach anything focusable in here. -->\n        <slot />\n        <HoverCardArrow class=\"fill-popover\" :width=\"10\" :height=\"5\" />\n      </HoverCardContent>\n    </HoverCardPortal>\n  </HoverCardRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;GAyFE,OAAA,UAAA,GAAA,YAyCgB,MAAA,aAAA,GAzChB,WAyCgB;IAxCb,cAAY,QAAA;IACZ,eAAa,QAAA;GACN,GAAA,MAAA,QAAA,CAAQ,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,EACtB,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM,GAAA,CAAA,GAAA;IAKzC,SAAA,cAEmB,CAFnB,YAEmB,MAAA,gBAAA,GAAA,EAFD,YAAA,GAAQ,GAAA;KACxB,SAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;IAGzB,CAAA,GAAA,YA2BkB,MAAA,eAAA,GAAA,MAAA;KA1BhB,SAAA,cAyBmB,CAzBnB,YAyBmB,MAAA,gBAAA,GAAA;MAxBhB,MAAM,QAAA;MACN,eAAa,QAAA;MACb,OAAO,QAAA;MACP,gBAAc,QAAA;MACd,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,gHAAA,0EAAA,CAAA;MAarB,OAAA,EAAA,oBAAA,sCAAA;;MAKA,SAAA,cAAQ,CAAR,WAAQ,KAAA,QAAA,SAAA,GACR,YAA+D,MAAA,cAAA,GAAA;OAA/C,OAAM;OAAgB,OAAO;OAAK,QAAQ"}

package/dist/packages/primitives/icon-button/src/IconButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.js","names":[],"sources":["../../../../../packages/primitives/icon-button/src/IconButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\nexport type IconButtonVariant = \"default\" | \"secondary\" | \"ghost\" | \"destructive\";\n\nexport type IconButtonSize = \"sm\" | \"md\" | \"lg\";\n\n/**\n * An icon-only button is a square, so every size is height-equals-width and has\n * no horizontal padding. The four variants match Button's press language — hover\n * lifts by fill, active presses down, focus blooms the primary ring — but\n * `default` here names what Button calls `primary`, because an icon button is\n * never the screen's primary action and the word would mislead.\n */\nexport const iconButtonVariants = cva(\n  [\n    \"relative inline-flex items-center justify-center rounded-md select-none\",\n    // Button's own transition list, verbatim: transform rides --ease-spring so\n    // the press squish springs, while colour and shadow stay on --ease-out.\n    // A bare `transition-colors` silently dropped any transform change.\n    \"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]\",\n    \"active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n    \"disabled:pointer-events-none\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70\",\n        ghost: \"hover:bg-subtle text-foreground\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80\",\n      } satisfies Record<IconButtonVariant, string>,\n      size: {\n        sm: \"h-8 w-8\",\n        md: \"h-9 w-9\",\n        lg: \"h-10 w-10\",\n      } satisfies Record<IconButtonSize, string>,\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Visual weight, matching Button's press language but without the `primary` name — an icon button is never the action a screen is asking for. */\n    variant?: IconButtonVariant;\n    /** Square hit area. Every size is 24px or above (WCAG 2.2 SC 2.5.8). */\n    size?: IconButtonSize;\n    /** The accessible name. An icon-only button without one is a WCAG failure, so this prop is required. */\n    label: string;\n    /** Unavailable rather than dimmed — drains to the neutral well and blocks pointer events. */\n    disabled?: boolean;\n    /** The native button type. Defaults to `button`, never an accidental submit. */\n    type?: \"button\" | \"submit\" | \"reset\";\n  }>(),\n  { variant: \"default\", size: \"md\", disabled: false, type: \"button\" },\n);\n</script>\n\n<template>\n  <button\n    :type=\"type\"\n    :class=\"\n      cn(\n        iconButtonVariants({ variant, size }),\n        $attrs.class,\n        // Drained, not dimmed — Button's rule, and for the same measured reason:\n        // `opacity-50` faded the fill and the glyph together, multiplying away\n        // whatever contrast either had. One neutral treatment covers all four\n        // variants here exactly as it does on Button — a fill-bearing icon\n        // button gives up its hue, `ghost` gains a fill — because an unavailable\n        // control has no emphasis left to carry, and the native `disabled`\n        // attribute above carries the state to assistive tech regardless.\n        // No `border-border` companion: unlike Button's variants none of these\n        // paints a border to slacken.\n        disabled && 'bg-muted text-muted-foreground shadow-none',\n      )\n    \"\n    :aria-label=\"label\"\n    :disabled=\"disabled\"\n  >\n    <slot />\n  </button>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/icon-button/src/IconButton.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../../packages/primitives/icon-button/src/IconButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\nexport type IconButtonVariant = \"default\" | \"secondary\" | \"ghost\" | \"destructive\";\n\nexport type IconButtonSize = \"sm\" | \"md\" | \"lg\";\n\n/**\n * An icon-only button is a square, so every size is height-equals-width and has\n * no horizontal padding. The four variants match Button's press language — hover\n * lifts by fill, active presses down, focus blooms the primary ring — but\n * `default` here names what Button calls `primary`, because an icon button is\n * never the screen's primary action and the word would mislead.\n */\nexport const iconButtonVariants = cva(\n  [\n    \"relative inline-flex items-center justify-center rounded-md select-none\",\n    // Button's own transition list, verbatim: transform rides --ease-spring so\n    // the press squish springs, while colour and shadow stay on --ease-out.\n    // A bare `transition-colors` silently dropped any transform change.\n    \"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]\",\n    \"active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n    \"disabled:pointer-events-none\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70\",\n        ghost: \"hover:bg-subtle text-foreground\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80\",\n      } satisfies Record<IconButtonVariant, string>,\n      size: {\n        sm: \"h-8 w-8\",\n        md: \"h-9 w-9\",\n        lg: \"h-10 w-10\",\n      } satisfies Record<IconButtonSize, string>,\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Visual weight, matching Button's press language but without the `primary` name — an icon button is never the action a screen is asking for. */\n    variant?: IconButtonVariant;\n    /** Square hit area. Every size is 24px or above (WCAG 2.2 SC 2.5.8). */\n    size?: IconButtonSize;\n    /** The accessible name. An icon-only button without one is a WCAG failure, so this prop is required. */\n    label: string;\n    /** Unavailable rather than dimmed — drains to the neutral well and blocks pointer events. */\n    disabled?: boolean;\n    /** The native button type. Defaults to `button`, never an accidental submit. */\n    type?: \"button\" | \"submit\" | \"reset\";\n  }>(),\n  { variant: \"default\", size: \"md\", disabled: false, type: \"button\" },\n);\n</script>\n\n<template>\n  <button\n    :type=\"type\"\n    :class=\"\n      cn(\n        iconButtonVariants({ variant, size }),\n        $attrs.class,\n        // Drained, not dimmed — Button's rule, and for the same measured reason:\n        // `opacity-50` faded the fill and the glyph together, multiplying away\n        // whatever contrast either had. One neutral treatment covers all four\n        // variants here exactly as it does on Button — a fill-bearing icon\n        // button gives up its hue, `ghost` gains a fill — because an unavailable\n        // control has no emphasis left to carry, and the native `disabled`\n        // attribute above carries the state to assistive tech regardless.\n        // No `border-border` companion: unlike Button's variants none of these\n        // paints a border to slacken.\n        disabled && 'bg-muted text-muted-foreground shadow-none',\n      )\n    \"\n    :aria-label=\"label\"\n    :disabled=\"disabled\"\n  >\n    <slot />\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;AAcA,IAAa,qBAAqB,IAChC;CACE;CAIA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,WACE;GACF,OAAO;GACP,aACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;;;;;;;;;;;;GAwBE,OAAA,UAAA,GAAA,mBAsBS,UAAA;IArBN,MAAM,QAAA;IACN,OAAK,eAAS,MAAA,EAAA,CAAE,CAAU,MAAA,kBAAA,CAAkB,CAAA;KAAA,SAAG,QAAA;KAAO,MAAE,QAAA;IAAI,CAAA,GAAaA,KAAAA,OAAO,OAA4qB,QAAA,YAAQ,4CAAA,CAAA;IAgBpwB,cAAY,QAAA;IACZ,UAAU,QAAA;GAEX,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/packages/primitives/indicator/src/Indicator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Indicator.js","names":[],"sources":["../../../../../packages/primitives/indicator/src/Indicator.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { IndicatorLabels } from \"@ecoma-io/loom-labels\";\nimport { cva } from \"class-variance-authority\";\n\n/** A presence dot, or a number. */\nexport type IndicatorVariant = \"dot\" | \"count\";\n\n/** The four presence states a dot can report. */\nexport type IndicatorStatus = \"online\" | \"offline\" | \"busy\" | \"away\";\n\n/** Which corner of the marked element the marker straddles. */\nexport type IndicatorPlacement = \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n\n/**\n * The colour vocabulary, deliberately Badge's own names rather than a second\n * set — `accent` included, and it means here exactly what it means there:\n * a second semantic category distinct from primary, never decoration.\n */\nexport type IndicatorTone =\n  \"neutral\" | \"primary\" | \"success\" | \"warning\" | \"info\" | \"destructive\" | \"accent\";\n\n/** The surface the marked element sits on, which the separating ring matches. */\nexport type IndicatorSurface = \"background\" | \"card\" | \"sunken\" | \"popover\";\n\nexport const indicatorVariants = cva(\n  // `pointer-events-none` is load-bearing rather than tidy: the marker\n  // overhangs the corner of whatever it marks, so without it the top-right\n  // few pixels of a bell button stop being clickable.\n  \"pointer-events-none absolute z-10 flex items-center justify-center select-none ring-2\",\n  {\n    variants: {\n      variant: {\n        // 12px leaves room for the status glyphs below to read as shapes\n        // rather than as noise.\n        dot: \"h-3 w-3 rounded-full\",\n        // `min-w-5` and the padding together are what make one digit a circle\n        // and three a pill, with no branch: \"1\" is narrower than the minimum\n        // and lands on it, \"99+\" outgrows it and the radius turns the ends.\n        count: \"h-5 min-w-5 rounded-full px-1.5 text-micro font-medium tabular\",\n      } satisfies Record<IndicatorVariant, string>,\n      placement: {\n        \"top-right\": \"top-0 right-0 -translate-y-1/2 translate-x-1/2\",\n        \"top-left\": \"top-0 left-0 -translate-y-1/2 -translate-x-1/2\",\n        \"bottom-right\": \"right-0 bottom-0 translate-x-1/2 translate-y-1/2\",\n        \"bottom-left\": \"bottom-0 left-0 -translate-x-1/2 translate-y-1/2\",\n      } satisfies Record<IndicatorPlacement, string>,\n      // The ring is what separates the marker from the photo, avatar or icon\n      // underneath, the way a presence dot is punched out of a portrait. It\n      // has to be the colour of what surrounds the pair, which only the caller\n      // knows — hence a prop rather than a guess.\n      surface: {\n        background: \"ring-background\",\n        card: \"ring-card\",\n        sunken: \"ring-sunken\",\n        popover: \"ring-popover\",\n      } satisfies Record<IndicatorSurface, string>,\n    },\n    defaultVariants: { variant: \"dot\", placement: \"top-right\", surface: \"background\" },\n  },\n);\n\n/**\n * The fill, keyed by Badge's colour names so a success dot and a success badge\n * are the same green. These are the solid tokens where Badge uses a 12% wash:\n * a wash reads fine across a chip and carries no signal at all across 12px.\n *\n * The paired `text-*` is what the count prints in and what the status glyph is\n * punched out in, so one entry drives both layers.\n */\nexport const indicatorToneVariants = cva(\"\", {\n  variants: {\n    tone: {\n      neutral: \"bg-muted-foreground text-background\",\n      primary: \"bg-primary text-primary-foreground\",\n      success: \"bg-success text-success-foreground\",\n      warning: \"bg-warning text-warning-foreground\",\n      info: \"bg-info text-info-foreground\",\n      destructive: \"bg-destructive text-destructive-foreground\",\n      accent: \"bg-accent text-accent-foreground\",\n    } satisfies Record<IndicatorTone, string>,\n  },\n  defaultVariants: { tone: \"primary\" },\n});\n\n/** Which colour each presence state means, so `status` alone is enough. */\nconst STATUS_TONES = {\n  online: \"success\",\n  offline: \"neutral\",\n  busy: \"destructive\",\n  away: \"warning\",\n} satisfies Record<IndicatorStatus, IndicatorTone>;\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 INDICATOR_LABELS: IndicatorLabels = {\n  online: \"Online\",\n  offline: \"Offline\",\n  busy: \"Busy\",\n  away: \"Away\",\n  count: ({ count }) => `${String(count)} unread`,\n  attention: \"Needs attention\",\n};\n\n/**\n * The shape layer, and it exists for the sighted reader the `sr-only` string\n * below cannot help. Three of the four states are saturated — green, amber,\n * red — which is the exact triple a red/green deficiency collapses, so `busy`\n * wears a bar and `away` a hole and no two of them differ by hue alone.\n * `offline` needs none: grey against any of the three is a saturation\n * difference, not a hue one.\n */\nconst STATUS_GLYPHS = {\n  online: \"\",\n  offline: \"\",\n  busy: \"h-0.5 w-1.5 rounded-full bg-current\",\n  away: \"h-1 w-1 rounded-full bg-current\",\n} satisfies Record<IndicatorStatus, string>;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useId } from \"vue\";\nimport { cn, useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Indicator — the small marker pinned onto the corner of something else: a\n * presence dot on an avatar, an unread count on a bell, a \"needs attention\"\n * dot on a tab. The default slot is the thing being marked, and the marker\n * positions itself over that child's corner.\n *\n * The boundary with Badge is the whole of the decision between them: **Badge\n * sits in the flow beside content; Indicator is pinned onto content.** A count\n * chip in a table cell is a Badge. The same count floating over a bell icon is\n * an Indicator. Reach for Badge whenever the marker would take up room of its\n * own, and for this whenever it would overhang something.\n *\n * What this component is by default is a bare colour, which is the one thing\n * Loom's accessibility bar forbids outright. A green dot says nothing to a\n * reader who cannot see it. So every marker that renders carries a visually\n * hidden string — `label`, or a default derived from `status` or `count` — and\n * a blank `label` falls back to that default rather than replacing it, which\n * is what makes an unnamed indicator unreachable rather than merely\n * discouraged. The shape layer in `STATUS_GLYPHS` covers the sighted reader\n * the hidden string cannot.\n *\n * There is deliberately **no `aria-live` region here**, and the reason is that\n * this component cannot know whether a change is news. An unread counter is\n * usually fed by a poll, so a live region announces every tick over whatever\n * the reader was doing; the same count is commonly pinned in two places at\n * once, so it announces twice; and a polite region speaks on first render in\n * several screen reader and browser pairs, which turns every page load into a\n * recitation of the inbox. The marker is therefore static text a reader\n * reaches on demand, and announcing a *change* stays with the consumer, who\n * knows whether it followed something the reader just did.\n *\n * One consequence to design around: when the marked child is interactive, its\n * accessible name is computed from the child, and this marker's text sits\n * outside it — a bell button announces \"Notifications, button\" on focus and\n * never mentions the three unread. The default slot exposes `labelId` for\n * exactly that: bind it to the control's `aria-describedby` and the count is\n * announced straight after the name, once, without being duplicated into it.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** A presence dot, or a number in a pill. */\n    variant?: IndicatorVariant;\n    /** The number the pill prints, when `variant` is `count`. Zero hides the marker unless `showZero` is set. */\n    count?: number;\n    /** The highest number printed in full; anything above it prints as `<max>+`. The accessible text still carries the real figure. */\n    max?: number;\n    /** Presence, for a dot: it picks the colour and the shape, and names the dot for a screen reader. Omit it for a plain \"something changed\" dot. */\n    status?: IndicatorStatus;\n    /** The marker's colour, in Badge's own vocabulary. Defaults to whatever `status` implies, or to `primary` when there is no status. */\n    tone?: IndicatorTone;\n    /** Which corner of the marked element the marker straddles. */\n    placement?: IndicatorPlacement;\n    /** What a screen reader announces for the marker. Leave it unset for the derived default — \"Online\", \"3 unread\" — and set it whenever the count is not of unread things. Blank or whitespace falls back to the default rather than clearing it. */\n    label?: string;\n    /** Render the pill when the count is zero. Off by default, because a count of nothing is not news. */\n    showZero?: boolean;\n    /** The surface the marked element sits on, so the ring separating the marker from it matches what surrounds them. */\n    surface?: IndicatorSurface;\n    /**\n     * Names for the markers this component derives on its own, as any subset\n     * of `IndicatorLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the vocabulary, not the instance's name: `label` still beats it\n     * and is what one bell counting drafts rather than unread mail reaches for.\n     */\n    labels?: LabelOverrides<IndicatorLabels>;\n  }>(),\n  {\n    variant: \"dot\",\n    count: 0,\n    max: 99,\n    placement: \"top-right\",\n    showZero: false,\n    surface: \"background\",\n  },\n);\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(\"indicator\", INDICATOR_LABELS, () => props.labels);\n\n// One rendered node, and every fallthrough attribute belongs on it — but\n// `class` still has to go the long way round. A consumer replacing the root's\n// `inline-flex` with `block` cannot win by concatenation, because the winner\n// there is decided by the order of the two rules in the stylesheet rather than\n// by the order of the two names in the attribute; `cn()` is what resolves it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n// Bound to the hidden label so an interactive child can point its\n// `aria-describedby` at it through the slot prop.\nconst labelId = useId();\n\n/**\n * The count as a whole, non-negative number. A negative count is a defect in\n * the caller's data, and a pill reading \"-1 unread\" reports that defect to the\n * reader rather than to the caller — falling back to \"nothing to report\" is\n * the honest rendering of it.\n */\nconst total = computed(() => Math.max(0, Math.trunc(props.count)));\n\nconst visible = computed(() => props.variant === \"dot\" || total.value > 0 || props.showZero);\n\n/** What the pill prints — the real figure up to `max`, then `<max>+`. */\nconst printed = computed(() =>\n  total.value > props.max ? `${String(props.max)}+` : String(total.value),\n);\n\nconst tone = computed<IndicatorTone>(\n  () => props.tone ?? (props.status ? STATUS_TONES[props.status] : \"primary\"),\n);\n\nconst glyph = computed(() => (props.status ? STATUS_GLYPHS[props.status] : \"\"));\n\n/**\n * The accessible name, and it is never empty by construction. The count case\n * reports `total` rather than `printed`: clamping at `max` is a decision about\n * how wide the pill is allowed to get, and a reader who cannot see the pill\n * has no reason to inherit it — \"132 unread\" is the fact, \"99+\" is the layout.\n */\nconst name = computed(() => {\n  const given = props.label?.trim();\n  if (given) return given;\n  if (props.variant === \"count\") return text.value.count({ count: total.value });\n  // Keyed by the status itself rather than through a lookup table of its own:\n  // `IndicatorLabels` names its four presence keys after the four members of\n  // `IndicatorStatus`, so a state added to the union with no name for it stops\n  // compiling here instead of rendering an unnamed dot.\n  return props.status ? text.value[props.status] : text.value.attention;\n});\n</script>\n\n<template>\n  <span v-bind=\"rest\" :class=\"cn('relative inline-flex align-middle', attrs.class as string)\">\n    <!-- A multi-line `@slot` comment comes back from vue-docgen with no description at all, so this one stays on one line. -->\n    <!-- @slot The element being marked. `labelId` is the id of the marker's own hidden text — bind it to an interactive child's `aria-describedby` so the count is announced after that control's name. -->\n    <slot :label-id=\"labelId\" />\n\n    <!-- Keyed on what is printed rather than on the count, so `animate-scale-in`\n         replays when a number a reader can see actually changes and stays put\n         when 100 becomes 132 behind the same \"99+\". A dot's key never moves, so\n         a dot never animates: presence settles into place on load, it does not\n         arrive as news, and it must not pulse. -->\n    <span\n      v-if=\"visible\"\n      :key=\"printed\"\n      :data-placement=\"placement\"\n      :class=\"\n        cn(\n          indicatorVariants({ variant, placement, surface }),\n          indicatorToneVariants({ tone }),\n          variant === 'count' && 'animate-scale-in',\n        )\n      \"\n    >\n      <!-- Hidden from assistive tech because the label below carries the real\n           figure; left visible the pair would read as \"99+ 132 unread\". -->\n      <span v-if=\"variant === 'count'\" aria-hidden=\"true\">{{ printed }}</span>\n      <span v-else-if=\"glyph\" :class=\"glyph\" />\n\n      <span :id=\"labelId\" class=\"sr-only\">{{ name }}</span>\n    </span>\n  </span>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/indicator/src/Indicator.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Indicator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/indicator/src/Indicator.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { IndicatorLabels } from \"@ecoma-io/loom-labels\";\nimport { cva } from \"class-variance-authority\";\n\n/** A presence dot, or a number. */\nexport type IndicatorVariant = \"dot\" | \"count\";\n\n/** The four presence states a dot can report. */\nexport type IndicatorStatus = \"online\" | \"offline\" | \"busy\" | \"away\";\n\n/** Which corner of the marked element the marker straddles. */\nexport type IndicatorPlacement = \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n\n/**\n * The colour vocabulary, deliberately Badge's own names rather than a second\n * set — `accent` included, and it means here exactly what it means there:\n * a second semantic category distinct from primary, never decoration.\n */\nexport type IndicatorTone =\n  \"neutral\" | \"primary\" | \"success\" | \"warning\" | \"info\" | \"destructive\" | \"accent\";\n\n/** The surface the marked element sits on, which the separating ring matches. */\nexport type IndicatorSurface = \"background\" | \"card\" | \"sunken\" | \"popover\";\n\nexport const indicatorVariants = cva(\n  // `pointer-events-none` is load-bearing rather than tidy: the marker\n  // overhangs the corner of whatever it marks, so without it the top-right\n  // few pixels of a bell button stop being clickable.\n  \"pointer-events-none absolute z-10 flex items-center justify-center select-none ring-2\",\n  {\n    variants: {\n      variant: {\n        // 12px leaves room for the status glyphs below to read as shapes\n        // rather than as noise.\n        dot: \"h-3 w-3 rounded-full\",\n        // `min-w-5` and the padding together are what make one digit a circle\n        // and three a pill, with no branch: \"1\" is narrower than the minimum\n        // and lands on it, \"99+\" outgrows it and the radius turns the ends.\n        count: \"h-5 min-w-5 rounded-full px-1.5 text-micro font-medium tabular\",\n      } satisfies Record<IndicatorVariant, string>,\n      placement: {\n        \"top-right\": \"top-0 right-0 -translate-y-1/2 translate-x-1/2\",\n        \"top-left\": \"top-0 left-0 -translate-y-1/2 -translate-x-1/2\",\n        \"bottom-right\": \"right-0 bottom-0 translate-x-1/2 translate-y-1/2\",\n        \"bottom-left\": \"bottom-0 left-0 -translate-x-1/2 translate-y-1/2\",\n      } satisfies Record<IndicatorPlacement, string>,\n      // The ring is what separates the marker from the photo, avatar or icon\n      // underneath, the way a presence dot is punched out of a portrait. It\n      // has to be the colour of what surrounds the pair, which only the caller\n      // knows — hence a prop rather than a guess.\n      surface: {\n        background: \"ring-background\",\n        card: \"ring-card\",\n        sunken: \"ring-sunken\",\n        popover: \"ring-popover\",\n      } satisfies Record<IndicatorSurface, string>,\n    },\n    defaultVariants: { variant: \"dot\", placement: \"top-right\", surface: \"background\" },\n  },\n);\n\n/**\n * The fill, keyed by Badge's colour names so a success dot and a success badge\n * are the same green. These are the solid tokens where Badge uses a 12% wash:\n * a wash reads fine across a chip and carries no signal at all across 12px.\n *\n * The paired `text-*` is what the count prints in and what the status glyph is\n * punched out in, so one entry drives both layers.\n */\nexport const indicatorToneVariants = cva(\"\", {\n  variants: {\n    tone: {\n      neutral: \"bg-muted-foreground text-background\",\n      primary: \"bg-primary text-primary-foreground\",\n      success: \"bg-success text-success-foreground\",\n      warning: \"bg-warning text-warning-foreground\",\n      info: \"bg-info text-info-foreground\",\n      destructive: \"bg-destructive text-destructive-foreground\",\n      accent: \"bg-accent text-accent-foreground\",\n    } satisfies Record<IndicatorTone, string>,\n  },\n  defaultVariants: { tone: \"primary\" },\n});\n\n/** Which colour each presence state means, so `status` alone is enough. */\nconst STATUS_TONES = {\n  online: \"success\",\n  offline: \"neutral\",\n  busy: \"destructive\",\n  away: \"warning\",\n} satisfies Record<IndicatorStatus, IndicatorTone>;\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 INDICATOR_LABELS: IndicatorLabels = {\n  online: \"Online\",\n  offline: \"Offline\",\n  busy: \"Busy\",\n  away: \"Away\",\n  count: ({ count }) => `${String(count)} unread`,\n  attention: \"Needs attention\",\n};\n\n/**\n * The shape layer, and it exists for the sighted reader the `sr-only` string\n * below cannot help. Three of the four states are saturated — green, amber,\n * red — which is the exact triple a red/green deficiency collapses, so `busy`\n * wears a bar and `away` a hole and no two of them differ by hue alone.\n * `offline` needs none: grey against any of the three is a saturation\n * difference, not a hue one.\n */\nconst STATUS_GLYPHS = {\n  online: \"\",\n  offline: \"\",\n  busy: \"h-0.5 w-1.5 rounded-full bg-current\",\n  away: \"h-1 w-1 rounded-full bg-current\",\n} satisfies Record<IndicatorStatus, string>;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useId } from \"vue\";\nimport { cn, useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Indicator — the small marker pinned onto the corner of something else: a\n * presence dot on an avatar, an unread count on a bell, a \"needs attention\"\n * dot on a tab. The default slot is the thing being marked, and the marker\n * positions itself over that child's corner.\n *\n * The boundary with Badge is the whole of the decision between them: **Badge\n * sits in the flow beside content; Indicator is pinned onto content.** A count\n * chip in a table cell is a Badge. The same count floating over a bell icon is\n * an Indicator. Reach for Badge whenever the marker would take up room of its\n * own, and for this whenever it would overhang something.\n *\n * What this component is by default is a bare colour, which is the one thing\n * Loom's accessibility bar forbids outright. A green dot says nothing to a\n * reader who cannot see it. So every marker that renders carries a visually\n * hidden string — `label`, or a default derived from `status` or `count` — and\n * a blank `label` falls back to that default rather than replacing it, which\n * is what makes an unnamed indicator unreachable rather than merely\n * discouraged. The shape layer in `STATUS_GLYPHS` covers the sighted reader\n * the hidden string cannot.\n *\n * There is deliberately **no `aria-live` region here**, and the reason is that\n * this component cannot know whether a change is news. An unread counter is\n * usually fed by a poll, so a live region announces every tick over whatever\n * the reader was doing; the same count is commonly pinned in two places at\n * once, so it announces twice; and a polite region speaks on first render in\n * several screen reader and browser pairs, which turns every page load into a\n * recitation of the inbox. The marker is therefore static text a reader\n * reaches on demand, and announcing a *change* stays with the consumer, who\n * knows whether it followed something the reader just did.\n *\n * One consequence to design around: when the marked child is interactive, its\n * accessible name is computed from the child, and this marker's text sits\n * outside it — a bell button announces \"Notifications, button\" on focus and\n * never mentions the three unread. The default slot exposes `labelId` for\n * exactly that: bind it to the control's `aria-describedby` and the count is\n * announced straight after the name, once, without being duplicated into it.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** A presence dot, or a number in a pill. */\n    variant?: IndicatorVariant;\n    /** The number the pill prints, when `variant` is `count`. Zero hides the marker unless `showZero` is set. */\n    count?: number;\n    /** The highest number printed in full; anything above it prints as `<max>+`. The accessible text still carries the real figure. */\n    max?: number;\n    /** Presence, for a dot: it picks the colour and the shape, and names the dot for a screen reader. Omit it for a plain \"something changed\" dot. */\n    status?: IndicatorStatus;\n    /** The marker's colour, in Badge's own vocabulary. Defaults to whatever `status` implies, or to `primary` when there is no status. */\n    tone?: IndicatorTone;\n    /** Which corner of the marked element the marker straddles. */\n    placement?: IndicatorPlacement;\n    /** What a screen reader announces for the marker. Leave it unset for the derived default — \"Online\", \"3 unread\" — and set it whenever the count is not of unread things. Blank or whitespace falls back to the default rather than clearing it. */\n    label?: string;\n    /** Render the pill when the count is zero. Off by default, because a count of nothing is not news. */\n    showZero?: boolean;\n    /** The surface the marked element sits on, so the ring separating the marker from it matches what surrounds them. */\n    surface?: IndicatorSurface;\n    /**\n     * Names for the markers this component derives on its own, as any subset\n     * of `IndicatorLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the vocabulary, not the instance's name: `label` still beats it\n     * and is what one bell counting drafts rather than unread mail reaches for.\n     */\n    labels?: LabelOverrides<IndicatorLabels>;\n  }>(),\n  {\n    variant: \"dot\",\n    count: 0,\n    max: 99,\n    placement: \"top-right\",\n    showZero: false,\n    surface: \"background\",\n  },\n);\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(\"indicator\", INDICATOR_LABELS, () => props.labels);\n\n// One rendered node, and every fallthrough attribute belongs on it — but\n// `class` still has to go the long way round. A consumer replacing the root's\n// `inline-flex` with `block` cannot win by concatenation, because the winner\n// there is decided by the order of the two rules in the stylesheet rather than\n// by the order of the two names in the attribute; `cn()` is what resolves it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n// Bound to the hidden label so an interactive child can point its\n// `aria-describedby` at it through the slot prop.\nconst labelId = useId();\n\n/**\n * The count as a whole, non-negative number. A negative count is a defect in\n * the caller's data, and a pill reading \"-1 unread\" reports that defect to the\n * reader rather than to the caller — falling back to \"nothing to report\" is\n * the honest rendering of it.\n */\nconst total = computed(() => Math.max(0, Math.trunc(props.count)));\n\nconst visible = computed(() => props.variant === \"dot\" || total.value > 0 || props.showZero);\n\n/** What the pill prints — the real figure up to `max`, then `<max>+`. */\nconst printed = computed(() =>\n  total.value > props.max ? `${String(props.max)}+` : String(total.value),\n);\n\nconst tone = computed<IndicatorTone>(\n  () => props.tone ?? (props.status ? STATUS_TONES[props.status] : \"primary\"),\n);\n\nconst glyph = computed(() => (props.status ? STATUS_GLYPHS[props.status] : \"\"));\n\n/**\n * The accessible name, and it is never empty by construction. The count case\n * reports `total` rather than `printed`: clamping at `max` is a decision about\n * how wide the pill is allowed to get, and a reader who cannot see the pill\n * has no reason to inherit it — \"132 unread\" is the fact, \"99+\" is the layout.\n */\nconst name = computed(() => {\n  const given = props.label?.trim();\n  if (given) return given;\n  if (props.variant === \"count\") return text.value.count({ count: total.value });\n  // Keyed by the status itself rather than through a lookup table of its own:\n  // `IndicatorLabels` names its four presence keys after the four members of\n  // `IndicatorStatus`, so a state added to the union with no name for it stops\n  // compiling here instead of rendering an unnamed dot.\n  return props.status ? text.value[props.status] : text.value.attention;\n});\n</script>\n\n<template>\n  <span v-bind=\"rest\" :class=\"cn('relative inline-flex align-middle', attrs.class as string)\">\n    <!-- A multi-line `@slot` comment comes back from vue-docgen with no description at all, so this one stays on one line. -->\n    <!-- @slot The element being marked. `labelId` is the id of the marker's own hidden text — bind it to an interactive child's `aria-describedby` so the count is announced after that control's name. -->\n    <slot :label-id=\"labelId\" />\n\n    <!-- Keyed on what is printed rather than on the count, so `animate-scale-in`\n         replays when a number a reader can see actually changes and stays put\n         when 100 becomes 132 behind the same \"99+\". A dot's key never moves, so\n         a dot never animates: presence settles into place on load, it does not\n         arrive as news, and it must not pulse. -->\n    <span\n      v-if=\"visible\"\n      :key=\"printed\"\n      :data-placement=\"placement\"\n      :class=\"\n        cn(\n          indicatorVariants({ variant, placement, surface }),\n          indicatorToneVariants({ tone }),\n          variant === 'count' && 'animate-scale-in',\n        )\n      \"\n    >\n      <!-- Hidden from assistive tech because the label below carries the real\n           figure; left visible the pair would read as \"99+ 132 unread\". -->\n      <span v-if=\"variant === 'count'\" aria-hidden=\"true\">{{ printed }}</span>\n      <span v-else-if=\"glyph\" :class=\"glyph\" />\n\n      <span :id=\"labelId\" class=\"sr-only\">{{ name }}</span>\n    </span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;AAwBA,IAAa,oBAAoB,IAI/B,yFACA;CACE,UAAU;EACR,SAAS;GAGP,KAAK;GAIL,OAAO;EACT;EACA,WAAW;GACT,aAAa;GACb,YAAY;GACZ,gBAAgB;GAChB,eAAe;EACjB;EAKA,SAAS;GACP,YAAY;GACZ,MAAM;GACN,QAAQ;GACR,SAAS;EACX;CACF;CACA,iBAAiB;EAAE,SAAS;EAAO,WAAW;EAAa,SAAS;CAAa;AACnF,CACF;;;;;;;;;AAUA,IAAa,wBAAwB,IAAI,IAAI;CAC3C,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,SAAS;EACT,MAAM;EACN,aAAa;EACb,QAAQ;CACV,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;;AAGD,IAAM,eAAe;CACnB,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;AACR;;;;;;;AAQA,IAAa,mBAAoC;CAC/C,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;CACN,QAAQ,EAAE,YAAY,GAAG,OAAO,KAAK,EAAE;CACvC,WAAW;AACb;;;;;;;;;AAUA,IAAM,gBAAgB;CACpB,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;AACR;;;;;;;;;;;;;;;;;;;;EA8CA,MAAM,QAAQ;EA2Cd,MAAM,OAAO,UAAU,aAAa,wBAAwB,MAAM,MAAM;EAQxE,MAAM,EAAE,OAAO,SAAS,cAAc;EAItC,MAAM,UAAU,MAAM;;;;;;;EAQtB,MAAM,QAAQ,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,KAAK,CAAC,CAAC;EAEjE,MAAM,UAAU,eAAe,MAAM,YAAY,SAAS,MAAM,QAAQ,KAAK,MAAM,QAAQ;;EAG3F,MAAM,UAAU,eACd,MAAM,QAAQ,MAAM,MAAM,GAAG,OAAO,MAAM,GAAG,EAAE,KAAK,OAAO,MAAM,KAAK,CACxE;EAEA,MAAM,OAAO,eACL,MAAM,SAAS,MAAM,SAAS,aAAa,MAAM,UAAU,UACnE;EAEA,MAAM,QAAQ,eAAgB,MAAM,SAAS,cAAc,MAAM,UAAU,EAAG;;;;;;;EAQ9E,MAAM,OAAO,eAAe;GAC1B,MAAM,QAAQ,MAAM,OAAO,KAAK;GAChC,IAAI,OAAO,OAAO;GAClB,IAAI,MAAM,YAAY,SAAS,OAAO,KAAK,MAAM,MAAM,EAAE,OAAO,MAAM,MAAM,CAAC;GAK7E,OAAO,MAAM,SAAS,KAAK,MAAM,MAAM,UAAU,KAAK,MAAM;EAC9D,CAAC;;GAIC,OAAA,UAAA,GAAA,mBA6BO,QA7BP,WAAc,MA6BP,IAAA,GA7BW,EAAG,OAAO,MAAA,EAAA,CAAE,CAAA,qCAAsC,MAAA,KAAA,CAAK,CAAC,KAAK,EAAA,CAAA,GAAA,CAG7E,WAA4B,KAAA,QAAA,WAAA,EAArB,SAAU,MAAA,OAAA,EAAO,CAAA,GAQhB,QAAA,SADR,UAAA,GAAA,mBAkBO,QAAA;IAhBJ,KAAK,QAAA;IACL,kBAAgB,QAAA;IAChB,OAAK,eAAW,MAAA,EAAA,CAAE,CAAY,MAAA,iBAAA,CAAiB,CAAA;KAAA,SAAG,QAAA;KAAO,WAAE,QAAA;KAAS,SAAE,QAAA;IAAO,CAAA,GAAe,MAAA,qBAAA,CAAqB,CAAA,EAAA,MAAG,KAAA,MAAI,CAAA,GAAe,QAAA,YAAO,WAAA,kBAAA,CAAA;GAUnI,GAAA,CAAA,QAAA,YAAO,WAAnB,UAAA,GAAA,mBAAwE,QAAxE,YAAwE,gBAAjB,QAAA,KAAO,GAAA,CAAA,KAC7C,MAAA,SAAjB,UAAA,GAAA,mBAAyC,QAAA;;IAAhB,OAAK,eAAE,MAAA,KAAK;GAErC,GAAA,MAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,mBAAqD,QAAA;IAA9C,IAAI,MAAA,OAAA;IAAS,OAAM;GAAa,GAAA,gBAAA,KAAA,KAAI,GAAA,GAAA,UAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,EAAA"}

package/dist/packages/primitives/inline-error/src/InlineError.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InlineError.js","names":[],"sources":["../../../../../packages/primitives/inline-error/src/InlineError.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TriangleAlert } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\n/**\n * InlineError — the one error contract for a field or a section, instead of\n * a paragraph here and a badge there. `role=\"alert\"` on the root means a\n * screen reader announces it the instant it enters the DOM, which is also\n * why a host must mount it with `v-if` rather than hide it with `v-show`:\n * CSS visibility leaves the node in the DOM, so a message change under\n * `v-show` may not re-announce.\n *\n * Persists until the host resolves the cause it names — there is no\n * auto-dismiss timer and no built-in close button. A transient notice that\n * hides itself belongs to a toast, not here.\n */\ndefineProps<{\n  /** The error text. A default-slot child overrides this when both are given. */\n  message?: string;\n}>();\n</script>\n\n<template>\n  <div\n    role=\"alert\"\n    :class=\"\n      cn(\n        'flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive-text',\n        'animate-fade-rise',\n      )\n    \"\n  >\n    <TriangleAlert class=\"mt-0.5 h-4 w-4 shrink-0\" aria-hidden=\"true\" />\n    <div class=\"min-w-0 flex-1\">\n      <slot>{{ message }}</slot>\n    </div>\n    <div v-if=\"$slots.action\" class=\"shrink-0\"><slot name=\"action\" /></div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/inline-error/src/InlineError.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InlineError.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/primitives/inline-error/src/InlineError.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TriangleAlert } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\n/**\n * InlineError — the one error contract for a field or a section, instead of\n * a paragraph here and a badge there. `role=\"alert\"` on the root means a\n * screen reader announces it the instant it enters the DOM, which is also\n * why a host must mount it with `v-if` rather than hide it with `v-show`:\n * CSS visibility leaves the node in the DOM, so a message change under\n * `v-show` may not re-announce.\n *\n * Persists until the host resolves the cause it names — there is no\n * auto-dismiss timer and no built-in close button. A transient notice that\n * hides itself belongs to a toast, not here.\n */\ndefineProps<{\n  /** The error text. A default-slot child overrides this when both are given. */\n  message?: string;\n}>();\n</script>\n\n<template>\n  <div\n    role=\"alert\"\n    :class=\"\n      cn(\n        'flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive-text',\n        'animate-fade-rise',\n      )\n    \"\n  >\n    <TriangleAlert class=\"mt-0.5 h-4 w-4 shrink-0\" aria-hidden=\"true\" />\n    <div class=\"min-w-0 flex-1\">\n      <slot>{{ message }}</slot>\n    </div>\n    <div v-if=\"$slots.action\" class=\"shrink-0\"><slot name=\"action\" /></div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;GAuBE,OAAA,UAAA,GAAA,mBAcM,OAAA;IAbJ,MAAK;IACJ,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,4HAAA,mBAAA,CAAA;;IAOjB,YAAoE,MAAA,aAAA,GAAA;KAArD,OAAM;KAA0B,eAAY;;IAC3D,mBAEM,OAFN,YAEM,CADJ,WAA0B,KAAA,QAAA,WAAA,CAAA,SAAA,CAAjB,gBAAA,gBAAA,QAAA,OAAO,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;IAEPA,KAAAA,OAAO,UAAlB,UAAA,GAAA,mBAAuE,OAAvE,YAAuE,CAA5B,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/packages/primitives/kbd/src/Kbd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Kbd.js","names":[],"sources":["../../../../../packages/primitives/kbd/src/Kbd.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Kbd — one key cap. A combination is several of these side by side, joined\n * by a visible separator the host renders (`+` or `-`), with the whole run\n * given an accessible name on its wrapper; Kbd deliberately does not parse\n * shortcut strings, because the line between \"display\" and \"shortcut\n * manager\" is exactly where this primitive should stop.\n */\nexport type KbdSize = \"sm\" | \"md\";\n\nexport const kbdVariants = cva(\n  [\n    \"inline-flex select-none items-center justify-center rounded-sm\",\n    // The cap: a subtle well, a hairline, and a bottom-weighted edge so it\n    // reads as something you could press. Tokens only — high-contrast and\n    // dark both come from the same pair every surface uses.\n    \"border border-border border-b-border-strong bg-subtle text-foreground shadow-sm\",\n    \"font-mono tabular whitespace-nowrap\",\n  ],\n  {\n    variants: {\n      size: {\n        // Display-only, so target-size rules do not bind — the floors exist\n        // because inline caps sit inside sentences, and one that shifts the\n        // baseline or reads as a speck is worse than a generous box.\n        sm: \"min-h-6 min-w-6 px-1.5 text-xs\",\n        md: \"min-h-7 min-w-7 px-2 text-small\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** `sm` sits inside prose and table cells; `md` for settings pages. */\n    size?: KbdSize;\n  }>(),\n  { size: \"md\" },\n);\n</script>\n\n<template>\n  <kbd :class=\"cn(kbdVariants({ size }))\">\n    <!-- @slot The key's face — a letter, a glyph like ⌘, an arrow character. -->\n    <slot />\n  </kbd>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/kbd/src/Kbd.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Kbd.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/kbd/src/Kbd.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Kbd — one key cap. A combination is several of these side by side, joined\n * by a visible separator the host renders (`+` or `-`), with the whole run\n * given an accessible name on its wrapper; Kbd deliberately does not parse\n * shortcut strings, because the line between \"display\" and \"shortcut\n * manager\" is exactly where this primitive should stop.\n */\nexport type KbdSize = \"sm\" | \"md\";\n\nexport const kbdVariants = cva(\n  [\n    \"inline-flex select-none items-center justify-center rounded-sm\",\n    // The cap: a subtle well, a hairline, and a bottom-weighted edge so it\n    // reads as something you could press. Tokens only — high-contrast and\n    // dark both come from the same pair every surface uses.\n    \"border border-border border-b-border-strong bg-subtle text-foreground shadow-sm\",\n    \"font-mono tabular whitespace-nowrap\",\n  ],\n  {\n    variants: {\n      size: {\n        // Display-only, so target-size rules do not bind — the floors exist\n        // because inline caps sit inside sentences, and one that shifts the\n        // baseline or reads as a speck is worse than a generous box.\n        sm: \"min-h-6 min-w-6 px-1.5 text-xs\",\n        md: \"min-h-7 min-w-7 px-2 text-small\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** `sm` sits inside prose and table cells; `md` for settings pages. */\n    size?: KbdSize;\n  }>(),\n  { size: \"md\" },\n);\n</script>\n\n<template>\n  <kbd :class=\"cn(kbdVariants({ size }))\">\n    <!-- @slot The key's face — a letter, a glyph like ⌘, an arrow character. -->\n    <slot />\n  </kbd>\n</template>\n"],"mappings":";;;;;AAYA,IAAa,cAAc,IACzB;CACE;CAIA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EAIJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;GAgBE,OAAA,UAAA,GAAA,mBAGM,OAAA,EAHA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,WAAA,CAAW,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,CAAA,CAAA,EAAA,GAAA,CAEhC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/packages/primitives/link/src/Link.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Link.js","names":[],"sources":["../../../../../packages/primitives/link/src/Link.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** The visual emphasis assigned to a link. */\nexport type LinkVariant = \"default\" | \"muted\" | \"accent\" | \"subtle\";\n\nexport const linkVariants = cva(\n  \"inline-flex items-center gap-1 transition-colors duration-fast ease-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n  {\n    variants: {\n      variant: {\n        default: \"text-primary-text underline underline-offset-4 hover:text-primary-text/80\",\n        // Underlined like its siblings. WCAG 1.4.1 asks for a non-colour\n        // carrier and the underline is the one links have; `muted` used to be\n        // the variant that dropped it while keeping a hover colour change,\n        // which identified the link by hue alone.\n        muted: \"text-muted-foreground underline underline-offset-4 hover:text-foreground\",\n        accent: \"text-accent-text underline underline-offset-4 hover:text-accent-text/80\",\n        subtle:\n          \"text-foreground/80 hover:text-foreground underline underline-offset-4 decoration-border hover:decoration-foreground/50\",\n      } satisfies Record<LinkVariant, string>,\n      underline: {\n        true: \"\",\n        false: \"no-underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      underline: true,\n    },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Controls the link's visual emphasis. */\n    variant?: LinkVariant;\n    /** Draws an underline beneath the link label. */\n    underline?: boolean;\n    /** The destination the link navigates to. */\n    href: string;\n    /** Opens the destination in a new tab and marks it as an external link. */\n    external?: boolean;\n    /** Replaces the anchor with an unavailable, non-interactive span. */\n    disabled?: boolean;\n  }>(),\n  {\n    variant: \"default\",\n    underline: true,\n    external: false,\n    disabled: false,\n  },\n);\n</script>\n\n<template>\n  <span\n    v-if=\"disabled\"\n    :class=\"\n      cn(\n        linkVariants({ variant, underline }),\n        // Drained, not dimmed — the same rule Button and Chip follow. The dim\n        // faded whatever hue the variant wore, taking the label's contrast\n        // down with it; a link has no fill to drain, so it takes the neutral\n        // well the transparent controls take, and `aria-disabled` carries the\n        // state rather than colour alone.\n        'cursor-default bg-muted text-muted-foreground pointer-events-none',\n        $attrs.class,\n      )\n    \"\n    aria-disabled=\"true\"\n  >\n    <slot />\n  </span>\n  <a\n    v-else\n    :href=\"href\"\n    :class=\"cn(linkVariants({ variant, underline }), $attrs.class)\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noopener noreferrer' : undefined\"\n  >\n    <slot />\n    <svg\n      v-if=\"external\"\n      class=\"h-3.5 w-3.5 shrink-0\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path d=\"M7 17 17 7\" />\n      <path d=\"M7 7h10v10\" />\n    </svg>\n  </a>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/link/src/Link.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Link.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../../packages/primitives/link/src/Link.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** The visual emphasis assigned to a link. */\nexport type LinkVariant = \"default\" | \"muted\" | \"accent\" | \"subtle\";\n\nexport const linkVariants = cva(\n  \"inline-flex items-center gap-1 transition-colors duration-fast ease-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n  {\n    variants: {\n      variant: {\n        default: \"text-primary-text underline underline-offset-4 hover:text-primary-text/80\",\n        // Underlined like its siblings. WCAG 1.4.1 asks for a non-colour\n        // carrier and the underline is the one links have; `muted` used to be\n        // the variant that dropped it while keeping a hover colour change,\n        // which identified the link by hue alone.\n        muted: \"text-muted-foreground underline underline-offset-4 hover:text-foreground\",\n        accent: \"text-accent-text underline underline-offset-4 hover:text-accent-text/80\",\n        subtle:\n          \"text-foreground/80 hover:text-foreground underline underline-offset-4 decoration-border hover:decoration-foreground/50\",\n      } satisfies Record<LinkVariant, string>,\n      underline: {\n        true: \"\",\n        false: \"no-underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      underline: true,\n    },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Controls the link's visual emphasis. */\n    variant?: LinkVariant;\n    /** Draws an underline beneath the link label. */\n    underline?: boolean;\n    /** The destination the link navigates to. */\n    href: string;\n    /** Opens the destination in a new tab and marks it as an external link. */\n    external?: boolean;\n    /** Replaces the anchor with an unavailable, non-interactive span. */\n    disabled?: boolean;\n  }>(),\n  {\n    variant: \"default\",\n    underline: true,\n    external: false,\n    disabled: false,\n  },\n);\n</script>\n\n<template>\n  <span\n    v-if=\"disabled\"\n    :class=\"\n      cn(\n        linkVariants({ variant, underline }),\n        // Drained, not dimmed — the same rule Button and Chip follow. The dim\n        // faded whatever hue the variant wore, taking the label's contrast\n        // down with it; a link has no fill to drain, so it takes the neutral\n        // well the transparent controls take, and `aria-disabled` carries the\n        // state rather than colour alone.\n        'cursor-default bg-muted text-muted-foreground pointer-events-none',\n        $attrs.class,\n      )\n    \"\n    aria-disabled=\"true\"\n  >\n    <slot />\n  </span>\n  <a\n    v-else\n    :href=\"href\"\n    :class=\"cn(linkVariants({ variant, underline }), $attrs.class)\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noopener noreferrer' : undefined\"\n  >\n    <slot />\n    <svg\n      v-if=\"external\"\n      class=\"h-3.5 w-3.5 shrink-0\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path d=\"M7 17 17 7\" />\n      <path d=\"M7 7h10v10\" />\n    </svg>\n  </a>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAa,eAAe,IAC1B,uLACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GAKT,OAAO;GACP,QAAQ;GACR,QACE;EACJ;EACA,WAAW;GACT,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,WAAW;CACb;AACF,CACF;;;;;;;;;;;;;;;;;;;;;GA8BU,OAAA,QAAA,YADR,UAAA,GAAA,mBAiBO,QAAA;;IAfJ,OAAK,eAAS,MAAA,EAAA,CAAE,CAAU,MAAA,YAAA,CAAY,CAAA;KAAA,SAAG,QAAA;KAAO,WAAE,QAAA;IAAS,CAAA,GAAA,qEAA6bA,KAAAA,OAAO,KAAA,CAAA;IAYhgB,iBAAc;GAEd,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,MAEV,UAAA,GAAA,mBAyBI,KAAA;;IAvBD,MAAM,QAAA;IACN,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,YAAA,CAAY,CAAA;KAAA,SAAG,QAAA;KAAO,WAAE,QAAA;IAAS,CAAA,GAAKA,KAAAA,OAAO,KAAK,CAAA;IAC5D,QAAQ,QAAA,WAAQ,WAAc,KAAA;IAC9B,KAAK,QAAA,WAAQ,wBAA2B,KAAA;GAEzC,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,GAEA,QAAA,YADR,UAAA,GAAA,mBAgBM,OAhBN,YAgBM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAFJ,mBAAuB,QAAA,EAAjB,GAAE,aAAY,GAAA,MAAA,EAAA,GACpB,mBAAuB,QAAA,EAAjB,GAAE,aAAY,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/packages/primitives/list/src/List.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.js","names":[],"sources":["../../../../../packages/primitives/list/src/List.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * List — a generic composition of rows: leading content, a title and\n * description, trailing metadata or actions. It is the *presentational*\n * vocabulary for row-shaped content, not a navigation primitive — SidebarNav\n * owns wayfinding, Menu owns commands, Table owns columns. This owns \"a\n * titled thing per line\" wherever that appears: settings groups, pickers,\n * summaries under a page's chrome.\n */\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Names the list for assistive technology when surrounding prose does not already say it. */\n    label?: string;\n    /** Hairline dividers between rows. Off for card-stacked lists. */\n    divided?: boolean;\n  }>(),\n  { divided: true },\n);\nvoid cn;\n</script>\n\n<template>\n  <ul :aria-label=\"label\" :class=\"cn('m-0 list-none p-0', divided && 'divide-y divide-border')\">\n    <!-- @slot The rows: one `ListItem` per line. -->\n    <slot />\n  </ul>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/list/src/List.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/list/src/List.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * List — a generic composition of rows: leading content, a title and\n * description, trailing metadata or actions. It is the *presentational*\n * vocabulary for row-shaped content, not a navigation primitive — SidebarNav\n * owns wayfinding, Menu owns commands, Table owns columns. This owns \"a\n * titled thing per line\" wherever that appears: settings groups, pickers,\n * summaries under a page's chrome.\n */\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Names the list for assistive technology when surrounding prose does not already say it. */\n    label?: string;\n    /** Hairline dividers between rows. Off for card-stacked lists. */\n    divided?: boolean;\n  }>(),\n  { divided: true },\n);\nvoid cn;\n</script>\n\n<template>\n  <ul :aria-label=\"label\" :class=\"cn('m-0 list-none p-0', divided && 'divide-y divide-border')\">\n    <!-- @slot The rows: one `ListItem` per line. -->\n    <slot />\n  </ul>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;GAwBE,OAAA,UAAA,GAAA,mBAGK,MAAA;IAHA,cAAY,QAAA;IAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,qBAAsB,QAAA,WAAO,wBAAA,CAAA;GAE7D,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/packages/primitives/list/src/ListItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.js","names":[],"sources":["../../../../../packages/primitives/list/src/ListItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Interactive comes in exactly two shapes, the same honesty Card documents:\n * `href` makes the whole row one real anchor (nothing interactive inside),\n * `interactive` paints hover/press while the host owns role/handler. Plain\n * rows are just rows.\n */\nexport type ListItemShape = \"static\" | \"link\" | \"interactive\";\n\nexport const listItemVariants = cva(\n  \"flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left transition-colors duration-fast ease-out\",\n  {\n    variants: {\n      shape: {\n        static: \"\",\n        // The shared clickable-row language: lift by fill, never by shadow.\n        link: \"cursor-pointer outline-none hover:bg-subtle/60 focus-visible:bg-subtle/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out)] active:scale-[0.995]\",\n        interactive:\n          \"cursor-pointer hover:bg-subtle/60 focus-visible:bg-subtle/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo active:bg-subtle\",\n      },\n      dense: { true: \"px-2 py-1.5\", false: \"\" },\n    },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Check } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The row's heading; omit when the default slot carries custom composition. */\n    title?: string;\n    /** Supporting line beneath the title. */\n    description?: string;\n    /** Trailing metadata — a count, a timestamp. Reads in tabular digits. */\n    meta?: string;\n    /** Makes the whole row one link. Nothing interactive may sit inside. */\n    href?: string;\n    /**\n     * Hover/press language for a clickable row whose behaviour belongs to\n     * the host; attach the handler yourself.\n     */\n    interactive?: boolean;\n    /** Marks this row as the current choice among its peers (`aria-current`). */\n    selected?: boolean;\n    /** Unavailable rather than hidden: drained, inert, still announced. */\n    disabled?: boolean;\n    /** Tighter rhythm inside dense chrome. */\n    dense?: boolean;\n  }>(),\n  {\n    interactive: false,\n    selected: false,\n    disabled: false,\n    dense: false,\n  },\n);\n\ndefineEmits<{ activate: [] }>();\n\n// One of three shapes decides the element; a disabled row is an inert button\n// rather than a missing one, so it stays announced.\nconst shape = computed<\"link\" | \"interactive\" | \"static\">(() =>\n  props.href ? \"link\" : props.interactive ? \"interactive\" : \"static\",\n);\n</script>\n\n<template>\n  <li>\n    <component\n      :is=\"href ? 'a' : interactive ? 'button' : 'div'\"\n      :href=\"disabled ? undefined : href\"\n      :type=\"interactive && !href ? 'button' : undefined\"\n      :disabled=\"interactive && !href ? disabled : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :aria-current=\"selected || undefined\"\n      :class=\"\n        cn(\n          listItemVariants({ shape, dense }),\n          selected && !disabled && 'bg-primary-muted/40 aria-current:bg-primary-muted/40',\n          disabled && 'cursor-not-allowed bg-transparent',\n        )\n      \"\n      @click=\"interactive && !disabled && $emit('activate')\"\n    >\n      <!-- @slot Before the title: an icon, an Avatar. -->\n      <slot name=\"leading\" />\n\n      <span class=\"min-w-0 flex-1\">\n        <span v-if=\"title\" class=\"block truncate text-sm font-medium\">{{ title }}</span>\n        <span v-if=\"description\" class=\"mt-0.5 block text-small text-muted-foreground\">{{\n          description\n        }}</span>\n        <!-- @slot Custom body; replaces title/description entirely. -->\n        <slot />\n      </span>\n\n      <!-- Selection is stated twice: aria-current for technology, a glyph\n           for eyes — colour alone is not a state. -->\n      <Check v-if=\"selected\" class=\"h-4 w-4 shrink-0 text-primary-text\" aria-hidden=\"true\" />\n\n      <!-- @slot After everything: actions, a Badge, a RowActions cluster. -->\n      <slot name=\"trailing\">\n        <span v-if=\"meta\" class=\"shrink-0 text-small tabular text-muted-foreground\">{{\n          meta\n        }}</span>\n      </slot>\n    </component>\n  </li>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/list/src/ListItem.vue_vue_type_script_setup_true_lang.js

@@ -1,101 +0,0 @@
-import { cn } from "../../../core/src/cn.js";
-import "../../../core/src/index.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
-import { Check } from "@lucide/vue";
-import { cva } from "class-variance-authority";
-//#region packages/primitives/list/src/ListItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "min-w-0 flex-1" };
-var _hoisted_2 = {
-	key: 0,
-	class: "block truncate text-sm font-medium"
-};
-var _hoisted_3 = {
-	key: 1,
-	class: "mt-0.5 block text-small text-muted-foreground"
-};
-var _hoisted_4 = {
-	key: 0,
-	class: "shrink-0 text-small tabular text-muted-foreground"
-};
-var listItemVariants = cva("flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left transition-colors duration-fast ease-out", { variants: {
-	shape: {
-		static: "",
-		link: "cursor-pointer outline-none hover:bg-subtle/60 focus-visible:bg-subtle/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out)] active:scale-[0.995]",
-		interactive: "cursor-pointer hover:bg-subtle/60 focus-visible:bg-subtle/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo active:bg-subtle"
-	},
-	dense: {
-		true: "px-2 py-1.5",
-		false: ""
-	}
-} });
-var ListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "ListItem",
-	props: {
-		title: {},
-		description: {},
-		meta: {},
-		href: {},
-		interactive: {
-			type: Boolean,
-			default: false
-		},
-		selected: {
-			type: Boolean,
-			default: false
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		dense: {
-			type: Boolean,
-			default: false
-		}
-	},
-	emits: ["activate"],
-	setup(__props) {
-		const props = __props;
-		const shape = computed(() => props.href ? "link" : props.interactive ? "interactive" : "static");
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("li", null, [(openBlock(), createBlock(resolveDynamicComponent(__props.href ? "a" : __props.interactive ? "button" : "div"), {
-				href: __props.disabled ? void 0 : __props.href,
-				type: __props.interactive && !__props.href ? "button" : void 0,
-				disabled: __props.interactive && !__props.href ? __props.disabled : void 0,
-				"aria-disabled": __props.disabled || void 0,
-				"aria-current": __props.selected || void 0,
-				class: normalizeClass(unref(cn)(unref(listItemVariants)({
-					shape: shape.value,
-					dense: __props.dense
-				}), __props.selected && !__props.disabled && "bg-primary-muted/40 aria-current:bg-primary-muted/40", __props.disabled && "cursor-not-allowed bg-transparent")),
-				onClick: _cache[0] || (_cache[0] = ($event) => __props.interactive && !__props.disabled && _ctx.$emit("activate"))
-			}, {
-				default: withCtx(() => [
-					renderSlot(_ctx.$slots, "leading"),
-					createElementVNode("span", _hoisted_1, [
-						__props.title ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
-						__props.description ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
-						renderSlot(_ctx.$slots, "default")
-					]),
-					__props.selected ? (openBlock(), createBlock(unref(Check), {
-						key: 0,
-						class: "h-4 w-4 shrink-0 text-primary-text",
-						"aria-hidden": "true"
-					})) : createCommentVNode("", true),
-					renderSlot(_ctx.$slots, "trailing", {}, () => [__props.meta ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.meta), 1)) : createCommentVNode("", true)])
-				]),
-				_: 3
-			}, 8, [
-				"href",
-				"type",
-				"disabled",
-				"aria-disabled",
-				"aria-current",
-				"class"
-			]))]);
-		};
-	}
-});
-//#endregion
-export { ListItem_vue_vue_type_script_setup_true_lang_default as default, listItemVariants };
-
-//# sourceMappingURL=ListItem.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/list/src/ListItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/list/src/ListItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Interactive comes in exactly two shapes, the same honesty Card documents:\n * `href` makes the whole row one real anchor (nothing interactive inside),\n * `interactive` paints hover/press while the host owns role/handler. Plain\n * rows are just rows.\n */\nexport type ListItemShape = \"static\" | \"link\" | \"interactive\";\n\nexport const listItemVariants = cva(\n  \"flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left transition-colors duration-fast ease-out\",\n  {\n    variants: {\n      shape: {\n        static: \"\",\n        // The shared clickable-row language: lift by fill, never by shadow.\n        link: \"cursor-pointer outline-none hover:bg-subtle/60 focus-visible:bg-subtle/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out)] active:scale-[0.995]\",\n        interactive:\n          \"cursor-pointer hover:bg-subtle/60 focus-visible:bg-subtle/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo active:bg-subtle\",\n      },\n      dense: { true: \"px-2 py-1.5\", false: \"\" },\n    },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Check } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The row's heading; omit when the default slot carries custom composition. */\n    title?: string;\n    /** Supporting line beneath the title. */\n    description?: string;\n    /** Trailing metadata — a count, a timestamp. Reads in tabular digits. */\n    meta?: string;\n    /** Makes the whole row one link. Nothing interactive may sit inside. */\n    href?: string;\n    /**\n     * Hover/press language for a clickable row whose behaviour belongs to\n     * the host; attach the handler yourself.\n     */\n    interactive?: boolean;\n    /** Marks this row as the current choice among its peers (`aria-current`). */\n    selected?: boolean;\n    /** Unavailable rather than hidden: drained, inert, still announced. */\n    disabled?: boolean;\n    /** Tighter rhythm inside dense chrome. */\n    dense?: boolean;\n  }>(),\n  {\n    interactive: false,\n    selected: false,\n    disabled: false,\n    dense: false,\n  },\n);\n\ndefineEmits<{ activate: [] }>();\n\n// One of three shapes decides the element; a disabled row is an inert button\n// rather than a missing one, so it stays announced.\nconst shape = computed<\"link\" | \"interactive\" | \"static\">(() =>\n  props.href ? \"link\" : props.interactive ? \"interactive\" : \"static\",\n);\n</script>\n\n<template>\n  <li>\n    <component\n      :is=\"href ? 'a' : interactive ? 'button' : 'div'\"\n      :href=\"disabled ? undefined : href\"\n      :type=\"interactive && !href ? 'button' : undefined\"\n      :disabled=\"interactive && !href ? disabled : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :aria-current=\"selected || undefined\"\n      :class=\"\n        cn(\n          listItemVariants({ shape, dense }),\n          selected && !disabled && 'bg-primary-muted/40 aria-current:bg-primary-muted/40',\n          disabled && 'cursor-not-allowed bg-transparent',\n        )\n      \"\n      @click=\"interactive && !disabled && $emit('activate')\"\n    >\n      <!-- @slot Before the title: an icon, an Avatar. -->\n      <slot name=\"leading\" />\n\n      <span class=\"min-w-0 flex-1\">\n        <span v-if=\"title\" class=\"block truncate text-sm font-medium\">{{ title }}</span>\n        <span v-if=\"description\" class=\"mt-0.5 block text-small text-muted-foreground\">{{\n          description\n        }}</span>\n        <!-- @slot Custom body; replaces title/description entirely. -->\n        <slot />\n      </span>\n\n      <!-- Selection is stated twice: aria-current for technology, a glyph\n           for eyes — colour alone is not a state. -->\n      <Check v-if=\"selected\" class=\"h-4 w-4 shrink-0 text-primary-text\" aria-hidden=\"true\" />\n\n      <!-- @slot After everything: actions, a Badge, a RowActions cluster. -->\n      <slot name=\"trailing\">\n        <span v-if=\"meta\" class=\"shrink-0 text-small tabular text-muted-foreground\">{{\n          meta\n        }}</span>\n      </slot>\n    </component>\n  </li>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAWA,IAAa,mBAAmB,IAC9B,4GACA,EACE,UAAU;CACR,OAAO;EACL,QAAQ;EAER,MAAM;EACN,aACE;CACJ;CACA,OAAO;EAAE,MAAM;EAAe,OAAO;CAAG;AAC1C,EACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAkCd,MAAM,QAAQ,eACZ,MAAM,OAAO,SAAS,MAAM,cAAc,gBAAgB,QAC5D;;GAIE,OAAA,UAAA,GAAA,mBAwCK,MAAA,MAAA,EAvCH,UAAA,GAAA,YAsCY,wBArCL,QAAA,OAAI,MAAS,QAAA,cAAW,WAAA,KAAA,GAAA;IAC5B,MAAM,QAAA,WAAW,KAAA,IAAY,QAAA;IAC7B,MAAM,QAAA,eAAW,CAAK,QAAA,OAAI,WAAc,KAAA;IACxC,UAAU,QAAA,eAAW,CAAK,QAAA,OAAO,QAAA,WAAW,KAAA;IAC5C,iBAAe,QAAA,YAAY,KAAA;IAC3B,gBAAc,QAAA,YAAY,KAAA;IAC1B,OAAK,eAAW,MAAA,EAAA,CAAE,CAAY,MAAA,gBAAA,CAAgB,CAAA;KAAA,OAAG,MAAA;KAAK,OAAE,QAAA;IAAK,CAAA,GAAe,QAAA,YAAQ,CAAK,QAAA,YAAQ,wDAAsE,QAAA,YAAQ,mCAAA,CAAA;IAO/K,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,eAAW,CAAK,QAAA,YAAYA,KAAAA,MAAK,UAAA;;IAGzC,SAAA,cAAuB;KAAvB,WAAuB,KAAA,QAAA,SAAA;KAEvB,mBAOO,QAPP,YAOO;MANO,QAAA,SAAZ,UAAA,GAAA,mBAAgF,QAAhF,YAAgF,gBAAf,QAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;MAC1D,QAAA,eAAZ,UAAA,GAAA,mBAES,QAFT,YAES,gBADP,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;MAGb,WAAQ,KAAA,QAAA,SAAA;;KAKG,QAAA,YAAb,UAAA,GAAA,YAAuF,MAAA,KAAA,GAAA;;MAAhE,OAAM;MAAqC,eAAY;;KAG9E,WAIO,KAAA,QAAA,YAAA,CAAA,SAAA,CAHO,QAAA,QAAZ,UAAA,GAAA,mBAES,QAFT,YAES,gBADP,QAAA,IAAI,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/packages/primitives/menubar/src/Menubar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menubar.js","names":[],"sources":["../../../../../packages/primitives/menubar/src/Menubar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Menubar — the classic desktop-app menu strip (File · View · Help …).\n *\n * Data-driven: pass a `menus` array; the component owns open/close, hover-to-switch,\n * keyboard nav and click-outside. Selecting an item emits `select` with its `command`\n * id — the host maps that id to an action (keeps the primitive free of app logic).\n *\n * A11y: WAI-ARIA menubar semantics over real DOM focus, not aria-activedescendant.\n * Opening a menu moves focus onto its first enabled row and the arrows walk it from\n * there, so \"the highlighted row\" and \"the focused row\" are the same thing by\n * construction and a screen reader announces each walked row natively — no\n * bookkeeping that could drift out of sync with what is actually announced.\n */\nexport interface MenubarItem {\n  /** Visible label. */\n  label: string;\n  /** Command id emitted on select. Omit for a non-actionable row. */\n  command?: string;\n  /** Right-aligned accelerator hint, e.g. \"Ctrl+S\". */\n  shortcut?: string;\n  /** Render a divider instead of an item (label ignored). */\n  separator?: boolean;\n  disabled?: boolean;\n}\n\nexport interface MenubarMenu {\n  id: string;\n  label: string;\n  items: MenubarItem[];\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, nextTick } from \"vue\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n  /** The top-level menus; their reading order follows `dir`. */\n  menus: MenubarMenu[];\n  /**\n   * Reading direction. Right-to-left mirrors the strip's arrow keys —\n   * ArrowRight travels toward the visual left — which a hand-rolled\n   * handler must do itself, unlike its Reka siblings.\n   */\n  dir?: \"ltr\" | \"rtl\";\n}>();\nconst emit = defineEmits<{ select: [command: string] }>();\n\n// Horizontal arrows are visual, not logical: in right-to-left, ArrowRight\n// moves toward the previous menu.\nconst horizontal = computed(() => (props.dir === \"rtl\" ? -1 : 1) as 1 | -1);\n\nconst openId = ref<string | null>(null);\nconst activeIndex = ref(-1); // the focused row within the open menu\n// String refs would do here only outside a v-for; inside one Vue collects them\n// into arrays. Function refs keyed BY MENU ID instead: during a menu switch the\n// incoming panel can mount before the outgoing one unmounts, so a single\n// latest-wins slot would let the outgoing null clobber the just-bound element.\nconst panelEls = new Map<string, HTMLElement>();\nconst triggerEls = new Map<string, HTMLButtonElement>();\n\nfunction bindPanel(id: string, el: unknown): void {\n  if (el instanceof HTMLElement) panelEls.set(id, el);\n  else panelEls.delete(id);\n}\n\nfunction bindTrigger(id: string, el: unknown): void {\n  if (el instanceof HTMLButtonElement) triggerEls.set(id, el);\n  else triggerEls.delete(id);\n}\n\nfunction boundPanel(): HTMLElement | null {\n  return openId.value ? (panelEls.get(openId.value) ?? null) : null;\n}\n\nconst openMenu = (menu: MenubarMenu | undefined) => menu?.items ?? [];\nconst firstEnabled = (items: MenubarItem[], from = 0, dir = 1): number => {\n  for (let i = from; i >= 0 && i < items.length; i += dir) {\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n};\n\n/** One arrow-step away from `from`, wrapping through every slot exactly once. */\nfunction neighborEnabled(items: MenubarItem[], from: number, dir: 1 | -1): number {\n  const n = items.length;\n  for (let step = 1; step <= n; step++) {\n    const i = (((from + dir * step) % n) + n) % n;\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n}\n\n/** Rows render only for non-separator items, so an item index maps to its button's ordinal among the rendered ones. */\nfunction rowOrdinal(items: MenubarItem[], index: number): number {\n  let ordinal = -1;\n  for (let k = 0; k <= index && k < items.length; k++) {\n    if (!items[k]?.separator) ordinal++;\n  }\n  return ordinal;\n}\n\nfunction rowButtons(): HTMLButtonElement[] {\n  const panel = boundPanel();\n  return panel\n    ? Array.from(panel.querySelectorAll<HTMLButtonElement>('button[role=\"menuitem\"]'))\n    : [];\n}\n\nfunction focusRow(items: MenubarItem[], index: number): void {\n  rowButtons()[rowOrdinal(items, index)]?.focus();\n}\n\nfunction goTo(items: MenubarItem[], index: number): void {\n  if (index < 0) return;\n  activeIndex.value = index;\n  focusRow(items, index);\n}\n\nasync function openAndFocusFirst(id: string, items: MenubarItem[]): Promise<void> {\n  await nextTick();\n  // A hover or another key can supersede this open within the same tick; only\n  // the menu that still owns `openId` may claim focus.\n  if (openId.value !== id) return;\n  goTo(items, firstEnabled(items));\n}\n\nasync function toggle(id: string): Promise<void> {\n  if (openId.value === id) {\n    close(true);\n    return;\n  }\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = id;\n  activeIndex.value = -1;\n  await openAndFocusFirst(id, menu.items);\n}\n\nasync function hover(id: string, via: \"pointer\" | \"trigger-focus\"): Promise<void> {\n  if (openId.value === null || openId.value === id) return;\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = id;\n  activeIndex.value = -1;\n  // Pointer switching takes focus into the new menu like a desktop menubar.\n  // A switch caused by tabbing between triggers must not yank focus out of\n  // the tab order mid-Tab, so it switches the panel and leaves focus alone.\n  if (via === \"pointer\") await openAndFocusFirst(id, menu.items);\n}\n\nfunction choose(item: MenubarItem): void {\n  if (item.separator || item.disabled) return;\n  close(true);\n  if (item.command) emit(\"select\", item.command);\n}\n\nfunction close(restoreFocus = false): void {\n  const id = openId.value;\n  openId.value = null;\n  activeIndex.value = -1;\n  // Escape and selection hand focus back to the owning trigger; Tab-out and\n  // outside clicks do not — focus has already gone where the user sent it.\n  if (restoreFocus && id) triggerEls.get(id)?.focus();\n}\n\nasync function moveMenu(dir: 1 | -1): Promise<void> {\n  const ids = props.menus.map((m) => m.id);\n  const cur = openId.value ? ids.indexOf(openId.value) : 0;\n  const id = ids[(cur + dir + ids.length) % ids.length];\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = menu.id;\n  activeIndex.value = -1;\n  await openAndFocusFirst(menu.id, menu.items);\n}\n\n/**\n * Pointer highlight of an enabled row moves focus with it — under the roving\n * model the highlighted row IS the focused row, and screen readers announce\n * focus changes, not CSS classes.\n */\nfunction pointAtRow(items: MenubarItem[], item: MenubarItem, index: number): void {\n  if (item.disabled || item.separator || activeIndex.value === index) return;\n  activeIndex.value = index;\n  focusRow(items, index);\n}\n\n/** Native focus landing on a row keeps `activeIndex` truthful about it. */\nfunction noteFocus(item: MenubarItem, index: number): void {\n  if (item.disabled || item.separator) return;\n  activeIndex.value = index;\n}\n\n/**\n * The APG's closed-state traversal: Left/Right across the strip land on the\n * neighbouring trigger without opening anything — opening is ArrowDown,\n * Enter or Space's job.\n */\nfunction moveTriggerFocus(from: string, dir: 1 | -1): void {\n  const ids = props.menus.map((m) => m.id);\n  const cur = ids.indexOf(from);\n  if (cur === -1) return;\n  triggerEls.get(ids[(cur + dir + ids.length) % ids.length] ?? \"\")?.focus();\n}\n\nasync function onTriggerKeydown(e: KeyboardEvent, menu: MenubarMenu): Promise<void> {\n  switch (e.key) {\n    case \"ArrowDown\":\n    case \"Enter\":\n    case \" \":\n      e.preventDefault(); // suppresses the button's own activation click\n      openId.value = menu.id;\n      activeIndex.value = -1;\n      await openAndFocusFirst(menu.id, menu.items);\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      if (openId.value) void moveMenu(horizontal.value);\n      else moveTriggerFocus(menu.id, horizontal.value);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      if (openId.value) void moveMenu(-horizontal.value as 1 | -1);\n      else moveTriggerFocus(menu.id, -horizontal.value as 1 | -1);\n      break;\n    case \"Escape\":\n      e.preventDefault();\n      close(true);\n      break;\n  }\n}\n\nfunction onMenuKeydown(e: KeyboardEvent, menu: MenubarMenu): void {\n  const items = menu.items;\n  switch (e.key) {\n    case \"ArrowDown\":\n      e.preventDefault();\n      goTo(items, neighborEnabled(items, activeIndex.value, 1));\n      break;\n    case \"ArrowUp\":\n      e.preventDefault();\n      goTo(items, neighborEnabled(items, activeIndex.value, -1));\n      break;\n    case \"Home\":\n      e.preventDefault();\n      goTo(items, firstEnabled(items, 0, 1));\n      break;\n    case \"End\":\n      e.preventDefault();\n      goTo(items, firstEnabled(items, items.length - 1, -1));\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      void moveMenu(horizontal.value);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      void moveMenu(-horizontal.value as 1 | -1);\n      break;\n    // Handled here rather than left to the button's native activation:\n    // preventDefault stops the browser's synthesized click, which would run\n    // choose() a second time alongside this delegated handler.\n    case \"Enter\":\n    case \" \": {\n      e.preventDefault();\n      const item = items[activeIndex.value];\n      if (item) choose(item);\n      break;\n    }\n    case \"Escape\":\n      e.preventDefault();\n      close(true);\n      break;\n  }\n}\n\nfunction onRootFocusout(e: FocusEvent): void {\n  if (!openId.value) return;\n  const root = e.currentTarget;\n  const next = e.relatedTarget;\n  // Tab out of the strip dismisses the menu and leaves focus where the browser\n  // put it. Moves that stay inside the menubar (opening handing focus to a\n  // row) keep it.\n  if (!(root instanceof Element) || !(next instanceof Node) || !root.contains(next)) close();\n}\n\n// A wrapper, not `close` itself: the listener's event argument would otherwise\n// arrive as `restoreFocus`, and an outside click would yank focus back to the\n// trigger instead of leaving it where the press landed.\nconst onWindowClick = (): void => close();\nonMounted(() => window.addEventListener(\"click\", onWindowClick));\nonBeforeUnmount(() => window.removeEventListener(\"click\", onWindowClick));\n</script>\n\n<template>\n  <!-- The attribute rides the strip itself, not just the prop: a host may\n       pass dir without setting document direction, and both the flex order\n       and the mirrored keys must agree with what is on screen. -->\n  <div\n    :dir=\"dir\"\n    role=\"menubar\"\n    class=\"flex items-center gap-0.5\"\n    style=\"-webkit-app-region: no-drag\"\n    @click.stop\n    @focusout=\"onRootFocusout\"\n  >\n    <div v-for=\"menu in menus\" :key=\"menu.id\" class=\"relative\">\n      <button\n        :id=\"`menubar-trigger-${menu.id}`\"\n        :ref=\"(el) => bindTrigger(menu.id, el)\"\n        type=\"button\"\n        role=\"menuitem\"\n        :aria-haspopup=\"'menu'\"\n        :aria-expanded=\"openId === menu.id\"\n        class=\"min-h-6 rounded-sm px-2 py-1 text-xs text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n        :class=\"openId === menu.id && 'bg-subtle text-foreground'\"\n        @click.stop=\"toggle(menu.id)\"\n        @mouseenter=\"hover(menu.id, 'pointer')\"\n        @focus=\"hover(menu.id, 'trigger-focus')\"\n        @keydown=\"onTriggerKeydown($event, menu)\"\n      >\n        {{ menu.label }}\n      </button>\n\n      <!-- Scoped presence, matching every sibling overlay: enter animates in,\n           leave answers with scale-out. The unconditional mount-only animation\n           this used to carry never plays on close at all. In jsdom, with no\n           stylesheet loaded, Vue computes zero animation duration and ends both\n           phases immediately, so tests see plain unmount. -->\n      <Transition enter-active-class=\"animate-scale-in\" leave-active-class=\"animate-scale-out\">\n        <div\n          v-if=\"openId === menu.id\"\n          :ref=\"(el) => bindPanel(menu.id, el)\"\n          role=\"menu\"\n          :aria-label=\"menu.label\"\n          tabindex=\"-1\"\n          class=\"absolute left-0 top-full z-overlay mt-1 min-w-[13rem] origin-top-left rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n          @click.stop\n          @keydown=\"onMenuKeydown($event, menu)\"\n        >\n          <template v-for=\"(item, i) in openMenu(menu)\" :key=\"i\">\n            <div v-if=\"item.separator\" role=\"separator\" class=\"my-1 h-px bg-border\" />\n            <!-- The row's colour, not its alpha, says it is unavailable. A menu\n                 row is nothing but its label, and `disabled:opacity-40` composited\n                 that label to 2.40:1 on the popover — a disabled row a reader\n                 cannot make out tells them nothing about what is unavailable,\n                 which is the only thing it is there to say. Muted instead: 5.76:1\n                 at rest, and a clear drop from the 15.46:1 an available row wears,\n                 so the state still reads at a glance. The shortcut beside it\n                 declares `text-muted-foreground` on its own element, so it lands\n                 on the same colour rather than inheriting this one.\n\n                 Rows sit at text-sm/py-1.5 like DropdownMenu's — one row grammar\n                 across menus; the compact trigger above stays desktop chrome.\n                 Every row carries tabindex -1: focus arrives programmatically,\n                 never by tabbing through the strip. -->\n            <button\n              v-else\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              :disabled=\"item.disabled\"\n              :data-highlighted=\"activeIndex === i || undefined\"\n              :style=\"{ animationDelay: listStaggerDelay(i) }\"\n              class=\"flex w-full items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-left text-sm text-foreground transition-colors duration-fast ease-out hover:bg-subtle disabled:pointer-events-none disabled:text-muted-foreground data-[highlighted]:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo animate-fade-rise\"\n              @click=\"choose(item)\"\n              @mouseenter=\"pointAtRow(openMenu(menu), item, i)\"\n              @focus=\"noteFocus(item, i)\"\n            >\n              <span>{{ item.label }}</span>\n              <span v-if=\"item.shortcut\" class=\"tabular text-micro text-muted-foreground\">\n                {{ item.shortcut }}\n              </span>\n            </button>\n          </template>\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n"],"mappings":""}