maverick-wave 5.27.0 → 5.29.0

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

@@ -10,7 +10,7 @@
   // 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
+  // A generated box on a grid container is a grid 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 {
@@ -18,20 +18,27 @@
     --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;
+    // Grid, not a wrapping flex row. Flex fills a line greedily and moves the
+    // next item down before it shrinks anything, so a label that still fit on
+    // its own line kept it and pushed the value underneath - on a phone the
+    // row then read as text, dashes, and a number stranded on the line below.
+    // A grid column gives instead: the label breaks between its words and the
+    // value stays where it belongs.
+    //
+    // The leader column holds a stub of line when label and value nearly fill
+    // the row. Anything past the two declared columns - a second value - takes
+    // a column of its own.
+    display: grid;
+    grid-template-columns: minmax(0, auto) minmax(spacing('6'), 1fr);
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    align-items: 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;
@@ -39,17 +46,16 @@
 
     &-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.
-      //
+      // Words first, and the column floor is zero, so a single word wider than
+      // what is left of the row breaks inside itself rather than running past
+      // the edge - a German compound noun reaches that point on a phone.
+      overflow-wrap: break-word;
       // 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.
@@ -59,8 +65,8 @@
 
     // 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.
+    // It hangs off the first of the pair, not the second, where a trailing mark
+    // would read as "and there is more" at the end of the row.
     &-value:has(+ &-value)::after {
       content: '|';
       margin-left: spacing('3');
@@ -77,10 +83,10 @@
     }
 
     &-top {
-      align-items: flex-start;
+      align-items: start;
 
       &::before {
-        // flex-start pins the leader to the top edge, so it drops to the first
+        // 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/_lightbox.scss

@@ -0,0 +1,178 @@
+@use '../abstracts' as *;
+@use 'overlay-btn';
+
+@layer mw.components {
+  dialog.mw-lightbox {
+    position: fixed;
+    inset: 0;
+    width: auto;
+    height: auto;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: $fixed-stage;
+    color: $fixed-surface-text;
+    overflow: hidden;
+    overscroll-behavior: contain;
+    // The brand ink disappears on the stage
+    --mw-focus-ring-color: #{$fixed-surface-text};
+    opacity: 0;
+    transition:
+      opacity var(--mw-duration-base) var(--mw-ease-out),
+      overlay var(--mw-duration-base) allow-discrete,
+      display var(--mw-duration-base) allow-discrete;
+
+    &[open] {
+      opacity: 1;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    &::backdrop {
+      background: transparent;
+    }
+  }
+
+  // A <dialog> does not lock the page scroll behind it
+  :root:has(dialog.mw-lightbox[open]) {
+    overflow: hidden;
+    scrollbar-gutter: stable; // Or the page shifts by the hidden scrollbar
+  }
+
+  .mw-lightbox-track {
+    display: flex;
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior: contain;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
+
+  .mw-lightbox-slide {
+    flex: 0 0 100%;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: spacing('4');
+    margin: spacing('0');
+    padding: 4.25rem spacing('3')
+      calc(#{spacing('6')} + env(safe-area-inset-bottom, 0px));
+    scroll-snap-align: center;
+    scroll-snap-stop: always;
+
+    img {
+      display: block;
+      flex: 0 1 auto;
+      min-height: 0;
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      border-radius: radius('xs');
+      user-select: none;
+    }
+
+    figcaption {
+      flex: none;
+      max-width: 60ch;
+      max-height: 30%;
+      overflow-y: auto;
+      padding-inline: spacing('3');
+      color: rgb(239 239 239 / 88%);
+      font-size: font-size('sm');
+      line-height: 1.5;
+      text-align: center;
+
+      > * {
+        margin: spacing('0');
+      }
+
+      > * + * {
+        margin-top: spacing('2');
+      }
+
+      time,
+      small {
+        display: block;
+        color: rgb(239 239 239 / 60%);
+        font-size: font-size('xs');
+      }
+    }
+  }
+
+  // On a phone the arrows sit in the bar, off the photo
+  .mw-lightbox-bar {
+    position: absolute;
+    inset: 0 0 auto;
+    z-index: z-index('lift');
+    display: flex;
+    align-items: center;
+    gap: spacing('1');
+    padding: max(#{spacing('3')}, env(safe-area-inset-top, 0px)) spacing('3')
+      spacing('5');
+    background: linear-gradient(rgb(0 0 0 / 55%), transparent);
+
+    .mw-lightbox-close {
+      margin-left: auto;
+    }
+  }
+
+  .mw-lightbox-count {
+    min-width: 4.5em;
+    font-size: font-size('sm');
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+
+  @include media-up('md') {
+    .mw-lightbox-slide {
+      padding-inline: 5.5rem;
+    }
+
+    .mw-lightbox-bar {
+      padding-left: spacing('6');
+    }
+
+    .mw-lightbox-count {
+      order: -1;
+      text-align: left;
+    }
+
+    // Fixed works because the bar has no transform or filter to trap them
+    .mw-lightbox-prev,
+    .mw-lightbox-next {
+      position: fixed;
+      top: 50%;
+      translate: 0 -50%;
+      width: 3.25rem;
+      height: 3.25rem;
+      background: rgb(255 255 255 / 10%);
+
+      &:hover {
+        background: rgb(255 255 255 / 20%);
+      }
+    }
+
+    .mw-lightbox-prev {
+      left: spacing('6');
+    }
+
+    .mw-lightbox-next {
+      right: spacing('6');
+    }
+  }
+}

package/src/scss/components/_mosaic.scss

@@ -0,0 +1,83 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  .mw-mosaic {
+    display: grid;
+    // Two columns on a phone, four at most, in whatever box it sits
+    grid-template-columns: repeat(auto-fill, minmax(max(120px, 22%), 1fr));
+    // Equal rows sized by the square tiles' aspect-ratio
+    grid-auto-rows: 1fr;
+    grid-auto-flow: dense;
+    // Dense packing reorders the tiles; Tab follows what the eye sees
+    reading-flow: grid-rows;
+    gap: spacing('4');
+  }
+
+  .mw-mosaic-gap-sm {
+    gap: spacing('1');
+  }
+
+  .mw-mosaic-gap-lg {
+    gap: spacing('5');
+  }
+
+  .mw-mosaic-item {
+    position: relative;
+    margin: spacing('0');
+    // Only sizes the rows; stretched both ways, or the ratio sizes the tile
+    aspect-ratio: 1;
+    place-self: stretch;
+    overflow: hidden;
+    border-radius: radius('sm');
+    background: var(--mw-card-background);
+    transition: transform var(--mw-duration-fast) var(--mw-ease-out);
+
+    > a {
+      position: absolute;
+      inset: 0;
+      display: block;
+      @include tappable;
+      @include focus-ring-inset(-3px);
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform var(--mw-duration-zoom) var(--mw-ease-out);
+    }
+
+    > figcaption {
+      display: none;
+    }
+
+    @include hover-move {
+      img {
+        transform: scale(1.05);
+      }
+    }
+
+    &:has(> a:active) {
+      transform: scale(0.97);
+      transition-duration: var(--mw-duration-instant);
+    }
+  }
+
+  // Picked by the script from the photo's shape unless one is set by hand
+  .mw-mosaic-wide {
+    grid-column: span 2;
+    aspect-ratio: 2;
+  }
+
+  .mw-mosaic-tall {
+    grid-row: span 2;
+    aspect-ratio: 1 / 2;
+  }
+
+  .mw-mosaic-big {
+    grid-column: span 2;
+    grid-row: span 2;
+    aspect-ratio: 1;
+  }
+}

package/src/scss/components/_overlay-btn.scss

@@ -0,0 +1,47 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  .mw-overlay-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 2.75rem;
+    height: 2.75rem;
+    padding: spacing('0');
+    border: none;
+    border-radius: radius('full');
+    background: rgb(0 0 0 / 38%);
+    color: $fixed-surface-text;
+    font-size: font-size('md');
+    line-height: 1;
+    cursor: pointer;
+    transition: var(--mw-transition-fast);
+    @include tappable;
+    @include focus-ring;
+
+    svg {
+      width: 1.375rem;
+      height: 1.375rem;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    &:hover {
+      background: rgb(0 0 0 / 62%);
+    }
+
+    &:active {
+      transform: scale(0.9);
+      transition-duration: var(--mw-duration-instant);
+    }
+
+    &:disabled {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}

package/src/scss/components/_portrait-gallery.scss

@@ -0,0 +1,180 @@
+@use '../abstracts' as *;
+@use 'overlay-btn';
+
+@layer mw.components {
+  $two-up: 560px;
+  $three-up: 880px;
+  $gaps: (
+    '': spacing('6'),
+    '-gap-sm': spacing('3'),
+    '-gap-lg': spacing('7'),
+  );
+
+  // On a landscape phone the width follows from this cap
+  $max-height: 78svh;
+
+  .mw-portrait-gallery {
+    position: relative;
+    // Inline-size containment would collapse the box in a flex or grid slot
+    width: 100%;
+    container: mw-portrait-gallery / inline-size;
+  }
+
+  .mw-portrait-gallery-track {
+    display: flex;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    border-radius: radius('lg');
+    scrollbar-width: none;
+    @include focus-ring;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
+
+  .mw-portrait-gallery-slide {
+    position: relative;
+    flex: none;
+    // The next slide peeks in at the edge
+    width: min(86cqi, $max-height * 3 / 4);
+    aspect-ratio: 3 / 4;
+    margin: spacing('0');
+    overflow: hidden;
+    border-radius: radius('lg');
+    background: $fixed-stage;
+    scroll-snap-align: start;
+
+    > img,
+    > video {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    > figcaption {
+      position: absolute;
+      inset: auto 0 0;
+      padding: spacing('10') spacing('5') spacing('5');
+      background: linear-gradient(to top, rgb(0 0 0 / 72%), transparent);
+      color: $fixed-surface-text;
+      font-size: font-size('sm');
+      line-height: 1.45;
+      text-shadow: 0 1px 3px rgb(0 0 0 / 50%);
+
+      strong {
+        display: block;
+        font-size: font-size('md');
+      }
+    }
+  }
+
+  .mw-portrait-gallery-tall .mw-portrait-gallery-slide {
+    width: min(86cqi, $max-height * 9 / 16);
+    aspect-ratio: 9 / 16;
+  }
+
+  .mw-portrait-gallery-dots {
+    display: flex;
+    justify-content: center;
+    gap: spacing('4');
+    margin-top: spacing('5');
+  }
+
+  .mw-portrait-gallery-dot {
+    width: 7px;
+    height: 7px;
+    padding: spacing('0');
+    border: none;
+    border-radius: radius('full');
+    background: var(--mw-gray-color);
+    cursor: pointer;
+    transition: var(--mw-transition-fast);
+    @include tappable;
+    @include hit-area(6px);
+    @include focus-ring;
+
+    &.mw-active {
+      background: var(--mw-primary-text-color);
+      transform: scale(1.45);
+    }
+  }
+
+  @each $suffix, $gap in $gaps {
+    .mw-portrait-gallery#{$suffix} .mw-portrait-gallery-track {
+      gap: $gap;
+    }
+  }
+
+  @container mw-portrait-gallery (width >= #{$two-up}) {
+    .mw-portrait-gallery-dots {
+      display: none;
+    }
+  }
+
+  // The widths subtract the gaps, so each gap restates them - every two-up
+  // rule before every three-up one, or a modifier's two-up rule would win
+  @each $up, $share, $gaps-in-row in ($two-up 2.25 1, $three-up 3 2) {
+    @container mw-portrait-gallery (width >= #{$up}) {
+      @each $suffix, $gap in $gaps {
+        $room: calc(100cqi - $gaps-in-row * $gap);
+
+        .mw-portrait-gallery#{$suffix} .mw-portrait-gallery-slide {
+          width: min($room / $share, $max-height * 3 / 4);
+        }
+
+        .mw-portrait-gallery#{$suffix}.mw-portrait-gallery-tall
+          .mw-portrait-gallery-slide {
+          width: min($room / $share, $max-height * 9 / 16);
+        }
+      }
+    }
+  }
+
+  // A finger swipes, so the arrows are for a mouse only
+  .mw-portrait-gallery-prev,
+  .mw-portrait-gallery-next {
+    display: none;
+    position: absolute;
+    top: 50%;
+    translate: 0 -50%;
+    z-index: z-index('lift');
+
+    @media (hover: hover) and (pointer: fine) {
+      display: inline-flex;
+    }
+  }
+
+  .mw-portrait-gallery-prev {
+    left: spacing('4');
+  }
+
+  .mw-portrait-gallery-next {
+    right: spacing('4');
+  }
+
+  // Centred on the photos, not on photos plus the dot row
+  .mw-portrait-gallery:has(.mw-portrait-gallery-dots) {
+    .mw-portrait-gallery-prev,
+    .mw-portrait-gallery-next {
+      translate: 0 calc(-50% - #{spacing('5')});
+    }
+  }
+
+  @container mw-portrait-gallery (width >= #{$two-up}) {
+    .mw-portrait-gallery:has(.mw-portrait-gallery-dots) {
+      .mw-portrait-gallery-prev,
+      .mw-portrait-gallery-next {
+        translate: 0 -50%;
+      }
+    }
+  }
+}