@zeyos/zx 4.3.0 → 4.4.0

package/dist/zx-zeyos.esm.js

@@ -870,21 +870,26 @@ var Component = class extends EventTarget {
    * Dispatches a component event and a bubbling, composed `zx-*` DOM event.
    * @param {string} type Lowercase event name.
    * @param {Record<string, unknown>} [detail={}] Single event detail object.
+   * @param {{honorDomCancellation?:boolean}} [options={}] Mirrored DOM-event behavior. Components
+   * with a cancelable mutation boundary may opt into treating `preventDefault()` on the bubbling
+   * `zx-*` event exactly like cancellation of the component event.
    * @returns {Event & {detail: Record<string, unknown>}}
    * @fires Component#event
    */
-  emit(type, detail = {}) {
+  emit(type, detail = {}, options = {}) {
     if (detail === null || typeof detail !== "object" || Array.isArray(detail)) {
       throw new TypeError("Event detail must be an object");
     }
     const componentEvent = createCustomEvent(type, detail, { cancelable: true });
     this.dispatchEvent(componentEvent);
     if (this.el) {
-      this.el.dispatchEvent(createCustomEvent(`zx-${type}`, detail, {
+      const domEvent = createCustomEvent(`zx-${type}`, detail, {
         bubbles: true,
         composed: true,
         cancelable: true
-      }));
+      });
+      this.el.dispatchEvent(domEvent);
+      if (options.honorDomCancellation && domEvent.defaultPrevented) componentEvent.preventDefault();
     }
     return componentEvent;
   }
@@ -1795,6 +1800,271 @@ function registerChecklistFieldAdapter() {
   });
 }
 
