@expressivecss/expressive 0.7.0 → 0.9.0

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 {
@@ -74,8 +73,7 @@
     inset-inline-end: calc((100% - var(--md-comp-badge-icon-size)) / 2);
     transform: translate(50%, -50%);
 
-    &:dir(rtl),
-    [dir="rtl"] & {
+    &:dir(rtl) {
       transform: translate(-50%, -50%);
     }
   }
@@ -83,7 +81,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 +91,6 @@ menu .badge {
   margin-inline-start: auto;
 }
 
-.sidenav summary .badge {
+:is(.sidenav, .navigation-drawer) summary .badge {
   margin-inline-start: 14px;
 }

package/src/sass/components/_banners.scss

@@ -0,0 +1,298 @@
+@use "../abstracts" as *;
+
+// Banners.
+//
+// Anatomy is the HTML. A .banner is the container. A <p> is the message. An
+// optional leading #{$icon} leads it, an optional .actions holds the buttons,
+// and an optional trailing .icon-button dismisses it. .rich adds a heading
+// above the message and takes an <img> instead of an icon.
+//
+// A banner is persistent and in flow: it stays until the user acts on it, and
+// it pushes the page down rather than covering it. That is the whole
+// difference from a snackbar, which is transient, floats over the page and
+// dismisses itself. Nothing here is scripted - dismissing a banner is removing
+// it, which is the page's business, not the framework's.
+//
+// The action row is .actions and never a <nav> (SEMANTICS rule 4): these are
+// commands, not destinations. No composite role is declared, so none is
+// withheld. And a .banner is not `role="banner"` - that landmark is the page
+// header, and semantics.json blocks the confusion in both spellings.
+//
+// Tokens follow M3 Expressive, md.comp.banners.* (DSP 34.0.21), which is three
+// families: `banners` for the colours both variants share, `banners.basic` and
+// `banners.rich` for their geometry.
+//
+//   standard     surface-container container, on-surface text and icon
+//   vibrant      primary-container container, on-primary-container text
+//   close        primary, whichever variant it sits in
+//   basic        56dp tall, 4dp insets, 28dp corners (0 when .square)
+//                48dp icon container around a 24dp icon
+//                body-medium text, 14dp above and below
+//                actions 8dp apart with 8dp on either side of the row
+//   basic mobile 112dp tall, 8dp top inset, actions on their own line
+//   rich         28dp corners, 12dp insets, 24dp icon or an 80dp square image
+//                title body-medium at weight 500, 14dp above and below
+//                actions 12dp under the message
+//
+// Several token values go unspent, and every one of them is unspendable rather
+// than forgotten.
+//
+// Three describe something this does not draw. `basic.two-lines.*` (a 64dp
+// container with 8dp text insets) needs a line count, which CSS cannot see, so
+// the container grows past 56dp on its own instead. `basic.centered.body-text
+// .trailing-space` belongs to a centered basic variant that is not shipped. And
+// both `body-text.trailing-space: 48px` values reserve room for the close
+// button; here the button occupies that room itself, in flow in the basic row
+// and in its own grid column in the rich one, so the reserve tracks the button
+// rather than a constant.
+//
+// The rest are one gap M3 names twice, from either side, where spending both
+// would double it. `rich.leading-element.trailing-space` restates
+// `rich.icon-text-space` / `rich.image-text-space`; the *-text-space one is
+// written. `basic.actions-close-button-space` (8dp, 4dp on mobile) restates
+// `basic.actions.trailing-space` - the same two numbers - and the padding is
+// written. `rich.body-text.text-actions-space: 8px` and
+// `rich.actions.top-space: 12px` both name the gap under the message; the
+// larger is written, since actions 8dp under body text read as part of it.
+// `rich.actions.{leading,trailing,bottom}-space` and
+// `rich.leading-element.bottom-space` are all 12dp, which is the container's
+// own inset, already spent by its padding.
+//
+// One token is renamed on the way in. M3's `basic.body-text.leading-space` is
+// 0dp - the icon container carries the inset - and the 16dp / 12dp pair lives
+// under `basic.{round,square}.no-icon.body-text.leading-space`. The custom
+// property is named for the case it serves, not for the 0dp token it is not.
+.banner {
+  --md-comp-banners-color: var(--md-sys-color-surface-container);
+  --md-comp-banners-body-text-color: var(--md-sys-color-on-surface);
+  --md-comp-banners-title-text-color: var(--md-sys-color-on-surface);
+  --md-comp-banners-icon-color: var(--md-sys-color-on-surface);
+  --md-comp-banners-close-button-color: var(--md-sys-color-primary);
+
+  box-sizing: border-box;
+  color: var(--md-comp-banners-body-text-color);
+  background-color: var(--md-comp-banners-color);
+  @include typescale("body-medium");
+
+  // The close button is the one control M3 colours from the banner family
+  // rather than from its own. The action buttons are ordinary text buttons and
+  // are left alone - `primary` clears 5:1 on both container colours.
+  //
+  // The `:not()` is load-bearing, not defensive. `_icon-buttons.scss` sets this
+  // very token for the disabled state at the same (0,2,0) specificity, and
+  // banners is forwarded after it, so an unscoped override wins the tie and
+  // repaints a disabled close button at full-strength primary. Scoped, the rule
+  // simply stops matching and the disabled colour stands.
+  > .icon-button:not(:disabled, [disabled], [aria-disabled="true"], .disabled) {
+    --md-comp-icon-button-color: var(--md-comp-banners-close-button-color);
+  }
+}
+
+// The two colour variants. Standard is the default, so only vibrant is a class.
+.banner.vibrant {
+  --md-comp-banners-color: var(--md-sys-color-primary-container);
+  --md-comp-banners-body-text-color: var(--md-sys-color-on-primary-container);
+  --md-comp-banners-title-text-color: var(--md-sys-color-on-primary-container);
+  --md-comp-banners-icon-color: var(--md-sys-color-on-primary-container);
+}
+
+// Basic: one row of icon, message, actions and close. Every layout rule is
+// scoped away from .rich rather than left to the cascade, so the two variants
+// tie on specificity and neither can quietly reach into the other.
+.banner:not(.rich) {
+  --md-comp-banners-basic-height: 56px;
+  --md-comp-banners-basic-shape: 28px;
+  --md-comp-banners-basic-leading-space: 4px;
+  --md-comp-banners-basic-trailing-space: 4px;
+  --md-comp-banners-basic-top-space: 4px;
+  --md-comp-banners-basic-bottom-space: 4px;
+  --md-comp-banners-basic-icon-container-size: 48px;
+  --md-comp-banners-basic-icon-size: 24px;
+  --md-comp-banners-basic-body-text-top-space: 14px;
+  --md-comp-banners-basic-body-text-bottom-space: 14px;
+  --md-comp-banners-basic-no-icon-body-text-leading-space: 16px;
+  --md-comp-banners-basic-actions-between-space: 8px;
+  --md-comp-banners-basic-actions-leading-space: 8px;
+  --md-comp-banners-basic-actions-trailing-space: 8px;
+
+  display: flex;
+  align-items: center;
+  min-block-size: var(--md-comp-banners-basic-height);
+  padding-block: var(--md-comp-banners-basic-top-space)
+    var(--md-comp-banners-basic-bottom-space);
+  padding-inline: var(--md-comp-banners-basic-leading-space)
+    var(--md-comp-banners-basic-trailing-space);
+  border-radius: var(--md-comp-banners-basic-shape);
+
+  > #{$icon} {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--md-comp-banners-basic-icon-container-size);
+    block-size: var(--md-comp-banners-basic-icon-container-size);
+    font-size: var(--md-comp-banners-basic-icon-size);
+    line-height: var(--md-comp-banners-basic-icon-size);
+    color: var(--md-comp-banners-icon-color);
+  }
+
+  // `flex-basis: 0`, not `auto`. A wrapped flex container breaks lines on an
+  // item's *hypothetical* size - what it would be before shrinking - so a
+  // message long enough to fill the row takes a line of its own and leaves the
+  // icon stranded on the one above it. From zero it contributes nothing to that
+  // decision and grows into whatever the row has left, which is also what puts
+  // the actions hard against the trailing edge.
+  > p {
+    flex: 1 1 0;
+    min-inline-size: 0;
+    margin: 0;
+    padding-block: var(--md-comp-banners-basic-body-text-top-space)
+      var(--md-comp-banners-basic-body-text-bottom-space);
+    color: inherit;
+  }
+
+  // The message pays for its own leading inset only when nothing leads it: the
+  // icon's 48dp container already carries one.
+  > p:first-child {
+    padding-inline-start: var(--md-comp-banners-basic-no-icon-body-text-leading-space);
+  }
+
+  > .icon-button {
+    flex: 0 0 auto;
+  }
+
+  > .actions {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--md-comp-banners-basic-actions-between-space);
+    padding-inline: var(--md-comp-banners-basic-actions-leading-space)
+      var(--md-comp-banners-basic-actions-trailing-space);
+  }
+
+  // Compact: the row is too narrow to hold the actions beside the message, so
+  // they take a line of their own under it. Wrapping is switched on here and
+  // nowhere else, and `order` puts the actions after the close button, which is
+  // what makes them the only thing that can wrap.
+  @include bp-down("medium") {
+    --md-comp-banners-basic-height: 112px;
+    --md-comp-banners-basic-top-space: 8px;
+    --md-comp-banners-basic-actions-trailing-space: 4px;
+
+    flex-wrap: wrap;
+
+    > .actions {
+      order: 1;
+      flex-basis: 100%;
+      justify-content: flex-end;
+    }
+
+    // The 112dp mobile height is the two-row arrangement's, so it is owed only
+    // to a banner that has a second row. Without actions the row stays 56dp and
+    // a one-line message does not float in the middle of an empty half.
+    &:not(:has(> .actions)) {
+      --md-comp-banners-basic-height: 56px;
+    }
+  }
+}
+
+// Square corners, which M3 uses for a banner sitting flush under an app bar.
+// The message's leading inset shrinks with the corner it is clearing.
+.banner:not(.rich).square {
+  --md-comp-banners-basic-shape: 0;
+  --md-comp-banners-basic-no-icon-body-text-leading-space: 12px;
+}
+
+// Rich: a leading element beside a heading, a message and an action row. Named
+// areas rather than auto-placement, so the markup can omit any of the four and
+// order the rest however it reads best - a missing area collapses its track.
+.banner.rich {
+  --md-comp-banners-rich-shape: 28px;
+  --md-comp-banners-rich-leading-space: 12px;
+  --md-comp-banners-rich-trailing-space: 12px;
+  --md-comp-banners-rich-top-space: 12px;
+  --md-comp-banners-rich-bottom-space: 12px;
+  --md-comp-banners-rich-icon-size: 24px;
+  --md-comp-banners-rich-icon-text-space: 4px;
+  --md-comp-banners-rich-image-size: 80px;
+  --md-comp-banners-rich-image-text-space: 8px;
+  --md-comp-banners-rich-leading-element-leading-space: 4px;
+  --md-comp-banners-rich-with-image-leading-space: 20px;
+  --md-comp-banners-rich-title-text-top-space: 14px;
+  --md-comp-banners-rich-title-text-bottom-space: 14px;
+  --md-comp-banners-rich-actions-between-space: 8px;
+  --md-comp-banners-rich-actions-top-space: 12px;
+
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    "lead title   close"
+    "lead body    close"
+    "lead actions actions";
+  padding-block: var(--md-comp-banners-rich-top-space)
+    var(--md-comp-banners-rich-bottom-space);
+  padding-inline: var(--md-comp-banners-rich-leading-space)
+    var(--md-comp-banners-rich-trailing-space);
+  border-radius: var(--md-comp-banners-rich-shape);
+
+  > #{$icon} {
+    grid-area: lead;
+    align-self: start;
+    margin-inline: var(--md-comp-banners-rich-leading-element-leading-space)
+      var(--md-comp-banners-rich-icon-text-space);
+    font-size: var(--md-comp-banners-rich-icon-size);
+    inline-size: var(--md-comp-banners-rich-icon-size);
+    block-size: var(--md-comp-banners-rich-icon-size);
+    line-height: var(--md-comp-banners-rich-icon-size);
+    color: var(--md-comp-banners-icon-color);
+  }
+
+  // md.comp.banners.rich.image.shape is corner.none, so the square is square.
+  > img {
+    grid-area: lead;
+    align-self: start;
+    // The token is measured from the container edge, and the container has
+    // already spent its own leading space, so the margin is the difference.
+    margin-inline: calc(
+        var(--md-comp-banners-rich-with-image-leading-space) -
+          var(--md-comp-banners-rich-leading-space)
+      )
+      var(--md-comp-banners-rich-image-text-space);
+    inline-size: var(--md-comp-banners-rich-image-size);
+    block-size: var(--md-comp-banners-rich-image-size);
+    border-radius: 0;
+    object-fit: cover;
+  }
+
+  > :is(h1, h2, h3, h4, h5, h6) {
+    grid-area: title;
+    margin: 0;
+    padding-block: var(--md-comp-banners-rich-title-text-top-space)
+      var(--md-comp-banners-rich-title-text-bottom-space);
+    color: var(--md-comp-banners-title-text-color);
+    // md.sys.typescale.emphasized.body-medium: body-medium at weight 500. The
+    // emphasized set is not in the token layer, so the weight is written here.
+    @include typescale("body-medium");
+    font-weight: 500;
+  }
+
+  > p {
+    grid-area: body;
+    margin: 0;
+    color: inherit;
+  }
+
+  > .actions {
+    grid-area: actions;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--md-comp-banners-rich-actions-between-space);
+    margin-block-start: var(--md-comp-banners-rich-actions-top-space);
+  }
+
+  > .icon-button {
+    grid-area: close;
+    align-self: start;
+  }
+}