maverick-wave 3.0.0

package/.prettierignore

@@ -0,0 +1,6 @@
+# node
+node_modules
+package-lock.json
+
+# built output
+dist

package/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": true,
+  "trailingComma": "es5"
+}

package/CHANGELOG.md

@@ -0,0 +1,420 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+Patch releases are only for test purposes - here I only document major and minor releases.
+
+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.0.0] - 2026-04-04
+
+### Added
+
+- started now with claude code integration
+- some additional components and form elements
+
+### Fixed
+
+- some minor fixes found by claude code
+
+## [2.36.0] - 2026-03-24
+
+### Fixed
+
+- removed tooltip directive cursor
+
+## [2.35.0] - 2026-03-24
+
+### Added
+
+- new mini info
+
+## [2.34.0] - 2026-03-23
+
+### Added
+
+- new mini-buttons
+- changed alert and tag "x" to new mini-button
+
+## [2.33.0] - 2026-02-24
+
+### Fixed
+
+- timeline dates cursor
+
+## [2.32.0] - 2026-02-24
+
+### Changed
+
+- some small updates
+
+## [2.31.0] - 2026-01-30
+
+### Changed
+
+- use of global z-index function
+
+## [2.30.0] - 2026-01-29
+
+### Fixed
+
+- status background colors
+- alert backgrounds
+
+## [2.29.0] - 2026-01-29
+
+### Changed
+
+- simple timeline date
+- global spacing 7 and 8
+
+## [2.28.0] - 2026-01-28
+
+### Changed
+
+- alerts rework
+
+## [2.27.0] - 2026-01-28
+
+### Added
+
+- tags rework
+
+### Changed
+
+- modal sizes
+- checkbox inline group spacing
+
+## [2.26.0] - 2026-01-26
+
+### Added
+
+- text in danger color
+
+## [2.25.0] - 2025-12-31
+
+### Fixed
+
+- reverted status color background names
+
+## [2.24.0] - 2025-12-31
+
+### Fixed
+
+- reverted status color background names
+
+## [2.23.0] - 2025-12-31
+
+### Changed
+
+- gallery container with max-width
+
+## [2.22.0] - 2025-12-31
+
+### Changed
+
+- container width
+- status color background names
+
+### Added
+
+- Techstack Buckets
+
+## [2.21.0] - 2025-12-26
+
+### Added
+
+- Cards title divider
+
+## [2.20.0] - 2025-12-22
+
+### Added
+
+- Events (certificates for example) for the big timeline
+
+## [2.19.0] - 2025-12-10
+
+### Added
+
+- Tooltip
+
+## [2.18.0] - 2025-12-08
+
+### Added
+
+- active marker for timelines
+- function for font-weights
+
+## [2.17.0] - 2025-07-16
+
+### Added
+
+- selectable item-list with checkboxes
+
+### Fixed
+
+- sizing on gallery
+
+## [2.16.0] - 2025-07-07
+
+### Fixed
+
+- some spacing
+- icons
+
+## [2.15.0] - 2025-07-01
+
+### Fixed
+
+- tiles spacing
+
+## [2.14.0] - 2025-07-01
+
+### Added
+
+- breadcrumbs
+- tiles
+
+### Fixed
+
+- main centering
+
+## [2.13.0] - 2025-06-30
+
+### Fixed
+
+- burger button without theme toggle
+
+## [2.12.0] - 2025-06-30
+
+### Fixed
+
+- simple timeline content
+
+## [2.11.0] - 2025-06-30
+
+### Fixed
+
+- home centering
+
+## [2.10.0] - 2025-06-30
+
+### Fixed
+
+- login width
+- main / home / content styles
+
+## [2.9.0] - 2025-06-30
+
+### Added
+
+- login info text
+
+### Fixed
+
+- login width
+- content height
+
+## [2.8.0] - 2025-06-27
+
+### Fixed
+
+- smooth scrolling offset
+
+## [2.7.0] - 2025-06-27
+
+### Added
+
+- content slider (image slider)
+- buttons active state
+
+## [2.6.0] - 2025-06-25
+
+### Added
+
+- alternate section with css pattern
+
+## [2.5.0] - 2025-06-18
+
+### Added
+
+- button bar
+
+## [2.4.0] - 2025-06-10
+
+### Fixed
+
+- login button (click and disabled)
+
+## [2.3.0] - 2025-06-10
+
+### Fixed
+
+- header navbar
+
+## [2.2.0] - 2025-06-10
+
+### Changed
+
+- header navbar with login button
+
+## [2.1.0] - 2025-06-09
+
+### Fixed
+
+- grid spacing
+
+## [2.0.0] - 2025-06-09
+
+### Added
+
+- big update
+- modals
+- pagination
+- item lists
+- form and form-elements
+- different flex grid ratios
+
+### Changes
+
+- sizing sizing sizing
+- complete grid rework
+- progress bars update
+
+## [1.21.0] - 2025-05-23
+
+### Changed
+
+- counters to info as badges or counters
+
+## [1.20.0] - 2025-05-23
+
+### Changed
+
+- reworked allerts
+
+## [1.19.0] - 2025-05-22
+
+### Added
+
+- badge for cards
+- ribbon for cards
+
+### Changed
+
+- text-secondary to text-muted
+- Spacing within cards
+- color variants in components as loop
+
+## [1.18.0] - 2025-05-22
+
+### Changed
+
+- spacing in many components
+- header logo as svg
+- some stuff in new timeline components
+
+## [1.17.0] - 2025-05-21
+
+### Added
+
+- timeline components
+
+## [1.16.0] - 2025-05-20
+
+### Changed
+
+- sizes of the loading spinner
+
+## [1.15.0] - 2025-05-14
+
+### Fixed
+
+- spacing of mw-content
+- spacing and elements of mw-blog-post
+- spacing of tags
+
+## [1.14.0] - 2025-05-14
+
+### Added
+
+- rating component
+
+## [1.13.0] - 2025-05-13
+
+### Fixed
+
+- login form width
+
+## [1.12.0] - 2025-05-13
+
+### Changed
+
+- login form
+
+## [1.11.0] - 2025-05-13
+
+### Fixed
+
+- removed text-align center from new mw-content
+
+## [1.10.0] - 2025-05-13
+
+### Changed
+
+- main and home parts and added hero with full-size background image
+- changed some little styles
+
+## [1.9.0] - 2025-05-05
+
+### Added
+
+- card subtitle
+
+### Changed
+
+- some color and size adjustments
+
+## [1.8.0] - 2025-05-03
+
+### Fixed
+
+- too small font-size on blog-post
+
+## [1.7.0] - 2025-05-03
+
+### Changed
+
+- home section
+- all "@media" to "@include"
+
+## [1.6.0] - 2025-05-03
+
+### Fixed
+
+- multiple font-family variables
+
+## [1.5.0] - 2025-05-02
+
+### Fixed
+
+- wrong mapping of the text color on primary or secondary elements
+
+## [1.4.0] - 2025-05-02
+
+### Added
+
+- new color variables for text on primary or secondary elements
+- new color variables for the fixed header/navbar
+- CHANGELOG.md
+
+### Changed
+
+- updated complete header and navbar
+- ol/ul-list margin in the blog-post
+
+## [1.3.0] - 2025-04-30
+
+### Added
+
+- let's say "initial release"

