@syware/jlib 0.0.0-stage → 0.1.3

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-progress-ring.css?raw
+var jl_progress_ring_default = ":host {\n  display: inline-flex;\n  flex: none;\n  vertical-align: middle;\n  --size: 40px;\n  --done: 0;\n  --color: var(--jl-accent);\n  --track: var(--jl-surface-3);\n}\n\n:host([tone=\"ok\"]) {\n  --color: var(--jl-ok);\n}\n\n:host([tone=\"warn\"]) {\n  --color: var(--jl-warn);\n}\n\n:host([tone=\"danger\"]) {\n  --color: var(--jl-danger);\n}\n\n.ring {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size);\n  height: var(--size);\n}\n\n.svg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  /* The arc starts at the top, as a clock's hand. */\n  transform: rotate(-90deg);\n}\n\n.track {\n  stroke: var(--track);\n}\n\n.arc {\n  stroke: var(--color);\n  stroke-dasharray: 100;\n  stroke-dashoffset: calc(100 - var(--done));\n  stroke-linecap: round;\n  transition: stroke-dashoffset var(--jl-slow) var(--jl-ease);\n}\n\n/* At zero, the round cap would still draw a dot at the top. */\n:host([empty]) .arc {\n  visibility: hidden;\n}\n\n:host([indeterminate]) .arc {\n  stroke-dashoffset: 72;\n  transition: none;\n}\n\n:host([indeterminate]) .svg {\n  animation: turn 0.9s linear infinite;\n}\n\n.percent {\n  position: relative;\n  color: var(--jl-text);\n  font-size: calc(var(--size) * 0.24);\n  font-variant-numeric: tabular-nums;\n  font-weight: 700;\n  line-height: 1;\n}\n\n@keyframes turn {\n  from {\n    transform: rotate(-90deg);\n  }\n\n  to {\n    transform: rotate(270deg);\n  }\n}\n\n/* Without motion, an endless ring stays still: a quarter of it shows that work goes on. */\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .svg {\n    animation: none;\n  }\n}\n";
+export { jl_progress_ring_default as default };

package/dist/atoms/jl-progress-ring.d.ts

@@ -0,0 +1,49 @@
+import { JlElement } from '../base/jl-element';
+import type { ProgressTone } from '../types/jl-progress.types';
+/**
+ * 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.
+ */
+export declare class JlProgressRing extends JlElement {
+    static readonly selector = "jl-progress-ring";
+    /** How much is done, out of `max`; `null` (no attribute) for work of unknown length. */
+    readonly value: Readonly<Readonly<{
+        get(): number | null;
+        set(setter: number | ((prevState: number | null) => number | null) | null): void;
+    }>>;
+    readonly max: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The ring's width and height, in pixels. */
+    readonly size: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The width of the ring's stroke, in pixels. */
+    readonly thickness: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    readonly tone: Readonly<Readonly<{
+        get(): ProgressTone;
+        set(setter: ((prevState: ProgressTone) => ProgressTone) | ProgressTone): void;
+    }>>;
+    /** Prints the percentage in the centre: for rings of 40 pixels and more. */
+    readonly showValue: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The ring's name for screen readers: what is in progress. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    private readonly _svg;
+    templateHtml(): Node;
+    templateCss(): string;
+    private buildSvg;
+    private renderGeometry;
+    private renderValue;
+}

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

