@expressivecss/expressive 0.14.1 → 0.16.0

package/src/sass/components/_badges.scss

@@ -16,10 +16,10 @@
 .badge {
   --md-comp-badge-color: var(--md-sys-color-error);
   --md-comp-badge-label-text-color: var(--md-sys-color-on-error);
-  --md-comp-badge-large-size: 16px;
+  --md-comp-badge-large-size: #{rem(16px)};
   --md-comp-badge-small-size: 6px;
-  --md-comp-badge-large-shape: 8px;
-  --md-comp-badge-icon-size: 24px;
+  --md-comp-badge-large-shape: var(--md-sys-shape-corner-small);
+  --md-comp-badge-icon-size: #{rem(24px)};
 
   box-sizing: border-box;
   display: inline-flex;
@@ -28,7 +28,7 @@
   justify-content: center;
   min-width: var(--md-comp-badge-large-size);
   height: var(--md-comp-badge-large-size);
-  max-width: calc(4ch + 8px);
+  max-width: calc(4ch + #{rem(8px)});
   margin: 0;
   padding: 0 4px;
   overflow: hidden;
@@ -50,19 +50,13 @@
     font-size: 0;
     line-height: 0;
     color: transparent;
+    @include forced-colors-fill;
   }
 }
 
 // Child of an icon: sit on the upper trailing corner of the 24dp
-// glyph, even when the <i> is a larger indicator pill.
-:is(
-  i,
-  .material-symbols,
-  .material-symbols-outlined,
-  .material-symbols-rounded,
-  .material-symbols-sharp,
-  .material-icons
-) {
+// glyph, even when the icon is a larger indicator pill.
+#{$icon} {
   position: relative;
   overflow: visible;
 

package/src/sass/components/_bar-chart.scss

@@ -13,7 +13,8 @@
 // Modifiers: .stacked draws one bar per row with each series after the
 // ones before it, .split separates stacked segments and rounds each one,
 // .track draws a full-width track behind each row's bars, .values writes
-// each cell's text from its bar's base, .sparkline is a small chart with
+// each cell's text from its bar's base, .axis labels the value axis under
+// the plot at round values, .sparkline is a small chart with
 // no labels, grid, legend or tooltip.
 //
 // Tokens:
@@ -28,11 +29,12 @@
 //                                      on-secondary, surface; .values text
 
 @include chart("bar-chart");
+@include chart-axis("bar-chart", $beside: false);
 
 .bar-chart {
-  --md-comp-bar-chart-row-height: 40px;
+  --md-comp-bar-chart-row-height: #{rem(40px)};
   --md-comp-bar-chart-bar-height: 60%;
-  --md-comp-bar-chart-shape: 4px;
+  --md-comp-bar-chart-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-bar-chart-track-color: var(--md-sys-color-surface-container-highest);
   --md-comp-bar-chart-on-color-1: var(--md-sys-color-on-primary);
   --md-comp-bar-chart-on-color-2: var(--md-sys-color-on-tertiary);
@@ -61,7 +63,7 @@
   }
 
   &.sparkline {
-    --md-comp-bar-chart-row-height: 24px;
+    --md-comp-bar-chart-row-height: #{rem(24px)};
 
     display: flex;
   }
@@ -87,6 +89,27 @@
   background: linear-gradient(to right, var(--md-comp-bar-chart-grid-color) 1px, transparent 0) 0 0 / 25% 100%;
 }
 
