@expressivecss/expressive 0.7.0 → 0.9.0

package/src/sass/components/_bottom-app-bar.scss

@@ -0,0 +1,180 @@
+@use "../abstracts" as *;
+
+// Bottom app bar. A row of *commands* at the bottom edge, with an optional
+// FAB — the counterpart of the top app bar, not of the navigation bar.
+//
+// It is not `nav.navigation-bar`, and the difference is the whole reason this
+// component exists twice over. A navigation bar holds 3–5 destinations that do
+// not change per screen; a bottom app bar holds the actions of the screen you
+// are already on. So this is not a <nav> and takes no landmark (rule 4), and
+// M3 says never show the two at once. The retired version of this component
+// keyed on `footer:has(> nav:only-child)` — an element, which both claimed the
+// landmark and put the two one markup slip apart. The host is a class now, and
+// `semantics.json` forbids writing it on a <nav>.
+//
+// Anatomy is the HTML. Direct <a> / <button> children with a single icon are
+// the actions; a `.button.extra.circle` child is the FAB and is pushed to the
+// end. `.icon-button` styles itself and opts out, as it does in every host.
+//
+// M3 Expressive's toolbar (`.toolbar.docked`) is the newer answer to the same
+// problem and holds the same commands in a 64dp bar. Both ship; this one is
+// the app-bar-shaped 80dp version the spec still publishes tokens for.
+//
+// Tokens (md.comp.bottom-app-bar.*, DSP 34.0.21 — the container is all of it;
+// the actions are icon buttons and the FAB is a FAB):
+//   --md-comp-bottom-app-bar-container-color   surface-container
+//   --md-comp-bottom-app-bar-container-height  80dp, one height with or
+//                                              without a FAB (with-fab's 72dp
+//                                              is deprecated), content centred
+//   --md-comp-bottom-app-bar-container-shape   0
+//   --md-comp-bottom-app-bar-icon-color        on-surface-variant
+//   --md-comp-bottom-app-bar-icon-size         24dp
+//   --md-comp-bottom-app-bar-action-size       48dp target
+//   --md-comp-bottom-app-bar-leading-space     4dp — 16dp to the glyph, less
+//   --md-comp-bottom-app-bar-trailing-space    the 12dp the target insets
+//   --md-comp-bottom-app-bar-fab-container-color  secondary-container, per
+//                                              BottomAppBarDefaults, not the
+//                                              free-standing FAB's primary
+//   --md-comp-bottom-app-bar-fab-trailing-space   16dp from the container edge,
+//                                              measured from the edge and not
+//                                              added to the container's own
+//                                              trailing space
+//   --md-comp-bottom-app-bar-z                 997, the navigation bar's rung
+.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;
+  // No gap: the actions are 48dp targets and abut, which is Compose's
+  // `Arrangement.Start` and puts their glyph centres 48dp apart. The top app
+  // bar spaces its actions the same way.
+  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);
+  @include z-depth("2");
+
+  // Icon-only actions. Same shape as the top app bar's: a bare control with a
+  // single icon becomes a 48dp target. Anything that styles itself — the
+  // common button, the icon button, the FAB — is left alone.
+  > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> #{$icon}: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;
+    @include focus-visible;
+
+    > #{$icon} {
+      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);
+    }
+
+    &:hover {
+      background-color: color-mix(in oklab, currentColor state-opacity("hover"), transparent);
+    }
+
+    &:active {
+      background-color: color-mix(in oklab, currentColor state-opacity("pressed"), transparent);
+    }
+
+    &:disabled,
+    &.disabled {
+      pointer-events: none;
+      color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+      background: transparent;
+    }
+  }
+
+  // The FAB. `margin-inline-start: auto` is the spacer, so the bar needs no
+  // filler element between the actions and it. Flat and secondary-container:
+  // the bar is already at level 2, and a second shadow inside it reads as a
+  // sticker. Specificity beats the FAB's own `:where()`-scoped block.
+  > :is(a, button).extra.circle,
+  > :is(a, button).large.circle {
+    margin-inline-start: auto;
+    // 16dp from the container edge. The bar's own trailing space is already
+    // spent, so this is the remainder - Compose's `16.dp - HorizontalPadding`.
+    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;
+
+    &:hover {
+      box-shadow: none;
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-secondary-container) state-opacity("hover"),
+        var(--md-comp-bottom-app-bar-fab-container-color)
+      );
+    }
+
+    // Focus and pressed are separate states with separate opacities, the way
+    // `abstracts/_mixins` keeps them. `:focus`, not `:focus-visible`: the FAB's
+    // own block in `_buttons.scss` paints a `primary-container` tint on plain
+    // `:focus`, and leaving that uncovered would flash the wrong colour family
+    // at a mouse click. The ring is `focus-visible`'s job and the base rule
+    // already carries it.
+    &:focus {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-secondary-container) state-opacity("focus"),
+        var(--md-comp-bottom-app-bar-fab-container-color)
+      );
+    }
+
+    &:active {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-secondary-container) state-opacity("pressed"),
+        var(--md-comp-bottom-app-bar-fab-container-color)
+      );
+    }
+  }
+}
+
+// Pinned to the bottom edge. Same z rung as nav.navigation-bar.fixed: the two
+// are alternatives, never neighbours, so neither needs to sit above the other.
+.bottom-app-bar.fixed {
+  position: fixed;
+  inset: auto 0 0 0;
+  z-index: var(--md-comp-bottom-app-bar-z);
+  // The bar grows by the inset rather than spending its own height on it.
+  // Under `border-box` the padding would otherwise come out of the 80dp the
+  // token block and the docs both promise, and the actions would sit in
+  // whatever was left.
+  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);
+}

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

