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

package/generated/components/bordered-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { buttonRole, onoff } from '../internal/utils';
+import { ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -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'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

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

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { buttonRole, onoff } from '../internal/utils';
+import { ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -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'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

package/generated/components/borderless-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { buttonRole, onoff } from '../internal/utils';
+import { ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -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'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

package/generated/components/glass-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { buttonRole, onoff, touchGlass } from '../internal/utils';
+import { ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -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'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

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

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { buttonRole, onoff, touchGlass } from '../internal/utils';
+import { ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -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'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

package/generated/components/tool-bar-item.d.ts

@@ -1,7 +1,8 @@
 export declare class ToolBarItem extends HTMLElement {
+    #private;
     static get observedAttributes(): string[];
     constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
+    connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

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

@@ -1,13 +1,19 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { buttonRole, onoff, touchGlass } from '../internal/utils';
+import { ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 export class ToolBarItem extends HTMLElement {
     static get observedAttributes() {
         return ['slot', 'data-previous-slot', 'title-key'];
     }
+    #mutationObserver;
     constructor() {
         super();
     }
+    disconnectedCallback() {
+        console.debug(`${ToolBarItem.name} ⚡️ disconnect`);
+        this.#mutationObserver?.disconnect();
+        CleanupRegistry.unregister(this);
+    }
     connectedCallback() {
         console.debug(`${ToolBarItem.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, (evt) => {
@@ -32,20 +38,25 @@ export class ToolBarItem extends HTMLElement {
         //   ) // Initial check
         // })
     }
-    disconnectedCallback() {
-        console.debug(`${ToolBarItem.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(this);
-    }
     attributeChangedCallback(name, oldValue, newValue) {
         console.debug(`${ToolBarItem.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'slot':
             case 'data-previous-slot':
             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))
+                this.#mutationObserver?.disconnect();
+                const role = this.getAttribute('data-previous-slot') ?? this.getAttribute('slot') ?? '', tKey = this.getAttribute('title-key');
+                if (['confirmation-action', 'cancellation-action'].includes(role))
                     Snapshot.waitReady.then(() => {
-                        buttonRole(target, nv, this.getAttribute('title-key'));
+                        ensurePlaceholder(this.querySelector(':scope>button'), role, tKey);
+                        this.#mutationObserver = new MutationObserver((mutations) => {
+                            for (const { target } of mutations)
+                                if (target instanceof HTMLElement && target)
+                                    ensurePlaceholder(this.querySelector(':scope>button'), role, tKey);
+                        });
+                        this.#mutationObserver.observe(this, {
+                            childList: true,
+                        });
                     });
                 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/ensure-placeholder.d.ts

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

package/generated/internal/utils/{button-role.js → ensure-placeholder.js}

@@ -1,10 +1,7 @@
 import { I18n } from '../../i18n';
 import { Snapshot } from '../../snapshot';
-import { CleanupRegistry } from '../class/cleanup-registry';
 import { default as $ } from './cash';
-import onoff from './onoff';
-const observing = new WeakMap();
-function ensurePlaceholder(el, role, titleKey) {
+function renderPlaceholder(el, role, titleKey) {
     // if (!el.isConnected) return
     // self.requestAnimationFrame(() => {
     //   if (!el.isConnected) return
@@ -49,14 +46,10 @@ function ensurePlaceholder(el, role, titleKey) {
     // })
 }
 export default function (target, role, titleKey) {
+    if (!target)
+        return;
     const overiderTitle = typeof titleKey === 'string' && titleKey in I18n.t('ButtonRole') ? titleKey : undefined;
-    ensurePlaceholder(target, role, overiderTitle);
-    if (observing.has(target))
-        observing.get(target)?.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, {
-        childList: true,
-    });
+    renderPlaceholder(target, role, overiderTitle);
+    // CleanupRegistry.unregister(target, 'i18n')
+    // CleanupRegistry.register(target, onoff('localechange', () => renderPlaceholder(target, role, overiderTitle), I18n.on).on(), 'i18n')
 }

package/generated/internal/utils/index.d.ts

@@ -1,6 +1,6 @@
 import cash from './cash';
 export { default as add } from './add';
-export { default as buttonRole } from './button-role';
+export { default as ensurePlaceholder } from './ensure-placeholder';
 export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';

package/generated/internal/utils/index.js

@@ -1,7 +1,7 @@
 // import * as _intl from './intl'
 import cash from './cash';
 export { default as add } from './add';
-export { default as buttonRole } from './button-role';
+export { default as ensurePlaceholder } from './ensure-placeholder';
 export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.33",
+  "version": "0.0.0-dev.35",
   "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;
       }
     }
   }

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

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