@3mo/navigation 0.1.0

package/dist/INavigation.d.ts

@@ -0,0 +1,35 @@
+import type { DirectiveResult, HTMLTemplateResult } from '@a11d/lit';
+import type { MaterialIcon } from '@3mo/icon';
+/** What an implementation of @see INavigation is given, beyond whatever it derives itself. */
+export type NavigationOptions = {
+    readonly label?: string | HTMLTemplateResult;
+    readonly icon?: MaterialIcon;
+    readonly hidden?: boolean;
+    readonly hasSeparator?: boolean;
+};
+export type NavigationInvocationOptions = {
+    /** Called after the navigation has been invoked, e.g. to close whatever presented it. */
+    readonly invocationHandler?: () => void;
+};
+/**
+ * A destination, or a group of destinations, as the navigation components present it.
+ *
+ * It carries no routing of its own — an application implements `link` with whatever makes an element
+ * navigate, and reports through `current` which navigation the page being shown belongs to.
+ */
+export interface INavigation {
+    readonly label: string | HTMLTemplateResult;
+    readonly icon?: MaterialIcon;
+    /** Whether the navigation shall not be presented at all, e.g. because the user may not reach it. */
+    readonly hidden?: boolean;
+    /** Whether a divider parts this navigation from the one before it. */
+    readonly hasSeparator?: boolean;
+    readonly children?: ReadonlyArray<INavigation>;
+    /** Whether this navigation, or any of its descendants, is the page being shown. */
+    readonly current?: boolean;
+    /** Applied to the element which invokes this navigation, making it navigate there. */
+    link?(options?: NavigationInvocationOptions): DirectiveResult;
+}
+/** The navigations which shall be presented, in the order they were given. */
+export declare const visibleNavigations: (navigations: ReadonlyArray<INavigation> | undefined) => INavigation[];
+//# sourceMappingURL=INavigation.d.ts.map

package/dist/INavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"INavigation.d.ts","sourceRoot":"","sources":["../INavigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAA;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAE7C,8FAA8F;AAC9F,MAAM,MAAM,iBAAiB,GAAG;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAA;IAC5C,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAA;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACzC,yFAAyF;IACzF,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;CACvC,CAAA;AAED;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,kBAAkB,CAAA;IAC3C,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAA;IAC5B,oGAAoG;IACpG,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,sEAAsE;IACtE,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAA;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;IAC9C,mFAAmF;IACnF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,sFAAsF;IACtF,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,2BAA2B,GAAG,eAAe,CAAA;CAC7D;AAED,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,GAAI,aAAa,aAAa,CAAC,WAAW,CAAC,GAAG,SAAS,kBAAsD,CAAA"}

package/dist/INavigation.js

@@ -0,0 +1,2 @@
+/** The navigations which shall be presented, in the order they were given. */
+export const visibleNavigations = (navigations) => navigations?.filter(n => n.hidden !== true) ?? [];

package/dist/Navigation.d.ts

