@3mo/navigation 0.1.0

package/dist/NavigationBarItem.js

@@ -0,0 +1,108 @@
+import { __decorate } from "tslib";
+import { bind, Component, component, css, event, html, ifDefined, property, repeat } from '@a11d/lit';
+import { visibleNavigations } from './INavigation.js';
+import '@3mo/menu';
+/**
+ * A navigation of a navigation bar: a destination, or a group opening its destinations as a dropdown.
+ *
+ * @element mo-navigation-bar-item
+ *
+ * @attr navigation - The navigation this item stands for.
+ * @attr open - Whether the group's dropdown is open.
+ * @attr data-current - Whether this navigation, or one nested in it, is the page being shown.
+ * @fires invoke - Dispatched with the destination which was invoked.
+ */
+let NavigationBarItem = class NavigationBarItem extends Component {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.current = false;
+        this.tabIndex = 0;
+    }
+    get childNavigations() {
+        return visibleNavigations(this.navigation?.children);
+    }
+    static get styles() {
+        return css `
+			:host {
+				position: relative;
+				display: inline-block;
+				border-radius: var(--mo-border-radius);
+				padding: 0 0.5rem;
+				color: var(--mo-color-on-accent);
+				cursor: pointer;
+				white-space: nowrap;
+				outline: none;
+			}
+
+			:host([data-router-selected]), :host([data-current]), :host(:hover) {
+				background-color: color-mix(in srgb, var(--mo-color-background), transparent 88%);
+			}
+
+			span {
+				line-height: 2rem;
+				font-weight: 500;
+				font-size: medium;
+			}
+
+			mo-menu {
+				color: var(--mo-color-foreground);
+			}
+
+			mo-focus-ring {
+				--mo-focus-ring-color: var(--mo-color-on-accent);
+			}
+
+			mo-navigation-menu-item {
+				font-size: 14px;
+				min-width: 200px;
+				&[aria-current] {
+					background-color: var(--mo-color-selected);
+					color: var(--mo-color-on-selected);
+				}
+			}
+		`;
+    }
+    get template() {
+        return html `
+			<mo-focus-ring .control=${this} inward></mo-focus-ring>
+			<mo-flex id='button' direction='horizontal' alignItems='center' justifyContent='center' gap='2px'>
+				<span>${this.navigation?.label}</span>
+				${!this.childNavigations.length ? html.nothing : html `
+					<mo-icon icon=${this.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} style='font-size: large'></mo-icon>
+				`}
+			</mo-flex>
+			${!this.childNavigations.length ? html.nothing : html `
+				<mo-menu target='button' .anchor=${this} ?open=${bind(this, 'open')}>
+					${repeat(this.childNavigations, child => child, child => this.menuItemTemplate(child))}
+				</mo-menu>
+			`}
+		`;
+    }
+    menuItemTemplate(navigation) {
+        return html `
+			${navigation.hasSeparator !== true ? html.nothing : html `<mo-line></mo-line>`}
+			<mo-navigation-menu-item
+				icon=${ifDefined(navigation.icon)}
+				aria-current=${ifDefined(navigation.current === true ? 'page' : undefined)}
+				${navigation.link?.({ invocationHandler: () => { this.open = false; this.invoke.dispatch(navigation); } }) ?? html.nothing}
+			>${navigation.label}</mo-navigation-menu-item>
+		`;
+    }
+};
+__decorate([
+    event({ bubbles: true, composed: true })
+], NavigationBarItem.prototype, "invoke", void 0);
+__decorate([
+    property({ type: Object })
+], NavigationBarItem.prototype, "navigation", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NavigationBarItem.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'data-current' })
+], NavigationBarItem.prototype, "current", void 0);
+NavigationBarItem = __decorate([
+    component('mo-navigation-bar-item')
+], NavigationBarItem);
+export { NavigationBarItem };

package/dist/NavigationDrawer.d.ts

