@expressivecss/expressive 0.15.0 → 0.17.0

package/src/sass/components/_keypad.scss

@@ -4,8 +4,10 @@
 //
 // Anatomy is the HTML. Every key is a <button type="button">. A key with a
 // `value` types that value; a key with `data-key` is a function key
-// (Backspace, Enter, Shift). `.keypad` is a three-column grid of round keys,
-// the dial pad and PIN pad. `.keyboard` is a column of rows (any <div>), each
+// (Backspace, Enter, Shift, CapsLock, Layer). A Layer key shows the
+// elements whose `data-layer` matches its `value`, such as a row of
+// symbols. `.keypad` is a three-column grid of round keys, the dial pad
+// and PIN pad. `.keyboard` is a column of rows (any <div>), each
 // row a flex line of keys. A key carrying a button style class (.filled,
 // .tonal, .outlined, .elevated, .text) keeps that style, so a call or submit
 // key is written the same way as any other button.
@@ -25,9 +27,10 @@ $_key: "button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled)";
   --md-comp-keypad-key-label-color: var(--md-sys-color-on-surface);
   --md-comp-keypad-function-key-color: var(--md-sys-color-secondary-container);
   --md-comp-keypad-function-key-label-color: var(--md-sys-color-on-secondary-container);
-  --md-comp-keypad-key-pressed-shape: 12px;
+  --md-comp-keypad-key-pressed-shape: var(--md-sys-shape-corner-medium);
   // Material's fast-spatial spring, the curve button groups press with.
-  --md-comp-keypad-motion: #{$motion-fast-spatial};
+  --md-comp-keypad-motion: var(--md-sys-motion-spring-fast-spatial);
+  --md-comp-keypad-motion-duration: var(--md-sys-motion-spring-fast-spatial-duration);
 
   touch-action: manipulation;
 
@@ -37,8 +40,8 @@ $_key: "button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled)";
     min-width: 0;
     padding: 0;
     transition:
