@zeyos/zx 4.3.4 → 5.0.0

package/dist/zx-zeyos.esm.js

@@ -12,6 +12,95 @@ function unixSecondsToDate(seconds) {
   if (!Number.isFinite(value)) throw new TypeError("Expected finite Unix seconds");
   return new Date(value * 1e3);
 }
+function unixSecondsToCalendarDay(seconds, timeZone) {
+  if (seconds == null || seconds === "") return null;
+  const value = Number(seconds);
+  if (!Number.isFinite(value)) throw new TypeError("Expected finite Unix seconds");
+  const { year, month, day } = calendarZone(timeZone).dayOf(value * 1e3);
+  return localMidnight(year, month, day);
+}
+function calendarDayToUnixSeconds(date, timeZone) {
+  if (date == null) return null;
+  if (!(date instanceof Date)) throw new TypeError("Expected a Date");
+  if (!Number.isFinite(date.getTime())) throw new RangeError("Invalid Date");
+  const midnight = calendarZone(timeZone).midnightOf(date.getFullYear(), date.getMonth(), date.getDate());
+  return Math.floor(midnight / 1e3);
+}
+function normalizeTimeZone(timeZone) {
+  if (timeZone == null || timeZone === "") return void 0;
+  try {
+    return new Intl.DateTimeFormat("en-US", { timeZone: String(timeZone) }).resolvedOptions().timeZone;
+  } catch {
+    throw new RangeError(`Unknown time zone "${String(timeZone)}"`);
+  }
+}
+function calendarZone(timeZone) {
+  const zone = normalizeTimeZone(timeZone);
+  if (!zone) {
+    return {
+      timeZone: void 0,
+      dayOf: (milliseconds) => {
+        const date = new Date(milliseconds);
+        return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
+      },
+      midnightOf: (year, month, day) => localMidnight(year, month, day).getTime()
+    };
+  }
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    timeZone: zone,
+    hourCycle: "h23",
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric"
+  });
+  const wallClock = (milliseconds) => {
+    const parts = {};
+    for (const part of formatter.formatToParts(new Date(milliseconds))) parts[part.type] = Number(part.value);
+    return {
+      year: parts.year,
+      month: parts.month - 1,
+      day: parts.day,
+      seconds: parts.hour % 24 * 3600 + parts.minute * 60 + parts.second
+    };
+  };
+  const offsetAt = (milliseconds) => {
+    const wall = wallClock(milliseconds);
+    return utcMidnight(wall.year, wall.month, wall.day) + wall.seconds * 1e3 - Math.floor(milliseconds / 1e3) * 1e3;
+  };
+  return {
+    timeZone: zone,
+    dayOf: (milliseconds) => {
+      const { year, month, day } = wallClock(milliseconds);
+      return { year, month, day };
+    },
+    midnightOf: (year, month, day) => {
+      const target = utcMidnight(year, month, day);
+      const first = target - offsetAt(target);
+      const second = target - offsetAt(first);
+      let best = null;
+      for (const candidate of [second, first]) {
+        const wall = wallClock(candidate);
+        if (wall.year !== year || wall.month !== month || wall.day !== day) continue;
+        if (!best || wall.seconds < best.seconds) best = { candidate, seconds: wall.seconds };
+      }
+      return best ? best.candidate : second;
+    }
+  };
+}
+function localMidnight(year, month, day) {
+  const date = new Date(2e3, 0, 1);
+  date.setFullYear(year, month, day);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+function utcMidnight(year, month, day) {
+  const date = /* @__PURE__ */ new Date(0);
+  date.setUTCFullYear(year, month, day);
+  return date.getTime();
+}
 function tableSortToQuery(sort) {
   const entries = Array.isArray(sort) ? sort : sort ? [sort] : [];
   return entries.flatMap((entry) => {
@@ -119,6 +208,37 @@ function mapSortAliases(sort, fields) {
 
 // src/zeyos/schema.js
 var TYPE_MAP = /* @__PURE__ */ Object.create(null);
+var DATE_ONLY_FIELDS = /* @__PURE__ */ new Set(["date", "duedate", "birthdate", "datefrom", "dateto", "datecancel", "lastbilling"]);
+var INSTANT_FIELDS = /* @__PURE__ */ new Set([
+  "appointments.datefrom",
+  "appointments.dateto",
+  "events.datefrom",
+  "events.dateto",
+  "comments.date",
+  "documentversions.date",
+  "records.date"
+]);
+var ENUM_WORDS = Object.freeze({
+  AWAITINGACCEPTANCE: "awaiting acceptance",
+  AWAITINGAPPROVAL: "awaiting approval",
+  BILLINGONLY: "billing only",
+  CUSTOMERANDSUPPLIER: "customer and supplier",
+  FEEDBACKREQUIRED: "feedback required",
+  INEVALUATION: "in evaluation",
+  INNEGOTIATION: "in negotiation",
+  INREVISION: "in revision",
+  NOSTOCK: "no stock",
+  NOTSTARTED: "not started",
+  PARTLYDELIVERED: "partly delivered",
+  PARTLYINVOICED: "partly invoiced",
+  PARTLYORDERED: "partly ordered",
+  PARTLYPAID: "partly paid",
+  PROCUREMENTONLY: "procurement only",
+  REMOTECALL: "remote call",
+  SERIALSANDCHARGES: "serials and charges"
+});
+var PRIORITY_LABELS = Object.freeze({ 0: "Lowest", 1: "Low", 2: "Medium", 3: "High", 4: "Highest" });
+var ENUM_CONSTANT = /^[A-Z][A-Z\d]*(?:_[A-Z\d]+)*$/;
 var warnedUnknownTypes = /* @__PURE__ */ new Set();
 function registerFieldType(typeOrFormat, strategy) {
   const key = normalizeType(typeOrFormat);
@@ -180,6 +300,8 @@ function resolveFields(client, resource, opts = {}) {
   const requested = Array.isArray(opts.fields) ? opts.fields.map(String) : [...available.keys()];
   const excluded = new Set(Array.isArray(opts.exclude) ? opts.exclude.map(String) : []);
   const labels = opts.labels && typeof opts.labels === "object" ? opts.labels : {};
+  const formats = opts.formats && typeof opts.formats === "object" ? opts.formats : {};
+  const timeZone = normalizeTimeZone(opts.timeZone);
   const result = [];
   for (const id of requested) {
     if (excluded.has(id) || !available.has(id)) continue;
@@ -191,6 +313,8 @@ function resolveFields(client, resource, opts = {}) {
       if (meta.enum == null) meta.enum = enumValues;
     }
     if (Object.prototype.hasOwnProperty.call(labels, id)) meta.label = String(labels[id]);
+    if (Object.prototype.hasOwnProperty.call(formats, id) && formats[id]) meta.format = String(formats[id]);
+    if (timeZone) meta.timeZone = timeZone;
     result.push(meta);
   }
   return result;
@@ -223,7 +347,7 @@ var enumColumn = {
 };
 var priorityColumn = {
   field: { type: "zxselect", props: { preset: "priority" } },
-  column: (meta) => ({ render: enumRenderer(meta, priorityOptions()) })
+  column: (meta) => ({ render: enumRenderer(meta, PRIORITY_LABELS) })
 };
 var percentColumn = {
   field: { type: "float", props: { min: 0, max: 100 } },
@@ -266,10 +390,13 @@ for (const type of ["email", "tel", "url", "uri"]) {
 function dateStrategy(type) {
   return {
     field: { type },
-    column: (meta) => ({
-      render: (row) => formatUnixDate(rowValue(row, meta), type === "datetime"),
-      sortValue: (row) => unixSortValue(rowValue(row, meta))
-    })
+    column: (meta) => {
+      const format2 = type === "datetime" ? instantFormatter() : calendarDayFormatter(meta.timeZone);
+      return {
+        render: (row) => format2(rowValue(row, meta)),
+        sortValue: (row) => unixSortValue(rowValue(row, meta))
+      };
+    }
   };
 }
 function strategyFor(meta) {
@@ -290,9 +417,8 @@ function strategyKey(meta) {
   if (meta.enums != null || meta.enum != null) return "enum";
   const raw2 = normalizeType(meta.type);
   if (raw2 === "bigint" || raw2 === "int64") {
-    const id = String(meta.id).toLowerCase();
-    if (id === "date" && meta.indexed) return "date";
-    if (/(?:date|time)$/.test(id)) return "datetime";
+    const temporal = timestampKind(meta);
+    if (temporal) return temporal;
   }
   if (isLongText(meta, raw2)) return "longtext";
   if (raw2 && TYPE_MAP[raw2]) return raw2;
@@ -301,6 +427,15 @@ function strategyKey(meta) {
   if (/^character varying(?:\(\d+\))?$/.test(raw2)) return "character varying";
   return raw2 || semantic;
 }
+function timestampKind(meta) {
+  const id = String(meta.id).toLowerCase();
+  const resource = String(meta.resource ?? "").toLowerCase();
+  if (DATE_ONLY_FIELDS.has(id) && !INSTANT_FIELDS.has(`${resource}.${id}`)) {
+    if (id !== "date" || meta.indexed) return "date";
+  }
+  if (INSTANT_FIELDS.has(`${resource}.${id}`) || /(?:date|time)$|^lastmodified$/.test(id)) return "datetime";
+  return null;
+}
 function normalizeMeta(meta) {
   if (!meta || typeof meta !== "object" || Array.isArray(meta)) throw new TypeError("Field metadata must be an object");
   const id = meta.id ?? meta.name ?? meta.field ?? meta.identifier ?? meta.reference;
@@ -382,26 +517,29 @@ function normalizeEnumOptions(values) {
     return Object.fromEntries(values.map((entry, index) => {
       if (Array.isArray(entry)) {
         const [value = index, label = value] = entry;
-        return [String(value), String(label)];
+        return [String(value), enumLabel(label)];
       }
       if (entry && typeof entry === "object") {
         const value = entry.value ?? entry.id ?? index;
-        return [String(value), String(entry.label ?? entry.name ?? value)];
+        return [String(value), entry.label != null ? String(entry.label) : enumLabel(entry.name ?? value)];
       }
-      return [String(index), String(entry)];
+      return [String(index), enumLabel(entry)];
     }));
   }
   if (values && typeof values === "object") {
-    return Object.fromEntries(Object.entries(values).map(([value, label]) => [value, String(label)]));
+    return Object.fromEntries(Object.entries(values).map(([value, label]) => [value, enumLabel(label)]));
   }
   return {};
 }
+function enumLabel(name2) {
+  const text3 = String(name2 ?? "");
+  if (!ENUM_CONSTANT.test(text3)) return text3;
+  const words = text3.split("_").map((part) => ENUM_WORDS[part] ?? part.toLowerCase()).join(" ");
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
 function enumFieldType(meta) {
   return Object.keys(enumOptions(meta)).length <= 5 ? "optionlist" : "select";
 }
-function priorityOptions() {
-  return { "0": "LOWEST", "1": "LOW", "2": "MEDIUM", "3": "HIGH", "4": "HIGHEST" };
-}
 function enumRenderer(meta, fallback = {}) {
   const labels = { ...fallback, ...enumOptions(meta) };
   return (row) => {
@@ -431,17 +569,38 @@ function formatPercent(value) {
   const number = finiteNumber(value);
   return number == null ? "" : `${new Intl.NumberFormat().format(number)}%`;
 }
-function formatUnixDate(value, includeTime) {
-  if (value == null || value === "") return "";
+function instantFormatter() {
+  const formatter = new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" });
+  return (value) => {
+    const date = timestampDate(value);
+    return date ? formatter.format(date) : "";
+  };
+}
+function calendarDayFormatter(timeZone) {
+  const zone = calendarZone(
+    /** @type {string|undefined} */
+    timeZone ?? void 0
+  );
+  const formatter = new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeZone: "UTC" });
+  return (value) => {
+    const date = timestampDate(value);
+    if (!date) return "";
+    const { year, month, day } = value instanceof Date ? { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() } : zone.dayOf(date.getTime());
+    const utc = /* @__PURE__ */ new Date(0);
+    utc.setUTCFullYear(year, month, day);
+    return formatter.format(utc);
+  };
+}
+function timestampDate(value) {
+  if (value == null || value === "") return null;
   try {
     const date = value instanceof Date ? value : unixSecondsToDate(
       /** @type {number|string} */
       value
     );
-    if (!date || !Number.isFinite(date.getTime())) return "";
-    return new Intl.DateTimeFormat(void 0, includeTime ? { dateStyle: "medium", timeStyle: "short" } : { dateStyle: "medium" }).format(date);
+    return date && Number.isFinite(date.getTime()) ? date : null;
   } catch {
-    return "";
+    return null;
   }
 }
 function unixSortValue(value) {
@@ -589,7 +748,7 @@ function snapshotTarget(element) {
 function restoreTarget(element, snapshot3) {
   if (!snapshot3) return;
   for (const attribute of Array.from(element.attributes)) element.removeAttribute(attribute.name);
-  for (const [name, value] of snapshot3.attributes) element.setAttribute(name, value);
+  for (const [name2, value] of snapshot3.attributes) element.setAttribute(name2, value);
   element.replaceChildren(...snapshot3.children);
 }
 function resolveElement(target) {
@@ -634,9 +793,9 @@ function applyProperty(element, key, value) {
     return;
   }
   if (key === "dataset" && value && typeof value === "object") {
-    for (const [name, datasetValue] of Object.entries(value)) {
-      if (datasetValue == null) delete element.dataset[name];
-      else element.dataset[name] = String(datasetValue);
+    for (const [name2, datasetValue] of Object.entries(value)) {
+      if (datasetValue == null) delete element.dataset[name2];
+      else element.dataset[name2] = String(datasetValue);
     }
     return;
   }
@@ -966,12 +1125,12 @@ function mergeOptions(constructor, options) {
   const result = {};
   let messages = {};
   let hasMessages = false;
-  for (const defaults of chain) {
-    if (!defaults || typeof defaults !== "object") continue;
-    Object.assign(result, defaults);
-    if (defaults.msg && typeof defaults.msg === "object") {
+  for (const defaults4 of chain) {
+    if (!defaults4 || typeof defaults4 !== "object") continue;
+    Object.assign(result, defaults4);
+    if (defaults4.msg && typeof defaults4.msg === "object") {
       hasMessages = true;
-      messages = deepMerge(messages, defaults.msg);
+      messages = deepMerge(messages, defaults4.msg);
     }
   }
   Object.assign(result, options && typeof options === "object" ? options : {});
@@ -1000,6 +1159,7 @@ var Field = class _Field extends Component {
   /** @type {FieldOptions & {msg: Record<string, string>}} */
   static defaults = {
     id: null,
+    name: null,
     type: "text",
     label: "",
     description: "",
@@ -1025,10 +1185,10 @@ var Field = class _Field extends Component {
    * @returns {typeof Field}
    */
   static register(type, adapter) {
-    const name = String(type).trim().toLowerCase();
-    if (!name) throw new TypeError("Field adapter type must not be empty");
+    const name2 = String(type).trim().toLowerCase();
+    if (!name2) throw new TypeError("Field adapter type must not be empty");
     if (typeof adapter !== "function") throw new TypeError("Field adapter must be a function");
-    _Field.#adapters.set(name, adapter);
+    _Field.#adapters.set(name2, adapter);
     return this;
   }
   /**
@@ -1039,9 +1199,10 @@ var Field = class _Field extends Component {
   static has(type) {
     return _Field.#adapters.has(String(type).trim().toLowerCase());
   }
-  // `adapter` (FieldAdapter), `initialValue`, and `controlId` are assigned in render();
-  // declaring them as class fields would re-initialize them to undefined after the base
-  // constructor (which calls render()) returns — see AGENTS.md.
+  // `adapter` (FieldAdapter), `initialValue`, `controlId` (the control's DOM id), and `name` (the
+  // field name, '' when there is none) are assigned in render(); declaring them as class fields
+  // would re-initialize them to undefined after the base constructor (which calls render())
+  // returns — see AGENTS.md.
   /** @returns {HTMLElement} */
   render() {
     const root = (
@@ -1057,6 +1218,7 @@ var Field = class _Field extends Component {
     root.dataset.layout = layout;
     root.dataset.fieldType = type;
     this.controlId = this.options.id ? String(this.options.id) : uid("zx-field");
+    this.name = String(this.options.name ?? this.options.id ?? "");
     const labelId = `${this.controlId}-label`;
     const descriptionId = `${this.controlId}-description`;
     const highlightId = `${this.controlId}-highlight`;
@@ -1102,9 +1264,12 @@ var Field = class _Field extends Component {
     }
     const control = this.adapter.el;
     if (!control.id) control.id = this.controlId;
-    label.htmlFor = control.id;
-    if (!isLabelable(control)) control.setAttribute("aria-labelledby", labelId);
-    this._baseDescribedBy = control.getAttribute("aria-describedby") ?? "";
+    const labelled = this.adapter.labelTarget ?? (isLabelable(control) ? control : unnamedControlWithin(control)) ?? control;
+    this._labelled = labelled;
+    if (labelled !== control && isLabelable(labelled) && !labelled.id) labelled.id = `${this.controlId}-input`;
+    label.htmlFor = isLabelable(labelled) ? labelled.id : control.id;
+    if (!isLabelable(labelled)) labelled.setAttribute("aria-labelledby", labelId);
+    this._baseDescribedBy = labelled.getAttribute("aria-describedby") ?? "";
     controlSlot.append(control);
     this._descriptionId = String(this.options.description ?? "") ? descriptionId : "";
     this._highlightId = highlightId;
@@ -1179,11 +1344,11 @@ var Field = class _Field extends Component {
     this._highlight.hidden = !message;
     if (normalizedKind === "danger" && message) {
       this._highlight.setAttribute("role", "alert");
-      this.adapter.el.setAttribute("aria-invalid", "true");
+      this._labelled.setAttribute("aria-invalid", "true");
       this.emit("invalid", { message: String(message) });
     } else {
       this._highlight.removeAttribute("role");
-      this.adapter.el.removeAttribute("aria-invalid");
+      this._labelled.removeAttribute("aria-invalid");
     }
     this._syncDescription(Boolean(message));
     return this;
@@ -1197,7 +1362,7 @@ var Field = class _Field extends Component {
     this._highlight.textContent = "";
     this._highlight.hidden = true;
     this._highlight.removeAttribute("role");
-    this.adapter.el.removeAttribute("aria-invalid");
+    this._labelled.removeAttribute("aria-invalid");
     this._syncDescription(false);
     return this;
   }
@@ -1222,8 +1387,8 @@ var Field = class _Field extends Component {
   /** @param {boolean} [highlighted=false] @returns {void} */
   _syncDescription(highlighted = false) {
     const ids = [this._baseDescribedBy, this._descriptionId, highlighted ? this._highlightId : ""].flatMap((value) => value.split(/\s+/)).filter(Boolean);
-    if (ids.length) this.adapter.el.setAttribute("aria-describedby", [...new Set(ids)].join(" "));
-    else this.adapter.el.removeAttribute("aria-describedby");
+    if (ids.length) this._labelled.setAttribute("aria-describedby", [...new Set(ids)].join(" "));
+    else this._labelled.removeAttribute("aria-describedby");
   }
   /** @returns {void} */
   destroy() {
@@ -1319,25 +1484,35 @@ function errorAdapter(message, id) {
 function isLabelable(element) {
   return ["BUTTON", "INPUT", "METER", "OUTPUT", "PROGRESS", "SELECT", "TEXTAREA"].includes(element.tagName);
 }
+function unnamedControlWithin(root) {
+  for (const candidate of root.querySelectorAll('input:not([type="hidden"]), select, textarea')) {
+    if (candidate.hasAttribute("aria-label") || candidate.hasAttribute("aria-labelledby")) continue;
+    const labels = [.../** @type {HTMLInputElement} */
+    candidate.labels ?? []];
+    if (labels.some((label) => label.textContent?.trim())) continue;
+    return candidate;
+  }
+  return null;
+}
 function rememberAttributes(element, names) {
-  return new Map(names.map((name) => [name, element.getAttribute(name)]));
+  return new Map(names.map((name2) => [name2, element.getAttribute(name2)]));
 }
 function restoreAttributes(element, attributes) {
-  for (const [name, value] of attributes) {
-    if (value === null) element.removeAttribute(name);
-    else element.setAttribute(name, value);
+  for (const [name2, value] of attributes) {
+    if (value === null) element.removeAttribute(name2);
+    else element.setAttribute(name2, value);
   }
 }
-function controlProps(options, base) {
+function controlProps(field, options, base) {
   const props = { ...options.props ?? {} };
   for (const key of Object.keys(props)) {
     if (/^on[a-z]/i.test(key) || key === "content") delete props[key];
   }
-  return { ...props, ...base };
+  return { name: field.name || void 0, ...props, ...base };
 }
 function textAdapter(tag, type) {
-  return (_field, options) => {
-    const el = h(tag, controlProps(options, {
+  return (field, options) => {
+    const el = h(tag, controlProps(field, options, {
       type: tag === "input" ? type : void 0,
       placeholder: options.placeholder,
       required: options.required,
@@ -1362,7 +1537,7 @@ function elementValueAdapter(el) {
 function numericAdapter(kind) {
   return (field, options) => {
     const coerce = kind === "int" ? coerceInteger : coerceFloat;
-    const input = h("input", controlProps(options, {
+    const input = h("input", controlProps(field, options, {
       type: "text",
       inputMode: kind === "int" ? "numeric" : "decimal",
       placeholder: options.placeholder,
@@ -1384,8 +1559,8 @@ function numericAdapter(kind) {
     };
   };
 }
-var checkboxAdapter = (_field, options) => {
-  const input = h("input", controlProps(options, {
+var checkboxAdapter = (field, options) => {
+  const input = h("input", controlProps(field, options, {
     type: "checkbox",
     required: options.required,
     disabled: options.disabled
@@ -1402,8 +1577,8 @@ var checkboxAdapter = (_field, options) => {
     }
   };
 };
-var selectAdapter = (_field, options) => {
-  const select = h("select", controlProps(options, {
+var selectAdapter = (field, options) => {
+  const select = h("select", controlProps(field, options, {
     required: options.required,
     disabled: options.disabled
   }));
@@ -1412,16 +1587,16 @@ var selectAdapter = (_field, options) => {
   }
   return elementValueAdapter(select);
 };
-var optionListAdapter = (_field, options) => {
+var optionListAdapter = (field, options) => {
   const root = h("div", {
     class: "zx-field__option-list",
     role: "radiogroup"
   });
-  const name = options.id ? String(options.id) : uid("zx-option-list");
+  const name2 = field.controlId;
   const radios = normalizeOptions(options.options).map(([value, label], index) => {
     const input = h("input", {
       type: "radio",
-      name,
+      name: name2,
       value,
       required: Boolean(options.required) && index === 0,
       disabled: options.disabled
@@ -1442,8 +1617,8 @@ var optionListAdapter = (_field, options) => {
     }
   };
 };
-var htmlAdapter = (_field, options) => {
-  const el = h("div", controlProps(options, { class: "zx-field__static" }));
+var htmlAdapter = (field, options) => {
+  const el = h("div", controlProps(field, options, { class: "zx-field__static", name: void 0 }));
   let adopted = null;
   const set = (value) => {
     restoreAdopted(adopted);
@@ -1528,6 +1703,7 @@ var Checklist = class extends Component {
     search: true,
     height: 280,
     defaultChecked: false,
+    hideLabel: false,
     load: null
   };
   /** @returns {HTMLElement} */
@@ -1548,14 +1724,15 @@ var Checklist = class extends Component {
     );
     this.el = root;
     if (!this._createdRoot) this._originalChildren = Array.from(root.childNodes);
-    for (const name of ["role", "aria-labelledby", "data-state"]) {
-      this._originalAttributes.set(name, root.getAttribute(name));
+    for (const name2 of ["role", "aria-label", "aria-labelledby", "data-state"]) {
+      this._originalAttributes.set(name2, root.getAttribute(name2));
     }
+    const labelText = this._message("checklist.label", "Checklist");
     const labelId = uid("zx-checklist-label");
-    const title = h("div", {
+    const title = this.options.hideLabel ? null : h("div", {
       class: "zx-checklist__label",
       id: labelId
-    }, this._message("checklist.label", "Checklist"));
+    }, labelText);
     const search = h("input", {
       ref: "search",
       class: "zx-checklist__search",
@@ -1570,9 +1747,10 @@ var Checklist = class extends Component {
       class: "zx-checklist__list"
     });
     list.style.maxBlockSize = `${Math.max(0, Number(this.options.height) || 0)}px`;
-    root.replaceChildren(title, search, list);
+    root.replaceChildren(...[title, search, list].filter(Boolean));
     root.setAttribute("role", "group");
-    root.setAttribute("aria-labelledby", labelId);
+    if (title) root.setAttribute("aria-labelledby", labelId);
+    else root.setAttribute("aria-label", labelText);
     this.listen(search, "input", () => this.search(
       /** @type {HTMLInputElement} */
       search.value
@@ -1683,9 +1861,9 @@ var Checklist = class extends Component {
     );
     if (!this._createdRoot && root) {
       root.replaceChildren(...this._originalChildren);
-      for (const [name, value] of this._originalAttributes) {
-        if (value === null) root.removeAttribute(name);
-        else root.setAttribute(name, value);
+      for (const [name2, value] of this._originalAttributes) {
+        if (value === null) root.removeAttribute(name2);
+        else root.setAttribute(name2, value);
       }
     }
     super.destroy();
@@ -1762,7 +1940,7 @@ function setsEqual(left, right) {
 // src/components/checklist/field-adapter.js
 function registerChecklistFieldAdapter() {
   Field.register("checklist", (field, options) => {
-    const checklist = field.own(new Checklist(null, { ...options.props ?? {} }));
+    const checklist = field.own(new Checklist(null, { hideLabel: true, ...options.props ?? {} }));
     let disabled = false;
     let setting = false;
     const syncDisabled = () => {
@@ -1800,6 +1978,283 @@ function registerChecklistFieldAdapter() {
   });
 }
 
+// src/components/code-editor/code-editor.js
+var MODIFIER_KEYS = /* @__PURE__ */ new Set(["Shift", "Control", "Alt", "Meta", "AltGraph", "CapsLock", "Fn", "OS"]);
+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((name2) => [name2, root.getAttribute(name2)]));
+    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._tabReleased = false;
+    this.listen(this._input, "keydown", (event) => this._handleKeydown(event));
+    this.listen(this._input, "blur", () => {
+      this._tabReleased = false;
+    });
+    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.isComposing || MODIFIER_KEYS.has(event.key)) return;
+    if (event.key === "Escape") {
+      this._tabReleased = true;
+      return;
+    }
+    const released = this._tabReleased;
+    this._tabReleased = false;
+    if (released || 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 [name2, value] of this._initialAttributes) {
+        if (value === null) this.el.removeAttribute(name2);
+        else this.el.setAttribute(name2, 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",
@@ -2025,19 +2480,19 @@ function parseIconSpec(spec) {
   const separator = text3.indexOf(":");
   if (separator > 0) {
     const prefix = text3.slice(0, separator).toLowerCase();
-    const name = text3.slice(separator + 1);
+    const name2 = text3.slice(separator + 1);
     if (prefix === "builtin" || prefix === "zx") {
-      return { provider: "builtin", name, style: null, classes: null };
+      return { provider: "builtin", name: name2, style: null, classes: null };
     }
     if (Object.hasOwn(stylePrefixes, prefix)) {
-      return { provider: "fa", name, style: stylePrefixes[prefix], classes: null };
+      return { provider: "fa", name: name2, style: stylePrefixes[prefix], classes: null };
     }
   }
   return { provider: null, name: text3, style: null, classes: null };
 }
-function faIconClasses(name, options = {}) {
+function faIconClasses(name2, options = {}) {
   const { style = "solid", family = "classic", fixedWidth = false, translate: translate2 = true } = options;
-  const bare = String(name).replace(/^fa-/, "");
+  const bare = String(name2).replace(/^fa-/, "");
   const resolved = translate2 ? faNames[bare] ?? bare : bare;
   const classes = [];
   const familyClass = faFamilies[family];
@@ -2084,42 +2539,61 @@ function loadFontAwesomeKit(kit) {
 
 // src/core/icons.js
 var SVG_NS = "http://www.w3.org/2000/svg";
+var VIEW_BOX = "0 0 24 24";
+var STROKE_WIDTH = 1.75;
+var MIN_STROKE_PX = 1;
+var outline = (path) => [VIEW_BOX, path, "stroke"];
 var icons = Object.freeze({
-  "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"],
-  "chevron-right": ["0 0 320 512", "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"],
-  check: ["0 0 448 512", "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"],
-  x: ["0 0 384 512", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"],
-  plus: ["0 0 448 512", "M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"],
-  minus: ["0 0 448 512", "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"],
-  search: ["0 0 512 512", "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"],
-  calendar: ["0 0 448 512", "M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192z"],
-  clock: ["0 0 512 512", "M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"],
-  trash: ["0 0 448 512", "M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"],
-  gear: ["0 0 512 512", "M481.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"],
-  eye: ["0 0 576 512", "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1-288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"],
-  lock: ["0 0 448 512", "M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"],
-  reload: ["0 0 512 512", "M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z"],
-  list: ["0 0 512 512", "M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z"],
-  filter: ["0 0 512 512", "M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z"],
-  dots: ["0 0 448 512", "M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1-112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"],
-  info: ["0 0 512 512", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"],
-  warning: ["0 0 512 512", "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z"],
-  error: ["0 0 512 512", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"],
-  success: ["0 0 512 512", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"],
-  upload: ["0 0 512 512", "M288 109.3V352c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352H192c0 35.3 28.7 64 64 64s64-28.7 64-64H448c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V416c0-35.3 28.7-64 64-64z"],
-  drag: ["0 0 320 512", "M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 176l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 0L88 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40L40 128C17.9 128 0 110.1 0 88L0 40C0 17.9 17.9 0 40 0zM232 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"],
-  star: ["0 0 576 512", "M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0z"],
-  heart: ["0 0 512 512", "M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"],
-  tag: ["0 0 448 512", "M0 80V229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"],
-  folder: ["0 0 512 512", "M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"],
-  "folder-open": ["0 0 576 512", "M88.7 223.8L0 375.8V96C0 60.7 28.7 32 64 32H181.5c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7H416c35.3 0 64 28.7 64 64v32H144c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224H544c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480H32c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z"],
-  file: ["0 0 384 512", "M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128z"],
-  copy: ["0 0 448 512", "M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"],
-  square: ["0 0 448 512", "M384 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H384zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"],
-  code: ["0 0 640 512", "M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"],
-  book: ["0 0 448 512", "M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"]
+  // <lucide-glyphs>
+  "arrow-up-wide-short": outline("M3 8l4-4 4 4M7 4v16M11 12h10M11 16h7M11 20h4"),
+  // arrow-up-wide-narrow
+  "arrow-down-wide-short": outline("M3 16l4 4 4-4M7 20V4M11 4h10M11 8h7M11 12h4"),
+  // arrow-down-wide-narrow
+  "chevron-down": outline("M6 9l6 6 6-6"),
+  "chevron-up": outline("M18 15l-6-6-6 6"),
+  "chevron-left": outline("M15 18l-6-6 6-6"),
+  "chevron-right": outline("M9 18l6-6-6-6"),
+  check: outline("M20 6 9 17l-5-5"),
+  x: outline("M18 6 6 18M6 6l12 12"),
+  plus: outline("M5 12h14M12 5v14"),
+  minus: outline("M5 12h14"),
+  search: outline("M21 21l-4.34-4.34M3 11a8 8 0 1 0 16 0a8 8 0 1 0-16 0z"),
+  calendar: outline("M8 2v3M16 2v3M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-14a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2zM3 9h18"),
+  clock: outline("M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0zM12 6v6l4 2"),
+  trash: outline("M10 11v6M14 11v6M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"),
+  gear: outline("M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915M9 12a3 3 0 1 0 6 0a3 3 0 1 0-6 0z"),
+  // settings
+  eye: outline("M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0M9 12a3 3 0 1 0 6 0a3 3 0 1 0-6 0z"),
+  lock: outline("M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-14a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2zM7 11V7a5 5 0 0 1 10 0v4"),
+  reload: outline("M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8M21 3v5h-5"),
+  // rotate-cw
+  list: outline("M3 5h.01M3 12h.01M3 19h.01M8 5h13M8 12h13M8 19h13"),
+  filter: outline("M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"),
+  // funnel
+  dots: outline("M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0zM18 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0zM4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0z"),
+  // ellipsis
+  info: outline("M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0zM12 16v-4M12 8h.01"),
+  warning: outline("M21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01"),
+  // triangle-alert
+  error: outline("M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0zM12 8V12M12 16H12.01"),
+  // circle-alert
+  success: outline("M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0zM16 9l-5.5 5.5L8 12"),
+  // circle-check
+  upload: outline("M12 3v12M17 8l-5-5-5 5M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"),
+  drag: outline("M8 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0zM8 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0zM8 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0zM14 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0zM14 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0zM14 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0z"),
+  // grip-vertical
+  star: outline("M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"),
+  heart: outline("M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"),
+  tag: outline("M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42zM7 7.5a.5 .5 0 1 0 1 0a.5 .5 0 1 0-1 0z"),
+  folder: outline("M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"),
+  "folder-open": outline("M6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"),
+  file: outline("M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2zM14 2v5a1 1 0 0 0 1 1h5"),
+  copy: outline("M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2zM4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"),
+  square: outline("M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-14a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2z"),
+  code: outline("M18 16l4-4-4-4M6 8l-4 4 4 4M14.5 4l-5 16"),
+  // code-xml
+  book: outline("M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20")
+  // </lucide-glyphs>
 });
 var aliases = Object.freeze({
   settings: "gear",
@@ -2157,8 +2631,8 @@ async function loadFontAwesome(options) {
   await loadFontAwesomeKit(kit);
   return activate ? useFontAwesome() : getIconConfig();
 }
-function icon(name, options = {}) {
-  const spec = parseIconSpec(name);
+function icon(name2, options = {}) {
+  const spec = parseIconSpec(name2);
   if (spec.classes) return faIcon(spec.classes, options);
   const resolved = aliases[spec.name] ?? spec.name;
   if (spec.provider === "builtin") return builtinIcon(resolved, options);
@@ -2178,24 +2652,60 @@ function icon(name, options = {}) {
   }
   return builtinIcon(resolved, options);
 }
-function builtinIcon(name, options) {
-  const entry = extraGlyphs[name] ?? icons[name];
-  if (!entry) throw new RangeError(`Unknown icon: ${name}`);
-  const [viewBox, pathData] = entry;
+function builtinIcon(name2, options) {
+  const entry = extraGlyphs[name2] ?? icons[name2];
+  if (!entry) {
+    if (options.strict) throw new RangeError(`Unknown icon: ${name2}`);
+    warnMissingIcon(name2);
+    return missingIcon(name2, options);
+  }
+  const [viewBox, pathData, paint = "fill"] = entry;
+  const svg = iconSvg(viewBox, paint, options);
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", pathData);
+  svg.append(path);
+  return svg;
+}
+function iconSvg(viewBox, paint, 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));
   svg.setAttribute("height", String(size));
-  svg.setAttribute("fill", "currentColor");
+  if (paint === "stroke") {
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", strokeWidth(viewBox, size));
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+  } else {
+    svg.setAttribute("fill", "currentColor");
+  }
   svg.setAttribute("focusable", "false");
   applyLabel(svg, options.label ?? null);
-  path.setAttribute("d", pathData);
-  svg.append(path);
   return svg;
 }
+function strokeWidth(viewBox, size) {
+  const [, , width, height] = viewBox.trim().split(/[\s,]+/).map(Number);
+  const extent = Math.max(width, height) || 24;
+  let units = STROKE_WIDTH * extent / 24;
+  const pixels = typeof size === "number" ? size : /^\d*\.?\d+(px)?$/.test(String(size).trim()) ? parseFloat(String(size)) : NaN;
+  if (pixels > 0) units = Math.max(units, MIN_STROKE_PX * extent / pixels);
+  return String(Math.round(units * 1e3) / 1e3);
+}
+var PLACEHOLDER_VIEW_BOX = VIEW_BOX;
+function missingIcon(name2, options) {
+  const svg = iconSvg(PLACEHOLDER_VIEW_BOX, "stroke", options);
+  svg.setAttribute("data-zx-icon-missing", name2);
+  return svg;
+}
+var warnedMissing = /* @__PURE__ */ new Set();
+function warnMissingIcon(name2) {
+  if (warnedMissing.has(name2)) return;
+  warnedMissing.add(name2);
+  console.warn(`[zx.icon] Unknown icon "${name2}" \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");
@@ -2239,15 +2749,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) {
@@ -2256,7 +2766,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 })));
@@ -2403,7 +2913,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" }, ":"),
@@ -2411,7 +2921,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" }
         })
       ),
@@ -2469,7 +2979,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();
@@ -2504,6 +3014,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 = [];
@@ -2590,7 +3110,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",
@@ -2603,7 +3123,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(
@@ -2620,14 +3140,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" })
@@ -2638,7 +3158,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" })
@@ -2703,8 +3223,8 @@ var DatePicker = class extends Component {
    */
   focus() {
     this._closeQuickPick();
-    const button = this._buttonForDate(this._focused);
-    button?.focus();
+    const button2 = this._buttonForDate(this._focused);
+    button2?.focus();
     return this;
   }
   /** Cleans up an appended time picker and generated host content. @returns {void} */
@@ -2736,7 +3256,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);
@@ -2756,7 +3276,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);
@@ -2765,14 +3288,14 @@ 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) {
         const date = addDays(rowStart, column);
         const selected = Boolean(this._value && isSameDay(date, this._value));
         const unavailable = !this._inRange(date);
-        const button = h("button", {
+        const button2 = h("button", {
           class: "zx-date-picker__day",
           type: "button",
           role: "gridcell",
@@ -2786,7 +3309,7 @@ var DatePicker = class extends Component {
             otherMonth: date.getMonth() === this._viewMonth ? null : "true"
           }
         }, formatDate(date, "%e"));
-        row.append(h("td", { role: "presentation" }, button));
+        row.append(h("td", { role: "presentation" }, button2));
       }
       rows.push(row);
     }
@@ -2795,16 +3318,16 @@ var DatePicker = class extends Component {
   }
   /** @param {Event} event @returns {void} */
   _onDayClick(event) {
-    const button = event.target?.closest?.("[data-date]");
-    if (!button || !this.refs.days.contains(button)) return;
-    const date = parseDate(button.dataset.date, "%Y-%m-%d");
+    const button2 = event.target?.closest?.("[data-date]");
+    if (!button2 || !this.refs.days.contains(button2)) return;
+    const date = parseDate(button2.dataset.date, "%Y-%m-%d");
     if (date && this._inRange(date)) this._selectDate(date);
   }
   /** @param {KeyboardEvent} event @returns {void} */
   _onDayKeydown(event) {
-    const button = event.target?.closest?.("[data-date]");
-    if (!button || !this.refs.days.contains(button)) return;
-    const current = parseDate(button.dataset.date, "%Y-%m-%d");
+    const button2 = event.target?.closest?.("[data-date]");
+    if (!button2 || !this.refs.days.contains(button2)) return;
+    const current = parseDate(button2.dataset.date, "%Y-%m-%d");
     if (!current) return;
     let next = null;
     if (event.key === "ArrowLeft") next = addDays(current, -1);
@@ -2915,15 +3438,15 @@ var DatePicker = class extends Component {
   }
   /** @param {Event} event @returns {void} */
   _onQuickClick(event) {
-    const button = event.target?.closest?.("[data-month]");
-    if (!button || !this.refs.quickGrid.contains(button)) return;
-    this._chooseQuickMonth(Number(button.dataset.month));
+    const button2 = event.target?.closest?.("[data-month]");
+    if (!button2 || !this.refs.quickGrid.contains(button2)) return;
+    this._chooseQuickMonth(Number(button2.dataset.month));
   }
   /** @param {KeyboardEvent} event @returns {void} */
   _onQuickKeydown(event) {
-    const button = event.target?.closest?.("[data-month]");
-    if (!button || !this.refs.quickGrid.contains(button)) return;
-    const month = Number(button.dataset.month);
+    const button2 = event.target?.closest?.("[data-month]");
+    if (!button2 || !this.refs.quickGrid.contains(button2)) return;
+    const month = Number(button2.dataset.month);
     let next = null;
     if (event.key === "ArrowLeft") next = month - 1;
     else if (event.key === "ArrowRight") next = month + 1;
@@ -2970,6 +3493,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;
@@ -3031,21 +3565,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;
@@ -3124,15 +3658,15 @@ var MonthPicker = class extends DatePicker {
   }
   /** @param {Event} event @returns {void} */
   _onMonthClick(event) {
-    const button = event.target?.closest?.("[data-month]");
-    if (!button || !this.refs.grid.contains(button)) return;
-    this._selectMonth(Number(button.dataset.month));
+    const button2 = event.target?.closest?.("[data-month]");
+    if (!button2 || !this.refs.grid.contains(button2)) return;
+    this._selectMonth(Number(button2.dataset.month));
   }
   /** @param {KeyboardEvent} event @returns {void} */
   _onMonthKeydown(event) {
-    const button = event.target?.closest?.("[data-month]");
-    if (!button || !this.refs.grid.contains(button)) return;
-    const current = Number(button.dataset.month);
+    const button2 = event.target?.closest?.("[data-month]");
+    if (!button2 || !this.refs.grid.contains(button2)) return;
+    const current = Number(button2.dataset.month);
     let delta = null;
     if (event.key === "ArrowLeft") delta = -1;
     else if (event.key === "ArrowRight") delta = 1;
@@ -3201,7 +3735,7 @@ function registerDatePickerFieldAdapters() {
     let disabled = false;
     const syncDisabled = () => {
       picker.el.setAttribute("aria-disabled", String(disabled));
-      for (const button of picker.el.querySelectorAll("button")) button.disabled = disabled;
+      for (const button2 of picker.el.querySelectorAll("button")) button2.disabled = disabled;
     };
     field.listen(picker.el, "change", (event) => event.stopImmediatePropagation());
     picker.on("change", (event) => field.emit("change", { value: event.detail.date }));
@@ -3399,9 +3933,9 @@ function hidePopover(element) {
   } catch {
   }
 }
-function restoreAttribute(element, name, value) {
-  if (value === null) element.removeAttribute(name);
-  else element.setAttribute(name, value);
+function restoreAttribute(element, name2, value) {
+  if (value === null) element.removeAttribute(name2);
+  else element.setAttribute(name2, value);
 }
 
 // src/components/date-picker/date-range-picker.js
@@ -3784,12 +4318,12 @@ var DateRangePicker = class extends Component {
   /* ---------------------------------------------------------------------- events -- */
   /** @param {Event} event @returns {void} */
   _onPresetClick(event) {
-    const button = (
+    const button2 = (
       /** @type {Element} */
       event.target?.closest?.("[data-preset]")
     );
-    if (!button || this._disabled) return;
-    const preset = this._presets.find((entry) => entry.name === button.dataset.preset);
+    if (!button2 || this._disabled) return;
+    const preset = this._presets.find((entry) => entry.name === button2.dataset.preset);
     if (!preset) return;
     const range = preset.range();
     this.set({ start: range?.start ?? null, end: range?.end ?? null }, { silent: true });
@@ -3892,15 +4426,15 @@ var DateRangePicker = class extends Component {
         const date = addDays(rowStart, column);
         const cell = h("td", { role: "presentation" });
         if (date.getMonth() === first.getMonth() && date.getFullYear() === first.getFullYear()) {
-          const button = h("button", {
+          const button2 = h("button", {
             class: "zx-date-range-picker__day",
             type: "button",
             role: "gridcell",
             tabindex: -1,
             dataset: { date: formatDate(date, "%Y-%m-%d") }
           }, formatDate(date, "%e"));
-          cell.append(button);
-          this._dayCells.push({ date, cell, button });
+          cell.append(button2);
+          this._dayCells.push({ date, cell, button: button2 });
         }
         row.append(cell);
       }
@@ -3971,17 +4505,17 @@ var DateRangePicker = class extends Component {
     }
     if (!roving) roving = this._dayCells[0] ?? null;
     for (const entry of this._dayCells) {
-      const { date, cell, button } = entry;
+      const { date, cell, button: button2 } = entry;
       const state = this._dayState(date);
       setDataset(cell, "range", state.range);
       setDataset(cell, "rangeEdge", state.edge);
-      setDataset(button, "range", state.range);
-      button.tabIndex = entry === roving ? 0 : -1;
-      button.setAttribute("aria-selected", String(state.range !== null && state.range !== "preview"));
-      button.setAttribute("aria-disabled", String(!this._selectable(date)));
-      button.setAttribute("aria-label", this._dayLabel(date, state.range));
-      if (isSameDay(date, today2)) button.setAttribute("aria-current", "date");
-      else button.removeAttribute("aria-current");
+      setDataset(button2, "range", state.range);
+      button2.tabIndex = entry === roving ? 0 : -1;
+      button2.setAttribute("aria-selected", String(state.range !== null && state.range !== "preview"));
+      button2.setAttribute("aria-disabled", String(!this._selectable(date)));
+      button2.setAttribute("aria-label", this._dayLabel(date, state.range));
+      if (isSameDay(date, today2)) button2.setAttribute("aria-current", "date");
+      else button2.removeAttribute("aria-current");
     }
   }
   /**
@@ -4032,7 +4566,7 @@ var DateRangePicker = class extends Component {
   /** @returns {void} */
   _syncDisabled() {
     this.el.setAttribute("aria-disabled", String(this._disabled));
-    for (const button of this.el.querySelectorAll("button")) button.disabled = this._disabled;
+    for (const button2 of this.el.querySelectorAll("button")) button2.disabled = this._disabled;
   }
   /** Writes the current selection into the visually hidden live region. @returns {void} */
   _announce() {
@@ -4055,9 +4589,9 @@ var DateRangePicker = class extends Component {
   }
   /** @param {Element|null} target @returns {{date: Date, cell: Element, button: Element}|null} */
   _cellFor(target) {
-    const button = target?.closest?.("[data-date]");
-    if (!button) return null;
-    return this._dayCells.find((cell) => cell.button === button) ?? null;
+    const button2 = target?.closest?.("[data-date]");
+    if (!button2) return null;
+    return this._dayCells.find((cell) => cell.button === button2) ?? null;
   }
   /** @param {Date} date @returns {HTMLButtonElement|null} */
   _buttonForDate(date) {
@@ -4195,17 +4729,17 @@ function isoWeekNumber2(date) {
   const yearStart = new Date(Date.UTC(utc.getUTCFullYear(), 0, 1));
   return Math.ceil(((utc.getTime() - yearStart.getTime()) / DAY_MS + 1) / 7);
 }
-function setDataset(element, name, value) {
-  if (value === null || value === void 0) delete element.dataset[name];
-  else element.dataset[name] = value;
+function setDataset(element, name2, value) {
+  if (value === null || value === void 0) delete element.dataset[name2];
+  else element.dataset[name2] = value;
 }
 function rememberAttributes2(element, names) {
-  return new Map(names.map((name) => [name, element.getAttribute(name)]));
+  return new Map(names.map((name2) => [name2, element.getAttribute(name2)]));
 }
 function restoreAttributes2(element, attributes) {
-  for (const [name, value] of attributes) {
-    if (value === null) element.removeAttribute(name);
-    else element.setAttribute(name, value);
+  for (const [name2, value] of attributes) {
+    if (value === null) element.removeAttribute(name2);
+    else element.setAttribute(name2, value);
   }
 }
 
@@ -4274,6 +4808,8 @@ var DateRangeBox = class 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 ?? " \u2013 ");
     this._disabled = Boolean(this.options.disabled);
@@ -4466,6 +5002,7 @@ var DateRangeBox = class extends Component {
     this._content?.remove();
     restoreAttribute2(this.el, "data-state", this._originalState);
     restoreAttribute2(this.el, "aria-disabled", this._originalAriaDisabled);
+    restoreAttribute2(this.el, "data-clearable", this._originalClearable);
     super.destroy();
   }
   /* --------------------------------------------------------------------- internals -- */
@@ -4562,7 +5099,11 @@ var DateRangeBox = class 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} */
   _syncDisabled() {
@@ -4570,6 +5111,7 @@ var DateRangeBox = class 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();
   }
@@ -4579,7 +5121,7 @@ var DateRangeBox = class extends Component {
     this.refs.input.removeAttribute("aria-invalid");
   }
   /** @param {boolean} returnFocus @returns {void} */
-  _close(returnFocus) {
+  _close(returnFocus2) {
     if (!this._open) return;
     this._position?.destroy();
     this._position = null;
@@ -4587,7 +5129,7 @@ var DateRangeBox = class extends Component {
     this.refs.popover.dataset.state = "closed";
     this.refs.input.setAttribute("aria-expanded", "false");
     this.refs.toggle.setAttribute("aria-expanded", "false");
-    if (returnFocus) this.focus();
+    if (returnFocus2) this.focus();
     this.emit("close");
   }
 };
@@ -4595,9 +5137,9 @@ function text2(key, fallback, args) {
   const translated = translate(key);
   return printf(translated === key ? fallback : translated, args);
 }
-function restoreAttribute2(element, name, value) {
-  if (value === null) element.removeAttribute(name);
-  else element.setAttribute(name, value);
+function restoreAttribute2(element, name2, value) {
+  if (value === null) element.removeAttribute(name2);
+  else element.setAttribute(name2, value);
 }
 
 // src/components/date-picker/range-field-adapter.js
@@ -4646,6 +5188,8 @@ var Datebox = class 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;
@@ -4815,6 +5359,8 @@ var Datebox = class 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();
   }
   /** @param {KeyboardEvent} event @returns {void} */
@@ -4859,7 +5405,11 @@ var Datebox = class 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} */
   _syncDisabled() {
@@ -4867,6 +5417,7 @@ var Datebox = class 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} */
   _setValid() {
@@ -4877,7 +5428,7 @@ var Datebox = class extends Component {
     this.refs.input.removeAttribute("aria-invalid");
   }
   /** @param {boolean} returnFocus @returns {void} */
-  _close(returnFocus) {
+  _close(returnFocus2) {
     if (!this._open) return;
     this._position?.destroy();
     this._position = null;
@@ -4885,7 +5436,7 @@ var Datebox = class extends Component {
     this.refs.popover.dataset.state = "closed";
     this.refs.input.setAttribute("aria-expanded", "false");
     this.refs.toggle.setAttribute("aria-expanded", "false");
-    if (returnFocus) this.focus();
+    if (returnFocus2) this.focus();
     this.emit("close");
   }
   /** @returns {Date|null} */
@@ -5187,7 +5738,7 @@ var FieldUpload = class extends Component {
       const xhr = new XMLHttpRequest();
       this._xhr = xhr;
       xhr.open("POST", String(this.options.url));
-      for (const [name, value] of Object.entries(this.options.headers ?? {})) xhr.setRequestHeader(name, String(value));
+      for (const [name2, value] of Object.entries(this.options.headers ?? {})) xhr.setRequestHeader(name2, String(value));
       this.listen(xhr.upload, "progress", (event) => {
         if (event.lengthComputable) this._setProgress(event.loaded / event.total * 100);
       });
@@ -5286,18 +5837,18 @@ function matchesAccept(file, accept) {
 function createFormData(files, paramName, params) {
   const form = new FormData();
   for (const file of files) form.append(paramName, file);
-  for (const [name, value] of Object.entries(params ?? {})) appendFormValue(form, name, value);
+  for (const [name2, value] of Object.entries(params ?? {})) appendFormValue(form, name2, value);
   return form;
 }
-function appendFormValue(form, name, value) {
+function appendFormValue(form, name2, value) {
   if (value == null) return;
   if (Array.isArray(value)) {
-    for (const item of value) appendFormValue(form, name, item);
+    for (const item of value) appendFormValue(form, name2, item);
     return;
   }
   const isBlob = typeof Blob === "function" && value instanceof Blob;
-  if (isBlob) form.append(name, value);
-  else form.append(name, typeof value === "object" ? JSON.stringify(value) : String(value));
+  if (isBlob) form.append(name2, value);
+  else form.append(name2, typeof value === "object" ? JSON.stringify(value) : String(value));
 }
 function parseResponse(text3) {
   if (!text3) return null;
@@ -5478,11 +6029,11 @@ var MultiValueEditor = class extends Component {
   }
   /** @param {MouseEvent} event @returns {void} */
   _handleClick(event) {
-    const button = event.target instanceof Element ? event.target.closest("[data-action]") : null;
-    if (!button || !this.el.contains(button)) return;
-    if (button.getAttribute("aria-disabled") === "true") return;
-    const action = button.dataset.action;
-    const index = Number(button.dataset.index);
+    const button2 = event.target instanceof Element ? event.target.closest("[data-action]") : null;
+    if (!button2 || !this.el.contains(button2)) return;
+    if (button2.getAttribute("aria-disabled") === "true") return;
+    const action = button2.dataset.action;
+    const index = Number(button2.dataset.index);
     if (action === "add") {
       const choices = normalizeOptions2(this.options.options);
       this._values.push(this.options.options === null ? "" : choices[0]?.[0] ?? "");
@@ -5969,6 +6520,7 @@ var NumberField = class extends Component {
   /** @param {KeyboardEvent} event @returns {void} */
   _onKeydown(event) {
     if (this._disabled || this._readonly) return;
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
     const large = Math.max(1, Math.trunc(Number(this.options.largeStep) || 1));
     const actions = {
       ArrowUp: () => this._stepBy(1),
@@ -6122,6 +6674,7 @@ function registerNumberFieldAdapter() {
       label: options.label ? String(options.label) : void 0,
       placeholder: options.placeholder,
       required: options.required,
+      name: field.name || null,
       ...options.props ?? {}
     }));
     let setting = false;
@@ -6316,7 +6869,7 @@ var Rating = class extends Component {
    * @returns {HTMLButtonElement}
    */
   _radio(value, part) {
-    const button = (
+    const button2 = (
       /** @type {HTMLButtonElement} */
       h("button", {
         class: "zx-rating__radio",
@@ -6328,18 +6881,18 @@ var Rating = class extends Component {
         dataset: { value: String(value), part }
       })
     );
-    this.listen(button, "click", (event) => {
+    this.listen(button2, "click", (event) => {
       this._choose(
         value,
         /** @type {MouseEvent} */
         event.detail > 0
       );
     });
-    this.listen(button, "pointerenter", () => this._setPreview(value));
-    this.listen(button, "focus", () => this._setPreview(value));
-    this.listen(button, "blur", () => this._setPreview(null));
-    this._radios.push(button);
-    return button;
+    this.listen(button2, "pointerenter", () => this._setPreview(value));
+    this.listen(button2, "focus", () => this._setPreview(value));
+    this.listen(button2, "blur", () => this._setPreview(null));
+    this._radios.push(button2);
+    return button2;
   }
   /**
    * @param {number} value Step value.
@@ -6556,15 +7109,36 @@ function itemText(item) {
   return String(item ?? "").trim().toLocaleLowerCase();
 }
 
-// src/components/select/select.js
-var PRIORITY_KEYS = [
-  "priority.lowest",
-  "priority.low",
-  "priority.normal",
-  "priority.high",
-  "priority.highest"
-];
-var PRIORITY_FALLBACKS = ["Lowest", "Low", "Medium", "High", "Highest"];
+// src/components/select/color.js
+var TOKEN_REFERENCE = /^var\(\s*--[\w-]+\s*\)$/;
+function itemColor(value) {
+  if (typeof value !== "string") return null;
+  const text3 = value.trim();
+  if (TOKEN_REFERENCE.test(text3)) return text3;
+  return isCssColor(text3) ? text3 : null;
+}
+
+// src/components/select/glyphs.js
+var STATUS_INDICATORS = Object.freeze([
+  "dotted",
+  "ring",
+  "progress",
+  "review",
+  "ready",
+  "waiting",
+  "done",
+  "canceled",
+  "duplicate"
+]);
+var STATUS_TONES = Object.freeze([
+  "muted",
+  "neutral",
+  "warning",
+  "info",
+  "accent",
+  "success",
+  "danger"
+]);
 var DEFAULT_STATUSES = Object.freeze([
   ["backlog", "status.backlog", "Backlog", "dotted", "muted"],
   ["todo", "status.todo", "Todo", "ring", "neutral"],
@@ -6576,6 +7150,79 @@ var DEFAULT_STATUSES = Object.freeze([
   ["canceled", "status.canceled", "Canceled", "canceled", "muted"],
   ["duplicate", "status.duplicate", "Duplicate", "duplicate", "muted"]
 ]);
+var STATUS_ALIASES = Object.freeze({ review: "in-review", cancelled: "canceled" });
+var PRIORITY_URGENT = 4;
+function resolveStatusGlyph(status, options = {}) {
+  const item = status && typeof status === "object" ? status : null;
+  const id = normalizeStatusId(item ? item.ID ?? item.id : status);
+  const preset = DEFAULT_STATUSES.find(([key]) => key === id);
+  const indicator = String(options.indicator ?? item?.indicator ?? preset?.[3] ?? "ring");
+  const tone = String(options.tone ?? item?.tone ?? preset?.[4] ?? "muted");
+  return {
+    indicator: (
+      /** @type {StatusIndicator} */
+      STATUS_INDICATORS.includes(indicator) ? indicator : "ring"
+    ),
+    tone: (
+      /** @type {StatusTone} */
+      STATUS_TONES.includes(tone) ? tone : "muted"
+    )
+  };
+}
+function normalizeStatusId(id) {
+  const key = String(id ?? "").trim().toLowerCase();
+  return STATUS_ALIASES[key] ?? key;
+}
+function normalizePriorityLevel(level) {
+  if (level === null || level === void 0 || level === "") return null;
+  return Math.max(0, Math.min(PRIORITY_URGENT, Math.trunc(Number(level) || 0)));
+}
+function statusIcon(status, options = {}) {
+  const { indicator, tone } = resolveStatusGlyph(status, options ?? {});
+  const marker = (
+    /** @type {HTMLSpanElement} */
+    h("span", {
+      class: "zx-status-icon",
+      dataset: { indicator, tone }
+    })
+  );
+  if (indicator === "done") marker.append(icon("check", { size: 8 }));
+  if (indicator === "canceled") marker.append(icon("x", { size: 7 }));
+  return name(marker, options?.label);
+}
+function priorityIcon(level, options = {}) {
+  const normalized = normalizePriorityLevel(level);
+  const glyph = (
+    /** @type {HTMLSpanElement} */
+    h("span", {
+      class: "zx-priority-icon",
+      dataset: { level: normalized === null ? "none" : normalized }
+    }, normalized === PRIORITY_URGENT ? null : Array.from({ length: PRIORITY_URGENT }, (_, index) => h("span", {
+      dataset: { filled: String(normalized !== null && index <= normalized) }
+    })))
+  );
+  return name(glyph, options?.label);
+}
+function name(glyph, label) {
+  const text3 = label == null ? "" : String(label).trim();
+  if (text3) {
+    glyph.setAttribute("role", "img");
+    glyph.setAttribute("aria-label", text3);
+  } else {
+    glyph.setAttribute("aria-hidden", "true");
+  }
+  return glyph;
+}
+
+// src/components/select/select.js
+var PRIORITY_KEYS = [
+  "priority.lowest",
+  "priority.low",
+  "priority.normal",
+  "priority.high",
+  "priority.highest"
+];
+var PRIORITY_FALLBACKS = ["Lowest", "Low", "Medium", "High", "Highest"];
 var Select = class _Select extends Component {
   static cssName = "select";
   /** @type {SelectOptions} */
@@ -6594,6 +7241,7 @@ var Select = class _Select extends Component {
     value: null,
     disabled: false,
     placeholder: "",
+    label: "",
     clearable: false,
     filter: false,
     searchKeys: null,
@@ -6621,6 +7269,7 @@ var Select = class _Select extends Component {
     this._createdRoot = false;
     this._root = null;
     this._snapshot = null;
+    this._pointerModality = false;
     this._createdRoot = this.el === null;
     const root = (
       /** @type {HTMLElement} */
@@ -6635,6 +7284,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",
@@ -6708,10 +7358,29 @@ var Select = class _Select extends Component {
     );
     this.listen(input, "click", () => this.open());
     this.listen(input, "input", () => this._onInput());
-    this.listen(input, "keydown", (event) => this._onKeydown(
-      /** @type {KeyboardEvent} */
-      event
-    ));
+    this.listen(input, "keydown", (event) => {
+      if (!isModifierKey(
+        /** @type {KeyboardEvent} */
+        event
+      )) root.removeAttribute("data-focus-origin");
+      this._onKeydown(
+        /** @type {KeyboardEvent} */
+        event
+      );
+    });
+    this.listen(input, "focus", () => {
+      if (this._pointerModality && /** @type {HTMLInputElement} */
+      input.readOnly) {
+        root.setAttribute("data-focus-origin", "pointer");
+      } else root.removeAttribute("data-focus-origin");
+    });
+    this.listen(input, "blur", () => root.removeAttribute("data-focus-origin"));
+    this.listen(document, "keydown", (event) => {
+      if (!isModifierKey(
+        /** @type {KeyboardEvent} */
+        event
+      )) this._pointerModality = false;
+    }, { capture: true });
     this.listen(toggle, "click", () => {
       this.focus();
       if (this._open) this.close();
@@ -6724,6 +7393,7 @@ var Select = class _Select extends Component {
     this.listen(panel, "pointerdown", (event) => event.preventDefault());
     this.listen(panel, "click", (event) => this._onOptionClick(event));
     this.listen(document, "pointerdown", (event) => {
+      this._pointerModality = true;
       if (this._open && !root.contains(
         /** @type {Node} */
         event.target
@@ -6874,29 +7544,43 @@ var Select = class _Select extends Component {
     return this;
   }
   /**
-   * Creates the five-level priority preset.
+   * Creates the five-level priority preset: values 0 (lowest) to 4 (highest), each drawn as grey
+   * signal bars filled to its level, except the highest, which is the one coloured level — a
+   * danger square with an exclamation mark. A "No priority" row (value null, a row of dashes)
+   * heads the list and labels the empty control; `clearable: false` removes it.
    * @param {Element|string|null} target Component target.
-   * @param {SelectOptions} [options={}] Select overrides other than fixed items and renderer.
+   * @param {SelectOptions} [options={}] Select overrides other than items and renderers.
+   *   `clearable` defaults to true here; `noneLabel` and `placeholder` default to the
+   *   `priority.none` message ("No priority").
    * @returns {Select}
    */
   static priority(target, options = {}) {
     const requestedValue = options.value ?? null;
-    const select = new _Select(target, {
+    const clearable = options.clearable ?? true;
+    let select = null;
+    const noneLabel = () => options.noneLabel ?? (select ? select._message("priority.none", "No priority") : "No priority");
+    select = new _Select(target, {
       ...options,
+      clearable,
       value: null,
       items: [],
       renderItem(item) {
         return priorityContent(item, true);
       },
+      renderNone: options.renderNone ?? (() => priorityContent({ level: null, name: noneLabel() }, true)),
       renderValueAdornment(item) {
         return priorityIndicator(item.level);
       }
     });
+    if (clearable && !options.placeholder) {
+      select.refs.input.placeholder = noneLabel();
+    }
+    const preset = select;
     select.setItems(PRIORITY_KEYS.map((key, level) => {
-      let name = level === 2 ? select.msg("priority.medium") : key;
-      if (name === "priority.medium") name = select._message(key, PRIORITY_FALLBACKS[level]);
-      else if (level !== 2) name = select._message(key, PRIORITY_FALLBACKS[level]);
-      return { ID: level, name, level };
+      let name2 = level === 2 ? preset.msg("priority.medium") : key;
+      if (name2 === "priority.medium") name2 = preset._message(key, PRIORITY_FALLBACKS[level]);
+      else if (level !== 2) name2 = preset._message(key, PRIORITY_FALLBACKS[level]);
+      return { ID: level, name: name2, level };
     }));
     select.set(requestedValue, { silent: true });
     return select;
@@ -6957,10 +7641,10 @@ var Select = class _Select extends Component {
       const value = readSelectItem(item, iconKey);
       if (value && typeof value === "object" && typeof value.nodeType === "number") return value.cloneNode(true);
       if (typeof value !== "string" || !value) return null;
-      const color = readSelectItem(item, colorKey);
+      const color = itemColor(readSelectItem(item, colorKey));
       return h("span", {
         class: "zx-select__entity-glyph",
-        style: isCssColor(color) ? { "--zx-select-entity-color": String(color) } : null,
+        style: color ? { "--zx-select-entity-color": color } : null,
         ariaHidden: "true"
       }, icon(value, { size: 14 }));
     };
@@ -7492,24 +8176,20 @@ function priorityContent(item, label) {
   );
 }
 function priorityIndicator(level) {
-  const normalized = Math.max(0, Math.min(4, Math.trunc(Number(level) || 0)));
-  return h("span", {
-    class: "zx-select__priority-icon",
-    dataset: { level: normalized },
-    ariaHidden: "true"
-  }, Array.from({ length: 5 }, (_, index) => h("span", {
-    dataset: { filled: String(index <= normalized) }
-  })));
+  const glyph = priorityIcon(
+    /** @type {number|null} */
+    normalizePriorityLevel(level)
+  );
+  glyph.classList.add("zx-select__priority-icon");
+  return glyph;
 }
 function normalizeStatusItem(input) {
   if (!input || typeof input !== "object" || input.ID == null || input.name == null) return null;
-  const indicators = ["dotted", "ring", "progress", "review", "ready", "waiting", "done", "canceled", "duplicate"];
-  const tones = ["muted", "neutral", "warning", "info", "accent", "success", "danger"];
   return {
     ...input,
     name: String(input.name),
-    indicator: indicators.includes(String(input.indicator)) ? String(input.indicator) : "ring",
-    tone: tones.includes(String(input.tone)) ? String(input.tone) : "muted",
+    indicator: STATUS_INDICATORS.includes(String(input.indicator)) ? String(input.indicator) : "ring",
+    tone: STATUS_TONES.includes(String(input.tone)) ? String(input.tone) : "muted",
     description: input.description == null ? "" : String(input.description),
     shortcut: input.shortcut == null ? "" : String(input.shortcut)
   };
@@ -7529,21 +8209,18 @@ function statusContent(item) {
   );
 }
 function statusIndicator(item) {
-  const indicator = String(item.indicator ?? "ring");
-  const marker = h("span", {
-    class: "zx-select__status-indicator",
-    dataset: { indicator, tone: String(item.tone ?? "muted") },
-    ariaHidden: "true"
-  });
-  if (indicator === "done") marker.append(icon("check", { size: 8 }));
-  if (indicator === "canceled") marker.append(icon("x", { size: 7 }));
-  return marker;
+  const glyph = statusIcon({ indicator: item.indicator ?? "ring", tone: item.tone ?? "muted" });
+  glyph.classList.add("zx-select__status-indicator");
+  return glyph;
 }
 function readItem(item, reader) {
   if (typeof reader === "function") return reader(item);
   if (item === null || typeof item !== "object") return item;
   return item[reader];
 }
+function isModifierKey(event) {
+  return ["Shift", "Control", "Alt", "Meta", "CapsLock"].includes(event.key) || event.ctrlKey || event.metaKey;
+}
 function isPrintable(event) {
   return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
 }
@@ -7553,8 +8230,12 @@ 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;
+    if (preset === "priority" && props.clearable === void 0) selectOptions.clearable = !options.required;
     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());
     select.on("change", (event) => field.emit("change", { value: event.detail.value }));
@@ -7804,7 +8485,7 @@ var Slider = class extends Component {
       const label = typeof mark === "number" ? this._format(value) : String(mark.label ?? this._format(value));
       element.append(h("span", {
         class: "zx-slider__mark",
-        style: { "--zx-slider-mark": `${this._ratio(value) * 100}%` }
+        style: { "--zx-slider-mark": String(this._ratio(value)) }
       }, label));
     }
     return element;
@@ -7930,6 +8611,29 @@ function registerSliderFieldAdapter() {
   });
 }
 
+// src/components/badge/badge.js
+var KINDS = Object.freeze(["neutral", "accent", "success", "warning", "danger", "info"]);
+var VARIANTS = Object.freeze(["soft", "solid", "outline"]);
+var BADGE_TONES = Object.freeze(["blue", "teal", "green", "amber", "orange", "red", "pink", "violet", "slate"]);
+var defaults = Object.freeze({
+  label: "",
+  icon: null,
+  kind: "neutral",
+  tone: null,
+  variant: "soft",
+  size: "md",
+  dot: false
+});
+function normalizeBadgeTone(value) {
+  return BADGE_TONES.includes(
+    /** @type {BadgeTone} */
+    value
+  ) ? (
+    /** @type {BadgeTone} */
+    value
+  ) : null;
+}
+
 // src/components/tag-picker/tag-picker.js
 var TagPicker = class extends Component {
   static cssName = "tag-picker";
@@ -7941,6 +8645,7 @@ var TagPicker = class extends Component {
     labelKey: "name",
     iconKey: "icon",
     colorKey: "color",
+    toneKey: "tone",
     searchKeys: null,
     filter: "local",
     minQuery: 0,
@@ -8281,11 +8986,12 @@ var TagPicker = class extends Component {
   _renderTags() {
     const tags = this._selected.map((item) => {
       const label = this._labelOf(item);
-      const color = this._colorOf(item);
+      const tone = this._toneOf(item);
+      const color = tone ? null : this._colorOf(item);
       const content = this.options.renderTag ? this.options.renderTag(item) : [this._iconOf(item), h("span", { class: "zx-tag-picker__tag-label" }, label)];
       const tag = h("span", {
         class: "zx-tag-picker__tag",
-        dataset: { colored: String(Boolean(color)) },
+        dataset: { colored: String(Boolean(color)), tone: tone ?? void 0 },
         style: color ? { "--zx-tag-color": color } : null
       }, content);
       if (!this._readonly && !this._disabled) {
@@ -8654,16 +9360,22 @@ var TagPicker = class extends Component {
       value.cloneNode(true)
     ) : typeof value === "string" && value.trim() ? icon(value, { size: 12 }) : null;
     if (!visual) return null;
+    const tone = this._toneOf(item);
+    const color = tone ? null : this._colorOf(item);
     return h("span", {
       class: "zx-tag-picker__visual",
-      style: this._colorOf(item) ? { "--zx-tag-color": this._colorOf(item) } : null,
+      dataset: { tone: tone ?? void 0 },
+      style: color ? { "--zx-tag-color": color } : null,
       ariaHidden: "true"
     }, visual);
   }
   /** @param {unknown} item @returns {string|null} */
   _colorOf(item) {
-    const value = this._readItem(item, this.options.colorKey);
-    return isCssColor(value) ? value : null;
+    return itemColor(this._readItem(item, this.options.colorKey));
+  }
+  /** @param {unknown} item @returns {string|null} */
+  _toneOf(item) {
+    return normalizeBadgeTone(this._readItem(item, this.options.toneKey));
   }
   /** @param {unknown} item @param {unknown} reader @returns {unknown} */
   _readItem(item, reader) {
@@ -8793,7 +9505,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) {
@@ -8801,7 +9513,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", () => {
@@ -8811,12 +9523,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 });
@@ -8876,7 +9588,7 @@ var Timebox = class extends Component {
     super.destroy();
   }
   /** @param {HTMLElement} parent @param {'hours'|'minutes'|'seconds'} name @param {string} label @param {boolean} bounded @returns {void} */
-  _addSegment(parent, name, label, bounded) {
+  _addSegment(parent, name2, label, bounded) {
     const input = h("input", {
       class: "zx-timebox__segment",
       type: "text",
@@ -8884,13 +9596,13 @@ var Timebox = class extends Component {
       autocomplete: "off",
       ariaLabel: label,
       maxLength: bounded ? 2 : null,
-      dataset: { segment: name, bounded: String(bounded) }
+      dataset: { segment: name2, bounded: String(bounded) }
     });
     this._inputs.push(input);
     parent.append(input);
     this.listen(input, "focus", () => input.select());
     this.listen(input, "input", () => {
-      if (name === "hours" && this.options.signed && input.value.trim().startsWith("-")) {
+      if (name2 === "hours" && this.options.signed && input.value.trim().startsWith("-")) {
         this._parts.negative = true;
       }
       const digits = input.value.replace(/\D/g, "");
@@ -8908,9 +9620,9 @@ var Timebox = class extends Component {
   _readParts() {
     const parts = { ...this._parts };
     for (const input of this._inputs) {
-      const name = input.dataset.segment;
+      const name2 = input.dataset.segment;
       const maximum = input.dataset.bounded === "true" ? 59 : Number.MAX_SAFE_INTEGER;
-      parts[name] = Math.max(0, Math.min(maximum, Math.trunc(finiteNumber2(input.value))));
+      parts[name2] = Math.max(0, Math.min(maximum, Math.trunc(finiteNumber2(input.value))));
     }
     return parts;
   }
@@ -8923,8 +9635,8 @@ var Timebox = class extends Component {
   /** @returns {void} */
   _writeParts() {
     for (const input of this._inputs) {
-      const name = input.dataset.segment;
-      input.value = name === "hours" ? String(this._parts[name]) : pad3(this._parts[name]);
+      const name2 = input.dataset.segment;
+      input.value = name2 === "hours" ? String(this._parts[name2]) : pad3(this._parts[name2]);
     }
     if (this.refs.sign) {
       this.refs.sign.textContent = this._parts.negative ? "-" : "+";
@@ -8942,6 +9654,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);
@@ -9103,7 +9825,7 @@ function snapshot(element) {
 }
 function restore(element, state) {
   for (const attribute of Array.from(element.attributes)) element.removeAttribute(attribute.name);
-  for (const [name, value] of state.attributes) element.setAttribute(name, value);
+  for (const [name2, value] of state.attributes) element.setAttribute(name2, value);
   element.replaceChildren(...state.children);
 }
 
@@ -9154,14 +9876,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", {
@@ -9172,7 +9894,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));
@@ -9221,13 +9946,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;
       }
     }
@@ -9292,7 +10017,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",
@@ -9388,6 +10113,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();
@@ -9432,8 +10168,8 @@ var ORDER = (
 function breakpointOf(width) {
   const value = Number(width);
   if (!Number.isFinite(value)) return "xs";
-  for (const name of ORDER) {
-    if (value >= breakpoints[name]) return name;
+  for (const name2 of ORDER) {
+    if (value >= breakpoints[name2]) return name2;
   }
   return "xs";
 }
@@ -9449,7 +10185,7 @@ function onBreakpoint(handler, options = {}) {
     /** @type {Element} */
     target
   ) : null;
-  let name = (
+  let name2 = (
     /** @type {BreakpointName|null} */
     null
   );
@@ -9461,9 +10197,9 @@ function onBreakpoint(handler, options = {}) {
     const width = measure();
     if (element && width === 0) return;
     const next = breakpointOf(width);
-    if (next === name) return;
-    name = next;
-    handler(name, width);
+    if (next === name2) return;
+    name2 = next;
+    handler(name2, width);
   };
   update();
   let frame = 0;
@@ -9481,7 +10217,7 @@ function onBreakpoint(handler, options = {}) {
     globalThis.addEventListener?.("resize", update, { passive: true });
   }
   return {
-    current: () => name ?? breakpointOf(measure()),
+    current: () => name2 ?? breakpointOf(measure()),
     destroy: () => {
       if (destroyed) return;
       destroyed = true;
@@ -9569,13 +10305,119 @@ function currencyCode(value) {
 }
 
 // src/core/overlay-host.js
-var SCOPE_SELECTOR = ".zx-scope, [data-zx-theme], [data-zx-density], [data-zx-preset]";
+var SCOPE_SELECTOR = ".zx-scope, [data-zx-theme], [data-zx-preset]";
 function overlayHost(source = null) {
   const context = source == null ? document.activeElement instanceof Element ? document.activeElement : null : resolveElement(source);
   const scope2 = context?.closest?.(SCOPE_SELECTOR) ?? null;
   if (!scope2 || scope2 === document.documentElement || scope2 === document.body) return document.body;
   return scope2;
 }
+function connectedOverlayHost(source = null) {
+  if (source == null) return overlayHost(null);
+  const context = resolveElement(source);
+  return context?.isConnected ? overlayHost(context) : null;
+}
+
+// src/components/loading/spinner.js
+var defaults2 = Object.freeze({
+  size: "md",
+  label: "",
+  showLabel: false,
+  kind: "accent"
+});
+var SIZES2 = Object.freeze({ sm: true, md: true, lg: true });
+function spinner(opts = {}) {
+  const options = { ...defaults2, ...opts };
+  const label = String(options.label ?? "");
+  const element = (
+    /** @type {HTMLSpanElement} */
+    h("span", {
+      class: "zx-spinner",
+      dataset: {
+        size: SIZES2[options.size] ? options.size : "md",
+        kind: options.kind === "current" ? "current" : "accent"
+      }
+    }, h("span", { class: "zx-spinner__ring", ariaHidden: "true" }))
+  );
+  if (label) {
+    element.setAttribute("role", "status");
+    element.append(h("span", {
+      class: "zx-spinner__label",
+      dataset: { visible: options.showLabel ? "true" : null }
+    }, label));
+  } else {
+    element.setAttribute("aria-hidden", "true");
+  }
+  return element;
+}
+
+// src/components/button/button.js
+var defaults3 = Object.freeze({
+  label: "",
+  icon: null,
+  kind: "default",
+  size: "md",
+  disabled: false
+});
+function button(opts = {}) {
+  const options = { ...defaults3, ...opts };
+  const element = (
+    /** @type {HTMLButtonElement} */
+    h("button", {
+      class: "zx-btn",
+      type: "button",
+      disabled: Boolean(options.disabled),
+      title: options.title ?? (options.shortcut ? `${options.label} (${options.shortcut.label})` : void 0),
+      ariaKeyshortcuts: options.shortcut?.keys,
+      dataset: {
+        kind: normalizeKind(options.kind),
+        size: normalizeSize(options.size)
+      }
+    })
+  );
+  if (options.icon) {
+    element.append(icon(options.icon, { size: 16 }));
+  }
+  if (options.label !== "") {
+    element.append(h("span", { class: "zx-btn__label" }, String(options.label)));
+  }
+  if (options.shortcut) element.append(h("kbd", { class: "zx-btn__shortcut", ariaHidden: "true" }, options.shortcut.label));
+  if (!options.label && options.title) element.setAttribute("aria-label", options.title);
+  if (typeof options.onclick === "function") element.onclick = options.onclick;
+  if (options.busy) setButtonBusy(element, true);
+  return element;
+}
+function setButtonBusy(element, busy) {
+  if (!element.hasAttribute("data-busy-guard")) {
+    element.setAttribute("data-busy-guard", "");
+    element.addEventListener("click", (event) => {
+      if (element.getAttribute("aria-busy") !== "true") return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }, { capture: true });
+  }
+  element.querySelector(":scope > .zx-btn__spinner")?.remove();
+  if (busy) {
+    element.setAttribute("aria-busy", "true");
+    element.setAttribute("aria-disabled", "true");
+    const ring = spinner({ size: "sm", kind: "current" });
+    ring.classList.add("zx-btn__spinner");
+    element.prepend(ring);
+  } else {
+    element.removeAttribute("aria-busy");
+    element.removeAttribute("aria-disabled");
+  }
+  return element;
+}
+function normalizeKind(value) {
+  return ["primary", "danger", "ghost"].includes(String(value)) ? (
+    /** @type {'primary'|'danger'|'ghost'} */
+    value
+  ) : "default";
+}
+function normalizeSize(value) {
+  return value === "sm" ? "sm" : "md";
+}
 
 // src/components/table/sort.js
 function compareStrings(left, right) {
@@ -9631,7 +10473,10 @@ var Table = class extends Component {
     height: null,
     emptyText: null,
     rowClass: null,
+    rowKind: null,
+    rowKinds: null,
     zebra: true,
+    variant: "default",
     editMode: false,
     editTrigger: "double",
     hierarchy: false,
@@ -9660,6 +10505,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);
@@ -9693,6 +10542,7 @@ var Table = class extends Component {
       }
     }
     this._reconcileExpanded();
+    if (normalizeTableVariant(this.options.variant) === "plain") root.dataset.variant = "plain";
     this._table = h("table", { class: "zx-table__table" });
     if (this._hierarchy) this._table.setAttribute("role", "treegrid");
     this._colgroup = h("colgroup", { class: "zx-table__columns" });
@@ -9976,7 +10826,7 @@ var Table = class extends Component {
       const column = this._columns.find((candidate) => candidate.id === String(id));
       const index = this.getColumnOrder().indexOf(String(id));
       if (column && index >= 0) {
-        this._columnStatus.textContent = `Moved ${column.label} to position ${index + 1} of ${this._columns.length}.`;
+        this._columnStatus.textContent = `Moved ${tableColumnName(column)} to position ${index + 1} of ${this._columns.length}.`;
       }
     }
     return this;
@@ -10035,6 +10885,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 });
@@ -10071,6 +10922,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.
@@ -10079,6 +10934,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}`);
@@ -10130,7 +10992,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) {
@@ -10242,6 +11104,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;
@@ -10530,6 +11393,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" });
@@ -10542,7 +11440,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-btn", dataset: { size: "sm" } },
+        icon("fields"),
+        this._message("table.columns", "Columns", [])
+      ),
       list
     );
     this._renderColumnControls();
@@ -10571,26 +11474,27 @@ var Table = class extends Component {
         disabled: checked && visible.length === 1,
         dataset: { columnId: column.id, columnAction: "toggle" }
       }) : null;
-      const label = toggle ? h("label", { for: controlId }, toggle, h("span", {}, column.label)) : h("span", { class: "zx-table__column-label" }, column.label);
+      const name2 = tableColumnName(column);
+      const label = toggle ? h("label", { for: controlId }, toggle, h("span", {}, name2)) : h("span", { class: "zx-table__column-label" }, name2);
       const order = this.options.columnReorder ? h(
         "span",
         {
           class: "zx-table__column-order",
           role: "group",
-          ariaLabel: `Move ${column.label}`
+          ariaLabel: this._message("table.moveColumn", "Move %1", [name2])
         },
         h("button", {
           class: "zx-table__column-move",
           type: "button",
           disabled: index === 0,
-          ariaLabel: `Move ${column.label} earlier`,
+          ariaLabel: `Move ${name2} earlier`,
           dataset: { columnId: column.id, columnAction: "up" }
         }, icon("chevron-up", { size: 11 })),
         h("button", {
           class: "zx-table__column-move",
           type: "button",
           disabled: index === this._columns.length - 1,
-          ariaLabel: `Move ${column.label} later`,
+          ariaLabel: `Move ${name2} later`,
           dataset: { columnId: column.id, columnAction: "down" }
         }, icon("chevron-down", { size: 11 }))
       ) : null;
@@ -10641,18 +11545,18 @@ var Table = class extends Component {
   }
   /** @param {Event} event @returns {void} */
   _handleColumnControlClick(event) {
-    const button = (
+    const button2 = (
       /** @type {Element|null} */
       event.target?.closest?.(".zx-table__column-move")
     );
-    if (!button || !this._columnList?.contains(button)) return;
+    if (!button2 || !this._columnList?.contains(button2)) return;
     const id = (
       /** @type {HTMLElement} */
-      button.dataset.columnId
+      button2.dataset.columnId
     );
     const action = (
       /** @type {HTMLElement} */
-      button.dataset.columnAction
+      button2.dataset.columnAction
     );
     const index = this.getColumnOrder().indexOf(String(id));
     if (action === "up" && index > 0) this.moveColumn(String(id), this._columns[index - 1].id, "before");
@@ -10850,9 +11754,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();
@@ -10862,21 +11766,25 @@ 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 th = h("th", { scope: "col", dataset: { column: column.id } });
       const align = column.align ?? (isNumericColumn(column) ? "end" : null);
       if (align) th.dataset.align = align;
       if (column.headerTitle) th.title = column.headerTitle;
-      if (column.sortable) {
-        const button = h("button", {
+      const name2 = tableHeaderName(column);
+      if (name2 !== null) th.setAttribute("aria-label", name2);
+      if (column.sortable && !this._spanning) {
+        const button2 = h("button", {
           class: "zx-table__sort-button",
-          type: "button"
+          type: "button",
+          ariaLabel: name2 ?? void 0
         }, h("span", { class: "zx-table__header-label" }, column.label));
-        this.listen(button, "click", () => {
+        this.listen(button2, "click", () => {
           const direction = this._sort?.id === column.id && this._sort.dir === "asc" ? "desc" : "asc";
           this.setSort(column.id, direction);
         });
-        th.append(button);
+        th.append(button2);
       } else {
         th.append(h("span", { class: "zx-table__header-label" }, column.label));
       }
@@ -10889,6 +11797,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();
@@ -10900,10 +11810,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) => {
@@ -10946,7 +11853,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)));
@@ -10955,6 +11869,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",
@@ -10985,9 +11916,9 @@ var Table = class extends Component {
       const align = column.align ?? (isNumericColumn(column) ? "end" : null);
       if (align) cell.dataset.align = align;
       cell.dataset.label = column.label;
+      cell.dataset.column = column.id;
       if (column.popin === false) cell.dataset.popin = "false";
       if (this._editMode !== false) {
-        cell.dataset.column = column.id;
         if (resolveEditable(column, row) !== false) {
           cell.dataset.editable = "true";
           cell.tabIndex = -1;
@@ -11064,7 +11995,7 @@ var Table = class extends Component {
       );
       return;
     }
-    if (isInteractiveCellContent(target)) return;
+    if (this._editMode !== false && isInteractiveCellContent(target)) return;
     if (this._editMode !== false && this._editTrigger === "single") {
       const cell = target?.closest('td[data-editable="true"]');
       if (cell && this._tbody.contains(cell)) {
@@ -11073,7 +12004,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();
@@ -11092,7 +12023,7 @@ var Table = class extends Component {
     if (!rowElement || !this._tbody.contains(rowElement)) return;
     const meta = this._rowMeta.get(rowElement);
     if (!meta) return;
-    if (isInteractiveCellContent(target)) return;
+    if (this._editMode !== false && isInteractiveCellContent(target)) return;
     if (this._editMode !== false && this._editTrigger === "double") {
       const cell = target?.closest('td[data-editable="true"]');
       if (cell && this._tbody.contains(cell)) {
@@ -11228,7 +12159,7 @@ var Table = class extends Component {
         ...props,
         class: textarea ? "zx-table__editor-input zx-table__editor-textarea" : "zx-table__editor-input",
         ...textarea ? {} : { type: "text" },
-        ariaLabel: props.ariaLabel ?? `${column.label} row ${index + 1}`,
+        ariaLabel: props.ariaLabel ?? `${tableColumnName(column)} row ${index + 1}`,
         value: formatCellValue(column, value, row)
       })
     );
@@ -11247,7 +12178,7 @@ var Table = class extends Component {
     const control = entry?.control;
     if (!control || typeof control.focus !== "function") return;
     control.focus();
-    if (entry.type === "text" && typeof control.select === "function") control.select();
+    if (editorSelectsOnEntry(entry.type) && typeof control.select === "function") control.select();
   }
   /**
    * Moves focus back onto a cell.
@@ -11416,6 +12347,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),
@@ -11497,6 +12429,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);
@@ -11515,6 +12448,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;
@@ -11525,7 +12459,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
@@ -11538,13 +12472,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];
@@ -11577,9 +12513,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;
@@ -11599,6 +12543,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];
@@ -11827,9 +12799,26 @@ 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 : []);
 }
+function normalizeTableVariant(value) {
+  return value === "plain" ? "plain" : "default";
+}
 function normalizeEditMode(mode) {
   if (mode === "cell" || mode === "row") return mode;
   return mode === true ? "cell" : false;
@@ -11872,6 +12861,22 @@ function normalizeTableColumns(columns) {
     return { ...column, id, label: String(column.label ?? id) };
   });
 }
+function tableColumnName(column) {
+  for (const candidate of [column?.ariaLabel, column?.label]) {
+    const text3 = candidate == null ? "" : String(candidate).trim();
+    if (text3) return text3;
+  }
+  return String(column?.id ?? "");
+}
+function tableHeaderName(column) {
+  const label = column?.label == null ? "" : String(column.label).trim();
+  const explicit = column?.ariaLabel == null ? "" : String(column.ariaLabel).trim();
+  if (explicit) return explicit;
+  return label ? null : tableColumnName(column) || null;
+}
+function editorSelectsOnEntry(type) {
+  return type === "text" || type === "number" || type === "date";
+}
 function reconcileTableColumnOrder(columns, order) {
   const available = columns.map((column) => column.id);
   const allowed = new Set(available);
@@ -12048,8 +13053,8 @@ function normalizeGlass(value) {
 function normalizeShape(value) {
   return value === "circle" ? "circle" : "tile";
 }
-function originalAttribute(snapshot3, name) {
-  return snapshot3?.attributes.find(([attribute]) => attribute === name)?.[1] ?? null;
+function originalAttribute(snapshot3, name2) {
+  return snapshot3?.attributes.find(([attribute]) => attribute === name2)?.[1] ?? null;
 }
 
 // src/components/launcher/launcher.js
@@ -12063,14 +13068,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
   };
   /**
@@ -12107,8 +13118,17 @@ var Launcher = class extends Component {
     this._requestSequence = 0;
     this._queryTimer = null;
     this._busy = false;
+    this._settled = true;
+    this._pages = [];
+    this._restoreActiveId = null;
+    this._announcePending = false;
+    this._announceToggle = false;
     this._destroyed = false;
     const listId = uid("zx-launcher-results");
+    const label = String(this.options.label ?? this._message("launcher.label", "Launcher"));
+    const placeholder = String(this.options.placeholder ?? this._message("launcher.placeholder", "Search applications and records"));
+    this._label = label;
+    this._placeholder = placeholder;
     const input = h("input", {
       ref: "input",
       class: "zx-launcher__input",
@@ -12119,15 +13139,26 @@ var Launcher = class extends Component {
       ariaAutocomplete: "list",
       ariaControls: listId,
       ariaExpanded: "false",
-      ariaLabel: this.options.label,
-      placeholder: this.options.placeholder,
+      ariaLabel: label,
+      placeholder,
       value: this._query
     });
+    const scopeBack = h("button", {
+      ref: "scopeBack",
+      class: "zx-icon-btn zx-launcher__scope-back",
+      type: "button"
+    }, icon("x"));
+    const scope2 = h(
+      "span",
+      { ref: "scope", class: "zx-launcher__scope", hidden: true },
+      h("span", { ref: "scopeLabel", class: "zx-launcher__scope-label" }),
+      scopeBack
+    );
     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,19 +13166,31 @@ var Launcher = class extends Component {
       role: "status",
       ariaLive: "polite"
     });
+    const announce = h("div", {
+      ref: "announce",
+      class: "zx-launcher__announce",
+      role: "status",
+      ariaLive: "polite",
+      ariaAtomic: "true"
+    });
     const results = h("div", {
       ref: "results",
       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"),
+      back: this._message("launcher.hintBack", "Back"),
+      close: this._message("launcher.hintClose", "Close")
+    });
+    dialog.setAttribute("aria-label", label);
     dialog.replaceChildren(
       h(
         "div",
@@ -12155,17 +13198,19 @@ var Launcher = class extends Component {
         h("div", {
           class: "zx-launcher__search",
           dataset: { shortcut: shortcut ? "true" : "false" }
-        }, icon("search"), input, shortcut, close),
+        }, icon("search"), scope2, input, shortcut, close),
         status,
         results,
-        footer
+        footer,
+        announce
       )
     );
     dialog.dataset.state = "closed";
-    if (this._createdRoot) overlayHost(this.options.scope).append(dialog);
+    if (this._createdRoot) connectedOverlayHost(this.options.scope)?.append(dialog);
     this.listen(input, "input", () => {
       this._query = /** @type {HTMLInputElement} */
       input.value;
+      this._announcePending = false;
       this.emit("query", { query: this._query.trim() });
       this._refresh();
     });
@@ -12173,6 +13218,10 @@ var Launcher = class extends Component {
       /** @type {KeyboardEvent} */
       event
     ));
+    this.listen(scopeBack, "click", () => {
+      this.back();
+      input.focus();
+    });
     this.listen(close, "click", () => this.close());
     this.listen(results, "click", (event) => {
       const option = (
@@ -12201,6 +13250,13 @@ var Launcher = class extends Component {
       dialog.dataset.state = "closed";
       input.setAttribute("aria-expanded", "false");
       this._abortRequest();
+      if (this._pages.length && !dialog.open) {
+        this._unwind();
+        this._announcePending = false;
+        this._syncPage();
+        this._renderResults();
+        this._emitPage();
+      }
       this.emit("close");
     });
     this.listen(document, "keydown", (event) => this._onDocumentKeydown(
@@ -12210,25 +13266,60 @@ var Launcher = class extends Component {
     this._renderResults();
     return dialog;
   }
-  /** Opens the launcher and focuses/selects its query. @returns {this} @fires Launcher#open */
-  open() {
-    if (this.isOpen() || this._destroyed) return this;
+  /**
+   * Opens the launcher and focuses/selects its query. It opens on the root unless `page` names one;
+   * already open, `page` navigates there.
+   * @param {LauncherOpenOptions} [options={}] Open options.
+   * @returns {this}
+   * @fires Launcher#open
+   * @fires Launcher#page
+   */
+  open(options = {}) {
+    if (this._destroyed) return this;
+    const target = options && typeof options === "object" ? options.page : void 0;
+    if (this.isOpen()) {
+      const path = target == null ? [] : this._pagePath(target);
+      if (path.length) this._goTo(path);
+      return this;
+    }
     if (this._createdRoot) {
       const host = overlayHost(this.options.scope);
       if (this.el.parentElement !== host) host.append(this.el);
     }
+    const before = this._pages.map((entry) => entry.page);
     this.el.showModal();
     this.el.dataset.state = "open";
     this.refs.input.setAttribute("aria-expanded", "true");
-    this._refresh();
+    this._goTo(target == null ? [] : this._pagePath(target), { emit: false });
     queueMicrotask(() => {
       if (!this.isOpen()) return;
       this.refs.input.focus();
       this.refs.input.select();
     });
     this.emit("open");
+    if (!samePath(before, this._pages.map((entry) => entry.page))) this._emitPage();
     return this;
   }
+  /**
+   * Goes back one page, restoring the level beneath with its query and highlighted option. Does
+   * nothing on the root.
+   * @returns {this}
+   * @fires Launcher#page
+   */
+  back() {
+    if (!this._pages.length) return this;
+    const settled = this._popPage();
+    this._syncPage();
+    this._announcePending = this.isOpen();
+    if (settled) this._renderResults();
+    else this._refresh(true);
+    this._emitPage();
+    return this;
+  }
+  /** Returns the page shown, or null on the root. @returns {LauncherItem|null} */
+  getPage() {
+    return this._pages.at(-1)?.page ?? null;
+  }
   /** Closes the launcher. @returns {this} */
   close() {
     if (this.isOpen()) this.el.close();
@@ -12252,6 +13343,7 @@ var Launcher = class extends Component {
   setQuery(query) {
     this._query = String(query ?? "");
     this.refs.input.value = this._query;
+    this._announcePending = false;
     this.emit("query", { query: this._query.trim() });
     this._refresh();
     return this;
@@ -12260,7 +13352,7 @@ var Launcher = class extends Component {
   getQuery() {
     return this._query;
   }
-  /** Replaces local catalogue items. @param {LauncherItem[]} items @returns {this} */
+  /** Replaces the root's local catalogue items; an open page keeps its own. @param {LauncherItem[]} items @returns {this} */
   setItems(items) {
     this._items = normalizeItems(items);
     this._renderResults();
@@ -12273,10 +13365,14 @@ var Launcher = class extends Component {
     this._renderResults();
     return this;
   }
-  /** Replaces asynchronous sources and aborts work from the old set. @param {LauncherSource[]} sources @returns {this} */
+  /** Replaces the root's asynchronous sources and aborts work from the old set; on a page they load once the root is back. @param {LauncherSource[]} sources @returns {this} */
   setSources(sources) {
-    this._abortRequest();
     this._sources = normalizeSources(sources);
+    if (this._pages.length) {
+      this._pages[0].parent.sourceItems = null;
+      return this;
+    }
+    this._abortRequest();
     this._sourceItems.clear();
     this._refresh();
     return this;
@@ -12291,16 +13387,24 @@ var Launcher = class extends Component {
     super.destroy();
     if (!this._createdRoot && original) {
       for (const attribute of Array.from(this.el.attributes)) this.el.removeAttribute(attribute.name);
-      for (const [name, value] of original.attributes) this.el.setAttribute(name, value);
+      for (const [name2, value] of original.attributes) this.el.setAttribute(name2, value);
       this.el.replaceChildren(...original.children);
     }
   }
-  /** @returns {void} */
-  _refresh() {
+  /**
+   * Re-renders the current level and reloads its sources: debounced while typing, at once when a
+   * page opens (so its loading state shows instead of a passing "No results").
+   * @param {boolean} [immediate=false] Load without the debounce.
+   * @returns {void}
+   */
+  _refresh(immediate = false) {
+    this._abortRequest();
     this._sourceItems.clear();
+    const { sources } = this._level();
+    this._settled = sources.length === 0;
+    if (immediate && sources.length) void this._loadSources();
     this._renderResults();
-    this._abortRequest();
-    if (this._sources.length === 0) return;
+    if (immediate || sources.length === 0) return;
     const delay = Math.max(0, Number(this.options.debounce) || 0);
     this._queryTimer = setTimeout(() => this._loadSources(), delay);
   }
@@ -12308,8 +13412,15 @@ var Launcher = class extends Component {
   async _loadSources() {
     this._queryTimer = null;
     const query = this._query.trim();
-    const sources = this._sources.filter((source) => visibleForQuery(source.when, query) && query.length >= Math.max(Number(this.options.minQuery) || 0, Number(source.minQuery) || 0));
-    if (sources.length === 0) return;
+    const page = this._pages?.at(-1)?.page ?? null;
+    const sources = this._level().sources.filter((source) => visibleForQuery(source.when, query) && query.length >= Math.max(
+      source._page ? 0 : Number(this.options.minQuery) || 0,
+      Number(source.minQuery) || 0
+    ));
+    if (sources.length === 0) {
+      this._settled = true;
+      return;
+    }
     const request = new AbortController();
     const sequence = ++this._requestSequence;
     this._request = request;
@@ -12320,7 +13431,7 @@ var Launcher = class extends Component {
         if (request.signal.aborted || sequence !== this._requestSequence) return;
         this._sourceItems.set(source.id, normalizeItems(loaded).map((item, itemOrder) => ({
           ...item,
-          _source: source.id,
+          _source: source._page ? null : source.id,
           _sourceOrder: source.order === "source",
           group: item.group ?? source.label ?? "",
           itemOrder: item.itemOrder ?? (source.order === "source" ? itemOrder : void 0)
@@ -12328,13 +13439,157 @@ var Launcher = class extends Component {
         this._renderResults();
       } catch (error) {
         if (request.signal.aborted || sequence !== this._requestSequence) return;
-        this.emit("error", { source, error });
+        this.emit("error", { source, error, page });
       }
     }));
     if (request.signal.aborted || sequence !== this._requestSequence) return;
     this._request = null;
+    this._settled = true;
     this._setBusy(false);
   }
+  /**
+   * The level on screen: the root's items and sources, or the open page's.
+   * @returns {{items: LauncherItem[], sources: LevelSource[]}}
+   */
+  _level() {
+    return this._pages?.at(-1) ?? { items: this._items, sources: this._sources };
+  }
+  /**
+   * Opens a page on top of the current level: what the user activated, or ArrowRight on its row.
+   * @param {LauncherItem} item Page item.
+   * @returns {void}
+   */
+  _openPage(item) {
+    this._pushPage(item);
+    this._syncPage();
+    this._announcePending = this.isOpen();
+    this._refresh(true);
+    this._emitPage();
+  }
+  /**
+   * Replaces the whole stack with `path` (empty for the root) and refreshes what it lands on.
+   * @param {LauncherItem[]} path Pages from the root down.
+   * @param {{emit?: boolean}} [options={}] Whether to report a change through `page`.
+   * @returns {void}
+   */
+  _goTo(path, { emit = true } = {}) {
+    const before = this._pages.map((entry) => entry.page);
+    this._unwind();
+    if (path.length) {
+      this._abortRequest();
+      this._sourceItems.clear();
+      this._settled = false;
+      for (const item of path) this._pushPage(item);
+    }
+    this._syncPage();
+    this._announcePending = this.isOpen() && path.length > 0;
+    this._refresh(path.length > 0);
+    if (emit && !samePath(before, path)) this._emitPage();
+  }
+  /** Pops every page, restoring the root's query, without rendering. @returns {void} */
+  _unwind() {
+    while (this._pages.length) this._popPage();
+  }
+  /**
+   * Pushes a page, remembering the level beneath, and clears the query for it.
+   * @param {LauncherItem} item Page item.
+   * @returns {void}
+   */
+  _pushPage(item) {
+    const active = this._active >= 0 ? this._results[this._active] : null;
+    this._pages.push({
+      page: item,
+      items: Array.isArray(item.items) ? normalizeItems(item.items) : [],
+      sources: typeof item.items === "function" ? [launcherPageSource(item)] : [],
+      parent: {
+        query: this._query,
+        activeId: active ? String(active.id) : null,
+        sourceItems: this._settled ? new Map(this._sourceItems) : null
+      }
+    });
+    this._setInputQuery("");
+  }
+  /**
+   * Pops the top page and restores the level beneath.
+   * @returns {boolean} Whether that level's results came back complete (no reload needed).
+   */
+  _popPage() {
+    const entry = this._pages.pop();
+    if (!entry) return true;
+    this._announcePending = false;
+    this._abortRequest();
+    const { parent } = entry;
+    this._setInputQuery(parent.query);
+    this._sourceItems = parent.sourceItems ? new Map(parent.sourceItems) : /* @__PURE__ */ new Map();
+    this._settled = parent.sourceItems !== null;
+    this._restoreActiveId = parent.activeId;
+    return this._settled;
+  }
+  /** @param {string} query @returns {void} */
+  _setInputQuery(query) {
+    this._query = query;
+    this.refs.input.value = query;
+    this._renderedQuery = null;
+  }
+  /**
+   * Shows the open page in the search row: the chip, the combobox name and placeholder, and the
+   * footer's Back hint.
+   * @returns {void}
+   */
+  _syncPage() {
+    const page = this.getPage();
+    const { input, scope: scope2, scopeLabel, scopeBack, backHint } = this.refs;
+    scope2.hidden = page === null;
+    if (backHint) backHint.hidden = page === null;
+    this.el.toggleAttribute("data-page", page !== null);
+    if (page === null) {
+      input.setAttribute("aria-label", this._label);
+      input.setAttribute("placeholder", this._placeholder);
+      scopeLabel.textContent = "";
+      return;
+    }
+    const parent = this._pages.at(-2)?.page.label ?? this._label;
+    scopeLabel.textContent = page.label;
+    scopeBack.setAttribute("aria-label", this._message("launcher.back", "Back to %1", parent));
+    input.setAttribute("aria-label", this._message("launcher.pageLabel", "Search %1", page.label));
+    input.setAttribute("placeholder", page.placeholder != null ? String(page.placeholder) : this._message("launcher.pagePlaceholder", "Search"));
+  }
+  /** @returns {void} @fires Launcher#page */
+  _emitPage() {
+    const path = this._pages.map((entry) => entry.page);
+    this.emit("page", { page: path.at(-1) ?? null, path });
+  }
+  /**
+   * Resolves `open({ page })`: a page item as given, or the path to a local page by id.
+   * @param {string|number|LauncherItem} target Page id or item.
+   * @returns {LauncherItem[]}
+   */
+  _pagePath(target) {
+    if (target && typeof target === "object") {
+      const item = (
+        /** @type {Record<string, any>} */
+        target
+      );
+      if (!isLauncherPage(item) || item.label == null) return [];
+      return [normalizeLauncherItem({ ...item, id: item.id ?? item.label })];
+    }
+    return findLauncherPage(
+      this._items,
+      /** @type {string|number} */
+      target
+    );
+  }
+  /**
+   * The polite line a page change ends on: where the user is and how much is there.
+   * @returns {string}
+   */
+  _pageStatus() {
+    const label = this.getPage()?.label ?? this._label;
+    const count = this._results.length;
+    if (count === 0) return this._message("launcher.pageEmpty", "%1, no results", label);
+    if (count === 1) return this._message("launcher.pageResult", "%1, 1 result", label);
+    return this._message("launcher.pageResults", "%1, %2 results", label, count);
+  }
   /** @param {boolean} busy @returns {void} */
   _setBusy(busy) {
     this._busy = busy;
@@ -12353,11 +13608,14 @@ var Launcher = class extends Component {
   /** @returns {void} */
   _renderResults() {
     const queryKey = this._query;
-    const activeId = this._renderedQuery === queryKey && this._active >= 0 && this._results[this._active] ? String(this._results[this._active].id) : null;
+    const restored = this._restoreActiveId ?? null;
+    this._restoreActiveId = null;
+    const activeId = restored ?? (this._renderedQuery === queryKey && this._active >= 0 && this._results[this._active] ? String(this._results[this._active].id) : null);
     const query = this._query.trim();
-    const local = this._items.filter((item) => visibleForQuery(item.when, query));
+    const level = this._level();
+    const local = level.items.filter((item) => visibleForQuery(item.when, query));
     const rankedLocal = rankLauncherItems(local, query, this.options.maxResults);
-    const remote = this._sources.flatMap((source) => {
+    const remote = level.sources.flatMap((source) => {
       const loaded = this._sourceItems.get(String(source.id)) ?? [];
       return source.order === "source" ? loaded.filter((item) => visibleForQuery(item.when, query)) : rankLauncherItems(
         loaded.filter((item) => visibleForQuery(item.when, query)),
@@ -12400,7 +13658,8 @@ var Launcher = class extends Component {
   }
   /** @param {RankedLauncherItem} item @param {number} index @returns {HTMLElement} */
   _option(item, index) {
-    const href = safeHref(item.href);
+    const page = isLauncherPage(item);
+    const href = page ? null : safeHref(item.href);
     const tag = href ? "a" : "button";
     const children = [];
     const visual = launcherItemIcon(item);
@@ -12415,6 +13674,17 @@ var Launcher = class extends Component {
       item.description ? h("span", { class: "zx-launcher__description" }, item.description) : null
     ));
     if (item.badge != null) children.push(h("span", { class: "zx-launcher__badge" }, String(item.badge)));
+    if (item.hint != null && item.hint !== "") {
+      children.push(h("span", { class: "zx-launcher__hint" }, String(item.hint)));
+    }
+    const keys = launcherShortcutKeys(item);
+    const caps = launcherShortcutCaps(item.shortcut);
+    if (caps.length) children.push(h(
+      "span",
+      { class: "zx-launcher__keys", ariaHidden: keys ? "true" : null },
+      caps.map((cap) => h("kbd", { class: "zx-launcher__key" }, cap))
+    ));
+    if (page) children.push(h("span", { class: "zx-launcher__chevron", ariaHidden: "true" }, icon("chevron-right")));
     return (
       /** @type {HTMLElement} */
       h(tag, {
@@ -12429,20 +13699,31 @@ var Launcher = class extends Component {
         ariaSelected: "false",
         ariaDisabled: item.disabled ? "true" : null,
         ariaCurrent: item.current ? "page" : null,
+        ariaKeyShortcuts: keys,
         dataset: {
           launcherIndex: index,
           pinned: item.pinned !== void 0 && item.pinned !== false ? "true" : null,
-          kind: normalizeLauncherKind(item.kind)
+          kind: normalizeLauncherKind(item.kind),
+          page: page ? "true" : null
         }
       }, children)
     );
   }
   /** @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;
+    if (this._announcePending && !this._busy && this._renderedQuery === this._query) {
+      this._announcePending = false;
+      this._announceToggle = !this._announceToggle;
+      this.refs.announce.textContent = this._pageStatus() + (this._announceToggle ? "\xA0" : "");
+    }
   }
   /** @returns {void} */
   _syncActive() {
@@ -12461,6 +13742,12 @@ var Launcher = class extends Component {
       this.close();
       return;
     }
+    const plain = !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+    if (event.key === "Backspace" && plain && !event.repeat && this._pages.length && this._query === "") {
+      event.preventDefault();
+      this.back();
+      return;
+    }
     if (event.key === "Enter") {
       if (this._active < 0) return;
       event.preventDefault();
@@ -12469,9 +13756,8 @@ var Launcher = class extends Component {
       return;
     }
     const enabled = this._results.map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0);
-    if (enabled.length === 0) return;
     if (/^Arrow(?:Left|Right|Up|Down)$/.test(event.key)) {
-      const next = this._spatialIndex(event.key, enabled);
+      const next = enabled.length ? this._spatialIndex(event.key, enabled) : null;
       if (next !== null) {
         event.preventDefault();
         this._active = next;
@@ -12479,8 +13765,12 @@ var Launcher = class extends Component {
         this.refs.results.querySelector(`[data-launcher-index="${this._active}"]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
         return;
       }
-      if (event.key === "ArrowLeft" || event.key === "ArrowRight") return;
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        if (plain && !event.repeat && this._pageKey(event.key)) event.preventDefault();
+        return;
+      }
     }
+    if (enabled.length === 0) return;
     let position2 = enabled.indexOf(this._active);
     if (event.key === "Home" || event.key === "PageUp") position2 = 0;
     else if (event.key === "End" || event.key === "PageDown") position2 = enabled.length - 1;
@@ -12492,6 +13782,30 @@ var Launcher = class extends Component {
     this._syncActive();
     this.refs.results.querySelector(`[data-launcher-index="${this._active}"]`)?.scrollIntoView({ block: "nearest" });
   }
+  /**
+   * ArrowRight on a page row opens it once the caret is at the end of the query (before that it
+   * moves the caret); ArrowLeft on an empty query goes back. Application tiles keep both arrows
+   * for moving through their grid, which the caller tries first.
+   * @param {string} key ArrowLeft or ArrowRight.
+   * @returns {boolean} Whether the key navigated.
+   */
+  _pageKey(key) {
+    if (key === "ArrowLeft") {
+      if (!this._pages.length || this._query !== "") return false;
+      this.back();
+      return true;
+    }
+    const item = this._active >= 0 ? this._results[this._active] : null;
+    if (!item || item.disabled || !isLauncherPage(item) || item.kind === "application") return false;
+    const input = (
+      /** @type {HTMLInputElement} */
+      this.refs.input
+    );
+    const end = input.value.length;
+    if (input.selectionStart !== end || input.selectionEnd !== end) return false;
+    this._openPage(item);
+    return true;
+  }
   /** @param {string} direction @param {number[]} enabled @returns {number|null} */
   _spatialIndex(direction, enabled) {
     const current = this.refs.results.querySelector(`[data-launcher-index="${this._active}"]`);
@@ -12508,21 +13822,28 @@ var Launcher = class extends Component {
       event.preventDefault();
       return;
     }
+    if (isLauncherPage(item)) {
+      event.preventDefault();
+      this._openPage(item);
+      this.refs.input.focus();
+      return;
+    }
     const selected = this.emit("select", {
       item,
       value: item.value ?? item.id,
       source: item._source ?? null,
-      query: this._query.trim()
+      query: this._query.trim(),
+      page: this.getPage()
     });
     if (selected.defaultPrevented) {
       event.preventDefault();
       return;
     }
+    this.close();
     if (!item.href) {
       event.preventDefault();
       item.invoke?.();
     }
-    this.close();
   }
   /** @param {KeyboardEvent} event @returns {void} */
   _onDocumentKeydown(event) {
@@ -12534,6 +13855,17 @@ 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.
+   * @param {...unknown} args Positional `%1`, `%2` values.
+   * @returns {string}
+   */
+  _message(key, fallback, ...args) {
+    const message = this.msg(key, ...args);
+    return message === key ? printf(fallback, args) : message;
+  }
 };
 function launcherShortcutLabel() {
   const platform = String(
@@ -12542,16 +13874,73 @@ function launcherShortcutLabel() {
   );
   return /mac|iphone|ipad/i.test(platform) ? "\u2318 K" : "Ctrl K";
 }
-function launcherHints(hints) {
+function launcherHints(hints, defaults4) {
   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 ?? defaults4.move),
+    h("span", {}, h("kbd", {}, "\u21B5"), labels.open ?? defaults4.open),
+    // Shown only on a page (`_syncPage()`).
+    h("span", { ref: "backHint", hidden: true }, h("kbd", {}, "\u232B"), labels.back ?? defaults4.back),
+    h("span", {}, h("kbd", {}, "Esc"), labels.close ?? defaults4.close)
+  );
+}
+function isLauncherPage(item) {
+  const items = (
+    /** @type {Record<string, any>|null} */
+    item?.items
   );
+  return Boolean(item) && typeof item === "object" && (Array.isArray(items) || typeof items === "function");
+}
+function findLauncherPage(items, id) {
+  if (id == null) return [];
+  const key = String(id);
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (list, trail) => {
+    if (!Array.isArray(list) || seen.has(list)) return null;
+    seen.add(list);
+    for (const item of normalizeItems(list)) {
+      if (!isLauncherPage(item)) continue;
+      const path = [...trail, item];
+      if (String(item.id) === key) return path;
+      const found = visit(item.items, path);
+      if (found) return found;
+    }
+    return null;
+  };
+  return visit(items, []) ?? [];
+}
+function launcherShortcutCaps(shortcut) {
+  const labels = shortcut && typeof shortcut === "object" && !Array.isArray(shortcut) ? (
+    /** @type {{label?: unknown}} */
+    shortcut.label
+  ) : shortcut;
+  const caps = Array.isArray(labels) ? labels : labels == null ? [] : [labels];
+  return caps.filter((cap) => cap != null && String(cap).trim() !== "").map((cap) => String(cap).trim());
+}
+function launcherShortcutKeys(item) {
+  const shortcut = (
+    /** @type {any} */
+    item.shortcut
+  );
+  const keys = item.keys ?? (shortcut && typeof shortcut === "object" && !Array.isArray(shortcut) ? shortcut.keys : null);
+  return typeof keys === "string" && keys.trim() ? keys.trim() : null;
+}
+function launcherPageSource(item) {
+  return {
+    id: `page:${String(item.id)}`,
+    load: (
+      /** @type {LauncherPageLoader} */
+      item.items
+    ),
+    order: item.order === "source" ? "source" : "rank",
+    _page: true
+  };
+}
+function samePath(left, right) {
+  return left.length === right.length && left.every((item, index) => item === right[index] || String(item.id) === String(right[index].id));
 }
 function launcherItemIcon(item) {
   let visual = item.icon;
@@ -12672,7 +14061,7 @@ function normalizeLauncherItem(item) {
   if (href !== null) normalized.href = href;
   else {
     delete normalized.href;
-    if (typeof normalized.invoke !== "function") normalized.disabled = true;
+    if (typeof normalized.invoke !== "function" && !isLauncherPage(normalized)) normalized.disabled = true;
   }
   return normalized;
 }
@@ -12682,6 +14071,7 @@ function normalizeSources(sources) {
 }
 
 // src/components/message/message.js
+var MESSAGE_ACTION_MIN_TIMEOUT = 8e3;
 var MessageQueue = class {
   #limit;
   #active = [];
@@ -12772,7 +14162,7 @@ var Message = class _Message extends Component {
     closable: true,
     maxVisible: 5
   };
-  /** @type {WeakMap<Element, Message>} */
+  /** @type {WeakMap<Element, Message>} Floating region per overlay host. */
   static #floating = /* @__PURE__ */ new WeakMap();
   /** @returns {HTMLElement} */
   render() {
@@ -12784,6 +14174,7 @@ var Message = class _Message extends Component {
     this._createdRoot = created;
     this._original = created ? null : snapshot2(root);
     this._entries = /* @__PURE__ */ new Set();
+    this._floatingHost = null;
     this._queue = new MessageQueue(normalizeLimit(this.options.maxVisible), (entry) => {
       this._activate(entry);
     });
@@ -12799,10 +14190,13 @@ var Message = class _Message extends Component {
    * @returns {MessageHandle}
    */
   show(msg, options = {}) {
+    const action = normalizeMessageAction(options.action);
     const settings = {
-      kind: normalizeKind(options.kind ?? this.options.kind),
-      timeout: normalizeTimeout(options.timeout ?? this.options.timeout),
-      closable: options.closable ?? Boolean(this.options.closable)
+      kind: normalizeKind2(options.kind ?? this.options.kind),
+      timeout: messageTimeout(options.timeout ?? this.options.timeout, action !== null),
+      closable: options.closable ?? Boolean(this.options.closable),
+      action,
+      leading: resolveLeading(options.leading)
     };
     const entry = this._createEntry(msg, settings);
     this._entries.add(entry);
@@ -12863,10 +14257,32 @@ var Message = class _Message extends Component {
   static progress(text3, options = {}) {
     return this.#floatingRegion(options.scope)._progress(text3);
   }
+  /**
+   * Removes a floating region at once, toasts and all, without waiting for them to time out.
+   *
+   * A region already removes itself when its last toast closes, and one whose host has left the
+   * document is replaced on the next toast, so this is only for a host being torn down while
+   * toasts are still showing — an application view unmounting its themed shell, say.
+   * @param {Element|string} scope Element or selector whose nearest Zx theme scope owns the region,
+   *   as passed to `show()`.
+   * @returns {boolean} Whether there was a region to remove.
+   */
+  static disposeRegion(scope2) {
+    if (scope2 == null) return false;
+    const context = resolveElement(scope2);
+    if (!context) return false;
+    const host = overlayHost(context);
+    const region = _Message.#floating.get(host);
+    if (!region) return false;
+    _Message.#floating.delete(host);
+    region._disposeFloating();
+    return true;
+  }
   /** @returns {void} */
   destroy() {
     if (this._cleaned) return;
     this._cleaned = true;
+    this._floatingHost = null;
     for (const entry of this._entries) {
       clearEntryTimers(entry);
       entry.node.remove();
@@ -12918,7 +14334,7 @@ var Message = class _Message extends Component {
   }
   /**
    * @param {string|Node} msg
-   * @param {{kind: MessageKind, timeout: number, closable: boolean}} settings
+   * @param {{kind: MessageKind, timeout: number, closable: boolean, action?: MessageAction|null, leading?: Node|null}} settings
    * @param {{pct: number, text: string}|null} [progress=null]
    * @returns {any}
    */
@@ -12926,7 +14342,7 @@ var Message = class _Message extends Component {
     const iconHost = h(
       "span",
       { class: "zx-message__icon", ariaHidden: "true" },
-      icon(settings.kind, { size: 18 })
+      settings.leading ?? icon(settings.kind, { size: 18 })
     );
     const content = h("div", { class: "zx-message__content" });
     if (isNode(msg)) content.append(msg);
@@ -12947,9 +14363,13 @@ var Message = class _Message extends Component {
       timer: null,
       exitTimer: null,
       closed: false,
+      hovered: false,
+      focused: false,
+      returnFocus: null,
       progressBar: null,
       progressFill: null
     };
+    if (settings.leading) node.dataset.leading = "";
     if (progress) {
       node.dataset.progress = "";
       const fill = h("span", { class: "zx-message__progress-fill" });
@@ -12966,18 +14386,67 @@ var Message = class _Message extends Component {
       entry.progressFill = fill;
       syncProgress(entry, progress);
     }
+    if (settings.action) {
+      const { label, kind, onclick } = settings.action;
+      const control = button({ label, kind, size: "sm" });
+      control.classList.add("zx-message__action");
+      node.append(control);
+      this.listen(control, "click", (event) => {
+        if (entry.closed) return;
+        try {
+          onclick?.(
+            /** @type {MouseEvent} */
+            event
+          );
+        } finally {
+          this._close(entry);
+        }
+      });
+    }
     if (settings.closable) {
       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));
     }
-    this.listen(node, "mouseenter", () => this._pause(entry));
-    this.listen(node, "mouseleave", () => this._resume(entry));
+    this.listen(node, "mouseenter", () => {
+      entry.hovered = true;
+      this._pause(entry);
+    });
+    this.listen(node, "mouseleave", () => {
+      entry.hovered = false;
+      this._resume(entry);
+    });
+    this.listen(node, "focusin", (event) => {
+      if (!entry.focused) {
+        const from = (
+          /** @type {FocusEvent} */
+          event.relatedTarget
+        );
+        entry.returnFocus = isNode(from) && !node.contains(
+          /** @type {Node} */
+          from
+        ) ? from : null;
+      }
+      entry.focused = true;
+      this._pause(entry);
+    });
+    this.listen(node, "focusout", (event) => {
+      const to = (
+        /** @type {FocusEvent} */
+        event.relatedTarget
+      );
+      if (isNode(to) && node.contains(
+        /** @type {Node} */
+        to
+      )) return;
+      entry.focused = false;
+      this._resume(entry);
+    });
     return entry;
   }
   /** @param {any} entry @returns {void} */
@@ -12989,7 +14458,7 @@ var Message = class _Message extends Component {
   }
   /** @param {any} entry @returns {void} */
   _schedule(entry) {
-    if (entry.closed || entry.remaining <= 0) return;
+    if (entry.closed || entry.remaining <= 0 || entry.hovered || entry.focused) return;
     entry.startedAt = Date.now();
     entry.timer = setTimeout(() => this._close(entry), entry.remaining);
   }
@@ -13002,7 +14471,7 @@ var Message = class _Message extends Component {
   }
   /** @param {any} entry @returns {void} */
   _resume(entry) {
-    if (entry.closed || entry.timer !== null) return;
+    if (entry.closed || entry.timer !== null || entry.hovered || entry.focused) return;
     if (entry.remaining <= 0) {
       this._close(entry);
       return;
@@ -13014,10 +14483,12 @@ var Message = class _Message extends Component {
     if (entry.closed) return;
     entry.closed = true;
     clearEntryTimers(entry);
+    returnFocus(entry);
     if (!this._queue.isActive(entry)) {
       this._queue.remove(entry);
       entry.node.remove();
       this._entries.delete(entry);
+      this._releaseIfEmpty();
       return;
     }
     entry.node.dataset.state = "closing";
@@ -13038,12 +14509,52 @@ var Message = class _Message extends Component {
     entry.node.remove();
     this._entries.delete(entry);
     this._queue.remove(entry);
+    this._releaseIfEmpty();
+  }
+  /**
+   * Takes a floating region out of the document once its last toast has gone, so an emptied host
+   * is not left holding a region nobody uses. Inline areas stay: their element is the caller's.
+   * @returns {void}
+   */
+  _releaseIfEmpty() {
+    if (!this._floatingHost || this._entries.size > 0) return;
+    _Message.#release(this);
+  }
+  /**
+   * Destroys a floating region and removes its element.
+   * @returns {void}
+   */
+  _disposeFloating() {
+    const region = this.el;
+    this.destroy();
+    region.remove();
+  }
+  /**
+   * 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} */
+  /**
+   * Finds or creates the floating region for a scope. A cached region is reused only while it is
+   * still where it was put: a host emptied by `replaceChildren()` would otherwise keep receiving
+   * toasts in a node nobody can see.
+   * @param {Element|string|null|undefined} scope
+   * @returns {Message}
+   */
   static #floatingRegion(scope2) {
-    const host = overlayHost(scope2 ?? null);
+    let host = overlayHost(scope2 ?? null);
+    if (!host.isConnected) host = overlayHost(null);
     const existing = this.#floating.get(host);
-    if (existing) return existing;
+    if (existing && existing.el.isConnected && existing.el.parentElement === host) return existing;
+    if (existing) {
+      this.#floating.delete(host);
+      existing._disposeFloating();
+    }
     const region = h("div", {
       class: "zx-message-region",
       popover: "manual",
@@ -13052,12 +14563,19 @@ var Message = class _Message extends Component {
     });
     host.append(region);
     const floating = new _Message(region);
+    floating._floatingHost = host;
     this.#floating.set(host, floating);
     if (typeof region.showPopover === "function") region.showPopover();
     return floating;
   }
+  /** @param {Message} region Floating region whose last toast closed. @returns {void} */
+  static #release(region) {
+    const host = region._floatingHost;
+    if (host && _Message.#floating.get(host) === region) _Message.#floating.delete(host);
+    region._disposeFloating();
+  }
 };
-function normalizeKind(value) {
+function normalizeKind2(value) {
   if (value === "danger") return "error";
   return ["success", "warning", "error"].includes(String(value)) ? (
     /** @type {MessageKind} */
@@ -13068,6 +14586,50 @@ function normalizeTimeout(value) {
   const timeout = Number(value);
   return Number.isFinite(timeout) ? Math.max(0, timeout) : 4e3;
 }
+function messageTimeout(timeout, hasAction = false) {
+  const settled = normalizeTimeout(timeout);
+  return hasAction && settled > 0 ? Math.max(settled, MESSAGE_ACTION_MIN_TIMEOUT) : settled;
+}
+function normalizeMessageAction(value) {
+  if (!value || typeof value !== "object") return null;
+  const action = (
+    /** @type {Record<string, unknown>} */
+    value
+  );
+  const label = action.label == null ? "" : String(action.label).trim();
+  if (!label) return null;
+  const kind = ["primary", "danger", "ghost"].includes(String(action.kind)) ? (
+    /** @type {'primary'|'danger'|'ghost'} */
+    action.kind
+  ) : "default";
+  return {
+    label,
+    kind,
+    onclick: typeof action.onclick === "function" ? (
+      /** @type {(event: MouseEvent) => void} */
+      action.onclick
+    ) : null
+  };
+}
+function resolveLeading(value) {
+  if (isNode(value)) return (
+    /** @type {Node} */
+    value
+  );
+  if (value && typeof value === "object" && typeof value.toElement === "function") {
+    const element = value.toElement();
+    return isNode(element) ? element : null;
+  }
+  return null;
+}
+function returnFocus(entry) {
+  const root = entry.node.getRootNode?.();
+  const active = root?.activeElement ?? globalThis.document?.activeElement;
+  if (!active || !entry.node.contains(active)) return;
+  const target = entry.returnFocus;
+  entry.returnFocus = null;
+  if (target?.isConnected && typeof target.focus === "function") target.focus({ preventScroll: true });
+}
 function normalizeLimit(value) {
   const limit = Number(value);
   return Number.isInteger(limit) && limit > 0 ? limit : 5;
@@ -13103,7 +14665,7 @@ function snapshot2(element) {
 }
 function restore2(element, state) {
   for (const attribute of Array.from(element.attributes)) element.removeAttribute(attribute.name);
-  for (const [name, value] of state.attributes) element.setAttribute(name, value);
+  for (const [name2, value] of state.attributes) element.setAttribute(name2, value);
   element.replaceChildren(...state.children);
 }
 
@@ -13472,7 +15034,7 @@ var Calendar = class extends Component {
     if (!this.el) this.el = root;
     this._createdRoot = createdRoot;
     this._original = this._createdRoot ? null : {
-      attributes: Array.from(root.attributes).map(({ name, value }) => [name, value]),
+      attributes: Array.from(root.attributes).map(({ name: name2, value }) => [name2, value]),
       children: Array.from(root.childNodes)
     };
     this._views = normalizeViews(this.options.views);
@@ -13506,7 +15068,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",
@@ -13682,7 +15244,7 @@ var Calendar = class extends Component {
     super.destroy();
     if (!this._createdRoot && original) {
       for (const attribute of Array.from(this.el.attributes)) this.el.removeAttribute(attribute.name);
-      for (const [name, value] of original.attributes) this.el.setAttribute(name, value);
+      for (const [name2, value] of original.attributes) this.el.setAttribute(name2, value);
       this.el.replaceChildren(...original.children);
     }
   }
@@ -13724,8 +15286,8 @@ var Calendar = class extends Component {
     });
     this._range = range;
     this.refs.heading.textContent = this._rangeTitle(range);
-    for (const button of this.refs.views.querySelectorAll("[data-view]")) {
-      button.setAttribute("aria-pressed", String(button.dataset.view === this._view));
+    for (const button2 of this.refs.views.querySelectorAll("[data-view]")) {
+      button2.setAttribute("aria-pressed", String(button2.dataset.view === this._view));
     }
     const content = this._view === "agenda" ? this._renderAgenda(range) : this._view === "day" || this._view === "week" ? this._renderTimeGrid(range) : this._view === "month" ? this._renderMonth(range) : this._renderYear(range);
     this.refs.body.replaceChildren(content);
@@ -13954,7 +15516,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" })));
       }
@@ -14024,7 +15586,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())));
       }
@@ -14049,7 +15611,7 @@ var Calendar = class extends Component {
       },
       style: event.color ? { "--zx-calendar-event-color": event.color } : null
     });
-    const button = h("button", {
+    const button2 = h("button", {
       type: "button",
       class: "zx-calendar__event-action",
       dataset: { eventAction: "activate", eventId: key },
@@ -14057,15 +15619,15 @@ var Calendar = class extends Component {
       disabled: this.options.disabled
     });
     const custom = typeof this.options.renderEvent === "function" ? this.options.renderEvent(cloneCalendarEvent(event)) : null;
-    if (custom instanceof Node) button.append(custom);
-    else if (typeof custom === "string") button.append(document.createTextNode(custom));
+    if (custom instanceof Node) button2.append(custom);
+    else if (typeof custom === "string") button2.append(document.createTextNode(custom));
     else {
       const time = h("span", { class: "zx-calendar__event-time" }, this._eventTime(event, context.day));
       const title = h("span", { class: "zx-calendar__event-title" }, event.title);
-      button.append(time, title);
-      if (event.location) button.append(h("span", { class: "zx-calendar__event-location" }, event.location));
+      button2.append(time, title);
+      if (event.location) button2.append(h("span", { class: "zx-calendar__event-location" }, event.location));
     }
-    wrapper.append(button);
+    wrapper.append(button2);
     if (context.resizable && this._canResize(event)) {
       wrapper.append(h("button", {
         type: "button",
@@ -14755,6 +16317,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");
@@ -14867,7 +16454,7 @@ function cssEscape(value) {
 var Fieldset = class extends Component {
   static cssName = "fieldset";
   /** @type {FieldsetOptions} */
-  static defaults = { title: "", columns: 1, fields: {} };
+  static defaults = { title: "", columns: 1, fields: {}, idPrefix: null };
   /** @returns {HTMLElement} */
   render() {
     const root = (
@@ -14879,6 +16466,7 @@ var Fieldset = class extends Component {
     this._origins = /* @__PURE__ */ new Map();
     this._fieldIdAttributes = /* @__PURE__ */ new Map();
     this._ownedNodes = [];
+    this._idPrefix = this.options.idPrefix ? String(this.options.idPrefix) : uid("zx-fieldset");
     this._columnAttribute = root.getAttribute("data-columns");
     const columns = [1, 2, 3].includes(Number(this.options.columns)) ? Number(this.options.columns) : 1;
     root.dataset.columns = String(columns);
@@ -14895,7 +16483,9 @@ var Fieldset = class extends Component {
     return root;
   }
   /**
-   * Adds a field from options, an existing field, an element, or a component.
+   * Adds a field from options, an existing field, an element, or a component. The key becomes the
+   * field's `name` and its `data-field-id`; the control's DOM id is `<idPrefix>-<key>`, unless the
+   * field options give an `id` of their own that differs from the key.
    * @param {string} id Logical field identifier.
    * @param {FieldOptions|Field|Element|Component} field Field source.
    * @returns {Field}
@@ -14910,7 +16500,8 @@ var Fieldset = class extends Component {
     } else if (isElement(field) || field instanceof Component) {
       const source = field;
       instance = new Field(null, {
-        id: key,
+        id: this._controlId(key),
+        name: key,
         type: "custom",
         label: key,
         value: readExternalValue(source),
@@ -14920,7 +16511,12 @@ var Fieldset = class extends Component {
       owned = true;
     } else {
       const options = field && typeof field === "object" ? field : {};
-      instance = new Field(null, { ...options, id: options.id ?? key });
+      const explicit = options.id != null && String(options.id) !== "" && String(options.id) !== key;
+      instance = new Field(null, {
+        ...options,
+        id: explicit ? String(options.id) : this._controlId(key),
+        name: options.name ?? key
+      });
       owned = true;
     }
     if (!owned) {
@@ -15050,6 +16646,14 @@ var Fieldset = class extends Component {
     for (const field of this._fields.values()) field.clearHighlight();
     return this;
   }
+  /**
+   * The DOM id generated for a field key: unique per instance unless `idPrefix` was given.
+   * @param {string} key Field key.
+   * @returns {string}
+   */
+  _controlId(key) {
+    return `${this._idPrefix}-${key.trim().replace(/\s+/g, "-")}`;
+  }
   /** @param {Field} field @returns {void} */
   _releaseField(field) {
     const fieldId = this._fieldIdAttributes.get(field);
@@ -15082,7 +16686,7 @@ function externalAdapter(source) {
   const el = isElement(source) ? source : source.toElement();
   const parent = el.parentNode;
   const next = el.nextSibling;
-  const attributes = new Map(["id", "aria-labelledby", "aria-describedby", "aria-disabled", "aria-invalid"].map((name) => [name, el.getAttribute(name)]));
+  const attributes = new Map(["id", "aria-labelledby", "aria-describedby", "aria-disabled", "aria-invalid"].map((name2) => [name2, el.getAttribute(name2)]));
   const originalDisabled = "disabled" in el ? el.disabled : void 0;
   const originalValue = "value" in el ? el.value : void 0;
   return {
@@ -15108,9 +16712,9 @@ function externalAdapter(source) {
       else el.setAttribute("aria-disabled", String(disabled));
     },
     destroy: () => {
-      for (const [name, value] of attributes) {
-        if (value === null) el.removeAttribute(name);
-        else el.setAttribute(name, value);
+      for (const [name2, value] of attributes) {
+        if (value === null) el.removeAttribute(name2);
+        else el.setAttribute(name2, value);
       }
       if (originalDisabled !== void 0) el.disabled = originalDisabled;
       if (originalValue !== void 0) el.value = originalValue;
@@ -15138,6 +16742,7 @@ var Form = class extends Component {
     fieldsets: [],
     actions: [],
     novalidate: true,
+    idPrefix: null,
     msg: {
       "form.required": "This field is required.",
       "form.int": "Enter a whole number.",
@@ -15154,6 +16759,7 @@ var Form = class extends Component {
     this._ownedFieldsets = /* @__PURE__ */ new Set();
     this._origins = /* @__PURE__ */ new Map();
     this._ownedNodes = [];
+    this._idPrefix = this.options.idPrefix ? String(this.options.idPrefix) : uid("zx-form");
     this._novalidateAttribute = root.getAttribute("novalidate");
     root.toggleAttribute("novalidate", Boolean(this.options.novalidate));
     this._body = h("div", { class: "zx-form__body" });
@@ -15175,13 +16781,14 @@ var Form = class extends Component {
     return root;
   }
   /**
-   * Adds an existing fieldset or constructs one from options.
+   * Adds an existing fieldset or constructs one from options. A constructed fieldset generates its
+   * field ids from the form's `idPrefix` unless its options carry their own.
    * @param {Fieldset|import('../fieldset/fieldset.js').FieldsetOptions} fieldset Fieldset source.
    * @returns {Fieldset}
    */
   addFieldset(fieldset) {
     const owned = !(fieldset instanceof Fieldset);
-    const instance = owned ? new Fieldset(null, fieldset ?? {}) : fieldset;
+    const instance = owned ? new Fieldset(null, { ...fieldset ?? {}, idPrefix: fieldset?.idPrefix ?? this._idPrefix }) : fieldset;
     if (this._fieldsets.includes(instance)) return instance;
     if (owned) this._ownedFieldsets.add(instance);
     else this._origins.set(instance, { parent: instance.el.parentNode, next: instance.el.nextSibling });
@@ -15339,9 +16946,9 @@ var Form = class extends Component {
   }
   /** @param {Event} event @returns {void} */
   _handleAction(event) {
-    const button = event.target instanceof Element ? event.target.closest("[data-action-index]") : null;
-    if (!button || !this._actions.contains(button)) return;
-    const action = this._actionDescriptors[Number(button.dataset.actionIndex)];
+    const button2 = event.target instanceof Element ? event.target.closest("[data-action-index]") : null;
+    if (!button2 || !this._actions.contains(button2)) return;
+    const action = this._actionDescriptors[Number(button2.dataset.actionIndex)];
     const callback = action?.onClick ?? action?.onclick ?? action?.handler;
     if (typeof callback === "function") callback(event, this);
   }
@@ -15373,6 +16980,7 @@ function isEmpty(value) {
 function registerFieldAdapters() {
   registerSelectFieldAdapter();
   registerChecklistFieldAdapter();
+  registerCodeEditorFieldAdapter();
   registerDateboxFieldAdapters();
   registerDatePickerFieldAdapters();
   registerDateRangeFieldAdapter();
@@ -15433,16 +17041,16 @@ function deriveLocale(client) {
   return client.locale ?? client.language ?? client.config?.locale ?? client.metadata?.locale ?? null;
 }
 function operationFor(client, action, resource) {
-  const name = String(resource ?? "").trim();
-  if (!name) throw new TypeError("ZeyOS resource must not be empty");
-  const resourceOperations = typeof client.schema?.operations === "function" ? client.schema.operations(name) : [];
+  const name2 = String(resource ?? "").trim();
+  if (!name2) throw new TypeError("ZeyOS resource must not be empty");
+  const resourceOperations = typeof client.schema?.operations === "function" ? client.schema.operations(name2) : [];
   if (Array.isArray(resourceOperations) && resourceOperations.length) {
     const exactResourceMatches = resourceOperations.filter((operation) => typeof operation === "string" && operation.toLowerCase().startsWith(action)).sort((left, right) => left.length - right.length);
     if (exactResourceMatches.length) return exactResourceMatches[0];
   }
   const known = Array.isArray(resourceOperations) && resourceOperations.length ? resourceOperations : typeof client.schema?.operationIds === "function" ? client.schema.operationIds() : Object.keys(client.api);
-  if (known.includes(name) && name.toLowerCase().startsWith(action)) return name;
-  const normalizedResource = normalizeResource(name);
+  if (known.includes(name2) && name2.toLowerCase().startsWith(action)) return name2;
+  const normalizedResource = normalizeResource(name2);
   const singular = singularize(normalizedResource);
   const matches = known.filter((operation) => {
     if (typeof operation !== "string" || !operation.toLowerCase().startsWith(action)) return false;
@@ -15450,11 +17058,11 @@ function operationFor(client, action, resource) {
     return suffix === normalizedResource || suffix === singular || singularize(suffix) === singular;
   });
   if (matches.length) return matches.sort((left, right) => left.length - right.length)[0];
-  const candidates = action === "list" ? [`list${pascalCase(name)}`] : [`${action}${pascalCase(singularizeName(name))}`, `${action}${pascalCase(name)}`];
+  const candidates = action === "list" ? [`list${pascalCase(name2)}`] : [`${action}${pascalCase(singularizeName(name2))}`, `${action}${pascalCase(name2)}`];
   const apiKeys = new Set(Object.keys(client.api));
   const fallback = candidates.find((candidate) => apiKeys.has(candidate));
   if (fallback) return fallback;
-  throw new RangeError(`No ${action} operation found for ZeyOS resource "${name}"`);
+  throw new RangeError(`No ${action} operation found for ZeyOS resource "${name2}"`);
 }
 function isRecord(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
@@ -15590,31 +17198,31 @@ var moduleAliases = Object.freeze({
 });
 var glyphColors = Object.freeze({ light: "#ffffff", dark: "#141414" });
 var overrides = /* @__PURE__ */ Object.create(null);
-function normalizeModuleName(name) {
-  const key = String(name ?? "").trim().toLowerCase().replaceAll(/[._\s]+/g, "-");
+function normalizeModuleName(name2) {
+  const key = String(name2 ?? "").trim().toLowerCase().replaceAll(/[._\s]+/g, "-");
   if (!key) return "default";
   if (Object.hasOwn(overrides, key) || Object.hasOwn(zeyosModules, key)) return key;
   const alias = moduleAliases[key];
   if (alias) return alias;
   return "default";
 }
-function moduleInfo(name) {
-  const key = normalizeModuleName(name);
+function moduleInfo(name2) {
+  const key = normalizeModuleName(name2);
   return overrides[key] ?? zeyosModules[key] ?? zeyosModules.default;
 }
-function moduleColor(name) {
-  return moduleInfo(name).color;
+function moduleColor(name2) {
+  return moduleInfo(name2).color;
 }
-function moduleIconName(name, { standard = false } = {}) {
-  const info = moduleInfo(name);
+function moduleIconName(name2, { standard = false } = {}) {
+  const info = moduleInfo(name2);
   return standard ? info.fa : info.icon;
 }
 function moduleKeys() {
   return [.../* @__PURE__ */ new Set([...Object.keys(zeyosModules), ...Object.keys(overrides)])].sort();
 }
 function registerModules(modules) {
-  for (const [name, value] of Object.entries(modules)) {
-    const key = String(name).trim().toLowerCase().replaceAll(/[._\s]+/g, "-");
+  for (const [name2, value] of Object.entries(modules)) {
+    const key = String(name2).trim().toLowerCase().replaceAll(/[._\s]+/g, "-");
     const patch = typeof value === "string" ? { color: value } : value;
     const base = overrides[key] ?? zeyosModules[key] ?? zeyosModules.default;
     overrides[key] = Object.freeze({
@@ -15651,12 +17259,12 @@ var ZEYOS_ICON_KIT = "https://kit.fontawesome.com/ae8320b210.js";
 function useZeyosIcons(options = {}) {
   return loadFontAwesome({ kit: ZEYOS_ICON_KIT, ...options });
 }
-function moduleIcon(name, options = {}) {
+function moduleIcon(name2, options = {}) {
   const { standard = false, ...rest } = options;
-  const info = moduleInfo(name);
+  const info = moduleInfo(name2);
   return icon(standard ? `fa:${info.fa}` : `kit:${info.icon}`, rest);
 }
-function moduleChip(name, options = {}) {
+function moduleChip(name2, options = {}) {
   const {
     size = 24,
     iconSize = "52%",
@@ -15667,13 +17275,13 @@ function moduleChip(name, options = {}) {
     badge = null,
     selected = false
   } = options;
-  const key = normalizeModuleName(name);
-  const info = moduleInfo(name);
+  const key = normalizeModuleName(name2);
+  const info = moduleInfo(name2);
   const background = isCssColor(color) ? color : info.color;
   const chip = appIcon({
     // AppIcon owns glyph sizing. Keep the provider glyph at 1em so the percentage is not applied
     // once to the wrapper and a second time to a Font Awesome <i>.
-    icon: options.icon ?? moduleIcon(name, { size: "1em", standard }),
+    icon: options.icon ?? moduleIcon(name2, { size: "1em", standard }),
     size,
     iconSize,
     color: background,
@@ -15691,8 +17299,8 @@ function moduleChip(name, options = {}) {
   if (title) chip.title = info.label;
   return chip;
 }
-function zeyosAppIcon(name, options = {}) {
-  return moduleChip(name, { shape: "circle", ...options });
+function zeyosAppIcon(name2, options = {}) {
+  return moduleChip(name2, { shape: "circle", ...options });
 }
 
 // src/zeyos/launcher.js
@@ -16193,8 +17801,12 @@ function buildZeyosFormConfig(client, resource, opts = {}) {
   const fieldMeta = resolveFields(client, resource, opts);
   const fields = {};
   const entityFields = [];
+  const dateKinds = /* @__PURE__ */ new Map();
   for (const meta of fieldMeta) {
     const descriptor = fieldToZxField(meta);
+    if (descriptor.type === "date" || descriptor.type === "datetime") {
+      dateKinds.set(String(meta.id), descriptor.type);
+    }
     const referencedResource2 = descriptor.type === "zxselect" && typeof descriptor.props?.entity === "string" ? descriptor.props.entity : null;
     if (referencedResource2) {
       entityFields.push({ id: String(meta.id), resource: referencedResource2 });
@@ -16218,16 +17830,20 @@ function buildZeyosFormConfig(client, resource, opts = {}) {
         fields
       }]
     },
-    mapFromRecord: (record) => mapFromRecord(record, fieldMeta),
-    mapToRecord: (values) => mapToRecord(values, fieldMeta)
+    mapFromRecord: (record) => mapFromRecord(record, fieldMeta, dateKinds),
+    mapToRecord: (values) => mapToRecord(values, fieldMeta, dateKinds)
   };
 }
 function zeyosForm(client, resource, opts = {}) {
   if (opts.onSaved != null && typeof opts.onSaved !== "function") {
     throw new TypeError("zeyosForm onSaved must be a function");
   }
+  const notify = opts.notify !== false;
   const config2 = buildZeyosFormConfig(client, resource, opts);
-  const facade = connect(client);
+  const toastScope = () => opts.scope ?? form.el;
+  const facade = connect(client, {
+    onError: (error) => notify ? Message.error(errorMessage(error), { scope: toastScope() }) : void 0
+  });
   const form = new Form(null, config2.formOptions);
   let currentId = opts.value?.ID ?? opts.id ?? null;
   let destroyed = false;
@@ -16257,6 +17873,7 @@ function zeyosForm(client, resource, opts = {}) {
     if (destroyed) return Promise.reject(new Error("Cannot save a destroyed ZeyOS form"));
     if (savePending) return savePending;
     if (!form.submit()) return Promise.resolve(null);
+    const host = notify ? overlayHost(toastScope()) : null;
     savePending = (async () => {
       let payload;
       try {
@@ -16277,7 +17894,7 @@ function zeyosForm(client, resource, opts = {}) {
           throw error;
         }
       }
-      Message.success(`${recordLabel(record, resource)} saved successfully.`);
+      if (host) Message.success(`${recordLabel(record, resource)} saved successfully.`, { scope: host });
       return record;
     })().finally(() => {
       savePending = null;
@@ -16298,25 +17915,39 @@ function zeyosForm(client, resource, opts = {}) {
     }
   };
 }
-function mapFromRecord(record, meta) {
+function mapFromRecord(record, meta, dateKinds) {
   const values = {};
   for (const field of meta) {
     const id = String(field.id);
     const value = record[id];
-    values[id] = isDateField(field) && value != null && value !== "" ? unixSecondsToDate(
+    const kind = dateKinds.get(id);
+    if (!kind || value == null || value === "") values[id] = value;
+    else if (kind === "date") values[id] = unixSecondsToCalendarDay(
+      /** @type {number|string} */
+      value,
+      field.timeZone
+    );
+    else values[id] = unixSecondsToDate(
       /** @type {number|string} */
       value
-    ) : value;
+    );
   }
   return values;
 }
-function mapToRecord(values, meta) {
+function mapToRecord(values, meta, dateKinds) {
   const record = {};
   for (const field of meta) {
     const id = String(field.id);
     let value = values[id];
-    if (isDateField(field)) {
-      value = value == null || value === "" ? null : dateToUnixSeconds(
+    const kind = dateKinds.get(id);
+    if (kind) {
+      if (value == null || value === "") value = null;
+      else if (kind === "date") value = calendarDayToUnixSeconds(
+        /** @type {Date} */
+        value,
+        field.timeZone
+      );
+      else value = dateToUnixSeconds(
         /** @type {Date} */
         value
       );
@@ -16328,10 +17959,6 @@ function mapToRecord(values, meta) {
   }
   return record;
 }
-function isDateField(meta) {
-  const descriptor = fieldToZxField(meta);
-  return descriptor.type === "date" || descriptor.type === "datetime";
-}
 function hasEnum(meta) {
   return meta.enums != null || meta.enum != null;
 }
@@ -16361,10 +17988,34 @@ function recordLabel(record, resource) {
 }
 
 // src/zeyos/table.js
+var TABLE_OPTION_KEYS = [
+  "variant",
+  "zebra",
+  "stickyHeader",
+  "responsive",
+  "growing",
+  "emptyText",
+  "rowClass",
+  "rowKind",
+  "rowKinds",
+  "columnVisibility",
+  "columnReorder",
+  "hiddenColumns",
+  "onrowdblclick",
+  "onsort",
+  "onselectionchange",
+  "ondatachange",
+  "onstackedchange",
+  "ongrow",
+  "oncolumnvisibilitychange",
+  "oncolumnorderchange"
+];
 function buildZeyosTableConfig(client, resource, opts = {}) {
   const fieldMeta = resolveFields(client, resource, {
     fields: opts.fields,
-    labels: opts.labels
+    labels: opts.labels,
+    formats: opts.formats,
+    timeZone: opts.timeZone
   });
   const projection = {};
   const columns = fieldMeta.map((sourceMeta) => {
@@ -16388,11 +18039,16 @@ function buildZeyosTableConfig(client, resource, opts = {}) {
   if (typeof rowId === "string" && !Object.prototype.hasOwnProperty.call(projection, rowId)) {
     projection[rowId] = rowId;
   }
+  const passed = {};
+  for (const key of TABLE_OPTION_KEYS) {
+    if (opts[key] !== void 0) passed[key] = opts[key];
+  }
   return {
     fieldMeta,
     columns,
     projection,
     tableOptions: {
+      ...passed,
       columns,
       data: [],
       rowId,
@@ -16400,7 +18056,7 @@ function buildZeyosTableConfig(client, resource, opts = {}) {
       sortMode: "server",
       selectable: opts.selectable ?? false,
       height: opts.height ?? null,
-      onrowclick: typeof opts.onRowClick === "function" ? (event) => opts.onRowClick(event.detail.row, event) : void 0
+      onrowclick: rowClickListener(opts)
     }
   };
 }
@@ -16486,6 +18142,15 @@ function zeyosTable(client, resource, opts = {}) {
   });
   return binding;
 }
+function rowClickListener(opts) {
+  const listener = typeof opts.onrowclick === "function" ? opts.onrowclick : null;
+  const callback = typeof opts.onRowClick === "function" ? opts.onRowClick : null;
+  if (!listener && !callback) return void 0;
+  return (event) => {
+    listener?.(event);
+    callback?.(event.detail.row, event);
+  };
+}
 function referencedResourceFor(meta) {
   for (const value of [meta.entity, meta.fk, meta.relation, meta.reference, meta.references]) {
     if (typeof value === "string" && value) return value;
@@ -16551,8 +18216,8 @@ function zeyosAppointmentToEvent(record) {
   const end = unixSecondsToDate(record.dateto ?? record.datefrom);
   if (!(start instanceof Date) || !(end instanceof Date)) throw new TypeError("ZeyOS appointment requires datefrom and dateto");
   const association = String(record.assoc_name ?? "").trim();
-  const name = String(record.name ?? "").trim() || "Untitled appointment";
-  const title = record.entity && association ? `${association}: ${name}` : name;
+  const name2 = String(record.name ?? "").trim() || "Untitled appointment";
+  const title = record.entity && association ? `${association}: ${name2}` : name2;
   const allDay = record.allDay != null ? Boolean(record.allDay) : isMidnight(start) && isMidnight(end) && calendarDayDifference(start, end) >= 1;
   return {
     id: String(record.occurrenceid ?? `${baseId}@${record.datefrom}`),
@@ -16621,8 +18286,8 @@ var FORBIDDEN_STATE_KEYS = /* @__PURE__ */ new Set([
 ]);
 var SavedViewDuplicateNameError = class extends Error {
   /** @param {string} name Duplicate display name. */
-  constructor(name) {
-    super(`A saved view named "${name}" already exists`);
+  constructor(name2) {
+    super(`A saved view named "${name2}" already exists`);
     this.name = "SavedViewDuplicateNameError";
   }
 };
@@ -16713,15 +18378,15 @@ var SavedViewRegistry = class {
    */
   async save(input, options = {}) {
     return this._mutate(async (document2) => {
-      const name = normalizeName(input?.name);
+      const name2 = normalizeName(input?.name);
       const policy = normalizeDuplicatePolicy(options.onDuplicate ?? this.options.duplicateNames);
       const requestedId = input?.id == null ? null : normalizeId(input.id);
       const byId = requestedId ? document2.views.find((entry2) => entry2.id === requestedId) ?? null : null;
-      const byName = document2.views.find((entry2) => nameKey(entry2.name) === nameKey(name)) ?? null;
+      const byName = document2.views.find((entry2) => nameKey(entry2.name) === nameKey(name2)) ?? null;
       if (byId && byName && byId !== byName && policy === "reject") {
-        throw new SavedViewDuplicateNameError(name);
+        throw new SavedViewDuplicateNameError(name2);
       }
-      if (!byId && byName && policy === "reject") throw new SavedViewDuplicateNameError(name);
+      if (!byId && byName && policy === "reject") throw new SavedViewDuplicateNameError(name2);
       const existing = byId ?? (policy === "replace" ? byName : null);
       const replaced = policy === "replace" && byId && byName !== byId ? byName : null;
       const now = this._now();
@@ -16731,8 +18396,8 @@ var SavedViewRegistry = class {
       const filters = Object.prototype.hasOwnProperty.call(input ?? {}, "filters") ? normalizeFilters(input.filters) : existing ? cloneJsonObject(existing.filters, "Saved view filters") : {};
       const search = Object.prototype.hasOwnProperty.call(input ?? {}, "search") ? normalizeSearch(input.search) : existing?.search ?? "";
       const createdAt = existing?.createdAt ?? now;
-      const id = existing?.id ?? requestedId ?? this._createId(document2, { name, type, createdAt });
-      const entry = { id, name, type, state, filters, search, createdAt, updatedAt: now };
+      const id = existing?.id ?? requestedId ?? this._createId(document2, { name: name2, type, createdAt });
+      const entry = { id, name: name2, type, state, filters, search, createdAt, updatedAt: now };
       const views = document2.views.filter((candidate) => candidate !== existing && candidate !== replaced && candidate.id !== id);
       views.push(entry);
       document2.views = sortEntries(views);
@@ -16748,11 +18413,11 @@ var SavedViewRegistry = class {
    * @param {{onDuplicate?:SavedViewDuplicatePolicy}} [options={}] Duplicate policy.
    * @returns {Promise<SavedViewEntry|null>} Updated entry, or null when absent.
    */
-  async rename(idOrName, name, options = {}) {
+  async rename(idOrName, name2, options = {}) {
     return this._mutate(async (document2) => {
       const entry = resolveEntry(document2, idOrName);
       if (!entry) return { changed: false, result: null };
-      const nextName = normalizeName(name);
+      const nextName = normalizeName(name2);
       if (entry.name === nextName) return { changed: false, result: entry };
       const duplicate = document2.views.find((candidate) => candidate !== entry && nameKey(candidate.name) === nameKey(nextName)) ?? null;
       const policy = normalizeDuplicatePolicy(options.onDuplicate ?? this.options.duplicateNames);
@@ -17015,7 +18680,7 @@ function normalizePersistedEntry(value, index, scope2) {
     /** @type {Record<string,unknown>} */
     value
   );
-  const name = normalizeName(entry.name);
+  const name2 = normalizeName(entry.name);
   const type = normalizeType2(entry.type);
   const state = normalizeRecordViewState(entry.state ?? {});
   const filters = normalizeFilters(entry.filters ?? {});
@@ -17023,8 +18688,8 @@ function normalizePersistedEntry(value, index, scope2) {
   const createdAt = normalizeTimestamp(entry.createdAt);
   const requestedUpdated = normalizeTimestamp(entry.updatedAt ?? createdAt);
   const updatedAt = requestedUpdated < createdAt ? createdAt : requestedUpdated;
-  const id = entry.id == null || String(entry.id).trim() === "" ? `legacy-${hashString(`${scopeKey(scope2)}\0${name}\0${type}\0${index}`)}` : normalizeId(entry.id);
-  return { id, name, type, state, filters, search, createdAt, updatedAt };
+  const id = entry.id == null || String(entry.id).trim() === "" ? `legacy-${hashString(`${scopeKey(scope2)}\0${name2}\0${type}\0${index}`)}` : normalizeId(entry.id);
+  return { id, name: name2, type, state, filters, search, createdAt, updatedAt };
 }
 function deduplicateEntries(entries) {
   const ranked = [...entries].sort((left, right) => compareText(right.updatedAt, left.updatedAt) || compareText(left.id, right.id));
@@ -17112,10 +18777,10 @@ function normalizeType2(value) {
 }
 function normalizeName(value) {
   if (typeof value !== "string") throw new TypeError("Saved view name must be a string");
-  const name = value.normalize("NFKC").trim().replace(/\s+/g, " ");
-  if (!name) throw new TypeError("Saved view name cannot be empty");
-  if (name.length > 160) throw new RangeError("Saved view name cannot exceed 160 characters");
-  return name;
+  const name2 = value.normalize("NFKC").trim().replace(/\s+/g, " ");
+  if (!name2) throw new TypeError("Saved view name cannot be empty");
+  if (name2.length > 160) throw new RangeError("Saved view name cannot exceed 160 characters");
+  return name2;
 }
 function nameKey(value) {
   return value.normalize("NFKC").toLocaleLowerCase("en-US");
@@ -17284,6 +18949,8 @@ function buildZeyosViewConfig(client, resource, opts = {}) {
   const table = buildZeyosTableConfig(client, resource, {
     fields: requested,
     labels: opts.labels,
+    formats: opts.formats,
+    timeZone: opts.timeZone,
     rowId: opts.recordId ?? "ID",
     sort: opts.sort ?? null
   });
@@ -17616,10 +19283,10 @@ function presentationType(View) {
       cssName
     );
   }
-  const name = String(View.name ?? "").toLowerCase().replace(/view$/, "");
-  return ["table", "card", "kanban"].includes(name) ? (
+  const name2 = String(View.name ?? "").toLowerCase().replace(/view$/, "");
+  return ["table", "card", "kanban"].includes(name2) ? (
     /** @type {'table'|'card'|'kanban'} */
-    name
+    name2
   ) : null;
 }
 function normalizePresentationType(value) {
@@ -17712,7 +19379,7 @@ function findReservedDocument(response, recordName) {
   if (!Array.isArray(response) || !Array.isArray(response[0]) || !Array.isArray(response[1])) {
     return null;
   }
-  const index = response[0].findIndex((name) => String(name) === recordName);
+  const index = response[0].findIndex((name2) => String(name2) === recordName);
   return index < 0 ? null : response[1][index];
 }
 function normalizeNonEmpty(value, fallback, label) {
@@ -17757,6 +19424,7 @@ export {
   buildZeyosLauncherConfig,
   buildZeyosSelectConfig,
   buildZeyosViewConfig,
+  calendarDayToUnixSeconds,
   calendarEventToZeyosPatch,
   connect,
   createLegacySavedViewTransport,
@@ -17784,6 +19452,7 @@ export {
   registerModules,
   resolveFields,
   tableSortToQuery,
+  unixSecondsToCalendarDay,
   unixSecondsToDate,
   useZeyosIcons,
   zeyosActiveIdentifier,
@@ -17799,3 +19468,51 @@ export {
   zeyosTable,
   zeyosView
 };
+/*
+ * @license Lucide 1.53.0 (ISC), including icons derived from Feather (MIT) — notices below.
+ *
+ * The bundled glyphs are Lucide 1.53.0 (https://lucide.dev), outline icons drawn on a 24-unit grid.
+ * Each Lucide icon is stored as one path: its circles, rectangles, lines, and polylines are
+ * rewritten as equivalent path data, which renders identically because every part shares the same
+ * stroke. Where a Zx name differs from the Lucide one, the Lucide name is noted beside the glyph.
+ *
+ * ISC License
+ *
+ * Copyright (c) 2026 Lucide Icons and Contributors
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ *
+ * Lucide icons derived from the Feather project (Lucide's LICENSE lists them) are also covered by:
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2013-present Cole Bemis
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */