@apliteni/apliteni-ui 0.130.0 → 0.132.0

package/src/components/shell.js

@@ -4,6 +4,7 @@
 // why: docs/components.md#the-page-shell
 import { topbar as productTopbar } from './topbar.js';
 import { esc, icon, button } from './index.js';
+import { avatar } from './avatar.js';
 import { sidebarNav, breadcrumbs, wireNav } from './nav.js';
 import { dropdown, wireDropdown } from './dropdown.js';
 import { drawer, wireDrawer, closeDrawer } from './drawer.js';
@@ -67,7 +68,7 @@ const toReader = (a) => (isRecord(a) ? { name: str(a.name), email: str(a.email)
 const toMenuReader = (a) => {
   const { name, email } = toReader(a);
   const rest = isRecord(a) && !Array.isArray(a) ? a : {};
-  const out = { ...rest, name: esc(name), email: esc(email), initials: esc(initials(name, email)) };
+  const out = { ...rest, name: esc(name), email: esc(email), initials: initials(name, email), key: email || name };
   if (out.nav != null) out.nav = toItems(out.nav).map(toMenuTuple);
   return out;
 };
@@ -195,7 +196,7 @@ function settle(options) {
 // inside it. why: docs/components.md#the-page-shell
 const readerFace = (name, email, named, markOnly = false) =>
   `<span class="ui-app__av"${named ? ` role="img" aria-label="Signed in as ${esc(named)}"` : ' aria-hidden="true"'}>`
-  + `${esc(initials(name, email))}</span>`
+  + `${avatar({ key: email || name, initials: initials(name, email), size: 32 })}</span>`
   + (markOnly ? '' : `<span class="ui-app__who"${named ? ' aria-hidden="true"' : ''}>`
     + (name ? `<b>${esc(name)}</b>` : '')
     + (email ? `<span>${esc(email)}</span>` : '')

package/src/components/topbar.js

@@ -4,6 +4,7 @@ import { brand } from '../assets/brand.js';
 import { icon, sun, moon } from '../assets/icons.js';
 import { esc } from './index.js';
 import { wireDropdown } from './dropdown.js';
+import { avatar } from './avatar.js';
 import { accountMenuNav, initials, toMenuTuple } from './account-nav.js';
 import { trustedAttr, trustedUrl } from '../html.js';
 const THEME_KEY = 'apliteni-strategy-theme';
@@ -55,7 +56,7 @@ export function versionSwitcher(versions = [], activeIdx = 0) {
 // shell.js computes the mark from the caller's own strings and passes it down
 // beside them. Left out, it is computed here from `name` and `email`.
 export function accountMenu({
-  name = 'Ada Lovelace', email = 'ada@apliteni.com', active = 'prefs', nav, initials: mark,
+  name = 'Ada Lovelace', email = 'ada@apliteni.com', active = 'prefs', nav, initials: mark, key,
 } = {}) {
   // initials() is shared with the rail's avatar — the two are the same reader
   // on the /account preset, and they used to disagree about who that was.
@@ -76,9 +77,9 @@ export function accountMenu({
   // `on` so the menu is visible in Storybook / standalone use (no /auth/me gate).
   // Consumes the shared dropdown wiring via the generic [data-dropdown] hooks.
   return `<div class="acct on" data-dropdown>` +
-    `<button class="avatar" data-dropdown-trigger aria-haspopup="menu" aria-expanded="false" aria-label="Account">${ini}</button>` +
+    `<button class="avatar" data-dropdown-trigger aria-haspopup="menu" aria-expanded="false" aria-label="Account">${avatar({ key: key ?? (email || name), initials: ini, size: 32 })}</button>` +
     `<div class="amenu" data-dropdown-panel role="menu">` +
-    `<div class="ahead"><span class="avatar">${ini}</span><span class="aw"><span class="anm">${name}</span><span class="aem" title="${trustedAttr(email)}">${email}</span></span></div>` +
+    `<div class="ahead">${avatar({ key: key ?? (email || name), initials: ini, size: 32 })}<span class="aw"><span class="anm">${name}</span><span class="aem" title="${trustedAttr(email)}">${email}</span></span></div>` +
     items.map(it).join('') +
     `<div class="asep"></div><a class="aout" href="#logout" data-dd-item tabindex="-1" role="menuitem">${icon('logout')}Sign out</a>` +
     `</div></div>`;

package/src/index.css

@@ -21,6 +21,7 @@
 @import "./styles/button.css";
 @import "./styles/card.css";
 @import "./styles/badge.css";
+@import "./styles/avatar.css";
 @import "./styles/segmented.css";
 @import "./styles/tabs.css";
 @import "./styles/input.css";

package/src/index.d.ts

@@ -31,6 +31,14 @@ export declare function icon(name: string, className?: string): string;
 export declare function snippet(opts?: Record<string, unknown>): string;
 export declare function button(opts?: Record<string, unknown>): string;
 export declare function badge(label: string, variant?: string): string;
+export declare const AVATAR_HUES: 8;
+/** Which of the eight person hues a key gets: FNV-1a 32 bit over its UTF-8 bytes, modulo 8. */
+export declare function avatarHue(key: unknown): number;
+/** The first letter of the first word and of the last word, upper-cased; '' for no name. */
+export declare function avatarInitials(name: unknown): string;
+export declare function avatar(opts?: {
+  key?: string | number; name?: string | null; initials?: string; src?: string; size?: 24 | 32; empty?: boolean;
+}): string;
 export declare const calloutIcons: Record<'neutral' | 'info' | 'success' | 'warn' | 'danger', string>;
 export declare function callout(opts?: Record<string, unknown>): string;
 export declare function card(opts?: Record<string, unknown>): string;
@@ -87,6 +95,38 @@ export declare function dropdownHeightFit(
   dd: Element | null | undefined,
   panel: Element | null | undefined,
 ): number | null;
+/** Stop an open panel's height where it cuts a row through the middle, so the list
+ *  reads as going on: the smaller of its cap and its measured room. Call it with the
+ *  panel laid out and its room written.
+ *  why: docs/components.md#the-dropdown-panel */
+export declare function dropdownSnap(
+  dd: Element | null | undefined,
+  panel: Element | null | undefined,
+): void;
+/** Lift an open panel out of a Modal or Drawer body too short to hold its field and
+ *  the panel's floor, so it opens over the body the way a portalled panel does, or put a
+ *  lifted one back. Returns whether the panel is lifted.
+ *  why: docs/components.md#the-dropdown-panel */
+export declare function dropdownLift(
+  dd: Element | null | undefined,
+  panel: Element | null | undefined,
+): boolean;
+/** Scroll the body an open panel sits in the least distance that shows the whole
+ *  panel and its field's label, with the room under the panel kept. Returns the distance scrolled, 0 when
+ *  nothing moved. why: docs/components.md#the-dropdown-panel */
+export declare function dropdownReveal(
+  dd: Element | null | undefined,
+  panel: Element | null | undefined,
+): number;
+/** Give an open panel its box, and take the box away from a shut one once its fade is
+ *  over, so a shut panel adds no scroll room. Returns a function that cancels a
+ *  collapse still waiting. why: docs/components.md#the-dropdown-panel */
+export declare function dropdownRest(
+  dd: Element | null | undefined,
+  panel: Element | null | undefined,
+  open: boolean,
+  wait?: number,
+): () => void;
 export declare function backLink(opts?: Record<string, unknown>): string;
 export declare function statBand(opts?: Record<string, unknown>): string;
 export declare function commandPalette(opts?: Record<string, unknown>): string;

package/src/index.js

@@ -1,6 +1,7 @@
 // apliteni-ui — public entry.
 // Styles ship separately: `import 'apliteni-ui/css'`.
 export * from './components/index.js';
+export * from './components/avatar.js';
 export * from './components/dropdown.js';
 export * from './components/tooltip.js';
 export * from './components/tabs.js';

package/src/inline.js

@@ -35,6 +35,7 @@ export const styles = {
   button: read('styles/button.css'),
   card: read('styles/card.css'),
   badge: read('styles/badge.css'),
+  avatar: read('styles/avatar.css'),
   segmented: read('styles/segmented.css'),
   tabs: read('styles/tabs.css'),
   input: read('styles/input.css'),
@@ -72,6 +73,7 @@ export const cssText = [
   styles.button,
   styles.card,
   styles.badge,
+  styles.avatar,
   styles.segmented,
   styles.tabs,
   styles.input,

package/src/logic/avatar.js

@@ -0,0 +1,28 @@
+/** How many hues a person's mark can take. One per `--person-N` token. */
+export const AVATAR_HUES = 8;
+
+/**
+ * Which hue a person gets: FNV-1a, 32 bit, over the UTF-8 bytes of the app's stable
+ * key, modulo the number of hues. The kit ships it so two apps give one person one hue.
+ */
+export function avatarHue(key) {
+  let h = 0x811c9dc5;
+  for (const byte of new TextEncoder().encode(String(key ?? ''))) {
+    h ^= byte;
+    h = Math.imul(h, 0x01000193) >>> 0;
+  }
+  return h % AVATAR_HUES;
+}
+
+/**
+ * The letters of a mark: the first letter of the first word and of the last word, so a
+ * one-word name gives one letter. Empty when there is no name to read.
+ */
+export function avatarInitials(name) {
+  const words = String(name ?? '').normalize('NFC').trim().split(/\s+/).filter(Boolean);
+  if (!words.length) return '';
+  const segmenter = typeof Intl.Segmenter === 'function' ? new Intl.Segmenter(undefined, { granularity: 'grapheme' }) : null;
+  const first = (w) => segmenter ? segmenter.segment(w)[Symbol.iterator]().next().value.segment : Array.from(w)[0];
+  const letters = words.length === 1 ? [first(words[0])] : [first(words[0]), first(words[words.length - 1])];
+  return letters.join('').toLocaleUpperCase();
+}

package/src/logic/dropdown.js

@@ -37,3 +37,25 @@ export const dropdownAvail = ({ anchorTop, anchorBottom, viewport, gap, inset, m
   const room = Math.max(up ? anchorTop - gap : viewport - anchorBottom - gap, 0);
   return room < min ? Infinity : Math.max(room - inset, min);
 };
+
+/**
+ * Where a capped panel stops so that its last row is cut through the middle: the
+ * list then reads as going on, and a half row is the least that says so. `rows` are
+ * the rows' tops and heights from the panel's top edge, scrolled to its start;
+ * `below` is the panel's box under the part that scrolls; `content` is the panel's
+ * full height; `ceiling` is the tallest it may be. `reach`, past the ceiling, is room
+ * that may be spent to stop at the next half row instead of a whole row short: the
+ * least of it that does so is taken. Returns the height, or `null` where the panel fits
+ * whole under the ceiling or no row's middle fits under it.
+ */
+export const dropdownStop = ({ rows, below, content, ceiling, reach = ceiling }) => {
+  if (!(content > ceiling)) return null;
+  let stop = null;
+  let over = null;
+  for (const { top, height } of rows) {
+    const cut = Math.floor(top + height / 2 + below);
+    if (cut <= ceiling && (stop === null || cut > stop)) stop = cut;
+    else if (cut > ceiling && cut <= reach && (over === null || cut < over)) over = cut;
+  }
+  return over ?? stop;
+};

package/src/styles/avatar.css

@@ -0,0 +1,42 @@
+/* Avatar — a person's round mark. Solid fill in the person's hue, the letters in the
+   solid-signal ink. Only the part's own paint is here: a control that holds one keeps
+   its own cursor, hover and ring. why: docs/components.md#avatar */
+.ui-avatar {
+  --ui-avatar-size: 24px;
+  --ui-avatar-hue: var(--person-0);
+  inline-size: var(--ui-avatar-size);
+  block-size: var(--ui-avatar-size);
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+  font-size: var(--text-xs);
+  font-weight: var(--weight-bold);
+  line-height: 1;
+  vertical-align: middle;
+  background: var(--ui-avatar-hue); /* code-bg: inherit — an opaque fill with its own ink. */
+  color: var(--signal-solid-ink);
+}
+.ui-avatar--32 { --ui-avatar-size: 32px; font-size: var(--text-base); }
+/* Two letters in 24px leave the type at the kit's smallest step; in 32px one step down. */
+.ui-avatar--32[data-initials="2"] { font-size: var(--text-sm); }
+.ui-avatar--h0 { --ui-avatar-hue: var(--person-0); }
+.ui-avatar--h1 { --ui-avatar-hue: var(--person-1); }
+.ui-avatar--h2 { --ui-avatar-hue: var(--person-2); }
+.ui-avatar--h3 { --ui-avatar-hue: var(--person-3); }
+.ui-avatar--h4 { --ui-avatar-hue: var(--person-4); }
+.ui-avatar--h5 { --ui-avatar-hue: var(--person-5); }
+.ui-avatar--h6 { --ui-avatar-hue: var(--person-6); }
+.ui-avatar--h7 { --ui-avatar-hue: var(--person-7); }
+
+/* The photo covers the letters, so one that fails leaves them showing. */
+.ui-avatar img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; }
+.ui-avatar img.is-loaded { opacity: 1; }
+.ui-avatar svg { inline-size: 62%; block-size: 62%; stroke: currentColor; fill: none; stroke-width: 2.5; }
+
+/* No name: the user glyph on the kit's quiet fill. */
+.ui-avatar--anon { background: var(--surface-3); /* code-bg: inherit — a glyph, no text on it. */ /* muted-ink: glyph — a person with no name */ color: var(--muted); }
+/* No one: a dashed ring of the same size. */
+.ui-avatar--empty { background: none; border: 1px dashed var(--muted); /* muted-ink: glyph — the ring is a mark, not text */ color: var(--muted); }

package/src/styles/dropdown.css

@@ -6,6 +6,22 @@
  * ========================================================================== */
 
 .ui-dropdown { position: relative; display: inline-flex; }
+/* Inside a scrolling body the wiring writes --ui-dropdown-reach when it opens the
+   panel: the distance from the trigger to one edge inset past the panel. The panel is
+   the last thing the body holds, so the body ends where the panel ends; this 1px spot
+   lets it scroll that far. It stays through the fade and until the reader has scrolled
+   out of it, so closing does not move the field, and it paints nothing.
+   why: docs/components.md#the-dropdown-panel */
+.ui-dropdown[style*="--ui-dropdown-reach"]::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  top: 100%;
+  width: 1px;
+  height: 1px;
+  margin-top: var(--ui-dropdown-reach);
+  pointer-events: none;
+}
 
 /* Trigger — pill button: [pre] [value] [chevron] */
 .ui-dropdown__trigger {
@@ -88,12 +104,26 @@
      the screen's edge sets it to 0.
      why: docs/components.md#the-dropdown-panel */
   --ui-dropdown-edge: 8px;
+  /* What a panel that opens down inside a Modal or Drawer body keeps between its end
+     and the body's end. The drop shadow fades out over 43px in light and 15px in dark,
+     measured from pixels; the body clips whatever is left of it. 48px is the 8px
+     step above the light figure. why: docs/components.md#the-dropdown-panel */
+  --ui-dropdown-shade: 48px;
   /* The least height a capped panel keeps before it would rather spend the edge
      inset above than shrink further — three rows or so. Below it the panel
      still ends at or before the edge; it never spends room past the edge to
      reach this floor, because that room does not exist. #489
      why: docs/components.md#the-dropdown-panel */
   --ui-dropdown-min: 120px;
+  /* The tallest a panel grows before it scrolls inside itself. It is the figure the
+     reference systems settle on, 256 to 300px, and the one `scroll` and the search
+     list already used. The wiring stops the cap short of it, in the middle of a row
+     (--ui-dropdown-fit), so the last row is cut and the list is seen to go on. That
+     shows 7 whole rows and half of the eighth in a plain list, 4 and a half with a
+     description line, 5 and a half under a search field and 3 and a half with both.
+     A consumer asks for another cap with `scroll: <n>`.
+     why: docs/components.md#the-dropdown-panel */
+  --ui-dropdown-max: 300px;
   /* Named for the same reason the offset is: a block pinned to an edge has to
      bleed back through it, and #306 is a page copying the number by hand.
      why: docs/components.md#the-dropdown-panel */
@@ -142,15 +172,18 @@
   /* The cap, and the whole of #489: a panel took its content's height until that
      height ran off the screen, and then it took what was left. Two numbers decide
      it and the smaller wins — --ui-dropdown-cap is what the consumer asked for
-     (the `scroll` option writes it), --ui-dropdown-avail is the room between the
-     trigger and the viewport edge, which the wiring measures on every open and
-     every scroll. Neither is declared here: an unset cap means the consumer wants
-     the whole list, and an unset avail means nothing has measured yet, which is a
-     server-rendered page before hydration — so the fallback promises the same
-     thing at a coarser grain, the viewport less the edge inset at each end.
+     (the `scroll` option writes it, and --ui-dropdown-max stands in when it is
+     unset), --ui-dropdown-avail is the room between the trigger and the viewport
+     edge, or the body's, which the wiring measures when the panel opens. Between
+     them --ui-dropdown-fit is the height the wiring stops the smaller at, in the
+     middle of a row. An unset avail
+     means nothing has measured yet, which is a server-rendered page before
+     hydration — so the fallback promises the same thing at a coarser grain, the
+     viewport less the edge inset at each end.
      why: docs/components.md#the-dropdown-panel */
   max-height: min(
-    var(--ui-dropdown-cap, 100dvh),
+    var(--ui-dropdown-cap, var(--ui-dropdown-max)),
+    var(--ui-dropdown-fit, 100dvh),
     var(--ui-dropdown-avail, calc(100dvh - 2 * var(--ui-dropdown-edge)))
   );
   overflow-y: auto;
@@ -173,21 +206,40 @@
   z-index: var(--z-dropdown);
 }
 .ui-dropdown__panel.is-end { left: auto; right: 0; }
-/* `.is-scroll` asks for 300px specifically; the panel above caps every panel at
-   the room the viewport left either way. #489 */
-.ui-dropdown__panel.is-scroll { --ui-dropdown-cap: 300px; }
+/* `.is-scroll` asks for the standard cap by name; the panel above caps every panel
+   at the room the viewport left either way. #489 */
+.ui-dropdown__panel.is-scroll { --ui-dropdown-cap: var(--ui-dropdown-max); }
+
+/* The wiring adds this where the room is below the floor: even spending the whole
+   edge inset, there is no usable height. The panel keeps its cap — it is never
+   taller than 300px — and scrolls inside it. Its room runs past the fold, so the
+   page is the way to the rows below it, and `overscroll-behavior: contain` above
+   would stop the wheel at the panel's own end instead of passing it on. `auto`
+   lets it through. why: dropdownAvail(), src/logic/dropdown.js */
+.ui-dropdown__panel.is-unbounded { overscroll-behavior: auto; }
 
-/* The wiring adds this where the floor (above) left the panel uncapped: below
-   120px even spending the whole edge inset, there is no usable cap, so the
-   panel keeps its content height and the page grows to hold it instead —
-   #641's danger 1. That panel has nothing of its own to scroll, so the
-   `overflow-y: auto` above still claims a wheel over it for nothing, and
-   `overscroll-behavior: contain` then stops the gesture from reaching the
-   page that is now the only way to the rows below the fold. `visible` lets it
-   through. A panel that also carries `.is-scroll` or a numeric cap keeps
-   `auto`: that cap is still real room to scroll inside. why: dropdownAvail(),
-   src/logic/dropdown.js */
-.ui-dropdown__panel.is-unbounded { overflow-y: visible; }
+/* The wiring lifts a panel out of a Modal or Drawer body too short to hold the field's
+   label and trigger, the floor and the 8px edge under it. Fixed, it opens over the
+   body the way a portalled panel does, and the wiring writes its edges from the
+   trigger's. The value is the side it opens on. why: docs/components.md#the-dropdown-panel */
+.ui-dropdown__panel[data-dd-lifted] { position: fixed; }
+.ui-dropdown__panel[data-dd-lifted="up"] { transform: translateY(6px); }
+
+/* A search list that carries the consumer's own cap keeps it, and the panel is that cap
+   and the search field over it. The wiring writes the sum as --ui-dropdown-fit; this
+   lifts the standard cap out of its way. why: docs/components.md#the-dropdown-panel */
+.ui-dropdown__panel--search:has(> .ui-dropdown__list[style*="--ui-dropdown-cap"]) { --ui-dropdown-max: 100dvh; }
+
+/* A shut panel is still laid out, and a box that is laid out counts towards the
+   scroll of the body or page it sits in. The wiring collapses it once its fade is
+   over and gives the box back before the next open measures it. The width stays, so
+   the horizontal fit reads the same number. why: docs/components.md#the-dropdown-panel */
+.ui-dropdown__panel[data-dd-shut] {
+  max-height: 0;
+  padding-block: 0;
+  border-block-width: 0;
+  overflow: hidden;
+}
 
 /* Chrome makes a scroll container a keyboard stop on its own — no tabindex, no
    author rule — so `.is-scroll` took the browser's outline, black in light mode.
@@ -396,7 +448,7 @@
 
 /* The rows' own cap, read from the same property the panel reads: the `scroll`
    option lands on the list when there is a field above it. #489 */
-.ui-dropdown__list { max-height: var(--ui-dropdown-cap, 300px); overflow-y: auto; overscroll-behavior: contain; }
+.ui-dropdown__list { max-height: var(--ui-dropdown-cap, var(--ui-dropdown-fit, var(--ui-dropdown-max, 300px))); overflow-y: auto; overscroll-behavior: contain; }
 /* Rows are `role="option" tabindex="-1"`, so the LIST takes the keyboard stop and
    answered with the native outline. The band is drawn INWARD, on the list: an outset
    one 6px inside a --radius-lg corner leaves the panel, and the panel is not the box
@@ -425,3 +477,21 @@
   /* muted-ink: state — off, unset, disabled or archived badge */
   color: var(--muted);
 }
+
+/* A picker of people. A mark leads the trigger and each row; with no value the trigger
+   shows the dashed ring beside the placeholder in the placeholder ink. The mark's own
+   margins give back the room it takes, so the trigger keeps its height.
+   why: docs/components.md#avatar */
+.ui-dropdown__trigger > .ui-avatar {
+  --ui-avatar-pull: 4px;
+  --ui-avatar-pull-start: 10px;
+  margin-block: calc(var(--ui-avatar-pull) * -1);
+  margin-inline-start: calc(var(--ui-avatar-pull-start) * -1);
+}
+.ui-dropdown__value.is-placeholder { /* muted-ink: placeholder — no person chosen */ color: var(--muted); font-weight: var(--weight-medium); }
+
+/* A dropdown that is a form control takes its field's width, and its panel the
+   trigger's. why: docs/components.md#avatar */
+.ui-field > .ui-dropdown { display: grid; }
+.ui-field > .ui-dropdown > .ui-dropdown__trigger > .ui-dropdown__chevron { margin-left: auto; }
+.ui-field > .ui-dropdown > .ui-dropdown__panel { inline-size: 100%; min-width: 0; }

package/src/styles/layout.css

@@ -161,13 +161,10 @@
 .ui-app__av {
   width: var(--ui-app-av); height: var(--ui-app-av); flex: none;
   margin-inline-start: calc((var(--ui-nav-strip) - var(--ui-app-av)) / 2);
-  border-radius: var(--radius-pill);
-  background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
-  color: var(--strong);
-  display: grid; place-items: center;
-  font-size: calc(var(--text-xs) + 1px);
-  font-weight: var(--weight-semibold);
+  display: grid;
 }
+/* The mark is the Avatar part in the reader's hue, filling this box like the top bar's. */
+.ui-app__av > .ui-avatar { --ui-avatar-size: 100%; }
 .ui-app__who { font-size: calc(var(--text-sm) - 0.5px); line-height: 1.3; min-width: 0; }
 .ui-app__who b { display: block; color: var(--strong); font-weight: var(--weight-semibold); }
 /* nowrap is what makes the ellipsis fire — without it the address wraps, and

package/src/styles/topbar.css

@@ -206,10 +206,10 @@
   transition: background var(--dur-fast) var(--ease);
 }
 /* Menu rows use the reading surface and an edge on hover — see
-   src/styles/dropdown.css:271 `.ui-dropdown__item:hover`.
+   src/styles/dropdown.css:323 `.ui-dropdown__item:hover`.
    why: docs/foundations.md#elevation */
 .vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
-/* The row is a keyboard stop: src/components/dropdown.js:1165
+/* The row is a keyboard stop: src/components/dropdown.js:1663
    `items[next < 0 ? 0 : next]?.focus()` moves focus onto a `[data-dd-item]` with
    the arrow keys, and this is one. It takes the ring on its own 10px radius, the
    same way `.amenu a` above does. #482 */
@@ -306,6 +306,10 @@
    what the kit's rows already chose. why: docs/foundations.md#the-focus-ring */
 .acct .avatar:hover:not(:focus-visible) { border-color: var(--accent); }
 .avatar:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
+/* The account button holding an Avatar: the part paints the circle in the reader's hue and
+   the button keeps its edge, cursor, hover and ring. why: docs/components.md#avatar */
+.avatar:has(> .ui-avatar) { background: none; padding: 0; overflow: hidden; }
+.avatar > .ui-avatar { --ui-avatar-size: 100%; }
 .amenu {
   position: absolute;
   right: 0; top: 44px;
@@ -372,7 +376,6 @@
   border-radius: 14px 14px 0 0;
   display: flex; align-items: center; gap: 11px;
 }
-.amenu .ahead .avatar { cursor: default; }
 .amenu .ahead .aw { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
 .amenu .ahead .anm { color: var(--strong); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .amenu .ahead .aem { color: var(--text); font-size: calc(var(--text-xs) + 0.5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

package/src/tokens/tokens.css

@@ -257,6 +257,19 @@
   --signal-solid-info: var(--cyan);
   --signal-solid-neutral: var(--muted);
 
+  /* Person hues: the eight fills an Avatar takes from a hash of the person's key. Fixed
+     values and not accent tints, so a person keeps one hue under every accent and in
+     every app. Each is an existing kit value for this theme, and --signal-solid-ink
+     holds 4.5:1 on all eight. why: docs/components.md#avatar */
+  --person-0: #bd8cff;
+  --person-1: #5ab0ff;
+  --person-2: #20dcf5;
+  --person-3: #3ad9a0;
+  --person-4: #98ff8f;
+  --person-5: #ffcf6a;
+  --person-6: #ff8a5c;
+  --person-7: #f5aec6;
+
   /* DEPRECATED since #295: no surface below the floating step casts, and the floating
      step reads --elev-drop rather than any of these. Published still, so a consumer
      reading one gets nothing rather than an unresolved var(), and a consumer who wants a
@@ -446,6 +459,16 @@
   --signal-solid-danger: var(--chip-danger-ink);
   --signal-solid-warn: var(--chip-warn-ink);
   --signal-solid-info: var(--chip-info-ink);
+
+  /* Person hues, light: the deepened forms, so white holds on every one. */
+  --person-0: #6a2dcc;
+  --person-1: #005ab4;
+  --person-2: #096a7c;
+  --person-3: #076c48;
+  --person-4: #145a26;
+  --person-5: #825900;
+  --person-6: #a8370c;
+  --person-7: #b7295f;
   --signal-solid-neutral: var(--muted);
 
   /* Deprecated and unread — see the dark block. */