@lo-tek/interfaces 0.0.0 → 0.37.0

package/dist/components/css/alert/alert.js

@@ -0,0 +1,29 @@
+import { attributes, createGuard } from "../shared.js";
+export const ALERT_CLASS = "lt-alert";
+/** The heading inside the message. */
+export const ALERT_TITLE_CLASS = "lt-alert__title";
+export const alertColors = ["info", "success", "warning", "danger"];
+/**
+ * The attributes for a message about the whole page or a whole form.
+ *
+ * The role is not set here, because it depends on when the message comes.
+ * If it is in the markup from the start, it should have no role. If it
+ * appears while the page is idle, it needs `role="status"`, or
+ * `role="alert"` if the user must stop.
+ *
+ * ```ts
+ * <div {...alert({ color: "warning" })}>
+ *   <p class={alert.title}>The application has not been sent</p>
+ * </div>
+ * ```
+ */
+export const alert = Object.assign(({ color } = {}) => attributes({
+    class: ALERT_CLASS,
+    "data-color": color,
+}), {
+    /** The class on the heading inside the message. */
+    title: ALERT_TITLE_CLASS,
+    colors: alertColors,
+    isColor: createGuard(alertColors),
+});
+//# sourceMappingURL=alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/components/css/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,WAAW,GAAG,UAAmB,CAAA;AAC9C,sCAAsC;AACtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,iBAA0B,CAAA;AAE3D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAA;AAe5E;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAChC,CAAC,EAAE,KAAK,KAAmB,EAAE,EAAmB,EAAE,CAChD,UAAU,CAAC;IACT,KAAK,EAAE,WAAW;IAClB,YAAY,EAAE,KAAK;CACpB,CAAC,EACJ;IACE,mDAAmD;IACnD,KAAK,EAAE,iBAAiB;IACxB,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC;CAClC,CACF,CAAA"}

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

@@ -0,0 +1,40 @@
+export declare const AVATAR_CLASS: "lt-avatar";
+/** Several profile pictures that overlap. */
+export declare const AVATAR_STACK_CLASS: "lt-avatar-stack";
+export declare const avatarSizes: readonly ["small", "medium", "large"];
+export declare const avatarVariants: readonly ["circle", "square"];
+export type AvatarSize = (typeof avatarSizes)[number];
+export type AvatarVariant = (typeof avatarVariants)[number];
+export type NonDefaultAvatarSize = Exclude<AvatarSize, "medium">;
+export type NonDefaultAvatarVariant = Exclude<AvatarVariant, "circle">;
+export type AvatarOptions = {
+    /** Size. Default: `medium`. */
+    size?: AvatarSize;
+    /** Round or rounded square. Default: `circle`. */
+    variant?: AvatarVariant;
+};
+export type AvatarAttributes = {
+    class: typeof AVATAR_CLASS;
+    "data-size"?: NonDefaultAvatarSize;
+    "data-variant"?: NonDefaultAvatarVariant;
+};
+/**
+ * The attributes for a profile picture or initials.
+ *
+ * If the name is already next to it, the picture is decoration: set
+ * `aria-hidden="true"` on it, or the name is announced twice. If the
+ * picture stands alone, it must have a text that says who it is.
+ *
+ * ```ts
+ * <span {...avatar({ size: "small" })} aria-hidden="true">ON</span>
+ * ```
+ */
+export declare const avatar: (({ size, variant, }?: AvatarOptions) => AvatarAttributes) & {
+    /** The class on the list of overlapping profile pictures. */
+    stack: "lt-avatar-stack";
+    sizes: readonly ["small", "medium", "large"];
+    isSize: (value: string) => value is "small" | "medium" | "large";
+    variants: readonly ["circle", "square"];
+    isVariant: (value: string) => value is "circle" | "square";
+};
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/css/avatar/avatar.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,EAAG,WAAoB,CAAA;AAChD,6CAA6C;AAC7C,eAAO,MAAM,kBAAkB,EAAG,iBAA0B,CAAA;AAE5D,eAAO,MAAM,WAAW,uCAAwC,CAAA;AAChE,eAAO,MAAM,cAAc,+BAAgC,CAAA;AAE3D,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC3D,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;AAChE,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAA;AAEtE,MAAM,MAAM,aAAa,GAAG;IAC1B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,OAAO,YAAY,CAAA;IAC1B,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,cAAc,CAAC,EAAE,uBAAuB,CAAA;CACzC,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,yBAId,aAAa,KAAQ,gBAAgB;IAOtC,6DAA6D;;;;;;CAOhE,CAAA"}

