@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.111

package/scss/components/_list-view.scss

@@ -1,8 +1,9 @@
+@use 'sass:string';
+@use 'sass:map';
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
-@use 'sass:string';
-@use 'sass:map';
 
 $list-ifs: (
   inset: (
@@ -82,6 +83,7 @@ $list-ifs: (
     --list--opensummary-color: var(--sidebarlist-opensummary-color,),
     //
     // --list--item-grid-template-columns: minmax(0, 1fr),
+    --list--accessories-size: 0rem,
     --list--accessories-display: none,
     //
     --list--rootsummary-marker-display: marker-trailing,
@@ -108,7 +110,7 @@ $list-elses: (
   --list--accessories-display: grid,
 );
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$list-components-layer} {
   list-view {
     &:not(& &, [is='form-view'] &, table-view &) {
       @extend %list;
@@ -118,40 +120,30 @@ $list-elses: (
         --list--section-gap: var(--list-row-gap);
 
         @include mixins.write-props($list-elses);
-        // --list--item-padding-inline-start: var(--list-item-padding-inline-start);
-        // --list--item-padding-inline-end: var(--list-item-padding-inline-end);
-        // --list--item-padding-block-start: var(--list-item-padding-block-start);
-        // --list--item-padding-block-end: var(--list-item-padding-block-end);
-
-        // --list--item-background-color: var(--list-item-background-color,);
       }
 
       // SECTION: ifs
       @supports (x: #{string.unquote('if(else:red)')}) {
         :where(&) {
-          @include mixins.write-ifs(--list-style, $list-ifs, $list-elses);
-          // --list--root-padding-inline: if(style(--list-style: inset-grouped): 0.5rem ; style(--list-style: sidebar): 0.5rem ;);
-
-          // --toolbaritemradius: if(style(--list-style: inset-grouped): 1rem ; style(--list-style: sidebar): 1rem ;);
-
-          // --list--separator-block-size: if(style(--list-style: sidebar): 0px ;);
-          // --list--separator-visibility: if(style(--list-style: collapse): 0px ;);
-
-          // --list--root-background-color: if(style(--list-style: sidebar): transparent ;);
+          @include mixins.write-ifs(--list-style, $list-ifs, $list-elses); // --list--root-padding-inline: if(style(--list-style: inset-grouped): 0.5rem ; style(--list-style: sidebar): 0.5rem ;);
         }
       }
 
       // SECTION: ifs polyfill
       @supports not (x: #{string.unquote('if(else:red)')}) {
         :where(&:not([list-style])) {
-          @each $v in vars.$list-styles {
+          @each $v in maps.$list-styles-names {
             @container style(--list-style: #{$v}) {
+              --list-style: #{$v}; // NOTE: used ONLY for tinted buttons
+
               @include mixins.write-props(map.get($list-ifs, $v));
             }
           }
         }
-        @each $v in vars.$list-styles {
+        @each $v in maps.$list-styles-names {
           :where(&[list-style='#{$v}']) {
+            --list-style: #{$v}; // NOTE: used ONLY for tinted buttons
+
             @include mixins.write-props(map.get($list-ifs, $v));
           }
         }
@@ -180,6 +172,64 @@ $list-elses: (
         }
       }
 
+      // FINALLY AFTER ALL IFS
+
+      // NOTE: on safari takes it from manually setting it above
+      // make list-buttons tintable
+      @container not style(--list-style: sidebar) {
+        button[list-item-tint] {
+          :where(&) {
+            --itemhighlightface: var(--accentColor3);
+            --itemactiveface: var(--accentColor3);
+          }
+          &:not([navigation-link]) {
+            --itemtext: var(--accentColor);
+            --itemhighlighttext: var(--accentColor);
+            --itemactivetext: var(--accentColor);
+          }
+        }
+      }
+      @container style(--list-style: sidebar) {
+        button[list-item-tint] {
+          :where(&) {
+            --itemhighlightface: var(--accentColor);
+            --itemactiveface: var(--accentColor);
+          }
+        }
+      }
+
+      // TODO: Also apply this on state of sidebar w/ full-screen detail 1/2
+      @include mixins.if-content-view-list {
+        :where(&) {
+          --list--accessories-size: 0rem;
+          --list--accessories-display: none;
+
+          --insetlist-highlighteditem-background-color: var(--accentColor);
+          --insetlist-highlighteditem-color: var(--tintcontrast);
+          --insetgroupedlist-highlighteditem-background-color: var(--accentColor);
+          --insetgroupedlist-highlighteditem-color: var(--tintcontrast);
+        }
+
+        // override tint colors of tintable buttons
+        @container style(--list-style: inset) or style(--list-style: inset-grouped) {
+          button[list-item-tint] {
+            :where(&) {
+              // --itemhighlighttext: var(--tintcontrast);
+              // --itemactivetext: var(--tintcontrast);
+
+              --itemhighlightface: var(--accentColor);
+              --itemactiveface: var(--accentColor);
+            }
+          }
+        }
+      }
+
+      // Hide accessories
+      :where(&[navigation-link-indicator-visibility='hidden']) {
+        --list--accessories-size: 0rem;
+        --list--accessories-display: none;
+      }
+
       &[preferred-root-disclosure-style='sidebar'] {
         --list--rootsummary-color: var(--primary);
         --list--selectedrootsummary-color: var(--primary);
@@ -215,15 +265,6 @@ $list-elses: (
           }
         }
       }
-
-      // FINALLY AFTER ALL IFS
-      // TODO: Also apply this on state of sidebar w/ full-screen detail 1/2
-      @include mixins.if-2col-split-view-fits {
-        :where(navigation-split-view > scroll-view &, navigation-split-view > body-view > scroll-view &) {
-          // --list--item-grid-template-columns: minmax(0, 1fr);
-          --list--accessories-display: none;
-        }
-      }
     }
   }
 }

package/scss/components/_menu-view.scss

@@ -1,75 +1,80 @@
+@use 'sass:string';
 @use '../vars';
 @use '../mixins';
 @use '../placeholders';
-@use 'sass:string';
 
 @layer #{vars.$components-layer} {
   menu-view {
-    :where(&)::part(menu-summary) {
-      transform: var(--menu--summary-scale,);
-      filter: var(--menu--summary-filter,);
-    }
+    :where(&) {
+      &::part(menu-summary) {
+        transform: var(--menu--summary-scale,);
 
-    :where(&)::part(menu-scrollable) {
-      @include mixins.make-scrollable(true);
+        filter: var(--menu--summary-filter,);
+      }
 
-      padding: var(--menu-padding);
-    }
+      &::part(menu-scrollable) {
+        @include mixins.make-scrollable(true);
 
-    :where(&)::part(menu-form) {
-      // min-inline-size: 200px; // FIXME: del this
-      inline-size: max-content; //var(--menu-inline-size);
-      block-size: min-content;
+        padding: var(--menu-padding);
+      }
 
-      max-inline-size: var(--menu-max-inline-size,);
-      max-block-size: var(--menu-max-block-size,);
+      &::part(menu-form) {
+        // min-inline-size: 200px; // FIXME: del this
+        inline-size: max-content; //var(--menu-inline-size);
+        block-size: min-content;
 
-      overflow: clip auto;
-      border-radius: inherit;
+        max-inline-size: var(--menu-max-inline-size,);
+        max-block-size: var(--menu-max-block-size,);
 
-      background-color: light-dark(var(--menu-bg), var(--menu-bg-dark));
-      // border: transparent solid 20px; //make sure bezel is not covered
+        overflow: clip auto;
+        border-radius: inherit;
 
-      @include mixins.make-scrollable;
-      @include mixins.contain-overscroll;
+        background-color: light-dark(var(--menu-bg), var(--menu-bg-dark));
+        // border: transparent solid 20px; //make sure bezel is not covered
 
-      // touch-action: all;
+        @include mixins.make-scrollable;
+        @include mixins.contain-overscroll;
 
-      --menu--dialog-max-inline-size: anchor-size();
-      --menu--dialog-max-block-size: anchor-size();
-    }
+        // touch-action: all;
+
+        --menu--dialog-max-inline-size: anchor-size();
+        --menu--dialog-max-block-size: anchor-size();
+      }
 
-    :where(&)::part(menu-dialog) {
-      @include mixins.reset-dialog;
+      &::part(menu-dialog) {
+        @include mixins.reset-dialog;
 
-      color: var(--text,);
+        color: var(--text,);
 
-      touch-action: none;
+        touch-action: none;
 
-      position: fixed;
+        position: fixed;
 
-      inline-size: fit-content;
-      block-size: fit-content;
-      height: auto; // safari
-      max-inline-size: var(--menu--dialog-max-inline-size,);
-      max-block-size: var(--menu--dialog-max-block-size,);
+        inline-size: fit-content;
+        block-size: fit-content;
+        height: auto; // safari
+        max-inline-size: var(--menu--dialog-max-inline-size,);
+        max-block-size: var(--menu--dialog-max-block-size,);
 
-      margin-block: var(--menu--dialog-margin-block,);
-      margin-inline: var(--menu--dialog-margin-inline,);
+        margin-block: var(--menu--dialog-margin-block,);
+        margin-inline: var(--menu--dialog-margin-inline,);
 
-      transform: var(--menu--dialog-scale,);
+        transform: var(--menu--dialog-scale,);
 
-      // position-anchor: --my-anchor; // overriden
-      position-area: center;
+        // position-anchor: --my-anchor; // overriden
+        position-area: center;
 
-      overflow: clip;
-      border-radius: calc(var(--menu-item-border-radius) + var(--menu-padding));
+        overflow: clip;
+        border-radius: calc(var(--menu-item-border-radius) + var(--menu-padding));
 
-      backdrop-filter: var(--liquid-glass-backdrop-filter,);
-      box-shadow: var(--menu-popover-box-shadow,); //0 0 10px 10px black;
+        backdrop-filter: var(--liquid-glass-backdrop-filter,);
+        box-shadow: var(--menu-popover-box-shadow,); //0 0 10px 10px black;
 
-      // finally
-      --menu--dialog-scale: scale(0);
+        // finally
+        --menu--dialog-scale: scale(0);
+        --menu--summary-scale: ;
+        --menu--summary-filter: ;
+      }
     }
 
     &[open] {
@@ -82,9 +87,10 @@
 
         --menu--dialog-scale: scale(1);
 
-        @starting-style {
-          --menu--dialog-scale: scale(0);
-        }
+        // BUG: Safari rerenders entire scale animation on every button change
+        // @starting-style {
+        // --menu--dialog-scale: scale(0);
+        // }
       }
     }
 
@@ -96,11 +102,15 @@
       }
     }
 
-    &[open] > &[open],
-    &[open]:not(tool-bar-item &) {
-      --menu--summary-scale: scale(0.01);
+    // shrink again, if opened outside of a direct parent toolbaritem (they shrink themselves)
+    // &[open] > &[open],
+    // &[open]:not(tool-bar-item &) {
+    &[open]:not(tool-bar-item > &) {
+      :where(&) {
+        --menu--summary-scale: scale(0.01);
 
-      --menu--summary-filter: blur(10px);
+        --menu--summary-filter: blur(10px);
+      }
     }
 
     // :where(& > *) {
@@ -108,6 +118,9 @@
     // }
 
     // SECTION: componentize
+    :where(&)::part(menu-summary) {
+      @include mixins.componentize(menusummary);
+    }
     :where(& > button, & > [is='disclosure-group'] > button, & > [is='disclosure-group'] > summary),
     :where(& > menu-view)::part(menu-summary) {
       @include mixins.componentize(menuitem);
@@ -124,12 +137,25 @@
       --menuitemradiusbr: var(--menu-item-border-radius);
       --menuitemradiusbl: var(--menu-item-border-radius);
     }
+
+    :where(&) {
+      --disclosure-style: marker-trailing;
+    }
   }
 }
 
 // componentize
 @layer #{vars.$colors-layer} {
   menu-view {
+    @include mixins.add-focus-visible-state('::part(menu-summary)') {
+      --menusummaryface: var(--menusummaryhighlightface,);
+      --menusummarytext: var(--menusummaryhighlighttext,);
+    }
+    @include mixins.add-hover-state('::part(menu-summary)') {
+      --menusummaryface: var(--menusummaryhighlightface,);
+      --menusummarytext: var(--menusummaryhighlighttext,);
+    }
+
     > button,
     > [is='disclosure-group'] > button,
     > [is='disclosure-group'] > summary {
@@ -137,15 +163,17 @@
         --menuitemface: var(--menuitemhighlightface,);
         --menuitemtext: var(--menuitemhighlighttext,);
 
-        --secondary: var(--menuitemtext);
-        --blue: var(--menuitemtext);
+        @include mixins.takeover-color-vars(menuitem);
+        // --secondary: var(--menuitemtext);
+        // --blue: var(--menuitemtext);
       }
       @include mixins.add-hover-state {
         --menuitemface: var(--menuitemhighlightface,);
         --menuitemtext: var(--menuitemhighlighttext,);
 
-        --secondary: var(--menuitemtext);
-        --blue: var(--menuitemtext);
+        @include mixins.takeover-color-vars(menuitem);
+        // --secondary: var(--menuitemtext);
+        // --blue: var(--menuitemtext);
       }
     }
     > menu-view {
@@ -153,15 +181,17 @@
         --menuitemface: var(--menuitemhighlightface,);
         --menuitemtext: var(--menuitemhighlighttext,);
 
-        --secondary: var(--menuitemtext);
-        --blue: var(--menuitemtext);
+        @include mixins.takeover-color-vars(menuitem);
+        // --secondary: var(--menuitemtext);
+        // --blue: var(--menuitemtext);
       }
       @include mixins.add-hover-state('::part(menu-summary)') {
         --menuitemface: var(--menuitemhighlightface,);
         --menuitemtext: var(--menuitemhighlighttext,);
 
-        --secondary: var(--menuitemtext);
-        --blue: var(--menuitemtext);
+        @include mixins.takeover-color-vars(menuitem);
+        // --secondary: var(--menuitemtext);
+        // --blue: var(--menuitemtext);
       }
     }
   }
