@zeyos/zx 4.4.0 → 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/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-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;
 }
 

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,

package/src/components/chart/chart.js

@@ -1,5 +1,6 @@
 import { Component } from '../../core/component.js';
 import { h } from '../../core/dom.js';
+import { prefersReducedMotion, watchMotion } from '../../core/motion.js';
 import { uid } from '../../core/util.js';
 
 /** @typedef {{label?: string, data?: unknown[], [key: string]: unknown}} ChartDataset */
@@ -9,6 +10,9 @@ import { uid } from '../../core/util.js';
  * @property {string} type Chart type.
  * @property {ChartData} data Chart data.
  * @property {Record<string, unknown>} options Engine-specific options.
+ * @property {boolean} reducedMotion Whether the chart must not animate: the operating system asks
+ *   for reduced motion, or the host sits inside a `data-zx-motion="reduced"` region. An adapter turns
+ *   its engine's own animation off when this is true; `ChartJsAdapter` sets `animation: false`.
  * @property {(detail: ChartSelectDetail) => void} onSelect Point-selection callback.
  */
 /**
@@ -145,6 +149,9 @@ export class Chart extends Component {
 
     this._observer = typeof ResizeObserver === 'function' ? new ResizeObserver(() => this.resize()) : null;
     this._observer?.observe(viewport);
+    // The engine tweens in script, where no stylesheet can reach it: when motion is reduced, or
+    // stops being reduced, the mounted chart is updated with the new answer in its spec.
+    this._stopWatchingMotion = watchMotion(root, () => this._mountOrUpdate(false));
     return root;
   }
 
@@ -232,6 +239,7 @@ export class Chart extends Component {
     this._destroyed = true;
     const original = this._original;
     this._observer?.disconnect();
+    this._stopWatchingMotion?.();
     this._destroyHandle();
     super.destroy();
     if (!this._createdRoot && original) {
@@ -277,6 +285,7 @@ export class Chart extends Component {
         ...themeChartOptions(/** @type {HTMLElement} */ (this.el)),
         ...cloneChartValue(this._chartOptions)
       },
+      reducedMotion: prefersReducedMotion(this.el),
       onSelect: (detail) => this.emit('select', detail)
     };
   }
@@ -386,6 +395,9 @@ function chartJsConfig(spec, defaults, getInstance) {
     ...cloneChartValue(defaults),
     ...supplied
   };
+  // Reduced motion wins over any animation the application configured: a person who asked for
+  // less motion gets it from every chart, not only from the ones that remembered to ask.
+  if (spec.reducedMotion) options.animation = false;
   const originalClick = options.onClick;
   options.onClick = (event, elements, chart) => {
     if (typeof originalClick === 'function') originalClick(event, elements, chart);

package/src/components/check-button/check-button.css

@@ -11,6 +11,7 @@
   padding-inline: var(--zx-control-pad-x);
   font: inherit;
   font-size: var(--zx-control-font-size);
+  font-weight: var(--zx-control-font-weight);
   cursor: pointer;
 }
 
@@ -18,9 +19,16 @@
   background: var(--zx-color-bg-hover);
 }
 
+/* Pressed is a state the button is in, so the button itself goes neutral — the current fill, a
+   stronger border, the full text colour — and only the check glyph, which is the mark, keeps the
+   accent, as a checkbox would. */
 .zx-check-button[aria-pressed="true"] {
-  border-color: var(--zx-color-accent);
-  background: var(--zx-color-bg-selected);
+  border-color: var(--zx-color-border-strong);
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+}
+
+.zx-check-button__on {
   color: var(--zx-color-accent);
 }
 

package/src/components/checklist/checklist.css

@@ -7,7 +7,9 @@
 }
 
 .zx-checklist__label {
-  font-weight: 650;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  font-weight: var(--zx-weight-medium);
 }
 
 .zx-checklist__search {
@@ -31,10 +33,12 @@
   display: flex;
   align-items: center;
   gap: var(--zx-space-2);
-  min-block-size: var(--zx-control-height);
+  /* The same row as a listbox option. */
+  min-block-size: calc(var(--zx-control-height) - 2px);
   border-radius: var(--zx-radius-sm);
   cursor: pointer;
   padding: var(--zx-space-1) var(--zx-space-2);
+  line-height: 1.35;
 }
 
 .zx-checklist__item:hover {
@@ -45,8 +49,11 @@
   background: var(--zx-color-bg-selected);
 }
 
