@expressivecss/expressive 0.15.0 → 0.17.0

package/src/sass/components/_chips.scss

@@ -6,8 +6,8 @@
 // elements, so everything below has to survive on any of them - hence the
 // resets.
 .chip {
-  --font-size: 14px;
-  --font-size-icon: 18px;
+  --font-size: var(--md-sys-typescale-label-large-font-size);
+  --font-size-icon: #{rem(18px)};
   --padding: 8px;
 
   color: var(--md-sys-color-on-surface-variant);
@@ -19,18 +19,16 @@
   min-width: 0;
   gap: 8px;
   margin: 0;
-  min-height: 32px;
+  min-height: rem(32px);
   height: auto;
-  // 4dp keeps wrapped lines off the edges. It is also exactly what a 24dp
-  // avatar or delete target leaves in the 32dp container, so a chip that fits
-  // on one line keeps its height.
+  // Keep a 4px inset for wrapped lines as the content boxes grow.
   padding-block: 4px;
-  padding-left: var(--padding);
-  padding-right: var(--padding);
-  font-size: var(--font-size);
+  padding-left: var(--md-comp-chip-padding, var(--padding));
+  padding-right: var(--md-comp-chip-padding, var(--padding));
+  font-size: var(--md-comp-chip-label-size, var(--font-size));
   line-height: 1.5;
   font-weight: 500;
-  border-radius: 8px;
+  border-radius: var(--md-sys-shape-corner-small);
   align-items: center;
   user-select: none;
   vertical-align: top;
@@ -41,13 +39,12 @@
   font-family: inherit;
   text-align: inherit;
 
-  // Selected. `.active` is the pre-0.8.0 name and still works; `:focus` used
-  // to stand in for selection here, which meant a chip could not show focus
-  // and selection as the different things they are.
-  &.selected,
-  &.active {
+  // Selected. `:focus` used to stand in for selection here, which meant a
+  // chip could not show focus and selection as the different things they are.
+  &.selected {
     background-color: var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
+    @include forced-colors-selected;
   }
 
   @include focus-visible();
@@ -58,11 +55,7 @@
   cursor: pointer;
 
   &:hover {
-    background-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-surface-variant) state-opacity("hover"),
-      var(--md-sys-color-surface-container-low)
-    );
+    background-color: state-layer(var(--md-sys-color-on-surface-variant), "hover", var(--md-sys-color-surface-container-low));
   }
 }
 
@@ -75,6 +68,7 @@
 .chip-input:checked + .chip {
   background-color: var(--md-sys-color-secondary-container);
   color: var(--md-sys-color-on-secondary-container);
+  @include forced-colors-selected;
 }
 
 .chip-input:focus-visible + .chip {
@@ -91,14 +85,14 @@
 .chip > img {
   flex-shrink: 0;
   margin: 0;
-  width: 24px;
-  height: 24px;
+  width: rem(24px);
+  height: rem(24px);
   object-fit: cover;
-  border-radius: 12px;
+  border-radius: var(--md-sys-shape-corner-medium);
 }
 
-.chip > :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
-  font-size: var(--font-size-icon);
+.chip > :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp) {
+  font-size: var(--md-comp-chip-icon-size, var(--font-size-icon));
   color: var(--md-sys-color-on-surface-variant);
 }
 
@@ -106,8 +100,8 @@
 .chip .close {
   flex-shrink: 0;
   border-radius: 50%;
-  height: 24px;
-  width: 24px;
+  height: rem(24px);
+  width: rem(24px);
   padding: 0;
   display: grid;
   justify-content: center;
@@ -131,7 +125,7 @@
 }
 
 .chip .close:hover {
-  background-color: color-mix(in oklab, var(--md-sys-color-on-surface-variant) state-opacity("hover"), transparent);
+  background-color: state-layer(var(--md-sys-color-on-surface-variant), "hover");
 }
 
 //--------------------------
@@ -145,7 +139,15 @@
   margin: 0 0 8px 0;
   padding: 4px;
   outline: none;
