mtrl 0.8.0-next.8 → 0.8.0

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

@@ -27,55 +27,54 @@ $component: "#{base.$prefix}-segmented-button";
     position: relative;
     display: inline-flex;
     align-items: stretch;
-    border-radius: 20px;
     border: 1px solid t.color("outline");
     background-color: transparent;
     overflow: hidden;
 
     // Density variables with defaults (Material Design 3 standard density)
-    --segment-height: 40px;
-    --segment-padding-x: 24px;
-    --segment-padding-icon-only: 12px;
-    --segment-padding-icon-text-left: 12px;
-    --segment-padding-icon-text-right: 16px;
-    --segment-icon-size: 18px;
-    --segment-text-size: 0.875rem;
-    --segment-border-radius: 20px;
-    --segment-checkmark-size: 18px;
+    --#{base.$prefix}-segmented-button-height: 40px;
+    --#{base.$prefix}-segmented-button-padding-x: 24px;
+    --#{base.$prefix}-segmented-button-padding-icon-only: 12px;
+    --#{base.$prefix}-segmented-button-padding-icon-text-left: 12px;
+    --#{base.$prefix}-segmented-button-padding-icon-text-right: 16px;
+    --#{base.$prefix}-segmented-button-icon-size: 18px;
+    --#{base.$prefix}-segmented-button-text-size: 0.875rem;
+    --#{base.$prefix}-segmented-button-border-radius: 20px;
+    --#{base.$prefix}-segmented-button-checkmark-size: 18px;
 
     // Set height from the CSS variable
