@swiftwc/ui 0.0.0-dev.25 → 0.0.0-dev.27

package/generated/client/index.d.ts

@@ -1,6 +1,7 @@
 import { lifecycleObserver } from '../buses';
 import { I18n } from '../i18n';
 import { NavigationPath } from '../internal/class/navigation-path';
+import { type NavigationHost } from '../internal/privateNamespace';
 import { type WebComponentCtor } from '../namespace-browser';
 import { Snapshot } from '../snapshot';
 export declare const polyfills: Map<string, WebComponentCtor>;
@@ -25,5 +26,6 @@ export declare const confirmationDialog: (trigger: HTMLElement, title: string, a
 }[], options?: {
     controller?: AbortController;
     titleVisibility?: boolean;
-}) => Promise<any>;
+}) => Promise<string>;
 export { I18n, lifecycleObserver, NavigationPath, Snapshot };
+export { type NavigationHost };

package/generated/client/index.js

@@ -328,7 +328,11 @@ export const alert = async (title, message, actions, options) => {
             label.setAttribute('title', message);
             vStack.insertAdjacentElement('beforeend', label);
         }
-        for (const [index, action] of (actions ?? []).entries()) {
+        for (const [index, action] of (actions ?? [
+            {
+                role: 'close',
+            },
+        ]).entries()) {
             const btn = $(`<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');
             btn.setAttribute('value', `${index}`);
             if (action?.role)
@@ -368,7 +372,7 @@ export const confirmationDialog = async (trigger, title, actions, options) => {
         if (action?.role)
             btn.setAttribute('role', action.role);
         if (action.label || action.image) {
-            const label = $(`<label-view title="${action.label}"></label-view>`, '>1');
+            const label = $(`<label-view></label-view>`, '>1');
             if (action.label)
                 label.setAttribute('title', action.label);
             if (action.image)
@@ -377,7 +381,7 @@ export const confirmationDialog = async (trigger, title, actions, options) => {
         }
         dialog.insertAdjacentElement('beforeend', btn);
     }
-    trigger.closest('body-view')?.insertAdjacentElement('beforeend', dialog); // dialog.showModal()
+    trigger.closest('body-view,dialog')?.insertAdjacentElement('beforeend', dialog); // dialog.showModal()
     const { promise, resolve } = Promise.withResolvers(), off = onoff('confirmation:return', (evt) => {
         off();
         resolve(evt.detail.returnValue);

package/generated/components/bordered-button.js

@@ -8,7 +8,7 @@ import { Snapshot } from '../snapshot';
  */
 export class BorderedButton extends ButtonBase {
     static get observedAttributes() {
-        return ['role'];
+        return ['role', 'title-key'];
     }
     constructor() {
         super();
@@ -28,9 +28,10 @@ export class BorderedButton extends ButtonBase {
         if (!node)
             return;
         switch (attributeName) {
+            case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target.getAttribute(attributeName));
+                    buttonRole(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

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

@@ -8,7 +8,7 @@ import { Snapshot } from '../snapshot';
  */
 export class BorderedProminentButton extends ButtonBase {
     static get observedAttributes() {
-        return ['role'];
+        return ['role', 'title-key'];
     }
     constructor() {
         super();
@@ -28,9 +28,10 @@ export class BorderedProminentButton extends ButtonBase {
         if (!node)
             return;
         switch (attributeName) {
+            case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target.getAttribute(attributeName));
+                    buttonRole(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

package/generated/components/borderless-button.js

@@ -8,7 +8,7 @@ import { Snapshot } from '../snapshot';
  */
 export class BorderlessButton extends ButtonBase {
     static get observedAttributes() {
-        return ['role'];
+        return ['role', 'title-key'];
     }
     constructor() {
         super();
@@ -28,9 +28,10 @@ export class BorderlessButton extends ButtonBase {
         if (!node)
             return;
         switch (attributeName) {
+            case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target.getAttribute(attributeName));
+                    buttonRole(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

package/generated/components/fine-tooltip.js

@@ -5,7 +5,12 @@ export class FineTooltip extends HTMLElement {
     constructor() {
         super();
     }
-    #handleMutation = (mutations) => {
+    #handleTriggerRemovalMutation = (mutations) => {
+        if (this.#queryTrigger?.isConnected)
+            return;
+        this?.remove();
+    };
+    #handleTriggerAttrMutation = (mutations) => {
         for (const { target, attributeName } of mutations)
             if (target instanceof HTMLElement && target && attributeName)
                 this.#render(target.getAttribute(attributeName));
@@ -23,7 +28,8 @@ export class FineTooltip extends HTMLElement {
             target.style.setProperty('transform-origin', 'bottom');
         }
     };
-    #observer = new MutationObserver(this.#handleMutation);
+    #mutationObserver = new MutationObserver(this.#handleTriggerAttrMutation);
+    #mutationObserver2 = new MutationObserver(this.#handleTriggerRemovalMutation);
     #resizeObserver = new ResizeObserver(this.#handleMeasure);
     get #queryTrigger() {
         const positionAnchor = this.style.positionAnchor;
@@ -51,7 +57,8 @@ export class FineTooltip extends HTMLElement {
     disconnectedCallback() {
         console.debug(`${_a.name} ⚡️ disconnect`);
         this.#resizeObserver.unobserve(this);
-        this.#observer?.disconnect();
+        this.#mutationObserver?.disconnect();
+        this.#mutationObserver2?.disconnect();
         this.#queryTrigger?.style.removeProperty('anchor-name');
         CleanupRegistry.unregister(this);
     }
@@ -71,10 +78,14 @@ export class FineTooltip extends HTMLElement {
         }
         else {
             this.#render(trigger.getAttribute('help'));
-            this.#observer.observe(trigger, {
+            this.#mutationObserver.observe(trigger, {
                 attributes: true,
                 attributeFilter: ['help'],
             });
+            this.#mutationObserver2.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
             this.#resizeObserver.observe(this);
         }
         this.toggleAttribute('open', 'open' === evt.newState);

package/generated/components/glass-button.js

@@ -8,7 +8,7 @@ import { Snapshot } from '../snapshot';
  */
 export class GlassButton extends ButtonBase {
     static get observedAttributes() {
-        return ['role'];
+        return ['role', 'title-key'];
     }
     constructor() {
         super();
@@ -28,9 +28,10 @@ export class GlassButton extends ButtonBase {
         if (!node)
             return;
         switch (attributeName) {
+            case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target.getAttribute(attributeName));
+                    buttonRole(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

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

@@ -8,7 +8,7 @@ import { Snapshot } from '../snapshot';
  */
 export class GlassProminentButton extends ButtonBase {
     static get observedAttributes() {
-        return ['role'];
+        return ['role', 'title-key'];
     }
     constructor() {
         super();
@@ -28,9 +28,10 @@ export class GlassProminentButton extends ButtonBase {
         if (!node)
             return;
         switch (attributeName) {
+            case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target.getAttribute(attributeName));
+                    buttonRole(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

package/generated/components/navigation-title.js

@@ -33,34 +33,17 @@ export class NavigationTitle extends HTMLElement {
         }
     }
     #render = (title, subtitle) => {
-        const el = this.querySelector(':scope>:not([slot])') ??
-            this.appendChild($(`<navigation-large-title><v-stack spacing="0" alignment="fill"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack></navigation-large-title>`, '>1')), vStack = el.querySelector(':scope>v-stack') ??
-            el.appendChild($(`<v-stack spacing="0" alignment="fill"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack>`, '>1'));
-        let titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)');
-        if (title) {
-            titleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`, '>1'));
+        const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`, subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"></label-view>`, vStactTemplate = `<v-stack spacing="0" alignment="fill">${titleTemplate}${subtitleTemplate}</v-stack>`;
+        const el = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<navigation-large-title>${vStactTemplate}</navigation-large-title>`, '>1')), vStack = el.querySelector(':scope>v-stack') ?? el.appendChild($(vStactTemplate, '>1'));
+        const titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)') ?? vStack.appendChild($(titleTemplate, '>1'));
+        if (title)
             titleLabel.setAttribute('title', title);
-        }
         else
-            titleLabel?.remove();
-        let subtitleLabel = vStack.querySelector(':scope>label-view:nth-child(2)');
-        if (subtitle) {
-            subtitleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="callout"></label-view>`, '>1'));
+            titleLabel?.removeAttribute('title');
+        const subtitleLabel = vStack.querySelector(':scope>label-view:nth-child(2)') ?? vStack.appendChild($(subtitleTemplate, '>1'));
+        if (subtitle)
             subtitleLabel.setAttribute('title', subtitle);