-      border-radius 200ms var(--md-comp-keypad-motion),
-      background-color 200ms ease-out;
+      border-radius var(--md-comp-keypad-motion-duration) var(--md-comp-keypad-motion),
+      background-color var(--md-sys-motion-duration-short4) ease-out;
 
     &[data-key] {
       --_color: var(--md-comp-keypad-function-key-color);
@@ -47,13 +50,14 @@ $_key: "button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled)";
 
     // The state layer's opacity. Only the rule below reads it, so a key
     // that keeps a button style ignores it.
-    @each $state, $selector in ("hover": "&:hover", "focus": "&:focus", "pressed": "&:active") {
+    // .pressed is a hardware key held down in the field.
+    @each $state, $selector in ("hover": "&:hover", "focus": "&:focus", "pressed": "&:is(:active, .pressed)") {
       #{$selector} {
         --_state: #{state-opacity($state)};
       }
     }
 
-    &:active:not(:disabled) {
+    &:is(:active, .pressed):not(:disabled) {
       border-radius: var(--md-comp-keypad-key-pressed-shape);
     }
 
@@ -68,8 +72,8 @@ $_key: "button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled)";
     background-color: color-mix(in oklab, var(--_label) var(--_state, 0%), var(--_color));
   }
 
-  // A latched Shift reads as selected: primary, like a selected toggle.
-  [data-key="Shift"][aria-pressed="true"] {
+  // A latched Shift or Caps Lock reads as selected: primary, like a selected toggle.
+  :is([data-key="Shift"], [data-key="CapsLock"])[aria-pressed="true"] {
     --_color: var(--md-sys-color-primary);
     --_label: var(--md-sys-color-on-primary);
   }
@@ -80,7 +84,7 @@ $_key: "button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled)";
 // Keys fill their cell, so `.wide` spans two and becomes a pill: a call key
 // beside Backspace leaves no hole in the last row.
 .keypad {
-  --md-comp-keypad-key-size: 72px;
+  --md-comp-keypad-key-size: #{rem(72px)};
   --md-comp-keypad-gap: 12px;
 
   display: inline-grid;
@@ -102,7 +106,7 @@ $_key: "button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled)";
     > small {
       @include typescale("label-small");
       color: inherit;
-      opacity: .78;
+      opacity: 0.78;
     }
   }
 }
@@ -115,12 +119,12 @@ $_key: "button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled)";
 .keyboard {
   --md-comp-keyboard-columns: 10;
   --md-comp-keyboard-gap: 6px;
-  --md-comp-keyboard-key-height: 48px;
-  --md-comp-keyboard-number-key-height: 40px;
-  --md-comp-keyboard-key-shape: 12px;
+  --md-comp-keyboard-key-height: #{rem(48px)};
+  --md-comp-keyboard-number-key-height: #{rem(40px)};
+  --md-comp-keyboard-key-shape: var(--md-sys-shape-corner-medium);
   --md-comp-keypad-key-pressed-shape: 6px;
   --md-comp-keyboard-container-color: var(--md-sys-color-surface-container);
-  --md-comp-keyboard-container-shape: 16px;
+  --md-comp-keyboard-container-shape: var(--md-sys-shape-corner-large);
 
   display: flex;
   flex-direction: column;
@@ -143,7 +147,7 @@ $_key: "button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled)";
     @include typescale("title-medium");
 
     &[data-key] {
-      flex-basis: calc(1.5 * var(--_unit) + .5 * var(--md-comp-keyboard-gap));
+      flex-basis: calc(1.5 * var(--_unit) + 0.5 * var(--md-comp-keyboard-gap));
     }
 
     &[value=" "] {
@@ -155,8 +159,24 @@ $_key: "button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled)";
     height: var(--md-comp-keyboard-number-key-height);
   }
 
-  // Shift shows capitals on the character keys while it is latched.
-  &:has([data-key="Shift"][aria-pressed="true"]) button[value] {
+  // Shift or Caps Lock shows capitals on the character keys while latched.
+  &:has(:is([data-key="Shift"], [data-key="CapsLock"])[aria-pressed="true"]) button[value] {
     text-transform: uppercase;
   }
 }
+
+// Forced colors paint the keys and the keyboard's container as Canvas.
+@media (forced-colors: active) {
+  :is(.keypad, .keyboard) button,
+  .keyboard {
+    outline: 1px solid ButtonText;
+    outline-offset: -1px;
+  }
+
+  // The fill that marks the main key, such as Call, is dropped too, so a
+  // thicker edge sets it apart, as a default button's is in high contrast.
+  :is(.keypad, .keyboard) button.filled {
+    outline-width: 3px;
+    outline-offset: -3px;
+  }
+}

package/src/sass/components/_kpi.scss

@@ -78,12 +78,12 @@ $_trend-charts: "line-chart", "column-chart", "bar-chart", "mixed-chart";
     display: grid;
     flex: none;
     place-items: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 12px;
+    width: rem(40px);
+    height: rem(40px);
+    border-radius: var(--md-sys-shape-corner-medium);
     background-color: var(--md-comp-kpi-icon-container-color);
     color: var(--md-comp-kpi-icon-color);
-    font-size: 24px;
+    font-size: rem(24px);
   }
 
   .kpi-value {
@@ -99,7 +99,7 @@ $_trend-charts: "line-chart", "column-chart", "bar-chart", "mixed-chart";
     align-items: center;
     gap: 2px;
     padding: 2px 8px;
-    border-radius: 8px;
+    border-radius: var(--md-sys-shape-corner-small);
     background-color: var(--md-comp-kpi-trend-container-color);
     color: var(--md-comp-kpi-trend-color);
     font-variant-numeric: tabular-nums;
@@ -110,12 +110,7 @@ $_trend-charts: "line-chart", "column-chart", "bar-chart", "mixed-chart";
     }
 
     &: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/_lightbox.scss

@@ -1,43 +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;
+    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;
+  position: fixed;
   inset: 0;
-  background-color: var(--md-sys-color-background);
-  z-index: 1000;
+  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,48 +12,29 @@
 // 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");
-
-.line-chart {
-  --md-comp-line-chart-line-width: 3px;
-
-  &.sparkline {
-    --md-comp-line-chart-line-width: 2px;
-  }
-}
+@include chart("line-chart", $cursor: line, $lines: true);
+@include chart-axis("line-chart");
 
 .line-chart-plot > svg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  @include fill-parent;
   overflow: visible;
 }
 
-.line-chart-line {
-  fill: none;
-  stroke: var(--line-chart-color);
-  stroke-width: var(--md-comp-line-chart-line-width);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  vector-effect: non-scaling-stroke;
-}
-
-.line-chart-series.dashed .line-chart-line {
-  stroke-dasharray: 2 8;
-}
-
 .line-chart-area {
   display: none;
 
@@ -62,41 +43,6 @@
   }
 }
 
-.line-chart-series stop {
-  stop-color: var(--line-chart-color);
-  stop-opacity: 0;
-
-  &:first-child {
-    stop-opacity: 0.24;
-  }
-}
-
 .line-chart.fade .line-chart-plot > svg {
   mask-image: linear-gradient(to right, transparent, #000 15% 85%, transparent);
 }
-
-.line-chart-cursor {
-  width: 1px;
-  background-color: var(--md-sys-color-outline);
-
-  > span {
-    position: absolute;
-    left: 0;
-    width: 10px;
-    height: 10px;
-    border: 2px solid var(--md-sys-color-surface);
-    border-radius: 50%;
-    background-color: var(--line-chart-color);
-    translate: -50% -50%;
-  }
-}
-
-@media (forced-colors: active) {
-  .line-chart-cursor {
-    background-color: CanvasText;
-  }
-
-  .line-chart-cursor > span {
-    forced-color-adjust: 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;
+  }
+}