maverick-wave 5.38.0 → 6.0.0

package/src/scss/components/_segmented.scss

@@ -1,5 +1,7 @@
 @use '../abstracts' as *;
 
+$_segment-on: ':is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], :has(> input:checked))';
+
 @layer mw.components {
   // Two or three positions of *one* switch - income/expense on a booking form,
   // offer/quote on a document form.
@@ -40,7 +42,14 @@
     cursor: pointer;
     transition: var(--mw-transition);
 
-    &:hover:not(:disabled):not(.mw-active):not(.active) {
+    &:hover:not(
+        :disabled,
+        [aria-disabled='true'],
+        :has(> input:disabled),
+        .mw-active,
+        .active,
+        #{$_segment-on}
+      ) {
       color: var(--mw-text-color);
     }
 
@@ -54,15 +63,19 @@
     // Inset, because an outline outside the item would be clipped by the frame
     @include focus-ring-inset;
 
-    &:disabled {
+    &:is(:disabled, [aria-disabled='true']),
+    &:has(> input:disabled) {
       cursor: not-allowed;
       opacity: 0.6;
     }
 
+    // The state from ARIA or from a native radio inside, as much as from the class
     @include active() {
       background: var(--mw-primary-color);
       border-color: var(--mw-primary-text-color);
       color: var(--mw-primary-accent-text-color);
+      // The ring ink is the fill's own tone; the label's ink stands out on it
+      --mw-focus-ring-color: currentColor;
 
       // A tag inside an item - the saving on a billing cycle, a count on a
       // filter. Its colour variants mix their background from the *page*, so on
@@ -101,4 +114,54 @@
       flex: 0 1 auto;
     }
   }
+
+  .mw-segmented-item#{$_segment-on} {
+    background: var(--mw-primary-color);
+    border-color: var(--mw-primary-text-color);
+    color: var(--mw-primary-accent-text-color);
+    --mw-focus-ring-color: currentColor;
+
+    .mw-tag {
+      background: transparent;
+      border-color: currentColor;
+      color: inherit;
+    }
+  }
+
+  .mw-segmented-secondary .mw-segmented-item#{$_segment-on} {
+    background: var(--mw-secondary-color);
+    border-color: var(--mw-secondary-text-color);
+    color: var(--mw-secondary-accent-text-color);
+  }
+
+  // A native radio group: unseen, but kept for the keyboard and the form value
+  .mw-segmented-item:has(> input) {
+    position: relative;
+  }
+
+  .mw-segmented-item > input[type='radio'] {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  .mw-segmented-item:has(> input:focus-visible) {
+    outline: var(--mw-focus-ring-width) solid var(--mw-focus-ring-color);
+    outline-offset: -2px;
+  }
+
+  // Forced colours drop the fill that is the whole state
+  @media (forced-colors: active) {
+    .mw-segmented-item:is(.mw-active, .active),
+    .mw-segmented-item#{$_segment-on} {
+      forced-color-adjust: none;
+      background: Highlight;
+      border-color: Highlight;
+      color: HighlightText;
+    }
+  }
 }

package/src/scss/components/_skeleton.scss

@@ -81,4 +81,12 @@
       gap: spacing('3');
     }
   }
+
+  // The placeholder is nothing but a fill, which forced colours would drop
+  @media (forced-colors: active) {
+    .mw-skeleton {
+      forced-color-adjust: none;
+      background: GrayText;
+    }
+  }
 }

package/src/scss/components/_spinners.scss

@@ -201,4 +201,42 @@
       opacity: 0;
     }
   }
+
+  // In a button or a line of text: sized and coloured by the text around it
+  .mw-spinner-inline {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.125em;
+    border: 0.14em solid color-mix(in srgb, currentColor 25%, transparent);
+    border-top-color: currentColor;
+    border-radius: radius('full');
+    animation-name: mw-spin;
+    animation-duration: motion(0.8s);
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+
+  // One pass at 1ms would leave the dots at their scale(0) end, i.e. gone
+  .mw-spinner-dots > div {
+    @include motion-reduced {
+      animation-name: none;
+    }
+  }
+
+  // Ring, arcs and dots are borders and fills that forced colours flatten
+  @media (forced-colors: active) {
+    .mw-spinner-border,
+    .mw-spinner-dots,
+    .mw-spinner-dual-ring,
+    .mw-spinner-inline {
+      forced-color-adjust: none;
+      --mw-primary-color: CanvasText;
+      --mw-secondary-color: CanvasText;
+      --mw-primary-text-color: CanvasText;
+      --mw-secondary-text-color: CanvasText;
+      --mw-border: GrayText;
+    }
+  }
 }

package/src/scss/components/_stat.scss

