@rcarls/rc-theme-substrate 0.0.0-next-20260921045401

package/CHANGELOG.md

@@ -0,0 +1,358 @@
+# @rcarls/rc-theme-substrate
+
+## 0.0.0-next-20260921045401
+
+### Minor Changes
+
+- 079e025: Standardize component styling contracts for the breaking 0.7 release.
+
+  BREAKING CHANGE: Rename the Markdown editor's `--rme-*` properties to
+  `--rc-markdown-editor-*`, `--rc-app-bar-background` to `--rc-app-bar-bg`,
+  `--rc-textarea-radius` to `--rc-textarea-border-radius`, the transfer-list
+  `--rc-transfer-list-panel-*` properties to `--rc-transfer-list-listbox-*`,
+  `--rc-chip-group-webkit-scrollbar-display` to
+  `--rc-chip-group-scrollbar-display`, and `--rc-text` to `--rc-field-text`.
+  Compatibility aliases are intentionally not provided.
+
+  BREAKING CHANGE: Replace `--rc-select-chip-padding-inline` and
+  `--rc-combobox-chip-padding-inline` with explicit `*-padding-inline-start` and
+  `*-padding-inline-end` tokens. Generated removable chips now reserve the full
+  remove target and its edge offset, so their indicator cannot overlap label text.
+
+  Add canonical app-bar elevation, transfer-list listbox radius, and textarea
+  line-action tokens. Add logical `rc-chip` inline-padding properties so themes
+  can implement Material's icon-aware spacing without overriding authored child
+  styles. Make `rc-field` consume the shared semantic token layer,
+  and place the `rc-chip` and `rc-search-bar` light-DOM structural styles in the
+  `rc-base` cascade layer so normal consumer rules override them.
+
+  Prevent decorative, `aria-hidden` trailing list content from intercepting a
+  whole-row action target, and keep segmented-list item geometry from leaking
+  into nested standard lists.
+
+  Remove unused Material navigation-rail toggle tokens and obsolete list-item
+  theme tokens. Register the segmented-button private theme seam and enforce
+  token ownership, documentation, removed-name, selector-budget, and cascade
+  layer contracts through the component architecture audit.
+
+- 4341311: Add reusable fullscreen dialogs and declarative dialog popup mode to `rc-select` and
+  `rc-combobox`. Dialog selection and creation are staged until Done, while close and Escape
+  discard the draft. Fullscreen surfaces follow the visual viewport under browser zoom and
+  software keyboards, and anchored popups now clamp to the visual viewport.
+- 2c7c80a: Give `rc-dialog` a surface styling contract.
+
+  It exposed only `--rc-dialog-scrim`, so both themes drew the surface by selecting the native
+  `<dialog>` directly. It now installs a light-DOM base stylesheet, the same pattern as `rc-button`
+  and `rc-disclosure`, and exposes minimum and maximum inline and block bounds, padding, border, radius, background,
+  foreground, and shadow, plus fullscreen-specific padding and background for the two values that
+  variant genuinely needs of its own.
+
+  Fullscreen geometry, meaning position, size, margin, radius, and shadow, stays structural rather
+  than something a theme sets: filling the visual viewport is what keeps the surface correct under browser zoom
+  and a software keyboard.
+
+  Material's explicit block bound with `overflow: hidden` moved into the base layer rather than
+  staying a theme value. It exists because Chromium does not reliably clip a scrolling element's
+  own border radius at the scroll boundary, which is a correctness fix every theme needs.
+
+  `--rc-dialog-visual-viewport-left`, `-top`, `-width`, and `-height` are no longer documented as
+  theme properties. They are geometry the component writes while a fullscreen dialog is open:
+  readable if something inside the dialog needs the same measurements, but setting them does not
+  move the dialog. They are candidates for private `--_rc-dialog-*` names in a future revision.
+
+- 4b9bfe6: Give `rc-disclosure` and `rc-accordion` a public styling contract.
+
+  Both were styled by targeting the native `<details>` element directly, so neither exposed a
+  single `--rc-*` property and no theme could change them without rewriting theme CSS. They now
+  follow the light-DOM base pattern `rc-button` and `rc-listbox` already use: `rc-disclosure`
+  installs one structural stylesheet per containing `Document` or `ShadowRoot`, in `@layer rc-base`
+  behind a `data-rc-light-dom-base` sentinel, reading documented properties with UA-like defaults.
+
+  One recipe covers both supported child forms, a bare `<details>` inside `rc-accordion` and one
+  wrapped in `rc-disclosure`, so neither theme repeats the panel rules. `rc-accordion` owns only
+  `--rc-accordion-gap`.
+
+  Motion is opt-in. `--rc-disclosure-duration` defaults to `0ms`, so a disclosure with no theme keeps
+  the platform's snap-open behavior, and the height animation runs on `::details-content` behind a
+  `@supports selector()` check. This replaces Material's `60rem` `max-block-size` ceiling, which
+  clipped content taller than the guess and made every non-summary child its own animation unit.
+
+  **Fixes a missing expand affordance in the Material theme.** It set `display: grid` on the
+  `<summary>` and then styled `summary::marker`. Any `display` other than `list-item` drops the
+  marker box, so that rule styled nothing and the theme drew no replacement: a Material disclosure
+  had no disclosure triangle at all. The base layer never sets `display` on a summary, so the
+  marker survives. A theme may still change it, as Substrate does, but only alongside a
+  replacement affordance.
+
+- 873592e: Add four directional motion tokens to the shared base contract:
+  `--rc-motion-effects-easing-enter`/`-exit` and
+  `--rc-motion-spatial-easing-enter`/`-exit`. An opening element decelerates
+  into place; a closing one accelerates out. There are no matching enter/exit
+  duration tokens; pair `-easing-exit` with an existing `-duration-fast` token
+  instead.
+
+  All three themes map the new tokens: Material pairs them with its
+  standard/emphasized decelerate and accelerate curves, Substrate keeps its one
+  curve as the enter curve and adds a generic accelerate shape for exit
+  (refined further once Substrate gets its own full spatial/effects scale), and
+  `rc-theme-win31` declares all four as `step-end`, matching its zero-motion
+  contract, so an application that loads the shared base tokens alongside
+  `rc-theme-win31` does not inherit the base defaults' real easing curves for
+  these two directions.
+
+- 7c952e2: `rc-theme-material` and `rc-theme-substrate` refine `prefers-reduced-motion:
+reduce` from removing every transition and animation to removing only
+  spatial motion; effects motion (color and opacity) is kept, shortened.
+  Vestibular harm, the reason for the preference, comes from movement across
+  the visual field; a color or opacity change doesn't trigger it, and removing
+  it too was also removing motion that aids comprehension.
+
+  Material's effects duration shortens to 50/70/100&nbsp;ms (from its full
+  150/200/300&nbsp;ms scale); Substrate's to 40/55/70&nbsp;ms, scaled down from
+  its own faster 100/160/240&nbsp;ms base. `rc-theme-win31` needs no change: it
+  already declares every duration at zero unconditionally.
+
+  Several component recipes that bypassed the shared motion scale entirely,
+  referencing a raw duration primitive directly, are rewired to the
+  appropriate effects or spatial token so this refinement actually reaches
+  them: Material's `rc-disclosure`, `rc-list-item`, `rc-bottom-sheet`'s snap
+  duration, `rc-button`'s ripple, and its shared state-layer opacity fade;
+  Substrate's `rc-listbox`, `rc-splitter`, and `rc-disclosure`. Most land on
+  their existing value exactly; `rc-button`'s ripple duration normalizes from
+  450&nbsp;ms to 500&nbsp;ms, the nearest real spatial tier.
+
+- 7549dde: Theme the nine components Substrate left without a token contract.
+
+  `rc-adaptive-menu`, `rc-carousel`, `rc-chip-group`, and `rc-scroller` had no component CSS at
+  all. `rc-toolbar` and `rc-virtual-canvas` had a file that styled the element directly without
+  declaring a single `--rc-*` property. `rc-splitter` declared two colors that mixed against the
+  bare `Canvas` and `ButtonBorder` system colors, and the dialog scrim mixed against `CanvasText`,
+  so none of the three had a value that could leave CSS.
+
+  All are themed now, and the mixes point at the theme's own surface, border, and inverse surface
+  instead of at system colors. Every new color clears WCAG AA against the surface it is drawn on,
+  most of them AAA.
+
+  The splitter keeps its existing division of labor: this theme paints it and leaves its geometry
+  to the component's own defaults.
+
+  `rc-accordion` and `rc-disclosure` are unchanged. They read no `--rc-*` property anywhere in
+  their own styles, so there is nothing for a theme to set; giving them a contract is a change to
+  those components.
+
+- 77f9c63: Fix three theme gaps where a token fell through to a system color.
+
+  **Substrate had no error color.** `--rc-field-error-color` fell through to `rc-field`'s own
+  default of `Mark`, the system color for the background of highlighted text, which renders as
+  pure yellow and measured 1.07:1 against the field. Validation worked, the message was in the
+  accessibility tree, and it could not be read. Substrate now ships `--substrate-error`, held
+  at hue 25 so it reads as red rather than as a darker shade of the orange primary at hue 48,
+  and the bridge maps it. Both modes clear 7:1.
+
+  Every remaining error fallback of `Mark`, in `rc-field` and in the Material field styles, now
+  falls back to the validation red a user agent uses for an invalid control. The `Mark` usages
+  inside `forced-colors` blocks are unchanged, where a system color is correct.
+
+  **Material never set `--rc-button-text`.** `rc-select`, `rc-combobox`, and `rc-menu-button`
+  read it directly for text drawn over `--rc-button-bg`, which Material sets to the primary
+  fill, so the `ButtonText` fallback gave 3.26:1 in light and 1.70:1 in dark. It now follows
+  `--md-sys-color-on-primary` alongside `--rc-button-color`, giving 6.44:1 and 7.71:1.
+
+  **Substrate referenced three tokens it never declared.** `--substrate-inverse-surface`,
+  `--substrate-inverse-on-surface`, and `--substrate-radius-pill` were used by the bridge and
+  component styles but missing from `defaults.css`, leaving `rc-snackbar` on system colors and
+  the bottom sheet handle on a literal. All three are declared, and a `defaults` test now
+  asserts that every referenced token exists.
+
+- 1207f3c: Theme `rc-field`, the last component Substrate left without coverage.
+
+  The field takes Substrate's palette and the hover, focus, and invalid treatment
+  its other form controls already share, so it reads as one of them. `rc-field`
+  keeps owning its layout, invalid border, disabled opacity, focus outline, and
+  forced-colors fallbacks; the theme only supplies values.
+
+  An `rc-select`, `rc-combobox`, or `rc-textarea` acting as the field's control
+  provider now stops drawing its own border, background, and focus ring, which
+  otherwise nested visibly inside the field's. A standalone control outside a
+  field is unaffected.
+
+  The field also fills its container up to a readable measure instead of
+  shrink-wrapping, so a provider-backed field with no value no longer collapses
+  to its toggle.
+
+- 58f4e71: `rc-theme-substrate` and `rc-theme-win31` now map the full shared
+  spatial/effects motion scale that `rc-theme-material` already implements,
+  closing a gap where each declared only its own single compatibility duration.
+
+  Substrate adds a small, quicker scale of its own: 100/160/240&nbsp;ms for
+  effects and 160/240/320&nbsp;ms for spatial, with its existing single easing
+  curve as the spatial curve (it is already decelerate-shaped) and `ease-out`
+  for effects. The compatibility token now follows the effects default rather
+  than its own literal, matching the shared base contract's own convention.
+  The one remaining hardcoded duration, `rc-list-item`'s 100&nbsp;ms row
+  transition, now reads from the effects-fast token. Substrate's
+  `prefers-reduced-motion` override moves from the bridge layer into
+  `components/modes.css`, in the components layer, matching where the other
+  two themes keep their mode overrides; a cascade layer test now proves the
+  later layer's override wins rather than assuming it.
+
+  win31 declares all thirteen shared tokens, plus the four directional ones
+  added last release, at zero duration with `step-end` easing. Previously only
+  the single compatibility token was set, so an application loading the shared
+  base tokens alongside this theme inherited base's real 180/300/450&nbsp;ms
+  spatial motion for every other token in the scale, silently contradicting the
+  theme's own zero-motion contract. `rc-chip`'s existing zero-duration override
+  gets its matching `step-end` easing token.
+
+  Verifying that claim surfaced a limit worth knowing about even after this
+  fix: it holds only when the theme class is applied to a container, the
+  documented pattern, not to `<html>`. The shared `base.css` declares no cascade
+  layer, so its `:root` values outrank any theme layer whenever both target the
+  same element, which happens only when the theme class sits on `<html>` itself.
+  No theme package can fix this by declaring more tokens; see the styling guide
+  for details.
+
+### Patch Changes
+
+- 114e38a: `rc-progress`'s determinate fill transition is now themeable through two new
+  CSS custom properties, `--rc-progress-fill-transition-duration` (default
+  `150ms`) and `--rc-progress-fill-transition-easing` (default `ease-out`),
+  replacing a hardcoded `0.15s ease-out` no theme could reach.
+
+  The indeterminate loop's easing changes from `ease-in-out` to `linear`. A
+  loop has no beginning or end to decelerate into or accelerate out of, so an
+  eased loop visibly pulses at each cycle boundary; Material 3 specifies linear
+  easing for indeterminate loops for the same reason.
+
+  `rc-theme-material` and `rc-theme-substrate` map the new duration/easing
+  properties to their effects-fast motion tokens; `rc-theme-win31` already sets
+  `transition: none` on the fill part directly and needs no change.
+
+- fef89dc: Move the segmented appearance into the component behind one switch.
+
+  Turning the native fieldset into a segmented control took 27 `--_rc-*`
+  declarations that every theme had to restate, 23 of them byte-identical. Two of
+  those blocks were accessibility recipes rather than taste: the visually hidden
+  legend that keeps the group's accessible name, and the hidden but focusable
+  radio. A theme that got either wrong removed the accessible name or made the
+  control unreachable by keyboard.
+
+  The component now owns the recipe and a theme sets
+  `--rc-segmented-button-appearance: segmented`. Four genuine theme choices become
+  public properties: `--rc-segmented-button-cursor`,
+  `--rc-segmented-button-disabled-cursor`,
+  `--rc-segmented-button-vertical-divider`, and
+  `--rc-segmented-button-selected-icon-display`.
+
+  Unset, the fieldset, legend, and radios keep their browser appearance, as
+  before. The switch is read with a style container query (Chrome 111, Safari 18,
+  Firefox 128); where that is unsupported the recipe does not apply and the
+  control falls back to the same native appearance.
+
+  To migrate a theme, replace its `--_rc-segmented-button-*` block with the single
+  `--rc-segmented-button-appearance: segmented` declaration, plus any of the four
+  public properties whose value differs from the default.
+
+- 40f132d: `rc-theme-material` now declares the Material 3 motion system's seven named
+  easing curves (`--md-sys-motion-easing-standard`, `-emphasized`, and their
+  decelerate/accelerate variants, plus `-linear`) and sixteen named duration
+  bands (`--md-sys-motion-duration-short1` through `-extra-long4`), composed
+  from the control points and millisecond primitives already vendored. Several
+  component recipes were already reaching for these names with an inline
+  fallback (`var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))`)
+  that silently won every time because nothing declared the token; those
+  references now resolve for real, and the fallback silently carrying a
+  Material 2 curve (`cubic-bezier(0.4, 0, 0.2, 1)`, in `rc-state-layer`'s
+  transition) is fixed to the correct Material 3 curve. Two more vendored-token
+  gaps of the same shape are fixed alongside: Material's disabled state-layer
+  and container opacity tokens, referenced across a dozen component recipes
+  with no local declaration, and two Substrate token names
+  (`--substrate-border`, `--substrate-radius-medium`) that never matched their
+  real declarations (`--substrate-border-color`, `--substrate-radius-md`) and
+  so always fell back to a hardcoded literal instead of the theme's actual
+  values; `rc-fab-menu`'s Substrate shadow tokens are corrected the same way.
+
+## 0.6.0
+
+### Minor Changes
+
+- a108336: Add shared-column `rc-list` and `rc-list-item` elements with standard and
+  segmented appearances, default content truncation, and native-backed single or
+  multiple selection coordination. Restore author-owned item state when native
+  selection coordination ends.
+- 509ee64: Add `rc-progress`, a native `<progress>` enhancer with a formatted value
+  display, a track and fill you can restyle with CSS custom properties, and a
+  built-in fix for the indeterminate/undefined-binding footgun.
+
+  Keep the native element as the uncontrolled source of truth, support releasing
+  a controlled value, and react to live native `value`/`max` changes. Preserve a
+  native determinate value while `indeterminate` temporarily removes its
+  attribute.
+
+  The bar renders at its intended height with no `display` attribute set,
+  matching its own documented default: previously the track/fill/native
+  `<progress>` are all absolutely positioned, contributing nothing to the
+  control's normal-flow height, so with no value-display text sharing its grid
+  row to give it one, the whole bar collapsed to 0px.
+
+## 0.5.0
+
+## 0.4.2
+
+## 0.4.1
+
+## 0.4.0
+
+### Minor Changes
+
+- e57277f: Add Material 3 search-view, fixed-pane splitter, dialog scrim, and resize enhancements.
+
+  `rc-search-bar` now supports `variant="view"`, controlled/default open state, search-view methods, a rich `suggestions` slot, and datalist-derived text suggestions. `rc-splitter` adds `mode="fixed"` for clampable pixel primary panes. `rc-common` now honors CSS max-size constraints during resize gestures, and `rc-dialog` exposes a scrim token plus resize handle/origin hooks used by themed surfaces.
+
+### Patch Changes
+
+- 9c7476d: Add theme-specific rc-button progress treatments, including compact Material spinners and
+  Substrate percentage indicators.
+- ebec800: Dock bottom sheets without a theme to the viewport block-end by default and
+  support absolute positioning for non-modal sheets contained by a positioned ancestor.
+  Center authored drag handles with a splitter-aligned pill treatment. Align the
+  Material theme with its surface, elevation, scrim, drag-handle, and contextual
+  button treatment.
+- e88eff8: Refine semantic card-title typography and icon-button alignment across both
+  themes. Simplify Substrate navigation selection, match its bottom-sheet handle
+  to the splitter grip, improve inverse notification action contrast, and theme the
+  Markdown editor's composed controls.
+- 6f91e7a: Fix collapsed `rc-navigation-rail` items so the whole item's box wraps icon and
+  label, not just the icon. The shared component pulled the label out of flow
+  (`position: absolute`), so a theme's whole-item background or focus ring only
+  covered the icon; Material's detached-pill layout now lives in its own theme
+  stylesheet instead of the shared base. Substrate's collapsed rail also grows
+  from `5rem` to `6rem` so single-word labels like "Settings" stop wrapping.
+- dce5749: Replace the navigation rail's shadow-DOM fallback toggle with a consumer-authored light-DOM
+  button, and align collapsed and expanded item layouts across the default and reference themes.
+- 55e8ab5: Preserve UA-like control and surface styling until an optional theme supplies decorative tokens.
+  Restore themed button hover and pressed state layers, including a pointer-origin Material ripple.
+- 4d118ff: Share icon-font size and line-height tokens across themed component icon markers.
+- 3e89095: Replace rc-menu's generated submenu glyph with an author-supplied `indicator`
+  slot on rc-menu-button. Keep the decorative indicator inside the trigger bounds,
+  reserve label space for it, and expose theme-neutral size, color, and inset
+  tokens for Material, Substrate, and application themes.
+- c96f40c: Use a native system font stack by default.
+- 979b989: Use a zero default gap for tighter chip content layout and a smaller default
+  font size for slotted remove icons. Derive removable content padding from the
+  remove target width and chip gap so the label and trailing icon stay aligned.
+
+## 0.3.2
+
+## 0.3.1
+
+## 0.3.0
+
+### Added
+
+- Add Substrate as a lightweight CSS reference theme for branded app foundations.
+- Add scoped defaults, token bridges, component polish, and docs preview integration.
+
+### Changed
+
+- Update package metadata, README intro, and docs links.

