@expressivecss/expressive 0.14.1 → 0.16.0

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

@@ -4,11 +4,16 @@
 // navigation bar.
 //
 // Anatomy is the HTML: a nav.navigation-rail. The first
-// button:not(.button) is the menu toggle. A .button child is the
-// optional FAB. Other <a>/<button> are destinations (leading <i>,
+// button:not(.button) is the menu toggle, unless it opens a side
+// panel. A .button child is the optional FAB. Other <a>/<button> are destinations (leading icon,
 // remaining text is the label, optional .badge). A heading is a
 // section header (expanded only). aria-current / .active is selected.
 //
+// Side panel: a destination <button popovertarget> followed by its
+// .navigation-rail-panel [popover]. The panel docks beside the rail at full
+// height and holds links, headings and <details> groups. The browser owns
+// click, light dismiss, Escape and the expanded state; JS opens it on hover.
+//
 // .expanded widens the rail (icon+label on one row, extended FAB).
 // Below `small`, .expanded is modal (scrim). .modal forces that
 // overlay at every breakpoint. JS toggles .expanded from the menu
@@ -21,6 +26,7 @@
 //   --md-comp-nav-rail-indicator-width     56px
 //   --md-comp-nav-rail-indicator-height    32px / 56px expanded
 //   --md-comp-nav-rail-fab-size            56px
+//   --md-comp-nav-rail-panel-width         256px
 //
 // Nest descendants inside this block.
 
@@ -29,15 +35,42 @@
   --md-comp-nav-rail-expanded-width: 280px;
 }
 
+// Expanded rail as an overlay with a scrim.
+@mixin _modal-rail {
+  position: fixed;
+  inset-block: 0;
+  inset-inline: 0 auto;
+  z-index: var(--expressive-z-modal-rail);
+  @include z-depth("1");
+
+  // A blurred rail would become the containing block of the fixed scrim
+  // below and clip it to the rail, so a modal rail stays solid.
+  background-color: var(--md-sys-color-surface-container);
+  backdrop-filter: none;
+
+  &::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-color: var(--md-comp-scrim-color);
+    z-index: -1;
+  }
+}
+
 .navigation-rail {
   --md-comp-nav-rail-icon-size: 24px;
   --md-comp-nav-rail-indicator-width: 56px;
   --md-comp-nav-rail-indicator-height: 32px;
-  --md-comp-nav-rail-indicator-shape: 16px;
+  --md-comp-nav-rail-indicator-shape: var(--md-sys-shape-corner-large);
   --md-comp-nav-rail-fab-size: 56px;
   --md-comp-nav-rail-active-indicator-color: var(--md-sys-color-secondary-container);
   --md-comp-nav-rail-active-color: var(--md-sys-color-on-secondary-container);
-  --md-comp-nav-rail-duration: 250ms;
+  --md-comp-nav-rail-duration: var(--md-sys-motion-duration-medium1);
+  // Expanding and collapsing resize the rail, so they run on the default
+  // spatial spring and follow the motion="expressive" switch. The rail grows
+  // from its docked edge, so an overshoot only widens it for a moment.
+  --md-comp-nav-rail-motion: var(--md-sys-motion-spring-default-spatial);
+  --md-comp-nav-rail-motion-duration: var(--md-sys-motion-spring-default-spatial-duration);
 
   box-sizing: border-box;
   display: flex;
@@ -54,13 +87,13 @@
   overscroll-behavior: contain;
   background-color: var(--md-sys-color-surface-container);
   color: var(--md-sys-color-on-surface);
-  transition: width var(--md-comp-nav-rail-duration) ease,
-    min-width var(--md-comp-nav-rail-duration) ease,
-    padding var(--md-comp-nav-rail-duration) ease;
+  transition: width var(--md-comp-nav-rail-motion-duration) var(--md-comp-nav-rail-motion),
+    min-width var(--md-comp-nav-rail-motion-duration) var(--md-comp-nav-rail-motion),
+    padding var(--md-comp-nav-rail-motion-duration) var(--md-comp-nav-rail-motion);
   @include glass(var(--md-sys-color-surface-container));
 
   // Menu toggle.
-  > button:not(.button, .icon-button):first-child {
+  > button:not(.button, .icon-button, [popovertarget]):first-child {
     display: flex;
     flex: 0 0 auto;
     align-items: center;
@@ -84,12 +117,14 @@
     }
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
     }
   }
 
   // Optional FAB. Collapsed: icon-only 56dp. Expanded: extended.
   > :is(a, button).button {
+    --md-comp-filled-button-icon-size: 24px;
+
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -101,23 +136,19 @@
     margin: 4px 0 16px;
     padding: 0;
     overflow: hidden;
-    border-radius: 16px;
+    border-radius: var(--md-sys-shape-corner-large);
     color: var(--md-sys-color-on-primary-container);
     background-color: var(--md-sys-color-primary-container);
     text-decoration: none;
 
     > :not(#{$icon}) {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-      clip-path: inset(50%);
+      @include visually-hidden;
     }
   }
 
   // Destinations.
   > a:not(.button, .icon-button),
