maverick-wave 3.1.0 → 3.1.3

package/.claude/commands/mw.md

@@ -68,10 +68,12 @@ Use the `mw-field` wrapper to group label + control + hint/error:
   <label class="mw-field-label mw-required" for="email">Email</label>
   <input id="email" type="email" class="mw-input" formControlName="email" />
   <span class="mw-field-hint">Used for account notifications.</span>
-  <span class="mw-field-error" *ngIf="email.invalid && email.touched">
+  @if (email.invalid && email.touched) {
+  <span class="mw-field-error">
     <i class="fas fa-exclamation-circle"></i>
     Please enter a valid email address.
   </span>
+  }
 </div>
 ```
 
@@ -85,7 +87,6 @@ Use the `mw-field` wrapper to group label + control + hint/error:
 <input type="text" class="mw-input" />
 <input type="text" class="mw-input mw-input-sm" />
 <input type="text" class="mw-input mw-input-lg" />
-<input type="text" class="mw-input mw-input-xl" />
 ```
 
 ### Input Group (prefix / suffix / button)
@@ -166,13 +167,18 @@ Use the `mw-field` wrapper to group label + control + hint/error:
   <option value="" disabled selected>Choose...</option>
   <option value="a">Option A</option>
 </select>
+
+<!-- Sizes: mw-select-sm / mw-select-lg -->
 ```
 
 ### Textarea
 
 ```html
 <textarea class="mw-textarea" rows="4" placeholder="..."></textarea>
-<textarea class="mw-textarea mw-textarea-resizable-vertical"></textarea>
+<textarea class="mw-textarea mw-textarea-sm"></textarea>
+<textarea class="mw-textarea mw-textarea-lg"></textarea>
+
+<!-- Resize variants: mw-textarea-resizable / mw-textarea-resizable-vertical / mw-textarea-resizable-horizontal -->
 ```
 
 ### Checkbox
@@ -185,7 +191,8 @@ Use the `mw-field` wrapper to group label + control + hint/error:
 </label>
 
 <!-- Color variants: mw-checkbox-primary / secondary / success / warning / danger / info -->
-<!-- Size variants: mw-checkbox-sm / mw-checkbox-lg / mw-checkbox-xl -->
+<!-- Size variants: mw-checkbox-sm / mw-checkbox-lg -->
+<!-- Disabled: add class mw-checkbox-disabled + disabled attr on input -->
 ```
 
 ### Radio
@@ -198,7 +205,8 @@ Use the `mw-field` wrapper to group label + control + hint/error:
 </label>
 
 <!-- Color variants: mw-radio-primary / secondary / success / warning / danger / info -->
-<!-- Size variants: mw-radio-sm / mw-radio-lg / mw-radio-xl -->
+<!-- Size variants: mw-radio-sm / mw-radio-lg -->
+<!-- Disabled: add class mw-radio-disabled + disabled attr on input -->
 ```
 
 ### Toggle Switch
@@ -222,9 +230,11 @@ Use the `mw-field` wrapper to group label + control + hint/error:
   <label class="mw-field-label mw-required" for="name">Full Name</label>
   <input id="name" type="text" class="mw-input" formControlName="name" />
   <span class="mw-field-hint">As it appears on your ID.</span>
-  <span class="mw-field-error" *ngIf="name.invalid && name.touched">
+  @if (name.invalid && name.touched) {
+  <span class="mw-field-error">
     <i class="fas fa-exclamation-circle"></i> Name is required.
   </span>
+  }
 </div>
 ```
 
@@ -274,8 +284,8 @@ Use the `mw-field` wrapper to group label + control + hint/error:
 <div class="mw-grid-4 mw-gap-4">...</div>
 <!-- 4-col grid -->
 
-<!-- Spacing: mw-mt-4, mw-mb-6, mw-mx-3, mw-my-2, mw-p-4, mw-px-6, mw-py-2 -->
-<!-- Gap values: 1–9 -->
+<!-- Spacing keys: -6 to 13 (e.g. mw-mt-4, mw-mb-6, mw-mx-3, mw-p-4, mw-px-6) -->
+<!-- Gap keys: 0–13 (negative values are invalid for gap and not generated) -->
 ```
 
 ---
@@ -312,12 +322,14 @@ Use the `mw-field` wrapper to group label + control + hint/error:
 <div class="mw-alert mw-alert-danger">Error message.</div>
 
 <!-- Closable (handle dismiss in component) -->
-<div class="mw-alert mw-alert-primary" *ngIf="showAlert">
+@if (showAlert) {
+<div class="mw-alert mw-alert-primary">
   Message
   <button class="mw-btn mw-btn-link" (click)="showAlert = false">
     <i class="fas fa-times"></i>
   </button>
 </div>
+}
 ```
 
 ---
