@expressivecss/expressive 0.14.1 → 0.16.0

package/src/sass/components/_lightbox.scss

@@ -1,48 +1,54 @@
-@use "../abstracts" as *;
-
 .lightboxed {
   display: block;
   cursor: zoom-in;
   position: relative;
-  transition: opacity .4s;
+  transition: opacity var(--md-sys-motion-duration-medium4);
   backface-visibility: hidden;
   // Same 12px as .responsive-img. Exclude .circle so a disc stays a disc.
   &:not(.circle) {
-    border-radius: 12px;
+    border-radius: var(--md-sys-shape-corner-medium);
   }
 
-  &:hover {
-    &:not(.active) {
-      opacity: .8;
-    }
+  &:hover:not(.active) {
+    opacity: 0.8;
   }
   &.active {
     cursor: zoom-out;
   }
 }
 
+// Open, the overlay, the image and the caption are manual popovers in the
+// top layer. These undo the UA popover box: its centring inset, fit-content
+// size, border, padding and Canvas fill. On the image they lose to any
+// author rule.
+:where(.lightboxed[popover]) {
+  border: none;
+  padding: 0;
+  background: none;
+}
+
 #lightbox-overlay {
-  position:fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: var(--md-sys-color-background);
-  z-index: 1000;
+  position: fixed;
+  inset: 0;
+  width: auto;
+  height: auto;
+  border: none;
+  background-color: var(--md-sys-color-surface);
   will-change: opacity;
 }
 
 .lightbox-caption {
   position: fixed;
   display: none;
-  color: var(--md-sys-color-on-background);
+  color: var(--md-sys-color-on-surface);
   line-height: 50px;
-  bottom: 0;
-  left: 0;
+  inset: auto auto 0 0;
+  margin: 0;
+  border: none;
+  background: none;
   width: 100%;
   text-align: center;
-  padding: 0% 15%;
+  padding: 0 15%;
   height: 50px;
-  z-index: 1000;
   -webkit-font-smoothing: antialiased;
 }

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

@@ -12,18 +12,23 @@
 // and the tooltip are HTML positioned in percentages for the same reason.
 //
 // Modifiers: .area fills under each line, .stacked stacks each series on
-// the ones before it and fills between them, .fade fades the line ends,
-// .sparkline is a small chart with no axis, grid, legend or tooltip.
+// the ones before it and fills between them, .points marks each value with
+// a dot, .straight draws straight lines between values, .fade fades the
+// line ends, .axis labels the y axis at round values with a grid line at
+// each, .sparkline is a small chart with no axis, grid, legend or tooltip,
+// and .toggle makes each legend item a button that shows or hides its series.
 // A series header cell's classes reach its line: <th class="dashed">.
 //
 // Tokens:
 //   --md-comp-line-chart-height       240px (sparkline 48px)
 //   --md-comp-line-chart-line-width   3px (sparkline 2px)
 //   --md-comp-line-chart-grid-color   outline-variant
+//   --md-comp-line-chart-axis-width   48px, room for the .axis labels
 //   --md-comp-line-chart-color-1..4   primary, tertiary, secondary,
 //                                     on-surface-variant
 
 @include chart("line-chart");
+@include chart-axis("line-chart");
 
 .line-chart {
   --md-comp-line-chart-line-width: 3px;
@@ -54,6 +59,15 @@
   stroke-dasharray: 2 8;
 }
 
