maverick-wave 5.38.0 → 6.0.0

package/src/scss/components/_tables.scss

@@ -29,18 +29,6 @@
       background: var(--mw-gray-background);
     }
 
-    // The tinted surface at rest, not the hovered one. A row starts out
-    // transparent, so it takes the whole step in one go - and at the hover tone
-    // it lands close enough to the solid header above it to read as selected
-    // rather than as pointed at. A badge or a tag is already sitting on the
-    // resting tint, which is why the louder one is right there and not here.
-    tr:hover {
-      td {
-        background: var(--mw-primary-background);
-        color: var(--mw-text-color);
-      }
-    }
-
     @include media-up('sm') {
       th,
       td {
@@ -145,11 +133,10 @@
     }
   }
 
-  // Hoverable rows
-  .mw-table-hover {
-    tbody tr:hover {
-      background: var(--mw-primary-background);
-    }
+  // The resting tint: the hover tone next to the solid header reads as selected
+  .mw-table-hover tbody tr:hover > td {
+    background: var(--mw-primary-background);
+    color: var(--mw-text-color);
   }
 
   // Quiet header for data-heavy views
@@ -192,4 +179,160 @@
       --mw-table-scroll-height: 400px;
     }
   }
+
+  // The button sorts, aria-sort says which way - the arrow only repeats it
+  .mw-table th[aria-sort] > button {
+    appearance: none;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    // The header's fill is the ring's usual tone
+    @include focus-ring($color: currentColor);
+  }
+
+  .mw-table th[aria-sort]::after {
+    content: '';
+    display: inline-block;
+    width: 0.55em;
+    height: 0.55em;
+    margin-left: spacing('2');
+    vertical-align: middle;
+    background: currentColor;
+    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+    opacity: 0.45;
+  }
+
+  .mw-table th[aria-sort='ascending']::after {
+    clip-path: polygon(50% 10%, 100% 90%, 0 90%);
+    opacity: 1;
+  }
+
+  .mw-table th[aria-sort='descending']::after {
+    clip-path: polygon(0 10%, 100% 10%, 50% 90%);
+    opacity: 1;
+  }
+
+  // Set by the app or by a checked first cell; an edge too, not colour alone
+  $_selected-row: ':is([aria-selected="true"], .mw-selected, :has(> :first-child input[type="checkbox"]:checked))';
+
+  .mw-table tr#{$_selected-row} > td {
+    background: var(--mw-primary-background-hover);
+    color: var(--mw-text-color);
+
+    &:first-child {
+      box-shadow: inset 3px 0 0 var(--mw-primary-text-color);
+    }
+  }
+
+  // After the table in the markup, so the counter has seen every row first
+  .mw-table-bulk {
+    counter-reset: mw-table-selected;
+  }
+
+  .mw-table-bulk tbody tr > :first-child input[type='checkbox']:checked {
+    counter-increment: mw-table-selected;
+  }
+
+  .mw-table-bulk-bar {
+    position: sticky;
+    bottom: calc(#{spacing('4')} + var(--mw-action-bar-reserve, 0px));
+    z-index: z-index('menu');
+    display: none;
+    align-items: center;
+    gap: spacing('3');
+    width: fit-content;
+    max-width: 100%;
+    margin: spacing('4') auto 0;
+    padding: spacing('2') spacing('2') spacing('2') spacing('5');
+    border-radius: radius-sharp() radius('lg') radius-sharp() radius('lg');
+    background: var(--mw-header-background);
+    color: var(--mw-header-text-color);
+    box-shadow: var(--mw-elevation-4);
+    // Dark in both themes like the header bar, so what sits in it reads dark too
+    color-scheme: dark;
+    --mw-focus-ring-color: var(--mw-header-navbar-list-active-color);
+  }
+
+  .mw-table-bulk:has(tbody tr > :first-child input[type='checkbox']:checked)
+    .mw-table-bulk-bar {
+    display: flex;
+  }
+
+  .mw-table-bulk-count {
+    font-weight: font-weight('medium');
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+
+    // Empty, the bar counts for itself; an app that knows the number writes it
+    &:empty::before {
+      content: counter(mw-table-selected);
+    }
+  }
+
+  // Sticky cells need an opaque tone of their own, or the row slides through
+  .mw-table-sticky-col :is(th, td):first-child {
+    position: sticky;
+    left: 0;
+    z-index: z-index('lift');
+    // A collapsed border stays behind when the cell sticks, so it draws its own
+    box-shadow: inset -1px 0 0 var(--mw-border);
+  }
+
+  .mw-table-sticky-col th:first-child {
+    z-index: z-index('lift') + 1;
+  }
+
+  .mw-table-sticky-col td:first-child {
+    background: var(--mw-card-background);
+  }
+
+  .mw-table-sticky-col tr:nth-child(even) > td:first-child {
+    background: color-mix(
+      in srgb,
+      var(--mw-gray-color) 20%,
+      var(--mw-card-background)
+    );
+  }
+
+  .mw-table-sticky-col.mw-table-hover tr:hover > td:first-child {
+    background: color-mix(
+      in srgb,
+      var(--mw-primary-color) 30%,
+      var(--mw-card-background)
+    );
+  }
+
+  .mw-table-sticky-col tr#{$_selected-row} > td:first-child {
+    background: color-mix(
+      in srgb,
+      var(--mw-primary-color) 50%,
+      var(--mw-card-background)
+    );
+    box-shadow:
+      inset 3px 0 0 var(--mw-primary-text-color),
+      inset -1px 0 0 var(--mw-border);
+  }
+
+  // Forced colours drop fills: selection in Highlight, the arrow in text colour
+  @media (forced-colors: active) {
+    .mw-table tr#{$_selected-row} > td,
+    .mw-table-sticky-col tr#{$_selected-row} > td:first-child {
+      forced-color-adjust: none;
+      background: Highlight;
+      color: HighlightText;
+      box-shadow: none;
+
+      * {
+        color: inherit;
+      }
+    }
+
+    .mw-table th[aria-sort]::after {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+  }
 }

