@expressivecss/expressive 0.11.0 → 0.13.1

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

@@ -0,0 +1,285 @@
+@use "../abstracts" as *;
+
+// Bar chart. The column chart's markup and runtime turned on its side:
+// BarChart draws each row of the table as a band of bars growing from zero
+// along the inline axis, with the row's label at the inline start. The
+// plot is as tall as its rows, so --md-comp-bar-chart-height does not
+// apply; set the row height instead.
+//
+// The spans carry the column chart's --top and --bottom, the space after
+// and before each bar on the value axis. They are read across the plot,
+// and swapped when BarChart marks the bars .rtl, where they grow leftwards.
+//
+// Modifiers: .stacked draws one bar per row with each series after the
+// ones before it, .split separates stacked segments and rounds each one,
+// .track draws a full-width track behind each row's bars, .values writes
+// each cell's text from its bar's base, .sparkline is a small chart with
+// no labels, grid, legend or tooltip.
+//
+// Tokens:
+//   --md-comp-bar-chart-row-height   40px (sparkline 24px)
+//   --md-comp-bar-chart-bar-height   60% of each row's height
+//   --md-comp-bar-chart-shape        4px, the bar's end radius
+//   --md-comp-bar-chart-track-color  surface-container-highest
+//   --md-comp-bar-chart-grid-color   outline-variant
+//   --md-comp-bar-chart-color-1..4   primary, tertiary, secondary,
+//                                    on-surface-variant
+//   --md-comp-bar-chart-on-color-1..4  on-primary, on-tertiary,
+//                                      on-secondary, surface; .values text
+
+@include chart("bar-chart");
+
+.bar-chart {
+  --md-comp-bar-chart-row-height: 40px;
+  --md-comp-bar-chart-bar-height: 60%;
+  --md-comp-bar-chart-shape: 4px;
+  --md-comp-bar-chart-track-color: var(--md-sys-color-surface-container-highest);
+  --md-comp-bar-chart-on-color-1: var(--md-sys-color-on-primary);
+  --md-comp-bar-chart-on-color-2: var(--md-sys-color-on-tertiary);
+  --md-comp-bar-chart-on-color-3: var(--md-sys-color-on-secondary);
+  --md-comp-bar-chart-on-color-4: var(--md-sys-color-surface);
+
+  // 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.
+  // A stretched figure, as in a grid of cards, keeps its rows at their size.
+  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;
+  }
+
+  > .bar-chart-plot {
+    grid-column: 2;
+  }
+
+  > .bar-chart-labels {
+    grid-column: 1;
+  }
+
+  &.sparkline {
+    --md-comp-bar-chart-row-height: 24px;
+
+    display: flex;
+  }
+
+  &.split {
+    --bar-chart-joint: var(--md-comp-bar-chart-shape);
+    --bar-chart-gap: 2px;
+  }
+}
+
+@for $i from 1 through 4 {
+  .bar-chart [data-series="#{$i}"] {
+    --bar-chart-on-color: var(--md-comp-bar-chart-on-color-#{$i});
+  }
+}
+
+// Grid lines run down the plot at each quarter of the value axis.
+.bar-chart-plot {
+  isolation: isolate;
+  height: calc(var(--rows, 1) * var(--md-comp-bar-chart-row-height));
+  border-block-end: 0;
+  border-right: 1px solid var(--md-comp-bar-chart-grid-color);
+  background: linear-gradient(to right, var(--md-comp-bar-chart-grid-color) 1px, transparent 0) 0 0 / 25% 100%;
+}
+
+.bar-chart-labels {
+  grid-auto-rows: minmax(0, 1fr);
+  grid-auto-flow: row;
+  align-items: center;
+  text-align: end;
+}
+
+// .values adds a copy of the bars for their text; both share the geometry.
+.bar-chart-layers {
+  display: contents;
+}
+
+:is(.bar-chart-bars, .bar-chart-values) {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-auto-rows: minmax(0, 1fr);
+
+  // A row: its bars one under another, or overlapping when stacked.
+  > div {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-auto-rows: minmax(0, 1fr);
+    gap: 2px;
+    align-self: center;
+    height: var(--md-comp-bar-chart-bar-height);
+    border-radius: var(--md-comp-bar-chart-shape);
+  }
+
+  // The space before and after each bar. A split segment stands back
+  // from its joints by --bar-chart-base-gap and --bar-chart-tip-gap.
+  > div > span {
+    --bar-chart-left: calc(var(--bottom, 0%) + var(--bar-chart-base-gap, 0px));
+    --bar-chart-right: calc(var(--top, 100%) + var(--bar-chart-tip-gap, 0px));
+  }
+
+  &.rtl > div > span {
+    --bar-chart-left: calc(var(--top, 100%) + var(--bar-chart-tip-gap, 0px));
+    --bar-chart-right: calc(var(--bottom, 0%) + var(--bar-chart-base-gap, 0px));
+  }
+}
+
+.bar-chart-bars {
+  // --bar-chart-tip rounds the end away from zero, --bar-chart-base the
+  // end on zero.
+  > div > span {
+    --bar-chart-tip: var(--md-comp-bar-chart-shape);
+    --bar-chart-base: 0px;
+    --bar-chart-zero-left: calc(100% - var(--zero, 100%));
+    --bar-chart-zero-right: var(--zero, 100%);
+    --bar-chart-ends: var(--bar-chart-base) var(--bar-chart-tip) var(--bar-chart-tip) var(--bar-chart-base);
+
+    background-color: var(--bar-chart-color);
+    clip-path: inset(0 var(--bar-chart-right) 0 var(--bar-chart-left) round var(--bar-chart-ends));
+
+    // A bar below zero has its tip at the inline start.
+    &.negative {
+      --bar-chart-ends: var(--bar-chart-tip) var(--bar-chart-base) var(--bar-chart-base) var(--bar-chart-tip);
+    }
+  }
+
+  &.rtl > div > span {
+    --bar-chart-zero-left: var(--zero, 100%);
+    --bar-chart-zero-right: calc(100% - var(--zero, 100%));
+    --bar-chart-ends: var(--bar-chart-tip) var(--bar-chart-base) var(--bar-chart-base) var(--bar-chart-tip);
+
+    &.negative {
+      --bar-chart-ends: var(--bar-chart-base) var(--bar-chart-tip) var(--bar-chart-tip) var(--bar-chart-base);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    > div > span {
+      transition: clip-path 400ms cubic-bezier(0.2, 0, 0, 1);
+
+      @starting-style {
+        clip-path: inset(0 var(--bar-chart-zero-right) 0 var(--bar-chart-zero-left) round var(--bar-chart-ends));
+      }
+    }
+  }
+}
+
+// One bar per row, rounded only at the ends of the whole stack unless split.
+.bar-chart.stacked :is(.bar-chart-bars, .bar-chart-values) > div {
+  gap: 0;
+
+  > span {
+    grid-area: 1 / 1;
+
+    &:not(:last-child) {
+      --bar-chart-tip: var(--bar-chart-joint, 0px);
+      --bar-chart-tip-gap: var(--bar-chart-gap, 0px);
+    }
+
+    &:not(:first-child) {
+      --bar-chart-base: var(--bar-chart-joint, 0px);
+      --bar-chart-base-gap: var(--bar-chart-gap, 0px);
+    }
+  }
+}
+
+.bar-chart.track .bar-chart-bars > div {
+  background-color: var(--md-comp-bar-chart-track-color);
+
+  > span {
+    --bar-chart-base: var(--md-comp-bar-chart-shape);
+  }
+}
+
+// Each cell's text from its bar's base: the series' on-color over the bar,
+// the label color past its end, so a short bar's value runs on beyond it.
+// The span spans the row, so padding and the gradient share its width.
+.bar-chart-values {
+  pointer-events: none;
+
+  > div > span {
+    --bar-chart-text-color: var(--md-sys-color-on-surface);
+
+    overflow: hidden;
+    align-content: center;
+    padding: 0 8px 0 calc(var(--bar-chart-left) + 8px);
+    background: linear-gradient(to right, var(--bar-chart-text-color) var(--bar-chart-left), var(--bar-chart-on-color) 0 calc(100% - var(--bar-chart-right)), var(--bar-chart-text-color) 0);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    @include typescale("label-medium");
+    font-variant-numeric: tabular-nums;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // The base on the right: a bar below zero, or above it in RTL.
+  &:not(.rtl) > div > span.negative,
+  &.rtl > div > span:not(.negative) {
+    padding: 0 calc(var(--bar-chart-right) + 8px) 0 8px;
+    text-align: right;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    > div > span {
+      transition: opacity 200ms linear 400ms;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+// A stacked segment keeps its text inside it; the next segment follows.
+.bar-chart.stacked .bar-chart-values > div > span {
+  padding: 0 calc(var(--bar-chart-right) + 8px) 0 calc(var(--bar-chart-left) + 8px);
+  clip-path: inset(0 var(--bar-chart-right) 0 var(--bar-chart-left));
+}
+
+// A band behind the highlighted row's bars.
+.bar-chart-cursor {
+  z-index: -1;
+  inset-block: auto;
+  inset-inline: 0;
+  height: calc(100% / var(--rows, 1));
+  border-radius: var(--md-comp-bar-chart-shape);
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+  translate: 0 -50%;
+}
+
+// Below the highlighted row, or above it in the lower half.
+.bar-chart-tooltip {
+  left: 50%;
+  translate: -50% calc(var(--md-comp-bar-chart-row-height) / 2);
+
+  &.end {
+    translate: -50% calc(-100% - var(--md-comp-bar-chart-row-height) / 2);
+  }
+}
+
+@media (forced-colors: active) {
+  // The mixin clears the grid, but this partial's plot rule comes later.
+  .bar-chart-plot {
+    background: none;
+  }
+
+  .bar-chart-bars > div > span,
+  .bar-chart-values > div > span {
+    forced-color-adjust: none;
+  }
+
+  .bar-chart-values > div > span {
+    --bar-chart-text-color: CanvasText;
+  }
+
+  .bar-chart-cursor {
+    outline: 1px solid CanvasText;
+  }
+}

package/src/sass/components/_bottom-sheet.scss

@@ -53,6 +53,7 @@ dialog.bottom-sheet {
   @include z-depth("1");
   translate: 0 var(--md-comp-bottom-sheet-shift);
   transition: translate 280ms ease;
+  @include glass(var(--md-comp-bottom-sheet-container-color));
 
   // Non-modal `show()` is not in the top layer — sit above page content
   // and below snackbars (z-index 10000).

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

@@ -297,7 +297,6 @@ $_connected-corners: (
     --md-comp-button-group-container-shape: 9999px;
     --md-comp-button-group-inner-corner-corner-size: 8px;
     --md-comp-button-group-pressed-inner-corner-corner-size: 4px;
-    --md-comp-button-group-selected-inner-corner-corner-size: 50%;
 
     display: grid;
     grid-auto-flow: column;
@@ -323,16 +322,27 @@ $_connected-corners: (
     // 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.
+    //
+    // md.comp.button-group.connected.selected.inner-corner.corner-size is 50%,
+    // which Compose resolves against the shorter side. A CSS percentage
+    // resolves per axis and turns a wide item into an ellipse, and 9999px
+    // would spend most of the morph above the clamp, so the default is half
+    // the item's own height. Setting the token on the group still overrides it.
     > #{$_item} {
       --_corner: var(--md-comp-button-group-inner-corner-corner-size);
       --_outer-corner: var(--md-comp-button-group-container-shape);
+      --_round: calc(var(--md-comp-filled-button-container-height, 40px) / 2);
 
       flex: 1 1 0;
       border-radius: var(--_corner);
 
+      &.icon-button {
+        --_round: calc(var(--md-comp-icon-button-container-height) / 2);
+      }
+
       &[aria-pressed=true] {
-        --_corner: var(--md-comp-button-group-selected-inner-corner-corner-size);
-        --_outer-corner: var(--md-comp-button-group-selected-inner-corner-corner-size);
+        --_corner: var(--md-comp-button-group-selected-inner-corner-corner-size, var(--_round));
+        --_outer-corner: var(--md-comp-button-group-selected-inner-corner-corner-size, var(--_round));
       }
 
       &:is(:active, .button-group-pressed) {

package/src/sass/components/_cards.scss

@@ -18,6 +18,9 @@
 //   padding    16dp
 
 $_card: "article";
+// A direct <figure> is media, unless it is a chart. :where() keeps the
+// selectors at their old specificity.
+$_media-figure: "figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-chart, .heatmap-chart, .radar-chart, .radial-chart, .mixed-chart))";
 
 :where(#{$_card}) {
   --md-comp-elevated-card-container-color: var(--md-sys-color-surface-container-low);
@@ -278,10 +281,10 @@ article > .actions {
 
 article > img,
 article > picture,
-article > figure,
+article > #{$_media-figure},
 article > .primary-action > img,
 article > .primary-action > picture,
-article > .primary-action > figure {
+article > .primary-action > #{$_media-figure} {
   display: block;
   width: 100%;
   margin: 0;
@@ -301,16 +304,16 @@ article > .primary-action > figure img {
   border-radius: var(--md-comp-card-media-shape);
 }
 
-article > figure {
+article > #{$_media-figure} {
   position: relative;
 }
 
-article > .primary-action > figure {
+article > .primary-action > #{$_media-figure} {
   position: relative;
 }
 
-article > figure > figcaption,
-article > .primary-action > figure > figcaption {
+article > #{$_media-figure} > figcaption,
+article > .primary-action > #{$_media-figure} > figcaption {
   position: absolute;
   inset-inline-start: var(--md-comp-card-content-padding);
   inset-inline-end: auto;
@@ -334,16 +337,16 @@ article > .primary-action > figure > figcaption {
 
 // Keep meaningful icons on the same opaque role pair as caption text. The
 // surface/on-surface pairing isolates both from unpredictable image colors.
-article > figure > figcaption > :is(.material-symbols, .card-icon, svg),
-article > .primary-action > figure > figcaption > :is(.material-symbols, .card-icon, svg) {
+article > #{$_media-figure} > figcaption > :is(.material-symbols, .card-icon, svg),
+article > .primary-action > #{$_media-figure} > figcaption > :is(.material-symbols, .card-icon, svg) {
   flex: 0 0 auto;
   color: inherit;
   font-size: var(--md-comp-card-icon-size);
   line-height: 1;
 }
 
-article > figure > figcaption > svg,
-article > .primary-action > figure > figcaption > svg {
+article > #{$_media-figure} > figcaption > svg,
+article > .primary-action > #{$_media-figure} > figcaption > svg {
   fill: currentColor;
 }
 
@@ -442,7 +445,7 @@ article > .primary-action > figure > figcaption > svg {
 
   > img,
   > picture,
-  > figure {
+  > #{$_media-figure} {
     grid-column: 1;
     grid-row: 1 / -1;
     width: 100%;
@@ -507,7 +510,7 @@ article.small, article.medium, article.large {
   display: flex;
   flex-direction: column;
 
-  > img, > picture, > figure {
+  > img, > picture, > #{$_media-figure} {
     flex: 0 1 60%;
     min-height: 0;
     overflow: hidden;
@@ -533,7 +536,7 @@ article.horizontal.medium,
 article.horizontal.large {
   display: grid;
 
-  > img, > picture, > figure {
+  > img, > picture, > #{$_media-figure} {
     max-height: none;
   }
 }

package/src/sass/components/_carousel.scss

@@ -76,7 +76,6 @@
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     overscroll-behavior-inline: contain;
-    touch-action: pan-x;
     scrollbar-width: none;
 
     &::-webkit-scrollbar {
@@ -485,7 +484,6 @@
     scroll-snap-type: y mandatory;
     overscroll-behavior-inline: auto;
     overscroll-behavior-block: contain;
-    touch-action: pan-y;
   }
 
   .carousel-track > .carousel-item {
@@ -527,7 +525,6 @@
     scroll-snap-type: x mandatory;
     overscroll-behavior-inline: contain;
     overscroll-behavior-block: auto;
-    touch-action: pan-x;
   }
 
   .carousel-track > .carousel-item {
@@ -565,17 +562,22 @@
     cursor: grab;
   }
 
-  .carousel.dragging {
+  // A drag writes the scroll position directly, and snapping would pull each
+  // write back to a snap point. Each layout that sets scroll-snap-type with
+  // more classes than `.carousel.dragging` needs its own arm here.
+  .carousel.dragging,
+  .carousel.uncontained.snap.dragging,
+  .carousel.full-screen.full-screen-horizontal.dragging {
     > .carousel-track {
       cursor: grabbing;
       scroll-behavior: auto;
       scroll-snap-type: none;
       user-select: none;
     }
+  }
 
-    .carousel-item {
-      pointer-events: none;
-    }
+  .carousel.dragging .carousel-item {
+    pointer-events: none;
   }
 }
 

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

@@ -0,0 +1,134 @@
+@use "../abstracts" as *;
+
+// Column chart. The same <figure>, <figcaption> and <table> as a line
+// chart; ColumnChart draws each row as a group of columns, one per series,
+// growing from zero. The plot, tooltip, labels and legend come from chart().
+//
+// Each column is a full-height span clipped to its value with clip-path
+// inset(), using the --top and --bottom percentages ColumnChart sets, so
+// the rounded ends keep their radius at any size and resizing needs no
+// script. --zero on the columns is the baseline the columns grow from.
+//
+// Modifiers: .stacked draws one column per row with each series on the
+// ones before it, .fade fades each column toward its base, .track draws a
+// full-height track behind each row's columns, .sparkline is a small chart
+// with no axis, grid, legend or tooltip.
+//
+// Tokens:
+//   --md-comp-column-chart-height         240px (sparkline 48px)
+//   --md-comp-column-chart-column-width   60% of each row's width
+//   --md-comp-column-chart-shape          4px, the column's end radius
+//   --md-comp-column-chart-track-color    surface-container-highest
+//   --md-comp-column-chart-grid-color     outline-variant
+//   --md-comp-column-chart-color-1..4     primary, tertiary, secondary,
+//                                         on-surface-variant
+
+@include chart("column-chart");
+
+.column-chart {
+  --md-comp-column-chart-column-width: 60%;
+  --md-comp-column-chart-shape: 4px;
+  --md-comp-column-chart-track-color: var(--md-sys-color-surface-container-highest);
+}
+
+.column-chart-columns {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+
+  // A row: its columns side by side, or overlapping when stacked.
+  > div {
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    gap: 2px;
+    justify-self: center;
+    width: var(--md-comp-column-chart-column-width);
+    border-radius: var(--md-comp-column-chart-shape);
+  }
+
+  // --column-chart-tip rounds the end away from zero, --column-chart-base
+  // the end on zero.
+  > div > span {
+    --column-chart-tip: var(--md-comp-column-chart-shape);
+    --column-chart-base: 0px;
+    --column-chart-ends: var(--column-chart-tip) var(--column-chart-tip) var(--column-chart-base) var(--column-chart-base);
+
+    background-color: var(--column-chart-color);
+    clip-path: inset(var(--top, 100%) 0 var(--bottom, 0%) round var(--column-chart-ends));
+
+    // A column below zero has its tip at the bottom.
+    &.negative {
+      --column-chart-ends: var(--column-chart-base) var(--column-chart-base) var(--column-chart-tip) var(--column-chart-tip);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    > div > span {
+      transition: clip-path 400ms cubic-bezier(0.2, 0, 0, 1);
+
+      @starting-style {
+        clip-path: inset(var(--zero, 100%) 0 calc(100% - var(--zero, 100%)) round var(--column-chart-ends));
+      }
+    }
+  }
+}
+
+// One column per row, rounded only at the ends of the whole stack.
+.column-chart.stacked .column-chart-columns > div {
+  gap: 0;
+
+  > span {
+    grid-area: 1 / 1;
+
+    &:not(:last-child) {
+      --column-chart-tip: 0px;
+    }
+
+    &:not(:first-child) {
+      --column-chart-base: 0px;
+    }
+  }
+}
+
+// Each column fades from its tip toward zero.
+.column-chart.fade .column-chart-columns > div > span {
+  background: linear-gradient(var(--column-chart-color) var(--top, 100%), transparent calc(100% - var(--bottom, 0%)));
+
+  &.negative {
+    background: linear-gradient(to top, var(--column-chart-color) var(--bottom, 0%), transparent calc(100% - var(--top, 100%)));
+  }
+}
+
+.column-chart.track .column-chart-columns > div {
+  background-color: var(--md-comp-column-chart-track-color);
+
+  > span {
+    --column-chart-base: var(--md-comp-column-chart-shape);
+  }
+}
+
+// A band behind the highlighted row's columns.
+.column-chart-plot {
+  isolation: isolate;
+}
+
+.column-chart-cursor {
+  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);
+  translate: -50% 0;
+}
+
+@media (forced-colors: active) {
+  .column-chart-columns > div > span {
+    forced-color-adjust: none;
+  }
+
+  .column-chart-cursor {
+    outline: 1px solid CanvasText;
+  }
+}