@@ -0,0 +1,38 @@
+import { Component, type HTMLTemplateResult, type PropertyValues } from '@a11d/lit';
+import '@3mo/drawer';
+import { type INavigation } from './INavigation.js';
+import './NavigationTree.js';
+/**
+ * Every navigation as a tree, in a modal drawer over the page.
+ *
+ * @element mo-navigation-drawer
+ *
+ * @attr navigations - The navigations to present.
+ * @attr open - Whether the drawer is open.
+ * @attr heading - Placed above the tree.
+ *
+ * @cssprop --mo-navigation-drawer-width - How wide the drawer is. Defaults to `292px`.
+ *
+ * @fires openChange - Dispatched with the new state whenever the drawer opens or closes.
+ * @fires invoke - Dispatched with the destination which was invoked, on its way up from the tree.
+ */
+export declare class NavigationDrawer extends Component {
+    readonly openChange: EventDispatcher<boolean>;
+    navigations: INavigation[];
+    heading?: string | HTMLTemplateResult;
+    open: boolean;
+    private dispatchedOpen;
+    protected updated(props: PropertyValues<this>): void;
+    /** Reaching a destination is what the drawer was opened for. */
+    protected handleInvoke(): void;
+    private get treeElement();
+    focus(options?: FocusOptions): void;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-navigation-drawer': NavigationDrawer;
+    }
+}
+//# sourceMappingURL=NavigationDrawer.d.ts.map

package/dist/NavigationDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationDrawer.d.ts","sourceRoot":"","sources":["../NavigationDrawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAA+D,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAA;AACtJ,OAAO,aAAa,CAAA;AACpB,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,qBAAqB,CAAA;AAE5B;;;;;;;;;;;;;GAaG;AACH,qBACa,gBAAiB,SAAQ,SAAS;IACrC,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAE5B,WAAW,gBAA2B;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAA;IAEsC,IAAI,UAAQ;IAGnG,OAAO,CAAC,cAAc,CAAQ;cAEX,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC;IAQtD,gEAAgE;IAEhE,SAAS,CAAC,YAAY;IAItB,OAAO,KAAK,WAAW,GAA0E;IAExF,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAQrC,WAAoB,MAAM,kCAUzB;IAED,cAAuB,QAAQ,uBAW9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,gBAAgB,CAAA;KACxC;CACD"}

package/dist/NavigationDrawer.js

@@ -0,0 +1,89 @@
+import { __decorate } from "tslib";
+import { bind, Component, component, css, event, eventListener, html, property, style } from '@a11d/lit';
+import '@3mo/drawer';
+import './NavigationTree.js';
+/**
+ * Every navigation as a tree, in a modal drawer over the page.
+ *
+ * @element mo-navigation-drawer
+ *
+ * @attr navigations - The navigations to present.
+ * @attr open - Whether the drawer is open.
+ * @attr heading - Placed above the tree.
+ *
+ * @cssprop --mo-navigation-drawer-width - How wide the drawer is. Defaults to `292px`.
+ *
+ * @fires openChange - Dispatched with the new state whenever the drawer opens or closes.
+ * @fires invoke - Dispatched with the destination which was invoked, on its way up from the tree.
+ */
+let NavigationDrawer = class NavigationDrawer extends Component {
+    constructor() {
+        super(...arguments);
+        this.navigations = new Array();
+        this.open = false;
+        /* The drawer writes its own state back through the binding, which can skip a property's update hook altogether. */
+        this.dispatchedOpen = false;
+    }
+    updated(props) {
+        super.updated(props);
+        if (this.dispatchedOpen !== this.open) {
+            this.dispatchedOpen = this.open;
+            this.openChange.dispatch(this.open);
+        }
+    }
+    /** Reaching a destination is what the drawer was opened for. */
+    handleInvoke() {
+        this.open = false;
+    }
+    get treeElement() { return this.renderRoot?.querySelector('mo-navigation-tree') ?? null; }
+    focus(options) {
+        if (this.treeElement) {
+            this.treeElement.focus(options);
+        }
+        else {
+            super.focus(options);
+        }
+    }
+    static get styles() {
+        return css `
+			:host {
+				display: contents;
+			}
+
+			mo-drawer {
+				--mo-drawer-width: var(--mo-navigation-drawer-width, 292px);
+			}
+		`;
+    }
+    get template() {
+        return html `
+			<mo-drawer ?open=${bind(this, 'open')}>
+				<mo-flex ${style({ height: '100%' })}>
+					${!this.heading ? html.nothing : html `
+						<mo-flex direction='horizontal' alignItems='center' ${style({ padding: '24px' })}>${this.heading}</mo-flex>
+					`}
+					<mo-navigation-tree autofocus ${style({ flex: '1' })} .navigations=${this.navigations}></mo-navigation-tree>
+				</mo-flex>
+			</mo-drawer>
+		`;
+    }
+};
+__decorate([
+    event()
+], NavigationDrawer.prototype, "openChange", void 0);
+__decorate([
+    property({ type: Array })
+], NavigationDrawer.prototype, "navigations", void 0);
+__decorate([
+    property()
+], NavigationDrawer.prototype, "heading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, bindingDefault: true, event: 'openChange' })
+], NavigationDrawer.prototype, "open", void 0);
+__decorate([
+    eventListener('invoke')
+], NavigationDrawer.prototype, "handleInvoke", null);
+NavigationDrawer = __decorate([
+    component('mo-navigation-drawer')
+], NavigationDrawer);
+export { NavigationDrawer };

