npm - maverick-wave - Versions diffs - 3.3.0 → 3.3.2 - Mend

maverick-wave 3.3.0 → 3.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/.claude/skills/maverick-wave/SKILL.md +208 -0
package/.claude/skills/maverick-wave/examples/angular-form.md +275 -0
package/.claude/skills/maverick-wave/examples/angular-list-page.md +304 -0
package/.claude/skills/maverick-wave/examples/angular-services.md +348 -0
package/.claude/skills/maverick-wave/examples/static-landing-page.md +362 -0
package/.claude/skills/maverick-wave/references/components.md +812 -0
package/.claude/skills/maverick-wave/references/forms.md +289 -0
package/.claude/skills/maverick-wave/references/javascript.md +70 -0
package/.claude/skills/maverick-wave/references/layout.md +300 -0
package/.claude/skills/maverick-wave/references/theming.md +192 -0
package/.github/workflows/ci.yml +41 -0
package/CHANGELOG.md +13 -0
package/README.md +115 -21
package/index.html +15 -9
package/maverick-wave.min.css +1 -1
package/maverick-wave.min.js +1 -1
package/package.json +3 -1
package/scripts/verify.js +137 -0
package/src/js/main.js +39 -11
package/src/partials/accordions-container.html +22 -27
package/src/partials/alerts-container.html +26 -0
package/src/partials/avatars-container.html +22 -0
package/src/partials/buttons-container.html +11 -15
package/src/partials/cards-container.html +8 -8
package/src/partials/colors-container.html +33 -20
package/src/partials/documentation-container.html +3 -0
package/src/partials/form-field-container.html +16 -12
package/src/partials/get-started-container.html +93 -35
package/src/partials/header-utilities-container.html +64 -6
package/src/partials/input-group-container.html +5 -3
package/src/partials/page-header-container.html +78 -0
package/src/partials/tables-container.html +130 -0
package/src/partials/tabs-container.html +20 -16
package/src/partials/tags-container.html +55 -1
package/src/scss/abstracts/_index.scss +4 -1
package/src/scss/abstracts/_variables.scss +128 -106
package/src/scss/base/_base.scss +32 -136
package/src/scss/base/_reset.scss +1 -1
package/src/scss/base/_typography.scss +0 -92
package/src/scss/components/_accordions.scss +3 -3
package/src/scss/components/_avatars.scss +28 -1
package/src/scss/components/_blog-post.scss +1 -1
package/src/scss/components/_button-bar.scss +6 -6
package/src/scss/components/_buttons.scss +33 -10
package/src/scss/components/_cards.scss +7 -7
package/src/scss/components/_coming-soon.scss +4 -4
package/src/scss/components/_gallery.scss +2 -2
package/src/scss/components/_index.scss +1 -0
package/src/scss/components/_info.scss +20 -3
package/src/scss/components/_lists.scss +11 -10
package/src/scss/components/_modals.scss +14 -7
package/src/scss/components/_pagination.scss +3 -3
package/src/scss/components/_panels.scss +4 -4
package/src/scss/components/_progress.scss +1 -1
package/src/scss/components/_ratings.scss +1 -1
package/src/scss/components/_spinners.scss +2 -2
package/src/scss/components/_stepper.scss +3 -2
package/src/scss/components/_tables.scss +42 -1
package/src/scss/components/_tabs.scss +5 -5
package/src/scss/components/_tags.scss +43 -27
package/src/scss/components/_tiles.scss +3 -3
package/src/scss/components/_timelines.scss +2 -2
package/src/scss/components/_toasts.scss +92 -0
package/src/scss/form-elements/_form.scss +11 -3
package/src/scss/form-elements/_input.scss +24 -0
package/src/scss/form-elements/_toggle.scss +1 -1
package/src/scss/layout/_footer.scss +4 -4
package/src/scss/layout/_header.scss +219 -59
package/src/scss/layout/_index.scss +1 -0
package/src/scss/layout/_main.scss +1 -1
package/src/scss/layout/_page-header.scss +48 -0
package/src/scss/layout/_section.scss +15 -14
package/src/scss/main.scss +4 -0
package/src/scss/utilities/_flex.scss +4 -0
package/src/scss/utilities/_index.scss +1 -0
package/src/scss/utilities/_text.scss +105 -0
package/.claude/commands/mw.md +0 -595

package/.claude/commands/mw.md DELETED Viewed