package/src/scss/components/_tabs.scss

@@ -1,6 +1,17 @@
 @use '../abstracts' as *;
 
 @layer mw.components {
+  // aria-selected carries the same state, for a tablist an application renders
+  @mixin _selected {
+    @include active {
+      @content;
+    }
+
+    &[aria-selected='true'] {
+      @content;
+    }
+  }
+
   // Registered, so a half-written value from the script cannot invalidate the
   // whole `transform` and leave the marker somewhere other than at rest.
   // `inherits: true` because the bar is the nav's ::after, and a pseudo element
@@ -85,10 +96,16 @@
         transition-duration: var(--mw-duration-instant);
       }
 
-      @include active() {
+      @include _selected {
         color: var(--mw-primary-text-color);
         border-bottom-color: var(--mw-primary-text-color);
       }
+
+      &:is(:disabled, [aria-disabled='true']) {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
     }
 
     // The active tab is marked by a bar that travels to it rather than appearing
@@ -177,7 +194,7 @@
         border-bottom: none;
         border-right: 2px solid transparent;
 
-        @include active() {
+        @include _selected {
           border-right-color: var(--mw-primary-text-color);
         }
 
@@ -186,7 +203,7 @@
           border-bottom: 2px solid transparent;
           flex-shrink: 0;
 
-          @include active() {
+          @include _selected {
             border-right-color: transparent;
             border-bottom-color: var(--mw-primary-text-color);
           }
@@ -273,7 +290,7 @@
         border: 1px solid var(--mw-border-accent);
         background: var(--mw-card-background);
 
-        @include active() {
+        @include _selected {
           background: var(--mw-primary-color);
           color: var(--mw-primary-accent-text-color);
         }
@@ -289,4 +306,25 @@
       opacity: 1;
     }
   }
+
+  // Forced colours drop the travelling bar and the pill's fill
+  @media (forced-colors: active) {
+    .mw-tabs-nav[data-mw-tabs-marker]::after {
+      forced-color-adjust: none;
+      background: Highlight;
+    }
+
+    .mw-tabs-nav-item:is(.mw-active, .active, [aria-selected='true']) {
+      text-decoration: underline 2px;
+      text-underline-offset: 0.35em;
+    }
+
+    .mw-tabs-pills
+      .mw-tabs-nav-item:is(.mw-active, .active, [aria-selected='true']) {
+      forced-color-adjust: none;
+      background: Highlight;
+      color: HighlightText;
+      text-decoration: none;
+    }
+  }
 }

package/src/scss/components/_tags.scss

@@ -32,7 +32,7 @@
     transition: var(--mw-transition-fast);
     user-select: none;
 
-    &:hover {
+    &:is(a, button):hover {
       background: var(--mw-primary-background-hover);
     }
   }
@@ -77,7 +77,7 @@
       background-color: var(--mw-#{$name}-#{$infix}background);
       border-color: var(--mw-#{$name}-color);
 
-      &:hover {
+      &:is(a, button):hover {
         background: var(--mw-#{$name}-#{$infix}background-hover);
       }
     }
@@ -90,7 +90,7 @@
     border-color: var(--mw-border);
     color: var(--mw-text-muted-color);
 
-    &:hover {
+    &:is(a, button):hover {
       background-color: var(--mw-gray-background);
       border-color: var(--mw-text-muted-color);
       color: var(--mw-text-color);
@@ -107,7 +107,7 @@
     border-color: var(--mw-border);
     color: var(--mw-text-color);
 
-    &:hover {
+    &:is(a, button):hover {
       background-color: var(--mw-surface-muted);
       border-color: var(--mw-border-accent);
     }
@@ -135,4 +135,39 @@
       }
     }
   }
+
+  // A tag that does something - a filter, a link - is a control: ring and floor
+  :is(a, button).mw-tag {
+    font-family: inherit;
+    cursor: pointer;
+    text-decoration: none;
+    @include tappable;
+    @include focus-ring;
+    @include touch-floor(2.25rem);
+  }
+
+  // Pressed fills and ticks, so the state never rests on colour alone
+  :is(a, button).mw-tag:is([aria-pressed='true'], .mw-active) {
+    background: var(--mw-primary-color);
+    border-color: var(--mw-primary-color);
+    color: var(--mw-primary-accent-text-color);
+
+    &::before {
+      content: '';
+      width: 0.3em;
+      height: 0.6em;
+      margin: 0 0.55em 0.15em 0.1em;
+      border: solid currentColor;
+      border-width: 0 0.15em 0.15em 0;
+      rotate: 45deg;
+    }
+  }
+
+  @each $name, $infix in $_mw-tag-colors {
+    :is(a, button).mw-tag-#{$name}:is([aria-pressed='true'], .mw-active) {
+      background: var(--mw-#{$name}-color);
+      border-color: var(--mw-#{$name}-color);
+      color: var(--mw-#{$name}-accent-text-color);
+    }
+  }
 }

package/src/scss/components/_tiles.scss

@@ -60,7 +60,7 @@
     // A tile is tapped, so it needs a press of its own - the lift above never
     // 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) {
+    @include motion-safe {
       &:active {
         transform: scale(0.985);
         transition-duration: var(--mw-duration-instant);

package/src/scss/components/_timelines.scss

@@ -16,10 +16,13 @@
     }
   }
 
+  // Never further than the page gutter, or the slide scrolls the page sideways
   @keyframes mw-slide-in-right {
     from {
       opacity: 0;
-      transform: translateX(60px);
+      transform: translateX(
+        min(60px, calc(var(--mw-container-gutter) - #{spacing('3')}))
+      );
     }
     to {
       opacity: 1;
@@ -27,6 +30,18 @@
     }
   }
 
+  // From the side, a full-width column runs past the screen edge while it plays
+  @keyframes mw-timeline-rise {
+    from {
+      opacity: 0;
+      transform: translateY(24px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
   @keyframes mw-pulse-ring-big {
     0% {
       box-shadow: 0 0 0 0 var(--mw-primary-text-color);
@@ -223,6 +238,7 @@
       // Override odd/even: content always full-width below the date
       &-step:nth-child(odd) &-content,
       &-step:nth-child(even) &-content {
+        animation-name: mw-timeline-rise;
         align-self: stretch;
         width: 100%;
         padding-left: 0;
@@ -305,6 +321,14 @@
       opacity: 0;
     }
 
+    // Every step: the stagger covers ten, an eleventh stayed at opacity 0
+    &-step &-content {
+      animation-name: mw-slide-in-right;
+      animation-duration: var(--mw-duration-slow);
+      animation-timing-function: var(--mw-ease-out);
+      animation-fill-mode: forwards;
+    }
+
     // Staggered animation
     @for $i from 1 through 10 {
       &-step:nth-child(#{$i}) &-content {
@@ -316,6 +340,10 @@
       }
     }
 
+    &-step:nth-child(n + 11) &-content {
+      animation-delay: 2.2s;
+    }
+
     // Active step
     &-step.mw-active &-date,
     &-step.active &-date {
@@ -351,6 +379,115 @@
         align-self: stretch;
         padding-left: spacing('3');
       }
+
+      &-step:nth-child(n) &-content {
+        animation-name: mw-timeline-rise;
+      }
+    }
+  }
+
+  // An activity feed or audit log: many lines, no entrance to wait for
+  .mw-timeline-compact {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: spacing('2');
+      bottom: spacing('2');
+      left: calc(#{spacing('2')} - 1px);
+      width: 2px;
+      background: var(--mw-border);
+    }
+  }
+
+  .mw-timeline-compact-item {
+    --mw-timeline-dot: var(--mw-primary-text-color);
+
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0 spacing('3');
+    padding: 0 0 spacing('4') spacing('6');
+    font-size: font-size('sm');
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+
+    // The dot sits on the line, ringed in the page colour so the line breaks
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0.4em;
+      left: 0;
+      width: spacing('4');
+      height: spacing('4');
+      border-radius: radius('full');
+      background: var(--mw-timeline-dot);
+      box-shadow: 0 0 0 3px var(--mw-page-background);
+    }
+
+    @include media-up('sm') {
+      grid-template-columns: 6.5rem minmax(0, 1fr);
+    }
+  }
+
+  .mw-timeline-compact-time {
+    color: var(--mw-text-muted-color);
+    font-size: font-size('xs');
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+
+    @include media-up('sm') {
+      padding-top: 0.15em;
+    }
+  }
+
+  .mw-timeline-compact-body {
+    min-width: 0;
+    color: var(--mw-text-color);
+    overflow-wrap: anywhere;
+  }
+
+  @each $name, $col in $semantic-colors {
+    .mw-timeline-compact-#{$name} {
+      --mw-timeline-dot: var(--mw-#{$name}-text-color);
+    }
+  }
+
+  // On a surface the ring has to match the surface, not the page
+  :is(.mw-card, .mw-panel, .mw-modal, .mw-app-aside)
+    .mw-timeline-compact-item::before {
+    box-shadow: 0 0 0 3px var(--mw-card-background);
+  }
+
+  // Forced colours drop the lines and dots (fills) and the active date's colour
+  @media (forced-colors: active) {
+    .mw-timeline-big::before,
+    .mw-timeline-simple::before,
+    .mw-timeline-compact::before,
+    .mw-timeline-compact-item::before {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+
+    .mw-timeline-big-step:is(.mw-active, .active)
+      .mw-timeline-big-date-container,
+    .mw-timeline-simple-step:is(.mw-active, .active) .mw-timeline-simple-date {
+      forced-color-adjust: none;
+      background: Highlight;
+      color: HighlightText;
+
+      // The date classes named too: they outweigh a bare `*`
+      *,
+      .mw-timeline-big-date-main,
+      .mw-timeline-big-date-sub {
+        color: inherit;
+      }
     }
   }
 }

package/src/scss/components/_toasts.scss

@@ -37,11 +37,15 @@
       transform: translateX(-50%);
     }
 
+    // The reserve only exists while an action bar holds the foot of the screen
     &-bottom-right {
-      bottom: spacing('5');
+      bottom: calc(#{spacing('5')} + var(--mw-action-bar-reserve, 0px));
       right: spacing('5');
       top: auto;
       left: auto;
+      max-height: calc(
+        100dvh - #{2 * spacing('5')} - var(--mw-action-bar-reserve, 0px)
+      );
       flex-direction: column-reverse;
 
       > * {

package/src/scss/components/_tooltip.scss

@@ -188,6 +188,19 @@
         position-area: block-start;
         transform: rotate(45deg);
       }
+
+      // Beside the trigger, for an icon rail - anchored only, or a scroller cuts it
+      &.mw-tooltip-inline-end {
+        &::before {
+          position-area: inline-end;
+          margin: 0 0 0 ($_mw-tooltip-gap + $_mw-tooltip-arrow);
+        }
+
+        &::after {
+          position-area: inline-end;
+          margin: 0 0 0 $_mw-tooltip-arrow-inset;
+        }
+      }
     }
   }
 }

package/src/scss/form-elements/_checkbox.scss

@@ -37,13 +37,18 @@
     cursor: pointer;
     user-select: none;
     position: relative;
+    isolation: isolate;
 
+    // Row-sized for touch exploration, behind the content so a label link works
     input[type='checkbox'] {
       position: absolute;
-      opacity: 0;
-      width: 0;
-      height: 0;
+      inset: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
       margin: spacing('0');
+      opacity: 0;
+      cursor: inherit;
     }
 
     .mw-checkbox-box {
@@ -76,13 +81,30 @@
       border-color: var(--mw-primary-color);
     }
 
-    input[type='checkbox']:checked + .mw-checkbox-box {
+    &:hover
+      input[type='checkbox']:not(:checked, :indeterminate, :disabled)
+      + .mw-checkbox-box {
+      border-color: var(--mw-gray-color);
+    }
+
+    input[type='checkbox']:is(:checked, :indeterminate) + .mw-checkbox-box {
       border-color: var(--mw-primary-color);
     }
     input[type='checkbox']:checked + .mw-checkbox-box::after {
       transform: translate(-50%, -60%) rotate(-45deg) scale(1);
     }
 
+    // A bar instead of the tick - the "some of them" state of a select-all box
+    input[type='checkbox']:indeterminate + .mw-checkbox-box::after {
+      height: 0;
+      border-left-width: 0;
+      transform: translate(-50%, -50%) scale(1);
+    }
+
+    input[type='checkbox']:is(#{$invalid-states}) + .mw-checkbox-box {
+      border-color: var(--mw-danger-color);
+    }
+
     .mw-checkbox-label {
       font-size: font-size('base');
       color: var(--mw-text-color);
@@ -119,16 +141,19 @@
 
     @each $name, $col in $semantic-colors {
       &-#{$name} {
-        input[type='checkbox']:checked + .mw-checkbox-box {
+        input[type='checkbox']:is(:checked, :indeterminate) + .mw-checkbox-box {
           border-color: #{$col};
         }
-        input[type='checkbox']:checked + .mw-checkbox-box::after {
+        input[type='checkbox']:is(:checked, :indeterminate)
+          + .mw-checkbox-box::after {
           border-color: #{$col};
         }
       }
     }
 
-    &-disabled {
+    // The attribute too: a reactive form disables the input, not the label
+    &-disabled,
+    &:has(input[type='checkbox']:disabled) {
       cursor: not-allowed;
 
       input[type='checkbox'] {
@@ -142,4 +167,12 @@
       }
     }
   }
+
+  // Forced colours drop the halo, which is the whole focus indicator here
+  @media (forced-colors: active) {
+    .mw-checkbox input[type='checkbox']:focus-visible + .mw-checkbox-box {
+      outline: 2px solid;
+      outline-offset: 2px;
+    }
+  }
 }

package/src/scss/form-elements/_form.scss

@@ -169,14 +169,12 @@
   // mw-field-has-error. `:user-invalid` and never `:invalid`, which is true from
   // page load and would mark an empty required field before anyone typed.
   // The class stays authoritative for a validator that lives in the application.
-  .mw-input:user-invalid,
-  .mw-select:user-invalid,
-  .mw-textarea:user-invalid {
+  :is(.mw-input, .mw-select, .mw-textarea):is(#{$invalid-states}) {
     border-color: var(--mw-danger-color);
     @include focus-halo('danger-text-color');
   }
 
-  .mw-field:has(> :user-invalid) > .mw-field-hint {
+  .mw-field:has(> :is(#{$invalid-states})) > .mw-field-hint {
     color: var(--mw-danger-text-color);
   }
 }