@syware/jlib 0.0.0-stage → 0.1.3

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

@@ -0,0 +1,70 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { SelectOption } from '../types/jl-select.types';
+import type { ControlSize } from '../types/options.types';
+/**
+ * A choice among a list, on the browser's own `<select>`: its list opens the way the platform does it. The choices
+ * come from `options` (JSON) or from `<option>` and `<optgroup>` elements written inside it.
+ */
+export declare class JlSelect extends JlFormControl {
+    static readonly selector = "jl-select";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: string;
+    }>>;
+    /** The choices; an option with a `group` goes under that heading. Empty: the `<option>` children are used. */
+    readonly options: Readonly<Readonly<{
+        get(): SelectOption[];
+        set(setter: SelectOption[] | ((prevState: SelectOption[]) => SelectOption[])): void;
+    }>>;
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Shown while nothing is chosen; it cannot be picked back from the list. */
+    readonly placeholder: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    /** The field's name for screen readers, when no visible label names it. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    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;
+    }>>;
+    /** Draws the field in the danger colour, for an error the page found itself. */
+    readonly invalid: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _form;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    protected resetValue(): void;
+    /** The browser calls it for a disabled fieldset and for the element's own disabled attribute, even before render. */
+    protected setDisabledByForm(disabled: boolean): void;
+    private renderDisabled;
+    /** The options from `options`, or else copies of the `<option>` and `<optgroup>` the page wrote inside. */
+    private optionNodes;
+    private placeholderNodes;
+    private renderOptions;
+    /** Shows the chosen option; the form gets what is shown. */
+    private renderValue;
+    /**
+     * The option to show: the one with the value, or else what a native select shows, the placeholder or the first
+     * option that can be chosen.
+     */
+    private shownIndex;
+}

package/dist/atoms/jl-select.js

