@syware/jlib 0.0.0-stage → 0.1.3

package/dist/atoms/jl-divider.js

@@ -0,0 +1,59 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { setOrRemove } from "../lib/dom.js";
+import jl_divider_default from "./jl-divider.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-divider.tsx
+var DIVIDER_ALIGNS = [
+	"center",
+	"start",
+	"end"
+];
+/**
+* A line between groups of content, across or (`vertical`) up and down. A `label` sits on the line: "or",
+* "Today", "Advanced".
+*/
+var JlDivider = class extends JlElement {
+	static selector = "jl-divider";
+	label = this.useChange("", (value) => {
+		this._refs.label.textContent = value;
+		this._refs.label.hidden = value === "";
+		this.reflect("labelled", value !== "");
+		setOrRemove(this._refs.divider, "aria-label", value);
+	}, { attribute: "label" });
+	vertical = this.useChange(false, (value) => {
+		this.reflect("vertical", value);
+		this._refs.divider.setAttribute("aria-orientation", value ? "vertical" : "horizontal");
+	}, { attribute: "vertical" });
+	/** Where the label sits along the line. */
+	align = this.useChange("center", (value) => this.reflect("align", value), {
+		attribute: "align",
+		parse: oneOf(DIVIDER_ALIGNS, "center")
+	});
+	_refs = this.useRefs((ref) => ({
+		divider: ref(".divider"),
+		label: ref(".label")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "divider",
+			role: "separator",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("span", { class: "line before" }),
+				/* @__PURE__ */ jsx("span", {
+					class: "label",
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("span", { class: "line after" })
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_divider_default}`;
+	}
+};
+JlDivider.register();
+export { DIVIDER_ALIGNS, JlDivider };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-icon.css?raw
+var jl_icon_default = ":host {\n  display: inline-flex;\n  flex: none;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n.icon {\n  display: inline-flex;\n}\n";
+export { jl_icon_default as default };

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

@@ -0,0 +1,25 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * A lucide icon by name: `<jl-icon name="search">`. Decorative unless it has a `label`, which screen readers
+ * read instead. More icons: `registerIcons({ rocket: Rocket })`.
+ */
+export declare class JlIcon extends JlElement {
+    static readonly selector = "jl-icon";
+    readonly name: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    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;
+    private draw;
+    private setAccessibleName;
+}

package/dist/atoms/jl-icon.js

@@ -0,0 +1,41 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { iconElement } from "../lib/icons.js";
+import jl_icon_default from "./jl-icon.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-icon.tsx
+var DEFAULT_SIZE = 16;
+/**
+* A lucide icon by name: `<jl-icon name="search">`. Decorative unless it has a `label`, which screen readers
+* read instead. More icons: `registerIcons({ rocket: Rocket })`.
+*/
+var JlIcon = class extends JlElement {
+	static selector = "jl-icon";
+	name = this.useChange("", () => this.draw(), { attribute: "name" });
+	size = this.useChange(DEFAULT_SIZE, () => this.draw(), { attribute: "size" });
+	label = this.useChange("", (value) => this.setAccessibleName(value), { attribute: "label" });
+	_refs = this.useRefs((ref) => ({ icon: ref(".icon") }));
+	templateHtml() {
+		return /* @__PURE__ */ jsx("span", { class: "icon" });
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_icon_default}`;
+	}
+	draw() {
+		const name = this.name.get();
+		this._refs.icon.replaceChildren(...name === "" ? [] : [iconElement(name, this.size.get())]);
+	}
+	setAccessibleName(label) {
+		const icon = this._refs.icon;
+		if (label === "") {
+			icon.removeAttribute("role");
+			icon.removeAttribute("aria-label");
+			return;
+		}
+		icon.setAttribute("role", "img");
+		icon.setAttribute("aria-label", label);
+	}
+};
+JlIcon.register();
+export { JlIcon };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-input.css?raw
+var jl_input_default = ":host {\n  display: block;\n}\n\n:host([readonly]) .control {\n  background: var(--jl-surface-2);\n}\n\n::slotted([slot=\"start\"]),\n::slotted([slot=\"end\"]) {\n  flex: none;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n}\n\n/* The browser's own clear button and spinners: the field draws its own actions. */\n.native::-webkit-search-cancel-button,\n.native::-webkit-inner-spin-button {\n  appearance: none;\n}\n\n.native[type=\"date\"],\n.native[type=\"time\"],\n.native[type=\"datetime-local\"],\n.native[type=\"month\"],\n.native[type=\"week\"] {\n  font-family: var(--jl-font-mono);\n  font-size: var(--jl-font-sm);\n}\n";
+export { jl_input_default as default };

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

@@ -0,0 +1,112 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { InputType } from '../types/jl-input.types';
+import type { ControlSize } from '../types/options.types';
+export declare const INPUT_TYPES: readonly InputType[];
+/**
+ * A single-line text field that takes part in forms. `value` is the text; `input` fires as people type and
+ * `change` when they commit. Slots `start` and `end` hold adornments such as a unit or a prefix.
+ */
+export declare class JlInput extends JlFormControl {
+    static readonly selector = "jl-input";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        input: string;
+        change: string;
+    }>>;
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly type: Readonly<Readonly<{
+        get(): InputType;
+        set(setter: ((prevState: InputType) => InputType) | InputType): void;
+    }>>;
+    readonly placeholder: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): 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 autocomplete: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly min: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly max: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly step: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly minlength: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly maxlength: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly pattern: 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 readonly: 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;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    /** An icon at the start of the field. */
+    readonly icon: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Shows a button that empties the field while it holds text. */
+    readonly clearable: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _form;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    /** Selects the whole text, ready to be replaced. */
+    select(): 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 clearValue;
+    private toggleReveal;
+    private renderValue;
+    private renderType;
+    private renderDisabled;
+    /** The native field is disabled by the element's own flag or by a disabled fieldset around it. */
+    private syncNativeDisabled;
+    private renderActions;
+    private setNative;
+    private setFlag;
+}

package/dist/atoms/jl-input.js

@@ -0,0 +1,202 @@
+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 "./jl-icon.js";
+import jl_input_default from "./jl-input.css_raw.js";
+import { css } from "@jadis/core";
+import { Eye, EyeOff, X } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-input.tsx
+registerIcons({
+	eye: Eye,
+	"eye-off": EyeOff,
+	x: X
+});
+var INPUT_TYPES = [
+	"text",
+	"email",
+	"password",
+	"number",
+	"search",
+	"tel",
+	"url",
+	"date",
+	"time",
+	"datetime-local",
+	"month",
+	"week"
+];
+var PASSWORD = "password";
+var REVEALED = "text";
+var ICON_SIZE = 16;
+var ACTION_ICON_SIZE = 14;
+/**
+* A single-line text field that takes part in forms. `value` is the text; `input` fires as people type and
+* `change` when they commit. Slots `start` and `end` hold adornments such as a unit or a prefix.
+*/
+var JlInput = class extends JlFormControl {
+	static selector = "jl-input";
+	events = this.useEvents();
+	value = this.useChange("", (value) => this.renderValue(value), { attribute: "value" });
+	type = this.useChange("text", (value) => this.renderType(value), {
+		attribute: "type",
+		parse: oneOf(INPUT_TYPES, "text")
+	});
+	placeholder = this.useChange("", (value) => this.setNative("placeholder", value), { attribute: "placeholder" });
+	/** The field's name for screen readers, when no visible label names it. */
+	label = this.useChange("", (value) => this.setNative("aria-label", value), { attribute: "label" });
+	autocomplete = this.useChange("", (value) => this.setNative("autocomplete", value), { attribute: "autocomplete" });
+	min = this.useChange("", (value) => this.setNative("min", value), { attribute: "min" });
+	max = this.useChange("", (value) => this.setNative("max", value), { attribute: "max" });
+	step = this.useChange("", (value) => this.setNative("step", value), { attribute: "step" });
+	minlength = this.useChange("", (value) => this.setNative("minlength", value), { attribute: "minlength" });
+	maxlength = this.useChange("", (value) => this.setNative("maxlength", value), { attribute: "maxlength" });
+	pattern = this.useChange("", (value) => this.setNative("pattern", value), { attribute: "pattern" });
+	required = this.useChange(false, (value) => this.setFlag("required", value), { attribute: "required" });
+	readonly = this.useChange(false, (value) => this.setFlag("readonly", value), { attribute: "readonly" });
+	disabled = this.useChange(false, (value) => this.renderDisabled(value), { 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" });
+	size = this.useChange("md", (value) => this.reflect("size", value), {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	/** An icon at the start of the field. */
+	icon = this.useChange("", (name) => {
+		this._refs.icon.name.set(name);
+		this._refs.icon.hidden = name === "";
+	}, { attribute: "icon" });
+	/** Shows a button that empties the field while it holds text. */
+	clearable = this.useChange(false, () => this.renderActions(), { attribute: "clearable" });
+	_form = { disabled: false };
+	_refs = this.useRefs((ref) => ({
+		clear: ref(".clear"),
+		icon: ref(".icon"),
+		native: ref("input"),
+		reveal: ref(".reveal"),
+		revealIcon: ref(".reveal jl-icon")
+	}));
+	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__ */ jsx(JlIcon, {
+					class: "adornment icon",
+					size: ICON_SIZE,
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("slot", { name: "start" }),
+				/* @__PURE__ */ jsx("input", { class: "native" }),
+				/* @__PURE__ */ jsx("button", {
+					class: "action clear",
+					type: "button",
+					"aria-label": "Clear",
+					tabIndex: -1,
+					hidden: true,
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "x",
+						size: ACTION_ICON_SIZE
+					})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					class: "action reveal",
+					type: "button",
+					"aria-label": "Show the password",
+					hidden: true,
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "eye",
+						size: ICON_SIZE
+					})
+				}),
+				/* @__PURE__ */ jsx("slot", { name: "end" })
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${CONTROL_STYLES}${jl_input_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.on(native, "change", () => this.events.emit("change", native.value));
+		this.on(this._refs.clear, "click", () => this.clearValue());
+		this.on(this._refs.reveal, "click", () => this.toggleReveal());
+	}
+	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.syncNativeDisabled());
+	}
+	clearValue() {
+		this.value.set("");
+		this.events.emit("input", "");
+		this.events.emit("change", "");
+		this.focus();
+	}
+	toggleReveal() {
+		const native = this._refs.native;
+		const revealed = native.type === PASSWORD;
+		native.type = revealed ? REVEALED : PASSWORD;
+		this._refs.revealIcon.name.set(revealed ? "eye-off" : "eye");
+		this._refs.reveal.setAttribute("aria-label", revealed ? "Hide the password" : "Show the password");
+	}
+	renderValue(value) {
+		const native = this._refs.native;
+		if (native.value !== value) native.value = value;
+		this.internals.setFormValue(value);
+		this.mirrorValidity(native);
+		this.renderActions();
+	}
+	renderType(type) {
+		this._refs.native.type = type;
+		this.renderActions();
+		this.mirrorValidity(this._refs.native);
+	}
+	renderDisabled(disabled) {
+		this.reflect("disabled", disabled);
+		this.syncNativeDisabled();
+	}
+	/** The native field is disabled by the element's own flag or by a disabled fieldset around it. */
+	syncNativeDisabled() {
+		this._refs.native.disabled = this.disabled.get() || this._form.disabled;
+		this.renderActions();
+	}
+	renderActions() {
+		const editable = !this.disabled.get() && !this.readonly.get();
+		this._refs.clear.hidden = !(this.clearable.get() && editable && this.value.get() !== "");
+		this._refs.reveal.hidden = this.type.get() !== PASSWORD;
+	}
+	setNative(name, value) {
+		setOrRemove(this._refs.native, name, value);
+		this.mirrorValidity(this._refs.native);
+	}
+	setFlag(name, value) {
+		this._refs.native.toggleAttribute(name, value);
+		this.reflect(name, value);
+		this.renderActions();
+		this.mirrorValidity(this._refs.native);
+	}
+};
+JlInput.register();
+export { INPUT_TYPES, JlInput };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-kbd.css?raw
+var jl_kbd_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.keys,\n.caps {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\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-strong);\n  border-bottom-width: 2px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface-2);\n  color: var(--jl-text-2);\n  font-family: var(--jl-font-sans);\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n}\n";
+export { jl_kbd_default as default };

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

