@expressivecss/expressive 0.14.1 → 0.15.0

package/src/sass/components/_cards.scss

@@ -222,11 +222,7 @@ article > :is(h1, h2, h3, h4, h5, h6),
 article > :is(header, .primary-action) > :is(h1, h2, h3, h4, h5, h6) {
   margin: 0;
   padding: var(--md-comp-card-content-padding) var(--md-comp-card-content-padding) 0;
-  font-family: var(--md-sys-typescale-title-medium-font-family-name);
-  font-size: var(--md-sys-typescale-title-medium-font-size);
-  font-weight: var(--md-sys-typescale-title-medium-font-weight);
-  line-height: var(--md-sys-typescale-title-medium-line-height);
-  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
+  @include typescale("title-medium");
   color: var(--md-comp-card-headline-color);
 }
 
@@ -234,11 +230,7 @@ article > p,
 article > :is(header, .primary-action) > p {
   margin: 0;
   padding: var(--md-comp-card-between-space) var(--md-comp-card-content-padding) var(--md-comp-card-content-padding);
-  font-family: var(--md-sys-typescale-body-medium-font-family-name);
-  font-size: var(--md-sys-typescale-body-medium-font-size);
-  font-weight: var(--md-sys-typescale-body-medium-font-weight);
-  line-height: var(--md-sys-typescale-body-medium-line-height);
-  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
+  @include typescale("body-medium");
   color: var(--md-comp-card-supporting-text-color);
 }
 
@@ -248,11 +240,7 @@ article > p.subhead,
 article > :is(header, .primary-action) > p.subhead {
   margin: 0;
   padding: 4px var(--md-comp-card-content-padding) 0;
-  font-family: var(--md-sys-typescale-title-small-font-family-name);
-  font-size: var(--md-sys-typescale-title-small-font-size);
-  font-weight: var(--md-sys-typescale-title-small-font-weight);
-  line-height: var(--md-sys-typescale-title-small-line-height);
-  letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
+  @include typescale("title-small");
   color: var(--md-comp-card-subhead-color);
 }
 
@@ -304,10 +292,7 @@ article > .primary-action > figure img {
   border-radius: var(--md-comp-card-media-shape);
 }
 
-article > #{$_media-figure} {
-  position: relative;
-}
-
+article > #{$_media-figure},
 article > .primary-action > #{$_media-figure} {
   position: relative;
 }
@@ -655,17 +640,13 @@ article > aside > .reveal-actions > .reveal-action {
   padding-inline: 0;
   color: var(--md-sys-color-on-surface);
   border-radius: 8px;
-  font-family: var(--md-sys-typescale-body-medium-font-family-name);
-  font-size: var(--md-sys-typescale-body-medium-font-size);
-  font-weight: var(--md-sys-typescale-body-medium-font-weight);
-  line-height: var(--md-sys-typescale-body-medium-line-height);
-  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
+  @include typescale("body-medium");
 }
 
 article > aside > .reveal-actions > .reveal-action:hover {
   background-color: color-mix(
     in oklab,
-    var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%),
+    var(--md-sys-color-on-surface) state-opacity("hover"),
     transparent
   );
 }

package/src/sass/components/_carousel.scss

@@ -20,6 +20,11 @@
 //   item shape          28dp
 //   small item width 40–56dp
 
+// A small item's width: $share of the track, held between the min and max tokens.
+@function _small-item-width($share) {
+  @return clamp(var(--md-comp-carousel-small-item-min-width), $share, var(--md-comp-carousel-small-item-max-width));
+}
+
 .carousel {
   --md-comp-carousel-height: 240px;
   --md-comp-carousel-shape: 28px;
@@ -110,16 +115,8 @@
     }
 
     &[data-carousel-size="small"] {
-      flex-basis: clamp(
-        var(--md-comp-carousel-small-item-min-width),
-        12%,
-        var(--md-comp-carousel-small-item-max-width)
-      );
-      width: clamp(
-        var(--md-comp-carousel-small-item-min-width),
-        12%,
-        var(--md-comp-carousel-small-item-max-width)
-      );
+      flex-basis: _small-item-width(12%);
+      width: _small-item-width(12%);
     }
 
     &[data-carousel-size="small"] > .carousel-item-content {
@@ -325,16 +322,8 @@
   );
 
   .carousel-track > .carousel-item[data-carousel-size="small"] {
-    flex-basis: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      8%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
-    width: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      8%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
+    flex-basis: _small-item-width(8%);
+    width: _small-item-width(8%);
   }
 }
 