@@ -0,0 +1,75 @@
+import { Component, type HTMLTemplateResult, type PropertyValues } from '@a11d/lit';
+import { type INavigation } from './INavigation.js';
+import { type NavigationPresentation } from './NavigationPresentation.js';
+import './NavigationBar.js';
+import './NavigationRail.js';
+import './NavigationDrawer.js';
+/**
+ * The application's shell: a header, the page beside or beneath it, and the navigations presented as
+ * whichever of `bar`, `rail` and `drawer` fits.
+ *
+ * `presentations` is the order they are preferred in, and the first one which fits is the one shown —
+ * the bar as long as its navigations fit its row, the rail as long as the page keeps
+ * `--mo-navigation-min-content-size` beside it, and the drawer, which always fits. Demoting the bar is
+ * therefore a matter of leaving it out of the order rather than of replacing the shell.
+ *
+ * @element mo-navigation
+ *
+ * @attr navigations - The navigations to present.
+ * @attr presentations - The presentations to choose from, most preferred first. Defaults to `bar` then `drawer`.
+ * @attr presentation - The presentation being shown. Derived, and reflected for styling.
+ * @attr heading - The application's heading, shown in the header and above the drawer's navigations.
+ * @attr drawerOpen - Whether the drawer is open. Only of consequence while the drawer is the presentation.
+ *
+ * @slot - The page.
+ * @slot logo - Placed at the start of the header, and at the top of the rail.
+ * @slot end - Placed at the end of the header.
+ *
+ * @csspart app-bar - The header above the page.
+ * @csspart content - What the page is placed in.
+ *
+ * @cssprop --mo-navigation-min-content-size - How much room the page keeps beside the rail. Defaults to `32rem`, which puts the rail's threshold at Material's medium window.
+ * @cssprop --mo-navigation-rail-size - How wide the rail's strip is. Defaults to `5.5rem`.
+ * @cssprop --mo-navigation-rail-panel-size - How wide the rail's panel is. Defaults to `17rem`.
+ *
+ * @i18n "Navigation"
+ */
+export declare class Navigation extends Component {
+    navigations: INavigation[];
+    presentations: NavigationPresentation[];
+    heading?: string | HTMLTemplateResult;
+    presentation: NavigationPresentation;
+    drawerOpen: boolean;
+    private railDocked;
+    get navigationBar(): import("./NavigationBar.js").NavigationBar | null;
+    get navigationRail(): import("./NavigationRail.js").NavigationRail | null;
+    get menuButton(): HTMLElement | null;
+    private readonly railMetrics?;
+    private readonly railDockedMetrics?;
+    private readonly resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected handleKeyDown(event: KeyboardEvent): void;
+    focus(options?: FocusOptions): void;
+    protected update(props: PropertyValues<this>): void;
+    private drawerWasOpen;
+    protected updated(props: PropertyValues<this>): void;
+    private resolvePresentation;
+    private fits;
+    /**
+     * Whether the shell is at least as wide as the probe, which is what resolves the rail's sizes
+     * without the rail having to be there. Unknown until both have been laid out.
+     */
+    private hasRoomFor;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): HTMLTemplateResult;
+    private get barTemplate();
+    private get railTemplate();
+    private get drawerTemplate();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-navigation': Navigation;
+    }
+}
+//# sourceMappingURL=Navigation.d.ts.map

package/dist/Navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../Navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAoF,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAA;AAC3K,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACzE,OAAO,oBAAoB,CAAA;AAC3B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,UAAW,SAAQ,SAAS;IACb,WAAW,gBAA2B;IACtC,aAAa,2BAAqD;IACjF,OAAO,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAA;IACpB,YAAY,EAAE,sBAAsB,CAAQ;IAE5C,UAAU,UAAQ;IAEtC,OAAO,CAAC,UAAU,CAAQ;IAEnC,IAAI,aAAa,sDAAyE;IAC1F,IAAI,cAAc,wDAA0E;IAC5F,IAAI,UAAU,uBAA8F;IAEpF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAa;IAE/E,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAwE;IAE9F,iBAAiB;IAKjB,oBAAoB;IAM7B,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa;IAOnC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;cAclB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC;IAOrD,OAAO,CAAC,aAAa,CAAQ;cAEV,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC;IAQtD,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,IAAI;IAWZ;;;OAGG;IACH,OAAO,CAAC,UAAU;IAKlB,WAAoB,MAAM,kCAqGzB;IAED,cAAuB,QAAQ,uBAiC9B;IAED,OAAO,KAAK,WAAW,GAOtB;IAED,OAAO,KAAK,YAAY,GAMvB;IAED,OAAO,KAAK,cAAc,GAQzB;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,UAAU,CAAA;KAC3B;CACD"}

package/dist/Navigation.js

