@swiftwc/ui 0.0.0-dev.22 → 0.0.0-dev.24

package/generated/css/index.css

@@ -45,6 +45,18 @@
   :root {
     --liquid-glass-bg: oklch(var(--liquid-glass-bg-lch) / var(--liquid-glass-bg-alpha));
     --liquid-glass-bg-dark: oklch(var(--liquid-glass-bg-lch-dark) / var(--liquid-glass-bg-alpha-dark));
+    --clear-glass-bg: var(--liquid-glass-bg);
+    --clear-glass-bg-dark: var(--liquid-glass-bg-dark);
+    --clear-glass-focus-bg: var(--clear-glass-bg);
+    --clear-glass-focus-bg-dark: var(--clear-glass-bg-dark);
+    --clear-glass-active-bg: var(--clear-glass-bg);
+    --clear-glass-active-bg-dark: var(--clear-glass-bg-dark);
+    --control-clear-glass-bg: var(--liquid-glass-bg);
+    --control-clear-glass-bg-dark: var(--liquid-glass-bg-dark);
+    --control-clear-glass-focus-bg: var(--control-clear-glass-bg);
+    --control-clear-glass-focus-bg-dark: var(--control-clear-glass-bg-dark);
+    --control-clear-glass-active-bg: var(--control-clear-glass-bg);
+    --control-clear-glass-active-bg-dark: var(--control-clear-glass-bg-dark);
     --liquid-glass-backdrop-filter: saturate(180%) blur(16px);
     --liquid-glass-bs-bevel-highlight: inset -1px -1px 0 -0.5px light-dark(#fff, #fff6);
     --liquid-glass-bs-soft-bevel-blur: inset 1px 1px 0 -0.5px light-dark(#fff, #fff6);
@@ -52,27 +64,20 @@
     --liquid-glass-box-shadow:
       var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), inset 3px 3px 10px -3px light-dark(#ddd, #262626), inset -3px -3px 10px -3px light-dark(#ddd, #262626),
       inset 0 0 5px 1px light-dark(#fff, #141414), inset 0 0 0 0.5px light-dark(#00000040, #ffffff26), inset 0 0 24px 0 light-dark(#0000001a, #ffffff0d), var(--liquid-glass-bs-outer);
+    --control-clear-glass-box-shadow: var(--liquid-glass-box-shadow);
     --navigation-bar-block-size: var(--tool-bar-block-size);
     --nav-split-view-sidebar-inline-size: 20rem;
     --nav-split-view-content-inline-size: 25rem;
-    --nav-split-view-separator-color: var(--divider);
-    --nav-split-view-separator-color-dark: var(--divider-dark);
-    --primary-label: oklch(0 0 0);
-    --primary-label-dark: oklch(1 0 0);
-    --secondary-text: oklch(0 0 0);
-    --secondary-text-dark: oklch(1 0 0);
+    --secondary-text: var(--black);
+    --secondary-text-dark: var(--white);
     --tint: oklch(0.5325 0.1899 257.12);
     --tint1g: color-mix(in oklch, white 70%, var(--tint));
     --tint2: color-mix(in oklch, white 80%, var(--tint));
     --tint3: color-mix(in oklch, white 90%, var(--tint));
     --tintcontrast: white;
-    --divider: oklch(0.9431 0 0);
-    --divider-dark: oklch(0.2858 0.0036 286.17);
-    --system-bg: oklch(1 0 0);
-    --system-bg-dark: oklch(0 0 0);
-    --primary-bg: oklch(0.9566 0.0067 286.27);
-    --primary-bg-dark: oklch(0 0 0);
-    --primary-grouped-bg: oklch(1 0 0);
+    --system-bg: var(--white);
+    --system-bg-dark: var(--black);
+    --primary-grouped-bg: var(--white);
     --primary-grouped-bg-dark: oklch(0.8136 0.0428 255.03);
     --secondary-bg: oklch(0.8045 0.0779 73.42);
     --secondary-bg-dark: oklch(0.8045 0.0779 73.42);
@@ -89,37 +94,33 @@
     --pill-border-radius: 99999px;
     --clear: transparent;
     --toolbar-col-gap: 0.5rem;
-    --toolbar-cell-bg: var(--liquid-glass-bg);
-    --toolbar-cell-bg-dark: var(--liquid-glass-bg-dark);
+    --toolbar-cell-bg: var(--control-clear-glass-bg);
+    --toolbar-cell-bg-dark: var(--control-clear-glass-bg-dark);
     --toolbar-cell-inline-padding-start: 0.25rem;
     --toolbar-cell-inline-padding-end: 0.25rem;
     --toolbar-cell-block-padding-start: 0.25rem;
     --toolbar-cell-block-padding-end: 0.25rem;
     --toolbar-cell-border-radius: var(--pill-border-radius);
     --toolbar-cell-min-size: 2.8rem;
-    --toolbar-cell-focus-bg: var(--toolbar-cell-bg);
-    --toolbar-cell-focus-bg-dark: var(--toolbar-cell-bg-dark);
-    --toolbar-cell-active-bg: var(--toolbar-cell-bg);
-    --toolbar-cell-active-bg-dark: var(--toolbar-cell-bg-dark);
-    --toolbar-cell-box-shadow: var(--liquid-glass-box-shadow);
-    --menu-bg: var(--liquid-glass-bg);
-    --menu-bg-dark: var(--liquid-glass-bg-dark);
+    --toolbar-cell-focus-bg: var(--control-clear-glass-focus-bg);
+    --toolbar-cell-focus-bg-dark: var(--control-clear-glass-focus-bg-dark);
+    --toolbar-cell-active-bg: var(--control-clear-glass-active-bg);
+    --toolbar-cell-active-bg-dark: var(--control-clear-glass-active-bg-dark);
+    --toolbar-cell-box-shadow: var(--control-clear-glass-box-shadow);
+    --menu-bg: var(--control-clear-glass-bg);
+    --menu-bg-dark: var(--control-clear-glass-bg-dark);
     --menu-max-inline-size: 15rem;
     --menu-max-block-size: 60vh;
     --menu-spacing: 1rem;
     --menu-host-offscreen-transform: scale(0);
     --menu-host-offscreen-filter: blur(10px);
-    --menu-popover-box-shadow: var(--liquid-glass-box-shadow);
+    --menu-popover-box-shadow: var(--control-clear-glass-box-shadow);
     --menu-padding: 0.5rem;
     --menu-item-padding-inline-start: 1rem;
     --menu-item-padding-inline-end: 1rem;
     --menu-item-padding-block-start: 0.5rem;
     --menu-item-padding-block-end: 0.5rem;
     --menu-item-border-radius: 1.2rem;
-    --menu-item-focus-bg: oklch(0 0 0 / 0%);
-    --menu-item-focus-bg-dark: oklch(0 0 0 / 0%);
-    --menu-item-active-bg: oklch(0 0 0 / 20%);
-    --menu-item-active-bg-dark: oklch(1 0 0 / 20%);
     --touchglass-transition-duration: 300ms;
     --disclosure-group-animation-duration: 300ms;
     --disclosure-group-animation-easing: ease-out;
@@ -255,12 +256,6 @@
     --table-col-gap: 1rem;
     --table-accessory-gap: 0.2rem;
     --table-accessory-size: 1.2rem;
-    --glass-btn-bg: var(--liquid-glass-bg);
-    --glass-btn-bg-dark: var(--liquid-glass-bg-dark);
-    --glass-btn-focus-bg: var(--glass-btn-bg);
-    --glass-btn-focus-bg-dark: var(--glass-btn-bg-dark);
-    --glass-btn-active-bg: var(--glass-btn-bg);
-    --glass-btn-active-bg-dark: var(--glass-btn-bg-dark);
     --mini-btn-padding: 0.2rem;
     --mini-btn-padding: 0.2rem;
     --mini-btn-border-radius: 1rem;
@@ -277,6 +272,8 @@
     --large-btn-padding: 1.2rem;
     --large-btn-border-radius: 2.4rem;
     --large-btn-border-radius: 2.4rem;
+    --picker-affordance-size: 1rem;
+    --picker-affordance-col-gap: 1rem;
   }
   @media (pointer: fine) {
     :root {
@@ -296,32 +293,13 @@
       --large-btn-padding: 1.2rem;
       --large-btn-border-radius: 1.4rem;
       --large-btn-border-radius: 1.4rem;
-      --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);
-      --noglass-bg: oklch(1 0 0);
-      --noglass-bg-dark: oklch(0.2871 0.0029 17.33);
-      --toolbar-cell-bg: var(--noglass-bg);
-      --toolbar-cell-bg-dark: var(--noglass-bg-dark);
-      --toolbar-cell-focus-bg: oklch(0.9551 0 0);
-      --toolbar-cell-focus-bg-dark: oklch(0.3578 0.008 75.3);
-      --toolbar-cell-active-bg: oklch(0.9128 0 0);
-      --toolbar-cell-active-bg-dark: oklch(0.3995 0.0077 75.32);
-      --menu-bg: var(--noglass-bg);
-      --menu-bg-dark: var(--noglass-bg-dark);
-      --toolbar-cell-box-shadow: var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), var(--liquid-glass-bs-outer);
-      --menu-popover-box-shadow: var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), var(--liquid-glass-bs-outer);
-      --menu-item-focus-color: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-      --menu-item-focus-color-dark: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-      --menu-item-active-color: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-      --menu-item-active-color-dark: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-      --menu-item-focus-bg: var(--accentColor);
-      --menu-item-focus-bg-dark: var(--accentColor);
-      --menu-item-active-bg: oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h);
-      --menu-item-active-bg-dark: oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.2), c) h);
-      --picker-affordance-size: 1rem;
-      --picker-affordance-col-gap: 1rem;
+      --control-clear-glass-bg: var(--white);
+      --control-clear-glass-bg-dark: oklch(0.2871 0.0029 17.33);
+      --control-clear-glass-focus-bg: var(--gray5);
+      --control-clear-glass-focus-bg-dark: oklch(0.3578 0.008 75.3);
+      --control-clear-glass-active-bg: var(--gray3);
+      --control-clear-glass-active-bg-dark: oklch(0.3995 0.0077 75.32);
+      --control-clear-glass-box-shadow: var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), var(--liquid-glass-bs-outer);
     }
   }
   html:has(color-scheme[dark]) {
@@ -412,6 +390,11 @@
   html {
     transition: font-size 1ms step-start;
   }
+  @media (pointer: fine) {
+    html {
+      font-size: 14px;
+    }
+  }
   html::before {
     content: "delete-button-icon=trash&confirm-button-icon=check&close-button-icon=x&cancel-button-icon=x&ipad-sheet-view-height=27.75rem&ipad-sheet-view-inline-size=37rem&vt-fwd-class-name=fwd";
     display: none;
@@ -892,9 +875,6 @@
   :where([is=glass-prominent-button] > [slot], [is=glass-button] > [slot], [is=bordered-prominent-button] > [slot], [is=bordered-button] > [slot], [is=borderless-button] > [slot], [is=plain-button] > [slot]) {
     position: absolute;
     visibility: collapse;
-    max-inline-size: 90%;
-    max-block-size: 90%;
-    border-radius: inherit;
   }
   :where([is=glass-prominent-button] > [slot=overlay], [is=glass-button] > [slot=overlay], [is=bordered-prominent-button] > [slot=overlay], [is=bordered-button] > [slot=overlay], [is=borderless-button] > [slot=overlay], [is=plain-button] > [slot=overlay]) {
     visibility: visible;
@@ -906,8 +886,10 @@
   :where([is=glass-prominent-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=glass-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=bordered-prominent-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=bordered-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=borderless-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=plain-button]:has(> [slot=overlay]) > *:not([slot=overlay])) {
     opacity: 0;
   }
-  :where([is=glass-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=glass-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-button]:has(> [slot=overlay]) > [slot=overlay], [is=borderless-button]:has(> [slot=overlay]) > [slot=overlay], [is=plain-button]:has(> [slot=overlay]) > [slot=overlay]) {
-    transition: opacity ease-out 200ms;
+  @media (prefers-reduced-motion: no-preference) {
+    :where([is=glass-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=glass-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-button]:has(> [slot=overlay]) > [slot=overlay], [is=borderless-button]:has(> [slot=overlay]) > [slot=overlay], [is=plain-button]:has(> [slot=overlay]) > [slot=overlay]) {
+      transition: opacity ease-out 200ms;
+    }
   }
   @starting-style {
     :where([is=glass-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=glass-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-button]:has(> [slot=overlay]) > [slot=overlay], [is=borderless-button]:has(> [slot=overlay]) > [slot=overlay], [is=plain-button]:has(> [slot=overlay]) > [slot=overlay]) {
@@ -1055,8 +1037,10 @@
   list-view:not([hidden]),
   table-view:not([hidden]),
   content-unavailable-view:not([hidden]),
+  progress-view:not([hidden]),
   tool-bar-item:not([hidden]),
   tool-bar-item-group:not([hidden]),
+  fine-tooltip:not([hidden]),
   sidebar-toggle:not([hidden]),
   [is=form-view]:not([hidden]),
   v-stack:not([hidden]),
@@ -1070,6 +1054,7 @@
   picker-view:not([hidden])) {
     display: grid;
   }
+  :where(progress-view)::part(progress-control),
   :where(content-unavailable-view)::part(content-unavailable-title-stack),
   :where(content-unavailable-view)::part(content-unavailable-description-stack),
   :where(content-unavailable-view)::part(content-unavailable-actions-stack),
@@ -1128,8 +1113,7 @@
   tool-bar-item > input,
   [is=tab-bar] [is=tab-item],
   tool-bar-item [is=disclosure-group] > button,
-  tool-bar-item [is=disclosure-group] > summary),
-  :where(menu-view)::part(menu-summary) {
+  tool-bar-item [is=disclosure-group] > summary) {
     appearance: none;
     -webkit-appearance: none;
     border: var(--toolbaritemborder,);
@@ -1145,7 +1129,6 @@
   tool-bar-item > button:not(:disabled):not([readonly]),
   tool-bar-item > input:not(:disabled):not([readonly]),
   [is=tab-bar] [is=tab-item]:not(:disabled):not([readonly]),
-  menu-view > button:not(:disabled):not([readonly]),
   tool-bar-item [is=disclosure-group] > button:not(:disabled):not([readonly]),
   tool-bar-item [is=disclosure-group] > summary:not(:disabled):not([readonly])):focus-visible {
     outline: none;
@@ -1154,7 +1137,6 @@
   tool-bar-item > button:not(:disabled):not([readonly]),
   tool-bar-item > input:not(:disabled):not([readonly]),
   [is=tab-bar] [is=tab-item]:not(:disabled):not([readonly]),
-  menu-view > button:not(:disabled):not([readonly]),
   tool-bar-item [is=disclosure-group] > button:not(:disabled):not([readonly]),
   tool-bar-item [is=disclosure-group] > summary:not(:disabled):not([readonly])):focus-visible {
     --toolbaritemface: var(--toolbaritemhighlightface,);
@@ -1165,42 +1147,23 @@
     tool-bar-item > button:not(:disabled):not([readonly]),
     tool-bar-item > input:not(:disabled):not([readonly]),
     [is=tab-bar] [is=tab-item]:not(:disabled):not([readonly]),
-    menu-view > button:not(:disabled):not([readonly]),
     tool-bar-item [is=disclosure-group] > button:not(:disabled):not([readonly]),
     tool-bar-item [is=disclosure-group] > summary:not(:disabled):not([readonly])):hover {
       --toolbaritemface: var(--toolbaritemhighlightface,);
       --toolbaritemtext: var(--toolbaritemhighlighttext,);
     }
   }
-  :where(menu-view:not(:disabled):not([readonly])):focus-visible {
-    outline: none;
-  }
-  :where(menu-view:not(:disabled):not([readonly])):focus-visible::part(menu-summary) {
-    --toolbaritemface: var(--toolbaritemhighlightface,);
-    --toolbaritemtext: var(--toolbaritemhighlighttext,);
-  }
-  @media (pointer: fine) {
-    :where(menu-view:not(:disabled):not([readonly])):hover::part(menu-summary) {
-      --toolbaritemface: var(--toolbaritemhighlightface,);
-      --toolbaritemtext: var(--toolbaritemhighlighttext,);
-    }
-  }
 }
 @layer sw-actions {
   :where(sidebar-toggle > button:not(:disabled):not([readonly]),
   tool-bar-item > button:not(:disabled):not([readonly]),
   tool-bar-item > input:not(:disabled):not([readonly]),
   [is=tab-bar] [is=tab-item]:not(:disabled):not([readonly]),
-  menu-view > button:not(:disabled):not([readonly]),
   tool-bar-item [is=disclosure-group] > button:not(:disabled):not([readonly]),
   tool-bar-item [is=disclosure-group] > summary:not(:disabled):not([readonly])):active {
     --toolbaritemface: var(--toolbaritemactiveface,);
     --toolbaritemtext: var(--toolbaritemactivetext,);
   }
-  :where(menu-view:not(:disabled):not([readonly])):active::part(menu-summary) {
-    --toolbaritemface: var(--toolbaritemactiveface,);
-    --toolbaritemtext: var(--toolbaritemactivetext,);
-  }
 }
 @layer sw-components {
   :where(v-keyboard) {
@@ -1467,6 +1430,140 @@
     }
   }
 }
+@property --progress-view-style-index {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
+@layer sw-components {
+  :where(progress-view) {
+    transition: --progress-view-style-index 1ms step-start;
+    grid-template-columns: minmax(0, 1fr);
+    place-items: center;
+    place-content: center;
+    gap: 0.3rem;
+  }
+  :where(progress-view)::part(progress-line-control) {
+    background-color: var(--gray3);
+    inline-size: 100%;
+    block-size: 5px;
+    border-radius: var(--pill-border-radius);
+    border-left: solid 40px var(--accentColorEffective, var(--accentColor));
+  }
+  :where(progress-view)::part(progress-circular-control) {
+    position: relative;
+    inline-size: 2rem;
+    block-size: 2rem;
+  }
+  :where(progress-view)::part(progress-circular-blade) {
+    position: absolute;
+    inset: 32.5% auto auto 42.5%;
+    inline-size: 12.5%;
+    block-size: 32.5%;
+    background-color: var(--accentColorEffective, var(--secondary));
+    border-radius: var(--pill-border-radius);
+    will-change: opacity;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    :where(progress-view)::part(progress-circular-blade) {
+      animation: progressViewCircular 1s linear infinite;
+    }
+  }
+  :where(progress-view)::part(progress-circular-blade-1) {
+    transform: rotate(45deg) translateY(-100%);
+    animation-delay: -1.625s;
+  }
+  :where(progress-view)::part(progress-circular-blade-2) {
+    transform: rotate(90deg) translateY(-100%);
+    animation-delay: -1.5s;
+  }
+  :where(progress-view)::part(progress-circular-blade-3) {
+    transform: rotate(135deg) translateY(-100%);
+    animation-delay: -1.375s;
+  }
+  :where(progress-view)::part(progress-circular-blade-4) {
+    transform: rotate(180deg) translateY(-100%);
+    animation-delay: -1.25s;
+  }
+  :where(progress-view)::part(progress-circular-blade-5) {
+    transform: rotate(225deg) translateY(-100%);
+    animation-delay: -1.125s;
+  }
+  :where(progress-view)::part(progress-circular-blade-6) {
+    transform: rotate(270deg) translateY(-100%);
+    animation-delay: -1s;
+  }
+  :where(progress-view)::part(progress-circular-blade-7) {
+    transform: rotate(315deg) translateY(-100%);
+    animation-delay: -0.875s;
+  }
+  :where(progress-view)::part(progress-circular-blade-8) {
+    transform: rotate(360deg) translateY(-100%);
+    animation-delay: -0.75s;
+  }
+  :where(progress-view[progress-view-style=circular]) {
+    --progress-view-style-index: 0;
+  }
+  :where(progress-view[progress-view-style=linear]) {
+    --progress-view-style-index: 1;
+  }
+}
+@layer sw-tab-components {
+  :where(fine-tooltip) {
+    color: var(--text, );
+    pointer-events: none;
+    touch-action: none;
+    position: fixed;
+    inline-size: max-content;
+    block-size: max-content;
+    height: auto;
+    max-inline-size: 80vw;
+    max-block-size: 80vh;
+    margin-block: var(--tooltip--dialog-margin-block, );
+    margin-inline: var(--tooltip--dialog-margin-inline, );
+    transform: var(--tooltip--dialog-scale, ) var(--tooltip--dialog-translate, );
+    opacity: var(--tooltip--dialog-opacity, );
+    transform-origin: top;
+    position-anchor: --fine-tooltip;
+    position-area: bottom center;
+    overflow: clip;
+    border-radius: 0.9rem;
+    backdrop-filter: var(--liquid-glass-backdrop-filter, );
+    box-shadow: var(--menu-popover-box-shadow, );
+    padding-block: 0.5rem;
+    padding-inline: 1rem;
+    gap: 0.5rem;
+    border: none;
+    position-try-fallbacks: --custom-top;
+    position-try-order: most-height;
+    position-visibility: anchors-visible;
+    --tooltip--dialog-translate: translateY(-10%);
+    --tooltip--dialog-scale: scale(0.9);
+    --tooltip--dialog-opacity: 0;
+  }
+  :where(fine-tooltip[open]) {
+    --tooltip--dialog-margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
+    --tooltip--dialog-margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
+    --tooltip--dialog-translate: translateY(0);
+    --tooltip--dialog-scale: scale(1);
+    --tooltip--dialog-opacity: 0.9;
+  }
+  @starting-style {
+    :where(fine-tooltip[open]) {
+      --tooltip--dialog-translate: translateY(-10%);
+      --tooltip--dialog-scale: scale(0.9);
+      --tooltip--dialog-opacity: 0;
+    }
+  }
+  :where(fine-tooltip[closing]) {
+    --tooltip--dialog-translate: translateY(-10%);
+    --tooltip--dialog-scale: scale(0.9);
+    --tooltip--dialog-opacity: 0;
+  }
+}
+@position-try --custom-top {
+  position-area: top center;
+}
 @property --stuck {
   syntax: "<number>";
   inherits: false;
@@ -1569,7 +1666,7 @@
   }
   content-unavailable-view > :not([slot]) {
     --label-image-size: 5;
-    --label-gap: 1rem;
+    --label-gap: 1;
   }
   :where(content-unavailable-view:not(:has(> [slot=description])))::part(content-unavailable-description-stack) {
     display: none;
@@ -1613,7 +1710,7 @@
     backdrop-filter: var(--liquid-glass-backdrop-filter, );
     box-shadow: var(--menu-popover-box-shadow, );
     padding-block: 1rem;
-    padding-inline: 1em;
+    padding-inline: 1rem;
     gap: 0.5rem;
     --confirmation--dialog-scale: scale(0);
   }
@@ -1660,18 +1757,17 @@
     height: auto;
     max-inline-size: min(20rem, 80vw);
     max-block-size: 80vh;
-    margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
-    margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
+    margin-block: auto;
+    margin-inline: auto;
     transform: var(--alert--dialog-scale, );
     opacity: var(--alert--dialog-opacity, );
-    position-anchor: --alert-dialog;
-    position-area: center;
+    place-self: center;
     overflow: clip;
     border-radius: 0.9rem;
     backdrop-filter: var(--liquid-glass-backdrop-filter, );
     box-shadow: var(--menu-popover-box-shadow, );
     padding-block: 1rem;
-    padding-inline: 1em;
+    padding-inline: 1rem;
     gap: 1rem;
     --alert--dialog-scale: scale(1.2);
     --alert--dialog-opacity: 0.8;
@@ -1816,19 +1912,19 @@
     place-content: safe center;
     gap: 1rem;
   }
-  :where(h-stack[template="minmax(0,1fr) auto"]) {
+  :where(h-stack[template="spacer auto"]) {
     grid-template-columns: minmax(0, 1fr) auto;
   }
-  :where(h-stack[template="auto minmax(0,1fr) auto auto"]) {
+  :where(h-stack[template="auto spacer auto auto"]) {
     grid-template-columns: auto minmax(0, 1fr) auto auto;
   }
-  :where(h-stack[template="auto minmax(0,1fr) auto"]) {
+  :where(h-stack[template="auto spacer auto"]) {
     grid-template-columns: auto minmax(0, 1fr) auto;
   }
-  :where(h-stack[template="repeat(4,minmax(0,1fr))"]) {
+  :where(h-stack[template="repeat(4,spacer)"]) {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-  :where(h-stack[template="repeat(2,minmax(0,1fr)) auto"]) {
+  :where(h-stack[template="repeat(2,spacer) auto"]) {
     grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
   }
 }
@@ -1839,16 +1935,16 @@
     place-content: safe center;
     gap: 1rem;
   }
-  :where(v-stack[template="auto minmax(0,1fr)"]) {
+  :where(v-stack[template="auto spacer"]) {
     grid-template-rows: auto minmax(0, 1fr);
   }
-  :where(v-stack[template="auto auto minmax(0,1fr)"]) {
+  :where(v-stack[template="auto auto spacer"]) {
     grid-template-rows: auto auto minmax(0, 1fr);
   }
-  :where(v-stack[template="auto auto auto minmax(0,1fr)"]) {
+  :where(v-stack[template="auto auto auto spacer"]) {
     grid-template-rows: auto auto auto minmax(0, 1fr);
   }
-  :where(v-stack[template="auto auto auto auto minmax(0,1fr)"]) {
+  :where(v-stack[template="auto auto auto auto spacer"]) {
     grid-template-rows: auto auto auto auto minmax(0, 1fr);
   }
 }
@@ -1983,6 +2079,11 @@
     --toolbaritemradiusbl: var(--toolbar-cell-border-radius);
     --toolbaritemradiusbr: var(--toolbar-cell-border-radius);
     --toolbaritemborder: 0;
+    --menusummaryradiustl: var(--toolbar-cell-border-radius);
+    --menusummaryradiustr: var(--toolbar-cell-border-radius);
+    --menusummaryradiusbl: var(--toolbar-cell-border-radius);
+    --menusummaryradiusbr: var(--toolbar-cell-border-radius);
+    --menusummaryborder: 0;
   }
   :where(tool-bar-item:has([disabled])) {
     pointer-events: none;
@@ -1991,35 +2092,37 @@
     place-items: center;
     place-content: center;
   }
-  :where(tool-bar-item > button:has(> label-view > :not([slot])) > label-view,
-  tool-bar-item > picker-view > menu-view:has(> label-view > :not([slot])) > label-view,
-  tool-bar-item > menu-view:has(> label-view > :not([slot])) > label-view) {
-    --label-padding-inline: 0.5rem;
+  :where(tool-bar-item > button > [slot]) {
+    position: absolute;
+    visibility: collapse;
   }
-  @media (pointer: fine) {
-    :where(tool-bar-item > button > label-view,
-    tool-bar-item > menu-view > label-view) {
-      --label-image-size: 1.8;
-    }
+  :where(tool-bar-item > button > [slot=overlay]) {
+    visibility: visible;
   }
-}
-@layer sw-colors {
-  :where(menu-view:not(:disabled):not([readonly])):focus-visible {
-    outline: none;
+  :where(tool-bar-item > button:not(:has(> :not([slot]))) > [slot=placeholder]) {
+    position: relative;
+    visibility: visible;
   }
-  :where(menu-view:not(:disabled):not([readonly])):focus-visible::part(menu-summary) {
-    --toolbaritemface: var(--toolbaritemhighlightface,);
+  :where(tool-bar-item > button:has(> [slot=overlay]) > *:not([slot=overlay])) {
+    opacity: 0;
   }
-  @media (pointer: fine) {
-    :where(menu-view:not(:disabled):not([readonly])):hover::part(menu-summary) {
-      --toolbaritemface: var(--toolbaritemhighlightface,);
+  @media (prefers-reduced-motion: no-preference) {
+    :where(tool-bar-item > button:has(> [slot=overlay]) > [slot=overlay]) {
+      transition: opacity ease-out 200ms;
     }
   }
+  @starting-style {
+    :where(tool-bar-item > button:has(> [slot=overlay]) > [slot=overlay]) {
+      opacity: 0;
+    }
+  }
+  :where(tool-bar-item > button:has(> label-view > :not([slot])) > label-view,
+  tool-bar-item > picker-view > menu-view:has(> label-view > :not([slot])) > label-view,
+  tool-bar-item > menu-view:has(> label-view > :not([slot])) > label-view) {
+    --label-padding-inline: 0.5rem;
+  }
 }
 @layer sw-actions {
-  :where(menu-view:not(:disabled):not([readonly])):active::part(menu-summary) {
-    --toolbaritemface: var(--toolbaritemactiveface,);
-  }
   :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);
@@ -2055,6 +2158,8 @@
     --btnpadbend: 0.1rem;
   }
   :where([is=borderless-button][role=destructive]) {
+    --accentColorEffective: var(--red);
+    --accentColorEffective4: var(--red4);
     --accentColor: var(--red);
     --accentColor2: var(--red2);
     --accentColor3: var(--red3);
@@ -2104,6 +2209,8 @@
     --btnpadbend: var(--large-btn-padding);
   }
   :where([is=bordered-button][role=destructive]) {
+    --accentColorEffective: var(--red);
+    --accentColorEffective4: var(--red4);
     --accentColor: var(--red);
     --accentColor2: var(--red2);
     --accentColor3: var(--red3);
@@ -2148,6 +2255,8 @@
     --btnpadbend: var(--large-btn-padding);
   }
   :where([is=bordered-prominent-button][role=destructive]) {
+    --accentColorEffective: var(--red);
+    --accentColorEffective4: var(--red4);
     --accentColor: var(--red);
     --accentColor2: var(--red2);
     --accentColor3: var(--red3);
@@ -2195,6 +2304,8 @@
     --btnpadbend: var(--large-btn-padding);
   }
   :where([is=glass-button][role=destructive]) {
+    --accentColorEffective: var(--red);
+    --accentColorEffective4: var(--red4);
     --accentColor: var(--red);
     --accentColor2: var(--red2);
     --accentColor3: var(--red3);
@@ -2242,6 +2353,8 @@
     --btnpadbend: var(--large-btn-padding);
   }
   :where([is=glass-prominent-button][role=destructive]) {
+    --accentColorEffective: var(--red);
+    --accentColorEffective4: var(--red4);
     --accentColor: var(--red);
     --accentColor2: var(--red2);
     --accentColor3: var(--red3);
@@ -2323,9 +2436,9 @@
   }
 }
 @property --label-gap {
-  syntax: "<length>";
+  syntax: "<number>";
   inherits: false;
-  initial-value: 0;
+  initial-value: 0.3;
 }
 @property --label-image-size {
   syntax: "<number>";
@@ -2344,31 +2457,10 @@
     justify-items: var(--label--host-justify-items, );
     grid-template-columns: var(--label--host-grid-template-columns, );
     grid-template-rows: var(--label--host-grid-template-rows, );
-    gap: var(--label--host-gap, );
+    gap: calc(var(--label-gap) * 1rem);
     --label-imagestack-fontsize: calc(var(--label-image-size) * 1rem);
     white-space: var(--label--host-white-space, );
   }
-  :where(label-view)::part(label-image-stack), :where(label-view)::part(label-title-stack) {
-    grid-auto-columns: minmax(0, 1fr);
-    grid-auto-rows: minmax(0, 1fr);
-  }
-  :where(label-view)::part(label-image-stack) {
-    display: var(--label--iconstack-display, none);
-  }
-  :where(label-view)::part(label-title-stack) {
-    display: var(--label--titlestack-display, none);
-  }
-  :where(label-view)::part(label-image-stack) {
-    aspect-ratio: 1/1;
-    inline-size: var(--label-imagestack-fontsize);
-    font-size: var(--label-imagestack-fontsize);
-  }
-  :where(label-view)::part(label-title-stack) {
-    text-decoration: underline;
-    font-size: var(--label--titlestack-font-size, );
-    line-height: var(--label--titlestack-line-height, );
-    font-weight: var(--label--titlestack-font-weight, );
-  }
   :where(label-view:has(> [slot=image])) {
     --label--has-icon: yes;
   }
@@ -2382,6 +2474,16 @@
     -webkit-box-orient: var(--label--box-orient, );
     line-clamp: var(--label--line-clamp, );
     -webkit-line-clamp: var(--label--line-clamp, );
+    text-decoration: underline;
+    font-size: var(--label--titlestack-font-size, );
+    line-height: var(--label--titlestack-line-height, );
+    font-weight: var(--label--titlestack-font-weight, );
+  }
+  label-view > [slot=image] {
+    aspect-ratio: 1/1;
+    inline-size: var(--label-imagestack-fontsize);
+    block-size: var(--label-imagestack-fontsize);
+    font-size: var(--label-imagestack-fontsize);
   }
   @supports (x: if(else:red)) {
     :where(label-view) {
@@ -2406,27 +2508,17 @@
           style(--label-style: title-and-icon): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ;
           else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ; else: minmax(0, 1fr) ;) ;
       );
-      --label-gap: if(style(--label-style: title-and-icon): 0.3rem ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): 0.3rem ;) ;);
-      --label--host-gap: if(style(--label-style: title-and-icon): var(--label-gap) ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): var(--label-gap) ;) ;);
-      --label--iconstack-display: if(
-        style(--label-style: icon-only): grid ; style(--label-style: title-only): none ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-icon: yes): grid ; else: none;) ;
-      );
-      --label--titlestack-display: if(
-        style(--label-style: icon-only): none ; style(--label-style: title-only): grid ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-title: yes): grid ; else: none;) ;
-      );
     }
   }
   @supports not (x: if(else:red)) {
     @container style(--label-style: icon-only) {
       :where(label-view:not([label-style])) {
         --label-style: icon-only;
-        --label--iconstack-display: grid;
       }
     }
     @container style(--label-style: title-only) {
       :where(label-view:not([label-style])) {
         --label-style: title-only;
-        --label--titlestack-display: grid;
       }
     }
     @container style(--label-style: title-and-icon) {
@@ -2436,19 +2528,13 @@
         --label--host-grid-template-rows: minmax(0, 1fr);
         --label--host-align-items: center;
         --label--host-justify-items: normal;
-        --label-gap: 0.3rem;
-        --label--host-gap: var(--label-gap);
-        --label--iconstack-display: grid;
-        --label--titlestack-display: grid;
       }
     }
     :where(label-view[label-style=icon-only]) {
       --label-style: icon-only;
-      --label--iconstack-display: grid;
     }
     :where(label-view[label-style=title-only]) {
       --label-style: title-only;
-      --label--titlestack-display: grid;
     }
     :where(label-view[label-style=title-and-icon]) {
       --label-style: title-and-icon;
@@ -2456,10 +2542,6 @@
       --label--host-grid-template-rows: minmax(0, 1fr);
       --label--host-align-items: center;
       --label--host-justify-items: normal;
-      --label-gap: 0.3rem;
-      --label--host-gap: var(--label-gap);
-      --label--iconstack-display: grid;
-      --label--titlestack-display: grid;
     }
     @container not style(--label-style) {
       :where(label-view:not([label-style]):has(> [slot=image]):has(> :not([slot]))) {
@@ -2468,30 +2550,22 @@
         --label--host-grid-template-rows: minmax(0, 1fr);
         --label--host-align-items: center;
         --label--host-justify-items: normal;
-        --label-gap: 0.3rem;
-        --label--host-gap: var(--label-gap);
-        --label--iconstack-display: grid;
-        --label--titlestack-display: grid;
       }
       :where(label-view:not([label-style]):has(> [slot=image]):not(:has(> :not([slot])))) {
         --label-style: icon-only;
-        --label--iconstack-display: grid;
       }
       :where(label-view:not([label-style]):has(> :not([slot])):not(:has(> [slot=image]))) {
         --label-style: title-only;
-        --label--titlestack-display: grid;
       }
     }
     @container style(--label-style: icon-only) and style(--label-flow: vertical) {
       :where(label-view:not([label-style])) {
         --label-style: icon-only;
-        --label--iconstack-display: grid;
       }
     }
     @container style(--label-style: title-only) and style(--label-flow: vertical) {
       :where(label-view:not([label-style])) {
         --label-style: title-only;
-        --label--titlestack-display: grid;
       }
     }
     @container style(--label-style: title-and-icon) and style(--label-flow: vertical) {
@@ -2501,20 +2575,14 @@
         --label--host-grid-template-rows: auto minmax(0, 1fr);
         --label--host-align-items: normal;
         --label--host-justify-items: center;
-        --label-gap: 0.3rem;
-        --label--host-gap: var(--label-gap);
-        --label--iconstack-display: grid;
-        --label--titlestack-display: grid;
       }
     }
     @container style(--label-flow: vertical) {
       :where(label-view[label-style=icon-only]) {
         --label-style: icon-only;
-        --label--iconstack-display: grid;
       }
       :where(label-view[label-style=title-only]) {
         --label-style: title-only;
-        --label--titlestack-display: grid;
       }
       :where(label-view[label-style=title-and-icon]) {
         --label-style: title-and-icon;
@@ -2522,10 +2590,6 @@
         --label--host-grid-template-rows: auto minmax(0, 1fr);
         --label--host-align-items: normal;
         --label--host-justify-items: center;
-        --label-gap: 0.3rem;
-        --label--host-gap: var(--label-gap);
-        --label--iconstack-display: grid;
-        --label--titlestack-display: grid;
       }
     }
     @container (not style(--label-style)) and style(--label-flow: vertical) {
@@ -2535,18 +2599,12 @@
         --label--host-grid-template-rows: auto minmax(0, 1fr);
         --label--host-align-items: normal;
         --label--host-justify-items: center;
-        --label-gap: 0.3rem;
-        --label--host-gap: var(--label-gap);
-        --label--iconstack-display: grid;
-        --label--titlestack-display: grid;
       }
       :where(label-view:not([label-style]):has(> [slot=image]):not(:has(> :not([slot])))) {
         --label-style: icon-only;
-        --label--iconstack-display: grid;
       }
       :where(label-view:not([label-style]):has(> :not([slot])):not(:has(> [slot=image]))) {
         --label-style: title-only;
-        --label--titlestack-display: grid;
       }
     }
     @container style(--label-line-limit: 1) {
@@ -2958,6 +3016,16 @@
     --menu--summary-scale: scale(0.01);
     --menu--summary-filter: blur(10px);
   }