@@ -170,6 +200,11 @@
 // componentize
 @layer #{vars.$ui-layer} {
   menu-view {
+    @include mixins.add-active-state('::part(menu-summary)') {
+      --menusummaryface: var(--menusummaryactiveface,);
+      --menusummarytext: var(--menusummaryactivetext,);
+    }
+
     > button,
     > [is='disclosure-group'] > button,
     > [is='disclosure-group'] > summary {

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

@@ -16,6 +16,19 @@
       // font-size 1ms step-start;
     }
 
+    :nth-child(1 of image-view),
+    :nth-child(1 of label-view) {
+      :where(&) {
+        --label-image-size: 5;
+      }
+    }
+
+    :nth-child(1 of image-view) {
+      :where(&) {
+        color: var(--accentColor);
+      }
+    }
+
     scroll-view[navigation-bar-title-display-mode='inline']:has(&) &[navigation-bar-auto-hide] {
       :where(&) {
         opacity: 0;
@@ -23,5 +36,15 @@
         visibility: collapse;
       }
     }
+
+    // &[background-style='grouped'] {
+    //   :where(&) {
+    //     background-color: var(--secondaryGroupedBackground);
+    //     border-radius: var(--insetlist-item-border-radius);
+
+    //     padding-inline: var(--list-item-padding-inline-start) var(--list-item-padding-inline-end);
+    //     padding-block: 1rem;
+    //   }
+    // }
   }
 }

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

@@ -138,7 +138,7 @@
 
       > scroll-view {
         :where(&) {
-          border-right: solid 1px light-dark(var(--nav-split-view-separator-color), var(--nav-split-view-separator-color-dark));
+          border-right: solid 1px var(--separator);
           // --scroll-view-box-shadow: none;
         }
       }
@@ -263,7 +263,7 @@
                 }
 
                 :where(& > scroll-view) {
-                  border-right: solid 1px light-dark(var(--nav-split-view-separator-color), var(--nav-split-view-separator-color-dark));
+                  border-right: solid 1px var(--separator);
                   // --scroll-view-box-shadow: none;
                 }
 
@@ -338,7 +338,7 @@
               }
 
               :where(& > scroll-view) {
-                border-right: solid 1px light-dark(var(--nav-split-view-separator-color), var(--nav-split-view-separator-color-dark));
+                border-right: solid 1px var(--separator);
                 // --scroll-view-box-shadow: none;
               }
 

package/scss/components/_navigation-title.scss

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