@zeyos/zx 4.3.4 → 5.0.0

package/src/components/calendar/calendar.css

@@ -1,6 +1,6 @@
 .zx-calendar {
   --zx-calendar-time-axis: 4.75rem;
-  --zx-calendar-slot-height: 24px;
+  --zx-calendar-slot-height: var(--zx-space-6);
   --zx-calendar-event-color: var(--zx-color-accent);
   position: relative;
   container-type: inline-size;
@@ -40,13 +40,15 @@
 
 .zx-calendar__navigation { justify-self: start; gap: var(--zx-space-1); }
 .zx-calendar__commands { justify-self: end; gap: var(--zx-space-3); }
+/* The view switch is one framed control with the current view on the neutral current fill — the
+   same recipe as ListToolbar's view switch and the segmented Tabbox. */
 .zx-calendar__views {
   block-size: var(--zx-control-height);
   gap: 2px;
   overflow-x: auto;
-  border-radius: 0;
-  background: var(--zx-color-bg-muted);
-  padding: 3px;
+  border: 1px solid var(--zx-color-border-control);
+  border-radius: var(--zx-control-radius);
+  padding: 2px;
 }
 
 .zx-calendar__toolbar-button,
@@ -75,32 +77,32 @@
   block-size: 100%;
   min-block-size: 0;
   border-color: transparent;
-  border-radius: 0;
+  border-radius: max(0px, calc(var(--zx-control-radius) - 2px));
   background: transparent;
+  color: var(--zx-color-text-muted);
   padding-inline: var(--zx-space-3);
+  font-weight: var(--zx-weight-medium);
 }
+.zx-calendar__view-button:hover:not(:disabled) { color: var(--zx-color-text); }
 .zx-calendar__view-button[aria-pressed="true"] {
-  position: relative;
-  z-index: 1;
-  border-color: var(--zx-color-border-control);
-  background: var(--zx-color-bg-control);
-  box-shadow: var(--zx-shadow-2);
+  background: var(--zx-color-bg-current);
   color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-calendar__new {
   gap: var(--zx-space-2);
-  border-color: var(--zx-color-accent);
+  border-color: var(--zx-color-accent-solid);
   border-radius: var(--zx-control-radius);
-  background: var(--zx-color-accent);
-  color: var(--zx-color-on-accent);
+  background: var(--zx-color-accent-solid);
+  color: var(--zx-color-on-accent-solid);
   padding-inline: var(--zx-space-3);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
 }
 
 .zx-calendar__toolbar-button:hover:not(:disabled),
 .zx-calendar__view-button:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--zx-color-bg-hover); }
-.zx-calendar__new:hover:not(:disabled) { background: var(--zx-color-accent-hover); }
+.zx-calendar__new:hover:not(:disabled) { border-color: var(--zx-color-accent-solid-hover); background: var(--zx-color-accent-solid-hover); }
 .zx-calendar button:disabled { cursor: default; opacity: .55; }
 
 .zx-calendar__toolbar-button:focus-visible,
@@ -126,7 +128,8 @@
   overflow: hidden;
   color: var(--zx-color-text);
   font-size: var(--zx-text-lg);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
+  letter-spacing: var(--zx-tracking-title);
   line-height: 1.25;
   text-align: center;
   text-overflow: ellipsis;
@@ -148,10 +151,10 @@
 }
 
 .zx-calendar__time-header,
-.zx-calendar__all-day { border-block-end: 1px solid var(--zx-color-border); }
+.zx-calendar__all-day { border-block-end: 1px solid var(--zx-color-border-subtle); }
 .zx-calendar__time-corner,
 .zx-calendar__all-day-label {
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   color: var(--zx-color-text-muted);
 }
 
@@ -167,7 +170,7 @@
   place-content: center;
   border: 0;
   border-radius: 0;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
   font: inherit;
@@ -176,8 +179,8 @@
 
 .zx-calendar__day-heading:last-child { border-inline-end: 0; }
 .zx-calendar__day-heading:hover:not(:disabled) { background: var(--zx-color-bg-hover); }
