@lo-tek/interfaces 0.0.0 → 0.37.0

package/dist/components/css/shared.js

@@ -0,0 +1,167 @@
+/**
+ * Shared building blocks for the component API.
+ *
+ * Each component exports one function that takes an object of options and
+ * returns the attributes you spread onto the element. The shape is the same
+ * for all of them, so you only need to learn it once.
+ */
+/**
+ * The attributes each set manages, including those that are off right now.
+ *
+ * `attributes()` drops the keys without a value, and with them the record of
+ * which attributes the builder function has a say in. `setAttributes` needs
+ * exactly that: `lt.switch()` manages `disabled` and must be able to remove
+ * it, while `lt.button()` has never written it and must leave it alone. The
+ * list is kept in a map beside the object, not on it, so spreading, JSON and
+ * React see the same as before.
+ */
+const managed = new WeakMap();
+/** The names the set manages, or `undefined` for a set we did not create. */
+export function managedNames(set) {
+    return managed.get(set);
+}
+/**
+ * Gives a set rewritten from another the same managed names.
+ *
+ * `/react` renames `class` to `className` in a new object, and the new object
+ * was not in the map. `lt.setAttributes` from there then only cleaned up
+ * `data-*`, and `aria-invalid` stayed after the field was corrected. The
+ * names are given as they are spelled in the new set.
+ *
+ * For `/react` and other entry points that rewrite the sets, not for apps: a
+ * set from `lt.*` is already managed.
+ */
+export function rememberManaged(set, names) {
+    managed.set(set, names);
+}
+/**
+ * Removes attributes without a value, so `{...spread}` does not set empty
+ * fields.
+ *
+ * When the set builds on another, as `lt.search()` does on `lt.input()`, the
+ * other is passed in as `based`. The spread has already lost the keys that
+ * were off, and without this the search field only managed `data-state` when
+ * it happened to be set: it could be set, but not removed.
+ */
+export function attributes(values, ...based) {
+    const result = {};
+    for (const [name, value] of Object.entries(values)) {
+        if (value !== undefined) {
+            ;
+            result[name] = value;
+        }
+    }
+    const names = new Set(Object.keys(values));
+    for (const set of based) {
+        for (const name of managed.get(set) ?? [])
+            names.add(name);
+    }
+    managed.set(result, [...names]);
+    return result;
+}
+/** Creates a type guard for a list of allowed strings. */
+export function createGuard(allowed) {
+    return (value) => allowed.includes(value);
+}
+/**
+ * Validation state for form controls.
+ *
+ * Input, textarea and select each had an identical type of their own. Now
+ * there is one, so a value can pass between them without conversion.
+ */
+export const fieldStates = ["default", "invalid", "success"];
+export const isFieldState = createGuard(fieldStates);
+/** How a required field is marked in its label. */
+export const requiredMarkers = ["symbol", "text"];
+export const isRequiredMarker = createGuard(requiredMarkers);
+/**
+ * Warns once per message, in the console.
+ *
+ * The builder functions are pure functions without an element to attach the
+ * message to, so they cannot use `warnAboutMarkup`. The deduplication is
+ * needed all the same: an app that renders a list of fields would otherwise
+ * say the same thing per field and per render.
+ */
+const said = new Set();
+export function warnOnce(message) {
+    if (typeof console === "undefined" || said.has(message))
+        return;
+    said.add(message);
+    console.warn(message);
+}
+let idCounter = 0;
+/**
+ * Creates an id that is unique within the document.
+ *
+ * Safe only when the markup is rendered once. When the same field is rendered
+ * both on a server and in the browser, the two runs give two different ids,
+ * and the wiring is broken until the framework has corrected it.
+ */
+export function createFieldId() {
+    idCounter += 1;
+    return `lt-field-${idCounter}-${Math.random().toString(36).slice(2, 8)}`;
+}
+/**
+ * The keys a builder function creates ids from, checked.
+ *
+ * A key is the same as `key` in React: a fixed value from the data, such as
+ * a record id. The id is the same on every render, and a server update
+ * recognises the element. An index is not a key: if the server inserts a row
+ * first, the same index points to something else.
+ *
+ * Throws, instead of warning and creating a fallback as `idOrFallback` does:
+ * an empty key, one with whitespace or two identical ones give ids that are
+ * empty, invalid or identical, and there is no fallback that is right.
+ * Whitespace is what JavaScript counts as whitespace (`\s`), which the
+ * Kotlin version spells out.
+ */
+export function checkedKeys(builder, keys) {
+    if (!Array.isArray(keys)) {
+        throw new Error(`${builder}: keys is missing. Pass a list with one key per element, taken from the data, such as a record id.`);
+    }
+    const seen = new Set();
+    for (const key of keys) {
+        if (typeof key !== "string") {
+            throw new Error(`${builder}: a key in keys is not a string but ${typeof key}. The keys become ids; turn numbers into strings, as in String(recordId).`);
+        }
+        if (key === "") {
+            throw new Error(`${builder}: a key in keys is empty. The keys become ids, and each must be a fixed value from the data.`);
+        }
+        if (/\s/.test(key)) {
+            throw new Error(`${builder}: the key "${key}" contains whitespace. The keys become ids, and an id cannot contain whitespace.`);
+        }
+        if (seen.has(key)) {
+            throw new Error(`${builder}: the key "${key}" appears twice in keys. The keys become ids, and two equal ids point to the same element.`);
+        }
+        seen.add(key);
+    }
+    return keys;
+}
+/**
+ * The id the builder function received, or a fallback with a warning.
+ *
+ * Every builder function that takes an id requires it in the type. That is
+ * not enough on its own: a consumer without TypeScript sees no type, and
+ * plain HTML with `<script type="module">` is a first-class way to use
+ * LO-TEK. Without the fallback the ids became strings like `undefined-list`,
+ * `aria-controls` pointed there, and the wiring was broken in a way that
+ * looked valid.
+ *
+ * The empty string counts as no id. `lt.field({ id: "" })` gave `for=""` and
+ * `help.id="-help"`, the same problem without anything saying so.
+ *
+ * The name of the builder function is in the message. Without it the
+ * suggestion field said "lt.field()" and sent the developer to the wrong
+ * place.
+ */
+export function idOrFallback(builder, id, option = "id") {
+    if (typeof id === "string" && id.trim() !== "")
+        return id;
+    warnOnce(`${builder}: no ${option} given, so a random one is created, and two runs ` +
+        "create two different ones. Rendered on a server and in the browser, the " +
+        "wiring points to something that does not exist, and a server that sends " +
+        "the region again with a new id makes the morph replace the elements and " +
+        `lose what the user did in them. Pass ${option}, in React from useId().`);
+    return createFieldId();
+}
+//# sourceMappingURL=shared.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../src/components/css/shared.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,29 @@
+export declare const SKELETON_CLASS: "lt-skeleton";
+export declare const skeletonVariants: readonly ["block", "text", "circle"];
+export type SkeletonVariant = (typeof skeletonVariants)[number];
+export type NonDefaultSkeletonVariant = Exclude<SkeletonVariant, "block">;
+export type SkeletonOptions = {
+    /** Shape. Default: `block`. */
+    variant?: SkeletonVariant;
+};
+export type SkeletonAttributes = {
+    class: typeof SKELETON_CLASS;
+    "data-variant"?: NonDefaultSkeletonVariant;
+    "aria-hidden": "true";
+};
+/**
+ * The attributes for a placeholder while the content loads.
+ *
+ * The shapes are always hidden from screen readers. They say nothing about
+ * what is coming, and a row of empty boxes being announced is worse than
+ * silence. Announce the wait in one place instead, with `role="status"`.
+ *
+ * ```ts
+ * <div {...skeleton({ variant: "text" })} />
+ * ```
+ */
+export declare const skeleton: (({ variant }?: SkeletonOptions) => SkeletonAttributes) & {
+    variants: readonly ["block", "text", "circle"];
+    isVariant: (value: string) => value is "text" | "circle" | "block";
+};
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/css/skeleton/skeleton.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,EAAG,aAAsB,CAAA;AAEpD,eAAO,MAAM,gBAAgB,sCAAuC,CAAA;AAEpE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;AAEzE,MAAM,MAAM,eAAe,GAAG;IAC5B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,OAAO,cAAc,CAAA;IAC5B,cAAc,CAAC,EAAE,yBAAyB,CAAA;IAC1C,aAAa,EAAE,MAAM,CAAA;CACtB,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,kBACK,eAAe,KAAQ,kBAAkB;;;CAUlE,CAAA"}

