@expressivecss/expressive 0.15.0 → 0.17.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,20 +52,33 @@
   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) {
   writing-mode: horizontal-tb;
 }
 
+// Two mirrored segments on a triple-width fill. Logical positioning shows
+// the first third in LTR and the last in RTL, including CSS direction overrides.
+// The middle third keeps the returning segments outside the visible track.
+@function _progress-segments($start, $end) {
+  $start: math.div($start, 3);
+  $end: math.div($end, 3);
+  @return polygon(
+    $start 0, $start 100%, $end 100%, $end 0,
+    (100% - $end) 0, (100% - $end) 100%, (100% - $start) 100%, (100% - $start) 0
+  );
+}
+
 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);
   }
 
@@ -74,19 +95,60 @@ progress.progress {
   // Firefox draws no ::before/::after on <progress> and paints the track as the
   // element's own background, so its indeterminate bar is the native one. It
   // places that bar from the physical left and reads only margin-left, which is
-  // margin-inline-end in RTL, so both inline margins move. Keep this out of any
-  // -webkit- selector list: Chromium drops a list naming a pseudo-element it
-  // does not know.
+  // margin-inline-end in RTL. Offset the fixed fill to show its last third.
+  // Keep this out of any -webkit- selector list: Chromium drops a list naming
+  // a pseudo-element it does not know.
   &:indeterminate::-moz-progress-bar {
-    width: 40%;
-    margin-inline-end: 60%;
+    width: 300%;
+    margin-inline-end: -200%;
     animation: progress-indeterminate-moz 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
 }
 
+// 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%; }
+  from { clip-path: _progress-segments(-40%, 0%); }
+  to   { clip-path: _progress-segments(100%, 140%); }
 }
 
 .progress > .determinate {
@@ -95,7 +157,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,15 +174,21 @@ $_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 {
+    // Auto width prevents a transition from the oversized fill to a known value.
     width: auto;
+    inset-inline-end: -200%;
     animation: preloader-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
 }
 
+#{$_bare}.wavy::after {
+  mask: var(--_progress-wave);
+}
+
 .progress > .indeterminate {
   background-color: transparent;
 }
@@ -133,6 +201,8 @@ progress.progress:indeterminate {
     position: absolute;
     inset-block: 0;
     inset-inline: 0 auto;
+    width: 300%;
+    clip-path: inset(50%);
     background-color: var(--md-comp-progress-indicator);
   }
 
@@ -147,24 +217,21 @@ progress.progress:indeterminate {
 }
 
 @keyframes preloader-indeterminate {
-  0%   { inset-inline-start: -35%; inset-inline-end: 100%; }
-  60%  { inset-inline-start: 100%; inset-inline-end: -90%; }
-  100% { inset-inline-start: 100%; inset-inline-end: -90%; }
+  0% { clip-path: _progress-segments(-35%, 0%); }
+  60%, 100% { clip-path: _progress-segments(100%, 190%); }
 }
 
 @keyframes preloader-indeterminate-short {
-  0%   { inset-inline-start: -200%; inset-inline-end: 100%; }
-  60%  { inset-inline-start: 107%; inset-inline-end: -8%; }
-  100% { inset-inline-start: 107%; inset-inline-end: -8%; }
+  0% { clip-path: _progress-segments(-200%, 0%); }
+  60%, 100% { clip-path: _progress-segments(107%, 108%); }
 }
 
 // ---------------------------------------------------------------------------
 // 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 +247,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 +264,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;
   }
 
@@ -234,19 +349,44 @@ progress.progress:indeterminate {
   progress.progress:indeterminate::-moz-progress-bar {
     background-color: CanvasText;
     width: 40%;
+    margin-inline-end: 60%;
     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 +396,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;
   }
 
@@ -266,13 +406,12 @@ progress.progress:indeterminate {
   progress.progress:indeterminate::after,
   #{$_bare}:not([style*="--md-comp-progress-value"])::after {
     width: 40%;
-  }
-
-  .preloader {
-    transform: none;
+    clip-path: none;
   }
 
   progress.progress:indeterminate::-moz-progress-bar {
+    width: 40%;
+    margin-inline-end: 60%;
     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;
+  }
+}