@swiftwc/ui 0.0.0-dev.99 → 1.0.0-canary.1

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,7 +2,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   toggle-view {
     :where(&) {
       grid-template-columns: minmax(0, 1fr);
@@ -10,18 +10,21 @@
       grid-template-rows: minmax(0, 1fr);
 
       --toggle--track-padding: 0.2rem;
-      --toggle--track-bg: lightgray;
+      --toggle--track-bg: var(--toggle--track-off-bg);
 
-      --toggle--dot-size: 1.4rem;
+      --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-x: 0px;
+      --toggle--dot-translate-x: 0px;
+
       --toggle--dot-transition-duration: 200ms;
       --toggle--dot-scale: scale(1);
 
-      --toogle--track-brightness: brightness(1);
+      // --toggle--track-brightness: brightness(1);
 
       &::part(toggle-stack) {
         grid-template-columns: minmax(0, 1fr) auto;
@@ -48,7 +51,7 @@
 
         padding-inline: var(--toggle--track-padding);
         padding-block: var(--toggle--track-padding);
-        border-radius: var(--pill-border-radius);
+        border-radius: var(--toggle-border-radius);
         background: var(--toggle--track-bg);
 
         transition: background-color var(--toggle--dot-transition-duration) ease-out;
@@ -63,24 +66,25 @@
 
         outline: none;
 
-        // display: grid;
-        // outline: red solid 3px;
         border-radius: var(--pill-border-radius);
-        inline-size: 4rem;
+
+        inline-size: var(--toggle--track-inline-size);
         block-size: var(--toggle--dot-size);
-        // background: var(--toggle--track-bg);
 
-        filter: var(--toogle--track-brightness,);
+        touch-action: none; // prevent scrolling while dragging
 
         transition: background-color var(--toggle--dot-transition-duration) ease-out;
 
-        touch-action: none; // prevent scrolling while dragging
-
         &:focus {
-          // outline: blue solid 5px;
-          // --toggle--track-bg: gray;
+          --toggle--dot-bg: light-dark(var(--toggle-dot-focus-bg), var(--toggle-dot-focus-bg-dark));
 
-          --toogle--track-brightness: brightness(0.9);
+          // 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 {
@@ -89,22 +93,27 @@
           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);
+
+          border-radius: var(--toggle-border-radius);
 
           backdrop-filter: var(--liquid-glass-backdrop-filter);
 
-          box-shadow: var(--liquid-glass-box-shadow);
+          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) ease-out;
+            scale var(--toggle--dot-press-duration, 200ms) ease-out;
 
-          transform: translateX(var(--toggle--dot-x));
+          transform: translateX(var(--toggle--dot-translate-x));
           scale: var(--toggle--dot-scale,);
 
           transform-origin: center;
@@ -120,10 +129,20 @@
 
     &[aria-checked='true'] {
       :where(&) {
-        --toggle--track-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);
+        }
       }
     }
 
@@ -140,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,9 +1,9 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$final-layer} {
+@layer #{vars.$framework-layer}.#{vars.$final-layer} {
   toggle-view {
-    :where(&[touch-glass]) {
+    :where(&[touch-glass])::part(toggle-track) {
       --toggle--dot-scale: 1.22;
       --toggle--dot-press-duration: 100ms;
     }

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(&) {

package/scss/placeholders/_lists.scss

@@ -3,7 +3,7 @@
 
 $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker-view, menu-view, menu-view *, whatever-name)';
 
-@layer #{vars.$list-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$list-components-layer} {
   %list {
     :where(&) {
       background-color: var(--list--host-background-color,);
@@ -560,7 +560,7 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
   }
 }
 
-@layer #{vars.$colors-layer} {
+@layer #{vars.$framework-layer}.#{vars.$colors-layer} {
   // componentize
   %list {
     > #{$list-item-selector},
@@ -582,7 +582,7 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
   }
 }
 
-@layer #{vars.$ui-layer} {
+@layer #{vars.$framework-layer}.#{vars.$ui-layer} {
   // componentize
   %list {
     > #{$list-item-selector},

package/scss/transitions/_alert-dialog.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     [is='alert-dialog'] {
       :where(&) {

package/scss/transitions/_bwd.navbar.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   tool-bar-item,
   tool-bar-item-group {
     &.bwn {

package/scss/transitions/_bwd.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   scroll-view {
     &.bwd {
       --scroll-view-translate: translateX(var(--view-transition-trailing-x));
@@ -13,7 +13,7 @@
 
       // Inert nested landmarks of destination so that destination can be interacted with
       // Make sure old/outgoing elements can NOT be interacted with (new elements are stacked lower)
-      ~ body-view,
+      ~ content-view,
       ~ navigation-stack,
       ~ navigation-split-view {
         pointer-events: none;
@@ -32,7 +32,7 @@
   // navigation-split-view > .bwdd {
   //   z-index: 0;
   // }
-  navigation-split-view > body-view:has(~ .bwdd) {
+  navigation-split-view > content-view:has(~ .bwdd) {
     pointer-events: none;
     // z-index: 1;
   }

package/scss/transitions/_confirmation-dialog.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     [is='confirmation-dialog'] {
       :where(&) {

package/scss/transitions/_disclosure-group.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     [is='disclosure-group'] {
       :where(&)::details-content {

package/scss/transitions/_fine-tooltip.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     fine-tooltip {
       :where(&) {

package/scss/transitions/_fwd.navbar.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   // principal-stack > tool-bar-item {
   //   position: absolute;
   //   transition: transform 2s ease-out;

package/scss/transitions/_fwd.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   scroll-view {
     // Make sure old/outgoing elements can NOT be interacted with (new elements are already stacked higher)
     &.#{vars.$vt-fwd-class-name} {

package/scss/transitions/_glass-button.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     [is='glass-button'] {
       :where(&) {

package/scss/transitions/_glass-prominent-button.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     [is='glass-prominent-button'] {
       :where(&) {

package/scss/transitions/_index.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     // ::view-transition-old(root),
     // ::view-transition-new(root) {

package/scss/transitions/_menu-view.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     menu-view {
       :where(&) {

package/scss/transitions/_navigation-split-view.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     navigation-split-view {
       @include mixins.if-2col-split-view-fits {