@expressivecss/expressive 0.11.0 → 0.13.1

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

package/src/sass/components/_message.scss

@@ -0,0 +1,202 @@
+@use "../abstracts" as *;
+
+// Message. One message in a conversation: an optional avatar, header and
+// footer around a single surface. The surface is every other child, normally
+// one .message-bubble; wrap several elements in a <div> to keep them on one
+// surface. `.end` moves the row to the sender's side.
+//
+// The parts are divs, not <header>/<footer>: outside sectioning content those
+// elements become banner and contentinfo landmarks, one per message.
+//
+// The grid puts the avatar in the surface row, so it lines up with the bottom
+// of the bubble and a footer below never pushes it down.
+//
+// Tokens:
+//   --md-comp-message-avatar-size              32px
+//   --md-comp-message-gap                      8px (avatar to surface)
+//   --md-comp-message-surface-max-width        80%
+//   --md-comp-message-bubble-shape             20px
+//   --md-comp-message-bubble-grouped-shape     4px (joined corners in a group)
+//   --md-comp-message-bubble-container-color   surface-container-high / end: primary-container
+//   --md-comp-message-bubble-color             on-surface / end: on-primary-container
+//   --md-comp-message-group-gap                2px
+
+.message {
+  --md-comp-message-avatar-size: 32px;
+  --md-comp-message-gap: 8px;
+  --md-comp-message-surface-max-width: 80%;
+  --md-comp-message-bubble-shape: 20px;
+  --md-comp-message-bubble-grouped-shape: 4px;
+  --md-comp-message-bubble-container-color: var(--md-sys-color-surface-container-high);
+  --md-comp-message-bubble-color: var(--md-sys-color-on-surface);
+
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas:
+    ". header"
+    "avatar surface"
+    ". footer";
+  align-items: end;
+  justify-items: start;
+  color: var(--md-sys-color-on-surface);
+
+  > .message-avatar {
+    grid-area: avatar;
+    margin-inline-end: var(--md-comp-message-gap);
+  }
+
+  > .message-header {
+    grid-area: header;
+  }
+
+  > .message-footer {
+    grid-area: footer;
+  }
+
+  > :not(.message-avatar, .message-header, .message-footer) {
+    grid-area: surface;
+    min-width: 0;
+    max-width: var(--md-comp-message-surface-max-width);
+  }
+
+  &.end {
+    --md-comp-message-bubble-container-color: var(--md-sys-color-primary-container);
+    --md-comp-message-bubble-color: var(--md-sys-color-on-primary-container);
+
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "header ."
+      "surface avatar"
+      "footer .";
+    justify-items: end;
+
+    > .message-avatar {
+      margin-inline: var(--md-comp-message-gap) 0;
+    }
+  }
+}
+
+// An <img>, or a box holding initials, an icon or an <img>. An empty one is a
+// spacer that keeps earlier messages in a group in line with the last.
+.message-avatar {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--md-comp-message-avatar-size);
+  height: var(--md-comp-message-avatar-size);
+  border-radius: 50%;
+  overflow: hidden;
+  object-fit: cover;
+  @include typescale("label-medium");
+
+  &:not(img):not(:empty) {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  > #{$icon} {
+    font-size: 20px;
+  }
+}
+
+.message-header,
+.message-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding-inline: 12px;
+  color: var(--md-sys-color-on-surface-variant);
+  @include typescale("label-medium");
+}
+
+.message-header {
+  margin-block-end: 4px;
+}
+
+.message-footer {
+  margin-block-start: 4px;
+
+  // Icon buttons carry their own inset; drop the text inset so the first
+  // icon sits under the bubble edge rather than past it.
+  &:has(> .icon-button:first-child) {
+    padding-inline: 0;
+  }
+}
+
+.message-bubble {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 10px 16px;
+  border-radius: var(--md-comp-message-bubble-shape);
+  background-color: var(--md-comp-message-bubble-container-color);
+  color: var(--md-comp-message-bubble-color);
+  overflow-wrap: anywhere;
+  @include typescale("body-large");
+
+  > * {
+    margin-block: 0;
+  }
+
+  > * + * {
+    margin-block-start: 8px;
+  }
+
+  // Attachments and rich content: no fill, an outline-variant border.
+  &.outlined {
+    --md-comp-message-bubble-container-color: transparent;
+    --md-comp-message-bubble-color: var(--md-sys-color-on-surface);
+
+    border: 1px solid var(--md-sys-color-outline-variant);
+  }
+
+  // A bubble holding only an image or video frames it with a thin inset.
+  &:has(> :is(img, video, picture):only-child) {
+    padding: 4px;
+  }
+
+  > :is(img, video),
+  > picture > img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    border-radius: calc(var(--md-comp-message-bubble-shape) - 4px);
+  }
+}
+
+// Consecutive messages from one sender. The bubbles join on the sender's
+// side: inner corners shrink to the grouped shape.
+.message-group {
+  --md-comp-message-group-gap: 2px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--md-comp-message-group-gap);
+
+  > .message:not(.end) {
+    &:not(:first-child) .message-bubble {
+      border-start-start-radius: var(--md-comp-message-bubble-grouped-shape);
+    }
+
+    &:not(:last-child) .message-bubble {
+      border-end-start-radius: var(--md-comp-message-bubble-grouped-shape);
+    }
+  }
+
+  > .message.end {
+    &:not(:first-child) .message-bubble {
+      border-start-end-radius: var(--md-comp-message-bubble-grouped-shape);
+    }
+
+    &:not(:last-child) .message-bubble {
+      border-end-end-radius: var(--md-comp-message-bubble-grouped-shape);
+    }
+  }
+}