@expressivecss/expressive 0.3.0 → 0.5.0

package/src/sass/components/_menu.scss

@@ -0,0 +1,341 @@
+@use "../abstracts" as *;
+
+// Vertical menus (M3 Expressive).
+//
+// Anatomy is the HTML. A <menu id> is the surface; each <li> is an item.
+// A leading <i> is the leading icon; a trailing <i> or <kbd> is trailing
+// content. An <hr> is a divider. A .gap <li> splits groups. A .label
+// <li> is a 32dp group heading. A nested <menu> is a flyout. The trigger
+// is .menu-trigger[data-target] — that is the JS contract.
+//
+// Tokens follow https://m3.material.io/components/menus/specs
+//   container    surface-container, 16dp corners, elevation 2, 112–280
+//   padding      4dp
+//   item         48dp, extra-small (4dp) corners, label-large / on-surface
+//   selected     medium (12dp) corners, tertiary-container / on-tertiary
+//   icon         20dp, on-surface-variant
+//   divider      1dp outline-variant, inset (not full-bleed)
+//   gap          6dp, more expressive than a divider
+//   label        32dp, on-surface-variant
+//   vibrant      tertiary-container surface; selected is tertiary
+//   submenu      scale + fade; focused flyout rounds up, parent rounds down
+
+$_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E");
+
+[popover] {
+  outline: none;
+  padding: 0;
+  border: none;
+}
+
+@mixin menu-surface {
+  --md-comp-menu-container-color: var(--md-sys-color-surface-container);
+  --md-comp-menu-container-shape: 16px;
+  --md-comp-menu-item-container-height: 48px;
+  --md-comp-menu-item-container-shape: 4px;
+  --md-comp-menu-item-selected-container-shape: 12px;
+  --md-comp-menu-item-label-text-color: var(--md-sys-color-on-surface);
+  --md-comp-menu-item-leading-icon-color: var(--md-sys-color-on-surface-variant);
+  --md-comp-menu-item-trailing-icon-color: var(--md-sys-color-on-surface-variant);
+  --md-comp-menu-item-selected-container-color: var(--md-sys-color-tertiary-container);
+  --md-comp-menu-item-selected-label-text-color: var(--md-sys-color-on-tertiary-container);
+  --md-comp-menu-item-selected-leading-icon-color: var(--md-sys-color-on-tertiary-container);
+  --md-comp-menu-item-icon-size: 20px;
+  --md-comp-menu-supporting-text-color: var(--md-sys-color-on-surface-variant);
+
+  box-sizing: border-box;
+  min-width: 112px;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  background-color: var(--md-comp-menu-container-color);
+  border-radius: var(--md-comp-menu-container-shape);
+  color: var(--md-comp-menu-item-label-text-color);
+  @include z-depth("2");
+  transition: border-radius 200ms ease;
+
+  &.vibrant {
+    --md-comp-menu-container-color: var(--md-sys-color-tertiary-container);
+    --md-comp-menu-item-label-text-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-leading-icon-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-trailing-icon-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-supporting-text-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-selected-container-color: var(--md-sys-color-tertiary);
+    --md-comp-menu-item-selected-label-text-color: var(--md-sys-color-on-tertiary);
+    --md-comp-menu-item-selected-leading-icon-color: var(--md-sys-color-on-tertiary);
+  }
+
+  > li {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    cursor: pointer;
+    text-align: left;
+    border-radius: var(--md-comp-menu-item-container-shape);
+
+    > a,
+    > button,
+    > span {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      box-sizing: border-box;
+      width: 100%;
+      min-height: var(--md-comp-menu-item-container-height);
+      margin: 0;
+      padding: 0 8px;
+      border: 0;
+      background: none;
+      color: var(--md-comp-menu-item-label-text-color);
+      text-decoration: none;
+      cursor: pointer;
+
+      &:hover,
+      &:focus {
+        background: none;
+      }
+      @include typescale("label-large");
+      font-family: $font-stack;
+    }
+
+    > a > i,
+    > button > i,
+    > i {
+      flex: 0 0 var(--md-comp-menu-item-icon-size);
+      font-size: var(--md-comp-menu-item-icon-size);
+      width: var(--md-comp-menu-item-icon-size);
+      height: var(--md-comp-menu-item-icon-size);
+      line-height: var(--md-comp-menu-item-icon-size);
+      color: var(--md-comp-menu-item-leading-icon-color);
+    }
+
+    > :is(a, button) > i:last-child:not(:only-child) {
+      margin-inline-start: auto;
+      color: var(--md-comp-menu-item-trailing-icon-color);
+    }
+
+    > :is(a, button) > :is(kbd, .shortcut) {
+      margin-inline-start: auto;
+      padding: 0;
+      border: 0;
+      background: none;
+      color: var(--md-comp-menu-supporting-text-color);
+      font-family: inherit;
+      @include typescale("label-large");
+    }
+  }
+
+  > li:not(.disabled, .divider, .optgroup, .gap, .label) {
+    min-height: var(--md-comp-menu-item-container-height);
+  }
+
+  // Hover / press sit on extra-small corners and do not span the container.
+  > li:not(.disabled, .divider, .optgroup, .gap, .label):hover,
+  > li.active:not(.selected, [aria-selected="true"]) {
+    background-color: color-mix(
+      in oklab,
+      var(--md-comp-menu-item-label-text-color) 8%,
+      transparent
+    );
+  }
+
+  > li:not(.disabled, .divider, .optgroup, .gap, .label):active {
+    background-color: color-mix(
+      in oklab,
+      var(--md-comp-menu-item-label-text-color) 10%,
+      transparent
+    );
+  }
+
+  > li.selected,
+  > li[aria-selected="true"] {
+    border-radius: var(--md-comp-menu-item-selected-container-shape);
+    background-color: var(--md-comp-menu-item-selected-container-color);
+    color: var(--md-comp-menu-item-selected-label-text-color);
+
+    > :is(a, button, span) {
+      color: var(--md-comp-menu-item-selected-label-text-color);
+    }
+
+    > :is(a, button, span) > i,
+    > i {
+      color: var(--md-comp-menu-item-selected-leading-icon-color);
+    }
+  }
+
+  > li.selected:hover,
+  > li[aria-selected="true"]:hover {
+    background-color: color-mix(
+      in oklab,
+      var(--md-comp-menu-item-selected-label-text-color) 8%,
+      var(--md-comp-menu-item-selected-container-color)
+    );
+  }
+
+  > li:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: -3px;
+  }
+
+  > li.disabled {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  // Inset divider — selection and rules do not span the container.
+  > hr,
+  > li.divider {
+    display: block;
+    width: calc(100% - 8px);
+    height: 1px;
+    min-height: 0;
+    margin: 4px auto;
+    padding: 0;
+    border: 0;
+    background-color: var(--md-sys-color-outline-variant);
+    cursor: default;
+    pointer-events: none;
+    border-radius: 0;
+  }
+
+  // Gap: more expressive than a divider. One or two per menu; not in a scroller.
+  > li.gap {
+    height: 6px;
+    min-height: 6px;
+    margin: 0 -4px;
+    padding: 0;
+    pointer-events: none;
+    cursor: default;
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  > li.label {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+    padding: 0 8px;
+    pointer-events: none;
+    cursor: default;
+    color: var(--md-comp-menu-supporting-text-color);
+    @include typescale("label-large");
+    font-family: $font-stack;
+  }
+
+  li:has(> menu) {
+    position: relative;
+  }
+
+  li:has(> menu) > :is(a, button, span)::after {
+    content: "";
+    flex: 0 0 var(--md-comp-menu-item-icon-size);
+    width: var(--md-comp-menu-item-icon-size);
+    height: var(--md-comp-menu-item-icon-size);
+    margin-inline-start: auto;
+    background-color: var(--md-comp-menu-item-trailing-icon-color);
+    mask: $_menu-chevron center / 20px no-repeat;
+  }
+}
+
+menu[id] {
+  @include menu-surface;
+
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 9999;
+  overflow-y: auto;
+  opacity: 0;
+  user-select: none;
+  transform-origin: 0 0;
+
+  // Nested flyouts sit outside the list box; do not clip them.
+  &:has(> li > menu) {
+    overflow: visible;
+  }
+
+  // Unfocused parent rounds down while a flyout is the focus.
+  &:has(> li:is(:hover, :focus-within, .open) > menu) {
+    --md-comp-menu-container-shape: 8px;
+  }
+}
+
+// Nested menu. Optional, desktop-first. No second Menu instance —
+// a <menu> inside an <li> is a flyout. Hover / :focus-within on fine
+// pointers; .open is the tap / keyboard switch.
+menu[id] li > menu {
+  @include menu-surface;
+
+  display: block;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 100%;
+  z-index: 1;
+  overflow: visible;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-4px) scale(0.96);
+  transform-origin: 0 0;
+  transition:
+    opacity 180ms ease,
+    transform 180ms ease,
+    visibility 180ms ease,
+    border-radius 200ms ease;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  menu[id] li:is(:hover, :focus-within) > menu {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
+    --md-comp-menu-container-shape: 20px;
+  }
+}
+
+menu[id] li.open > menu {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+  transform: none;
+  --md-comp-menu-container-shape: 20px;
+}
+
+menu[id] li.submenu-start > menu {
+  inset-inline-start: auto;
+  inset-inline-end: 100%;
+  transform-origin: 100% 0;
+}
+
+menu[id] li.submenu-start:is(:hover, :focus-within, .open) > menu {
+  transform: none;
+}
+
+body.keyboard-focused {
+  menu[id] > li:focus {
+    background-color: color-mix(
+      in oklab,
+      var(--md-comp-menu-item-label-text-color) 10%,
+      transparent
+    );
+  }
+
+  menu[id] > li:focus:not(.selected, [aria-selected="true"]) {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: -3px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  menu[id] li > menu {
+    transition: none;
+  }
+}
+
+.menu-trigger {
+  cursor: pointer;
+}

package/src/sass/components/_navbar.scss

@@ -1,22 +1,37 @@
 @use "../abstracts" as *;
 
-// Top and bottom app bars.
+// Top app bar.
 //
-// Anatomy is the HTML. A header whose child is a nav is a top app bar; a
-// footer whose child is a nav (and that is not .page-footer) is a bottom app
-// bar. Headings are the headline, icon-only links/buttons are the leading and
+// Anatomy is the HTML. A header whose child is a nav is a top app bar.
+// 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.
+// Destinations at the bottom of the screen are nav.navigation-bar, not this.
 //
-// Tokens follow the M3 top-app-bar / bottom-app-bar specs
+// Tokens follow the M3 top-app-bar spec
 // (https://m3.material.io/components/app-bars/specs):
-//   container      surface, 64dp small / 112 medium / 152 large / 80 bottom
+//   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
-//   elevation      0 at rest; level 2 once a .fixed bar has scrolled
+//   on scroll      surface-container fill (not elevation) so the bar
+//                  separates from the body. A color utility on the
+//                  header still wins — it sets background-color itself.
+
+// Scroll progress, not the fill color. Registering the fill as <color>
+// with initial-value: transparent made the 8px lerp run from
+// transparent-black through black: light-dark() tokens are IACVT for a
+// typed <color> property, so the used value collapsed to the initial
+// value. A <number> interpolates; color-mix() then resolves the two
+// live surfaces at use time.
+@property --md-comp-top-app-bar-scroll {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
 
-header:has(> nav) {
+header:has(> nav:not(.navigation-bar, .navigation-rail)) {
   --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.
@@ -26,12 +41,17 @@ header:has(> nav) {
   --md-comp-top-app-bar-leading-icon-size: 24px;
   --md-comp-top-app-bar-container-shape: 0;
 
-  background-color: var(--md-comp-top-app-bar-container-color);
+  background-color: color-mix(
+    in oklab,
+    var(--md-comp-top-app-bar-scrolled-container-color)
+      calc(100% * var(--md-comp-top-app-bar-scroll)),
+    var(--md-comp-top-app-bar-container-color)
+  );
   color: var(--md-comp-top-app-bar-headline-color);
   border-radius: var(--md-comp-top-app-bar-container-shape);
   width: 100%;
 
-  > nav:not(.tabs) {
+  > nav:not(.tabs, .navigation-bar, .navigation-rail) {
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -41,7 +61,7 @@ header:has(> nav) {
     margin: 0;
   }
 
-  > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
+  > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
@@ -63,7 +83,7 @@ header:has(> nav) {
   }
 
   // Icon-only actions — 48dp target, 24dp glyph, 4dp from the container edge.
-  > nav:not(.tabs) > :is(a, button):not(.btn):not(.button):not(.btn-floating):not(.btn-large):not(.btn-small):has(> i:only-child) {
+  > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -71,7 +91,10 @@ header:has(> nav) {
     width: 48px;
     height: 48px;
     padding: 0;
-    margin: 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.
+    margin-block: 0;
+    margin-inline-end: 0;
     border: 0;
     border-radius: 50%;
     background: transparent;
@@ -100,11 +123,11 @@ header:has(> nav) {
   }
 
   // Text destinations, either loose or grouped in a menu/list.
-  > nav:not(.tabs) > a:not(:has(> i:only-child)):not(.btn):not(.button):not(.btn-floating):not(.breadcrumb) {
+  > nav:not(.tabs, .navigation-bar, .navigation-rail) > a:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb) {
     @extend %app-bar-destination;
   }
 
-  > nav:not(.tabs) > :is(menu, ul) {
+  > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) {
     display: flex;
     align-items: stretch;
     align-self: stretch;
@@ -117,7 +140,10 @@ header:has(> nav) {
       align-items: stretch;
     }
 
-    a {
+    // Direct destinations only. Menu JS parks the menu next to the
+    // trigger, so a descendant `a` would also paint a square hover on
+    // top of the menu's pill.
+    > li > a {
       @extend %app-bar-destination;
     }
   }
@@ -125,7 +151,7 @@ header:has(> nav) {
   // 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) > ol {
+  > nav:not(.tabs, .navigation-bar, .navigation-rail) > ol {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -137,7 +163,7 @@ header:has(> nav) {
     padding-inline: 12px;
   }
 
-  > nav:not(.tabs) > form {
+  > nav:not(.tabs, .navigation-bar, .navigation-rail) > form {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
@@ -168,25 +194,6 @@ header:has(> nav) {
       }
     }
   }
-
-  // Secondary row (tabs sit under the bar, not inside it).
-  > .tabs {
-    background-color: transparent;
-    width: 100%;
-  }
-
-  @include bp-up("large") {
-    // Beats the icon-button display:inline-flex (higher specificity).
-    // Same flag the visibility utilities use for breakpoint hides.
-    > nav:not(.tabs) > .sidenav-trigger {
-      display: none !important;
-    }
-
-    // The trigger is still :first-child, so the title needs the no-icon inset.
-    > nav:not(.tabs) > .sidenav-trigger + :is(h1, h2, h3, h4, h5, h6) {
-      padding-inline-start: 12px;
-    }
-  }
 }
 
 %app-bar-destination {
@@ -213,7 +220,7 @@ header:has(> nav) {
 
 // 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) {
+header.center:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
   position: relative;
   justify-content: space-between;
 
@@ -229,12 +236,18 @@ header.center:has(> nav) > nav:not(.tabs) {
   }
 }
 
-// Medium (112dp) and large (152dp): same markup, title wraps to a second row.
-header.medium:has(> nav) > nav:not(.tabs),
-header.large:has(> nav) > nav:not(.tabs) {
+// Medium (112dp) and large (152dp): same markup, title on a second row.
+// The title is pulled out of the first flex line (`order` + 100% basis),
+// 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) {
   flex-wrap: wrap;
-  align-content: flex-start;
+  align-content: space-between;
+  align-items: flex-start;
   height: auto;
+  padding-top: 4px;
 
   > :is(h1, h2, h3, h4, h5, h6) {
     order: 1;
@@ -243,9 +256,13 @@ header.large:has(> nav) > nav:not(.tabs) {
     overflow: visible;
     text-overflow: unset;
   }
+
+  > :is(h1, h2, h3, h4, h5, h6) + * {
+    margin-inline-start: auto;
+  }
 }
 
-header.medium:has(> nav) > nav:not(.tabs) {
+header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
   min-height: 112px;
   padding-bottom: 16px;
 
@@ -259,7 +276,7 @@ header.medium:has(> nav) > nav:not(.tabs) {
   }
 }
 
-header.large:has(> nav) > nav:not(.tabs) {
+header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
   min-height: 152px;
   padding-bottom: 28px;
 
@@ -273,9 +290,12 @@ header.large:has(> nav) > nav:not(.tabs) {
   }
 }
 
-// Pin the bar. Scroll-driven elevation is progressive enhancement: without
-// animation-timeline the bar stays at rest (level 0), which is the spec default.
-header.fixed:has(> nav) {
+// Pin the bar. On scroll, fill with surface-container so it separates
+// from the body (M3 Expressive). The animation only drives the mix
+// 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)) {
   position: sticky;
   top: 0;
   z-index: 997;
@@ -286,75 +306,6 @@ header.fixed:has(> nav) {
 
 @keyframes top-app-bar-scroll {
   to {
-    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
-      0 1px 10px 0 rgba(0, 0, 0, 0.12),
-      0 2px 4px -1px rgba(0, 0, 0, 0.3);
-  }
-}
-
-// Bottom app bar. 80dp row, icons on the start, a FAB (any .btn) pushed to the end.
-footer:not(.page-footer):has(> nav) {
-  --md-comp-bottom-app-bar-container-color: var(--md-sys-color-surface);
-  --md-comp-bottom-app-bar-container-height: 80px;
-
-  background-color: var(--md-comp-bottom-app-bar-container-color);
-  color: var(--md-sys-color-on-surface);
-  width: 100%;
-  @include z-depth("2");
-
-  > nav:not(.tabs) {
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    min-height: var(--md-comp-bottom-app-bar-container-height);
-    padding: 12px 4px;
-    margin: 0;
-  }
-
-  > nav:not(.tabs) > :is(a, button):not(.btn):not(.button):not(.btn-floating):not(.btn-large):not(.btn-small):has(> i:only-child) {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    border-radius: 50%;
-    background: transparent;
-    color: var(--md-sys-color-on-surface-variant);
-    cursor: pointer;
-    appearance: none;
-    font: inherit;
-    text-decoration: none;
-    @include focus-visible;
-
-    > i {
-      display: block;
-      font-size: 24px;
-      width: 24px;
-      height: 24px;
-      line-height: 24px;
-    }
-
-    &:hover {
-      background-color: color-mix(in oklab, currentColor 8%, transparent);
-    }
-
-    &:active {
-      background-color: color-mix(in oklab, currentColor 10%, transparent);
-    }
-  }
-
-  > nav:not(.tabs) > :is(.btn, .btn-floating, .btn-large) {
-    margin-inline-start: auto;
-  }
-
-  &.fixed {
-    position: sticky;
-    bottom: 0;
-    z-index: 997;
+    --md-comp-top-app-bar-scroll: 1;
   }
 }