@swiftwc/ui 0.0.0-dev.33 → 0.0.0-dev.34

package/generated/components/bordered-button.js

@@ -31,7 +31,7 @@ export class BorderedButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    buttonRole(target, target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

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

@@ -31,7 +31,7 @@ export class BorderedProminentButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    buttonRole(target, target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

package/generated/components/borderless-button.js

@@ -31,7 +31,7 @@ export class BorderlessButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    buttonRole(target, target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

package/generated/components/glass-button.js

@@ -31,7 +31,7 @@ export class GlassButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    buttonRole(target, target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

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

@@ -31,7 +31,7 @@ export class GlassProminentButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    buttonRole(target, target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

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

@@ -45,7 +45,7 @@ export class ToolBarItem extends HTMLElement {
                 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, nv, this.getAttribute('title-key'));
+                        buttonRole(this, target, nv, this.getAttribute('title-key'));
                     });
                 break;
         }

package/generated/css/index.css

@@ -1710,7 +1710,7 @@
     color: var(--text, );
     touch-action: none;
     position: fixed;
-    inline-size: max-content;
+    inline-size: var(--confirmation--dialog-inline-size, anchor-size());
     block-size: fit-content;
     height: auto;
     max-inline-size: var(--confirmation--dialog-max-inline-size, );
@@ -1718,6 +1718,7 @@
     margin-block: var(--confirmation--dialog-margin-block, );
     margin-inline: var(--confirmation--dialog-margin-inline, );
     transform: var(--confirmation--dialog-scale, );
+    opacity: var(--confirmation--dialog-opacity, );
     position-anchor: --confirmation-dialog;
     position-area: center;
     overflow: clip;
@@ -1727,24 +1728,30 @@
     padding-block: 1rem;
     padding-inline: 1rem;
     gap: 1rem;
-    --confirmation--dialog-scale: scale(0);
+    --confirmation--dialog-scale: scale(0.7);
+    --confirmation--dialog-opacity: 0.8;
   }
   :where([is=confirmation-dialog][open]) {
+    --confirmation--dialog-inline-size: min(20rem, 80vw);
     --confirmation--dialog-max-inline-size: min(20rem, 80vw);
     --confirmation--dialog-max-block-size: 80vh;
     --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);
+    --confirmation--dialog-opacity: 1;
   }
   @starting-style {
     :where([is=confirmation-dialog][open]) {
-      --confirmation--dialog-scale: scale(0);
+      --confirmation--dialog-scale: scale(0.7);
+      --confirmation--dialog-opacity: 0.8;
     }
   }
   :where([is=confirmation-dialog][closing]) {
+    --confirmation--dialog-inline-size: anchor-size();
     --confirmation--dialog-max-inline-size: anchor-size();
     --confirmation--dialog-max-block-size: anchor-size();
-    --confirmation--dialog-scale: scale(0);
+    --confirmation--dialog-scale: scale(0.7);
+    --confirmation--dialog-opacity: 0;
   }
 }
 @layer sw-components {

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

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

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

@@ -48,15 +48,15 @@ function ensurePlaceholder(el, role, titleKey) {
     // } else label?.remove()
     // })
 }
-export default function (target, role, titleKey) {
+export default function (host, target, role, titleKey) {
     const overiderTitle = typeof titleKey === 'string' && titleKey in I18n.t('ButtonRole') ? titleKey : undefined;
     ensurePlaceholder(target, role, overiderTitle);
-    if (observing.has(target))
-        observing.get(target)?.disconnect();
+    if (observing.has(host))
+        observing.get(host)?.disconnect();
     CleanupRegistry.unregister(target, 'i18n');
     CleanupRegistry.register(target, onoff('localechange', () => ensurePlaceholder(target, role, overiderTitle), I18n.on).on(), 'i18n');
-    observing.set(target, new MutationObserver(() => ensurePlaceholder(target, role, overiderTitle)));
-    observing.get(target)?.observe(target, {
+    observing.set(host, new MutationObserver(() => ensurePlaceholder(target, role, overiderTitle)));
+    observing.get(host)?.observe(host, {
         childList: true,
     });
 }

package/package.json

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

package/scss/components/_confirmation-dialog.scss

@@ -12,7 +12,7 @@
 
       position: fixed;
 
-      inline-size: max-content;
+      inline-size: var(--confirmation--dialog-inline-size, anchor-size());
       block-size: fit-content;
       height: auto; // safari
 
@@ -27,6 +27,8 @@
       transform: var(--confirmation--dialog-scale,);
       // transform-origin: top left;
 
+      opacity: var(--confirmation--dialog-opacity,);
+
       position-anchor: --confirmation-dialog; // overriden
       position-area: center;
 
@@ -41,11 +43,13 @@
       gap: 1rem;
 
       // finally
-      --confirmation--dialog-scale: scale(0);
+      --confirmation--dialog-scale: scale(0.7);
+      --confirmation--dialog-opacity: 0.8;
     }
 
     &[open] {
       :where(&) {
+        --confirmation--dialog-inline-size: min(20rem, 80vw);
         // --confirmation--dialog-min-inline-size: min(20rem, 80svw);
 
         --confirmation--dialog-max-inline-size: min(20rem, 80vw);
@@ -55,21 +59,25 @@
         --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);
+        --confirmation--dialog-opacity: 1;
 
         @starting-style {
-          --confirmation--dialog-scale: scale(0);
+          --confirmation--dialog-scale: scale(0.7);
+          --confirmation--dialog-opacity: 0.8;
         }
       }
     }
 
     &[closing] {
       :where(&) {
+        --confirmation--dialog-inline-size: anchor-size();
         // --confirmation--dialog-min-inline-size: anchor-size();
 
         --confirmation--dialog-max-inline-size: anchor-size();
         --confirmation--dialog-max-block-size: anchor-size();
 
-        --confirmation--dialog-scale: scale(0);
+        --confirmation--dialog-scale: scale(0.7);
+        --confirmation--dialog-opacity: 0;
       }
     }
   }