@@ -0,0 +1,304 @@
+import { __decorate } from "tslib";
+import { bind, Component, component, css, eventListener, html, ifDefined, isServer, property, query, state } from '@a11d/lit';
+import './NavigationBar.js';
+import './NavigationRail.js';
+import './NavigationDrawer.js';
+/**
+ * The application's shell: a header, the page beside or beneath it, and the navigations presented as
+ * whichever of `bar`, `rail` and `drawer` fits.
+ *
+ * `presentations` is the order they are preferred in, and the first one which fits is the one shown —
+ * the bar as long as its navigations fit its row, the rail as long as the page keeps
+ * `--mo-navigation-min-content-size` beside it, and the drawer, which always fits. Demoting the bar is
+ * therefore a matter of leaving it out of the order rather than of replacing the shell.
+ *
+ * @element mo-navigation
+ *
+ * @attr navigations - The navigations to present.
+ * @attr presentations - The presentations to choose from, most preferred first. Defaults to `bar` then `drawer`.
+ * @attr presentation - The presentation being shown. Derived, and reflected for styling.
+ * @attr heading - The application's heading, shown in the header and above the drawer's navigations.
+ * @attr drawerOpen - Whether the drawer is open. Only of consequence while the drawer is the presentation.
+ *
+ * @slot - The page.
+ * @slot logo - Placed at the start of the header, and at the top of the rail.
+ * @slot end - Placed at the end of the header.
+ *
+ * @csspart app-bar - The header above the page.
+ * @csspart content - What the page is placed in.
+ *
+ * @cssprop --mo-navigation-min-content-size - How much room the page keeps beside the rail. Defaults to `32rem`, which puts the rail's threshold at Material's medium window.
+ * @cssprop --mo-navigation-rail-size - How wide the rail's strip is. Defaults to `5.5rem`.
+ * @cssprop --mo-navigation-rail-panel-size - How wide the rail's panel is. Defaults to `17rem`.
+ *
+ * @i18n "Navigation"
+ */
+let Navigation = class Navigation extends Component {
+    constructor() {
+        super(...arguments);
+        this.navigations = new Array();
+        this.presentations = new Array('bar', 'drawer');
+        this.presentation = 'bar';
+        this.drawerOpen = false;
+        this.railDocked = false;
+        this.resizeObserver = isServer ? undefined : new ResizeObserver(() => this.requestUpdate());
+        /* The drawer writes its own state back, which can skip a property's update hook altogether. */
+        this.drawerWasOpen = false;
+    }
+    get navigationBar() { return this.renderRoot?.querySelector('mo-navigation-bar') ?? null; }
+    get navigationRail() { return this.renderRoot?.querySelector('mo-navigation-rail') ?? null; }
+    get menuButton() { return this.renderRoot?.querySelector('mo-icon-button[icon=menu]') ?? null; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver?.observe(this);
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        super.disconnectedCallback();
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Alt' && event.composedPath().filter(e => e instanceof Element).every(e => e.tagName.toLowerCase() !== 'input')) {
+            event.preventDefault();
+            this.focus();
+        }
+    }
+    focus(options) {
+        switch (this.presentation) {
+            case 'bar':
+                this.navigationBar?.focus(options);
+                break;
+            case 'rail':
+                this.navigationRail?.focus(options);
+                break;
+            default:
+                this.menuButton?.focus(options);
+                break;
+        }
+    }
+    update(props) {
+        this.presentation = this.resolvePresentation();
+        this.railDocked = this.hasRoomFor(this.railDockedMetrics) ?? false;
+        super.update(props);
+    }
+    updated(props) {
+        super.updated(props);
+        if (this.drawerWasOpen && this.drawerOpen === false) {
+            this.menuButton?.focus();
+        }
+        this.drawerWasOpen = this.drawerOpen;
+    }
+    resolvePresentation() {
+        return this.presentations.find(presentation => this.fits(presentation))
+            ?? this.presentations[this.presentations.length - 1]
+            ?? 'drawer';
+    }
+    fits(presentation) {
+        switch (presentation) {
+            case 'bar':
+                return this.navigationBar?.hasOverflow !== true;
+            case 'rail':
+                return this.hasRoomFor(this.railMetrics) ?? true;
+            default:
+                return true;
+        }
+    }
+    /**
+     * Whether the shell is at least as wide as the probe, which is what resolves the rail's sizes
+     * without the rail having to be there. Unknown until both have been laid out.
+     */
+    hasRoomFor(probe) {
+        const required = probe?.offsetWidth;
+        return !required || !this.clientWidth ? undefined : this.clientWidth >= required;
+    }
+    static get styles() {
+        return css `
+			:host {
+				display: grid;
+				grid-template-columns: auto minmax(0, 1fr);
+				flex: 1;
+				min-block-size: 0;
+			}
+
+			#metrics {
+				position: absolute;
+				visibility: hidden;
+				pointer-events: none;
+				inline-size: 0;
+				block-size: 0;
+				overflow: hidden;
+
+				#metrics-rail {
+					inline-size: calc(var(--mo-navigation-rail-size, 5.5rem) + var(--mo-navigation-min-content-size, 32rem));
+				}
+
+				#metrics-rail-docked {
+					inline-size: calc(var(--mo-navigation-rail-size, 5.5rem) + var(--mo-navigation-rail-panel-size, 17rem) + var(--mo-navigation-min-content-size, 32rem));
+				}
+			}
+
+			mo-navigation-rail {
+				grid-column: 1;
+			}
+
+			#main {
+				grid-column: 2;
+				display: flex;
+				flex-direction: column;
+				min-inline-size: 0;
+			}
+
+			[part=app-bar] {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				gap: 32px;
+				flex: 0 0 auto;
+				block-size: 48px;
+				padding-inline-start: 4px;
+				background: var(--mo-color-accent);
+				color: var(--mo-color-on-accent);
+				overflow: hidden;
+			}
+
+			#brand {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			slot[name=logo]::slotted(*) {
+				block-size: 30px;
+				margin-inline-start: 0.875rem;
+			}
+
+			#heading {
+				margin: 2px 0 0 8px;
+				font-size: 23px;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			mo-navigation-bar {
+				flex: 1;
+				min-inline-size: 0;
+				/* The bar keeps its place even while another presentation is shown, since only a bar which is
+				   laid out can report that its navigations fit again. */
+				&:not([data-presentation=bar]) {
+					visibility: hidden;
+				}
+			}
+
+			#end {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				gap: 8px;
+				margin-inline-start: auto;
+			}
+
+			mo-icon-button[icon=menu] {
+				font-size: 20px;
+			}
+
+			[part=content] {
+				display: flex;
+				flex-direction: column;
+				flex: 1;
+				min-block-size: 0;
+			}
+		`;
+    }
+    get template() {
+        return html `
+			<div id='metrics' aria-hidden='true'>
+				<div id='metrics-rail'></div>
+				<div id='metrics-rail-docked'></div>
+			</div>
+
+			${this.railTemplate}
+
+			<div id='main'>
+				<header part='app-bar'>
+					<div id='brand'>
+						${this.presentation !== 'drawer' ? html.nothing : html `
+							<mo-icon-button icon='menu' aria-label=${t('Navigation')} @click=${() => this.drawerOpen = !this.drawerOpen}></mo-icon-button>
+						`}
+						${this.presentation === 'rail' ? html.nothing : html `<slot name='logo'></slot>`}
+						<div id='heading'>${this.heading}</div>
+					</div>
+
+					${this.barTemplate}
+
+					<div id='end'>
+						<slot name='end'></slot>
+					</div>
+				</header>
+
+				<div part='content'>
+					<slot></slot>
+				</div>
+			</div>
+
+			${this.drawerTemplate}
+		`;
+    }
+    get barTemplate() {
+        return !this.presentations.includes('bar') ? html.nothing : html `
+			<mo-navigation-bar
+				.navigations=${this.navigations}
+				data-presentation=${this.presentation}
+			></mo-navigation-bar>
+		`;
+    }
+    get railTemplate() {
+        return this.presentation !== 'rail' ? html.nothing : html `
+			<mo-navigation-rail ?docked=${this.railDocked} .navigations=${this.navigations}>
+				<slot name='logo' slot='header'></slot>
+			</mo-navigation-rail>
+		`;
+    }
+    get drawerTemplate() {
+        return this.presentation !== 'drawer' ? html.nothing : html `
+			<mo-navigation-drawer
+				?open=${bind(this, 'drawerOpen')}
+				heading=${ifDefined(this.heading)}
+				.navigations=${this.navigations}
+			></mo-navigation-drawer>
+		`;
+    }
+};
+__decorate([
+    property({ type: Array })
+], Navigation.prototype, "navigations", void 0);
+__decorate([
+    property({ type: Array })
+], Navigation.prototype, "presentations", void 0);
+__decorate([
+    property()
+], Navigation.prototype, "heading", void 0);
+__decorate([
+    property({ reflect: true })
+], Navigation.prototype, "presentation", void 0);
+__decorate([
+    property({ type: Boolean })
+], Navigation.prototype, "drawerOpen", void 0);
+__decorate([
+    state()
+], Navigation.prototype, "railDocked", void 0);
+__decorate([
+    query('#metrics-rail')
+], Navigation.prototype, "railMetrics", void 0);
+__decorate([
+    query('#metrics-rail-docked')
+], Navigation.prototype, "railDockedMetrics", void 0);
+__decorate([
+    eventListener({ target: window, type: 'keydown' })
+], Navigation.prototype, "handleKeyDown", null);
+Navigation = __decorate([
+    component('mo-navigation')
+], Navigation);
+export { Navigation };

