@expressivecss/expressive 0.12.0 → 0.14.1

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

package/src/sass/components/_stepper.scss

@@ -0,0 +1,190 @@
+@use "../abstracts" as *;
+
+// Stepper. An <ol class="stepper"> shows where the user is in a fixed
+// sequence of steps, such as a checkout. Each <li> is a step; its text, or a
+// link back to a finished step, is the label. The list numbers the steps.
+//
+// State is markup the page keeps current:
+//   aria-current="step"  the step the user is on
+//   .complete            a finished step: the number becomes a check
+//   .invalid             a step that needs attention: the number becomes "!"
+// The check and "!" are also spoken, through the alt text of the indicator;
+// the two labels are tokens so a page can translate them.
+//
+// Each step is a small grid: indicator, label and connector on the first row,
+// an optional <small> supporting line under the label, and in .vertical an
+// optional .stepper-content panel under that.
+//
+// Tokens:
+//   --md-comp-stepper-indicator-size        24px
+//   --md-comp-stepper-connector-color       outline-variant / complete: primary
+//   --md-comp-stepper-active-color          primary
+//   --md-comp-stepper-complete-label        "Completed"
+//   --md-comp-stepper-error-label           "Error"
+
+$_stepper-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 18 3.85 12.3l1.43-1.43 4.27 4.28 9.17-9.18 1.43 1.43z'/%3E%3C/svg%3E");
+$_stepper-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 14V6h2v8zm0 4v-2h2v2z'/%3E%3C/svg%3E");
+
+.stepper {
+  --md-comp-stepper-indicator-size: 24px;
+  --md-comp-stepper-connector-color: var(--md-sys-color-outline-variant);
+  --md-comp-stepper-active-color: var(--md-sys-color-primary);
+  --md-comp-stepper-complete-label: "Completed";
+  --md-comp-stepper-error-label: "Error";
+
+  // Steps never squeeze below their label; a row too narrow for all of them
+  // wraps rather than overlapping. Use .vertical where that is the norm.
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: $element-top-margin 0 $element-bottom-margin;
+  padding: 0;
+  list-style: none;
+  counter-reset: stepper;
+
+  > li {
+    display: grid;
+    flex: 1 1 auto;
+    grid-template-columns: auto auto minmax(16px, 1fr);
+    grid-template-rows: auto auto;
+    column-gap: 8px;
+    align-items: center;
+    margin: 0;
+    counter-increment: stepper;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("title-small");
+
+    // The number is already the list position, so it is not spoken again.
+    &::before {
+      content: counter(stepper) / "";
+      grid-column: 1;
+      grid-row: 1;
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--md-comp-stepper-indicator-size);
+      height: var(--md-comp-stepper-indicator-size);
+      border: 1px solid var(--md-sys-color-outline);
+      border-radius: 50%;
+      @include typescale("label-medium");
+    }
+
+    &::after {
+      content: "";
+      grid-column: 3;
+      grid-row: 1;
+      height: 1px;
+      min-width: 16px;
+      background-color: var(--md-comp-stepper-connector-color);
+    }
+
+    &:last-child {
+      flex: none;
+
+      &::after {
+        content: none;
+      }
+    }
+
+    // Supporting text may run under the connector rather than wrap word by word.
+    > small {
+      grid-column: 2 / -1;
+      grid-row: 2;
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("body-small");
+    }
+
+    > a {
+      color: inherit;
+      border-radius: 4px;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+      @include focus-visible;
+    }
+  }
+
+  > li[aria-current="step"] {
+    color: var(--md-sys-color-on-surface);
+
+    &::before {
+      border-color: var(--md-comp-stepper-active-color);
+      background-color: var(--md-comp-stepper-active-color);
+      color: var(--md-sys-color-on-primary);
+    }
+  }
+
+  // The glyph is knocked out of the filled circle, so it takes the color of
+  // whatever surface the stepper sits on.
+  > li:is(.complete, .invalid)::before {
+    border: 0;
+  }
+
+  > li.complete {
+    --md-comp-stepper-connector-color: var(--md-comp-stepper-active-color);
+
+    color: var(--md-sys-color-on-surface);
+
+    &::before {
+      content: "" / var(--md-comp-stepper-complete-label);
+      background-color: var(--md-comp-stepper-active-color);
+      mask: $_stepper-check center / 18px no-repeat exclude, linear-gradient(#000 0 0);
+    }
+  }
+
+  > li.invalid {
+    color: var(--md-sys-color-error);
+
+    &::before {
+      content: "" / var(--md-comp-stepper-error-label);
+      background-color: var(--md-sys-color-error);
+      mask: $_stepper-alert center / 18px no-repeat exclude, linear-gradient(#000 0 0);
+    }
+  }
+
+  &.vertical {
+    flex-direction: column;
+    gap: 0;
+
+    > li {
+      flex: none;
+      grid-template-columns: auto minmax(0, 1fr);
+      grid-template-rows: auto auto 1fr;
+
+      > small {
+        grid-column: 2;
+      }
+
+      &::after {
+        grid-column: 1;
+        grid-row: 2 / -1;
+        justify-self: center;
+        width: 1px;
+        height: auto;
+        min-width: 0;
+        min-height: 16px;
+        margin-block: 4px;
+      }
+
+      &:last-child::after {
+        content: none;
+      }
+
+      > .stepper-content {
+        grid-column: 2;
+        grid-row: 3;
+        padding-block: 8px 16px;
+        color: var(--md-sys-color-on-surface-variant);
+        @include typescale("body-medium");
+      }
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  .stepper > li:is([aria-current="step"], .complete, .invalid)::before {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}

package/src/sass/components/_table_of_contents.scss

@@ -7,11 +7,13 @@
 //   --md-comp-toc-label-color
 //   --md-comp-toc-active-color
 //   --md-comp-toc-indicator
+//   --md-comp-toc-item-height   48px, the Material touch target
 
 .table-of-contents {
   --md-comp-toc-label-color: var(--md-sys-color-on-surface-variant);
   --md-comp-toc-active-color: var(--md-sys-color-primary);
   --md-comp-toc-indicator: 2px;
+  --md-comp-toc-item-height: 48px;
 
   list-style: none;
   margin: 0;
@@ -29,7 +31,7 @@
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    min-height: 2rem;
+    min-height: var(--md-comp-toc-item-height);
     padding-inline-start: 16px;
     border-inline-start: var(--md-comp-toc-indicator) solid transparent;
     color: var(--md-comp-toc-label-color);

package/src/sass/components/_timeline.scss

@@ -0,0 +1,114 @@
+@use "../abstracts" as *;
+
+// Timeline. An <ol class="timeline"> lists events in order, newest first or
+// oldest first as the page decides. Each <li> is an event: an optional
+// <time>, a heading and supporting text. A dot marks each event and a line
+// joins it to the next.
+//
+// A leading icon as the first child replaces the dot with a tonal circle.
+//
+// Tokens:
+//   --md-comp-timeline-marker-color     primary
+//   --md-comp-timeline-connector-color  outline-variant
+//   --md-comp-timeline-gap              24px (between events)
+
+.timeline {
+  --md-comp-timeline-marker-color: var(--md-sys-color-primary);
+  --md-comp-timeline-connector-color: var(--md-sys-color-outline-variant);
+  --md-comp-timeline-gap: 24px;
+
+  margin: $element-top-margin 0 $element-bottom-margin;
+  padding: 0;
+  list-style: none;
+
+  > li {
+    position: relative;
+    margin: 0;
+    padding-block-end: var(--md-comp-timeline-gap);
+    padding-inline-start: 32px;
+    color: var(--md-sys-color-on-surface);
+
+    // The dot sits level with the first line of text.
+    &::before {
+      content: "";
+      position: absolute;
+      inset-block-start: 4px;
+      inset-inline-start: 4px;
+      box-sizing: border-box;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: var(--md-comp-timeline-marker-color);
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset-block: 20px 0;
+      inset-inline-start: 9.5px;
+      width: 1px;
+      background-color: var(--md-comp-timeline-connector-color);
+    }
+
+    &:last-child {
+      padding-block-end: 0;
+
+      &::after {
+        content: none;
+      }
+    }
+
+    > time {
+      display: block;
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("label-medium");
+    }
+
+    > :is(h1, h2, h3, h4, h5, h6) {
+      margin: 0;
+      @include typescale("title-small");
+    }
+
+    > p {
+      margin: 4px 0 0;
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("body-medium");
+    }
+  }
+
+  // A leading icon takes the dot's place in a 32px tonal circle.
+  > li:has(> #{$icon}:first-child) {
+    padding-inline-start: 48px;
+
+    &::before {
+      content: none;
+    }
+
+    &::after {
+      inset-block-start: 36px;
+      inset-inline-start: 15.5px;
+    }
+
+    > #{$icon}:first-child {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background-color: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+      font-size: 18px;
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  .timeline > li::before {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
+}

package/src/sass/components/_toolbar.scss

@@ -87,6 +87,7 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
   border-radius: var(--md-comp-toolbar-container-shape);
   background-color: var(--md-comp-toolbar-container-color);
   color: var(--md-comp-toolbar-color);
+  @include glass(var(--md-comp-toolbar-container-color));
 
   & + & {
     margin-block-start: 16px;

package/src/sass/components/_tooltip.scss

@@ -41,6 +41,7 @@
   overflow-wrap: anywhere;
   pointer-events: auto;
   z-index: 2000;
+  @include glass(var(--md-comp-plain-tooltip-container-color));
 }
 
 // CSS-only: a child of the activator. Default sits above (M3 preferred).
@@ -137,6 +138,7 @@ body > .tooltip {
   white-space: normal;
   pointer-events: auto;
   @include z-depth("2");
+  @include glass(var(--md-comp-rich-tooltip-container-color));
 
   > :is(h1, h2, h3, h4, h5, h6) {
     margin: 0;