@lo-tek/interfaces 0.0.0 → 0.37.0

package/dist/components/css/tag/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/css/tag/tag.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,EAAG,QAAiB,CAAA;AAE1C,eAAO,MAAM,WAAW,gCAAiC,CAAA;AAEzD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG;IACvB,oDAAoD;IACpD,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,OAAO,SAAS,CAAA;IACvB,cAAc,CAAC,EAAE,oBAAoB,CAAA;IACrC,iBAAiB,CAAC,EAAE,EAAE,CAAA;CACvB,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,GAAG,8BACwB,UAAU,KAAQ,aAAa;;;CAUtE,CAAA"}

package/dist/components/css/tag/tag.js

@@ -0,0 +1,27 @@
+import { attributes, createGuard } from "../shared.js";
+export const TAG_CLASS = "lt-tag";
+export const tagVariants = ["outline", "filled"];
+/**
+ * The attributes for a tag.
+ *
+ * A tag labels content: keywords on an article, selected filters above a
+ * list. If it says what state something is in, [Badge](../badge/badge.js)
+ * is right instead.
+ *
+ * `selectable` gives hover and a focus ring, but makes nothing pressable.
+ * The element must be a `<button>`, and you set `aria-pressed` yourself,
+ * since only you know whether the tag is selected.
+ *
+ * ```ts
+ * <button {...tag({ selectable: true })} aria-pressed="true">Housing benefit</button>
+ * ```
+ */
+export const tag = Object.assign(({ variant = "outline", selectable } = {}) => attributes({
+    class: TAG_CLASS,
+    "data-variant": variant === "outline" ? undefined : variant,
+    "data-selectable": selectable ? "" : undefined,
+}), {
+    variants: tagVariants,
+    isVariant: createGuard(tagVariants),
+});
+//# sourceMappingURL=tag.js.map

package/dist/components/css/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/css/tag/tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,SAAS,GAAG,QAAiB,CAAA;AAE1C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAU,CAAA;AAkBzD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAC9B,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,UAAU,KAAiB,EAAE,EAAiB,EAAE,CACtE,UAAU,CAAC;IACT,KAAK,EAAE,SAAS;IAChB,cAAc,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;IAC3D,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAE,EAAY,CAAC,CAAC,CAAC,SAAS;CAC1D,CAAC,EACJ;IACE,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC;CACpC,CACF,CAAA"}

package/dist/components/css/textarea/textarea.d.ts

@@ -0,0 +1,23 @@
+import { type FieldState, type NonDefaultFieldState } from "../shared.js";
+export declare const TEXTAREA_CLASS: "lt-textarea";
+export type TextareaOptions = {
+    /** Validation state. Default: `default`. */
+    state?: FieldState;
+};
+export type TextareaAttributes = {
+    class: typeof TEXTAREA_CLASS;
+    "data-state"?: NonDefaultFieldState;
+    "aria-invalid"?: "true";
+};
+/**
+ * The attributes for a multi-line text field.
+ *
+ * ```ts
+ * <textarea {...textarea({ state: "invalid" })} />
+ * ```
+ */
+export declare const textarea: (({ state }?: TextareaOptions) => TextareaAttributes) & {
+    states: readonly ["default", "invalid", "success"];
+    isState: (value: string) => value is "default" | "invalid" | "success";
+};
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/css/textarea/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/css/textarea/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EAGf,KAAK,oBAAoB,EAC1B,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,cAAc,EAAG,aAAsB,CAAA;AAEpD,MAAM,MAAM,eAAe,GAAG;IAC5B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,OAAO,cAAc,CAAA;IAC5B,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,gBACK,eAAe,KAAQ,kBAAkB;;;CAUlE,CAAA"}

package/dist/components/css/textarea/textarea.js

@@ -0,0 +1,18 @@
+import { attributes, fieldStates, isFieldState, } from "../shared.js";
+export const TEXTAREA_CLASS = "lt-textarea";
+/**
+ * The attributes for a multi-line text field.
+ *
+ * ```ts
+ * <textarea {...textarea({ state: "invalid" })} />
+ * ```
+ */
+export const textarea = Object.assign(({ state = "default" } = {}) => attributes({
+    class: TEXTAREA_CLASS,
+    "data-state": state === "default" ? undefined : state,
+    "aria-invalid": state === "invalid" ? "true" : undefined,
+}), {
+    states: fieldStates,
+    isState: isFieldState,
+});
+//# sourceMappingURL=textarea.js.map

