@expressivecss/expressive 0.15.0 → 0.17.0

package/src/sass/components/_search.scss

@@ -4,7 +4,7 @@
 //
 // Anatomy is the HTML. A `<search class="search-bar">` is the bar - an
 // optional leading icon or icon button, an `<input type="search">`, and
-// optional trailing actions. `.searchbar` is the pre-1.0 alias.
+// optional trailing actions.
 //
 // `.search-view` is the surface the bar expands into, and it is two different
 // native elements because the two variants want two different behaviours:
@@ -46,17 +46,17 @@
 // a bare list interpolated into `.search-view > #{$_bar}` breaks out of its
 // context and emits a top-level rule.
 
-$_bar: ":is(.search-bar, .searchbar)";
+$_bar: ".search-bar";
 
 #{$_bar} {
   --md-comp-search-bar-container-color: var(--md-sys-color-surface-container-high);
-  --md-comp-search-bar-container-height: 56px;
-  --md-comp-search-bar-container-shape: 9999px;
+  --md-comp-search-bar-container-height: #{rem(56px)};
+  --md-comp-search-bar-container-shape: var(--md-sys-shape-corner-full);
   --md-comp-search-bar-leading-space: 16px;
   --md-comp-search-bar-trailing-space: 16px;
   --md-comp-search-bar-icon-label-space: 16px;
-  --md-comp-search-bar-icon-size: 24px;
-  --md-comp-search-bar-avatar-size: 30px;
+  --md-comp-search-bar-icon-size: #{rem(24px)};
+  --md-comp-search-bar-avatar-size: #{rem(30px)};
 
   position: relative;
   box-sizing: border-box;
@@ -102,10 +102,7 @@ $_bar: ":is(.search-bar, .searchbar)";
 
   > #{$icon} {
     flex: 0 0 auto;
-    font-size: var(--md-comp-search-bar-icon-size);
-    width: var(--md-comp-search-bar-icon-size);
-    height: var(--md-comp-search-bar-icon-size);
-    line-height: var(--md-comp-search-bar-icon-size);
+    @include icon-size(var(--md-comp-search-bar-icon-size));
     color: var(--md-sys-color-on-surface);
   }
 
@@ -151,26 +148,11 @@ $_bar: ":is(.search-bar, .searchbar)";
       appearance: none;
     }
   }
-
-  // Pre-1.0 `.searchbar` sat in a navbar beside a fixed drawer.
-  &.has-sidebar {
-    margin-inline-start: 0;
-
-    @include bp-up("expanded") {
-      // `width: auto`, because the margin sits *outside* the base bar's
-      // `width: 100%`: the two together make the bar 100% + 300px wide and
-      // push its trailing edge past the viewport, on exactly the fixed-drawer
-      // layout this rule exists to preserve. The legacy bar had no width of
-      // its own, so the margin shrank it.
-      width: auto;
-      margin-inline-start: 300px;
-    }
-  }
 }
 
 .search-view {
   --md-comp-search-view-container-color: var(--md-sys-color-surface-container-high);
-  --md-comp-search-view-container-shape: 12px;
+  --md-comp-search-view-container-shape: var(--md-sys-shape-corner-medium);
   --md-comp-search-view-header-height: 56px;
   --md-comp-search-view-divider-color: var(--md-sys-color-outline);
   --md-comp-search-view-bar-results-gap: 2px;
@@ -258,3 +240,22 @@ $_bar: ":is(.search-bar, .searchbar)";
     backdrop-filter: none;
   }
 }
