@syware/jlib 0.0.0-stage → 0.1.0

package/dist/atoms/jl-button.js

@@ -0,0 +1,146 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { CONTROL_SIZES } from "../lib/options.js";
+import { JlIcon } from "./jl-icon.js";
+import jl_button_default from "./jl-button.css_raw.js";
+import { JlSpinner } from "./jl-spinner.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-button.tsx
+var BUTTON_VARIANTS = [
+	"secondary",
+	"primary",
+	"ghost",
+	"danger"
+];
+var BUTTON_TYPES = [
+	"button",
+	"submit",
+	"reset"
+];
+var ICON_SIZES = {
+	lg: 18,
+	md: 16,
+	sm: 14
+};
+/**
+* A button. Its text is the `label` (or the slotted content); with only an `icon`, its `hint` names it.
+* Listen to `press`: it fires only while the button can be pressed. `type="submit"` submits the surrounding form.
+*/
+var JlButton = class extends JlElement {
+	static selector = "jl-button";
+	static formAssociated = true;
+	events = this.useEvents();
+	label = this.useChange("", () => this.renderLabel(), { attribute: "label" });
+	icon = this.useChange("", (name) => this.renderIcon(this._refs.start, name), { attribute: "icon" });
+	iconEnd = this.useChange("", (name) => this.renderIcon(this._refs.end, name), { attribute: "icon-end" });
+	variant = this.useChange("secondary", (value) => this.reflect("variant", value), {
+		attribute: "variant",
+		parse: oneOf(BUTTON_VARIANTS, "secondary")
+	});
+	size = this.useChange("md", (value) => this.renderSize(value), {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	type = this.useChange("button", () => void 0, {
+		attribute: "type",
+		parse: oneOf(BUTTON_TYPES, "button")
+	});
+	disabled = this.useChange(false, (value) => {
+		this._refs.button.disabled = value;
+		this.reflect("disabled", value);
+	}, { attribute: "disabled" });
+	/** Shows a spinner in place of the icon and ignores presses, while the work it started runs. */
+	loading = this.useChange(false, (value) => {
+		this._refs.spinner.hidden = !value;
+		this._refs.start.hidden = value || this.icon.get() === "";
+		this._refs.button.toggleAttribute("aria-busy", value);
+		this.reflect("loading", value);
+	}, { attribute: "loading" });
+	/** The tooltip; also the button's name for screen readers when it only has an icon. */
+	hint = this.useChange("", () => this.renderLabel(), { attribute: "hint" });
+	/** Takes the whole width of its container. */
+	block = this.useChange(false, (value) => this.reflect("block", value), { attribute: "block" });
+	_internals = this.attachInternals();
+	_refs = this.useRefs((ref) => ({
+		button: ref("button"),
+		end: ref(".end"),
+		label: ref(".text"),
+		slot: ref("slot"),
+		spinner: ref("jl-spinner"),
+		start: ref(".start")
+	}));
+	focus(options) {
+		this._refs.button.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx(JlSpinner, { hidden: true }),
+				/* @__PURE__ */ jsx(JlIcon, {
+					class: "start",
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("span", { class: "text" }),
+				/* @__PURE__ */ jsx("slot", {}),
+				/* @__PURE__ */ jsx(JlIcon, {
+					class: "end",
+					hidden: true
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_button_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.slot, "slotchange", () => this.renderLabel());
+		this.on(this._refs.button, "click", () => {
+			if (this.disabled.get() || this.loading.get()) return;
+			this.events.emit("press");
+			this.actOnForm();
+		});
+	}
+	actOnForm() {
+		const form = this._internals.form;
+		if (form === null) return;
+		({
+			button: () => void 0,
+			reset: () => form.reset(),
+			submit: () => form.requestSubmit()
+		})[this.type.get()]();
+	}
+	renderIcon(icon, name) {
+		icon.name.set(name);
+		icon.hidden = name === "" || icon === this._refs.start && this.loading.get();
+		this.renderLabel();
+	}
+	renderSize(size) {
+		this.reflect("size", size);
+		this._refs.start.size.set(ICON_SIZES[size]);
+		this._refs.end.size.set(ICON_SIZES[size]);
+		this._refs.spinner.size.set(ICON_SIZES[size]);
+	}
+	hasSlottedContent() {
+		return this._refs.slot.assignedNodes().some((node) => node.textContent?.trim() !== "" || node instanceof Element);
+	}
+	renderLabel() {
+		const label = this.label.get();
+		const hint = this.hint.get();
+		const iconOnly = label === "" && !this.hasSlottedContent();
+		this._refs.label.textContent = label;
+		this._refs.label.hidden = label === "";
+		this._refs.button.title = hint;
+		this.reflect("icon-only", iconOnly);
+		if (iconOnly && hint !== "") {
+			this._refs.button.setAttribute("aria-label", hint);
+			return;
+		}
+		this._refs.button.removeAttribute("aria-label");
+	}
+};
+JlButton.register();
+export { BUTTON_TYPES, BUTTON_VARIANTS, JlButton };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-checkbox.css?raw
+var jl_checkbox_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  --box: 18px;\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/* The native box keeps the semantics and the keyboard; its look is drawn here, the marks on top of it. */\n.box {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  width: var(--box);\n  height: var(--box);\n  margin-top: 1px;\n}\n\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-xs);\n  background: var(--jl-surface);\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.native:indeterminate {\n  border-color: var(--jl-accent);\n  background: var(--jl-accent);\n}\n\n.wrap:hover .native:checked:not(:disabled),\n.wrap:hover .native:indeterminate:not(:disabled) {\n  border-color: var(--jl-accent-strong);\n  background: var(--jl-accent-strong);\n}\n\n.mark {\n  position: absolute;\n  inset: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  color: var(--jl-on-accent);\n  pointer-events: none;\n}\n\n.native:checked:not(:indeterminate) ~ .check,\n.native:indeterminate ~ .dash {\n  display: flex;\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\n:host([disabled]) .native:not(:checked, :indeterminate),\n:host(:disabled) .native:not(:checked, :indeterminate) {\n  background: var(--jl-surface-2);\n}\n";
+export { jl_checkbox_default as default };

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

@@ -0,0 +1,61 @@
+import { JlFormControl } from '../base/jl-form-control';
+/**
+ * A box to tick, with its label beside it: clicking the label toggles it too. `checked` is the state; the form
+ * gets `value` while it is checked. `indeterminate` draws a dash for a parent whose children are partly checked.
+ */
+export declare class JlCheckbox extends JlFormControl {
+    static readonly selector = "jl-checkbox";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: boolean;
+    }>>;
+    readonly checked: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Neither checked nor unchecked: a dash, until the next click decides. */
+    readonly indeterminate: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The text beside the box; the default slot takes a richer label. */
+    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;
+    }>>;
+    /** What the form gets while the box is checked. */
+    readonly value: 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;
+    }>>;
+    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;
+    /** Hides the text column when there is nothing to show, so a lone box has no gap beside it. */
+    private renderText;
+    private renderIndeterminate;
+    private renderFormValue;
+}

package/dist/atoms/jl-checkbox.js

@@ -0,0 +1,149 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { registerIcons } from "../lib/icons.js";
+import { JlIcon } from "./jl-icon.js";
+import jl_checkbox_default from "./jl-checkbox.css_raw.js";
+import { css } from "@jadis/core";
+import { Check, Minus } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-checkbox.tsx
+registerIcons({
+	check: Check,
+	minus: Minus
+});
+var ICON_SIZE = 12;
+var DEFAULT_VALUE = "on";
+/**
+* A box to tick, with its label beside it: clicking the label toggles it too. `checked` is the state; the form
+* gets `value` while it is checked. `indeterminate` draws a dash for a parent whose children are partly checked.
+*/
+var JlCheckbox = class extends JlFormControl {
+	static selector = "jl-checkbox";
+	events = this.useEvents();
+	checked = this.useChange(false, (value) => this.renderChecked(value), { attribute: "checked" });
+	/** Neither checked nor unchecked: a dash, until the next click decides. */
+	indeterminate = this.useChange(false, (value) => this.renderIndeterminate(value), { attribute: "indeterminate" });
+	/** The text beside the box; the default slot takes a richer label. */
+	label = this.useChange("", (value) => {
+		this._refs.label.textContent = value;
+		this._refs.label.hidden = value === "";
+		this.renderText();
+	}, { attribute: "label" });
+	/** A smaller line under the label. */
+	description = this.useChange("", (value) => {
+		this._refs.description.textContent = value;
+		this._refs.description.hidden = value === "";
+		this.renderText();
+	}, { attribute: "description" });
+	/** What the form gets while the box is checked. */
+	value = this.useChange(DEFAULT_VALUE, () => this.renderFormValue(), { attribute: "value" });
+	required = this.useChange(false, (value) => {
+		this._refs.native.required = value;
+		this.reflect("required", value);
+		this.mirrorValidity(this._refs.native);
+	}, { attribute: "required" });
+	disabled = this.useChange(false, (value) => {
+		this.reflect("disabled", value);
+		this.renderDisabled();
+	}, { attribute: "disabled" });
+	_form = { disabled: false };
+	_refs = this.useRefs((ref) => ({
+		description: ref(".description"),
+		label: ref(".label"),
+		native: ref("input"),
+		slot: ref("slot"),
+		text: ref(".text")
+	}));
+	focus(options) {
+		this._refs.native.focus(options);
+	}
+	/** Flips the state, as a click would, and fires `change`. */
+	toggle() {
+		this.commit(!this.checked.get());
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("label", {
+			class: "wrap",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("span", {
+				class: "box",
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						class: "native",
+						"aria-describedby": "description"
+					}),
+					/* @__PURE__ */ jsx(JlIcon, {
+						class: "mark check",
+						name: "check",
+						size: ICON_SIZE
+					}),
+					/* @__PURE__ */ jsx(JlIcon, {
+						class: "mark dash",
+						name: "minus",
+						size: ICON_SIZE
+					})
+				]
+			}), /* @__PURE__ */ jsxs("span", {
+				class: "text",
+				hidden: true,
+				children: [/* @__PURE__ */ jsxs("span", {
+					class: "title",
+					children: [/* @__PURE__ */ jsx("span", {
+						class: "label",
+						hidden: true
+					}), /* @__PURE__ */ jsx("slot", {})]
+				}), /* @__PURE__ */ jsx("span", {
+					id: "description",
+					class: "description",
+					hidden: true
+				})]
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_checkbox_default}`;
+	}
+	onConnect() {
+		const native = this._refs.native;
+		this.on(native, "change", () => this.commit(native.checked));
+		this.renderText();
+		this.on(this._refs.slot, "slotchange", () => this.renderText());
+	}
+	resetValue() {
+		this.checked.set(this.hasAttribute("checked"));
+		this.indeterminate.set(this.hasAttribute("indeterminate"));
+	}
+	/** 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;
+	}
+	commit(checked) {
+		this.indeterminate.set(false);
+		this.checked.set(checked);
+		this.events.emit("change", checked);
+	}
+	renderChecked(checked) {
+		const native = this._refs.native;
+		if (native.checked !== checked) native.checked = checked;
+		this.renderFormValue();
+	}
+	/** Hides the text column when there is nothing to show, so a lone box has no gap beside it. */
+	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;
+	}
+	renderIndeterminate(indeterminate) {
+		this._refs.native.indeterminate = indeterminate;
+	}
+	renderFormValue() {
+		this.internals.setFormValue(this.checked.get() ? this.value.get() : null);
+		this.mirrorValidity(this._refs.native);
+	}
+};
+JlCheckbox.register();
+export { JlCheckbox };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-chip.css?raw
+var jl_chip_default = ":host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: middle;\n  --height: 28px;\n  --pad: 10px;\n  --font-size: var(--jl-font-sm);\n  --dismiss: 20px;\n}\n\n:host([size=\"sm\"]) {\n  --height: 24px;\n  --pad: 8px;\n  --font-size: var(--jl-font-xs);\n  --dismiss: 18px;\n}\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  height: var(--height);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  color: var(--jl-text-2);\n  font-size: var(--font-size);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n.main {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--pad);\n  border-radius: inherit;\n}\n\n.label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.label:empty {\n  display: none;\n}\n\n:host([removable]) .main {\n  padding-right: 4px;\n}\n\n:host([selectable]) .main {\n  cursor: pointer;\n}\n\n:host([selectable]:not([disabled])) .chip:hover {\n  background: var(--jl-surface-2);\n}\n\n:host([selected]) .chip,\n:host([selected][selectable]:not([disabled])) .chip:hover {\n  border-color: var(--jl-accent-line);\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n/* The ring goes around the whole chip, which the main part fills. */\n.main:focus-visible {\n  box-shadow: none;\n}\n\n.chip:has(.main:focus-visible) {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.dismiss {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--dismiss);\n  height: var(--dismiss);\n  margin-right: 3px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--jl-muted);\n  cursor: pointer;\n}\n\n.dismiss:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n:host([selected]) .dismiss {\n  color: var(--jl-accent);\n}\n\n:host([selected]) .dismiss:hover {\n  background: color-mix(in srgb, var(--jl-accent) 14%, transparent);\n  color: var(--jl-accent-strong);\n}\n\n:host([disabled]) .chip {\n  opacity: 0.5;\n}\n\n:host([disabled]) .main,\n:host([disabled]) .dismiss {\n  cursor: not-allowed;\n}\n\n:host([disabled]) .dismiss:hover {\n  background: transparent;\n}\n";
+export { jl_chip_default as default };

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

@@ -0,0 +1,59 @@
+import { JlElement } from '../base/jl-element';
+import type { ChipSize } from '../types/jl-chip.types';
+export declare const CHIP_SIZES: readonly ChipSize[];
+/**
+ * A compact token: a filter people turn on and off (`selectable`), a tag they can take away (`removable`), or a
+ * plain label. Fires `change` with the new state when pressed, and `dismiss` when its × is.
+ */
+export declare class JlChip extends JlElement {
+    static readonly selector = "jl-chip";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: boolean;
+        dismiss: undefined;
+    }>>;
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly icon: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Turns on and off when pressed, like a toggle button. */
+    readonly selectable: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly selected: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Shows an × that fires `dismiss`; the page takes the chip away. */
+    readonly removable: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ChipSize;
+        set(setter: ((prevState: ChipSize) => ChipSize) | ChipSize): void;
+    }>>;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    /** Turns the chip on or off as a press would, and fires `change`. */
+    toggle(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private onMainKey;
+    private dismiss;
+    /** A selectable chip is a toggle button; a plain one is only text. */
+    private renderInteraction;
+    /** The chip's icon; a selected filter without one shows a check. */
+    private renderIcon;
+    private renderLabel;
+    private renderSize;
+}

package/dist/atoms/jl-chip.js

@@ -0,0 +1,164 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { JlIcon } from "./jl-icon.js";
+import { isActivationKey } from "../lib/surface.js";
+import jl_chip_default from "./jl-chip.css_raw.js";
+import { css } from "@jadis/core";
+import { Check, X } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-chip.tsx
+registerIcons({
+	check: Check,
+	x: X
+});
+var CHIP_SIZES = ["md", "sm"];
+var ICON_SIZES = {
+	md: 14,
+	sm: 12
+};
+var DISMISS_ICON_SIZES = {
+	md: 13,
+	sm: 12
+};
+var DISMISS_KEYS = ["Backspace", "Delete"];
+var SELECTED_ICON = "check";
+/**
+* A compact token: a filter people turn on and off (`selectable`), a tag they can take away (`removable`), or a
+* plain label. Fires `change` with the new state when pressed, and `dismiss` when its × is.
+*/
+var JlChip = class extends JlElement {
+	static selector = "jl-chip";
+	events = this.useEvents();
+	label = this.useChange("", () => this.renderLabel(), { attribute: "label" });
+	icon = this.useChange("", () => this.renderIcon(), { attribute: "icon" });
+	/** Turns on and off when pressed, like a toggle button. */
+	selectable = this.useChange(false, (value) => {
+		this.reflect("selectable", value);
+		this.renderInteraction();
+		this.renderIcon();
+	}, { attribute: "selectable" });
+	selected = this.useChange(false, (value) => {
+		this.reflect("selected", value);
+		this.renderInteraction();
+		this.renderIcon();
+	}, { attribute: "selected" });
+	/** Shows an × that fires `dismiss`; the page takes the chip away. */
+	removable = this.useChange(false, (value) => {
+		this._refs.dismiss.hidden = !value;
+		this.reflect("removable", value);
+	}, { attribute: "removable" });
+	disabled = this.useChange(false, (value) => {
+		this._refs.dismiss.disabled = value;
+		this.reflect("disabled", value);
+		this.renderInteraction();
+	}, { attribute: "disabled" });
+	size = this.useChange("md", (value) => this.renderSize(value), {
+		attribute: "size",
+		parse: oneOf(CHIP_SIZES, "md")
+	});
+	_refs = this.useRefs((ref) => ({
+		dismiss: ref(".dismiss"),
+		dismissIcon: ref(".dismiss jl-icon"),
+		icon: ref(".icon"),
+		label: ref(".label"),
+		main: ref(".main")
+	}));
+	focus(options) {
+		(this.selectable.get() ? this._refs.main : this._refs.dismiss).focus(options);
+	}
+	/** Turns the chip on or off as a press would, and fires `change`. */
+	toggle() {
+		if (!this.selectable.get() || this.disabled.get()) return;
+		this.selected.set(!this.selected.get());
+		this.events.emit("change", this.selected.get());
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("span", {
+			class: "chip",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("span", {
+				class: "main",
+				children: [
+					/* @__PURE__ */ jsx(JlIcon, {
+						class: "icon",
+						hidden: true
+					}),
+					/* @__PURE__ */ jsx("span", { class: "label" }),
+					/* @__PURE__ */ jsx("slot", {})
+				]
+			}), /* @__PURE__ */ jsx("button", {
+				class: "dismiss",
+				type: "button",
+				"aria-label": "Remove",
+				hidden: true,
+				children: /* @__PURE__ */ jsx(JlIcon, { name: "x" })
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_chip_default}`;
+	}
+	onConnect() {
+		const main = this._refs.main;
+		this.on(main, "click", () => this.toggle());
+		this.on(main, "keydown", (event) => this.onMainKey(event));
+		this.on(this._refs.dismiss, "click", () => this.dismiss());
+	}
+	onMainKey(event) {
+		if (isActivationKey(event)) {
+			event.preventDefault();
+			this.toggle();
+			return;
+		}
+		if (DISMISS_KEYS.includes(event.key) && this.removable.get()) {
+			event.preventDefault();
+			this.dismiss();
+		}
+	}
+	dismiss() {
+		if (this.disabled.get()) return;
+		this.events.emit("dismiss");
+	}
+	/** A selectable chip is a toggle button; a plain one is only text. */
+	renderInteraction() {
+		const main = this._refs.main;
+		const selectable = this.selectable.get();
+		const disabled = this.disabled.get();
+		if (!selectable) {
+			main.removeAttribute("role");
+			main.removeAttribute("tabindex");
+			main.removeAttribute("aria-pressed");
+			main.removeAttribute("aria-disabled");
+			return;
+		}
+		main.setAttribute("role", "button");
+		main.setAttribute("aria-pressed", String(this.selected.get()));
+		main.toggleAttribute("aria-disabled", disabled);
+		if (disabled) {
+			main.removeAttribute("tabindex");
+			return;
+		}
+		main.tabIndex = 0;
+	}
+	/** The chip's icon; a selected filter without one shows a check. */
+	renderIcon() {
+		const icon = this.icon.get();
+		const name = icon === "" && this.selectable.get() && this.selected.get() ? SELECTED_ICON : icon;
+		this._refs.icon.name.set(name);
+		this._refs.icon.hidden = name === "";
+	}
+	renderLabel() {
+		const label = this.label.get();
+		this._refs.label.textContent = label;
+		this._refs.dismiss.setAttribute("aria-label", label === "" ? "Remove" : `Remove ${label}`);
+	}
+	renderSize(size) {
+		this.reflect("size", size);
+		this._refs.icon.size.set(ICON_SIZES[size]);
+		this._refs.dismissIcon.size.set(DISMISS_ICON_SIZES[size]);
+	}
+};
+JlChip.register();
+export { CHIP_SIZES, JlChip };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-divider.css?raw
+var jl_divider_default = ":host {\n  display: block;\n  --color: var(--jl-line);\n  --thickness: 1px;\n  --gap: 12px;\n}\n\n:host([vertical]) {\n  display: inline-flex;\n  align-self: stretch;\n  min-height: 1em;\n  vertical-align: middle;\n}\n\n.divider {\n  display: flex;\n  align-items: center;\n  gap: var(--gap);\n  width: 100%;\n}\n\n:host([vertical]) .divider {\n  flex-direction: column;\n  width: auto;\n  height: auto;\n}\n\n.line {\n  flex: 1;\n  height: var(--thickness);\n  background: var(--color);\n}\n\n:host([vertical]) .line {\n  width: var(--thickness);\n  height: auto;\n  min-height: 4px;\n}\n\n/* Without a label, one line runs through: two would leave the gap between them. */\n:host(:not([labelled])) .after {\n  display: none;\n}\n\n/* A label at the start or the end sits flush with that edge, as a section heading. */\n:host([labelled][align=\"start\"]) .before,\n:host([labelled][align=\"end\"]) .after {\n  display: none;\n}\n\n.label {\n  flex: none;\n  max-width: 80%;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-weight: 600;\n  line-height: 1.4;\n  text-align: center;\n}\n\n:host([vertical]) .label {\n  max-width: none;\n  writing-mode: horizontal-tb;\n}\n";
+export { jl_divider_default as default };

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

@@ -0,0 +1,26 @@
+import { JlElement } from '../base/jl-element';
+import type { DividerAlign } from '../types/jl-divider.types';
+export declare const DIVIDER_ALIGNS: readonly DividerAlign[];
+/**
+ * A line between groups of content, across or (`vertical`) up and down. A `label` sits on the line: "or",
+ * "Today", "Advanced".
+ */
+export declare class JlDivider extends JlElement {
+    static readonly selector = "jl-divider";
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly vertical: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Where the label sits along the line. */
+    readonly align: Readonly<Readonly<{
+        get(): DividerAlign;
+        set(setter: ((prevState: DividerAlign) => DividerAlign) | DividerAlign): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+}