@ecoma-io/loom 0.2.0 → 0.4.0

package/dist/packages/primitives/avatar/src/Avatar.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/avatar/src/Avatar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** Control height, and the text size the initials fallback prints at. */\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/** A circle, or a rounded square tile. */\nexport type AvatarShape = \"circle\" | \"square\";\n\n/**\n * Which visual treatment the avatar receives. `accent` applies the accent\n * colour as a rim, signalling a second semantic category distinct from the\n * default — a different role, origin, or mode.\n */\nexport type AvatarVariant = \"default\" | \"accent\";\n\nexport const avatarVariants = cva(\n  \"relative inline-flex shrink-0 items-center justify-center overflow-hidden select-none\",\n  {\n    // `satisfies` keeps the two halves honest: the unions above are the names a\n    // consumer imports and the documentation prints, the maps below are the\n    // classes. Adding a member to one and not the other stops compiling — which\n    // is what the three inline `size === '…' &&` conditionals this replaced\n    // could not do, and the reason five sizes could not stay written that way.\n    variants: {\n      size: {\n        // `text-xs` twice, deliberately. It is the smallest step Tailwind's own\n        // scale has, and the step below it — Loom's `text-micro` — is a name\n        // tailwind-merge classifies as a text *colour* rather than a size, so\n        // `cn()` drops it the moment the force map adds `text-muted-foreground`\n        // after it. Two initials at 12px still fit inside 24px.\n        xs: \"h-6 w-6 text-xs\",\n        sm: \"h-8 w-8 text-xs\",\n        md: \"h-10 w-10 text-sm\",\n        lg: \"h-12 w-12 text-base\",\n        xl: \"h-16 w-16 text-lg\",\n      } satisfies Record<AvatarSize, string>,\n      force: {\n        default: \"bg-muted text-muted-foreground\",\n        // The accent rim. Two signals, not one: the rim's *presence* is what a\n        // reader who cannot resolve the hue still sees — a default avatar has no\n        // edge at all — and the hidden `accentLabel` is what a reader who sees\n        // no avatar hears. The corner is left alone on purpose, because the\n        // corner is Indicator's: a presence dot pinned there would land on top\n        // of anything this component drew.\n        accent: \"border-2 border-accent bg-accent-muted text-accent-text\",\n      } satisfies Record<AvatarVariant, string>,\n    },\n    defaultVariants: { size: \"md\", force: \"default\" },\n  },\n);\n\n/**\n * A square avatar's corner radius, one value per size rather than the control\n * radius throughout. `rounded-md` is calibrated against a ~36px control; on a\n * 24px tile it is a third of the side, where a milled fillet stops reading as\n * a corner and starts reading as a blob, and on a 64px one it has almost\n * disappeared. Stepping it holds the corner between a sixth and a quarter of\n * the side at every size — the band the control radius already sits in — which\n * is the nesting law applied to a tile whose \"padding\" is its own edge.\n */\nconst SQUARE_RADIUS = {\n  xs: \"rounded-sm\",\n  sm: \"rounded-md\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n} satisfies Record<AvatarSize, string>;\n\n/**\n * The rounding for one size and shape. A circle is one value at every size; a\n * square is not, which is why the radius cannot live in the `cva` map beside\n * the heights. Kept off the public surface deliberately: a consumer wanting an\n * avatar-shaped tile should render an `Avatar`, not reassemble one.\n */\nfunction avatarRadius(size: AvatarSize, shape: AvatarShape): string {\n  return shape === \"circle\" ? \"rounded-full\" : SQUARE_RADIUS[size];\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { AvatarRoot, AvatarImage, AvatarFallback } from \"reka-ui\";\nimport { cn, useSplitAttrs } from \"@ecoma-io/loom-core\";\n\n/**\n * Avatar — a user's picture, with a graceful initials fallback for\n * no `src`, a broken URL, or a still-loading image. Built on Reka UI's\n * Avatar: the image only paints once it has actually finished loading, so\n * the fallback stays visible the whole time until then — first paint is\n * either the real photo or the initials, never a broken-image icon.\n *\n * Two neighbours are worth naming. Several faces standing for one thing — the\n * people on a task, the agents on a run — are an `AvatarGroup`, which owns the\n * overlap, the stacking order and the \"+3\" so a row of them is one object to a\n * screen reader rather than N unrelated images. Anything pinned onto the\n * avatar's corner — a presence dot, an unread count — is an `Indicator`\n * wrapped around it; this component deliberately draws nothing there.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Image URL. Omit it to render the fallback outright. */\n    src?: string;\n    /** Accessible name for the photo — required on `AvatarImage` so a screen reader announces who it is, not just that an image loaded. */\n    alt?: string;\n    /** Initials to show while there is no image, or once one has failed — computed by the caller, never derived from `alt` here. */\n    fallback?: string;\n    /** Control height. */\n    size?: AvatarSize;\n    /** A circle, or a rounded square tile. Square suits a subject a circle would misdescribe — an organisation, a project, a repository — and takes a radius that steps with the size rather than one fixed value. */\n    shape?: AvatarShape;\n    /** Which visual treatment the avatar receives. `accent` applies the accent rim and `accentLabel` for a screen reader, so the distinction never rests on the hue alone. */\n    variant?: AvatarVariant;\n    /** What a screen reader announces after the name of an `accent` avatar. Localise it. Set it empty when something outside already says so — `AvatarGroup` does, because each row item composes its own name — and nothing is added for a `default` avatar either way. */\n    accentLabel?: string;\n  }>(),\n  {\n    alt: \"\",\n    size: \"md\",\n    shape: \"circle\",\n    variant: \"default\",\n    accentLabel: \"\",\n  },\n);\n\n// One rendered node, and it is the right home for every fallthrough attribute\n// — but `class` still goes the long way round, through `cn()`. Vue's own merge\n// only concatenates, so the `bg-subtle` an AvatarGroup paints its overflow tile\n// with would win or lose against this root's `bg-muted` depending on the order\n// Tailwind happened to emit the two rules in, rather than on intent.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\nconst radius = computed(() => avatarRadius(props.size, props.shape));\n</script>\n\n<template>\n  <AvatarRoot\n    v-bind=\"rest\"\n    :data-variant=\"variant\"\n    :class=\"cn(avatarVariants({ size, force: variant }), radius, attrs.class as string)\"\n  >\n    <!-- Reka paints AvatarImage only once the photo has loaded, so scale-in\n         plays exactly on that swap-in — a gentle settle over the fallback. -->\n    <AvatarImage\n      v-if=\"src\"\n      :src=\"src\"\n      :alt=\"alt\"\n      class=\"h-full w-full animate-scale-in object-cover\"\n    />\n    <AvatarFallback class=\"font-medium\">{{ fallback }}</AvatarFallback>\n    <!-- The half of the accent signal a rim cannot carry. It sits after the\n         image so it is announced as a qualifier on the name rather than in\n         place of it, and it is dropped entirely for an empty `accentLabel`: a\n         wrapper that has already worked the qualifier into its own name would\n         otherwise leave a second copy of it in the tree. -->\n    <span v-if=\"variant === 'accent' && accentLabel\" class=\"sr-only\">{{ accentLabel }}</span>\n  </AvatarRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,IAAa,iBAAiB,IAC5B,yFACA;CAME,UAAU;EACR,MAAM;GAMJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,SAAS;GAOT,QAAQ;EACV;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO;CAAU;AAClD,CACF;;;;;;;;;;AAWA,IAAM,gBAAgB;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;AAQA,SAAS,aAAa,MAAkB,OAA4B;CAClE,OAAO,UAAU,WAAW,iBAAiB,cAAc;AAC7D;;;;;;;;;;;;;;EAsBA,MAAM,QAAQ;EAgCd,MAAM,EAAE,OAAO,SAAS,cAAc;EAEtC,MAAM,SAAS,eAAe,aAAa,MAAM,MAAM,MAAM,KAAK,CAAC;;GAIjE,OAAA,UAAA,GAAA,YAoBa,MAAA,UAAA,GApBb,WACU,MAmBG,IAAA,GAnBC;IACX,gBAAc,QAAA;IACd,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,cAAA,CAAc,CAAA;KAAA,MAAG,QAAA;KAAI,OAAS,QAAA;IAAO,CAAA,GAAK,OAAA,OAAQ,MAAA,KAAA,CAAK,CAAC,KAAK;;IAIxE,SAAA,cAKE;KAJM,QAAA,OADR,UAAA,GAAA,YAKE,MAAA,WAAA,GAAA;;MAHC,KAAK,QAAA;MACL,KAAK,QAAA;MACN,OAAM;;KAER,YAAmE,MAAA,cAAA,GAAA,EAAnD,OAAM,cAAa,GAAA;MAAC,SAAA,cAAc,CAAX,gBAAA,gBAAA,QAAA,QAAQ,GAAA,CAAA,CAAA,CAAA;;;KAMnC,QAAA,YAAO,YAAiB,QAAA,eAApC,UAAA,GAAA,mBAAyF,QAAzF,YAAyF,gBAArB,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

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

