@lo-tek/interfaces 0.0.0 → 0.37.0

package/dist/components/css/fieldset/fieldset.js

@@ -0,0 +1,39 @@
+import { attributes, createGuard, fieldStates, isFieldState, requiredMarkers, } from "../shared.js";
+export const FIELDSET_CLASS = "lt-fieldset";
+export const LEGEND_CLASS = "lt-legend";
+/**
+ * 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 const fieldset = Object.assign(({ state = "default", disabled } = {}) => attributes({
+    class: FIELDSET_CLASS,
+    "data-state": state === "default" ? undefined : state,
+    disabled: disabled ? true : undefined,
+}), {
+    states: fieldStates,
+    isState: isFieldState,
+});
+/**
+ * The attributes for the label of a group.
+ *
+ * The same marker as `label()`, but on a `<legend>`.
+ */
+export const legend = Object.assign(({ required, optional, disabled } = {}) => attributes({
+    class: LEGEND_CLASS,
+    "data-required": required,
+    "data-optional": optional && !required ? "" : undefined,
+    "aria-disabled": disabled ? "true" : undefined,
+}), {
+    markers: requiredMarkers,
+    isMarker: createGuard(requiredMarkers),
+});
+//# sourceMappingURL=fieldset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.js","sourceRoot":"","sources":["../../../../src/components/css/fieldset/fieldset.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,WAAW,EAEX,WAAW,EACX,YAAY,EAGZ,eAAe,GAChB,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,cAAc,GAAG,aAAsB,CAAA;AACpD,MAAM,CAAC,MAAM,YAAY,GAAG,WAAoB,CAAA;AA+BhD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CACnC,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,QAAQ,KAAsB,EAAE,EAAsB,EAAE,CAC5E,UAAU,CAAC;IACT,KAAK,EAAE,cAAc;IACrB,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;IACrD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;CACjD,CAAC,EACJ;IACE,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,YAAY;CACtB,CACF,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CACjC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,KAAoB,EAAE,EAAoB,EAAE,CACzE,UAAU,CAAC;IACT,KAAK,EAAE,YAAY;IACnB,eAAe,EAAE,QAAQ;IACzB,eAAe,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAE,EAAY,CAAC,CAAC,CAAC,SAAS;IAClE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;CAC1D,CAAC,EACJ;IACE,OAAO,EAAE,eAAe;IACxB,QAAQ,EAAE,WAAW,CAAC,eAAe,CAAC;CACvC,CACF,CAAA"}

package/dist/components/css/file-upload/file-upload.d.ts

@@ -0,0 +1,41 @@
+import { type FieldState, type NonDefaultFieldState } from "../shared.js";
+export declare const FILE_UPLOAD_CLASS: "lt-file-upload";
+/** The list of the selected files. */
+export declare const FILE_UPLOAD_LIST_CLASS: "lt-file-upload-list";
+export type FileUploadOptions = {
+    /** Validation state. Default: `default`. */
+    state?: FieldState;
+    /** Allow several files. */
+    multiple?: boolean;
+    /** The file types the field accepts, such as `.pdf,image/*`. */
+    accept?: string;
+};
+export type FileUploadAttributes = {
+    class: typeof FILE_UPLOAD_CLASS;
+    type: "file";
+    multiple?: true;
+    accept?: string;
+    "data-state"?: NonDefaultFieldState;
+    "aria-invalid"?: "true";
+};
+/**
+ * The attributes for a file upload field.
+ *
+ * The field is a plain `<input type="file">`. The button inside is the
+ * browser's own, and its text comes from the operating system's language. It
+ * cannot be translated, so the label above the field must say what to upload.
+ *
+ * `accept` is a help in the file picker, not a barrier. The user can choose
+ * "all files", so the type must be checked on the server anyway.
+ *
+ * ```ts
+ * <input {...fileUpload({ multiple: true, accept: ".pdf" })} />
+ * ```
+ */
+export declare const fileUpload: (({ state, multiple, accept, }?: FileUploadOptions) => FileUploadAttributes) & {
+    /** The class on the list of selected files. */
+    list: "lt-file-upload-list";
+    states: readonly ["default", "invalid", "success"];
+    isState: (value: string) => value is "default" | "invalid" | "success";
+};
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/components/css/file-upload/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../../src/components/css/file-upload/file-upload.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EAGf,KAAK,oBAAoB,EAC1B,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,iBAAiB,EAAG,gBAAyB,CAAA;AAC1D,sCAAsC;AACtC,eAAO,MAAM,sBAAsB,EAAG,qBAA8B,CAAA;AAEpE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,OAAO,iBAAiB,CAAA;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,mCAKlB,iBAAiB,KAAQ,oBAAoB;IAU9C,+CAA+C;;;;CAKlD,CAAA"}