@@ -0,0 +1,132 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.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.
+*/
+var JlProgressRing = class extends JlElement {
+	static selector = "jl-progress-ring";
+	/** How much is done, out of `max`; `null` (no attribute) for work of unknown length. */
+	value = this.useChange(null, () => this.renderValue(), {
+		attribute: "value",
+		parse: optionalNumber
+	});
+	max = this.useChange(DEFAULT_MAX, () => this.renderValue(), { attribute: "max" });
+	/** The ring's width and height, in pixels. */
+	size = this.useChange(DEFAULT_SIZE, () => this.renderGeometry(), { attribute: "size" });
+	/** The width of the ring's stroke, in pixels. */
+	thickness = this.useChange(DEFAULT_THICKNESS, () => this.renderGeometry(), { attribute: "thickness" });
+	tone = this.useChange("accent", (value) => this.reflect("tone", value), {
+		attribute: "tone",
+		parse: oneOf(PROGRESS_TONES, "accent")
+	});
+	/** Prints the percentage in the centre: for rings of 40 pixels and more. */
+	showValue = this.useChange(false, (value) => {
+		this._refs.percent.hidden = !value;
+	}, { attribute: "show-value" });
+	/** The ring's name for screen readers: what is in progress. */
+	label = this.useChange("", (value) => this._refs.ring.setAttribute("aria-label", value === "" ? DEFAULT_NAME : value), { attribute: "label" });
+	_refs = this.useRefs((ref) => ({
+		percent: ref(".percent"),
+		ring: ref(".ring")
+	}));
+	_svg = {
+		arc: null,
+		root: null,
+		track: null
+	};
+	templateHtml() {
+		const ring = /* @__PURE__ */ jsx("span", {
+			class: "ring",
+			role: "progressbar",
+			"aria-valuemin": "0",
+			attrs: { part: "base" },
+			children: /* @__PURE__ */ jsx("span", {
+				class: "percent",
+				"aria-hidden": "true",
+				hidden: true
+			})
+		});
+		ring.prepend(this.buildSvg());
+		return ring;
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_progress_ring_default}`;
+	}
+	buildSvg() {
+		const root = svgElement("svg", {
+			"aria-hidden": "true",
+			class: "svg"
+		});
+		const track = svgElement("circle", {
+			class: "track",
+			fill: "none"
+		});
+		const arc = svgElement("circle", {
+			class: "arc",
+			fill: "none",
+			pathLength: String(PATH_LENGTH)
+		});
+		root.append(track, arc);
+		Object.assign(this._svg, {
+			arc,
+			root,
+			track
+		});
+		return root;
+	}
+	renderGeometry() {
+		const { root, track, arc } = this._svg;
+		if (root === null || track === null || arc === null) return;
+		const size = this.size.get();
+		const { center, radius, stroke } = ringGeometry(size, this.thickness.get());
+		root.setAttribute("viewBox", `0 0 ${size} ${size}`);
+		for (const circle of [track, arc]) {
+			circle.setAttribute("cx", String(center));
+			circle.setAttribute("cy", String(center));
+			circle.setAttribute("r", String(radius));
+			circle.setAttribute("stroke-width", String(stroke));
+		}
+		this.style.setProperty("--size", `${size}px`);
+	}
+	renderValue() {
+		const value = this.value.get();
+		const ring = this._refs.ring;
+		const max = this.max.get();
+		ring.setAttribute("aria-valuemax", String(max));
+		this.reflect("indeterminate", value === null);
+		this.reflect("empty", value !== null && progressRatio(value, max) === 0);
+		if (value === null) {
+			ring.removeAttribute("aria-valuenow");
+			ring.removeAttribute("aria-valuetext");
+			this.style.removeProperty("--done");
+			this._refs.percent.textContent = "";
+			return;
+		}
+		const ratio = progressRatio(value, max);
+		ring.setAttribute("aria-valuenow", String(value));
+		ring.setAttribute("aria-valuetext", percentLabel(ratio));
+		this.style.setProperty("--done", String(percentOf(ratio)));
+		this._refs.percent.textContent = percentLabel(ratio);
+	}
+};
+JlProgressRing.register();
+export { JlProgressRing };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-progress.css?raw
+var jl_progress_default = ":host {\n  display: block;\n  --height: 8px;\n  --color: var(--jl-accent);\n}\n\n:host([size=\"sm\"]) {\n  --height: 4px;\n}\n\n:host([tone=\"ok\"]) {\n  --color: var(--jl-ok);\n}\n\n:host([tone=\"warn\"]) {\n  --color: var(--jl-warn);\n}\n\n:host([tone=\"danger\"]) {\n  --color: var(--jl-danger);\n}\n\n.header {\n  display: flex;\n  align-items: baseline;\n  gap: 12px;\n  margin-bottom: 8px;\n  font-size: var(--jl-font-sm);\n  line-height: 1.4;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  color: var(--jl-text-2);\n  font-weight: 600;\n}\n\n.percent {\n  margin-left: auto;\n  color: var(--jl-muted);\n  font-variant-numeric: tabular-nums;\n}\n\n.track {\n  position: relative;\n  height: var(--height);\n  overflow: hidden;\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface-3);\n}\n\n.bar {\n  width: 0;\n  height: 100%;\n  border-radius: inherit;\n  background: var(--color);\n  transition: width var(--jl-slow) var(--jl-ease);\n}\n\n:host([indeterminate]) .bar {\n  position: absolute;\n  inset: 0 auto 0 0;\n  width: 40%;\n  animation: travel 1.3s var(--jl-ease) infinite;\n}\n\n@keyframes travel {\n  from {\n    transform: translateX(-100%);\n  }\n\n  to {\n    transform: translateX(250%);\n  }\n}\n\n/* Without motion, an endless bar is drawn still and faded: work goes on, its end is unknown. */\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .bar {\n    width: 100%;\n    opacity: 0.35;\n    animation: none;\n  }\n}\n";
+export { jl_progress_default as default };

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

@@ -0,0 +1,43 @@
+import { JlElement } from '../base/jl-element';
+import type { ProgressSize, ProgressTone } from '../types/jl-progress.types';
+export declare const PROGRESS_TONES: readonly ProgressTone[];
+export declare const PROGRESS_SIZES: readonly ProgressSize[];
+/**
+ * How far a task has gone, as a bar: `value` out of `max`. Without a value, the work has no known end and the bar
+ * runs back and forth. A `label` above names it; `show-value` prints the percentage.
+ */
+export declare class JlProgress extends JlElement {
+    static readonly selector = "jl-progress";
+    /** How much is done, out of `max`; `null` (no attribute) for work of unknown length. */
+    readonly value: Readonly<Readonly<{
+        get(): number | null;
+        set(setter: number | ((prevState: number | null) => number | null) | null): void;
+    }>>;
+    readonly max: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    readonly tone: Readonly<Readonly<{
+        get(): ProgressTone;
+        set(setter: ((prevState: ProgressTone) => ProgressTone) | ProgressTone): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ProgressSize;
+        set(setter: ((prevState: ProgressSize) => ProgressSize) | ProgressSize): void;
+    }>>;
+    /** Shown above the bar, and the bar's name for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Prints the percentage above the bar, at the end. */
+    readonly showValue: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    private render;
+    private renderHeader;
+}

package/dist/atoms/jl-progress.js

@@ -0,0 +1,109 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { optionalNumber, percentLabel, percentOf, progressRatio } from "../lib/progress.js";
+import jl_progress_default from "./jl-progress.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-progress.tsx
+var PROGRESS_TONES = [
+	"accent",
+	"ok",
+	"warn",
+	"danger"
+];
+var PROGRESS_SIZES = ["md", "sm"];
+var DEFAULT_MAX = 100;
+var DEFAULT_NAME = "Progress";
+/**
+* How far a task has gone, as a bar: `value` out of `max`. Without a value, the work has no known end and the bar
+* runs back and forth. A `label` above names it; `show-value` prints the percentage.
+*/
+var JlProgress = class extends JlElement {
+	static selector = "jl-progress";
+	/** How much is done, out of `max`; `null` (no attribute) for work of unknown length. */
+	value = this.useChange(null, () => this.render(), {
+		attribute: "value",
+		parse: optionalNumber
+	});
+	max = this.useChange(DEFAULT_MAX, () => this.render(), { attribute: "max" });
+	tone = this.useChange("accent", (value) => this.reflect("tone", value), {
+		attribute: "tone",
+		parse: oneOf(PROGRESS_TONES, "accent")
+	});
+	size = this.useChange("md", (value) => this.reflect("size", value), {
+		attribute: "size",
+		parse: oneOf(PROGRESS_SIZES, "md")
+	});
+	/** Shown above the bar, and the bar's name for screen readers. */
+	label = this.useChange("", () => this.renderHeader(), { attribute: "label" });
+	/** Prints the percentage above the bar, at the end. */
+	showValue = this.useChange(false, () => this.renderHeader(), { attribute: "show-value" });
+	_refs = this.useRefs((ref) => ({
+		bar: ref(".bar"),
+		header: ref(".header"),
+		label: ref(".label"),
+		percent: ref(".percent"),
+		track: ref(".track")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "progress",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("div", {
+				class: "header",
+				hidden: true,
+				children: [/* @__PURE__ */ jsx("span", {
+					class: "label",
+					id: "label"
+				}), /* @__PURE__ */ jsx("span", {
+					class: "percent",
+					"aria-hidden": "true"
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				class: "track",
+				role: "progressbar",
+				"aria-valuemin": "0",
+				children: /* @__PURE__ */ jsx("div", { class: "bar" })
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_progress_default}`;
+	}
+	render() {
+		const value = this.value.get();
+		const track = this._refs.track;
+		const max = this.max.get();
+		track.setAttribute("aria-valuemax", String(max));
+		this.reflect("indeterminate", value === null);
+		if (value === null) {
+			track.removeAttribute("aria-valuenow");
+			track.removeAttribute("aria-valuetext");
+			this._refs.bar.style.removeProperty("width");
+			this._refs.percent.textContent = "";
+			return;
+		}
+		const ratio = progressRatio(value, max);
+		track.setAttribute("aria-valuenow", String(value));
+		track.setAttribute("aria-valuetext", percentLabel(ratio));
+		this._refs.bar.style.width = `${percentOf(ratio)}%`;
+		this._refs.percent.textContent = percentLabel(ratio);
+	}
+	renderHeader() {
+		const label = this.label.get();
+		const track = this._refs.track;
+		this._refs.label.textContent = label;
+		this._refs.percent.hidden = !this.showValue.get();
+		this._refs.header.hidden = label === "" && !this.showValue.get();
+		if (label === "") {
+			track.removeAttribute("aria-labelledby");
+			track.setAttribute("aria-label", DEFAULT_NAME);
+			return;
+		}
+		track.removeAttribute("aria-label");
+		track.setAttribute("aria-labelledby", "label");
+	}
+};
+JlProgress.register();
+export { JlProgress, PROGRESS_SIZES, PROGRESS_TONES };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-rating.css?raw
+var jl_rating_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  --color: var(--jl-accent);\n  --empty: var(--jl-faint);\n}\n\n.rating {\n  display: inline-flex;\n  padding: 2px;\n  border-radius: var(--jl-radius-xs);\n  cursor: pointer;\n}\n\n.icons {\n  display: inline-flex;\n  gap: 2px;\n}\n\n.icon {\n  display: inline-flex;\n  color: var(--empty);\n  transition:\n    color var(--jl-fast) var(--jl-ease),\n    transform var(--jl-fast) var(--jl-ease);\n}\n\n.icon svg {\n  fill: transparent;\n  transition: fill var(--jl-fast) var(--jl-ease);\n}\n\n.icon.on {\n  color: var(--color);\n}\n\n.icon.on svg {\n  fill: currentColor;\n}\n\n/* The score a click would give: the same colour, lighter, so it reads as a proposal. */\n:host([previewing]) .icon.on {\n  color: color-mix(in srgb, var(--color) 55%, transparent);\n}\n\n:host(:not([readonly]):not([disabled])) .icon:hover {\n  transform: scale(1.12);\n}\n\n:host([invalid]) .icon:not(.on) {\n  color: var(--jl-danger);\n}\n\n:host([readonly]) .rating {\n  cursor: default;\n}\n\n:host([disabled]) .rating {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n";
+export { jl_rating_default as default };

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

@@ -0,0 +1,73 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { ControlSize } from '../types/options.types';
+/**
+ * A row of stars (or hearts, or any icon) to give a score: a click, the arrows or a digit set it, and choosing the
+ * score already given clears it. Hovering previews the score a click would give.
+ */
+export declare class JlRating extends JlFormControl {
+    static readonly selector = "jl-rating";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: number;
+    }>>;
+    readonly value: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** How many icons the scale has. */
+    readonly max: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** Shows a score that cannot be changed: an average, a review. */
+    readonly readonly: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly icon: 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 name screen readers give the scale. */
+    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 empty icons 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 _state;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    protected resetValue(): void;
+    protected setDisabledByForm(disabled: boolean): void;
+    private canChange;
+    private onKey;
+    private onChoose;
+    private onHover;
+    private iconValueAt;
+    private setPreview;
+    /** The value as the scale shows it: never past its end. */
+    private current;
+    private commit;
+    private renderIcons;
+    private renderValue;
+    private renderValidity;
+    private renderDisabled;
+}

