@zeyos/zx 4.3.0 → 4.4.0

package/src/components/calendar/calendar-model.js

@@ -70,6 +70,51 @@ export function calendarRange(view, anchor, options = {}) {
   return { start, end };
 }
 
+/**
+ * Returns the anchor date one visible period away from `anchor`.
+ *
+ * Month and year steps clamp the day of month into the target month instead of letting it
+ * overflow: `setMonth()` alone turns 31 January into 3 March, which makes February unreachable
+ * from a month-end anchor and leaves `prev()` on 31 March landing back inside March.
+ * @param {CalendarView} view Current view.
+ * @param {Date} anchor Current anchor date.
+ * @param {number} direction -1 for the previous period, 1 for the next.
+ * @param {{agendaDays?: number}} [options={}] Paging options.
+ * @returns {Date}
+ */
+export function calendarPageDate(view, anchor, direction, options = {}) {
+  const date = validDate(anchor, 'Calendar date');
+  const step = integer(direction, 'direction');
+  if (view === 'day') date.setDate(date.getDate() + step);
+  else if (view === 'agenda') {
+    date.setDate(date.getDate() + step * positiveInteger(options.agendaDays ?? 14, 'agendaDays'));
+  } else if (view === 'week') date.setDate(date.getDate() + step * 7);
+  else if (view === 'month') return addCalendarMonths(date, step);
+  else if (view === 'year') return addCalendarMonths(date, step * 12);
+  else throw new RangeError(`Unknown calendar view: ${view}`);
+  return date;
+}
+
+/**
+ * Adds whole months, clamping the day of month to the last day the target month actually has.
+ * @param {Date} value Local date.
+ * @param {number} months Months to add.
+ * @returns {Date}
+ */
+export function addCalendarMonths(value, months) {
+  const date = validDate(value, 'Calendar date');
+  const day = date.getDate();
+  date.setDate(1);
+  date.setMonth(date.getMonth() + integer(months, 'month amount'));
+  date.setDate(Math.min(day, daysInCalendarMonth(date.getFullYear(), date.getMonth())));
+  return date;
+}
+
+/** @param {number} year @param {number} month @returns {number} */
+function daysInCalendarMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+
 /**
  * Normalizes caller records atomically into the Calendar event contract.
  * @param {Record<string, any>[]} records Source records.

package/src/components/calendar/calendar.css

@@ -9,15 +9,20 @@
   min-inline-size: 0;
   overflow: hidden;
   border: 1px solid var(--zx-color-border);
-  border-radius: var(--zx-radius-lg);
+  border-radius: 0;
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
   font-size: var(--zx-text-sm);
 }
 
+/*
+ * The heading is the only elastic track. With `1fr auto 1fr` the end-justified commands group
+ * kept its min-content width inside a narrower `1fr` track and bled back over the centered
+ * heading; giving navigation and commands their natural width lets the heading ellipsize instead.
+ */
 .zx-calendar__toolbar {
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--zx-space-3);
   min-inline-size: 0;
@@ -35,7 +40,14 @@
 
 .zx-calendar__navigation { justify-self: start; gap: var(--zx-space-1); }
 .zx-calendar__commands { justify-self: end; gap: var(--zx-space-3); }
-.zx-calendar__views { overflow-x: auto; }
+.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;
+}
 
 .zx-calendar__toolbar-button,
 .zx-calendar__view-button,
@@ -59,15 +71,21 @@
 }
 
 .zx-calendar__toolbar-button:has(.zx-icon) { padding-inline: var(--zx-space-2); }
-.zx-calendar__view-button { border-inline-end-width: 0; padding-inline: var(--zx-space-3); }
-.zx-calendar__view-button:first-child { border-start-start-radius: var(--zx-control-radius); border-end-start-radius: var(--zx-control-radius); }
-.zx-calendar__view-button:last-child { border-inline-end-width: 1px; border-start-end-radius: var(--zx-control-radius); border-end-end-radius: var(--zx-control-radius); }
+.zx-calendar__view-button {
+  block-size: 100%;
+  min-block-size: 0;
+  border-color: transparent;
+  border-radius: 0;
+  background: transparent;
+  padding-inline: var(--zx-space-3);
+}
 .zx-calendar__view-button[aria-pressed="true"] {
   position: relative;
   z-index: 1;
-  border-color: var(--zx-color-accent);
-  background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+  box-shadow: var(--zx-shadow-2);
+  color: var(--zx-color-text);
 }
 
 .zx-calendar__new {
@@ -81,7 +99,7 @@
 }
 
 .zx-calendar__toolbar-button:hover:not(:disabled),
