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

package/scss/mixins/_index.scss

@@ -1,7 +1,8 @@
-@use '../vars';
 @use 'sass:string';
 @use 'sass:map';
 @use 'sass:list';
+@use '../vars';
+@use '../functions';
 
 @mixin span-all {
   grid-column: 1 / -1; // span all columns
@@ -79,8 +80,14 @@
     grid-area: main;
   }
 
-  &:has(~ tool-bar > [slot^='top-bar']),
-  &:has(> [slot^='top-bar']) {
+  &:has(
+    ~ tool-bar > [slot^='top-bar'],
+    ~ tool-bar > [slot='cancellation-action'],
+    ~ tool-bar > [slot='primary-action'],
+    ~ tool-bar > [slot='confirmation-action'],
+    ~ tool-bar > [slot='destructive-action']
+  ),
+  &:has(> [slot^='top-bar'], > [slot='cancellation-action'], > [slot='primary-action'], > [slot='confirmation-action'], > [slot='destructive-action']) {
     grid-template-rows: var(--navigation-bar-block-size) minmax(max-content, 1fr);
   }
 }
@@ -110,9 +117,16 @@
   }
 }
 
-@mixin contain-overscroll() {
-  overscroll-behavior: contain;
+@mixin contain-overscroll($axis: both) {
   -webkit-overflow-scrolling: touch;
+
+  @if $axis == inline {
+    overscroll-behavior-inline: contain;
+  } @else if $axis == block {
+    overscroll-behavior-block: contain;
+  } @else {
+    overscroll-behavior: contain;
+  }
 }
 
 @mixin make-toolbar-pseudos($dir: bottom) {
@@ -201,6 +215,19 @@
   border-radius: var(--#{$prefix}radiustl#{','}) var(--#{$prefix}radiustr#{','}) var(--#{$prefix}radiusbr#{','}) var(--#{$prefix}radiusbl#{','});
 }
 
+@mixin takeover-color-vars($prefix) {
+  --secondary: var(--#{$prefix}text);
+  --blue: var(--#{$prefix}text);
+  --red: var(--#{$prefix}text);
+  --green: var(--#{$prefix}text);
+  --orange: var(--#{$prefix}text);
+  --purple: var(--#{$prefix}text);
+
+  // NOTE: breaks list-item-tints
+  --accentColor: var(--#{$prefix}text);
+  --accentColorEffective: var(--#{$prefix}text);
+}
+
 @mixin vt-toolbar-cell-offscreen-keyframe() {
   --toolbar-cell-scale: scale(var(--view-transition-toolbar-cell-offscreen-scale));
   --toolbar-cell-filter: blur(10px);
@@ -231,6 +258,12 @@
   }
 }
 
+@mixin set-label-font($value) {
+  --label--titlestack-font-size: var(--label-#{$value}-font-size);
+  --label--titlestack-line-height: var(--label-#{$value}-line-height);
+  --label--titlestack-font-weight: var(--label-#{$value}-font-weight);
+}
+
 @mixin if-iphone-landscape {
   @media (max-width: #{vars.$ipad-landscape-bp-max}) and (orientation: landscape) {
     @content;
@@ -285,6 +318,25 @@
   }
 }
 
+@mixin if-content-view-list {
+  @include if-2col-split-view-fits {
+    // is content-view!
+    navigation-split-view > scroll-view & {
+      @content;
+    }
+    // is content-view!
+    navigation-split-view:has(> [is='sidebar-view'])[preferred-compact-column='content']:not([column-visibility='double-column']) > body-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 & {
+      @content;
+    }
+  }
+}
+
 // Mixin for plain CSS (linear)
 @mixin write-props($props) {
   @each $prop, $val in $props {
@@ -349,6 +401,22 @@
   }
 }
 
+@mixin make-template($tokens, $prop) {
+  @each $template in $tokens {
+    $parts: string.split('#{$template}', ', ');
+    $result: '';
+    @each $part in $parts {
+      $result: $result + '#{$part},';
+    }
+    $result: string.slice($result, 1, string.length($result) - 1);
+    $final-result: functions.str-replace($result, 'minmax(0,1fr)', 'spacer');
+    @debug $final-result, $template;
+    :where(&[template='#{$final-result}']) {
+      #{$prop}: $template;
+    }
+  }
+}
+
 @mixin generate-color-tokens($tokens) {
   $media-variants: (
     base: '',

package/scss/placeholders/_buttons.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 
 @layer #{vars.$components-layer} {
@@ -8,13 +9,15 @@
 
       place-content: center;
 
+      position: relative;
+
       // SECTION: componentize
       @include mixins.componentize(btn);
 
-      --btnpadistart: var(--regular-btn-padding);
-      --btnpadiend: var(--regular-btn-padding);
-      --btnpadbstart: var(--regular-btn-padding);
-      --btnpadbend: var(--regular-btn-padding);
+      // --btnpadistart: var(--regular-btn-padding);
+      // --btnpadiend: var(--regular-btn-padding);
+      // --btnpadbstart: var(--regular-btn-padding);
+      // --btnpadbend: var(--regular-btn-padding);
 
       --btnradiustl: var(--regular-btn-border-radius);
       --btnradiustr: var(--regular-btn-border-radius);
@@ -22,13 +25,16 @@
       --btnradiusbr: var(--regular-btn-border-radius);
     }
 
-    @each $size, $media in vars.$button-sizes {
-      @if (regular != $size) {
-        :where(&[control-size='#{$size}']) {
-          --btnpadistart: var(--#{$size}-btn-padding);
-          --btnpadiend: var(--#{$size}-btn-padding);
-          --btnpadbstart: var(--#{$size}-btn-padding);
-          --btnpadbend: var(--#{$size}-btn-padding);
+    @include mixins.takeover-button-slots;
+
+    @each $size, $media in maps.$button-sizes-map {
+      // @if (regular != $size) {
+      &[control-size='#{$size}'] {
+        :where(&) {
+          // --btnpadistart: var(--#{$size}-btn-padding);
+          // --btnpadiend: var(--#{$size}-btn-padding);
+          // --btnpadbstart: var(--#{$size}-btn-padding);
+          // --btnpadbend: var(--#{$size}-btn-padding);
 
           --btnradiustl: var(--#{$size}-btn-border-radius);
           --btnradiustr: var(--#{$size}-btn-border-radius);
@@ -36,6 +42,15 @@
           --btnradiusbr: var(--#{$size}-btn-border-radius);
         }
       }
+      // }
+    }
+
+    &[control-size='small'] {
+      --label-font: callout;
+    }
+
+    &[control-size='mini'] {
+      --label-font: caption;
     }
   }
 }
@@ -54,6 +69,26 @@
   }
 }
 
+// @layer #{vars.$utils-layer} {
+//   %button {
+//     > [slot] {
+//       :where(&) {
+//         position: absolute;
+//       }
+//     }
+//     // &:has(> [slot='overlay'] > [slot='overlay']) {
+//     //   :where(&) {
+//     // display: grid;
+//     //   }
+//     // }
+//     &:not(:has(> :not([slot]))) > [slot='placeholder'] {
+//       :where(&) {
+//         position: relative;
+//       }
+//     }
+//   }
+// }
+
 @layer #{vars.$ui-layer} {
   // SECTION: componentize
   %button {

package/scss/placeholders/_lists.scss

@@ -1,7 +1,9 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+$list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker-view, menu-view, menu-view *, whatever-name)';
+
+@layer #{vars.$list-components-layer} {
   %list {
     :where(&) {
       background-color: var(--list--host-background-color,);
@@ -13,9 +15,9 @@
     }
 
     // componentize buttons
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name) {
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
       // :where(&:is(summary:not([is='disclosure-group'] [is='disclosure-group'] summary))) {
       //   box-shadow: inset 0 0 4px magenta;
       // }
@@ -76,19 +78,18 @@
     //   }
     // }
 
-    // SECTION: wire gaps
-    :not([slot], section-view) ~ section-view {
-      :where(&) {
+    // SECTION: wire gaps between
+    // NOTE: apply gap to top of sections when adjacent to any
+    // :not([slot], section-view) ~ section-view:not([slot]),
+    // section-view:not([slot]) ~ section-view:not([slot]) {
+    :not([slot]) ~ section-view:not([slot]) {
+      :where(&:not(menu-view *)) {
         padding-block-start: var(--list--section-gap,);
       }
     }
-    section-view:not([slot]) ~ section-view {
-      :where(&) {
-        padding-block-start: var(--list--section-gap,);
-      }
-    }
-    section-view:has(~ :not([slot], section-view)) {
-      :where(&) {
+    // NOTE: apply to bottom of sections when they have non-section adjacents
+    section-view:not([slot]):has(~ :not([slot], section-view)) {
+      :where(&:not(menu-view *)) {
         padding-block-end: var(--list--section-gap,);
       }
     }
@@ -97,29 +98,32 @@
     // padding-bottom: calc(var(--list--section-gap, 0px) / 2);
     //   }
     // }
-    :not([slot], [is='disclosure-group']) ~ [is='disclosure-group'] {
-      :where(&) {
+    // NOTE: apply gap to top of details when adjacent to any(except summary)
+    // :not([slot], [is='disclosure-group'], summary) ~ [is='disclosure-group']:not([slot]) {
+    :not([slot], summary) ~ [is='disclosure-group']:not([slot]) {
+      :where(&:not(menu-view *)) {
         margin-block-start: var(--list--details-gap,);
       }
     }
-    [is='disclosure-group']:not([slot]) ~ [is='disclosure-group'] {
-      :where(&) {
-        margin-block-start: calc(var(--list--details-gap, 0px) / 2);
-      }
-    }
-    [is='disclosure-group']:has(~ :not([slot], [is='disclosure-group'])) {
-      :where(&) {
+    // [is='disclosure-group']:not([slot]) ~ [is='disclosure-group']:not([slot]) {
+    //   :where(&:not(menu-view *)) {
+    //     margin-block-start: calc(var(--list--details-gap, 0px) / 2);
+    //   }
+    // }
+    // NOTE: apply to bottom of details when they have non-details adjacents
+    [is='disclosure-group']:not([slot]):has(~ :not([slot], [is='disclosure-group'])) {
+      :where(&:not(menu-view *)) {
         margin-block-end: var(--list--details-gap,);
       }
     }
-    [is='disclosure-group']:has(~ [is='disclosure-group']:not([slot])) {
-      :where(&) {
-        margin-block-end: calc(var(--list--details-gap, 0px) / 2);
-      }
-    }
+    // [is='disclosure-group']:not([slot]):has(~ [is='disclosure-group']:not([slot])) {
+    //   :where(&:not(menu-view *)) {
+    //     margin-block-end: calc(var(--list--details-gap, 0px) / 2);
+    //   }
+    // }
 
     // SECTION: wire paddings
-    :where(&) {
+    :where(&:not(menu-view *)) {
       --itempadistart: var(--list--item-padding-inline-start, 0rem);
       --itempadiend: calc(var(--list--item-padding-inline-end, 0rem) + var(--list--accessories-size, 0rem));
       --itempadbstart: var(--list--item-padding-block-start,);
@@ -140,14 +144,11 @@
     }
 
     // SECTION: overwrites for details
-    [is='disclosure-group'] {
+    [is='disclosure-group']:not(menu-view *) {
       > :not(summary) {
         :where(&) {
           --itemface: var(--list--details-background-color, var(--list--item-background-color,));
-          --itemhighlightface: var(
-            --list--selecteddetails-background-color,
-            var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-          );
+          --itemhighlightface: var(--list--selecteddetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
           --itemactiveface: var(--list--selecteddetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
 
           --itemtext: var(--list--details-color, var(--list--item-color,));
@@ -158,14 +159,8 @@
       > summary {
         :where([is='disclosure-group'][open] &) {
           --itemface: var(--list--opendetails-background-color, var(--list--item-background-color,));
-          --itemhighlightface: var(
-            --list--selectedopendetails-background-color,
-            var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-          );
-          --itemactiveface: var(
-            --list--selectedopendetails-background-color,
-            var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-          );
+          --itemhighlightface: var(--list--selectedopendetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
+          --itemactiveface: var(--list--selectedopendetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
 
           --itemtext: var(--list--opendetails-color, var(--list--item-color,));
           --itemhighlighttext: var(--list--selectedopendetails-color, var(--list--highlighteditem-color, var(--list--item-color,)));
@@ -186,20 +181,14 @@
             );
 
             --itemtext: var(--list--opensummary-color, var(--list--item-color,));
-            --itemhighlighttext: var(
-              --list--selectedopensummary-color,
-              var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-            );
-            --itemactivetext: var(
-              --list--selectedopensummary-color,
-              var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-            );
+            --itemhighlighttext: var(--list--selectedopensummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
+            --itemactivetext: var(--list--selectedopensummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
           }
         }
       }
     }
-    > [is='disclosure-group'],
-    > section-view > [is='disclosure-group'] {
+    > [is='disclosure-group']:not(menu-view *),
+    > section-view > [is='disclosure-group']:not(menu-view *) {
       --disclosure-style: var(--list--rootsummary-marker-display,);
 
       > summary {
@@ -215,14 +204,8 @@
           );
 
           --itemtext: var(--list--rootsummary-color, var(--list--item-color,));
-          --itemhighlighttext: var(
-            --list--selectedrootsummary-color,
-            var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-          );
-          --itemactivetext: var(
-            --list--selectedrootsummary-color,
-            var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-          );
+          --itemhighlighttext: var(--list--selectedrootsummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
+          --itemactivetext: var(--list--selectedrootsummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
 
           // overwrite extra stuff for rootsummary
           // outline: red solid 4px;
@@ -244,17 +227,11 @@
           --itemface: var(--list--rootsummary-background-color, var(--list--opensummary-background-color, var(--list--item-background-color,)));
           --itemhighlightface: var(
             --list--selectedrootsummary-background-color,
-            var(
-              --list--selectedopensummary-background-color,
-              var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
-            )
+            var(--list--selectedopensummary-background-color, var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,))))
           );
           --itemactiveface: var(
             --list--selectedrootsummary-background-color,
-            var(
-              --list--selectedopensummary-background-color,
-              var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
-            )
+            var(--list--selectedopensummary-background-color, var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,))))
           );
 
           --itemtext: var(--list--rootsummary-color, var(--list--opensummary-color, var(--list--item-color,)));
@@ -271,9 +248,9 @@
     }
 
     // SECTION: add borders + arrows
-    > :not([slot]) ~ :not([slot], section-view),
-    section-view > :not([slot]) ~ :not([slot], section-view),
-    [is='disclosure-group'] > :not([slot]) ~ :not([slot], section-view) {
+    > :not([slot]) ~ :not([slot], section-view, menu-view *),
+    section-view > :not([slot]) ~ :not([slot], section-view, menu-view *),
+    [is='disclosure-group'] > :not([slot]) ~ :not([slot], section-view, menu-view *) {
       :where(&) {
         position: relative;
 
@@ -319,9 +296,9 @@
     }
 
     // SECTION: sharpen top corners
-    > :not([slot]) ~ :not([slot], section-view),
-    section-view > :not([slot]) ~ :not([slot], section-view),
-    [is='disclosure-group'] > :not([slot]) ~ :not([slot]) {
+    > :not([slot]) ~ :not([slot], section-view, menu-view *),
+    section-view > :not([slot]) ~ :not([slot], section-view, menu-view *),
+    [is='disclosure-group'] > :not([slot]) ~ :not([slot], menu-view *) {
       :where(&) {
         // outline: yellow solid 5px;
         --itemradiustl: var(--list--adjacentitem-border-radius, var(--list--item-border-radius,)); //0 0;
@@ -340,10 +317,10 @@
     }
 
     // SECTION: sharpen bottom corners
-    > :not([slot]):has(~ :not([slot], section-view)),
-    section-view > :not([slot]):has(~ :not([slot], section-view)),
-    [is='disclosure-group'] > :not([slot], summary):has(~ :not([slot])),
-    [is='disclosure-group']:not([data-state='closed']) > summary {
+    > :not([slot]):has(~ :not([slot], section-view, menu-view *)),
+    section-view > :not([slot]):has(~ :not([slot], section-view, menu-view *)),
+    [is='disclosure-group'] > :not([slot], summary, menu-view *):has(~ :not([slot])),
+    [is='disclosure-group']:not([data-state='closed'], menu-view *) > summary {
       :where(&) {
         // outline: green solid 5px;
         --itemradiusbl: var(--list--adjacentitem-border-radius, var(--list--item-border-radius,)); //0 0;
@@ -374,31 +351,58 @@
     // }
 
     // SECTION: style section heders/footers
-    section-view:not(section-view section-view) {
-      :where(&)::part(section-footer-stack),
-      :where(&)::part(section-header-stack) {
-        // outline: magenta 4px solid;
-        padding-inline: calc(var(--list--root-padding-inline, 0px) + var(--itempadistart, 0px))
-          calc(var(--list--root-padding-inline, 0px) + var(--itempadiend, 0px));
+    section-view:not(section-view section-view, menu-view *) {
+      :where(&) {
+        &::part(section-footer-stack),
+        &::part(section-header-stack) {
+          // outline: magenta 4px solid;
+          padding-inline: calc(var(--list--root-padding-inline, 0px) + var(--itempadistart, 0px)) calc(var(--list--root-padding-inline, 0px) + var(--itempadiend, 0px));
 
-        margin-inline: calc(var(--list--root-padding-inline) * -1);
+          margin-inline: calc(var(--list--root-padding-inline) * -1);
 
-        padding-block: 1px;
-      }
+          padding-block: 1px;
+        }
 
-      :where(&)::part(section-header-stack) {
-        top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
+        &::part(section-header-stack) {
+          top: var(--list--sticky-block-size, 0px); // + var(--navigation-bar-block-size));
 
-        position: sticky;
+          position: sticky;
+
+          // backdrop-filter: blur(20px);
+
+          // text-shadow: 0 0 5px var(--face);
+        }
+      }
 
-        // backdrop-filter: blur(20px);
+      // &:is([list-style*='inset'] section-view, [form-style*='inset'] section-view) {
+      //   :where(&) {
+      //     &::part(section-header-stack) {
+      //       top: calc(var(--list--sticky-block-size, 0px) + 1rem);
+      //     }
+      //   }
+      // }
 
-        // text-shadow: 0 0 5px var(--face);
+      &:is(
+        scroll-view:has(
+            ~ tool-bar > [slot^='top-bar'],
+            ~ tool-bar > [slot='cancellation-action'],
+            ~ tool-bar > [slot='primary-action'],
+            ~ tool-bar > [slot='confirmation-action'],
+            ~ tool-bar > [slot='destructive-action']
+          )
+          section-view,
+        scroll-view:has(> [slot^='top-bar'], > [slot='cancellation-action'], > [slot='primary-action'], > [slot='confirmation-action'], > [slot='destructive-action']) section-view
+      ) {
+        :where(&) {
+          &::part(section-header-stack) {
+            top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
+          }
+        }
       }
     }
 
     // SECTION: Enable 2-col layout
-    &[columns='2'] {
+    &[columns='2']:not(menu-view *) {
       :where(&) {
         --list--host-grid-template-columns: repeat(2, minmax(0, 1fr));
 
@@ -482,26 +486,11 @@
 
     // SECTION: add accessories
     // &:has(summary[marker-placement='leading']) {
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name) {
-      // --itempadistart: 4rem;
-
-      // --item-accessory-size: 24px;
-
-      // --list--item-grid-template-columns: minmax(0, 1fr) 50px;
-
-      // &:not(:is(button)) {
-      //   --list--accessories-display: none;
-      //   // --list--accessories-padding-inline-end: 24px;
-      // }
-
-      // &:is(button) {
-      // position: relative;
-      // display: grid;
-      // grid-template-columns: minmax(0, 1fr) 24px;
-
-      &:is(button) {
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
+      // NOTE: drill-in chevron show up only on nav-link buttons. Paddings and all other props have already been taken over!
+      &:is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]) {
         :where(&) {
           position: relative;
 
@@ -522,7 +511,6 @@
           }
         }
       }
-      // }
     }
     // }
     // [is='disclosure-group'] summary [slot='marker'] {
@@ -533,23 +521,62 @@
     //     --itempadistart: calc(calc(var(--root-font-size) * 1px) * var(--list--accessory-size) + var(--list--item-padding-inline-start, 0px));
     //   }
     // }
+
+    // SECTION: add tints
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
+      // NOTE: drill-in chevron show up only on nav-link buttons. Paddings and all other props have already been taken over!
+      // &:is(button:not([is='navigation-link'])) {
+      //   :where(&) {
+      //     --itemtext: blue;
+      //   }
+      // }
+      &:is(label-view[list-item-tint]) {
+        :where(&[list-item-tint] > [slot='icon']) {
+          color: var(--accentColor);
+        }
+      }
+      // &:is(button[list-item-tint='red']) {
+      //   :where(&) {
+      //     --itemtext: red;
+
+      //     --insetgroupedlist-highlighteditem-background-color:red;
+      //     --insetgroupedlist-highlighteditem-color:red;
+      //   }
+      // }
+    }
+
+    // // SECTION: add searchable
+    // > [slot='searchable'] {
+    //   :where(&) {
+    //     position: sticky;
+
+    //     top: 20px
+
+    //     background: red;
+    //   }
+    // }
   }
 }
 
 @layer #{vars.$colors-layer} {
   // componentize
   %list {
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name) {
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
       @include mixins.add-focus-visible-state {
         --itemface: var(--itemhighlightface,);
         --itemtext: var(--itemhighlighttext,);
 
         --list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
 
-        --secondary: var(--itemtext);
-        --blue: var(--itemtext);
+        > * {
+          @include mixins.takeover-color-vars(item);
+          // --secondary: var(--itemtext);
+          // --blue: var(--itemtext);
+        }
       }
     }
   }
@@ -558,9 +585,9 @@
 @layer #{vars.$ui-layer} {
   // componentize
   %list {
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name) {
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
       // :where(&:is(button)) {
       @include mixins.add-jsactive-state {
         --itemface: var(--itemactiveface,);
@@ -568,8 +595,11 @@
 
         --list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
 
-        --secondary: var(--itemtext);
-        --blue: var(--itemtext);
+        > * {
+          @include mixins.takeover-color-vars(item);
+        }
+        // --secondary: var(--itemtext);
+        // --blue: var(--itemtext);
       }
 
       &[aria-selected='true'] {
@@ -579,8 +609,11 @@
 
           --list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
 
-          --secondary: var(--itemtext);
-          --blue: var(--itemtext);
+          > * {
+            @include mixins.takeover-color-vars(item);
+            // --secondary: var(--itemtext);
+            // --blue: var(--itemtext);
+          }
         }
       }
       // }