maverick-wave 3.0.0

package/src/scss/components/_lists.scss

@@ -0,0 +1,653 @@
+@use '../abstracts' as *;
+
+// Base list styles
+.mw-list {
+  margin: spacing('3') spacing('0') spacing('5') spacing('0');
+  padding-left: spacing('2');
+  padding-right: spacing('2');
+
+  li {
+    margin-bottom: spacing('1');
+
+    &:last-child {
+      margin-bottom: spacing('0');
+    }
+  }
+
+  // Nested lists
+  .mw-list {
+    margin: spacing('1');
+  }
+}
+
+// Unstyled list - removes bullets and padding
+.mw-list-unstyled {
+  list-style: none;
+  padding-left: spacing('0');
+}
+
+// Inline list - horizontal layout
+.mw-list-inline {
+  list-style: none;
+  padding-left: spacing('0');
+
+  li {
+    display: inline-block;
+    margin-right: spacing('4');
+
+    &:last-child {
+      margin-right: spacing('0');
+    }
+  }
+}
+
+// Link list - with anchor tag
+.mw-list-link {
+  list-style: none;
+
+  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);
+      }
+    }
+  }
+}
+
+// Dot lists
+.mw-list-dot {
+  padding-left: spacing('4');
+  list-style: disc inside;
+
+  li {
+    padding-left: spacing('0');
+    margin-bottom: spacing('1');
+
+    &::marker {
+      left: spacing('0');
+      color: var(--mw-primary-color);
+    }
+  }
+}
+
+// Check list
+.mw-list-check {
+  list-style: none;
+  padding-left: spacing('3');
+
+  li {
+    padding-left: spacing('0');
+    margin-bottom: spacing('1');
+  }
+
+  li::before {
+    content: '✓';
+    color: var(--mw-primary-color);
+    padding-right: spacing('4');
+  }
+}
+
+// Base item list - flexible container for any content
+.mw-item-list {
+  display: flex;
+  flex-direction: column;
+  gap: spacing('3');
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  // Smooth focus management for accessibility
+  &:focus-within {
+    outline: 2px solid var(--mw-primary-color);
+    outline-offset: 2px;
+    border-radius: radius('sm');
+  }
+}
+
+// Horizontal item list
+.mw-item-list-horizontal {
+  @extend .mw-item-list;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  @include media-down('sm') {
+    flex-direction: column;
+  }
+}
+
+// Interactive card list
+.mw-item-list-cards {
+  @extend .mw-item-list;
+  gap: spacing('4');
+
+  > * {
+    position: relative;
+  }
+}
+
+// Sliding border list
+.mw-item-list-slide {
+  @extend .mw-item-list;
+
+  > * {
+    position: relative;
+    border-radius: radius('sm');
+    padding: spacing('3') spacing('4');
+    background: var(--mw-card-background);
+    border: 1px solid transparent;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 0;
+      background: var(--mw-primary-color);
+      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    &:hover {
+      padding-left: spacing('5');
+      background: var(--mw-primary-background-hover);
+      border-color: var(--mw-primary-color);
+      transform: translateX(4px);
+
+      &::before {
+        width: 4px;
+      }
+    }
+  }
+}
+
+// Secondary variant
+.mw-item-list-slide-secondary {
+  @extend .mw-item-list-slide;
+
+  > * {
+    &::before {
+      background: var(--mw-secondary-color);
+    }
+
+    &:hover {
+      background: var(--mw-secondary-background-hover);
+      border-color: var(--mw-secondary-color);
+    }
+  }
+}
+
+// Compact item list
+.mw-item-list-compact {
+  @extend .mw-item-list;
+  gap: 0;
+  border: 1px solid var(--mw-border);
+  border-radius: radius('md');
+  overflow: hidden;
+
+  > * {
+    padding: spacing('3');
+    border-bottom: 1px solid var(--mw-border);
+    transition: all 0.2s ease;
+    position: relative;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: var(--mw-primary-color-hover);
+      color: var(--mw-primary-text-color);
+      padding-left: spacing('4');
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 3px;
+        background: var(--mw-primary-color);
+      }
+    }
+
+    // Handle nested compact lists
+    &:has(.mw-item-list-compact) {
+      padding-bottom: spacing('1');
+
+      &:hover {
+        color: var(--mw-text-color);
+        padding-left: spacing('3');
+
+        &::before {
+          display: none;
+        }
+      }
+    }
+  }
+
+  // Nested compact lists styling
+  .mw-item-list-compact {
+    margin-top: spacing('2');
+    margin-left: spacing('3');
+    border-left: 2px solid var(--mw-border);
+    border-radius: 0;
+
+    > * {
+      padding: spacing('2') spacing('3');
+      font-size: font-size('sm');
+
+      &:hover {
+        background: var(--mw-primary-color-hover);
+        margin-left: spacing('-2');
+        padding-left: spacing('5');
+        border-left: 3px solid var(--mw-primary-color);
+      }
+    }
+  }
+}
+
+// Interactive menu list
+.mw-item-list-menu {
+  @extend .mw-item-list;
+  gap: spacing('0');
+  border: 1px solid var(--mw-border);
+  border-radius: radius('lg');
+  overflow: hidden;
+  background: var(--mw-card-background);
+  box-shadow: 0 2px 8px var(--mw-shadow);
+
+  > * {
+    padding: spacing('3') spacing('4');
+    border-bottom: 1px solid var(--mw-border);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: spacing('2');
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: var(--mw-primary-color-hover);
+      color: var(--mw-primary-text-color);
+      padding-left: spacing('5');
+    }
+
+    &:active {
+      background: var(--mw-primary-color);
+      transform: scale(0.98);
+    }
+  }
+}
+
+// Simple scrollable list
+.mw-item-list-scroll {
+  @extend .mw-item-list;
+  gap: 0;
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid var(--mw-border);
+  border-radius: radius('md');
+  background: var(--mw-card-background);
+  scrollbar-gutter: stable; // Prevent layout shift
+
+  // Custom scrollbar styling
+  &::-webkit-scrollbar {
+    width: 7px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--mw-primary-color-hover);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--mw-text-muted-color);
+    border-radius: 3px;
+    opacity: 0.6;
+
+    &:hover {
+      background: var(--mw-primary-color);
+      opacity: 1;
+    }
+  }
+
+  // Modern Firefox scrollbar
+  scrollbar-width: thin;
+  scrollbar-color: var(--mw-text-muted-color) var(--mw-gray-background);
+
+  > * {
+    padding: spacing('3');
+    border-bottom: 1px solid var(--mw-border);
+    transition: all 0.2s ease;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: var(--mw-primary-color-hover);
+      cursor: pointer;
+    }
+
+    &:active {
+      background: var(--mw-primary-color);
+    }
+  }
+}
+
+// Height variants
+.mw-item-list-scroll-sm {
+  @extend .mw-item-list-scroll;
+  max-height: 200px;
+}
+
+.mw-item-list-scroll-lg {
+  @extend .mw-item-list-scroll;
+  max-height: 400px;
+}
+
+.mw-item-list-scroll-xl {
+  @extend .mw-item-list-scroll;
+  max-height: 500px;
+}
+
+// Checkbox list component
+.mw-item-list-checkbox {
+  @extend .mw-item-list;
+  gap: spacing('1');
+  border: 1px solid var(--mw-border);
+  border-radius: radius('md');
+  background: var(--mw-card-background);
+  overflow: hidden;
+
+  > * {
+    display: flex;
+    align-items: flex-start;
+    padding: spacing('2') spacing('3');
+    border-bottom: 1px solid var(--mw-border);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    user-select: none;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: var(--mw-primary-color-hover);
+    }
+
+    &:active {
+      background: var(--mw-primary-color);
+      transform: scale(0.98);
+    }
+
+    .mw-checkbox {
+      display: flex;
+      align-items: flex-start;
+      gap: spacing('2');
+      flex: 1;
+
+      // Hide native checkbox
+      input[type='checkbox'] {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+        margin: spacing('0');
+      }
+
+      // Visual checkbox (the label)
+      .mw-checkbox-box {
+        position: relative;
+        flex-shrink: 0;
+        width: spacing('4');
+        height: spacing('4');
+        border: 2px solid var(--mw-border);
+        border-radius: radius('sm');
+        background: var(--mw-form-elements-background);
+        transition: var(--mw-transition);
+        margin-top: spacing('0.5');
+        cursor: pointer;
+        display: block;
+
+        &::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);
+        }
+      }
+
+      // Checked state
+      input[type='checkbox']:checked + .mw-checkbox-box {
+        border-color: var(--mw-primary-color);
+
+        &::after {
+          transform: translate(-50%, -60%) rotate(-45deg) scale(1);
+        }
+      }
+
+      .mw-checkbox-content {
+        display: flex;
+        flex-direction: column;
+        gap: spacing('1');
+        flex: 1;
+
+        .mw-checkbox-header {
+          font-size: font-size('sm');
+          font-weight: font-weight('medium');
+          color: var(--mw-text-color);
+          line-height: 1.3;
+          margin: spacing('0');
+        }
+
+        .mw-checkbox-label {
+          font-size: font-size('xs');
+          color: var(--mw-text-muted-color);
+          line-height: 1.4;
+          margin: spacing('0');
+        }
+      }
+
+      // When only label exists (no header)
+      &:not(:has(.mw-checkbox-header)) {
+        align-items: center;
+
+        .mw-checkbox-box {
+          margin-top: spacing('0');
+        }
+
+        .mw-checkbox-content {
+          gap: spacing('0');
+        }
+
+        .mw-checkbox-label {
+          font-size: font-size('sm');
+          color: var(--mw-text-color);
+        }
+      }
+    }
+
+    // When item is selected, add visual feedback
+    &.mw-selected {
+      background: var(--mw-primary-background-hover);
+      border-left: 3px solid var(--mw-primary-color);
+      padding-left: spacing('2');
+    }
+  }
+
+  // Compact variant
+  &-compact {
+    > * {
+      padding: spacing('1') spacing('3');
+
+      .mw-checkbox {
+        gap: spacing('1');
+
+        .mw-checkbox-box {
+          width: spacing('3');
+          height: spacing('3');
+          margin-top: spacing('1');
+        }
+
+        .mw-checkbox-content {
+          gap: spacing('1');
+
+          .mw-checkbox-header {
+            font-size: font-size('xs');
+            font-weight: font-weight('medium');
+          }
+
+          .mw-checkbox-label {
+            font-size: font-size('2xs');
+          }
+        }
+
+        // When only label exists in compact
+        &:not(:has(.mw-checkbox-header)) {
+          .mw-checkbox-box {
+            margin-top: 0;
+          }
+
+          .mw-checkbox-label {
+            font-size: font-size('xs');
+          }
+        }
+      }
+    }
+  }
+
+  // Large variant
+  &-large {
+    > * {
+      padding: spacing('4') spacing('4');
+
+      .mw-checkbox {
+        gap: spacing('3');
+
+        .mw-checkbox-box {
+          width: spacing('5');
+          height: spacing('5');
+          margin-top: spacing('1');
+        }
+
+        .mw-checkbox-content {
+          gap: spacing('1');
+
+          .mw-checkbox-header {
+            font-size: font-size('base');
+            font-weight: font-weight('medium');
+          }
+
+          .mw-checkbox-label {
+            font-size: font-size('sm');
+          }
+        }
+
+        // When only label exists in large
+        &:not(:has(.mw-checkbox-header)) {
+          .mw-checkbox-box {
+            margin-top: spacing('0');
+          }
+
+          .mw-checkbox-label {
+            font-size: font-size('base');
+          }
+        }
+      }
+    }
+  }
+}
+
+// Color variants for checkbox lists
+.mw-item-list-checkbox-secondary {
+  @extend .mw-item-list-checkbox;
+
+  > * {
+    &:hover {
+      background: var(--mw-secondary-color-hover);
+    }
+
+    &:active {
+      background: var(--mw-secondary-color);
+    }
+
+    &.mw-selected {
+      background: var(--mw-secondary-background-hover);
+      border-left-color: var(--mw-secondary-color);
+    }
+  }
+}
+
+// Scrollable checkbox list
+.mw-item-list-checkbox-scroll {
+  @extend .mw-item-list-checkbox;
+  max-height: 300px;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+
+  // Same scrollbar styling as scroll lists
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--mw-text-muted-color);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--mw-text-muted-color);
+    border-radius: 3px;
+    opacity: 0.6;
+
+    &:hover {
+      background: var(--mw-primary-color);
+      opacity: 1;
+    }
+  }
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--mw-text-muted-color);
+}