-        }
         else
-            subtitleLabel?.remove();
-        // for (const el of this.querySelectorAll(':scope>*')) el.remove()
-        // const el = this.appendChild(
-        //     Object.assign(document.createElement('template'), {
-        //       innerHTML: `<navigation-large-title><v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack></navigation-large-title>`,
-        //     }).content.firstElementChild!
-        //   ),
-        //   titleLabel = el.querySelector('label-view:nth-child(1)'),
-        //   subtitleLabel = el.querySelector('label-view:nth-child(2)')
-        // if (title) titleLabel?.setAttribute('label', title)
-        // else titleLabel?.remove()
-        // if (subtitle) subtitleLabel?.setAttribute('label', subtitle)
-        // else subtitleLabel?.remove()
+            subtitleLabel?.removeAttribute('title');
     };
 }

package/generated/components/scroll-view.js

@@ -180,22 +180,18 @@ export class ScrollView extends HTMLElement {
         });
     }
     #renderNavTitle = (title, subtitle) => {
-        const vStack = this.querySelector(':scope>[slot=top-bar-principal]') ??
-            this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack>`, '>1'));
-        let titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)');
-        if (title) {
-            titleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`, '>1'));
+        const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`, subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"></label-view>`;
+        const vStack = this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal">${titleTemplate}${subtitleTemplate}</v-stack>`, '>1'));
+        const titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)') ?? vStack.appendChild($(titleTemplate, '>1'));
+        if (title)
             titleLabel.setAttribute('title', title);
