@expressivecss/expressive 0.7.0 → 0.9.0

package/src/sass/components/_list.scss

@@ -67,14 +67,14 @@
     padding: 8px var(--md-comp-list-item-padding);
     @include typescale("body-large");
 
-    > :is(i, img, input):first-child {
+    > :is(#{$icon}, img, input):first-child {
       grid-column: 1;
       grid-row: 1 / -1;
       align-self: center;
       flex-shrink: 0;
     }
 
-    > i:first-child:not(.circle) {
+    > #{$icon}:first-child:not(.circle) {
       font-size: var(--md-comp-list-leading-icon-size);
       width: var(--md-comp-list-leading-icon-size);
       height: var(--md-comp-list-leading-icon-size);
@@ -88,14 +88,14 @@
       border-radius: 8px;
     }
 
-    > :is(img, i).circle {
+    > :is(img, #{$icon}).circle {
       width: var(--md-comp-list-avatar-size);
       height: var(--md-comp-list-avatar-size);
       border-radius: 50%;
       object-fit: cover;
     }
 
-    > i.circle {
+    > #{$icon}.circle {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -105,8 +105,11 @@
       color: var(--md-sys-color-on-primary-container);
     }
 
+    // $icon-label, not a bare `span`: the canonical icon is a <span> too, so
+    // this rule used to pull the leading icon out of column 1 and into the
+    // text column - the icon rules above went dead and this one over-matched.
     > div:not(.meta),
-    > span {
+    > #{$icon-label} {
       grid-column: 2;
       min-width: 0;
     }
@@ -120,14 +123,14 @@
       @include typescale("body-medium");
     }
 
-    > :is(i, kbd, button, time, .meta, .badge, .button, a):last-child:not(:first-child) {
+    > :is(#{$icon}, kbd, button, time, .meta, .badge, .button, a):last-child:not(:first-child) {
       grid-column: 3;
       grid-row: 1 / -1;
       justify-self: end;
       align-self: center;
     }
 
-    > i:last-child:not(:first-child) {
+    > #{$icon}:last-child:not(:first-child) {
       font-size: var(--md-comp-list-trailing-icon-size);
       width: var(--md-comp-list-trailing-icon-size);
       height: var(--md-comp-list-trailing-icon-size);
@@ -146,8 +149,8 @@
       padding: 0;
     }
 
-    > button:last-child:not(:first-child):not(.button),
-    > a:last-child:not(:first-child):not(.button):has(> i:only-child) {
+    > button:last-child:not(:first-child):not(.button, .icon-button),
+    > a:last-child:not(:first-child):not(.button, .icon-button):has(> #{$icon}:only-child) {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -181,7 +184,7 @@
   > li:not(.active):not([aria-selected="true"]):not([aria-current]):not(:has(> [aria-current])):not(:has([aria-selected="true"])):not(:has(:checked)):hover {
     background-color: color-mix(
       in oklab,
-      var(--md-sys-color-on-surface) 8%,
+      var(--md-sys-color-on-surface) state-opacity("hover"),
       var(--md-comp-list-item-container-color)
     );
   }
@@ -195,7 +198,7 @@
     background-color: var(--md-comp-list-selected-container-color);
     color: var(--md-comp-list-selected-color);
 
-    i,
+    #{$icon},
     p,
     kbd,
     time,
@@ -203,8 +206,8 @@
       color: inherit;
     }
 
-    > i:first-child,
-    > :is(a, label):only-child > i:first-child {
+    > #{$icon}:first-child,
+    > :is(a, label):only-child > #{$icon}:first-child {
       --md-icon-fill: 1;
     }
   }

package/src/sass/components/_loading-indicator.scss

@@ -0,0 +1,106 @@
+@use "sass:list";
+@use "sass:math";
+@use "../abstracts" as *;
+
+// Loading indicator. M3 Expressive's indicator for short waits (under ~5s):
+// a shape that morphs while it rotates. One element, CSS-only.
+//
+//   <span class="loading-indicator" role="status" aria-label="Loading">
+//   <span class="loading-indicator contained" role="status" aria-label="Loading">
+//
+// It supersedes the indeterminate *circular* case of `.progress` — see the
+// docs page. `.progress` keeps every determinate case and both linear bars.
+//
+// Tokens (M3 md.comp.loading-indicator.*):
+//   --md-comp-loading-indicator-active-indicator-size   38px
+//   --md-comp-loading-indicator-container-size          48px
+//   --md-comp-loading-indicator-active-indicator-color  primary
+//   --md-comp-loading-indicator-container-color         transparent
+//
+// `--md-comp-loading-indicator-duration` is ours, not M3's - the spec states
+// the motion, not a duration token.
+
+// The morph shapes. M3 cycles seven named shapes (soft burst, four cookies, a
+// pentagon, a pill); these are four cookies plus a circle, which is the part
+// of the vocabulary one formula can generate. M3 draws each shape as a rounded
+// polygon and interpolates vertex by vertex; `clip-path` interpolates the same
+// way, but only between polygons with the same vertex count. So every shape
+// here is 24 points on a polar curve
+// `r = 50% * (1 - depth * (1 - cos(petals * a)) / 2)`: depth 0 is a circle,
+// and 24 divides 4, 6, 8 and 12 so every cusp lands on a vertex.
+// Corners are unrounded — a 24-gon reads as the shape, not as a polygon. The
+// docs call these cookies, which is M3's word for them; `depth: 0` is the
+// circle the cycle opens on, so the function is named for the curve instead.
+$_points: 24;
+
+// Two decimals is 0.005% of a 38px box - a fiftieth of a pixel. Full float
+// precision costs ~2KB across the five shapes and buys nothing visible.
+@function _pct($v) {
+  @return math.div(math.round($v * 100), 100);
+}
+
+@function _petal-shape($petals, $depth) {
+  $pts: ();
+  @for $i from 0 through $_points - 1 {
+    $a: math.div($i * 2 * math.$pi, $_points);
+    $r: 50% * (1 - math.div($depth * (1 - math.cos($petals * $a)), 2));
+    $pts: list.append($pts, _pct(50% + $r * math.cos($a)) _pct(50% + $r * math.sin($a)), comma);
+  }
+  @return polygon($pts);
+}
+
+.loading-indicator {
+  --md-comp-loading-indicator-active-indicator-size: 38px;
+  --md-comp-loading-indicator-container-size: 48px;
+  --md-comp-loading-indicator-active-indicator-color: var(--md-sys-color-primary);
+  --md-comp-loading-indicator-container-color: transparent;
+  --md-comp-loading-indicator-duration: 3000ms;
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--md-comp-loading-indicator-container-size);
+  height: var(--md-comp-loading-indicator-container-size);
+  border-radius: 50%;
+  background-color: var(--md-comp-loading-indicator-container-color);
+  vertical-align: middle;
+
+  &::before {
+    content: "";
+    display: block;
+    width: var(--md-comp-loading-indicator-active-indicator-size);
+    height: var(--md-comp-loading-indicator-active-indicator-size);
+    background-color: var(--md-comp-loading-indicator-active-indicator-color);
+    clip-path: _petal-shape(0, 0);
+    animation:
+      loading-indicator-morph var(--md-comp-loading-indicator-duration) ease-in-out infinite,
+      loading-indicator-spin var(--md-comp-loading-indicator-duration) linear infinite;
+  }
+
+  // Contained. M3 pairs the container with `on-secondary-container` for the
+  // indicator, not `primary` — the container is the louder surface.
+  &.contained {
+    --md-comp-loading-indicator-container-color: var(--md-sys-color-secondary-container);
+    --md-comp-loading-indicator-active-indicator-color: var(--md-sys-color-on-secondary-container);
+  }
+}
+
+@keyframes loading-indicator-morph {
+  0%,
+  100% { clip-path: _petal-shape(0, 0); }
+  20%  { clip-path: _petal-shape(4, 0.32); }
+  40%  { clip-path: _petal-shape(6, 0.26); }
+  60%  { clip-path: _petal-shape(8, 0.2); }
+  80%  { clip-path: _petal-shape(12, 0.14); }
+}
+
+@keyframes loading-indicator-spin {
+  to { transform: rotate(1turn); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading-indicator::before {
+    animation: none;
+  }
+}