-.zx-calendar__day-heading[aria-current="date"] .zx-calendar__day-number { color: var(--zx-color-accent); font-weight: 750; }
-.zx-calendar__day-weekday { color: var(--zx-color-text-muted); font-size: var(--zx-text-xs); text-transform: uppercase; letter-spacing: .04em; }
+.zx-calendar__day-heading[aria-current="date"] .zx-calendar__day-number { color: var(--zx-color-accent); font-weight: 650; }
+.zx-calendar__day-weekday { color: var(--zx-color-text-muted); font-size: var(--zx-text-xs); font-weight: var(--zx-weight-medium); }
 .zx-calendar__day-number { font-size: var(--zx-text-sm); }
 
 .zx-calendar__all-day { min-block-size: calc(var(--zx-control-height) + var(--zx-space-2)); }
@@ -198,7 +201,7 @@
   overflow: hidden;
 }
 
-.zx-calendar__all-day-cell { border-inline-end: 1px solid var(--zx-color-border); }
+.zx-calendar__all-day-cell { border-inline-end: 1px solid var(--zx-color-border-subtle); }
 .zx-calendar__all-day-cell:last-of-type { border-inline-end: 0; }
 
 .zx-calendar__time-scroller {
@@ -212,7 +215,7 @@
 .zx-calendar__time-axis {
   position: relative;
   z-index: 2;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   background: var(--zx-color-bg-surface);
 }
 
@@ -247,8 +250,8 @@
   min-inline-size: 0;
   border: 0;
   border-radius: 0;
-  border-block-start: 1px solid var(--zx-color-border);
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-block-start: 1px solid var(--zx-color-border-subtle);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   background: var(--zx-color-bg-surface);
   padding: 0;
   cursor: crosshair;
@@ -321,7 +324,7 @@
 }
 
 .zx-calendar__event-time { overflow: hidden; color: var(--zx-color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
-.zx-calendar__event-title { overflow: hidden; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
+.zx-calendar__event-title { overflow: hidden; font-weight: var(--zx-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
 .zx-calendar__event-location { overflow: hidden; color: var(--zx-color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
 
 .zx-calendar__event-resize {
@@ -378,7 +381,8 @@
   inset-inline-start: var(--zx-space-1);
   color: var(--zx-color-danger);
   font-size: var(--zx-text-xs);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
+  font-variant-numeric: tabular-nums;
   transform: translateY(-100%);
 }
 
@@ -386,19 +390,19 @@
 .zx-calendar__agenda-day {
   display: grid;
   grid-template-columns: minmax(10rem, 22%) minmax(0, 1fr);
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-border-subtle);
 }
 .zx-calendar__agenda-heading {
   align-self: stretch;
   appearance: none;
   border: 0;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   border-radius: 0;
   background: var(--zx-color-bg-muted);
   color: var(--zx-color-text);
   padding: var(--zx-space-3);
   font: inherit;
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
   text-align: start;
   cursor: pointer;
 }
@@ -408,7 +412,7 @@
   min-inline-size: 0;
 }
 .zx-calendar__agenda-empty { margin: 0; color: var(--zx-color-text-muted); padding: var(--zx-space-3); }
-.zx-calendar__agenda-events > .zx-calendar__event { border-block-end: 1px solid var(--zx-color-border); }
+.zx-calendar__agenda-events > .zx-calendar__event { border-block-end: 1px solid var(--zx-color-border-subtle); }
 .zx-calendar__agenda-events > .zx-calendar__event:last-child { border-block-end: 0; }
 .zx-calendar__event[data-variant="agenda"] .zx-calendar__event-action {
   grid-template-columns: minmax(6rem, 18%) minmax(0, 1fr);
@@ -440,7 +444,7 @@
   grid-template-columns: auto minmax(0, 1fr);
 }
 
-.zx-calendar__month-weekdays { border-block-end: 1px solid var(--zx-color-border); }
+.zx-calendar__month-weekdays { border-block-end: 1px solid var(--zx-color-border-subtle); }
 .zx-calendar__month-week-gutter,
 .zx-calendar__month-week-number { inline-size: 2.5rem; }
 .zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@@ -449,17 +453,15 @@
   padding: var(--zx-space-2);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
   text-align: center;
-  text-transform: uppercase;
-  letter-spacing: .04em;
 }
-.zx-calendar__month-week { min-block-size: 7.5rem; border-block-end: 1px solid var(--zx-color-border); }
+.zx-calendar__month-week { min-block-size: 7.5rem; border-block-end: 1px solid var(--zx-color-border-subtle); }
 .zx-calendar__month-week-number {
   grid-row: 1;
   appearance: none;
   border: 0;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   border-radius: 0;
   background: var(--zx-color-bg-muted);
   color: var(--zx-color-text-muted);
@@ -488,7 +490,7 @@
   justify-content: flex-end;
   min-block-size: var(--zx-control-height);
   border: 0;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   border-radius: 0;
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
@@ -501,7 +503,7 @@
 .zx-calendar__month-day[data-other-month="true"] { color: var(--zx-color-text-muted); background: var(--zx-color-bg-muted); }
 .zx-calendar__month-day[aria-current="date"] {
   color: var(--zx-color-accent);
-  font-weight: 750;
+  font-weight: 650;
 }
 .zx-calendar__month-day:hover:not(:disabled) { background: var(--zx-color-bg-hover); }
 .zx-calendar__month-events {
@@ -545,8 +547,8 @@
   padding: var(--zx-space-5);
 }
 .zx-calendar__year-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; align-content: start; }
-.zx-calendar__year-heading { grid-column: 1 / -1; margin: 0 0 var(--zx-space-2); font-size: var(--zx-text-md); }
-.zx-calendar__year-weekday { color: var(--zx-color-text-muted); font-size: var(--zx-text-xs); font-weight: 650; text-align: center; }
+.zx-calendar__year-heading { grid-column: 1 / -1; margin: 0 0 var(--zx-space-2); font-size: var(--zx-text-md); font-weight: var(--zx-weight-semibold); }
+.zx-calendar__year-weekday { color: var(--zx-color-text-muted); font-size: var(--zx-text-xs); font-weight: var(--zx-weight-medium); text-align: center; }
 .zx-calendar__year-day,
 .zx-calendar__year-blank { aspect-ratio: 1; }
 .zx-calendar__year-day {
@@ -562,7 +564,7 @@
 }
 .zx-calendar__year-day[data-activity="1"] { background: color-mix(in srgb, var(--zx-color-accent) 10%, var(--zx-color-bg-surface)); }
 .zx-calendar__year-day[data-activity="2"] { background: color-mix(in srgb, var(--zx-color-accent) 20%, var(--zx-color-bg-surface)); }
-.zx-calendar__year-day[data-activity="3"] { background: color-mix(in srgb, var(--zx-color-accent) 32%, var(--zx-color-bg-surface)); font-weight: 700; }
+.zx-calendar__year-day[data-activity="3"] { background: color-mix(in srgb, var(--zx-color-accent) 32%, var(--zx-color-bg-surface)); font-weight: var(--zx-weight-semibold); }
 .zx-calendar__year-day[aria-current="date"] { outline: 2px solid var(--zx-color-accent); outline-offset: -2px; }
 .zx-calendar__year-day:hover:not(:disabled) { background: var(--zx-color-bg-hover); }
 
@@ -574,7 +576,7 @@
   place-items: center;
   background: color-mix(in srgb, var(--zx-color-bg-surface) 82%, transparent);
   color: var(--zx-color-text);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
 }
 .zx-calendar__loading[hidden] { display: none; }
 .zx-calendar[data-state="loading"] .zx-calendar__body { opacity: .55; }
@@ -606,15 +608,13 @@
     inset-block-start: 0;
     z-index: 3;
     border-inline-end: 0;
-    border-block-end: 1px solid var(--zx-color-border);
+    border-block-end: 1px solid var(--zx-color-border-subtle);
   }
   .zx-calendar__agenda-events { grid-column: 1; }
   .zx-calendar__event[data-variant="agenda"] .zx-calendar__event-action { grid-template-columns: 5.5rem minmax(0, 1fr); }
   .zx-calendar__year { grid-template-columns: 1fr; padding: var(--zx-space-3); }
 }
 
-[data-zx-density="compact"] .zx-calendar { --zx-calendar-slot-height: 20px; }
-
 @media (prefers-reduced-motion: no-preference) {
   .zx-calendar__event { transition: transform var(--zx-dur-fast) var(--zx-ease), opacity var(--zx-dur-fast) var(--zx-ease); }
   .zx-calendar__toolbar-button,

package/src/components/calendar/calendar.js

@@ -1,6 +1,7 @@
 import { Component } from '../../core/component.js';
 import { h } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
+import { printf } from '../../core/i18n.js';
 import {
   CALENDAR_VIEWS, addCalendarDays, calendarDayDifference, calendarDayKey,
   calendarEventIntersects, calendarEventSpansDays, calendarPageDate, calendarRange,
@@ -189,7 +190,7 @@ export class Calendar extends Component {
       ref: 'views',
       class: 'zx-calendar__views',
       role: 'group',
-      ariaLabel: 'Calendar view'
+      ariaLabel: this._message('calendar.viewSwitch', 'Calendar view')
     }, this._views.map((view) => h('button', {
       type: 'button',
       class: 'zx-calendar__view-button',
@@ -643,7 +644,7 @@ export class Calendar extends Component {
             eventCount: String(count)
           },
           ariaCurrent: sameCalendarDay(day, this._now()) ? 'date' : null,
-          ariaLabel: `${this._format(day, { dateStyle: 'full' })}, ${count} ${count === 1 ? 'event' : 'events'}`,
+          ariaLabel: this._dayCountLabel(day, count),
           disabled: this.options.disabled
         }, this._format(day, { day: 'numeric' })));
       }
@@ -708,7 +709,7 @@ export class Calendar extends Component {
             activity: String(Math.min(3, count))
           },
           ariaCurrent: sameCalendarDay(day, this._now()) ? 'date' : null,
-          ariaLabel: `${this._format(day, { dateStyle: 'full' })}, ${count} ${count === 1 ? 'event' : 'events'}`,
+          ariaLabel: this._dayCountLabel(day, count),
           disabled: this.options.disabled
         }, String(day.getDate())));
       }