@@ -360,16 +349,8 @@
   );
 
   .carousel-track > .carousel-item[data-carousel-size="small"] {
-    flex-basis: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      6%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
-    width: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      6%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
+    flex-basis: _small-item-width(6%);
+    width: _small-item-width(6%);
   }
 }
 
@@ -395,16 +376,8 @@
   );
 
   .carousel-track > .carousel-item[data-carousel-size="small"] {
-    flex-basis: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      4%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
-    width: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      4%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
+    flex-basis: _small-item-width(4%);
+    width: _small-item-width(4%);
   }
 }
 
@@ -445,11 +418,7 @@
   --md-comp-carousel-large-item-width: min(calc(100% - 96px), 720px);
 
   .carousel-track > .carousel-item[data-carousel-size="small"] {
-    flex-basis: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      12%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
+    flex-basis: _small-item-width(12%);
   }
 
   &.center-aligned {
@@ -534,16 +503,8 @@
     border-radius: var(--md-comp-carousel-shape);
 
     &[data-carousel-size="small"] {
-      flex-basis: clamp(
-        var(--md-comp-carousel-small-item-min-width),
-        12%,
-        var(--md-comp-carousel-small-item-max-width)
-      );
-      width: clamp(
-        var(--md-comp-carousel-small-item-min-width),
-        12%,
-        var(--md-comp-carousel-small-item-max-width)
-      );
+      flex-basis: _small-item-width(12%);
+      width: _small-item-width(12%);
     }
 
     > img,

package/src/sass/components/_chips.scss

@@ -144,7 +144,6 @@
   box-shadow: none;
   margin: 0 0 8px 0;
   padding: 4px;
-  // min-height: 45px;
   outline: none;
   transition: all .3s;
 
@@ -167,13 +166,10 @@
     color: var(--md-sys-color-on-background);
     display: inline-block;
     font-size: 16px;
-    // height: 32px;
-    // line-height: 32px;
     height: 32px;
     outline: 0;
     margin: 0;
     padding: 0;
-    width: 120px;
     width: fit-content;
     min-width: 100px;
     max-width: 200px;
@@ -194,14 +190,12 @@
 // Form prefix
 .prefix ~ .chips {
   margin-left: 3rem;
-  width: 92%;
   width: calc(100% - 3rem);
 }
 
 // Form suffix
 .suffix ~ .chips {
   margin-right: 3rem;
-  width: 92%;
   width: calc(100% - 3rem);
 }
 

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

@@ -119,7 +119,7 @@
   z-index: -1;
   width: calc(100% / var(--rows, 1));
   border-radius: var(--md-comp-column-chart-shape);
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
   translate: -50% 0;
 }
 

package/src/sass/components/_data-table.scss

@@ -23,8 +23,6 @@
 //   --md-comp-data-table-cell-padding              16px
 //   --md-comp-data-table-selected-container-color  secondary-container
 
-$_data-table-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 20V7.8l-5.6 5.6L4 12l8-8 8 8-1.4 1.4L13 7.8V20z'/%3E%3C/svg%3E");
-
 .data-table {
   --md-comp-data-table-container-color: var(--md-sys-color-surface);
   --md-comp-data-table-shape: 12px;
@@ -152,7 +150,7 @@ $_data-table-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000
       width: 18px;
       height: 18px;
       background-color: currentColor;
-      mask: $_data-table-arrow center / 18px no-repeat;
+      mask: $trend-arrow center / 18px no-repeat;
       opacity: 0;
       transition: opacity 0.2s ease-out, transform 0.2s ease-out;
     }

