@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/disclosure/faq/faq.module.css

@@ -0,0 +1,277 @@
+/*
+ * FAQ (§12.5): the §10.13 Ruled accordion with the Strong top rule, set as a
+ * content module. Parts: `base` (the section), `header`, `title`, `intro`,
+ * `list` (Accordion Root), `item`, `heading` (the h3), `trigger` (the row),
+ * `icon` (keyed only), `question`, `glyph` (the disclosure glyph, drawn
+ * by the Collapsible module), `openBar`, `panel`, `answer`, `contact`.
+ * Dense module: line semantics only, never a fill on the open item. Colors
+ * are role variables only; local custom properties carry dimensions only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. The trigger carries the
+ * question's type role so the glyph can align to its first line (1lh). */
+.title {
+  composes: typeH2 from '../../utils/type.module.css';
+}
+
+.intro {
+  composes: typeLead from '../../utils/type.module.css';
+}
+
+.trigger {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.answer {
+  composes: typeBody from '../../utils/type.module.css';
+}
+
+.contact {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.item {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    --faq-bar-inset: 0px;
+
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /* Chapter stack (§3.5 Recipe A): H2, then --fgd-space-stack to the first rule. */
+  .header {
+    display: grid;
+    gap: var(--size-px-5);
+    margin-block-end: var(--fgd-space-stack);
+  }
+
+  /* Section head in --role-heading; the item heads below are --primary12 [D60]. */
+  .title {
+    margin: 0;
+    color: var(--role-heading);
+  }
+
+  .intro {
+    margin: 0;
+    max-inline-size: var(--fgd-measure-reading);
+    color: var(--primary12);
+  }
+
+  .list {
+    margin: 0;
+  }
+
+  /* Rules: the first is the Strong top (--border-size-2 --primary12); the rest --role-rule, closing after the last. */
+  .item {
+    border-width: 0;
+    border-block-start-width: var(--border-size-1);
+    border-color: var(--role-rule);
+  }
+
+  .item:first-child {
+    border-block-start-width: var(--border-size-2);
+    border-block-start-color: var(--primary12);
+  }
+
+  .item:last-child {
+    border-block-end-width: var(--border-size-1);
+  }
+
+  .heading {
+    margin: 0;
+  }
+
+  /* The row: ≥ --fgd-size-control-xl tall, --size-px-3 vertical padding. */
+  .trigger {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-px-3);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--fgd-size-control-xl);
+    margin: 0;
+    padding-block: var(--size-px-3);
+    padding-inline: var(--faq-bar-inset) 0;
+    border: 0;
+    background: none;
+    color: var(--primary12);
+    text-align: start;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .question {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    text-wrap: balance;
+    /* The bare-text hover underline's color, weight and offset (§10.1) [D181]. */
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  /* Trailing, top-aligned to the question's first line; it swaps direction, never rotates [D109]. */
+  .glyph {
+    flex: none;
+    margin-block: calc((1lh - var(--size-px-4)) / 2);
+  }
+
+  /* The optional open bar: a --border-size-2-25 line at the row's start edge, shown under `barred`. */
+  .openBar {
+    display: none;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-inline-start: var(--border-size-2-25) solid var(--primary12);
+  }
+
+  /* The §10.13 clip reveal [D91]: the panel's edge wipes open; never a fade. */
+  .panel {
+    block-size: var(--accordion-panel-height);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  /* Answers: text serif within the reading measure; --size-px-2-5 below the question, --size-px-5 below. */
+  .answer {
+    max-inline-size: var(--fgd-measure-reading);
+    padding-block: 0 var(--size-px-5);
+    padding-inline-start: var(--faq-bar-inset);
+    color: var(--primary12);
+  }
+
+  .contact {
+    margin: var(--size-px-5) 0 0;
+    color: var(--primary12);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .panel {
+      transition-property: block-size;
+      transition-duration: var(--fgd-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    /* Hover transition [D181]: --fgd-duration-quick, --ease-out-3. */
+    .question {
+      transition-property: text-decoration-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Ruled (default) and split rows are bare: no leading icon. */
+  .ruled .icon,
+  .split .icon {
+    display: none;
+  }
+
+  /* Keyed detail: a leading block icon per row; answers indent to the question column. */
+  .keyed .icon {
+    margin-block: calc((1lh - var(--fgd-size-icon-block)) / 2);
+    color: var(--primary12);
+  }
+
+  .keyed .answer {
+    padding-inline-start: calc(var(--faq-bar-inset) + var(--fgd-size-icon-block) + var(--size-px-3));
+  }
+
+  /* Barred: every row keeps the bar's inset, so questions stay aligned open or closed. */
+  .barred {
+    --faq-bar-inset: var(--size-px-2-5);
+  }
+
+  /* Split (§12.5): a page-grid placement from --lg-n-above, header in 4 of 12 columns, the list in 8. */
+  @media (min-width: 1024px) {
+    .split {
+      display: grid;
+      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
+      column-gap: var(--fgd-space-margin);
+      align-items: start;
+    }
+
+    .split .header {
+      grid-column: 1;
+      grid-row: 1 / span 2;
+      margin-block-end: 0;
+    }
+
+    .split .list,
+    .split .contact {
+      grid-column: 2;
+    }
+  }
+}
+
+@layer states {
+  /* Expanded: the question-to-answer gap closes to --size-px-2-5. */
+  .trigger[data-panel-open] {
+    padding-block-end: var(--size-px-2-5);
+  }
+
+  .barred .trigger[data-panel-open] .openBar {
+    display: block;
+  }
+
+  /*
+   * Hover: the question takes the bare-text underline, --role-accent at
+   * --border-size-2, offset --size-px-1; the glyph does not change
+   * (§12.5, §10.13) [D109, D181].
+   */
+  .trigger:not([data-disabled]):hover .question {
+    text-decoration-line: underline;
+  }
+
+  /* Focus: the ring around the row, inset --border-size-2 from the rules. */
+  .trigger:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-2 * var(--border-size-2));
+  }
+
+  .panel[data-starting-style],
+  .panel[data-ending-style] {
+    block-size: 0;
+  }
+}
+
+@layer print {
+  @media print {
+    /* All answers print expanded; glyphs and the open bar hide; each pair stays together (§12.5). */
+    .glyph,
+    .openBar,
+    .barred .trigger[data-panel-open] .openBar {
+      display: none;
+    }
+
+    .item {
+      break-inside: avoid;
+    }
+
+    .trigger,
+    .trigger[data-panel-open] {
+      min-block-size: 0;
+      padding-block-end: var(--size-px-2-5);
+    }
+
+    .panel,
+    .panel[data-starting-style],
+    .panel[data-ending-style] {
+      block-size: auto;
+      overflow: visible;
+    }
+
+    .panel[hidden] {
+      display: block;
+      content-visibility: visible;
+    }
+  }
+}

package/disclosure/faq/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/disclosure/faq/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA"}

package/disclosure/faq/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/disclosure/faq/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA"}

package/feedback/alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/feedback/alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAA2C,KAAK,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAmB9F,QAAA,MAAM,KAAK;;;8EAMT,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAA;AAEhC,yGAAyG;AACzG,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GACrE,YAAY,CAAC,OAAO,KAAK,CAAC,GAAG;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,kFAAkF;IAClF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,sFAAsF;IACtF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAEH;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,iFAwDtC"}

package/feedback/alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/feedback/alert/Alert.tsx"],"names":[],"mappings":"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"}

package/feedback/alert/alert.module.css

@@ -0,0 +1,99 @@
+/*
+ * Alert: the inline status block (§10.20) [D110]. On the page ground, never a
+ * tinted panel: a --border-size-2-25 start bar and the glyph in --role-status, a
+ * type-runin word lead, the message in type-body-ui --primary12, padding
+ * --size-px-3 from the bar. The secondary is the status scale, so
+ * --role-status resolves to --secondary11 (--primary12 on saturated grounds,
+ * --secondary12 on brick) without the module reading the scope [D141, D155].
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.base {
+  composes: typeBodyUi from '../../utils/type.module.css';
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+.lead {
+  composes: typeRunin from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* The start bar (part `bar`) is the root's inline-start border, so it spans the block and prints as a rule. */
+  .base {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    column-gap: var(--size-px-2);
+    row-gap: var(--size-px-2-5);
+    border-width: 0;
+    border-inline-start-width: var(--border-size-2-25);
+    border-inline-start-color: var(--role-status);
+    padding-inline-start: var(--size-px-3);
+    color: var(--primary12);
+  }
+
+  /*
+   * Custom §1.5.4 glyph at the tag tier: the shape and inner mark in
+   * --role-status (currentColor), knockouts and the outline disc in
+   * --role-status-fill. One line box tall so it sits on the first line.
+   */
+  .glyph {
+    grid-column: 1;
+    grid-row: 1;
+    display: block;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    block-size: 1lh;
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--border-size-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .message {
+    grid-column: 2;
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /* The status word: --primary12, or the status scale's step 12 on brick [D173]. */
+  .lead {
+    color: var(--role-status-text);
+  }
+
+  .action {
+    grid-column: 2;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-px-2);
+  }
+
+  /* Forced colors: keep the shape and its knockout mark legible. */
+  @media (forced-colors: active) {
+    .glyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* A failed module prints its status line; the glyph and bar print black through the remap. */
+    .base {
+      break-inside: avoid;
+    }
+
+    .action {
+      display: none;
+    }
+  }
+}

package/feedback/alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feedback/alert/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/feedback/alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/feedback/alert/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/feedback/avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/feedback/avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,OAAO,EAA2C,KAAK,MAAM,EAAE,MAAM,yBAAyB,CAAA;AA6B9F,eAAO,MAAM,MAAM;;;;8EAgBjB,CAAA;AAEF,+BAA+B;AAC/B,eAAO,MAAM,YAAY,oFAAqB,CAAA;AAE9C,2DAA2D;AAC3D,eAAO,MAAM,WAAW;;;;8EAetB,CAAA;AAEF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAA;AACjD,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;AAQ5D,gFAAgF;AAChF,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,GAAG;IAChD;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC,gFAAgF;IAChF,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;CACxC,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAaxC;AAED,yDAAyD;AACzD,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAA;AAErD,qEAAqE;AACrE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAQlD;AAED,+DAA+D;AAC/D,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAA;AAE3D;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAYxD;AAED,qEAAqE;AACrE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,wEAAwE;IACxE,MAAM,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAkBpD;AAED,4FAA4F;AAC5F,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/D,uDAAuD;IACvD,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC,gFAAgF;IAChF,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACvC,yEAAyE;IACzE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACtC,CAAA;AAID;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,0EA4DlD"}

package/feedback/avatar/Avatar.js

@@ -0,0 +1,154 @@
+'use client';
+import * as React from 'react';
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../../foundations/ground';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { StatusGlyph, statusLabels, statusScales } from '../../utils/StatusGlyph';
+import styles from './avatar.module.css';
+import groupStyles from './avatar-group.module.css';
+/*
+ * Avatar (§10.12): a person or organization beside a byline, comment,
+ * member list or account menu.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: avatar.module.css (`avatar`, `avatarStatus`);
+ *   avatar-group.module.css (`avatarGroup`, the composed group).
+ * - Axes: `size` → xs | sm | md | lg | xl (24 / 32 / 40 / 64 / 128 px; each
+ *   sets --avatar-size, the ring weight and the initials size) [D155];
+ *   `primary`, `secondary` → scales module classes (`secondary` unused).
+ * - Compound variants: none.
+ * - Defaults: size md; color axes: none.
+ * - Color fallback: inherits the scope. The status part: the status scale of
+ *   its `status` [D129].
+ * - States: the Fallback renders while the Image is loading or failed (Base
+ *   UI's loading status; the Root sets no attribute) → the initials face; as
+ *   a link or menu trigger, the element's `:hover` → a ring up to 40 px
+ *   steps --role-rule → --primary12 at the same weight, unchanged from
+ *   64 px [D181], and `:focus-visible` → ring outside the frame.
+ * - Parts: base (frame and ring), image, fallback (initials), status (with
+ *   `statusGlyph`); Avatar Group base, item, more.
+ * - Scope: `fallback` and the `status` disc are nested face scopes (the
+ *   white preset; light islands on dark grounds); otherwise none.
+ * - Container: none; inherits its context.
+ */
+export const avatar = cva(styles.base, {
+    variants: {
+        size: {
+            xs: styles.xs,
+            sm: styles.sm,
+            md: styles.md,
+            lg: styles.lg,
+            xl: styles.xl,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+/** The status disc's class. */
+export const avatarStatus = cva(styles.status);
+/** The group's classes: its size publishes the overlap. */
+export const avatarGroup = cva(groupStyles.base, {
+    variants: {
+        size: {
+            xs: groupStyles.xs,
+            sm: groupStyles.sm,
+            md: groupStyles.md,
+            lg: groupStyles.lg,
+            xl: groupStyles.xl,
+        },
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+/** The initials face and status disc: nested white faces that read the same on every ground. */
+const FACE_PRESET = 'white';
+/** A group's size, inherited by its avatars. */
+const AvatarSizeContext = React.createContext(undefined);
+/**
+ * The circular frame and its ring. Compose `AvatarImage` (a photo or a
+ * seal), `AvatarFallback` (1–2 initials, shown until the image loads or if
+ * it fails) and an optional `AvatarStatus`. Give the image alt text with the
+ * name, or empty alt when the name is adjacent. As a link or menu trigger,
+ * wrap it (or pass `render`): on hover a ring up to 40 px steps to
+ * `--primary12` at the same weight.
+ */
+export function Avatar(props) {
+    const { size, primary, secondary, className, ...rest } = props;
+    const groupSize = React.useContext(AvatarSizeContext);
+    const scope = useScopeAttributes();
+    return (React.createElement(BaseAvatar.Root, { ...rest, ...scope, className: resolveClassName(className, (extra) => avatar({ size: size ?? groupSize, primary, secondary, className: extra })) }));
+}
+/** The photo or seal, cropped to the circle. Prints in grayscale. */
+export function AvatarImage(props) {
+    const { className, ...rest } = props;
+    return (React.createElement(BaseAvatar.Image, { ...rest, className: resolveClassName(className, (extra) => cx(styles.image, extra)) }));
+}
+/**
+ * The initials face: a nested white face (`--primary1`) with 1–2 caps
+ * initials in the UI sans at weight 700 and `--primary12`, the same on every
+ * ground. Never color-code initials backgrounds.
+ */
+export function AvatarFallback(props) {
+    const { className, children, delay, ...rest } = props;
+    return (React.createElement(Ground, { kind: "face", preset: FACE_PRESET, render: React.createElement(BaseAvatar.Fallback, { delay: delay, ...rest }), className: typeof className === 'string' ? cx(styles.fallback, className) : styles.fallback }, children));
+}
+/**
+ * The status glyph (§1.5.4, with its inner mark) on its own white disc at
+ * the frame's bottom end, `--size-px-3`, in `--role-status` of its status
+ * scale.
+ */
+export function AvatarStatus(props) {
+    const { status, label, className, ...rest } = props;
+    return (React.createElement(Ground, { ...rest, kind: "face", preset: FACE_PRESET, secondary: statusScales[status], render: React.createElement("span", null), className: avatarStatus({ className }) },
+        React.createElement(StatusGlyph, { status: status, label: label ?? statusLabels[status], className: styles.statusGlyph })));
+}
+const defaultMoreLabel = (count) => `${count} more`;
+/**
+ * Overlapping avatars (−25%) separated by a `--size-px-1` ring in
+ * `--role-halo`, ending in a "+N" initials avatar: 3 avatars at base, up to
+ * 5 from 1024 px.
+ */
+export function AvatarGroup(props) {
+    const { render, ref, className, size, total, primary, secondary, moreLabel = defaultMoreLabel, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const resolvedSize = size ?? 'md';
+    const avatars = React.Children.toArray(children).filter(React.isValidElement);
+    const shown = avatars.slice(0, 5);
+    const count = Math.max(total ?? avatars.length, avatars.length);
+    const moreBase = count - Math.min(3, shown.length);
+    const moreWide = count - shown.length;
+    const more = (n, visibility) => (React.createElement("span", { key: `more-${visibility ?? 'all'}`, className: cx(groupStyles.item, visibility) },
+        React.createElement(Avatar, { size: resolvedSize, role: "img", "aria-label": moreLabel(n), className: groupStyles.more },
+            React.createElement(AvatarFallback, { "aria-hidden": "true" },
+                "+",
+                n))));
+    const content = (React.createElement(AvatarSizeContext.Provider, { value: resolvedSize },
+        shown.map((child, index) => (React.createElement("span", { key: child.key ?? index, className: index >= 3 ? cx(groupStyles.item, groupStyles.extra) : groupStyles.item }, child))),
+        moreBase > 0 && moreBase === moreWide ? more(moreBase) : null,
+        moreBase > 0 && moreBase !== moreWide ? more(moreBase, groupStyles.moreBase) : null,
+        moreWide > 0 && moreBase !== moreWide ? more(moreWide, groupStyles.moreWide) : null));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            role: 'group',
+            className: avatarGroup({ size: resolvedSize, primary, secondary, className }),
+            children: content,
+        }, rest),
+    });
+}
+//# sourceMappingURL=Avatar.js.map

package/feedback/avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/feedback/avatar/Avatar.tsx"],"names":[],"mappings":"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"}

package/feedback/avatar/avatar-group.module.css

@@ -0,0 +1,72 @@
+/*
+ * Avatar Group (§10.12). Parts: `base` (the row), `item` (each avatar's
+ * --role-halo ring, a --size-px-1 halo-colored clearance), `more` (the
+ * "+N" initials avatar). Overlap −25% of the diameter. 3 avatars at base,
+ * up to 5 from --lg-n-above. Local custom properties carry dimensions only:
+ *   --avatar-group-size  the avatars' diameter, from the size class
+ */
+
+@layer base {
+  .base {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    max-inline-size: 100%;
+  }
+
+  /* The separation ring: --role-halo (--primary1 in every scope and mode) [D150]. */
+  .item {
+    display: inline-flex;
+    flex: none;
+    padding: var(--size-px-1);
+    border-radius: var(--radius-round);
+    background-color: var(--role-halo);
+  }
+
+  .item + .item {
+    margin-inline-start: calc(-0.25 * var(--avatar-group-size) - 2 * var(--size-px-1));
+  }
+
+  .more {
+    cursor: default;
+  }
+
+  /* 3 plus "+N" at base; up to 5 from --lg-n-above, each tier with its own count. */
+  .extra,
+  .moreWide {
+    display: none;
+  }
+
+  @media (min-width: 1024px) {
+    .extra,
+    .moreWide {
+      display: inline-flex;
+    }
+
+    .moreBase {
+      display: none;
+    }
+  }
+}
+
+@layer variants {
+  .xs {
+    --avatar-group-size: var(--size-px-5);
+  }
+
+  .sm {
+    --avatar-group-size: var(--size-px-7);
+  }
+
+  .md {
+    --avatar-group-size: var(--fgd-size-control-md);
+  }
+
+  .lg {
+    --avatar-group-size: var(--size-px-9);
+  }
+
+  .xl {
+    --avatar-group-size: var(--fgd-size-avatar-xl);
+  }
+}