@expressivecss/expressive 0.11.0 → 0.13.1

package/src/sass/abstracts/_mixins.scss

@@ -1,5 +1,6 @@
 @use "sass:list";
 @use "sass:map";
+@use "sass:math";
 @use "./elevation" as *;
 @use "./variables" as *;
 
@@ -311,3 +312,228 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
     box-shadow: none;
   }
 }
+
+// Frosted glass for a floating surface's container. `$color` is the color the
+// rule just set as its `background-color`.
+//
+// The rules always ship, behind a style query on `--expressive-glass`, so a
+// page using the compiled CSS can turn the effect on with
+// `:root { --expressive-glass: true; }`. `$expressive-glass` only picks the
+// default: when it is on, the query flips to "anything but false". A style
+// query reads the parent's value, so the switch belongs on `:root` or a
+// wrapper, not on the surface itself.
+//
+// A user who asks for less transparency or more contrast gets the solid
+// surface back. `backdrop-filter` also makes the element the containing block
+// for its `position: fixed` descendants, so a surface that hangs a fixed scrim
+// off itself has to opt back out (see the modal navigation rail).
+@mixin glass($color) {
+  @if math.unit($expressive-glass-opacity) != "%" {
+    @error "$expressive-glass-opacity must be a percentage, got #{$expressive-glass-opacity}.";
+  }
+
+  $query: "style(--expressive-glass: true)";
+  @if $expressive-glass { $query: "not style(--expressive-glass: false)"; }
+
+  @container #{$query} {
+    background-color: color-mix(in oklab, #{$color} var(--expressive-glass-opacity, #{$expressive-glass-opacity}), transparent);
+    backdrop-filter: blur(var(--expressive-glass-blur, #{$expressive-glass-blur}));
+
+    @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+      background-color: #{$color};
+      backdrop-filter: none;
+    }
+  }
+}
+
+// The parts LineChart draws for every chart type, prefixed with the
+// component's name: .#{$name}-plot, -cursor, -tooltip, -labels and -legend.
+// Defines the --md-comp-#{$name}-height, -grid-color and -color-1..4 tokens,
+// and --#{$name}-color on each [data-series]. Include it at the root of the
+// component's partial; the component adds its own marks and cursor look.
+@mixin chart($name) {
+  .#{$name} {
+    --md-comp-#{$name}-height: 240px;
+    --md-comp-#{$name}-grid-color: var(--md-sys-color-outline-variant);
+    --md-comp-#{$name}-color-1: var(--md-sys-color-primary);
+    --md-comp-#{$name}-color-2: var(--md-sys-color-tertiary);
+    --md-comp-#{$name}-color-3: var(--md-sys-color-secondary);
+    --md-comp-#{$name}-color-4: var(--md-sys-color-on-surface-variant);
+
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 0;
+    margin: $element-top-margin 0 $element-bottom-margin;
+    color: var(--md-sys-color-on-surface);
+
+    > figcaption {
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("title-small");
+    }
+
+    // A table keeps its content size under visually-hidden, so anchor it
+    // here rather than at some distant positioned ancestor. A fixed layout
+    // holds it to the 1px wide it is given. Its rows still set its height, so
+    // it hangs up from the bottom edge, where the overflow cannot scroll.
+    position: relative;
+
+    &:has(> .#{$name}-plot) > table {
+      @include visually-hidden;
+      inset: auto auto 0 0;
+      table-layout: fixed;
+    }
+  }
+
+  @for $i from 1 through 4 {
+    .#{$name} [data-series="#{$i}"] {
+      --#{$name}-color: var(--md-comp-#{$name}-color-#{$i});
+    }
+  }
+
+  .#{$name}-plot {
+    position: relative;
+    height: var(--md-comp-#{$name}-height);
+    border-block-end: 1px solid var(--md-comp-#{$name}-grid-color);
+    border-radius: 2px;
+    // Four grid lines; the border is the fifth.
+    background: linear-gradient(var(--md-comp-#{$name}-grid-color) 1px, transparent 0) 0 0 / 100% 25%;
+    touch-action: pan-y;
+    @include focus-visible;
+  }
+
+  .#{$name}-cursor {
+    position: absolute;
+    inset-block: 0;
+    pointer-events: none;
+  }
+
+  // Rich tooltip surface, as in _tooltip.scss.
+  .#{$name}-tooltip {
+    --md-comp-#{$name}-tooltip-color: var(--md-sys-color-surface-container);
+
+    position: absolute;
+    top: 0;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 4px 16px;
+    min-width: 120px;
+    margin: 0;
+    padding: 12px 16px;
+    border-radius: 12px;
+    background-color: var(--md-comp-#{$name}-tooltip-color);
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-small");
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+    translate: 12px 0;
+    @include z-depth("2");
+    @include glass(var(--md-comp-#{$name}-tooltip-color));
+
+    &[hidden] {
+      display: none;
+    }
+
+    &.end {
+      translate: calc(-100% - 12px) 0;
+    }
+
+    > strong {
+      grid-column: 1 / -1;
+      color: var(--md-sys-color-on-surface);
+      @include typescale("title-small");
+    }
+
+    > span {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    > span:nth-of-type(even) {
+      justify-content: end;
+      color: var(--md-sys-color-on-surface);
+      font-weight: 500;
+    }
+  }
+
+  .#{$name}-labels,
+  .#{$name}-legend {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-small");
+  }
+
+  .#{$name}-labels {
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    text-align: center;
+
+    > li {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .#{$name}-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 16px;
+
+    > li {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+
+  // Series swatches.
+  .#{$name}-legend > li::before,
+  .#{$name}-tooltip > span:nth-of-type(odd)::before {
+    content: "";
+    flex: none;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--#{$name}-color);
+  }
+
+  .#{$name}.sparkline {
+    --md-comp-#{$name}-height: 48px;
+    // Keep the taller hidden table from adding scrollable overflow. A
+    // sparkline has no tooltip or focus ring to clip.
+    overflow: clip;
+
+    .#{$name}-plot {
+      border: 0;
+      background: none;
+    }
+
+    .#{$name}-labels,
+    .#{$name}-legend {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .#{$name}-plot {
+      background: none;
+    }
+
+    .#{$name}-tooltip {
+      outline: 1px solid CanvasText;
+    }
+
+    // The marks keep their colors, so the swatches that key them must too.
+    .#{$name}-legend > li::before,
+    .#{$name}-tooltip > span:nth-of-type(odd)::before {
+      forced-color-adjust: none;
+    }
+  }
+}

