@swiftwc/ui 0.0.0-dev.114 → 0.0.0-dev.117

package/scss/components/_h-stack.scss

@@ -4,7 +4,7 @@
 @use '../maps';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   h-stack {
     :where(&) {
       grid-auto-flow: column;

package/scss/components/_image-view.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   image-view {
     :where(&) {
       // --image--fontsize: var(--label-imagestack-fontsize, calc(var(--label-image-size) * 1rem));

package/scss/components/_index.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   // SECTION: all is grid
 
   navigation-stack,
@@ -9,7 +9,7 @@
   navigation-large-title,
   navigation-title,
   scroll-view,
-  body-view,
+  content-view,
   tab-view,
   image-view,
   list-view,
@@ -198,7 +198,7 @@
 }
 
 // SECTION: componentize
-@layer #{vars.$colors-layer} {
+@layer #{vars.$framework-layer}.#{vars.$colors-layer} {
   sidebar-toggle > button,
   tool-bar-item > button,
   tool-bar-item > input,
@@ -240,7 +240,7 @@
 }
 
 // SECTION: componentize
-@layer #{vars.$ui-layer} {
+@layer #{vars.$framework-layer}.#{vars.$ui-layer} {
   sidebar-toggle > button,
   tool-bar-item > button,
   tool-bar-item > input,

package/scss/components/_label-view.scss

@@ -151,7 +151,7 @@ $label-line-ifs: (
   }
 }
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   label-view {
     :where(&) {
       padding-inline: var(--label-padding-inline);

package/scss/components/_labeled-content.scss

@@ -2,7 +2,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   labeled-content {
     :where(&) {
       container: labeled-content / inline-size;

package/scss/components/_list-view.scss

@@ -110,7 +110,7 @@ $list-elses: (
   --list--accessories-display: grid,
 );
 
-@layer #{vars.$list-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$list-components-layer} {
   list-view {
     &:not(& &, [is='form-view'] &, table-view &) {
       @extend %list;
@@ -151,7 +151,7 @@ $list-elses: (
           :where(navigation-split-view [is='sidebar-view'] &[list-style]) {
             @include mixins.write-props(map.get($list-ifs, sidebar));
           }
-          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > content-view > scroll-view &[preferred-expanded-style]) {
             @include mixins.write-props(map.get($list-ifs, inset));
           }
         }
@@ -166,7 +166,7 @@ $list-elses: (
           :where(navigation-split-view:has(> [is='sidebar-view']) > [is='sidebar-view'] &[list-style]) {
             --list-style: sidebar;
           }
-          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > content-view > scroll-view &[preferred-expanded-style]) {
             --list-style: inset;
           }
         }

package/scss/components/_menu-view.scss

@@ -3,7 +3,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   menu-view {
     :where(&) {
       &::part(menu-summary) {
@@ -145,7 +145,7 @@
 }
 
 // componentize
-@layer #{vars.$colors-layer} {
+@layer #{vars.$framework-layer}.#{vars.$colors-layer} {
   menu-view {
     @include mixins.add-focus-visible-state('::part(menu-summary)') {
       --menusummaryface: var(--menusummaryhighlightface,);
@@ -198,7 +198,7 @@
 }
 
 // componentize
-@layer #{vars.$ui-layer} {
+@layer #{vars.$framework-layer}.#{vars.$ui-layer} {
   menu-view {
     @include mixins.add-active-state('::part(menu-summary)') {
       --menusummaryface: var(--menusummaryactiveface,);

package/scss/components/_navigation-large-title.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   navigation-large-title {
     :where(&) {
       // display: grid;

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

@@ -12,7 +12,7 @@
   }
 }
 
-@layer #{vars.$nav-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$nav-components-layer} {
   navigation-split-view {
     :where(&) {
       touch-action: none;
@@ -49,16 +49,16 @@
         z-index: -1;
       }
 
-      :where(& > body-view ~ scroll-view, & > body-view ~ [is='sidebar-view']) {
+      :where(& > content-view ~ scroll-view, & > content-view ~ [is='sidebar-view']) {
         z-index: -1;
       }
 
       &:has(> [is='sidebar-view']) {
-        :where(& > body-view ~ [is='sidebar-view']) {
+        :where(& > content-view ~ [is='sidebar-view']) {
           z-index: -2;
         }
 
-        :where(& > body-view > body-view ~ scroll-view) {
+        :where(& > content-view > content-view ~ scroll-view) {
           z-index: -1;
         }
       }
@@ -67,12 +67,12 @@
     &:has(> [is='sidebar-view']) {
       @include mixins.ifnot-3col-split-view-fits {
         &:not([preferred-compact-column='content']) {
-          :where(& > body-view > body-view ~ scroll-view) {
+          :where(& > content-view > content-view ~ scroll-view) {
             z-index: -1;
           }
         }
 
-        // body-view > body-view {
+        // content-view > content-view {
         // clip-path: inset(
         //   0 0 0 var(--nav-split-view-content-inline-size)
         // ); // force clipping because it is now a floating element unable to hide bg = overflow: clip;
@@ -82,7 +82,7 @@
 
       @include mixins.if-2col-split-view-fits {
         &[column-visibility='double-column'] {
-          :where(& > body-view > body-view ~ scroll-view) {
+          :where(& > content-view > content-view ~ scroll-view) {
             z-index: -1;
           }
         }
@@ -143,7 +143,7 @@
         }
       }
 
-      > body-view {
+      > content-view {
         scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
           &,
           & ~ tool-bar {
@@ -215,7 +215,7 @@
           // }
         }
 
-        > body-view {
+        > content-view {
           scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
             &,
             & ~ tool-bar {
@@ -250,7 +250,7 @@
               }
 
               // move descendants to left edge of screen
-              > body-view {
+              > content-view {
                 scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
                   &,
                   & ~ tool-bar {
@@ -309,7 +309,7 @@
             // &:has(> dialog[is='sidebar-view']) {
             // &:not([column-visibility='double-column']) {
             // container of content col (principal)
-            > body-view {
+            > content-view {
               // cancel animations
               > scroll-view {
                 ~ tool-bar {
@@ -343,7 +343,7 @@
               }
 
               // container of details col (trailing)
-              > body-view {
+              > content-view {
                 scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
                   &,
                   & ~ tool-bar {
@@ -363,7 +363,7 @@
   }
 }
 
-@layer #{vars.$final-layer} {
+@layer #{vars.$framework-layer}.#{vars.$final-layer} {
   navigation-split-view {
     // ANCHOR transitions
 
@@ -377,7 +377,7 @@
         --scroll-view-translate: translateX(var(--view-transition-principal-x)); //!important
       }
 
-      > body-view {
+      > content-view {
         @include force-disable-col-view-transitions;
       }
 
@@ -389,12 +389,12 @@
           @include mixins.ifnot-3col-split-view-fits {
             &[preferred-compact-column='content'] {
               // move descendants to right
-              > body-view {
+              > content-view {
                 > scroll-view {
                   --scroll-view-translate: translateX(var(--view-transition-principal-x)); //!important;
                 }
 
-                > body-view {
+                > content-view {
                   @include force-disable-col-view-transitions;
                 }
               }
@@ -406,13 +406,13 @@
           // SIDEBAR | COMPACT | EXPANDED
           @include mixins.if-3col-split-view-fits {
             // container of compact col (middle)
-            > body-view {
+            > content-view {
               // Fix position as compact col in the middle
               > scroll-view {
                 --scroll-view-translate: translateX(var(--view-transition-principal-x)); // !important;
               }
 
-              > body-view {
+              > content-view {
                 @include force-disable-col-view-transitions;
               }
             }

package/scss/components/_navigation-stack.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$nav-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$nav-components-layer} {
   navigation-stack {
     :where(&) {
       touch-action: none;

package/scss/components/_navigation-title.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   navigation-title {
     :where(&) {
       // display: grid; //contents;

package/scss/components/_picker-view.scss

@@ -124,7 +124,7 @@ $picker-elses: (
 //   }
 // }
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   picker-view {
     :where(&) {
       grid-template-columns: minmax(0, 1fr);
@@ -340,7 +340,7 @@ $picker-elses: (
   }
 }
 
-@layer #{vars.$final-layer} {
+@layer #{vars.$framework-layer}.#{vars.$final-layer} {
   picker-view {
     //--picker-label-value-placement
     @supports not (x: #{string.unquote('attr(x type(*))')}) {

package/scss/components/_plain-button.scss

@@ -2,7 +2,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='plain-button'] {
     @extend %button;
 
@@ -10,7 +10,7 @@
     }
   }
 }
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   [is='plain-button'] {
     :where(&) {
       text-align: center;

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) {
@@ -146,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(&) {
@@ -213,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;
             }
@@ -222,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;
                 }
@@ -230,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;
                     }
@@ -240,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;
                 }
@@ -248,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;
               }
@@ -272,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;
         }
@@ -282,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(&) {
@@ -297,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(&) {
@@ -309,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);