@syware/jlib 0.0.0-stage → 0.1.3

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

@@ -0,0 +1,71 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { RadioGroupOrientation, RadioGroupVariant, RadioOption } from '../types/jl-radio-group.types';
+export declare const RADIO_GROUP_ORIENTATIONS: readonly RadioGroupOrientation[];
+export declare const RADIO_GROUP_VARIANTS: readonly RadioGroupVariant[];
+/**
+ * One choice among a few, all in view. It behaves as native radios: Tab reaches the chosen option, the arrow keys
+ * move the choice, Space chooses the focused option. `variant="cards"` draws each option as a card.
+ */
+export declare class JlRadioGroup extends JlFormControl {
+    static readonly selector = "jl-radio-group";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: string;
+    }>>;
+    readonly options: Readonly<Readonly<{
+        get(): RadioOption[];
+        set(setter: RadioOption[] | ((prevState: RadioOption[]) => RadioOption[])): void;
+    }>>;
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly orientation: Readonly<Readonly<{
+        get(): RadioGroupOrientation;
+        set(setter: ((prevState: RadioGroupOrientation) => RadioGroupOrientation) | RadioGroupOrientation): void;
+    }>>;
+    readonly variant: Readonly<Readonly<{
+        get(): RadioGroupVariant;
+        set(setter: ((prevState: RadioGroupVariant) => RadioGroupVariant) | RadioGroupVariant): void;
+    }>>;
+    /** The group's name for screen readers; shown over the options as a legend with `legend`. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Shows the label over the options. */
+    readonly legend: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): 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;
+    }>>;
+    private readonly _state;
+    private readonly _refs;
+    /** Focuses the chosen option, or the first one that can be chosen. */
+    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 onKey;
+    /** Moves the focus and the choice together, as native radios do. */
+    private moveFrom;
+    private choose;
+    private radios;
+    private isGroupDisabled;
+    private isEnabled;
+    private renderOptions;
+    private optionElement;
+    /** Checks the option with the value, and gives the Tab stop to it, or else to the first option enabled. */
+    private renderValue;
+    private tabStop;
+    private renderValidity;
+}

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