+// .axis labels the value axis under the plot, with a grid line up from
+// each label. The row labels keep the plot's height.
+.bar-chart.axis > :is(.bar-chart-plot, .bar-chart-labels) {
+  margin-block-end: 24px;
+}
+
+.bar-chart-axis > li {
+  inset: 0 auto;
+  inset-inline-start: calc(100% - var(--at, 0%));
+  border-block-start: 0;
+  border-inline-start: 1px solid var(--md-comp-bar-chart-grid-color);
+}
+
+.bar-chart-axis > li > span {
+  inset: 100% auto auto 0;
+  width: auto;
+  padding: 4px 0 0;
+  overflow: visible;
+  translate: -50% 0;
+}
+
 .bar-chart-labels {
   grid-auto-rows: minmax(0, 1fr);
   grid-auto-flow: row;
@@ -135,8 +158,6 @@
   > div > span {
     --bar-chart-tip: var(--md-comp-bar-chart-shape);
     --bar-chart-base: 0px;
-    --bar-chart-zero-left: calc(100% - var(--zero, 100%));
-    --bar-chart-zero-right: var(--zero, 100%);
     --bar-chart-ends: var(--bar-chart-base) var(--bar-chart-tip) var(--bar-chart-tip) var(--bar-chart-base);
 
     background-color: var(--bar-chart-color);
@@ -146,11 +167,14 @@
     &.negative {
       --bar-chart-ends: var(--bar-chart-tip) var(--bar-chart-base) var(--bar-chart-base) var(--bar-chart-tip);
     }
+
+    // A range floats, so both its ends are tips.
+    &.floating {
+      --bar-chart-base: var(--bar-chart-tip);
+    }
   }
 
   &.rtl > div > span {
-    --bar-chart-zero-left: var(--zero, 100%);
-    --bar-chart-zero-right: calc(100% - var(--zero, 100%));
     --bar-chart-ends: var(--bar-chart-tip) var(--bar-chart-base) var(--bar-chart-base) var(--bar-chart-tip);
 
     &.negative {
@@ -158,15 +182,7 @@
     }
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    > div > span {
-      transition: clip-path 400ms cubic-bezier(0.2, 0, 0, 1);
-
-      @starting-style {
-        clip-path: inset(0 var(--bar-chart-zero-right) 0 var(--bar-chart-zero-left) round var(--bar-chart-ends));
-      }
-    }
-  }
+  @include chart-column-motion;
 }
 
 // One bar per row, rounded only at the ends of the whole stack unless split.