package/dist/components/css/avatar/avatar.js

@@ -0,0 +1,30 @@
+import { attributes, createGuard } from "../shared.js";
+export const AVATAR_CLASS = "lt-avatar";
+/** Several profile pictures that overlap. */
+export const AVATAR_STACK_CLASS = "lt-avatar-stack";
+export const avatarSizes = ["small", "medium", "large"];
+export const avatarVariants = ["circle", "square"];
+/**
+ * The attributes for a profile picture or initials.
+ *
+ * If the name is already next to it, the picture is decoration: set
+ * `aria-hidden="true"` on it, or the name is announced twice. If the
+ * picture stands alone, it must have a text that says who it is.
+ *
+ * ```ts
+ * <span {...avatar({ size: "small" })} aria-hidden="true">ON</span>
+ * ```
+ */
+export const avatar = Object.assign(({ size = "medium", variant = "circle", } = {}) => attributes({
+    class: AVATAR_CLASS,
+    "data-size": size === "medium" ? undefined : size,
+    "data-variant": variant === "circle" ? undefined : variant,
+}), {
+    /** The class on the list of overlapping profile pictures. */
+    stack: AVATAR_STACK_CLASS,
+    sizes: avatarSizes,
+    isSize: createGuard(avatarSizes),
+    variants: avatarVariants,
+    isVariant: createGuard(avatarVariants),
+});
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../../src/components/css/avatar/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,WAAoB,CAAA;AAChD,6CAA6C;AAC7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAA0B,CAAA;AAE5D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAA;AAChE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAU,CAAA;AAoB3D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CACjC,CAAC,EACC,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,QAAQ,MACD,EAAE,EAAoB,EAAE,CACzC,UAAU,CAAC;IACT,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;IACjD,cAAc,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;CAC3D,CAAC,EACJ;IACE,6DAA6D;IAC7D,KAAK,EAAE,kBAAkB;IACzB,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,WAAW,CAAC,WAAW,CAAC;IAChC,QAAQ,EAAE,cAAc;IACxB,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC;CACvC,CACF,CAAA"}

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

@@ -0,0 +1,24 @@
+export declare const BADGE_CLASS: "lt-badge";
+export declare const badgeColors: readonly ["info", "success", "warning", "danger", "neutral"];
+export type BadgeColor = (typeof badgeColors)[number];
+export type NonInfoBadgeColor = Exclude<BadgeColor, "info">;
+export type BadgeOptions = {
+    /** What the status means. Default: `info`. */
+    color?: BadgeColor;
+};
+export type BadgeAttributes = {
+    class: typeof BADGE_CLASS;
+    "data-color"?: NonInfoBadgeColor;
+};
+/**
+ * The attributes for a status badge.
+ *
+ * ```ts
+ * <span {...badge({ color: "success" })}>Approved</span>
+ * ```
+ */
+export declare const badge: (({ color }?: BadgeOptions) => BadgeAttributes) & {
+    colors: readonly ["info", "success", "warning", "danger", "neutral"];
+    isColor: (value: string) => value is "warning" | "info" | "success" | "danger" | "neutral";
+};
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../src/components/css/badge/badge.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,EAAG,UAAmB,CAAA;AAE9C,eAAO,MAAM,WAAW,8DAMd,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,CAAA;AAE3D,MAAM,MAAM,YAAY,GAAG;IACzB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,OAAO,WAAW,CAAA;IACzB,YAAY,CAAC,EAAE,iBAAiB,CAAA;CACjC,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,gBACK,YAAY,KAAQ,eAAe;;;CASzD,CAAA"}

