@rcarls/rc-theme-material 0.3.2 → 0.4.1

package/components/chip.css

@@ -0,0 +1,28 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-chip {
+    --rc-chip-block-size: 2rem;
+    --rc-chip-gap: 0px;
+    --rc-chip-padding-inline: 1rem;
+    --rc-chip-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-chip-radius: var(--md-sys-shape-corner-small, 0.5rem);
+    --rc-chip-bg: var(--md-sys-color-surface-container-low, ButtonFace);
+    --rc-chip-color: var(--md-sys-color-on-surface-variant, ButtonText);
+    --rc-chip-font: inherit;
+    --rc-chip-text-decoration: none;
+    --rc-chip-selected-border-color: transparent;
+    --rc-chip-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-chip-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-chip-state-layer-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-chip-selected-state-layer-color: var(--md-sys-color-on-secondary-container, CanvasText);
+    --rc-chip-hover-state-layer-opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+    --rc-chip-focus-state-layer-opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);
+    --rc-chip-pressed-state-layer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
+    --rc-chip-state-layer-transition-duration: var(--rc-motion-effects-duration-fast, 150ms);
+    --rc-chip-state-layer-transition-easing: var(--rc-motion-effects-easing-fast, ease-out);
+    --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;
+    --rc-chip-remove-offset-inline: 0.25rem;
+  }
+}

package/components/combobox.css

@@ -1,12 +1,19 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(anchor) {
     box-sizing: border-box;
-    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
+    transition:
+      border-color 150ms ease,
+      box-shadow 150ms ease,
+      background-color 150ms ease;
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(anchor):hover {
     border-color: var(--md-sys-color-on-surface, CanvasText);
-    background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 4%, var(--md-sys-color-surface, Field));
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 4%,
+      var(--md-sys-color-surface, Field)
+    );
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(anchor):focus-within {
@@ -27,7 +34,9 @@
       --md-outlined-text-field-trailing-icon-color,
       var(--md-sys-color-on-surface-variant, CanvasText)
     );
-    transition: color 150ms ease, background-color 150ms ease;
+    transition:
+      color 150ms ease,
+      background-color 150ms ease;
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(toggle):hover {
@@ -42,7 +51,11 @@
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(chip):hover {
-    background: color-mix(in srgb, var(--md-sys-color-on-surface-variant, CanvasText) 8%, transparent);
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface-variant, CanvasText) 8%,
+      transparent
+    );
     color: var(--md-sys-color-on-surface-variant, CanvasText);
   }
 
@@ -61,7 +74,7 @@
     border-radius: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 0.25rem));
 
     /* Option sizing */
-    --rc-listbox-option-gap: 0.75rem;
+    --rc-listbox-option-gap: var(--rc-list-item-gap, 0.75rem);
     --rc-listbox-option-min-block-size: 3rem;
     --rc-listbox-option-padding-block: 0;
     --rc-listbox-option-padding-inline: 0.75rem;

package/components/dialog.css

@@ -11,7 +11,10 @@
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-dialog > dialog::backdrop {
-    background: color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent);
+    background: var(
+      --rc-dialog-scrim,
+      color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent)
+    );
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material))

package/components/fab-menu.css

