@swiftwc/ui 0.0.0-dev.21 → 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]) {
@@ -360,6 +338,10 @@
   select {
     text-transform: none;
   }
+  .ph,
+  .ph::before {
+    display: grid;
+  }
   button,
   *::part(button),
   input,
@@ -408,8 +390,13 @@
   html {
     transition: font-size 1ms step-start;
   }
+  @media (pointer: fine) {
+    html {
+      font-size: 14px;
+    }
+  }
   html::before {
-    content: "ipad-sheet-view-height=27.75rem&ipad-sheet-view-inline-size=37rem&vt-fwd-class-name=fwd";
+    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;
   }
 }
@@ -880,24 +867,29 @@
     padding-inline: var(--btnpadistart,) var(--btnpadiend,);
     padding-block: var(--btnpadbstart,) var(--btnpadbend,);
     border-radius: var(--btnradiustl,) var(--btnradiustr,) var(--btnradiusbr,) var(--btnradiusbl,);
-    --btnpadistart: var(--regular-btn-padding);
-    --btnpadiend: var(--regular-btn-padding);
-    --btnpadbstart: var(--regular-btn-padding);
-    --btnpadbend: var(--regular-btn-padding);
     --btnradiustl: var(--regular-btn-border-radius);
     --btnradiustr: var(--regular-btn-border-radius);
     --btnradiusbl: var(--regular-btn-border-radius);
     --btnradiusbr: var(--regular-btn-border-radius);
   }
+  :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;
+  }
+  :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;
+  }
+  :where([is=glass-prominent-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=glass-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=bordered-prominent-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=bordered-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=borderless-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=plain-button]:not(:has(> :not([slot]))) > [slot=placeholder]) {
+    position: relative;
+    visibility: visible;
+  }
   :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]) {
-    position: absolute;
-    transition: opacity ease-out 200ms;
-    max-inline-size: 90%;
-    max-block-size: 90%;
-    border-radius: inherit;
+  @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]) {
@@ -905,35 +897,35 @@
     }
   }
   :where([control-size=mini][is=glass-prominent-button], [control-size=mini][is=glass-button], [control-size=mini][is=bordered-prominent-button], [control-size=mini][is=bordered-button], [control-size=mini][is=borderless-button], [control-size=mini][is=plain-button]) {
-    --btnpadistart: var(--mini-btn-padding);
-    --btnpadiend: var(--mini-btn-padding);
-    --btnpadbstart: var(--mini-btn-padding);
-    --btnpadbend: var(--mini-btn-padding);
     --btnradiustl: var(--mini-btn-border-radius);
     --btnradiustr: var(--mini-btn-border-radius);
     --btnradiusbl: var(--mini-btn-border-radius);
     --btnradiusbr: var(--mini-btn-border-radius);
   }
+  :where([control-size=regular][is=glass-prominent-button], [control-size=regular][is=glass-button], [control-size=regular][is=bordered-prominent-button], [control-size=regular][is=bordered-button], [control-size=regular][is=borderless-button], [control-size=regular][is=plain-button]) {
+    --btnradiustl: var(--regular-btn-border-radius);
+    --btnradiustr: var(--regular-btn-border-radius);
+    --btnradiusbl: var(--regular-btn-border-radius);
+    --btnradiusbr: var(--regular-btn-border-radius);
+  }
   :where([control-size=small][is=glass-prominent-button], [control-size=small][is=glass-button], [control-size=small][is=bordered-prominent-button], [control-size=small][is=bordered-button], [control-size=small][is=borderless-button], [control-size=small][is=plain-button]) {
-    --btnpadistart: var(--small-btn-padding);
-    --btnpadiend: var(--small-btn-padding);
-    --btnpadbstart: var(--small-btn-padding);
-    --btnpadbend: var(--small-btn-padding);
     --btnradiustl: var(--small-btn-border-radius);
     --btnradiustr: var(--small-btn-border-radius);
     --btnradiusbl: var(--small-btn-border-radius);
     --btnradiusbr: var(--small-btn-border-radius);
   }
   :where([control-size=large][is=glass-prominent-button], [control-size=large][is=glass-button], [control-size=large][is=bordered-prominent-button], [control-size=large][is=bordered-button], [control-size=large][is=borderless-button], [control-size=large][is=plain-button]) {
-    --btnpadistart: var(--large-btn-padding);
-    --btnpadiend: var(--large-btn-padding);
-    --btnpadbstart: var(--large-btn-padding);
-    --btnpadbend: var(--large-btn-padding);
     --btnradiustl: var(--large-btn-border-radius);
     --btnradiustr: var(--large-btn-border-radius);
     --btnradiusbl: var(--large-btn-border-radius);
     --btnradiusbr: var(--large-btn-border-radius);
   }
