@expressivecss/expressive 0.14.1 → 0.16.0

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
+//   --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");
 
+// 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,11 +57,7 @@
 // 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 {
@@ -46,16 +66,42 @@
   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;
@@ -76,6 +122,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 {
@@ -112,14 +179,14 @@
 }
 
 .heatmap-chart-tooltip {
+  translate: 8px 0;
+
   // A gap's swatch, outlined like its cell.
   > span.gap::before {
     background: none;
     box-shadow: inset 0 0 0 1px var(--md-comp-heatmap-chart-grid-color);
   }
 
-  translate: 8px 0;
-
   &.end {
     translate: calc(-100% - 8px) 0;
   }
@@ -134,12 +201,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

@@ -1,4 +1,3 @@
-@use "sass:map";
 @use "../abstracts" as *;
 
 // Icon buttons.
@@ -44,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;
@@ -66,7 +65,11 @@
   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;
@@ -83,11 +86,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,8 +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";

package/src/sass/components/_keypad.scss

@@ -0,0 +1,182 @@
+@use "../abstracts" as *;
+
+// Keypad and keyboard: on-screen keys that type into a text field.
+//
+// Anatomy is the HTML. Every key is a <button type="button">. A key with a
+// `value` types that value; a key with `data-key` is a function key
+// (Backspace, Enter, Shift, CapsLock, Layer). A Layer key shows the
+// elements whose `data-layer` matches its `value`, such as a row of
+// symbols. `.keypad` is a three-column grid of round keys, the dial pad
+// and PIN pad. `.keyboard` is a column of rows (any <div>), each
+// row a flex line of keys. A key carrying a button style class (.filled,
+// .tonal, .outlined, .elevated, .text) keeps that style, so a call or submit
+// key is written the same way as any other button.
+//
+// Keys press the same way button-group items do: the corner squares off on a
+// spring and springs back on release.
+//
+// Keyboard width comes from a column count rather than per-key classes. A
+// character key is one column wide and may shrink; a function key is one and
+// a half; the space bar takes what is left. Ten columns gives QWERTY's
+// half-key indent on the nine-key row with no extra markup.
+
+$_key: "button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled)";
+
+:is(.keypad, .keyboard) {
+  --md-comp-keypad-key-color: var(--md-sys-color-surface-container-highest);
+  --md-comp-keypad-key-label-color: var(--md-sys-color-on-surface);
+  --md-comp-keypad-function-key-color: var(--md-sys-color-secondary-container);
+  --md-comp-keypad-function-key-label-color: var(--md-sys-color-on-secondary-container);
+  --md-comp-keypad-key-pressed-shape: var(--md-sys-shape-corner-medium);
+  // Material's fast-spatial spring, the curve button groups press with.
+  --md-comp-keypad-motion: var(--md-sys-motion-spring-fast-spatial);
+  --md-comp-keypad-motion-duration: var(--md-sys-motion-spring-fast-spatial-duration);
+
+  touch-action: manipulation;
+
+  button {
+    --_color: var(--md-comp-keypad-key-color);
+    --_label: var(--md-comp-keypad-key-label-color);
+    min-width: 0;
+    padding: 0;
+    transition:
+      border-radius var(--md-comp-keypad-motion-duration) var(--md-comp-keypad-motion),
+      background-color var(--md-sys-motion-duration-short4) ease-out;
+
+    &[data-key] {
+      --_color: var(--md-comp-keypad-function-key-color);
+      --_label: var(--md-comp-keypad-function-key-label-color);
+    }
+
+    // The state layer's opacity. Only the rule below reads it, so a key
+    // that keeps a button style ignores it.
+    // .pressed is a hardware key held down in the field.
+    @each $state, $selector in ("hover": "&:hover", "focus": "&:focus", "pressed": "&:is(:active, .pressed)") {
+      #{$selector} {
+        --_state: #{state-opacity($state)};
+      }
+    }
+
+    &:is(:active, .pressed):not(:disabled) {
+      border-radius: var(--md-comp-keypad-key-pressed-shape);
+    }
+
+    // The shape stops moving; the color still fades, which is not motion.
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: background-color;
+    }
+  }
+
+  #{$_key} {
+    color: var(--_label);
+    background-color: color-mix(in oklab, var(--_label) var(--_state, 0%), var(--_color));
+  }
+
+  // A latched Shift or Caps Lock reads as selected: primary, like a selected toggle.
+  :is([data-key="Shift"], [data-key="CapsLock"])[aria-pressed="true"] {
+    --_color: var(--md-sys-color-primary);
+    --_label: var(--md-sys-color-on-primary);
+  }
+}
+
+// Dial pad and PIN pad: three columns of round keys. A digit key may carry
+// its letters in a <small> under the digit. An empty cell is an empty <span>.
+// Keys fill their cell, so `.wide` spans two and becomes a pill: a call key
+// beside Backspace leaves no hole in the last row.
+.keypad {
+  --md-comp-keypad-key-size: #{rem(72px)};
+  --md-comp-keypad-gap: 12px;
+
+  display: inline-grid;
+  grid-template-columns: repeat(3, var(--md-comp-keypad-key-size));
+  gap: var(--md-comp-keypad-gap);
+
+  button {
+    flex-direction: column;
+    gap: 0;
+    width: 100%;
+    height: var(--md-comp-keypad-key-size);
+    border-radius: calc(var(--md-comp-keypad-key-size) / 2);
+    @include typescale("headline-medium");
+
+    &.wide {
+      grid-column: span 2;
+    }
+
+    > small {
+      @include typescale("label-small");
+      color: inherit;
+      opacity: 0.78;
+    }
+  }
+}
+
+// On-screen keyboard. The container is a docked surface; each row is a line
+// of keys sized from the column count. An optional `.numbers` row of digits
+// sits above the letters with shorter keys, as on a phone; `hidden` drops it.
+// Rows skip `display: flex` while hidden, which would otherwise outrank the
+// browser's `[hidden]` rule.
+.keyboard {
+  --md-comp-keyboard-columns: 10;
+  --md-comp-keyboard-gap: 6px;
+  --md-comp-keyboard-key-height: #{rem(48px)};
+  --md-comp-keyboard-number-key-height: #{rem(40px)};
+  --md-comp-keyboard-key-shape: var(--md-sys-shape-corner-medium);
+  --md-comp-keypad-key-pressed-shape: 6px;
+  --md-comp-keyboard-container-color: var(--md-sys-color-surface-container);
+  --md-comp-keyboard-container-shape: var(--md-sys-shape-corner-large);
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  border-radius: var(--md-comp-keyboard-container-shape);
+  background-color: var(--md-comp-keyboard-container-color);
+
+  > :not([hidden]) {
+    --_unit: calc((100% - (var(--md-comp-keyboard-columns) - 1) * var(--md-comp-keyboard-gap)) / var(--md-comp-keyboard-columns));
+    display: flex;
+    justify-content: center;
+    gap: var(--md-comp-keyboard-gap);
+  }
+
+  button {
+    flex: 0 1 var(--_unit);
+    height: var(--md-comp-keyboard-key-height);
+    border-radius: var(--md-comp-keyboard-key-shape);
+    @include typescale("title-medium");
+
+    &[data-key] {
+      flex-basis: calc(1.5 * var(--_unit) + 0.5 * var(--md-comp-keyboard-gap));
+    }
+
+    &[value=" "] {
+      flex-grow: 1;
+    }
+  }
+
+  > .numbers button {
+    height: var(--md-comp-keyboard-number-key-height);
+  }
+
+  // Shift or Caps Lock shows capitals on the character keys while latched.
+  &:has(:is([data-key="Shift"], [data-key="CapsLock"])[aria-pressed="true"]) button[value] {
+    text-transform: uppercase;
+  }
+}
+
+// Forced colors paint the keys and the keyboard's container as Canvas.
+@media (forced-colors: active) {
+  :is(.keypad, .keyboard) button,
+  .keyboard {
+    outline: 1px solid ButtonText;
+    outline-offset: -1px;
+  }
+
+  // The fill that marks the main key, such as Call, is dropped too, so a
+  // thicker edge sets it apart, as a default button's is in high contrast.
+  :is(.keypad, .keyboard) button.filled {
+    outline-width: 3px;
+    outline-offset: -3px;
+  }
+}

