@expressivecss/expressive 0.7.0 → 0.9.0

package/src/sass/components/_panes.scss

@@ -7,7 +7,7 @@
 //
 // Canonical Layouts:
 //   1. List-Detail (.list-detail, .panes.list-detail):
-//      - Compact (< 840px / < 601px): Single pane visible at a time.
+//      - Compact and Medium (< 840px): Single pane visible at a time.
 //      - Expanded (>= 840px): 360dp list pane + 1fr detail pane.
 //   2. Supporting Pane (.supporting-pane-layout, .panes.supporting):
 //      - 1fr primary pane + 360-400dp supporting pane (on trailing or leading side).
@@ -20,6 +20,7 @@
 //     with surface-container-low and a 24dp gap.
 //
 // Tokens follow https://m3.material.io/foundations/adaptive-design/canonical-layouts
+//   --md-comp-pane-margin                    16px Compact / 24px Medium+
 //   --md-comp-pane-gap                       24px
 //   --md-comp-pane-divider-color             outline-variant
 //   --md-comp-pane-container-color           surface
@@ -51,10 +52,25 @@
   background-color: var(--md-comp-pane-container-color);
   color: var(--md-sys-color-on-surface);
 
-  // Default (Single-Pane on compact screens < 840px / < 601px)
+  // Default: single pane on Compact and Medium windows (< 840px).
   grid-template-columns: 1fr;
   gap: 0;
 
+  // M3 layout margins are the inline space between content and the window
+  // edges. Keep the full-height pane model and inset layouts below Large.
+  @include bp-down("medium") {
+    --md-comp-pane-margin: 16px;
+    width: calc(100% - (2 * var(--md-comp-pane-margin)));
+    margin-inline: var(--md-comp-pane-margin);
+  }
+
+  @include bp-between("medium", "expanded") {
+    --md-comp-pane-margin: 24px;
+    width: calc(100% - (2 * var(--md-comp-pane-margin)));
+    margin-inline: var(--md-comp-pane-margin);
+    gap: var(--md-comp-pane-gap);
+  }
+
   // Panes in compact mode: list/primary visible by default, detail/supporting hidden
   // unless marked .active
   > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
@@ -75,7 +91,7 @@
   }
 
   // Expanded Viewports: Dual-pane side-by-side (via container query or breakpoint)
-  @media (width >= 840px) {
+  @include bp-up("expanded") {
     grid-template-columns: var(--md-comp-pane-list-width) 1fr;
     gap: 0;
 
@@ -92,6 +108,29 @@
       display: flex !important;
     }
   }
