maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_breadcrumbs.scss

@@ -1,116 +1,117 @@
 @use '../abstracts' as *;
 
-.mw-breadcrumbs {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin: spacing('1');
-  padding: spacing('0') spacing('2');
-
-  &-list {
+@layer mw.components {
+  .mw-breadcrumbs {
     display: flex;
     align-items: center;
-    margin: spacing('0');
-    padding: spacing('0');
-    list-style: none;
-  }
-
-  &-item {
-    margin-left: -2px;
+    justify-content: flex-start;
+    margin: spacing('1');
+    padding: spacing('0') spacing('2');
 
-    &:first-child {
-      margin-left: 0;
-      a {
-        border-radius: radius('md') 0 0 radius('md');
-      }
+    &-list {
+      display: flex;
+      align-items: center;
+      margin: spacing('0');
+      padding: spacing('0');
+      list-style: none;
     }
 
-    &:last-child {
-      a {
-        border-radius: 0 radius('md') radius('md') 0;
-      }
-    }
+    &-item {
+      margin-left: -2px;
 
-    a {
-      background: var(--mw-card-background);
-      color: var(--mw-text-muted-color);
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      text-decoration: none;
-      font-size: font-size('md');
-      border: 2px solid var(--mw-border);
-      height: spacing('8');
-      padding: spacing('2') spacing('5');
-      border-radius: 0;
-      transform: skew(-30deg);
-      position: relative;
-      transition: var(--mw-transition);
-
-      @include tappable;
-
-      &:hover,
-      &.mw-breadcrumbs-active {
-        color: var(--mw-primary-text-color);
-        border-color: var(--mw-primary-text-color);
-        z-index: z-index('lift');
+      &:first-child {
+        margin-left: 0;
+        a {
+          border-radius: radius('md') 0 0 radius('md');
+        }
       }
 
-      &:active {
-        color: var(--mw-primary-text-color);
-        transition-duration: var(--mw-duration-instant);
+      &:last-child {
+        a {
+          border-radius: 0 radius('md') radius('md') 0;
+        }
       }
 
-      @include focus-ring-inset(-4px) {
-        z-index: z-index('lift');
+      a {
+        background: var(--mw-card-background);
+        color: var(--mw-text-muted-color);
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        text-decoration: none;
+        font-size: font-size('md');
+        border: 2px solid var(--mw-border);
+        height: spacing('8');
+        padding: spacing('2') spacing('5');
+        border-radius: 0;
+        transform: skew(-30deg);
+        position: relative;
+        transition: var(--mw-transition);
+
+        @include tappable;
+
+        &:hover,
+        &.mw-breadcrumbs-active {
+          color: var(--mw-primary-text-color);
+          border-color: var(--mw-primary-text-color);
+          z-index: z-index('lift');
+        }
+
+        &:active {
+          color: var(--mw-primary-text-color);
+          transition-duration: var(--mw-duration-instant);
+        }
+
+        @include focus-ring-inset(-4px) {
+          z-index: z-index('lift');
+        }
+
+        // Counter-skew the content
+        & > * {
+          transform: skew(30deg);
+        }
       }
 
-      // Counter-skew the content
-      & > * {
-        transform: skew(30deg);
+      // Current page styling
+      &.mw-breadcrumbs-current a,
+      &:last-child a {
+        color: var(--mw-text-color);
+        border-color: var(--mw-primary-text-color);
+        cursor: default;
+        pointer-events: none;
       }
     }
 
-    // Current page styling
-    &.mw-breadcrumbs-current a,
-    &:last-child a {
-      color: var(--mw-text-color);
-      border-color: var(--mw-primary-text-color);
-      cursor: default;
-      pointer-events: none;
-    }
-  }
-
-  // Size variants
-  &-sm {
-    .mw-breadcrumbs-item a {
-      font-size: font-size('sm');
-      height: spacing('6');
-      padding: spacing('0') spacing('4');
-    }
-  }
-
-  // Responsive behavior
-  @include media-down('md') {
-    .mw-breadcrumbs-item a {
-      font-size: font-size('xs');
-      height: spacing('6');
-      padding: spacing('0') spacing('3');
+    &-sm {
+      .mw-breadcrumbs-item a {
+        font-size: font-size('sm');
+        height: spacing('6');
+        padding: spacing('0') spacing('4');
+      }
     }
-  }
 
-  @include media-down('lg') {
-    // Collapse middle items on small screens
-    &.mw-breadcrumbs-collapse {
-      .mw-breadcrumbs-item:not(:first-child):not(:last-child):not(
-          :nth-last-child(2)
-        ) {
-        display: none;
+    // Responsive behavior
+    @include media-down('md') {
+      .mw-breadcrumbs-item a {
+        font-size: font-size('xs');
+        height: spacing('6');
+        padding: spacing('0') spacing('3');
       }
+    }
 
-      .mw-breadcrumbs-item:nth-last-child(2) a::before {
-        content: '...';
-        margin-right: spacing('1');
+    @include media-down('lg') {
+      // Collapse middle items on small screens
+      &.mw-breadcrumbs-collapse {
+        .mw-breadcrumbs-item:not(:first-child):not(:last-child):not(
+            :nth-last-child(2)
+          ) {
+          display: none;
+        }
+
+        .mw-breadcrumbs-item:nth-last-child(2) a::before {
+          content: '...';
+          margin-right: spacing('1');
+        }
       }
     }
   }

package/src/scss/components/_button-bar.scss

@@ -1,152 +1,144 @@
 @use '../abstracts' as *;
 
-// Base button bar
-.mw-button-bar {
-  display: flex;
-  gap: spacing('3');
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  border: 1px solid var(--mw-border);
-  border-radius: radius('md');
-  padding: spacing('2');
-
-  &:hover {
-    border-color: var(--mw-border-accent);
-  }
+@layer mw.components {
+  .mw-button-bar {
+    display: flex;
+    gap: spacing('3');
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    border: 1px solid var(--mw-border);
+    border-radius: radius('md');
+    padding: spacing('2');
 
-  @include media-down('sm') {
-    flex-direction: column;
-    gap: spacing('2');
+    &:hover {
+      border-color: var(--mw-border-accent);
+    }
 
-    .mw-btn {
-      width: 100%;
-      min-width: 0;
+    @include media-down('sm') {
+      flex-direction: column;
+      gap: spacing('2');
+
+      .mw-btn {
+        width: 100%;
+        min-width: 0;
+      }
     }
   }
-}
-
-// Alignment variants
-.mw-button-bar-left {
-  justify-content: flex-start;
-}
 
-.mw-button-bar-right {
-  justify-content: flex-end;
-}
+  .mw-button-bar-left {
+    justify-content: flex-start;
+  }
 
-// Explicit counterpart to the three above - it matches the default, but nobody
-// should have to look that up to find out
-.mw-button-bar-center {
-  justify-content: center;
-}
+  .mw-button-bar-right {
+    justify-content: flex-end;
+  }
 
-.mw-button-bar-between {
-  justify-content: space-between;
+  // Explicit counterpart to the three above - it matches the default, but nobody
+  // should have to look that up to find out
+  .mw-button-bar-center {
+    justify-content: center;
+  }
 
-  @include media-down('sm') {
+  .mw-button-bar-between {
     justify-content: center;
+
+    @include media-up('sm') {
+      justify-content: space-between;
+    }
   }
-}
 
-// Primary button bar (applies primary styling to all buttons)
-.mw-button-bar-primary {
-  .mw-btn:not([class*='mw-btn-secondary']):not([class*='mw-btn-outline']):not(
-      [class*='mw-btn-link']
-    ) {
-    background: var(--mw-primary-color);
-    color: var(--mw-primary-accent-text-color);
+  .mw-button-bar-primary {
+    .mw-btn:not([class*='mw-btn-secondary']):not([class*='mw-btn-outline']):not(
+        [class*='mw-btn-link']
+      ) {
+      background: var(--mw-primary-color);
+      color: var(--mw-primary-accent-text-color);
 
-    @include btn-solid;
+      @include btn-solid;
 
-    &:hover:not(:disabled) {
-      background: var(--mw-primary-color-hover);
+      &:hover:not(:disabled) {
+        background: var(--mw-primary-color-hover);
+      }
     }
   }
-}
 
-// Secondary button bar (applies secondary styling to all buttons)
-.mw-button-bar-secondary {
-  .mw-btn:not([class*='mw-btn-primary']):not([class*='mw-btn-outline']):not(
-      [class*='mw-btn-link']
-    ) {
-    background: var(--mw-secondary-color);
-    color: var(--mw-secondary-accent-text-color);
+  .mw-button-bar-secondary {
+    .mw-btn:not([class*='mw-btn-primary']):not([class*='mw-btn-outline']):not(
+        [class*='mw-btn-link']
+      ) {
+      background: var(--mw-secondary-color);
+      color: var(--mw-secondary-accent-text-color);
 
-    @include btn-solid;
+      @include btn-solid;
 
-    &:hover:not(:disabled) {
-      background: var(--mw-secondary-color-hover);
+      &:hover:not(:disabled) {
+        background: var(--mw-secondary-color-hover);
+      }
     }
   }
-}
-
-// Outline button bar
-.mw-button-bar-outline {
-  .mw-btn:not([class*='mw-btn-primary']):not([class*='mw-btn-secondary']):not(
-      [class*='mw-btn-link']
-    ) {
-    background: transparent;
-    border-color: var(--mw-primary-text-color);
-    color: var(--mw-primary-text-color);
 
-    &:hover:not(:disabled) {
-      background: var(--mw-primary-color);
-      color: var(--mw-primary-accent-text-color);
+  .mw-button-bar-outline {
+    .mw-btn:not([class*='mw-btn-primary']):not([class*='mw-btn-secondary']):not(
+        [class*='mw-btn-link']
+      ) {
+      background: transparent;
+      border-color: var(--mw-primary-text-color);
+      color: var(--mw-primary-text-color);
+
+      &:hover:not(:disabled) {
+        background: var(--mw-primary-color);
+        color: var(--mw-primary-accent-text-color);
+      }
     }
   }
-}
 
-// Mixed button bar for navigation (common pattern)
-.mw-button-bar-nav {
-  justify-content: space-between;
+  .mw-button-bar-nav {
+    justify-content: space-between;
 
-  // First and last buttons get outline style
-  .mw-btn:first-child:not([class*='mw-btn-']),
-  .mw-btn:last-child:not([class*='mw-btn-']) {
-    background: transparent;
-    border-color: var(--mw-primary-text-color);
-    color: var(--mw-primary-text-color);
+    .mw-btn:first-child:not([class*='mw-btn-']),
+    .mw-btn:last-child:not([class*='mw-btn-']) {
+      background: transparent;
+      border-color: var(--mw-primary-text-color);
+      color: var(--mw-primary-text-color);
 
-    &:hover:not(:disabled) {
-      background: var(--mw-primary-color);
-      color: var(--mw-primary-accent-text-color);
+      &:hover:not(:disabled) {
+        background: var(--mw-primary-color);
+        color: var(--mw-primary-accent-text-color);
+      }
     }
-  }
 
-  // Middle button(s) get primary style
-  .mw-btn:not(:first-child):not(:last-child):not([class*='mw-btn-']) {
-    background: var(--mw-primary-color);
-    color: var(--mw-primary-accent-text-color);
+    .mw-btn:not(:first-child):not(:last-child):not([class*='mw-btn-']) {
+      background: var(--mw-primary-color);
+      color: var(--mw-primary-accent-text-color);
 
-    @include btn-solid;
+      @include btn-solid;
 
-    &:hover:not(:disabled) {
-      background: var(--mw-primary-color-hover);
+      &:hover:not(:disabled) {
+        background: var(--mw-primary-color-hover);
+      }
     }
   }
-}
 
-// Compact variant with smaller spacing
-.mw-button-bar-sm {
-  gap: spacing('2');
-
-  @include media-down('sm') {
+  .mw-button-bar-sm {
     gap: spacing('1');
-  }
-}
 
-// Large variant with bigger spacing and larger buttons
-.mw-button-bar-lg {
-  gap: spacing('4');
-
-  .mw-btn {
-    padding: spacing('3') spacing('5');
-    font-size: font-size('md');
-    min-height: var(--mw-control-height-lg);
+    @include media-up('sm') {
+      gap: spacing('2');
+    }
   }
 
-  @include media-down('sm') {
+  .mw-button-bar-lg {
     gap: spacing('3');
+
+    .mw-btn {
+      padding: spacing('3') spacing('5');
+      font-size: font-size('md');
+      min-height: var(--mw-control-height-lg);
+    }
+
+    @include media-up('sm') {
+      gap: spacing('4');
+    }
   }
 }