@expressivecss/expressive 0.15.0 → 0.17.0

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

@@ -12,7 +12,11 @@
 // the cursor spoke and the tooltip are HTML placed by the --turn RadarChart
 // sets, a fraction of a turn clockwise from the top.
 //
-// Modifiers: .area fills each shape, .points marks each value, .sparkline
+// A gap in a series breaks its outline; .area fills each unbroken run as a
+// wedge from the middle.
+//
+// Modifiers: .area fills each shape, .points marks each value, .axis
+// rings the grid at round values and labels the rings, .sparkline
 // is a small chart with no labels, legend or tooltip.
 // A series header cell's classes reach its shape: <th class="dashed">.
 //
@@ -24,17 +28,18 @@
 //   --md-comp-radar-chart-color-1..4    primary, tertiary, secondary,
 //                                       on-surface-variant
 
-@include chart("radar-chart");
+@include chart("radar-chart", $grid: false, $tooltip: middle, $cursor: line);
+@include chart-axis("radar-chart", $beside: false);
 
 .radar-chart {
   --md-comp-radar-chart-line-width: 2px;
-  --md-comp-radar-chart-label-room: 80px;
+  --md-comp-radar-chart-label-room: #{rem(80px)};
   // How far past the rim a label starts.
   --radar-chart-label-offset: 8px;
 
   &.sparkline {
     --md-comp-radar-chart-line-width: 1.5px;
-    --md-comp-radar-chart-label-room: 0px;
+    --md-comp-radar-chart-label-room: #{rem(0px)};
     --radar-chart-label-offset: 0px;
   }
 }
@@ -53,9 +58,27 @@
       2 * var(--md-sys-typescale-body-small-line-height) + var(--radar-chart-label-offset)
     )
     auto;
-  border: 0;
   border-radius: 50%;
-  background: none;
+}
+
+// .axis rings the grid at round values and labels each ring up the top
+// spoke. Zero, the middle, goes unlabelled.
+.radar-chart-axis > li {
+  inset-inline: auto;
+  left: 50%;
+  top: calc(var(--at, 0%) / 2);
+  border: 0;
+
+  &:first-child {
+    display: none;
+  }
+}
+
+.radar-chart-axis > li > span {
+  inset: auto auto auto 4px;
+  width: auto;
+  padding: 0;
+  overflow: visible;
 }
 
 .radar-chart-web {
@@ -86,12 +109,19 @@
 }
 
 .radar-chart-shape {
-  fill: var(--radar-chart-color);
-  fill-opacity: 0;
+  fill: none;
   stroke-width: var(--md-comp-radar-chart-line-width);
+}
 
+.radar-chart-area {
+  fill: var(--radar-chart-color);
+  fill-opacity: 0.24;
+}
+
+.radar-chart-shape,
+.radar-chart-area {
   @media (prefers-reduced-motion: no-preference) {
-    transition: opacity 400ms cubic-bezier(0.2, 0, 0, 1), scale 400ms cubic-bezier(0.2, 0, 0, 1);
+    transition: opacity var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard), scale var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
 
     @starting-style {
       opacity: 0;
@@ -100,10 +130,6 @@
   }
 }
 
-.radar-chart.area .radar-chart-shape {
-  fill-opacity: 0.24;
-}
-
 .radar-chart-series.dashed .radar-chart-shape {
   stroke-dasharray: 2 6;
 }
@@ -116,9 +142,7 @@
 // Each label sits just past its spoke's tip and leans away from the middle:
 // right of a spoke on the right, above the top one, and so on.
 .radar-chart-axes {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  @include list-reset;
   color: var(--md-sys-color-on-surface-variant);
   @include typescale("body-small");
 
@@ -141,22 +165,9 @@
 // places the points on it by their share of its length from the rim.
 .radar-chart-cursor {
   inset: auto auto 50% 50%;
-  width: 1px;
   height: 50%;
-  background-color: var(--md-sys-color-outline);
   transform-origin: bottom;
   rotate: calc(var(--turn, 0) * 1turn);
-
-  > span {
-    position: absolute;
-    left: 0;
-    width: 10px;
-    height: 10px;
-    border: 2px solid var(--md-sys-color-surface);
-    border-radius: 50%;
-    background-color: var(--radar-chart-color);
-    translate: -50% -50%;
-  }
 }
 
 // Past the spoke's tip, on the side away from the middle.
@@ -165,11 +176,6 @@
 
   left: calc(50% + sin(var(--radar-chart-angle)) * 50%);
   top: calc(50% - cos(var(--radar-chart-angle)) * 50%);
-  translate: 12px -50%;
-
-  &.end {
-    translate: calc(-100% - 12px) -50%;
-  }
 }
 
 .radar-chart-legend {
@@ -194,12 +200,4 @@
   .radar-chart-axes {
     forced-color-adjust: auto;
   }
-
-  .radar-chart-cursor {
-    background-color: CanvasText;
-  }
-
-  .radar-chart-cursor > span {
-    forced-color-adjust: none;
-  }
 }

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

