@expressivecss/expressive 0.9.1 → 0.10.1

package/src/sass/components/_panes.scss

@@ -40,41 +40,36 @@
   --md-comp-pane-list-width: 360px;
   --md-comp-pane-supporting-width: 360px;
   --md-comp-pane-primary-min-width: 360px;
+  --md-comp-pane-margin: 16px;
+  --_pane-columns: 1fr;
+  --_pane-expanded-columns: var(--md-comp-pane-list-width) 1fr;
+  --_pane-wide-columns: var(--_pane-expanded-columns);
+  --_pane-display: none;
+  --_pane-divider: 0px;
 
   box-sizing: border-box;
   display: grid;
-  width: 100%;
+  width: calc(100% - (2 * var(--md-comp-pane-margin)));
   height: 100%;
   min-height: 0;
-  margin: 0;
+  margin: 0 var(--md-comp-pane-margin);
   padding: 0;
   container-type: inline-size;
   background-color: var(--md-comp-pane-container-color);
   color: var(--md-sys-color-on-surface);
 
-  // Default: single pane on Compact and Medium windows (< 840px).
-  grid-template-columns: 1fr;
+  grid-template-columns: var(--_pane-columns);
   gap: 0;
 
-  // M3 layout margins are the inline space between content and the window
-  // edges. Keep the full-height pane model and inset layouts below Large.
-  @include bp-down("medium") {
-    --md-comp-pane-margin: 16px;
-    width: calc(100% - (2 * var(--md-comp-pane-margin)));
-    margin-inline: var(--md-comp-pane-margin);
-  }
-
-  @include bp-between("medium", "expanded") {
+  @include bp-up("medium") {
     --md-comp-pane-margin: 24px;
-    width: calc(100% - (2 * var(--md-comp-pane-margin)));
-    margin-inline: var(--md-comp-pane-margin);
     gap: var(--md-comp-pane-gap);
   }
 
   // Panes in compact mode: list/primary visible by default, detail/supporting hidden
   // unless marked .active
   > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
-    display: none;
+    display: var(--_pane-display);
     min-width: 0;
     min-height: 0;
     overflow: hidden;
@@ -90,46 +85,40 @@
     }
   }
 
-  // Expanded Viewports: Dual-pane side-by-side (via container query or breakpoint)
   @include bp-up("expanded") {
-    grid-template-columns: var(--md-comp-pane-list-width) 1fr;
-    gap: 0;
+    --_pane-columns: var(--_pane-expanded-columns);
+    --_pane-display: flex;
+    --_pane-divider: 1px;
+  }
 
-    > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
-      display: flex !important;
-    }
+  @include bp-up("large") {
+    --_pane-columns: var(--_pane-wide-columns);
   }
 
-  @container (min-width: 840px) {
-    grid-template-columns: var(--md-comp-pane-list-width) 1fr;
+  @container (width < 600px) {
+    --md-comp-pane-margin: 16px;
     gap: 0;
-
-    > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
-      display: flex !important;
-    }
   }
 