package/dist/components/css/skeleton/skeleton.js

@@ -0,0 +1,23 @@
+import { attributes, createGuard } from "../shared.js";
+export const SKELETON_CLASS = "lt-skeleton";
+export const skeletonVariants = ["block", "text", "circle"];
+/**
+ * The attributes for a placeholder while the content loads.
+ *
+ * The shapes are always hidden from screen readers. They say nothing about
+ * what is coming, and a row of empty boxes being announced is worse than
+ * silence. Announce the wait in one place instead, with `role="status"`.
+ *
+ * ```ts
+ * <div {...skeleton({ variant: "text" })} />
+ * ```
+ */
+export const skeleton = Object.assign(({ variant = "block" } = {}) => attributes({
+    class: SKELETON_CLASS,
+    "data-variant": variant === "block" ? undefined : variant,
+    "aria-hidden": "true",
+}), {
+    variants: skeletonVariants,
+    isVariant: createGuard(skeletonVariants),
+});
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../../src/components/css/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,cAAc,GAAG,aAAsB,CAAA;AAEpD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAU,CAAA;AAgBpE;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CACnC,CAAC,EAAE,OAAO,GAAG,OAAO,KAAsB,EAAE,EAAsB,EAAE,CAClE,UAAU,CAAC;IACT,KAAK,EAAE,cAAc;IACrB,cAAc,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;IACzD,aAAa,EAAE,MAAe;CAC/B,CAAC,EACJ;IACE,QAAQ,EAAE,gBAAgB;IAC1B,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC;CACzC,CACF,CAAA"}

