@3mo/navigation 0.1.0

package/dist/NavigationRailItem.js

@@ -0,0 +1,103 @@
+import { __decorate } from "tslib";
+import { Component, component, css, html, property } from '@a11d/lit';
+/**
+ * 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.
+ */
+let NavigationRailItem = class NavigationRailItem extends Component {
+    constructor() {
+        super(...arguments);
+        this.current = false;
+        this.selected = false;
+        this.tabIndex = 0;
+    }
+    static get styles() {
+        return css `
+			:host {
+				position: relative;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				gap: 4px;
+				padding-block: 8px;
+				border-radius: var(--mo-border-radius);
+				color: var(--mo-color-foreground-transparent);
+				cursor: pointer;
+				outline: none;
+				-webkit-tap-highlight-color: transparent;
+			}
+
+			:host([selected]) {
+				background: var(--mo-color-transparent-gray-1);
+			}
+
+			:host([data-current]), :host([data-router-selected]) {
+				color: var(--mo-color-on-selected);
+			}
+
+			[part=indicator] {
+				display: grid;
+				place-items: center;
+				inline-size: 56px;
+				block-size: 32px;
+				border-radius: 16px;
+				transition: background-color 0.2s ease;
+
+				mo-icon {
+					font-size: 24px;
+				}
+			}
+
+			:host([data-current]) [part=indicator], :host([data-router-selected]) [part=indicator] {
+				background: var(--mo-color-selected);
+			}
+
+			:host(:hover:not([data-current])) [part=indicator] {
+				background: var(--mo-color-transparent-gray-2);
+			}
+
+			[part=label] {
+				font-size: 0.75rem;
+				line-height: 1.2;
+				font-weight: 500;
+				text-align: center;
+				max-inline-size: 100%;
+				padding-inline: 4px;
+				overflow: hidden;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2;
+			}
+		`;
+    }
+    get template() {
+        return html `
+			<mo-focus-ring .control=${this} inward></mo-focus-ring>
+			<span part='indicator'>
+				${!this.navigation?.icon ? html.nothing : html `<mo-icon icon=${this.navigation.icon}></mo-icon>`}
+			</span>
+			<span part='label'>${this.navigation?.label}</span>
+		`;
+    }
+};
+__decorate([
+    property({ type: Object })
+], NavigationRailItem.prototype, "navigation", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'data-current' })
+], NavigationRailItem.prototype, "current", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NavigationRailItem.prototype, "selected", void 0);
+NavigationRailItem = __decorate([
+    component('mo-navigation-rail-item')
+], NavigationRailItem);
+export { NavigationRailItem };

package/dist/NavigationTree.d.ts

@@ -0,0 +1,33 @@
+import { Component, type HTMLTemplateResult } from '@a11d/lit';
+import { type INavigation } from './INavigation.js';
+import './NavigationTreeItem.js';
+/**
+ * The navigations as a tree of rows: a group is a row which opens, a destination is a row which navigates.
+ * The row of the page being shown is revealed, so that a deep destination is on screen right away.
+ *
+ * @element mo-navigation-tree
+ *
+ * @attr navigations - The navigations to present.
+ * @fires invoke - Dispatched with the destination which was invoked.
+ *
+ * @csspart tree - The tree holding the rows.
+ * @csspart item - Every row of the tree.
+ */
+export declare class NavigationTree extends Component {
+    readonly invoke: EventDispatcher<INavigation>;
+    navigations: INavigation[];
+    private readonly treeElement?;
+    protected handleLocationChange(): void;
+    focus(options?: FocusOptions): void;
+    private revealedItem?;
+    protected updated(...parameters: Parameters<Component['updated']>): void;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): HTMLTemplateResult;
+    private itemTemplate;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-navigation-tree': NavigationTree;
+    }
+}
+//# sourceMappingURL=NavigationTree.d.ts.map

package/dist/NavigationTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationTree.d.ts","sourceRoot":"","sources":["../NavigationTree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkF,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAE9I,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,yBAAyB,CAAA;AAEhC;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,SAAS;IACF,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,WAAW,CAAC,CAAA;IAE7D,WAAW,gBAA2B;IAE/C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAM;IAGrD,SAAS,CAAC,oBAAoB;IAIrB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAQrC,OAAO,CAAC,YAAY,CAAC,CAAS;cAEX,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAS1E,WAAoB,MAAM,kCAUzB;IAED,cAAuB,QAAQ,uBAM9B;IAED,OAAO,CAAC,YAAY;CAYpB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,cAAc,CAAA;KACpC;CACD"}

