@syware/jlib 0.2.0 → 0.4.0

package/dist/lib/flow.js

@@ -1,7 +1,11 @@
 // src/lib/flow.ts
-/** A node's box: fixed, so that every anchor and edge is computed without measuring the page. */
+/**
+* A node's box: fixed, so that every anchor and edge is computed without measuring the page. A node with a detail
+* line is taller.
+*/
 var FLOW_NODE = {
 	height: 64,
+	heightWithDetail: 96,
 	width: 240
 };
 var FLOW_ZOOM = {
@@ -20,6 +24,7 @@ var REVEAL_MARGIN = 48;
 var ROW_GAP = 72;
 var COLUMN_GAP = 32;
 var portsOf = (node) => node.ports ?? [DEFAULT_PORT];
+var nodeHeight = (node) => node.detail ? FLOW_NODE.heightWithDetail : FLOW_NODE.height;
 /** The exit an edge leaves by: its own, or its node's first. */
 var portOfEdge = (node, edge) => edge.port ?? portsOf(node)[0]?.id ?? "";
 var nodeById = (graph, id) => graph.nodes.find((node) => node.id === id);
@@ -36,7 +41,7 @@ function outputAnchor(node, portId) {
 	if (index < 0) return;
 	return {
 		x: node.position.x + portX(index, ports.length),
-		y: node.position.y + FLOW_NODE.height + PORT_DROP
+		y: node.position.y + nodeHeight(node) + PORT_DROP
 	};
 }
 var inputAnchor = (node) => ({
@@ -152,7 +157,18 @@ function edgeEnds(graph, edge) {
 		tone
 	};
 }
-var isInside = (point, node) => point.x >= node.position.x && point.x <= node.position.x + FLOW_NODE.width && point.y >= node.position.y && point.y <= node.position.y + FLOW_NODE.height;
+var isInside = (point, node) => point.x >= node.position.x && point.x <= node.position.x + FLOW_NODE.width && point.y >= node.position.y && point.y <= node.position.y + nodeHeight(node);
+/** A run went this way: its node left by the edge's exit, and the node it leads to ran too. */
+function isEdgeTaken(graph, edge) {
+	const source = nodeById(graph, edge.from);
+	const target = nodeById(graph, edge.to);
+	return source?.taken !== void 0 && source.taken === portOfEdge(source, edge) && target?.status !== void 0;
+}
+/** The position of a node centred on a point: where something dropped there lands. */
+var centeredAt = (point) => snap({
+	x: point.x - FLOW_NODE.width / 2,
+	y: point.y - FLOW_NODE.height / 2
+});
 /** The node under a point, other than `except`. */
 var nodeAt = (graph, point, except = "") => graph.nodes.find((node) => node.id !== except && isInside(point, node));
 var isPortFree = (graph, node, portId) => !graph.edges.some((edge) => edge.from === node.id && portOfEdge(node, edge) === portId);
@@ -188,8 +204,8 @@ var removeEdge = (graph, id) => ({
 	...graph,
 	edges: graph.edges.filter((edge) => edge.id !== id)
 });
-var ROW = FLOW_NODE.height + ROW_GAP;
 var COLUMN = FLOW_NODE.width + COLUMN_GAP;
+var rowOfFlow = (graph) => Math.max(FLOW_NODE.height, ...graph.nodes.map(nodeHeight)) + ROW_GAP;
 /** How far across a node hangs from its parent's exit: the exits share the row out, side by side, around it. */
 function portShift(node, portId) {
 	const ports = portsOf(node);
@@ -204,7 +220,7 @@ function positionAfter(graph, from, portId) {
 	};
 	return snap({
 		x: source.position.x + portShift(source, portId),
-		y: source.position.y + ROW
+		y: source.position.y + nodeHeight(source) + ROW_GAP
 	});
 }
 /** The edges that close a loop, found walking from the starts: the layout leaves them out, or a loop has no top. */
@@ -267,6 +283,7 @@ function layoutFlow(graph) {
 	const loops = loopEdges(graph);
 	const edges = graph.edges.filter((edge) => !loops.has(edge.id) && ids.has(edge.from) && ids.has(edge.to));
 	const rows = rowsOf(graph, edges);
+	const row = rowOfFlow(graph);
 	const placed = /* @__PURE__ */ new Map();
 	for (const row of [...new Set(rows.values())].sort((a, b) => a - b)) placeRow(graph.nodes.filter((node) => rows.get(node.id) === row).map((node) => ({
 		id: node.id,
@@ -278,7 +295,7 @@ function layoutFlow(graph) {
 			...node,
 			position: snap({
 				x: placed.get(node.id) ?? 0,
-				y: (rows.get(node.id) ?? 0) * ROW
+				y: (rows.get(node.id) ?? 0) * row
 			})
 		}))
 	};
@@ -309,7 +326,7 @@ function fitView(nodes, width, height) {
 	const left = Math.min(...nodes.map((node) => node.position.x));
 	const top = Math.min(...nodes.map((node) => node.position.y));
 	const right = Math.max(...nodes.map((node) => node.position.x + FLOW_NODE.width));
-	const bottom = Math.max(...nodes.map((node) => node.position.y + FLOW_NODE.height + PORT_DROP));
+	const bottom = Math.max(...nodes.map((node) => node.position.y + nodeHeight(node) + PORT_DROP));
 	const zoom = clampZoom(Math.min(1, (width - 96) / (right - left), (height - 96) / (bottom - top)));
 	return {
 		x: width / 2 - (left + right) / 2 * zoom,
@@ -329,8 +346,8 @@ function revealIn(viewport, node, width, height) {
 	const top = viewport.y + node.position.y * zoom;
 	return {
 		x: viewport.x + shiftInto(left, left + FLOW_NODE.width * zoom, width),
-		y: viewport.y + shiftInto(top, top + (FLOW_NODE.height + PORT_DROP) * zoom, height),
+		y: viewport.y + shiftInto(top, top + (nodeHeight(node) + PORT_DROP) * zoom, height),
 		zoom
 	};
 }
-export { DEFAULT_PORT, FLOW_NODE, FLOW_ZOOM, connect, edgeEnds, edgeMidpoint, edgePath, edgeRoute, fitView, inputAnchor, isPortFree, layoutFlow, moveNode, nodeAt, outputAnchor, portOfEdge, portX, portsOf, positionAfter, removeEdge, removeNode, revealIn, roundedPath, snap, toWorld, zoomAt };
+export { DEFAULT_PORT, FLOW_NODE, FLOW_ZOOM, centeredAt, connect, edgeEnds, edgeMidpoint, edgePath, edgeRoute, fitView, inputAnchor, isEdgeTaken, isPortFree, layoutFlow, moveNode, nodeAt, nodeHeight, outputAnchor, portOfEdge, portX, portsOf, positionAfter, removeEdge, removeNode, revealIn, roundedPath, snap, toWorld, zoomAt };

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-accordion-item.css_raw.js

@@ -1,3 +1,3 @@
 // src/molecules/jl-accordion-item.css?raw
-var jl_accordion_item_default = ":host {\n  display: block;\n  border-bottom: 1px solid var(--jl-line);\n  /* Lets the content's height animate from 0 to auto. */\n  interpolate-size: allow-keywords;\n  --pad-x: 0px;\n}\n\nsummary {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 48px;\n  padding: 12px var(--pad-x);\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  line-height: 1.4;\n  list-style: none;\n  cursor: pointer;\n  user-select: none;\n}\n\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n.heading {\n  flex: 1;\n  min-width: 0;\n}\n\n.icon {\n  color: var(--jl-muted);\n}\n\n.chevron {\n  color: var(--jl-faint);\n  transition: rotate var(--jl-slow) var(--jl-ease);\n}\n\nsummary:hover .chevron {\n  color: var(--jl-text);\n}\n\ndetails[open] .chevron {\n  rotate: 180deg;\n}\n\nsummary:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n\n/*\n * The content box is a pseudo-element BASE_STYLES' \"* { box-sizing: inherit }\" does not reach: without this, what\n * it holds (and the slotted fields, which inherit through it) would fall back to content-box.\n */\ndetails::details-content {\n  box-sizing: inherit;\n  block-size: 0;\n  overflow: clip;\n  transition:\n    block-size var(--jl-slow) var(--jl-ease),\n    content-visibility var(--jl-slow) allow-discrete;\n}\n\ndetails[open]::details-content {\n  block-size: auto;\n}\n\n.content {\n  padding: 0 var(--pad-x) 16px;\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n  line-height: 1.6;\n}\n\n:host([disabled]) summary {\n  color: var(--jl-faint);\n  cursor: not-allowed;\n}\n\n:host([disabled]) summary:hover .chevron {\n  color: var(--jl-faint);\n}\n";
+var jl_accordion_item_default = ":host {\n  display: block;\n  border-bottom: 1px solid var(--jl-line);\n  /* Lets the content's height animate from 0 to auto. */\n  interpolate-size: allow-keywords;\n  --pad-x: 0px;\n}\n\nsummary {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 48px;\n  padding: 12px var(--pad-x);\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  line-height: 1.4;\n  list-style: none;\n  cursor: pointer;\n  user-select: none;\n}\n\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n.titles {\n  display: grid;\n  flex: 1;\n  min-width: 0;\n}\n\n.description {\n  overflow: hidden;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  font-weight: 400;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.icon {\n  color: var(--jl-muted);\n}\n\n.chevron {\n  color: var(--jl-faint);\n  transition: rotate var(--jl-slow) var(--jl-ease);\n}\n\nsummary:hover .chevron {\n  color: var(--jl-text);\n}\n\ndetails[open] .chevron {\n  rotate: 180deg;\n}\n\nsummary:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n\n/*\n * The content box is a pseudo-element BASE_STYLES' \"* { box-sizing: inherit }\" does not reach: without this, what\n * it holds (and the slotted fields, which inherit through it) would fall back to content-box.\n */\ndetails::details-content {\n  box-sizing: inherit;\n  block-size: 0;\n  overflow: clip;\n  transition:\n    block-size var(--jl-slow) var(--jl-ease),\n    content-visibility var(--jl-slow) allow-discrete;\n}\n\ndetails[open]::details-content {\n  block-size: auto;\n}\n\n.content {\n  padding: 0 var(--pad-x) 16px;\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n  line-height: 1.6;\n}\n\n:host([disabled]) summary {\n  color: var(--jl-faint);\n  cursor: not-allowed;\n}\n\n:host([disabled]) summary:hover .chevron {\n  color: var(--jl-faint);\n}\n";
 export { jl_accordion_item_default as default };

package/dist/molecules/jl-accordion-item.d.ts

@@ -12,11 +12,16 @@ export declare class JlAccordionItem extends JlElement {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** A quieter line under the heading, shown open or closed: what the section holds ("3 fields", "2 pages"). */
+    readonly description: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     readonly open: Readonly<Readonly<{
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
-    /** An icon before the heading. */
+    /** An icon before the heading; the `icon` slot takes a richer one instead. */
     readonly icon: Readonly<Readonly<{
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;

package/dist/molecules/jl-accordion-item.js

@@ -19,8 +19,13 @@ var JlAccordionItem = class extends JlElement {
 	heading = this.useChange("", (value) => {
 		this._refs.heading.textContent = value;
 	}, { attribute: "heading" });
+	/** A quieter line under the heading, shown open or closed: what the section holds ("3 fields", "2 pages"). */
+	description = this.useChange("", (value) => {
+		this._refs.description.textContent = value;
+		this._refs.description.hidden = value === "";
+	}, { attribute: "description" });
 	open = this.useChange(false, (value) => this.renderOpen(value), { attribute: "open" });
-	/** An icon before the heading. */
+	/** An icon before the heading; the `icon` slot takes a richer one instead. */
 	icon = this.useChange("", (name) => {
 		this._refs.icon.name.set(name);
 		this._refs.icon.hidden = name === "";
@@ -32,6 +37,7 @@ var JlAccordionItem = class extends JlElement {
 		this._refs.summary.tabIndex = value ? -1 : 0;
 	}, { attribute: "disabled" });
 	_refs = this.useRefs((ref) => ({
+		description: ref(".description"),
 		details: ref("details"),
 		heading: ref(".heading"),
 		icon: ref(".icon"),
@@ -41,12 +47,21 @@ var JlAccordionItem = class extends JlElement {
 		return /* @__PURE__ */ jsxs("details", {
 			attrs: { part: "base" },
 			children: [/* @__PURE__ */ jsxs("summary", { children: [
-				/* @__PURE__ */ jsx(JlIcon, {
-					class: "icon",
-					size: ICON_SIZE,
-					hidden: true
+				/* @__PURE__ */ jsx("slot", {
+					name: "icon",
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						class: "icon",
+						size: ICON_SIZE,
+						hidden: true
+					})
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					class: "titles",
+					children: [/* @__PURE__ */ jsx("span", { class: "heading" }), /* @__PURE__ */ jsx("span", {
+						class: "description",
+						hidden: true
+					})]
 				}),
-				/* @__PURE__ */ jsx("span", { class: "heading" }),
 				/* @__PURE__ */ jsx(JlIcon, {
 					class: "chevron",
 					name: "chevron-down",

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;
+}