@ecoma-io/loom 0.2.0 → 0.3.0

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

@@ -0,0 +1,7 @@
+import IconButton_vue_vue_type_script_setup_true_lang_default, { iconButtonVariants } from "./IconButton.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/icon-button/src/IconButton.vue
+var IconButton_default = IconButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { IconButton_default as default, iconButtonVariants };
+
+//# sourceMappingURL=IconButton.js.map

package/dist/packages/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 — but `default` here names what Button calls `primary`, because\n * an icon button is never the screen's primary action and the word would mislead.\n */\nexport const iconButtonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md transition-colors duration-fast ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50\",\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 — blocks pointer events and dims the icon. */\n    disabled?: boolean;\n  }>(),\n  { variant: \"default\", size: \"md\", disabled: false },\n);\n</script>\n\n<template>\n  <button\n    :class=\"cn(iconButtonVariants({ variant, size }), $attrs.class)\"\n    :aria-label=\"label\"\n    :disabled=\"disabled\"\n  >\n    <slot />\n  </button>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/icon-button/src/IconButton.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/icon-button/src/IconButton.vue"],"names":[],"mappings":"AA0EA,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,aAAa,CAAC;AAElF,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;;8EAuB9B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,kJAAkJ;cACxI,iBAAiB;IAC3B,wEAAwE;WACjE,cAAc;IACrB,wGAAwG;WACjG,MAAM;IACb,6DAA6D;eAClD,OAAO;;IAPlB,kJAAkJ;cACxI,iBAAiB;IAC3B,wEAAwE;WACjE,cAAc;IACrB,wGAAwG;WACjG,MAAM;IACb,6DAA6D;eAClD,OAAO;;UAJX,cAAc;cAIV,OAAO;aANR,iBAAiB;;cA0CjB,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,59 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+import { cva } from "class-variance-authority";
+//#region packages/primitives/icon-button/src/IconButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "disabled"];
+/**
+* An icon-only button is a square, so every size is height-equals-width and has
+* no horizontal padding. The four variants match Button's press language — hover
+* lifts by fill — but `default` here names what Button calls `primary`, because
+* an icon button is never the screen's primary action and the word would mislead.
+*/
+var iconButtonVariants = cva("inline-flex items-center justify-center rounded-md transition-colors duration-fast ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70",
+			ghost: "hover:bg-subtle text-foreground",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80"
+		},
+		size: {
+			sm: "h-8 w-8",
+			md: "h-9 w-9",
+			lg: "h-10 w-10"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+var IconButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "IconButton",
+	props: {
+		variant: { default: "default" },
+		size: { default: "md" },
+		label: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				class: normalizeClass(unref(cn)(unref(iconButtonVariants)({
+					variant: __props.variant,
+					size: __props.size
+				}), _ctx.$attrs.class)),
+				"aria-label": __props.label,
+				disabled: __props.disabled
+			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { IconButton_vue_vue_type_script_setup_true_lang_default as default, iconButtonVariants };
+
+//# sourceMappingURL=IconButton.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/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 — but `default` here names what Button calls `primary`, because\n * an icon button is never the screen's primary action and the word would mislead.\n */\nexport const iconButtonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md transition-colors duration-fast ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50\",\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 — blocks pointer events and dims the icon. */\n    disabled?: boolean;\n  }>(),\n  { variant: \"default\", size: \"md\", disabled: false },\n);\n</script>\n\n<template>\n  <button\n    :class=\"cn(iconButtonVariants({ variant, size }), $attrs.class)\"\n    :aria-label=\"label\"\n    :disabled=\"disabled\"\n  >\n    <slot />\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,qBAAqB,IAChC,yRACA;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;;;;;;;;;;;;;;GAsBE,OAAA,UAAA,GAAA,mBAMS,UAAA;IALN,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,kBAAA,CAAkB,CAAA;KAAA,SAAG,QAAA;KAAO,MAAE,QAAA;IAAI,CAAA,GAAKA,KAAAA,OAAO,KAAK,CAAA;IAC7D,cAAY,QAAA;IACZ,UAAU,QAAA;GAEX,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/packages/primitives/icon-button/src/index.d.ts

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

package/dist/packages/primitives/icon-button/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/icon-button/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/packages/primitives/icon-button/src/index.js

@@ -0,0 +1,3 @@
+import { iconButtonVariants } from "./IconButton.vue_vue_type_script_setup_true_lang.js";
+import IconButton_default from "./IconButton.js";
+export { IconButton_default as default, iconButtonVariants };

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

@@ -0,0 +1,7 @@
+import Indicator_vue_vue_type_script_setup_true_lang_default, { INDICATOR_LABELS, indicatorToneVariants, indicatorVariants } from "./Indicator.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/indicator/src/Indicator.vue
+var Indicator_default = Indicator_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { INDICATOR_LABELS, Indicator_default as default, indicatorToneVariants, indicatorVariants };
+
+//# sourceMappingURL=Indicator.js.map

package/dist/packages/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/packages/primitives/indicator/src/Indicator.vue.d.ts

@@ -0,0 +1,115 @@
+import { type LabelOverrides } from "@ecoma-io/loom-labels";
+import type { IndicatorLabels } from "@ecoma-io/loom-labels";
+/** A presence dot, or a number. */
+export type IndicatorVariant = "dot" | "count";
+/** The four presence states a dot can report. */
+export type IndicatorStatus = "online" | "offline" | "busy" | "away";
+/** Which corner of the marked element the marker straddles. */
+export type IndicatorPlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+/**
+ * The colour vocabulary, deliberately Badge's own names rather than a second
+ * set — `accent` included, and it means here exactly what it means there:
+ * a second semantic category distinct from primary, never decoration.
+ */
+export type IndicatorTone = "neutral" | "primary" | "success" | "warning" | "info" | "destructive" | "accent";
+/** The surface the marked element sits on, which the separating ring matches. */
+export type IndicatorSurface = "background" | "card" | "sunken" | "popover";
+export declare const indicatorVariants: (props?: ({
+    variant?: "count" | "dot" | null | undefined;
+    placement?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | null | undefined;
+    surface?: "card" | "background" | "sunken" | "popover" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The fill, keyed by Badge's colour names so a success dot and a success badge
+ * are the same green. These are the solid tokens where Badge uses a 12% wash:
+ * a wash reads fine across a chip and carries no signal at all across 12px.
+ *
+ * The paired `text-*` is what the count prints in and what the status glyph is
+ * punched out in, so one entry drives both layers.
+ */
+export declare const indicatorToneVariants: (props?: ({
+    tone?: "accent" | "neutral" | "primary" | "success" | "warning" | "info" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it, and
+ * exported so a host can build a partial vocabulary against the real thing.
+ */
+export declare const INDICATOR_LABELS: IndicatorLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** A presence dot, or a number in a pill. */
+    variant?: IndicatorVariant;
+    /** The number the pill prints, when `variant` is `count`. Zero hides the marker unless `showZero` is set. */
+    count?: number;
+    /** The highest number printed in full; anything above it prints as `<max>+`. The accessible text still carries the real figure. */
+    max?: number;
+    /** 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. */
+    status?: IndicatorStatus;
+    /** The marker's colour, in Badge's own vocabulary. Defaults to whatever `status` implies, or to `primary` when there is no status. */
+    tone?: IndicatorTone;
+    /** Which corner of the marked element the marker straddles. */
+    placement?: IndicatorPlacement;
+    /** 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. */
+    label?: string;
+    /** Render the pill when the count is zero. Off by default, because a count of nothing is not news. */
+    showZero?: boolean;
+    /** The surface the marked element sits on, so the ring separating the marker from it matches what surrounds them. */
+    surface?: IndicatorSurface;
+    /**
+     * Names for the markers this component derives on its own, as any subset
+     * of `IndicatorLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the vocabulary, not the instance's name: `label` still beats it
+     * and is what one bell counting drafts rather than unread mail reaches for.
+     */
+    labels?: LabelOverrides<IndicatorLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** A presence dot, or a number in a pill. */
+    variant?: IndicatorVariant;
+    /** The number the pill prints, when `variant` is `count`. Zero hides the marker unless `showZero` is set. */
+    count?: number;
+    /** The highest number printed in full; anything above it prints as `<max>+`. The accessible text still carries the real figure. */
+    max?: number;
+    /** 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. */
+    status?: IndicatorStatus;
+    /** The marker's colour, in Badge's own vocabulary. Defaults to whatever `status` implies, or to `primary` when there is no status. */
+    tone?: IndicatorTone;
+    /** Which corner of the marked element the marker straddles. */
+    placement?: IndicatorPlacement;
+    /** 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. */
+    label?: string;
+    /** Render the pill when the count is zero. Off by default, because a count of nothing is not news. */
+    showZero?: boolean;
+    /** The surface the marked element sits on, so the ring separating the marker from it matches what surrounds them. */
+    surface?: IndicatorSurface;
+    /**
+     * Names for the markers this component derives on its own, as any subset
+     * of `IndicatorLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the vocabulary, not the instance's name: `label` still beats it
+     * and is what one bell counting drafts rather than unread mail reaches for.
+     */
+    labels?: LabelOverrides<IndicatorLabels>;
+}> & Readonly<{}>, {
+    count: number;
+    max: number;
+    variant: IndicatorVariant;
+    surface: IndicatorSurface;
+    placement: IndicatorPlacement;
+    showZero: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        labelId: string;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Indicator.vue.d.ts.map

package/dist/packages/primitives/indicator/src/Indicator.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/indicator/src/Indicator.vue"],"names":[],"mappings":"AA2SA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG7D,mCAAmC;AACnC,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,OAAO,CAAC;AAE/C,iDAAiD;AACjD,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAErE,+DAA+D;AAC/D,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AAE3F;;;;GAIG;AACH,MAAM,MAAM,aAAa,GACvB,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC;AAEpF,iFAAiF;AACjF,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5E,eAAO,MAAM,iBAAiB;;;;8EAmC7B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB;;8EAahC,CAAC;AAUH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,eAO9B,CAAC;wBAgBmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAwCd,6CAA6C;cACnC,gBAAgB;IAC1B,6GAA6G;YACrG,MAAM;IACd,mIAAmI;UAC7H,MAAM;IACZ,kJAAkJ;aACzI,eAAe;IACxB,sIAAsI;WAC/H,aAAa;IACpB,+DAA+D;gBACnD,kBAAkB;IAC9B,mPAAmP;YAC3O,MAAM;IACd,sGAAsG;eAC3F,OAAO;IAClB,qHAAqH;cAC3G,gBAAgB;IAC1B;;;;;;;OAOG;aACM,cAAc,CAAC,eAAe,CAAC;;IA1BxC,6CAA6C;cACnC,gBAAgB;IAC1B,6GAA6G;YACrG,MAAM;IACd,mIAAmI;UAC7H,MAAM;IACZ,kJAAkJ;aACzI,eAAe;IACxB,sIAAsI;WAC/H,aAAa;IACpB,+DAA+D;gBACnD,kBAAkB;IAC9B,mPAAmP;YAC3O,MAAM;IACd,sGAAsG;eAC3F,OAAO;IAClB,qHAAqH;cAC3G,gBAAgB;IAC1B;;;;;;;OAOG;aACM,cAAc,CAAC,eAAe,CAAC;;WAvBhC,MAAM;SAER,MAAM;aAJF,gBAAgB;aAgBhB,gBAAgB;eANd,kBAAkB;cAInB,OAAO;;cA2JR,CAAC,KAAK;;KAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,164 @@
+import { cn } from "../../../core/src/cn.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useId } from "vue";
+import { cva } from "class-variance-authority";
+//#region packages/primitives/indicator/src/Indicator.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-placement"];
+var _hoisted_2 = {
+	key: 0,
+	"aria-hidden": "true"
+};
+var _hoisted_3 = ["id"];
+var indicatorVariants = cva("pointer-events-none absolute z-10 flex items-center justify-center select-none ring-2", {
+	variants: {
+		variant: {
+			dot: "h-3 w-3 rounded-full",
+			count: "h-5 min-w-5 rounded-full px-1.5 text-micro font-medium tabular"
+		},
+		placement: {
+			"top-right": "top-0 right-0 -translate-y-1/2 translate-x-1/2",
+			"top-left": "top-0 left-0 -translate-y-1/2 -translate-x-1/2",
+			"bottom-right": "right-0 bottom-0 translate-x-1/2 translate-y-1/2",
+			"bottom-left": "bottom-0 left-0 -translate-x-1/2 translate-y-1/2"
+		},
+		surface: {
+			background: "ring-background",
+			card: "ring-card",
+			sunken: "ring-sunken",
+			popover: "ring-popover"
+		}
+	},
+	defaultVariants: {
+		variant: "dot",
+		placement: "top-right",
+		surface: "background"
+	}
+});
+/**
+* The fill, keyed by Badge's colour names so a success dot and a success badge
+* are the same green. These are the solid tokens where Badge uses a 12% wash:
+* a wash reads fine across a chip and carries no signal at all across 12px.
+*
+* The paired `text-*` is what the count prints in and what the status glyph is
+* punched out in, so one entry drives both layers.
+*/
+var indicatorToneVariants = cva("", {
+	variants: { tone: {
+		neutral: "bg-muted-foreground text-background",
+		primary: "bg-primary text-primary-foreground",
+		success: "bg-success text-success-foreground",
+		warning: "bg-warning text-warning-foreground",
+		info: "bg-info text-info-foreground",
+		destructive: "bg-destructive text-destructive-foreground",
+		accent: "bg-accent text-accent-foreground"
+	} },
+	defaultVariants: { tone: "primary" }
+});
+/** Which colour each presence state means, so `status` alone is enough. */
+var STATUS_TONES = {
+	online: "success",
+	offline: "neutral",
+	busy: "destructive",
+	away: "warning"
+};
+/**
+
+/**
+* Loom's English, co-located with the component so it tree-shakes with it, and
+* exported so a host can build a partial vocabulary against the real thing.
+*/
+var INDICATOR_LABELS = {
+	online: "Online",
+	offline: "Offline",
+	busy: "Busy",
+	away: "Away",
+	count: ({ count }) => `${String(count)} unread`,
+	attention: "Needs attention"
+};
+/**
+* The shape layer, and it exists for the sighted reader the `sr-only` string
+* below cannot help. Three of the four states are saturated — green, amber,
+* red — which is the exact triple a red/green deficiency collapses, so `busy`
+* wears a bar and `away` a hole and no two of them differ by hue alone.
+* `offline` needs none: grey against any of the three is a saturation
+* difference, not a hue one.
+*/
+var STATUS_GLYPHS = {
+	online: "",
+	offline: "",
+	busy: "h-0.5 w-1.5 rounded-full bg-current",
+	away: "h-1 w-1 rounded-full bg-current"
+};
+var Indicator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Indicator",
+	props: {
+		variant: { default: "dot" },
+		count: { default: 0 },
+		max: { default: 99 },
+		status: {},
+		tone: {},
+		placement: { default: "top-right" },
+		label: {},
+		showZero: {
+			type: Boolean,
+			default: false
+		},
+		surface: { default: "background" },
+		labels: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("indicator", INDICATOR_LABELS, () => props.labels);
+		const { attrs, rest } = useSplitAttrs();
+		const labelId = useId();
+		/**
+		* The count as a whole, non-negative number. A negative count is a defect in
+		* the caller's data, and a pill reading "-1 unread" reports that defect to the
+		* reader rather than to the caller — falling back to "nothing to report" is
+		* the honest rendering of it.
+		*/
+		const total = computed(() => Math.max(0, Math.trunc(props.count)));
+		const visible = computed(() => props.variant === "dot" || total.value > 0 || props.showZero);
+		/** What the pill prints — the real figure up to `max`, then `<max>+`. */
+		const printed = computed(() => total.value > props.max ? `${String(props.max)}+` : String(total.value));
+		const tone = computed(() => props.tone ?? (props.status ? STATUS_TONES[props.status] : "primary"));
+		const glyph = computed(() => props.status ? STATUS_GLYPHS[props.status] : "");
+		/**
+		* The accessible name, and it is never empty by construction. The count case
+		* reports `total` rather than `printed`: clamping at `max` is a decision about
+		* how wide the pill is allowed to get, and a reader who cannot see the pill
+		* has no reason to inherit it — "132 unread" is the fact, "99+" is the layout.
+		*/
+		const name = computed(() => {
+			const given = props.label?.trim();
+			if (given) return given;
+			if (props.variant === "count") return text.value.count({ count: total.value });
+			return props.status ? text.value[props.status] : text.value.attention;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps(unref(rest), { class: unref(cn)("relative inline-flex align-middle", unref(attrs).class) }), [renderSlot(_ctx.$slots, "default", { labelId: unref(labelId) }), visible.value ? (openBlock(), createElementBlock("span", {
+				key: printed.value,
+				"data-placement": __props.placement,
+				class: normalizeClass(unref(cn)(unref(indicatorVariants)({
+					variant: __props.variant,
+					placement: __props.placement,
+					surface: __props.surface
+				}), unref(indicatorToneVariants)({ tone: tone.value }), __props.variant === "count" && "animate-scale-in"))
+			}, [__props.variant === "count" ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(printed.value), 1)) : glyph.value ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(glyph.value)
+			}, null, 2)) : createCommentVNode("", true), createElementVNode("span", {
+				id: unref(labelId),
+				class: "sr-only"
+			}, toDisplayString(name.value), 9, _hoisted_3)], 10, _hoisted_1)) : createCommentVNode("", true)], 16);
+		};
+	}
+});
+//#endregion
+export { INDICATOR_LABELS, Indicator_vue_vue_type_script_setup_true_lang_default as default, indicatorToneVariants, indicatorVariants };
+
+//# sourceMappingURL=Indicator.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/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/packages/primitives/indicator/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default, indicatorVariants, indicatorToneVariants, INDICATOR_LABELS, } from "./Indicator.vue";
+export type { IndicatorVariant, IndicatorStatus, IndicatorPlacement, IndicatorTone, IndicatorSurface, } from "./Indicator.vue";
+export type { IndicatorLabels } from "@ecoma-io/loom-labels";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/indicator/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/indicator/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,aAAa,EACb,gBAAgB,GACjB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/packages/primitives/indicator/src/index.js

@@ -0,0 +1,3 @@
+import { INDICATOR_LABELS, indicatorToneVariants, indicatorVariants } from "./Indicator.vue_vue_type_script_setup_true_lang.js";
+import Indicator_default from "./Indicator.js";
+export { INDICATOR_LABELS, Indicator_default as default, indicatorToneVariants, indicatorVariants };

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

@@ -0,0 +1,7 @@
+import InlineError_vue_vue_type_script_setup_true_lang_default from "./InlineError.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/inline-error/src/InlineError.vue
+var InlineError_default = InlineError_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { InlineError_default as default };
+
+//# sourceMappingURL=InlineError.js.map

package/dist/packages/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/packages/primitives/inline-error/src/InlineError.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineError.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/inline-error/src/InlineError.vue"],"names":[],"mappings":"AA6CA;;;;;;;;;;;GAWG;AACH,KAAK,WAAW,GAAG;IACjB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AA+DF,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK9C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,45 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+import { TriangleAlert } from "@lucide/vue";
+//#region packages/primitives/inline-error/src/InlineError.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "min-w-0 flex-1" };
+var _hoisted_2 = {
+	key: 0,
+	class: "shrink-0"
+};
+/**
+* InlineError — the one error contract for a field or a section, instead of
+* a paragraph here and a badge there. `role="alert"` on the root means a
+* screen reader announces it the instant it enters the DOM, which is also
+* why a host must mount it with `v-if` rather than hide it with `v-show`:
+* CSS visibility leaves the node in the DOM, so a message change under
+* `v-show` may not re-announce.
+*
+* Persists until the host resolves the cause it names — there is no
+* auto-dismiss timer and no built-in close button. A transient notice that
+* hides itself belongs to a toast, not here.
+*/
+var InlineError_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "InlineError",
+	props: { message: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "alert",
+				class: normalizeClass(unref(cn)("flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive-text", "animate-fade-rise"))
+			}, [
+				createVNode(unref(TriangleAlert), {
+					class: "mt-0.5 h-4 w-4 shrink-0",
+					"aria-hidden": "true"
+				}),
+				createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.message), 1)])]),
+				_ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { InlineError_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=InlineError.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/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/packages/primitives/inline-error/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./InlineError.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/inline-error/src/index.d.ts.map

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

package/dist/packages/primitives/inline-error/src/index.js

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

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

@@ -0,0 +1,7 @@
+import Link_vue_vue_type_script_setup_true_lang_default, { linkVariants } from "./Link.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/link/src/Link.vue
+var Link_default = Link_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Link_default as default, linkVariants };
+
+//# sourceMappingURL=Link.js.map

package/dist/packages/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-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n  {\n    variants: {\n      variant: {\n        default: \"text-primary-text underline underline-offset-4 hover:text-primary-text/80\",\n        muted: \"text-muted-foreground 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        'cursor-default pointer-events-none opacity-50',\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":""}