@zeyos/zx 3.0.0 → 4.0.0

package/dist/zx.esm.js

@@ -267,6 +267,18 @@ function compactElement(compact, properties = null, content = null) {
   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];
@@ -6617,7 +6629,18 @@ var PRIORITY_KEYS = [
   "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} */
@@ -6628,6 +6651,10 @@ var Select = class _Select extends Component {
     labelKey: "name",
     renderItem: null,
     renderValue: null,
+    renderValueAdornment: null,
+    renderNone: null,
+    noneLabel: null,
+    actions: [],
     value: null,
     disabled: false,
     placeholder: "",
@@ -6645,6 +6672,7 @@ var Select = class _Select extends Component {
     this._visibleItems = [];
     this._fixedItems = [];
     this._visibleFixed = [];
+    this._actions = [];
     this._selected = null;
     this._optionEntries = [];
     this._activeIndex = -1;
@@ -6683,6 +6711,12 @@ var Select = class _Select extends Component {
       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",
@@ -6708,6 +6742,7 @@ var Select = class _Select extends Component {
     const control = h(
       "div",
       { ref: "control", class: "zx-select__control" },
+      valueAdornment,
       input,
       clear,
       loading,
@@ -6730,9 +6765,10 @@ var Select = class _Select extends Component {
     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));
@@ -6827,6 +6863,13 @@ var Select = class _Select extends Component {
     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.
@@ -6911,26 +6954,51 @@ var Select = class _Select extends Component {
       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,
@@ -6943,12 +7011,21 @@ var Select = class _Select extends Component {
    * @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,
@@ -6984,6 +7061,18 @@ var Select = class _Select extends Component {
   /** @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();
@@ -7031,6 +7120,7 @@ var Select = class _Select extends Component {
       /** @type {HTMLInputElement} */
       this.refs.input.value
     );
+    this._syncValueAdornment();
     if (!this._open) this.open();
     if (this.options.filter === "local") {
       this._visibleFixed = this._matchFixed(query);
@@ -7054,6 +7144,22 @@ var Select = class _Select extends Component {
   /** @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();
@@ -7087,7 +7193,7 @@ var Select = class _Select extends Component {
     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) {
@@ -7106,7 +7212,23 @@ var Select = class _Select extends Component {
       }
       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"
@@ -7118,7 +7240,7 @@ var Select = class _Select extends Component {
   _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"),
@@ -7128,16 +7250,37 @@ var Select = class _Select extends Component {
     }, 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);
   }
@@ -7208,9 +7351,29 @@ var Select = class _Select extends Component {
       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} */
@@ -7287,6 +7450,82 @@ var Select = class _Select extends Component {
     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;
@@ -7299,10 +7538,11 @@ function isPrintable(event) {
 // 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 {
@@ -11249,12 +11489,14 @@ var Table = class extends Component {
   }
   /** @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();
@@ -11329,8 +11571,8 @@ var Table = class extends Component {
   }
   /**
    * 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}
    */
@@ -11879,9 +12121,8 @@ var Table = class extends Component {
     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();
@@ -15242,6 +15483,244 @@ function normalizeAlign2(value) {
   ) : "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";
@@ -18585,9 +19064,12 @@ var Launcher = class extends Component {
     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.
@@ -18616,6 +19098,7 @@ var Launcher = class extends Component {
     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;
@@ -18642,7 +19125,7 @@ var Launcher = class extends Component {
       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",
@@ -18655,16 +19138,25 @@ var Launcher = class extends Component {
       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";
@@ -18688,6 +19180,17 @@ var Launcher = class extends Component {
       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();
@@ -18757,6 +19260,13 @@ var Launcher = class extends Component {
     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();
@@ -18792,7 +19302,7 @@ var Launcher = class extends Component {
   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;
@@ -18802,10 +19312,12 @@ var Launcher = class extends Component {
       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) {
@@ -18834,23 +19346,36 @@ var Launcher = class extends Component {
   }
   /** @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) {
@@ -18858,7 +19383,8 @@ var Launcher = class extends Component {
       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);
     }
@@ -18868,9 +19394,14 @@ var Launcher = class extends Component {
   }
   /** @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" },
@@ -18883,14 +19414,20 @@ var Launcher = class extends Component {
       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)
     );
   }
@@ -18927,6 +19464,17 @@ var Launcher = class extends Component {
     }
     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;
@@ -18938,6 +19486,15 @@ var Launcher = class extends Component {
     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];
@@ -18963,25 +19520,103 @@ var Launcher = class extends Component {
   }
   /** @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 }));
@@ -19005,6 +19640,9 @@ function pinOrder(pinned, order) {
   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();
 }
@@ -19019,15 +19657,23 @@ function compareLauncherText(left, right) {
 }
 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 {
@@ -19715,10 +20361,10 @@ function isFocusVisible(element) {
   }
 }
 
-// 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,
@@ -19728,12 +20374,13 @@ var AppRail = class extends Component {
     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);
@@ -19883,7 +20530,14 @@ var AppRail = class extends Component {
         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);
@@ -19924,7 +20578,14 @@ var AppRail = class extends Component {
         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);
@@ -19978,7 +20639,6 @@ var AppRail = class extends Component {
     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));
@@ -20233,14 +20893,43 @@ var RailListenerScope = class extends Component {
 };
 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(
@@ -20248,13 +20937,14 @@ function navControl(item, { className, index, iconOnly, disclosure, disclosureIc
       {
         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
@@ -20318,47 +21008,28 @@ var AppSidebar = class extends Component {
     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() {
@@ -20376,57 +21047,39 @@ var AppSidebar = class extends Component {
     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,
@@ -20451,47 +21104,105 @@ var AppSidebar = class extends Component {
     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);
@@ -20499,8 +21210,99 @@ var AppSidebar = class extends Component {
       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")
@@ -20519,7 +21321,14 @@ var AppSidebar = class extends Component {
     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 }
@@ -20533,7 +21342,7 @@ var AppSidebar = class extends Component {
     }
     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} */
@@ -20548,6 +21357,45 @@ var AppSidebar = class extends Component {
     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) {
@@ -20569,14 +21417,14 @@ var AppSidebar = class extends Component {
   }
   /** @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;
     }
@@ -20590,7 +21438,7 @@ var AppSidebar = class extends Component {
     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} */
@@ -20606,7 +21454,7 @@ function navControl2(item, disclosure, expanded, controls) {
         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(
@@ -20617,6 +21465,13 @@ function navControl2(item, disclosure, expanded, controls) {
     )
   );
 }
+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} */
@@ -20649,12 +21504,17 @@ function containsItemId2(items, id) {
 }
 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 {
@@ -22022,9 +22882,9 @@ function billingItemsConfig(options = {}) {
   } = 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 {
@@ -22129,6 +22989,11 @@ function billingColumns(fields, { units, currencies, currency, locale, decimals,
 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 {
@@ -22176,6 +23041,7 @@ var Chart = class extends Component {
     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");
@@ -22221,6 +23087,7 @@ var Chart = class extends Component {
   setData(data) {
     this._data = normalizeChartData(data);
     this._error = null;
+    this._hasError = false;
     this._loading = false;
     this._renderSummary();
     this._mountOrUpdate(true);
@@ -22256,6 +23123,7 @@ var Chart = class extends Component {
   /** 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();
@@ -22265,6 +23133,7 @@ var Chart = class extends Component {
   /** 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;
   }
@@ -22303,7 +23172,7 @@ var Chart = class extends Component {
   /** @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;
     }
@@ -22358,7 +23227,7 @@ var Chart = class extends Component {
   /** @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 = "";
@@ -22570,7 +23439,8 @@ function themeChartOptions(root) {
   };
 }
 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
@@ -25669,10 +26539,10 @@ function registerFieldAdapters() {
 registerFieldAdapters();
 export {
   AccountMenu,
-  AppRail,
   AppSidebar,
   Avatar,
   Breadcrumb,
+  Card,
   Chart,
   ChartJsAdapter,
   CheckButton,