maverick-wave 4.27.0 → 5.0.0

package/src/scss/components/_pagination.scss

@@ -1,105 +1,99 @@
 @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 {
-  padding: spacing('5');
-  background: var(--mw-card-background);
-  border: 1px solid var(--mw-border);
-  @include surface;
-  box-shadow: var(--mw-elevation-2);
-}
-
-// 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);
-}
-
-// 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;
-}
-
-// 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-content {
-  min-height: 200px;
-  transition: var(--mw-transition);
-}
+@layer mw.components {
+  // 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 {
+    padding: spacing('4') spacing('3');
+    background: var(--mw-card-background);
+    border: 1px solid var(--mw-border);
+    @include surface;
+    box-shadow: var(--mw-elevation-2);
+  }
 
-// Dims the body while the next page is on its way
-.mw-pagination-content.mw-pagination-loading {
-  opacity: 0.6;
-  pointer-events: none;
-}
+  // 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);
+  }
 
-// Optional directional transitions for the swap
-.mw-pagination-slide-left {
-  animation: mw-pagination-slide-left var(--mw-duration-base) var(--mw-ease-out);
-}
+  // 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('base');
+    font-weight: font-weight('medium');
+    color: var(--mw-text-color);
+    @include truncate;
+  }
 
-.mw-pagination-slide-right {
-  animation: mw-pagination-slide-right var(--mw-duration-base)
-    var(--mw-ease-out);
-}
+  // 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;
+  }
 
