@zeyos/zx 4.4.0 → 5.2.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,
@@ -116,7 +118,7 @@
 .zx-calendar__more:focus-visible,
 .zx-calendar__month-week-number:focus-visible {
   z-index: 4;
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -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

@@ -47,7 +47,9 @@ import {
  * @property {CalendarReader} [eventEditable='editable'] Per-event move reader.
  * @property {CalendarReader} [eventDurationEditable='durationEditable'] Per-event resize reader.
  * @property {'milliseconds'|'seconds'} [dateUnit='milliseconds'] Unit for numeric event dates.
- * @property {Record<string, string>} [msg] Localized component messages.
+ * @property {Record<string, string>} [msg] Per-instance messages, keyed `calendar.*` (`calendar.today`,
+ *   `calendar.next`, …). The bare keys of earlier versions (`today`, `next`) are still read, after the
+ *   namespaced key, until the next major version.
  * @property {(event: CalendarEvent) => Node|string|null} [renderEvent] Optional safe event-content renderer.
  * @property {(event: CustomEvent<{events: CalendarEvent[]}>) => void} [oneventschange] Programmatic event-data listener.
  * @property {(event: CustomEvent<{view: CalendarView, oldView: CalendarView}>) => void} [onviewchange] View listener.
@@ -73,31 +75,6 @@ import {
 
 /** @typedef {{silent?: boolean}} CalendarSetOptions */
 
-const DEFAULT_MESSAGES = {
-  today: 'Today',
-  new: 'New',
-  agenda: 'Agenda',
-  day: 'Day',
-  week: 'Week',
-  month: 'Month',
-  year: 'Year',
-  previous: 'Previous period',
-  next: 'Next period',
-  allDay: 'All day',
-  noEvents: 'No events',
-  more: '+%1 more',
-  loading: 'Loading calendar…',
-  move: 'Move %1',
-  resize: 'Resize %1',
-  moveStarted: 'Moving %1. Use arrow keys, Space to drop, or Escape to cancel.',
-  resizeStarted: 'Resizing %1. Use arrow keys, Space to drop, or Escape to cancel.',
-  editPreview: '%1, %2 to %3',
-  editCancelled: 'Calendar edit cancelled.',
-  editCommitted: '%1 updated.',
-  calendar: 'Calendar',
-  weekNumber: 'Week %1'
-};
-
 /**
  * Accessible, dependency-free agenda/day/week/month/year scheduling surface.
  * @fires Calendar#viewchange
@@ -147,8 +124,7 @@ export class Calendar extends Component {
     eventLocation: 'location',
     eventEditable: 'editable',
     eventDurationEditable: 'durationEditable',
-    dateUnit: 'milliseconds',
-    msg: DEFAULT_MESSAGES
+    dateUnit: 'milliseconds'
   };
 
   /** @returns {HTMLElement} */
@@ -178,9 +154,9 @@ export class Calendar extends Component {
     this._nowTimer = null;
 
     const navigation = h('div', { class: 'zx-calendar__navigation' },
-      this._toolbarButton('previous', this.msg('previous'), 'chevron-left'),
-      this._toolbarButton('today', this.msg('today')),
-      this._toolbarButton('next', this.msg('next'), 'chevron-right'));
+      this._toolbarButton('previous', this.msg('calendar.previous'), 'chevron-left'),
+      this._toolbarButton('today', this.msg('calendar.today')),
+      this._toolbarButton('next', this.msg('calendar.next'), 'chevron-right'));
     const heading = h('h2', {
       ref: 'heading',
       class: 'zx-calendar__heading',
@@ -196,14 +172,14 @@ export class Calendar extends Component {
       class: 'zx-calendar__view-button',
       dataset: { calendarAction: 'view', view },
       disabled: this.options.disabled
-    }, this.msg(view))));
+    }, this.msg(`calendar.${view}`))));
     const commands = h('div', { class: 'zx-calendar__commands' }, views,
       h('button', {
         type: 'button',
         class: 'zx-calendar__new',
         dataset: { calendarAction: 'new' },
         disabled: this.options.disabled
-      }, icon('plus'), h('span', {}, this.msg('new'))));
+      }, icon('plus'), h('span', {}, this.msg('calendar.new'))));
     const toolbar = h('header', { class: 'zx-calendar__toolbar' }, navigation, heading, commands);
     const body = h('div', { ref: 'body', class: 'zx-calendar__body' });
     const loading = h('div', {
@@ -211,7 +187,7 @@ export class Calendar extends Component {
       class: 'zx-calendar__loading',
       role: 'status',
       hidden: true
-    }, this.msg('loading'));
+    }, this.msg('calendar.loading'));
     const status = h('div', {
       ref: 'status',
       class: 'zx-calendar__status',
@@ -220,7 +196,7 @@ export class Calendar extends Component {
       ariaAtomic: 'true'
     });
     root.replaceChildren(toolbar, body, loading, status);
-    root.setAttribute('aria-label', this.msg('calendar'));
+    root.setAttribute('aria-label', this.msg('calendar.label'));
     root.dataset.view = this._view;
     root.dataset.state = 'ready';
 
@@ -470,7 +446,7 @@ export class Calendar extends Component {
         }, this._format(day, { weekday: 'long', day: 'numeric', month: 'long' })));
       const entries = h('div', { class: 'zx-calendar__agenda-events', role: 'gridcell' });
       if (!events.length) {
-        entries.append(h('p', { class: 'zx-calendar__agenda-empty' }, this.msg('noEvents')));
+        entries.append(h('p', { class: 'zx-calendar__agenda-empty' }, this.msg('calendar.noEvents')));
       } else {
         for (const event of events) entries.append(this._eventElement(event, { variant: 'agenda', day }));
       }
