@zeyos/zx 4.3.4 → 5.0.0

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

@@ -1,11 +1,7 @@
 import { h } from '../../core/dom.js';
 import { uid } from '../../core/util.js';
 import { Modal } from '../modal/modal.js';
-
-const FOCUSABLE_SELECTOR = [
-  'a[href]', 'button:not([disabled])', 'input:not([disabled])', 'select:not([disabled])',
-  'textarea:not([disabled])', '[contenteditable="true"]', '[tabindex]:not([tabindex="-1"])'
-].join(',');
+import { button } from '../button/button.js';
 
 /** @typedef {'default'|'primary'|'danger'|'ghost'} DialogButtonKind */
 /**
@@ -14,6 +10,8 @@ const FOCUSABLE_SELECTOR = [
  * @property {DialogButtonKind} [kind='default'] Visual button kind.
  * @property {'close'|'cancel'|((dialog: Dialog) => void)} [action='close'] Button action.
  * @property {boolean} [autofocus=false] Whether this button receives initial focus.
+ * @property {boolean} [disabled=false] Whether the footer button is disabled.
+ * @property {import('../button/button.js').ButtonShortcut} [shortcut] Visible shortcut hint; the host binds the action.
  */
 /**
  * @typedef {Object} DialogOptions
@@ -22,7 +20,7 @@ const FOCUSABLE_SELECTOR = [
  * @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.
@@ -53,6 +51,11 @@ const FOCUSABLE_SELECTOR = [
  * @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
@@ -60,6 +63,8 @@ const FOCUSABLE_SELECTOR = [
  * @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.
  */
 
 /**
@@ -86,8 +91,6 @@ export class Dialog extends Modal {
   /** @type {DialogButton[]} */
   #baseButtons = [];
   #baseTitle = '';
-  /** @type {Element|null} */
-  #opener = null;
 
   /**
    * Creates a structured dialog in the configured theme scope, or at document level when unscoped.
@@ -99,7 +102,7 @@ export class Dialog extends Modal {
     this._applySize(this.options.size);
     this.#baseTitle = String(this.options.title ?? '');
     this.#applyTitle(this.#baseTitle);
-    this.#baseButtons = copyButtons(this.options.buttons);
+    this.#baseButtons = normalizeDialogButtons(this.options.buttons);
     this.#renderButtons(this.#baseButtons);
     this.refs.close.hidden = !this.options.closable;
 
@@ -111,7 +114,6 @@ export class Dialog extends Modal {
       if (!definition) return;
       this.#runButton(definition);
     });
-    this.on('close', () => this.#restoreFocus());
   }
 
   /** @type {DialogButton[]} */
@@ -123,6 +125,7 @@ export class Dialog extends Modal {
    */
   render() {
     const titleId = uid('zx-dialog-title');
+    const close = this._message('dialog.close', 'Close');
     const dialog = /** @type {HTMLDialogElement} */ (h('dialog', {
       class: 'zx-modal zx-dialog',
       ariaLabelledby: titleId
@@ -134,15 +137,15 @@ export class Dialog extends Modal {
           ref: 'close',
           type: 'button',
           'data-kind': 'ghost',
-          ariaLabel: 'Close',
-          title: 'Close'
+          ariaLabel: close,
+          title: close
         }, '×')
       ),
       h('div', { class: 'zx-modal__content zx-dialog__body', ref: 'content' }),
       h('footer', { class: 'zx-dialog__footer', ref: 'footer' })
     ));
     dialog.dataset.state = 'closed';
-    this.mountTarget().append(dialog);
+    this._mountInitial(dialog);
     return dialog;
   }
 