+
+// The input inside clears its own focus ring, so the bar shows it.
+:is(#{$_bar}):not(.search-view *):has(input:focus-visible) {
+  @include focus-ring;
+}
+
+// Both surfaces are fills and shadows, which forced colors paint as Canvas and
+// drop. A bar inside the view is part of the view's surface.
+@media (forced-colors: active) {
+  :is(#{$_bar}):not(.search-view *),
+  .search-view {
+    outline: 1px solid CanvasText;
+  }
+
+  // The input inside clears its own focus ring.
+  :is(#{$_bar}):not(.search-view *):has(input:focus-visible) {
+    outline: 2px solid Highlight;
+  }
+}

package/src/sass/components/_show-more.scss

@@ -0,0 +1,8 @@
+@use "../abstracts" as *;
+
+// Show more. Clamped text and the <button> that shows all of it; the ShowMore
+// component hides the button with the hidden attribute while the text fits,
+// which the button's own display rule would otherwise beat.
+.show-more > button[hidden] {
+  display: none;
+}

package/src/sass/components/_side-sheet.scss

@@ -2,7 +2,7 @@
 
 // Side sheets.
 //
-// Anatomy is the HTML. A dialog.side-sheet (or .right / .left) is the
+// Anatomy is the HTML. A dialog.side-sheet is the
 // surface, docked to the trailing edge by default. showModal() is the
 // modal variant (scrim, rounded inner corners). show() is the standard
 // variant (no scrim, a divider on the inner edge, page stays interactive).
@@ -21,38 +21,52 @@
 // Standard is for large windows next to the main pane. Modal is for
 // compact/medium, or whenever the sheet should interrupt.
 
-$_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet";
+$_sheet: "dialog.side-sheet";
 
 #{$_sheet} {
   --md-comp-side-sheet-container-color: var(--md-sys-color-surface-container-low);
-  --md-comp-side-sheet-container-shape: 28px;
+  --md-comp-side-sheet-container-shape: var(--md-sys-shape-corner-extra-large);
   --md-comp-side-sheet-container-width: 400px;
   --md-comp-side-sheet-shift: 0px;
+  // Entry and drag snap-back run on the default spatial spring, which follows
+  // the motion="expressive" switch.
+  --md-comp-side-sheet-motion: var(--md-sys-motion-spring-default-spatial);
+  --md-comp-side-sheet-motion-duration: var(--md-sys-motion-spring-default-spatial-duration);
+  // A spatial spring overshoots, so the sheet runs on past its docked edge by
+  // this much, padded, and the overshoot never uncovers the page there.
+  --_bleed: 24px;
 
   box-sizing: border-box;
   position: fixed;
-  float: none !important;
   inset-block: 0;
   inset-inline-start: auto;
-  inset-inline-end: 0;
-  width: min(var(--md-comp-side-sheet-container-width), 85%);
-  max-width: var(--md-comp-side-sheet-container-width);
+  inset-inline-end: calc(-1 * var(--_bleed));
+  width: calc(min(var(--md-comp-side-sheet-container-width), 85%) + var(--_bleed));
+  max-width: calc(var(--md-comp-side-sheet-container-width) + var(--_bleed));
   height: auto;
   max-height: none;
   min-width: 0;
   min-height: 0;
   margin: 0;
   padding: 0;
+  padding-inline-end: var(--_bleed);
   border: none;
   background-color: var(--md-comp-side-sheet-container-color);
   color: var(--md-sys-color-on-surface);
   outline: none;
   translate: var(--md-comp-side-sheet-shift) 0;
-  transition: translate 280ms ease, border-radius 200ms ease;
+  transition: translate var(--md-comp-side-sheet-motion-duration) var(--md-comp-side-sheet-motion), border-radius var(--md-sys-motion-duration-short4) ease;
   @include glass(var(--md-comp-side-sheet-container-color));
 
+  // Forced colors paint the fill as Canvas and drop the shadow, so the
+  // surface would blend into the page without an edge.
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
   &:not(:modal) {
-    z-index: 1100;
+    z-index: var(--expressive-z-sheet);
     border-radius: 0;
     box-shadow: none;
     // Standard: attached to the page, inner edge is a divider.
@@ -72,11 +86,10 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
   }
 
   // Leading-edge dock.
-  &.left,
-  &.left-sheet,
   &.start {
-    inset-inline-start: 0;
+    inset-inline-start: calc(-1 * var(--_bleed));
     inset-inline-end: auto;
+    padding-inline: var(--_bleed) 0;
 
     &:not(:modal) {
       border-inline-start: 0;
@@ -92,17 +105,12 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
   }
 
   > header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    flex: 0 0 auto;
-    box-sizing: border-box;
-    min-height: 64px;
-    margin: 0;
+    @include header-bar(12px);
     padding-block: 8px;
     padding-inline: 24px 12px;
-    background: none;
-    box-shadow: none;
+    // A horizontal touch drag here dismisses the sheet; the browser would
+    // otherwise take it as a pan and cancel the pointer.
+    touch-action: pan-y;
   }
 
   > header:has(> :is(button, a):first-child) {
@@ -110,12 +118,8 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
   }
 
   > header > :is(h1, h2, h3, h4, h5, h6) {
-    flex: 1 1 auto;
-    min-width: 0;
-    margin: 0;
+    @include header-bar-headline;
     padding: 0;
-    color: var(--md-sys-color-on-surface);
-    @include typescale("title-large");
   }
 
   > header > form {
@@ -130,30 +134,7 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
   }
 
   > header :is(button, a.button) {
-    flex: 0 0 48px;
-    box-sizing: border-box;
-    width: 48px;
-    height: 48px;
-    min-width: 48px;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background-color: transparent;
-    color: var(--md-sys-color-on-surface-variant);
-    box-shadow: none;
-
-    > #{$icon} {
-      font-size: 24px;
-      width: 24px;
-      height: 24px;
-      line-height: 24px;
-    }
-
-    &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
-    }
-
-    @include focus-visible;
+    @include header-icon-action;
   }
 
   > :is(form, nav):last-child {
@@ -184,7 +165,7 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
       translate: -100% 0;
     }
 
