@rcarls/rc-theme-material 0.2.0 → 0.3.0

package/components/menu.css

@@ -1,24 +1,108 @@
 @layer rc-theme-material.components {
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu :is(button, [role='menuitem'], [role='menuitemradio'], [role='menuitemcheckbox']) {
-    min-block-size: 3rem;
-    border: 0;
-    background: transparent;
+  /* 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: inherit;
-    transition: background-color 150ms ease;
+    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 150ms ease, color 150ms 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 leading icon slot 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);
+    --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;
+
+    /* 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);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu :is(button, [role='menuitem'], [role='menuitemradio'], [role='menuitemcheckbox']):hover {
-    background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
+  /* 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;
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu :is([aria-checked='true'], [aria-current='true']) {
+  /* 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);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu :is(button, [role^='menuitem']):focus-visible {
-    outline: 2px solid var(--md-sys-color-primary, Highlight);
-    outline-offset: -2px;
+  /* 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

@@ -1,9 +1,24 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-menubar::part(root) {
-    box-shadow: var(--md-sys-elevation-level0, none);
+    box-shadow: var(--rc-shadow-level0, none);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menubar rc-menu-button > :is(button, [role='button'])[slot='trigger'] {
-    padding-inline: 1rem;
+  :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 150ms ease, color 150ms 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/search-bar.css

@@ -1,16 +1,22 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(root) {
     box-sizing: border-box;
-    box-shadow: var(--md-sys-elevation-level0, none);
-    transition: box-shadow 200ms ease, background-color 200ms ease;
+    transition:
+      box-shadow 200ms ease,
+      background-color 200ms ease;
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar:hover::part(root) {
-    background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 4%, var(--md-sys-color-surface-container-high, Field));
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 8%,
+      var(--md-sys-color-surface-container-high, Field)
+    );
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar[data-focus-visible]::part(root) {
-    box-shadow: var(--md-sys-elevation-level1, none);
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-search-bar[data-interaction-mode='keyboard']::part(root):focus-within {
+    box-shadow: var(--rc-shadow-level2, none);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(clear) {
@@ -18,6 +24,10 @@
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(clear):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
+    );
   }
 }

package/components/select.css

@@ -28,7 +28,69 @@
     color: var(--md-sys-color-on-surface-variant, CanvasText);
   }
 
+  /*
+   * Propagate Material styles to the embedded rc-listbox host. rc-listbox renders
+   * options into its own light DOM inside rc-select's shadow root, so inherited
+   * custom properties are the stable styling contract for option rows.
+   */
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(listbox) {
     background: var(--md-menu-container-color, var(--md-sys-color-surface-container, Canvas));
+    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);
+    padding-block: 0.5rem;
+    border-radius: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 0.25rem));
+
+    /* Option sizing — inherited by li[role='option'] via rc-listbox's rc-base layer */
+    --rc-listbox-option-gap: 0.75rem;
+    --rc-listbox-option-min-block-size: 3rem;
+    --rc-listbox-option-padding-block: 0;
+    --rc-listbox-option-padding-inline: 0.75rem;
+    --rc-listbox-option-transition: background-color 150ms ease, color 150ms ease;
+
+    /* M3 hover/focus state layers use on-surface, not the selected container role. */
+    --rc-highlight: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
+    --rc-highlight-text: var(--md-sys-color-on-surface, CanvasText);
+    --rc-listbox-hover-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 8%,
+      transparent
+    );
+    --rc-listbox-hover-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-listbox-active-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 12%,
+      transparent
+    );
+    --rc-listbox-active-color: var(--md-sys-color-on-surface, CanvasText);
+
+    --rc-listbox-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-listbox-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-listbox-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+
+    /* M3 menus use background state layer for keyboard focus, not an outline ring */
+    --rc-focus-ring: none;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(toggle-indicator) {
+    color: var(
+      --md-outlined-select-text-field-trailing-icon-color,
+      var(--md-sys-color-on-surface-variant, CanvasText)
+    );
+    transition: color 150ms ease, transform 150ms ease;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-select[open]::part(toggle-indicator) {
+    transform: rotate(180deg);
+    color: var(
+      --md-outlined-select-text-field-focus-trailing-icon-color,
+      var(--md-sys-color-primary, Highlight)
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-select[disabled]::part(trigger) {
+    opacity: var(--md-sys-state-disabled-container-opacity, 0.38);
+    pointer-events: none;
   }
 }

package/components/splitter.css

@@ -1,18 +1,32 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-splitter {
-    --rc-splitter-separator-size: 0.5rem;
+    /* 24px wide strip — meets WCAG 2.5.8 touch target in the cross axis */
+    --rc-splitter-separator-size: 1.5rem;
     --rc-splitter-separator-color: var(--md-sys-color-surface-container, Canvas);
-    --rc-splitter-keyline: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
-    --rc-splitter-handle-color: var(--md-sys-color-on-surface-variant, ButtonBorder);
-    --rc-splitter-separator-handle-size: 3rem;
-  }
-
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-splitter::part(separator-handle) {
-    border-radius: var(--md-sys-shape-corner-full, 999px);
-    transition: background-color 150ms ease;
-  }
+    /* No keyline border; surface color provides enough contrast */
+    --rc-splitter-keyline: none;
+    --rc-splitter-separator-border-inline-start: none;
+    --rc-splitter-separator-border-inline-end: none;
+    --rc-splitter-separator-border-block-start: none;
+    --rc-splitter-separator-border-block-end: none;
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-splitter::part(separator-handle):hover {
-    background-color: color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
+    /* M3 drag indicator: 32px × 4px rounded pill, like a bottom-sheet handle */
+    --rc-splitter-separator-handle-size: 2rem;
+    --rc-splitter-handle-thickness: 4px;
+    --rc-splitter-handle-border-radius: 999px;
+    /* Disable the default dot grip; use a solid pill fill instead */
+    --rc-splitter-handle-pattern: none;
+    --rc-splitter-handle-fill: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface-variant, ButtonBorder) 40%,
+      transparent
+    );
+    /* Hover state layer on the pill only, not the full strip */
+    --rc-splitter-handle-hover-fill: color-mix(
+      in srgb,
+      var(--md-sys-color-primary, Highlight) 8%,
+      transparent
+    );
+    --rc-splitter-handle-transition: 150ms var(--md-sys-motion-easing-standard, ease);
   }
 }