@@ -0,0 +1,3 @@
+export { default, avatarVariants } from "./Avatar.vue";
+export type { AvatarSize, AvatarShape, AvatarVariant } from "./Avatar.vue";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/avatar/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACvD,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC"}

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

@@ -0,0 +1,3 @@
+import { avatarVariants } from "./Avatar.vue_vue_type_script_setup_true_lang.js";
+import Avatar_default from "./Avatar.js";
+export { avatarVariants, Avatar_default as default };

package/dist/packages/primitives/avatar-group/src/AvatarGroup.js

@@ -0,0 +1,7 @@
+import AvatarGroup_vue_vue_type_script_setup_true_lang_default, { AVATAR_GROUP_LABELS } from "./AvatarGroup.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/avatar-group/src/AvatarGroup.vue
+var AvatarGroup_default = AvatarGroup_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { AVATAR_GROUP_LABELS, AvatarGroup_default as default };
+
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/packages/primitives/avatar-group/src/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","names":[],"sources":["../../../../../packages/primitives/avatar-group/src/AvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { AvatarGroupLabels } from \"@ecoma-io/loom-labels\";\nimport type { AvatarShape, AvatarSize, AvatarVariant } from \"@ecoma-io/loom-avatar\";\n\n/** One face in the row. */\nexport interface AvatarGroupItem {\n  /** Image URL. Omit it and this face renders `fallback` instead. */\n  src?: string;\n  /** Who this face is. It is what a screen reader reads for this member, whether or not the image ever loads — so it is the field to fill in even when there is no photo. */\n  alt?: string;\n  /** Initials shown while there is no image, or once one has failed. */\n  fallback?: string;\n  /** Which variant this member uses. Defaults to the group's own `variant`, so a row that mixes members states it per member and a row of one kind states it once. */\n  variant?: AvatarVariant;\n}\n\n/** The surface the row sits on, which the separating ring matches. */\nexport type AvatarGroupSurface = \"background\" | \"card\" | \"sunken\" | \"popover\";\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 AVATAR_GROUP_LABELS: AvatarGroupLabels = {\n  overflow: ({ count }) => `${String(count)} more`,\n  accent: ({ name }) => (name ? `${name}, Accent` : \"Accent\"),\n};\n\n/**\n * How far each face tucks under the one before it — a quarter of its own width\n * at every size, so a row of `xs` avatars reads at the same density as a row of\n * `xl` ones. A fixed offset would look like a badly spaced flex row at the top\n * of the scale and swallow the initials at the bottom of it.\n */\nconst OVERLAP = {\n  xs: \"-ml-1.5\",\n  sm: \"-ml-2\",\n  md: \"-ml-2.5\",\n  lg: \"-ml-3\",\n  xl: \"-ml-4\",\n} satisfies Record<AvatarSize, string>;\n\n/**\n * The ring that cuts each face out of the one it overlaps. Without it two\n * portraits of similar tone merge into one shape, so it is structural rather\n * than decorative — which is also why it has to be the colour of whatever\n * surrounds the row, something only the caller knows. The names are\n * Indicator's, for the same reason and with the same meaning.\n */\nconst SURFACE_RING = {\n  background: \"ring-background\",\n  card: \"ring-card\",\n  sunken: \"ring-sunken\",\n  popover: \"ring-popover\",\n} satisfies Record<AvatarGroupSurface, string>;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport Avatar from \"@ecoma-io/loom-avatar\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * AvatarGroup — the faces on one thing, overlapped into a single row: the\n * people assigned to a task, the agents on a run, the members of a workspace.\n * Past `max` of them the rest collapse into a counter, so the row's width is\n * bounded by the layout rather than by how many people happen to be involved.\n *\n * Reach for a plain `Avatar` when there is one subject, and for a real list of\n * rows when the reader needs to *act* on the members — a stack of overlapping\n * portraits is an at-a-glance summary, not a control. Nothing here is\n * focusable or clickable on purpose: the moment a face has to be pressable it\n * wants a row, a menu or a set of chips, each of which can carry a name and a\n * keyboard path that a 40px circle cannot.\n *\n * To a screen reader the row is one object — a labelled list of members ending\n * in \"3 more\" — rather than N unrelated images. Each face is announced by its\n * `alt` and nothing else: the portrait itself is hidden from assistive\n * technology and the name supplied beside it, which is what keeps the reading\n * identical whether the photo loaded, failed, or was never given.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The members, in the order they are shown. The first is the one painted on top. */\n    avatars: AvatarGroupItem[];\n    /** How many faces render before the rest collapse into the counter. Values below 1 are treated as 1 — a row of nothing but \"+5\" identifies nobody. */\n    max?: number;\n    /** Height of every face in the row, and of the counter — one of `Avatar`'s five sizes, `xs` through `xl`. */\n    size?: AvatarSize;\n    /** `circle` or `square`, forwarded to every face so the row reads as one shape. */\n    shape?: AvatarShape;\n    /** `default` or `accent`, for members that do not name their own — set it to `accent` for a row where every member uses the accent variant. */\n    variant?: AvatarVariant;\n    /** The group's accessible name: \"Assignees\", \"Reviewers\", \"Members\". */\n    label?: string;\n    /** The surface the row sits on, so the ring separating the faces matches what surrounds them. */\n    surface?: AvatarGroupSurface;\n    /**\n     * Names for the counter and for an accent member, as any subset of\n     * `AvatarGroupLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * The per-instance case is a row where \"more\" is the wrong word for what\n     * was left out: three reviewers, three members, three files.\n     */\n    labels?: LabelOverrides<AvatarGroupLabels>;\n  }>(),\n  {\n    max: 4,\n    size: \"md\",\n    shape: \"circle\",\n    variant: \"default\",\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(\"avatarGroup\", AVATAR_GROUP_LABELS, () => props.labels);\n\n// One rendered node, and it takes every fallthrough attribute — but `class`\n// goes through `cn()`, so a caller's `gap-1` can beat the row's own layout\n// utilities instead of tying with them on stylesheet order.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n/**\n * At least one face always renders. `max = 0` is the boundary that decides\n * this: a group collapsed to nothing but \"+5\" has spent an avatar row saying\n * only that some people exist, which is strictly less than one face and a\n * count would have said.\n */\nconst shown = computed(() => props.avatars.slice(0, Math.max(1, Math.trunc(props.max))));\n\n/** How many members the row did not have room for. Zero renders no counter at all. */\nconst hidden = computed(() => props.avatars.length - shown.value.length);\n\n/** What the counter prints. `+3` is the layout; the sentence below is the information. */\nconst printed = computed(() => `+${String(hidden.value)}`);\n\nconst overlap = computed(() => OVERLAP[props.size]);\n\n/** `ring-2` in the surface colour, on every face including the counter. */\nconst ring = computed(() => cn(\"ring-2\", SURFACE_RING[props.surface]));\n\n/**\n * What a screen reader reads for one member. The accent qualifier is composed\n * here rather than left to `Avatar`'s own hidden label, because the portrait\n * inside each item is `aria-hidden` — the item says the name once, in one\n * voice, whichever state the image is in.\n */\nfunction memberName(item: AvatarGroupItem): string {\n  const who = (item.alt ?? item.fallback ?? \"\").trim();\n  if ((item.variant ?? props.variant) !== \"accent\") return who;\n  return text.value.accent({ name: who });\n}\n</script>\n\n<template>\n  <!-- `role=\"list\"` on a div rather than a real `<ul>`, and the reason is the\n       page this is documented on. VitePress styles `.vp-doc li + li` with a top\n       margin and `.vp-doc ul` with a disc marker and a left indent, unlayered —\n       and unlayered CSS beats every Tailwind utility, which all live in\n       `@layer utilities`. A genuine list element here arrives bulleted, indented\n       and stepping 8px downhill per face. The roles are the semantics; the\n       elements were only ever carrying them.\n\n       The explicit attributes sit before `v-bind`, so a caller who names the\n       group with `aria-labelledby` instead of `label` keeps their own value\n       rather than having an unset prop overwrite it. -->\n  <div\n    v-if=\"avatars.length > 0\"\n    role=\"list\"\n    :aria-label=\"label\"\n    v-bind=\"rest\"\n    :class=\"cn('flex items-center', attrs.class as string)\"\n  >\n    <!-- The first face on top, each later one tucked under it. `z-index` is not\n         automatic on a flex row — painting order alone puts the *last* sibling\n         over its neighbours, which reads as a stack dealt backwards — and it\n         needs the positioned parent this span provides. -->\n    <span\n      v-for=\"(item, index) in shown\"\n      :key=\"`${String(index)}-${item.src ?? item.fallback ?? ''}`\"\n      role=\"listitem\"\n      :style=\"{ zIndex: shown.length - index }\"\n      :class=\"cn('relative', index > 0 && overlap)\"\n    >\n      <!-- `accent-label` is cleared because the item beside it has already\n           worked the qualifier into one name; left at its default the row would\n           carry two copies of the accent label per accent member. -->\n      <Avatar\n        aria-hidden=\"true\"\n        accent-label=\"\"\n        v-bind=\"optional({ src: item.src, alt: item.alt, fallback: item.fallback })\"\n        :size=\"size\"\n        :shape=\"shape\"\n        :variant=\"item.variant ?? variant\"\n        :class=\"ring\"\n      />\n      <span class=\"sr-only\">{{ memberName(item) }}</span>\n    </span>\n\n    <!-- The counter is a face-shaped tile rather than a shape of its own, so\n         the row keeps one rhythm: same size, same corner, same ring, and the\n         neutral well instead of a portrait's fill so it never reads as a\n         person. It sits under everything, at the back of the stack. -->\n    <span v-if=\"hidden > 0\" role=\"listitem\" :style=\"{ zIndex: 0 }\" :class=\"cn('relative', overlap)\">\n      <Avatar\n        aria-hidden=\"true\"\n        :fallback=\"printed\"\n        :size=\"size\"\n        :shape=\"shape\"\n        :class=\"cn(ring, 'bg-subtle text-subtle-foreground tabular')\"\n      />\n      <span class=\"sr-only\">{{ text.overflow({ count: hidden }) }}</span>\n    </span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/avatar-group/src/AvatarGroup.vue.d.ts