@@ -0,0 +1,17 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * A keyboard shortcut, one keycap per key: `keys="mod+shift+k"` draws ⌘ ⇧ K on a Mac and Ctrl Shift K elsewhere.
+ * Without `keys`, the element's text is one keycap: `<jl-kbd>Esc</jl-kbd>`.
+ */
+export declare class JlKbd extends JlElement {
+    static readonly selector = "jl-kbd";
+    /** Keys joined by "+": modifiers (mod, ctrl, alt, shift), named keys (enter, esc, up…) and characters. */
+    readonly keys: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    private render;
+}

package/dist/atoms/jl-kbd.js

@@ -0,0 +1,62 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { keycapsOf, spokenKeys } from "../lib/keycaps.js";
+import jl_kbd_default from "./jl-kbd.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-kbd.tsx
+var APPLE_PLATFORM = /mac|iphone|ipad|ipod/i;
+/** Whether this browser runs on an Apple system, where shortcuts use ⌘ rather than Ctrl. */
+function currentPlatform() {
+	if (typeof navigator === "undefined") return "other";
+	const browser = navigator;
+	const platform = browser.userAgentData?.platform ?? browser.platform ?? "";
+	return APPLE_PLATFORM.test(platform) ? "apple" : "other";
+}
+/**
+* A keyboard shortcut, one keycap per key: `keys="mod+shift+k"` draws ⌘ ⇧ K on a Mac and Ctrl Shift K elsewhere.
+* Without `keys`, the element's text is one keycap: `<jl-kbd>Esc</jl-kbd>`.
+*/
+var JlKbd = class extends JlElement {
+	static selector = "jl-kbd";
+	/** Keys joined by "+": modifiers (mod, ctrl, alt, shift), named keys (enter, esc, up…) and characters. */
+	keys = this.useChange("", () => this.render(), { attribute: "keys" });
+	_refs = this.useRefs((ref) => ({
+		caps: ref(".caps"),
+		own: ref(".own"),
+		spoken: ref(".spoken")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("kbd", {
+			class: "keys",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					class: "caps",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", { class: "spoken sr-only" }),
+				/* @__PURE__ */ jsx("kbd", {
+					class: "key own",
+					children: /* @__PURE__ */ jsx("slot", {})
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_kbd_default}`;
+	}
+	render() {
+		const keycaps = keycapsOf(this.keys.get(), currentPlatform());
+		const own = keycaps.length === 0;
+		this._refs.caps.replaceChildren(...keycaps.map((keycap) => /* @__PURE__ */ jsx("kbd", {
+			class: "key",
+			children: keycap.label
+		})));
+		this._refs.spoken.textContent = spokenKeys(keycaps);
+		this._refs.own.hidden = !own;
+		this._refs.caps.hidden = own;
+	}
+};
+JlKbd.register();
+export { JlKbd };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-link.css?raw
+var jl_link_default = ":host {\n  display: inline;\n  --color: var(--jl-accent);\n  --hover: var(--jl-accent-strong);\n  --underline: color-mix(in srgb, var(--jl-accent) 40%, transparent);\n}\n\n:host([variant=\"muted\"]) {\n  --color: var(--jl-muted);\n  --hover: var(--jl-text);\n  --underline: transparent;\n}\n\n:host([variant=\"quiet\"]) {\n  --underline: transparent;\n}\n\na {\n  border-radius: 3px;\n  color: var(--color);\n  font-weight: 600;\n  text-decoration: underline;\n  text-decoration-color: var(--underline);\n  text-decoration-thickness: 1px;\n  text-underline-offset: 0.2em;\n  cursor: pointer;\n  transition:\n    color var(--jl-fast) var(--jl-ease),\n    text-decoration-color var(--jl-fast) var(--jl-ease);\n}\n\na:hover {\n  color: var(--hover);\n  text-decoration-color: currentColor;\n}\n\na:not([href]) {\n  cursor: default;\n}\n\njl-icon {\n  margin-left: 0.2em;\n  vertical-align: -0.1em;\n}\n";
+export { jl_link_default as default };

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

@@ -0,0 +1,37 @@
+import { JlElement } from '../base/jl-element';
+import type { LinkVariant } from '../types/jl-link.types';
+export declare const LINK_VARIANTS: readonly LinkVariant[];
+/**
+ * A link in text or in a list: the browser's own `<a>`, styled. `external` opens it in a new tab, safely, with an
+ * icon that says so. Its text is the `label` or the slotted content.
+ */
+export declare class JlLink extends JlElement {
+    static readonly selector = "jl-link";
+    readonly href: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Where it opens, as an `<a>`'s `target`: `_blank` for a new tab. */
+    readonly target: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Leads away from the app: opens in a new tab, with an icon and without sharing the page. */
+    readonly external: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly variant: Readonly<Readonly<{
+        get(): LinkVariant;
+        set(setter: ((prevState: LinkVariant) => LinkVariant) | LinkVariant): void;
+    }>>;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    private renderTarget;
+}

package/dist/atoms/jl-link.js

@@ -0,0 +1,86 @@
+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 { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "./jl-icon.js";
+import jl_link_default from "./jl-link.css_raw.js";
+import { css } from "@jadis/core";
+import { ExternalLink } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-link.tsx
+registerIcons({ "external-link": ExternalLink });
+var LINK_VARIANTS = [
+	"default",
+	"quiet",
+	"muted"
+];
+var NEW_TAB = "_blank";
+var SAFE_REL = "noopener noreferrer";
+var ICON_SIZE = 13;
+/**
+* A link in text or in a list: the browser's own `<a>`, styled. `external` opens it in a new tab, safely, with an
+* icon that says so. Its text is the `label` or the slotted content.
+*/
+var JlLink = class extends JlElement {
+	static selector = "jl-link";
+	href = this.useChange("", (value) => setOrRemove(this._refs.anchor, "href", value), { attribute: "href" });
+	label = this.useChange("", (value) => {
+		this._refs.label.textContent = value;
+		this._refs.label.hidden = value === "";
+	}, { attribute: "label" });
+	/** Where it opens, as an `<a>`'s `target`: `_blank` for a new tab. */
+	target = this.useChange("", () => this.renderTarget(), { attribute: "target" });
+	/** Leads away from the app: opens in a new tab, with an icon and without sharing the page. */
+	external = this.useChange(false, () => this.renderTarget(), { attribute: "external" });
+	variant = this.useChange("default", (value) => this.reflect("variant", value), {
+		attribute: "variant",
+		parse: oneOf(LINK_VARIANTS, "default")
+	});
+	_refs = this.useRefs((ref) => ({
+		anchor: ref("a"),
+		icon: ref("jl-icon"),
+		label: ref(".label"),
+		newTab: ref(".new-tab")
+	}));
+	focus(options) {
+		this._refs.anchor.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("a", {
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					class: "label",
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("slot", {}),
+				/* @__PURE__ */ jsx(JlIcon, {
+					name: "external-link",
+					size: ICON_SIZE,
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("span", {
+					class: "new-tab sr-only",
+					hidden: true,
+					children: "(opens in a new tab)"
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_link_default}`;
+	}
+	renderTarget() {
+		const anchor = this._refs.anchor;
+		const external = this.external.get();
+		const target = this.target.get() || (external ? NEW_TAB : "");
+		const newTab = target === NEW_TAB;
+		setOrRemove(anchor, "target", target);
+		setOrRemove(anchor, "rel", external || newTab ? SAFE_REL : "");
+		this._refs.icon.hidden = !external;
+		this._refs.newTab.hidden = !newTab;
+	}
+};
+JlLink.register();
+export { JlLink, LINK_VARIANTS };