@expressivecss/expressive 0.15.0 → 0.16.0

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

@@ -0,0 +1,124 @@
+@use "../abstracts" as *;
+
+// Funnel chart. A <figure class="funnel-chart"> holds a <figcaption> and a
+// <table> of data: the first column labels each row, and the second holds
+// each stage's value. Without JavaScript the table shows. FunnelChart draws
+// each row as a stage, top to bottom in table order, as wide as its value
+// against the largest one and centered, with the row's label at the inline
+// start. It hides the table visually, so a screen reader still reads the
+// data as a table. The plot and tooltip come from chart(). The plot is as
+// tall as its rows, so --md-comp-funnel-chart-height does not apply; set
+// the row height instead.
+//
+// Each stage's span carries --width, its width as a percentage of the plot.
+//
+// Tokens:
+//   --md-comp-funnel-chart-row-height    40px
+//   --md-comp-funnel-chart-stage-height  60% of each row's height
+//   --md-comp-funnel-chart-shape         4px, the stage's corner radius
+//   --md-comp-funnel-chart-color-1       primary, every stage's color
+
+@include chart("funnel-chart");
+
+.funnel-chart {
+  --md-comp-funnel-chart-row-height: #{rem(40px)};
+  --md-comp-funnel-chart-stage-height: 60%;
+  --md-comp-funnel-chart-shape: var(--md-sys-shape-corner-extra-small);
+
+  // Labels beside the plot, up to 40% of the width; everything else spans
+  // both columns. Dense flow puts the labels in the plot's row.
+  display: grid;
+  grid-template-columns: fit-content(40%) minmax(0, 1fr);
+  grid-auto-flow: row dense;
+  align-content: start;
+  column-gap: 12px;
+
+  > * {
+    grid-column: 1 / -1;
+  }
+
+  > .funnel-chart-plot {
+    grid-column: 2;
+  }
+
+  > .funnel-chart-labels {
+    grid-column: 1;
+  }
+}
+
+.funnel-chart-plot {
+  isolation: isolate;
+  height: calc(var(--rows, 1) * var(--md-comp-funnel-chart-row-height));
+  border-block-end: 0;
+  background: none;
+}
+
+.funnel-chart-labels {
+  grid-auto-rows: minmax(0, 1fr);
+  grid-auto-flow: row;
+  align-items: center;
+  text-align: end;
+}
+
+.funnel-chart-stages {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-auto-rows: minmax(0, 1fr);
+
+  > div {
+    display: flex;
+    align-items: center;
+  }
+
+  > div > span {
+    width: calc(var(--width, 0) * 1%);
+    height: var(--md-comp-funnel-chart-stage-height);
+    margin-inline: auto;
+    border-radius: var(--md-comp-funnel-chart-shape);
+    background-color: var(--funnel-chart-color);
+  }
+
+  // Each stage grows from nothing, or after update() from its old width,
+  // which FunnelChart writes as --from-width.
+  @media (prefers-reduced-motion: no-preference) {
+    > div > span {
+      transition: width var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
+
+      @starting-style {
+        width: calc(var(--from-width, 0) * 1%);
+      }
+    }
+  }
+}
+
+// A band behind the highlighted row's stage.
+.funnel-chart-cursor {
+  z-index: -1;
+  inset-block: auto;
+  inset-inline: 0;
+  height: calc(100% / var(--rows, 1));
+  border-radius: var(--md-comp-funnel-chart-shape);
+  background-color: state-layer(var(--md-sys-color-on-surface), "hover");
+  translate: 0 -50%;
+}
+
+// Below the highlighted row, or above it in the lower half.
+.funnel-chart-tooltip {
+  left: 50%;
+  translate: -50% calc(var(--md-comp-funnel-chart-row-height) / 2);
+
+  &.end {
+    translate: -50% calc(-100% - var(--md-comp-funnel-chart-row-height) / 2);
+  }
+}
+
+@media (forced-colors: active) {
+  .funnel-chart-stages > div > span {
+    forced-color-adjust: none;
+  }
+
+  .funnel-chart-cursor {
+    outline: 1px solid CanvasText;
+  }
+}

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

@@ -7,25 +7,49 @@
 // its rows, so --md-comp-heatmap-chart-height does not apply.
 //
 // Each cell carries --level, 0 for the lowest value and 1 for the highest,
