@expressivecss/expressive 0.7.0 → 0.8.0

package/src/sass/abstracts/_mixins.scss

@@ -1,14 +1,36 @@
+@use "sass:list";
+@use "sass:map";
 @use "./elevation" as *;
 @use "./variables" as *;
 
+$_state-layers: ("hover", "focus", "pressed", "dragged");
+
+/// A state layer opacity, as the percentage `color-mix()` wants.
+///
+/// The tokens hold numbers (0.08), because an overlay uses one as `opacity`
+/// directly. A tint mixed with `color-mix()` needs a percentage, so it is
+/// multiplied here rather than at forty-odd call sites.
+///
+/// Validated for the same reason `z-depth()` validates: a typo would produce a
+/// `var()` naming a token nothing declares, which invalidates the whole
+/// declaration at computed-value time - silently, and in a way nothing but the
+/// rendered page would show.
+@function state-opacity($state) {
+  @if not list.index($_state-layers, $state) {
+    @error "Unknown state layer #{$state}. Expected one of #{$_state-layers}.";
+  }
+  @return calc(var(--md-sys-state-#{$state}-state-layer-opacity) * 100%);
+}
 
-// Common-button geometry. M3 default is 40dp, label-large, 20dp corners
-// (a stadium), 24dp inset, 8dp icon gap. Variants only change color/elevation.
+
+// Common-button geometry. M3 Expressive's default size is small: 40dp,
+// label-large, corner.full, 16dp inset, 8dp icon gap. The size axis moves
+// those tokens; the style mixins only change color and elevation.
 @mixin btn(
   $height: var(--md-comp-filled-button-container-height, 40px),
-  $border-radius: var(--md-comp-filled-button-container-shape, 20px),
-  $padding-left: var(--md-comp-filled-button-leading-space, 24px),
-  $padding-right: var(--md-comp-filled-button-trailing-space, 24px),
+  $border-radius: var(--md-comp-filled-button-container-shape, 9999px),
+  $padding-left: var(--md-comp-filled-button-leading-space, 16px),
+  $padding-right: var(--md-comp-filled-button-trailing-space, 16px),
   $font-size: var(--md-sys-typescale-label-large-font-size),
 ) {
   box-sizing: border-box;
@@ -36,8 +58,8 @@
   transition: background-color .2s ease-out, box-shadow .2s ease-out;
 }
 
-// State layers are 8% hover / 10% focus+press of the on-color, mixed in oklab
-// onto the container. Filled and tonal have no elevation.
+// State layers mix the on-color into the container in oklab; the opacities come
+// from md.sys.state via `state-opacity()`. Filled and tonal have no elevation.
 
 @mixin btn-filled {
   color: var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary));
@@ -46,7 +68,7 @@
   &:hover {
     background-color: color-mix(
       in oklab,
-      var(--md-sys-color-on-primary) 8%,
+      var(--md-sys-color-on-primary) state-opacity("hover"),
       var(--md-sys-color-primary)
     );
   }
@@ -55,7 +77,7 @@
   &:focus {
     background-color: color-mix(
       in oklab,
-      var(--md-sys-color-on-primary) 10%,
+      var(--md-sys-color-on-primary) state-opacity("focus"),
       var(--md-sys-color-primary)
     );
   }
@@ -70,7 +92,7 @@
   &:hover {
     background-color: color-mix(
       in oklab,
-      var(--md-sys-color-on-secondary-container) 8%,
+      var(--md-sys-color-on-secondary-container) state-opacity("hover"),
       var(--md-sys-color-secondary-container)
     );
   }
@@ -79,7 +101,7 @@
   &:focus {
     background-color: color-mix(
       in oklab,
-      var(--md-sys-color-on-secondary-container) 10%,
+      var(--md-sys-color-on-secondary-container) state-opacity("focus"),
       var(--md-sys-color-secondary-container)
     );
   }
@@ -94,13 +116,13 @@
 
   &:hover {
     @include z-depth("2");
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-low));
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), var(--md-sys-color-surface-container-low));
   }
 
   &:active,
   &:focus {
     @include z-depth("1");
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, var(--md-sys-color-surface-container-low));
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), var(--md-sys-color-surface-container-low));
   }
 
   @include focus-visible();