package/README.md

@@ -0,0 +1,79 @@
+# `@rcarls/rc-theme-substrate`
+
+Lightweight CSS reference theme for app-oriented `rc-webcomponents` layouts.
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/guide/theme-previews](https://richardcarls.github.io/rc-webcomponents/guide/theme-previews).
+
+It is a CSS-only, app-oriented foundation theme: orange primary color,
+neutral surfaces, compact controls, system-color fallbacks, and a small set of
+component polish rules that demonstrate how to build a branded theme without
+copying the heavier Material package.
+
+## Installation
+
+```sh
+yarn add @rcarls/rc-theme-substrate
+```
+
+## Full reference theme
+
+Import the full theme bundle:
+
+```css
+@import '@rcarls/rc-theme-substrate/theme.css';
+```
+
+Apply the theme class to your app shell or any subtree:
+
+```html
+<main class="rc-theme-substrate">
+  <rc-select>...</rc-select>
+  <rc-dialog>...</rc-dialog>
+</main>
+```
+
+## Build your own theme from it
+
+Substrate is intentionally token-first. To use it as a branded foundation,
+copy the `bridge.css` pattern and override the public semantic tokens at your
+theme boundary.
+
+```css
+@import '@rcarls/rc-theme-substrate/bridge.css';
+@import '@rcarls/rc-theme-substrate/components.css';
+
+.my-product-theme {
+  --substrate-primary: oklch(58% 0.19 275);
+  --substrate-radius-md: 0.5rem;
+  --substrate-font-family: Inter, system-ui, sans-serif;
+}
+```
+
+Selective component styles are exported for apps that want only part of the
+reference layer:
+
+```css
+@import '@rcarls/rc-theme-substrate/bridge.css';
+@import '@rcarls/rc-theme-substrate/components/select.css';
+@import '@rcarls/rc-theme-substrate/components/dialog.css';
+```
+
+Tag general icon-font markup with `data-rc-icon`; component-specific markers
+such as `data-rc-button-icon` and `data-rc-navigation-icon` opt in
+automatically. The shared `--rc-icon-font-size` and
+`--rc-icon-font-line-height` tokens keep glyph geometry consistent and can be
+overridden at the theme boundary or on one component.
+
+## View transitions
+
+Substrate includes stable CSS hooks for apps that opt into View Transitions,
+but it does not start transitions or require browser support:
+
+```css
+.rc-theme-substrate [data-rc-view-transition='panel'] {
+  --rc-view-transition-name: rc-panel;
+}
+```
+
+Application code remains responsible for deciding when to call
+`document.startViewTransition()`.

package/bridge.css

@@ -0,0 +1,204 @@
+@layer rc-theme-substrate.defaults, rc-theme-substrate.bridge, rc-theme-substrate.components;
+
+@layer rc-theme-substrate.bridge {
+  /*
+   * Maps Substrate's small brand token set to the rc-webcomponents public
+   * styling contract. Consumers can replace --substrate-* values and keep this
+   * file as their bridge.
+   */
+  .rc-theme-substrate,
+  :host(.rc-theme-substrate) {
+    --rc-surface: var(--substrate-surface, Canvas);
+    --rc-field: var(--substrate-field, Field);
+    --rc-button-bg: var(--substrate-surface-raised, ButtonFace);
+    --rc-field-text: var(--substrate-on-surface, FieldText);
+    --rc-field-error-color: var(--substrate-error, red);
+    --rc-button-text: var(--substrate-on-surface, ButtonText);
+    --rc-highlight: var(--substrate-primary-container, Highlight);
+    --rc-highlight-text: var(--substrate-on-primary-container, HighlightText);
+    --rc-text-disabled: var(--substrate-on-surface-muted, GrayText);
+    --rc-accent: var(--substrate-primary, Highlight);
+    --rc-border-color: var(--substrate-border-color, ButtonBorder);
+    --rc-border-width: 1px;
+    --rc-border-style: solid;
+    --rc-border: var(--rc-border-width) var(--rc-border-style) var(--rc-border-color);
+    --rc-shadow: var(--substrate-shadow-md, 0 2px 8px rgb(0 0 0 / 15%));
+    --rc-font-family: var(--substrate-font-family, inherit);
+    --rc-font-size: var(--substrate-font-size, 1em);
+    --rc-font-weight: var(--substrate-font-weight, 400);
+    --rc-line-height: var(--substrate-line-height, normal);
+    --rc-icon-font-size: 1.5rem;
+    --rc-icon-font-line-height: var(--rc-icon-font-size);
+    --rc-control-block-size: var(--substrate-control-block-size, 2.5rem);
+    --rc-control-padding-block: var(--substrate-control-padding-block, 0.5rem);
+    --rc-control-padding-inline: var(--substrate-control-padding-inline, 0.75rem);
+    --rc-control-gap: var(--substrate-control-gap, 0.5rem);
+    --rc-button-color: var(--rc-button-text, ButtonText);
+    --rc-button-block-size: var(--rc-control-block-size);
+    --rc-button-radius: var(--rc-control-radius);
+    --rc-button-border: var(--rc-border);
+    --rc-button-padding-block: var(--rc-control-padding-block);
+    --rc-button-padding-inline: var(--rc-control-padding-inline);
+    --rc-button-gap: var(--rc-control-gap);
+    --rc-button-font: var(--rc-font-weight) var(--rc-font-size) / var(--rc-line-height)
+      var(--rc-font-family);
+    --rc-button-hover-state-layer-opacity: 0.08;
+    --rc-button-focus-state-layer-opacity: 0.12;
+    --rc-button-pressed-state-layer-opacity: 0.12;
+    --rc-card-bg: var(--substrate-surface-raised, Canvas);
+    --rc-card-color: var(--substrate-on-surface, CanvasText);
+    --rc-card-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-card-padding-block: 0.75rem;
+    --rc-card-padding-inline: 0.75rem;
+    --rc-card-actions-gap: 0.5rem;
+    --rc-card-subtitle-color: color-mix(in srgb, currentColor 72%, transparent);
+    --rc-card-hover-state-layer-opacity: 0.08;
+    --rc-card-pressed-state-layer-opacity: 0.12;
+    --rc-chip-block-size: 2rem;
+    --rc-chip-gap: 0px;
+    --rc-chip-padding-inline: 0.75rem;
+    --rc-chip-border: var(--rc-border);
+    --rc-chip-radius: var(--substrate-radius-md, 0.5rem);
+    --rc-chip-bg: var(--substrate-surface-raised, ButtonFace);
+    --rc-chip-color: var(--substrate-on-surface, ButtonText);
+    --rc-chip-font: inherit;
+    --rc-chip-text-decoration: none;
+    --rc-chip-selected-bg: var(--rc-highlight, Highlight);
+    --rc-switch-native-appearance: none;
+    --rc-switch-native-inline-size: 100%;
+    --rc-switch-native-block-size: 100%;
+    --rc-switch-native-margin: 0;
+    --rc-switch-native-opacity: 0;
+    --rc-switch-decoration-display: block;
+    --rc-switch-icon-display: grid;
+    --rc-switch-track-inline-size: 3.25rem;
+    --rc-switch-track-block-size: 2rem;
+    --rc-switch-selected-track-bg: var(--rc-accent);
+    --rc-switch-thumb-translate: 1.125rem;
+    --rc-segmented-button-segment-min-block-size: var(--rc-control-block-size);
+    --rc-segmented-button-selected-bg: var(--rc-highlight, Highlight);
+    --rc-snackbar-bg: var(--substrate-inverse-surface, CanvasText);
+    --rc-snackbar-color: var(--substrate-inverse-on-surface, Canvas);
+    --rc-snackbar-border: 0;
+    --rc-snackbar-action-color: var(--substrate-inverse-on-surface, Canvas);
+    --rc-snackbar-action-border: 0;
+    --rc-snackbar-action-radius: 9999px;
+    --rc-snackbar-action-padding-block: 0.5rem;
+    --rc-snackbar-action-padding-inline: 0.75rem;
+    --rc-snackbar-action-bg: transparent;
+    --rc-snackbar-action-font: 650 0.875rem / 1.25 var(--rc-font-family, inherit);
+    --rc-item-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-item-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-item-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-list-item-gap: var(--rc-item-gap);
+    --rc-list-item-min-block-size: 2.25rem;
+    --rc-list-item-padding-block: var(--rc-item-padding-block);
+    --rc-list-item-padding-inline: var(--rc-item-padding-inline);
+    --rc-list-item-selected-bg: var(--rc-highlight, Highlight);
+    --rc-list-item-selected-color: var(--rc-highlight-text, HighlightText);
+    --rc-radius-sm: var(--substrate-radius-sm, 0.25rem);
+    --rc-radius-md: var(--substrate-radius-md, 0.5rem);
+    --rc-control-radius: var(--substrate-radius-md, 0.5rem);
+    --rc-focus-ring: var(--substrate-focus-ring, 2px solid Highlight);
+    --rc-focus-ring-offset: var(--substrate-focus-ring-offset, 2px);
+    --rc-disabled-opacity: var(--substrate-disabled-opacity, 0.52);
+    --rc-motion-effects-duration-fast: var(--substrate-motion-effects-duration-fast, 100ms);
+    --rc-motion-effects-easing-fast: ease-out;
+    --rc-motion-effects-duration-default: var(--substrate-motion-effects-duration-default, 160ms);
+    --rc-motion-effects-easing-default: var(--rc-motion-effects-easing-fast);
+    --rc-motion-effects-duration-slow: var(--substrate-motion-effects-duration-slow, 240ms);
+    --rc-motion-effects-easing-slow: var(--rc-motion-effects-easing-fast);
+    --rc-motion-spatial-duration-fast: var(--substrate-motion-spatial-duration-fast, 160ms);
+    --rc-motion-spatial-easing-fast: var(--substrate-motion-easing, cubic-bezier(0.2, 0, 0, 1));
+    --rc-motion-spatial-duration-default: var(--substrate-motion-spatial-duration-default, 240ms);
+    --rc-motion-spatial-easing-default: var(--rc-motion-spatial-easing-fast);
+    --rc-motion-spatial-duration-slow: var(--substrate-motion-spatial-duration-slow, 320ms);
+    --rc-motion-spatial-easing-slow: var(--rc-motion-spatial-easing-fast);
+    /* Substrate's one curve is decelerate-shaped, so it is the enter curve. */
+    --rc-motion-effects-easing-enter: ease-out;
+    --rc-motion-effects-easing-exit: ease-in;
+    --rc-motion-spatial-easing-enter: var(--rc-motion-spatial-easing-fast);
+    --rc-motion-spatial-easing-exit: cubic-bezier(0.3, 0, 1, 1);
+    /* Matches base.css: the compatibility token follows the effects default. */
+    --rc-motion-duration: var(--rc-motion-effects-duration-default);
+    /*
+     * Mixed against the theme's own inverse surface rather than `CanvasText`,
+     * so the scrim carries the palette's warmth and resolves to a real color
+     * rather than to a system one that cannot leave CSS.
+     */
+    --rc-dialog-scrim: color-mix(
+      in srgb,
+      var(--substrate-inverse-surface, CanvasText) 42%,
+      transparent
+    );
+  }
+
+  .rc-theme-substrate rc-listbox,
+  :host(.rc-theme-substrate) rc-listbox,
+  .rc-theme-substrate rc-menu,
+  :host(.rc-theme-substrate) rc-menu {
+    --rc-listbox-option-gap: var(--rc-list-item-gap, 0.5rem);
+    --rc-listbox-option-min-block-size: var(--rc-list-item-min-block-size, 2.25rem);
+    --rc-listbox-option-padding-block: var(--rc-list-item-padding-block, 0.55rem);
+    --rc-listbox-option-padding-inline: var(--rc-list-item-padding-inline, 0.75rem);
+    --rc-listbox-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
+    --rc-listbox-hover-color: var(--rc-field-text, FieldText);
+    --rc-listbox-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+    --rc-listbox-active-color: var(--rc-field-text, FieldText);
+    --rc-listbox-selected-bg: var(--rc-list-item-selected-bg, Highlight);
+    --rc-listbox-selected-color: var(--rc-list-item-selected-color, HighlightText);
+  }
+
+  .rc-theme-substrate rc-select,
+  :host(.rc-theme-substrate) rc-select,
+  .rc-theme-substrate rc-combobox,
+  :host(.rc-theme-substrate) rc-combobox {
+    --rc-select-control-block-size: var(--rc-control-block-size);
+    --rc-select-radius: var(--rc-control-radius);
+    --rc-select-shadow: var(--rc-shadow);
+    --rc-select-listbox-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-select-listbox-border: var(--rc-border);
+    --rc-select-chip-radius: var(--substrate-radius-sm, 0.25rem);
+    --rc-combobox-control-block-size: var(--rc-control-block-size);
+    --rc-combobox-radius: var(--rc-control-radius);
+    --rc-combobox-shadow: var(--rc-shadow);
+    --rc-combobox-listbox-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-combobox-listbox-border: var(--rc-border);
+    --rc-combobox-chip-radius: var(--substrate-radius-sm, 0.25rem);
+  }
+
+  .rc-theme-substrate rc-slider,
+  :host(.rc-theme-substrate) rc-slider,
+  .rc-theme-substrate rc-range-slider,
+  :host(.rc-theme-substrate) rc-range-slider {
+    --rc-slider-track-size: 0.375rem;
+    --rc-slider-track-background: color-mix(in srgb, var(--rc-border-color) 70%, transparent);
+    --rc-slider-progress-background: var(--rc-accent);
+    --rc-slider-track-radius: 999px;
+    --rc-range-slider-accent: var(--rc-accent);
+    --rc-range-slider-track-background: color-mix(in srgb, var(--rc-border-color) 70%, transparent);
+    --rc-range-slider-thumb-background: var(--substrate-surface, Canvas);
+    --rc-range-slider-thumb-border: var(--rc-accent);
+    --rc-thumb-radius: 0.5625rem;
+  }
+
+  .rc-theme-substrate rc-progress,
+  :host(.rc-theme-substrate) rc-progress {
+    --rc-progress-track-background: color-mix(in srgb, var(--rc-border-color) 70%, transparent);
+    --rc-progress-track-opacity: 1;
+    --rc-progress-track-radius: 999px;
+    --rc-progress-fill-background: var(--rc-accent);
+    --rc-progress-value-color: var(--substrate-on-surface-muted, GrayText);
+  }
+
+  .rc-theme-substrate rc-bottom-sheet,
+  :host(.rc-theme-substrate) rc-bottom-sheet {
+    --rc-bottom-sheet-bg: var(--substrate-surface-raised, Canvas);
+    --rc-bottom-sheet-color: var(--rc-field-text, CanvasText);
+    --rc-bottom-sheet-radius: var(--substrate-radius-xl, 1rem) var(--substrate-radius-xl, 1rem) 0 0;
+    --rc-bottom-sheet-shadow: var(--substrate-shadow-lg, none);
+    --rc-bottom-sheet-scrim: var(--rc-dialog-scrim);
+    --rc-bottom-sheet-handle-color: var(--rc-border-color, GrayText);
+    --rc-bottom-sheet-handle-radius: var(--substrate-radius-pill, 999px);
+  }
+}

package/components/accordion.css

@@ -0,0 +1,18 @@
+@layer rc-theme-substrate.components {
+  /*
+   * Only the group box. Panels inside an accordion take the same
+   * `--rc-disclosure-*` mapping as a standalone disclosure, which disclosure.css
+   * sets for `rc-accordion` as well, so the panel recipe is not repeated here.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion {
+    --rc-accordion-gap: 0.5rem;
+
+    /* Laid out before the element upgrades; see disclosure.css. */
+    display: grid;
+    gap: var(--rc-accordion-gap, 0.5rem);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion > rc-disclosure {
+    display: block;
+  }
+}