package/dist/NavigationBar.d.ts

@@ -0,0 +1,32 @@
+import { Component } from '@a11d/lit';
+import { type INavigation } from './INavigation.js';
+import './NavigationBarItem.js';
+/**
+ * The navigations as a horizontal row, each group opening its destinations as a dropdown.
+ *
+ * It reports through `hasOverflow` whether its navigations still fit, which is what an orchestrating
+ * `mo-navigation` decides by whether the bar is the presentation it can afford.
+ *
+ * @element mo-navigation-bar
+ *
+ * @attr navigations - The navigations to present.
+ * @fires invoke - Dispatched with the navigation which was invoked.
+ */
+export declare class NavigationBar extends Component {
+    readonly invoke: EventDispatcher<INavigation>;
+    navigations: INavigation[];
+    readonly role = "navigation";
+    private readonly overflowController;
+    get items(): readonly import("./NavigationBarItem.js").NavigationBarItem[];
+    get hasOverflow(): boolean;
+    protected handleLocationChange(): void;
+    focus(options?: FocusOptions): void;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): import("lit-html").HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-navigation-bar': NavigationBar;
+    }
+}
+//# sourceMappingURL=NavigationBar.d.ts.map

package/dist/NavigationBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBar.d.ts","sourceRoot":"","sources":["../NavigationBar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgE,MAAM,WAAW,CAAA;AAEnG,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,wBAAwB,CAAA;AAE/B;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,SAAS;IACD,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,WAAW,CAAC,CAAA;IAE7D,WAAW,gBAA2B;IAEjE,SAAkB,IAAI,gBAAe;IAErC,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAEhC;IAEH,IAAI,KAAK,kEAER;IAED,IAAI,WAAW,YAEd;IAGD,SAAS,CAAC,oBAAoB;IAIrB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IASrC,WAAoB,MAAM,kCAmBzB;IAED,cAAuB,QAAQ,0CAY9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,aAAa,CAAA;KAClC;CACD"}

