@expressivecss/expressive 0.8.0 → 0.9.0

package/dist/css/expressive.css

@@ -1,4 +1,53 @@
 @charset "UTF-8";
+@font-face {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: block;
+  src: url("../fonts/material-symbols-outlined.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Material Symbols Rounded";
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: block;
+  src: url("../fonts/material-symbols-rounded.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Material Symbols Sharp";
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: block;
+  src: url("../fonts/material-symbols-sharp.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/roboto-latin-400.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../fonts/roboto-latin-500.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/noto-sans-latin-400.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../fonts/noto-sans-latin-500.woff2") format("woff2");
+}
 @layer tokens, base, components, utilities;
 @layer tokens {
   :root, :host {
@@ -2110,7 +2159,16 @@
   }
   .button-group {
     --md-comp-button-group-between-space: 12px;
+    --md-comp-button-group-item-shape-round: 9999px;
+    --md-comp-button-group-item-shape-square: 12px;
+    --md-comp-button-group-pressed-item-shape: 8px;
     --md-comp-button-group-pressed-item-width-multiplier: .15;
+    --md-comp-button-group-motion: linear(
+      0, .056 5%, .1796 10%, .3252 15%, .4675 20%, .5936 25%,
+      .6988 30%, .7828 35%, .8475 40%, .8959 45%, .931 50%,
+      .9559 55%, .973 60%, .9845 65%, .9919 70%, .9965 75%,
+      .9992 80%, 1.0006 85%, 1.0013 90%, 1.0015 95%, 1.0015
+    );
     display: flex;
     align-items: center;
     gap: var(--md-comp-button-group-between-space);
@@ -2123,6 +2181,8 @@
     --md-comp-filled-button-icon-label-space: 8px;
     --md-comp-filled-button-outline-width: 1px;
     --md-comp-button-group-between-space: 18px;
+    --md-comp-button-group-item-shape-square: 12px;
+    --md-comp-button-group-pressed-item-shape: 8px;
   }
   .button-group.xsmall > :is(button:not(.icon-button), a.button):not(.xsmall, .small, .medium, .large, .xlarge) {
     font-family: var(--md-sys-typescale-label-large-font-family-name);
@@ -2131,6 +2191,31 @@
     line-height: var(--md-sys-typescale-label-large-line-height);
     letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
   }
+  .button-group.xsmall > .icon-button:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-container-height: 32px;
+    --md-comp-icon-button-icon-size: 20px;
+    --md-comp-icon-button-leading-space: 6px;
+    --md-comp-icon-button-trailing-space: 6px;
+    --md-comp-icon-button-narrow-space: 4px;
+    --md-comp-icon-button-wide-space: 10px;
+    --md-comp-icon-button-container-shape-square: 12px;
+    --md-comp-icon-button-pressed-container-shape: 8px;
+    --md-comp-icon-button-outline-width: 1px;
+  }
+  .button-group.xsmall > .icon-button.narrow:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-leading-space: 4px;
+    --md-comp-icon-button-trailing-space: 4px;
+  }
+  .button-group.xsmall > .icon-button.wide:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-leading-space: 10px;
+    --md-comp-icon-button-trailing-space: 10px;
+  }
+  .button-group > :is(button, a.button).xsmall {
+    --md-comp-button-group-item-shape-square: 12px;
+    --md-comp-button-group-pressed-item-shape: 8px;
+    --md-comp-button-group-inner-corner-corner-size: 4px;
+    --md-comp-button-group-pressed-inner-corner-corner-size: 4px;
+  }
   .button-group.small {
     --md-comp-filled-button-container-height: 40px;
     --md-comp-filled-button-icon-size: 20px;
@@ -2139,6 +2224,8 @@
     --md-comp-filled-button-icon-label-space: 8px;
     --md-comp-filled-button-outline-width: 1px;
     --md-comp-button-group-between-space: 12px;
+    --md-comp-button-group-item-shape-square: 12px;
+    --md-comp-button-group-pressed-item-shape: 8px;
   }
   .button-group.small > :is(button:not(.icon-button), a.button):not(.xsmall, .small, .medium, .large, .xlarge) {
     font-family: var(--md-sys-typescale-label-large-font-family-name);
@@ -2147,6 +2234,31 @@
     line-height: var(--md-sys-typescale-label-large-line-height);
     letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
   }
+  .button-group.small > .icon-button:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-container-height: 40px;
+    --md-comp-icon-button-icon-size: 24px;
+    --md-comp-icon-button-leading-space: 8px;
+    --md-comp-icon-button-trailing-space: 8px;
+    --md-comp-icon-button-narrow-space: 4px;
+    --md-comp-icon-button-wide-space: 14px;
+    --md-comp-icon-button-container-shape-square: 12px;
+    --md-comp-icon-button-pressed-container-shape: 8px;
+    --md-comp-icon-button-outline-width: 1px;
+  }
+  .button-group.small > .icon-button.narrow:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-leading-space: 4px;
+    --md-comp-icon-button-trailing-space: 4px;
+  }
+  .button-group.small > .icon-button.wide:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-leading-space: 14px;
+    --md-comp-icon-button-trailing-space: 14px;
+  }
+  .button-group > :is(button, a.button).small {
+    --md-comp-button-group-item-shape-square: 12px;
+    --md-comp-button-group-pressed-item-shape: 8px;
+    --md-comp-button-group-inner-corner-corner-size: 8px;
+    --md-comp-button-group-pressed-inner-corner-corner-size: 4px;
+  }
   .button-group.medium {
     --md-comp-filled-button-container-height: 56px;
     --md-comp-filled-button-icon-size: 24px;
@@ -2155,6 +2267,8 @@
     --md-comp-filled-button-icon-label-space: 8px;
     --md-comp-filled-button-outline-width: 1px;
     --md-comp-button-group-between-space: 8px;
+    --md-comp-button-group-item-shape-square: 16px;
+    --md-comp-button-group-pressed-item-shape: 12px;
   }
   .button-group.medium > :is(button:not(.icon-button), a.button):not(.xsmall, .small, .medium, .large, .xlarge) {
     font-family: var(--md-sys-typescale-title-medium-font-family-name);
@@ -2163,6 +2277,31 @@
     line-height: var(--md-sys-typescale-title-medium-line-height);
     letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
   }
