@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/sass/components/_modal.scss

@@ -0,0 +1,208 @@
+@use "../abstracts" as *;
+
+// Dialogs.
+//
+// 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.
+//
+// Tokens follow https://m3.material.io/components/dialogs/specs
+//   container    surface, 28dp corners, 280–560dp, elevation 3
+//   headline     headline-small / on-surface
+//   body         body-medium / on-surface-variant
+//   icon         24dp, on-secondary
+//   actions      end-aligned, 8dp gap
+//   scrim        32% + 12px blur
+//   padding      24dp
+
+dialog,
+.modal {
+  --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;
+  --md-comp-basic-dialog-container-max-width: 560px;
+  --md-comp-basic-dialog-sheet-width: 400px;
+  --md-comp-basic-dialog-scrim-blur: 12px;
+
+  box-sizing: border-box;
+  width: min(var(--md-comp-basic-dialog-container-max-width), calc(100% - 48px));
+  min-width: min(var(--md-comp-basic-dialog-container-min-width), calc(100% - 48px));
+  max-height: min(70vh, calc(100% - 48px));
+  margin: auto;
+  padding: 0;
+  border: none;
+  border-radius: var(--md-comp-basic-dialog-container-shape);
+  background-color: var(--md-comp-basic-dialog-container-color);
+  color: var(--md-sys-color-on-surface);
+  outline: none;
+  @include z-depth("3");
+
+  &::backdrop {
+    background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+    backdrop-filter: blur(var(--md-comp-basic-dialog-scrim-blur));
+  }
+}
+
+// showModal() puts the dialog in the top layer but does not lock the
+// document scroller. :modal is the modal-only match — a modeless
+// dialog.show() must not freeze the page.
+html:has(dialog:modal) {
+  overflow: hidden;
+}
+
+dialog[open],
+.modal[open] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  overscroll-behavior: contain;
+}
+
+// Optional leading icon (M3 basic dialog).
+dialog > i:first-child {
+  flex: 0 0 auto;
+  align-self: center;
+  margin: 24px 24px 0;
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  color: var(--md-sys-color-secondary);
+}
+
+dialog > :is(h1, h2, h3, h4, h5, h6),
+.modal-header {
+  flex: 0 0 auto;
+  margin: 0;
+  padding: 24px 24px 16px;
+  font-family: var(--md-sys-typescale-headline-small-font-family-name);
+  font-size: var(--md-sys-typescale-headline-small-font-size);
+  font-weight: var(--md-sys-typescale-headline-small-font-weight);
+  line-height: var(--md-sys-typescale-headline-small-line-height);
+  letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
+  color: var(--md-sys-color-on-surface);
+}
+
+dialog > i:first-child + :is(h1, h2, h3, h4, h5, h6) {
+  padding-top: 16px;
+  text-align: center;
+}
+
+dialog > p,
+dialog > div,
+.modal-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  margin: 0;
+  padding: 0 24px 16px;
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
+  color: color-mix(in oklab, currentColor 72%, transparent);
+}
+
+dialog > :is(h1, h2, h3, h4, h5, h6) + p,
+.modal-header + .modal-content {
+  padding-top: 0;
+}
+
+// Action row. form[method=dialog] is the native close mechanism.
+dialog > :is(form, nav):last-child,
+.modal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  margin: 0;
+  padding: 8px 16px 16px;
+  border: 0;
+  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 {
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  min-width: 0;
+  max-height: none;
+  margin: 0;
+  border-radius: 0;
+}
+
+// Sheets. Docked to one edge; the inner corners keep the dialog shape,
+// 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 {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  max-height: 50%;
+  margin: auto 0 0;
+  border-radius: var(--md-comp-basic-dialog-container-shape)
+    var(--md-comp-basic-dialog-container-shape) 0 0;
+}
+
+dialog.top,
+dialog.top-sheet,
+.modal.top-sheet {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  max-height: 50%;
+  margin: 0 0 auto;
+  border-radius: 0 0 var(--md-comp-basic-dialog-container-shape)
+    var(--md-comp-basic-dialog-container-shape);
+}
+
+dialog.left,
+dialog.left-sheet,
+.modal.left-sheet,
+dialog.right,
+dialog.right-sheet,
+.modal.right-sheet {
+  float: none !important;
+  width: min(var(--md-comp-basic-dialog-sheet-width), 85%);
+  max-width: none;
+  height: auto;
+  max-height: none;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  inset-block: 0;
+}
+
+dialog.left,
+dialog.left-sheet,
+.modal.left-sheet {
+  inset-inline-start: 0;
+  inset-inline-end: auto;
+  border-radius: 0 var(--md-comp-basic-dialog-container-shape)
+    var(--md-comp-basic-dialog-container-shape) 0;
+}
+
+dialog.right,
+dialog.right-sheet,
+.modal.right-sheet {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+  border-radius: var(--md-comp-basic-dialog-container-shape) 0 0
+    var(--md-comp-basic-dialog-container-shape);
+}