@@ -0,0 +1,232 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  // `width: 100%` because inline-size containment otherwise sizes it as if empty
+  .mw-stat {
+    display: flex;
+    flex-direction: column;
+    gap: spacing('1');
+    width: 100%;
+    min-width: 0;
+    container: mw-stat / inline-size;
+  }
+
+  .mw-stat-label {
+    font-size: font-size('sm');
+    font-weight: font-weight('medium');
+    color: var(--mw-text-muted-color);
+  }
+
+  .mw-stat-value {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0 spacing('1');
+    font-size: fluid-container('2xl', '4xl', 180px, 420px);
+    font-weight: font-weight('bold');
+    line-height: 1.1;
+    font-variant-numeric: tabular-nums lining-nums;
+    color: var(--mw-text-color);
+  }
+
+  .mw-stat-unit {
+    font-size: 0.5em;
+    font-weight: font-weight('medium');
+    color: var(--mw-text-muted-color);
+  }
+
+  .mw-stat-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: spacing('1') spacing('3');
+    margin-top: spacing('1');
+  }
+
+  .mw-stat-note {
+    font-size: font-size('xs');
+    color: var(--mw-text-muted-color);
+  }
+
+  // The shape carries the direction, the colour only repeats it
+  .mw-stat-delta {
+    --mw-stat-delta-ink: var(--mw-text-muted-color);
+    --mw-stat-delta-tint: var(--mw-gray-background);
+
+    display: inline-flex;
+    align-items: center;
+    gap: spacing('1');
+    padding: spacing('1') spacing('3');
+    border-radius: radius('xl');
+    background: var(--mw-stat-delta-tint);
+    color: var(--mw-text-color);
+    font-size: font-size('xs');
+    font-weight: font-weight('medium');
+    font-variant-numeric: tabular-nums lining-nums;
+    white-space: nowrap;
+  }
+
+  :is(.mw-stat-delta-up, .mw-stat-delta-down, .mw-stat-delta-flat)::before {
+    content: '';
+    width: 0.6em;
+    height: 0.6em;
+    background: var(--mw-stat-delta-ink);
+  }
+
+  .mw-stat-delta-flat::before {
+    clip-path: inset(38% 0);
+  }
+
+  .mw-stat-delta-up,
+  .mw-stat-delta-invert.mw-stat-delta-down {
+    --mw-stat-delta-ink: var(--mw-success-text-color);
+    --mw-stat-delta-tint: var(--mw-success-info-background);
+  }
+
+  .mw-stat-delta-down,
+  .mw-stat-delta-invert.mw-stat-delta-up {
+    --mw-stat-delta-ink: var(--mw-danger-text-color);
+    --mw-stat-delta-tint: var(--mw-danger-info-background);
+  }
+
+  .mw-stat-delta-up::before {
+    clip-path: polygon(50% 5%, 100% 90%, 0 90%);
+  }
+
+  .mw-stat-delta-down::before {
+    clip-path: polygon(0 10%, 100% 10%, 50% 95%);
+  }
+
+  // A drawn shape loses its background under forced colours, text does not
+  @media (forced-colors: active) {
+    .mw-stat-delta::before {
+      background: CanvasText;
+    }
+  }
+
+  // For an inline <svg> sparkline - the line takes the ink, whatever the viewBox
+  .mw-stat-chart {
+    height: 2.5rem;
+    margin-top: spacing('2');
+    color: var(--mw-primary-text-color);
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+    }
+
+    :is(path, polyline, line) {
+      fill: none;
+      stroke: currentcolor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      vector-effect: non-scaling-stroke;
+    }
+  }
+
+  .mw-stat-group {
+    display: flex;
+    // Spelled out: a card on the same element would turn it into a column
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    container: mw-stat-group / inline-size;
+
+    > .mw-stat {
+      flex: 1 1 100%;
+      padding-block: spacing('4');
+
+      & + .mw-stat {
+        border-top: 1px solid var(--mw-border);
+      }
+
+      &:first-child {
+        padding-top: 0;
+      }
+
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  // A container cannot query itself, so the children decide whether they wrap
+  @container mw-stat-group (width >= 30rem) {
+    .mw-stat-group > .mw-stat {
+      flex: 1 1 0;
+      padding: 0 spacing('5');
+
+      & + .mw-stat {
+        border-top: 0;
+        border-inline-start: 1px solid var(--mw-border);
+      }
+
+      &:first-child {
+        padding-inline-start: 0;
+      }
+
+      &:last-child {
+        padding-inline-end: 0;
+      }
+    }
+  }
+
+  // The native element keeps low / high / optimum, and with them the three tones
+  .mw-meter {
+    appearance: none;
+    display: block;
+    width: 100%;
+    height: 10px;
+    border: 0;
+    border-radius: radius('sm');
+    background: var(--mw-gray-background);
+    overflow: hidden;
+
+    &::-webkit-meter-bar {
+      height: 100%;
+      border: 0;
+      border-radius: radius('sm');
+      background: var(--mw-gray-background);
+    }
+
+    &::-webkit-meter-optimum-value {
+      border-radius: radius('sm');
+      background: var(--mw-success-color);
+    }
+
+    &::-webkit-meter-suboptimum-value {
+      border-radius: radius('sm');
+      background: var(--mw-warning-color);
+    }
+
+    &::-webkit-meter-even-less-good-value {
+      border-radius: radius('sm');
+      background: var(--mw-danger-color);
+    }
+
+    &::-moz-meter-bar {
+      border-radius: radius('sm');
+      background: var(--mw-success-color);
+    }
+
+    &:-moz-meter-sub-optimum::-moz-meter-bar {
+      background: var(--mw-warning-color);
+    }
+
+    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+      background: var(--mw-danger-color);
+    }
+  }
+
+  .mw-meter-sm {
+    height: 6px;
+  }
+
+  .mw-meter-lg {
+    height: 15px;
+    border-radius: radius('lg');
+  }
+}