package/dist/components/css/skip-link/skip-link.d.ts

@@ -0,0 +1,18 @@
+export declare const SKIP_LINK_CLASS: "lt-skip-link";
+export type SkipLinkAttributes = {
+    class: typeof SKIP_LINK_CLASS;
+};
+/**
+ * The attributes for a skip-to-content link.
+ *
+ * The link must be the first element in `<body>`, and point to the id of the
+ * main content. It sits off screen until it gets focus, and therefore cannot
+ * be hidden with `display: none`: the keyboard could not reach it either,
+ * and the whole point is lost.
+ *
+ * ```ts
+ * <a {...skipLink()} href="#main-content">Skip to main content</a>
+ * ```
+ */
+export declare const skipLink: () => SkipLinkAttributes;
+//# sourceMappingURL=skip-link.d.ts.map

package/dist/components/css/skip-link/skip-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skip-link.d.ts","sourceRoot":"","sources":["../../../../src/components/css/skip-link/skip-link.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,EAAG,cAAuB,CAAA;AAEtD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,OAAO,eAAe,CAAA;CAC9B,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ,QAAO,kBACY,CAAA"}

package/dist/components/css/skip-link/skip-link.js

@@ -0,0 +1,16 @@
+import { attributes } from "../shared.js";
+export const SKIP_LINK_CLASS = "lt-skip-link";
+/**
+ * The attributes for a skip-to-content link.
+ *
+ * The link must be the first element in `<body>`, and point to the id of the
+ * main content. It sits off screen until it gets focus, and therefore cannot
+ * be hidden with `display: none`: the keyboard could not reach it either,
+ * and the whole point is lost.
+ *
+ * ```ts
+ * <a {...skipLink()} href="#main-content">Skip to main content</a>
+ * ```
+ */
+export const skipLink = () => attributes({ class: SKIP_LINK_CLASS });
+//# sourceMappingURL=skip-link.js.map