package/src/sass/abstracts/_variables.scss

@@ -15,6 +15,9 @@ $icon: ":is(i, .material-symbols, .material-symbols-outlined, .material-symbols-
 // The label beside an icon: any span that is not itself an icon.
 $icon-label: "span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)" !default;
 
+// The up arrow on a change line (Stat, KPI). Rotate it 180deg for down.
+$trend-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 20V7.8l-5.6 5.6L4 12l8-8 8 8-1.4 1.4L13 7.8V20z'/%3E%3C/svg%3E") !default;
+
 // Colors
 //
 // The 2014 Material palette ($colors + colorFunc()) is gone. It generated 532
@@ -72,6 +75,17 @@ $font-stack: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback) !defa
 // loads these families from elsewhere).
 $expressive-font-path: "../fonts" !default;
 $expressive-include-fonts: true !default;
+
+// Frosted glass for floating surfaces (menus, tooltips, dialogs, sheets, the
+// snackbar, navigation bar and rail, toolbars, the search view). Off by default.
+// `--expressive-glass: true | false` on :root or a wrapper overrides this at
+// runtime. The blur is the frost thickness; the opacity is the share of the
+// surface color kept, so 100% is solid. Both are read through
+// --expressive-glass-blur and --expressive-glass-opacity fallbacks, so a page
+// or subtree can retune them too.
+$expressive-glass: false !default;
+$expressive-glass-blur: 16px !default;
+$expressive-glass-opacity: 72% !default;
 $text-color: var(--md-sys-color-on-background) !default;
 
 // Modern browsers default to 16px. M3's web conversion is SP_SIZE / 16 = rem;

