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

package/generated/css/index.css

@@ -395,6 +395,20 @@
       font-size: 14px;
     }
   }
+  html {
+    font-family: var(--host--font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--host--font-feature-settings, normal);
+    font-variation-settings: var(--host--font-variation-settings, normal);
+  }
+  html:has(body > v-keyboard[system-font=Inter]) {
+    --host--font-family: Verdana, Inter, sans-serif;
+    --host--font-feature-settings: 'liga' 1, 'calt' 1;
+  }
+  @supports (font-variation-settings: normal) {
+    html:has(body > v-keyboard[system-font=Inter]) {
+      --host--font-family: Verdana, InterVariable, sans-serif;
+    }
+  }
   html::before {
     content: "delete-button-icon=trash&confirm-button-icon=check&close-button-icon=x&cancel-button-icon=x&ipad-sheet-view-height=27.75rem&ipad-sheet-view-inline-size=37rem&vt-fwd-class-name=fwd";
     display: none;
@@ -1699,7 +1713,7 @@
     inline-size: fit-content;
     block-size: fit-content;
     height: auto;
-    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, );
     margin-block: var(--confirmation--dialog-margin-block, );
@@ -1717,6 +1731,7 @@
     --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));
@@ -1729,6 +1744,7 @@
     }
   }
   :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/package.json

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

package/scss/base/_reboot.scss

@@ -115,6 +115,22 @@
     @media (pointer: fine) {
       font-size: 14px;
     }
+
+    font-family: var(--host--font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+
+    font-feature-settings: var(--host--font-feature-settings, normal);
+
+    font-variation-settings: var(--host--font-variation-settings, normal);
+
+    &:has(body > v-keyboard[system-font='Inter']) {
+      --host--font-family: Verdana, Inter, sans-serif;
+
+      --host--font-feature-settings: 'liga' 1, 'calt' 1;
+
+      @supports (font-variation-settings: normal) {
+        --host--font-family: Verdana, InterVariable, sans-serif;
+      }
+    }
   }
 
   // label {

package/scss/base/_root.scss

@@ -13,6 +13,10 @@
   :root {
     color-scheme: light dark;
 
+    // --font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+
+    // --font-variation-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+
     // --ipad-bp: #{vars.$ipad-portrait-bp};
 
     // --edge-inset-inline-start: 10px;

package/scss/components/_confirmation-dialog.scss

@@ -16,7 +16,7 @@
       block-size: fit-content;
       height: auto; // safari
 
-      min-inline-size: min(20rem, 80svw);
+      min-inline-size: var(--confirmation--dialog-min-inline-size,); //min(20rem, 80svw);
 
       max-inline-size: var(--confirmation--dialog-max-inline-size,);
       max-block-size: var(--confirmation--dialog-max-block-size,);
@@ -45,6 +45,8 @@
 
     &[open] {
       :where(&) {
+        --confirmation--dialog-min-inline-size: min(20rem, 80svw);
+
         --confirmation--dialog-max-inline-size: min(20rem, 80vw);
         --confirmation--dialog-max-block-size: 80vh;
 
@@ -61,6 +63,8 @@
 
     &[closing] {
       :where(&) {
+        --confirmation--dialog-min-inline-size: anchor-size();
+
         --confirmation--dialog-max-inline-size: anchor-size();
         --confirmation--dialog-max-block-size: anchor-size();