@expressivecss/expressive 0.12.0 → 0.14.1

package/src/sass/components/_index.scss

@@ -47,3 +47,33 @@
 @forward "search";
 @forward "drag-handle";
 @forward "scrim";
+@forward "message";
+@forward "message-scroller";
+@forward "rich-text-editor";
+@forward "map";
+@forward "accordion";
+@forward "data-table";
+@forward "avatar";
+@forward "skeleton";
+@forward "empty-state";
+@forward "countdown";
+@forward "popover";
+@forward "stepper";
+@forward "timeline";
+@forward "tree";
+@forward "stat";
+@forward "command-palette";
+@forward "questionnaire";
+@forward "line-chart";
+@forward "column-chart";
+@forward "bar-chart";
+@forward "pie-chart";
+@forward "heatmap-chart";
+@forward "radar-chart";
+@forward "radial-chart";
+@forward "mixed-chart";
+@forward "aura";
+@forward "kpi";
+@forward "marquee";
+@forward "confetti";
+@forward "particles";

package/src/sass/components/_kpi.scss

@@ -0,0 +1,162 @@
+@use "../abstracts" as *;
+
+// KPI. One key figure in a card: an <article class="kpi"> holding a <dl>
+// with a <dt> label, a <dd class="kpi-value"> and an optional
+// <dd class="kpi-trend"> chip. The article is a card, so filled and
+// outlined work as they do there.
+//
+// Optional parts, in source order after the <dl>:
+//   .kpi-icon     a tonal icon box, written inside the <dt>
+//   .kpi-actions  a button or menu, placed at the end of the label row
+//   a chart       a sparkline .line-chart or .column-chart figure
+//   .progress     a <progress> bar toward a goal
+//   <p>           supporting text
+//   .kpi-footer   details or links under a divider
+//
+// .kpi-trend takes .up or .down for the arrow and .negative when the change
+// is bad news; .negative also turns a line, column, bar or mixed chart's
+// first series to the error color. The arrow is decoration: say the
+// direction in the text, as in "+12%".
+//
+// Tokens:
+//   --md-comp-kpi-icon-container-color   primary-container
+//   --md-comp-kpi-icon-color             on-primary-container
+//   --md-comp-kpi-trend-container-color  secondary-container
+//   --md-comp-kpi-trend-color            on-secondary-container
+
+$_trend-charts: "line-chart", "column-chart", "bar-chart", "mixed-chart";
+
+.kpi {
+  --md-comp-kpi-icon-container-color: var(--md-sys-color-primary-container);
+  --md-comp-kpi-icon-color: var(--md-sys-color-on-primary-container);
+  --md-comp-kpi-trend-container-color: var(--md-sys-color-secondary-container);
+  --md-comp-kpi-trend-color: var(--md-sys-color-on-secondary-container);
+
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: var(--md-comp-card-content-padding, 16px);
+
+  > * {
+    min-width: 0;
+    margin: 0;
+  }
+
+  > dl {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &:has(> .kpi-actions) > dl {
+    padding-inline-end: 40px;
+  }
+
+  // The card is the containing block, so the button sits in its corner
+  // without making the label row taller.
+  > .kpi-actions {
+    position: absolute;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+  }
+
+  dt {
+    display: flex;
+    flex-basis: 100%;
+    align-items: center;
+    gap: 12px;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("title-small");
+  }
+
+  dd {
+    margin: 0;
+  }
+
+  .kpi-icon {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+    background-color: var(--md-comp-kpi-icon-container-color);
+    color: var(--md-comp-kpi-icon-color);
+    font-size: 24px;
+  }
+
+  .kpi-value {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    color: var(--md-sys-color-on-surface);
+    font-variant-numeric: tabular-nums;
+    @include typescale("headline-large");
+  }
+
+  .kpi-trend {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 2px 8px;
+    border-radius: 8px;
+    background-color: var(--md-comp-kpi-trend-container-color);
+    color: var(--md-comp-kpi-trend-color);
+    font-variant-numeric: tabular-nums;
+    @include typescale("label-large");
+
+    &:is(.up, .down) {
+      padding-inline-start: 4px;
+    }
+
+    &: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 {
+      --md-comp-kpi-trend-container-color: var(--md-sys-color-error-container);
+      --md-comp-kpi-trend-color: var(--md-sys-color-on-error-container);
+    }
+  }
+
+  > p {
+    padding: 0;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-medium");
+  }
+
+  > .kpi-footer {
+    // Auto top margin keeps the footer at the bottom of a stretched card.
+    margin: auto calc(-1 * var(--md-comp-card-content-padding, 16px)) calc(-1 * var(--md-comp-card-content-padding, 16px));
+    padding: 12px var(--md-comp-card-content-padding, 16px);
+    border-top: 1px solid var(--md-sys-color-outline-variant);
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-medium");
+  }
+}
+
+@each $chart in $_trend-charts {
+  .kpi:has(.kpi-trend.negative) > .#{$chart} {
+    --md-comp-#{$chart}-color-1: var(--md-sys-color-error);
+  }
+}
+
+@media (forced-colors: active) {
+  .kpi-trend {
+    outline: 1px solid CanvasText;
+  }
+
+  .kpi-trend::before {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
+}

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

@@ -0,0 +1,102 @@
+@use "../abstracts" as *;
+
+// Line chart. A <figure class="line-chart"> holds a <figcaption> and a
+// <table> of data: the first column labels the x axis, each further column
+// is a series named by its header cell. Without JavaScript the table shows.
+// LineChart draws an SVG from the table and hides the table visually, so a
+// screen reader still reads the data as a table. The plot, tooltip, labels
+// and legend are shared with the column chart through chart().
+//
+// The SVG stretches to the plot (preserveAspectRatio="none") and strokes
+// stay a constant width, so resizing needs no script. Points, the cursor
+// and the tooltip are HTML positioned in percentages for the same reason.
+//
+// Modifiers: .area fills under each line, .stacked stacks each series on
+// the ones before it and fills between them, .fade fades the line ends,
+// .sparkline is a small chart with no axis, grid, legend or tooltip.
+// A series header cell's classes reach its line: <th class="dashed">.
+//
+// Tokens:
+//   --md-comp-line-chart-height       240px (sparkline 48px)
+//   --md-comp-line-chart-line-width   3px (sparkline 2px)
+//   --md-comp-line-chart-grid-color   outline-variant
+//   --md-comp-line-chart-color-1..4   primary, tertiary, secondary,
+//                                     on-surface-variant
+
+@include chart("line-chart");
+
+.line-chart {
+  --md-comp-line-chart-line-width: 3px;
+
+  &.sparkline {
+    --md-comp-line-chart-line-width: 2px;
+  }
+}
+
+.line-chart-plot > svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.line-chart-line {
+  fill: none;
+  stroke: var(--line-chart-color);
+  stroke-width: var(--md-comp-line-chart-line-width);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.line-chart-series.dashed .line-chart-line {
+  stroke-dasharray: 2 8;
+}
+
+.line-chart-area {
+  display: none;
+
+  .line-chart:is(.area, .stacked) & {
+    display: inline;
+  }
+}
+
+.line-chart-series stop {
+  stop-color: var(--line-chart-color);
+  stop-opacity: 0;
+
+  &:first-child {
+    stop-opacity: 0.24;
+  }
+}
+
+.line-chart.fade .line-chart-plot > svg {
+  mask-image: linear-gradient(to right, transparent, #000 15% 85%, transparent);
+}
+
+.line-chart-cursor {
+  width: 1px;
+  background-color: var(--md-sys-color-outline);
+
+  > span {
+    position: absolute;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    border: 2px solid var(--md-sys-color-surface);
+    border-radius: 50%;
+    background-color: var(--line-chart-color);
+    translate: -50% -50%;
+  }
+}
+
+@media (forced-colors: active) {
+  .line-chart-cursor {
+    background-color: CanvasText;
+  }
+
+  .line-chart-cursor > span {
+    forced-color-adjust: none;
+  }
+}

package/src/sass/components/_map.scss

@@ -0,0 +1,188 @@
+@use "sass:map";
+@use "../abstracts" as *;
+
+// Map. A MapLibre map in a .map frame. The page loads maplibre-gl.css; these
+// rules restyle what MapLibre draws and add the ExpressiveCSS parts:
+//
+//   .map-marker    a point at data-lng-lat. With no content of its own it is
+//                  a primary dot; anything else inside replaces the dot.
+//                  A .map-marker-label shows below it (.top: above), and a
+//                  child .tooltip works as on any button.
+//   .map-popup     moved into a MapLibre popup, drawn as a surface card.
+//   .map-controls  a corner stack of .icon-button controls, top right
+//                  unless .top-left, .bottom-left or .bottom-right. A
+//                  .map-control-group joins buttons on one surface.
+//
+// Until the script starts the map, markers, popups and controls are hidden.
+// MapLibre moves markers and popups out of the frame, so the hiding rules
+// stop matching them once the map runs.
+//
+// Tokens:
+//   --md-comp-map-height              400px
+//   --md-comp-map-shape               16px
+//   --md-comp-map-marker-color        primary
+//   --md-comp-map-marker-ring-color   surface
+//   --md-comp-map-route-color         primary
+//   --md-comp-map-arc-color           tertiary
+//   --md-comp-map-cluster-color       primary
+//   --md-comp-map-cluster-label-color on-primary
+//   --md-comp-map-popup-max-width     280px
+//   --md-comp-map-control-offset      12px
+//
+// The script sets --md-comp-map-bearing, so a [data-action="compass"] icon
+// points north.
+
+.map {
+  --md-comp-map-height: 400px;
+  --md-comp-map-shape: 16px;
+  --md-comp-map-marker-color: var(--md-sys-color-primary);
+  --md-comp-map-marker-ring-color: var(--md-sys-color-surface);
+  --md-comp-map-route-color: var(--md-sys-color-primary);
+  --md-comp-map-arc-color: var(--md-sys-color-tertiary);
+  --md-comp-map-cluster-color: var(--md-sys-color-primary);
+  --md-comp-map-cluster-label-color: var(--md-sys-color-on-primary);
+  --md-comp-map-popup-max-width: 280px;
+  --md-comp-map-control-offset: 12px;
+
+  position: relative;
+  overflow: hidden;
+  block-size: var(--md-comp-map-height);
+  border-radius: var(--md-comp-map-shape);
+  background-color: var(--md-sys-color-surface-container);
+
+  &:fullscreen {
+    border-radius: 0;
+  }
+
+  > :is(.map-marker, .map-popup),
+  &:not(.maplibregl-map) > .map-controls {
+    display: none;
+  }
+}
+
+// Absolute, as MapLibre places it; a child .tooltip would otherwise make
+// the marker relative.
+.map .map-marker {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  @include focus-visible;
+
+  &:not(:has(> :not(.tooltip, .map-marker-label))) {
+    inline-size: 16px;
+    block-size: 16px;
+    border: 2px solid var(--md-comp-map-marker-ring-color);
+    border-radius: 50%;
+    background-color: var(--md-comp-map-marker-color);
+    @include z-depth(1);
+  }
+
+  &.location {
+    --md-comp-map-marker-color: var(--md-sys-color-tertiary);
+
+    box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-comp-map-marker-color) 24%, transparent);
+    cursor: default;
+  }
+}
+
+.map-marker-label {
+  position: absolute;
+  inset-block-start: calc(100% + 4px);
+  padding: 2px 8px;
+  border-radius: 8px;
+  background-color: var(--md-sys-color-surface-container-highest);
+  color: var(--md-sys-color-on-surface);
+  @include typescale("label-medium");
+  white-space: nowrap;
+  pointer-events: none;
+
+  &.top {
+    inset-block: auto calc(100% + 4px);
+  }
+}
+
+// MapLibre's popup, as an M3 surface card. The tip is dropped; the offset
+// keeps the card clear of its marker.
+//
+// maplibre-gl.css is unlayered, so it beats this layer wherever both set a
+// property. Those declarations are !important; an important declaration in
+// a layer outranks a normal unlayered one.
+.map {
+  .maplibregl-popup-content {
+    max-inline-size: var(--md-comp-map-popup-max-width);
+    padding: 12px 16px !important;
+    border-radius: 12px !important;
+    background: var(--md-sys-color-surface-container-low) !important;
+    color: var(--md-sys-color-on-surface);
+    @include typescale("body-medium");
+    box-shadow: map.get($elevations, "2") !important;
+
+    &:has(> .maplibregl-popup-close-button) {
+      padding-inline-end: 44px;
+    }
+
+    :is(h1, h2, h3, h4, h5, h6) {
+      margin: 0 0 4px;
+      @include typescale("title-small");
+    }
+
+    p {
+      margin: 0;
+      font: inherit;
+    }
+  }
+
+  .maplibregl-popup-tip {
+    display: none;
+  }
+
+  .maplibregl-popup-close-button {
+    inset: 4px 4px auto auto !important;
+    inline-size: 32px;
+    block-size: 32px;
+    border-radius: 50% !important;
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 20px;
+    line-height: 1;
+
+    &:hover {
+      background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
+    }
+
+    @include focus-visible;
+  }
+}
+
+.map-controls {
+  position: absolute;
+  inset: var(--md-comp-map-control-offset) var(--md-comp-map-control-offset) auto auto;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &.top-left { inset: var(--md-comp-map-control-offset) auto auto var(--md-comp-map-control-offset); }
+  &.bottom-left { inset: auto auto var(--md-comp-map-control-offset) var(--md-comp-map-control-offset); }
+  &.bottom-right { inset: auto var(--md-comp-map-control-offset) var(--md-comp-map-control-offset) auto; }
+
+  > .icon-button,
+  > .map-control-group {
+    border-radius: 9999px;
+    background-color: var(--md-sys-color-surface-container-low);
+    @include z-depth(2);
+  }
+
+  [data-action="compass"] > .material-symbols {
+    rotate: var(--md-comp-map-bearing, 0deg);
+  }
+}
+
+.map-control-group {
+  display: flex;
+  flex-direction: column;
+}

package/src/sass/components/_marquee.scss

@@ -0,0 +1,111 @@
+@use "../abstracts" as *;
+
+// Marquee. A strip of logos, images or text that scrolls without end:
+// <div class="marquee"> holding two identical <ul class="marquee-content">
+// groups. The second is a copy that fills the gap as the first scrolls
+// out. Mark it aria-hidden="true" and give each link or button in it
+// tabindex="-1", so screen readers and the Tab key meet each item once and
+// a click on the copy still works. Each group is at least as wide as the
+// strip and spreads short content out, so one copy is always enough.
+//
+// Both groups move one group's length plus the gap per cycle, then jump
+// back to where they started, which looks the same.
+//
+// Modifiers:
+//   .vertical  scroll up; the strip is 320px tall unless the page sets a height
+//   .reverse   scroll toward the inline end, or down
+//   .fade      fade the items out at both edges
+//   .paused    stop; toggle it from a pause button
+//
+// Hover or focus inside the strip also pauses it, so a link holds still
+// while it is read or tabbed to. Horizontal strips scroll toward the inline
+// start, so right to left pages scroll right. Reduced motion stops the
+// scroll, drops the copy and lets the strip scroll by hand.
+//
+// Tokens:
+//   --md-comp-marquee-duration   one cycle                       20s
+//   --md-comp-marquee-gap        space between items and groups  32px
+//   --md-comp-marquee-fade-size  length of each edge fade (.fade) 48px
+
+.marquee {
+  --md-comp-marquee-duration: 20s;
+  --md-comp-marquee-gap: 32px;
+  --md-comp-marquee-fade-size: 48px;
+  --_sign: 1;
+
+  display: flex;
+  gap: var(--md-comp-marquee-gap);
+  overflow: hidden;
+
+  &:dir(rtl) {
+    --_sign: -1;
+  }
+
+  &.vertical {
+    flex-direction: column;
+    height: 320px;
+  }
+
+  &.fade {
+    --_fade: transparent, #000 var(--md-comp-marquee-fade-size), #000 calc(100% - var(--md-comp-marquee-fade-size)), transparent;
+    mask-image: linear-gradient(to right, var(--_fade));
+  }
+
+  &.vertical.fade {
+    mask-image: linear-gradient(to bottom, var(--_fade));
+  }
+}
+
+.marquee-content {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--md-comp-marquee-gap);
+  min-width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  animation: marquee-x var(--md-comp-marquee-duration) linear infinite;
+
+  > * {
+    flex: none;
+  }
+
+  .vertical > & {
+    flex-direction: column;
+    min-width: 0;
+    min-height: 100%;
+    animation-name: marquee-y;
+  }
+
+  .reverse > & {
+    animation-direction: reverse;
+  }
+
+  .marquee:is(:hover, :focus-within, .paused) > & {
+    animation-play-state: paused;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .marquee {
+    overflow: auto;
+  }
+
+  .marquee-content {
+    animation: none;
+
+    &[aria-hidden="true"] {
+      display: none;
+    }
+  }
+}
+
+@keyframes marquee-x {
+  to { translate: calc((100% + var(--md-comp-marquee-gap)) * var(--_sign) * -1) 0; }
+}
+
+@keyframes marquee-y {
+  to { translate: 0 calc(-100% - var(--md-comp-marquee-gap)); }
+}

package/src/sass/components/_menu.scss

@@ -78,6 +78,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
   color: var(--md-comp-menu-item-label-text-color);
   @include z-depth("2");
   transition: border-radius 200ms ease;
+  @include glass(var(--md-comp-menu-container-color));
 
   // The [vibrant] arms are not a second mapping - they are the statement that
   // a menu on a vibrant surface IS a vibrant menu. Without them the foundation
@@ -360,6 +361,10 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.14))
       drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
 