package/src/sass/components/_navbar.scss

@@ -0,0 +1,345 @@
+@use "../abstracts" as *;
+
+// Top and bottom app bars.
+//
+// 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
+// trailing actions, <menu> / <ul> hold text destinations. Helpers are only
+// for variants the markup cannot express: .center, .medium, .large, .fixed.
+//
+// Tokens follow the M3 top-app-bar / bottom-app-bar specs
+// (https://m3.material.io/components/app-bars/specs):
+//   container      surface, 64dp small / 112 medium / 152 large / 80 bottom
+//   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
+
+header:has(> nav) {
+  --md-comp-top-app-bar-container-color: var(--md-sys-color-surface);
+  --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.
+  --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-shape: 0;
+
+  background-color: 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) {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--md-comp-top-app-bar-container-height);
+    padding-inline: 4px;
+    margin: 0;
+  }
+
+  > nav:not(.tabs) > :is(h1, h2, h3, h4, h5, h6) {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    padding-inline: 4px 12px;
+
+    // 16dp from the container edge when there is no leading icon.
+    &:first-child {
+      padding-inline-start: 12px;
+    }
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: inherit;
+    font-family: var(--md-sys-typescale-title-large-font-family-name);
+    font-size: var(--md-sys-typescale-title-large-font-size);
+    font-weight: var(--md-sys-typescale-title-large-font-weight);
+    line-height: var(--md-sys-typescale-title-large-line-height);
+    letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+  }
+
+  // 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) {
+    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-comp-top-app-bar-leading-icon-color);
+    cursor: pointer;
+    appearance: none;
+    font: inherit;
+    text-decoration: none;
+    @include focus-visible;
+
+    > i {
+      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);
+    }
+
+    &:hover {
+      background-color: color-mix(in oklab, currentColor 8%, transparent);
+    }
+
+    &:active {
+      background-color: color-mix(in oklab, currentColor 10%, transparent);
+    }
+  }
+
+  // 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) {
+    @extend %app-bar-destination;
+  }
+
+  > nav:not(.tabs) > :is(menu, ul) {
+    display: flex;
+    align-items: stretch;
+    align-self: stretch;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    > li {
+      display: flex;
+      align-items: stretch;
+    }
+
+    a {
+      @extend %app-bar-destination;
+    }
+  }
+
+  > nav:not(.tabs) > form {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    align-self: stretch;
+    min-width: 0;
+    margin: 0;
+
+    input {
+      flex: 1 1 auto;
+      min-width: 0;
+      height: 100%;
+      margin: 0;
+      padding: 0 16px;
+      border: 0;
+      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);
+
+      &:focus,
+      &:focus-visible {
+        outline: none;
+        border: 0;
+        box-shadow: none;
+      }
+    }
+  }
+
+  // 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 {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 12px;
+  color: inherit;
+  text-decoration: none;
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  font-size: var(--md-sys-typescale-label-large-font-size);
+  font-weight: var(--md-sys-typescale-label-large-font-weight);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+  @include focus-visible;
+
+  &:hover:not(.active) {
+    background-color: color-mix(in oklab, currentColor 8%, transparent);
+  }
+
+  &.active {
+    background-color: color-mix(in oklab, currentColor 10%, transparent);
+  }
+}
+
+// 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) {
+  position: relative;
+  justify-content: space-between;
+
+  > :is(h1, h2, h3, h4, h5, h6) {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    flex: 0 1 auto;
+    max-width: calc(100% - 96px);
+    padding-inline: 16px;
+    text-align: center;
+    pointer-events: none;
+  }
+}
+
+// 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) {
+  flex-wrap: wrap;
+  align-content: flex-start;
+  height: auto;
+
+  > :is(h1, h2, h3, h4, h5, h6) {
+    order: 1;
+    flex: 1 0 100%;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+  }
+}
+
+header.medium:has(> nav) > nav:not(.tabs) {
+  min-height: 112px;
+  padding-bottom: 16px;
+
+  > :is(h1, h2, h3, h4, h5, h6) {
+    padding: 4px 12px 0 16px;
+    font-family: var(--md-sys-typescale-headline-small-font-family-name);
+    font-size: var(--md-sys-typescale-headline-small-font-size);
+    font-weight: var(--md-sys-typescale-headline-small-font-weight);
+    line-height: var(--md-sys-typescale-headline-small-line-height);
+    letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
+  }
+}
+
+header.large:has(> nav) > nav:not(.tabs) {
+  min-height: 152px;
+  padding-bottom: 28px;
+
+  > :is(h1, h2, h3, h4, h5, h6) {
+    padding: 12px 12px 0 16px;
+    font-family: var(--md-sys-typescale-headline-medium-font-family-name);
+    font-size: var(--md-sys-typescale-headline-medium-font-size);
+    font-weight: var(--md-sys-typescale-headline-medium-font-weight);
+    line-height: var(--md-sys-typescale-headline-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
+  }
+}
+
+// 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) {
+  position: sticky;
+  top: 0;
+  z-index: 997;
+  animation: top-app-bar-scroll linear both;
+  animation-timeline: scroll(root);
+  animation-range: 0 8px;
+}
+
+@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;
+  }
+}