package/dist/components/css/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../src/components/css/textarea/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,WAAW,EACX,YAAY,GAEb,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,cAAc,GAAG,aAAsB,CAAA;AAapD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CACnC,CAAC,EAAE,KAAK,GAAG,SAAS,KAAsB,EAAE,EAAsB,EAAE,CAClE,UAAU,CAAC;IACT,KAAK,EAAE,cAAc;IACrB,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;IACrD,cAAc,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;CACpE,CAAC,EACJ;IACE,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,YAAY;CACtB,CACF,CAAA"}

package/dist/components/css/toggle-group/toggle-group.d.ts

@@ -0,0 +1,31 @@
+export declare const TOGGLE_GROUP_CLASS: "lt-toggle-group";
+/** The label around each option. */
+export declare const TOGGLE_GROUP_OPTION_CLASS: "lt-toggle-group__option";
+export type ToggleGroupAttributes = {
+    class: typeof TOGGLE_GROUP_CLASS;
+};
+/**
+ * The attributes for a group where one option is selected at a time.
+ *
+ * The group is radio buttons in disguise. Each option is a `<label>` with an
+ * `<input type="radio">` inside, visually shrunk away. You then keep the
+ * arrow keys, `FormData` and the screen reader saying "2 of 3" without
+ * writing any of it again.
+ *
+ * If the choices are actions rather than a setting, such as "bold, italic,
+ * underline", buttons with `aria-pressed` belong there instead.
+ *
+ * ```ts
+ * <fieldset {...toggleGroup()}>
+ *   <legend class="lt-sr-only">View</legend>
+ *   <label class={toggleGroup.option}>
+ *     <input type="radio" name="view" value="list" checked /> List
+ *   </label>
+ * </fieldset>
+ * ```
+ */
+export declare const toggleGroup: (() => ToggleGroupAttributes) & {
+    /** The class on the label around each option. */
+    option: "lt-toggle-group__option";
+};
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/components/css/toggle-group/toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../../src/components/css/toggle-group/toggle-group.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,EAAG,iBAA0B,CAAA;AAC5D,oCAAoC;AACpC,eAAO,MAAM,yBAAyB,EAAG,yBAAkC,CAAA;AAE3E,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,OAAO,kBAAkB,CAAA;CACjC,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,WAAW,SAClB,qBAAqB;IAEvB,iDAAiD;;CAGpD,CAAA"}

package/dist/components/css/toggle-group/toggle-group.js

@@ -0,0 +1,29 @@
+import { attributes } from "../shared.js";
+export const TOGGLE_GROUP_CLASS = "lt-toggle-group";
+/** The label around each option. */
+export const TOGGLE_GROUP_OPTION_CLASS = "lt-toggle-group__option";
+/**
+ * The attributes for a group where one option is selected at a time.
+ *
+ * The group is radio buttons in disguise. Each option is a `<label>` with an
+ * `<input type="radio">` inside, visually shrunk away. You then keep the
+ * arrow keys, `FormData` and the screen reader saying "2 of 3" without
+ * writing any of it again.
+ *
+ * If the choices are actions rather than a setting, such as "bold, italic,
+ * underline", buttons with `aria-pressed` belong there instead.
+ *
+ * ```ts
+ * <fieldset {...toggleGroup()}>
+ *   <legend class="lt-sr-only">View</legend>
+ *   <label class={toggleGroup.option}>
+ *     <input type="radio" name="view" value="list" checked /> List
+ *   </label>
+ * </fieldset>
+ * ```
+ */
+export const toggleGroup = Object.assign(() => attributes({ class: TOGGLE_GROUP_CLASS }), {
+    /** The class on the label around each option. */
+    option: TOGGLE_GROUP_OPTION_CLASS,
+});
+//# sourceMappingURL=toggle-group.js.map

package/dist/components/css/toggle-group/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","sourceRoot":"","sources":["../../../../src/components/css/toggle-group/toggle-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAA0B,CAAA;AAC5D,oCAAoC;AACpC,MAAM,CAAC,MAAM,yBAAyB,GAAG,yBAAkC,CAAA;AAM3E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CACtC,GAA0B,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,CAAC,EACtE;IACE,iDAAiD;IACjD,MAAM,EAAE,yBAAyB;CAClC,CACF,CAAA"}

package/dist/components/css/tooltip/tooltip.d.ts