package/dist/NavigationTree.js

@@ -0,0 +1,87 @@
+import { __decorate } from "tslib";
+import { Component, component, css, event, eventListener, html, ifDefined, property, query, repeat } from '@a11d/lit';
+import { visibleNavigations } from './INavigation.js';
+import './NavigationTreeItem.js';
+/**
+ * The navigations as a tree of rows: a group is a row which opens, a destination is a row which navigates.
+ * The row of the page being shown is revealed, so that a deep destination is on screen right away.
+ *
+ * @element mo-navigation-tree
+ *
+ * @attr navigations - The navigations to present.
+ * @fires invoke - Dispatched with the destination which was invoked.
+ *
+ * @csspart tree - The tree holding the rows.
+ * @csspart item - Every row of the tree.
+ */
+let NavigationTree = class NavigationTree extends Component {
+    constructor() {
+        super(...arguments);
+        this.navigations = new Array();
+    }
+    handleLocationChange() {
+        this.requestUpdate();
+    }
+    focus(options) {
+        if (this.treeElement) {
+            this.treeElement.focus(options);
+        }
+        else {
+            super.focus(options);
+        }
+    }
+    updated(...parameters) {
+        super.updated(...parameters);
+        const current = this.treeElement?.querySelector('mo-navigation-tree-item[aria-current]') ?? undefined;
+        if (current && current !== this.revealedItem) {
+            this.revealedItem = current;
+            this.treeElement?.reveal(current);
+        }
+    }
+    static get styles() {
+        return css `
+			:host {
+				display: block;
+			}
+
+			mo-tree {
+				padding-block: 8px;
+			}
+		`;
+    }
+    get template() {
+        return html `
+			<mo-tree part='tree'>
+				${repeat(visibleNavigations(this.navigations), navigation => navigation, navigation => this.itemTemplate(navigation))}
+			</mo-tree>
+		`;
+    }
+    itemTemplate(navigation, level = 0) {
+        const children = visibleNavigations(navigation.children);
+        return html `
+			<mo-navigation-tree-item part='item'
+				icon=${ifDefined(level === 0 ? navigation.icon : undefined)}
+				.current=${navigation.current === true}
+				aria-current=${ifDefined(navigation.current === true && children.length === 0 ? 'page' : undefined)}
+				?data-separator=${navigation.hasSeparator === true}
+				${navigation.link?.({ invocationHandler: () => this.invoke.dispatch(navigation) }) ?? html.nothing}
+			>${navigation.label}${children.map(child => this.itemTemplate(child, level + 1))}</mo-navigation-tree-item>
+		`;
+    }
+};
+__decorate([
+    event({ bubbles: true, composed: true })
+], NavigationTree.prototype, "invoke", void 0);
+__decorate([
+    property({ type: Array })
+], NavigationTree.prototype, "navigations", void 0);
+__decorate([
+    query('mo-tree')
+], NavigationTree.prototype, "treeElement", void 0);
+__decorate([
+    eventListener({ target: window, type: 'popstate' })
+], NavigationTree.prototype, "handleLocationChange", null);
+NavigationTree = __decorate([
+    component('mo-navigation-tree')
+], NavigationTree);
+export { NavigationTree };

package/dist/NavigationTreeItem.d.ts

@@ -0,0 +1,19 @@
+import { TreeItem } from '@3mo/tree';
+/**
+ * A row of a navigation tree: a destination, or a group of them which opens.
+ *
+ * @element mo-navigation-tree-item
+ *
+ * @attr data-current - Whether this row, or a row nested in it, is the page being shown.
+ * @attr data-separator - Whether a divider parts this row from the one before it.
+ */
+export declare class NavigationTreeItem extends TreeItem {
+    current: boolean;
+    static get styles(): import("@a11d/lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-navigation-tree-item': NavigationTreeItem;
+    }
+}
+//# sourceMappingURL=NavigationTreeItem.d.ts.map

