@swiftwc/ui 0.0.0-dev.98 → 1.0.0-canary.0

package/scss/components/_progress-view.scss

@@ -11,7 +11,7 @@
   initial-value: 0;
 }
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   progress-view {
     :where(&) {
       transition: --progress-view-style-index 1ms step-start;

package/scss/components/_scroll-view-proxy.scss

@@ -3,7 +3,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   // NOTE: A wrapper to {hv}-stack
   scroll-view-proxy {
     :where(&) {

package/scss/components/_scroll-view-toolbars.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   scroll-view {
     :where(&) {
       &::part(scroll-view-navbar),

package/scss/components/_scroll-view.scss

@@ -1,12 +1,12 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   scroll-view {
     navigation-stack > &,
     navigation-split-view > &,
     [is='sidebar-view'] > &,
-    body-view > &,
+    content-view > &,
     [is='full-screen'] > &,
     [is='sheet-view'] > & {
       &:has(~ tool-bar > [slot^='top-bar']),

package/scss/components/_search-view.scss

@@ -2,7 +2,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='search-view'] {
     :where(&) {
       height: 30px;

package/scss/components/_section-view.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   section-view {
     :where(&) {
       grid-template-columns: minmax(0, 1fr);

package/scss/components/_sheet-view.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='sheet-view'] {
     :where(&) {
       @include mixins.reset-dialog;
@@ -66,7 +66,7 @@
           :where(&) {
             overflow: visible;
           }
-          scroll-view:has(~ body-view) {
+          scroll-view:has(~ content-view) {
             &,
             & ~ tool-bar {
               :where(&) {

package/scss/components/_sidebar-toggle.scss

@@ -19,7 +19,7 @@
   }
 }
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   sidebar-toggle {
     tab-view:not([tab-view-style='tab-bar-only']) > &, // this is landscape toggle
     navigation-split-view > & {

package/scss/components/_sidebar-view.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='sidebar-view'] {
     :where(&) {
       @include mixins.reset-dialog;
@@ -44,7 +44,7 @@
   }
 }
 
-@layer #{vars.$final-layer} {
+@layer #{vars.$framework-layer}.#{vars.$final-layer} {
   [is='sidebar-view'] {
     :where(&[open]) {
       margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-inline-spacing));

package/scss/components/_sticky-container.scss

@@ -6,7 +6,7 @@
   initial-value: 0;
 }
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   sticky-container {
     :where(&) {
       container-type: scroll-state;

package/scss/components/_tab-bar.scss

@@ -139,7 +139,7 @@
   }
 }
 
-@layer #{vars.$tab-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$tab-components-layer} {
   [is='tab-bar'] {
     :where(&) {
       @include mixins.reset-dialog;

package/scss/components/_tab-item.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$tab-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$tab-components-layer} {
   [is='tab-item'] {
     :where(&) {
       //

package/scss/components/_tab-view.scss

@@ -18,7 +18,7 @@
   scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
     #{$selector} navigation-stack > &,
     #{$selector} navigation-split-view > &,
-    #{$selector} body-view > & {
+    #{$selector} content-view > & {
       &,
       & ~ tool-bar {
         :where(&) {
@@ -41,7 +41,7 @@
   scroll-view:not(:has(~ tool-bar > [slot^='bottom-bar'])):not(:has(> [slot^='bottom-bar'])) {
     :where(#{$selector} navigation-stack > &),
     :where(#{$selector} navigation-split-view > &),
-    :where(#{$selector} body-view > &) {
+    :where(#{$selector} content-view > &) {
       --safe-area-inset-bottom: calc(max(env(safe-area-inset-bottom), var(--sidebar-block-spacing)) + var(--iphone-tabbar-block-size));
     }
 
@@ -64,7 +64,7 @@
   scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
     #{$selector} navigation-stack > &,
     #{$selector} navigation-split-view > &,
-    #{$selector} body-view > & {
+    #{$selector} content-view > & {
       &,
       & ~ tool-bar {
         :where(&) {
@@ -78,7 +78,7 @@
   }
 }
 
-@layer #{vars.$tab-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$tab-components-layer} {
   tab-view {
     // // more navstack is only for portrait mobile!
     // & > navigation-stack > scroll-view:has(~ navigation-split-view) {
@@ -90,6 +90,14 @@
     //   }
     // }
 
+    // &:not(:defined),
+    // &:has(label-view:not(:defined)) {
+    //   :where(&) {
+    //     visibility: hidden;
+    //     // background-color: green;
+    //   }
+    // }
+
     :where(&) {
       grid-template-columns: subgrid; // inherits columns from container
       grid-template-rows: subgrid; // inherits rows if needed
@@ -138,7 +146,7 @@
     scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
       tab-view:not([tab-view-style='tab-bar-only']) navigation-stack > &,
       tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view > &,
-      tab-view:not([tab-view-style='tab-bar-only']) body-view > & {
+      tab-view:not([tab-view-style='tab-bar-only']) content-view > & {
         &,
         & ~ tool-bar {
           :where(&) {
@@ -205,7 +213,7 @@
       // DISCARDS
       @include mixins.if-2col-split-view-fits {
         &:not(:has(> [is='sidebar-view'])) {
-          > body-view {
+          > content-view {
             scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
               @include mixins.discard-sidebar-measures;
             }
@@ -214,7 +222,7 @@
         &:has(> [is='sidebar-view']) {
           &:not([column-visibility='double-column']) {
             &:not([preferred-compact-column='content']) {
-              > body-view {
+              > content-view {
                 scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
                   @include mixins.discard-sidebar-measures;
                 }
@@ -222,8 +230,8 @@
             }
             &[preferred-compact-column='content'] {
               @include mixins.ifnot-3col-split-view-fits {
-                > body-view {
-                  > body-view {
+                > content-view {
+                  > content-view {
                     scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
                       @include mixins.discard-sidebar-measures;
                     }
@@ -232,7 +240,7 @@
               }
             }
             @include mixins.if-3col-split-view-fits {
-              > body-view {
+              > content-view {
                 scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
                   @include mixins.discard-sidebar-measures;
                 }
@@ -240,7 +248,7 @@
             }
           }
           &[column-visibility='double-column'] {
-            > body-view {
+            > content-view {
               scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
                 @include mixins.discard-sidebar-measures;
               }
@@ -264,7 +272,7 @@
       &:not(:has(> [is='sidebar-view'])) {
         --nav-split-view--content-inline-size: calc(var(--nav-split-view-content-inline-size) + var(--sidebar-inline-size, 0px));
 
-        > body-view {
+        > content-view {
           --sidebar-inline-size: 0px;
           --sidebar-inline-spacing: 0px;
         }
@@ -274,7 +282,7 @@
     scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
       tab-view:not([tab-view-style='tab-bar-only']) navigation-stack > &,
       tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view > &,
-      tab-view:not([tab-view-style='tab-bar-only']) body-view > & {
+      tab-view:not([tab-view-style='tab-bar-only']) content-view > & {
         &,
         & ~ tool-bar {
           :where(&) {
@@ -289,7 +297,7 @@
     //   --nav-split-view--content-inline-size: calc(var(--nav-split-view-content-inline-size) + var(--sidebar-inline-size, 0px));
     // }
     // scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
-    //   tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view:not(:has(> [is='sidebar-view'])) > body-view & {
+    //   tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view:not(:has(> [is='sidebar-view'])) > content-view & {
     //     &,
     //     & ~ tool-bar {
     //       :where(&) {
@@ -301,7 +309,7 @@
   }
 }
 
-@layer #{vars.$final-layer} {
+@layer #{vars.$framework-layer}.#{vars.$final-layer} {
   @media (pointer: fine) {
     @include make-ipad-tabview("tab-view[tab-view-style='tab-bar-only']");
   }

package/scss/components/_table-column.scss

@@ -4,7 +4,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='table-column'] {
     :where(&) {
       column-gap: var(--table-accessory-gap);

package/scss/components/_table-row.scss

@@ -4,7 +4,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='table-row'] {
     :where(&) {
       row-gap: var(--table-row-gap);

package/scss/components/_table-view.scss

@@ -52,7 +52,7 @@ $table-elses: (
   --list--accessories-display: grid,
 );
 
-@layer #{vars.$list-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$list-components-layer} {
   table-view {
     &:not(& &, list-view &, [is='form-view'] &) {
       @extend %list;

package/scss/components/_text-field.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   text-field {
     :where(&) {
       grid-template-columns: minmax(0, 1fr);

package/scss/components/_text-view.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   text-view {
     :where(&) {
       //

package/scss/components/_toggle-view.scss

@@ -2,14 +2,29 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   toggle-view {
     :where(&) {
       grid-template-columns: minmax(0, 1fr);
 
       grid-template-rows: minmax(0, 1fr);
 
-      --toggle--trigger-bg: lightgray;
+      --toggle--track-padding: 0.2rem;
+      --toggle--track-bg: var(--toggle--track-off-bg);
+
+      --toggle--track-inline-size: var(--toggle-inline-size);
+
+      --toggle--dot-size: var(--toggle-block-size);
+
+      --toggle--dot-inset-inline-start: 0;
+      --toggle--dot-inset-inline-end: 100%;
+
+      --toggle--dot-translate-x: 0px;
+
+      --toggle--dot-transition-duration: 200ms;
+      --toggle--dot-scale: scale(1);
+
+      // --toggle--track-brightness: brightness(1);
 
       &::part(toggle-stack) {
         grid-template-columns: minmax(0, 1fr) auto;
@@ -30,50 +45,79 @@
         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(--toggle-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;
-        inline-size: 4rem;
-        block-size: 1rem;
-        background: var(--toggle--trigger-bg);
+        outline: none;
 
-        // appearance: none;
+        border-radius: var(--pill-border-radius);
 
-        // border: 0;
+        inline-size: var(--toggle--track-inline-size);
+        block-size: var(--toggle--dot-size);
 
-        // outline: 0;
+        touch-action: none; // prevent scrolling while dragging
 
-        // padding: 0;
+        transition: background-color var(--toggle--dot-transition-duration) ease-out;
 
-        // background-color: transparent;
-      }
+        &:focus {
+          --toggle--dot-bg: light-dark(var(--toggle-dot-focus-bg), var(--toggle-dot-focus-bg-dark));
+
+          // outline: black solid 2px;
+          // outline-offset: 4px;
+          // --toggle--track-bg: gray;
+          // --toggle--track-brightness: brightness(0.9);
+        }
+        &:active {
+          --toggle--dot-bg: light-dark(var(--toggle-dot-active-bg), var(--toggle-dot-active-bg-dark));
+        }
+
+        &::before {
+          content: '';
 
-      &::part(toggle-form-input)::before {
-        content: '';
+          display: grid;
 
-        display: grid;
+          position: absolute;
 
-        position: absolute;
-        inset: 0 auto auto 0;
-        inline-size: 1rem;
-        block-size: 1rem;
-        border-radius: 1rem;
-        // background: yellow;
+          inset: 0 var(--toggle--dot-inset-inline-end) auto var(--toggle--dot-inset-inline-start);
 
-        backdrop-filter: var(--liquid-glass-backdrop-filter);
+          inline-size: var(--toggle--dot-size);
+          block-size: var(--toggle--dot-size);
 
-        box-shadow: var(--liquid-glass-box-shadow);
+          border-radius: var(--toggle-border-radius);
+
+          backdrop-filter: var(--liquid-glass-backdrop-filter);
+
+          box-shadow: var(--toggle-dot-box-shadow);
+
+          background: var(--toggle--dot-bg);
+
+          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, 200ms) ease-out;
+
+          transform: translateX(var(--toggle--dot-translate-x));
+          scale: var(--toggle--dot-scale,);
+
+          transform-origin: center;
+        }
       }
     }
 
@@ -85,7 +129,20 @@
 
     &[aria-checked='true'] {
       :where(&) {
-        --toggle--trigger-bg: green;
+        --toggle--track-bg: var(--toggle--track-on-bg);
+
+        --toggle--dot-inset-inline-start: calc(100% - var(--toggle--dot-size));
+        --toggle--dot-inset-inline-end: 0;
+
+        &::window-inactive {
+          --toggle--track-bg: var(--toggle--track-off-bg);
+        }
+      }
+
+      &[js-window-inactive] {
+        :where(&) {
+          --toggle--track-bg: var(--toggle--track-off-bg);
+        }
       }
     }
 
@@ -102,6 +159,7 @@
         // }
       }
     }
+
     &:not(form &) {
       > :nth-child(n + 2 of [slot='label']) {
         :where(&) {

package/scss/components/_tool-bar-item-group.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   tool-bar-item-group {
     :where(&) {
       // pointer-events: all;

package/scss/components/_tool-bar-item.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   tool-bar-item {
     :where(&) {
       // moved from > * of old
@@ -88,7 +88,7 @@
   }
 }
 
-@layer #{vars.$ui-layer} {
+@layer #{vars.$framework-layer}.#{vars.$ui-layer} {
   :where(tool-bar-item[slot]:has(menu-view[open])),
   :where(tool-bar-item-group:has(> tool-bar-item menu-view[open])) {
     --toolbar-cell-scale: var(--menu-host-offscreen-transform);

package/scss/components/_tool-bar.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   tool-bar {
     :where(&) {
       pointer-events: none;
@@ -136,7 +136,7 @@
   }
 }
 
-// @layer #{vars.$final-layer} {
+// @layer #{vars.$framework-layer}.#{vars.$final-layer} {
 //   tool-bar-item[slot^='top-bar'],
 //   tool-bar-item-group[slot^='top-bar'] {
 //     :where(& menu-view, & tool-bar-item-group[slot^='top-bar'] menu-view)::part(menu-dialog) {

package/scss/components/_v-divider.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   v-divider {
     :where(&) {
       inline-size: 1px;

package/scss/components/_v-flex-stack.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   v-flex-stack {
     :where(&) {
       display: flex;
@@ -8,6 +8,8 @@
 
       place-items: center;
       place-content: center;
+
+      gap: 1rem;
     }
 
     :where(& > *) {

package/scss/components/_v-keyboard.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   v-keyboard {
     :where(&) {
       position: fixed;

package/scss/components/_v-stack.scss

@@ -4,7 +4,7 @@
 @use '../maps';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   v-stack {
     :where(&) {
       grid-template-columns: minmax(0, 1fr);

package/scss/final/_touch-glass.scss

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

package/scss/mixins/_index.scss

@@ -325,13 +325,13 @@
       @content;
     }
     // is content-view!
-    navigation-split-view:has(> [is='sidebar-view'])[preferred-compact-column='content']:not([column-visibility='double-column']) > body-view > scroll-view & {
+    navigation-split-view:has(> [is='sidebar-view'])[preferred-compact-column='content']:not([column-visibility='double-column']) > content-view > scroll-view & {
       @content;
     }
   }
   // is content-view!
   @include if-3col-split-view-fits {
-    navigation-split-view:has(> [is='sidebar-view']):not([column-visibility='double-column']) > body-view > scroll-view & {
+    navigation-split-view:has(> [is='sidebar-view']):not([column-visibility='double-column']) > content-view > scroll-view & {
       @content;
     }
   }

package/scss/placeholders/_buttons.scss

@@ -2,7 +2,7 @@
 @use '../maps';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   %button {
     :where(&) {
       place-items: center;
@@ -55,7 +55,7 @@
   }
 }
 
-@layer #{vars.$colors-layer} {
+@layer #{vars.$framework-layer}.#{vars.$colors-layer} {
   // SECTION: componentize
   %button {
     @include mixins.add-focus-visible-state {
@@ -69,7 +69,7 @@
   }
 }
 
-// @layer #{vars.$utils-layer} {
+// @layer #{vars.$framework-layer}.#{vars.$utils-layer} {
 //   %button {
 //     > [slot] {
 //       :where(&) {
@@ -89,7 +89,7 @@
 //   }
 // }
 
-@layer #{vars.$ui-layer} {
+@layer #{vars.$framework-layer}.#{vars.$ui-layer} {
   // SECTION: componentize
   %button {
     @include mixins.add-active-state {
@@ -99,7 +99,7 @@
   }
 }
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     %button {
       :where(&) {