package/dist/NavigationGroup.d.ts

@@ -0,0 +1,22 @@
+import { type INavigation, type NavigationOptions } from './INavigation.js';
+/**
+ * A set of destinations presented together, and named by a label of its own.
+ *
+ * It has no destination and therefore no `link`: it is hidden once everything in it is, and current
+ * once anything in it is.
+ */
+export declare class NavigationGroup implements INavigation {
+    readonly options: NavigationOptions & {
+        readonly children: Array<INavigation>;
+    };
+    constructor(options: NavigationOptions & {
+        readonly children: Array<INavigation>;
+    });
+    get label(): string | import("lit-html").HTMLTemplateResult;
+    get icon(): import("@3mo/icon/MaterialIcon.js").MaterialIcon | undefined;
+    get hidden(): boolean;
+    get hasSeparator(): boolean | undefined;
+    get children(): INavigation[];
+    get current(): boolean;
+}
+//# sourceMappingURL=NavigationGroup.d.ts.map

package/dist/NavigationGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationGroup.d.ts","sourceRoot":"","sources":["../NavigationGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAE3E;;;;;GAKG;AACH,qBAAa,eAAgB,YAAW,WAAW;IACtC,QAAQ,CAAC,OAAO,EAAE,iBAAiB,GAAG;QAAE,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;KAAE;gBAAtE,OAAO,EAAE,iBAAiB,GAAG;QAAE,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;KAAE;IAE3F,IAAI,KAAK,mDAAsC;IAC/C,IAAI,IAAI,iEAA+B;IACvC,IAAI,MAAM,YAAiH;IAC3H,IAAI,YAAY,wBAAuC;IACvD,IAAI,QAAQ,kBAAmC;IAC/C,IAAI,OAAO,YAAiE;CAC5E"}

package/dist/NavigationGroup.js

@@ -0,0 +1,17 @@
+/**
+ * A set of destinations presented together, and named by a label of its own.
+ *
+ * It has no destination and therefore no `link`: it is hidden once everything in it is, and current
+ * once anything in it is.
+ */
+export class NavigationGroup {
+    constructor(options) {
+        this.options = options;
+    }
+    get label() { return this.options.label ?? ''; }
+    get icon() { return this.options.icon; }
+    get hidden() { return this.options.hidden || !this.children.length || this.children.every(child => child.hidden === true); }
+    get hasSeparator() { return this.options.hasSeparator; }
+    get children() { return this.options.children; }
+    get current() { return this.children.some(child => child.current === true); }
+}

package/dist/NavigationLink.d.ts

