@expressivecss/expressive 0.15.0 → 0.17.0

package/src/sass/components/_toolbar.scss

@@ -3,7 +3,7 @@
 // Toolbars (M3 Expressive).
 //
 // Anatomy is the HTML. A <div class="toolbar"> is the bar. Direct
-// <button> / <a> children are the actions. An <i> is the icon; wrap a
+// <button> / <a> children are the actions. An icon is a .material-symbols span; wrap a
 // label in <span>. .active marks the selected action. A .filled action
 // is the emphasized control (the in-bar FAB). Helpers are only for
 // variants markup cannot express: .docked, .vibrant, .vertical, .fixed,
@@ -53,12 +53,11 @@
 // form is the older markup and still works.
 $_toolbar: ".toolbar";
 
-// 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)";
-$_standard: "#{$_toolbar}:is(.standard, :not(.vibrant, .filled))";
-$_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
+// The two axes.
+$_floating: "#{$_toolbar}:is(.floating, :not(.docked))";
+$_docked: "#{$_toolbar}.docked";
+$_standard: "#{$_toolbar}:is(.standard, :not(.vibrant))";
+$_vibrant: "#{$_toolbar}.vibrant";
 
 #{$_toolbar} {
   // Shared across all four variants. --md-comp-toolbar-color stands for
@@ -116,25 +115,23 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
 
     > #{$icon} {
       flex: 0 0 auto;
-      font-size: var(--md-comp-toolbar-icon-size);
-      width: var(--md-comp-toolbar-icon-size);
-      height: var(--md-comp-toolbar-icon-size);
-      line-height: var(--md-comp-toolbar-icon-size);
+      @include icon-size(var(--md-comp-toolbar-icon-size));
     }
 
     // The state layer is the content color in both color sets, which is
     // what currentColor already is on an action that has not been filled.
     &:hover:not(.active, .filled) {
-      background-color: color-mix(in oklab, currentColor state-opacity("hover"), transparent);
+      background-color: state-layer(currentColor, "hover");
     }
 
     &:active:not(.active, .filled) {
-      background-color: color-mix(in oklab, currentColor state-opacity("pressed"), transparent);
+      background-color: state-layer(currentColor, "pressed");
     }
 
     &.active {
       background-color: var(--md-comp-toolbar-selected-container-color);
       color: var(--md-comp-toolbar-selected-color);
+      @include forced-colors-selected;
     }
 
     &:disabled {
@@ -158,23 +155,15 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
   > :is(a, button).filled:not(.extra, .icon-button) {
     background-color: var(--md-sys-color-primary);
     color: var(--md-sys-color-on-primary);
-    border-radius: 16px;
+    border-radius: var(--md-sys-shape-corner-large);
     box-shadow: none;
 
     &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--md-sys-color-on-primary) state-opacity("hover"),
-        var(--md-sys-color-primary)
-      );
+      background-color: state-layer(var(--md-sys-color-on-primary), "hover", var(--md-sys-color-primary));
     }
 
     &:active {
-      background-color: color-mix(
-        in oklab,
-        var(--md-sys-color-on-primary) state-opacity("pressed"),
-        var(--md-sys-color-primary)
-      );
+      background-color: state-layer(var(--md-sys-color-on-primary), "pressed", var(--md-sys-color-primary));
     }
   }
 
@@ -182,7 +171,7 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
     height: 40px;
     min-height: 40px;
     padding: 0 24px;
-    border-radius: 20px;
+    border-radius: var(--md-sys-shape-corner-large-increased);
     width: auto;
   }
 
@@ -194,8 +183,7 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
     margin: 0;
   }
 
