@lo-tek/interfaces 0.0.0 → 0.38.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/css/pagination/pagination.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,EAAG,eAAwB,CAAA;AACxD,yDAAyD;AACzD,eAAO,MAAM,oBAAoB,EAAG,oBAA6B,CAAA;AAEjE,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,OAAO,gBAAgB,CAAA;CAC/B,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,SACjB,oBAAoB;IAEtB,kDAAkD;;CAGrD,CAAA"}

package/dist/components/css/pagination/pagination.js

@@ -0,0 +1,25 @@
+import { attributes } from "../shared.js";
+export const PAGINATION_CLASS = "lt-pagination";
+/** The gap in the row of numbers, as in "1 2 … 9 10". */
+export const PAGINATION_GAP_CLASS = "lt-pagination__gap";
+/**
+ * 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 const pagination = Object.assign(() => attributes({ class: PAGINATION_CLASS }), {
+    /** The class on the gap in the row of numbers. */
+    gap: PAGINATION_GAP_CLASS,
+});
+//# sourceMappingURL=pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../src/components/css/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAwB,CAAA;AACxD,yDAAyD;AACzD,MAAM,CAAC,MAAM,oBAAoB,GAAG,oBAA6B,CAAA;AAMjE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CACrC,GAAyB,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,EACnE;IACE,kDAAkD;IAClD,GAAG,EAAE,oBAAoB;CAC1B,CACF,CAAA"}

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

@@ -0,0 +1,36 @@
+export declare const PARAGRAPH_CLASS: "lt-paragraph";
+export declare const paragraphSizes: readonly ["small", "medium", "large"];
+export declare const paragraphVariants: readonly ["default", "lead"];
+export type ParagraphSize = (typeof paragraphSizes)[number];
+export type ParagraphVariant = (typeof paragraphVariants)[number];
+export type NonDefaultParagraphSize = Exclude<ParagraphSize, "medium">;
+export type NonDefaultParagraphVariant = Exclude<ParagraphVariant, "default">;
+export type ParagraphOptions = {
+    /** Text size. Default: `medium`. */
+    size?: ParagraphSize;
+    /** `lead` is the introduction right below the heading. Default: `default`. */
+    variant?: ParagraphVariant;
+};
+export type ParagraphAttributes = {
+    class: typeof PARAGRAPH_CLASS;
+    "data-size"?: NonDefaultParagraphSize;
+    "data-variant"?: NonDefaultParagraphVariant;
+};
+/**
+ * The attributes for a paragraph.
+ *
+ * The width is limited to 70 characters. Longer lines make it hard to find
+ * the start of the next one, and that is the most common reason a text is
+ * hard to read even when the type is large enough.
+ *
+ * ```ts
+ * <p {...paragraph({ variant: "lead" })}>A short summary of what the page is about.</p>
+ * ```
+ */
+export declare const paragraph: (({ size, variant, }?: ParagraphOptions) => ParagraphAttributes) & {
+    sizes: readonly ["small", "medium", "large"];
+    isSize: (value: string) => value is "small" | "medium" | "large";
+    variants: readonly ["default", "lead"];
+    isVariant: (value: string) => value is "default" | "lead";
+};
+//# sourceMappingURL=paragraph.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["../../../../src/components/css/paragraph/paragraph.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,EAAG,cAAuB,CAAA;AAEtD,eAAO,MAAM,cAAc,uCAAwC,CAAA;AACnE,eAAO,MAAM,iBAAiB,8BAA+B,CAAA;AAE7D,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC3D,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AACjE,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAA;AACtE,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAA;AAE7E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oCAAoC;IACpC,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,OAAO,eAAe,CAAA;IAC7B,WAAW,CAAC,EAAE,uBAAuB,CAAA;IACrC,cAAc,CAAC,EAAE,0BAA0B,CAAA;CAC5C,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,yBAIjB,gBAAgB,KAAQ,mBAAmB;;;;;CAY/C,CAAA"}

package/dist/components/css/paragraph/paragraph.js