+// Round caps on zero-length lines: dots that keep their size at any scale.
+.line-chart-points {
+  fill: none;
+  stroke: var(--line-chart-color);
+  stroke-width: calc(var(--md-comp-line-chart-line-width) * 3);
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
 .line-chart-area {
   display: none;
 

package/src/sass/components/_list.scss

@@ -51,7 +51,13 @@
     border-radius: var(--md-comp-list-item-shape);
     background-color: var(--md-comp-list-item-container-color);
     color: inherit;
-    transition: background-color 0.2s ease-out;
+    transition: background-color var(--md-sys-motion-duration-short4) ease-out;
+  }
+
+  // A checkbox draws its check on its label, from the label's inline start.
+  // When the label is the row, that edge is the row's padding away from the box.
+  > li > label:only-child {
+    --checkbox-mark-inset: var(--md-comp-list-item-padding);
   }
 
   // The row grid lives on the item, or on a wrapping <a>/<label>.
@@ -60,14 +66,19 @@
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     grid-template-rows: auto auto;
+    // Centred as a block, so an empty second row does not stretch and lift a
+    // single line of text above the leading element.
+    align-content: center;
     align-items: center;
-    column-gap: var(--md-comp-list-gap);
+    // Row gap zero as well: a checkbox or radio label brings a 12px gap that
+    // would open between the text and its empty second row.
+    gap: 0 var(--md-comp-list-gap);
     box-sizing: border-box;
     min-height: var(--md-comp-list-item-height);
     padding: 8px var(--md-comp-list-item-padding);
     @include typescale("body-large");
 
-    > :is(#{$icon}, img, input):first-child {
+    > :is(#{$icon}, img, input, .drag-handle):first-child {
       grid-column: 1;
       grid-row: 1 / -1;
       align-self: center;
@@ -85,7 +96,7 @@
       width: var(--md-comp-list-image-size);
       height: var(--md-comp-list-image-size);
       object-fit: cover;
-      border-radius: 8px;
+      border-radius: var(--md-sys-shape-corner-small);
     }
 
     > :is(img, #{$icon}).circle {
@@ -99,7 +110,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      font-size: 20px;
+      font-size: rem(20px);
       line-height: 1;
       background-color: var(--md-sys-color-primary-container);
       color: var(--md-sys-color-on-primary-container);
@@ -108,8 +119,11 @@
     // $icon-label, not a bare `span`: the canonical icon is a <span> too, so
     // this rule used to pull the leading icon out of column 1 and into the
     // text column - the icon rules above went dead and this one over-matched.
-    > div:not(.meta),
-    > #{$icon-label} {
+    // A trailing span.badge or span.meta is not a label either: this rule
+    // outranks the trailing one, so it took column 2 and pushed a bare-text
+    // label past it into column 3.
+    > div:not(.meta, .swipe-actions),
+    > #{$icon-label}:not(.drag-handle, .sortable-actions, .swipe-actions, .badge, .meta) {
       grid-column: 2;
       min-width: 0;
     }
@@ -123,7 +137,7 @@
       @include typescale("body-medium");
     }
 
-    > :is(#{$icon}, kbd, button, time, .meta, .badge, .button, a):last-child:not(:first-child) {
+    > :is(#{$icon}, kbd, button, time, .meta, .badge, .button, a, .sortable-actions):last-child:not(:first-child) {
       grid-column: 3;
       grid-row: 1 / -1;
       justify-self: end;
@@ -182,11 +196,7 @@
   }
 
   > li:not(.active):not([aria-selected="true"]):not([aria-current]):not(:has(> [aria-current])):not(:has([aria-selected="true"])):not(:has(:checked)):hover {
-    background-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-surface) state-opacity("hover"),
-      var(--md-comp-list-item-container-color)
-    );
+    background-color: state-layer(var(--md-sys-color-on-surface), "hover", var(--md-comp-list-item-container-color));
   }
 
   > li.active,
@@ -197,6 +207,7 @@
   > li:has(:checked) {
     background-color: var(--md-comp-list-selected-container-color);
     color: var(--md-comp-list-selected-color);
+    @include forced-colors-selected;
 
     #{$icon},
     p,
@@ -247,10 +258,44 @@
       var(--md-sys-color-on-surface) 8%,
       var(--md-sys-color-surface)
     );
-    --md-comp-list-item-shape: 20px;
+    --md-comp-list-item-shape: var(--md-sys-shape-corner-large-increased);
 
     display: flex;
     flex-direction: column;
     gap: var(--md-comp-list-segmented-gap);
   }
 }
