@zeyos/zx 4.3.4 → 5.0.0

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

@@ -16,15 +16,23 @@
 }
 
 .zx-context-menu__item {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--zx-space-2);
   inline-size: 100%;
-  min-block-size: var(--zx-control-height);
-  border-color: 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;
 }
 
 .zx-context-menu__item:hover,
@@ -42,11 +50,85 @@
   opacity: 0.65;
 }
 
-.zx-context-menu__icon {
+.zx-context-menu__leading,
+.zx-context-menu__meta {
   display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-2);
   flex: none;
 }
 
+.zx-context-menu__meta {
+  justify-content: flex-end;
+}
+
+.zx-context-menu__leading {
+  justify-content: center;
+  inline-size: var(--zx-space-4);
+}
+
+.zx-context-menu__body {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+}
+
+.zx-context-menu__label,
+.zx-context-menu__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-context-menu__description,
+.zx-context-menu__shortcut,
+.zx-context-menu__adornment {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+}
+
+.zx-context-menu__badge {
+  min-inline-size: var(--zx-space-4);
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-bg-muted);
+  padding-inline: var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  text-align: center;
+}
+
+.zx-context-menu__shortcut {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-family: var(--zx-font-mono);
+}
+
+.zx-context-menu__check {
+  inline-size: var(--zx-space-3);
+  block-size: var(--zx-space-3);
+  border: 1px solid var(--zx-color-border-strong);
+  border-radius: var(--zx-radius-sm);
+}
+
+.zx-context-menu__check[data-check-kind="radio"] {
+  border-radius: var(--zx-radius-full);
+}
+
+.zx-context-menu__item[aria-checked="true"] .zx-context-menu__check {
+  border-color: var(--zx-color-accent);
+  background: var(--zx-color-accent);
+  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-1) var(--zx-space-2);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: 600;
+}
+
 .zx-context-menu__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-space-2);

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

@@ -1,11 +1,15 @@
 import { Component } from '../../core/component.js';
 import { h, resolveElement } from '../../core/dom.js';
-import { icon } from '../../core/icons.js';
 import { rovingTabindex, typeahead } from '../../core/keyboard.js';
+import {
+  isMenuItem,
+  MENU_ITEM_SELECTOR,
+  renderMenuEntries
+} from '../../internal/menu-items.js';
 import { Dropdown } from '../dropdown/dropdown.js';
 
-/** @typedef {import('../menu-button/menu-button.js').MenuItem} MenuItem */
-/** @typedef {MenuItem|'-'} ContextMenuEntry */
+/** @typedef {import('../../internal/menu-items.js').MenuItem} MenuItem */
+/** @typedef {import('../../internal/menu-items.js').MenuEntry} ContextMenuEntry */
 
 /**
  * @typedef {Object} ContextMenuOptions
@@ -22,8 +26,6 @@ import { Dropdown } from '../dropdown/dropdown.js';
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onclose] Close listener.
  */
 
-const MENU_ITEM_SELECTOR = '[role="menuitem"]';
-
 /**
  * Right-click menu for a region, implementing the APG menu pattern.
  *
@@ -107,7 +109,7 @@ export class ContextMenu extends Component {
     this.listen(this.#target, 'keydown', (event) => this.#onTargetKeydown(event));
     this.listen(this.#panel, 'click', (event) => {
       const item = event.target.closest?.(MENU_ITEM_SELECTOR);
-      if (item && this.#panel.contains(item)) this.#select(item);
+      if (item && this.#panel.contains(item)) this.#select(item, event);
     });
     this.listen(this.#panel, 'keydown', (event) => this.#onMenuKeydown(event));
   }
@@ -127,25 +129,7 @@ export class ContextMenu extends Component {
    */
   setItems(items) {
     this.#items = Array.isArray(items) ? items.slice() : [];
-    this.#panel.replaceChildren();
-    this.#items.forEach((item, index) => {
-      if (item === '-') {
-        this.#panel.append(h('div', { class: 'zx-context-menu__separator', role: 'separator' }));
-        return;
-      }
-      const children = [];
-      if (item.icon) children.push(h('span', { class: 'zx-context-menu__icon' }, icon(item.icon)));
-      children.push(h('span', { class: 'zx-context-menu__label' }, String(item.label ?? '')));
-      this.#panel.append(h('button', {
-        class: 'zx-context-menu__item',
-        type: 'button',
-        role: 'menuitem',
-        tabindex: '-1',
-        'data-menu-item': String(index),
-        'data-danger': item.danger ? 'true' : null,
-        ariaDisabled: item.disabled ? 'true' : null
-      }, children));
-    });
+    this.#panel.replaceChildren(...renderMenuEntries(this.#items, 'context-menu'));
     return this;
   }
 
