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

package/scss/base/_root.scss

@@ -10,7 +10,7 @@
   initial-value: 16;
 }
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   :root {
     color-scheme: light dark;
 
@@ -226,6 +226,24 @@
     --labeled-content-column-gap: 1rem;
     --labeled-content-row-gap: 0.5rem;
 
+    --toggle-inline-size: 3.4rem;
+    --toggle-block-size: 1.5rem;
+    --toggle-border-radius: var(--pill-border-radius);
+
+    --toggle-track-off-bg: var(--gray2);
+    --toggle-track-off-bg-dark: var(--gray2);
+    --toggle-track-on-bg: var(--green);
+    --toggle-track-on-bg-dark: var(--green);
+
+    --toggle-dot-bg: var(--control-clear-glass-bg);
+    --toggle-dot-bg-dark: var(--control-clear-glass-bg-dark);
+    --toggle-dot-focus-bg: var(--control-clear-glass-focus-bg);
+    --toggle-dot-focus-bg-dark: var(--control-clear-glass-focus-bg-dark);
+    --toggle-dot-active-bg: var(--control-clear-glass-active-bg);
+    --toggle-dot-active-bg-dark: var(--control-clear-glass-active-bg-dark);
+
+    --toggle-dot-box-shadow: var(--control-clear-glass-box-shadow);
+
     // @media (prefers-color-scheme: dark) {
     //   @include dark-theme;
     // }
@@ -256,18 +274,18 @@
       --#{$v}-item-padding-block-start: 1rem;
 
       // FIXME: feat-sheet 3/3
-      --#{$v}-item-background-color: var(--background); //light-dark(var(--system-bg), var(--primary-bg-dark)); // ✅
+      --#{$v}-item-background-color: var(--background);
       --#{$v}-item-color: var(--primary);
       --#{$v}-highlighteditem-background-color: var(--accentColor3);
       --#{$v}-highlighteditem-color: ;
 
       // FIXME: feat-sheet 3/3
-      --inset#{$v}-item-background-color: var(--background); //light-dark(var(--system-bg), var(--primary-bg-dark)); // ✅
+      --inset#{$v}-item-background-color: var(--background);
       --inset#{$v}-item-color: var(--primary);
       --inset#{$v}-highlighteditem-background-color: var(--accentColor3); //var(--accentColor);
       --inset#{$v}-highlighteditem-color: ; //var(--tintcontrast);
 
-      --insetgrouped#{$v}-item-background-color: var(--secondaryGroupedBackground); //light-dark(var(--system-bg), oklch(0.2186 0.0039 286.08)); // ✅
+      --insetgrouped#{$v}-item-background-color: var(--secondaryGroupedBackground);
       --insetgrouped#{$v}-item-color: var(--primary);
       --insetgrouped#{$v}-highlighteditem-background-color: var(--accentColor3); //var(--accentColor);
       --insetgrouped#{$v}-highlighteditem-color: ; //var(--tintcontrast);
@@ -358,16 +376,13 @@
       @each $v in list, form {
         --#{$v}-item-padding-inline-start: 1rem;
         --#{$v}-item-padding-inline-end: 1rem;
-      }
-
-      // --primary-bg: oklch(0.9761 0 0); // ✅
-      // --primary-bg-dark: oklch(0.2666 0.0071 67.52); // ✅
 
-      // --divider: oklch(0.9249 0 0); // ✅
-      // --divider-dark: oklch(0.3452 0.0074 84.59); // ✅
+        // --insetgrouped#{$v}-background-color: var(--background);
+        // --insetgrouped#{$v}-item-background-color: var(--quaternaryGroupedBackground);
+      }
 
-      // --secondary-label: oklch(0.5999 0 0); // ✅
-      // --secondary-label-dark: oklch(0.69 0.0019 67.79); // ✅
+      --toggle-inline-size: 3.4rem;
+      --toggle-block-size: 1.3rem;
 
       // SECTION Glass
 

package/scss/colors/_index.scss

@@ -526,6 +526,17 @@ $color-tokens: (
       ),
     ),
   ),
