@expressivecss/expressive 0.13.1 → 0.15.0

package/src/sass/components/_button-groups.scss

@@ -39,17 +39,6 @@ $_standard-space: (
   "xlarge": 8px,
 );
 
-// md.comp.button.<size>.{container-shape-square, pressed-container-shape}.
-// Common buttons and icon buttons share these numbers, so the group can morph
-// either kind of child through one pair of properties.
-$_item-shapes: (
-  "xsmall": (square: 12px, pressed: 8px),
-  "small": (square: 12px, pressed: 8px),
-  "medium": (square: 16px, pressed: 12px),
-  "large": (square: 28px, pressed: 16px),
-  "xlarge": (square: 28px, pressed: 16px),
-);
-
 // md.comp.button-group.connected.<size>.{inner-corner, pressed.inner-corner}.
 // The live M3 measurement is authoritative for XS (4px). Material Web 34.0.21
 // still emits 8px there; S and M agree at 8px.
@@ -65,10 +54,17 @@ $_connected-corners: (
   @include z-depth("0");
   color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   pointer-events: none;
-  box-shadow: none;
   cursor: default;
 }
 
+// Toggle colors. The label and icon take the state-layer color.
+@mixin _toggle-colors($container, $state) {
+  --_toggle-container-color: #{$container};
+  --_toggle-state-color: #{$state};
+  color: $state;
+  background-color: var(--_toggle-container-color);
+}
+
 .button-group {
   --md-comp-button-group-between-space: 12px;
   --md-comp-button-group-item-shape-round: 9999px;
@@ -77,14 +73,9 @@ $_connected-corners: (
   // M3 states this as a percentage of the item's own width. CSS cannot
   // multiply a length by one, so it is the same figure as a ratio.
   --md-comp-button-group-pressed-item-width-multiplier: .15;
-  // Material's fast-spatial spring (damping .9, stiffness 1400), sampled into
-  // a CSS linear easing so width and corner motion use the published dynamics.
-  --md-comp-button-group-motion: linear(
-    0, .056 5%, .1796 10%, .3252 15%, .4675 20%, .5936 25%,
-    .6988 30%, .7828 35%, .8475 40%, .8959 45%, .931 50%,
-    .9559 55%, .973 60%, .9845 65%, .9919 70%, .9965 75%,
-    .9992 80%, 1.0006 85%, 1.0013 90%, 1.0015 95%, 1.0015
-  );
+  // Material's fast-spatial spring, so width and corner motion use the
+  // published dynamics.
+  --md-comp-button-group-motion: #{$motion-fast-spatial};
 
   display: flex;
   align-items: center;
@@ -100,8 +91,9 @@ $_connected-corners: (
       @include button-size($name);
 
       --md-comp-button-group-between-space: #{map.get($_standard-space, $name)};
-      --md-comp-button-group-item-shape-square: #{map.get(map.get($_item-shapes, $name), square)};
-      --md-comp-button-group-pressed-item-shape: #{map.get(map.get($_item-shapes, $name), pressed)};
+      // Common and icon buttons share these two shapes.
+      --md-comp-button-group-item-shape-square: #{map.get($icon-button-sizes, $name, square)};
+      --md-comp-button-group-pressed-item-shape: #{map.get($icon-button-sizes, $name, pressed)};
 
       > #{$_label-item}:not(#{$_sized}) {
         @include typescale(map.get($s, label));
@@ -112,23 +104,23 @@ $_connected-corners: (
       }
 
       > .icon-button.narrow:not(#{$_sized}) {
-        --md-comp-icon-button-leading-space: #{map.get(map.get($icon-button-sizes, $name), narrow)};
-        --md-comp-icon-button-trailing-space: #{map.get(map.get($icon-button-sizes, $name), narrow)};
+        --md-comp-icon-button-leading-space: #{map.get($icon-button-sizes, $name, narrow)};
+        --md-comp-icon-button-trailing-space: #{map.get($icon-button-sizes, $name, narrow)};
       }
 
       > .icon-button.wide:not(#{$_sized}) {
-        --md-comp-icon-button-leading-space: #{map.get(map.get($icon-button-sizes, $name), wide)};
-        --md-comp-icon-button-trailing-space: #{map.get(map.get($icon-button-sizes, $name), wide)};
+        --md-comp-icon-button-leading-space: #{map.get($icon-button-sizes, $name, wide)};
+        --md-comp-icon-button-trailing-space: #{map.get($icon-button-sizes, $name, wide)};
       }
     }
 
     // Group shape tokens inherit, so an explicitly sized item must rewrite
     // them on itself just as its button geometry tokens do.
     > #{$_item}.#{$name} {
-      --md-comp-button-group-item-shape-square: #{map.get(map.get($_item-shapes, $name), square)};
-      --md-comp-button-group-pressed-item-shape: #{map.get(map.get($_item-shapes, $name), pressed)};
-      --md-comp-button-group-inner-corner-corner-size: #{map.get(map.get($_connected-corners, $name), inner)};
-      --md-comp-button-group-pressed-inner-corner-corner-size: #{map.get(map.get($_connected-corners, $name), pressed)};
+      --md-comp-button-group-item-shape-square: #{map.get($icon-button-sizes, $name, square)};
+      --md-comp-button-group-pressed-item-shape: #{map.get($icon-button-sizes, $name, pressed)};
+      --md-comp-button-group-inner-corner-corner-size: #{map.get($_connected-corners, $name, inner)};
+      --md-comp-button-group-pressed-inner-corner-corner-size: #{map.get($_connected-corners, $name, pressed)};
     }
   }
 