+  .button-group.medium > .icon-button:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-container-height: 56px;
+    --md-comp-icon-button-icon-size: 24px;
+    --md-comp-icon-button-leading-space: 16px;
+    --md-comp-icon-button-trailing-space: 16px;
+    --md-comp-icon-button-narrow-space: 12px;
+    --md-comp-icon-button-wide-space: 24px;
+    --md-comp-icon-button-container-shape-square: 16px;
+    --md-comp-icon-button-pressed-container-shape: 12px;
+    --md-comp-icon-button-outline-width: 1px;
+  }
+  .button-group.medium > .icon-button.narrow:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-leading-space: 12px;
+    --md-comp-icon-button-trailing-space: 12px;
+  }
+  .button-group.medium > .icon-button.wide:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-leading-space: 24px;
+    --md-comp-icon-button-trailing-space: 24px;
+  }
+  .button-group > :is(button, a.button).medium {
+    --md-comp-button-group-item-shape-square: 16px;
+    --md-comp-button-group-pressed-item-shape: 12px;
+    --md-comp-button-group-inner-corner-corner-size: 8px;
+    --md-comp-button-group-pressed-inner-corner-corner-size: 4px;
+  }
   .button-group.large {
     --md-comp-filled-button-container-height: 96px;
     --md-comp-filled-button-icon-size: 32px;
@@ -2171,6 +2310,8 @@
     --md-comp-filled-button-icon-label-space: 12px;
     --md-comp-filled-button-outline-width: 2px;
     --md-comp-button-group-between-space: 8px;
+    --md-comp-button-group-item-shape-square: 28px;
+    --md-comp-button-group-pressed-item-shape: 16px;
   }
   .button-group.large > :is(button:not(.icon-button), a.button):not(.xsmall, .small, .medium, .large, .xlarge) {
     font-family: var(--md-sys-typescale-headline-small-font-family-name);
@@ -2179,6 +2320,31 @@
     line-height: var(--md-sys-typescale-headline-small-line-height);
     letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
   }
+  .button-group.large > .icon-button:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-container-height: 96px;
+    --md-comp-icon-button-icon-size: 32px;
+    --md-comp-icon-button-leading-space: 32px;
+    --md-comp-icon-button-trailing-space: 32px;
+    --md-comp-icon-button-narrow-space: 16px;
+    --md-comp-icon-button-wide-space: 48px;
+    --md-comp-icon-button-container-shape-square: 28px;
+    --md-comp-icon-button-pressed-container-shape: 16px;
+    --md-comp-icon-button-outline-width: 2px;
+  }
+  .button-group.large > .icon-button.narrow:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-leading-space: 16px;
+    --md-comp-icon-button-trailing-space: 16px;
+  }
+  .button-group.large > .icon-button.wide:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-leading-space: 48px;
+    --md-comp-icon-button-trailing-space: 48px;
+  }
+  .button-group > :is(button, a.button).large {
+    --md-comp-button-group-item-shape-square: 28px;
+    --md-comp-button-group-pressed-item-shape: 16px;
+    --md-comp-button-group-inner-corner-corner-size: 16px;
+    --md-comp-button-group-pressed-inner-corner-corner-size: 12px;
+  }
   .button-group.xlarge {
     --md-comp-filled-button-container-height: 136px;
     --md-comp-filled-button-icon-size: 40px;
@@ -2187,6 +2353,8 @@
     --md-comp-filled-button-icon-label-space: 16px;
     --md-comp-filled-button-outline-width: 3px;
     --md-comp-button-group-between-space: 8px;
+    --md-comp-button-group-item-shape-square: 28px;
+    --md-comp-button-group-pressed-item-shape: 16px;
   }
   .button-group.xlarge > :is(button:not(.icon-button), a.button):not(.xsmall, .small, .medium, .large, .xlarge) {
     font-family: var(--md-sys-typescale-headline-large-font-family-name);
@@ -2195,26 +2363,170 @@
     line-height: var(--md-sys-typescale-headline-large-line-height);
     letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
   }
-  .button-group > :is(button:not(.icon-button), a.button) {
-    transition: padding 0.2s ease-out, width 0.2s ease-out, border-radius 0.2s ease-out, background-color 0.2s ease-out;
+  .button-group.xlarge > .icon-button:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-container-height: 136px;
+    --md-comp-icon-button-icon-size: 40px;
+    --md-comp-icon-button-leading-space: 48px;
+    --md-comp-icon-button-trailing-space: 48px;
+    --md-comp-icon-button-narrow-space: 32px;
+    --md-comp-icon-button-wide-space: 72px;
+    --md-comp-icon-button-container-shape-square: 28px;
+    --md-comp-icon-button-pressed-container-shape: 16px;
+    --md-comp-icon-button-outline-width: 3px;
+  }
+  .button-group.xlarge > .icon-button.narrow:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-leading-space: 32px;
+    --md-comp-icon-button-trailing-space: 32px;
+  }
+  .button-group.xlarge > .icon-button.wide:not(.xsmall, .small, .medium, .large, .xlarge) {
+    --md-comp-icon-button-leading-space: 72px;
+    --md-comp-icon-button-trailing-space: 72px;
   }
