@swiftwc/ui 0.0.0-dev.65 → 0.0.0-dev.67

package/generated/css/index.css

@@ -843,6 +843,7 @@
     --red: var(--itemtext);
     --green: var(--itemtext);
     --orange: var(--itemtext);
+    --purple: var(--itemtext);
     --accentColor: var(--itemtext);
     --accentColorEffective: var(--itemtext);
   }
@@ -871,6 +872,7 @@
     --red: var(--itemtext);
     --green: var(--itemtext);
     --orange: var(--itemtext);
+    --purple: var(--itemtext);
     --accentColor: var(--itemtext);
     --accentColorEffective: var(--itemtext);
   }
@@ -897,6 +899,7 @@
     --red: var(--itemtext);
     --green: var(--itemtext);
     --orange: var(--itemtext);
+    --purple: var(--itemtext);
     --accentColor: var(--itemtext);
     --accentColorEffective: var(--itemtext);
   }
@@ -1131,6 +1134,10 @@
   :where(table-view)::part(table-footer-leading-stack),
   :where(table-view)::part(table-footer-principal-stack),
   :where(table-view)::part(table-footer-trailing-stack),
+  :where(toggle-view)::part(toggle-stack),
+  :where(toggle-view)::part(toggle-label-stack),
+  :where(toggle-view)::part(toggle-input-stack),
+  :where(toggle-view)::part(text-field-form-input),
   :where(text-field)::part(text-field-stack),
   :where(text-field)::part(text-field-label-stack),
   :where(text-field)::part(text-field-input-stack),
@@ -1418,8 +1425,8 @@
   :where(detail-placeholder > scroll-view) {
     overflow: clip auto;
     pointer-events: all;
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     container: scroll-view/size;
     padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
     padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
@@ -1908,8 +1915,8 @@
   }
   :where(navigation-stack > scroll-view, navigation-split-view > scroll-view, [is=sidebar-view] > scroll-view, body-view > scroll-view, [is=full-screen] > scroll-view, [is=sheet-view] > scroll-view) {
     overflow: clip auto;
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
     padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
     container: scroll-view/size;
@@ -1990,8 +1997,6 @@
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack,
   scroll-view-proxy:has(> v-stack, > h-stack) > h-stack) {
     position: relative;
-    overscroll-behavior: contain;
-    -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
     container: scroll-view-proxy/inline-size;
   }
@@ -2007,10 +2012,14 @@
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack) {
     overflow: clip auto;
     scroll-snap-type: block mandatory;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-block: contain;
   }
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack) {
     overflow: auto clip;
     scroll-snap-type: inline mandatory;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-inline: contain;
   }
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack[padding]) {
     scroll-padding-inline: 1rem;
@@ -2036,9 +2045,36 @@
   :where(h-stack[template="auto spacer auto"]) {
     grid-template-columns: auto minmax(0, 1fr) auto;
   }
+  :where(h-stack[template="repeat(1,spacer)"]) {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(2,spacer)"]) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(3,spacer)"]) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   :where(h-stack[template="repeat(4,spacer)"]) {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  :where(h-stack[template="repeat(5,spacer)"]) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(6,spacer)"]) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(7,spacer)"]) {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(8,spacer)"]) {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(9,spacer)"]) {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(10,spacer)"]) {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
   :where(h-stack[template="repeat(2,spacer) auto"]) {
     grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
   }
@@ -2414,6 +2450,7 @@
     --red: var(--btntext);
     --green: var(--btntext);
     --orange: var(--btntext);
+    --purple: var(--btntext);
     --accentColor: var(--btntext);
     --accentColorEffective: var(--btntext);
   }
@@ -2541,6 +2578,7 @@
     --red: var(--btntext);
     --green: var(--btntext);
     --orange: var(--btntext);
+    --purple: var(--btntext);
     --accentColor: var(--btntext);
     --accentColorEffective: var(--btntext);
   }
@@ -2570,14 +2608,6 @@
     grid-template-rows: auto 1fr auto;
     grid-template-areas: "top-bar" "spacer" "bottom-bar";
   }
