maverick-wave 5.38.0 → 6.0.0

package/src/scss/components/_devices.scss

@@ -0,0 +1,323 @@
+@use '../abstracts' as *;
+
+// A laptop and a phone drawn in CSS, with a page on the glass: a screenshot
+// that scrolls, or a live page in an iframe scaled to fit. For showing a site
+// the way people meet it, next to the prose that sells it.
+
+// Hardware is the same colour in both themes, like the stage behind a photo
+$frame: #1b1d22;
+$frame-edge: #3a3d45;
+$frame-lip: #0c0d10;
+// Black glass round the display, the metal only as a thin band outside it
+$bezel: #060708;
+$metal: #2e3138;
+$metal-light: #5b606b;
+
+// A window caught in the glass: one soft diagonal with a hard edge
+$glare: linear-gradient(
+  115deg,
+  rgb(255 255 255 / 0.1),
+  rgb(255 255 255 / 0.03) 36%,
+  transparent 36.2%
+);
+
+// The screenshot at its lower edge. Percentages in translate are the image's
+// own height, cqh is the glass: the difference is the way down, and min()
+// keeps a picture shorter than the glass where it is.
+@mixin tour {
+  translate: 0 min(0px, calc(100cqh - 100%));
+  transition-duration: var(--mw-device-tour);
+  // A scroll has no ease: it moves at one speed until it stops
+  transition-timing-function: linear;
+}
+
+@layer mw.components {
+  @keyframes mw-device-nudge {
+    0%,
+    100% {
+      translate: -50% 0;
+    }
+
+    50% {
+      translate: -50% 22%;
+    }
+  }
+
+  .mw-device {
+    // How long the screenshot takes to reach its end on hover or on a tap
+    --mw-device-tour: #{motion(7s)};
+    // The width a live page in an iframe is laid out at before it is scaled
+    --mw-device-viewport: 1280px;
+
+    position: relative;
+    display: block;
+    width: 100%;
+    container-type: inline-size;
+
+    @include active {
+      > .mw-device-screen > :is(img, video) {
+        @include tour;
+      }
+    }
+  }
+
+  // Written as a button the device tours on a tap. The frame is the control,
+  // so it takes the button reset and nothing of the button look.
+  button.mw-device {
+    @include tappable;
+    @include focus-ring;
+    appearance: none;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    cursor: pointer;
+
+    &:active {
+      translate: 0 1px;
+    }
+
+    @include active {
+      > .mw-device-screen::after {
+        opacity: 0;
+      }
+    }
+  }
+
+  // ----- Glass -------------------------------------------------------------
+
+  .mw-device-screen {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    container-type: size;
+    background-color: $fixed-stage;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: z-index('lift');
+      background: $glare;
+      pointer-events: none;
+    }
+
+    > img,
+    > video {
+      display: block;
+      width: 100%;
+      height: auto;
+      // The way back once the tour is over. The tour sets its own pace: a
+      // transition takes its timing from the state it moves into.
+      transition: translate var(--mw-duration-zoom) var(--mw-ease-out);
+    }
+
+    // A live page: laid out at the device's viewport, then scaled to the glass.
+    // tan(atan2()) is the one way CSS divides two lengths into a number.
+    > iframe {
+      --_scale: tan(atan2(100cqw, var(--mw-device-viewport)));
+
+      display: block;
+      width: var(--mw-device-viewport);
+      height: calc(100cqh / var(--_scale));
+      border: 0;
+      transform: scale(var(--_scale));
+      transform-origin: 0 0;
+    }
+  }
+
+  // The cue that the glass can be tapped: a chevron that bobs on the lower
+  // edge, gone while the tour runs. A loop on its own clock, like a spinner.
+  button.mw-device > .mw-device-screen::after {
+    content: '';
+    position: absolute;
+    bottom: 5cqh;
+    left: 50%;
+    z-index: z-index('lift');
+    width: clamp(1.5rem, 9cqw, 2.25rem);
+    aspect-ratio: 1;
+    border-radius: radius('full');
+    background:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
+        center / 55% no-repeat,
+      color-mix(in srgb, #000 55%, transparent);
+    pointer-events: none;
+    transition: opacity var(--mw-transition-fast);
+    animation-name: mw-device-nudge;
+    animation-duration: #{motion(1.8s)};
+    animation-timing-function: var(--mw-ease-in-out);
+    animation-iteration-count: infinite;
+  }
+
+  // ----- Laptop ------------------------------------------------------------
+
+  .mw-device-laptop {
+    // The camera in the bezel
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0.5cqw;
+      left: 50%;
+      z-index: z-index('lift');
+      width: 0.6cqw;
+      aspect-ratio: 1;
+      translate: -50% 0;
+      border-radius: radius('full');
+      background-color: $frame-edge;
+    }
+
+    // The lid: a bezel around the glass, wider at the chin, sharp at the
+    // hinge where it meets the base. The base reaches past it on both sides.
+    > .mw-device-screen {
+      margin-inline: 6cqw;
+      aspect-ratio: 16 / 10;
+      border: 1.5cqw solid $bezel;
+      border-bottom-width: 2.4cqw;
+      border-radius: 1.6cqw 1.6cqw 0 0;
+      box-shadow:
+        0 0 0 0.3cqw $metal-light,
+        var(--mw-elevation-4);
+    }
+
+    // The base: a bevel along the top edge, the lip in the middle where a
+    // thumb opens the lid, round on the way down
+    &::after {
+      content: '';
+      display: block;
+      height: 2.2cqw;
+      border-radius: 0 0 1.4cqw 1.4cqw / 0 0 100% 100%;
+      background:
+        linear-gradient($frame-lip, $frame-lip) 50% 0 / 14cqw 0.8cqw no-repeat,
+        linear-gradient(#4a4d55, $frame 30%, #202329);
+      box-shadow: var(--mw-elevation-4);
+    }
+
+    @include hover-move {
+      > .mw-device-screen > img {
+        @include tour;
+      }
+    }
+  }
+
+  // ----- Phone -------------------------------------------------------------
+
+  // The body is the glass's border, not padding on the phone: a length in cqw
+  // on the phone itself would measure the container around it, the one on
+  // its child measures the phone. The radius here only shapes the focus ring
+  // - percentages, for the same reason, against the phone's own box.
+  .mw-device-phone {
+    --mw-device-viewport: 390px;
+
+    max-width: 22rem;
+    margin-inline: auto;
+    aspect-ratio: 9 / 19.5;
+    border-radius: 14% / 6.46%;
+
+    > .mw-device-screen {
+      height: 100%;
+      border: 3cqw solid $bezel;
+      border-radius: 14cqw;
+      box-shadow:
+        0 0 0 0.6cqw $metal,
+        0 0 0 0.85cqw $metal-light,
+        var(--mw-elevation-4);
+    }
+
+    // The island shares the glare's pseudo: two round ends and the stretch between
+    > .mw-device-screen::before {
+      $end: radial-gradient(
+        circle closest-side,
+        #000 calc(100% - 0.5px),
+        transparent
+      );
+
+      background:
+        $end calc(50% - 9.75cqw) 3.5cqw / 7.5cqw 7.5cqw no-repeat,
+        $end calc(50% + 9.75cqw) 3.5cqw / 7.5cqw 7.5cqw no-repeat,
+        linear-gradient(#000, #000) 50% 3.5cqw / 19.5cqw 7.5cqw no-repeat,
+        $glare;
+    }
+
+    // Mute switch and the two volume keys on the left, power on the right.
+    // One strip each; the gaps between the keys are transparent.
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 1.4cqw;
+      border-radius: 0.7cqw;
+    }
+
+    &::before {
+      top: 22cqw;
+      left: -2.1cqw;
+      height: 34cqw;
+      background: linear-gradient(
+        $frame-edge 0 18%,
+        transparent 18% 30%,
+        $frame-edge 30% 62%,
+        transparent 62% 68%,
+        $frame-edge 68% 100%
+      );
+    }
+
+    &::after {
+      top: 32cqw;
+      right: -2.1cqw;
+      height: 18cqw;
+      background-color: $frame-edge;
+    }
+  }
+
+  // ----- Both together -----------------------------------------------------
+
+  // The phone stands over the laptop's lower right corner and hangs a little
+  // below the base - the laptop's margin is the room for that overhang
+  .mw-devices {
+    position: relative;
+    container-type: inline-size;
+
+    > .mw-device-laptop {
+      margin-bottom: 4cqw;
+    }
+
+    > .mw-device-phone {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      z-index: z-index('lift');
+      width: 20cqw;
+      max-width: none;
+    }
+
+    // Too narrow for a phone anyone could read: it stands under the laptop
+    @container (width < 30rem) {
+      > .mw-device-laptop {
+        margin-bottom: 0;
+      }
+
+      // Relative and not static: the keys on its sides are placed against
+      // the phone, and static would hand them to the container
+      > .mw-device-phone {
+        position: relative;
+        inset: auto;
+        width: 60%;
+        margin: spacing('7') auto 0;
+      }
+    }
+  }
+
+  .mw-device {
+    @include motion-reduced {
+      --mw-device-tour: 1ms;
+    }
+  }
+
+  button.mw-device > .mw-device-screen::after {
+    @include motion-reduced {
+      animation: none;
+    }
+  }
+}