+  :where(menu-view)::part(menu-summary) {
+    appearance: none;
+    -webkit-appearance: none;
+    border: var(--menusummaryborder,);
+    background: var(--menusummaryface,);
+    color: var(--menusummarytext,);
+    padding-inline: var(--menusummarypadistart,) var(--menusummarypadiend,);
+    padding-block: var(--menusummarypadbstart,) var(--menusummarypadbend,);
+    border-radius: var(--menusummaryradiustl,) var(--menusummaryradiustr,) var(--menusummaryradiusbr,) var(--menusummaryradiusbl,);
+  }
   :where(menu-view > button, menu-view > [is=disclosure-group] > button, menu-view > [is=disclosure-group] > summary), :where(menu-view > menu-view)::part(menu-summary) {
     appearance: none;
     -webkit-appearance: none;
@@ -2980,6 +3048,19 @@
   }
 }
 @layer sw-colors {
+  :where(menu-view:not(:disabled):not([readonly])):focus-visible {
+    outline: none;
+  }
+  :where(menu-view:not(:disabled):not([readonly])):focus-visible::part(menu-summary) {
+    --menusummaryface: var(--menusummaryhighlightface,);
+    --menusummarytext: var(--menusummaryhighlighttext,);
+  }
+  @media (pointer: fine) {
+    :where(menu-view:not(:disabled):not([readonly])):hover::part(menu-summary) {
+      --menusummaryface: var(--menusummaryhighlightface,);
+      --menusummarytext: var(--menusummaryhighlighttext,);
+    }
+  }
   :where(menu-view > button:not(:disabled):not([readonly]),
   menu-view > [is=disclosure-group] > button:not(:disabled):not([readonly]),
   menu-view > [is=disclosure-group] > summary:not(:disabled):not([readonly])):focus-visible {
@@ -3022,6 +3103,10 @@
   }
 }
 @layer sw-actions {
+  :where(menu-view:not(:disabled):not([readonly])):active::part(menu-summary) {
+    --menusummaryface: var(--menusummaryactiveface,);
+    --menusummarytext: var(--menusummaryactivetext,);
+  }
   :where(menu-view > button:not(:disabled):not([readonly]),
   menu-view > [is=disclosure-group] > button:not(:disabled):not([readonly]),
   menu-view > [is=disclosure-group] > summary:not(:disabled):not([readonly])):active {
@@ -4248,7 +4333,7 @@
       --toolbar-cell-opacity: 1;
     }
     :where(navigation-split-view > 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);
     }
     :where(navigation-split-view > body-view scroll-view:not(dialog scroll-view):not(scroll-view scroll-view), navigation-split-view > body-view scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) ~ tool-bar) {
       margin-inline-start: var(--nav-split-view--content-inline-size);
@@ -4289,7 +4374,7 @@
       --safe-area-inset-left: 0px;
     }
     :where(navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column])[preferred-compact-column=content] > body-view > 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);
     }
     :where(navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column])[preferred-compact-column=content] > body-view > scroll-view ~ tool-bar > tool-bar-item,
     navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column])[preferred-compact-column=content] > body-view > scroll-view ~ tool-bar > tool-bar-item-group) {
@@ -4325,7 +4410,7 @@
       --safe-area-inset-right: 0px;
     }
     :where(navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column]) > body-view > 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);
     }
     :where(navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column]) > body-view > body-view scroll-view:not(dialog scroll-view):not(scroll-view scroll-view), navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column]) > body-view > body-view scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) ~ tool-bar) {
       --safe-area-inset-left: 0px;
@@ -4860,6 +4945,8 @@
     color: var(--blue2);
   }
   :where([tint=gray]) {
+    --accentColorEffective: var(--gray);
+    --accentColorEffective4: var(--gray4);
     --accentColor: var(--gray);
     --accentColor2: var(--gray2);
     --accentColor3: var(--gray3);
@@ -4870,6 +4957,8 @@
     --accentSubtle: var(--gray4);
   }
   :where([tint=blue]) {
+    --accentColorEffective: var(--blue);
+    --accentColorEffective4: var(--blue4);
     --accentColor: var(--blue);
     --accentColor2: var(--blue2);
     --accentColor3: var(--blue3);
@@ -4880,6 +4969,8 @@
     --accentSubtle: var(--blue4);
   }
   :where([tint=red]) {
+    --accentColorEffective: var(--red);
+    --accentColorEffective4: var(--red4);
     --accentColor: var(--red);
     --accentColor2: var(--red2);
     --accentColor3: var(--red3);
@@ -6618,6 +6709,19 @@
     }
   }
 }