@@ -576,7 +552,7 @@ export class Calendar extends Component {
   /** @param {Date[]} days @returns {HTMLElement} */
   _renderAllDayRail(days) {
     const rail = h('div', { class: 'zx-calendar__all-day' },
-      h('span', { class: 'zx-calendar__all-day-label' }, this.msg('allDay')));
+      h('span', { class: 'zx-calendar__all-day-label' }, this.msg('calendar.allDay')));
     const layer = h('div', {
       class: 'zx-calendar__all-day-grid',
       role: 'row',
@@ -625,7 +601,7 @@ export class Calendar extends Component {
         type: 'button',
         class: 'zx-calendar__month-week-number',
         dataset: { calendarAction: 'week', date: calendarDayKey(start) },
-        ariaLabel: this.msg('weekNumber', isoWeek(start)),
+        ariaLabel: this.msg('calendar.weekNumber', isoWeek(start)),
         disabled: this.options.disabled
       }, String(isoWeek(start))));
       const days = h('div', { class: 'zx-calendar__month-days' });
@@ -666,7 +642,7 @@ export class Calendar extends Component {
           dataset: { calendarAction: 'more', date: calendarDayKey(day), count: String(count) },
           style: { gridColumn: String(index + 1), gridRow: String(eventLimit + 1) },
           disabled: this.options.disabled
-        }, this.msg('more', count)));
+        }, this.msg('calendar.more', count)));
       }
       row.append(days, lanes);
       wrapper.append(row);
@@ -758,7 +734,7 @@ export class Calendar extends Component {
         type: 'button',
         class: 'zx-calendar__event-resize',
         dataset: { eventAction: 'resize', eventId: key },
-        ariaLabel: this.msg('resize', event.title),
+        ariaLabel: this.msg('calendar.resize', event.title),
         disabled: this.options.disabled
       }, h('span', { ariaHidden: 'true' })));
     }
@@ -886,7 +862,7 @@ export class Calendar extends Component {
       };
       control.setAttribute('aria-grabbed', 'true');
       control.closest('.zx-calendar__event')?.setAttribute('data-state', 'grabbed');
-      this._announce(this.msg(resize ? 'resizeStarted' : 'moveStarted', item.title));
+      this._announce(this.msg(resize ? 'calendar.resizeStarted' : 'calendar.moveStarted', item.title));
       return;
     }
     if (!this._keyboardEdit || String(this._keyboardEdit.event.id) !== String(item.id)) return;
