maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_stepper.scss

@@ -1,147 +1,147 @@
 @use 'sass:math';
 @use '../abstracts' as *;
 
-// Horizontal
-.mw-stepper {
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-
-  &-step {
+@layer mw.components {
+  .mw-stepper {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: spacing('2');
-    flex: 1;
-    min-width: 0;
-  }
-
-  // Horizontal connector line between steps
-  &-connector {
-    flex: 1;
-    height: 2px;
-    background: var(--mw-border);
-    margin-top: spacing('4');
-    transition: background var(--mw-duration-base) var(--mw-ease-out);
-
-    &.mw-done {
-      background: var(--mw-primary-color);
+    align-items: flex-start;
+    width: 100%;
+
+    &-step {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: spacing('2');
+      flex: 1;
+      min-width: 0;
     }
-  }
 
-  // Step circle with number or icon
-  &-indicator {
-    width: 28px;
-    height: 28px;
-    border-radius: radius('full');
-    border: 2px solid var(--mw-border);
-    background: var(--mw-card-background);
-    color: var(--mw-text-muted-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: font-size('sm');
-    font-weight: font-weight('bold');
-    transition: var(--mw-transition);
-    flex-shrink: 0;
-    user-select: none;
-
-    &.mw-active {
-      border-color: var(--mw-primary-color);
-      background: var(--mw-primary-color);
-      color: var(--mw-primary-accent-text-color);
-    }
+    &-connector {
+      flex: 1;
+      height: 2px;
+      background: var(--mw-border);
+      margin-top: spacing('4');
+      transition: background var(--mw-duration-base) var(--mw-ease-out);
 
-    &.mw-done {
-      border-color: var(--mw-success-color);
-      background: var(--mw-success-color);
-      color: var(--mw-success-accent-text-color);
+      &.mw-done {
+        background: var(--mw-primary-color);
+      }
     }
-  }
 
-  // Step label below the circle
-  &-label {
-    font-size: font-size('xs');
-    color: var(--mw-text-muted-color);
-    text-align: center;
-    line-height: 1.2;
-    transition: color var(--mw-duration-base) var(--mw-ease-out);
-
-    &.mw-active {
-      color: var(--mw-primary-text-color);
-      font-weight: font-weight('medium');
-    }
+    &-indicator {
+      width: 28px;
+      height: 28px;
+      border-radius: radius('full');
+      border: 2px solid var(--mw-border);
+      background: var(--mw-card-background);
+      color: var(--mw-text-muted-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: font-size('sm');
+      font-weight: font-weight('bold');
+      transition: var(--mw-transition);
+      flex-shrink: 0;
+      user-select: none;
+
+      // The halo is what says "you are here". Without it the current step is a
+      // filled circle and so is every finished one, which leaves the hue as the
+      // only thing telling them apart - and a stepper is read at a glance, by
+      // people who do not all see blue against green.
+      &.mw-active {
+        border-color: var(--mw-primary-color);
+        background: var(--mw-primary-color);
+        color: var(--mw-primary-accent-text-color);
+        @include focus-halo;
+      }
 
-    &.mw-done {
-      color: var(--mw-success-text-color);
+      &.mw-done {
+        border-color: var(--mw-success-color);
+        background: var(--mw-success-color);
+        color: var(--mw-success-accent-text-color);
+      }
     }
-  }
 
-  @include media-down('sm') {
     &-label {
       font-size: font-size('2xs');
+      color: var(--mw-text-muted-color);
+      text-align: center;
+      line-height: 1.2;
+      transition: color var(--mw-duration-base) var(--mw-ease-out);
+
+      &.mw-active {
+        color: var(--mw-primary-text-color);
+        font-weight: font-weight('medium');
+      }
+
+      &.mw-done {
+        color: var(--mw-success-text-color);
+      }
     }
-  }
-}
 
-// Vertical
-.mw-stepper-vertical {
-  display: flex;
-  flex-direction: column;
+    @include media-up('sm') {
+      &-label {
+        font-size: font-size('xs');
+      }
+    }
+  }
 
-  .mw-stepper-step {
+  .mw-stepper-vertical {
     display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    gap: spacing('3');
-    position: relative;
-    padding-bottom: spacing('5');
+    flex-direction: column;
 
-    &:last-child {
-      padding-bottom: spacing('0');
-    }
+    .mw-stepper-step {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      gap: spacing('3');
+      position: relative;
+      padding-bottom: spacing('5');
 
-    // Connecting line drawn below each step (except last)
-    &:not(:last-child)::after {
-      content: '';
-      position: absolute;
-      left: calc(#{spacing('7')} / 2 - 1px);
-      top: spacing('7');
-      bottom: 0;
-      width: 2px;
-      background: var(--mw-border);
-      transition: background var(--mw-duration-base) var(--mw-ease-out);
-    }
+      &:last-child {
+        padding-bottom: spacing('0');
+      }
+
+      &:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        left: calc(#{spacing('7')} / 2 - 1px);
+        top: spacing('7');
+        bottom: 0;
+        width: 2px;
+        background: var(--mw-border);
+        transition: background var(--mw-duration-base) var(--mw-ease-out);
+      }
 
-    &.mw-done:not(:last-child)::after {
-      background: var(--mw-primary-text-color);
+      &.mw-done:not(:last-child)::after {
+        background: var(--mw-primary-text-color);
+      }
     }
-  }
 
-  .mw-stepper-indicator {
-    flex-shrink: 0;
-  }
+    .mw-stepper-indicator {
+      flex-shrink: 0;
+    }
 
-  // Content area next to the indicator
-  .mw-stepper-content {
-    flex: 1;
-    margin-left: spacing('1');
+    .mw-stepper-content {
+      flex: 1;
+      margin-left: spacing('1');
 
-    &-title {
-      font-size: font-size('base');
-      font-weight: font-weight('medium');
-      color: var(--mw-text-color);
-      margin-bottom: spacing('1');
+      &-title {
+        font-size: font-size('base');
+        font-weight: font-weight('medium');
+        color: var(--mw-text-color);
+        margin-bottom: spacing('1');
 
-      .mw-stepper-step.mw-active & {
-        color: var(--mw-primary-text-color);
+        .mw-stepper-step.mw-active & {
+          color: var(--mw-primary-text-color);
+        }
       }
-    }
 
-    &-desc {
-      font-size: font-size('sm');
-      color: var(--mw-text-muted-color);
-      line-height: 1.5;
+      &-desc {
+        font-size: font-size('sm');
+        color: var(--mw-text-muted-color);
+        line-height: 1.5;
+      }
     }
   }
 }

package/src/scss/components/_tables.scss

@@ -1,186 +1,193 @@
 @use '../abstracts' as *;
 
-// Base table styles
-.mw-table {
-  width: 100%;
-  margin: spacing('1') spacing('0');
-  border-collapse: collapse;
-  background: var(--mw-card-background);
-
-  th,
-  td {
-    padding: spacing('3') spacing('4');
-    text-align: left;
-    border: 1px solid var(--mw-border);
-    color: var(--mw-text-muted-color);
-  }
-
-  th {
-    font-weight: font-weight('medium');
-    color: var(--mw-primary-accent-text-color);
-    background: var(--mw-primary-color);
-    user-select: none;
-  }
-
-  // Zebra striping
-  tr:nth-child(even) {
-    background: var(--mw-gray-background);
-  }
-
-  tr:hover {
-    td {
-      background: var(--mw-primary-background-hover);
-      color: var(--mw-text-color);
-    }
-  }
+@layer mw.components {
+  // Base table styles
+  .mw-table {
+    width: 100%;
+    margin: spacing('1') spacing('0');
+    border-collapse: collapse;
+    background: var(--mw-card-background);
 
-  @include media-down('sm') {
     th,
     td {
-      padding: spacing('2') spacing('3');
-      font-size: font-size('xs');
+      padding: spacing('3') spacing('4');
+      text-align: left;
+      border: 1px solid var(--mw-border);
+      color: var(--mw-text-muted-color);
     }
-  }
-}
-
-// Responsive table container
-.mw-table-responsive {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  margin: spacing('1');
 
-  .mw-table {
-    margin-bottom: spacing('0');
-  }
-}
-
-// 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') {
-    // Hide table header on mobile
-    thead {
-      display: none;
+    th {
+      font-weight: font-weight('medium');
+      color: var(--mw-primary-accent-text-color);
+      background: var(--mw-primary-color);
+      user-select: none;
     }
 
-    // Make each row a card
-    tr {
-      display: block;
-      margin-bottom: spacing('3');
-      box-shadow: var(--mw-elevation-2);
-      background: var(--mw-card-background);
-      cursor: text;
+    // Zebra striping
+    tr:nth-child(even) {
+      background: var(--mw-gray-background);
     }
 
-    // Style each cell as a row in the card
-    td {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: spacing('1') spacing('4');
-
-      // Add the column header as a label
-      &::before {
-        content: attr(data-label);
-        font-weight: font-weight('medium');
+    // The tinted surface at rest, not the hovered one. A row starts out
+    // transparent, so it takes the whole step in one go - and at the hover tone
+    // it lands close enough to the solid header above it to read as selected
+    // rather than as pointed at. A badge or a tag is already sitting on the
+    // resting tint, which is why the louder one is right there and not here.
+    tr:hover {
+      td {
+        background: var(--mw-primary-background);
         color: var(--mw-text-color);
-        flex: 1;
-        text-align: left;
       }
+    }
 
-      // The cell value
-      span,
-      a,
-      div {
-        flex: 2;
-        text-align: right;
+    @include media-down('sm') {
+      th,
+      td {
+        padding: spacing('2') spacing('3');
+        font-size: font-size('xs');
       }
     }
+  }
+
+  // Responsive table container
+  .mw-table-responsive {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin: spacing('1');
 
-    // Add some visual separation between cards
-    tr:not(:last-child) {
-      margin-bottom: spacing('4');
+    .mw-table {
+      margin-bottom: spacing('0');
     }
   }
-}
 
-// Compact table
-.mw-table-compact {
-  th,
-  td {
-    padding: spacing('1') spacing('2');
-    font-size: font-size('sm');
+  // 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') {
+      // Hide table header on mobile
+      thead {
+        display: none;
+      }
+
+      // Make each row a card
+      tr {
+        display: block;
+        margin-bottom: spacing('3');
+        box-shadow: var(--mw-elevation-2);
+        background: var(--mw-card-background);
+        cursor: text;
+      }
+
+      // Style each cell as a row in the card
+      td {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: spacing('1') spacing('4');
+
+        // Add the column header as a label
+        &::before {
+          content: attr(data-label);
+          font-weight: font-weight('medium');
+          color: var(--mw-text-color);
+          flex: 1;
+          text-align: left;
+        }
+
+        // The cell value
+        span,
+        a,
+        div {
+          flex: 2;
+          text-align: right;
+        }
+      }
+
+      // Add some visual separation between cards
+      tr:not(:last-child) {
+        margin-bottom: spacing('4');
+      }
+    }
   }
 
-  @include media-down('sm') {
+  // Compact table
+  .mw-table-compact {
     th,
     td {
+      padding: spacing('1') spacing('2');
       font-size: font-size('2xs');
     }
-  }
-}
 
-// Hoverable rows
-.mw-table-hover {
-  tbody tr:hover {
-    background: var(--mw-primary-background-hover);
+    @include media-up('sm') {
+      th,
+      td {
+        font-size: font-size('sm');
+      }
+    }
   }
-}
 
-// Quiet header for data-heavy views
-.mw-table-subtle {
-  th {
-    background: color-mix(
-      in srgb,
-      var(--mw-gray-color) 20%,
-      var(--mw-card-background)
-    );
-    color: var(--mw-text-color);
-    border-bottom: 2px solid var(--mw-border-accent);
+  // Hoverable rows
+  .mw-table-hover {
+    tbody tr:hover {
+      background: var(--mw-primary-background);
+    }
   }
-}
 
-// Header stays visible while the body scrolls
-.mw-table-sticky-head {
-  th {
-    position: sticky;
-    top: spacing('0');
-    z-index: z-index('lift');
-    box-shadow:
-      inset 0 1px 0 var(--mw-border),
-      inset 0 -1px 0 var(--mw-border);
+  // Quiet header for data-heavy views
+  .mw-table-subtle {
+    th {
+      background: color-mix(
+        in srgb,
+        var(--mw-gray-color) 20%,
+        var(--mw-card-background)
+      );
+      color: var(--mw-text-color);
+      border-bottom: 2px solid var(--mw-border-accent);
+    }
   }
-}
-
-.mw-table-responsive-scroll {
-  @extend .mw-table-responsive;
-  --mw-table-scroll-height: 400px;
-  max-height: var(--mw-table-scroll-height);
-  overflow-y: auto;
 
-  .mw-table {
-    margin-top: spacing('0');
+  // Header stays visible while the body scrolls
+  .mw-table-sticky-head {
+    th {
+      position: sticky;
+      top: spacing('0');
+      z-index: z-index('lift');
+      box-shadow:
+        inset 0 1px 0 var(--mw-border),
+        inset 0 -1px 0 var(--mw-border);
+    }
   }
 
-  // Rows get shorter on small screens
-  @include media-down('sm') {
+  .mw-table-responsive-scroll {
+    @extend .mw-table-responsive;
     --mw-table-scroll-height: 260px;
+    max-height: var(--mw-table-scroll-height);
+    overflow-y: auto;
+
+    .mw-table {
+      margin-top: spacing('0');
+    }
+
+    // Rows get shorter on small screens
+    @include media-up('sm') {
+      --mw-table-scroll-height: 400px;
+    }
   }
 }