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

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;

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,7 @@
 @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;

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 {

package/scss/transitions/_progress-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) {
     progress-view {
       :where(&) {

package/scss/transitions/_sheet-view.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   [is='sheet-view'] {
     &:not([open]) {
       z-index: var(--top-layer-polyfill-z-index);

package/scss/transitions/_sidebar-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) {
     [is='sidebar-view'] {
       // Between 2col and 3col AND preferred-compact-column rule ON, apply transitions

package/scss/transitions/_tab-bar.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     [is='tab-bar'] {
       > [is='form-view'] {

package/scss/utils/_background.scss

@@ -2,7 +2,7 @@
 @use 'sass:string';
 @use '../vars';
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   list-view,
   [is='form-view'] {
     :where(&[background='system-background']) {

package/scss/utils/_frame.scss

@@ -8,7 +8,7 @@ $self-map: (
   fill: stretch,
 );
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   :where([frame\:width='infinity']) {
     inline-size: 100%;
   }
@@ -84,7 +84,7 @@ $self-map: (
   }
 }
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   // readable 2/2
   v-stack {
     :where(&[readable]) {

package/scss/utils/_index.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../maps';
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   // [background-style='grouped'] {
   //   // @media (pointer: coarse) {
   //   :where(&) {

package/scss/utils/_spacing.scss

@@ -3,7 +3,7 @@
 @use 'sass:list';
 @use '../vars';
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   // general utils
   @for $i from 0 through 50 {
     :where([padding-horizontal='#{$i}']) {

package/scss/utils/_stacks.scss

@@ -4,7 +4,7 @@
 @use '../vars';
 @use '../maps';
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   // Vertical alignment becomes the common tweak
   h-stack,
   v-flex-stack {
@@ -102,7 +102,7 @@
   }
 }
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   // readable 1/2
   v-stack {
     :where(&[readable]) {