package/dist/components/css/badge/badge.js

@@ -0,0 +1,24 @@
+import { attributes, createGuard } from "../shared.js";
+export const BADGE_CLASS = "lt-badge";
+export const badgeColors = [
+    "info",
+    "success",
+    "warning",
+    "danger",
+    "neutral",
+];
+/**
+ * The attributes for a status badge.
+ *
+ * ```ts
+ * <span {...badge({ color: "success" })}>Approved</span>
+ * ```
+ */
+export const badge = Object.assign(({ color = "info" } = {}) => attributes({
+    class: BADGE_CLASS,
+    "data-color": color === "info" ? undefined : color,
+}), {
+    colors: badgeColors,
+    isColor: createGuard(badgeColors),
+});
+//# sourceMappingURL=badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/css/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,WAAW,GAAG,UAAmB,CAAA;AAE9C,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;IACR,SAAS;CACD,CAAA;AAeV;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAChC,CAAC,EAAE,KAAK,GAAG,MAAM,KAAmB,EAAE,EAAmB,EAAE,CACzD,UAAU,CAAC;IACT,KAAK,EAAE,WAAW;IAClB,YAAY,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;CACnD,CAAC,EACJ;IACE,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC;CAClC,CACF,CAAA"}

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

@@ -0,0 +1,26 @@
+export declare const BREADCRUMBS_CLASS: "lt-breadcrumbs";
+export type BreadcrumbsAttributes = {
+    class: typeof BREADCRUMBS_CLASS;
+};
+/**
+ * The attributes for a breadcrumb trail.
+ *
+ * The class goes on an `<ol>` inside a `<nav>` with a text that says what
+ * the navigation is, for example `aria-label="You are here"`. The order
+ * matters, so the list must be numbered even though the numbers are not
+ * shown.
+ *
+ * The separator between the steps is added with CSS. Had it been in the
+ * markup, screen readers would have read "slash" between every step.
+ *
+ * ```ts
+ * <nav aria-label="You are here">
+ *   <ol {...breadcrumbs()}>
+ *     <li><a href="/">Home</a></li>
+ *     <li><a href="/cases" aria-current="page">My cases</a></li>
+ *   </ol>
+ * </nav>
+ * ```
+ */
+export declare const breadcrumbs: () => BreadcrumbsAttributes;
+//# sourceMappingURL=breadcrumbs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/css/breadcrumbs/breadcrumbs.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,EAAG,gBAAyB,CAAA;AAE1D,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,OAAO,iBAAiB,CAAA;CAChC,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,WAAW,QAAO,qBACW,CAAA"}

package/dist/components/css/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,24 @@
+import { attributes } from "../shared.js";
+export const BREADCRUMBS_CLASS = "lt-breadcrumbs";
+/**
+ * The attributes for a breadcrumb trail.
+ *
+ * The class goes on an `<ol>` inside a `<nav>` with a text that says what
+ * the navigation is, for example `aria-label="You are here"`. The order
+ * matters, so the list must be numbered even though the numbers are not
+ * shown.
+ *
+ * The separator between the steps is added with CSS. Had it been in the
+ * markup, screen readers would have read "slash" between every step.
+ *
+ * ```ts
+ * <nav aria-label="You are here">
+ *   <ol {...breadcrumbs()}>
+ *     <li><a href="/">Home</a></li>
+ *     <li><a href="/cases" aria-current="page">My cases</a></li>
+ *   </ol>
+ * </nav>
+ * ```
+ */
+export const breadcrumbs = () => attributes({ class: BREADCRUMBS_CLASS });
+//# sourceMappingURL=breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/css/breadcrumbs/breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,gBAAyB,CAAA;AAM1D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAA0B,EAAE,CACrD,UAAU,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC,CAAA"}

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