+// src/components/code-editor/code-editor.js
+var CodeEditor = class extends Component {
+  static cssName = "code-editor";
+  /** @type {CodeEditorOptions} */
+  static defaults = {
+    value: "",
+    name: "",
+    language: "text",
+    label: "Code editor",
+    placeholder: "",
+    rows: 12,
+    indent: "	",
+    wrap: "off",
+    spellcheck: false,
+    readOnly: false,
+    disabled: false,
+    status: true
+  };
+  /** @returns {HTMLElement} */
+  render() {
+    this._createdRoot = this.el === null;
+    const root = (
+      /** @type {HTMLElement} */
+      this.el ?? h("div")
+    );
+    this.el = root;
+    this._initialChildren = this._createdRoot ? [] : [...root.childNodes];
+    this._initialAttributes = new Map(["data-language", "data-readonly", "data-disabled"].map((name) => [name, root.getAttribute(name)]));
+    this._language = normalizeLanguage(this.options.language);
+    this._languageLabel = h("span", { class: "zx-code-editor__language" }, this._language);
+    this._position = h("span", {
+      class: "zx-code-editor__position",
+      role: "status",
+      ariaLive: "polite"
+    });
+    this._header = h(
+      "div",
+      { class: "zx-code-editor__header" },
+      this._languageLabel,
+      this.options.status ? this._position : null
+    );
+    this._input = /** @type {HTMLTextAreaElement} */
+    h("textarea", {
+      class: "zx-code-editor__input",
+      name: this.options.name ? String(this.options.name) : void 0,
+      ariaLabel: String(this.options.label ?? "Code editor"),
+      placeholder: String(this.options.placeholder ?? ""),
+      rows: normalizeRows(this.options.rows),
+      wrap: normalizeWrap(this.options.wrap),
+      spellcheck: Boolean(this.options.spellcheck),
+      readOnly: Boolean(this.options.readOnly),
+      disabled: Boolean(this.options.disabled),
+      autocomplete: "off",
+      autocapitalize: "off"
+    });
+    this._input.value = String(this.options.value ?? "");
+    root.dataset.language = this._language;
+    root.dataset.readonly = String(Boolean(this.options.readOnly));
+    root.dataset.disabled = String(Boolean(this.options.disabled));
+    root.replaceChildren(this._header, this._input);
+    this.listen(this._input, "keydown", (event) => this._handleKeydown(event));
+    this.listen(this._input, "input", () => {
+      this._updatePosition();
+      this.emit("input", { value: this.getValue() });
+    });
+    this.listen(this._input, "change", () => this.emit("change", { value: this.getValue() }));
+    for (const type of ["click", "keyup", "select", "focus"]) {
+      this.listen(this._input, type, () => this._updatePosition());
+    }
+    this._updatePosition();
+    return root;
+  }
+  /** @returns {string} */
+  getValue() {
+    return this._input.value;
+  }
+  /**
+   * Replaces the editor text.
+   * @param {unknown} value New value.
+   * @param {{silent?:boolean}} [options={}] Suppress the `change` event.
+   * @returns {this}
+   */
+  setValue(value, { silent = false } = {}) {
+    const next = String(value ?? "");
+    if (this._input.value === next) return this;
+    this._input.value = next;
+    this._updatePosition();
+    if (!silent) this.emit("change", { value: next });
+    return this;
+  }
+  /** @param {unknown} language New language identifier. @returns {this} */
+  setLanguage(language2) {
+    this._language = normalizeLanguage(language2);
+    this.el.dataset.language = this._language;
+    this._languageLabel.textContent = this._language;
+    return this;
+  }
+  /** @returns {this} */
+  focus() {
+    this._input.focus();
+    return this;
+  }
+  /** @returns {this} */
+  enable() {
+    this._input.disabled = false;
+    this.el.dataset.disabled = "false";
+    return this;
+  }
+  /** @returns {this} */
+  disable() {
+    this._input.disabled = true;
+    this.el.dataset.disabled = "true";
+    return this;
+  }
+  /** @param {boolean} value Read-only state. @returns {this} */
+  setReadOnly(value) {
+    this._input.readOnly = Boolean(value);
+    this.el.dataset.readonly = String(Boolean(value));
+    return this;
+  }
+  /** @param {KeyboardEvent} event @returns {void} */
+  _handleKeydown(event) {
+    if (event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey || this._input.readOnly || this._input.disabled) return;
+    const indent = String(this.options.indent ?? "	");
+    if (!indent) return;
+    event.preventDefault();
+    const result = indentSelection(
+      this._input.value,
+      this._input.selectionStart ?? 0,
+      this._input.selectionEnd ?? 0,
+      indent,
+      event.shiftKey
+    );
+    if (result.value === this._input.value) return;
+    this._input.value = result.value;
+    this._input.setSelectionRange(result.start, result.end);
+    this._updatePosition();
+    this.emit("input", { value: this.getValue() });
+  }
+  /** @returns {void} */
+  _updatePosition() {
+    if (!this.options.status) return;
+    const position2 = editorPosition(
+      this._input.value,
+      this._input.selectionStart ?? 0,
+      this._input.selectionEnd ?? 0
+    );
+    this._position.textContent = position2.lines > 1 ? `Ln ${position2.line}, Col ${position2.column} \xB7 ${position2.lines} lines selected` : `Ln ${position2.line}, Col ${position2.column}`;
+  }
+  /** @returns {void} */
+  destroy() {
+    if (!this._createdRoot) {
+      this.el.replaceChildren(...this._initialChildren);
+      for (const [name, value] of this._initialAttributes) {
+        if (value === null) this.el.removeAttribute(name);
+        else this.el.setAttribute(name, value);
+      }
+    }
+    super.destroy();
+  }
+};
+function indentSelection(value, start, end, indent = "	", outdent = false) {
+  const source = String(value ?? "");
+  const unit = String(indent ?? "");
+  const from = clampIndex(start, source.length);
+  const to = clampIndex(end, source.length);
+  if (!unit) return { value: source, start: from, end: to };
+  if (from === to && !outdent) {
+    return {
+      value: source.slice(0, from) + unit + source.slice(to),
+      start: from + unit.length,
+      end: from + unit.length
+    };
+  }
+  const lineStart = source.lastIndexOf("\n", Math.max(0, from - 1)) + 1;
+  let lineEnd = source.indexOf("\n", to);
+  if (lineEnd < 0) lineEnd = source.length;
+  const block = source.slice(lineStart, lineEnd);
+  const lines = block.split("\n");
+  let removedFirst = 0;
+  let delta = 0;
+  const transformed = lines.map((line, index) => {
+    if (!outdent) {
+      delta += unit.length;
+      return unit + line;
+    }
+    const removed = removableIndent(line, unit);
+    if (index === 0) removedFirst = removed;
+    delta -= removed;
+    return line.slice(removed);
+  }).join("\n");
+  const nextStart = outdent ? Math.max(lineStart, from - Math.min(removedFirst, from - lineStart)) : from + unit.length;
+  return {
+    value: source.slice(0, lineStart) + transformed + source.slice(lineEnd),
+    start: nextStart,
+    end: Math.max(nextStart, to + delta)
+  };
+}
+function editorPosition(value, start, end = start) {
+  const source = String(value ?? "");
+  const from = clampIndex(start, source.length);
+  const to = clampIndex(end, source.length);
+  const before = source.slice(0, from);
+  return {
+    line: before.split("\n").length,
+    column: from - before.lastIndexOf("\n"),
+    lines: source.slice(from, to).split("\n").length
+  };
+}
+function removableIndent(line, indent) {
+  if (line.startsWith(indent)) return indent.length;
+  if (indent === "	") return line.startsWith("	") ? 1 : Math.min(/^ +/.exec(line)?.[0].length ?? 0, 2);
+  return Math.min(/^\s+/.exec(line)?.[0].length ?? 0, indent.length);
+}
+function normalizeLanguage(value) {
+  const language2 = String(value ?? "text").trim().toLowerCase();
+  return /^[a-z0-9][a-z0-9+_.-]*$/.test(language2) ? language2 : "text";
+}
+function normalizeRows(value) {
+  const rows = Number(value);
+  return Number.isFinite(rows) ? Math.max(2, Math.min(100, Math.round(rows))) : 12;
+}
+function normalizeWrap(value) {
+  return ["off", "soft", "hard"].includes(String(value)) ? (
+    /** @type {'off'|'soft'|'hard'} */
+    value
+  ) : "off";
+}
+function clampIndex(value, length) {
+  const number = Number(value);
+  return Math.max(0, Math.min(length, Number.isFinite(number) ? Math.round(number) : 0));
+}
+
+// src/components/code-editor/field-adapter.js
+function registerCodeEditorFieldAdapter() {
+  Field.register("code", (field, options) => {
+    const editor = field.own(new CodeEditor(null, {
+      label: options.label ? String(options.label) : "Code editor",
+      placeholder: options.placeholder,
+      readOnly: Boolean(options.props?.readOnly),
+      disabled: Boolean(options.disabled),
+      ...options.props ?? {},
+      value: options.value
+    }));
+    let setting = false;
+    editor.on("input", (event) => {
+      if (!setting) field.emit("change", { value: event.detail.value });
+    });
+    return {
+      el: editor.el,
+      get: () => editor.getValue(),
+      set: (value) => {
+        setting = true;
+        try {
+          editor.setValue(value, { silent: true });
+        } finally {
+          setting = false;
+        }
+      },
+      focus: () => editor.focus(),
+      setDisabled: (value) => value ? editor.disable() : editor.enable()
+    };
+  });
+}
+
 // src/core/date.js
 var MONTHS = [
   "January",
@@ -2080,6 +2350,8 @@ function loadFontAwesomeKit(kit) {
 // src/core/icons.js
 var SVG_NS = "http://www.w3.org/2000/svg";
 var icons = Object.freeze({
+  "arrow-up-wide-short": ["0 0 576 512", "M151.6 42.4C145.5 35.8 137 32 128 32s-17.5 3.8-23.6 10.4l-88 96c-11.9 13-11.1 33.3 2 45.2s33.3 11.1 45.2-2L96 146.3 96 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-301.7 32.4 35.4c11.9 13 32.2 13.9 45.2 2s13.9-32.2 2-45.2l-88-96zM320 480l32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128l160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128l224 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32z"],
+  "arrow-down-wide-short": ["0 0 576 512", "M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96 365.7 96 64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 301.7 32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32 0zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32l160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-160 0zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32l224 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L320 96z"],
   "chevron-down": ["0 0 512 512", "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"],
   "chevron-up": ["0 0 512 512", "M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"],
   "chevron-left": ["0 0 320 512", "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"],
@@ -2175,11 +2447,21 @@ function icon(name, options = {}) {
 }
 function builtinIcon(name, options) {
   const entry = extraGlyphs[name] ?? icons[name];
-  if (!entry) throw new RangeError(`Unknown icon: ${name}`);
+  if (!entry) {
+    if (options.strict) throw new RangeError(`Unknown icon: ${name}`);
+    warnMissingIcon(name);
+    return missingIcon(name, options);
+  }
   const [viewBox, pathData] = entry;
+  const svg = iconSvg(viewBox, options);
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", pathData);
+  svg.append(path);
+  return svg;
+}
+function iconSvg(viewBox, options) {
   const { size = 16 } = options;
   const svg = document.createElementNS(SVG_NS, "svg");
-  const path = document.createElementNS(SVG_NS, "path");
   svg.setAttribute("class", classList("zx-icon", options.class));
   svg.setAttribute("viewBox", viewBox);
   svg.setAttribute("width", String(size));
@@ -2187,10 +2469,20 @@ function builtinIcon(name, options) {
   svg.setAttribute("fill", "currentColor");
   svg.setAttribute("focusable", "false");
   applyLabel(svg, options.label ?? null);
-  path.setAttribute("d", pathData);
-  svg.append(path);
   return svg;
 }
+var PLACEHOLDER_VIEW_BOX = "0 0 512 512";
+function missingIcon(name, options) {
+  const svg = iconSvg(PLACEHOLDER_VIEW_BOX, options);
+  svg.setAttribute("data-zx-icon-missing", name);
+  return svg;
+}
+var warnedMissing = /* @__PURE__ */ new Set();
+function warnMissingIcon(name) {
+  if (warnedMissing.has(name)) return;
+  warnedMissing.add(name);
+  console.warn(`[zx.icon] Unknown icon "${name}" \u2014 rendered an empty placeholder. Add it with registerIcons(), or render Font Awesome with useFontAwesome().`);
+}
 function faIcon(classes, options) {
   const { size = 16 } = options;
   const element = document.createElement("i");
@@ -2234,15 +2526,15 @@ var TimePicker = class 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);
     if (this.options.clock) {
@@ -2251,7 +2543,7 @@ var TimePicker = class 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 })));
@@ -2398,7 +2690,7 @@ var TimePicker = class 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" }, ":"),
@@ -2406,7 +2698,7 @@ var TimePicker = class 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" }
         })
       ),