-  transition: all .3s;
+  // An effect, not a move: the fast effects spring, which never overshoots.
+  transition:
+    border-color var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects),
+    border-width var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects),
+    box-shadow var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 
   &.focus {
     border-bottom: 1px solid var(--md-sys-color-primary);
@@ -163,16 +165,16 @@
   input:not([type]):not(.browser-default).input {
     background: none;
     border: 0;
-    color: var(--md-sys-color-on-background);
+    color: var(--md-sys-color-on-surface);
     display: inline-block;
-    font-size: 16px;
-    height: 32px;
+    font-size: rem(16px);
+    height: rem(32px);
     outline: 0;
     margin: 0;
     padding: 0;
     width: fit-content;
-    min-width: 100px;
-    max-width: 200px;
+    min-width: rem(100px);
+    max-width: rem(200px);
 
     &:focus {
       border: 0;
@@ -187,18 +189,6 @@
   }
 }
 
-// Form prefix
-.prefix ~ .chips {
-  margin-left: 3rem;
-  width: calc(100% - 3rem);
-}
-
-// Form suffix
-.suffix ~ .chips {
-  margin-right: 3rem;
-  width: calc(100% - 3rem);
-}
-
 .chips:empty ~ label  {
   font-size: 0.8rem;
   transform: translateY(-140%);

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

@@ -11,8 +11,10 @@
 //
 // Modifiers: .stacked draws one column per row with each series on the
 // ones before it, .fade fades each column toward its base, .track draws a
-// full-height track behind each row's columns, .sparkline is a small chart
-// with no axis, grid, legend or tooltip.
+// full-height track behind each row's columns, .axis labels the y axis at
+// round values with a grid line at each, .sparkline is a small chart
+// with no axis, grid, legend or tooltip. A series header with class
+// "range" reads cells such as "12–28" and floats a column between the ends.
 //
 // Tokens:
 //   --md-comp-column-chart-height         240px (sparkline 48px)
@@ -20,14 +22,15 @@
 //   --md-comp-column-chart-shape          4px, the column's end radius
 //   --md-comp-column-chart-track-color    surface-container-highest
 //   --md-comp-column-chart-grid-color     outline-variant
+//   --md-comp-column-chart-axis-width     48px, room for the .axis labels
 //   --md-comp-column-chart-color-1..4     primary, tertiary, secondary,
 //                                         on-surface-variant
 
-@include chart("column-chart");
+@include chart("column-chart", $cursor: band);
+@include chart-axis("column-chart");
 
 .column-chart {
   --md-comp-column-chart-column-width: 60%;
-  --md-comp-column-chart-shape: 4px;
   --md-comp-column-chart-track-color: var(--md-sys-color-surface-container-highest);
 }
 
@@ -63,17 +66,14 @@
     &.negative {
       --column-chart-ends: var(--column-chart-base) var(--column-chart-base) var(--column-chart-tip) var(--column-chart-tip);
     }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    > div > span {
-      transition: clip-path 400ms cubic-bezier(0.2, 0, 0, 1);
 
-      @starting-style {
-        clip-path: inset(var(--zero, 100%) 0 calc(100% - var(--zero, 100%)) round var(--column-chart-ends));
-      }
+    // A range floats, so both its ends are tips.
+    &.floating {
+      --column-chart-base: var(--column-chart-tip);
     }
   }
+
+  @include chart-column-motion;
 }
 
 // One column per row, rounded only at the ends of the whole stack.
@@ -110,25 +110,14 @@
   }
 }
 