-  .button-group:not(.connected) > :is(button:not(.icon-button), a.button):active {
-    --_grow: calc(
-      var(--md-comp-filled-button-container-height) *
-        var(--md-comp-button-group-pressed-item-width-multiplier) / 2
-    );
+  .button-group > :is(button, a.button).xlarge {
+    --md-comp-button-group-item-shape-square: 28px;
+    --md-comp-button-group-pressed-item-shape: 16px;
+    --md-comp-button-group-inner-corner-corner-size: 20px;
+    --md-comp-button-group-pressed-inner-corner-corner-size: 16px;
+  }
+  .button-group > :is(button, a.button) {
+    position: relative;
+    transition: width 200ms var(--md-comp-button-group-motion), border-radius 200ms var(--md-comp-button-group-motion), background-color 200ms ease-out;
+  }
+  .button-group > :is(button, a.button)::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    min-width: 48px;
+    min-height: 48px;
+    translate: -50% -50%;
+  }
+  .button-group:not(.connected) > :is(button, a.button) {
+    --_corner: var(--md-comp-button-group-item-shape-round);
+    border-radius: var(--_corner);
+  }
+  .button-group.square:not(.connected) > :is(button, a.button) {
+    --_corner: var(--md-comp-button-group-item-shape-square);
+  }
+  .button-group:not(.connected) > :is(button, a.button)[aria-pressed=true] {
+    --_corner: var(--md-comp-button-group-item-shape-square);
+  }
+  .button-group.square:not(.connected) > :is(button, a.button)[aria-pressed=true] {
+    --_corner: var(--md-comp-button-group-item-shape-round);
+  }
+  .button-group > :is(button:not(.icon-button), a.button):where(.filled, :not(.elevated, .filled, .tonal, .outlined, .text))[aria-pressed=false],
+  .button-group > .icon-button.filled[aria-pressed=false] {
+    --_toggle-container-color: var(--md-sys-color-surface-container);
+    --_toggle-state-color: var(--md-sys-color-on-surface-variant);
+    color: var(--md-sys-color-on-surface-variant);
+    background-color: var(--_toggle-container-color);
+  }
+  .button-group > :is(button:not(.icon-button), a.button):where(.filled, :not(.elevated, .filled, .tonal, .outlined, .text))[aria-pressed=true],
+  .button-group > .icon-button.filled[aria-pressed=true] {
+    --_toggle-container-color: var(--md-sys-color-primary);
+    --_toggle-state-color: var(--md-sys-color-on-primary);
+    color: var(--md-sys-color-on-primary);
+    background-color: var(--_toggle-container-color);
+  }
+  .button-group > :is(button:not(.icon-button), a.button).tonal[aria-pressed=false],
+  .button-group > .icon-button.tonal[aria-pressed=false] {
+    --_toggle-container-color: var(--md-sys-color-secondary-container);
+    --_toggle-state-color: var(--md-sys-color-on-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+    background-color: var(--_toggle-container-color);
+  }
+  .button-group > :is(button:not(.icon-button), a.button).tonal[aria-pressed=true],
+  .button-group > .icon-button.tonal[aria-pressed=true] {
+    --_toggle-container-color: var(--md-sys-color-secondary);
+    --_toggle-state-color: var(--md-sys-color-on-secondary);
+    color: var(--md-sys-color-on-secondary);
+    background-color: var(--_toggle-container-color);
+  }
+  .button-group > :is(button:not(.icon-button), a.button).outlined[aria-pressed=false],
+  .button-group > .icon-button.outlined[aria-pressed=false] {
+    --_toggle-container-color: transparent;
+    --_toggle-state-color: var(--md-sys-color-on-surface-variant);
+    color: var(--md-sys-color-on-surface-variant);
+    background-color: var(--_toggle-container-color);
+  }
+  .button-group > :is(button:not(.icon-button), a.button).outlined[aria-pressed=true],
+  .button-group > .icon-button.outlined[aria-pressed=true] {
+    --_toggle-container-color: var(--md-sys-color-inverse-surface);
+    --_toggle-state-color: var(--md-sys-color-inverse-on-surface);
+    color: var(--md-sys-color-inverse-on-surface);
+    background-color: var(--_toggle-container-color);
+  }
+  .button-group > :is(button:not(.icon-button), a.button).elevated[aria-pressed=false] {
+    --_toggle-container-color: var(--md-sys-color-surface-container-low);
+    --_toggle-state-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-primary);
+    background-color: var(--_toggle-container-color);
+  }
+  .button-group > :is(button:not(.icon-button), a.button).elevated[aria-pressed=true] {
+    --_toggle-container-color: var(--md-sys-color-primary);
+    --_toggle-state-color: var(--md-sys-color-on-primary);
+    color: var(--md-sys-color-on-primary);
+    background-color: var(--_toggle-container-color);
+  }
+  .button-group > :is(button:not(.icon-button):not(.text), a.button:not(.text), .icon-button:is(.filled, .tonal, .outlined))[aria-pressed]:hover {
+    background-color: color-mix(in oklab, var(--_toggle-state-color) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--_toggle-container-color));
   }