-  // This follows both two-pane rules so their base gap cannot cancel the M3
-  // Expanded spacer when the viewport and container queries both match.
-  @include bp-between("expanded", "large") {
+  @container (width >= 600px) {
     --md-comp-pane-margin: 24px;
-    width: calc(100% - (2 * var(--md-comp-pane-margin)));
-    margin-inline: var(--md-comp-pane-margin);
     gap: var(--md-comp-pane-gap);
   }
 
-  @include bp-between("large", "extra-large") {
-    --md-comp-pane-margin: 24px;
-    width: calc(100% - (2 * var(--md-comp-pane-margin)));
-    margin-inline: var(--md-comp-pane-margin);
-    gap: var(--md-comp-pane-gap);
+  @container (width < 840px) {
+    --_pane-columns: 1fr;
+    --_pane-display: none;
+    --_pane-divider: 0px;
   }
 
-  @include bp-up("extra-large") {
-    --md-comp-pane-margin: 24px;
-    width: calc(100% - (2 * var(--md-comp-pane-margin)));
-    margin-inline: var(--md-comp-pane-margin);
-    gap: var(--md-comp-pane-gap);
+  @container (min-width: 840px) {
+    --_pane-columns: var(--_pane-expanded-columns);
+    --_pane-display: flex;
+    --_pane-divider: 1px;
+  }
+
+  @container (min-width: 1200px) {
+    --_pane-columns: var(--_pane-wide-columns);
   }
 }
 
@@ -140,49 +129,25 @@
 // 1. Supporting Pane Layout
 .supporting-pane-layout,
 .panes.supporting {
-  @include bp-up("expanded") {
-    grid-template-columns: 1fr var(--md-comp-pane-supporting-width);
-  }
-
-  @container (min-width: 840px) {
-    grid-template-columns: 1fr var(--md-comp-pane-supporting-width);
-  }
+  --_pane-expanded-columns: 1fr var(--md-comp-pane-supporting-width);
 
   // Leading supporting pane (.start / .left)
   &.start,
   &.left {
-    @include bp-up("expanded") {
-      grid-template-columns: var(--md-comp-pane-supporting-width) 1fr;
-    }
-
-    @container (min-width: 840px) {
-      grid-template-columns: var(--md-comp-pane-supporting-width) 1fr;
-    }
+    --_pane-expanded-columns: var(--md-comp-pane-supporting-width) 1fr;
   }
 }
 
 // 2. Equal / Proportional Pane Layout
 .panes.equal,
 .pane-layout.equal {
-  @include bp-up("expanded") {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  @container (min-width: 840px) {
-    grid-template-columns: 1fr 1fr;
-  }
+  --_pane-expanded-columns: 1fr 1fr;
 }
 
 // 3. Three-Pane Layout (List + Primary Focus + Supporting)
 .panes.three-pane,
 .pane-layout.three-pane {
-  @include bp-up("large") {
-    grid-template-columns: var(--md-comp-pane-list-width) 1fr var(--md-comp-pane-supporting-width);
-  }
-
-  @container (min-width: 1200px) {
-    grid-template-columns: var(--md-comp-pane-list-width) 1fr var(--md-comp-pane-supporting-width);
-  }
+  --_pane-wide-columns: var(--md-comp-pane-list-width) 1fr var(--md-comp-pane-supporting-width);
 }
 
 // ---------------------------------------------------------------------------
@@ -220,13 +185,7 @@
 // ---------------------------------------------------------------------------
 :is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.separated, .floating) {
   > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):not(:last-child) {
-    @include bp-up("expanded") {
-      border-inline-end: 1px solid var(--md-comp-pane-divider-color);
-    }
-
-    @container (min-width: 840px) {
-      border-inline-end: 1px solid var(--md-comp-pane-divider-color);
-    }
+    border-inline-end: var(--_pane-divider) solid var(--md-comp-pane-divider-color);
   }
 }
 
@@ -322,14 +281,27 @@
   }
 
   // Footer / Action Bar
+  > footer:not(:has(> nav:only-child)),
   > :is(footer, .pane-footer, nav:last-child) {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: 8px;
     flex: 0 0 auto;
     box-sizing: border-box;
     min-height: 56px;
+    margin: 0;
     padding: 8px 16px;
     border-block-start: 1px solid var(--md-comp-pane-divider-color);
+
+    > :is(button, a):not(.icon-button) {
+      min-width: 0;
+      max-width: 100%;
+      min-height: var(--md-comp-filled-button-container-height, 40px);
+      height: auto;
+      padding-block: 8px;
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
   }
 }

package/src/sass/components/_progress.scss

@@ -49,6 +49,10 @@
   -webkit-appearance: none;
 }
 
