@syware/jlib 0.4.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,6 +30,7 @@ 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";
@@ -43,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";
@@ -60,7 +64,7 @@ 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";
@@ -71,8 +75,9 @@ 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, JlChipGroup, 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, 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, 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, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, 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/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,6 +17,7 @@ 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';
@@ -32,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';
@@ -80,6 +84,7 @@ 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';
@@ -94,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';
@@ -122,4 +129,5 @@ 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,6 +30,7 @@ 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";
@@ -43,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";
@@ -60,7 +64,7 @@ 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";
@@ -71,5 +75,6 @@ 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, JlChipGroup, 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, JlTabBar, 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/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;

package/dist/lib/time.js

@@ -0,0 +1,64 @@
+// src/lib/time.ts
+var SECOND_MS = 1e3;
+var MINUTES_PER_HOUR = 60;
+var HOURS_PER_DAY = 24;
+var MINUTE_S = 60;
+var HOUR_S = 3600;
+var DAY_S = HOURS_PER_DAY * HOUR_S;
+var NOW_UNDER_S = 45;
+var MINUTES_UNDER_S = 2700;
+var HOURS_UNDER_S = 22 * HOUR_S;
+var DAYS_UNDER_S = 7 * DAY_S;
+/** A number of one unit, as the language writes it short: "33 secs", "3 min", "2 Std.". */
+var unitText = (value, unit, locale) => new Intl.NumberFormat(locale, {
+	maximumFractionDigits: 0,
+	style: "unit",
+	unit,
+	unitDisplay: "short"
+}).format(value);
+/** Two units side by side, the second left out at zero: "2 hrs 10 mins", "3 days". */
+function pair(first, second, locale) {
+	const parts = [unitText(first[0], first[1], locale)];
+	if (second[0] > 0) parts.push(unitText(second[0], second[1], locale));
+	return new Intl.ListFormat(locale, {
+		style: "narrow",
+		type: "unit"
+	}).format(parts);
+}
+/**
+* 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.
+*/
+function formatDuration(milliseconds, locale) {
+	const seconds = Math.max(0, milliseconds) / SECOND_MS;
+	if (seconds < 1) return `< ${unitText(1, "second", locale)}`;
+	if (seconds < MINUTE_S) return unitText(Math.round(seconds), "second", locale);
+	if (seconds < HOUR_S) return unitText(Math.round(seconds / MINUTE_S), "minute", locale);
+	if (seconds < DAY_S) {
+		const minutes = Math.round(seconds / MINUTE_S);
+		return pair([Math.floor(minutes / MINUTES_PER_HOUR), "hour"], [minutes % MINUTES_PER_HOUR, "minute"], locale);
+	}
+	const hours = Math.round(seconds / HOUR_S);
+	return pair([Math.floor(hours / HOURS_PER_DAY), "day"], [hours % HOURS_PER_DAY, "hour"], locale);
+}
+/**
+* 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".
+*/
+function formatRelativeTime(date, now, locale) {
+	const then = new Date(date);
+	const seconds = (then.getTime() - new Date(now).getTime()) / SECOND_MS;
+	const distance = Math.abs(seconds);
+	const relative = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+	if (distance < NOW_UNDER_S) return relative.format(0, "second");
+	if (distance < MINUTES_UNDER_S) return relative.format(Math.round(seconds / MINUTE_S), "minute");
+	if (distance < HOURS_UNDER_S) return relative.format(Math.round(seconds / HOUR_S), "hour");
+	if (distance < DAYS_UNDER_S) return relative.format(Math.round(seconds / DAY_S), "day");
+	const sameYear = then.getFullYear() === new Date(now).getFullYear();
+	return new Intl.DateTimeFormat(locale, {
+		day: "numeric",
+		month: "short",
+		...sameYear ? {} : { year: "numeric" }
+	}).format(then);
+}
+export { formatDuration, formatRelativeTime };

package/dist/molecules/jl-account-button.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-account-button.css?raw
+var jl_account_button_default = ":host {\n  display: block;\n}\n\n.base {\n  display: flex;\n  width: 100%;\n  padding: 6px 8px;\n  border: 0;\n  border-radius: var(--jl-radius-sm);\n  background: transparent;\n  color: var(--jl-text);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n.base:hover {\n  background: var(--jl-surface-2);\n}\n\n.content {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\njl-avatar {\n  flex: none;\n}\n\n.text {\n  display: grid;\n  min-width: 0;\n  line-height: 1.3;\n}\n\n.name,\n.description {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.name {\n  font-size: var(--jl-font-sm);\n  font-weight: 650;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n/* The avatar alone, round. */\n:host([compact]) {\n  display: inline-block;\n}\n\n:host([compact]) .base {\n  width: auto;\n  padding: 2px;\n  border-radius: var(--jl-radius-pill);\n}\n\n:host([compact]) .text {\n  display: none;\n}\n";
+export { jl_account_button_default as default };

package/dist/molecules/jl-account-button.d.ts

@@ -0,0 +1,46 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * The person signed in, where the frame of an app shows them (the foot of the side nav, a phone's top bar): their
+ * avatar, their name, and a line under it such as their role. With an `href` it is a link to their account, else a
+ * button that fires `press` (to open a menu). `compact` keeps the avatar alone, the name as its tooltip.
+ */
+export declare class JlAccountButton extends JlElement {
+    static readonly selector = "jl-account-button";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        press: undefined;
+    }>>;
+    readonly name: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The line under the name: their role, their company. */
+    readonly description: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Their picture; their initials without it. */
+    readonly src: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Their account's address: the button becomes a link. */
+    readonly href: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The avatar alone. */
+    readonly compact: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private control;
+    /** Moves the content into the link or back into the button. */
+    private renderLink;
+    /** Its name for screen readers and its tooltip: the name, then the line under it. */
+    private renderLabel;
+}

package/dist/molecules/jl-account-button.js

