@syware/jlib 0.4.0 → 0.5.1

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.1",
   "description": "A tree-shakeable component library on Jadis and native Web Components, organised in atomic design",
   "keywords": [
     "web-components",