@@ -11,8 +11,15 @@
 // circle, from the --radial-chart-dash RadialChart sets, so it can grow in;
 // --radial-chart-offset moves a round-capped dash in by half the width.
 //
-// Modifiers: .gauge draws half circles over the middle, .sparkline is a
-// small chart with no legend or tooltip. A <tfoot> row shows in the middle.
+// data-segments on the figure splits each ring into that many segments,
+// filled whole, with the ring gap between them.
+//
+// Modifiers: .gauge draws half circles over the middle, .gradient shades
+// each fill along its ring, from a light tint at the start to the full
+// color at the end, .labels draws
+// three-quarter rings and names each one in the empty top left quarter,
+// or under the base line of a gauge, .sparkline is a small chart with no legend, tooltip or names. A <tfoot>
+// row shows in the middle.
 //
 // Tokens:
 //   --md-comp-radial-chart-height       240px, the rings' diameter (sparkline 48px)
@@ -24,7 +31,7 @@
 //   --md-comp-radial-chart-color-1..4   primary, tertiary, secondary,
 //                                       on-surface-variant
 
-@include chart("radial-chart");
+@include chart("radial-chart", $round: true, $tooltip: middle, $legend-columns: 3);
 
 .radial-chart {
   --md-comp-radial-chart-thickness: 8;
@@ -34,16 +41,6 @@
   gap: 16px;
 }
 
-.radial-chart-plot {
-  width: min(100%, var(--md-comp-radial-chart-height));
-  height: auto;
-  aspect-ratio: 1;
-  margin-inline: auto;
-  border: 0;
-  border-radius: 50%;
-  background: none;
-}
-
 .radial-chart.gauge .radial-chart-plot {
   aspect-ratio: 2;
   border-radius: 50% 50% 0 0 / 100% 100% 0 0;
@@ -71,8 +68,9 @@
   stroke: var(--md-comp-radial-chart-track-color);
 }
 
-// A gauge's track ends where its fill would, so it ends round too.
-.radial-chart.gauge .radial-chart-track {
+// A track short of a whole circle ends where its fill would, so it ends
+// round too.
+.radial-chart-track.capped {
   stroke-linecap: round;
 }
 
@@ -90,7 +88,7 @@
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: stroke-dasharray 600ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms cubic-bezier(0.2, 0, 0, 1);
+    transition: stroke-dasharray var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard), opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
 
     @starting-style {
       stroke-dasharray: 0 1000;
@@ -98,14 +96,104 @@
   }
 }
 