@@ -176,64 +168,40 @@ $_connected-corners: (
   // Shape and the filled icon below provide two non-color selection cues.
   > #{$_label-item}#{$_filled-item}[aria-pressed=false],
   > .icon-button.filled[aria-pressed=false] {
-    --_toggle-container-color: var(--md-sys-color-surface-container);
-    --_toggle-state-color: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant));
   }
 
   > #{$_label-item}#{$_filled-item}[aria-pressed=true],
   > .icon-button.filled[aria-pressed=true] {
-    --_toggle-container-color: var(--md-sys-color-primary);
-    --_toggle-state-color: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-primary), var(--md-sys-color-on-primary));
   }
 
   > #{$_label-item}.tonal[aria-pressed=false],
   > .icon-button.tonal[aria-pressed=false] {
-    --_toggle-container-color: var(--md-sys-color-secondary-container);
-    --_toggle-state-color: var(--md-sys-color-on-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container));
   }
 
   > #{$_label-item}.tonal[aria-pressed=true],
   > .icon-button.tonal[aria-pressed=true] {
-    --_toggle-container-color: var(--md-sys-color-secondary);
-    --_toggle-state-color: var(--md-sys-color-on-secondary);
-    color: var(--md-sys-color-on-secondary);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-secondary), var(--md-sys-color-on-secondary));
   }
 
   > #{$_label-item}.outlined[aria-pressed=false],
   > .icon-button.outlined[aria-pressed=false] {
-    --_toggle-container-color: transparent;
-    --_toggle-state-color: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(transparent, var(--md-sys-color-on-surface-variant));
   }
 
   > #{$_label-item}.outlined[aria-pressed=true],
   > .icon-button.outlined[aria-pressed=true] {
-    --_toggle-container-color: var(--md-sys-color-inverse-surface);
-    --_toggle-state-color: var(--md-sys-color-inverse-on-surface);
-    color: var(--md-sys-color-inverse-on-surface);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface));
   }
 
   > #{$_label-item}.elevated[aria-pressed=false] {
-    --_toggle-container-color: var(--md-sys-color-surface-container-low);
-    --_toggle-state-color: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-surface-container-low), var(--md-sys-color-primary));
   }
 
   > #{$_label-item}.elevated[aria-pressed=true] {
-    --_toggle-container-color: var(--md-sys-color-primary);
-    --_toggle-state-color: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-primary), var(--md-sys-color-on-primary));
   }
 
   > #{$_toggle-item}[aria-pressed]:hover {
@@ -315,10 +283,6 @@ $_connected-corners: (
       --md-comp-button-group-container-shape: var(--md-comp-button-group-inner-corner-corner-size);
     }
 
-    > #{$_item} {
-      min-width: 48px;
-    }
-
     // The corner goes through a variable so that pressing an item changes one
     // value rather than restating `border-radius`. A shorthand for the pressed
     // state would take the end items' round outer corners with it.
@@ -334,6 +298,7 @@ $_connected-corners: (
       --_round: calc(var(--md-comp-filled-button-container-height, 40px) / 2);
 
       flex: 1 1 0;
+      min-width: 48px;
       border-radius: var(--_corner);
 
       &.icon-button {

package/src/sass/components/_buttons.scss

@@ -51,7 +51,7 @@
 // specificity; `.chip .close` would make it two and shift every button rule.
 // The delete button needs no entry: `.chip .close` is already two classes, so
 // it ties the state rules and wins on order.
-$_not-btn: ".datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button";
+$_not-btn: ".datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button";
 
 // `label.button` is here for the file input: the control has to be a <label>
 // so that clicking it reaches the <input type="file"> it wraps, but it is a

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/_confetti.scss

@@ -0,0 +1,14 @@
+@use "../abstracts" as *;
+
+// Confetti. A <canvas class="confetti"> covers its nearest positioned
+// ancestor and lets clicks through to what is under it. The Confetti script
+// draws on it. A burst over the whole viewport needs no markup; the script
+// styles its own canvas inline.
+
+canvas.confetti {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}

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

@@ -50,6 +50,7 @@
 @forward "message";
 @forward "message-scroller";
 @forward "rich-text-editor";
+@forward "map";
 @forward "accordion";
 @forward "data-table";
 @forward "avatar";
@@ -74,3 +75,6 @@
 @forward "aura";
 @forward "kpi";
 @forward "marquee";
+@forward "confetti";
+@forward "particles";
+@forward "keypad";