package/components/transfer-list.css

@@ -3,6 +3,21 @@
     --rc-transfer-list-gap: 1rem;
     --rc-transfer-list-panel-gap: 0.5rem;
     --rc-transfer-list-listbox-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
+    --rc-transfer-list-listbox-bg: var(--md-sys-color-surface, Canvas);
+    --rc-transfer-list-option-gap: 0.75rem;
+    --rc-transfer-list-option-padding-block: 0;
+    --rc-transfer-list-option-padding-inline: 0.75rem;
+    --rc-transfer-list-option-hover-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 8%,
+      transparent
+    );
+    --rc-transfer-list-option-hover-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-transfer-list-option-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-transfer-list-option-selected-color: var(
+      --md-sys-color-on-secondary-container,
+      HighlightText
+    );
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-transfer-list::part(panel) {
@@ -16,11 +31,35 @@
     font-weight: 500;
   }
 
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-transfer-list::part(listbox) {
+    border-radius: var(--md-sys-shape-corner-small, 0.25rem);
+    --rc-listbox-option-gap: 0.75rem;
+    --rc-listbox-option-min-block-size: 3rem;
+    --rc-listbox-option-padding-block: 0;
+    --rc-listbox-option-padding-inline: 0.75rem;
+    --rc-listbox-option-transition: background-color 150ms ease, color 150ms ease;
+    --rc-listbox-hover-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 8%,
+      transparent
+    );
+    --rc-listbox-hover-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-listbox-active-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 12%,
+      transparent
+    );
+    --rc-listbox-active-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-listbox-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-listbox-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-listbox-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+  }
+
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-transfer-list::part(button) {
     min-block-size: 2.5rem;
     padding-inline: 1rem;
     border: 0;
-    border-radius: var(--md-sys-shape-corner-full, 999px);
+    border-radius: var(--md-sys-shape-corner-medium, 0.75rem);
     background: var(--md-sys-color-secondary-container, ButtonFace);
     color: var(--md-sys-color-on-secondary-container, ButtonText);
   }

package/components.css

@@ -7,6 +7,7 @@
 @import './components/textarea.css';
 @import './components/markdown-editor.css';
 @import './components/transfer-list.css';
+@import './components/fab.css';
 @import './components/app-bar.css';
 @import './components/menu.css';
 @import './components/menu-button.css';