@slotted/styles 0.0.0-stage → 0.1.0-beta.0

package/src/avatar/avatar.tokens.json

@@ -0,0 +1,64 @@
+[
+  "--slotted-avatar-border-width",
+  "--slotted-avatar-disabled-image-filter",
+  "--slotted-avatar-elevation",
+  "--slotted-avatar-font-family",
+  "--slotted-avatar-font-weight",
+  "--slotted-avatar-glyph-size",
+  "--slotted-avatar-initials-size",
+  "--slotted-avatar-radius",
+  "--slotted-avatar-ring-color",
+  "--slotted-avatar-ring-width",
+  "--slotted-avatar-size",
+  "--slotted-avatar-size-lg",
+  "--slotted-avatar-size-md",
+  "--slotted-avatar-size-sm",
+  "--slotted-avatar-size-xl",
+  "--slotted-avatar-size-xs",
+  "--slotted-avatar-state-layer-active",
+  "--slotted-avatar-state-layer-hover",
+  "--slotted-border-strong",
+  "--slotted-border-subtle",
+  "--slotted-border-width-thick",
+  "--slotted-border-width-thin",
+  "--slotted-control-font-family",
+  "--slotted-disabled-background",
+  "--slotted-disabled-border",
+  "--slotted-disabled-foreground",
+  "--slotted-duration-short",
+  "--slotted-easing-enter",
+  "--slotted-easing-exit",
+  "--slotted-easing-standard",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-offset",
+  "--slotted-focus-ring-width",
+  "--slotted-font-weight-medium",
+  "--slotted-radius-full",
+  "--slotted-surface",
+  "--slotted-target-min",
+  "--slotted-tone-accent-border",
+  "--slotted-tone-accent-on-solid",
+  "--slotted-tone-accent-solid",
+  "--slotted-tone-accent-surface",
+  "--slotted-tone-accent-text",
+  "--slotted-tone-danger-border",
+  "--slotted-tone-danger-on-solid",
+  "--slotted-tone-danger-solid",
+  "--slotted-tone-danger-surface",
+  "--slotted-tone-danger-text",
+  "--slotted-tone-secondary-border",
+  "--slotted-tone-secondary-on-solid",
+  "--slotted-tone-secondary-solid-hover",
+  "--slotted-tone-secondary-surface",
+  "--slotted-tone-secondary-text",
+  "--slotted-tone-success-border",
+  "--slotted-tone-success-on-solid",
+  "--slotted-tone-success-solid",
+  "--slotted-tone-success-surface",
+  "--slotted-tone-success-text",
+  "--slotted-tone-warning-border",
+  "--slotted-tone-warning-on-solid",
+  "--slotted-tone-warning-solid",
+  "--slotted-tone-warning-surface",
+  "--slotted-tone-warning-text"
+]

package/src/avatar-group/avatar-group.css