package/dist/NavigationTreeItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationTreeItem.d.ts","sourceRoot":"","sources":["../NavigationTreeItem.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAEpC;;;;;;;GAOG;AACH,qBACa,kBAAmB,SAAQ,QAAQ;IACwB,OAAO,UAAQ;IAEtF,WAAoB,MAAM,kCA0FzB;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,kBAAkB,CAAA;KAC7C;CACD"}

package/dist/NavigationTreeItem.js

@@ -0,0 +1,115 @@
+import { __decorate } from "tslib";
+import { component, css, property } from '@a11d/lit';
+import { TreeItem } from '@3mo/tree';
+/**
+ * A row of a navigation tree: a destination, or a group of them which opens.
+ *
+ * @element mo-navigation-tree-item
+ *
+ * @attr data-current - Whether this row, or a row nested in it, is the page being shown.
+ * @attr data-separator - Whether a divider parts this row from the one before it.
+ */
+let NavigationTreeItem = class NavigationTreeItem extends TreeItem {
+    constructor() {
+        super(...arguments);
+        this.current = false;
+    }
+    static get styles() {
+        return css `
+			${super.styles}
+
+			[part=row] {
+				/* A child's label lines up under its parent's, the first step clearing the parent's icon. */
+				padding-inline: calc(12px + var(--mo-tree-level, 0) * 16px + min(var(--mo-tree-level, 0), 1) * 14px) 8px;
+				min-block-size: 28px;
+				margin: 1px 8px;
+				border-radius: var(--mo-border-radius);
+				font-size: 0.875rem;
+				line-height: 1.25;
+				/* The group draws one line for the whole nested block; the tree's own guides would be one per level. */
+				background-image: none;
+			}
+
+			:host(:not([slot=children])) [part=row] {
+				min-block-size: 34px;
+				font-weight: 500;
+			}
+
+			slot[name=start] mo-icon {
+				font-size: 20px;
+				opacity: 0.7;
+			}
+
+			@media not (any-pointer: fine) {
+				[part=row] {
+					min-block-size: 36px;
+				}
+
+				:host(:not([slot=children])) [part=row] {
+					min-block-size: 40px;
+				}
+			}
+
+			/* A separator parts two sections, so it is a line with air around it rather than a border drawn
+			   on the rounded block of the row below it — and it starts where the guide line of a nested
+			   block runs, so that the two meet at a corner instead of crossing. */
+			:host([data-separator]) {
+				margin-block-start: 5px;
+				padding-block-start: 5px;
+				background-image: linear-gradient(var(--mo-color-transparent-gray-3) 0 0);
+				background-size: calc(100% - 30px) 1px;
+				background-position: 30px 0;
+				background-repeat: no-repeat;
+			}
+
+			:host([data-separator]) [part=row] {
+				border-block-start: none;
+			}
+
+			:host([data-current]) [part=row] {
+				color: var(--mo-color-on-selected);
+			}
+
+			:host([aria-current]) [part=row] {
+				background-color: var(--mo-color-selected);
+				color: var(--mo-color-on-selected);
+
+				slot[name=start] mo-icon {
+					opacity: 1;
+				}
+			}
+
+			[part=indicator] {
+				order: 1;
+				margin-inline-start: auto;
+				inline-size: 1.5rem;
+				block-size: 1.5rem;
+
+				mo-icon {
+					font-size: 18px;
+				}
+			}
+
+			/* A row with nothing to open keeps no room for the chevron it does not draw. */
+			:host(:not([aria-expanded])) [part=indicator] {
+				display: none;
+			}
+
+			/* One line for the whole nested block, drawn by the outermost group alone: a deeper one would lay
+			   a second over it, and two of the same translucent grey read as a brighter stripe. */
+			:host(:not([slot=children])) [part=group] > div {
+				background-image: linear-gradient(var(--mo-color-transparent-gray-3) 0 0);
+				background-size: 1px 100%;
+				background-position: 30px 0;
+				background-repeat: no-repeat;
+			}
+		`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'data-current' })
+], NavigationTreeItem.prototype, "current", void 0);
+NavigationTreeItem = __decorate([
+    component('mo-navigation-tree-item')
+], NavigationTreeItem);
+export { NavigationTreeItem };