@syware/jlib 0.0.0-stage → 0.1.3

package/dist/organisms/jl-drawer.d.ts

@@ -0,0 +1,50 @@
+import { JlElement } from '../base/jl-element';
+import type { DrawerPlacement, DrawerSize } from '../types/jl-drawer.types';
+export declare const DRAWER_PLACEMENTS: readonly DrawerPlacement[];
+export declare const DRAWER_SIZES: readonly DrawerSize[];
+/**
+ * A panel that slides over the page from an edge, on the browser's own modal `<dialog>`: focus stays inside, Escape
+ * and the backdrop close it. From the bottom it has rounded top corners and a handle, as sheets have on phones.
+ * The content goes in the default slot, header buttons in `slot="actions"`, the buttons at the bottom in
+ * `slot="footer"`.
+ */
+export declare class JlDrawer extends JlElement {
+    static readonly selector = "jl-drawer";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        open: undefined;
+        close: undefined;
+    }>>;
+    readonly heading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly description: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly placement: Readonly<Readonly<{
+        get(): DrawerPlacement;
+        set(setter: ((prevState: DrawerPlacement) => DrawerPlacement) | DrawerPlacement): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): DrawerSize;
+        set(setter: ((prevState: DrawerSize) => DrawerSize) | DrawerSize): void;
+    }>>;
+    readonly open: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Keeps the drawer open on Escape and on a click outside: only its own buttons close it. */
+    readonly persistent: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    show(): void;
+    close(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private renderFooter;
+    private renderOpen;
+}

package/dist/organisms/jl-drawer.js