@@ -0,0 +1,26 @@
+export declare const BUTTON_CLASS: "lt-button";
+export declare const buttonVariants: readonly ["primary", "secondary", "ghost", "danger"];
+export type ButtonVariant = (typeof buttonVariants)[number];
+export type NonPrimaryButtonVariant = Exclude<ButtonVariant, "primary">;
+export type ButtonOptions = {
+    /** How weighty the action is. Default: `primary`. */
+    variant?: ButtonVariant;
+};
+export type ButtonAttributes = {
+    class: typeof BUTTON_CLASS;
+    "data-variant"?: NonPrimaryButtonVariant;
+};
+/**
+ * The attributes for a button.
+ *
+ * ```ts
+ * <button {...button({ variant: "secondary" })}>Save draft</button>
+ * ```
+ */
+export declare const button: (({ variant }?: ButtonOptions) => ButtonAttributes) & {
+    /** The valid variants, for lookup and branching. */
+    variants: readonly ["primary", "secondary", "ghost", "danger"];
+    /** Checks whether a string from outside is a valid variant. */
+    isVariant: (value: string) => value is "danger" | "primary" | "secondary" | "ghost";
+};
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/css/button/button.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,EAAG,WAAoB,CAAA;AAEhD,eAAO,MAAM,cAAc,sDAKjB,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC3D,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,aAAa,EAAE,SAAS,CAAC,CAAA;AAEvE,MAAM,MAAM,aAAa,GAAG;IAC1B,qDAAqD;IACrD,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,OAAO,YAAY,CAAA;IAC1B,cAAc,CAAC,EAAE,uBAAuB,CAAA;CACzC,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,kBACS,aAAa,KAAQ,gBAAgB;IAM7D,oDAAoD;;IAEpD,+DAA+D;;CAGlE,CAAA"}

package/dist/components/css/button/button.js

@@ -0,0 +1,25 @@
+import { attributes, createGuard } from "../shared.js";
+export const BUTTON_CLASS = "lt-button";
+export const buttonVariants = [
+    "primary",
+    "secondary",
+    "ghost",
+    "danger",
+];
+/**
+ * The attributes for a button.
+ *
+ * ```ts
+ * <button {...button({ variant: "secondary" })}>Save draft</button>
+ * ```
+ */
+export const button = Object.assign(({ variant = "primary" } = {}) => attributes({
+    class: BUTTON_CLASS,
+    "data-variant": variant === "primary" ? undefined : variant,
+}), {
+    /** The valid variants, for lookup and branching. */
+    variants: buttonVariants,
+    /** Checks whether a string from outside is a valid variant. */
+    isVariant: createGuard(buttonVariants),
+});
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/css/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,WAAoB,CAAA;AAEhD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,SAAS;IACT,WAAW;IACX,OAAO;IACP,QAAQ;CACA,CAAA;AAeV;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CACjC,CAAC,EAAE,OAAO,GAAG,SAAS,KAAoB,EAAE,EAAoB,EAAE,CAChE,UAAU,CAAC;IACT,KAAK,EAAE,YAAY;IACnB,cAAc,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;CAC5D,CAAC,EACJ;IACE,oDAAoD;IACpD,QAAQ,EAAE,cAAc;IACxB,+DAA+D;IAC/D,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC;CACvC,CACF,CAAA"}

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

