@expressivecss/expressive 0.15.0 → 0.17.0

package/src/sass/components/_badges.scss

@@ -16,10 +16,10 @@
 .badge {
   --md-comp-badge-color: var(--md-sys-color-error);
   --md-comp-badge-label-text-color: var(--md-sys-color-on-error);
-  --md-comp-badge-large-size: 16px;
+  --md-comp-badge-large-size: #{rem(16px)};
   --md-comp-badge-small-size: 6px;
-  --md-comp-badge-large-shape: 8px;
-  --md-comp-badge-icon-size: 24px;
+  --md-comp-badge-large-shape: var(--md-sys-shape-corner-small);
+  --md-comp-badge-icon-size: #{rem(24px)};
 
   box-sizing: border-box;
   display: inline-flex;
@@ -28,7 +28,7 @@
   justify-content: center;
   min-width: var(--md-comp-badge-large-size);
   height: var(--md-comp-badge-large-size);
-  max-width: calc(4ch + 8px);
+  max-width: calc(4ch + #{rem(8px)});
   margin: 0;
   padding: 0 4px;
   overflow: hidden;
@@ -50,11 +50,12 @@
     font-size: 0;
     line-height: 0;
     color: transparent;
+    @include forced-colors-fill;
   }
 }
 
 // Child of an icon: sit on the upper trailing corner of the 24dp
-// glyph, even when the <i> is a larger indicator pill.
+// glyph, even when the icon is a larger indicator pill.
 #{$icon} {
   position: relative;
   overflow: visible;

package/src/sass/components/_bar-chart.scss

@@ -13,7 +13,8 @@
 // Modifiers: .stacked draws one bar per row with each series after the
 // ones before it, .split separates stacked segments and rounds each one,
 // .track draws a full-width track behind each row's bars, .values writes
-// each cell's text from its bar's base, .sparkline is a small chart with
+// each cell's text from its bar's base, .axis labels the value axis under
+// the plot at round values, .sparkline is a small chart with
 // no labels, grid, legend or tooltip.
 //
 // Tokens:
@@ -27,41 +28,15 @@
 //   --md-comp-bar-chart-on-color-1..4  on-primary, on-tertiary,
 //                                      on-secondary, surface; .values text
 
-@include chart("bar-chart");
+@include chart("bar-chart", $on-colors: true, $rows: true, $cursor: band);
+@include chart-axis("bar-chart", $beside: false);
 
 .bar-chart {
-  --md-comp-bar-chart-row-height: 40px;
   --md-comp-bar-chart-bar-height: 60%;
-  --md-comp-bar-chart-shape: 4px;
   --md-comp-bar-chart-track-color: var(--md-sys-color-surface-container-highest);
-  --md-comp-bar-chart-on-color-1: var(--md-sys-color-on-primary);
-  --md-comp-bar-chart-on-color-2: var(--md-sys-color-on-tertiary);
-  --md-comp-bar-chart-on-color-3: var(--md-sys-color-on-secondary);
-  --md-comp-bar-chart-on-color-4: var(--md-sys-color-surface);
-
-  // Labels beside the plot, up to 40% of the width; everything else spans
-  // both columns. Dense flow puts the labels in the plot's row.
-  // A stretched figure, as in a grid of cards, keeps its rows at their size.
-  display: grid;
-  grid-template-columns: fit-content(40%) minmax(0, 1fr);
-  grid-auto-flow: row dense;
-  align-content: start;
-  column-gap: 12px;
-
-  > * {
-    grid-column: 1 / -1;
-  }
-
-  > .bar-chart-plot {
-    grid-column: 2;
-  }
-
-  > .bar-chart-labels {
-    grid-column: 1;
-  }
 
   &.sparkline {
-    --md-comp-bar-chart-row-height: 24px;
+    --md-comp-bar-chart-row-height: #{rem(24px)};
 
     display: flex;
   }
@@ -72,26 +47,25 @@
   }
 }
 