-  // Spacer between leading and trailing actions. `.max` on a *child* is the
-  // spacer; on the bar itself it is the docked alias.
+  // Spacer between leading and trailing actions: a `.max` child.
   > .max {
     flex: 1 1 auto;
     align-self: stretch;
@@ -209,7 +197,7 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
 // vertical bar the container is 64dp wide and arbitrarily tall, where 9999px
 // would round the long edge into an oval.
 #{$_floating} {
-  --md-comp-toolbar-container-shape: 32px;
+  --md-comp-toolbar-container-shape: var(--md-sys-shape-corner-extra-large-increased);
   --md-comp-toolbar-leading-space: 8px;
   --md-comp-toolbar-trailing-space: 8px;
   --md-comp-toolbar-external-space: 16px;
@@ -302,33 +290,34 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
     color: var(--md-comp-toolbar-floating-fab-icon-color);
     @include z-depth("1");
 
+    // A disabled FAB without .circle misses the (0,3,0) FAB disabled arm in
+    // _buttons.scss, and this block's level 1 would win at rest. aria-disabled
+    // is included so the FAB's own focus tint does not show through.
+    &#{$expressive-disabled} {
+      @include btn-disabled;
+    }
+
+    // aria-disabled keeps pointer events so hover help still reaches it.
+    &[aria-disabled="true"] {
+      pointer-events: auto;
+    }
+
+    // State arms skip a disabled FAB, which they would otherwise outrank.
     // One opacity per state. All three arms are needed, bare `:focus`
     // included: .extra.circle draws its own `:active, :focus` tint over
     // primary-container, and leaving either uncovered would flash the FAB's
     // default colour through a click on this one.
-    &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-toolbar-floating-fab-icon-color) state-opacity("hover"),
-        var(--md-comp-toolbar-floating-fab-container-color)
-      );
+    &:hover:not(:where(#{$expressive-disabled})) {
+      background-color: state-layer(var(--md-comp-toolbar-floating-fab-icon-color), "hover", var(--md-comp-toolbar-floating-fab-container-color));
       @include z-depth("2");
     }
 
-    &:focus {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-toolbar-floating-fab-icon-color) state-opacity("focus"),
-        var(--md-comp-toolbar-floating-fab-container-color)
-      );
+    &:focus:not(:where(#{$expressive-disabled})) {
+      background-color: state-layer(var(--md-comp-toolbar-floating-fab-icon-color), "focus", var(--md-comp-toolbar-floating-fab-container-color));
     }
 
-    &:active {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-toolbar-floating-fab-icon-color) state-opacity("pressed"),
-        var(--md-comp-toolbar-floating-fab-container-color)
-      );
+    &:active:not(:where(#{$expressive-disabled})) {
+      background-color: state-layer(var(--md-comp-toolbar-floating-fab-icon-color), "pressed", var(--md-comp-toolbar-floating-fab-container-color));
     }
   }
 }
@@ -347,7 +336,7 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
 // has no rule - a bar naming it falls through to the one above.
 #{$_toolbar}.fixed {
   position: fixed;
-  z-index: 996;
+  z-index: var(--expressive-z-toolbar);
   inset: auto auto var(--md-comp-toolbar-external-space) 50%;
   transform: translateX(-50%);
 }

package/src/sass/components/_tooltip.scss

@@ -4,7 +4,7 @@
 //
 // Anatomy is the HTML. A child .tooltip is the bubble — no .tooltipped
 // required. Helpers are only for placement and the rich variant:
-// .top (default), .bottom, .left, .right, .rich / .max.
+// .top (default), .bottom, .left, .right, .rich.
 //
 // Tokens follow https://m3.material.io/components/tooltips/specs
 //   plain    inverse-surface / inverse-on-surface, 4dp, body-small
@@ -14,12 +14,13 @@
 //   gap      4dp from the activator
 //
 // The JS plugin still exists: .tooltipped + data-tooltip, AutoInit,