@@ -0,0 +1,31 @@
+export declare const TOOLTIP_CLASS: "lt-tooltip";
+/** The bubble with the text. */
+export declare const TOOLTIP_BUBBLE_CLASS: "lt-tooltip__bubble";
+export type TooltipAttributes = {
+    class: typeof TOOLTIP_CLASS;
+};
+/**
+ * The attributes for the wrapper around a trigger and a tooltip bubble.
+ *
+ * The bubble shows on hover and on focus. The focus part is not optional: a
+ * bubble that only comes with the mouse does not exist for keyboard users.
+ *
+ * The text in the bubble must be connected to the trigger with
+ * `aria-describedby`. Without it the bubble is just something that appears
+ * on screen, and is never announced.
+ *
+ * Use it for something extra, never for something the user must have. On a
+ * touch screen there is neither hover nor focus before something is tapped.
+ *
+ * ```ts
+ * <span {...tooltip()}>
+ *   <button aria-describedby="hint">Archive</button>
+ *   <span class={tooltip.bubble} role="tooltip" id="hint">Moves it to the archive</span>
+ * </span>
+ * ```
+ */
+export declare const tooltip: (() => TooltipAttributes) & {
+    /** The class on the bubble with the text. */
+    bubble: "lt-tooltip__bubble";
+};
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/css/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/css/tooltip/tooltip.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,EAAG,YAAqB,CAAA;AAClD,gCAAgC;AAChC,eAAO,MAAM,oBAAoB,EAAG,oBAA6B,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,SACd,iBAAiB;IAEnB,6CAA6C;;CAGhD,CAAA"}

package/dist/components/css/tooltip/tooltip.js

@@ -0,0 +1,29 @@
+import { attributes } from "../shared.js";
+export const TOOLTIP_CLASS = "lt-tooltip";
+/** The bubble with the text. */
+export const TOOLTIP_BUBBLE_CLASS = "lt-tooltip__bubble";
+/**
+ * The attributes for the wrapper around a trigger and a tooltip bubble.
+ *
+ * The bubble shows on hover and on focus. The focus part is not optional: a
+ * bubble that only comes with the mouse does not exist for keyboard users.
+ *
+ * The text in the bubble must be connected to the trigger with
+ * `aria-describedby`. Without it the bubble is just something that appears
+ * on screen, and is never announced.
+ *
+ * Use it for something extra, never for something the user must have. On a
+ * touch screen there is neither hover nor focus before something is tapped.
+ *
+ * ```ts
+ * <span {...tooltip()}>
+ *   <button aria-describedby="hint">Archive</button>
+ *   <span class={tooltip.bubble} role="tooltip" id="hint">Moves it to the archive</span>
+ * </span>
+ * ```
+ */
+export const tooltip = Object.assign(() => attributes({ class: TOOLTIP_CLASS }), {
+    /** The class on the bubble with the text. */
+    bubble: TOOLTIP_BUBBLE_CLASS,
+});
+//# sourceMappingURL=tooltip.js.map

package/dist/components/css/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/css/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,aAAa,GAAG,YAAqB,CAAA;AAClD,gCAAgC;AAChC,MAAM,CAAC,MAAM,oBAAoB,GAAG,oBAA6B,CAAA;AAMjE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAClC,GAAsB,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,EAC7D;IACE,6CAA6C;IAC7C,MAAM,EAAE,oBAAoB;CAC7B,CACF,CAAA"}

package/dist/components/default-texts.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Every text the package itself writes into the page when nobody has given
+ * it another one.
+ *
+ * LO-TEK has almost no text: the renderer writes the text, in its own
+ * language. What is left here are the defaults for text a component creates
+ * itself, and each of them can be replaced. How is noted next to each one,
+ * and the same is in the table on the documentation page about translation.
+ *
+ * The texts live here and not in the components, so there is one place to
+ * read them. `scripts/check-texts.ts` fails the build on a user-facing text
+ * that is in a component and not here, and requires each of them to be in
+ * the table on the translation page.
+ *
+ * The texts in CSS, such as " (required)", cannot import anything. They are
+ * read from an `--lt-` variable with the text as the fallback, and
+ * `check-texts.ts` requires that.
+ */
+export declare const DEFAULT_TEXTS: {
+    /** `aria-label` on the `<lt-toast>` region. Replaced with `label`. */
+    readonly toastRegion: "Notifications";
+    /** The close button in each message. Replaced with `close-label`. */
+    readonly toastClose: "Close message";
+    /** `<lt-connection-status>` when the connection is lost. Replaced with `offline-text`. */
+    readonly connectionOffline: "No connection. What you type is not being saved.";
+    /** `<lt-connection-status>` when it comes back. Replaced with `online-text`. */
+    readonly connectionOnline: "Connection restored.";
+    /** The match count in `<lt-suggestion>` with no matches. Replaced with `count-none`. */
+    readonly suggestionNone: "No matches";
+    /** The match count with one match. Replaced with `count-one`. */
+    readonly suggestionOne: "One match";
+    /** The match count otherwise. `{n}` is the number. Replaced with `count-other`. */
+    readonly suggestionOther: "{n} matches";
+};
+//# sourceMappingURL=default-texts.d.ts.map

