@expressivecss/expressive 0.15.0 → 0.17.0

package/src/sass/components/_fab-menu.scss

@@ -37,9 +37,15 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
   );
   --md-comp-fab-menu-offset: 16px;
   --md-comp-fab-menu-z: 997;
-  --md-comp-fab-menu-duration: 200ms;
+  // Items move on the fast spatial spring and fade on the fast effects
+  // spring, so motion="expressive" gives them a small bounce while the fade
+  // never overshoots. The spatial duration is the longer of the two, so it
+  // also times the list's visibility on close.
+  --md-comp-fab-menu-duration: var(--md-sys-motion-spring-fast-spatial-duration);
   --md-comp-fab-menu-stagger: 40ms;
-  --md-comp-fab-menu-easing: cubic-bezier(0.65, 0, 0.35, 1);
+  --md-comp-fab-menu-easing: var(--md-sys-motion-spring-fast-spatial);
+  --md-comp-fab-menu-effects-duration: var(--md-sys-motion-spring-fast-effects-duration);
+  --md-comp-fab-menu-effects-easing: var(--md-sys-motion-spring-fast-effects);
 
   position: fixed;
   inset-inline-end: var(--md-comp-fab-menu-offset);
@@ -72,9 +78,7 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
     flex-direction: column;
     align-items: flex-end;
     gap: var(--md-comp-fab-menu-menu-item-between-space);
-    margin: 0;
-    padding: 0;
-    list-style: none;
+    @include list-reset;
     width: max-content;
     max-inline-size: calc(100vw - 2 * var(--md-comp-fab-menu-offset));
     visibility: hidden;
@@ -103,7 +107,7 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
       padding-inline: var(--md-comp-fab-menu-menu-item-leading-space)
         var(--md-comp-fab-menu-menu-item-trailing-space);
       border: none;
-      border-radius: 9999px;
+      border-radius: var(--md-sys-shape-corner-full);
       color: var(--md-comp-fab-menu-menu-item-label-text-color);
       background-color: var(--md-comp-fab-menu-menu-item-container-color);
       white-space: normal;
@@ -113,41 +117,45 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
       cursor: pointer;
       appearance: none;
       opacity: 0;
-      transform: scale(.8) translateY(1rem);
+      transform: scale(0.8) translateY(1rem);
       transition:
-        opacity var(--md-comp-fab-menu-duration) var(--md-comp-fab-menu-easing),
+        opacity var(--md-comp-fab-menu-effects-duration) var(--md-comp-fab-menu-effects-easing),
         transform var(--md-comp-fab-menu-duration) var(--md-comp-fab-menu-easing),
-        background-color .2s ease-out,
-        box-shadow .2s ease-out;
+        background-color var(--md-sys-motion-duration-short4) ease-out,
+        box-shadow var(--md-sys-motion-duration-short4) ease-out;
       @include typescale("title-medium");
       @include focus-visible;
 
       > #{$icon} {
-        font-size: var(--md-comp-fab-menu-menu-item-icon-size);
-        width: var(--md-comp-fab-menu-menu-item-icon-size);
-        height: var(--md-comp-fab-menu-menu-item-icon-size);
-        line-height: var(--md-comp-fab-menu-menu-item-icon-size);
+        @include icon-size(var(--md-comp-fab-menu-menu-item-icon-size));
         color: inherit;
       }
 
