maverick-wave 4.2.1 → 4.4.0

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;
@@ -247,7 +247,7 @@ $_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;
@@ -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/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,7 +103,7 @@
     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: ' *';

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/_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;
   }

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

@@ -145,7 +145,7 @@ $_mw-slider-colors: (
       top: -15px;
     }
 
-    // 1–10 numeric style
+    // 1-10 numeric style
     &.mw-slider-numeric::after {
       content: attr(data-value) '/10';
     }

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

@@ -30,7 +30,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;
@@ -58,7 +58,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/layout/_header.scss

@@ -79,7 +79,7 @@
     }
 
     &:disabled {
-      // Same treatment as every other disabled button — a theme-bound text
+      // Same treatment as every other disabled button - a theme-bound text
       // color would go dark on this always-primary surface in light mode
       opacity: 0.6;
       cursor: not-allowed;

package/src/scss/utilities/_flex.scss

@@ -77,7 +77,7 @@
   }
 }
 
-// Align self — the per-item counterpart to .mw-items-*
+// Align self - the per-item counterpart to .mw-items-*
 .mw-self {
   &-start {
     align-self: flex-start;