@expressivecss/expressive 0.15.0 → 0.17.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,19 +83,13 @@
 }
 
 
-/* Date Display */
-:is(.datepicker-date-display, .date-picker-date-display) {
+// Date Display
+.datepicker-date-display {
   flex: 1 auto;
   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;
-  }
-
   .date-text {
     display: block;
     font-size: 2.8rem;
@@ -113,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;
@@ -141,9 +133,9 @@
     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);
+    color: var(--md-sys-color-on-surface);
 
     &.is-today {
       color: var(--md-sys-color-primary);
@@ -151,9 +143,9 @@
   }
 }
 
-: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 {
@@ -167,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;
@@ -207,7 +206,7 @@
     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);
     }
   }
@@ -219,8 +218,8 @@
   }
 }
 
-/* Footer */
-:is(.datepicker-footer, .date-picker-footer) {
+// Footer
+.datepicker-footer {
   width: 280px;
   margin: 0 auto;
   padding-bottom: 5px;
@@ -228,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; }
+}

package/src/sass/components/_dialog.scss

@@ -3,7 +3,7 @@
 // Dialogs (M3 Expressive).
 //
 // Anatomy is the HTML. A <dialog> is a basic dialog: optional leading
-// <i>, a heading, supporting <p> (or a wrapping <div>), optional <hr>
+// icon, a heading, supporting <p> (or a wrapping <div>), optional <hr>
 // + extra content, and a last-child <form method="dialog"> or <nav>
 // as the action row. dialog.max is the full-screen variant: a <header>
 // holds close, the headline, and the confirming action.
@@ -20,7 +20,7 @@
 
 dialog {
   --md-comp-basic-dialog-container-color: var(--md-sys-color-surface-container-high);
-  --md-comp-basic-dialog-container-shape: 28px;
+  --md-comp-basic-dialog-container-shape: var(--md-sys-shape-corner-extra-large);
   --md-comp-basic-dialog-container-min-width: 280px;
   --md-comp-basic-dialog-container-max-width: 560px;
   --md-comp-basic-dialog-scrim-blur: 12px;
@@ -40,12 +40,50 @@ dialog {
   @include z-depth("3");
   @include glass(var(--md-comp-basic-dialog-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;
+  }
+
   &::backdrop {
     background-color: var(--md-comp-scrim-color);
     backdrop-filter: blur(var(--md-comp-basic-dialog-scrim-blur));
   }
 }
 
+// Basic dialogs fade in on the fast effects spring and grow from 96% on the
+// default spatial spring, so motion="expressive" reaches them. Entry only:
+// close() takes the dialog out of the top layer at once, as the sheets do.
+// Sheets, full-screen dialogs and the expanding card's dialog move their
+// own way.
+$_basic: "dialog:not(.bottom-sheet, .side-sheet, .max, .expanding-card-dialog)";
+
+#{$_basic} {
+  --md-comp-basic-dialog-easing: var(--md-sys-motion-spring-default-spatial);
+  --md-comp-basic-dialog-duration: var(--md-sys-motion-spring-default-spatial-duration);
+  --md-comp-basic-dialog-effects-easing: var(--md-sys-motion-spring-fast-effects);
+  --md-comp-basic-dialog-effects-duration: var(--md-sys-motion-spring-fast-effects-duration);
+
+  transition:
+    opacity var(--md-comp-basic-dialog-effects-duration) var(--md-comp-basic-dialog-effects-easing),
+    scale var(--md-comp-basic-dialog-duration) var(--md-comp-basic-dialog-easing);
+}
+
+@starting-style {
+  :is(#{$_basic})[open] {
+    opacity: 0;
+    scale: 0.96;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #{$_basic} {
+    transition: none;
+  }
+}
+
 // showModal() puts the dialog in the top layer but does not lock the
 // document scroller. :modal is the modal-only match — a modeless
 // dialog.show() must not freeze the page.
@@ -65,10 +103,7 @@ dialog > #{$icon}:first-child {
   flex: 0 0 auto;
   align-self: center;
   margin: 24px 24px 0;
-  font-size: 24px;
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
+  @include icon-size(rem(24px));
   color: var(--md-sys-color-secondary);
 }
 
@@ -144,15 +179,7 @@ dialog > :is(form, nav):last-child {
   background: none;
 }
 
