@swiftwc/ui 0.0.0-dev.97 → 0.0.0-dev.99

package/package.json

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

package/scss/components/_index.scss

@@ -56,6 +56,7 @@
     }
   }
 
+  :where(labeled-content)::part(labeled-content-container),
   :where(labeled-content)::part(labeled-content-container),
   :where(labeled-content)::part(labeled-content-label-stack),
   :where(labeled-content)::part(labeled-content-value-stack),

package/scss/components/_toggle-view.scss

@@ -9,7 +9,19 @@
 
       grid-template-rows: minmax(0, 1fr);
 
-      --toggle--trigger-bg: lightgray;
+      --toggle--track-padding: 0.2rem;
+      --toggle--track-bg: lightgray;
+
+      --toggle--dot-size: 1.4rem;
+
+      --toggle--dot-inset-inline-start: 0;
+      --toggle--dot-inset-inline-end: 100%;
+
+      --toggle--dot-x: 0px;
+      --toggle--dot-transition-duration: 200ms;
+      --toggle--dot-scale: scale(1);
+
+      --toogle--track-brightness: brightness(1);
 
       &::part(toggle-stack) {
         grid-template-columns: minmax(0, 1fr) auto;
@@ -30,50 +42,73 @@
         justify-items: end;
 
         place-content: stretch;
-      }
+        align-self: flex-start;
+
+        cursor: pointer;
 
-      &::part(toggle-form-input):focus {
-        outline: blue solid 5px;
+        padding-inline: var(--toggle--track-padding);
+        padding-block: var(--toggle--track-padding);
+        border-radius: var(--pill-border-radius);
+        background: var(--toggle--track-bg);
+
+        transition: background-color var(--toggle--dot-transition-duration) ease-out;
       }
 
-      &::part(toggle-form-input) {
+      &::part(toggle-track) {
+        container: toggle-track / size;
+
         text-align: end;
 
         position: relative;
 
-        display: grid;
-        outline: red solid 3px;
-        border-radius: 2rem;
+        outline: none;
+
+        // display: grid;
+        // outline: red solid 3px;
+        border-radius: var(--pill-border-radius);
         inline-size: 4rem;
-        block-size: 1rem;
-        background: var(--toggle--trigger-bg);
+        block-size: var(--toggle--dot-size);
+        // background: var(--toggle--track-bg);
 
-        // appearance: none;
+        filter: var(--toogle--track-brightness,);
 
-        // border: 0;
+        transition: background-color var(--toggle--dot-transition-duration) ease-out;
 
-        // outline: 0;
+        touch-action: none; // prevent scrolling while dragging
 
-        // padding: 0;
+        &:focus {
+          // outline: blue solid 5px;
+          // --toggle--track-bg: gray;
 
-        // background-color: transparent;
-      }
+          --toogle--track-brightness: brightness(0.9);
+        }
+
+        &::before {
+          content: '';
 
-      &::part(toggle-form-input)::before {
-        content: '';
+          display: grid;
 
-        display: grid;
+          position: absolute;
+          inset: 0 var(--toggle--dot-inset-inline-end) auto var(--toggle--dot-inset-inline-start);
+          inline-size: var(--toggle--dot-size);
+          block-size: var(--toggle--dot-size);
+          border-radius: var(--pill-border-radius);
 
-        position: absolute;
-        inset: 0 auto auto 0;
-        inline-size: 1rem;
-        block-size: 1rem;
-        border-radius: 1rem;
-        // background: yellow;
+          backdrop-filter: var(--liquid-glass-backdrop-filter);
 
-        backdrop-filter: var(--liquid-glass-backdrop-filter);
+          box-shadow: var(--liquid-glass-box-shadow);
 
-        box-shadow: var(--liquid-glass-box-shadow);
+          transition:
+            inset-inline-start var(--toggle--dot-transition-duration) ease-out,
+            inset-inline-end var(--toggle--dot-transition-duration) ease-out,
+            transform var(--toggle--dot-transition-duration) ease-out,
+            scale var(--toggle--dot-press-duration) ease-out;
+
+          transform: translateX(var(--toggle--dot-x));
+          scale: var(--toggle--dot-scale,);
+
+          transform-origin: center;
+        }
       }
     }
 
@@ -85,7 +120,10 @@
 
     &[aria-checked='true'] {
       :where(&) {
-        --toggle--trigger-bg: green;
+        --toggle--track-bg: green;
+
+        --toggle--dot-inset-inline-start: calc(100% - var(--toggle--dot-size));
+        --toggle--dot-inset-inline-end: 0;
       }
     }
 

