maverick-wave 3.0.0

package/src/scss/components/_timelines.scss

@@ -0,0 +1,339 @@
+@use '../abstracts' as *;
+
+$_border-width-big: 4px;
+$_border-width-simple: 3px;
+
+// shared keyframes
+@keyframes mw-slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes mw-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes mw-pulse-ring-big {
+  0% {
+    box-shadow: 0 0 0 0 var(--mw-primary-color);
+  }
+  70% {
+    box-shadow: 0 0 0 13px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+@keyframes mw-pulse-ring-simple {
+  0% {
+    box-shadow: 0 0 0 0 var(--mw-primary-color);
+  }
+  70% {
+    box-shadow: 0 0 0 5px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+.mw-timeline-big {
+  position: relative;
+  margin: spacing('1') auto;
+  padding: spacing('5') 0;
+  width: min(96%, 900px);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 0;
+    width: $_border-width-big;
+    height: 100%;
+    background: var(--mw-primary-color);
+    transform: translateX(-50%);
+  }
+
+  &-step {
+    position: relative;
+    margin: spacing('7') 0;
+    display: flex;
+    align-items: flex-start;
+
+    &.active {
+      .mw-timeline-big-date-container {
+        background: var(--mw-primary-color);
+        border-color: var(--mw-primary-color);
+        z-index: z-index('lift');
+        transform: translateX(-50%) scale(1.1);
+        animation: mw-pulse-ring-big 2s infinite;
+
+        .mw-timeline-big-date-main {
+          color: var(--mw-primary-text-color);
+        }
+        .mw-timeline-big-date-sub {
+          color: var(--mw-primary-text-color);
+        }
+
+        @include media-down('sm') {
+          transform: scale(1.05);
+          left: 2px;
+        }
+      }
+    }
+  }
+
+  &-date-container {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    border: $_border-width-big solid var(--mw-primary-color);
+    background: var(--mw-card-background);
+    border-radius: radius('md');
+    padding: spacing('3') spacing('4');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: spacing('2');
+    cursor: default;
+  }
+
+  &-date-main {
+    font-size: font-size('sm');
+    color: var(--mw-text-color);
+    line-height: 1.2;
+  }
+
+  &-date-sub {
+    margin-left: spacing('2');
+    font-size: font-size('xs');
+    color: var(--mw-text-muted-color);
+  }
+
+  &-content {
+    width: 48%;
+    padding: spacing('9') spacing('2') spacing('1') spacing('2');
+    opacity: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-event {
+    display: inline-block;
+    width: 87%;
+    margin-top: spacing('4');
+    padding: spacing('2') spacing('3');
+    background: var(--mw-card-background);
+    box-shadow: 0 2px 7px var(--mw-shadow);
+    border-radius: radius('sm');
+    position: relative;
+    clear: both;
+    cursor: default;
+
+    &-date {
+      display: block;
+      font-size: font-size('sm');
+      font-weight: font-weight('bold');
+      color: var(--mw-text-color);
+      margin-bottom: spacing('1');
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    &-title {
+      font-size: font-size('base');
+      font-weight: font-weight('normal');
+      line-height: 1.2;
+      color: var(--mw-text-color);
+    }
+  }
+
+  // alternate + animation…
+  @for $i from 1 through 10 {
+    &-step:nth-child(#{$i}) &-content {
+      animation-duration: 0.9s;
+      animation-fill-mode: forwards;
+      animation-delay: $i * 0.3s;
+
+      @if $i % 2 != 0 {
+        animation-name: mw-slide-in-left;
+        margin-right: auto;
+        margin-left: spacing('0');
+        text-align: right;
+        align-items: flex-end;
+
+        .mw-timeline-big-event {
+          border-right: 2px solid var(--mw-secondary-color);
+          text-align: right;
+          border-top-right-radius: radius('none');
+          border-bottom-right-radius: radius('none');
+        }
+      } @else {
+        animation-name: mw-slide-in-right;
+        margin-left: auto;
+        margin-right: spacing('0');
+        text-align: left;
+        align-items: flex-start;
+
+        .mw-timeline-big-event {
+          border-left: 2px solid var(--mw-secondary-color);
+          text-align: left;
+          border-top-left-radius: radius('none');
+          border-bottom-left-radius: radius('none');
+        }
+      }
+    }
+  }
+
+  @include media-down('sm') {
+    &::before {
+      left: 14px;
+      transform: none;
+    }
+    &-step {
+      display: block;
+      margin: spacing('6') spacing('0');
+    }
+    &-date-container {
+      position: relative;
+      left: 2px;
+      transform: none;
+      width: 310px;
+      justify-content: flex-start;
+    }
+    &-date-sub {
+      margin-left: spacing('1');
+    }
+    &-content {
+      width: auto;
+      padding: spacing('2');
+      margin-top: spacing('1');
+      margin-left: spacing('6') !important;
+      text-align: left !important;
+      align-items: flex-start !important;
+      opacity: 1;
+    }
+    &-event {
+      width: 92%;
+      border-right: none !important;
+      border-left: 2px solid var(--mw-secondary-color) !important;
+      border-radius: radius('sm') !important;
+      text-align: left !important;
+      &-date {
+        font-size: font-size('xs');
+      }
+      &-title {
+        font-size: font-size('sm');
+        line-height: 1.1;
+      }
+    }
+  }
+}
+
+.mw-timeline-simple {
+  position: relative;
+  margin: spacing('1') auto;
+  padding: spacing('3') 0;
+  width: min(96%, 930px);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 100px;
+    top: 0;
+    width: $_border-width-simple;
+    height: 100%;
+    background: var(--mw-primary-color);
+    transform: translateX(-50%);
+  }
+
+  &-step {
+    position: relative;
+    margin: spacing('5') spacing('0');
+    display: flex;
+    align-items: flex-start;
+
+    &.active {
+      .mw-timeline-simple-date {
+        background: var(--mw-primary-color);
+        color: var(--mw-primary-text-color);
+        z-index: z-index('lift');
+        transform: scale(1.1);
+        animation: mw-pulse-ring-simple 2s infinite;
+
+        @include media-down('sm') {
+          transform: scale(1.05);
+        }
+      }
+    }
+  }
+
+  &-date {
+    position: absolute;
+    width: 120px;
+    top: 0;
+    left: -10px;
+    text-align: center;
+    font-size: font-size('sm');
+    padding: spacing('2');
+    border-radius: radius('md');
+    border: $_border-width-simple solid var(--mw-primary-color);
+    background: var(--mw-card-background);
+    line-height: 1.1;
+    z-index: z-index('card');
+    cursor: default;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    gap: spacing('3');
+    padding: spacing('0');
+    margin-left: 120px;
+    text-align: left;
+    opacity: 0;
+  }
+
+  // all steps slide in from right only
+  @for $i from 1 through 10 {
+    &-step:nth-child(#{$i}) &-content {
+      animation: mw-slide-in-right 0.6s forwards;
+      animation-delay: $i * 0.2s;
+    }
+  }
+
+  @include media-down('sm') {
+    &::before {
+      left: spacing('0');
+    }
+
+    &-date {
+      position: absolute;
+      min-width: 120px;
+      width: auto;
+      max-width: 260px;
+      font-size: font-size('xs');
+      line-height: 1;
+    }
+
+    &-content {
+      margin-top: spacing('7');
+      margin-left: spacing('3');
+      width: auto;
+    }
+  }
+}

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

@@ -0,0 +1,174 @@
+// _checkbox.scss
+@use '../abstracts' as *;
+
+$_size-sm: spacing('3');
+$_size-default: spacing('4');
+$_size-lg: spacing('5');
+$_size-xl: spacing('6');
+
+// Checkmark dimensions (not from spacing map — these are shape-drawing values)
+$_check-sm-w: 7px;
+$_check-sm-h: 4px;
+$_check-lg-w: 13px;
+$_check-lg-h: 7px;
+$_check-xl-w: 15px;
+$_check-xl-h: 8px;
+
+// 1) color map for checked state border & checkmark
+$_mw-checkbox-colors: (
+  primary: var(--mw-primary-color),
+  secondary: var(--mw-secondary-color),
+  info: var(--mw-info-color),
+  success: var(--mw-success-color),
+  warning: var(--mw-warning-color),
+  danger: var(--mw-danger-color),
+);
+
+.mw-checkbox-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');
+    }
+  }
+}
+
+.mw-checkbox {
+  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');
+  }
+
+  .mw-checkbox-box {
+    position: relative;
+    flex-shrink: 0;
+    width: $_size-default;
+    height: $_size-default;
+    border: 2px solid var(--mw-border);
+    border-radius: radius('sm');
+    background: var(--mw-form-elements-background);
+    transition: var(--mw-transition);
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: spacing('2');
+      height: spacing('1');
+      border-left: 2px solid var(--mw-primary-color);
+      border-bottom: 2px solid var(--mw-primary-color);
+      transform: translate(-50%, -60%) rotate(-45deg) scale(0);
+      transform-origin: center;
+      transition: var(--mw-transition);
+    }
+  }
+
+  // focus-visible state
+  input[type='checkbox']:focus-visible + .mw-checkbox-box {
+    box-shadow: 0 0 0 2px var(--mw-primary-background);
+    border-color: var(--mw-primary-color);
+  }
+
+  // checked state
+  input[type='checkbox']:checked + .mw-checkbox-box {
+    border-color: var(--mw-primary-color);
+  }
+  input[type='checkbox']:checked + .mw-checkbox-box::after {
+    transform: translate(-50%, -60%) rotate(-45deg) scale(1);
+  }
+
+  .mw-checkbox-label {
+    font-size: font-size('sm');
+    color: var(--mw-text-color);
+  }
+
+  // size variants
+  &-sm {
+    .mw-checkbox-box {
+      width: $_size-sm;
+      height: $_size-sm;
+    }
+    .mw-checkbox-box::after {
+      width: $_check-sm-w;
+      height: $_check-sm-h;
+      border-width: 1.5px;
+    }
+    .mw-checkbox-label {
+      font-size: font-size('xs');
+    }
+  }
+  &-lg {
+    .mw-checkbox-box {
+      width: $_size-lg;
+      height: $_size-lg;
+    }
+    .mw-checkbox-box::after {
+      width: $_check-lg-w;
+      height: $_check-lg-h;
+      border-width: 2px;
+    }
+    .mw-checkbox-label {
+      font-size: font-size('base');
+    }
+  }
+  &-xl {
+    .mw-checkbox-box {
+      width: $_size-xl;
+      height: $_size-xl;
+    }
+    .mw-checkbox-box::after {
+      width: $_check-xl-w;
+      height: $_check-xl-h;
+      border-width: 2px;
+    }
+    .mw-checkbox-label {
+      font-size: font-size('md');
+    }
+  }
+
+  // color variants
+  @each $name, $col in $_mw-checkbox-colors {
+    &-#{$name} {
+      input[type='checkbox']:checked + .mw-checkbox-box {
+        border-color: #{$col};
+      }
+      input[type='checkbox']:checked + .mw-checkbox-box::after {
+        border-color: #{$col};
+      }
+    }
+  }
+
+  // disabled state
+  &-disabled {
+    cursor: not-allowed;
+
+    input[type='checkbox'] {
+      cursor: not-allowed;
+    }
+    .mw-checkbox-box {
+      background: var(--mw-gray-background);
+    }
+    .mw-checkbox-label {
+      color: var(--mw-text-muted-color);
+    }
+  }
+}

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

