@syware/jlib 0.0.0-stage → 0.1.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SyWare
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,134 @@
-# Temporary Holding Version
+<img src="https://bioleyl.github.io/jlib/syware-logo.png" alt="SyWare" height="48">
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# jlib
+
+A component library on [Jadis](https://github.com/bioleyl/jadis) and native Web Components, organised in atomic
+design: tags that work in any page, typed classes for JSX, form fields that submit like native ones, and a bundle
+that holds only the components an app uses. Made by SyWare, for SyWare's own apps, and free for anyone to use.
+
+The documentation site, https://bioleyl.github.io/jlib/ (or `npm run dev`), explains the library and shows every
+component with a live playground, examples and its API.
+
+## Install
+
+```bash
+npm install @syware/jlib @jadis/core
+```
+
+## Use
+
+As HTML tags: define what the page writes (naming the classes keeps them in the bundle).
+
+```ts
+import { define, JlButton, JlInput } from '@syware/jlib';
+
+define(JlButton, JlInput);
+```
+
+```html
+<jl-input name="email" type="email" placeholder="you@example.com"></jl-input>
+<jl-button variant="primary" label="Subscribe"></jl-button>
+```
+
+In JSX with Jadis (`"jsxImportSource": "@jadis/core"`), the classes are typed:
+
+```tsx
+import { JlButton } from '@syware/jlib';
+
+<JlButton variant="primary" icon="plus" label="New project" />;
+```
+
+From code, inputs are change handlers and outputs typed events:
+
+```ts
+const button = new JlButton();
+button.label.set('Save');
+button.events.register('press', () => save());
+```
+
+## Components
+
+- **Atoms**: avatar, badge, button, checkbox, chip, divider, icon, input, kbd, link, progress, progress ring, rating,
+  select, skeleton, slider, spinner, switch, textarea.
+- **Molecules**: accordion, alert, avatar group, breadcrumb, calendar, card, code block, combobox, copy button, date
+  picker, empty state, field, file drop, list item, menu, number input, pagination, popover, radio group, search,
+  segmented control, stat, steps, tabs, tag input, timeline, toast, tooltip.
+- **Organisms**: command palette, confirm, dialog, drawer, navbar, page header, side nav, table, toaster, tree.
+- **Templates**: app shell, split view.
+
+## Icons
+
+Components draw their own icons with no setup. The names a page writes (`<jl-icon name="settings">`,
+`icon="plus"` on a button) are registered once, so a bundle holds only the icons in use:
+
+```ts
+import { Coffee } from 'lucide';
+import { COMMON_ICONS, registerIcons } from '@syware/jlib';
+
+registerIcons({ coffee: Coffee }); // one by one, from lucide
+registerIcons(COMMON_ICONS); // or the ~90 usual ones (about 5 kB)
+```
+
+## Theming
+
+Every colour, radius and size is a CSS custom property (`--jl-*`), defined in the `jlib` cascade layer: a plain rule
+of the page overrides it. Light and dark follow the system; `data-theme="light|dark"` on any element decides for that
+part of the page.
+
+```css
+:root {
+  --jl-accent: #6d4ed8;
+}
+```
+
+## Development
+
+```bash
+npm install
+npm run dev        # the documentation site, with hot reload
+npm run check      # generated files up to date, lint, types, unit tests
+npm run test:e2e   # builds the site and checks every page in a headless Chromium
+npm run build      # the library (dist/), the size report, the site (site/dist/)
+npm run size       # what each component adds to a bundle
+```
+
+`src/index.ts` and `src/all.ts` are generated from the component folders: run `npm run generate` after adding a
+component. Conventions for contributors are in [CLAUDE.md](CLAUDE.md).
+
+## Releasing
+
+Pushing a version tag releases the package: the `Publish to npm` workflow checks and builds it, stages it on npm
+through trusted publishing (no token; the package gets a provenance statement), then creates the GitHub release with
+the package attached. The staged version becomes public once a maintainer approves it with their two-factor
+authentication.
+
+```bash
+npm version patch
+```
+
+```bash
+git push --follow-tags
+```
+
+`npm version` (or `minor`, `major`) bumps package.json and the lockfile, commits and tags `vX.Y.Z`. The workflow
+refuses a tag that is not the version in package.json.
+
+When the run is done (its summary page shows what was staged), approve the version:
+
+```bash
+npm stage list @syware/jlib
+```
+
+```bash
+npm stage approve <stage-id>
+```
+
+## Made by SyWare
+
+jlib is the component library behind SyWare's apps, and it carries their look. SyWare makes it for its own products
+and shares it: use it in yours, change it, ship it. The official SyWare logo is in `site/public/` as SVG:
+`syware-logo.svg`, `syware-logo-dark.svg` for dark backgrounds, and `syware-mark.svg` for the mark alone.
+
+## License
+
+MIT, © SyWare: free to use, change and distribute. See [LICENSE](LICENSE).

package/dist/all.d.ts

@@ -0,0 +1 @@
+export * from './index';

package/dist/all.js

@@ -0,0 +1,75 @@
+import { TOKEN_STYLES } from "./styles/shared.js";
+import { adoptTokens } from "./lib/tokens.js";
+import { JlElement } from "./base/jl-element.js";
+import { JlFormControl } from "./base/jl-form-control.js";
+import { clampedNumber, jsonOf, oneOf } from "./lib/attributes.js";
+import { define } from "./lib/define.js";
+import { PLACEMENTS, computePosition, followAnchor, placeFloating } from "./lib/floating.js";
+import { COMMON_ICONS } from "./lib/icon-set.js";
+import { hasIcon, iconElement, iconNames, registerIcons } from "./lib/icons.js";
+import { CONTROL_SIZES, TONES, TONE_ICONS } from "./lib/options.js";
+import { JlIcon } from "./atoms/jl-icon.js";
+import { AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, JlAvatar } from "./atoms/jl-avatar.js";
+import { JlBadge } from "./atoms/jl-badge.js";
+import { JlSpinner } from "./atoms/jl-spinner.js";
+import { BUTTON_TYPES, BUTTON_VARIANTS, JlButton } from "./atoms/jl-button.js";
+import { JlCheckbox } from "./atoms/jl-checkbox.js";
+import { CHIP_SIZES, JlChip } from "./atoms/jl-chip.js";
+import { DIVIDER_ALIGNS, JlDivider } from "./atoms/jl-divider.js";
+import { INPUT_TYPES, JlInput } from "./atoms/jl-input.js";
+import { JlKbd } from "./atoms/jl-kbd.js";
+import { JlLink, LINK_VARIANTS } from "./atoms/jl-link.js";
+import { JlProgress, PROGRESS_SIZES, PROGRESS_TONES } from "./atoms/jl-progress.js";
+import { JlProgressRing } from "./atoms/jl-progress-ring.js";
+import { JlRating } from "./atoms/jl-rating.js";
+import { JlSelect } from "./atoms/jl-select.js";
+import { JlSkeleton, SKELETON_SHAPES } from "./atoms/jl-skeleton.js";
+import { JlSlider } from "./atoms/jl-slider.js";
+import { JlSwitch, SWITCH_SIZES } from "./atoms/jl-switch.js";
+import { JlTextarea } from "./atoms/jl-textarea.js";
+import { JlAccordionItem } from "./molecules/jl-accordion-item.js";
+import { ACCORDION_VARIANTS, JlAccordion } from "./molecules/jl-accordion.js";
+import { JlAlert } from "./molecules/jl-alert.js";
+import { JlAvatarGroup } from "./molecules/jl-avatar-group.js";
+import { JlBreadcrumb } from "./molecules/jl-breadcrumb.js";
+import { JlCalendar } from "./molecules/jl-calendar.js";
+import { CARD_PADDINGS, JlCard } from "./molecules/jl-card.js";
+import { JlCopyButton } from "./molecules/jl-copy-button.js";
+import { CODE_LANGUAGES, JlCodeBlock } from "./molecules/jl-code-block.js";
+import { JlCombobox } from "./molecules/jl-combobox.js";
+import { JlDatePicker } from "./molecules/jl-date-picker.js";
+import { EMPTY_SIZES, JlEmpty } from "./molecules/jl-empty.js";
+import { FIELD_ORIENTATIONS, JlField } from "./molecules/jl-field.js";
+import { JlFileDrop } from "./molecules/jl-file-drop.js";
+import { JlListItem } from "./molecules/jl-list-item.js";
+import { JlMenu } from "./molecules/jl-menu.js";
+import { JlNumberInput } from "./molecules/jl-number-input.js";
+import { JlPagination } from "./molecules/jl-pagination.js";
+import { JlPopover } from "./molecules/jl-popover.js";
+import { JlRadioGroup, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS } from "./molecules/jl-radio-group.js";
+import { JlSearch } from "./molecules/jl-search.js";
+import { JlSegmented } from "./molecules/jl-segmented.js";
+import { JlStat, STAT_TRENDS } from "./molecules/jl-stat.js";
+import { JlSteps, STEPS_ORIENTATIONS } from "./molecules/jl-steps.js";
+import { JlTabPanel } from "./molecules/jl-tab-panel.js";
+import { JlTabs, TAB_VARIANTS } from "./molecules/jl-tabs.js";
+import { JlTagInput } from "./molecules/jl-tag-input.js";
+import { JlTimeline } from "./molecules/jl-timeline.js";
+import { JlToast, TOAST_TONES } from "./molecules/jl-toast.js";
+import { JlTooltip } from "./molecules/jl-tooltip.js";
+import { JlCommandPalette } from "./organisms/jl-command-palette.js";
+import { DIALOG_SIZES, JlDialog } from "./organisms/jl-dialog.js";
+import { CONFIRM_TONES, JlConfirm, confirmDialog } from "./organisms/jl-confirm.js";
+import { DRAWER_PLACEMENTS, DRAWER_SIZES, JlDrawer } from "./organisms/jl-drawer.js";
+import { JlNavbar } from "./organisms/jl-navbar.js";
+import { JlPageHeader } from "./organisms/jl-page-header.js";
+import { JlSideNav } from "./organisms/jl-side-nav.js";
+import { JlTable, TABLE_SORT_DIRECTIONS } from "./organisms/jl-table.js";
+import { JlToaster, TOASTER_PLACEMENTS, toast } from "./organisms/jl-toaster.js";
+import { JlTree } from "./organisms/jl-tree.js";
+import { JlAppShell } from "./templates/jl-app-shell.js";
+import { JlSplitView, SPLIT_ORIENTATIONS } from "./templates/jl-split-view.js";
+// src/all.ts
+registerIcons(COMMON_ICONS);
+define(JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlEmpty, JlField, JlFileDrop, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTable, JlTabPanel, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree);
+export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-avatar.css?raw
+var jl_avatar_default = ":host {\n  display: inline-flex;\n  flex: none;\n  vertical-align: middle;\n  --size: 32px;\n  --ring: 0px;\n  --ring-color: var(--jl-surface);\n  --fg: var(--jl-text-2);\n  --bg: var(--jl-surface-3);\n}\n\n:host([size=\"sm\"]) {\n  --size: 24px;\n}\n\n:host([size=\"lg\"]) {\n  --size: 40px;\n}\n\n:host([size=\"xl\"]) {\n  --size: 56px;\n}\n\n:host([tone=\"accent\"]) {\n  --fg: var(--jl-accent);\n  --bg: var(--jl-accent-soft);\n}\n\n:host([tone=\"ok\"]) {\n  --fg: var(--jl-ok);\n  --bg: var(--jl-ok-soft);\n}\n\n:host([tone=\"warn\"]) {\n  --fg: var(--jl-warn);\n  --bg: var(--jl-warn-soft);\n}\n\n:host([tone=\"danger\"]) {\n  --fg: var(--jl-danger);\n  --bg: var(--jl-danger-soft);\n}\n\n.avatar {\n  position: relative;\n  display: inline-flex;\n  width: var(--size);\n  height: var(--size);\n}\n\n.face {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border-radius: 50%;\n  background: var(--bg);\n  color: var(--fg);\n  font-size: calc(var(--size) * 0.38);\n  font-weight: 700;\n  letter-spacing: 0.01em;\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 var(--ring) var(--ring-color);\n  user-select: none;\n}\n\n:host([shape=\"square\"]) .face {\n  border-radius: calc(var(--size) * 0.25);\n}\n\n:host([has-image]) .face {\n  background: var(--jl-surface-3);\n}\n\nimg {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.status {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  width: max(7px, calc(var(--size) * 0.26));\n  height: max(7px, calc(var(--size) * 0.26));\n  border-radius: 50%;\n  background: var(--jl-faint);\n  box-shadow: 0 0 0 2px var(--ring-color);\n}\n\n:host([shape=\"square\"]) .status {\n  right: -2px;\n  bottom: -2px;\n}\n\n:host([status=\"online\"]) .status {\n  background: var(--jl-ok);\n}\n\n:host([status=\"busy\"]) .status {\n  background: var(--jl-danger);\n}\n\n:host([status=\"away\"]) .status {\n  background: var(--jl-warn);\n}\n";
+export { jl_avatar_default as default };

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

@@ -0,0 +1,52 @@
+import { JlElement } from '../base/jl-element';
+import type { AvatarShape, AvatarSize, AvatarStatus } from '../types/jl-avatar.types';
+export declare const AVATAR_SIZES: readonly AvatarSize[];
+export declare const AVATAR_SHAPES: readonly AvatarShape[];
+export declare const AVATAR_STATUSES: readonly AvatarStatus[];
+/**
+ * A person or a team: their picture, or their initials on a colour the name always picks. A `status` dot tells
+ * their presence. Slotted content (an icon, a count) replaces the initials.
+ */
+export declare class JlAvatar extends JlElement {
+    static readonly selector = "jl-avatar";
+    /** The person's name: their initials, the background colour, and what screen readers say. */
+    readonly name: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** A picture; the initials show while it loads and when it cannot. */
+    readonly src: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): AvatarSize;
+        set(setter: ((prevState: AvatarSize) => AvatarSize) | AvatarSize): void;
+    }>>;
+    readonly shape: Readonly<Readonly<{
+        get(): AvatarShape;
+        set(setter: ((prevState: AvatarShape) => AvatarShape) | AvatarShape): void;
+    }>>;
+    readonly status: Readonly<Readonly<{
+        get(): "" | AvatarStatus;
+        set(setter: "" | ((prevState: "" | AvatarStatus) => "" | AvatarStatus) | AvatarStatus): void;
+    }>>;
+    /** What screen readers say, when it should differ from the name. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _image;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private loadImage;
+    private settleImage;
+    private renderName;
+    /** The picture once it loaded; otherwise slotted content, the initials, or a person icon, in that order. */
+    private renderFace;
+    private renderSize;
+    private renderStatus;
+    private renderLabel;
+}