package/dist/NavigationBar.js

@@ -0,0 +1,90 @@
+import { __decorate } from "tslib";
+import { Component, component, css, event, eventListener, html, property, repeat } from '@a11d/lit';
+import { OverflowController } from '@3mo/overflow-controller';
+import { visibleNavigations } from './INavigation.js';
+import './NavigationBarItem.js';
+/**
+ * The navigations as a horizontal row, each group opening its destinations as a dropdown.
+ *
+ * It reports through `hasOverflow` whether its navigations still fit, which is what an orchestrating
+ * `mo-navigation` decides by whether the bar is the presentation it can afford.
+ *
+ * @element mo-navigation-bar
+ *
+ * @attr navigations - The navigations to present.
+ * @fires invoke - Dispatched with the navigation which was invoked.
+ */
+let NavigationBar = class NavigationBar extends Component {
+    constructor() {
+        super(...arguments);
+        this.navigations = new Array();
+        this.role = 'navigation';
+        this.overflowController = new OverflowController(this, host => ({
+            get disabled() { return !host.overflowController.containerElement?.clientWidth; },
+        }));
+    }
+    get items() {
+        return this.overflowController.items;
+    }
+    get hasOverflow() {
+        return this.overflowController.hasOverflow;
+    }
+    handleLocationChange() {
+        this.requestUpdate();
+    }
+    focus(options) {
+        const item = this.items[0];
+        if (item) {
+            item.focus(options);
+        }
+        else {
+            super.focus(options);
+        }
+    }
+    static get styles() {
+        return css `
+			:host {
+				display: block;
+				overflow: hidden;
+			}
+
+			#items {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				gap: 8px;
+				overflow: hidden;
+			}
+
+			mo-navigation-bar-item {
+				flex: 0 0 auto;
+			}
+		`;
+    }
+    get template() {
+        return html `
+			<div id='items' ${this.overflowController.container()}>
+				${repeat(visibleNavigations(this.navigations), navigation => navigation, navigation => html `
+					<mo-navigation-bar-item ${this.overflowController.item()}
+						.navigation=${navigation}
+						.current=${navigation.current === true}
+						${navigation.link?.({ invocationHandler: () => this.invoke.dispatch(navigation) }) ?? html.nothing}
+					></mo-navigation-bar-item>
+				`)}
+			</div>
+		`;
+    }
+};
+__decorate([
+    event({ bubbles: true, composed: true })
+], NavigationBar.prototype, "invoke", void 0);
+__decorate([
+    property({ type: Array })
+], NavigationBar.prototype, "navigations", void 0);
+__decorate([
+    eventListener({ target: window, type: 'popstate' })
+], NavigationBar.prototype, "handleLocationChange", null);
+NavigationBar = __decorate([
+    component('mo-navigation-bar')
+], NavigationBar);
+export { NavigationBar };