package/scss/final/_touch-glass.scss

@@ -2,6 +2,13 @@
 @use '../mixins';
 
 @layer #{vars.$final-layer} {
+  toggle-view {
+    :where(&[touch-glass]) {
+      --toggle--dot-scale: 1.22;
+      --toggle--dot-press-duration: 100ms;
+    }
+  }
+
   @media (pointer: coarse) {
     [is='glass-button'],
     [is='glass-prominent-button'] {

package/scss/utils/_frame.scss

@@ -16,9 +16,15 @@ $self-map: (
     max-inline-size: 100%;
   }
   @for $i from 0 through 100 {
+    :where([frame\:width='#{$i}']) {
+      max-inline-size: #{$i}rem;
+    }
     :where([frame\:max-width='#{$i}']) {
       max-inline-size: #{$i}rem;
     }
+    :where([frame\:width='#{$i}cqi']) {
+      max-inline-size: #{$i}cqi;
+    }
     :where([frame\:max-width='#{$i}cqi']) {
       max-inline-size: #{$i}cqi;
     }
@@ -52,53 +58,6 @@ $self-map: (
     }
   }
 
-  // :where([frame\:alignment='top']) {
-  //   align-self: start;
-  // }
-  // :where([frame\:alignment='leading']) {
-  //   justify-self: start;
-  // }
-
-  // :where([frame-width='infinity']) {
-  //   place-items: stretch; //justify-self: stretch;
-  // }
-  // :where([frame-alignment='leading']) {
-  //   align-self: start;
-  // }
-  // :where([frame-alignment='center']) {
-  //   align-self: center;
-  // }
-  // :where([frame-alignment='trailing']) {
-  //   align-self: end;
-  // }
-  // :where([alignment='start']) {
-  //   place-items: start;
-  // }
-  // :where([alignment='fill']) {
-  //   place-items: stretch;
-  // }
-  // :where([content='start']) {
-  //   place-content: start;
-  // }
-  // :where([justify-content='start']) {
-  //   justify-content: start;
-  // }
-  // :where([justify-content='start']) {
-  //   justify-content: start;
-  // }
-  // :where([spacer='top']) {
-  //   margin-top: auto;
-  // }
-  // :where([distribution='start']) {
-  //   place-content: start;
-  // }
-  // :where([distribution='space-between']) {
-  //   place-content: space-between;
-  // }
-  // :where(spacer) {
-  //   margin: auto;
-  // }
-
   @media (prefers-reduced-motion: no-preference) {
     :where([slow]) {
       visibility: visible;
@@ -124,3 +83,21 @@ $self-map: (
     }
   }
 }
+
+@layer #{vars.$components-layer} {
+  // readable 2/2
+  v-stack {
+    :where(&[readable]) {
+      inline-size: 100%; //->[frame\:width='infinity']
+      justify-self: center; //->[frame\:alignment='center'];
+    }
+    @for $i from 0 through 100 {
+      :where(&[readable='#{$i}']) {
+        max-inline-size: #{$i}rem; //->[frame:max-width='{length}'`]
+      }
+      :where(&[readable='#{$i}cqi']) {
+        max-inline-size: #{$i}cqi; //->[frame:max-width='{length}'`]
+      }
+    }
+  }
+}

package/scss/utils/_stacks.scss

@@ -41,7 +41,7 @@
   h-flex-stack {
     // block dir for items+content
     @each $k, $declarations in maps.$block-map {
-      &[distribution='#{$k}'] {
+      :where(&[distribution='#{$k}']) {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
@@ -50,7 +50,7 @@
 
     // inline dir for items+content
     @each $k, $declarations in maps.$inline-map {
-      &[alignment='#{$k}'] {
+      :where(&[alignment='#{$k}']) {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
@@ -59,7 +59,7 @@
 
     // placement="leading fill" -> shortcut for distribution="leading" alignment="fill"
     @each $k, $declarations in maps.$block-placement-map {
-      &[placement='#{$k}'] {
+      :where(&[placement='#{$k}']) {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')};
         }
@@ -99,3 +99,14 @@
     }
   }
 }
+
+@layer #{vars.$components-layer} {
+  // readable 1/2
+  v-stack {
+    :where(&[readable]) {
+      @each $decl in map.get(maps.$block-placement-map, 'leading fill') {
+        #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //->[placement='leading fill']->[distribution='leading'][alignment='fill']
+      }
+    }
+  }
+}