-    height: var(--segment-height);
+    height: var(--#{base.$prefix}-segmented-button-height);
     // Adjust border radius based on height
-    border-radius: calc(var(--segment-height) / 2);
+    border-radius: calc(var(--#{base.$prefix}-segmented-button-height) / 2);
 
     // Comfortable density (medium)
     &--comfortable {
-        --segment-height: 36px;
-        --segment-padding-x: 20px;
-        --segment-padding-icon-only: 10px;
-        --segment-padding-icon-text-left: 10px;
-        --segment-padding-icon-text-right: 14px;
-        --segment-icon-size: 18px;
-        --segment-text-size: 0.8125rem;
-        --segment-border-radius: 18px;
-        --segment-checkmark-size: 16px;
-
-        border-radius: var(--segment-border-radius);
+        --#{base.$prefix}-segmented-button-height: 36px;
+        --#{base.$prefix}-segmented-button-padding-x: 20px;
+        --#{base.$prefix}-segmented-button-padding-icon-only: 10px;
+        --#{base.$prefix}-segmented-button-padding-icon-text-left: 10px;
+        --#{base.$prefix}-segmented-button-padding-icon-text-right: 14px;
+        --#{base.$prefix}-segmented-button-icon-size: 18px;
+        --#{base.$prefix}-segmented-button-text-size: 0.8125rem;
+        --#{base.$prefix}-segmented-button-border-radius: 18px;
+        --#{base.$prefix}-segmented-button-checkmark-size: 16px;
+
+        border-radius: var(--#{base.$prefix}-segmented-button-border-radius);
     }
 
     // Compact density (small)
     &--compact {
-        --segment-height: 32px;
-        --segment-padding-x: 16px;
-        --segment-padding-icon-only: 8px;
-        --segment-padding-icon-text-left: 8px;
-        --segment-padding-icon-text-right: 12px;
-        --segment-icon-size: 16px;
-        --segment-text-size: 0.75rem;
-        --segment-border-radius: 16px;
-        --segment-checkmark-size: 16px;
-
-        border-radius: var(--segment-border-radius);
+        --#{base.$prefix}-segmented-button-height: 32px;
+        --#{base.$prefix}-segmented-button-padding-x: 16px;
+        --#{base.$prefix}-segmented-button-padding-icon-only: 8px;
+        --#{base.$prefix}-segmented-button-padding-icon-text-left: 8px;
+        --#{base.$prefix}-segmented-button-padding-icon-text-right: 12px;
+        --#{base.$prefix}-segmented-button-icon-size: 16px;
+        --#{base.$prefix}-segmented-button-text-size: 0.75rem;
+        --#{base.$prefix}-segmented-button-border-radius: 16px;
+        --#{base.$prefix}-segmented-button-checkmark-size: 16px;
+
+        border-radius: var(--#{base.$prefix}-segmented-button-border-radius);
     }
 
     // Disabled state for whole component
@@ -95,7 +94,6 @@ $component: "#{base.$prefix}-segmented-button";
         background-color: transparent;
         border: none;
         position: relative;
-        border-radius: 0 !important; // Override button's border-radius completely
         min-width: 48px;
         height: 100%;
         color: t.color("on-surface");
@@ -103,71 +101,59 @@ $component: "#{base.$prefix}-segmented-button";
         justify-content: center;
 
         // Use CSS variables for dynamic sizing
-        padding: 0 var(--segment-padding-x);
-
-        // CRITICAL: Override button's active state border-radius changes
-        // Segmented button segments must maintain their shape
-        &:active,
-        &.#{base.$prefix}-button--active {
-            border-radius: 0 !important;
-        }
+        padding: 0 var(--#{base.$prefix}-segmented-button-padding-x);
+
+        // Corner shapes are handed to the button through its own shape hooks
+        // rather than declared over the top of it. The button reads every one
+        // of its radii through these, resting, pressed and selected alike, so
+        // one declaration per position holds the segment's shape in every
+        // state. Overriding border-radius directly meant re-stating each
+        // corner for each state and each variant, and losing to the button
+        // stylesheet without !important on all of it.
+        --#{base.$prefix}-button-shape: 0;
+        --#{base.$prefix}-button-shape-pressed: 0;
+        --#{base.$prefix}-button-shape-selected: 0;
 
         // Icon-only segments
         &.#{base.$prefix}-button--circular {
-            padding: 0 var(--segment-padding-icon-only);
+            padding: 0 var(--#{base.$prefix}-segmented-button-padding-icon-only);
             flex: 0 0 auto; // Icon-only don't flex
         }
 
         // Segments with both icon and text
         &:has(.#{base.$prefix}-button-icon + .#{base.$prefix}-button-text) {
-            padding: 0 var(--segment-padding-icon-text-right) 0
-                var(--segment-padding-icon-text-left);
+            padding: 0 var(--#{base.$prefix}-segmented-button-padding-icon-text-right) 0
+                var(--#{base.$prefix}-segmented-button-padding-icon-text-left);
         }
 
-        // First segment - rounded left corners only
+        // The container is one rounded shape, so only its ends round off
+        $round: var(--#{base.$prefix}-segmented-button-border-radius);
+
+        // First segment: left corners only
         &:first-child {
-            border-top-left-radius: var(--segment-border-radius) !important;
-            border-bottom-left-radius: var(--segment-border-radius) !important;
-
-            &:active,
-            &.#{base.$prefix}-button--active {
-                border-top-left-radius: var(--segment-border-radius) !important;
-                border-bottom-left-radius: var(
-                    --segment-border-radius
-                ) !important;
-            }
+            --#{base.$prefix}-button-shape: #{$round} 0 0 #{$round};
+            --#{base.$prefix}-button-shape-pressed: #{$round} 0 0 #{$round};
+            --#{base.$prefix}-button-shape-selected: #{$round} 0 0 #{$round};
         }
 
-        // Last segment - rounded right corners only
+        // Last segment: right corners only
         &:last-child {
-            border-top-right-radius: var(--segment-border-radius) !important;
-            border-bottom-right-radius: var(--segment-border-radius) !important;
-
-            &:active,
-            &.#{base.$prefix}-button--active {
-                border-top-right-radius: var(
-                    --segment-border-radius
-                ) !important;
-                border-bottom-right-radius: var(
-                    --segment-border-radius
-                ) !important;
-            }
+            --#{base.$prefix}-button-shape: 0 #{$round} #{$round} 0;
+            --#{base.$prefix}-button-shape-pressed: 0 #{$round} #{$round} 0;
+            --#{base.$prefix}-button-shape-selected: 0 #{$round} #{$round} 0;
         }
 
-        // Single segment - all corners rounded
+        // A lone segment is the whole container
         &:only-child {
-            border-radius: var(--segment-border-radius) !important;
-
-            &:active,
-            &.#{base.$prefix}-button--active {
-                border-radius: var(--segment-border-radius) !important;
-            }
+            --#{base.$prefix}-button-shape: #{$round};
+            --#{base.$prefix}-button-shape-pressed: #{$round};
+            --#{base.$prefix}-button-shape-selected: #{$round};
         }
 
         // Reset button ::before pseudo-element (used for state layers)
         // This prevents button hover effects from interfering
         &::before {
-            content: none !important;
+            content: none;
         }
 
         // Hover state (MD3: 8% state layer with on-surface color over surface)
@@ -254,7 +240,7 @@ $component: "#{base.$prefix}-segmented-button";
 
             // Reset variant ::before pseudo-element (state layers)
             &::before {
-                content: none !important;
+                content: none;
             }
 
             // Override variant hover states
@@ -277,34 +263,6 @@ $component: "#{base.$prefix}-segmented-button";
                 box-shadow: none;
             }
 
-            &:active,
-            &.#{base.$prefix}-button--active {
-                border-radius: 0 !important;
-            }
-
-            &:first-child {
-                &:active,
-                &.#{base.$prefix}-button--active {
-                    border-top-left-radius: var(
-                        --segment-border-radius
-                    ) !important;
-                    border-bottom-left-radius: var(
-                        --segment-border-radius
-                    ) !important;
-                }
-            }
-
-            &:last-child {
-                &:active,
-                &.#{base.$prefix}-button--active {
-                    border-top-right-radius: var(
-                        --segment-border-radius
-                    ) !important;
-                    border-bottom-right-radius: var(
-                        --segment-border-radius
-                    ) !important;
-                }
-            }
         }
     }
 
