@syware/jlib 0.3.0 → 0.4.0

package/dist/all.js

@@ -34,6 +34,7 @@ import { JlAvatarGroup } from "./molecules/jl-avatar-group.js";
 import { JlBreadcrumb } from "./molecules/jl-breadcrumb.js";
 import { JlCalendar } from "./molecules/jl-calendar.js";
 import { CARD_PADDINGS, JlCard } from "./molecules/jl-card.js";
+import { JlChipGroup } from "./molecules/jl-chip-group.js";
 import { JlCopyButton } from "./molecules/jl-copy-button.js";
 import { CODE_LANGUAGES, JlCodeBlock } from "./molecules/jl-code-block.js";
 import { JlCombobox } from "./molecules/jl-combobox.js";
@@ -65,6 +66,7 @@ import { JlFlow } from "./organisms/jl-flow.js";
 import { JlNavbar } from "./organisms/jl-navbar.js";
 import { JlPageHeader } from "./organisms/jl-page-header.js";
 import { JlSideNav } from "./organisms/jl-side-nav.js";
+import { JlTabBar } from "./organisms/jl-tab-bar.js";
 import { JlTable, TABLE_SORT_DIRECTIONS } from "./organisms/jl-table.js";
 import { JlToaster, TOASTER_PLACEMENTS, toast } from "./organisms/jl-toaster.js";
 import { JlTree } from "./organisms/jl-tree.js";
@@ -72,5 +74,5 @@ import { JlAppShell } from "./templates/jl-app-shell.js";
 import { JlSplitView, SPLIT_ORIENTATIONS } from "./templates/jl-split-view.js";
 // src/all.ts
 registerIcons(COMMON_ICONS);
-define(JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlEmpty, JlField, JlFileDrop, JlFlow, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTable, JlTabPanel, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree);
-export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, FLOATING_STYLES, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };
+define(JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlEmpty, JlField, JlFileDrop, JlFlow, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, JlTable, JlTabPanel, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree);
+export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, FLOATING_STYLES, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };

package/dist/atoms/jl-button.css_raw.js

@@ -1,3 +1,3 @@
 // src/atoms/jl-button.css?raw