package/src/sass/components/_datepicker.scss

@@ -88,9 +88,6 @@
 /* Date Display */
 :is(.datepicker-date-display, .date-picker-date-display) {
   flex: 1 auto;
-  // @removed since v2.2.1-dev regarding Material M3 standards
-  // background-color: var(--md-sys-color-primary);
-  // color:  var(--md-sys-color-on-primary);
   padding: 20px 22px;
   border-bottom: 1px solid var(--md-sys-color-surface-variant);
   font-weight: 500;
@@ -99,7 +96,6 @@
     display: block;
     font-size: 1.5rem;
     line-height: 25px;
-    color:  var(--md-sys-color-on-primary);
   }
 
   .date-text {
@@ -148,28 +144,13 @@
   :is(.datepicker-day, .date-picker-day) {
     padding: 0;
     color: var(--md-sys-color-on-background);
-    // border-radius: 50%;
 
     &.is-today {
       color: var(--md-sys-color-primary);
     }
-
-    /*&.is-selected button {
-      background-color: var(--md-sys-color-primary);
-      color:  var(--md-sys-color-on-primary);
-    }*/
   }
 }
 
-// @todo
-:is(.datepicker-day, .date-picker-day).has-event {}
-// @todo
-:is(.datepicker-day, .date-picker-day).is-inrange {}
-// @todo
-:is(.datepicker-day, .date-picker-day).is-startrange {}
-// @todo
-:is(.datepicker-day, .date-picker-day).is-endrange {}
-
 :is(.datepicker-day, .date-picker-day).is-daterange-start,
 :is(.datepicker-day, .date-picker-day).is-daterange-end,
 :is(.datepicker-day, .date-picker-day).is-daterange {
@@ -231,9 +212,9 @@
     }
   }
 
-  &.is-outside-current-month button,
-  &.is-disabled button {
-    color: var(--md-sys-color-on-surface);
+  // The state classes sit on the <td>, not the button.
+  :is(.is-outside-current-month, .is-disabled) & {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     pointer-events: none;
   }
 }

package/src/sass/components/_dialog.scss

@@ -247,10 +247,7 @@ dialog.max {
       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 focus-visible;
   }
 
   // Confirming action in the header is a text button, not an icon.

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

