@expressivecss/expressive 0.12.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/_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/_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/_questionnaire.scss

@@ -0,0 +1,144 @@
+@use "../abstracts" as *;
+
+// Questionnaire. A <form class="questionnaire"> asks one question at a time.
+// Each <fieldset> child is a question: its <legend> is the prompt, a <p> is
+// the description, and the answers are radio or checkbox labels (a <small>
+// in a label describes that answer) or a text field. A
+// <p class="questionnaire-error"> shows when the question needs an answer. A
+// <footer> holds the buttons: value="previous", "skip" and "next", and a
+// submit button.
+//
+// The Questionnaire component hides every question but the current one,
+// adds the progress row above them and shows only the buttons that apply.
+// Without it every question shows, the navigation buttons stay hidden and
+// the submit button sends the form.
+//
+// Choices are outlined rows; a selected one fills with secondary-container,
+// the M3 colour for a selected item in a list.
+//
+// Tokens:
+//   --md-comp-questionnaire-choice-shape            12px
+//   --md-comp-questionnaire-choice-outline-color    outline-variant
+//   --md-comp-questionnaire-choice-selected-color   secondary-container
+
+.questionnaire {
+  --md-comp-questionnaire-choice-shape: 12px;
+  --md-comp-questionnaire-choice-outline-color: var(--md-sys-color-outline-variant);
+  --md-comp-questionnaire-choice-selected-color: var(--md-sys-color-secondary-container);
+
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  > .questionnaire-progress {
+    display: grid;
+    gap: 8px;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("label-large");
+
+    > .progress {
+      margin: 0;
+    }
+  }
+
+  > fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+
+    > legend {
+      max-width: 100%;
+      margin: 0 0 8px;
+      padding: 0;
+      @include typescale("title-large");
+    }
+
+    > p {
+      margin: 0;
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("body-medium");
+    }
+
+    > .questionnaire-error {
+      margin-block-start: 8px;
+      color: var(--md-sys-color-error);
+    }
+
+    &:not(.invalid) > .questionnaire-error {
+      display: none;
+    }
+
+    > label:has(> :is([type="radio"], [type="checkbox"])) {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      align-items: center;
+      column-gap: 16px;
+      box-sizing: border-box;
+      min-height: 56px;
+      margin: 8px 0 0;
+      padding: 8px 16px;
+      border: 1px solid var(--md-comp-questionnaire-choice-outline-color);
+      border-radius: var(--md-comp-questionnaire-choice-shape);
+      transition: background-color .2s ease, border-color .2s ease;
+
+      p + & {
+        margin-block-start: 16px;
+      }
+
+      // The checkbox draws its tick on the label at left: 0; follow the
+      // padding, on either side.
+      &:has(> [type="checkbox"])::before {
+        left: auto;
+        inset-inline-start: 16px;
+      }
+
+      &:has(> :checked) {
+        border-color: transparent;
+        background-color: var(--md-comp-questionnaire-choice-selected-color);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      &:has(> :disabled) {
+        border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
+        color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+      }
+
+      &:has(> small) > input {
+        grid-row: span 2;
+      }
+
+      > small {
+        grid-column: 2;
+        color: var(--md-sys-color-on-surface-variant);
+        @include typescale("body-medium");
+      }
+    }
+  }
+
+  // The selector matches the page footer's, which every <footer> gets.
+  > footer:not(:has(> .navigation-bar:only-child)) {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 8px;
+
+    > [value="previous"] {
+      margin-inline-end: auto;
+    }
+  }
+
+  // Buttons set their own display, which would beat the [hidden] the
+  // component writes.
+  > fieldset[hidden],
+  > footer > button[hidden] {
+    display: none;
+  }
+
+  // Before the component runs, every question shows and only submit applies.
+  &:not(:has(> .questionnaire-progress)) > footer > :is([value="previous"], [value="skip"], [value="next"]) {
+    display: none;
+  }
+}