@@ -0,0 +1,202 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { jsonOf, oneOf } from "../lib/attributes.js";
+import { rovingIndex } from "../lib/roving-index.js";
+import jl_radio_group_default from "./jl-radio-group.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-radio-group.tsx
+var RADIO_GROUP_ORIENTATIONS = ["vertical", "horizontal"];
+var RADIO_GROUP_VARIANTS = ["plain", "cards"];
+var NO_VALUE = "";
+var OPTION_SELECTOR = "[role=\"radio\"]";
+var VALUE_MISSING = "Please select one of these options.";
+/** The keys that move the choice, as with native radios: both arrow pairs whatever the orientation. */
+var MOVES = /* @__PURE__ */ new Map([
+	["ArrowDown", "next"],
+	["ArrowLeft", "previous"],
+	["ArrowRight", "next"],
+	["ArrowUp", "previous"],
+	["End", "last"],
+	["Home", "first"]
+]);
+var SPACE = " ";
+/**
+* One choice among a few, all in view. It behaves as native radios: Tab reaches the chosen option, the arrow keys
+* move the choice, Space chooses the focused option. `variant="cards"` draws each option as a card.
+*/
+var JlRadioGroup = class extends JlFormControl {
+	static selector = "jl-radio-group";
+	events = this.useEvents();
+	options = this.useChange([], () => this.renderOptions(), {
+		attribute: "options",
+		parse: jsonOf([])
+	});
+	value = this.useChange(NO_VALUE, () => this.renderValue(), { attribute: "value" });
+	orientation = this.useChange("vertical", (value) => {
+		this.reflect("orientation", value);
+		this._refs.group.setAttribute("aria-orientation", value);
+	}, {
+		attribute: "orientation",
+		parse: oneOf(RADIO_GROUP_ORIENTATIONS, "vertical")
+	});
+	variant = this.useChange("plain", (value) => this.reflect("variant", value), {
+		attribute: "variant",
+		parse: oneOf(RADIO_GROUP_VARIANTS, "plain")
+	});
+	/** The group's name for screen readers; shown over the options as a legend with `legend`. */
+	label = this.useChange("", (value) => {
+		this._refs.legend.textContent = value;
+	}, { attribute: "label" });
+	/** Shows the label over the options. */
+	legend = this.useChange(false, (value) => {
+		this._refs.legend.classList.toggle("sr-only", !value);
+	}, { attribute: "legend" });
+	required = this.useChange(false, (value) => {
+		this.reflect("required", value);
+		this._refs.group.toggleAttribute("aria-required", value);
+		this.renderValidity();
+	}, { attribute: "required" });
+	disabled = this.useChange(false, (value) => {
+		this.reflect("disabled", value);
+		this.renderValue();
+	}, { attribute: "disabled" });
+	_state = { disabledByForm: false };
+	_refs = this.useRefs((ref) => ({
+		group: ref(".group"),
+		legend: ref(".legend"),
+		list: ref(".options")
+	}));
+	/** Focuses the chosen option, or the first one that can be chosen. */
+	focus(options) {
+		this.radios().find((radio) => radio.tabIndex === 0)?.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "group",
+			role: "radiogroup",
+			"aria-labelledby": "legend",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsx("span", {
+				id: "legend",
+				class: "legend sr-only"
+			}), /* @__PURE__ */ jsx("div", { class: "options" })]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_radio_group_default}`;
+	}
+	onConnect() {
+		const list = this._refs.list;
+		this.on(list, "click", (event) => {
+			const radio = event.target.closest(OPTION_SELECTOR);
+			if (radio !== null && this.isEnabled(radio)) this.choose(radio);
+		});
+		this.on(list, "keydown", (event) => this.onKey(event));
+	}
+	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._state.disabledByForm = disabled;
+		this.whenRendered(() => this.renderValue());
+	}
+	onKey(event) {
+		const radio = event.target.closest(OPTION_SELECTOR);
+		if (radio === null) return;
+		if (event.key === SPACE) {
+			event.preventDefault();
+			this.choose(radio);
+			return;
+		}
+		const move = MOVES.get(event.key);
+		if (move === void 0) return;
+		event.preventDefault();
+		this.moveFrom(radio, move);
+	}
+	/** Moves the focus and the choice together, as native radios do. */
+	moveFrom(radio, move) {
+		const radios = this.radios();
+		const disabled = radios.map((candidate) => !this.isEnabled(candidate));
+		const target = radios[rovingIndex(disabled, radios.indexOf(radio), move)];
+		if (target !== void 0) this.choose(target);
+	}
+	choose(radio) {
+		radio.focus();
+		const value = radio.dataset.value ?? NO_VALUE;
+		if (value === this.value.get()) return;
+		this.value.set(value);
+		this.events.emit("change", value);
+	}
+	radios() {
+		return [...this._refs.list.querySelectorAll(OPTION_SELECTOR)];
+	}
+	isGroupDisabled() {
+		return this.disabled.get() || this._state.disabledByForm;
+	}
+	isEnabled(radio) {
+		return radio.getAttribute("aria-disabled") !== "true";
+	}
+	renderOptions() {
+		this._refs.list.replaceChildren(...this.options.get().map((option, index) => this.optionElement(option, index)));
+		this.renderValue();
+	}
+	optionElement(option, index) {
+		const labelId = `option-${index}-label`;
+		const descriptionId = `option-${index}-description`;
+		const hasDescription = option.description !== void 0 && option.description !== "";
+		return /* @__PURE__ */ jsxs("div", {
+			class: "option",
+			role: "radio",
+			"aria-checked": "false",
+			"aria-labelledby": labelId,
+			"aria-describedby": hasDescription ? descriptionId : void 0,
+			"data-value": option.value,
+			"data-disabled": option.disabled === true ? "true" : void 0,
+			tabIndex: -1,
+			children: [/* @__PURE__ */ jsx("span", { class: "dot" }), /* @__PURE__ */ jsxs("span", {
+				class: "text",
+				children: [/* @__PURE__ */ jsx("span", {
+					id: labelId,
+					class: "label",
+					children: option.label
+				}), hasDescription ? /* @__PURE__ */ jsx("span", {
+					id: descriptionId,
+					class: "description",
+					children: option.description
+				}) : null]
+			})]
+		});
+	}
+	/** Checks the option with the value, and gives the Tab stop to it, or else to the first option enabled. */
+	renderValue() {
+		const value = this.value.get();
+		const radios = this.radios();
+		const groupDisabled = this.isGroupDisabled();
+		for (const radio of radios) {
+			const disabled = groupDisabled || radio.dataset.disabled === "true";
+			radio.setAttribute("aria-checked", String(radio.dataset.value === value));
+			radio.setAttribute("aria-disabled", String(disabled));
+			radio.tabIndex = -1;
+		}
+		this._refs.group.toggleAttribute("aria-disabled", groupDisabled);
+		const stop = this.tabStop(radios, value);
+		if (stop !== void 0) stop.tabIndex = 0;
+		this.internals.setFormValue(value === NO_VALUE ? null : value);
+		this.renderValidity();
+	}
+	tabStop(radios, value) {
+		const enabled = radios.filter((radio) => this.isEnabled(radio));
+		return enabled.find((radio) => radio.dataset.value === value) ?? enabled[0];
+	}
+	renderValidity() {
+		if (!(this.required.get() && this.value.get() === NO_VALUE)) {
+			this.internals.setValidity({});
+			return;
+		}
+		this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this.radios()[0] ?? this._refs.group);
+	}
+};
+JlRadioGroup.register();
+export { JlRadioGroup, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS };

package/dist/molecules/jl-search.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-search.css?raw
+var jl_search_default = ":host {\n  display: block;\n}\n\n.lead {\n  width: 16px;\n  justify-content: center;\n}\n\n:host([loading]) .lead {\n  color: var(--jl-muted);\n}\n\n/* The browser's own clear button: the field draws its own. */\n.native::-webkit-search-cancel-button,\n.native::-webkit-search-decoration {\n  appearance: none;\n}\n\n.keys {\n  display: inline-flex;\n  flex: none;\n  gap: 3px;\n  margin-right: -4px;\n}\n\n.control:focus-within .keys {\n  display: none;\n}\n\n.key {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 5px;\n  border: 1px solid var(--jl-line);\n  border-bottom-width: 2px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-weight: 500;\n  line-height: 1;\n}\n\n:host([size=\"sm\"]) .key {\n  min-width: 18px;\n  height: 18px;\n  padding: 0 4px;\n}\n";
+export { jl_search_default as default };

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

@@ -0,0 +1,71 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { ControlSize } from '../types/options.types';
+/**
+ * A search field: `search` fires once typing pauses for `debounce` milliseconds (and at once on Enter), `input` at
+ * each key. A `shortcut` ("/", "mod+k") focuses it from anywhere on the page and shows its keys in the field.
+ */
+export declare class JlSearch extends JlFormControl {
+    static readonly selector = "jl-search";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        input: string;
+        search: string;
+    }>>;
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly placeholder: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The field's name for screen readers; "Search" when nothing else names it. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** How long typing must pause, in milliseconds, before `search` fires. */
+    readonly debounce: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** Keys that focus the field from anywhere: "/" or "mod+k" (⌘ on a Mac, Ctrl elsewhere). */
+    readonly shortcut: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    /** Shows a spinner in place of the search icon, while results are on their way. */
+    readonly loading: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _form;
+    private readonly _state;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    /** Selects the whole text, ready to be replaced. */
+    select(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    protected resetValue(): void;
+    /** The browser calls it for a disabled fieldset and for the element's own disabled attribute, even before render. */
+    protected setDisabledByForm(disabled: boolean): void;
+    private renderDisabled;
+    private onFieldKey;
+    private onPageKey;
+    private scheduleSearch;
+    private search;
+    private clear;
+    private renderValue;
+    private renderActions;
+    private renderShortcut;
+}

package/dist/molecules/jl-search.js

@@ -0,0 +1,210 @@
+import { BASE_STYLES, CONTROL_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { 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 "../atoms/jl-icon.js";
+import { JlSpinner } from "../atoms/jl-spinner.js";
+import { hasCommandModifier, matchesShortcut, parseShortcut, shortcutAria, shortcutLabels } from "../lib/key-shortcut.js";
+import jl_search_default from "./jl-search.css_raw.js";
+import { css } from "@jadis/core";
+import { Search, X } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-search.tsx
+registerIcons({
+	search: Search,
+	x: X
+});
+var DEFAULT_DEBOUNCE_MS = 250;
+var ICON_SIZE = 16;
+var ACTION_ICON_SIZE = 14;
+var DEFAULT_LABEL = "Search";
+var MAC_PATTERN = /Mac|iPhone|iPad|iPod/;
+var TYPING_TARGETS = "input, textarea, select, [contenteditable]";
+var isMac = () => MAC_PATTERN.test(navigator.userAgent);
+/** Whether the key was pressed while typing in a field, looking through shadow roots. */
+function isTyping(event) {
+	const [target] = event.composedPath();
+	return target instanceof HTMLElement && (target.isContentEditable || target.matches(TYPING_TARGETS));
+}
+/**
+* A search field: `search` fires once typing pauses for `debounce` milliseconds (and at once on Enter), `input` at
+* each key. A `shortcut` ("/", "mod+k") focuses it from anywhere on the page and shows its keys in the field.
+*/
+var JlSearch = class extends JlFormControl {
+	static selector = "jl-search";
+	events = this.useEvents();
+	value = this.useChange("", (value) => this.renderValue(value), { attribute: "value" });
+	placeholder = this.useChange("", (value) => setOrRemove(this._refs.native, "placeholder", value), { attribute: "placeholder" });
+	/** The field's name for screen readers; "Search" when nothing else names it. */
+	label = this.useChange("", (value) => this._refs.native.setAttribute("aria-label", value || DEFAULT_LABEL), { attribute: "label" });
+	/** How long typing must pause, in milliseconds, before `search` fires. */
+	debounce = this.useChange(DEFAULT_DEBOUNCE_MS, () => void 0, { attribute: "debounce" });
+	/** Keys that focus the field from anywhere: "/" or "mod+k" (⌘ on a Mac, Ctrl elsewhere). */
+	shortcut = this.useChange("", () => this.renderShortcut(), { attribute: "shortcut" });
+	size = this.useChange("md", (value) => this.reflect("size", value), {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	/** Shows a spinner in place of the search icon, while results are on their way. */
+	loading = this.useChange(false, (value) => {
+		this._refs.icon.hidden = value;
+		this._refs.spinner.hidden = !value;
+		this._refs.native.toggleAttribute("aria-busy", value);
+		this.reflect("loading", value);
+	}, { attribute: "loading" });
+	disabled = this.useChange(false, (value) => {
+		this.reflect("disabled", value);
+		this.renderDisabled();
+	}, { attribute: "disabled" });
+	_form = { disabled: false };
+	_state = {
+		lastSearch: "",
+		timer: 0
+	};
+	_refs = this.useRefs((ref) => ({
+		clear: ref(".clear"),
+		icon: ref(".icon"),
+		keys: ref(".keys"),
+		native: ref("input"),
+		spinner: ref("jl-spinner")
+	}));
+	focus(options) {
+		this._refs.native.focus(options);
+	}
+	/** Selects the whole text, ready to be replaced. */
+	select() {
+		this._refs.native.select();
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "control",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					class: "adornment lead",
+					children: [/* @__PURE__ */ jsx(JlIcon, {
+						class: "icon",
+						name: "search",
+						size: ICON_SIZE
+					}), /* @__PURE__ */ jsx(JlSpinner, {
+						size: ICON_SIZE,
+						hidden: true
+					})]
+				}),
+				/* @__PURE__ */ jsx("input", {
+					class: "native",
+					type: "search",
+					autocomplete: "off"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					class: "action clear",
+					type: "button",
+					"aria-label": "Clear the search",
+					tabIndex: -1,
+					hidden: true,
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "x",
+						size: ACTION_ICON_SIZE
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					class: "keys",
+					"aria-hidden": "true",
+					hidden: true
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${CONTROL_STYLES}${jl_search_default}`;
+	}
+	onConnect() {
+		const native = this._refs.native;
+		this.on(native, "input", (event) => {
+			event.stopPropagation();
+			this.value.set(native.value);
+			this.events.emit("input", native.value);
+			this.scheduleSearch();
+		});
+		this.on(native, "keydown", (event) => this.onFieldKey(event));
+		this.on(this._refs.clear, "click", () => this.clear());
+		document.addEventListener("keydown", (event) => this.onPageKey(event), { signal: this.killSignal });
+	}
+	onDisconnect() {
+		window.clearTimeout(this._state.timer);
+	}
+	resetValue() {
+		this.value.set(this.getAttribute("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;
+		this.renderActions();
+	}
+	onFieldKey(event) {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			this.search(this.value.get());
+			return;
+		}
+		if (event.key === "Escape" && this.value.get() !== "") {
+			event.preventDefault();
+			event.stopPropagation();
+			this.clear();
+		}
+	}
+	onPageKey(event) {
+		const shortcut = parseShortcut(this.shortcut.get());
+		if (shortcut === null || event.defaultPrevented || this._refs.native.disabled) return;
+		if (!matchesShortcut(event, shortcut, isMac()) || !hasCommandModifier(shortcut) && isTyping(event)) return;
+		event.preventDefault();
+		this.focus();
+		this.select();
+	}
+	scheduleSearch() {
+		window.clearTimeout(this._state.timer);
+		this._state.timer = window.setTimeout(() => {
+			if (this.value.get() !== this._state.lastSearch) this.search(this.value.get());
+		}, this.debounce.get());
+	}
+	search(query) {
+		window.clearTimeout(this._state.timer);
+		this._state.lastSearch = query;
+		this.events.emit("search", query);
+	}
+	clear() {
+		this.value.set("");
+		this.events.emit("input", "");
+		this.search("");
+		this.focus();
+	}
+	renderValue(value) {
+		const native = this._refs.native;
+		if (native.value !== value) native.value = value;
+		this.internals.setFormValue(value);
+		this.renderActions();
+	}
+	renderActions() {
+		const hasText = this.value.get() !== "";
+		this._refs.clear.hidden = !hasText || this._refs.native.disabled;
+		this._refs.keys.hidden = hasText || this._refs.keys.childElementCount === 0;
+	}
+	renderShortcut() {
+		const shortcut = parseShortcut(this.shortcut.get());
+		const labels = shortcut === null ? [] : shortcutLabels(shortcut, isMac());
+		this._refs.keys.replaceChildren(...labels.map((label) => /* @__PURE__ */ jsx("kbd", {
+			class: "key",
+			children: label
+		})));
+		setOrRemove(this._refs.native, "aria-keyshortcuts", shortcut === null ? "" : shortcutAria(shortcut, isMac()));
+		this.renderActions();
+	}
+};
+JlSearch.register();
+export { JlSearch };