package/dist/components/default-texts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-texts.d.ts","sourceRoot":"","sources":["../../src/components/default-texts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,aAAa;IACxB,sEAAsE;;IAEtE,qEAAqE;;IAErE,0FAA0F;;IAE1F,gFAAgF;;IAEhF,wFAAwF;;IAExF,iEAAiE;;IAEjE,mFAAmF;;CAE3E,CAAA"}

package/dist/components/default-texts.js

@@ -0,0 +1,35 @@
+/**
+ * Every text the package itself writes into the page when nobody has given
+ * it another one.
+ *
+ * LO-TEK has almost no text: the renderer writes the text, in its own
+ * language. What is left here are the defaults for text a component creates
+ * itself, and each of them can be replaced. How is noted next to each one,
+ * and the same is in the table on the documentation page about translation.
+ *
+ * The texts live here and not in the components, so there is one place to
+ * read them. `scripts/check-texts.ts` fails the build on a user-facing text
+ * that is in a component and not here, and requires each of them to be in
+ * the table on the translation page.
+ *
+ * The texts in CSS, such as " (required)", cannot import anything. They are
+ * read from an `--lt-` variable with the text as the fallback, and
+ * `check-texts.ts` requires that.
+ */
+export const DEFAULT_TEXTS = {
+    /** `aria-label` on the `<lt-toast>` region. Replaced with `label`. */
+    toastRegion: "Notifications",
+    /** The close button in each message. Replaced with `close-label`. */
+    toastClose: "Close message",
+    /** `<lt-connection-status>` when the connection is lost. Replaced with `offline-text`. */
+    connectionOffline: "No connection. What you type is not being saved.",
+    /** `<lt-connection-status>` when it comes back. Replaced with `online-text`. */
+    connectionOnline: "Connection restored.",
+    /** The match count in `<lt-suggestion>` with no matches. Replaced with `count-none`. */
+    suggestionNone: "No matches",
+    /** The match count with one match. Replaced with `count-one`. */
+    suggestionOne: "One match",
+    /** The match count otherwise. `{n}` is the number. Replaced with `count-other`. */
+    suggestionOther: "{n} matches",
+};
+//# sourceMappingURL=default-texts.js.map

package/dist/components/default-texts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-texts.js","sourceRoot":"","sources":["../../src/components/default-texts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,sEAAsE;IACtE,WAAW,EAAE,eAAe;IAC5B,qEAAqE;IACrE,UAAU,EAAE,eAAe;IAC3B,0FAA0F;IAC1F,iBAAiB,EAAE,kDAAkD;IACrE,gFAAgF;IAChF,gBAAgB,EAAE,sBAAsB;IACxC,wFAAwF;IACxF,cAAc,EAAE,YAAY;IAC5B,iEAAiE;IACjE,aAAa,EAAE,WAAW;IAC1B,mFAAmF;IACnF,eAAe,EAAE,aAAa;CACtB,CAAA"}

package/dist/components/events.d.ts

