@expressivecss/expressive 0.14.1 → 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;
+  }
+}