@lo-tek/interfaces 0.0.0 → 0.37.0

package/dist/components/frame/session-timeout/session-timeout.d.ts

@@ -0,0 +1,113 @@
+export declare const SESSION_TIMEOUT_CLASS: "lt-session-timeout";
+export declare const SESSION_TIMEOUT_DIALOG_CLASS: "lt-session-timeout__dialog";
+export declare const SESSION_TIMEOUT_TITLE_CLASS: "lt-session-timeout__title";
+export declare const SESSION_TIMEOUT_TEXT_CLASS: "lt-session-timeout__text";
+export declare const SESSION_TIMEOUT_COUNT_CLASS: "lt-session-timeout__count";
+export declare const SESSION_TIMEOUT_ACTIONS_CLASS: "lt-session-timeout__actions";
+/** `value` on the button that extends the session. */
+export declare const SESSION_EXTEND: "extend";
+/** `value` on the button that logs out. */
+export declare const SESSION_LOGOUT: "logout";
+export type SessionTimeoutOptions = {
+    /** Id of the heading. The dialog takes its name from it with `aria-labelledby`. */
+    titleId: string;
+    /** Seconds without activity before the warning appears. Default: 25 minutes. */
+    warnAt?: number;
+    /** Seconds without activity before the session expires. Default: 30 minutes. */
+    expiresAt?: number;
+    /** Seconds between each `session-activity` while the user is active. Default: 60. */
+    activityInterval?: number;
+};
+export type SessionTimeoutAttributes = {
+    host: {
+        class: typeof SESSION_TIMEOUT_CLASS;
+        "warn-at"?: string;
+        "expires-at"?: string;
+        "activity-interval"?: string;
+        "data-ignore-morph": "";
+    };
+    dialog: {
+        class: typeof SESSION_TIMEOUT_DIALOG_CLASS;
+        role: "alertdialog";
+        "aria-labelledby": string;
+    };
+    title: {
+        class: typeof SESSION_TIMEOUT_TITLE_CLASS;
+        id: string;
+    };
+    /** The paragraph holding the number. The announcement is this paragraph, with the number spoken. */
+    text: {
+        class: typeof SESSION_TIMEOUT_TEXT_CLASS;
+    };
+    /** The number. Empty in the markup, and the component fills it in. */
+    count: {
+        class: typeof SESSION_TIMEOUT_COUNT_CLASS;
+        "aria-hidden": "true";
+    };
+    /** The screen reader announcement. Empty in the markup. */
+    live: {
+        class: "lt-sr-only";
+        role: "status";
+    };
+    /** The form around the buttons. `method="dialog"` closes the dialog without a script. */
+    actions: {
+        class: typeof SESSION_TIMEOUT_ACTIONS_CLASS;
+        method: "dialog";
+    };
+    extend: {
+        class: "lt-button";
+        value: typeof SESSION_EXTEND;
+    };
+    logout: {
+        class: "lt-button";
+        "data-variant": "secondary";
+        value: typeof SESSION_LOGOUT;
+    };
+};
+/**
+ * The attributes for the warning that a signed-in session is about to expire.
+ *
+ * The renderer writes the dialog and all of the text, in its own language and
+ * with its own translation tool. The component only keeps time: it opens and
+ * closes the dialog, fills in the number and announces the countdown.
+ *
+ * The buttons are plain buttons in a `<form method="dialog">`. The browser
+ * closes the dialog and sets `returnValue` to the button's `value`, and the
+ * component reads it. `data-ignore-morph` asks Datastar's morph to leave the
+ * warning alone. Without it the morph takes `open` and the number while the
+ * dialog is in the top layer. The component puts `open` back, and the number
+ * comes back on the next tick. With the attribute the number stays the whole
+ * time.
+ *
+ * ```ts
+ * const session = lt.sessionTimeout({ titleId: "session-title" })
+ * ```
+ * ```html
+ * <lt-session-timeout {...session.host}>
+ *   <dialog {...session.dialog}>
+ *     <h2 {...session.title}>You will soon be signed out</h2>
+ *     <p {...session.text}>
+ *       We will sign you out in <span {...session.count}></span>.
+ *     </p>
+ *     <span {...session.live}></span>
+ *     <form {...session.actions}>
+ *       <button {...session.extend}>Stay signed in</button>
+ *       <button {...session.logout}>Sign out now</button>
+ *     </form>
+ *   </dialog>
+ * </lt-session-timeout>
+ * ```
+ */
+export declare const sessionTimeout: (({ titleId: givenId, warnAt, expiresAt, activityInterval, }: SessionTimeoutOptions) => SessionTimeoutAttributes) & {
+    /** The class on the `<dialog>` itself. */
+    dialog: "lt-session-timeout__dialog";
+    /** The class on the heading. */
+    title: "lt-session-timeout__title";
+    /** The class on the paragraph holding the number. */
+    text: "lt-session-timeout__text";
+    /** The class on the number the component fills in. */
+    count: "lt-session-timeout__count";
+    /** The class on the form with the buttons. */
+    actions: "lt-session-timeout__actions";
+};
+//# sourceMappingURL=session-timeout.d.ts.map

