@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.14

package/dist/2-core/ds-cycle.js

@@ -1,7 +1,8 @@
 import { LitElement, html, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
 import { translate, currentLanguage, getAvailableLanguagesSync, getLanguageDisplayName, setLanguage, } from "../0-face/i18n";
-import { currentTheme, setTheme } from "../0-face/theme";
+import { LANGUAGE_METADATA, isLanguage, normalizeLanguage } from "../0-face/languages";
+import { currentThemeMode, setThemeMode, THEME_MODES } from "../0-face/theme";
 import { savePreferences } from "../0-face/preferences";
 import "./ds-button";
 import "./ds-icon";
@@ -33,13 +34,34 @@ const getPageStyle = () => {
     return localStorage.getItem("pageStyle") || "note"; // Default to note
 };
 // App width utilities removed
+// The settings a cycle knows by name. Any other cycle steps through its own
+// `values` and reports each step as a `change` event.
+/**
+ * A language's name in the language itself (`Dansk`, `日本語`): from the
+ * language list, else from the browser, else the code.
+ */
+export function nativeLanguageName(code) {
+    if (!code)
+        return "";
+    if (isLanguage(code))
+        return LANGUAGE_METADATA[code].nativeLabel;
+    const member = normalizeLanguage(code, null);
+    if (member)
+        return LANGUAGE_METADATA[member].nativeLabel;
+    return getLanguageDisplayName(code, { locale: code });
+}
+const SETTINGS = new Set(["language", "theme", "accent-color", "notes-style-medium", "page-style", "icon-only"]);
 // Use a regular class with proper TypeScript type declarations and JSDoc comments
 export class Cycle extends LitElement {
     // Define reactive properties using Lit's property system
     static get properties() {
         return {
-            type: { type: String },
+            type: { type: String, reflect: true },
+            // The language picker as a chip, the cycle's button, instead of an item.
+            chip: { type: Boolean, reflect: true },
             values: { type: Array },
+            value: { type: String },
+            label: { type: String, reflect: true },
             currentValue: { type: String, state: true }, // Make this a private state property
             translationsReady: { type: Boolean, state: true }, // Track if translations are loaded
             disabled: { type: Boolean, reflect: true },
@@ -60,7 +82,10 @@ export class Cycle extends LitElement {
         this.variant = "";
         // Initialize properties with default values
         this.type = "";
+        this.chip = false;
         this.values = [];
+        this.value = "";
+        this.label = "";
         this.currentValue = "";
         this.translationsReady = false;
         this.disabled = false;
@@ -89,7 +114,8 @@ export class Cycle extends LitElement {
         // Initialize the component
         this.initializeValues();
     }
-    async initializeValues() {
+    // Synchronous: nothing here waits, and a thrown error should surface where it happens.
+    initializeValues() {
         if (this.type === "language") {
             // Dynamically get available languages from translation data
             const availableLanguages = getAvailableLanguagesSync();
@@ -97,11 +123,9 @@ export class Cycle extends LitElement {
             this.currentValue = currentLanguage.value;
         }
         else if (this.type === "theme") {
-            // Set up theme cycling
-            this.values = ["light", "dark"];
-            // Set initial value based on current theme
-            const currentThemeValue = currentTheme.get();
-            this.currentValue = currentThemeValue;
+            // Light, dark and the system's, the stored choice
+            this.values = [...THEME_MODES];
+            this.currentValue = currentThemeMode.get();
         }
         else if (this.type === "accent-color") {
             // Set up accent color cycling
@@ -154,16 +178,15 @@ export class Cycle extends LitElement {
             this.initializeValues();
         }
     }
-    async setupInitialValue() {
+    setupInitialValue() {
         if (this.type === "language") {
             // Get current language
             const currentLang = currentLanguage.value;
             this.currentValue = currentLang;
         }
         else if (this.type === "theme") {
-            // Get current theme
-            const currentThemeValue = currentTheme.get();
-            this.currentValue = currentThemeValue;
+            // The stored choice, which may be the system's
+            this.currentValue = currentThemeMode.get();
         }
         else if (this.type === "accent-color") {
             // Get current accent color
@@ -238,8 +261,8 @@ export class Cycle extends LitElement {
             const newTheme = this.values[nextIndex];
             // Update current value
             this.currentValue = newTheme;
-            // Set the new theme using the shared helper
-            setTheme(newTheme);
+            // Set the new choice using the shared helper
+            setThemeMode(newTheme);
             // Save preferences
             savePreferences({ theme: newTheme });
             // Theme helper already emits the change event, so no manual dispatch here
@@ -310,14 +333,17 @@ export class Cycle extends LitElement {
                 detail: { behavior: newIconOnlyValue },
             }));
         }
+        else if (!SETTINGS.has(this.type)) {
+            const next = this.values[(this.values.indexOf(this.currentValue) + 1) % this.values.length];
+            this.currentValue = this.value = next;
+            this.dispatchEvent(new CustomEvent("change", { detail: { value: next }, bubbles: true, composed: true }));
+        }
         // Request update to re-render
         this.requestUpdate();
     }
     getValueDisplay(value) {
         if (this.type === "language") {
-            return getLanguageDisplayName(value, {
-                locale: currentLanguage.value,
-            });
+            return nativeLanguageName(value);
         }
         else if (this.type === "theme") {
             // Try to get translated theme name
@@ -422,6 +448,14 @@ export class Cycle extends LitElement {
      * first paint, so the inner button and any page sheet see the same word.
      */
     willUpdate(changed) {
+        // A cycle through its own values shows `value` when it is one of them,
+        // and otherwise the first.
+        if (!SETTINGS.has(this.type) && this.values.length) {
+            if (changed.has("value") && this.values.includes(this.value))
+                this.currentValue = this.value;
+            else if (!this.values.includes(this.currentValue))
+                this.currentValue = this.values.includes(this.value) ? this.value : this.values[0];
+        }
         if (changed.has("variant") && this.variant) {
             this.primary = this.variant === "primary";
             this.secondary = this.variant === "secondary";
@@ -433,10 +467,53 @@ export class Cycle extends LitElement {
                 this.primary = true;
         }
     }
+    /** The words the face shows for the current value, for the accessible name. */
+    valueText() {
+        const value = this.currentValue;
+        if (this.type === "language")
+            return nativeLanguageName(value);
+        if (this.type === "theme")
+            return translate(value === "light" ? "Light" : value === "dark" ? "Dark" : "System");
+        if (this.type === "accent-color")
+            return translate(this.getColorKey(value));
+        if (this.type === "page-style" || this.type === "icon-only")
+            return translate(value === "note" ? "Note" : "Page");
+        return value;
+    }
+    /** "Size: 40" when the cycle has a label, so the control is named while its face shows the value alone. */
+    accessibleLabel() {
+        if (this.label)
+            return `${translate(this.label)}: ${this.valueText()}`;
+        // The language picker is always named: "Language: Dansk".
+        return this.type === "language" ? `${translate("Language")}: ${this.valueText()}` : "";
+    }
+    /**
+     * The language picker: a native button carrying the language's code as
+     * `lang`, so each name is set in its own typeface. An item on its own, eight
+     * squares wide (four with `compact`); with `chip`, the cycle's button around it.
+     */
+    renderLanguagePicker() {
+        const code = this.currentValue || currentLanguage.value;
+        const button = html `<button
+      type="button"
+      lang=${code}
+      aria-label=${this.accessibleLabel()}
+      ?disabled=${this.disabled || this._fieldsetDisabled}
+      @click=${this.handleButtonClick}
+    >
+      ${nativeLanguageName(code)}
+    </button>`;
+        return this.chip ? html `<ds-button fit control="slotted"
+      ?primary=${this.primary && !this.secondary} ?secondary=${this.secondary}
+      ?disabled=${this.disabled || this._fieldsetDisabled}>${button}</ds-button>` : button;
+    }
     render() {
+        if (this.type === "language")
+            return this.renderLanguagePicker();
         return html `
       <div class="cycle">
         <ds-button fit
+          .label=${this.accessibleLabel()}
           ?primary=${this.primary && !this.secondary}
           ?secondary=${this.secondary}
           ?disabled=${this.disabled || this._fieldsetDisabled}
@@ -453,7 +530,7 @@ export class Cycle extends LitElement {
                 ></ds-text>`
                 : this.type === "theme"
                     ? html `<ds-text
-                    text=${this.currentValue === "light" ? "Light" : "Dark"}
+                    text=${this.currentValue === "light" ? "Light" : this.currentValue === "dark" ? "Dark" : "System"}
                   ></ds-text>`
                     : this.type === "accent-color"
                         ? html `<ds-text

package/dist/2-core/ds-empty.d.ts

@@ -0,0 +1,74 @@
+import { LitElement } from "lit";
+import "./ds-icon";
+/** The shared words' title for an empty place, in the current language. */
+export declare const EMPTY_HEADING = "Nothing here yet";
+/**
+ * @element ds-empty
+ * @prop {string} heading - The title: a translation key, or the words as they
+ *   stand with `literal`. Unset, the shared words' "Nothing here yet".
+ * @prop {string} text - The line under it: a translation key, or literal words.
+ * @prop {boolean} literal - Show `heading` and `text` as written, never looked up.
+ * @prop {string} icon - An icon from the library on the square above the title.
+ * @prop {boolean} centered - Centre the words in the space the element stands in.
+ * @prop {number} level - Make the title a heading of this level (1–6).
+ *
+ * @slot - The text, when it needs more than words: a link, a strong word.
+ * @slot heading - The title, as inline content.
+ * @slot icon - An icon of the page's own, in place of `icon`.
+ * @slot actions - The buttons or links that fill the place, on one row.
+ *
+ * @example
+ * <ds-empty icon="search" heading="No results" text="Try another word.">
+ *   <ds-button slot="actions" secondary>Clear the search</ds-button>
+ * </ds-empty>
+ */
+export declare class Empty extends LitElement {
+    static properties: {
+        heading: {
+            type: StringConstructor;
+        };
+        text: {
+            type: StringConstructor;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        centered: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        level: {
+            type: NumberConstructor;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    heading: string | undefined;
+    text: string | undefined;
+    literal: boolean;
+    icon: string | undefined;
+    centered: boolean;
+    level: number | undefined;
+    private readonly relabel;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private words;
+    /**
+     * Whether light-DOM content fills a slot: elements, or text that is not
+     * blank. The blank text between slotted children still counts as assigned
+     * to the default slot and hides its fallback, so `text` is drawn beside the
+     * slot rather than inside it.
+     */
+    private slotted;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-empty": Empty;
+    }
+}
+//# sourceMappingURL=ds-empty.d.ts.map

package/dist/2-core/ds-empty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-empty.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-empty.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAG3D,OAAO,WAAW,CAAC;AAKnB,2EAA2E;AAC3E,eAAO,MAAM,aAAa,qBAAqB,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;MAOf;IAEF,MAAM,CAAC,MAAM,4BAA6D;IAElE,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAElC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAQtD,iBAAiB;IAMjB,oBAAoB;IAMpB,OAAO,CAAC,KAAK;IAKb;;;;;OAKG;IACH,OAAO,CAAC,OAAO;IAMf,MAAM;CAoBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}

package/dist/2-core/ds-empty.js

@@ -0,0 +1,96 @@
+// ds-empty.ts
+// An empty state: a place with nothing in it yet, and what to do about it.
+// Drawn by 1-root/empty.css, the same classes a page without scripts writes.
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import "./ds-icon";
+import metrics from "../1-root/component-metrics.css?inline";
+import empty from "../1-root/empty.css?inline";
+import styles from "./styles/ds-empty.css?inline";
+/** The shared words' title for an empty place, in the current language. */
+export const EMPTY_HEADING = "Nothing here yet";
+/**
+ * @element ds-empty
+ * @prop {string} heading - The title: a translation key, or the words as they
+ *   stand with `literal`. Unset, the shared words' "Nothing here yet".
+ * @prop {string} text - The line under it: a translation key, or literal words.
+ * @prop {boolean} literal - Show `heading` and `text` as written, never looked up.
+ * @prop {string} icon - An icon from the library on the square above the title.
+ * @prop {boolean} centered - Centre the words in the space the element stands in.
+ * @prop {number} level - Make the title a heading of this level (1–6).
+ *
+ * @slot - The text, when it needs more than words: a link, a strong word.
+ * @slot heading - The title, as inline content.
+ * @slot icon - An icon of the page's own, in place of `icon`.
+ * @slot actions - The buttons or links that fill the place, on one row.
+ *
+ * @example
+ * <ds-empty icon="search" heading="No results" text="Try another word.">
+ *   <ds-button slot="actions" secondary>Clear the search</ds-button>
+ * </ds-empty>
+ */
+export class Empty extends LitElement {
+    constructor() {
+        super();
+        this.relabel = () => this.requestUpdate();
+        this.literal = false;
+        this.centered = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("language-changed", this.relabel);
+        window.addEventListener("translations-loaded", this.relabel);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("language-changed", this.relabel);
+        window.removeEventListener("translations-loaded", this.relabel);
+        super.disconnectedCallback();
+    }
+    words(value) {
+        if (!value)
+            return "";
+        return this.literal ? value : getText(value) || value;
+    }
+    /**
+     * Whether light-DOM content fills a slot: elements, or text that is not
+     * blank. The blank text between slotted children still counts as assigned
+     * to the default slot and hides its fallback, so `text` is drawn beside the
+     * slot rather than inside it.
+     */
+    slotted(name) {
+        return [...this.childNodes].some(node => name
+            ? node instanceof Element && node.getAttribute("slot") === name
+            : node instanceof Element ? !node.hasAttribute("slot") : node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim()));
+    }
+    render() {
+        const heading = this.heading ? this.words(this.heading) : getText(EMPTY_HEADING) || EMPTY_HEADING;
+        const text = this.words(this.text);
+        const hasIcon = Boolean(this.icon) || this.slotted("icon");
+        const slottedText = this.slotted("");
+        const hasText = Boolean(text) || slottedText;
+        const hasActions = this.slotted("actions");
+        const level = this.level && this.level >= 1 && this.level <= 6 ? Math.round(this.level) : undefined;
+        const changed = () => this.requestUpdate();
+        return html `<div class="ds-empty${this.centered ? " ds-empty--centered" : ""}" part="empty">
+      <div class="ds-empty__icon" part="icon" aria-hidden="true" ?hidden=${!hasIcon}>
+        <slot name="icon" @slotchange=${changed}>${this.icon ? html `<ds-icon size="large" .type=${this.icon}></ds-icon>` : nothing}</slot>
+      </div>
+      <div class="ds-empty__title" part="title" role=${level ? "heading" : nothing} aria-level=${level ?? nothing}>
+        <slot name="heading" @slotchange=${changed}>${heading}</slot>
+      </div>
+      <div class="ds-empty__text" part="text" ?hidden=${!hasText}><slot @slotchange=${changed}></slot>${slottedText ? nothing : text}</div>
+      <div class="ds-empty__actions" part="actions" ?hidden=${!hasActions}><slot name="actions" @slotchange=${changed}></slot></div>
+    </div>`;
+    }
+}
+Empty.properties = {
+    heading: { type: String },
+    text: { type: String },
+    literal: { type: Boolean, reflect: true },
+    icon: { type: String },
+    centered: { type: Boolean, reflect: true },
+    level: { type: Number },
+};
+Empty.styles = [unsafeCSS(metrics), unsafeCSS(empty), unsafeCSS(styles)];
+define("ds-empty", Empty);

package/dist/2-core/ds-icon.d.ts

@@ -1,5 +1,11 @@
 import { LitElement } from "lit";
 import type { IconName } from "./generated/ds-icon-map";
+/**
+ * Make library drawings available at once, outside the immediate set: a
+ * component that always draws one icon (ds-avatar's person) ships that
+ * drawing with itself, so it never waits for the deferred chunk.
+ */
+export declare function provideIcons(icons: Readonly<Record<string, string>>): void;
 export declare function themeIconSvg(svg: string): string;
 export type IconVariant = "glyph" | "primary" | "secondary";
 /**

package/dist/2-core/ds-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-icon.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAgDxD,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAMhD;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AAE5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;MAIf;IAEF,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,WAAW,CAAqB;IAChC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;;IAO5C,IAAI,IAAI,IAAI,QAAQ,GAAG,EAAE,CAExB;IAED,IAAI,IAAI,CAAC,GAAG,EAAE,QAAQ,GAAG,EAAE,EAI1B;IAED,8EAA8E;cAC9D,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC;IAMrD,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAiCP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF;AAED,YAAY,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"ds-icon.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAOxD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,CAE1E;AA2CD,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAMhD;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AAE5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;MAIf;IAEF,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,WAAW,CAAqB;IAChC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;;IAO5C,IAAI,IAAI,IAAI,QAAQ,GAAG,EAAE,CAExB;IAED,IAAI,IAAI,CAAC,GAAG,EAAE,QAAQ,GAAG,EAAE,EAI1B;IAED,8EAA8E;cAC9D,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC;IAMrD,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAiCP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF;AAED,YAAY,EAAE,QAAQ,EAAE,CAAC"}

package/dist/2-core/ds-icon.js

@@ -5,6 +5,16 @@ import { icons as immediateIcons, deferredIconNames } from "./generated/icons-im
 import { define } from "../0-face/define";
 const iconNameToSvgMap = { ...immediateIcons };
 const deferred = new Set(deferredIconNames);
+/**
+ * Make library drawings available at once, outside the immediate set: a
+ * component that always draws one icon (ds-avatar's person) ships that
+ * drawing with itself, so it never waits for the deferred chunk.
+ */
+export function provideIcons(icons) {
+    var _a;
+    for (const [name, svg] of Object.entries(icons))
+        iconNameToSvgMap[_a = name.toLowerCase()] ?? (iconNameToSvgMap[_a] = svg);
+}
 let extraReady = false;
 let extraLoading;
 function loadExtraIcons() {
@@ -26,8 +36,8 @@ function loadExtraIcons() {
  * one-colour icon is turned over to `currentColor` here, where the component
  * puts it on the page, so it takes the colour of the text around it.
  *
- * An icon with colours of its own is left exactly as drawn. Consistency's block
- * and pattern tiles set dark ink on a coloured ground, and a brand mark keeps
+ * An icon with colours of its own is left exactly as drawn. The block and
+ * pattern tiles set dark ink on a coloured ground, and a brand mark keeps
  * the colours that make it that brand. `white` never counts as a colour: in
  * this set it is the rectangle inside a `<clipPath>`.
  */

package/dist/2-core/ds-input.d.ts

@@ -6,8 +6,30 @@ export declare class Input extends LitElement {
     private internals;
     private initialValue;
     static properties: PropertyDeclarations;
-    type: "text" | "password" | "email" | "number" | "tel" | "url" | "search" | "date" | "time" | "datetime-local";
+    type: "text" | "password" | "email" | "number" | "tel" | "url" | "search" | "date" | "month" | "week" | "time" | "datetime-local";
+    multiline: boolean;
+    rows: number;
+    maxRows: number;
+    autoGrow: boolean;
+    wrap: "soft" | "hard" | "off";
+    private resizeFrame;
+    private measuredWidth;
+    private resizeObserver?;
+    private readonly fontsChanged;
     inputMode: string;
+    /** The return key's label on a touch keyboard: enter, done, go, next, previous, search or send. */
+    enterKeyHint: string;
+    /**
+     * The id of a `<datalist>` beside the field. A shadow root keeps the inner
+     * input from reaching it, so its options are mirrored inside, and kept in step.
+     */
+    list: string;
+    /** Suggestions offered while typing, as a datalist would. Wins over `list`. */
+    suggestions: readonly (string | {
+        value: string;
+        label?: string;
+    })[];
+    private listObserver?;
     ariaLabel: string;
     ariaLabelledBy: string;
     ariaDescribedBy: string;
@@ -46,7 +68,19 @@ export declare class Input extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
+    willUpdate(changed: Map<string, unknown>): void;
     updated(changedProperties: Map<string, unknown>): void;
+    private listSource;
+    private observeList;
+    /** The options the field offers, from `suggestions` or the named datalist. */
+    protected suggestionOptions(): {
+        value: string;
+        label?: string;
+    }[];
+    protected renderSuggestions(options: {
+        value: string;
+        label?: string;
+    }[]): import("lit").TemplateResult<1> | null;
     protected get input(): HTMLInputElement | HTMLTextAreaElement | null;
     protected get isMultiline(): boolean;
     get selectionStart(): number | null;
@@ -86,6 +120,10 @@ export declare class Input extends LitElement {
      * Select all text in the input
      */
     select(): void;
+    /** Grow on the row grid, bounded by maxRows; the remainder scrolls. */
+    private resizeToContent;
+    /** The multiline field: a native textarea across whole rows. */
+    protected renderMultiline(hasError: boolean, description: string): import("lit").TemplateResult<1>;
     protected renderControl(hasError: boolean, description: string): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/2-core/ds-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-input.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-input.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ds-input.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-input.ts"],"names":[],"mappings":"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"}