@zeyos/zx 4.4.0 → 5.2.0

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 {
@@ -84,7 +84,7 @@
 }
 
 .zx-time-picker__clock-unit:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -146,7 +146,7 @@
 }
 
 .zx-time-picker__mark:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 

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);

package/src/components/dialog/dialog.js

@@ -20,7 +20,7 @@ import { button } from '../button/button.js';
  * @property {DialogButton[]} [buttons=[]] Footer buttons.
  * @property {boolean} [closable=true] Whether Escape and the header button may close the dialog.
  * @property {Node|string|number|{toElement: () => Node|null}|null} [content=null] Body content.
- * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns the overlay; defaults to the opener.
+ * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns the overlay; defaults to the opener. Resolved on every open, so a scope connected after construction still owns it.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open event listener.
  * @property {(event: CustomEvent<{result: unknown}>) => void} [onclose] Close event listener.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [oncancel] Cancel event listener.
@@ -51,6 +51,11 @@ import { button } from '../button/button.js';
  * @property {string} [okLabel='OK'] Confirmation label.
  * @property {string} [cancelLabel='Cancel'] Cancellation label.
  * @property {boolean} [danger=false] Whether the confirmation action is dangerous.
+ * @property {string|null} [confirmText=null] Text the reader must type before the confirm button
+ *   enables — the name of what is about to be deleted, say. The dialog adds an input labelled
+ *   "Type <confirmText> to confirm" (message `dialog.typeToConfirm`, `%1` standing for the text),
+ *   focuses it, and enables the confirm button, and Enter, only while its value matches exactly,
+ *   ignoring surrounding spaces.
  */
 /**
  * @typedef {Object} PromptOptions
@@ -58,6 +63,8 @@ import { button } from '../button/button.js';
  * @property {Node|string|number|null} [message=''] Prompt message.
  * @property {string} [value=''] Initial input value.
  * @property {string} [placeholder=''] Input placeholder.
+ * @property {string} [okLabel='OK'] Confirmation label.
+ * @property {string} [cancelLabel='Cancel'] Cancellation label.
  */
 
 /**
@@ -138,7 +145,7 @@ export class Dialog extends Modal {
       h('footer', { class: 'zx-dialog__footer', ref: 'footer' })
     ));
     dialog.dataset.state = 'closed';
-    this.mountTarget().append(dialog);
+    this._mountInitial(dialog);
     return dialog;
   }
 
@@ -281,12 +288,13 @@ export class Dialog extends Modal {
   }
 
   /**
-   * Opens a confirmation dialog.
+   * Opens a confirmation dialog. With `confirmText` it becomes a type-to-confirm dialog: the
+   * confirm button stays disabled until the reader has typed that text.
    * @param {ConfirmOptions} [options={}] Confirmation options.
-   * @returns {Promise<boolean>}
+   * @returns {Promise<boolean>} True when confirmed; false on Cancel, Escape, or the close button.
    */
   static confirm({
-    title = '', message = '', okLabel, cancelLabel, danger = false
+    title = '', message = '', okLabel, cancelLabel, danger = false, confirmText = null
   } = {}) {
     return new Promise((resolve) => {
       let settled = false;
@@ -296,16 +304,58 @@ export class Dialog extends Modal {
         dialog.close(value);
         resolve(value);
       };
-      const dialog = new Dialog(null, { title, content: message });
-      dialog.setButtons([
-        { label: cancelLabel ?? dialog._message('dialog.cancel', 'Cancel'), action: () => finish(false) },
-        {
-          label: okLabel ?? dialog._message('dialog.ok', 'OK'),
-          kind: danger ? 'danger' : 'primary',
-          action: () => finish(true),
+      const expected = confirmText == null ? '' : String(confirmText).trim();
+      const dialog = new Dialog(null, { title, content: expected ? null : message });
+      // A destructive confirmation starts on the least destructive choice, as the APG alert dialog
+      // has it; type-to-confirm starts in its input.
+      const cancel = {
+        label: cancelLabel ?? dialog._message('dialog.cancel', 'Cancel'),
+        action: () => finish(false),
+        autofocus: danger && !expected
+      };
+      const accept = {
+        label: okLabel ?? dialog._message('dialog.ok', 'OK'),
+        kind: /** @type {DialogButtonKind} */ (danger ? 'danger' : 'primary'),
+        action: () => finish(true),
+        autofocus: !danger && !expected
+      };
+      if (expected) {
+        const input = /** @type {HTMLInputElement} */ (h('input', {
+          class: 'zx-dialog__confirm-input',
+          id: uid('zx-dialog-confirm'),
+          type: 'text',
+          autocomplete: 'off',
+          autocapitalize: 'off',
+          spellcheck: false,
           autofocus: true
-        }
-      ]);
+        }));
+        const [before, after] = typeToConfirmParts(
+          dialog._message('dialog.typeToConfirm', 'Type %1 to confirm'), expected);
+        const label = h('label', { class: 'zx-dialog__confirm-label', for: input.id },
+          before, h('b', {}, expected), after);
+        dialog.setContent(h('div', { class: 'zx-dialog__confirm' },
+          isEmptyContent(message) ? null : h('div', { class: 'zx-dialog__prompt-message' }, message),
+          label,
+          input));
+        let matched = false;
+        const settle = () => dialog.setButtons([cancel, { ...accept, autofocus: false, disabled: !matched }]);
+        settle();
+        dialog.listen(input, 'input', () => {
+          const next = typedConfirmation(input.value, expected);
+          if (next === matched) return;
+          matched = next;
+          settle();
+        });
+        // Enter confirms only a match; otherwise it does nothing, as the disabled button would.
+        dialog.listen(input, 'keydown', (event) => {
+          const key = /** @type {KeyboardEvent} */ (event);
+          if (key.key !== 'Enter' || key.isComposing) return;
+          key.preventDefault();
+          if (typedConfirmation(input.value, expected)) finish(true);
+        });
+      } else {
+        dialog.setButtons([cancel, accept]);
+      }
       dialog.once('close', () => {
         if (!settled) {
           settled = true;
@@ -322,7 +372,9 @@ export class Dialog extends Modal {
    * @param {PromptOptions} [options={}] Prompt options.
    * @returns {Promise<string|null>}
    */
-  static prompt({ title = '', message = '', value = '', placeholder = '' } = {}) {
+  static prompt({
+    title = '', message = '', value = '', placeholder = '', okLabel, cancelLabel
+  } = {}) {
     return new Promise((resolve) => {
       let settled = false;
       const input = h('input', {
@@ -344,8 +396,8 @@ export class Dialog extends Modal {
       const dialog = new Dialog(null, { title, content });
       input.setAttribute('aria-label', String(title || dialog._message('dialog.promptValue', 'Prompt value')));
       dialog.setButtons([
-        { label: dialog._message('dialog.cancel', 'Cancel'), action: () => finish(null) },
-        { label: dialog._message('dialog.ok', 'OK'), kind: 'primary', action: () => finish(input.value) }
+        { label: cancelLabel ?? dialog._message('dialog.cancel', 'Cancel'), action: () => finish(null) },
+        { label: okLabel ?? dialog._message('dialog.ok', 'OK'), kind: 'primary', action: () => finish(input.value) }
       ]);
       dialog.listen(input, 'keydown', (event) => {
         if (event.key !== 'Enter') return;
@@ -428,6 +480,36 @@ export class Dialog extends Modal {
   }
 }
 
+/**
+ * Reports whether what the reader typed confirms a type-to-confirm dialog: the same text, exactly
+ * — case and inner spacing included — once surrounding spaces are ignored on both sides.
+ * @param {unknown} typed Input value.
+ * @param {unknown} expected Text the dialog asks for.
+ * @returns {boolean}
+ */
+export function typedConfirmation(typed, expected) {
+  const target = expected == null ? '' : String(expected).trim();
+  return target !== '' && String(typed ?? '').trim() === target;
+}
+
+/**
+ * Splits the type-to-confirm message around `%1`, where the text to type goes. A translation that
+ * leaves `%1` out gets the text after it, following a space; a second `%1` is filled in as text.
+ * @param {string} template Message such as "Type %1 to confirm".
+ * @param {string} expected Text to type.
+ * @returns {[string, string]} The text before and after the text to type.
+ */
+export function typeToConfirmParts(template, expected) {
+  const parts = String(template).split('%1');
+  if (parts.length === 1) return [`${parts[0]} `, ''];
+  return [parts[0], parts.slice(1).join(expected)];
+}
+
+/** @param {unknown} content @returns {boolean} */
+function isEmptyContent(content) {
+  return content == null || content === '';
+}
+
 /**
  * Copies footer-button descriptors without mutating the caller's array or objects, and settles
  * the two booleans the footer renders from.

package/src/components/dock/dock.css

@@ -83,7 +83,7 @@
 .zx-dock__toggle:disabled .zx-dock__chevron { visibility: hidden; }
 
 .zx-dock__toggle:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -141,7 +141,7 @@
 }
 
 .zx-dock__tab:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -172,7 +172,8 @@
 }
 
 .zx-dock__panel:focus-visible {
-  outline: none;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 
@@ -222,7 +223,7 @@
 }
 
 .zx-dock__divider:focus-visible {
-  outline: none;
+  outline-color: transparent;
   z-index: 1;
   box-shadow: var(--zx-focus-ring);
 }