@expressivecss/expressive 0.9.1 → 0.10.1

package/dist/css/expressive.css

@@ -1732,13 +1732,7 @@
   :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).rounded {
     border-radius: 9999px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extend {
-    --md-comp-extended-fab-container-height: 56px;
-    --md-comp-extended-fab-container-shape: 16px;
-    --md-comp-extended-fab-icon-size: 24px;
-    --md-comp-extended-fab-leading-space: 16px;
-    --md-comp-extended-fab-icon-label-space: 8px;
-    --md-comp-extended-fab-trailing-space: 20px;
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend {
     --md-comp-extended-fab-container-color: var(--md-sys-color-primary-container);
     --md-comp-extended-fab-label-text-color: var(
       --md-sys-color-on-primary-container
@@ -1747,29 +1741,28 @@
     height: var(--md-comp-extended-fab-container-height);
     padding-inline: var(--md-comp-extended-fab-leading-space) var(--md-comp-extended-fab-trailing-space);
     border-radius: var(--md-comp-extended-fab-container-shape);
-    font-size: var(--md-sys-typescale-label-large-font-size);
     color: var(--md-comp-extended-fab-label-text-color);
     background-color: var(--md-comp-extended-fab-container-color);
     box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extend:hover {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend:hover {
     box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
     background-color: color-mix(in oklab, var(--md-comp-extended-fab-label-text-color) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-comp-extended-fab-container-color));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extend:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extend:focus {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend:focus {
     background-color: color-mix(in oklab, var(--md-comp-extended-fab-label-text-color) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--md-comp-extended-fab-container-color));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extend:focus-visible {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extend > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
     font-size: var(--md-comp-extended-fab-icon-size);
     width: var(--md-comp-extended-fab-icon-size);
     height: var(--md-comp-extended-fab-icon-size);
     line-height: var(--md-comp-extended-fab-icon-size);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extend.small {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend.small {
     --md-comp-extended-fab-container-height: 56px;
     --md-comp-extended-fab-container-shape: 16px;
     --md-comp-extended-fab-icon-size: 24px;
@@ -1782,7 +1775,7 @@
     line-height: var(--md-sys-typescale-title-medium-line-height);
     letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extend.medium {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend.medium {
     --md-comp-extended-fab-container-height: 80px;
     --md-comp-extended-fab-container-shape: 20px;
     --md-comp-extended-fab-icon-size: 28px;
@@ -1795,7 +1788,7 @@
     line-height: var(--md-sys-typescale-title-large-line-height);
     letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extend.large {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend.large {
     --md-comp-extended-fab-container-height: 96px;
     --md-comp-extended-fab-container-shape: 28px;
     --md-comp-extended-fab-icon-size: 36px;
@@ -1808,7 +1801,7 @@
     line-height: var(--md-sys-typescale-headline-small-line-height);
     letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extend.primary-container {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend.primary-container {
     --md-comp-extended-fab-container-color: var(
       --md-sys-color-primary-container
     );
@@ -1816,7 +1809,7 @@
       --md-sys-color-on-primary-container
     );
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extend.secondary-container {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend.secondary-container {
     --md-comp-extended-fab-container-color: var(
       --md-sys-color-secondary-container
     );
@@ -1824,7 +1817,7 @@
       --md-sys-color-on-secondary-container
     );
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extend.tertiary-container {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend.tertiary-container {
     --md-comp-extended-fab-container-color: var(
       --md-sys-color-tertiary-container
     );
@@ -1878,12 +1871,6 @@
   :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-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, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra.circle.small,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).large.circle.small {
-    --md-comp-fab-container-height: 40px;
-    --md-comp-fab-container-width: 40px;
-    --md-comp-fab-container-shape: 12px;
-  }
   :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra.circle.medium,
   :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).large.circle.medium {
     --md-comp-fab-container-height: 80px;
@@ -1919,244 +1906,6 @@
     box-shadow: none;
     cursor: default;
   }
-  :is(.fab, .fixed-action-btn) {
-    --md-comp-fab-offset: 16px;
-    --md-comp-fab-z: 997;
-    --md-comp-fab-menu-gap: 16px;
-    --md-comp-fab-duration: 200ms;
-    --md-comp-fab-stagger: 40ms;
-    --md-comp-fab-easing: cubic-bezier(0.65, 0, 0.35, 1);
-    --md-comp-fab-travel: 64px;
-    --md-comp-fab-hidden-transform: scale(0)
-      translateY(calc(var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
-    position: fixed;
-    inset-inline-end: var(--md-comp-fab-offset);
-    bottom: var(--md-comp-fab-offset);
-    z-index: var(--md-comp-fab-z);
-    padding-top: var(--md-comp-fab-menu-gap);
-    margin: 0;
-    overflow: visible;
-  }
-  :is(.fab, .fixed-action-btn) > :is(a, button) {
-    position: relative;
-    z-index: 1;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu) {
-    --n: 1;
-    position: absolute;
-    inset-inline: 0;
-    bottom: 64px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--md-comp-fab-menu-gap);
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    visibility: hidden;
-    overflow: visible;
-    transition: visibility 0s calc(var(--md-comp-fab-duration) + var(--md-comp-fab-stagger) * (var(--n) - 1));
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu):has(> :nth-child(2)) {
-    --n: 2;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu):has(> :nth-child(3)) {
-    --n: 3;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu):has(> :nth-child(4)) {
-    --n: 4;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu):has(> :nth-child(5)) {
-    --n: 5;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu):has(> :nth-child(6)) {
-    --n: 6;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu):has(> :nth-child(7)) {
-    --n: 7;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu):has(> :nth-child(8)) {
-    --n: 8;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu) li:nth-last-child(1) {
-    --i: 0;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu) li:nth-last-child(2) {
-    --i: 1;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu) li:nth-last-child(3) {
-    --i: 2;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu) li:nth-last-child(4) {
-    --i: 3;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu) li:nth-last-child(5) {
-    --i: 4;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu) li:nth-last-child(6) {
-    --i: 5;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu) li:nth-last-child(7) {
-    --i: 6;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu) li:nth-last-child(8) {
-    --i: 7;
-  }
-  :is(.fab, .fixed-action-btn) :is(ul, menu) > li > :is(a, button) {
-    opacity: 0;
-    transform: var(--md-comp-fab-hidden-transform);
-    transition: opacity var(--md-comp-fab-duration) var(--md-comp-fab-easing), transform var(--md-comp-fab-duration) var(--md-comp-fab-easing), background-color 0.2s ease-out, box-shadow 0.2s ease-out;
-    transition-delay: calc(var(--md-comp-fab-stagger) * (var(--n) - 1 - var(--i, 0)));
-  }
-  :is(.fab, .fixed-action-btn).active :is(ul, menu) {
-    visibility: visible;
-    transition-delay: 0s;
-  }
-  :is(.fab, .fixed-action-btn).active :is(ul, menu) > li > :is(a, button) {
-    opacity: 1;
-    transform: none;
-    transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));
-  }
-  :is(.fab, .fixed-action-btn).direction-left :is(ul, menu) li:nth-child(1), :is(.fab, .fixed-action-btn).direction-right :is(ul, menu) li:nth-child(1), :is(.fab, .fixed-action-btn).direction-bottom :is(ul, menu) li:nth-child(1) {
-    --i: 0;
-  }
-  :is(.fab, .fixed-action-btn).direction-left :is(ul, menu) li:nth-child(2), :is(.fab, .fixed-action-btn).direction-right :is(ul, menu) li:nth-child(2), :is(.fab, .fixed-action-btn).direction-bottom :is(ul, menu) li:nth-child(2) {
-    --i: 1;
-  }
-  :is(.fab, .fixed-action-btn).direction-left :is(ul, menu) li:nth-child(3), :is(.fab, .fixed-action-btn).direction-right :is(ul, menu) li:nth-child(3), :is(.fab, .fixed-action-btn).direction-bottom :is(ul, menu) li:nth-child(3) {
-    --i: 2;
-  }
-  :is(.fab, .fixed-action-btn).direction-left :is(ul, menu) li:nth-child(4), :is(.fab, .fixed-action-btn).direction-right :is(ul, menu) li:nth-child(4), :is(.fab, .fixed-action-btn).direction-bottom :is(ul, menu) li:nth-child(4) {
-    --i: 3;
-  }
-  :is(.fab, .fixed-action-btn).direction-left :is(ul, menu) li:nth-child(5), :is(.fab, .fixed-action-btn).direction-right :is(ul, menu) li:nth-child(5), :is(.fab, .fixed-action-btn).direction-bottom :is(ul, menu) li:nth-child(5) {
-    --i: 4;
-  }
-  :is(.fab, .fixed-action-btn).direction-left :is(ul, menu) li:nth-child(6), :is(.fab, .fixed-action-btn).direction-right :is(ul, menu) li:nth-child(6), :is(.fab, .fixed-action-btn).direction-bottom :is(ul, menu) li:nth-child(6) {
-    --i: 5;
-  }
-  :is(.fab, .fixed-action-btn).direction-left :is(ul, menu) li:nth-child(7), :is(.fab, .fixed-action-btn).direction-right :is(ul, menu) li:nth-child(7), :is(.fab, .fixed-action-btn).direction-bottom :is(ul, menu) li:nth-child(7) {
-    --i: 6;
-  }
-  :is(.fab, .fixed-action-btn).direction-left :is(ul, menu) li:nth-child(8), :is(.fab, .fixed-action-btn).direction-right :is(ul, menu) li:nth-child(8), :is(.fab, .fixed-action-btn).direction-bottom :is(ul, menu) li:nth-child(8) {
-    --i: 7;
-  }
-  :is(.fab, .fixed-action-btn).direction-left, :is(.fab, .fixed-action-btn).direction-right {
-    padding: 0;
-  }
-  :is(.fab, .fixed-action-btn).direction-left :is(ul, menu), :is(.fab, .fixed-action-btn).direction-right :is(ul, menu) {
-    inset: auto;
-    top: 50%;
-    translate: 0 -50%;
-    flex-direction: row;
-    width: max-content;
-    height: auto;
-  }
-  :is(.fab, .fixed-action-btn).direction-left {
-    --md-comp-fab-hidden-transform: scale(0)
-      translateX(calc(var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
-    padding-inline-start: var(--md-comp-fab-menu-gap);
-  }
-  :is(.fab, .fixed-action-btn).direction-left :is(ul, menu) {
-    inset-inline-end: 64px;
-    flex-direction: row-reverse;
-  }
-  :is(.fab, .fixed-action-btn).direction-right {
-    --md-comp-fab-hidden-transform: scale(0)
-      translateX(calc(-1 * var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
-    padding-inline-end: var(--md-comp-fab-menu-gap);
-  }
-  :is(.fab, .fixed-action-btn).direction-right :is(ul, menu) {
-    inset-inline-start: 64px;
-  }
-  :is(.fab, .fixed-action-btn).direction-bottom {
-    --md-comp-fab-hidden-transform: scale(0)
-      translateY(calc(-1 * var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
-    padding: 0 0 var(--md-comp-fab-menu-gap);
-  }
-  :is(.fab, .fixed-action-btn).direction-bottom :is(ul, menu) {
-    inset: auto;
-    top: 64px;
-    bottom: auto;
-    inset-inline: 0;
-  }
-  :is(.fab, .fixed-action-btn).toolbar {
-    padding: 0;
-    height: 56px;
-  }
-  :is(.fab, .fixed-action-btn).toolbar :is(ul, menu) > li > :is(a, button) {
-    opacity: 1;
-    transform: none;
-    transition: opacity var(--md-comp-fab-duration);
-  }
-  :is(.fab, .fixed-action-btn).toolbar.active {
-    inset-inline: 0;
-    bottom: 0;
-    width: 100%;
-    height: 56px;
-  }
-  :is(.fab, .fixed-action-btn).toolbar.active > :is(a, button) > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
-    opacity: 0;
-  }
-  :is(.fab, .fixed-action-btn).toolbar.active :is(ul, menu) {
-    visibility: visible;
-    position: static;
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    height: 100%;
-    gap: 0;
-  }
-  :is(.fab, .fixed-action-btn).toolbar :is(ul, menu) li {
-    flex: 1;
-    margin: 0;
-    height: 100%;
-  }
-  :is(.fab, .fixed-action-btn).toolbar :is(ul, menu) li :is(a, button) {
-    display: grid;
-    place-items: center;
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    box-shadow: none;
-    color: var(--md-sys-color-on-primary-container);
-  }
-  :is(.fab, .fixed-action-btn).toolbar :is(ul, menu) li :is(a, button):hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
-  }
-  :is(.fab, .fixed-action-btn).toolbar :is(ul, menu) li :is(a, button):focus-visible {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
-  }
-  :is(.fab, .fixed-action-btn).toolbar :is(ul, menu) li :is(a, button):active {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
-  }
-  :is(.fab, .fixed-action-btn) .fab-backdrop {
-    position: absolute;
-    inset: 0 auto auto 0;
-    z-index: -1;
-    width: 56px;
-    height: 56px;
-    border-radius: 16px;
-    background-color: var(--md-sys-color-primary-container);
-    transform: scale(0);
-  }
-  @media (hover: hover) {
-    :is(.fab, .fixed-action-btn):not(.click-to-toggle):hover :is(ul, menu) {
-      visibility: visible;
-      transition-delay: 0s;
-    }
-    :is(.fab, .fixed-action-btn):not(.click-to-toggle):hover :is(ul, menu) > li > :is(a, button) {
-      opacity: 1;
-      transform: none;
-      transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));
-    }
-  }
-  @media (prefers-reduced-motion: reduce) {
-    :is(.fab, .fixed-action-btn) {
-      --md-comp-fab-duration: 0s;
-      --md-comp-fab-stagger: 0s;
-    }
-  }
   .button-group {
     --md-comp-button-group-between-space: 12px;
     --md-comp-button-group-item-shape-round: 9999px;
@@ -2514,7 +2263,11 @@
     --md-comp-button-group-inner-corner-corner-size: 8px;
     --md-comp-button-group-pressed-inner-corner-corner-size: 4px;
     --md-comp-button-group-selected-inner-corner-corner-size: 50%;
-    width: 100%;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    width: max-content;
+    min-width: 100%;
   }
   .button-group.connected.xsmall {
     --md-comp-button-group-inner-corner-corner-size: 4px;
@@ -3198,7 +2951,6 @@
     transform: translate(-50%, -50%);
   }
   .list .badge,
-  :is(.sidenav, .navigation-drawer) .badge,
   menu .badge {
     position: static;
     transform: none;
@@ -3206,9 +2958,6 @@
   .list .badge {
     margin-inline-start: auto;
   }
-  :is(.sidenav, .navigation-drawer) summary .badge {
-    margin-inline-start: 14px;
-  }
   @property --md-comp-top-app-bar-scroll {
     syntax: "<number>";
     inherits: false;
@@ -3989,7 +3738,7 @@
       transition: none;
     }
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) {
+  .toolbar {
     --md-comp-toolbar-container-height: 64px;
     --md-comp-toolbar-between-space: 4px;
     --md-comp-toolbar-action-size: 48px;
@@ -4009,10 +3758,10 @@
     background-color: var(--md-comp-toolbar-container-color);
     color: var(--md-comp-toolbar-color);
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) + :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) {
+  .toolbar + .toolbar {
     margin-block-start: 16px;
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > :is(a, button):not(.extra, .icon-button) {
+  .toolbar > :is(a, button):not(.extra, .icon-button) {
     box-sizing: border-box;
     display: inline-flex;
     flex: 0 0 auto;
@@ -4038,77 +3787,77 @@
     line-height: var(--md-sys-typescale-label-large-line-height);
     letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > :is(a, button):not(.extra, .icon-button):focus-visible {
+  .toolbar > :is(a, button):not(.extra, .icon-button):focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > :is(a, button):not(.extra, .icon-button) > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
+  .toolbar > :is(a, button):not(.extra, .icon-button) > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
     flex: 0 0 auto;
     font-size: var(--md-comp-toolbar-icon-size);
     width: var(--md-comp-toolbar-icon-size);
     height: var(--md-comp-toolbar-icon-size);
     line-height: var(--md-comp-toolbar-icon-size);
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > :is(a, button):not(.extra, .icon-button):hover:not(.active, .filled) {
+  .toolbar > :is(a, button):not(.extra, .icon-button):hover:not(.active, .filled) {
     background-color: color-mix(in oklab, currentColor calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > :is(a, button):not(.extra, .icon-button):active:not(.active, .filled) {
+  .toolbar > :is(a, button):not(.extra, .icon-button):active:not(.active, .filled) {
     background-color: color-mix(in oklab, currentColor calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > :is(a, button):not(.extra, .icon-button).active {
+  .toolbar > :is(a, button):not(.extra, .icon-button).active {
     background-color: var(--md-comp-toolbar-selected-container-color);
     color: var(--md-comp-toolbar-selected-color);
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > :is(a, button):not(.extra, .icon-button):disabled {
+  .toolbar > :is(a, button):not(.extra, .icon-button):disabled {
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     background-color: transparent;
     box-shadow: none;
     cursor: default;
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > :is(a, button):not(.extra, .icon-button):is(.circle, :has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons)):not(:has(> span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)))) {
+  .toolbar > :is(a, button):not(.extra, .icon-button):is(.circle, :has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons)):not(:has(> span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)))) {
     width: var(--md-comp-toolbar-action-size);
     padding: 0;
     border-radius: 50%;
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > :is(a, button).filled:not(.extra, .icon-button) {
+  .toolbar > :is(a, button).filled:not(.extra, .icon-button) {
     background-color: var(--md-sys-color-primary);
     color: var(--md-sys-color-on-primary);
     border-radius: 16px;
     box-shadow: none;
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > :is(a, button).filled:not(.extra, .icon-button):hover {
+  .toolbar > :is(a, button).filled:not(.extra, .icon-button):hover {
     background-color: color-mix(in oklab, var(--md-sys-color-on-primary) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-primary));
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > :is(a, button).filled:not(.extra, .icon-button):active {
+  .toolbar > :is(a, button).filled:not(.extra, .icon-button):active {
     background-color: color-mix(in oklab, var(--md-sys-color-on-primary) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--md-sys-color-primary));
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > :is(a, button).filled:not(.extra):has(> span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
+  .toolbar > :is(a, button).filled:not(.extra):has(> span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     height: 40px;
     min-height: 40px;
     padding: 0 24px;
     border-radius: 20px;
     width: auto;
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > .field {
+  .toolbar > .field {
     flex: 1 1 auto;
     align-self: center;
     min-width: 0;
     margin: 0;
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) > .max {
+  .toolbar > .max {
     flex: 1 1 auto;
     align-self: stretch;
     min-width: 0;
     min-height: 0;
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)):is(.floating, :not(.docked, .max)) {
+  .toolbar:is(.floating, :not(.docked, .max)) {
     --md-comp-toolbar-container-shape: 32px;
     --md-comp-toolbar-leading-space: 8px;
     --md-comp-toolbar-trailing-space: 8px;
     --md-comp-toolbar-external-space: 16px;
     box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)):is(.docked, .max) {
+  .toolbar:is(.docked, .max) {
     --md-comp-toolbar-container-shape: 0;
     --md-comp-toolbar-leading-space: 16px;
     --md-comp-toolbar-trailing-space: 16px;
@@ -4119,19 +3868,19 @@
     gap: clamp(var(--md-comp-toolbar-min-spacing), 4vw, var(--md-comp-toolbar-max-spacing));
     box-shadow: none !important;
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)):is(.standard, :not(.vibrant, .filled)) {
+  .toolbar:is(.standard, :not(.vibrant, .filled)) {
     --md-comp-toolbar-container-color: var(--md-sys-color-surface-container);
     --md-comp-toolbar-color: var(--md-sys-color-on-surface-variant);
     --md-comp-toolbar-selected-container-color: var(--md-sys-color-secondary-container);
     --md-comp-toolbar-selected-color: var(--md-sys-color-on-secondary-container);
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)):is(.vibrant, .filled) {
+  .toolbar:is(.vibrant, .filled) {
     --md-comp-toolbar-container-color: var(--md-sys-color-primary-container);
     --md-comp-toolbar-color: var(--md-sys-color-on-primary-container);
     --md-comp-toolbar-selected-container-color: var(--md-sys-color-surface-container);
     --md-comp-toolbar-selected-color: var(--md-sys-color-on-surface);
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)):is(.floating, :not(.docked, .max)).vertical {
+  .toolbar:is(.floating, :not(.docked, .max)).vertical {
     --md-comp-toolbar-external-space: 24px;
     flex-direction: column;
     min-width: var(--md-comp-toolbar-container-height);
@@ -4139,7 +3888,7 @@
     padding-block: var(--md-comp-toolbar-leading-space) var(--md-comp-toolbar-trailing-space);
     padding-inline: 8px;
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)):is(.floating, :not(.docked, .max)).vertical > .max {
+  .toolbar:is(.floating, :not(.docked, .max)).vertical > .max {
     min-width: 0;
     min-height: 0;
     width: 100%;
@@ -4155,7 +3904,7 @@
   .toolbar-group.vertical {
     flex-direction: column;
   }
-  .toolbar-group > :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)) {
+  .toolbar-group > .toolbar {
     margin: 0;
   }
   .toolbar-group > .extra {
@@ -4173,32 +3922,32 @@
   .toolbar-group > .extra:active {
     background-color: color-mix(in oklab, var(--md-comp-toolbar-floating-fab-icon-color) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--md-comp-toolbar-floating-fab-container-color));
   }
-  .toolbar-group:has(> :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)):is(.vibrant, .filled)) > .extra {
+  .toolbar-group:has(> .toolbar:is(.vibrant, .filled)) > .extra {
     --md-comp-toolbar-floating-fab-container-color: var(--md-sys-color-tertiary-container);
     --md-comp-toolbar-floating-fab-icon-color: var(--md-sys-color-on-tertiary-container);
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)).fixed {
+  .toolbar.fixed {
     position: fixed;
     z-index: 996;
     inset: auto auto var(--md-comp-toolbar-external-space) 50%;
     transform: translateX(-50%);
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)).fixed.top {
+  .toolbar.fixed.top {
     inset: var(--md-comp-toolbar-external-space) auto auto 50%;
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)):is(.floating, :not(.docked, .max)).vertical.fixed {
+  .toolbar:is(.floating, :not(.docked, .max)).vertical.fixed {
     inset: 50% auto auto var(--md-comp-toolbar-external-space);
     transform: translateY(-50%);
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)):is(.floating, :not(.docked, .max)).vertical.fixed.right {
+  .toolbar:is(.floating, :not(.docked, .max)).vertical.fixed.right {
     inset: 50% var(--md-comp-toolbar-external-space) auto auto;
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)):is(.docked, .max).fixed {
+  .toolbar:is(.docked, .max).fixed {
     inset: auto 0 0 0;
     transform: none;
     padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
   }
-  :is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab)):is(.docked, .max).fixed.top {
+  .toolbar:is(.docked, .max).fixed.top {
     inset: 0 0 auto 0;
     transform: none;
     padding-bottom: 8px;
@@ -5196,8 +4945,9 @@
     line-height: var(--md-sys-typescale-body-small-line-height);
     letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
     text-align: center;
-    white-space: nowrap;
-    pointer-events: none;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    pointer-events: auto;
     z-index: 2000;
   }
   :not(body):has(> .tooltip) {
@@ -5305,6 +5055,20 @@
     background: none;
     box-shadow: none;
   }
+  .tooltip::before {
+    content: "";
+    position: absolute;
+    inset: calc(-1 * var(--md-comp-tooltip-anchor-gap));
+    z-index: -1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :not(body) > .tooltip {
+      transition: none;
+    }
+  }
+  .tooltip-content {
+    min-width: 0;
+  }
   [popover] {
     outline: none;
     padding: 0;
@@ -6008,7 +5772,7 @@
     transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease, border-radius 200ms ease;
   }
   @media (hover: hover) and (pointer: fine) {
-    menu[id] li:is(:hover, :focus-within) > menu {
+    menu[id] li:hover > menu {
       visibility: visible;
       opacity: 1;
       pointer-events: auto;
@@ -6076,6 +5840,7 @@
     background-color: var(--md-comp-basic-dialog-container-color);
     color: var(--md-sys-color-on-surface);
     outline: none;
+    overflow-wrap: anywhere;
     box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
   }
   dialog::backdrop {
@@ -6168,16 +5933,19 @@
     border: 0;
     background: none;
   }
+  dialog > :is(form, nav):last-child > :is(button, a.button):not(.icon-button, .circle, .extend) {
+    max-width: 100%;
+    height: auto;
+    min-height: var(--md-comp-filled-button-container-height, 40px);
+    white-space: normal;
+  }
   dialog:not(.bottom,
   .bottom-sheet,
   .side-sheet,
   .right,
   .right-sheet,
   .left,
-  .left-sheet,
-  .floating-sheet,
-  :is(.sidenav, .navigation-drawer),
-  :is(.sidenav-overlay, .navigation-drawer-overlay)) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button) {
+  .left-sheet) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button) {
     box-shadow: none !important;
     color: var(--md-sys-color-primary);
     background-color: transparent;
@@ -6189,10 +5957,7 @@
   .right,
   .right-sheet,
   .left,
-  .left-sheet,
-  .floating-sheet,
-  :is(.sidenav, .navigation-drawer),
-  :is(.sidenav-overlay, .navigation-drawer-overlay)) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button):hover {
+  .left-sheet) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button):hover {
     background-color: color-mix(in oklab, var(--md-sys-color-primary) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
   }
   dialog:not(.bottom,
@@ -6201,19 +5966,13 @@
   .right,
   .right-sheet,
   .left,
-  .left-sheet,
-  .floating-sheet,
-  :is(.sidenav, .navigation-drawer),
-  :is(.sidenav-overlay, .navigation-drawer-overlay)) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button):active, dialog:not(.bottom,
+  .left-sheet) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button):active, dialog:not(.bottom,
   .bottom-sheet,
   .side-sheet,
   .right,
   .right-sheet,
   .left,
-  .left-sheet,
-  .floating-sheet,
-  :is(.sidenav, .navigation-drawer),
-  :is(.sidenav-overlay, .navigation-drawer-overlay)) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button):focus {
+  .left-sheet) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button):focus {
     background-color: color-mix(in oklab, var(--md-sys-color-primary) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
   }
   dialog:not(.bottom,
@@ -6222,10 +5981,7 @@
   .right,
   .right-sheet,
   .left,
-  .left-sheet,
-  .floating-sheet,
-  :is(.sidenav, .navigation-drawer),
-  :is(.sidenav-overlay, .navigation-drawer-overlay)) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button):focus-visible {
+  .left-sheet) > :is(form, nav):last-child > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button):focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
@@ -6702,7 +6458,9 @@
     border-inline-start: 1px solid var(--md-sys-color-outline-variant);
   }
   dialog.side-sheet:modal, dialog.right:modal, dialog.right-sheet:modal, dialog.left:modal, dialog.left-sheet:modal {
-    border-radius: var(--md-comp-side-sheet-container-shape) 0 0 var(--md-comp-side-sheet-container-shape);
+    border-radius: 0;
+    border-start-start-radius: var(--md-comp-side-sheet-container-shape);
+    border-end-start-radius: var(--md-comp-side-sheet-container-shape);
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
   }
   dialog.side-sheet:not(:modal)::backdrop, dialog.right:not(:modal)::backdrop, dialog.right-sheet:not(:modal)::backdrop, dialog.left:not(:modal)::backdrop, dialog.left-sheet:not(:modal)::backdrop {
@@ -6718,7 +6476,10 @@
     border-inline-end: 1px solid var(--md-sys-color-outline-variant);
   }
   dialog.side-sheet.left:modal, dialog.side-sheet.left-sheet:modal, dialog.side-sheet.start:modal, dialog.right.left:modal, dialog.right.left-sheet:modal, dialog.right.start:modal, dialog.right-sheet.left:modal, dialog.right-sheet.left-sheet:modal, dialog.right-sheet.start:modal, dialog.left.left:modal, dialog.left.left-sheet:modal, dialog.left.start:modal, dialog.left-sheet.left:modal, dialog.left-sheet.left-sheet:modal, dialog.left-sheet.start:modal {
-    border-radius: 0 var(--md-comp-side-sheet-container-shape) var(--md-comp-side-sheet-container-shape) 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    border-start-end-radius: var(--md-comp-side-sheet-container-shape);
+    border-end-end-radius: var(--md-comp-side-sheet-container-shape);
   }
   dialog.side-sheet > header, dialog.right > header, dialog.right-sheet > header, dialog.left > header, dialog.left-sheet > header {
     display: flex;
@@ -6728,7 +6489,8 @@
     box-sizing: border-box;
     min-height: 64px;
     margin: 0;
-    padding: 8px 12px 8px 24px;
+    padding-block: 8px;
+    padding-inline: 24px 12px;
     background: none;
     box-shadow: none;
   }
@@ -6784,6 +6546,7 @@
     outline-offset: 2px;
   }
   dialog.side-sheet > :is(form, nav):last-child, dialog.right > :is(form, nav):last-child, dialog.right-sheet > :is(form, nav):last-child, dialog.left > :is(form, nav):last-child, dialog.left-sheet > :is(form, nav):last-child {
+    flex-wrap: wrap;
     justify-content: flex-start;
     gap: 8px;
     padding: 16px 24px;
@@ -6797,57 +6560,21 @@
     flex-direction: column;
   }
   @starting-style {
-    dialog.side-sheet[open],
-    dialog.right[open],
-    dialog.right-sheet[open] {
+    :is(dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet)[open] {
       translate: 100% 0;
     }
-    dialog.left[open],
-    dialog.left-sheet[open] {
+    :is(dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet)[open]:dir(rtl) {
       translate: -100% 0;
     }
-  }
-  @media (prefers-reduced-motion: reduce) {
-    dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet {
-      transition: none;
+    :is(dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet)[open]:is(.start, .left, .left-sheet) {
+      translate: -100% 0;
     }
-  }
-  dialog.floating-sheet {
-    --md-comp-floating-sheet-container-color: var(--md-sys-color-surface-container-low);
-    --md-comp-floating-sheet-container-shape: 28px;
-    --md-comp-floating-sheet-container-max-width: 400px;
-    --md-comp-floating-sheet-inset: 24px;
-    --md-comp-basic-dialog-container-color: var(--md-comp-floating-sheet-container-color);
-    --md-comp-basic-dialog-container-shape: var(--md-comp-floating-sheet-container-shape);
-    box-sizing: border-box;
-    position: fixed;
-    inset: var(--md-comp-floating-sheet-inset);
-    width: min(var(--md-comp-floating-sheet-container-max-width), 100% - 2 * var(--md-comp-floating-sheet-inset));
-    min-width: 0;
-    max-width: var(--md-comp-floating-sheet-container-max-width);
-    height: fit-content;
-    max-height: calc(100% - 2 * var(--md-comp-floating-sheet-inset));
-    margin: auto;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-    opacity: 1;
-    scale: 1;
-    transition: opacity 200ms ease, scale 200ms ease;
-  }
-  dialog.floating-sheet:not(:modal) {
-    z-index: 1100;
-  }
-  dialog.floating-sheet:not(:modal)::backdrop {
-    background: none;
-    backdrop-filter: none;
-  }
-  @starting-style {
-    dialog.floating-sheet[open] {
-      opacity: 0;
-      scale: 0.9;
+    :is(dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet)[open]:is(.start, .left, .left-sheet):dir(rtl) {
+      translate: 100% 0;
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    dialog.floating-sheet {
+    dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet {
       transition: none;
     }
   }
@@ -6858,13 +6585,18 @@
     color: var(--md-sys-color-on-surface-variant);
     background-color: var(--md-sys-color-surface-container-low);
     display: inline-flex;
-    white-space: nowrap;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    max-width: 100%;
+    min-width: 0;
     gap: 8px;
     margin: 0;
-    height: 32px;
+    min-height: 32px;
+    height: auto;
     padding-left: var(--padding);
     padding-right: var(--padding);
     font-size: var(--font-size);
+    line-height: 1.5;
     font-weight: 500;
     border-radius: 8px;
     align-items: center;
@@ -6915,6 +6647,7 @@
     border-style: solid;
   }
   .chip > img {
+    flex-shrink: 0;
     margin: 0;
     width: 24px;
     height: 24px;
@@ -6926,6 +6659,7 @@
     color: var(--md-sys-color-on-surface-variant);
   }
   .chip .close {
+    flex-shrink: 0;
     border-radius: 50%;
     height: 24px;
     width: 24px;
@@ -6944,6 +6678,13 @@
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
+  .chip > button:not(.close) {
+    min-width: 0;
+    height: auto;
+    font: inherit;
+    white-space: inherit;
+    overflow-wrap: inherit;
+  }
   .chip .close:hover {
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
   }
@@ -7236,18 +6977,18 @@
     border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 4%, transparent);
   }
-  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]) + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix),
+  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]) + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip),
   .field textarea:focus:not([readonly]) + label,
-  .field textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix) {
+  .field textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip) {
     color: var(--input-color);
   }
-  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]) + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):not([placeholder=" "]) + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):not(:placeholder-shown) + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix), .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix), .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix),
+  .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]) + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):not([placeholder=" "]) + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):not(:placeholder-shown) + label, .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):focus:not([readonly]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip), .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip), .field input:not([type=range], [type=checkbox], [type=radio], [type=file]):not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip),
   .field textarea:focus:not([readonly]) + label,
   .field textarea:not([placeholder=" "]) + label,
   .field textarea:not(:placeholder-shown) + label,
-  .field textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix),
-  .field textarea:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix),
-  .field textarea:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix) {
+  .field textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip),
+  .field textarea:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip),
+  .field textarea:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip) {
     transform: scale(0.75);
     top: 8px;
   }
@@ -7287,7 +7028,7 @@
     user-select: none;
   }
   .field > label:not(.button, .icon-button),
-  .field > span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix) {
+  .field > span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip) {
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
     position: absolute;
@@ -7356,7 +7097,7 @@
     padding-left: 52px;
   }
   .field:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix, > .prefix) > :is(label,
-  span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix)) {
+  span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip)) {
     left: 52px;
   }
   .field:has(> i.suffix, > i:last-of-type:not(:first-of-type), > i:last-child:not(:first-child):not(.prefix), > .suffix) > :is(input, textarea) {
@@ -7377,13 +7118,13 @@
     padding-top: 7px;
     padding-bottom: 7px;
   }