@@ -228,7 +244,7 @@
 
   @media (prefers-reduced-motion: no-preference) {
     > div > span {
-      transition: opacity 200ms linear 400ms;
+      transition: opacity var(--md-sys-motion-duration-short4) linear var(--md-sys-motion-duration-medium4);
 
       @starting-style {
         opacity: 0;
@@ -250,7 +266,7 @@
   inset-inline: 0;
   height: calc(100% / var(--rows, 1));
   border-radius: var(--md-comp-bar-chart-shape);
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+  background-color: state-layer(var(--md-sys-color-on-surface), "hover");
   translate: 0 -50%;
 }
 
@@ -282,4 +298,10 @@
   .bar-chart-cursor {
     outline: 1px solid CanvasText;
   }
+
+  // The track is a fill, which forced colors paint as Canvas.
+  .bar-chart.track .bar-chart-bars > div {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }

package/src/sass/components/_bottom-sheet.scss

@@ -2,10 +2,10 @@
 
 // Bottom sheets.
 //
-// Anatomy is the HTML. A dialog.bottom-sheet (or .bottom) is the surface.
+// Anatomy is the HTML. A dialog.bottom-sheet is the surface.
 // showModal() is the modal variant (scrim). show() is the standard variant
 // (no scrim, page stays interactive). ::before is the optional drag handle;
-// an explicit .handle button replaces it. A heading, body, and trailing
+// an explicit .drag-handle replaces it. A heading, body, and trailing
 // form[method=dialog] are the same slots as a basic dialog.
 //
 // Tokens follow https://m3.material.io/components/bottom-sheets
@@ -14,16 +14,20 @@
 //   max height   viewport minus 72dp
 //   handle       32×4dp bar in a 48dp hit target, on-surface-variant
 //   scrim        modal only (UA ::backdrop + the dialog scrim token)
+//   motion       default spatial spring; follows motion="expressive"
+//
+// .expandable opens at --md-comp-bottom-sheet-partial-height (50% of the
+// viewport) and grows to the full height with .expanded, which a drag up or
+// the handle button sets. The height moves on the same spring.
 //
 // Compact and medium are the intended windows. On large screens prefer a
 // side sheet or a basic dialog; the sheet still lays out (640 + 56).
 
 $_handle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='4'%3E%3Crect width='32' height='4' rx='2' fill='black'/%3E%3C/svg%3E");
 
-dialog.bottom,
 dialog.bottom-sheet {
   --md-comp-bottom-sheet-container-color: var(--md-sys-color-surface-container-low);
-  --md-comp-bottom-sheet-container-shape: 28px;
+  --md-comp-bottom-sheet-container-shape: var(--md-sys-shape-corner-extra-large);
   --md-comp-bottom-sheet-container-max-width: 640px;
   --md-comp-bottom-sheet-margin-inline: 56px;
   --md-comp-bottom-sheet-top-inset: 72px;
@@ -33,17 +37,25 @@ dialog.bottom-sheet {
     transparent
   );
   --md-comp-bottom-sheet-shift: 0px;
+  // Entry and drag snap-back run on the default spatial spring, which follows
+  // the motion="expressive" switch.
+  --md-comp-bottom-sheet-motion: var(--md-sys-motion-spring-default-spatial);
+  --md-comp-bottom-sheet-motion-duration: var(--md-sys-motion-spring-default-spatial-duration);
+  // A spatial spring overshoots, about 1.5% of the sheet's height in the
+  // expressive scheme. The sheet runs on below the viewport by this much, so
+  // the overshoot lifts surface into view rather than a gap under it.
+  --_bleed: 24px;
 
   box-sizing: border-box;
   position: fixed;
-  inset: auto 0 0;
+  inset: auto 0 calc(-1 * var(--_bleed));
   width: 100%;
   min-width: 0;
   max-width: none;
   height: auto;
-  max-height: calc(100dvh - var(--md-comp-bottom-sheet-top-inset));
+  max-height: calc(100dvh - var(--md-comp-bottom-sheet-top-inset) + var(--_bleed));
   margin: 0;
-  padding: 0;
+  padding: 0 0 var(--_bleed);
   border: none;
   border-radius: var(--md-comp-bottom-sheet-container-shape)
     var(--md-comp-bottom-sheet-container-shape) 0 0;
@@ -52,13 +64,13 @@ dialog.bottom-sheet {
   outline: none;
   @include z-depth("1");
   translate: 0 var(--md-comp-bottom-sheet-shift);
-  transition: translate 280ms ease;
+  transition: translate var(--md-comp-bottom-sheet-motion-duration) var(--md-comp-bottom-sheet-motion);
   @include glass(var(--md-comp-bottom-sheet-container-color));
 
   // Non-modal `show()` is not in the top layer — sit above page content
-  // and below snackbars (z-index 10000).
+  // and below tooltips and snackbars (tokens/_stacking.scss).
   &:not(:modal) {
-    z-index: 1100;
+    z-index: var(--expressive-z-sheet);
   }
 
   @include bp-up("medium") {
@@ -76,7 +88,7 @@ dialog.bottom-sheet {
     backdrop-filter: none;
   }
 
-  // Drag handle. 32×4 bar, 48dp hit. Hidden when the author supplies .handle.
+  // Drag handle. 32×4 bar, 48dp hit. Hidden when the author supplies .drag-handle.
   &::before {
     content: "";
     box-sizing: border-box;
@@ -88,15 +100,16 @@ dialog.bottom-sheet {
     padding: 0;
     background-color: var(--md-comp-bottom-sheet-drag-handle-color);
     mask: $_handle center / 32px 4px no-repeat;
+    @include forced-colors-fill;
     pointer-events: none;
   }
 
-  &:has(> :is(.handle, .drag-handle))::before {
+  &:has(> .drag-handle)::before {
     content: none;
     display: none;
   }
 
-  > :is(.handle, .drag-handle) {
+  > .drag-handle {
     box-sizing: border-box;
     flex: 0 0 48px;
     align-self: center;
@@ -108,8 +121,13 @@ dialog.bottom-sheet {
     border-radius: 0;
     background-color: var(--md-comp-bottom-sheet-drag-handle-color);
     mask: $_handle center / 32px 4px no-repeat;
+    @include forced-colors-fill;
     cursor: grab;
     appearance: none;
+    // The drag is pointer events. With the default touch-action the browser
+    // takes a vertical touch drag as a pan and cancels the pointer, so the
+    // sheet never dismisses on a touch screen.
+    touch-action: none;
   }
 
   // The sheet paints its own bar with a mask on the element, so the vertical
@@ -125,21 +143,31 @@ dialog.bottom-sheet {
   }
 }
 
-dialog.bottom[open],
 dialog.bottom-sheet[open] {
   display: flex;
   flex-direction: column;
 }
 
+dialog.bottom-sheet.expandable {
+  --md-comp-bottom-sheet-partial-height: 50dvh;
+
+  height: calc(var(--md-comp-bottom-sheet-partial-height) + var(--_bleed));
+  transition:
+    translate var(--md-comp-bottom-sheet-motion-duration) var(--md-comp-bottom-sheet-motion),
+    height var(--md-comp-bottom-sheet-motion-duration) var(--md-comp-bottom-sheet-motion);
+
+  &.expanded {
+    height: calc(100dvh - var(--md-comp-bottom-sheet-top-inset) + var(--_bleed));
+  }
+}
+
 @starting-style {
-  dialog.bottom[open],
   dialog.bottom-sheet[open] {
     translate: 0 100%;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  dialog.bottom,
   dialog.bottom-sheet {
     transition: none;
   }

package/src/sass/components/_breadcrumb.scss

@@ -29,9 +29,16 @@ nav:has(> .breadcrumb),
   color: var(--md-comp-breadcrumb-label-color);
   @include typescale("body-small");
 
+  // A crumb that shrank in one row ran its text under the next separator;
+  // in nowrap the trail scrolls instead.
   &.nowrap {
     flex-wrap: nowrap;
     overflow-x: auto;
+
+    > ol > li {
+      flex-shrink: 0;
+    }
+
     scrollbar-width: none;
 
     &::-webkit-scrollbar {
@@ -90,7 +97,7 @@ nav:has(> .breadcrumb),
     color: var(--md-comp-breadcrumb-current-color);
   }
 
-  i {
+  #{$icon} {
     font-size: 1.125em;
     margin-inline-end: 4px;
   }

package/src/sass/components/_button-groups.scss

@@ -39,17 +39,6 @@ $_standard-space: (
   "xlarge": 8px,
 );
 
-// md.comp.button.<size>.{container-shape-square, pressed-container-shape}.
-// Common buttons and icon buttons share these numbers, so the group can morph
-// either kind of child through one pair of properties.
-$_item-shapes: (
-  "xsmall": (square: 12px, pressed: 8px),
-  "small": (square: 12px, pressed: 8px),
-  "medium": (square: 16px, pressed: 12px),
-  "large": (square: 28px, pressed: 16px),
-  "xlarge": (square: 28px, pressed: 16px),
-);
-
 // md.comp.button-group.connected.<size>.{inner-corner, pressed.inner-corner}.
 // The live M3 measurement is authoritative for XS (4px). Material Web 34.0.21
 // still emits 8px there; S and M agree at 8px.
@@ -65,26 +54,30 @@ $_connected-corners: (
   @include z-depth("0");
   color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   pointer-events: none;
-  box-shadow: none;
   cursor: default;
 }
 
+// Toggle colors. The label and icon take the state-layer color.
+@mixin _toggle-colors($container, $state) {
+  --_toggle-container-color: #{$container};
+  --_toggle-state-color: #{$state};
+  color: $state;
+  background-color: var(--_toggle-container-color);
+}
+
 .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-item-shape-round: var(--md-sys-shape-corner-full);
+  --md-comp-button-group-item-shape-square: var(--md-sys-shape-corner-medium);
+  --md-comp-button-group-pressed-item-shape: var(--md-sys-shape-corner-small);
   // M3 states this as a percentage of the item's own width. CSS cannot
   // multiply a length by one, so it is the same figure as a ratio.
-  --md-comp-button-group-pressed-item-width-multiplier: .15;
-  // Material's fast-spatial spring (damping .9, stiffness 1400), sampled into
-  // a CSS linear easing so width and corner motion use the published dynamics.
-  --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
-  );
+  --md-comp-button-group-pressed-item-width-multiplier: 0.15;
+  // Material's fast-spatial spring, so width and corner motion use the
+  // published dynamics and follow motion="expressive". The easing and its
+  // duration are a pair.
+  --md-comp-button-group-motion: var(--md-sys-motion-spring-fast-spatial);
+  --md-comp-button-group-motion-duration: var(--md-sys-motion-spring-fast-spatial-duration);
 
   display: flex;
   align-items: center;
@@ -100,8 +93,9 @@ $_connected-corners: (
       @include button-size($name);
 
       --md-comp-button-group-between-space: #{map.get($_standard-space, $name)};
-      --md-comp-button-group-item-shape-square: #{map.get(map.get($_item-shapes, $name), square)};
-      --md-comp-button-group-pressed-item-shape: #{map.get(map.get($_item-shapes, $name), pressed)};
+      // Common and icon buttons share these two shapes.
+      --md-comp-button-group-item-shape-square: #{map.get($icon-button-sizes, $name, square)};
+      --md-comp-button-group-pressed-item-shape: #{map.get($icon-button-sizes, $name, pressed)};
 
       > #{$_label-item}:not(#{$_sized}) {
         @include typescale(map.get($s, label));
@@ -112,32 +106,32 @@ $_connected-corners: (
       }
 
       > .icon-button.narrow:not(#{$_sized}) {
-        --md-comp-icon-button-leading-space: #{map.get(map.get($icon-button-sizes, $name), narrow)};
-        --md-comp-icon-button-trailing-space: #{map.get(map.get($icon-button-sizes, $name), narrow)};
+        --md-comp-icon-button-leading-space: #{map.get($icon-button-sizes, $name, narrow)};
+        --md-comp-icon-button-trailing-space: #{map.get($icon-button-sizes, $name, narrow)};
       }
 
       > .icon-button.wide:not(#{$_sized}) {
-        --md-comp-icon-button-leading-space: #{map.get(map.get($icon-button-sizes, $name), wide)};
-        --md-comp-icon-button-trailing-space: #{map.get(map.get($icon-button-sizes, $name), wide)};
+        --md-comp-icon-button-leading-space: #{map.get($icon-button-sizes, $name, wide)};
+        --md-comp-icon-button-trailing-space: #{map.get($icon-button-sizes, $name, wide)};
       }
     }
 
     // Group shape tokens inherit, so an explicitly sized item must rewrite
     // them on itself just as its button geometry tokens do.
     > #{$_item}.#{$name} {
-      --md-comp-button-group-item-shape-square: #{map.get(map.get($_item-shapes, $name), square)};
-      --md-comp-button-group-pressed-item-shape: #{map.get(map.get($_item-shapes, $name), pressed)};
-      --md-comp-button-group-inner-corner-corner-size: #{map.get(map.get($_connected-corners, $name), inner)};
-      --md-comp-button-group-pressed-inner-corner-corner-size: #{map.get(map.get($_connected-corners, $name), pressed)};
+      --md-comp-button-group-item-shape-square: #{map.get($icon-button-sizes, $name, square)};
+      --md-comp-button-group-pressed-item-shape: #{map.get($icon-button-sizes, $name, pressed)};
+      --md-comp-button-group-inner-corner-corner-size: #{map.get($_connected-corners, $name, inner)};
+      --md-comp-button-group-pressed-inner-corner-corner-size: #{map.get($_connected-corners, $name, pressed)};
     }
   }
 
   > #{$_item} {
     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;
+      width var(--md-comp-button-group-motion-duration) var(--md-comp-button-group-motion),
+      border-radius var(--md-comp-button-group-motion-duration) var(--md-comp-button-group-motion),
+      background-color var(--md-sys-motion-duration-short4) ease-out;
   }
 
   // Every item owns a centered 48dp minimum hit target. For M/L/XL this is a
@@ -176,88 +170,52 @@ $_connected-corners: (
   // Shape and the filled icon below provide two non-color selection cues.
   > #{$_label-item}#{$_filled-item}[aria-pressed=false],
   > .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);
+    @include _toggle-colors(var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant));
   }
 
   > #{$_label-item}#{$_filled-item}[aria-pressed=true],
   > .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);
+    @include _toggle-colors(var(--md-sys-color-primary), var(--md-sys-color-on-primary));
   }
 
   > #{$_label-item}.tonal[aria-pressed=false],
   > .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);
+    @include _toggle-colors(var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container));
   }
 
   > #{$_label-item}.tonal[aria-pressed=true],
   > .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);