-// A band behind the highlighted row's columns.
-.column-chart-plot {
-  isolation: isolate;
-}
-
-.column-chart-cursor {
-  z-index: -1;
-  width: calc(100% / var(--rows, 1));
-  border-radius: var(--md-comp-column-chart-shape);
-  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
-  translate: -50% 0;
-}
-
 @media (forced-colors: active) {
   .column-chart-columns > div > span {
     forced-color-adjust: none;
   }
 
-  .column-chart-cursor {
+  // The track is a fill, which forced colors paint as Canvas.
+  .column-chart.track .column-chart-columns > div {
     outline: 1px solid CanvasText;
+    outline-offset: -1px;
   }
 }

package/src/sass/components/_command-palette.scss

@@ -54,7 +54,7 @@ dialog.command-palette {
 
     > li {
       margin: 0;
-      border-radius: 12px;
+      border-radius: var(--md-sys-shape-corner-medium);
       color: var(--md-sys-color-on-surface);
     }
 
@@ -87,7 +87,7 @@ dialog.command-palette {
 
       > #{$icon}:first-child {
         flex: none;
-        font-size: 20px;
+        font-size: rem(20px);
         color: var(--md-sys-color-on-surface-variant);
       }
 
@@ -132,9 +132,6 @@ dialog.command-palette {
   }
 }
 
-@media (forced-colors: active) {
-  dialog.command-palette > :is(ul, ol) > li.active {
-    outline: 2px solid Highlight;
-    outline-offset: -2px;
-  }
+dialog.command-palette > :is(ul, ol) > li.active {
+  @include forced-colors-selected;
 }

package/src/sass/components/_confetti.scss

@@ -6,9 +6,6 @@
 // styles its own canvas inline.
 
 canvas.confetti {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  @include fill-parent;
   pointer-events: none;
 }

package/src/sass/components/_countdown.scss

@@ -22,7 +22,7 @@
 //   --md-comp-countdown-duration   roll duration                       400ms
 //   --md-comp-countdown-easing     roll easing                         cubic-bezier(0.2, 0, 0, 1)
 
-$_timing: var(--md-comp-countdown-duration, 400ms) var(--md-comp-countdown-easing, cubic-bezier(0.2, 0, 0, 1));
+$_timing: var(--md-comp-countdown-duration, var(--md-sys-motion-duration-medium4)) var(--md-comp-countdown-easing, var(--md-sys-motion-easing-standard));
 $_tens: "";
 $_ones: "";
 @for $i from 0 through 99 {

package/src/sass/components/_data-table.scss

@@ -12,7 +12,25 @@
 // Sorting and selection are page state written into the markup:
 //   th[aria-sort]      a <button> in the header cell shows the sort arrow
 //   row checkbox       a checked box in the first cell selects the row
-// The framework only draws them; the page reorders rows.
+//   [aria-expanded]    a button in a row shows or hides the
+//                      tr.data-table-detail right after it; a button with
+//                      aria-haspopup (a row's menu, select or combobox) is
+//                      not a disclosure and is left alone
+// The framework draws them. With data-sort on the wrapper it also reorders
+// the rows and moves aria-sort, and a checkbox in the first header cell
+// selects every row (behaviors/dataTables.ts). The page flips
+// aria-expanded. A .data-table-actions bar just before the wrapper joins its
+// top edge and takes the selected color while any row is selected.
+//
+// .sticky-column on the wrapper pins each row's first cell to its
+// inline-start edge while the other columns scroll sideways. When the first
+// column holds checkboxes, the name cell after it is pinned too, so the
+// checkbox column takes a fixed width that offsets the second cell. Detail
+// rows and the caption scroll with the table.
+//
+// A <button class="drag-handle"> ending a header cell resizes its column by
+// pointer, keyboard or click (behaviors/dataTables.ts). It sits on the cell's
+// inline-end edge and is not a sort control.
 //
 // Tokens:
 //   --md-comp-data-table-container-color           surface
@@ -22,15 +40,21 @@
 //   --md-comp-data-table-row-height                52px / dense 40px
 //   --md-comp-data-table-cell-padding              16px
 //   --md-comp-data-table-selected-container-color  secondary-container
+//   --md-comp-data-table-detail-container-color    surface-container-low
+//   --md-comp-data-table-checkbox-column-width     cell padding + 18px box
+//   --md-comp-data-table-column-min-width          48px, the narrowest resize
 
 .data-table {
   --md-comp-data-table-container-color: var(--md-sys-color-surface);
-  --md-comp-data-table-shape: 12px;
+  --md-comp-data-table-shape: var(--md-sys-shape-corner-medium);
   --md-comp-data-table-outline-color: var(--md-sys-color-outline-variant);
   --md-comp-data-table-header-height: 56px;
   --md-comp-data-table-row-height: 52px;
   --md-comp-data-table-cell-padding: 16px;
   --md-comp-data-table-selected-container-color: var(--md-sys-color-secondary-container);
+  --md-comp-data-table-detail-container-color: var(--md-sys-color-surface-container-low);
+  --md-comp-data-table-checkbox-column-width: calc(var(--md-comp-data-table-cell-padding) + 18px);
+  --md-comp-data-table-column-min-width: #{rem(48px)};
 
   box-sizing: border-box;
   max-width: 100%;
@@ -102,31 +126,115 @@
     font-variant-numeric: tabular-nums;
   }
 
+  // --_row carries the row's state color to its cells, so a pinned cell can
+  // paint it over its own opaque fill.
   > table > tbody > tr {
-    transition: background-color 0.2s ease-out;
+    background-color: var(--_row, transparent);
+    transition: background-color var(--md-sys-motion-duration-short4) ease-out;
 
     &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--md-sys-color-on-surface) state-opacity("hover"),
-        transparent
-      );
+      --_row: #{state-layer(var(--md-sys-color-on-surface), "hover")};
     }
 
     &:has(> :first-child input[type="checkbox"]:checked) {
-      background-color: var(--md-comp-data-table-selected-container-color);
+      --_row: var(--md-comp-data-table-selected-container-color);
       color: var(--md-sys-color-on-secondary-container);
     }
   }
 
