maverick-wave 4.9.4 → 4.11.0

package/src/scss/components/_buttons.scss

@@ -6,11 +6,15 @@
   align-items: center;
   justify-content: center;
   gap: spacing('3');
-  padding: spacing('3') spacing('4');
+  // Block padding sits a step under the inline one on purpose: the height comes
+  // from --mw-control-height, and padding above that value would override it
+  // and put this button out of line with the field next to it.
+  padding: spacing('2') spacing('4');
   border: 1px solid transparent;
   border-radius: radius('sm');
   font-weight: font-weight('medium');
   line-height: 1.2;
+  min-height: var(--mw-control-height);
   text-decoration: none;
   cursor: pointer;
   transition: var(--mw-transition);
@@ -18,19 +22,24 @@
   font-family: inherit;
   font-size: inherit;
 
-  &:focus-visible {
-    outline: 2px solid var(--mw-primary-text-color);
-    outline-offset: 2px;
+  @include focus-ring;
+  @include tappable;
+
+  &:active:not(:disabled) {
+    transform: translateY(1px);
+    transition-duration: var(--mw-duration-instant);
   }
 
   &:disabled {
     cursor: not-allowed;
     opacity: 0.6;
+    transform: none;
   }
 }
 
 // Color variants
 .mw-btn-primary {
+  @include btn-solid;
   background: var(--mw-primary-color);
   color: var(--mw-primary-accent-text-color);
   &:hover:not(:disabled) {
@@ -43,6 +52,7 @@
   }
 }
 .mw-btn-secondary {
+  @include btn-solid;
   background: var(--mw-secondary-color);
   color: var(--mw-secondary-accent-text-color);
   &:hover:not(:disabled) {
@@ -56,6 +66,7 @@
 }
 // Semantic variants for destructive / confirming actions
 .mw-btn-danger {
+  @include btn-solid;
   background: var(--mw-danger-color);
   color: var(--mw-danger-accent-text-color);
   &:hover:not(:disabled) {
@@ -68,6 +79,7 @@
   }
 }
 .mw-btn-success {
+  @include btn-solid;
   background: var(--mw-success-color);
   color: var(--mw-success-accent-text-color);
   &:hover:not(:disabled) {
@@ -85,7 +97,12 @@
   color: var(--mw-primary-text-color);
   &:hover:not(:disabled) {
     background: var(--mw-primary-color);
+    border-color: var(--mw-primary-color);
     color: var(--mw-primary-accent-text-color);
+    box-shadow: var(--mw-elevation-1);
+  }
+  &:active:not(:disabled) {
+    box-shadow: inset 0 2px 5px color-mix(in srgb, #000 25%, transparent);
   }
   &.mw-active:not(:disabled),
   &.active:not(:disabled) {
@@ -93,26 +110,111 @@
     color: var(--mw-primary-accent-text-color);
   }
 }
-.mw-btn-link {
+
+.mw-btn-link,
+.mw-btn-link-muted {
   background: transparent;
   border: none;
   padding: 0;
-  color: var(--mw-primary-text-color);
+  text-underline-offset: 0.22em;
+  text-decoration-thickness: 1.5px;
+
   &:hover:not(:disabled) {
     text-decoration: underline;
   }
 }
+
+.mw-btn-link {
+  color: var(--mw-primary-text-color);
+}
+
 .mw-btn-link-muted {
-  background: transparent;
-  border: none;
-  padding: 0;
   color: var(--mw-text-muted-color);
   &:hover:not(:disabled) {
     color: var(--mw-primary-text-color);
-    text-decoration: underline;
   }
 }
 
+// The third emphasis level, and the one that was missing. Primary fills, outline
+// draws a line, ghost does neither until you point at it - which is what a
+// toolbar, a card's own actions or a row of icon buttons wants, where five
+// outlined boxes would fight the content they sit on.
+//
+// Not the same as `mw-btn-plain`: this one keeps the button's shape, padding and
+// hit area, it just does not paint them at rest.
+.mw-btn-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--mw-text-color);
+
+  &:hover:not(:disabled) {
+    background: var(--mw-primary-background);
+    color: var(--mw-primary-text-color);
+  }
+
+  &:active:not(:disabled) {
+    background: var(--mw-primary-background-hover);
+  }
+
+  &.mw-active:not(:disabled),
+  &.active:not(:disabled) {
+    background: var(--mw-primary-background);
+    color: var(--mw-primary-text-color);
+  }
+}
+
+.mw-btn-ghost-danger {
+  color: var(--mw-danger-text-color);
+
+  &:hover:not(:disabled) {
+    background: var(--mw-danger-info-background);
+    color: var(--mw-danger-text-color);
+  }
+
+  &:active:not(:disabled) {
+    background: var(--mw-danger-info-background-hover);
+  }
+}
+
+// Square, for a button whose whole label is one icon. Without it the horizontal
+// padding is the only thing setting the width, so an icon button ends up wider
+// than it is tall and a row of them next to a text button lines up on nothing.
+// The width follows the size modifier it is combined with.
+.mw-btn-icon {
+  --mw-btn-icon-size: 2.4rem;
+
+  width: var(--mw-btn-icon-size);
+  height: var(--mw-btn-icon-size);
+  min-width: 0;
+  padding: 0;
+  flex-shrink: 0;
+
+  &.mw-btn-sm {
+    --mw-btn-icon-size: 2rem;
+  }
+
+  &.mw-btn-lg {
+    --mw-btn-icon-size: 2.9rem;
+  }
+
+  // The floor a thumb needs, over the visual size above
+  @media (pointer: coarse), (max-width: #{breakpoint('md')}) {
+    --mw-btn-icon-size: 2.75rem;
+
+    &.mw-btn-sm {
+      --mw-btn-icon-size: 2.5rem;
+    }
+  }
+}
+
+// Full width. Mostly a phone thing - a sign-in button, the one action on a
+// sheet - but also right for a narrow sidebar. `flex` rather than `block`, so
+// the icon-and-label centering the base class sets up still holds.
+.mw-btn-block {
+  display: flex;
+  width: 100%;
+}
+
 // A button that brings nothing but its operability - settings tabs, calendar
 // days, the time in a request row, a modal backdrop. Everywhere a <button> is
 // the right element and a button is the wrong look.
@@ -132,10 +234,7 @@
   text-align: inherit;
   cursor: pointer;
 
-  &:focus-visible {
-    outline: 2px solid var(--mw-primary-text-color);
-    outline-offset: 2px;
-  }
+  @include focus-ring;
 
   &:disabled {
     cursor: not-allowed;
@@ -144,23 +243,28 @@
 }
 
 // Size modifiers
+// Buttons run one step above the fields on font size: a button carries a label,
+// a field carries what the user typed, and the label may be the louder of the
+// two. The heights still match, which is the part that shows.
 .mw-btn-sm {
   padding: spacing('1') spacing('3');
   font-size: font-size('sm');
+  min-height: var(--mw-control-height-sm);
 }
 .mw-btn-lg {
   padding: spacing('3') spacing('5');
   font-size: font-size('md');
+  min-height: var(--mw-control-height-lg);
 }
 
 // In a row of buttons a two-letter label like "Ja" ends up half the width
-// of its neighbour, which reads as an accident
+// of its neighbour, which reads as an accident.
 .mw-modal-footer,
 .mw-form-actions,
 .mw-panel-footer,
 .mw-button-bar,
 .mw-kanban-composer-actions {
-  .mw-btn {
+  .mw-btn:not(.mw-btn-icon) {
     min-width: 80px;
   }
 }
@@ -205,7 +309,7 @@
   height: 18px;
   border-radius: radius('full');
   background: var(--mw-gray-color);
-  color: #efefef;
+  color: $fixed-surface-text;
   border: none;
   padding: 0;
   line-height: 1;
@@ -229,10 +333,22 @@
     opacity: 0.4;
   }
 
+  @include focus-ring(1px);
+  @include tappable;
+
   &:hover:not(:disabled) {
     background: var(--mw-primary-color);
     color: var(--mw-primary-accent-text-color);
   }
+
+  // Springs back rather than easing back - an 18px circle is small enough that
+  // a plain return reads as nothing having happened
+  &:active:not(:disabled) {
+    transform: scale(0.88);
+    transition:
+      transform var(--mw-duration-instant) var(--mw-ease-spring),
+      var(--mw-transition-fast);
+  }
 }
 
 .mw-btn-mini-primary {

package/src/scss/components/_calendar.scss

@@ -25,7 +25,7 @@ $_mw-calendar-dot-tones: (
   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);
 }
 
 // Calendar without its own surface - for one that already sits on a card
@@ -107,6 +107,13 @@ $_mw-calendar-dot-tones: (
   line-height: 1;
   cursor: pointer;
   transition: var(--mw-transition);
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+.mw-calendar-day:active:not(:disabled) {
+  transform: scale(0.92);
+  transition-duration: var(--mw-duration-instant);
 }
 
 .mw-calendar-day.mw-calendar-weekend {
@@ -127,7 +134,7 @@ $_mw-calendar-dot-tones: (
 
 .mw-calendar-day:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--mw-primary-background);
+  @include focus-halo;
   border-color: var(--mw-primary-text-color);
 }
 
@@ -208,6 +215,10 @@ $_mw-calendar-dot-tones: (
 
   .mw-calendar-nav {
     padding: spacing('1') spacing('3');
+    // The nav button is a `.mw-btn` and takes the control scale's minimum
+    // height with it, which is what stopped the compact calendar from being
+    // compact. A date picker header is chrome, not a form control.
+    min-height: var(--mw-control-height-sm);
   }
 
   .mw-calendar-weekday {

package/src/scss/components/_cards.scss

@@ -25,7 +25,7 @@ $_mw-card-addon-colors: (
   border-radius: radius('full');
   background: var(--mw-card-addon-color, var(--mw-primary-color));
   color: var(--mw-card-addon-text-color, var(--mw-primary-accent-text-color));
-  box-shadow: 0 4px 8px var(--mw-shadow);
+  box-shadow: var(--mw-elevation-2);
   transition: var(--mw-transition);
 }
 
@@ -48,7 +48,7 @@ $_mw-card-addon-colors: (
   flex-direction: column;
   background: var(--mw-card-background);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
-  box-shadow: 0 5px 10px var(--mw-shadow);
+  box-shadow: var(--mw-elevation-2);
   border: 1px solid var(--mw-border);
   transition: var(--mw-transition);
   position: relative;
@@ -77,11 +77,18 @@ $_mw-card-addon-colors: (
   }
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 7px 15px var(--mw-shadow);
+    box-shadow: var(--mw-elevation-3);
     border-color: var(--mw-border-accent);
   }
 
+  // The lift moves the box, so it is guarded: on touch `:hover` latches after a
+  // tap and the card stays raised, visibly out of line with the row it sits in.
+  // The colour and shadow below are not - a latched border reads as "the one you
+  // last touched", which is no worse than nothing.
+  @include hover {
+    transform: translateY(-2px);
+  }
+
   // Padded surface for arbitrary content - stays a block container so inline
   // children keep flowing instead of turning into flex items
   &-simple {
@@ -138,7 +145,7 @@ $_mw-card-addon-colors: (
       width: 100%;
       height: 100%;
       object-fit: cover;
-      transition: var(--mw-transition);
+      transition: transform var(--mw-duration-zoom) var(--mw-ease-out);
     }
 
     &:hover img {

package/src/scss/components/_code.scss

@@ -14,6 +14,21 @@ code {
   word-break: break-word;
 }
 
+// Inline code - a token in a sentence, a class name in a table cell - gets a
+// surface of its own so it reads as a quoted thing rather than as prose that
+// changed font halfway through. Only outside a `pre`: the block already paints
+// one, and a second box inside it is just a box inside a box.
+:not(pre) > code {
+  padding: 0.15em 0.4em;
+  border-radius: radius('xs');
+  background: var(--mw-surface-muted);
+  color: var(--mw-text-color);
+  // Mono faces run visibly larger than the body face at the same nominal size.
+  // `em` rather than a step off the scale, so it follows whatever it is set in -
+  // a paragraph, a table cell, a heading.
+  font-size: 0.88em;
+}
+
 pre {
   color: var(--mw-text-color);
   padding: spacing('4');

package/src/scss/components/_coming-soon.scss

@@ -47,11 +47,14 @@
     );
     opacity: 0;
     z-index: z-index('lift');
-    transition: opacity 0.9s ease;
+    transition: opacity var(--mw-duration-slower) var(--mw-ease-out);
   }
 
-  &:hover {
+  @include hover {
     transform: translateY(-3px);
+  }
+
+  &:hover {
     border-style: solid;
 
     .mw-coming-soon-icon {

package/src/scss/components/_content-slider.scss

@@ -58,7 +58,7 @@
     width: 100%;
     height: 100%;
     transform: translateX(100%);
-    transition: transform 0.9s cubic-bezier(0.2, 0, 0.7, 1);
+    transition: transform var(--mw-duration-slower) var(--mw-ease-in-out);
     z-index: z-index('card');
     pointer-events: auto;
 

package/src/scss/components/_dropdown.scss

@@ -0,0 +1,219 @@
+@use '../abstracts' as *;
+
+// ---------------------------------------------------------------------------
+// Dropdown
+//
+// Built on <details>/<summary> rather than a div and a click handler. That one
+// choice buys the whole keyboard contract for free: the trigger is focusable,
+// Enter and Space toggle it, the open state lives in the DOM where a screen
+// reader can see it, and the menu still opens with JavaScript switched off. The
+// script that ships with the framework only adds what markup cannot express -
+// closing on Escape and on a click somewhere else.
+//
+// The menu is absolutely positioned, so an ancestor with `overflow: hidden` -
+// a card with a ribbon, a scroll container - will clip it. That is the same
+// trade the tooltip makes, and for the same reason: the alternative is a fixed
+// element, which breaks the moment any ancestor has a transform.
+// ---------------------------------------------------------------------------
+.mw-dropdown {
+  position: relative;
+  display: inline-block;
+
+  // Safari still draws its own triangle through the shadow DOM
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  > summary {
+    list-style: none;
+    cursor: pointer;
+
+    &::marker {
+      content: '';
+    }
+  }
+
+  // The chevron follows the open state, so the trigger says which way it goes
+  // without a second class to toggle
+  .mw-dropdown-caret {
+    display: inline-flex;
+    transition: transform var(--mw-duration-fast) var(--mw-ease-out);
+  }
+
+  &[open] .mw-dropdown-caret {
+    transform: rotate(180deg);
+  }
+}
+
+.mw-dropdown-menu {
+  position: absolute;
+  top: calc(100% + #{spacing('2')});
+  left: 0;
+  z-index: z-index('menu');
+  min-width: 200px;
+  // Never wider than the screen it opens on, whatever the longest item says
+  max-width: min(320px, calc(100vw - 2 * var(--mw-container-gutter)));
+  padding: spacing('2');
+  background: var(--mw-card-background);
+  border: 1px solid var(--mw-border);
+  border-radius: radius('md');
+  box-shadow: var(--mw-elevation-4);
+  // A long menu scrolls rather than running off the bottom of the page
+  max-height: min(60dvh, 420px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  @include scrollbar;
+
+  // Opens downward and settles, rather than appearing. `@starting-style` gives
+  // the animation somewhere to start from without a class having to be added
+  // by script.
+  animation: mw-dropdown-in var(--mw-duration-fast) var(--mw-ease-out);
+}
+
+@keyframes mw-dropdown-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+
+// Anchor the menu to the trigger's right edge - what a menu near the right of
+// the screen wants, and what an action menu at the end of a row always wants
+.mw-dropdown-end .mw-dropdown-menu {
+  left: auto;
+  right: 0;
+}
+
+// Open upward, for a trigger that sits low on the page
+.mw-dropdown-up .mw-dropdown-menu {
+  top: auto;
+  bottom: calc(100% + #{spacing('2')});
+
+  animation-name: mw-dropdown-in-up;
+}
+
+@keyframes mw-dropdown-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+.mw-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: spacing('3');
+  width: 100%;
+  padding: spacing('3') spacing('3');
+  border: 0;
+  border-radius: radius('sm');
+  background: none;
+  color: var(--mw-text-color);
+  font: inherit;
+  font-size: font-size('sm');
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: var(--mw-transition-fast);
+  @include focus-ring-inset;
+  @include tappable;
+
+  &:hover:not(:disabled) {
+    background: var(--mw-primary-background);
+  }
+
+  &:active:not(:disabled) {
+    background: var(--mw-primary-background-hover);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // The current choice, for a menu that picks rather than acts
+  &.mw-active,
+  &[aria-checked='true'] {
+    background: var(--mw-primary-background);
+    color: var(--mw-primary-text-color);
+    font-weight: font-weight('medium');
+  }
+
+  // Icons keep one column so the labels line up whether or not every item has
+  // one
+  i,
+  fa-icon,
+  svg,
+  [class*='fa-'] {
+    width: 1.1em;
+    flex-shrink: 0;
+    text-align: center;
+    color: var(--mw-text-muted-color);
+  }
+}
+
+// Destructive actions belong at the bottom, behind a divider, in the colour
+// that says so
+.mw-dropdown-item-danger {
+  color: var(--mw-danger-text-color);
+
+  i,
+  fa-icon,
+  svg,
+  [class*='fa-'] {
+    color: inherit;
+  }
+
+  &:hover:not(:disabled) {
+    background: var(--mw-danger-info-background);
+  }
+
+  &:active:not(:disabled) {
+    background: var(--mw-danger-info-background-hover);
+  }
+}
+
+.mw-dropdown-divider {
+  height: 1px;
+  margin: spacing('2') spacing('1');
+  background: var(--mw-border);
+  border: 0;
+}
+
+// A label over a group of items - "Sort by", "Export as"
+.mw-dropdown-label {
+  padding: spacing('2') spacing('3') spacing('1');
+  font-size: font-size('2xs');
+  font-weight: font-weight('bold');
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--mw-text-muted-color);
+}
+
+// The clipping escape hatch, for the framework's own containers that hide their
+// overflow. See the note at the top of this file: an absolutely positioned menu
+// is cut off by any ancestor that clips, and a card with a ribbon or a scrolling
+// table is exactly where an actions menu ends up.
+.mw-card:has(.mw-dropdown[open]),
+.mw-card-body:has(.mw-dropdown[open]),
+.mw-table-responsive:has(.mw-dropdown[open]),
+.mw-tile:has(.mw-dropdown[open]),
+.mw-modal-body:has(.mw-dropdown[open]) {
+  overflow: visible;
+}
+
+// A menu opened by a thumb needs rows a thumb can hit, and the room to show
+// them - so it takes the trigger's full width rather than a 200px column
+// floating beside it.
+@media (pointer: coarse), (max-width: #{breakpoint('sm')}) {
+  .mw-dropdown-menu {
+    min-width: max(100%, 240px);
+  }
+
+  .mw-dropdown-item {
+    min-height: 2.75rem;
+    font-size: font-size('base');
+  }
+}

package/src/scss/components/_gallery.scss

@@ -13,7 +13,7 @@
 
   &-track {
     display: flex;
-    transition: transform 0.3s ease;
+    transition: transform var(--mw-duration-zoom) var(--mw-ease-in-out);
 
     @media (prefers-reduced-motion: reduce) {
       transition: none;
@@ -46,13 +46,19 @@
     border: none;
     border-radius: radius('md');
     background: rgb(0 0 0 / 40%);
-    color: #efefef;
+    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: '';
@@ -65,10 +71,7 @@
       background: rgb(0 0 0 / 85%);
     }
 
-    &:focus-visible {
-      outline: 2px solid var(--mw-primary-text-color);
-      outline-offset: 2px;
-    }
+    @include focus-ring;
 
     &-prev {
       left: spacing('4');
@@ -101,10 +104,16 @@
     display: inline-block;
     width: 11px;
     height: 11px;
-    border-radius: 50%;
+    padding: 0;
+    border: 0;
+    appearance: none;
+    border-radius: radius('full');
     background: var(--mw-gray-color);
     cursor: pointer;
-    transition: transform 0.4s ease;
+    transition: var(--mw-transition-fast);
+
+    @include tappable;
+    @include focus-ring;
 
     &.mw-active {
       transform: scale(1.5);