package/dist/atoms/jl-rating.js

@@ -0,0 +1,184 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { clampedNumber, oneOf } from "../lib/attributes.js";
+import { iconElement, registerIcons } from "../lib/icons.js";
+import { CONTROL_SIZES } from "../lib/options.js";
+import { ratingAfterChoice, ratingAfterKey } from "../lib/rating.js";
+import jl_rating_default from "./jl-rating.css_raw.js";
+import { css } from "@jadis/core";
+import { Star } from "lucide";
+import { jsx } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-rating.tsx
+registerIcons({ star: Star });
+var ICON_SIZES = {
+	lg: 26,
+	md: 20,
+	sm: 16
+};
+var DEFAULT_MAX = 5;
+var MAX_LIMIT = 10;
+var NO_PREVIEW = 0;
+var DEFAULT_LABEL = "Rating";
+var VALUE_MISSING = "Choose a rating.";
+/**
+* A row of stars (or hearts, or any icon) to give a score: a click, the arrows or a digit set it, and choosing the
+* score already given clears it. Hovering previews the score a click would give.
+*/
+var JlRating = class extends JlFormControl {
+	static selector = "jl-rating";
+	events = this.useEvents();
+	value = this.useChange(0, () => this.renderValue(), {
+		attribute: "value",
+		parse: clampedNumber(0, 0, MAX_LIMIT)
+	});
+	/** How many icons the scale has. */
+	max = this.useChange(DEFAULT_MAX, () => this.renderIcons(), {
+		attribute: "max",
+		parse: clampedNumber(DEFAULT_MAX, 1, MAX_LIMIT)
+	});
+	/** Shows a score that cannot be changed: an average, a review. */
+	readonly = this.useChange(false, (value) => {
+		this.reflect("readonly", value);
+		this._refs.slider.toggleAttribute("aria-readonly", value);
+	}, { attribute: "readonly" });
+	icon = this.useChange("star", () => this.renderIcons(), { attribute: "icon" });
+	size = this.useChange("md", (value) => {
+		this.reflect("size", value);
+		this.renderIcons();
+	}, {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	/** The name screen readers give the scale. */
+	label = this.useChange(DEFAULT_LABEL, (value) => {
+		this._refs.slider.setAttribute("aria-label", value === "" ? DEFAULT_LABEL : value);
+	}, { attribute: "label" });
+	required = this.useChange(false, (value) => {
+		this._refs.slider.toggleAttribute("aria-required", value);
+		this.renderValidity();
+	}, { attribute: "required" });
+	disabled = this.useChange(false, (value) => this.renderDisabled(value), { attribute: "disabled" });
+	/** Draws the empty icons in the danger colour, for an error the page found itself. */
+	invalid = this.useChange(false, (value) => {
+		this.reflect("invalid", value);
+		this._refs.slider.toggleAttribute("aria-invalid", value);
+	}, { attribute: "invalid" });
+	_state = {
+		formDisabled: false,
+		preview: NO_PREVIEW
+	};
+	_refs = this.useRefs((ref) => ({
+		icons: ref(".icons"),
+		slider: ref(".rating")
+	}));
+	focus(options) {
+		this._refs.slider.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsx("div", {
+			class: "rating",
+			role: "slider",
+			tabIndex: 0,
+			"aria-valuenow": "0",
+			"aria-valuemin": "0",
+			attrs: { part: "base" },
+			children: /* @__PURE__ */ jsx("span", { class: "icons" })
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_rating_default}`;
+	}
+	onConnect() {
+		const slider = this._refs.slider;
+		this.on(slider, "keydown", (event) => this.onKey(event));
+		this.on(slider, "click", (event) => this.onChoose(event));
+		this.on(slider, "pointermove", (event) => this.onHover(event));
+		this.on(slider, "pointerleave", () => this.setPreview(NO_PREVIEW));
+	}
+	resetValue() {
+		this.value.set(clampedNumber(0, 0, MAX_LIMIT)(this.getAttribute("value")));
+	}
+	setDisabledByForm(disabled) {
+		this._state.formDisabled = disabled;
+		this.whenRendered(() => this.renderDisabled(this.disabled.get()));
+	}
+	canChange() {
+		return !this.readonly.get() && !this.disabled.get() && !this._state.formDisabled;
+	}
+	onKey(event) {
+		if (!this.canChange()) return;
+		const next = ratingAfterKey(this.current(), event.key, this.max.get());
+		if (next === null) return;
+		event.preventDefault();
+		this.commit(next);
+	}
+	onChoose(event) {
+		const chosen = this.iconValueAt(event);
+		if (chosen === null || !this.canChange()) return;
+		this.setPreview(NO_PREVIEW);
+		this.commit(ratingAfterChoice(this.current(), chosen));
+	}
+	onHover(event) {
+		if (!this.canChange()) return;
+		this.setPreview(this.iconValueAt(event) ?? NO_PREVIEW);
+	}
+	iconValueAt(event) {
+		const icon = event.target.closest("[data-value]");
+		return icon === null ? null : Number(icon.dataset.value);
+	}
+	setPreview(preview) {
+		if (preview === this._state.preview) return;
+		this._state.preview = preview;
+		this.renderValue();
+	}
+	/** The value as the scale shows it: never past its end. */
+	current() {
+		return Math.min(this.value.get(), this.max.get());
+	}
+	commit(value) {
+		if (value === this.current()) return;
+		this.value.set(value);
+		this.events.emit("change", value);
+	}
+	renderIcons() {
+		const name = this.icon.get() === "" ? "star" : this.icon.get();
+		const size = ICON_SIZES[this.size.get()];
+		const icons = Array.from({ length: this.max.get() }, (_, index) => /* @__PURE__ */ jsx("span", {
+			class: "icon",
+			"data-value": String(index + 1),
+			children: iconElement(name, size)
+		}));
+		this._refs.icons.replaceChildren(...icons);
+		this.renderValue();
+	}
+	renderValue() {
+		const value = this.current();
+		const max = this.max.get();
+		const preview = this._state.preview;
+		const shown = preview === NO_PREVIEW ? value : preview;
+		for (const icon of this._refs.icons.querySelectorAll("[data-value]")) icon.classList.toggle("on", Number(icon.dataset.value) <= shown);
+		this.reflect("previewing", preview !== NO_PREVIEW);
+		const slider = this._refs.slider;
+		slider.setAttribute("aria-valuenow", String(value));
+		slider.setAttribute("aria-valuemax", String(max));
+		slider.setAttribute("aria-valuetext", value === 0 ? "No rating" : `${value} of ${max}`);
+		this.internals.setFormValue(String(value));
+		this.renderValidity();
+	}
+	renderValidity() {
+		if (this.required.get() && this.current() === 0) {
+			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this._refs.slider);
+			return;
+		}
+		this.internals.setValidity({});
+	}
+	renderDisabled(disabled) {
+		const off = disabled || this._state.formDisabled;
+		this.reflect("disabled", disabled);
+		this._refs.slider.tabIndex = off ? -1 : 0;
+		this._refs.slider.toggleAttribute("aria-disabled", off);
+		this.setPreview(NO_PREVIEW);
+	}
+};
+JlRating.register();
+export { JlRating };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-select.css?raw
+var jl_select_default = ":host {\n  display: block;\n}\n\n/* The select covers the whole frame, chevron included, so a click anywhere opens it. */\n.control {\n  position: relative;\n  padding: 0;\n}\n\n.native {\n  padding: 0 36px 0 12px;\n  border-radius: inherit;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  appearance: none;\n}\n\n.native:disabled {\n  cursor: not-allowed;\n}\n\n:host([placeholder-shown]) .native {\n  color: var(--jl-faint);\n}\n\n/* The list keeps the text colour even while the placeholder greys the closed field. */\noption,\noptgroup {\n  background: var(--jl-surface);\n  color: var(--jl-text);\n}\n\n.chevron {\n  position: absolute;\n  right: 12px;\n  color: var(--jl-muted);\n  pointer-events: none;\n}\n\n:host([disabled]) .chevron {\n  color: var(--jl-faint);\n}\n";
+export { jl_select_default as default };