@@ -0,0 +1,24 @@
+import { type DirectiveResult } from '@a11d/lit';
+import { routerLink, type RoutableComponent } from '@a11d/lit-application';
+import { type INavigation, type NavigationInvocationOptions, type NavigationOptions } from './INavigation.js';
+type RouterLinkParameters = Exclude<Parameters<typeof routerLink>[0], RoutableComponent>;
+/**
+ * A destination of the application's router.
+ *
+ * Almost everything it reports is derived rather than stored: the label falls back to the component's
+ * own `label` metadata, `current` is answered by the router per read, and `link` hands `routerLink` the
+ * whole parameter set. Applications subclass it to layer their own gates onto `hidden` and `icon`.
+ */
+export declare class NavigationLink implements INavigation {
+    readonly options: NavigationOptions & RouterLinkParameters;
+    constructor(options: NavigationOptions & RouterLinkParameters);
+    get label(): import("lit-html").HTMLTemplateResult;
+    get icon(): import("@3mo/icon/MaterialIcon.js").MaterialIcon | undefined;
+    get hidden(): boolean;
+    get hasSeparator(): boolean | undefined;
+    get current(): boolean;
+    get routerLinkParameters(): RouterLinkParameters;
+    link(options?: NavigationInvocationOptions): DirectiveResult;
+}
+export {};
+//# sourceMappingURL=NavigationLink.d.ts.map

package/dist/NavigationLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationLink.d.ts","sourceRoot":"","sources":["../NavigationLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,eAAe,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAsB,MAAM,uBAAuB,CAAA;AAC9F,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,2BAA2B,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAE7G,KAAK,oBAAoB,GAAG,OAAO,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAA;AAExF;;;;;;GAMG;AACH,qBAAa,cAAe,YAAW,WAAW;IACrC,QAAQ,CAAC,OAAO,EAAE,iBAAiB,GAAG,oBAAoB;gBAAjD,OAAO,EAAE,iBAAiB,GAAG,oBAAoB;IAEtE,IAAI,KAAK,0CAIR;IAED,IAAI,IAAI,iEAA+B;IACvC,IAAI,MAAM,YAA0C;IACpD,IAAI,YAAY,wBAAuC;IACvD,IAAI,OAAO,YAAiF;IAC5F,IAAI,oBAAoB,IAA4B,oBAAoB,CAAE;IAE1E,IAAI,CAAC,OAAO,CAAC,EAAE,2BAA2B,GAAG,eAAe;CAS5D"}

package/dist/NavigationLink.js

@@ -0,0 +1,33 @@
+import { html } from '@a11d/lit';
+import { routerLink, NavigationStrategy } from '@a11d/lit-application';
+/**
+ * A destination of the application's router.
+ *
+ * Almost everything it reports is derived rather than stored: the label falls back to the component's
+ * own `label` metadata, `current` is answered by the router per read, and `link` hands `routerLink` the
+ * whole parameter set. Applications subclass it to layer their own gates onto `hidden` and `icon`.
+ */
+export class NavigationLink {
+    constructor(options) {
+        this.options = options;
+    }
+    get label() {
+        const value = this.options.label ?? label.get(this.options.component.constructor);
+        const appendedEllipsis = (this.options.navigationStrategy ?? NavigationStrategy.Page) === NavigationStrategy.Page ? '' : ' ...';
+        return html `${value}${appendedEllipsis}`;
+    }
+    get icon() { return this.options.icon; }
+    get hidden() { return this.options.hidden ?? false; }
+    get hasSeparator() { return this.options.hasSeparator; }
+    get current() { return this.options.component.urlMatches({ mode: this.options.matchMode }); }
+    get routerLinkParameters() { return this.options; }
+    link(options) {
+        return routerLink({
+            ...this.routerLinkParameters,
+            invocationHandler: () => {
+                options?.invocationHandler?.();
+                this.routerLinkParameters.invocationHandler?.();
+            }
+        });
+    }
+}

package/dist/NavigationPresentation.d.ts

@@ -0,0 +1,8 @@
+/**
+ * How a set of navigations is presented:
+ * - `bar` — a horizontal row in the application's header, groups opening as dropdowns.
+ * - `rail` — a vertical strip at the leading edge, a group's children shown in a panel beside it.
+ * - `drawer` — a modal panel over the page, holding every navigation as a tree.
+ */
+export type NavigationPresentation = 'bar' | 'rail' | 'drawer';
+//# sourceMappingURL=NavigationPresentation.d.ts.map

package/dist/NavigationPresentation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationPresentation.d.ts","sourceRoot":"","sources":["../NavigationPresentation.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAA"}

package/dist/NavigationPresentation.js

@@ -0,0 +1 @@
+export {};

package/dist/NavigationRail.d.ts

