maverick-wave 5.26.0 → 5.28.0

package/src/scss/components/_hero-badge.scss

@@ -0,0 +1,48 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  // Glass rather than a fill: on a hero image a solid badge is the loudest thing
+  // on the screen and plain text sinks into the picture.
+  .mw-hero-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: spacing('3');
+    max-width: 100%;
+    margin-bottom: spacing('6');
+    padding: spacing('2') spacing('5');
+    border: 1px solid #{fade('hero-text-color', 22%)};
+    border-radius: 999px;
+    // A vertical ramp and not a flat tint: glass is lit from above, and the
+    // gradient is what gives the pill a thickness instead of a fogged panel
+    background: linear-gradient(
+      to bottom,
+      #{fade('hero-text-color', 16%)},
+      #{fade('hero-text-color', 5%)}
+    );
+    // saturate() is what separates glass from frosted plastic: the blur alone
+    // greys out what shows through, and pushing the chroma back up is how a
+    // real lens reads. The two inset lines are the specular highlight - light
+    // catching the top edge, a fainter bounce off the bottom - and the outer
+    // shadow is what lifts the pill off the photo instead of pasting it on.
+    backdrop-filter: blur(14px) saturate(180%);
+    box-shadow:
+      inset 0 1px 0 #{fade('hero-text-color', 40%)},
+      inset 0 -1px 0 #{fade('hero-text-color', 12%)},
+      0 2px 12px rgb(0 0 0 / 18%);
+    color: fade('hero-text-color', 88%);
+    font-size: font-size('sm');
+    font-weight: font-weight('medium');
+    letter-spacing: 0.02em;
+  }
+
+  // Carries the secondary colour, because the badge is a state, not a label -
+  // override `background` for a different one
+  .mw-hero-badge-dot {
+    width: 8px;
+    height: 8px;
+    flex-shrink: 0;
+    border-radius: radius('full');
+    background: var(--mw-secondary-color);
+  }
+}

package/src/scss/components/_index.scss

@@ -19,6 +19,7 @@
 @forward 'empty-state';
 @forward 'flag';
 @forward 'gallery';
+@forward 'hero-badge';
 @forward 'info';
 @forward 'kanban';
 @forward 'kbd';
@@ -49,3 +50,4 @@
 @forward 'tiles';
 @forward 'timelines';
 @forward 'toasts';
+@forward 'tooltip';

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/_localhost-indicator.scss

@@ -10,11 +10,11 @@
     height: 4px;
     background: var(--mw-warning-color);
     z-index: z-index('modal')-10;
-    animation: pulse-indicator motion(4s) infinite;
+    animation: mw-pulse-indicator motion(4s) infinite;
   }
 
   // Keyframes for the pulsing indicator