-  .button-group:not(.connected) > :is(button:not(.icon-button), a.button):not(.circle):active {
-    padding-inline: calc(var(--md-comp-filled-button-leading-space) + var(--_grow)) calc(var(--md-comp-filled-button-trailing-space) + var(--_grow));
+  .button-group > :is(button:not(.icon-button):not(.text), a.button:not(.text), .icon-button:is(.filled, .tonal, .outlined))[aria-pressed]:focus {
+    background-color: color-mix(in oklab, var(--_toggle-state-color) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--_toggle-container-color));
+  }
+  .button-group > :is(button:not(.icon-button):not(.text), a.button:not(.text), .icon-button:is(.filled, .tonal, .outlined))[aria-pressed]:is(:active, .button-group-pressed) {
+    background-color: color-mix(in oklab, var(--_toggle-state-color) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--_toggle-container-color));
+  }
+  .button-group > :is(button:not(.icon-button), a.button):where(.filled, :not(.elevated, .filled, .tonal, .outlined, .text))[aria-pressed]:is(:disabled, [disabled], .disabled),
+  .button-group > :is(button:not(.icon-button), a.button):is(.tonal, .elevated)[aria-pressed]:is(:disabled, [disabled], .disabled),
+  .button-group > .icon-button:is(.filled, .tonal)[aria-pressed]:is(:disabled, [disabled], .disabled),
+  .button-group > :is(button:not(.icon-button), a.button).outlined[aria-pressed=true]:is(:disabled, [disabled], .disabled),
+  .button-group > .icon-button.outlined[aria-pressed=true]:is(:disabled, [disabled], .disabled) {
+    box-shadow: none !important;
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    pointer-events: none;
+    box-shadow: none;
+    cursor: default;
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+    border-color: transparent;
+  }
+  .button-group > :is(button:not(.icon-button), a.button).outlined[aria-pressed=false]:is(:disabled, [disabled], .disabled),
+  .button-group > .icon-button.outlined[aria-pressed=false]:is(:disabled, [disabled], .disabled) {
+    box-shadow: none !important;
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    pointer-events: none;
+    box-shadow: none;
+    cursor: default;
+    background-color: transparent;
+    border-color: var(--md-sys-color-outline-variant);
+  }
+  .button-group > :is(button, a.button)[aria-pressed=true] > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
+    --md-icon-fill: 1;
   }
-  .button-group:not(.connected) > :is(button:not(.icon-button), a.button).circle:active {
-    width: calc(var(--md-comp-filled-button-container-height) + 2 * var(--_grow));
+  .button-group:not(.connected) > :is(button, a.button):is(:active, .button-group-pressed), .button-group.square:not(.connected) > :is(button, a.button)[aria-pressed=true]:is(:active, .button-group-pressed) {
+    --_corner: var(--md-comp-button-group-pressed-item-shape);
   }
   .button-group.connected {
     --md-comp-button-group-between-space: 2px;
     --md-comp-button-group-container-shape: 9999px;
     --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%;
+  }
+  .button-group.connected.xsmall {
+    --md-comp-button-group-inner-corner-corner-size: 4px;
+    --md-comp-button-group-pressed-inner-corner-corner-size: 4px;
+  }
+  .button-group.connected.small {
+    --md-comp-button-group-inner-corner-corner-size: 8px;
+    --md-comp-button-group-pressed-inner-corner-corner-size: 4px;
+  }
+  .button-group.connected.medium {
+    --md-comp-button-group-inner-corner-corner-size: 8px;
+    --md-comp-button-group-pressed-inner-corner-corner-size: 4px;
   }
   .button-group.connected.large {
     --md-comp-button-group-inner-corner-corner-size: 16px;
@@ -2224,23 +2536,35 @@
     --md-comp-button-group-inner-corner-corner-size: 20px;
     --md-comp-button-group-pressed-inner-corner-corner-size: 16px;
   }
-  .button-group.connected > :is(button:not(.icon-button), a.button) {
+  .button-group.connected.square {
+    --md-comp-button-group-container-shape: var(--md-comp-button-group-inner-corner-corner-size);
+  }
+  .button-group.connected > :is(button, a.button) {
+    min-width: 48px;
+  }
+  .button-group.connected > :is(button, a.button) {
     --_corner: var(--md-comp-button-group-inner-corner-corner-size);
+    --_outer-corner: var(--md-comp-button-group-container-shape);
+    flex: 1 1 0;
     border-radius: var(--_corner);
   }
-  .button-group.connected > :is(button:not(.icon-button), a.button):active {
+  .button-group.connected > :is(button, a.button)[aria-pressed=true] {
+    --_corner: var(--md-comp-button-group-selected-inner-corner-corner-size);
+    --_outer-corner: var(--md-comp-button-group-selected-inner-corner-corner-size);
+  }
+  .button-group.connected > :is(button, a.button):is(:active, .button-group-pressed) {
     --_corner: var(--md-comp-button-group-pressed-inner-corner-corner-size);
   }
-  .button-group.connected > :is(button:not(.icon-button), a.button):first-child {
-    border-start-start-radius: var(--md-comp-button-group-container-shape);
-    border-end-start-radius: var(--md-comp-button-group-container-shape);
+  .button-group.connected > :is(button, a.button):first-child {
+    border-start-start-radius: var(--_outer-corner);
+    border-end-start-radius: var(--_outer-corner);
   }
-  .button-group.connected > :is(button:not(.icon-button), a.button):last-child {
-    border-start-end-radius: var(--md-comp-button-group-container-shape);
-    border-end-end-radius: var(--md-comp-button-group-container-shape);
+  .button-group.connected > :is(button, a.button):last-child {
+    border-start-end-radius: var(--_outer-corner);
+    border-end-end-radius: var(--_outer-corner);
   }
   @media (prefers-reduced-motion: reduce) {
-    .button-group > :is(button:not(.icon-button), a.button) {
+    .button-group > :is(button, a.button) {
       transition: none;
     }
   }
@@ -2870,12 +3194,7 @@
   .material-symbols-outlined,
   .material-symbols-rounded,
   .material-symbols-sharp,
-  .material-icons) > .badge:dir(rtl), [dir=rtl] :is(i,
-  .material-symbols,
-  .material-symbols-outlined,
-  .material-symbols-rounded,
-  .material-symbols-sharp,
-  .material-icons) > .badge {
+  .material-icons) > .badge:dir(rtl) {
     transform: translate(-50%, -50%);
   }
   .list .badge,
@@ -2918,26 +3237,48 @@
     padding-inline: 4px;
     margin: 0;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6) {
+  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
     padding-inline: 4px 12px;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6):first-child {
+  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup):first-child {
     padding-inline-start: 12px;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6) {
+  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: inherit;
+  }
+  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6),
+  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > :is(h1, h2, h3, h4, h5, h6) {
+    margin: 0;
+    color: inherit;
     font-family: var(--md-sys-typescale-title-large-font-family-name);
     font-size: var(--md-sys-typescale-title-large-font-size);
     font-weight: var(--md-sys-typescale-title-large-font-weight);
     line-height: var(--md-sys-typescale-title-large-line-height);
     letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
   }
+  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0;
+    white-space: normal;
+    text-overflow: unset;
+  }
+  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > p {
+    margin: 0;
+    color: inherit;
+    font-family: var(--md-sys-typescale-label-medium-font-family-name);
+    font-size: var(--md-sys-typescale-label-medium-font-size);
+    font-weight: var(--md-sys-typescale-label-medium-font-weight);
+    line-height: var(--md-sys-typescale-label-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
+  }
   header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .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;
@@ -2974,7 +3315,7 @@
   header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .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 10%, transparent);
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6) ~ :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) {
+  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(:is(h1, h2, h3, h4, h5, h6), hgroup), :is(.search-bar, .searchbar)) ~ :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) {
     color: var(--md-comp-top-app-bar-trailing-icon-color);
   }
   header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) {
@@ -3028,6 +3369,16 @@
     border: 0;
     box-shadow: none;
   }