package/dist/components/frame/session-timeout/session-timeout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-timeout.d.ts","sourceRoot":"","sources":["../../../../src/components/frame/session-timeout/session-timeout.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,EAAG,oBAA6B,CAAA;AAClE,eAAO,MAAM,4BAA4B,EACvC,4BAAqC,CAAA;AACvC,eAAO,MAAM,2BAA2B,EAAG,2BAAoC,CAAA;AAC/E,eAAO,MAAM,0BAA0B,EAAG,0BAAmC,CAAA;AAC7E,eAAO,MAAM,2BAA2B,EAAG,2BAAoC,CAAA;AAC/E,eAAO,MAAM,6BAA6B,EACxC,6BAAsC,CAAA;AAExC,sDAAsD;AACtD,eAAO,MAAM,cAAc,EAAG,QAAiB,CAAA;AAC/C,2CAA2C;AAC3C,eAAO,MAAM,cAAc,EAAG,QAAiB,CAAA;AAE/C,MAAM,MAAM,qBAAqB,GAAG;IAClC,mFAAmF;IACnF,OAAO,EAAE,MAAM,CAAA;IACf,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO,qBAAqB,CAAA;QACnC,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,mBAAmB,CAAC,EAAE,MAAM,CAAA;QAC5B,mBAAmB,EAAE,EAAE,CAAA;KACxB,CAAA;IACD,MAAM,EAAE;QACN,KAAK,EAAE,OAAO,4BAA4B,CAAA;QAC1C,IAAI,EAAE,aAAa,CAAA;QACnB,iBAAiB,EAAE,MAAM,CAAA;KAC1B,CAAA;IACD,KAAK,EAAE;QAAE,KAAK,EAAE,OAAO,2BAA2B,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IAChE,oGAAoG;IACpG,IAAI,EAAE;QAAE,KAAK,EAAE,OAAO,0BAA0B,CAAA;KAAE,CAAA;IAClD,sEAAsE;IACtE,KAAK,EAAE;QAAE,KAAK,EAAE,OAAO,2BAA2B,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3E,2DAA2D;IAC3D,IAAI,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAA;IAC7C,yFAAyF;IACzF,OAAO,EAAE;QAAE,KAAK,EAAE,OAAO,6BAA6B,CAAC;QAAC,MAAM,EAAE,QAAQ,CAAA;KAAE,CAAA;IAC1E,MAAM,EAAE;QAAE,KAAK,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,OAAO,cAAc,CAAA;KAAE,CAAA;IAC5D,MAAM,EAAE;QACN,KAAK,EAAE,WAAW,CAAA;QAClB,cAAc,EAAE,WAAW,CAAA;QAC3B,KAAK,EAAE,OAAO,cAAc,CAAA;KAC7B,CAAA;CACF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,cAAc,gEAMtB,qBAAqB,KAAG,wBAAwB;IA+CjD,0CAA0C;;IAE1C,gCAAgC;;IAEhC,qDAAqD;;IAErD,sDAAsD;;IAEtD,8CAA8C;;CAGjD,CAAA"}