@@ -0,0 +1,36 @@
+export declare const CARD_CLASS: "lt-card";
+/** The heading inside the card. */
+export declare const CARD_TITLE_CLASS: "lt-card__title";
+export declare const cardVariants: readonly ["outline", "filled"];
+export type CardVariant = (typeof cardVariants)[number];
+export type NonDefaultCardVariant = Exclude<CardVariant, "outline">;
+export type CardOptions = {
+    /** Surface or outline. Default: `outline`. */
+    variant?: CardVariant;
+    /** The whole card is clickable. Use only on `<a>` or `<button>`. */
+    interactive?: boolean;
+};
+export type CardAttributes = {
+    class: typeof CARD_CLASS;
+    "data-variant"?: NonDefaultCardVariant;
+    "data-interactive"?: "";
+};
+/**
+ * The attributes for a card.
+ *
+ * `interactive` gives hover and a focus ring, but makes nothing clickable by
+ * itself. If the whole card should be pressable, the element must be an
+ * `<a>` or a `<button>`. A `<div>` with a click listener can neither be
+ * reached with the keyboard nor be announced as something to press.
+ *
+ * ```ts
+ * <a {...card({ interactive: true })} href="/case/481">…</a>
+ * ```
+ */
+export declare const card: (({ variant, interactive }?: CardOptions) => CardAttributes) & {
+    /** The class on the heading inside the card. */
+    title: "lt-card__title";
+    variants: readonly ["outline", "filled"];
+    isVariant: (value: string) => value is "outline" | "filled";
+};
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/css/card/card.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,EAAG,SAAkB,CAAA;AAC5C,mCAAmC;AACnC,eAAO,MAAM,gBAAgB,EAAG,gBAAyB,CAAA;AAEzD,eAAO,MAAM,YAAY,gCAAiC,CAAA;AAE1D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;AAEnE,MAAM,MAAM,WAAW,GAAG;IACxB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,cAAc,CAAC,EAAE,qBAAqB,CAAA;IACtC,kBAAkB,CAAC,EAAE,EAAE,CAAA;CACxB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI,+BACwB,WAAW,KAAQ,cAAc;IAOtE,gDAAgD;;;;CAKnD,CAAA"}

package/dist/components/css/card/card.js

@@ -0,0 +1,28 @@
+import { attributes, createGuard } from "../shared.js";
+export const CARD_CLASS = "lt-card";
+/** The heading inside the card. */
+export const CARD_TITLE_CLASS = "lt-card__title";
+export const cardVariants = ["outline", "filled"];
+/**
+ * The attributes for a card.
+ *
+ * `interactive` gives hover and a focus ring, but makes nothing clickable by
+ * itself. If the whole card should be pressable, the element must be an
+ * `<a>` or a `<button>`. A `<div>` with a click listener can neither be
+ * reached with the keyboard nor be announced as something to press.
+ *
+ * ```ts
+ * <a {...card({ interactive: true })} href="/case/481">…</a>
+ * ```
+ */
+export const card = Object.assign(({ variant = "outline", interactive } = {}) => attributes({
+    class: CARD_CLASS,
+    "data-variant": variant === "outline" ? undefined : variant,
+    "data-interactive": interactive ? "" : undefined,
+}), {
+    /** The class on the heading inside the card. */
+    title: CARD_TITLE_CLASS,
+    variants: cardVariants,
+    isVariant: createGuard(cardVariants),
+});
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/css/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,UAAU,GAAG,SAAkB,CAAA;AAC5C,mCAAmC;AACnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,gBAAyB,CAAA;AAEzD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAU,CAAA;AAkB1D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAC/B,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,WAAW,KAAkB,EAAE,EAAkB,EAAE,CACzE,UAAU,CAAC;IACT,KAAK,EAAE,UAAU;IACjB,cAAc,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;IAC3D,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAE,EAAY,CAAC,CAAC,CAAC,SAAS;CAC5D,CAAC,EACJ;IACE,gDAAgD;IAChD,KAAK,EAAE,gBAAgB;IACvB,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC;CACrC,CACF,CAAA"}

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

@@ -0,0 +1,32 @@
+import { type FieldState, type NonDefaultFieldState } from "../shared.js";
+export declare const CHECKBOX_CLASS: "lt-checkbox";
+/** The row that holds the box and the text next to each other. */
+export declare const CHECKBOX_ROW_CLASS: "lt-checkbox-row";
+export type CheckboxOptions = {
+    /** Validation state. Default: `default`. */
+    state?: FieldState;
+};
+export type CheckboxAttributes = {
+    class: typeof CHECKBOX_CLASS;
+    type: "checkbox";
+    "data-state"?: NonDefaultFieldState;
+    "aria-invalid"?: "true";
+};
+/**
+ * The attributes for a checkbox.
+ *
+ * `type` is set here, so the box cannot become a text field with a box's
+ * styling. The indeterminate state is set with `element.indeterminate = true`
+ * in JavaScript, not as an attribute, because HTML has no such attribute.
+ *
+ * ```ts
+ * <input {...checkbox({ state: "invalid" })} />
+ * ```
+ */
+export declare const checkbox: (({ state }?: CheckboxOptions) => CheckboxAttributes) & {
+    /** The class on the row around the box and the text. */
+    row: "lt-checkbox-row";
+    states: readonly ["default", "invalid", "success"];
+    isState: (value: string) => value is "default" | "invalid" | "success";
+};
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/css/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EAGf,KAAK,oBAAoB,EAC1B,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,cAAc,EAAG,aAAsB,CAAA;AACpD,kEAAkE;AAClE,eAAO,MAAM,kBAAkB,EAAG,iBAA0B,CAAA;AAE5D,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,IAAI,EAAE,UAAU,CAAA;IAChB,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,gBACK,eAAe,KAAQ,kBAAkB;IAQ/D,wDAAwD;;;;CAK3D,CAAA"}

