maverick-wave 5.21.0 → 5.23.0

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/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/_header-reveal.scss

@@ -1,18 +1,10 @@
-// Floating free over a picture, a control has to carry its own edge - the burger
-// and the login button bring a primary surface, the theme toggle is a dark pill
-// that a dark photo swallows. It travels with the float and not with the class,
-// or the ring would still be there in the arrived bar, on one control and not
-// its neighbour. Fixed values and not the elevation ramp, the same call the
-// parallax shadow makes: this lands on the picture, not on a theme surface, and
-// the light theme cuts its shadows for paper.
+// Carried by the float and not by the class, or the ring would still be there in
+// the arrived bar. Fixed values and not the elevation ramp: this lands on a
+// picture, not on a theme surface, and the light theme cuts its shadows for paper.
 $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
 
 @layer mw.layout {
-  // For a page that opens on a full-bleed picture and wants nothing on top of
-  // it: the bar starts above the screen and rides in over the first stretch of
-  // scroll. Inside the @supports, so a browser without scroll timelines gets a
-  // normal header rather than none at all.
-  //
+  // The bar starts above the screen and rides in over the first stretch of scroll.
   // Its own file, and not next to .mw-header: that one uses the `animation`
   // shorthand, which a consumer bundler folds together with a timeline into a
   // declaration no browser accepts.
@@ -26,12 +18,8 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
         animation-range: 0 420px;
       }
 
-      // Anything carrying mw-header-keep sits the ride out: the bar travels,
-      // the element travels the same distance back and stays where it is. The
-      // distance is the bar's own, so it waits at the position it will hold in
-      // the arrived bar - nothing jumps at the end, the bar just closes in
-      // behind it. For a login or burger button that has to be reachable while
-      // the hero is still untouched.
+      // The bar travels, a keep element travels the same distance back and stays
+      // put - for a burger that has to be reachable while the hero is untouched.
       .mw-header-reveal .mw-header-keep {
         animation-name: mw-header-keep;
         animation-timing-function: var(--mw-ease-out);
@@ -40,18 +28,14 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
         animation-range: 0 420px;
       }
 
-      // A group's opacity cannot be taken back by a child, so the fade has to
-      // go as soon as something is meant to stay visible through it. No loss:
-      // the bar is off screen for that stretch anyway, the fade only softened
-      // the last few pixels of the arrival.
+      // A group's opacity cannot be taken back by a child, so the fade goes as
+      // soon as something is meant to stay visible through it.
       .mw-header-reveal:has(.mw-header-keep) {
         animation-name: mw-header-slide;
       }
 
-      // The ribbon is glued under the bar, so it has to leave and arrive with
-      // it - left behind it would hang alone at the top of an otherwise clean
-      // hero. No class of its own: a ribbon on a page with a revealing header
-      // has no other sensible behaviour.
+      // Glued under the bar, so it leaves and arrives with it. No class of its
+      // own: a ribbon under a revealing header has no other sensible behaviour.
       body:has(.mw-header-reveal)
         .mw-announcement:not(.mw-announcement-static) {
         animation-name: mw-announcement-reveal;
@@ -63,9 +47,8 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
     }
   }
 
-  // Both cover the height of the pair, or the shorter traveller arrives first
-  // and the two come in as two things instead of one block. Without a ribbon
-  // that height is just the bar's.
+  // Both cover the height of the pair, or the shorter traveller arrives first and
+  // the two come in as two things instead of one block.
   .mw-header-reveal {
     --mw-header-reveal-offset: var(--mw-header-height);
   }
@@ -76,18 +59,12 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
     );
   }
 
-  // A keyboard reaches the chrome long before the first scroll does, and a focus
-  // ring on something that is off screen is WCAG 2.4.11 - so focus brings it
-  // back, either half of the pair pulling in the other. `!important` is the one
-  // author declaration that outranks a running animation; dropping
-  // `animation-name` instead leaves the element stuck on its last value, because
-  // a restarted scroll timeline only catches up on the next scroll.
-  //
-  // A keep element is on screen already and needs no rescue, so it is left out -
-  // otherwise a click on the theme toggle, which focuses it, would haul in the
-  // whole bar. It takes `:focus` on a descendant and not `:focus-within` on the
-  // header: within also matches every wrapper around the focused control, and no
-  // `:not()` on those can tell which one holds the keep.
+  // A focus ring on something off screen is WCAG 2.4.11, so focus brings the bar
+  // back. `!important` is the one author declaration that outranks a running
+  // animation; `animation-name: none` would strand the element on its last value
+  // until the next scroll. Keeps are left out - they are on screen already, and a
+  // click on the theme toggle would otherwise haul in the whole bar. `:focus` on a
+  // descendant and not `:focus-within`: that matches every wrapper too.
   body:has(
     .mw-header-reveal :focus:not(.mw-header-keep, .mw-header-keep *),
     .mw-announcement:focus-within
@@ -108,43 +85,36 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
     }
   }
 
