maverick-wave 5.22.0 → 5.24.0

package/src/partials/section-head-container.html

@@ -0,0 +1,74 @@
+<h3 class="mw-section-subtitle">Section Head</h3>
+
+<p class="mw-text-muted mw-mb-6">
+  The opening of a section: a hairline rule, a mark sitting on its left end, the
+  title, and the line that says what follows. Everything starts at one edge -
+  centred body copy moves its own left edge with every line break, so the eye
+  has to find the start of each line instead of jumping to a fixed position.
+  Fine for a heading, tiring from the third line on.
+</p>
+
+<div class="mw-grid-1">
+  <div>
+    <h3 class="mw-mb-4">Title, Lead and Mark</h3>
+    <div class="mw-card mw-card-simple">
+      <div class="mw-section-head">
+        <h2 class="mw-section-head-title">Foundations</h2>
+        <p class="mw-section-head-intro">
+          The raw material - type, color, spacing and the small utilities
+          everything else is built from. The lead stops at 65 characters, or at
+          four fifths of the container, whichever comes first.
+        </p>
+      </div>
+      <p class="mw-mb-0">The content of the section starts here.</p>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-mb-4">Numbered</h3>
+    <p class="mw-text-muted mw-mb-4">
+      <code>mw-section-head-numbered</code> counts in the browser, so no page
+      keeps its own running order in the markup. The number closes the rule the
+      mark opens, and the counter restarts per <code>mw-main</code>. Opt-in: a
+      single section on a legal page numbered "01" is noise.
+    </p>
+    <div class="mw-card mw-card-simple">
+      <div class="mw-section-head mw-section-head-numbered">
+        <h2 class="mw-section-head-title">About me</h2>
+        <p class="mw-section-head-intro">
+          A section head without a lead works the same way - the next one below
+          shows it.
+        </p>
+      </div>
+
+      <div class="mw-section-head mw-section-head-numbered">
+        <h2 class="mw-section-head-title">Contact</h2>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-mb-4">Colored Mark</h3>
+    <p class="mw-text-muted mw-mb-4">
+      The mark is the one colored thing in the head, so it is where a section
+      picks up a tone: <code>mw-section-head-secondary</code>,
+      <code>-success</code>, <code>-warning</code>, <code>-danger</code> and
+      <code>-info</code>. Its length is
+      <code>--mw-section-head-mark-width</code> (80px), the gap to the content
+      below <code>--mw-section-head-gap</code>.
+    </p>
+    <div class="mw-card mw-card-simple">
+      <div class="mw-section-head mw-section-head-secondary">
+        <h2 class="mw-section-head-title">Secondary</h2>
+      </div>
+
+      <div class="mw-section-head mw-section-head-danger">
+        <h2 class="mw-section-head-title">Danger</h2>
+      </div>
+
+      <div class="mw-section-head mw-section-head-success">
+        <h2 class="mw-section-head-title">Success</h2>
+      </div>
+    </div>
+  </div>
+</div>

package/src/scss/abstracts/_functions.scss

@@ -23,17 +23,48 @@
 // Only the slope is in vw: a size in vw alone ignores the reader's font size and
 // stops responding to zoom, the rem term is what keeps that alive.
 @function fluid($min, $max, $from: 'xs', $to: 'md') {
-  $min-rem: _to-rem($min, 'min');
-  $max-rem: _to-rem($max, 'max');
-  $vw-from: math.div(map.get(v.$breakpoints, $from), 16px);
-  $vw-to: math.div(map.get(v.$breakpoints, $to), 16px);
+  @return _ramp(
+    _to-rem($min, 'min'),
+    _to-rem($max, 'max'),
+    math.div(map.get(v.$breakpoints, $from), 16px),
+    math.div(map.get(v.$breakpoints, $to), 16px),
+    vw
+  );
+}
+
+// The same ramp against the container instead of the viewport. For anything
+// inside a `@container` block: sizing there off vw means a 440px card on a
+// 1400px screen takes the width a 900px card was measured for, which is the
+// mismatch container queries exist to remove. The endpoints are container
+// widths rather than breakpoint names, because a container has no breakpoints.
+@function fluid-container($min, $max, $from, $to) {
+  $from-rem: _to-rem($from, 'from');
+  $to-rem: _to-rem($to, 'to');
+
+  @if $from-rem == $to-rem {
+    @error "fluid-container(): $from and $to must differ, both are #{$from}.";
+  }
+
+  @return _ramp(
+    _to-rem($min, 'min'),
+    _to-rem($max, 'max'),
+    $from-rem,
+    $to-rem,
+    cqi
+  );
+}
 