@@ -0,0 +1,52 @@
+import { Component } from '@a11d/lit';
+import { type INavigation } from './INavigation.js';
+import './NavigationRailItem.js';
+import './NavigationTree.js';
+/**
+ * The navigations as a vertical strip at the leading edge, each one an icon with its label beneath it.
+ *
+ * A group's destinations are shown in a panel beside the strip: docked next to the page while there is
+ * room for both, and overlaid over the page while there is not.
+ *
+ * @element mo-navigation-rail
+ *
+ * @attr navigations - The navigations to present.
+ * @attr docked - Whether the panel stands beside the page rather than over it.
+ * @fires invoke - Dispatched with the destination which was invoked.
+ *
+ * @slot header - Placed above the navigations, e.g. a logo or a button which creates something.
+ * @slot footer - Placed below the navigations.
+ *
+ * @csspart strip - The strip of navigations.
+ * @csspart panel - The panel holding the destinations of the navigation being shown.
+ *
+ * @cssprop --mo-navigation-rail-size - How wide the strip is. Defaults to `5.5rem`.
+ * @cssprop --mo-navigation-rail-panel-size - How wide the panel is. Defaults to `17rem`.
+ */
+export declare class NavigationRail extends Component {
+    readonly invoke: EventDispatcher<INavigation>;
+    navigations: INavigation[];
+    docked: boolean;
+    private selection?;
+    get items(): import("./NavigationRailItem.js").NavigationRailItem[];
+    /** The navigation whose destinations the panel shows. */
+    get shownNavigation(): INavigation | undefined;
+    private get currentNavigation();
+    protected handleLocationChange(): void;
+    /** A destination was reached, from the strip or from the panel, so the panel has done its job. */
+    protected handleInvoke(): void;
+    protected handleDocumentPointerDown(event: PointerEvent): void;
+    protected handleKeyDown(event: KeyboardEvent): void;
+    focus(options?: FocusOptions): void;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): import("lit-html").HTMLTemplateResult;
+    private itemTemplate;
+    private get panelTemplate();
+    private handleItemClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-navigation-rail': NavigationRail;
+    }
+}
+//# sourceMappingURL=NavigationRail.d.ts.map

package/dist/NavigationRail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRail.d.ts","sourceRoot":"","sources":["../NavigationRail.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuE,MAAM,WAAW,CAAA;AAC1G,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,yBAAyB,CAAA;AAChC,OAAO,qBAAqB,CAAA;AAE5B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,cAAe,SAAQ,SAAS;IACF,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,WAAW,CAAC,CAAA;IAE7D,WAAW,gBAA2B;IACrB,MAAM,UAAQ;IAEjD,OAAO,CAAC,SAAS,CAAC,CAAa;IAExC,IAAI,KAAK,2DAER;IAED,yDAAyD;IACzD,IAAI,eAAe,4BAGlB;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAGD,SAAS,CAAC,oBAAoB;IAI9B,kGAAkG;IAElG,SAAS,CAAC,YAAY;IAKtB,SAAS,CAAC,yBAAyB,CAAC,KAAK,EAAE,YAAY;IAOvD,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa;IAQnC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IASrC,WAAoB,MAAM,kCAyEzB;IAED,cAAuB,QAAQ,0CAW9B;IAED,OAAO,CAAC,YAAY;IAYpB,OAAO,KAAK,aAAa,GAQxB;IAED,OAAO,CAAC,eAAe;CAOvB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,cAAc,CAAA;KACpC;CACD"}

package/dist/NavigationRail.js

