@expressivecss/expressive 0.14.1 → 0.16.0

package/src/sass/components/_scatter-chart.scss

@@ -0,0 +1,153 @@
+@use "../abstracts" as *;
+
+// Scatter chart. A <figure class="scatter-chart"> holds a <figcaption> and a
+// <table> of data: the first column labels each row, the second is the x
+// axis, and each further column is a series named by its header cell.
+// Without JavaScript the table shows. ScatterChart draws each row as one
+// point per series and hides the table visually, so a screen reader still
+// reads the data as a table. The plot, tooltip and legend come from chart().
+//
+// The SVG stretches to the plot (preserveAspectRatio="none"), and points are
+// round caps on zero-length lines with a non-scaling stroke, so they stay
+// round at any size.
+//
+// Modifiers: .axis labels both axes at round values with grid lines,
+// .toggle makes each legend item a button that shows or hides its series,
+// and .bubble makes the last column each row's size, drawing every point as
+// a bubble whose area follows it. The script sets each bubble's
+// --scatter-chart-size, its diameter as a share of the largest, and animates
+// it on update(), so it is registered as a number.
+//
+// Tokens:
+//   --md-comp-scatter-chart-height       240px
+//   --md-comp-scatter-chart-point-size   8px
+//   --md-comp-scatter-chart-bubble-size  48px, the largest bubble's diameter
+//   --md-comp-scatter-chart-grid-color   outline-variant
+//   --md-comp-scatter-chart-color-1..4   primary, tertiary, secondary,
+//                                        on-surface-variant
+
+@property --scatter-chart-size {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@include chart("scatter-chart");
+@include chart-axis("scatter-chart");
+
+.scatter-chart {
+  --md-comp-scatter-chart-point-size: 8px;
+  --md-comp-scatter-chart-bubble-size: 48px;
+}
+
+.scatter-chart-plot > svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.scatter-chart-points {
+  fill: none;
+  stroke: var(--scatter-chart-color);
+  stroke-width: var(--md-comp-scatter-chart-point-size);
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+// Partly transparent, so overlapping bubbles still show through.
+.scatter-chart.bubble .scatter-chart-points {
+  stroke-width: calc(var(--md-comp-scatter-chart-bubble-size) * var(--scatter-chart-size));
+  stroke-opacity: 0.7;
+}
+
+// With .bubble, room the largest bubble's radius wide around the plot, and
+// the axis labels moved out by as much, so a bubble at the end of a scale
+// spills into empty space instead of over the labels, caption or legend.
+.scatter-chart.bubble {
+  --scatter-chart-room: calc(var(--md-comp-scatter-chart-bubble-size) / 2);
+
+  > .scatter-chart-plot {
+    margin: var(--scatter-chart-room);
+  }
+
+  &.axis > .scatter-chart-plot {
+    margin-block: calc(8px + var(--scatter-chart-room)) calc(#{rem(20px)} + var(--scatter-chart-room));
+    margin-inline-start: calc(var(--md-comp-scatter-chart-axis-width) + var(--scatter-chart-room));
+  }
+
+  .scatter-chart-axis:not(.x) > li > span {
+    inset-inline-end: calc(100% + var(--scatter-chart-room));
+  }
+
+  .scatter-chart-axis.x > li > span {
+    top: calc(100% + var(--scatter-chart-room));
+  }
+}
+
+// The x scale's labels, below the plot, each with a grid line up through it
+// at --at from the left. The script mirrors --at in a right-to-left chart.
+.scatter-chart.axis > .scatter-chart-plot {
+  margin-block-end: rem(20px);
+}
+
+.scatter-chart-axis.x {
+  > li {
+    inset-inline: auto;
+    inset-block: 0;
+    left: var(--at, 0%);
+    border-block-start: 0;
+    border-inline-start: 1px solid var(--md-comp-scatter-chart-grid-color);
+  }
+
+  > li > span {
+    inset-inline: auto;
+    top: 100%;
+    left: 0;
+    width: auto;
+    padding: 4px 0 0;
+    translate: -50% 0;
+  }
+}
+
+// The highlighted point's marker, and the tooltip level with it.
+.scatter-chart-cursor {
+  inset-block: auto;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--md-sys-color-surface);
+  border-radius: 50%;
+  box-sizing: border-box;
+  background-color: var(--scatter-chart-color);
+  translate: -50% -50%;
+}
+
+// Around a bubble, the marker is the bubble's size plus its border.
+.scatter-chart.bubble .scatter-chart-cursor {
+  width: max(14px, calc(var(--md-comp-scatter-chart-bubble-size) * var(--scatter-chart-size) + 4px));
+  height: max(14px, calc(var(--md-comp-scatter-chart-bubble-size) * var(--scatter-chart-size) + 4px));
+}
+
+.scatter-chart-tooltip {
+  translate: 12px -50%;
+
+  &.end {
+    translate: calc(-100% - 12px) -50%;
+  }
+
+  // The x header names the axis, not a series, so it has no swatch.
+  > span.x::before {
+    content: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .scatter-chart-cursor {
+    forced-color-adjust: none;
+  }
+
+  .scatter-chart.bubble .scatter-chart-points {
+    stroke-opacity: 1;
+  }
+}

package/src/sass/components/_scrim.scss

@@ -1,5 +1,3 @@
-@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 -

package/src/sass/components/_scrollspy.scss

@@ -1,5 +1,3 @@
-@use "../abstracts" as *;
-
 // ScrollSpy. The section is the target of a hash link. Offset is CSS
 // (scroll-margin). Which TOC link is current is IntersectionObserver.
 //

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;
@@ -151,26 +151,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 +243,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,45 @@
 // 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));
 
   &: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 +79,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;
@@ -103,6 +109,9 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
     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) {
@@ -130,33 +139,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);
-    }
-
-    &:focus-visible {
-      outline: 3px solid var(--md-sys-color-secondary);
-      outline-offset: 2px;
-    }
+    @include header-icon-action;
   }
 
   > :is(form, nav):last-child {
@@ -187,7 +170,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,7 +23,7 @@
     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;
@@ -47,7 +45,7 @@
   }
 
   &.text {
-    --md-comp-skeleton-shape: 4px;
+    --md-comp-skeleton-shape: var(--md-sys-shape-corner-extra-small);
 
     width: 100%;
     height: 1em;

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);
@@ -124,10 +124,10 @@ $_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;
+    font-size: rem(24px);
+    width: rem(24px);
+    height: rem(24px);
+    line-height: rem(24px);
     color: var(--md-comp-snackbar-icon-color);
   }
 
@@ -158,19 +158,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 +193,19 @@ $_bar: ".snackbar";
     box-shadow: none;
 
     > #{$icon} {
-      font-size: 24px;
-      width: 24px;
-      height: 24px;
-      line-height: 24px;
+      font-size: rem(24px);
+      width: rem(24px);
+      height: rem(24px);
+      line-height: 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 +235,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 +264,9 @@ $_bar: ".snackbar";
     }
   }
 }
+
+// Transient messages are not part of the page. Important so a size or state rule that sets
+// `display` cannot bring it back; see base/_print.scss for the page itself.
+@media print {
+  #snackbar-container { display: none !important; }
+}

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;
@@ -166,10 +166,6 @@ $_stepper-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
         margin-block: 4px;
       }
 
-      &:last-child::after {
-        content: none;
-      }
-
       > .stepper-content {
         grid-column: 2;
         grid-row: 3;