@swiftwc/ui 0.0.0-dev.32 → 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,15 +1710,15 @@
     color: var(--text, );
     touch-action: none;
     position: fixed;
-    inline-size: fit-content;
+    inline-size: var(--confirmation--dialog-inline-size, anchor-size());
     block-size: fit-content;
     height: auto;
-    min-inline-size: var(--confirmation--dialog-min-inline-size, );
     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, );
     transform: var(--confirmation--dialog-scale, );
+    opacity: var(--confirmation--dialog-opacity, );
     position-anchor: --confirmation-dialog;
     position-area: center;
     overflow: clip;
@@ -1728,26 +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-min-inline-size: min(20rem, 80svw);
+    --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-min-inline-size: anchor-size();
+    --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

@@ -3,7 +3,8 @@ import { Snapshot } from '../../snapshot';
 import { CleanupRegistry } from '../class/cleanup-registry';
 import { default as $ } from './cash';
 import onoff from './onoff';
-function renderPlaceholder(el, role, titleKey) {
+const observing = new WeakMap();
+function ensurePlaceholder(el, role, titleKey) {
     // if (!el.isConnected) return
     // self.requestAnimationFrame(() => {
     //   if (!el.isConnected) return
@@ -47,11 +48,15 @@ function renderPlaceholder(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;
-    renderPlaceholder(target, role, overiderTitle);
+    ensurePlaceholder(target, role, overiderTitle);
+    if (observing.has(host))
+        observing.get(host)?.disconnect();
     CleanupRegistry.unregister(target, 'i18n');
-    CleanupRegistry.register(target, onoff('localechange', () => {
-        renderPlaceholder(target, role, overiderTitle);
-    }, I18n.on).on(), 'i18n');
+    CleanupRegistry.register(target, onoff('localechange', () => ensurePlaceholder(target, role, overiderTitle), I18n.on).on(), 'i18n');
+    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.32",
+  "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,11 +12,11 @@
 
       position: fixed;
 
-      inline-size: fit-content;
+      inline-size: var(--confirmation--dialog-inline-size, anchor-size());
       block-size: fit-content;
       height: auto; // safari
 
-      min-inline-size: var(--confirmation--dialog-min-inline-size,); //min(20rem, 80svw);
+      // min-inline-size: var(--confirmation--dialog-min-inline-size,);
 
       max-inline-size: var(--confirmation--dialog-max-inline-size,);
       max-block-size: var(--confirmation--dialog-max-block-size,);
@@ -25,6 +25,9 @@
       margin-inline: var(--confirmation--dialog-margin-inline,);
 
       transform: var(--confirmation--dialog-scale,);
+      // transform-origin: top left;
+
+      opacity: var(--confirmation--dialog-opacity,);
 
       position-anchor: --confirmation-dialog; // overriden
       position-area: center;
@@ -40,12 +43,14 @@
       gap: 1rem;
 
       // finally
-      --confirmation--dialog-scale: scale(0);
+      --confirmation--dialog-scale: scale(0.7);
+      --confirmation--dialog-opacity: 0.8;
     }
 
     &[open] {
       :where(&) {
-        --confirmation--dialog-min-inline-size: min(20rem, 80svw);
+        --confirmation--dialog-inline-size: min(20rem, 80vw);
+        // --confirmation--dialog-min-inline-size: min(20rem, 80svw);
 
         --confirmation--dialog-max-inline-size: min(20rem, 80vw);
         --confirmation--dialog-max-block-size: 80vh;
@@ -54,64 +59,26 @@
         --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-min-inline-size: anchor-size();
+        --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;
       }
     }
-
-    // SECTION: componentize
-    // > button {
-    //   :where(&) {
-    //     @include mixins.componentize(dialogbtn);
-    //   }
-    // }
-
-    // :where(&) {
-    //   --dialogbtnpadistart: 0.6rem;
-    //   --dialogbtnpadiend: 0.6rem;
-    //   --dialogbtnpadbstart: 0.6rem;
-    //   --dialogbtnpadbend: 0.6rem;
-    //   --dialogbtnradiustl: 1rem;
-    //   --dialogbtnradiustr: 1rem;
-    //   --dialogbtnradiusbl: 1rem;
-    //   --dialogbtnradiusbr: 1rem;
-    // }
   }
 }
-
-// @layer #{vars.$colors-layer} {
-//   // SECTION: componentize
-//   [is='confirmation-dialog'] {
-//     > button {
-//       @include mixins.add-focus-visible-state {
-//         --dialogbtnface: var(--dialogbtnhighlightface,);
-//         --dialogbtntext: var(--dialogbtnhighlighttext,);
-//       }
-//     }
-//   }
-// }
-
-// @layer #{vars.$ui-layer} {
-//   // SECTION: componentize
-//   [is='confirmation-dialog'] {
-//     > button {
-//       @include mixins.add-active-state {
-//         --dialogbtnface: var(--dialogbtnactiveface,);
-//         --dialogbtntext: var(--dialogbtnactivetext,);
-//       }
-//     }
-//   }
-// }

package/scss/transitions/_confirmation-dialog.scss

@@ -5,6 +5,15 @@
   @media (prefers-reduced-motion: no-preference) {
     [is='confirmation-dialog'] {
       :where(&) {
+        // transition:
+        //   inset var(--menu-animation-duration) allow-discrete ease-out,
+        //   width var(--menu-animation-duration) allow-discrete ease-out,
+        //   height var(--menu-animation-duration) allow-discrete ease-out,
+        //   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;
       }