maverick-wave 4.9.4 → 4.11.0

package/src/scss/components/_index.scss

@@ -1,6 +1,7 @@
 @forward 'accordions';
 @forward 'alerts';
 @forward 'avatars';
+@forward 'badge';
 @forward 'blog-post';
 @forward 'buttons';
 @forward 'button-bar';
@@ -11,10 +12,12 @@
 @forward 'coming-soon';
 @forward 'content-slider';
 @forward 'divider';
+@forward 'dropdown';
 @forward 'empty-state';
 @forward 'gallery';
 @forward 'info';
 @forward 'kanban';
+@forward 'kbd';
 @forward 'lists';
 @forward 'localhost-indicator';
 @forward 'meta-info';

package/src/scss/components/_info.scss

@@ -23,19 +23,28 @@ $_mw-info-colors: (
   border: 1px solid var(--mw-border);
   border-radius: radius('md');
   transition:
-    transform 0.3s ease,
-    box-shadow 0.3s ease;
+    transform var(--mw-duration-base) var(--mw-ease-out),
+    box-shadow var(--mw-duration-base) var(--mw-ease-out);
   cursor: default;
   text-decoration: none;
 
   &:hover {
+    box-shadow: var(--mw-elevation-3);
+  }
+
+  @include hover {
     transform: translateY(-2px);
-    box-shadow: -1px 6px 9px var(--mw-shadow);
   }
 
   // Interactive variant
   &-clickable {
     cursor: pointer;
+    @include tappable;
+
+    &:active {
+      transform: scale(0.98);
+      transition-duration: var(--mw-duration-instant);
+    }
   }
 
   // Size variants
@@ -77,10 +86,7 @@ a.mw-info,
 button.mw-info {
   cursor: pointer;
 
-  &:focus-visible {
-    outline: 2px solid var(--mw-primary-text-color);
-    outline-offset: 2px;
-  }
+  @include focus-ring;
 }
 
 // Info like mini-buttons
@@ -92,7 +98,7 @@ button.mw-info {
   height: 20px;
   border-radius: radius('full');
   background: var(--mw-gray-color);
-  color: #efefef;
+  color: $fixed-surface-text;
   border: none;
   padding: 0;
   line-height: 1;

package/src/scss/components/_kanban.scss

@@ -18,6 +18,28 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
   }
 }
 