package/dist/atoms/jl-avatar.js

@@ -0,0 +1,167 @@
+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 { initialsOf, pickStable } from "../lib/avatar.js";
+import { setOrRemove } from "../lib/dom.js";
+import { hasSlotted } from "../lib/slots.js";
+import jl_avatar_default from "./jl-avatar.css_raw.js";
+import { JlIcon } from "./jl-icon.js";
+import { css } from "@jadis/core";
+import { User } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-avatar.tsx
+registerIcons({ user: User });
+var AVATAR_SIZES = [
+	"md",
+	"sm",
+	"lg",
+	"xl"
+];
+var AVATAR_SHAPES = ["circle", "square"];
+var AVATAR_STATUSES = [
+	"online",
+	"busy",
+	"away",
+	"offline"
+];
+/** The soft tones a name picks its background from; an avatar without a name is neutral. */
+var NAME_TONES = [
+	"accent",
+	"ok",
+	"warn",
+	"danger",
+	"neutral"
+];
+var NO_NAME_TONE = "neutral";
+var STATUS_LABELS = {
+	away: "away",
+	busy: "busy",
+	offline: "offline",
+	online: "online"
+};
+var ICON_SIZES = {
+	lg: 20,
+	md: 16,
+	sm: 13,
+	xl: 28
+};
+var FALLBACK_ICON = "user";
+/**
+* A person or a team: their picture, or their initials on a colour the name always picks. A `status` dot tells
+* their presence. Slotted content (an icon, a count) replaces the initials.
+*/
+var JlAvatar = class extends JlElement {
+	static selector = "jl-avatar";
+	/** The person's name: their initials, the background colour, and what screen readers say. */
+	name = this.useChange("", () => this.renderName(), { attribute: "name" });
+	/** A picture; the initials show while it loads and when it cannot. */
+	src = this.useChange("", (value) => this.loadImage(value), { attribute: "src" });
+	size = this.useChange("md", (value) => this.renderSize(value), {
+		attribute: "size",
+		parse: oneOf(AVATAR_SIZES, "md")
+	});
+	shape = this.useChange("circle", (value) => this.reflect("shape", value), {
+		attribute: "shape",
+		parse: oneOf(AVATAR_SHAPES, "circle")
+	});
+	status = this.useChange("", (value) => this.renderStatus(value), {
+		attribute: "status",
+		parse: oneOf(["", ...AVATAR_STATUSES], "")
+	});
+	/** What screen readers say, when it should differ from the name. */
+	label = this.useChange("", () => this.renderLabel(), { attribute: "label" });
+	_image = { loaded: false };
+	_refs = this.useRefs((ref) => ({
+		avatar: ref(".avatar"),
+		icon: ref(".fallback"),
+		image: ref("img"),
+		initials: ref(".initials"),
+		slot: ref("slot"),
+		status: ref(".status")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("span", {
+			class: "avatar",
+			role: "img",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("span", {
+				class: "face",
+				children: [
+					/* @__PURE__ */ jsx("img", {
+						alt: "",
+						hidden: true,
+						onLoad: () => this.settleImage(true),
+						onError: () => this.settleImage(false)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						class: "initials",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx(JlIcon, {
+						class: "fallback",
+						name: FALLBACK_ICON,
+						hidden: true
+					}),
+					/* @__PURE__ */ jsx("slot", {})
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				class: "status",
+				hidden: true
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_avatar_default}`;
+	}
+	onConnect() {
+		this.renderFace();
+		this.on(this._refs.slot, "slotchange", () => this.renderFace());
+	}
+	loadImage(src) {
+		this._image.loaded = false;
+		setOrRemove(this._refs.image, "src", src);
+		this.renderFace();
+	}
+	settleImage(loaded) {
+		this._image.loaded = loaded && this.src.get() !== "";
+		this.renderFace();
+	}
+	renderName() {
+		const name = this.name.get();
+		this._refs.initials.textContent = initialsOf(name);
+		this.reflect("tone", name.trim() === "" ? NO_NAME_TONE : pickStable(name.trim(), NAME_TONES));
+		this.renderFace();
+		this.renderLabel();
+	}
+	/** The picture once it loaded; otherwise slotted content, the initials, or a person icon, in that order. */
+	renderFace() {
+		const image = this._image.loaded;
+		const custom = hasSlotted(this._refs.slot);
+		const hasInitials = this._refs.initials.textContent !== "";
+		this._refs.image.hidden = !image;
+		this._refs.slot.hidden = image;
+		this._refs.initials.hidden = image || custom || !hasInitials;
+		this._refs.icon.hidden = image || custom || hasInitials;
+		this.reflect("has-image", image);
+	}
+	renderSize(size) {
+		this.reflect("size", size);
+		this._refs.icon.size.set(ICON_SIZES[size]);
+	}
+	renderStatus(status) {
+		this._refs.status.hidden = status === "";
+		this.reflect("status", status);
+		this.renderLabel();
+	}
+	renderLabel() {
+		const name = this.label.get() || this.name.get().trim();
+		const status = this.status.get();
+		const spoken = status === "" ? name : [name, STATUS_LABELS[status]].filter((part) => part !== "").join(", ");
+		const avatar = this._refs.avatar;
+		setOrRemove(avatar, "aria-label", spoken);
+		avatar.setAttribute("role", spoken === "" ? "presentation" : "img");
+	}
+};
+JlAvatar.register();
+export { AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, JlAvatar };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-badge.css?raw
+var jl_badge_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  --fg: var(--jl-text-2);\n  --bg: var(--jl-surface-3);\n}\n\n:host([tone=\"accent\"]) {\n  --fg: var(--jl-accent);\n  --bg: var(--jl-accent-soft);\n}\n\n:host([tone=\"ok\"]) {\n  --fg: var(--jl-ok);\n  --bg: var(--jl-ok-soft);\n}\n\n:host([tone=\"warn\"]) {\n  --fg: var(--jl-warn);\n  --bg: var(--jl-warn-soft);\n}\n\n:host([tone=\"danger\"]) {\n  --fg: var(--jl-danger);\n  --bg: var(--jl-danger-soft);\n}\n\n:host([tone=\"info\"]) {\n  --fg: var(--jl-info);\n  --bg: var(--jl-info-soft);\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  height: 22px;\n  padding: 0 8px;\n  border-radius: var(--jl-radius-pill);\n  background: var(--bg);\n  color: var(--fg);\n  font-size: var(--jl-font-xs);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n}\n\n:host([solid]) .badge {\n  background: var(--fg);\n  color: var(--jl-surface);\n}\n\n:host([tone=\"neutral\"][solid]) .badge {\n  background: var(--jl-text);\n}\n\n.label:empty {\n  display: none;\n}\n\n.dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: currentColor;\n  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);\n}\n";
+export { jl_badge_default as default };

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

@@ -0,0 +1,32 @@
+import { JlElement } from '../base/jl-element';
+import type { Tone } from '../types/options.types';
+/** A short status, coloured by its tone: "Active", "3 new", "Failed". A `dot` marks a live state. */
+export declare class JlBadge extends JlElement {
+    static readonly selector = "jl-badge";
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly tone: Readonly<Readonly<{
+        get(): Tone;
+        set(setter: ((prevState: Tone) => Tone) | Tone): void;
+    }>>;
+    readonly icon: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly dot: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Filled with the tone's colour, for what must stand out. */
+    readonly solid: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    /** An icon wins over the dot: a badge shows one marker at most. */
+    private renderMarker;
+}

package/dist/atoms/jl-badge.js

@@ -0,0 +1,60 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { TONES } from "../lib/options.js";
+import { JlIcon } from "./jl-icon.js";
+import jl_badge_default from "./jl-badge.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-badge.tsx
+var ICON_SIZE = 13;
+/** A short status, coloured by its tone: "Active", "3 new", "Failed". A `dot` marks a live state. */
+var JlBadge = class extends JlElement {
+	static selector = "jl-badge";
+	label = this.useChange("", (value) => {
+		this._refs.label.textContent = value;
+	}, { attribute: "label" });
+	tone = this.useChange("neutral", (value) => this.reflect("tone", value), {
+		attribute: "tone",
+		parse: oneOf(TONES, "neutral")
+	});
+	icon = this.useChange("", () => this.renderMarker(), { attribute: "icon" });
+	dot = this.useChange(false, () => this.renderMarker(), { attribute: "dot" });
+	/** Filled with the tone's colour, for what must stand out. */
+	solid = this.useChange(false, (value) => this.reflect("solid", value), { attribute: "solid" });
+	_refs = this.useRefs((ref) => ({
+		dot: ref(".dot"),
+		icon: ref("jl-icon"),
+		label: ref(".label")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("span", {
+			class: "badge",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					class: "dot",
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx(JlIcon, {
+					size: ICON_SIZE,
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("span", { class: "label" }),
+				/* @__PURE__ */ jsx("slot", {})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_badge_default}`;
+	}
+	/** An icon wins over the dot: a badge shows one marker at most. */
+	renderMarker() {
+		const icon = this.icon.get();
+		this._refs.icon.name.set(icon);
+		this._refs.icon.hidden = icon === "";
+		this._refs.dot.hidden = icon !== "" || !this.dot.get();
+	}
+};
+JlBadge.register();
+export { JlBadge };

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

@@ -0,0 +1,3 @@
+// src/atoms/jl-button.css?raw
+var jl_button_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  --height: var(--jl-control-md);\n  --pad: 14px;\n  --font-size: var(--jl-font-md);\n  --radius: var(--jl-radius-sm);\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n  --pad: 11px;\n  --font-size: var(--jl-font-xs);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n  --pad: 18px;\n  --font-size: 15px;\n  --radius: var(--jl-radius);\n}\n\n:host([block]) {\n  display: flex;\n}\n\nbutton {\n  display: inline-flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  height: var(--height);\n  padding: 0 var(--pad);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--radius);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--font-size);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\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:host([icon-only]) button {\n  width: var(--height);\n  padding: 0;\n}\n\nbutton:hover {\n  background: var(--jl-surface-2);\n}\n\nbutton:active {\n  background: var(--jl-surface-3);\n}\n\n:host([variant=\"primary\"]) button {\n  border-color: transparent;\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n}\n\n:host([variant=\"primary\"]) button:hover {\n  background: var(--jl-accent-strong);\n}\n\n:host([variant=\"ghost\"]) button {\n  border-color: transparent;\n  background: transparent;\n  color: var(--jl-accent);\n}\n\n:host([variant=\"ghost\"]) button:hover {\n  background: var(--jl-accent-soft);\n}\n\n:host([variant=\"danger\"]) button {\n  border-color: transparent;\n  background: var(--jl-danger);\n  color: var(--jl-on-danger);\n}\n\n:host([variant=\"danger\"]) button:hover {\n  background: color-mix(in srgb, var(--jl-danger) 86%, var(--jl-text));\n}\n\n:host([loading]) button {\n  cursor: progress;\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n";
+export { jl_button_default as default };

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

@@ -0,0 +1,70 @@
+import { JlElement } from '../base/jl-element';
+import type { ButtonType, ButtonVariant } from '../types/jl-button.types';
+import type { ControlSize } from '../types/options.types';
+export declare const BUTTON_VARIANTS: readonly ButtonVariant[];
+export declare const BUTTON_TYPES: readonly ButtonType[];
+/**
+ * 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.
+ */
+export declare class JlButton extends JlElement {
+    static readonly selector = "jl-button";
+    static readonly formAssociated = true;
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        press: 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;
+    }>>;
+    readonly iconEnd: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly variant: Readonly<Readonly<{
+        get(): ButtonVariant;
+        set(setter: ((prevState: ButtonVariant) => ButtonVariant) | ButtonVariant): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    readonly type: Readonly<Readonly<{
+        get(): ButtonType;
+        set(setter: ((prevState: ButtonType) => ButtonType) | ButtonType): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Shows a spinner in place of the icon and ignores presses, while the work it started runs. */
+    readonly loading: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The tooltip; also the button's name for screen readers when it only has an icon. */
+    readonly hint: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Takes the whole width of its container. */
+    readonly block: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _internals;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private actOnForm;
+    private renderIcon;
+    private renderSize;
+    private hasSlottedContent;
+    private renderLabel;
+}