@@ -0,0 +1,122 @@
+@use '../abstracts' as *;
+
+.mw-form {
+  display: flex;
+  flex-direction: column;
+  gap: spacing('4');
+  padding: spacing('1');
+  width: 100%;
+
+  &-inline {
+    flex-direction: row;
+    align-items: center;
+    gap: spacing('4');
+  }
+
+  &-group {
+    display: flex;
+    flex-direction: column;
+    padding: spacing('2');
+    gap: spacing('1');
+    border-radius: radius('sm');
+    border: 2px solid var(--mw-border);
+  }
+
+  label {
+    font-size: font-size('md');
+    span {
+      margin-bottom: spacing('1');
+    }
+  }
+
+  &-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing('3');
+    margin-top: spacing('5');
+    justify-content: flex-end;
+    position: relative;
+    text-align: right;
+
+    // hint text above the buttons
+    &-hint {
+      width: 100%;
+      font-size: font-size('sm');
+      color: var(--mw-text-muted-color);
+      margin-bottom: spacing('0');
+    }
+
+    // full-width stacked
+    &-full-width {
+      flex-direction: column;
+      > * {
+        width: 100%;
+      }
+    }
+
+    &-center {
+      justify-content: center;
+      text-align: center;
+    }
+
+    &-left {
+      justify-content: flex-start;
+      text-align: left;
+    }
+  }
+
+  &-element-error {
+    border: 3px solid var(--mw-danger-color);
+  }
+}
+
+// ===== Form Field — label + input + hint + error as a unit =====
+// Designed e.g. for Angular reactive forms pattern:
+//   <div class="mw-field">
+//     <label class="mw-field-label mw-required">Email</label>
+//     <input class="mw-input" formControlName="email">
+//     <span class="mw-field-hint">We'll never share your email</span>
+//     <span class="mw-field-error">Please enter a valid email</span>
+//   </div>
+.mw-field {
+  display: flex;
+  flex-direction: column;
+  gap: spacing('1');
+
+  &-label {
+    font-size: font-size('sm');
+    font-weight: font-weight('medium');
+    color: var(--mw-text-color);
+  }
+
+  // Required field asterisk — add class mw-required or attribute data-required
+  &-label.mw-required::after,
+  &-label[data-required='true']::after {
+    content: ' *';
+    color: var(--mw-danger-color);
+    font-weight: font-weight('bold');
+  }
+
+  &-hint {
+    font-size: font-size('xs');
+    color: var(--mw-text-muted-color);
+  }
+
+  &-error {
+    font-size: font-size('xs');
+    color: var(--mw-danger-color);
+    display: flex;
+    align-items: center;
+    gap: spacing('1');
+  }
+
+  // When the field itself is in error state
+  &.mw-field-has-error {
+    .mw-input,
+    .mw-select,
+    .mw-textarea {
+      border-color: var(--mw-danger-color);
+      box-shadow: 0 0 0 2px var(--mw-danger-info-background);
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+@forward 'checkbox';
+@forward 'form';
+@forward 'input';
+@forward 'input-group';
+@forward 'login';
+@forward 'radio';
+@forward 'select';
+@forward 'slider';
+@forward 'textarea';
+@forward 'toggle';