-  > button:not(.button, .icon-button):not(:first-child) {
+  > button:not(.button, .icon-button):is(:not(:first-child), [popovertarget]) {
     position: relative;
     display: flex;
     flex: 0 0 auto;
@@ -127,6 +158,8 @@
     gap: 4px;
     box-sizing: border-box;
     width: 100%;
+    // A <button> destination would keep the default button's 40px height.
+    height: auto;
     margin: 0;
     padding: 6px 0;
     border: 0;
@@ -139,48 +172,9 @@
     @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-rail-indicator-width);
-      height: var(--md-comp-nav-rail-indicator-height);
-      border-radius: var(--md-comp-nav-rail-indicator-shape);
-      font-size: var(--md-comp-nav-rail-icon-size);
-      color: inherit;
-      transition: background-color var(--md-comp-nav-rail-duration) ease;
-    }
-
-    &: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-rail-active-indicator-color);
-        color: var(--md-comp-nav-rail-active-color);
-        --md-icon-fill: 1;
-      }
-    }
-
     // Sibling badge (icon + label + .badge). Child-of-icon is handled
-    // in _badges.scss. Sit on the upper trailing corner of the 24dp glyph.
-    > .badge {
-      position: absolute;
-      z-index: 1;
-      top: calc(6px + (var(--md-comp-nav-rail-indicator-height) - 24px) / 2);
-      inset-inline-start: calc(50% + 12px);
-      transform: translate(-50%, -50%);
-
-      &:dir(rtl) {
-        transform: translate(50%, -50%);
-      }
-    }
+    // in _badges.scss.
+    @include nav-destination("nav-rail", 6px, background-color var(--md-comp-nav-rail-duration) ease);
   }
 
   > :is(h1, h2, h3, h4, h5, h6) {
@@ -195,14 +189,14 @@
 
   &.expanded {
     --md-comp-nav-rail-indicator-height: 56px;
-    --md-comp-nav-rail-indicator-shape: 28px;
+    --md-comp-nav-rail-indicator-shape: var(--md-sys-shape-corner-extra-large);
 
     align-items: stretch;
     width: clamp(220px, var(--md-comp-nav-rail-expanded-width), 360px);
     min-width: 220px;
     padding-inline: 16px;
 
-    > button:not(.button, .icon-button):first-child {
+    > button:not(.button, .icon-button, [popovertarget]):first-child {
       justify-content: flex-start;
       width: auto;
       padding-inline: 16px;
@@ -219,6 +213,7 @@
         position: static;
         width: auto;
         height: auto;
+        margin: 0;
         overflow: visible;
         clip-path: none;
         @include typescale("label-large");
@@ -226,7 +221,7 @@
     }
 
     > a:not(.button, .icon-button),
-    > button:not(.button, .icon-button):not(:first-child) {
+    > button:not(.button, .icon-button):is(:not(:first-child), [popovertarget]) {
       flex-direction: row;
       justify-content: flex-start;
       gap: 12px;
@@ -235,91 +230,146 @@
       border-radius: var(--md-comp-nav-rail-indicator-shape);
       text-align: start;
 
-      > #{$icon} {
-        width: var(--md-comp-nav-rail-icon-size);
-        height: var(--md-comp-nav-rail-icon-size);
-        border-radius: 0;
-      }
-
-      &: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-rail-active-indicator-color);
-        color: var(--md-comp-nav-rail-active-color);
-
-        > #{$icon} {
-          background-color: transparent;
-          color: inherit;
-        }
-      }
+      @include nav-destination-row("nav-rail");
 
       > .badge {
         top: calc((var(--md-comp-nav-rail-indicator-height) - 24px) / 2);
-        left: auto;
         inset-inline-start: calc(16px + 24px);
-        transform: translate(-50%, -50%);
-
-        &:dir(rtl) {
-          transform: translate(50%, -50%);
-        }
       }
     }
 
     > :is(h1, h2, h3, h4, h5, h6) {
       display: block;
     }
