@c2n/side-nav 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# @c2n/side-nav
+
+`c2-side-nav` is an app-shell layout with a navigation drawer beside the page content. It pushes the content on large screens (`side` mode) and slides over it with a backdrop on small ones (`over` mode), switching automatically at 600px and 960px.
+
+```html
+<c2-side-nav opened style="height: 100dvh">
+  <nav slot="side-nav-content">…</nav>
+  <main>
+    <button side-nav-toggle>Menu</button>
+    …
+  </main>
+</c2-side-nav>
+```
+
+- Attributes: `opened`, `desktop-mode` / `tablet-mode` (`side` | `over`), `responsive-tablet`, `position` (`start` | `end`).
+- Any element with a `side-nav-toggle` attribute anywhere inside (page header or drawer) toggles the drawer; `toggle()` does the same from code. A non-zero `--c2-side-nav__close--width` gives an icon rail; hide labels with `c2-side-nav:not([opened]) .label { display: none }`.
+- Event: `opened-change` (`detail.opened`) for user and breakpoint driven changes.
+- Over mode: backdrop, page scroll lock, Escape to close, dialog semantics and focus management. Set `--c2-side-nav__over--position: absolute` to keep it inside a positioned parent.
+- Theming: `--c2-side-nav--*` (widths, background, padding, borders, radius, transition), `__divider--*`, `__over--*`, `__backdrop--*`, `__scrollbar--color`.

package/dist/side-nav.js

