mtrl 0.7.0 → 0.8.0-next.4

package/src/styles/components/_icon-button.scss

@@ -122,7 +122,7 @@ $widths: (
     height: get-size("s", container);
 
     // Default shape (round - full radius)
-    border-radius: 50%;
+    border-radius: var(--#{base.$prefix}-button-shape, 50%);
 
     // Smooth transitions for shape morphing
     transition:
@@ -262,69 +262,69 @@ $widths: (
 
     // Round is default (50% radius)
     &--round {
-        border-radius: 50%;
+        border-radius: var(--#{base.$prefix}-button-shape, 50%);
     }
 
     // Square shape with size-specific corner radius
     &--square {
-        border-radius: get-size("s", square-radius);
+        border-radius: var(--#{base.$prefix}-button-shape, get-size("s", square-radius));
 
         &.#{$component}--xs {
-            border-radius: get-size("xs", square-radius);
+            border-radius: var(--#{base.$prefix}-button-shape, get-size("xs", square-radius));
         }
 
         &.#{$component}--m {
-            border-radius: get-size("m", square-radius);
+            border-radius: var(--#{base.$prefix}-button-shape, get-size("m", square-radius));
         }
 
         &.#{$component}--l {
-            border-radius: get-size("l", square-radius);
+            border-radius: var(--#{base.$prefix}-button-shape, get-size("l", square-radius));
         }
 
         &.#{$component}--xl {
-            border-radius: get-size("xl", square-radius);
+            border-radius: var(--#{base.$prefix}-button-shape, get-size("xl", square-radius));
         }
     }
 
     // Shape morph on press - both round and square morph to pressed radius
     &:active {
         &.#{$component}--round {
-            border-radius: get-size("s", pressed-radius);
+            border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("s", pressed-radius));
 
             &.#{$component}--xs {
-                border-radius: get-size("xs", pressed-radius);
+                border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("xs", pressed-radius));
             }
 
             &.#{$component}--m {
-                border-radius: get-size("m", pressed-radius);
+                border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("m", pressed-radius));
             }
 
             &.#{$component}--l {
-                border-radius: get-size("l", pressed-radius);
+                border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("l", pressed-radius));
             }
 
             &.#{$component}--xl {
-                border-radius: get-size("xl", pressed-radius);
+                border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("xl", pressed-radius));
             }
         }
 
         &.#{$component}--square {
-            border-radius: get-size("s", pressed-radius);
+            border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("s", pressed-radius));
 
             &.#{$component}--xs {
-                border-radius: get-size("xs", pressed-radius);
+                border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("xs", pressed-radius));
             }
 
             &.#{$component}--m {
-                border-radius: get-size("m", pressed-radius);
+                border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("m", pressed-radius));
             }
 
             &.#{$component}--l {
-                border-radius: get-size("l", pressed-radius);
+                border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("l", pressed-radius));
             }
 
             &.#{$component}--xl {
-                border-radius: get-size("xl", pressed-radius);
+                border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("xl", pressed-radius));
             }
         }
     }
