@expressivecss/expressive 0.12.0 → 0.13.1

package/src/sass/components/_countdown.scss

@@ -0,0 +1,89 @@
+@use "../abstracts" as *;
+
+// Countdown. A number from 0 to 999 whose digits roll to the new value when
+// it changes: <span class="countdown" style="--md-comp-countdown-value: 42">42</span>.
+// Set the property and the text together. The text is the accessible value;
+// it stays in the accessibility tree but text-indent pushes it past the
+// clipped edge. The visible digits are two strips in ::before (00 to 99, the
+// leading two digits) and ::after (0 to 9), moved up one line per step, with
+// empty alt text so screen readers skip them.
+//
+// inline-flex, not inline-block: WebKit puts a clipped inline-block's
+// baseline at its bottom edge, which lifted the digits off the line. A flex
+// container takes the baseline of its text in every engine.
+//
+// The box is 1, 2 or 3ch wide, as many digits as the value has, or at least
+// --md-comp-countdown-digits, which pads with leading zeros. Values clamp
+// to 0–999. Size and color come from the surrounding text.
+//
+// Tokens, read with fallbacks so a page or container can set them too:
+//   --md-comp-countdown-value      the number shown, set per element   0
+//   --md-comp-countdown-digits     minimum digits, 1 to 3              1
+//   --md-comp-countdown-duration   roll duration                       400ms
+//   --md-comp-countdown-easing     roll easing                         cubic-bezier(0.2, 0, 0, 1)
+
+$_timing: var(--md-comp-countdown-duration, 400ms) var(--md-comp-countdown-easing, cubic-bezier(0.2, 0, 0, 1));
+$_tens: "";
+$_ones: "";
+@for $i from 0 through 99 {
+  @if $i < 10 {
+    $_tens: $_tens + "0#{$i}\A ";
+    $_ones: $_ones + "#{$i}\A ";
+  } @else {
+    $_tens: $_tens + "#{$i}\A ";
+  }
+}
+
+.countdown {
+  --_value: clamp(0, var(--md-comp-countdown-value, 0), 999);
+  --_lead: round(down, var(--_value) / 10);
+  --_digits: calc(
+    1
+    + clamp(0, max(var(--md-comp-countdown-digits, 1) - 1, var(--_lead)), 1)
+    + clamp(0, max(var(--md-comp-countdown-digits, 1) - 2, round(down, var(--_value) / 100)), 1)
+  );
+
+  position: relative;
+  display: inline-flex;
+  width: calc(var(--_digits) * 1ch);
+  height: 1em;
+  overflow: clip;
+  direction: ltr;
+  font-variant-numeric: tabular-nums;
+  line-height: 1em;
+  text-indent: 3ch;
+  white-space: nowrap;
+  transition: width $_timing;
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    text-indent: 0;
+    white-space: pre;
+    transition: translate $_timing;
+  }
+
+  // The left of this strip hangs past the box when the value is short.
+  &::before {
+    content: $_tens / "";
+    right: 1ch;
+    width: 2ch;
+    translate: 0 calc(var(--_lead) * -1em);
+  }
+
+  &::after {
+    content: $_ones / "";
+    right: 0;
+    width: 1ch;
+    translate: 0 calc(mod(var(--_value), 10) * -1em);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &,
+    &::before,
+    &::after {
+      transition: none;
+    }
+  }
+}

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