@@ -0,0 +1,213 @@
+import { __decorate } from "tslib";
+import { Component, component, css, event, eventListener, html, property, repeat, state } from '@a11d/lit';
+import { visibleNavigations } from './INavigation.js';
+import './NavigationRailItem.js';
+import './NavigationTree.js';
+/**
+ * The navigations as a vertical strip at the leading edge, each one an icon with its label beneath it.
+ *
+ * A group's destinations are shown in a panel beside the strip: docked next to the page while there is
+ * room for both, and overlaid over the page while there is not.
+ *
+ * @element mo-navigation-rail
+ *
+ * @attr navigations - The navigations to present.
+ * @attr docked - Whether the panel stands beside the page rather than over it.
+ * @fires invoke - Dispatched with the destination which was invoked.
+ *
+ * @slot header - Placed above the navigations, e.g. a logo or a button which creates something.
+ * @slot footer - Placed below the navigations.
+ *
+ * @csspart strip - The strip of navigations.
+ * @csspart panel - The panel holding the destinations of the navigation being shown.
+ *
+ * @cssprop --mo-navigation-rail-size - How wide the strip is. Defaults to `5.5rem`.
+ * @cssprop --mo-navigation-rail-panel-size - How wide the panel is. Defaults to `17rem`.
+ */
+let NavigationRail = class NavigationRail extends Component {
+    constructor() {
+        super(...arguments);
+        this.navigations = new Array();
+        this.docked = false;
+    }
+    get items() {
+        return [...this.renderRoot?.querySelectorAll('mo-navigation-rail-item') ?? []];
+    }
+    /** The navigation whose destinations the panel shows. */
+    get shownNavigation() {
+        const selection = this.selection && this.navigations.includes(this.selection) ? this.selection : undefined;
+        return selection ?? (this.docked ? this.currentNavigation : undefined);
+    }
+    get currentNavigation() {
+        return visibleNavigations(this.navigations).find(navigation => navigation.current === true && visibleNavigations(navigation.children).length > 0);
+    }
+    handleLocationChange() {
+        this.requestUpdate();
+    }
+    /** A destination was reached, from the strip or from the panel, so the panel has done its job. */
+    handleInvoke() {
+        this.selection = undefined;
+    }
+    handleDocumentPointerDown(event) {
+        if (!this.docked && this.selection && !event.composedPath().includes(this)) {
+            this.selection = undefined;
+        }
+    }
+    handleKeyDown(event) {
+        if (!this.docked && this.selection && event.key === 'Escape') {
+            const dismissed = this.selection;
+            this.selection = undefined;
+            this.items.find(item => item.navigation === dismissed)?.focus();
+        }
+    }
+    focus(options) {
+        const item = this.items[0];
+        if (item) {
+            item.focus(options);
+        }
+        else {
+            super.focus(options);
+        }
+    }
+    static get styles() {
+        return css `
+			:host {
+				position: relative;
+				z-index: 1;
+				display: flex;
+				flex-direction: row;
+				background: var(--mo-color-surface);
+			}
+
+			[part=strip] {
+				display: flex;
+				flex-direction: column;
+				inline-size: var(--mo-navigation-rail-size, 5.5rem);
+				border-inline-end: 1px solid var(--mo-color-transparent-gray-3);
+				overflow: hidden;
+			}
+
+			#items {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+				padding: 8px 6px;
+				flex: 1;
+				overflow-y: auto;
+				overflow-x: hidden;
+				scrollbar-width: thin;
+			}
+
+			[part=panel] {
+				display: flex;
+				flex-direction: column;
+				inline-size: var(--mo-navigation-rail-panel-size, 17rem);
+				background: var(--mo-color-surface);
+				border-inline-end: 1px solid var(--mo-color-transparent-gray-3);
+				overflow: hidden;
+			}
+
+			/* Without room for both, the panel leaves the layout and stands over the page instead. */
+			:host(:not([docked])) [part=panel] {
+				position: absolute;
+				inset-block: 0;
+				inset-inline-start: 100%;
+				box-shadow: var(--mo-shadow);
+				translate: 0;
+				opacity: 1;
+				transition: translate var(--mo-duration-quick, 250ms) cubic-bezier(0.2, 0, 0, 1), opacity var(--mo-duration-quick, 250ms);
+
+				/* An overlay is only ever inserted, so it comes in from the strip it belongs to and leaves at once. */
+				@starting-style {
+					translate: -1.5rem 0;
+					opacity: 0;
+				}
+			}
+
+			:host(:not([docked])) [part=panel]:dir(rtl) {
+				@starting-style {
+					translate: 1.5rem 0;
+				}
+			}
+
+			#panel-heading {
+				padding: 20px 20px 8px;
+				font-size: 1.125rem;
+				font-weight: 500;
+			}
+
+			mo-navigation-tree {
+				flex: 1;
+				overflow-y: auto;
+				scrollbar-width: thin;
+			}
+		`;
+    }
+    get template() {
+        return html `
+			<nav part='strip' role='navigation'>
+				<slot name='header'></slot>
+				<div id='items'>
+					${repeat(visibleNavigations(this.navigations), navigation => navigation, navigation => this.itemTemplate(navigation))}
+				</div>
+				<slot name='footer'></slot>
+			</nav>
+			${this.panelTemplate}
+		`;
+    }
+    itemTemplate(navigation) {
+        return html `
+			<mo-navigation-rail-item
+				.navigation=${navigation}
+				.current=${navigation.current === true}
+				.selected=${navigation === this.shownNavigation}
+				@click=${() => this.handleItemClick(navigation)}
+				${navigation.link?.({ invocationHandler: () => this.invoke.dispatch(navigation) })}
+			></mo-navigation-rail-item>
+		`;
+    }
+    get panelTemplate() {
+        const navigation = this.shownNavigation;
+        return !navigation ? html.nothing : html `
+			<div part='panel'>
+				<div id='panel-heading'>${navigation.label}</div>
+				<mo-navigation-tree .navigations=${[...visibleNavigations(navigation.children)]}></mo-navigation-tree>
+			</div>
+		`;
+    }
+    handleItemClick(navigation) {
+        if (visibleNavigations(navigation.children).length === 0) {
+            this.selection = undefined;
+            return;
+        }
+        this.selection = this.shownNavigation === navigation && !this.docked ? undefined : navigation;
+    }
+};
+__decorate([
+    event({ bubbles: true, composed: true })
+], NavigationRail.prototype, "invoke", void 0);
+__decorate([
+    property({ type: Array })
+], NavigationRail.prototype, "navigations", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NavigationRail.prototype, "docked", void 0);
+__decorate([
+    state()
+], NavigationRail.prototype, "selection", void 0);
+__decorate([
+    eventListener({ target: window, type: 'popstate' })
+], NavigationRail.prototype, "handleLocationChange", null);
+__decorate([
+    eventListener('invoke')
+], NavigationRail.prototype, "handleInvoke", null);
+__decorate([
+    eventListener({ target: document, type: 'pointerdown' })
+], NavigationRail.prototype, "handleDocumentPointerDown", null);
+__decorate([
+    eventListener({ target: window, type: 'keydown' })
+], NavigationRail.prototype, "handleKeyDown", null);
+NavigationRail = __decorate([
+    component('mo-navigation-rail')
+], NavigationRail);
+export { NavigationRail };

