jsl-ui 9.29.0 → 10.0.0

package/lib/components/navigation/NavigationComponent.js

@@ -1,47 +1,275 @@
 import "./NavigationStyle.scss";
+import { helper } from "../../core/helper";
+/** Responsive navigation using native links and disclosure buttons. */
 export class NavigationComponent {
     constructor(options) {
-        this.options = { position: "fixed", id: "luxbar-checkbox", alignment: "left", ...options };
-    }
-    isEqual(node) {
-        return this.__proto__ === node.__proto__;
+        this.State = { id: helper.newDomGuid(), mobileOpen: false, openPath: "" };
+        this.options = { position: "fixed", alignment: "left", ...options };
     }
+    isEqual(node) { return Object.getPrototypeOf(this) === Object.getPrototypeOf(node); }
+    onInit(renderer) { this.State.renderer = renderer; }
     render() {
-        var _a, _b;
+        var _a, _b, _c, _d;
+        this.State.owner = this;
+        const id = (_a = this.options.id) !== null && _a !== void 0 ? _a : this.State.id;
+        const active = this.activePath();
         return {
-            tag: "header",
-            attr: { style: this.options.style, class: "nav-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") },
-            children: [
-                { tag: "div", attr: { class: "luxbar luxbar-" + this.options.position },
-                    children: [
-                        { tag: "input", attr: { type: "checkbox", class: "luxbar-checkbox", id: this.options.id } },
-                        { tag: "div", attr: { class: "luxbar-menu luxbar-menu-" + this.options.alignment + " luxbar-menu-light" },
-                            children: [{ tag: "ul", attr: { class: "luxbar-navigation" }, children: [
-                                        { tag: "li", attr: { class: "luxbar-header" }, children: [
-                                                { tag: "a", attr: { href: (_b = this.options.titleLink) !== null && _b !== void 0 ? _b : "#", class: "luxbar-brand" }, children: [this.toNode(this.options.title)] },
-                                                { tag: "label", attr: { class: "luxbar-hamburger luxbar-hamburger-spin", for: this.options.id },
-                                                    children: [{ tag: "span" }] },
-                                            ] },
-                                        ...this.options.data.map((x) => this.itemToNode(x))
-                                    ] }] }
-                    ] }
-            ]
+            tag: "header", attr: {
+                class: "nav-comp jsl-navigation jsl-navigation--" + this.options.position + " " + ((_b = this.options.class) !== null && _b !== void 0 ? _b : ""),
+                style: this.options.style, id: this.options.id,
+                keydown: (event) => { this.keydown(event); return false; }
+            }, children: [{ tag: "nav", attr: {
+                        class: "jsl-nav-bar jsl-nav-bar--" + this.options.alignment + (this.State.mobileOpen ? " is-open" : ""),
+                        "aria-label": (_c = this.options.ariaLabel) !== null && _c !== void 0 ? _c : "Main navigation"
+                    }, children: [
+                        { tag: this.options.titleLink ? "a" : "span", attr: {
+                                class: "jsl-nav-brand", href: this.options.titleLink,
+                                click: () => { this.close(); return false; }
+                            }, children: [this.node(this.options.title)] },
+                        { tag: "button", attr: {
+                                id: id + "-toggle", type: "button", class: "jsl-nav-toggle",
+                                "aria-label": (_d = this.options.menuButtonLabel) !== null && _d !== void 0 ? _d : "Navigation menu",
+                                "aria-expanded": String(this.State.mobileOpen), "aria-controls": id + "-items",
+                                click: () => {
+                                    this.State.mobileOpen = !this.State.mobileOpen;
+                                    this.State.openPath = "";
+                                    this.refresh();
+                                    return false;
+                                }
+                            }, children: [{ tag: "span", attr: { class: "jsl-nav-menu-icon", "aria-hidden": "true" } }] },
+                        { tag: "ul", attr: { id: id + "-items", class: "jsl-nav-items" },
+                            children: this.options.data.map((item, index) => this.item(item, String(index), id, active)) }
+                    ] }]
         };
     }