+
+// Sortable. The Sortable behavior moves `.sortable > li` rows by their
+// `.drag-handle` or their `[data-move]` buttons. The handle takes the drag
+// gesture away from scrolling, and the row being dragged lifts.
+.sortable > li {
+  .drag-handle {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  &.dragged {
+    position: relative;
+    z-index: 1;
+    background-color: var(--md-sys-color-surface-container-highest);
+    @include z-depth("2");
+
+    .drag-handle {
+      cursor: grabbing;
+    }
+  }
+
+  // The handle is taller than a line of text, so a one-line title spans both
+  // grid rows and centers on it instead of riding the top.
+  > :not(.drag-handle, .sortable-actions, p):nth-child(2):nth-last-child(2) {
+    grid-row: 1 / -1;
+    align-self: center;
+  }
+
+  // The Move up / Move down pair takes the row's trailing slot as one group.
+  > .sortable-actions {
+    display: inline-flex;
+    align-self: center;
+  }
+}

package/src/sass/components/_loading-indicator.scss

@@ -72,6 +72,7 @@ $_points: 24;
     width: var(--md-comp-loading-indicator-active-indicator-size);
     height: var(--md-comp-loading-indicator-active-indicator-size);
     background-color: var(--md-comp-loading-indicator-active-indicator-color);
+    @include forced-colors-fill;
     clip-path: _petal-shape(0, 0);
     animation:
       loading-indicator-morph var(--md-comp-loading-indicator-duration) ease-in-out infinite,

package/src/sass/components/_loading-overlay.scss

@@ -0,0 +1,105 @@
+@use "../abstracts" as *;
+
+// Loading overlay. While the page marks the region `aria-busy="true"`, a
+// scrim covers it and the author's loading indicator, a direct child, shows
+// in its centre. The script makes the region inert while it is busy and
+// announces the start and the finish in a `.loading-overlay-status` region it
+// adds after it.
+//
+//   <div class="loading-overlay">
+//     <span class="loading-indicator contained" role="status" aria-label="Loading"></span>
+//     ...content
+//   </div>
+//
+// The scrim is a surface wash, not the 32% modal scrim: it dims part of a
+// page the way disabled content looks instead of darkening it. It scrolls
+// with the content of a region that scrolls itself, so put the overlay on a
+// wrapper around a scroller.
+//
+// Tokens:
+//   --md-comp-loading-overlay-scrim-color     surface at 70%
+//   --md-comp-loading-overlay-motion          default effects spring, for the fade
+//   --md-comp-loading-overlay-motion-duration its duration
+
+.loading-overlay {
+  --md-comp-loading-overlay-scrim-color: color-mix(in oklab, var(--md-sys-color-surface) 70%, transparent);
+  --md-comp-loading-overlay-motion: var(--md-sys-motion-spring-default-effects);
+  --md-comp-loading-overlay-motion-duration: var(--md-sys-motion-spring-default-effects-duration);
+
+  &::after,
+  > .loading-indicator {
+    position: absolute;
+    // The script's inert blocks input while busy; these must not catch a
+    // click while they fade out after the region clears.
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    // Hidden only once it has faded out.
+    transition:
+      opacity var(--md-comp-loading-overlay-motion-duration) var(--md-comp-loading-overlay-motion),
+      visibility 0s linear var(--md-comp-loading-overlay-motion-duration);
+  }
+
+  // Above the highest z-index any component sets inside itself (4, the
+  // carousel's), so card state layers and sticky table columns are dimmed too.
+  &::after {
+    content: "";
+    inset: 0;
+    z-index: 5;
+    border-radius: inherit;
+    background-color: var(--md-comp-loading-overlay-scrim-color);
+  }
+
+  > .loading-indicator {
+    inset: 0;
+    z-index: 6;
+    margin: auto;
+
+    &::before {
+      animation-play-state: paused;
+    }
+  }
+
+  // Keeps the scrim's stacking inside the region, so it never covers the page
+  // around it. Only while busy: at rest, a popup inside the region, such as a
+  // docked date picker, has to rise over the page, as `.field` lets it.
+  &[aria-busy="true"] {
+    isolation: isolate;
+  }
+
+  &[aria-busy="true"]::after,
+  &[aria-busy="true"] > .loading-indicator {
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 0s;
+  }
+
+  &[aria-busy="true"] > .loading-indicator::before {
+    animation-play-state: running;
+  }
+}
+
+// Zero specificity, so a positioning utility on the region wins.
+:where(.loading-overlay) {
+  position: relative;
+}
+
+.loading-overlay-status {
+  @include visually-hidden;
+}
+
+// Forced colors drop a translucent background, which would leave the content
+// looking available. A Canvas wash keeps it dimmed under any system theme.
+@media (forced-colors: active) {
+  .loading-overlay::after {
+    forced-color-adjust: none;
+    background-color: color-mix(in oklab, Canvas 70%, transparent);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading-overlay::after,
+  .loading-overlay > .loading-indicator {
+    transition: none;
+  }
+}

package/src/sass/components/_map.scss

@@ -1,4 +1,3 @@
-@use "sass:map";
 @use "../abstracts" as *;
 
 // Map. A MapLibre map in a .map frame. The page loads maplibre-gl.css; these
@@ -34,7 +33,7 @@
 
 .map {
   --md-comp-map-height: 400px;
-  --md-comp-map-shape: 16px;
+  --md-comp-map-shape: var(--md-sys-shape-corner-large);
   --md-comp-map-marker-color: var(--md-sys-color-primary);
   --md-comp-map-marker-ring-color: var(--md-sys-color-surface);
   --md-comp-map-route-color: var(--md-sys-color-primary);
@@ -80,12 +79,32 @@
     border-radius: 50%;
     background-color: var(--md-comp-map-marker-color);
     @include z-depth(1);
+
+    // The dot is 16dp, under the 24dp minimum target. A 48dp round hit area
+    // around it takes the tap, and the map pans everywhere else.
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -16px;
+      border-radius: 50%;
+    }
+  }
+
+  // A draggable marker a tap picked up, waiting for the tap that drops it.
+  &[aria-pressed="true"] {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 4px;
+    scale: 1.25;
+
+    @media (forced-colors: active) {
+      outline-color: Highlight;
+    }
   }
 
   &.location {
     --md-comp-map-marker-color: var(--md-sys-color-tertiary);
 
-    box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-comp-map-marker-color) 24%, transparent);
+    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-comp-map-marker-color) 24%, transparent);
     cursor: default;
   }
 }
