@expressivecss/expressive 0.15.0 → 0.17.0

package/src/sass/components/_menu.scss

@@ -3,11 +3,13 @@
 // Vertical menus (M3 Expressive).
 //
 // Anatomy is the HTML. A <menu id> is the surface; each <li> is an item.
-// A leading <i> is the leading icon; a trailing <i> or <kbd> is trailing
-// content. An <li class="divider" role="separator"> is a divider; a bare
-// <hr> is the older form and still styled, though <menu> only permits <li>.
+// An icon leads its label; a trailing icon or <kbd> is trailing content. An
+// <li class="divider" role="separator"> is a divider: <menu> only permits
+// <li>, so a bare <hr> is not styled.
 // A .gap <li> splits groups. A .label
-// <li> is a 32dp group heading. A nested <menu> is a flyout. The trigger
+// <li> is a 32dp group heading. A nested <menu> is a flyout. An
+// <li role="none"> holding a <ul role="group"> is a group of rows, styled
+// as if each row were a direct item. The trigger
 // is .menu-trigger[data-target] — that is the JS contract.
 //
 // Tokens are md.comp.menus - the expressive family, not baseline
@@ -29,9 +31,13 @@
 $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E");
 
 // Item states, interpolated after `li`. An item is any <li> that is not a
-// divider, optgroup, gap or label; an enabled item is also not disabled.
-$_item: ":not(.divider, .optgroup, .gap, .label)";
-$_enabled: ':not(.disabled, [aria-disabled="true"], .divider, .optgroup, .gap, .label)';
+// divider, optgroup, gap, label or group wrapper; an enabled item is also not
+// disabled. A segment is a run of a grouped surface, which a wrapper is.
+$_segment: ":not(.divider, .optgroup, .gap, .label)";
+$_item: ':not(.divider, .optgroup, .gap, .label, [role="none"])';
+$_enabled: ':not(.disabled, [aria-disabled="true"], .divider, .optgroup, .gap, .label, [role="none"])';
+// A row is a direct <li> or one inside a group.
+$_rows: '> li, > li > ul[role="group"] > li';
 $_selected: ':is(.selected, [aria-selected="true"], [aria-checked="true"])';
 $_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
 
@@ -41,17 +47,20 @@ $_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
   border: none;
 }
 
-@mixin menu-surface {
+// Search dialogs host trees directly, so their rows need the same menu tokens.
+menu[id],
+menu[id] li > menu,
+.select-search-popup {
   --md-comp-menu-container-color: var(--md-sys-color-surface-container-low);
-  --md-comp-menu-container-shape: 16px;
-  --md-comp-menu-group-shape: 8px;
+  --md-comp-menu-container-shape: var(--md-sys-shape-corner-large);
+  --md-comp-menu-group-shape: var(--md-sys-shape-corner-small);
   --md-comp-menu-container-inactive-shape: var(--md-comp-menu-group-shape);
   --md-comp-menu-group-padding: 2px;
   --md-comp-menu-gap: 2px;
   --md-comp-menu-item-container-height: 44px;
-  --md-comp-menu-item-container-shape: 4px;
-  --md-comp-menu-item-edge-shape: 12px;
-  --md-comp-menu-item-selected-container-shape: 12px;
+  --md-comp-menu-item-container-shape: var(--md-sys-shape-corner-extra-small);
+  --md-comp-menu-item-edge-shape: var(--md-sys-shape-corner-medium);
+  --md-comp-menu-item-selected-container-shape: var(--md-sys-shape-corner-medium);
   --md-comp-menu-item-leading-space: 16px;
   --md-comp-menu-item-trailing-space: 16px;
   --md-comp-menu-item-between-space: 12px;
@@ -74,19 +83,6 @@ $_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
   --md-comp-menu-item-icon-size: 20px;
   --md-comp-menu-supporting-text-color: var(--md-sys-color-on-surface-variant);
 
-  box-sizing: border-box;
-  min-width: 112px;
-  max-width: 280px;
-  margin: 0;
-  padding: var(--md-comp-menu-group-padding);
-  list-style: none;
-  background-color: var(--md-comp-menu-container-color);
-  border-radius: var(--md-comp-menu-container-shape);
-  color: var(--md-comp-menu-item-label-text-color);
-  @include z-depth("2");
-  transition: border-radius 200ms ease;
-  @include glass(var(--md-comp-menu-container-color));
-
   // The [vibrant] arms are not a second mapping - they are the statement that
   // a menu on a vibrant surface IS a vibrant menu. Without them the foundation
   // paints the container tertiary-container while the selected item keeps the
@@ -119,14 +115,40 @@ $_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
       --md-sys-color-on-tertiary
     );
   }
