@expressivecss/expressive 0.14.1 → 0.16.0

package/src/sass/components/_pull-to-refresh.scss

@@ -0,0 +1,90 @@
+@use "../abstracts" as *;
+
+// Pull-to-refresh. The author's loading indicator, a direct child, hides at
+// rest, comes down with a touch pull from the top, and stays while the page
+// refreshes.
+//
+//   <div class="pull-to-refresh">
+//     <span class="loading-indicator contained" role="status" aria-label="Refreshing"></span>
+//     <button type="button" class="text" data-refresh>Refresh</button>
+//     ...content
+//   </div>
+//
+// While a finger pulls, the script adds `.pulling` and sets
+// `--pull-to-refresh-offset` (how far the indicator has come down) and
+// `--pull-to-refresh-progress` (0 to 1 toward the threshold). A refresh sets
+// `aria-busy="true"` until the page reports the finish, and announces the
+// start and the finish in a `.pull-to-refresh-status` region it adds.
+//
+// Tokens:
+//   --md-comp-pull-to-refresh-indicator-offset  16px  where the indicator rests while refreshing
+//   --md-comp-pull-to-refresh-motion            default spatial spring, for the indicator's return
+//   --md-comp-pull-to-refresh-motion-duration   its duration
+
+.pull-to-refresh {
+  --md-comp-pull-to-refresh-indicator-offset: 16px;
+  --md-comp-pull-to-refresh-motion: var(--md-sys-motion-spring-default-spatial);
+  --md-comp-pull-to-refresh-motion-duration: var(--md-sys-motion-spring-default-spatial-duration);
+
+  // Stops the browser's own pull-to-refresh and scroll chaining.
+  overscroll-behavior-y: contain;
+
+  // Sticky with a negative end margin, so it stays at the top of the scroll
+  // area without taking space from the content under it.
+  > .loading-indicator {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    margin-inline: auto;
+    margin-block-end: calc(-1 * var(--md-comp-loading-indicator-container-size));
+    // It covers the content under it while showing, and has nothing to press.
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    translate: 0 -100%;
+    // Hidden only once it has gone back up.
+    transition:
+      translate var(--md-comp-pull-to-refresh-motion-duration) var(--md-comp-pull-to-refresh-motion),
+      opacity var(--md-comp-pull-to-refresh-motion-duration) var(--md-comp-pull-to-refresh-motion),
+      visibility 0s linear var(--md-comp-pull-to-refresh-motion-duration);
+
+    &::before {
+      animation-play-state: paused;
+    }
+  }
+
+  &.pulling > .loading-indicator {
+    visibility: visible;
+    translate: 0 calc(var(--pull-to-refresh-offset, 0px) - 100%);
+    opacity: var(--pull-to-refresh-progress, 1);
+    transition: none;
+  }
+
+  &[aria-busy="true"] > .loading-indicator {
+    visibility: visible;
+    opacity: 1;
+    translate: 0 var(--md-comp-pull-to-refresh-indicator-offset);
+    // Shown at once; only hiding waits for the motion.
+    transition-delay: 0s;
+
+    &::before {
+      animation-play-state: running;
+    }
+  }
+}
+
+.pull-to-refresh-status {
+  @include visually-hidden;
+}
+
+// A container that does not scroll pulls the page, so the page's own pull stops too.
+:root:has(.pull-to-refresh) {
+  overscroll-behavior-y: contain;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pull-to-refresh > .loading-indicator {
+    transition: none;
+  }
+}

package/src/sass/components/_questionnaire.scss

@@ -14,7 +14,10 @@
 // the submit button sends the form.
 //
 // Choices are outlined rows; a selected one fills with secondary-container,
-// the M3 colour for a selected item in a list.
+// the M3 colour for a selected item in a list. With data-shortcuts each
+// choice ends in the letter that picks it, hidden from screen readers.
+// With data-summary a .questionnaire-summary lists each answer before the
+// submit button.
 //
 // Tokens:
 //   --md-comp-questionnaire-choice-shape            12px
@@ -22,7 +25,7 @@
 //   --md-comp-questionnaire-choice-selected-color   secondary-container
 
 .questionnaire {
-  --md-comp-questionnaire-choice-shape: 12px;
+  --md-comp-questionnaire-choice-shape: var(--md-sys-shape-corner-medium);
   --md-comp-questionnaire-choice-outline-color: var(--md-sys-color-outline-variant);
   --md-comp-questionnaire-choice-selected-color: var(--md-sys-color-secondary-container);
 
@@ -68,7 +71,10 @@
       display: none;
     }
 