@@ -0,0 +1,77 @@
+import type { LtDialog } from "./frame/dialog/lt-dialog.js";
+import type { LtErrorSummary } from "./frame/error-summary/lt-error-summary.js";
+import type { LtField } from "./frame/field/lt-field.js";
+import type { LtPopover } from "./frame/popover/lt-popover.js";
+import type { LtSessionTimeout } from "./frame/session-timeout/lt-session-timeout.js";
+import type { LtSuggestion } from "./frame/suggestion/lt-suggestion.js";
+import type { LtTabs } from "./frame/tabs/lt-tabs.js";
+import type { LtConnectionStatus } from "./standalone/connection-status/lt-connection-status.js";
+import type { LtToast } from "./standalone/toast/lt-toast.js";
+/**
+ * The events the web components dispatch, with `detail` as the component
+ * sends it. All of them bubble, and come out of a shadow root.
+ * `HTMLElementEventMap` and `DocumentEventMap` are extended with them, so
+ * `addEventListener("dialog-toggle", …)` gives `event.detail.open` as
+ * `boolean` on any element and on `document`.
+ *
+ * `HTMLElementTagNameMap` is extended with the elements, so
+ * `querySelector("lt-dialog")` gives `LtDialog | null`. The map is here,
+ * and not in each component, because every entry to the web components
+ * brings this file along: from `/register` alone,
+ * `querySelector("lt-dialog")` was otherwise an `Element`, and the listener
+ * on it got `Event` without `detail`.
+ */
+export interface LtEventMap {
+    /** `<lt-tabs>`: The user selected a tab. `index` counts from 0. */
+    "tab-select": CustomEvent<{
+        index: number;
+    }>;
+    /** `<lt-popover>`: The user opened or closed the panel, or `show()`, `hide()` or `toggle()` was called. Setting `open` as a property or attribute dispatches no event. */
+    "popover-toggle": CustomEvent<{
+        open: boolean;
+    }>;
+    /** `<lt-suggestion>`: The user chose a suggestion. `label` is the text, `value` the code from `data-value`, or the text when the option has none. The field also gets `input` and `change`, as if the user had typed it. */
+    "suggestion-select": CustomEvent<{
+        value: string;
+        label: string;
+    }>;
+    /** `<lt-dialog>`: The dialog opened or closed. `returnValue` is the value of the button that closed it, or an empty string. */
+    "dialog-toggle": CustomEvent<{
+        open: boolean;
+        returnValue: string;
+    }>;
+    /** `<lt-toast>`: A message was closed, by the user, because its time ran out, or with `dismiss()`. `clear()` dispatches none. */
+    "toast-dismiss": CustomEvent<null>;
+    /** `<lt-session-timeout>`: The warning opened. */
+    "session-warn": CustomEvent<null>;
+    /** `<lt-session-timeout>`: The session continues: the user closed the warning with a button other than log out or with Escape, or the app called `extend()`. */
+    "session-extend": CustomEvent<null>;
+    /** `<lt-session-timeout>`: The user chose to log out. */
+    "session-logout": CustomEvent<null>;
+    /** `<lt-session-timeout>`: Time is up. */
+    "session-expired": CustomEvent<null>;
+    /** `<lt-session-timeout>`: The user is active. Dispatched at most once per `activity-interval`, so the app can keep the server session alive. */
+    "session-activity": CustomEvent<null>;
+    /** `<lt-connection-status>`: The connection is lost. */
+    "connection-lost": CustomEvent<null>;
+    /** `<lt-connection-status>`: The connection is back. */
+    "connection-restored": CustomEvent<null>;
+}
+declare global {
+    interface HTMLElementEventMap extends LtEventMap {
+    }
+    interface DocumentEventMap extends LtEventMap {
+    }
+    interface HTMLElementTagNameMap {
+        "lt-connection-status": LtConnectionStatus;
+        "lt-dialog": LtDialog;
+        "lt-error-summary": LtErrorSummary;
+        "lt-field": LtField;
+        "lt-popover": LtPopover;
+        "lt-session-timeout": LtSessionTimeout;
+        "lt-suggestion": LtSuggestion;
+        "lt-tabs": LtTabs;
+        "lt-toast": LtToast;
+    }
+}
+//# sourceMappingURL=events.d.ts.map

package/dist/components/events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/components/events.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAA;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAA;AACrF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAA;AACvE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAA;AAChG,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAE7D;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,UAAU;IACzB,mEAAmE;IACnE,YAAY,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC5C,0KAA0K;IAC1K,gBAAgB,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IAChD,4NAA4N;IAC5N,mBAAmB,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAClE,+HAA+H;IAC/H,eAAe,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpE,iIAAiI;IACjI,eAAe,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IAClC,kDAAkD;IAClD,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IACjC,gKAAgK;IAChK,gBAAgB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IACnC,yDAAyD;IACzD,gBAAgB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IACnC,0CAA0C;IAC1C,iBAAiB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IACpC,iJAAiJ;IACjJ,kBAAkB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IACrC,wDAAwD;IACxD,iBAAiB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IACpC,wDAAwD;IACxD,qBAAqB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;CACzC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAoB,SAAQ,UAAU;KAAG;IACnD,UAAU,gBAAiB,SAAQ,UAAU;KAAG;IAChD,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAA;QAC1C,WAAW,EAAE,QAAQ,CAAA;QACrB,kBAAkB,EAAE,cAAc,CAAA;QAClC,UAAU,EAAE,OAAO,CAAA;QACnB,YAAY,EAAE,SAAS,CAAA;QACvB,oBAAoB,EAAE,gBAAgB,CAAA;QACtC,eAAe,EAAE,YAAY,CAAA;QAC7B,SAAS,EAAE,MAAM,CAAA;QACjB,UAAU,EAAE,OAAO,CAAA;KACpB;CACF"}

