maverick-wave 6.2.0 → 6.4.0

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

@@ -24,6 +24,13 @@
       transition-duration: var(--mw-duration-instant);
     }
 
+    // A theme pinned by the site leaves nothing to switch
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      transform: none;
+    }
+
     &-slider {
       position: absolute;
       left: 3px;
@@ -54,5 +61,17 @@
       font-size: font-size('base');
       transform: rotate(16deg);
     }
+
+    // Both icons in the markup, for an inline SVG the script cannot swap by class
+    &-sun,
+    &.mw-active &-moon,
+    &.active &-moon {
+      display: none;
+    }
+
+    &.mw-active &-sun,
+    &.active &-sun {
+      display: block;
+    }
   }
 }

package/src/scss/components/_toasts.scss

@@ -38,11 +38,10 @@
     }
 
     // The reserve only exists while an action bar holds the foot of the screen
-    &-bottom-right {
+    &-bottom-right,
+    &-bottom-center {
       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)
       );
@@ -53,6 +52,17 @@
       }
     }
 
+    &-bottom-right {
+      right: spacing('5');
+      left: auto;
+    }
+
+    &-bottom-center {
+      left: 50%;
+      right: auto;
+      transform: translateX(-50%);
+    }
+
     // On phones the stack spans the full width at the top
     @include media-down('sm') {
       left: spacing('5');
@@ -60,12 +70,18 @@
       width: auto;
       transform: none;
 
-      &-bottom-right {
+      &-bottom-right,
+      &-bottom-center {
         top: auto;
       }
     }
   }
 