package/dist/components/css/checkbox/checkbox.js

@@ -0,0 +1,27 @@
+import { attributes, fieldStates, isFieldState, } from "../shared.js";
+export const CHECKBOX_CLASS = "lt-checkbox";
+/** The row that holds the box and the text next to each other. */
+export const CHECKBOX_ROW_CLASS = "lt-checkbox-row";
+/**
+ * The attributes for a checkbox.
+ *
+ * `type` is set here, so the box cannot become a text field with a box's
+ * styling. The indeterminate state is set with `element.indeterminate = true`
+ * in JavaScript, not as an attribute, because HTML has no such attribute.
+ *
+ * ```ts
+ * <input {...checkbox({ state: "invalid" })} />
+ * ```
+ */
+export const checkbox = Object.assign(({ state = "default" } = {}) => attributes({
+    class: CHECKBOX_CLASS,
+    type: "checkbox",
+    "data-state": state === "default" ? undefined : state,
+    "aria-invalid": state === "invalid" ? "true" : undefined,
+}), {
+    /** The class on the row around the box and the text. */
+    row: CHECKBOX_ROW_CLASS,
+    states: fieldStates,
+    isState: isFieldState,
+});
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/css/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,WAAW,EACX,YAAY,GAEb,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,cAAc,GAAG,aAAsB,CAAA;AACpD,kEAAkE;AAClE,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAA0B,CAAA;AAc5D;;;;;;;;;;GAUG;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,IAAI,EAAE,UAAmB;IACzB,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,wDAAwD;IACxD,GAAG,EAAE,kBAAkB;IACvB,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,YAAY;CACtB,CACF,CAAA"}

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

@@ -0,0 +1,29 @@
+export declare const DIVIDER_CLASS: "lt-divider";
+export declare const dividerVariants: readonly ["default", "subtle", "strong"];
+export type DividerVariant = (typeof dividerVariants)[number];
+export type NonDefaultDividerVariant = Exclude<DividerVariant, "default">;
+export type DividerOptions = {
+    /** How visible the line is. Default: `default`. */
+    variant?: DividerVariant;
+};
+export type DividerAttributes = {
+    class: typeof DIVIDER_CLASS;
+    "data-variant"?: NonDefaultDividerVariant;
+};
+/**
+ * The attributes for a divider.
+ *
+ * The class goes on an `<hr>`. If the line separates two parts of the
+ * content, it is information screen readers should get. If it is only
+ * decoration between two boxes that are already apart, set
+ * `aria-hidden="true"` on it.
+ *
+ * ```ts
+ * <hr {...divider({ variant: "subtle" })} />
+ * ```
+ */
+export declare const divider: (({ variant }?: DividerOptions) => DividerAttributes) & {
+    variants: readonly ["default", "subtle", "strong"];
+    isVariant: (value: string) => value is "default" | "subtle" | "strong";
+};
+//# sourceMappingURL=divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../../src/components/css/divider/divider.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,EAAG,YAAqB,CAAA;AAElD,eAAO,MAAM,eAAe,0CAA2C,CAAA;AAEvE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,cAAc,EAAE,SAAS,CAAC,CAAA;AAEzE,MAAM,MAAM,cAAc,GAAG;IAC3B,mDAAmD;IACnD,OAAO,CAAC,EAAE,cAAc,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,OAAO,aAAa,CAAA;IAC3B,cAAc,CAAC,EAAE,wBAAwB,CAAA;CAC1C,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,kBACQ,cAAc,KAAQ,iBAAiB;;;CASlE,CAAA"}