package/dist/components/css/file-upload/file-upload.js

@@ -0,0 +1,32 @@
+import { attributes, fieldStates, isFieldState, } from "../shared.js";
+export const FILE_UPLOAD_CLASS = "lt-file-upload";
+/** The list of the selected files. */
+export const FILE_UPLOAD_LIST_CLASS = "lt-file-upload-list";
+/**
+ * The attributes for a file upload field.
+ *
+ * The field is a plain `<input type="file">`. The button inside is the
+ * browser's own, and its text comes from the operating system's language. It
+ * cannot be translated, so the label above the field must say what to upload.
+ *
+ * `accept` is a help in the file picker, not a barrier. The user can choose
+ * "all files", so the type must be checked on the server anyway.
+ *
+ * ```ts
+ * <input {...fileUpload({ multiple: true, accept: ".pdf" })} />
+ * ```
+ */
+export const fileUpload = Object.assign(({ state = "default", multiple, accept, } = {}) => attributes({
+    class: FILE_UPLOAD_CLASS,
+    type: "file",
+    multiple: multiple ? true : undefined,
+    accept,
+    "data-state": state === "default" ? undefined : state,
+    "aria-invalid": state === "invalid" ? "true" : undefined,
+}), {
+    /** The class on the list of selected files. */
+    list: FILE_UPLOAD_LIST_CLASS,
+    states: fieldStates,
+    isState: isFieldState,
+});
+//# sourceMappingURL=file-upload.js.map

package/dist/components/css/file-upload/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","sourceRoot":"","sources":["../../../../src/components/css/file-upload/file-upload.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,WAAW,EACX,YAAY,GAEb,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,iBAAiB,GAAG,gBAAyB,CAAA;AAC1D,sCAAsC;AACtC,MAAM,CAAC,MAAM,sBAAsB,GAAG,qBAA8B,CAAA;AAoBpE;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CACrC,CAAC,EACC,KAAK,GAAG,SAAS,EACjB,QAAQ,EACR,MAAM,MACe,EAAE,EAAwB,EAAE,CACjD,UAAU,CAAC;IACT,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,MAAe;IACrB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;IAChD,MAAM;IACN,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,+CAA+C;IAC/C,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,YAAY;CACtB,CACF,CAAA"}

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

@@ -0,0 +1,29 @@
+export declare const HEADING_CLASS: "lt-heading";
+export declare const headingSizes: readonly ["xs", "s", "m", "l", "xl", "mega"];
+export type HeadingSize = (typeof headingSizes)[number];
+export type NonDefaultHeadingSize = Exclude<HeadingSize, "l">;
+export type HeadingOptions = {
+    /** Visual size. Default: `l`. */
+    size?: HeadingSize;
+};
+export type HeadingAttributes = {
+    class: typeof HEADING_CLASS;
+    "data-size"?: NonDefaultHeadingSize;
+};
+/**
+ * The attributes for a heading.
+ *
+ * Size and level are two different things. The level is `<h1>` to `<h6>`
+ * and sets the structure screen readers navigate by; `size` only sets how
+ * large the text looks. An `<h2>` that should look small is correct; an
+ * `<h4>` chosen because it was small enough skips a level in the structure.
+ *
+ * ```ts
+ * <h2 {...heading({ size: "m" })}>Attachments</h2>
+ * ```
+ */
+export declare const heading: (({ size }?: HeadingOptions) => HeadingAttributes) & {
+    sizes: readonly ["xs", "s", "m", "l", "xl", "mega"];
+    isSize: (value: string) => value is "xs" | "s" | "m" | "l" | "xl" | "mega";
+};
+//# sourceMappingURL=heading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../../src/components/css/heading/heading.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,EAAG,YAAqB,CAAA;AAElD,eAAO,MAAM,YAAY,8CAA+C,CAAA;AAExE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,CAAA;AAE7D,MAAM,MAAM,cAAc,GAAG;IAC3B,iCAAiC;IACjC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,OAAO,aAAa,CAAA;IAC3B,WAAW,CAAC,EAAE,qBAAqB,CAAA;CACpC,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,eACD,cAAc,KAAQ,iBAAiB;;;CASzD,CAAA"}

