@swiftwc/ui 0.0.0-dev.18 → 0.0.0-dev.19

package/generated/client/index.js

@@ -167,9 +167,7 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         // prepare new
         const toolbarExclusion = 0 < modalViews.length
             ? (value, index, array) => value.parentElement?.matches('tool-bar:not(dialog tool-bar,body-view ~ tool-bar)')
-            : (value, index, array) => value.parentElement?.matches('tool-bar:not(body-view ~ tool-bar)'), bodyExclusion = 0 < modalViews.length
-            ? (item) => item.body?.matches('scroll-view:not(dialog scroll-view)')
-            : (value, index, array) => value;
+            : (value, index, array) => value.parentElement?.matches('tool-bar:not(body-view ~ tool-bar)'), bodyExclusion = 0 < modalViews.length ? (item) => item.body?.matches('scroll-view:not(dialog scroll-view)') : (value, index, array) => value;
         for (const bti of newToolbars?.filter?.(toolbarExclusion) ?? [])
             bti.classList.add('fwnn'); // for (const ti of newToolbars ?? []) ti.classList.add('fwnn') //
         for (const bt of tos?.filter?.(bodyExclusion) ?? []) {
@@ -185,10 +183,7 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         }
         else {
             console.debug(`⚡️ view-transition-start (${type})`);
-            await Promise.allSettled([
-                ...(from.body?.getAnimations().map(({ finished }) => finished) ?? []),
-                ...(to?.body?.getAnimations().map(({ finished }) => finished) ?? []),
-            ]);
+            await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to?.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
             console.debug(`⚡️ view-transition-end (${type})`);
         }
         if (0 < (to?.component?.querySelectorAll(`.${Snapshot.config?.['vt-fwd-class-name']},.bwd`) ?? []).length)
@@ -249,10 +244,7 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
             el.close(); // close old inbetween modals
         // capture trans
         console.debug(`⚡️ view-transition-start (${type})`);
-        await Promise.allSettled([
-            ...(from.body?.getAnimations().map(({ finished }) => finished) ?? []),
-            ...(to.body?.getAnimations().map(({ finished }) => finished) ?? []),
-        ]);
+        await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
         console.debug(`⚡️ view-transition-end (${type})`);
         if (to.body?.closest(`.bwd,.${Snapshot.config?.['vt-fwd-class-name']}`))
             return;

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

@@ -0,0 +1,24 @@
+/**
+ * @summary A message with a title and extra information that you show when part of your app can’t be used.
+ *
+ * @example <content-unavailable-view search></content-unavailable-view>
+ *
+ * @example <content-unavailable-view search="foo"></content-unavailable-view>
+ *
+ * @example <content-unavailable-view padding><label-view title="No Mail"><i class="ph ph-tray" slot="image" 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-view>
+ *
+ * @example <content-unavailable-view padding><label-view title="No Mail"><svg slot="image" 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-view>
+ *
+ * @slot description
+ * @slot actions
+ *
+ */
+export declare class ContentUnavailableView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/generated/components/content-unavailable-view.js