+  [control-size=small][is=glass-prominent-button], [control-size=small][is=glass-button], [control-size=small][is=bordered-prominent-button], [control-size=small][is=bordered-button], [control-size=small][is=borderless-button], [control-size=small][is=plain-button] {
+    --label-font: callout;
+  }
+  [control-size=mini][is=glass-prominent-button], [control-size=mini][is=glass-button], [control-size=mini][is=bordered-prominent-button], [control-size=mini][is=bordered-button], [control-size=mini][is=borderless-button], [control-size=mini][is=plain-button] {
+    --label-font: caption;
+  }
 }
 @layer sw-colors {
   :where([is=glass-prominent-button]:not(:disabled):not([readonly]), [is=glass-button]:not(:disabled):not([readonly]), [is=bordered-prominent-button]:not(:disabled):not([readonly]), [is=bordered-button]:not(:disabled):not([readonly]), [is=borderless-button]:not(:disabled):not([readonly]), [is=plain-button]:not(:disabled):not([readonly])):focus-visible {
@@ -950,17 +942,6 @@
     }
   }
 }
-@layer sw-utils {
-  :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]) {
-    display: none;
-  }
-  :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]) {
-    display: grid;
-  }
-  :where([is=glass-prominent-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=glass-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=bordered-prominent-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=bordered-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=borderless-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=plain-button]:not(:has(> :not([slot]))) > [slot=placeholder]) {
-    display: grid;
-  }
-}
 @layer sw-actions {
   :where([is=glass-prominent-button]:not(:disabled):not([readonly]), [is=glass-button]:not(:disabled):not([readonly]), [is=bordered-prominent-button]:not(:disabled):not([readonly]), [is=bordered-button]:not(:disabled):not([readonly]), [is=borderless-button]:not(:disabled):not([readonly]), [is=plain-button]:not(:disabled):not([readonly])):active {
     --btnface: var(--btnactiveface,);
@@ -1058,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]),
@@ -1129,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,);
@@ -1146,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;
@@ -1155,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,);
@@ -1166,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) {
@@ -1215,12 +1175,25 @@
   :where([is=disclosure-group]) {
     overflow: clip;
     --disclosure--host-details-content-block-size: 0;
-    --disclosure-style: ;
-    --disclosure--summary-grid-template-columns: ;
-    --disclosure--summary-grid-auto-flow: ;
-    --disclosure--summary-gap: ;
-    --disclosure--marker-display: ;
-    --disclosure--marker-transform: ;
+  }
+  @supports (x: if(else:red)) {
+    :where([is=disclosure-group]) {
+      --disclosure--marker-display: if(style(--disclosure-style: marker-trailing): ; style(--disclosure-style: marker-leading): ; else: none;);
+      --disclosure--summary-grid-auto-flow: if(style(--disclosure-style: marker-trailing): column ; style(--disclosure-style: marker-leading): column ;);
+      --disclosure--summary-gap: if(style(--disclosure-style: marker-trailing): 0.1rem ; style(--disclosure-style: marker-leading): 0.1rem ;);
+      --disclosure--summary-grid-template-columns: if(style(--disclosure-style: marker-trailing): minmax(0, 1fr) auto ; style(--disclosure-style: marker-leading): auto minmax(0, 1fr) ;);
+      --disclosure--marker-order: if(style(--disclosure-style: marker-leading): -1 ;);
+    }
+  }
+  @supports not (x: if(else:red)) {
+    :where([is=disclosure-group]) {
+      --disclosure-style: ;
+      --disclosure--summary-grid-template-columns: ;
+      --disclosure--summary-grid-auto-flow: ;
+      --disclosure--summary-gap: ;
+      --disclosure--marker-display: none;
+      --disclosure--marker-transform: ;
+    }
   }
   :where([is=disclosure-group] > summary) {
     gap: var(--disclosure--summary-gap, );
@@ -1244,26 +1217,28 @@
     transform: var(--disclosure--marker-transform, );
     order: var(--disclosure--marker-order, );
   }
-  @container not (style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading)) {
-    :where([is=disclosure-group] > summary) {
-      --disclosure--marker-display: none;
+  @supports not (x: if(else:red)) {
+    @container style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading) {
+      :where([is=disclosure-group] > summary) {
+        --disclosure--marker-display: grid;
+      }
     }
-  }
-  @container style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading) {
-    :where([is=disclosure-group] > summary) {
-      --disclosure--summary-grid-auto-flow: column;
-      --disclosure--summary-gap: 0.1rem;
+    @container style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading) {
+      :where([is=disclosure-group] > summary) {
+        --disclosure--summary-grid-auto-flow: column;
+        --disclosure--summary-gap: 0.1rem;
+      }
     }
-  }
-  @container style(--disclosure-style: marker-trailing) {
-    :where([is=disclosure-group] > summary) {
-      --disclosure--summary-grid-template-columns: minmax(0, 1fr) auto;
+    @container style(--disclosure-style: marker-trailing) {
+      :where([is=disclosure-group] > summary) {
+        --disclosure--summary-grid-template-columns: minmax(0, 1fr) auto;
+      }
     }
-  }
-  @container style(--disclosure-style: marker-leading) {
-    :where([is=disclosure-group] > summary) {
-      --disclosure--summary-grid-template-columns: auto minmax(0, 1fr);
-      --disclosure--marker-order: -1;
+    @container style(--disclosure-style: marker-leading) {
+      :where([is=disclosure-group] > summary) {
+        --disclosure--summary-grid-template-columns: auto minmax(0, 1fr);
+        --disclosure--marker-order: -1;
+      }
     }
   }
   :where([is=disclosure-group])::details-content {
@@ -1303,9 +1278,25 @@
     :where([is=disclosure-group][disclosure-style=marker-trailing]) {
       --disclosure-style: marker-trailing;
     }
+    @supports not (x: if(else:red)) {
+      :where([is=disclosure-group][disclosure-style=marker-trailing]) {
+        --disclosure--marker-display: grid;
+        --disclosure--summary-grid-auto-flow: column;
+        --disclosure--summary-gap: 0.1rem;
+        --disclosure--summary-grid-template-columns: minmax(0, 1fr) auto;
+      }
+    }
     :where([is=disclosure-group][disclosure-style=marker-leading]) {
       --disclosure-style: marker-leading;
     }
+    @supports not (x: if(else:red)) {
+      :where([is=disclosure-group][disclosure-style=marker-leading]) {
+        --disclosure--marker-display: grid;
+        --disclosure--summary-grid-auto-flow: column;
+        --disclosure--summary-gap: 0.1rem;
+        --disclosure--summary-grid-template-columns: auto minmax(0, 1fr);
+      }
+    }
     :where([is=disclosure-group][disclosure-style=marker-hidden]) {
       --disclosure-style: ;
     }
@@ -1437,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;
@@ -1490,14 +1537,6 @@
     transform: var(--sheet-view-translate, );
     --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
   }
-  :where(:where([is=sheet-view]) > tool-bar > [slot=top-bar-leading], :where([is=sheet-view]) > tool-bar > [slot=top-bar-trailing]) {
-    --label-style: icon-only;
-  }
-  @media (pointer: coarse) {
-    :where(:where([is=sheet-view]) > tool-bar > [slot^=bottom-bar-]) {
-      --label-style: icon-only;
-    }
-  }
   @media (pointer: coarse) and (orientation: portrait) {
     :where([is=sheet-view]) {
       clip-path: inset(var(--safe-area-inset-top) 0 0 0 round 2rem 2rem 0 0);
@@ -1546,7 +1585,7 @@
     --label-font: title3;
   }
   content-unavailable-view > :not([slot]) {
-    --label-image-size: 5rem;
+    --label-image-size: 5;
     --label-gap: 1rem;
   }
   :where(content-unavailable-view:not(:has(> [slot=description])))::part(content-unavailable-description-stack) {
@@ -1591,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);
   }
@@ -1638,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;
@@ -1794,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;
   }
 }
