mtrl 0.8.0-next.8 → 0.8.0

package/src/styles/components/_navigation-rail.scss

@@ -0,0 +1,307 @@
+@use 'sass:math';
+@use '../abstract/base' as base;
+@use '../abstract/theme' as t;
+@use '../abstract/mixins' as m;
+@use '../abstract/variables' as v;
+
+// M3 Expressive navigation rail.
+// Geometry: Compose NavigationRailCollapsed/Expanded/BaselineItem/VerticalItem/
+// HorizontalItem tokens v0_11_0 and Android navigationrail/res/values/tokens.xml.
+// Motion: Compose WideNavigationRail animates the width, the item spacing and
+// the item height on the default spatial spring (fast spatial for the modal);
+// Compose NavigationItem glides the icon between its top and start positions
+// on the same spring and swaps the label position at the midpoint behind a
+// fade. The active indicator fades on the effects spring and scales in from
+// its centre as in Android NavigationBarItemView.ActiveIndicatorTransform.
+// Icon, label, badge and indicator are positioned absolutely inside the item
+// so that every one of those moves is a transition rather than a reflow.
+$component: '#{base.$prefix}-navigation-rail';
+$spatial: v.motion('spring-default-spatial-duration') v.motion('spring-default-spatial-easing');
+$fast-spatial: v.motion('spring-fast-spatial-duration') v.motion('spring-fast-spatial-easing');
+$effects: v.motion('spring-default-effects-duration') v.motion('spring-default-effects-easing');
+$midpoint: math.div(v.motion('spring-default-spatial-duration'), 2);
+// Properties that change layout rather than glide snap at the midpoint of the
+// spatial spring, when the swap fade has the element at opacity 0.
+$snap: 0s linear $midpoint;
+
+.#{$component} {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  inline-size: 96px;
+  block-size: 100%;
+  min-block-size: 0;
+  padding-block: 44px 16px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: t.color('surface');
+  color: t.color('on-surface-variant');
+  transition: inline-size $spatial;
+
+  &--expanded { inline-size: var(--#{base.$prefix}-navigation-rail-expanded-width, 280px); }
+
+  // Header: the menu button and an optional FAB. 24dp of start padding centres
+  // the 48dp menu button in the collapsed rail; expanded content aligns with
+  // the 20dp item margin.
+  &__header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-shrink: 0;
+    gap: 8px;
+    margin-block-end: 40px;
+    padding-inline-start: 24px;
+    transition: padding-inline-start $spatial;
+  }
+  &--expanded &__header { padding-inline-start: 20px; }
+  &__toggle {
+    display: grid;
+    place-items: center;
+    position: relative;
+    overflow: hidden;
+    inline-size: 48px;
+    block-size: 48px;
+    padding: 12px;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: t.color('on-surface-variant');
+    cursor: pointer;
+    transition: background-color $effects;
+    svg { inline-size: 24px; block-size: 24px; fill: currentColor; }
+    &:hover { background: t.alpha('on-surface', v.state('hover-state-layer-opacity')); }
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    gap: 4px;
+    transition: gap $spatial;
+  }
+  &--expanded &__items { gap: 0; }
+  &__content { display: contents; }
+
+  // Item: the hit target spans the rail; 64dp tall with the icon on top,
+  // 56dp tall with the icon at the start.
+  &__item {
+    position: relative;
+    isolation: isolate;
+    display: block;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 64px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: block-size $spatial, color $effects;
+
+    &[aria-disabled='true'] { opacity: 0.38; cursor: default; }
+    // Active label: secondary with the icon on top, on secondary container beside it
+    &--active { color: t.color('secondary'); }
+  }
+  &--expanded &__item { block-size: 56px; }
+  &--expanded &__item--active { color: t.color('on-secondary-container'); }
+
+  // Indicator frame: a 56x32 pill centred under the icon, a 56dp pill across
+  // the item when expanded. It clips the fill, the state layer and the ripple.
+  // Positions are lengths, not percentages of the rail: in a 96dp rail the
+  // icon and the pill sit 36dp and 20dp from the start in both states, so
+  // only their vertical position and the pill's size move (Compose
+  // NavigationItem lerps the same pixel positions).
+  &__indicator {
+    position: absolute;
+    z-index: -1;
+    inset-block-start: 6px;
+    inset-inline-start: 20px;
+    inline-size: 56px;
+    block-size: 32px;
+    border-radius: 999px;
+    overflow: hidden;
+    pointer-events: none;
+    transition:
+      inset-block-start $spatial,
+      inline-size $spatial,
+      block-size $spatial;
+
+    // Fill: scales in from the centre when the item becomes active and back
+    // out when it stops being active; the fade out is stretched over the
+    // shrink so the pill is seen leaving. A transition takes the timing of
+    // the state it moves to, so this base rule holds the outgoing timing.
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: t.color('secondary-container');
+      opacity: 0;
+      transform: scaleX(0.4);
+      transition:
+        transform $spatial,
+        opacity v.motion('spring-default-spatial-duration') v.motion('spring-default-effects-easing');
+    }
+    // State layer, on secondary container for active and inactive items alike
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: t.color('on-secondary-container');
+      opacity: 0;
+      transition: opacity $effects;
+    }
+  }
+  &--expanded &__indicator {
+    inset-block-start: 0;
+    inline-size: calc(100% - 40px);
+    block-size: 56px;
+  }
+  &__item--active &__indicator::before {
+    opacity: 1;
+    transform: scaleX(1);
+    transition: transform $spatial, opacity $effects;
+  }
+  &__item:hover &__indicator::after { opacity: v.state('hover-state-layer-opacity'); }
+  &__item:focus-visible &__indicator::after { opacity: v.state('focus-state-layer-opacity'); }
+  &__item:active &__indicator::after { opacity: v.state('pressed-state-layer-opacity'); }
+  &__item[aria-disabled='true'] &__indicator::after { opacity: 0; }
+  // The focus ring is drawn around the pill, not the full-width hit target
+  &__item:focus-visible { outline: none; }
+  &__item:focus-visible &__indicator { outline: 3px solid t.color('secondary'); outline-offset: 2px; }
+
+  &__ripple {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+    background: t.color('on-secondary-container');
+    animation: #{$component}-ripple v.motion('spring-default-spatial-duration') ease-out forwards;
+  }
+
+  // Icon: glides from above the label to the start of the pill
+  &__icon {
+    position: absolute;
+    display: grid;
+    place-items: center;
+    inset-block-start: 10px;
+    inset-inline-start: 36px;
+    inline-size: 24px;
+    block-size: 24px;
+    color: t.color('on-surface-variant');
+    transition: inset-block-start $spatial, color $effects;
+    svg { inline-size: 24px; block-size: 24px; fill: currentColor; }
+  }
+  &__item--active &__icon { color: t.color('on-secondary-container'); }
+  &--expanded &__icon { inset-block-start: 16px; }
+
+  // Label: centred under the pill in a 64dp box (16dp leading and trailing
+  // space), beside the icon when expanded. Its position and type scale snap at
+  // the midpoint of the spring while the swap fade hides it.
+  &__label {
+    position: absolute;
+    box-sizing: border-box;
+    inset-block-start: 42px;
+    inset-inline-start: 16px;
+    inline-size: 64px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    @include m.typography('label-medium');
+    transition:
+      inset-block-start $snap,
+      inset-inline-start $snap,
+      inline-size $snap,
+      font-size $snap,
+      line-height $snap,
+      letter-spacing $snap,
+      text-align $snap;
+    transition-behavior: allow-discrete;
+  }
+  &--expanded &__label {
+    inset-block-start: 18px;
+    inset-inline-start: 68px;
+    inline-size: calc(100% - 104px);
+    text-align: start;
+    @include m.typography('label-large');
+  }
+  &--expanded &__item--badged &__label { inline-size: calc(100% - 140px); }
+  &--switching &__label,
+  &--switching &__badge {
+    animation: #{$component}-swap v.motion('spring-default-spatial-duration') linear;
+  }
+
+  // Badges: the large badge sits on the top end corner of the icon, the dot
+  // just off it; expanded, both move to the end of the pill.
+  &__badge {
+    position: absolute;
+    box-sizing: border-box;
+    inset-inline-start: 54px;
+    inset-block-start: 2px;
+    min-inline-size: 16px;
+    min-block-size: 16px;
+    padding-inline: 4px;
+    border-radius: 999px;
+    background: t.color('error');
+    color: t.color('on-error');
+    @include m.typography('label-small');
+    transition: inset-inline-start $snap, inset-inline-end $snap, inset-block-start $snap;
+    transition-behavior: allow-discrete;
+    &--dot {
+      inline-size: 6px;
+      block-size: 6px;
+      min-inline-size: 0;
+      min-block-size: 0;
+      padding: 0;
+      inset-inline-start: 58px;
+      inset-block-start: 6px;
+    }
+  }
+  &--expanded &__badge { inset-inline-start: auto; inset-inline-end: 36px; inset-block-start: 20px; }
+  &--expanded &__badge--dot { inset-block-start: 25px; }
+
+  &--hide-collapsed:not(&--expanded) { display: none; }
+
+  // Modal expanded rail: a native dialog docked to the start edge.
+  // NavigationRailExpandedTokens: surface container, level 2, large corners.
+  &--modal {
+    position: fixed;
+    inset-block: 0;
+    inset-inline: 0 auto;
+    margin: 0;
+    border: 0;
+    max-inline-size: calc(100vw - 56px);
+    max-block-size: 100dvh;
+    block-size: 100dvh;
+    background: t.color('surface-container');
+    border-start-end-radius: 16px;
+    border-end-end-radius: 16px;
+    transition: inline-size $fast-spatial;
+    @include m.elevation(2);
+    &:not([open]) { display: none; }
+    &::backdrop { background: t.alpha('scrim', 0.32); }
+  }
+
+  &__toggle:focus-visible { outline: 2px solid t.color('secondary'); outline-offset: -2px; }
+
+  @include m.reduced-motion { &, & *, & *::before, & *::after { transition: none; animation: none; } }
+  @include m.high-contrast {
+    border-inline-end: 1px solid CanvasText;
+    &__item--active .#{$component}__indicator { outline: 2px solid Highlight; outline-offset: -2px; }
+  }
+}
+
+@keyframes #{$component}-ripple {
+  from { transform: scale(0); opacity: v.state('pressed-state-layer-opacity'); }
+  to { transform: scale(1); opacity: 0; }
+}
+
+@keyframes #{$component}-swap {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}

