@syware/jlib 0.5.0 → 0.6.0

package/dist/all.js

@@ -10,6 +10,7 @@ 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 { JlAppIcon } from "./atoms/jl-app-icon.js";
 import { AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, JlAvatar } from "./atoms/jl-avatar.js";
 import { JlBadge } from "./atoms/jl-badge.js";
 import { JlSpinner } from "./atoms/jl-spinner.js";
@@ -75,9 +76,10 @@ 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 { JlAuthLayout } from "./templates/jl-auth-layout.js";
 import { JlPage, PAGE_WIDTHS } from "./templates/jl-page.js";
-import { JlSplitView, SPLIT_ORIENTATIONS } from "./templates/jl-split-view.js";
+import { JlSplitView, SPLIT_ORIENTATIONS, SPLIT_PANES } from "./templates/jl-split-view.js";
 // src/all.ts
 registerIcons(COMMON_ICONS);
-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 };
+define(JlAccordion, JlAccordionItem, JlAccountButton, JlAlert, JlAppIcon, JlAppShell, JlAuthLayout, 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, JlAppIcon, JlAppShell, JlAuthLayout, 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, SPLIT_PANES, 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-app-icon.css_raw.js

@@ -0,0 +1,3 @@
+// src/atoms/jl-app-icon.css?raw
+var jl_app_icon_default = ":host {\n  display: inline-flex;\n  flex: none;\n  vertical-align: middle;\n}\n\n/* The same in both themes, as the favicon is: the brand's blue, the glyph in white. */\n.tile {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size, 28px);\n  height: var(--size, 28px);\n  border-radius: var(--corner, 7px);\n  background: var(--jl-brand);\n  color: var(--jl-on-brand);\n}\n";
+export { jl_app_icon_default as default };

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

@@ -0,0 +1,29 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * An app's icon: its glyph in white on a rounded tile of the brand's blue, one family for every SyWare app. Beside
+ * the wordmark at the top of the side nav, alone in a folded rail or a phone's top bar; the favicon and the home
+ * screen icon draw the same tile. The SyWare mark stays the company's. Decorative unless it has a `label`.
+ */
+export declare class JlAppIcon extends JlElement {
+    static readonly selector = "jl-app-icon";
+    /** The app's glyph, a registered icon name: `workflow`, `package`. */
+    readonly icon: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The tile's side, in pixels. */
+    readonly size: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The app's name, for screen readers when no wordmark beside it says it. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    private renderSize;
+    private renderLabel;
+}

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

@@ -0,0 +1,64 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { clampedNumber } from "../lib/attributes.js";
+import jl_app_icon_default from "./jl-app-icon.css_raw.js";
+import { JlIcon } from "./jl-icon.js";
+import { css } from "@jadis/core";
+import { jsx } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-app-icon.tsx
+var DEFAULT_SIZE = 28;
+var MIN_SIZE = 12;
+var MAX_SIZE = 512;
+var GLYPH_SHARE = .62;
+var CORNER_SHARE = .26;
+/**
+* An app's icon: its glyph in white on a rounded tile of the brand's blue, one family for every SyWare app. Beside
+* the wordmark at the top of the side nav, alone in a folded rail or a phone's top bar; the favicon and the home
+* screen icon draw the same tile. The SyWare mark stays the company's. Decorative unless it has a `label`.
+*/
+var JlAppIcon = class extends JlElement {
+	static selector = "jl-app-icon";
+	/** The app's glyph, a registered icon name: `workflow`, `package`. */
+	icon = this.useChange("", (value) => this._refs.glyph.name.set(value), { attribute: "icon" });
+	/** The tile's side, in pixels. */
+	size = this.useChange(DEFAULT_SIZE, (value) => this.renderSize(value), {
+		attribute: "size",
+		parse: clampedNumber(DEFAULT_SIZE, MIN_SIZE, MAX_SIZE)
+	});
+	/** The app's name, for screen readers when no wordmark beside it says it. */
+	label = this.useChange("", (value) => this.renderLabel(value), { attribute: "label" });
+	_refs = this.useRefs((ref) => ({
+		glyph: ref("jl-icon"),
+		tile: ref(".tile")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsx("span", {
+			class: "tile",
+			"aria-hidden": "true",
+			attrs: { part: "base" },
+			children: /* @__PURE__ */ jsx(JlIcon, { size: Math.round(DEFAULT_SIZE * GLYPH_SHARE) })
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_app_icon_default}`;
+	}
+	renderSize(size) {
+		this._refs.tile.style.setProperty("--size", `${size}px`);
+		this._refs.tile.style.setProperty("--corner", `${Math.round(size * CORNER_SHARE)}px`);
+		this._refs.glyph.size.set(Math.round(size * GLYPH_SHARE));
+	}
+	renderLabel(label) {
+		const tile = this._refs.tile;
+		if (label === "") {
+			tile.setAttribute("aria-hidden", "true");
+			tile.removeAttribute("role");
+			tile.removeAttribute("aria-label");
+			return;
+		}
+		tile.removeAttribute("aria-hidden");
+		tile.setAttribute("role", "img");
+		tile.setAttribute("aria-label", label);
+	}
+};
+JlAppIcon.register();
+export { JlAppIcon };

package/dist/atoms/jl-avatar.js

@@ -2,11 +2,11 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
+import { JlIcon } from "./jl-icon.js";
 import { initialsOf, pickStable } from "../lib/avatar.js";
 import { setOrRemove } from "../lib/dom.js";
 import { hasSlotted } from "../lib/slots.js";
 import jl_avatar_default from "./jl-avatar.css_raw.js";
-import { JlIcon } from "./jl-icon.js";
 import { css } from "@jadis/core";
 import { User } from "lucide";
 import { jsx, jsxs } from "@jadis/core/jsx-runtime";

package/dist/atoms/jl-badge.js

@@ -2,8 +2,8 @@ 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 { setOrRemove } from "../lib/dom.js";
 import jl_badge_default from "./jl-badge.css_raw.js";
 import { css } from "@jadis/core";
 import { jsx, jsxs } from "@jadis/core/jsx-runtime";
@@ -36,6 +36,13 @@ var JlBadge = class extends JlElement {
 	}));
 	/** Shows a state as an app's map of states describes it: its label, tone, icon and hint. */
 	showStatus(look) {
+		const attributes = {
+			hint: look.hint ?? "",
+			icon: look.icon ?? "",
+			label: look.label,
+			tone: look.tone
+		};
+		for (const [name, value] of Object.entries(attributes)) setOrRemove(this, name, value);
 		this.label.set(look.label);
 		this.tone.set(look.tone);
 		this.icon.set(look.icon ?? "");

package/dist/atoms/jl-button.js

@@ -2,8 +2,8 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "./jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import jl_button_default from "./jl-button.css_raw.js";
 import { JlSpinner } from "./jl-spinner.js";
 import { css } from "@jadis/core";

package/dist/atoms/jl-input.js

@@ -3,8 +3,8 @@ import { JlFormControl } from "../base/jl-form-control.js";
 import { oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "./jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import jl_input_default from "./jl-input.css_raw.js";
 import { css } from "@jadis/core";
 import { Eye, EyeOff, X } from "lucide";

package/dist/atoms/jl-link.js

@@ -2,8 +2,8 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
-import { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "./jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import jl_link_default from "./jl-link.css_raw.js";
 import { css } from "@jadis/core";
 import { ExternalLink } from "lucide";

package/dist/atoms/jl-select.js

@@ -3,8 +3,8 @@ import { JlFormControl } from "../base/jl-form-control.js";
 import { jsonOf, oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "./jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import { groupOptions } from "../lib/option-groups.js";
 import jl_select_default from "./jl-select.css_raw.js";
 import { css } from "@jadis/core";

package/dist/index.d.ts

@@ -63,6 +63,7 @@ export type * from './types/options.types';
 export type * from './types/pagination.types';
 export type * from './types/roving-index.types';
 export type * from './types/sparkline.types';
+export * from './atoms/jl-app-icon';
 export * from './atoms/jl-avatar';
 export * from './atoms/jl-badge';
 export * from './atoms/jl-button';
@@ -129,5 +130,6 @@ 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-auth-layout';
 export * from './templates/jl-page';
 export * from './templates/jl-split-view';

package/dist/index.js

@@ -10,6 +10,7 @@ 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 { JlAppIcon } from "./atoms/jl-app-icon.js";
 import { AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, JlAvatar } from "./atoms/jl-avatar.js";
 import { JlBadge } from "./atoms/jl-badge.js";
 import { JlSpinner } from "./atoms/jl-spinner.js";
@@ -75,6 +76,7 @@ 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 { JlAuthLayout } from "./templates/jl-auth-layout.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, 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 };
+import { JlSplitView, SPLIT_ORIENTATIONS, SPLIT_PANES } 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, JlAccountButton, JlAlert, JlAppIcon, JlAppShell, JlAuthLayout, 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, SPLIT_PANES, 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/text.d.ts

@@ -3,3 +3,13 @@
  * an HTML element reads as it was meant.
  */
 export declare function dedent(text: string): string;
+/** A run of a headline: plain, or `accent` for the words written between asterisks. */
+export type StarredPart = {
+    text: string;
+    accent: boolean;
+};
+/**
+ * A headline's runs: the words between asterisks are the accented ones, "Workflows that *ask* before they act."
+ * A lone asterisk stays as it is; empty runs are left out.
+ */
+export declare function starredParts(text: string): StarredPart[];

package/dist/lib/text.js

@@ -10,4 +10,16 @@ function dedent(text) {
 	const shared = indents.length === 0 ? 0 : Math.min(...indents);
 	return lines.map((line) => line.slice(shared)).join("\n");
 }
-export { dedent };
+var STAR = "*";
+/**
+* A headline's runs: the words between asterisks are the accented ones, "Workflows that *ask* before they act."
+* A lone asterisk stays as it is; empty runs are left out.
+*/
+function starredParts(text) {
+	const pieces = text.split(STAR);
+	return (pieces.length % 2 === 1 ? pieces : [...pieces.slice(0, -2), `${pieces.at(-2)}${STAR}${pieces.at(-1)}`]).map((piece, index) => ({
+		accent: index % 2 === 1,
+		text: piece
+	})).filter((part) => part.text !== "");
+}
+export { dedent, starredParts };

package/dist/lib/time.d.ts

@@ -1,10 +1,12 @@
 /**
  * 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.
+ * and minutes, days and hours. The unit is chosen once rounded: 59.6 seconds is "1 min", not "60 secs". Not a
+ * number gives "".
  */
 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".
+ * When something happened, from `now`: "now", "5 minutes ago", "3 hours ago" the same day, "yesterday" or "3 days
+ * ago" by the calendar 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". A date that is not one gives "".
  */
 export declare function formatRelativeTime(date: Date | number | string, now: Date | number, locale?: string): string;

package/dist/lib/time.js

@@ -7,8 +7,7 @@ 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;
+var DAYS_UNDER = 7;
 /** 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,
@@ -27,34 +26,43 @@ function pair(first, second, locale) {
 }
 /**
 * 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.
+* and minutes, days and hours. The unit is chosen once rounded: 59.6 seconds is "1 min", not "60 secs". Not a
+* number gives "".
 */
 function formatDuration(milliseconds, locale) {
+	if (!Number.isFinite(milliseconds)) return "";
 	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 wholeSeconds = Math.round(seconds);
+	if (wholeSeconds < MINUTE_S) return unitText(wholeSeconds, "second", locale);
+	const minutes = Math.round(seconds / MINUTE_S);
+	if (minutes < MINUTES_PER_HOUR) return unitText(minutes, "minute", locale);
+	if (minutes < 1440) 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);
 }
+/** Midnight of a date's day, in the reader's time zone. */
+var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+/** How many days on the calendar from `now` to `then`: -1 is yesterday, whatever the hours. */
+var calendarDays = (then, now) => Math.round((startOfDay(then) - startOfDay(now)) / (DAY_S * SECOND_MS));
 /**
-* 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".
+* When something happened, from `now`: "now", "5 minutes ago", "3 hours ago" the same day, "yesterday" or "3 days
+* ago" by the calendar 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". A date that is not one gives "".
 */
 function formatRelativeTime(date, now, locale) {
 	const then = new Date(date);
-	const seconds = (then.getTime() - new Date(now).getTime()) / SECOND_MS;
+	const today = new Date(now);
+	if (Number.isNaN(then.getTime()) || Number.isNaN(today.getTime())) return "";
+	const seconds = (then.getTime() - today.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();
+	const days = calendarDays(then, today);
+	if (days === 0) return relative.format(Math.round(seconds / HOUR_S), "hour");
+	if (Math.abs(days) < DAYS_UNDER) return relative.format(days, "day");
+	const sameYear = then.getFullYear() === today.getFullYear();
 	return new Intl.DateTimeFormat(locale, {
 		day: "numeric",
 		month: "short",

package/dist/lib/trigger.js

@@ -1,6 +1,6 @@
 // src/lib/trigger.ts
 var NATIVE_FOCUSABLE = "a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]";
-var BASE_PART = "[part~=\"base\"]";
+var BASE_PART = "[part~=\"base\"]:not([hidden])";
 /**
 * The element that carries a trigger's accessible state: the inner `base` part of a component (where its focus
 * and its name are), or else the element itself.

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

@@ -1,3 +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";
+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\n/* Their account page is the one shown: marked as the side nav marks its current place. */\n\n:host([current]) .base {\n  background: var(--jl-accent-soft);\n}\n\n:host([current]) .name {\n  color: var(--jl-accent);\n}\n\n:host([current][compact]) .base {\n  box-shadow: 0 0 0 2px var(--jl-accent);\n}\n";
 export { jl_account_button_default as default };

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

@@ -2,7 +2,8 @@ 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.
+ * button that fires `press` (to open a menu). `compact` keeps the avatar alone, the name as its tooltip; `current`
+ * marks it while their account page is the one shown.
  */
 export declare class JlAccountButton extends JlElement {
     static readonly selector = "jl-account-button";
@@ -33,6 +34,11 @@ export declare class JlAccountButton extends JlElement {
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
+    /** Their account page is the one shown: marked as the side nav marks its current place. */
+    readonly current: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
     private readonly _refs;
     focus(options?: FocusOptions): void;
     templateHtml(): Node;
@@ -41,6 +47,7 @@ export declare class JlAccountButton extends JlElement {
     private control;
     /** Moves the content into the link or back into the button. */
     private renderLink;
+    private renderCurrent;
     /** Its name for screen readers and its tooltip: the name, then the line under it. */
     private renderLabel;
 }

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

@@ -9,7 +9,8 @@ import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
 /**
 * 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.
+* button that fires `press` (to open a menu). `compact` keeps the avatar alone, the name as its tooltip; `current`
+* marks it while their account page is the one shown.
 */
 var JlAccountButton = class extends JlElement {
 	static selector = "jl-account-button";
@@ -31,6 +32,8 @@ var JlAccountButton = class extends JlElement {
 	href = this.useChange("", () => this.renderLink(), { attribute: "href" });
 	/** The avatar alone. */
 	compact = this.useChange(false, (value) => this.reflect("compact", value), { attribute: "compact" });
+	/** Their account page is the one shown: marked as the side nav marks its current place. */
+	current = this.useChange(false, (value) => this.renderCurrent(value), { attribute: "current" });
 	_refs = this.useRefs((ref) => ({
 		avatar: ref("jl-avatar"),
 		button: ref("button"),
@@ -84,6 +87,10 @@ var JlAccountButton = class extends JlElement {
 		link.hidden = href === "";
 		setOrRemove(link, "href", href);
 	}
+	renderCurrent(current) {
+		this.reflect("current", current);
+		for (const control of [this._refs.button, this._refs.link]) setOrRemove(control, "aria-current", current ? "page" : "");
+	}
 	/** 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(", ");

package/dist/molecules/jl-alert.js

@@ -3,8 +3,8 @@ import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { TONES, TONE_ICONS, TONE_ICON_FILLED } from "../lib/options.js";
-import { hasSlotted } from "../lib/slots.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { hasSlotted } from "../lib/slots.js";
 import { JlButton } from "../atoms/jl-button.js";
 import jl_alert_default from "./jl-alert.css_raw.js";
 import { css } from "@jadis/core";

package/dist/molecules/jl-calendar.js

@@ -3,8 +3,8 @@ import { JlFormControl } from "../base/jl-form-control.js";
 import { clampedNumber, oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { addMonths, calendarDateOf, clampDate, dateAfterKey, dateFormatter, formatMonthTitle, isSameDate, isSameMonth, isWithin, monthGrid, monthHasDaysWithin, parseIsoDate, toIsoDate, weekdayNames } from "../lib/calendar.js";
 import { pageLocale } from "../lib/locale.js";
 import jl_calendar_default from "./jl-calendar.css_raw.js";

package/dist/molecules/jl-chip-group.js

@@ -3,8 +3,8 @@ import { JlFormControl } from "../base/jl-form-control.js";
 import { jsonOf, oneOf, stringList } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import { rovingIndex } from "../lib/roving-index.js";
 import jl_chip_group_default from "./jl-chip-group.css_raw.js";
 import { css } from "@jadis/core";

package/dist/molecules/jl-combobox.js

@@ -4,8 +4,8 @@ import { jsonOf, oneOf } from "../lib/attributes.js";
 import { followAnchor } from "../lib/floating.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { keepInView } from "../lib/keep-in-view.js";
 import { edgeEnabledIndex, filterOptions, foldText, matchParts, nextEnabledIndex } from "../lib/option-filter.js";
 import jl_combobox_default from "./jl-combobox.css_raw.js";

package/dist/molecules/jl-date-picker.js

@@ -4,8 +4,8 @@ import { clampedNumber, oneOf } from "../lib/attributes.js";
 import { followAnchor } from "../lib/floating.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { NUMERIC_DATE, compareDates, dateOrder, datePattern, formatDate, isDateText, parseIsoDate, parseTypedDate, toIsoDate } from "../lib/calendar.js";
 import { pageLocale } from "../lib/locale.js";
 import { JlCalendar } from "./jl-calendar.js";

package/dist/molecules/jl-empty.js

@@ -2,8 +2,8 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
-import { hasSlotted } from "../lib/slots.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { hasSlotted } from "../lib/slots.js";
 import jl_empty_default from "./jl-empty.css_raw.js";
 import { css } from "@jadis/core";
 import { Inbox } from "lucide";

package/dist/molecules/jl-file-drop.js

@@ -3,8 +3,8 @@ import { JlFormControl } from "../base/jl-form-control.js";
 import { clampedNumber, oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { pageLocale } from "../lib/locale.js";
 import { checkFiles, describeAccept, formatFileSize, isSameFile } from "../lib/files.js";
 import jl_file_drop_default from "./jl-file-drop.css_raw.js";

package/dist/molecules/jl-list-item.js

@@ -1,9 +1,9 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { registerIcons } from "../lib/icons.js";
+import { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove } from "../lib/dom.js";
 import { hasSlotted } from "../lib/slots.js";
-import { JlIcon } from "../atoms/jl-icon.js";
 import { isActivationKey, startedOnControl } from "../lib/surface.js";
 import jl_list_item_default from "./jl-list-item.css_raw.js";
 import { css } from "@jadis/core";

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

@@ -49,9 +49,12 @@ export declare class JlLoadState extends JlElement {
     /**
      * 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.
+     * worked: a refresh that fails says so only here, for the page to tell people. A load overtaken by a later one
+     * (a search typed on, a poll during a reload) draws nothing and resolves true: the later one decides.
      */
     load<Value>(task: LoadTask<Value>): Promise<boolean>;
+    /** Whether data is shown (the content or the empty state), which a refresh keeps. */
+    private isShowing;
     templateHtml(): Node;
     templateCss(): string;
     onConnect(): void;

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

@@ -97,7 +97,7 @@ var JlLoadState = class extends JlElement {
 	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 = {};
+	_work = { latest: 0 };
 	_refs = this.useRefs((ref) => ({
 		bones: ref(".bones"),
 		content: ref(".content"),
@@ -109,22 +109,31 @@ var JlLoadState = class extends JlElement {
 	/**
 	* 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.
+	* worked: a refresh that fails says so only here, for the page to tell people. A load overtaken by a later one
+	* (a search typed on, a poll during a reload) draws nothing and resolves true: the later one decides.
 	*/
 	async load(task) {
+		this._work.latest += 1;
+		const ticket = this._work.latest;
 		this._work.retry = () => this.load(task);
-		const showing = this.state.get() === "ready" || this.state.get() === "empty";
-		if (!showing) this.state.set("loading");
+		if (!this.isShowing()) this.state.set("loading");
 		try {
 			const value = await task.fetch();
+			if (ticket !== this._work.latest) return true;
 			task.draw(value);
 			this.state.set(task.isEmpty?.(value) === true ? "empty" : "ready");
 			return true;
 		} catch {
-			if (!showing) this.state.set("error");
+			if (ticket !== this._work.latest) return true;
+			if (!this.isShowing()) this.state.set("error");
 			return false;
 		}
 	}
+	/** Whether data is shown (the content or the empty state), which a refresh keeps. */
+	isShowing() {
+		const state = this.state.get();
+		return state === "ready" || state === "empty";
+	}
 	templateHtml() {
 		return /* @__PURE__ */ jsxs("div", {
 			class: "load-state",

package/dist/molecules/jl-menu.js

@@ -2,8 +2,8 @@ import { BASE_STYLES, FLOATING_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { jsonOf, oneOf } from "../lib/attributes.js";
 import { PLACEMENTS, followAnchor } from "../lib/floating.js";
-import { uniqueId } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { uniqueId } from "../lib/dom.js";
 import { firstIndex, lastIndex, letterIndex, stepIndex } from "../lib/roving.js";
 import { setTriggerAria } from "../lib/trigger.js";
 import jl_menu_default from "./jl-menu.css_raw.js";