package/dist/components/css/divider/divider.js

@@ -0,0 +1,23 @@
+import { attributes, createGuard } from "../shared.js";
+export const DIVIDER_CLASS = "lt-divider";
+export const dividerVariants = ["default", "subtle", "strong"];
+/**
+ * The attributes for a divider.
+ *
+ * The class goes on an `<hr>`. If the line separates two parts of the
+ * content, it is information screen readers should get. If it is only
+ * decoration between two boxes that are already apart, set
+ * `aria-hidden="true"` on it.
+ *
+ * ```ts
+ * <hr {...divider({ variant: "subtle" })} />
+ * ```
+ */
+export const divider = Object.assign(({ variant = "default" } = {}) => attributes({
+    class: DIVIDER_CLASS,
+    "data-variant": variant === "default" ? undefined : variant,
+}), {
+    variants: dividerVariants,
+    isVariant: createGuard(dividerVariants),
+});
+//# sourceMappingURL=divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../../src/components/css/divider/divider.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,eAAe,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAA;AAevE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAClC,CAAC,EAAE,OAAO,GAAG,SAAS,KAAqB,EAAE,EAAqB,EAAE,CAClE,UAAU,CAAC;IACT,KAAK,EAAE,aAAa;IACpB,cAAc,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;CAC5D,CAAC,EACJ;IACE,QAAQ,EAAE,eAAe;IACzB,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC;CACxC,CACF,CAAA"}

package/dist/components/css/error-text/error-text.d.ts

@@ -0,0 +1,24 @@
+export declare const ERROR_TEXT_CLASS: "lt-error-text";
+export declare const errorTextVariants: readonly ["error", "warning"];
+export type ErrorTextVariant = (typeof errorTextVariants)[number];
+export type NonDefaultErrorTextVariant = Exclude<ErrorTextVariant, "error">;
+export type ErrorTextOptions = {
+    /** Whether the error stops submission or only warns. Default: `error`. */
+    variant?: ErrorTextVariant;
+};
+export type ErrorTextAttributes = {
+    class: typeof ERROR_TEXT_CLASS;
+    "data-variant"?: NonDefaultErrorTextVariant;
+};
+/**
+ * The attributes for an error text below a field.
+ *
+ * ```ts
+ * <p {...errorText({ variant: "warning" })}>…</p>
+ * ```
+ */
+export declare const errorText: (({ variant }?: ErrorTextOptions) => ErrorTextAttributes) & {
+    variants: readonly ["error", "warning"];
+    isVariant: (value: string) => value is "error" | "warning";
+};
+//# sourceMappingURL=error-text.d.ts.map

package/dist/components/css/error-text/error-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-text.d.ts","sourceRoot":"","sources":["../../../../src/components/css/error-text/error-text.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,EAAG,eAAwB,CAAA;AAExD,eAAO,MAAM,iBAAiB,+BAAgC,CAAA;AAE9D,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AACjE,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAA;AAE3E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,OAAO,gBAAgB,CAAA;IAC9B,cAAc,CAAC,EAAE,0BAA0B,CAAA;CAC5C,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,kBACI,gBAAgB,KAAQ,mBAAmB;;;CASpE,CAAA"}

package/dist/components/css/error-text/error-text.js

@@ -0,0 +1,18 @@
+import { attributes, createGuard } from "../shared.js";
+export const ERROR_TEXT_CLASS = "lt-error-text";
+export const errorTextVariants = ["error", "warning"];
+/**
+ * The attributes for an error text below a field.
+ *
+ * ```ts
+ * <p {...errorText({ variant: "warning" })}>…</p>
+ * ```
+ */
+export const errorText = Object.assign(({ variant = "error" } = {}) => attributes({
+    class: ERROR_TEXT_CLASS,
+    "data-variant": variant === "error" ? undefined : variant,
+}), {
+    variants: errorTextVariants,
+    isVariant: createGuard(errorTextVariants),
+});
+//# sourceMappingURL=error-text.js.map

