maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_dropdown.scss

@@ -1,219 +1,213 @@
 @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;
-  }
+@layer mw.components {
+  // Built on <details>/<summary>, which buys the whole keyboard contract and an
+  // open state a screen reader can see, and works without JavaScript. The script
+  // only adds Escape and click-outside.
+  //
+  // Absolutely positioned, so an ancestor with `overflow: hidden` clips it - the
+  // same trade the tooltip makes, because a fixed element breaks under a
+  // transformed ancestor.
+  .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;
+    > 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);
+    }
 
-    &::marker {
-      content: '';
+    &[open] .mw-dropdown-caret {
+      transform: rotate(180deg);
     }
   }
 
-  // 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);
+  .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);
+    }
   }
 
-  &[open] .mw-dropdown-caret {
-    transform: rotate(180deg);
+  // 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;
   }
-}
 
-.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);
-}
+  // Open upward, for a trigger that sits low on the page
+  .mw-dropdown-up .mw-dropdown-menu {
+    top: auto;
+    bottom: calc(100% + #{spacing('2')});
 
-@keyframes mw-dropdown-in {
-  from {
-    opacity: 0;
-    transform: translateY(-6px);
+    animation-name: mw-dropdown-in-up;
   }
-}
 
-// 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;
-}
+  @keyframes mw-dropdown-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+  }
 
-// Open upward, for a trigger that sits low on the page
-.mw-dropdown-up .mw-dropdown-menu {
-  top: auto;
-  bottom: calc(100% + #{spacing('2')});
+  .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;
 
-  animation-name: mw-dropdown-in-up;
-}
+    &:hover:not(:disabled) {
+      background: var(--mw-primary-background);
+    }
 
-@keyframes mw-dropdown-in-up {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-}
+    &:active:not(:disabled) {
+      background: var(--mw-primary-background-hover);
+    }
 
-.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);
-  }
+    &:disabled,
+    &[aria-disabled='true'] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
 
-  &:active:not(:disabled) {
-    background: var(--mw-primary-background-hover);
-  }
+    // 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');
+    }
 
-  &:disabled,
-  &[aria-disabled='true'] {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
+    // 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);
+    }
   }
 
-  // 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');
-  }
+  // 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);
 
-  // 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);
-  }
-}
+    i,
+    fa-icon,
+    svg,
+    [class*='fa-'] {
+      color: inherit;
+    }
 
-// 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);
+    &:hover:not(:disabled) {
+      background: var(--mw-danger-info-background);
+    }
 
-  i,
-  fa-icon,
-  svg,
-  [class*='fa-'] {
-    color: inherit;
+    &:active:not(:disabled) {
+      background: var(--mw-danger-info-background-hover);
+    }
   }
 
-  &:hover:not(:disabled) {
-    background: var(--mw-danger-info-background);
+  .mw-dropdown-divider {
+    height: 1px;
+    margin: spacing('2') spacing('1');
+    background: var(--mw-border);
+    border: 0;
   }
 
-  &:active:not(:disabled) {
-    background: var(--mw-danger-info-background-hover);
+  // 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);
   }
-}
 
-.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);
-  }
+  // 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');
+    .mw-dropdown-item {
+      min-height: 2.75rem;
+      font-size: font-size('base');
+    }
   }
 }

package/src/scss/components/_empty-state.scss

@@ -1,73 +1,73 @@
 @use '../abstracts' as *;
 
-.mw-empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: spacing('8') spacing('4');
+@layer mw.components {
+  .mw-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: spacing('8') spacing('4');
 
-  &-icon {
-    font-size: font-size('5xl');
-    color: var(--mw-text-muted-color);
-    opacity: 0.6;
-    margin-bottom: spacing('5');
-    line-height: 1;
-  }
+    &-icon {
+      font-size: font-size('5xl');
+      color: var(--mw-text-muted-color);
+      opacity: 0.6;
+      margin-bottom: spacing('5');
+      line-height: 1;
+    }
 
-  &-title {
-    font-size: font-size('xl');
-    font-weight: font-weight('medium');
-    color: var(--mw-text-color);
-    margin-bottom: spacing('1');
-  }
+    &-title {
+      font-size: font-size('xl');
+      font-weight: font-weight('medium');
+      color: var(--mw-text-color);
+      margin-bottom: spacing('1');
+    }
 
-  &-desc {
-    font-size: font-size('base');
-    color: var(--mw-text-muted-color);
-    max-width: 380px;
-    line-height: 1.6;
-    margin-bottom: spacing('5');
-  }
+    &-desc {
+      font-size: font-size('base');
+      color: var(--mw-text-muted-color);
+      max-width: 380px;
+      line-height: 1.6;
+      margin-bottom: spacing('5');
+    }
 
-  // Small variant
-  &-sm {
-    padding: spacing('6') spacing('4');
+    &-sm {
+      padding: spacing('6') spacing('4');
 
-    .mw-empty-state-icon {
-      font-size: font-size('4xl');
-      margin-bottom: spacing('3');
-    }
+      .mw-empty-state-icon {
+        font-size: font-size('4xl');
+        margin-bottom: spacing('3');
+      }
 
-    .mw-empty-state-title {
-      font-size: font-size('lg');
-    }
+      .mw-empty-state-title {
+        font-size: font-size('lg');
+      }
 
-    .mw-empty-state-desc {
-      font-size: font-size('sm');
-      margin-bottom: spacing('4');
+      .mw-empty-state-desc {
+        font-size: font-size('sm');
+        margin-bottom: spacing('4');
+      }
     }
-  }
 
-  // Color variants (change icon color)
-  &-primary .mw-empty-state-icon {
-    color: var(--mw-primary-text-color);
-    opacity: 0.7;
-  }
+    &-primary .mw-empty-state-icon {
+      color: var(--mw-primary-text-color);
+      opacity: 0.7;
+    }
 
-  &-success .mw-empty-state-icon {
-    color: var(--mw-success-text-color);
-    opacity: 0.7;
-  }
+    &-success .mw-empty-state-icon {
+      color: var(--mw-success-text-color);
+      opacity: 0.7;
+    }
 
-  &-warning .mw-empty-state-icon {
-    color: var(--mw-warning-text-color);
-    opacity: 0.7;
-  }
+    &-warning .mw-empty-state-icon {
+      color: var(--mw-warning-text-color);
+      opacity: 0.7;
+    }
 
-  &-danger .mw-empty-state-icon {
-    color: var(--mw-danger-text-color);
-    opacity: 0.7;
+    &-danger .mw-empty-state-icon {
+      color: var(--mw-danger-text-color);
+      opacity: 0.7;
+    }
   }
 }