+  // On the wash of its own tone the icon nearly vanishes - the ink does not
+  .mw-toast-stack > .mw-alert .mw-alert-icon {
+    color: var(--mw-text-color);
+  }
+
   @keyframes mw-toast-in {
     from {
       opacity: 0;

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

@@ -46,6 +46,27 @@
       min-height: var(--mw-control-height-lg);
     }
 
+    // A box that looks like the field and holds tags plus the bare input adding them
+    &-tags {
+      cursor: text;
+      @include field-focus('focus-within');
+
+      > .mw-tags {
+        align-items: center;
+      }
+
+      input {
+        flex: 1 1 8rem;
+        min-width: 6rem;
+        padding: spacing('1');
+        border: 0;
+        outline: 0;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+      }
+    }
+
     // Numeric input for money and other figures - the entry counterpart to the
     // `mw-text-numeric` utility, so a value looks the same while being typed and
     // once it is rendered into a table.

package/src/scss/layout/_app-shell.scss

@@ -516,9 +516,11 @@
     @include tappable;
     @include focus-ring-inset;
 
-    // A pill by padding: an icon font's own display cannot push the glyph aside
+    // A pill by padding: an icon font's own display cannot push the glyph aside.
+    // `.mw-icon` for a wrapper around the SVG, such as a component's host.
     > i,
-    > svg {
+    > svg,
+    > .mw-icon {
       padding: 0.35rem 1.1rem;
       border-radius: radius-sharp() radius('lg') radius-sharp() radius('lg');
       font-size: font-size('md');
@@ -556,7 +558,7 @@
     &[aria-current='page'] {
       color: var(--mw-primary-text-color);
 
-      > :is(i, svg) {
+      > :is(i, svg, .mw-icon) {
         background: var(--mw-primary-background);
       }
     }
@@ -564,7 +566,7 @@
     @include active {
       color: var(--mw-primary-text-color);
 
-      > :is(i, svg) {
+      > :is(i, svg, .mw-icon) {
         background: var(--mw-primary-background);
       }
     }

package/src/scss/layout/_header.scss

@@ -502,13 +502,12 @@ $_control-size: 40px;
     }
   }
 
-  // Profile button - a round avatar until there is room for the signed-in name
-  // beside it
-  .mw-profile-btn {
+  // The profile button and the round icon control beside it share one silhouette
+  .mw-profile-btn,
+  .mw-header-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: spacing('3');
     height: $_control-size;
     width: $_control-size;
     padding: spacing('0');
@@ -519,23 +518,12 @@ $_control-size: 40px;
     cursor: pointer;
     transition: var(--mw-transition);
     flex-shrink: 0;
-    max-width: 220px;
 
     @include tappable;
-    @include touch-floor;
 
-    // The avatar brings spacing of its own that would break the pill shape
-    .mw-avatar {
-      margin: spacing('0');
-      box-shadow: none;
-      border-width: 0;
-    }
-
-    &-name {
-      font-size: font-size('sm');
-      font-weight: font-weight('medium');
-      line-height: 1.2;
-      @include truncate;
+    // Round at the grown height too, not an upright oval
+    @include touch-floor {
+      min-width: 2.75rem;
     }
 
     &:hover:not(:disabled) {
@@ -549,6 +537,36 @@ $_control-size: 40px;
       opacity: 0.6;
       cursor: not-allowed;
     }
+  }
+
+  .mw-header-btn {
+    font-size: font-size('md');
+
+    > svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  // Profile button - a round avatar until there is room for the signed-in name
+  // beside it
+  .mw-profile-btn {
+    gap: spacing('3');
+    max-width: 220px;
+
+    // The avatar brings spacing of its own that would break the pill shape
+    .mw-avatar {
+      margin: spacing('0');
+      box-shadow: none;
+      border-width: 0;
+    }
+
+    &-name {
+      font-size: font-size('sm');
+      font-weight: font-weight('medium');
+      line-height: 1.2;
+      @include truncate;
+    }
 
     > i,
     > svg,

package/src/scss/layout/_page-header.scss

@@ -42,6 +42,80 @@
       }
     }
 
+    // Fields are built full width - here they share a row, under the title until there is room
+    &-filters {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: spacing('3');
+      order: 1;
+      flex: 1 1 100%;
+
+      .mw-input {
+        flex: 1 1 7rem;
+        width: auto;
+      }
+
+      .mw-select {
+        flex: 0 1 auto;
+        width: auto;
+      }
+
+      .mw-segmented {
+        flex: 1 0 100%;
+      }
+
+      @include media-up('sm') {
+        .mw-segmented {
+          flex: 0 1 auto;
+        }
+      }
+
+      @include media-up('lg') {
+        order: 0;
+        flex: 0 1 auto;
+        margin-left: auto;
+
+        .mw-input {
+          flex: none;
+          width: 14rem;
+        }
+      }
+    }
+
+    // For an app screen, where every line of header costs list rows
+    &-compact {
+      margin-bottom: spacing('4');
+      padding-bottom: spacing('3');
+
+      h1,
+      h2,
+      h3 {
+        font-size: font-size('md');
+      }
+
+      @include media-up('sm') {
+        margin-bottom: spacing('6');
+        padding-bottom: spacing('4');
+
+        h1,
+        h2,
+        h3 {
+          font-size: font-size('lg');
+        }
+      }
+    }
+
+    // Opaque, or rows shine through; not on a phone, where it would take a third of the screen
+    &-sticky {
+      @include media-up('sm') {
+        position: sticky;
+        top: var(--mw-header-height);
+        z-index: z-index('card');
+        background: var(--mw-page-background);
+      }
+    }
+
     &-plain {
       padding-bottom: spacing('0');
       border-bottom: none;

package/src/scss/utilities/_display.scss

@@ -91,6 +91,11 @@
     overflow: hidden;
   }
 
+  // A field sized by its content in a row of controls - fields fill their column
+  .mw-w-auto {
+    width: auto;
+  }
+
   // Snap a horizontal strip so it comes to rest on an item instead of halfway
   // between two - a row of cards swiped through on a phone
   .mw-snap-x {

package/src/scss/utilities/_print.scss

@@ -52,6 +52,8 @@
     .mw-theme-toggle,
     .mw-skip-link,
     .mw-toast-stack,
+    .mw-page-header-filters,
+    .mw-page-header-actions,
     .mw-hide-print {
       display: none;
     }

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

@@ -130,6 +130,11 @@
       @include hit-area(5px);
     }
 
+    // Already positioned in its ribbon, which is all the hit area needs
+    .mw-announcement > .mw-announcement-close {
+      position: absolute;
+    }
+
     // Edit and delete on a ticket. The 32px box stays - a 44px one would push
     // the assignee off the card footer - and the row carries the gap the two
     // grown hit areas need, or they overlap and a tap meant for edit deletes.