package/dist/components/css/heading/heading.js

@@ -0,0 +1,23 @@
+import { attributes, createGuard } from "../shared.js";
+export const HEADING_CLASS = "lt-heading";
+export const headingSizes = ["xs", "s", "m", "l", "xl", "mega"];
+/**
+ * The attributes for a heading.
+ *
+ * Size and level are two different things. The level is `<h1>` to `<h6>`
+ * and sets the structure screen readers navigate by; `size` only sets how
+ * large the text looks. An `<h2>` that should look small is correct; an
+ * `<h4>` chosen because it was small enough skips a level in the structure.
+ *
+ * ```ts
+ * <h2 {...heading({ size: "m" })}>Attachments</h2>
+ * ```
+ */
+export const heading = Object.assign(({ size = "l" } = {}) => attributes({
+    class: HEADING_CLASS,
+    "data-size": size === "l" ? undefined : size,
+}), {
+    sizes: headingSizes,
+    isSize: createGuard(headingSizes),
+});
+//# sourceMappingURL=heading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../../src/components/css/heading/heading.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,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,CAAU,CAAA;AAexE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAClC,CAAC,EAAE,IAAI,GAAG,GAAG,KAAqB,EAAE,EAAqB,EAAE,CACzD,UAAU,CAAC;IACT,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;CAC7C,CAAC,EACJ;IACE,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC;CAClC,CACF,CAAA"}

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

@@ -0,0 +1,24 @@
+export declare const HELP_TEXT_CLASS: "lt-help-text";
+export declare const helpTextVariants: readonly ["muted", "strong", "success", "warning"];
+export type HelpTextVariant = (typeof helpTextVariants)[number];
+export type NonDefaultHelpTextVariant = Exclude<HelpTextVariant, "muted">;
+export type HelpTextOptions = {
+    /** How loudly the text should speak. Default: `muted`. */
+    variant?: HelpTextVariant;
+};
+export type HelpTextAttributes = {
+    class: typeof HELP_TEXT_CLASS;
+    "data-variant"?: NonDefaultHelpTextVariant;
+};
+/**
+ * The attributes for help text below a field.
+ *
+ * ```ts
+ * <p {...helpText({ variant: "warning" })}>…</p>
+ * ```
+ */
+export declare const helpText: (({ variant }?: HelpTextOptions) => HelpTextAttributes) & {
+    variants: readonly ["muted", "strong", "success", "warning"];
+    isVariant: (value: string) => value is "warning" | "success" | "strong" | "muted";
+};
+//# sourceMappingURL=help-text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"help-text.d.ts","sourceRoot":"","sources":["../../../../src/components/css/help-text/help-text.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,EAAG,cAAuB,CAAA;AAEtD,eAAO,MAAM,gBAAgB,oDAKnB,CAAA;AAEV,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,0DAA0D;IAC1D,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,OAAO,eAAe,CAAA;IAC7B,cAAc,CAAC,EAAE,yBAAyB,CAAA;CAC3C,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,kBACK,eAAe,KAAQ,kBAAkB;;;CASlE,CAAA"}

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