+
+    > .navigation-rail-panel {
+      --_nav-rail-panel-offset: 16px;
+    }
   }
 
   &.expanded.modal {
-    position: fixed;
-    inset: 0 auto 0 0;
-    z-index: 998;
-    @include z-depth("1");
+    @include _modal-rail;
+  }
 
-    // A blurred rail would become the containing block of the fixed scrim
-    // below and clip it to the rail, so a modal rail stays solid.
-    background-color: var(--md-sys-color-surface-container);
-    backdrop-filter: none;
+  @include bp-down("medium") {
+    &.expanded:not(.modal) {
+      @include _modal-rail;
+    }
+  }
+}
 
-    &::before {
-      content: "";
-      position: fixed;
-      inset: 0;
-      background-color: var(--md-comp-scrim-color);
-      z-index: -1;
+// A destination whose panel is open keeps its hover state layer.
+.navigation-rail:not(.expanded) > button:has(+ .navigation-rail-panel:popover-open):not(.active, [aria-current]) > #{$icon},
+.navigation-rail.expanded > button:has(+ .navigation-rail-panel:popover-open):not(.active, [aria-current]) {
+  background-color: state-layer(var(--md-sys-color-on-surface), "hover");
+}
+
+// Docks against the trigger's inline end; the offset clears the rail's
+// inline padding so the panel meets the rail's edge. The position area is
+// the space after the trigger, so 100% is what is left of the window.
+.navigation-rail-panel {
+  --_nav-rail-panel-offset: 8px;
+
+  box-sizing: border-box;
+  inline-size: var(--md-comp-nav-rail-panel-width, 256px);
+  max-inline-size: calc(100% - var(--_nav-rail-panel-offset));
+  block-size: auto;
+  inset: auto;
+  margin: 0;
+  margin-inline-start: var(--_nav-rail-panel-offset);
+  overflow: auto;
+  overscroll-behavior: contain;
+  border: 0;
+  border-start-end-radius: var(--md-sys-shape-corner-large);
+  border-end-end-radius: var(--md-sys-shape-corner-large);
+  background-color: var(--md-sys-color-surface-container);
+  color: var(--md-sys-color-on-surface-variant);
+  @include z-depth("1");
+
+  position-area: span-all inline-end;
+  align-self: stretch;
+
+  // Here, not on the base rule, so the global [popover] reset in _menu.scss,
+  // which loads later, cannot clear it.
+  &:popover-open {
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+  }
+
+  :is(a, summary) {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 12px;
+    box-sizing: border-box;
+    min-block-size: 48px;
+    padding: 0 16px;
+    border-radius: 24px;
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    @include typescale("label-large");
+    @include focus-visible;
+
+    &:hover:not([aria-current]) {
+      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
+    }
+
+    &[aria-current] {
+      background-color: var(--md-comp-nav-rail-active-indicator-color);
+      color: var(--md-comp-nav-rail-active-color);
+      @include forced-colors-selected;
     }
   }
 
-  @include bp-down("medium") {
-    &.expanded:not(.modal) {
-      position: fixed;
-      inset: 0 auto 0 0;
-      z-index: 998;
-      @include z-depth("1");
-
-      background-color: var(--md-sys-color-surface-container);
-      backdrop-filter: none;
-
-      &::before {
-        content: "";
-        position: fixed;
-        inset: 0;
-        background-color: var(--md-comp-scrim-color);
-        z-index: -1;
-      }
+  summary {
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::after {
+      content: "";
+      flex: none;
+      inline-size: 18px;
+      block-size: 18px;
+      margin-inline-start: auto;
+      background-color: currentColor;
+      mask: $caret-down center / 18px no-repeat;
+      transition: transform var(--md-sys-motion-duration-short3) ease-out;
     }
   }
+
+  details[open] > summary::after {
+    transform: rotate(180deg);
+  }
+
+  details > a {
+    padding-inline-start: 28px;
+  }
+
+  > :is(h1, h2, h3, h4, h5, h6) {
+    margin: 0;
+    padding: 16px 16px 8px;
+    @include typescale("title-small");
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid CanvasText;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .navigation-rail-panel summary::after,
   .navigation-rail {
     transition: none;
   }
 }
+
+// Navigation does nothing on paper. Important so a size or state rule that sets
+// `display` cannot bring it back; see base/_print.scss for the page itself.
+@media print {
+  .navigation-rail { display: none !important; }
+}

package/src/sass/components/_org-chart.scss

@@ -0,0 +1,192 @@
+@use "../abstracts" as *;
+
+// Organization chart. A reporting line drawn top down: a <ul class="org-chart">
+// of nested lists, one <li> per person. A person with reports holds a
+// <details open>: its <summary class="org-chart-node"> is the card and its
+// nested <ul> the reports, so the browser collapses a team. A person without
+// reports holds a <div class="org-chart-node">, or an <a> to a profile.
+//
+// A node stacks an optional .org-chart-role band, an .avatar and an
+// .org-chart-name. The nested lists carry the hierarchy to assistive
+// technology; the connector lines are drawn with pseudo-elements and say
+// nothing. Like .tree it is disclosures and links, not role="tree".
+//
+// Siblings sit side by side, so a wide chart scrolls sideways inside the
+// root list instead of the page. Right-to-left pages mirror the order.
+//
+// Tokens:
+//   --md-comp-org-chart-line-color              outline-variant
+//   --md-comp-org-chart-line-length             24px; each vertical connector
+//   --md-comp-org-chart-gap                     16px; between siblings
+//   --md-comp-org-chart-node-container-color    surface-container-high
+//   --md-comp-org-chart-node-shape              12px
+//   --md-comp-org-chart-role-container-color    primary-container
+//   --md-comp-org-chart-role-color              on-primary-container
+
+.org-chart {
+  --md-comp-org-chart-line-color: var(--md-sys-color-outline-variant);
+  --md-comp-org-chart-line-length: 24px;
+  --md-comp-org-chart-gap: 16px;
+  --md-comp-org-chart-node-container-color: var(--md-sys-color-surface-container-high);
+  --md-comp-org-chart-node-shape: var(--md-sys-shape-corner-medium);
+  --md-comp-org-chart-role-container-color: var(--md-sys-color-primary-container);
+  --md-comp-org-chart-role-color: var(--md-sys-color-on-primary-container);
+  --_line: 1px solid var(--md-comp-org-chart-line-color);
+
+  display: flex;
+  // `safe` keeps an overflowing chart's start edge reachable by scrolling.
+  justify-content: safe center;
+  margin: $element-top-margin 0 $element-bottom-margin;
+  padding: 0 0 8px;
+  overflow-x: auto;
+  list-style: none;
+
+  ul {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: var(--md-comp-org-chart-line-length) 0 0;
+    list-style: none;
+
+    // The drop from the manager down to the bar over the reports.
+    &::before {
+      content: "";
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 50%;
+      block-size: var(--md-comp-org-chart-line-length);
+      border-inline-start: var(--_line);
+    }
+  }
+
+  li {
+    position: relative;
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+    padding-inline: calc(var(--md-comp-org-chart-gap) / 2);
+  }
+
+  // Each report draws half the bar on either side of its centre and a drop
+  // from the bar to its card. The outer halves of the first and last
+  // report are left off, so the bar spans exactly from end card to end card.
+  ul > li {
+    padding-block-start: var(--md-comp-org-chart-line-length);
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      inset-block-start: 0;
+      inline-size: 50%;
+      block-size: var(--md-comp-org-chart-line-length);
+      border-block-start: var(--_line);
+    }
+
+    &::before {
+      inset-inline-end: 50%;
+    }
+
+    &::after {
+      inset-inline-start: 50%;
+      border-inline-start: var(--_line);
+    }
+
+    &:first-child::before,
+    &:last-child::after {
+      border-block-start: 0;
+    }
+  }
+}
+
+.org-chart-node {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  inline-size: fit-content;
+  min-inline-size: rem(128px);
+  max-inline-size: rem(192px);
+  margin-inline: auto;
+  padding: 16px;
+  border-radius: var(--md-comp-org-chart-node-shape);
+  overflow: hidden;
+  background-color: var(--md-comp-org-chart-node-container-color);
+  color: var(--md-sys-color-on-surface);
+  text-align: center;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  @include typescale("body-medium");
+
+  &:is(a, summary) {
+    cursor: pointer;
+    @include focus-visible;
+
+    &:hover {
+      background-image: linear-gradient(
+        state-layer(var(--md-sys-color-on-surface), "hover") 0 0
+      );
+    }
+  }
+
+  // A summary would otherwise show its own triangle; the card draws a
+  // caret under the name that turns over once the team is open.
+  &:is(summary) {
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::after {
+      content: "";
+      flex: none;
+      inline-size: rem(24px);
+      block-size: rem(24px);
+      margin-block: -8px;
+      background-color: currentColor;
+      mask: $caret-down center / 100% no-repeat;
+      transition: rotate var(--md-sys-motion-duration-short3) ease-out;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
+      @include forced-colors-fill;
+    }
+  }
+
+  [open] > &::after {
+    rotate: 180deg;
+  }
+}
+
+// A band across the top of the card, so it must come first in the node.
+.org-chart-role {
+  align-self: stretch;
+  margin: -16px -16px 0;
+  padding: 8px 16px;
+  background-color: var(--md-comp-org-chart-role-container-color);
+  color: var(--md-comp-org-chart-role-color);
+  @include typescale("label-large");
+}
+
+.org-chart-name {
+  @include typescale("title-small");
+}
+
+// Forced colors drop the fills, so a border keeps each card and the band.
+@media (forced-colors: active) {
+  .org-chart-node {
+    border: 1px solid CanvasText;
+  }
+
+  .org-chart-role {
+    border-block-end: 1px solid CanvasText;
+  }
+}

package/src/sass/components/_page-footer.scss

@@ -17,7 +17,10 @@
 // Unfilled by default (dashed hairline). .filled uses surface-container.
 // There is no JavaScript.
 
-footer:not(:has(> .navigation-bar:only-child)) {
+// Any footer except one wrapping a lone navigation bar.
+$_footer: "footer:not(:has(> .navigation-bar:only-child))";
+
+#{$_footer} {
   --md-comp-footer-padding-block: 3rem;
   --md-comp-footer-padding-inline: 1rem;
   --md-comp-footer-gap: 2rem;
@@ -54,16 +57,16 @@ footer:not(:has(> .navigation-bar:only-child)) {
   }
 }
 
-footer:not(:has(> nav:only-child)).filled,
-footer:not(:has(> nav:only-child)).surface {
+#{$_footer}.filled,
+#{$_footer}.surface {
   background-color: var(--md-sys-color-surface-container);
   border-top: 1px solid var(--md-sys-color-outline-variant);
 }
 
 // Columns: direct <nav> children. A wrapping .container is the grid
 // when the author uses one. Legacy .row still spans the full measure.
-footer:not(:has(> nav:only-child)) > .container,
-footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+#{$_footer} > .container,
+#{$_footer}:not(:has(> .container)) {
   display: grid;
   gap: var(--md-comp-footer-gap);
   grid-template-columns: 1fr;
@@ -85,14 +88,14 @@ footer:not(:has(> nav:only-child)):not(:has(> .container)) {
   }
 }
 
-footer:not(:has(> nav:only-child)) > .container > .row,
-footer:not(:has(> nav:only-child)) > .row {
+#{$_footer} > .container > .row,
+#{$_footer} > .row {
   grid-column: 1 / -1;
 }
 
 // A column with no links is a <section>, not a <nav> - see rule 4. Both are
 // columns to look at.
-footer:not(:has(> nav:only-child)) :is(nav, section) {
+#{$_footer} :is(nav, section) {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -100,8 +103,8 @@ footer:not(:has(> nav:only-child)) :is(nav, section) {
   min-width: 0;
 }
 
-footer:not(:has(> nav:only-child)) nav > a:not(.button, .icon-button, .circle, .extra),
-footer:not(:has(> nav:only-child)) ul a:not(.button, .icon-button, .circle, .extra) {
+#{$_footer} nav > a:not(.button, .icon-button, .circle, .extra),
+#{$_footer} ul a:not(.button, .icon-button, .circle, .extra) {
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -112,15 +115,15 @@ footer:not(:has(> nav:only-child)) ul a:not(.button, .icon-button, .circle, .ext
   @include typescale("label-large");
 
   &:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+    background-color: state-layer(var(--md-sys-color-on-surface), "hover");
   }
 }
 
 // The legal bar. `.container` is a supported columns wrapper - the rule above
 // already accounts for it - so the bar has to be found through it too, or a
 // footer written the documented way gets an unstyled copyright row.
-footer:not(:has(> nav:only-child)) > small:last-child,
-footer:not(:has(> nav:only-child)) > .container > small:last-child {
+#{$_footer} > small:last-child,
+#{$_footer} > .container > small:last-child {
   display: flex;
   flex-wrap: wrap;
   align-items: center;