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

package/components/markdown-editor.css

@@ -0,0 +1,72 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-markdown-editor {
+    --rc-markdown-editor-background: var(--md-sys-color-surface, Canvas);
+    --rc-markdown-editor-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-markdown-editor-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-markdown-editor-border-radius: 0 0 var(--md-sys-shape-corner-small, 0.5rem)
+      var(--md-sys-shape-corner-small, 0.5rem);
+    --rc-markdown-editor-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
+    --rc-markdown-editor-padding: 1rem;
+    --rc-markdown-editor-toolbar-gap: 0.25rem;
+    --rc-markdown-editor-toolbar-button-size: 2.5rem;
+    --rc-markdown-editor-toolbar-padding: 0.25rem;
+    --rc-markdown-editor-toolbar-radius: var(--md-sys-shape-corner-small, 0.5rem)
+      var(--md-sys-shape-corner-small, 0.5rem) 0 0;
+    --rc-markdown-editor-toolbar-background: var(--md-sys-color-surface-container, Canvas);
+    --rc-markdown-editor-toolbar-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-markdown-editor-toolbar-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-markdown-editor-toolbar-button-color: var(--md-sys-color-on-surface-variant, ButtonText);
+    --rc-markdown-editor-toolbar-button-border: 0;
+    --rc-markdown-editor-toolbar-button-radius: var(--md-sys-shape-corner-full, 999px);
+    --rc-markdown-editor-toolbar-button-active-background: var(
+      --md-sys-color-secondary-container,
+      Highlight
+    );
+    --rc-markdown-editor-toolbar-button-active-color: var(
+      --md-sys-color-on-secondary-container,
+      HighlightText
+    );
+    --rc-markdown-editor-toolbar-button-active-border: 0;
+    --rc-markdown-editor-toolbar-button-hover-opacity: var(
+      --md-sys-state-hover-state-layer-opacity,
+      0.08
+    );
+    --rc-markdown-editor-toolbar-button-focus-opacity: var(
+      --md-sys-state-focus-state-layer-opacity,
+      0.12
+    );
+    --rc-markdown-editor-toolbar-button-pressed-opacity: var(
+      --md-sys-state-pressed-state-layer-opacity,
+      0.12
+    );
+    --rc-markdown-editor-toolbar-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
+    --rc-markdown-editor-toolbar-focus-outline-offset: 1px;
+    --rc-markdown-editor-toolbar-select-background: var(
+      --md-sys-color-surface-container-highest,
+      Field
+    );
+    --rc-markdown-editor-toolbar-select-color: var(--md-sys-color-on-surface, FieldText);
+    --rc-markdown-editor-toolbar-select-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-markdown-editor-toolbar-select-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    --rc-markdown-editor-toolbar-select-active-background: var(
+      --md-sys-color-secondary-container,
+      Highlight
+    );
+    --rc-markdown-editor-toolbar-select-active-color: var(
+      --md-sys-color-on-secondary-container,
+      HighlightText
+    );
+    --rc-markdown-editor-toolbar-select-active-border-color: var(--md-sys-color-primary, Highlight);
+    --rc-markdown-editor-toolbar-input-background: var(
+      --md-sys-color-surface-container-highest,
+      Field
+    );
+    --rc-markdown-editor-toolbar-input-color: var(--md-sys-color-on-surface, FieldText);
+    --rc-markdown-editor-toolbar-input-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-markdown-editor-toolbar-input-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-markdown-editor::part(rich-view) {
+    font-family: var(--md-sys-typescale-body-large-font, inherit);
+  }
+}

package/components/menu-button.css