+  quaternaryGroupedBackground: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9761 0 0),
+        dark: oklch(0.2751 0.0039 128.62),
+      ),
+    ),
+  ),
   // SECTION: semantic colors
   separator: (
       props: (
@@ -588,7 +599,7 @@ $colors: map.merge(
   inherits: true;
 }
 
-@layer #{vars.$colors-layer} {
+@layer #{vars.$framework-layer}.#{vars.$colors-layer} {
   :root {
     // --background: light-dark(oklch(1 0 0), oklch(0 0 0)); // ✅
 
@@ -624,6 +635,51 @@ $colors: map.merge(
     // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
   }
 
+  [is='sheet-view'],
+  [is='full-screen'],
+  [is='confirmation-dialog'],
+  [is='alert-dialog'],
+  content-view,
+  navigation-split-view,
+  navigation-split-view > [is='sidebar-view'],
+  navigation-stack {
+    // @media (pointer: coarse) {
+    :where(
+      &:has(
+        > scroll-view list-view[list-style='inset-grouped']:not([slot], [background]),
+        > scroll-view [is='form-view'][form-style='inset-grouped']:not([slot], [background]),
+        > scroll-view table-view[table-style='inset']:not([slot], [background])
+      )
+    ) {
+      --background: var(--groupedBackground);
+      --secondaryBackground: var(--secondaryGroupedBackground);
+      --tertiaryBackground: var(--tertiaryGroupedBackground);
+
+      --face: var(--background);
+    }
+    // }
+  }
+
+  // revert above!
+  navigation-stack > navigation-stack,
+  navigation-stack > navigation-split-view {
+    :where(
+      &:not(
+        :has(
+          > scroll-view list-view[list-style='inset-grouped']:not([slot], [background]),
+          > scroll-view [is='form-view'][form-style='inset-grouped']:not([slot], [background]),
+          > scroll-view table-view[table-style='inset']:not([slot], [background])
+        )
+      )
+    ) {
+      --background: initial;
+      --secondaryBackground: initial;
+      --tertiaryBackground: initial;
+
+      --face: var(--background);
+    }
+  }
+
   :where(navigation-split-view > [is='sidebar-view']) {
     // --canvas: light-dark(oklch(var(--primary-bg)), var(--primary-bg-dark));
     // --canvastext: light-dark(var(--primary-label), var(--primary-label-dark));
@@ -851,6 +907,15 @@ $colors: map.merge(
     @include mixins.wire-tinted-glass(btn);
   }
 
+  toggle-view {
+    :where(&) {
+      --toggle--track-off-bg: light-dark(var(--toggle-track-off-bg), var(--toggle-track-off-bg-dark));
+      --toggle--track-on-bg: light-dark(var(--toggle-track-on-bg), var(--toggle-track-on-bg-dark));
+
+      --toggle--dot-bg: light-dark(var(--toggle-dot-bg), var(--toggle-dot-bg-dark));
+    }
+  }
+
   /* list-view {
     :where(&) {
       // --toolbaritemface: ;

package/scss/components/_alert-dialog.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='alert-dialog'] {
     :where(&) {
       @include mixins.reset-dialog;
@@ -86,7 +86,7 @@
   }
 }
 
-// @layer #{vars.$colors-layer} {
+// @layer #{vars.$framework-layer}.#{vars.$colors-layer} {
 //   // SECTION: componentize
 //   [is='alert-dialog'] {
 //     > button {
@@ -98,7 +98,7 @@
 //   }
 // }
 
-// @layer #{vars.$ui-layer} {
+// @layer #{vars.$framework-layer}.#{vars.$ui-layer} {
 //   // SECTION: componentize
 //   [is='alert-dialog'] {
 //     > button {

package/scss/components/_bordered-button.scss

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

package/scss/components/_bordered-prominent-button.scss

@@ -3,7 +3,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='bordered-prominent-button'] {
     @extend %button;
 
@@ -46,7 +46,7 @@
   }
 }
 
-@layer #{vars.$colors-layer} {
+@layer #{vars.$framework-layer}.#{vars.$colors-layer} {
   [is='bordered-prominent-button'] > * {
     :where(&) {
       @include mixins.takeover-color-vars(btn);
@@ -56,7 +56,7 @@
   }
 }
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   [is='bordered-prominent-button'] {
     :where(&) {
       text-align: center;

package/scss/components/_borderless-button.scss

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

package/scss/components/_confirmation-dialog.scss

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

package/scss/components/_content-unavailable.scss

@@ -2,7 +2,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   content-unavailable {
     :where(&) {
       place-content: center;

package/scss/components/{_body-view.scss → _content-view.scss}

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

package/scss/components/_date-picker.scss

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

package/scss/components/_detail-placeholder.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   detail-placeholder {
     :where(&) {
       pointer-events: none;
@@ -105,7 +105,7 @@
     @include mixins.if-2col-split-view-fits {
       // also hide when in 2col mode with detail view
       &:not(:has(> [is='sidebar-view'])) {
-        &:has(> body-view) {
+        &:has(> content-view) {
           detail-placeholder {
             :where(&) {
               --nav-split-view--detail-placeholder-visibility: collapse;
@@ -117,7 +117,7 @@
         &:not([column-visibility='double-column']) {
           // hide when no content view
           &[preferred-compact-column='content'] {
-            &:not(:has(> body-view)) {
+            &:not(:has(> content-view)) {
               detail-placeholder {
                 :where(&) {
                   --nav-split-view--detail-placeholder-visibility: collapse;
@@ -127,7 +127,7 @@
           }
           // also hide when in 3col mode with detail view
           @include mixins.if-3col-split-view-fits {
-            &:has(> body-view > body-view) {
+            &:has(> content-view > content-view) {
               detail-placeholder {
                 :where(&) {
                   --nav-split-view--detail-placeholder-visibility: collapse;
@@ -139,7 +139,7 @@
 
         // also hide when in 2col mode with detail view
         &[column-visibility='double-column'] {
-          &:has(> body-view) {
+          &:has(> content-view) {
             detail-placeholder {
               :where(&) {
                 --nav-split-view--detail-placeholder-visibility: collapse;

package/scss/components/_disclosure-group.scss

@@ -2,7 +2,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='disclosure-group'] {
     :where(&) {
       overflow: clip;
@@ -135,7 +135,7 @@
   }
 }
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   [is='disclosure-group'] {
     @supports (x: #{string.unquote('attr(x type(*))')}) {
       :where(&) {

package/scss/components/_fine-tooltip.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$tab-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$tab-components-layer} {
   fine-tooltip {
     :where(&) {
       color: var(--text,);

package/scss/components/_form-view.scss

@@ -107,7 +107,7 @@ $form-elses: (
   --list--accessories-display: grid,
 );
 
-@layer #{vars.$list-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$list-components-layer} {
   [is='form-view'] {
     &:not(& &, list-view &, table-view &, [is='tab-bar'] > &) {
       @extend %list;
@@ -152,7 +152,7 @@ $form-elses: (
           :where(navigation-split-view [is='sidebar-view'] &[form-style]) {
             @include mixins.write-props(map.get($form-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($form-ifs, inset));
           }
         }
@@ -167,7 +167,7 @@ $form-elses: (
           :where(navigation-split-view:has(> [is='sidebar-view']) > [is='sidebar-view'] &[list-style]) {
             --form-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]) {
             --form-style: inset;
           }
         }

package/scss/components/_full-screen.scss

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

package/scss/components/_glass-button.scss

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

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

@@ -3,7 +3,7 @@
 @use '../mixins';
 @use '../placeholders';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   [is='glass-prominent-button'] {
     @extend %button;
 
@@ -52,7 +52,7 @@
   }
 }
 
-@layer #{vars.$colors-layer} {
+@layer #{vars.$framework-layer}.#{vars.$colors-layer} {
   [is='glass-prominent-button'] > * {
     :where(&) {
       @include mixins.takeover-color-vars(btn);
@@ -62,7 +62,7 @@
   }
 }
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   [is='glass-prominent-button'] {
     :where(&) {
       text-align: center;

package/scss/components/_group-box.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   group-box {
     :where(&) {
       background: var(--groupbox--background);

package/scss/components/_h-divider.scss

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

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

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

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,26 +9,9 @@
   navigation-large-title,
   navigation-title,
   scroll-view,
-  body-view,
+  content-view,
   tab-view,
   image-view,
-  [is='search-view'],
-  [is='sidebar-view'],
-  [is='tab-bar'],
-  [is='full-screen'],
-  [is='confirmation-dialog'],
-  [is='alert-dialog'],
-  [is='sheet-view'],
-  [is='form-view'],
-  [is='disclosure-group'],
-  [is='table-row'],
-  [is='table-column'],
-  [is='borderless-button'],
-  [is='bordered-button'],
-  [is='bordered-prominent-button'],
-  [is='plain-button'],
-  [is='glass-button'],
-  [is='glass-prominent-button'],
   list-view,
   table-view,
   content-unavailable,
@@ -37,7 +20,6 @@
   tool-bar-item-group,
   fine-tooltip,
   sidebar-toggle,
-  [is='form-view'],
   v-stack,
   h-stack,
   group-box,
@@ -50,12 +32,41 @@
   text-field,
   detail-placeholder,
   sticky-container,
-  picker-view {
+  picker-view,
+  h-divider,
+  v-divider {
     :where(&:not([hidden])) {
       display: grid;
     }
+
+    :where(tab-view:has(&:not(:defined)), navigation-split-view:has(&:not(:defined)), navigation-stack:has(&:not(:defined))) {
+      visibility: hidden;
+    }
   }
 
+  [is='search-view'],
+  [is='sidebar-view'],
+  [is='tab-bar'],
+  [is='full-screen'],
+  [is='confirmation-dialog'],
+  [is='alert-dialog'],
+  [is='sheet-view'],
+  [is='form-view'],
+  [is='disclosure-group'],
+  [is='table-row'],
+  [is='table-column'],
+  [is='borderless-button'],
+  [is='bordered-button'],
+  [is='bordered-prominent-button'],
+  [is='plain-button'],
+  [is='glass-button'],
+  [is='glass-prominent-button'] {
+    :where(&:not([hidden])) {
+      display: grid;
+    }
+  }
+
+  :where(labeled-content)::part(labeled-content-container),
   :where(labeled-content)::part(labeled-content-container),
   :where(labeled-content)::part(labeled-content-label-stack),
   :where(labeled-content)::part(labeled-content-value-stack),
@@ -92,7 +103,7 @@
   :where(menu-view)::part(menu-scrollable),
   :where(picker-view)::part(picker-stack),
   :where(picker-view)::part(picker-label-stack),
-  :where(picker-view)::part(picker-input-stack),
+  // :where(picker-view)::part(picker-input-stack),
   :where(tool-bar)::part(top-bar),
   :where(tool-bar)::part(bottom-bar),
   :where(label-view)::part(label-image-stack),
@@ -187,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,
@@ -229,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;
           }
         }