@@ -94,7 +113,7 @@
   position: absolute;
   inset-block-start: calc(100% + 4px);
   padding: 2px 8px;
-  border-radius: 8px;
+  border-radius: var(--md-sys-shape-corner-small);
   background-color: var(--md-sys-color-surface-container-highest);
   color: var(--md-sys-color-on-surface);
   @include typescale("label-medium");
@@ -116,14 +135,16 @@
   .maplibregl-popup-content {
     max-inline-size: var(--md-comp-map-popup-max-width);
     padding: 12px 16px !important;
-    border-radius: 12px !important;
+    border-radius: var(--md-sys-shape-corner-medium) !important;
     background: var(--md-sys-color-surface-container-low) !important;
     color: var(--md-sys-color-on-surface);
     @include typescale("body-medium");
-    box-shadow: map.get($elevations, "2") !important;
+    @include z-depth(2, true);
 
+    // !important to beat the padding shorthand above, which MapLibre's own
+    // stylesheet forces it to carry.
     &:has(> .maplibregl-popup-close-button) {
-      padding-inline-end: 44px;
+      padding-inline-end: calc(12px + #{rem(32px)}) !important;
     }
 
     :is(h1, h2, h3, h4, h5, h6) {
@@ -142,16 +163,17 @@
   }
 
   .maplibregl-popup-close-button {
-    inset: 4px 4px auto auto !important;
-    inline-size: 32px;
-    block-size: 32px;
+    inset-block: 4px auto !important;
+    inset-inline: auto 4px !important;
+    inline-size: rem(32px);
+    block-size: rem(32px);
     border-radius: 50% !important;
     color: var(--md-sys-color-on-surface-variant);
-    font-size: 20px;
+    font-size: rem(20px);
     line-height: 1;
 
     &:hover {
-      background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
+      background-color: color-mix(in oklab, currentColor 8%, transparent) !important;
     }
 
     @include focus-visible;
@@ -172,7 +194,7 @@
 
   > .icon-button,
   > .map-control-group {
-    border-radius: 9999px;
+    border-radius: var(--md-sys-shape-corner-full);
     background-color: var(--md-sys-color-surface-container-low);
     @include z-depth(2);
   }

package/src/sass/components/_marquee.scss

@@ -1,5 +1,3 @@
-@use "../abstracts" as *;
-
 // Marquee. A strip of logos, images or text that scrolls without end:
 // <div class="marquee"> holding two identical <ul class="marquee-content">
 // groups. The second is a copy that fills the gap as the first scrolls
@@ -68,8 +66,11 @@
   list-style: none;
   animation: marquee-x var(--md-comp-marquee-duration) linear infinite;
 
+  // Its own box-sizing, not the reset's inherit, so each frame of the
+  // scroll restyles the two groups and not every item in them.
   > * {
     flex: none;
+    box-sizing: border-box;
   }
 
   .vertical > & {

package/src/sass/components/_mega-menu.scss

@@ -0,0 +1,137 @@
+@use "../abstracts" as *;
+
+// Mega menu. Site navigation whose top items open wide panels of grouped
+// links. A nav.mega-menu holds links and disclosure buttons; each button
+// names a .mega-menu-panel with popovertarget. The panel is a native
+// [popover], so the browser owns opening, light dismiss, Escape, the focus
+// order after the button and the button's expanded state. There is no
+// JavaScript and no menu role: these are links, read and tabbed in order.
+//
+// The panel sits below its button and spans the window, inset by
+// --md-comp-mega-menu-margin; its sections flow into as many columns as fit.
+//
+// Tokens:
+//   --md-comp-mega-menu-container-color   surface-container
+//   --md-comp-mega-menu-shape             16px
+//   --md-comp-mega-menu-margin            16px (panel inset from the window)
+//   --md-comp-mega-menu-column-width      200px (minimum)
+
+.mega-menu {
+  --md-comp-mega-menu-container-color: var(--md-sys-color-surface-container);
+  --md-comp-mega-menu-shape: var(--md-sys-shape-corner-large);
+  --md-comp-mega-menu-margin: 16px;
+  --md-comp-mega-menu-column-width: 200px;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+
+  // Top items: links and disclosure buttons share one look.
+  > :is(a, button) {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-block-size: 40px;
+    margin: 0;
+    padding: 0 12px;
+    border: 0;
+    border-radius: var(--md-sys-shape-corner-large-increased);
+    background: none;
+    color: var(--md-sys-color-on-surface);
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    @include typescale("label-large");
+    @include focus-visible;
+
+    &:hover {
+      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
+    }
+
+    &[aria-current="page"] {
+      background-color: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+      @include forced-colors-selected;
+    }
+  }
+
+  // A trailing chevron turns while the button's panel is open.
+  > button::after {
+    content: "";
+    inline-size: 18px;
+    block-size: 18px;
+    background-color: currentColor;
+    mask: $caret-down center / 18px no-repeat;
+    transition: transform var(--md-sys-motion-duration-short3) ease-out;
+  }
+
+  > button:has(+ .mega-menu-panel:popover-open)::after {
+    transform: rotate(180deg);
+  }
+}
+
+.mega-menu-panel {
+  box-sizing: border-box;
+  inline-size: auto;
+  max-block-size: calc(100dvh - 96px);
+  inset: auto;
+  margin: 8px var(--md-comp-mega-menu-margin, 16px);
+  padding: 24px;
+  overflow: auto;
+  border: 0;
+  border-radius: var(--md-comp-mega-menu-shape, var(--md-sys-shape-corner-large));
+  background-color: var(--md-comp-mega-menu-container-color, var(--md-sys-color-surface-container));
+  color: var(--md-sys-color-on-surface);
+  @include z-depth("2");
+
+  position-area: block-end span-all;
+  justify-self: stretch;
+
+  &:popover-open {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--md-comp-mega-menu-column-width, 200px), 1fr));
+    gap: 24px;
+  }
+
+  > section {
+    min-inline-size: 0;
+
+    > :is(h2, h3, h4) {
+      margin: 0 0 8px;
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("title-small");
+    }
+
+    > ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    a {
+      display: block;
+      padding: 8px 12px;
+      margin-inline: -12px;
+      border-radius: var(--md-sys-shape-corner-small);
+      color: var(--md-sys-color-on-surface);
+      text-decoration: none;
+      @include typescale("body-large");
+      @include focus-visible;
+
+      &:hover {
+        background-color: state-layer(var(--md-sys-color-on-surface), "hover");
+      }
+
+      > small {
+        display: block;
+        color: var(--md-sys-color-on-surface-variant);
+        @include typescale("body-small");
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid CanvasText;
+  }
+}