+@layer sw-transitions {
+  @media (prefers-reduced-motion: no-preference) {
+    :where(fine-tooltip) {
+      transition: opacity 150ms allow-discrete ease-out, transform 150ms allow-discrete ease-out;
+      transition-delay: 200ms;
+      will-change: opacity, transform;
+    }
+    :where(fine-tooltip[closing]) {
+      transition-duration: 100ms;
+      transition-delay: 0ms;
+    }
+  }
+}
 @layer sw-transitions {
   @media (prefers-reduced-motion: no-preference) {
     :where(menu-view)::part(menu-summary) {
@@ -6629,6 +6733,19 @@
     }
   }
 }
+@layer sw-transitions {
+  @keyframes progressViewCircular {
+    0% {
+      opacity: 0.85;
+    }
+    50% {
+      opacity: 0.25;
+    }
+    100% {
+      opacity: 0.25;
+    }
+  }
+}
 @layer sw-transitions {
   @media (prefers-reduced-motion: no-preference) {
     :where([is=glass-button]) {
@@ -7587,6 +7704,11 @@
   initial-value: oklch(100% 0 0deg);
   inherits: true;
 }
+@property --clear {
+  syntax: "<color>";
+  initial-value: oklch(0% 0 0deg / 0);
+  inherits: true;
+}
 @layer sw-colors {
   :root {
     --face: var(--background);
@@ -7626,29 +7748,48 @@
     --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
     --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
   }
-  :where(tool-bar-item[tint],
+  :where(tool-bar-item[tint], [tint] tool-bar-item,
   tool-bar-item-group[tint],
-  navigation-split-view sidebar-toggle[tint]) {
-    --toolbaritemtext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-    --toolbaritemhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-    --toolbaritemactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-    --toolbaritemface: var(--accentColor);
-    --toolbaritemhighlightface: light-dark(
-      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h)
-    );
+  [tint] tool-bar-item-group,
+  navigation-split-view sidebar-toggle[tint],
+  [tint] navigation-split-view sidebar-toggle) {
+    --toolbaritemface: light-dark(var(--accentColor), var(--accentColor));
+    --toolbaritemtext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+    --toolbaritemhighlightface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h));
+    --toolbaritemhighlighttext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
     --toolbaritemactiveface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h));