+
+  // This follows both two-pane rules so their base gap cannot cancel the M3
+  // Expanded spacer when the viewport and container queries both match.
+  @include bp-between("expanded", "large") {
+    --md-comp-pane-margin: 24px;
+    width: calc(100% - (2 * var(--md-comp-pane-margin)));
+    margin-inline: var(--md-comp-pane-margin);
+    gap: var(--md-comp-pane-gap);
+  }
+
+  @include bp-between("large", "extra-large") {
+    --md-comp-pane-margin: 24px;
+    width: calc(100% - (2 * var(--md-comp-pane-margin)));
+    margin-inline: var(--md-comp-pane-margin);
+    gap: var(--md-comp-pane-gap);
+  }
+
+  @include bp-up("extra-large") {
+    --md-comp-pane-margin: 24px;
+    width: calc(100% - (2 * var(--md-comp-pane-margin)));
+    margin-inline: var(--md-comp-pane-margin);
+    gap: var(--md-comp-pane-gap);
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -101,7 +140,7 @@
 // 1. Supporting Pane Layout
 .supporting-pane-layout,
 .panes.supporting {
-  @media (width >= 840px) {
+  @include bp-up("expanded") {
     grid-template-columns: 1fr var(--md-comp-pane-supporting-width);
   }
 
@@ -112,7 +151,7 @@
   // Leading supporting pane (.start / .left)
   &.start,
   &.left {
-    @media (width >= 840px) {
+    @include bp-up("expanded") {
       grid-template-columns: var(--md-comp-pane-supporting-width) 1fr;
     }
 
@@ -125,7 +164,7 @@
 // 2. Equal / Proportional Pane Layout
 .panes.equal,
 .pane-layout.equal {
-  @media (width >= 840px) {
+  @include bp-up("expanded") {
     grid-template-columns: 1fr 1fr;
   }
 
@@ -137,7 +176,7 @@
 // 3. Three-Pane Layout (List + Primary Focus + Supporting)
 .panes.three-pane,
 .pane-layout.three-pane {
-  @media (width >= 1200px) {
+  @include bp-up("large") {
     grid-template-columns: var(--md-comp-pane-list-width) 1fr var(--md-comp-pane-supporting-width);
   }
 
@@ -181,7 +220,7 @@
 // ---------------------------------------------------------------------------
 :is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.separated, .floating) {
   > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):not(:last-child) {
-    @media (width >= 840px) {
+    @include bp-up("expanded") {
       border-inline-end: 1px solid var(--md-comp-pane-divider-color);
     }
 
@@ -231,7 +270,9 @@
       text-overflow: ellipsis;
     }
 
-    > :is(button, a.button):has(> i:only-child) {
+    // See _dialog: `:only-child` cannot see a text-node label, so `.button`
+    // is the opt-out for an icon action that also carries one.
+    > :is(button:not(.button, .icon-button), a.button):has(> #{$icon}:only-child) {
       flex: 0 0 48px;
       box-sizing: border-box;
       width: 48px;
@@ -244,7 +285,7 @@
       color: var(--md-sys-color-on-surface-variant);
       box-shadow: none;
 
-      > i {
+      > #{$icon} {
         font-size: 24px;
         width: 24px;
         height: 24px;
@@ -252,7 +293,7 @@
       }
 
       &:hover {
-        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
       }
 
       &:focus-visible {

package/src/sass/components/{_preloader.scss → _progress.scss}

@@ -17,6 +17,9 @@
 //   --md-comp-progress-circular-size    48px
 //   --md-comp-progress-circular-thickness  4px
 
+// M3 names this component "Progress indicators", linear and circular. The
+// class is `.progress`; `.preloader` is the Materialize name for the circular
+// one and stays as an alias, as does `.progress.circular`.
 .progress,
 .preloader {
   --md-comp-progress-track: var(--md-sys-color-secondary-container);
@@ -78,8 +81,11 @@ progress.progress {
   transition: width 0.3s linear;
 }
 
-// Bare div.progress with a value token, no child.
-.progress:not(:is(progress)):not(:has(> .determinate, > .indeterminate)) {
+// Bare div.progress with a value token, no child. :not(.circular) because a
+// `<span class="progress circular">` is not a <progress>, has no determinate
+// child, and so matched this too - drawing a linear fill on top of the conic
+// circular indicator.
+.progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)) {
   &::after {
     content: "";
     position: absolute;
@@ -133,7 +139,9 @@ progress.progress:indeterminate {
 // Circular — one element
 // ---------------------------------------------------------------------------
 
-.preloader {
+// The circular indicator. `.progress.circular` is the M3-aligned name;
+// `.preloader` is the Materialize one and still works.
+:is(.preloader, .progress.circular) {
   box-sizing: border-box;
   display: inline-block;
   width: var(--md-comp-progress-circular-size);

package/src/sass/components/_scrim.scss

@@ -0,0 +1,37 @@
+@use "../abstracts" as *;
+
+// Scrim (M3 Expressive). A foundation, not a component: there is no markup an
+// author writes to get one. It is the wash a modal surface puts behind itself
+// to dim what it covers, and this is the one place its value is decided -
+// dialogs, both sheets, the navigation drawer and the modal navigation rail
+// all consume the same custom property - the sheets through the
+// `dialog::backdrop` rule they already share, so they declare nothing.
+//
+// https://m3.material.io/styles/color/roles - the `scrim` role, at 32%.
+//
+// Blur is deliberately not part of it. Only the basic dialog frosts what is
+// behind it (`--md-comp-basic-dialog-scrim-blur`); the drawer and the rail
+// slide over the page and would smear it.
+//
+// Declared on :root rather than per surface because four of the five consumers
+// paint into `::backdrop`, which has no box of its own to hang a token on -
+// only the rail uses a `::before`. `::backdrop` inherits from the element it
+// belongs to, so setting this on one `<dialog>` still dims only that one.
+//
+// Resolving the mix here narrows one thing, deliberately: `--md-sys-color-scrim`
+// is substituted at :root, so overriding *that* on a subtree no longer reaches a
+// scrim below it. Override it at the root to move every scrim, or set
+// `--md-comp-scrim-color` on a surface to move one. A scrim is painted by a
+// top-layer or fixed box covering the viewport, so it has no meaningful subtree
+// to be rethemed by in the first place.
+
+// `:host` alongside `:root` for the reason tokens/_theme.scss and
+// tokens/_state.scss carry it: a sheet loaded inside a shadow root cannot reach
+// its own host with `:root`, and the token would be undefined there - taking
+// `background-color` down with it, so the surface would show no scrim at all.
+// The rules this replaced read `--md-sys-color-scrim`, which is declared on
+// both, so :root alone would have narrowed what already worked.
+:root,
+:host {
+  --md-comp-scrim-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+}

package/src/sass/components/_search.scss

@@ -0,0 +1,259 @@
+@use "../abstracts" as *;
+
+// Search: the M3 search bar and the view it expands into.
+//
+// Anatomy is the HTML. A `<search class="search-bar">` is the bar - an
+// optional leading icon or icon button, an `<input type="search">`, and
+// optional trailing actions. `.searchbar` is the pre-1.0 alias.
+//
+// `.search-view` is the surface the bar expands into, and it is two different
+// native elements because the two variants want two different behaviours:
+//
+//   docked       a plain element inside the bar, shown by dropping `hidden`.
+//                The bar keeps focus, which is the whole point - a modeless
+//                `<dialog>.show()` moves focus into the dialog and would take
+//                the caret out of the input the user is typing in.
+//   full-screen  a `<dialog class="search-view full-screen">` opened with
+//                `showModal()`, so Escape and light dismiss come from the
+//                platform and `behaviors/dialogs.ts` rather than from here.
+//
+// Suggestions are Autocomplete's, not this component's. Put `autocomplete` on
+// the bar's input and the combobox, its listbox and the keyboard contract
+// behind them are the ones already implemented and tested. The search view
+// holds content - recent searches, results, filters - and takes no composite
+// role of its own; see SEMANTICS.md.
+//
+// Tokens follow md.comp.search-bar.* / md.comp.search-view.* at DSP 34.0.21
+//   bar          56dp, corner-full, surface-container-high, elevation 3
+//   input        body-large / on-surface; the placeholder is M3's supporting
+//                text, hence on-surface-variant
+//   icons        24dp; leading on-surface, trailing on-surface-variant
+//   avatar       30dp, corner-full
+//   spacing      16dp at an end with no action, 4dp at one with an icon
+//                button, which carries its own 12dp inset
+//   view         surface-container-high, corner-medium, elevation 3, 2dp
+//                below the bar
+//   full-screen  fills the viewport, no corners, 72dp header
+//   divider      outline
+//
+// The bar and the docked view are both the *contained* (Expressive) variant,
+// which is what the 4dp/16dp spacing pair and the 2dp gap belong to; taking
+// the shape from the divided/baseline set instead would mix two anatomies.
+// `--md-comp-search-view-max-height` is a framework knob, not a DSP token -
+// M3 sizes the docked view by its content and leaves the cap to the platform.
+//
+// Nest descendants inside these blocks, and keep `$_bar` wrapped in `:is()` -
+// a bare list interpolated into `.search-view > #{$_bar}` breaks out of its
+// context and emits a top-level rule.
+
+$_bar: ":is(.search-bar, .searchbar)";
+
+#{$_bar} {
+  --md-comp-search-bar-container-color: var(--md-sys-color-surface-container-high);
+  --md-comp-search-bar-container-height: 56px;
+  --md-comp-search-bar-container-shape: 9999px;
+  --md-comp-search-bar-leading-space: 16px;
+  --md-comp-search-bar-trailing-space: 16px;
+  --md-comp-search-bar-icon-label-space: 16px;
+  --md-comp-search-bar-icon-size: 24px;
+  --md-comp-search-bar-avatar-size: 30px;
+
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--md-comp-search-bar-icon-label-space);
+  width: 100%;
+  min-height: var(--md-comp-search-bar-container-height);
+  padding-inline: var(--md-comp-search-bar-leading-space)
+    var(--md-comp-search-bar-trailing-space);
+  border-radius: var(--md-comp-search-bar-container-shape);
+  background-color: var(--md-comp-search-bar-container-color);
+  color: var(--md-sys-color-on-surface);
+  @include z-depth("3");
+
+  // An icon *button* already insets its glyph by 12dp, so M3 pulls the end
+  // space in to 4dp beside one. A bare glyph keeps the full 16dp.
+  // A `form[method="dialog"]` wrapper is spelled out rather than folded into
+  // the compound: `:has()` may not be nested inside `:has()`, and because the
+  // argument list is forgiving, `form:has(> .icon-button)` in there would be
+  // dropped silently rather than reported.
+  &:has(> .icon-button:first-child),
+  &:has(> form:first-child > .icon-button) {
+    --md-comp-search-bar-leading-space: 4px;
+  }
+
+  // The docked view is a child of the bar but out of flow, so the last
+  // *control* is the last child that is not it - `:last-child` alone reads the
+  // view as the trailing element and leaves the icon button on 16dp.
+  &:has(> .icon-button:nth-last-child(1 of :not(.search-view))),
+  &:has(> form:nth-last-child(1 of :not(.search-view)) > .icon-button) {
+    --md-comp-search-bar-trailing-space: 4px;
+  }
+
+  // A leading or trailing action wrapped in `form[method="dialog"]` - how the
+  // full-screen view closes itself without script.
+  > form {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin: 0;
+  }
+
+  > #{$icon} {
+    flex: 0 0 auto;
+    font-size: var(--md-comp-search-bar-icon-size);
+    width: var(--md-comp-search-bar-icon-size);
+    height: var(--md-comp-search-bar-icon-size);
+    line-height: var(--md-comp-search-bar-icon-size);
+    color: var(--md-sys-color-on-surface);
+  }
+
+  > #{$icon}:nth-last-child(1 of :not(.search-view)) {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  // An account avatar, the one non-icon element M3 puts in the bar. A tappable
+  // one goes inside a button, which brings its own 48dp target.
+  > img {
+    flex: 0 0 auto;
+    width: var(--md-comp-search-bar-avatar-size);
+    height: var(--md-comp-search-bar-avatar-size);
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  // The input carries none of the text-field chrome: no underline, no floating
+  // label, no 56dp block of its own. It is the bar that is the container.
+  > input {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    box-shadow: none;
+    color: var(--md-sys-color-on-surface);
+    @include typescale("body-large");
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    // The UA's own clear affordance duplicates the trailing icon button M3
+    // asks for, and cannot be styled to match it.
+    &::-webkit-search-cancel-button {
+      appearance: none;
+    }
+  }
+
+  // Pre-1.0 `.searchbar` sat in a navbar beside a fixed drawer.
+  &.has-sidebar {
+    margin-inline-start: 0;
+
+    @include bp-up("expanded") {
+      // `width: auto`, because the margin sits *outside* the base bar's
+      // `width: 100%`: the two together make the bar 100% + 300px wide and
+      // push its trailing edge past the viewport, on exactly the fixed-drawer
+      // layout this rule exists to preserve. The legacy bar had no width of
+      // its own, so the margin shrank it.
+      width: auto;
+      margin-inline-start: 300px;
+    }
+  }
+}
+
+.search-view {
+  --md-comp-search-view-container-color: var(--md-sys-color-surface-container-high);
+  --md-comp-search-view-container-shape: 12px;
+  --md-comp-search-view-header-height: 56px;
+  --md-comp-search-view-divider-color: var(--md-sys-color-outline);
+  --md-comp-search-view-bar-results-gap: 2px;
+  --md-comp-search-view-max-height: 60vh;
+
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 1;
+  inset-inline: 0;
+  top: calc(100% + var(--md-comp-search-view-bar-results-gap));
+  display: flex;
+  flex-direction: column;
+  max-height: var(--md-comp-search-view-max-height);
+  // The surface scrolls when its content is loose (a <div> of results); when
+  // the content is a `.list` the list scrolls instead, so a header and its
+  // divider stay put. Which of the two moves depends on the composition, so
+  // both declare it.
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border-radius: var(--md-comp-search-view-container-shape);
+  background-color: var(--md-comp-search-view-container-color);
+  color: var(--md-sys-color-on-surface);
+  @include z-depth("3");
+
+  // Two ways this surface is closed, and an author `display` beats both of the
+  // UA rules that do the hiding - `[hidden] { display: none }` for the docked
+  // element and `dialog:not([open]) { display: none }` for the full-screen
+  // one. The second is the one that bites: without it a closed <dialog> paints
+  // an opaque panel over the whole viewport, and no visual baseline exists to
+  // catch it on the change that introduces the page.
+  &[hidden],
+  &:not([open]):is(dialog) {
+    display: none;
+  }
+
+  // The view's own header is a search bar with the pill taken off - the same
+  // markup, so nothing new to learn for the full-screen variant.
+  > #{$_bar} {
+    flex: 0 0 auto;
+    min-height: var(--md-comp-search-view-header-height);
+    border-radius: 0;
+    background-color: transparent;
+    @include z-depth("0");
+  }
+
+  > hr {
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    width: 100%;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background-color: var(--md-comp-search-view-divider-color);
+  }
+
+  > .list {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    margin: 0;
+    padding-block: 8px;
+  }
+}
+
+// Full-screen. The UA caps a modal dialog at `calc(100% - 2em - 6px)`, so
+// width: 100% alone leaves a strip of scrim down the side - the same clearing
+// dialog.max and the bottom sheet already do.
+.search-view.full-screen {
+  --md-comp-search-view-container-shape: 0;
+  --md-comp-search-view-header-height: 72px;
+  --md-comp-search-view-max-height: none;
+
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  height: 100%;
+  margin: 0;
+
+  &::backdrop {
+    background: none;
+    backdrop-filter: none;
+  }
+}

package/src/sass/components/_segmented-buttons.scss

@@ -0,0 +1,188 @@
+@use "../abstracts" as *;
+
+// Segmented buttons.
+//
+// Anatomy is the HTML. A <fieldset class="segmented-button"> is the group and
+// its <legend> names it. Each segment is an <input> and the
+// <label class="segment"> beside it, tied by id: radios make the group
+// single-select, checkboxes make it multi-select, and the input type is the
+// whole difference.
+//
+// The control is the label's *sibling*, not its child, which is the same
+// arrangement filter chips use and for the same reason: to
+// forms/_radio-buttons and forms/_checkboxes, a <label> wrapping one of those
+// inputs *is* a radio or a checkbox. They would paint a 20dp ring on the
+// input, stretch the label to a 48dp row and, for a checkbox, mask a
+// checkmark onto its ::before - none of which a segment wants, and all of
+// which outweigh a segment rule that only names two classes.
+//
+// Nothing here is scripted, and that is the point. The browser owns the
+// checked state and, for radios, the arrow-key model a single-select group
+// promises: SEMANTICS rule 2 asks that a composite keyboard contract be
+// implemented before the role is claimed, and the native one is implemented
+// by the platform. No ARIA role is declared, so none is withheld.
+//
+// Tokens follow M3, md.comp.outlined-segmented-button.* (DSP 34.0.21):
+//   container    40dp, corner.full, 1dp outline, dividers between segments
+//   segment      12dp insets, 18dp icon, 8dp icon-label space, label-large
+//   unselected   on-surface on a transparent container
+//   selected     on-secondary-container on secondary-container
+//   state layer  8% hover, 10% press (focus is the ring, not a layer)
+//   disabled     label and icon at 38%, outline at 12%
+.segmented-button {
+  --md-comp-outlined-segmented-button-container-height: 40px;
+  --md-comp-outlined-segmented-button-container-shape: 9999px;
+  --md-comp-outlined-segmented-button-outline-width: 1px;
+  --md-comp-outlined-segmented-button-outline-color: var(--md-sys-color-outline);
+  --md-comp-outlined-segmented-button-leading-space: 12px;
+  --md-comp-outlined-segmented-button-trailing-space: 12px;
+  --md-comp-outlined-segmented-button-icon-size: 18px;
+  --md-comp-outlined-segmented-button-icon-label-space: 8px;
+  --md-comp-outlined-segmented-button-label-text-color: var(--md-sys-color-on-surface);
+  --md-comp-outlined-segmented-button-selected-container-color: var(--md-sys-color-secondary-container);
+  --md-comp-outlined-segmented-button-selected-label-text-color: var(--md-sys-color-on-secondary-container);
+
+  // A <fieldset> arrives with a border, 16dp of padding and a min-width; the
+  // group's own outline replaces all three.
+  box-sizing: border-box;
+  // Equal columns across whatever inline size the group is given, which is
+  // what M3 specifies - material-web's own set is `grid-auto-columns: 1fr` on
+  // a full-width grid, not a shrink-wrapped row. Constrain the group with a
+  // width or a wrapper when it should be narrower than its container.
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  border: var(--md-comp-outlined-segmented-button-outline-width) solid
+    var(--md-comp-outlined-segmented-button-outline-color);
+  border-radius: var(--md-comp-outlined-segmented-button-container-shape);
+  // Squares the segments off against the pill, so the end segments' fill and
+  // their focus ring both stop at the outline.
+  overflow: hidden;
+
+  & + & {
+    margin-block-start: 24px;
+  }
+
+  // M3's anatomy has no visible group label. A set of radios is only a set
+  // because a <fieldset> says so, and a <fieldset> is only named because of
+  // its <legend> — so the legend is the accessible name and nothing else.
+  //
+  // There is deliberately no modifier that shows it. The root is both the
+  // fieldset and the grid of segments, so a legend back in flow is another
+  // column beside them; putting it above the pill would take an inner
+  // wrapper the markup does not have. A group that needs a visible label
+  // writes one before the fieldset and leaves the legend as the name.
+  > legend {
+    @include visually-hidden();
+  }
+
+  // The control carries the state and the form value; the label is the
+  // segment. Clipped rather than `display: none` so it stays focusable — and
+  // so the arrow keys still move between the radios.
+  > input {
+    @include visually-hidden();
+    border: 0;
+    appearance: none;
+  }
+
+  > .segment {
+    // Read back by the state layer below, so hover and press are one rule
+    // each rather than one per selected/unselected pair.
+    --_label-color: var(--md-comp-outlined-segmented-button-label-text-color);
+    --_container-color: transparent;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--md-comp-outlined-segmented-button-icon-label-space);
+    margin: 0;
+    min-block-size: calc(
+      var(--md-comp-outlined-segmented-button-container-height) - 2 *
+        var(--md-comp-outlined-segmented-button-outline-width)
+    );
+    padding-inline: var(--md-comp-outlined-segmented-button-leading-space)
+      var(--md-comp-outlined-segmented-button-trailing-space);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    color: var(--_label-color);
+    background-color: var(--_container-color);
+    transition: background-color .2s ease, color .2s ease;
+    @include typescale("label-large");
+  }
+
+  // Divider, not a border on every segment: the group's own outline is the
+  // outer edge, so only the joins are drawn. `:first-of-type` counts labels,
+  // and every segment is one — the legend and the inputs are other types.
+  > .segment:not(:first-of-type) {
+    border-inline-start: var(--md-comp-outlined-segmented-button-outline-width) solid
+      var(--md-comp-outlined-segmented-button-outline-color);
+  }
+
+  // Selected is the input's business. The adjacency is what lets the label
+  // read a state only the control has, with no class for the page to sync.
+  > input:checked + .segment {
+    --_label-color: var(--md-comp-outlined-segmented-button-selected-label-text-color);
+    --_container-color: var(--md-comp-outlined-segmented-button-selected-container-color);
+  }
+
+  > .segment > #{$icon} {
+    font-size: var(--md-comp-outlined-segmented-button-icon-size);
+    width: var(--md-comp-outlined-segmented-button-icon-size);
+    height: var(--md-comp-outlined-segmented-button-icon-size);
+    line-height: var(--md-comp-outlined-segmented-button-icon-size);
+    color: inherit;
+  }
+
+  > input:not(:disabled) + .segment {
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--_label-color) state-opacity("hover"),
+        var(--_container-color)
+      );
+    }
+
+    &:active {
+      background-color: color-mix(
+        in oklab,
+        var(--_label-color) state-opacity("pressed"),
+        var(--_container-color)
+      );
+    }
+  }
+
+  // The ring is drawn inside the segment: `overflow: hidden` above would clip
+  // an outline sitting outside it, and the end segments would lose half of it
+  // to the pill's own corner.
+  > input:focus-visible + .segment {
+    @include focus-ring();
+    outline-offset: -3px;
+  }
+
+  > input:disabled + .segment {
+    --_label-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    cursor: default;
+  }
+}
+
+.segmented-button:disabled {
+  --md-comp-outlined-segmented-button-outline-color: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) 12%,
+    transparent
+  );
+  --md-comp-outlined-segmented-button-label-text-color: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) 38%,
+    transparent
+  );
+
+  > .segment {
+    cursor: default;
+  }
+}