@@ -2464,7 +2756,7 @@ var TimePicker = class extends Component {
     this.refs.headMinute.textContent = pad2(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;
     const marks = hours ? hourMarks() : minuteMarks();
@@ -2499,6 +2791,16 @@ var TimePicker = class 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;
+  }
 };
 function hourMarks() {
   const marks = [];
@@ -2585,7 +2887,7 @@ var DatePicker = class 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",
@@ -2598,7 +2900,7 @@ var DatePicker = class 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(
@@ -2615,14 +2917,14 @@ var DatePicker = class 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" })
@@ -2633,7 +2935,7 @@ var DatePicker = class 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" })
@@ -2731,7 +3033,7 @@ var DatePicker = class 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);
@@ -2751,7 +3053,10 @@ var DatePicker = class 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) {
       const rowStart = addDays(start, week * 7);
@@ -2760,7 +3065,7 @@ var DatePicker = class 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) {
@@ -2965,6 +3270,17 @@ var DatePicker = class 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;
+  }
 };
 function validDate(value) {
   return value instanceof Date && !Number.isNaN(value.getTime()) ? new Date(value.getTime()) : null;
@@ -3026,21 +3342,21 @@ var MonthPicker = class 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;
@@ -6589,6 +6905,7 @@ var Select = class _Select extends Component {
     value: null,
     disabled: false,
     placeholder: "",
+    label: "",
     clearable: false,
     filter: false,
     searchKeys: null,
@@ -6630,6 +6947,7 @@ var Select = class _Select extends Component {
       class: "zx-select__input",
       type: "text",
       role: "combobox",
+      ariaLabel: String(this.options.label || this.options.placeholder || "Select"),
       autocomplete: "off",
       spellcheck: false,
       ariaExpanded: "false",
@@ -7548,7 +7866,10 @@ function registerSelectFieldAdapter() {
   Field.register("zxselect", (field, options) => {
     const props = options.props ?? {};
     const preset = props.preset;
-    const selectOptions = { ...props, value: options.value };
+    const selectOptions = { ...props, value: options.value, label: options.label || props.label, placeholder: props.placeholder ?? options.placeholder };
+    field.listen(field.el, "click", (event) => {
+      if (event.target.closest?.(".zx-field__label")) field.adapter.focus();
+    });
     delete selectOptions.preset;
     const select = field.own(preset === "priority" ? Select.priority(null, selectOptions) : preset === "status" ? Select.status(null, selectOptions) : new Select(null, selectOptions));
     field.listen(select.el, "change", (event) => event.stopImmediatePropagation());
@@ -8788,7 +9109,7 @@ var Timebox = class extends Component {
     const content = h("div", {
       class: "zx-timebox__content",
       role: "group",
-      ariaLabel: this.options.seconds ? "Duration in hours, minutes, and seconds" : "Duration in hours and minutes"
+      ariaLabel: this.options.seconds ? this._message("timebox.durationWithSeconds", "Duration in hours, minutes, and seconds") : this._message("timebox.duration", "Duration in hours and minutes")
     });
     this._content = content;
     if (this.options.signed) {
@@ -8796,7 +9117,7 @@ var Timebox = class extends Component {
         ref: "sign",
         class: "zx-timebox__sign",
         type: "button",
-        ariaLabel: "Toggle duration sign",
+        ariaLabel: this._message("timebox.toggleSign", "Toggle duration sign"),
         ariaPressed: "false"
       }, "+"));
       this.listen(this.refs.sign, "click", () => {
@@ -8806,12 +9127,12 @@ var Timebox = class extends Component {
         this._emitChange();
       });
     }
-    this._addSegment(content, "hours", "Hours", false);
+    this._addSegment(content, "hours", this._message("timebox.hours", "Hours"), false);
     content.append(h("span", { class: "zx-timebox__separator", ariaHidden: "true" }, ":"));
-    this._addSegment(content, "minutes", "Minutes", true);
+    this._addSegment(content, "minutes", this._message("timebox.minutes", "Minutes"), true);
     if (this.options.seconds) {
       content.append(h("span", { class: "zx-timebox__separator", ariaHidden: "true" }, ":"));
-      this._addSegment(content, "seconds", "Seconds", true);
+      this._addSegment(content, "seconds", this._message("timebox.seconds", "Seconds"), true);
     }
     root.append(content);
     this.set(this.options.value, this.options.unit, { silent: true });
@@ -8937,6 +9258,16 @@ var Timebox = class extends Component {
   _emitChange() {
     this.emit("change", { value: this.get(this.options.unit) });
   }
+  /**
+   * 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;
+  }
 };
 function finiteNumber2(value) {
   const number = Number(value);
@@ -9149,14 +9480,14 @@ var ValueList = class extends Component {
     this._list = h("ul", {
       class: "zx-value-list__list",
       role: "listbox",
-      ariaLabel: "Values",
+      ariaLabel: this._message("valueList.values", "Values"),
       ariaOrientation: "horizontal"
     });
     this._input = h("input", {
       class: "zx-value-list__input",
       type: "text",
       placeholder: String(this.options.placeholder ?? ""),
-      ariaLabel: "Add value",
+      ariaLabel: this._message("valueList.add", "Add value"),
       ariaDescribedby: instructionsId
     });
     this._status = h("div", {
@@ -9167,7 +9498,10 @@ var ValueList = class extends Component {
     this._instructions = h("span", {
       class: "zx-value-list__instructions",
       id: instructionsId
-    }, "Press Enter to add. Focus a value and press Ctrl plus Left or Right to reorder.");
+    }, this._message(
+      "valueList.instructions",
+      "Press Enter to add. Focus a value and press Ctrl plus Left or Right to reorder."
+    ));
     this._ownedNodes.push(this._list, this._input, this._status, this._instructions);
     root.append(this._list, this._input, this._status, this._instructions);
     this.listen(this._input, "keydown", (event) => this._handleInputKeydown(event));
@@ -9216,13 +9550,13 @@ var ValueList = class extends Component {
     const normalized = String(value ?? "").trim();
     if (!normalized) return false;
     if (this.options.unique && this._values.includes(normalized)) {
-      this._showError("This value already exists.");
+      this._showError(this._message("valueList.duplicate", "This value already exists."));
       return false;
     }
     if (typeof this.options.validate === "function") {
       const result = this.options.validate(normalized);
       if (result !== true) {
-        this._showError(typeof result === "string" ? result : "This value is not valid.");
+        this._showError(typeof result === "string" ? result : this._message("valueList.invalid", "This value is not valid."));
         return false;
       }
     }
@@ -9287,7 +9621,7 @@ var ValueList = class extends Component {
       draggable: Boolean(this.options.sortable) && !this._disabled,
       ariaSelected: "false",
       ariaDisabled: String(this._disabled),
-      ariaLabel: this.options.deletable ? `${value}. Press Delete to remove.` : value,
+      ariaLabel: this.options.deletable ? this._message("valueList.removable", "%1. Press Delete to remove.", value) : value,
       dataset: { index }
     }, h("span", { class: "zx-value-list__value" }, value), this.options.deletable ? h("span", {
       class: "zx-value-list__remove",
@@ -9383,6 +9717,17 @@ var ValueList = class extends Component {
     this._status.textContent = message;
     this._input.setAttribute("aria-invalid", "true");
   }
+  /**
+   * 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;
+  }
   /** @returns {void} */
   destroy() {
     for (const node of this._ownedNodes ?? []) node.remove();
@@ -9626,6 +9971,8 @@ var Table = class extends Component {
     height: null,
     emptyText: null,
     rowClass: null,
+    rowKind: null,
+    rowKinds: null,
     zebra: true,
     editMode: false,
     editTrigger: "double",
@@ -9655,6 +10002,10 @@ var Table = class extends Component {
     this._original = created ? null : snapshotTarget(root);
     this._columns = normalizeTableColumns(this.options.columns);
     this._data = Array.isArray(this.options.data) ? [...this.options.data] : [];
+    this._rowKind = normalizeRowKind(this.options.rowKind);
+    this._rowKinds = normalizeRowKinds(this.options.rowKinds);
+    this._spanning = this._hasSpanningRow();
+    this._sortWarned = false;
     this._selected = /* @__PURE__ */ new Set();
     this._selectionAnchorId = null;
     this._sort = normalizeSort(this.options.sort, this._columns);
@@ -10030,6 +10381,7 @@ var Table = class extends Component {
     const row = this.getRow(id);
     const target = this.getRow(targetId);
     if (!row || !target || Object.is(id, targetId)) return this;
+    if (this._isSpanningRow(row)) return this;
     const next = reorderTableRows(this._data, this.options.rowId, id, targetId, position2, this._hierarchy?.parentId);
     if (!next) return this;
     const event = this.emit("rowmove", { row, id, target, targetId, position: position2 });
@@ -10066,6 +10418,10 @@ var Table = class extends Component {
   /**
    * Activates a column sort. Local mode stably reorders data; server mode only updates the
    * header state and emits the request event.
+   *
+   * Inert while the data holds a spanning row: a sort would scatter the positions out of the
+   * sections that group them, in either sort mode. The header withholds its controls for the same
+   * reason, so nothing on screen invites the call.
    * @param {string} id Column id.
    * @param {TableSortDirection} [dir] Direction; omitted toggles the current column.
    * @param {{silent?: boolean}} [options={}] Event options.
@@ -10074,6 +10430,13 @@ var Table = class extends Component {
    * @fires Table#editcancel
    */
   setSort(id, dir, options = {}) {
+    if (this._spanning) {
+      if (!this._sortWarned) {
+        this._sortWarned = true;
+        console.warn("[zx.Table] setSort() is inert while the data contains spanning rowKinds rows: sorting would scatter the rows out of the sections that group them.");
+      }
+      return this;
+    }
     this._abortEdit({ focus: false });
     const column = this._columns.find((candidate) => candidate.id === id);
     if (!column) throw new RangeError(`Unknown table column: ${id}`);
@@ -10125,7 +10488,7 @@ var Table = class extends Component {
    */
   setSelection(ids) {
     if (!Array.isArray(ids)) throw new TypeError("Table selection must be an array of row ids");
-    const valid = new Set(this._data.map((row) => this._idFor(row)));
+    const valid = this._selectableIds();
     const next = /* @__PURE__ */ new Set();
     if (this.options.selectable !== false) {
       for (const id of ids) {
@@ -10237,6 +10600,7 @@ var Table = class extends Component {
     if (!requested) return this;
     const current = this._data.find((candidate) => Object.is(this._idFor(candidate), rowId));
     if (current === void 0) return this;
+    if (this._isSpanningRow(current)) return this;
     const column = this._editMode === "row" && this._hiddenColumns.has(requested.id) ? this._visibleColumns().find((candidate) => resolveEditable(candidate, current) !== false) ?? null : requested;
     if (!column || resolveEditable(column, current) === false) return this;
     const activeColumnId = column.id;
@@ -10525,6 +10889,41 @@ var Table = class extends Component {
   _visibleColumns() {
     return this._columns.filter((column) => !this._hiddenColumns.has(column.id));
   }
+  /**
+   * Whether a row draws as one cell across the table instead of as a record.
+   * @param {TableRow} row Row to classify.
+   * @returns {boolean}
+   */
+  _isSpanningRow(row) {
+    if (this._rowKind === null || this._rowKinds === null) return false;
+    return isSpanningRow(row, this._rowKind, this._rowKinds);
+  }
+  /**
+   * Whether any row in the current data — not only the rendered prefix — spans. This is what
+   * withholds the sort controls, and the reader must not be offered a control that the next
+   * `growBy()` would have to take away again.
+   * @returns {boolean}
+   */
+  _hasSpanningRow() {
+    return hasSpanningRow(this._data, this._rowKind, this._rowKinds);
+  }
+  /**
+   * How many cells one row occupies: every visible column plus the structural columns the table
+   * renders beside them. Shared by the spanning cell and the empty-state cell so the two can never
+   * disagree about the table's width.
+   * @returns {number}
+   */
+  _spanColspan() {
+    return tableSpanColspan(this._visibleColumns().length, {
+      selectable: this.options.selectable,
+      rowReorder: this.options.rowReorder
+    });
+  }
+  /** @returns {TableRow[]} Rendered rows that can carry a selection; spanning rows cannot. */
+  _selectableData() {
+    const visible = this._visibleData();
+    return this._rowKind === null ? visible : visible.filter((row) => !this._isSpanningRow(row));
+  }
   /** @returns {HTMLElement} */
   _createColumnControls() {
     const list = h("div", { class: "zx-table__column-list" });
@@ -10537,7 +10936,12 @@ var Table = class extends Component {
     const details = h(
       "details",
       { class: "zx-table__column-controls" },
-      h("summary", { class: "zx-button zx-button--sm" }, icon("fields", { size: 13 }), "Columns"),
+      h(
+        "summary",
+        { class: "zx-button zx-button--sm" },
+        icon("fields", { size: 13 }),
+        this._message("table.columns", "Columns", [])
+      ),
       list
     );
     this._renderColumnControls();
@@ -10572,7 +10976,7 @@ var Table = class extends Component {
         {
           class: "zx-table__column-order",
           role: "group",
-          ariaLabel: `Move ${column.label}`
+          ariaLabel: this._message("table.moveColumn", "Move %1", [column.label])
         },
         h("button", {
           class: "zx-table__column-move",
@@ -10845,9 +11249,9 @@ var Table = class extends Component {
       row.append(selectionHeader);
       this.listen(this._selectAll, "click", () => {
         if (this._selectAll.checked) {
-          for (const dataRow of this._visibleData()) this._selected.add(this._idFor(dataRow));
+          for (const dataRow of this._selectableData()) this._selected.add(this._idFor(dataRow));
         } else {
-          for (const dataRow of this._visibleData()) this._selected.delete(this._idFor(dataRow));
+          for (const dataRow of this._selectableData()) this._selected.delete(this._idFor(dataRow));
         }
         this._selectionAnchorId = null;
         this._syncSelection();
@@ -10857,12 +11261,13 @@ var Table = class extends Component {
       this._selectAll = null;
     }
     this._headers = /* @__PURE__ */ new Map();
+    this._headerSpanning = this._spanning;
     for (const column of this._visibleColumns()) {
       const th = h("th", { scope: "col" });
       const align = column.align ?? (isNumericColumn(column) ? "end" : null);
       if (align) th.dataset.align = align;
       if (column.headerTitle) th.title = column.headerTitle;
-      if (column.sortable) {
+      if (column.sortable && !this._spanning) {
         const button = h("button", {
           class: "zx-table__sort-button",
           type: "button"
@@ -10884,6 +11289,8 @@ var Table = class extends Component {
   /** @returns {void} @fires Table#editcancel */
   _renderBody() {
     this._abortEdit({ focus: false });
+    this._spanning = this._hasSpanningRow();
+    if (this._headers && this._spanning !== this._headerSpanning) this._renderHeader();
     const fragment2 = document.createDocumentFragment();
     this._rowMeta = /* @__PURE__ */ new WeakMap();
     this._rowElements = /* @__PURE__ */ new Map();
@@ -10895,10 +11302,7 @@ var Table = class extends Component {
       fragment2.append(h(
         "tr",
         { class: "zx-table__empty-row" },
-        h("td", {
-          class: "zx-table__empty",
-          colspan: this._visibleColumns().length + (this.options.selectable === "multi" ? 1 : 0) + (this.options.rowReorder ? 1 : 0)
-        }, this._emptyContent())
+        h("td", { class: "zx-table__empty", colspan: this._spanColspan() }, this._emptyContent())
       ));
     } else {
       this._visibleEntries().forEach((entry, visibleIndex) => {
@@ -10941,7 +11345,14 @@ var Table = class extends Component {
     if (this._growStep) tr.setAttribute("aria-rowindex", String(tree.visibleIndex + 2));
     const rowClass = typeof this.options.rowClass === "function" ? this.options.rowClass(row) : "";
     if (rowClass) tr.classList.add(...String(rowClass).split(/\s+/).filter(Boolean));
-    if (this.options.selectable !== false) tr.setAttribute("aria-selected", String(this._selected.has(id)));
+    const kind = this._rowKind === null ? null : resolveRowKind(row, this._rowKind);
+    const kindSpec = kind === null ? null : resolveRowKindSpec(this._rowKinds, kind);
+    const spanning = Boolean(kindSpec?.span);
+    if (kind !== null) tr.dataset.rowKind = kind;
+    if (kindSpec?.class) tr.classList.add(...String(kindSpec.class).split(/\s+/).filter(Boolean));
+    if (this.options.selectable !== false && !spanning) {
+      tr.setAttribute("aria-selected", String(this._selected.has(id)));
+    }
     if (this._hierarchy) {
       tr.setAttribute("aria-level", String(tree.depth + 1));
       if (tree.hasChildren) tr.setAttribute("aria-expanded", String(this._expanded.has(id)));
@@ -10950,6 +11361,23 @@ var Table = class extends Component {
     const elements = this._rowElements.get(id) ?? [];
     elements.push(tr);
     this._rowElements.set(id, elements);
+    if (spanning) {
+      tr.dataset.span = "true";
+      const cell = (
+        /** @type {HTMLTableCellElement} */
+        h("th", {
+          class: "zx-table__section-cell",
+          scope: "colgroup",
+          colspan: this._spanColspan()
+        })
+      );
+      const content = spanRowContent(row, kindSpec, this._visibleColumns(), index);
+      if (content && typeof content === "object" && typeof content.nodeType === "number") {
+        cell.append(content);
+      } else if (content != null) cell.append(document.createTextNode(String(content)));
+      tr.append(cell);
+      return tr;
+    }
     if (this.options.rowReorder) {
       const handle = h("button", {
         class: "zx-table__row-handle",
@@ -11068,7 +11496,7 @@ var Table = class extends Component {
       }
     }
     this.emit("rowclick", { ...meta, event });
-    if (this.options.selectable === "single" && !this._selected.has(meta.id)) {
+    if (this.options.selectable === "single" && !this._selected.has(meta.id) && !this._isSpanningRow(meta.row)) {
       this._selected = /* @__PURE__ */ new Set([meta.id]);
       this._selectionAnchorId = meta.id;
       this._syncSelection();
@@ -11411,6 +11839,7 @@ var Table = class extends Component {
       if (row < 0 || row >= visible.length) return null;
       const candidateRow = visible[row];
       const candidateColumn = columns[column];
+      if (this._isSpanningRow(candidateRow)) continue;
       if (resolveEditable(candidateColumn, candidateRow) !== false) {
         return {
           id: this._idFor(candidateRow),
@@ -11492,6 +11921,7 @@ var Table = class extends Component {
       const start = Math.min(anchorIndex, currentIndex);
       const end = Math.max(anchorIndex, currentIndex);
       for (let index = start; index <= end; index += 1) {
+        if (this._isSpanningRow(visible[index])) continue;
         const id = this._idFor(visible[index]);
         if (checked) this._selected.add(id);
         else this._selected.delete(id);
@@ -11510,6 +11940,7 @@ var Table = class extends Component {
     for (const [id, rows] of this._rowElements) {
       const selected = this._selected.has(id);
       for (const row of rows) {
+        if (row.hasAttribute("data-span")) continue;
         row.setAttribute("aria-selected", String(selected));
         const checkbox = row.querySelector(".zx-table__row-checkbox");
         if (checkbox) checkbox.checked = selected;
@@ -11520,7 +11951,7 @@ var Table = class extends Component {
   /** @returns {void} */
   _syncSelectAll() {
     if (!this._selectAll) return;
-    const visible = this._visibleData();
+    const visible = this._selectableData();
     const selectedRows = visible.reduce(
       (count, row) => count + Number(this._selected.has(this._idFor(row))),
       0
@@ -11533,13 +11964,15 @@ var Table = class extends Component {
   _syncSortHeader() {
     if (!this._headers) return;
     for (const [id, header] of this._headers) {
-      if (this._sort?.id === id) header.setAttribute("aria-sort", this._sort.dir === "asc" ? "ascending" : "descending");
-      else header.removeAttribute("aria-sort");
+      if (!this._spanning && this._sort?.id === id) {
+        header.setAttribute("aria-sort", this._sort.dir === "asc" ? "ascending" : "descending");
+      } else header.removeAttribute("aria-sort");
     }
   }
   /** @returns {void} */
   _sortData() {
-    if (!this._sort) return;
+    this._spanning = this._hasSpanningRow();
+    if (!this._sort || this._spanning) return;
     const column = this._columns.find((candidate) => candidate.id === this._sort.id);
     if (!column) return;
     const getValue = typeof column.sortValue === "function" ? column.sortValue : (row) => row?.[column.id];
@@ -11572,9 +12005,17 @@ var Table = class extends Component {
     const valid = new Set(branches);
     for (const id of this._expanded) if (!valid.has(id)) this._expanded.delete(id);
   }
+  /** @returns {Set<unknown>} Ids of every row in the data that may hold a selection. */
+  _selectableIds() {
+    const ids = /* @__PURE__ */ new Set();
+    for (const row of this._data) {
+      if (!this._isSpanningRow(row)) ids.add(this._idFor(row));
+    }
+    return ids;
+  }
   /** @returns {boolean} Whether selection changed. */
   _pruneSelection() {
-    const valid = new Set(this._data.map((row) => this._idFor(row)));
+    const valid = this._selectableIds();
     const previousSize = this._selected.size;
     for (const id of this._selected) if (!valid.has(id)) this._selected.delete(id);
     if (!valid.has(this._selectionAnchorId)) this._selectionAnchorId = null;
@@ -11594,6 +12035,34 @@ var Table = class extends Component {
     this.emit("datachange", { rows: this.getData() });
   }
 };
+function resolveRowKind(row, rowKind) {
+  if (rowKind == null || rowKind === "") return null;
+  const raw2 = typeof rowKind === "function" ? rowKind(row) : row?.[rowKind];
+  return raw2 == null ? null : String(raw2);
+}
+function resolveRowKindSpec(rowKinds, kind) {
+  if (kind === null || rowKinds == null || typeof rowKinds !== "object") return null;
+  if (!Object.prototype.hasOwnProperty.call(rowKinds, kind)) return null;
+  const spec = rowKinds[kind];
+  return spec && typeof spec === "object" ? spec : null;
+}
+function isSpanningRow(row, rowKind, rowKinds) {
+  return Boolean(resolveRowKindSpec(rowKinds, resolveRowKind(row, rowKind))?.span);
+}
+function hasSpanningRow(rows, rowKind, rowKinds) {
+  if (!Array.isArray(rows) || rowKind == null || rowKinds == null) return false;
+  return rows.some((row) => isSpanningRow(row, rowKind, rowKinds));
+}
+function tableSpanColspan(columnCount, structure = {}) {
+  const columns = Number.isFinite(Number(columnCount)) ? Math.max(0, Math.trunc(Number(columnCount))) : 0;
+  const extras = (structure.selectable === "multi" ? 1 : 0) + (structure.rowReorder ? 1 : 0);
+  return Math.max(1, columns + extras);
+}
+function spanRowContent(row, spec, visibleColumns, index = 0) {
+  if (typeof spec?.render === "function") return spec.render(row, index);
+  const first = visibleColumns?.[0];
+  return first ? row?.[first.id] : null;
+}
 function formatTableCell(column, row, index = 0) {
   if (typeof column?.render === "function") return column.render(row, index);
   const value = row?.[column?.id];
@@ -11822,6 +12291,20 @@ function normalizeHierarchy(option, columns) {
   if (!column) return null;
   return { ...option, parentId, column };
 }
+function normalizeRowKind(option) {
+  if (typeof option === "function") return (
+    /** @type {(row: TableRow) => unknown} */
+    option
+  );
+  return typeof option === "string" && option !== "" ? option : null;
+}
+function normalizeRowKinds(option) {
+  if (!option || typeof option !== "object" || Array.isArray(option)) return null;
+  return (
+    /** @type {Record<string, TableRowKind>} */
+    option
+  );
+}
 function initialExpanded(option) {
   return new Set(Array.isArray(option) ? option : []);
 }
@@ -12058,14 +12541,20 @@ var Launcher = class extends Component {
     debounce: 250,
     minQuery: 0,
     maxResults: 100,
-    placeholder: "Search applications and records",
-    label: "Launcher",
-    closeLabel: "Close launcher",
-    resultsLabel: "Launcher results",
-    emptyText: "No results",
-    loadingText: "Searching\u2026",
+    /*
+     * The six labels default to null rather than to their English text so that an application
+     * which installs a translator and passes no labels still gets a translated launcher. The
+     * documented default is what `_message()` falls back to, so an untranslated application
+     * renders exactly the same words as before.
+     */
+    placeholder: null,
+    label: null,
+    closeLabel: null,
+    resultsLabel: null,
+    emptyText: null,
+    loadingText: null,
     shortcut: "mod+k",
-    hints: { move: "Move", open: "Open", close: "Close" },
+    hints: null,
     scope: null
   };
   /**
@@ -12104,6 +12593,7 @@ var Launcher = class extends Component {
     this._busy = false;
     this._destroyed = false;
     const listId = uid("zx-launcher-results");
+    const label = String(this.options.label ?? this._message("launcher.label", "Launcher"));
     const input = h("input", {
       ref: "input",
       class: "zx-launcher__input",
@@ -12114,15 +12604,15 @@ var Launcher = class extends Component {
       ariaAutocomplete: "list",
       ariaControls: listId,
       ariaExpanded: "false",
-      ariaLabel: this.options.label,
-      placeholder: this.options.placeholder,
+      ariaLabel: label,
+      placeholder: this.options.placeholder ?? this._message("launcher.placeholder", "Search applications and records"),
       value: this._query
     });
     const close = h("button", {
       ref: "close",
       class: "zx-icon-btn zx-launcher__close",
       type: "button",
-      ariaLabel: this.options.closeLabel
+      ariaLabel: this.options.closeLabel ?? this._message("launcher.close", "Close launcher")
     }, icon("x"));
     const status = h("div", {
       ref: "status",
@@ -12135,14 +12625,18 @@ var Launcher = class extends Component {
       class: "zx-launcher__results",
       id: listId,
       role: "listbox",
-      ariaLabel: this.options.resultsLabel
+      ariaLabel: this.options.resultsLabel ?? this._message("launcher.results", "Launcher results")
     });
     const shortcut = this.options.shortcut === "mod+k" ? h("kbd", {
       class: "zx-launcher__shortcut",
       ariaHidden: "true"
     }, launcherShortcutLabel()) : null;
-    const footer = launcherHints(this.options.hints);
-    dialog.setAttribute("aria-label", String(this.options.label));
+    const footer = launcherHints(this.options.hints, {
+      move: this._message("launcher.hintMove", "Move"),
+      open: this._message("launcher.hintOpen", "Open"),
+      close: this._message("launcher.hintClose", "Close")
+    });
+    dialog.setAttribute("aria-label", label);
     dialog.replaceChildren(
       h(
         "div",
@@ -12434,9 +12928,13 @@ var Launcher = class extends Component {
   }
   /** @returns {void} */
   _renderStatus() {
-    if (this._busy) this.refs.status.textContent = String(this.options.loadingText);
-    else if (this._results.length === 0) this.refs.status.textContent = String(this.options.emptyText);
-    else this.refs.status.textContent = "";
+    if (this._busy) {
+      this.refs.status.textContent = String(this.options.loadingText ?? this._message("launcher.loading", "Searching\u2026"));
+    } else if (this._results.length === 0) {
+      this.refs.status.textContent = String(this.options.emptyText ?? this._message("launcher.empty", "No results"));
+    } else {
+      this.refs.status.textContent = "";
+    }
     this.refs.status.hidden = !this.refs.status.textContent;
   }
   /** @returns {void} */
@@ -12529,6 +13027,16 @@ var Launcher = class extends Component {
     event.preventDefault();
     this.open();
   }
+  /**
+   * 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;
+  }
 };
 function launcherShortcutLabel() {
   const platform = String(
@@ -12537,15 +13045,15 @@ function launcherShortcutLabel() {
   );
   return /mac|iphone|ipad/i.test(platform) ? "\u2318 K" : "Ctrl K";
 }
-function launcherHints(hints) {
+function launcherHints(hints, defaults) {
   if (hints === false) return null;
   const labels = hints && typeof hints === "object" ? hints : {};
   return h(
     "footer",
     { class: "zx-launcher__hints", ariaHidden: "true" },
-    h("span", {}, h("kbd", {}, "\u2191\u2193\u2190\u2192"), labels.move ?? "Move"),
-    h("span", {}, h("kbd", {}, "\u21B5"), labels.open ?? "Open"),
-    h("span", {}, h("kbd", {}, "Esc"), labels.close ?? "Close")
+    h("span", {}, h("kbd", {}, "\u2191\u2193\u2190\u2192"), labels.move ?? defaults.move),
+    h("span", {}, h("kbd", {}, "\u21B5"), labels.open ?? defaults.open),
+    h("span", {}, h("kbd", {}, "Esc"), labels.close ?? defaults.close)
   );
 }
 function launcherItemIcon(item) {
@@ -12965,8 +13473,8 @@ var Message = class _Message extends Component {
       const close = h("button", {
         class: "zx-icon-btn zx-message__close",
         type: "button",
-        ariaLabel: "Close message",
-        title: "Close"
+        ariaLabel: this._message("message.close", "Close message"),
+        title: this._message("message.closeTitle", "Close")
       }, icon("x", { size: 14 }));
       node.append(close);
       this.listen(close, "click", () => this._close(entry));
@@ -13034,6 +13542,16 @@ var Message = class _Message extends Component {
     this._entries.delete(entry);
     this._queue.remove(entry);
   }
+  /**
+   * 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;
+  }
   /** @param {Element|string|null|undefined} scope @returns {Message} */
   static #floatingRegion(scope2) {
     const host = overlayHost(scope2 ?? null);
@@ -13132,6 +13650,29 @@ function calendarRange(view, anchor, options = {}) {
   }
   return { start, end };
 }
+function calendarPageDate(view, anchor, direction, options = {}) {
+  const date = validDate5(anchor, "Calendar date");
+  const step = integer(direction, "direction");
+  if (view === "day") date.setDate(date.getDate() + step);
+  else if (view === "agenda") {
+    date.setDate(date.getDate() + step * positiveInteger(options.agendaDays ?? 14, "agendaDays"));
+  } else if (view === "week") date.setDate(date.getDate() + step * 7);
+  else if (view === "month") return addCalendarMonths(date, step);
+  else if (view === "year") return addCalendarMonths(date, step * 12);
+  else throw new RangeError(`Unknown calendar view: ${view}`);
+  return date;
+}
+function addCalendarMonths(value, months) {
+  const date = validDate5(value, "Calendar date");
+  const day = date.getDate();
+  date.setDate(1);
+  date.setMonth(date.getMonth() + integer(months, "month amount"));
+  date.setDate(Math.min(day, daysInCalendarMonth(date.getFullYear(), date.getMonth())));
+  return date;
+}
+function daysInCalendarMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
 function normalizeCalendarEvents(records, options = {}) {
   if (!Array.isArray(records)) throw new TypeError("Calendar events must be an array");
   const readers = {
@@ -13478,7 +14019,7 @@ var Calendar = class extends Component {
       ref: "views",
       class: "zx-calendar__views",
       role: "group",
-      ariaLabel: "Calendar view"
+      ariaLabel: this._message("calendar.viewSwitch", "Calendar view")
     }, this._views.map((view) => h("button", {
       type: "button",
       class: "zx-calendar__view-button",
@@ -13575,7 +14116,7 @@ var Calendar = class extends Component {
       durationEditable: Object.prototype.hasOwnProperty.call(changes, "durationEditable") ? changes.durationEditable : current.durationEditable,
       data: changes.data ?? current.data
     };
-    const [next] = normalizeCalendarEvents([source]);
+    const [next] = normalizeCalendarEvents([source], { dateUnit: this.options.dateUnit });
     next.data = source.data;
     this._events = this._events.map((event, eventIndex) => eventIndex === index ? next : event);
     this._mutationVersions.delete(String(id));
@@ -13926,7 +14467,7 @@ var Calendar = class extends Component {
             eventCount: String(count)
           },
           ariaCurrent: sameCalendarDay(day, this._now()) ? "date" : null,
-          ariaLabel: `${this._format(day, { dateStyle: "full" })}, ${count} ${count === 1 ? "event" : "events"}`,
+          ariaLabel: this._dayCountLabel(day, count),
           disabled: this.options.disabled
         }, this._format(day, { day: "numeric" })));
       }
@@ -13996,7 +14537,7 @@ var Calendar = class extends Component {
             activity: String(Math.min(3, count))
           },
           ariaCurrent: sameCalendarDay(day, this._now()) ? "date" : null,
-          ariaLabel: `${this._format(day, { dateStyle: "full" })}, ${count} ${count === 1 ? "event" : "events"}`,
+          ariaLabel: this._dayCountLabel(day, count),
           disabled: this.options.disabled
         }, String(day.getDate())));
       }
@@ -14601,13 +15142,9 @@ var Calendar = class extends Component {
   }
   /** @param {number} direction @returns {this} */
   _page(direction) {
-    const date = new Date(this._date.getTime());
-    if (this._view === "day") date.setDate(date.getDate() + direction);
-    else if (this._view === "agenda") date.setDate(date.getDate() + direction * this.options.agendaDays);
-    else if (this._view === "week") date.setDate(date.getDate() + direction * 7);
-    else if (this._view === "month") date.setMonth(date.getMonth() + direction);
-    else date.setFullYear(date.getFullYear() + direction);
-    return this.setDate(date);
+    return this.setDate(calendarPageDate(this._view, this._date, direction, {
+      agendaDays: this.options.agendaDays
+    }));
   }
   /** @param {{start: Date, end: Date}} range @returns {string} */
   _rangeTitle(range) {
@@ -14731,6 +15268,31 @@ var Calendar = class extends Component {
       if (!this._destroyed) this.refs.status.textContent = message;
     });
   }
+  /**
+   * Names a month or year cell by its date and how many events it holds. Singular and plural are
+   * separate keys because a language that inflects the noun cannot reach it from one template.
+   * @param {Date} day Day the cell stands for.
+   * @param {number} count Events on that day.
+   * @returns {string}
+   */
+  _dayCountLabel(day, count) {
+    const date = this._format(day, { dateStyle: "full" });
+    return count === 1 ? this._message("calendar.dayEvent", "%1, %2 event", date, count) : this._message("calendar.dayEvents", "%1, %2 events", date, count);
+  }
+  /**
+   * Resolves a message through the host translator, falling back to the built-in English text.
+   *
+   * Distinct from `msg()`: the built-in `msg` option answers the calendar's own vocabulary, so a
+   * dotted key falls past it to the host translator, which is what these strings never had.
+   * @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;
+  }
 };
 function normalizeViews(value) {
   if (!Array.isArray(value) || value.length === 0) throw new TypeError("Calendar views must be a non-empty array");
@@ -15349,6 +15911,7 @@ function isEmpty(value) {
 function registerFieldAdapters() {
   registerSelectFieldAdapter();
   registerChecklistFieldAdapter();
+  registerCodeEditorFieldAdapter();
   registerDateboxFieldAdapters();
   registerDatePickerFieldAdapters();
   registerDateRangeFieldAdapter();