@rcarls/rc-theme-substrate 0.3.2 → 0.4.0

package/README.md

@@ -58,6 +58,12 @@ reference layer:
 @import '@rcarls/rc-theme-substrate/components/dialog.css';
 ```
 
+Tag general icon-font markup with `data-rc-icon`; component-specific markers
+such as `data-rc-button-icon` and `data-rc-navigation-icon` opt in
+automatically. The shared `--rc-icon-font-size` and
+`--rc-icon-font-line-height` tokens keep glyph geometry consistent and can be
+overridden at the theme boundary or on one component.
+
 ## View transitions
 
 Substrate includes stable CSS hooks for apps that opt into View Transitions,

package/bridge.css

@@ -26,13 +26,75 @@
     --rc-font-size: var(--substrate-font-size, 1em);
     --rc-font-weight: var(--substrate-font-weight, 400);
     --rc-line-height: var(--substrate-line-height, normal);
+    --rc-icon-font-size: 1.5rem;
+    --rc-icon-font-line-height: var(--rc-icon-font-size);
     --rc-control-block-size: var(--substrate-control-block-size, 2.5rem);
     --rc-control-padding-block: var(--substrate-control-padding-block, 0.5rem);
     --rc-control-padding-inline: var(--substrate-control-padding-inline, 0.75rem);
     --rc-control-gap: var(--substrate-control-gap, 0.5rem);
+    --rc-button-color: var(--rc-button-text, ButtonText);
+    --rc-button-block-size: var(--rc-control-block-size);
+    --rc-button-radius: var(--rc-control-radius);
+    --rc-button-border: var(--rc-border);
+    --rc-button-padding-block: var(--rc-control-padding-block);
+    --rc-button-padding-inline: var(--rc-control-padding-inline);
+    --rc-button-gap: var(--rc-control-gap);
+    --rc-button-font: var(--rc-font-weight) var(--rc-font-size) / var(--rc-line-height)
+      var(--rc-font-family);
+    --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-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-padding-block: 0.75rem;
+    --rc-card-padding-inline: 0.75rem;
+    --rc-card-actions-gap: 0.5rem;
+    --rc-card-subtitle-color: color-mix(in srgb, currentColor 72%, transparent);
+    --rc-card-hover-state-layer-opacity: 0.08;
+    --rc-card-pressed-state-layer-opacity: 0.12;
+    --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-bg: var(--rc-highlight, Highlight);
+    --rc-switch-native-appearance: none;
+    --rc-switch-native-inline-size: 100%;
+    --rc-switch-native-block-size: 100%;
+    --rc-switch-native-margin: 0;
+    --rc-switch-native-opacity: 0;
+    --rc-switch-decoration-display: block;
+    --rc-switch-icon-display: grid;
+    --rc-switch-track-inline-size: 3.25rem;
+    --rc-switch-track-block-size: 2rem;
+    --rc-switch-selected-track-bg: var(--rc-accent);
+    --rc-switch-thumb-translate: 1.125rem;
+    --rc-segmented-button-segment-min-block-size: var(--rc-control-block-size);
+    --rc-segmented-button-selected-bg: var(--rc-highlight, Highlight);
+    --rc-snackbar-bg: var(--substrate-inverse-surface, CanvasText);
+    --rc-snackbar-color: var(--substrate-inverse-on-surface, Canvas);
+    --rc-snackbar-border: 0;
+    --rc-snackbar-action-color: var(--substrate-inverse-on-surface, Canvas);
+    --rc-snackbar-action-border: 0;
+    --rc-snackbar-action-radius: 9999px;
+    --rc-snackbar-action-padding-block: 0.5rem;
+    --rc-snackbar-action-padding-inline: 0.75rem;
+    --rc-snackbar-action-bg: transparent;
+    --rc-snackbar-action-font: 650 0.875rem / 1.25 var(--rc-font-family, inherit);
     --rc-item-padding-block: var(--substrate-item-padding-block, 0.55rem);
     --rc-item-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
     --rc-item-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-list-item-gap: var(--rc-item-gap);
+    --rc-list-item-min-block-size: 2.25rem;
+    --rc-list-item-padding-block: var(--rc-item-padding-block);
+    --rc-list-item-padding-inline: var(--rc-item-padding-inline);
+    --rc-list-item-selected-bg: var(--rc-highlight, Highlight);
+    --rc-list-item-selected-color: var(--rc-highlight-text, HighlightText);
     --rc-radius-sm: var(--substrate-radius-sm, 0.25rem);
     --rc-radius-md: var(--substrate-radius-md, 0.5rem);
     --rc-control-radius: var(--substrate-radius-md, 0.5rem);
@@ -40,22 +102,23 @@
     --rc-focus-ring-offset: var(--substrate-focus-ring-offset, 2px);
     --rc-disabled-opacity: var(--substrate-disabled-opacity, 0.52);
     --rc-motion-duration: var(--substrate-motion-duration, 160ms);
+    --rc-dialog-scrim: color-mix(in srgb, CanvasText 32%, transparent);
   }
 
   .rc-theme-substrate rc-listbox,
   :host(.rc-theme-substrate) rc-listbox,
   .rc-theme-substrate rc-menu,
   :host(.rc-theme-substrate) rc-menu {
-    --rc-listbox-option-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-option-gap: var(--rc-list-item-gap, 0.5rem);
+    --rc-listbox-option-min-block-size: var(--rc-list-item-min-block-size, 2.25rem);
+    --rc-listbox-option-padding-block: var(--rc-list-item-padding-block, 0.55rem);
+    --rc-listbox-option-padding-inline: var(--rc-list-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);
+    --rc-listbox-selected-bg: var(--rc-list-item-selected-bg, Highlight);
+    --rc-listbox-selected-color: var(--rc-list-item-selected-color, HighlightText);
   }
 
   .rc-theme-substrate rc-select,
@@ -85,16 +148,22 @@
     --rc-slider-progress-background: var(--rc-accent);
     --rc-slider-track-radius: 999px;
     --rc-range-slider-accent: var(--rc-accent);
-    --rc-range-slider-track-background: color-mix(
-      in srgb,
-      var(--rc-border-color) 70%,
-      transparent
-    );
+    --rc-range-slider-track-background: color-mix(in srgb, var(--rc-border-color) 70%, transparent);
     --rc-range-slider-thumb-background: var(--substrate-surface, Canvas);
     --rc-range-slider-thumb-border: var(--rc-accent);
     --rc-thumb-radius: 0.5625rem;
   }
 
+  .rc-theme-substrate rc-bottom-sheet,
+  :host(.rc-theme-substrate) rc-bottom-sheet {
+    --rc-bottom-sheet-bg: var(--substrate-surface-raised, Canvas);
+    --rc-bottom-sheet-color: var(--rc-field-text, CanvasText);
+    --rc-bottom-sheet-radius: var(--substrate-radius-xl, 1rem) var(--substrate-radius-xl, 1rem) 0 0;
+    --rc-bottom-sheet-shadow: var(--substrate-shadow-lg, none);
+    --rc-bottom-sheet-scrim: var(--rc-dialog-scrim);
+    --rc-bottom-sheet-handle-color: var(--rc-border-color, GrayText);
+    --rc-bottom-sheet-handle-radius: var(--substrate-radius-pill, 999px);
+  }
   @media (prefers-reduced-motion: reduce) {
     .rc-theme-substrate,
     :host(.rc-theme-substrate) {

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/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

@@ -25,7 +25,7 @@
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox::part(listbox) {
-    --rc-listbox-option-gap: var(--substrate-item-gap, 0.5rem);
+    --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);
@@ -44,7 +44,8 @@
 
   :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);
+    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,

package/components/dialog.css

@@ -16,7 +16,7 @@
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog::backdrop {
-    background: color-mix(in srgb, CanvasText 32%, transparent);
+    background: var(--rc-dialog-scrim, color-mix(in srgb, CanvasText 32%, transparent));
     transition: opacity var(--substrate-motion-duration-slow, 240ms)
       var(--substrate-motion-easing, ease);
   }

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-raised, var(--rc-shadow-level2, none));
+    --rc-fab-menu-shadow-hover: var(--substrate-shadow-overlay, var(--rc-shadow-level3, none));
+    --rc-fab-menu-shadow-open: var(--rc-fab-menu-shadow-hover);
+    --rc-fab-menu-shadow-active: var(--substrate-shadow-raised, 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

@@ -1,9 +1,30 @@
 @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 {

package/components/icons.css

@@ -0,0 +1,19 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    :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,67 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) {
+    --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);
+    --rc-list-item-selected-color: var(--rc-highlight-text, HighlightText);
+    --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-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-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__supporting {
+    color: var(--rc-list-item-supporting-color);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-listbox,
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) [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

@@ -1,12 +1,11 @@
 @layer rc-theme-substrate.components {
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-listbox {
-    --rc-listbox-option-gap: var(--substrate-item-gap, 0.5rem);
+    --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-option-transition:
-      background-color var(--substrate-motion-duration, 160ms)
-        var(--substrate-motion-easing, ease),
+      background-color var(--substrate-motion-duration, 160ms) var(--substrate-motion-easing, ease),
       color var(--substrate-motion-duration, 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);
@@ -20,7 +19,8 @@
       var(--rc-font-family, inherit);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-listbox[checkmark]
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-listbox[checkmark]
     [part~='option-checkmark'] {
     color: var(--rc-accent, Highlight);
   }

package/components/markdown-editor.css

@@ -6,7 +6,32 @@
     --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);
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-markdown-editor::part(rich-view) {

package/components/menu-button.css

@@ -12,6 +12,7 @@
       var(--rc-accent, Highlight) 16%,
       var(--rc-button-bg, ButtonFace)
     );
+    --rc-menu-button-indicator-color: var(--rc-accent, Highlight);
     display: inline-block;
   }
 }

package/components/menu.css

@@ -7,7 +7,6 @@
     --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-submenu-indicator-color: var(--rc-accent, Highlight);
     display: inline-block;
     border: var(--rc-border, 1px solid ButtonBorder);
     border-radius: var(--substrate-radius-lg, 0.75rem);

package/components/navigation-bar.css

@@ -0,0 +1,43 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-navigation-bar {
+    --rc-navigation-bar-bg: var(--rc-surface, Canvas);
+    --rc-navigation-bar-color: var(--rc-color, CanvasText);
+    --rc-navigation-bar-block-size: 4rem;
+    --rc-navigation-bar-padding-block: 0;
+    --rc-navigation-bar-padding-inline: 0;
+    --rc-navigation-bar-gap: 0;
+    --rc-navigation-bar-item-gap: 0.25rem;
+    --rc-navigation-bar-item-min-block-size: 3rem;
+    --rc-navigation-bar-item-padding-block: 0.5rem;
+    --rc-navigation-bar-item-padding-inline: var(--rc-item-padding-inline, 0.75rem);
+    --rc-navigation-bar-item-color: var(--rc-muted-color, CanvasText);
+    --rc-navigation-bar-item-text-decoration: none;
+    --rc-navigation-bar-active-color: var(--rc-accent, Highlight);
+    --rc-navigation-bar-indicator-bg: transparent;
+    --rc-navigation-bar-indicator-border: 0;
+    --rc-navigation-bar-indicator-radius: 0;
+    --rc-navigation-bar-indicator-duration: 0ms;
+    --rc-navigation-bar-indicator-easing: ease;
+    --rc-icon-font-line-height: 2.5rem;
+    --rc-navigation-bar-focus-ring: var(--rc-focus-ring, 2px solid Highlight);
+    --rc-navigation-bar-focus-ring-offset: var(--rc-focus-ring-offset, 2px);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-navigation-bar
+    > a
+    :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: var(--rc-radius-pill, 9999px);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-navigation-bar
+    > a[aria-current]:not([aria-current='false']) {
+    border-radius: var(--rc-radius-md, 0.5rem);
+    background: color-mix(in srgb, var(--rc-accent, Highlight) 12%, transparent);
+  }
+}

package/components/navigation-rail.css

@@ -0,0 +1,72 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-navigation-rail {
+    --rc-navigation-rail-bg: var(--rc-surface, Canvas);
+    --rc-navigation-rail-color: var(--rc-color, CanvasText);
+    --rc-navigation-rail-inline-size: 6rem;
+    --rc-navigation-rail-expanded-inline-size: 15rem;
+    --rc-navigation-rail-padding-block: 0.75rem;
+    --rc-navigation-rail-padding-inline: 0.5rem;
+    --rc-navigation-rail-gap: var(--rc-item-gap, 0.75rem);
+    --rc-navigation-rail-item-gap: var(--rc-item-gap, 0.75rem);
+    --rc-navigation-rail-link-gap: 0.25rem;
+    --rc-navigation-rail-item-min-block-size: 3.5rem;
+    --rc-navigation-rail-expanded-item-min-block-size: 3.5rem;
+    --rc-navigation-rail-item-padding-block: 0.25rem;
+    --rc-navigation-rail-item-padding-inline: 0.5rem;
+    --rc-navigation-rail-expanded-item-padding-inline: var(--rc-item-padding-inline, 1rem);
+    --rc-navigation-rail-item-color: var(--rc-muted-color, CanvasText);
+    --rc-navigation-rail-item-text-decoration: none;
+    --rc-navigation-rail-active-color: var(--rc-accent, Highlight);
+    --rc-navigation-rail-indicator-bg: transparent;
+    --rc-navigation-rail-indicator-border: 0;
+    --rc-navigation-rail-indicator-radius: 0;
+    --rc-navigation-rail-indicator-duration: 0ms;
+    --rc-navigation-rail-indicator-easing: ease;
+    --rc-icon-font-line-height: 2.5rem;
+    --rc-navigation-rail-toggle-size: 3rem;
+    --rc-navigation-rail-toggle-inline-offset: 0.5rem;
+    --rc-navigation-rail-duration: var(--rc-motion-duration, 200ms);
+    --rc-navigation-rail-easing: ease;
+    --rc-navigation-rail-focus-ring: var(--rc-focus-ring, 2px solid Highlight);
+    --rc-navigation-rail-focus-ring-offset: var(--rc-focus-ring-offset, 2px);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-navigation-rail > a {
+    inline-size: 100%;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-navigation-rail
+    > a[aria-current]:not([aria-current='false']) {
+    border-radius: var(--rc-radius-md, 0.5rem);
+    background: color-mix(in srgb, var(--rc-accent, Highlight) 12%, transparent);
+  }
+
+  /*
+   * Size the icon itself (whether a direct `<a>` child or nested in
+   * [data-rc-navigation-indicator]) rather than the indicator wrapper, so the
+   * wrapper stays sized to its normal-flow content (icon + label) and the
+   * active-state background above wraps the whole item, not just the icon.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-navigation-rail:not([expanded])
+    > a
+    [data-rc-navigation-icon] {
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: var(--rc-radius-pill, 9999px);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-navigation-rail[expanded]
+    > a
+    > :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    justify-content: flex-start;
+    gap: var(--rc-item-gap, 0.75rem);
+    inline-size: 100%;
+    block-size: 3.5rem;
+    padding-inline: var(--rc-item-padding-inline, 1rem);
+    box-sizing: border-box;
+    text-align: start;
+  }
+}

package/components/segmented-button.css

@@ -0,0 +1,43 @@
+@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);
+    --rc-segmented-button-border: var(--rc-border);
+    --rc-segmented-button-radius: var(--rc-control-radius);
+    --rc-segmented-button-divider: 0;
+    --rc-segmented-button-bg: var(--substrate-surface-raised, ButtonFace);
+    --rc-segmented-button-color: var(--substrate-on-surface, ButtonText);
+    --rc-segmented-button-selected-bg: var(--rc-highlight, Highlight);
+    --rc-segmented-button-selected-color: var(--rc-highlight-text, HighlightText);
+    --rc-segmented-button-segment-min-block-size: var(--rc-control-block-size, 2.5rem);
+    --rc-segmented-button-segment-padding-inline: var(--rc-control-padding-inline, 0.75rem);
+    --rc-segmented-button-focus-ring: var(--rc-focus-ring);
+    --rc-segmented-button-focus-ring-offset: -2px;
+    --rc-segmented-button-disabled-opacity: var(--rc-disabled-opacity);
+  }
+}

package/components/select.css

@@ -28,7 +28,7 @@
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-select::part(listbox) {
-    --rc-listbox-option-gap: var(--substrate-item-gap, 0.5rem);
+    --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);

package/components/snackbar.css

@@ -0,0 +1,23 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-snackbar {
+    --rc-snackbar-inset-block-end: 1rem;
+    --rc-snackbar-min-block-size: 3rem;
+    --rc-snackbar-max-inline-size: 30rem;
+    --rc-snackbar-padding-block: 0.75rem;
+    --rc-snackbar-padding-inline: 1rem;
+    --rc-snackbar-border: 0;
+    --rc-snackbar-radius: var(--substrate-radius-md, 0.5rem);
+    --rc-snackbar-bg: var(--substrate-inverse-surface, CanvasText);
+    --rc-snackbar-color: var(--substrate-inverse-on-surface, Canvas);
+    --rc-snackbar-action-color: var(--substrate-inverse-on-surface, Canvas);
+    --rc-snackbar-action-border: 0;
+    --rc-snackbar-action-radius: 9999px;
+    --rc-snackbar-action-padding-block: 0.5rem;
+    --rc-snackbar-action-padding-inline: 0.75rem;
+    --rc-snackbar-action-bg: transparent;
+    --rc-snackbar-action-font: 650 0.875rem / 1.25 var(--rc-font-family, inherit);
+    --rc-snackbar-shadow: var(--substrate-shadow-lg, var(--rc-shadow));
+    --rc-snackbar-focus-ring: var(--rc-focus-ring);
+    --rc-snackbar-focus-ring-offset: var(--rc-focus-ring-offset);
+  }
+}

package/components/switch.css

@@ -0,0 +1,28 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-switch {
+    --rc-switch-native-appearance: none;
+    --rc-switch-native-inline-size: 100%;
+    --rc-switch-native-block-size: 100%;
+    --rc-switch-native-margin: 0;
+    --rc-switch-native-opacity: 0;
+    --rc-switch-decoration-display: block;
+    --rc-switch-icon-display: grid;
+    --rc-switch-track-inline-size: 3.25rem;
+    --rc-switch-track-block-size: 2rem;
+    --rc-switch-track-border: var(--rc-border);
+    --rc-switch-track-radius: 9999px;
+    --rc-switch-track-bg: var(--substrate-surface-raised, ButtonFace);
+    --rc-switch-thumb-size: 1rem;
+    --rc-switch-thumb-offset: 0.375rem;
+    --rc-switch-thumb-bg: var(--substrate-on-surface-muted, ButtonText);
+    --rc-switch-selected-track-border-color: var(--rc-accent);
+    --rc-switch-selected-track-bg: var(--rc-accent);
+    --rc-switch-selected-thumb-size: 1.5rem;
+    --rc-switch-selected-thumb-bg: var(--substrate-on-primary, HighlightText);
+    --rc-switch-thumb-translate: 1.125rem;
+    --rc-switch-focus-ring: var(--rc-focus-ring);
+    --rc-switch-focus-ring-offset: var(--rc-focus-ring-offset);
+    --rc-switch-disabled-opacity: var(--rc-disabled-opacity);
+    --rc-switch-duration: var(--rc-motion-duration);
+  }
+}

package/components/transfer-list.css

@@ -12,7 +12,7 @@
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-transfer-list::part(listbox) {
-    --rc-listbox-option-gap: var(--substrate-item-gap, 0.5rem);
+    --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);

package/components.css

@@ -1,21 +1,33 @@
 @layer rc-theme-substrate.defaults, rc-theme-substrate.bridge, rc-theme-substrate.components;
 
+@import './components/icons.css';
 @import './components/listbox.css';
 @import './components/select.css';
 @import './components/combobox.css';
 @import './components/search-bar.css';
+@import './components/bottom-sheet.css';
 @import './components/textarea.css';
 @import './components/markdown-editor.css';
 @import './components/transfer-list.css';
+@import './components/button.css';
+@import './components/card.css';
+@import './components/chip.css';
+@import './components/list-item.css';
 @import './components/fab.css';
+@import './components/fab-menu.css';
 @import './components/app-bar.css';
 @import './components/menu.css';
 @import './components/menu-button.css';
 @import './components/menubar.css';
+@import './components/navigation-bar.css';
+@import './components/navigation-rail.css';
 @import './components/toolbar.css';
+@import './components/segmented-button.css';
 @import './components/slider.css';
+@import './components/snackbar.css';
 @import './components/range-slider.css';
 @import './components/splitter.css';
+@import './components/switch.css';
 @import './components/dialog.css';
 @import './components/disclosure.css';
 @import './components/accordion.css';

package/defaults.css

@@ -25,7 +25,8 @@
     --substrate-shadow-color: light-dark(oklch(16% 0.03 60 / 18%), oklch(0% 0 0 / 42%));
 
     --substrate-font-family:
-      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell,
+      'Noto Sans', sans-serif;
     --substrate-font-size: 0.95rem;
     --substrate-line-height: 1.45;
     --substrate-font-weight: 450;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Lightweight CSS reference theme for app-oriented rc-webcomponents layouts.",
   "repository": {
     "type": "git",