maverick-wave 5.27.0 → 5.29.0

package/src/scss/components/_stories.scss

@@ -0,0 +1,443 @@
+@use '../abstracts' as *;
+@use 'overlay-btn';
+
+@layer mw.components {
+  $frame-height: min(92dvh, 56rem);
+  $frame-time: 5s;
+  // Frames per story the timing is written out for
+  $max-frames: 12;
+
+  // A bar cut into as many segments as the story has frames
+  @function segments($color, $count) {
+    @return repeating-linear-gradient(
+      to right,
+      $color 0 calc(100% / #{$count} - 3px),
+      transparent 0 calc(100% / #{$count})
+    );
+  }
+
+  .mw-stories {
+    display: flex;
+    gap: spacing('5');
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    padding-block: spacing('2');
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
+    @include scroll-hint;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    // A finger swipes the row, a mouse wheel cannot - it gets the bar
+    @media (hover: hover) and (pointer: fine) {
+      scrollbar-width: thin;
+    }
+  }
+
+  .mw-story {
+    flex: none;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: spacing('2');
+    width: 4.75rem;
+    padding: spacing('0');
+    border: none;
+    border-radius: radius('md');
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    scroll-snap-align: start;
+    @include tappable;
+    @include focus-ring;
+
+    &:active .mw-story-cover {
+      transform: scale(0.93);
+      transition-duration: var(--mw-duration-instant);
+    }
+  }
+
+  .mw-story-cover {
+    display: block;
+    width: 4.25rem;
+    height: 4.25rem;
+    padding: 3px;
+    border-radius: radius('full');
+    // The ink tones, not the fills: the ring has to carry on a dark page too
+    background: linear-gradient(
+      45deg,
+      var(--mw-secondary-text-color),
+      var(--mw-primary-text-color)
+    );
+    transition: transform var(--mw-duration-fast) var(--mw-ease-out);
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      // The token that follows the surface - the page, or a card around the row
+      border: 2px solid var(--mw-scroll-hint-cover, var(--mw-page-background));
+      border-radius: radius('full');
+      object-fit: cover;
+    }
+  }
+
+  .mw-story-label {
+    max-width: 100%;
+    font-size: font-size('xs');
+    @include truncate;
+  }
+
+  // A vertical snap strip: swipe, wheel and arrow keys page through it natively
+  .mw-story-reel {
+    // Not only the UA rule, or a browser without popovers shows it in the row
+    display: none;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: spacing('0');
+    border: none;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-snap-type: y mandatory;
+    scrollbar-width: none;
+    background: #000;
+    color: $fixed-surface-text;
+    --mw-focus-ring-color: #{$fixed-surface-text};
+    // A long press pauses, so it must not open the image menu as well
+    user-select: none;
+    -webkit-touch-callout: none;
+    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;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &:popover-open {
+      display: block;
+      opacity: 1;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    &::backdrop {
+      background: rgb(0 0 0 / 88%);
+      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;
+    }
+
+    &:popover-open::backdrop {
+      opacity: 1;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    > img,
+    > video {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      scroll-snap-align: start;
+      scroll-snap-stop: always;
+    }
+
+    // Wider than a phone held upright: the story keeps its phone shape
+    @include media-up('sm') {
+      width: calc(#{$frame-height} * 9 / 16);
+      height: $frame-height;
+      margin: auto;
+      border-radius: radius('lg');
+    }
+  }
+
+  .mw-story-reel-head {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    display: flex;
+    align-items: flex-start;
+    gap: spacing('1');
+    height: 5rem;
+    // Laid over the first frame instead of pushing it down
+    margin-bottom: -5rem;
+    padding: calc(max(#{spacing('3')}, env(safe-area-inset-top, 0px)) + 0.75rem)
+      spacing('3') 0 spacing('5');
+    background: linear-gradient(rgb(0 0 0 / 55%), transparent);
+    font-size: font-size('sm');
+    font-weight: font-weight('bold');
+    text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
+
+    > span {
+      flex: 1;
+      min-width: 0;
+      @include truncate;
+    }
+
+    .mw-overlay-btn {
+      margin-top: -#{spacing('3')};
+      background: transparent;
+    }
+
+    // The progress bar: the track and the fill drawn over it
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: max(#{spacing('3')}, env(safe-area-inset-top, 0px));
+      left: spacing('3');
+      right: spacing('3');
+      height: 2px;
+      border-radius: 2px;
+    }
+
+    &::before {
+      background: rgb(255 255 255 / 35%);
+    }
+
+    &::after {
+      background: $fixed-surface-text;
+    }
+  }
+
+  // A checkbox, so pausing needs no script: two bars, a triangle once paused
+  .mw-story-reel-pause {
+    position: relative;
+
+    input {
+      position: absolute;
+      inset: 0;
+      margin: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    &:has(:focus-visible) {
+      outline: var(--mw-focus-ring-width) solid var(--mw-focus-ring-color);
+      outline-offset: var(--mw-focus-ring-offset);
+    }
+
+    &::before {
+      content: '';
+      width: 10px;
+      height: 13px;
+      border-inline: 3px solid currentColor;
+    }
+
+    &:has(:checked)::before {
+      width: 0;
+      height: 0;
+      margin-left: 3px;
+      border-inline: 0;
+      border-left: 11px solid currentColor;
+      border-block: 7px solid transparent;
+    }
+  }
+
+  // Built by the script: left a third back, the rest on
+  .mw-story-reel-prev,
+  .mw-story-reel-next {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    padding: spacing('0') spacing('3');
+    border: none;
+    background: none;
+    color: $fixed-surface-text;
+    cursor: pointer;
+    @include tappable;
+    @include focus-ring-inset(-4px);
+
+    svg {
+      width: 1.75rem;
+      height: 1.75rem;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      opacity: 0;
+      filter: drop-shadow(0 1px 2px rgb(0 0 0 / 60%));
+      transition: opacity var(--mw-duration-fast) var(--mw-ease-out);
+    }
+
+    &:focus-visible svg {
+      opacity: 1;
+    }
+
+    // A finger taps the halves blind; a mouse gets the arrows to aim at
+    @media (hover: hover) and (pointer: fine) {
+      svg {
+        opacity: 0.7;
+      }
+
+      &:hover svg {
+        opacity: 1;
+      }
+    }
+  }
+
+  .mw-story-reel-prev {
+    left: 0;
+    width: 30%;
+  }
+
+  .mw-story-reel-next {
+    right: 0;
+    width: 70%;
+    justify-content: flex-end;
+  }
+
+  // Longhands only in this file: the shorthand would reset the scroll timeline
+  @media (prefers-reduced-motion: no-preference) {
+    .mw-story-reel {
+      overflow: hidden;
+      scroll-snap-type: none;
+
+      > img,
+      > video {
+        position: absolute;
+        inset: 0;
+      }
+
+      > :nth-child(n + 2 of img, video) {
+        visibility: hidden;
+        animation-name: mw-story-reel-frame;
+        animation-duration: 1ms;
+        animation-timing-function: step-end;
+        animation-fill-mode: forwards;
+      }
+
+      @for $frame from 2 through $max-frames {
+        > :nth-child(#{$frame} of img, video) {
+          animation-delay: ($frame - 1) * $frame-time;
+        }
+      }
+
+      // Untimed, they would show at once on top of the first
+      > :nth-child(n + #{$max-frames + 1} of img, video) {
+        display: none;
+      }
+    }
+
+    .mw-story-reel-head::after {
+      clip-path: inset(0 100% 0 0);
+      animation-name: mw-story-reel-fill;
+      animation-duration: $frame-time;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+
+    // One segment per frame, and the fill takes as long as all of them
+    @for $frames from 2 through $max-frames {
+      .mw-story-reel:has(
+          > :nth-child(#{$frames} of img, video):nth-last-child(1 of img, video)
+        )
+        .mw-story-reel-head {
+        &::before {
+          background: segments(rgb(255 255 255 / 35%), $frames);
+        }
+
+        &::after {
+          background: segments($fixed-surface-text, $frames);
+          animation-duration: $frames * $frame-time;
+        }
+      }
+    }
+
+    // A longer story ends at the last timed frame
+    .mw-story-reel:has(> :nth-child(#{$max-frames + 1} of img, video))
+      .mw-story-reel-head {
+      &::before {
+        background: segments(rgb(255 255 255 / 35%), $max-frames);
+      }
+
+      &::after {
+        background: segments($fixed-surface-text, $max-frames);
+        animation-duration: $max-frames * $frame-time;
+      }
+    }
+
+    .mw-story-reel:is(:active, :has(.mw-story-reel-pause :checked)) {
+      > *,
+      .mw-story-reel-head::after {
+        animation-play-state: paused;
+      }
+    }
+  }
+
+  // No autoplay with reduced motion: the frames stay a strip to page through
+  @media (prefers-reduced-motion: reduce) {
+    .mw-story-reel-pause,
+    .mw-story-reel-prev,
+    .mw-story-reel-next {
+      display: none;
+    }
+
+    .mw-story-reel-head::after {
+      transform-origin: left;
+      transform: scaleX(0);
+    }
+
+    @supports (animation-timeline: scroll()) {
+      .mw-story-reel-head::after {
+        animation-name: mw-story-reel-scroll;
+        animation-timing-function: linear;
+        animation-fill-mode: both;
+        animation-timeline: scroll();
+      }
+    }
+
+    @supports not (animation-timeline: scroll()) {
+      .mw-story-reel-head {
+        &::before,
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  @keyframes mw-story-reel-frame {
+    to {
+      visibility: visible;
+    }
+  }
+
+  @keyframes mw-story-reel-fill {
+    to {
+      clip-path: inset(0);
+    }
+  }
+
+  @keyframes mw-story-reel-scroll {
+    to {
+      transform: scaleX(1);
+    }
+  }
+
+  // A popover does not lock the page scroll behind it
+  :root:has(.mw-story-reel:popover-open) {
+    overflow: hidden;
+    scrollbar-gutter: stable; // Or the page shifts by the hidden scrollbar
+  }
+}

package/src/scss/components/_tiles.scss

@@ -41,7 +41,10 @@
     &:hover {
       box-shadow: var(--mw-elevation-3);
       border-color: var(--mw-border-accent);
-      --mw-corner-accent: var(--mw-corner-accent-hover);
+
+      &::after {
+        --mw-corner-accent: var(--mw-corner-accent-hover);
+      }
     }
 
     @include hover-move {

package/src/scss/components/_tooltip.scss

@@ -0,0 +1,193 @@
+@use 'sass:math';
+@use '../abstracts' as *;
+
+@layer mw.components {
+  // A pseudo element on the trigger, so an ancestor with `overflow: hidden` cuts
+  // it off. Hidden means `display: none`: a laid-out box still counts towards the
+  // page's overflow, and a 280px bubble near the right edge added 50px of sideways
+  // scroll on a phone. Hence `allow-discrete` and the starting style.
+  $_mw-tooltip-arrow: 6px;
+  $_mw-tooltip-gap: 8px;
+  // A square turned 45deg rather than a border triangle: it reads the same from
+  // above and from below, so the second placement costs no second arrow and a
+  // flip never has to repaint anything. The diagonal carries the visible width,
+  // so the side is the visible height doubled over root two.
+  $_mw-tooltip-arrow-side: math.div($_mw-tooltip-arrow * 2, math.sqrt(2));
+  // Half a side short of where the triangle's edge sat, so the turned square is
+  // centred on the bubble's edge and only its outer half shows. The inner half
+  // lands on the bubble in the same colour, which is what makes it read as one
+  // shape rather than a diamond stuck to a box.
+  $_mw-tooltip-arrow-inset: $_mw-tooltip-gap +
+    $_mw-tooltip-arrow - math.div($_mw-tooltip-arrow-side, 2);
+
+  [data-tooltip] {
+    position: relative;
+
+    &::before {
+      content: attr(data-tooltip);
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-bottom: $_mw-tooltip-gap + $_mw-tooltip-arrow;
+      max-width: min(280px, 90vw);
+      width: max-content;
+      padding: spacing('1') spacing('2');
+      background: var(--mw-gray-color);
+      color: $fixed-surface-text;
+      font-size: font-size('xs');
+      border-radius: radius('xs');
+      box-shadow: var(--mw-elevation-2);
+      pointer-events: none;
+      opacity: 0;
+      display: none;
+      transition:
+        opacity var(--mw-duration-fast) var(--mw-ease-out),
+        display var(--mw-duration-fast) allow-discrete;
+      z-index: z-index('tooltip');
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+      margin-bottom: $_mw-tooltip-arrow-inset;
+      width: $_mw-tooltip-arrow-side;
+      height: $_mw-tooltip-arrow-side;
+      background: var(--mw-gray-color);
+      opacity: 0;
+      display: none;
+      transition:
+        opacity var(--mw-duration-fast) var(--mw-ease-out),
+        display var(--mw-duration-fast) allow-discrete;
+      z-index: z-index('tooltip');
+    }
+
+    // The placement API: the text is the attribute, the side is a class. The
+    // three steer different properties - block axis, inline axis - so `below`
+    // and `end` compose without a rule for the pairing.
+    //
+    // They place the bubble against the trigger rather than joining the anchored
+    // path below, and that is the point, not a shortcut. The reason to want them
+    // is a control in a fixed header, and that header carries a backdrop-filter,
+    // which makes it the containing block for anything `fixed` inside it.
+    // `block-end` is then the few pixels between the trigger and the header's own
+    // bottom edge, the bubble does not fit, and it gets pushed back over the
+    // trigger it belongs to. What this gives up is the clipping immunity the
+    // anchored path buys - a modifier inside a scroll container is cut off.
+    //
+    // Opting out has to restore the placement, not just the positioning scheme:
+    // the anchored path below is the later rule and clears `bottom`, `top`,
+    // `left` and the centring transform so `position-area` can resolve them
+    // itself. Leave that cleared and the box falls to its static position, which
+    // for a pseudo element is inside the trigger it is supposed to sit above.
+    // The three rules under this one then move the one edge each of them owns.
+    &:is(.mw-tooltip-below, .mw-tooltip-end, .mw-tooltip-start) {
+      &::before,
+      &::after {
+        position: absolute;
+        position-area: none;
+        bottom: 100%;
+        top: auto;
+        left: 50%;
+      }
+
+      &::before {
+        transform: translateX(-50%);
+      }
+
+      &::after {
+        transform: translateX(-50%) rotate(45deg);
+      }
+    }
+
+    &.mw-tooltip-below {
+      &::before {
+        top: 100%;
+        bottom: auto;
+        margin-top: $_mw-tooltip-gap + $_mw-tooltip-arrow;
+        margin-bottom: 0;
+      }
+
+      &::after {
+        top: 100%;
+        bottom: auto;
+        margin-top: $_mw-tooltip-arrow-inset;
+        margin-bottom: 0;
+      }
+    }
+
+    // Only the bubble moves - the arrow stays centred on the trigger it points at.
+    &.mw-tooltip-end::before {
+      left: auto;
+      right: 0;
+      transform: none;
+    }
+
+    &.mw-tooltip-start::before {
+      left: 0;
+      right: auto;
+      transform: none;
+    }
+
+    &:hover::before,
+    &:hover::after,
+    &:focus-visible::before,
+    &:focus-visible::after {
+      opacity: 1;
+      display: block;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    // A press usually scales the trigger, and a transform makes it a containing
+    // block for the fixed-position bubble above - which would drop the label
+    // into the element being pressed. So it steps aside for the click instead;
+    // by then it has been read anyway. After the hover rule, same weight.
+    &:active::before,
+    &:active::after {
+      opacity: 0;
+      display: none;
+      // Not transitioned: `allow-discrete` holds `display: block` until the fade
+      // ends, and the bubble would spend those 180ms visibly sitting in the
+      // element. Going back out on release keeps the fade - that one is wanted.
+      transition: none;
+    }
+
+    // The clipping caveat above, lifted where the browser can do it: `fixed` takes
+    // the bubble out of the trigger's containing block, anchor positioning keeps
+    // it attached. No `anchor-name` needed - a pseudo element is implicitly
+    // anchored to the element it comes from.
+    //
+    // Still no `position-try-fallbacks: flip-block`, and no longer because of the
+    // arrow - the turned square survives a flip. Bubble and arrow are two
+    // separately anchored boxes, so each would decide on its own whether it fits,
+    // and the tiny one nearly always does: the label flips, the arrow stays.
+    @supports (position-area: block-start) {
+      &::before,
+      &::after {
+        position: fixed;
+        // The absolute placement these replace - left as-is they fight the
+        // position-area, which resolves the inset properties itself.
+        bottom: auto;
+        left: auto;
+        top: auto;
+      }
+
+      &::before {
+        position-area: block-start;
+        transform: none;
+      }
+
+      // The turn stays - it is the arrow's shape, not its placement.
+      &::after {
+        position-area: block-start;
+        transform: rotate(45deg);
+      }
+    }
+  }
+}