+  // Row expansion. The detail row shows only while the row before it holds an
+  // expanded toggle, so the page flips one attribute and nothing else.
+  > table > tbody > tr:not(:has(button[aria-expanded="true"]:not([aria-haspopup]))) + tr.data-table-detail {
+    display: none;
+  }
+
+  // Keep filtering and paging separate from the author's hidden attribute.
+  > table > tbody > tr:is([data-table-filter-hidden], [data-table-page-hidden]) {
+    display: none;
+  }
+
+  > table > tbody > tr.data-table-detail > td {
+    padding-block: 16px;
+    background-color: var(--md-comp-data-table-detail-container-color);
+  }
+
+  td button[aria-expanded]:not([aria-haspopup]) > #{$icon} {
+    transition: transform var(--md-sys-motion-duration-short4) ease-out;
+
+    // Its own reset: an author's motion duration override outlasts the
+    // layered token zeroing.
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  td button[aria-expanded="true"]:not([aria-haspopup]) > #{$icon} {
+    transform: rotate(180deg);
+  }
+
   // A checkbox cell hugs its box rather than taking a text column's width.
   :is(th, td):has(> label > input[type="checkbox"]:only-child) {
     width: 1px;
     padding-inline-end: 0;
   }
 
+  // Sticky first column. Pinned body cells stack above scrolled body cells,
+  // and the pinned header cells above the scrolled header cells.
+  &.sticky-column {
+    > table > * > tr:where(:not(.data-table-detail)) > :first-child {
+      position: sticky;
+      inset-inline-start: 0;
+      z-index: 1;
+      border-inline-end: 1px solid var(--md-comp-data-table-outline-color);
+      // ponytail: the row color jumps here while the rest of the row fades;
+      // a registered @property would let it transition too.
+      background: linear-gradient(var(--_row, transparent), var(--_row, transparent)) var(--md-comp-data-table-container-color);
+    }
+
+    > table > thead > tr > :first-child {
+      z-index: 2;
+    }
+  }
+
+  &.sticky-column:has(> table > * > tr > :first-child > label > input[type="checkbox"]:only-child) {
+    > table > * > tr:where(:not(.data-table-detail)) > :first-child {
+      width: var(--md-comp-data-table-checkbox-column-width);
+      padding-inline-end: 0;
+      border-inline-end: 0;
+    }
+
+    > table > * > tr:where(:not(.data-table-detail)) > :nth-child(2) {
+      position: sticky;
+      inset-inline-start: var(--md-comp-data-table-checkbox-column-width);
+      z-index: 1;
+      border-inline-end: 1px solid var(--md-comp-data-table-outline-color);
+      background: linear-gradient(var(--_row, transparent), var(--_row, transparent)) var(--md-comp-data-table-container-color);
+    }
+
+    > table > thead > tr > :nth-child(2) {
+      z-index: 2;
+    }
+  }
+
+  // A resizable column's handle. Header cells are sticky, so they hold it.
+  // The end padding clears the handle's 24px hit area, so end-aligned
+  // text never runs under it.
+  th:has(> button.drag-handle:last-child) {
+    min-inline-size: var(--md-comp-data-table-column-min-width);
+    padding-inline-end: max(var(--md-comp-data-table-cell-padding), 24px);
+  }
+
+  th > button.drag-handle:last-child {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    block-size: auto;
+    cursor: col-resize;
+    touch-action: none;
+  }
+
   // The sort control fills the header text and carries a trailing arrow.
