@syware/jlib 0.3.0 → 0.5.0

package/dist/all.js

@@ -8,6 +8,7 @@ import { PLACEMENTS, computePosition, followAnchor, placeFloating } from "./lib/
 import { COMMON_ICONS } from "./lib/icon-set.js";
 import { hasIcon, iconElement, iconNames, registerIcons } from "./lib/icons.js";
 import { CONTROL_SIZES, TONES, TONE_ICONS, TONE_ICON_FILLED } from "./lib/options.js";
+import { formatDuration, formatRelativeTime } from "./lib/time.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";
@@ -29,11 +30,13 @@ 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 { JlAccountButton } from "./molecules/jl-account-button.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 { JlChipGroup } from "./molecules/jl-chip-group.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";
@@ -42,11 +45,13 @@ 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 { JlLoadState, LOAD_SKELETONS, LOAD_STATES } from "./molecules/jl-load-state.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 { JlSearchButton } from "./molecules/jl-search-button.js";
 import { JlSearch } from "./molecules/jl-search.js";
 import { JlSegmented } from "./molecules/jl-segmented.js";
 import { JlStat, STAT_TRENDS } from "./molecules/jl-stat.js";
@@ -59,18 +64,20 @@ 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 { CONFIRM_TONES, JlConfirm, confirmDialog, guardLeave } from "./organisms/jl-confirm.js";
 import { DRAWER_PLACEMENTS, DRAWER_SIZES, JlDrawer } from "./organisms/jl-drawer.js";
 import { JlFlow } from "./organisms/jl-flow.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 { JlTabBar } from "./organisms/jl-tab-bar.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 { JlPage, PAGE_WIDTHS } from "./templates/jl-page.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, JlFlow, 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, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, FLOATING_STYLES, 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, JlFlow, 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, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };
+define(JlAccordion, JlAccordionItem, JlAccountButton, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlEmpty, JlField, JlFileDrop, JlFlow, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlLoadState, JlMenu, JlNavbar, JlNumberInput, JlPage, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSearchButton, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, JlTable, JlTabPanel, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree);
+export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, FLOATING_STYLES, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAccountButton, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlLoadState, JlMenu, JlNavbar, JlNumberInput, JlPage, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSearchButton, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, LOAD_SKELETONS, LOAD_STATES, PAGE_WIDTHS, 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, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, formatDuration, formatRelativeTime, guardLeave, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };

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

@@ -1,6 +1,10 @@
 import { JlElement } from '../base/jl-element';
+import type { StatusLook } from '../types/jl-badge.types';
 import type { Tone } from '../types/options.types';
