@zeyos/zx 4.4.0 → 5.2.0

package/src/components/filter-panel/filter-panel.js

@@ -74,6 +74,11 @@ const FLOAT_STEP = 0.01;
  *   applies every committed edit.
  * @property {FilterPanelSerialize} [serialize='seconds'] How a date leaves the component. A range's
  *   lower bound takes the start of its day and its upper bound the end, so a one-day range matches.
+ * @property {string|null} [timeZone=null] IANA zone the calendar days are counted in, such as the
+ *   ZeyOS instance's `Europe/Vienna`. A day serializes as the first (or last) instant of that day
+ *   in this zone, and an incoming instant shows as the day it falls on there — the same rule
+ *   `zeyosForm()` and `zeyosTable()` apply to date-only fields. Null uses the runtime's own zone.
+ *   An unknown zone throws a `RangeError`.
  * @property {string|null} [emptyText=null] Text shown when `fields` is empty; null resolves
  *   `filterPanel.empty`.
  * @property {Record<string, string>|Record<string, Record<string, string>>} [msg] Localized messages.
@@ -111,6 +116,7 @@ export class FilterPanel extends Component {
     value: {},
     mode: 'draft',
     serialize: 'seconds',
+    timeZone: null,
     emptyText: null
   };
 
@@ -130,9 +136,10 @@ export class FilterPanel extends Component {
     const root = /** @type {HTMLElement} */ (this.el ?? h('div'));
     this.el = root;
 
+    this._timeZone = normalizePanelTimeZone(this.options.timeZone);
     this._fields = orderFields(this.options.fields, this.options.order);
-    this._draft = toDraft(this.options.value, this.options.fields);
-    this._applied = serializeFilterValue(this._draft, this.options.fields, this.options.serialize);
+    this._draft = toDraft(this.options.value, this.options.fields, this._timeZone);
+    this._applied = serializeFilterValue(this._draft, this.options.fields, this.options.serialize, this._timeZone);
     this._appliedDraft = draftKey(this._draft);
 
     const children = [];
@@ -187,7 +194,7 @@ export class FilterPanel extends Component {
    * @fires FilterPanel#change
    */
   setValue(value) {
-    this._draft = toDraft(value, this.options.fields);
+    this._draft = toDraft(value, this.options.fields, this._timeZone);
     this._commit(this._draftValue());
     this._writeControls();
     this._syncActions();
@@ -219,7 +226,7 @@ export class FilterPanel extends Component {
    * @fires FilterPanel#apply
    */
   reset() {
-    return this._replaceDraft(toDraft(this.options.value, this.options.fields));
+    return this._replaceDraft(toDraft(this.options.value, this.options.fields, this._timeZone));
   }
 
   /**
@@ -233,7 +240,7 @@ export class FilterPanel extends Component {
    * @fires FilterPanel#apply
    */
   clear() {
-    return this._replaceDraft(toDraft({}, this.options.fields), { commit: true });
+    return this._replaceDraft(toDraft({}, this.options.fields, this._timeZone), { commit: true });
   }
 
   /** Destroys the composed controls and puts an enhanced target back as found. @returns {void} */
@@ -584,7 +591,7 @@ export class FilterPanel extends Component {
 
   /** @returns {Record<string, unknown>} The draft, serialized and pruned. */
   _draftValue() {
-    return serializeFilterValue(this._draft, this.options.fields, this.options.serialize);
+    return serializeFilterValue(this._draft, this.options.fields, this.options.serialize, this._timeZone);
   }
 
   /** Pushes the draft back into the controls without re-entering the edit path. @returns {void} */
@@ -703,42 +710,48 @@ export function pruneValue(value) {
 
 /**
  * Converts anything a calendar day can arrive as — a `YYYY-MM-DD` string, an ISO timestamp, a
- * `Date`, Unix seconds or milliseconds — into the local calendar day a native date input holds.
+ * `Date`, Unix seconds or milliseconds — into the calendar day a native date input holds.
  * Numbers below 1e11 are read as seconds, which is the boundary between the two epochs in use.
+ * An instant — Unix seconds or milliseconds, an ISO timestamp — names the day it falls on in
+ * `timeZone`. A `Date` is read as a picked day and keeps its local calendar day, matching
+ * `calendarDayToUnixSeconds()` in the ZeyOS binding.
  * @param {unknown} value Candidate day.
+ * @param {string|null} [timeZone=null] IANA zone instants are read in; null for the runtime's own.
  * @returns {string} `YYYY-MM-DD`, or an empty string when there is no day in it.
  */
-export function toDateInput(value) {
+export function toDateInput(value, timeZone = null) {
   if (value === null || value === undefined || value === '') return '';
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? '' : localDay(value);
+  // A Date is a picked day — what Datebox and DatePicker hold — so its local day counts, as in
+  // `calendarDayToUnixSeconds()`; numbers and timestamps are instants, read in the zone.
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? '' : zoneDay(value.getTime(), null);
   if (typeof value === 'number') {
     if (!Number.isFinite(value)) return '';
-    return localDay(new Date(Math.abs(value) < SECONDS_CUTOFF ? value * 1000 : value));
+    return zoneDay(Math.abs(value) < SECONDS_CUTOFF ? value * 1000 : value, timeZone);
   }
   const text = String(value).trim();
   if (/^\d{4}-\d{2}-\d{2}$/.test(text)) return text;
-  if (/^-?\d+(\.\d+)?$/.test(text)) return toDateInput(Number(text));
+  if (/^-?\d+(\.\d+)?$/.test(text)) return toDateInput(Number(text), timeZone);
   const parsed = new Date(text);
-  return Number.isNaN(parsed.getTime()) ? '' : localDay(parsed);
+  return Number.isNaN(parsed.getTime()) ? '' : zoneDay(parsed.getTime(), timeZone);
 }
 
 /**
  * Serializes one calendar day at one edge of a range. The `from` edge takes the first instant of
- * its local day and the `to` edge the last, so a range whose ends name the same day still matches
- * everything recorded on it.
+ * its day and the `to` edge the last, so a range whose ends name the same day still matches
+ * everything recorded on it. The day is counted in `timeZone`: with `Europe/Vienna`, 2026-03-10
+ * starts at 23:00 UTC on the 9th whatever zone the browser is in.
  * @param {unknown} day Calendar day in any form `toDateInput()` accepts.
  * @param {FilterPanelEdge} edge Which end of the range the day is.
  * @param {FilterPanelSerialize} [serialize='seconds'] Output format, or a function receiving the
  *   edge instant as a `Date`.
+ * @param {string|null} [timeZone=null] IANA zone the day is counted in; null for the runtime's own.
  * @returns {unknown} The serialized day, or null when there is no day.
  */
-export function serializeDate(day, edge, serialize = 'seconds') {
-  const text = toDateInput(day);
+export function serializeDate(day, edge, serialize = 'seconds', timeZone = null) {
+  const text = toDateInput(day, timeZone);
   if (!text) return null;
   const [year, month, date] = text.split('-').map(Number);
-  const instant = edge === 'to'
-    ? new Date(year, month - 1, date, 23, 59, 59, 999)
-    : new Date(year, month - 1, date, 0, 0, 0, 0);
+  const instant = new Date(dayEdge(year, month - 1, date, edge, timeZone));
   if (typeof serialize === 'function') return serialize(instant, edge);
   if (serialize === 'ms') return instant.getTime();
   if (serialize === 'iso') return instant.toISOString();
@@ -775,9 +788,10 @@ export function normalizeOptions(options) {
  * Running it on a draft returns the same draft, so it is safe on either shape.
  * @param {Record<string, unknown>|null|undefined} value Incoming values keyed by field.
  * @param {Record<string, FilterPanelField>} fields Field metadata.
+ * @param {string|null} [timeZone=null] IANA zone incoming instants are read in.
  * @returns {Record<string, unknown>}
  */
-export function toDraft(value, fields) {
+export function toDraft(value, fields, timeZone = null) {
   const source = isPlainObject(value) ? value : {};
   /** @type {Record<string, unknown>} */
   const draft = {};
@@ -792,8 +806,8 @@ export function toDraft(value, fields) {
       draft[key] = selectionOf(raw, normalizeOptions(field.options));
     } else if (spec.kind === 'date') {
       draft[key] = spec.range
-        ? { from: toDateInput(readEdge(raw, 'from')), to: toDateInput(readEdge(raw, 'to')) }
-        : toDateInput(raw);
+        ? { from: toDateInput(readEdge(raw, 'from'), timeZone), to: toDateInput(readEdge(raw, 'to'), timeZone) }
+        : toDateInput(raw, timeZone);
     } else {
       draft[key] = spec.range
         ? { from: toNumberValue(readEdge(raw, 'from'), spec), to: toNumberValue(readEdge(raw, 'to'), spec) }
@@ -809,10 +823,11 @@ export function toDraft(value, fields) {
  * @param {Record<string, unknown>|null|undefined} value Values keyed by field, raw or drafted.
  * @param {Record<string, FilterPanelField>} fields Field metadata.
  * @param {FilterPanelSerialize} [serialize='seconds'] Date output format.
+ * @param {string|null} [timeZone=null] IANA zone calendar days are counted in.
  * @returns {Record<string, unknown>}
  */
-export function serializeFilterValue(value, fields, serialize = 'seconds') {
-  const draft = toDraft(value, fields);
+export function serializeFilterValue(value, fields, serialize = 'seconds', timeZone = null) {
+  const draft = toDraft(value, fields, timeZone);
   /** @type {Record<string, unknown>} */
   const result = {};
   for (const [key, declared] of Object.entries(fields ?? {})) {
@@ -832,14 +847,14 @@ export function serializeFilterValue(value, fields, serialize = 'seconds') {
     if (spec.kind === 'date') {
       if (!spec.range) {
         // A single date names a day, so it serializes as that day's first instant.
-        if (raw) result[key] = serializeDate(raw, 'from', serialize);
+        if (raw) result[key] = serializeDate(raw, 'from', serialize, timeZone);
         continue;
       }
       const days = /** @type {{from: string, to: string}} */ (raw);
       /** @type {Record<string, unknown>} */
       const range = {};
-      if (days.from) range.from = serializeDate(days.from, 'from', serialize);
-      if (days.to) range.to = serializeDate(days.to, 'to', serialize);
+      if (days.from) range.from = serializeDate(days.from, 'from', serialize, timeZone);
+      if (days.to) range.to = serializeDate(days.to, 'to', serialize, timeZone);
       if (Object.keys(range).length > 0) result[key] = range;
       continue;
     }
@@ -917,11 +932,113 @@ function toNumberValue(raw, spec) {
   return spec.integer ? Math.trunc(parsed) : parsed;
 }
 
-/** @param {Date} date Instant. @returns {string} Local `YYYY-MM-DD`. */
-function localDay(date) {
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-  return `${date.getFullYear()}-${month}-${day}`;
+/**
+ * Validates the `timeZone` option.
+ * @param {unknown} timeZone IANA zone name; nullish or empty means the runtime's own zone.
+ * @returns {string|null} Canonical zone name, or null for the runtime's own zone.
+ * @throws {RangeError} When the runtime does not know the zone.
+ */
+export function normalizePanelTimeZone(timeZone) {
+  if (timeZone === null || timeZone === undefined || timeZone === '') return null;
+  try {
+    return new Intl.DateTimeFormat('en-US', { timeZone: String(timeZone) }).resolvedOptions().timeZone;
+  } catch {
+    throw new RangeError(`Unknown time zone "${String(timeZone)}"`);
+  }
+}
+
+/**
+ * The calendar day an instant falls on, as `YYYY-MM-DD`, in a zone or the runtime's own.
+ * @param {number} milliseconds Epoch milliseconds.
+ * @param {string|null} timeZone IANA zone, or null.
+ * @returns {string}
+ */
+function zoneDay(milliseconds, timeZone) {
+  if (!timeZone) {
+    const date = new Date(milliseconds);
+    return isoDay(date.getFullYear(), date.getMonth(), date.getDate());
+  }
+  const wall = wallClock(milliseconds, timeZone);
+  return isoDay(wall.year, wall.month, wall.day);
+}
+
+/**
+ * Epoch milliseconds of the first (`from`) or last (`to`) instant of a calendar day in a zone.
+ * The last instant is one millisecond before the next day starts, which keeps a day that a
+ * daylight-saving change shortens or lengthens whole.
+ * @param {number} year Full year.
+ * @param {number} month Zero-based month.
+ * @param {number} day Day of the month.
+ * @param {FilterPanelEdge} edge Edge of the day.
+ * @param {string|null} timeZone IANA zone, or null for the runtime's own.
+ * @returns {number}
+ */
+function dayEdge(year, month, day, edge, timeZone) {
+  if (!timeZone) {
+    return (edge === 'to'
+      ? new Date(year, month, day, 23, 59, 59, 999)
+      : new Date(year, month, day, 0, 0, 0, 0)).getTime();
+  }
+  if (edge !== 'to') return zoneMidnight(year, month, day, timeZone);
+  const next = new Date(Date.UTC(year, month, day + 1));
+  return zoneMidnight(next.getUTCFullYear(), next.getUTCMonth(), next.getUTCDate(), timeZone) - 1;
+}
+
+/**
+ * The first instant of a calendar day in a zone: its midnight, or the first minute after a
+ * daylight-saving gap that swallows midnight. Two offset corrections settle it on either side of
+ * a change. This is the rule `zeyos/query.js` `calendarZone().midnightOf()` follows, so a day the
+ * panel serializes is the day a ZeyOS form stores.
+ * @param {number} year Full year.
+ * @param {number} month Zero-based month.
+ * @param {number} day Day of the month.
+ * @param {string} timeZone IANA zone.
+ * @returns {number} Epoch milliseconds.
+ */
+function zoneMidnight(year, month, day, timeZone) {
+  const target = Date.UTC(year, month, day);
+  const offsetAt = (milliseconds) => {
+    const wall = wallClock(milliseconds, timeZone);
+    return Date.UTC(wall.year, wall.month, wall.day) + wall.seconds * 1000
+      - Math.floor(milliseconds / 1000) * 1000;
+  };
+  const first = target - offsetAt(target);
+  const second = target - offsetAt(first);
+  let best = null;
+  for (const candidate of [second, first]) {
+    const wall = wallClock(candidate, timeZone);
+    if (wall.year !== year || wall.month !== month || wall.day !== day) continue;
+    if (!best || wall.seconds < best.seconds) best = { candidate, seconds: wall.seconds };
+  }
+  return best ? best.candidate : second;
+}
+
+/**
+ * The wall clock of an instant in a zone.
+ * @param {number} milliseconds Epoch milliseconds.
+ * @param {string} timeZone IANA zone.
+ * @returns {{year: number, month: number, day: number, seconds: number}} Zero-based month and
+ *   seconds since the zone's midnight.
+ */
+function wallClock(milliseconds, timeZone) {
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    timeZone, hourCycle: 'h23', year: 'numeric', month: 'numeric', day: 'numeric',
+    hour: 'numeric', minute: 'numeric', second: 'numeric'
+  });
+  /** @type {Record<string, number>} */
+  const parts = {};
+  for (const part of formatter.formatToParts(new Date(milliseconds))) parts[part.type] = Number(part.value);
+  return {
+    year: parts.year,
+    month: parts.month - 1,
+    day: parts.day,
+    seconds: (parts.hour % 24) * 3600 + parts.minute * 60 + parts.second
+  };
+}
+
+/** @param {number} year @param {number} month Zero-based. @param {number} day @returns {string} `YYYY-MM-DD`. */
+function isoDay(year, month, day) {
+  return `${String(year).padStart(4, '0')}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '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,30 +45,29 @@
   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 {
-  outline: 0;
+  outline-color: transparent;
   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

@@ -1,7 +1,7 @@
 // @ts-check
 import { h, safeHref } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
-import { avatarInitials } from '../avatar/avatar.js';
+import { AVATAR_TONES, avatarInitials, avatarTone } from '../avatar/avatar.js';
 import { badge } from '../badge/badge.js';
 
 /** @typedef {Record<string, any>} KanbanRecord */
@@ -28,6 +28,9 @@ import { badge } from '../badge/badge.js';
  * @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. */
@@ -132,6 +135,8 @@ export function createKanbanProgress(progress, label, valueText) {
 /**
  * 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.
  */
@@ -148,7 +153,8 @@ export function resolveKanbanAssignees(value) {
     if (!name) return null;
     const src = safeHref(source.src ?? source.image ?? null);
     const initials = source.initials == null ? avatarInitials(name) : String(source.initials);
-    return { name, src, initials };
+    const tone = AVATAR_TONES.includes(source.tone) ? source.tone : avatarTone(name);
+    return { name, src, initials, tone };
   }).filter(Boolean));
 }
 
@@ -185,8 +191,10 @@ export function createKanbanAvatars(people, max, groupLabel, overflowLabel) {
   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
+    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)));

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

@@ -120,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;
 }
 
@@ -134,7 +134,7 @@
 .zx-kanban-view__collapse:focus-visible,
 .zx-kanban-view__move-handle:focus-visible,
 .zx-kanban-view .zx-record-card:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -188,7 +188,7 @@
 }
 
 .zx-kanban-view :where(.zx-record-card[data-variant="outlined"]) {
-  box-shadow: var(--zx-shadow-1);
+  box-shadow: var(--zx-surface-shadow);
 }
 
 /* The shared card anatomy stays intact; Kanban constrains media to a compact thumbnail. */
@@ -348,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);
 }
@@ -419,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 {
@@ -470,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,
@@ -561,7 +563,7 @@
 }
 
 .zx-kanban-view__add:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -651,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);
@@ -704,7 +707,6 @@
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-variant-numeric: tabular-nums;
-  letter-spacing: .02em;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -767,6 +769,11 @@
   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;
@@ -776,17 +783,27 @@
   overflow: hidden;
   border: 1px solid var(--zx-color-bg-surface);
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-bg-muted);
-  color: var(--zx-color-text-muted);
+  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-accent-subtle);
-  color: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text-muted);
 }
 
 .zx-kanban-view__avatar-image {
@@ -795,13 +812,20 @@
   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: var(--zx-text-xs);
-  font-weight: 600;
+  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