@@ -0,0 +1,85 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) 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(
+      --md-fab-container-color,
+      var(--md-sys-color-primary-container, ButtonFace)
+    );
+    --rc-fab-menu-color: var(
+      --md-fab-icon-color,
+      var(--md-sys-color-on-primary-container, ButtonText)
+    );
+    --rc-fab-menu-shadow: var(--rc-shadow-level3);
+    --rc-fab-menu-bg-hover: var(--rc-fab-menu-bg);
+    --rc-fab-menu-bg-open: var(--rc-fab-menu-bg-hover);
+    --rc-fab-menu-shadow-hover: var(--rc-shadow-level4);
+    --rc-fab-menu-shadow-open: var(--rc-fab-menu-shadow-hover);
+    --rc-fab-menu-shadow-active: var(--rc-shadow-level3);
+    --rc-fab-menu-radius: var(--md-fab-container-shape, var(--md-sys-shape-corner-large, 1rem));
+    --rc-fab-menu-font-family: var(
+      --md-fab-label-text-font,
+      var(--md-sys-typescale-label-large-font, inherit)
+    );
+    --rc-fab-menu-font-size: var(
+      --md-fab-label-text-size,
+      var(--md-sys-typescale-label-large-size, 0.875rem)
+    );
+    --rc-fab-menu-font-weight: var(
+      --md-fab-label-text-weight,
+      var(--md-sys-typescale-label-large-weight, 500)
+    );
+    --rc-fab-menu-letter-spacing: var(
+      --md-fab-label-text-tracking,
+      var(--md-sys-typescale-label-large-tracking, 0.00625em)
+    );
+    --rc-fab-menu-text-decoration: none;
+    --rc-fab-menu-user-select: none;
+    --rc-fab-menu-transition:
+      background var(--md-sys-motion-duration-short4, 200ms) ease,
+      box-shadow var(--md-sys-motion-duration-short4, 200ms) ease,
+      transform var(--md-sys-motion-duration-short4, 200ms) ease;
+    --rc-fab-menu-active-transform: scale(0.96);
+    --rc-fab-menu-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(--md-sys-motion-duration-short3, 150ms);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab-menu > button:hover {
+    --rc-fab-menu-bg-hover: color-mix(
+      in srgb,
+      var(--md-fab-hover-icon-color, var(--md-sys-color-on-primary-container, ButtonText)) 8%,
+      var(--rc-fab-menu-bg, var(--md-sys-color-primary-container, ButtonFace))
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab-menu > button:active {
+    --rc-fab-menu-bg-open: color-mix(
+      in srgb,
+      var(--md-fab-pressed-icon-color, var(--md-sys-color-on-primary-container, ButtonText)) 12%,
+      var(--rc-fab-menu-bg, var(--md-sys-color-primary-container, ButtonFace))
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab-menu.rc-fab--small {
+    --rc-fab-menu-size: 2.5rem;
+    --rc-fab-menu-radius: var(
+      --md-fab-small-container-shape,
+      var(--md-sys-shape-corner-medium, 0.75rem)
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab-menu.rc-fab--large {
+    --rc-fab-menu-size: 6rem;
+    --rc-fab-menu-radius: var(
+      --md-fab-large-container-shape,
+      var(--md-sys-shape-corner-extra-large, 1.75rem)
+    );
+  }
+}

package/components/fab.css

@@ -1,4 +1,22 @@
 @layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) 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-hover: var(--rc-fab-bg);
+    --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-material, :host(.rc-theme-material)) rc-fab > button:hover {
     background: color-mix(
       in srgb,
@@ -14,4 +32,20 @@
       var(--rc-fab-bg, var(--md-sys-color-primary-container, ButtonFace))
     );
   }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab.rc-fab--small {
+    --rc-fab-size: 2.5rem;
+    --rc-fab-radius: var(
+      --md-fab-small-container-shape,
+      var(--md-sys-shape-corner-medium, 0.75rem)
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab.rc-fab--large {
+    --rc-fab-size: 6rem;
+    --rc-fab-radius: var(
+      --md-fab-large-container-shape,
+      var(--md-sys-shape-corner-extra-large, 1.75rem)
+    );
+  }
 }

package/components/icons.css

@@ -0,0 +1,19 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(
+      [data-rc-icon],
+      [data-rc-button-icon],
+      [data-rc-button-selected-icon],
+      [data-rc-navigation-icon]
+    ) {
+    display: inline-grid;
+    place-items: center;
+    font-size: var(--rc-icon-font-size, 1.5rem);
+    /*
+     * Unlayered icon-font boilerplate otherwise beats this layered theme rule.
+     * Keep the geometry invariant important, but let consumers opt out by
+     * overriding the normally-cascaded custom property.
+     */
+    line-height: var(--rc-icon-font-line-height, var(--rc-icon-font-size, 1.5rem)) !important;
+  }
+}

package/components/list-item.css

@@ -0,0 +1,87 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) {
+    --rc-list-item-gap: 1rem;
+    --rc-list-item-min-block-size: 3rem;
+    --rc-list-item-padding-block: 0;
+    --rc-list-item-padding-inline: 1rem;
+    --rc-list-item-divider: 0;
+    --rc-list-item-bg: transparent;
+    --rc-list-item-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-list-item-supporting-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-list-item-hover-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText)
+        calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
+      transparent
+    );
+    --rc-list-item-active-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText)
+        calc(var(--md-sys-state-pressed-state-layer-opacity, 0.12) * 100%),
+      transparent
+    );
+    --rc-list-item-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-list-item-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-list-item-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) .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-material, :host(.rc-theme-material)) .rc-list-item__start,
+  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__trailing,
+  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__end {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__headline {
+    color: var(--rc-list-item-color);
+    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);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__supporting {
+    color: var(--rc-list-item-supporting-color);
+    font-family: var(--md-sys-typescale-body-medium-font, inherit);
+    font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+    line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox,
+  :where(.rc-theme-material, :host(.rc-theme-material)) [part~='listbox'] {
+    --rc-listbox-option-gap: var(--rc-list-item-gap);
+    --rc-listbox-option-min-block-size: var(--rc-list-item-min-block-size);
+    --rc-listbox-option-padding-block: var(--rc-list-item-padding-block);
+    --rc-listbox-option-padding-inline: var(--rc-list-item-padding-inline);
+    --rc-listbox-hover-bg: var(--rc-list-item-hover-bg);
+    --rc-listbox-active-bg: var(--rc-list-item-active-bg);
+    --rc-listbox-selected-bg: var(--rc-list-item-selected-bg);
+    --rc-listbox-selected-color: var(--rc-list-item-selected-color);
+    --rc-listbox-disabled-opacity: var(--rc-list-item-disabled-opacity);
+  }
+}

package/components/listbox.css

@@ -12,7 +12,7 @@
     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);
