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

package/CHANGELOG.md

@@ -0,0 +1,92 @@
+# @rcarls/rc-theme-win31
+
+## 0.0.0-next-20260921045401
+
+### Minor Changes
+
+- 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.
+
+- 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 ms for
+  effects and 160/240/320 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 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 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.
+
+- 322d875: Add a Windows 3.1 era theme package with full component coverage.
+
+  `@rcarls/rc-theme-win31` maps a period `--win31-*` token layer onto the public
+  `--rc-*` contract and ships one stylesheet per component, matching the coverage
+  of the existing themes. Metrics derive from the MS Sans Serif 8pt cell and scale
+  from a single `--win31-unit` token, so the theme can be doubled without any
+  proportion changing.
+
+  The theme is light only, has no hover states outside menus, treats disabled as a
+  color rather than an opacity, draws focus and selection as separate marks, and
+  yields entirely under forced colors.
+
+### Patch Changes
+
+- 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.

package/README.md

@@ -0,0 +1,137 @@
+# @rcarls/rc-theme-win31
+
+Windows 3.1 era CSS theme and token bridge for
+[rc-webcomponents](https://github.com/richardcarls/rc-webcomponents).
+
+Beveled, square, motionless chrome, as Windows 3.1 looked to applications that
+linked `CTL3D`. Styling only: no component behavior changes.
+
+```sh
+npm install @rcarls/rc-theme-win31
+```
+
+```css
+@import '@rcarls/rc-theme-win31/theme.css';
+```
+
+```html
+<div class="rc-theme-win31">
+  <rc-select>...</rc-select>
+  <rc-dialog>...</rc-dialog>
+</div>
+```
+
+## Token layers
+
+`theme.css` composes three files, in this order:
+
+| File             | Owns                                                        |
+| ---------------- | ----------------------------------------------------------- |
+| `defaults.css`   | The `--win31-*` reference tokens: palette, metrics, glyphs  |
+| `bridge.css`     | The mapping from `--win31-*` onto the public `--rc-*` layer |
+| `components.css` | Per-component chrome, one stylesheet per component          |
+
+Component stylesheets read the `--win31-*` tokens with no literal fallbacks, so
+a value lives in exactly one place and cannot drift between the token layer and
+thirty-nine component sheets. Import `defaults.css` before any selective import,
+or supply the `--win31-*` set yourself.
+
+```css
+@import '@rcarls/rc-theme-win31/defaults.css';
+@import '@rcarls/rc-theme-win31/bridge.css';
+@import '@rcarls/rc-theme-win31/components/button.css';
+```
+
+## Scaling
+
+Every metric is a multiple of one token, so the whole theme scales without any
+proportion changing. This is the bitmap-interface answer to responsive sizing.
+
+```css
+.rc-theme-win31 {
+  --win31-unit: 2px;
+}
+```
+
+## What is deliberate
+
+- **Light only.** Windows 3.1 had no dark mode. It had around twenty
+  user-selectable whole-system color schemes instead, which is arguably the
+  stronger idea and predates `prefers-color-scheme` by three decades. Every
+  component stylesheet reads only the `--win31-color-*` tokens, so a scheme is a
+  class that overrides those and nothing else. The named period schemes are not
+  shipped yet: their values live in the original `CONTROL.INI` and are not
+  worth guessing.
+- **No hover states**, except on menus. That is period-correct and it does
+  surprise people. Push buttons and list rows are identical at rest and under
+  the pointer. The upside is that every affordance is legible without a pointer,
+  which is what touch and keyboard users need anyway.
+- **Disabled is a color, not an opacity.** 3.1 had no alpha channel, so it
+  embossed disabled text: gray with a one-pixel highlight beneath. WCAG exempts
+  inactive controls from the contrast minimum, so the period treatment stands.
+- **Focus and selection are separate marks.** A list can hold a selected row
+  that is not the focused row, so the dotted focus rectangle is drawn in
+  addition to the inverse-video selection, and turns white inside it.
+- **It disappears under forced colors.** Every bevel is an inset shadow, a
+  four-value `border-color`, or a dither image, and High Contrast removes all
+  three. The theme yields completely. The result is closer to stock, pre-`CTL3D`
+  Windows 3.1 than the beveled default is.
+- **Scrollbar chrome is Chromium and WebKit only.** Firefox exposes only
+  `scrollbar-width` and `scrollbar-color`, so it gets a two-color fallback.
+- **`rc-fab` and `rc-fab-menu` are knowing anachronisms.** Windows 3.1 had no
+  floating action button and nothing that would have produced one. They are
+  drawn as floating tool-palette buttons so a themed page has no unstyled
+  holes.
+
+## Window chrome
+
+`rc-dialog` keeps the native `<dialog>` in consumer light DOM, so the caption
+bar is your markup. The theme styles the shape the component already contracts
+on through `move-handle`:
+
+```html
+<rc-dialog movable move-handle="header">
+  <dialog aria-labelledby="save-title">
+    <header>
+      <button aria-label="System menu"></button>
+      <h2 id="save-title">Save Changes</h2>
+    </header>
+    <p>Save changes before closing?</p>
+    <footer>
+      <button data-rc-win31-default>OK</button>
+      <button>Cancel</button>
+    </footer>
+  </dialog>
+</rc-dialog>
+```
+
+## Theme markers
+
+Three authored markers are public API for this theme:
+
+| Marker                   | Applies to   | Effect                                         |
+| ------------------------ | ------------ | ---------------------------------------------- |
+| `data-rc-win31-default`  | `rc-button`  | The heavier frame of a dialog's default button |
+| `data-rc-win31-toggle`   | `rc-switch`  | The sliding variant instead of the checkbox    |
+| `data-rc-win31-inactive` | `rc-app-bar` | The muted inactive caption pair                |
+
+## Fonts
+
+MS Sans Serif is a Microsoft bitmap face and is not redistributed here. The
+stack falls back through `Tahoma` and the system sans, so type is
+metric-adjacent rather than pixel-exact.
+
+## Notice
+
+Not affiliated with or endorsed by Microsoft. Windows is a trademark of
+Microsoft Corporation. No Microsoft fonts, bitmaps, or icons are redistributed;
+every glyph in this package is redrawn as SVG or CSS.
+
+## Documentation
+
+- [Theme previews](https://richardcarls.github.io/rc-webcomponents/guide/theme-previews)
+- [Styling guide](https://richardcarls.github.io/rc-webcomponents/guide/styling)
+
+## License
+
+MIT

package/bridge.css

@@ -0,0 +1,247 @@
+@layer rc-theme-win31.defaults, rc-theme-win31.bridge, rc-theme-win31.components;
+
+@layer rc-theme-win31.bridge {
+  /*
+   * Maps the Windows 3.1 reference tokens onto the rc-webcomponents public
+   * styling contract. Consumers can replace --win31-* values and keep this file
+   * as their bridge.
+   *
+   * Three decisions run through the whole mapping and are worth knowing before
+   * reading it:
+   *
+   * - Disabled is a color, never an opacity. --rc-disabled-opacity stays at 1
+   *   and components/modes.css supplies the embossed gray instead.
+   * - Motion is zero. Windows 3.1 had no transitions anywhere.
+   * - Depth is geometry. --rc-shadow is none; bevels come from the box-shadow
+   *   and border-color tokens, which forced-colors can delete cleanly.
+   */
+  .rc-theme-win31,
+  :host(.rc-theme-win31) {
+    --rc-surface: var(--win31-color-surface);
+    --rc-field: var(--win31-color-field);
+    --rc-field-text: var(--win31-color-field-text);
+    --rc-field-error-color: var(--win31-color-frame);
+    --rc-button-bg: var(--win31-color-surface);
+    --rc-button-text: var(--win31-color-frame);
+    --rc-highlight: var(--win31-color-selection);
+    --rc-highlight-text: var(--win31-color-selection-text);
+    --rc-text-disabled: var(--win31-color-disabled-text);
+    --rc-accent: var(--win31-color-selection);
+    --rc-border-color: var(--win31-color-frame);
+    --rc-border-width: var(--win31-hairline);
+    --rc-border-style: solid;
+    --rc-border: var(--rc-border-width) var(--rc-border-style) var(--rc-border-color);
+    --rc-shadow: none;
+
+    --rc-font-family: var(--win31-font-family);
+    --rc-font-size: var(--win31-font-size);
+    --rc-font-weight: var(--win31-font-weight);
+    --rc-line-height: var(--win31-line-height);
+    --rc-icon-font-size: var(--win31-check-size);
+    --rc-icon-font-line-height: var(--rc-icon-font-size);
+
+    --rc-control-block-size: var(--win31-control-height);
+    --rc-control-padding-block: var(--win31-padding-block);
+    --rc-control-padding-inline: var(--win31-padding-inline);
+    --rc-control-gap: var(--win31-gap-tight);
+    --rc-item-padding-block: var(--win31-padding-block);
+    --rc-item-padding-inline: var(--win31-padding-inline);
+    --rc-item-gap: var(--win31-gap-tight);
+
+    --rc-radius-sm: var(--win31-radius);
+    --rc-radius-md: var(--win31-radius);
+    --rc-control-radius: var(--win31-radius);
+    --rc-thumb-radius: var(--win31-radius);
+
+    --rc-focus-ring: var(--win31-focus-ring);
+    --rc-focus-ring-offset: var(--win31-focus-ring-offset);
+    --rc-disabled-opacity: 1;
+    /*
+     * Period chrome switches state instantly. All thirteen shared motion
+     * tokens are declared here at zero, not left to base.css's fallbacks:
+     * base.css is optional, and an app that loads it alongside this theme
+     * would otherwise inherit base's real 180/300/450ms spatial motion for
+     * whichever of these a bridge left unmapped. A step function is the
+     * honest curve even though a 0ms duration already makes the curve shape
+     * invisible.
+     */
+    --rc-motion-effects-duration-fast: 0ms;
+    --rc-motion-effects-easing-fast: step-end;
+    --rc-motion-effects-duration-default: 0ms;
+    --rc-motion-effects-easing-default: step-end;
+    --rc-motion-effects-duration-slow: 0ms;
+    --rc-motion-effects-easing-slow: step-end;
+    --rc-motion-spatial-duration-fast: 0ms;
+    --rc-motion-spatial-easing-fast: step-end;
+    --rc-motion-spatial-duration-default: 0ms;
+    --rc-motion-spatial-easing-default: step-end;
+    --rc-motion-spatial-duration-slow: 0ms;
+    --rc-motion-spatial-easing-slow: step-end;
+    --rc-motion-effects-easing-enter: step-end;
+    --rc-motion-effects-easing-exit: step-end;
+    --rc-motion-spatial-easing-enter: step-end;
+    --rc-motion-spatial-easing-exit: step-end;
+    --rc-motion-duration: var(--rc-motion-effects-duration-default);
+
+    --rc-button-color: var(--rc-button-text);
+    --rc-button-block-size: var(--rc-control-block-size);
+    --rc-button-radius: var(--win31-radius);
+    --rc-button-border: var(--rc-border);
+    --rc-button-padding-block: var(--rc-control-padding-block);
+    --rc-button-padding-inline: calc(8 * var(--win31-unit));
+    --rc-button-gap: var(--rc-control-gap);
+    --rc-button-font: var(--rc-font-weight) var(--rc-font-size) / 1 var(--rc-font-family);
+    /*
+     * Windows 3.1 gave push buttons no hover or focus wash at all. The state
+     * layers stay at zero and pressed is drawn as an inverted bevel instead.
+     */
+    --rc-button-hover-state-layer-opacity: 0;
+    --rc-button-focus-state-layer-opacity: 0;
+    --rc-button-pressed-state-layer-opacity: 0;
+
+    --rc-card-bg: var(--win31-color-surface);
+    --rc-card-color: var(--win31-color-frame);
+    --rc-card-radius: var(--win31-radius);
+    --rc-card-padding-block: var(--win31-gap-tight);
+    --rc-card-padding-inline: var(--win31-padding-inline);
+    --rc-card-actions-gap: var(--win31-gap);
+    --rc-card-subtitle-color: var(--win31-color-frame);
+    --rc-card-hover-state-layer-opacity: 0;
+    --rc-card-pressed-state-layer-opacity: 0;
+
+    --rc-chip-block-size: var(--win31-control-height);
+    --rc-chip-gap: var(--win31-gap-tight);
+    --rc-chip-padding-inline: calc(8 * var(--win31-unit));
+    --rc-chip-border: var(--rc-border);
+    --rc-chip-radius: var(--win31-radius);
+    --rc-chip-bg: var(--win31-color-surface);
+    --rc-chip-color: var(--win31-color-frame);
+    --rc-chip-font: inherit;
+    --rc-chip-text-decoration: none;
+    --rc-chip-selected-bg: var(--win31-dither-surface);
+
+    --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: calc(36 * var(--win31-unit));
+    --rc-switch-track-block-size: var(--win31-control-height);
+    --rc-switch-selected-track-bg: var(--win31-color-surface);
+    --rc-switch-thumb-translate: calc(16 * var(--win31-unit));
+
+    --rc-segmented-button-segment-min-block-size: var(--rc-control-block-size);
+    --rc-segmented-button-selected-bg: var(--win31-dither-surface);
+
+    --rc-snackbar-bg: var(--win31-color-surface);
+    --rc-snackbar-color: var(--win31-color-frame);
+    --rc-snackbar-border: var(--rc-border);
+    --rc-snackbar-action-color: var(--win31-color-frame);
+    --rc-snackbar-action-border: var(--rc-border);
+    --rc-snackbar-action-radius: var(--win31-radius);
+    --rc-snackbar-action-padding-block: var(--win31-padding-block);
+    --rc-snackbar-action-padding-inline: calc(8 * var(--win31-unit));
+    --rc-snackbar-action-bg: var(--win31-color-surface);
+    --rc-snackbar-action-font: var(--rc-button-font);
+
+    --rc-list-item-gap: var(--rc-item-gap);
+    --rc-list-item-min-block-size: var(--win31-listbox-row-height);
+    --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(--win31-color-selection);
+    --rc-list-item-selected-color: var(--win31-color-selection-text);
+
+    /*
+     * The scrim is transparent on purpose. Windows 3.1 dimmed nothing behind a
+     * modal dialog; the dialog's own frame carried the separation.
+     */
+    --rc-dialog-scrim: transparent;
+  }
+
+  /*
+   * Listboxes and menus diverge here, and the divergence is period-correct
+   * rather than an oversight: menus highlighted under the pointer, and list
+   * rows did not. A list row's resting and hover appearance are the same.
+   */
+  .rc-theme-win31 rc-listbox,
+  :host(.rc-theme-win31) rc-listbox {
+    --rc-listbox-option-gap: var(--win31-gap-tight);
+    --rc-listbox-option-min-block-size: var(--win31-listbox-row-height);
+    --rc-listbox-option-padding-block: var(--win31-padding-block);
+    --rc-listbox-option-padding-inline: var(--win31-padding-inline);
+    --rc-listbox-hover-bg: transparent;
+    --rc-listbox-hover-color: var(--win31-color-field-text);
+    --rc-listbox-active-bg: var(--win31-color-selection);
+    --rc-listbox-active-color: var(--win31-color-selection-text);
+    --rc-listbox-selected-bg: var(--win31-color-selection);
+    --rc-listbox-selected-color: var(--win31-color-selection-text);
+  }
+
+  .rc-theme-win31 rc-menu,
+  :host(.rc-theme-win31) rc-menu {
+    --rc-listbox-option-gap: 0;
+    --rc-listbox-option-min-block-size: calc(20 * var(--win31-unit));
+    --rc-listbox-option-padding-block: 0;
+    --rc-listbox-option-padding-inline: var(--win31-padding-inline);
+    --rc-listbox-hover-bg: var(--win31-color-selection);
+    --rc-listbox-hover-color: var(--win31-color-selection-text);
+    --rc-listbox-active-bg: var(--win31-color-selection);
+    --rc-listbox-active-color: var(--win31-color-selection-text);
+    --rc-listbox-selected-bg: var(--win31-color-selection);
+    --rc-listbox-selected-color: var(--win31-color-selection-text);
+  }
+
+  .rc-theme-win31 rc-select,
+  :host(.rc-theme-win31) rc-select,
+  .rc-theme-win31 rc-combobox,
+  :host(.rc-theme-win31) rc-combobox {
+    --rc-select-control-block-size: calc(20 * var(--win31-unit));
+    --rc-select-radius: var(--win31-radius);
+    --rc-select-shadow: none;
+    --rc-select-listbox-radius: var(--win31-radius);
+    --rc-select-listbox-border: var(--rc-border);
+    --rc-select-chip-radius: var(--win31-radius);
+    --rc-combobox-control-block-size: calc(20 * var(--win31-unit));
+    --rc-combobox-radius: var(--win31-radius);
+    --rc-combobox-shadow: none;
+    --rc-combobox-listbox-radius: var(--win31-radius);
+    --rc-combobox-listbox-border: var(--rc-border);
+    --rc-combobox-chip-radius: var(--win31-radius);
+  }
+
+  .rc-theme-win31 rc-slider,
+  :host(.rc-theme-win31) rc-slider,
+  .rc-theme-win31 rc-range-slider,
+  :host(.rc-theme-win31) rc-range-slider {
+    --rc-slider-track-size: calc(4 * var(--win31-unit));
+    --rc-slider-track-background: var(--win31-color-field);
+    --rc-slider-progress-background: var(--win31-color-selection);
+    --rc-slider-track-radius: var(--win31-radius);
+    --rc-range-slider-accent: var(--win31-color-selection);
+    --rc-range-slider-track-background: var(--win31-color-field);
+    --rc-range-slider-thumb-background: var(--win31-color-surface);
+    --rc-range-slider-thumb-border: var(--win31-color-frame);
+  }
+
+  .rc-theme-win31 rc-progress,
+  :host(.rc-theme-win31) rc-progress {
+    --rc-progress-track-background: var(--win31-color-field);
+    --rc-progress-track-opacity: 1;
+    --rc-progress-track-radius: var(--win31-radius);
+    --rc-progress-fill-background: var(--win31-color-selection);
+    --rc-progress-value-color: var(--win31-color-frame);
+  }
+
+  .rc-theme-win31 rc-bottom-sheet,
+  :host(.rc-theme-win31) rc-bottom-sheet {
+    --rc-bottom-sheet-bg: var(--win31-color-surface);
+    --rc-bottom-sheet-color: var(--win31-color-frame);
+    --rc-bottom-sheet-radius: var(--win31-radius);
+    --rc-bottom-sheet-shadow: none;
+    --rc-bottom-sheet-scrim: transparent;
+    --rc-bottom-sheet-handle-color: var(--win31-color-shadow);
+    --rc-bottom-sheet-handle-radius: var(--win31-radius);
+  }
+}

package/components/accordion.css

@@ -0,0 +1,21 @@
+@layer rc-theme-win31.components {
+  /*
+   * 3.1 had no accordion, so this is a stack of the window-shade panels above
+   * with no gap between them, which is how a column of 3.1 panes actually read.
+   *
+   * rc-accordion owns only the group gap by design. Panel chrome reaches the
+   * children through the shared --rc-disclosure-* recipe, so there is no
+   * parallel accordion-panel vocabulary to keep in step. Panel styling belongs
+   * in disclosure.css rather than here.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-accordion {
+    --rc-accordion-gap: 0;
+    display: block;
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-accordion > rc-disclosure + rc-disclosure {
+    margin-block-start: calc(-1 * var(--win31-hairline));
+  }
+}

package/components/adaptive-menu.css

@@ -0,0 +1,35 @@
+@layer rc-theme-win31.components {
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-adaptive-menu {
+    --rc-adaptive-menu-gap: var(--win31-gap-tight);
+    --rc-adaptive-menu-item-gap: var(--win31-gap-tight);
+    --rc-adaptive-menu-item-min-block-size: var(--win31-control-height);
+    --rc-adaptive-menu-item-padding-block: var(--win31-padding-block);
+    --rc-adaptive-menu-item-padding-inline: calc(8 * var(--win31-unit));
+    --rc-adaptive-menu-icon-size: var(--win31-check-size);
+    --rc-adaptive-menu-trigger-background: var(--win31-color-surface);
+    --rc-adaptive-menu-trigger-color: var(--win31-color-frame);
+    --rc-adaptive-menu-trigger-border: var(--win31-border);
+    --rc-adaptive-menu-trigger-radius: var(--win31-radius);
+    --rc-adaptive-menu-trigger-block-size: var(--win31-control-height);
+    --rc-adaptive-menu-trigger-inline-size: var(--win31-control-height);
+    --rc-adaptive-menu-trigger-padding: 0;
+    --rc-adaptive-menu-popup-background: var(--win31-color-menu);
+    --rc-adaptive-menu-popup-color: var(--win31-color-menu-text);
+    --rc-adaptive-menu-popup-border: var(--win31-border);
+    --rc-adaptive-menu-popup-radius: var(--win31-radius);
+    --rc-adaptive-menu-popup-shadow: var(--win31-drop-shadow);
+    --rc-adaptive-menu-popup-padding-block: var(--win31-unit);
+    --rc-adaptive-menu-popup-min-inline-size: calc(142 * var(--win31-unit));
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-adaptive-menu::part(overflow-trigger) {
+    box-shadow: var(--win31-bevel-outset-1);
+    cursor: default;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-adaptive-menu::part(overflow-trigger):active {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+}

package/components/app-bar.css

@@ -0,0 +1,66 @@
+@layer rc-theme-win31.components {
+  /*
+   * The application window's caption bar. Same construction as the dialog
+   * caption above: a solid active-title fill, a centered bold title, and
+   * beveled caption buttons at the trailing edge.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar {
+    --rc-app-bar-bg: var(--win31-color-title-active);
+    --rc-app-bar-color: var(--win31-color-title-active-text);
+    --rc-app-bar-compact-min-height: var(--win31-title-height);
+    --rc-app-bar-title-font-size: var(--win31-title-font-size);
+    --rc-app-bar-expanded-title-font-size: var(--win31-title-font-size);
+    --rc-app-bar-expanded-padding-block: 0;
+    --rc-app-bar-padding-inline: 0;
+    --rc-app-bar-title-start-padding: var(--win31-padding-inline);
+    --rc-app-bar-gap: 0;
+    --rc-app-bar-shadow: none;
+    --rc-app-bar-scroll-divider: var(--win31-border);
+    --rc-app-bar-transition-duration: 0ms;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar::part(root) {
+    min-block-size: var(--win31-title-height);
+    border-block-end: var(--win31-border);
+    font-family: var(--win31-font-family);
+    user-select: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar::part(title) {
+    flex: 1;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar::part(scroll-shadow) {
+    display: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar button {
+    inline-size: var(--win31-title-height);
+    block-size: var(--win31-title-height);
+    min-inline-size: var(--win31-title-height);
+    min-block-size: var(--win31-title-height);
+    padding: 0;
+    color: var(--win31-color-frame);
+    background-color: var(--win31-color-surface);
+    border: 0;
+    border-inline-start: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+    cursor: default;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar button:active {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  /*
+   * An inactive window took the muted caption pair. rc-app-bar has no inactive
+   * state of its own, so this is offered as a documented opt-in marker.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar[data-rc-win31-inactive] {
+    --rc-app-bar-bg: var(--win31-color-title-inactive);
+    --rc-app-bar-color: var(--win31-color-title-inactive-text);
+  }
+}

package/components/bottom-sheet.css

@@ -0,0 +1,41 @@
+@layer rc-theme-win31.components {
+  /*
+   * 3.1 had no bottom sheet. The nearest real thing is a non-modal tool
+   * palette parked against an edge of the workspace, so that is what this
+   * renders: a framed panel with a caption-height grab strip and no rounding,
+   * no elevation, and no scrim.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-bottom-sheet {
+    --rc-bottom-sheet-bg: var(--win31-color-surface);
+    --rc-bottom-sheet-color: var(--win31-color-frame);
+    --rc-bottom-sheet-radius: var(--win31-radius);
+    --rc-bottom-sheet-shadow: var(--win31-window-frame);
+    --rc-bottom-sheet-scrim: transparent;
+    --rc-bottom-sheet-padding: var(--win31-gap-panel);
+    --rc-bottom-sheet-handle-color: var(--win31-color-title-active);
+    --rc-bottom-sheet-handle-radius: var(--win31-radius);
+    --rc-bottom-sheet-handle-inline-size: calc(32 * var(--win31-unit));
+    --rc-bottom-sheet-handle-block-size: calc(4 * var(--win31-unit));
+    --rc-bottom-sheet-snap-duration: 0ms;
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-bottom-sheet > dialog {
+    color: var(--win31-color-frame);
+    background: var(--win31-color-surface);
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-bottom-sheet > dialog::backdrop {
+    background: transparent;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-bottom-sheet [data-rc-bottom-sheet-handle] {
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-outset-border-color);
+    border-radius: var(--win31-radius);
+  }
+}