-.zx-calendar__view-button:hover:not(:disabled) { background: var(--zx-color-bg-hover); }
+.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 button:disabled { cursor: default; opacity: .55; }
 
@@ -148,6 +166,7 @@
   min-block-size: calc(var(--zx-control-height) + var(--zx-space-2));
   place-content: center;
   border: 0;
+  border-radius: 0;
   border-inline-end: 1px solid var(--zx-color-border);
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
@@ -227,6 +246,7 @@
 .zx-calendar__slot {
   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);
   background: var(--zx-color-bg-surface);

package/src/components/calendar/calendar.js

@@ -1,10 +1,11 @@
 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, calendarRange, cloneCalendarEvent,
-  layoutCalendarSpans, layoutTimedCalendarEvents, normalizeCalendarEvents,
+  calendarEventIntersects, calendarEventSpansDays, calendarPageDate, calendarRange,
+  cloneCalendarEvent, layoutCalendarSpans, layoutTimedCalendarEvents, normalizeCalendarEvents,
   shiftCalendarEvent, startOfCalendarDay
 } from './calendar-model.js';
 
@@ -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',
@@ -289,7 +290,9 @@ export class Calendar extends Component {
         ? changes.durationEditable : current.durationEditable,
       data: changes.data ?? current.data
     };
-    const [next] = normalizeCalendarEvents([source]);
+    // `source` is assembled from canonical keys, so the configured readers must not be reapplied
+    // here — but `dateUnit` must, or a numeric change is read in the wrong unit.
+    const [next] = normalizeCalendarEvents([source], { dateUnit: this.options.dateUnit });
     next.data = source.data;
     this._events = this._events.map((event, eventIndex) => eventIndex === index ? next : event);
     this._mutationVersions.delete(String(id));
@@ -641,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' })));
       }
@@ -706,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())));
       }
@@ -1335,13 +1338,9 @@ export class Calendar extends Component {
 
   /** @param {number} direction @returns {this} */
   _page(direction) {
-    const date = new Date(this._date.getTime());
-    if (this._view === 'day') date.setDate(date.getDate() + direction);
-    else if (this._view === 'agenda') date.setDate(date.getDate() + direction * this.options.agendaDays);
-    else if (this._view === 'week') date.setDate(date.getDate() + direction * 7);
-    else if (this._view === 'month') date.setMonth(date.getMonth() + direction);
-    else date.setFullYear(date.getFullYear() + direction);
-    return this.setDate(date);
+    return this.setDate(calendarPageDate(this._view, this._date, direction, {
+      agendaDays: this.options.agendaDays
+    }));
   }
 
   /** @param {{start: Date, end: Date}} range @returns {string} */
@@ -1475,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.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

@@ -1,6 +1,10 @@
 .zx-card-view {
-  --zx-card-view-min-card-width: 18rem;
+  --zx-card-view-min-card-width: 15rem;
   --zx-card-view-column-basis: 0%;
+  --zx-card-view-card-padding: var(--zx-space-3);
+  --zx-card-view-card-gap: var(--zx-space-2);
+  --zx-card-view-grid-gap: var(--zx-space-3);
+  --zx-card-view-preview-size: 1.75rem;
   inline-size: 100%;
   min-inline-size: 0;
   container-type: inline-size;
@@ -44,22 +48,23 @@
 }
 
 .zx-card-view__group + .zx-card-view__group {
-  margin-block-start: var(--zx-space-6);
+  margin-block-start: var(--zx-space-4);
 }
 
 .zx-card-view__group-heading {
-  margin: 0 0 var(--zx-space-3);
+  margin: 0 0 var(--zx-space-2);
   color: var(--zx-color-text);
-  font-size: var(--zx-text-lg);
-  line-height: 1.35;
+  font-size: var(--zx-text-sm);
+  font-weight: 600;
+  line-height: 1.3;
 }
 
 .zx-card-view__list {
   display: grid;
-  grid-template-columns: repeat(auto-fit,
+  grid-template-columns: repeat(auto-fill,
     minmax(min(100%, max(var(--zx-card-view-min-card-width),
-      calc(var(--zx-card-view-column-basis) - var(--zx-space-4)))), 1fr));
-  gap: var(--zx-space-4);
+      calc(var(--zx-card-view-column-basis) - var(--zx-card-view-grid-gap)))), 1fr));
+  gap: var(--zx-card-view-grid-gap);
   min-inline-size: 0;
   margin: 0;
   padding: 0;