@@ -0,0 +1,78 @@
+import { CleanupRegistry } from '#internal/class/cleanup-registry.js';
+import { $, onoff } from '#internal/utils/index.js';
+import { I18n } from '../i18n';
+/**
+ * @summary A message with a title and extra information that you show when part of your app can’t be used.
+ *
+ * @example <content-unavailable-view search></content-unavailable-view>
+ *
+ * @example <content-unavailable-view search="foo"></content-unavailable-view>
+ *
+ * @example <content-unavailable-view padding><label-view title="No Mail"><i class="ph ph-tray" slot="image" 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-view>
+ *
+ * @example <content-unavailable-view padding><label-view title="No Mail"><svg slot="image" 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-view>
+ *
+ * @slot description
+ * @slot actions
+ *
+ */
+export class ContentUnavailableView extends HTMLElement {
+    static get observedAttributes() {
+        return ['search'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+      <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,
+        };
+    }
+    disconnectedCallback() {
+        console.debug(`${ContentUnavailableView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        console.debug(`${ContentUnavailableView.name} ⚡️ connect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        console.debug(`${ContentUnavailableView.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;
+        }
+    }
+    #renderSearch = (search) => {
+        const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<label-view><i class="ph ph-magnifying-glass" slot="image" foreground="secondary"></i></label-view>`)), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(`<label-view foreground="secondary" slot="description"></label-view>`));
+        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.js

@@ -61,7 +61,7 @@ export class DatePicker extends FormAssociatedBase {
         super.connectedCallback();
         CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
         this.#render();
-        CleanupRegistry.register(this, onoff('change', () => {
+        CleanupRegistry.register(this, onoff('localechange', () => {
             this.#render();
         }, I18n.on).on());
         // finally
@@ -113,9 +113,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     get datePickerStyle() {
-        return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '')
-            ? this.getAttribute('date-picker-style')
-            : 'automatic';
+        return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '') ? this.getAttribute('date-picker-style') : 'automatic';
     }
     #render() {
         console.debug(`${_a.name} ⚡️ render (${this.datePickerStyle})`);

package/generated/components/index.d.ts

@@ -1,11 +1,9 @@
-/**
- * @file Automatically generated by barrelsby.
- */
 export * from './body-view';
 export * from './bordered-button';
 export * from './bordered-prominent-button';
 export * from './borderless-button';
 export * from './confirmation-dialog';
+export * from './content-unavailable-view';
 export * from './date-picker';
 export * from './disclosure-group';
 export * from './form-view';

package/generated/components/index.js

@@ -1,11 +1,9 @@
-/**
- * @file Automatically generated by barrelsby.
- */
 export * from './body-view';
 export * from './bordered-button';
 export * from './bordered-prominent-button';
 export * from './borderless-button';
 export * from './confirmation-dialog';
+export * from './content-unavailable-view';
 export * from './date-picker';
 export * from './disclosure-group';
 export * from './form-view';

package/generated/components/navigation-split-view.d.ts

@@ -1,4 +1,7 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section.
+ */
 export declare class NavigationSplitView extends NavigationView {
     constructor();
     disconnectedCallback(): void;

package/generated/components/navigation-split-view.js

@@ -1,4 +1,7 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section.
+ */
 export class NavigationSplitView extends NavigationView {
     constructor() {
         super();

package/generated/components/navigation-stack.d.ts

@@ -1,4 +1,7 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A view that shows a main screen and lets you open other screens on top of it.
+ */
 export declare class NavigationStack extends NavigationView {
     constructor();
     disconnectedCallback(): void;

package/generated/components/navigation-stack.js

@@ -1,4 +1,7 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A view that shows a main screen and lets you open other screens on top of it.
+ */
 export class NavigationStack extends NavigationView {
     constructor() {
         super();

package/generated/components/tab-bar.d.ts

@@ -1,4 +1,7 @@
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A screen that lets users switch between different views using buttons, tabs, or other controls.
+ */
 export declare class TabBar extends DialogBase {
     #private;
     constructor();

package/generated/components/tab-bar.js

@@ -1,6 +1,9 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A screen that lets users switch between different views using buttons, tabs, or other controls.
+ */
 export class TabBar extends DialogBase {
     constructor() {
         super();

package/generated/components/text-field.js

@@ -62,7 +62,7 @@ export class TextField extends FormAssociatedBase {
             { types: 'beforeinput', listener: this.#handleInputBeforeinput },
             { types: 'paste', listener: this.#handleInputPaste },
         ], this.#input).on());
-        CleanupRegistry.register(this, onoff('change', () => {
+        CleanupRegistry.register(this, onoff('localechange', () => {
             this.text = this.text;
         }, I18n.on).on());
     }

package/generated/css/index.css

@@ -499,10 +499,7 @@
   }
   :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not(summary), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not(summary), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not(summary)) {
     --itemface: var(--list--details-background-color, var(--list--item-background-color,));
-    --itemhighlightface: var(
-      --list--selecteddetails-background-color,
-      var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-    );
+    --itemhighlightface: var(--list--selecteddetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
     --itemactiveface: var(--list--selecteddetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
     --itemtext: var(--list--details-color, var(--list--item-color,));
     --itemhighlighttext: var(--list--selecteddetails-color, var(--list--highlighteditem-color, var(--list--item-color,)));
@@ -510,14 +507,8 @@
   }
   :where([is=disclosure-group][open] table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > summary, [is=disclosure-group][open] [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > summary, [is=disclosure-group][open] list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > summary) {
     --itemface: var(--list--opendetails-background-color, var(--list--item-background-color,));
-    --itemhighlightface: var(
-      --list--selectedopendetails-background-color,
-      var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-    );
-    --itemactiveface: var(
-      --list--selectedopendetails-background-color,
-      var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-    );
+    --itemhighlightface: var(--list--selectedopendetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
+    --itemactiveface: var(--list--selectedopendetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
     --itemtext: var(--list--opendetails-color, var(--list--item-color,));
     --itemhighlighttext: var(--list--selectedopendetails-color, var(--list--highlighteditem-color, var(--list--item-color,)));
     --itemactivetext: var(--list--selectedopendetails-color, var(--list--highlighteditem-color, var(--list--item-color,)));
@@ -533,14 +524,8 @@
       var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
     );
     --itemtext: var(--list--opensummary-color, var(--list--item-color,));
-    --itemhighlighttext: var(
-      --list--selectedopensummary-color,
-      var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-    );
-    --itemactivetext: var(
-      --list--selectedopensummary-color,
-      var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-    );
+    --itemhighlighttext: var(--list--selectedopensummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
+    --itemactivetext: var(--list--selectedopensummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
   }
   table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > [is=disclosure-group], [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > [is=disclosure-group], list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > [is=disclosure-group],
   table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > section-view > [is=disclosure-group],
@@ -562,14 +547,8 @@
       var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
     );
     --itemtext: var(--list--rootsummary-color, var(--list--item-color,));
-    --itemhighlighttext: var(
-      --list--selectedrootsummary-color,
-      var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-    );
-    --itemactivetext: var(
-      --list--selectedrootsummary-color,
-      var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-    );
+    --itemhighlighttext: var(--list--selectedrootsummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
+    --itemactivetext: var(--list--selectedrootsummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
     --itempadistart: var(--list--rootsummary-padding-inline-start, var(--list--item-padding-inline-start,));
     --itempadiend: var(--list--rootsummary-padding-inline-end, var(--list--item-padding-inline-end,));
     --itempadbstart: var(--list--rootsummary-padding-block-start, var(--list--item-padding-block-start,));
@@ -582,17 +561,11 @@
     --itemface: var(--list--rootsummary-background-color, var(--list--opensummary-background-color, var(--list--item-background-color,)));
     --itemhighlightface: var(
       --list--selectedrootsummary-background-color,
-      var(
-        --list--selectedopensummary-background-color,
-        var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
-      )
+      var(--list--selectedopensummary-background-color, var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,))))
     );
     --itemactiveface: var(
       --list--selectedrootsummary-background-color,
-      var(
-        --list--selectedopensummary-background-color,
-        var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
-      )
+      var(--list--selectedopensummary-background-color, var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,))))
     );
     --itemtext: var(--list--rootsummary-color, var(--list--opensummary-color, var(--list--item-color,)));
     --itemhighlighttext: var(
@@ -1057,6 +1030,7 @@
   [is=glass-prominent-button]:not([hidden]),
   list-view:not([hidden]),
   table-view:not([hidden]),
+  content-unavailable-view:not([hidden]),
   tool-bar-item:not([hidden]),
   tool-bar-item-group:not([hidden]),
   sidebar-toggle:not([hidden]),
@@ -1072,6 +1046,9 @@
   picker-view:not([hidden])) {
     display: grid;
   }
+  :where(content-unavailable-view)::part(content-unavailable-title-stack),
+  :where(content-unavailable-view)::part(content-unavailable-description-stack),
+  :where(content-unavailable-view)::part(content-unavailable-actions-stack),
   :where(table-view)::part(table-container),
   :where(table-view)::part(table-column-stack),
   :where(table-view)::part(table-header-stack),
@@ -1526,6 +1503,31 @@
     }
   }
 }
+@layer sw-components {
+  :where(content-unavailable-view) {
+    place-content: center;
+    place-items: center;
+    text-align: center;
+    row-gap: 1rem;
+  }
+  :where(content-unavailable-view)::part(content-unavailable-actions-stack) {
+    row-gap: 0.2rem;
+  }
+  :where(content-unavailable-view)::part(content-unavailable-title-stack) {
+    --label-flow: vertical;
+    --label-font: title3;
+  }
+  content-unavailable-view > :not([slot]) {
+    --label-image-size: 5rem;
+    --label-gap: 1rem;
+  }
+  :where(content-unavailable-view:not(:has(> [slot=description])))::part(content-unavailable-description-stack) {
+    display: none;
+  }
+  :where(content-unavailable-view:not(:has(> [slot=actions])))::part(content-unavailable-actions-stack) {
+    display: none;
+  }
+}
 @layer sw-components {
   :where([is=confirmation-dialog]) {
     inset-inline: 0px;
@@ -1763,6 +1765,15 @@
     place-content: safe center;
     gap: 1rem;
   }
+  :where(v-stack[template="auto auto minmax(0,1fr)"]) {
+    grid-template-rows: auto auto minmax(0, 1fr);
+  }
+  :where(v-stack[template="auto minmax(0,1fr)"]) {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+  :where(v-stack[template="auto auto autominmax(0,1fr)"]) {
+    grid-template-rows: auto auto autominmax(0, 1fr);
+  }
 }
 @layer sw-components {
   :where(v-flex-stack) {
@@ -1929,6 +1940,11 @@
   }
 }
 @layer sw-components {}
+@layer sw-utils {
+  :where([is=plain-button]) {
+    text-align: center;
+  }
+}
 @layer sw-components {
   :where([is=borderless-button][role=destructive]) {
     --accentColor: var(--red);
@@ -1938,6 +1954,11 @@
     --accentColor5: var(--red5);
   }
 }
+@layer sw-utils {
+  :where([is=borderless-button]) {
+    text-align: center;
+  }
+}
 @layer sw-components {
   @media (pointer: fine) {
     :where([is=bordered-button]) {
@@ -1952,6 +1973,11 @@
     --accentColor5: var(--red5);
   }
 }
+@layer sw-utils {
+  :where([is=bordered-button]) {
+    text-align: center;
+  }
+}
 @layer sw-components {
   :where([is=bordered-prominent-button][role=destructive]) {
     --accentColor: var(--red);
@@ -1961,6 +1987,11 @@
     --accentColor5: var(--red5);
   }
 }
+@layer sw-utils {
+  :where([is=bordered-prominent-button]) {
+    text-align: center;
+  }
+}
 @layer sw-components {
   :where([is=glass-button]) {
     backdrop-filter: var(--liquid-glass-backdrop-filter);
@@ -1975,6 +2006,11 @@
     --accentColor5: var(--red5);
   }
 }
+@layer sw-utils {
+  :where([is=glass-button]) {
+    text-align: center;
+  }
+}
 @layer sw-components {
   :where([is=glass-prominent-button]) {
     backdrop-filter: var(--liquid-glass-backdrop-filter);
@@ -1989,6 +2025,11 @@
     --accentColor5: var(--red5);
   }
 }
+@layer sw-utils {
+  :where([is=glass-prominent-button]) {
+    text-align: center;
+  }
+}
 @layer sw-components {
   :where(tool-bar) {
     pointer-events: none;
@@ -2047,6 +2088,16 @@
     }
   }
 }
+@property --label-gap {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --label-image-size {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
 @layer sw-components {
   :where(label-view) {
     align-items: var(--label--host-align-items, );
@@ -2054,6 +2105,8 @@
     grid-template-columns: var(--label--host-grid-template-columns, );
     grid-template-rows: var(--label--host-grid-template-rows, );
     gap: var(--label--host-gap, );
+    --label-image-size: 2rem;
+    --label-imagestack-fontsize: var(--label-image-size);
     white-space: var(--label--host-white-space, );
   }
   :where(label-view)::part(label-image-stack), :where(label-view)::part(label-title-stack) {
@@ -2068,8 +2121,8 @@
   }
   :where(label-view)::part(label-image-stack) {
     aspect-ratio: 1/1;
-    inline-size: var(--label-image-size, 2rem);
-    font-size: var(--label-image-size, 2rem);
+    inline-size: var(--label-imagestack-fontsize);
+    font-size: var(--label-imagestack-fontsize);
   }
   :where(label-view)::part(label-title-stack) {
     text-decoration: underline;
@@ -2107,31 +2160,20 @@
       --label--host-grid-template-columns: if(
         style(--label-style: icon-only): minmax(0, 1fr) ; style(--label-style: title-only): minmax(0, 1fr) ;
           style(--label-style: title-and-icon): if(style(--label-flow: vertical): minmax(0, 1fr) ; else: auto minmax(0, 1fr) ;) ;
-          else: if(
-            style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): minmax(0, 1fr) ; else: auto minmax(0, 1fr) ;)
-              ; else: minmax(0, 1fr) ;
-          )
-          ;
+          else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): minmax(0, 1fr) ; else: auto minmax(0, 1fr) ;) ; else: minmax(0, 1fr) ;) ;
       );
       --label--host-grid-template-rows: if(
         style(--label-style: icon-only): minmax(0, 1fr) ; style(--label-style: title-only): minmax(0, 1fr) ;
           style(--label-style: title-and-icon): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ;
-          else: if(
-            style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;)
-              ; else: minmax(0, 1fr) ;
-          )
-          ;
-      );
-      --label--host-gap: if(
-        style(--label-style: title-and-icon): 0.3rem ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): 0.3rem ;) ;
+          else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ; else: minmax(0, 1fr) ;) ;
       );
+      --label-gap: if(style(--label-style: title-and-icon): 0.3rem ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): 0.3rem ;) ;);
+      --label--host-gap: if(style(--label-style: title-and-icon): var(--label-gap) ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): var(--label-gap) ;) ;);
       --label--iconstack-display: if(
-        style(--label-style: icon-only): grid ; style(--label-style: title-only): none ; style(--label-style: title-and-icon): grid ;
-          else: if(style(--label--has-icon: yes): grid ; else: none;) ;
+        style(--label-style: icon-only): grid ; style(--label-style: title-only): none ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-icon: yes): grid ; else: none;) ;
       );
       --label--titlestack-display: if(
-        style(--label-style: icon-only): none ; style(--label-style: title-only): grid ; style(--label-style: title-and-icon): grid ;
-          else: if(style(--label--has-title: yes): grid ; else: none;) ;
+        style(--label-style: icon-only): none ; style(--label-style: title-only): grid ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-title: yes): grid ; else: none;) ;
       );
     }
   }