+/* The base control height is for text fields; a checkbox that inherited it would make every row
+   a field tall. */
 .zx-checklist__item input {
   flex: none;
+  min-block-size: 0;
   accent-color: var(--zx-color-accent);
 }
 

package/src/components/checklist/checklist.js

@@ -13,6 +13,9 @@ import { matchItems } from '../select/filter.js';
  * @property {boolean} [search=true] Whether the search field is shown.
  * @property {number} [height=280] Maximum list height in pixels.
  * @property {boolean} [defaultChecked=false] Fallback initial checked state.
+ * @property {boolean} [hideLabel=false] Whether the heading is left out. The group keeps the
+ *   heading text as its accessible name (`aria-label`); a Field labelling the checklist names it
+ *   instead, which is why the `checklist` field type sets this.
  * @property {(() => Promise<ChecklistItem[]>|ChecklistItem[])|null} [load=null] Async item loader.
  * @property {Record<string, string>|Record<string, Record<string, string>>} [msg] Localized messages.
  * @property {(event: CustomEvent<ChecklistChangeDetail>) => void} [onchange] Change listener.
@@ -40,6 +43,7 @@ export class Checklist extends Component {
     search: true,
     height: 280,
     defaultChecked: false,
+    hideLabel: false,
     load: null
   };
 