@@ -0,0 +1,97 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlAvatar } from "../atoms/jl-avatar.js";
+import jl_account_button_default from "./jl-account-button.css_raw.js";
+import { css } from "@jadis/core";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-account-button.tsx
+/**
+* The person signed in, where the frame of an app shows them (the foot of the side nav, a phone's top bar): their
+* avatar, their name, and a line under it such as their role. With an `href` it is a link to their account, else a
+* button that fires `press` (to open a menu). `compact` keeps the avatar alone, the name as its tooltip.
+*/
+var JlAccountButton = class extends JlElement {
+	static selector = "jl-account-button";
+	events = this.useEvents();
+	name = this.useChange("", (value) => {
+		this._refs.avatar.name.set(value);
+		this._refs.name.textContent = value;
+		this.renderLabel();
+	}, { attribute: "name" });
+	/** The line under the name: their role, their company. */
+	description = this.useChange("", (value) => {
+		this._refs.description.textContent = value;
+		this._refs.description.hidden = value === "";
+		this.renderLabel();
+	}, { attribute: "description" });
+	/** Their picture; their initials without it. */
+	src = this.useChange("", (value) => this._refs.avatar.src.set(value), { attribute: "src" });
+	/** Their account's address: the button becomes a link. */
+	href = this.useChange("", () => this.renderLink(), { attribute: "href" });
+	/** The avatar alone. */
+	compact = this.useChange(false, (value) => this.reflect("compact", value), { attribute: "compact" });
+	_refs = this.useRefs((ref) => ({
+		avatar: ref("jl-avatar"),
+		button: ref("button"),
+		content: ref(".content"),
+		description: ref(".description"),
+		link: ref("a"),
+		name: ref(".name")
+	}));
+	focus(options) {
+		this.control().focus(options);
+	}
+	templateHtml() {
+		const avatar = /* @__PURE__ */ jsx(JlAvatar, { size: "md" });
+		avatar.setAttribute("aria-hidden", "true");
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			class: "base",
+			attrs: { part: "base" },
+			children: /* @__PURE__ */ jsxs("span", {
+				class: "content",
+				children: [avatar, /* @__PURE__ */ jsxs("span", {
+					class: "text",
+					children: [/* @__PURE__ */ jsx("span", { class: "name" }), /* @__PURE__ */ jsx("span", {
+						class: "description",
+						hidden: true
+					})]
+				})]
+			})
+		}), /* @__PURE__ */ jsx("a", {
+			class: "base",
+			hidden: true,
+			attrs: { part: "base" }
+		})] });
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_account_button_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.button, "click", () => this.events.emit("press"));
+		this.on(this._refs.link, "click", () => this.events.emit("press"));
+	}
+	control() {
+		return this.href.get() === "" ? this._refs.button : this._refs.link;
+	}
+	/** Moves the content into the link or back into the button. */
+	renderLink() {
+		const { button, content, link } = this._refs;
+		const href = this.href.get();
+		this.control().append(content);
+		button.hidden = href !== "";
+		link.hidden = href === "";
+		setOrRemove(link, "href", href);
+	}
+	/** Its name for screen readers and its tooltip: the name, then the line under it. */
+	renderLabel() {
+		const label = [this.name.get(), this.description.get()].filter((part) => part !== "").join(", ");
+		for (const control of [this._refs.button, this._refs.link]) {
+			setOrRemove(control, "title", this.name.get());
+			setOrRemove(control, "aria-label", label);
+		}
+	}
+};
+JlAccountButton.register();
+export { JlAccountButton };

package/dist/molecules/jl-load-state.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-load-state.css?raw
+var jl_load_state_default = ":host {\n  display: block;\n}\n\n.bones {\n  display: grid;\n  gap: 16px;\n  padding: 16px;\n}\n\n.bones.lines {\n  gap: 10px;\n}\n\n.bones.cards {\n  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  gap: 12px;\n  padding: 0;\n}\n\n.bone-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.bone-lines {\n  display: grid;\n  flex: 1;\n  gap: 6px;\n}\n\n.bone-card {\n  display: grid;\n  gap: 8px;\n  padding: 12px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-lg);\n}\n";
+export { jl_load_state_default as default };

package/dist/molecules/jl-load-state.d.ts

@@ -0,0 +1,61 @@
+import { JlElement } from '../base/jl-element';
+import type { LoadSkeleton, LoadState, LoadTask } from '../types/jl-load-state.types';
+export declare const LOAD_STATES: readonly LoadState[];
+export declare const LOAD_SKELETONS: readonly LoadSkeleton[];
+/**
+ * What a list or a page shows while its data comes: nothing for a moment, then a skeleton shaped like it; then the
+ * data (the default slot), what to say when there is none (slot `empty`, a `jl-empty`), or, when it failed, what
+ * failed and Try again. `load()` fetches, draws and moves between the states; a later `load()` keeps what is shown
+ * until the new data is there, so live updates do not flash. Or set `state` yourself.
+ */
+export declare class JlLoadState extends JlElement {
+    static readonly selector = "jl-load-state";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        retry: undefined;
+    }>>;
+    readonly state: Readonly<Readonly<{
+        get(): LoadState;
+        set(setter: ((prevState: LoadState) => LoadState) | LoadState): void;
+    }>>;
+    /** The shape of the skeleton; slot `loading` takes one of the page's own instead. */
+    readonly skeleton: Readonly<Readonly<{
+        get(): LoadSkeleton;
+        set(setter: ((prevState: LoadSkeleton) => LoadSkeleton) | LoadSkeleton): void;
+    }>>;
+    /** How many rows, cards or lines the skeleton has. */
+    readonly count: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** Milliseconds before the skeleton shows. */
+    readonly delay: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    readonly errorHeading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly errorText: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly retryLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _work;
+    private readonly _refs;
+    /**
+     * Fetches the data and draws it. The first time, and after a failure, the skeleton shows while it comes; later
+     * (a refresh), what is shown stays until the new data is there, and stays too if it fails. Resolves to whether it
+     * worked: a refresh that fails says so only here, for the page to tell people.
+     */
+    load<Value>(task: LoadTask<Value>): Promise<boolean>;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    private renderState;
+    private renderSkeleton;
+}

package/dist/molecules/jl-load-state.js

