@expressivecss/expressive 0.7.0 → 0.9.0

package/src/sass/components/_navbar.scss

@@ -6,14 +6,24 @@
 // Headings are the headline, icon-only links/buttons are the leading and
 // trailing actions, <menu> / <ul> hold text destinations. Helpers are only
 // for variants the markup cannot express: .center, .medium, .large, .fixed.
+// `.medium` and `.large` are the Expressive flexible bars.
 // Destinations at the bottom of the screen are nav.navigation-bar, not this.
 //
-// Tokens follow the M3 top-app-bar spec
-// (https://m3.material.io/components/app-bars/specs):
-//   container      surface, 64dp small / 112 medium / 152 large
-//   headline       on-surface, title-large (small), headline-small/medium
-//   icons          on-surface-variant, 24dp in a 48dp target, 4dp inset
-//   on scroll      surface-container fill (not elevation) so the bar
+// Tokens follow the M3 Expressive app bar spec
+// (https://m3.material.io/components/app-bars/specs, Material Web v29.0.16):
+//   container      surface, 64dp small / 112 medium-flexible /
+//                  120 large-flexible (136 / 152 with a subtitle)
+//   headline       on-surface, title-large (small), headline-medium
+//                  (medium-flexible), display-small (large-flexible)
+//   subtitle       label-medium / label-large / title-medium in an <hgroup>
+//   icons          24dp in a 48dp target, 4dp inset. The spec mutes the
+//                  trailing ones (on-surface-variant) and leaves the leading
+//                  one on-surface; both inherit here instead, so a fill +
+//                  on-* pair on the header stays readable. The two tokens
+//                  below are the opt-in to the spec colors.
+//   medium/large   headline 16dp from the inline edges; wrap to two lines
+//   on scroll      surface-container fill (not elevation - the spec's
+//                  level2 elevation carries a transparent shadow) so the bar
 //                  separates from the body. A color utility on the
 //                  header still wins — it sets background-color itself.
 
@@ -29,12 +39,28 @@
   initial-value: 0;
 }
 
-header:has(> nav:not(.navigation-bar, .navigation-rail)) {
+// The bar itself. A top app bar that holds destinations is a <nav>; one that
+// holds only a title and controls - as the docs chrome does - is not
+// navigation and says so with `.bar`, rather than claiming a landmark and
+// then having nothing to put in it. Both look identical.
+// Wrapped in :is() so it stays ONE compound selector. A bare comma-separated
+// list breaks out of its context on interpolation: `header.medium > #{$_bar}`
+// expanded to `header.medium > nav:not(...), .bar`, which styled every .bar on
+// the page as an app bar. Same trap as $_icon in _icons-material-design.
+// :is() also keeps the specificity where nav:not(...) had it.
+$_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)";
+
+header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
   --md-comp-top-app-bar-container-color: var(--md-sys-color-surface);
   --md-comp-top-app-bar-scrolled-container-color: var(--md-sys-color-surface-container);
   --md-comp-top-app-bar-headline-color: var(--md-sys-color-on-surface);
-  // Inherit so a fill + on-* pair on the header recolors the icons.
-  // Set this to --md-sys-color-on-surface-variant for the spec mute.
+  // Inherit so a fill + on-* pair on the header recolors the icons. The spec
+  // splits them - leading on-surface, trailing on-surface-variant - and each
+  // token below is the opt-in for its own side. Leading is everything before
+  // 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;
@@ -51,7 +77,7 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
   border-radius: var(--md-comp-top-app-bar-container-shape);
   width: 100%;
 
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) {
+  > #{$_bar} {
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -61,7 +87,7 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
     margin: 0;
   }
 
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
+  > #{$_bar} > #{$_title} {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
@@ -75,6 +101,12 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
     text-overflow: ellipsis;
     white-space: nowrap;
     color: inherit;
+  }
+
+  > #{$_bar} > #{$_heading},
+  > #{$_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);
@@ -82,8 +114,31 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
     letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
   }
 
+  > #{$_bar} > hgroup {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0;
+    white-space: normal;
+    text-overflow: unset;
+  }
+
+  > #{$_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);
+  }
+
   // Icon-only actions — 48dp target, 24dp glyph, 4dp from the container edge.
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) {
+  // $icon, not `i`: the canonical icon is a <span class="material-symbols">, and
+  // keying on the element meant every bar written the documented way lost this
+  // rule — the leading action fell through to the generic button pill and the
+  // trailing ones were picked up by the text-destination rule below.
+  > #{$_bar} > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> #{$icon}:only-child) {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -105,7 +160,7 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
     text-decoration: none;
     @include focus-visible;
 
-    > i {
+    > #{$icon} {
       display: block;
       font-size: var(--md-comp-top-app-bar-leading-icon-size);
       width: var(--md-comp-top-app-bar-leading-icon-size);
@@ -122,12 +177,20 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
     }
   }
 