+}
+
+@mixin menu-surface {
+  box-sizing: border-box;
+  min-width: 112px;
+  max-width: 280px;
+  margin: 0;
+  padding: var(--md-comp-menu-group-padding);
+  list-style: none;
+  background-color: var(--md-comp-menu-container-color);
+  border-radius: var(--md-comp-menu-container-shape);
+  color: var(--md-comp-menu-item-label-text-color);
+  @include z-depth("2");
+  transition: border-radius var(--md-sys-motion-duration-short4) ease;
+  @include glass(var(--md-comp-menu-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;
+  }
+
+  > li > ul[role="group"] {
+    @include list-reset;
+  }
 
-  > li {
+  #{$_rows} {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     width: 100%;
     cursor: pointer;
-    text-align: left;
+    text-align: start;
     border-radius: var(--md-comp-menu-item-container-shape);
 
     // The bare-span arm is the non-interactive item. It has to exclude icons,
@@ -180,10 +202,7 @@ $_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
     > button > #{$icon},
     > #{$icon} {
       flex: 0 0 var(--md-comp-menu-item-icon-size);
-      font-size: var(--md-comp-menu-item-icon-size);
-      width: var(--md-comp-menu-item-icon-size);
-      height: var(--md-comp-menu-item-icon-size);
-      line-height: var(--md-comp-menu-item-icon-size);
+      @include icon-size(var(--md-comp-menu-item-icon-size));
       color: var(--md-comp-menu-item-leading-icon-color);
     }
 
@@ -217,8 +236,10 @@ $_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
     }
   }
 
-  > li#{$_item} {
-    min-height: var(--md-comp-menu-item-container-height);
+  #{$_rows} {
+    &#{$_item} {
+      min-height: var(--md-comp-menu-item-container-height);
+    }
   }
 
   > li#{$_item}:first-child {
@@ -234,74 +255,72 @@ $_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
       var(--md-comp-menu-item-edge-shape) var(--md-comp-menu-item-edge-shape);
   }
 
-  // Hover / press sit on extra-small corners and do not span the container.
-  > li#{$_enabled}:hover,
-  > li.active#{$_unselected} {
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-menu-item-label-text-color) 8%,
-      transparent
-    );
+  // A group at either end of the menu rounds its end row the same way.
+  > li[role="none"]:first-child
+    > ul[role="group"]
+    > li#{$_item}#{$_unselected}:first-child {
+    border-start-start-radius: var(--md-comp-menu-item-edge-shape);
+    border-start-end-radius: var(--md-comp-menu-item-edge-shape);
   }
 
-  > li#{$_enabled}:active {
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-menu-item-label-text-color) 10%,
-      transparent
-    );
+  > li[role="none"]:last-child
+    > ul[role="group"]
+    > li#{$_item}#{$_unselected}:last-child {
+    border-end-start-radius: var(--md-comp-menu-item-edge-shape);
+    border-end-end-radius: var(--md-comp-menu-item-edge-shape);
   }
 
-  // :not(.divider) only buys specificity: menu-item.selected.shape is 12dp
-  // unconditionally, so it has to outrank the first/last-child edge rule that
-  // would otherwise leave a selected end item with 4dp inner corners.
-  > li#{$_selected}:not(.divider) {
-    border-radius: var(--md-comp-menu-item-selected-container-shape);
-    background-color: var(--md-comp-menu-item-selected-container-color);
-    color: var(--md-comp-menu-item-selected-label-text-color);
-
-    > :is(a, button, #{$icon-label}) {
-      color: var(--md-comp-menu-item-selected-label-text-color);
+  #{$_rows} {
+    // Hover / press sit on extra-small corners and do not span the container.
+    &#{$_enabled}:hover,
+    &.active#{$_unselected} {
+      background-color: state-layer(var(--md-comp-menu-item-label-text-color), "hover");
     }
 
