maverick-wave 4.3.0 → 4.4.1

package/src/scss/components/_kanban.scss

@@ -1,6 +1,6 @@
 @use '../abstracts' as *;
 
-// Pixel-precise shape values — no fractional keys in the spacing map
+// Pixel-precise shape values - no fractional keys in the spacing map
 $_mw-kanban-action-size: 26px;
 $_mw-kanban-action-size-touch: 32px;
 // Room the ribbon needs in the top right corner of a ticket
@@ -22,7 +22,7 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
 // Board
 // ---------------------------------------------------------------------------
 .mw-kanban {
-  // Board surface — drop it with .mw-kanban-plain or override per board.
+  // Board surface - drop it with .mw-kanban-plain or override per board.
   --mw-kanban-background: color-mix(
     in srgb,
     var(--mw-gray-color) 40%,
@@ -30,7 +30,7 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
   );
   --mw-kanban-lane-border: 1px dashed
     color-mix(in srgb, var(--mw-text-muted-color) 40%, transparent);
-  // Keeps an empty lane from collapsing onto its header — raise it per board
+  // Keeps an empty lane from collapsing onto its header - raise it per board
   // to give a board that starts out empty some presence
   --mw-kanban-column-min-height: 120px;
 
@@ -55,7 +55,7 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
   }
 }
 
-// Board without its own surface — for pages that already sit on a panel
+// Board without its own surface - for pages that already sit on a panel
 .mw-kanban-plain {
   --mw-kanban-background: transparent;
   padding: spacing('0');
@@ -108,7 +108,7 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
   flex-shrink: 0;
 }
 
-// Sits on .mw-btn — this only trims it down to the header's line height
+// Sits on .mw-btn - this only trims it down to the header's line height
 .mw-kanban-add {
   padding: spacing('1') spacing('3');
   line-height: 1;
@@ -124,7 +124,7 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
   min-height: var(--mw-kanban-column-min-height);
 }
 
-// Ticket — a plain .mw-card, only smaller
+// Ticket - a plain .mw-card, only smaller
 .mw-kanban-card {
   padding: spacing('4');
 
@@ -169,7 +169,7 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
   line-height: 1.45;
 }
 
-// Footer — ticket key on the left, assignee and the action buttons on the right
+// Footer - ticket key on the left, assignee and the action buttons on the right
 .mw-kanban-card-footer {
   display: flex;
   align-items: center;
@@ -221,12 +221,12 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
 
   &:hover:not(:disabled) {
     background: var(--mw-primary-color);
-    border-color: var(--mw-primary-color);
+    border-color: var(--mw-primary-text-color);
     color: var(--mw-accent-text-color);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--mw-primary-color);
+    outline: 2px solid var(--mw-primary-text-color);
     outline-offset: 2px;
   }
 
@@ -247,14 +247,14 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
   border-color: var(--mw-danger-color);
 }
 
-// Composer — one per board, moved into whichever lane it is needed in
+// Composer - one per board, moved into whichever lane it is needed in
 .mw-kanban-composer {
   display: none;
   flex-direction: column;
   gap: spacing('3');
   padding: spacing('4');
   background: var(--mw-card-background);
-  border: 1px dashed var(--mw-primary-color);
+  border: 1px dashed var(--mw-primary-text-color);
   // Same silhouette as a ticket, so it reads as one being written
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
 
@@ -310,7 +310,7 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
   display: none;
 }
 
-// Compact board — for many lanes or a board next to a sidebar
+// Compact board - for many lanes or a board next to a sidebar
 .mw-kanban-compact {
   --mw-kanban-column-min-height: 90px;
 

package/src/scss/components/_lists.scss

@@ -69,7 +69,7 @@
     }
 
     &:hover {
-      color: var(--mw-primary-color);
+      color: var(--mw-primary-text-color);
 
       &::after {
         opacity: 1;
@@ -91,7 +91,7 @@
 
     &::marker {
       left: spacing('0');
-      color: var(--mw-primary-color);
+      color: var(--mw-primary-text-color);
     }
   }
 }
@@ -108,7 +108,7 @@
 
   li::before {
     content: '✓';
-    color: var(--mw-primary-color);
+    color: var(--mw-primary-text-color);
     padding-right: spacing('4');
   }
 }
