@expressivecss/expressive 0.15.0 → 0.16.0

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;
@@ -58,7 +56,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);
     }
   }
 
@@ -73,11 +71,7 @@ $_tree-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     @include focus-visible;
 
     &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--md-sys-color-on-surface) state-opacity("hover"),
-        transparent
-      );
+      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
     }
   }
 
@@ -91,14 +85,7 @@ $_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;
     }
 
     &:dir(rtl)::before {

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

@@ -0,0 +1,122 @@
+@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");
+
+.treemap-chart {
+  --md-comp-treemap-chart-gap: 4px;
+  // As in the pie chart: the container roles mixed 45% with on-surface pass
+  // 3:1 on the surface (WCAG 1.4.11), and surface text on them passes too.
+  --md-comp-treemap-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
+  --md-comp-treemap-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
+  --md-comp-treemap-chart-on-color-1: var(--md-sys-color-on-primary);
+  --md-comp-treemap-chart-on-color-2: var(--md-sys-color-on-tertiary);
+  --md-comp-treemap-chart-on-color-3: var(--md-sys-color-on-secondary);
+  --md-comp-treemap-chart-on-color-4: var(--md-sys-color-surface);
+  --md-comp-treemap-chart-on-color-5: var(--md-sys-color-surface);
+  --md-comp-treemap-chart-on-color-6: var(--md-sys-color-surface);
+}
+
+@for $i from 1 through 6 {
+  .treemap-chart [data-series="#{$i}"] {
+    --treemap-chart-color: var(--md-comp-treemap-chart-color-#{$i});
+    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-#{$i});
+  }
+}
+
+.treemap-chart-plot {
+  border: 0;
+  background: none;
+}
+
+.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;
+    overflow: hidden;
+    margin-inline: calc(var(--treemap-chart-inset) + 8px);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  > 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;
+  }
+}

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

@@ -33,16 +33,8 @@ label:has(> [type="checkbox"]):not(.switch),
   --md-comp-checkbox-state-layer-size: 40px;
 
   position: relative;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-height: 48px;
-  margin: 0;
-  cursor: pointer;
-  user-select: none;
   -webkit-tap-highlight-color: transparent;
-  color: var(--md-sys-color-on-surface);
-  @include typescale("body-large");
+  @include selection-control-label;
 }
 
 // A row of checkboxes is a group of controls, not navigation - see rule 4 in
@@ -77,7 +69,7 @@ label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
   border-radius: var(--md-comp-checkbox-container-shape);
   background-color: transparent;
   cursor: pointer;
-  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
+  transition: border-color var(--md-sys-motion-duration-short4) ease, background-color var(--md-sys-motion-duration-short4) ease, box-shadow var(--md-sys-motion-duration-short4) ease;
 
   &:checked,
   &:indeterminate {
@@ -94,8 +86,7 @@ label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
     @include _ring(var(--md-sys-color-primary), "hover");
   }
 
-  &:focus-visible,
-  &.tabbed:focus {
+  &:focus-visible {
     @include _ring(var(--md-sys-color-primary), "focus");
     outline: none;
   }
@@ -152,14 +143,14 @@ label:has(> [type="checkbox"]):not(.switch):not(:has(> [type="checkbox"] + span)
   &::before {
     content: "";
     position: absolute;
-    left: 0;
+    // A label that pads its box in, such as a list row, moves the mark with it.
+    inset-inline-start: var(--checkbox-mark-inset, 0);
     top: 50%;
     width: var(--md-comp-checkbox-container-size);
     height: var(--md-comp-checkbox-container-size);
     margin-top: calc(var(--md-comp-checkbox-container-size) / -2);
     pointer-events: none;
     background-color: var(--md-sys-color-on-primary);
-    -webkit-mask: #{$_cb-check} center / contain no-repeat;
     mask: #{$_cb-check} center / contain no-repeat;
     opacity: 0;
   }
@@ -170,7 +161,6 @@ label:has(> [type="checkbox"]):not(.switch):not(:has(> [type="checkbox"] + span)
   }
 
   &:has(> [type="checkbox"]:indeterminate)::before {
-    -webkit-mask-image: #{$_cb-dash};
     mask-image: #{$_cb-dash};
   }
 
@@ -191,10 +181,10 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
 }
 
 // Legacy / Select / Autocomplete: input + span draws the same
-// 18dp anatomy. Exclude .switch — that file paints the track on a span.
+// 18dp anatomy. Exclude .switch, which paints its own track.
 // $state is appended to the checkbox, e.g. ":checked" or ".invalid".
 @function _cb-span($state: "") {
-  @return "*:not(.switch) > [type='checkbox']#{$state} + span:not(.lever, .supporting-text, .character-counter, .file-path)";
+  @return "*:not(.switch) > [type='checkbox']#{$state} + span:not(.supporting-text, .character-counter, .file-path)";
 }
 
 // inline-block, not inline-flex: a flex span turns each text run and link
@@ -207,7 +197,7 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
   box-sizing: border-box;
   min-height: 48px;
   padding-block: calc((48px - 1lh) / 2);
-  padding-left: 30px;
+  padding-inline-start: 30px;
   cursor: pointer;
   user-select: none;
 }
