@expressivecss/expressive 0.12.0 → 0.13.1

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

package/src/sass/components/_rich-text-editor.scss

@@ -0,0 +1,99 @@
+@use "../abstracts" as *;
+
+// Rich text editor. An outlined frame around a docked .toolbar and the
+// Tiptap editor, which the script mounts in .rich-text-editor-content after
+// the hidden <textarea>. The outline thickens to primary while the editor has
+// focus, as an outlined text field does. Without the script the textarea
+// stays visible and the toolbar, which could do nothing, is hidden.
+//
+// Tokens:
+//   --md-comp-rich-text-editor-min-height   160px (editable area)
+//   --md-comp-rich-text-editor-shape        16px  (frame corners)
+
+.rich-text-editor {
+  --md-comp-rich-text-editor-min-height: 160px;
+  --md-comp-rich-text-editor-shape: 16px;
+
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--md-sys-color-outline);
+  border-radius: var(--md-comp-rich-text-editor-shape);
+  background-color: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+
+  &:has(> .rich-text-editor-content :focus) {
+    outline: 1px solid var(--md-sys-color-primary);
+    border-color: var(--md-sys-color-primary);
+  }
+
+  &:not(:has(> .rich-text-editor-content)) > .toolbar {
+    display: none;
+  }
+
+  > textarea {
+    min-height: var(--md-comp-rich-text-editor-min-height);
+    border: none;
+  }
+
+  // A docked bar spaces its actions across the full width; formatting
+  // buttons read better packed at the start and wrapped.
+  > .toolbar {
+    --md-comp-toolbar-container-height: 56px;
+    --md-comp-toolbar-leading-space: 4px;
+    --md-comp-toolbar-trailing-space: 4px;
+
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: var(--md-comp-toolbar-between-space);
+    padding-block: 4px;
+    border-block-end: 1px solid var(--md-sys-color-outline-variant);
+  }
+}
+
+.rich-text-editor-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  @include typescale("body-large");
+
+  // The element Tiptap makes editable.
+  > [contenteditable] {
+    flex: 1;
+    min-height: var(--md-comp-rich-text-editor-min-height);
+    padding: 16px;
+    outline: none;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+
+    > :first-child {
+      margin-block-start: 0;
+    }
+
+    > :last-child {
+      margin-block-end: 0;
+    }
+
+    :not(pre) > code,
+    pre {
+      border-radius: 8px;
+      background-color: var(--md-sys-color-surface-container-highest);
+      font-family: ui-monospace, monospace;
+    }
+
+    :not(pre) > code {
+      padding: 0 4px;
+    }
+
+    pre {
+      padding: 12px 16px;
+      overflow-x: auto;
+      white-space: pre;
+    }
+
+    hr {
+      border: none;
+      border-block-start: 1px solid var(--md-sys-color-outline-variant);
+    }
+  }
+}

package/src/sass/components/_search.scss

@@ -194,6 +194,7 @@ $_bar: ":is(.search-bar, .searchbar)";
   background-color: var(--md-comp-search-view-container-color);
   color: var(--md-sys-color-on-surface);
   @include z-depth("3");
+  @include glass(var(--md-comp-search-view-container-color));
 
   // Two ways this surface is closed, and an author `display` beats both of the
   // UA rules that do the hiding - `[hidden] { display: none }` for the docked

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

@@ -49,6 +49,7 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
   outline: none;
   translate: var(--md-comp-side-sheet-shift) 0;
   transition: translate 280ms ease, border-radius 200ms ease;