@@ -0,0 +1,141 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { JlButton } from "../atoms/jl-button.js";
+import jl_drawer_default from "./jl-drawer.css_raw.js";
+import { css } from "@jadis/core";
+import { X } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-drawer.tsx
+registerIcons({ x: X });
+var DRAWER_PLACEMENTS = [
+	"right",
+	"left",
+	"bottom"
+];
+var DRAWER_SIZES = [
+	"md",
+	"sm",
+	"lg"
+];
+/**
+* A panel that slides over the page from an edge, on the browser's own modal `<dialog>`: focus stays inside, Escape
+* and the backdrop close it. From the bottom it has rounded top corners and a handle, as sheets have on phones.
+* The content goes in the default slot, header buttons in `slot="actions"`, the buttons at the bottom in
+* `slot="footer"`.
+*/
+var JlDrawer = class extends JlElement {
+	static selector = "jl-drawer";
+	events = this.useEvents();
+	heading = this.useChange("", (value) => {
+		this._refs.heading.textContent = value;
+	}, { attribute: "heading" });
+	description = this.useChange("", (value) => {
+		this._refs.description.textContent = value;
+		this._refs.description.hidden = value === "";
+	}, { attribute: "description" });
+	placement = this.useChange("right", (value) => this.reflect("placement", value), {
+		attribute: "placement",
+		parse: oneOf(DRAWER_PLACEMENTS, "right")
+	});
+	size = this.useChange("md", (value) => this.reflect("size", value), {
+		attribute: "size",
+		parse: oneOf(DRAWER_SIZES, "md")
+	});
+	open = this.useChange(false, (value) => this.renderOpen(value), { attribute: "open" });
+	/** Keeps the drawer open on Escape and on a click outside: only its own buttons close it. */
+	persistent = this.useChange(false, (value) => {
+		this._refs.close.hidden = value;
+	}, { attribute: "persistent" });
+	_refs = this.useRefs((ref) => ({
+		close: ref(".close"),
+		description: ref(".description"),
+		dialog: ref("dialog"),
+		footer: ref("footer"),
+		footerSlot: ref("slot[name=\"footer\"]"),
+		heading: ref("h2")
+	}));
+	show() {
+		this.open.set(true);
+	}
+	close() {
+		this.open.set(false);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("dialog", {
+			attrs: { part: "base" },
+			"aria-labelledby": "heading",
+			"aria-describedby": "description",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					class: "handle",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsxs("div", {
+					class: "titles",
+					children: [/* @__PURE__ */ jsx("h2", { id: "heading" }), /* @__PURE__ */ jsx("p", {
+						class: "description",
+						id: "description",
+						hidden: true
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					class: "actions",
+					children: [/* @__PURE__ */ jsx("slot", { name: "actions" }), /* @__PURE__ */ jsx(JlButton, {
+						class: "close",
+						variant: "ghost",
+						icon: "x",
+						hint: "Close",
+						size: "sm"
+					})]
+				})] }),
+				/* @__PURE__ */ jsx("div", {
+					class: "body",
+					children: /* @__PURE__ */ jsx("slot", {})
+				}),
+				/* @__PURE__ */ jsx("footer", {
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", { name: "footer" })
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_drawer_default}`;
+	}
+	onConnect() {
+		const dialog = this._refs.dialog;
+		this._refs.close.events.register("press", () => this.close());
+		this.on(dialog, "close", () => {
+			this.reflect("open", false);
+			this.open.set(false);
+			this.events.emit("close");
+		});
+		this.on(dialog, "cancel", (event) => {
+			if (this.persistent.get()) event.preventDefault();
+		});
+		this.on(dialog, "click", (event) => {
+			if (event.target === dialog && !this.persistent.get()) this.close();
+		});
+		this.renderFooter();
+		this.on(this._refs.footerSlot, "slotchange", () => this.renderFooter());
+		this.renderOpen(this.open.get());
+	}
+	renderFooter() {
+		this._refs.footer.hidden = this._refs.footerSlot.assignedElements().length === 0;
+	}
+	renderOpen(open) {
+		const dialog = this._refs.dialog;
+		if (open === dialog.open || !this.isConnected) return;
+		if (open) {
+			dialog.showModal();
+			this.reflect("open", true);
+			this.events.emit("open");
+			return;
+		}
+		this.reflect("open", false);
+		dialog.close();
+	}
+};
+JlDrawer.register();
+export { DRAWER_PLACEMENTS, DRAWER_SIZES, JlDrawer };

package/dist/organisms/jl-navbar.css_raw.js

@@ -0,0 +1,3 @@
+// src/organisms/jl-navbar.css?raw
+var jl_navbar_default = ":host {\n  display: block;\n  container-type: inline-size;\n  --max-width: none;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n\nheader {\n  border-bottom: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n.bar {\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  max-width: var(--max-width);\n  height: 60px;\n  margin: 0 auto;\n  padding: 0 20px;\n}\n\n.brand {\n  display: flex;\n  flex: none;\n  align-items: center;\n  color: var(--jl-text);\n  font-size: var(--jl-font-lg);\n  font-weight: 700;\n  letter-spacing: -0.01em;\n}\n\n/* A logo and a name side by side, whatever element holds them. */\n::slotted([slot=\"brand\"]) {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: inherit;\n  text-decoration: none;\n}\n\nul {\n  display: flex;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.links {\n  flex: 1;\n  min-width: 0;\n}\n\n.links ul {\n  align-items: center;\n  gap: 2px;\n}\n\n.link {\n  display: inline-flex;\n  align-items: center;\n  height: 34px;\n  padding: 0 12px;\n  border-radius: var(--jl-radius-sm);\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  text-decoration: none;\n  white-space: nowrap;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n.link:hover {\n  background: var(--jl-surface-2);\n  color: var(--jl-text);\n}\n\n.link[aria-current=\"page\"] {\n  color: var(--jl-accent);\n}\n\n.actions {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle {\n  display: none;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--jl-control-md);\n  height: var(--jl-control-md);\n  margin-right: -6px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-sm);\n  background: none;\n  color: var(--jl-text);\n  cursor: pointer;\n}\n\n.toggle:hover {\n  background: var(--jl-surface-2);\n}\n\n.drawer {\n  display: none;\n}\n\n/* A narrow bar folds its links into the menu button; the button opens them as a list under the bar. */\n@container (width < 720px) {\n  .bar {\n    gap: 12px;\n    padding: 0 16px;\n  }\n\n  .links {\n    display: none;\n  }\n\n  .actions {\n    margin-left: auto;\n  }\n\n  .toggle {\n    display: inline-flex;\n  }\n\n  .drawer:not([hidden]) {\n    display: block;\n    padding: 8px 12px 12px;\n    border-top: 1px solid var(--jl-line);\n    animation: drop var(--jl-fast) var(--jl-ease);\n  }\n\n  .drawer ul {\n    flex-direction: column;\n    gap: 2px;\n  }\n\n  .drawer .link {\n    display: flex;\n    height: 40px;\n  }\n\n  .drawer .link[aria-current=\"page\"] {\n    background: var(--jl-accent-soft);\n  }\n}\n\n@keyframes drop {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n";
+export { jl_navbar_default as default };

package/dist/organisms/jl-navbar.d.ts

@@ -0,0 +1,32 @@
+import { JlElement } from '../base/jl-element';
+import type { NavbarLink } from '../types/jl-navbar.types';
+/**
+ * The bar at the top of an app or a site: the brand (`slot="brand"`), the main links, and actions
+ * (`slot="actions"`). When the bar itself is narrower than 720 pixels, the links fold into a menu button that opens
+ * them as a list under the bar.
+ */
+export declare class JlNavbar extends JlElement {
+    static readonly selector = "jl-navbar";
+    readonly links: Readonly<Readonly<{
+        get(): NavbarLink[];
+        set(setter: NavbarLink[] | ((prevState: NavbarLink[]) => NavbarLink[])): void;
+    }>>;
+    /** Stays at the top of the window while the page scrolls. */
+    readonly sticky: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The navigation's name for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private renderLinks;
+    private link;
+    /** Opens or closes the list of links under the bar, on a narrow bar. */
+    private setDrawer;
+}

package/dist/organisms/jl-navbar.js

@@ -0,0 +1,121 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { jsonOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import jl_navbar_default from "./jl-navbar.css_raw.js";
+import { css } from "@jadis/core";
+import { Menu, X } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-navbar.tsx
+registerIcons({
+	menu: Menu,
+	x: X
+});
+var ICON_SIZE = 18;
+var DEFAULT_LABEL = "Main";
+var MENU_ICON = "menu";
+var CLOSE_ICON = "x";
+/**
+* The bar at the top of an app or a site: the brand (`slot="brand"`), the main links, and actions
+* (`slot="actions"`). When the bar itself is narrower than 720 pixels, the links fold into a menu button that opens
+* them as a list under the bar.
+*/
+var JlNavbar = class extends JlElement {
+	static selector = "jl-navbar";
+	links = this.useChange([], () => this.renderLinks(), {
+		attribute: "links",
+		parse: jsonOf([])
+	});
+	/** Stays at the top of the window while the page scrolls. */
+	sticky = this.useChange(false, (value) => this.reflect("sticky", value), { attribute: "sticky" });
+	/** The navigation's name for screen readers. */
+	label = this.useChange(DEFAULT_LABEL, (value) => {
+		this._refs.links.setAttribute("aria-label", value || DEFAULT_LABEL);
+		this._refs.drawer.setAttribute("aria-label", value || DEFAULT_LABEL);
+	}, { attribute: "label" });
+	_refs = this.useRefs((ref) => ({
+		drawer: ref(".drawer"),
+		drawerList: ref(".drawer ul"),
+		links: ref(".links"),
+		linksList: ref(".links ul"),
+		toggle: ref(".toggle"),
+		toggleIcon: ref(".toggle jl-icon")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("header", {
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("div", {
+				class: "bar",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						class: "brand",
+						children: /* @__PURE__ */ jsx("slot", { name: "brand" })
+					}),
+					/* @__PURE__ */ jsx("nav", {
+						class: "links",
+						children: /* @__PURE__ */ jsx("ul", {})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						class: "actions",
+						children: /* @__PURE__ */ jsx("slot", { name: "actions" })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						class: "toggle",
+						"aria-expanded": "false",
+						"aria-controls": "drawer",
+						"aria-label": "Menu",
+						children: /* @__PURE__ */ jsx(JlIcon, {
+							name: MENU_ICON,
+							size: ICON_SIZE
+						})
+					})
+				]
+			}), /* @__PURE__ */ jsx("nav", {
+				class: "drawer",
+				id: "drawer",
+				hidden: true,
+				children: /* @__PURE__ */ jsx("ul", {})
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_navbar_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.toggle, "click", () => this.setDrawer(!this.hasAttribute("expanded")));
+		this.on(this._refs.drawer, "click", (event) => {
+			if (event.target.closest("a") !== null) this.setDrawer(false);
+		});
+		this.on(this._refs.drawer, "keydown", (event) => {
+			if (event.key === "Escape") {
+				this.setDrawer(false);
+				this._refs.toggle.focus();
+			}
+		});
+	}
+	renderLinks() {
+		const links = this.links.get();
+		this._refs.linksList.replaceChildren(...links.map((link) => this.link(link)));
+		this._refs.drawerList.replaceChildren(...links.map((link) => this.link(link)));
+	}
+	link(link) {
+		return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+			class: "link",
+			href: link.href,
+			"aria-current": link.active === true ? "page" : void 0,
+			children: link.label
+		}) });
+	}
+	/** Opens or closes the list of links under the bar, on a narrow bar. */
+	setDrawer(open) {
+		this._refs.drawer.hidden = !open;
+		this._refs.toggle.setAttribute("aria-expanded", String(open));
+		this._refs.toggle.setAttribute("aria-label", open ? "Close the menu" : "Menu");
+		this._refs.toggleIcon.name.set(open ? CLOSE_ICON : MENU_ICON);
+		this.reflect("expanded", open);
+	}
+};
+JlNavbar.register();
+export { JlNavbar };

package/dist/organisms/jl-page-header.css_raw.js

@@ -0,0 +1,3 @@
+// src/organisms/jl-page-header.css?raw
+var jl_page_header_default = ":host {\n  display: block;\n}\n\n.page-header {\n  display: grid;\n  gap: 12px;\n}\n\n:host([divided]) .page-header {\n  padding-bottom: 20px;\n  border-bottom: 1px solid var(--jl-line);\n}\n\n.breadcrumb {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  line-height: 1.4;\n}\n\n/* The actions sit beside the heading while there is room, and wrap under it when there is not. */\n.main {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px 24px;\n}\n\n.titles {\n  display: grid;\n  flex: 1 1 320px;\n  gap: 6px;\n  min-width: 0;\n}\n\nh1 {\n  color: var(--jl-text);\n  font-size: 26px;\n  font-weight: 700;\n  letter-spacing: -0.02em;\n  line-height: 1.25;\n  overflow-wrap: anywhere;\n}\n\n.description {\n  max-width: 72ch;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-md);\n  line-height: 1.55;\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n  padding-top: 2px;\n}\n\n.meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n";
+export { jl_page_header_default as default };

package/dist/organisms/jl-page-header.d.ts

@@ -0,0 +1,26 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * The top of a page: its heading and what it is for, a breadcrumb above, the page's actions beside the heading
+ * (under it on a phone) and a row of badges under the description. `divided` draws a line under it all.
+ */
+export declare class JlPageHeader extends JlElement {
+    static readonly selector = "jl-page-header";
+    readonly heading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly description: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Draws a line under the header, between it and the page's content. */
+    readonly divided: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private renderSlots;
+}

package/dist/organisms/jl-page-header.js

@@ -0,0 +1,85 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { hasSlotted } from "../lib/slots.js";
+import jl_page_header_default from "./jl-page-header.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-page-header.tsx
+/**
+* The top of a page: its heading and what it is for, a breadcrumb above, the page's actions beside the heading
+* (under it on a phone) and a row of badges under the description. `divided` draws a line under it all.
+*/
+var JlPageHeader = class extends JlElement {
+	static selector = "jl-page-header";
+	heading = this.useChange("", (value) => {
+		this._refs.heading.textContent = value;
+	}, { attribute: "heading" });
+	description = this.useChange("", (value) => {
+		this._refs.description.textContent = value;
+		this._refs.description.hidden = value === "";
+	}, { attribute: "description" });
+	/** Draws a line under the header, between it and the page's content. */
+	divided = this.useChange(false, (value) => this.reflect("divided", value), { attribute: "divided" });
+	_refs = this.useRefs((ref) => ({
+		actions: ref(".actions"),
+		actionsSlot: ref("slot[name=\"actions\"]"),
+		breadcrumb: ref(".breadcrumb"),
+		breadcrumbSlot: ref("slot[name=\"breadcrumb\"]"),
+		description: ref(".description"),
+		heading: ref("h1"),
+		meta: ref(".meta"),
+		metaSlot: ref("slot[name=\"meta\"]")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("header", {
+			class: "page-header",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					class: "breadcrumb",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", { name: "breadcrumb" })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "main",
+					children: [/* @__PURE__ */ jsxs("div", {
+						class: "titles",
+						children: [/* @__PURE__ */ jsx("h1", {}), /* @__PURE__ */ jsx("p", {
+							class: "description",
+							hidden: true
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						class: "actions",
+						hidden: true,
+						children: /* @__PURE__ */ jsx("slot", { name: "actions" })
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "meta",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", { name: "meta" })
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_page_header_default}`;
+	}
+	onConnect() {
+		const refs = this._refs;
+		this.renderSlots();
+		for (const slot of [
+			refs.breadcrumbSlot,
+			refs.actionsSlot,
+			refs.metaSlot
+		]) this.on(slot, "slotchange", () => this.renderSlots());
+	}
+	renderSlots() {
+		const refs = this._refs;
+		refs.breadcrumb.hidden = !hasSlotted(refs.breadcrumbSlot);
+		refs.actions.hidden = !hasSlotted(refs.actionsSlot);
+		refs.meta.hidden = !hasSlotted(refs.metaSlot);
+	}
+};
+JlPageHeader.register();
+export { JlPageHeader };

package/dist/organisms/jl-side-nav.css_raw.js

@@ -0,0 +1,3 @@
+// src/organisms/jl-side-nav.css?raw
+var jl_side_nav_default = ":host {\n  display: block;\n  width: var(--width, 248px);\n  height: 100%;\n  min-height: 0;\n  transition: width var(--jl-slow) var(--jl-ease);\n}\n\n:host([collapsed]) {\n  width: var(--rail-width, 60px);\n}\n\nnav {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  height: 100%;\n  padding: 12px 8px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n}\n\n::slotted([slot=\"footer\"]) {\n  margin-top: auto;\n}\n\n.sections {\n  display: grid;\n  gap: 14px;\n}\n\n.section {\n  display: grid;\n  gap: 2px;\n}\n\n.section-label {\n  padding: 4px 10px 6px;\n  color: var(--jl-muted);\n  font-size: 11px;\n  font-weight: 650;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.items,\n.children {\n  display: grid;\n  gap: 2px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.children {\n  margin-top: 2px;\n}\n\n.entry {\n  position: relative;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  min-height: 34px;\n  padding: 0 10px;\n  border: none;\n  border-radius: var(--jl-radius-sm);\n  background: none;\n  color: inherit;\n  font: inherit;\n  font-weight: 550;\n  text-align: start;\n  text-decoration: none;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n.item[data-depth=\"1\"] {\n  padding-left: 36px;\n}\n\n.item[data-depth=\"2\"] {\n  padding-left: 50px;\n}\n\n.item[data-depth=\"3\"] {\n  padding-left: 64px;\n}\n\n.item:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.item[aria-current=\"page\"] {\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n.item.holds-active {\n  color: var(--jl-text);\n}\n\n.item-icon {\n  color: var(--jl-faint);\n}\n\n.item:hover .item-icon,\n.item.holds-active .item-icon {\n  color: var(--jl-text-2);\n}\n\n.item[aria-current=\"page\"] .item-icon {\n  color: var(--jl-accent);\n}\n\n.item-initial {\n  display: none;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface-3);\n  color: var(--jl-text-2);\n  font-size: 11px;\n  font-weight: 700;\n}\n\n/* Nested items without an icon line their labels up under their parent's label. */\n.item:not([data-depth=\"0\"]) .item-initial {\n  display: none;\n}\n.item-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.item-badge {\n  flex: none;\n  min-width: 20px;\n  padding: 2px 6px;\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface-3);\n  color: var(--jl-text-2);\n  font-size: 11px;\n  font-weight: 650;\n  line-height: 14px;\n  text-align: center;\n}\n\n.item[aria-current=\"page\"] .item-badge {\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n}\n\n.expander jl-icon {\n  transition: transform var(--jl-fast) var(--jl-ease);\n}\n\n.chevron {\n  color: var(--jl-faint);\n  transition: transform var(--jl-fast) var(--jl-ease);\n}\n\n.entry.open > .item .chevron,\n.entry.open > .expander jl-icon {\n  transform: rotate(90deg);\n}\n\n/* The chevron of a parent that is also a link: its own button, over the end of the row. */\n.expander {\n  position: absolute;\n  top: 5px;\n  right: 6px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  color: var(--jl-faint);\n  cursor: pointer;\n}\n\n.expander:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.entry:has(> .expander) > .item {\n  padding-right: 36px;\n}\n\n/* The rail: icons only, centred; labels stay for screen readers, and show as tooltips. */\n:host([collapsed]) .section-label {\n  height: 1px;\n  margin: 4px 10px;\n  padding: 0;\n  overflow: hidden;\n  background: var(--jl-line);\n  color: transparent;\n}\n\n:host([collapsed]) .section:first-child .section-label {\n  display: none;\n}\n\n:host([collapsed]) .item {\n  justify-content: center;\n  padding: 0;\n}\n\n:host([collapsed]) .item-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n}\n\n:host([collapsed]) .item-initial {\n  display: inline-flex;\n}\n\n:host([collapsed]) .item-badge {\n  position: absolute;\n  top: 5px;\n  right: 9px;\n  min-width: 0;\n  width: 8px;\n  height: 8px;\n  padding: 0;\n  overflow: hidden;\n  background: var(--jl-accent);\n  color: transparent;\n}\n\n:host([collapsed]) .children {\n  display: none;\n}\n";
+export { jl_side_nav_default as default };

package/dist/organisms/jl-side-nav.d.ts

@@ -0,0 +1,60 @@
+import { JlElement } from '../base/jl-element';
+import type { SideNavSection } from '../types/jl-side-nav.types';
+/**
+ * The navigation of an app, down its side: sections of items with icons, badges and nested items that open with
+ * a chevron. `value` is the active item (its parents open to show it); `collapsed` makes it a rail of icons, with
+ * the labels as tooltips. Items with an `href` are links; the others fire `select`.
+ */
+export declare class JlSideNav extends JlElement {
+    static readonly selector = "jl-side-nav";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        select: string;
+    }>>;
+    readonly sections: Readonly<Readonly<{
+        get(): SideNavSection[];
+        set(setter: SideNavSection[] | ((prevState: SideNavSection[]) => SideNavSection[])): void;
+    }>>;
+    /** The id of the active item. */
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Shows only the icons, in a narrow rail; the labels become tooltips. */
+    readonly collapsed: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The name of the navigation for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _prefix;
+    /** The parents people opened, or that hold the active item. */
+    private readonly _state;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    /** Opens or closes a parent item. */
+    toggleItem(id: string, force?: boolean): void;
+    private onClick;
+    private choose;
+    /** Up and Down move between the rows people can see, Right opens a parent, Left closes it or goes up to it. */
+    private onKey;
+    private openOrGoDown;
+    private closeOrGoUp;
+    private render;
+    private sectionNode;
+    private itemNode;
+    /**
+     * The row of an item: a link when it has an `href`, otherwise a button. In the rail, a parent leads to its first
+     * leaf, since its children cannot show there.
+     */
+    private rowNode;
+    private rowContent;
+    /** Shows the children of open parents, and says so on their chevrons. */
+    private renderOpen;
+    /** Marks the active row, and the parents above it; opens them so it shows. */
+    private renderActive;
+}