+    counter-reset: questionnaire-choice;
+
     > label:has(> :is([type="radio"], [type="checkbox"])) {
+      counter-increment: questionnaire-choice;
       display: grid;
       grid-template-columns: auto 1fr;
       align-items: center;
@@ -79,7 +85,7 @@
       padding: 8px 16px;
       border: 1px solid var(--md-comp-questionnaire-choice-outline-color);
       border-radius: var(--md-comp-questionnaire-choice-shape);
-      transition: background-color .2s ease, border-color .2s ease;
+      transition: background-color var(--md-sys-motion-duration-short4) ease, border-color var(--md-sys-motion-duration-short4) ease;
 
       p + & {
         margin-block-start: 16px;
@@ -115,6 +121,61 @@
     }
   }
 
+  &[data-shortcuts] > fieldset > label:has(> :is([type="radio"], [type="checkbox"])) {
+    grid-template-columns: auto 1fr auto;
+
+    &::after {
+      content: counter(questionnaire-choice, upper-alpha) / "";
+      grid-row: 1;
+      grid-column: 3;
+      min-width: 24px;
+      padding: 2px 6px;
+      border: 1px solid var(--md-comp-questionnaire-choice-outline-color);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      color: var(--md-sys-color-on-surface-variant);
+      text-align: center;
+      @include typescale("label-medium");
+    }
+  }
+
+  // The review step: each question, its answer and a button back to it.
+  > .questionnaire-summary {
+    outline: 0;
+
+    > dl {
+      margin: 0;
+    }
+
+    > dl > div {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      align-items: center;
+      column-gap: 16px;
+      padding: 12px 0;
+      border-block-end: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    dt {
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("label-large");
+    }
+
+    dd {
+      margin: 0;
+    }
+
+    dd:first-of-type {
+      grid-column: 1;
+      color: var(--md-sys-color-on-surface);
+      @include typescale("body-large");
+    }
+
+    dd:last-of-type {
+      grid-row: 1 / span 2;
+      grid-column: 2;
+    }
+  }
+
   // The selector matches the page footer's, which every <footer> gets.
   > footer:not(:has(> .navigation-bar:only-child)) {
     margin: 0;
@@ -142,3 +203,13 @@
     display: none;
   }
 }
+
+// The footer's plain buttons are filled ones, which forced colors paint as
+// Canvas; the button styles outline only a named container. `:where()` keeps
+// the focus ring ahead of it.
+@media (forced-colors: active) {
+  :where(.questionnaire > footer) > button:not(.outlined, .text) {
+    outline: 1px solid ButtonText;
+    outline-offset: -1px;
+  }
+}

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">.
 //
@@ -25,16 +29,17 @@
 //                                       on-surface-variant
 
 @include chart("radar-chart");
+@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;
   }
 }
@@ -58,6 +63,26 @@
   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 {
   position: absolute;
   inset: 0;
@@ -86,12 +111,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 +132,6 @@
   }
 }
 
-.radar-chart.area .radar-chart-shape {
-  fill-opacity: 0.24;
-}
-
 .radar-chart-series.dashed .radar-chart-shape {
   stroke-dasharray: 2 6;
 }

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)
@@ -71,8 +78,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 +98,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,6 +106,106 @@
   }
 }
 
+// .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%;
+  }
+
+  .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);
+  overflow: hidden;
+  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;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 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);
+}
+
 .radial-chart-tooltip {
   translate: 12px -50%;
 

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,114 @@
+@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
+
+@include chart("sankey-chart");
+
+.sankey-chart {
+  --md-comp-sankey-chart-link-opacity: 0.4;
+  --md-comp-sankey-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
+  --md-comp-sankey-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
+}
+
+// chart() sets colors 1 to 4.
+@for $i from 5 through 6 {
+  .sankey-chart [data-series="#{$i}"] {
+    --sankey-chart-color: var(--md-comp-sankey-chart-color-#{$i});
+  }
+}
+
+// No grid lines or baseline: the nodes and links have no value axis.
+.sankey-chart-plot {
+  border: 0;
+  background: none;
+
+  > svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    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 {
+  translate: 12px -50%;
+
+  &.end {
+    translate: calc(-100% - 12px) -50%;
+  }
+
+  // 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;
+  }
+}