@@ -216,7 +206,7 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
 #{_cb-span()}::after {
   content: "";
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 50%;
   box-sizing: border-box;
   width: 18px;
@@ -228,12 +218,11 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
 #{_cb-span()}::before {
   border: 2px solid var(--md-sys-color-on-surface-variant);
   background-color: transparent;
-  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
+  transition: border-color var(--md-sys-motion-duration-short4) ease, background-color var(--md-sys-motion-duration-short4) ease, box-shadow var(--md-sys-motion-duration-short4) ease;
 }
 
 #{_cb-span()}::after {
   background-color: var(--md-sys-color-on-primary);
-  -webkit-mask: #{$_cb-check} center / contain no-repeat;
   mask: #{$_cb-check} center / contain no-repeat;
   opacity: 0;
 }
@@ -248,7 +237,6 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
 }
 
 #{_cb-span(":indeterminate")}::after {
-  -webkit-mask-image: #{$_cb-dash};
   mask-image: #{$_cb-dash};
 }
 
@@ -260,8 +248,7 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
   @include _ring(var(--md-sys-color-primary), "hover");
 }
 
-#{_cb-span(":focus-visible")}::before,
-#{_cb-span(".tabbed:focus")}::before {
+#{_cb-span(":focus-visible")}::before {
   @include _ring(var(--md-sys-color-primary), "focus");
 }
 
@@ -300,3 +287,98 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
 #{_cb-span(":disabled:is(:checked, :indeterminate)")}::after {
   background-color: var(--md-sys-color-surface);
 }
+
+// Forced colors paint the box and the masked check as Canvas, so checked and
+// unchecked look the same, and the focus ring is a box-shadow they drop. Draw
+// the state in system colors and give focus a real outline.
+@media (forced-colors: active) {
+  label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
+  .checkbox > [type="checkbox"] {
+    &:focus-visible {
+      outline: 2px solid CanvasText;
+      outline-offset: 2px;
+    }
+
+    &:is(:checked, :indeterminate) {
+      forced-color-adjust: none;
+      border-color: Highlight;
+      background-color: Highlight;
+    }
+
+    &:disabled {
+      border-color: GrayText;
+    }
+
+    &:disabled:is(:checked, :indeterminate) {
+      background-color: GrayText;
+    }
+
+    // Forced colors have no error color, so an invalid box takes a dashed
+    // edge instead. A checked one keeps the Highlight fill - the error fill
+    // above is more specific than the :checked rule here and would pass the
+    // author's red through - inside a CanvasText edge, clipped so Canvas
+    // shows between the dashes. A disabled one stays GrayText.
+    &:is(.invalid, [aria-invalid="true"]) {
+      border-style: dashed;
+    }
+
+    &:is(.invalid, [aria-invalid="true"]):is(:checked, :indeterminate):not(:disabled) {
+      border-color: CanvasText;
+      background-color: Highlight;
+      background-clip: padding-box;
+    }
+  }
+
+  // Forced colors repaint the dimmed label as CanvasText, like an enabled one.
+  label:has(> [type="checkbox"]:disabled):not(.switch),
+  .checkbox:has([type="checkbox"]:disabled) {
+    color: GrayText;
+  }
+
+  label:has(> [type="checkbox"]):not(.switch):not(:has(> [type="checkbox"] + span)),
+  .checkbox:not(:has(> [type="checkbox"] + span)) {
+    &::before {
+      forced-color-adjust: none;
+      background-color: HighlightText;
+    }
+  }
+
+  #{_cb-span(":is(:checked, :indeterminate)")}::before {
+    forced-color-adjust: none;
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+
+  #{_cb-span()}::after {
+    forced-color-adjust: none;
+    background-color: HighlightText;
+  }
+
+  #{_cb-span(":focus-visible")}::before {
+    outline: 2px solid CanvasText;
+    outline-offset: 2px;
+  }
+
+  #{_cb-span(":is(.invalid, [aria-invalid='true'])")}::before {
+    border-style: dashed;
+  }
+
+  // The error mark color is more specific than the HighlightText rules
+  // above, so an invalid box restates them with the same selector.
+  label:has(> [type="checkbox"]):not(.switch):not(:has(> [type="checkbox"] + span)),
+  .checkbox:not(:has(> [type="checkbox"] + span)) {
+    &:has(> [type="checkbox"]:is(.invalid, [aria-invalid="true"]):is(:checked, :indeterminate):not(:disabled))::before {
+      background-color: HighlightText;
+    }
+  }
+
+  #{_cb-span(":is(.invalid, [aria-invalid='true']):is(:checked, :indeterminate):not(:disabled)")}::after {
+    background-color: HighlightText;
+  }
+
+  #{_cb-span(":is(.invalid, [aria-invalid='true']):is(:checked, :indeterminate):not(:disabled)")}::before {
+    border-color: CanvasText;
+    background-color: Highlight;
+    background-clip: padding-box;
+  }
+}