@zeyos/zx 2.2.1 → 3.0.0

package/README.md

@@ -1,10 +1,13 @@
-# Zx
+# Xenon Design System (Zx)
 
-Zx is the dependency-free, vanilla-JavaScript component library for ZeyOS business applications:
-ES2022 modules, accessible native controls, semantic design tokens, and lifecycle-safe components.
-Source modules run directly in a browser; the distribution also provides ESM and classic-script
-bundles. An opt-in compatibility layer keeps existing MooTools-era `gx` code running while it is
-modernised.
+Xenon is the dependency-free design system for ZeyOS business applications; Zx is its
+vanilla-JavaScript implementation. It combines foundations, accessible components, repeatable
+workflow patterns, and application layouts in plain ES2022 modules. Source modules run directly in
+a browser; the distribution also provides ESM and classic-script bundles. An opt-in compatibility
+layer remains available for genuine MooTools-era `gx` applications while they are modernised.
+
+The [design-system audit](./DESIGN-SYSTEM.md) records current ZeyOS coverage, missing shell
+patterns, the adoption boundary, transaction-grid follow-ups, and chart-engine candidates.
 
 ## Quick start
 
@@ -95,7 +98,8 @@ ZeyOS binding — see `src/zeyos/modules.js`.
 | `CheckButton` | Two-state pressed button with optional state-specific labels. |
 | `Toggle` | Native-button switch with a separate submitted value. |
 | `Search` | Search input with debounced input, submit, and clear events. |
-| `Select` | APG combobox with local or async filtering and a priority preset. |
+| `Launcher` | Cmd/Ctrl+K application and record launcher with ranked local items and abortable grouped sources. |
+| `Select` | APG combobox with local or async filtering, pinned fixed items, and priority/permission presets. |
 | `Checklist` | Searchable checkbox group with optional async loading. |
 | `TagPicker` | Multi-select combobox that keeps its selection as removable tags. |
 | `NumberField` | APG spinbutton with step buttons, ranges, units, and wrapping. |
@@ -122,12 +126,16 @@ ZeyOS binding — see `src/zeyos/modules.js`.
 | `MenuButton` | APG menu button built on `Dropdown`. |
 | `ContextMenu` | APG right-click menu for a region or, via `selector`, per row. |
 | `Tooltip`, `tooltip()`, `describe()` | Hover/focus description bubble anchored with `position()`. |
+| `Avatar` | Fixed-size user image with initials fallback and optional presence. |
+| `AccountMenu` | Identity trigger and grouped account actions over `MenuButton`. |
 
 ### Data
 
 | API | Description |
 | --- | --- |
-| `Table` | Semantic sortable table with local/server sorting, row selection, and opt-in inline cell/row editing. |
+| `Table` | Sortable/selectable table with typed transaction columns, flat-data hierarchy/treegrid projection, and opt-in cell/row editing. |
+| `Grid`, `Grid.BillingItems()` | Table-compatible preset surface with editable currencies, units, totals, and sub-items. |
+| `Chart`, `ChartJsAdapter` | Accessible engine-neutral chart host and explicitly injected Chart.js adapter. |
 | `DataFilter` | Declarative select, text, and custom filters for client-side row sets. |
 | `TreeView` | APG tree with lazy children, filtering, and tri-state checkboxes. |
 | `Finder` | Miller-columns hierarchy browser with an optional preview pane. |
@@ -137,10 +145,10 @@ ZeyOS binding — see `src/zeyos/modules.js`.
 
 | API | Description |
 | --- | --- |
-| `Permission` | Private, public, or group-level permission selector. |
 | `Field` | Label, description, validation state, and adapter-backed form control. |
 | `Fieldset` | Native fieldset that owns and coordinates fields. |
 | `Form` | Form composition, values, validation, highlighting, and actions. |
