@expressivecss/expressive 0.7.0-rc.0 → 0.8.0

package/src/sass/components/_navigation-rail.scss

@@ -24,7 +24,7 @@
 //
 // Nest descendants inside this block.
 
-:root {
+:root, :host {
   --md-comp-nav-rail-collapsed-width: 96px;
   --md-comp-nav-rail-expanded-width: 280px;
 }
@@ -59,7 +59,7 @@
     padding var(--md-comp-nav-rail-duration) ease;
 
   // Menu toggle.
-  > button:not(.button):first-child {
+  > button:not(.button, .icon-button):first-child {
     display: flex;
     flex: 0 0 auto;
     align-items: center;
@@ -76,14 +76,14 @@
     appearance: none;
     @include focus-visible;
 
-    > i {
+    > #{$icon} {
       font-size: var(--md-comp-nav-rail-icon-size);
       width: var(--md-comp-nav-rail-icon-size);
       height: var(--md-comp-nav-rail-icon-size);
     }
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
     }
   }
 
@@ -105,7 +105,7 @@
     background-color: var(--md-sys-color-primary-container);
     text-decoration: none;
 
-    > :not(i) {
+    > :not(#{$icon}) {
       position: absolute;
       width: 1px;
       height: 1px;
@@ -115,8 +115,8 @@
   }
 
   // Destinations.
-  > a:not(.button),
-  > button:not(.button):not(:first-child) {
+  > a:not(.button, .icon-button),
+  > button:not(.button, .icon-button):not(:first-child) {
     position: relative;
     display: flex;
     flex: 0 0 auto;
@@ -138,7 +138,7 @@
     @include typescale("label-medium");
     @include focus-visible;
 
-    > i {
+    > #{$icon} {
       display: flex;
       flex-shrink: 0;
       align-items: center;
@@ -152,15 +152,15 @@
       transition: background-color var(--md-comp-nav-rail-duration) ease;
     }
 
-    &:hover:not(.active, [aria-current]) > i {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+    &:hover:not(.active, [aria-current]) > #{$icon} {
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
     }
 
     &.active,
     &[aria-current] {
       color: var(--md-sys-color-on-surface);
 
-      > i {
+      > #{$icon} {
         background-color: var(--md-comp-nav-rail-active-indicator-color);
         color: var(--md-comp-nav-rail-active-color);
         --md-icon-fill: 1;
@@ -197,7 +197,7 @@
     min-width: 220px;
     padding-inline: 16px;
 
-    > button:not(.button):first-child {
+    > button:not(.button, .icon-button):first-child {
       justify-content: flex-start;
       width: auto;
       padding-inline: 16px;
@@ -210,7 +210,7 @@
       color: var(--md-sys-color-on-primary-container);
       background-color: var(--md-sys-color-primary-container);
 
-      > :not(i) {
+      > :not(#{$icon}) {
         position: static;
         width: auto;
         height: auto;
@@ -220,8 +220,8 @@
       }
     }
 
-    > a:not(.button),
-    > button:not(.button):not(:first-child) {
+    > a:not(.button, .icon-button),
+    > button:not(.button, .icon-button):not(:first-child) {
       flex-direction: row;
       justify-content: flex-start;
       gap: 12px;
@@ -230,16 +230,16 @@
       border-radius: var(--md-comp-nav-rail-indicator-shape);
       text-align: start;
 
-      > i {
+      > #{$icon} {
         width: var(--md-comp-nav-rail-icon-size);
         height: var(--md-comp-nav-rail-icon-size);
         border-radius: 0;
       }
 
       &:hover:not(.active, [aria-current]) {
-        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
 
-        > i {
+        > #{$icon} {
           background-color: transparent;
         }
       }
@@ -249,7 +249,7 @@
         background-color: var(--md-comp-nav-rail-active-indicator-color);
         color: var(--md-comp-nav-rail-active-color);
 
-        > i {
+        > #{$icon} {
           background-color: transparent;
           color: inherit;
         }
@@ -278,12 +278,12 @@
       content: "";
       position: fixed;
       inset: 0;
-      background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+      background-color: var(--md-comp-scrim-color);
       z-index: -1;
     }
   }
 
-  @include bp-down("small") {
+  @include bp-down("medium") {
     &.expanded:not(.modal) {
       position: fixed;
       inset: 0 auto 0 0;
@@ -294,7 +294,7 @@
         content: "";
         position: fixed;
         inset: 0;
-        background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+        background-color: var(--md-comp-scrim-color);
         z-index: -1;
       }
     }

package/src/sass/components/_page-footer.scss

@@ -3,7 +3,8 @@
 // Site footer.
 //
 // Anatomy is the HTML. A <footer> is the landmark. A heading is a column
-// title. A <nav> (or ul) is a link list. The last child <small> is the
+// title. A <nav> (or ul) is a link list; a column with no links is a
+// <section>. The last child <small> is the
 // legal bar. A footer whose only child is nav.navigation-bar is the
 // navigation bar, not this component.
 //
@@ -32,10 +33,9 @@ footer:not(:has(> .navigation-bar:only-child)) {
     margin: 0 0 8px;
     color: var(--md-sys-color-on-surface-variant);
     @include typescale("body-medium");
-    font-family: $font-stack;
   }
 
-  a:not(.button, .circle, .extra) {
+  a:not(.button, .icon-button, .circle, .extra) {
     color: var(--md-sys-color-primary);
     text-decoration: none;
     @include focus-visible;
@@ -45,7 +45,6 @@ footer:not(:has(> .navigation-bar:only-child)) {
     margin: 0 0 8px;
     color: var(--md-sys-color-on-surface);
     @include typescale("title-small");
-    font-family: $font-stack;
   }
 
   ul {
@@ -69,19 +68,19 @@ footer:not(:has(> nav:only-child)):not(:has(> .container)) {
   gap: var(--md-comp-footer-gap);
   grid-template-columns: 1fr;
 
-  @include bp-up("small") {
+  @include bp-up("medium") {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @include bp-up("large") {
+  @include bp-up("expanded") {
     grid-template-columns: repeat(4, 1fr);
   }
 
-  @include bp-up("xlarge") {
+  @include bp-up("large") {
     grid-template-columns: repeat(5, 1fr);
   }
 
-  @include bp-up("xxlarge") {
+  @include bp-up("extra-large") {
     grid-template-columns: repeat(6, 1fr);
   }
 }
@@ -91,7 +90,9 @@ footer:not(:has(> nav:only-child)) > .row {
   grid-column: 1 / -1;
 }
 
-footer:not(:has(> nav:only-child)) nav {
+// A column with no links is a <section>, not a <nav> - see rule 4. Both are
+// columns to look at.
+footer:not(:has(> nav:only-child)) :is(nav, section) {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -99,8 +100,8 @@ footer:not(:has(> nav:only-child)) nav {
   min-width: 0;
 }
 
-footer:not(:has(> nav:only-child)) nav > a:not(.button, .circle, .extra),
-footer:not(:has(> nav:only-child)) ul a:not(.button, .circle, .extra) {
+footer:not(:has(> nav:only-child)) nav > a:not(.button, .icon-button, .circle, .extra),
+footer:not(:has(> nav:only-child)) ul a:not(.button, .icon-button, .circle, .extra) {
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -109,14 +110,17 @@ footer:not(:has(> nav:only-child)) ul a:not(.button, .circle, .extra) {
   margin-inline-start: -12px;
   border-radius: 2rem;
   @include typescale("label-large");
-  font-family: $font-stack;
 
   &:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
   }
 }
 
-footer:not(:has(> nav:only-child)) > small:last-child {
+// The legal bar. `.container` is a supported columns wrapper - the rule above
+// already accounts for it - so the bar has to be found through it too, or a
+// footer written the documented way gets an unstyled copyright row.
+footer:not(:has(> nav:only-child)) > small:last-child,
+footer:not(:has(> nav:only-child)) > .container > small:last-child {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -130,9 +134,8 @@ footer:not(:has(> nav:only-child)) > small:last-child {
   border-top: 1px solid var(--md-sys-color-outline-variant);
   color: var(--md-sys-color-on-surface-variant);
   @include typescale("body-small");
-  font-family: $font-stack;
 
-  a:not(.button) {
+  a:not(.button, .icon-button) {
     color: var(--md-sys-color-primary);
   }
 }

package/src/sass/components/_pagination.scss

@@ -4,7 +4,9 @@
 // <ol> (or <ul>) of page links. The current page is aria-current="page".
 // A bare <ul class="pagination"> stays as an alias.
 //
-// .active / .disabled / .prev / .next / .pages still work.
+// .active / .disabled / .pages still work. .prev / .next are accepted but
+// inert - nothing matches them. They used to drive a 10%/80% split, which
+// .nowrap replaced with scrolling.
 // .nowrap (or the old li.pages nest) scrolls a long run instead of wrapping.
 //
 // Tokens (defaults match the original compact pager):
@@ -86,14 +88,22 @@
     @include focus-visible;
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
     }
 
-    &:has(> span) {
+    // The pressed layer is the only feedback a touch tap gets: hover never
+    // fires there and the tap highlight is suppressed above.
+    &:active {
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("pressed"), transparent);
+    }
+
+    // "Does this control carry a text label?" - the icon is a <span>, so a
+    // bare `span` here answers yes for every icon-only prev/next button.
+    &:has(> #{$icon-label}) {
       width: auto;
     }
 
-    > i {
+    > #{$icon} {
       font-size: var(--md-comp-pagination-icon-size);
       width: var(--md-comp-pagination-icon-size);
       height: var(--md-comp-pagination-icon-size);
@@ -110,7 +120,15 @@
     &:hover {
       background-color: color-mix(
         in oklab,
-        var(--md-comp-pagination-selected-on-color) 8%,
+        var(--md-comp-pagination-selected-on-color) state-opacity("hover"),
+        var(--md-comp-pagination-selected-color)
+      );
+    }
+
+    &:active {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-pagination-selected-on-color) state-opacity("pressed"),
         var(--md-comp-pagination-selected-color)
       );
     }
@@ -124,7 +142,7 @@
     cursor: default;
   }
 
-  li > span {
+  li > #{$icon-label} {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;

package/src/sass/components/_panes.scss

@@ -7,7 +7,7 @@
 //
 // Canonical Layouts:
 //   1. List-Detail (.list-detail, .panes.list-detail):
-//      - Compact (< 840px / < 601px): Single pane visible at a time.
+//      - Compact and Medium (< 840px): Single pane visible at a time.
 //      - Expanded (>= 840px): 360dp list pane + 1fr detail pane.
 //   2. Supporting Pane (.supporting-pane-layout, .panes.supporting):
 //      - 1fr primary pane + 360-400dp supporting pane (on trailing or leading side).
@@ -20,6 +20,7 @@
 //     with surface-container-low and a 24dp gap.
 //
 // Tokens follow https://m3.material.io/foundations/adaptive-design/canonical-layouts
+//   --md-comp-pane-margin                    16px Compact / 24px Medium+
 //   --md-comp-pane-gap                       24px
 //   --md-comp-pane-divider-color             outline-variant
 //   --md-comp-pane-container-color           surface
@@ -51,10 +52,25 @@
   background-color: var(--md-comp-pane-container-color);
   color: var(--md-sys-color-on-surface);
 
-  // Default (Single-Pane on compact screens < 840px / < 601px)
+  // Default: single pane on Compact and Medium windows (< 840px).
   grid-template-columns: 1fr;
   gap: 0;
 
+  // M3 layout margins are the inline space between content and the window
+  // edges. Keep the full-height pane model and inset layouts below Large.
+  @include bp-down("medium") {
+    --md-comp-pane-margin: 16px;
+    width: calc(100% - (2 * var(--md-comp-pane-margin)));
+    margin-inline: var(--md-comp-pane-margin);
+  }
+
+  @include bp-between("medium", "expanded") {
+    --md-comp-pane-margin: 24px;
+    width: calc(100% - (2 * var(--md-comp-pane-margin)));
+    margin-inline: var(--md-comp-pane-margin);
+    gap: var(--md-comp-pane-gap);
+  }
+
   // Panes in compact mode: list/primary visible by default, detail/supporting hidden
   // unless marked .active
   > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
@@ -75,7 +91,7 @@
   }
 
   // Expanded Viewports: Dual-pane side-by-side (via container query or breakpoint)
-  @media (width >= 840px) {
+  @include bp-up("expanded") {
     grid-template-columns: var(--md-comp-pane-list-width) 1fr;
     gap: 0;
 
@@ -92,6 +108,29 @@
       display: flex !important;
     }
   }
+
+  // This follows both two-pane rules so their base gap cannot cancel the M3
+  // Expanded spacer when the viewport and container queries both match.
+  @include bp-between("expanded", "large") {
+    --md-comp-pane-margin: 24px;
+    width: calc(100% - (2 * var(--md-comp-pane-margin)));
+    margin-inline: var(--md-comp-pane-margin);
+    gap: var(--md-comp-pane-gap);
+  }
+
+  @include bp-between("large", "extra-large") {
+    --md-comp-pane-margin: 24px;
+    width: calc(100% - (2 * var(--md-comp-pane-margin)));
+    margin-inline: var(--md-comp-pane-margin);
+    gap: var(--md-comp-pane-gap);
+  }
+
+  @include bp-up("extra-large") {
+    --md-comp-pane-margin: 24px;
+    width: calc(100% - (2 * var(--md-comp-pane-margin)));
+    margin-inline: var(--md-comp-pane-margin);
+    gap: var(--md-comp-pane-gap);
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -101,7 +140,7 @@
 // 1. Supporting Pane Layout
 .supporting-pane-layout,
 .panes.supporting {
-  @media (width >= 840px) {
+  @include bp-up("expanded") {
     grid-template-columns: 1fr var(--md-comp-pane-supporting-width);
   }
 
@@ -112,7 +151,7 @@
   // Leading supporting pane (.start / .left)
   &.start,
   &.left {
-    @media (width >= 840px) {
+    @include bp-up("expanded") {
       grid-template-columns: var(--md-comp-pane-supporting-width) 1fr;
     }
 
@@ -125,7 +164,7 @@
 // 2. Equal / Proportional Pane Layout
 .panes.equal,
 .pane-layout.equal {
-  @media (width >= 840px) {
+  @include bp-up("expanded") {
     grid-template-columns: 1fr 1fr;
   }
 
@@ -137,7 +176,7 @@
 // 3. Three-Pane Layout (List + Primary Focus + Supporting)
 .panes.three-pane,
 .pane-layout.three-pane {
-  @media (width >= 1200px) {
+  @include bp-up("large") {
     grid-template-columns: var(--md-comp-pane-list-width) 1fr var(--md-comp-pane-supporting-width);
   }
 
@@ -181,7 +220,7 @@
 // ---------------------------------------------------------------------------
 :is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.separated, .floating) {
   > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):not(:last-child) {
-    @media (width >= 840px) {
+    @include bp-up("expanded") {
       border-inline-end: 1px solid var(--md-comp-pane-divider-color);
     }
 
@@ -231,7 +270,9 @@
       text-overflow: ellipsis;
     }
 
-    > :is(button, a.button):has(> i:only-child) {
+    // See _dialog: `:only-child` cannot see a text-node label, so `.button`
+    // is the opt-out for an icon action that also carries one.
+    > :is(button:not(.button, .icon-button), a.button):has(> #{$icon}:only-child) {
       flex: 0 0 48px;
       box-sizing: border-box;
       width: 48px;
@@ -244,7 +285,7 @@
       color: var(--md-sys-color-on-surface-variant);
       box-shadow: none;
 
-      > i {
+      > #{$icon} {
         font-size: 24px;
         width: 24px;
         height: 24px;
@@ -252,7 +293,7 @@
       }
 
       &:hover {
-        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
       }
 
       &:focus-visible {

package/src/sass/components/{_preloader.scss → _progress.scss}

@@ -17,6 +17,9 @@
 //   --md-comp-progress-circular-size    48px
 //   --md-comp-progress-circular-thickness  4px
 
+// M3 names this component "Progress indicators", linear and circular. The
+// class is `.progress`; `.preloader` is the Materialize name for the circular
+// one and stays as an alias, as does `.progress.circular`.
 .progress,
 .preloader {
   --md-comp-progress-track: var(--md-sys-color-secondary-container);
@@ -78,8 +81,11 @@ progress.progress {
   transition: width 0.3s linear;
 }
 
-// Bare div.progress with a value token, no child.
-.progress:not(:is(progress)):not(:has(> .determinate, > .indeterminate)) {
+// Bare div.progress with a value token, no child. :not(.circular) because a
+// `<span class="progress circular">` is not a <progress>, has no determinate
+// child, and so matched this too - drawing a linear fill on top of the conic
+// circular indicator.
+.progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)) {
   &::after {
     content: "";
     position: absolute;
@@ -133,7 +139,9 @@ progress.progress:indeterminate {
 // Circular — one element
 // ---------------------------------------------------------------------------
 
-.preloader {
+// The circular indicator. `.progress.circular` is the M3-aligned name;
+// `.preloader` is the Materialize one and still works.
+:is(.preloader, .progress.circular) {
   box-sizing: border-box;
   display: inline-block;
   width: var(--md-comp-progress-circular-size);

package/src/sass/components/_scrim.scss

@@ -0,0 +1,37 @@
+@use "../abstracts" as *;
+
+// Scrim (M3 Expressive). A foundation, not a component: there is no markup an
+// author writes to get one. It is the wash a modal surface puts behind itself
+// to dim what it covers, and this is the one place its value is decided -
+// dialogs, both sheets, the navigation drawer and the modal navigation rail
+// all consume the same custom property - the sheets through the
+// `dialog::backdrop` rule they already share, so they declare nothing.
+//
+// https://m3.material.io/styles/color/roles - the `scrim` role, at 32%.
+//
+// Blur is deliberately not part of it. Only the basic dialog frosts what is
+// behind it (`--md-comp-basic-dialog-scrim-blur`); the drawer and the rail
+// slide over the page and would smear it.
+//
+// Declared on :root rather than per surface because four of the five consumers
+// paint into `::backdrop`, which has no box of its own to hang a token on -
+// only the rail uses a `::before`. `::backdrop` inherits from the element it
+// belongs to, so setting this on one `<dialog>` still dims only that one.
+//
+// Resolving the mix here narrows one thing, deliberately: `--md-sys-color-scrim`
+// is substituted at :root, so overriding *that* on a subtree no longer reaches a
+// scrim below it. Override it at the root to move every scrim, or set
+// `--md-comp-scrim-color` on a surface to move one. A scrim is painted by a
+// top-layer or fixed box covering the viewport, so it has no meaningful subtree
+// to be rethemed by in the first place.
+
+// `:host` alongside `:root` for the reason tokens/_theme.scss and
+// tokens/_state.scss carry it: a sheet loaded inside a shadow root cannot reach
+// its own host with `:root`, and the token would be undefined there - taking
+// `background-color` down with it, so the surface would show no scrim at all.
+// The rules this replaced read `--md-sys-color-scrim`, which is declared on
+// both, so :root alone would have narrowed what already worked.
+:root,
+:host {
+  --md-comp-scrim-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+}