@zeyos/zx 4.3.4 → 5.0.0

package/src/components/finder/finder.css

@@ -17,7 +17,7 @@
   flex: none;
   min-inline-size: 0;
   flex-direction: column;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
 }
 
 .zx-finder__list {
@@ -32,9 +32,12 @@
   display: flex;
   align-items: center;
   gap: var(--zx-space-2);
-  min-block-size: calc(var(--zx-control-height) - 6px);
-  padding-inline: var(--zx-space-2);
-  border-radius: var(--zx-radius-md);
+  /* A browsing row: a space-1 margin round one line of text, and the smallest radius, so a
+     column of them reads as a list rather than a stack of buttons. */
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  padding: var(--zx-space-1) var(--zx-space-2);
+  border-radius: var(--zx-radius-sm);
+  line-height: 1.25;
   cursor: pointer;
 }
 
@@ -42,10 +45,12 @@
   background: var(--zx-color-bg-hover);
 }
 
+/* The selected row of each column is the path you are on, not a pick: the neutral current fill,
+   the full text colour and a heavier label. */
 .zx-finder__row[aria-selected="true"] {
-  background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
-  font-weight: 550;
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-finder__row:focus-visible {
@@ -53,19 +58,16 @@
   box-shadow: var(--zx-focus-ring);
 }
 
+/* Icons are quieter than labels, folders included; the current row's icon takes the text colour. */
 .zx-finder__icon {
   display: inline-grid;
   place-items: center;
   flex: none;
-  color: var(--zx-color-text-muted);
-}
-
-.zx-finder__row[data-branch] .zx-finder__icon {
-  color: var(--zx-color-warning);
+  color: var(--zx-color-text-subtle);
 }
 
 .zx-finder__row[aria-selected="true"] .zx-finder__icon {
-  color: inherit;
+  color: var(--zx-color-text);
 }
 
 .zx-finder__label {

package/src/components/form/form.css

@@ -29,11 +29,12 @@
 }
 
 .zx-form__actions .zx-btn[type="submit"] {
-  border-color: var(--zx-color-accent);
-  background: var(--zx-color-accent);
-  color: var(--zx-color-on-accent);
+  border-color: var(--zx-color-accent-solid);
+  background: var(--zx-color-accent-solid);
+  color: var(--zx-color-on-accent-solid);
 }
 
 .zx-form__actions .zx-btn[type="submit"]:hover {
-  background: var(--zx-color-accent-hover);
+  border-color: var(--zx-color-accent-solid-hover);
+  background: var(--zx-color-accent-solid-hover);
 }

package/src/components/form/form.js

@@ -1,6 +1,7 @@
 import { Component } from '../../core/component.js';
 import { h } from '../../core/dom.js';
 import { icon as createIcon } from '../../core/icons.js';
+import { uid } from '../../core/util.js';
 import { Fieldset } from '../fieldset/fieldset.js';
 import { coerceFloat, coerceInteger } from '../field/field.js';
 
@@ -22,6 +23,9 @@ import { coerceFloat, coerceInteger } from '../field/field.js';
  * @property {Array<Fieldset|import('../fieldset/fieldset.js').FieldsetOptions>} [fieldsets=[]] Initial fieldsets.
  * @property {FormAction[]} [actions=[]] Form action descriptors.
  * @property {boolean} [novalidate=true] Native `novalidate` state.
+ * @property {string|null} [idPrefix=null] Prefix of the DOM ids generated for the fields of the
+ *   fieldsets this form builds, as `<idPrefix>-<key>`. Null generates one per form instance, so a
+ *   form mounted twice never repeats an id. A fieldset's own `idPrefix` wins.
  * @property {(event: CustomEvent<{values: Record<string, unknown>}>) => void} [onsubmit] Submit listener.
  * @property {(event: CustomEvent<{errors: Record<string, string>}>) => void} [oninvalid] Invalid listener.
  * @property {(event: CustomEvent<{id: string, value: unknown}>) => void} [onchange] Field change listener.
@@ -42,6 +46,7 @@ export class Form extends Component {
     fieldsets: [],
     actions: [],
     novalidate: true,
+    idPrefix: null,
     msg: {
       'form.required': 'This field is required.',
       'form.int': 'Enter a whole number.',
@@ -56,6 +61,7 @@ export class Form extends Component {
     this._ownedFieldsets = new Set();
     this._origins = new Map();
     this._ownedNodes = [];
+    this._idPrefix = this.options.idPrefix ? String(this.options.idPrefix) : uid('zx-form');
     this._novalidateAttribute = root.getAttribute('novalidate');
     root.toggleAttribute('novalidate', Boolean(this.options.novalidate));
 
@@ -81,13 +87,16 @@ export class Form extends Component {
   }
 
   /**
-   * Adds an existing fieldset or constructs one from options.
+   * Adds an existing fieldset or constructs one from options. A constructed fieldset generates its
+   * field ids from the form's `idPrefix` unless its options carry their own.
    * @param {Fieldset|import('../fieldset/fieldset.js').FieldsetOptions} fieldset Fieldset source.
    * @returns {Fieldset}
    */
   addFieldset(fieldset) {
     const owned = !(fieldset instanceof Fieldset);
-    const instance = owned ? new Fieldset(null, fieldset ?? {}) : fieldset;
+    const instance = owned
+      ? new Fieldset(null, { ...(fieldset ?? {}), idPrefix: fieldset?.idPrefix ?? this._idPrefix })
+      : fieldset;
     if (this._fieldsets.includes(instance)) return instance;
     if (owned) this._ownedFieldsets.add(instance);
     else this._origins.set(instance, { parent: instance.el.parentNode, next: instance.el.nextSibling });

package/src/components/grid/grid.css

@@ -2,5 +2,5 @@
    the lowercase `.zx-grid` layout helper remains a separate, unchanged primitive. */
 .zx-table[data-preset="billing-items"] tr.zx-grid-billing__summary > td {
   background: var(--zx-color-bg-muted);
-  font-weight: 700;
+  font-weight: 650;
 }

package/src/components/groupbox/groupbox.css

@@ -11,7 +11,7 @@
   gap: var(--zx-space-2);
   min-block-size: var(--zx-control-height);
   padding: var(--zx-space-2) var(--zx-space-4);
-  font-weight: 650;
+  font-weight: var(--zx-weight-semibold);
   cursor: pointer;
   user-select: none;
 }

package/src/components/kanban-view/kanban-card.js

@@ -0,0 +1,247 @@
+// @ts-check
+import { h, safeHref } from '../../core/dom.js';
+import { icon } from '../../core/icons.js';
+import { AVATAR_TONES, avatarInitials, avatarTone } from '../avatar/avatar.js';
+import { badge } from '../badge/badge.js';
+
+/** @typedef {Record<string, any>} KanbanRecord */
+
+/**
+ * @typedef {Object} KanbanIndicator
+ * @property {string} label Visible text.
+ * @property {'neutral'|'accent'|'success'|'warning'|'danger'|'info'} [tone='neutral'] Semantic intent.
+ * @property {string|null} [icon=null] Optional leading icon name, used instead of the status dot.
+ * @property {boolean} [dot=true] Whether a leading status dot is drawn.
+ * @property {string} [title] Native title, useful when the label alone is terse.
+ */
+
+/**
+ * @typedef {Object} KanbanProgress
+ * @property {number} value Completed amount, clamped into `[0, max]`.
+ * @property {number} max Amount that counts as finished.
+ * @property {number} percent Rounded completion percentage.
+ * @property {string|null} label Visible meter label, or null for the caller's default.
+ */
+
+/**
+ * @typedef {Object} KanbanAssignee
+ * @property {string} name Person's name, used as the accessible label.
+ * @property {string|null} src Safe image URL, or null for the initials fallback.
+ * @property {string} initials Fallback initials.
+ * @property {import('../avatar/avatar.js').AvatarTone} tone Fallback tint: a descriptor's own
+ * `tone` when it names one of `AVATAR_TONES`, otherwise `avatarTone(name)` — the colour the same
+ * person has in every Avatar.
+ */
+
+/** Semantic intents an indicator may carry, in the order they are documented. */
+const TONES = Object.freeze(['neutral', 'accent', 'success', 'warning', 'danger', 'info']);
+
+/**
+ * Normalizes one indicator value into the descriptor the badge is built from. A plain value
+ * becomes the label and looks its tone up in the supplied map, so an application expresses
+ * "High means danger" as data rather than as a renderer.
+ * @param {unknown} value Raw field value, descriptor, or null.
+ * @param {Record<string, string>} [tones={}] Value-to-tone map.
+ * @returns {KanbanIndicator|null} Descriptor, or null when there is nothing to show.
+ */
+export function resolveKanbanIndicator(value, tones = {}) {
+  if (value == null || value === '') return null;
+  const map = tones && typeof tones === 'object' ? tones : {};
+  const source = typeof value === 'object' && !('nodeType' in value)
+    ? /** @type {Record<string, any>} */ (value) : { label: value };
+  const label = source.label == null ? '' : String(source.label);
+  if (!label) return null;
+  const mapped = map[label];
+  const tone = TONES.includes(source.tone) ? source.tone
+    : TONES.includes(mapped) ? mapped : 'neutral';
+  return {
+    label,
+    tone: /** @type {KanbanIndicator['tone']} */ (tone),
+    icon: source.icon == null ? null : String(source.icon),
+    dot: source.dot !== false && source.icon == null,
+    ...(source.title == null ? {} : { title: String(source.title) })
+  };
+}
+
+/**
+ * Builds one indicator badge.
+ * @param {KanbanIndicator} indicator Normalized descriptor.
+ * @returns {HTMLElement} Badge element.
+ */
+export function createKanbanIndicator(indicator) {
+  return badge({
+    label: indicator.label,
+    kind: indicator.tone,
+    icon: indicator.icon ?? undefined,
+    dot: indicator.dot,
+    size: 'sm',
+    variant: 'soft',
+    ...(indicator.title == null ? {} : { title: indicator.title })
+  });
+}
+
+/**
+ * Normalizes a completion value against an explicit scale. The scale is never guessed: a `0.72`
+ * on a 0–100 board is seven-tenths of a percent, and only the application knows which it meant.
+ * @param {unknown} value Raw field value, or `{value, max, label}`.
+ * @param {number} [max=100] Amount that counts as finished.
+ * @returns {KanbanProgress|null} Descriptor, or null when there is nothing to show.
+ */
+export function resolveKanbanProgress(value, max = 100) {
+  if (value == null || value === '') return null;
+  const source = typeof value === 'object' && !('nodeType' in value)
+    ? /** @type {Record<string, any>} */ (value) : { value };
+  const limit = Number(source.max ?? max);
+  const amount = Number(source.value);
+  if (!Number.isFinite(amount) || !Number.isFinite(limit) || limit <= 0) return null;
+  const clamped = Math.max(0, Math.min(limit, amount));
+  // A blank label must not win over the localized default: it would become aria-label="".
+  const label = source.label == null ? '' : String(source.label).trim();
+  return {
+    value: clamped,
+    max: limit,
+    percent: Math.round(clamped / limit * 100),
+    label: label || null
+  };
+}
+
+/**
+ * Builds the card's completion meter. The track is the accessible progress element itself, so the
+ * value is available without depending on the visible percentage text.
+ * @param {KanbanProgress} progress Normalized descriptor.
+ * @param {string} label Meter label.
+ * @param {string} valueText Formatted readout drawn opposite the label.
+ * @returns {HTMLElement} Meter element.
+ */
+export function createKanbanProgress(progress, label, valueText) {
+  const track = h('div', {
+    class: 'zx-kanban-view__progress-track',
+    role: 'progressbar',
+    ariaValuemin: '0',
+    ariaValuemax: String(progress.max),
+    ariaValuenow: String(progress.value),
+    ariaValuetext: valueText,
+    ariaLabel: label
+  }, h('div', { class: 'zx-kanban-view__progress-fill' }));
+  // The fill is the only inline style on a card: a percentage cannot be expressed as a token.
+  /** @type {HTMLElement} */ (track.firstElementChild).style.inlineSize = `${progress.percent}%`;
+  return h('div', { class: 'zx-kanban-view__progress' },
+    h('div', { class: 'zx-kanban-view__progress-head' },
+      h('span', { class: 'zx-kanban-view__progress-label' }, label),
+      h('span', { class: 'zx-kanban-view__progress-value' }, valueText)),
+    track);
+}
+
+/**
+ * Normalizes one or more responsible people. Names, name lists, and descriptor objects all
+ * resolve to the same shape, and an unsafe image URL degrades to initials rather than failing.
+ * A descriptor may name its `tone`; otherwise the tone is derived from the name exactly as Avatar
+ * derives it.
+ * @param {unknown} value Raw field value.
+ * @returns {KanbanAssignee[]} Normalized people, in the order supplied.
+ */
+export function resolveKanbanAssignees(value) {
+  if (value == null || value === '') return [];
+  const entries = Array.isArray(value) ? value : [value];
+  return /** @type {KanbanAssignee[]} */ (entries.map((entry) => {
+    if (entry == null || entry === '') return null;
+    const source = typeof entry === 'object' && !('nodeType' in entry)
+      ? /** @type {Record<string, any>} */ (entry) : { name: entry };
+    const name = String(source.name ?? source.label ?? '').trim();
+    // An avatar with no name cannot be announced: it would render as an unidentified face inside a
+    // group labelled "Assigned to ". A picture without a person is worse than no picture.
+    if (!name) return null;
+    const src = safeHref(source.src ?? source.image ?? null);
+    const initials = source.initials == null ? avatarInitials(name) : String(source.initials);
+    const tone = AVATAR_TONES.includes(source.tone) ? source.tone : avatarTone(name);
+    return { name, src, initials, tone };
+  }).filter(Boolean));
+}
+
+/**
+ * Splits a list of people into the faces that are drawn and the number the overflow chip stands
+ * for. Exists as one function so the slice and the chip can never be computed from different
+ * normalizations of the same option — a fractional limit used to floor every face away while the
+ * chip still counted from the raw value.
+ * @param {number} max Requested face count.
+ * @param {number} total People available.
+ * @returns {{shown:number,hidden:number}} Normalized split.
+ */
+export function kanbanAvatarLimit(max, total) {
+  // Exported, so a malformed total is normalized here rather than trusted from the caller.
+  const people = Number.isFinite(total) ? Math.max(0, Math.floor(total)) : 0;
+  const limit = Number.isFinite(max) ? Math.max(1, Math.floor(max)) : people;
+  const shown = Math.min(people, limit);
+  return { shown, hidden: Math.max(0, people - shown) };
+}
+
+/**
+ * Builds the assignee avatar group. The group carries one accessible name listing everyone,
+ * including the people behind the overflow chip, and the chips themselves are hidden so a screen
+ * reader announces the list once rather than once per face.
+ * @param {KanbanAssignee[]} people Normalized people.
+ * @param {number} max Faces drawn before the overflow chip.
+ * @param {string} groupLabel Accessible name for the whole group.
+ * @param {(count: number) => string} overflowLabel Text for the overflow chip, given how many
+ * people it stands for. The count is derived here so it can never disagree with the slice.
+ * @returns {HTMLElement|null} Group element, or null when nobody is assigned.
+ */
+export function createKanbanAvatars(people, max, groupLabel, overflowLabel) {
+  if (!people.length) return null;
+  const split = kanbanAvatarLimit(max, people.length);
+  const shown = people.slice(0, split.shown);
+  const hidden = split.hidden;
+  // Each face carries its tone, so the initials sit on the tint the person has in every Avatar.
+  const faces = shown.map((person) => h('span', {
+    class: 'zx-kanban-view__avatar', ariaHidden: 'true', title: person.name || undefined,
+    dataset: { tone: person.tone ?? avatarTone(person.name) }
+  }, person.src
+    ? h('img', { class: 'zx-kanban-view__avatar-image', src: person.src, alt: '', draggable: false })
+    : h('span', { class: 'zx-kanban-view__avatar-initials' }, person.initials)));
+  if (hidden > 0) {
+    faces.push(h('span', {
+      class: 'zx-kanban-view__avatar', ariaHidden: 'true', dataset: { overflow: 'true' }
+    }, h('span', { class: 'zx-kanban-view__avatar-initials' }, overflowLabel(hidden))));
+  }
+  return h('span', { class: 'zx-kanban-view__avatars', role: 'img', ariaLabel: groupLabel }, faces);
+}
+
+/**
+ * Builds the card's head row: what the record is, and how urgent it is.
+ * @param {Object} parts Row content.
+ * @param {string|null} parts.entityIcon Icon name, or null.
+ * @param {string} parts.identifier Record key, or an empty string.
+ * @param {{indicator:Node|KanbanIndicator|null,prefix:string}[]} parts.flags Trailing indicators,
+ * each with the visually hidden text that names what it measures.
+ * @param {string} parts.identifierPrefix Visually hidden text read before the record key.
+ * @returns {HTMLElement|null} Head row, or null when it would be empty.
+ */
+export function createKanbanCardHead(parts) {
+  const lead = [];
+  if (parts.entityIcon) {
+    lead.push(h('span', { class: 'zx-kanban-view__entity', ariaHidden: 'true' },
+      icon(parts.entityIcon, { size: 12 })));
+  }
+  if (parts.identifier) {
+    // `aria-label` is prohibited on the generic role, so the prefix is real, clipped text.
+    lead.push(h('span', { class: 'zx-kanban-view__identifier' },
+      parts.identifierPrefix
+        ? h('span', { class: 'zx-kanban-view__hint' }, `${parts.identifierPrefix} `) : null,
+      parts.identifier));
+  }
+  const trailing = (parts.flags ?? []).map((flag) => {
+    if (flag.indicator == null) return null;
+    const node = typeof flag.indicator === 'object' && 'nodeType' in flag.indicator
+      ? /** @type {Node} */ (flag.indicator)
+      : createKanbanIndicator(/** @type {KanbanIndicator} */ (flag.indicator));
+    // "High" alone does not say high what; the prefix names the axis without adding visible noise.
+    return flag.prefix
+      ? h('span', { class: 'zx-kanban-view__flag' },
+        h('span', { class: 'zx-kanban-view__hint' }, `${flag.prefix} `), node)
+      : node;
+  }).filter(Boolean);
+  if (!lead.length && !trailing.length) return null;
+  return h('div', { class: 'zx-kanban-view__card-head' },
+    lead.length ? h('span', { class: 'zx-kanban-view__card-lead' }, lead) : null,
+    trailing.length ? h('span', { class: 'zx-kanban-view__card-flags' }, trailing) : null);
+}

package/src/components/kanban-view/kanban-view.css

@@ -95,6 +95,12 @@
   border: 0;
   border-radius: var(--zx-radius-sm);
   background: transparent;
+  /* Both are icon-only squares with an explicit size. base.css styles native buttons through
+     zero-specificity `:where()`, which loses the cascade but still floors the box through
+     *different* properties — `padding-inline` and `min-block-size`. Without resetting those, these
+     buttons are neither square nor able to shrink when the keyboard handle clips itself away. */
+  padding: 0;
+  min-block-size: 0;
   color: var(--zx-color-text-muted);
   cursor: pointer;
 }
@@ -114,8 +120,8 @@
 }
 
 .zx-kanban-view__move-handle[aria-pressed="true"] {
-  background: var(--zx-color-accent-subtle);
-  color: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
   cursor: grabbing;
 }
 
@@ -342,7 +348,7 @@
 }
 
 .zx-kanban-view .zx-record-card__eyebrow-group[data-card-slot="eyebrow-start"] .zx-record-card__field {
-  border-radius: var(--zx-radius-full);
+  border-radius: var(--zx-radius-sm);
   background: var(--zx-color-bg-muted);
   padding: calc(var(--zx-space-1) / 2) var(--zx-space-2);
 }
@@ -413,6 +419,12 @@
 .zx-kanban-view .zx-record-card[data-grabbed="true"] {
   outline: 2px solid var(--zx-color-accent);
   outline-offset: 2px;
+  /* A card picked up from the keyboard is the item being dragged, so it lifts like one. */
+  box-shadow: var(--zx-drag-shadow);
+}
+
+.zx-kanban-view .zx-record-card[data-grabbed="true"]:focus-visible {
+  box-shadow: var(--zx-focus-ring), var(--zx-drag-shadow);
 }
 
 .zx-kanban-view__empty {
@@ -464,10 +476,6 @@
   }
 }
 