@@ -151,16 +154,13 @@ export class Dialog extends Modal {
    * @returns {this}
    */
   open() {
-    if (this.isOpen()) return this;
-    this.#opener = document.activeElement instanceof Element ? document.activeElement : null;
-    super.open();
-    queueMicrotask(() => {
-      if (!this.isOpen()) return;
-      const autofocus = this.el.querySelector('[autofocus]:not([disabled])');
-      const first = autofocus ?? this.el.querySelector(FOCUSABLE_SELECTOR);
-      if (first instanceof HTMLElement) first.focus();
-    });
-    return this;
+    /*
+     * Capturing the opener, placing initial focus and restoring it afterwards are `Modal`'s, so
+     * that every overlay built on it is accessible rather than only the structured one. The
+     * override stays because the promise is the dialog's: the header close button is the first
+     * focusable descendant, and a footer button declared `autofocus` outranks it.
+     */
+    return super.open();
   }
 
   /**
@@ -192,7 +192,7 @@ export class Dialog extends Modal {
    * @returns {this}
    */
   setButtons(list) {
-    this.#baseButtons = copyButtons(list);
+    this.#baseButtons = normalizeDialogButtons(list);
     this.#renderButtons(this.#baseButtons);
     return this;
   }
@@ -216,7 +216,7 @@ export class Dialog extends Modal {
     const view = {
       key: normalizedKey,
       content,
-      buttons: options && Object.hasOwn(options, 'buttons') ? copyButtons(options.buttons ?? []) : null,
+      buttons: options && Object.hasOwn(options, 'buttons') ? normalizeDialogButtons(options.buttons ?? []) : null,
       title: options && Object.hasOwn(options, 'title') ? String(options.title ?? '') : null
     };
     this.#views.set(normalizedKey, view);
@@ -260,7 +260,7 @@ export class Dialog extends Modal {
    * @param {AlertOptions} [options={}] Alert options.
    * @returns {Promise<void>}
    */
-  static alert({ title = '', message = '', okLabel = 'OK' } = {}) {
+  static alert({ title = '', message = '', okLabel } = {}) {
     return new Promise((resolve) => {
       let settled = false;
       const finish = () => {
@@ -269,11 +269,13 @@ export class Dialog extends Modal {
         dialog.close();
         resolve();
       };
-      const dialog = new Dialog(null, {
-        title,
-        content: message,
-        buttons: [{ label: okLabel, kind: 'primary', action: finish, autofocus: true }]
-      });
+      const dialog = new Dialog(null, { title, content: message });
+      dialog.setButtons([{
+        label: okLabel ?? dialog._message('dialog.ok', 'OK'),
+        kind: 'primary',
+        action: finish,
+        autofocus: true
+      }]);
       dialog.once('close', () => {
         if (!settled) {
           settled = true;
@@ -286,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 = 'OK', cancelLabel = 'Cancel', danger = false
+    title = '', message = '', okLabel, cancelLabel, danger = false, confirmText = null
   } = {}) {
     return new Promise((resolve) => {
       let settled = false;
@@ -301,14 +304,58 @@ export class Dialog extends Modal {
         dialog.close(value);
         resolve(value);
       };
-      const dialog = new Dialog(null, {
-        title,
-        content: message,
-        buttons: [
-          { label: cancelLabel, action: () => finish(false) },
-          { label: okLabel, kind: danger ? 'danger' : 'primary', action: () => finish(true), autofocus: 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;
@@ -325,15 +372,16 @@ 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', {
         class: 'zx-dialog__prompt-input',
         value: String(value),
         placeholder: String(placeholder),
-        autofocus: true,
-        ariaLabel: String(title || 'Prompt value')
+        autofocus: true
       });
       const content = h('div', { class: 'zx-dialog__prompt' },
         h('div', { class: 'zx-dialog__prompt-message' }, message),
@@ -345,14 +393,12 @@ export class Dialog extends Modal {
         dialog.close(result);
         resolve(result);
       };
-      const dialog = new Dialog(null, {
-        title,
-        content,
-        buttons: [
-          { label: 'Cancel', action: () => finish(null) },
-          { label: 'OK', kind: 'primary', action: () => finish(input.value) }
-        ]
-      });
+      const dialog = new Dialog(null, { title, content });
+      input.setAttribute('aria-label', String(title || dialog._message('dialog.promptValue', 'Prompt value')));
+      dialog.setButtons([
+        { 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;
         event.preventDefault();
@@ -383,6 +429,17 @@ export class Dialog extends Modal {
     this.el.style.inlineSize = `${Math.max(0, width)}px`;
   }
 
+  /**
+   * Resolves a component message, 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;
+  }
+
   /** @param {string} title @returns {void} */
   #applyTitle(title) {
     this.refs.title.textContent = title;
@@ -390,23 +447,27 @@ export class Dialog extends Modal {
 
   /** @param {DialogButton[]} list @returns {void} */
   #renderButtons(list) {
-    this.#renderedButtons = copyButtons(list);
+    this.#renderedButtons = normalizeDialogButtons(list);
     this.refs.footer.replaceChildren();
     this.refs.footer.hidden = this.#renderedButtons.length === 0;
     this.#renderedButtons.forEach((definition, index) => {
-      this.refs.footer.append(h('button', {
-        class: 'zx-btn',
-        type: 'button',
-        'data-kind': definition.kind ?? 'default',
-        'data-size': 'md',
-        'data-dialog-button': String(index),
-        autofocus: Boolean(definition.autofocus)
-      }, h('span', { class: 'zx-btn__label' }, definition.label)));
+      const control = button({
+        label: definition.label,
+        kind: definition.kind,
+        shortcut: definition.shortcut,
+        disabled: definition.disabled
+      });
+      control.dataset.dialogButton = String(index);
+      control.autofocus = definition.autofocus;
+      this.refs.footer.append(control);
     });
   }
 
   /** @param {DialogButton} definition @returns {void} */
   #runButton(definition) {
+    // A native disabled button swallows its own clicks, but the footer listener is delegated and
+    // a host may dispatch one at the row; the descriptor is the authority either way.
+    if (definition.disabled) return;
     const action = definition.action ?? 'close';
     if (action === 'close') {
       this.close();
@@ -417,17 +478,60 @@ export class Dialog extends Modal {
       action(this);
     }
   }
+}
 
-  /** @returns {void} */
-  #restoreFocus() {
-    if (this.#opener?.isConnected && typeof this.#opener.focus === 'function') this.#opener.focus();
-    this.#opener = null;
-  }
+/**
+ * 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 === '';
 }
 
-/** @param {DialogButton[]|null|undefined} list @returns {DialogButton[]} */
-function copyButtons(list) {
-  return Array.isArray(list) ? list.map((button) => ({ ...button, label: String(button.label ?? '') })) : [];
+/**
+ * Copies footer-button descriptors without mutating the caller's array or objects, and settles
+ * the two booleans the footer renders from.
+ *
+ * `autofocus` and `disabled` are resolved together because they contradict each other: a control
+ * that refuses activation must not be the one initial focus lands on, and a host that writes both
+ * has said what it wants twice. Deciding it here rather than at render time keeps `Sheet` — which
+ * takes the same descriptors through the same footer — on one answer.
+ * @param {DialogButton[]|null|undefined} list Button descriptors.
+ * @returns {DialogButton[]} Normalized copies.
+ */
+export function normalizeDialogButtons(list) {
+  if (!Array.isArray(list)) return [];
+  return list.map((button) => {
+    const disabled = Boolean(button?.disabled);
+    return {
+      ...button,
+      label: String(button?.label ?? ''),
+      disabled,
+      autofocus: Boolean(button?.autofocus) && !disabled
+    };
+  });
 }
 
 /**

package/src/components/dropdown/dropdown.css

@@ -3,7 +3,7 @@
   max-block-size: calc(100vh - (2 * var(--zx-space-3)));
   overflow: auto;
   border: 1px solid var(--zx-color-overlay-border);
-  border-radius: var(--zx-radius-md);
+  border-radius: var(--zx-radius-lg);
   background-color: var(--zx-color-overlay-surface);
   background-image: var(--zx-overlay-surface-image);
   background-clip: padding-box;