@expressivecss/expressive 0.3.0 → 0.4.0

package/src/sass/components/_dropdown.scss

@@ -5,26 +5,27 @@
 // Anatomy is the HTML. A <menu id> is the surface; each <li> is an item,
 // an <hr> is a divider, and an <i> inside the item is the leading icon.
 // The trigger is still .dropdown-trigger[data-target] — that is the JS
-// contract. .dropdown-content is an alias (FormSelect and Autocomplete
-// still generate it).
+// contract.
 //
 // Tokens follow https://m3.material.io/components/menus/specs
-//   container    surface, 4dp corners, elevation 2, 112–280dp
-//   item         48dp, label-large / on-surface, 12dp inset
+// plus the 1rem surface / stadium items used by fields and select.
+//   container    surface, 1rem corners, elevation 2, 112–280dp
+//   item         48dp, 2rem corners, label-large / on-surface, 12dp inset
 //   leading icon 24dp, on-surface-variant
 //   divider      1dp outline-variant
 //   state layer  8% hover / 10% selected
 
+$_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;
 }
 
-.dropdown-content,
 menu[id] {
   --md-comp-menu-container-color: var(--md-sys-color-surface);
-  --md-comp-menu-container-shape: 4px;
+  --md-comp-menu-container-shape: 1rem;
   --md-comp-menu-item-container-height: 48px;
 
   box-sizing: border-box;
@@ -47,6 +48,7 @@ menu[id] {
   @include z-depth("2");
 
   > li {
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
     width: 100%;
@@ -70,6 +72,11 @@ menu[id] {
       color: var(--md-sys-color-on-surface);
       text-decoration: none;
       cursor: pointer;
+
+      &:hover,
+      &:focus {
+        background: none;
+      }
       @include typescale("label-large");
       font-family: $font-stack;
     }
@@ -86,6 +93,12 @@ menu[id] {
     }
   }
 
+  > li:not(.disabled, .divider, .optgroup) {
+    width: calc(100% - 16px);
+    margin-inline: 8px;
+    border-radius: 2rem;
+  }
+
   > li:not(.disabled, .divider):hover,
   > li.active {
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
@@ -108,22 +121,105 @@ menu[id] {
     background-color: var(--md-sys-color-outline-variant);
     cursor: default;
   }
+
+  // Nested flyouts sit outside the list box; do not clip them.
+  &:has(> li > menu) {
+    overflow: visible;
+  }
+
+  li:has(> menu) {
+    position: relative;
+  }
+
+  li:has(> menu) > :is(a, button, span)::after {
+    content: "";
+    flex: 0 0 24px;
+    width: 24px;
+    height: 24px;
+    margin-inline-start: auto;
+    background-color: var(--md-sys-color-on-surface-variant);
+    mask: $_menu-chevron center / 24px no-repeat;
+  }
+}
+
+// Nested menu. Optional, desktop-first. No second Dropdown 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 {
+  --md-comp-menu-container-color: var(--md-sys-color-surface);
+  --md-comp-menu-container-shape: 1rem;
+  --md-comp-menu-item-container-height: 48px;
+
+  box-sizing: border-box;
+  display: none;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 100%;
+  z-index: 1;
+  min-width: 112px;
+  margin: 0;
+  padding: 8px 0;
+  list-style: none;
+  overflow: visible;
+  opacity: 1;
+  transform: none;
+  background-color: var(--md-comp-menu-container-color);
+  border-radius: var(--md-comp-menu-container-shape);
+  color: var(--md-sys-color-on-surface);
+  @include z-depth("2");
+
+  > li {
+    box-sizing: border-box;
+    min-height: var(--md-comp-menu-item-container-height);
+  }
+
+  > li:not(.disabled, .divider, .optgroup) {
+    width: calc(100% - 16px);
+    margin-inline: 8px;
+    border-radius: 2rem;
+  }
+
+  > li:not(.disabled, .divider):hover,
+  > li.active {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+
+  > li > :is(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);
+    padding: 0 12px;
+    color: var(--md-sys-color-on-surface);
+    text-decoration: none;
+    @include typescale("label-large");
+    font-family: $font-stack;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  menu[id] li:is(:hover, :focus-within) > menu {
+    display: block;
+  }
+}
+
+menu[id] li.open > menu {
+  display: block;
+}
+
+menu[id] li.submenu-start > menu {
+  inset-inline-start: auto;
+  inset-inline-end: 100%;
 }
 
 body.keyboard-focused {
-  .dropdown-content > li:focus,
   menu[id] > li:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
   }
 }
 
-.input-field.col .dropdown-content [type="checkbox"] + label {
-  top: 1px;
-  left: 0;
-  height: 18px;
-  transform: none;
-}
-
 .dropdown-trigger {
   cursor: pointer;
 }

package/src/sass/components/_index.scss

@@ -23,6 +23,7 @@
 @forward "page-footer";
 @forward "forms";
 @forward "table_of_contents";
+@forward "scrollspy";
 @forward "sidenav";
 @forward "preloader";
 @forward "slider";

package/src/sass/components/_modal.scss

@@ -4,8 +4,7 @@
 //
 // Anatomy is the HTML. A <dialog> is a basic dialog. A heading is the
 // headline, a <p> (or a wrapping <div>) is supporting text, and the last
-// child <form method="dialog"> or <nav> is the action row. .modal and
-// .modal-header / .modal-content / .modal-footer stay as aliases.
+// child <form method="dialog"> or <nav> is the action row.
 //
 // Tokens follow https://m3.material.io/components/dialogs/specs
 //   container    surface, 28dp corners, 280–560dp, elevation 3
@@ -16,8 +15,7 @@
 //   scrim        32% + 12px blur
 //   padding      24dp
 
-dialog,
-.modal {
+dialog {
   --md-comp-basic-dialog-container-color: var(--md-sys-color-surface);
   --md-comp-basic-dialog-container-shape: 28px;
   --md-comp-basic-dialog-container-min-width: 280px;
@@ -51,8 +49,7 @@ html:has(dialog:modal) {
   overflow: hidden;
 }
 
-dialog[open],
-.modal[open] {
+dialog[open] {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -71,8 +68,7 @@ dialog > i:first-child {
   color: var(--md-sys-color-secondary);
 }
 
-dialog > :is(h1, h2, h3, h4, h5, h6),
-.modal-header {
+dialog > :is(h1, h2, h3, h4, h5, h6) {
   flex: 0 0 auto;
   margin: 0;
   padding: 24px 24px 16px;
@@ -90,8 +86,7 @@ dialog > i:first-child + :is(h1, h2, h3, h4, h5, h6) {
 }
 
 dialog > p,
-dialog > div,
-.modal-content {
+dialog > div {
   flex: 1 1 auto;
   min-height: 0;
   overflow: auto;
@@ -106,14 +101,12 @@ dialog > div,
   color: color-mix(in oklab, currentColor 72%, transparent);
 }
 
-dialog > :is(h1, h2, h3, h4, h5, h6) + p,
-.modal-header + .modal-content {
+dialog > :is(h1, h2, h3, h4, h5, h6) + p {
   padding-top: 0;
 }
 
 // Action row. form[method=dialog] is the native close mechanism.
-dialog > :is(form, nav):last-child,
-.modal-footer {
+dialog > :is(form, nav):last-child {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
@@ -126,16 +119,11 @@ dialog > :is(form, nav):last-child,
   background: none;
 }
 
-.modal-close {
-  cursor: pointer;
-}
-
 // Full-screen (M3). Takes the viewport; no corners.
 // UA `dialog:modal` sets max-width: calc(100% - 2em - 6px). Without
 // clearing it, width: 100% is capped and a strip of scrim shows on the
 // right. Bottom sheet already overrides this.
-dialog.max,
-.modal.max {
+dialog.max {
   width: 100%;
   max-width: none;
   height: 100%;
@@ -149,8 +137,7 @@ dialog.max,
 // the edge against the viewport is square. `left` / `right` also float
 // via the helper utilities (`!important`), so sheets reset that.
 dialog.bottom,
-dialog.bottom-sheet,
-.modal.bottom-sheet {
+dialog.bottom-sheet {
   width: 100%;
   min-width: 0;
   max-width: none;
@@ -161,8 +148,7 @@ dialog.bottom-sheet,
 }
 
 dialog.top,
-dialog.top-sheet,
-.modal.top-sheet {
+dialog.top-sheet {
   width: 100%;
   min-width: 0;
   max-width: none;
@@ -174,10 +160,8 @@ dialog.top-sheet,
 
 dialog.left,
 dialog.left-sheet,
-.modal.left-sheet,
 dialog.right,
-dialog.right-sheet,
-.modal.right-sheet {
+dialog.right-sheet {
   float: none !important;
   width: min(var(--md-comp-basic-dialog-sheet-width), 85%);
   max-width: none;
@@ -190,8 +174,7 @@ dialog.right-sheet,
 }
 
 dialog.left,
-dialog.left-sheet,
-.modal.left-sheet {
+dialog.left-sheet {
   inset-inline-start: 0;
   inset-inline-end: auto;
   border-radius: 0 var(--md-comp-basic-dialog-container-shape)
@@ -199,8 +182,7 @@ dialog.left-sheet,
 }
 
 dialog.right,
-dialog.right-sheet,
-.modal.right-sheet {
+dialog.right-sheet {
   inset-inline-start: auto;
   inset-inline-end: 0;
   border-radius: var(--md-comp-basic-dialog-container-shape) 0 0

package/src/sass/components/_navbar.scss

@@ -63,7 +63,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) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -100,7 +100,7 @@ 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) > a:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb) {
     @extend %app-bar-destination;
   }
 
@@ -117,7 +117,10 @@ header:has(> nav) {
       align-items: stretch;
     }
 
-    a {
+    // Direct destinations only. Dropdown 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;
     }
   }
@@ -293,7 +296,7 @@ header.fixed:has(> nav) {
 }
 
 // Bottom app bar. 80dp row, icons on the start, a FAB (any .btn) pushed to the end.
-footer:not(.page-footer):has(> nav) {
+footer:has(> nav:only-child) {
   --md-comp-bottom-app-bar-container-color: var(--md-sys-color-surface);
   --md-comp-bottom-app-bar-container-height: 80px;
 
@@ -312,7 +315,7 @@ footer:not(.page-footer):has(> nav) {
     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) {
+  > nav:not(.tabs) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -348,7 +351,7 @@ footer:not(.page-footer):has(> nav) {
     }
   }
 
-  > nav:not(.tabs) > :is(.btn, .btn-floating, .btn-large) {
+  > nav:not(.tabs) > :is(.button, .circle, .extra) {
     margin-inline-start: auto;
   }
 

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

@@ -1,27 +1,146 @@
 @use "../abstracts" as *;
 
-.page-footer {
+// Site footer.
+//
+// Anatomy is the HTML. A <footer> is the landmark. A heading is a column
+// title. A <nav> (or ul) is a link list. The last child <small> is the
+// legal bar. A footer whose only child is a <nav> is the bottom app bar,
+// not this component.
+//
+// Tokens:
+//   --md-comp-footer-padding-block     3rem
+//   --md-comp-footer-padding-inline    1rem
+//   --md-comp-footer-gap               2rem
+//   --md-comp-footer-legal-height      48px
+//
+// Unfilled by default (dashed hairline). .filled uses surface-container.
+// There is no JavaScript.
+
+footer:not(:has(> nav:only-child)) {
+  --md-comp-footer-padding-block: 3rem;
+  --md-comp-footer-padding-inline: 1rem;
+  --md-comp-footer-gap: 2rem;
+  --md-comp-footer-legal-height: 48px;
+
+  box-sizing: border-box;
   margin-top: 5rem;
-  padding-top: 3rem;
+  padding: var(--md-comp-footer-padding-block) var(--md-comp-footer-padding-inline) 1rem;
   border-top: 1px dashed var(--md-sys-color-outline-variant);
+  color: var(--md-sys-color-on-surface);
+
   p {
-    color: var(--md-sys-color-outline);
+    margin: 0 0 8px;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-medium");
+    font-family: $font-stack;
   }
-  a {
+
+  a:not(.button, .circle, .extra) {
     color: var(--md-sys-color-primary);
+    text-decoration: none;
+    @include focus-visible;
+  }
+
+  :is(h1, h2, h3, h4, h5, h6) {
+    margin: 0 0 8px;
+    color: var(--md-sys-color-on-surface);
+    @include typescale("title-small");
+    font-family: $font-stack;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}
+
+footer:not(:has(> nav:only-child)).filled,
+footer:not(:has(> nav:only-child)).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)) {
+  display: grid;
+  gap: var(--md-comp-footer-gap);
+  grid-template-columns: 1fr;
+
+  @include bp-up("small") {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include bp-up("large") {
+    grid-template-columns: repeat(4, 1fr);
   }
-  .footer-copyright,
-  .footer-copyright a {
-    overflow: hidden;
-    min-height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 0px;
+
+  @include bp-up("xlarge") {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+footer:not(:has(> nav:only-child)) > .container > .row,
+footer:not(:has(> nav:only-child)) > .row {
+  grid-column: 1 / -1;
+}
+
+footer:not(:has(> nav:only-child)) nav {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+  min-width: 0;
+}
+
+footer:not(:has(> nav:only-child)) nav > a:not(.button, .circle, .extra),
+footer:not(:has(> nav:only-child)) ul a:not(.button, .circle, .extra) {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 48px;
+  padding: 0 12px;
+  margin-inline-start: -12px;
+  border-radius: 2rem;
+  @include typescale("label-large");
+  font-family: $font-stack;
+
+  &:hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+}
+
+footer:not(:has(> nav:only-child)) > small:last-child {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 16px;
+  box-sizing: border-box;
+  min-height: var(--md-comp-footer-legal-height);
+  margin: 0;
+  padding-block: 12px;
+  grid-column: 1 / -1;
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+  color: var(--md-sys-color-on-surface-variant);
+  @include typescale("body-small");
+  font-family: $font-stack;
+
+  a:not(.button) {
+    color: var(--md-sys-color-primary);
   }
 }
 
-.page-footer ul {
-  padding-left: 0;
-  list-style-type: none;
+// Sticky: pin the footer to the bottom of a short page. Only when the
+// landmark is a direct child of body — not a footer nested in a demo.
+body:has(> footer:not(:has(> nav:only-child))) {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+
+body:has(> footer:not(:has(> nav:only-child))) > main {
+  flex: 1 0 auto;
 }

package/src/sass/components/_parallax.scss

@@ -2,7 +2,7 @@
 
 // Parallax. Anatomy is the HTML: a .parallax (or <figure class="parallax">)
 // clips an <img>, <picture>, or <video>. A heading / <p> / <figcaption> is
-// the overlay. .parallax-container is the old wrapper and still works.
+// the overlay.
 //
 // Motion is CSS. A named view timeline on the clip drives the image; without
 // animation-timeline the image is just object-fit: cover. JS does not scroll.
@@ -12,8 +12,7 @@
 //   --md-comp-parallax-travel   how far the image moves (64px)
 //   --md-comp-parallax-shape    12px, same as media / lightbox / slider
 
-.parallax,
-.parallax-container {
+.parallax {
   --md-comp-parallax-height: 500px;
   --md-comp-parallax-travel: 120px;
   --md-comp-parallax-shape: 12px;
@@ -29,22 +28,8 @@
   view-timeline-axis: block;
 }
 
-// Old markup: container > .parallax > img. The outer box is the clip;
-// the inner .parallax is just a fill, not a second 500px window.
-.parallax-container > .parallax {
-  position: absolute;
-  inset: 0;
-  height: auto;
-  margin: 0;
-  border-radius: 0;
-  overflow: visible;
-  view-timeline-name: none;
-}
-
 .parallax > :is(img, video),
-.parallax > picture,
-.parallax-container .parallax > :is(img, video),
-.parallax-container .parallax > picture {
+.parallax > picture {
   position: absolute;
   inset: 0;
   display: block;
@@ -53,8 +38,7 @@
   border: 0;
 }
 
-.parallax > picture img,
-.parallax-container .parallax > picture img {
+.parallax > picture img {
   display: block;
   width: 100%;
   height: 100%;
@@ -62,9 +46,7 @@
 }
 
 .parallax > :is(img, video),
-.parallax > picture img,
-.parallax-container .parallax > :is(img, video),
-.parallax-container .parallax > picture img {
+.parallax > picture img {
   object-fit: cover;
   object-position: center;
 }
@@ -95,8 +77,7 @@
 }
 
 // Full-bleed hero. Meets the viewport edges; no corners.
-.parallax.max,
-.parallax-container.max {
+.parallax.max {
   height: 100vh;
   height: 100dvh;
   border-radius: 0;
@@ -107,9 +88,7 @@
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
     .parallax > :is(img, video),
-    .parallax > picture img,
-    .parallax-container .parallax > :is(img, video),
-    .parallax-container .parallax > picture img {
+    .parallax > picture img {
       height: calc(100% + 2 * var(--md-comp-parallax-travel));
       inset: calc(-1 * var(--md-comp-parallax-travel)) 0 auto;
       animation: parallax-shift linear both;