-dialog:not(
-    .bottom,
-    .bottom-sheet,
-    .side-sheet,
-    .right,
-    .right-sheet,
-    .left,
-    .left-sheet
-  )
+dialog:not(.bottom-sheet, .side-sheet)
   > :is(form, nav):last-child
   > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button) {
   @include btn-flat;
@@ -181,26 +208,14 @@ dialog.max {
   }
 
   > header {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex: 0 0 auto;
-    box-sizing: border-box;
-    min-height: 64px;
-    margin: 0;
+    @include header-bar(4px);
     padding: 8px 4px;
-    background: none;
-    box-shadow: none;
   }
 
   > header > :is(h1, h2, h3, h4, h5, h6) {
-    flex: 1 1 auto;
-    min-width: 0;
-    margin: 0;
+    @include header-bar-headline;
     padding: 0 12px;
     text-align: start;
-    color: var(--md-sys-color-on-surface);
-    @include typescale("title-large");
   }
 
   > header > form {
@@ -208,7 +223,8 @@ dialog.max {
     flex: 0 0 auto;
     align-items: center;
     margin: 0;
-    padding: 0 8px 0 0;
+    padding: 0;
+    padding-inline-end: 8px;
     border: 0;
     background: none;
     box-shadow: none;
@@ -222,32 +238,9 @@ dialog.max {
   // escape hatch the app bar already has.
   > header > :is(button, a):not(.button, .icon-button):has(> #{$icon}:only-child) {
     display: inline-flex;
-    flex: 0 0 48px;
     align-items: center;
     justify-content: center;
-    box-sizing: border-box;
-    width: 48px;
-    height: 48px;
-    min-width: 48px;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background-color: transparent;
-    color: var(--md-sys-color-on-surface-variant);
-    box-shadow: none;
-
-    > #{$icon} {
-      font-size: 24px;
-      width: 24px;
-      height: 24px;
-      line-height: 24px;
-    }
-
-    &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
-    }
-
-    @include focus-visible;
+    @include header-icon-action;
   }
 
   // Confirming action in the header is a text button, not an icon.
@@ -257,7 +250,7 @@ dialog.max {
     min-width: 0;
     height: 40px;
     padding-inline: 12px;
-    border-radius: 20px;
+    border-radius: var(--md-sys-shape-corner-large-increased);
   }
 
   > :is(p, div) {

package/src/sass/components/_docked-display.scss

@@ -1,11 +1,9 @@
-@use "../abstracts" as *;
-
 // Container created by src/ts/plugins/dockedDisplayPlugin.ts, which positions
 // and animates it inline. Only the resting state belongs here.
 
 .display-docked {
   position: absolute;
   opacity: 0;
-  z-index: 9999;
+  z-index: var(--expressive-z-menu);
   visibility: hidden;
 }

package/src/sass/components/_drag-handle.scss

@@ -8,12 +8,16 @@
 // to it. semantics.json enforces exactly that split, which is what lets the
 // interactive states below key off `button` and be right every time.
 //
-// **Nothing here drags.** The handle is CSS; the dragging is the page's, and so
-// is the keyboard path to whatever the drag achieves. A handle that answers
-// only a pointer puts its outcome out of reach of everyone not using one, so
-// the framework ships no reordering behaviour to hang off this and the docs say
-// plainly that a drag-only reorder is unreachable. The decorative spelling is
-// the default; the button spelling has to earn its name.
+// **Nothing here drags.** The handle is CSS. Four behaviors wire it: the
+// bottom sheet's dismiss drag, PaneResize and data table column resize on the
+// button spelling, and Sortable on a decorative handle in a .sortable row.
+// Each brings its own
+// keyboard and single-pointer path; Sortable's is the row's Move up and Move
+// down buttons, which semantics.json requires. Anywhere else the dragging is
+// the page's, and so is the keyboard path to whatever the drag achieves. A
+// handle that answers only a pointer puts its outcome out of reach of
+// everyone not using one. The decorative spelling is the default; the button
+// spelling has to earn its name.
 //
 // M3 Expressive tokenised the *vertical* handle - the one sitting in the gutter
 // between two panes, Compose's VerticalDragHandle: a 4x48dp bar in a 24dp
@@ -46,11 +50,11 @@
   --md-comp-drag-handle-container-width: 24px;
   --md-comp-drag-handle-width: 4px;
   --md-comp-drag-handle-height: 48px;
-  --md-comp-drag-handle-shape: 9999px;
+  --md-comp-drag-handle-shape: var(--md-sys-shape-corner-full);
   --md-comp-drag-handle-color: var(--md-sys-color-outline);
   --md-comp-drag-handle-pressed-width: 12px;
   --md-comp-drag-handle-pressed-height: 52px;
-  --md-comp-drag-handle-pressed-shape: 12px;
+  --md-comp-drag-handle-pressed-shape: var(--md-sys-shape-corner-medium);
   --md-comp-drag-handle-pressed-color: var(--md-sys-color-on-surface);
   --md-comp-drag-handle-state-layer-color: var(--md-sys-color-inverse-on-surface);
 
@@ -83,8 +87,8 @@
     block-size: var(--md-comp-drag-handle-height);
     border-radius: var(--md-comp-drag-handle-shape);
     background-color: var(--md-comp-drag-handle-color);
-    transition: inline-size .15s ease, block-size .15s ease, border-radius .15s ease,
-      background-color .15s ease;
+    transition: inline-size var(--md-sys-motion-duration-short3) ease, block-size var(--md-sys-motion-duration-short3) ease, border-radius var(--md-sys-motion-duration-short3) ease,
+      background-color var(--md-sys-motion-duration-short3) ease;
   }
 }
 
@@ -94,19 +98,11 @@
 // every other element to aria-hidden is what keeps the two in step.
 button.drag-handle {
   &:hover {
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-drag-handle-state-layer-color) state-opacity("hover"),
-      transparent
-    );
+    background-color: state-layer(var(--md-comp-drag-handle-state-layer-color), "hover");
   }
 
   &:focus-visible {
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-drag-handle-state-layer-color) state-opacity("focus"),
-      transparent
-    );
+    background-color: state-layer(var(--md-comp-drag-handle-state-layer-color), "focus");
   }
 
   @include focus-visible;