@@ -0,0 +1,146 @@
+import { BASE_STYLES, CONTROL_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { jsonOf, oneOf } 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 "./jl-icon.js";
+import { groupOptions } from "../lib/option-groups.js";
+import jl_select_default from "./jl-select.css_raw.js";
+import { css } from "@jadis/core";
+import { ChevronDown } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-select.tsx
+registerIcons({ "chevron-down": ChevronDown });
+var CHEVRON_SIZE = 16;
+var LIGHT_OPTIONS = ":scope > option, :scope > optgroup";
+var NO_VALUE = "";
+var PLACEHOLDER_CLASS = "placeholder";
+var optionElement = (option) => /* @__PURE__ */ jsx("option", {
+	value: option.value,
+	disabled: option.disabled === true,
+	children: option.label
+});
+var groupNodes = (group) => {
+	const options = group.options.map(optionElement);
+	return group.label === null ? options : [/* @__PURE__ */ jsx("optgroup", {
+		label: group.label,
+		children: options
+	})];
+};
+/**
+* A choice among a list, on the browser's own `<select>`: its list opens the way the platform does it. The choices
+* come from `options` (JSON) or from `<option>` and `<optgroup>` elements written inside it.
+*/
+var JlSelect = class extends JlFormControl {
+	static selector = "jl-select";
+	events = this.useEvents();
+	/** The choices; an option with a `group` goes under that heading. Empty: the `<option>` children are used. */
+	options = this.useChange([], () => this.renderOptions(), {
+		attribute: "options",
+		parse: jsonOf([])
+	});
+	value = this.useChange(NO_VALUE, () => this.renderValue(), { 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), {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	/** The field's name for screen readers, when no visible label names it. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.native, "aria-label", value), { attribute: "label" });
+	required = this.useChange(false, (value) => {
+		this._refs.native.required = value;
+		this.reflect("required", value);
+		this.renderValue();
+	}, { attribute: "required" });
+	disabled = this.useChange(false, (value) => {
+		this.reflect("disabled", value);
+		this.renderDisabled();
+	}, { attribute: "disabled" });
+	/** Draws the field in the danger colour, for an error the page found itself. */
+	invalid = this.useChange(false, (value) => {
+		this.reflect("invalid", value);
+		this._refs.native.toggleAttribute("aria-invalid", value);
+	}, { attribute: "invalid" });
+	_form = { disabled: false };
+	_refs = this.useRefs((ref) => ({ native: ref("select") }));
+	focus(options) {
+		this._refs.native.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "control",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsx("select", { class: "native" }), /* @__PURE__ */ jsx(JlIcon, {
+				class: "chevron",
+				name: "chevron-down",
+				size: CHEVRON_SIZE
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${CONTROL_STYLES}${jl_select_default}`;
+	}
+	onConnect() {
+		const native = this._refs.native;
+		this.on(native, "change", () => {
+			this.value.set(native.value);
+			this.events.emit("change", native.value);
+		});
+		this.renderOptions();
+	}
+	resetValue() {
+		this.value.set(this.getAttribute("value") ?? NO_VALUE);
+	}
+	/** The browser calls it for a disabled fieldset and for the element's own disabled attribute, even before render. */
+	setDisabledByForm(disabled) {
+		this._form.disabled = disabled;
+		this.whenRendered(() => this.renderDisabled());
+	}
+	renderDisabled() {
+		this._refs.native.disabled = this.disabled.get() || this._form.disabled;
+	}
+	/** The options from `options`, or else copies of the `<option>` and `<optgroup>` the page wrote inside. */
+	optionNodes() {
+		const options = this.options.get();
+		if (options.length > 0) return groupOptions(options).flatMap(groupNodes);
+		return [...this.querySelectorAll(LIGHT_OPTIONS)].map((node) => node.cloneNode(true));
+	}
+	placeholderNodes() {
+		const placeholder = this.placeholder.get();
+		if (placeholder === "") return [];
+		return [/* @__PURE__ */ jsx("option", {
+			class: PLACEHOLDER_CLASS,
+			value: NO_VALUE,
+			disabled: true,
+			hidden: true,
+			children: placeholder
+		})];
+	}
+	renderOptions() {
+		this._refs.native.replaceChildren(...this.placeholderNodes(), ...this.optionNodes());
+		this.renderValue();
+	}
+	/** Shows the chosen option; the form gets what is shown. */
+	renderValue() {
+		const native = this._refs.native;
+		native.selectedIndex = this.shownIndex();
+		this.reflect("placeholder-shown", native.selectedOptions[0]?.classList.contains(PLACEHOLDER_CLASS) === true);
+		this.internals.setFormValue(native.value);
+		this.mirrorValidity(native);
+	}
+	/**
+	* The option to show: the one with the value, or else what a native select shows, the placeholder or the first
+	* option that can be chosen.
+	*/
+	shownIndex() {
+		const options = [...this._refs.native.options];
+		const value = this.value.get();
+		const chosen = options.findIndex((option) => option.value === value);
+		if (chosen !== -1) return chosen;
+		return options.findIndex((option) => option.classList.contains(PLACEHOLDER_CLASS) || !option.disabled);
+	}
+};
+JlSelect.register();
+export { JlSelect };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-skeleton.css?raw
+var jl_skeleton_default = ":host {\n  display: block;\n  --base: var(--jl-surface-3);\n  --shine: var(--jl-surface-2);\n}\n\n:host([shape=\"circle\"]) {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n.bones {\n  display: grid;\n  gap: 0.55em;\n  width: var(--width, 100%);\n}\n\n.bone {\n  display: block;\n  height: var(--height, 0.8em);\n  border-radius: var(--jl-radius-xs);\n  background: linear-gradient(90deg, var(--base) 30%, var(--shine) 50%, var(--base) 70%) 0 0 / 300% 100%;\n  animation: shimmer 1.8s ease-in-out infinite;\n}\n\n.bone:last-child:not(:first-child) {\n  width: 60%;\n}\n\n:host([shape=\"rect\"]) .bone {\n  height: var(--height, 96px);\n  border-radius: var(--jl-radius);\n}\n\n:host([shape=\"circle\"]) .bones {\n  width: var(--width, 40px);\n}\n\n:host([shape=\"circle\"]) .bone {\n  width: 100%;\n  height: var(--height, auto);\n  aspect-ratio: 1;\n  border-radius: 50%;\n}\n\n@keyframes shimmer {\n  from {\n    background-position: 100% 0;\n  }\n\n  to {\n    background-position: 0 0;\n  }\n}\n\n/* A shortened endless animation would flicker: without motion, the placeholder stays still. */\n@media (prefers-reduced-motion: reduce) {\n  .bone {\n    animation: none;\n  }\n}\n";
+export { jl_skeleton_default as default };

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

@@ -0,0 +1,34 @@
+import { JlElement } from '../base/jl-element';
+import type { SkeletonShape } from '../types/jl-skeleton.types';
+export declare const SKELETON_SHAPES: readonly SkeletonShape[];
+/**
+ * A placeholder that shimmers where content is loading: lines of `text`, a `rect` for an image or a card, a
+ * `circle` for an avatar. Screen readers skip it; mark the region it fills with `aria-busy="true"`.
+ */
+export declare class JlSkeleton extends JlElement {
+    static readonly selector = "jl-skeleton";
+    readonly shape: Readonly<Readonly<{
+        get(): SkeletonShape;
+        set(setter: ((prevState: SkeletonShape) => SkeletonShape) | SkeletonShape): void;
+    }>>;
+    /** A CSS length; a plain number is in pixels. Text and blocks take the whole width by default. */
+    readonly width: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** A CSS length; a plain number is in pixels. A circle takes its width when it has no height. */
+    readonly height: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** For text: how many lines; the last of several is shorter, as a paragraph's is. */
+    readonly lines: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    private renderBones;
+    private setLength;
+}

package/dist/atoms/jl-skeleton.js

@@ -0,0 +1,63 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { clampedNumber, oneOf } from "../lib/attributes.js";
+import { cssLength } from "../lib/css-length.js";
+import jl_skeleton_default from "./jl-skeleton.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-skeleton.tsx
+var SKELETON_SHAPES = [
+	"text",
+	"rect",
+	"circle"
+];
+var MIN_LINES = 1;
+var MAX_LINES = 20;
+/**
+* A placeholder that shimmers where content is loading: lines of `text`, a `rect` for an image or a card, a
+* `circle` for an avatar. Screen readers skip it; mark the region it fills with `aria-busy="true"`.
+*/
+var JlSkeleton = class extends JlElement {
+	static selector = "jl-skeleton";
+	shape = this.useChange("text", (value) => {
+		this.reflect("shape", value);
+		this.renderBones();
+	}, {
+		attribute: "shape",
+		parse: oneOf(SKELETON_SHAPES, "text")
+	});
+	/** A CSS length; a plain number is in pixels. Text and blocks take the whole width by default. */
+	width = this.useChange("", (value) => this.setLength("--width", value), { attribute: "width" });
+	/** A CSS length; a plain number is in pixels. A circle takes its width when it has no height. */
+	height = this.useChange("", (value) => this.setLength("--height", value), { attribute: "height" });
+	/** For text: how many lines; the last of several is shorter, as a paragraph's is. */
+	lines = this.useChange(MIN_LINES, () => this.renderBones(), {
+		attribute: "lines",
+		parse: clampedNumber(MIN_LINES, MIN_LINES, MAX_LINES)
+	});
+	_refs = this.useRefs((ref) => ({ bones: ref(".bones") }));
+	templateHtml() {
+		return /* @__PURE__ */ jsx("span", {
+			class: "bones",
+			"aria-hidden": "true",
+			attrs: { part: "base" }
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_skeleton_default}`;
+	}
+	renderBones() {
+		const count = this.shape.get() === "text" ? Math.round(this.lines.get()) : 1;
+		this._refs.bones.replaceChildren(...Array.from({ length: count }, () => /* @__PURE__ */ jsx("span", { class: "bone" })));
+	}
+	setLength(property, value) {
+		const length = cssLength(value);
+		if (length === "") {
+			this.style.removeProperty(property);
+			return;
+		}
+		this.style.setProperty(property, length);
+	}
+};
+JlSkeleton.register();
+export { JlSkeleton, SKELETON_SHAPES };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-slider.css?raw
+var jl_slider_default = ":host {\n  display: block;\n  --thumb: 16px;\n  --track: 4px;\n  --fill: var(--jl-accent);\n  --rest: var(--jl-line-strong);\n}\n\n.slider {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.track-area {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n}\n\n/* The track fills up to the thumb's centre, which travels the width minus the thumb itself. */\n.native {\n  --stop: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--fraction, 0));\n  display: block;\n  width: 100%;\n  height: 20px;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n}\n\n.native:focus-visible {\n  box-shadow: none;\n}\n\n.native::-webkit-slider-runnable-track {\n  height: var(--track);\n  border-radius: var(--jl-radius-pill);\n  background: linear-gradient(to right, var(--fill) var(--stop), var(--rest) var(--stop));\n}\n\n.native::-moz-range-track {\n  height: var(--track);\n  border-radius: var(--jl-radius-pill);\n  background: linear-gradient(to right, var(--fill) var(--stop), var(--rest) var(--stop));\n}\n\n.native::-webkit-slider-thumb {\n  width: var(--thumb);\n  height: var(--thumb);\n  margin-top: calc((var(--track) - var(--thumb)) / 2);\n  border: 2px solid var(--fill);\n  border-radius: 50%;\n  background: var(--jl-surface);\n  appearance: none;\n  transition:\n    box-shadow var(--jl-fast) var(--jl-ease),\n    transform var(--jl-fast) var(--jl-ease);\n}\n\n.native::-moz-range-thumb {\n  box-sizing: border-box;\n  width: var(--thumb);\n  height: var(--thumb);\n  border: 2px solid var(--fill);\n  border-radius: 50%;\n  background: var(--jl-surface);\n}\n\n.native:hover::-webkit-slider-thumb {\n  transform: scale(1.1);\n}\n\n.native:focus-visible::-webkit-slider-thumb {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.native:focus-visible::-moz-range-thumb {\n  box-shadow: var(--jl-focus-ring);\n}\n\n:host([disabled]),\n:host(:disabled) {\n  --fill: var(--jl-faint);\n}\n\n:host([disabled]) .native,\n:host(:disabled) .native {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n:host([disabled]) .native:hover::-webkit-slider-thumb,\n:host(:disabled) .native:hover::-webkit-slider-thumb {\n  transform: none;\n}\n\n.output {\n  min-width: 3ch;\n  color: var(--jl-text);\n  font-family: var(--jl-font-mono);\n  font-size: var(--jl-font-sm);\n  font-variant-numeric: tabular-nums;\n  line-height: 20px;\n  text-align: right;\n}\n\n.marks {\n  position: relative;\n  height: 8px;\n  margin-top: 2px;\n}\n\n:host([has-labels]) .marks {\n  height: 26px;\n}\n\n.mark {\n  position: absolute;\n  top: 0;\n  left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--at));\n  display: grid;\n  justify-items: center;\n  gap: 2px;\n  transform: translateX(-50%);\n}\n\n.tick {\n  width: 1px;\n  height: 6px;\n  background: var(--jl-line-strong);\n}\n\n.mark-label {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  line-height: 16px;\n  white-space: nowrap;\n}\n\n.mark[data-edge=\"start\"] .mark-label {\n  transform: translateX(calc(50% - var(--thumb) / 2));\n}\n\n.mark[data-edge=\"end\"] .mark-label {\n  transform: translateX(calc(var(--thumb) / 2 - 50%));\n}\n";
+export { jl_slider_default as default };

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

@@ -0,0 +1,65 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { SliderMark } from '../types/jl-slider.types';
+/**
+ * A number picked by dragging along a track, on the browser's own range input: the arrow keys, Page Up/Down,
+ * Home and End move it. The track fills in the accent colour up to the thumb.
+ */
+export declare class JlSlider extends JlFormControl {
+    static readonly selector = "jl-slider";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        input: number;
+        change: number;
+    }>>;
+    readonly min: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    readonly max: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    readonly step: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The number; it is brought between `min` and `max`, on a `step`, as the native input does. */
+    readonly value: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** Shows the number at the end of the track. */
+    readonly showValue: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Ticks under the track: numbers, or `{ value, label }` for a tick with a label. */
+    readonly marks: Readonly<Readonly<{
+        get(): (number | SliderMark)[];
+        set(setter: (number | SliderMark)[] | ((prevState: (number | SliderMark)[]) => (number | SliderMark)[])): void;
+    }>>;
+    /** The slider's name for screen readers, when no visible label names it. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _form;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    protected resetValue(): void;
+    /** The browser calls it for a disabled fieldset and for the element's own disabled attribute, even before render. */
+    protected setDisabledByForm(disabled: boolean): void;
+    private renderDisabled;
+    private render;
+    /** New bounds move the thumb and the marks. */
+    private renderRange;
+    /** The fill, the shown number and the form's value, from the value the native input kept. */
+    private renderPosition;
+    private renderMarks;
+}

package/dist/atoms/jl-slider.js

@@ -0,0 +1,143 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { jsonOf } from "../lib/attributes.js";
+import { setOrRemove } from "../lib/dom.js";
+import { fractionOf, marksOf, parseNumber } from "../lib/numeric.js";
+import jl_slider_default from "./jl-slider.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-slider.tsx
+var DEFAULT_MIN = 0;
+var DEFAULT_MAX = 100;
+var DEFAULT_STEP = 1;
+var DEFAULT_VALUE = 0;
+var EDGES = /* @__PURE__ */ new Map([[0, "start"], [1, "end"]]);
+/**
+* A number picked by dragging along a track, on the browser's own range input: the arrow keys, Page Up/Down,
+* Home and End move it. The track fills in the accent colour up to the thumb.
+*/
+var JlSlider = class extends JlFormControl {
+	static selector = "jl-slider";
+	events = this.useEvents();
+	min = this.useChange(DEFAULT_MIN, () => this.renderRange(), { attribute: "min" });
+	max = this.useChange(DEFAULT_MAX, () => this.renderRange(), { attribute: "max" });
+	step = this.useChange(DEFAULT_STEP, () => this.render(), { attribute: "step" });
+	/** The number; it is brought between `min` and `max`, on a `step`, as the native input does. */
+	value = this.useChange(DEFAULT_VALUE, () => this.render(), { attribute: "value" });
+	/** Shows the number at the end of the track. */
+	showValue = this.useChange(false, (value) => {
+		this._refs.output.hidden = !value;
+	}, { attribute: "show-value" });
+	/** Ticks under the track: numbers, or `{ value, label }` for a tick with a label. */
+	marks = this.useChange([], () => this.renderMarks(), {
+		attribute: "marks",
+		parse: jsonOf([])
+	});
+	/** The slider's name for screen readers, when no visible label names it. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.native, "aria-label", value), { attribute: "label" });
+	disabled = this.useChange(false, (value) => {
+		this.reflect("disabled", value);
+		this.renderDisabled();
+	}, { attribute: "disabled" });
+	_form = { disabled: false };
+	_refs = this.useRefs((ref) => ({
+		marks: ref(".marks"),
+		native: ref("input"),
+		output: ref(".output")
+	}));
+	focus(options) {
+		this._refs.native.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "slider",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("div", {
+				class: "track-area",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "range",
+					class: "native"
+				}), /* @__PURE__ */ jsx("div", {
+					class: "marks",
+					"aria-hidden": "true",
+					hidden: true
+				})]
+			}), /* @__PURE__ */ jsx("span", {
+				class: "output",
+				"aria-hidden": "true",
+				hidden: true
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_slider_default}`;
+	}
+	onConnect() {
+		const native = this._refs.native;
+		this.on(native, "input", (event) => {
+			event.stopPropagation();
+			this.value.set(native.valueAsNumber);
+			this.events.emit("input", native.valueAsNumber);
+		});
+		this.on(native, "change", () => this.events.emit("change", native.valueAsNumber));
+	}
+	resetValue() {
+		this.value.set(parseNumber(this.getAttribute("value")) ?? DEFAULT_VALUE);
+	}
+	/** The browser calls it for a disabled fieldset and for the element's own disabled attribute, even before render. */
+	setDisabledByForm(disabled) {
+		this._form.disabled = disabled;
+		this.whenRendered(() => this.renderDisabled());
+	}
+	renderDisabled() {
+		this._refs.native.disabled = this.disabled.get() || this._form.disabled;
+	}
+	render() {
+		const native = this._refs.native;
+		native.min = String(this.min.get());
+		native.max = String(this.max.get());
+		native.step = String(this.step.get());
+		native.value = String(this.value.get());
+		if (native.valueAsNumber !== this.value.get()) {
+			this.value.set(native.valueAsNumber);
+			return;
+		}
+		this.renderPosition();
+	}
+	/** New bounds move the thumb and the marks. */
+	renderRange() {
+		this.render();
+		this.renderMarks();
+	}
+	/** The fill, the shown number and the form's value, from the value the native input kept. */
+	renderPosition() {
+		const native = this._refs.native;
+		const fraction = fractionOf(native.valueAsNumber, this.min.get(), this.max.get());
+		native.style.setProperty("--fraction", String(fraction));
+		this._refs.output.textContent = native.value;
+		this.internals.setFormValue(native.value);
+	}
+	renderMarks() {
+		const min = this.min.get();
+		const max = this.max.get();
+		const marks = marksOf(this.marks.get(), min, max);
+		const container = this._refs.marks;
+		container.hidden = marks.length === 0;
+		this.reflect("has-labels", marks.some((mark) => mark.label !== void 0));
+		container.replaceChildren(...marks.map((mark) => {
+			const element = /* @__PURE__ */ jsxs("span", {
+				class: "mark",
+				children: [/* @__PURE__ */ jsx("span", { class: "tick" }), mark.label === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					class: "mark-label",
+					children: mark.label
+				})]
+			});
+			const fraction = fractionOf(mark.value, min, max);
+			element.style.setProperty("--at", String(fraction));
+			setOrRemove(element, "data-edge", EDGES.get(fraction) ?? "");
+			return element;
+		}));
+	}
+};
+JlSlider.register();
+export { JlSlider };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-spinner.css?raw
+var jl_spinner_default = ":host {\n  display: inline-flex;\n  flex: none;\n  --size: 16px;\n}\n\n.ring {\n  width: var(--size);\n  height: var(--size);\n  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);\n  border-top-color: currentColor;\n  border-radius: 50%;\n  animation: spin 0.7s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n/* The one animation reduced motion keeps, slower: a still ring would read as stuck. */\n@media (prefers-reduced-motion: reduce) {\n  .ring {\n    /* biome-ignore lint/complexity/noImportantStyles: wins over the reduced-motion rule of BASE_STYLES */\n    animation-duration: 1.6s !important;\n    /* biome-ignore lint/complexity/noImportantStyles: wins over the reduced-motion rule of BASE_STYLES */\n    animation-iteration-count: infinite !important;\n  }\n}\n";
+export { jl_spinner_default as default };

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

@@ -0,0 +1,16 @@
+import { JlElement } from '../base/jl-element';
+/** A turning ring for work in progress. It follows the text colour; `label` is what screen readers say. */
+export declare class JlSpinner extends JlElement {
+    static readonly selector = "jl-spinner";
+    readonly size: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+}

package/dist/atoms/jl-spinner.js

@@ -0,0 +1,26 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import jl_spinner_default from "./jl-spinner.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-spinner.tsx
+var DEFAULT_SIZE = 16;
+var DEFAULT_LABEL = "Loading";
+/** A turning ring for work in progress. It follows the text colour; `label` is what screen readers say. */
+var JlSpinner = class extends JlElement {
+	static selector = "jl-spinner";
+	size = this.useChange(DEFAULT_SIZE, (value) => this.style.setProperty("--size", `${value}px`), { attribute: "size" });
+	label = this.useChange(DEFAULT_LABEL, (value) => this._refs.ring.setAttribute("aria-label", value), { attribute: "label" });
+	_refs = this.useRefs((ref) => ({ ring: ref(".ring") }));
+	templateHtml() {
+		return /* @__PURE__ */ jsx("span", {
+			class: "ring",
+			role: "status"
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_spinner_default}`;
+	}
+};
+JlSpinner.register();
+export { JlSpinner };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-switch.css?raw
+var jl_switch_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  --track-width: 36px;\n  --track-height: 20px;\n  --thumb: 14px;\n}\n\n:host([size=\"sm\"]) {\n  --track-width: 28px;\n  --track-height: 16px;\n  --thumb: 10px;\n}\n\n.wrap {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: 10px;\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n  cursor: pointer;\n}\n\n:host([size=\"sm\"]) .wrap {\n  font-size: var(--jl-font-sm);\n}\n\n.track {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  width: var(--track-width);\n  height: var(--track-height);\n  margin-top: calc((20px - var(--track-height)) / 2);\n}\n\n/* The native box keeps the semantics and the keyboard; it is drawn as the track, the thumb slides over it. */\n.native {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface-3);\n  cursor: inherit;\n  appearance: none;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n.wrap:hover .native:not(:disabled) {\n  border-color: color-mix(in srgb, var(--jl-line-strong) 60%, var(--jl-text) 18%);\n}\n\n.native:checked {\n  border-color: var(--jl-accent);\n  background: var(--jl-accent);\n}\n\n.wrap:hover .native:checked:not(:disabled) {\n  border-color: var(--jl-accent-strong);\n  background: var(--jl-accent-strong);\n}\n\n.thumb {\n  position: absolute;\n  top: calc((var(--track-height) - var(--thumb)) / 2);\n  left: calc((var(--track-height) - var(--thumb)) / 2);\n  width: var(--thumb);\n  height: var(--thumb);\n  border-radius: 50%;\n  background: var(--jl-muted);\n  pointer-events: none;\n  transition:\n    transform var(--jl-fast) var(--jl-ease),\n    background var(--jl-fast) var(--jl-ease);\n}\n\n.native:checked + .thumb {\n  background: var(--jl-on-accent);\n  transform: translateX(calc(var(--track-width) - var(--track-height)));\n}\n\n/* Its baseline is the element's, so a label beside it (a horizontal field) lines up with the text. */\n.text {\n  display: grid;\n  align-self: baseline;\n  gap: 2px;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  line-height: 18px;\n}\n\n:host([disabled]) .wrap,\n:host(:disabled) .wrap {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n";
+export { jl_switch_default as default };

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

@@ -0,0 +1,57 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { SwitchSize } from '../types/jl-switch.types';
+export declare const SWITCH_SIZES: readonly SwitchSize[];
+/**
+ * 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.
+ */
+export declare class JlSwitch extends JlFormControl {
+    static readonly selector = "jl-switch";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: boolean;
+    }>>;
+    readonly checked: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The text beside the switch. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** A smaller line under the label. */
+    readonly description: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): SwitchSize;
+        set(setter: ((prevState: SwitchSize) => SwitchSize) | SwitchSize): void;
+    }>>;
+    /** What the form gets while the switch is on. */
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _form;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    /** Flips the state, as a click would, and fires `change`. */
+    toggle(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    protected resetValue(): void;
+    /** The browser calls it for a disabled fieldset and for the element's own disabled attribute, even before render. */
+    protected setDisabledByForm(disabled: boolean): void;
+    private renderDisabled;
+    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. */
+    private renderText;
+}