+  @include glass(var(--md-comp-side-sheet-container-color));
 
   &:not(:modal) {
     z-index: 1100;

package/src/sass/components/_skeleton.scss

@@ -0,0 +1,81 @@
+@use "../abstracts" as *;
+
+// Skeleton. An empty block that holds the place of content still loading,
+// with a shimmer passing across it. The block has no text and nothing to
+// announce: mark the region being filled with aria-busy="true", and report
+// the wait through a status such as a loading indicator.
+//
+// Shapes:
+//   (default)  a box; size it with width and height
+//   .text      one line of body text; the last of several runs shorter
+//   .circle    an avatar-sized circle
+//
+// Reduced motion stops the shimmer and leaves the shapes.
+//
+// Tokens:
+//   --md-comp-skeleton-color          surface-container-highest
+//   --md-comp-skeleton-shimmer-color  surface at 50%
+//   --md-comp-skeleton-shape          8px (text 4px)
+//   --md-comp-skeleton-circle-size    40px
+
+.skeleton {
+  --md-comp-skeleton-color: var(--md-sys-color-surface-container-highest);
+  --md-comp-skeleton-shimmer-color: color-mix(
+    in oklab,
+    var(--md-sys-color-surface) 50%,
+    transparent
+  );
+  --md-comp-skeleton-shape: 8px;
+  --md-comp-skeleton-circle-size: 40px;
+
+  display: block;
+  box-sizing: border-box;
+  border-radius: var(--md-comp-skeleton-shape);
+  background-color: var(--md-comp-skeleton-color);
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--md-comp-skeleton-shimmer-color) 50%,
+    transparent 100%
+  );
+  background-repeat: no-repeat;
+  background-size: 50% 100%;
+  animation: skeleton-shimmer 1.5s linear infinite;
+
+  &:dir(rtl) {
+    animation-direction: reverse;
+  }
+
+  &.text {
+    --md-comp-skeleton-shape: 4px;
+
+    width: 100%;
+    height: 1em;
+    margin-block: 0.25em;
+
+    &:last-child:not(:first-child) {
+      width: 60%;
+    }
+  }
+
+  &.circle {
+    width: var(--md-comp-skeleton-circle-size);
+    height: var(--md-comp-skeleton-circle-size);
+    flex: none;
+    border-radius: 50%;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    background-image: none;
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid GrayText;
+  }
+}
+
+@keyframes skeleton-shimmer {
+  from { background-position: -100% 0; }
+  to { background-position: 200% 0; }
+}

package/src/sass/components/_snackbar.scss

@@ -99,6 +99,7 @@ $_bar: ".snackbar";
   @include typescale("body-medium");
   @include z-depth("3");
   cursor: default;
+  @include glass(var(--md-comp-snackbar-container-color));
 
   @include bp-up("medium") {
     width: max-content;

package/src/sass/components/_stat.scss

@@ -0,0 +1,86 @@
+@use "../abstracts" as *;
+
+// Stat. A <dl class="stats"> of key figures, such as a dashboard summary.
+// Each figure is a <div> tile holding a <dt> label, a <dd> value and an
+// optional <dd class="stat-change"> comparison. A description list keeps
+// each value paired with its label for assistive technology.
+//
+// .stat-change takes .up or .down for the arrow and .negative when the
+// change is bad news. The arrow is decoration: say the direction in the
+// text, as in "+12% from last month".
+//
+// Tokens:
+//   --md-comp-stat-container-color  surface-container-low
+//   --md-comp-stat-shape            16px
+//   --md-comp-stat-min-width        160px (tiles wrap below this)
+
+.stats {
+  --md-comp-stat-container-color: var(--md-sys-color-surface-container-low);
+  --md-comp-stat-shape: 16px;
+  --md-comp-stat-min-width: 160px;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--md-comp-stat-min-width)), 1fr));
+  gap: 12px;
+  margin: $element-top-margin 0 $element-bottom-margin;
+  padding: 0;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    padding: 16px;
+    border-radius: var(--md-comp-stat-shape);
+    background-color: var(--md-comp-stat-container-color);
+    color: var(--md-sys-color-on-surface);
+  }
+
+  dt {
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("title-small");
+  }
+
+  dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+    font-variant-numeric: tabular-nums;
+    @include typescale("headline-large");
+  }
+
+  dd.stat-change {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("label-large");
+
+    &:is(.up, .down)::before {
+      content: "";
+      flex: none;
+      width: 18px;
+      height: 18px;
+      background-color: currentColor;
+      mask: $trend-arrow center / 18px no-repeat;
+    }
+
+    &.down::before {
+      transform: rotate(180deg);
+    }
+
+    &.negative {
+      color: var(--md-sys-color-error);
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  .stats > div {
+    outline: 1px solid CanvasText;
+  }
+
+  .stats dd.stat-change::before {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
+}