@expressivecss/expressive 0.2.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/_icons-material-design.scss

@@ -1,8 +1,81 @@
 @use "../abstracts" as *;
 
-/* This is needed for some mobile phones to display the Google Icon font properly */
-.material-icons, .material-symbols-outlined,
-.material-symbols-rounded, .material-symbols-sharp {
+// Material Symbols. The framework does not ship the font files — outlined,
+// rounded, and sharp are three separate variable fonts, and pulling all
+// three into the main sheet would dwarf the rest of the CSS. Load the
+// families you use (see the Icons docs). Outlined with every axis:
+//
+//   fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
+//
+// Style (outlined / rounded / sharp) is the font family, not a variation
+// axis. Switch it with the `icon-style` attribute (same idea as `theme`)
+// or by setting --md-icon-font. Fill, weight, grade, and optical size
+// are axes and inherit as custom properties.
+
+:root {
+  --md-icon-font-outlined: "Material Symbols Outlined";
+  --md-icon-font-rounded: "Material Symbols Rounded";
+  --md-icon-font-sharp: "Material Symbols Sharp";
+  --md-icon-font: var(--md-icon-font-outlined);
+  --md-icon-fill: 0;
+  --md-icon-weight: 400;
+  --md-icon-grade: 0;
+  --md-icon-optical-size: 24;
+}
+
+[icon-style="outlined"] { --md-icon-font: var(--md-icon-font-outlined); }
+[icon-style="rounded"] { --md-icon-font: var(--md-icon-font-rounded); }
+[icon-style="sharp"] { --md-icon-font: var(--md-icon-font-sharp); }
+
+$_icon: ".material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons";
+
+#{$_icon} {
+  display: inline-block;
+  font-family: var(--md-icon-font);
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  user-select: none;
   text-rendering: optimizeLegibility;
-  font-feature-settings: 'liga';
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings:
+    "FILL" var(--md-icon-fill),
+    "wght" var(--md-icon-weight),
+    "GRAD" var(--md-icon-grade),
+    "opsz" var(--md-icon-optical-size);
+
+  // Nest so each class in $_icon gets the suffix. `#{$_icon}.tiny` would
+  // only attach `.tiny` to the last item and leave every other icon
+  // matching the bare `.material-symbols` selector — including `.large`.
+  &.tiny {
+    font-size: 1rem;
+    --md-icon-optical-size: 20;
+  }
+  &.small {
+    font-size: 2rem;
+    --md-icon-optical-size: 24;
+  }
+  &.medium {
+    font-size: 4rem;
+    --md-icon-optical-size: 40;
+  }
+  &.large {
+    font-size: 6rem;
+    --md-icon-optical-size: 48;
+  }
 }
+
+// One-off family overrides. These only change --md-icon-font so the
+// inherited fill / weight / grade / opsz still apply.
+.material-symbols-outlined { --md-icon-font: var(--md-icon-font-outlined); }
+.material-symbols-rounded { --md-icon-font: var(--md-icon-font-rounded); }
+.material-symbols-sharp { --md-icon-font: var(--md-icon-font-sharp); }
+
+.icon-filled { --md-icon-fill: 1; }

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/_lightbox.scss

@@ -6,6 +6,10 @@
   position: relative;
   transition: opacity .4s;
   backface-visibility: hidden;
+  // Same 12px as .responsive-img. Exclude .circle so a disc stays a disc.
+  &:not(.circle) {
+    border-radius: 12px;
+  }
 
   &:hover {
     &:not(.active) {

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,11 +117,29 @@ 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;
     }
   }
 
+  // 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 {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    align-self: center;
+    flex: 1 1 auto;
+    min-width: 0;
+    list-style: none;
+    margin: 0;
+    padding-inline: 12px;
+  }
+
   > nav:not(.tabs) > form {
     display: flex;
     flex: 1 1 auto;
@@ -278,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;
 
@@ -297,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;
@@ -333,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;
 }