-  :where(tool-bar > *:not(sidebar-toggle), tool-bar > sidebar-toggle > tool-bar-item, tab-view > sidebar-toggle > tool-bar-item, navigation-split-view > sidebar-toggle > tool-bar-item) {
-    backdrop-filter: var(--liquid-glass-backdrop-filter);
-    box-shadow: var(--toolbar-cell-box-shadow);
-    min-inline-size: var(--toolbar-cell-min-size);
-    transform: var(--toolbar-cell-scale, );
-    filter: var(--toolbar-cell-filter, );
-    opacity: var(--toolbar-cell-opacity, );
-  }
   :where(tool-bar)::part(top-bar), :where(tool-bar)::part(bottom-bar) {
     position: relative;
     padding-inline: var(--safe-area-inset-left, 0px) var(--safe-area-inset-right, 0px);
@@ -2604,6 +2634,14 @@
     column-gap: var(--toolbar-col-gap);
     padding-inline: var(--toolbar-col-gap) var(--toolbar-col-gap);
   }
+  :where(tool-bar > *:not(sidebar-toggle), tool-bar > sidebar-toggle > tool-bar-item, tab-view > sidebar-toggle > tool-bar-item, navigation-split-view > sidebar-toggle > tool-bar-item) {
+    backdrop-filter: var(--liquid-glass-backdrop-filter);
+    box-shadow: var(--toolbar-cell-box-shadow);
+    min-inline-size: var(--toolbar-cell-min-size);
+    transform: var(--toolbar-cell-scale, );
+    filter: var(--toolbar-cell-filter, );
+    opacity: var(--toolbar-cell-opacity, );
+  }
   @media (min-width: 37rem) and (min-height: 27.75rem) {
     :where([is=sheet-view] tool-bar)::part(top-bar), :where([is=sheet-view] tool-bar)::part(bottom-bar) {
       --safe-area-inset-left: 0px;
@@ -3083,6 +3121,52 @@
     }
   }
 }
+@layer sw-components {
+  :where(toggle-view) {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    --toggle--trigger-bg: lightgray;
+  }
+  :where(toggle-view)::part(toggle-stack) {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    column-gap: var(--labeled-content-column-gap);
+  }
+  :where(toggle-view)::part(toggle-label-stack) {
+    color: var(--secondary);
+  }
+  :where(toggle-view)::part(toggle-input-stack) {
+    place-items: stretch;
+    place-content: stretch;
+  }
+  :where(toggle-view)::part(toggle-form-input):focus {
+    outline: blue solid 5px;
+  }
+  :where(toggle-view)::part(toggle-form-input) {
+    text-align: end;
+    position: relative;
+    display: grid;
+    outline: red solid 3px;
+    border-radius: 2rem;
+    inline-size: 4rem;
+    block-size: 1rem;
+    background: var(--toggle--trigger-bg);
+  }
+  :where(toggle-view)::part(toggle-form-input)::before {
+    content: "";
+    display: grid;
+    position: absolute;
+    inset: 0 auto auto 0;
+    inline-size: 1rem;
+    block-size: 1rem;
+    border-radius: 1rem;
+    backdrop-filter: var(--liquid-glass-backdrop-filter);
+    box-shadow: var(--liquid-glass-box-shadow);
+  }
+  toggle-view[aria-checked=true] {
+    --toggle--trigger-bg: green;
+  }
+}
 @layer sw-components {
   :where(labeled-content) {
     container: labeled-content/inline-size;
@@ -3245,8 +3329,8 @@
     pointer-events: none;
   }
   :where(menu-view)::part(menu-form) {
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     --menu--dialog-max-inline-size: anchor-size();
     --menu--dialog-max-block-size: anchor-size();
   }
@@ -3297,7 +3381,7 @@
     --menu--dialog-max-inline-size: anchor-size();
     --menu--dialog-max-block-size: anchor-size();
   }
-  menu-view[open]:not(tool-bar-item > menu-view) {
+  :where(menu-view[open]:not(tool-bar-item > menu-view)) {
     --menu--summary-scale: scale(0.01);
     --menu--summary-filter: blur(10px);
   }
@@ -3364,6 +3448,7 @@
     --red: var(--menuitemtext);
     --green: var(--menuitemtext);
     --orange: var(--menuitemtext);
+    --purple: var(--menuitemtext);
     --accentColor: var(--menuitemtext);
     --accentColorEffective: var(--menuitemtext);
   }
