maverick-wave 3.0.0

package/src/scss/form-elements/_toggle.scss

@@ -0,0 +1,174 @@
+@use '../abstracts' as *;
+
+$_mw-toggle-colors: (
+  primary: var(--mw-primary-color),
+  secondary: var(--mw-secondary-color),
+  success: var(--mw-success-color),
+  warning: var(--mw-warning-color),
+  danger: var(--mw-danger-color),
+);
+
+// Track dimensions
+$_track-w: 44px;
+$_track-h: 24px;
+$_knob-size: 18px;
+$_knob-offset: 3px;
+$_knob-travel: calc(#{$_track-w} - #{$_knob-size} - #{$_knob-offset * 2});
+
+$_track-w-sm: 34px;
+$_track-h-sm: 18px;
+$_knob-size-sm: 12px;
+$_knob-travel-sm: calc(
+  #{$_track-w-sm} - #{$_knob-size-sm} - #{$_knob-offset * 2}
+);
+
+$_track-w-lg: 56px;
+$_track-h-lg: 30px;
+$_knob-size-lg: 22px;
+$_knob-offset-lg: 4px;
+$_knob-travel-lg: calc(
+  #{$_track-w-lg} - #{$_knob-size-lg} - #{$_knob-offset-lg * 2}
+);
+
+.mw-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: spacing('2');
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+
+  // Hide native checkbox
+  input[type='checkbox'] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: spacing('0');
+  }
+
+  // The switch track
+  .mw-toggle-track {
+    --toggle-fill: var(--mw-primary-color);
+
+    position: relative;
+    width: $_track-w;
+    height: $_track-h;
+    background: var(--mw-border);
+    border-radius: radius('lg');
+    transition:
+      background 0.25s ease,
+      box-shadow 0.25s ease;
+    flex-shrink: 0;
+
+    // The sliding knob
+    &::after {
+      content: '';
+      position: absolute;
+      top: $_knob-offset;
+      left: $_knob-offset;
+      width: $_knob-size;
+      height: $_knob-size;
+      background: var(--mw-white-color);
+      border-radius: radius('full');
+      transition: transform 0.25s ease;
+      box-shadow: 0 1px 4px var(--mw-shadow);
+    }
+  }
+
+  input[type='checkbox']:checked + .mw-toggle-track {
+    background: var(--toggle-fill);
+
+    &::after {
+      transform: translateX($_knob-travel);
+    }
+  }
+
+  input[type='checkbox']:focus-visible + .mw-toggle-track {
+    box-shadow: 0 0 0 2px var(--mw-primary-background);
+  }
+
+  .mw-toggle-label {
+    font-size: font-size('sm');
+    color: var(--mw-text-color);
+    line-height: 1.3;
+  }
+
+  // Size variants
+  &-sm {
+    .mw-toggle-track {
+      width: $_track-w-sm;
+      height: $_track-h-sm;
+
+      &::after {
+        width: $_knob-size-sm;
+        height: $_knob-size-sm;
+      }
+    }
+
+    input[type='checkbox']:checked + .mw-toggle-track::after {
+      transform: translateX($_knob-travel-sm);
+    }
+
+    .mw-toggle-label {
+      font-size: font-size('xs');
+    }
+  }
+
+  &-lg {
+    .mw-toggle-track {
+      width: $_track-w-lg;
+      height: $_track-h-lg;
+
+      &::after {
+        top: $_knob-offset-lg;
+        left: $_knob-offset-lg;
+        width: $_knob-size-lg;
+        height: $_knob-size-lg;
+      }
+    }
+
+    input[type='checkbox']:checked + .mw-toggle-track::after {
+      transform: translateX($_knob-travel-lg);
+    }
+
+    .mw-toggle-label {
+      font-size: font-size('base');
+    }
+  }
+
+  // Color variants
+  @each $name, $col in $_mw-toggle-colors {
+    &-#{$name} .mw-toggle-track {
+      --toggle-fill: #{$col};
+    }
+  }
+
+  // Disabled
+  &-disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+
+    input[type='checkbox'] {
+      cursor: not-allowed;
+    }
+  }
+}
+
+// Group layout
+.mw-toggle-group {
+  display: flex;
+  flex-direction: column;
+  gap: spacing('3');
+
+  &-inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: spacing('2') spacing('6');
+
+    @include media-down('sm') {
+      gap: spacing('2') spacing('4');
+    }
+  }
+}

package/src/scss/layout/_footer.scss