@@ -0,0 +1,188 @@
+@use "../abstracts" as *;
+
+// Data table. A .data-table wraps one native <table> and is its scroll
+// container, so the table keeps its element semantics: a <table> set to
+// display:block can lose its table role in some engines.
+//
+// The header row sticks to the top of the wrapper. That only shows once the
+// wrapper scrolls vertically, so give it a max-block-size. Cells use the
+// separate border model because collapsed borders do not travel with a
+// sticky header.
+//
+// Sorting and selection are page state written into the markup:
+//   th[aria-sort]      a <button> in the header cell shows the sort arrow
+//   row checkbox       a checked box in the first cell selects the row
+// The framework only draws them; the page reorders rows.
+//
+// Tokens:
+//   --md-comp-data-table-container-color           surface
+//   --md-comp-data-table-shape                     12px
+//   --md-comp-data-table-outline-color             outline-variant
+//   --md-comp-data-table-header-height             56px / dense 48px
+//   --md-comp-data-table-row-height                52px / dense 40px
+//   --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;
+  --md-comp-data-table-outline-color: var(--md-sys-color-outline-variant);
+  --md-comp-data-table-header-height: 56px;
+  --md-comp-data-table-row-height: 52px;
+  --md-comp-data-table-cell-padding: 16px;
+  --md-comp-data-table-selected-container-color: var(--md-sys-color-secondary-container);
+
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: $element-top-margin 0 $element-bottom-margin;
+  overflow: auto;
+  border: 1px solid var(--md-comp-data-table-outline-color);
+  border-radius: var(--md-comp-data-table-shape);
+  background-color: var(--md-comp-data-table-container-color);
+  color: var(--md-sys-color-on-surface);
+  @include focus-visible;
+
+  &.dense {
+    --md-comp-data-table-header-height: 48px;
+    --md-comp-data-table-row-height: 40px;
+  }
+
+  > table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  > table > caption {
+    padding: 16px var(--md-comp-data-table-cell-padding) 8px;
+    text-align: start;
+    color: var(--md-sys-color-on-surface);
+    @include typescale("title-medium");
+  }
+
+  tr {
+    border: 0;
+  }
+
+  :is(th, td) {
+    box-sizing: border-box;
+    height: var(--md-comp-data-table-row-height);
+    padding: 0 var(--md-comp-data-table-cell-padding);
+    border-bottom: 1px solid var(--md-comp-data-table-outline-color);
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  td {
+    @include typescale("body-medium");
+  }
+
+  tbody th {
+    @include typescale("body-medium");
+    font-weight: 500;
+  }
+
+  > table > :is(tbody, tfoot):last-child > tr:last-child > :is(th, td) {
+    border-bottom: 0;
+  }
+
+  > table > thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    height: var(--md-comp-data-table-header-height);
+    background-color: var(--md-comp-data-table-container-color);
+    color: var(--md-sys-color-on-surface-variant);
+    white-space: nowrap;
+    @include typescale("title-small");
+  }
+
+  .numeric {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  > table > tbody > tr {
+    transition: background-color 0.2s ease-out;
+
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-surface) state-opacity("hover"),
+        transparent
+      );
+    }
+
+    &:has(> :first-child input[type="checkbox"]:checked) {
+      background-color: var(--md-comp-data-table-selected-container-color);
+      color: var(--md-sys-color-on-secondary-container);
+    }
+  }
+
+  // A checkbox cell hugs its box rather than taking a text column's width.
+  :is(th, td):has(> label > input[type="checkbox"]:only-child) {
+    width: 1px;
+    padding-inline-end: 0;
+  }
+
+  // The sort control fills the header text and carries a trailing arrow.
+  th > button {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 40px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 4px;
+    background: none;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    text-align: inherit;
+    cursor: pointer;
+    appearance: none;
+    @include focus-visible;
+
+    &::after {
+      content: "";
+      flex: none;
+      width: 18px;
+      height: 18px;
+      background-color: currentColor;
+      mask: $_data-table-arrow center / 18px no-repeat;
+      opacity: 0;
+      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+    }
+
+    &:hover::after {
+      opacity: 0.38;
+    }
+  }
+
+  // Numbers line up on their end edge, so the arrow leads their label.
+  th.numeric > button {
+    flex-direction: row-reverse;
+  }
+
+  th:is([aria-sort="ascending"], [aria-sort="descending"]) {
+    color: var(--md-sys-color-on-surface);
+
+    > button::after {
+      opacity: 1;
+    }
+  }
+
+  th[aria-sort="descending"] > button::after {
+    transform: rotate(180deg);
+  }
+}
+
+@media (forced-colors: active) {
+  .data-table th > button::after {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
+}

package/src/sass/components/_dialog.scss

@@ -38,6 +38,7 @@ dialog {
   outline: none;
   overflow-wrap: anywhere;
   @include z-depth("3");
+  @include glass(var(--md-comp-basic-dialog-container-color));
 
   &::backdrop {
     background-color: var(--md-comp-scrim-color);

package/src/sass/components/_empty-state.scss

@@ -0,0 +1,78 @@
+@use "../abstracts" as *;
+
+// Empty state. What a view shows when it has nothing to list yet, no search
+// results, or no access: an optional icon or image, a heading, supporting
+// text and actions, centered in the space the content would fill.
+//
+// Anatomy is the HTML, in order:
+//   icon or <img>    a leading icon sits in a tonal circle; an image keeps its ratio
+//   h1–h6            the headline; pick the level the page outline needs
+//   <p>              supporting text
+//   .empty-state-actions   buttons or links
+//
+// Tokens:
+//   --md-comp-empty-state-padding               48px 24px
+//   --md-comp-empty-state-max-width             40ch (text)
+//   --md-comp-empty-state-icon-size             48px
+//   --md-comp-empty-state-icon-container-size   96px
+//   --md-comp-empty-state-icon-container-color  surface-container-high
+//   --md-comp-empty-state-image-max-width       240px
+
+.empty-state {
+  --md-comp-empty-state-padding: 48px 24px;
+  --md-comp-empty-state-max-width: 40ch;
+  --md-comp-empty-state-icon-size: 48px;
+  --md-comp-empty-state-icon-container-size: 96px;
+  --md-comp-empty-state-icon-container-color: var(--md-sys-color-surface-container-high);
+  --md-comp-empty-state-image-max-width: 240px;
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: var(--md-comp-empty-state-padding);
+  text-align: center;
+  color: var(--md-sys-color-on-surface);
+
+  > #{$icon}:first-child {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--md-comp-empty-state-icon-container-size);
+    height: var(--md-comp-empty-state-icon-container-size);
+    margin-block-end: 16px;
+    border-radius: 50%;
+    background-color: var(--md-comp-empty-state-icon-container-color);
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: var(--md-comp-empty-state-icon-size);
+    --md-icon-optical-size: 48;
+  }
+
+  > img:first-child {
+    max-width: min(100%, var(--md-comp-empty-state-image-max-width));
+    height: auto;
+    margin-block-end: 16px;
+  }
+
+  > :is(h1, h2, h3, h4, h5, h6) {
+    max-width: var(--md-comp-empty-state-max-width);
+    margin: 0;
+    @include typescale("headline-small");
+  }
+
+  > p {
+    max-width: var(--md-comp-empty-state-max-width);
+    margin: 0;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-medium");
+  }
+
+  > .empty-state-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    margin-block-start: 16px;
+  }
+}

package/src/sass/components/_expanding-card.scss

@@ -43,6 +43,9 @@ dialog.expanding-card-dialog {
   overflow-y: auto;
   overscroll-behavior: contain;
   background-color: var(--md-comp-expanding-card-container-color);
+  // Opaque, so the frost inherited from `dialog` would only cost a blur on
+  // every frame of the morph.
+  backdrop-filter: none;
   color: var(--md-sys-color-on-surface);
   border: 0;
   border-radius: var(--md-comp-expanding-card-expanded-shape);

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

@@ -0,0 +1,156 @@
+@use "../abstracts" as *;
+
+// Heatmap chart. The same <figure>, <figcaption> and <table> as a line
+// chart; HeatmapChart draws every cell of the table as a square of a grid,
+// with the row headers at the inline start and the column headers below.
+// The plot, tooltip and legend come from chart(); the plot is as tall as
+// 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.
+//
+// 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
+
+@include chart("heatmap-chart");
+
+.heatmap-chart {
+  --md-comp-heatmap-chart-row-height: 32px;
+  --md-comp-heatmap-chart-gap: 3px;
+  --md-comp-heatmap-chart-shape: 4px;
+  --md-comp-heatmap-chart-color: var(--md-sys-color-primary);
+  --md-comp-heatmap-chart-empty-color: var(--md-sys-color-surface-container-highest);
+}
+
+// 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-plot {
+  height: auto;
+  border: 0;
+  background: none;
+}
+
+.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);
+  color: var(--md-sys-color-on-surface-variant);
+  @include typescale("body-small");
+}
+
+.heatmap-chart-row,
+.heatmap-chart-column {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.heatmap-chart-row {
+  align-self: center;
+  padding-inline-end: 8px;
+}
+
+.heatmap-chart-column {
+  padding-block-start: 4px;
+  text-align: center;
+
+  // A label that runs on over empty ones starts at its own column.
+  &.run {
+    text-align: start;
+  }
+}
+
+.heatmap-chart-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  min-width: 0;
+  border-radius: var(--md-comp-heatmap-chart-shape);
+  background-color: var(--heatmap-chart-color);
+  // White or black, whichever contrasts more. Y in XYZ D65 is the WCAG
+  // relative luminance; below 0.1791 white wins. The steep clamp leaves no
+  // gray between the two, and the white is D65 white.
+  --heatmap-chart-white: clamp(0, (0.1791 - y) * 1000000, 1);
+
+  color: color(
+    from var(--heatmap-chart-color) xyz-d65
+    calc(var(--heatmap-chart-white) * 0.9505) var(--heatmap-chart-white) calc(var(--heatmap-chart-white) * 1.089)
+  );
+  @include typescale("label-small");
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+
+  &.gap {
+    background: none;
+    box-shadow: inset 0 0 0 1px var(--md-comp-heatmap-chart-grid-color);
+  }
+
+  // Set by HeatmapChart.show().
+  &.active {
+    outline: 2px solid var(--md-sys-color-on-surface);
+    outline-offset: 1px;
+  }
+}
+
+.heatmap-chart-tooltip {
+  // 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;
+  }
+}
+
+.heatmap-chart-legend {
+  align-items: center;
+  justify-content: end;
+  gap: 8px;
+}
+
+.heatmap-chart-scale {
+  width: 96px;
+  height: 8px;
+  border-radius: 4px;
+  // 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))
+  );
+}
+
+@media (forced-colors: active) {
+  // The shades are the data, so they keep their colors.
+  .heatmap-chart-cell,
+  .heatmap-chart-scale {
+    forced-color-adjust: none;
+  }
+
+  .heatmap-chart-cell.active {
+    outline-color: Highlight;
+  }
+}

package/src/sass/components/_index.scss

@@ -47,3 +47,30 @@
 @forward "search";
 @forward "drag-handle";
 @forward "scrim";
+@forward "message";
+@forward "message-scroller";
+@forward "rich-text-editor";
+@forward "accordion";
+@forward "data-table";
+@forward "avatar";
+@forward "skeleton";
+@forward "empty-state";
+@forward "countdown";
+@forward "popover";
+@forward "stepper";
+@forward "timeline";
+@forward "tree";
+@forward "stat";
+@forward "command-palette";
+@forward "questionnaire";
+@forward "line-chart";
+@forward "column-chart";
+@forward "bar-chart";
+@forward "pie-chart";
+@forward "heatmap-chart";
+@forward "radar-chart";
+@forward "radial-chart";
+@forward "mixed-chart";
+@forward "aura";
+@forward "kpi";
+@forward "marquee";