@expressivecss/expressive 0.14.1 → 0.16.0

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,14 +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-axis("mixed-chart");
 
 .mixed-chart {
   --md-comp-mixed-chart-column-width: 50%;
-  --md-comp-mixed-chart-shape: 4px;
+  --md-comp-mixed-chart-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-mixed-chart-line-width: 3px;
 
   &.sparkline {
@@ -73,16 +80,28 @@
     &.negative {
       --mixed-chart-ends: 0 0 var(--md-comp-mixed-chart-shape) var(--md-comp-mixed-chart-shape);
     }
+
+    // A range floats, so both its ends are rounded.
+    &.floating {
+      --mixed-chart-ends: 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);
+  @include chart-column-motion;
+}
 
-      @starting-style {
-        clip-path: inset(var(--zero, 100%) 0 calc(100% - var(--zero, 100%)) round var(--mixed-chart-ends));
-      }
-    }
+// 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;
   }
 }
 
@@ -99,6 +118,15 @@
   stroke-dasharray: 2 8;
 }
 
+// Round caps on zero-length lines: dots that keep their size at any scale.
+.mixed-chart-points {
+  fill: none;
+  stroke: var(--mixed-chart-color);
+  stroke-width: calc(var(--md-comp-mixed-chart-line-width) * 3);
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
 .mixed-chart-series:not(.area) .mixed-chart-area {
   display: none;
 }
@@ -125,7 +153,7 @@
     inset: 0;
     z-index: -1;
     border-radius: var(--md-comp-mixed-chart-shape);
-    background-color: color-mix(in srgb, 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;
+  }
+}

package/src/sass/components/_navbar.scss

@@ -51,7 +51,7 @@
 $_bar: ":is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)";
 $_heading: ":is(h1, h2, h3, h4, h5, h6)";
 $_title: ":is(#{$_heading}, hgroup)";
