@expressivecss/expressive 0.14.1 → 0.16.0

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,17 +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
-
-$_data-table-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 20V7.8l-5.6 5.6L4 12l8-8 8 8-1.4 1.4L13 7.8V20z'/%3E%3C/svg%3E");
+//   --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%;
@@ -104,31 +126,109 @@ $_data-table-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000
     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;
+  }
+
+  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;
@@ -136,7 +236,7 @@ $_data-table-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000
     margin: 0;
     padding: 0;
     border: 0;
-    border-radius: 4px;
+    border-radius: var(--md-sys-shape-corner-extra-small);
     background: none;
     color: inherit;
     font: inherit;
@@ -147,14 +247,9 @@ $_data-table-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000
     @include focus-visible;
 
     &::after {
-      content: "";
-      flex: none;
-      width: 18px;
-      height: 18px;
-      background-color: currentColor;
-      mask: $_data-table-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;
     }
 
     &:hover::after {
@@ -163,26 +258,66 @@ $_data-table-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000
   }
 
   // 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;
   }
 }

package/src/sass/components/_datepicker.scss

@@ -1,6 +1,4 @@
-@use "../abstracts" as *;
-
-:is(.datepicker-container, .date-picker-container) {
+.datepicker-container {
   display: flex;
   flex-direction: column;
   max-width: 325px;
@@ -8,7 +6,7 @@
   background-color: var(--md-sys-color-surface);
 }
 
-:is(.datepicker-controls, .date-picker-controls) {
+.datepicker-controls {
   display: flex;
   justify-content: space-between;
   width: 280px;
@@ -23,7 +21,7 @@
       height: 49px;
       margin: 4px 0 0 0;
       border-bottom: none;
-      border-radius: 4px;
+      border-radius: var(--md-sys-shape-corner-extra-small);
       text-align: center;
 
       &:focus {
@@ -85,23 +83,13 @@
 }
 
 
-/* Date Display */
-:is(.datepicker-date-display, .date-picker-date-display) {
+// Date Display
+.datepicker-date-display {
   flex: 1 auto;
-  // @removed since v2.2.1-dev regarding Material M3 standards
-  // background-color: var(--md-sys-color-primary);
-  // color:  var(--md-sys-color-on-primary);
   padding: 20px 22px;
-  border-bottom: 1px solid var(--md-sys-color-surface-variant);
+  border-bottom: 1px solid var(--md-sys-color-surface-container-highest);
   font-weight: 500;
 
-  .year-text {
-    display: block;
-    font-size: 1.5rem;
-    line-height: 25px;
-    color:  var(--md-sys-color-on-primary);
-  }
-
   .date-text {
     display: block;
     font-size: 2.8rem;
@@ -117,12 +105,12 @@
 }
 
 
-/* Calendar */
-:is(.datepicker-calendar-container, .date-picker-calendar-container) {
+// Calendar
+.datepicker-calendar-container {
   flex: 2.5 auto;
 }
 
-:is(.datepicker-table, .date-picker-table) {
+.datepicker-table {
   width: 280px;
   font-size: 1rem;
   margin: 0 auto;
@@ -145,34 +133,19 @@
     color: var(--md-sys-color-on-surface-variant);
   }
 
-  :is(.datepicker-day, .date-picker-day) {
+  .datepicker-day {
     padding: 0;
-    color: var(--md-sys-color-on-background);
-    // border-radius: 50%;
+    color: var(--md-sys-color-on-surface);
 
     &.is-today {
       color: var(--md-sys-color-primary);
     }
-
-    /*&.is-selected button {
-      background-color: var(--md-sys-color-primary);
-      color:  var(--md-sys-color-on-primary);
-    }*/
   }
 }
 
-// @todo
-:is(.datepicker-day, .date-picker-day).has-event {}
-// @todo
-:is(.datepicker-day, .date-picker-day).is-inrange {}
-// @todo
-:is(.datepicker-day, .date-picker-day).is-startrange {}
-// @todo
-:is(.datepicker-day, .date-picker-day).is-endrange {}
-
-:is(.datepicker-day, .date-picker-day).is-daterange-start,
-:is(.datepicker-day, .date-picker-day).is-daterange-end,
-:is(.datepicker-day, .date-picker-day).is-daterange {
+.datepicker-day.is-daterange-start,
+.datepicker-day.is-daterange-end,
+.datepicker-day.is-daterange {
   position: relative;
 
   &:before {
@@ -186,20 +159,27 @@
   }
 }
 
-:is(.datepicker-day, .date-picker-day).is-daterange-start:before,
-:is(.datepicker-day, .date-picker-day).is-daterange-end:before {
+.datepicker-day.is-daterange-start:before,
+.datepicker-day.is-daterange-end:before {
   width: 50%;
 }
 
-:is(.datepicker-day, .date-picker-day).is-daterange-start:before {
-  left: 50%;
+// Follows the table's reading direction, which is the page's. Known issue:
+// the `isRTL` option reverses the cells in script instead, so with it on this
+// band points away from the range (and on an RTL page the calendar reads left
+// to right again). ponytail: render isRTL as dir="rtl" on the table; that also
+// needs the arrow keys and renderRow callers handled, see the 2026-10-16 review.
+// Before the start rule: a one-day range carries both classes and keeps the
+// start band, as it always has in LTR.
+.datepicker-day.is-daterange-end:before {
+  inset-inline-start: 0;
 }
 
-:is(.datepicker-day, .date-picker-day).is-daterange :is(.datepicker-day-button, .date-picker-day-button):before {
-  background-color: var(--md-sys-color-primary-container);
+.datepicker-day.is-daterange-start:before {
+  inset-inline-start: 50%;
 }
 
-:is(.datepicker-day-button, .date-picker-day-button) {
+.datepicker-day-button {
   background-color: transparent;
   border: none;
   line-height: 34px;
@@ -226,20 +206,20 @@
     color: var(--md-sys-color-on-primary);
 
     &:focus {
-      background-color: var(--md-sys-color-surface-variant);
+      background-color: var(--md-sys-color-surface-container-highest);
       color: var(--md-sys-color-primary);
     }
   }
 
-  &.is-outside-current-month button,
-  &.is-disabled button {
-    color: var(--md-sys-color-on-surface);
+  // The state classes sit on the <td>, not the button.
+  :is(.is-outside-current-month, .is-disabled) & {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     pointer-events: none;
   }
 }
 
-/* Footer */
-:is(.datepicker-footer, .date-picker-footer) {
+// Footer
+.datepicker-footer {
   width: 280px;
   margin: 0 auto;
   padding-bottom: 5px;
@@ -247,15 +227,30 @@
   justify-content: space-between;
 }
 
-:is(.datepicker-cancel, .date-picker-cancel),
-:is(.datepicker-clear, .date-picker-clear),
-:is(.datepicker-today, .date-picker-today),
-:is(.datepicker-done, .date-picker-done) {
-  color: var(--md-sys-color-primary);
+.datepicker-clear {
+  color: var(--md-sys-color-error);
   padding: 0 1rem;
 }
 
-:is(.datepicker-clear, .date-picker-clear) {
-  color: var(--md-sys-color-error);
-}
 
+// Today, the selected day and the range are colour only, and forced colors
+// paint them all as Canvas.
+@media (forced-colors: active) {
+  .datepicker-day.is-today .datepicker-day-button {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
+  .is-selected .datepicker-day-button {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+
+  // A filled band would sit behind CanvasText day numbers, and no system
+  // color pair guarantees contrast there. Rule the band top and bottom.
+  .datepicker-day:is(.is-daterange-start, .is-daterange-end, .is-daterange)::before {
+    box-sizing: border-box;
+    border-block: 1px solid CanvasText;
+  }
+}

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

@@ -0,0 +1,85 @@
+@use "../abstracts" as *;
+
+// Description list. Label and value pairs for a record's details, such as an
+// order's status, dates and totals, on a native <dl>: each <dt> is a label and
+// the <dd> elements after it are its values. A <div> may wrap each group, as
+// HTML allows; it takes no box of its own.
+//
+// Two columns from Medium up, labels in the first; at Compact widths each
+// label sits above its values, as it does in a .query-container narrower
+// than 600px. A divider runs above every group.
+//
+// Tokens:
+//   --md-comp-description-list-label-width   minmax(8rem, 33%)
+//   --md-comp-description-list-divider-color outline-variant
+//   --md-comp-description-list-padding       12px (block, per row)
+
+@mixin _stacked {
+  grid-template-columns: minmax(0, 1fr);
+
+  dt,
+  dd {
+    grid-column: 1;
+  }
+
+  dt {
+    padding-block-end: 0;
+  }
+
+  dt + dd {
+    padding-block-start: 4px;
+    border-block-start: 0;
+  }
+}
+
+dl.description-list {
+  --md-comp-description-list-label-width: minmax(8rem, 33%);
+  --md-comp-description-list-divider-color: var(--md-sys-color-outline-variant);
+  --md-comp-description-list-padding: 12px;
+
+  display: grid;
+  grid-template-columns: var(--md-comp-description-list-label-width) minmax(0, 1fr);
+  margin: $element-top-margin 0 $element-bottom-margin;
+
+  > div {
+    display: contents;
+  }
+
+  dt,
+  dd {
+    margin: 0;
+    padding-block: var(--md-comp-description-list-padding);
+    overflow-wrap: break-word;
+  }
+
+  // The space between the columns is the label's own padding, so a group's
+  // divider runs unbroken across both.
+  dt {
+    grid-column: 1;
+    padding-inline-end: 24px;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("label-large");
+  }
+
+  dd {
+    grid-column: 2;
+    color: var(--md-sys-color-on-surface);
+    @include typescale("body-medium");
+  }
+
+  // A group's first row carries the divider; extra values under one label
+  // continue the group without one.
+  dt,
+  dt + dd {
+    border-block-start: 1px solid var(--md-comp-description-list-divider-color);
+  }
+
+  dd + dd {
+    padding-block-start: 0;
+  }
+
+  // One column on Compact windows, and in a query container narrower than
+  // Compact, so a list in a sidebar stacks on a wide window too.
+  @include bp-down("medium") { @include _stacked; }
+  @container (width < 600px) { @include _stacked; }
+}