@swiftwc/ui 0.0.0-dev.26 → 0.0.0-dev.28

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>;
@@ -18,12 +19,13 @@ export declare const alert: (title?: string, message?: string, actions?: {
 }[], options?: {
     titleVisibility?: boolean;
 }) => Promise<void>;
-export declare const confirmationDialog: (trigger: HTMLElement, title: string, actions?: {
+export declare const confirmationDialog: (trigger: HTMLElement, title: string, message?: string, actions?: {
     label?: string;
     image?: string;
     role?: string;
 }[], options?: {
     controller?: AbortController;
     titleVisibility?: boolean;
-}) => Promise<unknown>;
+}) => 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)
@@ -352,15 +356,20 @@ export const alert = async (title, message, actions, options) => {
         return promise;
     });
 };
-export const confirmationDialog = async (trigger, title, actions, options) => {
+export const confirmationDialog = async (trigger, title, message, actions, options) => {
     const newAnchorName = `--confirmation-dialog-${self.crypto.randomUUID()}`;
-    const dialog = $(`<dialog is="confirmation-dialog"></dialog>`, '>1');
+    const dialog = $(`<dialog is="confirmation-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(`<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
     trigger.style.setProperty('anchor-name', newAnchorName, 'important'); //$.prop('anchor-name', newAnchorName, trigger, 'important')
     dialog.style.setProperty('position-anchor', newAnchorName); //$.prop('position-anchor', newAnchorName, dialog)
     if (title && false !== options?.titleVisibility) {
-        const label = $(`<label-view></label-view>`, '>1');
+        const label = $(`<label-view font="headline"></label-view>`, '>1');
         label.setAttribute('title', title);
-        dialog.insertAdjacentElement('beforeend', label);
+        vStack.insertAdjacentElement('beforeend', label);
+    }
+    if (message && false !== options?.titleVisibility) {
+        const label = $(`<label-view foreground="secondary" font="callout"></label-view>`, '>1');
+        label.setAttribute('title', message);
+        vStack.insertAdjacentElement('beforeend', label);
     }
     for (const [index, action] of (actions ?? []).entries()) {
         const btn = $(`<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');

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', 'cancellation-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);
@@ -1698,8 +1698,9 @@
     inline-size: fit-content;
     block-size: fit-content;
     height: auto;
-    max-inline-size: var(--confirmation--dialog-max-inline-size, );
-    max-block-size: var(--confirmation--dialog-max-block-size, );
+    min-inline-size: min(20rem, 80svw);
+    max-inline-size: min(20rem, 80vw);
+    max-block-size: 80vh;
     margin-block: var(--confirmation--dialog-margin-block, );
     margin-inline: var(--confirmation--dialog-margin-inline, );
     transform: var(--confirmation--dialog-scale, );
@@ -1711,12 +1712,10 @@
     box-shadow: var(--menu-popover-box-shadow, );
     padding-block: 1rem;
     padding-inline: 1rem;
-    gap: 0.5rem;
+    gap: 1rem;
     --confirmation--dialog-scale: scale(0);
   }
   :where([is=confirmation-dialog][open]) {
-    --confirmation--dialog-max-inline-size: 100vw;
-    --confirmation--dialog-max-block-size: 100vh;
     --confirmation--dialog-margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
     --confirmation--dialog-margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
     --confirmation--dialog-scale: scale(1);
@@ -1727,8 +1726,6 @@
     }
   }
   :where([is=confirmation-dialog][closing]) {
-    --confirmation--dialog-max-inline-size: anchor-size();
-    --confirmation--dialog-max-block-size: anchor-size();
     --confirmation--dialog-scale: scale(0);
   }
 }
@@ -1748,6 +1745,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 +1775,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 +1793,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;
@@ -2166,6 +2185,15 @@
     --accentColor4: var(--red4);
     --accentColor5: var(--red5);
   }
+  :where([is=borderless-button][role=confirm]) {
+    --accentColorEffective: var(--blue);
+    --accentColorEffective4: var(--blue4);
+    --accentColor: var(--blue);
+    --accentColor2: var(--blue2);
+    --accentColor3: var(--blue3);
+    --accentColor4: var(--blue4);
+    --accentColor5: var(--blue5);
+  }
 }
 @layer sw-utils {
   :where([is=borderless-button]) {
@@ -2217,6 +2245,15 @@
     --accentColor4: var(--red4);
     --accentColor5: var(--red5);
   }
+  :where([is=bordered-button][role=confirm]) {
+    --accentColorEffective: var(--blue);
+    --accentColorEffective4: var(--blue4);
+    --accentColor: var(--blue);
+    --accentColor2: var(--blue2);
+    --accentColor3: var(--blue3);
+    --accentColor4: var(--blue4);
+    --accentColor5: var(--blue5);
+  }
 }
 @layer sw-utils {
   :where([is=bordered-button]) {
@@ -2263,9 +2300,18 @@
     --accentColor4: var(--red4);
     --accentColor5: var(--red5);
   }
+  :where([is=bordered-prominent-button][role=confirm]) {
+    --accentColorEffective: var(--blue);
+    --accentColorEffective4: var(--blue4);
+    --accentColor: var(--blue);
+    --accentColor2: var(--blue2);
+    --accentColor3: var(--blue3);
+    --accentColor4: var(--blue4);
+    --accentColor5: var(--blue5);
+  }
 }
 @layer sw-colors {
-  [is=bordered-prominent-button] {
+  :where([is=bordered-prominent-button] > *) {
     --secondary: var(--btntext);
     --blue: var(--btntext);
   }
@@ -2318,6 +2364,15 @@
     --accentColor4: var(--red4);
     --accentColor5: var(--red5);
   }
+  :where([is=glass-button][role=confirm]) {
+    --accentColorEffective: var(--blue);
+    --accentColorEffective4: var(--blue4);
+    --accentColor: var(--blue);
+    --accentColor2: var(--blue2);
+    --accentColor3: var(--blue3);
+    --accentColor4: var(--blue4);
+    --accentColor5: var(--blue5);
+  }
 }
 @layer sw-utils {
   :where([is=glass-button]) {
@@ -2367,9 +2422,18 @@
     --accentColor4: var(--red4);
     --accentColor5: var(--red5);
   }
+  :where([is=glass-prominent-button][role=confirm]) {
+    --accentColorEffective: var(--blue);
+    --accentColorEffective4: var(--blue4);
+    --accentColor: var(--blue);
+    --accentColor2: var(--blue2);
+    --accentColor3: var(--blue3);
+    --accentColor4: var(--blue4);
+    --accentColor5: var(--blue5);
+  }
 }
 @layer sw-colors {
-  [is=glass-prominent-button] {
+  :where([is=glass-prominent-button] > *) {
     --secondary: var(--btntext);
     --blue: var(--btntext);
   }
@@ -6805,7 +6869,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;
     }
   }
 }
@@ -7794,6 +7859,12 @@
     --toolbaritemhighlighttext: 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));
     --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);

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: "Ακύρωση";
+        readonly Close: "Κλείσιμο";
+        readonly 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: 'Ακύρωση',
+        Close: 'Κλείσιμο',
+        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,57 @@ 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 'cancellation-action':
+                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 '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.26",
+  "version": "0.0.0-dev.28",
   "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,18 +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);
 
-      --secondary: var(--btntext);
-      --blue: var(--btntext);
+        > button {
+          --secondary: var(--btntext);
+          --blue: var(--btntext);
 
-      --accentColorEffective: var(--btntext);
-      --accentColor: 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/_bordered-button.scss

@@ -35,6 +35,16 @@
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
   }
 }
 

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

@@ -32,13 +32,25 @@
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
   }
 }
 
 @layer #{vars.$colors-layer} {
-  [is='bordered-prominent-button'] {
-    --secondary: var(--btntext);
-    --blue: var(--btntext);
+  [is='bordered-prominent-button'] > * {
+    :where(&) {
+      --secondary: var(--btntext);
+      --blue: var(--btntext);
+    }
   }
 }
 

package/scss/components/_borderless-button.scss

@@ -22,6 +22,16 @@
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
   }
 }
 

package/scss/components/_confirmation-dialog.scss

@@ -15,8 +15,13 @@
       inline-size: fit-content;
       block-size: fit-content;
       height: auto; // safari
-      max-inline-size: var(--confirmation--dialog-max-inline-size,);
-      max-block-size: var(--confirmation--dialog-max-block-size,);
+
+      min-inline-size: min(20rem, 80svw);
+
+      max-inline-size: min(20rem, 80vw);
+      max-block-size: 80vh;
+      // 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,);
       margin-inline: var(--confirmation--dialog-margin-inline,);
@@ -34,7 +39,7 @@
 
       padding-block: 1rem;
       padding-inline: 1rem;
-      gap: 0.5rem;
+      gap: 1rem;
 
       // finally
       --confirmation--dialog-scale: scale(0);
@@ -42,8 +47,8 @@
 
     &[open] {
       :where(&) {
-        --confirmation--dialog-max-inline-size: 100vw;
-        --confirmation--dialog-max-block-size: 100vh;
+        // --confirmation--dialog-max-inline-size: 100vw;
+        // --confirmation--dialog-max-block-size: 100vh;
 
         --confirmation--dialog-margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
         --confirmation--dialog-margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
@@ -58,8 +63,8 @@
 
     &[closing] {
       :where(&) {
-        --confirmation--dialog-max-inline-size: anchor-size();
-        --confirmation--dialog-max-block-size: anchor-size();
+        // --confirmation--dialog-max-inline-size: anchor-size();
+        // --confirmation--dialog-max-block-size: anchor-size();
 
         --confirmation--dialog-scale: scale(0);
       }

package/scss/components/_glass-button.scss

@@ -37,6 +37,16 @@
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
   }
 }
 

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

@@ -37,13 +37,25 @@
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
   }
 }
 
 @layer #{vars.$colors-layer} {
-  [is='glass-prominent-button'] {
-    --secondary: var(--btntext);
-    --blue: var(--btntext);
+  [is='glass-prominent-button'] > * {
+    :where(&) {
+      --secondary: var(--btntext);
+      --blue: var(--btntext);
+    }
   }
 }
 

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));
-      }
-    }
-  }
-}