@rcarls/rc-theme-substrate 0.5.0 → 0.7.0

package/components/field.css

@@ -0,0 +1,155 @@
+@layer rc-theme-substrate.components {
+  /*
+   * rc-field already owns its own layout, invalid border, disabled opacity,
+   * focus outline, and forced-colors fallbacks, and it resets the slotted
+   * native control's chrome itself. Substrate only supplies its palette and
+   * the hover/focus polish its other form controls share, so the field reads
+   * as one of them rather than as a separate idiom.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-field {
+    /*
+     * The component is inline-block, so an unsized field shrink-wraps to its
+     * content: a provider-backed field with no value collapses to its chevron.
+     * Fill the container instead, capped so a field in a wide layout stays a
+     * readable measure.
+     */
+    display: inline-block;
+    inline-size: min(100%, 28rem);
+    --rc-field-background: var(--substrate-field, Field);
+    --rc-field-color: var(--rc-field-text, FieldText);
+    --rc-field-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-field-radius: var(--rc-control-radius, 0.5rem);
+    --rc-field-min-block-size: var(--rc-control-block-size, 2.5rem);
+    --rc-field-padding: var(--rc-control-padding-block, 0.5rem)
+      var(--rc-control-padding-inline, 0.75rem);
+    --rc-field-control-gap: var(--substrate-control-gap, 0.5rem);
+    --rc-field-label-color: var(--substrate-on-surface-muted, GrayText);
+    --rc-field-error-color: var(--substrate-error, red);
+    --rc-field-supporting-color: var(--substrate-on-surface-muted, GrayText);
+    --rc-field-supporting-font-size: 0.8125rem;
+    --rc-field-supporting-padding-block-start: 0.25rem;
+    --rc-field-focus-outline: var(--rc-focus-ring, 2px solid Highlight);
+    --rc-field-focus-outline-offset: var(--rc-focus-ring-offset, 2px);
+    --rc-field-disabled-opacity: var(--rc-disabled-opacity, 0.52);
+    font-family: var(--rc-font-family, inherit);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-field::part(field) {
+    transition:
+      border-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      box-shadow var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  /*
+   * rc-field resets the slotted native control's outline, but a ::slotted()
+   * rule loses to any page rule, such as a reset's Firefox :-moz-focusring
+   * outline. The field already shows focus, so clear the control's own
+   * outline from the light DOM too.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-field
+    > :is(input, select, textarea):focus-visible {
+    outline: none;
+  }
+
+  /* Same hover and focus treatment rc-select, rc-combobox, and rc-textarea use. */
+  /* Read-only fields keep focus treatment but skip the hover affordance. */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-field:not([data-readonly]):hover::part(field) {
+    border-color: color-mix(in srgb, var(--rc-accent, Highlight) 55%, var(--rc-border-color));
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-field[data-focused]::part(field) {
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-field[data-invalid]::part(label),
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-field[data-group][data-invalid]
+    > fieldset
+    > legend {
+    color: var(--rc-field-error-color, red);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-field[data-invalid]:hover::part(field) {
+    border-color: var(--rc-field-error-color, red);
+  }
+
+  /* A textarea grows downward, so its label and control belong at the top. */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-field[data-multiline]::part(field) {
+    align-items: flex-start;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-field[data-multiline]::part(control) {
+    align-items: flex-start;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-field > input,
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-field > textarea {
+    caret-color: var(--rc-accent, Highlight);
+  }
+
+  /*
+   * Control providers: rc-field's own surface draws the border, background,
+   * and focus ring, so the enhancing child has to stop drawing its own or the
+   * two sets of chrome nest visibly.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-field
+    > rc-textarea[data-rc-field-control] {
+    --rc-textarea-border: 0;
+    --rc-textarea-border-radius: 0;
+    --rc-textarea-background: transparent;
+    --rc-textarea-padding-block: 0;
+    --rc-textarea-padding-inline: 0;
+    inline-size: 100%;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-field
+    > rc-textarea[data-rc-field-control]::part(root):focus-within {
+    box-shadow: none;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-field
+    > :is(rc-select, rc-combobox)[data-rc-field-control] {
+    --rc-field: transparent;
+    inline-size: 100%;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-field
+    > rc-select[data-rc-field-control]::part(trigger),
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-field
+    > rc-combobox[data-rc-field-control]::part(anchor) {
+    min-block-size: 0;
+    padding-inline: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  /*
+   * Substrate sets the hover and focus chrome on the part directly rather than
+   * through a resettable property, so suppressing it needs the same
+   * specificity back.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-field
+    > rc-select[data-rc-field-control]::part(trigger):is(
+      :hover,
+      :focus-visible,
+      [aria-expanded='true']
+    ),
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-field
+    > rc-combobox[data-rc-field-control]::part(anchor):is(:hover, :focus-within) {
+    border-color: transparent;
+    background: transparent;
+    outline: none;
+    box-shadow: none;
+  }
+}

package/components/list-item.css

@@ -1,13 +1,10 @@
 @layer rc-theme-substrate.components {
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) {
+    /* Compatibility tokens retained for rc-listbox and embedded selectors. */
     --rc-list-item-gap: var(--substrate-item-gap, 0.5rem);
     --rc-list-item-min-block-size: 2.25rem;
     --rc-list-item-padding-block: var(--substrate-item-padding-block, 0.55rem);
     --rc-list-item-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
-    --rc-list-item-divider: 0;
-    --rc-list-item-bg: transparent;
-    --rc-list-item-color: var(--rc-field-text, FieldText);
-    --rc-list-item-supporting-color: var(--substrate-on-surface-muted, GrayText);
     --rc-list-item-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
     --rc-list-item-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
     --rc-list-item-selected-bg: var(--rc-highlight, Highlight);
@@ -15,41 +12,47 @@
     --rc-list-item-disabled-opacity: var(--rc-disabled-opacity, 0.52);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list-item {
-    display: flex;
-    align-items: center;
-    gap: var(--rc-list-item-gap);
-    min-block-size: var(--rc-list-item-min-block-size);
-    padding: var(--rc-list-item-padding-block) var(--rc-list-item-padding-inline);
-    border-block-end: var(--rc-list-item-divider);
-    background: var(--rc-list-item-bg);
-    color: var(--rc-list-item-color);
-    box-sizing: border-box;
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-list {
+    --rc-list-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-list-leading-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-list-trailing-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-list-row-gap: 0;
+    --rc-list-item-min-block-size: 2.25rem;
+    --rc-list-item-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-list-item-color: var(--rc-field-text, FieldText);
+    --rc-list-item-background: transparent;
+    --rc-list-item-selected-color: var(--rc-highlight-text, HighlightText);
+    --rc-list-item-selected-background: var(--rc-highlight, Highlight);
+    --rc-list-item-divider: 1px solid var(--substrate-border-color, GrayText);
+    --rc-list-item-state-layer-color: var(--rc-accent, Highlight);
+    --rc-list-item-hover-state-layer-opacity: 0.1;
+    --rc-list-item-focus-state-layer-opacity: 0.12;
+    --rc-list-item-pressed-state-layer-opacity: 0.16;
+    --rc-list-item-disabled-opacity: var(--rc-disabled-opacity, 0.52);
+    --rc-list-item-transition-duration: var(--rc-motion-effects-duration-fast, 100ms);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list-item__start,
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list-item__trailing,
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list-item__end {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-list[variant='segmented'] {
+    --rc-list-padding-inline: 0;
+    --rc-list-row-gap: 0.25rem;
+    --rc-list-item-background: var(--substrate-surface-raised, Field);
+    --rc-list-item-divider: 0;
+    --rc-list-item-border: 1px solid var(--substrate-border-color, GrayText);
+    --rc-list-item-border-radius: var(--substrate-radius-md, 0.375rem);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list-item__body {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    min-inline-size: 0;
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-list-item
+    > :where([data-rc-list-supporting], small) {
+    display: block;
+    color: var(--substrate-on-surface-muted, GrayText);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list-item__supporting {
-    color: var(--rc-list-item-supporting-color);
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-list-item
+    > :is(input[type='checkbox'], input[type='radio'])[slot='leading'] {
+    margin: 0;
+    accent-color: var(--rc-accent, Highlight);
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-listbox,

package/components/listbox.css

@@ -5,8 +5,10 @@
     --rc-listbox-option-padding-block: var(--substrate-item-padding-block, 0.55rem);
     --rc-listbox-option-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
     --rc-listbox-option-transition:
-      background-color var(--substrate-motion-duration, 160ms) var(--substrate-motion-easing, ease),
-      color var(--substrate-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+      background-color var(--substrate-motion-effects-duration-default, 160ms)
+        var(--substrate-motion-easing, ease),
+      color var(--substrate-motion-effects-duration-default, 160ms)
+        var(--substrate-motion-easing, ease);
     --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);

package/components/markdown-editor.css

@@ -1,37 +1,50 @@
 @layer rc-theme-substrate.components {
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-markdown-editor {
-    --rme-padding: 0.75rem;
-    --rme-border: var(--rc-border, 1px solid ButtonBorder);
-    --rme-radius: var(--substrate-radius-lg, 0.75rem);
-    --rme-background: var(--rc-field, Field);
-    --rme-color: var(--rc-field-text, FieldText);
-    --rme-toolbar-background: var(--substrate-surface-raised, Canvas);
-    --rme-toolbar-color: var(--substrate-on-surface, CanvasText);
-    --rme-toolbar-border: var(--rc-border, 1px solid ButtonBorder);
-    --rme-toolbar-gap: 0.125rem;
-    --rme-toolbar-padding: 0.25rem;
-    --rme-toolbar-radius: var(--substrate-radius-lg, 0.75rem) var(--substrate-radius-lg, 0.75rem) 0
-      0;
-    --rme-toolbar-button-size: var(--rc-control-block-size, 2.5rem);
-    --rme-toolbar-button-color: var(--substrate-on-surface, ButtonText);
-    --rme-toolbar-button-border: 1px solid transparent;
-    --rme-toolbar-button-radius: var(--substrate-radius-md, 0.5rem);
-    --rme-toolbar-button-active-background: var(--substrate-primary-container, Highlight);
-    --rme-toolbar-button-active-color: var(--substrate-on-primary-container, HighlightText);
-    --rme-toolbar-button-active-border: 1px solid var(--substrate-primary, Highlight);
-    --rme-toolbar-focus-outline: var(--rc-focus-ring, 2px solid Highlight);
-    --rme-toolbar-focus-outline-offset: var(--rc-focus-ring-offset, 2px);
-    --rme-toolbar-select-background: var(--substrate-field, Field);
-    --rme-toolbar-select-color: var(--substrate-on-surface, FieldText);
-    --rme-toolbar-select-border: var(--rc-border, 1px solid ButtonBorder);
-    --rme-toolbar-select-radius: var(--substrate-radius-sm, 0.25rem);
-    --rme-toolbar-select-active-background: var(--substrate-primary-container, Highlight);
-    --rme-toolbar-select-active-color: var(--substrate-on-primary-container, HighlightText);
-    --rme-toolbar-select-active-border-color: var(--substrate-primary, Highlight);
-    --rme-toolbar-input-background: var(--substrate-field, Field);
-    --rme-toolbar-input-color: var(--substrate-on-surface, FieldText);
-    --rme-toolbar-input-border: var(--rc-border, 1px solid ButtonBorder);
-    --rme-toolbar-input-radius: var(--substrate-radius-sm, 0.25rem);
+    --rc-markdown-editor-padding: 0.75rem;
+    --rc-markdown-editor-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-markdown-editor-border-radius: 0 0 var(--substrate-radius-lg, 0.75rem)
+      var(--substrate-radius-lg, 0.75rem);
+    --rc-markdown-editor-background: var(--rc-field, Field);
+    --rc-markdown-editor-color: var(--rc-field-text, FieldText);
+    --rc-markdown-editor-toolbar-background: var(--substrate-surface-raised, Canvas);
+    --rc-markdown-editor-toolbar-color: var(--substrate-on-surface, CanvasText);
+    --rc-markdown-editor-toolbar-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-markdown-editor-toolbar-gap: 0.125rem;
+    --rc-markdown-editor-toolbar-padding: 0.25rem;
+    --rc-markdown-editor-toolbar-radius: var(--substrate-radius-lg, 0.75rem)
+      var(--substrate-radius-lg, 0.75rem) 0 0;
+    --rc-markdown-editor-toolbar-button-size: var(--rc-control-block-size, 2.5rem);
+    --rc-markdown-editor-toolbar-button-color: var(--substrate-on-surface, ButtonText);
+    --rc-markdown-editor-toolbar-button-border: 1px solid transparent;
+    --rc-markdown-editor-toolbar-button-radius: var(--substrate-radius-md, 0.5rem);
+    --rc-markdown-editor-toolbar-button-active-background: var(
+      --substrate-primary-container,
+      Highlight
+    );
+    --rc-markdown-editor-toolbar-button-active-color: var(
+      --substrate-on-primary-container,
+      HighlightText
+    );
+    --rc-markdown-editor-toolbar-button-active-border: 1px solid var(--substrate-primary, Highlight);
+    --rc-markdown-editor-toolbar-focus-outline: var(--rc-focus-ring, 2px solid Highlight);
+    --rc-markdown-editor-toolbar-focus-outline-offset: var(--rc-focus-ring-offset, 2px);
+    --rc-markdown-editor-toolbar-select-background: var(--substrate-field, Field);
+    --rc-markdown-editor-toolbar-select-color: var(--substrate-on-surface, FieldText);
+    --rc-markdown-editor-toolbar-select-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-markdown-editor-toolbar-select-radius: var(--substrate-radius-sm, 0.25rem);
+    --rc-markdown-editor-toolbar-select-active-background: var(
+      --substrate-primary-container,
+      Highlight
+    );
+    --rc-markdown-editor-toolbar-select-active-color: var(
+      --substrate-on-primary-container,
+      HighlightText
+    );
+    --rc-markdown-editor-toolbar-select-active-border-color: var(--substrate-primary, Highlight);
+    --rc-markdown-editor-toolbar-input-background: var(--substrate-field, Field);
+    --rc-markdown-editor-toolbar-input-color: var(--substrate-on-surface, FieldText);
+    --rc-markdown-editor-toolbar-input-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-markdown-editor-toolbar-input-radius: var(--substrate-radius-sm, 0.25rem);
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-markdown-editor::part(rich-view) {

package/components/menu.css

@@ -1,5 +1,9 @@
 @layer rc-theme-substrate.components {
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-menu {
+  /*
+   * Declared on the theme root rather than on rc-menu so menus rendered
+   * inside other shadow roots inherit the same values.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) {
     --rc-menu-item-gap: var(--substrate-item-gap, 0.5rem);
     --rc-menu-item-min-block-size: 2.25rem;
     --rc-menu-item-padding-block: var(--substrate-item-padding-block, 0.55rem);
@@ -7,12 +11,13 @@
     --rc-menu-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
     --rc-menu-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
     --rc-menu-check-size: 1.25rem;
+    --rc-menu-background: var(--substrate-surface-raised, Canvas);
+    --rc-menu-shadow: var(--rc-shadow, none);
+    --rc-menu-padding-block: 0.25rem;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-menu {
     display: inline-block;
-    border: var(--rc-border, 1px solid ButtonBorder);
-    border-radius: var(--substrate-radius-lg, 0.75rem);
-    background: var(--substrate-surface-raised, Canvas);
-    box-shadow: var(--rc-shadow, none);
-    padding-block: 0.25rem;
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-menu [data-group-label] {

package/components/modes.css

@@ -21,4 +21,40 @@
       view-transition-name: var(--rc-view-transition-name, none);
     }
   }
+
+  /*
+   * The vestibular harm reduced motion guards against is movement across the
+   * visual field, which a color or opacity change does not trigger; removing
+   * every transition over-corrected. Spatial motion still goes fully to
+   * zero. Effects motion is kept but shortened, scaled down from
+   * Substrate's own already-quick 100/160/240ms scale. The two legacy
+   * primitives (--substrate-motion-duration and its -slow companion,
+   * predating the effects/spatial split) and the cross-theme compatibility
+   * token stay at zero: dialog.css is their one remaining direct consumer,
+   * animating opacity, display, and transform together in one declaration
+   * that mixes spatial and effects properties and can't be cleanly
+   * classified into one bucket. (That file's own transform-based entrance
+   * is a separate, pre-existing conflict with rc-dialog's pointer-resize
+   * geometry reads and remains outside this theme-level override.)
+   */
+  @media (prefers-reduced-motion: reduce) {
+    .rc-theme-substrate,
+    :host(.rc-theme-substrate) {
+      --substrate-motion-duration: 0ms;
+      --substrate-motion-duration-slow: 0ms;
+      --substrate-motion-effects-duration-fast: 40ms;
+      --substrate-motion-effects-duration-default: 55ms;
+      --substrate-motion-effects-duration-slow: 70ms;
+      --substrate-motion-spatial-duration-fast: 0ms;
+      --substrate-motion-spatial-duration-default: 0ms;
+      --substrate-motion-spatial-duration-slow: 0ms;
+      --rc-motion-duration: 0ms;
+      --rc-motion-effects-duration-fast: 40ms;
+      --rc-motion-effects-duration-default: 55ms;
+      --rc-motion-effects-duration-slow: 70ms;
+      --rc-motion-spatial-duration-fast: 0ms;
+      --rc-motion-spatial-duration-default: 0ms;
+      --rc-motion-spatial-duration-slow: 0ms;
+    }
+  }
 }

package/components/popover.css

@@ -0,0 +1,13 @@
+@layer rc-theme-substrate.components {
+  /*
+   * The border, corner, and elevation come from the bridge's --rc-popup-*
+   * tokens. A popover sits on the raised surface like a menu, with item-scale
+   * padding. Declared on the theme root so popovers rendered inside other
+   * shadow roots inherit the same values.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) {
+    --rc-popover-background: var(--substrate-surface-raised, Canvas);
+    --rc-popover-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-popover-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+  }
+}

package/components/progress.css

@@ -0,0 +1,11 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-progress::part(value-display) {
+    color: var(--substrate-on-surface-muted, GrayText);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-progress {
+    --rc-progress-fill-transition-duration: var(--rc-motion-effects-duration-fast, 100ms);
+    --rc-progress-fill-transition-easing: var(--rc-motion-effects-easing-fast, ease-out);
+  }
+}

package/components/scroller.css

@@ -0,0 +1,19 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-scroller {
+    /*
+     * Capped a little narrower than Material's 1200px: Substrate runs a smaller
+     * base font, so the same pixel width carries more characters per line.
+     */
+    --rc-scroller-content-max-inline-size: 68rem;
+    --rc-scroller-content-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-scroller-content-row-gap: var(--substrate-item-gap, 0.5rem);
+
+    --rc-scroller-scrollbar-width: thin;
+    --rc-scroller-scrollbar-color: color-mix(
+        in srgb,
+        var(--substrate-on-surface-muted, GrayText) 45%,
+        transparent
+      )
+      transparent;
+  }
+}

package/components/search-bar.css

@@ -22,7 +22,9 @@
     outline-offset: var(--rc-focus-ring-offset, 2px);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-search-bar > input[type='search']:focus-visible {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-search-bar
+    > input[type='search']:focus-visible {
     outline: none;
   }
 }

package/components/segmented-button.css

@@ -1,32 +1,7 @@
 @layer rc-theme-substrate.components {
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-segmented-button {
-    --_rc-segmented-button-fieldset-display: inline-flex;
-    --_rc-segmented-button-fieldset-margin: 0;
-    --_rc-segmented-button-fieldset-padding: 0;
-    --_rc-segmented-button-fieldset-border: 0;
-    --_rc-segmented-button-fieldset-radius: 0;
-    --_rc-segmented-button-fieldset-overflow: visible;
-    --_rc-segmented-button-legend-position: absolute;
-    --_rc-segmented-button-legend-inline-size: 1px;
-    --_rc-segmented-button-legend-block-size: 1px;
-    --_rc-segmented-button-legend-margin: -1px;
-    --_rc-segmented-button-legend-padding: 0;
-    --_rc-segmented-button-legend-border: 0;
-    --_rc-segmented-button-legend-overflow: hidden;
-    --_rc-segmented-button-legend-clip: rect(0 0 0 0);
-    --_rc-segmented-button-legend-white-space: nowrap;
-    --_rc-segmented-button-segment-display: inline-flex;
-    --_rc-segmented-button-segment-cursor: pointer;
-    --_rc-segmented-button-segment-user-select: none;
-    --_rc-segmented-button-disabled-cursor: not-allowed;
-    --_rc-segmented-button-radio-position: absolute;
-    --_rc-segmented-button-radio-inline-size: 1px;
-    --_rc-segmented-button-radio-block-size: 1px;
-    --_rc-segmented-button-radio-margin: 0;
-    --_rc-segmented-button-radio-opacity: 0;
-    --_rc-segmented-button-radio-pointer-events: none;
-    --_rc-segmented-button-selected-icon-display: inline-grid;
-    --_rc-segmented-button-vertical-border-inline-start: var(--rc-border);
+    /* One switch turns on the component-owned segmented recipe. */
+    --rc-segmented-button-appearance: segmented;
     --rc-segmented-button-border: var(--rc-border);
     --rc-segmented-button-radius: var(--rc-control-radius);
     --rc-segmented-button-divider: 0;

package/components/select.css

@@ -1,4 +1,25 @@
 @layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    :is(rc-select, rc-combobox)[popup-mode='dialog']::part(dialog) {
+    position: fixed;
+    inset: auto;
+    top: var(--rc-dialog-visual-viewport-top, 0);
+    left: var(--rc-dialog-visual-viewport-left, 0);
+    box-sizing: border-box;
+    inline-size: var(--rc-dialog-visual-viewport-width, 100dvw);
+    block-size: var(--rc-dialog-visual-viewport-height, 100dvh);
+    max-inline-size: none;
+    max-block-size: none;
+    margin: 0;
+    padding-block: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-bottom));
+    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
+    resize: none;
+    overflow: hidden;
+    border-radius: 0;
+    box-shadow: none;
+    transform: none;
+  }
+
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-select {
     display: inline-block;
   }

package/components/splitter.css

@@ -1,14 +1,39 @@
 @layer rc-theme-substrate.components {
+  /*
+   * Geometry is deliberately left to the component's own defaults here; this
+   * theme only paints the splitter. See the matching assertion in
+   * components.test.ts.
+   */
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-splitter {
+    /*
+     * Both of these used to mix against the bare `Canvas` and `ButtonBorder`
+     * system colors, which have no value outside a browser and so could not
+     * reach the token export at all. Mixing against the theme's own surface and
+     * border keeps the intent and makes the result a real color.
+     */
     --rc-splitter-separator-color: color-mix(
       in srgb,
       var(--rc-accent, Highlight) 8%,
-      Canvas
+      var(--substrate-surface, Canvas)
     );
     --rc-splitter-handle-color: color-mix(
       in srgb,
       var(--rc-accent, Highlight) 45%,
-      ButtonBorder
+      var(--substrate-border-color, ButtonBorder)
     );
+
+    --rc-splitter-handle-fill: var(--substrate-border-color, ButtonBorder);
+    --rc-splitter-handle-hover-fill: var(--rc-accent, Highlight);
+    --rc-splitter-handle-transition: var(--substrate-motion-effects-duration-default, 160ms);
+    --rc-splitter-keyline: var(--rc-border, 1px solid ButtonBorder);
+
+    --rc-splitter-collapse-button-bg: var(--substrate-surface-raised, ButtonFace);
+    --rc-splitter-collapse-button-hover-bg: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 10%,
+      var(--substrate-surface-raised, ButtonFace)
+    );
+    --rc-splitter-collapse-button-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-splitter-collapse-button-color: var(--substrate-on-surface, ButtonText);
   }
 }

package/components/textarea.css

@@ -1,8 +1,9 @@
 @layer rc-theme-substrate.components {
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-textarea {
-    --rc-textarea-padding: 0.75rem;
+    --rc-textarea-padding-block: 0.75rem;
+    --rc-textarea-padding-inline: 0.75rem;
     --rc-textarea-border: var(--rc-border, 1px solid ButtonBorder);
-    --rc-textarea-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-textarea-border-radius: var(--substrate-radius-lg, 0.75rem);
     --rc-textarea-background: var(--rc-field, Field);
     --rc-textarea-color: var(--rc-field-text, FieldText);
     font-family: var(--rc-font-family, inherit);

package/components/toolbar.css

@@ -1,10 +1,17 @@
 @layer rc-theme-substrate.components {
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-toolbar {
     display: inline-block;
+
+    --rc-toolbar-gap-inline: 0.125rem;
+    --rc-toolbar-padding-block: 0.25rem;
+    --rc-toolbar-padding-inline: 0.25rem;
+    --rc-toolbar-radius: var(--substrate-radius-md, 0.5rem);
+    --rc-toolbar-vertical-radius: var(--substrate-radius-md, 0.5rem);
+    --rc-toolbar-flex-wrap: nowrap;
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-toolbar::part(root) {
-    gap: 0.125rem;
+    gap: var(--rc-toolbar-gap-inline, 0.125rem);
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-toolbar > button {
@@ -22,9 +29,7 @@
     background: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-toolbar
-    > button[aria-pressed='true'] {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-toolbar > button[aria-pressed='true'] {
     background: var(--rc-highlight, Highlight);
     color: var(--rc-highlight-text, HighlightText);
   }

package/components/tooltip.css

@@ -0,0 +1,15 @@
+@layer rc-theme-substrate.components {
+  /*
+   * Tooltips use the inverse surface, like snackbars. Declared on the theme
+   * root so tooltips inside other shadow roots inherit the same values.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) {
+    --rc-tooltip-padding-block: 0.375rem;
+    --rc-tooltip-padding-inline: 0.625rem;
+    --rc-tooltip-border: 0;
+    --rc-tooltip-radius: var(--substrate-radius-sm, 0.25rem);
+    --rc-tooltip-background: var(--substrate-inverse-surface, CanvasText);
+    --rc-tooltip-color: var(--substrate-inverse-on-surface, Canvas);
+    --rc-tooltip-shadow: var(--substrate-shadow-sm, none);
+  }
+}