@@ -1473,6 +1474,35 @@ export class Calendar extends Component {
       if (!this._destroyed) this.refs.status.textContent = message;
     });
   }
+
+  /**
+   * Names a month or year cell by its date and how many events it holds. Singular and plural are
+   * separate keys because a language that inflects the noun cannot reach it from one template.
+   * @param {Date} day Day the cell stands for.
+   * @param {number} count Events on that day.
+   * @returns {string}
+   */
+  _dayCountLabel(day, count) {
+    const date = this._format(day, { dateStyle: 'full' });
+    return count === 1
+      ? this._message('calendar.dayEvent', '%1, %2 event', date, count)
+      : this._message('calendar.dayEvents', '%1, %2 events', date, count);
+  }
+
+  /**
+   * Resolves a message through the host translator, falling back to the built-in English text.
+   *
+   * Distinct from `msg()`: the built-in `msg` option answers the calendar's own vocabulary, so a
+   * dotted key falls past it to the host translator, which is what these strings never had.
+   * @param {string} key Message key.
+   * @param {string} fallback Built-in text, with `%1`-style placeholders.
+   * @param {...unknown} args Interpolation values.
+   * @returns {string}
+   */
+  _message(key, fallback, ...args) {
+    const message = this.msg(key, ...args);
+    return message === key ? printf(fallback, args) : message;
+  }
 }
 
 /** @param {unknown} value @returns {CalendarView[]} */