package/dist/components/css/error-text/error-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-text.js","sourceRoot":"","sources":["../../../../src/components/css/error-text/error-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAwB,CAAA;AAExD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,SAAS,CAAU,CAAA;AAe9D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CACpC,CAAC,EAAE,OAAO,GAAG,OAAO,KAAuB,EAAE,EAAuB,EAAE,CACpE,UAAU,CAAC;IACT,KAAK,EAAE,gBAAgB;IACvB,cAAc,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;CAC1D,CAAC,EACJ;IACE,QAAQ,EAAE,iBAAiB;IAC3B,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC;CAC1C,CACF,CAAA"}

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

@@ -0,0 +1,55 @@
+import { type FieldState, type NonDefaultFieldState, type RequiredMarker } from "../shared.js";
+export declare const FIELDSET_CLASS: "lt-fieldset";
+export declare const LEGEND_CLASS: "lt-legend";
+export type FieldsetOptions = {
+    /** Validation state for the whole group. Default: `default`. */
+    state?: FieldState;
+    /** Disables all the controls in the group. */
+    disabled?: boolean;
+};
+export type FieldsetAttributes = {
+    class: typeof FIELDSET_CLASS;
+    "data-state"?: NonDefaultFieldState;
+    disabled?: true;
+};
+export type LegendOptions = {
+    /** Marks the group as required, with an asterisk or with the word "(required)". */
+    required?: RequiredMarker;
+    /** Marks the group as optional. Choose one of `required` and `optional`. */
+    optional?: boolean;
+    /** Mutes the text when the group is disabled. */
+    disabled?: boolean;
+};
+export type LegendAttributes = {
+    class: typeof LEGEND_CLASS;
+    "data-required"?: RequiredMarker;
+    "data-optional"?: "";
+    "aria-disabled"?: "true";
+};
+/**
+ * The attributes for a group of controls that belong together.
+ *
+ * `<fieldset>` with `<legend>` is the one way to give a set of radio buttons
+ * or checkboxes a shared label that screen readers actually announce before
+ * each choice.
+ *
+ * ```ts
+ * <fieldset {...fieldset({ state: "invalid" })}>
+ *   <legend {...legend({ required: "symbol" })}>Delivery method</legend>
+ * </fieldset>
+ * ```
+ */
+export declare const fieldset: (({ state, disabled }?: FieldsetOptions) => FieldsetAttributes) & {
+    states: readonly ["default", "invalid", "success"];
+    isState: (value: string) => value is "default" | "invalid" | "success";
+};
+/**
+ * The attributes for the label of a group.
+ *
+ * The same marker as `label()`, but on a `<legend>`.
+ */
+export declare const legend: (({ required, optional, disabled }?: LegendOptions) => LegendAttributes) & {
+    markers: readonly ["symbol", "text"];
+    isMarker: (value: string) => value is "symbol" | "text";
+};
+//# sourceMappingURL=fieldset.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.d.ts","sourceRoot":"","sources":["../../../../src/components/css/fieldset/fieldset.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,UAAU,EAGf,KAAK,oBAAoB,EACzB,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,cAAc,EAAG,aAAsB,CAAA;AACpD,eAAO,MAAM,YAAY,EAAG,WAAoB,CAAA;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC5B,gEAAgE;IAChE,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,OAAO,cAAc,CAAA;IAC5B,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC,QAAQ,CAAC,EAAE,IAAI,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,mFAAmF;IACnF,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,OAAO,YAAY,CAAA;IAC1B,eAAe,CAAC,EAAE,cAAc,CAAA;IAChC,eAAe,CAAC,EAAE,EAAE,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,0BACe,eAAe,KAAQ,kBAAkB;;;CAU5E,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,uCACkB,aAAa,KAAQ,gBAAgB;;;CAWzE,CAAA"}