@@ -0,0 +1,23 @@
+import { attributes, createGuard } from "../shared.js";
+export const HELP_TEXT_CLASS = "lt-help-text";
+export const helpTextVariants = [
+    "muted",
+    "strong",
+    "success",
+    "warning",
+];
+/**
+ * The attributes for help text below a field.
+ *
+ * ```ts
+ * <p {...helpText({ variant: "warning" })}>…</p>
+ * ```
+ */
+export const helpText = Object.assign(({ variant = "muted" } = {}) => attributes({
+    class: HELP_TEXT_CLASS,
+    "data-variant": variant === "muted" ? undefined : variant,
+}), {
+    variants: helpTextVariants,
+    isVariant: createGuard(helpTextVariants),
+});
+//# sourceMappingURL=help-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"help-text.js","sourceRoot":"","sources":["../../../../src/components/css/help-text/help-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,eAAe,GAAG,cAAuB,CAAA;AAEtD,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO;IACP,QAAQ;IACR,SAAS;IACT,SAAS;CACD,CAAA;AAeV;;;;;;GAMG;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,eAAe;IACtB,cAAc,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;CAC1D,CAAC,EACJ;IACE,QAAQ,EAAE,gBAAgB;IAC1B,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC;CACzC,CACF,CAAA"}

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

@@ -0,0 +1,34 @@
+export declare const ICON_CLASS: "lt-icon";
+export type IconOptions = {
+    /**
+     * What the icon means, when it stands alone and means something, such as a
+     * warning sign with no text next to it. Becomes `aria-label` with
+     * `role="img"`. Without it the icon is decoration, and is hidden from
+     * screen readers.
+     */
+    label?: string;
+};
+export type IconAttributes = {
+    class: typeof ICON_CLASS;
+    role?: "img";
+    "aria-label"?: string;
+    "aria-hidden"?: "true";
+};
+/**
+ * The attributes for an icon. The class goes on an `<svg>`, and the svg comes
+ * from the app's icon set: LO-TEK ships no icons.
+ *
+ * The icon is as large as the text around it, and is drawn in the colour the
+ * svg says, which should be `currentColor`. Without `label` it is decoration,
+ * and if it stands alone in a button, the button must get its name somewhere
+ * else: `aria-label` on the button, or a text with `lt-sr-only`. The core
+ * reports a button that lacks one.
+ *
+ * ```ts
+ * <button {...button()} aria-label="Delete the application">
+ *   <svg {...icon()} viewBox="0 0 24 24">…</svg>
+ * </button>
+ * ```
+ */
+export declare const icon: ({ label }?: IconOptions) => IconAttributes;
+//# sourceMappingURL=icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../src/components/css/icon/icon.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,EAAG,SAAkB,CAAA;AAE5C,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI,GAAI,YAAW,WAAgB,KAAG,cAM/C,CAAA"}

package/dist/components/css/icon/icon.js

@@ -0,0 +1,25 @@
+import { attributes } from "../shared.js";
+export const ICON_CLASS = "lt-icon";
+/**
+ * The attributes for an icon. The class goes on an `<svg>`, and the svg comes
+ * from the app's icon set: LO-TEK ships no icons.
+ *
+ * The icon is as large as the text around it, and is drawn in the colour the
+ * svg says, which should be `currentColor`. Without `label` it is decoration,
+ * and if it stands alone in a button, the button must get its name somewhere
+ * else: `aria-label` on the button, or a text with `lt-sr-only`. The core
+ * reports a button that lacks one.
+ *
+ * ```ts
+ * <button {...button()} aria-label="Delete the application">
+ *   <svg {...icon()} viewBox="0 0 24 24">…</svg>
+ * </button>
+ * ```
+ */
+export const icon = ({ label } = {}) => attributes({
+    class: ICON_CLASS,
+    role: label ? "img" : undefined,
+    "aria-label": label || undefined,
+    "aria-hidden": label ? undefined : "true",
+});
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../src/components/css/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,UAAU,GAAG,SAAkB,CAAA;AAmB5C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,KAAkB,EAAE,EAAkB,EAAE,CAClE,UAAU,CAAC;IACT,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,KAAK,CAAC,CAAC,CAAE,KAAe,CAAC,CAAC,CAAC,SAAS;IAC1C,YAAY,EAAE,KAAK,IAAI,SAAS;IAChC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,MAAgB;CACrD,CAAC,CAAA"}

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

