@expressivecss/expressive 0.16.0 → 0.17.0

package/dist/css/expressive.css

@@ -2530,6 +2530,16 @@
     vertical-align: middle;
     box-shadow: var(--md-sys-elevation-level3);
   }
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle:hover,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle:hover {
+    box-shadow: var(--md-sys-elevation-level4);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-primary-container));
+  }
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle:focus,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle:active,
+  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle:focus {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--md-sys-color-primary-container));
+  }
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle:focus-visible,
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
@@ -2543,16 +2553,6 @@
     line-height: var(--md-comp-fab-icon-size);
     color: inherit;
   }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle:hover,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle:hover {
-    box-shadow: var(--md-sys-elevation-level4);
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-primary-container));
-  }
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle:active, :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle:focus,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle:active,
-  :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--md-sys-color-primary-container));
-  }
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle.medium,
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle.medium {
     --md-comp-fab-container-height: 5rem;
@@ -2933,43 +2933,37 @@
   .button-group.square:not(.connected) > :is(button, a.button)[aria-pressed=true] {
     --_corner: var(--md-comp-button-group-item-shape-round);
   }
-  .button-group > :is(button:not(.icon-button), a.button):where(.filled, :not(.elevated, .filled, .tonal, .outlined, .text))[aria-pressed=false],
-  .button-group > .icon-button.filled[aria-pressed=false] {
+  .button-group > :is(button:not(.icon-button), a.button):where(.filled, :not(.elevated, .filled, .tonal, .outlined, .text))[aria-pressed=false], .button-group > .icon-button.filled[aria-pressed=false] {
     --_toggle-container-color: var(--md-sys-color-surface-container);
     --_toggle-state-color: var(--md-sys-color-on-surface-variant);
     color: var(--md-sys-color-on-surface-variant);
     background-color: var(--_toggle-container-color);
   }
-  .button-group > :is(button:not(.icon-button), a.button):where(.filled, :not(.elevated, .filled, .tonal, .outlined, .text))[aria-pressed=true],
-  .button-group > .icon-button.filled[aria-pressed=true] {
+  .button-group > :is(button:not(.icon-button), a.button):where(.filled, :not(.elevated, .filled, .tonal, .outlined, .text))[aria-pressed=true], .button-group > .icon-button.filled[aria-pressed=true] {
     --_toggle-container-color: var(--md-sys-color-primary);
     --_toggle-state-color: var(--md-sys-color-on-primary);
     color: var(--md-sys-color-on-primary);
     background-color: var(--_toggle-container-color);
   }
-  .button-group > :is(button:not(.icon-button), a.button).tonal[aria-pressed=false],
-  .button-group > .icon-button.tonal[aria-pressed=false] {
+  .button-group > :is(button:not(.icon-button), a.button).tonal[aria-pressed=false], .button-group > .icon-button.tonal[aria-pressed=false] {
     --_toggle-container-color: var(--md-sys-color-secondary-container);
     --_toggle-state-color: var(--md-sys-color-on-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
     background-color: var(--_toggle-container-color);
   }
-  .button-group > :is(button:not(.icon-button), a.button).tonal[aria-pressed=true],
-  .button-group > .icon-button.tonal[aria-pressed=true] {
+  .button-group > :is(button:not(.icon-button), a.button).tonal[aria-pressed=true], .button-group > .icon-button.tonal[aria-pressed=true] {
     --_toggle-container-color: var(--md-sys-color-secondary);
     --_toggle-state-color: var(--md-sys-color-on-secondary);
     color: var(--md-sys-color-on-secondary);
     background-color: var(--_toggle-container-color);
   }
-  .button-group > :is(button:not(.icon-button), a.button).outlined[aria-pressed=false],
-  .button-group > .icon-button.outlined[aria-pressed=false] {
+  .button-group > :is(button:not(.icon-button), a.button).outlined[aria-pressed=false], .button-group > .icon-button.outlined[aria-pressed=false] {
     --_toggle-container-color: transparent;
     --_toggle-state-color: var(--md-sys-color-on-surface-variant);
     color: var(--md-sys-color-on-surface-variant);
     background-color: var(--_toggle-container-color);
   }
-  .button-group > :is(button:not(.icon-button), a.button).outlined[aria-pressed=true],
-  .button-group > .icon-button.outlined[aria-pressed=true] {
+  .button-group > :is(button:not(.icon-button), a.button).outlined[aria-pressed=true], .button-group > .icon-button.outlined[aria-pressed=true] {
     --_toggle-container-color: var(--md-sys-color-inverse-surface);
     --_toggle-state-color: var(--md-sys-color-inverse-on-surface);
     color: var(--md-sys-color-inverse-on-surface);
@@ -3891,9 +3885,9 @@
     display: flex;
     align-items: stretch;
     align-self: stretch;
-    list-style: none;
     margin: 0;
     padding: 0;
+    list-style: none;
   }
   header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li {
     display: flex;
@@ -3918,6 +3912,10 @@
     min-width: 0;
     margin: 0;
   }
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > form:has(input:focus-visible) {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: -3px;
+  }
   header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > form input {
     flex: 1 1 auto;
     min-width: 0;
@@ -4103,9 +4101,9 @@
   header.large.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
     order: 0;
     flex: 1 1 auto;
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
   header.medium.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) + *,
   header.large.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) + * {
@@ -4119,9 +4117,9 @@
     padding: 0;
     -webkit-line-clamp: unset;
     line-clamp: unset;
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
     font-family: var(--md-sys-typescale-title-large-font-family-name);
     font-size: var(--md-sys-typescale-title-large-font-size);
     font-weight: var(--md-sys-typescale-title-large-font-weight);
@@ -4612,6 +4610,18 @@
     background-color: var(--md-comp-scrim-color);
     z-index: -1;
   }
+  .navigation-rail.expanded.modal::after {
+    content: "";
+    box-sizing: border-box;
+    position: fixed;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: inherit;
+    z-index: -1;
+    background: inherit;
+    border-radius: inherit;
+    pointer-events: none;
+  }
   @media (width < 600px) {
     .navigation-rail.expanded:not(.modal) {
       position: fixed;
@@ -4629,6 +4639,18 @@
       background-color: var(--md-comp-scrim-color);
       z-index: -1;
     }
+    .navigation-rail.expanded:not(.modal)::after {
+      content: "";
+      box-sizing: border-box;
+      position: fixed;
+      inset-block: 0;
+      inset-inline-start: 0;
+      width: inherit;
+      z-index: -1;
+      background: inherit;
+      border-radius: inherit;
+      pointer-events: none;
+    }
   }
   .navigation-rail:not(.expanded) > button:has(+ .navigation-rail-panel:popover-open):not(.active, [aria-current]) > :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp),
   .navigation-rail.expanded > button:has(+ .navigation-rail-panel:popover-open):not(.active, [aria-current]) {
@@ -4681,7 +4703,7 @@
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  .navigation-rail-panel :is(a, summary):hover:not([aria-current]) {
+  .navigation-rail-panel :is(a, summary):hover {
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
   }
   .navigation-rail-panel :is(a, summary)[aria-current] {
@@ -4710,6 +4732,12 @@
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") center/18px no-repeat;
     transition: transform var(--md-sys-motion-duration-short3) ease-out;
   }
+  @media (forced-colors: active) {
+    .navigation-rail-panel summary::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
   .navigation-rail-panel details[open] > summary::after {
     transform: rotate(180deg);
   }
@@ -5655,6 +5683,12 @@
       }
     }
   }
+  @media (forced-colors: active) {
+    .snackbar {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
   @media (width >= 600px) {
     .snackbar {
       width: max-content;
@@ -5838,9 +5872,6 @@
     border-block-end: 1px solid var(--md-sys-color-outline-variant);
     scrollbar-width: none;
   }
-  .tabs::-webkit-scrollbar {
-    display: none;
-  }
   .tabs > a {
     box-sizing: border-box;
     position: relative;
@@ -5887,7 +5918,6 @@
   }
   .tabs > a:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: 2px;
     outline-offset: -3px;
   }
   .tabs > a.active {
@@ -5931,9 +5961,9 @@
     background-color: var(--md-comp-primary-tab-active-indicator-color);
     border-radius: var(--md-comp-primary-tab-active-indicator-shape);
     pointer-events: none;
-    list-style: none;
-    padding: 0;
     margin: 0;
+    padding: 0;
+    list-style: none;
   }
   @media (forced-colors: active) {
     .tabs > .indicator {
@@ -5981,9 +6011,6 @@
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
   }
-  .tabs-content::-webkit-scrollbar {
-    display: none;
-  }
   .tabs-content > * {
     flex: 0 0 100%;
     box-sizing: border-box;
@@ -6032,6 +6059,12 @@
       }
     }
   }
+  @media (forced-colors: active) {
+    .tooltip {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
   :not(body):has(> .tooltip) {
     position: relative;
   }
@@ -6260,6 +6293,12 @@
       }
     }
   }
+  @media (forced-colors: active) {
+    menu[id] {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
   menu[id] > li > ul[role=group] {
     margin: 0;
     padding: 0;
@@ -6579,6 +6618,12 @@
       }
     }
   }
+  @media (forced-colors: active) {
+    menu[id] li > menu {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
   menu[id] li > menu > li > ul[role=group] {
     margin: 0;
     padding: 0;
@@ -6958,6 +7003,12 @@
       }
     }
   }
+  @media (forced-colors: active) {
+    dialog {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
   dialog::backdrop {
     background-color: var(--md-comp-scrim-color);
     backdrop-filter: blur(var(--md-comp-basic-dialog-scrim-blur));
@@ -7105,22 +7156,22 @@
     box-sizing: border-box;
     min-height: 64px;
     margin: 0;
-    padding: 8px 4px;
     background: none;
     box-shadow: none;
+    padding: 8px 4px;
   }
   dialog.max > header > :is(h1, h2, h3, h4, h5, h6) {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
-    padding: 0 12px;
-    text-align: start;
     color: var(--md-sys-color-on-surface);
     font-family: var(--md-sys-typescale-title-large-font-family-name);
     font-size: var(--md-sys-typescale-title-large-font-size);
     font-weight: var(--md-sys-typescale-title-large-font-weight);
     line-height: var(--md-sys-typescale-title-large-line-height);
     letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+    padding: 0 12px;
+    text-align: start;
   }
   dialog.max > header > form {
     display: flex;
@@ -7466,6 +7517,12 @@
       }
     }
   }
+  @media (forced-colors: active) {
+    dialog.bottom-sheet {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
   dialog.bottom-sheet:not(:modal) {
     z-index: var(--expressive-z-sheet);
   }
@@ -7598,6 +7655,12 @@
       }
     }
   }
+  @media (forced-colors: active) {
+    dialog.side-sheet {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
   dialog.side-sheet:not(:modal) {
     z-index: var(--expressive-z-sheet);
     border-radius: 0;
@@ -7637,10 +7700,10 @@
     box-sizing: border-box;
     min-height: 64px;
     margin: 0;
-    padding-block: 8px;
-    padding-inline: 24px 12px;
     background: none;
     box-shadow: none;
+    padding-block: 8px;
+    padding-inline: 24px 12px;
     touch-action: pan-y;
   }
   dialog.side-sheet > header:has(> :is(button, a):first-child) {
@@ -7650,13 +7713,13 @@
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
-    padding: 0;
     color: var(--md-sys-color-on-surface);
     font-family: var(--md-sys-typescale-title-large-font-family-name);
     font-size: var(--md-sys-typescale-title-large-font-size);
     font-weight: var(--md-sys-typescale-title-large-font-weight);
     line-height: var(--md-sys-typescale-title-large-line-height);
     letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+    padding: 0;
   }
   dialog.side-sheet > header > form {
     display: flex;
@@ -8536,11 +8599,24 @@
   }
   @media (forced-colors: active) {
     input.otp:not(.browser-default) {
+      --md-comp-otp-cell-color: Canvas;
       --md-comp-otp-indicator-color: CanvasText;
+      forced-color-adjust: none;
+      color: CanvasText;
+      caret-color: CanvasText;
+      background-color: Canvas;
+    }
+    input.otp:not(.browser-default)::placeholder {
+      color: GrayText;
     }
     input.otp:not(.browser-default):focus {
       --md-comp-otp-indicator-color: Highlight;
     }
+    input.otp:not(.browser-default):disabled {
+      --md-comp-otp-indicator-color: GrayText;
+      color: GrayText;
+      opacity: 1;
+    }
   }
   input[type=color] {
     --md-comp-color-input-size: 2.5rem;
@@ -9135,6 +9211,12 @@
     background-size: var(--md-comp-switch-handle-selected) var(--md-comp-switch-handle-selected);
     background-position: calc(var(--md-comp-switch-track-width) - 4px - 2px - var(--md-comp-switch-handle-selected)) 50%;
   }
+  .switch > [type=checkbox]:dir(rtl) {
+    background-position: right 6px center;
+  }
+  .switch > [type=checkbox]:dir(rtl):checked {
+    background-position: right calc(var(--md-comp-switch-track-width) - 4px - 2px - var(--md-comp-switch-handle-selected)) center;
+  }
   .switch > [type=checkbox]:hover {
     box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
   }
@@ -9458,11 +9540,11 @@
   }
   ul[role=tree] ul[role=group] {
     margin: 0;
-    margin-inline-start: calc(var(--md-comp-menu-item-leading-space) + 10px);
     padding: 0;
+    list-style: none;
+    margin-inline-start: calc(var(--md-comp-menu-item-leading-space) + 10px);
     padding-inline-start: 4px;
     border-inline-start: 1px solid var(--md-sys-color-outline-variant);
-    list-style: none;
   }
   ul[role=tree] li[role=treeitem] {
     display: block;
@@ -9495,6 +9577,8 @@
   }
   ul[role=tree] li[role=treeitem]:focus-visible > span {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: -3px;
   }
   @media (forced-colors: active) {
     ul[role=tree] li[role=treeitem]:focus-visible > span {
@@ -9582,6 +9666,10 @@
     min-height: 3rem;
     min-width: 0;
   }
+  .file-field > label.button:has(> input[type=file]:focus-visible) {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
   .file-field span {
     cursor: pointer;
   }
@@ -10425,9 +10513,9 @@
     --md-comp-toc-active-color: var(--md-sys-color-primary);
     --md-comp-toc-indicator: 2px;
     --md-comp-toc-item-height: 48px;
-    list-style: none;
     margin: 0;
     padding: 0;
+    list-style: none;
   }
   .table-of-contents.fixed {
     position: fixed;
@@ -10513,8 +10601,8 @@
     border-radius: var(--md-comp-progress-shape);
   }
   progress.progress:indeterminate::-moz-progress-bar {
-    width: 40%;
-    margin-inline-end: 60%;
+    width: 300%;
+    margin-inline-end: -200%;
     animation: progress-indeterminate-moz 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
   .progress.stop:not(.circular) {
@@ -10547,12 +10635,10 @@
   }
   @keyframes progress-indeterminate-moz {
     from {
-      margin-inline-start: -40%;
-      margin-inline-end: 100%;
+      clip-path: polygon(-13.3333333333% 0, -13.3333333333% 100%, 0% 100%, 0% 0, 100% 0, 100% 100%, 113.3333333333% 100%, 113.3333333333% 0);
     }
     to {
-      margin-inline-start: 100%;
-      margin-inline-end: -40%;
+      clip-path: polygon(33.3333333333% 0, 33.3333333333% 100%, 46.6666666667% 100%, 46.6666666667% 0, 53.3333333333% 0, 53.3333333333% 100%, 66.6666666667% 100%, 66.6666666667% 0);
     }
   }
   .progress > .determinate {
@@ -10574,6 +10660,7 @@
   }
   .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after {
     width: auto;
+    inset-inline-end: -200%;
     animation: preloader-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
   .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)).wavy::after {
@@ -10589,6 +10676,8 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0 auto;
+    width: 300%;
+    clip-path: inset(50%);
     background-color: var(--md-comp-progress-indicator);
   }
   .progress > .indeterminate::before,
@@ -10602,30 +10691,18 @@
   }
   @keyframes preloader-indeterminate {
     0% {
-      inset-inline-start: -35%;
-      inset-inline-end: 100%;
-    }
-    60% {
-      inset-inline-start: 100%;
-      inset-inline-end: -90%;
+      clip-path: polygon(-11.6666666667% 0, -11.6666666667% 100%, 0% 100%, 0% 0, 100% 0, 100% 100%, 111.6666666667% 100%, 111.6666666667% 0);
     }
-    100% {
-      inset-inline-start: 100%;
-      inset-inline-end: -90%;
+    60%, 100% {
+      clip-path: polygon(33.3333333333% 0, 33.3333333333% 100%, 63.3333333333% 100%, 63.3333333333% 0, 36.6666666667% 0, 36.6666666667% 100%, 66.6666666667% 100%, 66.6666666667% 0);
     }
   }
   @keyframes preloader-indeterminate-short {
     0% {
-      inset-inline-start: -200%;
-      inset-inline-end: 100%;
-    }
-    60% {
-      inset-inline-start: 107%;
-      inset-inline-end: -8%;
+      clip-path: polygon(-66.6666666667% 0, -66.6666666667% 100%, 0% 100%, 0% 0, 100% 0, 100% 100%, 166.6666666667% 100%, 166.6666666667% 0);
     }
-    100% {
-      inset-inline-start: 107%;
-      inset-inline-end: -8%;
+    60%, 100% {
+      clip-path: polygon(35.6666666667% 0, 35.6666666667% 100%, 36% 100%, 36% 0, 64% 0, 64% 100%, 64.3333333333% 100%, 64.3333333333% 0);
     }
   }
   .progress.circular {
@@ -10708,6 +10785,7 @@
     progress.progress:indeterminate::-moz-progress-bar {
       background-color: CanvasText;
       width: 40%;
+      margin-inline-end: 60%;
       animation: none;
     }
     .progress.circular.wavy::before {
@@ -10745,8 +10823,11 @@
     progress.progress:indeterminate::after,
     .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after {
       width: 40%;
+      clip-path: none;
     }
     progress.progress:indeterminate::-moz-progress-bar {
+      width: 40%;
+      margin-inline-end: 60%;
       animation: none;
     }
   }
@@ -10795,9 +10876,6 @@
     overscroll-behavior-inline: contain;
     scrollbar-width: none;
   }
-  .carousel > .carousel-track::-webkit-scrollbar {
-    display: none;
-  }
   .carousel > .carousel-track img,
   .carousel > .carousel-track video {
     -webkit-user-drag: none;
@@ -10912,13 +10990,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 8px;
     list-style: none;
     position: absolute;
     inset: auto 0 0;
     z-index: 4;
     margin: 0;
-    padding: 8px 0;
+    padding: 0;
     border: 0;
     background: none;
   }
@@ -10926,12 +11003,13 @@
     appearance: none;
     box-sizing: border-box;
     display: block;
-    width: 8px;
-    height: 8px;
+    width: 24px;
+    height: 24px;
     margin: 0;
-    padding: 0;
+    padding: 8px;
     border: 0;
     border-radius: 50%;
+    background-clip: content-box;
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 45%, transparent);
     cursor: pointer;
     transition: background-color var(--md-sys-motion-duration-short4) ease-out;
@@ -10953,7 +11031,7 @@
   }
   .carousel .indicators .indicator-item:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: 2px;
+    outline-offset: -6px;
   }
   .carousel.fixed-height:has(> .indicators) {
     height: calc(var(--carousel-height, var(--md-comp-carousel-height)) + var(--md-comp-carousel-indicator-allowance));
@@ -11584,7 +11662,7 @@
       border: 1px solid var(--md-sys-color-outline);
     }
     .timepicker-container .pm-btn {
-      border-left: 0;
+      border-inline-start: 0;
     }
     .timepicker-plate {
       margin-top: 1.6rem;
@@ -11625,21 +11703,16 @@
   .breadcrumb-wrapper.nowrap {
     scrollbar-width: none;
   }
-  nav:has(> ol):not(.pagination).nowrap::-webkit-scrollbar,
-  nav:has(> .breadcrumb).nowrap::-webkit-scrollbar,
-  .breadcrumb-wrapper.nowrap::-webkit-scrollbar {
-    display: none;
-  }
   nav:has(> ol):not(.pagination) > ol,
   nav:has(> .breadcrumb) > ol,
   .breadcrumb-wrapper > ol {
     display: flex;
     flex-wrap: inherit;
     align-items: center;
-    list-style: none;
     min-width: 0;
     margin: 0;
     padding: 0;
+    list-style: none;
   }
   nav:has(> ol):not(.pagination) > ol > li,
   nav:has(> .breadcrumb) > ol > li,
@@ -11724,9 +11797,9 @@
     flex-wrap: wrap;
     align-items: center;
     gap: var(--md-comp-pagination-gap);
-    list-style: none;
     margin: 0;
     padding: 0;
+    list-style: none;
   }
   .pagination.nowrap, .pagination.nowrap > :is(ul, ol) {
     flex-wrap: nowrap;
@@ -11734,9 +11807,6 @@
     overflow-x: auto;
     scrollbar-width: none;
   }
-  .pagination.nowrap::-webkit-scrollbar, .pagination.nowrap > :is(ul, ol)::-webkit-scrollbar {
-    display: none;
-  }
   .pagination li {
     display: flex;
     flex-shrink: 0;
@@ -11830,10 +11900,10 @@
     flex-wrap: inherit;
     align-items: center;
     gap: var(--md-comp-pagination-gap);
-    list-style: none;
     min-width: 0;
     margin: 0;
     padding: 0;
+    list-style: none;
   }
   .panes,
   .pane-layout,
@@ -12051,8 +12121,9 @@
     box-sizing: border-box;
     min-height: 64px;
     margin: 0;
-    padding: 8px 16px;
     background: none;
+    box-shadow: none;
+    padding: 8px 16px;
   }
   .pane > :is(header, .pane-header) > :is(h1, h2, h3, h4, h5, h6, .pane-title),
   .list-pane > :is(header, .pane-header) > :is(h1, h2, h3, h4, h5, h6, .pane-title),
@@ -12062,16 +12133,16 @@
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
-    padding: 0;
     color: var(--md-sys-color-on-surface);
     font-family: var(--md-sys-typescale-title-large-font-family-name);
     font-size: var(--md-sys-typescale-title-large-font-size);
     font-weight: var(--md-sys-typescale-title-large-font-weight);
     line-height: var(--md-sys-typescale-title-large-line-height);
     letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
-    white-space: nowrap;
+    padding: 0;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
   .pane > :is(header, .pane-header) > :is(button:not(.button, .icon-button), a.button):has(> :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp):only-child),
   .list-pane > :is(header, .pane-header) > :is(button:not(.button, .icon-button), a.button):has(> :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp):only-child),
@@ -13300,6 +13371,9 @@
   .map-controls.bottom-right {
     inset: auto var(--md-comp-map-control-offset) var(--md-comp-map-control-offset) auto;
   }
+  .map-controls [hidden] {
+    display: none;
+  }
   .map-controls > .icon-button,
   .map-controls > .map-control-group {
     border-radius: var(--md-sys-shape-corner-full);
@@ -13548,6 +13622,11 @@
   .data-table td button[aria-expanded]:not([aria-haspopup]) > :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp) {
     transition: transform var(--md-sys-motion-duration-short4) ease-out;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .data-table td button[aria-expanded]:not([aria-haspopup]) > :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp) {
+      transition: none;
+    }
+  }
   .data-table td button[aria-expanded=true]:not([aria-haspopup]) > :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp) {
     transform: rotate(180deg);
   }