@@ -345,7 +303,7 @@ $component: "#{base.$prefix}-segmented-button";
 
             // Reset variant ::before pseudo-element
             &::before {
-                content: none !important;
+                content: none;
             }
 
             // Override variant hover states for selected
@@ -385,8 +343,8 @@ $component: "#{base.$prefix}-segmented-button";
         display: none;
         align-items: center;
         justify-content: center;
-        width: var(--segment-checkmark-size);
-        height: var(--segment-checkmark-size);
+        width: var(--#{base.$prefix}-segmented-button-checkmark-size);
+        height: var(--#{base.$prefix}-segmented-button-checkmark-size);
         margin-right: 8px;
         flex-shrink: 0;
 
@@ -426,7 +384,7 @@ $component: "#{base.$prefix}-segmented-button";
         margin: 0;
         white-space: nowrap;
         @include m.typography("label-large");
-        font-size: var(--segment-text-size);
+        font-size: var(--#{base.$prefix}-segmented-button-text-size);
     }
 
     // Space between icon/checkmark and text
@@ -443,8 +401,8 @@ $component: "#{base.$prefix}-segmented-button";
         flex-shrink: 0;
 
         svg {
-            width: var(--segment-icon-size);
-            height: var(--segment-icon-size);
+            width: var(--#{base.$prefix}-segmented-button-icon-size);
+            height: var(--#{base.$prefix}-segmented-button-icon-size);
         }
     }
 

package/src/styles/components/_side-sheet.scss

@@ -0,0 +1,175 @@
+// src/styles/components/_side-sheet.scss
+@use "../abstract/base" as base;
+@use "../abstract/variables" as v;
+@use "../abstract/mixins" as m;
+@use "../abstract/theme" as t;
+
+$component: "#{base.$prefix}-side-sheet";
+
+// -----------------------------------------------------------------------------
+// Side sheet (m3.material.io/components/side-sheets and the Android
+// implementation, MDC-Android docs/components/SideSheet.md)
+//
+// A surface docked to a vertical edge. Standard sheets sit on `surface` beside
+// the page; modal sheets sit on `surface-container-low` over a scrim. Only the
+// corners facing the page round off, at CornerLarge, so the docked edge stays
+// flush with the screen.
+//
+// Positions are logical: `end` is the trailing edge, which follows the writing
+// direction rather than needing a second configuration for right-to-left.
+// -----------------------------------------------------------------------------
+.#{$component} {
+    position: fixed;
+    inset: 0;
+    z-index: v.z-index("modal");
+    display: flex;
+    pointer-events: none;
+
+    &--open {
+        pointer-events: auto;
+    }
+
+    &-scrim {
+        position: absolute;
+        inset: 0;
+        background-color: t.alpha("scrim", 0.32);
+        opacity: 0;
+        visibility: hidden;
+        transition:
+            opacity v.motion("duration-medium1") v.motion("easing-emphasized"),
+            visibility v.motion("duration-medium1") v.motion("easing-emphasized");
+    }
+
+    &-container {
+        position: relative;
+        height: 100%;
+        max-width: 400px; // side sheet specs, container maximum width
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        pointer-events: auto;
+        color: t.color("on-surface");
+        transition: transform v.motion("duration-medium2") v.motion("easing-emphasized");
+
+        &:focus {
+            outline: none;
+        }
+
+        &:focus-visible {
+            outline: 3px solid t.color("secondary");
+            outline-offset: -3px;
+        }
+    }
+
+    // 24dp either side, 12dp between the elements along the top
+    &-header {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 16px 24px;
+        min-height: 72px;
+        box-sizing: border-box;
+    }
+
+    &-title {
+        margin: 0;
+        flex: 1 1 auto;
+        min-width: 0;
+        color: t.color("on-surface");
+        @include m.typography("title-large");
+    }
+
+    // 16dp on the icon side, per the specs' start padding with an icon
+    &-close {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        margin-inline-end: -8px;
+        padding: 0;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: t.color("on-surface-variant");
+        cursor: pointer;
+
+        @include m.state-layer(t.color("on-surface-variant"), "hover");
+
+        &:focus-visible {
+            outline: 3px solid t.color("secondary");
+            outline-offset: 2px;
+        }
+    }
+
+    &-content {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-y: auto;
+        padding: 0 24px 24px;
+        @include m.typography("body-medium");
+        color: t.color("on-surface-variant");
+    }
+
+    // ---------------------------------------------------------------------
+    // Variants: they differ in colour, not only in behaviour
+    // ---------------------------------------------------------------------
+    &--standard {
+        pointer-events: none;
+
+        .#{$component}-container {
+            background-color: t.color("surface");
+            pointer-events: auto;
+        }
+    }
+
+    &--modal {
+        .#{$component}-container {
+            background-color: t.color("surface-container-low");
+            @include m.elevation(1);
+        }
+    }
+
+    // ---------------------------------------------------------------------
+    // Which edge it docks to, and which corners round
+    // ---------------------------------------------------------------------
+    &--end {
+        justify-content: flex-end;
+
+        .#{$component}-container {
+            border-start-start-radius: v.shape("large");
+            border-end-start-radius: v.shape("large");
+            transform: translateX(100%);
+        }
+    }
+
+    &--start {
+        justify-content: flex-start;
+
+        .#{$component}-container {
+            border-start-end-radius: v.shape("large");
+            border-end-end-radius: v.shape("large");
+            transform: translateX(-100%);
+        }
+    }
+
+    &--open {
+        .#{$component}-container {
+            transform: translateX(0);
+        }
+
+        .#{$component}-scrim {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+
+    @include m.reduced-motion {
+        .#{$component}-container,
+        .#{$component}-scrim {
+            transition: none;
+        }
+    }
+}