package/dist/components/frame/session-timeout/session-timeout.js

@@ -0,0 +1,101 @@
+import { attributes, idOrFallback } from "../../css/shared.js";
+export const SESSION_TIMEOUT_CLASS = "lt-session-timeout";
+export const SESSION_TIMEOUT_DIALOG_CLASS = "lt-session-timeout__dialog";
+export const SESSION_TIMEOUT_TITLE_CLASS = "lt-session-timeout__title";
+export const SESSION_TIMEOUT_TEXT_CLASS = "lt-session-timeout__text";
+export const SESSION_TIMEOUT_COUNT_CLASS = "lt-session-timeout__count";
+export const SESSION_TIMEOUT_ACTIONS_CLASS = "lt-session-timeout__actions";
+/** `value` on the button that extends the session. */
+export const SESSION_EXTEND = "extend";
+/** `value` on the button that logs out. */
+export const SESSION_LOGOUT = "logout";
+/**
+ * The attributes for the warning that a signed-in session is about to expire.
+ *
+ * The renderer writes the dialog and all of the text, in its own language and
+ * with its own translation tool. The component only keeps time: it opens and
+ * closes the dialog, fills in the number and announces the countdown.
+ *
+ * The buttons are plain buttons in a `<form method="dialog">`. The browser
+ * closes the dialog and sets `returnValue` to the button's `value`, and the
+ * component reads it. `data-ignore-morph` asks Datastar's morph to leave the
+ * warning alone. Without it the morph takes `open` and the number while the
+ * dialog is in the top layer. The component puts `open` back, and the number
+ * comes back on the next tick. With the attribute the number stays the whole
+ * time.
+ *
+ * ```ts
+ * const session = lt.sessionTimeout({ titleId: "session-title" })
+ * ```
+ * ```html
+ * <lt-session-timeout {...session.host}>
+ *   <dialog {...session.dialog}>
+ *     <h2 {...session.title}>You will soon be signed out</h2>
+ *     <p {...session.text}>
+ *       We will sign you out in <span {...session.count}></span>.
+ *     </p>
+ *     <span {...session.live}></span>
+ *     <form {...session.actions}>
+ *       <button {...session.extend}>Stay signed in</button>
+ *       <button {...session.logout}>Sign out now</button>
+ *     </form>
+ *   </dialog>
+ * </lt-session-timeout>
+ * ```
+ */
+export const sessionTimeout = Object.assign(({ titleId: givenId, warnAt = 25 * 60, expiresAt = 30 * 60, activityInterval = 60, }) => {
+    // The fallback only matters to someone without a type check.
+    const titleId = idOrFallback("lt.sessionTimeout()", givenId, "titleId");
+    return {
+        host: attributes({
+            class: SESSION_TIMEOUT_CLASS,
+            "warn-at": warnAt === 25 * 60 ? undefined : String(warnAt),
+            "expires-at": expiresAt === 30 * 60 ? undefined : String(expiresAt),
+            "activity-interval": activityInterval === 60 ? undefined : String(activityInterval),
+            "data-ignore-morph": "",
+        }),
+        dialog: attributes({
+            class: SESSION_TIMEOUT_DIALOG_CLASS,
+            // alertdialog and not dialog: the warning is an interruption the user did
+            // not ask for, and then the screen reader should read all of the content
+            // when it opens.
+            role: "alertdialog",
+            "aria-labelledby": titleId,
+        }),
+        title: attributes({ class: SESSION_TIMEOUT_TITLE_CLASS, id: titleId }),
+        text: attributes({ class: SESSION_TIMEOUT_TEXT_CLASS }),
+        count: attributes({
+            class: SESSION_TIMEOUT_COUNT_CLASS,
+            "aria-hidden": "true",
+        }),
+        live: attributes({
+            class: "lt-sr-only",
+            role: "status",
+        }),
+        actions: attributes({
+            class: SESSION_TIMEOUT_ACTIONS_CLASS,
+            method: "dialog",
+        }),
+        extend: attributes({
+            class: "lt-button",
+            value: SESSION_EXTEND,
+        }),
+        logout: attributes({
+            class: "lt-button",
+            "data-variant": "secondary",
+            value: SESSION_LOGOUT,
+        }),
+    };
+}, {
+    /** The class on the `<dialog>` itself. */
+    dialog: SESSION_TIMEOUT_DIALOG_CLASS,
+    /** The class on the heading. */
+    title: SESSION_TIMEOUT_TITLE_CLASS,
+    /** The class on the paragraph holding the number. */
+    text: SESSION_TIMEOUT_TEXT_CLASS,
+    /** The class on the number the component fills in. */
+    count: SESSION_TIMEOUT_COUNT_CLASS,
+    /** The class on the form with the buttons. */
+    actions: SESSION_TIMEOUT_ACTIONS_CLASS,
+});
+//# sourceMappingURL=session-timeout.js.map