@@ -0,0 +1,126 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button {
+    font-family: var(--md-sys-typescale-label-large-font, inherit);
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    font-weight: 500;
+
+    --rc-menu-button-trigger-border: 0;
+    --rc-menu-button-trigger-background: transparent;
+    --rc-menu-button-trigger-color: var(--md-sys-color-primary, ButtonText);
+    --rc-menu-button-trigger-transition:
+      background-color var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease),
+      color var(--rc-motion-effects-duration-fast, 150ms) var(--rc-motion-effects-easing-fast, ease);
+    --rc-menu-button-trigger-hover-background: color-mix(
+      in srgb,
+      var(--md-sys-color-primary, Highlight) 8%,
+      transparent
+    );
+    --rc-menu-button-trigger-hover-color: var(--md-sys-color-primary, ButtonText);
+    --rc-menu-button-trigger-open-background: var(--md-sys-color-secondary-container, ButtonFace);
+    --rc-menu-button-trigger-open-color: var(--md-sys-color-on-secondary-container, ButtonText);
+    --rc-menu-button-indicator-size: 1.5rem;
+    --rc-menu-button-indicator-color: var(--md-sys-color-on-surface-variant, CanvasText);
+  }
+
+  /*
+   * MD3 "Small" icon button sizing (40dp square trigger / 24dp icon) for an
+   * icon-only rc-menu-button trigger — e.g. an app bar's overflow button.
+   * rc-menu-button's own touch-target affordance (min-inline/block-size
+   * 3rem on the trigger wrapper, plus the light-DOM hit-slop) makes up the
+   * difference to the 48dp minimum tap target on its own.
+   * https://m3.material.io/components/icon-buttons/specs
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button[icon-only] {
+    --rc-menu-button-trigger-block-size: 2.5rem;
+    --rc-menu-button-trigger-padding-block: 0;
+    --rc-menu-button-trigger-padding-inline: 0;
+    --rc-menu-button-trigger-gap: 0;
+    --rc-menu-button-icon-size: 2.5rem;
+  }
+
+  /* Adaptive overflow keeps the authored menu label in the trigger, so the
+     shared label marker is the one direct child that is not icon content. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu-button[icon-only]
+    > [slot='trigger']
+    > :not([data-rc-menu-label]) {
+    font-size: var(--rc-icon-button-icon-font-size, 1.5rem);
+    line-height: var(--rc-icon-button-icon-font-size, 1.5rem) !important;
+  }
+
+  /*
+   * Narrow width: trims the trigger's inline size (32dp, the MD3 "Small"
+   * narrow-width spec value) without changing its height. Suits a dense
+   * context that already has an unambiguous, self-labeling icon and no
+   * neighbors it needs to align widths with — an app bar's trailing
+   * overflow trigger is the canonical case, so this also defaults the
+   * trailing-edge overlap token: (3rem default touch target - 2rem icon
+   * size) / 2, giving back exactly what the touch target would otherwise
+   * reserve past the visible trigger. Trailing-edge only, matching the
+   * "trailing overflow trigger" framing above -- see rc-button's own
+   * narrow-variant comment for why only one side defaults.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu-button.rc-menu-button--narrow[icon-only] {
+    --rc-menu-button-icon-size: 2rem;
+    --rc-menu-button-touch-target-overlap-inline-end: 0.5rem;
+  }
+
+  /*
+   * A submenu trigger (a cascading menu item that opens a nested rc-menu)
+   * is still an rc-menu-button underneath, but MD3 treats it as a menu row
+   * with a trailing disclosure chevron — not as its own standalone pill
+   * control. The base rule above (and rc-menu-button's own defaults) style
+   * it as the latter: a primary-colored, pill-shaped, independently-padded
+   * trigger, layered on top of whatever geometry rc-menu's own item CSS
+   * (menu.css / rc-base) tries to apply to the same element by virtue of
+   * its role="menuitem" — hence the mismatched shape and the icon sitting
+   * at a different inset than its sibling rows.
+   *
+   * The consumer marks this case the same way rc-menu itself expects a
+   * cascading item to be marked (role="menuitem" — see menu.css and
+   * rc-menu's own light-DOM CSS), so key every geometry/color token here
+   * off rc-menu's own item, hover, and active tokens (--rc-menu-item-...,
+   * --rc-menu-hover-..., --rc-menu-active-...) instead of hand-matching
+   * values that could drift out of sync with a sibling plain-button item
+   * later.
+   * https://m3.material.io/components/menus/specs
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button[role='menuitem'] {
+    font-family: var(--md-sys-typescale-body-large-font, inherit);
+    font-size: var(--md-sys-typescale-body-large-size, 1rem);
+    font-weight: 400;
+
+    --rc-menu-button-trigger-block-size: var(--rc-menu-item-min-block-size, 3rem);
+    --rc-menu-button-trigger-padding-block: var(--rc-menu-item-padding-block, 0);
+    --rc-menu-button-trigger-padding-inline: var(--rc-menu-item-padding-inline, 0.75rem);
+    --rc-menu-button-trigger-gap: var(--rc-menu-item-gap, 0.75rem);
+    --rc-menu-button-trigger-radius: 0;
+    --rc-menu-button-trigger-border: 0;
+    --rc-menu-button-trigger-background: transparent;
+    --rc-menu-button-trigger-color: inherit;
+    --rc-menu-button-trigger-hover-background: var(--rc-menu-hover-bg);
+    --rc-menu-button-trigger-hover-color: var(--rc-menu-hover-color, inherit);
+    --rc-menu-button-trigger-open-background: var(--rc-menu-active-bg);
+    --rc-menu-button-trigger-open-color: var(--rc-menu-active-color, inherit);
+  }
+
+  /*
+   * rc-menu's own light-DOM CSS (rc-base, an even-higher-priority layer
+   * than this one — it's registered at custom-element-connect time,
+   * after every static stylesheet) matches *any* role="menuitem" element
+   * for its generic item padding, which includes this host itself, not
+   * just plain-button items. Left alone, that stacks on top of the
+   * trigger-inline padding bridged above: the host absorbs one
+   * --rc-menu-item-padding-inline, then the trigger button absorbs
+   * another, doubling the icon's inset versus a sibling row. The host
+   * itself isn't a visible surface — all padding belongs on the one
+   * real, visible trigger button — so it needs to contribute zero here,
+   * which (since rc-base doesn't mark its own padding !important) is
+   * only reachable with !important of our own.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button[role='menuitem'] {
+    padding-inline: 0 !important;
+  }
+}

package/components/menu.css

@@ -0,0 +1,147 @@
+@layer rc-theme-material.components {
+  /* Container + token overrides ------------------------------------------- */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu {
+    background: var(--md-menu-container-color, var(--md-sys-color-surface-container, Canvas));
+    border: none;
+    border-radius: var(--md-menu-container-shape, 4px);
+    box-shadow:
+      0 1px 2px rgba(0, 0, 0, 0.3),
+      0 2px 6px 2px rgba(0, 0, 0, 0.15);
+    padding-block: 0.5rem;
+    color: var(--md-sys-color-on-surface, CanvasText);
+    font-family: var(--md-sys-typescale-body-large-font, inherit);
+    font-size: var(--md-sys-typescale-body-large-size, 1rem);
+    line-height: var(--md-sys-typescale-body-large-line-height, 1.5rem);
+
+    /* Item geometry — M3 menu item: 48dp height, 12dp h-padding, 12dp gap */
+    --rc-menu-item-min-block-size: 3rem;
+    --rc-menu-item-padding-block: 0;
+    --rc-menu-item-padding-inline: 0.75rem;
+    --rc-menu-item-gap: 0.75rem;
+    --rc-menu-item-transition:
+      background-color var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease),
+      color var(--rc-motion-effects-duration-fast, 150ms) var(--rc-motion-effects-easing-fast, ease);
+
+    /* State layers derived from on-surface (M3: 8% hover, 12% keyboard cursor) */
+    --rc-menu-hover-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 8%,
+      transparent
+    );
+    --rc-menu-hover-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-menu-active-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 12%,
+      transparent
+    );
+    --rc-menu-active-color: var(--md-sys-color-on-surface, CanvasText);
+
+    /* Check/radio indicator — M3 trailing indicator column is 24dp wide */
+    --rc-menu-check-size: 1.5rem;
+    --rc-menu-check-color: var(--md-sys-color-primary, Highlight);
+
+    /* Trailing shortcut labels (label-large) */
+    --rc-menu-shortcut-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    --rc-menu-shortcut-color: var(--md-sys-color-on-surface-variant, GrayText);
+    /* Dividers: outline-variant, full-width by default */
+    --rc-menu-separator-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
+    --rc-menu-separator-margin-block: 0.5rem;
+
+    /* Disabled: M3 uses 38% opacity on on-surface */
+    --rc-menu-disabled-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-menu-disabled-opacity: 0.38;
+
+    /* Section label color */
+    --rc-menu-group-label-color: var(--md-sys-color-on-surface-variant, GrayText);
+  }
+
+  /* M3 uses the state-layer cursor, not a container focus ring ------------- */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu:focus-visible {
+    outline: none;
+  }
+
+  /*
+   * M3 baseline menu items are rectangular full-width rows (unlike a
+   * standalone rc-button, which is a pill) — rc-menu's own structural CSS
+   * intentionally leaves shape undecided (it's a themed concern), so claim
+   * it explicitly here rather than leaving items to whatever shape a
+   * consumer's own incidental button styling might otherwise supply.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) {
+    border-radius: 0;
+  }
+
+  /*
+   * Sizes an item's own leading icon to the M3 menu leading-icon size.
+   * Unlike an icon-only rc-button, a menu item routinely combines an icon
+   * *and* a label (they aren't mutually exclusive), so "first child" isn't
+   * a safe stand-in for "the icon" here the way it is there — this only
+   * sizes content the consumer has actually marked as an icon.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])
+    :is([data-rc-icon], [data-rc-menu-leading], [data-rc-menu-icon]) {
+    flex: none;
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+  }
+
+  /* Current item (navigation active / selected radio row) gets secondary-container */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu [aria-current='true'] {
+    background: var(--md-sys-color-secondary-container, Highlight);
+    color: var(--md-sys-color-on-secondary-container, HighlightText);
+  }
+
+  /* M3 single-choice menus use the same trailing check affordance as other
+   * selected menu rows; role=menuitemradio continues to carry semantics. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu
+    [role='menuitemradio'][aria-checked='true']::after {
+    content: '✓';
+  }
+
+  /* Section / group labels (optional, for menu segmentation) -------------- */
+  /* Add [data-group-label] as first child of role="group" for a visible heading. */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu [data-group-label] {
+    padding-block-start: 0.75rem;
+    padding-block-end: 0.25rem;
+    font-family: var(--md-sys-typescale-label-small-font, inherit);
+    font-size: var(--md-sys-typescale-label-small-size, 0.6875rem);
+    font-weight: var(--md-sys-typescale-label-small-weight, 500);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+
+  /* Inset dividers within groups ------------------------------------------ */
+  /* Separators inside role="group" are inset by the item padding on both sides.
+     This matches the M3 spec for grouped menus (e.g. radio group segments). */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu [role='group'] > hr,
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu
+    [role='group']
+    > [role='separator'] {
+    --rc-menu-separator-margin-inline: var(--rc-menu-item-padding-inline, 0.75rem);
+  }
+}
+
+/*
+ * Theming notes for rc-menu-button variants:
+ *
+ * The trigger button in rc-menu-button is already styled via
+ * rc-theme-material/components/menu-button.css. If you need a different
+ * trigger surface (filled, tonal, outlined) wrap the trigger <button> in
+ * the appropriate M3 button variant class rather than overriding menu.css.
+ *
+ * For a plain/text trigger (the default), the existing menu-button.css
+ * sets primary-colored text with an 8% hover state layer.
+ *
+ * For an outlined variant:
+ *   rc-menu-button > [slot='trigger'] { border: 1px solid var(--md-sys-color-outline); }
+ *
+ * For a filled variant:
+ *   rc-menu-button > [slot='trigger'] { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
+ */