-/** A short status, coloured by its tone: "Active", "3 new", "Failed". A `dot` marks a live state. */
+/**
+ * A short status, coloured by its tone: "Active", "3 new", "Failed". A `dot` marks a live state; a `hint` says what
+ * the state means, as a tooltip. `showStatus()` takes the look of a state from an app's map of them.
+ */
 export declare class JlBadge extends JlElement {
     static readonly selector = "jl-badge";
     readonly label: Readonly<Readonly<{
@@ -24,7 +28,14 @@ export declare class JlBadge extends JlElement {
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
+    /** What the state means, as a tooltip: "Waiting for logistics to prepare it." */
+    readonly hint: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     private readonly _refs;
+    /** Shows a state as an app's map of states describes it: its label, tone, icon and hint. */
+    showStatus(look: StatusLook): void;
     templateHtml(): Node;
     templateCss(): string;
     /** An icon wins over the dot: a badge shows one marker at most. */

package/dist/atoms/jl-badge.js

@@ -2,13 +2,17 @@ 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 { setOrRemove } from "../lib/dom.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. */
+/**
+* A short status, coloured by its tone: "Active", "3 new", "Failed". A `dot` marks a live state; a `hint` says what
+* the state means, as a tooltip. `showStatus()` takes the look of a state from an app's map of them.
+*/
 var JlBadge = class extends JlElement {
 	static selector = "jl-badge";
 	label = this.useChange("", (value) => {
@@ -22,11 +26,21 @@ var JlBadge = class extends JlElement {
 	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" });
+	/** What the state means, as a tooltip: "Waiting for logistics to prepare it." */
+	hint = this.useChange("", (value) => setOrRemove(this._refs.badge, "title", value), { attribute: "hint" });
 	_refs = this.useRefs((ref) => ({
+		badge: ref(".badge"),
 		dot: ref(".dot"),
 		icon: ref("jl-icon"),
 		label: ref(".label")
 	}));
+	/** Shows a state as an app's map of states describes it: its label, tone, icon and hint. */
+	showStatus(look) {
+		this.label.set(look.label);
+		this.tone.set(look.tone);
+		this.icon.set(look.icon ?? "");
+		this.hint.set(look.hint ?? "");
+	}
 	templateHtml() {
 		return /* @__PURE__ */ jsxs("span", {
 			class: "badge",

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

@@ -1,3 +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";
+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\n/* Moves between the button and the link: its children are laid out by whichever holds it. */\n.content {\n  display: contents;\n}\n\n.base {\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  text-decoration: none;\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]) .base {\n  width: var(--height);\n  padding: 0;\n}\n\n.base:hover {\n  background: var(--jl-surface-2);\n}\n\n.base:active {\n  background: var(--jl-surface-3);\n}\n\n:host([variant=\"primary\"]) .base {\n  border-color: transparent;\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n}\n\n:host([variant=\"primary\"]) .base:hover {\n  background: var(--jl-accent-strong);\n}\n\n:host([variant=\"ghost\"]) .base {\n  border-color: transparent;\n  background: transparent;\n  color: var(--jl-accent);\n}\n\n:host([variant=\"ghost\"]) .base:hover {\n  background: var(--jl-accent-soft);\n}\n\n:host([variant=\"danger\"]) .base {\n  border-color: transparent;\n  background: var(--jl-danger);\n  color: var(--jl-on-danger);\n}\n\n:host([variant=\"danger\"]) .base:hover {\n  background: color-mix(in srgb, var(--jl-danger) 86%, var(--jl-text));\n}\n\n:host([loading]) .base {\n  cursor: progress;\n}\n\n.base:disabled,\n.base[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n";
 export { jl_button_default as default };

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

@@ -6,6 +6,7 @@ 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.
+ * With an `href` it is a link that looks the same: it opens the address, and `press` still fires.
  */
 export declare class JlButton extends JlElement {
     static readonly selector = "jl-button";
@@ -56,12 +57,30 @@ export declare class JlButton extends JlElement {
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
+    /** An address to open: the button becomes a link, for navigation that should open in a new tab when asked. */
+    readonly href: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Where the link opens (`_blank` for a new tab), with an `href`. */
+    readonly target: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     private readonly _internals;
     private readonly _refs;
     focus(options?: FocusOptions): void;
     templateHtml(): Node;
     templateCss(): string;
     onConnect(): void;
+    private canPress;
+    /** The element that takes focus and clicks: the link with an `href`, the button otherwise. */
+    private control;
+    /**
+     * Moves the content into the link or back into the button. A disabled link loses its address, so it can be
+     * neither followed nor focused, and says it is disabled.
+     */
+    private renderLink;
     private actOnForm;
     private renderIcon;
     private renderSize;

package/dist/atoms/jl-button.js

@@ -2,11 +2,12 @@ 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 { setOrRemove } from "../lib/dom.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";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/atoms/jl-button.tsx
 var BUTTON_VARIANTS = [
 	"secondary",
@@ -24,9 +25,13 @@ var ICON_SIZES = {
 	md: 16,
 	sm: 14
 };
+var NEW_TAB = "_blank";
+/** A page opened in a new tab gets no handle on this one. */
+var SAFE_REL = "noopener noreferrer";
 /**
 * 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.
+* With an `href` it is a link that looks the same: it opens the address, and `press` still fires.
 */
 var JlButton = class extends JlElement {
 	static selector = "jl-button";
@@ -49,6 +54,7 @@ var JlButton = class extends JlElement {
 	});
 	disabled = this.useChange(false, (value) => {
 		this._refs.button.disabled = value;
+		this.renderLink();
 		this.reflect("disabled", value);
 	}, { attribute: "disabled" });
 	/** Shows a spinner in place of the icon and ignores presses, while the work it started runs. */
@@ -56,42 +62,57 @@ var JlButton = class extends JlElement {
 		this._refs.spinner.hidden = !value;
 		this._refs.start.hidden = value || this.icon.get() === "";
 		this._refs.button.toggleAttribute("aria-busy", value);
+		this._refs.link.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" });
+	/** An address to open: the button becomes a link, for navigation that should open in a new tab when asked. */
+	href = this.useChange("", () => this.renderLink(), { attribute: "href" });
+	/** Where the link opens (`_blank` for a new tab), with an `href`. */
+	target = this.useChange("", () => this.renderLink(), { attribute: "target" });
 	_internals = this.attachInternals();
 	_refs = this.useRefs((ref) => ({
 		button: ref("button"),
+		content: ref(".content"),
 		end: ref(".end"),
 		label: ref(".text"),
+		link: ref("a"),
 		slot: ref("slot"),
 		spinner: ref("jl-spinner"),
 		start: ref(".start")
 	}));
 	focus(options) {
-		this._refs.button.focus(options);
+		this.control().focus(options);
 	}
 	templateHtml() {
-		return /* @__PURE__ */ jsxs("button", {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+			class: "base",
 			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
-				})
-			]
-		});
+			children: /* @__PURE__ */ jsxs("span", {
+				class: "content",
+				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
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx("a", {
+			class: "base",
+			hidden: true,
+			attrs: { part: "base" }
+		})] });
 	}
 	templateCss() {
 		return css`${BASE_STYLES}${jl_button_default}`;
@@ -99,10 +120,43 @@ var JlButton = class extends JlElement {
 	onConnect() {
 		this.on(this._refs.slot, "slotchange", () => this.renderLabel());
 		this.on(this._refs.button, "click", () => {
-			if (this.disabled.get() || this.loading.get()) return;
+			if (!this.canPress()) return;
 			this.events.emit("press");
 			this.actOnForm();
 		});
+		this.on(this._refs.link, "click", (event) => {
+			if (!this.canPress()) {
+				event.preventDefault();
+				return;
+			}
+			this.events.emit("press");
+		});
+	}
+	canPress() {
+		return !(this.disabled.get() || this.loading.get());
+	}
+	/** The element that takes focus and clicks: the link with an `href`, the button otherwise. */
+	control() {
+		return this.href.get() === "" ? this._refs.button : this._refs.link;
+	}
+	/**
+	* Moves the content into the link or back into the button. A disabled link loses its address, so it can be
+	* neither followed nor focused, and says it is disabled.
+	*/
+	renderLink() {
+		const { button, content, link } = this._refs;
+		const href = this.href.get();
+		const isLink = href !== "";
+		const target = this.target.get();
+		const off = isLink && this.disabled.get();
+		this.control().append(content);
+		button.hidden = isLink;
+		link.hidden = !isLink;
+		setOrRemove(link, "href", isLink && !off ? href : "");
+		setOrRemove(link, "target", target);
+		setOrRemove(link, "rel", target === NEW_TAB ? SAFE_REL : "");
+		setOrRemove(link, "role", off ? "link" : "");
+		setOrRemove(link, "aria-disabled", off ? "true" : "");
 	}
 	actOnForm() {
 		const form = this._internals.form;
@@ -133,13 +187,11 @@ var JlButton = class extends JlElement {
 		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;
+		for (const control of [this._refs.button, this._refs.link]) {
+			setOrRemove(control, "title", hint);
+			setOrRemove(control, "aria-label", iconOnly ? hint : "");
 		}
-		this._refs.button.removeAttribute("aria-label");
 	}
 };
 JlButton.register();

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

@@ -1,3 +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";
+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/* A line box taller than the chip's own line-height of 1: the accents of É, Â, Ö stay inside what overflow clips. */\n.label {\n  overflow: hidden;\n  line-height: 1.4;\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-input.d.ts

@@ -34,6 +34,11 @@ export declare class JlInput extends JlFormControl {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** The keyboard a phone shows for the field (`numeric`, `decimal`, `tel`…), as a native input's `inputmode`. */
+    readonly inputmode: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     readonly min: Readonly<Readonly<{
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;

package/dist/atoms/jl-input.js

@@ -50,6 +50,8 @@ var JlInput = class extends JlFormControl {
 	/** 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" });
+	/** The keyboard a phone shows for the field (`numeric`, `decimal`, `tel`…), as a native input's `inputmode`. */
+	inputmode = this.useChange("", (value) => this.setNative("inputmode", value), { attribute: "inputmode" });
 	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" });

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { computePosition, followAnchor, PLACEMENTS, placeFloating } from './lib/
 export { COMMON_ICONS } from './lib/icon-set';
 export { hasIcon, iconElement, iconNames, registerIcons } from './lib/icons';
 export { CONTROL_SIZES, TONE_ICON_FILLED, TONE_ICONS, TONES } from './lib/options';
+export { formatDuration, formatRelativeTime } from './lib/time';
 export { adoptTokens } from './lib/tokens';
 export { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES, TOKEN_STYLES } from './styles/shared';
 export type * from './types/calendar.types';
@@ -16,9 +17,11 @@ export type * from './types/highlight.types';
 export type * from './types/hotkey.types';
 export type * from './types/jl-accordion.types';
 export type * from './types/jl-avatar.types';
+export type * from './types/jl-badge.types';
 export type * from './types/jl-breadcrumb.types';
 export type * from './types/jl-button.types';
 export type * from './types/jl-card.types';
+export type * from './types/jl-chip-group.types';
 export type * from './types/jl-chip.types';
 export type * from './types/jl-combobox.types';
 export type * from './types/jl-command-palette.types';
@@ -31,8 +34,10 @@ export type * from './types/jl-field.types';
 export type * from './types/jl-flow.types';
 export type * from './types/jl-input.types';
 export type * from './types/jl-link.types';
+export type * from './types/jl-load-state.types';
 export type * from './types/jl-menu.types';
 export type * from './types/jl-navbar.types';
+export type * from './types/jl-page.types';
 export type * from './types/jl-progress.types';
 export type * from './types/jl-radio-group.types';
 export type * from './types/jl-segmented.types';
@@ -44,6 +49,7 @@ export type * from './types/jl-split-view.types';
 export type * from './types/jl-stat.types';
 export type * from './types/jl-steps.types';
 export type * from './types/jl-switch.types';
+export type * from './types/jl-tab-bar.types';
 export type * from './types/jl-table.types';
 export type * from './types/jl-tabs.types';
 export type * from './types/jl-timeline.types';
@@ -78,11 +84,13 @@ export * from './atoms/jl-switch';
 export * from './atoms/jl-textarea';
 export * from './molecules/jl-accordion-item';
 export * from './molecules/jl-accordion';
+export * from './molecules/jl-account-button';
 export * from './molecules/jl-alert';
 export * from './molecules/jl-avatar-group';
 export * from './molecules/jl-breadcrumb';
 export * from './molecules/jl-calendar';
 export * from './molecules/jl-card';
+export * from './molecules/jl-chip-group';
 export * from './molecules/jl-code-block';
 export * from './molecules/jl-combobox';
 export * from './molecules/jl-copy-button';
@@ -91,11 +99,13 @@ export * from './molecules/jl-empty';
 export * from './molecules/jl-field';
 export * from './molecules/jl-file-drop';
 export * from './molecules/jl-list-item';
+export * from './molecules/jl-load-state';
 export * from './molecules/jl-menu';
 export * from './molecules/jl-number-input';
 export * from './molecules/jl-pagination';
 export * from './molecules/jl-popover';
 export * from './molecules/jl-radio-group';
+export * from './molecules/jl-search-button';
 export * from './molecules/jl-search';
 export * from './molecules/jl-segmented';
 export * from './molecules/jl-stat';
@@ -114,8 +124,10 @@ export * from './organisms/jl-flow';
 export * from './organisms/jl-navbar';
 export * from './organisms/jl-page-header';
 export * from './organisms/jl-side-nav';
+export * from './organisms/jl-tab-bar';
 export * from './organisms/jl-table';
 export * from './organisms/jl-toaster';
 export * from './organisms/jl-tree';
 export * from './templates/jl-app-shell';
+export * from './templates/jl-page';
 export * from './templates/jl-split-view';

package/dist/index.js

@@ -8,6 +8,7 @@ import { PLACEMENTS, computePosition, followAnchor, placeFloating } from "./lib/
 import { COMMON_ICONS } from "./lib/icon-set.js";
 import { hasIcon, iconElement, iconNames, registerIcons } from "./lib/icons.js";
 import { CONTROL_SIZES, TONES, TONE_ICONS, TONE_ICON_FILLED } from "./lib/options.js";
+import { formatDuration, formatRelativeTime } from "./lib/time.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";
@@ -29,11 +30,13 @@ 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 { JlAccountButton } from "./molecules/jl-account-button.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 { JlChipGroup } from "./molecules/jl-chip-group.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";
@@ -42,11 +45,13 @@ 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 { JlLoadState, LOAD_SKELETONS, LOAD_STATES } from "./molecules/jl-load-state.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 { JlSearchButton } from "./molecules/jl-search-button.js";
 import { JlSearch } from "./molecules/jl-search.js";
 import { JlSegmented } from "./molecules/jl-segmented.js";
 import { JlStat, STAT_TRENDS } from "./molecules/jl-stat.js";
@@ -59,15 +64,17 @@ 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 { CONFIRM_TONES, JlConfirm, confirmDialog, guardLeave } from "./organisms/jl-confirm.js";
 import { DRAWER_PLACEMENTS, DRAWER_SIZES, JlDrawer } from "./organisms/jl-drawer.js";
 import { JlFlow } from "./organisms/jl-flow.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 { JlTabBar } from "./organisms/jl-tab-bar.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 { JlPage, PAGE_WIDTHS } from "./templates/jl-page.js";
 import { JlSplitView, SPLIT_ORIENTATIONS } from "./templates/jl-split-view.js";
-export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, FLOATING_STYLES, 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, JlFlow, 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, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };
+export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, FLOATING_STYLES, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAccountButton, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlLoadState, JlMenu, JlNavbar, JlNumberInput, JlPage, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSearchButton, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, LOAD_SKELETONS, LOAD_STATES, PAGE_WIDTHS, 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, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, formatDuration, formatRelativeTime, guardLeave, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };

package/dist/lib/attributes.d.ts

@@ -7,3 +7,8 @@ export declare const oneOf: <Value extends string>(allowed: readonly Value[], fa
 export declare const jsonOf: <Value>(fallback: Value) => (value: string | null) => Value;
 /** A number attribute kept within bounds; a missing or unreadable one gives the fallback. */
 export declare const clampedNumber: (fallback: number, min: number, max: number) => (value: string | null) => number;
+/**
+ * An attribute holding a list of strings, as HTML writes it: a JSON list (`'["a","b"]'`), or one plain value
+ * (`open`) for the common case of a single one. Empty or unreadable gives an empty list.
+ */
+export declare const stringList: (value: string | null) => string[];

package/dist/lib/attributes.js

@@ -19,4 +19,16 @@ var clampedNumber = (fallback, min, max) => (value) => {
 	if (Number.isNaN(parsed)) return fallback;
 	return Math.min(max, Math.max(min, parsed));
 };
-export { clampedNumber, jsonOf, oneOf };
+var LIST_START = "[";
+/**
+* An attribute holding a list of strings, as HTML writes it: a JSON list (`'["a","b"]'`), or one plain value
+* (`open`) for the common case of a single one. Empty or unreadable gives an empty list.
+*/
+var stringList = (value) => {
+	const text = value?.trim() ?? "";
+	if (text === "") return [];
+	if (!text.startsWith(LIST_START)) return [text];
+	const parsed = jsonOf([])(text);
+	return Array.isArray(parsed) ? parsed.map(String) : [];
+};
+export { clampedNumber, jsonOf, oneOf, stringList };

package/dist/lib/time.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A duration in the units that read best: "< 1 sec" under a second (never "0.0 s"), then seconds, minutes, hours
+ * and minutes, days and hours.
+ */
+export declare function formatDuration(milliseconds: number, locale?: string): string;
+/**
+ * When something happened, from `now`: "now", "5 minutes ago", "3 hours ago", "yesterday" within a week, then the
+ * date ("12 Mar", with the year when it is not this year's). Times to come read the same way: "in 5 minutes".
+ */
+export declare function formatRelativeTime(date: Date | number | string, now: Date | number, locale?: string): string;