-      // Enabled is elevation 0; only the states lift.
-      &:hover {
+      // The shared disabled rule in _buttons.scss is (0,1,0) and loses to this
+      // block, so a disabled item paints itself. aria-disabled is included:
+      // with the menu's own state arms skipped, the generic button focus tint
+      // would otherwise show through on a focused aria-disabled item.
+      &#{$expressive-disabled} {
+        @include btn-disabled;
+      }
+
+      // aria-disabled keeps pointer events, so a tooltip or title explaining
+      // why the item is unavailable still shows on hover. Activation is
+      // already ignored by the FAB script.
+      &[aria-disabled="true"] {
+        pointer-events: auto;
+      }
+
+      // Enabled is elevation 0; only the states lift, and only when enabled.
+      &:hover:not(:where(#{$expressive-disabled})) {
         @include z-depth("4");
-        background-color: color-mix(
-          in oklab,
-          var(--md-comp-fab-menu-menu-item-label-text-color) state-opacity("hover"),
-          var(--md-comp-fab-menu-menu-item-container-color)
-        );
+        background-color: state-layer(var(--md-comp-fab-menu-menu-item-label-text-color), "hover", var(--md-comp-fab-menu-menu-item-container-color));
       }
 
-      &:active,
-      &:focus {
+      &:active:not(:where(#{$expressive-disabled})),
+      &:focus:not(:where(#{$expressive-disabled})) {
         @include z-depth("3");
-        background-color: color-mix(
-          in oklab,
-          var(--md-comp-fab-menu-menu-item-label-text-color) state-opacity("focus"),
-          var(--md-comp-fab-menu-menu-item-container-color)
-        );
+        background-color: state-layer(var(--md-comp-fab-menu-menu-item-label-text-color), "focus", var(--md-comp-fab-menu-menu-item-container-color));
       }
     }
   }
@@ -174,7 +182,7 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
     --md-comp-fab-container-width: var(
       --md-comp-fab-menu-close-button-container-width
     );
-    --md-comp-fab-container-shape: 9999px;
+    --md-comp-fab-container-shape: var(--md-sys-shape-corner-full);
     --md-comp-fab-icon-size: var(--md-comp-fab-menu-close-button-icon-size);
 
     color: var(--md-comp-fab-menu-close-button-icon-color);
@@ -189,20 +197,12 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
     }
 
     &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-fab-menu-close-button-icon-color) state-opacity("hover"),
-        var(--md-comp-fab-menu-close-button-container-color)
-      );
+      background-color: state-layer(var(--md-comp-fab-menu-close-button-icon-color), "hover", var(--md-comp-fab-menu-close-button-container-color));
     }
 
     &:active,
     &:focus {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-fab-menu-close-button-icon-color) state-opacity("focus"),
-        var(--md-comp-fab-menu-close-button-container-color)
-      );
+      background-color: state-layer(var(--md-comp-fab-menu-close-button-icon-color), "focus", var(--md-comp-fab-menu-close-button-container-color));
     }
   }
 
@@ -229,6 +229,10 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
 @media (prefers-reduced-motion: reduce) {
   .fab-menu {
     --md-comp-fab-menu-duration: 0s;
+    --md-comp-fab-menu-effects-duration: 0s;
     --md-comp-fab-menu-stagger: 0s;
   }
 }
+
+// A floating menu would print over the content.
+.fab-menu { @include print-hidden; }

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