package/dist/components/css/skip-link/skip-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skip-link.js","sourceRoot":"","sources":["../../../../src/components/css/skip-link/skip-link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,eAAe,GAAG,cAAuB,CAAA;AAMtD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAuB,EAAE,CAC/C,UAAU,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,CAAC,CAAA"}

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

@@ -0,0 +1,33 @@
+export declare const SPINNER_CLASS: "lt-spinner";
+export declare const spinnerSizes: readonly ["small", "medium", "large"];
+export type SpinnerSize = (typeof spinnerSizes)[number];
+export type NonDefaultSpinnerSize = Exclude<SpinnerSize, "medium">;
+export type SpinnerOptions = {
+    /** Size. Default: `medium`. */
+    size?: SpinnerSize;
+    /** What is loading. Becomes `aria-label`, so the ring has a name for screen readers. */
+    label?: string;
+};
+export type SpinnerAttributes = {
+    class: typeof SPINNER_CLASS;
+    "data-size"?: NonDefaultSpinnerSize;
+    role?: "status";
+    "aria-label"?: string;
+};
+/**
+ * The attributes for a loading indicator.
+ *
+ * Without `label` the ring is only a shape, and screen readers announce
+ * nothing. With `label` it becomes a `role="status"` that says what is going
+ * on. If you already have a visible text next to it, let that carry the
+ * message and drop `label`, so the same thing is not announced twice.
+ *
+ * ```ts
+ * <span {...spinner({ label: "Loading applications" })} />
+ * ```
+ */
+export declare const spinner: (({ size, label }?: SpinnerOptions) => SpinnerAttributes) & {
+    sizes: readonly ["small", "medium", "large"];
+    isSize: (value: string) => value is "small" | "medium" | "large";
+};
+//# sourceMappingURL=spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/css/spinner/spinner.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,EAAG,YAAqB,CAAA;AAElD,eAAO,MAAM,YAAY,uCAAwC,CAAA;AAEjE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAElE,MAAM,MAAM,cAAc,GAAG;IAC3B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,OAAO,aAAa,CAAA;IAC3B,WAAW,CAAC,EAAE,qBAAqB,CAAA;IACnC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,sBACW,cAAc,KAAQ,iBAAiB;;;CAWrE,CAAA"}

package/dist/components/css/spinner/spinner.js

@@ -0,0 +1,25 @@
+import { attributes, createGuard } from "../shared.js";
+export const SPINNER_CLASS = "lt-spinner";
+export const spinnerSizes = ["small", "medium", "large"];
+/**
+ * The attributes for a loading indicator.
+ *
+ * Without `label` the ring is only a shape, and screen readers announce
+ * nothing. With `label` it becomes a `role="status"` that says what is going
+ * on. If you already have a visible text next to it, let that carry the
+ * message and drop `label`, so the same thing is not announced twice.
+ *
+ * ```ts
+ * <span {...spinner({ label: "Loading applications" })} />
+ * ```
+ */
+export const spinner = Object.assign(({ size = "medium", label } = {}) => attributes({
+    class: SPINNER_CLASS,
+    "data-size": size === "medium" ? undefined : size,
+    role: label ? "status" : undefined,
+    "aria-label": label,
+}), {
+    sizes: spinnerSizes,
+    isSize: createGuard(spinnerSizes),
+});
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../src/components/css/spinner/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,YAAqB,CAAA;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAA;AAmBjE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAClC,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,KAAqB,EAAE,EAAqB,EAAE,CACrE,UAAU,CAAC;IACT,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;IACjD,IAAI,EAAE,KAAK,CAAC,CAAC,CAAE,QAAkB,CAAC,CAAC,CAAC,SAAS;IAC7C,YAAY,EAAE,KAAK;CACpB,CAAC,EACJ;IACE,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC;CAClC,CACF,CAAA"}