-$_search: ":is(.search-bar, .searchbar)";
+$_search: ".search-bar";
 
 header:has(> #{$_bar}) {
   --md-comp-top-app-bar-container-color: var(--md-sys-color-surface);
@@ -63,8 +63,8 @@ header:has(> #{$_bar}) {
   // the headline; trailing is everything after it.
   --md-comp-top-app-bar-leading-icon-color: inherit;
   --md-comp-top-app-bar-trailing-icon-color: inherit;
-  --md-comp-top-app-bar-container-height: 64px;
-  --md-comp-top-app-bar-leading-icon-size: 24px;
+  --md-comp-top-app-bar-container-height: #{rem(64px)};
+  --md-comp-top-app-bar-leading-icon-size: #{rem(24px)};
   --md-comp-top-app-bar-container-shape: 0;
 
   background-color: color-mix(
@@ -87,6 +87,22 @@ header:has(> #{$_bar}) {
     margin: 0;
   }
 
+  // Destinations that do not fit beside the title move to a row of their
+  // own, rather than squeezing the title down to its first letter. On one
+  // row both stretch to the bar and the title stays centred, so the sizes
+  // below only show once the row wraps.
+  > #{$_bar}:has(> :is(menu, ul)) {
+    flex-wrap: wrap;
+
+    > #{$_title} {
+      padding-block: 8px;
+    }
+
+    > :is(menu, ul) {
+      min-height: rem(48px);
+    }
+  }
+
   > #{$_bar} > #{$_title} {
     flex: 1 1 auto;
     min-width: 0;
@@ -107,11 +123,7 @@ header:has(> #{$_bar}) {
   > #{$_bar} > hgroup > #{$_heading} {
     margin: 0;
     color: inherit;
-    font-family: var(--md-sys-typescale-title-large-font-family-name);
-    font-size: var(--md-sys-typescale-title-large-font-size);
-    font-weight: var(--md-sys-typescale-title-large-font-weight);
-    line-height: var(--md-sys-typescale-title-large-line-height);
-    letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+    @include typescale("title-large");
   }
 
   > #{$_bar} > hgroup {
@@ -126,11 +138,7 @@ header:has(> #{$_bar}) {
   > #{$_bar} > hgroup > p {
     margin: 0;
     color: inherit;
-    font-family: var(--md-sys-typescale-label-medium-font-family-name);
-    font-size: var(--md-sys-typescale-label-medium-font-size);
-    font-weight: var(--md-sys-typescale-label-medium-font-weight);
-    line-height: var(--md-sys-typescale-label-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
+    @include typescale("label-medium");
   }
 
   // Icon-only actions — 48dp target, 24dp glyph, 4dp from the container edge.
@@ -143,8 +151,8 @@ header:has(> #{$_bar}) {
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    width: 48px;
-    height: 48px;
+    width: rem(48px);
+    height: rem(48px);
     padding: 0;
     // Leave margin-inline-start unset so a medium/large bar can push
     // the first trailing action to the end with margin-inline-start: auto.
@@ -169,11 +177,11 @@ header:has(> #{$_bar}) {
     }
 
     &:hover {
-      background-color: color-mix(in oklab, currentColor 8%, transparent);
+      background-color: state-layer(currentColor, "hover");
     }
 
     &:active {
-      background-color: color-mix(in oklab, currentColor 10%, transparent);
+      background-color: state-layer(currentColor, "pressed");
     }
   }
 
@@ -244,10 +252,7 @@ header:has(> #{$_bar}) {
       background: transparent;
       box-shadow: none;
       color: inherit;
-      font-family: var(--md-sys-typescale-body-large-font-family-name);
-      font-size: var(--md-sys-typescale-body-large-font-size);
-      font-weight: var(--md-sys-typescale-body-large-font-weight);
-      line-height: var(--md-sys-typescale-body-large-line-height);
+      @include typescale("body-large");
 
       &:focus,
       &:focus-visible {
@@ -281,19 +286,16 @@ header:has(> #{$_bar}) {
   padding: 0 12px;
   color: inherit;
   text-decoration: none;
-  font-family: var(--md-sys-typescale-label-large-font-family-name);
-  font-size: var(--md-sys-typescale-label-large-font-size);
-  font-weight: var(--md-sys-typescale-label-large-font-weight);
-  line-height: var(--md-sys-typescale-label-large-line-height);
-  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+  @include typescale("label-large");
   @include focus-visible;
 
   &:hover:not(.active) {
-    background-color: color-mix(in oklab, currentColor 8%, transparent);
+    background-color: state-layer(currentColor, "hover");
   }
 
   &.active {
-    background-color: color-mix(in oklab, currentColor 10%, transparent);
+    background-color: state-layer(currentColor, "pressed");
+    @include forced-colors-selected;
   }
 }
 
@@ -339,7 +341,7 @@ header.large:has(> #{$_bar}) > #{$_bar} {
   &::before {
     content: "";
     flex: 0 0 0;
-    height: 48px;
+    height: rem(48px);
   }
 
   > #{$_title} {
@@ -369,7 +371,7 @@ header.large:has(> #{$_bar}) > #{$_bar} {
 }
 
 header.medium:has(> #{$_bar}) > #{$_bar} {
-  min-height: 112px;
+  min-height: rem(112px);
   padding-bottom: 20px;
 
   > #{$_title} {
@@ -378,28 +380,20 @@ header.medium:has(> #{$_bar}) > #{$_bar} {
 
   > #{$_heading},
   > hgroup > #{$_heading} {
-    font-family: var(--md-sys-typescale-headline-medium-font-family-name);
-    font-size: var(--md-sys-typescale-headline-medium-font-size);
-    font-weight: var(--md-sys-typescale-headline-medium-font-weight);
-    line-height: var(--md-sys-typescale-headline-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
+    @include typescale("headline-medium");
   }
 
   > hgroup > p {
-    font-family: var(--md-sys-typescale-label-large-font-family-name);
-    font-size: var(--md-sys-typescale-label-large-font-size);
-    font-weight: var(--md-sys-typescale-label-large-font-weight);
-    line-height: var(--md-sys-typescale-label-large-line-height);
-    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+    @include typescale("label-large");
   }
 }
 
 header.medium:has(> #{$_bar} > hgroup > p) > #{$_bar} {
-  min-height: 136px;
+  min-height: rem(136px);
 }
 
 header.large:has(> #{$_bar}) > #{$_bar} {
-  min-height: 120px;
+  min-height: rem(120px);
   padding-bottom: 20px;
 
   > #{$_title} {
@@ -408,24 +402,16 @@ header.large:has(> #{$_bar}) > #{$_bar} {
 
   > #{$_heading},
   > hgroup > #{$_heading} {
-    font-family: var(--md-sys-typescale-display-small-font-family-name);
-    font-size: var(--md-sys-typescale-display-small-font-size);
-    font-weight: var(--md-sys-typescale-display-small-font-weight);
-    line-height: var(--md-sys-typescale-display-small-line-height);
-    letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
+    @include typescale("display-small");
   }
 
   > hgroup > p {
-    font-family: var(--md-sys-typescale-title-medium-font-family-name);
-    font-size: var(--md-sys-typescale-title-medium-font-size);
-    font-weight: var(--md-sys-typescale-title-medium-font-weight);
-    line-height: var(--md-sys-typescale-title-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
+    @include typescale("title-medium");
   }
 }
 
 header.large:has(> #{$_bar} > hgroup > p) > #{$_bar} {
-  min-height: 152px;
+  min-height: rem(152px);
   padding-bottom: 28px;
 }
 
@@ -444,7 +430,7 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
   flex-wrap: nowrap;
   align-content: center;
   align-items: center;
-  min-height: 64px;
+  min-height: rem(64px);
   padding-top: 0;
   padding-bottom: 0;
 
@@ -473,20 +459,12 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-family: var(--md-sys-typescale-title-large-font-family-name);
-    font-size: var(--md-sys-typescale-title-large-font-size);
-    font-weight: var(--md-sys-typescale-title-large-font-weight);
-    line-height: var(--md-sys-typescale-title-large-line-height);
-    letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+    @include typescale("title-large");
   }
 
   > hgroup > p {
     padding: 0;
-    font-family: var(--md-sys-typescale-label-medium-font-family-name);
-    font-size: var(--md-sys-typescale-label-medium-font-size);
-    font-weight: var(--md-sys-typescale-label-medium-font-weight);
-    line-height: var(--md-sys-typescale-label-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
+    @include typescale("label-medium");
   }
 }
 
@@ -500,7 +478,7 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
 header:has(> #{$_bar}) {
   position: sticky;
   top: 0;
-  z-index: 997;
+  z-index: var(--expressive-z-app-bar);
 
   @supports (animation-timeline: scroll()) {
     animation: top-app-bar-scroll linear both;

package/src/sass/components/_navigation-bar.scss

@@ -2,7 +2,7 @@
 
 // Navigation bar. Destinations, not the app bar (header:has(> nav)).
 // Anatomy is the HTML: a nav.navigation-bar of <a> or <button> items.
-// A leading <i> is the icon; the remaining text is the label.
+// A leading icon is the icon; the remaining text is the label.
 // aria-current (or .active) is the selected destination.
 //
 // Two layouts (M3 Expressive):
@@ -32,7 +32,7 @@
   // 56 here, which is the rail's value copied onto the bar.
   --md-comp-nav-bar-indicator-width: 64px;
   --md-comp-nav-bar-indicator-height: 32px;
-  --md-comp-nav-bar-indicator-shape: 16px;
+  --md-comp-nav-bar-indicator-shape: var(--md-sys-shape-corner-large);
   --md-comp-nav-bar-active-indicator-color: var(--md-sys-color-secondary-container);
   --md-comp-nav-bar-active-color: var(--md-sys-color-on-secondary-container);
 
@@ -70,51 +70,12 @@
     @include typescale("label-medium");
     @include focus-visible;
 
-    > #{$icon} {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      width: var(--md-comp-nav-bar-indicator-width);
-      height: var(--md-comp-nav-bar-indicator-height);
-      border-radius: var(--md-comp-nav-bar-indicator-shape);
-      font-size: var(--md-comp-nav-bar-icon-size);
-      color: inherit;
-      transition: background-color 0.2s ease-out;
-    }
-
-    &:hover:not(.active, [aria-current]) > #{$icon} {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
-    }
-
-    &.active,
-    &[aria-current] {
-      color: var(--md-sys-color-on-surface);
-
-      > #{$icon} {
-        background-color: var(--md-comp-nav-bar-active-indicator-color);
-        color: var(--md-comp-nav-bar-active-color);
-        --md-icon-fill: 1;
-      }
-    }
-
-    &.disabled,
-    &[aria-disabled="true"] {
-      pointer-events: none;
-      color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-    }
-
     // Sibling badge. Child-of-icon is handled in _badges.scss.
-    > .badge {
-      position: absolute;
-      z-index: 1;
-      top: calc(4px + (var(--md-comp-nav-bar-indicator-height) - 24px) / 2);
-      inset-inline-start: calc(50% + 12px);
-      transform: translate(-50%, -50%);
-
-      &:dir(rtl) {
-        transform: translate(50%, -50%);
+    @include nav-destination("nav-bar", 4px, background-color var(--md-sys-motion-duration-short4) ease-out) {
+      &.disabled,
+      &[aria-disabled="true"] {
+        pointer-events: none;
+        color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
       }
     }
   }
@@ -131,40 +92,11 @@
       padding: 8px 16px;
       border-radius: var(--md-comp-nav-bar-indicator-shape);
 
-      > #{$icon} {
-        width: var(--md-comp-nav-bar-icon-size);
-        height: var(--md-comp-nav-bar-icon-size);
-        border-radius: 0;
-      }
+      @include nav-destination-row("nav-bar");
 
       > .badge {
         top: calc(50% - 12px);
-        left: auto;
         inset-inline-start: calc(16px + 24px);
-        transform: translate(-50%, -50%);
-
-        &:dir(rtl) {
-          transform: translate(50%, -50%);
-        }
-      }
-
-      &:hover:not(.active, [aria-current]) {
-        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
-
-        > #{$icon} {
-          background-color: transparent;
-        }
-      }
-
-      &.active,
-      &[aria-current] {
-        background-color: var(--md-comp-nav-bar-active-indicator-color);
-        color: var(--md-comp-nav-bar-active-color);
-
-        > #{$icon} {
-          background-color: transparent;
-          color: inherit;
-        }
       }
     }
   }
@@ -172,6 +104,12 @@
   &.fixed {
     position: sticky;
     bottom: 0;
-    z-index: 997;
+    z-index: var(--expressive-z-app-bar);
   }
 }
+
+// Navigation does nothing on paper. Important so a size or state rule that sets
+// `display` cannot bring it back; see base/_print.scss for the page itself.
+@media print {
+  .navigation-bar { display: none !important; }
+}