package/components/menubar.css

@@ -0,0 +1,27 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menubar::part(root) {
+    box-shadow: var(--rc-shadow-level0, none);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menubar {
+    --rc-menubar-item-block-size: 2.5rem;
+    --rc-menubar-item-padding-block: 0.5rem;
+    --rc-menubar-item-padding-inline: 1rem;
+    --rc-menubar-item-border: 0;
+    --rc-menubar-item-radius: var(--md-sys-shape-corner-full, 999px);
+    --rc-menubar-item-background: transparent;
+    --rc-menubar-item-color: var(--md-sys-color-primary, CanvasText);
+    --rc-menubar-item-transition:
+      background-color var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease),
+      color var(--rc-motion-effects-duration-fast, 150ms) var(--rc-motion-effects-easing-fast, ease);
+    --rc-menubar-item-hover-background: color-mix(
+      in srgb,
+      var(--md-sys-color-primary, Highlight) 8%,
+      transparent
+    );
+    --rc-menubar-item-hover-color: var(--md-sys-color-primary, CanvasText);
+    --rc-menubar-item-open-background: var(--md-sys-color-secondary-container, ButtonFace);
+    --rc-menubar-item-open-color: var(--md-sys-color-on-secondary-container, ButtonText);
+  }
+}

package/components/modes.css