@@ -112,14 +112,14 @@
 }
 
 .heatmap-chart-tooltip {
+  translate: 8px 0;
+
   // A gap's swatch, outlined like its cell.
   > span.gap::before {
     background: none;
     box-shadow: inset 0 0 0 1px var(--md-comp-heatmap-chart-grid-color);
   }
 
-  translate: 8px 0;
-
   &.end {
     translate: calc(-100% - 8px) 0;
   }

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

@@ -1,4 +1,3 @@
-@use "sass:map";
 @use "../abstracts" as *;
 
 // Icon buttons.

package/src/sass/components/_index.scss

@@ -77,3 +77,4 @@
 @forward "marquee";
 @forward "confetti";
 @forward "particles";
+@forward "keypad";

package/src/sass/components/_keypad.scss

@@ -0,0 +1,162 @@
+@use "../abstracts" as *;
+
+// Keypad and keyboard: on-screen keys that type into a text field.
+//
+// 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
+// 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.
+//
+// Keys press the same way button-group items do: the corner squares off on a
+// spring and springs back on release.
+//
+// Keyboard width comes from a column count rather than per-key classes. A
+// character key is one column wide and may shrink; a function key is one and
+// a half; the space bar takes what is left. Ten columns gives QWERTY's
+// half-key indent on the nine-key row with no extra markup.
+
+$_key: "button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled)";
+
+:is(.keypad, .keyboard) {
+  --md-comp-keypad-key-color: var(--md-sys-color-surface-container-highest);
+  --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;
+  // Material's fast-spatial spring, the curve button groups press with.
+  --md-comp-keypad-motion: #{$motion-fast-spatial};
+
+  touch-action: manipulation;
+
+  button {
+    --_color: var(--md-comp-keypad-key-color);
+    --_label: var(--md-comp-keypad-key-label-color);
+    min-width: 0;
+    padding: 0;
+    transition:
+      border-radius 200ms var(--md-comp-keypad-motion),
+      background-color 200ms ease-out;
+
+    &[data-key] {
+      --_color: var(--md-comp-keypad-function-key-color);
+      --_label: var(--md-comp-keypad-function-key-label-color);
+    }
+
+    // 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") {
+      #{$selector} {
+        --_state: #{state-opacity($state)};
+      }
+    }
+
+    &:active:not(:disabled) {
+      border-radius: var(--md-comp-keypad-key-pressed-shape);
+    }
+
+    // The shape stops moving; the color still fades, which is not motion.
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: background-color;
+    }
+  }
+
+  #{$_key} {
+    color: var(--_label);
+    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"] {
+    --_color: var(--md-sys-color-primary);
+    --_label: var(--md-sys-color-on-primary);
+  }
+}
+
+// Dial pad and PIN pad: three columns of round keys. A digit key may carry
+// its letters in a <small> under the digit. An empty cell is an empty <span>.
+// 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-gap: 12px;
+
+  display: inline-grid;
+  grid-template-columns: repeat(3, var(--md-comp-keypad-key-size));
+  gap: var(--md-comp-keypad-gap);
+
+  button {
+    flex-direction: column;
+    gap: 0;
+    width: 100%;
+    height: var(--md-comp-keypad-key-size);
+    border-radius: calc(var(--md-comp-keypad-key-size) / 2);
+    @include typescale("headline-medium");
+
+    &.wide {
+      grid-column: span 2;
+    }
+
+    > small {
+      @include typescale("label-small");
+      color: inherit;
+      opacity: .78;
+    }
+  }
+}
+
+// On-screen keyboard. The container is a docked surface; each row is a line
+// of keys sized from the column count. An optional `.numbers` row of digits
+// sits above the letters with shorter keys, as on a phone; `hidden` drops it.
+// Rows skip `display: flex` while hidden, which would otherwise outrank the
+// browser's `[hidden]` rule.
+.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-keypad-key-pressed-shape: 6px;
+  --md-comp-keyboard-container-color: var(--md-sys-color-surface-container);
+  --md-comp-keyboard-container-shape: 16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  border-radius: var(--md-comp-keyboard-container-shape);
+  background-color: var(--md-comp-keyboard-container-color);
+
+  > :not([hidden]) {
+    --_unit: calc((100% - (var(--md-comp-keyboard-columns) - 1) * var(--md-comp-keyboard-gap)) / var(--md-comp-keyboard-columns));
+    display: flex;
+    justify-content: center;
+    gap: var(--md-comp-keyboard-gap);
+  }
+
+  button {
+    flex: 0 1 var(--_unit);
+    height: var(--md-comp-keyboard-key-height);
+    border-radius: var(--md-comp-keyboard-key-shape);
+    @include typescale("title-medium");
+
+    &[data-key] {
+      flex-basis: calc(1.5 * var(--_unit) + .5 * var(--md-comp-keyboard-gap));
+    }
+
+    &[value=" "] {
+      flex-grow: 1;
+    }
+  }
+
+  > .numbers button {
+    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] {
+    text-transform: uppercase;
+  }
+}

package/src/sass/components/_lightbox.scss

@@ -11,10 +11,8 @@
     border-radius: 12px;
   }
 
-  &:hover {
-    &:not(.active) {
-      opacity: .8;
-    }
+  &:hover:not(.active) {
+    opacity: .8;
   }
   &.active {
     cursor: zoom-out;
@@ -23,10 +21,7 @@
 
 #lightbox-overlay {
   position:fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   background-color: var(--md-sys-color-background);
   z-index: 1000;
   will-change: opacity;

package/src/sass/components/_map.scss

@@ -85,7 +85,7 @@
   &.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;
   }
 }
@@ -151,7 +151,7 @@
     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;