package/src/styles/components/_navigation-system.scss

@@ -1,5 +1,7 @@
 // src/components/navigation/system.scss
 
+@use '../abstract/theme' as t;
+
 // Navigation system specific styles
 // These complement the existing navigation component styles
 
@@ -142,7 +144,7 @@ $nav-animation-function: cubic-bezier(0.4, 0, 0.2, 1);
 .mtrl-nav-system {
   [role="navigation"] {
     &:focus-within {
-      outline: 2px solid var(--mtrl-primary-color, #6200ee);
+      outline: 2px solid t.color('primary');
       outline-offset: -2px;
     }
   }

package/src/styles/components/_progress.scss

@@ -1,101 +1,94 @@
-// src/components/progress/_progress.scss - Canvas-based progress styles (no SVG dependency)
+// src/styles/components/_progress.scss
+//
+// Progress indicator. The indicator itself is drawn on a canvas, which reads
+// its colours from the theme, so this stylesheet only lays the element out:
+// the 4dp inset from the container edge that the guidelines ask for, the
+// optional label, and the hidden and disabled states.
 @use "../../styles/abstract/base" as base;
 @use "../../styles/abstract/variables" as v;
 @use "../../styles/abstract/functions" as f;
 @use "../../styles/abstract/mixins" as m;
 @use "../../styles/abstract/theme" as t;
-@use "sass:math";
 
 $component: "#{base.$prefix}-progress";
 
 .#{$component} {
-  // Base container styles
   position: relative;
   display: block;
-  overflow: hidden;
-  transition: opacity 0.1s ease-in-out;
-  // Common accessibility attributes
-  &[aria-disabled="true"] {
-    opacity: 0.38;
-    pointer-events: none;
-  }
+  // The canvas is the only child and defines the height; without this the
+  // line box adds a few pixels under it
+  line-height: 0;
 
-  .#{$component}[style*="display: none"] {
-    opacity: 0 !important;
-    transition: none !important;
+  &[hidden] {
+    display: none;
   }
 
-  // Canvas element - shared by both variants
   &-canvas {
     display: block;
-    width: 100%;
-    height: 100%;
-    max-width: 100%; // Prevent canvas from growing beyond container
-    box-sizing: border-box; // Include borders in width calculation
-    position: relative; // Ensure proper stacking context
-
-    // Smooth transitions for canvas transforms (used in animations)
-    transition: transform 0.3s ease;
+    max-width: 100%;
   }
 
-  // Linear progress variant
+  // ---------------------------------------------------------------------------
+  // Linear: spans its container, inset 4dp from each edge
+  // ---------------------------------------------------------------------------
   &--linear {
     width: 100%;
-    margin: 0 4px;
-    // Allow overflow for label visibility
-    overflow: visible;
-    min-height: 20px; // Ensure enough height for label
-    padding-bottom: 20px; // Space for label below
-
-    // When label is present, ensure proper spacing
-    &:has(.#{$component}__label) {
-      margin-bottom: 8px;
-    }
+    padding: 0 #{4px};
+    box-sizing: border-box;
   }
 
-  // Circular progress variant
+  // ---------------------------------------------------------------------------
+  // Circular: sized by the canvas
+  // ---------------------------------------------------------------------------
   &--circular {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    vertical-align: middle;
   }
 
-  // Label element (created dynamically when showLabel is used)
+  // ---------------------------------------------------------------------------
+  // Label, an extension of this library rather than an M3 element
+  // ---------------------------------------------------------------------------
   &__label {
+    @include m.typography("label-medium");
     position: absolute;
-    font-size: 12px;
+    line-height: normal;
     color: t.color("on-surface-variant");
     white-space: nowrap;
-    transition: opacity 0.3s ease;
-    z-index: 1; // Ensure label is above canvas
 
-    // Position differently based on variant
     .#{$component}--linear & {
-      position: absolute;
-      right: 0;
-      top: initial;
-      // Remove transform and background for below positioning
-      font-size: 11px;
-      color: t.color("on-surface-variant");
+      inset-inline-end: 0;
+      top: 100%;
+      margin-top: 4px;
     }
 
     .#{$component}--circular & {
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      font-weight: 500;
     }
   }
 
-  // Disabled state
-  &--disabled {
+  // A linear indicator with a label leaves room for it underneath
+  &--linear:has(.#{$component}__label) {
+    margin-bottom: 20px;
+  }
+
+  // ---------------------------------------------------------------------------
+  // States
+  // ---------------------------------------------------------------------------
+  &--disabled,
+  &[aria-disabled="true"] {
     opacity: 0.38;
     pointer-events: none;
+  }
 
-    // Disable animations when disabled
-    .#{$component}-canvas {
-      animation: none !important;
-    }
+  &--transition {
+    transition: opacity v.motion("duration-short4") v.motion("easing-standard");
+  }
+
+  @include m.print {
+    display: none;
   }
 }