package/src/components/card/card.css

@@ -107,9 +107,9 @@
   min-inline-size: 0;
   margin: 0;
   font-size: var(--zx-text-lg);
-  font-weight: 700;
+  font-weight: 650;
   line-height: 1.3;
-  letter-spacing: -0.012em;
+  letter-spacing: var(--zx-tracking-title);
 }
 
 .zx-card__primary,

package/src/components/card/card.js

@@ -86,7 +86,7 @@ export class Card extends Component {
         ref: 'actions',
         class: 'zx-card__actions',
         role: 'group',
-        ariaLabel: 'Card actions',
+        ariaLabel: this._message('card.actions', 'Card actions'),
         hidden: true
       });
       const content = h('div', { ref: 'content', class: 'zx-card__content', hidden: true });
@@ -225,6 +225,17 @@ export class Card extends Component {
     if (!this.refs.header) return;
     this.refs.header.hidden = this._title === '' && this.refs.actions.childElementCount === 0;
   }
+
+  /**
+   * Resolves a message through the host translator, falling back to the built-in English text.
+   * @param {string} key Message key.
+   * @param {string} fallback English default.
+   * @returns {string}
+   */
+  _message(key, fallback) {
+    const message = this.msg(key);
+    return message === key ? fallback : message;
+  }
 }
 
 /** @param {Element} host @param {CardContent} content @param {string} label */

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