-  // Same treatment while the panel is open. The panel hangs off the bar, so the
-  // bar has to be in place for it to open anywhere sensible - and the burger,
-  // which is the X from the moment the panel is out, has to stay on the burger's
-  // own position rather than a header height below it.
+  // The panel hangs off the bar, so the bar has to be in place - and the burger,
+  // which is the X while the panel is out, has to stay on its own position.
   //
-  // A class the script sets, and not `:has(.mw-navbar.open)`: this is the one
-  // rule in the file that has to hold on every engine, and `:has()` against a
-  // class toggled deep in the subtree is exactly where WebKit's style
-  // invalidation has been unreliable. The burger is the control that closes the
-  // panel - it cannot be the thing that waits for a repaint.
+  // A class the script sets, not `:has(.mw-navbar.open)`: the burger is the
+  // control that closes the panel and cannot wait for a selector re-match, which
+  // is where WebKit's invalidation has been unreliable.
   //
-  // The distance is set to zero rather than each position that reads it being
-  // overridden. Four mechanisms carry the pair - the bar's `top` and the keep
-  // element's `translate`, each once as a class and once as a keyframe - and
-  // every one of them resolves this one property, so zeroing it parks all four
-  // at the arrived position at once. Overriding the values instead means
-  // `!important` against a running animation, and WebKit does not reliably hand
-  // that win to the author: the bar came in, the burger kept its offset, and the
-  // X sat a header height below the panel it belongs to.
+  // Zeroing the distance rather than overriding each position that reads it: four
+  // mechanisms carry the pair - `top` and `translate`, each once as a class and
+  // once as a keyframe - and all four resolve this one property. Overriding the
+  // values instead pits `!important` against a running animation, which WebKit
+  // does not reliably hand to the author.
   body.mw-nav-open {
     .mw-header-reveal {
-      --mw-header-reveal-offset: 0px;
+      // The ribbon variant above raises the same property from a `:has()`, which
+      // counts its argument and outranks this rule - author against author, which
+      // every engine resolves the same way, not author against an animation.
+      --mw-header-reveal-offset: 0px !important;
       opacity: 1 !important;
     }
 
-    // Not carried by the offset: this one is pure decoration for a control
-    // floating over a picture, and there is no picture behind an open panel.
+    // Not carried by the offset, and there is no picture behind an open panel.
     .mw-header-keep {
       box-shadow: none !important;
     }
   }
 
-  // Older Safari and Firefox ship no scroll timelines, so there the script
-  // toggles these classes instead (main.js) - the same two positions,
-  // triggered instead of scrubbed. State and transition are separate because
-  // the script sets the state a frame earlier: together they would send the
-  // bar sliding away in front of the reader instead of having it gone already.
+  // No scroll timelines: the script toggles these classes instead (main.js).
+  // State and transition are separate because the script sets the state a frame
+  // earlier - together the bar would slide away in front of the reader.
   @media (prefers-reduced-motion: no-preference) {
     .mw-header-reveal.mw-header-away {
       top: calc(-1 * var(--mw-header-reveal-offset));
@@ -161,8 +131,7 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
     }
 
     .mw-header-driven {
-      // The shared list plus `top`, which is not in it - writing only `top`
-      // here would drop the header's own colour and shadow transitions.
+      // The shared list plus `top`: writing only `top` drops the bar's own.
       transition:
         var(--mw-transition),
         top var(--mw-duration-slow) var(--mw-ease-out);
@@ -188,12 +157,10 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
     }
   }
 
-  // `top` and not a transform: a transform on the header would make it the
-  // containing block for anything fixed inside it - at every value, the resting
-  // one included - and the bar is chrome that other things hang off.
-  // The wait sits in the keyframes and not in the range, because a range that
-  // starts past 0 leaves the bar in its resting state below that point - so the
-  // header would be visible for exactly the stretch it should stay away for.
+  // `top` and not a transform: that would make the header the containing block
+  // for anything fixed inside it, at every value. The wait sits in the keyframes
+  // and not in the range - a range starting past 0 leaves the bar resting, and
+  // visible, for exactly the stretch it should stay away for.
   @keyframes mw-header-reveal {
     0%,
     30% {
@@ -219,10 +186,8 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
     }
   }
 
-  // `translate` and not `transform`: the burger puts its hover lift and its
-  // press on transform, and a running animation outranks an author declaration
-  // - it would hold the button flat for the rest of the page. The standalone
-  // property stacks with the shorthand instead of replacing it.
+  // `translate` and not `transform`: the burger puts its hover lift on transform,
+  // and a running animation would hold it flat for the rest of the page.
   @keyframes mw-header-keep {
     0%,
     30% {

package/src/scss/layout/_main.scss

@@ -10,6 +10,22 @@
     flex-direction: column;
   }
 
+  // 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 {
     width: var(--mw-container-width);
     margin: spacing('0') auto;