@@ -0,0 +1,40 @@
+import { type FieldState, type NonDefaultFieldState } from "../shared.js";
+export declare const INPUT_CLASS: "lt-input";
+export declare const inputTypes: readonly ["text", "password", "email", "number", "date", "datetime-local", "week", "month", "tel", "url", "search", "time"];
+export type InputType = (typeof inputTypes)[number];
+/** The types that get an icon in the field, and that open the browser's own picker. */
+declare const TYPES_WITH_ICON: readonly ["date", "time", "datetime-local"];
+type TypeWithIcon = (typeof TYPES_WITH_ICON)[number];
+export type InputOptions = {
+    /** The HTML type. Set as `type`, and decides the icon. Default: `text`. */
+    type?: InputType;
+    /** Validation state. Default: `default`. */
+    state?: FieldState;
+};
+export type InputAttributes = {
+    class: typeof INPUT_CLASS;
+    type: InputType;
+    "data-variant"?: TypeWithIcon;
+    "data-state"?: NonDefaultFieldState;
+    "aria-invalid"?: "true";
+};
+/**
+ * The attributes for a text field.
+ *
+ * `type` sets both the HTML type and the icon variant, so the two cannot get
+ * out of step. Write them by hand, and it is easy to get a date field that
+ * looks like a date field, but where nothing happens when the user presses
+ * the icon.
+ *
+ * ```ts
+ * <input {...input({ type: "date", state: "invalid" })} />
+ * ```
+ */
+export declare const input: (({ type, state }?: InputOptions) => InputAttributes) & {
+    types: readonly ["text", "password", "email", "number", "date", "datetime-local", "week", "month", "tel", "url", "search", "time"];
+    isType: (value: string) => value is "number" | "date" | "search" | "url" | "text" | "password" | "email" | "datetime-local" | "week" | "month" | "tel" | "time";
+    states: readonly ["default", "invalid", "success"];
+    isState: (value: string) => value is "default" | "invalid" | "success";
+};
+export {};
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/css/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,UAAU,EAGf,KAAK,oBAAoB,EAC1B,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,WAAW,EAAG,UAAmB,CAAA;AAE9C,eAAO,MAAM,UAAU,6HAab,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD,uFAAuF;AACvF,QAAA,MAAM,eAAe,6CAA8C,CAAA;AACnE,KAAK,YAAY,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpD,MAAM,MAAM,YAAY,GAAG;IACzB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,OAAO,WAAW,CAAA;IACzB,IAAI,EAAE,SAAS,CAAA;IACf,cAAc,CAAC,EAAE,YAAY,CAAA;IAC7B,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK,sBACuB,YAAY,KAAQ,eAAe;;;;;CAgB3E,CAAA"}

package/dist/components/css/input/input.js