package/src/styles/components/_slider.scss

@@ -20,6 +20,13 @@ $component: '#{base.$prefix}-slider';
   flex-direction: column;
   user-select: none;
   touch-action: none;
+
+  // Decoration inherits theme colours directly, without JavaScript subscriptions.
+  --#{base.$prefix}-slider-track-color: var(--#{base.$prefix}-slider-color, #{t.color('primary')});
+  --#{base.$prefix}-slider-tick-color: var(--#{base.$prefix}-slider-on-color, #{t.color('on-primary')});
+  --#{base.$prefix}-slider-active-opacity: 1;
+  --#{base.$prefix}-slider-inactive-opacity: 0.24;
+  --#{base.$prefix}-slider-tick-opacity: 0.5;
   
   // Container should not have a focus outline
   &:focus {
@@ -71,17 +78,40 @@ $component: '#{base.$prefix}-slider';
     align-items: center;
   }
 
-  // Canvas element for hybrid rendering
-  &-canvas {
-    position: absolute !important;
-    top: 0;
-    left: 0;
-    width: 100% !important;
-    height: 100% !important;
-    pointer-events: none;
-    z-index: 0;
+  @each $color in (secondary, tertiary, error) {
+    &--#{$color} {
+      --#{base.$prefix}-slider-track-color: var(--#{base.$prefix}-slider-color, #{t.color($color)});
+      --#{base.$prefix}-slider-tick-color: var(--#{base.$prefix}-slider-on-color, #{t.color('on-' + $color)});
+    }
+  }
+  &--disabled {
+    --#{base.$prefix}-slider-track-color: #{t.color('on-surface')};
+    --#{base.$prefix}-slider-tick-color: #{t.color('on-surface')};
+    --#{base.$prefix}-slider-active-opacity: 0.38;
+    --#{base.$prefix}-slider-inactive-opacity: 0.12;
+    --#{base.$prefix}-slider-tick-opacity: 0.06;
+  }
+  &-visual { position: absolute; inset: 0; pointer-events: none; }
+  &-track { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); overflow: hidden; }
+  &-segment {
+    position: absolute; height: 100%; border-radius: 3px;
+    background: var(--#{base.$prefix}-slider-track-color); opacity: var(--#{base.$prefix}-slider-inactive-opacity);
+    transition: left 0.225s cubic-bezier(0.4, 0, 0.2, 1), width 0.225s cubic-bezier(0.4, 0, 0.2, 1);
+    &--active { opacity: var(--#{base.$prefix}-slider-active-opacity); }
+  }
+  &-ticks {
+    position: absolute; inset: 0; color: var(--#{base.$prefix}-slider-track-color); opacity: var(--#{base.$prefix}-slider-tick-opacity);
+    background-image: radial-gradient(circle at center, currentColor 2px, transparent 2px);
+    background-repeat: repeat-x;
+    &--active { color: var(--#{base.$prefix}-slider-tick-color); opacity: var(--#{base.$prefix}-slider-active-opacity); }
   }
- 
+  &-dot { position: absolute; right: 5px; top: calc(50% - 2px); width: 4px; height: 4px;
+    border-radius: 50%; background: var(--#{base.$prefix}-slider-track-color); opacity: var(--#{base.$prefix}-slider-active-opacity); }
+  &--dragging &-segment { transition: none; }
+  @media (prefers-reduced-motion: reduce) {
+    &-segment, &-handle, &-value { transition: none !important; }
+  }
+
   // Handle - updated with T-shape and proper focus styles
   &-handle {
     position: absolute;
@@ -113,8 +143,8 @@ $component: '#{base.$prefix}-slider';
       position: absolute;
       width: 4px;
       height: calc(100% - 8px);
-      // --mtrl-slider-color: the same per-slider override the canvas honours
-      background-color: var(--mtrl-slider-color, #{t.color('primary')});
+      // --#{base.$prefix}-slider-color: the same per-slider override the canvas honours
+      background-color: var(--#{base.$prefix}-slider-color, #{t.color('primary')});
       border-radius: 2px;
       left: 50%;
       top: 50%;
@@ -122,11 +152,11 @@ $component: '#{base.$prefix}-slider';
       transition: background-color 0.15s ease, opacity 0.15s ease, width 0.15s ease;
       
       .#{$component}--secondary & {
-        background-color: var(--mtrl-slider-color, #{t.color('secondary')});
+        background-color: var(--#{base.$prefix}-slider-color, #{t.color('secondary')});
       }
       
       .#{$component}--tertiary & {
-        background-color: var(--mtrl-slider-color, #{t.color('tertiary')});
+        background-color: var(--#{base.$prefix}-slider-color, #{t.color('tertiary')});
       }
       
       .#{$component}--error & {
@@ -153,14 +183,14 @@ $component: '#{base.$prefix}-slider';
     
     // Hover state
     &:hover::before {
-      background-color: var(--mtrl-slider-color, #{t.color('primary')});
+      background-color: var(--#{base.$prefix}-slider-color, #{t.color('primary')});
       
       .#{$component}--secondary & {
-        background-color: var(--mtrl-slider-color, #{t.color('secondary')});
+        background-color: var(--#{base.$prefix}-slider-color, #{t.color('secondary')});
       }
       
       .#{$component}--tertiary & {
-        background-color: var(--mtrl-slider-color, #{t.color('tertiary')});
+        background-color: var(--#{base.$prefix}-slider-color, #{t.color('tertiary')});
       }
       
       .#{$component}--error & {
@@ -175,15 +205,15 @@ $component: '#{base.$prefix}-slider';
     
     // Active state
     &:active::before {
-      background-color: var(--mtrl-slider-color, #{t.color('primary')});
+      background-color: var(--#{base.$prefix}-slider-color, #{t.color('primary')});
       width: 3px; // Shrink width when active for visual feedback
       
       .#{$component}--secondary & {
-        background-color: var(--mtrl-slider-color, #{t.color('secondary')});
+        background-color: var(--#{base.$prefix}-slider-color, #{t.color('secondary')});
       }
       
       .#{$component}--tertiary & {
-        background-color: var(--mtrl-slider-color, #{t.color('tertiary')});
+        background-color: var(--#{base.$prefix}-slider-color, #{t.color('tertiary')});
       }
       
       .#{$component}--error & {