@zeyos/zx 3.0.0 → 4.0.0

package/dist/zx.global.js

@@ -21,10 +21,10 @@ var zx = (() => {
   var index_exports = {};
   __export(index_exports, {
     AccountMenu: () => AccountMenu,
-    AppRail: () => AppRail,
     AppSidebar: () => AppSidebar,
     Avatar: () => Avatar,
     Breadcrumb: () => Breadcrumb,
+    Card: () => Card,
     Chart: () => Chart,
     ChartJsAdapter: () => ChartJsAdapter,
     CheckButton: () => CheckButton,
@@ -468,6 +468,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];
@@ -6818,7 +6830,18 @@ 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} */
@@ -6829,6 +6852,10 @@ var zx = (() => {
       labelKey: "name",
       renderItem: null,
       renderValue: null,
+      renderValueAdornment: null,
+      renderNone: null,
+      noneLabel: null,
+      actions: [],
       value: null,
       disabled: false,
       placeholder: "",
@@ -6846,6 +6873,7 @@ var zx = (() => {
       this._visibleItems = [];
       this._fixedItems = [];
       this._visibleFixed = [];
+      this._actions = [];
       this._selected = null;
       this._optionEntries = [];
       this._activeIndex = -1;
@@ -6884,6 +6912,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 +6943,7 @@ var zx = (() => {
       const control = h(
         "div",
         { ref: "control", class: "zx-select__control" },
+        valueAdornment,
         input,
         clear,
         loading,
@@ -6931,9 +6966,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 +7064,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,26 +7155,51 @@ var zx = (() => {
         value: null,
         items: [],
         renderItem(item) {
-          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))
-          );
+          return priorityContent(item, true);
+        },
+        renderValueAdornment(item) {
+          return priorityIndicator(item.level);
         }
       });
-      select.setItems(PRIORITY_KEYS.map((key, level) => ({
-        ID: level,
-        name: select._message(key, PRIORITY_FALLBACKS[level]),
-        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 the record-permission picker: the fixed Private and Public choices above the groups a
      * record can be shared with. The value is the tri-state ZeyOS stores — `false` for private,
@@ -7144,12 +7212,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,
@@ -7185,6 +7262,18 @@ var zx = (() => {
     /** @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 +7321,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 +7345,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();
@@ -7288,7 +7394,7 @@ var zx = (() => {
       this._optionEntries = [];
       let lastGroup = /* @__PURE__ */ Symbol("initial-group");
       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) {
@@ -7307,7 +7413,23 @@ var zx = (() => {
         }
         this._appendOption(item, false);
       }
-      if (this._visibleItems.length === 0 && this._visibleFixed.length === 0 && !this._loading) {
+      if (this._actions.length > 0) {
+        if (this._visibleFixed.length > 0 || this._visibleItems.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 (this._visibleItems.length === 0 && this._visibleFixed.length === 0 && this._actions.length === 0 && !this._loading) {
         list.append(h("div", {
           class: "zx-select__empty",
           role: "status"
@@ -7319,7 +7441,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 +7451,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 +7552,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} */
@@ -7488,6 +7651,82 @@ var zx = (() => {
       return message === key ? fallback : message;
     }
   };
+  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 +7739,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 {
@@ -11450,12 +11690,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();
@@ -11530,8 +11772,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}
      */
@@ -12080,9 +12322,8 @@ 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();
@@ -15443,6 +15684,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 (error) {
+        this._actionAbort?.abort();
+        this._linkAbort?.abort();
+        if (!created) restoreTarget(root, this._original);
+        throw error;
+      }
+    }
+    /** 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 (error) {
+        nextAbort.abort();
+        throw error;
+      }
+      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";
@@ -18786,9 +19265,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 +19299,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 +19326,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 +19339,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 +19381,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,6 +19461,13 @@ var zx = (() => {
       this._renderResults();
       return this;
     }
+    /** 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();
@@ -18993,7 +19503,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,10 +19513,12 @@ 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) {
@@ -19035,23 +19547,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 +19584,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 +19595,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 +19615,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 +19665,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 +19687,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 +19721,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 +19841,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 +19858,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 {
@@ -19916,10 +20562,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 +20575,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 +20731,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 +20779,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 +20840,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 +21094,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 +21138,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 +21209,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 +21248,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 +21305,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;
     }
-    /** Returns the composed minimized rail. @returns {AppRail} */
-    getRail() {
-      return this._rail;
+    /**
+     * 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;
     }
-    /** Destroys the rail and restores/removes the sidebar host. @returns {void} */
+    /** 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;
+    }
+    /** 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 +21411,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 +21522,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 +21543,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 +21558,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 +21618,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 +21639,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 +21655,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 +21666,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 +21705,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 {
@@ -22223,9 +23083,9 @@ 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 {
@@ -22330,6 +23190,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 +23242,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 +23288,7 @@ var zx = (() => {
     setData(data) {
       this._data = normalizeChartData(data);
       this._error = null;
+      this._hasError = false;
       this._loading = false;
       this._renderSummary();
       this._mountOrUpdate(true);
@@ -22457,6 +23324,7 @@ var zx = (() => {
     /** Shows an error and destroys the current engine. @param {unknown} error @returns {this} */
     setError(error) {
       this._error = error ?? new Error(String(this.options.errorText));
+      this._hasError = true;
       this._loading = false;
       this._destroyHandle();
       this._syncState();
@@ -22466,6 +23334,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;
     }
@@ -22504,7 +23373,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;
       }
@@ -22559,7 +23428,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 = "";
@@ -22771,7 +23640,8 @@ var zx = (() => {
     };
   }
   function errorMessage(error, fallback) {
-    return error && typeof error === "object" && "message" in error ? String(error.message) : String(fallback);
+    const message = error && typeof error === "object" && "message" in error ? String(error.message) : "";
+    return message.trim() ? message : String(fallback);
   }
 
   // src/components/tree/hierarchy.js