@@ -0,0 +1,45 @@
+import { attributes, createGuard, fieldStates, isFieldState, } from "../shared.js";
+export const INPUT_CLASS = "lt-input";
+export const inputTypes = [
+    "text",
+    "password",
+    "email",
+    "number",
+    "date",
+    "datetime-local",
+    "week",
+    "month",
+    "tel",
+    "url",
+    "search",
+    "time",
+];
+/** The types that get an icon in the field, and that open the browser's own picker. */
+const TYPES_WITH_ICON = ["date", "time", "datetime-local"];
+/**
+ * The attributes for a text field.
+ *
+ * `type` sets both the HTML type and the icon variant, so the two cannot get
+ * out of step. Write them by hand, and it is easy to get a date field that
+ * looks like a date field, but where nothing happens when the user presses
+ * the icon.
+ *
+ * ```ts
+ * <input {...input({ type: "date", state: "invalid" })} />
+ * ```
+ */
+export const input = Object.assign(({ type = "text", state = "default" } = {}) => attributes({
+    class: INPUT_CLASS,
+    type,
+    "data-variant": TYPES_WITH_ICON.includes(type)
+        ? type
+        : undefined,
+    "data-state": state === "default" ? undefined : state,
+    "aria-invalid": state === "invalid" ? "true" : undefined,
+}), {
+    types: inputTypes,
+    isType: createGuard(inputTypes),
+    states: fieldStates,
+    isState: isFieldState,
+});
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../src/components/css/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,WAAW,EAEX,WAAW,EACX,YAAY,GAEb,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,WAAW,GAAG,UAAmB,CAAA;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM;IACN,UAAU;IACV,OAAO;IACP,QAAQ;IACR,MAAM;IACN,gBAAgB;IAChB,MAAM;IACN,OAAO;IACP,KAAK;IACL,KAAK;IACL,QAAQ;IACR,MAAM;CACE,CAAA;AAIV,uFAAuF;AACvF,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,CAAU,CAAA;AAkBnE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAChC,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,GAAG,SAAS,KAAmB,EAAE,EAAmB,EAAE,CAC3E,UAAU,CAAC;IACT,KAAK,EAAE,WAAW;IAClB,IAAI;IACJ,cAAc,EAAG,eAAqC,CAAC,QAAQ,CAAC,IAAI,CAAC;QACnE,CAAC,CAAE,IAAqB;QACxB,CAAC,CAAC,SAAS;IACb,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,KAAK,EAAE,UAAU;IACjB,MAAM,EAAE,WAAW,CAAC,UAAU,CAAC;IAC/B,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,YAAY;CACtB,CACF,CAAA"}

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

@@ -0,0 +1,33 @@
+import { type RequiredMarker, requiredMarkers } from "../shared.js";
+export declare const LABEL_CLASS: "lt-label";
+export type { RequiredMarker };
+export { requiredMarkers };
+export type LabelOptions = {
+    /** Marks the field as required, with an asterisk or with the word "(required)". */
+    required?: RequiredMarker;
+    /** Marks the field as optional. Choose one of `required` and `optional`. */
+    optional?: boolean;
+    /** Mutes the text when the control is disabled. */
+    disabled?: boolean;
+};
+export type LabelAttributes = {
+    class: typeof LABEL_CLASS;
+    "data-required"?: RequiredMarker;
+    "data-optional"?: "";
+    "aria-disabled"?: "true";
+};
+/**
+ * The attributes for a label.
+ *
+ * The marker is only visual, so set `required` on the field itself as well,
+ * or the screen reader is not told that it must be filled in.
+ *
+ * ```ts
+ * <label {...label({ required: "symbol" })} htmlFor="email">Email address</label>
+ * ```
+ */
+export declare const label: (({ required, optional, disabled }?: LabelOptions) => LabelAttributes) & {
+    markers: readonly ["symbol", "text"];
+    isMarker: (value: string) => value is "symbol" | "text";
+};
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../src/components/css/label/label.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,eAAe,EAChB,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,WAAW,EAAG,UAAmB,CAAA;AAE9C,YAAY,EAAE,cAAc,EAAE,CAAA;AAC9B,OAAO,EAAE,eAAe,EAAE,CAAA;AAE1B,MAAM,MAAM,YAAY,GAAG;IACzB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,OAAO,WAAW,CAAA;IACzB,eAAe,CAAC,EAAE,cAAc,CAAA;IAChC,eAAe,CAAC,EAAE,EAAE,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,uCACmB,YAAY,KAAQ,eAAe;;;CAWvE,CAAA"}

package/dist/components/css/label/label.js