@@ -334,12 +346,14 @@ Use the `mw-field` wrapper to group label + control + hint/error:
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let item of items">
+      @for (item of items; track item.id) {
+      <tr>
         <td>{{ item.name }}</td>
         <td>
           <span class="mw-tag mw-tag-success">Active</span>
         </td>
       </tr>
+      }
     </tbody>
   </table>
 </div>
@@ -396,9 +410,11 @@ Use the `mw-field` wrapper to group label + control + hint/error:
 <div class="mw-spinner mw-spinner-sm mw-spinner-secondary"></div>
 
 <!-- With overlay (e.g., on async operations) -->
-<div class="mw-spinner-overlay" *ngIf="isLoading">
+@if (isLoading) {
+<div class="mw-spinner-overlay">
   <div class="mw-spinner mw-spinner-primary"></div>
 </div>
+}
 ```
 
 ---
@@ -407,14 +423,17 @@ Use the `mw-field` wrapper to group label + control + hint/error:
 
 ```html
 <!-- Show while data is loading -->
-<div class="mw-skeleton-card" *ngIf="isLoading">
+@if (isLoading) {
+<div class="mw-skeleton-card">
   <span class="mw-skeleton mw-skeleton-title"></span>
   <span class="mw-skeleton mw-skeleton-text"></span>
   <span class="mw-skeleton mw-skeleton-text"></span>
 </div>
+}
 
 <!-- Avatar + text placeholder -->
-<div class="mw-skeleton-card" *ngIf="isLoading">
+@if (isLoading) {
+<div class="mw-skeleton-card">
   <div class="mw-skeleton-row">
     <span class="mw-skeleton mw-skeleton-circle"></span>
     <div class="mw-skeleton-body">
@@ -423,6 +442,7 @@ Use the `mw-field` wrapper to group label + control + hint/error:
     </div>
   </div>
 </div>
+}
 ```
 
 ---
@@ -505,6 +525,8 @@ Use the `mw-field` wrapper to group label + control + hint/error:
 
 ```typescript
 // component.ts