-    --rc-listbox-option-gap: 0.75rem;
+    --rc-listbox-option-gap: var(--rc-list-item-gap, 0.75rem);
     --rc-listbox-option-min-block-size: 3rem;
     --rc-listbox-option-padding-block: 0;
     --rc-listbox-option-padding-inline: 0.75rem;
@@ -34,7 +34,9 @@
     --rc-listbox-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox[checkmark] [part~='option-checkmark'] {
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-listbox[checkmark]
+    [part~='option-checkmark'] {
     inline-size: 1.5rem;
     flex-shrink: 0;
     text-align: center;

package/components/markdown-editor.css

@@ -3,11 +3,40 @@
     --rme-background: var(--md-sys-color-surface, Canvas);
     --rme-color: var(--md-sys-color-on-surface, CanvasText);
     --rme-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
-    --rme-border-radius: 0 0 var(--md-sys-shape-corner-small, 0.5rem) var(--md-sys-shape-corner-small, 0.5rem);
+    --rme-border-radius: 0 0 var(--md-sys-shape-corner-small, 0.5rem)
+      var(--md-sys-shape-corner-small, 0.5rem);
     --rme-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
     --rme-padding: 1rem;
     --rme-toolbar-gap: 0.25rem;
     --rme-toolbar-button-size: 2.5rem;
+    --rme-toolbar-padding: 0.25rem;
+    --rme-toolbar-radius: var(--md-sys-shape-corner-small, 0.5rem)
+      var(--md-sys-shape-corner-small, 0.5rem) 0 0;
+    --rme-toolbar-background: var(--md-sys-color-surface-container, Canvas);
+    --rme-toolbar-color: var(--md-sys-color-on-surface, CanvasText);
+    --rme-toolbar-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rme-toolbar-button-color: var(--md-sys-color-on-surface-variant, ButtonText);
+    --rme-toolbar-button-border: 0;
+    --rme-toolbar-button-radius: var(--md-sys-shape-corner-full, 999px);
+    --rme-toolbar-button-active-background: var(--md-sys-color-secondary-container, Highlight);
+    --rme-toolbar-button-active-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rme-toolbar-button-active-border: 0;
+    --rme-toolbar-button-hover-opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+    --rme-toolbar-button-focus-opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);
+    --rme-toolbar-button-pressed-opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
+    --rme-toolbar-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
+    --rme-toolbar-focus-outline-offset: 1px;
+    --rme-toolbar-select-background: var(--md-sys-color-surface-container-highest, Field);
+    --rme-toolbar-select-color: var(--md-sys-color-on-surface, FieldText);
+    --rme-toolbar-select-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rme-toolbar-select-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    --rme-toolbar-select-active-background: var(--md-sys-color-secondary-container, Highlight);
+    --rme-toolbar-select-active-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rme-toolbar-select-active-border-color: var(--md-sys-color-primary, Highlight);
+    --rme-toolbar-input-background: var(--md-sys-color-surface-container-highest, Field);
+    --rme-toolbar-input-color: var(--md-sys-color-on-surface, FieldText);
+    --rme-toolbar-input-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rme-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) {

package/components/menu-button.css

@@ -16,5 +16,7 @@
     --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);
   }
 }

package/components/menu.css

@@ -41,9 +41,6 @@
     /* 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);
-    --rc-menu-submenu-indicator-size: 1.25rem;
-    --rc-menu-submenu-indicator-color: var(--md-sys-color-on-surface-variant, CanvasText);
-
     /* 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;
@@ -62,8 +59,7 @@
   }
 
   /* Current item (navigation active / selected radio row) gets secondary-container */
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-menu [aria-current='true'] {
+  :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);
   }
@@ -84,7 +80,10 @@
   /* 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'] {
+  :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);
   }
 }

package/components/navigation-bar.css

@@ -0,0 +1,78 @@
+@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);
+    --rc-navigation-bar-indicator-duration: var(--md-sys-motion-duration-short3, 150ms);
+    --rc-navigation-bar-indicator-easing: var(
+      --md-sys-motion-easing-standard,
+      cubic-bezier(0.2, 0, 0, 1)
+    );
+    --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,134 @@
+@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(--md-sys-motion-duration-medium2, 300ms);
+    --rc-navigation-rail-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+    --rc-navigation-rail-indicator-duration: var(--md-sys-motion-duration-short3, 150ms);
+    --rc-navigation-rail-indicator-easing: var(
+      --md-sys-motion-easing-standard,
+      cubic-bezier(0.2, 0, 0, 1)
+    );
+    --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/search-bar.css

@@ -30,4 +30,27 @@
       transparent
     );
   }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar[variant='view'] {
+    display: inline-flex;
+    inline-size: min(100%, var(--md-search-view-container-width, 45rem));
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar[variant='view']::part(root) {
+    position: relative;
+    z-index: 2;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(view) {
+    overflow: hidden;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(suggestion) {
+    gap: 1rem;
+    color: var(--md-sys-color-on-surface, CanvasText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(suggestion):hover {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
+  }
 }