-  @keyframes pulse-indicator {
+  @keyframes mw-pulse-indicator {
     0% {
       opacity: 0.5;
       box-shadow: 0 0 3px var(--mw-warning-color);

package/src/scss/components/_panels.scss

@@ -1,6 +1,14 @@
 @use '../abstracts' as *;
 
 @layer mw.components {
+  // -scrollable is the older spelling of -max-height-md
+  $_mw-panel-heights: (
+    'max-height-sm': 300px,
+    'max-height-md': 500px,
+    'max-height-lg': 700px,
+    'scrollable': 500px,
+  );
+
   .mw-panel {
     background: var(--mw-card-background);
     @include surface(2px);
@@ -8,13 +16,15 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    min-height: 100%;
-    margin: spacing('1');
 
     &-header {
       padding: spacing('4') spacing('5');
       border-bottom: 1px solid var(--mw-border-accent);
       display: flex;
+      // A title with an action beside it runs out of room on a phone long
+      // before the title runs out of words
+      flex-wrap: wrap;
+      gap: spacing('3');
       justify-content: space-between;
       align-items: center;
       margin: spacing('0');
@@ -48,7 +58,6 @@
       gap: spacing('3');
     }
 
-    // Panel variants
     &-primary {
       .mw-panel-header {
         background: var(--mw-primary-color);
@@ -72,56 +81,13 @@
       @include corner-accent(2px, 'bottom');
     }
 
-    // Scrollable variant for fixed height
-    &-scrollable {
-      max-height: 500px;
-
-      .mw-panel-body {
-        overflow-y: auto;
-        max-height: calc(500px - #{2 * spacing('4')} - 2px);
-      }
-    }
-
-    // Scrollable variants for max height
-    &-max-height {
-      &-sm {
-        max-height: 300px;
-        min-height: 0;
-        align-self: start;
-        .mw-panel-body {
-          max-height: calc(300px - #{2 * spacing('4')} - 2px);
-          overflow-y: auto;
-        }
-      }
-
-      &-md {
-        max-height: 500px;
-        min-height: 0;
-        align-self: start;
-        .mw-panel-body {
-          max-height: calc(500px - #{2 * spacing('4')} - 2px);
-          overflow-y: auto;
-        }
-      }
-
-      &-lg {
-        max-height: 700px;
-        min-height: 0;
+    // Only the cap - the body already scrolls and already takes what the header
+    // and footer leave it. `align-self` because a grid row stretches its items
+    // first, and a stretched panel reaches the cap from above whatever it says.
+    @each $name, $height in $_mw-panel-heights {
+      &-#{$name} {
+        max-height: $height;
         align-self: start;
-        .mw-panel-body {
-          max-height: calc(700px - #{2 * spacing('4')} - 2px);
-          overflow-y: auto;
-        }
-      }
-    }
-
-    @include media-down('sm') {
-      font-size: font-size('sm');
-
-      &-header {
-        h3 {
-          font-size: font-size('sm');
-        }
       }
     }
   }

package/src/scss/components/_tabs.scss

@@ -132,7 +132,7 @@
         display: block;
         // 1.1s to reveal a tab panel means a second of blank space after every
         // click. A panel switch is a state change, not an entrance.
-        animation: fadeIn var(--mw-duration-base) var(--mw-ease-out);
+        animation: mw-tabs-fade var(--mw-duration-base) var(--mw-ease-out);
       }
     }
 
@@ -281,7 +281,7 @@
     }
   }
 
-  @keyframes fadeIn {
+  @keyframes mw-tabs-fade {
     from {
       opacity: 0;
     }

package/src/scss/components/_tiles.scss

@@ -1,51 +1,8 @@
 @use '../abstracts' as *;
 
 @layer mw.components {
-  .mw-tiles {
-    width: 100%;
-    margin: spacing('0') auto;
-    padding: spacing('0');
-    display: grid;
-    gap: spacing('4');
-    grid-template-columns: 1fr;
-
-    @include media-up('sm') {
-      grid-template-columns: repeat(2, 1fr);
-      width: 80%;
-      padding: spacing('3');
-      gap: spacing('6');
-    }
-
-    @include media-up('lg') {
-      grid-template-columns: repeat(3, 1fr);
-    }
-
-    // The page gutter is the container's job, a second inset only narrows the tile
-    &-4col {
-      @include media-up('sm') {
-        width: 85%;
-        grid-template-columns: repeat(2, 1fr);
-      }
-
-      @include media-up('md') {
-        grid-template-columns: repeat(3, 1fr);
-      }
-
-      @include media-up('lg') {
-        grid-template-columns: repeat(4, 1fr);
-      }
-    }
-
-    &-2col {
-      @include media-up('sm') {
-        width: 75%;
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-  }
-
   // The tile sizes its type off its own width, not the window's. In
-  // `.mw-tiles-4col` on a wide desktop a tile is a quarter of 85% of the page -
+  // `.mw-tiles-4col` on a wide desktop a tile is a quarter of the container -
   // narrower than the same tile alone on a phone, where it used to be the one
   // getting the small type.
   //
@@ -69,7 +26,6 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    cursor: pointer;
 
     // Ahead of the size modifiers below, which take over from 'sm'
     @include media-up('sm') {
@@ -90,13 +46,22 @@
 
     @include hover-move {
       transform: translateY(-2px);
+
+      // The whole tile is the target, unlike a card where the image frame
+      // owns its own hover - a tile is one face, not a stack of regions.
+      .mw-tile-img img {
+        transform: scale(1.05);
+      }
     }
 
     // A tile is tapped, so it needs a press of its own - the lift above never
-    // runs on a finger.
-    &:active {
-      transform: scale(0.985);
-      transition-duration: var(--mw-duration-instant);
+    // runs on a finger. Guarded like every other travel in the framework; what
+    // is left without it is the latched hover, which is feedback enough.
+    @media (prefers-reduced-motion: no-preference) {
+      &:active {
+        transform: scale(0.985);
+        transition-duration: var(--mw-duration-instant);
+      }
     }
 
     &-img {
@@ -145,6 +110,13 @@
         font-size: font-size('sm');
         line-height: 1.3;
 
+        // The ramp the header takes: a tile filling a phone is a wide
+        // container and reads at full size, one squeezed into a desktop
+        // column stays small.
+        @container mw-tile (width >= #{$_mw-tile-narrow}) {
+          font-size: font-size('base');
+        }
+
         &:last-child {
           margin-bottom: spacing('0');
         }
@@ -186,6 +158,10 @@
 
         p {
           font-size: font-size('xs');
+
+          @container mw-tile (width >= #{$_mw-tile-narrow}) {
+            font-size: font-size('sm');
+          }
         }
       }
     }
@@ -225,6 +201,24 @@
     }
   }
 
+  // A tile is only a control when the markup makes it one. The look above is a
+  // surface and stays on a div; everything a finger or a keyboard needs sits
+  // here, where the element itself answers for it - a hand cursor on a div
+  // promises a click nothing handles, and a ring on it would never be reached.
+  a.mw-tile,
+  button.mw-tile {
+    cursor: pointer;
+    // A button brings its own font, alignment and colour, and the tile's own
+    // children set none of the three
+    font: inherit;
+    color: inherit;
+    text-align: inherit;
+    text-decoration: none;
+
+    @include focus-ring;
+    @include tappable;
+  }
+
   // A cramped tile reads better ranged left whatever the window is doing - a
   // centred line inside 200px is two words and a gap. Every selector here is a
   // child: a container cannot answer a query about itself, and the tile *is* the

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);
+      }
+    }
+  }
+}