package/src/{scss/layout/_footer.scss → sass/components/_page-footer.scss}

@@ -1,10 +1,11 @@
-// Footer
+@use "../abstracts" as *;
+
 .page-footer {
   margin-top: 5rem;
   padding-top: 3rem;
   border-top: 1px dashed var(--md-sys-color-outline-variant);
   p {
-    color: var(--md-sys-color-outline-light);
+    color: var(--md-sys-color-outline);
   }
   a {
     color: var(--md-sys-color-primary);
@@ -18,9 +19,9 @@
     justify-content: space-between;
     padding: 10px 0px;
   }
+}
 
-  ul {
-    padding-left: 0;
-    list-style-type: none;
-  }
+.page-footer ul {
+  padding-left: 0;
+  list-style-type: none;
 }

package/src/{scss → sass}/components/_pagination.scss

@@ -1,5 +1,4 @@
-@use '../foundation/variables' as *;
-@use '../foundation/mixins' as *;
+@use "../abstracts" as *;
 
 .pagination {
   li {
@@ -27,8 +26,10 @@
     display: inline-block;
     float: none;
   }
+}
 
-  @media #{$medium-and-down} {
+@include bp-down("large") {
+  .pagination {
     width: 100%;
 
     li.prev,

package/src/{scss → sass}/components/_parallax.scss

@@ -1,4 +1,7 @@
-// Parallax
+@use "../abstracts" as *;
+
+// Paired with components/parallax.ts, which positions the image on scroll.
+
 .parallax-container {
   position: relative;
   overflow: hidden;