-    &:is(.start, .left, .left-sheet) {
+    &.start {
       translate: -100% 0;
 
       &:dir(rtl) {

package/src/sass/components/_skeleton.scss

@@ -1,5 +1,3 @@
-@use "../abstracts" as *;
-
 // Skeleton. An empty block that holds the place of content still loading,
 // with a shimmer passing across it. The block has no text and nothing to
 // announce: mark the region being filled with aria-busy="true", and report
@@ -25,29 +23,36 @@
     var(--md-sys-color-surface) 50%,
     transparent
   );
-  --md-comp-skeleton-shape: 8px;
+  --md-comp-skeleton-shape: var(--md-sys-shape-corner-small);
   --md-comp-skeleton-circle-size: 40px;
 
   display: block;
+  position: relative;
+  overflow: clip;
   box-sizing: border-box;
   border-radius: var(--md-comp-skeleton-shape);
   background-color: var(--md-comp-skeleton-color);
-  background-image: linear-gradient(
-    90deg,
-    transparent 0%,
-    var(--md-comp-skeleton-shimmer-color) 50%,
-    transparent 100%
-  );
-  background-repeat: no-repeat;
-  background-size: 50% 100%;
-  animation: skeleton-shimmer 1.5s linear infinite;
+  // Transforming the gradient lets the compositor move it without repainting the fill.
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 50%;
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--md-comp-skeleton-shimmer-color) 50%,
+      transparent 100%
+    );
+    animation: skeleton-shimmer 1.5s linear infinite;
+  }
 