@@ -1817,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);
   }
 }
@@ -1961,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;
@@ -1969,24 +2012,37 @@
     place-items: center;
     place-content: center;
   }
-}
-@layer sw-colors {
-  :where(menu-view:not(:disabled):not([readonly])):focus-visible {
-    outline: none;
+  :where(tool-bar-item > button > [slot]) {
+    position: absolute;
+    visibility: collapse;
   }
-  :where(menu-view:not(:disabled):not([readonly])):focus-visible::part(menu-summary) {
-    --toolbaritemface: var(--toolbaritemhighlightface,);
+  :where(tool-bar-item > button > [slot=overlay]) {
+    visibility: visible;
   }
-  @media (pointer: fine) {
-    :where(menu-view:not(:disabled):not([readonly])):hover::part(menu-summary) {
-      --toolbaritemface: var(--toolbaritemhighlightface,);
+  :where(tool-bar-item > button:not(:has(> :not([slot]))) > [slot=placeholder]) {
+    position: relative;
+    visibility: visible;
+  }
+  :where(tool-bar-item > button:has(> [slot=overlay]) > *:not([slot=overlay])) {
+    opacity: 0;
+  }
+  @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);
@@ -2015,6 +2071,12 @@
   }
 }
 @layer sw-components {
+  :where([is=borderless-button]) {
+    --btnpadistart: 0.1rem;
+    --btnpadiend: 0.1rem;
+    --btnpadbstart: 0.1rem;
+    --btnpadbend: 0.1rem;
+  }
   :where([is=borderless-button][role=destructive]) {
     --accentColor: var(--red);
     --accentColor2: var(--red2);
@@ -2029,11 +2091,41 @@
   }
 }
 @layer sw-components {
+  :where([is=bordered-button]) {
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
   @media (pointer: fine) {
     :where([is=bordered-button]) {
       --accentColor: var(--primary);
     }
   }
+  :where([is=bordered-button][control-size=mini]) {
+    --btnpadistart: var(--mini-btn-padding);
+    --btnpadiend: var(--mini-btn-padding);
+    --btnpadbstart: var(--mini-btn-padding);
+    --btnpadbend: var(--mini-btn-padding);
+  }
+  :where([is=bordered-button][control-size=regular]) {
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=bordered-button][control-size=small]) {
+    --btnpadistart: var(--small-btn-padding);
+    --btnpadiend: var(--small-btn-padding);
+    --btnpadbstart: var(--small-btn-padding);
+    --btnpadbend: var(--small-btn-padding);
+  }
+  :where([is=bordered-button][control-size=large]) {
+    --btnpadistart: var(--large-btn-padding);
+    --btnpadiend: var(--large-btn-padding);
+    --btnpadbstart: var(--large-btn-padding);
+    --btnpadbend: var(--large-btn-padding);
+  }
   :where([is=bordered-button][role=destructive]) {
     --accentColor: var(--red);
     --accentColor2: var(--red2);
@@ -2048,6 +2140,36 @@
   }
 }
 @layer sw-components {
+  :where([is=bordered-prominent-button]) {
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=bordered-prominent-button][control-size=mini]) {
+    --btnpadistart: var(--mini-btn-padding);
+    --btnpadiend: var(--mini-btn-padding);
+    --btnpadbstart: var(--mini-btn-padding);
+    --btnpadbend: var(--mini-btn-padding);
+  }
+  :where([is=bordered-prominent-button][control-size=regular]) {
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=bordered-prominent-button][control-size=small]) {
+    --btnpadistart: var(--small-btn-padding);
+    --btnpadiend: var(--small-btn-padding);
+    --btnpadbstart: var(--small-btn-padding);
+    --btnpadbend: var(--small-btn-padding);
+  }
+  :where([is=bordered-prominent-button][control-size=large]) {
+    --btnpadistart: var(--large-btn-padding);
+    --btnpadiend: var(--large-btn-padding);
+    --btnpadbstart: var(--large-btn-padding);
+    --btnpadbend: var(--large-btn-padding);
+  }
   :where([is=bordered-prominent-button][role=destructive]) {
     --accentColor: var(--red);
     --accentColor2: var(--red2);
@@ -2066,6 +2188,34 @@
     backdrop-filter: var(--liquid-glass-backdrop-filter);
     box-shadow: var(--toolbar-cell-box-shadow);
     transform: var(--btn--scale, );
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=glass-button][control-size=mini]) {
+    --btnpadistart: var(--mini-btn-padding);
+    --btnpadiend: var(--mini-btn-padding);
+    --btnpadbstart: var(--mini-btn-padding);
+    --btnpadbend: var(--mini-btn-padding);
+  }
+  :where([is=glass-button][control-size=regular]) {
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=glass-button][control-size=small]) {
+    --btnpadistart: var(--small-btn-padding);
+    --btnpadiend: var(--small-btn-padding);
+    --btnpadbstart: var(--small-btn-padding);
+    --btnpadbend: var(--small-btn-padding);
+  }
+  :where([is=glass-button][control-size=large]) {
+    --btnpadistart: var(--large-btn-padding);
+    --btnpadiend: var(--large-btn-padding);
+    --btnpadbstart: var(--large-btn-padding);
+    --btnpadbend: var(--large-btn-padding);
   }
   :where([is=glass-button][role=destructive]) {
     --accentColor: var(--red);
@@ -2085,6 +2235,34 @@
     backdrop-filter: var(--liquid-glass-backdrop-filter);
     box-shadow: var(--toolbar-cell-box-shadow);
     transform: var(--btn--scale, );
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=glass-prominent-button][control-size=mini]) {
+    --btnpadistart: var(--mini-btn-padding);
+    --btnpadiend: var(--mini-btn-padding);
+    --btnpadbstart: var(--mini-btn-padding);
+    --btnpadbend: var(--mini-btn-padding);
+  }
+  :where([is=glass-prominent-button][control-size=regular]) {
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=glass-prominent-button][control-size=small]) {
+    --btnpadistart: var(--small-btn-padding);
+    --btnpadiend: var(--small-btn-padding);
+    --btnpadbstart: var(--small-btn-padding);
+    --btnpadbend: var(--small-btn-padding);
+  }
+  :where([is=glass-prominent-button][control-size=large]) {
+    --btnpadistart: var(--large-btn-padding);
+    --btnpadiend: var(--large-btn-padding);
+    --btnpadbstart: var(--large-btn-padding);
+    --btnpadbend: var(--large-btn-padding);
   }
   :where([is=glass-prominent-button][role=destructive]) {
     --accentColor: var(--red);
@@ -2154,6 +2332,18 @@
       --safe-area-inset-bottom: 0px;
     }
   }