package/CLAUDE.md

@@ -0,0 +1,53 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+MaverickWave is a lightweight, modern CSS framework providing a grid system, 25+ UI components, utility classes, and light/dark mode support. The repo also contains the showcase/documentation website bundled into the distribution.
+
+## Commands
+
+```bash
+npm start          # Build + watch for changes (development)
+npm run build      # Clean dist, then full build
+npm run showcase   # Serve built dist on http://localhost:8888
+npm run clean      # Remove dist/ and root maverick-wave.{css,js}
+npm run format     # Format all SCSS, JS, JSON, HTML, MD with Prettier
+npm run release    # Build non-minified maverick-wave.{css,js} in project root
+```
+
+There are no test or lint scripts.
+
+## Architecture
+
+**Build pipeline** — `gulpfile.js` orchestrates everything: SCSS compilation (autoprefixed, minified), JS minification via Terser, HTML templating via `gulp-file-include`, asset copying, and build-info injection (`{{VERSION}}`, `{{LAST_BUILD_DATE}}`, `{{LAST_BUILD_YEAR}}` placeholders replaced in HTML at build time).
+
+**SCSS layers** (`src/scss/`) follow an ITCSS-inspired structure:
+
+- `abstracts/` — CSS custom properties, mixins, SCSS functions (color variant generation)
+- `base/` — Reset, element defaults, typography
+- `components/` — Self-contained component styles (25+ files, one per component)
+- `form-elements/` — Form input/select/checkbox-specific styles
+- `layout/` — Grid, container, header/footer, section
+- `utilities/` — Spacing, flex, display utility classes
+- `main.scss` — Entry point using `@use`/`@forward` (not `@import`)
+
+**JavaScript** (`src/js/main.js`) — Single file. All components auto-initialize on `DOMContentLoaded`. Includes: gallery slider, theme toggle (persisted to localStorage), accordion, mobile nav, progress bar (IntersectionObserver), scroll spy, tabs, alerts/toasts, modals, range inputs.
+
+**HTML showcase** (`index.html` + `src/partials/`) — The top-level `index.html` uses `@@include()` syntax to pull in 40+ partials from `src/partials/`. These compile into `dist/index.html`.
+
+## Naming Conventions
+
+- **CSS classes**: `mw-` prefix for all framework classes (`.mw-button`, `.mw-card`, `.mw-modal`)
+- **State classes**: `.mw-active`, `.mw-selected`
+- **CSS custom properties**: `--mw-` prefix (`--mw-primary-color`, `--mw-font-family-base`)
+- **Theme control**: `--mw-internal-theme-mode` CSS var controls whether theme is switchable/fixed-light/fixed-dark; body class `mw-theme-light` toggles light mode
+
+## Code Formatting
+
+Prettier is the single formatter. Config (`.prettierrc.json`): single quotes, 80-char print width, 2-space tabs, semicolons, trailing commas (ES5). Run `npm run format` before committing.
+
+## Commit Convention
+
+Follows Conventional Commits: `feat:`, `fix:`, `release:`, etc.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Michael Wellner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,191 @@
+# MaverickWave
+
+A lightweight, modern CSS framework for building responsive websites with elegance and speed. MaverickWave provides a clean foundation suitable for projects ranging from personal portfolios to corporate websites and e-commerce platforms.
+
+While AI tools helped kickstart the development of some components and provided initial structure, approximately 80% of the codebase required manual refinement and customization. The framework has been meticulously crafted to ensure:
+
+- Consistent implementation of custom variables throughout the system
+- Proper integration between components and logical SCSS structure
+- Optimized specificity and selector hierarchy
+- Reliable responsive behavior across devices
+- Built-in dark mode support and accessibility considerations
+
+The result is a framework that balances utility with simplicity, offering developers a solid foundation that can be easily customized.
+
+➡️ [**View the Live Showcase & Documentation**](https://maverick-wave.m1well.com)
+
+## Features
+
+- Responsive Grid System
+- 30+ UI Components: Buttons, Cards, Panels, Tabs, Accordions, Modals, Tiles, Alerts, Spinners, Progress Bars, Avatars, Tags, Ratings, Stepper, Skeleton Loader, Empty State, Divider, and more
+- Form Elements: Input, Select, Textarea, Checkbox, Radio, Toggle, Input Group, with `mw-field` wrapper pattern for Angular Reactive Forms
+- Utility Classes for spacing, flex, display, and typography
+- Easy Customization via CSS Custom Properties
+- Built-in Light & Dark Mode with optional theme switching
+- SCSS Source Files for advanced customization (Dart Sass, `@use`/`@forward`)
+- Minimal JavaScript footprint (single vanilla JS file, no dependencies)
+
+## Installation & Usage
+
+### 1. CDN (jsDelivr — GitHub)
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My MaverickWave Project</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/m1well/maverick-wave@v2.36.1/maverick-wave.min.css"
+    />
+  </head>
+  <body>
+    <!-- Your content here -->
+
+    <script src="https://cdn.jsdelivr.net/gh/m1well/maverick-wave@v2.36.1/maverick-wave.min.js"></script>
+  </body>
+</html>
+```
+
+Always pin to a specific version tag (e.g., `@v2.36.1`) in production for stability.
+
+### 2. Direct Download
+
+Download `maverick-wave.min.css` and `maverick-wave.min.js` from the [latest release](https://github.com/m1well/maverick-wave/releases) and include them manually:
+
+```html
+<link rel="stylesheet" href="path/to/maverick-wave.min.css" />
+<script src="path/to/maverick-wave.min.js"></script>
+```
+
+## Customization
+
+### CSS Custom Properties
+
+Override framework variables in your own stylesheet (load it **after** `maverick-wave.min.css`):
+
+```css
+:root {
+  --mw-primary-color: #your-brand-color;
+  --mw-secondary-color: #your-secondary-color;
+  --mw-dark-page-background: #1a1a2e;
+  --mw-dark-card-background: #2a2a4a;
+  --mw-font-family-base: 'Your Font Name', sans-serif;
+}
+```
+
+### SCSS Source
+
+For full control, clone the repository and integrate `src/scss/main.scss` into your Sass build (Dart Sass required). MaverickWave uses modern `@use`/`@forward` syntax. Set your variable overrides before the `@use` statement:
+
+```scss
+// your styles.scss
+
+// Optional: choose theme mode ('switchable' | 'dark' | 'light')
+$mw-theme-mode: 'switchable';
+
+// Override base colors
+$primary-color: #e94560;
+$secondary-color: #f39c12;
+$dark-background: #1f1f2e;
+$light-background: #f8f9fa;
+
+// Import the framework
+@use 'path/to/maverick-wave/src/scss/main';
+```
+
+### Angular Integration
+
+Copy `maverick-wave.min.css` and `maverick-wave.min.js` into your Angular project (e.g. `src/assets/`) and reference them in `angular.json`:
+
+```json
+"styles": ["src/assets/maverick-wave.min.css", "src/styles.scss"],
+"scripts": ["src/assets/maverick-wave.min.js"]
+```
+
+MaverickWave automatically styles Angular Reactive Forms state classes (`.ng-invalid.ng-touched`, `.ng-valid.ng-touched.ng-dirty`). Use the `mw-field` wrapper pattern:
+
+```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-error" *ngIf="email.invalid && email.touched">
+    <i class="fas fa-exclamation-circle"></i> Please enter a valid email
+    address.
+  </span>
+</div>
+```
+
+## Development
+
+### Prerequisites
+
+- Node.js v18 or newer
+- npm
+- Git
+
+### Setup
+
+```bash
+git clone https://github.com/m1well/maverick-wave.git
+cd maverick-wave
+npm install
+```
+
+### Development Commands
+
+```bash
+npm run start     # Start Gulp watcher (recompiles on changes)
+npm run showcase  # Serve the built dist/ on http://localhost:8888
+npm run build     # Full clean build → dist/
+npm run format    # Format all source files with Prettier
+npm run release   # Build non-minified release files to project root
+```
+
+## Project Structure
+
+```
+maverick-wave/
+├── dist/                   # Compiled output (CSS, JS, HTML showcase)
+├── src/
+│   ├── assets/             # Logos, favicons
+│   ├── js/                 # JavaScript source (single file)
+│   ├── partials/           # HTML partials for the showcase
+│   └── scss/
+│       ├── abstracts/      # Variables, mixins, functions
+│       ├── base/           # Reset, typography
+│       ├── components/     # Component styles (one file per component)
+│       ├── form-elements/  # Input, select, checkbox, toggle, etc.
+│       ├── layout/         # Grid, container, header, footer
+│       ├── utilities/      # Spacing, flex, display helpers
+│       └── main.scss       # SCSS entry point
+├── .claude/
+│   └── commands/mw.md      # Claude Code slash command for Angular projects
+├── .prettierrc.json        # Prettier configuration
+├── gulpfile.js             # Gulp tasks configuration
+├── index.html              # Showcase entry point
+└── package.json
+```
+
+## Contribution
+
+Contributions are welcome!
+
+1. Fork the repository.
+2. Create a new branch for your feature or fix.
+3. Make your changes and run `npm run format`.
+4. Commit using Conventional Commits (e.g., `feat: add new component`).
+5. Push and open a Pull Request.
+
+## License
+
+MIT License
+
+## Author
+
+Created by [m1well](https://m1well.com)