maverick-wave 5.28.0 → 5.29.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%;
+      }
+    }
+  }
+}