-@keyframes mw-pagination-slide-left {
-  from {
-    transform: translateX(20px);
-    opacity: 0;
+  .mw-pagination-content {
+    min-height: 200px;
+    transition: var(--mw-transition);
   }
-  to {
-    transform: translateX(0);
-    opacity: 1;
+
+  // Dims the body while the next page is on its way
+  .mw-pagination-content.mw-pagination-loading {
+    opacity: 0.6;
+    pointer-events: none;
   }
-}
 
-@keyframes mw-pagination-slide-right {
-  from {
-    transform: translateX(-20px);
-    opacity: 0;
+  // Optional directional transitions for the swap
+  .mw-pagination-slide-left {
+    animation: mw-pagination-slide-left var(--mw-duration-base)
+      var(--mw-ease-out);
   }
-  to {
-    transform: translateX(0);
-    opacity: 1;
+
+  .mw-pagination-slide-right {
+    animation: mw-pagination-slide-right var(--mw-duration-base)
+      var(--mw-ease-out);
   }
-}
 
-@include media-down('sm') {
-  .mw-pagination {
-    padding: spacing('4') spacing('3');
+  @keyframes mw-pagination-slide-left {
+    from {
+      transform: translateX(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
   }
 
-  .mw-pagination-title {
-    font-size: font-size('base');
+  @keyframes mw-pagination-slide-right {
+    from {
+      transform: translateX(-20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .mw-pagination-slide-left,
-  .mw-pagination-slide-right {
-    animation: none;
+  @include media-up('sm') {
+    .mw-pagination {
+      padding: spacing('5');
+    }
+
+    .mw-pagination-title {
+      font-size: font-size('md');
+    }
   }
 }

package/src/scss/components/_panels.scss

@@ -1,125 +1,127 @@
 @use '../abstracts' as *;
 
-.mw-panel {
-  background: var(--mw-card-background);
-  @include surface(2px);
-  border: 2px solid var(--mw-border);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  margin: spacing('1');
-
-  &-header {
-    padding: spacing('4') spacing('5');
-    border-bottom: 1px solid var(--mw-border-accent);
+@layer mw.components {
+  .mw-panel {
+    background: var(--mw-card-background);
+    @include surface(2px);
+    border: 2px solid var(--mw-border);
+    overflow: hidden;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: spacing('0');
-    border-radius: (radius('sm') - 2px) (radius('xl') - 2px) 0 0;
-  }
-
-  &-body {
-    padding: spacing('4') spacing('5');
-    flex: 1;
-    overflow-y: auto;
-    @include scrollbar;
-  }
-
-  // A dropdown, a tooltip, a date picker - anything a child opens *outside*
-  // itself - is cut off by the two clips above. Lifting them only while such a
-  // menu is open costs nothing the rest of the time, and the alternative is a
-  // menu that shows its first row and nothing else.
-  //
-  // This is the same escape hatch a project needs on its own containers: one
-  // `:has(.mw-dropdown[open]) { overflow: visible }` on whatever is clipping.
-  &:has(.mw-dropdown[open]),
-  &-body:has(.mw-dropdown[open]) {
-    overflow: visible;
-  }
-
-  &-footer {
-    padding: spacing('4') spacing('5');
-    border-top: 1px solid var(--mw-border-accent);
-    display: flex;
-    justify-content: flex-end;
-    gap: spacing('3');
-  }
+    flex-direction: column;
+    min-height: 100%;
+    margin: spacing('1');
 
-  // Panel variants
-  &-primary {
-    .mw-panel-header {
-      background: var(--mw-primary-color);
-      color: var(--mw-primary-accent-text-color);
+    &-header {
+      padding: spacing('4') spacing('5');
+      border-bottom: 1px solid var(--mw-border-accent);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: spacing('0');
+      border-radius: (radius('sm') - 2px) (radius('xl') - 2px) 0 0;
     }
-  }
 
-  &-secondary {
-    .mw-panel-header {
-      background: var(--mw-secondary-color);
-      color: var(--mw-secondary-accent-text-color);
+    &-body {
+      padding: spacing('4') spacing('5');
+      flex: 1;
+      overflow-y: auto;
+      @include scrollbar;
     }
-  }
 
-  // The coloured header already owns the top-right corner. An arc drawn over it
-  // either disappears into the primary fill or fights the secondary one - a
-  // blue bow on an orange header reads as a rendering fault, not as a mark. The
-  // bottom corner carries it alone on these two.
-  &-primary::after,
-  &-secondary::after {
-    @include corner-accent(2px, 'bottom');
-  }
+    // A dropdown, a tooltip, a date picker - anything a child opens *outside*
+    // itself - is cut off by the two clips above. Lifting them only while such a
+    // menu is open costs nothing the rest of the time, and the alternative is a
+    // menu that shows its first row and nothing else.
+    //
+    // This is the same escape hatch a project needs on its own containers: one
+    // `:has(.mw-dropdown[open]) { overflow: visible }` on whatever is clipping.
+    &:has(.mw-dropdown[open]),
+    &-body:has(.mw-dropdown[open]) {
+      overflow: visible;
+    }
 
-  // Scrollable variant for fixed height
-  &-scrollable {
-    max-height: 500px;
+    &-footer {
+      padding: spacing('4') spacing('5');
+      border-top: 1px solid var(--mw-border-accent);
+      display: flex;
+      justify-content: flex-end;
+      gap: spacing('3');
+    }
 
-    .mw-panel-body {
-      overflow-y: auto;
-      max-height: calc(500px - #{2 * spacing('4')} - 2px);
+    // Panel variants
+    &-primary {
+      .mw-panel-header {
+        background: var(--mw-primary-color);
+        color: var(--mw-primary-accent-text-color);
+      }
     }
-  }
 
-  // Scrollable variants for max height
-  &-max-height {
-    &-sm {
-      max-height: 300px;
-      min-height: 0;
-      align-self: start;
-      .mw-panel-body {
-        max-height: calc(300px - #{2 * spacing('4')} - 2px);
-        overflow-y: auto;
+    &-secondary {
+      .mw-panel-header {
+        background: var(--mw-secondary-color);
+        color: var(--mw-secondary-accent-text-color);
       }
     }
 
-    &-md {
+    // The coloured header already owns the top-right corner. An arc drawn over it
+    // either disappears into the primary fill or fights the secondary one - a
+    // blue bow on an orange header reads as a rendering fault, not as a mark. The
+    // bottom corner carries it alone on these two.
+    &-primary::after,
+    &-secondary::after {
+      @include corner-accent(2px, 'bottom');
+    }
+
+    // Scrollable variant for fixed height
+    &-scrollable {
       max-height: 500px;
-      min-height: 0;
-      align-self: start;
+
       .mw-panel-body {
-        max-height: calc(500px - #{2 * spacing('4')} - 2px);
         overflow-y: auto;
+        max-height: calc(500px - #{2 * spacing('4')} - 2px);
       }
     }
 
-    &-lg {
-      max-height: 700px;
-      min-height: 0;
-      align-self: start;
-      .mw-panel-body {
-        max-height: calc(700px - #{2 * spacing('4')} - 2px);
-        overflow-y: auto;
+    // Scrollable variants for max height
+    &-max-height {
+      &-sm {
+        max-height: 300px;
+        min-height: 0;
+        align-self: start;
+        .mw-panel-body {
+          max-height: calc(300px - #{2 * spacing('4')} - 2px);
+          overflow-y: auto;
+        }
+      }
+
+      &-md {
+        max-height: 500px;
+        min-height: 0;
+        align-self: start;
+        .mw-panel-body {
+          max-height: calc(500px - #{2 * spacing('4')} - 2px);
+          overflow-y: auto;
+        }
+      }
+
+      &-lg {
+        max-height: 700px;
+        min-height: 0;
+        align-self: start;
+        .mw-panel-body {
+          max-height: calc(700px - #{2 * spacing('4')} - 2px);
+          overflow-y: auto;
+        }
       }
     }
-  }
 
-  @include media-down('sm') {
-    font-size: font-size('sm');
+    @include media-down('sm') {
+      font-size: font-size('sm');
 
-    &-header {
-      h3 {
-        font-size: font-size('sm');
+      &-header {
+        h3 {
+          font-size: font-size('sm');
+        }
       }
     }
   }