@@ -53,15 +57,16 @@ export class Checklist extends Component {
     const root = /** @type {HTMLElement} */ (this.el ?? h('div'));
     this.el = root;
     if (!this._createdRoot) this._originalChildren = Array.from(root.childNodes);
-    for (const name of ['role', 'aria-labelledby', 'data-state']) {
+    for (const name of ['role', 'aria-label', 'aria-labelledby', 'data-state']) {
       this._originalAttributes.set(name, root.getAttribute(name));
     }
 
+    const labelText = this._message('checklist.label', 'Checklist');
     const labelId = uid('zx-checklist-label');
-    const title = h('div', {
+    const title = this.options.hideLabel ? null : h('div', {
       class: 'zx-checklist__label',
       id: labelId
-    }, this._message('checklist.label', 'Checklist'));
+    }, labelText);
     const search = h('input', {
       ref: 'search',
       class: 'zx-checklist__search',
@@ -76,9 +81,10 @@ export class Checklist extends Component {
       class: 'zx-checklist__list'
     });
     list.style.maxBlockSize = `${Math.max(0, Number(this.options.height) || 0)}px`;
-    root.replaceChildren(title, search, list);
+    root.replaceChildren(...[title, search, list].filter(Boolean));
     root.setAttribute('role', 'group');
-    root.setAttribute('aria-labelledby', labelId);
+    if (title) root.setAttribute('aria-labelledby', labelId);
+    else root.setAttribute('aria-label', labelText);
 
     this.listen(search, 'input', () => this.search(/** @type {HTMLInputElement} */ (search).value));
     this.listen(list, 'change', (event) => {

package/src/components/checklist/field-adapter.js

@@ -7,7 +7,9 @@ import { Checklist } from './checklist.js';
  */
 export function registerChecklistFieldAdapter() {
   Field.register('checklist', (field, options) => {
-    const checklist = field.own(new Checklist(null, { ...(options.props ?? {}) }));
+    // The Field's label names the list (`aria-labelledby`), so the checklist draws no heading of
+    // its own under it.
+    const checklist = field.own(new Checklist(null, { hideLabel: true, ...(options.props ?? {}) }));
     let disabled = false;
     let setting = false;
     const syncDisabled = () => {

package/src/components/code-editor/code-editor.css

@@ -17,17 +17,18 @@
   min-block-size: var(--zx-control-height);
   padding-inline: var(--zx-space-3);
   border-block-end: 1px solid var(--zx-color-border);
-  background: var(--zx-color-bg-subtle);
+  background: var(--zx-color-bg-muted);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
 }
 
+/* The language is an identifier (`json`, `sql`), so it is shown as one — in the mono face, as
+   written — rather than shouted in letter-spaced capitals. */
 .zx-code-editor__language {
   overflow: hidden;
-  font-weight: 600;
-  letter-spacing: 0.04em;
+  font-family: var(--zx-font-mono);
+  font-weight: var(--zx-weight-medium);
   text-overflow: ellipsis;
-  text-transform: uppercase;
   text-wrap: nowrap;
 }
 
@@ -59,7 +60,7 @@
 }
 
 .zx-code-editor[data-readonly="true"] {
-  background: var(--zx-color-bg-subtle);
+  background: var(--zx-color-bg-muted);
 }
 
 .zx-code-editor[data-disabled="true"] {

package/src/components/code-editor/code-editor.js

@@ -19,10 +19,17 @@ import { h } from '../../core/dom.js';
  * @property {(event: CustomEvent<{value:string}>) => void} [onchange] Change listener.
  */
 
+/** Keys that only modify the next one: pressing them is not the keystroke that ends a Tab release. */
+const MODIFIER_KEYS = new Set(['Shift', 'Control', 'Alt', 'Meta', 'AltGraph', 'CapsLock', 'Fn', 'OS']);
+
 /**
  * Dependency-free source editor for structured text, Markdown, JSON and code. It deliberately uses
  * a native textarea: values remain text-safe, browser undo and IME behavior stay intact, and Tab /
  * Shift+Tab provide predictable indentation without a third-party editor runtime.
+ *
+ * Capturing Tab is what a code surface has to do, and it would be a keyboard trap if nothing undid
+ * it: Escape releases the capture until the next keystroke in the editor, so Escape then Tab (or
+ * Shift+Tab) moves focus out of the editor as it would leave any other field.
  * @fires CodeEditor#input
  * @fires CodeEditor#change
  * @extends {Component<CodeEditorOptions>}
@@ -81,8 +88,11 @@ export class CodeEditor extends Component {
     root.dataset.readonly = String(Boolean(this.options.readOnly));
     root.dataset.disabled = String(Boolean(this.options.disabled));
     root.replaceChildren(this._header, this._input);
+    /** Set by Escape: the next Tab moves focus instead of indenting. */
+    this._tabReleased = false;
 
     this.listen(this._input, 'keydown', (event) => this._handleKeydown(event));
+    this.listen(this._input, 'blur', () => { this._tabReleased = false; });
     this.listen(this._input, 'input', () => {
       this._updatePosition();
       this.emit('input', { value: this.getValue() });
@@ -139,7 +149,15 @@ export class CodeEditor extends Component {
 
   /** @param {KeyboardEvent} event @returns {void} */
   _handleKeydown(event) {
-    if (event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey ||
+    if (event.isComposing || MODIFIER_KEYS.has(event.key)) return;
+    if (event.key === 'Escape') {
+      this._tabReleased = true;
+      return;
+    }
+    // Any other keystroke ends the release, the Tab it was for included.
+    const released = this._tabReleased;
+    this._tabReleased = false;
+    if (released || event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey ||
         this._input.readOnly || this._input.disabled) return;
     const indent = String(this.options.indent ?? '\t');
     if (!indent) return;

package/src/components/context-menu/context-menu.css

@@ -21,12 +21,16 @@
   align-items: center;
   gap: var(--zx-space-2);
   inline-size: 100%;
-  min-block-size: var(--zx-control-height);
-  border: 1px solid transparent;
+  /* A menu row sits a little under a control so a list of them reads lighter than a column of
+     fields; the radius is the smallest step, inset inside the panel's own. */
+  min-block-size: calc(var(--zx-control-height) - 2px);
+  border: 0;
+  border-radius: var(--zx-radius-sm);
   background: transparent;
-  padding-inline: var(--zx-control-pad-x);
+  padding: var(--zx-space-1) var(--zx-space-2);
   color: inherit;
   font: inherit;
+  line-height: 1.35;
   text-align: start;
   text-decoration: none;
 }
@@ -117,8 +121,9 @@
   box-shadow: inset 0 0 0 2px var(--zx-color-bg-raised);
 }
 
+/* A section label is a caption, never taller than the rows it introduces. */
 .zx-context-menu__heading {
-  padding: var(--zx-space-2) var(--zx-control-pad-x) var(--zx-space-1);
+  padding: var(--zx-space-1) var(--zx-space-2);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-weight: 600;