@ecoma-io/loom 0.4.0 → 0.6.0

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

@@ -0,0 +1 @@
+{"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/primitives/hover-card/src/HoverCard.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"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/primitives/icon-button/src/IconButton.js.map

@@ -0,0 +1 @@
+{"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/primitives/icon-button/src/IconButton.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"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/primitives/indicator/src/Indicator.js.map

@@ -0,0 +1 @@
+{"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/primitives/indicator/src/Indicator.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"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/primitives/inline-error/src/InlineError.js.map

@@ -0,0 +1 @@
+{"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/primitives/inline-error/src/InlineError.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"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/primitives/kbd/src/Kbd.js.map

@@ -0,0 +1 @@
+{"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/primitives/kbd/src/Kbd.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"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/primitives/link/src/Link.js.map

@@ -0,0 +1 @@
+{"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/primitives/link/src/Link.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"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/primitives/list/src/List.js.map

@@ -0,0 +1 @@
+{"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/primitives/list/src/List.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"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/primitives/list/src/ListItem.js.map

@@ -0,0 +1 @@
+{"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        // The soft press weight, not `scale-press` — a full-width row moving\n        // the full 3% reads as the page jolting rather than the row answering.\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-press-soft\",\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/primitives/list/src/ListItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,101 @@
+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-press-soft",
+		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/primitives/list/src/ListItem.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"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        // The soft press weight, not `scale-press` — a full-width row moving\n        // the full 3% reads as the page jolting rather than the row answering.\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-press-soft\",\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;EAIR,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/primitives/live-region/src/LiveRegion.js

@@ -0,0 +1,7 @@
+import LiveRegion_vue_vue_type_script_setup_true_lang_default from "./LiveRegion.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/live-region/src/LiveRegion.vue
+var LiveRegion_default = LiveRegion_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { LiveRegion_default as default };
+
+//# sourceMappingURL=LiveRegion.js.map

package/dist/primitives/live-region/src/LiveRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion.js","names":[],"sources":["../../../../packages/primitives/live-region/src/LiveRegion.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * LiveRegion — a permanently mounted, visually hidden `aria-live` region and\n * the seam (`useAnnounce()`) that writes into it. Screen readers announce a\n * live region only when its content *changes* after the region exists, so\n * the region renders empty and stays mounted for its whole lifetime: a\n * region added in the same tick as its message is announced unreliably, and\n * a region toggled into existence per message misses its first announcement.\n *\n * The hiding is the clip technique, delegated to VisuallyHidden — never\n * `display: none`, which removes the region from the accessibility tree\n * entirely. No `role=\"status\"`/`role=\"alert\"` is layered on top: the\n * politeness prop *is* the semantics, mapped straight onto `aria-live`, and\n * duplicating it in a role would only let the two disagree. The component\n * owns no strings, so there is nothing to localise and no labels prop.\n */\nexport type { LiveRegionContext, LiveRegionPoliteness } from \"./context\";\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, provide, ref, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport VisuallyHidden from \"@ecoma-io/loom-visually-hidden\";\nimport { LIVE_REGION_KEY, announce, mountingStandalone, registerWriter } from \"./context\";\nimport type { LiveRegionPoliteness } from \"./context\";\n\nconst props = defineProps({\n  /** How urgent announcements through this region are — mapped to `aria-live` verbatim. */\n  politeness: {\n    type: String as PropType<LiveRegionPoliteness>,\n    default: \"polite\",\n  },\n});\n\nconst node = ref<HTMLElement | null>(null);\n\nlet unregister: (() => void) | null = null;\n\nfunction bind(politeness: LiveRegionPoliteness): () => void {\n  const el = node.value;\n  if (!el) return () => {};\n  return registerWriter(\n    politeness,\n    (message) => {\n      // Clear first: assistive tech compares region content, and rewriting\n      // identical text in place announces nothing. Re-adding across the next\n      // frame makes the repeat a real content addition, which\n      // `aria-relevant=\"additions text\"` then reads.\n      el.textContent = \"\";\n      requestAnimationFrame(() => {\n        el.textContent = message;\n      });\n    },\n    mountingStandalone,\n  );\n}\n\nonMounted(() => {\n  unregister = bind(props.politeness);\n});\n\nwatch(\n  () => props.politeness,\n  (politeness) => {\n    if (!unregister) return;\n    unregister();\n    unregister = bind(politeness);\n  },\n);\n\nonBeforeUnmount(() => {\n  unregister?.();\n  unregister = null;\n});\n\n// Every region provides the seam for the subtree under it, so a component\n// sitting beside a region reaches `useAnnounce()` through the tree; with no\n// region mounted anywhere, `useAnnounce()` falls back to the standalone pair.\nprovide(LIVE_REGION_KEY, { announce });\n</script>\n\n<template>\n  <VisuallyHidden as=\"div\">\n    <div ref=\"node\" :aria-live=\"politeness\" aria-relevant=\"additions text\" aria-atomic=\"true\" />\n  </VisuallyHidden>\n</template>\n"],"mappings":""}

package/dist/primitives/live-region/src/LiveRegion.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import VisuallyHidden_default from "../../visually-hidden/src/VisuallyHidden.js";
+import "../../visually-hidden/src/index.js";
+import { LIVE_REGION_KEY, announce, mountingStandalone, registerWriter } from "./context.js";
+import { createBlock, createElementVNode, defineComponent, onBeforeUnmount, onMounted, openBlock, provide, ref, unref, watch, withCtx } from "vue";
+//#region packages/primitives/live-region/src/LiveRegion.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-live"];
+var LiveRegion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "LiveRegion",
+	props: { 
+	/** How urgent announcements through this region are — mapped to `aria-live` verbatim. */
+politeness: {
+		type: String,
+		default: "polite"
+	} },
+	setup(__props) {
+		const props = __props;
+		const node = ref(null);
+		let unregister = null;
+		function bind(politeness) {
+			const el = node.value;
+			if (!el) return () => {};
+			return registerWriter(politeness, (message) => {
+				el.textContent = "";
+				requestAnimationFrame(() => {
+					el.textContent = message;
+				});
+			}, mountingStandalone);
+		}
+		onMounted(() => {
+			unregister = bind(props.politeness);
+		});
+		watch(() => props.politeness, (politeness) => {
+			if (!unregister) return;
+			unregister();
+			unregister = bind(politeness);
+		});
+		onBeforeUnmount(() => {
+			unregister?.();
+			unregister = null;
+		});
+		provide(LIVE_REGION_KEY, { announce });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VisuallyHidden_default), { as: "div" }, {
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "node",
+					ref: node,
+					"aria-live": __props.politeness,
+					"aria-relevant": "additions text",
+					"aria-atomic": "true"
+				}, null, 8, _hoisted_1)]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { LiveRegion_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=LiveRegion.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/live-region/src/LiveRegion.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/live-region/src/LiveRegion.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * LiveRegion — a permanently mounted, visually hidden `aria-live` region and\n * the seam (`useAnnounce()`) that writes into it. Screen readers announce a\n * live region only when its content *changes* after the region exists, so\n * the region renders empty and stays mounted for its whole lifetime: a\n * region added in the same tick as its message is announced unreliably, and\n * a region toggled into existence per message misses its first announcement.\n *\n * The hiding is the clip technique, delegated to VisuallyHidden — never\n * `display: none`, which removes the region from the accessibility tree\n * entirely. No `role=\"status\"`/`role=\"alert\"` is layered on top: the\n * politeness prop *is* the semantics, mapped straight onto `aria-live`, and\n * duplicating it in a role would only let the two disagree. The component\n * owns no strings, so there is nothing to localise and no labels prop.\n */\nexport type { LiveRegionContext, LiveRegionPoliteness } from \"./context\";\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, provide, ref, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport VisuallyHidden from \"@ecoma-io/loom-visually-hidden\";\nimport { LIVE_REGION_KEY, announce, mountingStandalone, registerWriter } from \"./context\";\nimport type { LiveRegionPoliteness } from \"./context\";\n\nconst props = defineProps({\n  /** How urgent announcements through this region are — mapped to `aria-live` verbatim. */\n  politeness: {\n    type: String as PropType<LiveRegionPoliteness>,\n    default: \"polite\",\n  },\n});\n\nconst node = ref<HTMLElement | null>(null);\n\nlet unregister: (() => void) | null = null;\n\nfunction bind(politeness: LiveRegionPoliteness): () => void {\n  const el = node.value;\n  if (!el) return () => {};\n  return registerWriter(\n    politeness,\n    (message) => {\n      // Clear first: assistive tech compares region content, and rewriting\n      // identical text in place announces nothing. Re-adding across the next\n      // frame makes the repeat a real content addition, which\n      // `aria-relevant=\"additions text\"` then reads.\n      el.textContent = \"\";\n      requestAnimationFrame(() => {\n        el.textContent = message;\n      });\n    },\n    mountingStandalone,\n  );\n}\n\nonMounted(() => {\n  unregister = bind(props.politeness);\n});\n\nwatch(\n  () => props.politeness,\n  (politeness) => {\n    if (!unregister) return;\n    unregister();\n    unregister = bind(politeness);\n  },\n);\n\nonBeforeUnmount(() => {\n  unregister?.();\n  unregister = null;\n});\n\n// Every region provides the seam for the subtree under it, so a component\n// sitting beside a region reaches `useAnnounce()` through the tree; with no\n// region mounted anywhere, `useAnnounce()` falls back to the standalone pair.\nprovide(LIVE_REGION_KEY, { announce });\n</script>\n\n<template>\n  <VisuallyHidden as=\"div\">\n    <div ref=\"node\" :aria-live=\"politeness\" aria-relevant=\"additions text\" aria-atomic=\"true\" />\n  </VisuallyHidden>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EA0BA,MAAM,QAAQ;EAQd,MAAM,OAAO,IAAwB,IAAI;EAEzC,IAAI,aAAkC;EAEtC,SAAS,KAAK,YAA8C;GAC1D,MAAM,KAAK,KAAK;GAChB,IAAI,CAAC,IAAI,aAAa,CAAC;GACvB,OAAO,eACL,aACC,YAAY;IAKX,GAAG,cAAc;IACjB,4BAA4B;KAC1B,GAAG,cAAc;IACnB,CAAC;GACH,GACA,kBACF;EACF;EAEA,gBAAgB;GACd,aAAa,KAAK,MAAM,UAAU;EACpC,CAAC;EAED,YACQ,MAAM,aACX,eAAe;GACd,IAAI,CAAC,YAAY;GACjB,WAAW;GACX,aAAa,KAAK,UAAU;EAC9B,CACF;EAEA,sBAAsB;GACpB,aAAa;GACb,aAAa;EACf,CAAC;EAKD,QAAQ,iBAAiB,EAAE,SAAS,CAAC;;GAInC,OAAA,UAAA,GAAA,YAEiB,MAAA,sBAAA,GAAA,EAFD,IAAG,MAAK,GAAA;IACtB,SAAA,cAA4F,CAA5F,mBAA4F,OAAA;KAAnF,SAAA;KAAJ,KAAI;KAAQ,aAAW,QAAA;KAAY,iBAAc;KAAiB,eAAY"}

package/dist/primitives/live-region/src/context.js

@@ -0,0 +1,85 @@
+import LiveRegion_default from "./LiveRegion.js";
+import { createApp } from "vue";
+//#region packages/primitives/live-region/src/context.ts
+var LIVE_REGION_KEY = Symbol("loom-live-region");
+/**
+* Writers registered by regions mounted in the component tree, per
+* politeness. The earliest still-mounted region of a politeness wins, so a
+* region near the app root owns the channel and a stray duplicate deeper in
+* the tree stays silent.
+*/
+var regionWriters = /* @__PURE__ */ new Map();
+/**
+* Writers for the standalone pair mounted on `document.body`, kept apart
+* from `regionWriters` so an in-tree region always outranks the fallback
+* without the lookup depending on mount order.
+*/
+var standaloneWriters = /* @__PURE__ */ new Map();
+function registerWriter(politeness, writer, standalone) {
+	if (standalone) {
+		standaloneWriters.set(politeness, writer);
+		return () => {
+			if (standaloneWriters.get(politeness) === writer) standaloneWriters.delete(politeness);
+		};
+	}
+	const list = regionWriters.get(politeness) ?? [];
+	list.push(writer);
+	regionWriters.set(politeness, list);
+	return () => {
+		regionWriters.set(politeness, (regionWriters.get(politeness) ?? []).filter((registered) => registered !== writer));
+	};
+}
+/**
+* True while the fallback pair is mounting, so those instances register as
+* the fallback rather than as in-tree regions. `createApp().mount()` runs
+* synchronously, so the flag cannot interleave.
+*/
+var mountingStandalone = false;
+var standaloneMounted = false;
+/**
+* Mounts the standalone polite + assertive pair on `document.body` — the
+* default for callers that never mounted a region. It runs when the seam is
+* first asked for (`useAnnounce()`), never at announce time: a region added
+* in the same tick as its message is announced unreliably, so the pair has
+* to pre-exist the first message.
+*/
+function ensureStandaloneRegions() {
+	if (standaloneMounted || typeof document === "undefined") return;
+	standaloneMounted = true;
+	const host = document.createElement("div");
+	host.setAttribute("data-loom-live-region", "");
+	const apps = [];
+	for (const politeness of ["polite", "assertive"]) {
+		const mountPoint = document.createElement("div");
+		host.appendChild(mountPoint);
+		mountingStandalone = true;
+		try {
+			const app = createApp(LiveRegion_default, { politeness });
+			app.mount(mountPoint);
+			apps.push(app);
+		} finally {
+			mountingStandalone = false;
+		}
+	}
+	document.body.appendChild(host);
+	window.addEventListener("pagehide", () => {
+		for (const app of apps) app.unmount();
+		standaloneWriters.clear();
+		standaloneMounted = false;
+		host.remove();
+	}, { once: true });
+}
+/**
+* The shared announcer: the in-tree region of that politeness if one is
+* mounted, else the standalone pair. Never mounts anything — regions must
+* pre-exist announcements, so the pair is mounted when `useAnnounce()` first
+* runs, not here.
+*/
+var announce = (message, politeness = "polite") => {
+	if (typeof document === "undefined") return;
+	(regionWriters.get(politeness)?.[0] ?? standaloneWriters.get(politeness))?.(message);
+};
+//#endregion
+export { LIVE_REGION_KEY, announce, ensureStandaloneRegions, mountingStandalone, registerWriter };
+
+//# sourceMappingURL=context.js.map

package/dist/primitives/live-region/src/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../packages/primitives/live-region/src/context.ts"],"sourcesContent":["import { createApp } from \"vue\";\nimport type { InjectionKey } from \"vue\";\n// Self-import: the fallback pair is real LiveRegion instances, so it\n// inherits the VisuallyHidden clip technique instead of duplicating it. The\n// cycle is benign — this module touches the SFC only inside\n// `ensureStandaloneRegions()`, long after both modules have evaluated.\nimport LiveRegion from \"./LiveRegion.vue\";\n\n/**\n * The seam's machinery, kept out of the SFC so the module-level state it\n * needs — the writer registries and the standalone fallback — is genuinely\n * module-level rather than per-instance.\n */\nexport type LiveRegionPoliteness = \"polite\" | \"assertive\";\n\n/** The write half of the seam — what `useAnnounce()` hands back. */\nexport type Announce = (message: string, politeness?: LiveRegionPoliteness) => void;\n\n/** The provide/inject shape a mounted region shares with its subtree. */\nexport interface LiveRegionContext {\n  announce: Announce;\n}\n\nexport const LIVE_REGION_KEY: InjectionKey<LiveRegionContext> = Symbol(\"loom-live-region\");\n\n/** The write function a mounted region registers. */\ntype Writer = Announce;\n\n/**\n * Writers registered by regions mounted in the component tree, per\n * politeness. The earliest still-mounted region of a politeness wins, so a\n * region near the app root owns the channel and a stray duplicate deeper in\n * the tree stays silent.\n */\nconst regionWriters = new Map<LiveRegionPoliteness, Writer[]>();\n\n/**\n * Writers for the standalone pair mounted on `document.body`, kept apart\n * from `regionWriters` so an in-tree region always outranks the fallback\n * without the lookup depending on mount order.\n */\nconst standaloneWriters = new Map<LiveRegionPoliteness, Writer>();\n\nexport function registerWriter(\n  politeness: LiveRegionPoliteness,\n  writer: Writer,\n  standalone: boolean,\n): () => void {\n  if (standalone) {\n    standaloneWriters.set(politeness, writer);\n    return () => {\n      if (standaloneWriters.get(politeness) === writer) standaloneWriters.delete(politeness);\n    };\n  }\n  const list = regionWriters.get(politeness) ?? [];\n  list.push(writer);\n  regionWriters.set(politeness, list);\n  return () => {\n    regionWriters.set(\n      politeness,\n      (regionWriters.get(politeness) ?? []).filter((registered) => registered !== writer),\n    );\n  };\n}\n\n/**\n * True while the fallback pair is mounting, so those instances register as\n * the fallback rather than as in-tree regions. `createApp().mount()` runs\n * synchronously, so the flag cannot interleave.\n */\nexport let mountingStandalone = false;\n\nlet standaloneMounted = false;\n\n/**\n * Mounts the standalone polite + assertive pair on `document.body` — the\n * default for callers that never mounted a region. It runs when the seam is\n * first asked for (`useAnnounce()`), never at announce time: a region added\n * in the same tick as its message is announced unreliably, so the pair has\n * to pre-exist the first message.\n */\nexport function ensureStandaloneRegions(): void {\n  if (standaloneMounted || typeof document === \"undefined\") return;\n  standaloneMounted = true;\n  const host = document.createElement(\"div\");\n  host.setAttribute(\"data-loom-live-region\", \"\");\n  const apps: ReturnType<typeof createApp>[] = [];\n  for (const politeness of [\"polite\", \"assertive\"] as const) {\n    const mountPoint = document.createElement(\"div\");\n    host.appendChild(mountPoint);\n    mountingStandalone = true;\n    try {\n      const app = createApp(LiveRegion, { politeness });\n      app.mount(mountPoint);\n      apps.push(app);\n    } finally {\n      mountingStandalone = false;\n    }\n  }\n  document.body.appendChild(host);\n  // The pair is a page-lifetime singleton — it must outlive the component\n  // that first asked for it, or in-flight announcements would die with it —\n  // so its teardown rides the page's, not any caller's.\n  window.addEventListener(\n    \"pagehide\",\n    () => {\n      for (const app of apps) app.unmount();\n      standaloneWriters.clear();\n      standaloneMounted = false;\n      host.remove();\n    },\n    { once: true },\n  );\n}\n\n/**\n * The shared announcer: the in-tree region of that politeness if one is\n * mounted, else the standalone pair. Never mounts anything — regions must\n * pre-exist announcements, so the pair is mounted when `useAnnounce()` first\n * runs, not here.\n */\nexport const announce: Announce = (message, politeness = \"polite\") => {\n  if (typeof document === \"undefined\") return;\n  const writer = regionWriters.get(politeness)?.[0] ?? standaloneWriters.get(politeness);\n  writer?.(message);\n};\n"],"mappings":";;;AAuBA,IAAa,kBAAmD,OAAO,kBAAkB;;;;;;;AAWzF,IAAM,gCAAgB,IAAI,IAAoC;;;;;;AAO9D,IAAM,oCAAoB,IAAI,IAAkC;AAEhE,SAAgB,eACd,YACA,QACA,YACY;CACZ,IAAI,YAAY;EACd,kBAAkB,IAAI,YAAY,MAAM;EACxC,aAAa;GACX,IAAI,kBAAkB,IAAI,UAAU,MAAM,QAAQ,kBAAkB,OAAO,UAAU;EACvF;CACF;CACA,MAAM,OAAO,cAAc,IAAI,UAAU,KAAK,CAAC;CAC/C,KAAK,KAAK,MAAM;CAChB,cAAc,IAAI,YAAY,IAAI;CAClC,aAAa;EACX,cAAc,IACZ,aACC,cAAc,IAAI,UAAU,KAAK,CAAC,EAAA,CAAG,QAAQ,eAAe,eAAe,MAAM,CACpF;CACF;AACF;;;;;;AAOA,IAAW,qBAAqB;AAEhC,IAAI,oBAAoB;;;;;;;;AASxB,SAAgB,0BAAgC;CAC9C,IAAI,qBAAqB,OAAO,aAAa,aAAa;CAC1D,oBAAoB;CACpB,MAAM,OAAO,SAAS,cAAc,KAAK;CACzC,KAAK,aAAa,yBAAyB,EAAE;CAC7C,MAAM,OAAuC,CAAC;CAC9C,KAAK,MAAM,cAAc,CAAC,UAAU,WAAW,GAAY;EACzD,MAAM,aAAa,SAAS,cAAc,KAAK;EAC/C,KAAK,YAAY,UAAU;EAC3B,qBAAqB;EACrB,IAAI;GACF,MAAM,MAAM,UAAU,oBAAY,EAAE,WAAW,CAAC;GAChD,IAAI,MAAM,UAAU;GACpB,KAAK,KAAK,GAAG;EACf,UAAU;GACR,qBAAqB;EACvB;CACF;CACA,SAAS,KAAK,YAAY,IAAI;CAI9B,OAAO,iBACL,kBACM;EACJ,KAAK,MAAM,OAAO,MAAM,IAAI,QAAQ;EACpC,kBAAkB,MAAM;EACxB,oBAAoB;EACpB,KAAK,OAAO;CACd,GACA,EAAE,MAAM,KAAK,CACf;AACF;;;;;;;AAQA,IAAa,YAAsB,SAAS,aAAa,aAAa;CACpE,IAAI,OAAO,aAAa,aAAa;CAErC,CADe,cAAc,IAAI,UAAU,CAAC,GAAG,MAAM,kBAAkB,IAAI,UAAU,EAAA,GAC5E,OAAO;AAClB"}

package/dist/primitives/live-region/src/index.js

@@ -0,0 +1,3 @@
+import LiveRegion_default from "./LiveRegion.js";
+import { useAnnounce } from "./useAnnounce.js";
+export { LiveRegion_default as default, useAnnounce };

package/dist/primitives/live-region/src/useAnnounce.js

@@ -0,0 +1,25 @@
+import { LIVE_REGION_KEY, announce, ensureStandaloneRegions } from "./context.js";
+import { inject } from "vue";
+//#region packages/primitives/live-region/src/useAnnounce.ts
+/**
+* The announcement seam. Call once in `setup()`:
+*
+*   const announce = useAnnounce();
+*   announce("3 results found");            // politely
+*   announce("Upload failed", "assertive"); // interrupting
+*
+* Under a mounted `<LiveRegion>` the message goes to the region registered
+* for that politeness; with no region in the tree it goes to the standalone
+* pair that this call mounts on `document.body` — mounted here, at setup
+* time, so the regions pre-exist the first message rather than appearing in
+* the same tick as it. SSR-safe: with no `document` there is nowhere to
+* announce to, and the function is a no-op.
+*/
+function useAnnounce() {
+	ensureStandaloneRegions();
+	return inject(LIVE_REGION_KEY, null)?.announce ?? announce;
+}
+//#endregion
+export { useAnnounce };
+
+//# sourceMappingURL=useAnnounce.js.map

package/dist/primitives/live-region/src/useAnnounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnnounce.js","names":[],"sources":["../../../../packages/primitives/live-region/src/useAnnounce.ts"],"sourcesContent":["import { inject } from \"vue\";\nimport { LIVE_REGION_KEY, ensureStandaloneRegions, announce } from \"./context\";\nimport type { Announce } from \"./context\";\n\n/**\n * The announcement seam. Call once in `setup()`:\n *\n *   const announce = useAnnounce();\n *   announce(\"3 results found\");            // politely\n *   announce(\"Upload failed\", \"assertive\"); // interrupting\n *\n * Under a mounted `<LiveRegion>` the message goes to the region registered\n * for that politeness; with no region in the tree it goes to the standalone\n * pair that this call mounts on `document.body` — mounted here, at setup\n * time, so the regions pre-exist the first message rather than appearing in\n * the same tick as it. SSR-safe: with no `document` there is nowhere to\n * announce to, and the function is a no-op.\n */\nexport function useAnnounce(): Announce {\n  ensureStandaloneRegions();\n  return inject(LIVE_REGION_KEY, null)?.announce ?? announce;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAgB,cAAwB;CACtC,wBAAwB;CACxB,OAAO,OAAO,iBAAiB,IAAI,CAAC,EAAE,YAAY;AACpD"}