@@ -0,0 +1,214 @@
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.mw-footer {
+  background: var(--mw-footer-background);
+  padding: spacing('6') spacing('0') spacing('4') spacing('0');
+  margin-top: spacing('7');
+  border-top: 1px solid var(--mw-primary-color-hover);
+
+  &-top {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: spacing('6');
+    margin-bottom: spacing('6');
+
+    @include media-down('lg') {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @include media-down('sm') {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &-column {
+    h3 {
+      font-size: font-size('lg');
+      margin-bottom: spacing('4');
+      color: var(--mw-primary-color);
+    }
+
+    p {
+      color: var(--mw-text-muted-color);
+      margin-bottom: spacing('3');
+    }
+
+    ul {
+      padding: spacing('0');
+      margin: spacing('0');
+
+      li {
+        margin-bottom: spacing('2');
+
+        a {
+          display: inline-block;
+          position: relative;
+          color: var(--mw-text-muted-color);
+          text-decoration: none;
+          padding-bottom: 2px;
+
+          // subtle default underline via box‐shadow
+          &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 1px;
+            width: 100%;
+            height: 1px;
+            background: currentColor;
+            opacity: 0.4;
+            transform: scaleX(1);
+            transform-origin: left;
+            transition:
+              transform 0.2s ease,
+              opacity 0.2s ease;
+          }
+
+          &:hover {
+            color: var(--mw-primary-color);
+
+            &::after {
+              opacity: 1;
+              height: 2px;
+              transform: scaleX(1.1);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .mw-social-links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    column-gap: spacing('8');
+    row-gap: spacing('4');
+    margin: spacing('2') auto spacing('6') auto;
+
+    // modifier for more elements
+    &.mod-wrap {
+      flex-wrap: wrap;
+      width: 510px;
+    }
+
+    a {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      border-radius: radius('full');
+      background: var(--mw-card-background);
+      color: var(--mw-text-color);
+      font-size: font-size('xl');
+      transition: var(--mw-transition);
+      border: 1px solid var(--mw-primary-color-hover);
+      box-shadow: 0 3px 10px var(--mw-shadow);
+      text-decoration: none;
+
+      &:hover {
+        background: var(--mw-primary-color);
+        color: var(--mw-primary-text-color);
+        transform: translateY(-3px);
+        border-color: var(--mw-primary-color);
+      }
+    }
+  }
+
+  .mw-disclaimer {
+    text-align: center;
+    color: var(--mw-text-muted-color);
+    font-size: font-size('sm');
+    width: min(85%, 700px);
+    margin: spacing('0') auto spacing('3') auto;
+    line-height: 1.4;
+  }
+
+  .mw-copyright {
+    text-align: center;
+    color: var(--mw-text-muted-color);
+    font-size: font-size('sm');
+    padding-top: spacing('4');
+    margin: spacing('5') auto spacing('1') auto;
+    width: 85%;
+    border-top: 1px solid var(--mw-secondary-color);
+  }
+
+  .mw-last-updated {
+    text-align: center;
+    color: var(--mw-text-muted-color);
+    font-size: font-size('xs');
+    padding-top: spacing('0');
+    margin: spacing('1') auto spacing('0') auto;
+  }
+
+  @include media-down('lg') {
+    .mw-social-links {
+      &.mod-wrap {
+        width: 420px;
+      }
+    }
+  }
+
+  @include media-down('md') {
+    .mw-social-links {
+      column-gap: spacing('6');
+      row-gap: spacing('3');
+
+      &.mod-wrap {
+        width: 330px;
+      }
+
+      button {
+        width: 40px;
+        height: 40px;
+        font-size: font-size('md');
+      }
+    }
+  }
+
+  @include media-down('sm') {
+    &-column {
+      h3 {
+        font-size: font-size('md');
+        margin-bottom: spacing('3');
+      }
+
+      p {
+        margin-bottom: spacing('2');
+      }
+    }
+
+    .mw-social-links {
+      gap: spacing('3');
+
+      &.mod-wrap {
+        column-gap: spacing('6');
+        row-gap: spacing('3');
+        max-width: 100%;
+        padding: spacing('0') spacing('4');
+      }
+
+      button {
+        width: 33px;
+        height: 33px;
+        font-size: font-size('md');
+      }
+    }
+
+    .mw-copyright {
+      font-size: font-size('xs');
+    }
+
+    .mw-disclaimer {
+      font-size: font-size('xs');
+    }
+
+    .mw-last-updated {
+      font-size: font-size('2xs');
+    }
+  }
+}

package/src/scss/layout/_grid.scss

@@ -0,0 +1,287 @@
+@use '../abstracts' as *;
+
+// Base grid styles that apply to all grid types
+%grid-base {
+  display: grid;
+  gap: spacing('5');
+}
+
+%grid-base-lg {
+  display: grid;
+  gap: spacing('8');
+}
+
+.mw-grid {
+  @extend %grid-base;
+}
+
+.mw-grid-1 {
+  @extend %grid-base;
+  grid-template-columns: 1fr;
+
+  justify-items: stretch;
+  > * {
+    width: 100% !important;
+    max-width: none !important;
+  }
+}
+
+.mw-grid-2 {
+  @extend %grid-base;
+  grid-template-columns: repeat(2, 1fr);
+
+  @include media-down('sm') {
+    grid-template-columns: 1fr;
+  }
+}
+
+.mw-grid-3 {
+  @extend %grid-base;
+  grid-template-columns: repeat(3, 1fr);
+
+  @include media-down('md') {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include media-down('sm') {
+    grid-template-columns: 1fr;
+  }
+}
+
+.mw-grid-4 {
+  @extend %grid-base;
+  grid-template-columns: repeat(4, 1fr);
+
+  @include media-down('lg') {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include media-down('sm') {
+    grid-template-columns: 1fr;
+  }
+}
+
+.mw-grid-5 {
+  @extend %grid-base;
+  grid-template-columns: repeat(5, 1fr);
+
+  @include media-down('lg') {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @include media-down('md') {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @include media-down('sm') {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include media-down('xs') {
+    grid-template-columns: 1fr;
+  }
+}
+
+// flexible grid system with column spans
+.mw-grid-flex {
+  @extend %grid-base;
+
+  // Default: 12-column grid (you can adjust this base)
+  grid-template-columns: repeat(12, 1fr);
+
+  // At MD breakpoint and below, force single column
+  @include media-down('md') {
+    grid-template-columns: 1fr;
+
+    // Reset all spans to full width
+    > * {
+      grid-column: 1 / -1 !important;
+    }
+  }
+}
+
+// Column span utilities
+@for $i from 1 through 12 {
+  .mw-col-span-#{$i} {
+    grid-column: span #{$i};
+  }
+}
+
+// Responsive auto grid
+.mw-grid-auto {
+  @extend %grid-base;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+
+  // Ensure children don't override the grid behavior
+  > * {
+    width: auto !important;
+    max-width: none !important;
+    min-width: 0;
+  }
+}
+
+// Alternative with different minimum widths
+.mw-grid-auto-sm {
+  @extend %grid-base;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+
+.mw-grid-auto-lg {
+  @extend %grid-base;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+}
+
+.mw-grid-lg {
+  @extend %grid-base-lg;
+}
+
+.mw-grid-1-lg {
+  @extend %grid-base-lg;
+  grid-template-columns: 1fr;
+  justify-items: stretch;
+  > * {
+    width: 100% !important;
+    max-width: none !important;
+  }
+}
+
+.mw-grid-2-lg {
+  @extend %grid-base-lg;
+  grid-template-columns: repeat(2, 1fr);
+  @include media-down('md') {
+    grid-template-columns: 1fr;
+    gap: spacing('5');
+  }
+}
+
+.mw-grid-3-lg {
+  @extend %grid-base-lg;
+  grid-template-columns: repeat(3, 1fr);
+  @include media-down('lg') {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @include media-down('sm') {
+    grid-template-columns: 1fr;
+    gap: spacing('5');
+  }
+}
+
+.mw-grid-4-lg {
+  @extend %grid-base-lg;
+  grid-template-columns: repeat(4, 1fr);
+  @include media-down('xl') {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @include media-down('sm') {
+    grid-template-columns: 1fr;
+    gap: spacing('5');
+  }
+}
+
+.mw-grid-5-lg {
+  @extend %grid-base-lg;
+  grid-template-columns: repeat(5, 1fr);
+  @include media-down('xl') {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  @include media-down('lg') {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @include media-down('md') {
+    grid-template-columns: repeat(2, 1fr);
+    gap: spacing('6');
+  }
+  @include media-down('sm') {
+    grid-template-columns: 1fr;
+    gap: spacing('5');
+  }
+}
+
+.mw-grid-auto-lg {
+  @extend %grid-base-lg;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
+// Flexible grids with large spacing
+.mw-grid-flex-lg {
+  @extend %grid-base-lg;
+  grid-template-columns: repeat(12, 1fr);
+
+  @include media-down('md') {
+    grid-template-columns: 1fr;
+    gap: spacing('5');
+    > * {
+      grid-column: 1 / -1 !important;
+    }
+  }
+}
+
+// Base stack - items keep their natural width
+.mw-grid-stack {
+  @extend %grid-base;
+  grid-template-columns: 1fr;
+  justify-items: start; // Items keep natural width, aligned left
+
+  // Remove the forced width from grid-1
+  > * {
+    width: auto;
+    max-width: none;
+  }
+}
+
+// Stack variants with different alignments
+.mw-grid-stack-center {
+  @extend %grid-base;
+  grid-template-columns: 1fr;
+  justify-items: center;
+
+  > * {
+    max-width: none;
+  }
+}
+
+.mw-grid-stack-end {
+  @extend %grid-base;
+  grid-template-columns: 1fr;
+  justify-items: end;
+
+  > * {
+    width: auto;
+    max-width: none;
+  }
+}
+
+.mw-grid-stack-stretch {
+  @extend %grid-base;
+  grid-template-columns: 1fr;
+  justify-items: stretch;
+
+  > * {
+    width: 100%;
+    max-width: none;
+  }
+}
+
+// Large spacing variants
+.mw-grid-stack-lg {
+  @extend %grid-base-lg;
+  grid-template-columns: 1fr;
+  gap: spacing('5');
+  justify-items: start;
+
+  > * {
+    width: auto;
+    max-width: none;
+  }
+}
+
+.mw-grid-stack-center-lg {
+  @extend %grid-base-lg;
+  grid-template-columns: 1fr;
+  gap: spacing('5');
+  justify-items: center;
+
+  > * {
+    max-width: none;
+  }
+}