package/src/scss/components/_dropdown.scss

@@ -33,7 +33,9 @@
       transition: transform var(--mw-duration-fast) var(--mw-ease-out);
     }
 
-    &[open] .mw-dropdown-caret {
+    // aria-expanded too, for a trigger an app opens itself instead of <details>
+    &[open] .mw-dropdown-caret,
+    > [aria-expanded='true'] .mw-dropdown-caret {
       transform: rotate(180deg);
     }
   }
@@ -128,7 +130,8 @@
 
     // The current choice, for a menu that picks rather than acts
     &.mw-active,
-    &[aria-checked='true'] {
+    &[aria-checked='true'],
+    &[aria-current='page'] {
       background: var(--mw-primary-background);
       color: var(--mw-primary-text-color);
       font-weight: font-weight('medium');
@@ -290,4 +293,42 @@
       font-size: font-size('base');
     }
   }
+
+  // A shortcut at the end of the row, the way a desktop menu shows it
+  .mw-dropdown-item > :is(kbd, .mw-dropdown-shortcut) {
+    margin-left: auto;
+    padding-left: spacing('4');
+    color: var(--mw-text-muted-color);
+    font-size: font-size('2xs');
+    white-space: nowrap;
+  }
+
+  // A <kbd> brings its key cap; in a menu row the text alone is enough
+  .mw-dropdown-item > kbd {
+    padding-block: 0;
+    padding-right: 0;
+    border: 0;
+    background: none;
+    box-shadow: none;
+    font-family: inherit;
+  }
+
+  // Touch has no keyboard to use them on
+  @include touch-context('sm') {
+    .mw-dropdown-item > :is(kbd, .mw-dropdown-shortcut) {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .mw-dropdown-item:is(
+      .mw-active,
+      [aria-checked='true'],
+      [aria-current='page']
+    ) {
+      forced-color-adjust: none;
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
 }

package/src/scss/components/_empty-state.scss

@@ -70,4 +70,47 @@
       opacity: 0.7;
     }
   }
