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

package/components/adaptive-menu.css

@@ -0,0 +1,43 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-adaptive-menu {
+    --rc-adaptive-menu-gap: var(--substrate-control-gap, 0.5rem);
+    --rc-adaptive-menu-icon-size: 1.25rem;
+
+    --rc-adaptive-menu-trigger-background: transparent;
+    --rc-adaptive-menu-trigger-border: 0;
+    --rc-adaptive-menu-trigger-color: var(--substrate-on-surface-muted, ButtonText);
+    --rc-adaptive-menu-trigger-block-size: 2.25rem;
+    --rc-adaptive-menu-trigger-inline-size: 2.25rem;
+    --rc-adaptive-menu-trigger-padding: 0.375rem;
+    --rc-adaptive-menu-trigger-radius: var(--substrate-radius-md, 0.5rem);
+
+    /*
+     * The trigger is drawn at 2.25rem for density, so the hit area is inflated
+     * separately to clear the 3rem touch minimum without widening the row.
+     */
+    --rc-adaptive-menu-touch-target-block-size: 3rem;
+    --rc-adaptive-menu-touch-target-inline-size: 3rem;
+    --rc-adaptive-menu-touch-target-overlap-inline-end: 0.375rem;
+
+    --rc-adaptive-menu-popup-background: var(--substrate-surface, Canvas);
+    --rc-adaptive-menu-popup-color: var(--rc-field-text, CanvasText);
+    --rc-adaptive-menu-popup-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-adaptive-menu-popup-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-adaptive-menu-popup-shadow: var(--substrate-shadow-lg, none);
+    --rc-adaptive-menu-popup-min-inline-size: 12rem;
+    --rc-adaptive-menu-popup-padding-block: 0.375rem;
+
+    /*
+     * The sheet presentation exists because a finger is doing the pointing, so
+     * its rows take the larger list item height rather than the menu row height.
+     */
+    --rc-adaptive-menu-item-min-block-size: 3rem;
+    --rc-adaptive-menu-item-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-adaptive-menu-item-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-adaptive-menu-item-gap: var(--substrate-item-gap, 0.5rem);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-adaptive-menu::part(trigger):hover {
+    background: color-mix(in srgb, var(--rc-accent, Highlight) 10%, var(--substrate-surface, Canvas));
+  }
+}

package/components/app-bar.css

