@expressivecss/expressive 0.14.1 → 0.16.0

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;
@@ -46,6 +46,37 @@ dialog {
   }
 }
 
+// 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 +96,10 @@ 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;
+  font-size: rem(24px);
+  width: rem(24px);
+  height: rem(24px);
+  line-height: rem(24px);
   color: var(--md-sys-color-secondary);
 }
 
@@ -144,15 +175,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;
@@ -208,7 +231,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,35 +246,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);
-    }
-
-    &:focus-visible {
-      outline: 3px solid var(--md-sys-color-secondary);
-      outline-offset: 2px;
-    }
+    @include header-icon-action;
   }
 
   // Confirming action in the header is a text button, not an icon.
@@ -260,7 +258,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 {

package/src/sass/components/_fab-menu.scss

@@ -37,9 +37,15 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
   );
   --md-comp-fab-menu-offset: 16px;
   --md-comp-fab-menu-z: 997;
-  --md-comp-fab-menu-duration: 200ms;
+  // Items move on the fast spatial spring and fade on the fast effects
+  // spring, so motion="expressive" gives them a small bounce while the fade
+  // never overshoots. The spatial duration is the longer of the two, so it
+  // also times the list's visibility on close.
+  --md-comp-fab-menu-duration: var(--md-sys-motion-spring-fast-spatial-duration);
   --md-comp-fab-menu-stagger: 40ms;
-  --md-comp-fab-menu-easing: cubic-bezier(0.65, 0, 0.35, 1);
+  --md-comp-fab-menu-easing: var(--md-sys-motion-spring-fast-spatial);
+  --md-comp-fab-menu-effects-duration: var(--md-sys-motion-spring-fast-effects-duration);
+  --md-comp-fab-menu-effects-easing: var(--md-sys-motion-spring-fast-effects);
 
   position: fixed;
   inset-inline-end: var(--md-comp-fab-menu-offset);
@@ -103,7 +109,7 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
       padding-inline: var(--md-comp-fab-menu-menu-item-leading-space)
         var(--md-comp-fab-menu-menu-item-trailing-space);
       border: none;
-      border-radius: 9999px;
+      border-radius: var(--md-sys-shape-corner-full);
       color: var(--md-comp-fab-menu-menu-item-label-text-color);
       background-color: var(--md-comp-fab-menu-menu-item-container-color);
       white-space: normal;
@@ -113,12 +119,12 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
       cursor: pointer;
       appearance: none;
       opacity: 0;
-      transform: scale(.8) translateY(1rem);
+      transform: scale(0.8) translateY(1rem);
       transition:
-        opacity var(--md-comp-fab-menu-duration) var(--md-comp-fab-menu-easing),
+        opacity var(--md-comp-fab-menu-effects-duration) var(--md-comp-fab-menu-effects-easing),
         transform var(--md-comp-fab-menu-duration) var(--md-comp-fab-menu-easing),
-        background-color .2s ease-out,
-        box-shadow .2s ease-out;
+        background-color var(--md-sys-motion-duration-short4) ease-out,
+        box-shadow var(--md-sys-motion-duration-short4) ease-out;
       @include typescale("title-medium");
       @include focus-visible;
 
@@ -130,24 +136,31 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
         color: inherit;
       }
 
-      // Enabled is elevation 0; only the states lift.
-      &:hover {
+      // The shared disabled rule in _buttons.scss is (0,1,0) and loses to this
+      // block, so a disabled item paints itself. aria-disabled is included:
+      // with the menu's own state arms skipped, the generic button focus tint
+      // would otherwise show through on a focused aria-disabled item.
+      &#{$expressive-disabled} {
+        @include btn-disabled;
+      }
+
+      // aria-disabled keeps pointer events, so a tooltip or title explaining
+      // why the item is unavailable still shows on hover. Activation is
+      // already ignored by the FAB script.
+      &[aria-disabled="true"] {
+        pointer-events: auto;
+      }
+
+      // Enabled is elevation 0; only the states lift, and only when enabled.
+      &:hover:not(:where(#{$expressive-disabled})) {
         @include z-depth("4");
-        background-color: color-mix(
-          in oklab,
-          var(--md-comp-fab-menu-menu-item-label-text-color) state-opacity("hover"),
-          var(--md-comp-fab-menu-menu-item-container-color)
-        );
+        background-color: state-layer(var(--md-comp-fab-menu-menu-item-label-text-color), "hover", var(--md-comp-fab-menu-menu-item-container-color));
       }
 
-      &:active,
-      &:focus {
+      &:active:not(:where(#{$expressive-disabled})),
+      &:focus:not(:where(#{$expressive-disabled})) {
         @include z-depth("3");
-        background-color: color-mix(
-          in oklab,
-          var(--md-comp-fab-menu-menu-item-label-text-color) state-opacity("focus"),
-          var(--md-comp-fab-menu-menu-item-container-color)
-        );
+        background-color: state-layer(var(--md-comp-fab-menu-menu-item-label-text-color), "focus", var(--md-comp-fab-menu-menu-item-container-color));
       }
     }
   }
@@ -174,7 +187,7 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
     --md-comp-fab-container-width: var(
       --md-comp-fab-menu-close-button-container-width
     );
-    --md-comp-fab-container-shape: 9999px;
+    --md-comp-fab-container-shape: var(--md-sys-shape-corner-full);
     --md-comp-fab-icon-size: var(--md-comp-fab-menu-close-button-icon-size);
 
     color: var(--md-comp-fab-menu-close-button-icon-color);
@@ -189,20 +202,12 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
     }
 
     &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-fab-menu-close-button-icon-color) state-opacity("hover"),
-        var(--md-comp-fab-menu-close-button-container-color)
-      );
+      background-color: state-layer(var(--md-comp-fab-menu-close-button-icon-color), "hover", var(--md-comp-fab-menu-close-button-container-color));
     }
 
     &:active,
     &:focus {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-fab-menu-close-button-icon-color) state-opacity("focus"),