@@ -0,0 +1,81 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { AvatarGroupLabels } from "../../../labels/src/index";
+import type { AvatarShape, AvatarSize, AvatarVariant } from "../../avatar/src/index";
+/** One face in the row. */
+export interface AvatarGroupItem {
+    /** Image URL. Omit it and this face renders `fallback` instead. */
+    src?: string;
+    /** Who this face is. It is what a screen reader reads for this member, whether or not the image ever loads — so it is the field to fill in even when there is no photo. */
+    alt?: string;
+    /** Initials shown while there is no image, or once one has failed. */
+    fallback?: string;
+    /** Which variant this member uses. Defaults to the group's own `variant`, so a row that mixes members states it per member and a row of one kind states it once. */
+    variant?: AvatarVariant;
+}
+/** The surface the row sits on, which the separating ring matches. */
+export type AvatarGroupSurface = "background" | "card" | "sunken" | "popover";
+/**
+
+/**
+ * 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 AVATAR_GROUP_LABELS: AvatarGroupLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The members, in the order they are shown. The first is the one painted on top. */
+    avatars: AvatarGroupItem[];
+    /** How many faces render before the rest collapse into the counter. Values below 1 are treated as 1 — a row of nothing but "+5" identifies nobody. */
+    max?: number;
+    /** Height of every face in the row, and of the counter — one of `Avatar`'s five sizes, `xs` through `xl`. */
+    size?: AvatarSize;
+    /** `circle` or `square`, forwarded to every face so the row reads as one shape. */
+    shape?: AvatarShape;
+    /** `default` or `accent`, for members that do not name their own — set it to `accent` for a row where every member uses the accent variant. */
+    variant?: AvatarVariant;
+    /** The group's accessible name: "Assignees", "Reviewers", "Members". */
+    label?: string;
+    /** The surface the row sits on, so the ring separating the faces matches what surrounds them. */
+    surface?: AvatarGroupSurface;
+    /**
+     * Names for the counter and for an accent member, as any subset of
+     * `AvatarGroupLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * The per-instance case is a row where "more" is the wrong word for what
+     * was left out: three reviewers, three members, three files.
+     */
+    labels?: LabelOverrides<AvatarGroupLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The members, in the order they are shown. The first is the one painted on top. */
+    avatars: AvatarGroupItem[];
+    /** How many faces render before the rest collapse into the counter. Values below 1 are treated as 1 — a row of nothing but "+5" identifies nobody. */
+    max?: number;
+    /** Height of every face in the row, and of the counter — one of `Avatar`'s five sizes, `xs` through `xl`. */
+    size?: AvatarSize;
+    /** `circle` or `square`, forwarded to every face so the row reads as one shape. */
+    shape?: AvatarShape;
+    /** `default` or `accent`, for members that do not name their own — set it to `accent` for a row where every member uses the accent variant. */
+    variant?: AvatarVariant;
+    /** The group's accessible name: "Assignees", "Reviewers", "Members". */
+    label?: string;
+    /** The surface the row sits on, so the ring separating the faces matches what surrounds them. */
+    surface?: AvatarGroupSurface;
+    /**
+     * Names for the counter and for an accent member, as any subset of
+     * `AvatarGroupLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * The per-instance case is a row where "more" is the wrong word for what
+     * was left out: three reviewers, three members, three files.
+     */
+    labels?: LabelOverrides<AvatarGroupLabels>;
+}> & Readonly<{}>, {
+    size: AvatarSize;
+    max: number;
+    variant: AvatarVariant;
+    shape: AvatarShape;
+    surface: AvatarGroupSurface;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=AvatarGroup.vue.d.ts.map

package/dist/packages/primitives/avatar-group/src/AvatarGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,144 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import Avatar_default from "../../avatar/src/Avatar.js";
+import "../../avatar/src/index.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref } from "vue";
+//#region packages/primitives/avatar-group/src/AvatarGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = { class: "sr-only" };
+var _hoisted_3 = { class: "sr-only" };
+/**
+
+/**
+* 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 AVATAR_GROUP_LABELS = {
+	overflow: ({ count }) => `${String(count)} more`,
+	accent: ({ name }) => name ? `${name}, Accent` : "Accent"
+};
+/**
+* How far each face tucks under the one before it — a quarter of its own width
+* at every size, so a row of `xs` avatars reads at the same density as a row of
+* `xl` ones. A fixed offset would look like a badly spaced flex row at the top
+* of the scale and swallow the initials at the bottom of it.
+*/
+var OVERLAP = {
+	xs: "-ml-1.5",
+	sm: "-ml-2",
+	md: "-ml-2.5",
+	lg: "-ml-3",
+	xl: "-ml-4"
+};
+/**
+* The ring that cuts each face out of the one it overlaps. Without it two
+* portraits of similar tone merge into one shape, so it is structural rather
+* than decorative — which is also why it has to be the colour of whatever
+* surrounds the row, something only the caller knows. The names are
+* Indicator's, for the same reason and with the same meaning.
+*/
+var SURFACE_RING = {
+	background: "ring-background",
+	card: "ring-card",
+	sunken: "ring-sunken",
+	popover: "ring-popover"
+};
+var AvatarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "AvatarGroup",
+	props: {
+		avatars: {},
+		max: { default: 4 },
+		size: { default: "md" },
+		shape: { default: "circle" },
+		variant: { default: "default" },
+		label: {},
+		surface: { default: "background" },
+		labels: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("avatarGroup", AVATAR_GROUP_LABELS, () => props.labels);
+		const { attrs, rest } = useSplitAttrs();
+		/**
+		* At least one face always renders. `max = 0` is the boundary that decides
+		* this: a group collapsed to nothing but "+5" has spent an avatar row saying
+		* only that some people exist, which is strictly less than one face and a
+		* count would have said.
+		*/
+		const shown = computed(() => props.avatars.slice(0, Math.max(1, Math.trunc(props.max))));
+		/** How many members the row did not have room for. Zero renders no counter at all. */
+		const hidden = computed(() => props.avatars.length - shown.value.length);
+		/** What the counter prints. `+3` is the layout; the sentence below is the information. */
+		const printed = computed(() => `+${String(hidden.value)}`);
+		const overlap = computed(() => OVERLAP[props.size]);
+		/** `ring-2` in the surface colour, on every face including the counter. */
+		const ring = computed(() => cn("ring-2", SURFACE_RING[props.surface]));
+		/**
+		* What a screen reader reads for one member. The accent qualifier is composed
+		* here rather than left to `Avatar`'s own hidden label, because the portrait
+		* inside each item is `aria-hidden` — the item says the name once, in one
+		* voice, whichever state the image is in.
+		*/
+		function memberName(item) {
+			const who = (item.alt ?? item.fallback ?? "").trim();
+			if ((item.variant ?? props.variant) !== "accent") return who;
+			return text.value.accent({ name: who });
+		}
+		return (_ctx, _cache) => {
+			return __props.avatars.length > 0 ? (openBlock(), createElementBlock("div", mergeProps({
+				key: 0,
+				role: "list",
+				"aria-label": __props.label
+			}, unref(rest), { class: unref(cn)("flex items-center", unref(attrs).class) }), [(openBlock(true), createElementBlock(Fragment, null, renderList(shown.value, (item, index) => {
+				return openBlock(), createElementBlock("span", {
+					key: `${String(index)}-${item.src ?? item.fallback ?? ""}`,
+					role: "listitem",
+					style: normalizeStyle({ zIndex: shown.value.length - index }),
+					class: normalizeClass(unref(cn)("relative", index > 0 && overlap.value))
+				}, [createVNode(unref(Avatar_default), mergeProps({
+					"aria-hidden": "true",
+					"accent-label": ""
+				}, { ref_for: true }, unref(optional)({
+					src: item.src,
+					alt: item.alt,
+					fallback: item.fallback
+				}), {
+					size: __props.size,
+					shape: __props.shape,
+					variant: item.variant ?? __props.variant,
+					class: ring.value
+				}), null, 16, [
+					"size",
+					"shape",
+					"variant",
+					"class"
+				]), createElementVNode("span", _hoisted_2, toDisplayString(memberName(item)), 1)], 6);
+			}), 128)), hidden.value > 0 ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				role: "listitem",
+				style: { zIndex: 0 },
+				class: normalizeClass(unref(cn)("relative", overlap.value))
+			}, [createVNode(unref(Avatar_default), {
+				"aria-hidden": "true",
+				fallback: printed.value,
+				size: __props.size,
+				shape: __props.shape,
+				class: normalizeClass(unref(cn)(ring.value, "bg-subtle text-subtle-foreground tabular"))
+			}, null, 8, [
+				"fallback",
+				"size",
+				"shape",
+				"class"
+			]), createElementVNode("span", _hoisted_3, toDisplayString(unref(text).overflow({ count: hidden.value })), 1)], 2)) : createCommentVNode("", true)], 16, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { AVATAR_GROUP_LABELS, AvatarGroup_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=AvatarGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/avatar-group/src/AvatarGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/avatar-group/src/AvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { AvatarGroupLabels } from \"@ecoma-io/loom-labels\";\nimport type { AvatarShape, AvatarSize, AvatarVariant } from \"@ecoma-io/loom-avatar\";\n\n/** One face in the row. */\nexport interface AvatarGroupItem {\n  /** Image URL. Omit it and this face renders `fallback` instead. */\n  src?: string;\n  /** Who this face is. It is what a screen reader reads for this member, whether or not the image ever loads — so it is the field to fill in even when there is no photo. */\n  alt?: string;\n  /** Initials shown while there is no image, or once one has failed. */\n  fallback?: string;\n  /** Which variant this member uses. Defaults to the group's own `variant`, so a row that mixes members states it per member and a row of one kind states it once. */\n  variant?: AvatarVariant;\n}\n\n/** The surface the row sits on, which the separating ring matches. */\nexport type AvatarGroupSurface = \"background\" | \"card\" | \"sunken\" | \"popover\";\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 AVATAR_GROUP_LABELS: AvatarGroupLabels = {\n  overflow: ({ count }) => `${String(count)} more`,\n  accent: ({ name }) => (name ? `${name}, Accent` : \"Accent\"),\n};\n\n/**\n * How far each face tucks under the one before it — a quarter of its own width\n * at every size, so a row of `xs` avatars reads at the same density as a row of\n * `xl` ones. A fixed offset would look like a badly spaced flex row at the top\n * of the scale and swallow the initials at the bottom of it.\n */\nconst OVERLAP = {\n  xs: \"-ml-1.5\",\n  sm: \"-ml-2\",\n  md: \"-ml-2.5\",\n  lg: \"-ml-3\",\n  xl: \"-ml-4\",\n} satisfies Record<AvatarSize, string>;\n\n/**\n * The ring that cuts each face out of the one it overlaps. Without it two\n * portraits of similar tone merge into one shape, so it is structural rather\n * than decorative — which is also why it has to be the colour of whatever\n * surrounds the row, something only the caller knows. The names are\n * Indicator's, for the same reason and with the same meaning.\n */\nconst SURFACE_RING = {\n  background: \"ring-background\",\n  card: \"ring-card\",\n  sunken: \"ring-sunken\",\n  popover: \"ring-popover\",\n} satisfies Record<AvatarGroupSurface, string>;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport Avatar from \"@ecoma-io/loom-avatar\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * AvatarGroup — the faces on one thing, overlapped into a single row: the\n * people assigned to a task, the agents on a run, the members of a workspace.\n * Past `max` of them the rest collapse into a counter, so the row's width is\n * bounded by the layout rather than by how many people happen to be involved.\n *\n * Reach for a plain `Avatar` when there is one subject, and for a real list of\n * rows when the reader needs to *act* on the members — a stack of overlapping\n * portraits is an at-a-glance summary, not a control. Nothing here is\n * focusable or clickable on purpose: the moment a face has to be pressable it\n * wants a row, a menu or a set of chips, each of which can carry a name and a\n * keyboard path that a 40px circle cannot.\n *\n * To a screen reader the row is one object — a labelled list of members ending\n * in \"3 more\" — rather than N unrelated images. Each face is announced by its\n * `alt` and nothing else: the portrait itself is hidden from assistive\n * technology and the name supplied beside it, which is what keeps the reading\n * identical whether the photo loaded, failed, or was never given.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The members, in the order they are shown. The first is the one painted on top. */\n    avatars: AvatarGroupItem[];\n    /** How many faces render before the rest collapse into the counter. Values below 1 are treated as 1 — a row of nothing but \"+5\" identifies nobody. */\n    max?: number;\n    /** Height of every face in the row, and of the counter — one of `Avatar`'s five sizes, `xs` through `xl`. */\n    size?: AvatarSize;\n    /** `circle` or `square`, forwarded to every face so the row reads as one shape. */\n    shape?: AvatarShape;\n    /** `default` or `accent`, for members that do not name their own — set it to `accent` for a row where every member uses the accent variant. */\n    variant?: AvatarVariant;\n    /** The group's accessible name: \"Assignees\", \"Reviewers\", \"Members\". */\n    label?: string;\n    /** The surface the row sits on, so the ring separating the faces matches what surrounds them. */\n    surface?: AvatarGroupSurface;\n    /**\n     * Names for the counter and for an accent member, as any subset of\n     * `AvatarGroupLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * The per-instance case is a row where \"more\" is the wrong word for what\n     * was left out: three reviewers, three members, three files.\n     */\n    labels?: LabelOverrides<AvatarGroupLabels>;\n  }>(),\n  {\n    max: 4,\n    size: \"md\",\n    shape: \"circle\",\n    variant: \"default\",\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(\"avatarGroup\", AVATAR_GROUP_LABELS, () => props.labels);\n\n// One rendered node, and it takes every fallthrough attribute — but `class`\n// goes through `cn()`, so a caller's `gap-1` can beat the row's own layout\n// utilities instead of tying with them on stylesheet order.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n/**\n * At least one face always renders. `max = 0` is the boundary that decides\n * this: a group collapsed to nothing but \"+5\" has spent an avatar row saying\n * only that some people exist, which is strictly less than one face and a\n * count would have said.\n */\nconst shown = computed(() => props.avatars.slice(0, Math.max(1, Math.trunc(props.max))));\n\n/** How many members the row did not have room for. Zero renders no counter at all. */\nconst hidden = computed(() => props.avatars.length - shown.value.length);\n\n/** What the counter prints. `+3` is the layout; the sentence below is the information. */\nconst printed = computed(() => `+${String(hidden.value)}`);\n\nconst overlap = computed(() => OVERLAP[props.size]);\n\n/** `ring-2` in the surface colour, on every face including the counter. */\nconst ring = computed(() => cn(\"ring-2\", SURFACE_RING[props.surface]));\n\n/**\n * What a screen reader reads for one member. The accent qualifier is composed\n * here rather than left to `Avatar`'s own hidden label, because the portrait\n * inside each item is `aria-hidden` — the item says the name once, in one\n * voice, whichever state the image is in.\n */\nfunction memberName(item: AvatarGroupItem): string {\n  const who = (item.alt ?? item.fallback ?? \"\").trim();\n  if ((item.variant ?? props.variant) !== \"accent\") return who;\n  return text.value.accent({ name: who });\n}\n</script>\n\n<template>\n  <!-- `role=\"list\"` on a div rather than a real `<ul>`, and the reason is the\n       page this is documented on. VitePress styles `.vp-doc li + li` with a top\n       margin and `.vp-doc ul` with a disc marker and a left indent, unlayered —\n       and unlayered CSS beats every Tailwind utility, which all live in\n       `@layer utilities`. A genuine list element here arrives bulleted, indented\n       and stepping 8px downhill per face. The roles are the semantics; the\n       elements were only ever carrying them.\n\n       The explicit attributes sit before `v-bind`, so a caller who names the\n       group with `aria-labelledby` instead of `label` keeps their own value\n       rather than having an unset prop overwrite it. -->\n  <div\n    v-if=\"avatars.length > 0\"\n    role=\"list\"\n    :aria-label=\"label\"\n    v-bind=\"rest\"\n    :class=\"cn('flex items-center', attrs.class as string)\"\n  >\n    <!-- The first face on top, each later one tucked under it. `z-index` is not\n         automatic on a flex row — painting order alone puts the *last* sibling\n         over its neighbours, which reads as a stack dealt backwards — and it\n         needs the positioned parent this span provides. -->\n    <span\n      v-for=\"(item, index) in shown\"\n      :key=\"`${String(index)}-${item.src ?? item.fallback ?? ''}`\"\n      role=\"listitem\"\n      :style=\"{ zIndex: shown.length - index }\"\n      :class=\"cn('relative', index > 0 && overlap)\"\n    >\n      <!-- `accent-label` is cleared because the item beside it has already\n           worked the qualifier into one name; left at its default the row would\n           carry two copies of the accent label per accent member. -->\n      <Avatar\n        aria-hidden=\"true\"\n        accent-label=\"\"\n        v-bind=\"optional({ src: item.src, alt: item.alt, fallback: item.fallback })\"\n        :size=\"size\"\n        :shape=\"shape\"\n        :variant=\"item.variant ?? variant\"\n        :class=\"ring\"\n      />\n      <span class=\"sr-only\">{{ memberName(item) }}</span>\n    </span>\n\n    <!-- The counter is a face-shaped tile rather than a shape of its own, so\n         the row keeps one rhythm: same size, same corner, same ring, and the\n         neutral well instead of a portrait's fill so it never reads as a\n         person. It sits under everything, at the back of the stack. -->\n    <span v-if=\"hidden > 0\" role=\"listitem\" :style=\"{ zIndex: 0 }\" :class=\"cn('relative', overlap)\">\n      <Avatar\n        aria-hidden=\"true\"\n        :fallback=\"printed\"\n        :size=\"size\"\n        :shape=\"shape\"\n        :class=\"cn(ring, 'bg-subtle text-subtle-foreground tabular')\"\n      />\n      <span class=\"sr-only\">{{ text.overflow({ count: hidden }) }}</span>\n    </span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,IAAa,sBAAyC;CACpD,WAAW,EAAE,YAAY,GAAG,OAAO,KAAK,EAAE;CAC1C,SAAS,EAAE,WAAY,OAAO,GAAG,KAAK,YAAY;AACpD;;;;;;;AAQA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;AASA,IAAM,eAAe;CACnB,YAAY;CACZ,MAAM;CACN,QAAQ;CACR,SAAS;AACX;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ;EAsCd,MAAM,OAAO,UAAU,eAAe,2BAA2B,MAAM,MAAM;EAM7E,MAAM,EAAE,OAAO,SAAS,cAAc;;;;;;;EAQtC,MAAM,QAAQ,eAAe,MAAM,QAAQ,MAAM,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,GAAG,CAAC,CAAC,CAAC;;EAGvF,MAAM,SAAS,eAAe,MAAM,QAAQ,SAAS,MAAM,MAAM,MAAM;;EAGvE,MAAM,UAAU,eAAe,IAAI,OAAO,OAAO,KAAK,GAAG;EAEzD,MAAM,UAAU,eAAe,QAAQ,MAAM,KAAK;;EAGlD,MAAM,OAAO,eAAe,GAAG,UAAU,aAAa,MAAM,QAAQ,CAAC;;;;;;;EAQrE,SAAS,WAAW,MAA+B;GACjD,MAAM,OAAO,KAAK,OAAO,KAAK,YAAY,GAAA,CAAI,KAAK;GACnD,KAAK,KAAK,WAAW,MAAM,aAAa,UAAU,OAAO;GACzD,OAAO,KAAK,MAAM,OAAO,EAAE,MAAM,IAAI,CAAC;EACxC;;GAgBU,OAAA,QAAA,QAAQ,SAAM,KADtB,UAAA,GAAA,mBA+CM,OA/CN,WA+CM;;IA7CJ,MAAK;IACJ,cAAY,QAAA;GACL,GAAA,MAAA,IAAA,GAAI,EACX,OAAO,MAAA,EAAA,CAAE,CAAA,qBAAsB,MAAA,KAAA,CAAK,CAAC,KAAK,EAAA,CAAA,GAAA,EAM3C,UAAA,IAAA,GAAA,mBAoBO,UAAA,MAAA,WAnBmB,MAAA,QAAhB,MAAM,UAAK;IADrB,OAAA,UAAA,GAAA,mBAoBO,QAAA;KAlBJ,KAAG,GAAK,OAAO,KAAK,EAAA,GAAK,KAAK,OAAO,KAAK,YAAQ;KACnD,MAAK;KACJ,OAAK,eAAA,EAAA,QAAY,MAAA,MAAM,SAAS,MAAK,CAAA;KACrC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,YAAa,QAAK,KAAQ,QAAA,KAAO,CAAA;IAK3C,GAAA,CAAA,YAQE,MAAA,cAAA,GARF,WAQE;KAPA,eAAY;KACZ,gBAAa;IACL,GAAA,EAAA,SAAA,KAAA,GAAA,MAAA,QAAA,CAAQ,CAAA;KAAA,KAAQ,KAAK;KAAG,KAAO,KAAK;KAAG,UAAY,KAAK;IAAQ,CAAA,GAAA;KACvE,MAAM,QAAA;KACN,OAAO,QAAA;KACP,SAAS,KAAK,WAAW,QAAA;KACzB,OAAO,KAAA;;;;;;IAEV,CAAA,GAAA,mBAAmD,QAAnD,YAAmD,gBAA1B,WAAW,IAAI,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA;GAO9B,CAAA,GAAA,GAAA,IAAA,OAAA,QAAM,KAAlB,UAAA,GAAA,mBASO,QAAA;;IATiB,MAAK;IAAY,OAAO,EAAA,QAAA,EAAA;IAAgB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,YAAa,QAAA,KAAO,CAAA;GAC3F,GAAA,CAAA,YAME,MAAA,cAAA,GAAA;IALA,eAAY;IACX,UAAU,QAAA;IACV,MAAM,QAAA;IACN,OAAO,QAAA;IACP,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAA,OAAI,0CAAA,CAAA;;;;;;GAEjB,CAAA,GAAA,mBAAmE,QAAnE,YAAmE,gBAA1C,MAAA,IAAA,CAAI,CAAC,SAAQ,EAAA,OAAU,OAAA,MAAM,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA"}

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

@@ -0,0 +1,4 @@
+export { default, AVATAR_GROUP_LABELS } from "./AvatarGroup.vue";
+export type { AvatarGroupItem, AvatarGroupSurface } from "./AvatarGroup.vue";
+export type { AvatarGroupLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,3 @@
+import { AVATAR_GROUP_LABELS } from "./AvatarGroup.vue_vue_type_script_setup_true_lang.js";
+import AvatarGroup_default from "./AvatarGroup.js";
+export { AVATAR_GROUP_LABELS, AvatarGroup_default as default };

package/dist/packages/primitives/badge/src/Badge.js

@@ -0,0 +1,7 @@
+import Badge_vue_vue_type_script_setup_true_lang_default, { badgeVariants } from "./Badge.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/badge/src/Badge.vue
+var Badge_default = Badge_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { badgeVariants, Badge_default as default };
+
+//# sourceMappingURL=Badge.js.map

package/dist/packages/primitives/badge/src/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../../../packages/primitives/badge/src/Badge.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Badge — small status / meta chip. The `accent` variant wears the accent\n * colour used to signal a second semantic category distinct from primary.\n */\nexport type BadgeVariant =\n  \"neutral\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | \"info\" | \"destructive\" | \"accent\";\n\nexport const badgeVariants = cva(\n  \"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors duration-fast\",\n  {\n    variants: {\n      variant: {\n        neutral: \"border-transparent bg-subtle text-subtle-foreground\",\n        outline: \"border-border bg-transparent text-muted-foreground\",\n        // The tinted washes use the opaque `*-muted` tokens, not an alpha of\n        // the base hue: `bg-*-/12` composites against the surface behind it, so\n        // the same badge renders at 4.46:1 on `bg-card` and differently on\n        // `bg-sunken` — under the AA floor and inconsistent. `*-muted` is mixed\n        // to hold ≥4.5:1 against its own `*-text` in both themes (see\n        // theme.css), which is what these variants were named for.\n        primary: \"border-transparent bg-primary-muted text-primary-text\",\n        success: \"border-transparent bg-success-muted text-success-text\",\n        // `-text`, not the bare `warning`: the tinted washes are mixed to hold\n        // their contrast against the `*-text` rung in both themes, and the\n        // base hue is not — on the dark `--color-warning` dropped to a\n        // mid-amber that washed out against its own muted fill.\n        warning: \"border-transparent bg-warning-muted text-warning-text\",\n        info: \"border-transparent bg-info-muted text-info-text\",\n        destructive: \"border-transparent bg-destructive-muted text-destructive-text\",\n        accent: \"border-accent/40 bg-accent-muted text-accent-text\",\n      } satisfies Record<BadgeVariant, string>,\n    },\n    defaultVariants: { variant: \"neutral\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Which status or meta this chip carries. `accent` is for signalling a second semantic category distinct from primary. */\n    variant?: BadgeVariant;\n  }>(),\n  { variant: \"neutral\" },\n);\n</script>\n\n<template>\n  <span :class=\"cn(badgeVariants({ variant }))\"><slot /></span>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/badge/src/Badge.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/badge/src/Badge.vue"],"names":[],"mappings":"AA+DA;;;GAGG;AACH,MAAM,MAAM,YAAY,GACtB,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC;AAEhG,eAAO,MAAM,aAAa;;8EA2BzB,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,2HAA2H;cACjH,YAAY;;IADtB,2HAA2H;cACjH,YAAY;;aAAZ,YAAY;;cAkCZ,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/badge/src/Badge.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,31 @@
+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/badge/src/Badge.vue?vue&type=script&setup=true&lang.ts
+var badgeVariants = cva("inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors duration-fast", {
+	variants: { variant: {
+		neutral: "border-transparent bg-subtle text-subtle-foreground",
+		outline: "border-border bg-transparent text-muted-foreground",
+		primary: "border-transparent bg-primary-muted text-primary-text",
+		success: "border-transparent bg-success-muted text-success-text",
+		warning: "border-transparent bg-warning-muted text-warning-text",
+		info: "border-transparent bg-info-muted text-info-text",
+		destructive: "border-transparent bg-destructive-muted text-destructive-text",
+		accent: "border-accent/40 bg-accent-muted text-accent-text"
+	} },
+	defaultVariants: { variant: "neutral" }
+});
+var Badge_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Badge",
+	props: { variant: { default: "neutral" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(unref(cn)(unref(badgeVariants)({ variant: __props.variant }))) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { badgeVariants, Badge_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Badge.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/badge/src/Badge.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/badge/src/Badge.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Badge — small status / meta chip. The `accent` variant wears the accent\n * colour used to signal a second semantic category distinct from primary.\n */\nexport type BadgeVariant =\n  \"neutral\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | \"info\" | \"destructive\" | \"accent\";\n\nexport const badgeVariants = cva(\n  \"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors duration-fast\",\n  {\n    variants: {\n      variant: {\n        neutral: \"border-transparent bg-subtle text-subtle-foreground\",\n        outline: \"border-border bg-transparent text-muted-foreground\",\n        // The tinted washes use the opaque `*-muted` tokens, not an alpha of\n        // the base hue: `bg-*-/12` composites against the surface behind it, so\n        // the same badge renders at 4.46:1 on `bg-card` and differently on\n        // `bg-sunken` — under the AA floor and inconsistent. `*-muted` is mixed\n        // to hold ≥4.5:1 against its own `*-text` in both themes (see\n        // theme.css), which is what these variants were named for.\n        primary: \"border-transparent bg-primary-muted text-primary-text\",\n        success: \"border-transparent bg-success-muted text-success-text\",\n        // `-text`, not the bare `warning`: the tinted washes are mixed to hold\n        // their contrast against the `*-text` rung in both themes, and the\n        // base hue is not — on the dark `--color-warning` dropped to a\n        // mid-amber that washed out against its own muted fill.\n        warning: \"border-transparent bg-warning-muted text-warning-text\",\n        info: \"border-transparent bg-info-muted text-info-text\",\n        destructive: \"border-transparent bg-destructive-muted text-destructive-text\",\n        accent: \"border-accent/40 bg-accent-muted text-accent-text\",\n      } satisfies Record<BadgeVariant, string>,\n    },\n    defaultVariants: { variant: \"neutral\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Which status or meta this chip carries. `accent` is for signalling a second semantic category distinct from primary. */\n    variant?: BadgeVariant;\n  }>(),\n  { variant: \"neutral\" },\n);\n</script>\n\n<template>\n  <span :class=\"cn(badgeVariants({ variant }))\"><slot /></span>\n</template>\n"],"mappings":";;;;;AAUA,IAAa,gBAAgB,IAC3B,sHACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EAOT,SAAS;EACT,SAAS;EAKT,SAAS;EACT,MAAM;EACN,aAAa;EACb,QAAQ;CACV,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;;;;;;GAgBE,OAAA,UAAA,GAAA,mBAA6D,QAAA,EAAtD,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,aAAA,CAAa,CAAA,EAAA,SAAG,QAAA,QAAO,CAAA,CAAA,CAAA,EAAA,GAAA,CAAM,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { badgeVariants } from "./Badge.vue_vue_type_script_setup_true_lang.js";
+import Badge_default from "./Badge.js";
+export { badgeVariants, Badge_default as default };

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.js

@@ -0,0 +1,7 @@
+import Breadcrumb_vue_vue_type_script_setup_true_lang_default, { BREADCRUMB_LABELS } from "./Breadcrumb.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/breadcrumb/src/Breadcrumb.vue
+var Breadcrumb_default = Breadcrumb_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { BREADCRUMB_LABELS, Breadcrumb_default as default };
+
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../../../../packages/primitives/breadcrumb/src/Breadcrumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { BreadcrumbLabels } from \"@ecoma-io/loom-labels\";\n\n/** The visible label text and optional link target for one step in the trail. */\nexport interface BreadcrumbItem {\n  /** The visible label text. */\n  label: string;\n  /** The link target. Omit for the current (last) item. */\n  href?: string;\n}\n\n/** Visual separators between breadcrumb steps. `chevron` renders an inline SVG. */\nexport type BreadcrumbSeparator = \"/\" | \"\\\\\" | \">\" | \"→\" | \"chevron\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it.\n */\nexport const BREADCRUMB_LABELS: BreadcrumbLabels = {\n  label: \"Breadcrumb\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Breadcrumb — a navigation trail showing the page's position in the site\n * hierarchy. The last item is always the current page (no href,\n * `aria-current=\"page\"`); items with an href render as links. Built without\n * Reka UI, which has no Breadcrumb primitive.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The breadcrumb trail, last item is the current page. */\n    items: BreadcrumbItem[];\n    /** Visual separator between items. `chevron` renders an inline SVG arrow. */\n    separator?: BreadcrumbSeparator;\n    /**\n     * Names for what this component says out loud, as any subset of\n     * `BreadcrumbLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the per-instance correction: a page that carries two trails —\n     * above and below an article, say — names each one for where it stands,\n     * which an application-wide vocabulary alone cannot do.\n     */\n    labels?: LabelOverrides<BreadcrumbLabels>;\n  }>(),\n  { separator: \"/\" },\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(\"breadcrumb\", BREADCRUMB_LABELS, () => props.labels);\n</script>\n\n<template>\n  <nav :aria-label=\"text.label\">\n    <ol class=\"flex items-center gap-1.5 text-sm\">\n      <template v-for=\"(item, index) in items\" :key=\"index\">\n        <li v-if=\"index > 0\" aria-hidden=\"true\" :class=\"cn('text-muted-foreground/50')\">\n          <svg\n            v-if=\"separator === 'chevron'\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\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          >\n            <path d=\"m9 18 6-6-6-6\" />\n          </svg>\n          <template v-else>{{ separator }}</template>\n        </li>\n\n        <!-- The last item is always the current page, regardless of href -->\n        <li v-if=\"index === items.length - 1\">\n          <span aria-current=\"page\" :class=\"cn('text-foreground font-medium')\">\n            {{ item.label }}\n          </span>\n        </li>\n        <li v-else>\n          <a\n            :href=\"item.href\"\n            :class=\"\n              cn(\n                'inline-flex min-h-6 items-center text-muted-foreground hover:text-foreground transition-colors duration-fast',\n              )\n            \"\n          >\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.vue.d.ts

@@ -0,0 +1,53 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { BreadcrumbLabels } from "../../../labels/src/index";
+/** The visible label text and optional link target for one step in the trail. */
+export interface BreadcrumbItem {
+    /** The visible label text. */
+    label: string;
+    /** The link target. Omit for the current (last) item. */
+    href?: string;
+}
+/** Visual separators between breadcrumb steps. `chevron` renders an inline SVG. */
+export type BreadcrumbSeparator = "/" | "\\" | ">" | "→" | "chevron";
+/**
+ * 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 rather than a transcription of it.
+ */
+export declare const BREADCRUMB_LABELS: BreadcrumbLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The breadcrumb trail, last item is the current page. */
+    items: BreadcrumbItem[];
+    /** Visual separator between items. `chevron` renders an inline SVG arrow. */
+    separator?: BreadcrumbSeparator;
+    /**
+     * Names for what this component says out loud, as any subset of
+     * `BreadcrumbLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction: a page that carries two trails —
+     * above and below an article, say — names each one for where it stands,
+     * which an application-wide vocabulary alone cannot do.
+     */
+    labels?: LabelOverrides<BreadcrumbLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The breadcrumb trail, last item is the current page. */
+    items: BreadcrumbItem[];
+    /** Visual separator between items. `chevron` renders an inline SVG arrow. */
+    separator?: BreadcrumbSeparator;
+    /**
+     * Names for what this component says out loud, as any subset of
+     * `BreadcrumbLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction: a page that carries two trails —
+     * above and below an article, say — names each one for where it stands,
+     * which an application-wide vocabulary alone cannot do.
+     */
+    labels?: LabelOverrides<BreadcrumbLabels>;
+}> & Readonly<{}>, {
+    separator: BreadcrumbSeparator;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=Breadcrumb.vue.d.ts.map

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,60 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref } from "vue";
+//#region packages/primitives/breadcrumb/src/Breadcrumb.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = { class: "flex items-center gap-1.5 text-sm" };
+var _hoisted_3 = {
+	key: 0,
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+};
+var _hoisted_4 = { key: 1 };
+var _hoisted_5 = { key: 2 };
+var _hoisted_6 = ["href"];
+/**
+* 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 rather than a transcription of it.
+*/
+var BREADCRUMB_LABELS = { label: "Breadcrumb" };
+var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Breadcrumb",
+	props: {
+		items: {},
+		separator: { default: "/" },
+		labels: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("breadcrumb", BREADCRUMB_LABELS, () => props.labels);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", { "aria-label": unref(text).label }, [createElementVNode("ol", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createElementBlock("li", {
+					key: 0,
+					"aria-hidden": "true",
+					class: normalizeClass(unref(cn)("text-muted-foreground/50"))
+				}, [__props.separator === "chevron" ? (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "m9 18 6-6-6-6" }, null, -1)])])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.separator), 1)], 64))], 2)) : createCommentVNode("", true), index === __props.items.length - 1 ? (openBlock(), createElementBlock("li", _hoisted_4, [createElementVNode("span", {
+					"aria-current": "page",
+					class: normalizeClass(unref(cn)("text-foreground font-medium"))
+				}, toDisplayString(item.label), 3)])) : (openBlock(), createElementBlock("li", _hoisted_5, [createElementVNode("a", {
+					href: item.href,
+					class: normalizeClass(unref(cn)("inline-flex min-h-6 items-center text-muted-foreground hover:text-foreground transition-colors duration-fast"))
+				}, toDisplayString(item.label), 11, _hoisted_6)]))], 64);
+			}), 128))])], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { BREADCRUMB_LABELS, Breadcrumb_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Breadcrumb.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/breadcrumb/src/Breadcrumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { BreadcrumbLabels } from \"@ecoma-io/loom-labels\";\n\n/** The visible label text and optional link target for one step in the trail. */\nexport interface BreadcrumbItem {\n  /** The visible label text. */\n  label: string;\n  /** The link target. Omit for the current (last) item. */\n  href?: string;\n}\n\n/** Visual separators between breadcrumb steps. `chevron` renders an inline SVG. */\nexport type BreadcrumbSeparator = \"/\" | \"\\\\\" | \">\" | \"→\" | \"chevron\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it.\n */\nexport const BREADCRUMB_LABELS: BreadcrumbLabels = {\n  label: \"Breadcrumb\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Breadcrumb — a navigation trail showing the page's position in the site\n * hierarchy. The last item is always the current page (no href,\n * `aria-current=\"page\"`); items with an href render as links. Built without\n * Reka UI, which has no Breadcrumb primitive.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The breadcrumb trail, last item is the current page. */\n    items: BreadcrumbItem[];\n    /** Visual separator between items. `chevron` renders an inline SVG arrow. */\n    separator?: BreadcrumbSeparator;\n    /**\n     * Names for what this component says out loud, as any subset of\n     * `BreadcrumbLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the per-instance correction: a page that carries two trails —\n     * above and below an article, say — names each one for where it stands,\n     * which an application-wide vocabulary alone cannot do.\n     */\n    labels?: LabelOverrides<BreadcrumbLabels>;\n  }>(),\n  { separator: \"/\" },\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(\"breadcrumb\", BREADCRUMB_LABELS, () => props.labels);\n</script>\n\n<template>\n  <nav :aria-label=\"text.label\">\n    <ol class=\"flex items-center gap-1.5 text-sm\">\n      <template v-for=\"(item, index) in items\" :key=\"index\">\n        <li v-if=\"index > 0\" aria-hidden=\"true\" :class=\"cn('text-muted-foreground/50')\">\n          <svg\n            v-if=\"separator === 'chevron'\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\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          >\n            <path d=\"m9 18 6-6-6-6\" />\n          </svg>\n          <template v-else>{{ separator }}</template>\n        </li>\n\n        <!-- The last item is always the current page, regardless of href -->\n        <li v-if=\"index === items.length - 1\">\n          <span aria-current=\"page\" :class=\"cn('text-foreground font-medium')\">\n            {{ item.label }}\n          </span>\n        </li>\n        <li v-else>\n          <a\n            :href=\"item.href\"\n            :class=\"\n              cn(\n                'inline-flex min-h-6 items-center text-muted-foreground hover:text-foreground transition-colors duration-fast',\n              )\n            \"\n          >\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAa,oBAAsC,EACjD,OAAO,aACT;;;;;;;;;EAaA,MAAM,QAAQ;EAuBd,MAAM,OAAO,UAAU,cAAc,yBAAyB,MAAM,MAAM;;GAIxE,OAAA,UAAA,GAAA,mBAyCM,OAAA,EAzCA,cAAY,MAAA,IAAA,CAAI,CAAC,MAAA,GAAA,CACrB,mBAuCK,MAvCL,YAuCK,EAtCH,UAAA,IAAA,GAAA,mBAqCW,UAAA,MAAA,WArCuB,QAAA,QAAhB,MAAM,UAAK;IAAkB,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,MAAK,GAAA,CACxC,QAAK,KAAf,UAAA,GAAA,mBAgBK,MAAA;;KAhBgB,eAAY;KAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,0BAAA,CAAA;IAExC,GAAA,CAAA,QAAA,cAAS,aADjB,UAAA,GAAA,mBAaM,OAbN,YAaM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAA0B,QAAA,EAApB,GAAE,gBAAe,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,MAEzB,UAAA,GAAA,mBAA2C,UAAA,EAAA,KAAA,EAAA,GAAA,CAAvB,gBAAA,gBAAA,QAAA,SAAS,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAIrB,UAAU,QAAA,MAAM,SAAM,KAAhC,UAAA,GAAA,mBAIK,MAAA,YAAA,CAHH,mBAEO,QAAA;KAFD,gBAAa;KAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,6BAAA,CAAA;IAC/B,GAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA,MAGjB,UAAA,GAAA,mBAWK,MAAA,YAAA,CAVH,mBASI,KAAA;KARD,MAAM,KAAK;KACX,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,8GAAA,CAAA;IAMtB,GAAA,gBAAA,KAAK,KAAK,GAAA,IAAA,UAAA,CAAA,CAAA,EAAA,GAAA,EAAA"}

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

@@ -0,0 +1,4 @@
+export { default, BREADCRUMB_LABELS } from "./Breadcrumb.vue";
+export type { BreadcrumbItem, BreadcrumbSeparator } from "./Breadcrumb.vue";
+export type { BreadcrumbLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,3 @@
+import { BREADCRUMB_LABELS } from "./Breadcrumb.vue_vue_type_script_setup_true_lang.js";
+import Breadcrumb_default from "./Breadcrumb.js";
+export { BREADCRUMB_LABELS, Breadcrumb_default as default };

package/dist/packages/primitives/button/src/Button.js

@@ -0,0 +1,7 @@
+import Button_vue_vue_type_script_setup_true_lang_default, { buttonVariantClasses, buttonVariants } from "./Button.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/button/src/Button.vue
+var Button_default = Button_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { buttonVariantClasses, buttonVariants, Button_default as default };
+
+//# sourceMappingURL=Button.js.map