@zeyos/zx 2.2.1 → 3.0.0

package/docs/llms.txt

@@ -1,7 +1,7 @@
-# Zx
+# Xenon Design System (Zx)
 
-> Zx is the dependency-free, vanilla-JavaScript UI component library for ZeyOS business
-> applications. ES2022 modules, WAI-ARIA-accessible native
+> Xenon is the dependency-free design system for ZeyOS business applications; Zx is its
+> vanilla-JavaScript implementation. ES2022 modules, WAI-ARIA-accessible native
 > controls, semantic `--zx-*` design tokens with light/dark/density theming, and lifecycle-safe
 > components. Source modules run directly in the browser; a build step emits ESM, IIFE-global,
 > gx-compatibility, and CSS bundles. Zero runtime dependencies.
@@ -15,18 +15,30 @@ exports and as `window.zx.*`.
 ## Documentation
 - [Documentation site](../website/docs.html): getting started, every component with a live demo and its JavaScript source, and the application layouts. Machine index: [website/llms.txt](../website/llms.txt).
 - [README](../README.md): what Zx is, quick start (ESM + global script), component index, theming, browser support, gx compat.
-- [API reference](llms.md): per-component constructor options, methods, and events for all 30+ components plus the core helpers.
+- [API reference](llms.md): per-component constructor options, methods, and events for all public components plus the core helpers.
 - [Skill](../.claude/skills/zx/SKILL.md): task-oriented guide — mental model, recipes, ZeyOS HTTP client, theming, gotchas, commands.
 - [Changelog](../CHANGELOG.md): what changed in each release, including behaviour changes an upgrade has to account for.
 - [Migration guide](../MIGRATION.md): gx→zx class map, script-tag replacement, deliberate behavior changes, unsupported legacy APIs.
 - [Contributor contract](../AGENTS.md): conventions for editing component source (token rules, render-time state, listeners, ARIA/APG).
 
 ## Components