+    // The drop-shadow filter is the items' backdrop root, so they could only
+    // blur the menu itself. Grouped menus stay solid.
+    backdrop-filter: none;
+
     > li:not(.divider, .optgroup, .gap, .label) {
       padding-inline: var(--md-comp-menu-group-padding);
       background-color: var(--md-comp-menu-container-color);
@@ -605,6 +610,11 @@ menu[id].grouped
 .menu-trigger {
   cursor: pointer;
 
+  // A context menu's trigger is a region of content, not a control.
+  &[data-context-menu] {
+    cursor: auto;
+  }
+
   // The trigger stays in its pressed state for as long as its menu is open.
   &[aria-expanded="true"] {
     background-image: linear-gradient(

package/src/sass/components/_message-scroller.scss

@@ -0,0 +1,66 @@
+@use "../abstracts" as *;
+
+// Message scroller. A chat frame around one scrolling viewport of messages
+// and a scroll-to-latest button. The frame fills its parent, so the parent
+// sets the height. The script owns scroll position; this partial only lays
+// out the parts.
+//
+// The script turns off native scroll anchoring on the viewport and keeps the
+// reader's place itself, so all engines behave the same. It writes
+// --md-comp-message-scroller-spacer (blank space after the last message) so a
+// newly anchored turn can reach the top of the viewport.
+//
+// Tokens:
+//   --md-comp-message-scroller-padding   16px (viewport inset)
+//   --md-comp-message-scroller-gap       16px (between messages)
+
+.message-scroller {
+  --md-comp-message-scroller-padding: 16px;
+  --md-comp-message-scroller-gap: 16px;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
+.message-scroller-viewport {
+  box-sizing: border-box;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-anchor: none;
+  overscroll-behavior: contain;
+  padding: var(--md-comp-message-scroller-padding);
+  padding-block-end: calc(var(--md-comp-message-scroller-padding) + var(--md-comp-message-scroller-spacer, 0px));
+
+  @include focus-visible;
+
+  > * + * {
+    margin-block-start: var(--md-comp-message-scroller-gap);
+  }
+}
+
+// Centered over the bottom of the viewport. Inert while there is nothing
+// below; it fades out instead of leaving a hidden tab stop.
+.message-scroller-button {
+  position: absolute;
+  inset-block-end: 16px;
+  inset-inline: 0;
+  width: fit-content;
+  margin-inline: auto;
+  @include z-depth("2");
+  transition: opacity .15s ease-out, scale .15s ease-out;
+
+  &[inert] {
+    opacity: 0;
+    scale: .8;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .message-scroller-button {
+    transition: none;
+  }
+}