@expressivecss/expressive 0.15.0 → 0.16.0

package/src/sass/components/forms/_slider.scss

@@ -3,17 +3,17 @@
 // Sliders.
 //
 // Anatomy is the HTML. An <input type="range"> is the control. A wrapping
-// .slider is the host (.range and .range-field are the older names).
-// The plugin is Expressive.Slider; Expressive.Range is kept as an alias.
+// .slider is the host, or a <label> wrapping the input.
+// The plugin is Expressive.Slider.
 //
 // Variants (M3 Expressive):
 //   standard   default. Active from the start to the handle.
 //   .centered  active grows from the midpoint to the handle.
-//   dual       two inputs in one .range; active is between the handles.
+//   dual       two inputs in one .slider; active is between the handles.
 //
 // Orientation: horizontal (default) or .vertical.
 // Size on the host: default XS, .s / .small, .m / .medium, .l / .large, .xl.
-// Optional: a leading <i> (inset icon), .stops (discrete ticks), value
+// Optional: a leading icon (inset), .stops (discrete ticks), value
 // label (JS .thumb).
 //
 // Tokens follow https://m3.material.io/components/sliders/specs
@@ -32,7 +32,7 @@
 // M3 calls this component "Slider", so `.slider` is the name. It was the image
 // slideshow's host before 0.8.0. The slideshow is gone in 0.8.0, so the class
 // belongs to this component and nothing else.