-    itemToNode(x) {
-        var _a, _b, _c;
-        return { tag: "li", attr: { class: "luxbar-item" + (((_a = x.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? " dropdown" : "") + (this.isActive(x.link) ? " active" : "") }, children: [
-                { tag: "a", attr: { href: (_b = x.link) !== null && _b !== void 0 ? _b : "#", target: x.target, click: x.click }, children: [this.toNode(x.content)] },
-                (((_c = x.children) === null || _c === void 0 ? void 0 : _c.length) > 0 ? { tag: "ul", children: x.children.map((c) => this.itemToNode(c)) } : undefined)
+    onCreate(node) {
+        const state = this.State;
+        state.dom = node.dom;
+        const outside = (event) => {
+            var _a, _b;
+            if (!((_a = state.dom) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                (_b = state.owner) === null || _b === void 0 ? void 0 : _b.close(true);
+            }
+        };
+        const focusout = (event) => {
+            var _a, _b;
+            if (event.relatedTarget && !((_a = state.dom) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))) {
+                (_b = state.owner) === null || _b === void 0 ? void 0 : _b.close();
+            }
+        };
+        const route = () => { var _a, _b; (_a = state.owner) === null || _a === void 0 ? void 0 : _a.close(true); (_b = state.owner) === null || _b === void 0 ? void 0 : _b.refresh(); };
+        let compact = this.isCompact();
+        const resize = () => {
+            var _a, _b;
+            const next = (_a = state.owner) === null || _a === void 0 ? void 0 : _a.isCompact();
+            if (next !== compact) {
+                compact = next;
+                const focused = document.activeElement;
+                (_b = state.owner) === null || _b === void 0 ? void 0 : _b.close();
+                requestAnimationFrame(() => {
+                    var _a, _b;
+                    if (((_a = state.dom) === null || _a === void 0 ? void 0 : _a.contains(focused)) && !focused.getClientRects().length) {
+                        (_b = state.dom.querySelector(next ? ".jsl-nav-toggle" : ".jsl-nav-link:not(:disabled):not([aria-disabled=true])")) === null || _b === void 0 ? void 0 : _b.focus();
+                    }
+                });
+            }
+        };
+        const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(resize);
+        observer === null || observer === void 0 ? void 0 : observer.observe(state.dom);
+        document.addEventListener("pointerdown", outside);
+        state.dom.addEventListener("focusout", focusout);
+        window.addEventListener("hashchange", route);
+        window.addEventListener("popstate", route);
+        window.addEventListener("resize", resize);
+        state.cleanup = () => {
+            var _a;
+            document.removeEventListener("pointerdown", outside);
+            (_a = state.dom) === null || _a === void 0 ? void 0 : _a.removeEventListener("focusout", focusout);
+            window.removeEventListener("hashchange", route);
+            window.removeEventListener("popstate", route);
+            window.removeEventListener("resize", resize);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }
+    onRemove() {
+        var _a, _b;
+        (_b = (_a = this.State).cleanup) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.State.dom = undefined;
+        this.State.renderer = undefined;
+        this.State.owner = undefined;
+    }
+    item(item, path, id, active) {
+        var _a, _b;
+        const hasChildren = !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length);
+        const open = this.State.openPath === path || this.State.openPath.startsWith(path + "-");
+        const disabled = item.enabled === false;
+        const disclosureOnly = hasChildren && !item.link && !item.click;
+        const disclosure = () => {
+            this.State.openPath = open ? path.includes("-") ? path.slice(0, path.lastIndexOf("-")) : "" : path;
+            this.refresh();
+        };
+        const submenuAttrs = {
+            "aria-expanded": String(open), "aria-controls": id + "-list-" + path,
+            "data-nav-disclosure": path
+        };
+        return { tag: "li", attr: {
+                class: "jsl-nav-item" + (active === path || active.startsWith(path + "-") ? " is-active" : ""),
+                "data-nav-path": path
+            }, children: [
+                { tag: "div", attr: { class: "jsl-nav-row" }, children: [
+                        { tag: item.link ? "a" : "button", attr: {
+                                class: "jsl-nav-link", type: item.link ? undefined : "button",
+                                href: disabled ? undefined : item.link, target: item.target,
+                                rel: item.target === "_blank" ? "noopener noreferrer" : undefined,
+                                disabled: disabled && !item.link ? "disabled" : undefined,
+                                "aria-disabled": disabled ? "true" : undefined,
+                                tabindex: disabled ? "-1" : undefined,
+                                "aria-current": !disabled && active === path && !disclosureOnly ? "page" : undefined,
+                                ...(disclosureOnly ? submenuAttrs : {}),
+                                click: (event) => {
+                                    var _a;
+                                    if (disabled) {
+                                        event.preventDefault();
+                                        return false;
+                                    }
+                                    if (disclosureOnly) {
+                                        disclosure();
+                                    }
+                                    else {
+                                        try {
+                                            (_a = item.click) === null || _a === void 0 ? void 0 : _a.call(item, event);
+                                        }
+                                        finally {
+                                            this.close(true);
+                                            this.refresh();
+                                        }
+                                    }
+                                    return false;
+                                }
+                            }, children: [this.node(item.content), ...(disclosureOnly ? [this.chevron()] : [])] },
+                        ...(hasChildren && !disclosureOnly ? [{ tag: "button", attr: {
+                                    type: "button", class: "jsl-nav-submenu-toggle", ...submenuAttrs,
+                                    disabled: disabled ? "disabled" : undefined,
+                                    "aria-label": (_b = item.submenuLabel) !== null && _b !== void 0 ? _b : (typeof item.content === "string" ? item.content + " submenu" : "Open submenu"),
+                                    click: () => { if (!disabled) {
+                                        disclosure();
+                                    } return false; }
+                                }, children: [this.chevron()] }] : [])
+                    ] },
+                ...(hasChildren ? [{ tag: "ul", attr: {
+                            id: id + "-list-" + path, class: "jsl-nav-submenu", hidden: open ? undefined : "hidden"
+                        }, children: item.children.map((child, index) => this.item(child, path + "-" + index, id, active)) }] : [])
             ] };
     }
-    isActive(link) {
-        return location.hash.startsWith(link);
+    keydown(event) {
+        var _a, _b, _c, _d, _e;
+        const target = event.target;
+        const control = target.closest("[data-nav-disclosure]");
+        const list = target.closest(".jsl-nav-submenu");
+        if (event.key === "Escape") {
+            if (this.State.openPath) {
+                const path = (_a = list === null || list === void 0 ? void 0 : list.parentElement.dataset.navPath) !== null && _a !== void 0 ? _a : this.State.openPath;
+                (_b = this.disclosure(path)) === null || _b === void 0 ? void 0 : _b.focus();
+                this.State.openPath = path.includes("-") ? path.slice(0, path.lastIndexOf("-")) : "";
+                this.refresh();
+            }
+            else if (this.State.mobileOpen) {
+                this.close(true);
+            }
+            else {
+                return;
+            }
+        }
+        else if (control && !control.hasAttribute("disabled") && ["ArrowDown", "ArrowUp", "ArrowRight"].indexOf(event.key) >= 0) {
+            this.State.openPath = control.dataset.navDisclosure;
+            this.refresh();
+            const submenu = (_c = control.closest("li")) === null || _c === void 0 ? void 0 : _c.querySelector(".jsl-nav-submenu");
+            requestAnimationFrame(() => {
+                var _a;
+                const controls = this.rowControls(submenu);
+                (_a = controls[event.key === "ArrowUp" ? controls.length - 1 : 0]) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        else if (list && ["ArrowDown", "ArrowUp", "Home", "End"].indexOf(event.key) >= 0) {
+            const controls = this.rowControls(list);
+            const index = controls.indexOf(target.closest("a,button"));
+            const next = event.key === "Home" ? 0 : event.key === "End" ? controls.length - 1 :
+                (index + (event.key === "ArrowDown" ? 1 : -1) + controls.length) % controls.length;
+            (_d = controls[next]) === null || _d === void 0 ? void 0 : _d.focus();
+        }
+        else if (list && event.key === "ArrowLeft") {
+            const path = list.parentElement.dataset.navPath;
+            (_e = this.disclosure(path)) === null || _e === void 0 ? void 0 : _e.focus();
+            this.State.openPath = path.includes("-") ? path.slice(0, path.lastIndexOf("-")) : "";
+            this.refresh();
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
     }
-    toNode(content) {
-        if (typeof content === "string") {
-            return { tag: "span", content };
+    rowControls(list) {
+        if (!list) {
+            return [];
         }
-        return content;
+        return Array.from(list.querySelectorAll(":scope > li > .jsl-nav-row > a,:scope > li > .jsl-nav-row > button"))
+            .filter(element => !element.hasAttribute("disabled") && element.getAttribute("aria-disabled") !== "true");
+    }
+    disclosure(path) { var _a; return (_a = this.State.dom) === null || _a === void 0 ? void 0 : _a.querySelector('[data-nav-disclosure="' + path + '"]'); }
+    isCompact() {
+        var _a;
+        const toggle = (_a = this.State.dom) === null || _a === void 0 ? void 0 : _a.querySelector(".jsl-nav-toggle");
+        return !!toggle && getComputedStyle(toggle).display !== "none";
+    }
+    close(restoreFocus = false) {
+        var _a, _b, _c, _d;
+        if (!this.State.mobileOpen && !this.State.openPath) {
+            return;
+        }
+        if (restoreFocus && ((_a = this.State.dom) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))) {
+            if (this.isCompact() && this.State.mobileOpen) {
+                (_b = this.State.dom.querySelector(".jsl-nav-toggle")) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            else if ((_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.closest(".jsl-nav-submenu")) {
+                (_d = this.disclosure(this.State.openPath.split("-")[0])) === null || _d === void 0 ? void 0 : _d.focus();
+            }
+        }
+        this.State.mobileOpen = false;
+        this.State.openPath = "";
+        this.refresh();
+    }
+    activePath() {
+        let best = "", score = -1;
+        const visit = (items, prefix = "") => items.forEach((item, index) => {
+            var _a, _b, _c, _d;
+            const path = prefix + index;
+            if (item.enabled === false) {
+                return;
+            }
+            const current = (_a = this.options.activeLink) !== null && _a !== void 0 ? _a : location.href;
+            let matches = false;
+            if (item.link) {
+                try {
+                    const url = new URL(item.link, location.href), actual = new URL(current, location.href);
+                    matches = url.origin === actual.origin && url.pathname === actual.pathname && url.search === actual.search &&
+                        (url.hash ? actual.hash === url.hash || actual.hash.startsWith(url.hash + "/") : !actual.hash);
+                }
+                catch ( /* Invalid URLs are rendered but never selected. */_e) { /* Invalid URLs are rendered but never selected. */ }
+            }
+            const weight = item.active ? Number.MAX_SAFE_INTEGER : (_c = (_b = item.link) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+            if (((_d = item.active) !== null && _d !== void 0 ? _d : matches) && weight > score) {
+                best = path;
+                score = weight;
+            }
+            if (item.children) {
+                visit(item.children, path + "-");
+            }
+        });
+        visit(this.options.data);
+        return best;
     }
+    refresh() { var _a; (_a = this.State.renderer) === null || _a === void 0 ? void 0 : _a.refresh(); }
+    node(content) { return typeof content === "string" ? { tag: "span", content } : content; }
+    chevron() { return { tag: "span", attr: { class: "jsl-nav-chevron", "aria-hidden": "true" } }; }
 }

package/lib/components/navigation/NavigationStyle.scss

@@ -1,226 +1,62 @@
-.nav-comp {
-
-  line-height: 1.9rem;
-
-  .dropdown ul {
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px;
-  }
-
-.luxbar-default {
-    width: 100%;
-    position: relative;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    z-index: 1010; }
-  
-  .luxbar-static {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1010; }
-    .luxbar-static .luxbar-checkbox:checked ~ .luxbar-menu {
-      position: absolute; }
-  
-  .luxbar-fixed {
-    width: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1010;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
-  
-  .luxbar-fixed-bottom {
-    width: 100%;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    z-index: 1010;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
-  
-  .luxbar-hamburger span, .luxbar-hamburger span::before, .luxbar-hamburger span::after {
-    display: block;
-    height: 2px;
-    width: 26px;
-    transition: 0.6s ease; }
-  
-  .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span {
-    background-color: transparent; }
-    .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::before, .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::after {
-      margin-top: 0; }
-  
-  .luxbar-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    height: 58px; }
-  
-  .luxbar-menu-left .luxbar-navigation,
-  .luxbar-menu-left .luxbar-header {
-    justify-content: flex-start; }
-  
-  .luxbar-menu-right .luxbar-hamburger {
-    margin-left: auto; }
-  
-  .luxbar-brand {
-    font-size: 1.6em;
-    padding: 18px 24px 18px 24px; }
-  
-  .luxbar-menu {
-    min-height: 58px;
-    transition: 0.6s ease;
-    width: 100%; }
-  
-  .luxbar-navigation {
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    padding-left: 0;
-    margin: 0; }
-  
-  .luxbar-menu a,
-  .luxbar-item a {
-    text-decoration: none;
-    color: inherit;
-    cursor: pointer; }
-  
-  .luxbar-item {
-    height: 58px; }
-    .luxbar-item a {
-      padding: 18px 24px 18px 24px;
-      display: block; }
-  
-  .luxbar-hamburger {
-    padding: 18px 24px 18px 24px;
-    position: absolute;
-    right: 0;
-    cursor: pointer; }
-    .luxbar-hamburger span::before, .luxbar-hamburger span::after {
-      content: '';
-      position: absolute; }
-    .luxbar-hamburger span::before {
-      margin-top: -8px; }
-    .luxbar-hamburger span::after {
-      margin-top: 8px; }
-  
-  .luxbar-checkbox {
-    display: none; }
-    .luxbar-checkbox:not(:checked) ~ .luxbar-menu {
-      overflow: hidden;
-      height: 58px; }
-    .luxbar-checkbox:checked ~ .luxbar-menu {
-      transition: height 0.6s ease;
-      height: 100vh;
-      overflow: auto; }
-  
-  .dropdown {
-    position: relative;
-    height: auto;
-    min-height: 58px;
-  }
-
-    .dropdown:hover > ul {
-      position: relative;
-      display: block;
-      min-width: 100%; }
-    .dropdown > a::after {
-      position: absolute;
-      content: '';
-      right: 10px;
-      top: 25px;
-      border-width: 5px 5px 0;
-      border-color: transparent;
-      border-style: solid; }
-    .dropdown > ul {
-      display: block;
-      overflow-x: hidden;
-      list-style: none;
-      padding: 0; }
-      .dropdown > ul .luxbar-item {
-        min-width: 100%;
-        height: 29px;
-        padding: 5px 10px 5px 40px; }
-        .dropdown > ul .luxbar-item a {
-          min-height: 29px;
-          line-height: 29px;
-          padding: 0; }
-  
-  @media screen and (min-width: 768px) {
-    .luxbar-navigation {
-      flex-flow: row;
-      justify-content: flex-end; }
-  
-    .luxbar-hamburger {
-      display: none; }
-  
-    .luxbar-checkbox:not(:checked) ~ .luxbar-menu {
-      overflow: visible; }
-    .luxbar-checkbox:checked ~ .luxbar-menu {
-      height: 58px; }
-  
-    .luxbar-menu .luxbar-item {
-      border-top: 0; }
-  
-    .luxbar-menu-right .luxbar-header {
-      margin-right: auto; }
-  
-    .dropdown {
-      height: 58px; }
-      .dropdown:hover > ul {
-        position: absolute;
-        left: 0;
-        top: 58px;
-        padding: 0; }
-      .dropdown > ul {
-        display: none; }
-        .dropdown > ul .luxbar-item {
-          padding: 5px 10px; }
-          .dropdown > ul .luxbar-item a {
-            white-space: nowrap; } }
-  .luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-doublespin span::before {
-    transform: rotate(225deg); }
-  .luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-doublespin span::after {
-    transform: rotate(-225deg); }
-  .luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-spin span::before {
-    transform: rotate(45deg); }
-  .luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-spin span::after {
-    transform: rotate(-45deg); }
-  
-  .luxbar-menu-dark,
-  .luxbar-menu-dark .dropdown ul {
-    background-color: #212121;
-    color: #fff; }
-  
-  .luxbar-menu-dark .active,
-  .luxbar-menu-dark .luxbar-item:hover {
-    background-color: #424242; }
-  .luxbar-menu-dark .luxbar-hamburger span,
-  .luxbar-menu-dark .luxbar-hamburger span::before,
-  .luxbar-menu-dark .luxbar-hamburger span::after {
-    background-color: #fff; }
-  
-  .luxbar-menu-light {
-    background-color: #e0e0e0;
-    color: #212121;
-  }
-
-  .luxbar-menu-light .dropdown ul {
-    background-color: #ffffff;
-    color: #212121;
-    // border: 1px solid #e0e0e0;
-    box-shadow: 0px 4px 3px 0px rgba(0,0,0,0.36);
-    li:not(:last-child) {
-      border-bottom: 1px solid #e0e0e0;
-    }
-  }
-  
-  .luxbar-menu-light .active,
-  .luxbar-menu-light .luxbar-item:hover {
-    background-color: #bdbdbd; }
-  .luxbar-menu-light .luxbar-hamburger span,
-  .luxbar-menu-light .luxbar-hamburger span::before,
-  .luxbar-menu-light .luxbar-hamburger span::after {
-    background-color: #212121; }
-  }
+@import "../../ui/theme.css";
+
+.jsl-navigation {
+    position: relative; width: 100%; color: var(--jsl-color-text); background: var(--jsl-color-surface);
+    border-block: 1px solid var(--jsl-color-border-subtle); box-sizing: border-box; font: inherit; font-size: .875rem; line-height: 1.4;
+    *, *::before, *::after { box-sizing: border-box; }
+    &--fixed, &--fixed-bottom { position: fixed; inset-inline: 0; z-index: 1010; box-shadow: 0 2px 8px #0000000a; }
+    &--fixed { top: 0; }
+    &--fixed-bottom { bottom: 0; }
+    [hidden] { display: none !important; }
+    button, a { -webkit-tap-highlight-color: transparent; }
+    button { font: inherit; }
+    button:focus-visible, a:focus-visible { outline: 2px solid var(--jsl-color-focus); outline-offset: 2px; z-index: 1; }
+}
+.jsl-nav-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: .625rem 1rem; min-height: 3.5rem; container-type: inline-size; }
+.jsl-nav-brand { display: flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; font-weight: 650; font-size: 1rem; min-width: 0; overflow-wrap: anywhere; }
+.jsl-nav-items, .jsl-nav-submenu { list-style: none; padding: 0; margin: 0; }
+.jsl-nav-items { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; min-width: 0; }
+.jsl-nav-bar--right > .jsl-nav-items { margin-inline-start: auto; }
+.jsl-nav-item { position: relative; min-width: 0; }
+.jsl-nav-row { display: flex; align-items: stretch; border-radius: .375rem; }
+.jsl-nav-link, .jsl-nav-submenu-toggle, .jsl-nav-toggle {
+    border: 0; background: transparent; color: var(--jsl-color-text-secondary); cursor: pointer; text-decoration: none;
+    display: inline-flex; align-items: center; justify-content: center; gap: .625rem; padding: .5rem .75rem;
+    border-radius: .375rem; min-height: 2.25rem; line-height: 1.4;
+}
+.jsl-nav-link { flex: 1; justify-content: flex-start; text-align: start; min-width: 0; overflow-wrap: anywhere; }
+.jsl-nav-link > img, .jsl-nav-brand img { max-height: 1.5rem; width: auto; }
+.jsl-nav-submenu-toggle { padding-inline: .5rem; }
+.jsl-nav-link:hover, .jsl-nav-submenu-toggle:hover, .jsl-nav-toggle:hover { background: var(--jsl-color-surface-hover); color: var(--jsl-color-text); }
+.jsl-nav-item.is-active > .jsl-nav-row { background: var(--jsl-color-surface-selected); }
+.jsl-nav-item.is-active > .jsl-nav-row > .jsl-nav-link { color: var(--jsl-color-text); font-weight: 600; }
+.jsl-navigation :disabled, .jsl-navigation [aria-disabled=true] { color: var(--jsl-color-disabled-text); cursor: default; opacity: .6; background: transparent; }
+.jsl-nav-chevron { width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.1rem) rotate(45deg); flex-shrink: 0; margin: .125rem; }
+[aria-expanded=true] > .jsl-nav-chevron { transform: translateY(.1rem) rotate(225deg); }
+.jsl-nav-submenu {
+    position: absolute; top: calc(100% + .375rem); inset-inline-end: 0; z-index: 1020; min-width: 12rem; width: max-content;
+    max-width: min(22rem, calc(100vw - 2rem)); padding: .375rem; background: var(--jsl-color-surface);
+    border: 1px solid var(--jsl-color-border-subtle); border-radius: .625rem; box-shadow: 0 8px 24px #0000001a;
+    max-height: min(28rem, 65dvh); overflow: auto;
+}
+// Nested disclosures remain inside the popup to avoid off-screen flyouts.
+.jsl-nav-submenu .jsl-nav-submenu { position: static; width: auto; min-width: 0; max-height: none; border: 0; border-inline-start: 1px solid var(--jsl-color-border); border-radius: 0; box-shadow: none; margin: .25rem .5rem .375rem .75rem; padding: 0 0 0 .5rem; }
+.jsl-navigation--fixed-bottom > .jsl-nav-bar > .jsl-nav-items > li > .jsl-nav-submenu { top: auto; bottom: calc(100% + .375rem); }
+.jsl-nav-toggle { display: none; margin-inline-start: auto; width: 2.25rem; padding: .5rem; }
+.jsl-nav-menu-icon, .jsl-nav-menu-icon::before, .jsl-nav-menu-icon::after { width: 1rem; height: 1.5px; background: currentColor; position: relative; display: block; }
+.jsl-nav-menu-icon::before, .jsl-nav-menu-icon::after { content: ""; position: absolute; left: 0; top: -.3125rem; }
+.jsl-nav-menu-icon::after { top: .3125rem; }
+.is-open > .jsl-nav-toggle .jsl-nav-menu-icon { background: transparent; }
+.is-open > .jsl-nav-toggle .jsl-nav-menu-icon::before { top: 0; transform: rotate(45deg); }
+.is-open > .jsl-nav-toggle .jsl-nav-menu-icon::after { top: 0; transform: rotate(-45deg); }
+
+@mixin compact-navigation {
+    .jsl-nav-toggle { display: inline-flex; }
+    .jsl-nav-brand { max-width: calc(100% - 4rem); }
+    .jsl-nav-items { display: none; width: 100%; margin-inline-start: 0; padding-top: .5rem; border-top: 1px solid var(--jsl-color-border-subtle); max-height: 65dvh; overflow: auto; }
+    .is-open > .jsl-nav-items { display: block; }
+    .jsl-nav-item + .jsl-nav-item { margin-top: .125rem; }
+    .jsl-nav-items .jsl-nav-submenu { position: static; width: auto; min-width: 0; max-width: none; max-height: none; border: 0; border-inline-start: 1px solid var(--jsl-color-border); border-radius: 0; box-shadow: none; margin: .25rem .5rem .375rem .75rem; padding: 0 0 0 .5rem; }
+}
+@container (max-width: 40rem) { @include compact-navigation; }
+@media (max-width: 767px) { @include compact-navigation; }

package/lib/components/notification/Notification.d.ts

@@ -1,5 +1,5 @@
 import "./Notification.scss";
-import { IJSLVNode, IJSLComponent } from "jsl-render";
+import { IJSLVNode, IJSLComponent, JSLRender } from "jsl-render";
 export interface INotificationOptions {
     content: string | IJSLVNode | IJSLComponent;
     closeOnClick?: boolean;
@@ -7,13 +7,46 @@ export interface INotificationOptions {
     class?: string;
     style?: string;
     onClick?: () => void;
+    title?: string;
+    variant?: "default" | "info" | "success" | "warning" | "error";
+    showCloseButton?: boolean;
+    closeButtonLabel?: string;
+    onClose?: () => void;
+}
+/** The same surface can be rendered inline or hosted by Notification.show(). */
+export declare class NotificationComponent implements IJSLComponent {
+    private options;
+    State: {
+        closed: boolean;
+    };
+    readonly id: string;
+    onInteractionChange?: (paused: boolean) => void;
+    private renderer;
+    private interactions;
+    private dom?;
+    private progressAnimation?;
+    private countdown?;
+    constructor(options: INotificationOptions);
+    onInit(renderer: JSLRender): void;
+    onCreate(node: IJSLVNode): void;
+    onRemove(): void;
+    /** The notification host keeps the visual countdown synchronized with dismissal. */
+    setCountdown(remaining: number, paused: boolean): void;
+    private updateProgress;
+    render(): IJSLVNode;
+    dismiss(): void;
+    private activate;
+    private pause;
 }
 export declare class Notification {
-    static show(options: INotificationOptions): string;
-    static clearNotification(id: string): void;
-    static clearAll(): void;
     private static container;
     private static containerVNode;
     private static renderer;
+    private static entries;
+    static show(options: INotificationOptions): string;
+    static clearNotification(id: string): void;
+    static clearAll(): void;
+    private static schedule;
+    private static remove;
     private static createContainer;
 }