+  :where(tool-bar > [slot^=top-bar-] > button:has(> label-view > [slot=image]),
+  tool-bar > [slot=cancellation-action] > button:has(> label-view > [slot=image]),
+  tool-bar > [slot=primary-action] > button:has(> label-view > [slot=image]),
+  tool-bar > [slot=confirmation-action] > button:has(> label-view > [slot=image]),
+  tool-bar > [slot=destructive-action] > button:has(> label-view > [slot=image])) {
+    --label-style: icon-only;
+  }
+  @media (pointer: coarse) {
+    :where(tool-bar > [slot^=bottom-bar-] > button:has(> label-view > [slot=image])) {
+      --label-style: icon-only;
+    }
+  }
 }
 @property --label-gap {
   syntax: "<length>";
@@ -2161,19 +2351,24 @@
   initial-value: 0;
 }
 @property --label-image-size {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 2;
+}
+@property --label-padding-inline {
   syntax: "<length>";
   inherits: false;
   initial-value: 0;
 }
 @layer sw-components {
   :where(label-view) {
+    padding-inline: var(--label-padding-inline);
     align-items: var(--label--host-align-items, );
     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, );
-    --label-image-size: 2rem;
-    --label-imagestack-fontsize: var(--label-image-size);
+    --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) {
@@ -2786,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;
@@ -2808,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 {
@@ -2850,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 {
@@ -4076,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);
@@ -4117,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) {
@@ -4153,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;
@@ -4552,6 +4774,11 @@
       transform: translateY(calc(max(var(--safe-area-inset-top), var(--sidebar-block-spacing)) * -1 - 150%));
     }
   }
