@zeyos/zx 3.0.0 → 4.1.0

package/dist/zx.global.js

@@ -21,10 +21,11 @@ var zx = (() => {
   var index_exports = {};
   __export(index_exports, {
     AccountMenu: () => AccountMenu,
-    AppRail: () => AppRail,
+    AppIcon: () => AppIcon,
     AppSidebar: () => AppSidebar,
     Avatar: () => Avatar,
     Breadcrumb: () => Breadcrumb,
+    Card: () => Card,
     Chart: () => Chart,
     ChartJsAdapter: () => ChartJsAdapter,
     CheckButton: () => CheckButton,
@@ -44,6 +45,7 @@ var zx = (() => {
     Field: () => Field,
     FieldUpload: () => FieldUpload,
     Fieldset: () => Fieldset,
+    Filter: () => Filter,
     Finder: () => Finder,
     Form: () => Form,
     Grid: () => Grid,
@@ -84,6 +86,7 @@ var zx = (() => {
     __: () => __,
     addDays: () => addDays,
     addMonths: () => addMonths,
+    appIcon: () => appIcon,
     appendCompact: () => appendCompact,
     appendCompactChild: () => appendCompactChild,
     appendContent: () => appendContent,
@@ -103,6 +106,7 @@ var zx = (() => {
     clampRange: () => clampRange,
     clampSize: () => clampSize,
     cloneChartValue: () => cloneChartValue,
+    cloneFilterAst: () => cloneFilterAst,
     compactElement: () => compactElement,
     configureIcons: () => configureIcons,
     copyButton: () => copyButton,
@@ -113,12 +117,16 @@ var zx = (() => {
     defineElements: () => defineElements,
     describe: () => describe,
     downloadBlob: () => downloadBlob,
+    emptyFilterAst: () => emptyFilterAst,
     emptyState: () => emptyState,
     escapeRegExp: () => escapeRegExp,
     faFamilies: () => faFamilies,
     faIconClasses: () => faIconClasses,
     faNames: () => faNames,
     faStyles: () => faStyles,
+    filterCondition: () => filterCondition,
+    filterGroup: () => filterGroup,
+    filterOperators: () => filterOperators,
     fireCompactEvent: () => fireCompactEvent,
     focusTrap: () => focusTrap,
     formatCurrency: () => formatCurrency,
@@ -158,6 +166,7 @@ var zx = (() => {
     paginationRange: () => paginationRange,
     parseCompactTag: () => parseCompactTag,
     parseDate: () => parseDate,
+    parseFilterAst: () => parseFilterAst,
     parseIconSpec: () => parseIconSpec,
     parseNumber: () => parseNumber,
     parseRangeText: () => parseRangeText,
@@ -169,6 +178,7 @@ var zx = (() => {
     rankLauncherItems: () => rankLauncherItems,
     registerFieldAdapters: () => registerFieldAdapters,
     registerIcons: () => registerIcons,
+    reorderTableRows: () => reorderTableRows,
     resolveElement: () => resolveElement,
     resolveSize: () => resolveSize,
     rovingTabindex: () => rovingTabindex,
@@ -185,6 +195,7 @@ var zx = (() => {
     stack: () => stack,
     stepPrecision: () => stepPrecision,
     storage: () => storage,
+    stringifyFilterAst: () => stringifyFilterAst,
     throttle: () => throttle,
     toArray: () => toArray,
     toCsv: () => toCsv,
@@ -196,6 +207,7 @@ var zx = (() => {
     uniqueBy: () => uniqueBy,
     useBuiltinIcons: () => useBuiltinIcons,
     useFontAwesome: () => useFontAwesome,
+    validateFilterAst: () => validateFilterAst,
     zeyosService: () => zeyosService
   });
 
@@ -274,6 +286,20 @@ var zx = (() => {
     return Boolean(value && typeof value === "object" && /** @type {{nodeType?: unknown}} */
     value.nodeType === 1);
   }
+  function isCssColor(value) {
+    if (typeof value !== "string") return false;
+    const text4 = value.trim();
+    if (!text4 || text4.length > 256 || /[;{}\u0000-\u001f\u007f]/.test(text4) || /(?:url|image|image-set|cross-fade|element|var)\s*\(/i.test(text4)) return false;
+    const supports = globalThis.CSS?.supports;
+    if (typeof supports === "function") {
+      try {
+        return supports.call(globalThis.CSS, "color", text4);
+      } catch {
+        return false;
+      }
+    }
+    return /^(?:#[\da-f]{3,8}|[a-z]+|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\([^;{}]+\))$/i.test(text4);
+  }
   function clamp(n, min, max) {
     return Math.min(max, Math.max(min, n));
   }
@@ -468,6 +494,18 @@ var zx = (() => {
     return element;
   }
   var __ = compactElement;
+  function safeHref(value) {
+    if (typeof value !== "string") return null;
+    const href = value.trim();
+    if (!href) return null;
+    try {
+      const protocol = new URL(href, globalThis.location?.href ?? "https://zx.invalid/").protocol;
+      if (["javascript:", "data:", "vbscript:"].includes(protocol.toLowerCase())) return null;
+    } catch {
+      return null;
+    }
+    return href;
+  }
   function applyCompactProperties(element, properties) {
     for (const name in properties ?? {}) {
       const value = properties[name];
@@ -899,9 +937,9 @@ var zx = (() => {
       let rendered;
       try {
         rendered = h.scope(this.refs, () => this.render());
-      } catch (error) {
+      } catch (error2) {
         this.#abort.abort();
-        throw error;
+        throw error2;
       }
       if (this.#created) {
         const root = isElement(rendered) ? rendered : this.el;
@@ -1192,8 +1230,8 @@ var zx = (() => {
             /** @type {Readonly<FieldOptions>} */
             this.options
           ));
-        } catch (error) {
-          const message = error instanceof Error ? error.message : String(error);
+        } catch (error2) {
+          const message = error2 instanceof Error ? error2.message : String(error2);
           console.warn(`[zx.Field] Adapter "${type}" failed: ${message}`);
           this.adapter = errorAdapter(message, this.controlId);
         }
@@ -5176,8 +5214,8 @@ var zx = (() => {
         return response;
       } catch (caught) {
         if (runId !== this._runId) return null;
-        const error = caught instanceof Error ? caught : new Error(String(caught));
-        if (error.name === "AbortError") {
+        const error2 = caught instanceof Error ? caught : new Error(String(caught));
+        if (error2.name === "AbortError") {
           this._finishAbort();
           return null;
         }
@@ -5186,8 +5224,8 @@ var zx = (() => {
         this._transportController = null;
         this._abort.hidden = true;
         this._setState("error");
-        this._status.textContent = error.message;
-        this.emit("error", { error });
+        this._status.textContent = error2.message;
+        this.emit("error", { error: error2 });
         return null;
       }
     }
@@ -5335,10 +5373,10 @@ var zx = (() => {
       this.emit("abort", {});
     }
     /** @param {Error} error @returns {void} */
-    _selectionError(error) {
+    _selectionError(error2) {
       this._setState("error");
-      this._status.textContent = error.message;
-      this.emit("error", { error });
+      this._status.textContent = error2.message;
+      this.emit("error", { error: error2 });
     }
     /** @returns {void} */
     _renderPreview() {
@@ -5421,9 +5459,9 @@ var zx = (() => {
   }
   function abortError() {
     if (typeof DOMException === "function") return new DOMException("Upload aborted", "AbortError");
-    const error = new Error("Upload aborted");
-    error.name = "AbortError";
-    return error;
+    const error2 = new Error("Upload aborted");
+    error2.name = "AbortError";
+    return error2;
   }
 
   // src/components/field-upload/field-adapter.js
@@ -6549,8 +6587,8 @@ var zx = (() => {
       const shown = this._preview ?? this._value;
       const symbols = this.refs.symbols.querySelectorAll(".zx-rating__symbol");
       symbols.forEach((symbol, index) => {
-        const filled = Math.min(1, Math.max(0, shown - index));
-        symbol.style.setProperty("--zx-rating-fill", `${filled * 100}%`);
+        const filled2 = Math.min(1, Math.max(0, shown - index));
+        symbol.style.setProperty("--zx-rating-fill", `${filled2 * 100}%`);
         symbol.toggleAttribute("data-preview", this._preview !== null);
       });
       this.el.dataset.value = String(shown);
@@ -6818,17 +6856,33 @@ var zx = (() => {
     "priority.high",
     "priority.highest"
   ];
-  var PRIORITY_FALLBACKS = ["Lowest", "Low", "Normal", "High", "Highest"];
+  var PRIORITY_FALLBACKS = ["Lowest", "Low", "Medium", "High", "Highest"];
+  var DEFAULT_STATUSES = Object.freeze([
+    ["backlog", "status.backlog", "Backlog", "dotted", "muted"],
+    ["todo", "status.todo", "Todo", "ring", "neutral"],
+    ["in-progress", "status.inProgress", "In Progress", "progress", "warning"],
+    ["in-review", "status.inReview", "In Review", "review", "info"],
+    ["ready", "status.ready", "Ready to Merge", "ready", "accent"],
+    ["waiting", "status.waiting", "Waiting for feedback", "waiting", "warning"],
+    ["done", "status.done", "Done", "done", "info"],
+    ["canceled", "status.canceled", "Canceled", "canceled", "muted"],
+    ["duplicate", "status.duplicate", "Duplicate", "duplicate", "muted"]
+  ]);
   var Select = class _Select extends Component {
     static cssName = "select";
     /** @type {SelectOptions} */
     static defaults = {
       items: [],
       fixedItems: [],
+      fixedLabel: null,
       valueKey: "ID",
       labelKey: "name",
       renderItem: null,
       renderValue: null,
+      renderValueAdornment: null,
+      renderNone: null,
+      noneLabel: null,
+      actions: [],
       value: null,
       disabled: false,
       placeholder: "",
@@ -6846,6 +6900,7 @@ var zx = (() => {
       this._visibleItems = [];
       this._fixedItems = [];
       this._visibleFixed = [];
+      this._actions = [];
       this._selected = null;
       this._optionEntries = [];
       this._activeIndex = -1;
@@ -6857,8 +6912,7 @@ var zx = (() => {
       this._position = null;
       this._createdRoot = false;
       this._root = null;
-      this._originalChildren = [];
-      this._originalAttributes = /* @__PURE__ */ new Map();
+      this._snapshot = null;
       this._createdRoot = this.el === null;
       const root = (
         /** @type {HTMLElement} */
@@ -6866,10 +6920,7 @@ var zx = (() => {
       );
       this.el = root;
       this._root = root;
-      if (!this._createdRoot) this._originalChildren = Array.from(root.childNodes);
-      this._rememberAttribute(root, "data-state");
-      this._rememberAttribute(root, "data-loading");
-      this._rememberAttribute(root, "aria-disabled");
+      this._snapshot = this._createdRoot ? null : snapshotTarget(root);
       const listId = uid("zx-select-list");
       const input = h("input", {
         ref: "input",
@@ -6884,6 +6935,12 @@ var zx = (() => {
         placeholder: String(this.options.placeholder ?? ""),
         readOnly: !this.options.filter
       });
+      const valueAdornment = h("span", {
+        ref: "valueAdornment",
+        class: "zx-select__value-adornment",
+        ariaHidden: "true",
+        hidden: true
+      });
       const clear = h("button", {
         ref: "clear",
         class: "zx-icon-btn zx-select__clear",
@@ -6909,6 +6966,7 @@ var zx = (() => {
       const control = h(
         "div",
         { ref: "control", class: "zx-select__control" },
+        valueAdornment,
         input,
         clear,
         loading,
@@ -6931,9 +6989,10 @@ var zx = (() => {
       this._visibleItems = this._items.slice();
       this._fixedItems = Array.isArray(this.options.fixedItems) ? this.options.fixedItems.slice() : [];
       this._visibleFixed = this._fixedItems.slice();
+      this._actions = normalizeSelectActions(this.options.actions);
       this._disabled = Boolean(this.options.disabled);
       this._handleTypeahead = typeahead(
-        () => this._optionEntries.filter((entry) => !entry.clear).map((entry) => entry.element),
+        () => this._optionEntries.filter((entry) => !entry.clear && !entry.action).map((entry) => entry.element),
         (_option, index) => {
           if (!this._open) this.open();
           this._setActive(this._itemEntryIndex(index));
@@ -7028,6 +7087,13 @@ var zx = (() => {
       this._position?.update();
       return this;
     }
+    /** Replaces command rows without changing the selected value. @param {SelectAction[]} actions @returns {this} */
+    setActions(actions2) {
+      this._actions = normalizeSelectActions(actions2);
+      this._renderOptions();
+      this._position?.update();
+      return this;
+    }
     /**
      * Restores the configured initial value.
      * @param {{silent?: boolean}} [options={}] Reset behavior.
@@ -7112,24 +7178,109 @@ var zx = (() => {
         value: null,
         items: [],
         renderItem(item) {
+          return priorityContent(item, true);
+        },
+        renderValueAdornment(item) {
+          return priorityIndicator(item.level);
+        }
+      });
+      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 };
+      }));
+      select.set(requestedValue, { silent: true });
+      return select;
+    }
+    /**
+     * Creates a status picker with shape- and color-distinct workflow indicators.
+     * @param {Element|string|null} target Component target.
+     * @param {SelectOptions & {items?: Array<Record<string, any>>}} [options={}] Select overrides and status items.
+     * @returns {Select}
+     */
+    static status(target, options = {}) {
+      const { items = null, value = null, ...rest } = options;
+      const select = new _Select(target, {
+        ...rest,
+        value: null,
+        items: [],
+        renderItem(item) {
+          return statusContent(item);
+        },
+        renderValueAdornment(item) {
+          return statusIndicator(item);
+        }
+      });
+      const statuses = Array.isArray(items) ? items.map(normalizeStatusItem).filter(Boolean) : DEFAULT_STATUSES.map(([ID, key, fallback, indicator, tone], index) => ({
+        ID,
+        name: select._message(key, fallback),
+        indicator,
+        tone,
+        shortcut: String(index + 1)
+      }));
+      select.setItems(statuses);
+      select.set(value, { silent: true });
+      return select;
+    }
+    /**
+     * Creates a rich entity picker with optional Recent choices and a create command.
+     * @param {Element|string|null} target Component target.
+     * @param {SelectOptions & EntitySelectOptions} [options={}] Entity-preset options.
+     * @returns {Select}
+     */
+    static entity(target, options = {}) {
+      const {
+        recent = [],
+        recentLabel = "Recent",
+        create = false,
+        iconKey = "icon",
+        colorKey = "color",
+        subtitleKey = "description",
+        renderIcon = null,
+        fixedItems = [],
+        actions: actions2 = [],
+        renderItem = null,
+        renderValueAdornment = null,
+        ...rest
+      } = options;
+      const visual = (item, selected = false) => {
+        if (typeof renderIcon === "function") return renderIcon(item, { selected });
+        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);
+        return h("span", {
+          class: "zx-select__entity-glyph",
+          style: isCssColor(color) ? { "--zx-select-entity-color": String(color) } : null,
+          ariaHidden: "true"
+        }, icon(value, { size: 14 }));
+      };
+      const createAction = create ? normalizeEntityCreateAction(create) : null;
+      const select = new _Select(target, {
+        ...rest,
+        fixedItems: [...Array.isArray(recent) ? recent : [], ...Array.isArray(fixedItems) ? fixedItems : []],
+        fixedLabel: Array.isArray(recent) && recent.length ? recentLabel : rest.fixedLabel ?? null,
+        actions: [...Array.isArray(actions2) ? actions2 : [], ...createAction ? [createAction] : []],
+        renderItem: renderItem ?? ((item) => {
+          const decoration = visual(item, false);
+          const subtitle = readSelectItem(item, subtitleKey);
+          const copy = h(
+            "span",
+            { class: "zx-select__entity-copy" },
+            h("span", { class: "zx-select__entity-label" }, String(readSelectItem(item, rest.labelKey ?? "name") ?? "")),
+            subtitle == null || subtitle === "" ? null : h("span", { class: "zx-select__entity-subtitle" }, String(subtitle))
+          );
           return h(
             "span",
-            { class: "zx-select__priority" },
-            h("span", {
-              class: "zx-select__priority-icon",
-              dataset: { level: item.level },
-              ariaHidden: "true"
-            }),
-            h("span", {}, String(item.name))
+            { class: "zx-select__entity" },
+            decoration ? h("span", { class: "zx-select__entity-icon", ariaHidden: "true" }, decoration) : null,
+            copy
           );
-        }
+        }),
+        renderValueAdornment: renderValueAdornment ?? ((item) => visual(item, true))
       });
-      select.setItems(PRIORITY_KEYS.map((key, level) => ({
-        ID: level,
-        name: select._message(key, PRIORITY_FALLBACKS[level]),
-        level
-      })));
-      select.set(requestedValue, { silent: true });
+      select.el.dataset.preset = "entity";
       return select;
     }
     /**
@@ -7144,12 +7295,21 @@ var zx = (() => {
      * @returns {Select}
      */
     static permission(target, options = {}) {
-      const { groups = [], value = true, valueKey = "ID", labelKey = "name", ...rest } = options;
+      const {
+        groups = [],
+        value = true,
+        valueKey = "ID",
+        labelKey = "name",
+        filter = "local",
+        ...rest
+      } = options;
       const loader = typeof groups === "function" ? groups : null;
       const shareable = loader ? [] : groups;
       const choices = [{ ID: false, name: "Private" }, { ID: true, name: "Public" }];
       const select = new _Select(target, {
-        filter: loader ?? "local",
+        // An async group loader is the data source and cannot be disconnected by an incidental
+        // `filter` override. Array-backed groups still honor local/disabled filtering.
+        filter: loader ?? filter,
         ...rest,
         value: null,
         items: shareable,
@@ -7173,18 +7333,24 @@ var zx = (() => {
         /** @type {HTMLElement} */
         this.el
       );
-      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);
-        }
-      }
+      if (!this._createdRoot && root) restoreTarget(root, this._snapshot);
       super.destroy();
     }
     /** @param {KeyboardEvent} event @returns {void} */
     _onKeydown(event) {
       if (this._disabled) return;
+      if (this._open && isPrintable(event)) {
+        const shortcut = this._optionEntries.findIndex((entry) => !entry.clear && !entry.action && String(
+          /** @type {Record<string, any>|null} */
+          entry.item?.shortcut ?? ""
+        ) === event.key);
+        if (shortcut >= 0) {
+          event.preventDefault();
+          this._setActive(shortcut);
+          this._chooseEntry(this._optionEntries[shortcut]);
+          return;
+        }
+      }
       if (event.key === "ArrowDown") {
         event.preventDefault();
         if (!this._open) this.open();
@@ -7232,6 +7398,7 @@ var zx = (() => {
         /** @type {HTMLInputElement} */
         this.refs.input.value
       );
+      this._syncValueAdornment();
       if (!this._open) this.open();
       if (this.options.filter === "local") {
         this._visibleFixed = this._matchFixed(query);
@@ -7255,6 +7422,22 @@ var zx = (() => {
     /** @param {SelectOptionEntry|undefined} entry @returns {void} */
     _chooseEntry(entry) {
       if (!entry) return;
+      if (entry.action) {
+        const detail = {
+          id: entry.action.id,
+          action: entry.action,
+          query: (
+            /** @type {HTMLInputElement} */
+            this.refs.input.value
+          ),
+          select: this
+        };
+        const action = this.emit("action", detail);
+        if (!action.defaultPrevented) entry.action.invoke?.(detail);
+        this.close();
+        this.focus();
+        return;
+      }
       this.set(entry.clear ? null : entry.item);
       this.close();
       this.focus();
@@ -7287,14 +7470,19 @@ var zx = (() => {
       list.replaceChildren();
       this._optionEntries = [];
       let lastGroup = /* @__PURE__ */ Symbol("initial-group");
+      const fixed = this._uniqueItems(this._visibleFixed);
+      const items = this._uniqueItems(this._visibleItems, fixed);
       if (this.options.clearable) {
-        this._appendOption(null, true, this.options.placeholder || this._message("select.none", "No selection"));
+        this._appendOption(null, true, this.options.noneLabel ?? this._message("select.none", "No selection"));
       }
-      for (const item of this._visibleFixed) this._appendOption(item, false);
-      if (this._visibleFixed.length > 0 && this._visibleItems.length > 0 && !this.options.groupKey) {
+      if (fixed.length > 0 && this.options.fixedLabel) {
+        list.append(h("div", { class: "zx-select__group", role: "presentation" }, String(this.options.fixedLabel)));
+      }
+      for (const item of fixed) this._appendOption(item, false);
+      if (fixed.length > 0 && items.length > 0 && !this.options.groupKey) {
         list.append(h("div", { class: "zx-select__separator", role: "presentation" }));
       }
-      for (const item of this._visibleItems) {
+      for (const item of items) {
         if (this.options.groupKey) {
           const group = this._read(item, this.options.groupKey);
           if (!Object.is(group, lastGroup)) {
@@ -7307,7 +7495,23 @@ var zx = (() => {
         }
         this._appendOption(item, false);
       }
-      if (this._visibleItems.length === 0 && this._visibleFixed.length === 0 && !this._loading) {
+      if (this._actions.length > 0) {
+        if (fixed.length > 0 || items.length > 0 || this.options.clearable) {
+          list.append(h("div", { class: "zx-select__separator", role: "presentation" }));
+        }
+        let actionGroup = /* @__PURE__ */ Symbol("initial-action-group");
+        for (const action of this._actions) {
+          if (action.group && action.group !== actionGroup) {
+            list.append(h("div", {
+              class: "zx-select__group",
+              role: "presentation"
+            }, action.group));
+            actionGroup = action.group;
+          }
+          this._appendAction(action);
+        }
+      }
+      if (items.length === 0 && fixed.length === 0 && this._actions.length === 0 && !this._loading) {
         list.append(h("div", {
           class: "zx-select__empty",
           role: "status"
@@ -7319,7 +7523,7 @@ var zx = (() => {
     _appendOption(item, clear, label) {
       const selected = clear ? this._selected === null : this._selected !== null && Object.is(this._itemValue(item), this.value);
       const index = this._optionEntries.length;
-      const content = clear ? String(label ?? "") : this._renderItem(item);
+      const content = clear && typeof this.options.renderNone === "function" ? normalizeRenderedContent(this.options.renderNone(String(label ?? ""))) : clear ? String(label ?? "") : this._renderItem(item);
       const option = h("div", {
         class: "zx-select__option",
         id: uid("zx-select-option"),
@@ -7329,16 +7533,37 @@ var zx = (() => {
       }, h("span", { class: "zx-select__option-content" }, content));
       if (selected) option.append(icon("check", { size: 15 }));
       this.refs.list.append(option);
-      this._optionEntries.push({ item, clear, element: option });
+      this._optionEntries.push({ item, clear, action: null, element: option });
+    }
+    /** @param {SelectAction} action @returns {void} */
+    _appendAction(action) {
+      const index = this._optionEntries.length;
+      const visual = selectActionIcon(action.icon);
+      const option = h("div", {
+        class: "zx-select__option zx-select__action",
+        id: uid("zx-select-option"),
+        role: "option",
+        ariaSelected: "false",
+        dataset: { index, kind: "action" }
+      }, h(
+        "span",
+        { class: "zx-select__option-content zx-select__action-content" },
+        visual ? h("span", { class: "zx-select__action-icon", ariaHidden: "true" }, visual) : null,
+        h(
+          "span",
+          { class: "zx-select__action-copy" },
+          h("span", { class: "zx-select__action-label" }, action.label),
+          action.description ? h("span", { class: "zx-select__action-description" }, action.description) : null
+        )
+      ));
+      this.refs.list.append(option);
+      this._optionEntries.push({ item: null, clear: false, action, element: option });
     }
     /** @param {SelectItem|null} item @returns {Node|string} */
     _renderItem(item) {
       if (typeof this.options.renderItem === "function") {
         const rendered = this.options.renderItem(item);
-        return rendered && typeof rendered === "object" && "nodeType" in rendered ? (
-          /** @type {Node} */
-          rendered
-        ) : String(rendered ?? "");
+        return normalizeRenderedContent(rendered);
       }
       return this._itemLabel(item);
     }
@@ -7409,9 +7634,29 @@ var zx = (() => {
         this.refs.input
       );
       input.value = this._selected === null ? "" : typeof this.options.renderValue === "function" ? String(this.options.renderValue(this._selected) ?? "") : this._itemLabel(this._selected);
+      this._syncValueAdornment();
       this.refs.clear.hidden = !this.options.clearable || this._selected === null;
     }
     /** @returns {void} */
+    _syncValueAdornment() {
+      const host = this.refs.valueAdornment;
+      if (!host) return;
+      const selectedLabel = this._selected === null ? "" : typeof this.options.renderValue === "function" ? String(this.options.renderValue(this._selected) ?? "") : this._itemLabel(this._selected);
+      const query = String(
+        /** @type {HTMLInputElement} */
+        this.refs.input?.value ?? ""
+      );
+      if (this._selected === null || typeof this.options.renderValueAdornment !== "function" || Boolean(this.options.filter && query !== selectedLabel)) {
+        host.replaceChildren();
+        host.hidden = true;
+        return;
+      }
+      const rendered = this.options.renderValueAdornment(this._selected);
+      const content = normalizeRenderedContent(rendered);
+      host.replaceChildren(content instanceof Node ? content : document.createTextNode(content));
+      host.hidden = rendered == null || typeof content === "string" && content === "";
+    }
+    /** @returns {void} */
     _syncDisabled() {
       const input = (
         /** @type {HTMLInputElement} */
@@ -7467,6 +7712,16 @@ var zx = (() => {
     _matchFixed(query) {
       return matchItems(this._fixedItems, query, this._searchKeys());
     }
+    /** De-duplicates choices by public value while preserving caller order. @param {SelectItem[]} items @param {SelectItem[]} [excluded=[]] @returns {SelectItem[]} */
+    _uniqueItems(items, excluded = []) {
+      const values = excluded.map((item) => this._itemValue(item));
+      return items.filter((item) => {
+        const value = this._itemValue(item);
+        if (values.some((candidate) => Object.is(candidate, value))) return false;
+        values.push(value);
+        return true;
+      });
+    }
     /** @returns {number} */
     _selectedEntryIndex() {
       if (this._selected === null) return this.options.clearable ? 0 : -1;
@@ -7478,16 +7733,104 @@ var zx = (() => {
     _itemEntryIndex(itemIndex) {
       return itemIndex + (this.options.clearable ? 1 : 0);
     }
-    /** @param {string} name @returns {void} */
-    _rememberAttribute(element, name) {
-      this._originalAttributes.set(name, element.getAttribute(name));
-    }
     /** @param {string} key @param {string} fallback @returns {string} */
     _message(key, fallback) {
       const message = this.msg(key);
       return message === key ? fallback : message;
     }
   };
+  function readSelectItem(item, reader) {
+    if (typeof reader === "function") return reader(item);
+    if (item !== null && typeof item === "object" && typeof reader === "string") return item[reader];
+    return null;
+  }
+  function normalizeEntityCreateAction(value) {
+    const descriptor = value === true ? {} : value;
+    return {
+      id: descriptor.id ?? "create",
+      label: descriptor.label ?? "Create new\u2026",
+      description: descriptor.description,
+      group: descriptor.group ?? "New",
+      icon: descriptor.icon ?? "plus",
+      invoke: descriptor.invoke
+    };
+  }
+  function normalizeRenderedContent(rendered) {
+    return rendered && typeof rendered === "object" && "nodeType" in rendered ? (
+      /** @type {Node} */
+      rendered
+    ) : String(rendered ?? "");
+  }
+  function normalizeSelectActions(actions2) {
+    if (!Array.isArray(actions2)) return [];
+    return actions2.filter((action) => action && typeof action === "object" && action.id != null && action.label != null).map((action) => ({
+      ...action,
+      label: String(action.label),
+      description: action.description == null ? void 0 : String(action.description),
+      group: action.group == null ? void 0 : String(action.group)
+    }));
+  }
+  function selectActionIcon(visual) {
+    if (typeof visual === "string") return icon(visual);
+    if (visual instanceof Node) return visual.cloneNode(true);
+    return null;
+  }
+  function priorityContent(item, label) {
+    return h(
+      "span",
+      { class: "zx-select__priority" },
+      priorityIndicator(item.level),
+      label ? h("span", {}, String(item.name)) : null
+    );
+  }
+  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) }
+    })));
+  }
+  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",
+      description: input.description == null ? "" : String(input.description),
+      shortcut: input.shortcut == null ? "" : String(input.shortcut)
+    };
+  }
+  function statusContent(item) {
+    return h(
+      "span",
+      { class: "zx-select__status" },
+      statusIndicator(item),
+      h(
+        "span",
+        { class: "zx-select__status-copy" },
+        h("span", { class: "zx-select__status-label" }, String(item.name)),
+        item.description ? h("span", { class: "zx-select__status-description" }, item.description) : null
+      ),
+      item.shortcut ? h("kbd", { class: "zx-select__status-shortcut" }, item.shortcut) : null
+    );
+  }
+  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;
+  }
   function readItem(item, reader) {
     if (typeof reader === "function") return reader(item);
     if (item === null || typeof item !== "object") return item;
@@ -7500,10 +7843,11 @@ var zx = (() => {
   // src/components/select/field-adapter.js
   function registerSelectFieldAdapter() {
     Field.register("zxselect", (field, options) => {
-      const select = field.own(new Select(null, {
-        ...options.props ?? {},
-        value: options.value
-      }));
+      const props = options.props ?? {};
+      const preset = props.preset;
+      const selectOptions = { ...props, value: options.value };
+      delete selectOptions.preset;
+      const select = field.own(preset === "priority" ? Select.priority(null, selectOptions) : preset === "status" ? Select.status(null, selectOptions) : new Select(null, selectOptions));
       field.listen(select.el, "change", (event) => event.stopImmediatePropagation());
       select.on("change", (event) => field.emit("change", { value: event.detail.value }));
       return {
@@ -7887,6 +8231,8 @@ var zx = (() => {
       values: [],
       valueKey: "ID",
       labelKey: "name",
+      iconKey: "icon",
+      colorKey: "color",
       searchKeys: null,
       filter: "local",
       minQuery: 0,
@@ -8227,12 +8573,13 @@ var zx = (() => {
     _renderTags() {
       const tags = this._selected.map((item) => {
         const label = this._labelOf(item);
-        const content = this.options.renderTag ? this.options.renderTag(item) : label;
-        const tag = h(
-          "span",
-          { class: "zx-tag-picker__tag" },
-          h("span", { class: "zx-tag-picker__tag-label" }, content)
-        );
+        const color = 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)) },
+          style: color ? { "--zx-tag-color": color } : null
+        }, content);
         if (!this._readonly && !this._disabled) {
           tag.append(h("button", {
             class: "zx-icon-btn zx-tag-picker__remove",
@@ -8270,7 +8617,7 @@ var zx = (() => {
           h(
             "span",
             { class: "zx-tag-picker__option-label" },
-            this.options.renderItem ? this.options.renderItem(item) : this._labelOf(item)
+            this.options.renderItem ? this.options.renderItem(item) : [this._iconOf(item), h("span", {}, this._labelOf(item))]
           )
         );
         if (!selected && this.isFull()) option.setAttribute("aria-disabled", "true");
@@ -8495,10 +8842,10 @@ var zx = (() => {
         if (sequence !== this._requestSequence) return;
         this._items = Array.isArray(result) ? result.slice() : [];
         this._visible = this._items.slice();
-      } catch (error) {
+      } catch (error2) {
         if (sequence !== this._requestSequence) return;
         this._visible = [];
-        this.emit("error", { error });
+        this.emit("error", { error: error2 });
       } finally {
         if (sequence === this._requestSequence) {
           this._setLoading(false);
@@ -8591,6 +8938,34 @@ var zx = (() => {
       if (item !== null && typeof item === "object") return String(item[key] ?? "");
       return String(item ?? "");
     }
+    /** @param {unknown} item @returns {Node|null} */
+    _iconOf(item) {
+      const value = this._readItem(item, this.options.iconKey);
+      const visual = value && typeof value === "object" && typeof value.nodeType === "number" ? (
+        /** @type {Node} */
+        value.cloneNode(true)
+      ) : typeof value === "string" && value.trim() ? icon(value, { size: 12 }) : null;
+      if (!visual) return null;
+      return h("span", {
+        class: "zx-tag-picker__visual",
+        style: this._colorOf(item) ? { "--zx-tag-color": this._colorOf(item) } : 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;
+    }
+    /** @param {unknown} item @param {unknown} reader @returns {unknown} */
+    _readItem(item, reader) {
+      if (typeof reader === "function") return reader(
+        /** @type {TagItem} */
+        item
+      );
+      if (item !== null && typeof item === "object" && typeof reader === "string") return item[reader];
+      return null;
+    }
     /** @returns {void} */
     _emitChange() {
       this.emit("change", { values: this.getValues(), items: this.getItems() });
@@ -9475,38 +9850,38 @@ var zx = (() => {
           try {
             json2 = JSON.parse(text4);
           } catch (cause) {
-            const error = (
+            const error2 = (
               /** @type {Error & {response?: Response}} */
               new Error("Invalid JSON response", { cause })
             );
-            error.response = response;
-            throw error;
+            error2.response = response;
+            throw error2;
           }
         }
         if (!response.ok) {
           try {
             parseResult(json2);
-          } catch (error2) {
-            error2.response = response;
-            throw error2;
+          } catch (error3) {
+            error3.response = response;
+            throw error3;
           }
-          const error = (
+          const error2 = (
             /** @type {Error & {response?: Response}} */
             new Error(`HTTP ${response.status} ${response.statusText}`.trim())
           );
-          error.response = response;
-          throw error;
+          error2.response = response;
+          throw error2;
         }
         return parseResult(json2);
       } catch (caught) {
-        const error = caught instanceof Error ? caught : new Error(String(caught));
+        const error2 = caught instanceof Error ? caught : new Error(String(caught));
         if (this.onError) {
           try {
-            this.onError(error, { path, options });
+            this.onError(error2, { path, options });
           } catch {
           }
         }
-        throw error;
+        throw error2;
       } finally {
         if (timeoutId !== null) clearTimeout(timeoutId);
       }
@@ -10223,9 +10598,9 @@ var zx = (() => {
       this.el.returnValue = "";
       try {
         this._show();
-      } catch (error) {
+      } catch (error2) {
         delete this.el.dataset.zxOverlayOrder;
-        throw error;
+        throw error2;
       }
       this.el.dataset.state = "open";
       this.emit("open");
@@ -10708,9 +11083,9 @@ var zx = (() => {
       }
       try {
         super(normalizedTarget, options);
-      } catch (error) {
+      } catch (error2) {
         if (adoption) restoreAdoption(adoption);
-        throw error;
+        throw error2;
       }
       this._adoption = adoption;
     }
@@ -11438,7 +11813,11 @@ var zx = (() => {
       rowClass: null,
       zebra: true,
       editMode: false,
-      hierarchy: false
+      editTrigger: "double",
+      hierarchy: false,
+      rowReorder: false,
+      columnVisibility: false,
+      hiddenColumns: []
     };
     /**
      * Creates a table around a target or creates a new root when target is null.
@@ -11450,12 +11829,14 @@ var zx = (() => {
     }
     /** @returns {HTMLElement} Table root. */
     render() {
+      const created = this.el === null;
       const root = (
         /** @type {HTMLElement} */
         this.el ?? h("div")
       );
       this.el = root;
-      this._originalChildren = this.el ? Array.from(this.el.childNodes) : null;
+      this._createdRoot = created;
+      this._original = created ? null : snapshotTarget(root);
       this._columns = Array.isArray(this.options.columns) ? this.options.columns.map((column) => ({ ...column })) : [];
       this._data = Array.isArray(this.options.data) ? [...this.options.data] : [];
       this._selected = /* @__PURE__ */ new Set();
@@ -11465,6 +11846,7 @@ var zx = (() => {
       this._rowElements = /* @__PURE__ */ new Map();
       this._restored = false;
       this._editMode = normalizeEditMode(this.options.editMode);
+      this._editTrigger = this.options.editTrigger === "single" ? "single" : "double";
       this._edit = null;
       this._editMessage = null;
       this._stacked = false;
@@ -11476,6 +11858,10 @@ var zx = (() => {
       this._rovingCell = null;
       this._rovingMatched = false;
       this._hierarchy = normalizeHierarchy(this.options.hierarchy, this._columns);
+      this._hiddenColumns = new Set((Array.isArray(this.options.hiddenColumns) ? this.options.hiddenColumns : []).map(String).filter((id) => this._columns.some((column) => column.id === id)));
+      if (this._hiddenColumns.size >= this._columns.length && this._columns[0]) this._hiddenColumns.delete(this._columns[0].id);
+      this._dragId = null;
+      this._grabbedId = null;
       this._expanded = initialExpanded(this._hierarchy?.expanded);
       if (this._sort && this.options.sortMode === "local") this._sortData();
       if (this._hierarchy?.expanded === true) {
@@ -11497,11 +11883,17 @@ var zx = (() => {
           zebra: String(Boolean(this.options.zebra))
         }
       }, this._table);
+      this._rowMoveMessage = this.options.rowReorder ? h("div", {
+        class: "zx-table__reorder-status",
+        role: "status",
+        ariaLive: "polite"
+      }) : null;
       if (this.options.height != null) {
         this._scroll.style.blockSize = typeof this.options.height === "number" ? `${this.options.height}px` : String(this.options.height);
       }
+      this._columnControls = this.options.columnVisibility ? this._createColumnControls() : null;
       if (this._editMode === false) {
-        root.replaceChildren(this._scroll);
+        root.replaceChildren(...[this._columnControls, this._scroll, this._rowMoveMessage].filter(Boolean));
       } else {
         root.dataset.editMode = this._editMode;
         this._editMessage = h("div", {
@@ -11510,7 +11902,7 @@ var zx = (() => {
           role: "status",
           ariaLive: "polite"
         });
-        root.replaceChildren(this._scroll, this._editMessage);
+        root.replaceChildren(...[this._columnControls, this._scroll, this._editMessage, this._rowMoveMessage].filter(Boolean));
       }
       this._renderColumns();
       this._renderHeader();
@@ -11518,6 +11910,34 @@ var zx = (() => {
       this._watchWidth();
       this.listen(this._tbody, "click", (event) => this._handleBodyClick(event));
       this.listen(this._tbody, "dblclick", (event) => this._handleBodyDoubleClick(event));
+      if (this.options.rowReorder) {
+        this.listen(this._tbody, "dragstart", (event) => this._handleRowDragStart(
+          /** @type {DragEvent} */
+          event
+        ));
+        this.listen(this._tbody, "dragover", (event) => this._handleRowDragOver(
+          /** @type {DragEvent} */
+          event
+        ));
+        this.listen(this._tbody, "drop", (event) => this._handleRowDrop(
+          /** @type {DragEvent} */
+          event
+        ));
+        this.listen(this._tbody, "dragend", () => this._clearRowDrag());
+        this.listen(this._tbody, "keydown", (event) => this._handleRowHandleKeydown(
+          /** @type {KeyboardEvent} */
+          event
+        ));
+      }
+      if (this._columnControls) {
+        this.listen(this._columnControls, "change", (event) => {
+          const input = (
+            /** @type {HTMLInputElement|null} */
+            event.target
+          );
+          if (input?.classList.contains("zx-table__column-toggle")) this.setColumnVisible(input.value, input.checked);
+        });
+      }
       if (this._editMode !== false) {
         this.listen(this._tbody, "keydown", (event) => this._handleEditKeydown(
           /** @type {KeyboardEvent} */
@@ -11530,8 +11950,8 @@ var zx = (() => {
     }
     /**
      * Toggles a loading state. While loading, the body is dimmed, an indeterminate progress bar is
-     * shown, and `aria-busy` is set — a lightweight take on the busy/skeleton pattern used by
-     * enterprise tables (SAP UI5, Salesforce SLDS). Call `setLoading(false)` (or `setData`) when done.
+     * shown, and `aria-busy` is set — a lightweight enterprise-table busy and skeleton pattern.
+     * Call `setLoading(false)` (or `setData`) when done.
      * @param {boolean} [loading=true] Whether the table is loading.
      * @returns {this}
      */
@@ -11633,6 +12053,81 @@ var zx = (() => {
     getData() {
       return [...this._data];
     }
+    /** Returns visible column IDs in caller order. @returns {string[]} */
+    getVisibleColumns() {
+      return this._visibleColumns().map((column) => column.id);
+    }
+    /** Returns hidden column IDs in caller order. @returns {string[]} */
+    getHiddenColumns() {
+      return this._columns.filter((column) => this._hiddenColumns.has(column.id)).map((column) => column.id);
+    }
+    /**
+     * Shows or hides one column. The final visible column cannot be hidden.
+     * @param {string} id Column ID.
+     * @param {boolean} [visible=true] Desired visibility.
+     * @param {{silent?:boolean}} [options={}] Event behavior.
+     * @returns {this}
+     */
+    setColumnVisible(id, visible = true, options = {}) {
+      const column = this._columns.find((candidate) => candidate.id === id);
+      if (!column) throw new RangeError(`Unknown table column: ${id}`);
+      const active = (
+        /** @type {HTMLElement|null} */
+        document.activeElement
+      );
+      const restoreFocus = active?.classList.contains("zx-table__column-toggle") && this._columnList?.contains(active) ? (
+        /** @type {HTMLInputElement} */
+        active.value
+      ) : null;
+      if (!visible && !this._hiddenColumns.has(id) && this._visibleColumns().length <= 1) {
+        this._renderColumnControls(restoreFocus);
+        return this;
+      }
+      const changed = visible ? this._hiddenColumns.delete(id) : !this._hiddenColumns.has(id);
+      if (!visible && changed) this._hiddenColumns.add(id);
+      if (!changed) return this;
+      this._renderColumns();
+      this._renderHeader();
+      this._renderBody();
+      this._renderColumnControls(restoreFocus);
+      if (!options.silent) this.emit("columnvisibilitychange", {
+        visible: this.getVisibleColumns(),
+        hidden: this.getHiddenColumns()
+      });
+      return this;
+    }
+    /** Toggles one column. @param {string} id @param {{silent?:boolean}} [options={}] @returns {this} */
+    toggleColumn(id, options = {}) {
+      return this.setColumnVisible(id, this._hiddenColumns.has(id), options);
+    }
+    /**
+     * Reorders one row relative to another and emits a cancelable `rowmove` before committing.
+     * Hierarchical rows may only move among siblings; an active local sort disables manual order.
+     * @param {unknown} id Moving row ID.
+     * @param {unknown} targetId Target row ID.
+     * @param {'before'|'after'} [position='before'] Target edge.
+     * @returns {this}
+     */
+    moveRow(id, targetId, position2 = "before") {
+      if (!this.options.rowReorder || this._sort && this.options.sortMode === "local") return this;
+      const row2 = this.getRow(id);
+      const target = this.getRow(targetId);
+      if (!row2 || !target || Object.is(id, targetId)) 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: row2, id, target, targetId, position: position2 });
+      if (event.defaultPrevented) return this;
+      this._data = next;
+      this._renderBody();
+      if (this._rowMoveMessage) {
+        const siblings = this._siblingIds(id);
+        const index = siblings.findIndex((candidate) => Object.is(candidate, id));
+        this._rowMoveMessage.textContent = `Moved row to position ${index + 1} of ${siblings.length}.`;
+      }
+      this._emitDataChange();
+      queueMicrotask(() => this._rowHandle(id)?.focus());
+      return this;
+    }
     /**
      * Removes all rows.
      * @returns {this}
@@ -11801,14 +12296,17 @@ var zx = (() => {
      */
     startEdit(rowId, columnId) {
       if (this._editMode === false) return this;
-      const column = this._columns.find((candidate) => candidate.id === columnId);
-      if (!column) return this;
+      const requested = this._columns.find((candidate) => candidate.id === columnId);
+      if (!requested) return this;
       const current = this._data.find((candidate) => Object.is(this._idFor(candidate), rowId));
-      if (current === void 0 || resolveEditable(column, current) === false) return this;
+      if (current === void 0) 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;
       if (this._edit) {
-        if (Object.is(this._edit.id, rowId) && this._edit.cells.has(columnId)) {
-          this._edit.columnId = columnId;
-          this._focusEditor(columnId);
+        if (Object.is(this._edit.id, rowId) && this._edit.cells.has(activeColumnId)) {
+          this._edit.columnId = activeColumnId;
+          this._focusEditor(activeColumnId);
           return this;
         }
         this.commitEdit();
@@ -11819,7 +12317,7 @@ var zx = (() => {
       const row2 = this._data[index];
       const tr = this._rowElements.get(rowId)?.[0];
       if (!tr) return this;
-      const targets = this._editMode === "row" ? this._columns.filter((candidate) => resolveEditable(candidate, row2) !== false) : [column];
+      const targets = this._editMode === "row" ? this._visibleColumns().filter((candidate) => resolveEditable(candidate, row2) !== false) : [column];
       const cells = /* @__PURE__ */ new Map();
       for (const target of targets) {
         const td = cellIn(tr, target.id);
@@ -11828,10 +12326,10 @@ var zx = (() => {
         if (entry) cells.set(target.id, entry);
       }
       if (cells.size === 0) return this;
-      this._edit = { id: rowId, columnId, row: row2, cells, tr };
+      this._edit = { id: rowId, columnId: activeColumnId, row: row2, cells, tr };
       tr.dataset.editing = "true";
-      this.emit("editstart", { row: row2, id: rowId, column, columnId, value: row2?.[columnId] });
-      this._focusEditor(columnId);
+      this.emit("editstart", { row: row2, id: rowId, column, columnId: activeColumnId, value: row2?.[activeColumnId] });
+      this._focusEditor(activeColumnId);
       return this;
     }
     /**
@@ -12080,60 +12578,245 @@ var zx = (() => {
       this._teardownEdit();
       this._width?.destroy();
       this._width = null;
-      if (this.el) delete this.el.dataset.editMode;
-      if (!this._restored && this._originalChildren) {
-        this.el.replaceChildren(...this._originalChildren);
+      if (!this._restored && !this._createdRoot) {
+        restoreTarget(this.el, this._original);
         this._restored = true;
       }
       super.destroy();
     }
-    /** @returns {void} */
-    _renderColumns() {
-      const fragment2 = document.createDocumentFragment();
-      if (this.options.selectable === "multi") {
-        fragment2.append(h("col", { class: "zx-table__selection-column" }));
-      }
-      const fractions = this._columns.map((column) => parseFraction(column.width));
-      const total = fractions.reduce((sum, value) => sum + value, 0);
-      this._table.dataset.layout = total > 0 ? "fixed" : "auto";
-      this._columns.forEach((column, index) => {
-        const col = h("col");
-        if (fractions[index] > 0) col.style.width = `${fractions[index] / total * 100}%`;
-        else if (column.width && column.width !== "auto") col.style.width = String(column.width);
-        fragment2.append(col);
-      });
-      this._colgroup.replaceChildren(fragment2);
+    /** @returns {TableColumn[]} */
+    _visibleColumns() {
+      return this._columns.filter((column) => !this._hiddenColumns.has(column.id));
     }
-    /** @returns {void} */
-    _renderHeader() {
-      const row2 = h("tr", { class: "zx-table__header-row" });
-      if (this._growStep) row2.setAttribute("aria-rowindex", "1");
-      if (this.options.selectable === "multi") {
-        this._selectAll = h("input", {
-          class: "zx-table__checkbox zx-table__select-all",
-          type: "checkbox",
-          ariaLabel: "Select all rows"
-        });
-        const selectionHeader = h("th", {
-          class: "zx-table__selection-header",
-          scope: "col"
-        }, this._selectAll);
-        row2.append(selectionHeader);
-        this.listen(this._selectAll, "click", () => {
-          if (this._selectAll.checked) {
-            for (const dataRow of this._visibleData()) this._selected.add(this._idFor(dataRow));
-          } else {
-            for (const dataRow of this._visibleData()) this._selected.delete(this._idFor(dataRow));
-          }
-          this._selectionAnchorId = null;
-          this._syncSelection();
-          this._emitSelectionChange();
+    /** @returns {HTMLElement} */
+    _createColumnControls() {
+      const list = h("div", { class: "zx-table__column-list" });
+      this._columnList = list;
+      const details = h(
+        "details",
+        { class: "zx-table__column-controls" },
+        h("summary", { class: "zx-button zx-button--sm" }, icon("fields", { size: 13 }), "Columns"),
+        list
+      );
+      this._renderColumnControls();
+      return details;
+    }
+    /** @param {string|null} [focusColumn=null] Column checkbox that keeps focus. @returns {void} */
+    _renderColumnControls(focusColumn = null) {
+      if (!this._columnList) return;
+      const visible = this._visibleColumns();
+      const current = [...this._columnList.querySelectorAll(".zx-table__column-toggle")];
+      const reusable = current.length === this._columns.length && current.every((control, index) => (
+        /** @type {HTMLInputElement} */
+        control.value === this._columns[index].id
+      ));
+      if (reusable) {
+        current.forEach((control, index) => {
+          const input = (
+            /** @type {HTMLInputElement} */
+            control
+          );
+          const checked = !this._hiddenColumns.has(this._columns[index].id);
+          input.checked = checked;
+          input.disabled = checked && visible.length === 1;
         });
-      } else {
-        this._selectAll = null;
+        return;
+      }
+      this._columnList.replaceChildren(...this._columns.map((column) => {
+        const checked = !this._hiddenColumns.has(column.id);
+        return h(
+          "label",
+          { class: "zx-table__column-option" },
+          h("input", {
+            class: "zx-table__column-toggle",
+            type: "checkbox",
+            value: column.id,
+            checked,
+            disabled: checked && visible.length === 1
+          }),
+          h("span", {}, column.label)
+        );
+      }));
+      if (focusColumn !== null) {
+        const control = [...this._columnList.querySelectorAll(".zx-table__column-toggle")].find((candidate) => (
+          /** @type {HTMLInputElement} */
+          candidate.value === focusColumn
+        ));
+        queueMicrotask(() => {
+          if (control?.isConnected) control.focus();
+        });
+      }
+    }
+    /** @param {DragEvent} event @returns {void} */
+    _handleRowDragStart(event) {
+      const handle = (
+        /** @type {Element|null} */
+        event.target?.closest?.(".zx-table__row-handle")
+      );
+      const rowElement = handle?.closest("tr[data-row]");
+      const meta = rowElement ? this._rowMeta.get(rowElement) : null;
+      if (!handle || !meta || this._sort && this.options.sortMode === "local") {
+        event.preventDefault();
+        return;
+      }
+      this._dragId = meta.id;
+      rowElement.dataset.dragging = "true";
+      event.dataTransfer?.setData("text/plain", "zx-table-row");
+      if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+    }
+    /** @param {DragEvent} event @returns {void} */
+    _handleRowDragOver(event) {
+      if (this._dragId == null) return;
+      const rowElement = (
+        /** @type {Element|null} */
+        event.target?.closest?.("tr[data-row]")
+      );
+      const meta = rowElement ? this._rowMeta.get(rowElement) : null;
+      if (!meta || Object.is(meta.id, this._dragId) || !this._canMoveTogether(this._dragId, meta.id)) return;
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+      this._clearDropMarkers();
+      const rectangle = rowElement.getBoundingClientRect();
+      rowElement.dataset.drop = event.clientY >= rectangle.top + rectangle.height / 2 ? "after" : "before";
+    }
+    /** @param {DragEvent} event @returns {void} */
+    _handleRowDrop(event) {
+      if (this._dragId == null) return;
+      const rowElement = (
+        /** @type {Element|null} */
+        event.target?.closest?.("tr[data-row]")
+      );
+      const meta = rowElement ? this._rowMeta.get(rowElement) : null;
+      const position2 = rowElement?.dataset.drop === "after" ? "after" : "before";
+      if (meta && this._canMoveTogether(this._dragId, meta.id)) {
+        event.preventDefault();
+        this.moveRow(this._dragId, meta.id, position2);
+      }
+      this._clearRowDrag();
+    }
+    /** @param {KeyboardEvent} event @returns {void} */
+    _handleRowHandleKeydown(event) {
+      const handle = (
+        /** @type {Element|null} */
+        event.target?.closest?.(".zx-table__row-handle")
+      );
+      const rowElement = handle?.closest("tr[data-row]");
+      const meta = rowElement ? this._rowMeta.get(rowElement) : null;
+      if (!handle || !meta) return;
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        this._grabbedId = Object.is(this._grabbedId, meta.id) ? null : meta.id;
+        handle.setAttribute("aria-pressed", String(this._grabbedId != null));
+        const status = this._rowMoveMessage ?? this._editMessage;
+        if (status) status.textContent = this._grabbedId == null ? "Row dropped" : "Row grabbed. Use the arrow keys to move it.";
+        return;
+      }
+      if (event.key === "Escape" && this._grabbedId != null) {
+        event.preventDefault();
+        this._grabbedId = null;
+        handle.setAttribute("aria-pressed", "false");
+        return;
+      }
+      if (!Object.is(this._grabbedId, meta.id) || !["ArrowUp", "ArrowDown"].includes(event.key)) return;
+      event.preventDefault();
+      const siblings = this._siblingIds(meta.id);
+      const index = siblings.findIndex((id) => Object.is(id, meta.id));
+      const targetId = siblings[index + (event.key === "ArrowUp" ? -1 : 1)];
+      if (targetId !== void 0) this.moveRow(meta.id, targetId, event.key === "ArrowUp" ? "before" : "after");
+    }
+    /** @param {unknown} id @returns {unknown[]} */
+    _siblingIds(id) {
+      const row2 = this.getRow(id);
+      if (!row2) return [];
+      const parent = this._hierarchy ? readRowValue(this._hierarchy.parentId, row2) : null;
+      return this._data.filter((candidate) => !this._hierarchy || sameHierarchyParent(readRowValue(this._hierarchy.parentId, candidate), parent)).map((candidate) => this._idFor(candidate));
+    }
+    /** @param {unknown} left @param {unknown} right @returns {boolean} */
+    _canMoveTogether(left, right) {
+      if (!this._hierarchy) return true;
+      const a = this.getRow(left);
+      const b = this.getRow(right);
+      return Boolean(a && b && sameHierarchyParent(
+        readRowValue(this._hierarchy.parentId, a),
+        readRowValue(this._hierarchy.parentId, b)
+      ));
+    }
+    /** @param {unknown} id @returns {HTMLElement|null} */
+    _rowHandle(id) {
+      return (
+        /** @type {HTMLElement|null} */
+        this._rowElements.get(id)?.[0]?.querySelector(".zx-table__row-handle") ?? null
+      );
+    }
+    /** @returns {void} */
+    _clearDropMarkers() {
+      for (const row2 of this._tbody.querySelectorAll("tr[data-drop]")) delete row2.dataset.drop;
+    }
+    /** @returns {void} */
+    _clearRowDrag() {
+      for (const row2 of this._tbody.querySelectorAll("tr[data-dragging]")) delete row2.dataset.dragging;
+      this._clearDropMarkers();
+      this._dragId = null;
+    }
+    /** @returns {string|null} */
+    _hierarchyColumn() {
+      if (!this._hierarchy) return null;
+      return this._visibleColumns().some((column) => column.id === this._hierarchy.column) ? this._hierarchy.column : this._visibleColumns()[0]?.id ?? null;
+    }
+    /** @returns {void} */
+    _renderColumns() {
+      const fragment2 = document.createDocumentFragment();
+      if (this.options.rowReorder) fragment2.append(h("col", { class: "zx-table__reorder-column" }));
+      if (this.options.selectable === "multi") {
+        fragment2.append(h("col", { class: "zx-table__selection-column" }));
+      }
+      const columns = this._visibleColumns();
+      const fractions = columns.map((column) => parseFraction(column.width));
+      const total = fractions.reduce((sum, value) => sum + value, 0);
+      this._table.dataset.layout = total > 0 ? "fixed" : "auto";
+      columns.forEach((column, index) => {
+        const col = h("col");
+        if (fractions[index] > 0) col.style.width = `${fractions[index] / total * 100}%`;
+        else if (column.width && column.width !== "auto") col.style.width = String(column.width);
+        fragment2.append(col);
+      });
+      this._colgroup.replaceChildren(fragment2);
+    }
+    /** @returns {void} */
+    _renderHeader() {
+      const row2 = h("tr", { class: "zx-table__header-row" });
+      if (this._growStep) row2.setAttribute("aria-rowindex", "1");
+      if (this.options.rowReorder) row2.append(h("th", {
+        class: "zx-table__reorder-header",
+        scope: "col",
+        ariaLabel: "Row order"
+      }));
+      if (this.options.selectable === "multi") {
+        this._selectAll = h("input", {
+          class: "zx-table__checkbox zx-table__select-all",
+          type: "checkbox",
+          ariaLabel: "Select all rows"
+        });
+        const selectionHeader = h("th", {
+          class: "zx-table__selection-header",
+          scope: "col"
+        }, this._selectAll);
+        row2.append(selectionHeader);
+        this.listen(this._selectAll, "click", () => {
+          if (this._selectAll.checked) {
+            for (const dataRow of this._visibleData()) this._selected.add(this._idFor(dataRow));
+          } else {
+            for (const dataRow of this._visibleData()) this._selected.delete(this._idFor(dataRow));
+          }
+          this._selectionAnchorId = null;
+          this._syncSelection();
+          this._emitSelectionChange();
+        });
+      } else {
+        this._selectAll = null;
       }
       this._headers = /* @__PURE__ */ new Map();
-      for (const column of this._columns) {
+      for (const column of this._visibleColumns()) {
         const th = h("th", { scope: "col" });
         const align = column.align ?? (isNumericColumn(column) ? "end" : null);
         if (align) th.dataset.align = align;
@@ -12173,7 +12856,7 @@ var zx = (() => {
           { class: "zx-table__empty-row" },
           h("td", {
             class: "zx-table__empty",
-            colspan: this._columns.length + (this.options.selectable === "multi" ? 1 : 0)
+            colspan: this._visibleColumns().length + (this.options.selectable === "multi" ? 1 : 0) + (this.options.rowReorder ? 1 : 0)
           }, this._emptyContent())
         ));
       } else {
@@ -12182,6 +12865,7 @@ var zx = (() => {
         });
       }
       this._tbody.replaceChildren(fragment2);
+      this._table.setAttribute("aria-colcount", String(this._visibleColumns().length + (this.options.selectable === "multi" ? 1 : 0) + (this.options.rowReorder ? 1 : 0)));
       if (this._growStep) this._table.setAttribute("aria-rowcount", String(projected.length + 1));
       this._syncSelectAll();
       this._syncGrowing();
@@ -12225,6 +12909,19 @@ var zx = (() => {
       const elements = this._rowElements.get(id) ?? [];
       elements.push(tr);
       this._rowElements.set(id, elements);
+      if (this.options.rowReorder) {
+        const handle = h("button", {
+          class: "zx-table__row-handle",
+          type: "button",
+          draggable: true,
+          dataset: { rowHandle: "" },
+          ariaLabel: `Move row ${index + 1}`,
+          ariaPressed: String(Object.is(this._grabbedId, id)),
+          disabled: Boolean(this._sort && this.options.sortMode === "local"),
+          title: this._sort && this.options.sortMode === "local" ? "Clear sorting to reorder rows" : null
+        }, icon("drag", { size: 14 }));
+        tr.append(h("td", { class: "zx-table__reorder-cell" }, handle));
+      }
       if (this.options.selectable === "multi") {
         const checkbox = h("input", {
           class: "zx-table__checkbox zx-table__row-checkbox",
@@ -12234,7 +12931,7 @@ var zx = (() => {
         });
         tr.append(h("td", { class: "zx-table__selection-cell" }, checkbox));
       }
-      this._columns.forEach((column) => {
+      this._visibleColumns().forEach((column) => {
         const cell = (
           /** @type {HTMLTableCellElement} */
           h("td")
@@ -12270,7 +12967,7 @@ var zx = (() => {
       const content = h("span", { class: "zx-table__cell-content" });
       if (value && typeof value === "object" && typeof value.nodeType === "number") content.append(value);
       else if (value != null) content.append(document.createTextNode(String(value)));
-      if (!this._hierarchy || column.id !== this._hierarchy.column || !tree) {
+      if (!this._hierarchy || column.id !== this._hierarchyColumn() || !tree) {
         cell.replaceChildren(...content.childNodes);
         return;
       }
@@ -12301,6 +12998,7 @@ var zx = (() => {
       if (!rowElement || !this._tbody.contains(rowElement)) return;
       const meta = this._rowMeta.get(rowElement);
       if (!meta) return;
+      if (target.closest(".zx-table__row-handle")) return;
       if (this._edit) {
         this.commitEdit();
         if (this._edit) return;
@@ -12320,6 +13018,14 @@ var zx = (() => {
         );
         return;
       }
+      if (isInteractiveCellContent(target)) return;
+      if (this._editMode !== false && this._editTrigger === "single") {
+        const cell = target?.closest('td[data-editable="true"]');
+        if (cell && this._tbody.contains(cell)) {
+          this.startEdit(meta.id, String(cell.dataset.column));
+          return;
+        }
+      }
       this.emit("rowclick", { ...meta, event });
       if (this.options.selectable === "single" && !this._selected.has(meta.id)) {
         this._selected = /* @__PURE__ */ new Set([meta.id]);
@@ -12340,7 +13046,8 @@ var zx = (() => {
       if (!rowElement || !this._tbody.contains(rowElement)) return;
       const meta = this._rowMeta.get(rowElement);
       if (!meta) return;
-      if (this._editMode !== false) {
+      if (isInteractiveCellContent(target)) return;
+      if (this._editMode !== false && this._editTrigger === "double") {
         const cell = target?.closest('td[data-editable="true"]');
         if (cell && this._tbody.contains(cell)) {
           this.startEdit(meta.id, String(cell.dataset.column));
@@ -12642,13 +13349,14 @@ var zx = (() => {
      * @returns {{id: unknown, columnId: string, index: number}|null} Next cell, or null at the end.
      */
     _nextEditableCell(rowIndex, columnId, direction) {
-      const columnCount = this._columns.length;
+      const columns = this._visibleColumns();
+      const columnCount = columns.length;
       if (rowIndex < 0 || columnCount === 0) return null;
       const visible = this._visibleData();
       const startingId = this._idFor(this._data[rowIndex]);
       let row2 = visible.findIndex((candidate) => Object.is(this._idFor(candidate), startingId));
       if (row2 < 0) return null;
-      let column = this._columns.findIndex((candidate) => candidate.id === columnId);
+      let column = columns.findIndex((candidate) => candidate.id === columnId);
       const limit = visible.length * columnCount + columnCount;
       for (let step = 0; step < limit; step += 1) {
         column += direction;
@@ -12661,7 +13369,7 @@ var zx = (() => {
         }
         if (row2 < 0 || row2 >= visible.length) return null;
         const candidateRow = visible[row2];
-        const candidateColumn = this._columns[column];
+        const candidateColumn = columns[column];
         if (resolveEditable(candidateColumn, candidateRow) !== false) {
           return {
             id: this._idFor(candidateRow),
@@ -12904,6 +13612,53 @@ var zx = (() => {
     }
     return result;
   }
+  function reorderTableRows(rows, rowId, id, targetId, position2 = "before", parentId = null) {
+    if (!Array.isArray(rows) || Object.is(id, targetId)) return null;
+    const from = rows.findIndex((row2) => Object.is(readRowValue(rowId, row2), id));
+    const target = rows.findIndex((row2) => Object.is(readRowValue(rowId, row2), targetId));
+    if (from < 0 || target < 0) return null;
+    if (parentId && !sameHierarchyParent(
+      readRowValue(parentId, rows[from]),
+      readRowValue(parentId, rows[target])
+    )) return null;
+    if (parentId) {
+      const forest = hierarchyForest(rows, rowId, parentId);
+      const movingNode = forest.nodes[from];
+      const targetNode = forest.nodes[target];
+      if (!movingNode || !targetNode || movingNode.parent !== targetNode.parent) return null;
+      const branchNodes = (root) => {
+        const result = [];
+        const stack2 = [root];
+        while (stack2.length) {
+          const node = (
+            /** @type {TableHierarchyNode} */
+            stack2.pop()
+          );
+          result.push(node);
+          for (let index = node.children.length - 1; index >= 0; index -= 1) stack2.push(node.children[index]);
+        }
+        return result;
+      };
+      const moving2 = new Set(branchNodes(movingNode).map((node) => node.index));
+      const targetBranch = new Set(branchNodes(targetNode).map((node) => node.index));
+      const block = rows.filter((_row, index) => moving2.has(index));
+      const remaining = rows.filter((_row, index) => !moving2.has(index));
+      const remainingSourceIndexes = rows.map((_row, index) => index).filter((index) => !moving2.has(index));
+      let insertion = remainingSourceIndexes.findIndex((index) => index === target);
+      if (position2 === "after") {
+        const targetPositions = remainingSourceIndexes.map((sourceIndex, index) => targetBranch.has(sourceIndex) ? index : -1).filter((index) => index >= 0);
+        insertion = Math.max(...targetPositions) + 1;
+      }
+      if (insertion < 0) return null;
+      remaining.splice(insertion, 0, ...block);
+      return remaining;
+    }
+    const next = [...rows];
+    const [moving] = next.splice(from, 1);
+    const adjustedTarget = next.findIndex((row2) => Object.is(readRowValue(rowId, row2), targetId));
+    next.splice(adjustedTarget + (position2 === "after" ? 1 : 0), 0, moving);
+    return next;
+  }
   function resolveEditable(column, row2) {
     if (!column || typeof column !== "object") return false;
     if (typeof column.editor === "function") {
@@ -12984,7 +13739,8 @@ var zx = (() => {
     for (const node of nodes) if (!byId.has(node.id)) byId.set(node.id, node);
     const parentOf = /* @__PURE__ */ new Map();
     for (const node of nodes) {
-      const parent = byId.get(readRowValue(parentId, node.row)) ?? null;
+      const parentValue = readRowValue(parentId, node.row);
+      const parent = parentValue == null ? null : byId.get(parentValue) ?? null;
       parentOf.set(node, parent === node ? null : parent);
     }
     for (const node of nodes) {
@@ -13013,6 +13769,9 @@ var zx = (() => {
   function readRowValue(accessor, row2) {
     return typeof accessor === "function" ? accessor(row2) : row2?.[accessor];
   }
+  function sameHierarchyParent(left, right) {
+    return left == null && right == null || Object.is(left, right);
+  }
   function normalizeHierarchy(option, columns) {
     if (!option || typeof option !== "object") return null;
     const parentId = option.parentId;
@@ -13032,6 +13791,23 @@ var zx = (() => {
   function isInsideEditor(target) {
     return Boolean(target?.closest?.(".zx-table__editor"));
   }
+  function isInteractiveCellContent(target) {
+    const cell = target?.closest?.("td[data-column]");
+    const interactive = target?.closest?.([
+      "a[href]",
+      "button",
+      "input",
+      "select",
+      "textarea",
+      "summary",
+      '[contenteditable="true"]',
+      '[role="button"]',
+      '[role="link"]',
+      '[tabindex]:not([tabindex="-1"])',
+      "[data-zx-table-no-edit]"
+    ].join(","));
+    return Boolean(cell && interactive && interactive !== cell && cell.contains(interactive));
+  }
   function deferToEditor(target) {
     if (target.closest("[popover]")) return true;
     return target.getAttribute?.("aria-expanded") === "true";
@@ -15443,6 +16219,244 @@ var zx = (() => {
     ) : "start";
   }
 
+  // src/components/card/card.js
+  var Card = class extends Component {
+    static cssName = "card";
+    /** @type {Readonly<CardOptions>} */
+    static defaults = {
+      title: "",
+      media: null,
+      content: null,
+      actions: [],
+      footer: null,
+      link: null,
+      variant: "outlined",
+      orientation: "vertical",
+      headingLevel: 3
+    };
+    /**
+     * Creates or enhances one card.
+     * @param {Element|string|null} [target=null] Existing card container, selector, or null.
+     * @param {CardOptions} [options={}] Card options.
+     */
+    constructor(target = null, options = {}) {
+      super(target, options);
+    }
+    /** @returns {HTMLElement} */
+    render() {
+      const created = !this.el;
+      const root = (
+        /** @type {HTMLElement} */
+        this.el ?? h("article")
+      );
+      this.el = root;
+      this._createdRoot = created;
+      this._original = created ? null : snapshotTarget(root);
+      this._cleaned = false;
+      this._title = "";
+      this._link = null;
+      this._actionAbort = null;
+      this._linkAbort = null;
+      const originalContent = created ? [] : Array.from(root.childNodes);
+      try {
+        const headingLevel = normalizeHeadingLevel(this.options.headingLevel);
+        const headingId = uid("zx-card-heading");
+        const heading = h(`h${headingLevel}`, {
+          ref: "heading",
+          class: "zx-card__heading",
+          id: headingId
+        });
+        const media = h("div", { ref: "media", class: "zx-card__media", hidden: true });
+        const actions2 = h("div", {
+          ref: "actions",
+          class: "zx-card__actions",
+          role: "group",
+          ariaLabel: "Card actions",
+          hidden: true
+        });
+        const content = h("div", { ref: "content", class: "zx-card__content", hidden: true });
+        const footer = h("footer", { ref: "footer", class: "zx-card__footer", hidden: true });
+        const header = h("header", { ref: "header", class: "zx-card__header" }, heading, actions2);
+        root.replaceChildren(h(
+          "div",
+          { class: "zx-card__layout" },
+          media,
+          h("div", { class: "zx-card__inner" }, header, content, footer)
+        ));
+        root.dataset.variant = normalizeVariant2(this.options.variant);
+        root.dataset.orientation = normalizeOrientation(this.options.orientation);
+        this.setTitle(this.options.title);
+        this.setMedia(this.options.media);
+        if (this.options.content !== null) this.setContent(this.options.content);
+        else if (originalContent.length) {
+          content.replaceChildren(...originalContent);
+          content.hidden = false;
+        }
+        this.setActions(this.options.actions);
+        this.setFooter(this.options.footer);
+        this.setLink(this.options.link);
+        return root;
+      } catch (error2) {
+        this._actionAbort?.abort();
+        this._linkAbort?.abort();
+        if (!created) restoreTarget(root, this._original);
+        throw error2;
+      }
+    }
+    /** Replaces the card title. @param {string} title Next title. @returns {this} */
+    setTitle(title) {
+      const next = String(title ?? "");
+      if (this._link && !next.trim()) throw new TypeError("A linked Card requires a non-empty title");
+      this._title = next;
+      this._renderHeading();
+      return this;
+    }
+    /** Replaces or removes the media region. @param {CardContent} content Media. @returns {this} */
+    setMedia(content) {
+      replaceCardContent(this.refs.media, content, "Card media");
+      this.refs.media.hidden = content === null;
+      return this;
+    }
+    /** Replaces or clears the main content. @param {CardContent} content Content. @returns {this} */
+    setContent(content) {
+      replaceCardContent(this.refs.content, content, "Card content");
+      this.refs.content.hidden = content === null;
+      return this;
+    }
+    /** Replaces the secondary action controls. @param {CardAction[]} actions Actions. @returns {this} */
+    setActions(actions2) {
+      if (!Array.isArray(actions2)) throw new TypeError("Card actions must be an array");
+      const nextAbort = new AbortController();
+      let controls;
+      try {
+        controls = actions2.map((action) => {
+          if (isElement(action)) return action;
+          if (!action || typeof action !== "object" || Array.isArray(action)) {
+            throw new TypeError("Card actions must be Elements or button descriptors");
+          }
+          const descriptor = { ...action };
+          const onclick = descriptor.onclick;
+          delete descriptor.onclick;
+          const control = button(descriptor);
+          if (onclick !== void 0 && typeof onclick !== "function") {
+            throw new TypeError("Card action onclick must be a function");
+          }
+          if (onclick) control.addEventListener("click", onclick, { signal: nextAbort.signal });
+          return control;
+        });
+      } catch (error2) {
+        nextAbort.abort();
+        throw error2;
+      }
+      this._actionAbort?.abort();
+      this._actionAbort = nextAbort;
+      this.refs.actions.replaceChildren(...controls);
+      this.refs.actions.hidden = controls.length === 0;
+      this._syncHeader();
+      return this;
+    }
+    /** Replaces or removes the footer. @param {CardContent} content Footer. @returns {this} */
+    setFooter(content) {
+      replaceCardContent(this.refs.footer, content, "Card footer");
+      this.refs.footer.hidden = content === null;
+      return this;
+    }
+    /** Sets or removes the title's native primary link. @param {CardLink} link Link. @returns {this} */
+    setLink(link) {
+      const next = normalizeCardLink(link);
+      if (next && !this._title.trim()) throw new TypeError("A linked Card requires a non-empty title");
+      this._link = next;
+      this.el.dataset.linked = next ? "true" : "false";
+      this._renderHeading();
+      return this;
+    }
+    /** Restores an enhanced target exactly, or removes an owned card. @returns {void} */
+    destroy() {
+      if (this._cleaned) return;
+      this._cleaned = true;
+      this._actionAbort?.abort();
+      this._linkAbort?.abort();
+      super.destroy();
+      if (!this._createdRoot) restoreTarget(this.el, this._original);
+    }
+    /** @returns {void} */
+    _renderHeading() {
+      const title = this._title;
+      const nextAbort = new AbortController();
+      const node = this._link ? h("a", {
+        class: "zx-card__primary",
+        href: this._link.href,
+        target: this._link.target,
+        rel: this._link.rel
+      }, title) : h("span", { class: "zx-card__title" }, title);
+      if (this._link?.onclick) node.addEventListener("click", this._link.onclick, { signal: nextAbort.signal });
+      this._linkAbort?.abort();
+      this._linkAbort = nextAbort;
+      this.refs.heading.replaceChildren(node);
+      this.refs.heading.hidden = title === "";
+      if (title) this.el.setAttribute("aria-labelledby", this.refs.heading.id);
+      else this.el.removeAttribute("aria-labelledby");
+      this._syncHeader();
+    }
+    /** @returns {void} */
+    _syncHeader() {
+      if (!this.refs.header) return;
+      this.refs.header.hidden = this._title === "" && this.refs.actions.childElementCount === 0;
+    }
+  };
+  function replaceCardContent(host, content, label) {
+    if (content === null) {
+      host.replaceChildren();
+      return;
+    }
+    if (typeof content === "string") {
+      host.textContent = content;
+      return;
+    }
+    const node = content instanceof Component ? content.toElement() : content;
+    if (node instanceof Node) {
+      host.replaceChildren(node);
+      return;
+    }
+    throw new TypeError(`${label} must be a string, Node, Component, or null`);
+  }
+  function normalizeCardLink(value) {
+    if (value === null) return null;
+    const descriptor = typeof value === "string" ? { href: value } : value;
+    if (!descriptor || typeof descriptor !== "object" || Array.isArray(descriptor)) {
+      throw new TypeError("Card link must be a URL string, descriptor, or null");
+    }
+    const href = safeHref(descriptor.href);
+    if (href === null) {
+      throw new TypeError("Card link requires a safe non-empty href");
+    }
+    if (descriptor.onclick !== void 0 && typeof descriptor.onclick !== "function") {
+      throw new TypeError("Card link onclick must be a function");
+    }
+    const target = descriptor.target == null ? void 0 : String(descriptor.target);
+    let rel = descriptor.rel == null ? "" : String(descriptor.rel).trim();
+    if (target === "_blank" && !/(^|\s)noopener(\s|$)/i.test(rel)) {
+      rel = `${rel} noopener`.trim();
+    }
+    return { href, target, rel: rel || void 0, onclick: descriptor.onclick };
+  }
+  function normalizeVariant2(value) {
+    return ["raised", "filled"].includes(String(value)) ? (
+      /** @type {'raised'|'filled'} */
+      value
+    ) : "outlined";
+  }
+  function normalizeOrientation(value) {
+    return value === "horizontal" ? "horizontal" : "vertical";
+  }
+  function normalizeHeadingLevel(value) {
+    const level = Math.trunc(Number(value));
+    return (
+      /** @type {1|2|3|4|5|6} */
+      level >= 1 && level <= 6 ? level : 3
+    );
+  }
+
   // src/components/panel/panel.js
   var Panel = class extends Component {
     static cssName = "panel";
@@ -18773,6 +19787,106 @@ var zx = (() => {
     return value.toLocaleString();
   }
 
+  // src/components/app-icon/app-icon.js
+  var AppIcon = class extends Component {
+    static cssName = "app-icon";
+    /** @type {Readonly<AppIconOptions>} */
+    static defaults = {
+      icon: null,
+      color: null,
+      size: 36,
+      iconSize: "52%",
+      label: null,
+      badge: null,
+      selected: false,
+      glass: "subtle",
+      class: []
+    };
+    /** @returns {HTMLElement} */
+    render() {
+      this._createdRoot = this.el === null;
+      const root = (
+        /** @type {HTMLElement} */
+        this.el ?? h("span")
+      );
+      this.el = root;
+      this._snapshot = this._createdRoot ? null : snapshotTarget(root);
+      this._state = { ...this.options };
+      this._appliedClasses = [];
+      this._sync();
+      return root;
+    }
+    /** Updates identity or presentation without replacing the root. @param {Partial<AppIconOptions>} values @returns {this} */
+    set(values = {}) {
+      if (!values || typeof values !== "object") return this;
+      Object.assign(this._state, values);
+      this._sync();
+      return this;
+    }
+    /** Restores an enhanced target. @returns {void} */
+    destroy() {
+      const root = this.el;
+      const snapshot10 = this._snapshot;
+      super.destroy();
+      if (!this._createdRoot && root) restoreTarget(root, snapshot10);
+    }
+    /** @returns {void} */
+    _sync() {
+      const state = this._state;
+      this.el.classList.remove(...this._appliedClasses);
+      this._appliedClasses = [state.class].flat().flatMap((value) => String(value ?? "").split(/\s+/)).filter(Boolean);
+      this.el.classList.add(...this._appliedClasses);
+      const size2 = cssLength2(state.size, "36px");
+      const glyphSize = cssLength2(state.iconSize, "52%");
+      this.el.style.setProperty("--zx-app-icon-size", size2);
+      this.el.style.setProperty("--zx-app-icon-glyph-size", glyphSize);
+      if (isCssColor(state.color)) this.el.style.setProperty("--zx-app-icon-color", String(state.color));
+      else this.el.style.removeProperty("--zx-app-icon-color");
+      this.el.dataset.glass = normalizeGlass(state.glass);
+      this.el.toggleAttribute("data-selected", Boolean(state.selected));
+      const label = state.label == null ? "" : String(state.label).trim();
+      if (label) {
+        this.el.setAttribute("role", "img");
+        this.el.setAttribute("aria-label", label);
+        this.el.removeAttribute("aria-hidden");
+      } else {
+        this.el.removeAttribute("role");
+        this.el.removeAttribute("aria-label");
+        this.el.setAttribute("aria-hidden", "true");
+      }
+      const visual = resolveVisual(state.icon);
+      const badge2 = state.badge == null || state.badge === "" ? null : h("span", {
+        class: "zx-app-icon__badge",
+        ariaHidden: "true"
+      }, String(state.badge));
+      this.el.replaceChildren(
+        h("span", { class: "zx-app-icon__shine", ariaHidden: "true" }),
+        h("span", { class: "zx-app-icon__glyph", ariaHidden: "true" }, visual),
+        badge2
+      );
+    }
+  };
+  function appIcon(options = {}) {
+    return new AppIcon(null, options).toElement();
+  }
+  function resolveVisual(value) {
+    const resolved = typeof value === "function" ? value() : value;
+    if (typeof resolved === "string") return icon(resolved, { size: "1em" });
+    return resolved && typeof resolved === "object" && typeof resolved.nodeType === "number" ? (
+      /** @type {Node} */
+      resolved
+    ) : null;
+  }
+  function cssLength2(value, fallback) {
+    if (typeof value === "number" && Number.isFinite(value)) return `${Math.max(1, value)}px`;
+    const text4 = String(value ?? "").trim();
+    return text4 && !/[;{}]/.test(text4) ? text4 : fallback;
+  }
+  function normalizeGlass(value) {
+    if (value === false || value === "none") return "none";
+    return value === "strong" ? "strong" : "subtle";
+  }
+
   // src/components/launcher/launcher.js
   var Launcher = class extends Component {
     static cssName = "launcher";
@@ -18786,9 +19900,12 @@ var zx = (() => {
       maxResults: 100,
       placeholder: "Search applications and records",
       label: "Launcher",
+      closeLabel: "Close launcher",
+      resultsLabel: "Launcher results",
       emptyText: "No results",
       loadingText: "Searching\u2026",
-      shortcut: "mod+k"
+      shortcut: "mod+k",
+      hints: { move: "Move", open: "Open", close: "Close" }
     };
     /**
      * Creates an owned launcher dialog or enhances an existing `<dialog>` target.
@@ -18817,6 +19934,7 @@ var zx = (() => {
       this._sources = normalizeSources(this.options.sources);
       this._sourceItems = /* @__PURE__ */ new Map();
       this._query = String(this.options.query ?? "");
+      this._renderedQuery = null;
       this._results = [];
       this._active = -1;
       this._request = null;
@@ -18843,7 +19961,7 @@ var zx = (() => {
         ref: "close",
         class: "zx-icon-btn zx-launcher__close",
         type: "button",
-        ariaLabel: "Close launcher"
+        ariaLabel: this.options.closeLabel
       }, icon("x"));
       const status = h("div", {
         ref: "status",
@@ -18856,16 +19974,25 @@ var zx = (() => {
         class: "zx-launcher__results",
         id: listId,
         role: "listbox",
-        ariaLabel: "Launcher results"
+        ariaLabel: this.options.resultsLabel
       });
+      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));
       dialog.replaceChildren(
         h(
           "div",
           { class: "zx-launcher__surface" },
-          h("div", { class: "zx-launcher__search" }, icon("search"), input, close),
+          h("div", {
+            class: "zx-launcher__search",
+            dataset: { shortcut: shortcut ? "true" : "false" }
+          }, icon("search"), input, shortcut, close),
           status,
-          results
+          results,
+          footer
         )
       );
       dialog.dataset.state = "closed";
@@ -18889,6 +20016,17 @@ var zx = (() => {
         if (!option || !results.contains(option)) return;
         this._activate(Number(option.getAttribute("data-launcher-index")), event);
       });
+      this.listen(results, "pointermove", (event) => {
+        const option = (
+          /** @type {Element|null} */
+          event.target?.closest?.("[data-launcher-index]")
+        );
+        if (!option || !results.contains(option)) return;
+        const index = Number(option.getAttribute("data-launcher-index"));
+        if (!Number.isInteger(index) || this._results[index]?.disabled || index === this._active) return;
+        this._active = index;
+        this._syncActive();
+      });
       this.listen(dialog, "cancel", (event) => {
         event.preventDefault();
         this.close();
@@ -18958,8 +20096,15 @@ var zx = (() => {
       this._renderResults();
       return this;
     }
-    /** Replaces asynchronous sources and aborts work from the old set. @param {LauncherSource[]} sources @returns {this} */
-    setSources(sources) {
+    /** Marks one local item as the current destination. @param {string|number|null} id Item id. @returns {this} */
+    setCurrent(id) {
+      const key = id == null ? null : String(id);
+      this._items = this._items.map((item) => ({ ...item, current: key !== null && String(item.id) === key }));
+      this._renderResults();
+      return this;
+    }
+    /** Replaces asynchronous sources and aborts work from the old set. @param {LauncherSource[]} sources @returns {this} */
+    setSources(sources) {
       this._abortRequest();
       this._sources = normalizeSources(sources);
       this._sourceItems.clear();
@@ -18993,7 +20138,7 @@ var zx = (() => {
     async _loadSources() {
       this._queryTimer = null;
       const query = this._query.trim();
-      const sources = this._sources.filter((source) => query.length >= Math.max(Number(this.options.minQuery) || 0, Number(source.minQuery) || 0));
+      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 request = new AbortController();
       const sequence = ++this._requestSequence;
@@ -19003,15 +20148,17 @@ var zx = (() => {
         try {
           const loaded = await source.load(query, { signal: request.signal });
           if (request.signal.aborted || sequence !== this._requestSequence) return;
-          this._sourceItems.set(source.id, normalizeItems2(loaded).map((item) => ({
+          this._sourceItems.set(source.id, normalizeItems2(loaded).map((item, itemOrder) => ({
             ...item,
             _source: source.id,
-            group: item.group ?? source.label ?? ""
+            _sourceOrder: source.order === "source",
+            group: item.group ?? source.label ?? "",
+            itemOrder: item.itemOrder ?? (source.order === "source" ? itemOrder : void 0)
           })));
           this._renderResults();
-        } catch (error) {
+        } catch (error2) {
           if (request.signal.aborted || sequence !== this._requestSequence) return;
-          this.emit("error", { source, error });
+          this.emit("error", { source, error: error2 });
         }
       }));
       if (request.signal.aborted || sequence !== this._requestSequence) return;
@@ -19035,23 +20182,36 @@ var zx = (() => {
     }
     /** @returns {void} */
     _renderResults() {
-      const remote = orderedLauncherSourceItems(this._sources, this._sourceItems);
+      const queryKey = this._query;
+      const activeId = 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 rankedLocal = rankLauncherItems(local, query, this.options.maxResults);
+      const remote = this._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)),
+          query,
+          this.options.maxResults
+        );
+      });
       const seen = /* @__PURE__ */ new Set();
-      const combined = [...this._items.map((item) => ({ ...item, _source: null })), ...remote].filter((item) => {
+      const combined = [...rankedLocal.map((item) => ({ ...item, _source: null })), ...remote].filter((item) => {
         const key = String(item.id);
         if (seen.has(key)) return false;
         seen.add(key);
         return true;
-      });
-      const ranked = rankLauncherItems(combined, this._query, this.options.maxResults);
+      }).slice(0, Math.max(0, Number(this.options.maxResults) || 0));
       const groups = /* @__PURE__ */ new Map();
-      for (const item of ranked) {
+      for (const item of combined) {
         const group = String(item.group ?? "");
         if (!groups.has(group)) groups.set(group, []);
         groups.get(group).push(item);
       }
       this._results = [...groups.values()].flat();
-      this._active = this._results.findIndex((item) => !item.disabled);
+      this._renderedQuery = queryKey;
+      const preserved = activeId === null ? -1 : this._results.findIndex((item) => !item.disabled && String(item.id) === activeId);
+      this._active = preserved >= 0 ? preserved : this._results.findIndex((item) => !item.disabled);
       const nodes = [];
       let index = 0;
       for (const [group, items] of groups) {
@@ -19059,7 +20219,8 @@ var zx = (() => {
         if (group) nodes.push(h("div", {
           class: "zx-launcher__group",
           role: "group",
-          ariaLabel: group
+          ariaLabel: group,
+          dataset: { layout: items.every((item) => item.kind === "application") ? "grid" : "list" }
         }, h("div", { class: "zx-launcher__group-label", ariaHidden: "true" }, group), options));
         else nodes.push(...options);
       }
@@ -19069,9 +20230,14 @@ var zx = (() => {
     }
     /** @param {RankedLauncherItem} item @param {number} index @returns {HTMLElement} */
     _option(item, index) {
-      const tag = item.href ? "a" : "button";
+      const href = safeHref(item.href);
+      const tag = href ? "a" : "button";
       const children = [];
-      if (item.icon) children.push(h("span", { class: "zx-launcher__icon" }, icon(item.icon)));
+      const visual = launcherItemIcon(item);
+      if (visual) children.push(h("span", {
+        class: "zx-launcher__icon",
+        ariaHidden: "true"
+      }, visual));
       children.push(h(
         "span",
         { class: "zx-launcher__copy" },
@@ -19084,14 +20250,20 @@ var zx = (() => {
         h(tag, {
           class: "zx-launcher__option",
           type: tag === "button" ? "button" : null,
-          href: item.href ?? null,
+          href,
           target: item.target ?? null,
+          rel: tag === "a" ? "noopener" : null,
           role: "option",
           id: uid("zx-launcher-option"),
           tabIndex: -1,
           ariaSelected: "false",
           ariaDisabled: item.disabled ? "true" : null,
-          dataset: { launcherIndex: index, pinned: item.pinned ? "true" : null }
+          ariaCurrent: item.current ? "page" : null,
+          dataset: {
+            launcherIndex: index,
+            pinned: item.pinned !== void 0 && item.pinned !== false ? "true" : null,
+            kind: normalizeLauncherKind(item.kind)
+          }
         }, children)
       );
     }
@@ -19128,6 +20300,17 @@ var zx = (() => {
       }
       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);
+        if (next !== null) {
+          event.preventDefault();
+          this._active = next;
+          this._syncActive();
+          this.refs.results.querySelector(`[data-launcher-index="${this._active}"]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+          return;
+        }
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") 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;
@@ -19139,6 +20322,15 @@ var zx = (() => {
       this._syncActive();
       this.refs.results.querySelector(`[data-launcher-index="${this._active}"]`)?.scrollIntoView({ block: "nearest" });
     }
+    /** @param {string} direction @param {number[]} enabled @returns {number|null} */
+    _spatialIndex(direction, enabled) {
+      const current = this.refs.results.querySelector(`[data-launcher-index="${this._active}"]`);
+      if (!(current instanceof HTMLElement)) return null;
+      if ((direction === "ArrowLeft" || direction === "ArrowRight") && this._results[this._active]?.kind !== "application") return null;
+      const candidates = [...this.refs.results.querySelectorAll("[data-launcher-index]")].filter((option) => enabled.includes(Number(option.getAttribute("data-launcher-index"))) && (direction !== "ArrowLeft" && direction !== "ArrowRight" || option.getAttribute("data-kind") === "application"));
+      const next = findSpatialLauncherOption(candidates, current, direction);
+      return next ? Number(next.getAttribute("data-launcher-index")) : null;
+    }
     /** @param {number} index @param {Event} event @returns {void} */
     _activate(index, event) {
       const item = this._results[index];
@@ -19164,25 +20356,103 @@ var zx = (() => {
     }
     /** @param {KeyboardEvent} event @returns {void} */
     _onDocumentKeydown(event) {
-      if (this.options.shortcut !== "mod+k" || event.isComposing || event.key.toLowerCase() !== "k" || !event.metaKey && !event.ctrlKey || event.altKey) return;
+      if (this.options.shortcut !== "mod+k" || event.isComposing || event.key.toLowerCase() !== "k" || Number(event.metaKey) + Number(event.ctrlKey) !== 1 || event.altKey || event.shiftKey) return;
       const active = document.activeElement;
-      if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable) return;
+      if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLSelectElement || active instanceof HTMLElement && active.isContentEditable) return;
       const modal = document.querySelector("dialog:modal");
       if (modal && modal !== this.el) return;
       event.preventDefault();
       this.open();
     }
   };
+  function launcherShortcutLabel() {
+    const platform = String(
+      /** @type {any} */
+      navigator.userAgentData?.platform ?? navigator.platform ?? ""
+    );
+    return /mac|iphone|ipad/i.test(platform) ? "\u2318 K" : "Ctrl K";
+  }
+  function launcherHints(hints) {
+    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")
+    );
+  }
+  function launcherItemIcon(item) {
+    let visual = item.icon;
+    if (typeof visual === "function") visual = visual(item);
+    if (typeof visual === "string") return icon(visual);
+    if (visual instanceof Node) return visual.cloneNode(true);
+    if (visual && typeof visual === "object" && typeof /** @type {any} */
+    visual.toElement === "function") {
+      const element = (
+        /** @type {any} */
+        visual.toElement()
+      );
+      return element instanceof Node ? element.cloneNode(true) : null;
+    }
+    return null;
+  }
+  function normalizeLauncherKind(kind) {
+    return kind === "application" || kind === "record" ? kind : "action";
+  }
+  function visibleForQuery(when, query) {
+    if (when === "empty") return query === "";
+    if (when === "query") return query !== "";
+    return true;
+  }
+  function findSpatialLauncherOption(options, current, direction) {
+    const origin = current.getBoundingClientRect();
+    if (origin.width === 0 && origin.height === 0) return null;
+    const originX = origin.left + origin.width / 2;
+    const originY = origin.top + origin.height / 2;
+    let best = null;
+    let bestScore = Infinity;
+    for (const option of options) {
+      if (option === current) continue;
+      const rect = option.getBoundingClientRect();
+      const dx = rect.left + rect.width / 2 - originX;
+      const dy = rect.top + rect.height / 2 - originY;
+      let valid = false;
+      let score = Infinity;
+      if (direction === "ArrowLeft") {
+        valid = dx < -2 && Math.abs(dy) < Math.max(origin.height, rect.height) / 2;
+        score = Math.abs(dx) + Math.abs(dy) * 4;
+      } else if (direction === "ArrowRight") {
+        valid = dx > 2 && Math.abs(dy) < Math.max(origin.height, rect.height) / 2;
+        score = Math.abs(dx) + Math.abs(dy) * 4;
+      } else if (direction === "ArrowUp") {
+        valid = dy < -2;
+        score = Math.abs(dy) * 10 + Math.abs(dx);
+      } else if (direction === "ArrowDown") {
+        valid = dy > 2;
+        score = Math.abs(dy) * 10 + Math.abs(dx);
+      }
+      if (valid && score < bestScore) {
+        best = option;
+        bestScore = score;
+      }
+    }
+    return best;
+  }
   function rankLauncherItems(items, query, limit = 100) {
     const needle = searchable(query).trim();
     const ranked = items.map((item, order) => ({ item, order, score: launcherScore(item, needle) })).filter(({ score }) => score < Infinity);
     ranked.sort((a, b) => {
+      const aGroup = finiteOrder(a.item.groupOrder);
+      const bGroup = finiteOrder(b.item.groupOrder);
+      if (aGroup !== bGroup) return aGroup - bGroup;
       if (needle === "") {
         const aPinned = pinOrder(a.item.pinned, a.order);
         const bPinned = pinOrder(b.item.pinned, b.order);
         if (aPinned !== bPinned) return aPinned - bPinned;
       }
-      return a.score - b.score || compareLauncherText(a.item.label, b.item.label) || a.order - b.order;
+      return a.score - b.score || finiteOrder(a.item.itemOrder) - finiteOrder(b.item.itemOrder) || compareLauncherText(a.item.label, b.item.label) || a.order - b.order;
     });
     const maximum = Math.max(0, Number(limit) || 0);
     return ranked.slice(0, maximum || 0).map(({ item, score }) => ({ ...item, _score: score }));
@@ -19206,6 +20476,9 @@ var zx = (() => {
     if (pinned) return order;
     return Number.MAX_SAFE_INTEGER;
   }
+  function finiteOrder(value) {
+    return typeof value === "number" && Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER;
+  }
   function searchable(value) {
     return String(value ?? "").normalize("NFKD").replace(/\p{M}/gu, "").toLowerCase();
   }
@@ -19220,15 +20493,23 @@ var zx = (() => {
   }
   function normalizeItems2(items) {
     if (!Array.isArray(items)) return [];
-    return items.filter((item) => item && typeof item === "object" && item.id != null && item.label != null).map((item) => ({ ...item, label: String(item.label) }));
+    return items.filter((item) => item && typeof item === "object" && item.id != null && item.label != null).map((item) => normalizeLauncherItem(item));
+  }
+  function normalizeLauncherItem(item) {
+    const normalized = { ...item, label: String(item.label) };
+    if (item.href == null) return normalized;
+    const href = safeHref(item.href);
+    if (href !== null) normalized.href = href;
+    else {
+      delete normalized.href;
+      if (typeof normalized.invoke !== "function") normalized.disabled = true;
+    }
+    return normalized;
   }
   function normalizeSources(sources) {
     if (!Array.isArray(sources)) return [];
     return sources.filter((source) => source && typeof source === "object" && source.id != null && typeof source.load === "function").map((source) => ({ ...source, id: String(source.id) }));
   }
-  function orderedLauncherSourceItems(sources, sourceItems) {
-    return sources.flatMap((source) => sourceItems.get(String(source.id)) ?? []);
-  }
 
   // src/components/avatar/avatar.js
   var Avatar = class extends Component {
@@ -19647,7 +20928,7 @@ var zx = (() => {
       this.#content = this.options.content;
       this.#disabled = Boolean(this.options.disabled);
       this.#describedBy = resolved.getAttribute("aria-describedby");
-      this.el.style.setProperty("--zx-tooltip-max-inline-size", cssLength2(this.options.maxWidth));
+      this.el.style.setProperty("--zx-tooltip-max-inline-size", cssLength3(this.options.maxWidth));
       const trigger = TRIGGERS.has(this.options.trigger) ? this.options.trigger : "both";
       if (trigger === "manual") return;
       if (trigger === "hover" || trigger === "both") {
@@ -19905,7 +21186,7 @@ var zx = (() => {
     if (!tokens.includes(token)) tokens.push(token);
     return tokens.join(" ");
   }
-  function cssLength2(value) {
+  function cssLength3(value) {
     return typeof value === "number" && Number.isFinite(value) ? `${value}px` : String(value);
   }
   function isFocusVisible(element) {
@@ -19916,10 +21197,10 @@ var zx = (() => {
     }
   }
 
-  // src/components/app-rail/app-rail.js
-  var AppRail = class extends Component {
+  // src/internal/app-rail.js
+  var AppRailPresenter = class extends Component {
     static cssName = "app-rail";
-    /** @type {Readonly<AppRailOptions>} */
+    /** @type {Readonly<AppRailPresenterOptions>} */
     static defaults = {
       items: [],
       active: null,
@@ -19929,12 +21210,13 @@ var zx = (() => {
       header: null,
       footer: null,
       openDelay: 80,
-      closeDelay: 160
+      closeDelay: 160,
+      renderIcon: null
     };
     /**
      * Creates or enhances a rail host.
      * @param {Element|string|null} target Rail target.
-     * @param {AppRailOptions} [options={}] Rail options.
+     * @param {AppRailPresenterOptions} [options={}] Rail options.
      */
     constructor(target = null, options = {}) {
       super(target, options);
@@ -20084,7 +21366,14 @@ var zx = (() => {
           index: String(item.id),
           iconOnly: true,
           disclosure: hasChildren,
-          disclosureIcon: railDisclosureIcon(this.el.dataset.side)
+          disclosureIcon: railDisclosureIcon(this.el.dataset.side),
+          visual: appNavIcon(item, this.options.renderIcon, {
+            orientation: this.el.dataset.orientation,
+            collapsed: true,
+            side: this.el.dataset.side,
+            level: 1,
+            location: "root"
+          })
         });
         const row2 = h("li", { class: "zx-app-rail__row" }, control);
         this.refs.list.append(row2);
@@ -20125,7 +21414,14 @@ var zx = (() => {
           index: childKey,
           iconOnly: false,
           disclosure: hasChildren,
-          disclosureIcon: nestedDisclosureIcon(this.el.dataset.side)
+          disclosureIcon: nestedDisclosureIcon(this.el.dataset.side),
+          visual: appNavIcon(child, this.options.renderIcon, {
+            orientation: this.el.dataset.orientation,
+            collapsed: true,
+            side: this.el.dataset.side,
+            level: childKey.split("/").length,
+            location: "flyout"
+          })
         });
         list.append(h("li", {}, control));
         if (hasChildren) this._buildFlyout(child, control, childKey, key);
@@ -20179,7 +21475,6 @@ var zx = (() => {
       this._interaction.listen(trigger, "click", (event) => {
         event.preventDefault();
         if (event instanceof MouseEvent && event.detail === 0) this.openFlyout(key, { focus: true });
-        else if (dropdown.isOpen()) this.closeFlyout(key);
         else this.openFlyout(key);
       });
       this._interaction.listen(actualPanel, "pointerenter", () => this._cancelFlyoutTimers(flyout, true));
@@ -20434,14 +21729,43 @@ var zx = (() => {
   };
   function normalizeAppItems(items) {
     if (!Array.isArray(items)) return [];
-    return items.filter((item) => item && typeof item === "object" && item.id != null && item.label != null).map((item) => ({
-      ...item,
-      label: String(item.label),
-      children: Array.isArray(item.children) ? normalizeAppItems(item.children) : []
-    }));
+    return items.filter((item) => item && typeof item === "object" && item.id != null && item.label != null).map((item) => {
+      const normalized = {
+        ...item,
+        label: String(item.label),
+        children: Array.isArray(item.children) ? normalizeAppItems(item.children) : []
+      };
+      if (item.href == null) return normalized;
+      const href = safeHref(item.href);
+      if (href !== null) normalized.href = href;
+      else {
+        delete normalized.href;
+        if (normalized.children.length === 0 && typeof normalized.invoke !== "function") {
+          normalized.disabled = true;
+        }
+      }
+      return normalized;
+    });
   }
-  function navControl(item, { className, index, iconOnly, disclosure, disclosureIcon }) {
-    const tag = item.href && !disclosure ? "a" : "button";
+  function appNavIcon(item, renderer, context) {
+    let visual = typeof renderer === "function" ? renderer(item, context) : null;
+    if (visual == null) visual = item.icon;
+    if (typeof visual === "function") visual = visual(context, item);
+    if (typeof visual === "string") return icon(visual);
+    if (visual instanceof Node) return visual.cloneNode(true);
+    if (visual && typeof visual === "object" && typeof /** @type {any} */
+    visual.toElement === "function") {
+      const element = (
+        /** @type {any} */
+        visual.toElement()
+      );
+      return element instanceof Node ? element.cloneNode(true) : null;
+    }
+    return null;
+  }
+  function navControl(item, { className, index, iconOnly, disclosure, disclosureIcon, visual }) {
+    const href = safeHref(item.href);
+    const tag = href && !disclosure ? "a" : "button";
     return (
       /** @type {HTMLElement} */
       h(
@@ -20449,13 +21773,14 @@ var zx = (() => {
         {
           class: className,
           type: tag === "button" ? "button" : null,
-          href: tag === "a" ? item.href : null,
+          href: tag === "a" ? href : null,
           target: tag === "a" ? item.target ?? null : null,
+          rel: tag === "a" ? "noopener" : null,
           ariaLabel: iconOnly ? item.label : null,
           ariaDisabled: item.disabled ? "true" : null,
           dataset: { appNavId: index, appNavValueId: String(item.id) }
         },
-        item.icon ? h("span", { class: `${className}-icon`, ariaHidden: "true" }, icon(item.icon)) : null,
+        visual ? h("span", { class: `${className}-icon`, ariaHidden: "true" }, visual) : null,
         h("span", { class: `${className}-label` }, item.label),
         item.badge != null ? h("span", { class: `${className}-badge` }, String(item.badge)) : null,
         disclosure ? h("span", { class: `${className}-disclosure`, ariaHidden: "true" }, icon(disclosureIcon)) : null
@@ -20519,47 +21844,28 @@ var zx = (() => {
       active: null,
       expanded: [],
       collapsed: false,
+      collapsible: true,
+      orientation: "vertical",
       side: "left",
       label: "Applications",
       header: null,
       footer: null,
       railHeader: null,
-      railFooter: null
+      railFooter: null,
+      openDelay: 80,
+      closeDelay: 160,
+      renderIcon: null
     };
     /**
-     * Creates or enhances an application-sidebar host.
-     * @param {Element|string|null} target Sidebar target.
-     * @param {AppSidebarOptions} [options={}] Sidebar options.
+     * Creates or enhances an application-navigation host.
+     * @param {Element|string|null} [target=null] Navigation target.
+     * @param {AppSidebarOptions} [options={}] Navigation options.
      */
     constructor(target = null, options = {}) {
       super(target, options);
-      this.listen(this.refs.rail, "zx-select", (event) => event.stopPropagation());
-      const expandButton = h("button", {
-        class: "zx-app-sidebar__rail-toggle zx-icon-btn",
-        type: "button",
-        ariaLabel: "Expand application sidebar"
-      }, icon(this.el.dataset.side === "right" ? "chevron-left" : "chevron-right"));
-      this._railExpandButton = expandButton;
-      const railHeader = h("div", { class: "zx-app-sidebar__rail-header" }, expandButton);
-      appendSlot2(railHeader, this.options.railHeader);
-      this._rail = new AppRail(this.refs.rail, {
-        items: this._items,
-        active: this._active,
-        orientation: "vertical",
-        side: this.el.dataset.side,
-        label: this.options.label,
-        header: railHeader,
-        footer: this.options.railFooter,
-        onselect: (event) => {
-          const selected = this.emit("select", event.detail);
-          if (selected.defaultPrevented) event.preventDefault();
-        }
-      });
-      this.listen(expandButton, "click", () => {
-        this.expand();
-      });
-      this._renderTree();
-      this.setCollapsed(Boolean(this.options.collapsed), { silent: true });
+      this._rail = null;
+      this._railExpandButton = null;
+      this._renderMode();
     }
     /** @returns {HTMLElement} */
     render() {
@@ -20577,57 +21883,39 @@ var zx = (() => {
       this._active = this.options.active;
       this._expanded = new Set(Array.isArray(this.options.expanded) ? this.options.expanded.map(String) : []);
       this._collapsed = Boolean(this.options.collapsed);
-      root.dataset.side = this.options.side === "right" ? "right" : "left";
-      const headerContent = h("div", { class: "zx-app-sidebar__header-content" });
-      appendSlot2(headerContent, this.options.header);
-      const collapseButton = h("button", {
-        ref: "collapse",
-        class: "zx-app-sidebar__collapse zx-icon-btn",
-        type: "button",
-        ariaLabel: "Minimize application sidebar"
-      }, icon(root.dataset.side === "right" ? "chevron-right" : "chevron-left"));
-      const footer = h("footer", { class: "zx-app-sidebar__footer" });
-      appendSlot2(footer, this.options.footer);
-      footer.hidden = !footer.hasChildNodes();
-      const expanded = h(
-        "div",
-        { ref: "expanded", class: "zx-app-sidebar__expanded" },
-        h("header", { class: "zx-app-sidebar__header" }, headerContent, collapseButton),
-        h(
-          "nav",
-          { class: "zx-app-sidebar__nav", ariaLabel: this.options.label },
-          h("ul", { ref: "list", class: "zx-app-sidebar__list" })
-        ),
-        footer
-      );
-      const rail = h("div", { ref: "rail", class: "zx-app-sidebar__rail" });
-      root.replaceChildren(expanded, rail);
-      this.listen(collapseButton, "click", () => {
-        this.collapse();
-      });
-      this.listen(this.refs.list, "click", (event) => this._onTreeClick(event));
+      this._orientation = this.options.orientation === "horizontal" ? "horizontal" : "vertical";
+      this._side = normalizeSide(this._orientation, this.options.side);
+      this._modeAbort = null;
+      root.replaceChildren();
       return root;
     }
-    /** Replaces the navigation tree in both expanded and rail presentations. @param {AppNavItem[]} items @returns {this} */
+    /** Replaces the navigation tree in the active presentation. @param {AppNavItem[]} items @returns {this} */
     setItems(items) {
       this._items = normalizeAppItems(items);
       this._reconcileExpanded();
-      this._renderTree();
-      this._rail.setItems(this._items);
+      if (this._rail) this._rail.setItems(this._items);
+      else this._renderTree();
       return this;
     }
-    /** Sets the active id in both presentations without routing. @param {string|number|null} id @returns {this} */
+    /** Returns a shallow copy of normalized items. @returns {AppNavItem[]} */
+    getItems() {
+      return this._items.map((item) => ({
+        ...item,
+        children: item.children?.map((child) => ({ ...child }))
+      }));
+    }
+    /** Sets the active id without routing. @param {string|number|null} id @returns {this} */
     setActive(id) {
       this._active = id;
-      this._syncActive();
-      this._rail.setActive(id);
+      if (this._rail) this._rail.setActive(id);
+      else this._syncActive();
       return this;
     }
     /** Replaces expanded branch ids. @param {Array<string|number>} ids @param {{silent?: boolean}} [options={}] @returns {this} */
     setExpanded(ids, { silent = false } = {}) {
       this._expanded = new Set(Array.isArray(ids) ? ids.map(String) : []);
       this._reconcileExpanded();
-      this._renderTree();
+      if (!this._rail) this._renderTree();
       if (!silent) this.emit("branchchange", {
         item: null,
         id: null,
@@ -20652,47 +21940,105 @@ var zx = (() => {
       const expanded = !this._expanded.has(key);
       if (expanded) this._expanded.add(key);
       else this._expanded.delete(key);
-      this._renderTree();
-      if (!silent) this.emit("branchchange", { item, id: item.id, expanded, ids: this.getExpanded() });
+      if (!this._rail) this._renderTree();
+      if (!silent) this.emit("branchchange", {
+        item,
+        id: item.id,
+        expanded,
+        ids: this.getExpanded()
+      });
       return this;
     }
-    /** Shows the expanded sidebar presentation. @param {{silent?: boolean}} [options={}] @returns {this} */
+    /** Shows the expanded vertical presentation. @param {{silent?: boolean}} [options={}] @returns {this} */
     expand(options = {}) {
       return this.setCollapsed(false, options);
     }
-    /** Shows the minimized AppRail presentation. @param {{silent?: boolean}} [options={}] @returns {this} */
+    /** Shows the minimized presentation. @param {{silent?: boolean}} [options={}] @returns {this} */
     collapse(options = {}) {
       return this.setCollapsed(true, options);
     }
-    /** Sets expanded/minimized presentation while preserving branch state. @param {boolean} collapsed @param {{silent?: boolean}} [options={}] @returns {this} */
+    /** Sets the saved vertical expanded/minimized state. @param {boolean} collapsed @param {{silent?: boolean}} [options={}] @returns {this} */
     setCollapsed(collapsed, { silent = false } = {}) {
-      const next = Boolean(collapsed);
-      const changed = next !== this._collapsed;
+      const previous = this.isCollapsed();
       const active = document.activeElement;
-      const focusRailToggle = next && Boolean(active && this.refs.expanded.contains(active));
-      const focusSidebarToggle = !next && this._rail?._containsNode(active);
-      if (!next) this._rail?.closeAllFlyouts();
-      this._collapsed = next;
-      this.el.dataset.collapsed = String(next);
-      this.refs.expanded.hidden = next;
-      this.refs.rail.hidden = !next;
-      if (focusRailToggle) this._railExpandButton?.focus();
-      else if (focusSidebarToggle) this.refs.collapse.focus();
-      if (changed && !silent) this.emit("collapsechange", { collapsed: next });
-      return this;
-    }
-    /** Reports whether the rail presentation is active. @returns {boolean} */
+      const outgoingOwnedFocus = Boolean(active && (this.el.contains(active) || this._rail?._containsNode(active)));
+      this._collapsed = Boolean(collapsed);
+      const next = this.isCollapsed();
+      if (previous !== next) {
+        this._renderMode();
+        if (outgoingOwnedFocus) {
+          if (next) this._railExpandButton?.focus();
+          else this.refs.collapse?.focus();
+        }
+        if (!silent) this.emit("collapsechange", { collapsed: next });
+      }
+      return this;
+    }
+    /** Reports the effective presentation state; horizontal navigation is always minimized. @returns {boolean} */
     isCollapsed() {
-      return this._collapsed;
+      return this._orientation === "horizontal" || this._collapsed;
+    }
+    /**
+     * Changes navigation flow/edge without replacing state.
+     * @param {{orientation?: 'vertical'|'horizontal', side?: 'left'|'right'|'top'|'bottom'}} layout
+     * @param {{silent?: boolean}} [options]
+     * @returns {this}
+     */
+    setLayout(layout = {}, { silent = false } = {}) {
+      const orientation = layout.orientation === "horizontal" ? "horizontal" : layout.orientation === "vertical" ? "vertical" : this._orientation;
+      const side = normalizeSide(orientation, layout.side ?? this._side);
+      if (orientation === this._orientation && side === this._side) return this;
+      const previous = this.isCollapsed();
+      const active = document.activeElement;
+      const outgoingOwnedFocus = Boolean(active && (this.el.contains(active) || this._rail?._containsNode(active)));
+      const focusedId = outgoingOwnedFocus && active instanceof Element ? active.closest("[data-app-nav-id]")?.getAttribute("data-app-nav-id") ?? null : null;
+      this._orientation = orientation;
+      this._side = side;
+      this._renderMode();
+      const next = this.isCollapsed();
+      if (outgoingOwnedFocus) {
+        const replacement = focusedId === null ? null : [...this.el.querySelectorAll("[data-app-nav-id]")].find((control) => control.getAttribute("data-app-nav-id") === focusedId) ?? null;
+        if (replacement instanceof HTMLElement) replacement.focus();
+        else if (next) this.focus();
+        else if (this.refs.collapse instanceof HTMLElement && !this.refs.collapse.hidden) {
+          this.refs.collapse.focus();
+        } else visibleTreeControls(this.refs.list)[0]?.focus();
+      }
+      if (previous !== next && !silent) this.emit("collapsechange", { collapsed: next });
+      return this;
     }
-    /** Returns the composed minimized rail. @returns {AppRail} */
-    getRail() {
-      return this._rail;
+    /** Opens a minimized descendant flyout. @param {string|number} id @param {{focus?: boolean}} [options={}] @returns {this} */
+    openFlyout(id, options = {}) {
+      this._rail?.openFlyout(id, options);
+      return this;
+    }
+    /** Closes a minimized descendant flyout. @param {string|number} id @returns {this} */
+    closeFlyout(id) {
+      this._rail?.closeFlyout(id);
+      return this;
     }
-    /** Destroys the rail and restores/removes the sidebar host. @returns {void} */
+    /** Closes every minimized flyout. @returns {this} */
+    closeAllFlyouts() {
+      this._rail?.closeAllFlyouts();
+      return this;
+    }
+    /** Reports whether a minimized flyout is open. @param {string|number} id @returns {boolean} */
+    isFlyoutOpen(id) {
+      return this._rail?.isFlyoutOpen(id) ?? false;
+    }
+    /** Focuses the first navigation action. @returns {this} */
+    focus() {
+      if (this._rail) this._rail.focus();
+      else visibleTreeControls(this.refs.list)[0]?.focus();
+      return this;
+    }
+    /** Destroys flyouts and restores/removes the host. @returns {void} */
     destroy() {
       const original = this._original;
-      this._rail.destroy();
+      this._modeAbort?.abort();
+      this._modeAbort = null;
+      this._rail?.destroy();
+      this._rail = null;
       super.destroy();
       if (!this._createdRoot && original) {
         for (const attribute of Array.from(this.el.attributes)) this.el.removeAttribute(attribute.name);
@@ -20700,8 +22046,99 @@ var zx = (() => {
         this.el.replaceChildren(...original.children);
       }
     }
+    /** Mounts exactly one expanded tree or minimized flyout presentation. @returns {void} */
+    _renderMode() {
+      this._modeAbort?.abort();
+      this._modeAbort = new AbortController();
+      this._rail?.destroy();
+      this._rail = null;
+      this._railExpandButton = null;
+      for (const key of ["expanded", "list", "collapse", "rail"]) delete this.refs[key];
+      this.el.replaceChildren();
+      this.el.dataset.orientation = this._orientation;
+      this.el.dataset.side = this._side;
+      this.el.dataset.collapsed = String(this.isCollapsed());
+      if (this.isCollapsed()) this._renderRail();
+      else this._renderExpanded();
+    }
+    /** @returns {void} */
+    _renderExpanded() {
+      const headerContent = h("div", { class: "zx-app-sidebar__header-content" });
+      appendSlot2(headerContent, this.options.header);
+      const collapseButton = h("button", {
+        class: "zx-app-sidebar__collapse zx-icon-btn",
+        type: "button",
+        ariaLabel: "Minimize application sidebar"
+      }, icon(this._side === "right" ? "chevron-right" : "chevron-left"));
+      collapseButton.hidden = !this.options.collapsible;
+      const footer = h("footer", { class: "zx-app-sidebar__footer" });
+      appendSlot2(footer, this.options.footer);
+      footer.hidden = !footer.hasChildNodes();
+      const list = h("ul", { class: "zx-app-sidebar__list" });
+      const expanded = h(
+        "div",
+        { class: "zx-app-sidebar__expanded" },
+        h("header", { class: "zx-app-sidebar__header" }, headerContent, collapseButton),
+        h("nav", { class: "zx-app-sidebar__nav", ariaLabel: this.options.label }, list),
+        footer
+      );
+      this.refs.expanded = expanded;
+      this.refs.list = list;
+      this.refs.collapse = collapseButton;
+      this.el.append(expanded);
+      this._listenMode(collapseButton, "click", () => this.collapse());
+      this._listenMode(list, "click", (event) => this._onTreeClick(event));
+      this._listenMode(list, "keydown", (event) => this._onTreeKeydown(
+        /** @type {KeyboardEvent} */
+        event
+      ));
+      this._renderTree();
+    }
+    /** @returns {void} */
+    _renderRail() {
+      const railHost = h("nav", { class: "zx-app-sidebar__rail" });
+      this.el.append(railHost);
+      this.refs.rail = railHost;
+      const showToggle = this._orientation === "vertical" && Boolean(this.options.collapsible);
+      const railHeader = h("div", { class: "zx-app-sidebar__rail-header" });
+      if (showToggle) {
+        const expandButton = h("button", {
+          class: "zx-app-sidebar__rail-toggle zx-icon-btn",
+          type: "button",
+          ariaLabel: "Expand application sidebar"
+        }, icon(this._side === "right" ? "chevron-left" : "chevron-right"));
+        railHeader.append(expandButton);
+        this._railExpandButton = expandButton;
+        this._listenMode(expandButton, "click", () => this.expand());
+      }
+      appendSlot2(railHeader, this.options.railHeader);
+      this._rail = new AppRailPresenter(railHost, {
+        items: this._items,
+        active: this._active,
+        orientation: this._orientation,
+        side: this._side,
+        label: this.options.label,
+        header: railHeader.hasChildNodes() ? railHeader : null,
+        footer: this.options.railFooter,
+        openDelay: this.options.openDelay,
+        closeDelay: this.options.closeDelay,
+        renderIcon: this.options.renderIcon,
+        onselect: (event) => {
+          const selected = this.emit("select", event.detail);
+          if (selected.defaultPrevented) event.preventDefault();
+        },
+        onflyoutchange: (event) => this.emit("flyoutchange", event.detail)
+      });
+      this._listenMode(railHost, "zx-select", (event) => event.stopPropagation());
+      this._listenMode(railHost, "zx-flyoutchange", (event) => event.stopPropagation());
+    }
+    /** @param {EventTarget} target @param {string} type @param {EventListener} listener @returns {void} */
+    _listenMode(target, type, listener) {
+      target.addEventListener(type, listener, { signal: this._modeAbort.signal });
+    }
     /** @returns {void} */
     _renderTree() {
+      if (!this.refs.list) return;
       const focused = this.refs.list.contains(document.activeElement) ? (
         /** @type {Element} */
         document.activeElement.closest("[data-app-nav-id]")?.getAttribute("data-app-nav-id")
@@ -20720,7 +22157,14 @@ var zx = (() => {
       const key = String(item.id);
       const expanded = hasChildren && this._expanded.has(key);
       const childId = hasChildren ? uid("zx-app-sidebar-branch") : null;
-      const control = navControl2(item, hasChildren, expanded, childId);
+      const visual = appNavIcon(item, this.options.renderIcon, {
+        orientation: this._orientation,
+        collapsed: false,
+        side: this._side,
+        level,
+        location: level === 1 ? "root" : "inline"
+      });
+      const control = navControl2(item, hasChildren, expanded, childId, visual);
       const row2 = h("li", {
         class: "zx-app-sidebar__row",
         dataset: { level }
@@ -20734,7 +22178,7 @@ var zx = (() => {
       }
       return row2;
     }
-    /** Handles dynamic tree controls without retaining detached nodes after a rerender. @param {Event} event @returns {void} */
+    /** @param {Event} event @returns {void} */
     _onTreeClick(event) {
       const control = (
         /** @type {Element|null} */
@@ -20749,6 +22193,45 @@ var zx = (() => {
       if (item.children?.length) this.toggleBranch(item.id);
       else this._select(item, event);
     }
+    /** @param {KeyboardEvent} event @returns {void} */
+    _onTreeKeydown(event) {
+      const current = (
+        /** @type {Element|null} */
+        event.target?.closest?.("[data-app-nav-id]")
+      );
+      if (!(current instanceof HTMLElement)) return;
+      const item = findItem(this._items, current.getAttribute("data-app-nav-id"));
+      const controls = visibleTreeControls(this.refs.list);
+      const index = controls.indexOf(current);
+      if (event.key === "ArrowRight" && item?.children?.length) {
+        event.preventDefault();
+        if (!this._expanded.has(String(item.id))) this.toggleBranch(item.id);
+        else visibleTreeControls(current.parentElement?.querySelector(".zx-app-sidebar__sublist"))[0]?.focus();
+        return;
+      }
+      if (event.key === "ArrowLeft") {
+        if (item?.children?.length && this._expanded.has(String(item.id))) {
+          event.preventDefault();
+          this.toggleBranch(item.id);
+          return;
+        }
+        const parentList = current.closest(".zx-app-sidebar__sublist");
+        const parentControl = parentList?.parentElement?.querySelector(":scope > [data-app-nav-id]");
+        if (parentControl instanceof HTMLElement) {
+          event.preventDefault();
+          parentControl.focus();
+        }
+        return;
+      }
+      let nextIndex;
+      if (event.key === "Home") nextIndex = 0;
+      else if (event.key === "End") nextIndex = controls.length - 1;
+      else if (event.key === "ArrowDown") nextIndex = Math.min(controls.length - 1, index + 1);
+      else if (event.key === "ArrowUp") nextIndex = Math.max(0, index - 1);
+      else return;
+      event.preventDefault();
+      controls[nextIndex]?.focus();
+    }
     /** @param {AppNavItem} item @param {Event} event @returns {void} */
     _select(item, event) {
       if (item.disabled) {
@@ -20770,14 +22253,14 @@ var zx = (() => {
     }
     /** @returns {void} */
     _syncActive() {
+      if (!this.refs.list) return;
       const activeId = this._active == null ? null : String(this._active);
       for (const control of this.refs.list.querySelectorAll("[data-app-nav-id]")) {
         const item = findItem(this._items, control.getAttribute("data-app-nav-id"));
         const direct = activeId !== null && control.getAttribute("data-app-nav-id") === activeId;
         const descendant = activeId !== null && item ? containsItemId2(item.children ?? [], activeId) : false;
-        if (direct) {
-          control.setAttribute("aria-current", "page");
-        } else control.removeAttribute("aria-current");
+        if (direct) control.setAttribute("aria-current", "page");
+        else control.removeAttribute("aria-current");
         if (descendant) control.dataset.activeDescendant = "true";
         else delete control.dataset.activeDescendant;
       }
@@ -20791,7 +22274,7 @@ var zx = (() => {
       for (const id of this._expanded) if (!branchIds.has(id)) this._expanded.delete(id);
     }
   };
-  function navControl2(item, disclosure, expanded, controls) {
+  function navControl2(item, disclosure, expanded, controls, visual) {
     const tag = item.href && !disclosure ? "a" : "button";
     return (
       /** @type {HTMLElement} */
@@ -20807,7 +22290,7 @@ var zx = (() => {
           ariaControls: controls,
           dataset: { appNavId: String(item.id) }
         },
-        item.icon ? h("span", { class: "zx-app-sidebar__item-icon", ariaHidden: "true" }, icon(item.icon)) : null,
+        visual ? h("span", { class: "zx-app-sidebar__item-icon", ariaHidden: "true" }, visual) : null,
         h("span", { class: "zx-app-sidebar__item-label" }, item.label),
         item.badge != null ? h("span", { class: "zx-app-sidebar__item-badge" }, String(item.badge)) : null,
         disclosure ? h(
@@ -20818,6 +22301,13 @@ var zx = (() => {
       )
     );
   }
+  function visibleTreeControls(root) {
+    if (!root) return [];
+    return (
+      /** @type {HTMLElement[]} */
+      [...root.querySelectorAll("[data-app-nav-id]")].filter((control) => !control.closest(".zx-app-sidebar__sublist[hidden]"))
+    );
+  }
   function visibleTreeControl(control) {
     let candidate = (
       /** @type {HTMLElement|null} */
@@ -20850,12 +22340,17 @@ var zx = (() => {
   }
   function appendSlot2(target, content) {
     if (content == null) return;
-    if (typeof content === "string" || typeof content === "number") target.append(document.createTextNode(String(content)));
-    else if (typeof content === "object" && typeof content.toElement === "function") {
+    if (typeof content === "string" || typeof content === "number") {
+      target.append(document.createTextNode(String(content)));
+    } else if (typeof content === "object" && typeof content.toElement === "function") {
       const element = content.toElement();
       if (element) target.append(element);
     } else if (typeof content === "object" && typeof content.nodeType === "number") target.append(content);
   }
+  function normalizeSide(orientation, side) {
+    if (orientation === "horizontal") return side === "bottom" ? "bottom" : "top";
+    return side === "right" ? "right" : "left";
+  }
 
   // src/components/message/message.js
   var MessageQueue = class {
@@ -22192,7 +23687,7 @@ var zx = (() => {
      * @param {GridOptions & import('../table/table.js').TableOptions} [options={}] Grid/Table options.
      */
     constructor(target = null, options = {}) {
-      super(target, options);
+      super(target, { editTrigger: "single", ...options });
     }
     /**
      * Creates an editable hierarchical billing-line grid.
@@ -22223,14 +23718,17 @@ var zx = (() => {
     } = options;
     const fields = { ...DEFAULT_FIELDS, ...requestedFields };
     const calculateLineTotal = typeof lineTotal === "function" ? lineTotal : (row2) => {
-      const quantity = Number(row2?.[fields.quantity]);
-      const price = Number(row2?.[fields.unitPrice]);
-      return Number.isFinite(quantity) && Number.isFinite(price) ? quantity * price : null;
+      const quantity = billingNumber(row2?.[fields.quantity]);
+      const price = billingNumber(row2?.[fields.unitPrice]);
+      return quantity !== null && price !== null ? quantity * price : null;
     };
     const columns = Array.isArray(suppliedColumns) ? suppliedColumns.map((column) => ({ ...column })) : billingColumns(fields, { units, currencies, currency, locale, decimals, columnOverrides });
     return {
       rowId: fields.id,
       editMode: "cell",
+      editTrigger: "single",
+      rowReorder: true,
+      columnVisibility: true,
       hierarchy: { parentId: fields.parent, column: fields.item, expanded: true },
       responsive: "sm",
       ...tableOptions,
@@ -22330,6 +23828,11 @@ var zx = (() => {
   function hasChoices(value) {
     return Array.isArray(value) ? value.length > 0 : Boolean(value && typeof value === "object" && Object.keys(value).length);
   }
+  function billingNumber(value) {
+    if (value == null || typeof value === "string" && value.trim() === "") return null;
+    const number2 = Number(value);
+    return Number.isFinite(number2) ? number2 : null;
+  }
 
   // src/components/chart/chart.js
   var Chart = class extends Component {
@@ -22377,6 +23880,7 @@ var zx = (() => {
       this._chartOptions = cloneChartValue(this.options.chartOptions);
       this._loading = Boolean(this.options.loading);
       this._error = null;
+      this._hasError = false;
       this._handle = null;
       this._destroyed = false;
       const descriptionId = uid("zx-chart-description");
@@ -22422,6 +23926,7 @@ var zx = (() => {
     setData(data) {
       this._data = normalizeChartData(data);
       this._error = null;
+      this._hasError = false;
       this._loading = false;
       this._renderSummary();
       this._mountOrUpdate(true);
@@ -22455,8 +23960,9 @@ var zx = (() => {
       return this;
     }
     /** Shows an error and destroys the current engine. @param {unknown} error @returns {this} */
-    setError(error) {
-      this._error = error ?? new Error(String(this.options.errorText));
+    setError(error2) {
+      this._error = error2 ?? new Error(String(this.options.errorText));
+      this._hasError = true;
       this._loading = false;
       this._destroyHandle();
       this._syncState();
@@ -22466,6 +23972,7 @@ var zx = (() => {
     /** Clears the error and remounts when data and an adapter are available. @returns {this} */
     clearError() {
       this._error = null;
+      this._hasError = false;
       this._mountOrUpdate(false);
       return this;
     }
@@ -22473,8 +23980,8 @@ var zx = (() => {
     resize() {
       try {
         this._handle?.resize?.();
-      } catch (error) {
-        this.setError(error);
+      } catch (error2) {
+        this.setError(error2);
       }
       return this;
     }
@@ -22504,7 +24011,7 @@ var zx = (() => {
     /** @param {boolean} emitUpdate @returns {void} */
     _mountOrUpdate(emitUpdate) {
       this._syncState();
-      if (this._loading || this._error || isEmptyChartData(this._data)) {
+      if (this._loading || this._hasError || isEmptyChartData(this._data)) {
         this._destroyHandle();
         return;
       }
@@ -22527,8 +24034,8 @@ var zx = (() => {
           this.emit("ready", { instance: this.getInstance() });
         }
         if (emitUpdate) this.emit("update", { data: this._data, type: this._type });
-      } catch (error) {
-        this.setError(error);
+      } catch (error2) {
+        this.setError(error2);
       }
     }
     /** @returns {ChartSpec} */
@@ -22559,7 +24066,7 @@ var zx = (() => {
     /** @returns {void} */
     _syncState() {
       const empty = isEmptyChartData(this._data);
-      const state = this._loading ? "loading" : this._error ? "error" : empty ? "empty" : "ready";
+      const state = this._loading ? "loading" : this._hasError ? "error" : empty ? "empty" : "ready";
       this.el.dataset.state = state;
       this.refs.viewport.hidden = state !== "ready";
       let text4 = "";
@@ -22770,8 +24277,9 @@ var zx = (() => {
       borderColor: borderColor || void 0
     };
   }
-  function errorMessage(error, fallback) {
-    return error && typeof error === "object" && "message" in error ? String(error.message) : String(fallback);
+  function errorMessage(error2, fallback) {
+    const message = error2 && typeof error2 === "object" && "message" in error2 ? String(error2.message) : "";
+    return message.trim() ? message : String(fallback);
   }
 
   // src/components/tree/hierarchy.js
@@ -23409,8 +24917,8 @@ var zx = (() => {
           node[this._childrenKey] = Array.isArray(children) ? children : [];
           if (node[this._childrenKey].length === 0) node.hasChildren = false;
           return true;
-        } catch (error) {
-          this.emit("error", { error, node, id });
+        } catch (error2) {
+          this.emit("error", { error: error2, node, id });
           return false;
         } finally {
           this._loading.delete(id);
@@ -23898,9 +25406,9 @@ var zx = (() => {
           const children = await this.options.load(node);
           node[this._childrenKey] = Array.isArray(children) ? children : [];
           if (node[this._childrenKey].length === 0) node.hasChildren = false;
-        } catch (error) {
+        } catch (error2) {
           node[this._childrenKey] = [];
-          this.emit("error", { error, node, id });
+          this.emit("error", { error: error2, node, id });
         } finally {
           this._loading.delete(id);
         }
@@ -24330,6 +25838,821 @@ var zx = (() => {
     }
   }
 
+  // src/components/filter/filter-model.js
+  var filterOperators = Object.freeze([
+    op("contains", "contains", "single", ["text"]),
+    op("notContains", "does not contain", "single", ["text"]),
+    op("eq", "is", "single", ["text", "number", "money", "boolean", "enum", "status", "priority", "country", "currency", "unit", "entity", "date", "datetime"]),
+    op("neq", "is not", "single", ["text", "number", "money", "boolean", "enum", "status", "priority", "country", "currency", "unit", "entity", "date", "datetime"]),
+    op("startsWith", "starts with", "single", ["text"]),
+    op("endsWith", "ends with", "single", ["text"]),
+    op("lt", "is less than", "single", ["number", "money"]),
+    op("lte", "is at most", "single", ["number", "money"]),
+    op("gt", "is greater than", "single", ["number", "money"]),
+    op("gte", "is at least", "single", ["number", "money"]),
+    op("on", "is on", "single", ["date", "datetime"]),
+    op("notOn", "is not on", "single", ["date", "datetime"]),
+    op("before", "is before", "single", ["date", "datetime"]),
+    op("onOrBefore", "is on or before", "single", ["date", "datetime"]),
+    op("after", "is after", "single", ["date", "datetime"]),
+    op("onOrAfter", "is on or after", "single", ["date", "datetime"]),
+    op("between", "is between", "pair", ["number", "money", "date", "datetime"]),
+    op("notBetween", "is not between", "pair", ["number", "money", "date", "datetime"]),
+    op("withinLast", "is within the last", "pair", ["date", "datetime"]),
+    op("withinNext", "is within the next", "pair", ["date", "datetime"]),
+    op("anyOf", "is any of", "many", ["enum", "status", "priority", "country", "currency", "unit", "entity"]),
+    op("noneOf", "is none of", "many", ["enum", "status", "priority", "country", "currency", "unit", "entity"]),
+    op("containsAny", "contains any", "many", ["tags"]),
+    op("containsAll", "contains all", "many", ["tags"]),
+    op("containsNone", "contains none", "many", ["tags"]),
+    op("isEmpty", "is empty", "none", ["text", "number", "money", "date", "datetime", "boolean", "enum", "status", "priority", "country", "currency", "unit", "entity", "tags"]),
+    op("isNotEmpty", "is not empty", "none", ["text", "number", "money", "date", "datetime", "boolean", "enum", "status", "priority", "country", "currency", "unit", "entity", "tags"])
+  ]);
+  function emptyFilterAst() {
+    return { version: 1, root: { kind: "group", id: uid("filter-root"), logic: "and", children: [] } };
+  }
+  function filterCondition(initial = {}) {
+    return {
+      kind: "condition",
+      id: String(initial.id || uid("filter-condition")),
+      field: String(initial.field ?? ""),
+      operator: String(initial.operator ?? ""),
+      value: cloneFilterValue(initial.value ?? null)
+    };
+  }
+  function cloneFilterValue(value) {
+    return cloneJson(value);
+  }
+  function filterGroup(logic = "and", children = []) {
+    return { kind: "group", id: uid("filter-group"), logic, children };
+  }
+  function parseFilterAst(value, limits = {}) {
+    const maxDepth = finiteLimit(limits.maxDepth, 3);
+    const maxConditions = finiteLimit(limits.maxConditions, 50);
+    if (!plainObject(value) || value.version !== 1 || !plainObject(value.root)) {
+      throw new TypeError("Filter AST must have version 1 and a root group");
+    }
+    const ids = /* @__PURE__ */ new Set();
+    let conditions = 0;
+    const visit = (raw2, depth, root2 = false) => {
+      if (!plainObject(raw2)) throw new TypeError("Filter nodes must be plain objects");
+      const id = String(raw2.id ?? "").trim();
+      if (!id || ids.has(id)) throw new TypeError("Filter node IDs must be non-empty and unique");
+      ids.add(id);
+      if (raw2.kind === "group") {
+        if (depth > maxDepth) throw new RangeError("Filter group depth exceeds maxDepth");
+        if (raw2.logic !== "and" && raw2.logic !== "or") throw new TypeError("Filter group logic must be and or or");
+        if (!Array.isArray(raw2.children)) throw new TypeError("Filter group children must be an array");
+        return {
+          kind: "group",
+          id,
+          logic: raw2.logic,
+          children: raw2.children.map((child) => visit(child, depth + 1, false))
+        };
+      }
+      if (root2 || raw2.kind !== "condition") throw new TypeError("Filter root must be a group");
+      conditions += 1;
+      if (conditions > maxConditions) throw new RangeError("Filter condition count exceeds maxConditions");
+      return {
+        kind: "condition",
+        id,
+        field: String(raw2.field ?? ""),
+        operator: String(raw2.operator ?? ""),
+        value: cloneJson(raw2.value)
+      };
+    };
+    const root = visit(value.root, 0, true);
+    if (root.kind !== "group") throw new TypeError("Filter root must be a group");
+    return (
+      /** @type {FilterAst} */
+      { version: 1, root }
+    );
+  }
+  function cloneFilterAst(value) {
+    return parseFilterAst(value, { maxDepth: Infinity, maxConditions: Infinity });
+  }
+  function stringifyFilterAst(value) {
+    return JSON.stringify(cloneFilterAst(value));
+  }
+  function validateFilterAst(ast, fields, operators = filterOperators) {
+    const errors = [];
+    const fieldMap = new Map((Array.isArray(fields) ? fields : []).map((field) => [String(field.id), field]));
+    const operatorMap = new Map((Array.isArray(operators) ? operators : []).map((operator) => [String(operator.id), operator]));
+    const visit = (node, root = false) => {
+      if (node.kind === "group") {
+        if (!root && node.children.length === 0) errors.push(error(node.id, "empty-group", "Nested groups need at least one condition"));
+        node.children.forEach((child) => visit(child));
+        return;
+      }
+      const field = fieldMap.get(node.field);
+      if (!field) errors.push(error(node.id, "unknown-field", node.field ? `Unavailable field: ${node.field}` : "Choose a field"));
+      const operator = operatorMap.get(node.operator);
+      if (!operator) {
+        errors.push(error(node.id, "unknown-operator", node.operator ? `Unavailable operator: ${node.operator}` : "Choose an operator"));
+        return;
+      }
+      if (field) {
+        const allowed = Array.isArray(field.operators) && field.operators.length ? field.operators : operators.filter((candidate) => candidate.types.includes(field.type)).map((candidate) => candidate.id);
+        if (!allowed.includes(operator.id) || !operator.types.includes(field.type)) {
+          errors.push(error(node.id, "operator-type", `${operator.label} is not available for ${field.label}`));
+        }
+      }
+      if (!validArity(operator.arity, node.value)) {
+        errors.push(error(node.id, "value", operator.arity === "pair" ? "Enter both values" : operator.arity === "many" ? "Choose at least one value" : operator.arity === "none" ? "This operator does not accept a value" : "Enter a value"));
+      }
+    };
+    visit(ast.root, true);
+    return { valid: errors.length === 0, errors };
+  }
+  function op(id, label, arity, types) {
+    return Object.freeze({ id, label, arity, types: Object.freeze(types) });
+  }
+  function error(nodeId, code, message) {
+    return { nodeId, code, message };
+  }
+  function validArity(arity, value) {
+    if (arity === "none") return value === null;
+    if (arity === "pair") return Array.isArray(value) && value.length === 2 && value.every(filled);
+    if (arity === "many") return Array.isArray(value) && value.length > 0 && value.every(filled);
+    return filled(value);
+  }
+  function filled(value) {
+    return value !== null && value !== void 0 && !(typeof value === "string" && value.trim() === "");
+  }
+  function cloneJson(value, seen = /* @__PURE__ */ new WeakSet()) {
+    if (value === null || typeof value === "string" || typeof value === "boolean") return value;
+    if (typeof value === "number") {
+      if (!Number.isFinite(value)) throw new TypeError("Filter values cannot contain non-finite numbers");
+      return value;
+    }
+    if (typeof value !== "object" || value instanceof Date || typeof value.nodeType === "number") {
+      throw new TypeError("Filter values must be JSON-safe");
+    }
+    if (seen.has(value)) throw new TypeError("Filter values cannot contain cycles");
+    seen.add(value);
+    if (Array.isArray(value)) {
+      const result2 = value.map((item) => cloneJson(item, seen));
+      seen.delete(value);
+      return result2;
+    }
+    if (!plainObject(value)) throw new TypeError("Filter values must be plain JSON objects");
+    const result = {};
+    for (const [key, item] of Object.entries(value)) {
+      Object.defineProperty(result, key, {
+        value: cloneJson(item, seen),
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    }
+    seen.delete(value);
+    return result;
+  }
+  function plainObject(value) {
+    if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+    const prototype = Object.getPrototypeOf(value);
+    return prototype === Object.prototype || prototype === null;
+  }
+  function finiteLimit(value, fallback) {
+    if (value === Infinity) return Infinity;
+    const number2 = Number(value);
+    return Number.isFinite(number2) && number2 >= 0 ? Math.floor(number2) : fallback;
+  }
+
+  // src/components/filter/filter.js
+  var Filter = class extends Component {
+    static cssName = "filter";
+    /** @type {Readonly<FilterOptions>} */
+    static defaults = {
+      fields: [],
+      value: null,
+      operators: [],
+      allowGroups: true,
+      maxDepth: 3,
+      maxConditions: 50,
+      autoApply: false,
+      readonly: false,
+      disabled: false,
+      applyLabel: "Apply filters",
+      clearLabel: "Clear"
+    };
+    /** @returns {HTMLElement} */
+    render() {
+      this._createdRoot = this.el === null;
+      const root = (
+        /** @type {HTMLElement} */
+        this.el ?? h("div")
+      );
+      this.el = root;
+      this._snapshot = this._createdRoot ? null : snapshotTarget(root);
+      this._fields = (Array.isArray(this.options.fields) ? this.options.fields : []).map((field) => ({ ...field }));
+      this._operators = mergeOperators(filterOperators, this.options.operators);
+      this._readonly = Boolean(this.options.readonly);
+      this._disabled = Boolean(this.options.disabled);
+      this._async = /* @__PURE__ */ new Map();
+      this._customEditors = [];
+      this._value = this.options.value == null ? emptyFilterAst() : parseFilterAst(this.options.value, this._limits());
+      this.listen(root, "change", (event) => this._handleChange(event));
+      this.listen(root, "input", (event) => this._handleInput(event));
+      this.listen(root, "click", (event) => this._handleClick(event));
+      this._render();
+      return root;
+    }
+    /** Returns a defensive AST copy. @returns {FilterAst} */
+    getValue() {
+      return cloneFilterAst(this._value);
+    }
+    /** Atomically replaces the AST. @param {unknown} value @param {{silent?:boolean}} [options={}] @returns {this} */
+    setValue(value, { silent = false } = {}) {
+      const parsed = parseFilterAst(value, this._limits());
+      this._abortAll();
+      this._value = parsed;
+      this._render();
+      if (!silent) this._changed("set", this._value.root.id);
+      return this;
+    }
+    /** Adds a condition to a group. @param {string|null} [parentId=null] @param {Record<string,unknown>} [initial={}] @returns {string|null} */
+    addCondition(parentId = null, initial = {}) {
+      if (!this._canMutate() || conditionCount(this._value.root) >= Number(this.options.maxConditions)) return null;
+      const parent = findGroup(this._value.root, parentId ?? this._value.root.id);
+      if (!parent) return null;
+      const first = this._fields[0];
+      const field = String(initial.field ?? first?.id ?? "");
+      const definition = this._field(field);
+      const node = filterCondition({
+        ...initial,
+        field,
+        operator: String(initial.operator ?? this._defaultOperator(definition) ?? "")
+      });
+      parent.children.push(node);
+      this._render();
+      this._changed("add", node.id);
+      this.focus(node.id);
+      return node.id;
+    }
+    /** Adds a nested group. @param {string|null} [parentId=null] @param {'and'|'or'} [logic='and'] @returns {string|null} */
+    addGroup(parentId = null, logic = "and") {
+      if (!this._canMutate() || !this.options.allowGroups) return null;
+      const parent = findGroup(this._value.root, parentId ?? this._value.root.id);
+      if (!parent || groupDepth(this._value.root, parent.id) >= Number(this.options.maxDepth)) return null;
+      const group = filterGroup(logic === "or" ? "or" : "and");
+      parent.children.push(group);
+      this._render();
+      this._changed("add", group.id);
+      this.focus(group.id);
+      return group.id;
+    }
+    /** Updates a node by stable ID. @param {string} id @param {Record<string,unknown>} patch @returns {this} */
+    update(id, patch = {}) {
+      if (!this._canMutate()) return this;
+      const node = findNode2(this._value.root, id);
+      if (!node) return this;
+      if (node.kind === "group") {
+        if (patch.logic === "and" || patch.logic === "or") node.logic = patch.logic;
+      } else {
+        if (Object.hasOwn(patch, "field")) node.field = String(patch.field ?? "");
+        if (Object.hasOwn(patch, "operator")) node.operator = String(patch.operator ?? "");
+        if (Object.hasOwn(patch, "value")) node.value = parseValueJson(patch.value);
+      }
+      this._abort(id);
+      this._render();
+      this._changed("update", id);
+      return this;
+    }
+    /** Removes a non-root node. @param {string} id @returns {this} */
+    remove(id) {
+      if (!this._canMutate() || id === this._value.root.id) return this;
+      const parent = findParent(this._value.root, id);
+      if (!parent) return this;
+      const index = parent.children.findIndex((child) => child.id === id);
+      const focusId = parent.children[index + 1]?.id ?? parent.children[index - 1]?.id ?? parent.id;
+      const removed = removeNode(this._value.root, id);
+      if (!removed) return this;
+      this._abortTree(removed);
+      this._render();
+      const label = removed.kind === "condition" ? this._field(removed.field)?.label ?? "Filter" : "Filter group";
+      this._announce(`${label} removed`);
+      this._changed("remove", id);
+      this.focus(focusId);
+      return this;
+    }
+    /** Moves a node into a group while preserving its identity. @param {string} id @param {string} parentId @param {number} index @returns {this} */
+    move(id, parentId, index) {
+      const node = findNode2(this._value.root, id);
+      const parent = findGroup(this._value.root, parentId);
+      const previous = findParent(this._value.root, id);
+      if (!this._canMutate() || id === this._value.root.id || !node || !parent || !previous || containsNode(node, parentId)) return this;
+      const previousIndex = previous.children.findIndex((child) => child.id === id);
+      const removed = previous.children.splice(previousIndex, 1)[0];
+      parent.children.splice(Math.max(0, Math.min(parent.children.length, Number(index) || 0)), 0, removed);
+      try {
+        parseFilterAst(this._value, this._limits());
+      } catch {
+        parent.children.splice(parent.children.indexOf(removed), 1);
+        previous.children.splice(previousIndex, 0, removed);
+        return this;
+      }
+      this._render();
+      this._changed("move", id);
+      return this;
+    }
+    /** Returns semantic validity and errors. @returns {{valid:boolean,errors:Array<Record<string,string>>}} */
+    validate() {
+      return validateFilterAst(this._value, this._fields, this._operators);
+    }
+    /** Applies only a valid AST. @returns {FilterAst|null} */
+    apply() {
+      if (this._disabled) return null;
+      const result = this.validate();
+      if (!result.valid) {
+        this.emit("invalid", { errors: result.errors });
+        this.focus(result.errors[0]?.nodeId);
+        return null;
+      }
+      const value = this.getValue();
+      this.emit("apply", { value });
+      return value;
+    }
+    /** Clears all conditions. @param {{silent?:boolean}} [options={}] @returns {this} */
+    clear({ silent = false } = {}) {
+      if (!this._canMutate()) return this;
+      this._abortAll();
+      this._value.root.children = [];
+      this._render();
+      if (!silent) this._changed("clear", this._value.root.id);
+      this.refs.add?.focus();
+      return this;
+    }
+    /** Focuses a condition's field or the Add button. @param {string|null} [id=null] @returns {this} */
+    focus(id = null) {
+      const selector = id ? `[data-node-id="${cssEscape(id)}"] :is([data-filter-field], [data-filter-logic], [data-filter-action="add"])` : '[data-filter-action="add"]';
+      queueMicrotask(() => (
+        /** @type {HTMLElement|null} */
+        this.el.querySelector(selector)?.focus()
+      ));
+      return this;
+    }
+    /** @param {boolean} readonly @returns {this} */
+    setReadonly(readonly) {
+      this._readonly = Boolean(readonly);
+      this._render();
+      return this;
+    }
+    /** @returns {this} */
+    enable() {
+      this._disabled = false;
+      this._render();
+      return this;
+    }
+    /** @returns {this} */
+    disable() {
+      this._disabled = true;
+      this._abortAll();
+      this._render();
+      return this;
+    }
+    /** @returns {void} */
+    destroy() {
+      this._abortAll();
+      this._destroyEditors();
+      const root = this.el;
+      const snapshot10 = this._snapshot;
+      super.destroy();
+      if (!this._createdRoot && root) restoreTarget(root, snapshot10);
+    }
+    /** @returns {void} */
+    _render() {
+      this._destroyEditors();
+      this._renderVersion = (this._renderVersion ?? 0) + 1;
+      const status = h("div", { ref: "status", class: "zx-filter__status", role: "status", ariaLive: "polite" });
+      const tree = this._renderGroup(this._value.root, 0, true);
+      const actions2 = h(
+        "div",
+        { class: "zx-filter__actions" },
+        actionButton("add", this._value.root.id, "plus", "Add filter", { ref: "add", disabled: this._blocked() }),
+        this.options.allowGroups ? actionButton("add-group", this._value.root.id, "folder", "Add group", { disabled: this._blocked() }) : null,
+        actionButton("clear", "", "x", String(this.options.clearLabel), { disabled: this._blocked() }),
+        actionButton("apply", "", "check", String(this.options.applyLabel), { class: "zx-button--primary", disabled: this._disabled })
+      );
+      this.el.replaceChildren(status, tree, actions2);
+      this.refs.status = status;
+      this.refs.add = /** @type {HTMLElement} */
+      this.el.querySelector('[data-filter-action="add"]');
+      this.el.toggleAttribute("data-readonly", this._readonly);
+      this.el.toggleAttribute("data-disabled", this._disabled);
+      const result = this.validate();
+      this.el.dataset.valid = String(result.valid);
+      for (const error2 of result.errors) this.el.querySelector(`[data-node-id="${cssEscape(error2.nodeId)}"]`)?.setAttribute("data-invalid", "");
+    }
+    /** @param {any} group @param {number} depth @param {boolean} root @returns {HTMLElement} */
+    _renderGroup(group, depth, root) {
+      const children = h(
+        "ol",
+        { class: "zx-filter__children" },
+        group.children.map((node) => node.kind === "group" ? this._renderGroup(node, depth + 1, false) : this._renderCondition(node))
+      );
+      const logic = h(
+        "select",
+        {
+          class: "zx-filter__logic",
+          dataset: { filterLogic: "", nodeId: group.id },
+          ariaLabel: root ? "Root filter logic" : "Group filter logic",
+          disabled: this._blocked()
+        },
+        h("option", { value: "and", selected: group.logic === "and" }, "Match all"),
+        h("option", { value: "or", selected: group.logic === "or" }, "Match any")
+      );
+      const legend = h("legend", { class: "zx-filter__legend" }, logic, h("span", {}, root ? "conditions" : "in this group"));
+      const controls = h(
+        "div",
+        { class: "zx-filter__group-actions" },
+        actionButton("add", group.id, "plus", "Add filter", { disabled: this._blocked() }),
+        this.options.allowGroups && depth < Number(this.options.maxDepth) ? actionButton("add-group", group.id, "folder", "Add subgroup", { disabled: this._blocked() }) : null,
+        root ? null : actionButton("remove", group.id, "trash", "Remove group", { disabled: this._blocked() })
+      );
+      return h(root ? "fieldset" : "li", {
+        class: "zx-filter__group",
+        dataset: { nodeId: group.id, depth: String(depth) }
+      }, root ? legend : h("fieldset", {}, legend, children, controls), root ? children : null, root ? controls : null);
+    }
+    /** @param {any} node @returns {HTMLElement} */
+    _renderCondition(node) {
+      const field = this._field(node.field);
+      const operators = this._operatorsFor(field);
+      const operator = this._operator(node.operator);
+      const fieldSelect = h(
+        "select",
+        {
+          class: "zx-filter__field",
+          dataset: { filterField: "", nodeId: node.id },
+          ariaLabel: "Filter field",
+          disabled: this._blocked()
+        },
+        h("option", { value: "", selected: !node.field }, "Choose a field\u2026"),
+        this._fields.map((candidate) => h("option", { value: candidate.id, selected: candidate.id === node.field }, candidate.label)),
+        node.field && !field ? h("option", { value: node.field, selected: true }, `Unavailable: ${node.field}`) : null
+      );
+      const operatorSelect = h(
+        "select",
+        {
+          class: "zx-filter__operator",
+          dataset: { filterOperator: "", nodeId: node.id },
+          ariaLabel: "Filter operator",
+          disabled: this._blocked()
+        },
+        h("option", { value: "", selected: !node.operator }, "Choose an operator\u2026"),
+        operators.map((candidate) => h("option", { value: candidate.id, selected: candidate.id === node.operator }, candidate.label)),
+        node.operator && !operators.some((candidate) => candidate.id === node.operator) ? h("option", { value: node.operator, selected: true }, `Unavailable: ${node.operator}`) : null
+      );
+      return h(
+        "li",
+        { class: "zx-filter__condition", dataset: { nodeId: node.id } },
+        fieldSelect,
+        operatorSelect,
+        this._renderValue(node, field, operator),
+        actionButton("remove", node.id, "trash", `Remove ${field?.label ?? "filter"}`, { disabled: this._blocked() })
+      );
+    }
+    /** @param {any} node @param {FilterField|null} field @param {any} operator @returns {HTMLElement} */
+    _renderValue(node, field, operator) {
+      const host = h("div", { class: "zx-filter__value" });
+      if (!field || !operator) return host;
+      if (operator.arity === "none") return h("div", { class: "zx-filter__value zx-filter__value--empty" }, "No value");
+      if (field.type === "custom" && typeof field.editor === "function") {
+        const renderVersion = this._renderVersion;
+        queueMicrotask(() => {
+          if (renderVersion !== this._renderVersion || !this.el.contains(host)) return;
+          const handle = field.editor(host, {
+            value: node.value,
+            field,
+            conditionId: node.id,
+            setValue: (value) => this._setNodeValue(node.id, parseValueJson(value))
+          });
+          if (handle && typeof handle.destroy === "function") this._customEditors.push(handle);
+        });
+        return host;
+      }
+      const values = operator.arity === "pair" ? Array.isArray(node.value) ? node.value : [null, null] : [node.value];
+      if (operator.arity === "many") {
+        const control = choiceSelect(field, node, values[0], true, this._blocked());
+        if (control) return h("div", { class: "zx-filter__value" }, control);
+        return h("div", { class: "zx-filter__value" }, valueInput(field, node.id, Array.isArray(node.value) ? node.value.join(", ") : "", 0, this._blocked(), true));
+      }
+      const controls = values.map((value, index) => choiceSelect(field, node, value, false, this._blocked(), index) ?? valueInput(field, node.id, value, index, this._blocked()));
+      return h("div", { class: "zx-filter__value", dataset: { arity: operator.arity } }, controls);
+    }
+    /** @param {Event} event @returns {void} */
+    _handleChange(event) {
+      if (!this._canMutate()) return;
+      const target = (
+        /** @type {HTMLInputElement|HTMLSelectElement|null} */
+        event.target
+      );
+      const id = target?.dataset.nodeId;
+      if (!target || !id) return;
+      if (target.dataset.filterField !== void 0) {
+        const node = findNode2(this._value.root, id);
+        if (node?.kind !== "condition") return;
+        node.field = target.value;
+        const field = this._field(node.field);
+        node.operator = this._defaultOperator(field) ?? "";
+        node.value = null;
+        this._abort(id);
+        this._render();
+        this._changed("update", id);
+        this.focus(id);
+      } else if (target.dataset.filterOperator !== void 0) {
+        const node = findNode2(this._value.root, id);
+        if (node?.kind !== "condition") return;
+        node.operator = target.value;
+        node.value = null;
+        this._abort(id);
+        this._render();
+        this._changed("update", id);
+        queueMicrotask(() => (
+          /** @type {HTMLElement|null} */
+          this.el.querySelector(`[data-node-id="${cssEscape(id)}"] [data-filter-value]`)?.focus()
+        ));
+      } else if (target.dataset.filterLogic !== void 0) {
+        const node = findNode2(this._value.root, id);
+        if (node?.kind === "group") node.logic = target.value === "or" ? "or" : "and";
+        this._changed("update", id);
+      } else if (target.dataset.filterValue !== void 0) this._valueInput(target);
+    }
+    /** @param {Event} event @returns {void} */
+    _handleInput(event) {
+      if (!this._canMutate()) return;
+      const target = (
+        /** @type {HTMLInputElement|null} */
+        event.target
+      );
+      if (!target || target.dataset.filterValue === void 0) return;
+      this._valueInput(target);
+      const id = target.dataset.nodeId;
+      const node = findNode2(this._value.root, id);
+      const field = node?.kind === "condition" ? this._field(node.field) : null;
+      if (field?.loadChoices) this._scheduleChoices(node.id, field, target.value);
+    }
+    /** @param {HTMLInputElement|HTMLSelectElement} target @returns {void} */
+    _valueInput(target) {
+      const node = findNode2(this._value.root, target.dataset.nodeId);
+      if (node?.kind !== "condition") return;
+      const operator = this._operator(node.operator);
+      const field = this._field(node.field);
+      if (!operator || !field) return;
+      let value;
+      if (target instanceof HTMLSelectElement && target.multiple) {
+        value = Array.from(target.selectedOptions, (option) => parseScalar(option.value, field.type));
+      } else if (operator.arity === "many") {
+        value = target.value.split(",").map((item) => item.trim()).filter(Boolean).map((item) => parseScalar(item, field.type));
+      } else if (operator.arity === "pair") {
+        const pair = Array.isArray(node.value) ? [...node.value] : [null, null];
+        pair[Number(target.dataset.valueIndex) || 0] = parseScalar(target.value, field.type);
+        value = pair;
+      } else value = parseScalar(target.value, field.type);
+      this._setNodeValue(
+        node.id,
+        /** @type {any} */
+        value
+      );
+    }
+    /** @param {MouseEvent} event @returns {void} */
+    _handleClick(event) {
+      const button2 = (
+        /** @type {HTMLElement|null} */
+        event.target?.closest?.("[data-filter-action]")
+      );
+      if (!button2 || !this.el.contains(button2)) return;
+      const action = button2.dataset.filterAction;
+      const id = button2.dataset.nodeId || null;
+      if (action === "add") this.addCondition(id);
+      else if (action === "add-group") this.addGroup(id);
+      else if (action === "remove" && id) this.remove(id);
+      else if (action === "clear") this.clear();
+      else if (action === "apply") this.apply();
+    }
+    /** @param {string} id @param {any} value @returns {void} */
+    _setNodeValue(id, value) {
+      const node = findNode2(this._value.root, id);
+      if (node?.kind !== "condition") return;
+      node.value = value;
+      const result = this.validate();
+      this.el.dataset.valid = String(result.valid);
+      const row2 = this.el.querySelector(`[data-node-id="${cssEscape(id)}"]`);
+      row2?.toggleAttribute("data-invalid", result.errors.some((candidate) => candidate.nodeId === id));
+      this._changed("update", id);
+    }
+    /** @param {string} reason @param {string} nodeId @returns {void} */
+    _changed(reason, nodeId) {
+      const result = this.validate();
+      const value = this.getValue();
+      this.emit("change", { value, valid: result.valid, errors: result.errors, reason, nodeId });
+      if (this.options.autoApply && result.valid) this.emit("apply", { value });
+    }
+    /** @param {string} id @param {FilterField} field @param {string} query @returns {void} */
+    _scheduleChoices(id, field, query) {
+      this._abort(id);
+      if (query.length < Number(field.minQuery ?? 0)) return;
+      const controller = new AbortController();
+      this._setAsyncBusy(id, true);
+      const entry = { controller, timer: setTimeout(async () => {
+        this.emit("query", { conditionId: id, fieldId: field.id, query });
+        try {
+          const choices = await field.loadChoices({ query, signal: controller.signal, conditionId: id, field });
+          if (controller.signal.aborted || this._async.get(id)?.controller !== controller) return;
+          const input = this.el.querySelector(`[data-node-id="${cssEscape(id)}"] [data-filter-value]`);
+          const listId = input?.getAttribute("list");
+          const list = listId ? this.el.querySelector(`#${cssEscape(listId)}`) : null;
+          if (list) list.replaceChildren(...(Array.isArray(choices) ? choices : []).map((choice) => h("option", { value: choice.value }, choice.label)));
+          this.emit("loaded", { conditionId: id, fieldId: field.id, query, choices });
+        } catch (error2) {
+          if (!controller.signal.aborted) this.emit("error", { conditionId: id, fieldId: field.id, query, error: error2 instanceof Error ? error2 : new Error(String(error2)) });
+        } finally {
+          if (this._async.get(id)?.controller === controller) {
+            this._async.delete(id);
+            this._setAsyncBusy(id, false);
+          }
+        }
+      }, Math.max(0, Number(field.debounce ?? 200))) };
+      this._async.set(id, entry);
+    }
+    /** @param {string} id @returns {void} */
+    _abort(id) {
+      const entry = this._async.get(id);
+      if (entry) {
+        clearTimeout(entry.timer);
+        entry.controller.abort();
+        this._async.delete(id);
+        this._setAsyncBusy(id, false);
+      }
+    }
+    /** @param {string} id @param {boolean} busy @returns {void} */
+    _setAsyncBusy(id, busy) {
+      const input = this.el.querySelector(`[data-node-id="${cssEscape(id)}"] [data-filter-value]`);
+      if (busy) input?.setAttribute("aria-busy", "true");
+      else input?.removeAttribute("aria-busy");
+    }
+    /** @param {any} node @returns {void} */
+    _abortTree(node) {
+      if (node.kind === "condition") this._abort(node.id);
+      else node.children.forEach((child) => this._abortTree(child));
+    }
+    /** @returns {void} */
+    _abortAll() {
+      for (const id of [...this._async.keys()]) this._abort(id);
+    }
+    /** @returns {void} */
+    _destroyEditors() {
+      for (const editor of this._customEditors ?? []) editor.destroy?.();
+      this._customEditors = [];
+    }
+    /** @returns {boolean} */
+    _blocked() {
+      return this._readonly || this._disabled;
+    }
+    /** @returns {boolean} */
+    _canMutate() {
+      return !this._blocked();
+    }
+    /** @returns {{maxDepth:number,maxConditions:number}} */
+    _limits() {
+      return { maxDepth: Number(this.options.maxDepth), maxConditions: Number(this.options.maxConditions) };
+    }
+    /** @param {string} id @returns {FilterField|null} */
+    _field(id) {
+      return this._fields.find((field) => field.id === id) ?? null;
+    }
+    /** @param {string} id @returns {any} */
+    _operator(id) {
+      return this._operators.find((operator) => operator.id === id) ?? null;
+    }
+    /** @param {FilterField|null} field @returns {any[]} */
+    _operatorsFor(field) {
+      if (!field) return [];
+      const ids = field.operators?.length ? field.operators : null;
+      return this._operators.filter((operator) => ids ? ids.includes(operator.id) : operator.types.includes(field.type));
+    }
+    /** @param {FilterField|null} field @returns {string|null} */
+    _defaultOperator(field) {
+      return field?.defaultOperator && this._operatorsFor(field).some((operator) => operator.id === field.defaultOperator) ? field.defaultOperator : this._operatorsFor(field)[0]?.id ?? null;
+    }
+    /** @param {string} text @returns {void} */
+    _announce(text4) {
+      if (this.refs.status) this.refs.status.textContent = text4;
+    }
+  };
+  function actionButton(action, id, iconName, label, props = {}) {
+    return h("button", { type: "button", class: ["zx-button", "zx-button--sm", props.class].filter(Boolean), ...props, dataset: { filterAction: action, nodeId: id } }, icon(iconName, { size: 13 }), h("span", {}, label));
+  }
+  function choiceSelect(field, node, value, multiple, disabled, index = 0) {
+    const choices = Array.isArray(field.choices) && field.choices.length ? field.choices : field.type === "boolean" ? [{ value: true, label: "True" }, { value: false, label: "False" }] : null;
+    if (!choices) return null;
+    const values = new Set(Array.isArray(value) ? value.map(String) : [String(value ?? "")]);
+    return (
+      /** @type {HTMLSelectElement} */
+      h(
+        "select",
+        {
+          dataset: { filterValue: "", nodeId: node.id, valueIndex: String(index) },
+          ariaLabel: `${field.label} value`,
+          multiple,
+          disabled
+        },
+        !multiple ? h("option", { value: "", selected: !values.has(String(value)) || value == null }, "Choose\u2026") : null,
+        choices.map((choice) => h("option", { value: choice.value, selected: values.has(String(choice.value)) }, choice.label))
+      )
+    );
+  }
+  function valueInput(field, id, value, index, disabled, many = false) {
+    const type = many ? "text" : ["number", "money"].includes(field.type) ? "number" : field.type === "date" ? "date" : field.type === "datetime" ? "datetime-local" : "text";
+    const listId = field.loadChoices ? `zx-filter-choices-${id}-${index}` : null;
+    const input = (
+      /** @type {HTMLInputElement} */
+      h("input", {
+        type,
+        value: value ?? "",
+        dataset: { filterValue: "", nodeId: id, valueIndex: String(index) },
+        ariaLabel: `${field.label} value${index ? ` ${index + 1}` : ""}`,
+        disabled,
+        placeholder: many ? "Comma-separated values" : "",
+        list: listId
+      })
+    );
+    return h(
+      "span",
+      { class: "zx-filter__value-control" },
+      input,
+      listId ? h("datalist", { id: listId }) : null
+    );
+  }
+  function parseScalar(value, type) {
+    if (value === "") return null;
+    if (["number", "money"].includes(type)) {
+      const number2 = Number(value);
+      return Number.isFinite(number2) ? number2 : null;
+    }
+    if (type === "boolean") return value === "true";
+    return value;
+  }
+  function parseValueJson(value) {
+    return cloneFilterValue(value === void 0 ? null : value);
+  }
+  function findNode2(root, id) {
+    if (!root || root.id === id) return root ?? null;
+    if (root.kind === "group") for (const child of root.children) {
+      const match = findNode2(child, id);
+      if (match) return match;
+    }
+    return null;
+  }
+  function findGroup(root, id) {
+    const node = findNode2(root, id);
+    return node?.kind === "group" ? node : null;
+  }
+  function findParent(root, id) {
+    if (root?.kind !== "group") return null;
+    if (root.children.some((child) => child.id === id)) return root;
+    for (const child of root.children) {
+      const parent = findParent(child, id);
+      if (parent) return parent;
+    }
+    return null;
+  }
+  function removeNode(root, id) {
+    if (root.kind !== "group") return null;
+    const index = root.children.findIndex((child) => child.id === id);
+    if (index >= 0) return root.children.splice(index, 1)[0];
+    for (const child of root.children) {
+      const found = removeNode(child, id);
+      if (found) return found;
+    }
+    return null;
+  }
+  function containsNode(node, id) {
+    return Boolean(node && findNode2(node, id));
+  }
+  function conditionCount(node) {
+    return node.kind === "condition" ? 1 : node.children.reduce((sum, child) => sum + conditionCount(child), 0);
+  }
+  function groupDepth(root, id, depth = 0) {
+    if (root.id === id) return depth;
+    if (root.kind === "group") for (const child of root.children) {
+      if (child.kind === "group") {
+        const found = groupDepth(child, id, depth + 1);
+        if (found >= 0) return found;
+      }
+    }
+    return -1;
+  }
+  function mergeOperators(base, extra) {
+    const map = new Map(base.map((item) => [item.id, { ...item, types: [...item.types] }]));
+    for (const item of Array.isArray(extra) ? extra : []) if (item?.id) map.set(String(item.id), { ...item, id: String(item.id), types: Array.isArray(item.types) ? [...item.types] : [] });
+    return [...map.values()];
+  }
+  function cssEscape(value) {
+    return globalThis.CSS?.escape ? CSS.escape(value) : String(value).replaceAll(/[^a-zA-Z0-9_-]/g, "\\$&");
+  }
+
   // src/components/fieldset/fieldset.js
   var Fieldset = class extends Component {
     static cssName = "fieldset";
@@ -25497,8 +27820,8 @@ var zx = (() => {
         this._setBusy(true);
         try {
           message = await item.validate(answer, this.getAnswers());
-        } catch (error) {
-          message = error instanceof Error ? error.message : String(error);
+        } catch (error2) {
+          message = error2 instanceof Error ? error2.message : String(error2);
         } finally {
           if (!this._destroyed) this._setBusy(false);
         }
@@ -25636,10 +27959,10 @@ var zx = (() => {
     }
     /** @param {NormalizedItem} item @returns {void} */
     _paintError(item) {
-      const error = this._itemHost.querySelector(".zx-questionnaire__error");
-      if (error instanceof HTMLElement) {
-        error.textContent = this._error;
-        error.hidden = !this._error;
+      const error2 = this._itemHost.querySelector(".zx-questionnaire__error");
+      if (error2 instanceof HTMLElement) {
+        error2.textContent = this._error;
+        error2.hidden = !this._error;
       }
       if (this._error) this._itemHost.setAttribute("aria-invalid", "true");
       else this._itemHost.removeAttribute("aria-invalid");
@@ -25647,7 +27970,7 @@ var zx = (() => {
       if (field) {
         if (this._error) field.setHighlight(this._error, "danger");
         else field.clearHighlight();
-        if (error instanceof HTMLElement) error.hidden = true;
+        if (error2 instanceof HTMLElement) error2.hidden = true;
       }
     }
     /** @returns {void} */