@@ -0,0 +1,223 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { isServer } from "lit-html/is-server.js";
+import { classMap } from "lit/directives/class-map.js";
+import { BreakpointsObserver } from "@c2n/core/controllers/breakpoints-observer.js";
+import { Breakpoints, smartFixedPosition } from "@c2n/core/dom-helper.js";
+//#region src/side-nav.scss?inline
+var side_nav_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n  align-items: stretch;\n  min-width: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-side-nav {\n  display: flex;\n  flex: 1 1 auto;\n  min-width: 0;\n  align-items: stretch;\n}\n.c2-side-nav.end {\n  flex-direction: row-reverse;\n}\n\n.drawer {\n  position: relative;\n  flex: none;\n  box-sizing: border-box;\n  overflow: hidden;\n  width: var(--c2-side-nav__close--width,0px);\n  z-index: 1;\n  transition: width var(--c2-side-nav--transition-duration,250ms) cubic-bezier(0, 0, 0, 1), transform var(--c2-side-nav--transition-duration,250ms) cubic-bezier(0, 0, 0, 1), visibility 0s linear var(--c2-side-nav--transition-duration,250ms);\n}\n\n:host([opened]) .drawer {\n  width: var(--c2-side-nav__open--width,240px);\n}\n\n.c2-side-nav:not(.ready) .drawer {\n  transition: none;\n}\n\n.panel {\n  box-sizing: border-box;\n  width: var(--c2-side-nav__open--width,240px);\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  scrollbar-color: var(--c2-side-nav__scrollbar--color,rgba(0, 0, 0, 0.2)) transparent;\n  background-color: var(--c2-side-nav--background-color,#fafafa);\n  color: var(--c2-side-nav--color);\n  border-top-left-radius: var(--c2-side-nav--border-top-left-radius);\n  border-top-right-radius: var(--c2-side-nav--border-top-right-radius);\n  border-bottom-left-radius: var(--c2-side-nav--border-bottom-left-radius);\n  border-bottom-right-radius: var(--c2-side-nav--border-bottom-right-radius);\n  padding-top: var(--c2-side-nav--padding-top,16px);\n  padding-right: var(--c2-side-nav--padding-right,16px);\n  padding-bottom: var(--c2-side-nav--padding-bottom,16px);\n  padding-left: var(--c2-side-nav--padding-left,16px);\n  border-top: var(--c2-side-nav--border-top);\n  border-bottom: var(--c2-side-nav--border-bottom);\n  border-right: var(--c2-side-nav--border-right);\n  border-left: var(--c2-side-nav--border-left);\n  border-inline-end: var(--c2-side-nav__divider--width,1px) solid var(--c2-side-nav__divider--color,#e4e4e7);\n  transition: background-color var(--c2-side-nav--transition-duration,250ms) cubic-bezier(0.2, 0, 0, 1);\n}\n\n.c2-side-nav.end .panel {\n  border-inline-end: none;\n  border-inline-start: var(--c2-side-nav__divider--width,1px) solid var(--c2-side-nav__divider--color,#e4e4e7);\n}\n\n.content {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.c2-side-nav.over .drawer {\n  position: var(--c2-side-nav__over--position,fixed);\n  top: var(--c2-side-nav__over--top,0px);\n  left: 0;\n  height: var(--c2-side-nav__over--height,100dvh);\n  width: var(--c2-side-nav__over--width,var(--c2-side-nav__open--width,240px));\n  z-index: calc(var(--c2-side-nav__backdrop--z-index,1000) + 1);\n  transform: translateX(-100%);\n  visibility: hidden;\n  overflow: visible;\n}\n.c2-side-nav.over.end .drawer {\n  left: auto;\n  right: 0;\n  transform: translateX(100%);\n}\n.c2-side-nav.over .panel {\n  width: 100%;\n  border-inline-end: none;\n  border-inline-start: none;\n  background-color: var(--c2-side-nav__over--background-color,var(--c2-side-nav--background-color,#fafafa));\n  border-top-left-radius: var(--c2-side-nav__over--border-top-left-radius,var(--c2-side-nav--border-top-left-radius));\n  border-top-right-radius: var(--c2-side-nav__over--border-top-right-radius,var(--c2-side-nav--border-top-right-radius));\n  border-bottom-left-radius: var(--c2-side-nav__over--border-bottom-left-radius,var(--c2-side-nav--border-bottom-left-radius));\n  border-bottom-right-radius: var(--c2-side-nav__over--border-bottom-right-radius,var(--c2-side-nav--border-bottom-right-radius));\n  padding-top: var(--c2-side-nav__over--padding-top,var(--c2-side-nav--padding-top,16px));\n  padding-right: var(--c2-side-nav__over--padding-right,var(--c2-side-nav--padding-right,16px));\n  padding-bottom: var(--c2-side-nav__over--padding-bottom,var(--c2-side-nav--padding-bottom,16px));\n  padding-left: var(--c2-side-nav__over--padding-left,var(--c2-side-nav--padding-left,16px));\n  box-shadow: var(--c2-side-nav__over--box-shadow,0 12px 40px rgba(0, 0, 0, 0.18));\n}\n\n:host([opened]) .c2-side-nav.over .drawer {\n  transform: none;\n  visibility: visible;\n  transition: transform var(--c2-side-nav--transition-duration,250ms) cubic-bezier(0, 0, 0, 1), visibility 0s;\n}\n\n.backdrop {\n  position: var(--c2-side-nav__over--position,fixed);\n  inset: 0;\n  z-index: var(--c2-side-nav__backdrop--z-index,1000);\n  background-color: var(--c2-side-nav__backdrop--background-color,rgba(0, 0, 0, 0.32));\n  backdrop-filter: var(--c2-side-nav__backdrop--backdrop-filter,none);\n  animation: c2-side-nav-fade-in var(--c2-side-nav--transition-duration,250ms) cubic-bezier(0.2, 0, 0, 1);\n}\n\n@keyframes c2-side-nav-fade-in {\n  from {\n    opacity: 0;\n  }\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/side-nav.ts
+var BREAKPOINT_QUERIES = [
+	Breakpoints.Phone,
+	Breakpoints.Tablet,
+	Breakpoints.Desktop
+];
+var FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+var SideNav = class SideNav extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.opened = false;
+		this.desktopMode = "side";
+		this.tabletMode = "over";
+		this.responsiveTablet = false;
+		this.position = "start";
+		this.breakpoint = "desktop";
+		this.ready = false;
+		this.preferredOpened = false;
+		this.previouslyFocused = null;
+		this.scrollLocked = false;
+		this.breakpointsController = new BreakpointsObserver(this, BREAKPOINT_QUERIES, (isInitial) => this.handleBreakpoint(isInitial));
+		this.handleBackdropClick = () => {
+			this.setOpened(false, true);
+		};
+		this.handleKeydown = (event) => {
+			if (event.key === "Escape" && this.opened && this.mode === "over") {
+				event.preventDefault();
+				this.setOpened(false, true);
+			}
+		};
+	}
+	static {
+		this.styles = unsafeCSS(side_nav_default);
+	}
+	/** The mode in effect for the current viewport: `over` on phones, otherwise `tablet-mode` / `desktop-mode`. */
+	get mode() {
+		if (this.breakpoint === "phone") return "over";
+		if (this.breakpoint === "tablet") return this.tabletMode;
+		return this.desktopMode;
+	}
+	/** Opens or closes the drawer as a user action would (fires `opened-change`). */
+	toggle(opened = !this.opened) {
+		this.setOpened(opened, true);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.preferredOpened = this.opened;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener("keydown", this.handleKeydown);
+		this.lockScroll(false);
+	}
+	collapsesAt(breakpoint) {
+		if (breakpoint === "phone") return true;
+		if (breakpoint === "tablet") return this.tabletMode === "over" || this.responsiveTablet;
+		return this.desktopMode === "over";
+	}
+	/**
+	* On load the `opened` attribute is meant for the layout the author designed for: it is ignored on phones and for the
+	* implicit tablet overlay, but honoured when an overlay mode was chosen explicitly (`desktop-mode="over"`).
+	*/
+	closesOnLoadAt(breakpoint) {
+		if (breakpoint === "phone") return true;
+		if (breakpoint === "tablet") return this.responsiveTablet || this.tabletMode === "over" && !this.hasAttribute("tablet-mode");
+		return false;
+	}
+	handleBreakpoint(isInitial) {
+		const query = this.breakpointsController.currentBreakpoint;
+		this.breakpoint = query === Breakpoints.Phone ? "phone" : query === Breakpoints.Tablet ? "tablet" : "desktop";
+		if (isInitial) {
+			this.preferredOpened = this.opened;
+			if (this.closesOnLoadAt(this.breakpoint)) this.opened = false;
+			this.updateComplete.then(() => requestAnimationFrame(() => this.ready = true));
+			return;
+		}
+		if (this.collapsesAt(this.breakpoint)) {
+			if (this.opened) {
+				this.preferredOpened = true;
+				this.setOpened(false, true);
+			}
+		} else if (this.opened !== this.preferredOpened) this.setOpened(this.preferredOpened, true);
+	}
+	setOpened(opened, emit) {
+		if (this.opened === opened) return;
+		this.opened = opened;
+		if (this.mode === "side") this.preferredOpened = opened;
+		if (emit) this.dispatchEvent(new CustomEvent("opened-change", {
+			bubbles: true,
+			composed: true,
+			detail: { opened }
+		}));
+	}
+	/** Click delegation for `[side-nav-toggle]` elements anywhere in the light DOM (drawer or content). */
+	handleToggleClick(event) {
+		const path = event.composedPath();
+		const triggerIndex = path.findIndex((node) => node instanceof Element && node.hasAttribute("side-nav-toggle"));
+		if (triggerIndex === -1 || path[triggerIndex] === this) return;
+		if (path.slice(triggerIndex + 1).find((node) => node instanceof Element && node.localName === this.localName) !== this) return;
+		this.toggle();
+	}
+	lockScroll(lock) {
+		if (lock === this.scrollLocked) return;
+		if (lock && (isServer || getComputedStyle(this.drawer).position !== "fixed")) return;
+		this.scrollLocked = lock;
+		smartFixedPosition(lock);
+	}
+	syncOverlayState() {
+		const overlayOpen = this.opened && this.mode === "over";
+		window.removeEventListener("keydown", this.handleKeydown);
+		if (overlayOpen) {
+			window.addEventListener("keydown", this.handleKeydown);
+			this.lockScroll(true);
+			this.previouslyFocused = document.activeElement;
+			this.focusDrawer();
+		} else {
+			this.lockScroll(false);
+			const focused = document.activeElement;
+			if (focused && this.previouslyFocused instanceof HTMLElement && (focused === this || this.contains(focused))) this.previouslyFocused.focus();
+			this.previouslyFocused = null;
+		}
+	}
+	focusDrawer() {
+		const slot = this.renderRoot.querySelector("slot[name=\"side-nav-content\"]");
+		for (const element of slot?.assignedElements({ flatten: true }) ?? []) {
+			const target = element.matches(FOCUSABLE) ? element : element.querySelector(FOCUSABLE);
+			if (target instanceof HTMLElement) {
+				target.focus();
+				return;
+			}
+		}
+		this.drawer.focus();
+	}
+	/** In side mode a collapsed drawer with a non-zero closed width is a rail and must stay interactive. */
+	get drawerInert() {
+		if (this.opened) return false;
+		if (this.mode === "over") return true;
+		if (isServer) return true;
+		return (parseFloat(getComputedStyle(this).getPropertyValue("--c2-side-nav__close--width")) || 0) === 0;
+	}
+	updated(changed) {
+		this.drawer.toggleAttribute("inert", this.drawerInert);
+		this.contentElement.toggleAttribute("inert", this.opened && this.mode === "over");
+		if (changed.has("opened") || changed.has("breakpoint") || changed.has("desktopMode") || changed.has("tabletMode")) {
+			if ((changed.has("opened") ? changed.get("opened") && this.mode === "over" : void 0) !== (this.opened && this.mode === "over") || changed.has("breakpoint")) this.syncOverlayState();
+		}
+	}
+	render() {
+		const over = this.mode === "over";
+		const overlayOpen = over && this.opened;
+		return html`
+      <div class="c2-side-nav ${classMap({
+			over,
+			ready: this.ready,
+			end: this.position === "end"
+		})}" @click=${this.handleToggleClick}>
+        ${overlayOpen ? html`<div class="backdrop" part="backdrop" @click=${this.handleBackdropClick}></div>` : nothing}
+        <div
+          class="drawer"
+          part="drawer"
+          role=${over ? "dialog" : nothing}
+          aria-modal=${over ? "true" : nothing}
+          aria-hidden=${!this.opened && over ? "true" : nothing}
+          tabindex="-1"
+        >
+          <div class="panel" part="panel">
+            <slot name="side-nav-content"></slot>
+          </div>
+        </div>
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SideNav.prototype, "opened", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "desktop-mode"
+})], SideNav.prototype, "desktopMode", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "tablet-mode"
+})], SideNav.prototype, "tabletMode", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "responsive-tablet"
+})], SideNav.prototype, "responsiveTablet", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], SideNav.prototype, "position", void 0);
+__decorate([state()], SideNav.prototype, "breakpoint", void 0);
+__decorate([state()], SideNav.prototype, "ready", void 0);
+__decorate([query(".drawer")], SideNav.prototype, "drawer", void 0);
+__decorate([query(".content")], SideNav.prototype, "contentElement", void 0);
+SideNav = __decorate([customElement("c2-side-nav")], SideNav);
+//#endregion
+export { SideNav };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@c2n/side-nav",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/side-nav.js",
+  "exports": {
+    ".": {
+      "default": "./dist/side-nav.js",
+      "types": "./types/src/side-nav.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "side-nav",
+    "web component",
+    "lit"
+  ],
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/side-nav.d.ts

@@ -0,0 +1,126 @@
+import { LitElement, type PropertyValues } from 'lit';
+export type DisplayMode = 'over' | 'side';
+export type SideNavPosition = 'start' | 'end';
+export type SideNavBreakpoint = 'phone' | 'tablet' | 'desktop';
+export interface OpenedChangeEventDetail {
+    opened: boolean;
+}
+/**
+ * A layout shell with a navigation drawer beside the page content. The drawer goes in the `side-nav-content` slot, the
+ * page in the default slot, and the host stretches both to its own height. In `side` mode the drawer collapses in the
+ * flow and pushes the content; in `over` mode it slides over the content with a backdrop, locks page scrolling, traps
+ * focus as a dialog and closes on Escape or a backdrop click. Phones always use `over`; `tablet-mode` and
+ * `desktop-mode` pick the mode for the two larger breakpoints (600px and 960px), and the drawer remembers whether it
+ * was open when the viewport crosses them.
+ *
+ * Any element inside the side nav (drawer or content) carrying a `side-nav-toggle` attribute toggles the nearest enclosing side nav when
+ * clicked, so a menu button in the page or a collapse button in the drawer header needs no script. With a non-zero
+ * `--c2-side-nav__close--width` the collapsed drawer becomes an icon rail; the reflected `opened` attribute lets your
+ * CSS hide the labels in that state (`c2-side-nav:not([opened]) .label { display: none }`).
+ *
+ * @tag c2-side-nav
+ *
+ * @slot side-nav-content - The drawer content: a `c2-list` of links, a logo, anything.
+ * @slot default - The page content beside the drawer.
+ *
+ * @event {CustomEvent<OpenedChangeEventDetail>} opened-change - Fired when the user or a breakpoint change opens or closes the drawer (not when `opened` is set from code). `detail.opened` is the new state.
+ *
+ * @cssproperty {pixel} [--c2-side-nav__open--width=240px]
+ * @cssproperty {pixel} [--c2-side-nav__close--width=0px] - Width of the collapsed drawer; a non-zero value gives a rail.
+ * @cssproperty {time} [--c2-side-nav--transition-duration=250ms]
+ *
+ * @cssproperty {color} [--c2-side-nav--background-color=#fafafa]
+ * @cssproperty {color} --c2-side-nav--color
+ *
+ * @cssproperty {border-radius} --c2-side-nav--border-top-left-radius
+ * @cssproperty {border-radius} --c2-side-nav--border-top-right-radius
+ * @cssproperty {border-radius} --c2-side-nav--border-bottom-left-radius
+ * @cssproperty {border-radius} --c2-side-nav--border-bottom-right-radius
+ *
+ * @cssproperty {padding} [--c2-side-nav--padding-top=16px]
+ * @cssproperty {padding} [--c2-side-nav--padding-right=16px]
+ * @cssproperty {padding} [--c2-side-nav--padding-bottom=16px]
+ * @cssproperty {padding} [--c2-side-nav--padding-left=16px]
+ *
+ * @cssproperty {border} --c2-side-nav--border-top
+ * @cssproperty {border} --c2-side-nav--border-right
+ * @cssproperty {border} --c2-side-nav--border-bottom
+ * @cssproperty {border} --c2-side-nav--border-left
+ *
+ * @cssproperty {pixel} [--c2-side-nav__divider--width=1px] - Line between the drawer and the content, on whichever side the drawer is.
+ * @cssproperty {color} [--c2-side-nav__divider--color=#e4e4e7]
+ *
+ * @cssproperty {color} [--c2-side-nav__scrollbar--color=rgba(0, 0, 0, 0.2)]
+ *
+ * @cssproperty {position} [--c2-side-nav__over--position=fixed] - `absolute` keeps the overlay inside a positioned parent.
+ * @cssproperty {pixel} [--c2-side-nav__over--top=0px]
+ * @cssproperty {pixel} [--c2-side-nav__over--height=100dvh]
+ * @cssproperty {pixel} --c2-side-nav__over--width - Defaults to the open width.
+ * @cssproperty {color} --c2-side-nav__over--background-color - Defaults to the drawer background.
+ * @cssproperty {box-shadow} [--c2-side-nav__over--box-shadow=0 12px 40px rgba(0, 0, 0, 0.18)]
+ * @cssproperty {border-radius} --c2-side-nav__over--border-top-left-radius
+ * @cssproperty {border-radius} --c2-side-nav__over--border-top-right-radius
+ * @cssproperty {border-radius} --c2-side-nav__over--border-bottom-left-radius
+ * @cssproperty {border-radius} --c2-side-nav__over--border-bottom-right-radius
+ * @cssproperty {padding} --c2-side-nav__over--padding-top
+ * @cssproperty {padding} --c2-side-nav__over--padding-right
+ * @cssproperty {padding} --c2-side-nav__over--padding-bottom
+ * @cssproperty {padding} --c2-side-nav__over--padding-left
+ *
+ * @cssproperty {color} [--c2-side-nav__backdrop--background-color=rgba(0, 0, 0, 0.32)]
+ * @cssproperty {filter} [--c2-side-nav__backdrop--backdrop-filter=none]
+ * @cssproperty {number} [--c2-side-nav__backdrop--z-index=1000]
+ */
+export declare class SideNav extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Whether the drawer is open. On phones (and on tablets unless `tablet-mode` is set explicitly) the initial value is ignored and the drawer starts closed. */
+    opened: boolean;
+    /** How the drawer behaves at 960px and up: `side` pushes the content, `over` slides above it. */
+    desktopMode: DisplayMode;
+    /** How the drawer behaves between 600px and 959px. */
+    tabletMode: DisplayMode;
+    /** Also collapse the drawer on tablets in `side` mode when the viewport shrinks to that size. */
+    responsiveTablet: boolean;
+    /** Which edge the drawer is on: `start` (left in LTR) or `end`. */
+    position: SideNavPosition;
+    private breakpoint;
+    private ready;
+    private drawer;
+    private contentElement;
+    /** The state the user wants in `side` mode, restored when the viewport grows back. */
+    private preferredOpened;
+    private previouslyFocused;
+    private scrollLocked;
+    private breakpointsController;
+    /** The mode in effect for the current viewport: `over` on phones, otherwise `tablet-mode` / `desktop-mode`. */
+    get mode(): DisplayMode;
+    /** Opens or closes the drawer as a user action would (fires `opened-change`). */
+    toggle(opened?: boolean): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private collapsesAt;
+    /**
+     * On load the `opened` attribute is meant for the layout the author designed for: it is ignored on phones and for the
+     * implicit tablet overlay, but honoured when an overlay mode was chosen explicitly (`desktop-mode="over"`).
+     */
+    private closesOnLoadAt;
+    private handleBreakpoint;
+    private setOpened;
+    private handleBackdropClick;
+    private handleKeydown;
+    /** Click delegation for `[side-nav-toggle]` elements anywhere in the light DOM (drawer or content). */
+    private handleToggleClick;
+    private lockScroll;
+    private syncOverlayState;
+    private focusDrawer;
+    /** In side mode a collapsed drawer with a non-zero closed width is a rail and must stay interactive. */
+    private get drawerInert();
+    protected updated(changed: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-side-nav': SideNav;
+    }
+}
+//# sourceMappingURL=side-nav.d.ts.map

package/types/src/side-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../src/side-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAQ/E,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA;AACzC,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,CAAA;AAC7C,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;AAE9D,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,OAAO,CAAA;CAChB;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAoB;IAE1C,+JAA+J;IACnH,MAAM,UAAQ;IAE1D,iGAAiG;IAC3B,WAAW,EAAE,WAAW,CAAS;IAEvG,sDAAsD;IACe,UAAU,EAAE,WAAW,CAAS;IAErG,iGAAiG;IACrB,gBAAgB,UAAQ;IAEpG,mEAAmE;IACxB,QAAQ,EAAE,eAAe,CAAU;IAErE,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,KAAK,CAAQ;IAEZ,OAAO,CAAC,MAAM,CAAc;IAC3B,OAAO,CAAC,cAAc,CAAc;IAEvD,sFAAsF;IACtF,OAAO,CAAC,eAAe,CAAQ;IAC/B,OAAO,CAAC,iBAAiB,CAAuB;IAChD,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,qBAAqB,CAAqG;IAElI,+GAA+G;IAC/G,IAAI,IAAI,IAAI,WAAW,CAItB;IAED,iFAAiF;IACjF,MAAM,CAAC,MAAM,UAAe;IAInB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,WAAW;IAMnB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,gBAAgB;IAqBxB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,mBAAmB,CAE1B;IAED,OAAO,CAAC,aAAa,CAKpB;IAED,uGAAuG;IACvG,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,WAAW;IAYnB,wGAAwG;IACxG,OAAO,KAAK,WAAW,GAMtB;cAEkB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAYhD,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,OAAO,CAAA;KACvB;CACF"}