+
+  // A row for a table body or a panel: icon beside the text, the action below it
+  .mw-empty-state-inline {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: spacing('4');
+    align-items: center;
+    justify-items: start;
+    padding: spacing('4');
+    text-align: left;
+
+    > .mw-empty-state-icon {
+      grid-row: 1 / span 3;
+      align-self: start;
+      margin-bottom: 0;
+      font-size: font-size('2xl');
+    }
+
+    > .mw-empty-state-title {
+      margin-bottom: 0;
+      font-size: font-size('md');
+    }
+
+    > .mw-empty-state-desc {
+      max-width: none;
+      margin-bottom: 0;
+      font-size: font-size('sm');
+    }
+
+    > :not(.mw-empty-state-icon, .mw-empty-state-title, .mw-empty-state-desc) {
+      grid-column: 2;
+      margin-top: spacing('3');
+    }
+
+    // Without an icon the text would land in the icon's column
+    &:not(:has(> .mw-empty-state-icon)) {
+      grid-template-columns: minmax(0, 1fr);
+
+      > * {
+        grid-column: 1;
+      }
+    }
+  }
 }

package/src/scss/components/_flag.scss

@@ -322,4 +322,20 @@
       ),
       linear-gradient(to right, #046a38 0 40%, #da291c 40%);
   }