@@ -0,0 +1,200 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { clampedNumber, oneOf } from "../lib/attributes.js";
+import { define } from "../lib/define.js";
+import { registerIcons } from "../lib/icons.js";
+import { JlButton } from "../atoms/jl-button.js";
+import { JlSkeleton } from "../atoms/jl-skeleton.js";
+import { JlEmpty } from "./jl-empty.js";
+import jl_load_state_default from "./jl-load-state.css_raw.js";
+import { css } from "@jadis/core";
+import { CircleAlert, RefreshCw } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-load-state.tsx
+registerIcons({
+	"circle-alert": CircleAlert,
+	refresh: RefreshCw
+});
+define(JlEmpty);
+var LOAD_STATES = [
+	"loading",
+	"ready",
+	"empty",
+	"error"
+];
+var LOAD_SKELETONS = [
+	"rows",
+	"cards",
+	"lines"
+];
+var DEFAULT_ERROR_HEADING = "This could not be loaded";
+var DEFAULT_ERROR_TEXT = "Check the connection, then try again. Nothing was changed.";
+var DEFAULT_RETRY_LABEL = "Try again";
+var DEFAULT_DELAY_MS = 300;
+var MAX_DELAY_MS = 5e3;
+var DEFAULT_COUNT = 3;
+var MAX_COUNT = 24;
+var LINE_WIDTHS = [
+	"100%",
+	"92%",
+	"96%",
+	"70%"
+];
+/** The skeleton of each shape, `count` times. */
+var SKELETONS = {
+	cards: (count) => Array.from({ length: count }, () => /* @__PURE__ */ jsxs("div", {
+		class: "bone-card",
+		children: [
+			/* @__PURE__ */ jsx(JlSkeleton, {
+				shape: "rect",
+				height: "120px"
+			}),
+			/* @__PURE__ */ jsx(JlSkeleton, { width: "70%" }),
+			/* @__PURE__ */ jsx(JlSkeleton, { width: "45%" })
+		]
+	})),
+	lines: (count) => Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(JlSkeleton, { width: LINE_WIDTHS[index % LINE_WIDTHS.length] })),
+	rows: (count) => Array.from({ length: count }, () => /* @__PURE__ */ jsxs("div", {
+		class: "bone-row",
+		children: [/* @__PURE__ */ jsx(JlSkeleton, {
+			shape: "circle",
+			width: "32px",
+			height: "32px"
+		}), /* @__PURE__ */ jsxs("div", {
+			class: "bone-lines",
+			children: [/* @__PURE__ */ jsx(JlSkeleton, { width: "60%" }), /* @__PURE__ */ jsx(JlSkeleton, { width: "35%" })]
+		})]
+	}))
+};
+/**
+* What a list or a page shows while its data comes: nothing for a moment, then a skeleton shaped like it; then the
+* data (the default slot), what to say when there is none (slot `empty`, a `jl-empty`), or, when it failed, what
+* failed and Try again. `load()` fetches, draws and moves between the states; a later `load()` keeps what is shown
+* until the new data is there, so live updates do not flash. Or set `state` yourself.
+*/
+var JlLoadState = class extends JlElement {
+	static selector = "jl-load-state";
+	events = this.useEvents();
+	state = this.useChange("loading", (value) => this.renderState(value), {
+		attribute: "state",
+		parse: oneOf(LOAD_STATES, "loading")
+	});
+	/** The shape of the skeleton; slot `loading` takes one of the page's own instead. */
+	skeleton = this.useChange("rows", () => this.renderSkeleton(), {
+		attribute: "skeleton",
+		parse: oneOf(LOAD_SKELETONS, "rows")
+	});
+	/** How many rows, cards or lines the skeleton has. */
+	count = this.useChange(DEFAULT_COUNT, () => this.renderSkeleton(), {
+		attribute: "count",
+		parse: clampedNumber(DEFAULT_COUNT, 1, MAX_COUNT)
+	});
+	/** Milliseconds before the skeleton shows. */
+	delay = this.useChange(DEFAULT_DELAY_MS, () => void 0, {
+		attribute: "delay",
+		parse: clampedNumber(DEFAULT_DELAY_MS, 0, MAX_DELAY_MS)
+	});
+	errorHeading = this.useChange(DEFAULT_ERROR_HEADING, (value) => this._refs.error.heading.set(value), { attribute: "error-heading" });
+	errorText = this.useChange(DEFAULT_ERROR_TEXT, (value) => this._refs.error.description.set(value), { attribute: "error-text" });
+	retryLabel = this.useChange(DEFAULT_RETRY_LABEL, (value) => this._refs.retry.label.set(value), { attribute: "retry-label" });
+	_work = {};
+	_refs = this.useRefs((ref) => ({
+		bones: ref(".bones"),
+		content: ref(".content"),
+		empty: ref(".empty"),
+		error: ref("jl-empty"),
+		loading: ref(".loading"),
+		retry: ref(".retry")
+	}));
+	/**
+	* Fetches the data and draws it. The first time, and after a failure, the skeleton shows while it comes; later
+	* (a refresh), what is shown stays until the new data is there, and stays too if it fails. Resolves to whether it
+	* worked: a refresh that fails says so only here, for the page to tell people.
+	*/
+	async load(task) {
+		this._work.retry = () => this.load(task);
+		const showing = this.state.get() === "ready" || this.state.get() === "empty";
+		if (!showing) this.state.set("loading");
+		try {
+			const value = await task.fetch();
+			task.draw(value);
+			this.state.set(task.isEmpty?.(value) === true ? "empty" : "ready");
+			return true;
+		} catch {
+			if (!showing) this.state.set("error");
+			return false;
+		}
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "load-state",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					class: "loading",
+					hidden: true,
+					"aria-busy": "true",
+					children: /* @__PURE__ */ jsx("slot", {
+						name: "loading",
+						children: /* @__PURE__ */ jsx("div", { class: "bones" })
+					})
+				}),
+				/* @__PURE__ */ jsx("jl-empty", {
+					class: "error",
+					icon: "circle-alert",
+					heading: DEFAULT_ERROR_HEADING,
+					description: DEFAULT_ERROR_TEXT,
+					hidden: true,
+					children: /* @__PURE__ */ jsx(JlButton, {
+						class: "retry",
+						icon: "refresh",
+						label: DEFAULT_RETRY_LABEL
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "empty",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", { name: "empty" })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "content",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", {})
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_load_state_default}`;
+	}
+	onConnect() {
+		this.renderSkeleton();
+		this.renderState(this.state.get());
+		this._refs.retry.events.register("press", () => {
+			this.events.emit("retry");
+			this._work.retry?.();
+		});
+	}
+	onDisconnect() {
+		clearTimeout(this._work.timer);
+	}
+	renderState(state) {
+		const refs = this._refs;
+		clearTimeout(this._work.timer);
+		refs.loading.hidden = true;
+		refs.error.hidden = state !== "error";
+		refs.empty.hidden = state !== "empty";
+		refs.content.hidden = state !== "ready";
+		this.reflect("state", state);
+		if (state === "loading") this._work.timer = setTimeout(() => {
+			refs.loading.hidden = false;
+		}, this.delay.get());
+	}
+	renderSkeleton() {
+		const kind = this.skeleton.get();
+		this._refs.bones.className = `bones ${kind}`;
+		this._refs.bones.replaceChildren(...SKELETONS[kind](this.count.get()));
+	}
+};
+JlLoadState.register();
+export { JlLoadState, LOAD_SKELETONS, LOAD_STATES };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-search-button.css?raw
+var jl_search_button_default = ":host {\n  display: block;\n}\n\n.search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: var(--jl-control-sm);\n  padding: 0 6px 0 10px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  cursor: pointer;\n  transition: border-color var(--jl-fast) var(--jl-ease);\n}\n\n.search:hover {\n  border-color: var(--jl-line-strong);\n  color: var(--jl-text-2);\n}\n\n.text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Folded: the icon alone, as square as a control. */\n:host([compact]) {\n  display: inline-block;\n}\n\n:host([compact]) .search {\n  justify-content: center;\n  width: var(--jl-control-sm);\n  padding: 0;\n}\n\n:host([compact]) .text,\n:host([compact]) jl-kbd {\n  display: none;\n}\n\n/* Touch screens have no keys to press. */\n@media (pointer: coarse) {\n  jl-kbd {\n    display: none;\n  }\n}\n";
+export { jl_search_button_default as default };

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

@@ -0,0 +1,34 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * What opens an app's command palette: it looks like a search field, with the palette's keys (Ctrl K, ⌘K on a
+ * Mac). `compact` keeps the icon alone, for a folded side nav or a phone's top bar. Listen to `press`; the keys are
+ * the palette's own (`jl-command-palette` listens to them), the button only shows them.
+ */
+export declare class JlSearchButton extends JlElement {
+    static readonly selector = "jl-search-button";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        press: undefined;
+    }>>;
+    /** The text, and the button's name: "Search". */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The keys that open the palette, as `jl-kbd` writes them: `mod+k`; `none` for no keys. */
+    readonly hotkey: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The icon alone, the label as its tooltip. */
+    readonly compact: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private renderLabel;
+    private renderHotkey;
+}

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

@@ -0,0 +1,80 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { registerIcons } from "../lib/icons.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { JlKbd } from "../atoms/jl-kbd.js";
+import { parseShortcut, shortcutAria } from "../lib/key-shortcut.js";
+import jl_search_button_default from "./jl-search-button.css_raw.js";
+import { css } from "@jadis/core";
+import { Search } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-search-button.tsx
+registerIcons({ search: Search });
+var DEFAULT_LABEL = "Search";
+var DEFAULT_HOTKEY = "mod+k";
+var NO_HOTKEY = "none";
+var ICON_SIZE = 15;
+var MAC_PATTERN = /Mac|iPhone|iPad|iPod/;
+var isMac = () => MAC_PATTERN.test(navigator.userAgent);
+/**
+* What opens an app's command palette: it looks like a search field, with the palette's keys (Ctrl K, ⌘K on a
+* Mac). `compact` keeps the icon alone, for a folded side nav or a phone's top bar. Listen to `press`; the keys are
+* the palette's own (`jl-command-palette` listens to them), the button only shows them.
+*/
+var JlSearchButton = class extends JlElement {
+	static selector = "jl-search-button";
+	events = this.useEvents();
+	/** The text, and the button's name: "Search". */
+	label = this.useChange(DEFAULT_LABEL, () => this.renderLabel(), { attribute: "label" });
+	/** The keys that open the palette, as `jl-kbd` writes them: `mod+k`; `none` for no keys. */
+	hotkey = this.useChange(DEFAULT_HOTKEY, () => this.renderHotkey(), { attribute: "hotkey" });
+	/** The icon alone, the label as its tooltip. */
+	compact = this.useChange(false, (value) => this.reflect("compact", value), { attribute: "compact" });
+	_refs = this.useRefs((ref) => ({
+		button: ref("button"),
+		keys: ref("jl-kbd"),
+		text: ref(".text")
+	}));
+	focus(options) {
+		this._refs.button.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			class: "search",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx(JlIcon, {
+					name: "search",
+					size: ICON_SIZE
+				}),
+				/* @__PURE__ */ jsx("span", { class: "text" }),
+				/* @__PURE__ */ jsx(JlKbd, {})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_search_button_default}`;
+	}
+	onConnect() {
+		this.renderLabel();
+		this.renderHotkey();
+		this.on(this._refs.button, "click", () => this.events.emit("press"));
+	}
+	renderLabel() {
+		const label = this.label.get() || DEFAULT_LABEL;
+		this._refs.text.textContent = label;
+		this._refs.button.setAttribute("aria-label", label);
+		this._refs.button.title = label;
+	}
+	renderHotkey() {
+		const text = this.hotkey.get();
+		const shortcut = text === NO_HOTKEY ? null : parseShortcut(text);
+		this._refs.keys.keys.set(shortcut === null ? "" : text);
+		this._refs.keys.hidden = shortcut === null;
+		setOrRemove(this._refs.button, "aria-keyshortcuts", shortcut === null ? "" : shortcutAria(shortcut, isMac()));
+	}
+};
+JlSearchButton.register();
+export { JlSearchButton };