-  &:dir(rtl) {
+  &:dir(rtl)::before {
     animation-direction: reverse;
   }
 
   &.text {
-    --md-comp-skeleton-shape: 4px;
+    --md-comp-skeleton-shape: var(--md-sys-shape-corner-extra-small);
 
     width: 100%;
     height: 1em;
@@ -65,9 +70,11 @@
     border-radius: 50%;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-    background-image: none;
+  @media (prefers-reduced-motion: reduce), (forced-colors: active) {
+    &::before {
+      animation: none;
+      background-image: none;
+    }
   }
 
   @media (forced-colors: active) {
@@ -76,6 +83,6 @@
 }
 
 @keyframes skeleton-shimmer {
-  from { background-position: -100% 0; }
-  to { background-position: 200% 0; }
+  from { transform: translateX(-100%); }
+  to { transform: translateX(200%); }
 }

package/src/sass/components/_snackbar.scss

@@ -5,7 +5,7 @@
 // Anatomy is the HTML. A .snackbar is the container. A <p> (or <span>,
 // or loose text) is the supporting text. A trailing <button> is the
 // action; a .circle button is the optional close. An optional leading
-// <i> is an icon.
+// icon comes first.
 //
 // Tokens follow https://m3.material.io/components/snackbar/specs
 //   container    inverse-surface, 4dp corners, elevation 3, min 48dp
@@ -35,10 +35,9 @@ $_bar: ".snackbar";
   align-items: stretch;
   gap: 8px;
   position: fixed;
-  z-index: 10000;
-  inset: auto var(--md-comp-snackbar-container-margin-trailing)
-    max(var(--md-comp-snackbar-container-margin-bottom), env(safe-area-inset-bottom, 0px))
-    var(--md-comp-snackbar-container-margin-leading);
+  z-index: var(--expressive-z-snackbar);
+  inset-block: auto max(var(--md-comp-snackbar-container-margin-bottom), env(safe-area-inset-bottom, 0px));
+  inset-inline: var(--md-comp-snackbar-container-margin-leading) var(--md-comp-snackbar-container-margin-trailing);
   width: auto;
   max-width: calc(100% - var(--md-comp-snackbar-container-margin-leading) - var(--md-comp-snackbar-container-margin-trailing));
   // The page stays browsable — only the bar itself receives pointer events.
@@ -72,7 +71,7 @@ $_bar: ".snackbar";
 
 #{$_bar} {
   --md-comp-snackbar-container-color: var(--md-sys-color-inverse-surface);
-  --md-comp-snackbar-container-shape: 4px;
+  --md-comp-snackbar-container-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-snackbar-supporting-text-color: var(--md-sys-color-inverse-on-surface);
   --md-comp-snackbar-action-label-text-color: var(--md-sys-color-inverse-primary);
   --md-comp-snackbar-icon-color: var(--md-sys-color-inverse-on-surface);
@@ -91,7 +90,8 @@ $_bar: ".snackbar";
   max-width: 672px;
   min-height: 48px;
   margin: 0;
-  padding: 4px 8px 4px 16px;
+  padding-block: 4px;
+  padding-inline: 16px 8px;
   border: none;
   border-radius: var(--md-comp-snackbar-container-shape);
   background-color: var(--md-comp-snackbar-container-color);
@@ -101,6 +101,13 @@ $_bar: ".snackbar";
   cursor: default;
   @include glass(var(--md-comp-snackbar-container-color));
 
+  // Forced colors paint the fill as Canvas and drop the shadow, so the
+  // surface would blend into the page without an edge.
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
   @include bp-up("medium") {
     width: max-content;
     min-width: min(344px, 100%);
@@ -124,10 +131,7 @@ $_bar: ".snackbar";
   // Optional leading icon. M3 snackbars have no leading icon.
   > #{$icon}:first-child {
     flex: 0 0 auto;
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
+    @include icon-size(rem(24px));
     color: var(--md-comp-snackbar-icon-color);
   }
 
@@ -158,19 +162,19 @@ $_bar: ".snackbar";
     min-width: 48px;
     padding: 0 12px;
     border: none;
-    border-radius: 20px;
+    border-radius: var(--md-sys-shape-corner-large-increased);
     background-color: transparent;
     color: var(--md-comp-snackbar-action-label-text-color);
     box-shadow: none;
     @include typescale("label-large");
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-inverse-primary) state-opacity("hover"), transparent);
+      background-color: state-layer(var(--md-sys-color-inverse-primary), "hover");
     }
 
     &:active,
     &:focus {
-      background-color: color-mix(in oklab, var(--md-sys-color-inverse-primary) state-opacity("focus"), transparent);
+      background-color: state-layer(var(--md-sys-color-inverse-primary), "focus");
     }
 
     &:focus-visible {
@@ -193,19 +197,16 @@ $_bar: ".snackbar";
     box-shadow: none;
 
     > #{$icon} {
-      font-size: 24px;
-      width: 24px;
-      height: 24px;
-      line-height: 24px;
+      @include icon-size(rem(24px));
     }
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) state-opacity("hover"), transparent);
+      background-color: state-layer(var(--md-sys-color-inverse-on-surface), "hover");
     }
 
     &:active,
     &:focus {
-      background-color: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) state-opacity("focus"), transparent);
+      background-color: state-layer(var(--md-sys-color-inverse-on-surface), "focus");
     }
 
     &:focus-visible {
@@ -235,7 +236,7 @@ $_bar: ".snackbar";
 // Default: bottom of the UI, centered from the Medium breakpoint.
 #{$_bar}.active {
   position: fixed;
-  z-index: 10000;
+  z-index: var(--expressive-z-snackbar);
   left: 50%;
   right: auto;
   bottom: 24px;
@@ -264,3 +265,6 @@ $_bar: ".snackbar";
     }
   }
 }
+
+// Transient messages are not part of the page.
+#snackbar-container { @include print-hidden; }

package/src/sass/components/_split-button.scss

