@zeyos/zx 2.3.0 → 4.0.0

package/docs/llms.txt

@@ -1,10 +1,10 @@
-# 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 a dependency-free design system for browser applications; Zx is its product-agnostic
+> 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.
+> ZeyOS binding, and CSS bundles. Zero runtime dependencies.
 
 Instantiate every component as `new Component(target, options)` where `target` is an Element, a
 selector string, or `null` (the component creates and owns its root, retrieved via `.toElement()`).
@@ -13,33 +13,46 @@ Subscribe with `.on(type, fn)` or an `on<type>` option; handlers receive a `Cust
 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.
-- [Skill](../.claude/skills/zx/SKILL.md): task-oriented guide — mental model, recipes, ZeyOS HTTP client, theming, gotchas, commands.
+- [Documentation site](https://zx.zeyos.com/docs.html): getting started, every component with a live demo and its JavaScript source, and the application layouts. Machine index: [llms.txt](https://zx.zeyos.com/llms.txt).
+- [README](../README.md): what Zx is, quick start (ESM + global script), component index, theming, and browser support.
+- [API reference](llms.md): per-component constructor options, methods, and events for all public components plus the core helpers.
+- [Skill](https://zx.zeyos.com/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).
+- [Contributor contract](https://github.com/zeyos/zx/blob/main/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`; priority, status, permission, and optional ZeyOS entity presets),
+  `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`, `Card` (media/title link/actions/footer), `Panel` (header/footer action
+  buttons), `MasterPanel`, `Tabbox`
+  (`variant: 'divided'|'bracket'|'line'|'segmented'`), `NavigationBar`, `AppSidebar` (expanded and
+  minimized vertical states plus horizontal rail layouts), `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).
+- 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).
 
 ## Theming
 Load `zx.css` once; set `data-zx-theme` (`light`|`dark`|`auto`) and `data-zx-density` (`cozy`|`compact`) on any ancestor. Define a product theme by overriding semantic `--zx-color-*` / `--zx-control-*` tokens under `[data-zx-theme="name"]`. Never use tier-1 palette tokens or raw color literals in application CSS.
 
 ## Talking to ZeyOS
-Use the dedicated ZeyOS client library **`@zeyos/client`** (`npm install @zeyos/client`) for ZeyOS business data: `createZeyosClient({ platform, auth })`, typed `client.api.list/get/create/update<Resource>` over the full OpenAPI surface, `normalizeListResult`. It replaces the legacy `gx.zeyos.Client`/`gx.zeyos.Request`. See the `website/layouts/zeyos-invoices.layout.js` layout for a Zx-components-on-@zeyos/client reference. Zx also ships a minimal `Http`/`zeyosService` for ad-hoc in-app `remotecall`, but `@zeyos/client` is the recommended default.
+Use the dedicated ZeyOS client library **`@zeyos/client`** (`npm install @zeyos/client`) for ZeyOS business data: `createZeyosClient({ platform, auth })`, typed `client.api.list/get/create/update<Resource>` over the full OpenAPI surface, and `normalizeListResult`. Zx accepts the client by injection and does not bundle it. See the `website/layouts/zeyos-invoices.layout.js` layout for a Zx-components-on-@zeyos/client reference. Zx also ships a minimal `Http`/`zeyosService` for ad-hoc in-app `remotecall`, but `@zeyos/client` is the recommended default.
 
 ## Installing
-`npm install @zeyos/zx`. Entry points: `.` (components), `./zeyos` (ZeyOS binding), `./compat`
-(gx namespace), `./zx.css` (styles), `./global` (classic script tag). Docs: https://zx.zeyos.com
+`npm install @zeyos/zx`. Entry points: `.` (components), `./zeyos` (ZeyOS binding), `./zx.css`
+(styles), and `./global` (classic script tag). Docs: https://zx.zeyos.com
 
 ## Commands
 `npm run serve` (no-build documentation at http://127.0.0.1:8321/website/docs.html) · `npm test` (unit + token lint) · `npm run build` (dist bundles).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zeyos/zx",
-  "version": "2.3.0",
-  "description": "Dependency-free, accessible UI component library for ZeyOS business applications.",
+  "version": "4.0.0",
+  "description": "Dependency-free JavaScript implementation of the Xenon Design System.",
   "type": "module",
   "license": "MIT",
   "homepage": "https://zx.zeyos.com",
@@ -25,9 +25,7 @@
   "sideEffects": [
     "*.css",
     "./dist/zx.global.js",
-    "./dist/zx.global.min.js",
-    "./dist/zx-compat.global.js",
-    "./dist/zx-compat.global.min.js"
+    "./dist/zx.global.min.js"
   ],
   "exports": {
     ".": {
@@ -38,23 +36,15 @@
       "types": "./dist/types/zeyos/index.d.ts",
       "default": "./dist/zx-zeyos.esm.js"
     },
-    "./compat": {
-      "types": "./dist/types/compat/index.d.ts",
-      "default": "./dist/zx-compat.esm.js"
-    },
     "./global": {
       "types": "./dist/types/index.d.ts",
       "default": "./dist/zx.global.js"
     },
-    "./compat-global": {
-      "types": "./dist/types/compat/index.d.ts",
-      "default": "./dist/zx-compat.global.js"
-    },
     "./zx.css": "./dist/zx.css",
     "./zx.min.css": "./dist/zx.min.css",
-    "./src/*.js": {
-      "types": "./dist/types/*.d.ts",
-      "default": "./src/*.js"
+    "./src/components/*.js": {
+      "types": "./dist/types/components/*.d.ts",
+      "default": "./src/components/*.js"
     },
     "./styles/*": "./styles/*",
     "./dist/*": "./dist/*",
@@ -68,12 +58,14 @@
     "dist/types",
     "styles",
     "src",
+    "!src/compat",
+    "!src/compat-entry.js",
     "docs/llms.md",
     "docs/llms.txt",
     "docs/api.json",
     "CHANGELOG.md",
     "README.md",
-    "MIGRATION.md",
+    "DESIGN-SYSTEM.md",
     "LICENSE"
   ],
   "engines": {
@@ -94,6 +86,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/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); }

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

@@ -0,0 +1,80 @@
+.zx-app-sidebar {
+  display: flex;
+  min-block-size: 0;
+  border: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-raised);
+  color: var(--zx-color-text);
+}
+
+.zx-app-sidebar[data-orientation="horizontal"] {
+  inline-size: 100%;
+}
+
+.zx-app-sidebar[data-orientation="horizontal"] > .zx-app-sidebar__rail {
+  inline-size: 100%;
+}
+
+.zx-app-sidebar__rail.zx-app-rail {
+  border: 0;
+}
+
+.zx-app-sidebar__expanded {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  inline-size: min(280px, 100vw);
+  min-block-size: 0;
+}
+
+.zx-app-sidebar__expanded[hidden],
+.zx-app-sidebar__rail[hidden] { display: none; }
+
+.zx-app-sidebar__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-block-size: calc(var(--zx-control-height) + var(--zx-space-3));
+  border-block-end: 1px solid var(--zx-color-border);
+  padding: var(--zx-space-2);
+}
+
+.zx-app-sidebar__header-content { min-inline-size: 0; }
+.zx-app-sidebar__nav { min-block-size: 0; overflow: auto; padding: var(--zx-space-2); }
+.zx-app-sidebar__list,
+.zx-app-sidebar__sublist { display: grid; gap: var(--zx-space-1); margin: 0; padding: 0; list-style: none; }
+.zx-app-sidebar__sublist { margin-block-start: var(--zx-space-1); }
+.zx-app-sidebar__sublist[hidden] { display: none; }
+
+.zx-app-sidebar__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-space-3);
+  color: inherit;
+  text-align: start;
+  text-decoration: none;
+}
+
+.zx-app-sidebar__row[data-level="2"] > .zx-app-sidebar__item { padding-inline-start: calc(var(--zx-space-3) + var(--zx-space-5)); }
+.zx-app-sidebar__row[data-level="3"] > .zx-app-sidebar__item { padding-inline-start: calc(var(--zx-space-3) + var(--zx-space-7)); }
+.zx-app-sidebar__item:hover,
+.zx-app-sidebar__item:focus-visible,
+.zx-app-sidebar__item[data-active-descendant="true"],
+.zx-app-sidebar__item[aria-current="page"] { background: var(--zx-color-bg-hover); color: var(--zx-color-accent); }
+.zx-app-sidebar__item[aria-disabled="true"] { color: var(--zx-color-text-muted); cursor: not-allowed; opacity: .65; }
+.zx-app-sidebar__item-icon,
+.zx-app-sidebar__item-disclosure { display: inline-flex; }
+.zx-app-sidebar__item-badge { color: var(--zx-color-text-muted); font-size: var(--zx-text-xs); }
+
+.zx-app-sidebar__footer {
+  border-block-start: 1px solid var(--zx-color-border);
+  padding: var(--zx-space-2);
+}
+.zx-app-sidebar__footer[hidden] { display: none; }
+.zx-app-sidebar__rail-header { display: grid; gap: var(--zx-space-1); }