-- Inputs: `button()`, `buttonGroup()`, `badge()`/`badgeGroup()`, `CheckButton`, `Toggle`, `Search`, `Select` (APG combobox; `filter: false|'local'|async`), `Checklist`, `TagPicker`, `NumberField`, `Rating`, `Slider`, `copyButton()`/`CopyInput`, `DatePicker`, `MonthPicker`, `TimePicker`, `Datebox`/`DateTimeBox`, `DateRangePicker`/`DateRangeBox`, `Timebox`.
-- Overlays: `Message` (toasts/inline/progress), `Modal`, `Dialog` (+ `alert`/`confirm`/`prompt` Promises), `Dropdown`, `MenuButton`, `ContextMenu` (right-click; `selector` for per-row menus), `Tooltip`/`tooltip()`/`describe()`.
-- Data: `Table` (sortable, selectable, sticky header, opt-in inline cell/row editing via `editMode`), `DataFilter`, `Pagination` (+ pure `paginationRange()`), `TreeView` (APG tree), `Finder` (Miller columns).
-- Forms: `Form`, `Fieldset`, `Field` (type registry), `ValueList`, `MultiValueEditor`, `FieldUpload`, `Permission`.
-- Layout: `stack()`/`grid()`/`aspect()` (spacing, an intrinsically reflowing grid, a fixed-ratio box), `Groupbox`, `Panel` (header/footer action buttons), `MasterPanel`, `Tabbox` (`variant: 'divided'|'bracket'|'line'|'segmented'`), `NavigationBar`, `Toolbar` (APG toolbar with overflow menu), `SplitView`, `Stepper`, `Breadcrumb`, `emptyState()`.
+- Inputs and identity: `button()`, `buttonGroup()`, `badge()`/`badgeGroup()`, `CheckButton`,
+  `Toggle`, `Search`, `Launcher`, `Avatar`, `AccountMenu`, `Select` (APG combobox;
+  `filter: false|'local'|async`), `Checklist`, `TagPicker`, `NumberField`, `Rating`, `Slider`,
+  `copyButton()`/`CopyInput`, `DatePicker`, `MonthPicker`, `TimePicker`,
+  `Datebox`/`DateTimeBox`, `DateRangePicker`/`DateRangeBox`, `Timebox`.
+- Overlays: `Message` (toasts/inline/progress), `Modal`, `Dialog` (+ `alert`/`confirm`/`prompt` Promises), `Sheet` (edge-anchored Dialog; `side`, `modal: true|'trap-focus'|false`, `backdrop`, `snap` detents, swipe-to-dismiss), `SheetStack` (drill-down; `stack`/`cascade`), `Dropdown`, `MenuButton`, `ContextMenu` (right-click; `selector` for per-row menus), `Tooltip`/`tooltip()`/`describe()`.
+- Data: `Table` (sortable, selectable, sticky header, opt-in inline cell/row editing via
+  `editMode`), `Grid` with `Grid.BillingItems()`, engine-neutral `Chart` with injected
+  `ChartJsAdapter`, `DataFilter`, `Pagination` (+ pure `paginationRange()`), `TreeView` (APG tree),
+  `Finder` (Miller columns).
+- Forms: `Form`, `Fieldset`, `Questionnaire` (guided one-question-at-a-time flow with branching), `Field` (type registry), `ValueList`, `MultiValueEditor`, `FieldUpload`.
+- Layout: `stack()`/`grid()`/`aspect()` (spacing, an intrinsically reflowing grid, a fixed-ratio
+  box), `Groupbox`, `Panel` (header/footer action buttons), `MasterPanel`, `Tabbox`
+  (`variant: 'divided'|'bracket'|'line'|'segmented'`), `NavigationBar`, expanded `AppSidebar`,
+  minimized `AppRail`, `Toolbar` (APG toolbar with overflow menu), `SplitView`, `Dock`
+  (collapsible resizable pane stack; tab groups, regions, adopts a `Sheet`), `Stepper`,
+  `Breadcrumb`, `emptyState()`.
 - Feedback: `spinner()` (unknown duration), `ProgressBar` (known share; determinate or indeterminate), `InlineLoading` (a wait resolving into its outcome in place), `skeleton()`/`skeletonText()`/`skeletonTable()` (placeholders shaped like the content; `aria-hidden`, set `aria-busy` on the region).
 - Core: `Component`, `h`/`icon`, `position`, `breakpoints`/`breakpointOf`/`matchBreakpoint`/`onBreakpoint` (named width bands, observed on an element or the window), `Http`/`zeyosService`, i18n, date utils, `defineElements` (declarative `<zx-*>` custom elements).
 - Helpers: `formatNumber`/`formatCurrency`/`formatPercent`/`formatFileSize`/`formatRelativeTime` (locale-aware, cached `Intl`), `debounce`/`throttle`, `groupBy`/`sortBy`/`uniqueBy`, `escapeRegExp`/`highlightMatch`, `storage()` (namespaced JSON, degrades to memory), `toCsv`/`downloadBlob`/`copyToClipboard`, `truncate()`/`isTruncated()` (line clamp with the full value on hover).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zeyos/zx",
-  "version": "2.2.1",
-  "description": "Dependency-free, accessible UI component library for ZeyOS business applications.",
+  "version": "3.0.0",
+  "description": "Dependency-free JavaScript implementation of the Xenon Design System for ZeyOS.",
   "type": "module",
   "license": "MIT",
   "homepage": "https://zx.zeyos.com",
@@ -73,6 +73,7 @@
     "docs/api.json",
     "CHANGELOG.md",
     "README.md",
+    "DESIGN-SYSTEM.md",
     "MIGRATION.md",
     "LICENSE"
   ],