@@ -2155,7 +2197,8 @@
         --label--host-grid-template-rows: minmax(0, 1fr);
         --label--host-align-items: center;
         --label--host-justify-items: normal;
-        --label--host-gap: 0.3rem;
+        --label-gap: 0.3rem;
+        --label--host-gap: var(--label-gap);
         --label--iconstack-display: grid;
         --label--titlestack-display: grid;
       }
@@ -2174,7 +2217,8 @@
       --label--host-grid-template-rows: minmax(0, 1fr);
       --label--host-align-items: center;
       --label--host-justify-items: normal;
-      --label--host-gap: 0.3rem;
+      --label-gap: 0.3rem;
+      --label--host-gap: var(--label-gap);
       --label--iconstack-display: grid;
       --label--titlestack-display: grid;
     }
@@ -2185,7 +2229,8 @@
         --label--host-grid-template-rows: minmax(0, 1fr);
         --label--host-align-items: center;
         --label--host-justify-items: normal;
-        --label--host-gap: 0.3rem;
+        --label-gap: 0.3rem;
+        --label--host-gap: var(--label-gap);
         --label--iconstack-display: grid;
         --label--titlestack-display: grid;
       }
@@ -2217,7 +2262,8 @@
         --label--host-grid-template-rows: auto minmax(0, 1fr);
         --label--host-align-items: normal;
         --label--host-justify-items: center;