+// A card that has just been pushed to another lane arrives from the side it was
+// pushed from, and takes visibly longer doing it than a new card takes to
+// appear. The two are not the same event: a new card shows up exactly where the
+// eye already is - the composer it was written in - while a moved one lands in a
+// column somewhere else on the board, and has to be found there.
+//
+// Before this the move had no animation at all: the JS re-parented the card and
+// it simply blinked into the other lane.
+@keyframes mw-kanban-card-moved-forward {
+  from {
+    opacity: 0;
+    transform: translateX(-18px);
+  }
+}
+
+@keyframes mw-kanban-card-moved-back {
+  from {
+    opacity: 0;
+    transform: translateX(18px);
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Board
 // ---------------------------------------------------------------------------
@@ -129,7 +151,20 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
   padding: spacing('4');
 
   &.mw-kanban-card-in {
-    animation: mw-kanban-card-in 0.25s ease;
+    animation: mw-kanban-card-in var(--mw-duration-base) var(--mw-ease-out);
+  }
+
+  // `slow` rather than `base` - see the note by the keyframes. Retune the whole
+  // thing through --mw-duration-slow, or give these two rules a duration of
+  // their own if only the board should change.
+  &.mw-kanban-card-moved-forward {
+    animation: mw-kanban-card-moved-forward var(--mw-duration-slow)
+      var(--mw-ease-out);
+  }
+
+  &.mw-kanban-card-moved-back {
+    animation: mw-kanban-card-moved-back var(--mw-duration-slow)
+      var(--mw-ease-out);
   }
 }
 
@@ -225,10 +260,7 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
     color: var(--mw-primary-accent-text-color);
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--mw-primary-text-color);
-    outline-offset: 2px;
-  }
+  @include focus-ring;
 
   &:disabled {
     opacity: 0.35;
@@ -260,7 +292,7 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
 
   &.mw-active {
     display: flex;
-    animation: mw-kanban-card-in 0.2s ease;
+    animation: mw-kanban-card-in var(--mw-duration-fast) var(--mw-ease-out);
   }
 
   // Three lines of description without a scrollbar
@@ -358,6 +390,8 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
 
 @media (prefers-reduced-motion: reduce) {
   .mw-kanban-card.mw-kanban-card-in,
+  .mw-kanban-card.mw-kanban-card-moved-forward,
+  .mw-kanban-card.mw-kanban-card-moved-back,
   .mw-kanban-composer.mw-active {
     animation: none;
   }

package/src/scss/components/_kbd.scss

@@ -0,0 +1,43 @@
+@use '../abstracts' as *;
+
+// Keyboard key
+kbd,
+.mw-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.6em;
+  padding: 0.15em 0.45em;
+  border: 1px solid var(--mw-border);
+  border-bottom-width: 3px;
+  border-radius: radius('xs');
+  background: var(--mw-surface-muted);
+  color: var(--mw-text-color);
+  font-family: var(--mw-font-family-mono);
+  font-size: 0.85em;
+  line-height: 1.4;
+  font-weight: font-weight('medium');
+  white-space: nowrap;
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+}
+
+// A combination - Ctrl + Shift + P - as one unit, so the pluses between the
+// keys are spaced and do not wrap away from what they join
+.mw-kbd-group {
+  display: inline-flex;
+  align-items: center;
+  gap: spacing('1');
+  white-space: nowrap;
+  color: var(--mw-text-muted-color);
+  font-size: font-size('sm');
+}
+
+// A key shown mid-press, for a hint that demonstrates rather than lists
+.mw-kbd-pressed {
+  border-bottom-width: 1px;
+  top: 1px;
+  background: var(--mw-primary-background);
+  border-color: var(--mw-primary-color);
+}

package/src/scss/components/_lists.scss

@@ -110,8 +110,8 @@ $_checkbox-box-offset: 3px;
       transform: scaleX(1);
       transform-origin: left;
       transition:
-        transform 0.2s ease,
-        opacity 0.2s ease;
+        transform var(--mw-duration-fast) var(--mw-ease-out),
+        opacity var(--mw-duration-fast) var(--mw-ease-out);
     }
 
     &:hover {
@@ -177,8 +177,8 @@ $_checkbox-box-offset: 3px;
 
   // Smooth focus management for accessibility
   &:focus-within {
-    outline: 2px solid var(--mw-primary-text-color);
-    outline-offset: 2px;
+    outline: var(--mw-focus-ring-width) solid var(--mw-focus-ring-color);
+    outline-offset: var(--mw-focus-ring-offset);
     border-radius: radius('sm');
   }
 }
@@ -216,9 +216,9 @@ $_checkbox-box-offset: 3px;
     background: var(--mw-card-background);
     border: 1px solid transparent;
     transition:
-      background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-      border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background var(--mw-duration-base) var(--mw-ease-out),
+      border-color var(--mw-duration-base) var(--mw-ease-out),
+      transform var(--mw-duration-base) var(--mw-ease-out);
     overflow: hidden;
 
     &::before {
@@ -229,7 +229,7 @@ $_checkbox-box-offset: 3px;
       bottom: 0;
       width: 0;
       background: var(--mw-primary-text-color);
-      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      transition: width var(--mw-duration-base) var(--mw-ease-out);
     }
 
     // The card carries its own background and radius, so moving the whole
@@ -238,12 +238,15 @@ $_checkbox-box-offset: 3px;
     &:hover {
       background: var(--mw-primary-background-hover);
       border-color: var(--mw-primary-text-color);
-      transform: translateX(8px);
 
       &::before {
         width: 4px;
       }
     }
+
+    @include hover {
+      transform: translateX(8px);
+    }
   }
 }
 
@@ -274,8 +277,8 @@ $_checkbox-box-offset: 3px;
     padding: spacing('3');
     border-bottom: 1px solid var(--mw-border);
     transition:
-      background 0.2s ease,
-      padding-left 0.2s ease;
+      background var(--mw-duration-fast) var(--mw-ease-out),
+      padding-left var(--mw-duration-fast) var(--mw-ease-out);
     position: relative;
 
     // Always present at zero width so it can grow on hover - creating it
