@expressivecss/expressive 0.9.1 → 0.10.0

package/src/sass/README.md

@@ -2,6 +2,7 @@
 
 ```
 expressive.scss     entry point - decides cascade order, nothing else
+custom.scss         optional entry - selected partials in the same layers
 abstracts/          variables, functions, mixins        (emits no CSS)
 tokens/             M3 design tokens as :root custom properties
 base/               normalize, element defaults, typography, grid
@@ -9,6 +10,13 @@ components/         one file per widget (+ components/forms/)
 utilities/          single-purpose helper classes
 ```
 
+`custom.scss` accepts `$components` and `$utilities` lists of partial names,
+in load order. `null` loads the complete group; `()` loads none. Tokens and base
+are always loaded, and the existing font configuration still applies. Its
+default output must equal `expressive.scss`. Use one entry per consumer sheet.
+Keep selections in the order of the existing indexes, with icons first, and
+include supporting partials. See the README's smaller-build recipes.
+
 ## Browser support
 
 The last 5 versions of Chrome and Firefox. No IE, no Edge Legacy. Declared in

package/src/sass/components/_badges.scss

@@ -79,9 +79,8 @@
   }
 }
 
-// Trailing count in a list or drawer row stays in flow.
+// Trailing count in a list or menu row stays in flow.
 .list .badge,