package/dist/components/css/sr-only/sr-only.d.ts

@@ -0,0 +1,17 @@
+export declare const SR_ONLY_CLASS: "lt-sr-only";
+export type SrOnlyAttributes = {
+    class: typeof SR_ONLY_CLASS;
+};
+/**
+ * The attributes for text that only screen readers should get.
+ *
+ * ```ts
+ * <span {...srOnly()}>Opens in a new tab</span>
+ * ```
+ *
+ * Use it when a label or explanation is needed by someone listening to the
+ * page, but would be noise to someone looking at it. If the content should
+ * be gone for everyone, use `hidden` instead.
+ */
+export declare const srOnly: () => SrOnlyAttributes;
+//# sourceMappingURL=sr-only.d.ts.map

package/dist/components/css/sr-only/sr-only.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sr-only.d.ts","sourceRoot":"","sources":["../../../../src/components/css/sr-only/sr-only.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,EAAG,YAAqB,CAAA;AAElD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,QAAO,gBACY,CAAA"}

package/dist/components/css/sr-only/sr-only.js

@@ -0,0 +1,15 @@
+import { attributes } from "../shared.js";
+export const SR_ONLY_CLASS = "lt-sr-only";
+/**
+ * The attributes for text that only screen readers should get.
+ *
+ * ```ts
+ * <span {...srOnly()}>Opens in a new tab</span>
+ * ```
+ *
+ * Use it when a label or explanation is needed by someone listening to the
+ * page, but would be noise to someone looking at it. If the content should
+ * be gone for everyone, use `hidden` instead.
+ */
+export const srOnly = () => attributes({ class: SR_ONLY_CLASS });
+//# sourceMappingURL=sr-only.js.map

package/dist/components/css/sr-only/sr-only.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sr-only.js","sourceRoot":"","sources":["../../../../src/components/css/sr-only/sr-only.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,aAAa,GAAG,YAAqB,CAAA;AAMlD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAqB,EAAE,CAC3C,UAAU,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAA"}

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

@@ -0,0 +1,37 @@
+export declare const SWITCH_CLASS: "lt-switch";
+/** The row that holds the switch and the text next to each other. */
+export declare const SWITCH_ROW_CLASS: "lt-switch-row";
+export type SwitchOptions = {
+    /**
+     * The control is disabled. Do not use it to lock the switch while a save
+     * is in progress: `disabled` takes focus away from it, and focus does not
+     * come back.
+     */
+    disabled?: boolean;
+};
+export type SwitchAttributes = {
+    class: typeof SWITCH_CLASS;
+    type: "checkbox";
+    role: "switch";
+    disabled?: true;
+};
+/**
+ * The attributes for an on/off switch.
+ *
+ * The switch is a checkbox with `role="switch"`. Screen readers then
+ * announce it as "on" and "off" rather than "checked", while the keyboard
+ * and `FormData` work as for a plain checkbox.
+ *
+ * The switch has no validation state. A choice that is on or off cannot be
+ * invalid in itself; if turning it on is required, the requirement belongs
+ * in a checkbox with `required`.
+ *
+ * ```ts
+ * <input {...switchControl()} />
+ * ```
+ */
+export declare const switchControl: (({ disabled }?: SwitchOptions) => SwitchAttributes) & {
+    /** The class on the row around the switch and the text. */
+    row: "lt-switch-row";
+};
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/css/switch/switch.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,EAAG,WAAoB,CAAA;AAChD,qEAAqE;AACrE,eAAO,MAAM,gBAAgB,EAAG,eAAwB,CAAA;AAExD,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,OAAO,YAAY,CAAA;IAC1B,IAAI,EAAE,UAAU,CAAA;IAChB,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,CAAC,EAAE,IAAI,CAAA;CAChB,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,mBACT,aAAa,KAAQ,gBAAgB;IAQlD,2DAA2D;;CAG9D,CAAA"}