@@ -0,0 +1,26 @@
+import { attributes, createGuard } from "../shared.js";
+export const PARAGRAPH_CLASS = "lt-paragraph";
+export const paragraphSizes = ["small", "medium", "large"];
+export const paragraphVariants = ["default", "lead"];
+/**
+ * The attributes for a paragraph.
+ *
+ * The width is limited to 70 characters. Longer lines make it hard to find
+ * the start of the next one, and that is the most common reason a text is
+ * hard to read even when the type is large enough.
+ *
+ * ```ts
+ * <p {...paragraph({ variant: "lead" })}>A short summary of what the page is about.</p>
+ * ```
+ */
+export const paragraph = Object.assign(({ size = "medium", variant = "default", } = {}) => attributes({
+    class: PARAGRAPH_CLASS,
+    "data-size": size === "medium" ? undefined : size,
+    "data-variant": variant === "default" ? undefined : variant,
+}), {
+    sizes: paragraphSizes,
+    isSize: createGuard(paragraphSizes),
+    variants: paragraphVariants,
+    isVariant: createGuard(paragraphVariants),
+});
+//# sourceMappingURL=paragraph.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.js","sourceRoot":"","sources":["../../../../src/components/css/paragraph/paragraph.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,cAAc,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAA;AACnE,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,SAAS,EAAE,MAAM,CAAU,CAAA;AAoB7D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CACpC,CAAC,EACC,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,MACC,EAAE,EAAuB,EAAE,CAC/C,UAAU,CAAC;IACT,KAAK,EAAE,eAAe;IACtB,WAAW,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;IACjD,cAAc,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;CAC5D,CAAC,EACJ;IACE,KAAK,EAAE,cAAc;IACrB,MAAM,EAAE,WAAW,CAAC,cAAc,CAAC;IACnC,QAAQ,EAAE,iBAAiB;IAC3B,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC;CAC1C,CACF,CAAA"}

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

@@ -0,0 +1,53 @@
+export declare const PROGRESS_CLASS: "lt-progress";
+export declare const progressColors: readonly ["success", "warning", "danger"];
+export type ProgressColor = (typeof progressColors)[number];
+export type ProgressOptions = {
+    /** How far it has come. Leave it out, and the bar is indeterminate. */
+    value?: number;
+    /** What counts as full. Default: `100`. */
+    max?: number;
+    /** What the number means. The default is the accent colour, meaning "this is in progress". */
+    color?: ProgressColor;
+    /** What is in progress. Becomes `aria-label`, so the bar has a name. */
+    label?: string;
+    /**
+     * How far it has come, in words. Becomes `aria-valuetext`, which the
+     * screen reader reads instead of the percentage: "Step 3 of 7" says more
+     * than "43 percent", and `max` is rarely announced.
+     */
+    valueText?: string;
+};
+export type ProgressAttributes = {
+    class: typeof PROGRESS_CLASS;
+    value?: string;
+    max: string;
+    "data-color"?: ProgressColor;
+    "aria-label"?: string;
+    "aria-valuetext"?: string;
+};
+/**
+ * The attributes for a progress bar on a `<progress>`.
+ *
+ * The element has the semantics built in: the browser exposes it as
+ * `role="progressbar"` and announces how far it has come. You need neither a
+ * role, `aria-valuenow` nor `aria-valuemax`.
+ *
+ * Leave out `value`, and the bar becomes indeterminate: "something is going
+ * on, we do not know for how long". That is the same as `lt.spinner()` says,
+ * so choose one of them.
+ *
+ * ```ts
+ * <progress {...progress({ value: 3, max: 7, label: "Step 3 of 7" })} />
+ * ```
+ *
+ * `max` defaults to 100 and is always written out, against the rule that a
+ * default gives no attribute. The reason is that the rule is about
+ * appearance, where the CSS already has the answer. `max` is semantics, and
+ * HTML's own default is `1`: a `<progress value="40">` without `max` shows a
+ * full bar, without anything saying so.
+ */
+export declare const progress: (({ value, max, color, label, valueText, }?: ProgressOptions) => ProgressAttributes) & {
+    colors: readonly ["success", "warning", "danger"];
+    isColor: (value: string) => value is "warning" | "success" | "danger";
+};
+//# sourceMappingURL=progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../src/components/css/progress/progress.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,EAAG,aAAsB,CAAA;AAEpD,eAAO,MAAM,cAAc,2CAA4C,CAAA;AAEvE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D,MAAM,MAAM,eAAe,GAAG;IAC5B,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,8FAA8F;IAC9F,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,OAAO,cAAc,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,aAAa,CAAA;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,QAAQ,+CAOhB,eAAe,KAAQ,kBAAkB;;;CAe7C,CAAA"}

