@expressivecss/expressive 0.7.0-rc.0 → 0.8.0

package/src/sass/components/_icon-buttons.scss

@@ -0,0 +1,194 @@
+@use "sass:map";
+@use "../abstracts" as *;
+
+// Icon buttons.
+//
+// Its own component, not a modifier on the common button: M3 gives it nine
+// token families of its own — md.comp.icon-button.{xsmall…xlarge} for the size
+// ladder and md.comp.icon-button-{standard,filled,tonal,outlined} for the
+// colours — and neither the sizes nor the colours line up with a common
+// button's. `.icon-button` is listed in `$_not-btn` in `_buttons.scss` for
+// exactly that reason, so none of the common-button geometry reaches it.
+//
+// The 40dp `.button.circle` icon button is untouched. It stays what it always
+// was: a common button wearing a round shape.
+//
+// Hosts step aside for it. A component that styles its own child controls
+// already lets a control that styles itself opt out - that is what `.button` is
+// doing in those `:not()` lists - and `.icon-button` is now in every one of
+// them (toolbar, app bar, list row, dialog, snackbar, rail, panes, footer,
+// side sheet). `tests/icon-buttons.test.js` keeps the lists in step; the member
+// goes inside the existing `:not()` argument list, never chained after it, so
+// the host rule stays exactly as specific as it was.
+//
+// The navigation drawer is the deliberate exception. Its `$_row` geometry has
+// no opt-out for `.button` either: every row in a drawer is one shape, and
+// carving an icon button out of that is the drawer's decision to make, not
+// this component's.
+//
+// Anatomy is the HTML — one control, one icon, and the name on the control.
+// The icon is decoration (`aria-hidden`), so `aria-label` is the only name the
+// control has; `semantics.json` enforces both halves of that.
+//
+// Tokens (M3 md.comp.icon-button.*, DSP 34.0.21):
+//
+//   size     height  icon  space  narrow  wide  square  pressed  outline
+//   xsmall     32     20     6      4      10     12       8        1
+//   small      40     24     8      4      14     12       8        1  <- default
+//   medium     56     24    16     12      24     16      12        1
+//   large      96     32    32     16      48     28      16        2
+//   xlarge    136     40    48     32      72     28      16        3
+//
+// Width is not a token: it is leading + icon + trailing. That is why every
+// size's default width equals its height, and why `.narrow` / `.wide` need
+// nothing but a different inset.
+$_sizes: (
+  "xsmall": (height: 32px, icon: 20px, space: 6px, narrow: 4px, wide: 10px, square: 12px, pressed: 8px, outline: 1px),
+  "small": (height: 40px, icon: 24px, space: 8px, narrow: 4px, wide: 14px, square: 12px, pressed: 8px, outline: 1px),
+  "medium": (height: 56px, icon: 24px, space: 16px, narrow: 12px, wide: 24px, square: 16px, pressed: 12px, outline: 1px),
+  "large": (height: 96px, icon: 32px, space: 32px, narrow: 16px, wide: 48px, square: 28px, pressed: 16px, outline: 2px),
+  "xlarge": (height: 136px, icon: 40px, space: 48px, narrow: 32px, wide: 72px, square: 28px, pressed: 16px, outline: 3px),
+);
+
+@mixin _size($name) {
+  $s: map.get($_sizes, $name);
+
+  --md-comp-icon-button-container-height: #{map.get($s, height)};
+  --md-comp-icon-button-icon-size: #{map.get($s, icon)};
+  --md-comp-icon-button-leading-space: #{map.get($s, space)};
+  --md-comp-icon-button-trailing-space: #{map.get($s, space)};
+  --md-comp-icon-button-narrow-space: #{map.get($s, narrow)};
+  --md-comp-icon-button-wide-space: #{map.get($s, wide)};
+  --md-comp-icon-button-container-shape-square: #{map.get($s, square)};
+  --md-comp-icon-button-pressed-container-shape: #{map.get($s, pressed)};
+  --md-comp-icon-button-outline-width: #{map.get($s, outline)};
+}
+
+// Standard is the default style: no container, `on-surface-variant` icon. Every
+// other style is two tokens.
+.icon-button {
+  @include _size("small");
+
+  --md-comp-icon-button-color: var(--md-sys-color-on-surface-variant);
+  --md-comp-icon-button-container-color: transparent;
+  --md-comp-icon-button-container-shape: 9999px;
+
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  height: var(--md-comp-icon-button-container-height);
+  padding-block: 0;
+  padding-inline: var(--md-comp-icon-button-leading-space)
+    var(--md-comp-icon-button-trailing-space);
+  border: none;
+  border-radius: var(--md-comp-icon-button-container-shape);
+  color: var(--md-comp-icon-button-color);
+  background-color: var(--md-comp-icon-button-container-color);
+  text-decoration: none;
+  cursor: pointer;
+  outline: 0;
+  user-select: none;
+  appearance: none;
+  vertical-align: middle;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color .2s ease-out, border-radius .2s ease-out;
+
+  > #{$icon} {
+    flex: 0 0 auto;
+    font-size: var(--md-comp-icon-button-icon-size);
+    width: var(--md-comp-icon-button-icon-size);
+    height: var(--md-comp-icon-button-icon-size);
+    line-height: var(--md-comp-icon-button-icon-size);
+    color: inherit;
+    overflow: hidden;
+  }
+
+  // The state layer is the icon colour mixed into the container, whatever the
+  // style set those two to - `transparent` included, which is how a standard
+  // icon button gets a translucent tint instead of an opaque one.
+  @each $state, $selector in ("hover": "&:hover", "focus": "&:focus", "pressed": "&:active") {
+    #{$selector} {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-icon-button-color) state-opacity($state),
+        var(--md-comp-icon-button-container-color)
+      );
+    }
+  }
+
+  @include focus-visible;
+}
+
+// Styles. Each is the icon colour and the container it sits on; the state
+// layers above follow from those two.
+.icon-button.filled {
+  --md-comp-icon-button-color: var(--md-sys-color-on-primary);
+  --md-comp-icon-button-container-color: var(--md-sys-color-primary);
+}
+
+.icon-button.tonal {
+  --md-comp-icon-button-color: var(--md-sys-color-on-secondary-container);
+  --md-comp-icon-button-container-color: var(--md-sys-color-secondary-container);
+}
+
+// The outline is a border rather than an inset box-shadow so it survives
+// forced-colors mode, and the inset gives the width back — otherwise a 3dp
+// xlarge outline makes a round button 6px wider than it is tall.
+.icon-button.outlined {
+  border: var(--md-comp-icon-button-outline-width) solid var(--md-sys-color-outline-variant);
+  padding-inline: calc(var(--md-comp-icon-button-leading-space) - var(--md-comp-icon-button-outline-width))
+    calc(var(--md-comp-icon-button-trailing-space) - var(--md-comp-icon-button-outline-width));
+}
+
+// Sizes. Default is small (40dp), which is M3's default icon button.
+@each $name in ("xsmall", "medium", "large", "xlarge") {
+  .icon-button.#{$name} {
+    @include _size($name);
+  }
+}
+
+// Width axis. Narrow and wide only move the inset, so they compose with every
+// size and with the outlined padding above.
+.icon-button.narrow {
+  --md-comp-icon-button-leading-space: var(--md-comp-icon-button-narrow-space);
+  --md-comp-icon-button-trailing-space: var(--md-comp-icon-button-narrow-space);
+}
+
+.icon-button.wide {
+  --md-comp-icon-button-leading-space: var(--md-comp-icon-button-wide-space);
+  --md-comp-icon-button-trailing-space: var(--md-comp-icon-button-wide-space);
+}
+
+// Shape. Round by default, `.square` for the squared container. The pressed
+// shape is the M3 Expressive corner morph, and it has to be written after
+// `.square`: both are one class plus the root, so a tie is decided by order,
+// and a squared button pressed would otherwise keep its resting corner.
+.icon-button.square {
+  --md-comp-icon-button-container-shape: var(--md-comp-icon-button-container-shape-square);
+}
+
+.icon-button:active {
+  border-radius: var(--md-comp-icon-button-pressed-container-shape);
+}
+
+// Disabled. The icon fades to 38% on-surface; a container that exists fades to
+// 10%. Standard and outlined have none, so theirs stays transparent.
+//
+// `aria-disabled="true"` is in the list because an <a> cannot take `disabled`,
+// and it is the attribute that actually tells a screen reader. Note what CSS
+// cannot do for a link: `pointer-events: none` stops the pointer and nothing
+// else, so a disabled-looking <a href> is still reachable by Tab and still
+// navigates on Enter. Drop the `href` (or the link) rather than painting a
+// control that lies about being inert - the docs page says so too.
+.icon-button:is(:disabled, [disabled], [aria-disabled="true"], .disabled) {
+  --md-comp-icon-button-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+
+  pointer-events: none;
+  cursor: default;
+}
+
+.icon-button:is(.filled, .tonal):is(:disabled, [disabled], [aria-disabled="true"], .disabled) {
+  --md-comp-icon-button-container-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+}