@@ -124,7 +124,7 @@
 
   // Smooth focus management for accessibility
   &:focus-within {
-    outline: 2px solid var(--mw-primary-color);
+    outline: 2px solid var(--mw-primary-text-color);
     outline-offset: 2px;
     border-radius: radius('sm');
   }
@@ -172,14 +172,14 @@
       top: 0;
       bottom: 0;
       width: 0;
-      background: var(--mw-primary-color);
+      background: var(--mw-primary-text-color);
       transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     &:hover {
       padding-left: spacing('4');
       background: var(--mw-primary-background-hover);
-      border-color: var(--mw-primary-color);
+      border-color: var(--mw-primary-text-color);
       transform: translateX(4px);
 
       &::before {
@@ -195,12 +195,12 @@
 
   > * {
     &::before {
-      background: var(--mw-secondary-color);
+      background: var(--mw-secondary-text-color);
     }
 
     &:hover {
       background: var(--mw-secondary-background-hover);
-      border-color: var(--mw-secondary-color);
+      border-color: var(--mw-secondary-text-color);
     }
   }
 }
@@ -234,7 +234,7 @@
         top: 0;
         bottom: 0;
         width: 3px;
-        background: var(--mw-primary-color);
+        background: var(--mw-primary-text-color);
       }
     }
 
@@ -266,7 +266,7 @@
       &:hover {
         background: var(--mw-primary-background-hover);
         padding-left: spacing('4');
-        border-left: 3px solid var(--mw-primary-color);
+        border-left: 3px solid var(--mw-primary-text-color);
       }
     }
   }
@@ -516,7 +516,7 @@
     // When item is selected, add visual feedback
     &.mw-selected {
       background: var(--mw-primary-background-hover);
-      border-left-color: var(--mw-primary-color);
+      border-left-color: var(--mw-primary-text-color);
     }
   }
 
@@ -619,7 +619,7 @@
 
     &.mw-selected {
       background: var(--mw-secondary-background-hover);
-      border-left-color: var(--mw-secondary-color);
+      border-left-color: var(--mw-secondary-text-color);
     }
   }
 }

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

@@ -15,7 +15,7 @@
 // Keyframes for the pulsing indicator
 @keyframes pulse-indicator {
   0% {
-    opacity: 0.4;
+    opacity: 0.5;
     box-shadow: 0 0 3px var(--mw-warning-color);
   }
   25% {
@@ -23,7 +23,7 @@
     box-shadow: 0 6px 13px var(--mw-warning-color);
   }
   100% {
-    opacity: 0.4;
+    opacity: 0.5;
     box-shadow: 0 0 3px var(--mw-warning-color);
   }
 }

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

@@ -24,7 +24,7 @@
 
     i {
       font-size: font-size('lg');
-      color: var(--mw-primary-color);
+      color: var(--mw-primary-text-color);
       flex-shrink: 0;
     }
     span {

package/src/scss/components/_ratings.scss

@@ -43,7 +43,7 @@
 @for $i from 1 through 5 {
   .mw-rating[data-rating='#{$i}'] {
     & .mw-rating-icon:nth-child(-n + #{$i}) {
-      color: var(--mw-primary-color);
+      color: var(--mw-primary-text-color);
     }
   }
 }

package/src/scss/components/_segmented.scss

@@ -47,7 +47,7 @@
 
   // Inset, because an outline outside the item would be clipped by the frame
   &:focus-visible {
-    outline: 2px solid var(--mw-primary-color);
+    outline: 2px solid var(--mw-primary-text-color);
     outline-offset: -2px;
   }
 
@@ -59,7 +59,7 @@
   &.mw-active,
   &.active {
     background: var(--mw-primary-color);
-    border-color: var(--mw-primary-color);
+    border-color: var(--mw-primary-text-color);
     color: var(--mw-accent-text-color);
   }
 }
@@ -69,7 +69,7 @@
   &.mw-active,
   &.active {
     background: var(--mw-secondary-color);
-    border-color: var(--mw-secondary-color);
+    border-color: var(--mw-secondary-text-color);
   }
 }
 

package/src/scss/components/_spinners.scss

@@ -14,7 +14,7 @@ $_size-lg: 7.5rem;
     height: $_size-default;
     border: 0.5rem solid var(--mw-border);
     border-radius: radius('full');