-  th > button {
+  th > button:where(:not(.drag-handle)) {
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -134,7 +242,7 @@
     margin: 0;
     padding: 0;
     border: 0;
-    border-radius: 4px;
+    border-radius: var(--md-sys-shape-corner-extra-small);
     background: none;
     color: inherit;
     font: inherit;
@@ -145,14 +253,13 @@
     @include focus-visible;
 
     &::after {
-      content: "";
-      flex: none;
-      width: 18px;
-      height: 18px;
-      background-color: currentColor;
-      mask: $trend-arrow center / 18px no-repeat;
+      @include trend-arrow;
       opacity: 0;
-      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+      transition: opacity var(--md-sys-motion-duration-short4) ease-out, transform var(--md-sys-motion-duration-short4) ease-out;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     &:hover::after {
@@ -161,26 +268,66 @@
   }
 
   // Numbers line up on their end edge, so the arrow leads their label.
-  th.numeric > button {
+  th.numeric > button:where(:not(.drag-handle)) {
     flex-direction: row-reverse;
   }
 
   th:is([aria-sort="ascending"], [aria-sort="descending"]) {
     color: var(--md-sys-color-on-surface);
 
-    > button::after {
+    > button:where(:not(.drag-handle))::after {
       opacity: 1;
     }
   }
 
-  th[aria-sort="descending"] > button::after {
+  th[aria-sort="descending"] > button:where(:not(.drag-handle))::after {
     transform: rotate(180deg);
   }
 }
 
-@media (forced-colors: active) {
-  .data-table th > button::after {
-    forced-color-adjust: none;
-    background-color: CanvasText;
+.data-table th > button:where(:not(.drag-handle))::after {
+  @include forced-colors-fill;
+}
+
+// Bulk actions. A bar of buttons for the selected rows, written just before
+// the .data-table it acts on. It shares the table's outline and joins its top
+// edge; while a body row is selected it takes the selected color, so it reads
+// as part of the selection. The page keeps any "3 selected" text current.
+.data-table-actions {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-height: 56px;
+  margin: $element-top-margin 0 0;
+  padding: 8px 16px;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-block-end: 0;
+  border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0 0;
+  background-color: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  transition: background-color var(--md-sys-motion-duration-short4) ease-out;
+  @include typescale("title-small");
+
+  &[hidden] {
+    display: none;
+  }
+
+  &:has(+ .data-table > table > tbody > tr > :first-child input[type="checkbox"]:checked) {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  // The count or label pushes the buttons to the end.
+  > :first-child:not(button, .button, .icon-button) {
+    margin-inline-end: auto;
+  }
+
+  // A hidden bar leaves the table's own top edge alone.
+  &:not([hidden]) + .data-table {
+    margin-block-start: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
   }
 }