-  .field.outlined > input:focus:not([readonly]) + label, .field.outlined > input:not([placeholder=" "]) + label, .field.outlined > input:not(:placeholder-shown) + label, .field.outlined > input:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix), .field.outlined > input:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix), .field.outlined > input:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix),
+  .field.outlined > input:focus:not([readonly]) + label, .field.outlined > input:not([placeholder=" "]) + label, .field.outlined > input:not(:placeholder-shown) + label, .field.outlined > input:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip), .field.outlined > input:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip), .field.outlined > input:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip),
   .field.outlined > textarea:focus:not([readonly]) + label,
   .field.outlined > textarea:not([placeholder=" "]) + label,
   .field.outlined > textarea:not(:placeholder-shown) + label,
-  .field.outlined > textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix),
-  .field.outlined > textarea:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix),
-  .field.outlined > textarea:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix) {
+  .field.outlined > textarea:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip),
+  .field.outlined > textarea:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip),
+  .field.outlined > textarea:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip) {
     top: -8px;
     left: 16px;
     margin-left: -4px;
@@ -7419,6 +7160,16 @@
     min-height: 56px;
     box-sizing: border-box;
   }
+  .autocomplete-status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
   .autocomplete-content li .highlight {
     color: var(--md-sys-color-on-surface);
   }