@@ -0,0 +1,50 @@
+@layer rc-theme-material.components {
+  /*
+   * The vestibular harm reduced motion guards against is movement across the
+   * visual field: a cross-fade or a color change doesn't trigger it, so
+   * removing every transition (the previous *, !important sweep) over-
+   * corrected, and it also silently removed the ones that aid comprehension.
+   * Spatial motion still goes to zero; effects motion is kept but shortened,
+   * which the spatial/effects split makes expressible for the first time.
+   * Values are read as custom properties rather than reasserted with
+   * !important, so this only reaches whatever already consumes the shared
+   * motion tokens or the Material duration primitives. Components that
+   * still handle prefers-reduced-motion with their own blunt sweep are
+   * refined in their own component styles; this file no longer
+   * compensates for that with a second, theme-wide !important override.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    :where(.rc-theme-material, :host(.rc-theme-material)) {
+      --rc-motion-spatial-duration-fast: 0ms;
+      --rc-motion-spatial-duration-default: 0ms;
+      --rc-motion-spatial-duration-slow: 0ms;
+      --rc-motion-effects-duration-fast: 50ms;
+      --rc-motion-effects-duration-default: 70ms;
+      --rc-motion-effects-duration-slow: 100ms;
+      --rc-motion-duration: var(--rc-motion-effects-duration-default);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.rc-theme-material, :host(.rc-theme-material))
+      :is(
+        rc-select,
+        rc-combobox,
+        rc-search-bar,
+        rc-textarea,
+        rc-markdown-editor,
+        rc-menu,
+        rc-menubar,
+        rc-toolbar,
+        rc-dialog > dialog
+      ) {
+      forced-color-adjust: auto;
+      box-shadow: none;
+    }
+
+    :where(.rc-theme-material, :host(.rc-theme-material))
+      :is(button, [role='button'], [role^='menuitem']):focus-visible {
+      outline: 2px solid Highlight;
+    }
+  }
+}

package/components/navigation-bar.css

@@ -0,0 +1,76 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-navigation-bar {
+    --rc-navigation-bar-bg: var(--md-sys-color-surface-container, Canvas);
+    --rc-navigation-bar-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-navigation-bar-block-size: calc(5rem + env(safe-area-inset-bottom, 0px));
+    --rc-navigation-bar-padding-block: 0 0;
+    --rc-navigation-bar-padding-inline: 0;
+    --rc-navigation-bar-item-min-block-size: 5rem;
+    --rc-navigation-bar-item-padding-block: 0.75rem 1rem;
+    --rc-navigation-bar-item-padding-inline: 0.75rem;
+    --rc-navigation-bar-item-gap: 0.25rem;
+    --rc-navigation-bar-item-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-navigation-bar-item-text-decoration: none;
+    --rc-navigation-bar-active-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-navigation-bar-indicator-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-navigation-bar-indicator-border: 0;
+    --rc-navigation-bar-indicator-radius: var(--md-sys-shape-corner-full, 9999px);
+    /* The indicator resizes to the selected item's box, which is spatial motion. */
+    --rc-navigation-bar-indicator-duration: var(--rc-motion-spatial-duration-fast, 300ms);
+    --rc-navigation-bar-indicator-easing: var(--rc-motion-spatial-easing-fast, ease);
+    --rc-icon-font-line-height: 2rem;
+    --rc-navigation-bar-focus-ring: 2px solid var(--md-sys-color-primary, Highlight);
+    --rc-navigation-bar-focus-ring-offset: 2px;
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-navigation-bar > a {
+    font-family: var(--md-sys-typescale-label-medium-font, inherit);
+    font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
+    font-weight: var(--md-sys-typescale-label-medium-weight, 500);
+    line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
+    letter-spacing: var(--md-sys-typescale-label-medium-tracking, 0.03125rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-navigation-bar
+    > a
+    :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 4rem;
+    block-size: 2rem;
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-navigation-bar
+    > a:hover
+    :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText)
+        calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
+      transparent
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-navigation-bar
+    > a:active
+    :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText)
+        calc(var(--md-sys-state-pressed-state-layer-opacity, 0.12) * 100%),
+      transparent
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-navigation-bar
+    > a[aria-current]:not([aria-current='false'])
+    :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    color: var(--md-sys-color-on-secondary-container, CanvasText);
+  }
+}