@@ -292,20 +276,28 @@ export class ContextMenu extends Component {
     if (key.key === 'Enter' || key.key === ' ') {
       const item = /** @type {Element} */ (key.target).closest?.(MENU_ITEM_SELECTOR);
       if (!item || !this.#panel.contains(item)) return;
+      if (key.key === 'Enter' && item.tagName === 'A') return;
       event.preventDefault();
-      this.#select(item);
+      /** @type {HTMLElement} */ (item).click();
       return;
     }
     this.#typeahead(key);
   }
 
-  /** @param {Element} element @returns {void} */
-  #select(element) {
+  /** @param {Element} element @param {Event|null} [event=null] @returns {void} */
+  #select(element, event = null) {
     const index = Number(element.getAttribute('data-menu-item'));
     const item = this.#items[index];
-    if (!item || item === '-' || item.disabled) return;
+    if (!isMenuItem(item) || item.disabled) {
+      event?.preventDefault();
+      return;
+    }
     const context = this.#context;
-    this.emit('select', { value: item.value, item, context });
+    const selected = this.emit('select', { value: item.value, item, context });
+    if (selected.defaultPrevented) {
+      event?.preventDefault();
+      return;
+    }
     try {
       item.onselect?.(item.value, item, this);
     } finally {

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

@@ -1,4 +1,8 @@
+/* Positioned so the hidden status line below is placed inside the button. Without a positioned
+   ancestor it would hang off the page instead, adding scrollable overflow that focus() can scroll
+   into view. */
 .zx-copy-button {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--zx-space-2);
@@ -19,6 +23,8 @@
  */
 .zx-copy-button__status {
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   clip-path: inset(50%);
   inline-size: 1px;
   block-size: 1px;

package/src/components/copy/copy-input.css

@@ -1,18 +1,23 @@
 .zx-copy-input {
+  /* Holds the visually hidden label below, which would otherwise hang off the page. */
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--zx-space-1);
   inline-size: 100%;
 }
 
+/* The same quiet label a Field draws, so a copy field sits in a form without standing out. */
 .zx-copy-input__label {
-  color: var(--zx-color-text);
-  font-size: var(--zx-control-font-size);
-  font-weight: 500;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  font-weight: var(--zx-weight-medium);
 }
 
 .zx-copy-input[data-hide-label] .zx-copy-input__label {
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   clip-path: inset(50%);
   inline-size: 1px;
   block-size: 1px;

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

@@ -28,18 +28,19 @@
 .zx-data-filter__label {
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-sm);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
 }
 
 .zx-data-filter__badge {
   align-self: center;
   min-inline-size: var(--zx-control-height);
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
   padding: var(--zx-space-1) var(--zx-space-2);
   font-size: var(--zx-text-sm);
-  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--zx-weight-medium);
   text-align: center;
 }
 

package/src/components/date-picker/date-picker.css

@@ -39,7 +39,7 @@
   overflow: hidden;
   border-color: transparent;
   background: transparent;
-  font-weight: 650;
+  font-weight: var(--zx-weight-semibold);
   text-overflow: ellipsis;
   text-wrap: nowrap;
 }
