@expressivecss/expressive 0.12.0 → 0.13.1

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

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/_drop-zone.scss

@@ -0,0 +1,128 @@
+@use "../../abstracts" as *;
+
+// Drop zone. A .drop-zone is a large target for choosing files: a <label>
+// holding an icon, a prompt and a native <input type="file">, with an
+// optional .drop-zone-files list after it.
+//
+// The input is stretched invisibly over the whole label, so the browser
+// takes a click, a keypress or a dropped file exactly as it does on a plain
+// file input. The Forms behavior adds .dragover while files are dragged over
+// it and fills .drop-zone-files with each chosen file's name and size.
+//
+// Tokens:
+//   --md-comp-drop-zone-shape                      16px
+//   --md-comp-drop-zone-outline-color              outline
+//   --md-comp-drop-zone-dragover-container-color   primary-container
+//   --md-comp-drop-zone-dragover-color             on-primary-container
+
+.drop-zone {
+  --md-comp-drop-zone-shape: 16px;
+  --md-comp-drop-zone-outline-color: var(--md-sys-color-outline);
+  --md-comp-drop-zone-dragover-container-color: var(--md-sys-color-primary-container);
+  --md-comp-drop-zone-dragover-color: var(--md-sys-color-on-primary-container);
+
+  margin: $element-top-margin 0 $element-bottom-margin;
+
+  > label {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 32px 24px;
+    border: 1px dashed var(--md-comp-drop-zone-outline-color);
+    border-radius: var(--md-comp-drop-zone-shape);
+    text-align: center;
+    color: var(--md-sys-color-on-surface-variant);
+    cursor: pointer;
+    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
+    @include typescale("body-large");
+
+    > #{$icon} {
+      margin-block-end: 8px;
+      font-size: 32px;
+      color: var(--md-sys-color-primary);
+    }
+
+    > small {
+      @include typescale("body-small");
+    }
+
+    > input[type="file"] {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-surface) state-opacity("hover"),
+        transparent
+      );
+    }
+
+    &:has(> input:focus-visible) {
+      @include focus-ring;
+    }
+
+    &:has(> input:disabled) {
+      opacity: 0.38;
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  &.dragover > label {
+    border-style: solid;
+    border-color: var(--md-sys-color-primary);
+    background-color: var(--md-comp-drop-zone-dragover-container-color);
+    color: var(--md-comp-drop-zone-dragover-color);
+  }
+
+  > .drop-zone-files {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 8px 0 0;
+    padding: 0;
+    list-style: none;
+
+    > li {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 8px 16px;
+      border-radius: 8px;
+      background-color: var(--md-sys-color-surface-container);
+      color: var(--md-sys-color-on-surface);
+      @include typescale("body-medium");
+
+      > :first-child {
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+
+      > :last-child:not(:first-child) {
+        flex: none;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drop-zone > label {
+    transition: none;
+  }
+}

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

@@ -1,9 +1,11 @@
 @forward 'input-fields';
 @forward 'radio-buttons';
+@forward 'rating';
 @forward 'checkboxes';
 @forward 'switches';
 @forward 'select';
 @forward 'file-input';
+@forward 'drop-zone';
 @forward 'slider';
 @forward 'fieldset';