@@ -85,14 +85,14 @@ $_sizes: (
 
   --md-comp-split-button-leading-button-trailing-space: #{map.get($s, lead-end)};
   --md-comp-split-button-trailing-button-space: #{map.get($s, trail-space)};
-  --md-comp-split-button-trailing-icon-size: #{map.get($s, trail-icon)};
+  --md-comp-split-button-trailing-icon-size: #{rem(map.get($s, trail-icon))};
   --md-comp-split-button-inner-corner-corner-size: #{map.get($s, inner)};
   --md-comp-split-button-inner-pressed-corner-corner-size: #{map.get($s, swollen)};
 }
 
 .split-button {
   --md-comp-split-button-between-space: 2px;
-  --md-comp-split-button-container-shape: 9999px;
+  --md-comp-split-button-container-shape: var(--md-sys-shape-corner-full);
 
   @include button-size("small");
   @include _split-size("small");
@@ -128,8 +128,8 @@ $_sizes: (
     // property list replaces it wholesale, so both have to be named again or
     // an `.elevated` split button snaps its shadow where every other elevated
     // button eases it.
-    transition: border-radius .2s ease-out, background-color .2s ease-out,
-      box-shadow .2s ease-out;
+    transition: border-radius var(--md-sys-motion-duration-short4) ease-out, background-color var(--md-sys-motion-duration-short4) ease-out,
+      box-shadow var(--md-sys-motion-duration-short4) ease-out;
 
     // M3 gives hovered and pressed the same swollen corner.
     &:hover,
@@ -178,7 +178,7 @@ $_sizes: (
     }
 
     > #{$icon} {
-      transition: transform .2s ease-out;
+      transition: transform var(--md-sys-motion-duration-short4) ease-out;
     }
 
     &[aria-expanded="true"] > #{$icon} {

package/src/sass/components/_stat.scss

@@ -16,8 +16,8 @@
 
 .stats {
   --md-comp-stat-container-color: var(--md-sys-color-surface-container-low);
-  --md-comp-stat-shape: 16px;
-  --md-comp-stat-min-width: 160px;
+  --md-comp-stat-shape: var(--md-sys-shape-corner-large);
+  --md-comp-stat-min-width: #{rem(160px)};
 
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--md-comp-stat-min-width)), 1fr));
@@ -56,12 +56,7 @@
     @include typescale("label-large");
 
     &:is(.up, .down)::before {
-      content: "";
-      flex: none;
-      width: 18px;
-      height: 18px;
-      background-color: currentColor;
-      mask: $trend-arrow center / 18px no-repeat;
+      @include trend-arrow;
     }
 
     &.down::before {

package/src/sass/components/_stepper.scss

@@ -97,7 +97,7 @@ $_stepper-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
 
     > a {
       color: inherit;
-      border-radius: 4px;
+      border-radius: var(--md-sys-shape-corner-extra-small);
       text-decoration: underline;
       text-underline-offset: 2px;
       @include focus-visible;

package/src/sass/components/_swipe-actions.scss

@@ -0,0 +1,71 @@
+@use "../abstracts" as *;
+
+// Swipe actions. A touch swipe toward a row's inline start slides the row and
+// brings its `.swipe-actions` group in from the inline end. The
+// `[data-swipe-toggle]` button does the same without a swipe.
+//
+//   <ul class="list swipeable" aria-label="Inbox">
+//     <li>
+//       Label
+//       <button type="button" class="icon-button" data-swipe-toggle aria-label="Actions for Label">…</button>
+//       <span class="swipe-actions">
+//         <button type="button" class="icon-button" aria-label="Archive Label">…</button>
+//       </span>
+//     </li>
+//   </ul>
+//
+// The group waits just past the row's inline end and slides with it, so the
+// two never overlap. The script sets `--swipe-offset` on the row, adds
+// `.swiping` while a finger is down and `.swipe-open` while it is open.
+//
+// Tokens:
+//   --md-comp-swipe-actions-gap              4px  between the actions
+//   --md-comp-swipe-actions-motion           default spatial spring, for opening and closing
+//   --md-comp-swipe-actions-motion-duration  its duration
+
+.list.swipeable {
+  --md-comp-swipe-actions-gap: 4px;
+  --md-comp-swipe-actions-motion: var(--md-sys-motion-spring-default-spatial);
+  --md-comp-swipe-actions-motion-duration: var(--md-sys-motion-spring-default-spatial-duration);
+
+  // Clip, not hidden: a hidden list would scroll to an action that takes
+  // focus, and the row opening is what brings it into view.
+  overflow-x: clip;
+
+  > li:has(> .swipe-actions) {
+    position: relative;
+    translate: var(--swipe-offset, 0px) 0;
+    transition:
+      background-color var(--md-sys-motion-duration-short4) ease-out,
+      translate var(--md-comp-swipe-actions-motion-duration) var(--md-comp-swipe-actions-motion);
+
+    // The row follows the finger.
+    &.swiping {
+      transition: none;
+    }
+
+    // The toggle is the trailing action, though the group comes after it.
+    > [data-swipe-toggle] {
+      grid-column: 3;
+      grid-row: 1 / -1;
+      justify-self: end;
+      align-self: center;
+    }
+
+    > .swipe-actions {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 100%;
+      display: flex;
+      align-items: center;
+      gap: var(--md-comp-swipe-actions-gap);
+      padding-inline: var(--md-comp-swipe-actions-gap);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .list.swipeable > li:has(> .swipe-actions) {
+    transition: none;
+  }
+}

package/src/sass/components/_table_of_contents.scss

@@ -15,9 +15,7 @@
   --md-comp-toc-indicator: 2px;
   --md-comp-toc-item-height: 48px;
 
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  @include list-reset;
 
   &.fixed {
     position: fixed;