package/dist/organisms/jl-confirm.d.ts

@@ -1,5 +1,5 @@
 import { JlElement } from '../base/jl-element';
-import type { ConfirmOptions, ConfirmTone } from '../types/jl-confirm.types';
+import type { ConfirmOptions, ConfirmTone, LeaveGuardOptions } from '../types/jl-confirm.types';
 export declare const CONFIRM_TONES: readonly ConfirmTone[];
 /**
  * A yes-or-no question in a small modal dialog. `ask()` opens it and resolves `true` on confirm, `false` on cancel,
@@ -54,3 +54,9 @@ export declare class JlConfirm extends JlElement {
  * ```
  */
 export declare function confirmDialog(options: ConfirmOptions): Promise<boolean>;
+/**
+ * Guards a form or an editor against leaving with changes not saved. Closing or reloading the tab asks the
+ * browser's own question; the function it returns asks in the page, for the app's router to call before it moves
+ * on: `if (!(await canLeave())) return;`. It resolves `true` at once when nothing would be lost.
+ */
+export declare function guardLeave(options: LeaveGuardOptions): () => Promise<boolean>;

package/dist/organisms/jl-confirm.js

@@ -129,4 +129,25 @@ function confirmDialog(options) {
 	document.body.append(element);
 	return element.ask().finally(() => element.remove());
 }
-export { CONFIRM_TONES, JlConfirm, confirmDialog };
+var LEAVE_HEADING = "Leave without saving?";
+var LEAVE_TEXT = "Your changes are lost.";
+var LEAVE_LABEL = "Leave";
+var STAY_LABEL = "Keep editing";
+/**
+* Guards a form or an editor against leaving with changes not saved. Closing or reloading the tab asks the
+* browser's own question; the function it returns asks in the page, for the app's router to call before it moves
+* on: `if (!(await canLeave())) return;`. It resolves `true` at once when nothing would be lost.
+*/
+function guardLeave(options) {
+	window.addEventListener("beforeunload", (event) => {
+		if (options.isDirty()) event.preventDefault();
+	}, { signal: options.signal });
+	return async () => !options.isDirty() || confirmDialog({
+		cancelLabel: options.stayLabel ?? STAY_LABEL,
+		confirmLabel: options.leaveLabel ?? LEAVE_LABEL,
+		heading: options.heading ?? LEAVE_HEADING,
+		text: options.text ?? LEAVE_TEXT,
+		tone: "danger"
+	});
+}
+export { CONFIRM_TONES, JlConfirm, confirmDialog, guardLeave };

package/dist/organisms/jl-toaster.d.ts

@@ -24,7 +24,10 @@ export declare class JlToaster extends JlElement {
     }>>;
     private readonly _watched;
     private readonly _refs;
-    /** Shows a notification; `duration` is 5 seconds unless given, and it has a close button unless told not to. */
+    /**
+     * Shows a notification. It stays 5 seconds unless `duration` says otherwise, 8 for an error or with an action;
+     * it has a close button unless told not to.
+     */
     notify(options: ToastOptions): ToastHandle;
     templateHtml(): Node;
     templateCss(): string;

package/dist/organisms/jl-toaster.js