-    border-top-color: var(--mw-primary-color);
+    border-top-color: var(--mw-primary-text-color);
     animation: mw-spin 1.2s linear infinite;
 
     // Size variants
@@ -34,11 +34,11 @@ $_size-lg: 7.5rem;
 
     // Color variants
     &.mw-spinner-primary {
-      border-top-color: var(--mw-primary-color);
+      border-top-color: var(--mw-primary-text-color);
     }
 
     &.mw-spinner-secondary {
-      border-top-color: var(--mw-secondary-color);
+      border-top-color: var(--mw-secondary-text-color);
     }
   }
 
@@ -110,9 +110,9 @@ $_size-lg: 7.5rem;
       width: $_size-default;
       height: $_size-default;
       border-radius: radius('full');
-      border: 0.5rem solid var(--mw-primary-color);
-      border-color: var(--mw-primary-color) transparent var(--mw-primary-color)
-        transparent;
+      border: 0.5rem solid var(--mw-primary-text-color);
+      border-color: var(--mw-primary-text-color) transparent
+        var(--mw-primary-text-color) transparent;
       animation: mw-spin 1.5s linear infinite;
     }
 
@@ -141,13 +141,13 @@ $_size-lg: 7.5rem;
 
     // Color variants
     &.mw-spinner-primary:after {
-      border-color: var(--mw-primary-color) transparent var(--mw-primary-color)
-        transparent;
+      border-color: var(--mw-primary-text-color) transparent
+        var(--mw-primary-text-color) transparent;
     }
 
     &.mw-spinner-secondary:after {
-      border-color: var(--mw-secondary-color) transparent
-        var(--mw-secondary-color) transparent;
+      border-color: var(--mw-secondary-text-color) transparent
+        var(--mw-secondary-text-color) transparent;
     }
   }
 }

package/src/scss/components/_stepper.scss

@@ -68,12 +68,12 @@
     transition: color 0.3s ease;
 
     &.mw-active {
-      color: var(--mw-primary-color);
+      color: var(--mw-primary-text-color);
       font-weight: font-weight('medium');
     }
 
     &.mw-done {
-      color: var(--mw-success-color);
+      color: var(--mw-success-text-color);
     }
   }
 
@@ -114,7 +114,7 @@
     }
 
     &.mw-done:not(:last-child)::after {
-      background: var(--mw-primary-color);
+      background: var(--mw-primary-text-color);
     }
   }
 
@@ -134,7 +134,7 @@
       margin-bottom: spacing('1');
 
       .mw-stepper-step.mw-active & {
-        color: var(--mw-primary-color);
+        color: var(--mw-primary-text-color);
       }
     }
 

package/src/scss/components/_tabs.scss

@@ -35,13 +35,13 @@
     white-space: nowrap;
 
     &:hover {
-      color: var(--mw-primary-color);
+      color: var(--mw-primary-text-color);
     }
 
     &.mw-active,
     &.active {
-      color: var(--mw-primary-color);
-      border-bottom-color: var(--mw-primary-color);
+      color: var(--mw-primary-text-color);
+      border-bottom-color: var(--mw-primary-text-color);
     }
   }
 
@@ -103,7 +103,7 @@
 
       &.mw-active,
       &.active {
-        border-right-color: var(--mw-primary-color);
+        border-right-color: var(--mw-primary-text-color);
       }
 
       @include media-down('sm') {
@@ -114,7 +114,7 @@
         &.mw-active,
         &.active {
           border-right-color: transparent;
-          border-bottom-color: var(--mw-primary-color);
+          border-bottom-color: var(--mw-primary-text-color);
         }
       }
     }

package/src/scss/components/_techstack-bucket.scss

@@ -35,14 +35,14 @@
     &:hover {
       transform: translateY(-2px);
       box-shadow: 0 3px 10px var(--mw-shadow);
-      border-color: var(--mw-primary-color);
+      border-color: var(--mw-primary-text-color);
 
       .mw-techstack-logo {
         transform: scale(1.1);
       }
 
       .mw-techstack-name {
-        color: var(--mw-primary-color);
+        color: var(--mw-primary-text-color);
       }
     }
   }

package/src/scss/components/_timelines.scss