package/dist/components/css/progress/progress.js

@@ -0,0 +1,38 @@
+import { attributes, createGuard } from "../shared.js";
+export const PROGRESS_CLASS = "lt-progress";
+export const progressColors = ["success", "warning", "danger"];
+/**
+ * The attributes for a progress bar on a `<progress>`.
+ *
+ * The element has the semantics built in: the browser exposes it as
+ * `role="progressbar"` and announces how far it has come. You need neither a
+ * role, `aria-valuenow` nor `aria-valuemax`.
+ *
+ * Leave out `value`, and the bar becomes indeterminate: "something is going
+ * on, we do not know for how long". That is the same as `lt.spinner()` says,
+ * so choose one of them.
+ *
+ * ```ts
+ * <progress {...progress({ value: 3, max: 7, label: "Step 3 of 7" })} />
+ * ```
+ *
+ * `max` defaults to 100 and is always written out, against the rule that a
+ * default gives no attribute. The reason is that the rule is about
+ * appearance, where the CSS already has the answer. `max` is semantics, and
+ * HTML's own default is `1`: a `<progress value="40">` without `max` shows a
+ * full bar, without anything saying so.
+ */
+export const progress = Object.assign(({ value, max = 100, color, label, valueText, } = {}) => attributes({
+    class: PROGRESS_CLASS,
+    // The numbers are sent out as strings, like the rest of the return
+    // values: that is the HTML form, and it is what `setAttributes` accepts.
+    value: value === undefined ? undefined : String(value),
+    max: String(max),
+    "data-color": color,
+    "aria-label": label,
+    "aria-valuetext": valueText,
+}), {
+    colors: progressColors,
+    isColor: createGuard(progressColors),
+});
+//# sourceMappingURL=progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../../src/components/css/progress/progress.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,cAAc,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAA;AA8BvE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CACnC,CAAC,EACC,KAAK,EACL,GAAG,GAAG,GAAG,EACT,KAAK,EACL,KAAK,EACL,SAAS,MACU,EAAE,EAAsB,EAAE,CAC7C,UAAU,CAAC;IACT,KAAK,EAAE,cAAc;IACrB,mEAAmE;IACnE,yEAAyE;IACzE,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;IACtD,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC;IAChB,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,KAAK;IACnB,gBAAgB,EAAE,SAAS;CAC5B,CAAC,EACJ;IACE,MAAM,EAAE,cAAc;IACtB,OAAO,EAAE,WAAW,CAAC,cAAc,CAAC;CACrC,CACF,CAAA"}

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

@@ -0,0 +1,32 @@
+import { type FieldState, type NonDefaultFieldState } from "../shared.js";
+export declare const RADIO_CLASS: "lt-radio";
+/** The row that holds the button and the text next to each other. */
+export declare const RADIO_ROW_CLASS: "lt-radio-row";
+export type RadioOptions = {
+    /** Validation state. Default: `default`. */
+    state?: FieldState;
+};
+export type RadioAttributes = {
+    class: typeof RADIO_CLASS;
+    type: "radio";
+    "data-state"?: NonDefaultFieldState;
+    "aria-invalid"?: "true";
+};
+/**
+ * The attributes for a radio button.
+ *
+ * All the buttons in a group must have the same `name`. That connection is
+ * what lets only one be selected, and lets the arrow keys move between them.
+ * You set `name` yourself, since only you know what the group is called.
+ *
+ * ```ts
+ * <input {...radio()} name="delivery" value="post" />
+ * ```
+ */
+export declare const radio: (({ state }?: RadioOptions) => RadioAttributes) & {
+    /** The class on the row around the button and the text. */
+    row: "lt-radio-row";
+    states: readonly ["default", "invalid", "success"];
+    isState: (value: string) => value is "default" | "invalid" | "success";
+};
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../src/components/css/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EAGf,KAAK,oBAAoB,EAC1B,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,WAAW,EAAG,UAAmB,CAAA;AAC9C,qEAAqE;AACrE,eAAO,MAAM,eAAe,EAAG,cAAuB,CAAA;AAEtD,MAAM,MAAM,YAAY,GAAG;IACzB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,OAAO,WAAW,CAAA;IACzB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,gBACQ,YAAY,KAAQ,eAAe;IAQzD,2DAA2D;;;;CAK9D,CAAA"}

