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

package/generated/css/index.css

@@ -874,6 +874,7 @@
   }
   :where([is=glass-prominent-button] > [slot], [is=glass-button] > [slot], [is=bordered-prominent-button] > [slot], [is=bordered-button] > [slot], [is=borderless-button] > [slot], [is=plain-button] > [slot]) {
     position: absolute;
+    inset: 0;
     visibility: collapse;
   }
   :where([is=glass-prominent-button] > [slot=overlay], [is=glass-button] > [slot=overlay], [is=bordered-prominent-button] > [slot=overlay], [is=bordered-button] > [slot=overlay], [is=borderless-button] > [slot=overlay], [is=plain-button] > [slot=overlay]) {
@@ -1699,8 +1700,8 @@
     block-size: fit-content;
     height: auto;
     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, );
     transform: var(--confirmation--dialog-scale, );
@@ -1716,6 +1717,8 @@
     --confirmation--dialog-scale: scale(0);
   }
   :where([is=confirmation-dialog][open]) {
+    --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);
@@ -1726,6 +1729,8 @@
     }
   }
   :where([is=confirmation-dialog][closing]) {
+    --confirmation--dialog-max-inline-size: anchor-size();
+    --confirmation--dialog-max-block-size: anchor-size();
     --confirmation--dialog-scale: scale(0);
   }
 }
@@ -2113,6 +2118,7 @@
   }
   :where(tool-bar-item > button > [slot]) {
     position: absolute;
+    inset: 0;
     visibility: collapse;
   }
   :where(tool-bar-item > button > [slot=overlay]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.28",
+  "version": "0.0.0-dev.29",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -71,8 +71,8 @@
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
     "test": "vitest --dom",
-    "predeploy": "rm -rf generated",
-    "deploy": "npm run build:ts && npm run build:scss",
+    "prepackage": "rm -rf generated",
+    "package": "npm run build:ts && npm run build:scss",
     "version:pkg": "npm version $npm_config_bump --no-git-tag-version --preid=dev"
   },
   "devDependencies": {

package/scss/components/_confirmation-dialog.scss

@@ -18,10 +18,8 @@
 
       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,);
+      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,);
@@ -47,8 +45,8 @@
 
     &[open] {
       :where(&) {
-        // --confirmation--dialog-max-inline-size: 100vw;
-        // --confirmation--dialog-max-block-size: 100vh;
+        --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));
@@ -63,8 +61,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/mixins/_button.scss

@@ -4,6 +4,8 @@
       // take over NOTE: NO other propsm they break grids!! KISS pos+visibility+opacity
       position: absolute;
 
+      inset: 0;
+
       visibility: collapse;
     }
   }

package/scss/transitions/_confirmation-dialog.scss

@@ -5,12 +5,6 @@
   @media (prefers-reduced-motion: no-preference) {
     [is='confirmation-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;
       }