-// and mixes the color into the empty color by that much. A .gap cell has no
-// value and draws no fill. Value text is black or white, whichever
-// contrasts more with the cell's mix, in any theme.
+// and mixes the color into the empty color by that much. On a diverging
+// scale (data-mid) a level below 0 mixes in the low color instead. A .gap
+// cell has no value and draws no fill. Value text is black or white,
+// whichever contrasts more with the cell's mix, in any theme.
+//
+// Cells keep --md-comp-heatmap-chart-cell-min-width, and a grid too wide
+// for its figure scrolls its cells sideways beside the row labels.
 //
 // Modifiers: .values writes each cell's text on it.
 //
 // Tokens:
-//   --md-comp-heatmap-chart-row-height   32px
-//   --md-comp-heatmap-chart-gap          3px between cells
-//   --md-comp-heatmap-chart-shape        4px, the cell's corner radius
-//   --md-comp-heatmap-chart-color        primary, the highest value
-//   --md-comp-heatmap-chart-empty-color  surface-container-highest, the lowest
+//   --md-comp-heatmap-chart-row-height      32px
+//   --md-comp-heatmap-chart-cell-min-width  12px, below which the grid scrolls
+//   --md-comp-heatmap-chart-gap             3px between cells
+//   --md-comp-heatmap-chart-shape           4px, the cell's corner radius
+//   --md-comp-heatmap-chart-color           primary, the highest value
+//   --md-comp-heatmap-chart-low-color       tertiary, the lowest value on a
+//                                           diverging scale
+//   --md-comp-heatmap-chart-empty-color     surface-container-highest, the
+//                                           lowest, or the midpoint
 
 @include chart("heatmap-chart");
 