@@ -109,15 +131,19 @@
 @mixin btn-outlined {
   background-color: transparent;
   color: var(--md-sys-color-primary);
-  border: 1px solid var(--md-sys-color-outline);
+  // The width is not subtracted from the inset the way `.icon-button.outlined`
+  // subtracts it: there it keeps a round control as wide as it is tall, and a
+  // common button's width is its content's. `border-box` already keeps the
+  // height right.
+  border: var(--md-comp-filled-button-outline-width, 1px) solid var(--md-sys-color-outline);
 
   &:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
   }
 
   &:active,
   &:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
   }
 
   @include focus-visible();
@@ -130,12 +156,12 @@
   border-color: transparent;
 
   &:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
   }
 
   &:active,
   &:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
   }
 
   @include focus-visible();
@@ -151,21 +177,77 @@
   cursor: default;
 }
 
+// Off the screen but not out of the document: still focusable, still read, and
+// still a form control. `display: none` and `visibility: hidden` both take the
+// element out of the tab order, which is the wrong trade for a control whose
+// label is drawn elsewhere - a hidden radio that cannot be focused has no
+// arrow-key model left.
+//
+// _chips.scss and _navigation-rail.scss each carry their own copy of this and
+// predate the mixin; fold them in when either is next touched.
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 // Focus with Keyboard
+// The ring itself, for the rare selector that cannot be written as
+// `&:focus-visible` on the focused element - a filter chip draws its ring on
+// the <label>, but the focus is on the checkbox before it.
+@mixin focus-ring {
+  outline: 3px solid var(--md-sys-color-secondary);
+  outline-offset: 2px;
+}
+
 @mixin focus-visible {
   &:focus-visible {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: 2px;
+    @include focus-ring();
   }
 }
 
 // M3 type role. Every property must name a token tokens/_reference.scss
 // actually defines — a missing var() drops the whole declaration.
 @mixin typescale($role) {
-  font-family: var(--md-sys-typescale-#{$role}-font-family-name), #{$font-stack};
+  font-family: var(--md-sys-typescale-#{$role}-font-family-name);
   font-size: var(--md-sys-typescale-#{$role}-font-size);
   font-weight: var(--md-sys-typescale-#{$role}-font-weight);
   line-height: var(--md-sys-typescale-#{$role}-line-height);
   letter-spacing: var(--md-sys-typescale-#{$role}-letter-spacing);
 }
 
+/// The state layer some controls draw as a ring rather than an overlay.
+///
+/// Checkboxes and radio buttons have no room for an overlay pseudo-element, so
+/// they grow a `box-shadow` from the control's edge out to the state layer
+/// size. `color-mix()` wants a percentage where the token is a number, hence
+/// the `* 100%`.
+@mixin state-layer-ring($outer, $inner, $color, $state) {
+  box-shadow: 0 0 0 calc((#{$outer} - #{$inner}) / 2)
+    color-mix(
+      in oklab,
+      #{$color} state-opacity($state),
+      transparent
+    );
+}
+
+/// The button size tokens for one rung of `$button-sizes`.
+///
+/// Tokens only. The type role is emitted beside the call, never from here:
+/// `:root` takes this mixin for the default size, and a typescale on :root
+/// would set the page's font.
+@mixin button-size($name) {
+  $s: map.get($button-sizes, $name);
+
+  --md-comp-filled-button-container-height: #{map.get($s, height)};
+  --md-comp-filled-button-icon-size: #{map.get($s, icon)};
+  --md-comp-filled-button-leading-space: #{map.get($s, space)};
+  --md-comp-filled-button-trailing-space: #{map.get($s, space)};
+  --md-comp-filled-button-icon-label-space: #{map.get($s, gap)};
+  --md-comp-filled-button-outline-width: #{map.get($s, outline)};
+}

package/src/sass/abstracts/_variables.scss

@@ -1,5 +1,20 @@
 @use "sass:math";
 
+// "Is this child an icon, or is it the label?" - a question several components
+// ask, and every one of them used to answer it by element: <i> was the icon,
+// <span> was the label. That broke the day the canonical icon became a <span>,
+// silently, in five selectors at once: icon+label buttons lost their leading
+// inset, icon-only toolbar actions stopped being 48dp circles and picked up the
+// text-action pill instead.
+//
+// So the answer lives in one place. `i` stays in the list for markup written
+// before 0.8.0. Interpolate it inside :is() - never as a bare comma list, which
+// breaks out of its context (see $_bar in components/_navbar).
+$icon: ":is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons)" !default;
+
+// The label beside an icon: any span that is not itself an icon.
+$icon-label: "span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)" !default;
+
 // Colors
 //
 // The 2014 Material palette ($colors + colorFunc()) is gone. It generated 532
@@ -38,7 +53,7 @@ $menu-item-height: 50px !default;
 
 // Media query ranges now live in abstracts/_breakpoints.scss, which states
 // each boundary once and emits range syntax - see the note there about why
-// the 600.99px / 992.99px / 1200.99px values are gone.
+// the old fractional max-width values are gone.
 
 // Grid
 $gutter-width: 1.5rem !default;
@@ -46,12 +61,14 @@ $element-top-margin: math.div($gutter-width, 3) !default;
 $element-bottom-margin: math.div($gutter-width * 2, 3) !default;
 
 // Typography
-$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
+// M3's typeface tokens choose Roboto by default. Noto Sans is the first
+// fallback so unsupported scripts keep a compatible visual style.
+$font-stack: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback) !default;
 $text-color: var(--md-sys-color-on-background) !default;
 
-// Base of the html font-size ladder in base/_typography.scss. Flow text is
-// derived from it, so the two cannot drift.
-$root-font-size: 14px !default;
+// Modern browsers default to 16px. M3's web conversion is SP_SIZE / 16 = rem;
+// flow text uses the same basis without overriding the user's browser setting.
+$root-font-size: 16px !default;
 
 // Flow text: font-size interpolates between these two across the viewport
 // range below. This used to be a @while loop emitting 21 media queries.
@@ -59,3 +76,31 @@ $flow-text-min: 1.2rem !default;
 $flow-text-max: 1.68rem !default;   // the old loop's ceiling: 1.2rem * (1 + .02 * 20)
 $flow-text-from: 360px !default;
 $flow-text-to: 960px !default;      // the old loop's last step: 360px + 20 * 30px
+
+// The common-button size axis, md.comp.button.{xsmall…xlarge} (DSP 34.0.21).
+//
+//   size     height  icon  space  gap  label            outline
+//   xsmall     32     20     12     8   label-large        1
+//   small      40     20     16     8   label-large        1   <- default
+//   medium     56     24     24     8   title-medium       1
+//   large      96     32     48    12   headline-small     2
+//   xlarge    136     40     64    16   headline-large     3
+//
+// `space` is both the leading and the trailing inset. Expressive dropped the
+// old "24dp, but 16dp next to an icon" asymmetry, so a button is symmetric at
+// every size, whatever is inside it. The round shape is corner.full at every
+// size, so it is declared once by the component rather than five times here.
+// `outline` is the one number the style axis reads back: M3 thickens an
+// outlined button's border with its size.
+//
+// It lives in abstracts because two components read it - `_buttons.scss` for
+// the size classes, `_button-groups.scss` to size the items of a group from
+// the group itself. A partial may not @use another partial, so a table two of
+// them share has to be here.
+$button-sizes: (
+  "xsmall": (height: 32px, icon: 20px, space: 12px, gap: 8px, outline: 1px, label: "label-large"),
+  "small": (height: 40px, icon: 20px, space: 16px, gap: 8px, outline: 1px, label: "label-large"),
+  "medium": (height: 56px, icon: 24px, space: 24px, gap: 8px, outline: 1px, label: "title-medium"),
+  "large": (height: 96px, icon: 32px, space: 48px, gap: 12px, outline: 2px, label: "headline-small"),
+  "xlarge": (height: 136px, icon: 40px, space: 64px, gap: 16px, outline: 3px, label: "headline-large"),
+);

package/src/sass/base/_global.scss

@@ -35,30 +35,13 @@ a {
 //  Blockquote
 blockquote { margin: 20px 0; padding-left: 1.5rem; border-left: 5px solid var(--md-sys-color-primary); }
 
-// Icon Styles
+// <i> as an element - italics. The icon modifiers (.left, .right, .tiny ..)
+// used to live here, keyed on `i`, which silently tied them to one element:
+// writing an icon as the canonical <span class="material-symbols"> dropped
+// them. They now hang off the icon class list in components/_icons-material-design,
+// where the size modifiers already were, so they follow the class instead.
 i {
   line-height: inherit;
-  &.left {
-    float: left;
-    margin-left: -8px;
-    // margin-right: 15px;
-  }
-  &.right {
-    float: right;
-    // margin-left: 15px;
-  }
-  &.tiny {
-    font-size: 1rem;
-  }
-  &.small {
-    font-size: 2rem;
-  }
-  &.medium {
-    font-size: 4rem;
-  }
-  &.large {
-    font-size: 6rem;
-  }
 }
 
 // Tables
@@ -113,7 +96,7 @@ td, th {
 }
 
 // Responsive Table
-@include bp-down("large") {
+@include bp-down("expanded") {
 
   table.responsive-table {
     width: 100%;
@@ -178,4 +161,3 @@ td, th {
     }
   }
 }
-

package/src/sass/base/_grid.scss

@@ -1,15 +1,16 @@
 @use "../abstracts" as *;
 
-// 12-column CSS Grid. Prefixes map onto $breakpoints; s is the mobile
-// default (no query). xxl is M3 extra-large — the class that actually
-// sees a 4K or ultrawide window, since xlarge starts at 1201px.
+// 12-column CSS Grid. The historical prefixes remain public markup, but each
+// now maps exactly to an M3 window size class: s = Compact, m = Medium,
+// l = Expanded, xl = Large, xxl = Extra-large. Compact is the default and
+// therefore needs no media query.
 $grid-columns: 12;
 $grid-prefixes: (
   "s": null,
-  "m": "small",
-  "l": "large",
-  "xl": "xlarge",
-  "xxl": "xxlarge",
+  "m": "medium",
+  "l": "expanded",
+  "xl": "large",
+  "xxl": "extra-large",
 );
 
 @mixin grid-spans($prefix) {
@@ -33,13 +34,13 @@ $grid-prefixes: (
   max-width: var(--md-comp-container-max-width);
 }
 
-@include bp-up("small") {
+@include bp-up("medium") {
   .container {
     --md-comp-container-width: 85%;
   }
 }
 
-@include bp-up("large") {
+@include bp-up("expanded") {
   .container {
     --md-comp-container-width: 70%;
   }
@@ -49,7 +50,7 @@ $grid-prefixes: (
 // max-width snapped it back to 1280. Extra-large lifts the cap to 1920
 // (binds once 75% of the viewport exceeds it, around 2560) and opens
 // the measure a little so QHD lands on that cap instead of 1792.
-@include bp-up("xxlarge") {
+@include bp-up("extra-large") {
   .container {
     --md-comp-container-width: 75%;
     --md-comp-container-max-width: 1920px;
@@ -70,10 +71,12 @@ $grid-prefixes: (
   padding: 1rem 0;
 }
 
-body {
+// `:host` because a shadow tree has no `body` to hang this on, and `.row` reads
+// it without a fallback - see adr/0002-shadow-only-stylesheet-adoption.md.
+body, :host {
   --gap-size: #{$gutter-width};
 
-  @include bp-up("xxlarge") {
+  @include bp-up("extra-large") {
     --gap-size: 2rem;
   }
 }

package/src/sass/base/_normalize.scss

@@ -26,7 +26,36 @@
 //
 // Also simplified: `font-family: monospace, monospace` was a workaround for the
 // generic-family font-size quirk, which the adjacent `font-size: 1em` already
-// handles; and abbr's doubled text-decoration dropped its non-dotted fallback.
+// handles.
+//
+// A second pass removed four more whose declarations both baseline engines now
+// supply themselves, verbatim:
+//   abbr[title] { text-decoration: underline dotted }  - already the UA value
+//   button, select { text-transform: none }            - already `none` in both
+//   fieldset { padding: .35em .75em .625em }           - restates the UA padding
+//   summary { display: list-item }                     - already list-item
+//
+// The rest of this file was measured against a bare page in both engines rather
+// than assumed, and these are the results that keep a rule here. Do not remove
+// them again without re-measuring - each one *looks* redundant and is not:
+//   b, strong { font-weight: bolder }  UA is `bold` (700). `bolder` is relative,
+//                                      so it reaches 900 inside an already-bold
+//                                      parent where the UA value would stay 700.
+//   small { font-size: 80% }           UA is `smaller`, which computes to
+//                                      13.333px against a 16px parent, not 12.8.
+//   progress { vertical-align: baseline }  UA is -3.2px, not baseline.
+//   legend { padding: 0 }              UA has padding-left: 2px.
+//   [type="search"] { ... }            UA is appearance:auto / outline-offset:0.
+//   sub, sup { ... }                   UA uses vertical-align: sub/super and no
+//                                      line-height reset; normalize's version is
+//                                      deliberately a different mechanism.
+//   code, kbd, samp, pre { font-size: 1em }  UA applies the monospace font-size
+//                                      quirk (13px Chromium, 12px Firefox).
+//   hr { box-sizing: content-box }     matches the UA, but base/_global.scss sets
+//                                      border-box globally and would override it.
+//   -webkit-appearance: button         on the [type] selectors only - a Safari
+//                                      correction, and this file's policy is to
+//                                      keep those. `button` itself was dropped.
 
 /* Document
    ========================================================================== */
@@ -87,14 +116,6 @@ pre {
 /* Text-level semantics
    ========================================================================== */
 
-/**
- * Add the correct text decoration in Chrome, Edge, Opera, and Safari.
- */
-
-abbr[title] {
-  text-decoration: underline dotted;
-}
-
 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
@@ -163,21 +184,15 @@ textarea {
   margin: 0; /* 2 */
 }
 
-/**
- * Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select {
-  text-transform: none;
-}
-
 /**
  * Correct the inability to style clickable types in iOS and Safari.
  * Kept prefixed: this is a WebKit correction, and Safari is what needs it.
+ *
+ * `button` is no longer in this list. The clickable *types* are what Safari
+ * renders unstyleable; a <button> element already renders as a button there,
+ * and normalize carried it out of caution.
  */
 
-button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
@@ -193,14 +208,6 @@ legend {
   padding: 0;
 }
 
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
 /**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
@@ -248,14 +255,3 @@ progress {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}

package/src/sass/base/_typography.scss

@@ -8,7 +8,7 @@
 //   h1 display-small     h2 headline-large    h3 headline-medium
 //   h4 headline-small    h5 title-large       h6 title-medium
 //   p  body-large        small / figcaption   body-small
-//   body                  body-medium (matches the 14px root)
+//   body                  body-medium
 //
 // Display-large / display-medium stay as utility classes — they are too
 // large for a default <h1>. Component slots (app bar, card, dialog) set
@@ -18,23 +18,10 @@ html {
   font-family: $font-stack;
   font-weight: var(--md-sys-typescale-body-medium-font-weight);
   color: $text-color;
-  font-size: $root-font-size;
-
-  // Deliberately still a two-step ladder rather than a fluid clamp(): the root
-  // font size is the basis of every rem in the sheet, so making it continuous
-  // would move every computed length at every viewport width.
-  @include bp-up("large") {
-    font-size: 14.5px;
-  }
-
-  @include bp-up("xlarge") {
-    font-size: 15px;
-  }
 }
 
 body {
   @include typescale("body-medium");
-  font-family: $font-stack;
 }
 
 h1 { @include typescale("display-small"); }
@@ -59,14 +46,12 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 
 p {
   @include typescale("body-large");
-  font-family: $font-stack;
   margin: 0 0 1em;
 }
 
 small,
 figcaption {
   @include typescale("body-small");
-  font-family: $font-stack;
 }
 
 em { font-style: italic; }
@@ -78,8 +63,9 @@ strong, b { font-weight: 500; }
 // 30px of viewport width from 360px to 960px. clamp() expresses the same line
 // as one declaration - and continuously, so the type no longer jumps.
 //
-// The whole fluid range sits below the "large" breakpoint, so 1rem is
-// $root-font-size throughout it and the conversion below is exact.
+// M3 uses the browser's 16px default as the rem conversion basis. Do not set
+// the root size here: leaving it to the browser preserves the user's preferred
+// text size while the default computation remains exact.
 $_flow-min-px: math.div($flow-text-min, 1rem) * $root-font-size;
 $_flow-max-px: math.div($flow-text-max, 1rem) * $root-font-size;
 $_flow-slope: math.div($_flow-max-px - $_flow-min-px, $flow-text-to - $flow-text-from);

package/src/sass/components/_badges.scss

@@ -38,7 +38,6 @@
   white-space: nowrap;
   @include typescale("label-small");
   line-height: var(--md-comp-badge-large-size);
-  font-family: $font-stack;
 
   // Small. No label — a 6dp dot.
   &:empty {
@@ -83,7 +82,7 @@
 
 // Trailing count in a list or drawer row stays in flow.
 .list .badge,
-.sidenav .badge,
+:is(.sidenav, .navigation-drawer) .badge,
 menu .badge {
   position: static;
   transform: none;
@@ -93,6 +92,6 @@ menu .badge {
   margin-inline-start: auto;
 }
 
-.sidenav summary .badge {
+:is(.sidenav, .navigation-drawer) summary .badge {
   margin-inline-start: 14px;
 }