maverick-wave 6.2.0 → 6.3.0

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.