maverick-wave 3.10.0 → 4.0.0

package/src/scss/components/_pagination.scss

@@ -1,83 +1,70 @@
 @use '../abstracts' as *;
 
+// Same shape as a calendar: a header with an arrow on each side of the title,
+// content below. Both are "one page of something, with a way to the next one",
+// so they get the same frame - only the body differs.
 .mw-pagination {
-  border: 1px solid var(--mw-border);
-  border-radius: radius('lg');
+  padding: spacing('5');
   background: var(--mw-card-background);
-  overflow: hidden;
-
-  &-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: spacing('3');
-    background: var(--mw-primary-color);
-    color: var(--mw-accent-text-color);
-  }
-
-  &-nav {
-    background: none;
-    color: var(--mw-accent-text-color);
-    cursor: pointer;
-    padding: spacing('2') spacing('4');
-    margin: spacing('0') spacing('5');
-    border-radius: radius('sm');
-    border: 1px solid var(--mw-accent-text-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.2s ease;
-    font-size: font-size('lg');
-
-    &:hover {
-      background: var(--mw-primary-color-hover);
-    }
+  border: 1px solid var(--mw-border);
+  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  box-shadow: 0 5px 10px var(--mw-shadow);
+}
 
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
+// The calendar gets its separation from the weekday row - here there is
+// nothing between the title and the body, so it needs a rule of its own
+.mw-pagination-header {
+  display: flex;
+  align-items: center;
+  gap: spacing('3');
+  margin-bottom: spacing('5');
+  padding-bottom: spacing('4');
+  border-bottom: 1px solid var(--mw-border);
+}
 
-  &-title {
-    flex: 1;
-    text-align: center;
-    font-weight: font-weight('medium');
-    font-size: font-size('lg');
-    margin: 0;
-  }
+// Takes the space between the two arrows so the label stays optically centred
+// no matter how long it is
+.mw-pagination-title {
+  flex: 1;
+  min-width: 0;
+  margin: spacing('0');
+  text-align: center;
+  font-size: font-size('md');
+  font-weight: font-weight('medium');
+  color: var(--mw-text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  &-content {
-    padding: spacing('4');
-    min-height: 200px;
-    transition: all 0.3s ease;
+// Sits on .mw-btn - this only squares it off around the chevron
+.mw-pagination-nav {
+  padding: spacing('2') spacing('4');
+  line-height: 1;
+  flex-shrink: 0;
+}
 
-    &.mw-pagination-loading {
-      opacity: 0.6;
-      pointer-events: none;
-    }
-  }
+.mw-pagination-content {
+  min-height: 200px;
+  transition: var(--mw-transition);
+}
 
-  @include media-down('sm') {
-    &-nav {
-      font-size: font-size('md');
-    }
-    &-title {
-      font-size: font-size('md');
-    }
-  }
+// Dims the body while the next page is on its way
+.mw-pagination-content.mw-pagination-loading {
+  opacity: 0.6;
+  pointer-events: none;
 }
 
-// Optional slide animation
+// Optional directional transitions for the swap
 .mw-pagination-slide-left {
-  animation: slideLeft 0.3s ease;
+  animation: mw-pagination-slide-left 0.3s ease;
 }
 
 .mw-pagination-slide-right {
-  animation: slideRight 0.3s ease;
+  animation: mw-pagination-slide-right 0.3s ease;
 }
 
-@keyframes slideLeft {
+@keyframes mw-pagination-slide-left {
   from {
     transform: translateX(20px);
     opacity: 0;
@@ -88,7 +75,7 @@
   }
 }
 
-@keyframes slideRight {
+@keyframes mw-pagination-slide-right {
   from {
     transform: translateX(-20px);
     opacity: 0;
@@ -98,3 +85,20 @@
     opacity: 1;
   }
 }
+
+@include media-down('sm') {
+  .mw-pagination {
+    padding: spacing('4') spacing('3');
+  }
+
+  .mw-pagination-title {
+    font-size: font-size('base');
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mw-pagination-slide-left,
+  .mw-pagination-slide-right {
+    animation: none;
+  }
+}

package/src/scss/components/_segmented.scss

@@ -0,0 +1,85 @@
+@use '../abstracts' as *;
+
+// Two or three positions of *one* switch - income/expense on a booking form,
+// offer/quote on a document form.
+//
+// Deliberately not a `.mw-button-bar`: that one stacks below 576px and gives
+// every button 96% width, which is right for a row of independent actions and
+// wrong here. Stacked, two positions of a switch look like two buttons you
+// could press both of. This one stays horizontal at every width.
+.mw-segmented {
+  display: inline-flex;
+  width: 100%;
+  gap: spacing('1');
+  padding: spacing('1');
+  background: var(--mw-surface-muted);
+  border: 1px solid var(--mw-border);
+  border-radius: radius('sm');
+}
+
+// Equal shares, so the switch reads as one control and not as a row of labels
+.mw-segmented-item {
+  flex: 1 1 0;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: spacing('2');
+  padding: spacing('2') spacing('3');
+  border: 1px solid transparent;
+  border-radius: radius('xs');
+  background: transparent;
+  color: var(--mw-text-muted-color);
+  font-family: inherit;
+  font-size: font-size('sm');
+  font-weight: font-weight('medium');
+  line-height: 1.2;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: var(--mw-transition);
+
+  &:hover:not(:disabled):not(.mw-active):not(.active) {
+    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-color);
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &.mw-active,
+  &.active {
+    background: var(--mw-primary-color);
+    border-color: var(--mw-primary-color);
+    color: var(--mw-accent-text-color);
+  }
+}
+
+// Secondary tone for a switch that is not the primary decision on the form
+.mw-segmented-secondary .mw-segmented-item {
+  &.mw-active,
+  &.active {
+    background: var(--mw-secondary-color);
+    border-color: var(--mw-secondary-color);
+  }
+}
+
+// Sits inline next to a label instead of filling the row. Equal shares are the
+// point of the full-width control; here they would clip the longest label to
+// the width of the shortest, so the items follow their own content instead.
+.mw-segmented-auto {
+  width: auto;
+
+  .mw-segmented-item {
+    flex: 0 1 auto;
+  }
+}

package/src/scss/components/_tables.scss

@@ -56,6 +56,22 @@
   }
 }
 
+// Scroll hint for a table that is known to be wider than its frame.
+//
+// Opt-in, unlike the one on the tab bar, and by a different mechanism. A table
+// paints its own opaque surface, so the gradient trick used on `.mw-tabs-nav`
+// would sit behind the rows and never show. A mask sits in front of the
+// content and works - but masks have no `local` attachment, so it cannot
+// disappear once the last column is reached. Hence the extra class: only put
+// it on a table that really does overflow.
+.mw-table-responsive-hint {
+  mask-image: linear-gradient(
+    to right,
+    #000 calc(100% - 2.5rem),
+    transparent 100%
+  );
+}
+
 // Card view for mobile - clean and simple approach
 .mw-table-cards {
   @include media-down('md') {

package/src/scss/components/_tabs.scss

@@ -11,6 +11,11 @@
     margin-bottom: spacing('3');
     overflow-x: auto;
 
+    // Seven tabs, three of them visible, and nothing saying so - whoever is
+    // looking for the seventh never finds the page. The hint appears only on
+    // the side that still has tabs behind it.
+    @include scroll-hint;
+
     @include media-down('sm') {
       flex-wrap: nowrap;
       -webkit-overflow-scrolling: touch;
@@ -33,6 +38,7 @@
       color: var(--mw-primary-color);
     }
 
+    &.mw-active,
     &.active {
       color: var(--mw-primary-color);
       border-bottom-color: var(--mw-primary-color);
@@ -47,6 +53,7 @@
   &-panel {
     display: none;
 
+    &.mw-active,
     &.active {
       display: block;
       animation: fadeIn 1.1s ease;
@@ -70,6 +77,8 @@
       margin-right: spacing('3');
       min-width: 160px;
       max-width: 200px;
+      // Stacked, so nothing scrolls sideways and the hint would be a lie
+      background-image: none;
 
       @include media-down('sm') {
         flex-direction: row;
@@ -82,6 +91,9 @@
         min-width: 100%;
         overflow-x: auto;
         display: flex;
+
+        // Horizontal again down here, so it comes back
+        @include scroll-hint;
       }
     }
 
@@ -89,6 +101,7 @@
       border-bottom: none;
       border-right: 2px solid transparent;
 
+      &.mw-active,
       &.active {
         border-right-color: var(--mw-primary-color);
       }
@@ -98,6 +111,7 @@
         border-bottom: 2px solid transparent;
         flex-shrink: 0;
 
+        &.mw-active,
         &.active {
           border-right-color: transparent;
           border-bottom-color: var(--mw-primary-color);
@@ -129,6 +143,7 @@
       border: 1px solid var(--mw-border-accent);
       background: var(--mw-card-background);
 
+      &.mw-active,
       &.active {
         background: var(--mw-primary-color);
         color: var(--mw-accent-text-color);

package/src/scss/components/_tags.scss

@@ -97,6 +97,22 @@ $_mw-tag-colors: (
   }
 }
 
+// Neutral variant for plain identifiers - a customer number, a document type,
+// a price on a category. `muted` means "steps back", this one means "no
+// judgement attached": on an invoice card "XRechnung" is a property, while
+// "no e-invoice" is a shortcoming, and the two must not look alike.
+.mw-tags-neutral .mw-tags-item,
+.mw-tag-neutral {
+  background-color: var(--mw-surface-muted);
+  border-color: var(--mw-border);
+  color: var(--mw-text-color);
+
+  &:hover {
+    background-color: var(--mw-surface-muted);
+    border-color: var(--mw-border-accent);
+  }
+}
+
 // Size variants
 // a little more air between the items instead of inside them
 .mw-tags-lg {

package/src/scss/components/_theme-toggle.scss

@@ -33,10 +33,12 @@
     font-size: font-size('md');
   }
 
+  &.mw-active &-slider,
   &.active &-slider {
     left: 35px;
   }
 
+  &.mw-active &-icon,
   &.active &-icon {
     left: 2px;
   }

package/src/scss/components/_timelines.scss

@@ -179,6 +179,7 @@ $_simple-date-width: 110px;
   }
 
   // Active step
+  &-step.mw-active &-date-container,
   &-step.active &-date-container {
     background: var(--mw-primary-color);
     border-color: var(--mw-primary-color);
@@ -209,6 +210,7 @@ $_simple-date-width: 110px;
       left: -22px;
     }
 
+    &-step.mw-active &-date-container,
     &-step.active &-date-container {
       transform: scale(1.05);
     }
@@ -306,6 +308,7 @@ $_simple-date-width: 110px;
   }
 
   // Active step
+  &-step.mw-active &-date,
   &-step.active &-date {
     background: var(--mw-primary-color);
     color: var(--mw-accent-text-color);

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

@@ -46,13 +46,9 @@
     position: relative;
     text-align: right;
 
-    // hint text above the buttons
-    &-hint {
-      width: 100%;
-      font-size: font-size('sm');
-      color: var(--mw-text-muted-color);
-      margin-bottom: spacing('0');
-    }
+    // The note above the buttons is `.mw-actions-note` (see _buttons.scss), so
+    // it looks the same in a form, a modal, a panel and a card. Only its
+    // alignment is the form's business, because a form row can be re-aligned.
 
     // full-width stacked
     &-full-width {
@@ -65,11 +61,21 @@
     &-center {
       justify-content: center;
       text-align: center;
+
+      .mw-actions-note,
+      .mw-form-actions-hint {
+        text-align: center;
+      }
     }
 
     &-left {
       justify-content: flex-start;
       text-align: left;
+
+      .mw-actions-note,
+      .mw-form-actions-hint {
+        text-align: left;
+      }
     }
   }
 

package/src/scss/layout/_header.scss

@@ -243,6 +243,7 @@
     }
 
     // Last, so the current page keeps its look while being hovered
+    &.mw-active,
     &.active {
       color: var(--mw-header-navbar-list-active-color);
       background: var(--mw-primary-background);
@@ -358,11 +359,13 @@
     }
 
     &:hover,
+    &.mw-active,
     &.active {
       color: var(--mw-header-navbar-list-active-color);
     }
 
     &:hover::after,
+    &.mw-active::after,
     &.active::after {
       transform: scaleX(1) !important;
       opacity: 1 !important;

package/src/scss/layout/_main.scss

@@ -9,10 +9,14 @@
 }
 
 .mw-container {
-  width: min(1200px, 89%);
+  width: var(--mw-container-width);
   margin: spacing('0') auto;
   padding: spacing('0');
 
+  @include media-down('sm') {
+    width: var(--mw-container-width-sm);
+  }
+
   // add a hero part for a full size background picture
   @supports (selector(:has(.mw-hero))) {
     // if it has *any* descendant .mw-hero

package/src/scss/layout/_section.scss

@@ -106,7 +106,7 @@
 
 // Additional spacing for the whole section
 .mw-section {
-  padding: spacing('7') spacing('0');
+  padding: var(--mw-section-padding-block) spacing('0');
   position: relative;
 }
 

package/src/scss/utilities/_accessibility.scss

@@ -0,0 +1,14 @@
+@use '../abstracts' as *;
+
+// Visible to screen readers only
+.mw-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/src/scss/utilities/_flex.scss

@@ -95,3 +95,20 @@
     align-self: stretch;
   }
 }
+
+// The most common row in any app: what it is on the left, the value or the
+// action on the right, and on a narrow screen the right half drops below.
+// The `flex-wrap` is the part everyone forgets.
+.mw-row-split {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: spacing('2') spacing('5');
+}
+
+// Same row for content of unequal height - an icon beside text, a button
+// beside a heading. Baseline alignment would hang those off the text.
+.mw-row-split-center {
+  align-items: center;
+}

package/src/scss/utilities/_index.scss

@@ -1,4 +1,6 @@
+@forward 'accessibility';
 @forward 'display';
 @forward 'flex';
 @forward 'spacing';
 @forward 'text';
+@forward 'touch-targets';

package/src/scss/utilities/_text.scss

@@ -14,12 +14,24 @@
     text-align: right;
   }
 
-  // For money and other figures in tables: right-aligned, fixed-width digits
-  // so decimal places line up across rows, and never wrapped mid-number.
-  // Locale-agnostic - works for 1,204.50 and 1.204,50 alike, because the
-  // alignment comes from the right edge, not from the separator.
-  // `lining-nums` guards against fonts that default to old-style figures.
+  // Fixed-width digits, nothing else. For anything where figures have to line
+  // up vertically or must not jitter while they count: a clock, a counter, a
+  // key figure, an ID. `lining-nums` guards against fonts that default to
+  // old-style figures.
+  //
+  // Deliberately without alignment: bundling `text-align: right` in here meant
+  // that whoever only wanted the digits could not use the class and wrote the
+  // declaration out by hand instead.
   &-numeric {
+    font-variant-numeric: tabular-nums lining-nums;
+    font-feature-settings: 'tnum', 'lnum';
+  }
+
+  // For money and other figures in tables: the digits from above, plus
+  // right-aligned and never wrapped mid-number. Locale-agnostic - it works for
+  // 1,204.50 and 1.204,50 alike, because the alignment comes from the right
+  // edge, not from the separator.
+  &-currency {
     text-align: right;
     font-variant-numeric: tabular-nums lining-nums;
     font-feature-settings: 'tnum', 'lnum';

package/src/scss/utilities/_touch-targets.scss

@@ -0,0 +1,54 @@
+@use '../abstracts' as *;
+
+// ---------------------------------------------------------------------------
+// Touch targets
+//
+// WCAG 2.5.8 puts the floor at 24x24 CSS px, and that is a floor, not a goal.
+// The compact sizes are right on a pointing device and too small on a thumb,
+// so they only grow where the input actually is coarse.
+//
+// `pointer: coarse` *or* narrow, not just narrow: a tablet in landscape is
+// wide and still operated with a finger. Loaded last, so these win over the
+// component defaults without needing extra specificity.
+// ---------------------------------------------------------------------------
+@media (pointer: coarse), (max-width: #{breakpoint('md')}) {
+  .mw-btn-sm {
+    min-height: 2.5rem;
+  }
+
+  .mw-input-sm,
+  .mw-select-sm,
+  .mw-textarea-sm {
+    min-height: 2.5rem;
+  }
+
+  // A tab strip is the one navigation a phone has no fallback for
+  .mw-tabs-nav-item {
+    display: flex;
+    align-items: center;
+    min-height: 2.75rem;
+  }
+
+  .mw-segmented-item {
+    min-height: 2.5rem;
+  }
+
+  .mw-calendar-day {
+    min-height: 44px;
+  }
+
+  // The 18px silhouette stays: mini buttons sit in tag rows and table cells,
+  // where growing the circle would shift the layout around them. Only the hit
+  // area grows, to 28px - clear of the 24px floor. The extra margin keeps two
+  // neighbouring hit areas from overlapping.
+  .mw-btn-mini {
+    position: relative;
+    margin-left: spacing('4');
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: -5px;
+    }
+  }
+}