+private fb = inject(FormBuilder);
+
 form = this.fb.group({
   email: ['', [Validators.required, Validators.email]],
   name: ['', Validators.required],
@@ -526,19 +548,16 @@ get email() { return this.form.get('email')!; }
       <span class="mw-input-group-prefix"><i class="fas fa-envelope"></i></span>
       <input id="email" type="email" class="mw-input" formControlName="email" />
     </div>
-    <span
-      class="mw-field-error"
-      *ngIf="email.errors?.['required'] && email.touched"
-    >
+    @if (email.errors?.['required'] && email.touched) {
+    <span class="mw-field-error">
       <i class="fas fa-exclamation-circle"></i> Email is required.
     </span>
-    <span
-      class="mw-field-error"
-      *ngIf="email.errors?.['email'] && email.touched"
-    >
+    } @if (email.errors?.['email'] && email.touched) {
+    <span class="mw-field-error">
       <i class="fas fa-exclamation-circle"></i> Please enter a valid email
       address.
     </span>
+    }
   </div>
 
   <div class="mw-field">
@@ -564,17 +583,15 @@ get email() { return this.form.get('email')!; }
 ### Loading state pattern
 
 ```html
-<!-- Use skeleton while loading, then show real content -->
-<ng-container *ngIf="!isLoading; else loadingTpl">
-  <div class="mw-card mw-card-simple">
-    <!-- real content -->
-  </div>
-</ng-container>
-<ng-template #loadingTpl>
-  <div class="mw-skeleton-card">
-    <span class="mw-skeleton mw-skeleton-title"></span>
-    <span class="mw-skeleton mw-skeleton-text"></span>
-    <span class="mw-skeleton mw-skeleton-text"></span>
-  </div>
-</ng-template>
+@if (!isLoading) {
+<div class="mw-card mw-card-simple">
+  <!-- real content -->
+</div>
+} @else {
+<div class="mw-skeleton-card">
+  <span class="mw-skeleton mw-skeleton-title"></span>
+  <span class="mw-skeleton mw-skeleton-text"></span>
+  <span class="mw-skeleton mw-skeleton-text"></span>
+</div>
+}
 ```

package/CHANGELOG.md

@@ -6,6 +6,12 @@ Patch releases are only for test purposes - here I only document major and minor
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.2.0] - 2026-04-11
+
+### Changed
+
+- complete rework of spacing
+
 ## [3.1.0] - 2026-04-04
 
 ### Changed

package/index.html

@@ -154,14 +154,16 @@
       <section id="foundations">
         <div class="mw-container">
           <h2 class="mw-section-title">Foundations</h2>
-          <div class="mw-button-bar mw-button-bar-primary">
-            <a href="#typography" class="mw-btn">Typography</a>
-            <a href="#colors" class="mw-btn">Main Colors</a>
-            <a href="#utilities" class="mw-btn">Utilities</a>
-            <a href="#header-utilities" class="mw-btn">Header Utilities</a>
-            <a href="#coming-soon" class="mw-btn">Coming Soon Banner</a>
-            <a href="#divider" class="mw-btn">Divider</a>
-          </div>
+          <nav class="mw-section-nav">
+            <a href="#typography" class="mw-section-btn">Typography</a>
+            <a href="#colors" class="mw-section-btn">Main Colors</a>
+            <a href="#utilities" class="mw-section-btn">Utilities</a>
+            <a href="#header-utilities" class="mw-section-btn"
+              >Header Utilities</a
+            >
+            <a href="#coming-soon" class="mw-section-btn">Coming Soon Banner</a>
+            <a href="#divider" class="mw-section-btn">Divider</a>
+          </nav>
 
           <!-- Typography container -->
           <div id="typography">
@@ -199,19 +201,19 @@
       <section id="layout" class="mw-section-alternate">
         <div class="mw-container">
           <h2 class="mw-section-title">Layout</h2>
-          <div class="mw-button-bar mw-button-bar-primary">
-            <a href="#grid" class="mw-btn">Grid System</a>
-            <a href="#cards" class="mw-btn">Cards</a>
-            <a href="#panels" class="mw-btn">Panels</a>
-            <a href="#tabs" class="mw-btn">Tabs</a>
-            <a href="#accordions" class="mw-btn">Accordions</a>
-            <a href="#tiles" class="mw-btn">Tiles</a>
-            <a href="#breadcrumbs" class="mw-btn">Breadcrumbs</a>
-            <a href="#modals" class="mw-btn">Modals</a>
-            <a href="#html-lists" class="mw-btn">HTML Lists</a>
-            <a href="#item-lists" class="mw-btn">Item Lists</a>
-            <a href="#stepper" class="mw-btn">Stepper</a>
-          </div>
+          <nav class="mw-section-nav">
+            <a href="#grid" class="mw-section-btn">Grid System</a>
+            <a href="#cards" class="mw-section-btn">Cards</a>
+            <a href="#panels" class="mw-section-btn">Panels</a>
+            <a href="#tabs" class="mw-section-btn">Tabs</a>
+            <a href="#accordions" class="mw-section-btn">Accordions</a>
+            <a href="#tiles" class="mw-section-btn">Tiles</a>
+            <a href="#breadcrumbs" class="mw-section-btn">Breadcrumbs</a>
+            <a href="#modals" class="mw-section-btn">Modals</a>
+            <a href="#html-lists" class="mw-section-btn">HTML Lists</a>
+            <a href="#item-lists" class="mw-section-btn">Item Lists</a>
+            <a href="#stepper" class="mw-section-btn">Stepper</a>
+          </nav>
 
           <!-- Grid container -->
           <div id="grid">@@include('./src/partials/grid-container.html')</div>
@@ -266,20 +268,20 @@
       <section id="components">
         <div class="mw-container">
           <h2 class="mw-section-title">Components</h2>
-          <div class="mw-button-bar mw-button-bar-primary">
-            <a href="#buttons" class="mw-btn">Buttons</a>
-            <a href="#button-bar" class="mw-btn">Button Bar</a>
-            <a href="#progress" class="mw-btn">Progress Bars</a>
-            <a href="#spinners" class="mw-btn">Loading Spinners</a>
-            <a href="#avatars" class="mw-btn">Avatars</a>
-            <a href="#tags" class="mw-btn">Tags</a>
-            <a href="#ratings" class="mw-btn">Ratings</a>
-            <a href="#info" class="mw-btn">Info</a>
-            <a href="#alerts" class="mw-btn">Alerts</a>
-            <a href="#code" class="mw-btn">Code</a>
-            <a href="#skeleton" class="mw-btn">Skeleton</a>
-            <a href="#empty-state" class="mw-btn">Empty State</a>
-          </div>
+          <nav class="mw-section-nav">
+            <a href="#buttons" class="mw-section-btn">Buttons</a>
+            <a href="#button-bar" class="mw-section-btn">Button Bar</a>
+            <a href="#progress" class="mw-section-btn">Progress Bars</a>
+            <a href="#spinners" class="mw-section-btn">Loading Spinners</a>
+            <a href="#avatars" class="mw-section-btn">Avatars</a>
+            <a href="#tags" class="mw-section-btn">Tags</a>
+            <a href="#ratings" class="mw-section-btn">Ratings</a>
+            <a href="#info" class="mw-section-btn">Info</a>
+            <a href="#alerts" class="mw-section-btn">Alerts</a>
+            <a href="#code" class="mw-section-btn">Code</a>
+            <a href="#skeleton" class="mw-section-btn">Skeleton</a>
+            <a href="#empty-state" class="mw-section-btn">Empty State</a>
+          </nav>
 
           <!-- Buttons container -->
           <div id="buttons">
@@ -341,13 +343,13 @@
       <section id="forms" class="mw-section-alternate">
         <div class="mw-container">
           <h2 class="mw-section-title">Forms</h2>
-          <div class="mw-button-bar mw-button-bar-primary">
-            <a href="#form-elements" class="mw-btn">Form Elements</a>
-            <a href="#input-group" class="mw-btn">Input Group</a>
-            <a href="#form-field" class="mw-btn">Field Pattern</a>
-            <a href="#form" class="mw-btn">Form</a>
-            <a href="#login" class="mw-btn">Login</a>
-          </div>
+          <nav class="mw-section-nav">
+            <a href="#form-elements" class="mw-section-btn">Form Elements</a>
+            <a href="#input-group" class="mw-section-btn">Input Group</a>
+            <a href="#form-field" class="mw-section-btn">Field Pattern</a>
+            <a href="#form" class="mw-section-btn">Form</a>
+            <a href="#login" class="mw-section-btn">Login</a>
+          </nav>
 
           <!-- Form elements container -->
           <div id="form-elements">
@@ -376,18 +378,18 @@
       <section id="data-display">
         <div class="mw-container">
           <h2 class="mw-section-title">Data & Display</h2>
-          <div class="mw-button-bar mw-button-bar-primary">
-            <a href="#meta-info" class="mw-btn">Meta Info</a>
-            <a href="#tables" class="mw-btn">Tables</a>
-            <a href="#pagination" class="mw-btn">Pagination</a>
-            <a href="#timelines" class="mw-btn">Timelines</a>
-            <a href="#gallery" class="mw-btn">Image Gallery</a>
-            <a href="#techstack-bucket" class="mw-btn"
+          <nav class="mw-section-nav">
+            <a href="#meta-info" class="mw-section-btn">Meta Info</a>
+            <a href="#tables" class="mw-section-btn">Tables</a>
+            <a href="#pagination" class="mw-section-btn">Pagination</a>
+            <a href="#timelines" class="mw-section-btn">Timelines</a>
+            <a href="#gallery" class="mw-section-btn">Image Gallery</a>
+            <a href="#techstack-bucket" class="mw-section-btn"
               >Technology Stack Bucket</a
             >
-            <a href="#content-slider" class="mw-btn">Content Slider</a>
-            <a href="#blog-posts" class="mw-btn">Blog Posts</a>
-          </div>
+            <a href="#content-slider" class="mw-section-btn">Content Slider</a>
+            <a href="#blog-posts" class="mw-section-btn">Blog Posts</a>
+          </nav>
 
           <!-- Meta Info container -->
           <div id="meta-info">