-// class .tooltip appended to <body>. There is no data-html / unsafeHTML.
+// class .tooltip appended to <body>, or to the shadow root its trigger lives
+// in. There is no data-html / unsafeHTML.
 
 .tooltip {
   --md-comp-plain-tooltip-container-color: var(--md-sys-color-inverse-surface);
   --md-comp-plain-tooltip-supporting-text-color: var(--md-sys-color-inverse-on-surface);
-  --md-comp-plain-tooltip-container-shape: 4px;
+  --md-comp-plain-tooltip-container-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-tooltip-anchor-gap: 4px;
 
   box-sizing: border-box;
@@ -40,8 +41,15 @@
   white-space: normal;
   overflow-wrap: anywhere;
   pointer-events: auto;
-  z-index: 2000;
+  z-index: var(--expressive-z-tooltip);
   @include glass(var(--md-comp-plain-tooltip-container-color));
+
+  // Forced colors paint the fill as Canvas and drop the shadow, so the
+  // surface would blend into the page without an edge.
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 // CSS-only: a child of the activator. Default sits above (M3 preferred).
@@ -52,7 +60,7 @@
 // Only shrink-wrap typical activators. A stray .tooltip as a section
 // child must not turn the section into inline-flex (invalid <p><div>
 // gets hoisted and would match).
-:is(button, a, span, label, i):has(> .tooltip) {
+:is(button, a, span, label):has(> .tooltip) {
   display: inline-flex;
 }
 
@@ -62,7 +70,7 @@
   opacity: 0;
   inset: 0 auto auto 50%;
   transform: translate(-50%, calc(-100% - var(--md-comp-tooltip-anchor-gap))) scale(0.96);
-  transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s;
+  transition: opacity var(--md-sys-motion-duration-short3) ease-out, transform var(--md-sys-motion-duration-short3) ease-out, visibility 0s linear var(--md-sys-motion-duration-short3);
 }
 
 :not(body) > .tooltip.bottom {
@@ -107,9 +115,12 @@
   transform: translate(calc(100% + var(--md-comp-tooltip-anchor-gap)), -50%) scale(1);
 }
 
-// JS plugin: appended to <body>, top/left set in script. Do not use the
-// child-positioning rules; they would fight the inline transform.
-body > .tooltip {
+// JS plugin: appended to <body> or a shadow root, top/left set in script. Do
+// not use the child-positioning rules; they would fight the inline transform.
+// A shadow root's top-level elements have no parent element, so neither
+// `body >` nor `:not(body) >` reaches them; `:host >` does.
+body > .tooltip,
+:host > .tooltip {
   position: absolute;
   left: 0;
   top: 0;
@@ -119,10 +130,9 @@ body > .tooltip {
 }
 
 // Rich tooltip — title, supporting text, optional action.
-.tooltip.rich,
-.tooltip.max {
+.tooltip.rich {
   --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface-container);
-  --md-comp-rich-tooltip-container-shape: 12px;
+  --md-comp-rich-tooltip-container-shape: var(--md-sys-shape-corner-medium);
 
   display: flex;
   flex-direction: column;
@@ -179,3 +189,6 @@ body > .tooltip {
 .tooltip-content {
   min-width: 0;
 }
+
+// Transient messages are not part of the page.
+.tooltip { @include print-hidden; }

package/src/sass/components/_tour.scss

@@ -0,0 +1,89 @@
+@use "../abstracts" as *;
+
+// Tour. A card that walks people through an interface one step at a time,
+// beside the element each step explains. The card is a .tour
+// [popover="manual"] holding a <section> per step, an optional .tour-progress
+// line, a .tour-actions row and an optional close .icon-button; the Tour
+// behavior shows one section, writes the progress and gives the current
+// target the anchor the card is placed against. The target gets .tour-target,
+// a ring that marks what the step is about.
+//
+// Tokens:
+//   --md-comp-tour-container-color  surface-container-high
+//   --md-comp-tour-shape            16px
+//   --md-comp-tour-max-width        360px
+//   --md-comp-tour-gap              12px (from the target)
+
+.tour {
+  --md-comp-tour-container-color: var(--md-sys-color-surface-container-high);
+  --md-comp-tour-shape: var(--md-sys-shape-corner-large);
+  --md-comp-tour-max-width: 360px;
+  --md-comp-tour-gap: 12px;
+
+  box-sizing: border-box;
+  inline-size: max-content;
+  max-inline-size: min(var(--md-comp-tour-max-width), calc(100vw - 32px));
+  inset: auto;
+  margin: var(--md-comp-tour-gap);
+  padding: 20px 24px 16px;
+  border: 0;
+  border-radius: var(--md-comp-tour-shape);
+  background-color: var(--md-comp-tour-container-color);
+  color: var(--md-sys-color-on-surface);
+  @include z-depth("3");
+  @include typescale("body-medium");
+
+  position-anchor: --tour-target;
+  position-area: block-end;
+  position-try-fallbacks: flip-block, inline-end, inline-start;
+
+  &:focus {
+    outline: none;
+  }
+
+  // The behavior hides steps and buttons with the hidden attribute, which a
+  // button's own display rule would otherwise beat.
+  [hidden] {
+    display: none;
+  }
+
+  > section > :is(h1, h2, h3, h4, h5, h6) {
+    margin: 0 0 8px;
+    padding-inline-end: 32px;
+    @include typescale("title-medium");
+  }
+
+  > section > p {
+    margin: 0;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  > .tour-progress {
+    margin: 16px 0 0;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("label-medium");
+  }
+
+  > .tour-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-block-start: 12px;
+  }
+
+  > .icon-button:last-child {
+    position: absolute;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid CanvasText;
+  }
+}
+
+.tour-target {
+  outline: 3px solid var(--md-sys-color-primary);
+  outline-offset: 4px;
+}

package/src/sass/components/_transfer-list.scss

@@ -0,0 +1,73 @@
+@use "../abstracts" as *;
+
+// Transfer list. Two lists of checkbox rows with the buttons that move rows
+// between them in the middle. The rows are `.list` label rows, so a checked
+// row already shows the selected pill.
+//
+//   <div class="transfer-list" data-name="toppings">
+//     <ul class="list transfer-available" aria-label="Available toppings">
+//       <li><label><input type="checkbox" value="olives"> Olives</label></li>
+//     </ul>
+//     <div class="transfer-actions">
+//       <button type="button" class="icon-button" data-transfer="add" aria-label="Add checked toppings">…</button>
+//     </div>
+//     <ul class="list transfer-chosen" aria-label="Chosen toppings"></ul>
+//   </div>
+//
+// The grid follows the page direction, so the available list is at the
+// inline start, and the icons flip in a right-to-left page to keep pointing
+// at the list they move rows to. Below the medium window size the lists stack
+// with the buttons in a row between them.
+//
+// Tokens:
+//   --md-comp-transfer-list-gap              16px   between the lists and the buttons
+//   --md-comp-transfer-list-max-block-size   20rem  a list scrolls past this height
+//   --md-comp-transfer-list-shape            medium corner of each list's outline
+
+.transfer-list {
+  --md-comp-transfer-list-gap: 16px;
+  --md-comp-transfer-list-max-block-size: #{rem(320px)};
+  --md-comp-transfer-list-shape: var(--md-sys-shape-corner-medium);
+
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: var(--md-comp-transfer-list-gap);
+  align-items: center;
+
+  > .transfer-available,
+  > .transfer-chosen {
+    align-self: stretch;
+    min-block-size: rem(120px);
+    max-block-size: var(--md-comp-transfer-list-max-block-size);
+    margin: 0;
+    overflow-y: auto;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: var(--md-comp-transfer-list-shape);
+  }
+
+  > .transfer-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .material-symbols:dir(rtl) {
+      scale: -1 1;
+    }
+  }
+
+  @include bp-down("medium") {
+    grid-template-columns: minmax(0, 1fr);
+
+    > .transfer-actions {
+      flex-direction: row;
+      justify-content: center;
+
+      // Down and up, toward the list each button moves rows to.
+      .material-symbols,
+      .material-symbols:dir(rtl) {
+        rotate: 90deg;
+        scale: none;
+      }
+    }
+  }
+}

package/src/sass/components/_transitions.scss

@@ -1,11 +1,11 @@
-@use "../abstracts" as *;
-
+// !important because the class must replace the transition of whatever
+// component it is added to (.button, .fab, ...), at any specificity.
 .scale-transition {
-  transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
+  transition: transform var(--md-sys-motion-duration-medium2) cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
 
   &.scale-out {
     transform: scale(0);
-    transition: transform .2s !important;
+    transition: transform var(--md-sys-motion-duration-short4) !important;
   }
 
   &.scale-in {

package/src/sass/components/_tree.scss

@@ -15,8 +15,6 @@
 //   --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;
@@ -31,12 +29,10 @@ $_tree-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
   // 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;
+    @include list-reset;
     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 {
@@ -58,7 +54,7 @@ $_tree-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
 
     > #{$icon} {
       flex: none;
-      font-size: 20px;
+      font-size: rem(20px);
     }
   }
 
@@ -71,14 +67,7 @@ $_tree-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
   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
-      );
-    }
+    @include text-action;
   }
 
   li > details > summary {
@@ -91,14 +80,8 @@ $_tree-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
 
     // 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;
+      @include tree-chevron;
+      @include forced-colors-fill;
     }
 
     &:dir(rtl)::before {
@@ -125,15 +108,7 @@ $_tree-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     }
   }
 
-  @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;
-    }
+  [aria-current]:not([aria-current="false"]) {
+    @include forced-colors-selected;
   }
 }