package/src/scss/components/_stepper.scss

@@ -49,7 +49,9 @@
       // filled circle and so is every finished one, which leaves the hue as the
       // only thing telling them apart - and a stepper is read at a glance, by
       // people who do not all see blue against green.
-      &.mw-active {
+      // aria-current="step" on the step marks it as well, for an app's markup
+      &.mw-active,
+      .mw-stepper-step[aria-current='step'] > & {
         border-color: var(--mw-primary-color);
         background: var(--mw-primary-color);
         color: var(--mw-primary-accent-text-color);
@@ -70,7 +72,8 @@
       line-height: 1.2;
       transition: color var(--mw-duration-base) var(--mw-ease-out);
 
-      &.mw-active {
+      &.mw-active,
+      .mw-stepper-step[aria-current='step'] > & {
         color: var(--mw-primary-text-color);
         font-weight: font-weight('medium');
       }
@@ -147,4 +150,41 @@
       }
     }
   }
+
+  // Forced colours drop the fills: current in Highlight, done inverted
+  @media (forced-colors: active) {
+    .mw-stepper-indicator,
+    .mw-stepper-connector,
+    .mw-stepper-vertical .mw-stepper-step:not(:last-child)::after {
+      forced-color-adjust: none;
+    }
+
+    .mw-stepper-connector,
+    .mw-stepper-vertical .mw-stepper-step:not(:last-child)::after {
+      background: GrayText;
+    }
+
+    .mw-stepper-connector.mw-done,
+    .mw-stepper-vertical .mw-stepper-step.mw-done:not(:last-child)::after {
+      background: CanvasText;
+    }
+
+    .mw-stepper-indicator {
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .mw-stepper-indicator.mw-done {
+      background: CanvasText;
+      color: Canvas;
+    }
+
+    .mw-stepper-indicator.mw-active,
+    .mw-stepper-step[aria-current='step'] > .mw-stepper-indicator {
+      border-color: Highlight;
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
 }

package/src/scss/components/_stories.scss

@@ -308,8 +308,8 @@
   }
 
   // Longhands only in this file: the shorthand would reset the scroll timeline
-  @media (prefers-reduced-motion: no-preference) {
-    .mw-story-reel {
+  .mw-story-reel {
+    @include motion-safe {
       overflow: hidden;
       scroll-snap-type: none;
 
@@ -338,21 +338,25 @@
         display: none;
       }
     }
+  }
 
-    .mw-story-reel-head::after {
+  .mw-story-reel-head::after {
+    @include motion-safe {
       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 {
+  // 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 {
+      @include motion-safe {
         &::before {
           background: segments(rgb(255 255 255 / 35%), $frames);
         }
@@ -363,10 +367,12 @@
         }
       }
     }
+  }
 
-    // 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 {
+  // 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 {
+    @include motion-safe {
       &::before {
         background: segments(rgb(255 255 255 / 35%), $max-frames);
       }
@@ -376,8 +382,10 @@
         animation-duration: $max-frames * $frame-time;
       }
     }
+  }
 
-    .mw-story-reel:is(:active, :has(.mw-story-reel-pause :checked)) {
+  .mw-story-reel:is(:active, :has(.mw-story-reel-pause :checked)) {
+    @include motion-safe {
       > *,
       .mw-story-reel-head::after {
         animation-play-state: paused;
@@ -386,29 +394,35 @@
   }
 
   // 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 {
+  .mw-story-reel-pause,
+  .mw-story-reel-prev,
+  .mw-story-reel-next {
+    @include motion-reduced {
       display: none;
     }
+  }
 
-    .mw-story-reel-head::after {
+  .mw-story-reel-head::after {
+    @include motion-reduced {
       transform-origin: left;
       transform: scaleX(0);
     }
+  }
 
-    @supports (animation-timeline: scroll()) {
-      .mw-story-reel-head::after {
+  @supports (animation-timeline: scroll()) {
+    .mw-story-reel-head::after {
+      @include motion-reduced {
         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 {
+  @supports not (animation-timeline: scroll()) {
+    .mw-story-reel-head {
+      @include motion-reduced {
         &::before,
         &::after {
           display: none;