@@ -10,7 +10,7 @@
 //
 // Tokens follow https://m3.material.io/components/bottom-sheets
 //   container    surface-container-low, 28dp top corners, elevation 1
-//   max width    640dp; 56dp inset from the small breakpoint
+//   max width    640dp; 56dp inset from the Medium breakpoint
 //   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)
@@ -60,7 +60,7 @@ dialog.bottom-sheet {
     z-index: 1100;
   }
 
-  @include bp-up("small") {
+  @include bp-up("medium") {
     width: min(
       var(--md-comp-bottom-sheet-container-max-width),
       calc(100% - 2 * var(--md-comp-bottom-sheet-margin-inline))
@@ -90,12 +90,12 @@ dialog.bottom-sheet {
     pointer-events: none;
   }
 
-  &:has(> .handle)::before {
+  &:has(> :is(.handle, .drag-handle))::before {
     content: none;
     display: none;
   }
 
-  > .handle {
+  > :is(.handle, .drag-handle) {
     box-sizing: border-box;
     flex: 0 0 48px;
     align-self: center;
@@ -111,6 +111,14 @@ dialog.bottom-sheet {
     appearance: none;
   }
 
+  // The sheet paints its own bar with a mask on the element, so the vertical
+  // bar _drag-handle.scss draws in ::before would print across it. This is the
+  // whole cost of one class serving both hosts, and it is cheaper than a
+  // `horizontal` modifier whose values M3 does not publish.
+  > .drag-handle::before {
+    content: none;
+  }
+
   > :is(h1, h2, h3, h4, h5, h6) {
     padding-top: 8px;
   }

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

@@ -0,0 +1,358 @@
+@use "sass:map";
+@use "../abstracts" as *;
+
+// Material 3 Expressive button groups: standard and connected, each across
+// xsmall through xlarge. Direct children can be common buttons or icon
+// buttons. A size on the group propagates to children unless a child has an
+// explicit size of its own.
+//
+// ButtonGroup supplies standard-group width redistribution for every group.
+// Toggle groups opt into managed selection with `data-selection="single|multiple"`;
+// groups without it retain native action-button semantics. Native buttons keep
+// their normal Tab, Space, and Enter behavior. The container may use
+// `role="group"` and an accessible name, but never a composite role such as
+// `toolbar` because this component has no roving-focus or arrow-key contract.
+//
+// Standard groups keep separate items and grow/reshape the pressed one.
+// Connected groups fill their available width, divide it evenly, keep a 2dp
+// seam, and morph the shared corners. Toggle selection changes color, shape,
+// and icon fill so color is never the only cue.
+$_item: ":is(button, a.button)";
+$_label-item: ":is(button:not(.icon-button), a.button)";
+$_filled-item: ":where(.filled, :not(.elevated, .filled, .tonal, .outlined, .text))";
+$_toggle-item: ":is(button:not(.icon-button):not(.text), a.button:not(.text), .icon-button:is(.filled, .tonal, .outlined))";
+
+// The size classes, as one `:not()` argument list - which takes the weight of
+// a single class, not five. An item carrying its own size class sets the
+// geometry tokens on itself and beats the group by inheritance; the type role
+// has no such mechanism, so the group's rule has to step aside by selector or
+// an `xlarge` item inside a `medium` group gets xlarge geometry and medium
+// type.
+$_sized: ".xsmall, .small, .medium, .large, .xlarge";
+
+// md.comp.button-group.standard.<size>.between-space
+$_standard-space: (
+  "xsmall": 18px,
+  "small": 12px,
+  "medium": 8px,
+  "large": 8px,
+  "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.
+$_connected-corners: (
+  "xsmall": (inner: 4px, pressed: 4px),
+  "small": (inner: 8px, pressed: 4px),
+  "medium": (inner: 8px, pressed: 4px),
+  "large": (inner: 16px, pressed: 12px),
+  "xlarge": (inner: 20px, pressed: 16px),
+);
+
+@mixin _disabled-toggle {
+  @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;
+}
+
+.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;
+  // 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
+  );
+
+  display: flex;
+  align-items: center;
+  gap: var(--md-comp-button-group-between-space);
+
+  // The size axis. A group sizes its own items by rewriting the button
+  // tokens, which the items inherit - so a size is written once, on the
+  // group, and a button that wants to differ still overrides it with its own
+  // size class. The type role cannot travel that way: `btn` states a
+  // font-size of its own, so it is set on the items.
+  @each $name, $s in $button-sizes {
+    &.#{$name} {
+      @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)};
+
+      > #{$_label-item}:not(#{$_sized}) {
+        @include typescale(map.get($s, label));
+      }
+
+      > .icon-button:not(#{$_sized}) {
+        @include icon-button-size($name);
+      }
+
+      > .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)};
+      }
+
+      > .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)};
+      }
+    }
+
+    // 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)};
+    }
+  }
+
+  > #{$_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;
+  }
+
+  // Every item owns a centered 48dp minimum hit target. For M/L/XL this is a
+  // no-op because the visible container already exceeds it; the unconditional
+  // rule also covers a default-small group and explicit XS/S child overrides.
+  > #{$_item}::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    min-width: 48px;
+    min-height: 48px;
+    translate: -50% -50%;
+  }
+
+  &:not(.connected) > #{$_item} {
+    --_corner: var(--md-comp-button-group-item-shape-round);
+    border-radius: var(--_corner);
+  }
+
+  &.square:not(.connected) > #{$_item} {
+    --_corner: var(--md-comp-button-group-item-shape-square);
+  }
+
+  &:not(.connected) > #{$_item}[aria-pressed=true] {
+    --_corner: var(--md-comp-button-group-item-shape-square);
+  }
+
+  &.square:not(.connected) > #{$_item}[aria-pressed=true] {
+    --_corner: var(--md-comp-button-group-item-shape-round);
+  }
+
+  // Toggle-button colors come from md.comp.button.<style>.{unselected,selected}.
+  // 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);
+  }
+
+  > #{$_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);
+  }
+
+  > #{$_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);
+  }
+
+  > #{$_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);
+  }
+
+  > #{$_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);
+  }
+
+  > #{$_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);
+  }
+
+  > #{$_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);
+  }
+
+  > #{$_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);
+  }
+
+  > #{$_toggle-item}[aria-pressed]:hover {
+    background-color: color-mix(
+      in oklab,
+      var(--_toggle-state-color) state-opacity("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)
+    );
+  }
+
+  > #{$_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)
+    );
+  }
+
+  > #{$_label-item}#{$_filled-item}[aria-pressed]:is(:disabled, [disabled], .disabled),
+  > #{$_label-item}:is(.tonal, .elevated)[aria-pressed]:is(:disabled, [disabled], .disabled),
+  > .icon-button:is(.filled, .tonal)[aria-pressed]:is(:disabled, [disabled], .disabled),
+  > #{$_label-item}.outlined[aria-pressed=true]:is(:disabled, [disabled], .disabled),
+  > .icon-button.outlined[aria-pressed=true]:is(:disabled, [disabled], .disabled) {
+    @include _disabled-toggle;
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+    border-color: transparent;
+  }
+
+  > #{$_label-item}.outlined[aria-pressed=false]:is(:disabled, [disabled], .disabled),
+  > .icon-button.outlined[aria-pressed=false]:is(:disabled, [disabled], .disabled) {
+    @include _disabled-toggle;
+    background-color: transparent;
+    border-color: var(--md-sys-color-outline-variant);
+  }
+
+  > #{$_item}[aria-pressed=true] > #{$icon} {
+    --md-icon-fill: 1;
+  }
+
+  // ButtonGroup measures the pressed item and takes its 15% growth from the
+  // immediate neighbors, keeping the standard group's total width stable.
+  // CSS owns only the simultaneous shape change.
+  &:not(.connected) > #{$_item}:is(:active, .button-group-pressed),
+  &.square:not(.connected) > #{$_item}[aria-pressed=true]:is(:active, .button-group-pressed) {
+    --_corner: var(--md-comp-button-group-pressed-item-shape);
+  }
+
+  // Connected. Emitted after the size rules on purpose: `.button-group.medium`
+  // and `.button-group.connected` are both two classes, so source order is the
+  // 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-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%;
+
+    @each $name, $c in $_connected-corners {
+      &.#{$name} {
+        --md-comp-button-group-inner-corner-corner-size: #{map.get($c, inner)};
+        --md-comp-button-group-pressed-inner-corner-corner-size: #{map.get($c, pressed)};
+      }
+    }
+
+    &.square {
+      --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.
+    > #{$_item} {
+      --_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);
+
+      &[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);
+      }
+
+      &:is(:active, .button-group-pressed) {
+        --_corner: var(--md-comp-button-group-pressed-inner-corner-corner-size);
+      }
+
+      // Logical, so the ends of the row are the ends of the row in RTL too.
+      &:first-child {
+        border-start-start-radius: var(--_outer-corner);
+        border-end-start-radius: var(--_outer-corner);
+      }
+
+      &:last-child {
+        border-start-end-radius: var(--_outer-corner);
+        border-end-end-radius: var(--_outer-corner);
+      }
+    }
+  }
+}
+
+// The press grow and the corner morph are both motion, and the only motion
+// this component has.
+@media (prefers-reduced-motion: reduce) {
+  .button-group > #{$_item} {
+    transition: none;
+  }
+}