package/src/sass/components/_expanding-card.scss

@@ -9,8 +9,19 @@
 article.expanding-card {
   --md-comp-expanding-card-container-color: var(--md-sys-color-surface);
   --md-comp-expanding-card-expanded-shape: 0;
-  --md-comp-expanding-card-motion-duration: 500ms;
-  --md-comp-expanding-card-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+  // The container morph and the hero height run on the slow spatial spring,
+  // M3's choice for a full-screen move; the close button and the detail
+  // content arrive on the default spatial spring and fade on the fast
+  // effects spring. All follow motion="expressive". Each easing is paired
+  // with its own duration: a spring played over another duration is no
+  // longer that spring.
+  --md-comp-expanding-card-motion-duration: var(--md-sys-motion-spring-slow-spatial-duration);
+  --md-comp-expanding-card-motion-easing: var(--md-sys-motion-spring-slow-spatial);
+  --md-comp-expanding-card-content-duration: var(--md-sys-motion-spring-default-spatial-duration);
+  --md-comp-expanding-card-content-delay: var(--md-sys-motion-duration-short4);
+  --md-comp-expanding-card-content-easing: var(--md-sys-motion-spring-default-spatial);
+  --md-comp-expanding-card-fade-duration: var(--md-sys-motion-spring-fast-effects-duration);
+  --md-comp-expanding-card-fade-easing: var(--md-sys-motion-spring-fast-effects);
   --md-comp-expanding-card-content-padding: 16px;
   --md-comp-expanding-card-expanded-media-height: min(56dvh, 560px);
 }
@@ -114,16 +125,16 @@ dialog.expanding-card-dialog > .expanding-card-close {
   border-radius: 50%;
   box-shadow: none;
   opacity: 0;
-  transform: scale(.8);
+  transform: scale(0.8);
   transition:
-    opacity 150ms ease-out,
-    transform 300ms var(--md-comp-expanding-card-motion-easing);
+    opacity var(--md-comp-expanding-card-fade-duration) var(--md-comp-expanding-card-fade-easing),
+    transform var(--md-comp-expanding-card-content-duration) var(--md-comp-expanding-card-content-easing);
 }
 
 dialog.expanding-card-dialog.expanded > .expanding-card-close {
   opacity: 1;
   transform: scale(1);
-  transition-delay: 150ms;
+  transition-delay: var(--md-sys-motion-duration-short3);
 }
 
 dialog.expanding-card-dialog > .expanding-card-content {
@@ -136,14 +147,14 @@ dialog.expanding-card-dialog > .expanding-card-content {
   opacity: 0;
   transform: translateY(16px);
   transition:
-    opacity 150ms ease-out,
-    transform 300ms var(--md-comp-expanding-card-motion-easing);
+    opacity var(--md-comp-expanding-card-fade-duration) var(--md-comp-expanding-card-fade-easing),
+    transform var(--md-comp-expanding-card-content-duration) var(--md-comp-expanding-card-content-easing);
 }
 
 dialog.expanding-card-dialog.expanded > .expanding-card-content {
   opacity: 1;
   transform: translateY(0);
-  transition-delay: 180ms;
+  transition-delay: var(--md-comp-expanding-card-content-delay);
 }
 
 .expanding-card-detail-header {
@@ -155,11 +166,7 @@ dialog.expanding-card-dialog.expanded > .expanding-card-content {
 }
 
 .expanding-card-detail-header > :is(h1, h2, h3, h4, h5, h6) {
-  flex: 1 1 auto;
-  min-width: 0;
-  margin: 0;
-  color: var(--md-sys-color-on-surface);
-  @include typescale("title-large");
+  @include header-bar-headline;
 }
 
 .expanding-card-actions {