package/dist/NavigationRailItem.d.ts

@@ -0,0 +1,28 @@
+import { Component } from '@a11d/lit';
+import { type INavigation } from './INavigation.js';
+/**
+ * A navigation of a navigation rail: an icon with its label beneath it.
+ *
+ * @element mo-navigation-rail-item
+ *
+ * @attr navigation - The navigation this item stands for.
+ * @attr data-current - Whether this navigation, or one nested in it, is the page being shown.
+ * @attr selected - Whether the rail is showing this navigation's destinations.
+ *
+ * @csspart indicator - The shape behind the icon, which marks the navigation the page belongs to.
+ * @csspart label - The label beneath the icon.
+ */
+export declare class NavigationRailItem extends Component {
+    navigation: INavigation;
+    current: boolean;
+    selected: boolean;
+    tabIndex: number;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): import("lit-html").HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-navigation-rail-item': NavigationRailItem;
+    }
+}
+//# sourceMappingURL=NavigationRailItem.d.ts.map

package/dist/NavigationRailItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRailItem.d.ts","sourceRoot":"","sources":["../NavigationRailItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkC,MAAM,WAAW,CAAA;AACrE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD;;;;;;;;;;;GAWG;AACH,qBACa,kBAAmB,SAAQ,SAAS;IACpB,UAAU,EAAG,WAAW,CAAA;IACmB,OAAO,UAAQ;IAC1C,QAAQ,UAAQ;IAEnD,QAAQ,SAAI;IAErB,WAAoB,MAAM,kCA0DzB;IAED,cAAuB,QAAQ,0CAQ9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,kBAAkB,CAAA;KAC7C;CACD"}