@@ -8125,6 +7876,7 @@
     font-weight: var(--md-sys-typescale-body-small-font-weight);
     line-height: var(--md-sys-typescale-body-small-line-height);
     letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
+    line-height: normal;
   }
   .field:has(> .hide-select):has(> label):not(.outlined):has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix, > .prefix) > label {
     padding-left: 52px;
@@ -8310,6 +8062,10 @@
     --md-comp-slider-stop-inset: 28px;
     --md-comp-slider-icon-size: 32px;
   }
+  :is(.slider, .range, .range-field, label:has(> [type=range])):dir(rtl),
+  input[type=range]:dir(rtl) {
+    --md-comp-slider-gradient: to left;
+  }
   :is(.slider, .range, .range-field, label:has(> [type=range])).vertical {
     --md-comp-slider-gradient: to top;
     --md-comp-slider-stop-at-start: 50% var(--md-comp-slider-stop-inset);
@@ -8378,7 +8134,7 @@
     border: none;
     border-radius: calc(var(--md-comp-slider-track-height) / 2);
     background-color: transparent;
-    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
+    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
   }
   input[type=range]::-webkit-slider-thumb {
     appearance: none;
@@ -8404,7 +8160,7 @@
     width: var(--md-comp-slider-handle-width-pressed);
   }
   :is(.slider, .range, .range-field, label:has(> [type=range])).centered [type=range]::-webkit-slider-runnable-track {
-    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start), var(--md-comp-slider-stop-color) 99%, transparent), radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-inactive-track-color) max(0%, min(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, min(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, min(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) min(100%, min(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) max(0%, max(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, max(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, max(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, max(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
+    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start), var(--md-comp-slider-stop-color) 99%, transparent), radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-inactive-track-color) max(0%, min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) min(100%, min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) max(0%, max(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, max(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, max(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, max(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
   }
   :is(.slider, .range, .range-field, label:has(> [type=range])).vertical > [type=range]::-webkit-slider-runnable-track {
     width: var(--md-comp-slider-track-height);
@@ -8429,7 +8185,7 @@
     border: none;
     border-radius: calc(var(--md-comp-slider-track-height) / 2);
     background-color: transparent;
-    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
+    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
   }
   input[type=range]::-moz-range-thumb {
     appearance: none;
@@ -8454,7 +8210,7 @@
     width: var(--md-comp-slider-handle-width-pressed);
   }
   :is(.slider, .range, .range-field, label:has(> [type=range])).centered [type=range]::-moz-range-track {
-    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start), var(--md-comp-slider-stop-color) 99%, transparent), radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-inactive-track-color) max(0%, min(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, min(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, min(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) min(100%, min(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) max(0%, max(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, max(50%, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, max(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, max(50%, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
+    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start), var(--md-comp-slider-stop-color) 99%, transparent), radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-inactive-track-color) max(0%, min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) min(100%, min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) max(0%, max(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, max(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, max(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, max(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
   }
   :is(.slider, .range, .range-field, label:has(> [type=range])).vertical > [type=range]::-moz-range-track {
     width: var(--md-comp-slider-track-height);
@@ -8472,6 +8228,7 @@
     height: var(--md-comp-slider-handle-width-pressed);
   }
   :is(.slider, .range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) {
+    --slider-split: calc((var(--md-comp-slider-start-fraction) + var(--md-comp-slider-end-fraction)) / 2);
     display: grid;
     align-items: center;
     min-height: var(--md-comp-slider-handle-height);
@@ -8482,14 +8239,24 @@
     height: var(--md-comp-slider-track-height);
     border-radius: calc(var(--md-comp-slider-track-height) / 2);
     pointer-events: none;
-    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start), var(--md-comp-slider-stop-color) 99%, transparent), radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-inactive-track-color) max(0%, var(--md-comp-slider-start-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-start-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-start-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) min(100%, var(--md-comp-slider-start-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-end-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-end-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-end-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-end-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
+    background-image: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start), var(--md-comp-slider-stop-color) 99%, transparent), radial-gradient(circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end), var(--md-comp-slider-stop-color) 99%, transparent), linear-gradient(var(--md-comp-slider-gradient), var(--md-comp-slider-inactive-track-color) max(0%, var(--md-comp-slider-start-position, var(--md-comp-slider-start-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-start-position, var(--md-comp-slider-start-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-start-position, var(--md-comp-slider-start-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) min(100%, var(--md-comp-slider-start-position, var(--md-comp-slider-start-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-active-track-color) max(0%, var(--md-comp-slider-end-position, var(--md-comp-slider-end-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent max(0%, var(--md-comp-slider-end-position, var(--md-comp-slider-end-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2), transparent min(100%, var(--md-comp-slider-end-position, var(--md-comp-slider-end-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2), var(--md-comp-slider-inactive-track-color) min(100%, var(--md-comp-slider-end-position, var(--md-comp-slider-end-fraction)) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
+  }
+  :is(.slider, .range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range]:first-of-type {
+    clip-path: inset(-24px calc(100% - var(--slider-split)) -24px -8px);
+  }
+  :is(.slider, .range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]):dir(rtl) > [type=range] {
+    clip-path: inset(-24px var(--slider-split) -24px -8px);
+  }
+  :is(.slider, .range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]):dir(rtl) > [type=range]:first-of-type {
+    clip-path: inset(-24px -8px -24px calc(100% - var(--slider-split)));
   }
   :is(.slider, .range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range] {
     grid-area: 1/1;
     width: 100%;
     margin: 0;
     background: none;
-    pointer-events: none;
+    pointer-events: auto;
+    clip-path: inset(-24px -8px -24px var(--slider-split));
   }
   :is(.slider, .range, .range-field, label:has(> [type=range])):has(> [type=range] ~ [type=range]) > [type=range]::-webkit-slider-runnable-track {
     background-image: none;
@@ -8512,16 +8279,26 @@
   }
   :is(.slider, .range, .range-field, label:has(> [type=range])).vertical:has(> [type=range] ~ [type=range])::before {
     width: var(--md-comp-slider-track-height);
-    height: 200px;
+    height: 100%;
     justify-self: center;
   }
+  :is(.slider, .range, .range-field, label:has(> [type=range])).vertical:has(> [type=range] ~ [type=range]) {
+    width: var(--md-comp-slider-handle-height);
+  }
+  :is(.slider, .range, .range-field, label:has(> [type=range])).vertical:has(> [type=range] ~ [type=range]) > [type=range] {
+    width: var(--md-comp-slider-handle-height);
+    clip-path: inset(-8px -24px var(--slider-split) -24px);
+  }
+  :is(.slider, .range, .range-field, label:has(> [type=range])).vertical:has(> [type=range] ~ [type=range]) > [type=range]:first-of-type {
+    clip-path: inset(calc(100% - var(--slider-split)) -24px -8px -24px);
+  }
   :is(.slider, .range, .range-field, label:has(> [type=range])).stops::after {
     content: "";
     position: absolute;
     z-index: 1;
     left: 0;
     top: 50%;
-    width: max(0px, var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2);
+    width: max(0px, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2);
     height: var(--md-comp-slider-track-height);
     translate: 0 -50%;
     pointer-events: none;
@@ -8531,8 +8308,8 @@
     background-position: center;
   }
   :is(.slider, .range, .range-field, label:has(> [type=range])).stops.centered::after {
-    left: min(50%, var(--md-comp-slider-active-fraction));
-    width: max(0%, abs(50% - var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2);
+    left: min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)));
+    width: max(0%, abs(50% - var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2);
   }
   input[type=range] + .thumb {
     position: absolute;
@@ -8577,6 +8354,26 @@
   :is(.slider, .range, .range-field, label:has(> [type=range])).vertical > [type=range] + .thumb.active {
     transform: translate(calc(100% + 4px), -50%) scale(1);
   }
+  @media (forced-colors: active) {
+    :is(.slider, .range, .range-field, label:has(> [type=range])), input[type=range] {
+      --md-comp-slider-active-track-color: Highlight;
+      --md-comp-slider-inactive-track-color: GrayText;
+      --md-comp-slider-handle-color: CanvasText;
+      --md-comp-slider-stop-color: CanvasText;
+    }
+    input[type=range],
+    :is(.slider, .range, .range-field, label:has(> [type=range]))::before {
+      forced-color-adjust: none;
+    }
+    input[type=range]:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 4px;
+    }
+    input[type=range]:disabled {
+      --md-comp-slider-handle-color: GrayText;
+      opacity: 1;
+    }
+  }
   fieldset {
     --md-comp-fieldset-container-color: transparent;
     --md-comp-fieldset-container-shape: 4px;
@@ -8733,346 +8530,22 @@
       scroll-behavior: smooth;
     }
   }
-  :root, :host {
-    --md-comp-nav-drawer-width: 300px;
-  }
-  dialog:is(.sidenav-overlay, .navigation-drawer-overlay),
-  dialog:is(.sidenav, .navigation-drawer) {
-    --md-comp-nav-drawer-item-height: 48px;
-    --md-comp-nav-drawer-duration: 250ms;
-    --md-comp-nav-drawer-easing: ease;
-    --md-comp-nav-drawer-shift: 0px;
-    --md-comp-nav-drawer-open: 1;
-    --md-comp-nav-drawer-font-size: 14px;
-    --md-comp-nav-drawer-padding: 16px;
-    --md-comp-nav-drawer-line-height: var(--md-comp-nav-drawer-item-height);
-    --md-comp-nav-drawer-user-view-shape: 16px;
-    --md-comp-nav-drawer-user-view-ink-color: var(--md-ref-palette-neutral100);
-    --md-comp-nav-drawer-user-view-scrim: linear-gradient(
-      to bottom,
-      color-mix(in oklab, var(--md-sys-color-scrim) 15%, transparent) 0%,
-      color-mix(in oklab, var(--md-sys-color-scrim) 50%, transparent) 55%,
-      color-mix(in oklab, var(--md-sys-color-scrim) 80%, transparent) 100%
-    );
+  .progress,
+  .preloader {
+    --md-comp-progress-track: var(--md-sys-color-secondary-container);
+    --md-comp-progress-indicator: var(--md-sys-color-primary);
+    --md-comp-progress-thickness: 4px;
+    --md-comp-progress-shape: 4px;
+    --md-comp-progress-circular-size: 48px;
+    --md-comp-progress-circular-thickness: 4px;
+  }
+  .progress {
     box-sizing: border-box;
-    width: var(--md-comp-nav-drawer-width);
-    min-width: 0;
-    max-width: none;
-    max-height: none;
-    height: 100dvh;
-    margin: 0;
-    padding: 0;
-    border: none;
-    border-radius: 0;
-    inset: 0 auto 0 0;
-    overflow: hidden;
-    color: var(--md-sys-color-on-surface);
-    background-color: var(--md-sys-color-surface-container-low);
-    outline: none;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-    transform: translateX(calc(-100% + var(--md-comp-nav-drawer-shift)));
-    transition: transform var(--md-comp-nav-drawer-duration) var(--md-comp-nav-drawer-easing), display var(--md-comp-nav-drawer-duration) allow-discrete, overlay var(--md-comp-nav-drawer-duration) allow-discrete;
-  }
-  dialog:is(.sidenav-overlay, .navigation-drawer-overlay):modal,
-  dialog:is(.sidenav, .navigation-drawer):modal {
-    display: flex;
-    flex-direction: column;
-    transform: translateX(var(--md-comp-nav-drawer-shift));
-  }
-  dialog:is(.sidenav-overlay, .navigation-drawer-overlay).right-aligned,
-  dialog:is(.sidenav, .navigation-drawer).right-aligned {
-    inset: 0 0 0 auto;
-    transform: translateX(calc(100% - var(--md-comp-nav-drawer-shift)));
-  }
-  dialog:is(.sidenav-overlay, .navigation-drawer-overlay).right-aligned:modal,
-  dialog:is(.sidenav, .navigation-drawer).right-aligned:modal {
-    transform: translateX(calc(-1 * var(--md-comp-nav-drawer-shift)));
-  }
-  dialog:is(.sidenav-overlay, .navigation-drawer-overlay).dragging,
-  dialog:is(.sidenav, .navigation-drawer).dragging {
-    transition: none;
-  }
-  dialog:is(.sidenav-overlay, .navigation-drawer-overlay)::backdrop,
-  dialog:is(.sidenav, .navigation-drawer)::backdrop {
-    background-color: var(--md-comp-scrim-color);
-    opacity: var(--md-comp-nav-drawer-open, 1);
-    backdrop-filter: none;
-    transition: opacity var(--md-comp-nav-drawer-duration) var(--md-comp-nav-drawer-easing), display var(--md-comp-nav-drawer-duration) allow-discrete, overlay var(--md-comp-nav-drawer-duration) allow-discrete;
-  }
-  @starting-style {
-    :is(dialog:is(.sidenav-overlay, .navigation-drawer-overlay), dialog:is(.sidenav, .navigation-drawer)):modal {
-      transform: translateX(-100%);
-    }
-    :is(dialog:is(.sidenav-overlay, .navigation-drawer-overlay), dialog:is(.sidenav, .navigation-drawer)).right-aligned:modal {
-      transform: translateX(100%);
-    }
-    :is(dialog:is(.sidenav-overlay, .navigation-drawer-overlay), dialog:is(.sidenav, .navigation-drawer)):modal::backdrop {
-      opacity: 0;
-    }
-  }
-  @media (prefers-reduced-motion: reduce) {
-    dialog:is(.sidenav-overlay, .navigation-drawer-overlay),
-    dialog:is(.sidenav, .navigation-drawer) {
-      transition: none;
-    }
-    dialog:is(.sidenav-overlay, .navigation-drawer-overlay)::backdrop,
-    dialog:is(.sidenav, .navigation-drawer)::backdrop {
-      transition: none;
-    }
-  }
-  @media (width >= 840px) {
-    dialog:is(.sidenav-overlay, .navigation-drawer-overlay):has(> :is(.sidenav-fixed, .navigation-drawer-fixed)):not(:modal) {
-      display: contents;
-    }
-  }
-  :is(.sidenav, .navigation-drawer) {
-    --md-comp-nav-drawer-item-height: 48px;
-    --md-comp-nav-drawer-font-size: 14px;
-    --md-comp-nav-drawer-padding: 16px;
-    --md-comp-nav-drawer-line-height: var(--md-comp-nav-drawer-item-height);
-    --md-comp-nav-drawer-user-view-shape: 16px;
-    --md-comp-nav-drawer-user-view-ink-color: var(--md-ref-palette-neutral100);
-    --md-comp-nav-drawer-user-view-scrim: linear-gradient(
-      to bottom,
-      color-mix(in oklab, var(--md-sys-color-scrim) 15%, transparent) 0%,
-      color-mix(in oklab, var(--md-sys-color-scrim) 50%, transparent) 55%,
-      color-mix(in oklab, var(--md-sys-color-scrim) 80%, transparent) 100%
-    );
-    box-sizing: border-box;
-    position: fixed;
-    width: var(--md-comp-nav-drawer-width);
-    inset: 0 auto 0 0;
-    margin: 0;
-    padding: 0;
-    height: 100dvh;
-    z-index: 999;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    user-select: none;
-    color: var(--md-sys-color-on-surface);
-    background-color: var(--md-sys-color-surface-container-low);
-    transform: translateX(-100%);
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-  }
-  :is(.sidenav, .navigation-drawer).right-aligned {
-    inset: 0 0 0 auto;
-    transform: translateX(100%);
-  }
-  :is(.sidenav, .navigation-drawer) li {
-    list-style: none;
-    display: grid;
-    align-content: center;
-  }
-  :is(.sidenav, .navigation-drawer) li.active > :is(a, button):not(.button, .icon-button, .circle, .extra) {
-    background-color: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-  :is(.sidenav, .navigation-drawer) li.active > :is(a, button):not(.button, .icon-button, .circle, .extra):hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-secondary-container));
-  }
-  :is(.sidenav, .navigation-drawer) li.active > :is(a, button):not(.button, .icon-button, .circle, .extra):active {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-secondary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--md-sys-color-secondary-container));
-  }
-  :is(.sidenav, .navigation-drawer) :is(li > :is(a, button, .subheader), summary) {
-    display: flex;
-    align-items: center;
-    margin: 0 12px;
-    padding: 0 var(--md-comp-nav-drawer-padding);
-    height: var(--md-comp-nav-drawer-item-height);
-    overflow: hidden;
-    border-radius: 100px;
-    font-size: var(--md-comp-nav-drawer-font-size);
-    font-weight: 500;
-  }
-  :is(.sidenav, .navigation-drawer) :is(li > :is(a, button, .subheader), summary) > :is(.material-symbols,
-  .material-symbols-outlined,
-  .material-symbols-rounded,
-  .material-symbols-sharp,
-  .material-icons) {
-    display: inline-flex;
-    flex-shrink: 0;
-    margin-right: 12px;
-  }
-  :is(.sidenav, .navigation-drawer) :is(li > :is(a, button):not(.button, .icon-button, .circle, .extra), summary) {
-    color: var(--md-sys-color-on-surface-variant);
-  }
-  :is(.sidenav, .navigation-drawer) :is(li > :is(a, button):not(.button, .icon-button, .circle, .extra), 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);
-  }
-  :is(.sidenav, .navigation-drawer) :is(li > :is(a, button):not(.button, .icon-button, .circle, .extra), summary):active {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
-  }
-  :is(.sidenav, .navigation-drawer) :is(li > :is(a, button):not(.button, .icon-button, .circle, .extra), summary):focus-visible {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: 2px;
-  }
-  :is(.sidenav, .navigation-drawer) li > :is(a, button):is(.button, .circle, .extra) {
-    margin: 10px 15px;
-  }
-  :is(.sidenav, .navigation-drawer) :is(summary, li > button:not(.button, .icon-button, .circle, .extra)) {
-    box-sizing: border-box;
-    justify-content: flex-start;
-    border: 0;
-    background: transparent;
-    font: inherit;
-    text-align: start;
-    list-style: none;
-    cursor: pointer;
-    appearance: none;
-  }
-  :is(.sidenav, .navigation-drawer) summary::-webkit-details-marker {
-    display: none;
-  }
-  :is(.sidenav, .navigation-drawer) summary::marker {
-    content: none;
-  }
-  :is(.sidenav, .navigation-drawer) summary::after {
-    content: "expand_more";
-    flex-shrink: 0;
-    margin-inline-start: auto;
-    font-family: var(--md-icon-font);
-    font-size: 24px;
-    font-style: normal;
-    font-variation-settings: "FILL" var(--md-icon-fill), "wght" var(--md-icon-weight), "GRAD" var(--md-icon-grade), "opsz" var(--md-icon-optical-size);
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    transition: transform var(--md-comp-nav-drawer-duration, 250ms) var(--md-comp-nav-drawer-easing, ease);
-  }
-  :is(.sidenav, .navigation-drawer) details {
-    margin: 0;
-  }
-  :is(.sidenav, .navigation-drawer) details[open] > summary::after {
-    transform: rotate(180deg);
-  }
-  :is(.sidenav, .navigation-drawer) details > ul {
-    margin: 0;
-    padding: 0;
-    padding-inline-start: 10px;
-    list-style: none;
-  }
-  :is(.sidenav, .navigation-drawer) .divider {
-    margin: calc(var(--md-comp-nav-drawer-padding) * 0.5) 0 0;
-  }
-  :is(.sidenav, .navigation-drawer) .subheader {
-    cursor: initial;
-    pointer-events: none;
-    color: var(--md-sys-color-on-surface-variant);
-    font-size: var(--md-comp-nav-drawer-font-size);
-    font-weight: 500;
-    line-height: var(--md-comp-nav-drawer-line-height);
-  }
-  :is(.sidenav, .navigation-drawer) .user-view {
-    position: relative;
-    padding: calc(var(--md-comp-nav-drawer-padding) * 2) calc(var(--md-comp-nav-drawer-padding) * 2) 0;
-    margin-bottom: calc(var(--md-comp-nav-drawer-padding) * 0.5);
-  }
-  :is(.sidenav, .navigation-drawer) .user-view > a {
-    height: auto;
-    padding: 0;
-  }
-  :is(.sidenav, .navigation-drawer) .user-view > a:is(:hover, :active) {
-    background-color: transparent;
-  }
-  :is(.sidenav, .navigation-drawer) .user-view .background {
-    overflow: hidden;
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    border-end-start-radius: var(--md-comp-nav-drawer-user-view-shape);
-    border-end-end-radius: var(--md-comp-nav-drawer-user-view-shape);
-  }
-  :is(.sidenav, .navigation-drawer) .user-view .background::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--md-comp-nav-drawer-user-view-scrim);
-  }
-  :is(.sidenav, .navigation-drawer) .user-view .circle,
-  :is(.sidenav, .navigation-drawer) .user-view .name,
-  :is(.sidenav, .navigation-drawer) .user-view .email {
-    display: block;
-  }
-  :is(.sidenav, .navigation-drawer) .user-view .circle {
-    height: 64px;
-    width: 64px;
-  }
-  :is(.sidenav, .navigation-drawer) .user-view .name,
-  :is(.sidenav, .navigation-drawer) .user-view .email {
-    font-size: var(--md-comp-nav-drawer-font-size);
-    line-height: calc(var(--md-comp-nav-drawer-line-height) * 0.5);
-  }
-  :is(.sidenav, .navigation-drawer) .user-view:has(> .background) .name,
-  :is(.sidenav, .navigation-drawer) .user-view:has(> .background) .email {
-    color: var(--md-comp-nav-drawer-user-view-ink-color);
-  }
-  :is(.sidenav, .navigation-drawer) .user-view .name {
-    margin-top: 16px;
-    font-weight: 500;
-  }
-  :is(.sidenav, .navigation-drawer) .user-view .email {
-    padding-bottom: 16px;
-    font-weight: 400;
-  }
-  dialog:is(.sidenav-overlay, .navigation-drawer-overlay):modal > :is(.sidenav, .navigation-drawer) {
-    position: static;
-    inset: auto;
-    width: 100%;
-    height: 100%;
-    transform: none;
-    box-shadow: none;
-    background-color: transparent;
-    z-index: auto;
-  }
-  :is(.sidenav, .navigation-drawer):is(.sidenav-fixed, .navigation-drawer-fixed) {
-    transform: none;
-  }
-  :is(.sidenav, .navigation-drawer):is(.sidenav-fixed, .navigation-drawer-fixed).right-aligned {
-    transform: none;
-  }
-  @media (width < 840px) {
-    :is(.sidenav, .navigation-drawer):is(.sidenav-fixed, .navigation-drawer-fixed) {
-      transform: translateX(-100%);
-    }
-    :is(.sidenav, .navigation-drawer):is(.sidenav-fixed, .navigation-drawer-fixed).right-aligned {
-      transform: translateX(100%);
-    }
-    :is(.sidenav, .navigation-drawer) .user-view {
-      padding: var(--md-comp-nav-drawer-padding) var(--md-comp-nav-drawer-padding) 0;
-    }
-  }
-  .drag-target {
-    position: fixed;
-    inset: 0 auto 0 0;
-    width: var(--md-comp-nav-drawer-drag-width, 10px);
-    height: 100%;
-    z-index: 998;
-    touch-action: pan-y;
-  }
-  .drag-target.right-aligned {
-    inset: 0 0 0 auto;
-  }
-  @media (width >= 840px) {
-    .drag-target[data-fixed] {
-      display: none;
-      pointer-events: none;
-    }
-  }
-  .progress,
-  .preloader {
-    --md-comp-progress-track: var(--md-sys-color-secondary-container);
-    --md-comp-progress-indicator: var(--md-sys-color-primary);
-    --md-comp-progress-thickness: 4px;
-    --md-comp-progress-shape: 4px;
-    --md-comp-progress-circular-size: 48px;
-    --md-comp-progress-circular-thickness: 4px;
-  }
-  .progress {
-    box-sizing: border-box;
-    position: relative;
-    display: block;
-    width: 100%;
-    height: var(--md-comp-progress-thickness);
-    margin: 0.5rem 0 1rem;
+    position: relative;
+    display: block;
+    width: 100%;
+    height: var(--md-comp-progress-thickness);
+    margin: 0.5rem 0 1rem;
     overflow: hidden;
     border: 0;
     border-radius: var(--md-comp-progress-shape);
@@ -9080,6 +8553,9 @@
     appearance: none;
     -webkit-appearance: none;
   }
+  .progress:not(.circular) {
+    writing-mode: horizontal-tb;
+  }
   progress.progress {
     vertical-align: baseline;
   }
@@ -9100,7 +8576,8 @@
   }
   .progress > .determinate {
     position: absolute;
-    inset: 0 auto 0 0;
+    inset-block: 0;
+    inset-inline: 0 auto;
     width: var(--md-comp-progress-value, 0%);
     background-color: var(--md-comp-progress-indicator);
     transition: width 0.3s linear;
@@ -9108,7 +8585,8 @@
   .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate))::after {
     content: "";
     position: absolute;
-    inset: 0 auto 0 0;
+    inset-block: 0;
+    inset-inline: 0 auto;
     width: var(--md-comp-progress-value, 0%);
     background-color: var(--md-comp-progress-indicator);
     transition: width 0.3s linear;
@@ -9126,7 +8604,8 @@
   progress.progress:indeterminate::after {
     content: "";
     position: absolute;
-    inset: 0 auto 0 0;
+    inset-block: 0;
+    inset-inline: 0 auto;
     background-color: var(--md-comp-progress-indicator);
   }
   .progress > .indeterminate::before,
@@ -9140,30 +8619,30 @@
   }
   @keyframes preloader-indeterminate {
     0% {
-      left: -35%;
-      right: 100%;
+      inset-inline-start: -35%;
+      inset-inline-end: 100%;
     }
     60% {
-      left: 100%;
-      right: -90%;
+      inset-inline-start: 100%;
+      inset-inline-end: -90%;
     }
     100% {
-      left: 100%;
-      right: -90%;
+      inset-inline-start: 100%;
+      inset-inline-end: -90%;
     }
   }
   @keyframes preloader-indeterminate-short {
     0% {
-      left: -200%;
-      right: 100%;
+      inset-inline-start: -200%;
+      inset-inline-end: 100%;
     }
     60% {
-      left: 107%;
-      right: -8%;
+      inset-inline-start: 107%;
+      inset-inline-end: -8%;
     }
     100% {
-      left: 107%;
-      right: -8%;
+      inset-inline-start: 107%;
+      inset-inline-end: -8%;
     }
   }
   :is(.preloader, .progress.circular) {
@@ -9193,13 +8672,64 @@
       transform: rotate(1turn);
     }
   }
-  @media (prefers-reduced-motion: reduce) {
-    .progress > .indeterminate,
-    progress.progress:indeterminate,
-    .progress:not(:is(progress)):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"]),
+  @media (forced-colors: active) {
+    .progress,
     .preloader {
+      forced-color-adjust: none;
+    }
+    .progress:not(.circular) {
+      background-color: Canvas;
+      outline: 1px solid CanvasText;
+      outline-offset: 1px;
+    }
+    .progress > .determinate,
+    .progress > .indeterminate::before,
+    .progress > .indeterminate::after,
+    .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate))::after,
+    progress.progress:indeterminate::before,
+    progress.progress:indeterminate::after {
+      background-color: CanvasText;
+    }
+    progress.progress::-webkit-progress-bar {
+      background-color: Canvas;
+    }
+    progress.progress::-webkit-progress-value {
+      background-color: CanvasText;
+    }
+    progress.progress::-moz-progress-bar {
+      background-color: CanvasText;
+    }
+    progress.progress:indeterminate::-webkit-progress-value {
+      background-color: transparent;
+    }
+    progress.progress:indeterminate::-moz-progress-bar {
+      background-color: CanvasText;
+      width: 40%;
+    }
+    :is(.preloader, .progress.circular) {
+      background: conic-gradient(CanvasText 0 90deg, transparent 90deg 360deg);
+    }
+    :is(.preloader, .progress.circular).determinate {
+      background: conic-gradient(CanvasText 0 var(--md-comp-progress-value, 0%), GrayText var(--md-comp-progress-value, 0%));
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .progress > .indeterminate::before,
+    .progress > .indeterminate::after,
+    .progress::after,
+    progress.progress:indeterminate::before,
+    progress.progress:indeterminate::after,
+    .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after,
+    :is(.preloader, .progress.circular) {
       animation: none;
     }
+    .progress > .indeterminate::before,
+    .progress > .indeterminate::after,
+    progress.progress:indeterminate::before,
+    progress.progress:indeterminate::after,
+    .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after {
+      width: 40%;
+    }
     .preloader {
       transform: none;
     }
@@ -10356,37 +9886,31 @@
     --md-comp-pane-list-width: 360px;
     --md-comp-pane-supporting-width: 360px;
     --md-comp-pane-primary-min-width: 360px;
+    --md-comp-pane-margin: 16px;
+    --_pane-columns: 1fr;
+    --_pane-expanded-columns: var(--md-comp-pane-list-width) 1fr;
+    --_pane-wide-columns: var(--_pane-expanded-columns);
+    --_pane-display: none;
+    --_pane-divider: 0px;
     box-sizing: border-box;
     display: grid;
-    width: 100%;
+    width: calc(100% - 2 * var(--md-comp-pane-margin));
     height: 100%;
     min-height: 0;
-    margin: 0;
+    margin: 0 var(--md-comp-pane-margin);
     padding: 0;
     container-type: inline-size;
     background-color: var(--md-comp-pane-container-color);
     color: var(--md-sys-color-on-surface);
-    grid-template-columns: 1fr;
+    grid-template-columns: var(--_pane-columns);
     gap: 0;
   }
-  @media (width < 600px) {
-    .panes,
-    .pane-layout,
-    .list-detail,
-    .supporting-pane-layout {
-      --md-comp-pane-margin: 16px;
-      width: calc(100% - 2 * var(--md-comp-pane-margin));
-      margin-inline: var(--md-comp-pane-margin);
-    }
-  }
-  @media (600px <= width < 840px) {
+  @media (width >= 600px) {
     .panes,
     .pane-layout,
     .list-detail,
     .supporting-pane-layout {
       --md-comp-pane-margin: 24px;
-      width: calc(100% - 2 * var(--md-comp-pane-margin));
-      margin-inline: var(--md-comp-pane-margin);
       gap: var(--md-comp-pane-gap);
     }
   }
@@ -10394,7 +9918,7 @@
   .pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
   .list-detail > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
   .supporting-pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
-    display: none;
+    display: var(--_pane-display);
     min-width: 0;
     min-height: 0;
     overflow: hidden;
@@ -10416,113 +9940,81 @@
     .pane-layout,
     .list-detail,
     .supporting-pane-layout {
-      grid-template-columns: var(--md-comp-pane-list-width) 1fr;
-      gap: 0;
-    }
-    .panes > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
-    .pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
-    .list-detail > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
-    .supporting-pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
-      display: flex !important;
+      --_pane-columns: var(--_pane-expanded-columns);
+      --_pane-display: flex;
+      --_pane-divider: 1px;
     }
   }
-  @container (min-width: 840px) {
+  @media (width >= 1200px) {
     .panes,
     .pane-layout,
     .list-detail,
     .supporting-pane-layout {
-      grid-template-columns: var(--md-comp-pane-list-width) 1fr;
-      gap: 0;
-    }
-    .panes > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
-    .pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
-    .list-detail > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane),
-    .supporting-pane-layout > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
-      display: flex !important;
+      --_pane-columns: var(--_pane-wide-columns);
     }
   }
-  @media (840px <= width < 1200px) {
+  @container (width < 600px) {
     .panes,
     .pane-layout,
     .list-detail,
     .supporting-pane-layout {
-      --md-comp-pane-margin: 24px;
-      width: calc(100% - 2 * var(--md-comp-pane-margin));
-      margin-inline: var(--md-comp-pane-margin);
-      gap: var(--md-comp-pane-gap);
+      --md-comp-pane-margin: 16px;
+      gap: 0;
     }
   }
-  @media (1200px <= width < 1600px) {
+  @container (width >= 600px) {
     .panes,
     .pane-layout,
     .list-detail,
     .supporting-pane-layout {
       --md-comp-pane-margin: 24px;
-      width: calc(100% - 2 * var(--md-comp-pane-margin));
-      margin-inline: var(--md-comp-pane-margin);
       gap: var(--md-comp-pane-gap);
     }
   }
-  @media (width >= 1600px) {
+  @container (width < 840px) {
     .panes,
     .pane-layout,
     .list-detail,
     .supporting-pane-layout {
-      --md-comp-pane-margin: 24px;
-      width: calc(100% - 2 * var(--md-comp-pane-margin));
-      margin-inline: var(--md-comp-pane-margin);
-      gap: var(--md-comp-pane-gap);
-    }
-  }
-  @media (width >= 840px) {
-    .supporting-pane-layout,
-    .panes.supporting {
-      grid-template-columns: 1fr var(--md-comp-pane-supporting-width);
+      --_pane-columns: 1fr;
+      --_pane-display: none;
+      --_pane-divider: 0px;
     }
   }
   @container (min-width: 840px) {
-    .supporting-pane-layout,
-    .panes.supporting {
-      grid-template-columns: 1fr var(--md-comp-pane-supporting-width);
-    }
-  }
-  @media (width >= 840px) {
-    .supporting-pane-layout.start, .supporting-pane-layout.left,
-    .panes.supporting.start,
-    .panes.supporting.left {
-      grid-template-columns: var(--md-comp-pane-supporting-width) 1fr;
+    .panes,
+    .pane-layout,
+    .list-detail,
+    .supporting-pane-layout {
+      --_pane-columns: var(--_pane-expanded-columns);
+      --_pane-display: flex;
+      --_pane-divider: 1px;
     }
   }
-  @container (min-width: 840px) {
-    .supporting-pane-layout.start, .supporting-pane-layout.left,
-    .panes.supporting.start,
-    .panes.supporting.left {
-      grid-template-columns: var(--md-comp-pane-supporting-width) 1fr;
+  @container (min-width: 1200px) {
+    .panes,
+    .pane-layout,
+    .list-detail,
+    .supporting-pane-layout {
+      --_pane-columns: var(--_pane-wide-columns);
     }
   }
-  @media (width >= 840px) {
-    .panes.equal,
-    .pane-layout.equal {
-      grid-template-columns: 1fr 1fr;
-    }
+  .supporting-pane-layout,
+  .panes.supporting {
+    --_pane-expanded-columns: 1fr var(--md-comp-pane-supporting-width);
   }
-  @container (min-width: 840px) {
-    .panes.equal,
-    .pane-layout.equal {
-      grid-template-columns: 1fr 1fr;
-    }
+  .supporting-pane-layout.start, .supporting-pane-layout.left,
+  .panes.supporting.start,
+  .panes.supporting.left {
+    --_pane-expanded-columns: var(--md-comp-pane-supporting-width) 1fr;
   }
-  @media (width >= 1200px) {
-    .panes.three-pane,
-    .pane-layout.three-pane {
-      grid-template-columns: var(--md-comp-pane-list-width) 1fr var(--md-comp-pane-supporting-width);
-    }
+  .panes.equal,
+  .pane-layout.equal {
+    --_pane-expanded-columns: 1fr 1fr;
   }
-  @container (min-width: 1200px) {
-    .panes.three-pane,
-    .pane-layout.three-pane {
-      grid-template-columns: var(--md-comp-pane-list-width) 1fr var(--md-comp-pane-supporting-width);
-    }
+  .panes.three-pane,
+  .pane-layout.three-pane {
+    --_pane-wide-columns: var(--md-comp-pane-list-width) 1fr var(--md-comp-pane-supporting-width);
   }
   .panes.separated,
   .panes.floating,
@@ -10556,15 +10048,8 @@
     background-color: var(--md-sys-color-surface);
     border: 1px solid var(--md-comp-pane-divider-color);
   }
-  @media (width >= 840px) {
-    :is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.separated, .floating) > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):not(:last-child) {
-      border-inline-end: 1px solid var(--md-comp-pane-divider-color);
-    }
-  }
-  @container (min-width: 840px) {
-    :is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.separated, .floating) > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):not(:last-child) {
-      border-inline-end: 1px solid var(--md-comp-pane-divider-color);
-    }
+  :is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.separated, .floating) > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):not(:last-child) {
+    border-inline-end: var(--_pane-divider) solid var(--md-comp-pane-divider-color);
   }
   .pane,
   .list-pane,
@@ -10677,20 +10162,45 @@
     overscroll-behavior: contain;
     margin: 0;
   }
+  .pane > footer:not(:has(> nav:only-child)),
   .pane > :is(footer, .pane-footer, nav:last-child),
+  .list-pane > footer:not(:has(> nav:only-child)),
   .list-pane > :is(footer, .pane-footer, nav:last-child),
+  .primary-pane > footer:not(:has(> nav:only-child)),
   .primary-pane > :is(footer, .pane-footer, nav:last-child),
+  .detail-pane > footer:not(:has(> nav:only-child)),
   .detail-pane > :is(footer, .pane-footer, nav:last-child),
+  .supporting-pane > footer:not(:has(> nav:only-child)),
   .supporting-pane > :is(footer, .pane-footer, nav:last-child) {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: 8px;
     flex: 0 0 auto;
     box-sizing: border-box;
     min-height: 56px;
+    margin: 0;
     padding: 8px 16px;
     border-block-start: 1px solid var(--md-comp-pane-divider-color);
   }
+  .pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button),
+  .list-pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .list-pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button),
+  .primary-pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .primary-pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button),
+  .detail-pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .detail-pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button),
+  .supporting-pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .supporting-pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button) {
+    min-width: 0;
+    max-width: 100%;
+    min-height: var(--md-comp-filled-button-container-height, 40px);
+    height: auto;
+    padding-block: 8px;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
   .fab-menu {
     --md-comp-fab-menu-close-button-container-height: 56px;
     --md-comp-fab-menu-close-button-container-width: 56px;
@@ -10739,6 +10249,8 @@
     margin: 0;
     padding: 0;
     list-style: none;
+    width: max-content;
+    max-inline-size: calc(100vw - 2 * var(--md-comp-fab-menu-offset));
     visibility: hidden;
     transition: visibility 0s var(--md-comp-fab-menu-duration);
   }
@@ -10760,17 +10272,23 @@
   .fab-menu :is(ul, menu) li:nth-last-child(6) {
     --i: 5;
   }
+  .fab-menu :is(ul, menu) > li {
+    max-inline-size: 100%;
+  }
   .fab-menu :is(ul, menu) > li > :is(a, button) {
     display: inline-flex;
     align-items: center;
     gap: var(--md-comp-fab-menu-menu-item-icon-label-space);
-    height: var(--md-comp-fab-menu-menu-item-container-height);
+    min-height: var(--md-comp-fab-menu-menu-item-container-height);
+    max-inline-size: 100%;
     padding-inline: var(--md-comp-fab-menu-menu-item-leading-space) var(--md-comp-fab-menu-menu-item-trailing-space);
     border: none;
     border-radius: 9999px;
     color: var(--md-comp-fab-menu-menu-item-label-text-color);
     background-color: var(--md-comp-fab-menu-menu-item-container-color);
-    white-space: nowrap;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    text-align: start;
     text-decoration: none;
     cursor: pointer;
     appearance: none;
@@ -11090,289 +10608,6 @@
     background: none;
     backdrop-filter: none;
   }
-  .segmented-button {
-    --md-comp-outlined-segmented-button-container-height: 40px;
-    --md-comp-outlined-segmented-button-container-shape: 9999px;
-    --md-comp-outlined-segmented-button-outline-width: 1px;
-    --md-comp-outlined-segmented-button-outline-color: var(--md-sys-color-outline);
-    --md-comp-outlined-segmented-button-leading-space: 12px;
-    --md-comp-outlined-segmented-button-trailing-space: 12px;
-    --md-comp-outlined-segmented-button-icon-size: 18px;
-    --md-comp-outlined-segmented-button-icon-label-space: 8px;
-    --md-comp-outlined-segmented-button-label-text-color: var(--md-sys-color-on-surface);
-    --md-comp-outlined-segmented-button-selected-container-color: var(--md-sys-color-secondary-container);
-    --md-comp-outlined-segmented-button-selected-label-text-color: var(--md-sys-color-on-secondary-container);
-    box-sizing: border-box;
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-    min-inline-size: 0;
-    margin: 0;
-    padding: 0;
-    background-color: transparent;
-    border: var(--md-comp-outlined-segmented-button-outline-width) solid var(--md-comp-outlined-segmented-button-outline-color);
-    border-radius: var(--md-comp-outlined-segmented-button-container-shape);
-    overflow: hidden;
-  }
-  .segmented-button + .segmented-button {
-    margin-block-start: 24px;
-  }
-  .segmented-button > legend {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-  .segmented-button > input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-    appearance: none;
-  }
-  .segmented-button > .segment {
-    --_label-color: var(--md-comp-outlined-segmented-button-label-text-color);
-    --_container-color: transparent;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--md-comp-outlined-segmented-button-icon-label-space);
-    margin: 0;
-    min-block-size: calc(var(--md-comp-outlined-segmented-button-container-height) - 2 * var(--md-comp-outlined-segmented-button-outline-width));
-    padding-inline: var(--md-comp-outlined-segmented-button-leading-space) var(--md-comp-outlined-segmented-button-trailing-space);
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    color: var(--_label-color);
-    background-color: var(--_container-color);
-    transition: background-color 0.2s ease, color 0.2s ease;
-    font-family: var(--md-sys-typescale-label-large-font-family-name);
-    font-size: var(--md-sys-typescale-label-large-font-size);
-    font-weight: var(--md-sys-typescale-label-large-font-weight);
-    line-height: var(--md-sys-typescale-label-large-line-height);
-    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
-  }
-  .segmented-button > .segment:not(:first-of-type) {
-    border-inline-start: var(--md-comp-outlined-segmented-button-outline-width) solid var(--md-comp-outlined-segmented-button-outline-color);
-  }
-  .segmented-button > input:checked + .segment {
-    --_label-color: var(--md-comp-outlined-segmented-button-selected-label-text-color);
-    --_container-color: var(--md-comp-outlined-segmented-button-selected-container-color);
-  }
-  .segmented-button > .segment > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
-    font-size: var(--md-comp-outlined-segmented-button-icon-size);
-    width: var(--md-comp-outlined-segmented-button-icon-size);
-    height: var(--md-comp-outlined-segmented-button-icon-size);
-    line-height: var(--md-comp-outlined-segmented-button-icon-size);
-    color: inherit;
-  }
-  .segmented-button > input:not(:disabled) + .segment:hover {
-    background-color: color-mix(in oklab, var(--_label-color) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--_container-color));
-  }
-  .segmented-button > input:not(:disabled) + .segment:active {
-    background-color: color-mix(in oklab, var(--_label-color) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--_container-color));
-  }
-  .segmented-button > input:focus-visible + .segment {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: 2px;
-    outline-offset: -3px;
-  }
-  .segmented-button > input:disabled + .segment {
-    --_label-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-    cursor: default;
-  }
-  .segmented-button:disabled {
-    --md-comp-outlined-segmented-button-outline-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-surface) 12%,
-      transparent
-    );
-    --md-comp-outlined-segmented-button-label-text-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-surface) 38%,
-      transparent
-    );
-  }
-  .segmented-button:disabled > .segment {
-    cursor: default;
-  }
-  .banner {
-    --md-comp-banners-color: var(--md-sys-color-surface-container);
-    --md-comp-banners-body-text-color: var(--md-sys-color-on-surface);
-    --md-comp-banners-title-text-color: var(--md-sys-color-on-surface);
-    --md-comp-banners-icon-color: var(--md-sys-color-on-surface);
-    --md-comp-banners-close-button-color: var(--md-sys-color-primary);
-    box-sizing: border-box;
-    color: var(--md-comp-banners-body-text-color);
-    background-color: var(--md-comp-banners-color);
-    font-family: var(--md-sys-typescale-body-medium-font-family-name);
-    font-size: var(--md-sys-typescale-body-medium-font-size);
-    font-weight: var(--md-sys-typescale-body-medium-font-weight);
-    line-height: var(--md-sys-typescale-body-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
-  }
-  .banner > .icon-button:not(:disabled, [disabled], [aria-disabled=true], .disabled) {
-    --md-comp-icon-button-color: var(--md-comp-banners-close-button-color);
-  }
-  .banner.vibrant {
-    --md-comp-banners-color: var(--md-sys-color-primary-container);
-    --md-comp-banners-body-text-color: var(--md-sys-color-on-primary-container);
-    --md-comp-banners-title-text-color: var(--md-sys-color-on-primary-container);
-    --md-comp-banners-icon-color: var(--md-sys-color-on-primary-container);
-  }
-  .banner:not(.rich) {
-    --md-comp-banners-basic-height: 56px;
-    --md-comp-banners-basic-shape: 28px;
-    --md-comp-banners-basic-leading-space: 4px;
-    --md-comp-banners-basic-trailing-space: 4px;
-    --md-comp-banners-basic-top-space: 4px;
-    --md-comp-banners-basic-bottom-space: 4px;
-    --md-comp-banners-basic-icon-container-size: 48px;
-    --md-comp-banners-basic-icon-size: 24px;
-    --md-comp-banners-basic-body-text-top-space: 14px;
-    --md-comp-banners-basic-body-text-bottom-space: 14px;
-    --md-comp-banners-basic-no-icon-body-text-leading-space: 16px;
-    --md-comp-banners-basic-actions-between-space: 8px;
-    --md-comp-banners-basic-actions-leading-space: 8px;
-    --md-comp-banners-basic-actions-trailing-space: 8px;
-    display: flex;
-    align-items: center;
-    min-block-size: var(--md-comp-banners-basic-height);
-    padding-block: var(--md-comp-banners-basic-top-space) var(--md-comp-banners-basic-bottom-space);
-    padding-inline: var(--md-comp-banners-basic-leading-space) var(--md-comp-banners-basic-trailing-space);
-    border-radius: var(--md-comp-banners-basic-shape);
-  }
-  .banner:not(.rich) > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--md-comp-banners-basic-icon-container-size);
-    block-size: var(--md-comp-banners-basic-icon-container-size);
-    font-size: var(--md-comp-banners-basic-icon-size);
-    line-height: var(--md-comp-banners-basic-icon-size);
-    color: var(--md-comp-banners-icon-color);
-  }
-  .banner:not(.rich) > p {
-    flex: 1 1 0;
-    min-inline-size: 0;
-    margin: 0;
-    padding-block: var(--md-comp-banners-basic-body-text-top-space) var(--md-comp-banners-basic-body-text-bottom-space);
-    color: inherit;
-  }
-  .banner:not(.rich) > p:first-child {
-    padding-inline-start: var(--md-comp-banners-basic-no-icon-body-text-leading-space);
-  }
-  .banner:not(.rich) > .icon-button {
-    flex: 0 0 auto;
-  }
-  .banner:not(.rich) > .actions {
-    display: flex;
-    flex: 0 0 auto;
-    align-items: center;
-    gap: var(--md-comp-banners-basic-actions-between-space);
-    padding-inline: var(--md-comp-banners-basic-actions-leading-space) var(--md-comp-banners-basic-actions-trailing-space);
-  }
-  @media (width < 600px) {
-    .banner:not(.rich) {
-      --md-comp-banners-basic-height: 112px;
-      --md-comp-banners-basic-top-space: 8px;
-      --md-comp-banners-basic-actions-trailing-space: 4px;
-      flex-wrap: wrap;
-    }
-    .banner:not(.rich) > .actions {
-      order: 1;
-      flex-basis: 100%;
-      justify-content: flex-end;
-    }
-    .banner:not(.rich):not(:has(> .actions)) {
-      --md-comp-banners-basic-height: 56px;
-    }
-  }
-  .banner:not(.rich).square {
-    --md-comp-banners-basic-shape: 0;
-    --md-comp-banners-basic-no-icon-body-text-leading-space: 12px;
-  }
-  .banner.rich {
-    --md-comp-banners-rich-shape: 28px;
-    --md-comp-banners-rich-leading-space: 12px;
-    --md-comp-banners-rich-trailing-space: 12px;
-    --md-comp-banners-rich-top-space: 12px;
-    --md-comp-banners-rich-bottom-space: 12px;
-    --md-comp-banners-rich-icon-size: 24px;
-    --md-comp-banners-rich-icon-text-space: 4px;
-    --md-comp-banners-rich-image-size: 80px;
-    --md-comp-banners-rich-image-text-space: 8px;
-    --md-comp-banners-rich-leading-element-leading-space: 4px;
-    --md-comp-banners-rich-with-image-leading-space: 20px;
-    --md-comp-banners-rich-title-text-top-space: 14px;
-    --md-comp-banners-rich-title-text-bottom-space: 14px;
-    --md-comp-banners-rich-actions-between-space: 8px;
-    --md-comp-banners-rich-actions-top-space: 12px;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    grid-template-areas: "lead title   close" "lead body    close" "lead actions actions";
-    padding-block: var(--md-comp-banners-rich-top-space) var(--md-comp-banners-rich-bottom-space);
-    padding-inline: var(--md-comp-banners-rich-leading-space) var(--md-comp-banners-rich-trailing-space);
-    border-radius: var(--md-comp-banners-rich-shape);
-  }
-  .banner.rich > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
-    grid-area: lead;
-    align-self: start;
-    margin-inline: var(--md-comp-banners-rich-leading-element-leading-space) var(--md-comp-banners-rich-icon-text-space);
-    font-size: var(--md-comp-banners-rich-icon-size);
-    inline-size: var(--md-comp-banners-rich-icon-size);
-    block-size: var(--md-comp-banners-rich-icon-size);
-    line-height: var(--md-comp-banners-rich-icon-size);
-    color: var(--md-comp-banners-icon-color);
-  }
-  .banner.rich > img {
-    grid-area: lead;
-    align-self: start;
-    margin-inline: calc(var(--md-comp-banners-rich-with-image-leading-space) - var(--md-comp-banners-rich-leading-space)) var(--md-comp-banners-rich-image-text-space);
-    inline-size: var(--md-comp-banners-rich-image-size);
-    block-size: var(--md-comp-banners-rich-image-size);
-    border-radius: 0;
-    object-fit: cover;
-  }
-  .banner.rich > :is(h1, h2, h3, h4, h5, h6) {
-    grid-area: title;
-    margin: 0;
-    padding-block: var(--md-comp-banners-rich-title-text-top-space) var(--md-comp-banners-rich-title-text-bottom-space);
-    color: var(--md-comp-banners-title-text-color);
-    font-family: var(--md-sys-typescale-body-medium-font-family-name);
-    font-size: var(--md-sys-typescale-body-medium-font-size);
-    font-weight: var(--md-sys-typescale-body-medium-font-weight);
-    line-height: var(--md-sys-typescale-body-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
-    font-weight: 500;
-  }
-  .banner.rich > p {
-    grid-area: body;
-    margin: 0;
-    color: inherit;
-  }
-  .banner.rich > .actions {
-    grid-area: actions;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--md-comp-banners-rich-actions-between-space);
-    margin-block-start: var(--md-comp-banners-rich-actions-top-space);
-  }
-  .banner.rich > .icon-button {
-    grid-area: close;
-    align-self: start;
-  }
   .drag-handle {
     --md-comp-drag-handle-container-width: 24px;
     --md-comp-drag-handle-width: 4px;
@@ -11433,98 +10668,6 @@
       transition: none;
     }
   }
-  .bottom-app-bar {
-    --md-comp-bottom-app-bar-container-color: var(--md-sys-color-surface-container);
-    --md-comp-bottom-app-bar-container-height: 80px;
-    --md-comp-bottom-app-bar-container-shape: 0;
-    --md-comp-bottom-app-bar-icon-color: var(--md-sys-color-on-surface-variant);
-    --md-comp-bottom-app-bar-icon-size: 24px;
-    --md-comp-bottom-app-bar-action-size: 48px;
-    --md-comp-bottom-app-bar-leading-space: 4px;
-    --md-comp-bottom-app-bar-trailing-space: 4px;
-    --md-comp-bottom-app-bar-fab-container-color: var(--md-sys-color-secondary-container);
-    --md-comp-bottom-app-bar-fab-trailing-space: 16px;
-    --md-comp-bottom-app-bar-z: 997;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: var(--md-comp-bottom-app-bar-container-height);
-    margin: 0;
-    padding-inline: var(--md-comp-bottom-app-bar-leading-space) var(--md-comp-bottom-app-bar-trailing-space);
-    border-radius: var(--md-comp-bottom-app-bar-container-shape);
-    background-color: var(--md-comp-bottom-app-bar-container-color);
-    color: var(--md-sys-color-on-surface);
-    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
-  }
-  .bottom-app-bar > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child) {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    width: var(--md-comp-bottom-app-bar-action-size);
-    height: var(--md-comp-bottom-app-bar-action-size);
-    margin: 0;
-    padding: 0;
-    border: 0;
-    border-radius: 50%;
-    background: transparent;
-    color: var(--md-comp-bottom-app-bar-icon-color);
-    cursor: pointer;
-    appearance: none;
-    font: inherit;
-    text-decoration: none;
-  }
-  .bottom-app-bar > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child):focus-visible {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: 2px;
-  }
-  .bottom-app-bar > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child) > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
-    display: block;
-    width: var(--md-comp-bottom-app-bar-icon-size);
-    height: var(--md-comp-bottom-app-bar-icon-size);
-    font-size: var(--md-comp-bottom-app-bar-icon-size);
-    line-height: var(--md-comp-bottom-app-bar-icon-size);
-  }
-  .bottom-app-bar > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child):hover {
-    background-color: color-mix(in oklab, currentColor calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
-  }
-  .bottom-app-bar > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child):active {
-    background-color: color-mix(in oklab, currentColor calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
-  }
-  .bottom-app-bar > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child):disabled, .bottom-app-bar > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child).disabled {
-    pointer-events: none;
-    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-    background: transparent;
-  }
-  .bottom-app-bar > :is(a, button).extra.circle,
-  .bottom-app-bar > :is(a, button).large.circle {
-    margin-inline-start: auto;
-    margin-inline-end: calc(var(--md-comp-bottom-app-bar-fab-trailing-space) - var(--md-comp-bottom-app-bar-trailing-space));
-    background-color: var(--md-comp-bottom-app-bar-fab-container-color);
-    color: var(--md-sys-color-on-secondary-container);
-    box-shadow: none;
-  }
-  .bottom-app-bar > :is(a, button).extra.circle:hover,
-  .bottom-app-bar > :is(a, button).large.circle:hover {
-    box-shadow: none;
-    background-color: color-mix(in oklab, var(--md-sys-color-on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-comp-bottom-app-bar-fab-container-color));
-  }
-  .bottom-app-bar > :is(a, button).extra.circle:focus,
-  .bottom-app-bar > :is(a, button).large.circle:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-secondary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--md-comp-bottom-app-bar-fab-container-color));
-  }
-  .bottom-app-bar > :is(a, button).extra.circle:active,
-  .bottom-app-bar > :is(a, button).large.circle:active {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-secondary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--md-comp-bottom-app-bar-fab-container-color));
-  }
-  .bottom-app-bar.fixed {
-    position: fixed;
-    inset: auto 0 0 0;
-    z-index: var(--md-comp-bottom-app-bar-z);
-    min-height: calc(var(--md-comp-bottom-app-bar-container-height) + env(safe-area-inset-bottom, 0px));
-    padding-bottom: env(safe-area-inset-bottom, 0px);
-  }
   :root,
   :host {
     --md-comp-scrim-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
@@ -12352,6 +11495,27 @@
     padding-top: auto !important;
     padding-bottom: auto !important;
   }
+  .gap-0 {
+    gap: 0 !important;
+  }
+  .gap-1 {
+    gap: 0.25rem !important;
+  }
+  .gap-2 {
+    gap: 0.5rem !important;
+  }
+  .gap-3 {
+    gap: 0.75rem !important;
+  }
+  .gap-4 {
+    gap: 1rem !important;
+  }
+  .gap-5 {
+    gap: 1.5rem !important;
+  }
+  .gap-6 {
+    gap: 3rem !important;
+  }
   .hide {
     display: none !important;
   }
@@ -12450,6 +11614,48 @@
     display: flex;
     align-items: center;
   }
+  .flex {
+    display: flex;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .flex-column {
+    flex-direction: column;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .justify-start {
+    justify-content: flex-start;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .align-start {
+    align-items: flex-start;
+  }
+  .align-center {
+    align-items: center;
+  }
+  .align-end {
+    align-items: flex-end;
+  }
+  .align-stretch {
+    align-items: stretch;
+  }
+  .flex-1 {
+    flex: 1 1 0;
+  }
+  .flex-none {
+    flex: none;
+  }
   .left-align {
     text-align: left;
   }