+  // Trailing actions are the ones that follow the headline - DOM order is the
+  // anatomy, here as everywhere else in this file. Without this the trailing
+  // token was declared and consumed by nothing, so the documented way to opt
+  // into the spec's muted trailing icons did nothing at all.
+  > #{$_bar} > :is(#{$_title}, #{$_search}) ~ :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> #{$icon}:only-child) {
+    color: var(--md-comp-top-app-bar-trailing-icon-color);
+  }
+
   // Text destinations, either loose or grouped in a menu/list.
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) > a:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb) {
+  > #{$_bar} > a:not(:has(> #{$icon}:only-child)):not(.button, .icon-button):not(.circle):not(.breadcrumb) {
     @extend %app-bar-destination;
   }
 
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) {
+  > #{$_bar} > :is(menu, ul) {
     display: flex;
     align-items: stretch;
     align-self: stretch;
@@ -151,7 +214,7 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
   // Breadcrumb trail. Layout only — colors stay on the breadcrumb tokens
   // (which this header remaps to inherit). Do not treat the crumbs as
   // destinations.
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) > ol {
+  > #{$_bar} > ol {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -163,7 +226,7 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
     padding-inline: 12px;
   }
 
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) > form {
+  > #{$_bar} > form {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
@@ -194,6 +257,22 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
       }
     }
   }
+
+  // Search app bar: the search component sits in the title slot. Icons
+  // beside it (siblings of the search) stay outside; icons inside it stay
+  // on the search-bar rules. Centered supporting text is the Expressive
+  // search-app-bar configuration.
+  > #{$_bar} > #{$_search} {
+    flex: 1 1 auto;
+    width: auto;
+    min-width: 0;
+    align-self: center;
+    margin-block: 4px;
+
+    input {
+      text-align: center;
+    }
+  }
 }
 
 %app-bar-destination {
@@ -219,12 +298,14 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
 }
 
 // Center-aligned small bar. The headline is taken out of flow so leading and
-// trailing actions can sit on the edges without shifting the title.
-header.center:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
+// trailing actions can sit on the edges without shifting the title. Medium
+// and large keep the title on the second row and center it there instead.
+header.center:not(.medium, .large):has(> #{$_bar}) > #{$_bar},
+header.center.collapsed:has(> #{$_bar}) > #{$_bar} {
   position: relative;
   justify-content: space-between;
 
-  > :is(h1, h2, h3, h4, h5, h6) {
+  > #{$_title} {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -241,53 +322,172 @@ header.center:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
 // so leading/trailing icons would otherwise pack together at the start.
 // `space-between` parks the icon row at the top and the title at the
 // bottom — that's what makes the 112/152 height readable.
-header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail),
-header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
+header.medium:has(> #{$_bar}) > #{$_bar},
+header.large:has(> #{$_bar}) > #{$_bar} {
   flex-wrap: wrap;
   align-content: space-between;
   align-items: flex-start;
   height: auto;
-  padding-top: 4px;
+  // 8dp so the 48dp icon targets are centred in the 64dp top row, the
+  // same row the bar collapses to.
+  padding-top: 8px;
+
+  // The top row is 64dp whether or not it holds icons. Without this
+  // zero-width spacer a title-only bar has a single flex line and
+  // `space-between` pins it to the *top*, so the headline sits where the
+  // icons belong instead of on the bottom row.
+  &::before {
+    content: "";
+    flex: 0 0 0;
+    height: 48px;
+  }
 
-  > :is(h1, h2, h3, h4, h5, h6) {
+  > #{$_title} {
     order: 1;
-    flex: 1 0 100%;
+    // Wider than the line, so it always breaks onto its own one - a basis of
+    // exactly 100% still fits beside the zero-width spacer above, which put
+    // the headline back on the icon row. It shrinks to fit once there.
+    flex: 1 1 calc(100% + 1px);
     white-space: normal;
-    overflow: visible;
+    overflow: hidden;
     text-overflow: unset;
   }
 
-  > :is(h1, h2, h3, h4, h5, h6) + * {
+  > #{$_heading},
+  > hgroup > #{$_heading} {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    white-space: normal;
+  }
+
+  > #{$_title} + * {
     margin-inline-start: auto;
   }
 }
 
-header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
+header.medium:has(> #{$_bar}) > #{$_bar} {
   min-height: 112px;
-  padding-bottom: 16px;
-
-  > :is(h1, h2, h3, h4, h5, h6) {
-    padding: 4px 12px 0 16px;
-    font-family: var(--md-sys-typescale-headline-small-font-family-name);
-    font-size: var(--md-sys-typescale-headline-small-font-size);
-    font-weight: var(--md-sys-typescale-headline-small-font-weight);
-    line-height: var(--md-sys-typescale-headline-small-line-height);
-    letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
-  }
-}
+  padding-bottom: 20px;
 
-header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
-  min-height: 152px;
-  padding-bottom: 28px;
+  > #{$_title} {
+    padding: 0 12px;
+  }
 
-  > :is(h1, h2, h3, h4, h5, h6) {
-    padding: 12px 12px 0 16px;
+  > #{$_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);
   }
+
+  > 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);
+  }
+}
+
+header.medium:has(> #{$_bar} > hgroup > p) > #{$_bar} {
+  min-height: 136px;
+}
+
+header.large:has(> #{$_bar}) > #{$_bar} {
+  min-height: 120px;
+  padding-bottom: 20px;
+
+  > #{$_title} {
+    padding: 0 12px;
+  }
+
+  > #{$_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);
+  }
+
+  > 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);
+  }
+}
+
+header.large:has(> #{$_bar} > hgroup > p) > #{$_bar} {
+  min-height: 152px;
+  padding-bottom: 28px;
+}
+
+header.center.medium:not(.collapsed):has(> #{$_bar}) > #{$_bar} > #{$_title},
+header.center.large:not(.collapsed):has(> #{$_bar}) > #{$_bar} > #{$_title} {
+  text-align: center;
+  align-items: center;
+}
+
+// Collapse the flexible bars into the small 64dp row. AppBar toggles
+// `.collapsed` when the page has scrolled; the class is also legal to set
+// by hand. The two-row layout, the spacer, and the expanded type roles
+// all have to go, or the 64dp height just clips the second row.
+header.medium.collapsed:has(> #{$_bar}) > #{$_bar},
+header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+  min-height: 64px;
+  padding-top: 0;
+  padding-bottom: 0;
+
+  &::before {
+    display: none;
+  }
+
+  > #{$_title} {
+    order: 0;
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  > #{$_title} + * {
+    margin-inline-start: 0;
+  }
+
+  > #{$_heading},
+  > hgroup > #{$_heading} {
+    display: block;
+    padding: 0;
+    -webkit-line-clamp: unset;
+    line-clamp: unset;
+    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);
+  }
+
+  > 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);
+  }
 }
 
 // Pin the bar. On scroll, fill with surface-container so it separates