package/dist/molecules/jl-segmented.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-segmented.css?raw
+var jl_segmented_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  /* Its own width, even as a grid or flex item that would stretch it: block asks for the whole width. */\n  justify-self: start;\n  max-width: 100%;\n  --height: var(--jl-control-md);\n  --pad: 12px;\n  --font-size: var(--jl-font-sm);\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n  --pad: 10px;\n  --font-size: var(--jl-font-xs);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n  --pad: 16px;\n  --font-size: var(--jl-font-md);\n}\n\n:host([block]) {\n  display: flex;\n  justify-self: stretch;\n}\n\n.group {\n  position: relative;\n  display: flex;\n  flex: 1;\n  overflow-x: auto;\n  scrollbar-width: none;\n  min-width: 0;\n  height: var(--height);\n  padding: 2px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface-2);\n}\n\n.segment {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-width: calc(var(--height) - 6px);\n  padding: 0 var(--pad);\n  border: none;\n  border-radius: calc(var(--jl-radius-sm) - 3px);\n  background: none;\n  color: var(--jl-muted);\n  font-size: var(--font-size);\n  font-weight: 600;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: color var(--jl-fast) var(--jl-ease);\n}\n\n.segment:hover:not(:disabled) {\n  color: var(--jl-text);\n}\n\n.segment[aria-checked=\"true\"] {\n  color: var(--jl-text);\n}\n\n.segment:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n:host([block]) .segment {\n  flex: 1 1 0;\n}\n\n/* The chosen option's raised surface, slid under it. */\n.thumb {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: var(--w);\n  height: var(--h);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: calc(var(--jl-radius-sm) - 3px);\n  /* Raised over the track: white on light grey, a lighter grey on a dark ground. */\n  background: light-dark(var(--jl-surface), var(--jl-surface-3));\n  box-shadow: var(--jl-shadow-sm);\n  transform: translate(var(--x), var(--y));\n  pointer-events: none;\n}\n\n.thumb[data-placed] {\n  transition:\n    transform var(--jl-slow) var(--jl-ease),\n    width var(--jl-slow) var(--jl-ease);\n}\n\n.group[aria-disabled] {\n  opacity: 0.55;\n}\n\n.group[aria-disabled] .segment {\n  opacity: 1;\n}\n\n/* The track scrolls when the options do not fit: a ring drawn outside the segment would be cut. */\n.segment:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n";
+export { jl_segmented_default as default };

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

@@ -0,0 +1,65 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { SegmentedOption } from '../types/jl-segmented.types';
+import type { ControlSize } from '../types/options.types';
+/**
+ * A row of a few exclusive choices with a thumb that slides to the chosen one: a view switch, a period, a
+ * density. It takes part in forms like a radio group; `change` fires with the value people pick.
+ */
+export declare class JlSegmented extends JlFormControl {
+    static readonly selector = "jl-segmented";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: string;
+    }>>;
+    readonly options: Readonly<Readonly<{
+        get(): SegmentedOption[];
+        set(setter: SegmentedOption[] | ((prevState: SegmentedOption[]) => SegmentedOption[])): void;
+    }>>;
+    /** The chosen option's value; the first option that can be chosen when it names none. */
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    /** Takes the whole width, the options sharing it. */
+    readonly block: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The group's name for screen readers, when no visible label names it. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _state;
+    private readonly _resize;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    protected resetValue(): void;
+    /** The browser calls it for a disabled fieldset and for the element's own `disabled`, even before it renders. */
+    protected setDisabledByForm(disabled: boolean): void;
+    private segments;
+    private selectedSegment;
+    private isDisabled;
+    private renderOptions;
+    /** A segment; with only an icon, its value names it. */
+    private segment;
+    /** The chosen option's index: the one `value` names, or else the first that can be chosen. */
+    private selectedIndex;
+    private renderValue;
+    private renderDisabled;
+    private placeThumb;
+    private onKeydown;
+    /** Chooses an option people picked, and says so. */
+    private choose;
+}