package/src/sass/components/_icons-material-design.scss

@@ -12,7 +12,7 @@
 // or by setting --md-icon-font. Fill, weight, grade, and optical size
 // are axes and inherit as custom properties.
 
-:root {
+:root, :host {
   --md-icon-font-outlined: "Material Symbols Outlined";
   --md-icon-font-rounded: "Material Symbols Rounded";
   --md-icon-font-sharp: "Material Symbols Sharp";
@@ -23,9 +23,12 @@
   --md-icon-optical-size: 24;
 }
 
-[icon-style="outlined"] { --md-icon-font: var(--md-icon-font-outlined); }
-[icon-style="rounded"] { --md-icon-font: var(--md-icon-font-rounded); }
-[icon-style="sharp"] { --md-icon-font: var(--md-icon-font-sharp); }
+[icon-style="outlined"],
+:host([icon-style="outlined"]) { --md-icon-font: var(--md-icon-font-outlined); }
+[icon-style="rounded"],
+:host([icon-style="rounded"]) { --md-icon-font: var(--md-icon-font-rounded); }
+[icon-style="sharp"],
+:host([icon-style="sharp"]) { --md-icon-font: var(--md-icon-font-sharp); }
 
 $_icon: ".material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons";
 
@@ -54,6 +57,15 @@ $_icon: ".material-symbols, .material-symbols-outlined, .material-symbols-rounde
   // Nest so each class in $_icon gets the suffix. `#{$_icon}.tiny` would
   // only attach `.tiny` to the last item and leave every other icon
   // matching the bare `.material-symbols` selector — including `.large`.
+  // Float helpers, moved off the `i` element selector in base/_global so they
+  // survive the canonical <span class="material-symbols"> form.
+  &.left {
+    float: left;
+    margin-left: -8px;
+  }
+  &.right {
+    float: right;
+  }
   &.tiny {
     font-size: 1rem;
     --md-icon-optical-size: 20;

package/src/sass/components/_index.scss

@@ -1,10 +1,19 @@
 // One line per component. Order is cascade order, so keep related widgets
 // together and append new components at the end unless order matters.
 
+// Icons first: it is the base glyph default (font-size, line-height) that a
+// component's own icon rule is meant to override. `$icon` interpolates to an
+// :is() carrying classes, so a component rule ties with the base rule on
+// specificity and the winner is decided by source order alone - with icons
+// loaded 4th, `buttons`, `list` and `badges` silently lost that tie. That is
+// why a button icon rendered as an 18px box around a 24px glyph.
+@forward "icons-material-design";
 @forward "buttons";
+@forward "button-groups";
+@forward "split-button";
+@forward "icon-buttons";
 @forward "list";
 @forward "badges";
-@forward "icons-material-design";
 @forward "navbar";
 @forward "navigation-bar";
 @forward "navigation-rail";
@@ -16,23 +25,30 @@
 @forward "tooltip";
 @forward "menu";
 @forward "dialog";
+@forward "expanding-card";
 @forward "bottom-sheet";
 @forward "side-sheet";
+@forward "floating-sheet";
 @forward "chips";
 @forward "lightbox";
-@forward "parallax";
 @forward "docked-display";
 @forward "page-footer";
 @forward "forms";
 @forward "table_of_contents";
 @forward "scrollspy";
-@forward "sidenav";
-@forward "preloader";
-@forward "slider";
+@forward "navigation-drawer";
+@forward "progress";
 @forward "carousel";
-@forward "pulse";
 @forward "datepicker";
 @forward "timepicker";
 @forward "breadcrumb";
 @forward "pagination";
 @forward "panes";
+@forward "fab-menu";
+@forward "loading-indicator";
+@forward "search";
+@forward "segmented-buttons";
+@forward "banners";
+@forward "drag-handle";
+@forward "bottom-app-bar";
+@forward "scrim";

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