-  $slope: math.div($max-rem - $min-rem, $vw-to - $vw-from);
-  $intercept: $min-rem - $slope * $vw-from;
+// Both of the above draw the same line through (from, min) and (to, max) and
+// disagree only on what measures the axis. Shared so a change to the rem term -
+// the part that keeps the size responding to zoom - cannot reach one and miss
+// the other.
+@function _ramp($min-rem, $max-rem, $from-rem, $to-rem, $unit) {
+  $slope: math.div($max-rem - $min-rem, $to-rem - $from-rem);
+  $intercept: $min-rem - $slope * $from-rem;
 
   @return clamp(
     #{$min-rem}rem,
-    #{_round4($intercept)}rem + #{_round4($slope * 100)}vw,
+    #{_round4($intercept)}rem + #{_round4($slope * 100)}#{$unit},
     #{$max-rem}rem
   );
 }

package/src/scss/base/_base.scss

@@ -159,7 +159,12 @@
     // Point `--mw-section-padding-block` at it to switch a page over - a choice
     // like the presets are, not the default.
     --mw-section-padding-fluid: #{fluid(spacing('7'), spacing('12'), $to: 'xl')};
-    --mw-section-title-gap: #{spacing('7')};
+    // The section head: the gap it leaves to the content below, the space
+    // between its rule and the title, and the mark sitting on that rule.
+    --mw-section-head-gap: #{spacing('10')};
+    --mw-section-head-pad: #{spacing('6')};
+    --mw-section-head-mark-width: 80px;
+    --mw-section-head-mark-color: var(--mw-primary-color);
     --mw-scroll-hint-offset: #{spacing('9')};
     --mw-scroll-hint-inline: var(--mw-container-gutter);
     --mw-scroll-hint-reserve: #{spacing('10')};

package/src/scss/components/_contact.scss

@@ -0,0 +1,29 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  // The block that says how to reach someone - postal address, phone, mail.
+  // Belongs on an <address>, which is what the one font-style is for: the
+  // element is italic by default, and nobody sets an address in italics.
+  .mw-contact {
+    font-style: normal;
+    display: grid;
+    gap: spacing('3');
+
+    > * {
+      margin: 0;
+    }
+
+    &-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: spacing('1') spacing('4');
+    }
+
+    // Sized rather than auto, so the values line up under each other however
+    // long the words in front of them are
+    &-label {
+      flex: 0 0 5rem;
+      color: var(--mw-text-muted-color);
+    }
+  }
+}

package/src/scss/components/_date-stamp.scss

