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

package/generated/css/index.css

@@ -1710,10 +1710,9 @@
     color: var(--text, );
     touch-action: none;
     position: fixed;
-    inline-size: fit-content;
+    inline-size: max-content;
     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, );
@@ -1731,7 +1730,6 @@
     --confirmation--dialog-scale: scale(0);
   }
   :where([is=confirmation-dialog][open]) {
-    --confirmation--dialog-min-inline-size: min(20rem, 80svw);
     --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));
@@ -1744,7 +1742,6 @@
     }
   }
   :where([is=confirmation-dialog][closing]) {
-    --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);

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
@@ -49,9 +50,13 @@ function renderPlaceholder(el, role, titleKey) {
 }
 export default function (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(target))
+        observing.get(target)?.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(target, new MutationObserver(() => ensurePlaceholder(target, role, overiderTitle)));
+    observing.get(target)?.observe(target, {
+        childList: true,
+    });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.32",
+  "version": "0.0.0-dev.33",
   "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: max-content;
       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,7 @@
       margin-inline: var(--confirmation--dialog-margin-inline,);
 
       transform: var(--confirmation--dialog-scale,);
+      // transform-origin: top left;
 
       position-anchor: --confirmation-dialog; // overriden
       position-area: center;
@@ -45,7 +46,7 @@
 
     &[open] {
       :where(&) {
-        --confirmation--dialog-min-inline-size: min(20rem, 80svw);
+        // --confirmation--dialog-min-inline-size: min(20rem, 80svw);
 
         --confirmation--dialog-max-inline-size: min(20rem, 80vw);
         --confirmation--dialog-max-block-size: 80vh;
@@ -63,7 +64,7 @@
 
     &[closing] {
       :where(&) {
-        --confirmation--dialog-min-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();
@@ -71,47 +72,5 @@
         --confirmation--dialog-scale: scale(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;
       }