package/dist/components/css/radio/radio.js

@@ -0,0 +1,27 @@
+import { attributes, fieldStates, isFieldState, } from "../shared.js";
+export const RADIO_CLASS = "lt-radio";
+/** The row that holds the button and the text next to each other. */
+export const RADIO_ROW_CLASS = "lt-radio-row";
+/**
+ * The attributes for a radio button.
+ *
+ * All the buttons in a group must have the same `name`. That connection is
+ * what lets only one be selected, and lets the arrow keys move between them.
+ * You set `name` yourself, since only you know what the group is called.
+ *
+ * ```ts
+ * <input {...radio()} name="delivery" value="post" />
+ * ```
+ */
+export const radio = Object.assign(({ state = "default" } = {}) => attributes({
+    class: RADIO_CLASS,
+    type: "radio",
+    "data-state": state === "default" ? undefined : state,
+    "aria-invalid": state === "invalid" ? "true" : undefined,
+}), {
+    /** The class on the row around the button and the text. */
+    row: RADIO_ROW_CLASS,
+    states: fieldStates,
+    isState: isFieldState,
+});
+//# sourceMappingURL=radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../src/components/css/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,WAAW,EACX,YAAY,GAEb,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,WAAW,GAAG,UAAmB,CAAA;AAC9C,qEAAqE;AACrE,MAAM,CAAC,MAAM,eAAe,GAAG,cAAuB,CAAA;AActD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAChC,CAAC,EAAE,KAAK,GAAG,SAAS,KAAmB,EAAE,EAAmB,EAAE,CAC5D,UAAU,CAAC;IACT,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,OAAgB;IACtB,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,2DAA2D;IAC3D,GAAG,EAAE,eAAe;IACpB,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,YAAY;CACtB,CACF,CAAA"}

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

@@ -0,0 +1,34 @@
+import { INPUT_CLASS } from "../input/input.js";
+import { type FieldState } from "../shared.js";
+export declare const SEARCH_CLASS: "lt-search";
+/** The row with the search field and the button next to it. */
+export declare const SEARCH_ROW_CLASS: "lt-search-row";
+export type SearchOptions = {
+    /** Validation state. Default: `default`. */
+    state?: FieldState;
+};
+export type SearchAttributes = {
+    class: `${typeof INPUT_CLASS} ${typeof SEARCH_CLASS}`;
+    type: "search";
+    "data-state"?: "invalid" | "success";
+    "aria-invalid"?: "true";
+};
+/**
+ * The attributes for a search field.
+ *
+ * The field is an `lt-input` with room for the magnifying glass, so both
+ * classes are set. `type="search"` gives the browser's own cross for
+ * clearing the field, and on mobile a keyboard with "Search" instead of
+ * "Enter".
+ *
+ * ```ts
+ * <input {...search()} name="q" />
+ * ```
+ */
+export declare const search: (({ state }?: SearchOptions) => SearchAttributes) & {
+    /** The class on the row with the field and the button. */
+    row: "lt-search-row";
+    states: readonly ["default", "invalid", "success"];
+    isState: (value: string) => value is "default" | "invalid" | "success";
+};
+//# sourceMappingURL=search.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../../src/components/css/search/search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAS,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAEL,KAAK,UAAU,EAGhB,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,YAAY,EAAG,WAAoB,CAAA;AAChD,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,EAAG,eAAwB,CAAA;AAExD,MAAM,MAAM,aAAa,GAAG;IAC1B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,GAAG,OAAO,WAAW,IAAI,OAAO,YAAY,EAAE,CAAA;IACrD,IAAI,EAAE,QAAQ,CAAA;IACd,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IACpC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,MAAM,gBACO,aAAa,KAAQ,gBAAgB;IAa3D,0DAA0D;;;;CAK7D,CAAA"}

package/dist/components/css/search/search.js