@@ -492,28 +492,28 @@ $widths: (
     &--selected {
         // Round buttons become square when selected
         &.#{$component}--round:not(:active) {
-            border-radius: get-size("s", square-radius);
+            border-radius: var(--#{base.$prefix}-button-shape-selected, get-size("s", square-radius));
 
             &.#{$component}--xs {
-                border-radius: get-size("xs", square-radius);
+                border-radius: var(--#{base.$prefix}-button-shape-selected, get-size("xs", square-radius));
             }
 
             &.#{$component}--m {
-                border-radius: get-size("m", square-radius);
+                border-radius: var(--#{base.$prefix}-button-shape-selected, get-size("m", square-radius));
             }
 
             &.#{$component}--l {
-                border-radius: get-size("l", square-radius);
+                border-radius: var(--#{base.$prefix}-button-shape-selected, get-size("l", square-radius));
             }
 
             &.#{$component}--xl {
-                border-radius: get-size("xl", square-radius);
+                border-radius: var(--#{base.$prefix}-button-shape-selected, get-size("xl", square-radius));
             }
         }
 
         // Square buttons become round when selected
         &.#{$component}--square:not(:active) {
-            border-radius: 50%;
+            border-radius: var(--#{base.$prefix}-button-shape-selected, 50%);
         }
     }
 

package/src/styles/components/_select.scss

@@ -53,7 +53,15 @@ $component: "#{base.$prefix}-select";
 
     // State when menu is open
     &--open {
-        z-index: 2; // Keep above other elements when open
+        z-index: f.get-z-index("menu");
+
+        // Transparent scrim covering the viewport to block pointer events
+        // on elements behind the open dropdown
+        &::before {
+            content: "";
+            position: fixed;
+            inset: 0;
+        }
 
         // These styles handle the focused state when the menu is open
         .#{base.$prefix}-textfield--filled {

package/src/styles/components/_slider.scss

@@ -113,7 +113,8 @@ $component: '#{base.$prefix}-slider';
       position: absolute;
       width: 4px;
       height: calc(100% - 8px);
-      background-color: t.color('primary');
+      // --mtrl-slider-color: the same per-slider override the canvas honours
+      background-color: var(--mtrl-slider-color, #{t.color('primary')});
       border-radius: 2px;
       left: 50%;
       top: 50%;
@@ -121,11 +122,11 @@ $component: '#{base.$prefix}-slider';
       transition: background-color 0.15s ease, opacity 0.15s ease, width 0.15s ease;
       
       .#{$component}--secondary & {
-        background-color: t.color('secondary');
+        background-color: var(--mtrl-slider-color, #{t.color('secondary')});
       }
       
       .#{$component}--tertiary & {
-        background-color: t.color('tertiary');
+        background-color: var(--mtrl-slider-color, #{t.color('tertiary')});
       }
       
       .#{$component}--error & {
@@ -152,14 +153,14 @@ $component: '#{base.$prefix}-slider';
     
     // Hover state
     &:hover::before {
-      background-color: t.color('primary');
+      background-color: var(--mtrl-slider-color, #{t.color('primary')});
       
       .#{$component}--secondary & {
-        background-color: t.color('secondary');
+        background-color: var(--mtrl-slider-color, #{t.color('secondary')});
       }
       
       .#{$component}--tertiary & {
-        background-color: t.color('tertiary');
+        background-color: var(--mtrl-slider-color, #{t.color('tertiary')});
       }
       
       .#{$component}--error & {
@@ -174,15 +175,15 @@ $component: '#{base.$prefix}-slider';
     
     // Active state
     &:active::before {
-      background-color: t.color('primary');
+      background-color: var(--mtrl-slider-color, #{t.color('primary')});
       width: 3px; // Shrink width when active for visual feedback
       
       .#{$component}--secondary & {
-        background-color: t.color('secondary');
+        background-color: var(--mtrl-slider-color, #{t.color('secondary')});
       }
       
       .#{$component}--tertiary & {
-        background-color: t.color('tertiary');
+        background-color: var(--mtrl-slider-color, #{t.color('tertiary')});
       }
       
       .#{$component}--error & {

package/src/styles/themes/_index.scss

@@ -17,6 +17,7 @@
 @forward "sageivory";
 @forward "tealcaramel";
 
+@forward "legacy";
 @forward "material";
 
 @forward "highcontrast";

package/src/styles/themes/_legacy.scss

@@ -0,0 +1,73 @@
+// src/styles/themes/_legacy.scss
+// Legacy: the Radiooooo v3 palette. Values are the v3 ones, set by hand:
+// bar blue on primary, selection orange on tertiary, the salmon selected-mode
+// disc on secondary (the M3 tonal toggle's selected colour), cream surfaces;
+// dark mode uses the v3 blue-grey neutrals.
+@use "../abstract/base" as *;
+@use "base-theme" as *;
+
+@include create-theme("legacy") {
+    // Key colors (light)
+    --#{$prefix}-sys-color-primary: #00489a;
+    --#{$prefix}-sys-color-on-primary: #ffffff;
+    --#{$prefix}-sys-color-primary-container: #d6e3ff;
+    --#{$prefix}-sys-color-on-primary-container: #001b3f;
+    --#{$prefix}-sys-color-secondary: #ea9d97;
+    --#{$prefix}-sys-color-on-secondary: #ffffff;
+    --#{$prefix}-sys-color-secondary-container: #ffdad6;
+    --#{$prefix}-sys-color-on-secondary-container: #3b0907;
+    --#{$prefix}-sys-color-tertiary: #ff3400;
+    --#{$prefix}-sys-color-on-tertiary: #ffffff;
+    --#{$prefix}-sys-color-tertiary-container: #ffd9cc;
+    --#{$prefix}-sys-color-on-tertiary-container: #3a0c00;
+
+    // Neutral colors (the v3 cream)
+    --#{$prefix}-sys-color-surface: #f7f4f0;
+    --#{$prefix}-sys-color-surface-dim: #d9d5d0;
+    --#{$prefix}-sys-color-surface-bright: #fbf9f6;
+    --#{$prefix}-sys-color-surface-container-lowest: #ffffff;
+    --#{$prefix}-sys-color-surface-container-low: #f3efea;
+    --#{$prefix}-sys-color-surface-container: #efeae4;
+    --#{$prefix}-sys-color-surface-container-high: #e8e3dd;
+    --#{$prefix}-sys-color-surface-container-highest: #e1dcd6;
+    --#{$prefix}-sys-color-on-surface: #1d1b19;
+    --#{$prefix}-sys-color-on-surface-variant: #4a4643;
+    --#{$prefix}-sys-color-outline: #7a7571;
+    --#{$prefix}-sys-color-outline-variant: #ccc6c0;
+    --#{$prefix}-sys-color-surface-rgb: 29, 27, 25;
+
+    @include status-colors-light();
+
+    &[data-theme-mode="dark"] {
+        // The bars keep the v3 blue in dark mode; buttons lighten for contrast.
+        --#{$prefix}-sys-color-primary: #7db4ff;
+        --#{$prefix}-sys-color-on-primary: #002a63;
+        --#{$prefix}-sys-color-primary-container: #00489a;
+        --#{$prefix}-sys-color-on-primary-container: #ffffff;
+        --#{$prefix}-sys-color-secondary: #e08e88;
+        --#{$prefix}-sys-color-on-secondary: #3b0907;
+        --#{$prefix}-sys-color-secondary-container: #7a3a35;
+        --#{$prefix}-sys-color-on-secondary-container: #ffdad6;
+        --#{$prefix}-sys-color-tertiary: #ff5c2e;
+        --#{$prefix}-sys-color-on-tertiary: #ffffff;
+        --#{$prefix}-sys-color-tertiary-container: #8a1c00;
+        --#{$prefix}-sys-color-on-tertiary-container: #ffd9cc;
+
+        // v3 dark: blue-grey neutrals (background #262631, bars #363644)
+        --#{$prefix}-sys-color-surface: #262631;
+        --#{$prefix}-sys-color-surface-dim: #262631;
+        --#{$prefix}-sys-color-surface-bright: #4a4a5a;
+        --#{$prefix}-sys-color-surface-container-lowest: #1e1e27;
+        --#{$prefix}-sys-color-surface-container-low: #2c2c38;
+        --#{$prefix}-sys-color-surface-container: #363644;
+        --#{$prefix}-sys-color-surface-container-high: #3f3f4e;
+        --#{$prefix}-sys-color-surface-container-highest: #4a4a5a;
+        --#{$prefix}-sys-color-on-surface: #e6e4ea;
+        --#{$prefix}-sys-color-on-surface-variant: #c6c4cc;
+        --#{$prefix}-sys-color-outline: #8f8d96;
+        --#{$prefix}-sys-color-outline-variant: #45444f;
+        --#{$prefix}-sys-color-surface-rgb: 38, 38, 49;
+
+        @include status-colors-dark();
+    }
+}

package/dist/components/carousel/features/drag.d.ts

@@ -1,8 +0,0 @@
-import { CarouselConfig } from "../types";
-/**
- * Adds drag functionality to the carousel component with Material Design 3 scroll behavior support
- *
- * @param {CarouselConfig} config - Carousel configuration
- * @returns {Function} Higher-order function that adds drag navigation feature
- */
-export declare const withDrag: (config: CarouselConfig) => (component: any) => any;