+  @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
+    :where(tab-view[tab-view-style=tab-bar-only] [is=sidebar-view][open] ~ [is=tab-bar] > [is=form-view]) {
+      animation: ipad_form_view_slide_up_offedge var(--sidebar-transition-duration) ease forwards;
+    }
+  }
   @media (max-width: 42.9999rem) and (orientation: portrait) {
     :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]) {
       --tab-bar-width: 100lvw;
@@ -4618,6 +4845,11 @@
       transform: translateY(calc(max(var(--safe-area-inset-top), var(--sidebar-block-spacing)) * -1 - 150%));
     }
   }
+  @media (min-width: 43rem) and (orientation: portrait) and (prefers-reduced-motion: no-preference) {
+    :where(tab-view:not([tab-view-style=tab-bar-only]) [is=sidebar-view][open] ~ [is=tab-bar] > [is=form-view]) {
+      animation: ipad_form_view_slide_up_offedge var(--sidebar-transition-duration) ease forwards;
+    }
+  }
   @media (orientation: landscape) {
     :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]) {
       display: none;
@@ -6436,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) {
@@ -6522,6 +6767,11 @@
     }
   }
 }
+@keyframes ipad_form_view_slide_up_offedge {
+  to {
+    opacity: 0;
+  }
+}
 @property --gray {
   syntax: "<color>";
   initial-value: oklch(64.83% 0.0073 286.19deg);
@@ -7400,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);
@@ -7429,26 +7684,58 @@
   }
   :where([is=tab-bar]) {
     --toolbaritemtext: light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemhighlighttext: light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemactivetext: light-dark(var(--secondary-text), var(--secondary-text-dark));
   }
-  :where(tool-bar-item, tool-bar-item-group, navigation-split-view sidebar-toggle) {
+  :where(tool-bar-item,
+  tool-bar-item-group,
+  navigation-split-view sidebar-toggle) {
     --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
     --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([is=tab-bar] [is=tab-item]) {
-    --toolbaritemhighlighttext: yellow;
-    --toolbaritemactivetext: chocolate;
-  }
-  :where(sidebar-toggle,
-  menu-view) {
+  :where(tool-bar-item[tint], [tint] tool-bar-item,
+  tool-bar-item-group[tint],
+  [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) {
     --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));
@@ -7498,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(&) {