-:is(.sidenav, .navigation-drawer) .badge,
 menu .badge {
   position: static;
   transform: none;
@@ -90,7 +89,3 @@ menu .badge {
 .list .badge {
   margin-inline-start: auto;
 }
-
-:is(.sidenav, .navigation-drawer) summary .badge {
-  margin-inline-start: 14px;
-}

package/src/sass/components/_button-groups.scss

@@ -299,7 +299,11 @@ $_connected-corners: (
     --md-comp-button-group-pressed-inner-corner-corner-size: 4px;
     --md-comp-button-group-selected-inner-corner-corner-size: 50%;
 
-    width: 100%;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    width: max-content;
+    min-width: 100%;
 
     @each $name, $c in $_connected-corners {
       &.#{$name} {

package/src/sass/components/_buttons.scss

@@ -17,8 +17,8 @@
 //   the size ladder in abstracts, corner.full at every size
 //   state layer 8% hover / 10% focus+press
 //   FAB 56dp (extra/large icon-only), primary-container, 16dp corners
-//   FAB sizes 40dp small / 56dp default / 80dp medium / 96dp large,
-//     24 / 24 / 26 / 36dp icon, 12 / 16 / 20 / 28dp corners
+//   FAB sizes 56dp default / 80dp medium / 96dp large,
+//     24 / 26 / 36dp icon, 16 / 20 / 28dp corners
 
 // The size axis is `$button-sizes` in abstracts, and `button-size()` sets its
 // tokens. Both moved there when button groups grew a size ladder of their own:
@@ -152,17 +152,15 @@ $_btn: "button:not(#{$_not-btn}), a.button, label.button";
 
 // Extended FAB: an icon plus a label, on its own size and colour axes.
 //
-// Tokens (M3 md.comp.extended-fab.*, DSP 34.0.21). The sizeless case is the
-// base family; the three named sizes are `md.comp.extended-fab.{size}.*`:
+// Tokens (M3 md.comp.extended-fab.{size}.*, DSP 34.0.21):
 //
 //   size      height  shape  icon  lead  gap  trail  label
-//   (none)      56      16    24    16     8    20   label-large
 //   small       56      16    24    16     8    16   title-medium
 //   medium      80      20    28    26    12    26   title-large
 //   large       96      28    36    28    16    28   headline-small
 //
 // Leading and trailing space are equal at every named size, so the map states
-// one `space`; only the base family keeps M3's older 16/20 asymmetry.
+// one `space`.
 //
 // The colour axis is M3's three container roles, and it runs through two
 // tokens rather than a background per variant: the state layers mix the label
@@ -178,13 +176,7 @@ $_extend-sizes: (
   "large": (height: 96px, shape: 28px, icon: 36px, space: 28px, gap: 16px, label: "headline-small"),
 );
 
-:where(#{$_btn}).extend {
-  --md-comp-extended-fab-container-height: 56px;
-  --md-comp-extended-fab-container-shape: 16px;
-  --md-comp-extended-fab-icon-size: 24px;
-  --md-comp-extended-fab-leading-space: 16px;
-  --md-comp-extended-fab-icon-label-space: 8px;
-  --md-comp-extended-fab-trailing-space: 20px;
+:where(#{$_btn}):where(.small, .medium, .large).extend {
   --md-comp-extended-fab-container-color: var(--md-sys-color-primary-container);
   --md-comp-extended-fab-label-text-color: var(
     --md-sys-color-on-primary-container
@@ -195,7 +187,6 @@ $_extend-sizes: (
   padding-inline: var(--md-comp-extended-fab-leading-space)
     var(--md-comp-extended-fab-trailing-space);
   border-radius: var(--md-comp-extended-fab-container-shape);
-  font-size: var(--md-sys-typescale-label-large-font-size);
   color: var(--md-comp-extended-fab-label-text-color);
   background-color: var(--md-comp-extended-fab-container-color);
   @include z-depth("3");
@@ -255,15 +246,14 @@ $_extend-sizes: (
   }
 }
 
-// FAB. Icon-only .extra / .large is the 56dp regular FAB. Add .small for
-// the 40dp small FAB. The speed-dial host is .fab.
+// FAB. Icon-only .extra / .large is the 56dp regular FAB.
 //
 // Tokens (M3 md.comp.fab.*):
 //   --md-comp-fab-container-height  56dp
 //   --md-comp-fab-container-width   56dp
 //   --md-comp-fab-container-shape   16dp, corner.large - rounded, not a pill
 //   --md-comp-fab-icon-size         24dp
-// .small, .medium and .extra.large reset those four; nothing else varies
+// .medium and .extra.large reset those four; nothing else varies
 // by size.
 :where(#{$_btn}).extra.circle,
 :where(#{$_btn}).large.circle {
@@ -316,15 +306,8 @@ $_extend-sizes: (
     );
   }
 
-  // Small FAB: 40dp container, corner.medium, icon stays 24dp.
-  &.small {
-    --md-comp-fab-container-height: 40px;
-    --md-comp-fab-container-width: 40px;
-    --md-comp-fab-container-shape: 12px;
-  }
-
   // Medium FAB: 80dp container, 26dp icon. The corner continues the size
-  // ladder - 12dp small, 16dp default, 20dp here (corner.large-increased).
+  // ladder - 16dp default, 20dp here (corner.large-increased).
   &.medium {
     --md-comp-fab-container-height: 80px;
     --md-comp-fab-container-width: 80px;
@@ -363,265 +346,3 @@ $_extend-sizes: (
 :where(#{$_btn}).disabled {
   @include btn-disabled;
 }
-
-// The FAB host. M3 names this component "FAB"; `.fixed-action-btn` is the
-// Materialize name and stays as an alias. Interpolate inside :is() - a bare
-// comma list breaks out of its context (see $_bar in _navbar).
-$_fab: ":is(.fab, .fixed-action-btn)";
-
-// Speed dial. .active (and :hover when the pointer can hover) opens the
-// menu. Motion is CSS. .click-to-toggle is the markup switch for click
-// mode. `.fab` is the public class; .fixed-action-btn is the old alias.
-//
-// Tokens:
-//   --md-comp-fab-offset            16px from the corner
-//   --md-comp-fab-z                 997
-//   --md-comp-fab-menu-gap          16px
-//   --md-comp-fab-duration          200ms
-//   --md-comp-fab-stagger           40ms
-//   --md-comp-fab-easing            soft ease-in-out
-//   --md-comp-fab-travel            center-to-center step into the main disc
-//   --md-comp-fab-hidden-transform  toward / into the main button
-#{$_fab} {
-  --md-comp-fab-offset: 16px;
-  --md-comp-fab-z: 997;
-  --md-comp-fab-menu-gap: 16px;
-  --md-comp-fab-duration: 200ms;
-  --md-comp-fab-stagger: 40ms;
-  --md-comp-fab-easing: cubic-bezier(0.65, 0, 0.35, 1);
-  --md-comp-fab-travel: 64px;
-  --md-comp-fab-hidden-transform: scale(0)
-    translateY(calc(var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
-
-  position: fixed;
-  inset-inline-end: var(--md-comp-fab-offset);
-  bottom: var(--md-comp-fab-offset);
-  z-index: var(--md-comp-fab-z);
-  padding-top: var(--md-comp-fab-menu-gap);
-  margin: 0;
-  overflow: visible;
-
-  // Main disc stays above retracting actions so they slide under it.
-  > :is(a, button) {
-    position: relative;
-    z-index: 1;
-  }
-
-  :is(ul, menu) {
-    --n: 1;
-    position: absolute;
-    inset-inline: 0;
-    bottom: 64px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--md-comp-fab-menu-gap);
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    visibility: hidden;
-    overflow: visible;
-    transition: visibility 0s
-      calc(var(--md-comp-fab-duration) + var(--md-comp-fab-stagger) * (var(--n) - 1));
-
-    &:has(> :nth-child(2)) { --n: 2; }
-    &:has(> :nth-child(3)) { --n: 3; }
-    &:has(> :nth-child(4)) { --n: 4; }
-    &:has(> :nth-child(5)) { --n: 5; }
-    &:has(> :nth-child(6)) { --n: 6; }
-    &:has(> :nth-child(7)) { --n: 7; }
-    &:has(> :nth-child(8)) { --n: 8; }
-
-    li:nth-last-child(1) { --i: 0; }
-    li:nth-last-child(2) { --i: 1; }
-    li:nth-last-child(3) { --i: 2; }
-    li:nth-last-child(4) { --i: 3; }
-    li:nth-last-child(5) { --i: 4; }
-    li:nth-last-child(6) { --i: 5; }
-    li:nth-last-child(7) { --i: 6; }
-    li:nth-last-child(8) { --i: 7; }
-
-    > li > :is(a, button) {
-      opacity: 0;
-      transform: var(--md-comp-fab-hidden-transform);
-      transition:
-        opacity var(--md-comp-fab-duration) var(--md-comp-fab-easing),
-        transform var(--md-comp-fab-duration) var(--md-comp-fab-easing),
-        background-color .2s ease-out,
-        box-shadow .2s ease-out;
-      // Close: farthest first, so they funnel into the disc.
-      transition-delay: calc(
-        var(--md-comp-fab-stagger) * (var(--n) - 1 - var(--i, 0))
-      );
-    }
-  }
-
-  &.active :is(ul, menu) {
-    visibility: visible;
-    transition-delay: 0s;
-
-    > li > :is(a, button) {
-      opacity: 1;
-      transform: none;
-      transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));
-    }
-  }
-
-  // Closest-to-FAB is the first child when the menu is left, right, or
-  // down (row-reverse / row / column). Top uses nth-last-child above.
-  &.direction-left,
-  &.direction-right,
-  &.direction-bottom {
-    :is(ul, menu) {
-      li:nth-child(1) { --i: 0; }
-      li:nth-child(2) { --i: 1; }
-      li:nth-child(3) { --i: 2; }
-      li:nth-child(4) { --i: 3; }
-      li:nth-child(5) { --i: 4; }
-      li:nth-child(6) { --i: 5; }
-      li:nth-child(7) { --i: 6; }
-      li:nth-child(8) { --i: 7; }
-    }
-  }
-
-  &.direction-left,
-  &.direction-right {
-    padding: 0;
-
-    :is(ul, menu) {
-      inset: auto;
-      top: 50%;
-      translate: 0 -50%;
-      flex-direction: row;
-      width: max-content;
-      height: auto;
-    }
-  }
-
-  // Hidden offset is toward the main button, one step per index, so
-  // close sends every action into the disc.
-  &.direction-left {
-    --md-comp-fab-hidden-transform: scale(0)
-      translateX(calc(var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
-    padding-inline-start: var(--md-comp-fab-menu-gap);
-
-    :is(ul, menu) {
-      inset-inline-end: 64px;
-      flex-direction: row-reverse;
-    }
-  }
-
-  &.direction-right {
-    --md-comp-fab-hidden-transform: scale(0)
-      translateX(calc(-1 * var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
-    padding-inline-end: var(--md-comp-fab-menu-gap);
-
-    :is(ul, menu) {
-      inset-inline-start: 64px;
-    }
-  }
-
-  &.direction-bottom {
-    --md-comp-fab-hidden-transform: scale(0)
-      translateY(calc(-1 * var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
-    padding: 0 0 var(--md-comp-fab-menu-gap);
-
-    :is(ul, menu) {
-      inset: auto;
-      top: 64px;
-      bottom: auto;
-      inset-inline: 0;
-    }
-  }
-
-  &.toolbar {
-    padding: 0;
-    height: 56px;
-
-    :is(ul, menu) > li > :is(a, button) {
-      opacity: 1;
-      transform: none;
-      transition: opacity var(--md-comp-fab-duration);
-    }
-
-    &.active {
-      inset-inline: 0;
-      bottom: 0;
-      width: 100%;
-      height: 56px;
-
-      > :is(a, button) > #{$icon} {
-        opacity: 0;
-      }
-
-      :is(ul, menu) {
-        visibility: visible;
-        position: static;
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        height: 100%;
-        gap: 0;
-      }
-    }
-
-    :is(ul, menu) li {
-      flex: 1;
-      margin: 0;
-      height: 100%;
-
-      :is(a, button) {
-        display: grid;
-        place-items: center;
-        width: 100%;
-        height: 100%;
-        background: transparent;
-        box-shadow: none;
-        color: var(--md-sys-color-on-primary-container);
-
-        &:hover {
-          background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) state-opacity("hover"), transparent);
-        }
-
-        &:focus-visible {
-          background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) state-opacity("focus"), transparent);
-        }
-
-        &:active {
-          background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) state-opacity("pressed"), transparent);
-        }
-      }
-    }
-  }
-
-  .fab-backdrop {
-    position: absolute;
-    inset: 0 auto auto 0;
-    z-index: -1;
-    width: 56px;
-    height: 56px;
-    border-radius: 16px;
-    background-color: var(--md-sys-color-primary-container);
-    transform: scale(0);
-  }
-}
-
-@media (hover: hover) {
-  #{$_fab}:not(.click-to-toggle):hover :is(ul, menu) {
-    visibility: visible;
-    transition-delay: 0s;
-
-    > li > :is(a, button) {
-      opacity: 1;
-      transform: none;
-      transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  #{$_fab} {
-    --md-comp-fab-duration: 0s;
-    --md-comp-fab-stagger: 0s;
-  }
-}

package/src/sass/components/_chips.scss

@@ -13,13 +13,18 @@
   color: var(--md-sys-color-on-surface-variant);
   background-color: var(--md-sys-color-surface-container-low);
   display: inline-flex;
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  max-width: 100%;
+  min-width: 0;
   gap: 8px;
   margin: 0;
-  height: 32px;
+  min-height: 32px;
+  height: auto;
   padding-left: var(--padding);
   padding-right: var(--padding);
   font-size: var(--font-size);
+  line-height: 1.5;
   font-weight: 500;
   border-radius: 8px;
   align-items: center;
@@ -88,6 +93,7 @@
 }
 
 .chip > img {
+  flex-shrink: 0;
   margin: 0;
   width: 24px;
   height: 24px;
@@ -102,6 +108,7 @@
 
 // The delete affordance is a real <button>, so it needs the button reset too.
 .chip .close {
+  flex-shrink: 0;
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -119,6 +126,14 @@
   @include focus-visible();
 }
 
+.chip > button:not(.close) {
+  min-width: 0;
+  height: auto;
+  font: inherit;
+  white-space: inherit;
+  overflow-wrap: inherit;
+}
+
 .chip .close:hover {
   background-color: color-mix(in oklab, var(--md-sys-color-on-surface-variant) state-opacity("hover"), transparent);
 }

package/src/sass/components/_dialog.scss

@@ -36,6 +36,7 @@ dialog {
   background-color: var(--md-comp-basic-dialog-container-color);
   color: var(--md-sys-color-on-surface);
   outline: none;
+  overflow-wrap: anywhere;
   @include z-depth("3");
 
   &::backdrop {
@@ -140,6 +141,13 @@ dialog > :is(form, nav):last-child {
   padding: 0 24px 24px;
   border: 0;
   background: none;
+
+  > :is(button, a.button):not(.icon-button, .circle, .extend) {
+    max-width: 100%;
+    height: auto;
+    min-height: var(--md-comp-filled-button-container-height, 40px);
+    white-space: normal;
+  }
 }
 
 dialog:not(
@@ -149,10 +157,7 @@ dialog:not(
     .right,
     .right-sheet,
     .left,
-    .left-sheet,
-    .floating-sheet,
-    :is(.sidenav, .navigation-drawer),
-    :is(.sidenav-overlay, .navigation-drawer-overlay)
+    .left-sheet
   )
   > :is(form, nav):last-child
   > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button) {

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

@@ -4,13 +4,6 @@
 // into a close button while it is open. `.fab-menu` is the host; `.active`
 // and `aria-expanded` are the framework's, never the author's.
 //
-// It shares the FloatingActionButton class with the `.fab` speed dial next
-// door and nothing else. The two never collide: `$_fab` is
-// `:is(.fab, .fixed-action-btn)`, and a class selector matches whole class
-// names, so `.fab` does not reach `.fab-menu`. The one name that looks shared
-// is `--md-comp-fab-menu-gap`, which is the speed dial's own gap token and is
-// deliberately not one of the names below.
-//
 // Tokens (M3 md.comp.fab-menu.*, DSP 34.0.21):
 //
 //   close-button   56x56, icon 20dp, corner.full, elevation 3, 8dp above list
@@ -82,6 +75,8 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
     margin: 0;
     padding: 0;
     list-style: none;
+    width: max-content;
+    max-inline-size: calc(100vw - 2 * var(--md-comp-fab-menu-offset));
     visibility: hidden;
     transition: visibility 0s var(--md-comp-fab-menu-duration);
 
@@ -95,18 +90,25 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
     li:nth-last-child(5) { --i: 4; }
     li:nth-last-child(6) { --i: 5; }
 
+    > li {
+      max-inline-size: 100%;
+    }
+
     > li > :is(a, button) {
       display: inline-flex;
       align-items: center;
       gap: var(--md-comp-fab-menu-menu-item-icon-label-space);
-      height: var(--md-comp-fab-menu-menu-item-container-height);
+      min-height: var(--md-comp-fab-menu-menu-item-container-height);
+      max-inline-size: 100%;
       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;
       color: var(--md-comp-fab-menu-menu-item-label-text-color);
       background-color: var(--md-comp-fab-menu-menu-item-container-color);
-      white-space: nowrap;
+      white-space: normal;
+      overflow-wrap: anywhere;
+      text-align: start;
       text-decoration: none;
       cursor: pointer;
       appearance: none;

package/src/sass/components/_icon-buttons.scss

@@ -21,11 +21,6 @@
 // goes inside the existing `:not()` argument list, never chained after it, so
 // the host rule stays exactly as specific as it was.
 //
-// The navigation drawer is the deliberate exception. Its `$_row` geometry has
-// no opt-out for `.button` either: every row in a drawer is one shape, and
-// carving an icon button out of that is the drawer's decision to make, not
-// this component's.
-//
 // Anatomy is the HTML — one control, one icon, and the name on the control.
 // The icon is decoration (`aria-hidden`), so `aria-label` is the only name the
 // control has; `semantics.json` enforces both halves of that.

package/src/sass/components/_index.scss

@@ -28,7 +28,6 @@
 @forward "expanding-card";
 @forward "bottom-sheet";
 @forward "side-sheet";
-@forward "floating-sheet";
 @forward "chips";
 @forward "lightbox";
 @forward "docked-display";
@@ -36,7 +35,6 @@
 @forward "forms";
 @forward "table_of_contents";
 @forward "scrollspy";
-@forward "navigation-drawer";
 @forward "progress";
 @forward "carousel";
 @forward "datepicker";
@@ -47,8 +45,5 @@
 @forward "fab-menu";
 @forward "loading-indicator";
 @forward "search";
-@forward "segmented-buttons";
-@forward "banners";
 @forward "drag-handle";
-@forward "bottom-app-bar";
 @forward "scrim";

package/src/sass/components/_menu.scss

@@ -506,7 +506,7 @@ menu[id] {
 }
 
 // Nested menu. Optional, desktop-first. No second Menu instance —
-// a <menu> inside an <li> is a flyout. Hover / :focus-within on fine
+// a <menu> inside an <li> is a flyout. Hover on fine
 // pointers; .open is the tap / keyboard switch.
 menu[id] li > menu {
   @include menu-surface;
@@ -530,7 +530,7 @@ menu[id] li > menu {
 }
 
 @media (hover: hover) and (pointer: fine) {
-  menu[id] li:is(:hover, :focus-within) > menu {
+  menu[id] li:hover > menu {
     visibility: visible;
     opacity: 1;
     pointer-events: auto;

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

@@ -1,7 +1,7 @@
 @use "../abstracts" as *;
 
 // Navigation rail. Destinations on mid-size screens, not the bottom
-// navigation bar and not the sidenav drawer.
+// navigation bar.
 //
 // Anatomy is the HTML: a nav.navigation-rail. The first
 // button:not(.button) is the menu toggle. A .button child is the