-.radial-chart-tooltip {
-  translate: 12px -50%;
+// .gradient draws each fill again in HTML: a conic gradient round the
+// ring's middle, masked by RadialChart to the fill's own dash, from a tint
+// of the ring's color to the color itself where the fill ends. The SVG fill
+// under it keeps its shape for the cap and the hover, and drops its color.
+// A second mask, a conic reveal, grows the fill in as the SVG dash does. A
+// shadow root ignores @property, so the reveal falls back to the whole turn
+// there and the fill appears without growing.
+@property --radial-chart-reveal {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 360deg;
+}
+
+.radial-chart.gradient .radial-chart-ring {
+  stroke: transparent;
+}
+
+.radial-chart-sweep {
+  // The rings' middle: the box's, or for a gauge the middle of its base line.
+  --radial-chart-at: 50% 50%;
+
+  position: absolute;
+  inset: 0;
+  background: conic-gradient(
+    from var(--radial-chart-from, 0turn) at var(--radial-chart-at),
+    color-mix(in oklab, var(--radial-chart-color) 35%, var(--md-sys-color-surface)),
+    var(--radial-chart-color) var(--radial-chart-to, 1turn)
+  );
+  mask-image:
+    var(--radial-chart-shape, none),
+    conic-gradient(from var(--radial-chart-from, 0turn) at var(--radial-chart-at), #000 var(--radial-chart-reveal, 360deg), transparent 0);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  mask-composite: intersect;
+  pointer-events: none;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      --radial-chart-reveal var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard),
+      opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+
+    @starting-style {
+      --radial-chart-reveal: 0deg;
+    }
+  }
+
+  .radial-chart.gauge & {
+    --radial-chart-at: 50% 100%;
+  }
 
-  &.end {
-    translate: calc(-100% - 12px) -50%;
+  .radial-chart-rings:has(.active) &:not(.active) {
+    opacity: 0.38;
   }
 }
 
+// The names' font shrinks with the plot, so they need its size.
+.radial-chart.labels .radial-chart-rings {
+  container-type: size;
+}
+
+// RadialChart sets each name's --radial-chart-at to its ring's top. Names
+// end at the middle line, beside the start of their ring, and shrink to fit
+// between crowded rings: one unit of the SVG's 100-unit box is 1cqw. They
+// stay in a text color, since a ring color token may be too light to read.
+.radial-chart-names > span {
+  position: absolute;
+  top: var(--radial-chart-at, 50%);
+  right: calc(50% + 4px);
+  max-width: calc(50% - 8px);
+  @include ellipsis;
+  translate: 0 -50%;
+  color: var(--md-sys-color-on-surface-variant);
+  @include typescale("label-medium");
+  font-size: min(var(--md-sys-typescale-label-medium-font-size), var(--radial-chart-step, 10) * 0.6cqw);
+  line-height: 1.2;
+}
+
+// A gauge's names hang under its base line, a row each with the innermost
+// ring's on top. Each starts at its ring's start, after a line down from
+// it, and every line passes left of the names above it.
+.radial-chart.gauge.labels:not(.sparkline) .radial-chart-plot {
+  margin-block-end: calc(var(--radial-chart-rows, 0) * var(--md-sys-typescale-label-medium-line-height) + 4px);
+}
+
+.radial-chart.gauge .radial-chart-names > span {
+  top: calc(100% + 4px);
+  right: 0;
+  left: var(--radial-chart-at, 0);
+  max-width: none;
+  padding: calc(var(--radial-chart-row, 0) * var(--md-sys-typescale-label-medium-line-height)) 0 0 4px;
+  border-left: 1px solid var(--md-sys-color-outline-variant);
+  translate: none;
+  // The rings do not mirror in RTL, so each name stays beside its line.
+  text-align: left;
+  font-size: var(--md-sys-typescale-label-medium-font-size);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+}
+
 // The middle, inside the innermost ring; a gauge's sits on its base line.
 .radial-chart-total {
   position: absolute;
@@ -136,35 +224,9 @@
   justify-content: end;
 }
 
-// One row per ring: swatch, name and cell in aligned columns.
-.radial-chart-legend {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 8px;
-
-  > li {
-    display: contents;
-  }
-
-  > li > span:first-child {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  > li > span:last-child {
-    text-align: end;
-    color: var(--md-sys-color-on-surface);
-    font-weight: 500;
-    font-variant-numeric: tabular-nums;
-  }
-}
-
 .radial-chart.sparkline .radial-chart-plot {
   // A set width, so the chart keeps its size as a flex item.
   width: var(--md-comp-radial-chart-height);
-  margin-inline: 0;
 }
 
 @media (forced-colors: active) {

package/src/sass/components/_rich-text-editor.scss

@@ -12,7 +12,7 @@
 
 .rich-text-editor {
   --md-comp-rich-text-editor-min-height: 160px;
-  --md-comp-rich-text-editor-shape: 16px;
+  --md-comp-rich-text-editor-shape: var(--md-sys-shape-corner-large);
 
   display: flex;
   flex-direction: column;
@@ -76,7 +76,7 @@
 
     :not(pre) > code,
     pre {
-      border-radius: 8px;
+      border-radius: var(--md-sys-shape-corner-small);
       background-color: var(--md-sys-color-surface-container-highest);
       font-family: ui-monospace, monospace;
     }

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

@@ -0,0 +1,91 @@
+@use "../abstracts" as *;
+
+// Sankey chart. A <figure class="sankey-chart"> holds a <figcaption> and a
+// <table> of flows: the first column names each row's source node, the
+// second its target node, and the third holds the value. Without JavaScript
+// the table shows. SankeyChart draws the nodes in columns and each row as a
+// link between two of them, and hides the table visually, so a screen
+// reader still reads the flows as a table. The plot and tooltip come from
+// chart().
+//
+// The SVG stretches to the plot (preserveAspectRatio="none"). Nodes and
+// links are filled shapes with no stroke, so stretching keeps every link
+// as thick as its value and every node as tall as its total.
+//
+// Each node takes a color in node order through data-series, and each link
+// its source node's color, lighter. The names sit over the drawing, level
+// with their nodes, from --sankey-chart-x and --sankey-chart-y, the
+// script's percentages of the plot from its inline start and top.
+//
+// Tokens:
+//   --md-comp-sankey-chart-height        240px
+//   --md-comp-sankey-chart-link-opacity  0.4
+//   --md-comp-sankey-chart-color-1..6    primary, tertiary, secondary,
+//                                        on-surface-variant, then primary-
+//                                        and tertiary-container deepened
+//                                        toward on-surface, as the pie chart's
+
+// No grid lines or baseline: the nodes and links have no value axis.
+@include chart("sankey-chart", $colors: 6, $grid: false, $tooltip: middle);
+
+.sankey-chart {
+  --md-comp-sankey-chart-link-opacity: 0.4;
+}
+
+.sankey-chart-plot > svg {
+  @include fill-parent;
+  overflow: visible;
+}
+
+.sankey-chart-node {
+  fill: var(--sankey-chart-color);
+}
+
+.sankey-chart-link {
+  fill: var(--sankey-chart-color);
+  fill-opacity: var(--md-comp-sankey-chart-link-opacity);
+
+  // The link the keys or pointer picked.
+  &.active {
+    fill-opacity: 0.8;
+  }
+}
+
+// Level with the link's middle.
+.sankey-chart-tooltip {
+  // The value header names a column, not a node, so it has no swatch.
+  > span.value::before {
+    content: none;
+  }
+}
+
+// Over the drawing, and out of the pointer's way, so a link under a name
+// still takes it.
+.sankey-chart-names {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.sankey-chart-name {
+  position: absolute;
+  top: var(--sankey-chart-y, 0%);
+  inset-inline-start: var(--sankey-chart-x, 0%);
+  padding-inline: 4px;
+  color: var(--md-sys-color-on-surface);
+  @include typescale("body-small");
+  white-space: nowrap;
+  translate: 0 -50%;
+
+  &.end {
+    inset-inline: auto calc(100% - var(--sankey-chart-x, 0%));
+  }
+}
+
+// The colors tell the nodes apart, so they keep them.
+@media (forced-colors: active) {
+  .sankey-chart-plot > svg {
+    forced-color-adjust: none;
+  }
+}

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

@@ -0,0 +1,144 @@
+@use "../abstracts" as *;
+
+// Scatter chart. A <figure class="scatter-chart"> holds a <figcaption> and a
+// <table> of data: the first column labels each row, the second is the x
+// axis, and each further column is a series named by its header cell.
+// Without JavaScript the table shows. ScatterChart draws each row as one
+// point per series and hides the table visually, so a screen reader still
+// reads the data as a table. The plot, tooltip and legend come from chart().
+//
+// The SVG stretches to the plot (preserveAspectRatio="none"), and points are
+// round caps on zero-length lines with a non-scaling stroke, so they stay
+// round at any size.
+//
+// Modifiers: .axis labels both axes at round values with grid lines,
+// .toggle makes each legend item a button that shows or hides its series,
+// and .bubble makes the last column each row's size, drawing every point as
+// a bubble whose area follows it. The script sets each bubble's
+// --scatter-chart-size, its diameter as a share of the largest, and animates
+// it on update(), so it is registered as a number.
+//
+// Tokens:
+//   --md-comp-scatter-chart-height       240px
+//   --md-comp-scatter-chart-point-size   8px
+//   --md-comp-scatter-chart-bubble-size  48px, the largest bubble's diameter
+//   --md-comp-scatter-chart-grid-color   outline-variant
+//   --md-comp-scatter-chart-color-1..4   primary, tertiary, secondary,
+//                                        on-surface-variant
+
+@property --scatter-chart-size {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@include chart("scatter-chart", $tooltip: middle);
+@include chart-axis("scatter-chart");
+
+.scatter-chart {
+  --md-comp-scatter-chart-point-size: 8px;
+  --md-comp-scatter-chart-bubble-size: 48px;
+}
+
+.scatter-chart-plot > svg {
+  @include fill-parent;
+  overflow: visible;
+}
+
+.scatter-chart-points {
+  fill: none;
+  stroke: var(--scatter-chart-color);
+  stroke-width: var(--md-comp-scatter-chart-point-size);
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+// Partly transparent, so overlapping bubbles still show through.
+.scatter-chart.bubble .scatter-chart-points {
+  stroke-width: calc(var(--md-comp-scatter-chart-bubble-size) * var(--scatter-chart-size));
+  stroke-opacity: 0.7;
+}
+
+// With .bubble, room the largest bubble's radius wide around the plot, and
+// the axis labels moved out by as much, so a bubble at the end of a scale
+// spills into empty space instead of over the labels, caption or legend.
+.scatter-chart.bubble {
+  --scatter-chart-room: calc(var(--md-comp-scatter-chart-bubble-size) / 2);
+
+  > .scatter-chart-plot {
+    margin: var(--scatter-chart-room);
+  }
+
+  &.axis > .scatter-chart-plot {
+    margin-block: calc(8px + var(--scatter-chart-room)) calc(#{rem(20px)} + var(--scatter-chart-room));
+    margin-inline-start: calc(var(--md-comp-scatter-chart-axis-width) + var(--scatter-chart-room));
+  }
+
+  .scatter-chart-axis:not(.x) > li > span {
+    inset-inline-end: calc(100% + var(--scatter-chart-room));
+  }
+
+  .scatter-chart-axis.x > li > span {
+    top: calc(100% + var(--scatter-chart-room));
+  }
+}
+
+// The x scale's labels, below the plot, each with a grid line up through it
+// at --at from the left. The script mirrors --at in a right-to-left chart.
+.scatter-chart.axis > .scatter-chart-plot {
+  margin-block-end: rem(20px);
+}
+
+.scatter-chart-axis.x {
+  > li {
+    inset-inline: auto;
+    inset-block: 0;
+    left: var(--at, 0%);
+    border-block-start: 0;
+    border-inline-start: 1px solid var(--md-comp-scatter-chart-grid-color);
+  }
+
+  > li > span {
+    inset-inline: auto;
+    top: 100%;
+    left: 0;
+    width: auto;
+    padding: 4px 0 0;
+    translate: -50% 0;
+  }
+}
+
+// The highlighted point's marker, and the tooltip level with it.
+.scatter-chart-cursor {
+  inset-block: auto;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--md-sys-color-surface);
+  border-radius: 50%;
+  box-sizing: border-box;
+  background-color: var(--scatter-chart-color);
+  translate: -50% -50%;
+}
+
+// Around a bubble, the marker is the bubble's size plus its border.
+.scatter-chart.bubble .scatter-chart-cursor {
+  width: max(14px, calc(var(--md-comp-scatter-chart-bubble-size) * var(--scatter-chart-size) + 4px));
+  height: max(14px, calc(var(--md-comp-scatter-chart-bubble-size) * var(--scatter-chart-size) + 4px));
+}
+
+.scatter-chart-tooltip {
+  // The x header names the axis, not a series, so it has no swatch.
+  > span.x::before {
+    content: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .scatter-chart-cursor {
+    forced-color-adjust: none;
+  }
+
+  .scatter-chart.bubble .scatter-chart-points {
+    stroke-opacity: 1;
+  }
+}

package/src/sass/components/_scrim.scss

@@ -1,5 +1,3 @@
-@use "../abstracts" as *;
-
 // Scrim (M3 Expressive). A foundation, not a component: there is no markup an
 // author writes to get one. It is the wash a modal surface puts behind itself
 // to dim what it covers, and this is the one place its value is decided -

package/src/sass/components/_scrollspy.scss

@@ -1,5 +1,3 @@
-@use "../abstracts" as *;
-
 // ScrollSpy. The section is the target of a hash link. Offset is CSS
 // (scroll-margin). Which TOC link is current is IntersectionObserver.
 //