package/dist/components/css/switch/switch.js

@@ -0,0 +1,29 @@
+import { attributes } from "../shared.js";
+export const SWITCH_CLASS = "lt-switch";
+/** The row that holds the switch and the text next to each other. */
+export const SWITCH_ROW_CLASS = "lt-switch-row";
+/**
+ * The attributes for an on/off switch.
+ *
+ * The switch is a checkbox with `role="switch"`. Screen readers then
+ * announce it as "on" and "off" rather than "checked", while the keyboard
+ * and `FormData` work as for a plain checkbox.
+ *
+ * The switch has no validation state. A choice that is on or off cannot be
+ * invalid in itself; if turning it on is required, the requirement belongs
+ * in a checkbox with `required`.
+ *
+ * ```ts
+ * <input {...switchControl()} />
+ * ```
+ */
+export const switchControl = Object.assign(({ disabled } = {}) => attributes({
+    class: SWITCH_CLASS,
+    type: "checkbox",
+    role: "switch",
+    disabled: disabled ? true : undefined,
+}), {
+    /** The class on the row around the switch and the text. */
+    row: SWITCH_ROW_CLASS,
+});
+//# sourceMappingURL=switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../src/components/css/switch/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,YAAY,GAAG,WAAoB,CAAA;AAChD,qEAAqE;AACrE,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAwB,CAAA;AAkBxD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CACxC,CAAC,EAAE,QAAQ,KAAoB,EAAE,EAAoB,EAAE,CACrD,UAAU,CAAC;IACT,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,UAAmB;IACzB,IAAI,EAAE,QAAiB;IACvB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;CACjD,CAAC,EACJ;IACE,2DAA2D;IAC3D,GAAG,EAAE,gBAAgB;CACtB,CACF,CAAA"}

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