@@ -295,7 +495,7 @@ header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
 // progress; a utility class on the header sets background-color itself
 // and is not overwritten. Without animation-timeline the bar stays at
 // rest (surface), the spec default.
-header.fixed:has(> nav:not(.navigation-bar, .navigation-rail)) {
+header.fixed:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
   position: sticky;
   top: 0;
   z-index: 997;

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

@@ -15,7 +15,7 @@
 //   --md-comp-nav-bar-container-color
 //   --md-comp-nav-bar-container-height          64px
 //   --md-comp-nav-bar-icon-size                 24px
-//   --md-comp-nav-bar-indicator-width           56px
+//   --md-comp-nav-bar-indicator-width           64px
 //   --md-comp-nav-bar-indicator-height          32px
 //   --md-comp-nav-bar-indicator-shape           16px / 100px horizontal
 //   --md-comp-nav-bar-active-indicator-color    secondary-container
@@ -27,7 +27,10 @@
   --md-comp-nav-bar-container-color: var(--md-sys-color-surface-container);
   --md-comp-nav-bar-container-height: 64px;
   --md-comp-nav-bar-icon-size: 24px;
-  --md-comp-nav-bar-indicator-width: 56px;
+  // 64dp, not the rail's 56dp: md.comp.navigation-bar.active-indicator.width
+  // is 64 while md.comp.navigation-rail.active-indicator.width is 56. Both were
+  // 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-active-indicator-color: var(--md-sys-color-secondary-container);
@@ -66,7 +69,7 @@
     @include typescale("label-medium");
     @include focus-visible;
 
-    > i {
+    > #{$icon} {
       display: flex;
       flex-shrink: 0;
       align-items: center;
@@ -80,15 +83,15 @@
       transition: background-color 0.2s ease-out;
     }
 
-    &:hover:not(.active, [aria-current]) > i {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+    &: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);
 
-      > i {
+      > #{$icon} {
         background-color: var(--md-comp-nav-bar-active-indicator-color);
         color: var(--md-comp-nav-bar-active-color);
         --md-icon-fill: 1;
@@ -106,8 +109,12 @@
       position: absolute;
       z-index: 1;
       top: calc(4px + (var(--md-comp-nav-bar-indicator-height) - 24px) / 2);
-      left: calc(50% + 12px);
+      inset-inline-start: calc(50% + 12px);
       transform: translate(-50%, -50%);
+
+      &:dir(rtl) {
+        transform: translate(50%, -50%);
+      }
     }
   }
 
@@ -123,7 +130,7 @@
       padding: 8px 16px;
       border-radius: var(--md-comp-nav-bar-indicator-shape);
 
-      > i {
+      > #{$icon} {
         width: var(--md-comp-nav-bar-icon-size);
         height: var(--md-comp-nav-bar-icon-size);
         border-radius: 0;
@@ -134,12 +141,16 @@
         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) 8%, transparent);
+        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
 
-        > i {
+        > #{$icon} {
           background-color: transparent;
         }
       }
@@ -149,7 +160,7 @@
         background-color: var(--md-comp-nav-bar-active-indicator-color);
         color: var(--md-comp-nav-bar-active-color);
 
-        > i {
+        > #{$icon} {
           background-color: transparent;
           color: inherit;
         }