@@ -0,0 +1,32 @@
+import { INPUT_CLASS, input } from "../input/input.js";
+import { attributes, fieldStates, isFieldState, } from "../shared.js";
+export const SEARCH_CLASS = "lt-search";
+/** The row with the search field and the button next to it. */
+export const SEARCH_ROW_CLASS = "lt-search-row";
+/**
+ * The attributes for a search field.
+ *
+ * The field is an `lt-input` with room for the magnifying glass, so both
+ * classes are set. `type="search"` gives the browser's own cross for
+ * clearing the field, and on mobile a keyboard with "Search" instead of
+ * "Enter".
+ *
+ * ```ts
+ * <input {...search()} name="q" />
+ * ```
+ */
+export const search = Object.assign(({ state = "default" } = {}) => {
+    const base = input({ type: "search", state });
+    return attributes({
+        ...base,
+        class: `${INPUT_CLASS} ${SEARCH_CLASS}`,
+        type: "search",
+        "data-variant": undefined,
+    }, base);
+}, {
+    /** The class on the row with the field and the button. */
+    row: SEARCH_ROW_CLASS,
+    states: fieldStates,
+    isState: isFieldState,
+});
+//# sourceMappingURL=search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../../../../src/components/css/search/search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EACL,UAAU,EAEV,WAAW,EACX,YAAY,GACb,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,YAAY,GAAG,WAAoB,CAAA;AAChD,+DAA+D;AAC/D,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAwB,CAAA;AAcxD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CACjC,CAAC,EAAE,KAAK,GAAG,SAAS,KAAoB,EAAE,EAAoB,EAAE;IAC9D,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;IAC7C,OAAO,UAAU,CACf;QACE,GAAG,IAAI;QACP,KAAK,EAAE,GAAG,WAAW,IAAI,YAAY,EAAW;QAChD,IAAI,EAAE,QAAiB;QACvB,cAAc,EAAE,SAAS;KAC1B,EACD,IAAI,CACe,CAAA;AACvB,CAAC,EACD;IACE,0DAA0D;IAC1D,GAAG,EAAE,gBAAgB;IACrB,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,YAAY;CACtB,CACF,CAAA"}

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

@@ -0,0 +1,40 @@
+import { type FieldState, type NonDefaultFieldState } from "../shared.js";
+export declare const SELECT_CLASS: "lt-select";
+/**
+ * Who draws the dropdown list.
+ *
+ * `auto` is the browser's own list, a window from the operating system that
+ * cannot be styled. `styled` asks the browser to draw it inside the page
+ * instead, so it gets the design system's colours, spacing and shadow.
+ */
+export declare const selectPickers: readonly ["auto", "styled"];
+export type SelectPicker = (typeof selectPickers)[number];
+export type NonDefaultSelectPicker = Exclude<SelectPicker, "auto">;
+export declare const isSelectPicker: (value: string) => value is "auto" | "styled";
+export type SelectOptions = {
+    /** Validation state. Default: `default`. */
+    state?: FieldState;
+    /** Who draws the dropdown list. Default: `auto`. */
+    picker?: SelectPicker;
+};
+export type SelectAttributes = {
+    class: typeof SELECT_CLASS;
+    "data-state"?: NonDefaultFieldState;
+    "data-picker"?: NonDefaultSelectPicker;
+    "aria-invalid"?: "true";
+};
+/**
+ * The attributes for a dropdown list.
+ *
+ * ```ts
+ * <select {...select({ state: "invalid" })} />
+ * <select {...select({ picker: "styled" })} />
+ * ```
+ */
+export declare const select: (({ state, picker, }?: SelectOptions) => SelectAttributes) & {
+    states: readonly ["default", "invalid", "success"];
+    isState: (value: string) => value is "default" | "invalid" | "success";
+    pickers: readonly ["auto", "styled"];
+    isPicker: (value: string) => value is "auto" | "styled";
+};
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/css/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,UAAU,EAGf,KAAK,oBAAoB,EAC1B,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,YAAY,EAAG,WAAoB,CAAA;AAEhD;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,6BAA8B,CAAA;AACxD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AACzD,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;AAClE,eAAO,MAAM,cAAc,+CAA6B,CAAA;AAExD,MAAM,MAAM,aAAa,GAAG;IAC1B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,oDAAoD;IACpD,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,OAAO,YAAY,CAAA;IAC1B,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC,aAAa,CAAC,EAAE,sBAAsB,CAAA;IACtC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,yBAId,aAAa,KAAQ,gBAAgB;;;;;CAazC,CAAA"}

package/dist/components/css/select/select.js