@@ -0,0 +1,23 @@
+import { attributes, createGuard, requiredMarkers, } from "../shared.js";
+export const LABEL_CLASS = "lt-label";
+export { requiredMarkers };
+/**
+ * The attributes for a label.
+ *
+ * The marker is only visual, so set `required` on the field itself as well,
+ * or the screen reader is not told that it must be filled in.
+ *
+ * ```ts
+ * <label {...label({ required: "symbol" })} htmlFor="email">Email address</label>
+ * ```
+ */
+export const label = Object.assign(({ required, optional, disabled } = {}) => attributes({
+    class: LABEL_CLASS,
+    "data-required": required,
+    "data-optional": optional && !required ? "" : undefined,
+    "aria-disabled": disabled ? "true" : undefined,
+}), {
+    markers: requiredMarkers,
+    isMarker: createGuard(requiredMarkers),
+});
+//# sourceMappingURL=label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../../src/components/css/label/label.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,WAAW,EAEX,eAAe,GAChB,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,WAAW,GAAG,UAAmB,CAAA;AAG9C,OAAO,EAAE,eAAe,EAAE,CAAA;AAkB1B;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAChC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,KAAmB,EAAE,EAAmB,EAAE,CACvE,UAAU,CAAC;IACT,KAAK,EAAE,WAAW;IAClB,eAAe,EAAE,QAAQ;IACzB,eAAe,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAE,EAAY,CAAC,CAAC,CAAC,SAAS;IAClE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;CAC1D,CAAC,EACJ;IACE,OAAO,EAAE,eAAe;IACxB,QAAQ,EAAE,WAAW,CAAC,eAAe,CAAC;CACvC,CACF,CAAA"}

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

@@ -0,0 +1,28 @@
+export declare const LINK_CLASS: "lt-link";
+export type LinkOptions = {
+    /**
+     * The link cannot be clicked yet. Gives `aria-disabled`, `role="link"` and
+     * `tabindex="0"`, so screen readers still find it as a link and can say
+     * so. Remove `href` as well: otherwise Enter follows it.
+     */
+    disabled?: boolean;
+};
+export type LinkAttributes = {
+    class: typeof LINK_CLASS;
+    role?: "link";
+    tabindex?: "0";
+    "aria-disabled"?: "true";
+};
+/**
+ * The attributes for a link.
+ *
+ * ```ts
+ * <a {...link()} href="/receipt">See receipt</a>
+ * <a {...link({ disabled: true })}>See annual statement</a>
+ * ```
+ *
+ * An `<a>` without `href` is no link to a screen reader and is not in the
+ * tab order. `role` and `tabindex` give it both back while it is disabled.
+ */
+export declare const link: ({ disabled }?: LinkOptions) => LinkAttributes;
+//# sourceMappingURL=link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../src/components/css/link/link.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,EAAG,SAAkB,CAAA;AAE5C,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,IAAI,GAAI,eAAsB,WAAgB,KAAG,cAM1D,CAAA"}

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

@@ -0,0 +1,20 @@
+import { attributes } from "../shared.js";
+export const LINK_CLASS = "lt-link";
+/**
+ * The attributes for a link.
+ *
+ * ```ts
+ * <a {...link()} href="/receipt">See receipt</a>
+ * <a {...link({ disabled: true })}>See annual statement</a>
+ * ```
+ *
+ * An `<a>` without `href` is no link to a screen reader and is not in the
+ * tab order. `role` and `tabindex` give it both back while it is disabled.
+ */
+export const link = ({ disabled = false } = {}) => attributes({
+    class: LINK_CLASS,
+    role: disabled ? "link" : undefined,
+    tabindex: disabled ? "0" : undefined,
+    "aria-disabled": disabled ? "true" : undefined,
+});
+//# sourceMappingURL=link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../src/components/css/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,UAAU,GAAG,SAAkB,CAAA;AAkB5C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,GAAG,KAAK,KAAkB,EAAE,EAAkB,EAAE,CAC7E,UAAU,CAAC;IACT,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;IAC9C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAE,GAAa,CAAC,CAAC,CAAC,SAAS;IAC/C,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;CAC1D,CAAC,CAAA"}

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