-    > :is(a, button, #{$icon-label}) > #{$icon},
-    > #{$icon} {
-      color: var(--md-comp-menu-item-selected-leading-icon-color);
+    &#{$_enabled}:active {
+      background-color: state-layer(var(--md-comp-menu-item-label-text-color), "pressed");
     }
 
-    > :is(a, button, #{$icon-label}) :is(.supporting-text, kbd, .shortcut) {
+    // :not(.divider) only buys specificity: menu-item.selected.shape is 12dp
+    // unconditionally, so it has to outrank the first/last-child edge rule that
+    // would otherwise leave a selected end item with 4dp inner corners.
+    &#{$_selected}:not(.divider) {
+      border-radius: var(--md-comp-menu-item-selected-container-shape);
+      background-color: var(--md-comp-menu-item-selected-container-color);
       color: var(--md-comp-menu-item-selected-label-text-color);
+      @include forced-colors-selected;
+
+      > :is(a, button, #{$icon-label}) {
+        color: var(--md-comp-menu-item-selected-label-text-color);
+      }
+
+      > :is(a, button, #{$icon-label}) > #{$icon},
+      > #{$icon} {
+        color: var(--md-comp-menu-item-selected-leading-icon-color);
+      }
+
+      > :is(a, button, #{$icon-label}) :is(.supporting-text, kbd, .shortcut) {
+        color: var(--md-comp-menu-item-selected-label-text-color);
+      }
     }
-  }
 
-  > li#{$_selected}:hover {
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-menu-item-selected-label-text-color) 8%,
-      var(--md-comp-menu-item-selected-container-color)
-    );
-  }
+    &#{$_selected}:hover {
+      background-color: state-layer(var(--md-comp-menu-item-selected-label-text-color), "hover", var(--md-comp-menu-item-selected-container-color));
+    }
 
-  > li#{$_selected}:is(:focus, :focus-visible, :active) {
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-menu-item-selected-label-text-color) 10%,
-      var(--md-comp-menu-item-selected-container-color)
-    );
-  }
+    &#{$_selected}:is(:focus, :focus-visible, :active) {
+      background-color: state-layer(var(--md-comp-menu-item-selected-label-text-color), "pressed", var(--md-comp-menu-item-selected-container-color));
+    }
 
-  > li:focus-visible {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: -3px;
-  }
+    @include focus-visible(-3px);
 
-  > li:is(.disabled, [aria-disabled="true"]) {
-    pointer-events: none;
-    opacity: 0.38;
+    &:is(.disabled, [aria-disabled="true"]) {
+      pointer-events: none;
+      opacity: 0.38;
+    }
   }
 
   // Inset divider — selection and rules do not span the container.
-  > hr,
   > li.divider {
     display: block;
     width: calc(100% - 8px);
@@ -353,21 +372,21 @@ $_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
     // blur the menu itself. Grouped menus stay solid.
     backdrop-filter: none;
 
-    > li#{$_item} {
+    > li#{$_segment} {
       padding-inline: var(--md-comp-menu-group-padding);
       background-color: var(--md-comp-menu-container-color);
       border-radius: 0;
     }
 
-    > li#{$_item}:first-child,
-    > li.gap + li#{$_item} {
+    > li#{$_segment}:first-child,
+    > li.gap + li#{$_segment} {
       padding-block-start: var(--md-comp-menu-group-padding);
       border-start-start-radius: var(--md-comp-menu-group-shape);
       border-start-end-radius: var(--md-comp-menu-group-shape);
     }
 
-    > li#{$_item}:has(+ li.gap),
-    > li#{$_item}:last-child {
+    > li#{$_segment}:has(+ li.gap),
+    > li#{$_segment}:last-child {
       padding-block-end: var(--md-comp-menu-group-padding);
       border-end-start-radius: var(--md-comp-menu-group-shape);
       border-end-end-radius: var(--md-comp-menu-group-shape);