-        }
         else
-            titleLabel?.remove();
-        let subtitleLabel = vStack.querySelector(':scope>label-view:nth-child(2)');
-        if (subtitle) {
-            subtitleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="callout"></label-view>`, '>1'));
+            titleLabel?.removeAttribute('title');
+        let subtitleLabel = vStack.querySelector(':scope>label-view:nth-child(2)') ?? vStack.appendChild($(subtitleTemplate, '>1'));
+        if (subtitle)
             subtitleLabel.setAttribute('title', subtitle);
-        }
         else
-            subtitleLabel?.remove();
+            subtitleLabel?.removeAttribute('title');
     };
 }
 _a = ScrollView;

package/generated/components/tool-bar-item.js

@@ -3,7 +3,7 @@ import { buttonRole, onoff, touchGlass } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 export class ToolBarItem extends HTMLElement {
     static get observedAttributes() {
-        return ['slot', 'data-previous-slot'];
+        return ['slot', 'data-previous-slot', 'title-key'];
     }
     constructor() {
         super();
@@ -41,10 +41,11 @@ export class ToolBarItem extends HTMLElement {
         switch (name) {
             case 'slot':
             case 'data-previous-slot':
-                const target = this.querySelector(':scope>button');
-                if (target && ['confirmation-action'].includes(newValue ?? ''))
+            case 'title-key':
+                const target = this.querySelector(':scope>button'), nv = this.getAttribute('data-previous-slot') ?? this.getAttribute('slot') ?? '';
+                if (target && ['confirmation-action'].includes(nv))
                     Snapshot.waitReady.then(() => {
-                        buttonRole(target, newValue);
+                        buttonRole(target, nv, this.getAttribute('title-key'));
                     });
                 break;
         }

package/generated/css/index.css

@@ -101,7 +101,7 @@
     --toolbar-cell-block-padding-start: 0.25rem;
     --toolbar-cell-block-padding-end: 0.25rem;
     --toolbar-cell-border-radius: var(--pill-border-radius);
-    --toolbar-cell-min-size: 2.8rem;
+    --toolbar-cell-min-size: 2.9rem;
     --toolbar-cell-focus-bg: var(--control-clear-glass-focus-bg);
     --toolbar-cell-focus-bg-dark: var(--control-clear-glass-focus-bg-dark);
     --toolbar-cell-active-bg: var(--control-clear-glass-active-bg);
@@ -1695,9 +1695,10 @@
     color: var(--text, );
     touch-action: none;
     position: fixed;
-    inline-size: fit-content;
-    block-size: fit-content;
+    inline-size: max-content;
+    block-size: max-content;
     height: auto;
+    min-inline-size: min(20rem, 80svw);
     max-inline-size: var(--confirmation--dialog-max-inline-size, );
     max-block-size: var(--confirmation--dialog-max-block-size, );
     margin-block: var(--confirmation--dialog-margin-block, );
@@ -1748,6 +1749,12 @@
   :where([is=alert-dialog])::backdrop {
     background-color: transparent;
   }
+  @media (prefers-reduced-motion: no-preference) {
+    :where([is=alert-dialog])::backdrop {
+      transition: display var(--view-transition-duration) ease-out allow-discrete, overlay var(--view-transition-duration) ease-out allow-discrete, background-color var(--view-transition-duration) ease-out allow-discrete;
+      will-change: background-color, overlay, display;
+    }
+  }
   :where([is=alert-dialog]) {
     color: var(--text, );
     touch-action: none;
@@ -1772,6 +1779,14 @@
     --alert--dialog-scale: scale(1.2);
     --alert--dialog-opacity: 0.8;
   }
+  :where([is=alert-dialog][open])::backdrop {
+    background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
+  }
+  @starting-style {
+    :where([is=alert-dialog][open])::backdrop {
+      background-color: transparent;
+    }
+  }
   :where([is=alert-dialog][open]) {
     --alert--dialog-scale: scale(1);
     --alert--dialog-opacity: 1;
@@ -1782,6 +1797,14 @@
       --alert--dialog-opacity: 0.8;
     }
   }
+  :where([is=alert-dialog][closing])::backdrop {
+    background-color: var(--clear);
+  }
+  @starting-style {
+    :where([is=alert-dialog][closing])::backdrop {
+      background-color: transparent;
+    }
+  }
   :where([is=alert-dialog][closing]) {
     --alert--dialog-scale: scale(0.98);
     --alert--dialog-opacity: 0;
@@ -2369,7 +2392,7 @@
   }
 }
 @layer sw-colors {
-  [is=bordered-prominent-button] {
+  [is=glass-prominent-button] {
     --secondary: var(--btntext);
     --blue: var(--btntext);
   }
@@ -6805,7 +6828,8 @@
 @layer sw-transitions {
   @media (prefers-reduced-motion: no-preference) {
     :where([is=alert-dialog]) {
-      transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
+      transition: display var(--touchglass-transition-duration) allow-discrete ease-out, overlay var(--touchglass-transition-duration) allow-discrete ease-out, transform var(--touchglass-transition-duration) allow-discrete ease-out, opacity var(--touchglass-transition-duration) allow-discrete ease-out;
+      will-change: transform, overlay, display, opacity;
     }
   }
 }
@@ -7795,6 +7819,16 @@
     --toolbaritemactiveface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h));
     --toolbaritemactivetext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
   }
+  :where(tool-bar-item[tint], [tint] tool-bar-item,
+  tool-bar-item-group[tint],
+  [tint] tool-bar-item-group,
+  navigation-split-view sidebar-toggle[tint],
+  [tint] navigation-split-view sidebar-toggle) > button {
+    --secondary: var(--btntext);
+    --blue: var(--btntext);
+    --accentColorEffective: var(--btntext);
+    --accentColor: var(--btntext);
+  }
   :where(sidebar-toggle) {
     --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
     --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));

package/generated/i18n/locales/el.d.ts

@@ -5,13 +5,11 @@ declare const _default: () => {
         readonly Description: "Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.";
     };
     readonly ButtonRole: {
-        readonly Default: {
-            readonly Cancel: "Cancel";
-            readonly Close: "Close";
-            readonly Confirm: "Confirm";
-            readonly Destructive: "Διαγραφή";
-            readonly OK: "OK";
-        };
+        readonly Cancel: "Cancel";
+        readonly Close: "Close";
+        readonly Confirm: "Confirm";
+        readonly Destructive: "Διαγραφή";
+        readonly OK: "OK";
     };
 };
 export default _default;

package/generated/i18n/locales/el.js

@@ -6,12 +6,10 @@ export default defineTranslations(() => ({
         Description: 'Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.',
     },
     ButtonRole: {
-        Default: {
-            Cancel: 'Cancel',
-            Close: 'Close',
-            Confirm: 'Confirm',
-            Destructive: 'Διαγραφή',
-            OK: 'OK',
-        },
+        Cancel: 'Cancel',
+        Close: 'Close',
+        Confirm: 'Confirm',
+        Destructive: 'Διαγραφή',
+        OK: 'OK',
     },
 }));

package/generated/i18n/locales/en.d.ts

@@ -5,13 +5,11 @@ declare const _default: () => {
         readonly Description: "Check the spelling or try a new search.";
     };
     readonly ButtonRole: {
-        readonly Default: {
-            readonly Cancel: "Cancel";
-            readonly Close: "Close";
-            readonly Confirm: "Confirm";
-            readonly Destructive: "Delete";
-            readonly OK: "OK";
-        };
+        readonly Cancel: "Cancel";
+        readonly Close: "Close";
+        readonly Confirm: "Confirm";
+        readonly Destructive: "Delete";
+        readonly OK: "OK";
     };
 };
 export default _default;

package/generated/i18n/locales/en.js

@@ -6,12 +6,10 @@ export default defineTranslations(() => ({
         Description: 'Check the spelling or try a new search.',
     },
     ButtonRole: {
-        Default: {
-            Cancel: 'Cancel',
-            Close: 'Close',
-            Confirm: 'Confirm',
-            Destructive: 'Delete',
-            OK: 'OK',
-        },
+        Cancel: 'Cancel',
+        Close: 'Close',
+        Confirm: 'Confirm',
+        Destructive: 'Delete',
+        OK: 'OK',
     },
 }));

package/generated/internal/utils/button-role.d.ts

@@ -1 +1 @@
-export default function (target: HTMLElement, role: string | null): void;
+export default function (target: HTMLElement, role: string | null, titleKey?: string | null): void;

package/generated/internal/utils/button-role.js

@@ -3,41 +3,53 @@ import { Snapshot } from '../../snapshot';
 import { CleanupRegistry } from '../class/cleanup-registry';
 import { default as $ } from './cash';
 import onoff from './onoff';
-function renderPlaceholder(el, role) {
-    const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view slot="placeholder"></label-view>`, '>1'));
-    switch (role) {
-        case 'cancel':
-            label.setAttribute('title', I18n.t('ButtonRole').Default.Cancel);
-            label.setAttribute('system-image', Snapshot.config['cancel-button-icon']);
-            break;
-        case 'close':
-            label.setAttribute('title', I18n.t('ButtonRole').Default.Close);
-            label.setAttribute('system-image', Snapshot.config['close-button-icon']);
-            break;
-        case 'confirm':
-            label.setAttribute('title', I18n.t('ButtonRole').Default.Confirm);
-            label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
-            break;
-        case 'confirmation-action':
-            label.setAttribute('title', I18n.t('ButtonRole').Default.Confirm);
-            label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
-            break;
-        case 'destructive':
-            label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive);
-            label.setAttribute('system-image', Snapshot.config['delete-button-icon']);
-            break;
-        default:
-            label?.remove();
-            break;
-    }
-    // if (role) {
-    //   label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive)
-    // } else label?.remove()
+function renderPlaceholder(el, role, titleKey) {
+    if (!el.isConnected)
+        return;
+    self.requestAnimationFrame(() => {
+        if (!el.isConnected)
+            return;
+        const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view slot="placeholder"></label-view>`, '>1'));
+        switch (role) {
+            case 'cancel':
+                label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel);
+                label.setAttribute('system-image', Snapshot.config['cancel-button-icon']);
+                break;
+            case 'close':
+                if (label.closest('[is=alert-dialog]')) {
+                    label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').OK);
+                }
+                else {
+                    label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Close);
+                    label.setAttribute('system-image', Snapshot.config['close-button-icon']);
+                }
+                break;
+            case 'confirm':
+                label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm);
+                label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
+                break;
+            case 'confirmation-action':
+                label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm);
+                label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
+                break;
+            case 'destructive':
+                label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Destructive);
+                label.setAttribute('system-image', Snapshot.config['delete-button-icon']);
+                break;
+            default:
+                label?.remove();
+                break;
+        }
+        // if (role) {
+        //   label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive)
+        // } else label?.remove()
+    });
 }
-export default function (target, role) {
-    renderPlaceholder(target, role);
+export default function (target, role, titleKey) {
+    const overiderTitle = typeof titleKey === 'string' && titleKey in I18n.t('ButtonRole') ? titleKey : undefined;
+    renderPlaceholder(target, role, overiderTitle);
     CleanupRegistry.unregister(target, 'i18n');
     CleanupRegistry.register(target, onoff('localechange', () => {
-        renderPlaceholder(target, role);
+        renderPlaceholder(target, role, overiderTitle);
     }, I18n.on).on(), 'i18n');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.25",
+  "version": "0.0.0-dev.27",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/_transitions.scss

@@ -8,7 +8,7 @@
 
 @forward 'transitions/bwd.navbar';
 
-@forward 'transitions/dialog';
+@forward 'transitions/sheet-view';
 
 @forward 'transitions/fine-tooltip';
 

package/scss/base/_root.scss

@@ -174,7 +174,7 @@
     --toolbar-cell-block-padding-start: 0.25rem;
     --toolbar-cell-block-padding-end: 0.25rem;
     --toolbar-cell-border-radius: var(--pill-border-radius);
-    --toolbar-cell-min-size: 2.8rem;
+    --toolbar-cell-min-size: 2.9rem;
 
     --toolbar-cell-focus-bg: var(--control-clear-glass-focus-bg); //oklch(0 0 0 / 0%);
     --toolbar-cell-focus-bg-dark: var(--control-clear-glass-focus-bg-dark); //oklch(0 0 0 / 0%);

package/scss/colors/_index.scss

@@ -517,12 +517,23 @@ $colors: map.merge(
       // }
     }
 
-    :where(&[tint], [tint] &) {
-      // --toolbaritemtext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-      // --toolbaritemhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-      // --toolbaritemactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+    &[tint],
+    [tint] & {
+      :where(&) {
+        // --toolbaritemtext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+        // --toolbaritemhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+        // --toolbaritemactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+
+        @include mixins.wire-tinted-glass(toolbaritem);
 
-      @include mixins.wire-tinted-glass(toolbaritem);
+        > button {
+          --secondary: var(--btntext);
+          --blue: var(--btntext);
+
+          --accentColorEffective: var(--btntext);
+          --accentColor: var(--btntext);
+        }
+      }
     }
   }
 

package/scss/components/_alert-dialog.scss

@@ -6,6 +6,8 @@
     :where(&) {
       @include mixins.reset-dialog;
 
+      @include mixins.make-backdrop-transitionable;
+
       color: var(--text,);
 
       touch-action: none;
@@ -43,6 +45,8 @@
 
     &[open] {
       :where(&) {
+        @include mixins.add-dialog-backdrop-transition-frames(var(--view-transition-dialog-onscreen-backdrop-bg));
+
         --alert--dialog-scale: scale(1);
         --alert--dialog-opacity: 1;
 
@@ -55,6 +59,8 @@
 
     &[closing] {
       :where(&) {
+        @include mixins.add-dialog-backdrop-transition-frames(var(--clear));
+
         --alert--dialog-scale: scale(0.98);
         --alert--dialog-opacity: 0;
       }

package/scss/components/_confirmation-dialog.scss

@@ -12,9 +12,12 @@
 
       position: fixed;
 
-      inline-size: fit-content;
-      block-size: fit-content;
+      inline-size: max-content;
+      block-size: max-content;
       height: auto; // safari
+
+      min-inline-size: min(20rem, 80svw);
+
       max-inline-size: var(--confirmation--dialog-max-inline-size,);
       max-block-size: var(--confirmation--dialog-max-block-size,);
 

package/scss/components/_glass-prominent-button.scss

@@ -41,7 +41,7 @@
 }
 
 @layer #{vars.$colors-layer} {
-  [is='bordered-prominent-button'] {
+  [is='glass-prominent-button'] {
     --secondary: var(--btntext);
     --blue: var(--btntext);
   }

package/scss/components/_tool-bar-item.scss

@@ -40,10 +40,9 @@
     :where(&:has([disabled])) {
       pointer-events: none;
     }
-  }
 
-  // NOTE: MUST be right-after the above `all: unset` in this SAME page!
-  tool-bar-item {
+    // NOTE: MUST be right-after the above `all: unset` in this SAME page!
+
     :where(& > button),
     :where(& > picker-view > menu-view)::part(menu-summary),
     :where(& > menu-view)::part(menu-summary) {
@@ -54,6 +53,18 @@
 
     > button {
       @include mixins.takeover-button-slots;
+
+      // [tint] &,
+      // &[tint] {
+      //   :where(&) {
+      //     // NOTE: Make everything inside prominent buttons white
+      //     --secondary: var(--btntext);
+      //     --blue: var(--btntext);
+
+      //     --accentColorEffective: var(--btntext);
+      //     --accentColor: var(--btntext);
+      //   }
+      // }
     }
 
     // NOTE: add paddings to labels w/ text in toolbar items
@@ -75,86 +86,9 @@
     //   }
     // }
   }
-
-  // tool-bar-item[slot],
-  // tool-bar-item-group {
-  // @media (prefers-reduced-motion: no-preference) {
-  //   transition:
-  //     display var(--menu-animation-duration) allow-discrete ease-out,
-  //     overlay var(--menu-animation-duration) allow-discrete ease-out,
-  //     transform var(--menu-animation-duration) allow-discrete ease-out;
-  //   will-change: transform, overlay, display;
-  // }
-  // }
-
-  // tool-bar-item {
-  // min-height: var(--toolbar-cell-min-size);
-  // min-width: var(--toolbar-cell-min-size);
-  // }
 }
 
-// @layer #{vars.$colors-layer} {
-// sidebar-toggle > button,
-// tool-bar-item > button,
-// tool-bar-item > input,
-// [is='tab-item'],
-// // list-view > button,
-// menu-view > button,
-// [is='disclosure-group'] > button,
-// [is='disclosure-group'] > summary {
-//   &:not(:disabled):not([readonly]) {
-//     :where(&) {
-//       @include mixins.add-focus-visible-state {
-//         --toolbaritemface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-//       }
-//     }
-//   }
-// }
-
-// menu-view {
-// @include mixins.add-focus-visible-state('::part(menu-summary)') {
-//   --toolbaritemface: var(--toolbaritemhighlightface,); //light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-// }
-// @include mixins.add-hover-state('::part(menu-summary)') {
-//   --toolbaritemface: var(--toolbaritemhighlightface,); //light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-// }
-// }
-
-// list-view > button,
-// [is='form-view'] > button {
-//   &:not(:disabled):not([readonly]) {
-//     :where(&) {
-//       --toolbaritempadistart: 0.3rem;
-//       --toolbaritempadbstart: 0.3rem;
-//     }
-//   }
-// }
-// }
-
 @layer #{vars.$ui-layer} {
-  // sidebar-toggle > button,
-  // tool-bar-item > button,
-  // tool-bar-item > input,
-  // [is='tab-item'],
-  // // list-view > button,
-  // menu-view > button,
-  // [is='disclosure-group'] > summary,
-  // [is='disclosure-group'] > button {
-  //   // &:not(:disabled):not([readonly]) {
-  //   //   :where(&) {
-  //   @include mixins.add-active-state {
-  //     --toolbaritemface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
-  //   }
-  //   //   }
-  //   // }
-  // }
-
-  // menu-view {
-  //   @include mixins.add-active-state('::part(menu-summary)') {
-  //     --toolbaritemface: var(--toolbaritemactiveface,); //light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
-  //   }
-  // }
-
   :where(tool-bar-item[slot]:has(menu-view[open])),
   :where(tool-bar-item-group:has(> tool-bar-item menu-view[open])) {
     --toolbar-cell-scale: var(--menu-host-offscreen-transform);

package/scss/transitions/_alert-dialog.scss

@@ -5,14 +5,13 @@
   @media (prefers-reduced-motion: no-preference) {
     [is='alert-dialog'] {
       :where(&) {
-        // transition:
-        //   block-size var(--menu-animation-duration) allow-discrete ease-out,
-        //   inline-size var(--menu-animation-duration) allow-discrete ease-out,
-        //   display var(--menu-animation-duration) allow-discrete ease-out,
-        //   overlay var(--menu-animation-duration) allow-discrete ease-out,
-        //   transform var(--menu-animation-duration) allow-discrete ease-out;
-        transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
-        // will-change: block-size, inline-size, transform, overlay, display;
+        transition:
+          display var(--touchglass-transition-duration) allow-discrete ease-out,
+          overlay var(--touchglass-transition-duration) allow-discrete ease-out,
+          transform var(--touchglass-transition-duration) allow-discrete ease-out,
+          opacity var(--touchglass-transition-duration) allow-discrete ease-out;
+        // transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
+        will-change: transform, overlay, display, opacity;
       }
     }
   }

package/scss/transitions/_sheet-view.scss

@@ -0,0 +1,30 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  [is='sheet-view'] {
+    &:not([open]) {
+      z-index: var(--top-layer-polyfill-z-index);
+    }
+
+    &[open] {
+      --sheet-view-translate: translateY(var(--view-transition-dialog-onscreen-y));
+
+      @include mixins.if-ipad-sheet-fits {
+        @include mixins.if-2col-split-view-fits {
+          navigation-split-view & {
+            margin-inline-start: var(--safe-area-inset-left);
+          }
+        }
+      }
+
+      @include mixins.add-dialog-backdrop-transition-frames(var(--view-transition-dialog-onscreen-backdrop-bg));
+
+      @starting-style {
+        & {
+          --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
+        }
+      }
+    }
+  }
+}

package/web-components.html-data/en.json

@@ -13,6 +13,9 @@
       "attributes": [
         {
           "name": "role"
+        },
+        {
+          "name": "title-key"
         }
       ]
     },
@@ -22,6 +25,9 @@
       "attributes": [
         {
           "name": "role"
+        },
+        {
+          "name": "title-key"
         }
       ]
     },
@@ -31,6 +37,9 @@
       "attributes": [
         {
           "name": "role"
+        },
+        {
+          "name": "title-key"
         }
       ]
     },
@@ -116,6 +125,9 @@
       "attributes": [
         {
           "name": "role"
+        },
+        {
+          "name": "title-key"
         }
       ]
     },
@@ -125,6 +137,9 @@
       "attributes": [
         {
           "name": "role"
+        },
+        {
+          "name": "title-key"
         }
       ]
     },
@@ -322,6 +337,9 @@
         },
         {
           "name": "data-previous-slot"
+        },
+        {
+          "name": "title-key"
         }
       ]
     },

package/scss/transitions/_dialog.scss

@@ -1,28 +0,0 @@
-@use '../vars';
-@use '../mixins';
-
-@layer #{vars.$transitions-layer} {
-  [is='sheet-view']:not([open]) {
-    z-index: var(--top-layer-polyfill-z-index);
-  }
-
-  [is='sheet-view'][open] {
-    --sheet-view-translate: translateY(var(--view-transition-dialog-onscreen-y));
-
-    @include mixins.if-ipad-sheet-fits {
-      @include mixins.if-2col-split-view-fits {
-        navigation-split-view & {
-          margin-inline-start: var(--safe-area-inset-left);
-        }
-      }
-    }
-
-    @include mixins.add-dialog-backdrop-transition-frames(var(--view-transition-dialog-onscreen-backdrop-bg));
-
-    @starting-style {
-      & {
-        --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
-      }
-    }
-  }
-}