-[data-zx-density="compact"] .zx-kanban-view {
-  --zx-kanban-card-padding-inline: var(--zx-space-2);
-}
-
 @media (prefers-reduced-motion: no-preference) {
   .zx-kanban-view__collapse,
   .zx-kanban-view__move-handle,
@@ -565,10 +573,13 @@
 
 /* ── Empty column placeholder ─────────────────────────────────────────────────────────────── */
 
+/* An empty column reads as somewhere a card can go, not as a rendering gap. */
 .zx-kanban-view__column-empty {
   display: grid;
   place-items: center;
   min-block-size: 4rem;
+  border: 1px dashed var(--zx-color-border);
+  border-radius: var(--zx-radius-md);
   padding: var(--zx-space-2);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
@@ -642,7 +653,8 @@
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-md);
   background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-shadow-2);
+  /* The item in flight: lifted above every resting card by the shared drag shadow. */
+  box-shadow: var(--zx-drag-shadow);
   padding: var(--zx-space-1) var(--zx-space-2);
   color: var(--zx-color-text);
   font-size: var(--zx-text-xs);
@@ -658,3 +670,209 @@
     min-block-size: 2.75rem;
   }
 }
+
+/* ── Card head: what the record is, and how urgent it is ──────────────────────────────────── */
+
+.zx-kanban-view__card-head {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-block-size: 1.25rem;
+  min-inline-size: 0;
+}
+
+.zx-kanban-view__card-lead,
+.zx-kanban-view__card-flags {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+}
+
+.zx-kanban-view__card-flags {
+  flex: none;
+  margin-inline-start: auto;
+}
+
+.zx-kanban-view__entity {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  color: var(--zx-color-text-muted);
+}
+
+.zx-kanban-view__identifier {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Card footer: completion, then the people responsible ─────────────────────────────────── */
+
+.zx-kanban-view__card-footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+
+.zx-kanban-view__progress-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--zx-space-2);
+  margin-block-end: calc(var(--zx-space-1) / 2);
+}
+
+.zx-kanban-view__progress-label,
+.zx-kanban-view__progress-value {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.zx-kanban-view__progress-label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.zx-kanban-view__progress-value {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.zx-kanban-view__progress-track {
+  block-size: 4px;
+  overflow: hidden;
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-bg-muted);
+}
+
+.zx-kanban-view__progress-fill {
+  block-size: 100%;
+  border-radius: inherit;
+  background: var(--zx-color-accent);
+}
+
+/* ── Assignees ────────────────────────────────────────────────────────────────────────────── */
+
+/* Faces overlap into a stack; each one lifts its own left edge clear of the previous. */
+.zx-kanban-view__avatars {
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+}
+
+/*
+ * A face is a small Avatar: the initials on the tint of the tone the component derives from the
+ * name with Avatar's own hash (`data-tone`), so a person has the same colour on the board as
+ * everywhere else. The surface-coloured edge is what separates overlapping faces.
+ */
+.zx-kanban-view__avatar {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  overflow: hidden;
+  border: 1px solid var(--zx-color-bg-surface);
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-kanban-avatar-bg, var(--zx-color-bg-muted));
+  color: var(--zx-kanban-avatar-fg, var(--zx-color-text-muted));
+}
+
+.zx-kanban-view__avatar[data-tone="blue"] { --zx-kanban-avatar-bg: var(--zx-color-tone-blue-bg); --zx-kanban-avatar-fg: var(--zx-color-tone-blue-fg); }
+.zx-kanban-view__avatar[data-tone="teal"] { --zx-kanban-avatar-bg: var(--zx-color-tone-teal-bg); --zx-kanban-avatar-fg: var(--zx-color-tone-teal-fg); }
+.zx-kanban-view__avatar[data-tone="green"] { --zx-kanban-avatar-bg: var(--zx-color-tone-green-bg); --zx-kanban-avatar-fg: var(--zx-color-tone-green-fg); }
+.zx-kanban-view__avatar[data-tone="amber"] { --zx-kanban-avatar-bg: var(--zx-color-tone-amber-bg); --zx-kanban-avatar-fg: var(--zx-color-tone-amber-fg); }
+.zx-kanban-view__avatar[data-tone="orange"] { --zx-kanban-avatar-bg: var(--zx-color-tone-orange-bg); --zx-kanban-avatar-fg: var(--zx-color-tone-orange-fg); }
+.zx-kanban-view__avatar[data-tone="red"] { --zx-kanban-avatar-bg: var(--zx-color-tone-red-bg); --zx-kanban-avatar-fg: var(--zx-color-tone-red-fg); }
+.zx-kanban-view__avatar[data-tone="pink"] { --zx-kanban-avatar-bg: var(--zx-color-tone-pink-bg); --zx-kanban-avatar-fg: var(--zx-color-tone-pink-fg); }
+.zx-kanban-view__avatar[data-tone="violet"] { --zx-kanban-avatar-bg: var(--zx-color-tone-violet-bg); --zx-kanban-avatar-fg: var(--zx-color-tone-violet-fg); }
+.zx-kanban-view__avatar[data-tone="slate"] { --zx-kanban-avatar-bg: var(--zx-color-tone-slate-bg); --zx-kanban-avatar-fg: var(--zx-color-tone-slate-fg); }
+
+.zx-kanban-view__avatar + .zx-kanban-view__avatar {
+  margin-inline-start: calc(var(--zx-space-2) * -1);
+}
+
+.zx-kanban-view__avatar[data-overflow="true"] {
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text-muted);
+}
+
+.zx-kanban-view__avatar-image {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+/* Avatar's initials at the small size: 0.4 of the face, never under 10px, semibold. */
+.zx-kanban-view__avatar-initials {
+  font-size: max(10px, calc(1.5rem * .4));
+  font-weight: var(--zx-weight-semibold);
+  letter-spacing: 0;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+/* The overflow chip is a count, not a person: it keeps the text size it can be read at. */
+.zx-kanban-view__avatar[data-overflow="true"] .zx-kanban-view__avatar-initials {
+  font-size: var(--zx-text-xs);
+}
+
+/* ── Move handle ──────────────────────────────────────────────────────────────────────────── */
+
+/* The card is the pointer drag source, so the handle is keyboard furniture: announced and in tab
+   order, but out of sight and out of the layout until it takes focus or holds a grabbed card. */
+.zx-kanban-view__move-handle[data-reveal="keyboard"] {
+  position: absolute;
+  /* base.css gives every native button a control-height floor; without resetting it the "hidden"
+     handle is still a full-height strip. */
+  inline-size: 1px;
+  block-size: 1px;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+
+.zx-kanban-view__move-handle[data-reveal="keyboard"]:focus,
+.zx-kanban-view__move-handle[data-reveal="keyboard"][aria-pressed="true"] {
+  position: static;
+  inline-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  min-block-size: 0;
+  overflow: visible;
+  clip-path: none;
+}
+
+@media (pointer: coarse) {
+  .zx-kanban-view__move-handle[data-reveal="keyboard"]:focus,
+  .zx-kanban-view__move-handle[data-reveal="keyboard"][aria-pressed="true"] {
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+  }
+}
+
+/* Text that names what a terse card value measures — "Priority" before "High" — carried as real
+   content because `aria-label` is prohibited on the generic role a span reports. */
+.zx-kanban-view__hint {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.zx-kanban-view__flag {
+  display: inline-flex;
+  align-items: center;
+}
+.zx-kanban-view .zx-record-card[data-selection-trigger="card"] { cursor: pointer; }