@@ -0,0 +1,76 @@
+export declare const TABLE_CLASS: "lt-table";
+/** The container that lets a wide table scroll sideways. */
+export declare const TABLE_SCROLL_CLASS: "lt-table-scroll";
+export declare const tableVariants: readonly ["default", "striped"];
+export type TableVariant = (typeof tableVariants)[number];
+export type NonDefaultTableVariant = Exclude<TableVariant, "default">;
+export type TableOptions = {
+    /** Every other row on a muted surface. Default: `default`. */
+    variant?: TableVariant;
+    /** Highlights the row under the mouse. Use only when rows can be pressed. */
+    hoverable?: boolean;
+};
+export type TableAttributes = {
+    class: typeof TABLE_CLASS;
+    "data-variant"?: NonDefaultTableVariant;
+    "data-hoverable"?: "";
+};
+/**
+ * The attributes for a table.
+ *
+ * The class goes on a real `<table>` with `<thead>` and `<th>`. The header
+ * cells are what let screen readers say "Amount, 1,240 kroner" when the user
+ * is in a cell. Build the table from `<div>` elements, and that connection
+ * does not exist.
+ *
+ * ```ts
+ * <table {...table({ variant: "striped" })}>…</table>
+ * ```
+ */
+export declare const table: (({ variant, hoverable }?: TableOptions) => TableAttributes) & {
+    /** The class on the container around a wide table. */
+    scroll: "lt-table-scroll";
+    variants: readonly ["default", "striped"];
+    isVariant: (value: string) => value is "default" | "striped";
+};
+/** The class on the button in a sortable column header. */
+export declare const TABLE_SORT_CLASS: "lt-table__sort";
+export declare const tableSortDirections: readonly ["ascending", "descending"];
+export type TableSortDirection = (typeof tableSortDirections)[number];
+export type TableSortOptions = {
+    /**
+     * The direction the column is sorted in. Left out, it means the table is
+     * not sorted by this column, and the header gets no `aria-sort`.
+     */
+    direction?: TableSortDirection;
+};
+export type TableSortAttributes = {
+    header: {
+        "aria-sort"?: TableSortDirection;
+    };
+    button: {
+        class: typeof TABLE_SORT_CLASS;
+        type: "button";
+    };
+};
+/**
+ * The attributes for a sortable column header.
+ *
+ * `aria-sort` is on the `<th>`, not on the button, because the cell is what
+ * describes the column. Only the sorted column has the attribute. The arrow
+ * is drawn from the same attribute, so what the screen reader says and what
+ * is shown cannot drift apart. The sorting itself is the app's job.
+ *
+ * ```ts
+ * const date = lt.tableSort({ direction: "descending" })
+ * ```
+ * ```html
+ * <th scope="col" {...date.header}>
+ *   <button {...date.button}>Date</button>
+ * </th>
+ * ```
+ */
+export declare const tableSort: (({ direction }?: TableSortOptions) => TableSortAttributes) & {
+    isDirection: (value: string) => value is "ascending" | "descending";
+};
+//# sourceMappingURL=table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/css/table/table.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,EAAG,UAAmB,CAAA;AAC9C,4DAA4D;AAC5D,eAAO,MAAM,kBAAkB,EAAG,iBAA0B,CAAA;AAE5D,eAAO,MAAM,aAAa,iCAAkC,CAAA;AAE5D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AACzD,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;AAErE,MAAM,MAAM,YAAY,GAAG;IACzB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,OAAO,WAAW,CAAA;IACzB,cAAc,CAAC,EAAE,sBAAsB,CAAA;IACvC,gBAAgB,CAAC,EAAE,EAAE,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK,6BACqB,YAAY,KAAQ,eAAe;IAOtE,sDAAsD;;;;CAKzD,CAAA;AAED,2DAA2D;AAC3D,eAAO,MAAM,gBAAgB,EAAG,gBAAyB,CAAA;AAEzD,eAAO,MAAM,mBAAmB,sCAAuC,CAAA;AAEvE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAErE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE;QACN,WAAW,CAAC,EAAE,kBAAkB,CAAA;KACjC,CAAA;IACD,MAAM,EAAE;QACN,KAAK,EAAE,OAAO,gBAAgB,CAAA;QAC9B,IAAI,EAAE,QAAQ,CAAA;KACf,CAAA;CACF,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,SAAS,oBACJ,gBAAgB,KAAQ,mBAAmB;;CAY5D,CAAA"}

package/dist/components/css/table/table.js