@@ -0,0 +1,31 @@
+export declare const LIST_CLASS: "lt-list";
+export declare const listVariants: readonly ["default", "plain", "divided"];
+export type ListVariant = (typeof listVariants)[number];
+export type NonDefaultListVariant = Exclude<ListVariant, "default">;
+export type ListOptions = {
+    /** Bullets, plain rows, or rows with a line between them. Default: `default`. */
+    variant?: ListVariant;
+};
+export type ListAttributes = {
+    class: typeof LIST_CLASS;
+    "data-variant"?: NonDefaultListVariant;
+};
+/**
+ * The attributes for a list.
+ *
+ * The class goes on `<ul>` or `<ol>`. `plain` and `divided` remove the
+ * bullets visually, but the list stays a list, so the screen reader still
+ * says how many items it has. That is why the variant exists: without it
+ * people would use `<div>` to get rid of the bullets. The exception is
+ * Safari, where a `<ul>` without visible bullets can need `role="list"`. See
+ * the component page.
+ *
+ * ```ts
+ * <ul {...list({ variant: "divided" })}>…</ul>
+ * ```
+ */
+export declare const list: (({ variant }?: ListOptions) => ListAttributes) & {
+    variants: readonly ["default", "plain", "divided"];
+    isVariant: (value: string) => value is "default" | "plain" | "divided";
+};
+//# sourceMappingURL=list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/css/list/list.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,EAAG,SAAkB,CAAA;AAE5C,eAAO,MAAM,YAAY,0CAA2C,CAAA;AAEpE,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,iFAAiF;IACjF,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,cAAc,CAAC,EAAE,qBAAqB,CAAA;CACvC,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI,kBACW,WAAW,KAAQ,cAAc;;;CAS5D,CAAA"}

package/dist/components/css/list/list.js

@@ -0,0 +1,25 @@
+import { attributes, createGuard } from "../shared.js";
+export const LIST_CLASS = "lt-list";
+export const listVariants = ["default", "plain", "divided"];
+/**
+ * The attributes for a list.
+ *
+ * The class goes on `<ul>` or `<ol>`. `plain` and `divided` remove the
+ * bullets visually, but the list stays a list, so the screen reader still
+ * says how many items it has. That is why the variant exists: without it
+ * people would use `<div>` to get rid of the bullets. The exception is
+ * Safari, where a `<ul>` without visible bullets can need `role="list"`. See
+ * the component page.
+ *
+ * ```ts
+ * <ul {...list({ variant: "divided" })}>…</ul>
+ * ```
+ */
+export const list = Object.assign(({ variant = "default" } = {}) => attributes({
+    class: LIST_CLASS,
+    "data-variant": variant === "default" ? undefined : variant,
+}), {
+    variants: listVariants,
+    isVariant: createGuard(listVariants),
+});
+//# sourceMappingURL=list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../src/components/css/list/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,UAAU,GAAG,SAAkB,CAAA;AAE5C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,CAAU,CAAA;AAepE;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAC/B,CAAC,EAAE,OAAO,GAAG,SAAS,KAAkB,EAAE,EAAkB,EAAE,CAC5D,UAAU,CAAC;IACT,KAAK,EAAE,UAAU;IACjB,cAAc,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;CAC5D,CAAC,EACJ;IACE,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC;CACrC,CACF,CAAA"}

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

@@ -0,0 +1,27 @@
+export declare const PAGINATION_CLASS: "lt-pagination";
+/** The gap in the row of numbers, as in "1 2 … 9 10". */
+export declare const PAGINATION_GAP_CLASS: "lt-pagination__gap";
+export type PaginationAttributes = {
+    class: typeof PAGINATION_CLASS;
+};
+/**
+ * The attributes for pagination.
+ *
+ * The class goes on a `<ul>` inside a `<nav aria-label="Pagination">`. Each
+ * page is a link with its own address, not a button: the user can then open
+ * page three in a new tab, and come back with the back button.
+ *
+ * The current page is marked with `aria-current="page"`, which both gives
+ * the colour and is what the screen reader announces.
+ *
+ * ```ts
+ * <nav aria-label="Pagination">
+ *   <ul {...pagination()}>…</ul>
+ * </nav>
+ * ```
+ */
+export declare const pagination: (() => PaginationAttributes) & {
+    /** The class on the gap in the row of numbers. */
+    gap: "lt-pagination__gap";
+};
+//# sourceMappingURL=pagination.d.ts.map