+| `Questionnaire` | Guided one-question-at-a-time flow: branching, path-aware progress, review. |
 | `ValueList` | Validated, sortable tag/chip editor. |
 | `MultiValueEditor` | Ordered editable rows with add, remove, and move controls. |
 | `FieldUpload` | Click/drop file upload with progress, abort, validation, and preview. |
@@ -154,6 +162,8 @@ ZeyOS binding — see `src/zeyos/modules.js`.
 | `MasterPanel` | Full-height application panel with fixed header actions and footer. |
 | `Tabbox` | APG tabs in four appearances, with lazy content, closing, badges, and disabled states. |
 | `NavigationBar` | Responsive application navigation with optional tab panels and overflow. |
+| `AppSidebar` | Expanded vertical application navigation with inline disclosure children. |
+| `AppRail` | Minimized vertical/horizontal application navigation with flyout-only descendants. |
 | `Toolbar` | APG toolbar: one tab stop, arrow-key movement, and overflow into a menu. |
 | `SplitView` | Resizable two-pane split with a keyboard-operable separator. |
 | `Stepper` | Linear multi-step progress with completed, active, and error states. |
@@ -217,8 +227,34 @@ the document. Select a built-in theme and density on any ancestor (normally `<ht
 ```
 
 Theme values are `light`, `dark`, and `auto`; density values are `cozy` and `compact`. `auto`
-follows the operating-system color preference. A product theme can override semantic tokens
-without reaching into component CSS:
+follows the operating-system color preference.
+
+A third attribute picks the **accent**, orthogonally to the other two:
+
+```html
+<html data-zx-theme="dark" data-zx-preset="ocean">
+```
+
+Six presets ship — `zx` (the ZeyOS green, and the default), `zeyos`, `ocean`, `violet`, `rose`,
+`slate`. Each is five declarations of the tier-1 accent ramp that the semantic tier resolves
+through, so a preset rethemes light, dark, and auto at once:
+
+```css
+[data-zx-preset="acme"] {
+  --zx-accent-300: #c4b4ff;
+  --zx-accent-400: #a684ff;
+  --zx-accent-500: #8e51ff;
+  --zx-accent-600: #7f22fe;
+  --zx-accent-700: #7008e7;
+}
+```
+
+Light surfaces take the 600 and 700 stops, dark ones take 300, 400, and 500 — so keep 600 legible
+against white and 400 against near-black, and `--zx-color-on-accent` stays correct in both. The
+[theme studio](https://zx.zeyos.com/theme.html) renders every component family under a live theme and
+exports the result.
+
+Anything beyond the accent is a semantic token override, without reaching into component CSS:
 
 ```css
 :root[data-zx-theme="acme"] {
@@ -247,7 +283,7 @@ JavaScript positioning fallback.
 
 ## Development
 
-Install the single development dependency and start the no-build demo server:
+Install the development toolchain and start the no-build demo server:
 
 ```sh
 npm install
@@ -292,12 +328,13 @@ During an incremental migration, load the global API before the compatibility bu
 <script src="/assets/zx.global.js"></script>
 <script src="/assets/zx-compat.global.js"></script>
 <script>
-  // Only when old code relies on __(), _(), or prototype conveniences:
+  // Only for gx-era free functions; an existing ZeyOS __() is preserved:
   gx.compat.installGlobals();
 </script>
 ```
 
 The compatibility bundle always exposes `window.gx` and installs only the element
 `store`/`retrieve`/`eliminate` shim automatically. Legacy globals and prototype conveniences are
-an explicit opt-in through `gx.compat.installGlobals()`. See [MIGRATION.md](./MIGRATION.md) for
+an explicit opt-in through `gx.compat.installGlobals()`; it never replaces an existing `__`.
+See [MIGRATION.md](./MIGRATION.md) for
 class mappings, script replacement, deliberate behavior changes, and unsupported legacy APIs.

package/dist/types/compat/map/data.d.ts

@@ -30,13 +30,14 @@ export declare class Checklist extends ChecklistBase {
 export declare class BootstrapChecklist extends ChecklistBase {
     static legacyName: string;
 }
-/** Legacy permission selector. */
+/** Legacy permission selector, backed by the `Select.permission()` preset. */
 export declare class Permission extends GxWrapper {
     static legacyName: string;
     /** @param {Element|string|null} display @param {Record<string, any>} [options={}] */
     constructor(display: Element | string | null, options?: Record<string, any>);
     /** @returns {unknown} */ get(): unknown;
-    /** @param {unknown} value @param {boolean} [silent=false] @returns {this} */ set(value: unknown, silent?: boolean): this;
+    /** @param {unknown} value @param {boolean} [silent=false] @returns {this} */
+    set(value: unknown, silent?: boolean): this;
 }
 /** Shared full Table wrapper. */
 declare class TableBase extends GxWrapper {

package/dist/types/components/account-menu/account-menu.d.ts

@@ -0,0 +1,144 @@
+import { Component } from '../../core/component.js';
+import { Avatar } from '../avatar/avatar.js';
+import { MenuButton } from '../menu-button/menu-button.js';
+export type MenuButtonItem = import('../menu-button/menu-button.js').MenuButtonItem;
+export type AccountIdentity = {
+    /**
+     * Primary identity.
+     */
+    name?: string;
+    /**
+     * Email, company, or other secondary identity.
+     */
+    secondary?: string;
+    /**
+     * Avatar image URL.
+     */
+    src?: string | null;
+    /**
+     * Explicit avatar initials.
+     */
+    initials?: string | null;
+    /**
+     * Presence state.
+     */
+    status?: 'online' | 'away' | 'busy' | 'offline' | null;
+    /**
+     * Presence text alternative.
+     */
+    statusLabel?: string | null;
+};
+export type AccountMenuOptions = {
+    /**
+     * Account presentation supplied by the application.
+     */
+    account?: AccountIdentity;
+    /**
+     * Account actions and `'-'` separators.
+     */
+    items?: MenuButtonItem[];
+    /**
+     * Whether only the avatar is visually shown in the trigger.
+     */
+    compact?: boolean;
+    /**
+     * Trigger label; defaults to `Account menu for <name>`.
+     */
+    label?: string | null;
+    /**
+     * Popup placement.
+     */
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom' | 'top' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'right' | 'left';
+    /**
+     * Preventable action listener.
+     */
+    onselect?: (event: CustomEvent<{
+        value: unknown;
+        item: object;
+    }>) => void;
+    /**
+     * Open listener.
+     */
+    onopen?: (event: CustomEvent<Record<string, never>>) => void;
+    /**
+     * Close listener.
+     */
+    onclose?: (event: CustomEvent<Record<string, never>>) => void;
+};
+/** @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 declare class AccountMenu extends Component<AccountMenuOptions> {
+    _avatar: Avatar;
+    _menu: MenuButton;
+    _createdRoot: boolean;
+    _original: {
+        attributes: string[][];
+        children: ChildNode[];
+    };
+    _account: AccountIdentity & {
+        name: string;
+        secondary: string;
+    };
+    static cssName: string;
+    /** @type {Readonly<AccountMenuOptions>} */
+    static defaults: Readonly<AccountMenuOptions>;
+    /**
+     * Creates or enhances an account-menu host.
+     * @param {Element|string|null} target Host target.
+     * @param {AccountMenuOptions} [options={}] Account-menu options.
+     */
+    constructor(target?: Element | string | null, options?: AccountMenuOptions);
+    /** @returns {HTMLElement} */
+    render(): HTMLElement;
+    /** Opens the account menu. @returns {this} */
+    open(): this;
+    /** Closes the account menu. @returns {this} */
+    close(): this;
+    /** Toggles the account menu. @returns {this} */
+    toggle(): this;
+    /** Reports whether the menu is open. @returns {boolean} */
+    isOpen(): boolean;
+    /** Replaces account presentation without touching session state. @param {AccountIdentity} account @returns {this} */
+    setAccount(account: AccountIdentity): this;
+    /** Replaces account actions. @param {MenuButtonItem[]} items @returns {this} */
+    setItems(items: MenuButtonItem[]): this;
+    /** Focuses the account trigger. @returns {this} */
+    focus(): this;
+    /** Returns the underlying menu panel for shell hover/focus coordination. @returns {HTMLElement} */
+    getPanel(): HTMLElement;
+    /** Destroys child components and restores/removes the host. @returns {void} */
+    destroy(): void;
+    /** @returns {void} */
+    _renderIdentity(): void;
+    /** @returns {void} */
+    _renderPanelHeader(): void;
+}
+/** 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/dist/types/components/app-rail/app-rail.d.ts

@@ -0,0 +1,250 @@
+import { Component } from '../../core/component.js';
+import { Dropdown } from '../dropdown/dropdown.js';
+export type AppNavItem = {
+    /**
+     * Stable item identifier.
+     */
+    id: string | number;
+    /**
+     * Visible/accessibility label.
+     */
+    label: string;
+    /**
+     * Kernel icon name.
+     */
+    icon?: string;
+    /**
+     * Count or status badge.
+     */
+    badge?: string | number;
+    /**
+     * Emitted value; defaults to `id`.
+     */
+    value?: unknown;
+    /**
+     * Native navigation target.
+     */
+    href?: string;
+    /**
+     * Native link browsing context.
+     */
+    target?: string;
+    /**
+     * Application-owned non-link action.
+     */
+    invoke?: () => void;
+    /**
+     * Whether activation is unavailable.
+     */
+    disabled?: boolean;
+    /**
+     * Child destinations/actions.
+     */
+    children?: AppNavItem[];
+};
+export type AppRailOptions = {
+    /**
+     * Application navigation tree.
+     */
+    items?: AppNavItem[];
+    /**
+     * Active item id.
+     */
+    active?: string | number | null;
+    /**
+     * Rail flow.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Workspace edge occupied by the rail.
+     */
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * Navigation accessible label.
+     */
+    label?: string;
+    /**
+     * Leading rail content.
+     */
+    header?: Node | string | number | {
+        toElement: () => Node | null;
+    } | null;
+    /**
+     * Trailing rail content.
+     */
+    footer?: Node | string | number | {
+        toElement: () => Node | null;
+    } | null;
+    /**
+     * Hover-open delay in milliseconds.
+     */
+    openDelay?: number;
+    /**
+     * Pointer/focus crossing grace in milliseconds.
+     */
+    closeDelay?: number;
+    /**
+     * Preventable action listener.
+     */
+    onselect?: (event: CustomEvent<AppNavSelectDetail>) => void;
+    /**
+     * Flyout-state listener.
+     */
+    onflyoutchange?: (event: CustomEvent<{
+        item: AppNavItem;
+        id: string | number;
+        open: boolean;
+    }>) => void;
+};
+export type AppNavSelectDetail = {
+    item: AppNavItem;
+    id: string | number;
+    value: unknown;
+    href: string | null;
+    event: Event;
+};
+export type RailFlyout = {
+    key: string;
+    parentKey: string | null;
+    item: AppNavItem;
+    trigger: HTMLElement;
+    panel: HTMLElement;
+    dropdown: Dropdown;
+};
+/**
+ * @typedef {Object} AppNavItem
+ * @property {string|number} id Stable item identifier.
+ * @property {string} label Visible/accessibility label.
+ * @property {string} [icon] Kernel icon name.
+ * @property {string|number} [badge] Count or status badge.
+ * @property {unknown} [value] Emitted value; defaults to `id`.
+ * @property {string} [href] Native navigation target.
+ * @property {string} [target] Native link browsing context.
+ * @property {() => void} [invoke] Application-owned non-link action.
+ * @property {boolean} [disabled] Whether activation is unavailable.
+ * @property {AppNavItem[]} [children] Child destinations/actions.
+ */
+/**
+ * @typedef {Object} AppRailOptions
+ * @property {AppNavItem[]} [items=[]] Application navigation tree.
+ * @property {string|number|null} [active=null] Active item id.
+ * @property {'vertical'|'horizontal'} [orientation='vertical'] Rail flow.
+ * @property {'left'|'right'|'top'|'bottom'} [side='left'] Workspace edge occupied by the rail.
+ * @property {string} [label='Applications'] Navigation accessible label.
+ * @property {Node|string|number|{toElement: () => Node|null}|null} [header=null] Leading rail content.
+ * @property {Node|string|number|{toElement: () => Node|null}|null} [footer=null] Trailing rail content.
+ * @property {number} [openDelay=80] Hover-open delay in milliseconds.
+ * @property {number} [closeDelay=160] Pointer/focus crossing grace in milliseconds.
+ * @property {(event: CustomEvent<AppNavSelectDetail>) => void} [onselect] Preventable action listener.
+ * @property {(event: CustomEvent<{item: AppNavItem, id: string|number, open: boolean}>) => void} [onflyoutchange] Flyout-state listener.
+ */
+/** @typedef {{item: AppNavItem, id: string|number, value: unknown, href: string|null, event: Event}} AppNavSelectDetail */
+/** @typedef {{key: string, parentKey: string|null, item: AppNavItem, trigger: HTMLElement, panel: HTMLElement, dropdown: Dropdown}} RailFlyout */
+/**
+ * Minimized application navigation; descendants always open in hover/focus flyouts, never inline.
+ * @fires AppRail#select
+ * @fires AppRail#flyoutchange
+ * @extends {Component<AppRailOptions>}
+ */
+export declare class AppRail extends Component<AppRailOptions> {
+    _createdRoot: boolean;
+    _original: {
+        attributes: string[][];
+        children: ChildNode[];
+    };
+    _items: AppNavItem[];
+    _active: string | number;
+    _flyouts: Map<any, any>;
+    _tooltips: any[];
+    _tooltipById: Map<any, any>;
+    _interaction: RailListenerScope;
+    _openTimers: Map<any, any>;
+    _closeTimers: Map<any, any>;
+    _pointerFocus: WeakSet<object>;
+    _silenceFlyoutEvents: boolean;
+    static cssName: string;
+    /** @type {Readonly<AppRailOptions>} */
+    static defaults: Readonly<AppRailOptions>;
+    /**
+     * Creates or enhances a rail host.
+     * @param {Element|string|null} target Rail target.
+     * @param {AppRailOptions} [options={}] Rail options.
+     */
+    constructor(target?: Element | string | null, options?: AppRailOptions);
+    /** @returns {HTMLElement} */
+    render(): HTMLElement;
+    /** Replaces navigation items and closes removed flyouts. @param {AppNavItem[]} items @returns {this} */
+    setItems(items: AppNavItem[]): this;
+    /** Sets the active item without routing. @param {string|number|null} id @returns {this} */
+    setActive(id: string | number | null): this;
+    /** Returns a shallow copy of normalized items. @returns {AppNavItem[]} */
+    getItems(): AppNavItem[];
+    /** Opens one item's flyout, optionally focusing its first action. @param {string|number} id @param {{focus?: boolean}} [options={}] @returns {this} */
+    openFlyout(id: string | number, { focus }?: {
+        focus?: boolean;
+    }): this;
+    /** Closes one flyout. @param {string|number} id @returns {this} */
+    closeFlyout(id: string | number): this;
+    /** Closes every flyout and cancels pending hover/focus transitions. @returns {this} */
+    closeAllFlyouts(): this;
+    /** Reports whether an item's flyout is open. @param {string|number} id @returns {boolean} */
+    isFlyoutOpen(id: string | number): boolean;
+    /** Focuses the first top-level rail item. @returns {this} */
+    focus(): this;
+    /** Reports whether a node belongs to this rail, including detached flyout panels. @param {Node|null} node @returns {boolean} @private */
+    private _containsNode;
+    /** Destroys body popovers/tooltips and restores or removes the root. @returns {void} */
+    destroy(): void;
+    /** @returns {void} */
+    _rebuild(): void;
+    /** @param {AppNavItem} item @param {HTMLElement} trigger @param {string} key @param {string|null} parentKey @returns {void} */
+    _buildFlyout(item: AppNavItem, trigger: HTMLElement, key: string, parentKey: string | null): void;
+    /** @param {AppNavItem} item @param {Event} event @returns {Event} */
+    _select(item: AppNavItem, event: Event): Event;
+    /** @param {KeyboardEvent} event @returns {void} */
+    _onRailKeydown(event: KeyboardEvent): void;
+    /** @param {KeyboardEvent} event @param {RailFlyout} flyout @returns {void} */
+    _onFlyoutKeydown(event: KeyboardEvent, flyout: RailFlyout): void;
+    /** @param {string|number} id @returns {void} */
+    _scheduleOpen(id: string | number): void;
+    /** @param {string|number} id @returns {void} */
+    _scheduleClose(id: string | number): void;
+    /** Schedules a flyout and, when leaving a detached panel, each owning flyout for re-evaluation. @param {RailFlyout} flyout @param {boolean} ancestors @returns {void} */
+    _scheduleFlyoutClose(flyout: RailFlyout, ancestors: boolean): void;
+    /** Resolves a public id or internal descendant path. @param {string|number} id @returns {RailFlyout|null} */
+    _resolveFlyout(id: string | number): RailFlyout | null;
+    /** Closes the root flyout that owns a selected descendant. @param {string} key @returns {void} */
+    _closeFlyoutChain(key: string): void;
+    /** Reports whether one flyout owns another through its parent chain. @param {RailFlyout} ancestor @param {RailFlyout} descendant @returns {boolean} */
+    _isAncestor(ancestor: RailFlyout, descendant: RailFlyout): boolean;
+    /** Cancels crossing timers for a flyout and optionally every owning flyout. @param {RailFlyout} flyout @param {boolean} ancestors @returns {void} */
+    _cancelFlyoutTimers(flyout: RailFlyout, ancestors: boolean): void;
+    /** Reports pointer/focus presence in a flyout branch, including detached descendant panels. @param {RailFlyout} flyout @returns {boolean} */
+    _branchInteracting(flyout: RailFlyout): boolean;
+    /** Restores trigger focus without immediately reopening the flyout through its focus handler. @param {HTMLElement} trigger @returns {void} */
+    _restoreFocus(trigger: HTMLElement): void;
+    /** @param {string} key @returns {void} */
+    _cancelTimers(key: string): void;
+    /** @param {Map<string, ReturnType<typeof setTimeout>>} timers @param {string} key @returns {void} */
+    _cancelTimer(timers: Map<string, ReturnType<typeof setTimeout>>, key: string): void;
+    /** @returns {void} */
+    _syncActive(): void;
+    /** @returns {void} */
+    _clearArtifacts(): void;
+}
+/** Owns listeners attached to one dynamic rail render so `setItems()` can release them immediately. */
+declare class RailListenerScope extends Component {
+    /** @param {HTMLElement} host Rail host. */
+    constructor(host: HTMLElement);
+    /** @returns {HTMLElement} */
+    render(): HTMLElement;
+}
+/**
+ * Normalizes an application navigation tree without mutating caller data.
+ * @param {unknown} items Candidate tree.
+ * @returns {AppNavItem[]}
+ */
+export declare function normalizeAppItems(items: unknown): AppNavItem[];
+export {};
+/** Fired when a destination/action is activated. @event AppRail#select @type {CustomEvent<AppNavSelectDetail>} */
+/** Fired when a flyout opens or closes. @event AppRail#flyoutchange @type {CustomEvent<{item: AppNavItem, id: string|number, open: boolean}>} */