+    --toolbaritemactivetext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
   }
-  :where(sidebar-toggle,
-  menu-view) {
+  :where(sidebar-toggle) {
     --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
     --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
   }
   :where(menu-view) {
-    --menuitemhighlighttext: light-dark(var(--menu-item-focus-color), var(--menu-item-focus-color-dark));
-    --menuitemhighlightface: light-dark(var(--menu-item-focus-bg), var(--menu-item-focus-bg-dark));
-    --menuitemactivetext: light-dark(var(--menu-item-active-color), var(--menu-item-active-color-dark));
-    --menuitemactiveface: light-dark(var(--menu-item-active-bg), var(--menu-item-active-bg-dark));
+    --menuitemhighlightface: light-dark(var(--clear), var(--clear));
+    --menuitemactiveface: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%));
+  }
+  @media (pointer: fine) {
+    :where(menu-view) {
+      --menuitemhighlightface: light-dark(var(--accentColor), var(--accentColor));
+      --menuitemhighlighttext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+      --menuitemactivetext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+      --menuitemactiveface: light-dark(
+        oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h),
+        oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.2), c) h)
+      );
+    }
+  }
+  :where(menu-view) {
+    --menusummaryhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+    --menusummaryactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
+  }
+  :where(tool-bar-item > picker-view > menu-view, tool-bar-item > menu-view) {
+    --menusummaryface: var(--toolbaritemface);
+    --menusummaryhighlightface: var(--toolbaritemhighlightface);
+    --menusummaryactiveface: var(--toolbaritemactiveface);
+    --menusummarytext: var(--toolbaritemtext);
+    --menusummaryhighlighttext: var(--toolbaritemhighlighttext);
+    --menusummaryactivetext: var(--toolbaritemactivetext);
   }
   :where([is=confirmation-dialog], [is=alert-dialog]) {
     --dialogbtnface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
@@ -7661,23 +7802,23 @@
     --btnactivetext: light-dark(oklch(from var(--accentColor) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h));
   }
   :where([is=bordered-button]) {
-    --btntext: var(--accentEmphasis, var(--accentColor));
+    --btntext: var(--accentColorEffective, var(--accentColor));
     --btnhighlighttext: light-dark(
-      oklch(from var(--accentEmphasis, var(--accentColor)) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h)
+      oklch(from var(--accentColorEffective, var(--accentColor)) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h),
+      oklch(from var(--accentColorEffective, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h)
     );
     --btnactivetext: light-dark(
-      oklch(from var(--accentEmphasis, var(--accentColor)) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h)
+      oklch(from var(--accentColorEffective, var(--accentColor)) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h),
+      oklch(from var(--accentColorEffective, var(--accentColor)) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h)
     );
-    --btnface: light-dark(var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)), var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)));
+    --btnface: light-dark(var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)), var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)));
     --btnhighlightface: light-dark(
-      oklch(from var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)) max(calc(l * 0.95), 0) min(calc(c * 1.8), c) h),
-      oklch(from var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)) min(calc(l * 1.2), 1) min(calc(c * 1.8), c) h)
+      oklch(from var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)) max(calc(l * 0.95), 0) min(calc(c * 1.8), c) h),
+      oklch(from var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)) min(calc(l * 1.2), 1) min(calc(c * 1.8), c) h)
     );
     --btnactiveface: light-dark(
-      oklch(from var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)) max(calc(l * 0.9), 0) min(calc(c * 1.8), c) h),
-      oklch(from var(--accentSubtle, oklch(from var(--accentColor4) l 0 h)) min(calc(l * 1.3), 1) min(calc(c * 1.8), c) h)
+      oklch(from var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)) max(calc(l * 0.9), 0) min(calc(c * 1.8), c) h),
+      oklch(from var(--accentColorEffective4, oklch(from var(--accentColor4) l 0 h)) min(calc(l * 1.3), 1) min(calc(c * 1.8), c) h)
     );
   }
   :where([is=bordered-prominent-button]) {
@@ -7689,26 +7830,26 @@
     --btnactiveface: light-dark(oklch(from var(--accentColor) max(calc(l * 0.8), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h));
   }
   :where([is=glass-button]) {
-    --btntext: var(--accentEmphasis, var(--accentColor));
+    --btntext: var(--accentColorEffective, var(--accentColor));
     --btnhighlighttext: light-dark(
-      oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h),
-      oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h)
+      oklch(from var(--accentColorEffective, var(--accentColor)) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h),
+      oklch(from var(--accentColorEffective, var(--accentColor)) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h)
     );
     --btnactivetext: light-dark(
-      oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h),
-      oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h)
+      oklch(from var(--accentColorEffective, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h),
+      oklch(from var(--accentColorEffective, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h)
     );
-    --btnface: light-dark(var(--glass-btn-bg), var(--glass-btn-bg-dark));
-    --btnhighlightface: light-dark(var(--glass-btn-focus-bg), var(--glass-btn-focus-bg-dark));
-    --btnactiveface: light-dark(var(--glass-btn-active-bg), var(--glass-btn-active-bg-dark));
+    --btnface: light-dark(var(--clear-glass-bg), var(--clear-glass-bg-dark));
+    --btnhighlightface: light-dark(var(--clear-glass-focus-bg), var(--clear-glass-focus-bg-dark));
+    --btnactiveface: light-dark(var(--clear-glass-active-bg), var(--clear-glass-active-bg-dark));
   }
   :where([is=glass-prominent-button]) {
-    --btntext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-    --btnhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-    --btnactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-    --btnface: var(--accentColor);
+    --btnface: light-dark(var(--accentColor), var(--accentColor));
+    --btntext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
     --btnhighlightface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h));
+    --btnhighlighttext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
     --btnactiveface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h));
+    --btnactivetext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
   }
   /* list-view {
     :where(&) {