@rcarls/rc-theme-material 0.3.2 → 0.4.0

package/components/select.css

@@ -1,16 +1,24 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(trigger) {
     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-select::part(trigger):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-select::part(trigger):focus-visible,
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(trigger)[aria-expanded='true'] {
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-select::part(trigger)[aria-expanded='true'] {
     border-color: var(--md-sys-color-primary, Highlight);
     box-shadow: inset 0 0 0 1px var(--md-sys-color-primary, Highlight);
     outline: none;
@@ -24,7 +32,11 @@
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::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);
   }
 
@@ -43,7 +55,7 @@
     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-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;
@@ -78,7 +90,9 @@
       --md-outlined-select-text-field-trailing-icon-color,
       var(--md-sys-color-on-surface-variant, CanvasText)
     );
-    transition: color 150ms ease, transform 150ms ease;
+    transition:
+      color 150ms ease,
+      transform 150ms ease;
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-select[open]::part(toggle-indicator) {

package/components/snackbar.css

@@ -0,0 +1,23 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-snackbar {
+    --rc-snackbar-inset-block-end: calc(1rem + var(--rc-navigation-bar-block-size, 0px));
+    --rc-snackbar-min-block-size: 3rem;
+    --rc-snackbar-max-inline-size: 30rem;
+    --rc-snackbar-padding-block: 0.875rem;
+    --rc-snackbar-padding-inline: 1rem;
+    --rc-snackbar-border: 0;
+    --rc-snackbar-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    --rc-snackbar-bg: var(--md-sys-color-inverse-surface, CanvasText);
+    --rc-snackbar-color: var(--md-sys-color-inverse-on-surface, Canvas);
+    --rc-snackbar-action-color: var(--md-sys-color-inverse-primary, LinkText);
+    --rc-snackbar-action-border: 0;
+    --rc-snackbar-action-radius: var(--md-sys-shape-corner-full, 9999px);
+    --rc-snackbar-action-padding-block: 0.5rem;
+    --rc-snackbar-action-padding-inline: 0.75rem;
+    --rc-snackbar-action-bg: transparent;
+    --rc-snackbar-action-font: inherit;
+    --rc-snackbar-shadow: var(--rc-shadow-level3);
+    --rc-snackbar-focus-ring: 2px solid var(--md-sys-color-inverse-primary, Highlight);
+    --rc-snackbar-focus-ring-offset: 2px;
+  }
+}

package/components/switch.css

@@ -0,0 +1,33 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) 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: 2px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-switch-track-radius: var(--md-sys-shape-corner-full, 9999px);
+    --rc-switch-track-bg: var(--md-sys-color-surface-container-highest, ButtonFace);
+    --rc-switch-thumb-size: 1rem;
+    --rc-switch-thumb-offset: 0.375rem;
+    --rc-switch-thumb-bg: var(--md-sys-color-outline, ButtonText);
+    --rc-switch-selected-track-border-color: var(--md-sys-color-primary, Highlight);
+    --rc-switch-selected-track-bg: var(--md-sys-color-primary, Highlight);
+    --rc-switch-selected-thumb-size: 1.5rem;
+    --rc-switch-selected-thumb-bg: var(--md-sys-color-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);
+
+    /* Keep long flex/grid siblings from shrinking the control below its track. */
+    min-inline-size: var(--rc-switch-track-inline-size) !important;
+    min-block-size: var(--rc-switch-track-block-size) !important;
+    flex-shrink: 0 !important;
+  }
+}

package/components/transfer-list.css

@@ -33,7 +33,7 @@
 
   :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-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.css

@@ -1,23 +1,36 @@
 @layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.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';
 @import './components/virtual-canvas.css';
 @import './components/modes.css';
+@import './state-layer.css';

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Material 3 CSS theme and token bridge for rc-webcomponents.",
   "repository": {
     "type": "git",
@@ -22,6 +22,7 @@
     "./defaults.css": "./defaults.css",
     "./components.css": "./components.css",
     "./components/*.css": "./components/*.css",
+    "./state-layer.css": "./state-layer.css",
     "./theme.css": "./theme.css"
   },
   "files": [

package/state-layer.css

@@ -0,0 +1,33 @@
+@layer rc-theme-material.components {
+  /*
+   * Material 3 state layers for interactive elements that already own their
+   * border radius. Uses currentColor so the layer follows each component's
+   * foreground token.
+   */
+  .rc-state-layer {
+    position: relative;
+  }
+
+  .rc-state-layer::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
+  }
+
+  .rc-state-layer:hover::after {
+    opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+  }
+
+  .rc-state-layer:focus-visible::after {
+    opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);
+  }
+
+  .rc-state-layer:active::after {
+    opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
+  }
+}