package/components/navigation-rail.css

@@ -0,0 +1,132 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-navigation-rail {
+    --rc-navigation-rail-bg: var(--md-sys-color-surface, Canvas);
+    --rc-navigation-rail-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-navigation-rail-inline-size: 5rem;
+    --rc-navigation-rail-expanded-inline-size: 16rem;
+    --rc-navigation-rail-padding-block: 0.75rem;
+    --rc-navigation-rail-padding-inline: 0.5rem;
+    --rc-navigation-rail-gap: 1rem;
+    --rc-navigation-rail-item-gap: 0.75rem;
+    --rc-navigation-rail-item-min-block-size: 3.5rem;
+    --rc-navigation-rail-expanded-item-min-block-size: 3.5rem;
+    --rc-navigation-rail-item-padding-inline: 0.5rem;
+    --rc-navigation-rail-expanded-item-padding-inline: var(
+      --rc-navigation-rail-item-padding-inline
+    );
+    --rc-navigation-rail-item-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-navigation-rail-item-text-decoration: none;
+    --rc-navigation-rail-active-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-navigation-rail-indicator-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-navigation-rail-indicator-border: 0;
+    --rc-navigation-rail-indicator-radius: var(--md-sys-shape-corner-full, 9999px);
+    --rc-navigation-rail-toggle-size: 3rem;
+    --rc-navigation-rail-toggle-inline-offset: 1rem;
+    --rc-navigation-rail-duration: var(--rc-motion-spatial-duration-fast, 300ms);
+    --rc-navigation-rail-easing: var(--rc-motion-spatial-easing-fast, ease);
+    /* The indicator resizes to the selected item's box, which is spatial motion. */
+    --rc-navigation-rail-indicator-duration: var(--rc-motion-spatial-duration-fast, 300ms);
+    --rc-navigation-rail-indicator-easing: var(--rc-motion-spatial-easing-fast, ease);
+    --rc-icon-font-line-height: 2rem;
+    --rc-navigation-rail-focus-ring: 2px solid var(--md-sys-color-primary, Highlight);
+    --rc-navigation-rail-focus-ring-offset: 2px;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-navigation-rail > rc-fab[slot='header'] {
+    --rc-fab-shadow: none;
+    --rc-fab-shadow-hover: none;
+    --rc-fab-shadow-active: none;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-navigation-rail > a {
+    align-items: flex-start;
+    inline-size: 100%;
+    font-family: var(--md-sys-typescale-label-medium-font, inherit);
+    font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
+    font-weight: var(--md-sys-typescale-label-medium-weight, 500);
+    line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
+    letter-spacing: var(--md-sys-typescale-label-medium-tracking, 0.03125rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-navigation-rail[expanded] > a {
+    font-family: var(--md-sys-typescale-label-large-font, inherit);
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    font-weight: var(--md-sys-typescale-label-large-weight, 500);
+    line-height: var(--md-sys-typescale-label-large-line-height, 1.25rem);
+    letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.00625rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-navigation-rail
+    > a
+    > :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 3.5rem;
+    block-size: 2rem;
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-navigation-rail[expanded]
+    > a
+    > :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    display: inline-flex;
+    justify-content: flex-start;
+    gap: 0.75rem;
+    inline-size: 100%;
+    block-size: 3.5rem;
+    padding-inline: 1rem;
+    box-sizing: border-box;
+    text-align: start;
+  }
+
+  /*
+   * MD3 collapsed items keep a fixed-size pill behind the icon only; the
+   * caption label renders below it, detached from the pill's own box.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-navigation-rail:not([expanded])
+    > a
+    > [data-rc-navigation-indicator]
+    > :not([data-rc-navigation-icon]) {
+    position: absolute;
+    inset-block-start: calc(100% + var(--rc-navigation-rail-link-gap, 0.25rem));
+    inset-inline-start: 50%;
+    inline-size: max-content;
+    font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
+    line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
+    translate: -50% 0;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-navigation-rail
+    > a:hover
+    > :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText)
+        calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
+      transparent
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-navigation-rail
+    > a:active
+    > :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText)
+        calc(var(--md-sys-state-pressed-state-layer-opacity, 0.12) * 100%),
+      transparent
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-navigation-rail
+    > a[aria-current]:not([aria-current='false'])
+    > :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    color: var(--md-sys-color-on-secondary-container, CanvasText);
+  }
+}

package/components/progress.css

@@ -0,0 +1,15 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-progress::part(value-display) {
+    color: var(--md-sys-color-on-surface-variant, GrayText);
+    font-size: var(--md-sys-typescale-label-small-size, 0.75rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-progress[disabled] {
+    opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-progress {
+    --rc-progress-fill-transition-duration: var(--rc-motion-effects-duration-fast, 150ms);
+    --rc-progress-fill-transition-easing: var(--rc-motion-effects-easing-fast, ease-out);
+  }
+}

package/components/range-slider.css

@@ -0,0 +1,29 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-range-slider::part(thumb) {
+    border-width: 0;
+    border-radius: var(--md-sys-shape-corner-full, 999px);
+    box-shadow: 0 0 0 0 transparent;
+    transition:
+      box-shadow var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease),
+      scale var(--rc-motion-spatial-duration-fast, 300ms) var(--rc-motion-spatial-easing-fast, ease);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-range-slider::part(thumb):hover {
+    box-shadow: 0 0 0 0.5rem
+      color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-range-slider::part(thumb):active {
+    box-shadow: 0 0 0 0.625rem
+      color-mix(in srgb, var(--md-sys-color-primary, Highlight) 12%, transparent);
+    scale: 0.9;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-range-slider::part(value-display) {
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    background: var(--md-sys-color-inverse-surface, var(--md-sys-color-on-surface, CanvasText));
+    color: var(--md-sys-color-inverse-on-surface, var(--md-sys-color-surface, Canvas));
+  }
+}