@expressivecss/expressive 0.12.0 → 0.14.1

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;
+  }
+}

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

@@ -0,0 +1,205 @@
+@use "../abstracts" as *;
+
+// Radar chart. The same <figure>, <figcaption> and <table> as a line chart;
+// RadarChart draws each row as a spoke, clockwise from the top, and each
+// series as a shape joining its values on the spokes, from zero in the
+// middle to the scale's top at the rim. The tooltip, legend and swatches
+// come from chart(); the plot is a square as wide as
+// --md-comp-radar-chart-height, with room round it for the row labels.
+//
+// The grid and shapes are SVG in a -50 to 50 box whose edge is the rim.
+// Strokes and points keep their pixel widths at any size. The axis labels,
+// the cursor spoke and the tooltip are HTML placed by the --turn RadarChart
+// sets, a fraction of a turn clockwise from the top.
+//
+// Modifiers: .area fills each shape, .points marks each value, .sparkline
+// is a small chart with no labels, legend or tooltip.
+// A series header cell's classes reach its shape: <th class="dashed">.
+//
+// Tokens:
+//   --md-comp-radar-chart-height        240px, the rim's diameter (sparkline 48px)
+//   --md-comp-radar-chart-line-width    2px (sparkline 1.5px)
+//   --md-comp-radar-chart-label-room    80px, the labels' width beside the rim
+//   --md-comp-radar-chart-grid-color    outline-variant
+//   --md-comp-radar-chart-color-1..4    primary, tertiary, secondary,
+//                                       on-surface-variant
+
+@include chart("radar-chart");
+
+.radar-chart {
+  --md-comp-radar-chart-line-width: 2px;
+  --md-comp-radar-chart-label-room: 80px;
+  // How far past the rim a label starts.
+  --radar-chart-label-offset: 8px;
+
+  &.sparkline {
+    --md-comp-radar-chart-line-width: 1.5px;
+    --md-comp-radar-chart-label-room: 0px;
+    --radar-chart-label-offset: 0px;
+  }
+}
+
+.radar-chart-plot {
+  width: min(
+    100% - 2 * (var(--md-comp-radar-chart-label-room) + var(--radar-chart-label-offset)),
+    var(--md-comp-radar-chart-height)
+  );
+  height: auto;
+  aspect-ratio: 1;
+  // Two lines of label above the top spoke and below the bottom one.
+  margin:
+    min(
+      var(--md-comp-radar-chart-label-room),
+      2 * var(--md-sys-typescale-body-small-line-height) + var(--radar-chart-label-offset)
+    )
+    auto;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+}
+
+.radar-chart-web {
+  position: absolute;
+  inset: 0;
+
+  > svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+}
+
+.radar-chart-grid {
+  fill: none;
+  stroke: var(--md-comp-radar-chart-grid-color);
+  stroke-width: 1px;
+  vector-effect: non-scaling-stroke;
+}
+
+.radar-chart-shape,
+.radar-chart-points {
+  stroke: var(--radar-chart-color);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.radar-chart-shape {
+  fill: var(--radar-chart-color);
+  fill-opacity: 0;
+  stroke-width: var(--md-comp-radar-chart-line-width);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 400ms cubic-bezier(0.2, 0, 0, 1), scale 400ms cubic-bezier(0.2, 0, 0, 1);
+
+    @starting-style {
+      opacity: 0;
+      scale: 0.6;
+    }
+  }
+}
+
+.radar-chart.area .radar-chart-shape {
+  fill-opacity: 0.24;
+}
+
+.radar-chart-series.dashed .radar-chart-shape {
+  stroke-dasharray: 2 6;
+}
+
+.radar-chart-points {
+  fill: none;
+  stroke-width: calc(var(--md-comp-radar-chart-line-width) * 3);
+}
+
+// Each label sits just past its spoke's tip and leans away from the middle:
+// right of a spoke on the right, above the top one, and so on.
+.radar-chart-axes {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--md-sys-color-on-surface-variant);
+  @include typescale("body-small");
+
+  > li {
+    --radar-chart-angle: calc(var(--turn, 0) * 1turn);
+
+    position: absolute;
+    left: calc(50% + sin(var(--radar-chart-angle)) * (50% + var(--radar-chart-label-offset)));
+    top: calc(50% - cos(var(--radar-chart-angle)) * (50% + var(--radar-chart-label-offset)));
+    width: max-content;
+    max-width: var(--md-comp-radar-chart-label-room);
+    translate:
+      calc(-50% + sin(var(--radar-chart-angle)) * 50%)
+      calc(-50% - cos(var(--radar-chart-angle)) * 50%);
+    text-align: center;
+  }
+}
+
+// A spoke from the middle to the rim, turned about the middle. LineChart
+// places the points on it by their share of its length from the rim.
+.radar-chart-cursor {
+  inset: auto auto 50% 50%;
+  width: 1px;
+  height: 50%;
+  background-color: var(--md-sys-color-outline);
+  transform-origin: bottom;
+  rotate: calc(var(--turn, 0) * 1turn);
+
+  > span {
+    position: absolute;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    border: 2px solid var(--md-sys-color-surface);
+    border-radius: 50%;
+    background-color: var(--radar-chart-color);
+    translate: -50% -50%;
+  }
+}
+
+// Past the spoke's tip, on the side away from the middle.
+.radar-chart-tooltip {
+  --radar-chart-angle: calc(var(--turn, 0) * 1turn);
+
+  left: calc(50% + sin(var(--radar-chart-angle)) * 50%);
+  top: calc(50% - cos(var(--radar-chart-angle)) * 50%);
+  translate: 12px -50%;
+
+  &.end {
+    translate: calc(-100% - 12px) -50%;
+  }
+}
+
+.radar-chart-legend {
+  justify-content: center;
+}
+
+.radar-chart.sparkline {
+  .radar-chart-plot {
+    margin: 0;
+  }
+
+  .radar-chart-axes {
+    display: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .radar-chart-web {
+    forced-color-adjust: none;
+  }
+
+  .radar-chart-axes {
+    forced-color-adjust: auto;
+  }
+
+  .radar-chart-cursor {
+    background-color: CanvasText;
+  }
+
+  .radar-chart-cursor > span {
+    forced-color-adjust: none;
+  }
+}

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

@@ -0,0 +1,174 @@
+@use "../abstracts" as *;
+
+// Radial chart. The same <figure>, <figcaption> and <table> as a line chart;
+// RadialChart draws each row of the first value column as a ring, outermost
+// first, filled clockwise from the top as a share of data-max. The plot,
+// tooltip and legend swatches come from chart(); the plot is a square as
+// wide as --md-comp-radial-chart-height, or half of one for a gauge.
+//
+// The rings are SVG circles in a -50 to 50 box, turned to start at the top
+// (or at nine o'clock for a gauge). Each fill's dash is its share of the
+// circle, from the --radial-chart-dash RadialChart sets, so it can grow in;
+// --radial-chart-offset moves a round-capped dash in by half the width.
+//
+// Modifiers: .gauge draws half circles over the middle, .sparkline is a
+// small chart with no legend or tooltip. A <tfoot> row shows in the middle.
+//
+// Tokens:
+//   --md-comp-radial-chart-height       240px, the rings' diameter (sparkline 48px)
+//   --md-comp-radial-chart-thickness    8, a ring's width in hundredths of the
+//                                       diameter; thinner when rings crowd
+//   --md-comp-radial-chart-gap          2, the gap between rings, in the same units
+//   --md-comp-radial-chart-track-color  surface-container-highest; transparent
+//                                       hides the tracks
+//   --md-comp-radial-chart-color-1..4   primary, tertiary, secondary,
+//                                       on-surface-variant
+
+@include chart("radial-chart");
+
+.radial-chart {
+  --md-comp-radial-chart-thickness: 8;
+  --md-comp-radial-chart-gap: 2;
+  --md-comp-radial-chart-track-color: var(--md-sys-color-surface-container-highest);
+
+  gap: 16px;
+}
+
+.radial-chart-plot {
+  width: min(100%, var(--md-comp-radial-chart-height));
+  height: auto;
+  aspect-ratio: 1;
+  margin-inline: auto;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+}
+
+.radial-chart.gauge .radial-chart-plot {
+  aspect-ratio: 2;
+  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
+}
+
+.radial-chart-rings {
+  position: absolute;
+  inset: 0;
+
+  > svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.radial-chart-track,
+.radial-chart-ring {
+  fill: none;
+  stroke-dasharray: var(--radial-chart-dash, none);
+  stroke-dashoffset: var(--radial-chart-offset, 0);
+}
+
+.radial-chart-track {
+  stroke: var(--md-comp-radial-chart-track-color);
+}
+
+// A gauge's track ends where its fill would, so it ends round too.
+.radial-chart.gauge .radial-chart-track {
+  stroke-linecap: round;
+}
+
+.radial-chart-ring {
+  stroke: var(--radial-chart-color);
+  stroke-linecap: round;
+
+  &.empty {
+    visibility: hidden;
+  }
+
+  // The rings beside the active one fade.
+  .radial-chart-rings:has(.active) &:not(.active) {
+    opacity: 0.38;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: stroke-dasharray 600ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms cubic-bezier(0.2, 0, 0, 1);
+
+    @starting-style {
+      stroke-dasharray: 0 1000;
+    }
+  }
+}
+
+.radial-chart-tooltip {
+  translate: 12px -50%;
+
+  &.end {
+    translate: calc(-100% - 12px) -50%;
+  }
+}
+
+// The middle, inside the innermost ring; a gauge's sits on its base line.
+.radial-chart-total {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  > * {
+    max-width: calc(var(--radial-chart-middle, 100%) * 0.8);
+    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");
+  }
+}
+
+.radial-chart.gauge .radial-chart-total {
+  justify-content: end;
+}
+
+// One row per ring: swatch, name and cell in aligned columns.
+.radial-chart-legend {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+
+  > li {
+    display: contents;
+  }
+
+  > li > span:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  > li > span:last-child {
+    text-align: end;
+    color: var(--md-sys-color-on-surface);
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+.radial-chart.sparkline .radial-chart-plot {
+  // A set width, so the chart keeps its size as a flex item.
+  width: var(--md-comp-radial-chart-height);
+  margin-inline: 0;
+}
+
+@media (forced-colors: active) {
+  .radial-chart-rings {
+    forced-color-adjust: none;
+  }
+}