-        var(--md-comp-fab-menu-close-button-container-color)
-      );
+      background-color: state-layer(var(--md-comp-fab-menu-close-button-icon-color), "focus", var(--md-comp-fab-menu-close-button-container-color));
     }
   }
 
@@ -229,6 +234,13 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
 @media (prefers-reduced-motion: reduce) {
   .fab-menu {
     --md-comp-fab-menu-duration: 0s;
+    --md-comp-fab-menu-effects-duration: 0s;
     --md-comp-fab-menu-stagger: 0s;
   }
 }
+
+// A floating menu would print over the content. Important so a size or state rule that sets
+// `display` cannot bring it back; see base/_print.scss for the page itself.
+@media print {
+  .fab-menu { display: none !important; }
+}

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

@@ -0,0 +1,124 @@
+@use "../abstracts" as *;
+
+// Funnel chart. A <figure class="funnel-chart"> holds a <figcaption> and a
+// <table> of data: the first column labels each row, and the second holds
+// each stage's value. Without JavaScript the table shows. FunnelChart draws
+// each row as a stage, top to bottom in table order, as wide as its value
+// against the largest one and centered, with the row's label at the inline
+// start. It hides the table visually, so a screen reader still reads the
+// data as a table. The plot and tooltip come from chart(). The plot is as
+// tall as its rows, so --md-comp-funnel-chart-height does not apply; set
+// the row height instead.
+//
+// Each stage's span carries --width, its width as a percentage of the plot.
+//
+// Tokens:
+//   --md-comp-funnel-chart-row-height    40px
+//   --md-comp-funnel-chart-stage-height  60% of each row's height
+//   --md-comp-funnel-chart-shape         4px, the stage's corner radius
+//   --md-comp-funnel-chart-color-1       primary, every stage's color
+
+@include chart("funnel-chart");
+
+.funnel-chart {
+  --md-comp-funnel-chart-row-height: #{rem(40px)};
+  --md-comp-funnel-chart-stage-height: 60%;
+  --md-comp-funnel-chart-shape: var(--md-sys-shape-corner-extra-small);
+
+  // Labels beside the plot, up to 40% of the width; everything else spans
+  // both columns. Dense flow puts the labels in the plot's row.
+  display: grid;
+  grid-template-columns: fit-content(40%) minmax(0, 1fr);
+  grid-auto-flow: row dense;
+  align-content: start;
+  column-gap: 12px;
+
+  > * {
+    grid-column: 1 / -1;
+  }
+
+  > .funnel-chart-plot {
+    grid-column: 2;
+  }
+
+  > .funnel-chart-labels {
+    grid-column: 1;
+  }
+}
+
+.funnel-chart-plot {
+  isolation: isolate;
+  height: calc(var(--rows, 1) * var(--md-comp-funnel-chart-row-height));
+  border-block-end: 0;
+  background: none;
+}
+
+.funnel-chart-labels {
+  grid-auto-rows: minmax(0, 1fr);
+  grid-auto-flow: row;
+  align-items: center;
+  text-align: end;
+}
+
+.funnel-chart-stages {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-auto-rows: minmax(0, 1fr);
+
+  > div {
+    display: flex;
+    align-items: center;
+  }
+
+  > div > span {
+    width: calc(var(--width, 0) * 1%);
+    height: var(--md-comp-funnel-chart-stage-height);
+    margin-inline: auto;
+    border-radius: var(--md-comp-funnel-chart-shape);
+    background-color: var(--funnel-chart-color);
+  }
+
+  // Each stage grows from nothing, or after update() from its old width,
+  // which FunnelChart writes as --from-width.
+  @media (prefers-reduced-motion: no-preference) {
+    > div > span {
+      transition: width var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
+
+      @starting-style {
+        width: calc(var(--from-width, 0) * 1%);
+      }
+    }
+  }
+}
+
+// A band behind the highlighted row's stage.
+.funnel-chart-cursor {
+  z-index: -1;
+  inset-block: auto;
+  inset-inline: 0;
+  height: calc(100% / var(--rows, 1));
+  border-radius: var(--md-comp-funnel-chart-shape);
+  background-color: state-layer(var(--md-sys-color-on-surface), "hover");
+  translate: 0 -50%;
+}
+
+// Below the highlighted row, or above it in the lower half.
+.funnel-chart-tooltip {
+  left: 50%;
+  translate: -50% calc(var(--md-comp-funnel-chart-row-height) / 2);
+
+  &.end {
+    translate: -50% calc(-100% - var(--md-comp-funnel-chart-row-height) / 2);
+  }
+}
+
+@media (forced-colors: active) {
+  .funnel-chart-stages > div > span {
+    forced-color-adjust: none;
+  }
+
+  .funnel-chart-cursor {
+    outline: 1px solid CanvasText;
+  }
+}