package/src/scss/components/_localhost-indicator.scss

@@ -0,0 +1,29 @@
+@use '../abstracts' as *;
+
+// Localhost indicator - a pulsating thin line at the very top of the header
+.mw-localhost-indicator-pulse {
+  position: absolute;
+  top: 2px;
+  left: spacing('0');
+  width: 100%;
+  height: 4px;
+  background: var(--mw-warning-color);
+  z-index: z-index('modal')-10;
+  animation: pulse-indicator 4s infinite;
+}
+
+// Keyframes for the pulsing indicator
+@keyframes pulse-indicator {
+  0% {
+    opacity: 0.4;
+    box-shadow: 0 0 3px var(--mw-warning-color);
+  }
+  25% {
+    opacity: 0.9;
+    box-shadow: 0 6px 13px var(--mw-warning-color);
+  }
+  100% {
+    opacity: 0.4;
+    box-shadow: 0 0 3px var(--mw-warning-color);
+  }
+}

package/src/scss/components/_meta-info.scss

@@ -0,0 +1,34 @@
+@use '../abstracts' as *;
+
+.mw-meta {
+  &-header {
+    padding: spacing('3') spacing('2');
+    border-bottom: 1px solid var(--mw-border);
+    margin-bottom: spacing('5');
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    row-gap: spacing('1');
+  }
+
+  &-item {
+    display: inline-flex;
+    align-items: center;
+    row-gap: spacing('1');
+    gap: spacing('2');
+    &:not(:first-child) {
+      margin-left: spacing('9');
+    }
+    font-size: font-size('md');
+
+    i {
+      font-size: font-size('lg');
+      color: var(--mw-primary-color);
+      flex-shrink: 0;
+    }
+    span {
+      color: var(--mw-text-color);
+    }
+  }
+}