-@for $i from 1 through 4 {
-  .bar-chart [data-series="#{$i}"] {
-    --bar-chart-on-color: var(--md-comp-bar-chart-on-color-#{$i});
-  }
+// .axis labels the value axis under the plot, with a grid line up from
+// each label. The row labels keep the plot's height.
+.bar-chart.axis > :is(.bar-chart-plot, .bar-chart-labels) {
+  margin-block-end: 24px;
 }
 
-// Grid lines run down the plot at each quarter of the value axis.
-.bar-chart-plot {
-  isolation: isolate;
-  height: calc(var(--rows, 1) * var(--md-comp-bar-chart-row-height));
-  border-block-end: 0;
-  border-right: 1px solid var(--md-comp-bar-chart-grid-color);
-  background: linear-gradient(to right, var(--md-comp-bar-chart-grid-color) 1px, transparent 0) 0 0 / 25% 100%;
+.bar-chart-axis > li {
+  inset: 0 auto;
+  inset-inline-start: calc(100% - var(--at, 0%));
+  border-block-start: 0;
+  border-inline-start: 1px solid var(--md-comp-bar-chart-grid-color);
 }
 
-.bar-chart-labels {
-  grid-auto-rows: minmax(0, 1fr);
-  grid-auto-flow: row;
-  align-items: center;
-  text-align: end;
+.bar-chart-axis > li > span {
+  inset: 100% auto auto 0;
+  width: auto;
+  padding: 4px 0 0;
+  overflow: visible;
+  translate: -50% 0;
 }
 
 // .values adds a copy of the bars for their text; both share the geometry.
@@ -135,8 +109,6 @@
   > div > span {
     --bar-chart-tip: var(--md-comp-bar-chart-shape);
     --bar-chart-base: 0px;
-    --bar-chart-zero-left: calc(100% - var(--zero, 100%));
-    --bar-chart-zero-right: var(--zero, 100%);
     --bar-chart-ends: var(--bar-chart-base) var(--bar-chart-tip) var(--bar-chart-tip) var(--bar-chart-base);
 
     background-color: var(--bar-chart-color);
@@ -146,11 +118,14 @@
     &.negative {
       --bar-chart-ends: var(--bar-chart-tip) var(--bar-chart-base) var(--bar-chart-base) var(--bar-chart-tip);
     }
+
+    // A range floats, so both its ends are tips.
+    &.floating {
+      --bar-chart-base: var(--bar-chart-tip);
+    }
   }
 
   &.rtl > div > span {
-    --bar-chart-zero-left: var(--zero, 100%);
-    --bar-chart-zero-right: calc(100% - var(--zero, 100%));
     --bar-chart-ends: var(--bar-chart-tip) var(--bar-chart-base) var(--bar-chart-base) var(--bar-chart-tip);
 
     &.negative {
@@ -158,15 +133,7 @@
     }
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    > div > span {
-      transition: clip-path 400ms cubic-bezier(0.2, 0, 0, 1);
-
-      @starting-style {
-        clip-path: inset(0 var(--bar-chart-zero-right) 0 var(--bar-chart-zero-left) round var(--bar-chart-ends));
-      }
-    }
-  }
+  @include chart-column-motion;
 }
 
 // One bar per row, rounded only at the ends of the whole stack unless split.
@@ -205,7 +172,7 @@
   > div > span {
     --bar-chart-text-color: var(--md-sys-color-on-surface);
 
-    overflow: hidden;
+    @include ellipsis;
     align-content: center;
     padding: 0 8px 0 calc(var(--bar-chart-left) + 8px);
     background: linear-gradient(to right, var(--bar-chart-text-color) var(--bar-chart-left), var(--bar-chart-on-color) 0 calc(100% - var(--bar-chart-right)), var(--bar-chart-text-color) 0);
@@ -215,8 +182,6 @@
     @include typescale("label-medium");
     font-variant-numeric: tabular-nums;
     text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   // The base on the right: a bar below zero, or above it in RTL.
@@ -228,7 +193,7 @@
 
   @media (prefers-reduced-motion: no-preference) {
     > div > span {
-      transition: opacity 200ms linear 400ms;
+      transition: opacity var(--md-sys-motion-duration-short4) linear var(--md-sys-motion-duration-medium4);
 
       @starting-style {
         opacity: 0;
@@ -243,33 +208,7 @@
   clip-path: inset(0 var(--bar-chart-right) 0 var(--bar-chart-left));
 }
 
-// A band behind the highlighted row's bars.
-.bar-chart-cursor {
-  z-index: -1;
-  inset-block: auto;
-  inset-inline: 0;
-  height: calc(100% / var(--rows, 1));
-  border-radius: var(--md-comp-bar-chart-shape);
-  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
-  translate: 0 -50%;
-}
-
-// Below the highlighted row, or above it in the lower half.
-.bar-chart-tooltip {
-  left: 50%;
-  translate: -50% calc(var(--md-comp-bar-chart-row-height) / 2);
-
-  &.end {
-    translate: -50% calc(-100% - var(--md-comp-bar-chart-row-height) / 2);
-  }
-}
-
 @media (forced-colors: active) {
-  // The mixin clears the grid, but this partial's plot rule comes later.
-  .bar-chart-plot {
-    background: none;
-  }
-
   .bar-chart-bars > div > span,
   .bar-chart-values > div > span {
     forced-color-adjust: none;
@@ -279,7 +218,9 @@
     --bar-chart-text-color: CanvasText;
   }
 
-  .bar-chart-cursor {
+  // The track is a fill, which forced colors paint as Canvas.
+  .bar-chart.track .bar-chart-bars > div {
     outline: 1px solid CanvasText;
+    outline-offset: -1px;
   }
 }

package/src/sass/components/_bottom-sheet.scss

@@ -2,10 +2,10 @@
 
 // Bottom sheets.
 //
-// Anatomy is the HTML. A dialog.bottom-sheet (or .bottom) is the surface.
+// Anatomy is the HTML. A dialog.bottom-sheet is the surface.
 // showModal() is the modal variant (scrim). show() is the standard variant
 // (no scrim, page stays interactive). ::before is the optional drag handle;
-// an explicit .handle button replaces it. A heading, body, and trailing
+// an explicit .drag-handle replaces it. A heading, body, and trailing
 // form[method=dialog] are the same slots as a basic dialog.
 //
 // Tokens follow https://m3.material.io/components/bottom-sheets
@@ -14,16 +14,20 @@
 //   max height   viewport minus 72dp
 //   handle       32×4dp bar in a 48dp hit target, on-surface-variant
 //   scrim        modal only (UA ::backdrop + the dialog scrim token)
+//   motion       default spatial spring; follows motion="expressive"
+//
+// .expandable opens at --md-comp-bottom-sheet-partial-height (50% of the
+// viewport) and grows to the full height with .expanded, which a drag up or
+// the handle button sets. The height moves on the same spring.
 //
 // Compact and medium are the intended windows. On large screens prefer a
 // side sheet or a basic dialog; the sheet still lays out (640 + 56).
 
 $_handle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='4'%3E%3Crect width='32' height='4' rx='2' fill='black'/%3E%3C/svg%3E");
 
-dialog.bottom,
 dialog.bottom-sheet {
   --md-comp-bottom-sheet-container-color: var(--md-sys-color-surface-container-low);
-  --md-comp-bottom-sheet-container-shape: 28px;
+  --md-comp-bottom-sheet-container-shape: var(--md-sys-shape-corner-extra-large);
   --md-comp-bottom-sheet-container-max-width: 640px;
   --md-comp-bottom-sheet-margin-inline: 56px;
   --md-comp-bottom-sheet-top-inset: 72px;
@@ -33,17 +37,25 @@ dialog.bottom-sheet {
     transparent
   );
   --md-comp-bottom-sheet-shift: 0px;
+  // Entry and drag snap-back run on the default spatial spring, which follows
+  // the motion="expressive" switch.
+  --md-comp-bottom-sheet-motion: var(--md-sys-motion-spring-default-spatial);
+  --md-comp-bottom-sheet-motion-duration: var(--md-sys-motion-spring-default-spatial-duration);
+  // A spatial spring overshoots, about 1.5% of the sheet's height in the
+  // expressive scheme. The sheet runs on below the viewport by this much, so
+  // the overshoot lifts surface into view rather than a gap under it.
+  --_bleed: 24px;
 
   box-sizing: border-box;
   position: fixed;
-  inset: auto 0 0;
+  inset: auto 0 calc(-1 * var(--_bleed));
   width: 100%;
   min-width: 0;
   max-width: none;
   height: auto;
-  max-height: calc(100dvh - var(--md-comp-bottom-sheet-top-inset));
+  max-height: calc(100dvh - var(--md-comp-bottom-sheet-top-inset) + var(--_bleed));
   margin: 0;
-  padding: 0;
+  padding: 0 0 var(--_bleed);
   border: none;
   border-radius: var(--md-comp-bottom-sheet-container-shape)
     var(--md-comp-bottom-sheet-container-shape) 0 0;
@@ -52,13 +64,20 @@ dialog.bottom-sheet {
   outline: none;
   @include z-depth("1");
   translate: 0 var(--md-comp-bottom-sheet-shift);
-  transition: translate 280ms ease;
+  transition: translate var(--md-comp-bottom-sheet-motion-duration) var(--md-comp-bottom-sheet-motion);
   @include glass(var(--md-comp-bottom-sheet-container-color));
 
+  // Forced colors paint the fill as Canvas and drop the shadow, so the
+  // surface would blend into the page without an edge.
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
   // Non-modal `show()` is not in the top layer — sit above page content
-  // and below snackbars (z-index 10000).
+  // and below tooltips and snackbars (tokens/_stacking.scss).
   &:not(:modal) {
-    z-index: 1100;
+    z-index: var(--expressive-z-sheet);
   }
 
   @include bp-up("medium") {
@@ -76,7 +95,7 @@ dialog.bottom-sheet {
     backdrop-filter: none;
   }
 
-  // Drag handle. 32×4 bar, 48dp hit. Hidden when the author supplies .handle.
+  // Drag handle. 32×4 bar, 48dp hit. Hidden when the author supplies .drag-handle.
   &::before {
     content: "";
     box-sizing: border-box;
@@ -88,15 +107,16 @@ dialog.bottom-sheet {
     padding: 0;
     background-color: var(--md-comp-bottom-sheet-drag-handle-color);
     mask: $_handle center / 32px 4px no-repeat;
+    @include forced-colors-fill;
     pointer-events: none;
   }
 
-  &:has(> :is(.handle, .drag-handle))::before {
+  &:has(> .drag-handle)::before {
     content: none;
     display: none;
   }
 
-  > :is(.handle, .drag-handle) {
+  > .drag-handle {
     box-sizing: border-box;
     flex: 0 0 48px;
     align-self: center;
@@ -108,8 +128,13 @@ dialog.bottom-sheet {
     border-radius: 0;
     background-color: var(--md-comp-bottom-sheet-drag-handle-color);
     mask: $_handle center / 32px 4px no-repeat;
+    @include forced-colors-fill;
     cursor: grab;
     appearance: none;
+    // The drag is pointer events. With the default touch-action the browser
+    // takes a vertical touch drag as a pan and cancels the pointer, so the
+    // sheet never dismisses on a touch screen.
+    touch-action: none;
   }
 
   // The sheet paints its own bar with a mask on the element, so the vertical
@@ -125,21 +150,31 @@ dialog.bottom-sheet {
   }
 }
 
-dialog.bottom[open],
 dialog.bottom-sheet[open] {
   display: flex;
   flex-direction: column;
 }
 
+dialog.bottom-sheet.expandable {
+  --md-comp-bottom-sheet-partial-height: 50dvh;
+
+  height: calc(var(--md-comp-bottom-sheet-partial-height) + var(--_bleed));
+  transition:
+    translate var(--md-comp-bottom-sheet-motion-duration) var(--md-comp-bottom-sheet-motion),
+    height var(--md-comp-bottom-sheet-motion-duration) var(--md-comp-bottom-sheet-motion);
+
+  &.expanded {
+    height: calc(100dvh - var(--md-comp-bottom-sheet-top-inset) + var(--_bleed));
+  }
+}
+
 @starting-style {
-  dialog.bottom[open],
   dialog.bottom-sheet[open] {
     translate: 0 100%;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  dialog.bottom,
   dialog.bottom-sheet {
     transition: none;
   }

package/src/sass/components/_breadcrumb.scss

@@ -29,24 +29,25 @@ nav:has(> .breadcrumb),
   color: var(--md-comp-breadcrumb-label-color);
   @include typescale("body-small");
 
+  // A crumb that shrank in one row ran its text under the next separator;
+  // in nowrap the trail scrolls instead.
   &.nowrap {
     flex-wrap: nowrap;
     overflow-x: auto;
-    scrollbar-width: none;
 
-    &::-webkit-scrollbar {
-      display: none;
+    > ol > li {
+      flex-shrink: 0;
     }
+
+    scrollbar-width: none;
   }
 
   > ol {
     display: flex;
     flex-wrap: inherit;
     align-items: center;
-    list-style: none;
     min-width: 0;
-    margin: 0;
-    padding: 0;
+    @include list-reset;
 
     > li {
       display: inline-flex;
@@ -90,7 +91,7 @@ nav:has(> .breadcrumb),
     color: var(--md-comp-breadcrumb-current-color);
   }
 
-  i {
+  #{$icon} {
     font-size: 1.125em;
     margin-inline-end: 4px;
   }

package/src/sass/components/_button-groups.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass:map";
 @use "../abstracts" as *;
 
@@ -67,15 +68,17 @@ $_connected-corners: (
 
 .button-group {
   --md-comp-button-group-between-space: 12px;
-  --md-comp-button-group-item-shape-round: 9999px;
-  --md-comp-button-group-item-shape-square: 12px;
-  --md-comp-button-group-pressed-item-shape: 8px;
+  --md-comp-button-group-item-shape-round: var(--md-sys-shape-corner-full);
+  --md-comp-button-group-item-shape-square: var(--md-sys-shape-corner-medium);
+  --md-comp-button-group-pressed-item-shape: var(--md-sys-shape-corner-small);
   // M3 states this as a percentage of the item's own width. CSS cannot
   // multiply a length by one, so it is the same figure as a ratio.
-  --md-comp-button-group-pressed-item-width-multiplier: .15;
+  --md-comp-button-group-pressed-item-width-multiplier: 0.15;
   // Material's fast-spatial spring, so width and corner motion use the
-  // published dynamics.
-  --md-comp-button-group-motion: #{$motion-fast-spatial};
+  // published dynamics and follow motion="expressive". The easing and its
+  // duration are a pair.
+  --md-comp-button-group-motion: var(--md-sys-motion-spring-fast-spatial);
+  --md-comp-button-group-motion-duration: var(--md-sys-motion-spring-fast-spatial-duration);
 
   display: flex;
   align-items: center;
@@ -127,9 +130,9 @@ $_connected-corners: (
   > #{$_item} {
     position: relative;
     transition:
-      width 200ms var(--md-comp-button-group-motion),
-      border-radius 200ms var(--md-comp-button-group-motion),
-      background-color 200ms ease-out;
+      width var(--md-comp-button-group-motion-duration) var(--md-comp-button-group-motion),
+      border-radius var(--md-comp-button-group-motion-duration) var(--md-comp-button-group-motion),
+      background-color var(--md-sys-motion-duration-short4) ease-out;
   }
 
   // Every item owns a centered 48dp minimum hit target. For M/L/XL this is a
@@ -164,68 +167,32 @@ $_connected-corners: (
     --_corner: var(--md-comp-button-group-item-shape-round);
   }
 
-  // Toggle-button colors come from md.comp.button.<style>.{unselected,selected}.
-  // Shape and the filled icon below provide two non-color selection cues.
-  > #{$_label-item}#{$_filled-item}[aria-pressed=false],
-  > .icon-button.filled[aria-pressed=false] {
-    @include _toggle-colors(var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant));
-  }
-
-  > #{$_label-item}#{$_filled-item}[aria-pressed=true],
-  > .icon-button.filled[aria-pressed=true] {
-    @include _toggle-colors(var(--md-sys-color-primary), var(--md-sys-color-on-primary));
-  }
-
-  > #{$_label-item}.tonal[aria-pressed=false],
-  > .icon-button.tonal[aria-pressed=false] {
-    @include _toggle-colors(var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container));
-  }
-
-  > #{$_label-item}.tonal[aria-pressed=true],
-  > .icon-button.tonal[aria-pressed=true] {
-    @include _toggle-colors(var(--md-sys-color-secondary), var(--md-sys-color-on-secondary));
-  }
-
-  > #{$_label-item}.outlined[aria-pressed=false],
-  > .icon-button.outlined[aria-pressed=false] {
-    @include _toggle-colors(transparent, var(--md-sys-color-on-surface-variant));
-  }
-
-  > #{$_label-item}.outlined[aria-pressed=true],
-  > .icon-button.outlined[aria-pressed=true] {
-    @include _toggle-colors(var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface));
-  }
-
-  > #{$_label-item}.elevated[aria-pressed=false] {
-    @include _toggle-colors(var(--md-sys-color-surface-container-low), var(--md-sys-color-primary));
-  }
-
-  > #{$_label-item}.elevated[aria-pressed=true] {
-    @include _toggle-colors(var(--md-sys-color-primary), var(--md-sys-color-on-primary));
+  // Toggle-button colors, from `$button-toggle-colors`. Shape and the filled
+  // icon below provide two non-color selection cues. Icon buttons have no
+  // elevated style.
+  @each $style, $states in $button-toggle-colors {
+    @each $pressed, $colors in $states {
+      $label: ".#{$style}";
+      @if $style == "filled" { $label: $_filled-item; }
+      $icon-item: ", > .icon-button.#{$style}[aria-pressed=#{$pressed}]";
+      @if $style == "elevated" { $icon-item: ""; }
+
+      > #{$_label-item}#{$label}[aria-pressed=#{$pressed}]#{$icon-item} {
+        @include _toggle-colors(list.nth($colors, 1), list.nth($colors, 2));
+      }
+    }
   }
 
   > #{$_toggle-item}[aria-pressed]:hover {
-    background-color: color-mix(
-      in oklab,
-      var(--_toggle-state-color) state-opacity("hover"),
-      var(--_toggle-container-color)
-    );
+    background-color: state-layer(var(--_toggle-state-color), "hover", var(--_toggle-container-color));
   }
 
   > #{$_toggle-item}[aria-pressed]:focus {
-    background-color: color-mix(
-      in oklab,
-      var(--_toggle-state-color) state-opacity("focus"),
-      var(--_toggle-container-color)
-    );
+    background-color: state-layer(var(--_toggle-state-color), "focus", var(--_toggle-container-color));
   }
 
   > #{$_toggle-item}[aria-pressed]:is(:active, .button-group-pressed) {
-    background-color: color-mix(
-      in oklab,
-      var(--_toggle-state-color) state-opacity("pressed"),
-      var(--_toggle-container-color)
-    );
+    background-color: state-layer(var(--_toggle-state-color), "pressed", var(--_toggle-container-color));
   }
 
   > #{$_label-item}#{$_filled-item}[aria-pressed]:is(:disabled, [disabled], .disabled),
@@ -262,7 +229,7 @@ $_connected-corners: (
   // only thing that keeps a connected group at 2dp.
   &.connected {
     --md-comp-button-group-between-space: 2px;
-    --md-comp-button-group-container-shape: 9999px;
+    --md-comp-button-group-container-shape: var(--md-sys-shape-corner-full);
     --md-comp-button-group-inner-corner-corner-size: 8px;
     --md-comp-button-group-pressed-inner-corner-corner-size: 4px;