+  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(.search-bar, .searchbar) {
+    flex: 1 1 auto;
+    width: auto;
+    min-width: 0;
+    align-self: center;
+    margin-block: 4px;
+  }
+  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(.search-bar, .searchbar) input {
+    text-align: center;
+  }
   header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > a:not(:has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child)):not(.button, .icon-button):not(.circle):not(.breadcrumb), header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li > a {
     display: inline-flex;
     align-items: center;
@@ -3050,11 +3401,13 @@
   header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > a.active:not(:has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child)):not(.button, .icon-button):not(.circle):not(.breadcrumb), header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li > a.active {
     background-color: color-mix(in oklab, currentColor 10%, transparent);
   }
-  header.center:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) {
+  header.center:not(.medium, .large):has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar),
+  header.center.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) {
     position: relative;
     justify-content: space-between;
   }
-  header.center:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6) {
+  header.center:not(.medium, .large):has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup),
+  header.center.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -3078,42 +3431,136 @@
     flex: 0 0 0;
     height: 48px;
   }
-  header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6),
-  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6) {
+  header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup),
+  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
     order: 1;
     flex: 1 1 calc(100% + 1px);
     white-space: normal;
-    overflow: visible;
+    overflow: hidden;
     text-overflow: unset;
   }
-  header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6) + *,
-  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6) + * {
+  header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6),
+  header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > :is(h1, h2, h3, h4, h5, h6),
+  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6),
+  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > :is(h1, h2, h3, h4, h5, h6) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    white-space: normal;
+  }
+  header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) + *,
+  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) + * {
     margin-inline-start: auto;
   }
   header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) {
     min-height: 112px;
     padding-bottom: 20px;
   }
-  header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6) {
+  header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
     padding: 0 12px;
-    font-family: var(--md-sys-typescale-headline-small-font-family-name);
-    font-size: var(--md-sys-typescale-headline-small-font-size);
-    font-weight: var(--md-sys-typescale-headline-small-font-weight);
-    line-height: var(--md-sys-typescale-headline-small-line-height);
-    letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
-  }
-  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) {
-    min-height: 152px;
-    padding-bottom: 28px;
   }
-  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6) {
-    padding: 0 12px;
+  header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6),
+  header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > :is(h1, h2, h3, h4, h5, h6) {
     font-family: var(--md-sys-typescale-headline-medium-font-family-name);
     font-size: var(--md-sys-typescale-headline-medium-font-size);
     font-weight: var(--md-sys-typescale-headline-medium-font-weight);
     line-height: var(--md-sys-typescale-headline-medium-line-height);
     letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
   }