@@ -0,0 +1,141 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  // Every fluid value here runs the same ramp: from the width the two-column
+  // layout starts at to the width a day card stops growing at. Against the
+  // container, not the viewport - the layout switch below is a container query,
+  // and sizing off vw would hand a narrow card in a wide window the
+  // measurements of a wide one.
+  @function _stamp-ramp($min, $max) {
+    @return fluid-container($min, $max, $mw-card-wide, 900px);
+  }
+
+  // Named because the today fill cancels the paddings to reach the card border,
+  // and the price variant repeats the track list - two copies would drift apart.
+  $_mw-date-stamp-pad-top: _stamp-ramp(spacing('4'), spacing('6'));
+  $_mw-date-stamp-pad-bottom: _stamp-ramp(spacing('3'), spacing('5'));
+  $_mw-date-stamp-day-col: _stamp-ramp(4.25rem, 7rem);
+  $_mw-date-stamp-gap: _stamp-ramp(spacing('4'), spacing('7'));
+  $_mw-date-stamp-day-size: _stamp-ramp('xl', '3xl');
+
+  // The date on a dated card - an event, a changelog entry, a day on a menu.
+  // Narrow, it is a line above the title. Wide, it turns into a column beside
+  // the content, which is the only thing that fills the right half of a card
+  // that has a whole row to itself.
+  .mw-date-stamp {
+    display: flex;
+    align-items: baseline;
+    gap: spacing('3');
+    margin-bottom: spacing('4');
+    color: var(--mw-text-muted-color);
+
+    &-day {
+      font-size: font-size('sm');
+      font-weight: font-weight('bold');
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    &-date {
+      font-size: font-size('sm');
+      font-variant-numeric: tabular-nums;
+    }
+
+    // A fill, not a text colour: the price on the same card is already primary,
+    // and two blues compete where one would point. The padding is pulled back
+    // out again so the fill bleeds around the line instead of indenting it.
+    &-today {
+      padding: spacing('2') spacing('3');
+      margin-inline: spacing('-3');
+      margin-block-start: spacing('-2');
+      border-radius: radius('sm') radius('lg') radius('sm') radius('lg');
+      background: var(--mw-primary-color);
+      color: var(--mw-primary-accent-text-color);
+    }
+  }
+
+  // No box of its own until there are two columns to be one of, so the card body
+  // keeps seeing the title, the text and the price as its own children - which
+  // is what mw-offer and mw-card-body's last-child rule both select on
+  .mw-date-stamp-body {
+    display: contents;
+  }
+
+  @container mw-card (width >= #{$mw-card-wide}) {
+    // The rule sits here and not in _cards.scss because the stamp is the guest -
+    // the card body's own single column is right for everything that is not one
+    .mw-card-body:has(> .mw-date-stamp) {
+      display: grid;
+      grid-template-columns: $_mw-date-stamp-day-col minmax(0, 1fr);
+      // On the same curve as the column, so the dish keeps the width the day
+      // and the price give up rather than losing it again to the gutters
+      column-gap: $_mw-date-stamp-gap;
+      padding-block: $_mw-date-stamp-pad-top $_mw-date-stamp-pad-bottom;
+    }
+
+    // A third track, for the one price that covers the whole day - it is what the
+    // right half of a wide card is otherwise spent on. Only when there is a
+    // price: with a dish per row it travels with its dish, and an empty track
+    // would still charge the card a gap.
+    .mw-card-body:has(> .mw-date-stamp):has(> .mw-price) {
+      grid-template-columns: $_mw-date-stamp-day-col minmax(0, 1fr) auto;
+    }
+
+    // The row is left to stretch to the body, so a today fill can span the whole
+    // card - which means each column has to centre its own content instead
+    .mw-date-stamp-body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    // The card body zeroes its own last child, but the wrapper hides ours from
+    // that rule - without this a trailing tag row adds a paragraph margin
+    .mw-date-stamp-body > *:last-child {
+      margin-bottom: spacing('0');
+    }
+
+    // Beside the dish it prices, not under the description that follows it. The
+    // second selector only exists to outrank mw-offer, which pushes a price to
+    // the bottom of the card and ties with the first on specificity alone.
+    .mw-card-body:has(> .mw-date-stamp) > .mw-price,
+    .mw-offer > .mw-card-body:has(> .mw-date-stamp) > .mw-price {
+      align-self: center;
+      justify-self: end;
+      margin-top: spacing('0');
+      padding-top: spacing('0');
+      text-align: right;
+    }
+
+    .mw-date-stamp {
+      flex-direction: column;
+      align-items: flex-start;
+      // Stretched to the row, so the day and the date centre against the title
+      // and description beside them rather than hanging off the first line
+      justify-content: center;
+      gap: spacing('2');
+      margin-bottom: spacing('0');
+    }
+
+    // Top edge of the card to its bottom one: the body's padding is handed back
+    // so the fill reaches the border. Only the two left corners are rounded, and
+    // to the card's own arc less the 1px it sits inside - the right edge is an
+    // inside edge and a cut is what reads as one.
+    .mw-date-stamp-today {
+      margin-block: calc(-1 * #{$_mw-date-stamp-pad-top})
+        calc(-1 * #{$_mw-date-stamp-pad-bottom});
+      margin-inline: calc(-1 * #{spacing('5')}) 0;
+      padding-block: $_mw-date-stamp-pad-top $_mw-date-stamp-pad-bottom;
+      padding-inline: spacing('5');
+      border-radius: calc(#{radius-sharp()} - 1px) 0 0
+        calc(#{radius('xl')} - 1px);
+    }
+
+    .mw-date-stamp-day {
+      // Tracks the column it sits in, or it would outgrow it on the way down
+      font-size: $_mw-date-stamp-day-size;
+      line-height: 1;
+      letter-spacing: 0.02em;
+    }
+  }
+}

package/src/scss/components/_index.scss

@@ -11,7 +11,9 @@
 @forward 'cards';
 @forward 'code';
 @forward 'coming-soon';
+@forward 'contact';
 @forward 'content-slider';
+@forward 'date-stamp';
 @forward 'divider';
 @forward 'dropdown';
 @forward 'empty-state';
@@ -21,6 +23,7 @@
 @forward 'kanban';
 @forward 'kbd';
 @forward 'lang-switch';
+@forward 'leader-row';
 @forward 'links';
 @forward 'lists';
 @forward 'localhost-indicator';

package/src/scss/components/_leader-row.scss

@@ -0,0 +1,89 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  // Dots on the baseline, not under the descenders; em so they follow font-size
+  $_mw-leader-baseline-lift: 0.34em;
+
+  // A label on the left, its value on the right, a dotted line bridging the
+  // gap. The line is the whole point: over a wide row the eye loses track of
+  // which value belongs to which label, which is why every printed menu, index
+  // and invoice draws one.
+  //
+  // The leader is the row's own ::before rather than an element in the markup.
+  // A generated box on a flex container is a flex item, so "order" can place it
+  // between the two spans - and generated content stays out of the
+  // accessibility tree, where a filler element would need aria-hidden.
+  .mw-leader-row {
+    --mw-leader-row-style: dotted;
+    --mw-leader-row-width: 2px;
+    --mw-leader-row-color: var(--mw-border);
+
+    display: flex;
+    // The values never shrink, so without a wrap the label is the only thing
+    // left to give - and it gives until it is one letter per line
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: spacing('3');
+    margin: 0;
+
+    &::before {
+      content: '';
+      order: 1;
+      flex: 1 1 auto;
+      // Keeps a stub of line visible when label and value nearly fill the row
+      min-width: spacing('6');
+      border-bottom: var(--mw-leader-row-width) var(--mw-leader-row-style)
+        var(--mw-leader-row-color);
+      margin-bottom: $_mw-leader-baseline-lift;
+    }
+
+    &-label {
+      order: 0;
+      // No min-width override: the default floor is the longest word, so the
+      // label wraps between words and stops there instead of going to nothing.
+      // Past that floor the row wraps rather than the label shrinking further.
+      //
+      // The row also works as a dl group, and a dd carries 40px of browser margin
+      margin: 0;
+    }
+
+    &-value {
+      order: 2;
+      flex-shrink: 0;
+      margin: 0;
+      // A price or a page number must not break, and a column of them only
+      // lines up with tabular figures.
+      white-space: nowrap;
+      font-variant-numeric: tabular-nums;
+    }
+
+    // Two values in one row read as a single long range with only a gap between
+    // them. The mark takes the leader's colour, so retuning a row moves both.
+    // It hangs off the first of the pair, not the second: once the row wraps, a
+    // trailing mark reads as "continues below" and a leading one as a slip.
+    &-value:has(+ &-value)::after {
+      content: '|';
+      margin-left: spacing('3');
+      color: var(--mw-leader-row-color);
+    }
+
+    &-dashed {
+      --mw-leader-row-style: dashed;
+    }
+
+    &-solid {
+      --mw-leader-row-style: solid;
+      --mw-leader-row-width: 1px;
+    }
+
+    &-top {
+      align-items: flex-start;
+
+      &::before {
+        // flex-start pins the leader to the top edge, so it drops to the first
+        // line's baseline itself instead of being lifted off the last one
+        margin: calc(1lh - #{$_mw-leader-baseline-lift}) 0 0;
+      }
+    }
+  }
+}

package/src/scss/components/_pricing.scss

@@ -91,6 +91,10 @@
   }
 
   // Size. Only the token moves - see the `em` above.
+  .mw-price-xs {
+    --mw-price-size: #{font-size('lg')};
+  }
+
   .mw-price-sm {
     --mw-price-size: #{font-size('xl')};
   }

package/src/scss/layout/_grid.scss

@@ -159,6 +159,12 @@ $_column-steps-lg: (
     grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
   }
 
+  // Every row as tall as the tallest rather than as tall as its own contents.
+  // A modifier, not a grid of its own - it needs one of the above to size.
+  .mw-grid-even {
+    grid-auto-rows: 1fr;
+  }
+
   .mw-grid-lg {
     @extend %grid-base-lg;
   }

package/src/scss/layout/_main.scss

@@ -8,6 +8,25 @@
     min-height: 100dvh;
     display: flex;
     flex-direction: column;
+    // Numbered section heads count per page body, so a second main on the same
+    // document starts at 01 again instead of continuing the first one.
+    counter-reset: mw-section-head;
+  }
+
+  // Set in from the container it sits in, and giving that back a step at a time
+  // as the screen shrinks. For a column of full-width cards, which at 1200px
+  // leaves more empty card than content.
+  .mw-container-narrow {
+    width: 80%;
+    margin-inline: auto;
+
+    @include media-down('lg') {
+      width: 90%;
+    }
+
+    @include media-down('md') {
+      width: 100%;
+    }
   }
 
   .mw-container {

package/src/scss/layout/_section.scss

@@ -1,65 +1,135 @@
 @use '../abstracts' as *;
 
 @layer mw.layout {
-  // The rule under a section heading. Shared, so the two levels cannot drift
-  // apart in width and weight - the subtitle carried the wider mark, which reads
-  // as the louder one under the smaller heading. Colour is where they do part.
-  @mixin _section-rule(
-    $width,
-    $height,
-    $offset,
-    $color: var(--mw-primary-text-color)
-  ) {
-    &::after {
+  // The head of a section: a rule, a title, and the line that says what the
+  // section is. All three left-aligned, and that is the whole point of the
+  // component. Centred running text moves its own left edge with every line
+  // break, so the eye has to find the start of each line instead of jumping
+  // to a fixed position - fine for a heading, tiring from the third line of
+  // body copy on. Aligned, title, lead and content below share one edge, and
+  // that edge is what holds a section together.
+  .mw-section-head {
+    position: relative;
+    margin-bottom: var(--mw-section-head-gap);
+    padding-top: var(--mw-section-head-pad);
+    // Two pixels and not one: the diagonal pattern of mw-section-alternate
+    // swallows a hairline, and the rule is the thing that has to survive on
+    // every background the framework paints.
+    border-top: 2px solid var(--mw-border);
+
+    // The rule stays quiet so it reads as a boundary and not as a border, and
+    // quiet is still hard to see on a patterned band. Hence the mark:
+    // a short, thicker piece of the accent colour sitting on the line at the
+    // edge everything else starts from. It carries the weight the full-width
+    // rule deliberately does not have.
+    &::before {
       content: '';
       position: absolute;
-      bottom: $offset;
-      left: 50%;
-      transform: translateX(-50%);
-      width: $width;
-      height: $height;
+      top: 0;
+      left: 0;
+      transform: translateY(-50%);
+      width: var(--mw-section-head-mark-width);
+      height: 4px;
       border-radius: radius('xs');
-      background: $color;
+      background: var(--mw-section-head-mark-color);
     }
   }
 
-  .mw-section-title {
-    font-size: fluid('2xl', '3xl', $to: 'sm');
-    margin-bottom: var(--mw-section-title-gap);
-    text-align: center;
-    position: relative;
-
-    @include _section-rule(56px, 3px, spacing('-3'));
+  .mw-section-head-title {
+    margin: spacing('0');
+    font-size: fluid('2xl', '4xl', $to: 'lg');
+    line-height: 1;
+    letter-spacing: -0.02em;
+    text-wrap: balance;
   }
 
-  // The lead line under a section title. Every landing page writes this
-  // paragraph, and it always wants the same four things: centred, muted,
-  // narrower than the container so it reads as a line rather than a block, and
-  // pulled up toward the title it belongs to - the title's gap is sized for the
-  // content below, not for its own subtitle.
-  .mw-section-intro {
-    max-width: 46rem;
-    margin: spacing('-3') auto spacing('9');
+  // Two limits, and the narrower one wins: 65 characters is where a line stops
+  // being comfortable, four fifths is what keeps the paragraph from filling the
+  // container edge to edge on a wide screen. Below md only the character count
+  // is left - four fifths of a phone is a column nothing fits in.
+  .mw-section-head-intro {
+    max-width: 75ch;
+    margin: spacing('4') spacing('0') spacing('0');
     font-size: font-size('md');
+    line-height: 1.6;
     color: var(--mw-text-muted-color);
-    text-align: center;
-    text-wrap: balance;
+    text-wrap: pretty;
+
+    @include media-up('md') {
+      max-width: min(80%, 70ch);
+    }
+
+    p {
+      margin: spacing('0');
+    }
+
+    p + p {
+      margin-top: spacing('4');
+    }
+  }
+
+  // Opt-in, because a single section on a legal page numbered "01" is noise.
+  // The browser counts, so no page keeps its own running order in the markup -
+  // and the number sits at the far end of the rule rather than above the title:
+  // the mark opens the line, the number closes it, and the title keeps the
+  // first thing read on the left.
+  .mw-section-head-numbered {
+    counter-increment: mw-section-head;
+
+    &::after {
+      content: counter(mw-section-head, decimal-leading-zero);
+      position: absolute;
+      top: var(--mw-section-head-pad);
+      right: 7px;
+      color: var(--mw-text-muted-color);
+      font-size: font-size('sm');
+      font-weight: font-weight('medium');
+      line-height: 1;
+      // The tracking sits after the last digit too, so it has to come back off
+      // the right or the number stands a space short of the edge it aligns to.
+      letter-spacing: 0.2em;
+    }
+
+    // The number owns the right end of the first line - a long title runs into
+    // it otherwise, and on a phone that is one word, not a rare case.
+    .mw-section-head-title {
+      padding-right: spacing('10');
+    }
   }
 
+  // The mark is the one coloured thing in the head, so it is where a section
+  // picks up a tone - a danger notice, a success story, a section that belongs
+  // to a product colour.
+  $_mw-section-head-colors: (secondary, success, warning, danger, info);
+
+  @each $name in $_mw-section-head-colors {
+    .mw-section-head-#{$name} {
+      --mw-section-head-mark-color: var(--mw-#{$name}-color);
+    }
+  }
+
+  // The level below the head: the boundary inside a section, not around it.
+  // Same left edge, and the rule shrinks to a mark of its own so the two
+  // levels read as a hierarchy rather than as two of the same thing.
   .mw-section-subtitle {
     font-size: fluid('xl', '2xl', $to: 'sm');
-    // The step above a demo gap of spacing('6') - at spacing('8') the boundary
-    // between two components read like the one between two demos
-    margin: spacing('10') spacing('0') spacing('6') spacing('0');
-    text-align: center;
+    // One step above the demo gap of spacing('6'), and that step is the whole
+    // margin the boundary between two components has over the one between two
+    // demos - the heading leans toward what it names, not toward what came
+    // before it.
+    margin: spacing('8') spacing('0') spacing('4') spacing('0');
     position: relative;
 
-    @include _section-rule(
-      32px,
-      2px,
-      spacing('-2'),
-      var(--mw-secondary-text-color)
-    );
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: spacing('-2');
+      left: 0;
+      width: 32px;
+      height: 2px;
+      border-radius: radius('xs');
+      background: var(--mw-secondary-text-color);
+    }
   }
 
   // Sticky, because the strip is the only way back: inside a long section the
@@ -135,7 +205,7 @@
     // The section boundary steps down to 56px on a phone, so the component
     // boundary steps with it or the two stop being distinguishable
     .mw-section-subtitle {
-      margin-top: spacing('7');
+      margin-top: spacing('6');
     }
   }