@@ -288,7 +291,7 @@ $_checkbox-box-offset: 3px;
       bottom: 0;
       width: 0;
       background: var(--mw-primary-text-color);
-      transition: width 0.2s ease;
+      transition: width var(--mw-duration-fast) var(--mw-ease-out);
     }
 
     &:last-child {
@@ -349,16 +352,16 @@ $_checkbox-box-offset: 3px;
   border-radius: radius('lg');
   overflow: hidden;
   background: var(--mw-card-background);
-  box-shadow: 0 2px 8px var(--mw-shadow);
+  box-shadow: var(--mw-elevation-2);
 
   > * {
     padding: spacing('4');
     border-bottom: 1px solid var(--mw-border);
     transition:
-      background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-      padding-left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-      color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      background var(--mw-duration-fast) var(--mw-ease-out),
+      padding-left var(--mw-duration-fast) var(--mw-ease-out),
+      color var(--mw-duration-fast) var(--mw-ease-out),
+      transform var(--mw-duration-fast) var(--mw-ease-out);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -396,8 +399,8 @@ $_checkbox-box-offset: 3px;
     padding: spacing('3');
     border-bottom: 1px solid var(--mw-border);
     transition:
-      background 0.2s ease,
-      color 0.2s ease;
+      background var(--mw-duration-fast) var(--mw-ease-out),
+      color var(--mw-duration-fast) var(--mw-ease-out);
 
     &:last-child {
       border-bottom: none;
@@ -447,10 +450,10 @@ $_checkbox-box-offset: 3px;
     border-left: 3px solid transparent;
     cursor: pointer;
     transition:
-      background 0.2s ease,
-      color 0.2s ease,
-      transform 0.2s ease,
-      border-left-color 0.2s ease;
+      background var(--mw-duration-fast) var(--mw-ease-out),
+      color var(--mw-duration-fast) var(--mw-ease-out),
+      transform var(--mw-duration-fast) var(--mw-ease-out),
+      border-left-color var(--mw-duration-fast) var(--mw-ease-out);
     user-select: none;
 
     &:last-child {

package/src/scss/components/_modals.scss

@@ -8,14 +8,14 @@
   right: 0;
   bottom: 0;
   background: var(--mw-overlay-background);
-  backdrop-filter: blur(2px);
+  backdrop-filter: blur(3px);
   z-index: z-index('modal')-10;
   display: none;
   align-items: center;
   justify-content: center;
   padding: spacing('7');
   opacity: 0;
-  transition: opacity 0.4s ease;
+  transition: opacity var(--mw-duration-base) var(--mw-ease-out);
 
   // Show modal when class is added
   &.mw-modal-open {
@@ -28,13 +28,15 @@
 .mw-modal {
   background: var(--mw-card-background);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
-  box-shadow: 0 25px 50px var(--mw-shadow);
+  box-shadow: var(--mw-elevation-5);
   max-width: 520px;
   width: 100%;
   max-height: 85dvh;
   display: flex;
   flex-direction: column;
   z-index: z-index('modal');
+  transform: scale(0.96) translateY(12px);
+  transition: transform var(--mw-duration-base) var(--mw-ease-out);
 
   .mw-modal-open & {
     transform: scale(1) translateY(0);
@@ -58,19 +60,66 @@
   }
 }
 
+// Phone: the dialog becomes a sheet
 @include media-down('sm') {
   .mw-modal-overlay {
-    padding: spacing('5');
+    padding: spacing('0');
+    align-items: flex-end;
+  }
+
+  .mw-modal,
+  .mw-modal.mw-modal-sm,
+  .mw-modal.mw-modal-lg,
+  .mw-modal.mw-modal-xl {
+    max-width: 100%;
+    max-height: 92dvh;
+    border-radius: radius('xl') radius('xl') radius('none') radius('none');
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    // Straight up from the bottom edge - a sheet does not scale in
+    transform: translateY(100%);
+    transition: transform var(--mw-duration-slow) var(--mw-ease-out);
+  }
+
+  .mw-modal-open .mw-modal {
+    transform: translateY(0);
+  }
+
+  // The grab handle. It does nothing - there is no drag-to-dismiss behind it -
+  // but it is the mark that says "this came up from the bottom and goes back
+  // down", and a sheet without one reads as a page that got stuck.
+  .mw-modal-header::before {
+    content: '';
+    position: absolute;
+    top: spacing('2');
+    left: 50%;
+    transform: translateX(-50%);
+    width: 36px;
+    height: 4px;
+    border-radius: radius('lg');
+    background: var(--mw-text-muted-color);
+    opacity: 0.45;
+  }
+
+  .mw-modal-header {
+    position: relative;
+    padding: spacing('6') spacing('4') spacing('3');
   }
 
-  .mw-modal-header,
   .mw-modal-footer {
-    padding: spacing('3') spacing('4');
+    padding: spacing('4');
   }
 
   .mw-modal-body {
     padding: spacing('4');
   }
+
+  // On a phone the actions are the reason the sheet is open. Full width, in
+  // reading order, thumb-sized - not two 80px buttons huddled in a corner.
+  .mw-modal-footer .mw-btn {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 2.75rem;
+  }
 }
 
 // Modal sections
@@ -101,6 +150,8 @@
   padding: spacing('4') spacing('5');
   overflow-y: auto;
   flex: 1;
+  overscroll-behavior: contain;
+  @include scrollbar;
 }
 
 .mw-modal-footer {
@@ -126,11 +177,25 @@
   align-items: center;
   justify-content: center;
   color: var(--mw-text-color);
+  transition: var(--mw-transition-fast);
+  @include focus-ring;
+  @include tappable;
 
   &:hover {
     background: var(--mw-primary-color-hover);
     color: var(--mw-primary-accent-text-color);
   }
+
+  &:active {
+    transform: scale(0.92);
+    transition-duration: var(--mw-duration-instant);
+  }
+
+  // The one control on the sheet a thumb has to find without looking
+  @include media-down('sm') {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+  }
 }
 
 // Backdrop for click-outside-to-close.

package/src/scss/components/_pagination.scss

@@ -8,7 +8,7 @@
   background: var(--mw-card-background);
   border: 1px solid var(--mw-border);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
-  box-shadow: 0 5px 10px var(--mw-shadow);
+  box-shadow: var(--mw-elevation-2);
 }
 
 // The calendar gets its separation from the weekday row - here there is
@@ -57,11 +57,12 @@
 
 // Optional directional transitions for the swap
 .mw-pagination-slide-left {
-  animation: mw-pagination-slide-left 0.3s ease;
+  animation: mw-pagination-slide-left var(--mw-duration-base) var(--mw-ease-out);
 }
 
 .mw-pagination-slide-right {
-  animation: mw-pagination-slide-right 0.3s ease;
+  animation: mw-pagination-slide-right var(--mw-duration-base)
+    var(--mw-ease-out);
 }
 
 @keyframes mw-pagination-slide-left {

package/src/scss/components/_panels.scss

@@ -17,27 +17,26 @@
     justify-content: space-between;
     align-items: center;
     margin: spacing('0');
+    border-radius: (radius('sm') - 2px) (radius('xl') - 2px) 0 0;
   }
 
   &-body {
     padding: spacing('4') spacing('5');
     flex: 1;
     overflow-y: auto;
+    @include scrollbar;
+  }
 
-    // Scrollbar styling
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: var(--mw-card-background);
-      border-radius: radius('sm');
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: var(--mw-primary-color-hover);
-      border-radius: radius('sm');
-    }
+  // A dropdown, a tooltip, a date picker - anything a child opens *outside*
+  // itself - is cut off by the two clips above. Lifting them only while such a
+  // menu is open costs nothing the rest of the time, and the alternative is a
+  // menu that shows its first row and nothing else.
+  //
+  // This is the same escape hatch a project needs on its own containers: one
+  // `:has(.mw-dropdown[open]) { overflow: visible }` on whatever is clipping.
+  &:has(.mw-dropdown[open]),
+  &-body:has(.mw-dropdown[open]) {
+    overflow: visible;
   }
 
   &-footer {

package/src/scss/components/_progress.scss

@@ -74,7 +74,7 @@ $_mw-progress-colors: (
     background: var(--mw-secondary-color);
     border-radius: radius('sm');
     width: 0;
-    transition: width 1.9s ease-in-out;
+    transition: width var(--mw-duration-slower) var(--mw-ease-in-out);
   }
 
   // Sizes

package/src/scss/components/_segmented.scss

@@ -45,12 +45,16 @@
     color: var(--mw-text-color);
   }
 
-  // Inset, because an outline outside the item would be clipped by the frame
-  &:focus-visible {
-    outline: 2px solid var(--mw-primary-text-color);
-    outline-offset: -2px;
+  @include tappable;
+
+  &:active {
+    transform: scale(0.97);
+    transition-duration: var(--mw-duration-instant);
   }
 
+  // Inset, because an outline outside the item would be clipped by the frame
+  @include focus-ring-inset;
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.6;

package/src/scss/components/_stepper.scss

@@ -22,7 +22,7 @@
     height: 2px;
     background: var(--mw-border);
     margin-top: spacing('4');
-    transition: background 0.3s ease;
+    transition: background var(--mw-duration-base) var(--mw-ease-out);
 
     &.mw-done {
       background: var(--mw-primary-color);
@@ -65,7 +65,7 @@
     color: var(--mw-text-muted-color);
     text-align: center;
     line-height: 1.2;
-    transition: color 0.3s ease;
+    transition: color var(--mw-duration-base) var(--mw-ease-out);
 
     &.mw-active {
       color: var(--mw-primary-text-color);
@@ -110,7 +110,7 @@
       bottom: 0;
       width: 2px;
       background: var(--mw-border);
-      transition: background 0.3s ease;
+      transition: background var(--mw-duration-base) var(--mw-ease-out);
     }
 
     &.mw-done:not(:last-child)::after {

package/src/scss/components/_tables.scss

@@ -2,14 +2,14 @@
 
 // Base table styles
 .mw-table {
-  width: 98%;
-  margin: spacing('1');
+  width: 100%;
+  margin: spacing('1') spacing('0');
   border-collapse: collapse;
   background: var(--mw-card-background);
 
   th,
   td {
-    padding: spacing('2');
+    padding: spacing('3') spacing('4');
     text-align: left;
     border: 1px solid var(--mw-border);
     color: var(--mw-text-muted-color);
@@ -35,12 +35,9 @@
   }
 
   @include media-down('sm') {
-    width: 100%;
-    margin-inline: spacing('0');
-
     th,
     td {
-      padding: spacing('1') spacing('2');
+      padding: spacing('2') spacing('3');
       font-size: font-size('xs');
     }
   }
@@ -87,7 +84,7 @@
     tr {
       display: block;
       margin-bottom: spacing('3');
-      box-shadow: 0 5px 7px var(--mw-shadow);
+      box-shadow: var(--mw-elevation-2);
       background: var(--mw-card-background);
       cursor: text;
     }

package/src/scss/components/_tabs.scss

@@ -25,19 +25,36 @@
     }
   }
 
+  // Written for a <button>. A tab is the primary navigation of the view it
+  // sits in, and as a <div> it is not focusable, not reachable by keyboard and
+  // announces nothing - the one control on the page a keyboard user cannot get
+  // to. The declarations below clear what comes with a <button>; on a <div>
+  // they change nothing, so old markup keeps working.
   &-nav-item {
+    appearance: none;
+    background: none;
+    border: none;
+    font: inherit;
     padding: spacing('3') spacing('4');
     cursor: pointer;
     font-weight: font-weight('medium');
     color: var(--mw-text-muted-color);
     border-bottom: 2px solid transparent;
-    transition: all 0.3s ease;
+    transition: var(--mw-transition);
     white-space: nowrap;
+    @include tappable;
+    // Inset: a ring outside the item is clipped by the strip's own scroll
+    @include focus-ring-inset;
 
     &:hover {
       color: var(--mw-primary-text-color);
     }
 
+    &:active {
+      color: var(--mw-primary-text-color);
+      transition-duration: var(--mw-duration-instant);
+    }
+
     &.mw-active,
     &.active {
       color: var(--mw-primary-text-color);
@@ -56,7 +73,9 @@
     &.mw-active,
     &.active {
       display: block;
-      animation: fadeIn 1.1s ease;
+      // 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);
     }
   }
 
@@ -139,7 +158,7 @@
     .mw-tabs-nav-item {
       border-radius: radius('xl');
       padding: spacing('4') spacing('5');
-      line-height: 0.9;
+      line-height: 1.2;
       border: 1px solid var(--mw-border-accent);
       background: var(--mw-card-background);