@@ -13623,6 +13702,11 @@
     opacity: 0;
     transition: opacity var(--md-sys-motion-duration-short4) ease-out, transform var(--md-sys-motion-duration-short4) ease-out;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .data-table th > button:where(:not(.drag-handle))::after {
+      transition: none;
+    }
+  }
   .data-table th > button:where(:not(.drag-handle)):hover::after {
     opacity: 0.38;
   }
@@ -13827,12 +13911,12 @@
   }
   table.calendar .calendar-events > li {
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     padding: 2px 6px;
     border-radius: var(--md-sys-shape-corner-extra-small);
     background-color: var(--md-comp-calendar-event-container-color);
     color: var(--md-comp-calendar-event-color);
-    white-space: nowrap;
-    text-overflow: ellipsis;
     font-family: var(--md-sys-typescale-label-small-font-family-name);
     font-size: var(--md-sys-typescale-label-small-font-size);
     font-weight: var(--md-sys-typescale-label-small-font-weight);
@@ -14018,6 +14102,17 @@
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") center/18px no-repeat;
     transition: transform var(--md-sys-motion-duration-short3) ease-out;
   }
+  @media (forced-colors: active) {
+    .mega-menu > button::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mega-menu > button::after {
+      transition: none;
+    }
+  }
   .mega-menu > button:has(+ .mega-menu-panel:popover-open)::after {
     transform: rotate(180deg);
   }