@@ -919,7 +895,7 @@ export class Calendar extends Component {
       if (proposed.end > proposed.start) edit.event = proposed;
     }
     edit.control.closest('.zx-calendar__event')?.setAttribute('data-preview', this._eventTime(edit.event, edit.event.start));
-    this._announce(this.msg('editPreview', edit.event.title,
+    this._announce(this.msg('calendar.editPreview', edit.event.title,
       this._dateTimeLabel(edit.event.start), this._dateTimeLabel(edit.event.end)));
   }
 
@@ -1065,7 +1041,7 @@ export class Calendar extends Component {
       }
       wrapper.dataset.preview = this._eventTime(proposed, proposed.start);
     }
-    this._announce(this.msg('editPreview', proposed.title,
+    this._announce(this.msg('calendar.editPreview', proposed.title,
       this._dateTimeLabel(proposed.start), this._dateTimeLabel(proposed.end)));
   }
 
@@ -1255,7 +1231,7 @@ export class Calendar extends Component {
     edit.control.removeAttribute('aria-grabbed');
     edit.control.closest('.zx-calendar__event')?.removeAttribute('data-state');
     this._keyboardEdit = null;
-    this._announce(this.msg('editCancelled'));
+    this._announce(this.msg('calendar.editCancelled'));
     this._renderView({ preserveFocus: true });
   }
 
@@ -1286,7 +1262,7 @@ export class Calendar extends Component {
       this._replaceNormalizedEvent(oldEvent);
       this._mutationVersions.delete(key);
       this._renderView({ preserveFocus: true });
-      this._announce(this.msg('editCancelled'));
+      this._announce(this.msg('calendar.editCancelled'));
       return true;
     };
     const detail = {
@@ -1299,7 +1275,7 @@ export class Calendar extends Component {
     };
     const emitted = this.emit('eventchange', detail);
     if (emitted.defaultPrevented) revert();
-    else this._announce(this.msg('editCommitted', proposed.title));
+    else this._announce(this.msg('calendar.editCommitted', proposed.title));
   }
 
   /** @param {CalendarEvent} event @returns {void} */
@@ -1364,11 +1340,11 @@ export class Calendar extends Component {
 
   /** @param {CalendarEvent} event @param {Date} day @returns {string} */
   _eventTime(event, day) {
-    if (event.allDay) return this.msg('allDay');
+    if (event.allDay) return this.msg('calendar.allDay');
     if (calendarEventSpansDays(event)) {
       if (sameCalendarDay(event.start, day)) return `${formatDateTime(event.start, this.options.locale)} →`;
       if (sameCalendarDay(event.end, day)) return `→ ${formatDateTime(event.end, this.options.locale)}`;
-      return this.msg('allDay');
+      return this.msg('calendar.allDay');
     }
     const start = formatTimeDate(event.start, this.options.locale);
     if (event.end <= event.start) return start;
@@ -1490,10 +1466,8 @@ export class Calendar extends Component {
   }
 
   /**
-   * 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.
+   * Resolves a message through `msg()`, falling back to the built-in English text. Redundant now
+   * that `msg()` ends in the default catalogue; kept until the private copies are removed.
    * @param {string} key Message key.
    * @param {string} fallback Built-in text, with `%1`-style placeholders.
    * @param {...unknown} args Interpolation values.

package/src/components/card/card.css

@@ -51,7 +51,7 @@
 }
 
 .zx-card:has(.zx-card__primary:focus-visible) {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -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,
@@ -129,7 +129,7 @@
 }
 
 .zx-card__primary:focus-visible {
-  outline: 0;
+  outline-color: transparent;
 }
 
 .zx-card__actions,

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

@@ -38,7 +38,7 @@
 }
 
 .zx-card-view__sort select:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -103,13 +103,15 @@
 }
 
 .zx-record-card:focus-visible {
-  outline: none;
+  outline-color: transparent;
   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 {
@@ -177,7 +179,7 @@
 }
 
 .zx-record-card__selection input:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -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;
 }
 
@@ -244,7 +246,7 @@
 
 .zx-record-card__primary:focus-visible {
   border-radius: var(--zx-radius-sm);
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -289,7 +291,7 @@
 }
 
 .zx-record-card__action:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -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;
 }