@@ -94,6 +95,7 @@
     "test:browser": "node tools/run-smoke.js"
   },
   "devDependencies": {
+    "chart.js": "4.5.1",
     "esbuild": "latest",
     "playwright-core": "^1.62.1",
     "typescript": "^7.0.2"

package/src/compat/globals.js

@@ -126,7 +126,9 @@ export function parse(source) {
  */
 export function installGlobals(host = globalThis) {
   installElementStorage(host);
-  host.__ = parse;
+  // `__` is also the current ZeyOS compact DOM builder. Never replace an existing meaning; the
+  // gx parser is still installed for legacy-only hosts where the name is genuinely free.
+  if (host.__ === undefined) host.__ = parse;
   const stringPrototype = host.String?.prototype;
   if (stringPrototype && typeof stringPrototype.htmlSpecialChars !== 'function') {
     Object.defineProperty(stringPrototype, 'htmlSpecialChars', {

package/src/compat/map/data.js

@@ -2,7 +2,7 @@ import {
   Checklist as ZxChecklist,
   DataFilter as ZxDataFilter,
   Http,
-  Permission as ZxPermission,
+  Select as ZxSelect,
   Table as ZxTable
 } from '../../index.js';
 import { GxWrapper } from '../base.js';
@@ -75,23 +75,45 @@ export class Checklist extends ChecklistBase { static legacyName = 'gx.zeyos.Che
 /** Legacy bootstrap checklist. */
 export class BootstrapChecklist extends ChecklistBase { static legacyName = 'gx.bootstrap.Checklist'; }
 
-/** Legacy permission selector. */
+/**
+ * Legacy `get()`/`change` shape is `'private'|'public'|groupId` (see `gx-zeyos/src/classes/Permission.js`);
+ * `Select.permission()`'s own value is the raw ZeyOS tri-state (`false|true|groupId`).
+ * @param {unknown} value
+ * @returns {unknown}
+ */
+function toLegacyPermission(value) {
+  if (value === false) return 'private';
+  if (value === true) return 'public';
+  return value;
+}
+/** @param {unknown} value @returns {unknown} */
+function fromLegacyPermission(value) {
+  if (value === false || value === 'private') return false;
+  if (value === true || value === 'public') return true;
+  return value;
+}
+
+/** Legacy permission selector, backed by the `Select.permission()` preset. */
 export class Permission extends GxWrapper {
   static legacyName = 'gx.zeyos.Permission';
 
   /** @param {Element|string|null} display @param {Record<string, any>} [options={}] */
   constructor(display, options = {}) {
     super(options, { value: true, groups: [] });
-    const component = new ZxPermission(display, {
-      value: options.value ?? true,
+    const component = ZxSelect.permission(display, {
+      value: fromLegacyPermission(options.value ?? true),
       groups: options.groups ?? options.data ?? [],
-      groupsValueKey: options.groupsValueKey ?? options.elementIndex ?? 'ID',
-      groupsLabelKey: options.groupsLabelKey ?? options.elementLabel ?? 'name'
+      valueKey: options.groupsValueKey ?? options.elementIndex ?? 'ID',
+      labelKey: options.groupsLabelKey ?? options.elementLabel ?? 'name'
+    });
+    this._attach(component, {
+      events: { change: { type: 'change', args: (detail) => [toLegacyPermission(detail.value)] } },
+      setters: { value: 'set' }
     });
-    this._attach(component, { events: { change: { type: 'change', args: (detail) => [detail.value] } }, setters: { value: 'set' } });
   }
-  /** @returns {unknown} */ get() { return this._zx.get(); }
-  /** @param {unknown} value @param {boolean} [silent=false] @returns {this} */ set(value, silent = false) { this._zx.set(value, { silent }); return this; }
+  /** @returns {unknown} */ get() { return toLegacyPermission(this._zx.value); }
+  /** @param {unknown} value @param {boolean} [silent=false] @returns {this} */
+  set(value, silent = false) { this._zx.set(fromLegacyPermission(value), { silent }); return this; }
 }
 
 /** Shared full Table wrapper. */

package/src/components/account-menu/account-menu.css

@@ -0,0 +1,70 @@
+.zx-account-menu {
+  display: block;
+  min-inline-size: 0;
+}
+
+.zx-account-menu__trigger {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--zx-space-3);
+  inline-size: 100%;
+  min-block-size: calc(var(--zx-control-height) + var(--zx-space-2));
+  border-color: transparent;
+  background: transparent;
+  padding: var(--zx-space-2);
+  color: inherit;
+  text-align: start;
+}
+
+.zx-account-menu__trigger:hover,
+.zx-account-menu__trigger:focus-visible,
+.zx-account-menu__trigger[aria-expanded="true"] {
+  background: var(--zx-color-bg-hover);
+}
+
+.zx-account-menu__identity {
+  display: grid;
+  min-inline-size: 0;
+  gap: 1px;
+}
+
+.zx-account-menu__name,
+.zx-account-menu__secondary {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-account-menu__name { font-weight: 650; }
+.zx-account-menu__secondary { color: var(--zx-color-text-muted); font-size: var(--zx-text-xs); }
+.zx-account-menu__chevron { display: inline-flex; }
+
+.zx-account-menu[data-compact="true"] {
+  inline-size: fit-content;
+}
+
+.zx-account-menu[data-compact="true"] .zx-account-menu__trigger {
+  display: inline-grid;
+  grid-template-columns: auto;
+  inline-size: auto;
+}
+
+.zx-account-menu[data-compact="true"] .zx-account-menu__identity,
+.zx-account-menu[data-compact="true"] .zx-account-menu__chevron {
+  display: none;
+}
+
+.zx-account-menu__panel-identity {
+  display: grid;
+  min-inline-size: 220px;
+  gap: 2px;
+  margin: calc(-1 * var(--zx-space-1)) calc(-1 * var(--zx-space-1)) var(--zx-space-1);
+  border-block-end: 1px solid var(--zx-color-border);
+  padding: var(--zx-space-3);
+}
+
+.zx-account-menu__panel-identity span {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+}

package/src/components/account-menu/account-menu.js

@@ -0,0 +1,208 @@
+import { Component } from '../../core/component.js';
+import { h } from '../../core/dom.js';
+import { icon } from '../../core/icons.js';
+import { Avatar } from '../avatar/avatar.js';
+import { MenuButton } from '../menu-button/menu-button.js';
+
+/** @typedef {import('../menu-button/menu-button.js').MenuButtonItem} MenuButtonItem */
+/**
+ * @typedef {Object} AccountIdentity
+ * @property {string} [name=''] Primary identity.
+ * @property {string} [secondary=''] Email, company, or other secondary identity.
+ * @property {string|null} [src=null] Avatar image URL.
+ * @property {string|null} [initials=null] Explicit avatar initials.
+ * @property {'online'|'away'|'busy'|'offline'|null} [status=null] Presence state.
+ * @property {string|null} [statusLabel=null] Presence text alternative.
+ */
+/**
+ * @typedef {Object} AccountMenuOptions
+ * @property {AccountIdentity} [account={}] Account presentation supplied by the application.
+ * @property {MenuButtonItem[]} [items=[]] Account actions and `'-'` separators.
+ * @property {boolean} [compact=false] Whether only the avatar is visually shown in the trigger.
+ * @property {string|null} [label=null] Trigger label; defaults to `Account menu for <name>`.
+ * @property {'bottom-start'|'bottom-end'|'top-start'|'top-end'|'bottom'|'top'|'right-start'|'right-end'|'left-start'|'left-end'|'right'|'left'} [placement='top-start'] Popup placement.
+ * @property {(event: CustomEvent<{value: unknown, item: object}>) => void} [onselect] Preventable action listener.
+ * @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open listener.
+ * @property {(event: CustomEvent<Record<string, never>>) => void} [onclose] Close listener.
+ */
+
+/**
+ * Avatar-backed APG account action menu; session/authentication behavior remains application-owned.
+ * @fires AccountMenu#select
+ * @fires AccountMenu#open
+ * @fires AccountMenu#close
+ * @extends {Component<AccountMenuOptions>}
+ */
+export class AccountMenu extends Component {
+  static cssName = 'account-menu';
+
+  /** @type {Readonly<AccountMenuOptions>} */
+  static defaults = {
+    account: {},
+    items: [],
+    compact: false,
+    label: null,
+    placement: 'top-start'
+  };
+
+  /**
+   * Creates or enhances an account-menu host.
+   * @param {Element|string|null} target Host target.
+   * @param {AccountMenuOptions} [options={}] Account-menu options.
+   */
+  constructor(target = null, options = {}) {
+    super(target, options);
+    for (const type of ['select', 'open', 'close']) {
+      this.listen(this.refs.trigger, `zx-${type}`, (event) => event.stopPropagation());
+    }
+    this._avatar = new Avatar(this.refs.avatar, avatarOptions(this._account));
+    this._menu = new MenuButton(this.refs.trigger, {
+      items: this.options.items,
+      placement: this.options.placement
+    });
+    this._menu.on('select', (event) => {
+      const selected = this.emit('select', event.detail);
+      if (selected.defaultPrevented) event.preventDefault();
+    });
+    this._menu.on('open', () => this.emit('open'));
+    this._menu.on('close', () => this.emit('close'));
+    this._renderIdentity();
+  }
+
+  /** @returns {HTMLElement} */
+  render() {
+    this._createdRoot = this.el === null;
+    const root = /** @type {HTMLElement} */ (this.el ?? h('div'));
+    this.el = root;
+    this._original = this._createdRoot ? null : {
+      attributes: Array.from(root.attributes, (attribute) => [attribute.name, attribute.value]),
+      children: Array.from(root.childNodes)
+    };
+    this._account = normalizeAccount(this.options.account);
+    root.dataset.compact = String(Boolean(this.options.compact));
+    root.replaceChildren(h('button', {
+      ref: 'trigger',
+      class: 'zx-account-menu__trigger',
+      type: 'button'
+    },
+    h('span', { ref: 'avatar', class: 'zx-account-menu__avatar' }),
+    h('span', { class: 'zx-account-menu__identity' },
+      h('span', { ref: 'name', class: 'zx-account-menu__name' }),
+      h('span', { ref: 'secondary', class: 'zx-account-menu__secondary' })),
+    h('span', { class: 'zx-account-menu__chevron', ariaHidden: 'true' }, icon('chevron-down'))));
+    return root;
+  }
+
+  /** Opens the account menu. @returns {this} */
+  open() {
+    this._menu.open();
+    return this;
+  }
+
+  /** Closes the account menu. @returns {this} */
+  close() {
+    this._menu.close();
+    return this;
+  }
+
+  /** Toggles the account menu. @returns {this} */
+  toggle() {
+    this._menu.toggle();
+    return this;
+  }
+
+  /** Reports whether the menu is open. @returns {boolean} */
+  isOpen() {
+    return this._menu.isOpen();
+  }
+
+  /** Replaces account presentation without touching session state. @param {AccountIdentity} account @returns {this} */
+  setAccount(account) {
+    this._account = normalizeAccount(account);
+    this._avatar.set(avatarOptions(this._account));
+    this._renderIdentity();
+    return this;
+  }
+
+  /** Replaces account actions. @param {MenuButtonItem[]} items @returns {this} */
+  setItems(items) {
+    this._menu.setItems(items);
+    this._renderPanelHeader();
+    return this;
+  }
+
+  /** Focuses the account trigger. @returns {this} */
+  focus() {
+    this._menu.getTrigger().focus();
+    return this;
+  }
+
+  /** Returns the underlying menu panel for shell hover/focus coordination. @returns {HTMLElement} */
+  getPanel() {
+    return this._menu.getPanel();
+  }
+
+  /** Destroys child components and restores/removes the host. @returns {void} */
+  destroy() {
+    const original = this._original;
+    this._menu.destroy();
+    this._avatar.destroy();
+    super.destroy();
+    if (!this._createdRoot && original) {
+      for (const attribute of Array.from(this.el.attributes)) this.el.removeAttribute(attribute.name);
+      for (const [name, value] of original.attributes) this.el.setAttribute(name, value);
+      this.el.replaceChildren(...original.children);
+    }
+  }
+
+  /** @returns {void} */
+  _renderIdentity() {
+    this.refs.name.textContent = this._account.name;
+    this.refs.secondary.textContent = this._account.secondary;
+    this.refs.secondary.hidden = !this._account.secondary;
+    const hasStatus = ['online', 'away', 'busy', 'offline'].includes(this._account.status);
+    const status = hasStatus && this._account.statusLabel ? `, ${this._account.statusLabel}` : '';
+    const label = this.options.label || `Account menu${this._account.name ? ` for ${this._account.name}` : ''}${status}`;
+    this.refs.trigger.setAttribute('aria-label', label);
+    this._renderPanelHeader();
+  }
+
+  /** @returns {void} */
+  _renderPanelHeader() {
+    const panel = this._menu.getPanel();
+    panel.querySelector('.zx-account-menu__panel-identity')?.remove();
+    panel.prepend(h('div', {
+      class: 'zx-account-menu__panel-identity',
+      role: 'presentation'
+    },
+    h('strong', {}, this._account.name || 'Account'),
+    this._account.secondary ? h('span', {}, this._account.secondary) : null));
+  }
+}
+
+/** @param {unknown} value @returns {AccountIdentity & {name: string, secondary: string}} */
+function normalizeAccount(value) {
+  const account = value && typeof value === 'object' ? value : {};
+  return {
+    ...account,
+    name: String(account.name ?? ''),
+    secondary: String(account.secondary ?? '')
+  };
+}
+
+/** @param {AccountIdentity} account @returns {import('../avatar/avatar.js').AvatarOptions} */
+function avatarOptions(account) {
+  return {
+    name: account.name,
+    src: account.src ?? null,
+    initials: account.initials ?? null,
+    status: account.status ?? null,
+    statusLabel: account.statusLabel ?? null,
+    label: null,
+    size: 'md'
+  };
+}
+
+/** Fired when an action is activated. @event AccountMenu#select @type {CustomEvent<{value: unknown, item: object}>} */
+/** Fired after the popup opens. @event AccountMenu#open @type {CustomEvent<Record<string, never>>} */
+/** Fired after the popup closes. @event AccountMenu#close @type {CustomEvent<Record<string, never>>} */

package/src/components/app-rail/app-rail.css

@@ -0,0 +1,107 @@
+.zx-app-rail {
+  display: flex;
+  min-inline-size: 0;
+  border: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-raised);
+  color: var(--zx-color-text);
+}
+
+.zx-app-rail[data-orientation="vertical"] { flex-direction: column; inline-size: calc(var(--zx-control-height) + var(--zx-space-3)); }
+.zx-app-rail[data-orientation="horizontal"] { flex-direction: row; block-size: calc(var(--zx-control-height) + var(--zx-space-3)); }
+
+.zx-app-rail__header,
+.zx-app-rail__footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--zx-space-1);
+}
+.zx-app-rail__header[hidden], .zx-app-rail__footer[hidden] { display: none; }
+.zx-app-rail[data-orientation="vertical"] .zx-app-rail__footer { margin-block-start: auto; }
+.zx-app-rail[data-orientation="horizontal"] .zx-app-rail__footer { margin-inline-start: auto; }
+
+.zx-app-rail__list {
+  display: flex;
+  flex: 1;
+  gap: var(--zx-space-1);
+  margin: 0;
+  padding: var(--zx-space-1);
+  list-style: none;
+}
+
+.zx-app-rail[data-orientation="vertical"] .zx-app-rail__list { flex-direction: column; }
+.zx-app-rail[data-orientation="horizontal"] .zx-app-rail__list { flex-direction: row; }
+.zx-app-rail__row { display: flex; }
+
+.zx-app-rail__item {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--zx-control-height);
+  block-size: var(--zx-control-height);
+  border-color: transparent;
+  border-radius: var(--zx-radius-md);
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  text-decoration: none;
+}
+
+.zx-app-rail__item:hover,
+.zx-app-rail__item:focus-visible,
+.zx-app-rail__item[aria-expanded="true"],
+.zx-app-rail__item[data-active-descendant="true"],
+.zx-app-rail__item[aria-current="page"] {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-accent);
+}
+
+.zx-app-rail__item[aria-disabled="true"],
+.zx-app-rail__flyout-item[aria-disabled="true"] {
+  color: var(--zx-color-text-muted);
+  cursor: not-allowed;
+  opacity: .65;
+}
+
+.zx-app-rail__item-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
+.zx-app-rail__item-icon { display: inline-flex; }
+.zx-app-rail__item-badge {
+  position: absolute;
+  inset-inline-end: 1px;
+  inset-block-start: 1px;
+  min-inline-size: 15px;
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-accent);
+  padding-inline: 3px;
+  color: var(--zx-color-on-accent);
+  font-size: 10px;
+  line-height: 15px;
+  text-align: center;
+}
+.zx-app-rail__item-disclosure { position: absolute; inset-inline-end: 1px; inset-block-end: 1px; display: inline-flex; }
+
+.zx-app-rail__popover { min-inline-size: 220px; padding: var(--zx-space-2); }
+.zx-app-rail__flyout-title { padding: var(--zx-space-2) var(--zx-space-3); color: var(--zx-color-text-muted); font-size: var(--zx-text-xs); font-weight: 700; }
+.zx-app-rail__flyout-list { display: grid; gap: var(--zx-space-1); margin: 0; padding: 0; list-style: none; }
+.zx-app-rail__flyout-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: var(--zx-space-2);
+  inline-size: 100%;
+  min-block-size: var(--zx-control-height);
+  border-color: transparent;
+  border-radius: var(--zx-radius-md);
+  background: transparent;
+  padding-inline: var(--zx-control-pad-x);
+  color: inherit;
+  text-align: start;
+  text-decoration: none;
+}
+.zx-app-rail__flyout-item:hover,
+.zx-app-rail__flyout-item:focus-visible,
+.zx-app-rail__flyout-item[aria-current="page"] { background: var(--zx-color-bg-hover); color: var(--zx-color-accent); }
+.zx-app-rail__flyout-item-icon { display: inline-flex; grid-column: 1; }
+.zx-app-rail__flyout-item-label { grid-column: 2; }
+.zx-app-rail__flyout-item-badge { grid-column: 3; color: var(--zx-color-text-muted); font-size: var(--zx-text-xs); }
+.zx-app-rail__flyout-item-disclosure { display: inline-flex; grid-column: 4; color: var(--zx-color-text-muted); }