@@ -0,0 +1,31 @@
+import { attributes, createGuard, fieldStates, isFieldState, } from "../shared.js";
+export const SELECT_CLASS = "lt-select";
+/**
+ * Who draws the dropdown list.
+ *
+ * `auto` is the browser's own list, a window from the operating system that
+ * cannot be styled. `styled` asks the browser to draw it inside the page
+ * instead, so it gets the design system's colours, spacing and shadow.
+ */
+export const selectPickers = ["auto", "styled"];
+export const isSelectPicker = createGuard(selectPickers);
+/**
+ * The attributes for a dropdown list.
+ *
+ * ```ts
+ * <select {...select({ state: "invalid" })} />
+ * <select {...select({ picker: "styled" })} />
+ * ```
+ */
+export const select = Object.assign(({ state = "default", picker = "auto", } = {}) => attributes({
+    class: SELECT_CLASS,
+    "data-state": state === "default" ? undefined : state,
+    "data-picker": picker === "auto" ? undefined : picker,
+    "aria-invalid": state === "invalid" ? "true" : undefined,
+}), {
+    states: fieldStates,
+    isState: isFieldState,
+    pickers: selectPickers,
+    isPicker: isSelectPicker,
+});
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/css/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,WAAW,EAEX,WAAW,EACX,YAAY,GAEb,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,YAAY,GAAG,WAAoB,CAAA;AAEhD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAU,CAAA;AAGxD,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CAAC,aAAa,CAAC,CAAA;AAgBxD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CACjC,CAAC,EACC,KAAK,GAAG,SAAS,EACjB,MAAM,GAAG,MAAM,MACE,EAAE,EAAoB,EAAE,CACzC,UAAU,CAAC;IACT,KAAK,EAAE,YAAY;IACnB,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;IACrD,aAAa,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;IACrD,cAAc,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;CACpE,CAAC,EACJ;IACE,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,YAAY;IACrB,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,cAAc;CACzB,CACF,CAAA"}

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

@@ -0,0 +1,90 @@
+/**
+ * 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 names the set manages, or `undefined` for a set we did not create. */
+export declare function managedNames(set: object): readonly string[] | undefined;
+/**
+ * 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 declare function rememberManaged(set: object, names: readonly string[]): void;
+/**
+ * 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 declare function attributes<T extends Record<string, unknown>>(values: T, ...based: object[]): T;
+/** Creates a type guard for a list of allowed strings. */
+export declare function createGuard<T extends string>(allowed: readonly T[]): (value: string) => value is T;
+/**
+ * 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 declare const fieldStates: readonly ["default", "invalid", "success"];
+export type FieldState = (typeof fieldStates)[number];
+export type NonDefaultFieldState = Exclude<FieldState, "default">;
+export declare const isFieldState: (value: string) => value is "default" | "invalid" | "success";
+/** How a required field is marked in its label. */
+export declare const requiredMarkers: readonly ["symbol", "text"];
+export type RequiredMarker = (typeof requiredMarkers)[number];
+export declare const isRequiredMarker: (value: string) => value is "symbol" | "text";
+export declare function warnOnce(message: string): void;
+/**
+ * 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 declare function createFieldId(): string;
+/**
+ * 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 declare function checkedKeys(builder: string, keys: unknown): string[];
+/**
+ * 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 declare function idOrFallback(builder: string, id: string | undefined, option?: string): string;
+//# sourceMappingURL=shared.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/components/css/shared.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAcH,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,CAEvE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAE3E;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1D,MAAM,EAAE,CAAC,EACT,GAAG,KAAK,EAAE,MAAM,EAAE,GACjB,CAAC,CAaH;AAED,0DAA0D;AAC1D,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,EAAE,IACzD,OAAO,MAAM,KAAG,KAAK,IAAI,CAAC,CAEnC;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,4CAA6C,CAAA;AACrE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,CAAA;AACjE,eAAO,MAAM,YAAY,UAbR,MAAM,KAAG,KAAK,qCAaqB,CAAA;AAEpD,mDAAmD;AACnD,eAAO,MAAM,eAAe,6BAA8B,CAAA;AAC1D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,eAAO,MAAM,gBAAgB,UAlBZ,MAAM,KAAG,KAAK,qBAkB6B,CAAA;AAY5D,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAI9C;AAID;;;;;;GAMG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAGtC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,EAAE,CA+BpE;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,MAAM,EACf,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,MAAM,SAAO,GACZ,MAAM,CAWR"}