@@ -3378,6 +3463,7 @@
       --red: var(--menuitemtext);
       --green: var(--menuitemtext);
       --orange: var(--menuitemtext);
+      --purple: var(--menuitemtext);
       --accentColor: var(--menuitemtext);
       --accentColorEffective: var(--menuitemtext);
     }
@@ -3393,6 +3479,7 @@
     --red: var(--menuitemtext);
     --green: var(--menuitemtext);
     --orange: var(--menuitemtext);
+    --purple: var(--menuitemtext);
     --accentColor: var(--menuitemtext);
     --accentColorEffective: var(--menuitemtext);
   }
@@ -3405,6 +3492,7 @@
       --red: var(--menuitemtext);
       --green: var(--menuitemtext);
       --orange: var(--menuitemtext);
+      --purple: var(--menuitemtext);
       --accentColor: var(--menuitemtext);
       --accentColorEffective: var(--menuitemtext);
     }
@@ -4200,6 +4288,21 @@
     grid-template-areas: "header" "main" "footer";
     gap: 0.5rem;
   }
+  :where(section-view)::part(section-header-stack), :where(section-view)::part(section-footer-stack) {
+    pointer-events: none;
+  }
+  :where(section-view)::part(section-header-stack) {
+    grid-area: header;
+  }
+  :where(section-view)::part(section-main-stack) {
+    grid-area: main;
+  }
+  :where(section-view)::part(section-footer-stack) {
+    grid-area: footer;
+  }
+  :where(section-view)::part(section-header-stack) {
+    order: -1;
+  }
   :where(section-view:has(> [slot=header]):not(:has(> [slot=footer]))) {
     grid-template-rows: auto minmax(max-content, 1fr);
     grid-template-areas: "header" "main";
@@ -4218,21 +4321,6 @@
   :where(section-view:not(:has(> [slot=footer])))::part(section-footer-stack) {
     display: none;
   }
-  :where(section-view)::part(section-header-stack), :where(section-view)::part(section-footer-stack) {
-    pointer-events: none;
-  }
-  :where(section-view)::part(section-header-stack) {
-    grid-area: header;
-  }
-  :where(section-view)::part(section-main-stack) {
-    grid-area: main;
-  }
-  :where(section-view)::part(section-footer-stack) {
-    grid-area: footer;
-  }
-  :where(section-view)::part(section-header-stack) {
-    order: -1;
-  }
   section-view {
     /*  :where(&:not(& &))::part(section-footer-stack),
     :where(&:not(& &))::part(section-header-stack) {
@@ -4293,7 +4381,7 @@
     border-radius: 0 0 var(--insetlist-item-border-radius) var(--insetlist-item-border-radius);
     border-top: 1px solid var(--separator);
   }
-  :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-header-leading-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-header-principal-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-header-trailing-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-footer-leading-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-footer-principal-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-footer-trailing-stack) {
+  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-header-leading-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-header-principal-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-header-trailing-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-footer-leading-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-footer-principal-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-footer-trailing-stack) {
     grid-auto-flow: column;
     grid-template-columns: minmax(0, 1fr);
     column-gap: var(--toolbar-col-gap);
@@ -5308,8 +5396,8 @@
     z-index: -1;
   }
   :where([is=tab-bar] > [is=form-view]) {
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     pointer-events: all;
     touch-action: none;
     grid-auto-flow: column;
@@ -5541,6 +5629,9 @@
   :where([foreground=orange]) {
     color: var(--orange);
   }
+  :where([foreground=purple]) {
+    color: var(--purple);
+  }
   :where([foreground="blue.secondary"]) {
     color: var(--blue2);
   }
@@ -5553,6 +5644,9 @@
   :where([foreground="orange.secondary"]) {
     color: var(--orange2);
   }
+  :where([foreground="purple.secondary"]) {
+    color: var(--purple2);
+  }
   :where([foreground="blue.tertiary"]) {
     color: var(--blue3);
   }
@@ -5565,6 +5659,9 @@
   :where([foreground="orange.tertiary"]) {
     color: var(--orange3);
   }
+  :where([foreground="purple.tertiary"]) {
+    color: var(--purple3);
+  }
   :where([foreground="blue.quaternary"]) {
     color: var(--blue4);
   }
@@ -5577,6 +5674,9 @@
   :where([foreground="orange.quaternary"]) {
     color: var(--orange4);
   }
+  :where([foreground="purple.quaternary"]) {
+    color: var(--purple4);
+  }
   :where([foreground="blue.quinary"]) {
     color: var(--blue5);
   }
@@ -5589,6 +5689,9 @@
   :where([foreground="orange.quinary"]) {
     color: var(--orange5);
   }
+  :where([foreground="purple.quinary"]) {
+    color: var(--purple5);
+  }
   :where([tint=gray],
   [list-item-tint=gray]) {
     --accentColorEffective: var(--gray);
@@ -8676,6 +8779,7 @@
     --red: var(--toolbaritemtext);
     --green: var(--toolbaritemtext);
     --orange: var(--toolbaritemtext);
+    --purple: var(--toolbaritemtext);
     --accentColor: var(--toolbaritemtext);
     --accentColorEffective: var(--toolbaritemtext);
   }

package/generated/events/index.d.ts

@@ -6,3 +6,4 @@ export * from './picker-view';
 export * from './scroll-view';
 export * from './tab-view';
 export * from './text-field';
+export * from './toggle-view';

package/generated/events/index.js

@@ -6,3 +6,4 @@ export * from './picker-view';
 export * from './scroll-view';
 export * from './tab-view';
 export * from './text-field';
+export * from './toggle-view';

package/generated/events/toggle-view.d.ts

@@ -0,0 +1,9 @@
+export type ToggleChangeDetail = {
+    isOn: boolean;
+    value: string | null;
+};
+declare global {
+    interface HTMLElementEventMap {
+        change: CustomEvent<ToggleChangeDetail>;
+    }
+}

package/generated/events/toggle-view.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.65",
+  "version": "0.0.0-dev.67",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/_components.scss

@@ -52,6 +52,8 @@
 
 @forward 'components/label-view';
 
+@forward 'components/toggle-view';
+
 @forward 'components/labeled-content';
 
 // @forward 'components/button-view';

package/scss/components/_date-picker.scss

@@ -5,26 +5,26 @@
     :where(&) {
       grid-template-columns: minmax(0, 1fr);
       grid-template-rows: minmax(0, 1fr);
-    }
 
-    :where(&)::part(date-picker-stack) {
-      grid-template-columns: auto minmax(0, 1fr);
-      grid-template-rows: minmax(0, 1fr);
-    }
+      &::part(date-picker-stack) {
+        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-rows: minmax(0, 1fr);
+      }
 
-    :where(&)::part(date-picker-label-stack) {
-      // display: grid;
-    }
+      &::part(date-picker-label-stack) {
+        // display: grid;
+      }
 
-    :where(&)::part(date-picker-input-stack) {
-      place-items: stretch;
-      place-content: stretch;
+      &::part(date-picker-input-stack) {
+        place-items: stretch;
+        place-content: stretch;
 
-      grid-auto-flow: column;
-    }
+        grid-auto-flow: column;
+      }
 
-    :where(&)::part(date-picker-form-input) {
-      text-align: end;
+      &::part(date-picker-form-input) {
+        text-align: end;
+      }
     }
   }
 }

package/scss/components/_h-stack.scss

@@ -3,7 +3,23 @@
 @use 'sass:string';
 @use 'sass:list';
 
-$h-stack-templates: ((auto minmax(0, 1fr)), (minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (auto minmax(0, 1fr) auto), (repeat(4, minmax(0, 1fr))), (repeat(2, minmax(0, 1fr)) auto));
+$h-stack-templates: (
+  (auto minmax(0, 1fr)),
+  (minmax(0, 1fr) auto),
+  (auto minmax(0, 1fr) auto auto),
+  (auto minmax(0, 1fr) auto),
+  (repeat(1, minmax(0, 1fr))),
+  (repeat(2, minmax(0, 1fr))),
+  (repeat(3, minmax(0, 1fr))),
+  (repeat(4, minmax(0, 1fr))),
+  (repeat(5, minmax(0, 1fr))),
+  (repeat(6, minmax(0, 1fr))),
+  (repeat(7, minmax(0, 1fr))),
+  (repeat(8, minmax(0, 1fr))),
+  (repeat(9, minmax(0, 1fr))),
+  (repeat(10, minmax(0, 1fr))),
+  (repeat(2, minmax(0, 1fr)) auto)
+);
 
 @layer #{vars.$components-layer} {
   h-stack {

package/scss/components/_index.scss

@@ -70,6 +70,10 @@
   :where(table-view)::part(table-footer-leading-stack),
   :where(table-view)::part(table-footer-principal-stack),
   :where(table-view)::part(table-footer-trailing-stack),
+  :where(toggle-view)::part(toggle-stack),
+  :where(toggle-view)::part(toggle-label-stack),
+  :where(toggle-view)::part(toggle-input-stack),
+  :where(toggle-view)::part(text-field-form-input),
   :where(text-field)::part(text-field-stack),
   :where(text-field)::part(text-field-label-stack),
   :where(text-field)::part(text-field-input-stack),

package/scss/components/_menu-view.scss

@@ -5,74 +5,76 @@
 
 @layer #{vars.$components-layer} {
   menu-view {
-    :where(&)::part(menu-summary) {
-      transform: var(--menu--summary-scale,);
+    :where(&) {
+      &::part(menu-summary) {
+        transform: var(--menu--summary-scale,);
 
-      filter: var(--menu--summary-filter,);
-    }
+        filter: var(--menu--summary-filter,);
+      }
 
-    :where(&)::part(menu-scrollable) {
-      @include mixins.make-scrollable(true);
+      &::part(menu-scrollable) {
+        @include mixins.make-scrollable(true);
 
-      padding: var(--menu-padding);
-    }
+        padding: var(--menu-padding);
+      }
 
-    :where(&)::part(menu-form) {
-      // min-inline-size: 200px; // FIXME: del this
-      inline-size: max-content; //var(--menu-inline-size);
-      block-size: min-content;
+      &::part(menu-form) {
+        // min-inline-size: 200px; // FIXME: del this
+        inline-size: max-content; //var(--menu-inline-size);
+        block-size: min-content;
 
-      max-inline-size: var(--menu-max-inline-size,);
-      max-block-size: var(--menu-max-block-size,);
+        max-inline-size: var(--menu-max-inline-size,);
+        max-block-size: var(--menu-max-block-size,);
 
-      overflow: clip auto;
-      border-radius: inherit;
+        overflow: clip auto;
+        border-radius: inherit;
 
-      background-color: light-dark(var(--menu-bg), var(--menu-bg-dark));
-      // border: transparent solid 20px; //make sure bezel is not covered
+        background-color: light-dark(var(--menu-bg), var(--menu-bg-dark));
+        // border: transparent solid 20px; //make sure bezel is not covered
 
-      @include mixins.make-scrollable;
-      @include mixins.contain-overscroll;
+        @include mixins.make-scrollable;
+        @include mixins.contain-overscroll;
 
-      // touch-action: all;
+        // touch-action: all;
 
-      --menu--dialog-max-inline-size: anchor-size();
-      --menu--dialog-max-block-size: anchor-size();
-    }
+        --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);
-      --menu--summary-scale: ;
-      --menu--summary-filter: ;
+        // finally
+        --menu--dialog-scale: scale(0);
+        --menu--summary-scale: ;
+        --menu--summary-filter: ;
+      }
     }
 
     &[open] {
@@ -104,9 +106,11 @@
     // &[open] > &[open],
     // &[open]:not(tool-bar-item &) {
     &[open]:not(tool-bar-item > &) {
-      --menu--summary-scale: scale(0.01);
+      :where(&) {
+        --menu--summary-scale: scale(0.01);
 
-      --menu--summary-filter: blur(10px);
+        --menu--summary-filter: blur(10px);
+      }
     }
 
     // :where(& > *) {