@@ -391,20 +410,12 @@ $_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
     > li.active#{$_unselected}
       > :is(a, button, #{$icon-label}) {
       border-radius: var(--md-comp-menu-item-container-shape);
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-menu-item-label-text-color) 8%,
-        transparent
-      );
+      background-color: state-layer(var(--md-comp-menu-item-label-text-color), "hover");
     }
 
     > li#{$_enabled}:active
       > :is(a, button, #{$icon-label}) {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-menu-item-label-text-color) 10%,
-        transparent
-      );
+      background-color: state-layer(var(--md-comp-menu-item-label-text-color), "pressed");
     }
 
     > li#{$_selected}
@@ -415,20 +426,12 @@ $_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
 
     > li#{$_selected}:hover
       > :is(a, button, #{$icon-label}) {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-menu-item-selected-label-text-color) 8%,
-        var(--md-comp-menu-item-selected-container-color)
-      );
+      background-color: state-layer(var(--md-comp-menu-item-selected-label-text-color), "hover", var(--md-comp-menu-item-selected-container-color));
     }
 
     > li#{$_selected}:is(:focus, :focus-visible, :active)
       > :is(a, button, #{$icon-label}) {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-menu-item-selected-label-text-color) 10%,
-        var(--md-comp-menu-item-selected-container-color)
-      );
+      background-color: state-layer(var(--md-comp-menu-item-selected-label-text-color), "pressed", var(--md-comp-menu-item-selected-container-color));
     }
   }
 
@@ -444,6 +447,7 @@ $_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
     margin-inline-start: auto;
     background-color: var(--md-comp-menu-item-trailing-icon-color);
     mask: $_menu-chevron center / 20px no-repeat;
+    @include forced-colors-fill;
   }
 }
 