@@ -1,595 +0,0 @@
-# MaverickWave CSS Framework — Angular Integration Guide
-This skill helps you use the **MaverickWave CSS framework** in an Angular project.
-MaverickWave provides ready-made CSS classes. You apply them directly in Angular templates — no Angular-specific library is needed.
----
-## Setup
-### 1. Build the framework
-```bash
-cd path/to/maverick-wave
-npm run build
-# Outputs: dist/maverick-wave.min.css  (and .css for dev)
-```
-### 2. Add to Angular project
-**Option A — copy the CSS file** and reference it in `angular.json`:
-```json
-"styles": [
-  "src/styles.scss",
-  "src/assets/maverick-wave.min.css"
-]
-```
-**Option B — import in `styles.scss`** (if you publish to npm or use a local path):
-```scss
-@import 'path/to/maverick-wave.min.css';
-```
-### 3. FontAwesome icons
-MaverickWave uses FontAwesome icons. Add to `index.html`:
-```html
-<link
-  rel="stylesheet"
-  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
-/>
-```
-### 4. Theme (dark/light)
-The framework defaults to dark mode. To enable switching, add `.mw-theme-light` to `<body>`:
-```typescript
-// In your AppComponent
-toggleTheme() {
-  document.body.classList.toggle('mw-theme-light');
-}
-```
----
-## Angular Reactive Forms Integration
-Use the `mw-field` wrapper to group label + control + hint/error:
-```html
-<div
-  class="mw-field"
-  [class.mw-field-has-error]="email.invalid && email.touched"
->
-  <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>
-  @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>
-```
----
-## Form Elements
-### Input
-```html
-<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 Group (prefix / suffix / button)
-```html
-<!-- Icon prefix -->
-<div class="mw-input-group">
-  <span class="mw-input-group-prefix"><i class="fas fa-search"></i></span>
-  <input type="text" class="mw-input" placeholder="Search..." />
-</div>
-<!-- Text prefix + suffix -->
-<div class="mw-input-group">
-  <span class="mw-input-group-prefix">https://</span>
-  <input type="text" class="mw-input" placeholder="your-domain.com" />
-  <span class="mw-input-group-suffix">.com</span>
-</div>
-<!-- Input + button -->
-<div class="mw-input-group">
-  <input type="text" class="mw-input" placeholder="Search..." />
-  <button type="button" class="mw-btn mw-btn-primary">
-    <i class="fas fa-search"></i>
-  </button>
-</div>
-<!-- Sizes: mw-input-group-sm / mw-input-group-lg -->
-```
-### Date, Time & DateTime
-```html
-<!-- Date -->
-<div class="mw-input-group">
-  <span class="mw-input-group-prefix"
-    ><i class="fas fa-calendar-days"></i
-  ></span>
-  <input type="date" class="mw-input" formControlName="appointmentDate" />
-</div>
-<!-- Time -->
-<div class="mw-input-group">
-  <span class="mw-input-group-prefix"><i class="fas fa-clock"></i></span>
-  <input type="time" class="mw-input" formControlName="startTime" />
-</div>
-<!-- DateTime-local -->
-<div class="mw-input-group">
-  <span class="mw-input-group-prefix"
-    ><i class="fas fa-calendar-days"></i
-  ></span>
-  <input type="datetime-local" class="mw-input" formControlName="mainSlot" />
-</div>
-<!-- With mw-field wrapper (recommended for forms) -->
-<div class="mw-field">
-  <label class="mw-field-label mw-required" for="mainSlot">Main Slot</label>
-  <div class="mw-input-group">
-    <span class="mw-input-group-prefix"
-      ><i class="fas fa-calendar-days"></i
-    ></span>
-    <input
-      id="mainSlot"
-      type="datetime-local"
-      class="mw-input"
-      formControlName="mainSlot"
-    />
-  </div>
-</div>
-<!-- Sizes: combine mw-input-group-sm/lg with mw-input-sm/lg -->
-```
-### Select
-```html
-<select class="mw-select">
-  <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-sm"></textarea>
-<textarea class="mw-textarea mw-textarea-lg"></textarea>
-<!-- Resize variants: mw-textarea-resizable / mw-textarea-resizable-vertical / mw-textarea-resizable-horizontal -->
-```
-### Checkbox
-```html
-<label class="mw-checkbox">
-  <input type="checkbox" formControlName="agreed" />
-  <span class="mw-checkbox-box"></span>
-  <span class="mw-checkbox-label">I agree to the terms</span>
-</label>
-<!-- Color variants: mw-checkbox-primary / secondary / success / warning / danger / info -->
-<!-- Size variants: mw-checkbox-sm / mw-checkbox-lg -->
-<!-- Disabled: add class mw-checkbox-disabled + disabled attr on input -->
-```
-### Radio
-```html
-<label class="mw-radio">
-  <input type="radio" name="plan" value="free" formControlName="plan" />
-  <span class="mw-radio-button"></span>
-  <span class="mw-radio-label">Free</span>
-</label>
-<!-- Color variants: mw-radio-primary / secondary / success / warning / danger / info -->
-<!-- Size variants: mw-radio-sm / mw-radio-lg -->
-<!-- Disabled: add class mw-radio-disabled + disabled attr on input -->
-```
-### Toggle Switch
-```html
-<label class="mw-toggle">
-  <input type="checkbox" formControlName="notifications" />
-  <span class="mw-toggle-track"></span>
-  <span class="mw-toggle-label">Enable notifications</span>
-</label>
-<!-- Sizes: mw-toggle-sm / mw-toggle-lg -->
-<!-- Colors: mw-toggle-primary / secondary / success / warning / danger -->
-<!-- Disabled: mw-toggle-disabled (add disabled attr to input too) -->
-```
-### Form Field Pattern
-```html
-<div class="mw-field">
-  <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>
-  @if (name.invalid && name.touched) {
-  <span class="mw-field-error">
-    <i class="fas fa-exclamation-circle"></i> Name is required.
-  </span>
-  }
-</div>
-```
-### Form Layout
-```html
-<form class="mw-form" [formGroup]="myForm" (ngSubmit)="onSubmit()">
-  <div class="mw-form-group">
-    <h4 class="mw-form-group-title">Personal Info</h4>
-    <div class="mw-grid-2 mw-gap-4">
-      <!-- fields go here -->
-    </div>
-  </div>
-  <div class="mw-form-actions">
-    <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
-    <button type="submit" class="mw-btn mw-btn-primary">Save</button>
-  </div>
-</form>
-```
----
-## Buttons
-```html
-<button class="mw-btn mw-btn-primary">Primary</button>
-<button class="mw-btn mw-btn-secondary">Secondary</button>
-<button class="mw-btn mw-btn-outline">Outline</button>
-<button class="mw-btn mw-btn-link">Link</button>
-<button class="mw-btn mw-btn-link-muted">Muted Link</button>
-<!-- Sizes: mw-btn-sm / mw-btn-lg -->
-<!-- With icon: -->
-<button class="mw-btn mw-btn-primary"><i class="fas fa-save"></i> Save</button>
-```
----
-## Layout Utilities
-```html
-<!-- Grid -->
-<div class="mw-grid-2 mw-gap-4">...</div>
-<!-- 2-col grid -->
-<div class="mw-grid-3 mw-gap-6">...</div>
-<!-- 3-col grid -->
-<div class="mw-grid-4 mw-gap-4">...</div>
-<!-- 4-col grid -->
-<!-- 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) -->
-```
----
-## Cards & Panels
-```html
-<!-- Simple card -->
-<div class="mw-card mw-card-simple">
-  <h4 class="mw-card-title">Title</h4>
-  <p>Content</p>
-</div>
-<!-- Hoverable card -->
-<div class="mw-card mw-card-hover">...</div>
-<!-- Panel (titled section) -->
-<div class="mw-panel">
-  <h4 class="mw-panel-header">Panel Title</h4>
-  <div class="mw-panel-body">...</div>
-</div>
-```
----
-## Alerts
-```html
-<div class="mw-alert mw-alert-primary">Info message.</div>
-<div class="mw-alert mw-alert-success">Success message.</div>
-<div class="mw-alert mw-alert-warning">Warning message.</div>
-<div class="mw-alert mw-alert-danger">Error message.</div>
-<!-- Closable (handle dismiss in component) -->
-@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>
-}
-```
----
-## Tables
-```html
-<div class="mw-table-wrapper">
-  <table class="mw-table">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      @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>
-```
----
-## Tags / Badges
-```html
-<span class="mw-tag mw-tag-primary">Primary</span>
-<span class="mw-tag mw-tag-success">Active</span>
-<span class="mw-tag mw-tag-warning">Pending</span>
-<span class="mw-tag mw-tag-danger">Error</span>
-<span class="mw-tag mw-tag-info">Info</span>
-<span class="mw-tag mw-tag-secondary">Secondary</span>
-```
----
-## Modal
-```html
-<!-- Trigger: set isOpen = true in component -->
-<div
-  class="mw-modal-overlay"
-  [class.mw-modal-open]="isOpen"
-  (click)="isOpen = false"
->
-  <div class="mw-modal" (click)="$event.stopPropagation()">
-    <div class="mw-modal-header">
-      <h3 class="mw-modal-title">Title</h3>
-      <button class="mw-btn mw-btn-link" (click)="isOpen = false">
-        <i class="fas fa-times"></i>
-      </button>
-    </div>
-    <div class="mw-modal-body">Content</div>
-    <div class="mw-modal-footer">
-      <button class="mw-btn mw-btn-outline" (click)="isOpen = false">
-        Cancel
-      </button>
-      <button class="mw-btn mw-btn-primary" (click)="confirm()">Confirm</button>
-    </div>
-  </div>
-</div>
-```
----
-## Spinner / Loading
-```html
-<div class="mw-spinner mw-spinner-primary"></div>
-<div class="mw-spinner mw-spinner-sm mw-spinner-secondary"></div>
-<!-- With overlay (e.g., on async operations) -->
-@if (isLoading) {
-<div class="mw-spinner-overlay">
-  <div class="mw-spinner mw-spinner-primary"></div>
-</div>
-}
-```
----
-## Skeleton Loader
-```html
-<!-- Show while data is loading -->
-@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 -->
-@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">
-      <span class="mw-skeleton mw-skeleton-text" style="width: 55%"></span>
-      <span class="mw-skeleton mw-skeleton-text"></span>
-    </div>
-  </div>
-</div>
-}
-```
----
-## Stepper
-```html
-<!-- Horizontal -->
-<div class="mw-stepper">
-  <div class="mw-stepper-step">
-    <div class="mw-stepper-indicator mw-done"><i class="fas fa-check"></i></div>
-    <span class="mw-stepper-label mw-done">Account</span>
-  </div>
-  <div class="mw-stepper-connector mw-done"></div>
-  <div class="mw-stepper-step">
-    <div class="mw-stepper-indicator mw-active">2</div>
-    <span class="mw-stepper-label mw-active">Details</span>
-  </div>
-  <div class="mw-stepper-connector"></div>
-  <div class="mw-stepper-step">
-    <div class="mw-stepper-indicator">3</div>
-    <span class="mw-stepper-label">Review</span>
-  </div>
-</div>
-```
----
-## Empty State
-```html
-<div class="mw-empty-state">
-  <div class="mw-empty-state-icon">
-    <i class="fas fa-inbox"></i>
-  </div>
-  <h3 class="mw-empty-state-title">No results found</h3>
-  <p class="mw-empty-state-desc">Try adjusting your search or filters.</p>
-  <button class="mw-btn mw-btn-primary">Clear filters</button>
-</div>
-<!-- Color variants: mw-empty-state-primary / success / warning / danger -->
-<!-- Size variant: mw-empty-state-sm -->
-```
----
-## Divider
-```html
-<hr class="mw-divider" />
-<hr class="mw-divider mw-divider-thick" />
-<hr class="mw-divider mw-divider-dashed" />
-<hr class="mw-divider mw-divider-primary" />
-<!-- With text -->
-<div class="mw-divider-text">or continue with</div>
-<!-- Vertical (in flex containers) -->
-<span class="mw-divider-vertical"></span>
-```
----
-## Typography Helpers
-```html
-<p class="mw-text-muted">Muted text</p>
-<p class="mw-text-sm">Small text</p>
-<p class="mw-text-medium">Medium weight</p>
-<span class="mw-text-primary">Primary colored</span>
-<span class="mw-text-success">Success colored</span>
-<span class="mw-text-danger">Danger colored</span>
-```
----
-## Common Angular Patterns
-### Reactive form with full validation
-```typescript
-// component.ts
-private fb = inject(FormBuilder);
-form = this.fb.group({
-  email: ['', [Validators.required, Validators.email]],
-  name: ['', Validators.required],
-  notifications: [true],
-});
-get email() { return this.form.get('email')!; }
-```
-```html
-<!-- template -->
-<form class="mw-form" [formGroup]="form" (ngSubmit)="onSubmit()">
-  <div
-    class="mw-field"
-    [class.mw-field-has-error]="email.invalid && email.touched"
-  >
-    <label class="mw-field-label mw-required" for="email">Email</label>
-    <div class="mw-input-group">
-      <span class="mw-input-group-prefix"><i class="fas fa-envelope"></i></span>
-      <input id="email" type="email" class="mw-input" formControlName="email" />
-    </div>
-    @if (email.errors?.['required'] && email.touched) {
-    <span class="mw-field-error">
-      <i class="fas fa-exclamation-circle"></i> Email is required.
-    </span>
-    } @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">
-    <label class="mw-toggle">
-      <input type="checkbox" formControlName="notifications" />
-      <span class="mw-toggle-track"></span>
-      <span class="mw-toggle-label">Enable email notifications</span>
-    </label>
-  </div>
-  <div class="mw-form-actions">
-    <button
-      type="submit"
-      class="mw-btn mw-btn-primary"
-      [disabled]="form.invalid"
-    >
-      <i class="fas fa-save"></i> Save
-    </button>
-  </div>
-</form>
-```
-### Loading state pattern
-```html
-@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>
-}
-```