-var jl_button_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  --height: var(--jl-control-md);\n  --pad: 14px;\n  --font-size: var(--jl-font-md);\n  --radius: var(--jl-radius-sm);\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n  --pad: 11px;\n  --font-size: var(--jl-font-xs);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n  --pad: 18px;\n  --font-size: 15px;\n  --radius: var(--jl-radius);\n}\n\n:host([block]) {\n  display: flex;\n}\n\nbutton {\n  display: inline-flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  height: var(--height);\n  padding: 0 var(--pad);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--radius);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--font-size);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n:host([icon-only]) button {\n  width: var(--height);\n  padding: 0;\n}\n\nbutton:hover {\n  background: var(--jl-surface-2);\n}\n\nbutton:active {\n  background: var(--jl-surface-3);\n}\n\n:host([variant=\"primary\"]) button {\n  border-color: transparent;\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n}\n\n:host([variant=\"primary\"]) button:hover {\n  background: var(--jl-accent-strong);\n}\n\n:host([variant=\"ghost\"]) button {\n  border-color: transparent;\n  background: transparent;\n  color: var(--jl-accent);\n}\n\n:host([variant=\"ghost\"]) button:hover {\n  background: var(--jl-accent-soft);\n}\n\n:host([variant=\"danger\"]) button {\n  border-color: transparent;\n  background: var(--jl-danger);\n  color: var(--jl-on-danger);\n}\n\n:host([variant=\"danger\"]) button:hover {\n  background: color-mix(in srgb, var(--jl-danger) 86%, var(--jl-text));\n}\n\n:host([loading]) button {\n  cursor: progress;\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n";
+var jl_button_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  --height: var(--jl-control-md);\n  --pad: 14px;\n  --font-size: var(--jl-font-md);\n  --radius: var(--jl-radius-sm);\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n  --pad: 11px;\n  --font-size: var(--jl-font-xs);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n  --pad: 18px;\n  --font-size: 15px;\n  --radius: var(--jl-radius);\n}\n\n:host([block]) {\n  display: flex;\n}\n\n/* Moves between the button and the link: its children are laid out by whichever holds it. */\n.content {\n  display: contents;\n}\n\n.base {\n  display: inline-flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  height: var(--height);\n  padding: 0 var(--pad);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--radius);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--font-size);\n  font-weight: 600;\n  line-height: 1;\n  text-decoration: none;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n:host([icon-only]) .base {\n  width: var(--height);\n  padding: 0;\n}\n\n.base:hover {\n  background: var(--jl-surface-2);\n}\n\n.base:active {\n  background: var(--jl-surface-3);\n}\n\n:host([variant=\"primary\"]) .base {\n  border-color: transparent;\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n}\n\n:host([variant=\"primary\"]) .base:hover {\n  background: var(--jl-accent-strong);\n}\n\n:host([variant=\"ghost\"]) .base {\n  border-color: transparent;\n  background: transparent;\n  color: var(--jl-accent);\n}\n\n:host([variant=\"ghost\"]) .base:hover {\n  background: var(--jl-accent-soft);\n}\n\n:host([variant=\"danger\"]) .base {\n  border-color: transparent;\n  background: var(--jl-danger);\n  color: var(--jl-on-danger);\n}\n\n:host([variant=\"danger\"]) .base:hover {\n  background: color-mix(in srgb, var(--jl-danger) 86%, var(--jl-text));\n}\n\n:host([loading]) .base {\n  cursor: progress;\n}\n\n.base:disabled,\n.base[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n";
 export { jl_button_default as default };

package/dist/atoms/jl-button.d.ts

@@ -6,6 +6,7 @@ export declare const BUTTON_TYPES: readonly ButtonType[];
 /**
  * A button. Its text is the `label` (or the slotted content); with only an `icon`, its `hint` names it.
  * Listen to `press`: it fires only while the button can be pressed. `type="submit"` submits the surrounding form.
+ * With an `href` it is a link that looks the same: it opens the address, and `press` still fires.
  */
 export declare class JlButton extends JlElement {
     static readonly selector = "jl-button";
@@ -56,12 +57,30 @@ export declare class JlButton extends JlElement {
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
+    /** An address to open: the button becomes a link, for navigation that should open in a new tab when asked. */
+    readonly href: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Where the link opens (`_blank` for a new tab), with an `href`. */
+    readonly target: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     private readonly _internals;
     private readonly _refs;
     focus(options?: FocusOptions): void;
     templateHtml(): Node;
     templateCss(): string;
     onConnect(): void;
+    private canPress;
+    /** The element that takes focus and clicks: the link with an `href`, the button otherwise. */
+    private control;
+    /**
+     * Moves the content into the link or back into the button. A disabled link loses its address, so it can be
+     * neither followed nor focused, and says it is disabled.
+     */
+    private renderLink;
     private actOnForm;
     private renderIcon;
     private renderSize;

package/dist/atoms/jl-button.js

@@ -2,11 +2,12 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { CONTROL_SIZES } from "../lib/options.js";
+import { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "./jl-icon.js";
 import jl_button_default from "./jl-button.css_raw.js";
 import { JlSpinner } from "./jl-spinner.js";
 import { css } from "@jadis/core";
-import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/atoms/jl-button.tsx
 var BUTTON_VARIANTS = [
 	"secondary",
@@ -24,9 +25,13 @@ var ICON_SIZES = {
 	md: 16,
 	sm: 14
 };
+var NEW_TAB = "_blank";
+/** A page opened in a new tab gets no handle on this one. */
+var SAFE_REL = "noopener noreferrer";
 /**
 * A button. Its text is the `label` (or the slotted content); with only an `icon`, its `hint` names it.
 * Listen to `press`: it fires only while the button can be pressed. `type="submit"` submits the surrounding form.
+* With an `href` it is a link that looks the same: it opens the address, and `press` still fires.
 */
 var JlButton = class extends JlElement {
 	static selector = "jl-button";
@@ -49,6 +54,7 @@ var JlButton = class extends JlElement {
 	});
 	disabled = this.useChange(false, (value) => {
 		this._refs.button.disabled = value;
+		this.renderLink();
 		this.reflect("disabled", value);
 	}, { attribute: "disabled" });
 	/** Shows a spinner in place of the icon and ignores presses, while the work it started runs. */
@@ -56,42 +62,57 @@ var JlButton = class extends JlElement {
 		this._refs.spinner.hidden = !value;
 		this._refs.start.hidden = value || this.icon.get() === "";
 		this._refs.button.toggleAttribute("aria-busy", value);
+		this._refs.link.toggleAttribute("aria-busy", value);
 		this.reflect("loading", value);
 	}, { attribute: "loading" });
 	/** The tooltip; also the button's name for screen readers when it only has an icon. */
 	hint = this.useChange("", () => this.renderLabel(), { attribute: "hint" });
 	/** Takes the whole width of its container. */
 	block = this.useChange(false, (value) => this.reflect("block", value), { attribute: "block" });
+	/** An address to open: the button becomes a link, for navigation that should open in a new tab when asked. */
+	href = this.useChange("", () => this.renderLink(), { attribute: "href" });
+	/** Where the link opens (`_blank` for a new tab), with an `href`. */
+	target = this.useChange("", () => this.renderLink(), { attribute: "target" });
 	_internals = this.attachInternals();
 	_refs = this.useRefs((ref) => ({
 		button: ref("button"),
+		content: ref(".content"),
 		end: ref(".end"),
 		label: ref(".text"),
+		link: ref("a"),
 		slot: ref("slot"),
 		spinner: ref("jl-spinner"),
 		start: ref(".start")
 	}));
 	focus(options) {
-		this._refs.button.focus(options);
+		this.control().focus(options);
 	}
 	templateHtml() {
-		return /* @__PURE__ */ jsxs("button", {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+			class: "base",
 			type: "button",
 			attrs: { part: "base" },
-			children: [
-				/* @__PURE__ */ jsx(JlSpinner, { hidden: true }),
-				/* @__PURE__ */ jsx(JlIcon, {
-					class: "start",
-					hidden: true
-				}),
-				/* @__PURE__ */ jsx("span", { class: "text" }),
-				/* @__PURE__ */ jsx("slot", {}),
-				/* @__PURE__ */ jsx(JlIcon, {
-					class: "end",
-					hidden: true
-				})
-			]
-		});
+			children: /* @__PURE__ */ jsxs("span", {
+				class: "content",
+				children: [
+					/* @__PURE__ */ jsx(JlSpinner, { hidden: true }),
+					/* @__PURE__ */ jsx(JlIcon, {
+						class: "start",
+						hidden: true
+					}),
+					/* @__PURE__ */ jsx("span", { class: "text" }),
+					/* @__PURE__ */ jsx("slot", {}),
+					/* @__PURE__ */ jsx(JlIcon, {
+						class: "end",
+						hidden: true
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx("a", {
+			class: "base",
+			hidden: true,
+			attrs: { part: "base" }
+		})] });
 	}
 	templateCss() {
 		return css`${BASE_STYLES}${jl_button_default}`;
@@ -99,10 +120,43 @@ var JlButton = class extends JlElement {
 	onConnect() {
 		this.on(this._refs.slot, "slotchange", () => this.renderLabel());
 		this.on(this._refs.button, "click", () => {
-			if (this.disabled.get() || this.loading.get()) return;
+			if (!this.canPress()) return;
 			this.events.emit("press");
 			this.actOnForm();
 		});
+		this.on(this._refs.link, "click", (event) => {
+			if (!this.canPress()) {
+				event.preventDefault();
+				return;
+			}
+			this.events.emit("press");
+		});
+	}
+	canPress() {
+		return !(this.disabled.get() || this.loading.get());
+	}
+	/** The element that takes focus and clicks: the link with an `href`, the button otherwise. */
+	control() {
+		return this.href.get() === "" ? this._refs.button : this._refs.link;
+	}
+	/**
+	* Moves the content into the link or back into the button. A disabled link loses its address, so it can be
+	* neither followed nor focused, and says it is disabled.
+	*/
+	renderLink() {
+		const { button, content, link } = this._refs;
+		const href = this.href.get();
+		const isLink = href !== "";
+		const target = this.target.get();
+		const off = isLink && this.disabled.get();
+		this.control().append(content);
+		button.hidden = isLink;
+		link.hidden = !isLink;
+		setOrRemove(link, "href", isLink && !off ? href : "");
+		setOrRemove(link, "target", target);
+		setOrRemove(link, "rel", target === NEW_TAB ? SAFE_REL : "");
+		setOrRemove(link, "role", off ? "link" : "");
+		setOrRemove(link, "aria-disabled", off ? "true" : "");
 	}
 	actOnForm() {
 		const form = this._internals.form;
@@ -133,13 +187,11 @@ var JlButton = class extends JlElement {
 		const iconOnly = label === "" && !this.hasSlottedContent();
 		this._refs.label.textContent = label;
 		this._refs.label.hidden = label === "";
-		this._refs.button.title = hint;
 		this.reflect("icon-only", iconOnly);
-		if (iconOnly && hint !== "") {
-			this._refs.button.setAttribute("aria-label", hint);
-			return;
+		for (const control of [this._refs.button, this._refs.link]) {
+			setOrRemove(control, "title", hint);
+			setOrRemove(control, "aria-label", iconOnly ? hint : "");
 		}
-		this._refs.button.removeAttribute("aria-label");
 	}
 };
 JlButton.register();

package/dist/atoms/jl-chip.css_raw.js

@@ -1,3 +1,3 @@
 // src/atoms/jl-chip.css?raw
-var jl_chip_default = ":host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: middle;\n  --height: 28px;\n  --pad: 10px;\n  --font-size: var(--jl-font-sm);\n  --dismiss: 20px;\n}\n\n:host([size=\"sm\"]) {\n  --height: 24px;\n  --pad: 8px;\n  --font-size: var(--jl-font-xs);\n  --dismiss: 18px;\n}\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  height: var(--height);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  color: var(--jl-text-2);\n  font-size: var(--font-size);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n.main {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--pad);\n  border-radius: inherit;\n}\n\n.label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.label:empty {\n  display: none;\n}\n\n:host([removable]) .main {\n  padding-right: 4px;\n}\n\n:host([selectable]) .main {\n  cursor: pointer;\n}\n\n:host([selectable]:not([disabled])) .chip:hover {\n  background: var(--jl-surface-2);\n}\n\n:host([selected]) .chip,\n:host([selected][selectable]:not([disabled])) .chip:hover {\n  border-color: var(--jl-accent-line);\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n/* The ring goes around the whole chip, which the main part fills. */\n.main:focus-visible {\n  box-shadow: none;\n}\n\n.chip:has(.main:focus-visible) {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.dismiss {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--dismiss);\n  height: var(--dismiss);\n  margin-right: 3px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--jl-muted);\n  cursor: pointer;\n}\n\n.dismiss:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n:host([selected]) .dismiss {\n  color: var(--jl-accent);\n}\n\n:host([selected]) .dismiss:hover {\n  background: color-mix(in srgb, var(--jl-accent) 14%, transparent);\n  color: var(--jl-accent-strong);\n}\n\n:host([disabled]) .chip {\n  opacity: 0.5;\n}\n\n:host([disabled]) .main,\n:host([disabled]) .dismiss {\n  cursor: not-allowed;\n}\n\n:host([disabled]) .dismiss:hover {\n  background: transparent;\n}\n";
+var jl_chip_default = ":host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: middle;\n  --height: 28px;\n  --pad: 10px;\n  --font-size: var(--jl-font-sm);\n  --dismiss: 20px;\n}\n\n:host([size=\"sm\"]) {\n  --height: 24px;\n  --pad: 8px;\n  --font-size: var(--jl-font-xs);\n  --dismiss: 18px;\n}\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  height: var(--height);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  color: var(--jl-text-2);\n  font-size: var(--font-size);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n.main {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--pad);\n  border-radius: inherit;\n}\n\n/* A line box taller than the chip's own line-height of 1: the accents of É, Â, Ö stay inside what overflow clips. */\n.label {\n  overflow: hidden;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n}\n\n.label:empty {\n  display: none;\n}\n\n:host([removable]) .main {\n  padding-right: 4px;\n}\n\n:host([selectable]) .main {\n  cursor: pointer;\n}\n\n:host([selectable]:not([disabled])) .chip:hover {\n  background: var(--jl-surface-2);\n}\n\n:host([selected]) .chip,\n:host([selected][selectable]:not([disabled])) .chip:hover {\n  border-color: var(--jl-accent-line);\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n/* The ring goes around the whole chip, which the main part fills. */\n.main:focus-visible {\n  box-shadow: none;\n}\n\n.chip:has(.main:focus-visible) {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.dismiss {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--dismiss);\n  height: var(--dismiss);\n  margin-right: 3px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--jl-muted);\n  cursor: pointer;\n}\n\n.dismiss:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n:host([selected]) .dismiss {\n  color: var(--jl-accent);\n}\n\n:host([selected]) .dismiss:hover {\n  background: color-mix(in srgb, var(--jl-accent) 14%, transparent);\n  color: var(--jl-accent-strong);\n}\n\n:host([disabled]) .chip {\n  opacity: 0.5;\n}\n\n:host([disabled]) .main,\n:host([disabled]) .dismiss {\n  cursor: not-allowed;\n}\n\n:host([disabled]) .dismiss:hover {\n  background: transparent;\n}\n";
 export { jl_chip_default as default };

package/dist/atoms/jl-input.d.ts

@@ -34,6 +34,11 @@ export declare class JlInput extends JlFormControl {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** The keyboard a phone shows for the field (`numeric`, `decimal`, `tel`…), as a native input's `inputmode`. */
+    readonly inputmode: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     readonly min: Readonly<Readonly<{
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;

package/dist/atoms/jl-input.js

@@ -50,6 +50,8 @@ var JlInput = class extends JlFormControl {
 	/** The field's name for screen readers, when no visible label names it. */
 	label = this.useChange("", (value) => this.setNative("aria-label", value), { attribute: "label" });
 	autocomplete = this.useChange("", (value) => this.setNative("autocomplete", value), { attribute: "autocomplete" });
+	/** The keyboard a phone shows for the field (`numeric`, `decimal`, `tel`…), as a native input's `inputmode`. */
+	inputmode = this.useChange("", (value) => this.setNative("inputmode", value), { attribute: "inputmode" });
 	min = this.useChange("", (value) => this.setNative("min", value), { attribute: "min" });
 	max = this.useChange("", (value) => this.setNative("max", value), { attribute: "max" });
 	step = this.useChange("", (value) => this.setNative("step", value), { attribute: "step" });

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export type * from './types/jl-avatar.types';
 export type * from './types/jl-breadcrumb.types';
 export type * from './types/jl-button.types';
 export type * from './types/jl-card.types';
+export type * from './types/jl-chip-group.types';
 export type * from './types/jl-chip.types';
 export type * from './types/jl-combobox.types';
 export type * from './types/jl-command-palette.types';
@@ -44,6 +45,7 @@ export type * from './types/jl-split-view.types';
 export type * from './types/jl-stat.types';
 export type * from './types/jl-steps.types';
 export type * from './types/jl-switch.types';
+export type * from './types/jl-tab-bar.types';
 export type * from './types/jl-table.types';
 export type * from './types/jl-tabs.types';
 export type * from './types/jl-timeline.types';
@@ -83,6 +85,7 @@ export * from './molecules/jl-avatar-group';
 export * from './molecules/jl-breadcrumb';
 export * from './molecules/jl-calendar';
 export * from './molecules/jl-card';
+export * from './molecules/jl-chip-group';
 export * from './molecules/jl-code-block';
 export * from './molecules/jl-combobox';
 export * from './molecules/jl-copy-button';
@@ -114,6 +117,7 @@ export * from './organisms/jl-flow';
 export * from './organisms/jl-navbar';
 export * from './organisms/jl-page-header';
 export * from './organisms/jl-side-nav';
+export * from './organisms/jl-tab-bar';
 export * from './organisms/jl-table';
 export * from './organisms/jl-toaster';
 export * from './organisms/jl-tree';

package/dist/index.js

@@ -34,6 +34,7 @@ import { JlAvatarGroup } from "./molecules/jl-avatar-group.js";
 import { JlBreadcrumb } from "./molecules/jl-breadcrumb.js";
 import { JlCalendar } from "./molecules/jl-calendar.js";
 import { CARD_PADDINGS, JlCard } from "./molecules/jl-card.js";
+import { JlChipGroup } from "./molecules/jl-chip-group.js";
 import { JlCopyButton } from "./molecules/jl-copy-button.js";
 import { CODE_LANGUAGES, JlCodeBlock } from "./molecules/jl-code-block.js";
 import { JlCombobox } from "./molecules/jl-combobox.js";
@@ -65,9 +66,10 @@ import { JlFlow } from "./organisms/jl-flow.js";
 import { JlNavbar } from "./organisms/jl-navbar.js";
 import { JlPageHeader } from "./organisms/jl-page-header.js";
 import { JlSideNav } from "./organisms/jl-side-nav.js";
+import { JlTabBar } from "./organisms/jl-tab-bar.js";
 import { JlTable, TABLE_SORT_DIRECTIONS } from "./organisms/jl-table.js";
 import { JlToaster, TOASTER_PLACEMENTS, toast } from "./organisms/jl-toaster.js";
 import { JlTree } from "./organisms/jl-tree.js";
 import { JlAppShell } from "./templates/jl-app-shell.js";
 import { JlSplitView, SPLIT_ORIENTATIONS } from "./templates/jl-split-view.js";
-export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, FLOATING_STYLES, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };
+export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, FLOATING_STYLES, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };

package/dist/lib/attributes.d.ts

@@ -7,3 +7,8 @@ export declare const oneOf: <Value extends string>(allowed: readonly Value[], fa
 export declare const jsonOf: <Value>(fallback: Value) => (value: string | null) => Value;
 /** A number attribute kept within bounds; a missing or unreadable one gives the fallback. */
 export declare const clampedNumber: (fallback: number, min: number, max: number) => (value: string | null) => number;
+/**
+ * An attribute holding a list of strings, as HTML writes it: a JSON list (`'["a","b"]'`), or one plain value
+ * (`open`) for the common case of a single one. Empty or unreadable gives an empty list.
+ */
+export declare const stringList: (value: string | null) => string[];

package/dist/lib/attributes.js

@@ -19,4 +19,16 @@ var clampedNumber = (fallback, min, max) => (value) => {
 	if (Number.isNaN(parsed)) return fallback;
 	return Math.min(max, Math.max(min, parsed));
 };
-export { clampedNumber, jsonOf, oneOf };
+var LIST_START = "[";
+/**
+* An attribute holding a list of strings, as HTML writes it: a JSON list (`'["a","b"]'`), or one plain value
+* (`open`) for the common case of a single one. Empty or unreadable gives an empty list.
+*/
+var stringList = (value) => {
+	const text = value?.trim() ?? "";
+	if (text === "") return [];
+	if (!text.startsWith(LIST_START)) return [text];
+	const parsed = jsonOf([])(text);
+	return Array.isArray(parsed) ? parsed.map(String) : [];
+};
+export { clampedNumber, jsonOf, oneOf, stringList };

package/dist/lib/tokens.d.ts

@@ -1,5 +1,6 @@
 /**
  * Gives the document the design tokens, once. They live in the `jlib` cascade layer, so the page overrides any of
- * them with a plain rule: `:root { --jl-accent: #7c3aed; }`.
+ * them with a plain rule: `:root { --jl-accent: #7c3aed; }`. Where the document takes no constructed stylesheet, a
+ * style element in its head holds them instead.
  */
 export declare function adoptTokens(): void;

package/dist/lib/tokens.js

@@ -1,15 +1,24 @@
 import { TOKEN_STYLES } from "../styles/shared.js";
 // src/lib/tokens.ts
-var adopted = { sheet: null };
+var adopted = { done: false };
+/** Whether the document takes constructed stylesheets: jsdom, which runs many apps' unit tests, does not. */
+var takesSheets = () => typeof CSSStyleSheet !== "undefined" && typeof CSSStyleSheet.prototype.replaceSync === "function" && Array.isArray(document.adoptedStyleSheets);
 /**
 * Gives the document the design tokens, once. They live in the `jlib` cascade layer, so the page overrides any of
-* them with a plain rule: `:root { --jl-accent: #7c3aed; }`.
+* them with a plain rule: `:root { --jl-accent: #7c3aed; }`. Where the document takes no constructed stylesheet, a
+* style element in its head holds them instead.
 */
 function adoptTokens() {
-	if (adopted.sheet !== null || typeof document === "undefined") return;
+	if (adopted.done || typeof document === "undefined") return;
+	adopted.done = true;
+	if (!takesSheets()) {
+		const style = document.createElement("style");
+		style.textContent = TOKEN_STYLES;
+		document.head.append(style);
+		return;
+	}
 	const sheet = new CSSStyleSheet();
 	sheet.replaceSync(TOKEN_STYLES);
 	document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
-	adopted.sheet = sheet;
 }
 export { adoptTokens };

package/dist/molecules/jl-alert.d.ts

@@ -1,8 +1,9 @@
 import { JlElement } from '../base/jl-element';
 import type { Tone } from '../types/options.types';
 /**
- * A message in the flow of the page, coloured by its tone: a tip, a success, a warning, an error. The text goes
- * in the default slot, buttons in `slot="actions"`. A `dismissible` alert has an × that hides it.
+ * A message in the flow of the page, coloured by its tone: a tip, a success, a warning, an error. The text is the
+ * `description` or goes in the default slot (for links and markup), buttons in `slot="actions"`. A `dismissible`
+ * alert has an × that hides it.
  */
 export declare class JlAlert extends JlElement {
     static readonly selector = "jl-alert";
@@ -17,6 +18,11 @@ export declare class JlAlert extends JlElement {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** The message as plain text, for pages that set it from code; richer content goes in the default slot. */
+    readonly description: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     /** An icon name in place of the tone's own; `none` shows no icon. */
     readonly icon: Readonly<Readonly<{
         get(): string;
@@ -33,7 +39,8 @@ export declare class JlAlert extends JlElement {
     templateHtml(): Node;
     templateCss(): string;
     onConnect(): void;
-    private renderActions;
+    /** Empty parts take no room: an alert with only a description has no blank line under it. */
+    private renderSlots;
     /** The tone's own icon is filled, as a toast's is; an icon of the page's stays as it is drawn. */
     private renderIcon;
 }

package/dist/molecules/jl-alert.js

@@ -31,8 +31,9 @@ var TONE_ROLES = {
 	warn: "alert"
 };
 /**
-* A message in the flow of the page, coloured by its tone: a tip, a success, a warning, an error. The text goes
-* in the default slot, buttons in `slot="actions"`. A `dismissible` alert has an × that hides it.
+* A message in the flow of the page, coloured by its tone: a tip, a success, a warning, an error. The text is the
+* `description` or goes in the default slot (for links and markup), buttons in `slot="actions"`. A `dismissible`
+* alert has an × that hides it.
 */
 var JlAlert = class extends JlElement {
 	static selector = "jl-alert";
@@ -49,6 +50,11 @@ var JlAlert = class extends JlElement {
 		this._refs.heading.textContent = value;
 		this._refs.heading.hidden = value === "";
 	}, { attribute: "heading" });
+	/** The message as plain text, for pages that set it from code; richer content goes in the default slot. */
+	description = this.useChange("", (value) => {
+		this._refs.description.textContent = value;
+		this._refs.description.hidden = value === "";
+	}, { attribute: "description" });
 	/** An icon name in place of the tone's own; `none` shows no icon. */
 	icon = this.useChange("", () => this.renderIcon(), { attribute: "icon" });
 	/** Shows an × that hides the alert and fires `dismiss`. */
@@ -61,8 +67,11 @@ var JlAlert = class extends JlElement {
 		actionsSlot: ref("slot[name=\"actions\"]"),
 		alert: ref(".alert"),
 		close: ref(".close"),
+		description: ref(".description"),
 		heading: ref(".heading"),
-		icon: ref(".icon")
+		icon: ref(".icon"),
+		text: ref(".text"),
+		textSlot: ref("slot:not([name])")
 	}));
 	/** Hides the alert as its × does, and fires `dismiss`. */
 	dismiss() {
@@ -86,8 +95,13 @@ var JlAlert = class extends JlElement {
 							class: "heading",
 							hidden: true
 						}),
+						/* @__PURE__ */ jsx("p", {
+							class: "description",
+							hidden: true
+						}),
 						/* @__PURE__ */ jsx("div", {
 							class: "text",
+							hidden: true,
 							children: /* @__PURE__ */ jsx("slot", {})
 						}),
 						/* @__PURE__ */ jsx("div", {
@@ -113,10 +127,13 @@ var JlAlert = class extends JlElement {
 	}
 	onConnect() {
 		this._refs.close.events.register("press", () => this.dismiss());
-		this.renderActions();
-		this.on(this._refs.actionsSlot, "slotchange", () => this.renderActions());
+		this.renderSlots();
+		this.on(this._refs.actionsSlot, "slotchange", () => this.renderSlots());
+		this.on(this._refs.textSlot, "slotchange", () => this.renderSlots());
 	}
-	renderActions() {
+	/** Empty parts take no room: an alert with only a description has no blank line under it. */
+	renderSlots() {
+		this._refs.text.hidden = !hasSlotted(this._refs.textSlot);
 		this._refs.actions.hidden = !hasSlotted(this._refs.actionsSlot);
 	}
 	/** The tone's own icon is filled, as a toast's is; an icon of the page's stays as it is drawn. */

package/dist/molecules/jl-chip-group.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-chip-group.css?raw
+var jl_chip_group_default = ":host {\n  display: block;\n  min-width: 0;\n  --height: 28px;\n  --pad: 10px;\n  --font-size: var(--jl-font-sm);\n}\n\n:host([size=\"sm\"]) {\n  --height: 24px;\n  --pad: 8px;\n  --font-size: var(--jl-font-xs);\n}\n\n/* Where a thumb presses it. */\n:host([size=\"lg\"]) {\n  --height: 36px;\n  --pad: 14px;\n  --font-size: var(--jl-font-md);\n}\n\n/*\n * One row that scrolls sideways on a narrow screen. The padding keeps the focus ring inside what the scroller\n * clips; the negative margin keeps the chips aligned with the content around.\n */\n.group {\n  display: flex;\n  gap: 8px;\n  min-width: 0;\n  margin: -3px;\n  padding: 3px;\n  overflow-x: auto;\n  scrollbar-width: none;\n  contain: inline-size;\n}\n\n.group::-webkit-scrollbar {\n  display: none;\n}\n\n:host([wrap]) .group {\n  flex-wrap: wrap;\n  overflow: visible;\n  contain: none;\n}\n\n.chip {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  height: var(--height);\n  padding: 0 var(--pad);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  color: var(--jl-text-2);\n  font-size: var(--font-size);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n.chip:hover:not(:disabled) {\n  background: var(--jl-surface-2);\n}\n\n.chip.selected,\n.chip.selected:hover:not(:disabled) {\n  border-color: var(--jl-accent-line);\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n.chip:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* A line box taller than the chip's own line-height of 1: the accents of É, Â, Ö stay inside what overflow clips. */\n.label {\n  overflow: hidden;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n}\n\n.badge {\n  min-width: 18px;\n  margin-right: -4px;\n  padding: 0 6px;\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface-3);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-variant-numeric: tabular-nums;\n  font-weight: 650;\n  line-height: 18px;\n  text-align: center;\n}\n\n.chip.selected .badge {\n  background: color-mix(in srgb, var(--jl-accent) 14%, transparent);\n  color: var(--jl-accent);\n}\n";
+export { jl_chip_group_default as default };

package/dist/molecules/jl-chip-group.d.ts

@@ -0,0 +1,81 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { ChipGroupOption } from '../types/jl-chip-group.types';
+import type { ControlSize } from '../types/options.types';
+/**
+ * A row of chips to choose from: a status to filter by, a category, a reason. One choice by default, as radios
+ * (choosing the chosen chip again keeps it); `multiple` lets people turn each chip on and off. On a narrow screen
+ * the row scrolls sideways; `wrap` lets it go to the next line instead. `change` fires with the chosen values.
+ */
+export declare class JlChipGroup extends JlFormControl {
+    static readonly selector = "jl-chip-group";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: string[];
+    }>>;
+    readonly options: Readonly<Readonly<{
+        get(): ChipGroupOption[];
+        set(setter: ChipGroupOption[] | ((prevState: ChipGroupOption[]) => ChipGroupOption[])): void;
+    }>>;
+    /** The chosen values, in the options' order; with one choice, a list of at most one. */
+    readonly value: Readonly<Readonly<{
+        get(): string[];
+        set(setter: string[] | ((prevState: string[]) => string[])): void;
+    }>>;
+    /** Several chips can be chosen, each turned on and off on its own. */
+    readonly multiple: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Goes to the next line when the chips do not fit, instead of scrolling sideways. */
+    readonly wrap: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    /** The group's name for screen readers, when no visible label names it. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** A form refuses to submit while nothing is chosen. */
+    readonly required: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The chip that holds the Tab stop with several choices: the last one people reached. */
+    private readonly _state;
+    private readonly _nameWatch;
+    private readonly _refs;
+    /** Focuses the chip that holds the Tab stop. */
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    protected resetValue(): void;
+    /** The browser calls it for a disabled fieldset and for the element's own `disabled`, even before it renders. */
+    protected setDisabledByForm(disabled: boolean): void;
+    private chips;
+    /** What is chosen: with one choice, only the first value counts. */
+    private chosen;
+    private isDisabled;
+    /** One choice: the chip becomes it. Several: the chip turns on or off, the values keeping the options' order. */
+    private press;
+    private commit;
+    private onKeydown;
+    private renderOptions;
+    private chip;
+    /** Radios with one choice, toggle buttons with several; each chosen chip shows its icon or a check. */
+    private renderValue;
+    /** Tab reaches one chip: the chosen one with one choice, the last one reached with several, else the first. */
+    private renderTabStop;
+    /** One choice gives one entry; several give one entry each under the field's name, as checkboxes would. */
+    private renderFormValue;
+    private renderValidity;
+}

package/dist/molecules/jl-chip-group.js

@@ -0,0 +1,259 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { jsonOf, oneOf, stringList } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { CONTROL_SIZES } from "../lib/options.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { rovingIndex } from "../lib/roving-index.js";
+import jl_chip_group_default from "./jl-chip-group.css_raw.js";
+import { css } from "@jadis/core";
+import { Check } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-chip-group.tsx
+registerIcons({ check: Check });
+var ICON_SIZES = {
+	lg: 16,
+	md: 14,
+	sm: 12
+};
+var SELECTED_ICON = "check";
+var CHIP_SELECTOR = ".chip";
+var VALUE_MISSING = "Please select one of these options.";
+/** The keys that move between the chips; with one choice, the choice moves too, as with native radios. */
+var MOVES = /* @__PURE__ */ new Map([
+	["ArrowDown", "next"],
+	["ArrowLeft", "previous"],
+	["ArrowRight", "next"],
+	["ArrowUp", "previous"],
+	["End", "last"],
+	["Home", "first"]
+]);
+/** A JSON attribute that should hold a list of options; anything else gives none. */
+var parseOptions = (value) => {
+	const parsed = jsonOf([])(value);
+	return Array.isArray(parsed) ? parsed : [];
+};
+/**
+* A row of chips to choose from: a status to filter by, a category, a reason. One choice by default, as radios
+* (choosing the chosen chip again keeps it); `multiple` lets people turn each chip on and off. On a narrow screen
+* the row scrolls sideways; `wrap` lets it go to the next line instead. `change` fires with the chosen values.
+*/
+var JlChipGroup = class extends JlFormControl {
+	static selector = "jl-chip-group";
+	events = this.useEvents();
+	options = this.useChange([], () => this.renderOptions(), {
+		attribute: "options",
+		parse: parseOptions
+	});
+	/** The chosen values, in the options' order; with one choice, a list of at most one. */
+	value = this.useChange([], () => this.renderValue(), {
+		attribute: "value",
+		parse: stringList
+	});
+	/** Several chips can be chosen, each turned on and off on its own. */
+	multiple = this.useChange(false, (value) => {
+		this.reflect("multiple", value);
+		this.renderValue();
+	}, { attribute: "multiple" });
+	/** Goes to the next line when the chips do not fit, instead of scrolling sideways. */
+	wrap = this.useChange(false, (value) => this.reflect("wrap", value), { attribute: "wrap" });
+	size = this.useChange("md", (value) => {
+		this.reflect("size", value);
+		this.renderOptions();
+	}, {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	/** The group's name for screen readers, when no visible label names it. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.group, "aria-label", value), { attribute: "label" });
+	/** A form refuses to submit while nothing is chosen. */
+	required = this.useChange(false, (value) => {
+		this.reflect("required", value);
+		this._refs.group.toggleAttribute("aria-required", value);
+		this.renderValidity();
+	}, { attribute: "required" });
+	disabled = this.useChange(false, (value) => {
+		this.reflect("disabled", value);
+		this.renderValue();
+	}, { attribute: "disabled" });
+	/** The chip that holds the Tab stop with several choices: the last one people reached. */
+	_state = {
+		disabledByForm: false,
+		stop: ""
+	};
+	_nameWatch = new MutationObserver(() => this.renderFormValue());
+	_refs = this.useRefs((ref) => ({ group: ref(".group") }));
+	/** Focuses the chip that holds the Tab stop. */
+	focus(options) {
+		this.chips().find((chip) => chip.tabIndex === 0)?.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsx("div", {
+			class: "group",
+			role: "radiogroup",
+			attrs: { part: "base" }
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_chip_group_default}`;
+	}
+	onConnect() {
+		this._nameWatch.observe(this, {
+			attributeFilter: ["name"],
+			attributes: true
+		});
+		this.renderFormValue();
+		this.on(this._refs.group, "click", (event) => {
+			const chip = event.target.closest(CHIP_SELECTOR);
+			if (chip !== null && !chip.disabled) this.press(chip);
+		});
+		this.on(this._refs.group, "keydown", (event) => this.onKeydown(event));
+	}
+	onDisconnect() {
+		this._nameWatch.disconnect();
+	}
+	resetValue() {
+		this.value.set(stringList(this.getAttribute("value")));
+	}
+	/** The browser calls it for a disabled fieldset and for the element's own `disabled`, even before it renders. */
+	setDisabledByForm(disabled) {
+		this._state.disabledByForm = disabled;
+		this.whenRendered(() => this.renderValue());
+	}
+	chips() {
+		return [...this._refs.group.querySelectorAll(CHIP_SELECTOR)];
+	}
+	/** What is chosen: with one choice, only the first value counts. */
+	chosen() {
+		const values = this.value.get();
+		return this.multiple.get() ? values : values.slice(0, 1);
+	}
+	isDisabled() {
+		return this.disabled.get() || this._state.disabledByForm;
+	}
+	/** One choice: the chip becomes it. Several: the chip turns on or off, the values keeping the options' order. */
+	press(chip) {
+		const value = chip.dataset.value ?? "";
+		this._state.stop = value;
+		const chosen = this.chosen();
+		if (!this.multiple.get()) {
+			if (chosen[0] === value) {
+				this.renderTabStop();
+				return;
+			}
+			this.commit([value]);
+			return;
+		}
+		const next = new Set(chosen);
+		if (next.has(value)) next.delete(value);
+		else next.add(value);
+		this.commit(this.options.get().flatMap((option) => next.has(option.value) ? [option.value] : []));
+	}
+	commit(values) {
+		this.value.set(values);
+		this.events.emit("change", values);
+	}
+	onKeydown(event) {
+		const move = MOVES.get(event.key);
+		const chips = this.chips();
+		const from = chips.indexOf(event.target);
+		if (move === void 0 || from === -1) return;
+		event.preventDefault();
+		const target = chips[rovingIndex(chips.map((chip) => chip.disabled), from, move)];
+		if (target === void 0) return;
+		target.focus();
+		if (this.multiple.get()) {
+			this._state.stop = target.dataset.value ?? "";
+			this.renderTabStop();
+			return;
+		}
+		this.press(target);
+	}
+	renderOptions() {
+		const iconSize = ICON_SIZES[this.size.get()];
+		this._refs.group.replaceChildren(...this.options.get().map((option) => this.chip(option, iconSize)));
+		this.renderValue();
+	}
+	chip(option, iconSize) {
+		const badge = option.badge === void 0 ? "" : String(option.badge);
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			class: "chip",
+			tabIndex: -1,
+			"data-value": option.value,
+			"data-icon": option.icon,
+			"data-disabled": option.disabled === true ? "" : void 0,
+			children: [
+				/* @__PURE__ */ jsx(JlIcon, {
+					class: "icon",
+					size: iconSize,
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("span", {
+					class: "label",
+					children: option.label
+				}),
+				badge === "" ? "" : /* @__PURE__ */ jsx("span", {
+					class: "badge",
+					children: badge
+				})
+			]
+		});
+	}
+	/** Radios with one choice, toggle buttons with several; each chosen chip shows its icon or a check. */
+	renderValue() {
+		const chosen = new Set(this.chosen());
+		const multiple = this.multiple.get();
+		const groupDisabled = this.isDisabled();
+		this._refs.group.setAttribute("role", multiple ? "group" : "radiogroup");
+		this._refs.group.toggleAttribute("aria-disabled", groupDisabled);
+		for (const chip of this.chips()) {
+			const selected = chosen.has(chip.dataset.value ?? "");
+			chip.disabled = groupDisabled || chip.dataset.disabled !== void 0;
+			setOrRemove(chip, "role", multiple ? "" : "radio");
+			setOrRemove(chip, "aria-checked", multiple ? "" : String(selected));
+			setOrRemove(chip, "aria-pressed", multiple ? String(selected) : "");
+			chip.classList.toggle("selected", selected);
+			const icon = chip.querySelector(".icon");
+			const name = chip.dataset.icon ?? (selected ? SELECTED_ICON : "");
+			icon?.name.set(name);
+			if (icon !== null) icon.hidden = name === "";
+		}
+		this.renderTabStop();
+		this.renderFormValue();
+		this.renderValidity();
+	}
+	/** Tab reaches one chip: the chosen one with one choice, the last one reached with several, else the first. */
+	renderTabStop() {
+		const enabled = this.chips().filter((chip) => !chip.disabled);
+		const chosen = this.chosen();
+		const stop = (this.multiple.get() ? [this._state.stop, ...chosen] : chosen).map((value) => enabled.find((chip) => chip.dataset.value === value)).find((chip) => chip !== void 0) ?? enabled[0];
+		for (const chip of this.chips()) chip.tabIndex = chip === stop ? 0 : -1;
+	}
+	/** One choice gives one entry; several give one entry each under the field's name, as checkboxes would. */
+	renderFormValue() {
+		const chosen = this.chosen();
+		if (!this.multiple.get()) {
+			this.internals.setFormValue(chosen[0] ?? null);
+			return;
+		}
+		const name = this.getAttribute("name") ?? "";
+		if (name === "") {
+			this.internals.setFormValue(null);
+			return;
+		}
+		const data = new FormData();
+		for (const value of chosen) data.append(name, value);
+		this.internals.setFormValue(data);
+	}
+	renderValidity() {
+		if (!(this.required.get() && this.chosen().length === 0)) {
+			this.internals.setValidity({});
+			return;
+		}
+		this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this.chips()[0] ?? this._refs.group);
+	}
+};
+JlChipGroup.register();
+export { JlChipGroup };

package/dist/molecules/jl-tag-input.css_raw.js

@@ -1,3 +1,3 @@
 // src/molecules/jl-tag-input.css?raw
-var jl_tag_input_default = ":host {\n  display: block;\n  /* As a grid or flex item, the field may be narrower than its text field would like. */\n  min-width: 0;\n  --chip-height: calc(var(--height, var(--jl-control-md)) - 12px);\n}\n\n.control {\n  flex-wrap: wrap;\n  gap: 4px;\n  padding: 4px 6px;\n  cursor: text;\n}\n\n/* The chips are items of the frame's own flow, so the field follows the last one on its line. */\n.tags {\n  display: contents;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  max-width: 100%;\n  height: var(--chip-height);\n  padding: 0 3px 0 8px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface-2);\n  color: var(--jl-text);\n  font-size: var(--jl-font-sm);\n  line-height: 1;\n  cursor: default;\n}\n\n:host([size=\"sm\"]) .tag {\n  padding-left: 6px;\n  font-size: var(--jl-font-xs);\n}\n\n.tag.flash {\n  animation: flash 600ms var(--jl-ease);\n}\n\n.tag-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tag-remove {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--jl-faint);\n  cursor: pointer;\n}\n\n.tag-remove:hover,\n.tag-remove:focus-visible {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.native {\n  flex: 1 0 80px;\n  height: calc(var(--height, var(--jl-control-md)) - 10px);\n  padding-left: 6px;\n}\n\n:host([disabled]) .tag {\n  padding-right: 8px;\n  color: var(--jl-muted);\n}\n\n.popup {\n  min-width: 180px;\n  padding: 4px;\n}\n\n.listbox {\n  position: relative;\n  max-height: 240px;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n}\n\n.option {\n  padding: 6px 10px;\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 1.4;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n}\n\n.option.active,\n.option:hover {\n  background: var(--jl-surface-3);\n}\n\nmark {\n  background: none;\n  color: var(--jl-accent);\n  font-weight: 700;\n}\n\n@keyframes flash {\n  30% {\n    border-color: var(--jl-accent-line);\n    background: var(--jl-accent-soft);\n    color: var(--jl-accent-strong);\n  }\n}\n";
+var jl_tag_input_default = ":host {\n  display: block;\n  /* As a grid or flex item, the field may be narrower than its text field would like. */\n  min-width: 0;\n  --chip-height: calc(var(--height, var(--jl-control-md)) - 12px);\n}\n\n.control {\n  flex-wrap: wrap;\n  gap: 4px;\n  padding: 4px 6px;\n  cursor: text;\n}\n\n/* The chips are items of the frame's own flow, so the field follows the last one on its line. */\n.tags {\n  display: contents;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  max-width: 100%;\n  height: var(--chip-height);\n  padding: 0 3px 0 8px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface-2);\n  color: var(--jl-text);\n  font-size: var(--jl-font-sm);\n  line-height: 1;\n  cursor: default;\n}\n\n:host([size=\"sm\"]) .tag {\n  padding-left: 6px;\n  font-size: var(--jl-font-xs);\n}\n\n.tag.flash {\n  animation: flash 600ms var(--jl-ease);\n}\n\n/* A line box taller than the tag's own line-height of 1: the accents of É, Â, Ö stay inside what overflow clips. */\n.tag-text {\n  overflow: hidden;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tag-remove {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--jl-faint);\n  cursor: pointer;\n}\n\n.tag-remove:hover,\n.tag-remove:focus-visible {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.native {\n  flex: 1 0 80px;\n  height: calc(var(--height, var(--jl-control-md)) - 10px);\n  padding-left: 6px;\n}\n\n:host([disabled]) .tag {\n  padding-right: 8px;\n  color: var(--jl-muted);\n}\n\n.popup {\n  min-width: 180px;\n  padding: 4px;\n}\n\n.listbox {\n  position: relative;\n  max-height: 240px;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n}\n\n.option {\n  padding: 6px 10px;\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 1.4;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n}\n\n.option.active,\n.option:hover {\n  background: var(--jl-surface-3);\n}\n\nmark {\n  background: none;\n  color: var(--jl-accent);\n  font-weight: 700;\n}\n\n@keyframes flash {\n  30% {\n    border-color: var(--jl-accent-line);\n    background: var(--jl-accent-soft);\n    color: var(--jl-accent-strong);\n  }\n}\n";
 export { jl_tag_input_default as default };

package/dist/organisms/jl-tab-bar.css_raw.js

@@ -0,0 +1,3 @@
+// src/organisms/jl-tab-bar.css?raw
+var jl_tab_bar_default = ":host {\n  display: block;\n  --height: 60px;\n}\n\nnav {\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  min-height: var(--height);\n  /* Clear of the home indicator on phones without a button. */\n  padding-bottom: env(safe-area-inset-bottom);\n  border-top: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n/* The items and the \"more\" button share the bar's columns. */\n.items {\n  display: contents;\n}\n\n.item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  min-width: 0;\n  padding: 6px 2px;\n  border: none;\n  background: none;\n  color: var(--jl-muted);\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1.4;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color var(--jl-fast) var(--jl-ease);\n}\n\n.item:hover {\n  color: var(--jl-text);\n}\n\n.item[aria-current=\"page\"] {\n  color: var(--jl-accent);\n}\n\n/* The ring goes round the icon's pill: round the whole column, it would touch the bar's edges. */\n.item:focus-visible {\n  box-shadow: none;\n}\n\n.icon {\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  width: 52px;\n  height: 28px;\n  border-radius: var(--jl-radius-pill);\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n.item:focus-visible .icon {\n  box-shadow: var(--jl-focus-ring);\n}\n\n/* The current item is told by a shape too, not by its colour alone. */\n.item[aria-current=\"page\"] .icon {\n  background: var(--jl-accent-soft);\n}\n\n.label {\n  max-width: 100%;\n  padding: 0 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.badge {\n  position: absolute;\n  top: -4px;\n  left: calc(50% + 4px);\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border: 2px solid var(--jl-surface);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 14px;\n  text-align: center;\n}\n";
+export { jl_tab_bar_default as default };

package/dist/organisms/jl-tab-bar.d.ts

@@ -0,0 +1,43 @@
+import { JlElement } from '../base/jl-element';
+import type { TabBarItem } from '../types/jl-tab-bar.types';
+/**
+ * The bar along the bottom of a phone, under the thumb: the three to five main places of an app, an icon over a
+ * label, one tap away. `value` is the current item. Items with an `href` are links; the others are buttons; both
+ * fire `select`. `more` adds a last button for everything else, which fires `more`: in a `jl-app-shell`, it opens
+ * the navigation drawer.
+ */
+export declare class JlTabBar extends JlElement {
+    static readonly selector = "jl-tab-bar";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        select: string;
+        more: undefined;
+    }>>;
+    readonly items: Readonly<Readonly<{
+        get(): TabBarItem[];
+        set(setter: TabBarItem[] | ((prevState: TabBarItem[]) => TabBarItem[])): void;
+    }>>;
+    /** The id of the current item. */
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The label of a last button for the other places (`More`); empty shows none. */
+    readonly more: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The name of the navigation 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 onClick;
+    private render;
+    private renderItem;
+    /** The current item says so: `aria-current="page"`, drawn in the accent. */
+    private renderCurrent;
+}

package/dist/organisms/jl-tab-bar.js

@@ -0,0 +1,123 @@
+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 { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import jl_tab_bar_default from "./jl-tab-bar.css_raw.js";
+import { css } from "@jadis/core";
+import { Ellipsis } from "lucide";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-tab-bar.tsx
+registerIcons({ ellipsis: Ellipsis });
+var ICON_SIZE = 22;
+var DEFAULT_LABEL = "Shortcuts";
+var MAX_COUNT = 99;
+var ITEM_SELECTOR = ".item";
+/** A JSON attribute that should hold a list of items; anything else gives none. */
+var parseItems = (value) => {
+	const parsed = jsonOf([])(value);
+	return Array.isArray(parsed) ? parsed : [];
+};
+/** What the badge shows: counts are capped so they fit over the icon. */
+var badgeText = (badge) => {
+	if (typeof badge === "number") return badge > MAX_COUNT ? `${MAX_COUNT}+` : String(badge);
+	return badge ?? "";
+};
+/**
+* The bar along the bottom of a phone, under the thumb: the three to five main places of an app, an icon over a
+* label, one tap away. `value` is the current item. Items with an `href` are links; the others are buttons; both
+* fire `select`. `more` adds a last button for everything else, which fires `more`: in a `jl-app-shell`, it opens
+* the navigation drawer.
+*/
+var JlTabBar = class extends JlElement {
+	static selector = "jl-tab-bar";
+	events = this.useEvents();
+	items = this.useChange([], () => this.render(), {
+		attribute: "items",
+		parse: parseItems
+	});
+	/** The id of the current item. */
+	value = this.useChange("", (value) => this.renderCurrent(value), { attribute: "value" });
+	/** The label of a last button for the other places (`More`); empty shows none. */
+	more = this.useChange("", (value) => {
+		this._refs.moreLabel.textContent = value;
+		this._refs.more.hidden = value === "";
+	}, { attribute: "more" });
+	/** The name of the navigation for screen readers. */
+	label = this.useChange(DEFAULT_LABEL, (value) => this._refs.nav.setAttribute("aria-label", value === "" ? DEFAULT_LABEL : value), { attribute: "label" });
+	_refs = this.useRefs((ref) => ({
+		items: ref(".items"),
+		more: ref(".more"),
+		moreLabel: ref(".more .label"),
+		nav: ref("nav")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("nav", {
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsx("div", { class: "items" }), /* @__PURE__ */ jsxs("button", {
+				class: "item more",
+				type: "button",
+				hidden: true,
+				children: [/* @__PURE__ */ jsx("span", {
+					class: "icon",
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "ellipsis",
+						size: ICON_SIZE
+					})
+				}), /* @__PURE__ */ jsx("span", { class: "label" })]
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_tab_bar_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.items, "click", (event) => this.onClick(event));
+		this.on(this._refs.more, "click", () => this.events.emit("more"));
+	}
+	onClick(event) {
+		const id = event.target.closest(ITEM_SELECTOR)?.dataset.id;
+		if (id === void 0) return;
+		this.value.set(id);
+		this.events.emit("select", id);
+	}
+	render() {
+		this._refs.items.replaceChildren(...this.items.get().map((item) => this.renderItem(item)));
+		this.renderCurrent(this.value.get());
+	}
+	renderItem(item) {
+		const badge = badgeText(item.badge);
+		const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			class: "icon",
+			children: [/* @__PURE__ */ jsx(JlIcon, {
+				name: item.icon,
+				size: ICON_SIZE
+			}), badge === "" ? null : /* @__PURE__ */ jsx("span", {
+				class: "badge",
+				children: badge
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			class: "label",
+			children: item.label
+		})] });
+		if (item.href === void 0) return /* @__PURE__ */ jsx("button", {
+			class: "item",
+			type: "button",
+			"data-id": item.id,
+			children: content
+		});
+		return /* @__PURE__ */ jsx("a", {
+			class: "item",
+			href: item.href,
+			"data-id": item.id,
+			children: content
+		});
+	}
+	/** The current item says so: `aria-current="page"`, drawn in the accent. */
+	renderCurrent(value) {
+		for (const item of this._refs.items.querySelectorAll(ITEM_SELECTOR)) setOrRemove(item, "aria-current", item.dataset.id === value ? "page" : "");
+	}
+};
+JlTabBar.register();
+export { JlTabBar };

package/dist/templates/jl-app-shell.css_raw.js

@@ -1,3 +1,3 @@
 // src/templates/jl-app-shell.css?raw
-var jl_app_shell_default = ":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n  container: jl-app-shell / inline-size;\n  --header-height: 56px;\n  --drawer-width: min(300px, 86%);\n}\n\n.shell {\n  position: relative;\n  display: grid;\n  grid-template:\n    \"top top top\" auto\n    \"nav main aside\" minmax(0, 1fr)\n    / auto minmax(0, 1fr) auto;\n  height: 100%;\n  overflow: hidden;\n  background: var(--jl-bg);\n  color: var(--jl-text);\n}\n\n.top {\n  grid-area: top;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: var(--header-height);\n  padding: 0 16px;\n  border-bottom: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host(:not([has-header])) .top {\n  display: none;\n}\n\n::slotted([slot=\"header\"]) {\n  flex: 1;\n  min-width: 0;\n}\n\n.menu {\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-left: -8px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-sm);\n  background: none;\n  color: var(--jl-text-2);\n  cursor: pointer;\n}\n\n.menu:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.nav {\n  grid-area: nav;\n  min-height: 0;\n  overflow-y: auto;\n  border-right: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n.nav:focus-visible {\n  box-shadow: none;\n}\n\n:host(:not([has-nav])) .nav {\n  display: none;\n}\n\n.main {\n  grid-area: main;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n\n.aside {\n  grid-area: aside;\n  min-height: 0;\n  overflow-y: auto;\n  border-left: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host(:not([has-aside])) .aside {\n  display: none;\n}\n\n.scrim {\n  display: none;\n}\n\n/* Narrow: the sidebar slides over the content as a drawer, the menu button opens it, the panel steps aside. */\n@container jl-app-shell (width < 960px) {\n  .shell {\n    grid-template:\n      \"top\" auto\n      \"main\" minmax(0, 1fr)\n      / minmax(0, 1fr);\n  }\n\n  :host([has-nav]) .top {\n    display: flex;\n  }\n\n  :host([has-nav]) .menu {\n    display: inline-flex;\n  }\n\n  .nav {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 2;\n    max-width: var(--drawer-width);\n    box-shadow: var(--jl-shadow-lg);\n    transform: translateX(-100%);\n    visibility: hidden;\n    transition:\n      transform var(--jl-slow) var(--jl-ease),\n      visibility 0s linear var(--jl-slow);\n  }\n\n  :host([nav-open]) .nav {\n    transform: none;\n    visibility: visible;\n    transition: transform var(--jl-slow) var(--jl-ease);\n  }\n\n  .scrim {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    display: block;\n    background: var(--jl-scrim);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--jl-slow) var(--jl-ease);\n  }\n\n  :host([nav-open]) .scrim {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .aside {\n    display: none;\n  }\n}\n";
+var jl_app_shell_default = ":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n  container: jl-app-shell / inline-size;\n  --header-height: 56px;\n  --drawer-width: min(300px, 86%);\n}\n\n.shell {\n  position: relative;\n  display: grid;\n  grid-template:\n    \"top top top\" auto\n    \"nav main aside\" minmax(0, 1fr)\n    / auto minmax(0, 1fr) auto;\n  height: 100%;\n  overflow: hidden;\n  background: var(--jl-bg);\n  color: var(--jl-text);\n}\n\n.top {\n  grid-area: top;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: var(--header-height);\n  padding: 0 16px;\n  border-bottom: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host(:not([has-header])) .top {\n  display: none;\n}\n\n::slotted([slot=\"header\"]) {\n  flex: 1;\n  min-width: 0;\n}\n\n.menu {\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-left: -8px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-sm);\n  background: none;\n  color: var(--jl-text-2);\n  cursor: pointer;\n}\n\n.menu:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.nav {\n  grid-area: nav;\n  min-height: 0;\n  overflow-y: auto;\n  border-right: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n.nav:focus-visible {\n  box-shadow: none;\n}\n\n:host(:not([has-nav])) .nav {\n  display: none;\n}\n\n/* Its own stacking context: what the page lifts with z-index (a sticky bar) stays under the drawer and its scrim. */\n.main {\n  grid-area: main;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  isolation: isolate;\n}\n\n.aside {\n  grid-area: aside;\n  min-height: 0;\n  overflow-y: auto;\n  border-left: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host(:not([has-aside])) .aside {\n  display: none;\n}\n\n/* The bottom bar is for narrow screens: wide ones have the sidebar. */\n.tabs {\n  display: none;\n}\n\n.scrim {\n  display: none;\n}\n\n/* Narrow: the sidebar slides over the content as a drawer, the menu button opens it, the panel steps aside. */\n@container jl-app-shell (width < 960px) {\n  .shell {\n    grid-template:\n      \"top\" auto\n      \"main\" minmax(0, 1fr)\n      \"tabs\" auto\n      / minmax(0, 1fr);\n  }\n\n  :host([has-tabs]) .tabs {\n    display: block;\n    grid-area: tabs;\n  }\n\n  :host([has-nav]) .top {\n    display: flex;\n  }\n\n  :host([has-nav]) .menu {\n    display: inline-flex;\n  }\n\n  .nav {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 2;\n    max-width: var(--drawer-width);\n    box-shadow: var(--jl-shadow-lg);\n    transform: translateX(-100%);\n    visibility: hidden;\n    transition:\n      transform var(--jl-slow) var(--jl-ease),\n      visibility 0s linear var(--jl-slow);\n  }\n\n  :host([nav-open]) .nav {\n    transform: none;\n    visibility: visible;\n    transition: transform var(--jl-slow) var(--jl-ease);\n  }\n\n  .scrim {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    display: block;\n    background: var(--jl-scrim);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--jl-slow) var(--jl-ease);\n  }\n\n  :host([nav-open]) .scrim {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .aside {\n    display: none;\n  }\n}\n";
 export { jl_app_shell_default as default };

package/dist/templates/jl-app-shell.d.ts

@@ -2,7 +2,8 @@ import { JlElement } from '../base/jl-element';
 /**
  * The frame of an app: a top bar (`header`), a sidebar (`nav`), the main area (the default slot), which scrolls
  * on its own, and an optional panel on the right (`aside`). Narrower than 960 pixels, the sidebar becomes a drawer
- * over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), and the panel hides.
+ * over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), the panel hides, and
+ * a bar along the bottom shows (`tabs`, such as a `jl-tab-bar`, whose `more` opens the drawer).
  * It takes the height of its container: give that one a height (`100dvh` for a whole page).
  */
 export declare class JlAppShell extends JlElement {
@@ -27,11 +28,16 @@ export declare class JlAppShell extends JlElement {
     /** Whether the shell is narrow: the menu button shows only then. */
     private isNarrow;
     private onMenu;
+    /** The tab bar's "more": the other places are in the drawer. */
+    private onMore;
     private onKey;
     /** The drawer as people open and close it: says so. */
     private setNavOpen;
     private renderNavOpen;
     private renderInert;
-    /** What was slotted: empty areas take no room, and a `select` from the nav (a side nav's) closes the drawer. */
+    /**
+     * What was slotted: empty areas take no room, a `select` from the nav (a side nav's) closes the drawer, and a
+     * `more` from the tabs (a tab bar's) opens it.
+     */
     private renderSlots;
 }

package/dist/templates/jl-app-shell.js

@@ -15,7 +15,8 @@ var followsLink = (event) => event.composedPath().some((node) => node instanceof
 /**
 * The frame of an app: a top bar (`header`), a sidebar (`nav`), the main area (the default slot), which scrolls
 * on its own, and an optional panel on the right (`aside`). Narrower than 960 pixels, the sidebar becomes a drawer
-* over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), and the panel hides.
+* over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), the panel hides, and
+* a bar along the bottom shows (`tabs`, such as a `jl-tab-bar`, whose `more` opens the drawer).
 * It takes the height of its container: give that one a height (`100dvh` for a whole page).
 */
 var JlAppShell = class extends JlElement {
@@ -23,7 +24,10 @@ var JlAppShell = class extends JlElement {
 	events = this.useEvents();
 	/** Whether the drawer is open, on narrow screens; wide ones always show the sidebar. */
 	navOpen = this.useChange(false, (value) => this.renderNavOpen(value), { attribute: "nav-open" });
-	_state = { navListeners: new AbortController() };
+	_state = {
+		navListeners: new AbortController(),
+		tabsListeners: new AbortController()
+	};
 	_resize = new ResizeObserver(() => this.renderInert());
 	_refs = this.useRefs((ref) => ({
 		aside: ref(".aside"),
@@ -33,7 +37,9 @@ var JlAppShell = class extends JlElement {
 		menu: ref(".menu"),
 		nav: ref(".nav"),
 		navSlot: ref("slot[name=\"nav\"]"),
-		scrim: ref(".scrim")
+		scrim: ref(".scrim"),
+		tabs: ref(".tabs"),
+		tabsSlot: ref("slot[name=\"tabs\"]")
 	}));
 	/** Opens or closes the drawer; `force` sets the state instead of flipping it. */
 	toggleNav(force) {
@@ -76,6 +82,11 @@ var JlAppShell = class extends JlElement {
 					attrs: { part: "aside" },
 					children: /* @__PURE__ */ jsx("slot", { name: "aside" })
 				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "tabs",
+					attrs: { part: "tabs" },
+					children: /* @__PURE__ */ jsx("slot", { name: "tabs" })
+				}),
 				/* @__PURE__ */ jsx("div", { class: "scrim" })
 			]
 		});
@@ -95,12 +106,14 @@ var JlAppShell = class extends JlElement {
 		for (const slot of [
 			this._refs.headerSlot,
 			this._refs.navSlot,
-			this._refs.asideSlot
+			this._refs.asideSlot,
+			this._refs.tabsSlot
 		]) this.on(slot, "slotchange", () => this.renderSlots());
 	}
 	onDisconnect() {
 		this._resize.disconnect();
 		this._state.navListeners.abort();
+		this._state.tabsListeners.abort();
 	}
 	/** Whether the shell is narrow: the menu button shows only then. */
 	isNarrow() {
@@ -111,6 +124,11 @@ var JlAppShell = class extends JlElement {
 		this.setNavOpen(opening);
 		if (opening) this._refs.nav.focus();
 	}
+	/** The tab bar's "more": the other places are in the drawer. */
+	onMore() {
+		this.setNavOpen(true);
+		this._refs.nav.focus();
+	}
 	onKey(event) {
 		if (event.key !== "Escape" || !this.navOpen.get() || !this.isNarrow()) return;
 		event.preventDefault();
@@ -132,11 +150,20 @@ var JlAppShell = class extends JlElement {
 		const covered = this.navOpen.get() && this.isNarrow();
 		this._refs.main.inert = covered;
 		this._refs.aside.inert = covered;
+		this._refs.tabs.inert = covered;
 	}
-	/** What was slotted: empty areas take no room, and a `select` from the nav (a side nav's) closes the drawer. */
+	/**
+	* What was slotted: empty areas take no room, a `select` from the nav (a side nav's) closes the drawer, and a
+	* `more` from the tabs (a tab bar's) opens it.
+	*/
 	renderSlots() {
 		this.reflect("has-header", this._refs.headerSlot.assignedElements().length > 0);
 		this.reflect("has-aside", this._refs.asideSlot.assignedElements().length > 0);
+		const tabElements = this._refs.tabsSlot.assignedElements();
+		this.reflect("has-tabs", tabElements.length > 0);
+		this._state.tabsListeners.abort();
+		this._state.tabsListeners = new AbortController();
+		for (const element of tabElements) element.addEventListener("more", () => this.onMore(), { signal: this._state.tabsListeners.signal });
 		const navElements = this._refs.navSlot.assignedElements();
 		this.reflect("has-nav", navElements.length > 0);
 		this._state.navListeners.abort();

package/dist/types/jl-chip-group.types.d.ts

@@ -0,0 +1,10 @@
+/** One choice of a chip group. */
+export type ChipGroupOption = {
+    value: string;
+    label: string;
+    /** An icon name before the label; a chosen chip without one shows a check. */
+    icon?: string;
+    /** A count or a short word after the label: how many things the choice holds. */
+    badge?: string | number;
+    disabled?: boolean;
+};

package/dist/types/jl-tab-bar.types.d.ts

@@ -0,0 +1,11 @@
+/** One place in a bottom tab bar: an icon over a short label. */
+export type TabBarItem = {
+    id: string;
+    label: string;
+    /** An icon name: the tab bar draws one over every label. */
+    icon: string;
+    /** A link to follow; without it the item is a button that only fires `select`. */
+    href?: string;
+    /** A count or a short word over the icon: `3`, `New`. Counts above 99 show as `99+`. */
+    badge?: string | number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syware/jlib",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A tree-shakeable component library on Jadis and native Web Components, organised in atomic design",
   "keywords": [
     "web-components",