@@ -47,7 +47,7 @@
 .zx-month-picker__year,
 .zx-date-picker__quick-year {
   text-align: center;
-  font-weight: 650;
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-date-picker__grid {
@@ -62,7 +62,7 @@
   padding: 0;
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
   text-align: center;
 }
 
@@ -94,7 +94,7 @@
   border-color: var(--zx-color-accent);
   background: var(--zx-color-accent);
   color: var(--zx-color-on-accent);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-date-picker__day[aria-disabled="true"] {
@@ -166,13 +166,13 @@
 .zx-date-picker__quick-month[aria-selected="true"] {
   background: var(--zx-color-overlay-selected);
   color: var(--zx-color-accent);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-month-picker__month[aria-selected="true"] {
   background: var(--zx-color-bg-selected);
   color: var(--zx-color-accent);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-month-picker__month[aria-disabled="true"] {

package/src/components/date-picker/date-picker.js

@@ -2,6 +2,7 @@ import { Component } from '../../core/component.js';
 import { addDays, addMonths, formatDate, getWeekStart, isSameDay, parseDate } from '../../core/date.js';
 import { h } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
+import { printf } from '../../core/i18n.js';
 import { TimePicker } from './time-picker.js';
 
 /**
@@ -55,7 +56,7 @@ export class DatePicker extends Component {
           ref: 'previous',
           class: 'zx-date-picker__nav',
           type: 'button',
-          ariaLabel: 'Previous month'
+          ariaLabel: this._message('datePicker.previousMonth', 'Previous month')
         }, icon('chevron-left')),
         h('button', {
           ref: 'heading',
@@ -68,7 +69,7 @@ export class DatePicker extends Component {
           ref: 'next',
           class: 'zx-date-picker__nav',
           type: 'button',
-          ariaLabel: 'Next month'
+          ariaLabel: this._message('datePicker.nextMonth', 'Next month')
         }, icon('chevron-right'))
       ),
       h('div', {
@@ -81,14 +82,14 @@ export class DatePicker extends Component {
           ref: 'quickPrevious',
           class: 'zx-date-picker__nav',
           type: 'button',
-          ariaLabel: 'Previous year'
+          ariaLabel: this._message('datePicker.previousYear', 'Previous year')
         }, icon('chevron-left')),
         h('span', { ref: 'quickYear', class: 'zx-date-picker__quick-year', ariaLive: 'polite' }),
         h('button', {
           ref: 'quickNext',
           class: 'zx-date-picker__nav',
           type: 'button',
-          ariaLabel: 'Next year'
+          ariaLabel: this._message('datePicker.nextYear', 'Next year')
         }, icon('chevron-right'))
       ),
       h('div', { ref: 'quickGrid', class: 'zx-date-picker__quick-grid', role: 'grid' })),
@@ -96,7 +97,7 @@ export class DatePicker extends Component {
         ref: 'grid',
         class: 'zx-date-picker__grid',
         role: 'grid',
-        ariaLabel: 'Calendar'
+        ariaLabel: this._message('datePicker.calendar', 'Calendar')
       },
       h('thead', { ref: 'weekdays' }),
       h('tbody', { ref: 'days' }))
@@ -203,7 +204,7 @@ export class DatePicker extends Component {
       row.append(h('th', {
         class: 'zx-date-picker__week-heading',
         scope: 'col',
-        ariaLabel: 'Week number'
+        ariaLabel: this._message('datePicker.weekNumber', 'Week number')
       }, '#'));
     }
     const sunday = new Date(2023, 0, 1);
@@ -224,7 +225,8 @@ export class DatePicker extends Component {
     const offset = (first.getDay() - this._weekStart + 7) % 7;
     const start = addDays(first, -offset);
     this.refs.heading.textContent = formatDate(first, '%B %Y');
-    this.refs.heading.setAttribute('aria-label', `Choose month and year, ${formatDate(first, '%B %Y')}`);
+    this.refs.heading.setAttribute('aria-label',
+      this._message('datePicker.chooseMonthYear', 'Choose month and year, %1', formatDate(first, '%B %Y')));
     const rows = [];
 
     for (let week = 0; week < 6; week += 1) {
@@ -234,7 +236,7 @@ export class DatePicker extends Component {
         row.append(h('th', {
           class: 'zx-date-picker__week',
           scope: 'row',
-          ariaLabel: `Week ${isoWeekNumber(rowStart)}`
+          ariaLabel: this._message('datePicker.week', 'Week %1', isoWeekNumber(rowStart))
         }, String(isoWeekNumber(rowStart))));
       }
       for (let column = 0; column < 7; column += 1) {
@@ -450,6 +452,18 @@ export class DatePicker extends Component {
   _buttonForDate(date) {
     return this.refs.days.querySelector(`[data-date="${formatDate(date, '%Y-%m-%d')}"]`);
   }
+
+  /**
+   * Resolves a message through the host translator, falling back to the built-in English text.
+   * @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;
+  }
 }
 
 /**

package/src/components/date-picker/date-range-picker.css

@@ -83,7 +83,7 @@
 
 .zx-date-range-picker__caption {
   overflow: hidden;
-  font-weight: 650;
+  font-weight: var(--zx-weight-semibold);
   text-align: center;
   text-overflow: ellipsis;
   text-wrap: nowrap;
@@ -147,7 +147,7 @@
   padding: 0;
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
   text-align: center;
 }
 
@@ -223,7 +223,7 @@
   border-radius: var(--zx-radius-full);
   background: var(--zx-color-accent);
   color: var(--zx-color-on-accent);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-date-range-picker__grid td[data-range="middle"] > .zx-date-range-picker__day,

package/src/components/date-picker/month-picker.js

@@ -47,21 +47,21 @@ export class MonthPicker extends DatePicker {
           ref: 'previousYear',
           class: 'zx-month-picker__nav',
           type: 'button',
-          ariaLabel: 'Previous year'
+          ariaLabel: this._message('monthPicker.previousYear', 'Previous year')
         }, icon('chevron-left')),
         h('span', { ref: 'year', class: 'zx-month-picker__year', ariaLive: 'polite' }),
         h('button', {
           ref: 'nextYear',
           class: 'zx-month-picker__nav',
           type: 'button',
-          ariaLabel: 'Next year'
+          ariaLabel: this._message('monthPicker.nextYear', 'Next year')
         }, icon('chevron-right'))
       ),
       h('div', {
         ref: 'grid',
         class: 'zx-month-picker__grid',
         role: 'grid',
-        ariaLabel: 'Choose month'
+        ariaLabel: this._message('monthPicker.chooseMonth', 'Choose month')
       })
     );
     this._content = content;

package/src/components/date-picker/time-picker.css

@@ -23,7 +23,7 @@
 
 .zx-time-picker__separator {
   color: var(--zx-color-text-muted);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-time-picker__clock-toggle {

package/src/components/date-picker/time-picker.js

@@ -48,15 +48,15 @@ export class TimePicker extends Component {
     const content = h('div', {
       class: 'zx-time-picker__segments',
       role: 'group',
-      ariaLabel: 'Time'
+      ariaLabel: this._message('timePicker.label', 'Time')
     });
     this._content = content;
-    this._addSpin(content, 'h', 'Hour', 23);
+    this._addSpin(content, 'h', this._message('timePicker.hour', 'Hour'), 23);
     content.append(h('span', { class: 'zx-time-picker__separator', ariaHidden: 'true' }, ':'));
-    this._addSpin(content, 'm', 'Minute', 59);
+    this._addSpin(content, 'm', this._message('timePicker.minute', 'Minute'), 59);
     if (this.options.seconds) {
       content.append(h('span', { class: 'zx-time-picker__separator', ariaHidden: 'true' }, ':'));
-      this._addSpin(content, 's', 'Second', 59);
+      this._addSpin(content, 's', this._message('timePicker.second', 'Second'), 59);
     }
     root.append(content);
 
@@ -66,7 +66,7 @@ export class TimePicker extends Component {
         ref: 'clockToggle',
         class: 'zx-icon-btn zx-time-picker__clock-toggle',
         type: 'button',
-        ariaLabel: 'Pick the time on a clock',
+        ariaLabel: this._message('timePicker.clock', 'Pick the time on a clock'),
         ariaExpanded: 'false',
         ariaControls: clockId
       }, icon('clock', { size: 15 })));
@@ -223,7 +223,7 @@ export class TimePicker extends Component {
           ref: 'headHour',
           class: 'zx-time-picker__clock-unit',
           type: 'button',
-          ariaLabel: 'Select the hour',
+          ariaLabel: this._message('timePicker.selectHour', 'Select the hour'),
           dataset: { unit: 'h' }
         }),
         h('span', { class: 'zx-time-picker__clock-colon', ariaHidden: 'true' }, ':'),
@@ -231,7 +231,7 @@ export class TimePicker extends Component {
           ref: 'headMinute',
           class: 'zx-time-picker__clock-unit',
           type: 'button',
-          ariaLabel: 'Select the minutes',
+          ariaLabel: this._message('timePicker.selectMinutes', 'Select the minutes'),
           dataset: { unit: 'm' }
         })),
       h('div', { ref: 'dial', class: 'zx-time-picker__dial', role: 'radiogroup' },
@@ -290,7 +290,8 @@ export class TimePicker extends Component {
     this.refs.headMinute.textContent = pad(this._display.m);
     this.refs.headHour.setAttribute('aria-pressed', String(hours));
     this.refs.headMinute.setAttribute('aria-pressed', String(!hours));
-    this.refs.dial.setAttribute('aria-label', hours ? 'Hour' : 'Minutes');
+    this.refs.dial.setAttribute('aria-label', hours
+      ? this._message('timePicker.hour', 'Hour') : this._message('timePicker.minutes', 'Minutes'));
     if (!this._clockOpen) return;
 
     const selected = hours ? this._display.h : this._display.m;
@@ -330,6 +331,17 @@ export class TimePicker extends Component {
     element.setAttribute('aria-checked', String(checked));
     element.tabIndex = checked ? 0 : -1;
   }
+
+  /**
+   * 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;
+  }
 }
 
 /**

package/src/components/datebox/date-range-box.css

@@ -10,6 +10,12 @@
   align-items: stretch;
 }
 
+/* The box draws the frame, so the input and buttons inside it are one border shorter on each side:
+   the control as a whole is one control height, like a text input beside it. */
+.zx-date-range-box__control > :is(input, button) {
+  min-block-size: calc(var(--zx-control-height) - 2px);
+}
+
 .zx-date-range-box__control {
   position: relative;
   border: 1px solid var(--zx-color-border-control);
@@ -26,16 +32,40 @@
   background: var(--zx-color-danger-bg);
 }
 
-/* The input always reserves room for the clear button, which floats over its trailing edge —
-   showing or hiding the button must not change the control's total width. */
+/* A clearable input always reserves room for the clear button, which floats over its trailing
+   edge — showing or hiding the button must not change the control's total width. Without
+   `clearable` there is no button, and no room is kept for one. */
 .zx-date-range-box__input {
   min-inline-size: 16em;
   border: 0;
   border-radius: var(--zx-control-radius) 0 0 var(--zx-control-radius);
   background: inherit;
+}
+
+.zx-date-range-box[data-clearable] .zx-date-range-box__input {
   padding-inline-end: var(--zx-control-height);
 }
 
+/* In a Field the control fills its column, as a text input does, and gives way in a narrow one
+   instead of holding a minimum width that overflows a two-column row. */
+.zx-field__control > .zx-date-range-box {
+  display: block;
+}
+
+.zx-field__control > .zx-date-range-box :is(.zx-date-range-box__content, .zx-date-range-box__control) {
+  display: flex;
+}
+
+.zx-field__control > .zx-date-range-box .zx-date-range-box__control {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+.zx-field__control > .zx-date-range-box .zx-date-range-box__input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
 /* Focused controls lift above their siblings so the ring is never clipped. */
 .zx-date-range-box__input:focus-visible,
 .zx-date-range-box__toggle:focus-visible {
@@ -141,3 +171,50 @@
     box-shadow: var(--zx-overlay-shadow);
   }
 }
+
+/*
+ * Quiet fields. Inside `[data-zx-fields="quiet"]` the date reads as text: no border, no fill, and
+ * the calendar button and its divider hidden. Hover brings the hover fill and the button back;
+ * focus brings back the border, the control fill and the focus ring. An invalid value keeps its
+ * danger border, quiet or not. A disabled control never lights up.
+ */
+[data-zx-fields="quiet"] .zx-date-range-box:not([data-state="invalid"]) .zx-date-range-box__control {
+  border-color: transparent;
+  background: transparent;
+}
+
+[data-zx-fields="quiet"] .zx-date-range-box__toggle {
+  border-inline-start-color: transparent;
+  opacity: 0;
+}
+
+[data-zx-fields="quiet"] .zx-date-range-box__clear {
+  opacity: 0;
+}
+
+[data-zx-fields="quiet"] .zx-date-range-box:not([aria-disabled="true"], [data-state="invalid"]):hover .zx-date-range-box__control {
+  background: var(--zx-color-bg-hover);
+}
+
+[data-zx-fields="quiet"] .zx-date-range-box:not([aria-disabled="true"]):is(:hover, :focus-within) :is(.zx-date-range-box__toggle, .zx-date-range-box__clear) {
+  opacity: 1;
+}
+
+[data-zx-fields="quiet"] .zx-date-range-box:not([aria-disabled="true"]):focus-within .zx-date-range-box__toggle {
+  border-inline-start-color: var(--zx-color-border-control);
+}
+
+[data-zx-fields="quiet"] .zx-date-range-box:not([aria-disabled="true"], [data-state="invalid"]):focus-within .zx-date-range-box__control {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-zx-fields="quiet"] .zx-date-range-box__control {
+    transition: background-color var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+
+  [data-zx-fields="quiet"] :is(.zx-date-range-box__toggle, .zx-date-range-box__clear) {
+    transition: opacity var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+}