@@ -0,0 +1,268 @@
+@layer slotted.components {
+  /**
+   * ── The group ──────────────────────────────────────────────────────────
+   *
+   * A list of faces, overlapped or apart, ending in a summary of the ones it
+   * does not show. It is a family rather than a part of `avatar` for the reason
+   * `button-group` is one: it owns a different element, a different set of
+   * decisions, and a member it does not have to be.
+   *
+   * It is a real `<ul>`, so a screen reader announces a list of N without the
+   * family inventing a role. The label is the consumer's `aria-label`, which is
+   * the decision `button-group` already took for the same question: a second
+   * way to name one thing is a second thing to get wrong.
+   */
+  [data-ui='avatar-group'][data-part='root'] {
+    /**
+     * How much of a member the next one covers, as a fraction of its own box.
+     * A proportion rather than a step of the space scale, because what has to
+     * stay constant is the amount of face that remains visible: at 0.28 the
+     * leading 72 per cent of every avatar is showing, at every size and at
+     * every density.
+     *
+     * The references sit either side of it: ReUI covers 0.25 of a 32-pixel
+     * avatar, 0.33 of a 24 and 0.20 of a 20 (the 2026-09-29 dossier), MUI
+     * eight pixels of forty. The covering is rounded to the pixel where it is
+     * used, below.
+     */
+    --_overlap: var(--slotted-avatar-group-overlap, 0.28);
+
+    /**
+     * The size is restated here as well as reaching every member through the
+     * defaults each binding provides. The member needs it to scale its own type
+     * and glyph; the group needs it as a number, to work out an overlap that no
+     * child can compute for its parent.
+     */
+    --_size: var(--slotted-avatar-size, var(--slotted-avatar-size-md, 36px));
+
+    /**
+     * ── What a raised member is raised by ──────────────────────────────────
+     *
+     * Three values, stated on the group and read by the two rules below, so the
+     * raise is written once and the reduced-motion answer is a redefinition
+     * rather than a second copy of the rule.
+     *
+     * The lift is the motion: four pixels up, which is a face leaning towards
+     * the pointer. The ring and the shadow are not motion — the ring is what
+     * separates the raised face from the ones it now covers, and the shadow is
+     * what says which of them is in front — so both survive a reader who asked
+     * for stillness.
+     *
+     * It was two pixels and six per cent out until R7. An avatar carries its
+     * member's initials when there is no photograph, and six per cent on a box
+     * of letters resamples them for the length of the movement; the step that
+     * replaces it is the one the raise already spoke in, taken one further, so
+     * the face still leaves the row it is in. What the growth added — *this
+     * one is in front* — is already said twice over, by the ring and by the
+     * shadow under it. `packages/styles/src/text-scale.test.mjs` holds the
+     * rule.
+     */
+    --_raise-lift: calc(
+      var(--slotted-avatar-group-raise-lift, var(--slotted-space-2, 0.25rem)) * -1
+    );
+    --_raise-ring: var(--slotted-border-width-thick, 2px);
+    --_raise-shadow: var(--slotted-shadow-sm);
+
+    align-items: center;
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  /**
+   * An actions row built from a permission filter renders an empty group often,
+   * and an empty box still eats a gap in the row that holds it, so the row
+   * beside it drifts for a reason nobody can see in the markup. The same
+   * decision `button-group` took.
+   */
+  [data-ui='avatar-group'][data-part='root']:empty {
+    display: none;
+  }
+
+  [data-ui='avatar-group'] [data-part='item'],
+  [data-ui='avatar-group'] [data-part='overflow'] {
+    display: flex;
+    /* Not a stacking context: `z-index` stays `auto` so a member raised on
+       hover rises above its neighbours rather than only inside its own item. */
+    position: relative;
+  }
+
+  /**
+   * The member lists what it transitions; the group states only the curve, so
+   * nothing the avatar crosses is dropped inside a stack. A face leaving the
+   * row rises on the entering curve and settles back on the exiting one: the
+   * curve of the state it arrives at, which is why the rest rule carries the
+   * exit.
+   */
+  [data-ui='avatar-group'][data-part='root'][data-layout='stack']
+    [data-ui='avatar'][data-part='root'] {
+    transition-timing-function: var(--slotted-easing-exit);
+  }
+
+  /* ── Size ─────────────────────────────────────────────────────────────── */
+
+  [data-ui='avatar-group'][data-part='root'][data-size='xs'] {
+    --slotted-avatar-size: var(--slotted-avatar-size-xs, 24px);
+  }
+
+  [data-ui='avatar-group'][data-part='root'][data-size='sm'] {
+    --slotted-avatar-size: var(--slotted-avatar-size-sm, 28px);
+  }
+
+  [data-ui='avatar-group'][data-part='root'][data-size='md'] {
+    --slotted-avatar-size: var(--slotted-avatar-size-md, 36px);
+  }
+
+  [data-ui='avatar-group'][data-part='root'][data-size='lg'] {
+    --slotted-avatar-size: var(--slotted-avatar-size-lg, 48px);
+  }
+
+  [data-ui='avatar-group'][data-part='root'][data-size='xl'] {
+    --slotted-avatar-size: var(--slotted-avatar-size-xl, 64px);
+  }
+
+  /* ── Layout ───────────────────────────────────────────────────────────── */
+
+  /**
+   * The overlapped run. A negative logical inset, so a right-to-left document
+   * gets the same component mirrored rather than a second stylesheet — which is
+   * what Ant, MUI, Chakra and Primer all need, because all four write `margin-left`.
+   *
+   * Members are not wrapped: a stack that broke across two lines would leave
+   * the last face of the first line overlapping nothing.
+   */
+  [data-ui='avatar-group'][data-part='root'][data-layout='stack'] {
+    flex-wrap: nowrap;
+  }
+
+  /**
+   * The avatar owns its own one-pixel edge. The group only controls the overlap,
+   * so the stack has one curve per face instead of a second thick ring layered
+   * over every member.
+   */
+  [data-ui='avatar-group'][data-part='root'][data-layout='stack'] > * + * {
+    /* Whole pixels: 0.28 of 36 is 10.08, which left every member after the
+       first on a fractional x (50.92, 76.84, 102.77) and softened its edge. */
+    margin-inline-start: calc(round(nearest, calc(var(--_size) * var(--_overlap)), 1px) * -1);
+  }
+
+  /**
+   * The separated run. It wraps, because a row of eight faces at 420 pixels has
+   * to go somewhere, and a group laid out apart has no stacking order to lose
+   * by breaking.
+   */
+  [data-ui='avatar-group'][data-part='root'][data-layout='spread'] {
+    flex-wrap: wrap;
+    /**
+     * A step of the space scale rather than a proportion of the avatar, because
+     * separation between two components is a layout rhythm and the space scale
+     * is where this library keeps those — the decision `button-group` recorded
+     * for the gap between two buttons. Cost: a row of extra-large avatars is
+     * proportionally tighter than a row of small ones.
+     */
+    gap: var(--slotted-space-4, 0.5rem);
+  }
+
+  /* ── The member under the pointer, or under the caret ─────────────────── */
+
+  /**
+   * In a stack every member covers the trailing edge of the one before it, so a
+   * focus ring drawn on any but the last would be half-hidden under its
+   * neighbour. Raising the member is the whole feedback, and it is instant: a
+   * change of stacking order that took two hundred milliseconds would leave the
+   * avatar behind its neighbour for most of the time the pointer is on it.
+   *
+   * A weak state held back for the stronger one: a disabled member does not
+   * rise, which is the rule `packages/styles/src/states.test.mjs` keeps.
+   */
+  /**
+   * The member under the pointer, and the three things that raise it.
+   *
+   * Order of stacking first: the raise is only legible while the face is in
+   * front of the ones it overlaps, and `z-index` is what puts it there.
+   *
+   * Then the ring, which is the avatar's own — the one it keeps at nought until
+   * something it overlaps asks for it, in the surface colour it already
+   * defaults to. A stack draws every member over the trailing edge of the one
+   * before it, so a raised face has a neighbour's picture against its own edge
+   * on one side, and a ring of the surface is the gap that edge would have had
+   * if nothing were behind it. It is that token and not an `outline`: R3 gives
+   * the outline of every family to the focus ring, and a separation ring drawn
+   * as one would be a second thing painted where focus belongs. The ring is
+   * only asked for while the pointer is on the member, which is why the group's
+   * resting rule still states none (`avatar-group.styles.test.mjs`).
+   *
+   * Then the elevation, which is what separates a member that is in front from
+   * one that merely overlaps: two flat discs at different stacking orders read
+   * as a single shape, and a shadow under one of them reads as a face lifted
+   * off the row. It reaches the avatar as its own elevation token, so the two
+   * rings and the shadow are one `box-shadow` written by the family that owns
+   * the box rather than a second one overwriting it (AG1).
+   *
+   * Then the movement: four pixels towards the reader. The
+   * neighbours do not move, because neither a transform nor a shadow is layout
+   * — measured in `tools/harness/out/review-loop/ag1/raise.mjs`, both
+   * neighbours keep the box they had at rest, in three schemes and three
+   * densities.
+   */
+  [data-ui='avatar-group'][data-layout='stack']
+    [data-ui='avatar'][data-part='root']:not([data-disabled]):hover {
+    --slotted-avatar-ring-width: var(--_raise-ring);
+    --slotted-avatar-elevation: var(--_raise-shadow);
+
+    z-index: 1;
+    transform: translateY(var(--_raise-lift));
+    transition-timing-function: var(--slotted-easing-enter);
+  }
+
+  [data-ui='avatar-group'][data-layout='stack'] [data-ui='avatar'][data-part='root']:focus-visible {
+    z-index: 1;
+    transform: translateY(var(--_raise-lift));
+    transition-timing-function: var(--slotted-easing-enter);
+  }
+
+  /**
+   * The press settles the raised face halfway back into the row. It is a
+   * translate and not a scale for the reason the lift is (R7), and it is a
+   * different answer from the hover, which is the whole point of a press.
+   */
+  [data-ui='avatar-group'][data-layout='stack']
+    [data-ui='avatar'][data-part='root']:not([data-disabled]):active {
+    transform: translateY(calc(var(--_raise-lift) / 2));
+  }
+
+  /**
+   * Stillness keeps the answer and drops the movement: the stacking order and
+   * the ring say which face the pointer is on without anything travelling, and
+   * they are the two the item names. The shadow goes with the movement — it is
+   * the depth the lift implies, and a shadow that appears under a face that did
+   * not move is a light source switching on.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui='avatar-group'][data-part='root'][data-layout='stack'] {
+      --_raise-lift: 0px;
+      --_raise-shadow: 0 0 transparent;
+    }
+
+    [data-ui='avatar-group'][data-layout='stack'] [data-ui='avatar'][data-part='root'] {
+      transition: none;
+    }
+  }
+
+  /* ── The summary ──────────────────────────────────────────────────────── */
+
+  /**
+   * `+12` is three figures where a pair of initials is two, so the avatar in
+   * the overflow reads its type a step smaller: 0.36 of the box against the
+   * initials' 0.4, rounded to the pixel — 13 at 36, 9 at 24. It was 0.32, which
+   * is 7.68 pixels at 24, under the nine ReUI sets on a 20-pixel face. Tabular figures keep the box
+   * from jittering as the count crosses a power of ten, which is the same rule
+   * `badge` applies to its own count.
+   */
+  [data-ui='avatar-group'] [data-part='overflow'] [data-ui='avatar'][data-part='root'] {
+    --slotted-avatar-initials-size: round(nearest, calc(var(--_size) * 0.36), 1px);
+
+    font-variant-numeric: tabular-nums;
+  }
+}

package/src/avatar-group/avatar-group.tokens.json

@@ -0,0 +1,16 @@
+[
+  "--slotted-avatar-group-overlap",
+  "--slotted-avatar-group-raise-lift",
+  "--slotted-avatar-size",
+  "--slotted-avatar-size-lg",
+  "--slotted-avatar-size-md",
+  "--slotted-avatar-size-sm",
+  "--slotted-avatar-size-xl",
+  "--slotted-avatar-size-xs",
+  "--slotted-border-width-thick",
+  "--slotted-easing-enter",
+  "--slotted-easing-exit",
+  "--slotted-shadow-sm",
+  "--slotted-space-2",
+  "--slotted-space-4"
+]