-$_host: ".slider, .range, .range-field, label:has(> [type='range'])";
+$_host: ".slider, label:has(> [type='range'])";
 
 :is(#{$_host}),
 input[type="range"] {
@@ -43,7 +43,7 @@ input[type="range"] {
   --md-comp-slider-gap: 6px;
   --md-comp-slider-stop-size: 2px;
   --md-comp-slider-stop-inset: 8px;
-  --md-comp-slider-icon-size: 24px;
+  --md-comp-slider-icon-size: #{rem(24px)};
   --md-comp-slider-active-track-color: var(--md-sys-color-primary);
   --md-comp-slider-inactive-track-color: var(--md-sys-color-secondary-container);
   --md-comp-slider-handle-color: var(--md-sys-color-primary);
@@ -78,28 +78,28 @@ input[type="range"] {
 :is(#{$_host}).medium,
 :is(#{$_host}).m [type="range"],
 :is(#{$_host}).medium [type="range"] {
-  --md-comp-slider-track-height: 40px;
-  --md-comp-slider-handle-height: 52px;
+  --md-comp-slider-track-height: #{rem(40px)};
+  --md-comp-slider-handle-height: #{rem(52px)};
   --md-comp-slider-stop-inset: 12px;
-  --md-comp-slider-icon-size: 24px;
+  --md-comp-slider-icon-size: #{rem(24px)};
 }
 
 :is(#{$_host}).l,
 :is(#{$_host}).large,
 :is(#{$_host}).l [type="range"],
 :is(#{$_host}).large [type="range"] {
-  --md-comp-slider-track-height: 56px;
-  --md-comp-slider-handle-height: 68px;
+  --md-comp-slider-track-height: #{rem(56px)};
+  --md-comp-slider-handle-height: #{rem(68px)};
   --md-comp-slider-stop-inset: 16px;
-  --md-comp-slider-icon-size: 24px;
+  --md-comp-slider-icon-size: #{rem(24px)};
 }
 
 :is(#{$_host}).xl,
 :is(#{$_host}).xl [type="range"] {
-  --md-comp-slider-track-height: 96px;
-  --md-comp-slider-handle-height: 108px;
+  --md-comp-slider-track-height: #{rem(96px)};
+  --md-comp-slider-handle-height: #{rem(108px)};
   --md-comp-slider-stop-inset: 28px;
-  --md-comp-slider-icon-size: 32px;
+  --md-comp-slider-icon-size: #{rem(32px)};
 }
 
 :is(#{$_host}):dir(rtl),
@@ -198,92 +198,54 @@ $_active: var(--md-comp-slider-active-track-color);
 $_inactive: var(--md-comp-slider-inactive-track-color);
 $_active-pos: var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction));
 
-// Gap around the handle so the tracks do not run under it.
-@mixin range-track-fill {
-  background-image:
-    _stop(end),
-    linear-gradient(var(--md-comp-slider-gradient), _handle-gap($_active, $_active-pos, $_inactive));
-}
-
-@mixin range-track-fill-centered {
-  background-image:
-    _stop(start),
-    _stop(end),
-    linear-gradient(
-      var(--md-comp-slider-gradient),
-      _handle-gap($_inactive, min(50%, $_active-pos), $_active),
-      _handle-gap($_active, max(50%, $_active-pos), $_inactive)
-    );
-}
-
-@mixin range-track-fill-dual {
-  background-image:
-    _stop(start),
-    _stop(end),
-    linear-gradient(
-      var(--md-comp-slider-gradient),
-      _handle-gap($_inactive, var(--md-comp-slider-start-position, var(--md-comp-slider-start-fraction)), $_active),
-      _handle-gap($_active, var(--md-comp-slider-end-position, var(--md-comp-slider-end-fraction)), $_inactive)
-    );
-}
-
-@mixin range-track {
-  box-sizing: border-box;
-  width: 100%;
-  height: var(--md-comp-slider-track-height);
-  border: none;
-  border-radius: calc(var(--md-comp-slider-track-height) / 2);
-  background-color: transparent;
-}
-
-@mixin range-track-vertical {
-  width: var(--md-comp-slider-track-height);
-  height: 100%;
-}
-
-@mixin range-thumb {
-  appearance: none;
-  -webkit-appearance: none;
-  box-sizing: border-box;
-  border: none;
-  width: var(--md-comp-slider-handle-width);
-  height: var(--md-comp-slider-handle-height);
-  border-radius: calc(var(--md-comp-slider-handle-width) / 2);
-  background: var(--md-comp-slider-handle-color);
-  box-shadow: none;
-  cursor: grab;
-  transition: box-shadow 0.2s ease, width 0.15s ease, height 0.15s ease;
-}
-
-@mixin range-thumb-vertical {
-  width: var(--md-comp-slider-handle-height);
-  height: var(--md-comp-slider-handle-width);
-  border-radius: calc(var(--md-comp-slider-handle-width) / 2);
-}
-
 // One set of rules per engine: a browser drops a whole rule with a pseudo-element
 // it does not know, so the two cannot share a selector list.
 @each $track, $thumb in ("::-webkit-slider-runnable-track" "::-webkit-slider-thumb", "::-moz-range-track" "::-moz-range-thumb") {
   $webkit: $thumb == "::-webkit-slider-thumb";
 
   input[type="range"]#{$track} {
-    @include range-track;
-    @include range-track-fill;
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--md-comp-slider-track-height);
+    border: none;
+    border-radius: calc(var(--md-comp-slider-track-height) / 2);
+    background-color: transparent;
+    // Gap around the handle so the tracks do not run under it.
+    background-image:
+      _stop(end),
+      linear-gradient(var(--md-comp-slider-gradient), _handle-gap($_active, $_active-pos, $_inactive));
   }
 
   input[type="range"]#{$thumb} {
-    @include range-thumb;
+    appearance: none;
+    box-sizing: border-box;
+    border: none;
+    width: var(--md-comp-slider-handle-width);
+    height: var(--md-comp-slider-handle-height);
+    border-radius: calc(var(--md-comp-slider-handle-width) / 2);
+    background: var(--md-comp-slider-handle-color);
+    box-shadow: none;
+    cursor: grab;
+    transition: box-shadow var(--md-sys-motion-duration-short4) ease, width var(--md-sys-motion-duration-short3) ease, height var(--md-sys-motion-duration-short3) ease;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
     @if $webkit {
       margin-top: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
     }
   }
 
   input[type="range"]:hover:not(:disabled)#{$thumb} {
-    box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 8%, transparent);
+    box-shadow: 0 0 0 18px state-layer(var(--md-comp-slider-handle-color), "hover");
   }
 
+  // The tint alone was about 1.1:1 against the surface, so the handle also
+  // takes the shared focus ring.
   input[type="range"]:focus-visible:not(:disabled)#{$thumb} {
-    box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 10%, transparent);
+    box-shadow: 0 0 0 18px state-layer(var(--md-comp-slider-handle-color), "focus");
+    @include focus-ring;
   }
 
   input[type="range"]:active:not(:disabled)#{$thumb} {
@@ -291,16 +253,26 @@ $_active-pos: var(--md-comp-slider-active-position, var(--md-comp-slider-active-
   }
 
   :is(#{$_host}).centered [type="range"]#{$track} {
-    @include range-track-fill-centered;
+    background-image:
+      _stop(start),
+      _stop(end),
+      linear-gradient(
+        var(--md-comp-slider-gradient),
+        _handle-gap($_inactive, min(50%, $_active-pos), $_active),
+        _handle-gap($_active, max(50%, $_active-pos), $_inactive)
+      );
   }
 
   :is(#{$_host}).vertical > [type="range"]#{$track} {
-    @include range-track-vertical;
+    width: var(--md-comp-slider-track-height);
+    height: 100%;
     margin-left: calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2);
   }
 
   :is(#{$_host}).vertical > [type="range"]#{$thumb} {
-    @include range-thumb-vertical;
+    width: var(--md-comp-slider-handle-height);
+    height: var(--md-comp-slider-handle-width);
+    border-radius: calc(var(--md-comp-slider-handle-width) / 2);
     @if $webkit {
       margin-top: 0;
     }
@@ -326,7 +298,14 @@ $_active-pos: var(--md-comp-slider-active-position, var(--md-comp-slider-active-
     height: var(--md-comp-slider-track-height);
     border-radius: calc(var(--md-comp-slider-track-height) / 2);
     pointer-events: none;
-    @include range-track-fill-dual;
+    background-image:
+      _stop(start),
+      _stop(end),
+      linear-gradient(
+        var(--md-comp-slider-gradient),
+        _handle-gap($_inactive, var(--md-comp-slider-start-position, var(--md-comp-slider-start-fraction)), $_active),
+        _handle-gap($_active, var(--md-comp-slider-end-position, var(--md-comp-slider-end-fraction)), $_inactive)
+      );
   }
 
   > [type="range"]:first-of-type {
@@ -427,7 +406,7 @@ $_active-pos: var(--md-comp-slider-active-position, var(--md-comp-slider-active-
   pointer-events: none;
   background: radial-gradient(
       circle var(--md-comp-slider-stop-size) at var(--_dot) 50%,
-      var(--md-sys-color-on-primary) 99%,
+      var(--_stop, var(--md-sys-color-on-primary)) 99%,
       transparent
     )
     0 0 / var(--md-comp-slider-stop-spacing, 0px) 100% repeat-x;
@@ -465,18 +444,22 @@ input[type="range"] + .thumb {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 40px;
-  height: 40px;
+  min-width: rem(40px);
+  height: rem(40px);
   padding: 0 12px;
   border: none;
-  border-radius: 20px;
+  border-radius: var(--md-sys-shape-corner-large-increased);
   background-color: var(--md-sys-color-inverse-surface);
   color: var(--md-sys-color-inverse-on-surface);
   pointer-events: none;
   opacity: 0;
   transform: translate(-50%, calc(-100% - 4px)) scale(0.9);
   transform-origin: center bottom;
-  transition: opacity 0.15s ease, transform 0.15s ease;
+  transition: opacity var(--md-sys-motion-duration-short3) ease, transform var(--md-sys-motion-duration-short3) ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
   @include typescale("body-small");
 
   .value {
@@ -500,12 +483,21 @@ input[type="range"] + .thumb {
   }
 }
 
+// GrayText is the disabled color here, so the inactive track is CanvasText
+// and a disabled slider is GrayText throughout. The stops are a gradient,
+// which forced colors drop unless the layer opts out.
 @media (forced-colors: active) {
   :is(#{$_host}), input[type="range"] {
     --md-comp-slider-active-track-color: Highlight;
-    --md-comp-slider-inactive-track-color: GrayText;
+    --md-comp-slider-inactive-track-color: CanvasText;
     --md-comp-slider-handle-color: CanvasText;
-    --md-comp-slider-stop-color: CanvasText;
+    --md-comp-slider-stop-color: Canvas;
+  }
+
+  :is(#{$_host}):has(> [type="range"]:disabled),
+  input[type="range"]:disabled {
+    --md-comp-slider-active-track-color: GrayText;
+    --md-comp-slider-inactive-track-color: GrayText;
   }
 
   input[type="range"],
@@ -513,6 +505,11 @@ input[type="range"] + .thumb {
     forced-color-adjust: none;
   }
 
+  :is(#{$_host}).stops::after {
+    --_stop: HighlightText;
+    forced-color-adjust: none;
+  }
+
   input[type="range"]:focus-visible {
     outline: 2px solid Highlight;
     outline-offset: 4px;

package/src/sass/components/forms/_switches.scss

@@ -4,12 +4,11 @@
 //
 // Anatomy is the HTML. A <label class="switch"> wrapping
 // <input type="checkbox"> is the control. The label text is a sibling of
-// the input — no .lever required. input + .lever and input + span still
-// work (legacy).
+// the input — no .lever required.
 //
 // Tokens follow https://m3.material.io/components/switch/specs
 //   track          52×32dp, 16dp corners
-//   unselected     surface-variant + 2dp outline, 16dp handle
+//   unselected     surface-container-highest + 2dp outline, 16dp handle
 //   selected       primary track, 24dp on-primary handle
 //   state layer    40dp, 8% hover / 10% focus
 //   touch target   48dp
@@ -18,46 +17,22 @@
 
 .switch {
   --md-comp-switch-track-width: 52px;
+  // The handle slides and grows on the fast spatial spring; colors keep
+  // their short ease.
+  --md-comp-switch-motion: var(--md-sys-motion-spring-fast-spatial);
+  --md-comp-switch-motion-duration: var(--md-sys-motion-spring-fast-spatial-duration);
   --md-comp-switch-track-height: 32px;
   --md-comp-switch-handle-unselected: 16px;
   --md-comp-switch-handle-selected: 24px;
 
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  min-height: 48px;
-  margin: 0;
-  cursor: pointer;
-  user-select: none;
   -webkit-tap-highlight-color: transparent;
-  color: var(--md-sys-color-on-surface);
-  @include typescale("body-large");
-}
-
-.switch label {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  cursor: pointer;
-  user-select: none;
+  @include selection-control-label(inline-flex);
 }
 
-// Hide the native control only when a following span/lever draws the track.
-.switch [type="checkbox"]:has(+ .lever),
-.switch [type="checkbox"]:has(+ span) {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-}
-
-// Paint the switch on the checkbox when there is no lever/span.
-.switch [type="checkbox"]:not(:has(+ .lever)):not(:has(+ span)) {
+// Paint the switch on the checkbox. The class goes on the <label> that wraps
+// it; a checkbox nested deeper is an ordinary checkbox.
+.switch > [type="checkbox"] {
   appearance: none;
-  position: static;
-  opacity: 1;
-  pointer-events: auto;
   flex: 0 0 var(--md-comp-switch-track-width);
   box-sizing: border-box;
   width: var(--md-comp-switch-track-width);
@@ -65,8 +40,8 @@
   margin: 0;
   padding: 0;
   border: 2px solid var(--md-sys-color-outline);
-  border-radius: 16px;
-  background-color: var(--md-sys-color-surface-variant);
+  border-radius: var(--md-sys-shape-corner-large);
+  background-color: var(--md-sys-color-surface-container-highest);
   // Size the image to the handle. A 100% gradient keeps the circle in
   // the middle of the track, so background-position cannot put off on
   // the start and on on the end.
@@ -83,8 +58,13 @@
   // thumb on the start and it only grows.
   background-position: 6px 50%;
   cursor: pointer;
-  transition: background-color .2s ease, background-position .2s ease,
-    background-size .2s ease, border-color .2s ease, box-shadow .2s ease;
+  transition: background-color var(--md-sys-motion-duration-short4) ease,
+    background-position var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion),
+    background-size var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion), border-color var(--md-sys-motion-duration-short4) ease, box-shadow var(--md-sys-motion-duration-short4) ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 
   &:checked {
     border-color: var(--md-sys-color-primary);
@@ -103,16 +83,15 @@
   }
 
   &:hover {
-    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+    box-shadow: 0 0 0 8px state-layer(var(--md-sys-color-on-surface), "hover");
   }
 
   &:checked:hover {
-    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
+    box-shadow: 0 0 0 8px state-layer(var(--md-sys-color-primary), "hover");
   }
 
-  &:focus-visible,
-  &.tabbed:focus {
-    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
+  &:focus-visible {
+    box-shadow: 0 0 0 8px state-layer(var(--md-sys-color-primary), "focus");
     outline: none;
   }
 
@@ -123,129 +102,39 @@
   }
 }
 
-.switch:has(> [type="checkbox"]:disabled),
-.switch:has([type="checkbox"]:disabled) label {
+.switch:has(> [type="checkbox"]:disabled) {
   color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   cursor: default;
 }
 
-// Legacy: input + .lever or input + span draws the same anatomy.
-.switch [type="checkbox"] + .lever,
-.switch [type="checkbox"] + span {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  flex: 0 0 auto;
-  box-sizing: border-box;
-  width: var(--md-comp-switch-track-width);
-  height: var(--md-comp-switch-track-height);
-  margin: 0;
-  padding: 0;
-  border: 2px solid var(--md-sys-color-outline);
-  border-radius: 16px;
-  background-color: var(--md-sys-color-surface-variant);
-  vertical-align: middle;
-  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    top: 6px;
-    left: 6px;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease,
-      background-color .2s ease, transform .2s ease;
-  }
-
-  &::after {
-    background-color: var(--md-sys-color-outline);
-  }
-}
-
-.switch [type="checkbox"]:checked + .lever,
-.switch [type="checkbox"]:checked + span {
-  border-color: var(--md-sys-color-primary);
-  background-color: var(--md-sys-color-primary);
-
-  &::before,
-  &::after {
-    top: 2px;
-    left: 22px;
-    width: 24px;
-    height: 24px;
-  }
-
-  &::after {
-    background-color: var(--md-sys-color-on-primary);
-  }
-}
-
-.switch [type="checkbox"]:hover + .lever,
-.switch [type="checkbox"]:hover + span {
-  box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
-}
-
-.switch [type="checkbox"]:checked:hover + .lever,
-.switch [type="checkbox"]:checked:hover + span {
-  box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
-}
-
-.switch [type="checkbox"]:focus-visible + .lever,
-.switch [type="checkbox"].tabbed:focus + .lever,
-.switch [type="checkbox"]:focus-visible + span,
-.switch [type="checkbox"].tabbed:focus + span {
-  box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
-}
-
-.switch [type="checkbox"]:disabled + .lever,
-.switch [type="checkbox"]:disabled + span {
-  opacity: 0.38;
-  box-shadow: none;
-  cursor: default;
-}
-
-// The span holds the label text as well as the track.
-.switch [type="checkbox"] + span:not(.lever):not(:empty) {
-  width: auto;
-  min-width: var(--md-comp-switch-track-width);
-  height: auto;
-  min-height: var(--md-comp-switch-track-height);
-  padding-left: calc(var(--md-comp-switch-track-width) + 12px);
-  border: 0;
-  background-color: transparent;
-  border-radius: 0;
-
-  &::before {
-    border: 2px solid var(--md-sys-color-outline);
-    background-color: var(--md-sys-color-surface-variant);
-    box-sizing: border-box;
-    width: var(--md-comp-switch-track-width);
-    height: var(--md-comp-switch-track-height);
-    border-radius: 16px;
-    top: 0;
-    left: 0;
-  }
-
-  &::after {
-    top: 8px;
-    left: 8px;
-  }
-}
-
-.switch [type="checkbox"]:checked + span:not(.lever):not(:empty) {
-  background-color: transparent;
-  border-color: transparent;
-
-  &::before {
-    border-color: var(--md-sys-color-primary);
-    background-color: var(--md-sys-color-primary);
-  }
-
-  &::after {
-    top: 4px;
-    left: 24px;
+// Forced colors drop the gradient handle, so a switch shows only an empty
+// track whatever its state. Repaint the whole control in system colors.
+@media (forced-colors: active) {
+  .switch > [type="checkbox"] {
+    forced-color-adjust: none;
+    border-color: CanvasText;
+    background-color: Canvas;
+    background-image: radial-gradient(circle closest-side, CanvasText 100%, transparent 101%);
+
+    &:checked {
+      border-color: Highlight;
+      background-color: Highlight;
+      background-image: radial-gradient(circle closest-side, HighlightText 100%, transparent 101%);
+    }
+
+    &:disabled {
+      border-color: GrayText;
+      background-image: radial-gradient(circle closest-side, GrayText 100%, transparent 101%);
+    }
+
+    &:disabled:checked {
+      background-color: GrayText;
+      background-image: radial-gradient(circle closest-side, Canvas 100%, transparent 101%);
+    }
+
+    &:focus-visible {
+      outline: 2px solid CanvasText;
+      outline-offset: 2px;
+    }
   }
 }

package/src/sass/custom.scss

@@ -1,10 +1,19 @@
 @charset "UTF-8";
+
+// The only place cascade order is decided; expressive.scss forwards this file
+// with its defaults. See README.md for why each layer sits where it does.
+// abstracts emits no CSS and is forwarded for the Sass API. @forward cannot
+// appear inside @layer, so each layer is loaded with meta.load-css().
 @use "sass:meta";
-@forward "abstracts";
+// The destination and fieldset mixins only serve the partials that share them.
+@forward "abstracts" hide nav-destination, nav-destination-row, choice-fieldset;
 
 $components: null !default;
 $utilities: null !default;
 
+// @font-face must stay unlayered. A face declared inside @layer base can
+// lose to any unlayered consumer face, or be ignored by engines that still
+// treat layered faces as experimental.
 @include meta.load-css("base/fonts");
 
 @layer tokens, base, components, utilities;

package/src/sass/expressive.scss

@@ -1,65 +1,5 @@
 @charset "UTF-8";
 
-// ExpressiveCSS entry point.
-//
-// This is the only place cascade order is decided, so a rule's position is
-// always answerable from this file. Layers:
-//
-//   abstracts  - variables, functions, mixins. Emits nothing, so it is not a
-//                cascade layer at all; partials pull it in with
-//                `@use "../abstracts" as *;`. Forwarded below so that
-//                downstream projects consuming this file keep access to the
-//                breakpoint mixins, z-depth() and btn-*.
-//   tokens     - :root custom properties (M3 reference palette + theme).
-//   base       - normalize, element defaults, typography, grid.
-//   components - widgets.
-//   utilities  - helper classes.
-//
-// Order used to be expressed purely as @forward order, with utilities emitted
-// before components so a component rule would win at equal specificity. It is
-// now a real @layer list, which changes three things:
-//
-//   1. Utilities moved after components. Layer order beats specificity
-//      outright, so a helper class now wins over a component rule without
-//      needing to out-specify it.
-//   2. Unlayered CSS beats every layer. A consumer can override any component
-//      with a plain `.btn { ... }` - no specificity war, no load-order
-//      dependence on where the framework sits in their bundle.
-//   3. !important is NOT dropped from utilities. Layer order reverses for
-//      important declarations, so an important rule inside `utilities` would
-//      also beat a consumer's own !important - but a *normal* rule in a layer
-//      loses to any unlayered consumer rule. Since `.hide`, `.m-3` and the
-//      palette classes exist precisely to be unconditional, they keep their
-//      flags and keep winning. Dropping them would silently make `.hide` lose
-//      to any unlayered `display` the consumer had already written.
-//
-// @forward cannot appear inside @layer, so each layer is pulled in with
-// meta.load-css() instead. abstracts emits no CSS, so loading it separately
-// below duplicates nothing.
-
-@use "sass:meta";
-
-@forward "abstracts";
-
-// @font-face must stay unlayered. A face declared inside @layer base can
-// lose to any unlayered consumer face, or be ignored by engines that still
-// treat layered faces as experimental.
-@include meta.load-css("base/fonts");
-
-@layer tokens, base, components, utilities;
-
-@layer tokens {
-  @include meta.load-css("tokens");
-}
-
-@layer base {
-  @include meta.load-css("base");
-}
-
-@layer components {
-  @include meta.load-css("components");
-}
-
-@layer utilities {
-  @include meta.load-css("utilities");
-}
+// ExpressiveCSS entry point: custom.scss with every component and utility.
+// Cascade order is decided there; see README.md for the layer rules.
+@forward "custom" hide $components, $utilities;