@@ -107,9 +107,11 @@
   box-shadow: var(--zx-focus-ring);
 }
 
+/* A selected card is a pick, so it keeps the accent — as a tint over the card and its outline,
+   not a doubled frame. */
 .zx-record-card[data-selected="true"] {
   border-color: var(--zx-color-accent);
-  box-shadow: inset 0 0 0 1px var(--zx-color-accent);
+  background: var(--zx-color-bg-selected);
 }
 
 .zx-record-card__preview {
@@ -224,7 +226,7 @@
   margin: 0;
   overflow-wrap: anywhere;
   font-size: var(--zx-text-lg);
-  font-weight: 700;
+  font-weight: 650;
   line-height: 1.35;
 }
 
@@ -317,7 +319,7 @@
   overflow: hidden;
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
   line-height: 1.35;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -475,7 +477,7 @@
 
 .zx-card-view .zx-record-card__heading {
   font-size: var(--zx-text-md);
-  font-weight: 600;
+  font-weight: var(--zx-weight-semibold);
   line-height: 1.3;
 }
 
@@ -521,8 +523,8 @@
   align-items: center;
   gap: var(--zx-space-1);
   max-inline-size: 100%;
-  border: 1px solid var(--zx-color-border);
-  border-radius: var(--zx-radius-full);
+  /* A tinted label/value pair, not a box inside the card's box: the fill alone separates it. */
+  border-radius: var(--zx-radius-sm);
   background: var(--zx-color-bg-muted);
   padding: calc(var(--zx-space-1) / 2) var(--zx-space-2);
 }
@@ -530,7 +532,7 @@
 .zx-card-view .zx-record-card__label {
   flex: none;
   font-size: var(--zx-text-xs);
-  font-weight: 500;
+  font-weight: var(--zx-weight-medium);
   line-height: 1.2;
 }
 
@@ -589,3 +591,4 @@
     min-block-size: 44px;
   }
 }
+.zx-card-view .zx-record-card[data-selection-trigger="card"] { cursor: pointer; }

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

@@ -1,6 +1,6 @@
 // @ts-check
 import { h, restoreTarget, snapshotTarget } from '../../core/dom.js';
-import { RecordView, readViewField } from '../view/record-view.js';
+import { normalizeViewFieldControls, RecordView, readViewField } from '../view/record-view.js';
 import {
   createRecordCard, resolveRecordActions
 } from './record-card.js';
