@zeyos/zx 4.4.0 → 5.0.0

package/src/components/file-item/file-item.js

@@ -2,6 +2,7 @@
 import { Component } from '../../core/component.js';
 import { h, restoreTarget, snapshotTarget } from '../../core/dom.js';
 import { formatFileSize } from '../../core/format.js';
+import { getIconConfig, iconNames } from '../../core/icons.js';
 import { isElement } from '../../core/util.js';
 import { badge } from '../badge/badge.js';
 import {
@@ -20,9 +21,13 @@ import {
  * @property {unknown} [id=null] Application-owned file identifier included in events.
  * @property {string} [name=''] File name.
  * @property {number|string|null} [size=null] Byte count; invalid and negative values are omitted.
- * @property {string} [mime=''] MIME type.
+ * @property {string} [mime=''] MIME type. Shown as a readable type ("PDF", "Image"), never as
+ *   the raw string, and used to pick the icon.
+ * @property {string|null} [typeLabel=null] Type shown beside the size; null derives it from the
+ *   MIME type (or the name's extension when the MIME type is unfamiliar), an empty string hides it.
  * @property {EntityRefContent} [subtitle=null] Optional supporting text before generated metadata.
- * @property {EntityRefIcon} [icon='file'] File icon name, node, component, or lazy renderer.
+ * @property {EntityRefIcon} [icon='file'] File icon name, node, component, or lazy renderer. The
+ *   generic `'file'` glyph gives way to one for the MIME type when the active icon set has it.
  * @property {EntityRefMetadata[]} [metadata=[]] Additional labelled metadata.
  * @property {EntityRefLinkValue} [link=null] Optional safe native file/download link.
  * @property {EntityRefActionEntry[]} [actions=[]] File actions; application policy stays external.
@@ -30,7 +35,7 @@ import {
  * @property {string|null} [statusLabel=null] Overrides the generated state label; an empty string hides it.
  * @property {number|null} [progress=null] Completed percentage, clamped to 0–100.
  * @property {boolean} [indeterminate=false] Whether active progress has no known amount.
- * @property {'sm'|'md'|'lg'} [density='md'] File-identity presentation size.
+ * @property {'sm'|'md'|'lg'} [identitySize='md'] Size of the file's icon and name.
  * @property {boolean} [wrap=false] Whether long identity text may wrap.
  * @property {string} [actionsLabel='File actions'] Accessible name for secondary actions.
  * @property {string} [locale] Locale passed to `formatFileSize`.
@@ -46,6 +51,7 @@ import {
  * @property {string} name File name.
  * @property {number|null} size Byte count.
  * @property {string} mime MIME type.
+ * @property {string|null} typeLabel Explicit type label, or null for the one derived from `mime`.
  * @property {EntityRefContent} subtitle Supporting content.
  * @property {EntityRefIcon} icon File visual.
  * @property {EntityRefMetadata[]} metadata Additional metadata.
@@ -55,7 +61,7 @@ import {
  * @property {string|null} statusLabel Explicit state label, or null for the generated label.
  * @property {number|null} progress Completed percentage.
  * @property {boolean} indeterminate Unknown-progress state.
- * @property {'sm'|'md'|'lg'} density Identity size.
+ * @property {'sm'|'md'|'lg'} identitySize Size of the file's icon and name.
  * @property {boolean} wrap Wrapping state.
  * @property {string} actionsLabel Action-group label.
  * @property {string|undefined} locale File-size locale.
@@ -91,6 +97,7 @@ export class FileItem extends Component {
     name: '',
     size: null,
     mime: '',
+    typeLabel: null,
     subtitle: null,
     icon: 'file',
     metadata: [],
@@ -100,7 +107,7 @@ export class FileItem extends Component {
     statusLabel: null,
     progress: null,
     indeterminate: false,
-    density: 'md',
+    identitySize: 'md',
     wrap: false,
     actionsLabel: 'File actions'
   };
@@ -207,7 +214,7 @@ export class FileItem extends Component {
     const track = /** @type {HTMLElement} */ (this.refs.progressTrack);
     const fill = /** @type {HTMLElement} */ (this.refs.progressFill);
     root.dataset.status = state.status;
-    root.dataset.density = state.density;
+    root.dataset.identitySize = state.identitySize;
     this._entity.set(entityOptions(state));
 
     const label = fileStatusLabel(state);
@@ -282,6 +289,7 @@ export function normalizeFileItem(values = {}) {
     name: String(source.name ?? ''),
     size: rawSize !== null && Number.isFinite(rawSize) && rawSize >= 0 ? rawSize : null,
     mime: String(source.mime ?? ''),
+    typeLabel: source.typeLabel == null ? null : String(source.typeLabel),
     subtitle: normalizeFileContent(source.subtitle),
     icon: source.icon === undefined ? 'file' : source.icon,
     metadata: normalizeEntityRefMetadata(source.metadata),
@@ -292,7 +300,7 @@ export function normalizeFileItem(values = {}) {
     progress: rawProgress === null || !Number.isFinite(rawProgress)
       ? null : Math.min(100, Math.max(0, rawProgress)),
     indeterminate: Boolean(source.indeterminate),
-    density: source.density === 'sm' || source.density === 'lg' ? source.density : 'md',
+    identitySize: source.identitySize === 'sm' || source.identitySize === 'lg' ? source.identitySize : 'md',
     wrap: Boolean(source.wrap),
     actionsLabel: String(source.actionsLabel || 'File actions'),
     locale: normalizeLocale(source.locale)
@@ -302,7 +310,8 @@ export function normalizeFileItem(values = {}) {
 /** @param {FileItemState} state @returns {import('../entity-ref/entity-ref.js').EntityRefOptions} */
 function entityOptions(state) {
   const metadata = [];
-  if (state.mime) metadata.push({ label: 'Type', value: state.mime, showLabel: false });
+  const type = state.typeLabel ?? fileTypeLabel(state.mime, state.name);
+  if (type) metadata.push({ label: 'Type', value: type, showLabel: false });
   if (state.size !== null) {
     metadata.push({
       label: 'Size',
@@ -315,16 +324,141 @@ function entityOptions(state) {
     id: state.id,
     title: state.name,
     subtitle: state.subtitle,
-    icon: state.icon,
+    icon: state.icon === 'file' ? fileTypeIcon(state.mime) : state.icon,
     metadata,
     link: state.link,
     actions: state.actions,
-    size: state.density,
+    size: state.identitySize,
     wrap: state.wrap,
     actionsLabel: state.actionsLabel
   };
 }
 
+/**
+ * What a MIME type is called and drawn as. Labels are what a reader recognises — a format's own
+ * acronym where it has a well-known one, the family otherwise — and icons are Font Awesome names
+ * in order of preference, used only when the active icon set can draw them.
+ * @type {Readonly<Record<string, {label: string, icons: string[]}>>}
+ */
+const FILE_KINDS = Object.freeze({
+  pdf: { label: 'PDF', icons: ['file-pdf'] },
+  csv: { label: 'CSV', icons: ['file-csv', 'file-excel'] },
+  tsv: { label: 'TSV', icons: ['file-csv', 'file-excel'] },
+  spreadsheet: { label: 'Spreadsheet', icons: ['file-excel'] },
+  document: { label: 'Document', icons: ['file-word', 'file-lines'] },
+  presentation: { label: 'Presentation', icons: ['file-powerpoint'] },
+  text: { label: 'Text', icons: ['file-lines'] },
+  markdown: { label: 'Markdown', icons: ['file-lines'] },
+  html: { label: 'HTML', icons: ['file-code', 'code'] },
+  css: { label: 'CSS', icons: ['file-code', 'code'] },
+  javascript: { label: 'JavaScript', icons: ['file-code', 'code'] },
+  json: { label: 'JSON', icons: ['file-code', 'code'] },
+  xml: { label: 'XML', icons: ['file-code', 'code'] },
+  zip: { label: 'ZIP', icons: ['file-zipper'] },
+  gzip: { label: 'GZIP', icons: ['file-zipper'] },
+  tar: { label: 'TAR', icons: ['file-zipper'] },
+  rar: { label: 'RAR', icons: ['file-zipper'] },
+  sevenZip: { label: '7Z', icons: ['file-zipper'] },
+  email: { label: 'Email', icons: ['envelope'] },
+  calendar: { label: 'Calendar', icons: ['calendar'] },
+  contact: { label: 'Contact', icons: ['address-card'] },
+  image: { label: 'Image', icons: ['file-image', 'image'] },
+  video: { label: 'Video', icons: ['file-video', 'video'] },
+  audio: { label: 'Audio', icons: ['file-audio'] },
+  font: { label: 'Font', icons: ['font'] }
+});
+
+/** Exact MIME types, lower case and without parameters, mapped to their kind. */
+const MIME_KINDS = new Map(Object.entries({
+  'application/pdf': 'pdf',
+  'text/csv': 'csv',
+  'application/csv': 'csv',
+  'text/comma-separated-values': 'csv',
+  'text/tab-separated-values': 'tsv',
+  'application/vnd.ms-excel': 'spreadsheet',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'spreadsheet',
+  'application/vnd.oasis.opendocument.spreadsheet': 'spreadsheet',
+  'application/msword': 'document',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'document',
+  'application/vnd.oasis.opendocument.text': 'document',
+  'application/rtf': 'document',
+  'text/rtf': 'document',
+  'application/vnd.ms-powerpoint': 'presentation',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'presentation',
+  'application/vnd.oasis.opendocument.presentation': 'presentation',
+  'text/plain': 'text',
+  'text/markdown': 'markdown',
+  'text/x-markdown': 'markdown',
+  'text/html': 'html',
+  'application/xhtml+xml': 'html',
+  'text/css': 'css',
+  'text/javascript': 'javascript',
+  'application/javascript': 'javascript',
+  'application/json': 'json',
+  'application/ld+json': 'json',
+  'application/xml': 'xml',
+  'text/xml': 'xml',
+  'application/zip': 'zip',
+  'application/x-zip-compressed': 'zip',
+  'application/gzip': 'gzip',
+  'application/x-gzip': 'gzip',
+  'application/x-tar': 'tar',
+  'application/vnd.rar': 'rar',
+  'application/x-rar-compressed': 'rar',
+  'application/x-7z-compressed': 'sevenZip',
+  'message/rfc822': 'email',
+  'text/calendar': 'calendar',
+  'text/vcard': 'contact',
+  'text/x-vcard': 'contact'
+}));
+
+/** Top-level MIME types that name a whole family. */
+const MIME_FAMILIES = new Map([
+  ['image', 'image'], ['video', 'video'], ['audio', 'audio'], ['font', 'font'], ['text', 'text']
+]);
+
+/**
+ * @param {string} mime MIME type, possibly with parameters.
+ * @returns {{label: string, icons: string[]}|null}
+ */
+function fileKind(mime) {
+  const essence = String(mime ?? '').split(';')[0].trim().toLowerCase();
+  if (!essence) return null;
+  const kind = MIME_KINDS.get(essence) ?? MIME_FAMILIES.get(essence.split('/')[0]);
+  return kind ? FILE_KINDS[kind] : null;
+}
+
+/**
+ * A readable name for a file's type: "PDF", "CSV", "Image", "Spreadsheet". An unfamiliar MIME type
+ * falls back to the name's extension in capitals ("EXE"); without a MIME type, or with neither,
+ * the result is empty — a raw MIME string is never shown.
+ * @param {string} mime MIME type, possibly with parameters (`text/csv; charset=utf-8`).
+ * @param {string} [name=''] File name, consulted only when the MIME type is unfamiliar.
+ * @returns {string}
+ */
+export function fileTypeLabel(mime, name = '') {
+  if (!String(mime ?? '').trim()) return '';
+  const kind = fileKind(mime);
+  if (kind) return kind.label;
+  const extension = /\.([a-z0-9]{1,5})$/i.exec(String(name ?? ''))?.[1];
+  return extension ? extension.toUpperCase() : '';
+}
+
+/**
+ * The icon name for a MIME type: a type-specific glyph when the active icon set can draw one,
+ * `'file'` otherwise. Font Awesome resolves every name it is given; the bundled inline set only
+ * those it carries or that `registerIcons()` added, so a missing glyph never shows a placeholder.
+ * @param {string} mime MIME type, possibly with parameters.
+ * @returns {string}
+ */
+export function fileTypeIcon(mime) {
+  const candidates = fileKind(mime)?.icons ?? [];
+  if (!candidates.length) return 'file';
+  if (getIconConfig().provider === 'fontawesome') return candidates[0];
+  const available = new Set(iconNames());
+  return candidates.find((name) => available.has(name)) ?? 'file';
+}
+
 /** @param {FileItemState} state @returns {string} */
 function fileStatusLabel(state) {
   return state.statusLabel === null ? STATUS_LABELS[state.status] : state.statusLabel;

package/src/components/filter/filter.js

@@ -295,7 +295,7 @@ export class Filter extends Component {
       actionButton('add', this._value.root.id, 'plus', this._message('filter.addFilter', 'Add filter'), { ref: 'add', disabled: this._blocked() }),
       this.options.allowGroups ? actionButton('add-group', this._value.root.id, 'folder', this._message('filter.addGroup', 'Add group'), { disabled: this._blocked() }) : null,
       actionButton('clear', '', 'x', String(this.options.clearLabel ?? this._message('filter.clear', 'Clear')), { disabled: this._blocked() }),
-      this.options.showApply ? actionButton('apply', '', 'check', String(this.options.applyLabel ?? this._message('filter.apply', 'Apply filters')), { class: 'zx-button--primary', disabled: this._disabled }) : null
+      this.options.showApply ? actionButton('apply', '', 'check', String(this.options.applyLabel ?? this._message('filter.apply', 'Apply filters')), { kind: 'primary', disabled: this._disabled }) : null
     );
     this.el.replaceChildren(status, tree, actions);
     this.refs.status = status;
@@ -631,9 +631,13 @@ export class Filter extends Component {
   }
 }
 
-/** @param {string} action @param {string} id @param {string} iconName @param {string} label @param {Record<string,any>} [props={}] @returns {HTMLElement} */
+/** @param {string} action @param {string} id @param {string} iconName @param {string} label @param {Record<string,any>} [props={}] `kind` picks the Button kind; the rest are element properties. @returns {HTMLElement} */
 function actionButton(action, id, iconName, label, props = {}) {
-  return h('button', { type: 'button', class: ['zx-button', 'zx-button--sm', props.class].filter(Boolean), ...props, dataset: { filterAction: action, nodeId: id } }, icon(iconName, { size: 13 }), h('span', {}, label));
+  const { kind, ...rest } = props;
+  return h('button', {
+    type: 'button', class: 'zx-btn', ...rest,
+    dataset: { filterAction: action, nodeId: id, size: 'sm', ...(kind ? { kind } : {}) }
+  }, icon(iconName), h('span', {}, label));
 }
 
 /** @param {FilterField} field @param {any} node @param {any} value @param {boolean} multiple @param {boolean} disabled @param {number} [index=0] @param {FilterValueMessages} [messages=BUILT_IN_VALUE_MESSAGES] @returns {HTMLSelectElement|null} */

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

@@ -26,7 +26,7 @@
 .zx-filter-panel__label {
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-sm);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
 }
 
 .zx-filter-panel__input {

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

@@ -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;
 }
 
@@ -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,
@@ -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

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

@@ -1742,12 +1742,12 @@ export class KanbanView extends RecordView {
   /** @returns {HTMLElement} Built-in history controls. */
   _createHistoryControls() {
     this._undoButton = /** @type {HTMLButtonElement} */ (h('button', {
-      class: 'zx-button zx-button--sm', type: 'button', disabled: true,
-      dataset: { kanbanHistory: 'undo' }
+      class: 'zx-btn', type: 'button', disabled: true,
+      dataset: { kanbanHistory: 'undo', size: 'sm', kind: 'ghost' }
     }, this._text('undo')));
     this._redoButton = /** @type {HTMLButtonElement} */ (h('button', {
-      class: 'zx-button zx-button--sm', type: 'button', disabled: true,
-      dataset: { kanbanHistory: 'redo' }
+      class: 'zx-btn', type: 'button', disabled: true,
+      dataset: { kanbanHistory: 'redo', size: 'sm', kind: 'ghost' }
     }, this._text('redo')));
     const group = h('div', { class: 'zx-kanban-view__history', role: 'group' },
       this._undoButton, this._redoButton);