package/dist/components/events.js

@@ -0,0 +1,3 @@
+// Generated by interfaces/scripts/generate-vocabulary.ts from metadata.ts. Do not edit.
+export {};
+//# sourceMappingURL=events.js.map

package/dist/components/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/components/events.ts"],"names":[],"mappings":"AAAA,wFAAwF"}

package/dist/components/frame/dialog/dialog.d.ts

@@ -0,0 +1,122 @@
+export declare const DIALOG_CLASS: "lt-dialog";
+export declare const DIALOG_HEADER_CLASS: "lt-dialog__header";
+export declare const DIALOG_TITLE_CLASS: "lt-dialog__title";
+export declare const DIALOG_SUBTITLE_CLASS: "lt-dialog__subtitle";
+export declare const DIALOG_BODY_CLASS: "lt-dialog__body";
+export declare const DIALOG_FOOTER_CLASS: "lt-dialog__footer";
+/**
+ * The colour of the header, and what it means.
+ *
+ * `neutral` is the default and gives no colour. The four status colours are
+ * the same ones the alert uses, and `brand` is the brand colour, for a header
+ * that says who is speaking rather than how it went.
+ */
+export declare const dialogColors: readonly ["neutral", "brand", "info", "success", "warning", "danger"];
+export type DialogColor = (typeof dialogColors)[number];
+export type DialogOptions = {
+    /** Id of the heading. The dialog takes its name from it with `aria-labelledby`. */
+    titleId: string;
+    /**
+     * The dialog is open. Default: closed.
+     *
+     * This is the server telling `<lt-dialog>` to show it. If you control the
+     * dialog from the browser yourself, with `showModal()`, leave it out: the
+     * call throws `InvalidStateError` on a dialog that is already open.
+     */
+    open?: boolean;
+    /**
+     * Colour of the header. Default: none.
+     *
+     * The colour applies to `header`, so the header must be in the markup for
+     * it to show: `<div {...box.header}>` around the heading. Without a header
+     * there is nothing to colour.
+     */
+    color?: DialogColor;
+};
+export type DialogAttributes = {
+    host: {
+        open?: true;
+    };
+    dialog: {
+        class: typeof DIALOG_CLASS;
+        "aria-labelledby": string;
+        open?: true;
+        "data-color"?: Exclude<DialogColor, "neutral">;
+    };
+    /** The header, holding the heading and an optional subtitle. Optional. */
+    header: {
+        class: typeof DIALOG_HEADER_CLASS;
+    };
+    title: {
+        class: typeof DIALOG_TITLE_CLASS;
+        id: string;
+    };
+    /** A line below the heading, inside the header. Optional. */
+    subtitle: {
+        class: typeof DIALOG_SUBTITLE_CLASS;
+    };
+    body: {
+        class: typeof DIALOG_BODY_CLASS;
+    };
+    footer: {
+        class: typeof DIALOG_FOOTER_CLASS;
+    };
+};
+/**
+ * The attributes for a dialog.
+ *
+ * Opening a dialog is a call, not an attribute: only `showModal()` moves
+ * focus in, keeps focus inside the dialog, closes on Escape and makes the
+ * rest of the page inert. A `<dialog open>` in the markup is a box on the page.
+ *
+ * That is a problem for a server that only sends HTML, since it cannot call
+ * anything in the browser. So the server says the dialog is open, and
+ * `<lt-dialog>` makes the call.
+ *
+ * The two `open`s are not the same, and it is worth keeping them apart:
+ *
+ * - `open` on the **host** is the server saying the dialog should be shown.
+ *   It is not preserved. If it were, the server could never open the dialog
+ *   again after the user had closed it once. If the server sends the region
+ *   again with `open` still set, the dialog opens again. For a dismissal to
+ *   last, the app must tell the server.
+ * - `open` on the **`<dialog>`** is set by the browser itself when
+ *   `showModal()` is called. It is not in the server's HTML, so a morph
+ *   removes it, and the component puts it back. The server also writes it
+ *   when it knows the dialog should be shown: without JavaScript a `<dialog>`
+ *   without `open` is hidden, and its content does not exist for the reader.
+ *   With the attribute it stands as a box on the page until the component
+ *   turns it into a modal.
+ *
+ * ```ts
+ * const box = lt.dialog({ titleId: "delete-title", open: true })
+ * ```
+ * ```html
+ * <lt-dialog {...box.host}>
+ *   <dialog {...box.dialog}>
+ *     <h2 {...box.title}>Delete the application?</h2>
+ *     <div {...box.body}>The application and its attachments will be gone.</div>
+ *     <form method="dialog" {...box.footer}>
+ *       <button class="lt-button" value="cancel">Cancel</button>
+ *     </form>
+ *   </dialog>
+ * </lt-dialog>
+ * ```
+ */
+export declare const dialog: (({ titleId: givenId, open, color, }: DialogOptions) => DialogAttributes) & {
+    /** The class on the `<dialog>` itself. */
+    dialog: "lt-dialog";
+    /** The class on the header, which `color` can colour. */
+    header: "lt-dialog__header";
+    /** The class on the heading in the dialog. */
+    title: "lt-dialog__title";
+    /** The class on the subtitle in the header. */
+    subtitle: "lt-dialog__subtitle";
+    /** The class on the content, which scrolls when the dialog gets too tall. */
+    body: "lt-dialog__body";
+    /** The class on the row of buttons at the bottom. */
+    footer: "lt-dialog__footer";
+    colors: readonly ["neutral", "brand", "info", "success", "warning", "danger"];
+    isColor: (value: string) => value is "warning" | "info" | "success" | "danger" | "neutral" | "brand";
+};
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/frame/dialog/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/frame/dialog/dialog.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,EAAG,WAAoB,CAAA;AAChD,eAAO,MAAM,mBAAmB,EAAG,mBAA4B,CAAA;AAC/D,eAAO,MAAM,kBAAkB,EAAG,kBAA2B,CAAA;AAC7D,eAAO,MAAM,qBAAqB,EAAG,qBAA8B,CAAA;AACnE,eAAO,MAAM,iBAAiB,EAAG,iBAA0B,CAAA;AAC3D,eAAO,MAAM,mBAAmB,EAAG,mBAA4B,CAAA;AAE/D;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,uEAOf,CAAA;AACV,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvD,MAAM,MAAM,aAAa,GAAG;IAC1B,mFAAmF;IACnF,OAAO,EAAE,MAAM,CAAA;IACf;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE;QACJ,IAAI,CAAC,EAAE,IAAI,CAAA;KACZ,CAAA;IACD,MAAM,EAAE;QACN,KAAK,EAAE,OAAO,YAAY,CAAA;QAC1B,iBAAiB,EAAE,MAAM,CAAA;QACzB,IAAI,CAAC,EAAE,IAAI,CAAA;QACX,YAAY,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;KAC/C,CAAA;IACD,0EAA0E;IAC1E,MAAM,EAAE;QAAE,KAAK,EAAE,OAAO,mBAAmB,CAAA;KAAE,CAAA;IAC7C,KAAK,EAAE;QACL,KAAK,EAAE,OAAO,kBAAkB,CAAA;QAChC,EAAE,EAAE,MAAM,CAAA;KACX,CAAA;IACD,6DAA6D;IAC7D,QAAQ,EAAE;QAAE,KAAK,EAAE,OAAO,qBAAqB,CAAA;KAAE,CAAA;IACjD,IAAI,EAAE;QAAE,KAAK,EAAE,OAAO,iBAAiB,CAAA;KAAE,CAAA;IACzC,MAAM,EAAE;QAAE,KAAK,EAAE,OAAO,mBAAmB,CAAA;KAAE,CAAA;CAC9C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,MAAM,wCAKd,aAAa,KAAG,gBAAgB;IAmCjC,0CAA0C;;IAE1C,yDAAyD;;IAEzD,8CAA8C;;IAE9C,+CAA+C;;IAE/C,6EAA6E;;IAE7E,qDAAqD;;;;CAKxD,CAAA"}