@@ -102,7 +107,7 @@
   box-shadow: var(--zx-focus-ring);
 }
 
-.zx-record-card[aria-selected="true"] {
+.zx-record-card[data-selected="true"] {
   border-color: var(--zx-color-accent);
   box-shadow: inset 0 0 0 1px var(--zx-color-accent);
 }
@@ -181,6 +186,40 @@
   min-inline-size: 0;
 }
 
+.zx-record-card__eyebrow {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+
+.zx-record-card__eyebrow-group,
+.zx-record-card__title-prefix {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+  margin: 0;
+}
+
+.zx-record-card__eyebrow-group[data-card-slot="eyebrow-end"] {
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+.zx-record-card__title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+
+.zx-record-card__title-row > .zx-record-card__heading {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
 .zx-record-card__heading {
   margin: 0;
   overflow-wrap: anywhere;
@@ -387,3 +426,167 @@
       box-shadow var(--zx-dur-fast) var(--zx-ease);
   }
 }
+
+/*
+ * CardView intentionally presents the shared record-card anatomy more densely than Kanban. Keep
+ * these selectors scoped: Kanban owns its own board-card rhythm while both views retain the same
+ * safe, semantic markup and delegated interaction hooks.
+ */
+.zx-card-view .zx-record-card {
+  border-radius: var(--zx-radius-md);
+}
+
+.zx-card-view .zx-record-card:has(> .zx-record-card__preview) {
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+}
+
+.zx-card-view .zx-record-card__preview {
+  inline-size: var(--zx-card-view-preview-size);
+  block-size: var(--zx-card-view-preview-size);
+  margin-block-start: var(--zx-card-view-card-padding);
+  margin-inline-start: var(--zx-card-view-card-padding);
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  aspect-ratio: 1;
+}
+
+.zx-card-view .zx-record-card__preview .zx-icon {
+  inline-size: .875rem;
+  block-size: .875rem;
+}
+
+.zx-card-view .zx-record-card__body {
+  gap: var(--zx-card-view-card-gap);
+  padding: var(--zx-card-view-card-padding);
+}
+
+.zx-card-view .zx-record-card:has(> .zx-record-card__preview) .zx-record-card__body {
+  padding-inline-start: var(--zx-card-view-card-gap);
+}
+
+.zx-card-view .zx-record-card__header {
+  gap: var(--zx-space-2);
+}
+
+.zx-card-view .zx-record-card__selection {
+  min-block-size: 1.25rem;
+}
+
+.zx-card-view .zx-record-card__heading {
+  font-size: var(--zx-text-md);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.zx-card-view .zx-record-card__primary,
+.zx-card-view .zx-record-card__title {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.zx-card-view .zx-record-card__subtitle {
+  margin-block-start: calc(var(--zx-space-1) / 2);
+  overflow: hidden;
+  font-size: var(--zx-text-xs);
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-card-view .zx-record-card__actions {
+  flex-wrap: nowrap;
+  gap: calc(var(--zx-space-1) / 2);
+}
+
+.zx-card-view .zx-record-card__action {
+  min-block-size: 1.75rem;
+  border-color: transparent;
+  background: transparent;
+  padding-inline: var(--zx-space-2);
+  font-size: var(--zx-text-xs);
+}
+
+.zx-card-view .zx-record-card__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zx-space-1);
+}
+
+.zx-card-view .zx-record-card__field {
+  display: inline-flex;
+  flex: 0 1 auto;
+  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);
+  background: var(--zx-color-bg-muted);
+  padding: calc(var(--zx-space-1) / 2) var(--zx-space-2);
+}
+
+.zx-card-view .zx-record-card__label {
+  flex: none;
+  font-size: var(--zx-text-xs);
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.zx-card-view .zx-record-card__value {
+  overflow: hidden;
+  font-size: var(--zx-text-xs);
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-card-view .zx-card-view__group-empty {
+  padding: var(--zx-space-3);
+  font-size: var(--zx-text-sm);
+}
+
+.zx-card-view .zx-card-view__empty {
+  min-block-size: 6rem;
+  border-radius: var(--zx-radius-md);
+  padding: var(--zx-space-4);
+  font-size: var(--zx-text-sm);
+}
+
+.zx-card-view .zx-card-view__skeleton {
+  grid-template-columns: var(--zx-card-view-preview-size) minmax(0, 1fr);
+  gap: var(--zx-card-view-card-gap);
+  padding: var(--zx-card-view-card-padding);
+}
+
+.zx-card-view .zx-card-view__skeleton-preview {
+  grid-row: 1 / span 2;
+  inline-size: var(--zx-card-view-preview-size);
+  margin: 0;
+  aspect-ratio: 1;
+  border-radius: var(--zx-radius-sm);
+}
+
+.zx-card-view .zx-card-view__skeleton-line {
+  min-inline-size: 0;
+  block-size: .625rem;
+}
+
+.zx-card-view .zx-card-view__skeleton-line:nth-child(3) {
+  inline-size: 62%;
+}
+
+.zx-card-view .zx-card-view__skeleton-line:nth-child(4) {
+  grid-column: 1 / -1;
+  inline-size: 42%;
+}
+
+@media (pointer: coarse) {
+  .zx-card-view .zx-record-card__selection,
+  .zx-card-view .zx-record-card__action {
+    min-inline-size: 44px;
+    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.
@@ -39,7 +42,7 @@ import {
  * @property {string|((record:ViewRecord,index:number)=>unknown)|null} [groupBy=null]
  * Field id or local group resolver.
  * @property {unknown[]} [groupOrder=[]] Preferred group ids; missing ids render as empty groups.
- * @property {number|string} [minCardWidth='18rem'] Responsive minimum card width.
+ * @property {number|string} [minCardWidth='15rem'] Responsive minimum card width.
  * @property {number|null} [maxColumns=null] Maximum cards per row; null is unconstrained.
  * @property {'outlined'|'raised'|'filled'} [variant='outlined'] Card surface treatment.
  * @property {number} [loadingCount=6] Skeleton cards shown while loading.
@@ -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,
@@ -87,7 +91,7 @@ export class CardView extends RecordView {
     actions: [],
     groupBy: null,
     groupOrder: [],
-    minCardWidth: '18rem',
+    minCardWidth: '15rem',
     maxColumns: null,
     variant: 'outlined',
     loadingCount: 6,
@@ -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
@@ -329,7 +339,7 @@ export class CardView extends RecordView {
     for (const [id, card] of this._cardNodesById) {
       const selected = this._isViewSelected(id);
       card.dataset.selected = String(selected);
-      if (this.options.selectable) card.setAttribute('aria-selected', String(selected));
+      if (this.options.selectable) card.setAttribute('aria-description', selected ? 'Selected' : 'Not selected');
       const checkbox = /** @type {HTMLInputElement|null} */ (card.querySelector('[data-record-selection]'));
       if (checkbox) checkbox.checked = selected;
     }
@@ -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);
@@ -469,11 +485,11 @@ function normalizeGroupId(value) {
 
 /** @param {unknown} value @returns {string} */
 export function normalizeCardWidth(value) {
-  if (typeof value === 'number') return Number.isFinite(value) && value > 0 ? `${value}px` : '18rem';
+  if (typeof value === 'number') return Number.isFinite(value) && value > 0 ? `${value}px` : '15rem';
   const text = String(value ?? '').trim();
-  if (!text || text.length > 128 || /[;{}\u0000-\u001f\u007f]/.test(text)) return '18rem';
-  if (/(?:url|image|image-set|cross-fade|element|expression)\s*\(/i.test(text)) return '18rem';
-  if (typeof globalThis.CSS?.supports === 'function' && !globalThis.CSS.supports('width', text)) return '18rem';
+  if (!text || text.length > 128 || /[;{}\u0000-\u001f\u007f]/.test(text)) return '15rem';
+  if (/(?:url|image|image-set|cross-fade|element|expression)\s*\(/i.test(text)) return '15rem';
+  if (typeof globalThis.CSS?.supports === 'function' && !globalThis.CSS.supports('width', text)) return '15rem';
   return text;
 }