-        --label--host-gap: 0.3rem;
+        --label-gap: 0.3rem;
+        --label--host-gap: var(--label-gap);
         --label--iconstack-display: grid;
         --label--titlestack-display: grid;
       }
@@ -2237,7 +2283,8 @@
         --label--host-grid-template-rows: auto minmax(0, 1fr);
         --label--host-align-items: normal;
         --label--host-justify-items: center;
-        --label--host-gap: 0.3rem;
+        --label-gap: 0.3rem;
+        --label--host-gap: var(--label-gap);
         --label--iconstack-display: grid;
         --label--titlestack-display: grid;
       }
@@ -2249,7 +2296,8 @@
         --label--host-grid-template-rows: auto minmax(0, 1fr);
         --label--host-align-items: normal;
         --label--host-justify-items: center;
-        --label--host-gap: 0.3rem;
+        --label-gap: 0.3rem;
+        --label--host-gap: var(--label-gap);
         --label--iconstack-display: grid;
         --label--titlestack-display: grid;
       }
@@ -5358,6 +5406,11 @@
   h-flex-stack[alignment=space-between] {
     justify-content: space-between  ;
   }
+  v-stack[placement=fill],
+  h-flex-stack[placement=fill] {
+    place-items: stretch  ;
+    place-content: stretch  ;
+  }
   v-stack[placement="leading fill"],
   h-flex-stack[placement="leading fill"] {
     place-items: start stretch  ;

package/generated/i18n/index.d.ts

@@ -1,18 +1,26 @@
+import { en } from './locales';
 type LocaleInput = Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale;
-type I18nProps = {
-    tag?: LocaleInput;
-    options?: Intl.LocaleOptions;
-    locale: Intl.Locale;
-    decimalSeparator: string;
-    dateSeparator: string;
-    dateOrder: string[];
+type DeepStringify<T> = {
+    [K in keyof T]: T[K] extends object ? DeepStringify<T[K]> : string;
 };
+export declare function defineTranslations<const T extends object>(factory: () => T): () => T;
+type EnTranslations = DeepStringify<ReturnType<typeof en>>;
+/**
+ * @fires localechange - On html[lang] change!
+ */
 export declare class I18n {
     #private;
     static on: EventTarget;
-    static _props: I18nProps;
-    static get tag(): LocaleInput | undefined;
-    static set tag(val: LocaleInput | undefined);
+    /**
+     * Register a translation factory for a language.
+     * Call this before the language is first needed.
+     *
+     * @example
+     * I18n.register('el', () => ({ SearchUnavailableContent: { … } }))
+     */
+    static register(lang: string, factory: () => EnTranslations): void;
+    static get tag(): LocaleInput;
+    static set tag(val: LocaleInput);
     static get options(): Intl.LocaleOptions | undefined;
     static set options(val: Intl.LocaleOptions | undefined);
     static get locale(): Intl.Locale;
@@ -20,5 +28,7 @@ export declare class I18n {
     static get dateSeparator(): string;
     static get dateOrder(): string[];
     static setOwnConfig(options?: Intl.LocaleOptions): void;
+    /** Look up a top-level translation key for the current language, falling back to 'en'. */
+    static t<K extends keyof EnTranslations>(key: K): EnTranslations[K];
 }
 export {};