+  header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > p {
+    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);
+  }
+  header.medium:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > p) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) {
+    min-height: 136px;
+  }
+  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) {
+    min-height: 120px;
+    padding-bottom: 20px;
+  }
+  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
+    padding: 0 12px;
+  }
+  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6),
+  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > :is(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--md-sys-typescale-display-small-font-family-name);
+    font-size: var(--md-sys-typescale-display-small-font-size);
+    font-weight: var(--md-sys-typescale-display-small-font-weight);
+    line-height: var(--md-sys-typescale-display-small-line-height);
+    letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
+  }
+  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > p {
+    font-family: var(--md-sys-typescale-title-medium-font-family-name);
+    font-size: var(--md-sys-typescale-title-medium-font-size);
+    font-weight: var(--md-sys-typescale-title-medium-font-weight);
+    line-height: var(--md-sys-typescale-title-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
+  }
+  header.large:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > p) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) {
+    min-height: 152px;
+    padding-bottom: 28px;
+  }
+  header.center.medium:not(.collapsed):has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup),
+  header.center.large:not(.collapsed):has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
+    text-align: center;
+    align-items: center;
+  }
+  header.medium.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar),
+  header.large.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) {
+    flex-wrap: nowrap;
+    align-content: center;
+    align-items: center;
+    min-height: 64px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  header.medium.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)::before,
+  header.large.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)::before {
+    display: none;
+  }
+  header.medium.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup),
+  header.large.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
+    order: 0;
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  header.medium.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) + *,
+  header.large.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) + * {
+    margin-inline-start: 0;
+  }
+  header.medium.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6),
+  header.medium.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > :is(h1, h2, h3, h4, h5, h6),
+  header.large.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6),
+  header.large.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > :is(h1, h2, h3, h4, h5, h6) {
+    display: block;
+    padding: 0;
+    -webkit-line-clamp: unset;
+    line-clamp: unset;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: var(--md-sys-typescale-title-large-font-family-name);
+    font-size: var(--md-sys-typescale-title-large-font-size);
+    font-weight: var(--md-sys-typescale-title-large-font-weight);
+    line-height: var(--md-sys-typescale-title-large-line-height);
+    letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+  }
+  header.medium.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > p,
+  header.large.collapsed:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > p {
+    padding: 0;
+    font-family: var(--md-sys-typescale-label-medium-font-family-name);
+    font-size: var(--md-sys-typescale-label-medium-font-size);
+    font-weight: var(--md-sys-typescale-label-medium-font-weight);
+    line-height: var(--md-sys-typescale-label-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
+  }
   header.fixed:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
     position: sticky;
     top: 0;
@@ -3208,9 +3655,12 @@
     position: absolute;
     z-index: 1;
     top: calc(4px + (var(--md-comp-nav-bar-indicator-height) - 24px) / 2);
-    left: calc(50% + 12px);
+    inset-inline-start: calc(50% + 12px);
     transform: translate(-50%, -50%);
   }
+  .navigation-bar > :is(a, button) > .badge:dir(rtl) {
+    transform: translate(50%, -50%);
+  }
   .navigation-bar.horizontal {
     --md-comp-nav-bar-indicator-shape: 100px;
     min-height: 56px;
@@ -3234,6 +3684,9 @@
     inset-inline-start: 40px;
     transform: translate(-50%, -50%);
   }
+  .navigation-bar.horizontal > :is(a, button) > .badge:dir(rtl) {
+    transform: translate(50%, -50%);
+  }
   .navigation-bar.horizontal > :is(a, button):hover:not(.active, [aria-current]) {
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
   }
@@ -3401,9 +3854,13 @@
     position: absolute;
     z-index: 1;
     top: calc(6px + (var(--md-comp-nav-rail-indicator-height) - 24px) / 2);
-    left: calc(50% + 12px);
+    inset-inline-start: calc(50% + 12px);
     transform: translate(-50%, -50%);
   }
+  .navigation-rail > a:not(.button, .icon-button) > .badge:dir(rtl),
+  .navigation-rail > button:not(.button, .icon-button):not(:first-child) > .badge:dir(rtl) {
+    transform: translate(50%, -50%);
+  }
   .navigation-rail > :is(h1, h2, h3, h4, h5, h6) {
     display: none;
     box-sizing: border-box;
@@ -3492,6 +3949,10 @@
     inset-inline-start: 40px;
     transform: translate(-50%, -50%);
   }
+  .navigation-rail.expanded > a:not(.button, .icon-button) > .badge:dir(rtl),
+  .navigation-rail.expanded > button:not(.button, .icon-button):not(:first-child) > .badge:dir(rtl) {
+    transform: translate(50%, -50%);
+  }
   .navigation-rail.expanded > :is(h1, h2, h3, h4, h5, h6) {
     display: block;
   }
@@ -3752,6 +4213,12 @@
   .scale-transition.scale-in {
     transform: scale(1);
   }
+  @media (prefers-reduced-motion: reduce) {
+    .scale-transition,
+    .scale-transition.scale-out {
+      transition: none !important;
+    }
+  }
   :where(article) {
     --md-comp-elevated-card-container-color: var(--md-sys-color-surface-container-low);
     --md-comp-filled-card-container-color: var(--md-sys-color-surface-container-highest);
@@ -3813,57 +4280,70 @@
   }
   :where(article).filled {
     --md-comp-card-container-color: var(--md-comp-filled-card-container-color);
-    box-shadow: none !important;
+    box-shadow: none;
   }
   :where(article).outlined,
   :where(article).border {
     --md-comp-card-container-color: var(--md-comp-outlined-card-container-color);
-    box-shadow: none !important;
+    box-shadow: none;
     border: 1px solid var(--md-comp-outlined-card-outline-color);
   }
