maverick-wave 4.27.0 → 5.0.0

package/src/scss/components/_flag.scss

@@ -0,0 +1,325 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  // Drawn in CSS gradients, not emoji: Windows ships no flag glyphs at all, and an
+  // emoji cannot be sized to line up with text. Every flag gets the same 4:3 box
+  // whatever its real ratio, or a column of switcher rows stops lining up.
+  //
+  // For anything not in the set below the class is a slot - put an <img> or an
+  // inline <svg> inside and it inherits the box, the corner and the hairline.
+
+  // Shape values, in px - these draw a picture and have nothing to do with the
+  // spacing scale
+  $_flag-width: 20px;
+  $_flag-height: 15px;
+
+  .mw-flag {
+    display: inline-block;
+    width: $_flag-width;
+    height: $_flag-height;
+    flex-shrink: 0;
+    border-radius: radius('xs');
+    overflow: hidden;
+    // Drawn on top rather than as a border: a border would shrink the painting
+    // area and shift every gradient stop inward by a pixel. Two rings, because
+    // each theme loses a different edge - the dark one keeps white flags (Japan,
+    // Poland) off a light card, the light one keeps the black band of Germany and
+    // Belgium off a dark header. Each is invisible where it is not needed.
+    box-shadow:
+      inset 0 0 0 1px rgb(0 0 0 / 0.2),
+      0 0 0 1px rgb(255 255 255 / 0.14);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    vertical-align: middle;
+
+    // The slot: a real flag asset fills the same box
+    > img,
+    > svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  // --- Three horizontal bands ------------------------------------------------
+  .mw-flag-de {
+    background-image: linear-gradient(
+      to bottom,
+      #000 0 33.34%,
+      #dd0000 33.34% 66.67%,
+      #ffce00 66.67%
+    );
+  }
+
+  .mw-flag-at {
+    background-image: linear-gradient(
+      to bottom,
+      #ed2939 0 33.34%,
+      #fff 33.34% 66.67%,
+      #ed2939 66.67%
+    );
+  }
+
+  .mw-flag-nl {
+    background-image: linear-gradient(
+      to bottom,
+      #ae1c28 0 33.34%,
+      #fff 33.34% 66.67%,
+      #21468b 66.67%
+    );
+  }
+
+  .mw-flag-hu {
+    background-image: linear-gradient(
+      to bottom,
+      #ce2939 0 33.34%,
+      #fff 33.34% 66.67%,
+      #477050 66.67%
+    );
+  }
+
+  .mw-flag-bg {
+    background-image: linear-gradient(
+      to bottom,
+      #fff 0 33.34%,
+      #00966e 33.34% 66.67%,
+      #d62612 66.67%
+    );
+  }
+
+  // Spain's bands are 1:2:1, not equal thirds - the civil flag, without the arms
+  .mw-flag-es {
+    background-image: linear-gradient(
+      to bottom,
+      #aa151b 0 25%,
+      #f1bf00 25% 75%,
+      #aa151b 75%
+    );
+  }
+
+  // --- Three vertical bands --------------------------------------------------
+  .mw-flag-fr {
+    background-image: linear-gradient(
+      to right,
+      #002654 0 33.34%,
+      #fff 33.34% 66.67%,
+      #ed2939 66.67%
+    );
+  }
+
+  .mw-flag-it {
+    background-image: linear-gradient(
+      to right,
+      #009246 0 33.34%,
+      #fff 33.34% 66.67%,
+      #ce2b37 66.67%
+    );
+  }
+
+  .mw-flag-be {
+    background-image: linear-gradient(
+      to right,
+      #000 0 33.34%,
+      #fae042 33.34% 66.67%,
+      #ed2939 66.67%
+    );
+  }
+
+  .mw-flag-ro {
+    background-image: linear-gradient(
+      to right,
+      #002b7f 0 33.34%,
+      #fcd116 33.34% 66.67%,
+      #ce1126 66.67%
+    );
+  }
+
+  .mw-flag-ie {
+    background-image: linear-gradient(
+      to right,
+      #169b62 0 33.34%,
+      #fff 33.34% 66.67%,
+      #ff883e 66.67%
+    );
+  }
+
+  // --- Two bands -------------------------------------------------------------
+  .mw-flag-pl {
+    background-image: linear-gradient(to bottom, #fff 0 50%, #dc143c 50%);
+  }
+
+  .mw-flag-ua {
+    background-image: linear-gradient(to bottom, #0057b7 0 50%, #ffd700 50%);
+  }
+
+  // --- Nordic cross ----------------------------------------------------------
+  // The arm sits left of centre, as it does on the real flags. Two bars laid over
+  // a solid field: the horizontal one first so the intersection is one colour.
+  @mixin nordic-cross($field, $cross) {
+    background-image:
+      linear-gradient(
+        to bottom,
+        transparent 40%,
+        $cross 40% 60%,
+        transparent 60%
+      ),
+      linear-gradient(
+        to right,
+        transparent 26%,
+        $cross 26% 46%,
+        transparent 46%
+      ),
+      linear-gradient($field 0 0);
+  }
+
+  .mw-flag-se {
+    @include nordic-cross(#005293, #fecb00);
+  }
+
+  .mw-flag-dk {
+    @include nordic-cross(#c8102e, #fff);
+  }
+
+  .mw-flag-fi {
+    @include nordic-cross(#fff, #003580);
+  }
+
+  // Norway's blue cross sits inside the white one, so it takes a second, thinner
+  // pair of bars on top
+  .mw-flag-no {
+    background-image:
+      linear-gradient(
+        to bottom,
+        transparent 44%,
+        #00205b 44% 56%,
+        transparent 56%
+      ),
+      linear-gradient(
+        to right,
+        transparent 30%,
+        #00205b 30% 42%,
+        transparent 42%
+      ),
+      linear-gradient(
+        to bottom,
+        transparent 40%,
+        #fff 40% 60%,
+        transparent 60%
+      ),
+      linear-gradient(to right, transparent 26%, #fff 26% 46%, transparent 46%),
+      linear-gradient(#ba0c2f 0 0);
+  }
+
+  // Switzerland is square in reality; in a 4:3 box the arms are widened so the
+  // cross still reads as one
+  .mw-flag-ch {
+    background-image:
+      linear-gradient(
+        to bottom,
+        transparent 36%,
+        #fff 36% 64%,
+        transparent 64%
+      ),
+      linear-gradient(to right, transparent 39%, #fff 39% 61%, transparent 61%),
+      linear-gradient(#d52b1e 0 0);
+  }
+
+  // --- Everything else -------------------------------------------------------
+  // The Union Jack, from the back forward: white diagonals, red diagonals over
+  // them, then the white and red arms of St George's cross on top. The
+  // counterchange of the red diagonals is dropped - at 20px nobody sees it, and
+  // it would cost four more layers.
+  .mw-flag-gb {
+    background-image:
+      linear-gradient(
+        to right,
+        transparent 42%,
+        #c8102e 42% 58%,
+        transparent 58%
+      ),
+      linear-gradient(
+        to bottom,
+        transparent 38%,
+        #c8102e 38% 62%,
+        transparent 62%
+      ),
+      linear-gradient(to right, transparent 36%, #fff 36% 64%, transparent 64%),
+      linear-gradient(
+        to bottom,
+        transparent 30%,
+        #fff 30% 70%,
+        transparent 70%
+      ),
+      linear-gradient(
+        to bottom right,
+        transparent 45%,
+        #c8102e 45% 55%,
+        transparent 55%
+      ),
+      linear-gradient(
+        to bottom left,
+        transparent 45%,
+        #c8102e 45% 55%,
+        transparent 55%
+      ),
+      linear-gradient(
+        to bottom right,
+        transparent 38%,
+        #fff 38% 62%,
+        transparent 62%
+      ),
+      linear-gradient(
+        to bottom left,
+        transparent 38%,
+        #fff 38% 62%,
+        transparent 62%
+      ),
+      linear-gradient(#012169 0 0);
+  }
+
+  // 13 stripes and the canton. The stars are left out - at 15px tall they would
+  // be a grey smear, and the blue block already says which flag this is.
+  .mw-flag-us {
+    background-image:
+      linear-gradient(#3c3b6e 0 0),
+      repeating-linear-gradient(
+        to bottom,
+        #b31942 0 7.693%,
+        #fff 7.693% 15.385%
+      );
+    background-size:
+      40% 53.85%,
+      100% 100%;
+    background-position:
+      top left,
+      top left;
+  }
+
+  .mw-flag-jp {
+    background-image:
+      radial-gradient(circle at 50% 50%, #bc002d 0 29%, transparent 30%),
+      linear-gradient(#fff 0 0);
+  }
+
+  // Two overlapping circles make the crescent; the star is dropped for the same
+  // reason as the US stars
+  .mw-flag-tr {
+    background-image:
+      radial-gradient(circle at 47% 50%, #e30a17 0 20%, transparent 21%),
+      radial-gradient(circle at 40% 50%, #fff 0 25%, transparent 26%),
+      linear-gradient(#e30a17 0 0);
+  }
+
+  // Portugal without the armillary sphere - the ring alone carries it at this size
+  .mw-flag-pt {
+    background-image:
+      radial-gradient(
+        circle at 40% 50%,
+        transparent 0 12%,
+        #ffe900 13% 21%,
+        transparent 22%
+      ),
+      linear-gradient(to right, #046a38 0 40%, #da291c 40%);
+  }
+}

package/src/scss/components/_gallery.scss

@@ -1,163 +1,161 @@
 @use '../abstracts' as *;
 
-.mw-gallery-container {
-  max-width: 1100px;
-  margin: spacing('1') auto;
-}
-
-.mw-gallery {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  border-radius: radius('md');
-
-  &-track {
-    display: flex;
-    transition: transform var(--mw-duration-zoom) var(--mw-ease-in-out);
-
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
-    }
+@layer mw.components {
+  .mw-gallery-container {
+    max-width: 1100px;
+    margin: spacing('1') auto;
   }
 
-  &-slide {
+  .mw-gallery {
+    position: relative;
+    overflow: hidden;
     width: 100%;
-    flex-shrink: 0;
-    aspect-ratio: 16 / 9;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-    }
-  }
-
-  &-navi {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 52px;
-    height: 108px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: spacing('0');
-    border: none;
     border-radius: radius('md');
-    background: rgb(0 0 0 / 40%);
-    color: $fixed-surface-text;
-    font-size: font-size('xl');
-    line-height: 1;
-    cursor: pointer;
-    z-index: z-index('lift');
-    user-select: none;
-    transition: var(--mw-transition);
-    @include tappable;
-
-    &:active {
-      transform: translateY(-50%) scale(0.9);
-      transition-duration: var(--mw-duration-instant);
-    }
 
-    &::before {
-      content: '';
-      position: absolute;
-      inset: -8px;
-      border-radius: inherit;
+    &-track {
+      display: flex;
+      transition: transform var(--mw-duration-zoom) var(--mw-ease-in-out);
     }
 
-    &:hover {
-      background: rgb(0 0 0 / 85%);
+    &-slide {
+      width: 100%;
+      flex-shrink: 0;
+      aspect-ratio: 16 / 9;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
     }
 
-    @include focus-ring;
+    &-navi {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 52px;
+      height: 108px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: spacing('0');
+      border: none;
+      border-radius: radius('md');
+      background: rgb(0 0 0 / 40%);
+      color: $fixed-surface-text;
+      font-size: font-size('xl');
+      line-height: 1;
+      cursor: pointer;
+      z-index: z-index('lift');
+      user-select: none;
+      transition: var(--mw-transition);
+      @include tappable;
+
+      &:active {
+        transform: translateY(-50%) scale(0.9);
+        transition-duration: var(--mw-duration-instant);
+      }
 
-    &-prev {
-      left: spacing('4');
-    }
+      &::before {
+        content: '';
+        position: absolute;
+        inset: -8px;
+        border-radius: inherit;
+      }
 
-    &-next {
-      right: spacing('4');
-    }
-  }
+      &:hover {
+        background: rgb(0 0 0 / 85%);
+      }
 
-  &-desc {
-    text-align: left;
-    padding: spacing('2') spacing('3');
-    margin-top: spacing('2');
-    background: var(--mw-card-background);
-    border-radius: radius('md');
-    border: 1px solid var(--mw-border-accent);
-  }
+      @include focus-ring;
 
-  &-dots {
-    text-align: center;
-    margin-top: spacing('5');
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: spacing('4');
-  }
+      &-prev {
+        left: spacing('4');
+      }
 
-  &-dot {
-    display: inline-block;
-    width: 11px;
-    height: 11px;
-    padding: 0;
-    border: 0;
-    appearance: none;
-    border-radius: radius('full');
-    background: var(--mw-gray-color);
-    cursor: pointer;
-    transition: var(--mw-transition-fast);
-
-    @include tappable;
-    @include focus-ring;
-
-    &.mw-active {
-      transform: scale(1.5);
-      background: var(--mw-primary-color);
+      &-next {
+        right: spacing('4');
+      }
     }
-  }
-}
 
-@include media-down('md') {
-  .mw-gallery {
     &-desc {
-      font-size: font-size('sm');
+      text-align: left;
+      padding: spacing('2') spacing('3');
+      margin-top: spacing('2');
+      background: var(--mw-card-background);
+      border-radius: radius('md');
+      border: 1px solid var(--mw-border-accent);
+    }
+
+    &-dots {
+      text-align: center;
+      margin-top: spacing('5');
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: spacing('4');
     }
+
     &-dot {
-      width: 10px;
-      height: 10px;
+      display: inline-block;
+      width: 11px;
+      height: 11px;
+      padding: 0;
+      border: 0;
+      appearance: none;
+      border-radius: radius('full');
+      background: var(--mw-gray-color);
+      cursor: pointer;
+      transition: var(--mw-transition-fast);
+
+      @include tappable;
+      @include focus-ring;
+
       &.mw-active {
-        transform: scale(1.4);
+        transform: scale(1.5);
+        background: var(--mw-primary-color);
       }
     }
   }
-}
 
-@include media-down('sm') {
-  .mw-gallery {
-    &-slide {
-      aspect-ratio: 4 / 3;
-    }
-    &-navi {
-      width: 46px;
-      height: 88px;
-    }
-    &-desc {
-      font-size: font-size('xs');
-    }
-    &-dots {
-      gap: spacing('2');
-      margin-top: spacing('4');
+  @include media-down('md') {
+    .mw-gallery {
+      &-desc {
+        font-size: font-size('sm');
+      }
+      &-dot {
+        width: 10px;
+        height: 10px;
+        &.mw-active {
+          transform: scale(1.4);
+        }
+      }
     }
-    &-dot {
-      width: 9px;
-      height: 9px;
-      &.mw-active {
-        transform: scale(1.3);
+  }
+
+  @include media-down('sm') {
+    .mw-gallery {
+      &-slide {
+        aspect-ratio: 4 / 3;
+      }
+      &-navi {
+        width: 46px;
+        height: 88px;
+      }
+      &-desc {
+        font-size: font-size('xs');
+      }
+      &-dots {
+        gap: spacing('2');
+        margin-top: spacing('4');
+      }
+      &-dot {
+        width: 9px;
+        height: 9px;
+        &.mw-active {
+          transform: scale(1.3);
+        }
       }
     }
   }

package/src/scss/components/_index.scss

@@ -15,10 +15,12 @@
 @forward 'divider';
 @forward 'dropdown';
 @forward 'empty-state';
+@forward 'flag';
 @forward 'gallery';
 @forward 'info';
 @forward 'kanban';
 @forward 'kbd';
+@forward 'lang-switch';
 @forward 'links';
 @forward 'lists';
 @forward 'localhost-indicator';