@@ -21,10 +21,13 @@ import {
  * @property {import('../view/record-view.js').ViewSort|null} [sort=null] Initial shared sort.
  * @property {'local'|'server'} [sortMode='local'] Local sorting or event-only server sorting.
  * @property {false|'single'|'multi'} [selectable=false] Record selection behavior.
+ * @property {'checkbox'|'card'} [selectionTrigger='checkbox'] Select through a checkbox or the non-interactive card surface.
  * @property {unknown[]} [selection=[]] Initially selected record ids.
  * @property {string[]} [fieldOrder=[]] Preferred shared field order.
  * @property {string[]} [hiddenFields=[]] Initially hidden metadata fields.
- * @property {boolean} [fieldControls=true] Whether to expose shared field controls.
+ * @property {boolean|import('../view/record-view.js').ViewFieldControlsConfig} [fieldControls=true]
+ * Whether to expose shared field controls. `true` renders the chooser in the card toolbar and
+ * `false` omits it; an object customises its `label` and mounts it into `target`.
  * @property {string|Node|(()=>string|Node)|null} [emptyText=null] Empty-result content.
  * @property {RecordCardValueSource} [titleField=null] Title field id or explicit resolver.
  * @property {RecordCardValueSource} [subtitleField=null] Subtitle field id or explicit resolver.
@@ -79,6 +82,7 @@ export class CardView extends RecordView {
   /** @type {Readonly<CardViewOptions & RecordViewOptions>} */
   static defaults = {
     ...RecordView.defaults,
+    selectionTrigger: 'checkbox',
     titleField: null,
     subtitleField: null,
     preview: undefined,
@@ -124,10 +128,12 @@ export class CardView extends RecordView {
       this._initRecordView(root);
       root.setAttribute('aria-label', String(options.label || 'Card view'));
       const sort = h('label', { ref: 'sortWrap', class: 'zx-card-view__sort' },
-        h('span', { class: 'zx-card-view__sort-label' }, 'Sort'),
-        h('select', { ref: 'sort', ariaLabel: 'Sort cards' }));
+        h('span', { class: 'zx-card-view__sort-label' }, this._message('cardView.sort', 'Sort')),
+        h('select', { ref: 'sort', ariaLabel: this._message('cardView.sortCards', 'Sort cards') }));
       const toolbar = h('div', { class: 'zx-record-view__toolbar zx-card-view__toolbar' }, sort);
-      if (this.options.fieldControls) toolbar.append(this._createViewFieldControls('Fields'));
+      if (normalizeViewFieldControls(this.options.fieldControls).enabled) {
+        this._mountViewFieldControls(toolbar);
+      }
       const content = h('div', { ref: 'content', class: 'zx-card-view__content' });
       root.replaceChildren(toolbar, content);
       this.listen(this.refs.sort, 'change', () => this._changeCardSort());
@@ -140,6 +146,7 @@ export class CardView extends RecordView {
       this._renderCards();
       return root;
     } catch (error) {
+      this._removeViewFieldControls();
       if (!created) restoreTarget(root, this._cardOriginal);
       throw error;
     }
@@ -212,16 +219,18 @@ export class CardView extends RecordView {
     if (!this.refs?.sort || !this.refs?.sortWrap) return;
     const select = /** @type {HTMLSelectElement} */ (this.refs.sort);
     const sort = this.getSort();
-    const options = [h('option', { value: '', selected: sort === null }, 'Unsorted')];
+    const options = [h('option', {
+      value: '', selected: sort === null
+    }, this._message('cardView.unsorted', 'Unsorted'))];
     for (const field of this.getFields().filter((candidate) => candidate.sortable)) {
       options.push(h('option', {
         selected: sort?.id === field.id && sort.dir === 'asc',
         dataset: { sortId: field.id, sortDir: 'asc' }
-      }, `${field.label} (ascending)`));
+      }, this._message('cardView.sortAscending', '%1 (ascending)', field.label)));
       options.push(h('option', {
         selected: sort?.id === field.id && sort.dir === 'desc',
         dataset: { sortId: field.id, sortDir: 'desc' }
-      }, `${field.label} (descending)`));
+      }, this._message('cardView.sortDescending', '%1 (descending)', field.label)));
     }
     select.replaceChildren(...options);
     /** @type {HTMLElement} */ (this.refs.sortWrap).hidden = options.length === 1;
@@ -286,6 +295,7 @@ export class CardView extends RecordView {
         link: options.link,
         actions: options.actions,
         selectable: this.options.selectable,
+        selectionTrigger: options.selectionTrigger,
         selected: this._isViewSelected(id),
         variant: this._cardVariant,
         headingLevel: this._cardHeadingLevel
@@ -355,6 +365,11 @@ export class CardView extends RecordView {
       return;
     }
     if (isInteractiveWithin(target, card) || hasCardTextSelection(card)) return;
+    if (this.options.selectable && this._cardOptions().selectionTrigger === 'card') {
+      this.toggleSelection(id, { range: event.shiftKey });
+      card.focus({ preventScroll: true });
+      return;
+    }
     this._activateCard(record, id, index, event);
     if (this.options.selectable === 'single') this.toggleSelection(id, { selected: true });
   }