@@ -0,0 +1,21 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-app-bar {
+    --rc-app-bar-bg: color-mix(in srgb, var(--substrate-surface, Canvas) 88%, transparent);
+    --rc-app-bar-color: var(--rc-field-text, CanvasText);
+    --rc-app-bar-scroll-divider: var(--rc-border, 1px solid ButtonBorder);
+    --rc-app-bar-shadow: none;
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+    font-family: var(--rc-font-family, inherit);
+    position: relative;
+    z-index: var(--rc-app-bar-z-index, 1);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-app-bar[data-scrolled] {
+    --rc-app-bar-shadow: var(--substrate-shadow-sm, none);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-app-bar :is(button, [role='button']) {
+    border-radius: var(--substrate-radius-md, 0.5rem);
+  }
+}

package/components/bottom-sheet.css

@@ -0,0 +1,90 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-bottom-sheet {
+    --rc-bottom-sheet-bg: var(--substrate-surface-raised, Canvas);
+    --rc-bottom-sheet-handle-color: var(--rc-border-color, GrayText);
+    --rc-bottom-sheet-handle-radius: var(--substrate-radius-pill, 999px);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-bottom-sheet > dialog {
+    position: fixed;
+    inset: auto 0 0;
+    box-sizing: border-box;
+    inline-size: 100%;
+    max-inline-size: var(--rc-bottom-sheet-max-inline-size, 40rem);
+    max-block-size: var(--rc-bottom-sheet-max-block-size, 70dvh);
+    margin-block: 0;
+    margin-inline: auto;
+    padding: var(--rc-bottom-sheet-padding, 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px)));
+    overflow: auto;
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-block-end: 0;
+    border-radius: var(--rc-bottom-sheet-radius, 1rem 1rem 0 0);
+    background: var(--rc-bottom-sheet-bg, var(--substrate-surface-raised, Canvas));
+    color: var(--rc-bottom-sheet-color, var(--rc-field-text, CanvasText));
+    box-shadow: var(--rc-bottom-sheet-shadow, var(--substrate-shadow-lg, none));
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-bottom-sheet > dialog::backdrop {
+    background: var(
+      --rc-bottom-sheet-scrim,
+      var(--rc-dialog-scrim, color-mix(in srgb, CanvasText 32%, transparent))
+    );
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-bottom-sheet
+    > dialog
+    [data-rc-bottom-sheet-handle] {
+    position: relative;
+    display: block;
+    inline-size: var(--rc-bottom-sheet-handle-target-inline-size, 100%);
+    min-block-size: var(--rc-bottom-sheet-handle-target-block-size, 3rem);
+    margin: var(--rc-bottom-sheet-handle-target-margin, 0);
+    padding: 0;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    appearance: none;
+    cursor: ns-resize;
+    touch-action: none;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-bottom-sheet
+    > dialog
+    [data-rc-bottom-sheet-handle]::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: var(--rc-bottom-sheet-handle-inline-size, 2rem);
+    block-size: var(--rc-bottom-sheet-handle-block-size, 0.25rem);
+    border-radius: 0;
+    background-color: transparent;
+    background-image:
+      radial-gradient(
+        circle 1px at calc(50% - 5px) 50%,
+        var(--rc-bottom-sheet-handle-color, ButtonBorder) 100%,
+        transparent 100%
+      ),
+      radial-gradient(
+        circle 1px at 50% 50%,
+        var(--rc-bottom-sheet-handle-color, ButtonBorder) 100%,
+        transparent 100%
+      ),
+      radial-gradient(
+        circle 1px at calc(50% + 5px) 50%,
+        var(--rc-bottom-sheet-handle-color, ButtonBorder) 100%,
+        transparent 100%
+      );
+    translate: -50% -50%;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-bottom-sheet
+    > dialog
+    [data-rc-bottom-sheet-handle]:focus-visible {
+    outline: 0.125rem solid var(--rc-accent, Highlight);
+    outline-offset: 0.25rem;
+  }
+}

package/components/button.css

@@ -0,0 +1,44 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-button {
+    --rc-button-bg: var(--substrate-surface-raised, ButtonFace);
+    --rc-button-color: var(--rc-button-text, ButtonText);
+    --rc-button-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-button-radius: var(--rc-control-radius, 0.5rem);
+    --rc-button-block-size: var(--rc-control-block-size, 2.5rem);
+    --rc-button-padding-block: var(--rc-control-padding-block, 0.5rem);
+    --rc-button-padding-inline: var(--rc-control-padding-inline, 0.75rem);
+    --rc-button-gap: var(--rc-control-gap, 0.5rem);
+    --rc-button-font: var(--rc-font-weight, 400) var(--rc-font-size, 1em) /
+      var(--rc-line-height, normal) var(--rc-font-family, inherit);
+    --rc-button-state-layer-bg: currentColor;
+    --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-button-state-layer-easing: var(--substrate-motion-easing, ease);
+    --rc-button-progress-color: var(--rc-button-text, ButtonText);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-button > button:focus-visible {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-button[disabled] > button:disabled {
+    opacity: var(--rc-disabled-opacity, 0.52);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-button[progress][progress-value]::part(progress) {
+    inset: 0.25rem;
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: calc(var(--rc-control-radius, 0.5rem) - 0.125rem);
+    background: color-mix(in srgb, var(--substrate-surface-raised, Canvas) 88%, currentColor);
+    font: 600 0.75rem / 1 var(--rc-font-family, inherit);
+    letter-spacing: 0.025em;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-button[icon-only] {
+    --rc-button-icon-size: var(--rc-control-block-size, 2.5rem);
+    --rc-icon-font-line-height: var(--rc-button-icon-size, 2.5rem);
+  }
+}

package/components/card.css

@@ -0,0 +1,51 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-card {
+    --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-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-card-shadow: var(--substrate-shadow-sm, none);
+    --rc-card-padding-block: 0.75rem;
+    --rc-card-padding-inline: 0.75rem;
+    --rc-card-actions-gap: 0.5rem;
+    --rc-card-title-font: 600 1rem / 1.4 var(--rc-font-family, inherit);
+    --rc-card-subtitle-color: color-mix(in srgb, currentColor 72%, transparent);
+    --rc-card-state-layer-bg: currentColor;
+    --rc-card-hover-state-layer-opacity: 0.08;
+    --rc-card-pressed-state-layer-opacity: 0.12;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-card[selected] {
+    box-shadow:
+      0 0 0 2px var(--rc-accent, Highlight),
+      var(--rc-card-shadow);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-card[disabled] {
+    opacity: var(--rc-disabled-opacity, 0.52);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-card > :is(h2, h3)[slot='title'] {
+    margin: 0;
+    color: var(--rc-card-title-color, inherit);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-card > h2[slot='title'] {
+    font-family: var(--rc-font-family, inherit);
+    font-size: 1.25rem;
+    font-weight: 650;
+    line-height: 1.35;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-card > h3[slot='title'] {
+    font-family: var(--rc-font-family, inherit);
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-card > :is(h2, h3)[slot='title'] > a {
+    color: inherit;
+    text-decoration: none;
+  }
+}

package/components/carousel.css

@@ -0,0 +1,31 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-carousel {
+    --rc-carousel-color: var(--substrate-on-surface, CanvasText);
+    --rc-carousel-gap: var(--substrate-control-gap, 0.5rem);
+
+    /*
+     * A slide is a raised card on the page surface, which is what separates it
+     * from the track behind it without needing a border.
+     */
+    --rc-carousel-item-background: var(--substrate-surface-raised, Canvas);
+    --rc-carousel-item-color: var(--substrate-on-surface, CanvasText);
+    --rc-carousel-item-border-radius: var(--substrate-radius-lg, 0.75rem);
+
+    --rc-carousel-navigation-button-background: color-mix(
+      in srgb,
+      var(--substrate-surface, Canvas) 88%,
+      transparent
+    );
+    --rc-carousel-navigation-button-color: var(--substrate-on-surface, CanvasText);
+    --rc-carousel-navigation-button-size: 2.25rem;
+    --rc-carousel-navigation-inset: 0.5rem;
+
+    --rc-carousel-pagination-item-active-color: var(--rc-accent, Highlight);
+    --rc-carousel-pagination-item-color: color-mix(
+      in srgb,
+      var(--substrate-on-surface-muted, GrayText) 40%,
+      transparent
+    );
+    --rc-carousel-pagination-item-size: 0.5rem;
+  }
+}

package/components/chip-group.css

@@ -0,0 +1,21 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-chip-group {
+    --rc-chip-group-column-gap: var(--substrate-control-gap, 0.5rem);
+    --rc-chip-group-row-gap: var(--substrate-control-gap, 0.5rem);
+    --rc-chip-group-padding-block: 0.25rem;
+
+    /*
+     * A scrolling group is padded on the inline axis so a chip snapped to the
+     * start does not sit flush against the edge it scrolled from.
+     */
+    --rc-chip-group-scroll-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-chip-group-scrollbar-width: none;
+
+    --rc-chip-group-toggle-gap: var(--substrate-control-gap, 0.5rem);
+    --rc-chip-group-toggle-icon-size: 1.125rem;
+    --rc-chip-group-toggle-separator-color: var(--substrate-border-color, ButtonBorder);
+    --rc-chip-group-toggle-separator-block-size: 1.5rem;
+    --rc-chip-group-toggle-separator-inline-size: 1px;
+    --rc-chip-group-toggle-separator-gap: var(--substrate-control-gap, 0.5rem);
+  }
+}

package/components/chip.css

@@ -0,0 +1,20 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-chip {
+    --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-border-color: var(--rc-accent);
+    --rc-chip-selected-bg: var(--rc-highlight, Highlight);
+    --rc-chip-selected-color: var(--rc-highlight-text, HighlightText);
+    --rc-chip-focus-ring: var(--rc-focus-ring);
+    --rc-chip-focus-ring-offset: var(--rc-focus-ring-offset);
+    --rc-chip-disabled-opacity: var(--rc-disabled-opacity);
+    --rc-chip-remove-target-size: 1.5rem;
+  }
+}

package/components/combobox.css

@@ -0,0 +1,55 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox {
+    display: inline-block;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox::part(anchor) {
+    min-block-size: var(--rc-control-block-size, 2.5rem);
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: var(--rc-control-radius, 0.5rem);
+    background: var(--rc-field, Field);
+    color: var(--rc-field-text, FieldText);
+    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);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox::part(anchor):hover {
+    border-color: color-mix(in srgb, var(--rc-accent, Highlight) 55%, var(--rc-border-color));
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox::part(anchor):focus-within {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+    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-combobox::part(listbox) {
+    --rc-listbox-option-gap: var(--rc-list-item-gap, var(--substrate-item-gap, 0.5rem));
+    --rc-listbox-option-min-block-size: 2.25rem;
+    --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-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-highlight, Highlight);
+    --rc-listbox-selected-color: var(--rc-highlight-text, HighlightText);
+    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-combobox::part(toggle) {
+    border-radius: var(--substrate-radius-sm, 0.25rem);
+    transition: background-color var(--rc-motion-duration, 160ms)
+      var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox::part(toggle):hover,
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox[open]::part(toggle) {
+    background: color-mix(in srgb, var(--rc-accent, Highlight) 12%, transparent);
+  }
+}

package/components/dialog.css

@@ -0,0 +1,43 @@
+@layer rc-theme-substrate.components {
+  /*
+   * Maps Substrate tokens onto the public rc-dialog properties. The surface and
+   * the fullscreen geometry are drawn by the component's own light-DOM base
+   * layer; what is left here is the mapping plus the open and close motion,
+   * which depends on state selectors a bounded property cannot express.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog {
+    --rc-dialog-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-dialog-radius: var(--substrate-radius-xl, 1rem);
+    --rc-dialog-background: var(--substrate-surface-raised, Canvas);
+    --rc-dialog-color: var(--rc-field-text, CanvasText);
+    --rc-dialog-shadow: var(--substrate-shadow-lg, none);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition:
+      display var(--substrate-motion-duration-slow, 240ms) allow-discrete,
+      overlay var(--substrate-motion-duration-slow, 240ms) allow-discrete,
+      opacity var(--substrate-motion-duration-slow, 240ms) var(--substrate-motion-easing, ease),
+      transform var(--substrate-motion-duration-slow, 240ms) var(--substrate-motion-easing, ease);
+    transition-behavior: allow-discrete;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog::backdrop {
+    transition: opacity var(--substrate-motion-duration-slow, 240ms)
+      var(--substrate-motion-easing, ease);
+  }
+
+  @starting-style {
+    :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog[open] {
+      opacity: 0;
+      transform: translateY(0.5rem) scale(0.98);
+    }
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog:not([open]) {
+    opacity: 0;
+    transform: translateY(0.5rem) scale(0.98);
+  }
+}

package/components/disclosure.css

@@ -0,0 +1,114 @@
+@layer rc-theme-substrate.components {
+  /*
+   * Maps Substrate tokens onto the public rc-disclosure properties, for both
+   * `rc-disclosure` and `rc-accordion`, since a panel reads the same properties
+   * either way. The boxes themselves are drawn by the component's own light-DOM
+   * base layer.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure {
+    /*
+     * Layout stays in theme CSS so a disclosure is laid out before the element
+     * upgrades; only the property-driven drawing lives in the component's base
+     * layer, which needs JS to install.
+     */
+    display: block;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) :is(rc-disclosure, rc-accordion) {
+    --rc-disclosure-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-disclosure-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-disclosure-background: var(--substrate-surface-raised, Canvas);
+    --rc-disclosure-color: var(--substrate-on-surface, CanvasText);
+    --rc-disclosure-open-shadow: var(--substrate-shadow-sm, none);
+
+    --rc-disclosure-summary-min-block-size: 2.75rem;
+    --rc-disclosure-summary-padding-block: 0.75rem;
+    --rc-disclosure-summary-padding-inline: 0.875rem;
+    --rc-disclosure-summary-gap: 0.75rem;
+    --rc-disclosure-summary-font: 650 var(--substrate-font-size, 0.95rem) /
+      var(--substrate-line-height, 1.45) var(--substrate-font-family, sans-serif);
+    --rc-disclosure-summary-hover-background: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 8%,
+      transparent
+    );
+
+    --rc-disclosure-content-padding-block: 0 0.875rem;
+    --rc-disclosure-content-padding-inline: 0.875rem;
+    --rc-disclosure-content-color: var(--substrate-on-surface-muted, CanvasText);
+
+    --rc-disclosure-duration: var(--substrate-motion-spatial-duration-default, 240ms);
+    --rc-disclosure-easing: var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    :is(rc-disclosure, rc-accordion)
+    > details {
+    overflow: clip;
+    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);
+  }
+
+  /*
+   * Substrate replaces the native marker with its own chevron, so it owns both
+   * halves of that swap: hiding `::marker` and drawing the affordance. Changing
+   * `display` here is safe precisely because this rule also supplies the
+   * replacement the lost `list-item` box would have drawn.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    :is(rc-disclosure, rc-accordion)
+    > details
+    > summary {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    transition:
+      background-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    :is(rc-disclosure, rc-accordion)
+    > details
+    > summary::marker {
+    content: '';
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    :is(rc-disclosure, rc-accordion)
+    > details
+    > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    :is(rc-disclosure, rc-accordion)
+    > details
+    > summary::after {
+    content: '';
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-block-start: 2px solid currentColor;
+    border-inline-end: 2px solid currentColor;
+    rotate: 45deg;
+    transition:
+      rotate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      translate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    :is(rc-disclosure, rc-accordion)
+    > details[open]
+    > summary::after {
+    rotate: 135deg;
+    translate: 0 -0.125rem;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    :is(rc-disclosure, rc-accordion)
+    > details
+    > :not(summary) {
+    display: flow-root;
+  }
+}

package/components/fab-menu.css

@@ -0,0 +1,36 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-fab-menu {
+    --rc-fab-menu-size: 3.5rem;
+    --rc-fab-menu-trigger-gap: 0.5rem;
+    --rc-fab-menu-padding-block: 0;
+    --rc-fab-menu-padding-inline: 1rem;
+    --rc-fab-menu-appearance: none;
+    --rc-fab-menu-border: 0;
+    --rc-fab-menu-bg: var(--rc-accent, Highlight);
+    --rc-fab-menu-bg-hover: var(--rc-fab-menu-bg);
+    --rc-fab-menu-bg-open: var(--rc-fab-menu-bg-hover);
+    --rc-fab-menu-color: var(--rc-on-accent, HighlightText);
+    --rc-fab-menu-shadow: var(--substrate-shadow-md, var(--rc-shadow-level2, none));
+    --rc-fab-menu-shadow-hover: var(--substrate-shadow-lg, var(--rc-shadow-level3, none));
+    --rc-fab-menu-shadow-open: var(--rc-fab-menu-shadow-hover);
+    --rc-fab-menu-shadow-active: var(--substrate-shadow-md, var(--rc-shadow-level2, none));
+    --rc-fab-menu-radius: var(--substrate-radius-lg, 1rem);
+    --rc-fab-menu-font: inherit;
+    --rc-fab-menu-font-family: inherit;
+    --rc-fab-menu-font-size: 0.875rem;
+    --rc-fab-menu-font-weight: 500;
+    --rc-fab-menu-letter-spacing: 0.00625em;
+    --rc-fab-menu-text-decoration: none;
+    --rc-fab-menu-user-select: none;
+    --rc-fab-menu-transition:
+      background var(--rc-motion-duration, 200ms) ease,
+      box-shadow var(--rc-motion-duration, 200ms) ease,
+      transform var(--rc-motion-duration, 200ms) ease;
+    --rc-fab-menu-active-transform: scale(0.96);
+    --rc-fab-menu-disabled-opacity: var(--rc-disabled-opacity, 0.38);
+    --rc-fab-menu-disabled-shadow: none;
+    --rc-fab-menu-focus-ring: var(--rc-focus-ring);
+    --rc-fab-menu-focus-ring-offset: var(--rc-focus-ring-offset);
+    --rc-fab-menu-popup-duration: var(--rc-motion-duration, 160ms);
+  }
+}

package/components/fab.css

@@ -0,0 +1,44 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-fab {
+    --rc-fab-size: 3.5rem;
+    --rc-fab-gap: 0.5rem;
+    --rc-fab-padding-block: 0;
+    --rc-fab-padding-inline: 1rem;
+    --rc-fab-border: 0;
+    --rc-fab-bg: var(--rc-accent, Highlight);
+    --rc-fab-bg-hover: var(--rc-fab-bg);
+    --rc-fab-color: var(--substrate-on-primary, HighlightText);
+    --rc-fab-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-fab-shadow: var(--substrate-shadow-md, none);
+    --rc-fab-shadow-hover: var(--substrate-shadow-lg, none);
+    --rc-fab-shadow-active: var(--rc-fab-shadow);
+    --rc-fab-font-family: var(--rc-font-family, inherit);
+    --rc-fab-font-size: var(--rc-font-size, 0.875rem);
+    --rc-fab-font-weight: 500;
+    --rc-fab-letter-spacing: 0.00625em;
+    --rc-fab-active-transform: scale(0.96);
+    --rc-fab-focus-ring: var(--rc-focus-ring);
+    --rc-fab-focus-ring-offset: var(--rc-focus-ring-offset);
+    --rc-fab-disabled-opacity: var(--rc-disabled-opacity, 0.38);
+    --rc-fab-disabled-shadow: none;
+    --rc-fab-transition:
+      background var(--rc-motion-duration, 200ms) ease,
+      box-shadow var(--rc-motion-duration, 200ms) ease,
+      transform var(--rc-motion-duration, 200ms) ease;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-fab > button {
+    transition:
+      box-shadow var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      transform var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-fab > button:hover {
+    box-shadow: var(--substrate-shadow-lg, none);
+    transform: translateY(-1px);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-fab > button:active {
+    transform: translateY(0);
+  }
+}