package/dist/components/frame/session-timeout/session-timeout.js.map

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

package/dist/components/frame/suggestion/lt-suggestion.d.ts

@@ -0,0 +1,361 @@
+import { HostElement } from "../../host-element.js";
+export declare const LT_SUGGESTION_TAG: "lt-suggestion";
+/**
+ * The parts the suggestion field finds, as selectors relative to the element.
+ * The web component finds its parts with these, and the manifest describes
+ * them for whoever writes the markup by hand, so the two cannot disagree.
+ */
+export declare const LT_SUGGESTION_PARTS: {
+    /** The field: the role when present, otherwise the first input. */
+    readonly control: "[role='combobox'], input:not([type='hidden'])";
+    /** The list: the role when present, otherwise the class. */
+    readonly list: "[role='listbox'], .lt-suggestion__list";
+    /** An option: the role when present, otherwise an `<li>` without a role in the list. */
+    readonly option: "[role='option'], .lt-suggestion__list > li:not([role])";
+    readonly empty: ".lt-suggestion__empty";
+    readonly status: "[role='status']";
+    /** The hidden field that receives the code of the option the user chose. */
+    readonly value: "input.lt-suggestion__value";
+};
+/**
+ * The keyboard and the filtering in a field with a suggestion list.
+ *
+ * The server writes the field and the list. When the markup is made with
+ * JavaScript, `lt.suggestion()` writes the roles, the ids and the wiring.
+ * When it comes from a template without JavaScript, the template writes
+ * `for` on the label and `id` on the field, or wraps the field in the label,
+ * which HTML requires for the field to have a name without JavaScript. The
+ * rest is enough: a `.lt-suggestion__list` with `<li>` and a
+ * `[role="status"]`. The web component sets the roles, gives the list and the
+ * options ids, connects the list to the field, and closes the list until the
+ * user touches the field. Only what is missing, so what the server wrote
+ * stays.
+ *
+ * The web component never writes an id on the field. Datastar and idiomorph
+ * recognise a node by its id, and a field with an id the server did not send
+ * is replaced on the next update, along with focus and what the user has
+ * typed.
+ *
+ * The field always shows the option's text. If the server has written a
+ * hidden `.lt-suggestion__value`, it receives the code from `data-value`, or
+ * the text when the option has none. Without JavaScript the text is
+ * submitted, and the server looks it up. The web component renders nothing.
+ * It used to create the whole field itself, and then there was neither a
+ * label nor an input before the script had run, and nothing was included in
+ * the submission.
+ *
+ * What the web component does is what the browser does not: it filters the
+ * options while the user types, moves the highlight with the arrow keys, and
+ * keeps `aria-activedescendant` in sync so the screen reader announces the
+ * option without focus leaving the field.
+ *
+ * If something else has already filtered, a server or a React component that
+ * renders only the matches, `prefiltered` says so, and the web component
+ * leaves the options alone.
+ *
+ * ```html
+ * <lt-suggestion>
+ *   <label class="lt-label" for="city">City</label>
+ *   <input class="lt-input" id="city" role="combobox" aria-controls="city-list"
+ *          aria-expanded="false" aria-autocomplete="list" autocomplete="off"
+ *          aria-describedby="city-status">
+ *   <ul class="lt-suggestion__list" id="city-list" role="listbox" hidden>
+ *     <li class="lt-suggestion__option" id="city-option-0" role="option">Bergen</li>
+ *   </ul>
+ *   <p class="lt-suggestion__empty">No matches</p>
+ *   <span class="lt-sr-only" id="city-status" role="status"></span>
+ * </lt-suggestion>
+ * ```
+ */
+export declare class LtSuggestion extends HostElement {
+    static observedAttributes: readonly ["prefiltered", "server-controlled", "count-none", "count-zero", "count-one", "count-two", "count-few", "count-many", "count-other"];
+    private observer?;
+    private control?;
+    private list?;
+    private empty?;
+    /** The options that already have their listener. */
+    private readonly bound;
+    /** The ids the web component created, per node, so a patch gets the same ones back. */
+    private readonly ids;
+    /** The roles the web component set. See `derivedParts`. */
+    private readonly roledByMe;
+    /** True while the web component dispatches events, so it does not answer itself. */
+    private choosing;
+    /**
+     * The text and code of the choice in the field, when the value field is in
+     * use.
+     *
+     * The pair is what the code in the value field applies to. If the user
+     * changes the text, the code no longer applies, and the value field is
+     * emptied; otherwise the form would submit the code for Bergen with the
+     * text "Bodø" in the field. If the text is still there after an update, the
+     * code is set back: the value field's `value` is an attribute, and a morph
+     * writes the server's over what the web component set.
+     */
+    private chosen?;
+    /**
+     * What the server sent as text and code, the last time something other
+     * than the web component wrote the code. When the form is reset, the text
+     * goes back to the server's, and the code must follow: a hidden field has
+     * no default value of its own to go back to, since the web component
+     * writes the code as an attribute.
+     */
+    private serverChoice?;
+    /** The code the web component wrote last. If something else is there, the server wrote it. */
+    private writtenCode?;
+    /** The form listened to for `reset`. Follows the field, which a patch can move. */
+    private boundForm?;
+    /** The `for` the web component wrote on the label. */
+    private readonly forByMe;
+    /**
+     * The name the web component gave the list, per list: `aria-labelledby`
+     * pointing to the label, or `aria-label` with its text. If something else
+     * is there, the server wrote it, and it stays.
+     */
+    private readonly listNameByMe;
+    /**
+     * Labels where the server wrote a `for` pointing to another id. Reported
+     * once; the memory is not reset, since the rewritten `for` cannot be told
+     * apart from a server that corrected itself.
+     */
+    private readonly wrongFor;
+    /**
+     * Whether the list is open, and which option is highlighted.
+     *
+     * Both come from the user: she typed something, and she moves with the
+     * arrow keys. None of it is in the HTML the server sent, so a morph strips
+     * it. The template used to list `aria-expanded`, `aria-activedescendant`
+     * and `hidden` in `data-preserve-attr`. Now the web component sets it back,
+     * as long as the morph keeps the field. It only does so when the id
+     * matches, see `warnAboutReplacedControl`.
+     */
+    private wantOpen?;
+    /**
+     * The highlighted option, remembered by both id and text.
+     *
+     * The ids from `lt.suggestion()` are positional, so a new list from the
+     * server reuses them. With the id alone the web component put the
+     * highlight back on option number two in an entirely different list, and
+     * the screen reader announced a place the user never navigated to. The
+     * text is the identity; the id is only where `aria-activedescendant`
+     * points.
+     */
+    private active?;
+    /**
+     * The count last announced, when something else filters.
+     *
+     * Only changes are announced, and the first count is the starting point,
+     * not news. See `announceFiltered`.
+     */
+    private announcedCount?;
+    /**
+     * The text last written in the status element.
+     *
+     * The text is not in the server's version, so an update that sends the
+     * region again empties the element. `repair()` writes it back.
+     */
+    private announcedText?;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private sync;
+    /**
+     * Opens and closes the popover the list sits in, following `hidden`.
+     *
+     * `hidden` still says whether the list is open, from the server as from
+     * the web component, and the popover follows. The list sits in the top
+     * layer, so a parent with `overflow`, such as the body of a dialog, does
+     * not clip it.
+     */
+    private mirrorPopover;
+    /**
+     * Places the list right below the field, as wide as it. If there is no
+     * room below, it goes above, and it is squeezed into the viewport either
+     * way, like the panel in `<lt-popover>`. The position is physical,
+     * computed from the field's box.
+     */
+    private reposition;
+    /**
+     * Names the list from the label, when the markup arrived without a name.
+     *
+     * With `aria-labelledby` when the label is next to the field; the web
+     * component gives it an id when it has none, since it holds nothing the
+     * user can lose. If the label wraps the field, it gets no id: a morph would
+     * then replace the label, and the field with it. In that case the list
+     * gets the label's text as `aria-label`, without the field's value.
+     */
+    private nameList;
+    /** The id an element should have: the one it has, otherwise the one the web component created last. */
+    private rememberedId;
+    /**
+     * Fills in the wiring where the markup arrived without it. Only what is
+     * missing.
+     *
+     * The list is closed when the markup says nothing about it, that is when
+     * neither `aria-expanded` on the field nor `hidden` on the list is there.
+     * If the markup states one of them, that is the server's word on both, as
+     * with `lt.suggestion({ open: true })`.
+     */
+    private wire;
+    /**
+     * Sets the user's state back after a patch.
+     *
+     * The filtering is recomputed from what is in the field, so it needs no
+     * memory. What the list shows and what is highlighted do.
+     */
+    private repair;
+    disconnectedCallback(): void;
+    /**
+     * Something else has already filtered, so the web component leaves the
+     * options alone.
+     *
+     * The name used to be `server-filtered`, and that was misleading: it is not
+     * about servers. A React app that renders only the matches has filtered all
+     * the same, without any server involved.
+     *
+     * The web component hides an option when its text does not contain what is
+     * in the field. If you filter on something else, without diacritics, on a
+     * code that is not shown, or fuzzily, the two disagree, and then your filter
+     * should win. The attribute turns off both the hiding and the empty
+     * message, that is everything about what the list shows. The announcement
+     * of the number of matches remains, since it is not markup.
+     */
+    get prefiltered(): boolean;
+    set prefiltered(on: boolean);
+    private get listElement();
+    private get emptyElement();
+    private get valueField();
+    /** The field accepts no input: `readonly` or `disabled`. */
+    private get locked();
+    /**
+     * The options, recognised by the role and not by the class.
+     *
+     * The role must be there anyway, for the screen reader. A template that
+     * wrote `<li role="option">` with its own styling got neither filtering nor
+     * arrow keys when the web component looked for the class, and nothing said
+     * so.
+     */
+    private get options();
+    /**
+     * Which visible option is highlighted now.
+     *
+     * It is read from `aria-selected` in the markup, not from a counter inside
+     * the web component. The server can set the highlight itself with
+     * `lt.suggestion({ activeIndex })`, and a parallel counter would have jumped
+     * to the top of the list on the first arrow key instead of to the next
+     * option. The filtering also moves the options around, and then the lookup
+     * gives the right answer by itself.
+     */
+    private get activeIndex();
+    /** The options that are visible now. */
+    private get visible();
+    /**
+     * The visible options that can be chosen. An option with
+     * `aria-disabled="true"` is shown, but the arrow keys skip it and it cannot
+     * be chosen, with neither keyboard nor mouse.
+     */
+    private get selectable();
+    private unbind;
+    /**
+     * Reports when an update replaced the field because the id from the server
+     * changed.
+     *
+     * The message comes only when the user had something to lose: the old field
+     * is out of the tree, both had an id from the server, the ids differ, `name`
+     * is the same, and the old field held something other than the new one. A
+     * server that sends the text back has not lost it.
+     */
+    private warnAboutReplacedControl;
+    private bind;
+    private setOpen;
+    private hasSomethingToShow;
+    /** Writes the state into the markup, without changing what the user wanted. */
+    private applyOpen;
+    /**
+     * The empty message follows the list: visible only when the list is open and
+     * empty.
+     *
+     * It is a sibling of the list and not a child, so `hidden` on the list did
+     * not hide it, and "No matches" stayed below a closed field after Escape.
+     * If something else has filtered, it also controls the empty message.
+     */
+    private syncEmpty;
+    /**
+     * Hides what does not match, and announces how many are left.
+     *
+     * Runs when the user types or focuses the field, and again after a patch
+     * while the list is open, since the patch may have replaced the options.
+     */
+    private filter;
+    /**
+     * Removes the highlight from an option the filtering just hid.
+     *
+     * The cleanup belongs here, where the hiding happens, and not only in
+     * `repair()`: that returns at once under `server-controlled`, and then
+     * `aria-activedescendant` pointed to a hidden option, which the screen
+     * reader announced anyway.
+     */
+    private dropHiddenMark;
+    /**
+     * Announces the count when something else has filtered.
+     *
+     * The list then changes not from a keystroke but from the app rendering
+     * again, and that is exactly the change the observer sees. The message
+     * belongs here and not in `filter()`, because half a second over the
+     * network can pass between the keystroke and the new answer.
+     *
+     * Only changes are announced. The first count is the starting point and not
+     * news, and it is often 0 because the app has not rendered the list yet.
+     */
+    private announceFiltered;
+    /**
+     * Announces the number of matches.
+     *
+     * Without this, people who cannot see the screen get no word that the list
+     * narrowed while they typed. The text is generated on the client, and
+     * `repair()` writes it back when an update empties the element. If the
+     * element is missing, `bind()` has already reported it.
+     */
+    private announce;
+    /**
+     * The text for a count, in the page's language.
+     *
+     * `count-none` applies to zero matches, since "No matches" is a sentence of
+     * its own and not an inflection. Otherwise `Intl.PluralRules` picks the form
+     * the language requires, and `count-<form>` gives the text, with `{n}` for
+     * the number. If the form is missing, `count-other` applies. If that is
+     * missing too, the default text from `DEFAULT_TEXTS` applies.
+     */
+    private countText;
+    private markActive;
+    /** Highlights one option, and remembers which. */
+    private markOption;
+    private choose;
+    /**
+     * Writes the code in the value field and dispatches `input` and `change` on
+     * it, so `data-bind` in Datastar sees the code. The events do not bubble: a
+     * `data-on:input` on the host, which the recipe uses to fetch suggestions,
+     * must not trigger a search for the code every time the user chooses.
+     */
+    private writeCode;
+    /**
+     * The form is reset. The browser sets the text back to the server's after
+     * the event has been dispatched, so the code is set in the next turn, after
+     * the reset is done. The text there then decides: if it is the server's,
+     * the server's code applies; if it is the chosen one, the code stays;
+     * otherwise the code of the option with that text, otherwise none. The
+     * server's comes first because two options can have the same name: if the
+     * user chose the second Våler, the reset goes back to the server's. The
+     * server may also have sent the chosen one back, and then it is as much the
+     * server's word as the user's.
+     */
+    private handleReset;
+    private handleInput;
+    private handleFocus;
+    private handleFocusOut;
+    private handleKeydown;
+    private handleListMouseDown;
+    private handleOptionMouseDown;
+    private handleOptionClick;
+}
+export declare function defineLtSuggestion(tagName?: string): void;
+//# sourceMappingURL=lt-suggestion.d.ts.map

package/dist/components/frame/suggestion/lt-suggestion.d.ts.map

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