@expressivecss/expressive 0.15.0 → 0.17.0

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;
@@ -97,9 +113,7 @@ header:has(> #{$_bar}) {
     &:first-child {
       padding-inline-start: 12px;
     }
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    @include ellipsis;
     color: inherit;
   }
 
@@ -135,8 +149,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.
@@ -154,18 +168,15 @@ header:has(> #{$_bar}) {
 
     > #{$icon} {
       display: block;
-      font-size: var(--md-comp-top-app-bar-leading-icon-size);
-      width: var(--md-comp-top-app-bar-leading-icon-size);
-      height: var(--md-comp-top-app-bar-leading-icon-size);
-      line-height: var(--md-comp-top-app-bar-leading-icon-size);
+      @include icon-size(var(--md-comp-top-app-bar-leading-icon-size));
     }
 
     &: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");
     }
   }
 
@@ -186,9 +197,7 @@ header:has(> #{$_bar}) {
     display: flex;
     align-items: stretch;
     align-self: stretch;
-    list-style: none;
-    margin: 0;
-    padding: 0;
+    @include list-reset;
 
     > li {
       display: flex;
@@ -226,6 +235,12 @@ header:has(> #{$_bar}) {
     min-width: 0;
     margin: 0;
 
+    // The input clears its own ring, so the form shows it, inset to stay
+    // inside the bar.
+    &:has(input:focus-visible) {
+      @include focus-ring(-3px);
+    }
+
     input {
       flex: 1 1 auto;
       min-width: 0;
@@ -236,10 +251,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 {
@@ -277,11 +289,12 @@ header:has(> #{$_bar}) {
   @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;
   }
 }
 
@@ -327,7 +340,7 @@ header.large:has(> #{$_bar}) > #{$_bar} {
   &::before {
     content: "";
     flex: 0 0 0;
-    height: 48px;
+    height: rem(48px);
   }
 
   > #{$_title} {
@@ -357,7 +370,7 @@ header.large:has(> #{$_bar}) > #{$_bar} {
 }
 
 header.medium:has(> #{$_bar}) > #{$_bar} {
-  min-height: 112px;
+  min-height: rem(112px);
   padding-bottom: 20px;
 
   > #{$_title} {
@@ -375,11 +388,11 @@ header.medium:has(> #{$_bar}) > #{$_bar} {
 }
 
 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} {
@@ -397,7 +410,7 @@ header.large:has(> #{$_bar}) > #{$_bar} {
 }
 
 header.large:has(> #{$_bar} > hgroup > p) > #{$_bar} {
-  min-height: 152px;
+  min-height: rem(152px);
   padding-bottom: 28px;
 }
 
@@ -416,7 +429,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;
 
@@ -427,9 +440,7 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
   > #{$_title} {
     order: 0;
     flex: 1 1 auto;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
   }
 
   > #{$_title} + * {
@@ -442,9 +453,7 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
     padding: 0;
     -webkit-line-clamp: unset;
     line-clamp: unset;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
     @include typescale("title-large");
   }
 
@@ -464,7 +473,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,9 @@
   &.fixed {
     position: sticky;
     bottom: 0;
-    z-index: 997;
+    z-index: var(--expressive-z-app-bar);
   }
 }
+
+// Navigation does nothing on paper.
+.navigation-bar { @include print-hidden; }