@@ -0,0 +1,63 @@
+@use "../abstracts" as *;
+
+// Funnel chart. A <figure class="funnel-chart"> holds a <figcaption> and a
+// <table> of data: the first column labels each row, and the second holds
+// each stage's value. Without JavaScript the table shows. FunnelChart draws
+// each row as a stage, top to bottom in table order, as wide as its value
+// against the largest one and centered, with the row's label at the inline
+// start. It hides the table visually, so a screen reader still reads the
+// data as a table. The plot and tooltip come from chart(). The plot is as
+// tall as its rows, so --md-comp-funnel-chart-height does not apply; set
+// the row height instead.
+//
+// Each stage's span carries --width, its width as a percentage of the plot.
+//
+// Tokens:
+//   --md-comp-funnel-chart-row-height    40px
+//   --md-comp-funnel-chart-stage-height  60% of each row's height
+//   --md-comp-funnel-chart-shape         4px, the stage's corner radius
+//   --md-comp-funnel-chart-color-1       primary, every stage's color
+
+@include chart("funnel-chart", $grid: false, $rows: true, $cursor: band);
+
+.funnel-chart {
+  --md-comp-funnel-chart-stage-height: 60%;
+}
+
+.funnel-chart-stages {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-auto-rows: minmax(0, 1fr);
+
+  > div {
+    display: flex;
+    align-items: center;
+  }
+
+  > div > span {
+    width: calc(var(--width, 0) * 1%);
+    height: var(--md-comp-funnel-chart-stage-height);
+    margin-inline: auto;
+    border-radius: var(--md-comp-funnel-chart-shape);
+    background-color: var(--funnel-chart-color);
+  }
+
+  // Each stage grows from nothing, or after update() from its old width,
+  // which FunnelChart writes as --from-width.
+  @media (prefers-reduced-motion: no-preference) {
+    > div > span {
+      transition: width var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
+
+      @starting-style {
+        width: calc(var(--from-width, 0) * 1%);
+      }
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  .funnel-chart-stages > div > span {
+    forced-color-adjust: none;
+  }
+}

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

@@ -7,25 +7,49 @@
 // its rows, so --md-comp-heatmap-chart-height does not apply.
 //
 // Each cell carries --level, 0 for the lowest value and 1 for the highest,
-// and mixes the color into the empty color by that much. A .gap cell has no
-// value and draws no fill. Value text is black or white, whichever
-// contrasts more with the cell's mix, in any theme.
+// and mixes the color into the empty color by that much. On a diverging
+// scale (data-mid) a level below 0 mixes in the low color instead. A .gap
+// cell has no value and draws no fill. Value text is black or white,
+// whichever contrasts more with the cell's mix, in any theme.
+//
+// Cells keep --md-comp-heatmap-chart-cell-min-width, and a grid too wide
+// for its figure scrolls its cells sideways beside the row labels.
 //
 // Modifiers: .values writes each cell's text on it.
 //
 // Tokens:
-//   --md-comp-heatmap-chart-row-height   32px
-//   --md-comp-heatmap-chart-gap          3px between cells
-//   --md-comp-heatmap-chart-shape        4px, the cell's corner radius
-//   --md-comp-heatmap-chart-color        primary, the highest value
-//   --md-comp-heatmap-chart-empty-color  surface-container-highest, the lowest
-
-@include chart("heatmap-chart");
+//   --md-comp-heatmap-chart-row-height      32px
+//   --md-comp-heatmap-chart-cell-min-width  12px, below which the grid scrolls
+//   --md-comp-heatmap-chart-gap             3px between cells
+//   --md-comp-heatmap-chart-shape           4px, the cell's corner radius
+//   --md-comp-heatmap-chart-color           primary, the highest value
+//   --md-comp-heatmap-chart-low-color       tertiary, the lowest value on a
+//                                           diverging scale
+//   --md-comp-heatmap-chart-empty-color     surface-container-highest, the
+//                                           lowest, or the midpoint
+
+@include chart("heatmap-chart", $grid: false);
+
+// A level's color: the color above 0, the low color below it, both mixed
+// into the empty color, so one formula serves both kinds of scale.
+@function shade($level) {
+  @return color-mix(
+    in oklab,
+    var(--md-comp-heatmap-chart-color) calc(max(#{$level}, 0) * 100%),
+    color-mix(
+      in oklab,
+      var(--md-comp-heatmap-chart-low-color) calc(max(-1 * #{$level}, 0) * 100%),
+      var(--md-comp-heatmap-chart-empty-color)
+    )
+  );
+}
 
 .heatmap-chart {
-  --md-comp-heatmap-chart-row-height: 32px;
+  --md-comp-heatmap-chart-row-height: #{rem(32px)};
+  --md-comp-heatmap-chart-cell-min-width: 12px;
+  --md-comp-heatmap-chart-low-color: var(--md-sys-color-tertiary);
   --md-comp-heatmap-chart-gap: 3px;
-  --md-comp-heatmap-chart-shape: 4px;
+  --md-comp-heatmap-chart-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-heatmap-chart-color: var(--md-sys-color-primary);
   --md-comp-heatmap-chart-empty-color: var(--md-sys-color-surface-container-highest);
 }
@@ -33,34 +57,52 @@
 // The cells and the tooltip swatch share the mix.
 .heatmap-chart-cell,
 .heatmap-chart-tooltip > span {
-  --heatmap-chart-color: color-mix(
-    in oklab,
-    var(--md-comp-heatmap-chart-color) calc(var(--level, 0) * 100%),
-    var(--md-comp-heatmap-chart-empty-color)
-  );
+  --heatmap-chart-color: #{shade(var(--level, 0))};
 }
 
 .heatmap-chart-plot {
   height: auto;
-  border: 0;
-  background: none;
 }
 
+// The row labels, then the cells beside them. Row labels take up to 40% of
+// the width and end in an ellipsis past it; the cells take the rest and
+// scroll sideways when their minimum width would not fit, while the row
+// labels stay in view. Both sides use the same fixed row height, so the
+// rows line up.
 .heatmap-chart-grid {
   display: grid;
-  // Row labels take up to 40% of the width and end in an ellipsis past it.
-  grid-template-columns: fit-content(40%) repeat(var(--columns, 1), minmax(0, 1fr));
-  grid-template-rows: repeat(var(--rows, 1), var(--md-comp-heatmap-chart-row-height));
-  gap: var(--md-comp-heatmap-chart-gap);
+  grid-template-columns: fit-content(40%) minmax(0, 1fr);
+  column-gap: var(--md-comp-heatmap-chart-gap);
   color: var(--md-sys-color-on-surface-variant);
   @include typescale("body-small");
 }
 
+.heatmap-chart-rows,
+.heatmap-chart-cells {
+  display: grid;
+  grid-template-rows: repeat(var(--rows, 1), var(--md-comp-heatmap-chart-row-height)) auto;
+  gap: var(--md-comp-heatmap-chart-gap);
+}
+
+.heatmap-chart-rows {
+  min-width: 0;
+}
+
+.heatmap-chart-scroll {
+  overflow-x: auto;
+  // Room for the active cell's outline, which the scrolling would clip.
+  margin: -3px;
+  padding: 3px;
+}
+
+.heatmap-chart-cells {
+  grid-template-columns: repeat(var(--columns, 1), minmax(var(--md-comp-heatmap-chart-cell-min-width), 1fr));
+  width: max(100%, var(--columns, 1) * (var(--md-comp-heatmap-chart-cell-min-width) + var(--md-comp-heatmap-chart-gap)) - var(--md-comp-heatmap-chart-gap));
+}
+
 .heatmap-chart-row,
 .heatmap-chart-column {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  @include ellipsis;
 }
 
 .heatmap-chart-row {
@@ -76,6 +118,27 @@
   &.run {
     text-align: start;
   }
+
+  // When each label is wider than its column, HeatmapChart keeps every nth
+  // one, as LineChart does. A kept label spreads over the hidden ones beside
+  // it, centred on its column; the end labels line up with the grid's edges.
+  .heatmap-chart-cells[data-thinned] > &:not([data-skip]) {
+    display: flex;
+    justify-content: center;
+    overflow: visible;
+
+    &:nth-child(1 of .heatmap-chart-column) {
+      justify-content: start;
+    }
+
+    &:nth-last-child(1 of .heatmap-chart-column) {
+      justify-content: end;
+    }
+  }
+
+  &[data-skip] {
+    visibility: hidden;
+  }
 }
 
 .heatmap-chart-cell {
@@ -134,12 +197,34 @@
 .heatmap-chart-scale {
   width: 96px;
   height: 8px;
-  border-radius: 4px;
+  border-radius: var(--md-sys-shape-corner-extra-small);
   // From the lowest cell's shade to the highest's, set by HeatmapChart.
   background: linear-gradient(
     in oklab to var(--heatmap-chart-to, right),
-    color-mix(in oklab, var(--md-comp-heatmap-chart-color) calc(var(--low, 0) * 100%), var(--md-comp-heatmap-chart-empty-color)),
-    color-mix(in oklab, var(--md-comp-heatmap-chart-color) calc(var(--high, 1) * 100%), var(--md-comp-heatmap-chart-empty-color))
+    #{shade(var(--low, 0))},
+    #{shade(var(--high, 1))}
+  );
+
+  // A stepped scale is a swatch per band, which HeatmapChart writes.
+  &:has(> span) {
+    display: flex;
+    overflow: hidden;
+    background: none;
+  }
+
+  > span {
+    flex: 1;
+    background: #{shade(var(--level, 0))};
+  }
+}
+
+// A diverging scale whose data crosses the midpoint passes its empty color.
+.heatmap-chart-scale.diverging {
+  background: linear-gradient(
+    in oklab to var(--heatmap-chart-to, right),
+    #{shade(var(--low, 0))},
+    var(--md-comp-heatmap-chart-empty-color) var(--mid, 0%),
+    #{shade(var(--high, 1))}
   );
 }
 

package/src/sass/components/_icon-buttons.scss

@@ -43,7 +43,7 @@
 
   --md-comp-icon-button-color: var(--md-sys-color-on-surface-variant);
   --md-comp-icon-button-container-color: transparent;
-  --md-comp-icon-button-container-shape: 9999px;
+  --md-comp-icon-button-container-shape: var(--md-sys-shape-corner-full);
 
   box-sizing: border-box;
   display: inline-flex;
@@ -65,14 +65,15 @@
   appearance: none;
   vertical-align: middle;
   -webkit-tap-highlight-color: transparent;
-  transition: background-color .2s ease-out, border-radius .2s ease-out;
+  transition: background-color var(--md-sys-motion-duration-short4) ease-out, border-radius var(--md-sys-motion-duration-short4) ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 
   > #{$icon} {
     flex: 0 0 auto;
-    font-size: var(--md-comp-icon-button-icon-size);
-    width: var(--md-comp-icon-button-icon-size);
-    height: var(--md-comp-icon-button-icon-size);
-    line-height: var(--md-comp-icon-button-icon-size);
+    @include icon-size(var(--md-comp-icon-button-icon-size));
     color: inherit;
     overflow: hidden;
   }
@@ -82,11 +83,7 @@
   // icon button gets a translucent tint instead of an opaque one.
   @each $state, $selector in ("hover": "&:hover", "focus": "&:focus", "pressed": "&:active") {
     #{$selector} {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-icon-button-color) state-opacity($state),
-        var(--md-comp-icon-button-container-color)
-      );
+      background-color: state-layer(var(--md-comp-icon-button-color), $state, var(--md-comp-icon-button-container-color));
     }
   }
 

package/src/sass/components/_icons-material-design.scss

@@ -30,14 +30,14 @@
 [icon-style="sharp"],
 :host([icon-style="sharp"]) { --md-icon-font: var(--md-icon-font-sharp); }
 
-$_icon: ".material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons";
+$_icon: ".material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp";
 
 #{$_icon} {
   display: inline-block;
   font-family: var(--md-icon-font);
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;
+  font-size: rem(24px);
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;

package/src/sass/components/_image-compare.scss

@@ -0,0 +1,108 @@
+@use "../abstracts" as *;
+
+// Image compare. Two images of the same scene stacked, with a divider that
+// reveals the second over the first. A .image-compare holds two <img> and a
+// native <input type="range">: the range is the control, so keyboard,
+// pointer, touch and its "slider" semantics are the browser's. It covers the
+// images invisibly, and the container draws the divider and handle at
+// --md-comp-image-compare-position, which the ImageCompare behavior keeps in
+// step with the range's value.
+//
+// Tokens:
+//   --md-comp-image-compare-position       50% (from the inline start)
+//   --md-comp-image-compare-shape          16px
+//   --md-comp-image-compare-divider-color  surface
+//   --md-comp-image-compare-handle-size    40px
+
+.image-compare {
+  --md-comp-image-compare-position: 50%;
+  --md-comp-image-compare-shape: var(--md-sys-shape-corner-large);
+  --md-comp-image-compare-divider-color: var(--md-sys-color-surface);
+  --md-comp-image-compare-handle-size: 40px;
+
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  border-radius: var(--md-comp-image-compare-shape);
+  isolation: isolate;
+
+  > img {
+    grid-area: 1 / 1;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  > img + img {
+    clip-path: inset(0 0 0 var(--md-comp-image-compare-position));
+  }
+
+  &:dir(rtl) > img + img {
+    clip-path: inset(0 var(--md-comp-image-compare-position) 0 0);
+  }
+
+  > input[type="range"] {
+    grid-area: 1 / 1;
+    z-index: 2;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    cursor: ew-resize;
+    opacity: 0;
+  }
+
+  // The divider line, then the round handle on it.
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    inset-inline-start: var(--md-comp-image-compare-position);
+    pointer-events: none;
+    translate: -50% 0;
+  }
+
+  &:dir(rtl)::before,
+  &:dir(rtl)::after {
+    translate: 50% 0;
+  }
+
+  &::before {
+    inset-block: 0;
+    inline-size: 2px;
+    background-color: var(--md-comp-image-compare-divider-color);
+  }
+
+  &::after {
+    inset-block-start: calc(50% - var(--md-comp-image-compare-handle-size) / 2);
+    inline-size: var(--md-comp-image-compare-handle-size);
+    block-size: var(--md-comp-image-compare-handle-size);
+    border-radius: 50%;
+    background-color: var(--md-comp-image-compare-divider-color);
+    @include z-depth("2");
+  }
+
+  &:has(> input:focus-visible)::after {
+    @include focus-ring();
+  }
+
+  &:has(> input:disabled) {
+    > input {
+      cursor: default;
+    }
+
+    &::after {
+      opacity: 0.38;
+    }
+  }
+
+  @media (forced-colors: active) {
+    &::before,
+    &::after {
+      forced-color-adjust: none;
+      background-color: Canvas;
+      outline: 2px solid CanvasText;
+    }
+  }
+}

package/src/sass/components/_index.scss

@@ -31,6 +31,7 @@
 @forward "chips";
 @forward "lightbox";
 @forward "docked-display";
+@forward "modal-display";
 @forward "page-footer";
 @forward "forms";
 @forward "table_of_contents";
@@ -44,6 +45,11 @@
 @forward "panes";
 @forward "fab-menu";
 @forward "loading-indicator";
+@forward "pull-to-refresh";
+@forward "loading-overlay";
+@forward "swipe-actions";
+@forward "show-more";
+@forward "transfer-list";
 @forward "search";
 @forward "drag-handle";
 @forward "scrim";
@@ -53,9 +59,16 @@
 @forward "map";
 @forward "accordion";
 @forward "data-table";
+@forward "description-list";
+@forward "calendar";
+@forward "mega-menu";
+@forward "image-compare";
+@forward "tour";
+@forward "menubar";
 @forward "avatar";
 @forward "skeleton";
 @forward "empty-state";
+@forward "alert";
 @forward "countdown";
 @forward "popover";
 @forward "stepper";
@@ -72,9 +85,16 @@
 @forward "radar-chart";
 @forward "radial-chart";
 @forward "mixed-chart";
+@forward "scatter-chart";
+@forward "funnel-chart";
+@forward "sankey-chart";
+@forward "treemap-chart";
 @forward "aura";
 @forward "kpi";
 @forward "marquee";
 @forward "confetti";
 @forward "particles";
 @forward "keypad";
+@forward "org-chart";
+@forward "back-to-top";
+@forward "cascader";