@expressivecss/expressive 0.11.0 → 0.13.1

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;
@@ -120,7 +121,7 @@ $_bar: ".snackbar";
     overflow: hidden;
   }
 
-  // Optional leading icon (BeerCSS). M3 snackbars have no leading icon.
+  // Optional leading icon. M3 snackbars have no leading icon.
   > #{$icon}:first-child {
     flex: 0 0 auto;
     font-size: 24px;

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/_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/_timepicker.scss

@@ -101,7 +101,7 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
 :is(.timepicker-container, .time-picker-container) .pm-btn {
   width: 3.6rem;
   height: 50%;
-  // --btn-padding is a Materialize variable that no longer exists, so this
+  // --btn-padding is a retired variable that no longer exists, so this
   // was invalid at computed-value time and the padding resolved to 0 - not
   // to the base button's inline space, which the invalid declaration still
   // beat in the cascade. Written as the 0 it has always rendered as.
@@ -278,7 +278,7 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   :is(.timepicker-container, .time-picker-container) .pm-btn {
     flex-grow: 1;
     /*width: auto;*/
-    // Same two dead Materialize variables as above; both declarations
+    // Same two retired variables as above; both declarations
     // rendered as 0. The corner rules that follow square off the inner
     // edges, so the outer ones are the only radius in play.
     padding-inline: 0;

package/src/sass/components/_toolbar.scss

@@ -57,7 +57,7 @@
 // already, in $_bar.
 $_toolbar: ".toolbar";
 
-// The two axes. `.max` is BeerCSS's name for docked; `.filled` is the older
+// The two axes. `.max` is an alias for docked; `.filled` is the older
 // name for vibrant. Both stay in the :is() lists.
 $_floating: "#{$_toolbar}:is(.floating, :not(.docked, .max))";
 $_docked: "#{$_toolbar}:is(.docked, .max)";
@@ -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;

package/src/sass/components/_tree.scss

@@ -0,0 +1,139 @@
+@use "../abstracts" as *;
+
+// Tree. A <ul class="tree"> of nested lists, for file browsers and deep
+// navigation. A branch is an <li> holding a <details>: its <summary> is the
+// row and its nested <ul> the children. A leaf is an <li> holding a link or
+// a span. aria-current marks the selected row.
+//
+// It is a set of disclosures and links, not role="tree": every row is a Tab
+// stop and the browser owns opening a branch. A tree role would promise
+// arrow-key navigation that native disclosures do not provide.
+//
+// Tokens:
+//   --md-comp-tree-row-height                 40px
+//   --md-comp-tree-row-shape                  100px (pill)
+//   --md-comp-tree-guide-color                outline-variant
+//   --md-comp-tree-selected-container-color   secondary-container
+
+$_tree-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");
+
+.tree {
+  --md-comp-tree-row-height: 40px;
+  --md-comp-tree-row-shape: 100px;
+  --md-comp-tree-guide-color: var(--md-sys-color-outline-variant);
+  --md-comp-tree-selected-container-color: var(--md-sys-color-secondary-container);
+
+  margin: $element-top-margin 0 $element-bottom-margin;
+  padding: 0;
+  list-style: none;
+  color: var(--md-sys-color-on-surface-variant);
+
+  // Each level hangs a guide line from the centre of its parent's chevron
+  // (12px inset + half the 20px chevron) and indents past it.
+  ul {
+    margin: 0;
+    margin-inline-start: 22px;
+    padding: 0;
+    padding-inline-start: 6px;
+    border-inline-start: 1px solid var(--md-comp-tree-guide-color);
+    list-style: none;
+  }
+
+  li {
+    margin: 0;
+  }
+
+  li > :is(a, span),
+  li > details > summary {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: var(--md-comp-tree-row-height);
+    padding-inline: 12px 16px;
+    border-radius: var(--md-comp-tree-row-shape);
+    color: inherit;
+    text-decoration: none;
+    @include typescale("label-large");
+
+    > #{$icon} {
+      flex: none;
+      font-size: 20px;
+    }
+  }
+
+  // A leaf lines its text up with a branch's text, after the chevron.
+  li > :is(a, span) {
+    padding-inline-start: calc(12px + 20px + 8px);
+  }
+
+  li > a,
+  li > details > summary {
+    cursor: pointer;
+    @include focus-visible;
+
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-surface) state-opacity("hover"),
+        transparent
+      );
+    }
+  }
+
+  li > details > summary {
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    // Points to the end edge while closed and down once open.
+    &::before {
+      content: "";
+      flex: none;
+      width: 20px;
+      height: 20px;
+      background-color: currentColor;
+      mask: $_tree-chevron center / 20px no-repeat;
+      transform: rotate(-90deg);
+      transition: transform 150ms ease-out;
+    }
+
+    &:dir(rtl)::before {
+      transform: rotate(90deg);
+    }
+  }
+
+  li > details[open] > summary::before {
+    transform: none;
+  }
+
+  :is(li > a, li > span, li > details > summary)[aria-current]:not([aria-current="false"]) {
+    background-color: var(--md-comp-tree-selected-container-color);
+    color: var(--md-sys-color-on-secondary-container);
+
+    > #{$icon} {
+      --md-icon-fill: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    li > details > summary::before {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    li > details > summary::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [aria-current]:not([aria-current="false"]) {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+  }
+}

package/src/sass/components/forms/_checkboxes.scss

@@ -4,7 +4,7 @@
 //
 // Anatomy is the HTML. A <label> wrapping <input type="checkbox"> is
 // the control. The label text is a sibling of the input — no extra class,
-// no required <span>. input + span still works (legacy / BeerCSS / Select).
+// no required <span>. input + span still works (legacy / Select).
 // label.switch is a switch, not a checkbox — leave it alone.
 //
 // Tokens follow https://m3.material.io/components/checkbox/specs
@@ -206,7 +206,7 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
   cursor: default;
 }
 
-// Legacy / BeerCSS / Select / Autocomplete: input + span draws the same
+// Legacy / Select / Autocomplete: input + span draws the same
 // 18dp anatomy. Exclude .switch — that file paints the track on a span.
 $_cb-span: "*:not(.switch) > [type='checkbox'] + span:not(.lever, .supporting-text, .character-counter, .file-path)";