+
+  // The wedge is two half-diagonals, one per quarter of the hoist half
+  .mw-flag-cz {
+    background-image:
+      linear-gradient(to top right, #11457e 50%, transparent 50%),
+      linear-gradient(to bottom right, #11457e 50%, transparent 50%),
+      linear-gradient(to bottom, #fff 0 50%, #d7141a 50%);
+    background-size:
+      50% 50%,
+      50% 50%,
+      100% 100%;
+    background-position:
+      left top,
+      left bottom,
+      0 0;
+  }
 }

package/src/scss/components/_index.scss

@@ -1,4 +1,5 @@
 @forward 'accordions';
+@forward 'action-bar';
 @forward 'alerts';
 @forward 'announcement';
 @forward 'avatars';
@@ -9,13 +10,16 @@
 @forward 'breadcrumbs';
 @forward 'calendar';
 @forward 'cards';
+@forward 'chat';
 @forward 'code';
 @forward 'coming-soon';
+@forward 'compare';
 @forward 'contact';
 @forward 'content-slider';
 @forward 'date-stamp';
 @forward 'deck';
 @forward 'deck-frame';
+@forward 'devices';
 @forward 'divider';
 @forward 'dropdown';
 @forward 'empty-state';
@@ -33,6 +37,7 @@
 @forward 'links';
 @forward 'lists';
 @forward 'localhost-indicator';
+@forward 'marquee';
 @forward 'media';
 @forward 'meta-info';
 @forward 'modals';
@@ -49,6 +54,7 @@
 @forward 'segmented';
 @forward 'skeleton';
 @forward 'spinners';
+@forward 'stat';
 @forward 'stepper';
 @forward 'stories';
 @forward 'tables';

package/src/scss/components/_lightbox.scss

@@ -56,7 +56,7 @@
       display: none;
     }
 
-    @media (prefers-reduced-motion: no-preference) {
+    @include motion-safe {
       scroll-behavior: smooth;
     }
   }

package/src/scss/components/_marquee.scss

@@ -0,0 +1,132 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  // Items twice, the copy inert: sliding by half the width makes a seamless loop
+  .mw-marquee {
+    --mw-marquee-duration: #{motion(40s)};
+    --mw-marquee-gap: #{spacing('9')};
+    --mw-marquee-fade: min(#{spacing('10')}, 12%);
+    --mw-marquee-logo-height: 2.25rem;
+
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    // The groups measure the strip in cqi to stay at least one screen wide
+    container-type: inline-size;
+  }
+
+  .mw-marquee-track {
+    display: flex;
+    width: 100%;
+  }
+
+  .mw-marquee-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: spacing('5') var(--mw-marquee-gap);
+    width: 100%;
+
+    & ~ & {
+      display: none;
+    }
+  }
+
+  .mw-marquee-item {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: spacing('3');
+    color: var(--mw-text-muted-color);
+    font-size: font-size('md');
+    font-weight: font-weight('medium');
+    white-space: nowrap;
+
+    > i {
+      color: var(--mw-primary-text-color);
+    }
+
+    img {
+      display: block;
+      width: auto;
+      height: var(--mw-marquee-logo-height);
+      filter: grayscale(1);
+      opacity: 0.75;
+      transition: var(--mw-transition);
+    }
+
+    @include hover {
+      img {
+        filter: none;
+        opacity: 1;
+      }
+    }
+  }
+
+  .mw-marquee {
+    @include motion-safe {
+      mask-image: linear-gradient(
+        to right,
+        transparent,
+        #000 var(--mw-marquee-fade),
+        #000 calc(100% - var(--mw-marquee-fade)),
+        transparent
+      );
+    }
+  }
+
+  // The fade would mask the focus ring away, and a held strip needs no fade
+  .mw-marquee:focus-visible {
+    @include motion-safe {
+      mask-image: none;
+    }
+  }
+
+  .mw-marquee-track {
+    @include motion-safe {
+      width: max-content;
+      animation-name: mw-marquee;
+      animation-duration: var(--mw-marquee-duration);
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+    }
+  }
+
+  .mw-marquee-reverse .mw-marquee-track {
+    @include motion-safe {
+      animation-direction: reverse;
+    }
+  }
+
+  .mw-marquee:is(:hover, :focus-within) .mw-marquee-track {
+    @include motion-safe {
+      animation-play-state: paused;
+    }
+  }
+
+  // As wide as the strip, or a short list leaves a gap before the copy
+  .mw-marquee-group {
+    @include motion-safe {
+      flex-shrink: 0;
+      flex-wrap: nowrap;
+      justify-content: space-around;
+      width: auto;
+      min-width: 100cqi;
+      padding-inline-end: var(--mw-marquee-gap);
+    }
+  }
+
+  // Not nested as `& ~ &`: motion-safe would prefix both halves and never match
+  .mw-marquee-group ~ .mw-marquee-group {
+    @include motion-safe {
+      display: flex;
+    }
+  }
+
+  @keyframes mw-marquee {
+    to {
+      transform: translateX(-50%);
+    }
+  }
+}