+.progress:not(.circular) {
+  writing-mode: horizontal-tb;
+}
+
 progress.progress {
   vertical-align: baseline;
 
@@ -75,7 +79,8 @@ progress.progress {
 
 .progress > .determinate {
   position: absolute;
-  inset: 0 auto 0 0;
+  inset-block: 0;
+  inset-inline: 0 auto;
   width: var(--md-comp-progress-value, 0%);
   background-color: var(--md-comp-progress-indicator);
   transition: width 0.3s linear;
@@ -89,7 +94,8 @@ progress.progress {
   &::after {
     content: "";
     position: absolute;
-    inset: 0 auto 0 0;
+    inset-block: 0;
+    inset-inline: 0 auto;
     width: var(--md-comp-progress-value, 0%);
     background-color: var(--md-comp-progress-indicator);
     transition: width 0.3s linear;
@@ -109,7 +115,8 @@ progress.progress:indeterminate {
   &::after {
     content: "";
     position: absolute;
-    inset: 0 auto 0 0;
+    inset-block: 0;
+    inset-inline: 0 auto;
     background-color: var(--md-comp-progress-indicator);
   }
 
@@ -124,15 +131,15 @@ progress.progress:indeterminate {
 }
 
 @keyframes preloader-indeterminate {
-  0%   { left: -35%; right: 100%; }
-  60%  { left: 100%; right: -90%; }
-  100% { left: 100%; right: -90%; }
+  0%   { inset-inline-start: -35%; inset-inline-end: 100%; }
+  60%  { inset-inline-start: 100%; inset-inline-end: -90%; }
+  100% { inset-inline-start: 100%; inset-inline-end: -90%; }
 }
 
 @keyframes preloader-indeterminate-short {
-  0%   { left: -200%; right: 100%; }
-  60%  { left: 107%;  right: -8%; }
-  100% { left: 107%;  right: -8%; }
+  0%   { inset-inline-start: -200%; inset-inline-end: 100%; }
+  60%  { inset-inline-start: 107%; inset-inline-end: -8%; }
+  100% { inset-inline-start: 107%; inset-inline-end: -8%; }
 }
 
 // ---------------------------------------------------------------------------
@@ -183,14 +190,67 @@ progress.progress:indeterminate {
   to { transform: rotate(1turn); }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .progress > .indeterminate,
-  progress.progress:indeterminate,
-  .progress:not(:is(progress)):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"]),
+@media (forced-colors: active) {
+  .progress,
   .preloader {
+    forced-color-adjust: none;
+  }
+
+  .progress:not(.circular) {
+    background-color: Canvas;
+    outline: 1px solid CanvasText;
+    outline-offset: 1px;
+  }
+
+  .progress > .determinate,
+  .progress > .indeterminate::before,
+  .progress > .indeterminate::after,
+  .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate))::after,
+  progress.progress:indeterminate::before,
+  progress.progress:indeterminate::after {
+    background-color: CanvasText;
+  }
+
+  progress.progress::-webkit-progress-bar { background-color: Canvas; }
+  progress.progress::-webkit-progress-value { background-color: CanvasText; }
+  progress.progress::-moz-progress-bar { background-color: CanvasText; }
+  progress.progress:indeterminate::-webkit-progress-value { background-color: transparent; }
+  progress.progress:indeterminate::-moz-progress-bar {
+    background-color: CanvasText;
+    width: 40%;
+  }
+
+  :is(.preloader, .progress.circular) {
+    background: conic-gradient(CanvasText 0 90deg, transparent 90deg 360deg);
+
+    &.determinate {
+      background: conic-gradient(
+        CanvasText 0 var(--md-comp-progress-value, 0%),
+        GrayText var(--md-comp-progress-value, 0%)
+      );
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress > .indeterminate::before,
+  .progress > .indeterminate::after,
+  .progress::after,
+  progress.progress:indeterminate::before,
+  progress.progress:indeterminate::after,
+  .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after,
+  :is(.preloader, .progress.circular) {
     animation: none;
   }
 
+  .progress > .indeterminate::before,
+  .progress > .indeterminate::after,
+  progress.progress:indeterminate::before,
+  progress.progress:indeterminate::after,
+  .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after {
+    width: 40%;
+  }
+
   .preloader {
     transform: none;
   }

package/src/sass/components/_scrim.scss

@@ -3,17 +3,17 @@
 // Scrim (M3 Expressive). A foundation, not a component: there is no markup an
 // author writes to get one. It is the wash a modal surface puts behind itself
 // to dim what it covers, and this is the one place its value is decided -
-// dialogs, both sheets, the navigation drawer and the modal navigation rail
+// dialogs, both sheets, and the modal navigation rail
 // all consume the same custom property - the sheets through the
 // `dialog::backdrop` rule they already share, so they declare nothing.
 //
 // https://m3.material.io/styles/color/roles - the `scrim` role, at 32%.
 //
 // Blur is deliberately not part of it. Only the basic dialog frosts what is
-// behind it (`--md-comp-basic-dialog-scrim-blur`); the drawer and the rail
-// slide over the page and would smear it.
+// behind it (`--md-comp-basic-dialog-scrim-blur`); the rail slides over the
+// page and would smear it.
 //
-// Declared on :root rather than per surface because four of the five consumers
+// Declared on :root rather than per surface because the modal consumers
 // paint into `::backdrop`, which has no box of its own to hang a token on -
 // only the rail uses a `::before`. `::backdrop` inherits from the element it
 // belongs to, so setting this on one `<dialog>` still dims only that one.

package/src/sass/components/_side-sheet.scss

@@ -59,8 +59,9 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
   }
 
   &:modal {
-    border-radius: var(--md-comp-side-sheet-container-shape) 0 0
-      var(--md-comp-side-sheet-container-shape);
+    border-radius: 0;
+    border-start-start-radius: var(--md-comp-side-sheet-container-shape);
+    border-end-start-radius: var(--md-comp-side-sheet-container-shape);
     @include z-depth("1");
   }
 
@@ -82,8 +83,10 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
     }
 
     &:modal {
-      border-radius: 0 var(--md-comp-side-sheet-container-shape)
-        var(--md-comp-side-sheet-container-shape) 0;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: var(--md-comp-side-sheet-container-shape);
+      border-end-end-radius: var(--md-comp-side-sheet-container-shape);
     }
   }
 
@@ -95,7 +98,8 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
     box-sizing: border-box;
     min-height: 64px;
     margin: 0;
-    padding: 8px 12px 8px 24px;
+    padding-block: 8px;
+    padding-inline: 24px 12px;
     background: none;
     box-shadow: none;
   }
@@ -155,6 +159,7 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
   }
 
   > :is(form, nav):last-child {
+    flex-wrap: wrap;
     justify-content: flex-start;
     gap: 8px;
     padding: 16px 24px;
@@ -174,15 +179,20 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
 }
 
 @starting-style {
-  dialog.side-sheet[open],
-  dialog.right[open],
-  dialog.right-sheet[open] {
+  :is(#{$_sheet})[open] {
     translate: 100% 0;
-  }
 
-  dialog.left[open],
-  dialog.left-sheet[open] {
-    translate: -100% 0;
+    &:dir(rtl) {
+      translate: -100% 0;
+    }
+
+    &:is(.start, .left, .left-sheet) {
+      translate: -100% 0;
+
+      &:dir(rtl) {
+        translate: 100% 0;
+      }
+    }
   }
 }
 

package/src/sass/components/_toolbar.scss

@@ -47,9 +47,6 @@
 //
 // Do not show a toolbar at the same time as nav.navigation-bar.
 //
-// #{$_toolbar} only - do not style every <nav>. div.fixed-action-btn.toolbar
-// is the FAB-to-toolbar transition, not this component.
-
 // The host. A toolbar holds commands, not destinations, so it is not a <nav>
 // (rule 4) - and not role="toolbar" either, because that is a composite role
 // promising arrow-key navigation nothing here implements (rule 2). The <nav>
@@ -58,7 +55,7 @@
 // Wrapped in :is() so it stays one compound selector: interpolating a bare
 // comma-separated list breaks out of its context. That mistake shipped once
 // already, in $_bar.
-$_toolbar: ":is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab))";
+$_toolbar: ".toolbar";
 
 // The two axes. `.max` is BeerCSS's name for docked; `.filled` is the older
 // name for vibrant. Both stay in the :is() lists.

package/src/sass/components/_tooltip.scss

@@ -37,8 +37,9 @@
   color: var(--md-comp-plain-tooltip-supporting-text-color);
   @include typescale("body-small");
   text-align: center;
-  white-space: nowrap;
-  pointer-events: none;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  pointer-events: auto;
   z-index: 2000;
 }
 
@@ -159,3 +160,20 @@ body > .tooltip {
     box-shadow: none;
   }
 }
+
+.tooltip::before {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--md-comp-tooltip-anchor-gap));
+  z-index: -1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :not(body) > .tooltip {
+    transition: none;
+  }
+}
+
+.tooltip-content {
+  min-width: 0;
+}

package/src/sass/components/forms/_input-fields.scss

@@ -45,7 +45,7 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
 // .suffix to four of five is exactly the bug this variable prevents: the
 // leading icon inherited the label's position and sat at 16px with
 // pointer-events: none.
-$_not-label: ".supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix";
+$_not-label: ".supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip";
 
 .field {
   --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-container-highest);
@@ -295,6 +295,10 @@ textarea {
   }
 }
 
+.autocomplete-status {
+  @include visually-hidden;
+}
+
 .autocomplete-content {
   li {
     .highlight { color: var(--md-sys-color-on-surface); }

package/src/sass/components/forms/_select.scss

@@ -150,6 +150,7 @@ select.browser-default {
     overflow-wrap: anywhere;
     pointer-events: auto;
     @include typescale("body-small");
+    line-height: normal;
   }
 
   &:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix, > .prefix) > label {