@expressivecss/expressive 0.11.0 → 0.13.1

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

@@ -0,0 +1,157 @@
+@use "../abstracts" as *;
+
+// Mixed chart. The same <figure>, <figcaption> and <table> as a line
+// chart; MixedChart draws each series by its header cell's class: `column`
+// as columns from zero, `area` as a line over a fading fill, and anything
+// else as a line. `dashed` dashes a line. A series with `end` is drawn
+// against a second scale, set by data-end-min and data-end-max on the
+// figure. The plot, tooltip, labels and legend come from chart().
+//
+// Columns are full-height spans clipped to their value, as in the column
+// chart, behind an SVG of the lines and areas, as in the line chart.
+// Points on the cursor mark each line; the cursor bands the whole row.
+//
+// Tokens:
+//   --md-comp-mixed-chart-height         240px (sparkline 48px)
+//   --md-comp-mixed-chart-column-width   50% of each row's width
+//   --md-comp-mixed-chart-shape          4px, the column's end radius
+//   --md-comp-mixed-chart-line-width     3px (sparkline 2px)
+//   --md-comp-mixed-chart-grid-color     outline-variant
+//   --md-comp-mixed-chart-color-1..4     primary, tertiary, secondary,
+//                                        on-surface-variant
+
+@include chart("mixed-chart");
+
+.mixed-chart {
+  --md-comp-mixed-chart-column-width: 50%;
+  --md-comp-mixed-chart-shape: 4px;
+  --md-comp-mixed-chart-line-width: 3px;
+
+  &.sparkline {
+    --md-comp-mixed-chart-line-width: 2px;
+  }
+}
+
+.mixed-chart-plot {
+  isolation: isolate;
+}
+
+.mixed-chart-marks,
+.mixed-chart-marks > * {
+  position: absolute;
+  inset: 0;
+}
+
+.mixed-chart-marks > svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.mixed-chart-columns {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+
+  // A row: its columns side by side.
+  > div {
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    gap: 2px;
+    justify-self: center;
+    width: var(--md-comp-mixed-chart-column-width);
+  }
+
+  > div > span {
+    --mixed-chart-ends: var(--md-comp-mixed-chart-shape) var(--md-comp-mixed-chart-shape) 0 0;
+
+    background-color: var(--mixed-chart-color);
+    clip-path: inset(var(--top, 100%) 0 var(--bottom, 0%) round var(--mixed-chart-ends));
+
+    // A column below zero has its tip at the bottom.
+    &.negative {
+      --mixed-chart-ends: 0 0 var(--md-comp-mixed-chart-shape) var(--md-comp-mixed-chart-shape);
+    }
+  }
+
+  @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(--mixed-chart-ends));
+      }
+    }
+  }
+}
+
+.mixed-chart-line {
+  fill: none;
+  stroke: var(--mixed-chart-color);
+  stroke-width: var(--md-comp-mixed-chart-line-width);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.mixed-chart-series.dashed .mixed-chart-line {
+  stroke-dasharray: 2 8;
+}
+
+.mixed-chart-series:not(.area) .mixed-chart-area {
+  display: none;
+}
+
+.mixed-chart-series stop {
+  stop-color: var(--mixed-chart-color);
+  stop-opacity: 0;
+
+  &:first-child {
+    stop-opacity: 0.24;
+  }
+}
+
+// A band behind the highlighted row, with a point over each line. The
+// cursor makes no stacking context, so the band can go behind the marks
+// and the points in front of them.
+.mixed-chart-cursor {
+  width: calc(100% / var(--rows, 1));
+  margin-left: calc(-50% / var(--rows, 1));
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: var(--md-comp-mixed-chart-shape);
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+  }
+
+  > span {
+    position: absolute;
+    left: 50%;
+    z-index: 1;
+    width: 10px;
+    height: 10px;
+    border: 2px solid var(--md-sys-color-surface);
+    border-radius: 50%;
+    background-color: var(--mixed-chart-color);
+    translate: -50% -50%;
+  }
+
+  > .column {
+    display: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .mixed-chart-columns > div > span,
+  .mixed-chart-cursor > span {
+    forced-color-adjust: none;
+  }
+
+  .mixed-chart-cursor::before {
+    outline: 1px solid CanvasText;
+  }
+}

package/src/sass/components/_navbar.scss

@@ -53,7 +53,7 @@ $_heading: ":is(h1, h2, h3, h4, h5, h6)";
 $_title: ":is(#{$_heading}, hgroup)";
 $_search: ":is(.search-bar, .searchbar)";
 
-header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
+header:has(> #{$_bar}) {
   --md-comp-top-app-bar-container-color: var(--md-sys-color-surface);
   --md-comp-top-app-bar-scrolled-container-color: var(--md-sys-color-surface-container);
   --md-comp-top-app-bar-headline-color: var(--md-sys-color-on-surface);
@@ -494,14 +494,19 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
 // from the body (M3 Expressive). The animation only drives the mix
 // progress; a utility class on the header sets background-color itself
 // and is not overwritten. Without animation-timeline the bar stays at
-// rest (surface), the spec default.
-header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
+// rest (surface), the spec default. The @supports guard is load-bearing: an
+// engine that drops animation-timeline runs a 0s animation instead, and
+// fill-mode both holds the scrolled keyframe from the first frame.
+header:has(> #{$_bar}) {
   position: sticky;
   top: 0;
   z-index: 997;
-  animation: top-app-bar-scroll linear both;
-  animation-timeline: scroll(root);
-  animation-range: 0 8px;
+
+  @supports (animation-timeline: scroll()) {
+    animation: top-app-bar-scroll linear both;
+    animation-timeline: scroll(root);
+    animation-range: 0 8px;
+  }
 }
 
 @keyframes top-app-bar-scroll {

package/src/sass/components/_navigation-bar.scss

@@ -47,6 +47,7 @@
   padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
   background-color: var(--md-comp-nav-bar-container-color);
   color: var(--md-sys-color-on-surface);
+  @include glass(var(--md-comp-nav-bar-container-color));
 
   > :is(a, button) {
     position: relative;

package/src/sass/components/_navigation-rail.scss

@@ -57,6 +57,7 @@
   transition: width var(--md-comp-nav-rail-duration) ease,
     min-width var(--md-comp-nav-rail-duration) ease,
     padding var(--md-comp-nav-rail-duration) ease;
+  @include glass(var(--md-sys-color-surface-container));
 
   // Menu toggle.
   > button:not(.button, .icon-button):first-child {
@@ -282,6 +283,11 @@
     z-index: 998;
     @include z-depth("1");
 
+    // A blurred rail would become the containing block of the fixed scrim
+    // below and clip it to the rail, so a modal rail stays solid.
+    background-color: var(--md-sys-color-surface-container);
+    backdrop-filter: none;
+
     &::before {
       content: "";
       position: fixed;
@@ -298,6 +304,9 @@
       z-index: 998;
       @include z-depth("1");
 
+      background-color: var(--md-sys-color-surface-container);
+      backdrop-filter: none;
+
       &::before {
         content: "";
         position: fixed;

package/src/sass/components/_page-footer.scss

@@ -140,14 +140,3 @@ footer:not(:has(> nav:only-child)) > .container > small:last-child {
   }
 }
 
-// Sticky: pin the footer to the bottom of a short page. Only when the
-// landmark is a direct child of body — not a footer nested in a demo.
-body:has(> footer:not(:has(> nav:only-child))) {
-  min-height: 100dvh;
-  display: flex;
-  flex-direction: column;
-}
-
-body:has(> footer:not(:has(> nav:only-child))) > main {
-  flex: 1 0 auto;
-}

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

@@ -0,0 +1,203 @@
+@use "../abstracts" as *;
+
+// Pie chart. The same <figure>, <figcaption> and <table> as a line chart;
+// PieChart draws the first value column as slices of the whole, clockwise
+// from the top, with a legend of every row, its cell and its share. The
+// plot, tooltip and legend swatches come from chart(); the plot is a square
+// as wide as --md-comp-pie-chart-height.
+//
+// The slices are SVG in a -50 to 50 box with a radius of 46, under a mask
+// whose lines cut the gaps and whose circle, scaled here, cuts the donut's
+// hole. The value labels and the tooltip sit on a slice's middle from the
+// --turn PieChart sets, a fraction of a turn clockwise from the top.
+//
+// Modifiers: .donut cuts a hole and shows a <tfoot> total in it, .values
+// writes each slice's share on it, .sparkline is a small pie with no
+// legend or tooltip.
+//
+// Tokens:
+//   --md-comp-pie-chart-height       240px, the pie's diameter (sparkline 48px)
+//   --md-comp-pie-chart-hole         0.6, the donut hole's share of the diameter
+//   --md-comp-pie-chart-gap          1.5, the gap between slices in hundredths
+//                                    of the plot's width
+//   --md-comp-pie-chart-color-1..6   primary, tertiary, secondary,
+//                                    on-surface-variant, primary-container,
+//                                    tertiary-container
+//   --md-comp-pie-chart-on-color-1..6  on-primary, on-tertiary, on-secondary,
+//                                      surface, on-primary-container,
+//                                      on-tertiary-container; .values text
+
+@include chart("pie-chart");
+
+.pie-chart {
+  --md-comp-pie-chart-hole: 0.6;
+  --md-comp-pie-chart-gap: 1.5;
+  --md-comp-pie-chart-color-5: var(--md-sys-color-primary-container);
+  --md-comp-pie-chart-color-6: var(--md-sys-color-tertiary-container);
+  --md-comp-pie-chart-on-color-1: var(--md-sys-color-on-primary);
+  --md-comp-pie-chart-on-color-2: var(--md-sys-color-on-tertiary);
+  --md-comp-pie-chart-on-color-3: var(--md-sys-color-on-secondary);
+  --md-comp-pie-chart-on-color-4: var(--md-sys-color-surface);
+  --md-comp-pie-chart-on-color-5: var(--md-sys-color-on-primary-container);
+  --md-comp-pie-chart-on-color-6: var(--md-sys-color-on-tertiary-container);
+  // Where labels and the tooltip sit, as a share of the radius.
+  --pie-chart-label-at: 0.62;
+
+  gap: 16px;
+
+  &.donut {
+    // The middle of the ring.
+    --pie-chart-label-at: calc((1 + var(--md-comp-pie-chart-hole)) / 2);
+  }
+}
+
+@for $i from 1 through 6 {
+  .pie-chart [data-series="#{$i}"] {
+    --pie-chart-color: var(--md-comp-pie-chart-color-#{$i});
+    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-#{$i});
+  }
+}
+
+.pie-chart-plot {
+  width: min(100%, var(--md-comp-pie-chart-height));
+  height: auto;
+  aspect-ratio: 1;
+  margin-inline: auto;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+}
+
+.pie-chart-pie {
+  position: absolute;
+  inset: 0;
+
+  > svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// The origin of an SVG transform is the box's middle, (0, 0).
+.pie-chart-hole {
+  transform: scale(0);
+}
+
+.pie-chart.donut .pie-chart-hole {
+  transform: scale(var(--md-comp-pie-chart-hole));
+}
+
+.pie-chart-gaps {
+  stroke-width: var(--md-comp-pie-chart-gap);
+}
+
+.pie-chart-slice {
+  fill: var(--pie-chart-color);
+
+  // GROWN in pieChart.ts.
+  &.active {
+    transform: scale(1.06);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 400ms cubic-bezier(0.2, 0, 0, 1);
+
+    @starting-style {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+}
+
+.pie-chart-values > span,
+.pie-chart-tooltip {
+  --pie-chart-angle: calc(var(--turn, 0) * 1turn);
+
+  position: absolute;
+  left: calc(50% + sin(var(--pie-chart-angle)) * var(--pie-chart-label-at) * 46%);
+  top: calc(50% - cos(var(--pie-chart-angle)) * var(--pie-chart-label-at) * 46%);
+}
+
+.pie-chart-values > span {
+  translate: -50% -50%;
+  color: var(--pie-chart-on-color);
+  @include typescale("label-medium");
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.pie-chart-tooltip {
+  translate: 12px -50%;
+
+  &.end {
+    translate: calc(-100% - 12px) -50%;
+  }
+}
+
+.pie-chart-total {
+  position: absolute;
+  inset: 0;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  > * {
+    max-width: calc(80% * var(--md-comp-pie-chart-hole));
+    overflow-wrap: anywhere;
+  }
+
+  > strong {
+    color: var(--md-sys-color-on-surface);
+    @include typescale("headline-small");
+  }
+
+  > span {
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-small");
+  }
+}
+
+.pie-chart.donut .pie-chart-total {
+  display: flex;
+}
+
+// One row per slice: swatch, name, cell and share in aligned columns.
+.pie-chart-legend {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 8px;
+
+  > li {
+    display: contents;
+  }
+
+  > li > span:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  > li > span:not(:first-child) {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  > li > span:nth-child(2) {
+    color: var(--md-sys-color-on-surface);
+    font-weight: 500;
+  }
+}
+
+.pie-chart.sparkline .pie-chart-plot {
+  margin-inline: 0;
+}
+
+@media (forced-colors: active) {
+  .pie-chart-pie {
+    forced-color-adjust: none;
+  }
+}

package/src/sass/components/_popover.scss

@@ -0,0 +1,112 @@
+@use "../abstracts" as *;
+
+// Popover. A .popover is a native [popover] panel opened by the button that
+// names it with popovertarget (or commandfor). The browser owns opening,
+// light dismiss, Escape, the top layer and the button's expanded state; CSS
+// anchor positioning places the panel against that button, so there is no
+// JavaScript.
+//
+// It looks like an M3 rich tooltip, but it is a disclosure: it opens on
+// press, stays open while the user reads or acts, and can hold links and
+// buttons. A small one behind an info button is a toggletip.
+//
+// Placement (the panel flips to the other side when it would not fit):
+//   (default)  below, start edges aligned
+//   .top       above, start edges aligned
+//   .start     before the button, centered on it
+//   .end       after the button, centered on it
+//
+// Tokens:
+//   --md-comp-popover-container-color  surface-container
+//   --md-comp-popover-shape            12px
+//   --md-comp-popover-padding          12px 16px
+//   --md-comp-popover-max-width        320px
+//   --md-comp-popover-gap              4px (from the button)
+
+.popover {
+  --md-comp-popover-container-color: var(--md-sys-color-surface-container);
+  --md-comp-popover-shape: 12px;
+  --md-comp-popover-padding: 12px 16px;
+  --md-comp-popover-max-width: 320px;
+  --md-comp-popover-gap: 4px;
+
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(var(--md-comp-popover-max-width), calc(100vw - 16px));
+  inset: auto;
+  margin: var(--md-comp-popover-gap) 0;
+  padding: var(--md-comp-popover-padding);
+  overflow: visible;
+  border: 0;
+  border-radius: var(--md-comp-popover-shape);
+  background-color: var(--md-comp-popover-container-color);
+  color: var(--md-sys-color-on-surface-variant);
+  @include z-depth("2");
+  @include typescale("body-medium");
+
+  position-area: block-end span-inline-end;
+  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+
+  opacity: 0;
+  transition:
+    opacity 150ms ease-out,
+    display 150ms allow-discrete,
+    overlay 150ms allow-discrete;
+  @include glass(var(--md-comp-popover-container-color));
+
+  &:popover-open {
+    opacity: 1;
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
+
+  &.top {
+    position-area: block-start span-inline-end;
+  }
+
+  &.start,
+  &.end {
+    margin: 0 var(--md-comp-popover-gap);
+  }
+
+  &.start {
+    position-area: center inline-start;
+  }
+
+  &.end {
+    position-area: center inline-end;
+  }
+
+  > :is(h1, h2, h3, h4, h5, h6) {
+    margin: 0 0 4px;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("title-small");
+  }
+
+  > p {
+    margin: 0;
+  }
+
+  > p + p {
+    margin-block-start: 8px;
+  }
+
+  // Text buttons carry their own inset, so the row starts under the text.
+  > .popover-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 12px 0 -4px;
+    margin-inline-start: -12px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid CanvasText;
+  }
+}

package/src/sass/components/_progress.scss

@@ -18,7 +18,7 @@
 //   --md-comp-progress-circular-thickness  4px
 
 // M3 names this component "Progress indicators", linear and circular. The
-// class is `.progress`; `.preloader` is the Materialize name for the circular
+// class is `.progress`; `.preloader` is the older name for the circular
 // one and stays as an alias, as does `.progress.circular`.
 .progress,
 .preloader {
@@ -71,12 +71,24 @@ progress.progress {
     border-radius: var(--md-comp-progress-shape);
   }
 
-  &:indeterminate::-webkit-progress-value,
+  // Firefox draws no ::before/::after on <progress> and paints the track as the
+  // element's own background, so its indeterminate bar is the native one. It
+  // places that bar from the physical left and reads only margin-left, which is
+  // margin-inline-end in RTL, so both inline margins move. Keep this out of any
+  // -webkit- selector list: Chromium drops a list naming a pseudo-element it
+  // does not know.
   &:indeterminate::-moz-progress-bar {
-    background-color: transparent;
+    width: 40%;
+    margin-inline-end: 60%;
+    animation: progress-indeterminate-moz 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
 }
 
+@keyframes progress-indeterminate-moz {
+  from { margin-inline-start: -40%; margin-inline-end: 100%; }
+  to   { margin-inline-start: 100%; margin-inline-end: -40%; }
+}
+
 .progress > .determinate {
   position: absolute;
   inset-block: 0;
@@ -107,10 +119,12 @@ progress.progress {
   }
 }
 
-.progress > .indeterminate,
-progress.progress:indeterminate {
+.progress > .indeterminate {
   background-color: transparent;
+}
 
+.progress > .indeterminate,
+progress.progress:indeterminate {
   &::before,
   &::after {
     content: "";
@@ -147,7 +161,7 @@ progress.progress:indeterminate {
 // ---------------------------------------------------------------------------
 
 // The circular indicator. `.progress.circular` is the M3-aligned name;
-// `.preloader` is the Materialize one and still works.
+// `.preloader` remains a compatibility alias.
 :is(.preloader, .progress.circular) {
   box-sizing: border-box;
   display: inline-block;
@@ -218,6 +232,7 @@ progress.progress:indeterminate {
   progress.progress:indeterminate::-moz-progress-bar {
     background-color: CanvasText;
     width: 40%;
+    animation: none;
   }
 
   :is(.preloader, .progress.circular) {
@@ -254,4 +269,8 @@ progress.progress:indeterminate {
   .preloader {
     transform: none;
   }
+
+  progress.progress:indeterminate::-moz-progress-bar {
+    animation: none;
+  }
 }