@@ -452,14 +456,21 @@ menu[id] {
 
   display: none;
   position: absolute;
+  // JS positions the menu with physical left/top. Clear the UA [popover]
+  // inset: 0 first, or the over-constrained box ignores left in RTL.
+  inset: auto;
   left: 0;
   top: 0;
-  z-index: 9999;
   overflow-y: auto;
   opacity: 0;
   user-select: none;
   transform-origin: 0 0;
 
+  // Menu opens the surface as a manual popover, in the top layer.
+  &:popover-open {
+    display: block;
+  }
+
   // Nested flyouts sit outside the list box; do not clip them.
   &:has(> li > menu) {
     overflow: visible;
@@ -494,7 +505,13 @@ menu[id] li > menu {
     opacity 180ms ease,
     transform 180ms ease,
     visibility 180ms ease,
-    border-radius 200ms ease;
+    border-radius var(--md-sys-motion-duration-short4) ease;
+
+  // The flyout opens toward inline-end, so it slides in from the other side.
+  &:dir(rtl) {
+    transform: translateX(4px) scale(0.96);
+    transform-origin: 100% 0;
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -503,7 +520,7 @@ menu[id] li > menu {
     opacity: 1;
     pointer-events: auto;
     transform: none;
-    --md-comp-menu-container-shape: 16px;
+    --md-comp-menu-container-shape: var(--md-sys-shape-corner-large);
   }
 }
 
@@ -512,13 +529,22 @@ menu[id] li.open > menu {
   opacity: 1;
   pointer-events: auto;
   transform: none;
-  --md-comp-menu-container-shape: 16px;
+  --md-comp-menu-container-shape: var(--md-sys-shape-corner-large);
 }
 
 menu[id] li.submenu-start > menu {
   inset-inline-start: auto;
   inset-inline-end: 100%;
   transform-origin: 100% 0;
+
+  // Flipped toward inline-start, so it also slides in from the far side:
+  // the right in a right-to-left menu.
+  transform: translateX(4px) scale(0.96);
+
+  &:dir(rtl) {
+    transform: translateX(-4px) scale(0.96);
+    transform-origin: 0 0;
+  }
 }
 
 menu[id] li.submenu-start:is(:hover, :focus-within, .open) > menu {
@@ -531,12 +557,9 @@ menu[id] li.submenu-start:is(:hover, :focus-within, .open) > menu {
 // item gets focus here - inherits :focus-visible from the element that had it,
 // so opening the menu by keyboard still lights the item and opening it by
 // pointer still does not.
-menu[id] > li:focus-visible {
-  background-color: color-mix(
-    in oklab,
-    var(--md-comp-menu-item-label-text-color) 10%,
-    transparent
-  );
+menu[id] > li:focus-visible,
+menu[id] > li > ul[role="group"] > li:focus-visible {
+  background-color: state-layer(var(--md-comp-menu-item-label-text-color), "focus");
 }
 
 menu[id].grouped > li:focus-visible {
@@ -547,11 +570,7 @@ menu[id].grouped
   > li:focus-visible#{$_unselected}
   > :is(a, button, span:not(.material-symbols, .badge, .supporting-text)) {
   border-radius: var(--md-comp-menu-item-container-shape);
-  background-color: color-mix(
-    in oklab,
-    var(--md-comp-menu-item-label-text-color) 10%,
-    transparent
-  );
+  background-color: state-layer(var(--md-comp-menu-item-label-text-color), "focus");
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -575,8 +594,8 @@ menu[id].grouped
   // The trigger stays in its pressed state for as long as its menu is open.
   &[aria-expanded="true"] {
     background-image: linear-gradient(
-      color-mix(in oklab, currentcolor 10%, transparent),
-      color-mix(in oklab, currentcolor 10%, transparent)
+      state-layer(currentcolor, "pressed"),
+      state-layer(currentcolor, "pressed")
     );
   }
 }

package/src/sass/components/_menubar.scss

@@ -0,0 +1,47 @@
+@use "../abstracts" as *;
+
+// Menubar. An application's row of menus (File, Edit, View) on a .menubar of
+// .menu-trigger buttons; each opens an ordinary <menu>. The Menubar
+// component adds the menubar role and keyboard contract. The bar is a
+// surface-container row of text-styled items, and an item whose menu is open
+// stays selected.
+//
+// Tokens:
+//   --md-comp-menubar-container-color   surface-container
+//   --md-comp-menubar-shape             12px
+//   --md-comp-menubar-item-height       40px
+
+.menubar {
+  --md-comp-menubar-container-color: var(--md-sys-color-surface-container);
+  --md-comp-menubar-shape: var(--md-sys-shape-corner-medium);
+  --md-comp-menubar-item-height: 40px;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  padding: 4px;
+  border-radius: var(--md-comp-menubar-shape);
+  background-color: var(--md-comp-menubar-container-color);
+
+  > .menu-trigger {
+    min-block-size: var(--md-comp-menubar-item-height);
+    margin: 0;
+    padding: 0 12px;
+    border: 0;
+    border-radius: var(--md-sys-shape-corner-small);
+    background: none;
+    color: var(--md-sys-color-on-surface);
+    font: inherit;
+    cursor: pointer;
+    @include typescale("label-large");
+    @include focus-visible;
+    @include text-action('[aria-expanded="true"]');
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid CanvasText;
+  }
+}

package/src/sass/components/_message-scroller.scss

@@ -51,11 +51,11 @@
   width: fit-content;
   margin-inline: auto;
   @include z-depth("2");
-  transition: opacity .15s ease-out, scale .15s ease-out;
+  transition: opacity var(--md-sys-motion-duration-short3) ease-out, scale var(--md-sys-motion-duration-short3) ease-out;
 
   &[inert] {
     opacity: 0;
-    scale: .8;
+    scale: 0.8;
   }
 }
 

package/src/sass/components/_message.scss

@@ -25,8 +25,8 @@
   --md-comp-message-avatar-size: 32px;
   --md-comp-message-gap: 8px;
   --md-comp-message-surface-max-width: 80%;
-  --md-comp-message-bubble-shape: 20px;
-  --md-comp-message-bubble-grouped-shape: 4px;
+  --md-comp-message-bubble-shape: var(--md-sys-shape-corner-large-increased);
+  --md-comp-message-bubble-grouped-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-message-bubble-container-color: var(--md-sys-color-surface-container-high);
   --md-comp-message-bubble-color: var(--md-sys-color-on-surface);
 
@@ -102,7 +102,7 @@
   }
 
   > #{$icon} {
-    font-size: 20px;
+    font-size: rem(20px);
   }
 }
 

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

@@ -6,6 +6,11 @@
 // else as a line. `dashed` dashes a line. A series with `end` is drawn
 // against a second scale, set by data-end-min and data-end-max on the
 // figure. The plot, tooltip, labels and legend come from chart().
+// .axis labels the start scale beside the plot at round values, with a
+// grid line at each, and an end scale on the far side, stretched so its
+// labels share those lines when neither scale's ends are set.
+// .stacked stacks the columns on each scale into one per row, .points marks
+// each line's values with dots, and .straight draws straight lines.
 //
 // Columns are full-height spans clipped to their value, as in the column
 // chart, behind an SVG of the lines and areas, as in the line chart.
@@ -17,19 +22,16 @@
 //   --md-comp-mixed-chart-shape          4px, the column's end radius
 //   --md-comp-mixed-chart-line-width     3px (sparkline 2px)
 //   --md-comp-mixed-chart-grid-color     outline-variant
+//   --md-comp-mixed-chart-axis-width     48px, room for each scale's .axis labels
 //   --md-comp-mixed-chart-color-1..4     primary, tertiary, secondary,
 //                                        on-surface-variant
 
-@include chart("mixed-chart");
+@include chart("mixed-chart", $lines: true);
+@include chart-axis("mixed-chart");
 
 .mixed-chart {
   --md-comp-mixed-chart-column-width: 50%;
-  --md-comp-mixed-chart-shape: 4px;
-  --md-comp-mixed-chart-line-width: 3px;
-
-  &.sparkline {
-    --md-comp-mixed-chart-line-width: 2px;
-  }
+  --md-comp-mixed-chart-shape: var(--md-sys-shape-corner-extra-small);
 }
 
 .mixed-chart-plot {
@@ -73,45 +75,35 @@
     &.negative {
       --mixed-chart-ends: 0 0 var(--md-comp-mixed-chart-shape) var(--md-comp-mixed-chart-shape);
     }
-  }
-
-  @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(--mixed-chart-ends));
-      }
+    // A range floats, so both its ends are rounded.
+    &.floating {
+      --mixed-chart-ends: var(--md-comp-mixed-chart-shape);
     }
   }