@@ -28,7 +28,7 @@ $_simple-date-width: 110px;
 
 @keyframes mw-pulse-ring-big {
   0% {
-    box-shadow: 0 0 0 0 var(--mw-primary-color);
+    box-shadow: 0 0 0 0 var(--mw-primary-text-color);
   }
   70% {
     box-shadow: 0 0 0 13px transparent;
@@ -40,7 +40,7 @@ $_simple-date-width: 110px;
 
 @keyframes mw-pulse-ring-simple {
   0% {
-    box-shadow: 0 0 0 0 var(--mw-primary-color);
+    box-shadow: 0 0 0 0 var(--mw-primary-text-color);
   }
   70% {
     box-shadow: 0 0 0 5px transparent;
@@ -65,7 +65,7 @@ $_simple-date-width: 110px;
     top: 0;
     width: $_border-width-big;
     height: 100%;
-    background: var(--mw-primary-color);
+    background: var(--mw-primary-text-color);
     transform: translateX(-50%);
   }
 
@@ -79,7 +79,7 @@ $_simple-date-width: 110px;
   &-date-container {
     position: relative;
     z-index: z-index('card');
-    border: $_border-width-big solid var(--mw-primary-color);
+    border: $_border-width-big solid var(--mw-primary-text-color);
     background: var(--mw-card-background);
     border-radius: radius('md');
     padding: spacing('3') spacing('4');
@@ -148,7 +148,7 @@ $_simple-date-width: 110px;
     animation-name: mw-slide-in-left;
 
     .mw-timeline-big-event {
-      border-right: 2px solid var(--mw-secondary-color);
+      border-right: 2px solid var(--mw-secondary-text-color);
       border-top-right-radius: radius('none');
       border-bottom-right-radius: radius('none');
       text-align: right;
@@ -164,7 +164,7 @@ $_simple-date-width: 110px;
     animation-name: mw-slide-in-right;
 
     .mw-timeline-big-event {
-      border-left: 2px solid var(--mw-secondary-color);
+      border-left: 2px solid var(--mw-secondary-text-color);
       border-top-left-radius: radius('none');
       border-bottom-left-radius: radius('none');
       text-align: left;
@@ -182,7 +182,7 @@ $_simple-date-width: 110px;
   &-step.mw-active &-date-container,
   &-step.active &-date-container {
     background: var(--mw-primary-color);
-    border-color: var(--mw-primary-color);
+    border-color: var(--mw-primary-text-color);
     transform: scale(1.1);
     animation: mw-pulse-ring-big 2s infinite;
 
@@ -227,7 +227,7 @@ $_simple-date-width: 110px;
 
       .mw-timeline-big-event {
         border-right: none;
-        border-left: 2px solid var(--mw-secondary-color);
+        border-left: 2px solid var(--mw-secondary-text-color);
         border-top-right-radius: radius('sm');
         border-bottom-right-radius: radius('sm');
         text-align: left;
@@ -264,7 +264,7 @@ $_simple-date-width: 110px;
     top: 0;
     width: $_border-width-simple;
     height: 100%;
-    background: var(--mw-primary-color);
+    background: var(--mw-primary-text-color);
     transform: translateX(-50%);
   }
 
@@ -282,7 +282,7 @@ $_simple-date-width: 110px;
     font-size: font-size('sm');
     padding: spacing('2');
     border-radius: radius('md');
-    border: $_border-width-simple solid var(--mw-primary-color);
+    border: $_border-width-simple solid var(--mw-primary-text-color);
     background: var(--mw-card-background);
     line-height: 1.1;
     position: relative;

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

@@ -5,7 +5,7 @@ $_size-sm: spacing('5');
 $_size-default: spacing('6');
 $_size-lg: spacing('7');
 
-// Checkmark dimensions (not from spacing map — these are shape-drawing values)
+// Checkmark dimensions (not from spacing map - these are shape-drawing values)
 $_check-sm-w: 9px;
 $_check-sm-h: 6px;
 $_check-default-w: 14px;

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

@@ -84,7 +84,7 @@
   }
 }
 
-// ===== Form Field — label + input + hint + error as a unit =====
+// ===== 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>
@@ -103,11 +103,11 @@
     color: var(--mw-text-color);
   }
 
-  // Required field asterisk — add class mw-required or attribute data-required
+  // 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);
+    color: var(--mw-danger-text-color);
     font-weight: font-weight('bold');
   }
 
@@ -118,7 +118,7 @@
 
   &-error {
     font-size: font-size('xs');
-    color: var(--mw-danger-color);
+    color: var(--mw-danger-text-color);
     display: flex;
     align-items: center;
     gap: spacing('1');

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

@@ -8,3 +8,4 @@
 @forward 'slider';
 @forward 'textarea';
 @forward 'toggle';
+@forward 'prefilled';

package/src/scss/form-elements/_input-group.scss

@@ -84,7 +84,7 @@
     }
   }
 
-  // Size variants — applied to the group, cascades to prefix/suffix
+  // Size variants - applied to the group, cascades to prefix/suffix
   &-sm {
     .mw-input-group-prefix,
     .mw-input-group-suffix {

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

@@ -27,7 +27,7 @@
   }
 
   &:read-only {
-    background: var(--mw-gray-background);
+    background-color: var(--mw-gray-background);
     color: var(--mw-text-muted-color);
     cursor: default;
     box-shadow: none;
@@ -66,7 +66,7 @@
     }
   }
 
-  // Date / time inputs — style the native picker indicator
+  // Date / time inputs - style the native picker indicator
   &[type='date'],
   &[type='time'],
   &[type='datetime-local'] {
@@ -85,7 +85,7 @@
 
   // disabled state
   &:disabled {
-    background: var(--mw-gray-background);
+    background-color: var(--mw-gray-background);
     color: var(--mw-text-muted-color);
     cursor: not-allowed;
   }

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

@@ -39,11 +39,11 @@
 
     // Variants
     &-info {
-      color: var(--mw-info-color);
+      color: var(--mw-info-text-color);
     }
 
     &-error {
-      color: var(--mw-danger-color);
+      color: var(--mw-danger-text-color);
     }
 
     // Multiple messages spacing

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

@@ -0,0 +1,65 @@
+@use '../abstracts' as *;
+
+// ===== Prefilled marker =====
+// Marks a control whose value did not come from the user in this session -
+// loaded from an existing record, restored from a draft, filled with a
+// default. Add `mw-prefilled` to the control itself, not to the wrapper, so
+// it also works outside `mw-field` (input groups, standalone selects).
+
+$_marker-sm: 10px;
+$_marker-base: 12px;
+$_marker-lg: 14px;
+
+// 135deg puts the hard edge on the anti-diagonal, which fills the top left
+// half of the background box - a right triangle pointing into the corner.
+$_marker-image: linear-gradient(
+  135deg,
+  var(--mw-info-color) 50%,
+  transparent 50%
+);
+
+@mixin _marker($size) {
+  background-image: $_marker-image;
+  background-repeat: no-repeat;
+  background-position: left top;
+  background-size: $size $size;
+}
+
+// A select already paints its arrow, so adding a layer means restating both.
+@mixin _marker-select($size, $arrow-inset, $arrow-size) {
+  background-image: $_marker-image, $select-arrow-image;
+  background-repeat: no-repeat;
+  background-position:
+    left top,
+    right $arrow-inset center;
+  background-size:
+    $size $size,
+    $arrow-size $arrow-size;
+}
+
+.mw-prefilled {
+  @include _marker($_marker-base);
+
+  &.mw-input-sm,
+  &.mw-textarea-sm {
+    @include _marker($_marker-sm);
+  }
+
+  &.mw-input-lg,
+  &.mw-textarea-lg {
+    @include _marker($_marker-lg);
+  }
+
+  // Selects last: each size restates the arrow layer it would otherwise lose.
+  &.mw-select {
+    @include _marker-select($_marker-base, spacing('3'), spacing('3'));
+  }
+
+  &.mw-select-sm {
+    @include _marker-select($_marker-sm, spacing('2'), spacing('2'));
+  }
+
+  &.mw-select-lg {
+    @include _marker-select($_marker-lg, spacing('4'), spacing('4'));
+  }
+}

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

@@ -11,7 +11,7 @@
   transition: var(--mw-transition);
   appearance: none;
   -webkit-appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
+  background-image: $select-arrow-image;
   background-repeat: no-repeat;
   background-position: right spacing('3') center;
   background-size: spacing('3') spacing('3');
@@ -44,7 +44,7 @@
 
   // disabled state
   &:disabled {
-    background: var(--mw-gray-background);
+    background-color: var(--mw-gray-background);
     color: var(--mw-text-muted-color);
     cursor: not-allowed;
   }