+    @include _toggle-colors(var(--md-sys-color-secondary), var(--md-sys-color-on-secondary));
   }
 
   > #{$_label-item}.outlined[aria-pressed=false],
   > .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);
+    @include _toggle-colors(transparent, var(--md-sys-color-on-surface-variant));
   }
 
   > #{$_label-item}.outlined[aria-pressed=true],
   > .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);
+    @include _toggle-colors(var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface));
   }
 
   > #{$_label-item}.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);
+    @include _toggle-colors(var(--md-sys-color-surface-container-low), var(--md-sys-color-primary));
   }
 
   > #{$_label-item}.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);
+    @include _toggle-colors(var(--md-sys-color-primary), var(--md-sys-color-on-primary));
   }
 
   > #{$_toggle-item}[aria-pressed]:hover {
-    background-color: color-mix(
-      in oklab,
-      var(--_toggle-state-color) state-opacity("hover"),
-      var(--_toggle-container-color)
-    );
+    background-color: state-layer(var(--_toggle-state-color), "hover", var(--_toggle-container-color));
   }
 
   > #{$_toggle-item}[aria-pressed]:focus {
-    background-color: color-mix(
-      in oklab,
-      var(--_toggle-state-color) state-opacity("focus"),
-      var(--_toggle-container-color)
-    );
+    background-color: state-layer(var(--_toggle-state-color), "focus", var(--_toggle-container-color));
   }
 
   > #{$_toggle-item}[aria-pressed]:is(:active, .button-group-pressed) {