-  :where(article):not(.filled, .outlined, .border):has(> .primary-action:hover) {
+  :where(article):not(.dragged, .picked-up):not(.filled, .outlined, .border):has(> .primary-action:hover) {
     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);
   }
-  :where(article):is(.filled, .outlined, .border):has(> .primary-action:hover) {
+  :where(article):not(.dragged, .picked-up):is(.filled, .outlined, .border):has(> .primary-action:hover) {
     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);
   }
-  :where(article):has(> .primary-action:hover)::after {
+  :where(article):not(.dragged, .picked-up):has(> .primary-action:hover)::after {
     opacity: var(--md-comp-card-hover-state-layer-opacity);
   }
   :where(article):has(> .primary-action:focus-visible) {
     outline: var(--md-comp-card-focus-indicator-thickness) solid var(--md-comp-card-focus-indicator-color);
     outline-offset: var(--md-comp-card-focus-indicator-offset);
   }
-  :where(article):has(> .primary-action:focus-visible)::after {
+  :where(article):not(.dragged, .picked-up):has(> .primary-action:focus-visible)::after {
     opacity: var(--md-comp-card-focus-state-layer-opacity);
   }
   :where(article):is(.outlined, .border):has(> .primary-action:focus-visible) {
     border-color: var(--md-sys-color-on-surface);
   }
-  :where(article):has(> .primary-action:active)::after {
+  :where(article):not(.dragged, .picked-up):has(> .primary-action:active)::after {
     opacity: var(--md-comp-card-pressed-state-layer-opacity);
   }
-  :where(article).dragged {
+  :where(article):not(.dragged, .picked-up):not(.filled, .outlined, .border):has(> .primary-action:active) {
+    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);
+  }
+  :where(article):not(.dragged, .picked-up):is(.filled, .outlined, .border):has(> .primary-action:active) {
+    box-shadow: none !important;
+  }
+  :where(article):not(.filled, .outlined, .border):is(.dragged, .picked-up) {
+    z-index: 4;
+    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);
+  }
+  :where(article):is(.filled, .outlined, .border):is(.dragged, .picked-up) {
+    z-index: 4;
     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(article).dragged::after {
+  :where(article):is(.dragged, .picked-up)::after {
     opacity: var(--md-comp-card-dragged-state-layer-opacity);
   }
   :where(article):is(.disabled, [aria-disabled=true]),
   :where(article):has(> .primary-action[aria-disabled=true]) {
-    box-shadow: none !important;
     outline: 0;
   }
   :where(article):not(.filled, .outlined, .border):is(.disabled, [aria-disabled=true]),
   :where(article):not(.filled, .outlined, .border):has(> .primary-action[aria-disabled=true]) {
+    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);
     background-color: color-mix(in oklab, var(--md-sys-color-surface) var(--md-comp-card-disabled-container-opacity), transparent);
   }
   :where(article).filled:is(.disabled, [aria-disabled=true]),
   :where(article).filled:has(> .primary-action[aria-disabled=true]) {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) var(--md-comp-card-disabled-container-opacity), transparent);
+    box-shadow: none !important;
+    background-color: color-mix(in oklab, var(--md-sys-color-surface-variant) var(--md-comp-card-disabled-container-opacity), transparent);
   }
   :where(article):is(.outlined, .border):is(.disabled, [aria-disabled=true]),
   :where(article):is(.outlined, .border):has(> .primary-action[aria-disabled=true]) {
+    box-shadow: none !important;
     background-color: var(--md-comp-outlined-card-container-color);
     border-color: color-mix(in oklab, var(--md-comp-outlined-card-disabled-outline-color) var(--md-comp-outlined-card-disabled-outline-opacity), transparent);
   }
@@ -4003,11 +4483,6 @@
       auto-fit,
       minmax(min(100%, var(--md-comp-card-collection-min-card-width)), 1fr)
     );
-    --md-comp-card-collection-resting-shadow: none;
-    --md-comp-card-collection-picked-up-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);
     --md-comp-card-collection-mosaic-row-size: 80px;
     --md-comp-card-collection-carousel-height: 320px;
     --md-comp-card-collection-carousel-card-width: min(82%, 360px);
@@ -4018,13 +4493,6 @@
     margin: 0;
     padding: 0;
   }
-  :where(.card-collection article):not(.dragged, .picked-up) {
-    box-shadow: var(--md-comp-card-collection-resting-shadow) !important;
-  }
-  :where(.card-collection article):is(.dragged, .picked-up) {
-    z-index: 4;
-    box-shadow: var(--md-comp-card-collection-picked-up-shadow) !important;
-  }
   :where(.card-collection article):not(.horizontal) {
     display: flex;
     flex-direction: column;
@@ -4104,6 +4572,48 @@
     align-self: end;
     justify-content: flex-end;
   }