@@ -0,0 +1,59 @@
+import { attributes, createGuard } from "../shared.js";
+export const TABLE_CLASS = "lt-table";
+/** The container that lets a wide table scroll sideways. */
+export const TABLE_SCROLL_CLASS = "lt-table-scroll";
+export const tableVariants = ["default", "striped"];
+/**
+ * The attributes for a table.
+ *
+ * The class goes on a real `<table>` with `<thead>` and `<th>`. The header
+ * cells are what let screen readers say "Amount, 1,240 kroner" when the user
+ * is in a cell. Build the table from `<div>` elements, and that connection
+ * does not exist.
+ *
+ * ```ts
+ * <table {...table({ variant: "striped" })}>…</table>
+ * ```
+ */
+export const table = Object.assign(({ variant = "default", hoverable } = {}) => attributes({
+    class: TABLE_CLASS,
+    "data-variant": variant === "default" ? undefined : variant,
+    "data-hoverable": hoverable ? "" : undefined,
+}), {
+    /** The class on the container around a wide table. */
+    scroll: TABLE_SCROLL_CLASS,
+    variants: tableVariants,
+    isVariant: createGuard(tableVariants),
+});
+/** The class on the button in a sortable column header. */
+export const TABLE_SORT_CLASS = "lt-table__sort";
+export const tableSortDirections = ["ascending", "descending"];
+/**
+ * The attributes for a sortable column header.
+ *
+ * `aria-sort` is on the `<th>`, not on the button, because the cell is what
+ * describes the column. Only the sorted column has the attribute. The arrow
+ * is drawn from the same attribute, so what the screen reader says and what
+ * is shown cannot drift apart. The sorting itself is the app's job.
+ *
+ * ```ts
+ * const date = lt.tableSort({ direction: "descending" })
+ * ```
+ * ```html
+ * <th scope="col" {...date.header}>
+ *   <button {...date.button}>Date</button>
+ * </th>
+ * ```
+ */
+export const tableSort = Object.assign(({ direction } = {}) => ({
+    header: attributes({ "aria-sort": direction }),
+    button: attributes({ class: TABLE_SORT_CLASS, type: "button" }),
+}), {
+    // The list sits next to it, as `tableSortDirections`, and not on the
+    // function. The guard for the lists requires the attribute and the class
+    // to be on the same element, and here `aria-sort` is on the cell and the
+    // class on the button. The table test requires each direction to give its
+    // own arrow.
+    isDirection: createGuard(tableSortDirections),
+});
+//# sourceMappingURL=table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/css/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,WAAW,GAAG,UAAmB,CAAA;AAC9C,4DAA4D;AAC5D,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAA0B,CAAA;AAE5D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,SAAS,CAAU,CAAA;AAkB5D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAChC,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,KAAmB,EAAE,EAAmB,EAAE,CACzE,UAAU,CAAC;IACT,KAAK,EAAE,WAAW;IAClB,cAAc,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;IAC3D,gBAAgB,EAAE,SAAS,CAAC,CAAC,CAAE,EAAY,CAAC,CAAC,CAAC,SAAS;CACxD,CAAC,EACJ;IACE,sDAAsD;IACtD,MAAM,EAAE,kBAAkB;IAC1B,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,WAAW,CAAC,aAAa,CAAC;CACtC,CACF,CAAA;AAED,2DAA2D;AAC3D,MAAM,CAAC,MAAM,gBAAgB,GAAG,gBAAyB,CAAA;AAEzD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,WAAW,EAAE,YAAY,CAAU,CAAA;AAsBvE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CACpC,CAAC,EAAE,SAAS,KAAuB,EAAE,EAAuB,EAAE,CAAC,CAAC;IAC9D,MAAM,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;IAC9C,MAAM,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAiB,EAAE,CAAC;CACzE,CAAC,EACF;IACE,qEAAqE;IACrE,yEAAyE;IACzE,yEAAyE;IACzE,0EAA0E;IAC1E,aAAa;IACb,WAAW,EAAE,WAAW,CAAC,mBAAmB,CAAC;CAC9C,CACF,CAAA"}

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

@@ -0,0 +1,35 @@
+export declare const TAG_CLASS: "lt-tag";
+export declare const tagVariants: readonly ["outline", "filled"];
+export type TagVariant = (typeof tagVariants)[number];
+export type NonDefaultTagVariant = Exclude<TagVariant, "outline">;
+export type TagOptions = {
+    /** Outline or muted surface. Default: `outline`. */
+    variant?: TagVariant;
+    /** The tag can be toggled on and off. Use only on a `<button>`. */
+    selectable?: boolean;
+};
+export type TagAttributes = {
+    class: typeof TAG_CLASS;
+    "data-variant"?: NonDefaultTagVariant;
+    "data-selectable"?: "";
+};
+/**
+ * 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 declare const tag: (({ variant, selectable }?: TagOptions) => TagAttributes) & {
+    variants: readonly ["outline", "filled"];
+    isVariant: (value: string) => value is "outline" | "filled";
+};
+//# sourceMappingURL=tag.d.ts.map