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

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]) {
@@ -1057,6 +1039,7 @@
   content-unavailable-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]),
@@ -1128,8 +1111,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 +1127,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 +1135,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 +1145,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 +1428,62 @@
     }
   }
 }
+@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;
@@ -1613,7 +1630,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 +1677,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 +1832,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 +1855,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 +1999,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 +2012,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);
@@ -2958,6 +2981,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 +3013,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 +3068,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 +4298,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 +4339,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 +4375,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;
@@ -6618,6 +6668,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) {
@@ -7587,6 +7650,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 +7694,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));
@@ -7698,17 +7785,17 @@
       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)
     );
-    --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(&) {