-    background-color: color-mix(
-      in oklab,
-      var(--_toggle-state-color) state-opacity("pressed"),
-      var(--_toggle-container-color)
-    );
+    background-color: state-layer(var(--_toggle-state-color), "pressed", var(--_toggle-container-color));
   }
 
   > #{$_label-item}#{$_filled-item}[aria-pressed]:is(:disabled, [disabled], .disabled),
@@ -294,7 +252,7 @@ $_connected-corners: (
   // only thing that keeps a connected group at 2dp.
   &.connected {
     --md-comp-button-group-between-space: 2px;
-    --md-comp-button-group-container-shape: 9999px;
+    --md-comp-button-group-container-shape: var(--md-sys-shape-corner-full);
     --md-comp-button-group-inner-corner-corner-size: 8px;
     --md-comp-button-group-pressed-inner-corner-corner-size: 4px;
 
@@ -315,10 +273,6 @@ $_connected-corners: (
       --md-comp-button-group-container-shape: var(--md-comp-button-group-inner-corner-corner-size);
     }
 
-    > #{$_item} {
-      min-width: 48px;
-    }
-
     // The corner goes through a variable so that pressing an item changes one
     // value rather than restating `border-radius`. A shorthand for the pressed
     // state would take the end items' round outer corners with it.
@@ -334,6 +288,7 @@ $_connected-corners: (
       --_round: calc(var(--md-comp-filled-button-container-height, 40px) / 2);
 
       flex: 1 1 0;
+      min-width: 48px;
       border-radius: var(--_corner);
 
       &.icon-button {