package/dist/components/frame/dialog/dialog.js

@@ -0,0 +1,112 @@
+import { attributes, createGuard, idOrFallback } from "../../css/shared.js";
+export const DIALOG_CLASS = "lt-dialog";
+export const DIALOG_HEADER_CLASS = "lt-dialog__header";
+export const DIALOG_TITLE_CLASS = "lt-dialog__title";
+export const DIALOG_SUBTITLE_CLASS = "lt-dialog__subtitle";
+export const DIALOG_BODY_CLASS = "lt-dialog__body";
+export const DIALOG_FOOTER_CLASS = "lt-dialog__footer";
+/**
+ * The colour of the header, and what it means.
+ *
+ * `neutral` is the default and gives no colour. The four status colours are
+ * the same ones the alert uses, and `brand` is the brand colour, for a header
+ * that says who is speaking rather than how it went.
+ */
+export const dialogColors = [
+    "neutral",
+    "brand",
+    "info",
+    "success",
+    "warning",
+    "danger",
+];
+/**
+ * The attributes for a dialog.
+ *
+ * Opening a dialog is a call, not an attribute: only `showModal()` moves
+ * focus in, keeps focus inside the dialog, closes on Escape and makes the
+ * rest of the page inert. A `<dialog open>` in the markup is a box on the page.
+ *
+ * That is a problem for a server that only sends HTML, since it cannot call
+ * anything in the browser. So the server says the dialog is open, and
+ * `<lt-dialog>` makes the call.
+ *
+ * The two `open`s are not the same, and it is worth keeping them apart:
+ *
+ * - `open` on the **host** is the server saying the dialog should be shown.
+ *   It is not preserved. If it were, the server could never open the dialog
+ *   again after the user had closed it once. If the server sends the region
+ *   again with `open` still set, the dialog opens again. For a dismissal to
+ *   last, the app must tell the server.
+ * - `open` on the **`<dialog>`** is set by the browser itself when
+ *   `showModal()` is called. It is not in the server's HTML, so a morph
+ *   removes it, and the component puts it back. The server also writes it
+ *   when it knows the dialog should be shown: without JavaScript a `<dialog>`
+ *   without `open` is hidden, and its content does not exist for the reader.
+ *   With the attribute it stands as a box on the page until the component
+ *   turns it into a modal.
+ *
+ * ```ts
+ * const box = lt.dialog({ titleId: "delete-title", open: true })
+ * ```
+ * ```html
+ * <lt-dialog {...box.host}>
+ *   <dialog {...box.dialog}>
+ *     <h2 {...box.title}>Delete the application?</h2>
+ *     <div {...box.body}>The application and its attachments will be gone.</div>
+ *     <form method="dialog" {...box.footer}>
+ *       <button class="lt-button" value="cancel">Cancel</button>
+ *     </form>
+ *   </dialog>
+ * </lt-dialog>
+ * ```
+ */
+export const dialog = Object.assign(({ titleId: givenId, open = false, color = "neutral", }) => {
+    // The fallback only matters to someone without a type check.
+    const titleId = idOrFallback("lt.dialog()", givenId, "titleId");
+    return {
+        host: attributes({
+            open: open ? true : undefined,
+        }),
+        dialog: attributes({
+            class: DIALOG_CLASS,
+            "aria-labelledby": titleId,
+            /*
+             * `open` is in both places when the dialog should be shown, on
+             * purpose.
+             *
+             * Without JavaScript a `<dialog>` without `open` is hidden, so the
+             * content the server wanted to show did not exist for the reader. With
+             * `open` it stands there as a box on the page, and the component turns
+             * it into a real modal with `showModal()` once it gets to run.
+             *
+             * In React it is also the only thing that matches: the component sets
+             * `open` on the `<dialog>` before React hydrates, and when it was not in
+             * the server's HTML, React reported a mismatch on every single page load.
+             */
+            open: open ? true : undefined,
+            "data-color": color === "neutral" ? undefined : color,
+        }),
+        header: attributes({ class: DIALOG_HEADER_CLASS }),
+        title: attributes({ class: DIALOG_TITLE_CLASS, id: titleId }),
+        subtitle: attributes({ class: DIALOG_SUBTITLE_CLASS }),
+        body: attributes({ class: DIALOG_BODY_CLASS }),
+        footer: attributes({ class: DIALOG_FOOTER_CLASS }),
+    };
+}, {
+    /** The class on the `<dialog>` itself. */
+    dialog: DIALOG_CLASS,
+    /** The class on the header, which `color` can colour. */
+    header: DIALOG_HEADER_CLASS,
+    /** The class on the heading in the dialog. */
+    title: DIALOG_TITLE_CLASS,
+    /** The class on the subtitle in the header. */
+    subtitle: DIALOG_SUBTITLE_CLASS,
+    /** The class on the content, which scrolls when the dialog gets too tall. */
+    body: DIALOG_BODY_CLASS,
+    /** The class on the row of buttons at the bottom. */
+    footer: DIALOG_FOOTER_CLASS,
+    colors: dialogColors,
+    isColor: createGuard(dialogColors),
+});
+//# sourceMappingURL=dialog.js.map