@zeyos/zx 4.4.0 → 5.0.0

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-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/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/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);
+  }
+}

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

@@ -19,7 +19,8 @@ import { DateRangePicker, clampRange, normalizeRange } from '../date-picker/date
  * @property {string} [format='%d.%m.%Y'] Kernel date format used for both endpoints.
  * @property {string} [separator=' – '] Text placed between the two formatted dates.
  * @property {string|null} [placeholder=null] Input placeholder; null derives one from the format.
- * @property {boolean} [clearable=true] Show a clear button while a range is present.
+ * @property {boolean} [clearable=true] Show a clear button while a range is present and the box is
+ *   enabled; without it the input keeps no room for one.
  * @property {Date|null} [min=null] Earliest selectable local calendar day.
  * @property {Date|null} [max=null] Latest selectable local calendar day.
  * @property {number} [months=2] Month panels in the popover; narrow ones show only the first.
@@ -132,6 +133,8 @@ export class DateRangeBox extends Component {
     this.el = root;
     this._originalState = root.getAttribute('data-state');
     this._originalAriaDisabled = root.getAttribute('aria-disabled');
+    this._originalClearable = root.getAttribute('data-clearable');
+    root.toggleAttribute('data-clearable', Boolean(this.options.clearable));
     this._format = String(this.options.format || '%d.%m.%Y');
     this._separator = String(this.options.separator ?? ' – ');
     this._disabled = Boolean(this.options.disabled);
@@ -336,6 +339,7 @@ export class DateRangeBox extends Component {
     this._content?.remove();
     restoreAttribute(this.el, 'data-state', this._originalState);
     restoreAttribute(this.el, 'aria-disabled', this._originalAriaDisabled);
+    restoreAttribute(this.el, 'data-clearable', this._originalClearable);
     super.destroy();
   }
 
@@ -435,7 +439,13 @@ export class DateRangeBox extends Component {
   /** @returns {void} */
   _syncDisplay() {
     this.refs.input.value = formatRangeText(this._range, this._format, this._separator);
-    this.refs.clear.hidden = !this.options.clearable || !(this._range.start || this._range.end);
+    this._syncClear();
+  }
+
+  /** A disabled box offers no clear button: there is nothing it could do. @returns {void} */
+  _syncClear() {
+    this.refs.clear.hidden = !this.options.clearable || !(this._range.start || this._range.end)
+      || this._disabled;
   }
 
   /** @returns {void} */
@@ -444,6 +454,7 @@ export class DateRangeBox extends Component {
     this.refs.toggle.disabled = this._disabled;
     this.refs.clear.disabled = this._disabled;
     this.el.setAttribute('aria-disabled', String(this._disabled));
+    this._syncClear();
     if (this._disabled) this._picker?.disable();
     else this._picker?.enable();
   }

package/src/components/datebox/datebox.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-datebox__control > :is(input, button) {
+  min-block-size: calc(var(--zx-control-height) - 2px);
+}
+
 .zx-datebox__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-datebox__input {
   min-inline-size: 10em;
   border: 0;
   border-radius: var(--zx-control-radius) 0 0 var(--zx-control-radius);
   background: inherit;
+}
+
+.zx-datebox[data-clearable] .zx-datebox__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-datebox {
+  display: block;
+}
+
+.zx-field__control > .zx-datebox :is(.zx-datebox__content, .zx-datebox__control) {
+  display: flex;
+}
+
+.zx-field__control > .zx-datebox .zx-datebox__control {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+.zx-field__control > .zx-datebox .zx-datebox__input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
 /* Focused controls lift above their siblings so the ring is never clipped. */
 .zx-datebox__input:focus-visible,
 .zx-datebox__toggle:focus-visible {
@@ -121,3 +151,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-datebox:not([data-state="invalid"]) .zx-datebox__control {
+  border-color: transparent;
+  background: transparent;
+}
+
+[data-zx-fields="quiet"] .zx-datebox__toggle {
+  border-inline-start-color: transparent;
+  opacity: 0;
+}
+
+[data-zx-fields="quiet"] .zx-datebox__clear {
+  opacity: 0;
+}
+
+[data-zx-fields="quiet"] .zx-datebox:not([aria-disabled="true"], [data-state="invalid"]):hover .zx-datebox__control {
+  background: var(--zx-color-bg-hover);
+}
+
+[data-zx-fields="quiet"] .zx-datebox:not([aria-disabled="true"]):is(:hover, :focus-within) :is(.zx-datebox__toggle, .zx-datebox__clear) {
+  opacity: 1;
+}
+
+[data-zx-fields="quiet"] .zx-datebox:not([aria-disabled="true"]):focus-within .zx-datebox__toggle {
+  border-inline-start-color: var(--zx-color-border-control);
+}
+
+[data-zx-fields="quiet"] .zx-datebox:not([aria-disabled="true"], [data-state="invalid"]):focus-within .zx-datebox__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-datebox__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-datebox__toggle, .zx-datebox__clear) {
+    transition: opacity var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+}

package/src/components/datebox/datebox.js

@@ -14,7 +14,8 @@ import { DatePicker } from '../date-picker/date-picker.js';
  * @property {Date|null} [min=null] Earliest selectable date.
  * @property {Date|null} [max=null] Latest selectable date.
  * @property {string|null} [placeholder=null] Input placeholder; null derives one from the format.
- * @property {boolean} [clearable=true] Show a clear button when a value is present.
+ * @property {boolean} [clearable=true] Show a clear button while a value is present and the box is
+ *   enabled; without it the input keeps no room for one.
  * @property {boolean} [disabled=false] Disable all controls.
  * @property {(event: CustomEvent<{date: Date|null}>) => void} [onchange] Change listener.
  * @property {(event: CustomEvent<{text: string}>) => void} [oninvalid] Invalid-input listener.
@@ -53,6 +54,8 @@ export class Datebox extends Component {
     this.el = root;
     this._originalState = root.getAttribute('data-state');
     this._originalAriaDisabled = root.getAttribute('aria-disabled');
+    this._originalClearable = root.getAttribute('data-clearable');
+    root.toggleAttribute('data-clearable', Boolean(this.options.clearable));
     this._format = effectiveFormat(this.options.format, this.options.time);
     this._disabled = Boolean(this.options.disabled);
     this._open = false;
@@ -230,6 +233,8 @@ export class Datebox extends Component {
     else this.el.setAttribute('data-state', this._originalState);
     if (this._originalAriaDisabled === null) this.el.removeAttribute('aria-disabled');
     else this.el.setAttribute('aria-disabled', this._originalAriaDisabled);
+    if (this._originalClearable === null) this.el.removeAttribute('data-clearable');
+    else this.el.setAttribute('data-clearable', this._originalClearable);
     super.destroy();
   }
 
@@ -278,7 +283,12 @@ export class Datebox extends Component {
   /** @returns {void} */
   _syncDisplay() {
     this.refs.input.value = this._value ? formatDate(this._value, this._format) : '';
-    this.refs.clear.hidden = !this.options.clearable || !this._value;
+    this._syncClear();
+  }
+
+  /** A disabled box offers no clear button: there is nothing it could do. @returns {void} */
+  _syncClear() {
+    this.refs.clear.hidden = !this.options.clearable || !this._value || this._disabled;
   }
 
   /** @returns {void} */
@@ -287,6 +297,7 @@ export class Datebox extends Component {
     this.refs.toggle.disabled = this._disabled;
     this.refs.clear.disabled = this._disabled;
     this.el.setAttribute('aria-disabled', String(this._disabled));
+    this._syncClear();
   }
 
   /** @returns {void} */

package/src/components/dialog/dialog.css

@@ -24,6 +24,8 @@
 .zx-dialog__title {
   margin: 0;
   font-size: var(--zx-text-xl);
+  font-weight: 650;
+  letter-spacing: var(--zx-tracking-title);
   line-height: 1.3;
 }
 
@@ -61,6 +63,30 @@
   inline-size: 100%;
 }
 
+/* Type-to-confirm: the message, then the label naming the text to type, then the input. */
+.zx-dialog__confirm {
+  display: grid;
+  gap: var(--zx-space-2);
+}
+
+.zx-dialog__confirm > .zx-dialog__prompt-message {
+  margin-block-end: var(--zx-space-2);
+}
+
+.zx-dialog__confirm-label {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+}
+
+.zx-dialog__confirm-label > b {
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
+}
+
+.zx-dialog__confirm-input {
+  inline-size: 100%;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .zx-dialog__view[aria-hidden="false"] {
     animation: zx-dialog-view-enter var(--zx-dur-fast) var(--zx-ease);