@expressivecss/expressive 0.15.0 → 0.16.0

package/src/sass/components/_progress.scss

@@ -1,31 +1,39 @@
+@use "sass:math";
 @use "../abstracts" as *;
 
 // Progress. Anatomy is the HTML:
 //   <progress class="progress" value="70" max="100">   determinate bar
 //   <progress class="progress">                        indeterminate bar
-//   <span class="preloader" role="status">             circular spinner
+//   <span class="progress circular" role="status">     circular spinner
 //
 // Linear aliases: .progress > .determinate / .indeterminate, and
 // --md-comp-progress-value on a bare div.progress.
 //
+// Linear modifiers, from M3 Expressive: .stop puts a dot in the indicator
+// colour at the track's end, so the end still reads where the track's own
+// contrast falls short; .wavy draws the indicator as a wave over a thin
+// track. A circular indicator takes .wavy too.
+//
 // Tokens:
 //   --md-comp-progress-track
 //   --md-comp-progress-indicator
 //   --md-comp-progress-thickness        4px
 //   --md-comp-progress-shape            4px
 //   --md-comp-progress-value            determinate fill (optional)
+//   --md-comp-progress-stop-size        4px, the .stop dot
+//   --md-comp-progress-wavelength       40px, the .wavy indicator's wavelength
 //   --md-comp-progress-circular-size    48px
 //   --md-comp-progress-circular-thickness  4px
 
 // M3 names this component "Progress indicators", linear and circular. The
-// class is `.progress`; `.preloader` is the older name for the circular
-// one and stays as an alias, as does `.progress.circular`.
-.progress,
-.preloader {
+// class is `.progress`, and `.progress.circular` is the circular one.
+.progress {
   --md-comp-progress-track: var(--md-sys-color-secondary-container);
   --md-comp-progress-indicator: var(--md-sys-color-primary);
   --md-comp-progress-thickness: 4px;
-  --md-comp-progress-shape: 4px;
+  --md-comp-progress-shape: var(--md-sys-shape-corner-extra-small);
+  --md-comp-progress-stop-size: 4px;
+  --md-comp-progress-wavelength: 40px;
   --md-comp-progress-circular-size: 48px;
   --md-comp-progress-circular-thickness: 4px;
 }
@@ -44,9 +52,10 @@
   overflow: hidden;
   border: 0;
   border-radius: var(--md-comp-progress-shape);
-  background-color: var(--md-comp-progress-track);
+  // The track, under the .stop dot when there is one. .wavy narrows the track
+  // to a stripe; the layers are custom properties so the two combine.
+  background: var(--_progress-stop, none), var(--_progress-track, var(--md-comp-progress-track));
   appearance: none;
-  -webkit-appearance: none;
 }
 
 .progress:not(.circular) {
@@ -57,7 +66,7 @@ progress.progress {
   vertical-align: baseline;
 
   &::-webkit-progress-bar {
-    background-color: var(--md-comp-progress-track);
+    background: var(--_progress-stop, none), var(--_progress-track, var(--md-comp-progress-track));
     border-radius: var(--md-comp-progress-shape);
   }
 
@@ -84,6 +93,47 @@ progress.progress {
   }
 }
 
+// The end stop, at the inline end of the track.
+.progress.stop:not(.circular) {
+  --_progress-stop-at: calc(100% - var(--md-comp-progress-thickness) / 2);
+  --_progress-stop: radial-gradient(
+    circle at var(--_progress-stop-at) 50%,
+    var(--md-comp-progress-indicator) calc(var(--md-comp-progress-stop-size) / 2),
+    transparent calc(var(--md-comp-progress-stop-size) / 2 + 0.5px)
+  ) no-repeat;
+
+  &:dir(rtl) {
+    --_progress-stop-at: calc(var(--md-comp-progress-thickness) / 2);
+  }
+}
+
+// The wavy indicator: a 4px wave, 3px either side of the track's middle,
+// drawn by masking the indicator with one wavelength repeated along it.
+$_wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0 7C6.67 3 13.33 3 20 7S33.33 11 40 7' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
+
+.progress.wavy:not(.circular) {
+  --_progress-track: linear-gradient(var(--md-comp-progress-track) 0 0) center / 100% var(--md-comp-progress-thickness) no-repeat;
+  --_progress-wave: #{$_wave} repeat-x 0 50% / var(--md-comp-progress-wavelength) 14px;
+
+  height: 14px;
+  border-radius: 0;
+}
+
+.progress.wavy:not(.circular) > .determinate,
+.progress.wavy:not(.circular) > .indeterminate::before,
+.progress.wavy:not(.circular) > .indeterminate::after,
+progress.progress.wavy::-webkit-progress-value,
+progress.progress.wavy:indeterminate::before,
+progress.progress.wavy:indeterminate::after {
+  mask: var(--_progress-wave);
+}
+
+// Firefox's own pseudo-element, kept out of the list above: Chromium drops a
+// list naming a pseudo-element it does not know.
+progress.progress.wavy::-moz-progress-bar {
+  mask: var(--_progress-wave);
+}
+
 @keyframes progress-indeterminate-moz {
   from { margin-inline-start: -40%; margin-inline-end: 100%; }
   to   { margin-inline-start: 100%; margin-inline-end: -40%; }
@@ -95,7 +145,7 @@ progress.progress {
   inset-inline: 0 auto;
   width: var(--md-comp-progress-value, 0%);
   background-color: var(--md-comp-progress-indicator);
-  transition: width 0.3s linear;
+  transition: width var(--md-sys-motion-duration-medium2) linear;
 }
 
 // Bare div.progress with a value token, no child. :not(.circular) because a
@@ -112,7 +162,7 @@ $_bare: ".progress:not(:is(progress)):not(.circular):not(:has(> .determinate, >
     inset-inline: 0 auto;
     width: var(--md-comp-progress-value, 0%);
     background-color: var(--md-comp-progress-indicator);
-    transition: width 0.3s linear;
+    transition: width var(--md-sys-motion-duration-medium2) linear;
   }
 
   &:not([style*="--md-comp-progress-value"])::after {
@@ -121,6 +171,10 @@ $_bare: ".progress:not(:is(progress)):not(.circular):not(:has(> .determinate, >
   }
 }
 