-}
 
-.mixed-chart-line {
-  fill: none;
-  stroke: var(--mixed-chart-color);
-  stroke-width: var(--md-comp-mixed-chart-line-width);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  vector-effect: non-scaling-stroke;
+  @include chart-column-motion;
 }
 
-.mixed-chart-series.dashed .mixed-chart-line {
-  stroke-dasharray: 2 8;
+// Stacked columns share one column per row, and the end scale's another
+// beside it. Only each stack's top segment is rounded: the last of its
+// scale, with the end scale's columns after the others in the table.
+.mixed-chart.stacked .mixed-chart-columns > div > span {
+  grid-area: 1 / 1;
+
+  &.end {
+    grid-column: 2;
+  }
+
+  &:not(:last-child, :has(+ .end)) {
+    --mixed-chart-ends: 0;
+  }
 }
 
 .mixed-chart-series:not(.area) .mixed-chart-area {
   display: none;
 }
 
-.mixed-chart-series stop {
-  stop-color: var(--mixed-chart-color);
-  stop-opacity: 0;
-
-  &:first-child {
-    stop-opacity: 0.24;
-  }
-}
-
 // A band behind the highlighted row, with a point over each line. The
 // cursor makes no stacking context, so the band can go behind the marks
 // and the points in front of them.
@@ -125,7 +117,7 @@
     inset: 0;
     z-index: -1;
     border-radius: var(--md-comp-mixed-chart-shape);
-    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");
   }
 
   > span {

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

@@ -0,0 +1,21 @@
+// Dialog created by src/ts/plugins/modalDisplayPlugin.ts for a modal date or
+// time picker. The dialog partial draws it as a basic dialog over a scrim,
+// so a selective build needs "dialog" too; this only fits it to the picker,
+// which scrolls inside it on a short screen.
+
+dialog.display-modal {
+  width: auto;
+  min-width: 0;
+  max-height: calc(100% - 48px);
+
+  > :is(.datepicker-container, .timepicker-container) {
+    flex: 1 1 auto;
+    min-height: 0;
+    // The dialog sizes to the picker, so the time picker's AM and PM
+    // buttons, which run past its 325px, stay inside.
+    max-width: none;
+    padding: 0;
+    overflow: auto;
+    background-color: transparent;
+  }
+}