package/src/sass/base/_typography.scss

@@ -74,3 +74,48 @@ $_flow-intercept: math.div($_flow-min-px - ($_flow-slope * $flow-text-from), $ro
 .flow-text {
   font-size: clamp(#{$flow-text-min}, #{$_flow-intercept} + #{$_flow-slope * 100}vw, #{$flow-text-max});
 }
+
+// Keyboard keys. <kbd> is drawn as a keycap; a <kbd> holding other <kbd>
+// elements is the whole combination ("Ctrl + K") and stays plain around
+// them. Menus and lists restyle a trailing <kbd> as quiet shortcut text.
+kbd {
+  display: inline-block;
+  box-sizing: border-box;
+  min-width: 1.6em;
+  padding: 0.1em 0.4em;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-bottom-width: 2px;
+  border-radius: 6px;
+  background-color: var(--md-sys-color-surface-container);
+  color: var(--md-sys-color-on-surface);
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.85em;
+  line-height: 1.4;
+  text-align: center;
+  white-space: nowrap;
+
+  &:has(> kbd) {
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-family: inherit;
+    font-size: inherit;
+  }
+}
+
+// Highlighted text. <mark> picks out a run of text that matters to what the
+// reader is doing, such as the matched part of a search result. It takes no
+// padding, so a match inside a word keeps the word's letter spacing.
+// ::highlight(mark) paints the same colors on ranges a script registers with
+// CSS.highlights.set("mark", highlight), without changing the DOM.
+mark {
+  border-radius: 2px;
+  background-color: var(--md-sys-color-tertiary-container);
+  color: var(--md-sys-color-on-tertiary-container);
+}
+
+::highlight(mark) {
+  background-color: var(--md-sys-color-tertiary-container);
+  color: var(--md-sys-color-on-tertiary-container);
+}

package/src/sass/components/_accordion.scss

@@ -0,0 +1,161 @@
+@use "../abstracts" as *;
+
+// Accordion. A .accordion stacks native <details> disclosures as tiles. The
+// browser owns the toggle: <summary> is the button, `open` is the state, and
+// a shared `name` makes the items exclusive. There is no JavaScript.
+//
+// The tiles join like a segmented list: outer corners take the full shape,
+// inner corners the grouped shape, and an open item rounds every corner.
+//
+// Opening animates where the engine can transition to `auto` height
+// (interpolate-size and ::details-content). Elsewhere it opens at once.
+//
+// Tokens:
+//   --md-comp-accordion-container-color  surface-container
+//   --md-comp-accordion-shape            20px
+//   --md-comp-accordion-grouped-shape    4px (inner corners)
+//   --md-comp-accordion-gap              2px
+//   --md-comp-accordion-header-height    56px
+//   --md-comp-accordion-padding          16px
+
+$_accordion-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 6 9.4 7.4 8l4.6 4.6L16.6 8 18 9.4z'/%3E%3C/svg%3E");
+
+.accordion {
+  --md-comp-accordion-container-color: var(--md-sys-color-surface-container);
+  --md-comp-accordion-shape: 20px;
+  --md-comp-accordion-grouped-shape: 4px;
+  --md-comp-accordion-gap: 2px;
+  --md-comp-accordion-header-height: 56px;
+  --md-comp-accordion-padding: 16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--md-comp-accordion-gap);
+  margin: $element-top-margin 0 $element-bottom-margin;
+
+  > details {
+    border-radius: var(--md-comp-accordion-grouped-shape);
+    background-color: var(--md-comp-accordion-container-color);
+    color: var(--md-sys-color-on-surface);
+    // Invisible until forced colors paint it, so the tiles stay apart there.
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+    transition: border-radius 200ms ease-out;
+
+    &:first-child {
+      border-start-start-radius: var(--md-comp-accordion-shape);
+      border-start-end-radius: var(--md-comp-accordion-shape);
+    }
+
+    &:last-child {
+      border-end-start-radius: var(--md-comp-accordion-shape);
+      border-end-end-radius: var(--md-comp-accordion-shape);
+    }
+
+    &[open] {
+      border-radius: var(--md-comp-accordion-shape);
+    }
+  }
+
+  > details > summary {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    box-sizing: border-box;
+    min-height: var(--md-comp-accordion-header-height);
+    padding: 8px var(--md-comp-accordion-padding);
+    border-radius: inherit;
+    list-style: none;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    @include typescale("title-medium");
+    @include focus-visible;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    // The chevron trails the label and turns over when the item opens.
+    &::after {
+      content: "";
+      flex: none;
+      width: 24px;
+      height: 24px;
+      margin-inline-start: auto;
+      background-color: var(--md-sys-color-on-surface-variant);
+      mask: $_accordion-chevron center / 24px no-repeat;
+      transition: transform 200ms ease-out;
+    }
+
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-surface) state-opacity("hover"),
+        transparent
+      );
+    }
+
+    > #{$icon} {
+      flex: none;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  }
+
+  > details[open] > summary::after {
+    transform: rotate(180deg);
+  }
+
+  // Everything after the summary is the panel.
+  > details > :not(summary) {
+    margin: 0 var(--md-comp-accordion-padding);
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-medium");
+  }
+
+  > details > :not(summary) + :not(summary) {
+    margin-block-start: 8px;
+  }
+
+  > details > :not(summary):last-child {
+    margin-block-end: var(--md-comp-accordion-padding);
+  }
+}
+
+@supports (interpolate-size: allow-keywords) and selector(::details-content) {
+  .accordion > details {
+    interpolate-size: allow-keywords;
+
+    &::details-content {
+      block-size: 0;
+      overflow: clip;
+      transition:
+        block-size 250ms cubic-bezier(0.2, 0, 0, 1),
+        content-visibility 250ms allow-discrete;
+    }
+
+    &[open]::details-content {
+      block-size: auto;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &::details-content {
+        transition: none;
+      }
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .accordion > details,
+  .accordion > details > summary::after {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .accordion > details > summary::after {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
+}

package/src/sass/components/_aura.scss

@@ -0,0 +1,119 @@
+@use "../abstracts" as *;
+
+// Aura. A light that runs around the border of one element, to draw the eye
+// to the most important button or card on a screen. Wrap the element:
+// <div class="aura"><button class="filled">…</button></div>. The ring is a
+// pseudo-element, so it adds nothing to the accessibility tree.
+//
+// Styles:
+//   (default)  one light in the primary color circles a faint ring
+//   .dual      two lights, primary and tertiary, on opposite sides
+//   .rainbow   the full hue wheel turns around the ring
+//   .glow      a blurred halo behind the element instead of a ring;
+//              the wrapped element needs an opaque container
+//
+// The ring follows the wrapped element's corners through
+// --md-comp-aura-shape: 12px for cards, fully rounded around a button.
+// Reduced motion stops the rotation and leaves the ring. Forced colors draw
+// a solid Highlight ring. In a shadow root, which ignores @property, the light
+// turns in 7.2deg steps and the ring rests at 0deg.
+//
+// Tokens:
+//   --md-comp-aura-color     primary
+//   --md-comp-aura-color-2   tertiary (.dual)
+//   --md-comp-aura-width     2px
+//   --md-comp-aura-shape     12px; 9999px around a button
+//   --md-comp-aura-duration  4s
+
+@property --md-comp-aura-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+.aura {
+  --md-comp-aura-color: var(--md-sys-color-primary);
+  --md-comp-aura-color-2: var(--md-sys-color-tertiary);
+  --md-comp-aura-width: 2px;
+  --md-comp-aura-shape: 12px;
+  --md-comp-aura-duration: 4s;
+
+  position: relative;
+  isolation: isolate;
+  display: inline-grid;
+  vertical-align: middle;
+  padding: var(--md-comp-aura-width);
+  border-radius: calc(var(--md-comp-aura-shape) + var(--md-comp-aura-width));
+
+  &:has(> :is(button, .button, [role="button"])) {
+    --md-comp-aura-shape: 9999px;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    padding: inherit;
+    border-radius: inherit;
+    background: conic-gradient(
+      from var(--md-comp-aura-angle, 0deg),
+      color-mix(in oklab, var(--md-comp-aura-color) 20%, transparent) 60%,
+      var(--md-comp-aura-color) 85%,
+      color-mix(in oklab, var(--md-comp-aura-color) 20%, transparent)
+    );
+    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+    animation: aura-turn var(--md-comp-aura-duration) linear infinite;
+    pointer-events: none;
+  }
+
+  &.dual::before {
+    background: conic-gradient(
+      from var(--md-comp-aura-angle, 0deg),
+      transparent 10%,
+      var(--md-comp-aura-color) 35%,
+      transparent 50% 60%,
+      var(--md-comp-aura-color-2) 85%,
+      transparent
+    );
+  }
+
+  &.rainbow::before {
+    background: conic-gradient(
+      from var(--md-comp-aura-angle, 0deg),
+      #f43f5e, #f59e0b, #84cc16, #06b6d4, #8b5cf6, #f43f5e
+    );
+  }
+
+  &.glow::before {
+    mask: none;
+    filter: blur(calc(var(--md-comp-aura-width) * 6));
+    opacity: 0.8;
+  }
+
+  &:dir(rtl)::before {
+    animation-direction: reverse;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::before {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    &::before {
+      forced-color-adjust: none;
+      background: Highlight;
+    }
+  }
+}
+
+// Registered, the angle interpolates smoothly between these stops. A shadow
+// root ignores @property, and an unregistered property animates discretely,
+// so the stops are close enough to read as a turn in 7.2deg steps.
+@keyframes aura-turn {
+  @for $i from 0 through 50 {
+    #{$i * 2}% { --md-comp-aura-angle: #{$i * 7.2}deg; }
+  }
+}

package/src/sass/components/_avatar.scss

@@ -0,0 +1,86 @@
+@use "../abstracts" as *;
+
+// Avatar. A person or account as a circle: an <img>, or a <span> holding
+// initials or an icon. `small` and `large` move the size; the type and icon
+// scale with it.
+//
+// A .avatar-group overlaps its avatars and rings each one in the surface
+// color, so the edges stay readable over the neighbour underneath.
+//
+// Tokens:
+//   --md-comp-avatar-size              40px / small 32px / large 56px
+//   --md-comp-avatar-container-color   secondary-container
+//   --md-comp-avatar-color             on-secondary-container
+//   --md-comp-avatar-group-overlap     8px
+//   --md-comp-avatar-group-ring-color  surface
+
+.avatar {
+  --md-comp-avatar-size: 40px;
+  --md-comp-avatar-container-color: var(--md-sys-color-secondary-container);
+  --md-comp-avatar-color: var(--md-sys-color-on-secondary-container);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--md-comp-avatar-size);
+  height: var(--md-comp-avatar-size);
+  border-radius: 50%;
+  overflow: hidden;
+  object-fit: cover;
+  vertical-align: middle;
+  background-color: var(--md-comp-avatar-container-color);
+  color: var(--md-comp-avatar-color);
+  font-family: var(--md-sys-typescale-title-medium-font-family-name);
+  font-size: calc(var(--md-comp-avatar-size) * 0.4);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  white-space: nowrap;
+  user-select: none;
+
+  &.small {
+    --md-comp-avatar-size: 32px;
+  }
+
+  &.large {
+    --md-comp-avatar-size: 56px;
+  }
+
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  > #{$icon} {
+    font-size: calc(var(--md-comp-avatar-size) * 0.6);
+  }
+}
+
+// Forced colors drop the fill, so an outline keeps the circle.
+@media (forced-colors: active) {
+  .avatar:not(img) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
+.avatar-group {
+  --md-comp-avatar-group-overlap: 8px;
+  --md-comp-avatar-group-ring-color: var(--md-sys-color-surface);
+
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+
+  > .avatar {
+    box-shadow: 0 0 0 2px var(--md-comp-avatar-group-ring-color);
+  }
+
+  > .avatar + .avatar {
+    margin-inline-start: calc(var(--md-comp-avatar-group-overlap) * -1);
+  }
+}