package/src/sass/components/_treemap-chart.scss

@@ -0,0 +1,98 @@
+@use "../abstracts" as *;
+
+// Treemap chart. The same <figure>, <figcaption> and <table> as a pie
+// chart; TreemapChart draws each row of the first value column as a
+// rectangle whose area is its share of the whole, filling the plot, the
+// largest at the top inline-start corner. The plot and tooltip come from
+// chart(). The script places each rectangle with inset-inline-start, top,
+// width and height in percent, so a right-to-left page mirrors the layout.
+//
+// The fill is a ::before inset by half the gap, so the boxes still tile the
+// plot and keep their areas. Each rectangle is a size
+// container: its row name and cell show when there is room for them, and
+// neither shows in a rectangle too small to hold them.
+//
+// Tokens:
+//   --md-comp-treemap-chart-height       240px
+//   --md-comp-treemap-chart-gap          4px between neighbours
+//   --md-comp-treemap-chart-color-1..6   primary, tertiary, secondary,
+//                                        on-surface-variant, then primary- and
+//                                        tertiary-container deepened toward
+//                                        on-surface, as in the pie chart
+//   --md-comp-treemap-chart-on-color-1..6  on-primary, on-tertiary,
+//                                          on-secondary, surface, surface,
+//                                          surface; the text in each
+
+@include chart("treemap-chart", $colors: 6, $on-colors: true, $grid: false);
+
+.treemap-chart {
+  --md-comp-treemap-chart-gap: 4px;
+}
+
+.treemap-chart-boxes {
+  position: absolute;
+  inset: 0;
+}
+
+.treemap-chart-box {
+  --treemap-chart-inset: calc(var(--md-comp-treemap-chart-gap) / 2);
+
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+  color: var(--treemap-chart-on-color);
+  container-type: size;
+
+  // The fill, inset by half the gap. A border or padding would give a
+  // rectangle thinner than them a larger area than its value.
+  &::before {
+    content: "";
+    position: absolute;
+    inset: var(--treemap-chart-inset);
+    border-radius: var(--md-sys-shape-corner-small);
+    background-color: var(--treemap-chart-color);
+  }
+
+  // The highlighted row's ring fills the gap round it.
+  &.active::before {
+    outline: var(--treemap-chart-inset) solid var(--md-sys-color-on-surface);
+  }
+
+  > span {
+    position: relative;
+    @include ellipsis;
+    margin-inline: calc(var(--treemap-chart-inset) + 8px);
+  }
+
+  > span:first-child {
+    margin-block-start: calc(var(--treemap-chart-inset) + 8px);
+    @include typescale("label-large");
+  }
+
+  > span:last-child {
+    @include typescale("body-small");
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+// Room for both lines and a few letters of the name, inside the gap and margins.
+@container (width < #{rem(60px)}) or (height < #{rem(56px)}) {
+  .treemap-chart-box > span {
+    display: none;
+  }
+}
+
+@media (forced-colors: active) {
+  // The fill is painted as Canvas, so an edge just inside it marks each one.
+  .treemap-chart-box::before {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
+  .treemap-chart-box.active::before {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}