@syware/jlib 0.1.3 → 0.3.0

package/README.md

@@ -97,11 +97,6 @@ component. Conventions for contributors are in [CLAUDE.md](CLAUDE.md).
 
 ## Releasing
 
-Pushing a version tag releases the package: the `Publish to npm` workflow checks and builds it, stages it on npm
-through trusted publishing (no token; the package gets a provenance statement), then creates the GitHub release with
-the package attached. The staged version becomes public once a maintainer approves it with their two-factor
-authentication.
-
 ```bash
 npm version patch
 ```
@@ -110,18 +105,9 @@ npm version patch
 git push --follow-tags
 ```
 
-`npm version` (or `minor`, `major`) bumps package.json and the lockfile, commits and tags `vX.Y.Z`. The workflow
-refuses a tag that is not the version in package.json.
-
-When the run is done (its summary page shows what was staged), approve the version:
-
-```bash
-npm stage list @syware/jlib
-```
-
-```bash
-npm stage approve <stage-id>
-```
+The tag stages the version on npm and creates the GitHub release; a maintainer then approves it with
+`npm stage approve`. Every step, pre-releases and what to do when something fails: [RELEASING.md](RELEASING.md).
+What changed in each version: [CHANGELOG.md](CHANGELOG.md).
 
 ## Made by SyWare
 

package/dist/all.js

@@ -1,4 +1,4 @@
-import { TOKEN_STYLES } from "./styles/shared.js";
+import { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES, TOKEN_STYLES } from "./styles/shared.js";
 import { adoptTokens } from "./lib/tokens.js";
 import { JlElement } from "./base/jl-element.js";
 import { JlFormControl } from "./base/jl-form-control.js";
@@ -7,7 +7,7 @@ import { define } from "./lib/define.js";
 import { PLACEMENTS, computePosition, followAnchor, placeFloating } from "./lib/floating.js";
 import { COMMON_ICONS } from "./lib/icon-set.js";
 import { hasIcon, iconElement, iconNames, registerIcons } from "./lib/icons.js";
-import { CONTROL_SIZES, TONES, TONE_ICONS } from "./lib/options.js";
+import { CONTROL_SIZES, TONES, TONE_ICONS, TONE_ICON_FILLED } from "./lib/options.js";
 import { JlIcon } from "./atoms/jl-icon.js";
 import { AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, JlAvatar } from "./atoms/jl-avatar.js";
 import { JlBadge } from "./atoms/jl-badge.js";
@@ -61,6 +61,7 @@ import { JlCommandPalette } from "./organisms/jl-command-palette.js";
 import { DIALOG_SIZES, JlDialog } from "./organisms/jl-dialog.js";
 import { CONFIRM_TONES, JlConfirm, confirmDialog } from "./organisms/jl-confirm.js";
 import { DRAWER_PLACEMENTS, DRAWER_SIZES, JlDrawer } from "./organisms/jl-drawer.js";
+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";
@@ -71,5 +72,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, 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, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, 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, 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, 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, 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 };

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

@@ -1,3 +1,3 @@
 // src/atoms/jl-icon.css?raw
-var jl_icon_default = ":host {\n  display: inline-flex;\n  flex: none;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n.icon {\n  display: inline-flex;\n}\n";
+var jl_icon_default = ":host {\n  --cutout: var(--jl-surface);\n  display: inline-flex;\n  flex: none;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n.icon {\n  display: inline-flex;\n}\n\n/* Filled: lucide draws the shape around a sign first (the circle of circle-check, the triangle of triangle-alert).\n   It takes the colour, and the sign takes the background's, as if cut out of it. */\n:host([filled]) svg > :first-child {\n  fill: currentColor;\n}\n\n:host([filled]) svg > :not(:first-child) {\n  stroke: var(--cutout);\n}\n";
 export { jl_icon_default as default };

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

@@ -1,7 +1,8 @@
 import { JlElement } from '../base/jl-element';
 /**
  * A lucide icon by name: `<jl-icon name="search">`. Decorative unless it has a `label`, which screen readers
- * read instead. More icons: `registerIcons({ rocket: Rocket })`.
+ * read instead. More icons: `registerIcons({ rocket: Rocket })`. `filled` draws a sign in a shape (`circle-check`,
+ * `triangle-alert`) as a solid badge.
  */
 export declare class JlIcon extends JlElement {
     static readonly selector = "jl-icon";
@@ -17,6 +18,11 @@ export declare class JlIcon extends JlElement {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** The icon's first shape (the circle or triangle around a sign) in solid colour, the sign cut out of it. */
+    readonly filled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
     private readonly _refs;
     templateHtml(): Node;
     templateCss(): string;

package/dist/atoms/jl-icon.js

@@ -8,13 +8,16 @@ import { jsx } from "@jadis/core/jsx-runtime";
 var DEFAULT_SIZE = 16;
 /**
 * A lucide icon by name: `<jl-icon name="search">`. Decorative unless it has a `label`, which screen readers
-* read instead. More icons: `registerIcons({ rocket: Rocket })`.
+* read instead. More icons: `registerIcons({ rocket: Rocket })`. `filled` draws a sign in a shape (`circle-check`,
+* `triangle-alert`) as a solid badge.
 */
 var JlIcon = class extends JlElement {
 	static selector = "jl-icon";
 	name = this.useChange("", () => this.draw(), { attribute: "name" });
 	size = this.useChange(DEFAULT_SIZE, () => this.draw(), { attribute: "size" });
 	label = this.useChange("", (value) => this.setAccessibleName(value), { attribute: "label" });
+	/** The icon's first shape (the circle or triangle around a sign) in solid colour, the sign cut out of it. */
+	filled = this.useChange(false, (value) => this.reflect("filled", value), { attribute: "filled" });
 	_refs = this.useRefs((ref) => ({ icon: ref(".icon") }));
 	templateHtml() {
 		return /* @__PURE__ */ jsx("span", { class: "icon" });

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

@@ -11,6 +11,7 @@ export declare class JlInput extends JlFormControl {
     readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
         input: string;
         change: string;
+        enter: string;
     }>>;
     readonly value: Readonly<Readonly<{
         get(): string;

package/dist/atoms/jl-input.js

@@ -33,6 +33,7 @@ var PASSWORD = "password";
 var REVEALED = "text";
 var ICON_SIZE = 16;
 var ACTION_ICON_SIZE = 14;
+var ENTER = "Enter";
 /**
 * A single-line text field that takes part in forms. `value` is the text; `input` fires as people type and
 * `change` when they commit. Slots `start` and `end` hold adornments such as a unit or a prefix.
@@ -137,6 +138,7 @@ var JlInput = class extends JlFormControl {
 			this.events.emit("input", native.value);
 		});
 		this.on(native, "change", () => this.events.emit("change", native.value));
+		this.on(native, "keydown", (event) => event.key === ENTER && this.events.emit("enter", native.value));
 		this.on(this._refs.clear, "click", () => this.clearValue());
 		this.on(this._refs.reveal, "click", () => this.toggleReveal());
 	}

package/dist/atoms/jl-progress-ring.js

@@ -1,23 +1,18 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
+import { svgElement } from "../lib/dom.js";
 import { optionalNumber, percentLabel, percentOf, progressRatio, ringGeometry } from "../lib/progress.js";
 import { PROGRESS_TONES } from "./jl-progress.js";
 import jl_progress_ring_default from "./jl-progress-ring.css_raw.js";
 import { css } from "@jadis/core";
 import { jsx } from "@jadis/core/jsx-runtime";
 // src/atoms/jl-progress-ring.tsx
-var SVG_NS = "http://www.w3.org/2000/svg";
 var DEFAULT_MAX = 100;
 var DEFAULT_SIZE = 40;
 var DEFAULT_THICKNESS = 4;
 var PATH_LENGTH = 100;
 var DEFAULT_NAME = "Progress";
-function svgElement(tag, attributes) {
-	const element = document.createElementNS(SVG_NS, tag);
-	for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, value);
-	return element;
-}
 /**
 * How far a task has gone, as a ring: `value` out of `max`, the percentage in its centre with `show-value`.
 * Without a value, the ring turns: the work has no known end. Fits in buttons, cards and table cells.

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

@@ -15,6 +15,7 @@ export declare class JlSelect extends JlFormControl {
         get(): SelectOption[];
         set(setter: SelectOption[] | ((prevState: SelectOption[]) => SelectOption[])): void;
     }>>;
+    /** The chosen value. One that no option has is kept, as an option of its own, rather than replaced. */
     readonly value: Readonly<Readonly<{
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
@@ -60,6 +61,11 @@ export declare class JlSelect extends JlFormControl {
     private optionNodes;
     private placeholderNodes;
     private renderOptions;
+    /**
+     * A value no option has (a choice since removed, options still loading) shows as an option of its own, first, so
+     * the field shows what is saved and the form keeps it, rather than another choice.
+     */
+    private keepUnknownValue;
     /** Shows the chosen option; the form gets what is shown. */
     private renderValue;
     /**

package/dist/atoms/jl-select.js

@@ -40,7 +40,8 @@ var JlSelect = class extends JlFormControl {
 		attribute: "options",
 		parse: jsonOf([])
 	});
-	value = this.useChange(NO_VALUE, () => this.renderValue(), { attribute: "value" });
+	/** The chosen value. One that no option has is kept, as an option of its own, rather than replaced. */
+	value = this.useChange(NO_VALUE, () => this.renderOptions(), { attribute: "value" });
 	/** Shown while nothing is chosen; it cannot be picked back from the list. */
 	placeholder = this.useChange("", () => this.renderOptions(), { attribute: "placeholder" });
 	size = this.useChange("md", (value) => this.reflect("size", value), {
@@ -120,8 +121,24 @@ var JlSelect = class extends JlFormControl {
 	}
 	renderOptions() {
 		this._refs.native.replaceChildren(...this.placeholderNodes(), ...this.optionNodes());
+		this.keepUnknownValue();
 		this.renderValue();
 	}
+	/**
+	* A value no option has (a choice since removed, options still loading) shows as an option of its own, first, so
+	* the field shows what is saved and the form keeps it, rather than another choice.
+	*/
+	keepUnknownValue() {
+		const native = this._refs.native;
+		const value = this.value.get();
+		const known = [...native.options].some((option) => option.value === value);
+		if (value === NO_VALUE || known) return;
+		const afterPlaceholder = this.placeholder.get() === "" ? 0 : 1;
+		native.add(/* @__PURE__ */ jsx("option", {
+			value,
+			children: value
+		}), afterPlaceholder);
+	}
 	/** Shows the chosen option; the form gets what is shown. */
 	renderValue() {
 		const native = this._refs.native;

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

@@ -24,6 +24,14 @@ export declare class JlSwitch extends JlFormControl {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /**
+     * Keeps the label for screen readers only, for a switch whose meaning the page already shows beside it (an "On"
+     * or "Off" next to the track).
+     */
+    readonly hideLabel: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
     readonly size: Readonly<Readonly<{
         get(): SwitchSize;
         set(setter: ((prevState: SwitchSize) => SwitchSize) | SwitchSize): void;
@@ -52,6 +60,9 @@ export declare class JlSwitch extends JlFormControl {
     private commit;
     private renderChecked;
     private renderFormValue;
-    /** Hides the text column when there is nothing to show, so a lone switch has no gap beside it. */
+    /**
+     * Hides the text column when there is nothing to show, so a lone switch has no gap beside it; a hidden label stays
+     * for screen readers, out of the layout.
+     */
     private renderText;
 }

package/dist/atoms/jl-switch.js

@@ -7,6 +7,7 @@ import { jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/atoms/jl-switch.tsx
 var SWITCH_SIZES = ["md", "sm"];
 var DEFAULT_VALUE = "on";
+var SCREEN_READER_ONLY = "sr-only";
 /**
 * An on/off setting that applies at once, such as "Dark mode" or "Email me". `checked` is the state; the form gets
 * `value` while it is on. For a choice confirmed later with a button, prefer a checkbox.
@@ -27,6 +28,11 @@ var JlSwitch = class extends JlFormControl {
 		this._refs.description.hidden = value === "";
 		this.renderText();
 	}, { attribute: "description" });
+	/**
+	* Keeps the label for screen readers only, for a switch whose meaning the page already shows beside it (an "On"
+	* or "Off" next to the track).
+	*/
+	hideLabel = this.useChange(false, () => this.renderText(), { attribute: "hide-label" });
 	size = this.useChange("md", (value) => this.reflect("size", value), {
 		attribute: "size",
 		parse: oneOf(SWITCH_SIZES, "md")
@@ -115,10 +121,14 @@ var JlSwitch = class extends JlFormControl {
 	renderFormValue() {
 		this.internals.setFormValue(this.checked.get() ? this.value.get() : null);
 	}
-	/** Hides the text column when there is nothing to show, so a lone switch has no gap beside it. */
+	/**
+	* Hides the text column when there is nothing to show, so a lone switch has no gap beside it; a hidden label stays
+	* for screen readers, out of the layout.
+	*/
 	renderText() {
 		const slotted = this._refs.slot.assignedNodes().some((node) => node instanceof Element || node.textContent?.trim() !== "");
 		this._refs.text.hidden = this.label.get() === "" && this.description.get() === "" && !slotted;
+		this._refs.text.classList.toggle(SCREEN_READER_ONLY, this.hideLabel.get());
 	}
 };
 JlSwitch.register();

package/dist/index.d.ts

@@ -5,9 +5,9 @@ export { define } from './lib/define';
 export { computePosition, followAnchor, PLACEMENTS, placeFloating } from './lib/floating';
 export { COMMON_ICONS } from './lib/icon-set';
 export { hasIcon, iconElement, iconNames, registerIcons } from './lib/icons';
-export { CONTROL_SIZES, TONE_ICONS, TONES } from './lib/options';
+export { CONTROL_SIZES, TONE_ICON_FILLED, TONE_ICONS, TONES } from './lib/options';
 export { adoptTokens } from './lib/tokens';
-export { TOKEN_STYLES } from './styles/shared';
+export { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES, TOKEN_STYLES } from './styles/shared';
 export type * from './types/calendar.types';
 export type * from './types/files.types';
 export type * from './types/floating.types';
@@ -28,6 +28,7 @@ export type * from './types/jl-divider.types';
 export type * from './types/jl-drawer.types';
 export type * from './types/jl-empty.types';
 export type * from './types/jl-field.types';
+export type * from './types/jl-flow.types';
 export type * from './types/jl-input.types';
 export type * from './types/jl-link.types';
 export type * from './types/jl-menu.types';
@@ -109,6 +110,7 @@ export * from './organisms/jl-command-palette';
 export * from './organisms/jl-confirm';
 export * from './organisms/jl-dialog';
 export * from './organisms/jl-drawer';
+export * from './organisms/jl-flow';
 export * from './organisms/jl-navbar';
 export * from './organisms/jl-page-header';
 export * from './organisms/jl-side-nav';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { TOKEN_STYLES } from "./styles/shared.js";
+import { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES, TOKEN_STYLES } from "./styles/shared.js";
 import { adoptTokens } from "./lib/tokens.js";
 import { JlElement } from "./base/jl-element.js";
 import { JlFormControl } from "./base/jl-form-control.js";
@@ -7,7 +7,7 @@ import { define } from "./lib/define.js";
 import { PLACEMENTS, computePosition, followAnchor, placeFloating } from "./lib/floating.js";
 import { COMMON_ICONS } from "./lib/icon-set.js";
 import { hasIcon, iconElement, iconNames, registerIcons } from "./lib/icons.js";
-import { CONTROL_SIZES, TONES, TONE_ICONS } from "./lib/options.js";
+import { CONTROL_SIZES, TONES, TONE_ICONS, TONE_ICON_FILLED } from "./lib/options.js";
 import { JlIcon } from "./atoms/jl-icon.js";
 import { AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, JlAvatar } from "./atoms/jl-avatar.js";
 import { JlBadge } from "./atoms/jl-badge.js";
@@ -61,6 +61,7 @@ import { JlCommandPalette } from "./organisms/jl-command-palette.js";
 import { DIALOG_SIZES, JlDialog } from "./organisms/jl-dialog.js";
 import { CONFIRM_TONES, JlConfirm, confirmDialog } from "./organisms/jl-confirm.js";
 import { DRAWER_PLACEMENTS, DRAWER_SIZES, JlDrawer } from "./organisms/jl-drawer.js";
+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";
@@ -69,4 +70,4 @@ 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, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, 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, 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, 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, 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 };

package/dist/lib/calendar.d.ts

@@ -1,4 +1,4 @@
-import type { CalendarDate, Weekday, WeekdayWidth } from '../types/calendar.types';
+import type { CalendarDate, DatePart, Weekday, WeekdayWidth } from '../types/calendar.types';
 /** A month grid always has six weeks, so the calendar keeps its height from one month to the next. */
 export declare const WEEKS_PER_GRID = 6;
 export declare const isLeapYear: (year: number) => boolean;
@@ -46,3 +46,17 @@ export declare const formatDate: (date: CalendarDate, locale: string | undefined
 export declare const formatMonthTitle: (year: number, month: number, locale: string | undefined) => string;
 /** The names of the weekdays, in the order a week shows them from its first day. */
 export declare const weekdayNames: (locale: string | undefined, firstDay: Weekday, width: WeekdayWidth) => string[];
+/** How a date field writes a date: in digits, in the locale's order, the year in full (`25.10.2026`, `10/25/2026`). */
+export declare const NUMERIC_DATE: Intl.DateTimeFormatOptions;
+/** The order a locale writes the day, the month and the year in: `['day', 'month', 'year']` in French. */
+export declare const dateOrder: (locale: string | undefined) => DatePart[];
+/** How a date is typed in a locale, for a placeholder: `dd.mm.yyyy`, `mm/dd/yyyy`. */
+export declare const datePattern: (locale: string | undefined) => string;
+/** Whether text could be part of a typed date: digits and separators, no letters. */
+export declare const isDateText: (text: string) => boolean;
+/**
+ * A date as people type it in a field: in the locale's order with any separators (`25.10.2026`, `25/10/2026`), its
+ * digits alone (`25102026`), or year first (`2026-10-25`, `2026/10/25`). Null for anything else, including days that
+ * do not exist.
+ */
+export declare function parseTypedDate(text: string, order: readonly DatePart[]): CalendarDate | null;

package/dist/lib/calendar.js

@@ -163,4 +163,75 @@ var formatMonthTitle = (year, month, locale) => formatDate({
 });
 /** The names of the weekdays, in the order a week shows them from its first day. */
 var weekdayNames = (locale, firstDay, width) => weekdayOrder(firstDay).map((weekday) => formatDate(addDays(A_SUNDAY, weekday), locale, { weekday: width }));
-export { addDays, addMonths, addYears, calendarDateOf, clampDate, compareDates, dateAfterKey, dateFormatter, dayOfWeek, daysInMonth, endOfWeek, formatDate, formatMonthTitle, isLeapYear, isSameDate, isSameMonth, isWithin, monthGrid, monthHasDaysWithin, parseIsoDate, startOfWeek, toIsoDate, weekdayNames, weekdayOrder };
+/** How a date field writes a date: in digits, in the locale's order, the year in full (`25.10.2026`, `10/25/2026`). */
+var NUMERIC_DATE = {
+	day: "2-digit",
+	month: "2-digit",
+	numberingSystem: "latn",
+	year: "numeric"
+};
+var DATE_PARTS = [
+	"day",
+	"month",
+	"year"
+];
+var ISO_ORDER = [
+	"year",
+	"month",
+	"day"
+];
+var PATTERN_LETTERS = {
+	day: "dd",
+	month: "mm",
+	year: "yyyy"
+};
+var PART_DIGITS = {
+	day: 2,
+	month: 2,
+	year: 4
+};
+var DATE_TEXT = /^[\d\s./,-]*$/;
+var NOT_DIGITS = /\D+/;
+var isDatePart = (type) => DATE_PARTS.some((part) => part === type);
+/** A date written in digits in a locale, cut in its parts: `25`, `.`, `10`, `.`, `2026`. */
+var numericParts = (locale) => new Intl.DateTimeFormat(locale, {
+	...NUMERIC_DATE,
+	timeZone: UTC
+}).formatToParts(new Date(utcTime(A_SUNDAY)));
+/** The order a locale writes the day, the month and the year in: `['day', 'month', 'year']` in French. */
+var dateOrder = (locale) => numericParts(locale).flatMap((part) => isDatePart(part.type) ? [part.type] : []);
+/** How a date is typed in a locale, for a placeholder: `dd.mm.yyyy`, `mm/dd/yyyy`. */
+var datePattern = (locale) => numericParts(locale).map((part) => isDatePart(part.type) ? PATTERN_LETTERS[part.type] : part.value).join("");
+/** Whether text could be part of a typed date: digits and separators, no letters. */
+var isDateText = (text) => DATE_TEXT.test(text);
+/** Digits typed without separators, cut in the locale's parts; null when there are not as many as a date has. */
+function splitDigits(digits, order) {
+	const lengths = order.map((part) => PART_DIGITS[part]);
+	if (digits.length !== lengths.reduce((sum, length) => sum + length, 0)) return null;
+	return lengths.map((length, index) => {
+		const start = lengths.slice(0, index).reduce((sum, before) => sum + before, 0);
+		return digits.slice(start, start + length);
+	});
+}
+/** The typed groups of digits, as many as the date has parts; null otherwise. */
+function typedGroups(text, order) {
+	const groups = text.split(NOT_DIGITS).filter((group) => group !== "");
+	const parts = groups.length === 1 ? splitDigits(groups[0] ?? "", order) : groups;
+	return parts !== null && parts.length === order.length ? parts : null;
+}
+/**
+* A date as people type it in a field: in the locale's order with any separators (`25.10.2026`, `25/10/2026`), its
+* digits alone (`25102026`), or year first (`2026-10-25`, `2026/10/25`). Null for anything else, including days that
+* do not exist.
+*/
+function parseTypedDate(text, order) {
+	const trimmed = text.trim();
+	const groups = isDateText(trimmed) ? typedGroups(trimmed, order) : null;
+	if (groups === null) return null;
+	const used = groups[0]?.length === YEAR_DIGITS ? ISO_ORDER : order;
+	const part = (name) => groups[used.indexOf(name)] ?? "";
+	if (!DATE_PARTS.every((name) => name === "year" ? part(name).length === PART_DIGITS.year : part(name).length <= PART_DIGITS[name])) return null;
+	const digits = (name) => pad(Number(part(name)), PART_DIGITS[name]);
+	return parseIsoDate(`${digits("year")}-${digits("month")}-${digits("day")}`);
+}
+export { NUMERIC_DATE, addDays, addMonths, addYears, calendarDateOf, clampDate, compareDates, dateAfterKey, dateFormatter, dateOrder, datePattern, dayOfWeek, daysInMonth, endOfWeek, formatDate, formatMonthTitle, isDateText, isLeapYear, isSameDate, isSameMonth, isWithin, monthGrid, monthHasDaysWithin, parseIsoDate, parseTypedDate, startOfWeek, toIsoDate, weekdayNames, weekdayOrder };

package/dist/lib/dom.d.ts

@@ -2,3 +2,5 @@
 export declare function setOrRemove(element: Element, name: string, value: string): void;
 /** A unique id within the page, for wiring `aria-controls`, `aria-labelledby` and the like inside a shadow root. */
 export declare function uniqueId(prefix: string): string;
+/** An SVG element with its attributes: JSX makes HTML elements only. */
+export declare function svgElement<Tag extends keyof SVGElementTagNameMap>(tag: Tag, attributes: Record<string, string>): SVGElementTagNameMap[Tag];

package/dist/lib/dom.js

@@ -13,4 +13,11 @@ function uniqueId(prefix) {
 	sequence.next += 1;
 	return `${prefix}-${sequence.next}`;
 }
-export { setOrRemove, uniqueId };
+var SVG_NS = "http://www.w3.org/2000/svg";
+/** An SVG element with its attributes: JSX makes HTML elements only. */
+function svgElement(tag, attributes) {
+	const element = document.createElementNS(SVG_NS, tag);
+	for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, value);
+	return element;
+}
+export { setOrRemove, svgElement, uniqueId };

package/dist/lib/flow.d.ts

@@ -0,0 +1,70 @@
+import type { FlowEdge, FlowEdgeEnds, FlowGraph, FlowNode, FlowPoint, FlowPort, FlowViewport } from '../types/jl-flow.types';
+/**
+ * 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.
+ */
+export declare const FLOW_NODE: {
+    readonly height: 64;
+    readonly heightWithDetail: 96;
+    readonly width: 240;
+};
+export declare const FLOW_ZOOM: {
+    readonly max: 2;
+    readonly min: 0.25;
+    readonly step: 1.2;
+};
+/** The exit of a node that names none. */
+export declare const DEFAULT_PORT: FlowPort;
+export declare const portsOf: (node: FlowNode) => FlowPort[];
+export declare const nodeHeight: (node: FlowNode) => number;
+/** The exit an edge leaves by: its own, or its node's first. */
+export declare const portOfEdge: (node: FlowNode, edge: FlowEdge) => string;
+export declare const snap: (point: FlowPoint) => FlowPoint;
+/** Where a node's n-th exit sits along its bottom edge: the edge cut in equal parts, each exit in the middle of one. */
+export declare const portX: (index: number, count: number) => number;
+export declare function outputAnchor(node: FlowNode, portId: string): FlowPoint | undefined;
+export declare const inputAnchor: (node: FlowNode) => FlowPoint;
+/**
+ * The corners an edge goes through, in straight runs: down from the exit, across halfway, down into the node. An
+ * edge that goes back up turns around the side, clear of the nodes.
+ */
+export declare function edgeRoute(from: FlowPoint, to: FlowPoint): FlowPoint[];
+/** An SVG path through the points, its corners rounded. */
+export declare function roundedPath(points: readonly FlowPoint[], radius?: number): string;
+export declare const edgePath: (from: FlowPoint, to: FlowPoint) => string;
+/** The point halfway along `edgePath(from, to)`. */
+export declare const edgeMidpoint: (from: FlowPoint, to: FlowPoint) => FlowPoint;
+/** Where an edge starts and ends, or nothing when one of its ends is gone. */
+export declare function edgeEnds(graph: FlowGraph, edge: FlowEdge): FlowEdgeEnds | undefined;
+/** A run went this way: its node left by the edge's exit, and the node it leads to ran too. */
+export declare function isEdgeTaken(graph: FlowGraph, edge: FlowEdge): boolean;
+/** The position of a node centred on a point: where something dropped there lands. */
+export declare const centeredAt: (point: FlowPoint) => FlowPoint;
+/** The node under a point, other than `except`. */
+export declare const nodeAt: (graph: FlowGraph, point: FlowPoint, except?: string) => FlowNode | undefined;
+export declare const isPortFree: (graph: FlowGraph, node: FlowNode, portId: string) => boolean;
+/**
+ * The graph with one more edge, or nothing when the edge cannot be: a node does not connect to itself, a start takes
+ * no incoming edge, and an exit joins a node once.
+ */
+export declare function connect(graph: FlowGraph, edge: FlowEdge): FlowGraph | undefined;
+export declare const moveNode: (graph: FlowGraph, id: string, position: FlowPoint) => FlowGraph;
+/** The graph without the node, and without its edges. */
+export declare const removeNode: (graph: FlowGraph, id: string) => FlowGraph;
+export declare const removeEdge: (graph: FlowGraph, id: string) => FlowGraph;
+/** Where a node added after an exit goes: a row below, under its exit, clear of the nodes after the other exits. */
+export declare function positionAfter(graph: FlowGraph, from: string, portId: string): FlowPoint;
+/**
+ * The nodes laid out again, top to bottom in the order they run: the starts and the nodes nothing leads to on the
+ * first row, each other node a row below the lowest node leading to it, under the exits it hangs from. Edges that
+ * loop back up do not count. Only the positions change.
+ */
+export declare function layoutFlow(graph: FlowGraph): FlowGraph;
+/** Where a point of the canvas (relative to its top left corner) is in the flow's own pixels. */
+export declare const toWorld: (viewport: FlowViewport, screen: FlowPoint) => FlowPoint;
+/** Zooms by `factor`, keeping the point under `screen` where it is: zooming follows the pointer. */
+export declare function zoomAt(viewport: FlowViewport, screen: FlowPoint, factor: number): FlowViewport;
+/** The view that shows every node, centred in a canvas of this size, never larger than life. */
+export declare function fitView(nodes: readonly FlowNode[], width: number, height: number): FlowViewport;
+/** The view moved just enough for a node to be seen whole, its exits included; unchanged when it already is. */
+export declare function revealIn(viewport: FlowViewport, node: FlowNode, width: number, height: number): FlowViewport;