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

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

@@ -3,6 +3,7 @@ import { define } from "../0-face/define";
 import { translate, currentLanguage, getAvailableLanguagesSync, getLanguageDisplayName, setLanguage, } from "../0-face/i18n";
 import { LANGUAGE_METADATA, isLanguage, normalizeLanguage } from "../0-face/languages";
 import { currentThemeMode, setThemeMode, THEME_MODES } from "../0-face/theme";
+import { getShape, setShape, SHAPES } from "../0-face/shape";
 import { savePreferences } from "../0-face/preferences";
 import "./ds-button";
 import "./ds-icon";
@@ -19,20 +20,6 @@ const applyAccentColor = () => {
     const color = getAccentColor();
     document.documentElement.style.setProperty("--accent-color", `var(${color})`);
 };
-// Notes style medium utilities
-const saveNotesStyleMedium = (style) => {
-    localStorage.setItem("notesStyleMedium", style);
-};
-const getNotesStyleMedium = () => {
-    return localStorage.getItem("notesStyleMedium") || "note"; // Default to note
-};
-// Note behavior utilities
-const savePageStyle = (style) => {
-    localStorage.setItem("pageStyle", style);
-};
-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.
@@ -50,7 +37,7 @@ export function nativeLanguageName(code) {
         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"]);
+const SETTINGS = new Set(["language", "theme", "shape", "accent-color"]);
 // 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
@@ -76,6 +63,11 @@ export class Cycle extends LitElement {
     }
     constructor() {
         super();
+        /** Another control, or another tab, chose a shape. */
+        this.onShapeChanged = () => {
+            if (this.type === "shape")
+                this.setupInitialValue();
+        };
         if (typeof this.attachInternals === "function")
             this.attachInternals();
         this._fieldsetDisabled = false;
@@ -98,7 +90,6 @@ export class Cycle extends LitElement {
             handleLanguageChanged: this.handleLanguageChanged.bind(this),
             handleThemeChanged: this.handleThemeChanged.bind(this),
             handleAccentColorChanged: this.handleAccentColorChanged.bind(this),
-            handleNoteBehaviorChanged: this.handleNoteBehaviorChanged.bind(this),
         };
     }
     formDisabledCallback(disabled) { this._fieldsetDisabled = disabled; }
@@ -109,8 +100,8 @@ export class Cycle extends LitElement {
         window.addEventListener("translations-loaded", this.boundHandlers.translationsLoaded);
         window.addEventListener("language-changed", this.boundHandlers.languageChanged);
         window.addEventListener("theme-changed", this.boundHandlers.handleThemeChanged);
+        window.addEventListener("shape-changed", this.onShapeChanged);
         window.addEventListener("accent-color-changed", this.boundHandlers.handleAccentColorChanged);
-        window.addEventListener("page-style-changed", this.boundHandlers.handleNoteBehaviorChanged);
         // Initialize the component
         this.initializeValues();
     }
@@ -127,6 +118,11 @@ export class Cycle extends LitElement {
             this.values = [...THEME_MODES];
             this.currentValue = currentThemeMode.get();
         }
+        else if (this.type === "shape") {
+            // Square, rounded and circular, the stored choice
+            this.values = [...SHAPES];
+            this.currentValue = getShape();
+        }
         else if (this.type === "accent-color") {
             // Set up accent color cycling
             this.values = [
@@ -145,29 +141,6 @@ export class Cycle extends LitElement {
             // Apply the accent color to ensure it's active
             applyAccentColor();
         }
-        else if (this.type === "notes-style-medium") {
-            // Set up notes style medium cycling
-            this.values = ["default", "big", "gallery"];
-            // Set initial value based on current notes style medium
-            const currentNotesStyle = getNotesStyleMedium();
-            this.currentValue = currentNotesStyle;
-            // Check if this should be disabled based on note behavior
-            const currentPageStyle = getPageStyle();
-            this.disabled = currentPageStyle === "note";
-        }
-        else if (this.type === "page-style") {
-            // Set up page style cycling
-            this.values = ["note", "page"];
-            // Set initial value based on current page style
-            const currentPageStyle = getPageStyle();
-            this.currentValue = currentPageStyle;
-        }
-        else if (this.type === "icon-only") {
-            // Set up icon-only cycling (no label)
-            this.values = ["note", "page"];
-            // Set initial value
-            this.currentValue = this.values[0];
-        }
         // Request update to re-render with new values
         this.requestUpdate();
     }
@@ -188,6 +161,9 @@ export class Cycle extends LitElement {
             // The stored choice, which may be the system's
             this.currentValue = currentThemeMode.get();
         }
+        else if (this.type === "shape") {
+            this.currentValue = getShape();
+        }
         else if (this.type === "accent-color") {
             // Get current accent color
             const currentAccentColor = getAccentColor();
@@ -195,24 +171,6 @@ export class Cycle extends LitElement {
             // Apply the accent color to ensure it's active
             applyAccentColor();
         }
-        else if (this.type === "notes-style-medium") {
-            // Get current notes style medium
-            const currentNotesStyle = getNotesStyleMedium();
-            this.currentValue = currentNotesStyle;
-            // Check if this should be disabled based on note behavior
-            const currentPageStyle = getPageStyle();
-            this.disabled = currentPageStyle === "note";
-        }
-        else if (this.type === "page-style") {
-            // Get current page style
-            const currentPageStyle = getPageStyle();
-            this.currentValue = currentPageStyle;
-        }
-        else if (this.type === "icon-only") {
-            // Get current page style for icon-only
-            const currentPageStyle = getPageStyle();
-            this.currentValue = currentPageStyle;
-        }
         this.requestUpdate();
     }
     handleSettingsChanges() {
@@ -225,8 +183,8 @@ export class Cycle extends LitElement {
         window.removeEventListener("translations-loaded", this.boundHandlers.translationsLoaded);
         window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
         window.removeEventListener("theme-changed", this.boundHandlers.handleThemeChanged);
+        window.removeEventListener("shape-changed", this.onShapeChanged);
         window.removeEventListener("accent-color-changed", this.boundHandlers.handleAccentColorChanged);
-        window.removeEventListener("page-style-changed", this.boundHandlers.handleNoteBehaviorChanged);
     }
     handleButtonClick(e) {
         e.preventDefault();
@@ -267,6 +225,12 @@ export class Cycle extends LitElement {
             savePreferences({ theme: newTheme });
             // Theme helper already emits the change event, so no manual dispatch here
         }
+        else if (this.type === "shape") {
+            const next = this.values[(this.values.indexOf(this.currentValue) + 1) % this.values.length];
+            this.currentValue = next;
+            // The runtime stores it, marks the root and emits shape-changed
+            setShape(next);
+        }
         else if (this.type === "accent-color") {
             // Cycle through accent colors
             const currentIndex = this.values.indexOf(this.currentValue);
@@ -285,54 +249,6 @@ export class Cycle extends LitElement {
                 detail: { color: newColor },
             }));
         }
-        else if (this.type === "notes-style-medium") {
-            // Cycle through notes style medium options
-            const currentIndex = this.values.indexOf(this.currentValue);
-            const nextIndex = (currentIndex + 1) % this.values.length;
-            const newStyle = this.values[nextIndex];
-            // Update current value
-            this.currentValue = newStyle;
-            // Save the new notes style medium
-            saveNotesStyleMedium(newStyle);
-            // Save preferences
-            savePreferences({ notesStyleMedium: newStyle });
-            // Dispatch notes style medium change event
-            window.dispatchEvent(new CustomEvent("notes-style-medium-changed", {
-                detail: { style: newStyle },
-            }));
-        }
-        else if (this.type === "page-style") {
-            // Cycle through note behavior options
-            const currentIndex = this.values.indexOf(this.currentValue);
-            const nextIndex = (currentIndex + 1) % this.values.length;
-            const newBehavior = this.values[nextIndex];
-            // Update current value
-            this.currentValue = newBehavior;
-            // Save the new note behavior
-            savePageStyle(newBehavior);
-            // Save preferences
-            savePreferences({ pageStyle: newBehavior });
-            // Dispatch note behavior change event
-            window.dispatchEvent(new CustomEvent("page-style-changed", {
-                detail: { behavior: newBehavior },
-            }));
-        }
-        else if (this.type === "icon-only") {
-            // Cycle through icon-only options (note/page)
-            const currentIndex = this.values.indexOf(this.currentValue);
-            const nextIndex = (currentIndex + 1) % this.values.length;
-            const newIconOnlyValue = this.values[nextIndex];
-            // Update current value
-            this.currentValue = newIconOnlyValue;
-            // Save the new page style
-            savePageStyle(newIconOnlyValue);
-            // Save preferences
-            savePreferences({ pageStyle: newIconOnlyValue });
-            // Dispatch page style change event
-            window.dispatchEvent(new CustomEvent("page-style-changed", {
-                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;
@@ -345,6 +261,12 @@ export class Cycle extends LitElement {
         if (this.type === "language") {
             return nativeLanguageName(value);
         }
+        else if (this.type === "shape") {
+            // Square, Rounded or Circular, in the shared words
+            const word = value.charAt(0).toUpperCase() + value.slice(1);
+            const translated = this.translationsReady ? translate(word) : "";
+            return translated && translated !== word ? translated : word;
+        }
         else if (this.type === "theme") {
             // Try to get translated theme name
             if (this.translationsReady) {
@@ -360,31 +282,6 @@ export class Cycle extends LitElement {
             // Get color name from CSS variable
             return this.getColorName(value);
         }
-        else if (this.type === "notes-style-medium") {
-            // Return SVG icon for notes style medium
-            return this.getNotesStyleIcon(value);
-        }
-        else if (this.type === "page-style") {
-            // Return translated text for note behavior
-            if (this.translationsReady) {
-                const translatedText = translate(value === "note" ? "Note" : "Page");
-                if (translatedText &&
-                    translatedText !== (value === "note" ? "Note" : "Page")) {
-                    return translatedText;
-                }
-            }
-            return value;
-        }
-        else if (this.type === "icon-only") {
-            // Return SVG icon for icon-only type (note/page icons)
-            if (value === "note") {
-                return html `<ds-icon type="note"></ds-icon>`;
-            }
-            else if (value === "page") {
-                return html `<ds-icon type="page"></ds-icon>`;
-            }
-            return html `<span>${value}</span>`;
-        }
         return value;
     }
     getColorKey(colorVar) {
@@ -423,24 +320,6 @@ export class Cycle extends LitElement {
         // Fallback to simple name conversion
         return colorVar.replace("--", "").replace("-", " ");
     }
-    getNotesStyleIcon(style) {
-        if (style === "page") {
-            return html `<ds-icon type="page"></ds-icon>`;
-        }
-        else if (style === "note") {
-            return html `<ds-icon type="note"></ds-icon>`;
-        }
-        else if (style === "default") {
-            return html `<ds-icon type="default"></ds-icon>`;
-        }
-        else if (style === "big") {
-            return html `<ds-icon type="big"></ds-icon>`;
-        }
-        else if (style === "gallery") {
-            return html `<ds-icon type="gallery"></ds-icon>`;
-        }
-        return html `<span>${style}</span>`;
-    }
     /**
      * A cycle without a stated look takes the one its type has always had: the
      * language and theme cycles are grey chips, every other one, the accent
@@ -476,8 +355,6 @@ export class Cycle extends LitElement {
             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. */
@@ -519,28 +396,19 @@ export class Cycle extends LitElement {
           ?disabled=${this.disabled || this._fieldsetDisabled}
           @click=${this.handleButtonClick}
         >
-          ${this.type === "notes-style-medium" || this.type === "icon-only"
-            ? html `<span
-                style="display: inline-flex; align-items: center; gap: var(--025)"
-                >${this.getValueDisplay(this.currentValue)}</span
-              >`
-            : this.type === "language"
-                ? html `<ds-text
+          ${this.type === "language"
+            ? html `<ds-text
                   literal text=${this.getValueDisplay(this.currentValue)}
                 ></ds-text>`
-                : this.type === "theme"
-                    ? html `<ds-text
+            : this.type === "theme"
+                ? html `<ds-text
                     text=${this.currentValue === "light" ? "Light" : this.currentValue === "dark" ? "Dark" : "System"}
                   ></ds-text>`
-                    : this.type === "accent-color"
-                        ? html `<ds-text
+                : this.type === "accent-color"
+                    ? html `<ds-text
                       text=${this.getColorKey(this.currentValue)}
                     ></ds-text>`
-                        : this.type === "page-style"
-                            ? html `<ds-text
-                        text=${this.currentValue === "note" ? "Note" : "Page"}
-                      ></ds-text>`
-                            : html `<ds-text
+                    : html `<ds-text
                         literal text=${this.getValueDisplay(this.currentValue)}
                       ></ds-text>`}
         </ds-button>
@@ -565,9 +433,6 @@ export class Cycle extends LitElement {
     handleAccentColorChanged() {
         this.setupInitialValue();
     }
-    handleNoteBehaviorChanged() {
-        this.setupInitialValue();
-    }
 }
 Cycle.formAssociated = true;
 Cycle.styles = unsafeCSS(styles);

package/dist/2-core/ds-device-bezel.d.ts

@@ -0,0 +1,2 @@
+export * from '../5-visual-kit/device-bezel';
+//# sourceMappingURL=ds-device-bezel.d.ts.map

package/dist/2-core/ds-device-bezel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-device-bezel.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-device-bezel.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}

package/dist/2-core/ds-device-bezel.js

@@ -0,0 +1 @@
+export * from '../5-visual-kit/device-bezel';

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

@@ -8,8 +8,8 @@ export declare const EMPTY_HEADING = "Nothing here yet";
  *   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 {string} icon - An icon from the library inline before the title.
+ * @prop {boolean} centered - Centre the words in the space the element stands in (the default).
  * @prop {number} level - Make the title a heading of this level (1–6).
  * @prop {string} tone - `done`: empty because everything is finished; the
  *   check (or `icon`) on a mark in the success green, the title in that green.

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;MAQf;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;IAC1B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAQtD,iBAAiB;IAMjB,oBAAoB;IAMpB,OAAO,CAAC,KAAK;IAKb;;;;;OAKG;IACH,OAAO,CAAC,OAAO;IAMf,MAAM;CAsBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}
+{"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;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;MAQf;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;IAC1B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAQtD,iBAAiB;IAMjB,oBAAoB;IAMpB,OAAO,CAAC,KAAK;IAKb;;;;;OAKG;IACH,OAAO,CAAC,OAAO;IAMf,MAAM;CAwBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}

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

@@ -16,8 +16,8 @@ export const EMPTY_HEADING = "Nothing here yet";
  *   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 {string} icon - An icon from the library inline before the title.
+ * @prop {boolean} centered - Centre the words in the space the element stands in (the default).
  * @prop {number} level - Make the title a heading of this level (1–6).
  * @prop {string} tone - `done`: empty because everything is finished; the
  *   check (or `icon`) on a mark in the success green, the title in that green.
@@ -37,7 +37,7 @@ export class Empty extends LitElement {
         super();
         this.relabel = () => this.requestUpdate();
         this.literal = false;
-        this.centered = false;
+        this.centered = true;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -76,13 +76,15 @@ export class Empty extends LitElement {
         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" : ""}${done ? " ds-empty--done" : ""}" part="empty">
+        return html `<div class="ds-empty${this.centered ? " ds-empty--centered" : " ds-empty--start"}${done ? " ds-empty--done" : ""}" part="empty">
+      <div class="ds-empty__heading" part="heading">
       <div class="ds-empty__icon" part="icon" aria-hidden="true" ?hidden=${!hasIcon}>
         <slot name="icon" @slotchange=${changed}>${icon ? html `<ds-icon size=${done ? "small" : "large"} .type=${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>
       <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>`;

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

@@ -98,6 +98,13 @@ export declare class Input extends LitElement {
     formDisabledCallback(disabled: boolean): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string | File | FormData): void;
+    /**
+     * What the browser may fill in. Without `autocomplete` an email, phone,
+     * web address or password field says what it holds (a sign-up's password
+     * sets "new-password"), and any other field is left to the browser, as a
+     * native input is; "off" still turns it off.
+     */
+    protected resolvedAutocomplete(): string | undefined;
     protected accessibleLabel(): string | undefined;
     private togglePassword;
     private handleKeyDown;

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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"}

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

@@ -10,6 +10,13 @@ import unseeIcon from "../x-icon/password-unsee.svg?url";
 import { getText, currentLanguage } from "../0-face/i18n";
 import "./ds-text";
 import styles from "./styles/ds-input.css?inline";
+/** The autofill a field's type implies when it names none of its own. */
+const TYPE_AUTOCOMPLETE = {
+    email: "email",
+    tel: "tel",
+    url: "url",
+    password: "current-password",
+};
 export class Input extends LitElement {
     constructor() {
         super();
@@ -50,7 +57,7 @@ export class Input extends LitElement {
         this.readonly = false;
         this.required = false;
         this.autofocus = false;
-        this.autocomplete = "off";
+        this.autocomplete = "";
         this.pattern = "";
         this.minlength = 0;
         this.maxlength = -1;
@@ -234,6 +241,19 @@ export class Input extends LitElement {
             this.internals?.setFormValue(state);
         }
     }
+    /**
+     * What the browser may fill in. Without `autocomplete` an email, phone,
+     * web address or password field says what it holds (a sign-up's password
+     * sets "new-password"), and any other field is left to the browser, as a
+     * native input is; "off" still turns it off.
+     */
+    resolvedAutocomplete() {
+        if (this.autocomplete)
+            return this.autocomplete;
+        if (this.multiline)
+            return undefined;
+        return TYPE_AUTOCOMPLETE[this.type];
+    }
     accessibleLabel() {
         if (this.ariaLabel)
             return this.ariaLabel;
@@ -415,7 +435,7 @@ export class Input extends LitElement {
       ?readonly=${this.readonly}
       ?required=${this.required}
       ?autofocus=${this.autofocus}
-      autocomplete=${this.autocomplete}
+      autocomplete=${ifDefined(this.resolvedAutocomplete())}
       minlength=${ifDefined(this.minlength || undefined)}
       maxlength=${ifDefined(this.maxlength >= 0 ? this.maxlength : undefined)}
       rows=${rows}
@@ -450,7 +470,7 @@ export class Input extends LitElement {
       ?readonly=${this.readonly}
       ?required=${this.required}
       ?autofocus=${this.autofocus}
-      autocomplete=${this.autocomplete}
+      autocomplete=${ifDefined(this.resolvedAutocomplete())}
       pattern=${ifDefined(this.pattern || undefined)}
       minlength=${ifDefined(this.minlength || undefined)}
       maxlength=${ifDefined(this.maxlength >= 0 ? this.maxlength : undefined)}

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

@@ -1,4 +1,6 @@
+import { type Failure } from "../0-face/failures";
 import { LitElement, nothing, type PropertyValues } from "lit";
+import { CutFades } from "../0-face/cut-fade";
 import "./ds-icon";
 import "./ds-toast";
 import type { ToastPosition } from "../0-face/toast-queue";
@@ -57,6 +59,9 @@ export interface MessageDismissDetail {
  */
 export declare class Message extends LitElement {
     static properties: {
+        failure: {
+            attribute: boolean;
+        };
         expand: {
             type: BooleanConstructor;
         };
@@ -139,6 +144,11 @@ export declare class Message extends LitElement {
         };
     };
     static styles: import("lit").CSSResult[];
+    /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+    protected readonly cuts: CutFades;
+    /** Authored diagnostic for a real failure; never derived from slotted user content. */
+    failure: Failure | undefined;
+    private reportedFailure;
     expand: boolean;
     visibleToasts: number;
     richColors: boolean;
@@ -174,6 +184,7 @@ export declare class Message extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
     private get app();
     /** Decides where the app banner shows, before it draws, so it never pops in after the page. */
     private place;

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

@@ -1 +1 @@
-{"version":3,"file":"ds-message.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-message.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ds-message.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-message.ts"],"names":[],"mappings":"AAOA,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAQ,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhF,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,WAAW,CAAC;AACnB,OAAO,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,YAAY,IAAI,cAAc,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClG,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,KAAK,CAAC;AAK9E,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvE,qEAAqE;AACrE,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAK/D,CAAC;AAEF,kGAAkG;AAClG,MAAM,WAAW,oBAAoB;IAAG,IAAI,EAAE,WAAW,CAAA;CAAE;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyBf;IAEF,MAAM,CAAC,MAAM,4BAAgE;IAC7E,yHAAyH;IACzH,SAAS,CAAC,QAAQ,CAAC,IAAI,WAA2E;IAElG,uFAAuF;IAC/E,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,CAAC,eAAe,CAAM;IAErB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,YAAY,SAAwB;IAEtC,IAAI,EAAE,WAAW,CAAC;IAClB,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,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,OAAO,CAAC,SAAS,CAA8B;IAE/C,8EAA8E;IAC9E,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAqBtD,6DAA6D;IAC7D,IAAI,YAAY,IAAI,WAAW,CAE9B;IAED,iBAAiB;IAOjB,oBAAoB;IAMpB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAOlD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAa/C,OAAO,KAAK,GAAG,GAEd;IAED,+FAA+F;IAC/F,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,KAAK;IAKb;;;;;OAKG;IACH,OAAO,CAAC,OAAO;IAMf,qFAAqF;IACrF,OAAO,IAAI,OAAO;IAWlB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,SAAS;IAiBjB,MAAM;CAyBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAC;KACvB;CACF"}

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

@@ -4,9 +4,11 @@
 // its positioning context instead; with `form="app"`, a row at the top of the
 // page leading to the site's iPhone app (0-face/app-banner.ts decides where).
 // Drawn by 1-root/notice.css, the same classes a page without scripts writes.
+import { reportFailure } from "../0-face/failures";
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { getText } from "../0-face/i18n";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import "./ds-icon";
 import "./ds-toast";
 import { appBannerPlacement, appStoreUrl, closeAppBanner, ensureSmartAppBanner, openApp } from "../0-face/app-banner";
@@ -68,6 +70,9 @@ export const MESSAGE_ICONS = {
 export class Message extends LitElement {
     constructor() {
         super();
+        /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+        this.cuts = new CutFades(this, { selector: ".ds-notice__title, .ds-notice__text" });
+        this.reportedFailure = "";
         this.dismissEvent = "ds-message-dismiss";
         /** (app) Where this device shows it, decided before each render. */
         this.placement = "none";
@@ -114,6 +119,18 @@ export class Message extends LitElement {
         else if (changed.get("form") === "app")
             this.hidden = false;
     }
+    updated(changed) {
+        super.updated(changed);
+        if (!this.failure || this.hidden || this.form === "toast" || this.form === "app") {
+            this.reportedFailure = "";
+            return;
+        }
+        const key = JSON.stringify(this.failure);
+        if (key !== this.reportedFailure) {
+            this.reportedFailure = key;
+            reportFailure(this.failure);
+        }
+    }
     get app() {
         return { appId: this.appId, appUrl: this.appUrl, open: this.open, key: this.remember };
     }
@@ -217,6 +234,7 @@ export class Message extends LitElement {
     }
 }
 Message.properties = {
+    failure: { attribute: false },
     expand: { type: Boolean },
     visibleToasts: { type: Number, attribute: "visible-toasts" },
     richColors: { type: Boolean, attribute: "rich-colors" },