+// A level's color: the color above 0, the low color below it, both mixed
+// into the empty color, so one formula serves both kinds of scale.
+@function shade($level) {
+  @return color-mix(
+    in oklab,
+    var(--md-comp-heatmap-chart-color) calc(max(#{$level}, 0) * 100%),
+    color-mix(
+      in oklab,
+      var(--md-comp-heatmap-chart-low-color) calc(max(-1 * #{$level}, 0) * 100%),
+      var(--md-comp-heatmap-chart-empty-color)
+    )
+  );
+}
+
 .heatmap-chart {
-  --md-comp-heatmap-chart-row-height: 32px;
+  --md-comp-heatmap-chart-row-height: #{rem(32px)};
+  --md-comp-heatmap-chart-cell-min-width: 12px;
+  --md-comp-heatmap-chart-low-color: var(--md-sys-color-tertiary);
   --md-comp-heatmap-chart-gap: 3px;
-  --md-comp-heatmap-chart-shape: 4px;
+  --md-comp-heatmap-chart-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-heatmap-chart-color: var(--md-sys-color-primary);
   --md-comp-heatmap-chart-empty-color: var(--md-sys-color-surface-container-highest);
 }
@@ -33,11 +57,7 @@
 // The cells and the tooltip swatch share the mix.
 .heatmap-chart-cell,
 .heatmap-chart-tooltip > span {
-  --heatmap-chart-color: color-mix(
-    in oklab,
-    var(--md-comp-heatmap-chart-color) calc(var(--level, 0) * 100%),
-    var(--md-comp-heatmap-chart-empty-color)
-  );
+  --heatmap-chart-color: #{shade(var(--level, 0))};
 }
 
 .heatmap-chart-plot {
@@ -46,16 +66,42 @@
   background: none;
 }
 
+// The row labels, then the cells beside them. Row labels take up to 40% of
+// the width and end in an ellipsis past it; the cells take the rest and
+// scroll sideways when their minimum width would not fit, while the row
+// labels stay in view. Both sides use the same fixed row height, so the
+// rows line up.
 .heatmap-chart-grid {
   display: grid;
-  // Row labels take up to 40% of the width and end in an ellipsis past it.
-  grid-template-columns: fit-content(40%) repeat(var(--columns, 1), minmax(0, 1fr));
-  grid-template-rows: repeat(var(--rows, 1), var(--md-comp-heatmap-chart-row-height));
-  gap: var(--md-comp-heatmap-chart-gap);
+  grid-template-columns: fit-content(40%) minmax(0, 1fr);
+  column-gap: var(--md-comp-heatmap-chart-gap);
   color: var(--md-sys-color-on-surface-variant);
   @include typescale("body-small");
 }
 
+.heatmap-chart-rows,
+.heatmap-chart-cells {
+  display: grid;
+  grid-template-rows: repeat(var(--rows, 1), var(--md-comp-heatmap-chart-row-height)) auto;
+  gap: var(--md-comp-heatmap-chart-gap);
+}
+
+.heatmap-chart-rows {
+  min-width: 0;
+}
+
+.heatmap-chart-scroll {
+  overflow-x: auto;
+  // Room for the active cell's outline, which the scrolling would clip.
+  margin: -3px;
+  padding: 3px;
+}
+
+.heatmap-chart-cells {
+  grid-template-columns: repeat(var(--columns, 1), minmax(var(--md-comp-heatmap-chart-cell-min-width), 1fr));
+  width: max(100%, var(--columns, 1) * (var(--md-comp-heatmap-chart-cell-min-width) + var(--md-comp-heatmap-chart-gap)) - var(--md-comp-heatmap-chart-gap));
+}
+
 .heatmap-chart-row,
 .heatmap-chart-column {
   overflow: hidden;
@@ -76,6 +122,27 @@
   &.run {
     text-align: start;
   }
+
+  // When each label is wider than its column, HeatmapChart keeps every nth
+  // one, as LineChart does. A kept label spreads over the hidden ones beside
+  // it, centred on its column; the end labels line up with the grid's edges.
+  .heatmap-chart-cells[data-thinned] > &:not([data-skip]) {
+    display: flex;
+    justify-content: center;
+    overflow: visible;
+
+    &:nth-child(1 of .heatmap-chart-column) {
+      justify-content: start;
+    }
+
+    &:nth-last-child(1 of .heatmap-chart-column) {
+      justify-content: end;
+    }
+  }
+
+  &[data-skip] {
+    visibility: hidden;
+  }
 }
 
 .heatmap-chart-cell {
@@ -134,12 +201,34 @@
 .heatmap-chart-scale {
   width: 96px;
   height: 8px;
-  border-radius: 4px;
+  border-radius: var(--md-sys-shape-corner-extra-small);
   // From the lowest cell's shade to the highest's, set by HeatmapChart.
   background: linear-gradient(
     in oklab to var(--heatmap-chart-to, right),
-    color-mix(in oklab, var(--md-comp-heatmap-chart-color) calc(var(--low, 0) * 100%), var(--md-comp-heatmap-chart-empty-color)),
-    color-mix(in oklab, var(--md-comp-heatmap-chart-color) calc(var(--high, 1) * 100%), var(--md-comp-heatmap-chart-empty-color))
+    #{shade(var(--low, 0))},
+    #{shade(var(--high, 1))}
+  );
+
+  // A stepped scale is a swatch per band, which HeatmapChart writes.
+  &:has(> span) {
+    display: flex;
+    overflow: hidden;
+    background: none;
+  }
+
+  > span {
+    flex: 1;
+    background: #{shade(var(--level, 0))};
+  }
+}
+
+// A diverging scale whose data crosses the midpoint passes its empty color.
+.heatmap-chart-scale.diverging {
+  background: linear-gradient(
+    in oklab to var(--heatmap-chart-to, right),
+    #{shade(var(--low, 0))},
+    var(--md-comp-heatmap-chart-empty-color) var(--mid, 0%),
+    #{shade(var(--high, 1))}
   );
 }
 

package/src/sass/components/_icon-buttons.scss

@@ -43,7 +43,7 @@
 
   --md-comp-icon-button-color: var(--md-sys-color-on-surface-variant);
   --md-comp-icon-button-container-color: transparent;
-  --md-comp-icon-button-container-shape: 9999px;
+  --md-comp-icon-button-container-shape: var(--md-sys-shape-corner-full);
 
   box-sizing: border-box;
   display: inline-flex;
@@ -65,7 +65,11 @@
   appearance: none;
   vertical-align: middle;
   -webkit-tap-highlight-color: transparent;
-  transition: background-color .2s ease-out, border-radius .2s ease-out;
+  transition: background-color var(--md-sys-motion-duration-short4) ease-out, border-radius var(--md-sys-motion-duration-short4) ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 
   > #{$icon} {
     flex: 0 0 auto;
@@ -82,11 +86,7 @@
   // icon button gets a translucent tint instead of an opaque one.
   @each $state, $selector in ("hover": "&:hover", "focus": "&:focus", "pressed": "&:active") {
     #{$selector} {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-icon-button-color) state-opacity($state),
-        var(--md-comp-icon-button-container-color)
-      );
+      background-color: state-layer(var(--md-comp-icon-button-color), $state, var(--md-comp-icon-button-container-color));
     }
   }
 

package/src/sass/components/_icons-material-design.scss

@@ -30,14 +30,14 @@
 [icon-style="sharp"],
 :host([icon-style="sharp"]) { --md-icon-font: var(--md-icon-font-sharp); }
 
-$_icon: ".material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons";
+$_icon: ".material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp";
 
 #{$_icon} {
   display: inline-block;
   font-family: var(--md-icon-font);
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;
+  font-size: rem(24px);
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;

package/src/sass/components/_image-compare.scss

@@ -0,0 +1,108 @@
+@use "../abstracts" as *;
+
+// Image compare. Two images of the same scene stacked, with a divider that
+// reveals the second over the first. A .image-compare holds two <img> and a
+// native <input type="range">: the range is the control, so keyboard,
+// pointer, touch and its "slider" semantics are the browser's. It covers the
+// images invisibly, and the container draws the divider and handle at
+// --md-comp-image-compare-position, which the ImageCompare behavior keeps in
+// step with the range's value.
+//
+// Tokens:
+//   --md-comp-image-compare-position       50% (from the inline start)
+//   --md-comp-image-compare-shape          16px
+//   --md-comp-image-compare-divider-color  surface
+//   --md-comp-image-compare-handle-size    40px
+
+.image-compare {
+  --md-comp-image-compare-position: 50%;
+  --md-comp-image-compare-shape: var(--md-sys-shape-corner-large);
+  --md-comp-image-compare-divider-color: var(--md-sys-color-surface);
+  --md-comp-image-compare-handle-size: 40px;
+
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  border-radius: var(--md-comp-image-compare-shape);
+  isolation: isolate;
+
+  > img {
+    grid-area: 1 / 1;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  > img + img {
+    clip-path: inset(0 0 0 var(--md-comp-image-compare-position));
+  }
+
+  &:dir(rtl) > img + img {
+    clip-path: inset(0 var(--md-comp-image-compare-position) 0 0);
+  }
+
+  > input[type="range"] {
+    grid-area: 1 / 1;
+    z-index: 2;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    cursor: ew-resize;
+    opacity: 0;
+  }
+
+  // The divider line, then the round handle on it.
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    inset-inline-start: var(--md-comp-image-compare-position);
+    pointer-events: none;
+    translate: -50% 0;
+  }
+
+  &:dir(rtl)::before,
+  &:dir(rtl)::after {
+    translate: 50% 0;
+  }
+
+  &::before {
+    inset-block: 0;
+    inline-size: 2px;
+    background-color: var(--md-comp-image-compare-divider-color);
+  }
+
+  &::after {
+    inset-block-start: calc(50% - var(--md-comp-image-compare-handle-size) / 2);
+    inline-size: var(--md-comp-image-compare-handle-size);
+    block-size: var(--md-comp-image-compare-handle-size);
+    border-radius: 50%;
+    background-color: var(--md-comp-image-compare-divider-color);
+    @include z-depth("2");
+  }
+
+  &:has(> input:focus-visible)::after {
+    @include focus-ring();
+  }
+
+  &:has(> input:disabled) {
+    > input {
+      cursor: default;
+    }
+
+    &::after {
+      opacity: 0.38;
+    }
+  }
+
+  @media (forced-colors: active) {
+    &::before,
+    &::after {
+      forced-color-adjust: none;
+      background-color: Canvas;
+      outline: 2px solid CanvasText;
+    }
+  }
+}

package/src/sass/components/_index.scss

@@ -31,6 +31,7 @@
 @forward "chips";
 @forward "lightbox";
 @forward "docked-display";
+@forward "modal-display";
 @forward "page-footer";
 @forward "forms";
 @forward "table_of_contents";
@@ -44,6 +45,11 @@
 @forward "panes";
 @forward "fab-menu";
 @forward "loading-indicator";
+@forward "pull-to-refresh";
+@forward "loading-overlay";
+@forward "swipe-actions";
+@forward "show-more";
+@forward "transfer-list";
 @forward "search";
 @forward "drag-handle";
 @forward "scrim";
@@ -53,9 +59,16 @@
 @forward "map";
 @forward "accordion";
 @forward "data-table";
+@forward "description-list";
+@forward "calendar";
+@forward "mega-menu";
+@forward "image-compare";
+@forward "tour";
+@forward "menubar";
 @forward "avatar";
 @forward "skeleton";
 @forward "empty-state";
+@forward "alert";
 @forward "countdown";
 @forward "popover";
 @forward "stepper";
@@ -72,9 +85,16 @@
 @forward "radar-chart";
 @forward "radial-chart";
 @forward "mixed-chart";
+@forward "scatter-chart";
+@forward "funnel-chart";
+@forward "sankey-chart";
+@forward "treemap-chart";
 @forward "aura";
 @forward "kpi";
 @forward "marquee";
 @forward "confetti";
 @forward "particles";
 @forward "keypad";
+@forward "org-chart";
+@forward "back-to-top";
+@forward "cascader";

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;
+  }
+}