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

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,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   scroll-view {
     navigation-stack > &,
     navigation-split-view > &,

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;

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

@@ -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) {
@@ -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);

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/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));

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]) {