@@ -16,8 +16,12 @@ var TOASTER_PLACEMENTS = [
 var DEFAULT_MAX = 3;
 var MAX_LIMIT = 20;
 var DEFAULT_DURATION = 5e3;
+var LONG_DURATION = 8e3;
+var LONG_TONE = "danger";
 var DEFAULT_LABEL = "Notifications";
 var STACKED = "data-stacked";
+/** How long a toast stays when its options do not say: longer for an error, or to give time to press its action. */
+var defaultDuration = (options) => options.tone === LONG_TONE || (options.actionLabel ?? "") !== "" ? LONG_DURATION : DEFAULT_DURATION;
 var OPEN = ":popover-open";
 /**
 * The corner of the window where notifications stack, newest nearest the edge, at most `max` at a time. It lives in
@@ -42,14 +46,17 @@ var JlToaster = class extends JlElement {
 		region: ref(".region"),
 		slot: ref("slot")
 	}));
-	/** Shows a notification; `duration` is 5 seconds unless given, and it has a close button unless told not to. */
+	/**
+	* Shows a notification. It stays 5 seconds unless `duration` says otherwise, 8 for an error or with an action;
+	* it has a close button unless told not to.
+	*/
 	notify(options) {
 		const toast = /* @__PURE__ */ jsx(JlToast, {
 			heading: options.heading,
 			text: options.text,
 			tone: options.tone,
 			icon: options.icon,
-			duration: options.duration ?? DEFAULT_DURATION,
+			duration: options.duration ?? defaultDuration(options),
 			closable: options.closable ?? true,
 			actionLabel: options.actionLabel
 		});

package/dist/styles/control.css_raw.js

@@ -1,3 +1,3 @@
 // src/styles/control.css?raw
-var control_default = "/* The look of the fields people type in: text fields, selects and areas share it. */\n.control {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  min-height: var(--height, var(--jl-control-md));\n  padding: 0 12px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n.control:hover {\n  border-color: color-mix(in srgb, var(--jl-line-strong) 60%, var(--jl-text) 18%);\n}\n\n.control:focus-within {\n  border-color: var(--jl-accent);\n  box-shadow: var(--jl-focus-ring);\n}\n\n:host([invalid]) .control {\n  border-color: var(--jl-danger);\n}\n\n:host([invalid]) .control:focus-within {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jl-danger) 25%, transparent);\n}\n\n:host([disabled]) .control,\n:host(:disabled) .control {\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  cursor: not-allowed;\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n}\n\n/* The native element inside the frame: it takes the room and leaves the frame to draw the border. */\n.native {\n  flex: 1;\n  min-width: 0;\n  height: calc(var(--height, var(--jl-control-md)) - 2px);\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n\n.native::placeholder {\n  color: var(--jl-faint);\n}\n\n.native:focus-visible {\n  box-shadow: none;\n}\n\n.native:disabled {\n  cursor: not-allowed;\n}\n\n.adornment {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  color: var(--jl-faint);\n}\n\n/* A small button inside the frame: clear, reveal the password, step a number. */\n.action {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  margin-right: -4px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  color: var(--jl-faint);\n  cursor: pointer;\n}\n\n.action:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n";
+var control_default = "/* The look of the fields people type in: text fields, selects and areas share it. */\n.control {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  min-height: var(--height, var(--jl-control-md));\n  padding: 0 12px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--jl-control-font);\n  line-height: 20px;\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n.control:hover {\n  border-color: color-mix(in srgb, var(--jl-line-strong) 60%, var(--jl-text) 18%);\n}\n\n.control:focus-within {\n  border-color: var(--jl-accent);\n  box-shadow: var(--jl-focus-ring);\n}\n\n:host([invalid]) .control {\n  border-color: var(--jl-danger);\n}\n\n:host([invalid]) .control:focus-within {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jl-danger) 25%, transparent);\n}\n\n:host([disabled]) .control,\n:host(:disabled) .control {\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  cursor: not-allowed;\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n}\n\n/* The native element inside the frame: it takes the room and leaves the frame to draw the border. */\n.native {\n  flex: 1;\n  min-width: 0;\n  height: calc(var(--height, var(--jl-control-md)) - 2px);\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n\n.native::placeholder {\n  color: var(--jl-faint);\n}\n\n.native:focus-visible {\n  box-shadow: none;\n}\n\n.native:disabled {\n  cursor: not-allowed;\n}\n\n.adornment {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  color: var(--jl-faint);\n}\n\n/* A small button inside the frame: clear, reveal the password, step a number. */\n.action {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  margin-right: -4px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  color: var(--jl-faint);\n  cursor: pointer;\n}\n\n.action:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n";
 export { control_default as default };

package/dist/styles/tokens.css_raw.js

@@ -1,3 +1,3 @@
 // src/styles/tokens.css?raw
-var tokens_default = "/*\n * The design tokens, as swai and swcode have them: ink and white, flat surfaces separated by lines, and one blue\n * that marks what is live, selected or waiting for a person. Custom properties cross shadow roots, so every\n * component reads them. They sit in the `jlib` layer: any unlayered rule of the page overrides them.\n */\n@layer jlib {\n  :root,\n  [data-theme=\"light\"] {\n    color-scheme: light;\n    --jl-font-sans: \"Manrope Variable\", \"Manrope\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n    --jl-font-mono: \"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace;\n\n    --jl-font-xs: 12px;\n    --jl-font-sm: 13px;\n    --jl-font-md: 14px;\n    --jl-font-lg: 16px;\n    --jl-font-xl: 20px;\n    --jl-font-2xl: 28px;\n\n    --jl-text: #0b0b0c;\n    --jl-text-2: #3a3f47;\n    /* Secondary text: 6.2:1 on white. */\n    --jl-muted: #5b616b;\n    /* Icons and decorations only: 3.2:1 on white is enough for them, not for text. */\n    --jl-faint: #8a9099;\n\n    --jl-bg: #ffffff;\n    --jl-surface: #ffffff;\n    --jl-surface-2: #f7f8f9;\n    --jl-surface-3: #eef0f2;\n    --jl-code-bg: #f0f2f4;\n    --jl-line: #e6e8eb;\n    --jl-line-soft: #eef0f2;\n    --jl-line-strong: #d5d9de;\n\n    /* The SyWare logo's blue: marks, focus rings, progress. 3.8:1 on white: enough for shapes, never for text. */\n    --jl-brand: #0e88d3;\n    /* The same hue, deep enough to carry text: buttons, links, the selection. 5.2:1 on white. */\n    --jl-accent: #0c72b0;\n    --jl-accent-strong: #095a8b;\n    --jl-accent-soft: #e9f4fb;\n    --jl-accent-line: #b7dbf2;\n    --jl-on-accent: #ffffff;\n\n    --jl-ok: #17784a;\n    --jl-ok-soft: #ecf6f0;\n    --jl-warn: #9a5b00;\n    --jl-warn-soft: #fcf4e6;\n    --jl-danger: #b42318;\n    --jl-danger-soft: #fdf0ef;\n    --jl-on-danger: #ffffff;\n    --jl-info: #0c72b0;\n    --jl-info-soft: #e9f4fb;\n\n    /* Code: the accent for keywords, quiet colours from the same family for the rest. */\n    --jl-code-keyword: #0c72b0;\n    --jl-code-tag: #095a8b;\n    --jl-code-attribute: #5b48c8;\n    --jl-code-string: #17784a;\n    --jl-code-number: #9a5b00;\n    --jl-code-function: #3d5a80;\n    --jl-code-property: #127a72;\n    --jl-code-comment: #8a9099;\n\n    --jl-radius-xs: 6px;\n    --jl-radius-sm: 8px;\n    --jl-radius: 10px;\n    --jl-radius-lg: 12px;\n    --jl-radius-xl: 20px;\n    --jl-radius-pill: 999px;\n\n    /* Spacing: a 4px grid, for the layouts pages build around the components. */\n    --jl-space-1: 4px;\n    --jl-space-2: 8px;\n    --jl-space-3: 12px;\n    --jl-space-4: 16px;\n    --jl-space-5: 20px;\n    --jl-space-6: 24px;\n    --jl-space-8: 32px;\n    --jl-space-10: 40px;\n    --jl-space-12: 48px;\n    --jl-space-16: 64px;\n\n    --jl-control-sm: 30px;\n    --jl-control-md: 36px;\n    --jl-control-lg: 44px;\n\n    /* Flat: lines separate; only what floats (menus, dialogs, toasts) casts a shadow. */\n    --jl-shadow-sm: 0 1px 2px rgb(11 11 12 / 0.05);\n    --jl-shadow: 0 6px 16px -6px rgb(11 11 12 / 0.12);\n    --jl-shadow-lg: 0 18px 44px -14px rgb(11 11 12 / 0.22);\n    --jl-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jl-brand) 35%, transparent);\n    --jl-scrim: rgb(11 11 12 / 0.38);\n\n    --jl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);\n    --jl-fast: 120ms;\n    --jl-slow: 240ms;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme=\"light\"]) {\n      color-scheme: dark;\n      --jl-text: #eceef1;\n      --jl-text-2: #c3c8cf;\n      --jl-muted: #959ca6;\n      --jl-faint: #6b727c;\n      --jl-bg: #0f1113;\n      --jl-surface: #0f1113;\n      --jl-surface-2: #16191c;\n      --jl-surface-3: #1d2125;\n      --jl-code-bg: #1d2125;\n      --jl-line: #262a2f;\n      --jl-line-soft: #1f2327;\n      --jl-line-strong: #343a41;\n      --jl-brand: #1a9be0;\n      --jl-accent: #3ea6e8;\n      --jl-accent-strong: #6cc0f2;\n      --jl-accent-soft: #0f2a3b;\n      --jl-accent-line: #1e4a66;\n      --jl-on-accent: #04131c;\n      --jl-ok: #4cc38a;\n      --jl-ok-soft: #10261c;\n      --jl-warn: #e5a54b;\n      --jl-warn-soft: #2a2012;\n      --jl-danger: #f0786c;\n      --jl-danger-soft: #3a1a17;\n      --jl-on-danger: #1c0604;\n      --jl-info: #3ea6e8;\n      --jl-info-soft: #0f2a3b;\n      --jl-code-keyword: #3ea6e8;\n      --jl-code-tag: #6cc0f2;\n      --jl-code-attribute: #a99bf0;\n      --jl-code-string: #4cc38a;\n      --jl-code-number: #e5a54b;\n      --jl-code-function: #8fb0d6;\n      --jl-code-property: #4fc1b5;\n      --jl-code-comment: #6b727c;\n      --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n      --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n      --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n      --jl-scrim: rgb(0 0 0 / 0.55);\n    }\n  }\n\n  /* Dark: the same blue, lifted to read on a dark ground, with dark text on the buttons. */\n  [data-theme=\"dark\"] {\n    color-scheme: dark;\n    --jl-text: #eceef1;\n    --jl-text-2: #c3c8cf;\n    --jl-muted: #959ca6;\n    --jl-faint: #6b727c;\n    --jl-bg: #0f1113;\n    --jl-surface: #0f1113;\n    --jl-surface-2: #16191c;\n    --jl-surface-3: #1d2125;\n    --jl-code-bg: #1d2125;\n    --jl-line: #262a2f;\n    --jl-line-soft: #1f2327;\n    --jl-line-strong: #343a41;\n    --jl-brand: #1a9be0;\n    --jl-accent: #3ea6e8;\n    --jl-accent-strong: #6cc0f2;\n    --jl-accent-soft: #0f2a3b;\n    --jl-accent-line: #1e4a66;\n    --jl-on-accent: #04131c;\n    --jl-ok: #4cc38a;\n    --jl-ok-soft: #10261c;\n    --jl-warn: #e5a54b;\n    --jl-warn-soft: #2a2012;\n    --jl-danger: #f0786c;\n    --jl-danger-soft: #3a1a17;\n    --jl-on-danger: #1c0604;\n    --jl-info: #3ea6e8;\n    --jl-info-soft: #0f2a3b;\n    --jl-code-keyword: #3ea6e8;\n    --jl-code-tag: #6cc0f2;\n    --jl-code-attribute: #a99bf0;\n    --jl-code-string: #4cc38a;\n    --jl-code-number: #e5a54b;\n    --jl-code-function: #8fb0d6;\n    --jl-code-property: #4fc1b5;\n    --jl-code-comment: #6b727c;\n    --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n    --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n    --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n    --jl-scrim: rgb(0 0 0 / 0.55);\n  }\n}\n";
+var tokens_default = "/*\n * The design tokens, as swai and swcode have them: ink and white, flat surfaces separated by lines, and one blue\n * that marks what is live, selected or waiting for a person. Custom properties cross shadow roots, so every\n * component reads them. They sit in the `jlib` layer: any unlayered rule of the page overrides them.\n */\n@layer jlib {\n  :root,\n  [data-theme=\"light\"] {\n    color-scheme: light;\n    --jl-font-sans: \"Manrope Variable\", \"Manrope\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n    --jl-font-mono: \"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace;\n\n    --jl-font-xs: 12px;\n    --jl-font-sm: 13px;\n    --jl-font-md: 14px;\n    --jl-font-lg: 16px;\n    --jl-font-xl: 20px;\n    --jl-font-2xl: 28px;\n\n    --jl-text: #0b0b0c;\n    --jl-text-2: #3a3f47;\n    /* Secondary text: 6.2:1 on white. */\n    --jl-muted: #5b616b;\n    /* Icons and decorations only: 3.2:1 on white is enough for them, not for text. */\n    --jl-faint: #8a9099;\n\n    --jl-bg: #ffffff;\n    --jl-surface: #ffffff;\n    --jl-surface-2: #f7f8f9;\n    --jl-surface-3: #eef0f2;\n    --jl-code-bg: #f0f2f4;\n    --jl-line: #e6e8eb;\n    --jl-line-soft: #eef0f2;\n    --jl-line-strong: #d5d9de;\n\n    /* The SyWare logo's blue: marks, focus rings, progress. 3.8:1 on white: enough for shapes, never for text. */\n    --jl-brand: #0e88d3;\n    /* The same hue, deep enough to carry text: buttons, links, the selection. 5.2:1 on white. */\n    --jl-accent: #0c72b0;\n    --jl-accent-strong: #095a8b;\n    --jl-accent-soft: #e9f4fb;\n    --jl-accent-line: #b7dbf2;\n    --jl-on-accent: #ffffff;\n\n    --jl-ok: #17784a;\n    --jl-ok-soft: #ecf6f0;\n    --jl-warn: #9a5b00;\n    --jl-warn-soft: #fcf4e6;\n    --jl-danger: #b42318;\n    --jl-danger-soft: #fdf0ef;\n    --jl-on-danger: #ffffff;\n    --jl-info: #0c72b0;\n    --jl-info-soft: #e9f4fb;\n\n    /* Code: the accent for keywords, quiet colours from the same family for the rest. */\n    --jl-code-keyword: #0c72b0;\n    --jl-code-tag: #095a8b;\n    --jl-code-attribute: #5b48c8;\n    --jl-code-string: #17784a;\n    --jl-code-number: #9a5b00;\n    --jl-code-function: #3d5a80;\n    --jl-code-property: #127a72;\n    --jl-code-comment: #8a9099;\n\n    --jl-radius-xs: 6px;\n    --jl-radius-sm: 8px;\n    --jl-radius: 10px;\n    --jl-radius-lg: 12px;\n    --jl-radius-xl: 20px;\n    --jl-radius-pill: 999px;\n\n    /* Spacing: a 4px grid, for the layouts pages build around the components. */\n    --jl-space-1: 4px;\n    --jl-space-2: 8px;\n    --jl-space-3: 12px;\n    --jl-space-4: 16px;\n    --jl-space-5: 20px;\n    --jl-space-6: 24px;\n    --jl-space-8: 32px;\n    --jl-space-10: 40px;\n    --jl-space-12: 48px;\n    --jl-space-16: 64px;\n\n    --jl-control-sm: 30px;\n    --jl-control-md: 36px;\n    --jl-control-lg: 44px;\n    /* The text people type in fields. */\n    --jl-control-font: var(--jl-font-md);\n\n    /* The widest a page gets: a form, most pages, and the tables and grids that need the room. */\n    --jl-page-form: 720px;\n    --jl-page-standard: 1120px;\n    --jl-page-wide: 1400px;\n\n    /* Flat: lines separate; only what floats (menus, dialogs, toasts) casts a shadow. */\n    --jl-shadow-sm: 0 1px 2px rgb(11 11 12 / 0.05);\n    --jl-shadow: 0 6px 16px -6px rgb(11 11 12 / 0.12);\n    --jl-shadow-lg: 0 18px 44px -14px rgb(11 11 12 / 0.22);\n    --jl-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jl-brand) 35%, transparent);\n    --jl-scrim: rgb(11 11 12 / 0.38);\n\n    --jl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);\n    --jl-fast: 120ms;\n    --jl-slow: 240ms;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme=\"light\"]) {\n      color-scheme: dark;\n      --jl-text: #eceef1;\n      --jl-text-2: #c3c8cf;\n      --jl-muted: #959ca6;\n      --jl-faint: #6b727c;\n      --jl-bg: #0f1113;\n      --jl-surface: #0f1113;\n      --jl-surface-2: #16191c;\n      --jl-surface-3: #1d2125;\n      --jl-code-bg: #1d2125;\n      --jl-line: #262a2f;\n      --jl-line-soft: #1f2327;\n      --jl-line-strong: #343a41;\n      --jl-brand: #1a9be0;\n      --jl-accent: #3ea6e8;\n      --jl-accent-strong: #6cc0f2;\n      --jl-accent-soft: #0f2a3b;\n      --jl-accent-line: #1e4a66;\n      --jl-on-accent: #04131c;\n      --jl-ok: #4cc38a;\n      --jl-ok-soft: #10261c;\n      --jl-warn: #e5a54b;\n      --jl-warn-soft: #2a2012;\n      --jl-danger: #f0786c;\n      --jl-danger-soft: #3a1a17;\n      --jl-on-danger: #1c0604;\n      --jl-info: #3ea6e8;\n      --jl-info-soft: #0f2a3b;\n      --jl-code-keyword: #3ea6e8;\n      --jl-code-tag: #6cc0f2;\n      --jl-code-attribute: #a99bf0;\n      --jl-code-string: #4cc38a;\n      --jl-code-number: #e5a54b;\n      --jl-code-function: #8fb0d6;\n      --jl-code-property: #4fc1b5;\n      --jl-code-comment: #6b727c;\n      --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n      --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n      --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n      --jl-scrim: rgb(0 0 0 / 0.55);\n    }\n  }\n\n  /* Dark: the same blue, lifted to read on a dark ground, with dark text on the buttons. */\n  [data-theme=\"dark\"] {\n    color-scheme: dark;\n    --jl-text: #eceef1;\n    --jl-text-2: #c3c8cf;\n    --jl-muted: #959ca6;\n    --jl-faint: #6b727c;\n    --jl-bg: #0f1113;\n    --jl-surface: #0f1113;\n    --jl-surface-2: #16191c;\n    --jl-surface-3: #1d2125;\n    --jl-code-bg: #1d2125;\n    --jl-line: #262a2f;\n    --jl-line-soft: #1f2327;\n    --jl-line-strong: #343a41;\n    --jl-brand: #1a9be0;\n    --jl-accent: #3ea6e8;\n    --jl-accent-strong: #6cc0f2;\n    --jl-accent-soft: #0f2a3b;\n    --jl-accent-line: #1e4a66;\n    --jl-on-accent: #04131c;\n    --jl-ok: #4cc38a;\n    --jl-ok-soft: #10261c;\n    --jl-warn: #e5a54b;\n    --jl-warn-soft: #2a2012;\n    --jl-danger: #f0786c;\n    --jl-danger-soft: #3a1a17;\n    --jl-on-danger: #1c0604;\n    --jl-info: #3ea6e8;\n    --jl-info-soft: #0f2a3b;\n    --jl-code-keyword: #3ea6e8;\n    --jl-code-tag: #6cc0f2;\n    --jl-code-attribute: #a99bf0;\n    --jl-code-string: #4cc38a;\n    --jl-code-number: #e5a54b;\n    --jl-code-function: #8fb0d6;\n    --jl-code-property: #4fc1b5;\n    --jl-code-comment: #6b727c;\n    --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n    --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n    --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n    --jl-scrim: rgb(0 0 0 / 0.55);\n  }\n\n  /*\n   * Touch screens: controls a finger can hit (44px for most), and field text phones do not zoom into when it takes\n   * the focus (16px). Themed parts of a page re-declare the sizes, so they take these too.\n   */\n  @media (pointer: coarse) {\n    :root,\n    [data-theme=\"light\"],\n    [data-theme=\"dark\"] {\n      --jl-control-sm: 36px;\n      --jl-control-md: 44px;\n      --jl-control-lg: 48px;\n      --jl-control-font: 16px;\n    }\n  }\n}\n";
 export { tokens_default as default };

package/dist/templates/jl-page.css_raw.js

@@ -0,0 +1,3 @@
+// src/templates/jl-page.css?raw
+var jl_page_default = ":host {\n  display: block;\n  container-type: inline-size;\n  --page-width: var(--jl-page-standard);\n}\n\n:host([width=\"form\"]) {\n  --page-width: var(--jl-page-form);\n}\n\n:host([width=\"wide\"]) {\n  --page-width: var(--jl-page-wide);\n}\n\n:host([width=\"full\"]) {\n  --page-width: none;\n}\n\n.page {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--jl-space-6);\n  max-width: var(--page-width);\n  margin: 0 auto;\n  padding: var(--jl-space-8) var(--jl-space-10) var(--jl-space-12);\n}\n\n/* A grid's items grow to their content otherwise: a row of chips would widen the page. */\n::slotted(*) {\n  min-width: 0;\n}\n\n.back {\n  margin-left: -8px;\n}\n\n@container (max-width: 720px) {\n  .page {\n    padding: var(--jl-space-6) var(--jl-space-4) var(--jl-space-12);\n  }\n}\n";
+export { jl_page_default as default };

package/dist/templates/jl-page.d.ts

@@ -0,0 +1,49 @@
+import { JlElement } from '../base/jl-element';
+import type { PageWidth } from '../types/jl-page.types';
+export declare const PAGE_WIDTHS: readonly PageWidth[];
+/**
+ * A page of an app: its header (a back link named after the page it leads to, the heading, a sentence on what the
+ * page is for or the facts that identify its subject, the status, the actions), then the content, centred at one of
+ * four widths. With `app-name`, it also names the browser tab after its heading: "Order #3 · swstock".
+ */
+export declare class JlPage extends JlElement {
+    static readonly selector = "jl-page";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        back: undefined;
+    }>>;
+    readonly heading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly description: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** `form` for one column of fields, `standard` for most pages, `wide` for tables and grids, `full` for the rest. */
+    readonly width: Readonly<Readonly<{
+        get(): PageWidth;
+        set(setter: ((prevState: PageWidth) => PageWidth) | PageWidth): void;
+    }>>;
+    /** Where the back link leads; no back link without it. */
+    readonly back: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The name of the page the back link leads to: "Orders". */
+    readonly backLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The app's name, after the heading in the browser tab. Without it, the page leaves the tab's title alone. */
+    readonly appName: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    /** The back link stays out of the header's breadcrumb slot without an address, so the header takes no room for it. */
+    private renderBack;
+    private renderTitle;
+}

package/dist/templates/jl-page.js

@@ -0,0 +1,102 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { define } from "../lib/define.js";
+import { registerIcons } from "../lib/icons.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlButton } from "../atoms/jl-button.js";
+import { JlPageHeader } from "../organisms/jl-page-header.js";
+import jl_page_default from "./jl-page.css_raw.js";
+import { css } from "@jadis/core";
+import { ArrowLeft } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/templates/jl-page.tsx
+registerIcons({ "arrow-left": ArrowLeft });
+define(JlPageHeader);
+var PAGE_WIDTHS = [
+	"standard",
+	"form",
+	"wide",
+	"full"
+];
+var BREADCRUMB_SLOT = "breadcrumb";
+var DEFAULT_BACK_LABEL = "Back";
+var TITLE_SEPARATOR = " · ";
+/**
+* A page of an app: its header (a back link named after the page it leads to, the heading, a sentence on what the
+* page is for or the facts that identify its subject, the status, the actions), then the content, centred at one of
+* four widths. With `app-name`, it also names the browser tab after its heading: "Order #3 · swstock".
+*/
+var JlPage = class extends JlElement {
+	static selector = "jl-page";
+	events = this.useEvents();
+	heading = this.useChange("", (value) => {
+		this._refs.header.heading.set(value);
+		this.renderTitle();
+	}, { attribute: "heading" });
+	description = this.useChange("", (value) => this._refs.header.description.set(value), { attribute: "description" });
+	/** `form` for one column of fields, `standard` for most pages, `wide` for tables and grids, `full` for the rest. */
+	width = this.useChange("standard", (value) => this.reflect("width", value), {
+		attribute: "width",
+		parse: oneOf(PAGE_WIDTHS, "standard")
+	});
+	/** Where the back link leads; no back link without it. */
+	back = this.useChange("", () => this.renderBack(), { attribute: "back" });
+	/** The name of the page the back link leads to: "Orders". */
+	backLabel = this.useChange("", () => this.renderBack(), { attribute: "back-label" });
+	/** The app's name, after the heading in the browser tab. Without it, the page leaves the tab's title alone. */
+	appName = this.useChange("", () => this.renderTitle(), { attribute: "app-name" });
+	_refs = this.useRefs((ref) => ({
+		back: ref(".back"),
+		header: ref("jl-page-header")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "page",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("jl-page-header", { children: [
+				/* @__PURE__ */ jsx(JlButton, {
+					class: "back",
+					variant: "ghost",
+					size: "sm",
+					icon: "arrow-left"
+				}),
+				/* @__PURE__ */ jsx("slot", {
+					name: "breadcrumb",
+					slot: "breadcrumb"
+				}),
+				/* @__PURE__ */ jsx("slot", {
+					name: "actions",
+					slot: "actions"
+				}),
+				/* @__PURE__ */ jsx("slot", {
+					name: "meta",
+					slot: "meta"
+				})
+			] }), /* @__PURE__ */ jsx("slot", {})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_page_default}`;
+	}
+	onConnect() {
+		this.renderTitle();
+		this._refs.back.events.register("press", () => this.events.emit("back"));
+	}
+	/** The back link stays out of the header's breadcrumb slot without an address, so the header takes no room for it. */
+	renderBack() {
+		const back = this._refs.back;
+		const href = this.back.get();
+		back.href.set(href);
+		back.label.set(this.backLabel.get() || DEFAULT_BACK_LABEL);
+		setOrRemove(back, "slot", href === "" ? "" : BREADCRUMB_SLOT);
+	}
+	renderTitle() {
+		const app = this.appName.get();
+		if (app === "" || !this.isConnected) return;
+		const heading = this.heading.get();
+		document.title = heading === "" ? app : `${heading}${TITLE_SEPARATOR}${app}`;
+	}
+};
+JlPage.register();
+export { JlPage, PAGE_WIDTHS };

package/dist/tokens.css

@@ -84,6 +84,13 @@
     --jl-control-sm: 30px;
     --jl-control-md: 36px;
     --jl-control-lg: 44px;
+    /* The text people type in fields. */
+    --jl-control-font: var(--jl-font-md);
+
+    /* The widest a page gets: a form, most pages, and the tables and grids that need the room. */
+    --jl-page-form: 720px;
+    --jl-page-standard: 1120px;
+    --jl-page-wide: 1400px;
 
     /* Flat: lines separate; only what floats (menus, dialogs, toasts) casts a shadow. */
     --jl-shadow-sm: 0 1px 2px rgb(11 11 12 / 0.05);
@@ -185,4 +192,19 @@
     --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);
     --jl-scrim: rgb(0 0 0 / 0.55);
   }
+
+  /*
+   * Touch screens: controls a finger can hit (44px for most), and field text phones do not zoom into when it takes
+   * the focus (16px). Themed parts of a page re-declare the sizes, so they take these too.
+   */
+  @media (pointer: coarse) {
+    :root,
+    [data-theme="light"],
+    [data-theme="dark"] {
+      --jl-control-sm: 36px;
+      --jl-control-md: 44px;
+      --jl-control-lg: 48px;
+      --jl-control-font: 16px;
+    }
+  }
 }

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

@@ -0,0 +1,11 @@
+import type { Tone } from './options.types';
+/**
+ * How one state of something shows as a badge: its word, its tone, its icon, and a sentence on what it means. One
+ * exhaustive map per kind of thing (`Record<OrderStatus, StatusLook>`) keeps every view saying a state the same way.
+ */
+export type StatusLook = {
+    label: string;
+    tone: Tone;
+    icon?: string;
+    hint?: string;
+};

package/dist/types/jl-confirm.types.d.ts

@@ -8,3 +8,18 @@ export type ConfirmOptions = {
     cancelLabel?: string;
     tone?: ConfirmTone;
 };
+/** What `guardLeave()` watches, and what it asks, in the app's words. */
+export type LeaveGuardOptions = {
+    /** Whether leaving now would lose changes. */
+    isDirty: () => boolean;
+    /** Ends the guard, such as the killSignal of the page it guards. */
+    signal: AbortSignal;
+    /** "Leave without saving?" */
+    heading?: string;
+    /** "Your changes are lost." */
+    text?: string;
+    /** "Leave" */
+    leaveLabel?: string;
+    /** "Keep editing" */
+    stayLabel?: string;
+};

package/dist/types/jl-load-state.types.d.ts

@@ -0,0 +1,10 @@
+/** Where the data of a list or a page is: on its way, shown, there but empty, or failed to come. */
+export type LoadState = 'loading' | 'ready' | 'empty' | 'error';
+/** The shape the skeleton takes while the data comes: rows of a list, cards of a grid, or lines of text. */
+export type LoadSkeleton = 'rows' | 'cards' | 'lines';
+/** What `load()` needs: how to fetch the data, how to draw it, and whether it holds nothing to show. */
+export type LoadTask<Value> = {
+    fetch: () => Promise<Value>;
+    draw: (value: Value) => void;
+    isEmpty?: (value: Value) => boolean;
+};

package/dist/types/jl-page.types.d.ts

@@ -0,0 +1,2 @@
+/** How wide a page gets: one column of fields, most pages, tables and grids, or the whole main area. */
+export type PageWidth = 'standard' | 'form' | 'wide' | 'full';

package/dist/types/jl-toaster.types.d.ts

@@ -8,7 +8,7 @@ export type ToastOptions = {
     tone?: ToastTone;
     /** An icon name; the tone's icon when absent. */
     icon?: string;
-    /** How long it stays, in milliseconds; 0 keeps it until closed. */
+    /** How long it stays, in milliseconds: 5000, or 8000 for an error or with an action; 0 keeps it until closed. */
     duration?: number;
     /** Shows a close button; on by default. */
     closable?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syware/jlib",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A tree-shakeable component library on Jadis and native Web Components, organised in atomic design",
   "keywords": [
     "web-components",