@expressivecss/expressive 0.3.0 → 0.5.0

package/src/sass/components/_parallax.scss

@@ -2,7 +2,7 @@
 
 // Parallax. Anatomy is the HTML: a .parallax (or <figure class="parallax">)
 // clips an <img>, <picture>, or <video>. A heading / <p> / <figcaption> is
-// the overlay. .parallax-container is the old wrapper and still works.
+// the overlay.
 //
 // Motion is CSS. A named view timeline on the clip drives the image; without
 // animation-timeline the image is just object-fit: cover. JS does not scroll.
@@ -12,8 +12,7 @@
 //   --md-comp-parallax-travel   how far the image moves (64px)
 //   --md-comp-parallax-shape    12px, same as media / lightbox / slider
 
-.parallax,
-.parallax-container {
+.parallax {
   --md-comp-parallax-height: 500px;
   --md-comp-parallax-travel: 120px;
   --md-comp-parallax-shape: 12px;
@@ -29,22 +28,8 @@
   view-timeline-axis: block;
 }
 
-// Old markup: container > .parallax > img. The outer box is the clip;
-// the inner .parallax is just a fill, not a second 500px window.
-.parallax-container > .parallax {
-  position: absolute;
-  inset: 0;
-  height: auto;
-  margin: 0;
-  border-radius: 0;
-  overflow: visible;
-  view-timeline-name: none;
-}
-
 .parallax > :is(img, video),
-.parallax > picture,
-.parallax-container .parallax > :is(img, video),
-.parallax-container .parallax > picture {
+.parallax > picture {
   position: absolute;
   inset: 0;
   display: block;
@@ -53,8 +38,7 @@
   border: 0;
 }
 
-.parallax > picture img,
-.parallax-container .parallax > picture img {
+.parallax > picture img {
   display: block;
   width: 100%;
   height: 100%;
@@ -62,9 +46,7 @@
 }
 
 .parallax > :is(img, video),
-.parallax > picture img,
-.parallax-container .parallax > :is(img, video),
-.parallax-container .parallax > picture img {
+.parallax > picture img {
   object-fit: cover;
   object-position: center;
 }
@@ -95,8 +77,7 @@
 }
 
 // Full-bleed hero. Meets the viewport edges; no corners.
-.parallax.max,
-.parallax-container.max {
+.parallax.max {
   height: 100vh;
   height: 100dvh;
   border-radius: 0;
@@ -107,9 +88,7 @@
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
     .parallax > :is(img, video),
-    .parallax > picture img,
-    .parallax-container .parallax > :is(img, video),
-    .parallax-container .parallax > picture img {
+    .parallax > picture img {
       height: calc(100% + 2 * var(--md-comp-parallax-travel));
       inset: calc(-1 * var(--md-comp-parallax-travel)) 0 auto;
       animation: parallax-shift linear both;

package/src/sass/components/_preloader.scss

@@ -1,344 +1,189 @@
 @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
+//
+// Linear aliases: .progress > .determinate / .indeterminate, and
+// --md-comp-progress-value on a bare div.progress.
+//
+// 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-circular-size    48px
+//   --md-comp-progress-circular-thickness  4px
+
+.progress,
+.preloader {
+  --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-circular-size: 48px;
+  --md-comp-progress-circular-thickness: 4px;
+}
+
+// ---------------------------------------------------------------------------
+// Linear
+// ---------------------------------------------------------------------------
+
 .progress {
+  box-sizing: border-box;
   position: relative;
-  height: 4px;
   display: block;
   width: 100%;
-  background-color: var(--md-sys-color-surface-variant);
-  border-radius: 4px;
-  margin: $element-top-margin 0 $element-bottom-margin 0;
+  height: var(--md-comp-progress-thickness);
+  margin: $element-top-margin 0 $element-bottom-margin;
   overflow: hidden;
-  background-color: var(--md-sys-color-secondary-container);
-
-  .determinate {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    background-color: var(--md-sys-color-primary);
-    transition: width .3s linear;
-  }
-
-  .indeterminate {
-    background-color: var(--md-sys-color-primary);
-
-    &:before {
-      content: '';
-      position: absolute;
-      background-color: inherit;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      will-change: left, right;
-      // Custom bezier
-      animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
-
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      background-color: inherit;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      will-change: left, right;
-      // Custom bezier
-      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
-      animation-delay: 1.15s;
-    }
-  }
+  border: 0;
+  border-radius: var(--md-comp-progress-shape);
+  background-color: var(--md-comp-progress-track);
+  appearance: none;
+  -webkit-appearance: none;
 }
 
-@keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
+progress.progress {
+  vertical-align: baseline;
 
-@keyframes indeterminate-short {
-  0% {
-    left: -200%;
-    right: 100%;
-  }
-  60% {
-    left: 107%;
-    right: -8%;
-  }
-  100% {
-    left: 107%;
-    right: -8%;
+  &::-webkit-progress-bar {
+    background-color: var(--md-comp-progress-track);
+    border-radius: var(--md-comp-progress-shape);
   }
-}
-
-
-
-/*
-    @license
-    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-    Code distributed by Google as part of the polymer project is also
-    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
- */
 
-/**************************/
-/* STYLES FOR THE SPINNER */
-/**************************/
-
-/*
- * Constants:
- *      STROKEWIDTH = 3px
- *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
- *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
- *      ARCSTARTROT = 216 degrees (how much the start location of the arc
- *                                should rotate each time, 216 gives us a
- *                                5 pointed star shape (it's 360/5 * 3).
- *                                For a 7 pointed star, we might do
- *                                360/7 * 3 = 154.286)
- *      CONTAINERWIDTH = 28px
- *      SHRINK_TIME = 400ms
- */
-
-
-.preloader-wrapper {
-  display: inline-block;
-  position: relative;
-  width: 50px;
-  height: 50px;
-
-  &.small {
-    width: 36px;
-    height: 36px;
+  &::-webkit-progress-value {
+    background-color: var(--md-comp-progress-indicator);
+    border-radius: var(--md-comp-progress-shape);
   }
 
-  &.big {
-    width: 64px;
-    height: 64px;
+  &::-moz-progress-bar {
+    background-color: var(--md-comp-progress-indicator);
+    border-radius: var(--md-comp-progress-shape);
   }
 
-  &.active {
-    /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
-    animation: container-rotate 1568ms linear infinite;
+  &:indeterminate::-webkit-progress-value,
+  &:indeterminate::-moz-progress-bar {
+    background-color: transparent;
   }
 }
 
-@keyframes container-rotate {
-  to { transform: rotate(360deg) }
-}
-
-.spinner-layer {
+.progress > .determinate {
   position: absolute;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  border-color: var(--md-sys-color-primary);
-}
-
-.spinner-blue,
-.spinner-blue-only {
-  border-color: #4285f4;
-}
-
-.spinner-red,
-.spinner-red-only {
-  border-color: #db4437;
-}
-
-.spinner-yellow,
-.spinner-yellow-only {
-  border-color: #f4b400;
-}
-
-.spinner-green,
-.spinner-green-only {
-  border-color: #0f9d58;
-}
-
-/**
- * NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
- *
- * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
- * guarantee that the animation will start _exactly_ after that value. So we avoid using
- * animation-delay and instead set custom keyframes for each color (as redundant as it
- * seems).
- *
- * The second half of this note explained why each animation is written as the
- * `animation` shorthand rather than as separate animation-name/-duration
- * longhands: the Web Animations polyfill on old Safari mistook the longhands
- * for -webkit-animation. That polyfill is long gone, and the prefixed
- * declarations it was about have been removed - the shorthand is kept only
- * because it is shorter here. See github.com/Polymer/platform/issues/53.
- */
-.active .spinner-layer.spinner-blue {
-  /* durations: 4 * ARCTIME */
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  inset: 0 auto 0 0;
+  width: var(--md-comp-progress-value, 0%);
+  background-color: var(--md-comp-progress-indicator);
+  transition: width 0.3s linear;
 }
 
-.active .spinner-layer.spinner-red {
-  /* durations: 4 * ARCTIME */
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-}
-
-.active .spinner-layer.spinner-yellow {
-  /* durations: 4 * ARCTIME */
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-}
-
-.active .spinner-layer.spinner-green {
-  /* durations: 4 * ARCTIME */
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-}
+// Bare div.progress with a value token, no child.
+.progress:not(:is(progress)):not(:has(> .determinate, > .indeterminate)) {
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: var(--md-comp-progress-value, 0%);
+    background-color: var(--md-comp-progress-indicator);
+    transition: width 0.3s linear;
+  }
 
-.active .spinner-layer,
-.active .spinner-layer.spinner-blue-only,
-.active .spinner-layer.spinner-red-only,
-.active .spinner-layer.spinner-yellow-only,
-.active .spinner-layer.spinner-green-only {
-  /* durations: 4 * ARCTIME */
-  opacity: 1;
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  &:not([style*="--md-comp-progress-value"])::after {
+    width: auto;
+    animation: preloader-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
 }
 
-@keyframes fill-unfill-rotate {
-  12.5% { transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
-  25%   { transform: rotate(270deg);  } /* 1   * ARCSIZE */
-  37.5% { transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
-  50%   { transform: rotate(540deg);  } /* 2   * ARCSIZE */
-  62.5% { transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
-  75%   { transform: rotate(810deg);  } /* 3   * ARCSIZE */
-  87.5% { transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
-  to    { transform: rotate(1080deg); } /* 4   * ARCSIZE */
-}
+.progress > .indeterminate,
+progress.progress:indeterminate {
+  background-color: transparent;
 
-@keyframes blue-fade-in-out {
-  from { opacity: 1; }
-  25% { opacity: 1; }
-  26% { opacity: 0; }
-  89% { opacity: 0; }
-  90% { opacity: 1; }
-  100% { opacity: 1; }
-}
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    background-color: var(--md-comp-progress-indicator);
+  }
 
-@keyframes red-fade-in-out {
-  from { opacity: 0; }
-  15% { opacity: 0; }
-  25% { opacity: 1; }
-  50% { opacity: 1; }
-  51% { opacity: 0; }
-}
+  &::before {
+    animation: preloader-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
 
-@keyframes yellow-fade-in-out {
-  from { opacity: 0; }
-  40% { opacity: 0; }
-  50% { opacity: 1; }
-  75% { opacity: 1; }
-  76% { opacity: 0; }
+  &::after {
+    animation: preloader-indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    animation-delay: 1.15s;
+  }
 }
 
-@keyframes green-fade-in-out {
-  from { opacity: 0; }
-  65% { opacity: 0; }
-  75% { opacity: 1; }
-  90% { opacity: 1; }
-  100% { opacity: 0; }
+@keyframes preloader-indeterminate {
+  0%   { left: -35%; right: 100%; }
+  60%  { left: 100%; right: -90%; }
+  100% { left: 100%; right: -90%; }
 }
 
-/**
- * Patch the gap that appear between the two adjacent div.circle-clipper while the
- * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
- */
-.gap-patch {
-  position: absolute;
-  top: 0;
-  left: 45%;
-  width: 10%;
-  height: 100%;
-  overflow: hidden;
-  border-color: inherit;
+@keyframes preloader-indeterminate-short {
+  0%   { left: -200%; right: 100%; }
+  60%  { left: 107%;  right: -8%; }
+  100% { left: 107%;  right: -8%; }
 }
 
-.gap-patch .circle {
-  width: 1000%;
-  left: -450%;
-}
+// ---------------------------------------------------------------------------
+// Circular — one element
+// ---------------------------------------------------------------------------
 
-.circle-clipper {
+.preloader {
+  box-sizing: border-box;
   display: inline-block;
-  position: relative;
-  width: 50%;
-  height: 100%;
-  overflow: hidden;
-  border-color: inherit;
-
-  .circle {
-    width: 200%;
-    height: 100%;
-    border-width: 3px; /* STROKEWIDTH */
-    border-style: solid;
-    border-color: inherit;
-    border-bottom-color: transparent !important;
-    border-radius: 50%;
+  width: var(--md-comp-progress-circular-size);
+  height: var(--md-comp-progress-circular-size);
+  border-radius: 50%;
+  background: conic-gradient(
+    from 0turn,
+    var(--md-comp-progress-indicator) 0 90deg,
+    transparent 90deg 360deg
+  );
+  mask: radial-gradient(
+    farthest-side,
+    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;
+
+  &.small { --md-comp-progress-circular-size: 36px; }
+  &.big   { --md-comp-progress-circular-size: 64px; }
+
+  &.determinate {
     animation: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  &.left .circle {
-    left: 0;
-    border-right-color: transparent !important;
-    transform: rotate(129deg);
+    background: conic-gradient(
+      from 0turn,
+      var(--md-comp-progress-indicator) 0 var(--md-comp-progress-value, 0%),
+      color-mix(in oklab, var(--md-comp-progress-indicator) 20%, transparent)
+        var(--md-comp-progress-value, 0%)
+    );
   }
-  &.right .circle {
-    left: -100%;
-    border-left-color: transparent !important;
-    transform: rotate(-129deg);
-  }
-}
-
-
-
-.active .circle-clipper.left .circle {
-  /* duration: ARCTIME */
-  animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-}
-
-.active .circle-clipper.right .circle {
-  /* duration: ARCTIME */
-  animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-}
-
-@keyframes left-spin {
-  from { transform: rotate(130deg); }
-  50% { transform: rotate(-5deg); }
-  to { transform: rotate(130deg); }
 }
 
-@keyframes right-spin {
-  from { transform: rotate(-130deg); }
-  50% { transform: rotate(5deg); }
-  to { transform: rotate(-130deg); }
+@keyframes preloader-rotate {
+  to { transform: rotate(1turn); }
 }
 
-#spinnerContainer.cooldown {
-  /* duration: SHRINK_TIME */
-  animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
-}
+@media (prefers-reduced-motion: reduce) {
+  .progress > .indeterminate,
+  progress.progress:indeterminate,
+  .progress:not(:is(progress)):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"]),
+  .preloader {
+    animation: none;
+  }
 
-@keyframes fade-out {
-  from { opacity: 1; }
-  to { opacity: 0; }
+  .preloader {
+    transform: none;
+  }
 }

package/src/sass/components/_scrollspy.scss

@@ -0,0 +1,18 @@
+@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.
+//
+// Tokens:
+//   --md-comp-scrollspy-offset   200px (JS writes the instance value)
+
+.scrollspy {
+  --md-comp-scrollspy-offset: 200px;
+  scroll-margin-block-start: var(--md-comp-scrollspy-offset);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html:has(.scrollspy) {
+    scroll-behavior: smooth;
+  }
+}