+  article.horizontal:has(> .primary-action) {
+    display: block;
+  }
+  article.horizontal > .primary-action {
+    display: grid;
+    grid-template-columns: minmax(0, var(--md-comp-card-horizontal-media-width)) minmax(0, 1fr);
+    grid-template-rows: auto auto minmax(0, 1fr) auto;
+    min-height: var(--md-comp-card-horizontal-min-height);
+    overflow: hidden;
+  }
+  article.horizontal > .primary-action > img,
+  article.horizontal > .primary-action > picture,
+  article.horizontal > .primary-action > figure {
+    grid-column: 1;
+    grid-row: 1/-1;
+    width: 100%;
+    height: 100%;
+    align-self: stretch;
+  }
+  article.horizontal > .primary-action > img,
+  article.horizontal > .primary-action > picture img,
+  article.horizontal > .primary-action > figure img {
+    height: 100%;
+    object-fit: cover;
+  }
+  article.horizontal > .primary-action > :is(h1, h2, h3, h4, h5, h6),
+  article.horizontal > .primary-action > header {
+    grid-column: 2;
+    grid-row: 1;
+  }
+  article.horizontal > .primary-action > p.subhead {
+    grid-column: 2;
+    grid-row: 2;
+  }
+  article.horizontal > .primary-action > p:not(.subhead) {
+    grid-column: 2;
+    grid-row: 3;
+  }
+  article.horizontal > .primary-action {
+    width: 100%;
+    min-height: inherit;
+  }
   article.small {
     height: 300px;
   }
@@ -4122,7 +4632,7 @@
     min-height: 0;
     overflow: hidden;
   }
-  article.small > img, article.small > figure img, article.medium > img, article.medium > figure img, article.large > img, article.large > figure img {
+  article.small > img, article.small > picture img, article.small > figure img, article.medium > img, article.medium > picture img, article.medium > figure img, article.large > img, article.large > picture img, article.large > figure img {
     height: 100%;
   }
   article.small > p, article.medium > p, article.large > p {
@@ -4147,10 +4657,34 @@
   article.horizontal.large > figure {
     max-height: none;
   }
-  :where(article):has(> aside) {
+  article.horizontal:is(.small, .medium, .large):has(> .primary-action) {
+    display: block;
+  }
+  article.horizontal:is(.small, .medium, .large) > .primary-action {
+    height: 100%;
+  }
+  @media (width < 600px) {
+    article.horizontal,
+    article.horizontal.small,
+    article.horizontal.medium,
+    article.horizontal.large {
+      display: flex;
+      flex-direction: column;
+      height: auto;
+      min-height: auto;
+    }
+    article.horizontal > .primary-action,
+    article.horizontal:is(.small, .medium, .large) > .primary-action {
+      display: flex;
+      flex-direction: column;
+      height: auto;
+      min-height: auto;
+    }
+  }
+  :where(article.card-reveal-initialized) {
     interpolate-size: allow-keywords;
   }
-  article > aside {
+  article.card-reveal-initialized > aside {
     --md-comp-card-reveal-duration: 500ms;
     --md-comp-card-reveal-easing: cubic-bezier(0.2, 0, 0, 1);
     position: relative;
@@ -4168,7 +4702,7 @@
     pointer-events: none;
     transition: height var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing), padding-block var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing), opacity 150ms ease-out, visibility 0s var(--md-comp-card-reveal-duration);
   }
-  article > aside[aria-expanded=true] {
+  article.card-reveal-initialized > aside.open {
     height: auto;
     padding-block: 0 var(--md-comp-card-content-padding);
     opacity: 1;
@@ -4177,13 +4711,13 @@
     transition: height var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing), padding-block var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing), opacity 200ms 100ms ease-out, visibility 0s;
   }
   @supports not (interpolate-size: allow-keywords) {
-    article > aside {
+    article.card-reveal-initialized > aside {
+      display: none;
       height: auto;
-      max-height: 0;
-      transition: max-height var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing), padding-block var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing), opacity 150ms ease-out, visibility 0s var(--md-comp-card-reveal-duration);
+      transition: none;
     }
-    article > aside[aria-expanded=true] {
-      max-height: var(--md-comp-card-reveal-fallback-height, 320px);
+    article.card-reveal-initialized > aside.open {
+      display: block;
     }
   }
   article > figure > .card-reveal-trigger {
@@ -4253,11 +4787,14 @@
     fill: currentColor;
   }
   @media (prefers-reduced-motion: reduce) {
-    article > aside {
+    :where(article),
+    :where(article)::after,
+    article > figure > .card-reveal-trigger,
+    article.card-reveal-initialized > aside {
       transition: none;
     }
   }
-  article.sticky > :is(nav, .actions) {
+  article.sticky > .actions {
     position: relative;
     z-index: 4;
     background-color: inherit;
@@ -7568,6 +8105,41 @@
     padding: 0;
     border: 0;
   }
+  .field:has(> .hide-select):has(> label):not(.outlined) {
+    display: grid;
+  }
+  .field:has(> .hide-select):has(> label):not(.outlined) > label {
+    grid-row: 1;
+    background-color: var(--md-comp-filled-text-field-container-color);
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+    position: static;
+    transform: none;
+    margin: 0;
+    padding: 8px 16px 0;
+    padding-inline-end: 52px;
+    overflow-wrap: anywhere;
+    pointer-events: auto;
+    font-family: var(--md-sys-typescale-body-small-font-family-name);
+    font-size: var(--md-sys-typescale-body-small-font-size);
+    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);
+  }
+  .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;
+  }
+  .field:has(> .hide-select):has(> label):not(.outlined).disabled > label {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 4%, transparent);
+  }
+  .field:has(> .hide-select):has(> label):not(.outlined) > input.menu-trigger {
+    grid-row: 2;
+    height: auto;
+    min-height: calc(var(--md-sys-typescale-body-large-line-height) + 8px);
+    padding-block: 0 7px;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
   .field:has(> .hide-select).disabled .caret {
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   }