package/src/sass/components/_kpi.scss

@@ -78,12 +78,12 @@ $_trend-charts: "line-chart", "column-chart", "bar-chart", "mixed-chart";
     display: grid;
     flex: none;
     place-items: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 12px;
+    width: rem(40px);
+    height: rem(40px);
+    border-radius: var(--md-sys-shape-corner-medium);
     background-color: var(--md-comp-kpi-icon-container-color);
     color: var(--md-comp-kpi-icon-color);
-    font-size: 24px;
+    font-size: rem(24px);
   }
 
   .kpi-value {
@@ -99,7 +99,7 @@ $_trend-charts: "line-chart", "column-chart", "bar-chart", "mixed-chart";
     align-items: center;
     gap: 2px;
     padding: 2px 8px;
-    border-radius: 8px;
+    border-radius: var(--md-sys-shape-corner-small);
     background-color: var(--md-comp-kpi-trend-container-color);
     color: var(--md-comp-kpi-trend-color);
     font-variant-numeric: tabular-nums;
@@ -110,12 +110,7 @@ $_trend-charts: "line-chart", "column-chart", "bar-chart", "mixed-chart";
     }
 
     &:is(.up, .down)::before {
-      content: "";
-      flex: none;
-      width: 18px;
-      height: 18px;
-      background-color: currentColor;
-      mask: $trend-arrow center / 18px no-repeat;
+      @include trend-arrow;
     }
 
     &.down::before {