package/dist/NavigationBarItem.d.ts

@@ -0,0 +1,30 @@
+import { Component } from '@a11d/lit';
+import { type INavigation } 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.
+ */
+export declare class NavigationBarItem extends Component {
+    readonly invoke: EventDispatcher<INavigation>;
+    navigation: INavigation;
+    open: boolean;
+    current: boolean;
+    tabIndex: number;
+    private get childNavigations();
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): import("lit-html").HTMLTemplateResult;
+    private menuItemTemplate;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-navigation-bar-item': NavigationBarItem;
+    }
+}
+//# sourceMappingURL=NavigationBarItem.d.ts.map

package/dist/NavigationBarItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBarItem.d.ts","sourceRoot":"","sources":["../NavigationBarItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAA4D,MAAM,WAAW,CAAA;AACrG,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,WAAW,CAAA;AAElB;;;;;;;;;GASG;AACH,qBACa,iBAAkB,SAAQ,SAAS;IACL,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,WAAW,CAAC,CAAA;IAE5D,UAAU,EAAG,WAAW,CAAA;IACR,IAAI,UAAQ;IACe,OAAO,UAAQ;IAC7E,QAAQ,SAAI;IAErB,OAAO,KAAK,gBAAgB,GAE3B;IAED,WAAoB,MAAM,kCAwCzB;IAED,cAAuB,QAAQ,0CAe9B;IAED,OAAO,CAAC,gBAAgB;CAUxB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,iBAAiB,CAAA;KAC3C;CACD"}