@@ -14283,11 +14378,14 @@
     color: var(--md-sys-color-on-secondary-container);
   }
   @media (forced-colors: active) {
-    .menubar {
-      border: 1px solid CanvasText;
-    }
     .menubar > .menu-trigger[aria-expanded=true] {
       outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+  }
+  @media (forced-colors: active) {
+    .menubar {
+      border: 1px solid CanvasText;
     }
   }
   .avatar {
@@ -14359,15 +14457,21 @@
     --md-comp-skeleton-shape: var(--md-sys-shape-corner-small);
     --md-comp-skeleton-circle-size: 40px;
     display: block;
+    position: relative;
+    overflow: clip;
     box-sizing: border-box;
     border-radius: var(--md-comp-skeleton-shape);
     background-color: var(--md-comp-skeleton-color);
+  }
+  .skeleton::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 50%;
     background-image: linear-gradient(90deg, transparent 0%, var(--md-comp-skeleton-shimmer-color) 50%, transparent 100%);
-    background-repeat: no-repeat;
-    background-size: 50% 100%;
     animation: skeleton-shimmer 1.5s linear infinite;
   }
-  .skeleton:dir(rtl) {
+  .skeleton:dir(rtl)::before {
     animation-direction: reverse;
   }
   .skeleton.text {
@@ -14385,8 +14489,8 @@
     flex: none;
     border-radius: 50%;
   }
-  @media (prefers-reduced-motion: reduce) {
-    .skeleton {
+  @media (prefers-reduced-motion: reduce), (forced-colors: active) {
+    .skeleton::before {
       animation: none;
       background-image: none;
     }
@@ -14398,10 +14502,10 @@
   }
   @keyframes skeleton-shimmer {
     from {
-      background-position: -100% 0;
+      transform: translateX(-100%);
     }
     to {
-      background-position: 200% 0;
+      transform: translateX(200%);
     }
   }
   .empty-state {
@@ -14944,11 +15048,11 @@
   }
   .tree ul {
     margin: 0;
-    margin-inline-start: 22px;
     padding: 0;
+    list-style: none;
+    margin-inline-start: 22px;
     padding-inline-start: 6px;
     border-inline-start: 1px solid var(--md-comp-tree-guide-color);
-    list-style: none;
   }
   .tree li {
     margin: 0;
@@ -15008,6 +15112,12 @@
     transform: rotate(-90deg);
     transition: transform var(--md-sys-motion-duration-short3) ease-out;
   }
+  @media (forced-colors: active) {
+    .tree li > details > summary::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
   .tree li > details > summary:dir(rtl)::before {
     transform: rotate(90deg);
   }
@@ -15027,10 +15137,6 @@
     }
   }
   @media (forced-colors: active) {
-    .tree li > details > summary::before {
-      forced-color-adjust: none;
-      background-color: CanvasText;
-    }
     .tree [aria-current]:not([aria-current=false]) {
       outline: 2px solid Highlight;
       outline-offset: -2px;
@@ -15449,6 +15555,7 @@
     --md-comp-line-chart-color-2: var(--md-sys-color-tertiary);
     --md-comp-line-chart-color-3: var(--md-sys-color-secondary);
     --md-comp-line-chart-color-4: var(--md-sys-color-on-surface-variant);
+    --md-comp-line-chart-line-width: 3px;
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -15506,6 +15613,18 @@
     position: absolute;
     inset-block: 0;
     pointer-events: none;
+    width: 1px;
+    background-color: var(--md-sys-color-outline);
+  }
+  .line-chart-cursor > span {
+    position: absolute;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    border: 2px solid var(--md-sys-color-surface);
+    border-radius: 50%;
+    background-color: var(--line-chart-color);
+    translate: -50% -50%;
   }
   .line-chart-tooltip {
     --md-comp-line-chart-tooltip-color: var(--md-sys-color-surface-container);
@@ -15626,16 +15745,42 @@
     border-radius: 50%;
     background-color: var(--line-chart-color);
   }
-  .line-chart.sparkline {
-    --md-comp-line-chart-height: 48px;
-    overflow: clip;
+  .line-chart-line {
+    fill: none;
+    stroke: var(--line-chart-color);
+    stroke-width: var(--md-comp-line-chart-line-width);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
   }
-  .line-chart.sparkline .line-chart-plot {
-    border: 0;
-    background: none;
+  .line-chart-series.dashed .line-chart-line {
+    stroke-dasharray: 2 8;
   }
-  .line-chart.sparkline .line-chart-labels,
-  .line-chart.sparkline .line-chart-legend {
+  .line-chart-points {
+    fill: none;
+    stroke: var(--line-chart-color);
+    stroke-width: calc(var(--md-comp-line-chart-line-width) * 3);
+    stroke-linecap: round;
+    vector-effect: non-scaling-stroke;
+  }
+  .line-chart-series stop {
+    stop-color: var(--line-chart-color);
+    stop-opacity: 0;
+  }
+  .line-chart-series stop:first-child {
+    stop-opacity: 0.24;
+  }
+  .line-chart.sparkline {
+    --md-comp-line-chart-height: 48px;
+    --md-comp-line-chart-line-width: 2px;
+    overflow: clip;
+  }
+  .line-chart.sparkline .line-chart-plot {
+    border: 0;
+    background: none;
+  }
+  .line-chart.sparkline .line-chart-labels,
+  .line-chart.sparkline .line-chart-legend {
     display: none;
   }
   @media (forced-colors: active) {
@@ -15645,6 +15790,12 @@
     .line-chart-tooltip {
       outline: 1px solid CanvasText;
     }
+    .line-chart-cursor {
+      background-color: CanvasText;
+    }
+    .line-chart-cursor > span {
+      forced-color-adjust: none;
+    }
     .line-chart-legend > li::before,
     .line-chart-tooltip > span:nth-of-type(odd)::before {
       forced-color-adjust: none;
@@ -15693,9 +15844,9 @@
     width: var(--md-comp-line-chart-axis-width);
     padding-inline-end: 8px;
     overflow: hidden;
-    text-align: end;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: end;
     translate: 0 -50%;
   }
   .line-chart-axis.end > li {
@@ -15706,12 +15857,6 @@
     padding-inline: 8px 0;
     text-align: start;
   }
-  .line-chart {
-    --md-comp-line-chart-line-width: 3px;
-  }
-  .line-chart.sparkline {
-    --md-comp-line-chart-line-width: 2px;
-  }
   .line-chart-plot > svg {
     position: absolute;
     inset: 0;
@@ -15719,62 +15864,15 @@
     height: 100%;
     overflow: visible;
   }
-  .line-chart-line {
-    fill: none;
-    stroke: var(--line-chart-color);
-    stroke-width: var(--md-comp-line-chart-line-width);
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vector-effect: non-scaling-stroke;
-  }
-  .line-chart-series.dashed .line-chart-line {
-    stroke-dasharray: 2 8;
-  }
-  .line-chart-points {
-    fill: none;
-    stroke: var(--line-chart-color);
-    stroke-width: calc(var(--md-comp-line-chart-line-width) * 3);
-    stroke-linecap: round;
-    vector-effect: non-scaling-stroke;
-  }
   .line-chart-area {
     display: none;
   }
   .line-chart:is(.area, .stacked) .line-chart-area {
     display: inline;
   }
-  .line-chart-series stop {
-    stop-color: var(--line-chart-color);
-    stop-opacity: 0;
-  }
-  .line-chart-series stop:first-child {
-    stop-opacity: 0.24;
-  }
   .line-chart.fade .line-chart-plot > svg {
     mask-image: linear-gradient(to right, transparent, #000 15% 85%, transparent);
   }
-  .line-chart-cursor {
-    width: 1px;
-    background-color: var(--md-sys-color-outline);
-  }
-  .line-chart-cursor > span {
-    position: absolute;
-    left: 0;
-    width: 10px;
-    height: 10px;
-    border: 2px solid var(--md-sys-color-surface);
-    border-radius: 50%;
-    background-color: var(--line-chart-color);
-    translate: -50% -50%;
-  }
-  @media (forced-colors: active) {
-    .line-chart-cursor {
-      background-color: CanvasText;
-    }
-    .line-chart-cursor > span {
-      forced-color-adjust: none;
-    }
-  }
   .column-chart {
     --md-comp-column-chart-height: 15rem;
     --md-comp-column-chart-grid-color: var(--md-sys-color-outline-variant);
@@ -15782,6 +15880,7 @@
     --md-comp-column-chart-color-2: var(--md-sys-color-tertiary);
     --md-comp-column-chart-color-3: var(--md-sys-color-secondary);
     --md-comp-column-chart-color-4: var(--md-sys-color-on-surface-variant);
+    --md-comp-column-chart-shape: var(--md-sys-shape-corner-extra-small);
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -15825,6 +15924,7 @@
   }
   .column-chart-plot {
     position: relative;
+    isolation: isolate;
     height: var(--md-comp-column-chart-height);
     border-block-end: 1px solid var(--md-comp-column-chart-grid-color);
     border-radius: 2px;
@@ -15839,6 +15939,11 @@
     position: absolute;
     inset-block: 0;
     pointer-events: none;
+    z-index: -1;
+    width: calc(100% / var(--rows, 1));
+    border-radius: var(--md-comp-column-chart-shape);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
+    translate: -50% 0;
   }
   .column-chart-tooltip {
     --md-comp-column-chart-tooltip-color: var(--md-sys-color-surface-container);
@@ -15978,6 +16083,9 @@
     .column-chart-tooltip {
       outline: 1px solid CanvasText;
     }
+    .column-chart-cursor {
+      outline: 1px solid CanvasText;
+    }
     .column-chart-legend > li::before,
     .column-chart-tooltip > span:nth-of-type(odd)::before {
       forced-color-adjust: none;
@@ -16026,9 +16134,9 @@
     width: var(--md-comp-column-chart-axis-width);
     padding-inline-end: 8px;
     overflow: hidden;
-    text-align: end;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: end;
     translate: 0 -50%;
   }
   .column-chart-axis.end > li {
@@ -16041,7 +16149,6 @@
   }
   .column-chart {
     --md-comp-column-chart-column-width: 60%;
-    --md-comp-column-chart-shape: var(--md-sys-shape-corner-extra-small);
     --md-comp-column-chart-track-color: var(--md-sys-color-surface-container-highest);
   }
   .column-chart-columns {
@@ -16108,23 +16215,10 @@
   .column-chart.track .column-chart-columns > div > span {
     --column-chart-base: var(--md-comp-column-chart-shape);
   }
-  .column-chart-plot {
-    isolation: isolate;
-  }
-  .column-chart-cursor {
-    z-index: -1;
-    width: calc(100% / var(--rows, 1));
-    border-radius: var(--md-comp-column-chart-shape);
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
-    translate: -50% 0;
-  }
   @media (forced-colors: active) {
     .column-chart-columns > div > span {
       forced-color-adjust: none;
     }
-    .column-chart-cursor {
-      outline: 1px solid CanvasText;
-    }
     .column-chart.track .column-chart-columns > div {
       outline: 1px solid CanvasText;
       outline-offset: -1px;
@@ -16137,13 +16231,32 @@
     --md-comp-bar-chart-color-2: var(--md-sys-color-tertiary);
     --md-comp-bar-chart-color-3: var(--md-sys-color-secondary);
     --md-comp-bar-chart-color-4: var(--md-sys-color-on-surface-variant);
-    display: flex;
+    --md-comp-bar-chart-on-color-1: var(--md-sys-color-on-primary);
+    --md-comp-bar-chart-on-color-2: var(--md-sys-color-on-tertiary);
+    --md-comp-bar-chart-on-color-3: var(--md-sys-color-on-secondary);
+    --md-comp-bar-chart-on-color-4: var(--md-sys-color-surface);
+    --md-comp-bar-chart-row-height: 2.5rem;
+    --md-comp-bar-chart-shape: var(--md-sys-shape-corner-extra-small);
+    display: grid;
     flex-direction: column;
     gap: 8px;
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
     position: relative;
+    grid-template-columns: fit-content(40%) minmax(0, 1fr);
+    grid-auto-flow: row dense;
+    align-content: start;
+    column-gap: 12px;
+  }
+  .bar-chart > * {
+    grid-column: 1/-1;
+  }
+  .bar-chart > .bar-chart-plot {
+    grid-column: 2;
+  }
+  .bar-chart > .bar-chart-labels {
+    grid-column: 1;
   }
   .bar-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -16168,22 +16281,27 @@
   }
   .bar-chart [data-series="1"] {
     --bar-chart-color: var(--md-comp-bar-chart-color-1);
+    --bar-chart-on-color: var(--md-comp-bar-chart-on-color-1);
   }
   .bar-chart [data-series="2"] {
     --bar-chart-color: var(--md-comp-bar-chart-color-2);
+    --bar-chart-on-color: var(--md-comp-bar-chart-on-color-2);
   }
   .bar-chart [data-series="3"] {
     --bar-chart-color: var(--md-comp-bar-chart-color-3);
+    --bar-chart-on-color: var(--md-comp-bar-chart-on-color-3);
   }
   .bar-chart [data-series="4"] {
     --bar-chart-color: var(--md-comp-bar-chart-color-4);
+    --bar-chart-on-color: var(--md-comp-bar-chart-on-color-4);
   }
   .bar-chart-plot {
     position: relative;
-    height: var(--md-comp-bar-chart-height);
-    border-block-end: 1px solid var(--md-comp-bar-chart-grid-color);
+    isolation: isolate;
+    height: calc(var(--rows, 1) * var(--md-comp-bar-chart-row-height));
+    border-right: 1px solid var(--md-comp-bar-chart-grid-color);
     border-radius: 2px;
-    background: linear-gradient(var(--md-comp-bar-chart-grid-color) 1px, transparent 0) 0 0/100% 25%;
+    background: linear-gradient(to right, var(--md-comp-bar-chart-grid-color) 1px, transparent 0) 0 0/25% 100%;
     touch-action: pan-y;
   }
   .bar-chart-plot:focus-visible {
@@ -16192,13 +16310,20 @@
   }
   .bar-chart-cursor {
     position: absolute;
-    inset-block: 0;
+    inset-block: auto;
+    inset-inline: 0;
+    height: calc(100% / var(--rows, 1));
     pointer-events: none;
+    z-index: -1;
+    border-radius: var(--md-comp-bar-chart-shape);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
+    translate: 0 -50%;
   }
   .bar-chart-tooltip {
     --md-comp-bar-chart-tooltip-color: var(--md-sys-color-surface-container);
     position: absolute;
     top: 0;
+    left: 50%;
     z-index: 1;
     display: grid;
     grid-template-columns: auto auto;
@@ -16217,7 +16342,7 @@
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
     pointer-events: none;
-    translate: 12px 0;
+    translate: -50% calc(var(--md-comp-bar-chart-row-height) / 2);
     box-shadow: var(--md-sys-elevation-level2);
   }
   @container style(--expressive-glass: true) {
@@ -16236,7 +16361,7 @@
     display: none;
   }
   .bar-chart-tooltip.end {
-    translate: calc(-100% - 12px) 0;
+    translate: -50% calc(-100% - var(--md-comp-bar-chart-row-height) / 2);
   }
   .bar-chart-tooltip > strong {
     grid-column: 1/-1;
@@ -16272,8 +16397,10 @@
   .bar-chart-labels {
     display: grid;
     grid-auto-columns: minmax(0, 1fr);
-    grid-auto-flow: column;
-    text-align: center;
+    grid-auto-rows: minmax(0, 1fr);
+    grid-auto-flow: row;
+    align-items: center;
+    text-align: end;
   }
   .bar-chart-labels > li {
     overflow: hidden;
@@ -16333,6 +16460,9 @@
     .bar-chart-tooltip {
       outline: 1px solid CanvasText;
     }
+    .bar-chart-cursor {
+      outline: 1px solid CanvasText;
+    }
     .bar-chart-legend > li::before,
     .bar-chart-tooltip > span:nth-of-type(odd)::before {
       forced-color-adjust: none;
@@ -16372,9 +16502,9 @@
     width: var(--md-comp-bar-chart-axis-width);
     padding-inline-end: 8px;
     overflow: hidden;
-    text-align: end;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: end;
     translate: 0 -50%;
   }
   .bar-chart-axis.end > li {
@@ -16386,28 +16516,8 @@
     text-align: start;
   }
   .bar-chart {
-    --md-comp-bar-chart-row-height: 2.5rem;
     --md-comp-bar-chart-bar-height: 60%;
-    --md-comp-bar-chart-shape: var(--md-sys-shape-corner-extra-small);
     --md-comp-bar-chart-track-color: var(--md-sys-color-surface-container-highest);
-    --md-comp-bar-chart-on-color-1: var(--md-sys-color-on-primary);
-    --md-comp-bar-chart-on-color-2: var(--md-sys-color-on-tertiary);
-    --md-comp-bar-chart-on-color-3: var(--md-sys-color-on-secondary);
-    --md-comp-bar-chart-on-color-4: var(--md-sys-color-surface);
-    display: grid;
-    grid-template-columns: fit-content(40%) minmax(0, 1fr);
-    grid-auto-flow: row dense;
-    align-content: start;
-    column-gap: 12px;
-  }
-  .bar-chart > * {
-    grid-column: 1/-1;
-  }
-  .bar-chart > .bar-chart-plot {
-    grid-column: 2;
-  }
-  .bar-chart > .bar-chart-labels {
-    grid-column: 1;
   }
   .bar-chart.sparkline {
     --md-comp-bar-chart-row-height: 1.5rem;
@@ -16417,25 +16527,6 @@
     --bar-chart-joint: var(--md-comp-bar-chart-shape);
     --bar-chart-gap: 2px;
   }
-  .bar-chart [data-series="1"] {
-    --bar-chart-on-color: var(--md-comp-bar-chart-on-color-1);
-  }
-  .bar-chart [data-series="2"] {
-    --bar-chart-on-color: var(--md-comp-bar-chart-on-color-2);
-  }
-  .bar-chart [data-series="3"] {
-    --bar-chart-on-color: var(--md-comp-bar-chart-on-color-3);
-  }
-  .bar-chart [data-series="4"] {
-    --bar-chart-on-color: var(--md-comp-bar-chart-on-color-4);
-  }
-  .bar-chart-plot {
-    isolation: isolate;
-    height: calc(var(--rows, 1) * var(--md-comp-bar-chart-row-height));
-    border-block-end: 0;
-    border-right: 1px solid var(--md-comp-bar-chart-grid-color);
-    background: linear-gradient(to right, var(--md-comp-bar-chart-grid-color) 1px, transparent 0) 0 0/25% 100%;
-  }
   .bar-chart.axis > :is(.bar-chart-plot, .bar-chart-labels) {
     margin-block-end: 24px;
   }
@@ -16452,12 +16543,6 @@
     overflow: visible;
     translate: -50% 0;
   }
-  .bar-chart-labels {
-    grid-auto-rows: minmax(0, 1fr);
-    grid-auto-flow: row;
-    align-items: center;
-    text-align: end;
-  }
   .bar-chart-layers {
     display: contents;
   }
@@ -16540,6 +16625,8 @@
   .bar-chart-values > div > span {
     --bar-chart-text-color: var(--md-sys-color-on-surface);
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     align-content: center;
     padding: 0 8px 0 calc(var(--bar-chart-left) + 8px);
     background: linear-gradient(to right, var(--bar-chart-text-color) var(--bar-chart-left), var(--bar-chart-on-color) 0 calc(100% - var(--bar-chart-right)), var(--bar-chart-text-color) 0);
@@ -16553,8 +16640,6 @@
     letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
     font-variant-numeric: tabular-nums;
     text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
   .bar-chart-values:not(.rtl) > div > span.negative, .bar-chart-values.rtl > div > span:not(.negative) {
     padding: 0 calc(var(--bar-chart-right) + 8px) 0 8px;
@@ -16574,26 +16659,7 @@
     padding: 0 calc(var(--bar-chart-right) + 8px) 0 calc(var(--bar-chart-left) + 8px);
     clip-path: inset(0 var(--bar-chart-right) 0 var(--bar-chart-left));
   }
-  .bar-chart-cursor {
-    z-index: -1;
-    inset-block: auto;
-    inset-inline: 0;
-    height: calc(100% / var(--rows, 1));
-    border-radius: var(--md-comp-bar-chart-shape);
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
-    translate: 0 -50%;
-  }
-  .bar-chart-tooltip {
-    left: 50%;
-    translate: -50% calc(var(--md-comp-bar-chart-row-height) / 2);
-  }
-  .bar-chart-tooltip.end {
-    translate: -50% calc(-100% - var(--md-comp-bar-chart-row-height) / 2);
-  }
   @media (forced-colors: active) {
-    .bar-chart-plot {
-      background: none;
-    }
     .bar-chart-bars > div > span,
     .bar-chart-values > div > span {
       forced-color-adjust: none;
@@ -16601,9 +16667,6 @@
     .bar-chart-values > div > span {
       --bar-chart-text-color: CanvasText;
     }
-    .bar-chart-cursor {
-      outline: 1px solid CanvasText;
-    }
     .bar-chart.track .bar-chart-bars > div {
       outline: 1px solid CanvasText;
       outline-offset: -1px;
@@ -16616,6 +16679,14 @@
     --md-comp-pie-chart-color-2: var(--md-sys-color-tertiary);
     --md-comp-pie-chart-color-3: var(--md-sys-color-secondary);
     --md-comp-pie-chart-color-4: var(--md-sys-color-on-surface-variant);
+    --md-comp-pie-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
+    --md-comp-pie-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
+    --md-comp-pie-chart-on-color-1: var(--md-sys-color-on-primary);
+    --md-comp-pie-chart-on-color-2: var(--md-sys-color-on-tertiary);
+    --md-comp-pie-chart-on-color-3: var(--md-sys-color-on-secondary);
+    --md-comp-pie-chart-on-color-4: var(--md-sys-color-surface);
+    --md-comp-pie-chart-on-color-5: var(--md-sys-color-surface);
+    --md-comp-pie-chart-on-color-6: var(--md-sys-color-surface);
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -16647,22 +16718,35 @@
   }
   .pie-chart [data-series="1"] {
     --pie-chart-color: var(--md-comp-pie-chart-color-1);
+    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-1);
   }
   .pie-chart [data-series="2"] {
     --pie-chart-color: var(--md-comp-pie-chart-color-2);
+    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-2);
   }
   .pie-chart [data-series="3"] {
     --pie-chart-color: var(--md-comp-pie-chart-color-3);
+    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-3);
   }
   .pie-chart [data-series="4"] {
     --pie-chart-color: var(--md-comp-pie-chart-color-4);
+    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-4);
+  }
+  .pie-chart [data-series="5"] {
+    --pie-chart-color: var(--md-comp-pie-chart-color-5);
+    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-5);
+  }
+  .pie-chart [data-series="6"] {
+    --pie-chart-color: var(--md-comp-pie-chart-color-6);
+    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-6);
   }
   .pie-chart-plot {
     position: relative;
-    height: var(--md-comp-pie-chart-height);
-    border-block-end: 1px solid var(--md-comp-pie-chart-grid-color);
-    border-radius: 2px;
-    background: linear-gradient(var(--md-comp-pie-chart-grid-color) 1px, transparent 0) 0 0/100% 25%;
+    width: min(100%, var(--md-comp-pie-chart-height));
+    height: auto;
+    aspect-ratio: 1;
+    margin-inline: auto;
+    border-radius: 50%;
     touch-action: pan-y;
   }
   .pie-chart-plot:focus-visible {
@@ -16696,7 +16780,7 @@
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
     pointer-events: none;
-    translate: 12px 0;
+    translate: 12px -50%;
     box-shadow: var(--md-sys-elevation-level2);
   }
   @container style(--expressive-glass: true) {
@@ -16715,7 +16799,7 @@
     display: none;
   }
   .pie-chart-tooltip.end {
-    translate: calc(-100% - 12px) 0;
+    translate: calc(-100% - 12px) -50%;
   }
   .pie-chart-tooltip > strong {
     grid-column: 1/-1;
@@ -16774,15 +16858,30 @@
     visibility: hidden;
   }
   .pie-chart-legend {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    align-items: center;
     flex-wrap: wrap;
-    gap: 4px 16px;
+    gap: 8px;
+  }
+  .pie-chart-legend > li {
+    position: relative;
+    display: contents;
+    align-items: center;
+    gap: 8px;
+  }
+  .pie-chart-legend > li > span:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .pie-chart-legend > li > span:not(:first-child) {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
   }
-  .pie-chart-legend > li {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 8px;
+  .pie-chart-legend > li > span:nth-child(2) {
+    color: var(--md-sys-color-on-surface);
+    font-weight: 500;
   }
   .pie-chart-legend > li::before,
   .pie-chart-tooltip > span:nth-of-type(odd)::before {
@@ -16798,17 +16897,13 @@
     overflow: clip;
   }
   .pie-chart.sparkline .pie-chart-plot {
-    border: 0;
-    background: none;
+    margin-inline: 0;
   }
   .pie-chart.sparkline .pie-chart-labels,
   .pie-chart.sparkline .pie-chart-legend {
     display: none;
   }
   @media (forced-colors: active) {
-    .pie-chart-plot {
-      background: none;
-    }
     .pie-chart-tooltip {
       outline: 1px solid CanvasText;
     }
@@ -16820,14 +16915,6 @@
   .pie-chart {
     --md-comp-pie-chart-hole: 0.6;
     --md-comp-pie-chart-gap: 1.5;
-    --md-comp-pie-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
-    --md-comp-pie-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
-    --md-comp-pie-chart-on-color-1: var(--md-sys-color-on-primary);
-    --md-comp-pie-chart-on-color-2: var(--md-sys-color-on-tertiary);
-    --md-comp-pie-chart-on-color-3: var(--md-sys-color-on-secondary);
-    --md-comp-pie-chart-on-color-4: var(--md-sys-color-surface);
-    --md-comp-pie-chart-on-color-5: var(--md-sys-color-surface);
-    --md-comp-pie-chart-on-color-6: var(--md-sys-color-surface);
     --pie-chart-label-at: 0.62;
     gap: 16px;
   }
@@ -16837,39 +16924,6 @@
   .pie-chart.donut {
     --pie-chart-label-at: calc((1 + var(--md-comp-pie-chart-hole)) / 2);
   }
-  .pie-chart [data-series="1"] {
-    --pie-chart-color: var(--md-comp-pie-chart-color-1);
-    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-1);
-  }
-  .pie-chart [data-series="2"] {
-    --pie-chart-color: var(--md-comp-pie-chart-color-2);
-    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-2);
-  }
-  .pie-chart [data-series="3"] {
-    --pie-chart-color: var(--md-comp-pie-chart-color-3);
-    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-3);
-  }
-  .pie-chart [data-series="4"] {
-    --pie-chart-color: var(--md-comp-pie-chart-color-4);
-    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-4);
-  }
-  .pie-chart [data-series="5"] {
-    --pie-chart-color: var(--md-comp-pie-chart-color-5);
-    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-5);
-  }
-  .pie-chart [data-series="6"] {
-    --pie-chart-color: var(--md-comp-pie-chart-color-6);
-    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-6);
-  }
-  .pie-chart-plot {
-    width: min(100%, var(--md-comp-pie-chart-height));
-    height: auto;
-    aspect-ratio: 1;
-    margin-inline: auto;
-    border: 0;
-    border-radius: 50%;
-    background: none;
-  }
   .pie-chart-pie {
     position: absolute;
     inset: 0;
@@ -16973,12 +17027,6 @@
   .pie-chart-names > span.end::before {
     left: calc(100% + 4px);
   }
-  .pie-chart-tooltip {
-    translate: 12px -50%;
-  }
-  .pie-chart-tooltip.end {
-    translate: calc(-100% - 12px) -50%;
-  }
   .pie-chart-total {
     position: absolute;
     inset: 0;
@@ -17011,31 +17059,6 @@
   .pie-chart.donut .pie-chart-total {
     display: flex;
   }
-  .pie-chart-legend {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto auto;
-    align-items: center;
-    gap: 8px;
-  }
-  .pie-chart-legend > li {
-    display: contents;
-  }
-  .pie-chart-legend > li > span:first-child {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .pie-chart-legend > li > span:not(:first-child) {
-    text-align: end;
-    font-variant-numeric: tabular-nums;
-  }
-  .pie-chart-legend > li > span:nth-child(2) {
-    color: var(--md-sys-color-on-surface);
-    font-weight: 500;
-  }
-  .pie-chart.sparkline .pie-chart-plot {
-    margin-inline: 0;
-  }
   @media (forced-colors: active) {
     .pie-chart-pie {
       forced-color-adjust: none;
@@ -17092,9 +17115,7 @@
   .heatmap-chart-plot {
     position: relative;
     height: var(--md-comp-heatmap-chart-height);
-    border-block-end: 1px solid var(--md-comp-heatmap-chart-grid-color);
     border-radius: 2px;
-    background: linear-gradient(var(--md-comp-heatmap-chart-grid-color) 1px, transparent 0) 0 0/100% 25%;
     touch-action: pan-y;
   }
   .heatmap-chart-plot:focus-visible {
@@ -17229,18 +17250,11 @@
     --md-comp-heatmap-chart-height: 48px;
     overflow: clip;
   }
-  .heatmap-chart.sparkline .heatmap-chart-plot {
-    border: 0;
-    background: none;
-  }
   .heatmap-chart.sparkline .heatmap-chart-labels,
   .heatmap-chart.sparkline .heatmap-chart-legend {
     display: none;
   }
   @media (forced-colors: active) {
-    .heatmap-chart-plot {
-      background: none;
-    }
     .heatmap-chart-tooltip {
       outline: 1px solid CanvasText;
     }
@@ -17264,8 +17278,6 @@
   }
   .heatmap-chart-plot {
     height: auto;
-    border: 0;
-    background: none;
   }
   .heatmap-chart-grid {
     display: grid;
@@ -17446,9 +17458,7 @@
   .radar-chart-plot {
     position: relative;
     height: var(--md-comp-radar-chart-height);
-    border-block-end: 1px solid var(--md-comp-radar-chart-grid-color);
     border-radius: 2px;
-    background: linear-gradient(var(--md-comp-radar-chart-grid-color) 1px, transparent 0) 0 0/100% 25%;
     touch-action: pan-y;
   }
   .radar-chart-plot:focus-visible {
@@ -17459,6 +17469,18 @@
     position: absolute;
     inset-block: 0;
     pointer-events: none;
+    width: 1px;
+    background-color: var(--md-sys-color-outline);
+  }
+  .radar-chart-cursor > span {
+    position: absolute;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    border: 2px solid var(--md-sys-color-surface);
+    border-radius: 50%;
+    background-color: var(--radar-chart-color);
+    translate: -50% -50%;
   }
   .radar-chart-tooltip {
     --md-comp-radar-chart-tooltip-color: var(--md-sys-color-surface-container);
@@ -17482,7 +17504,7 @@
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
     pointer-events: none;
-    translate: 12px 0;
+    translate: 12px -50%;
     box-shadow: var(--md-sys-elevation-level2);
   }
   @container style(--expressive-glass: true) {
@@ -17501,7 +17523,7 @@
     display: none;
   }
   .radar-chart-tooltip.end {
-    translate: calc(-100% - 12px) 0;
+    translate: calc(-100% - 12px) -50%;
   }
   .radar-chart-tooltip > strong {
     grid-column: 1/-1;
@@ -17583,21 +17605,20 @@
     --md-comp-radar-chart-height: 48px;
     overflow: clip;
   }
-  .radar-chart.sparkline .radar-chart-plot {
-    border: 0;
-    background: none;
-  }
   .radar-chart.sparkline .radar-chart-labels,
   .radar-chart.sparkline .radar-chart-legend {
     display: none;
   }
   @media (forced-colors: active) {
-    .radar-chart-plot {
-      background: none;
-    }
     .radar-chart-tooltip {
       outline: 1px solid CanvasText;
     }
+    .radar-chart-cursor {
+      background-color: CanvasText;
+    }
+    .radar-chart-cursor > span {
+      forced-color-adjust: none;
+    }
     .radar-chart-legend > li::before,
     .radar-chart-tooltip > span:nth-of-type(odd)::before {
       forced-color-adjust: none;
@@ -17637,9 +17658,9 @@
     width: var(--md-comp-radar-chart-axis-width);
     padding-inline-end: 8px;
     overflow: hidden;
-    text-align: end;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: end;
     translate: 0 -50%;
   }
   .radar-chart-axis.end > li {
@@ -17665,9 +17686,7 @@
     height: auto;
     aspect-ratio: 1;
     margin: min(var(--md-comp-radar-chart-label-room), 2 * var(--md-sys-typescale-body-small-line-height) + var(--radar-chart-label-offset)) auto;
-    border: 0;
     border-radius: 50%;
-    background: none;
   }
   .radar-chart-axis > li {
     inset-inline: auto;
@@ -17758,30 +17777,14 @@
   }
   .radar-chart-cursor {
     inset: auto auto 50% 50%;
-    width: 1px;
     height: 50%;
-    background-color: var(--md-sys-color-outline);
     transform-origin: bottom;
     rotate: calc(var(--turn, 0) * 1turn);
   }
-  .radar-chart-cursor > span {
-    position: absolute;
-    left: 0;
-    width: 10px;
-    height: 10px;
-    border: 2px solid var(--md-sys-color-surface);
-    border-radius: 50%;
-    background-color: var(--radar-chart-color);
-    translate: -50% -50%;
-  }
   .radar-chart-tooltip {
     --radar-chart-angle: calc(var(--turn, 0) * 1turn);
     left: calc(50% + sin(var(--radar-chart-angle)) * 50%);
     top: calc(50% - cos(var(--radar-chart-angle)) * 50%);
-    translate: 12px -50%;
-  }
-  .radar-chart-tooltip.end {
-    translate: calc(-100% - 12px) -50%;
   }
   .radar-chart-legend {
     justify-content: center;
@@ -17799,12 +17802,6 @@
     .radar-chart-axes {
       forced-color-adjust: auto;
     }
-    .radar-chart-cursor {
-      background-color: CanvasText;
-    }
-    .radar-chart-cursor > span {
-      forced-color-adjust: none;
-    }
   }
   .radial-chart {
     --md-comp-radial-chart-height: 15rem;
@@ -17856,10 +17853,11 @@
   }
   .radial-chart-plot {
     position: relative;
-    height: var(--md-comp-radial-chart-height);
-    border-block-end: 1px solid var(--md-comp-radial-chart-grid-color);
-    border-radius: 2px;
-    background: linear-gradient(var(--md-comp-radial-chart-grid-color) 1px, transparent 0) 0 0/100% 25%;
+    width: min(100%, var(--md-comp-radial-chart-height));
+    height: auto;
+    aspect-ratio: 1;
+    margin-inline: auto;
+    border-radius: 50%;
     touch-action: pan-y;
   }
   .radial-chart-plot:focus-visible {
@@ -17893,7 +17891,7 @@
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
     pointer-events: none;
-    translate: 12px 0;
+    translate: 12px -50%;
     box-shadow: var(--md-sys-elevation-level2);
   }
   @container style(--expressive-glass: true) {
@@ -17912,7 +17910,7 @@
     display: none;
   }
   .radial-chart-tooltip.end {
-    translate: calc(-100% - 12px) 0;
+    translate: calc(-100% - 12px) -50%;
   }
   .radial-chart-tooltip > strong {
     grid-column: 1/-1;
@@ -17971,16 +17969,31 @@
     visibility: hidden;
   }
   .radial-chart-legend {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
     flex-wrap: wrap;
-    gap: 4px 16px;
+    gap: 8px;
   }
   .radial-chart-legend > li {
     position: relative;
-    display: flex;
+    display: contents;
     align-items: center;
     gap: 8px;
   }
+  .radial-chart-legend > li > span:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .radial-chart-legend > li > span:not(:first-child) {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+  .radial-chart-legend > li > span:nth-child(2) {
+    color: var(--md-sys-color-on-surface);
+    font-weight: 500;
+  }
   .radial-chart-legend > li::before,
   .radial-chart-tooltip > span:nth-of-type(odd)::before {
     content: "";
@@ -17995,17 +18008,13 @@
     overflow: clip;
   }
   .radial-chart.sparkline .radial-chart-plot {
-    border: 0;
-    background: none;
+    margin-inline: 0;
   }
   .radial-chart.sparkline .radial-chart-labels,
   .radial-chart.sparkline .radial-chart-legend {
     display: none;
   }
   @media (forced-colors: active) {
-    .radial-chart-plot {
-      background: none;
-    }
     .radial-chart-tooltip {
       outline: 1px solid CanvasText;
     }
@@ -18020,15 +18029,6 @@
     --md-comp-radial-chart-track-color: var(--md-sys-color-surface-container-highest);
     gap: 16px;
   }
-  .radial-chart-plot {
-    width: min(100%, var(--md-comp-radial-chart-height));
-    height: auto;
-    aspect-ratio: 1;
-    margin-inline: auto;
-    border: 0;
-    border-radius: 50%;
-    background: none;
-  }
   .radial-chart.gauge .radial-chart-plot {
     aspect-ratio: 2;
     border-radius: 50% 50% 0 0/100% 100% 0 0;
@@ -18118,6 +18118,8 @@
     right: calc(50% + 4px);
     max-width: calc(50% - 8px);
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     translate: 0 -50%;
     color: var(--md-sys-color-on-surface-variant);
     font-family: var(--md-sys-typescale-label-medium-font-family-name);
@@ -18127,8 +18129,6 @@
     letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
     font-size: min(var(--md-sys-typescale-label-medium-font-size), var(--radial-chart-step, 10) * 0.6cqw);
     line-height: 1.2;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
   .radial-chart.gauge.labels:not(.sparkline) .radial-chart-plot {
     margin-block-end: calc(var(--radial-chart-rows, 0) * var(--md-sys-typescale-label-medium-line-height) + 4px);
@@ -18145,12 +18145,6 @@
     font-size: var(--md-sys-typescale-label-medium-font-size);
     line-height: var(--md-sys-typescale-label-medium-line-height);
   }
-  .radial-chart-tooltip {
-    translate: 12px -50%;
-  }
-  .radial-chart-tooltip.end {
-    translate: calc(-100% - 12px) -50%;
-  }
   .radial-chart-total {
     position: absolute;
     inset: 0;
@@ -18183,29 +18177,8 @@
   .radial-chart.gauge .radial-chart-total {
     justify-content: end;
   }
-  .radial-chart-legend {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    align-items: center;
-    gap: 8px;
-  }
-  .radial-chart-legend > li {
-    display: contents;
-  }
-  .radial-chart-legend > li > span:first-child {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .radial-chart-legend > li > span:last-child {
-    text-align: end;
-    color: var(--md-sys-color-on-surface);
-    font-weight: 500;
-    font-variant-numeric: tabular-nums;
-  }
   .radial-chart.sparkline .radial-chart-plot {
     width: var(--md-comp-radial-chart-height);
-    margin-inline: 0;
   }
   @media (forced-colors: active) {
     .radial-chart-rings {
@@ -18219,6 +18192,7 @@
     --md-comp-mixed-chart-color-2: var(--md-sys-color-tertiary);
     --md-comp-mixed-chart-color-3: var(--md-sys-color-secondary);
     --md-comp-mixed-chart-color-4: var(--md-sys-color-on-surface-variant);
+    --md-comp-mixed-chart-line-width: 3px;
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -18381,23 +18355,49 @@
     flex-wrap: wrap;
     gap: 4px 16px;
   }
-  .mixed-chart-legend > li {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 8px;
+  .mixed-chart-legend > li {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .mixed-chart-legend > li::before,
+  .mixed-chart-tooltip > span:nth-of-type(odd)::before {
+    content: "";
+    flex: none;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--mixed-chart-color);
+  }
+  .mixed-chart-line {
+    fill: none;
+    stroke: var(--mixed-chart-color);
+    stroke-width: var(--md-comp-mixed-chart-line-width);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+  }
+  .mixed-chart-series.dashed .mixed-chart-line {
+    stroke-dasharray: 2 8;
+  }
+  .mixed-chart-points {
+    fill: none;
+    stroke: var(--mixed-chart-color);
+    stroke-width: calc(var(--md-comp-mixed-chart-line-width) * 3);
+    stroke-linecap: round;
+    vector-effect: non-scaling-stroke;
+  }
+  .mixed-chart-series stop {
+    stop-color: var(--mixed-chart-color);
+    stop-opacity: 0;
   }
-  .mixed-chart-legend > li::before,
-  .mixed-chart-tooltip > span:nth-of-type(odd)::before {
-    content: "";
-    flex: none;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: var(--mixed-chart-color);
+  .mixed-chart-series stop:first-child {
+    stop-opacity: 0.24;
   }
   .mixed-chart.sparkline {
     --md-comp-mixed-chart-height: 48px;
+    --md-comp-mixed-chart-line-width: 2px;
     overflow: clip;
   }
   .mixed-chart.sparkline .mixed-chart-plot {
@@ -18463,9 +18463,9 @@
     width: var(--md-comp-mixed-chart-axis-width);
     padding-inline-end: 8px;
     overflow: hidden;
-    text-align: end;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: end;
     translate: 0 -50%;
   }
   .mixed-chart-axis.end > li {
@@ -18479,10 +18479,6 @@
   .mixed-chart {
     --md-comp-mixed-chart-column-width: 50%;
     --md-comp-mixed-chart-shape: var(--md-sys-shape-corner-extra-small);
-    --md-comp-mixed-chart-line-width: 3px;
-  }
-  .mixed-chart.sparkline {
-    --md-comp-mixed-chart-line-width: 2px;
   }
   .mixed-chart-plot {
     isolation: isolate;
@@ -18541,34 +18537,9 @@
   .mixed-chart.stacked .mixed-chart-columns > div > span:not(:last-child, :has(+ .end)) {
     --mixed-chart-ends: 0;
   }
-  .mixed-chart-line {
-    fill: none;
-    stroke: var(--mixed-chart-color);
-    stroke-width: var(--md-comp-mixed-chart-line-width);
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vector-effect: non-scaling-stroke;
-  }
-  .mixed-chart-series.dashed .mixed-chart-line {
-    stroke-dasharray: 2 8;
-  }
-  .mixed-chart-points {
-    fill: none;
-    stroke: var(--mixed-chart-color);
-    stroke-width: calc(var(--md-comp-mixed-chart-line-width) * 3);
-    stroke-linecap: round;
-    vector-effect: non-scaling-stroke;
-  }
   .mixed-chart-series:not(.area) .mixed-chart-area {
     display: none;
   }
-  .mixed-chart-series stop {
-    stop-color: var(--mixed-chart-color);
-    stop-opacity: 0;
-  }
-  .mixed-chart-series stop:first-child {
-    stop-opacity: 0.24;
-  }
   .mixed-chart-cursor {
     width: calc(100% / var(--rows, 1));
     margin-left: calc(-50% / var(--rows, 1));
@@ -18696,7 +18667,7 @@
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
     pointer-events: none;
-    translate: 12px 0;
+    translate: 12px -50%;
     box-shadow: var(--md-sys-elevation-level2);
   }
   @container style(--expressive-glass: true) {
@@ -18715,7 +18686,7 @@
     display: none;
   }
   .scatter-chart-tooltip.end {
-    translate: calc(-100% - 12px) 0;
+    translate: calc(-100% - 12px) -50%;
   }
   .scatter-chart-tooltip > strong {
     grid-column: 1/-1;
@@ -18860,9 +18831,9 @@
     width: var(--md-comp-scatter-chart-axis-width);
     padding-inline-end: 8px;
     overflow: hidden;
-    text-align: end;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: end;
     translate: 0 -50%;
   }
   .scatter-chart-axis.end > li {
@@ -18943,12 +18914,6 @@
     width: max(14px, var(--md-comp-scatter-chart-bubble-size) * var(--scatter-chart-size) + 4px);
     height: max(14px, var(--md-comp-scatter-chart-bubble-size) * var(--scatter-chart-size) + 4px);
   }
-  .scatter-chart-tooltip {
-    translate: 12px -50%;
-  }
-  .scatter-chart-tooltip.end {
-    translate: calc(-100% - 12px) -50%;
-  }
   .scatter-chart-tooltip > span.x::before {
     content: none;
   }
@@ -18967,13 +18932,28 @@
     --md-comp-funnel-chart-color-2: var(--md-sys-color-tertiary);
     --md-comp-funnel-chart-color-3: var(--md-sys-color-secondary);
     --md-comp-funnel-chart-color-4: var(--md-sys-color-on-surface-variant);
-    display: flex;
+    --md-comp-funnel-chart-row-height: 2.5rem;
+    --md-comp-funnel-chart-shape: var(--md-sys-shape-corner-extra-small);
+    display: grid;
     flex-direction: column;
     gap: 8px;
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
     position: relative;
+    grid-template-columns: fit-content(40%) minmax(0, 1fr);
+    grid-auto-flow: row dense;
+    align-content: start;
+    column-gap: 12px;
+  }
+  .funnel-chart > * {
+    grid-column: 1/-1;
+  }
+  .funnel-chart > .funnel-chart-plot {
+    grid-column: 2;
+  }
+  .funnel-chart > .funnel-chart-labels {
+    grid-column: 1;
   }
   .funnel-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -19010,10 +18990,9 @@
   }
   .funnel-chart-plot {
     position: relative;
-    height: var(--md-comp-funnel-chart-height);
-    border-block-end: 1px solid var(--md-comp-funnel-chart-grid-color);
+    isolation: isolate;
+    height: calc(var(--rows, 1) * var(--md-comp-funnel-chart-row-height));
     border-radius: 2px;
-    background: linear-gradient(var(--md-comp-funnel-chart-grid-color) 1px, transparent 0) 0 0/100% 25%;
     touch-action: pan-y;
   }
   .funnel-chart-plot:focus-visible {
@@ -19022,13 +19001,20 @@
   }
   .funnel-chart-cursor {
     position: absolute;
-    inset-block: 0;
+    inset-block: auto;
+    inset-inline: 0;
+    height: calc(100% / var(--rows, 1));
     pointer-events: none;
+    z-index: -1;
+    border-radius: var(--md-comp-funnel-chart-shape);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
+    translate: 0 -50%;
   }
   .funnel-chart-tooltip {
     --md-comp-funnel-chart-tooltip-color: var(--md-sys-color-surface-container);
     position: absolute;
     top: 0;
+    left: 50%;
     z-index: 1;
     display: grid;
     grid-template-columns: auto auto;
@@ -19047,7 +19033,7 @@
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
     pointer-events: none;
-    translate: 12px 0;
+    translate: -50% calc(var(--md-comp-funnel-chart-row-height) / 2);
     box-shadow: var(--md-sys-elevation-level2);
   }
   @container style(--expressive-glass: true) {
@@ -19066,7 +19052,7 @@
     display: none;
   }
   .funnel-chart-tooltip.end {
-    translate: calc(-100% - 12px) 0;
+    translate: -50% calc(-100% - var(--md-comp-funnel-chart-row-height) / 2);
   }
   .funnel-chart-tooltip > strong {
     grid-column: 1/-1;
@@ -19102,8 +19088,10 @@
   .funnel-chart-labels {
     display: grid;
     grid-auto-columns: minmax(0, 1fr);
-    grid-auto-flow: column;
-    text-align: center;
+    grid-auto-rows: minmax(0, 1fr);
+    grid-auto-flow: row;
+    align-items: center;
+    text-align: end;
   }
   .funnel-chart-labels > li {
     overflow: hidden;
@@ -19148,56 +19136,24 @@
     --md-comp-funnel-chart-height: 48px;
     overflow: clip;
   }
-  .funnel-chart.sparkline .funnel-chart-plot {
-    border: 0;
-    background: none;
-  }
   .funnel-chart.sparkline .funnel-chart-labels,
   .funnel-chart.sparkline .funnel-chart-legend {
     display: none;
   }
   @media (forced-colors: active) {
-    .funnel-chart-plot {
-      background: none;
-    }
     .funnel-chart-tooltip {
       outline: 1px solid CanvasText;
     }
+    .funnel-chart-cursor {
+      outline: 1px solid CanvasText;
+    }
     .funnel-chart-legend > li::before,
     .funnel-chart-tooltip > span:nth-of-type(odd)::before {
       forced-color-adjust: none;
     }
   }
   .funnel-chart {
-    --md-comp-funnel-chart-row-height: 2.5rem;
     --md-comp-funnel-chart-stage-height: 60%;
-    --md-comp-funnel-chart-shape: var(--md-sys-shape-corner-extra-small);
-    display: grid;
-    grid-template-columns: fit-content(40%) minmax(0, 1fr);
-    grid-auto-flow: row dense;
-    align-content: start;
-    column-gap: 12px;
-  }
-  .funnel-chart > * {
-    grid-column: 1/-1;
-  }
-  .funnel-chart > .funnel-chart-plot {
-    grid-column: 2;
-  }
-  .funnel-chart > .funnel-chart-labels {
-    grid-column: 1;
-  }
-  .funnel-chart-plot {
-    isolation: isolate;
-    height: calc(var(--rows, 1) * var(--md-comp-funnel-chart-row-height));
-    border-block-end: 0;
-    background: none;
-  }
-  .funnel-chart-labels {
-    grid-auto-rows: minmax(0, 1fr);
-    grid-auto-flow: row;
-    align-items: center;
-    text-align: end;
   }
   .funnel-chart-stages {
     position: absolute;
@@ -19226,29 +19182,10 @@
       }
     }
   }
-  .funnel-chart-cursor {
-    z-index: -1;
-    inset-block: auto;
-    inset-inline: 0;
-    height: calc(100% / var(--rows, 1));
-    border-radius: var(--md-comp-funnel-chart-shape);
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
-    translate: 0 -50%;
-  }
-  .funnel-chart-tooltip {
-    left: 50%;
-    translate: -50% calc(var(--md-comp-funnel-chart-row-height) / 2);
-  }
-  .funnel-chart-tooltip.end {
-    translate: -50% calc(-100% - var(--md-comp-funnel-chart-row-height) / 2);
-  }
   @media (forced-colors: active) {
     .funnel-chart-stages > div > span {
       forced-color-adjust: none;
     }
-    .funnel-chart-cursor {
-      outline: 1px solid CanvasText;
-    }
   }
   .sankey-chart {
     --md-comp-sankey-chart-height: 15rem;
@@ -19257,6 +19194,8 @@
     --md-comp-sankey-chart-color-2: var(--md-sys-color-tertiary);
     --md-comp-sankey-chart-color-3: var(--md-sys-color-secondary);
     --md-comp-sankey-chart-color-4: var(--md-sys-color-on-surface-variant);
+    --md-comp-sankey-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
+    --md-comp-sankey-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -19298,12 +19237,16 @@
   .sankey-chart [data-series="4"] {
     --sankey-chart-color: var(--md-comp-sankey-chart-color-4);
   }
+  .sankey-chart [data-series="5"] {
+    --sankey-chart-color: var(--md-comp-sankey-chart-color-5);
+  }
+  .sankey-chart [data-series="6"] {
+    --sankey-chart-color: var(--md-comp-sankey-chart-color-6);
+  }
   .sankey-chart-plot {
     position: relative;
     height: var(--md-comp-sankey-chart-height);
-    border-block-end: 1px solid var(--md-comp-sankey-chart-grid-color);
     border-radius: 2px;
-    background: linear-gradient(var(--md-comp-sankey-chart-grid-color) 1px, transparent 0) 0 0/100% 25%;
     touch-action: pan-y;
   }
   .sankey-chart-plot:focus-visible {
@@ -19337,7 +19280,7 @@
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
     pointer-events: none;
-    translate: 12px 0;
+    translate: 12px -50%;
     box-shadow: var(--md-sys-elevation-level2);
   }
   @container style(--expressive-glass: true) {
@@ -19356,7 +19299,7 @@
     display: none;
   }
   .sankey-chart-tooltip.end {
-    translate: calc(-100% - 12px) 0;
+    translate: calc(-100% - 12px) -50%;
   }
   .sankey-chart-tooltip > strong {
     grid-column: 1/-1;
@@ -19438,18 +19381,11 @@
     --md-comp-sankey-chart-height: 48px;
     overflow: clip;
   }
-  .sankey-chart.sparkline .sankey-chart-plot {
-    border: 0;
-    background: none;
-  }
   .sankey-chart.sparkline .sankey-chart-labels,
   .sankey-chart.sparkline .sankey-chart-legend {
     display: none;
   }
   @media (forced-colors: active) {
-    .sankey-chart-plot {
-      background: none;
-    }
     .sankey-chart-tooltip {
       outline: 1px solid CanvasText;
     }
@@ -19460,18 +19396,6 @@
   }
   .sankey-chart {
     --md-comp-sankey-chart-link-opacity: 0.4;
-    --md-comp-sankey-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
-    --md-comp-sankey-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
-  }
-  .sankey-chart [data-series="5"] {
-    --sankey-chart-color: var(--md-comp-sankey-chart-color-5);
-  }
-  .sankey-chart [data-series="6"] {
-    --sankey-chart-color: var(--md-comp-sankey-chart-color-6);
-  }
-  .sankey-chart-plot {
-    border: 0;
-    background: none;
   }
   .sankey-chart-plot > svg {
     position: absolute;
@@ -19490,12 +19414,6 @@
   .sankey-chart-link.active {
     fill-opacity: 0.8;
   }
-  .sankey-chart-tooltip {
-    translate: 12px -50%;
-  }
-  .sankey-chart-tooltip.end {
-    translate: calc(-100% - 12px) -50%;
-  }
   .sankey-chart-tooltip > span.value::before {
     content: none;
   }
@@ -19534,6 +19452,14 @@
     --md-comp-treemap-chart-color-2: var(--md-sys-color-tertiary);
     --md-comp-treemap-chart-color-3: var(--md-sys-color-secondary);
     --md-comp-treemap-chart-color-4: var(--md-sys-color-on-surface-variant);
+    --md-comp-treemap-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
+    --md-comp-treemap-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
+    --md-comp-treemap-chart-on-color-1: var(--md-sys-color-on-primary);
+    --md-comp-treemap-chart-on-color-2: var(--md-sys-color-on-tertiary);
+    --md-comp-treemap-chart-on-color-3: var(--md-sys-color-on-secondary);
+    --md-comp-treemap-chart-on-color-4: var(--md-sys-color-surface);
+    --md-comp-treemap-chart-on-color-5: var(--md-sys-color-surface);
+    --md-comp-treemap-chart-on-color-6: var(--md-sys-color-surface);
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -19565,22 +19491,32 @@
   }
   .treemap-chart [data-series="1"] {
     --treemap-chart-color: var(--md-comp-treemap-chart-color-1);
+    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-1);
   }
   .treemap-chart [data-series="2"] {
     --treemap-chart-color: var(--md-comp-treemap-chart-color-2);
+    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-2);
   }
   .treemap-chart [data-series="3"] {
     --treemap-chart-color: var(--md-comp-treemap-chart-color-3);
+    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-3);
   }
   .treemap-chart [data-series="4"] {
     --treemap-chart-color: var(--md-comp-treemap-chart-color-4);
+    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-4);
+  }
+  .treemap-chart [data-series="5"] {
+    --treemap-chart-color: var(--md-comp-treemap-chart-color-5);
+    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-5);
+  }
+  .treemap-chart [data-series="6"] {
+    --treemap-chart-color: var(--md-comp-treemap-chart-color-6);
+    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-6);
   }
   .treemap-chart-plot {
     position: relative;
     height: var(--md-comp-treemap-chart-height);
-    border-block-end: 1px solid var(--md-comp-treemap-chart-grid-color);
     border-radius: 2px;
-    background: linear-gradient(var(--md-comp-treemap-chart-grid-color) 1px, transparent 0) 0 0/100% 25%;
     touch-action: pan-y;
   }
   .treemap-chart-plot:focus-visible {
@@ -19715,18 +19651,11 @@
     --md-comp-treemap-chart-height: 48px;
     overflow: clip;
   }
-  .treemap-chart.sparkline .treemap-chart-plot {
-    border: 0;
-    background: none;
-  }
   .treemap-chart.sparkline .treemap-chart-labels,
   .treemap-chart.sparkline .treemap-chart-legend {
     display: none;
   }
   @media (forced-colors: active) {
-    .treemap-chart-plot {
-      background: none;
-    }
     .treemap-chart-tooltip {
       outline: 1px solid CanvasText;
     }
@@ -19737,42 +19666,6 @@
   }
   .treemap-chart {
     --md-comp-treemap-chart-gap: 4px;
-    --md-comp-treemap-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
-    --md-comp-treemap-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
-    --md-comp-treemap-chart-on-color-1: var(--md-sys-color-on-primary);
-    --md-comp-treemap-chart-on-color-2: var(--md-sys-color-on-tertiary);
-    --md-comp-treemap-chart-on-color-3: var(--md-sys-color-on-secondary);
-    --md-comp-treemap-chart-on-color-4: var(--md-sys-color-surface);
-    --md-comp-treemap-chart-on-color-5: var(--md-sys-color-surface);
-    --md-comp-treemap-chart-on-color-6: var(--md-sys-color-surface);
-  }
-  .treemap-chart [data-series="1"] {
-    --treemap-chart-color: var(--md-comp-treemap-chart-color-1);
-    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-1);
-  }
-  .treemap-chart [data-series="2"] {
-    --treemap-chart-color: var(--md-comp-treemap-chart-color-2);
-    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-2);
-  }
-  .treemap-chart [data-series="3"] {
-    --treemap-chart-color: var(--md-comp-treemap-chart-color-3);
-    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-3);
-  }
-  .treemap-chart [data-series="4"] {
-    --treemap-chart-color: var(--md-comp-treemap-chart-color-4);
-    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-4);
-  }
-  .treemap-chart [data-series="5"] {
-    --treemap-chart-color: var(--md-comp-treemap-chart-color-5);
-    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-5);
-  }
-  .treemap-chart [data-series="6"] {
-    --treemap-chart-color: var(--md-comp-treemap-chart-color-6);
-    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-6);
-  }
-  .treemap-chart-plot {
-    border: 0;
-    background: none;
   }
   .treemap-chart-boxes {
     position: absolute;
@@ -19801,9 +19694,9 @@
   .treemap-chart-box > span {
     position: relative;
     overflow: hidden;
-    margin-inline: calc(var(--treemap-chart-inset) + 8px);
     text-overflow: ellipsis;
     white-space: nowrap;
+    margin-inline: calc(var(--treemap-chart-inset) + 8px);
   }
   .treemap-chart-box > span:first-child {
     margin-block-start: calc(var(--treemap-chart-inset) + 8px);
@@ -19890,6 +19783,7 @@
   }
   @media (forced-colors: active) {
     .aura.aura::before {
+      animation: none;
       forced-color-adjust: none;
       background: Highlight;
       mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
@@ -23667,9 +23561,9 @@
   }
   .truncate {
     display: block;
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
   .pointer-events-none {
     pointer-events: none;