@syware/jlib 0.4.0 → 0.5.1

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;
+}