@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.110

package/generated/components/body-view.d.ts

@@ -1,5 +1,13 @@
+/**
+ * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
+ */
 export declare class BodyView extends HTMLElement {
     constructor();
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'body-view': BodyView;
+    }
+}

package/generated/components/body-view.js

@@ -1,11 +1,15 @@
+import { debug } from '../internal/utils';
+/**
+ * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
+ */
 export class BodyView extends HTMLElement {
     constructor() {
         super();
     }
     disconnectedCallback() {
-        console.debug(`${BodyView.name} ⚡️ disconnect`);
+        debug(`${BodyView.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        console.debug(`${BodyView.name} ⚡️ connect`);
+        debug(`${BodyView.name} ⚡️ connect`);
     }
 }

package/generated/components/bordered-button.d.ts

@@ -1,7 +1,17 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @summary A control that starts an action. Styled with a standard border, adapting to the button’s surroundings.
+ *
+ * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a bordered button
+ *
+ * @slot overlay
+ *
+ */
 export declare class BorderedButton extends ButtonBase {
     #private;
+    static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: BorderedButton): void;
     static polyfillConnectedCallback(el: BorderedButton): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

package/generated/components/bordered-button.js

@@ -1,19 +1,52 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @summary A control that starts an action. Styled with a standard border, adapting to the button’s surroundings.
+ *
+ * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a bordered button
+ *
+ * @slot overlay
+ *
+ */
 export class BorderedButton extends ButtonBase {
+    static get observedAttributes() {
+        return [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
+    }
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${BorderedButton.name} ⚡️ disconnect`);
+        debug(`${BorderedButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${BorderedButton.name} ⚡️ connect`);
+        debug(`${BorderedButton.name} ⚡️ connect`);
         el.tabIndex = 0;
         CleanupRegistry.register(el, onoff('click', BorderedButton.#handleClick, el).on());
     }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        debug(`${BorderedButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'title-key':
+            case 'role':
+                Snapshot.waitReady.then(() => {
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'), Snapshot.config);
+                });
+                break;
+        }
+    }
     static #handleClick = async (evt) => {
         //
     };

package/generated/components/bordered-prominent-button.d.ts

@@ -1,7 +1,17 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @summary A control that starts an action. Styled with a prominent border, adapting to the button’s surroundings.
+ *
+ * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent bordered button
+ *
+ * @slot overlay
+ *
+ */
 export declare class BorderedProminentButton extends ButtonBase {
     #private;
+    static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: BorderedProminentButton): void;
     static polyfillConnectedCallback(el: BorderedProminentButton): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

package/generated/components/bordered-prominent-button.js

@@ -1,19 +1,52 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @summary A control that starts an action. Styled with a prominent border, adapting to the button’s surroundings.
+ *
+ * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent bordered button
+ *
+ * @slot overlay
+ *
+ */
 export class BorderedProminentButton extends ButtonBase {
+    static get observedAttributes() {
+        return [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
+    }
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${BorderedProminentButton.name} ⚡️ disconnect`);
+        debug(`${BorderedProminentButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${BorderedProminentButton.name} ⚡️ connect`);
+        debug(`${BorderedProminentButton.name} ⚡️ connect`);
         el.tabIndex = 0;
         CleanupRegistry.register(el, onoff('click', BorderedProminentButton.#handleClick, el).on());
     }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        debug(`${BorderedProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'title-key':
+            case 'role':
+                Snapshot.waitReady.then(() => {
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'), Snapshot.config);
+                });
+                break;
+        }
+    }
     static #handleClick = async (evt) => {
         //
     };

package/generated/components/borderless-button.d.ts

@@ -1,9 +1,17 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @summary A control that starts an action. Styled without any borders.
+ *
+ * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a `borderless-button`
+ *
+ * @slot overlay
+ *
+ */
 export declare class BorderlessButton extends ButtonBase {
     #private;
     static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: BorderlessButton): void;
     static polyfillConnectedCallback(el: BorderlessButton): void;
-    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): Promise<void>;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

package/generated/components/borderless-button.js

@@ -1,31 +1,49 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @summary A control that starts an action. Styled without any borders.
+ *
+ * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a `borderless-button`
+ *
+ * @slot overlay
+ *
+ */
 export class BorderlessButton extends ButtonBase {
     static get observedAttributes() {
-        return ['role'];
+        return [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
     }
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${BorderlessButton.name} ⚡️ disconnect`);
+        debug(`${BorderlessButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${BorderlessButton.name} ⚡️ connect`);
+        debug(`${BorderlessButton.name} ⚡️ connect`);
         el.tabIndex = 0;
         CleanupRegistry.register(el, onoff('click', BorderlessButton.#handleClick, el).on());
     }
-    static async polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        console.debug(`${BorderlessButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        debug(`${BorderlessButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement;
+        if (!node)
+            return;
         switch (attributeName) {
+            case 'title-key':
             case 'role':
-                // let label = this.querySelector(':scope>[slot=label]')
-                // if (newValue) {
-                //   label ??= this.appendChild($(`<label-view slot="label"></label-view>`))
-                //   label.setAttribute('title', newValue)
-                // } else label?.remove()
+                Snapshot.waitReady.then(() => {
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'), Snapshot.config);
+                });
                 break;
         }
     }

package/generated/components/color-scheme.d.ts

@@ -0,0 +1,12 @@
+export declare class ColorScheme extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'color-scheme': ColorScheme;
+    }
+}

package/generated/components/color-scheme.js

@@ -0,0 +1,51 @@
+import { debug } from '../internal/utils';
+export class ColorScheme extends HTMLElement {
+    static get observedAttributes() {
+        return ['dark'];
+    }
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        debug(`${ColorScheme.name} ⚡️ connect`);
+        this.hidden = true;
+        this.inert = true;
+    }
+    disconnectedCallback() {
+        debug(`${ColorScheme.name} ⚡️ disconnect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${ColorScheme.name} ⚡️ attr-change [${name}]`);
+        // self.CSS.registerProperty({ name: '--canvas', syntax: '<color>', inherits: false, initialValue: 'oklch(100% 0 0deg)' })
+        if (newValue)
+            self.CSS.registerProperty({ name: '--canvas', syntax: '<color>', inherits: false, initialValue: 'oklch(0% 0 0deg)' });
+        // @property --canvas {
+        //   syntax: "<color>";
+        //   initial-value: oklch(100% 0 0deg);
+        //   inherits: false;
+        // }
+        // @media (prefers-color-scheme: dark) {
+        //   @property --canvas {
+        //     syntax: "<color>";
+        //     initial-value: oklch(0% 0 0deg);
+        //     inherits: false;
+        //   }
+        // }
+        // @property --canvastext {
+        //   syntax: "<color>";
+        //   initial-value: oklch(0% 0 0deg);
+        //   inherits: false;
+        // }
+        // @media (prefers-color-scheme: dark) {
+        //   @property --canvastext {
+        //     syntax: "<color>";
+        //     initial-value: oklch(100% 0 0deg);
+        //     inherits: false;
+        //   }
+        // }
+        // if (CSS.supports('interpolate-size', 'allow-keywords')) {
+        // self.CSS.registerProperty({ name: '--background', syntax: '<color>', inherits: false, initialValue: 'oklch(100% 0 0deg)' })
+        if (null !== newValue)
+            self.CSS.registerProperty({ name: '--background', syntax: '<color>', inherits: false, initialValue: 'oklch(0% 0 0deg)' });
+    }
+}

package/generated/components/confirmation-dialog.d.ts

@@ -1,9 +1,12 @@
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A dialog that asks the user to confirm an action. Use it from the client module like `await confirmationDialog(trigger, 'Permanently erase the items in the Trash?')`.
+ */
 export declare class ConfirmationDialog extends DialogBase {
     #private;
     static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: ConfirmationDialog): void;
     static polyfillConnectedCallback(el: ConfirmationDialog): void;
-    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): Promise<void>;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

package/generated/components/confirmation-dialog.js

@@ -1,7 +1,10 @@
-import { ConfirmationDialog as EvtBus } from '../confirmation-dialog';
+import { confirmationDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, onoff, touchGlass } from '../internal/utils';
+import { debug, isInside, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A dialog that asks the user to confirm an action. Use it from the client module like `await confirmationDialog(trigger, 'Permanently erase the items in the Trash?')`.
+ */
 export class ConfirmationDialog extends DialogBase {
     static get observedAttributes() {
         return ['anchor'];
@@ -10,38 +13,41 @@ export class ConfirmationDialog extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${ConfirmationDialog.name} ⚡️ disconnect`);
+        debug(`${ConfirmationDialog.name} ⚡️ disconnect`);
         const positionAnchor = el.style.getPropertyValue('position-anchor');
-        $.prop('anchor-name', null, document.querySelector(`[style*="${positionAnchor}"]`));
-        $.prop('position-anchor', null, el);
+        document.querySelector(`[style*="${positionAnchor}"]`)?.style.removeProperty('anchor-name'); //$.prop('anchor-name', null, document.querySelector<HTMLElement>(`[style*="${positionAnchor}"]`))
+        el.style.removeProperty('position-anchor'); //$.prop('position-anchor', null, el)
         CleanupRegistry.unregister(el);
-        EvtBus.dispatchEvent(new CustomEvent('return', {
+        confirmationDialog.dispatchEvent(new CustomEvent('confirmation:return', {
             detail: { returnValue: el.returnValue, positionAnchor },
             bubbles: true,
             composed: true,
         }));
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${ConfirmationDialog.name} ⚡️ connect`);
+        debug(`${ConfirmationDialog.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff([
             { types: 'click', listener: this.#handleDialogClick },
             { types: 'close', listener: this.#handleDialogClose },
             { types: 'cancel', listener: this.#handleDialogCancel },
         ], el).on());
-        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, (evt) => {
-            if (evt.target.matches('[is=confirmation-dialog]'))
+        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, ({ target }) => {
+            if (!(target instanceof HTMLElement))
+                return true;
+            if (target.matches('[is=confirmation-dialog]'))
                 return false;
             // if (!(event.target as HTMLElement).closest('menu-view[open]')) return false
             return true;
         }), el).on());
-        console.debug(`${ConfirmationDialog.name} ⚡️ will-open`);
+        debug(`${ConfirmationDialog.name} ⚡️ will-open`);
         el.removeAttribute('closing');
         el.scrollTop = 0;
         el.returnValue = '';
+        el.autofocus = true;
         el.showModal();
     }
-    static async polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        console.debug(`${ConfirmationDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        debug(`${ConfirmationDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         // const newValue = (target as HTMLElement).getAttribute(attributeName ?? '')
         switch (attributeName) {
             case 'label':
@@ -54,16 +60,15 @@ export class ConfirmationDialog extends DialogBase {
         }
     }
     static #handleDialogClick = (evt) => {
-        console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
-        const dialog = evt.currentTarget;
-        if (!dialog)
+        debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        const { target, currentTarget: dialog } = evt;
+        if (!(dialog instanceof HTMLDialogElement))
             return;
-        const target = evt.target;
-        const rect = dialog.getBoundingClientRect();
-        const isInside = evt.clientX >= rect.left && evt.clientX <= rect.right && evt.clientY >= rect.top && evt.clientY <= rect.bottom;
-        if (target?.matches('dialog') && !isInside)
-            return dialog?.requestClose(); // click outside
-        const button = target?.closest('button');
+        if (!(target instanceof HTMLElement))
+            return;
+        if (target.matches('dialog') && !isInside(evt.clientX, evt.clientY, dialog.getBoundingClientRect()))
+            return dialog.requestClose(); // click outside
+        const button = target.closest('button');
         if (!button)
             return;
         button.scrollIntoView({
@@ -72,20 +77,20 @@ export class ConfirmationDialog extends DialogBase {
             inline: 'nearest',
         });
         dialog.returnValue = button.value;
-        dialog?.requestClose(button.value);
-        evt?.stopPropagation();
-        evt?.stopImmediatePropagation();
+        dialog.requestClose(button.value);
+        evt.stopPropagation();
+        evt.stopImmediatePropagation();
     };
     static #handleDialogCancel = (evt) => {
-        console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
-        const target = evt.target;
-        if (!target)
+        const { target } = evt;
+        if (!(target instanceof HTMLDialogElement))
             return;
         evt.preventDefault();
         target.inert = true;
-        console.debug(`${ConfirmationDialog.name} ⚡️ will-close`);
+        debug(`${ConfirmationDialog.name} ⚡️ will-close`);
         target.setAttribute('closing', '');
         Promise.allSettled(target.getAnimations().map(({ finished }) => finished)).then(() => {
             if (!target.hasAttribute('closing'))
@@ -94,9 +99,10 @@ export class ConfirmationDialog extends DialogBase {
             target.removeAttribute('closing');
         });
     };
-    static #handleDialogClose = (evt) => {
-        console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
-        const target = evt.target;
-        target?.remove();
+    static #handleDialogClose = ({ type, target }) => {
+        debug(`${ConfirmationDialog.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLDialogElement))
+            return;
+        target.remove();
     };
 }

package/generated/components/content-unavailable.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @summary A message with a title and extra information that you show when part of your app can’t be used.
+ *
+ * @example <content-unavailable search></content-unavailable>
+ *
+ * @example <content-unavailable search="foo"></content-unavailable>
+ *
+ * @example <content-unavailable padding><label-view title="No Mail"><i class="ph ph-tray" slot="icon" foreground="secondary"></i></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable>
+ *
+ * @example <content-unavailable padding><label-view title="No Mail"><svg slot="icon" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable>
+ *
+ * @slot — The default slot.
+ * @slot description
+ * @slot actions
+ *
+ */
+export declare class ContentUnavailable extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'content-unavailable': ContentUnavailable;
+    }
+}

package/generated/components/content-unavailable.js

@@ -0,0 +1,79 @@
+import { I18n } from '../i18n';
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { $, debug, onoff } from '../internal/utils';
+import { html } from '../tpl';
+/**
+ * @summary A message with a title and extra information that you show when part of your app can’t be used.
+ *
+ * @example <content-unavailable search></content-unavailable>
+ *
+ * @example <content-unavailable search="foo"></content-unavailable>
+ *
+ * @example <content-unavailable padding><label-view title="No Mail"><i class="ph ph-tray" slot="icon" foreground="secondary"></i></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable>
+ *
+ * @example <content-unavailable padding><label-view title="No Mail"><svg slot="icon" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable>
+ *
+ * @slot — The default slot.
+ * @slot description
+ * @slot actions
+ *
+ */
+export class ContentUnavailable extends HTMLElement {
+    static get observedAttributes() {
+        return ['search'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(html `<div part="root content-unavailable-title-stack">
+          <slot></slot>
+        </div>
+        <div part="root content-unavailable-description-stack">
+          <slot name="description"></slot>
+        </div>
+        <div part="root content-unavailable-actions-stack">
+          <slot name="actions"></slot>
+        </div>`));
+    }
+    #shadowRoot;
+    #slots;
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+        this.#slots = {
+            '': this.#shadowRoot.querySelector('slot:not([name])') ?? undefined,
+            description: this.#shadowRoot.querySelector('slot[name="description"]') ?? undefined,
+            actions: this.#shadowRoot.querySelector('slot[name="actions"]') ?? undefined,
+        };
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${ContentUnavailable.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'search':
+                if (oldValue === newValue)
+                    break;
+                this.#renderSearch(newValue);
+                CleanupRegistry.unregister(this, 'i18n');
+                CleanupRegistry.register(this, onoff('localechange', () => {
+                    this.#renderSearch(this.getAttribute('search'));
+                }, I18n.on).on(), 'i18n');
+                break;
+        }
+    }
+    disconnectedCallback() {
+        debug(`${ContentUnavailable.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        debug(`${ContentUnavailable.name} ⚡️ connect`);
+    }
+    #renderSearch = (search) => {
+        const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(html `<label-view><i class="ph ph-magnifying-glass" slot="icon" foreground="secondary"></i></label-view>`, '>1')), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(html `<label-view foreground="secondary" slot="description"></label-view>`, '>1'));
+        if (search) {
+            const interpolate = (text, vars) => text.replaceAll(/\{(\w+)\}/g, (_, key) => vars[key] ?? '');
+            titleLabel.setAttribute('title', interpolate(I18n.t('SearchUnavailableContent').Label, { search }));
+        }
+        else
+            titleLabel?.setAttribute('title', I18n.t('SearchUnavailableContent').NoLabel);
+        descText.setAttribute('title', I18n.t('SearchUnavailableContent').Description);
+    };
+}

package/generated/components/date-picker.d.ts

@@ -1,31 +1,31 @@
 import { FormAssociatedBase } from '../internal/class/form-associated-base';
 declare const datePickerStyles: readonly ["graphical", "field", "automatic"];
 export type DatePickerStyle = (typeof datePickerStyles)[number];
+/**
+ * @summary A control that selects an absolute date.
+ */
 export declare class DatePicker extends FormAssociatedBase {
     #private;
     static get observedAttributes(): string[];
     get template(): DocumentFragment;
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
     get datePickerStyle(): DatePickerStyle;
-    get selection(): {
-        year: string;
-        month: string;
-        day: string;
-    };
-    set selection(v: {
-        year: string;
-        month: string;
-        day: string;
-    });
+    /**
+     * Form participation property
+     */
     get name(): string;
     get value(): {
         year: string;
         month: string;
         day: string;
     };
+    /**
+     * Returns the value as a Date object.
+     * @type {Date|null}
+     */
     get valueAsDate(): Date | null;
     get minimum(): {
         year: string;
@@ -39,8 +39,14 @@ export declare class DatePicker extends FormAssociatedBase {
     } | null;
     setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
     setCustomValidity: (message: string) => void;
-    formAssociatedCallback: (form: HTMLFormElement) => void;
-    formDisabledCallback: (disabled: boolean) => void;
-    formResetCallback: () => void;
+    formStateRestoreCallback(state: string, reason: string): void;
+    formAssociatedCallback(form: HTMLFormElement): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'date-picker': DatePicker;
+    }
 }
 export {};