@@ -381,7 +396,8 @@ export class CardView extends RecordView {
     const id = this._viewRecordId(record);
     if (event.key === 'Enter') {
       event.preventDefault();
-      this._activateCard(record, id, index, event);
+      if (this.options.selectable && this._cardOptions().selectionTrigger === 'card') this.toggleSelection(id);
+      else this._activateCard(record, id, index, event);
     } else if (event.key === ' ' && this.options.selectable) {
       event.preventDefault();
       this.toggleSelection(id);

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

@@ -62,6 +62,7 @@ import { readViewField, renderViewField } from '../view/record-view.js';
  * @property {RecordCardLink|((record:ViewRecord,index:number)=>RecordCardLink)} [link]
  * @property {RecordCardAction[]|((record:ViewRecord,index:number)=>RecordCardAction[])} [actions=[]]
  * @property {false|'single'|'multi'} [selectable=false] Selection presentation.
+ * @property {'checkbox'|'card'} [selectionTrigger='checkbox'] Selection affordance for owning views.
  * @property {boolean} [selected=false] Current selection state.
  * @property {'outlined'|'raised'|'filled'} [variant='outlined'] Surface treatment.
  * @property {1|2|3|4|5|6} [headingLevel=3] Card title heading level.
@@ -84,7 +85,8 @@ import { readViewField, renderViewField } from '../view/record-view.js';
  *
  * The returned `<li>` belongs in a semantic `<ul>`/`<ol>`. When selectable its global
  * `aria-description` announces selection without applying the unsupported `aria-selected` state
- * to a listitem; multi-selection also adds a native checkbox. It deliberately remains a listitem
+ * to a listitem; multi-selection adds a native checkbox unless the owner opts into card-surface
+ * selection. It deliberately remains a listitem
  * rather than becoming an ARIA option because cards may contain native links and buttons, which
  * the listbox pattern does not permit inside an option. Preview images are paired with a stable
  * fallback. The owning component listens for image `error` and marks the fallback.
@@ -129,7 +131,7 @@ export function createRecordCard(record, index, options = {}) {
   const titleRow = titlePrefix
     ? h('div', { class: 'zx-record-card__title-row' }, titlePrefix, heading)
     : heading;
-  const selection = selectable === 'multi' ? h('label', {
+  const selection = selectable === 'multi' && options.selectionTrigger !== 'card' ? h('label', {
     class: 'zx-record-card__selection'
   }, h('input', {
     type: 'checkbox',
@@ -154,10 +156,12 @@ export function createRecordCard(record, index, options = {}) {
     tabindex: 0,
     ariaDescription: selectable ? selected ? 'Selected' : 'Not selected' : undefined,
     ariaLabelledby: headingId,
+    ariaKeyshortcuts: selectable && options.selectionTrigger === 'card' ? 'Space Enter' : undefined,
     dataset: {
       recordIndex: String(index),
       variant: normalizeVariant(options.variant),
-      selected: String(selected)
+      selected: String(selected),
+      selectionTrigger: selectable && options.selectionTrigger === 'card' ? 'card' : 'checkbox'
     }
   }, preview ? createPreview(preview) : null, body));
   return card;

package/src/components/chart/chart.css

@@ -8,6 +8,9 @@
 .zx-chart__viewport {
   position: relative;
   inline-size: 100%;
+  /* The automatic minimum width would carry the 220px floor through the aspect ratio (587px at
+     16 / 6) and push the canvas out of a narrow card; narrow, the chart grows taller instead. */
+  min-inline-size: 0;
   min-block-size: 220px;
   aspect-ratio: var(--zx-chart-aspect-ratio, 16 / 9);
 }
@@ -54,7 +57,7 @@
   border-collapse: collapse;
 }
 
-.zx-chart__table caption { margin-block-end: var(--zx-space-2); font-weight: 700; text-align: start; }
+.zx-chart__table caption { margin-block-end: var(--zx-space-2); font-weight: var(--zx-weight-semibold); text-align: start; }
 .zx-chart__table th,
 .zx-chart__table td { border-block-end: 1px solid var(--zx-color-border); padding: var(--zx-space-2); text-align: end; }
 .zx-chart__table th:first-child,