+#{$_bare}.wavy::after {
+  mask: var(--_progress-wave);
+}
+
 .progress > .indeterminate {
   background-color: transparent;
 }
@@ -162,9 +216,8 @@ progress.progress:indeterminate {
 // Circular — one element
 // ---------------------------------------------------------------------------
 
-// The circular indicator. `.progress.circular` is the M3-aligned name;
-// `.preloader` remains a compatibility alias.
-:is(.preloader, .progress.circular) {
+// The circular indicator.
+.progress.circular {
   box-sizing: border-box;
   display: inline-block;
   width: var(--md-comp-progress-circular-size);
@@ -180,11 +233,6 @@ progress.progress:indeterminate {
     transparent calc(100% - var(--md-comp-progress-circular-thickness)),
     #000 0
   );
-  -webkit-mask: radial-gradient(
-    farthest-side,
-    transparent calc(100% - var(--md-comp-progress-circular-thickness)),
-    #000 0
-  );
   animation: preloader-rotate 1.4s linear infinite;
   vertical-align: middle;
 
@@ -202,13 +250,66 @@ progress.progress:indeterminate {
   }
 }
 
+// Wavy circular: the indicator is a wave round the ring, 10 waves of 1.5
+// units in a 48-unit box, over a thin plain track. The element draws
+// nothing itself; ::before is the indicator and ::after the determinate
+// track, each masked to its own ring.
+@function _wave-ring($waves: 10, $amplitude: 1.5, $radius: 20, $steps: 80) {
+  $path: "";
+  @for $i from 0 through $steps {
+    $angle: math.div($i, $steps) * 2 * math.$pi;
+    $r: $radius + $amplitude * math.sin($waves * $angle);
+    $x: math.div(math.round((24 + $r * math.cos($angle)) * 10), 10);
+    $y: math.div(math.round((24 + $r * math.sin($angle)) * 10), 10);
+    $command: "L";
+    @if $i == 0 {
+      $command: "M";
+    }
+    $path: "#{$path}#{$command}#{$x} #{$y}";
+  }
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='#{$path}Z' fill='none' stroke='%23000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.progress.circular.wavy {
+  position: relative;
+  // The pseudo-elements carry their own masks; a rounded clip as well
+  // leaves a hairline at the edge in WebKit.
+  overflow: visible;
+  background: none;
+  mask: none;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  &::before {
+    background: conic-gradient(var(--md-comp-progress-indicator) 0 90deg, transparent 0);
+    mask: _wave-ring() center / 100% 100% no-repeat;
+  }
+
+  &.determinate::before {
+    background: conic-gradient(var(--md-comp-progress-indicator) 0 var(--md-comp-progress-value, 0%), transparent 0);
+  }
+
+  // The track: a 2-unit ring through the middle of the wave, after the fill.
+  &.determinate::after {
+    background: conic-gradient(
+      transparent 0 var(--md-comp-progress-value, 0%),
+      color-mix(in oklab, var(--md-comp-progress-indicator) 20%, transparent) 0
+    );
+    mask: radial-gradient(farthest-side, transparent 79%, #000 79.5% 87%, transparent 87.5% 100%);
+  }
+}
+
 @keyframes preloader-rotate {
   to { transform: rotate(1turn); }
 }
 
 @media (forced-colors: active) {
-  .progress,
-  .preloader {
+  .progress {
     forced-color-adjust: none;
   }
 
@@ -237,16 +338,40 @@ progress.progress:indeterminate {
     animation: none;
   }
 
-  :is(.preloader, .progress.circular) {
+  .progress.circular.wavy::before {
+    background: conic-gradient(CanvasText 0 90deg, transparent 0);
+  }
+
+  .progress.circular.wavy.determinate::before {
+    background: conic-gradient(CanvasText 0 var(--md-comp-progress-value, 0%), transparent 0);
+  }
+
+  .progress.circular.wavy.determinate::after {
+    background: conic-gradient(transparent 0 var(--md-comp-progress-value, 0%), GrayText 0);
+  }
+
+  .progress.circular {
     background: conic-gradient(CanvasText 0 90deg, transparent 90deg 360deg);
 
+    // The value fills the ring and the track is a 2px line through its
+    // middle, so the two differ in shape and not only in GrayText against
+    // CanvasText, which a theme can set close together.
     &.determinate {
-      background: conic-gradient(
-        CanvasText 0 var(--md-comp-progress-value, 0%),
-        GrayText var(--md-comp-progress-value, 0%)
-      );
+      background:
+        conic-gradient(CanvasText 0 var(--md-comp-progress-value, 0%), transparent 0),
+        radial-gradient(
+          farthest-side,
+          transparent calc(100% - var(--md-comp-progress-circular-thickness) / 2 - 1px),
+          GrayText 0 calc(100% - var(--md-comp-progress-circular-thickness) / 2 + 1px),
+          transparent 0
+        );
     }
   }
+
+  // A wavy ring draws on its pseudo-elements, so the element stays empty here too.
+  .progress.circular.wavy {
+    background: none;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -256,7 +381,7 @@ progress.progress:indeterminate {
   progress.progress:indeterminate::before,
   progress.progress:indeterminate::after,
   #{$_bare}:not([style*="--md-comp-progress-value"])::after,
-  :is(.preloader, .progress.circular) {
+  .progress.circular {
     animation: none;
   }
 
@@ -268,10 +393,6 @@ progress.progress:indeterminate {
     width: 40%;
   }
 
-  .preloader {
-    transform: none;
-  }
-
   progress.progress:indeterminate::-moz-progress-bar {
     animation: none;
   }

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;
 }