maverick-wave 4.28.0 → 5.0.0

package/CHANGELOG.md

@@ -6,6 +6,17 @@ 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).
 
+## [5.0.0] - 2026-09-10
+
+### Added
+
+- layers
+
+### Changed
+
+- tried out some skills and updated some stuff
+- refactored complete code
+
 ## [4.28.0] - 2026-09-08
 
 ### Added

package/CLAUDE.md

@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## 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.
+MaverickWave is a lightweight, modern CSS framework providing a grid system, 48 UI components, utility classes, and light/dark mode support. The repo also contains the showcase/documentation website bundled into the distribution.
 
 ## Commands
 
@@ -30,19 +30,19 @@ There are no test or lint scripts.
 
 - `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)
+- `components/` - Self-contained component styles (48 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.
+**JavaScript** (`src/js/main.js`) - Single file. All components auto-initialize on `DOMContentLoaded`. Includes: gallery and image sliders, theme toggle (persisted to localStorage, transitions suppressed during the flip), accordion, mobile nav, progress bar (IntersectionObserver), scroll spy, tabs (which also get their ARIA and arrow-key handling here), alerts/toasts, modals, range inputs, dropdowns, language switcher, checkbox lists, kanban board, calendar.
 
-**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`.
+**HTML showcase** (`index.html` + `src/partials/`) - The top-level `index.html` uses `@@include()` syntax to pull in 60 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`)
+- **CSS classes**: `mw-` prefix for all framework classes (`.mw-btn`, `.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

package/README.md

@@ -6,7 +6,7 @@ While AI tools helped kickstart the development of some components and provided
 
 - Consistent implementation of custom variables throughout the system
 - Proper integration between components and logical SCSS structure
-- Optimized specificity and selector hierarchy
+- Cascade layers throughout, so a project overrides any `mw-` class with a plain selector
 - Reliable responsive behavior across devices
 - Built-in dark mode support and accessibility considerations
 
@@ -25,6 +25,8 @@ The result is a framework that balances utility with simplicity, offering develo
 - 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`)
+- Modals as `<div>` or as `<dialog>` - the latter brings the focus trap, Escape and the inert background from the platform
+- Native form validation is styled through `:user-invalid`, alongside the class-driven error states for reactive forms
 - Minimal JavaScript footprint (single vanilla JS file, no dependencies)
 
 ## Installation & Usage
@@ -40,12 +42,12 @@ The result is a framework that balances utility with simplicity, offering develo
     <title>My MaverickWave Project</title>
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/maverick-wave@4.28.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.0.0/maverick-wave.min.css"
     />
   </head>
   <body>
     <!-- Your content here -->
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@4.28.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.0.0/maverick-wave.min.js"></script>
   </body>
 </html>
 ```
@@ -307,6 +309,42 @@ card - keep that ordering if you retune the card, or the footer stops looking
 like a footer. The rule between the surfaces keeps its own fixed factor: it runs
 against the card, or it disappears into what it separates.
 
+### Overriding
+
+Everything the framework emits sits in cascade layers:
+
+```css
+@layer mw.reset, mw.base, mw.forms, mw.components, mw.layout, mw.utilities;
+```
+
+An unlayered rule beats every layer no matter how specific it is, so a project
+overrides a component with a single class selector - no `!important`, no
+`.mw-card.mw-card`:
+
+```css
+.mw-card {
+  border-radius: 12px;
+}
+```
+
+`!important` is not the stronger version of that, it is the weaker one: for
+important declarations the layer order reverses and unlayered comes last, so an
+important rule in `mw.base` beats an important one of yours even behind an ID
+selector. A project coming from before 5.0 can drop the `!important`s it carried
+for these overrides - the plain rule already wins.
+
+That cuts both ways: third-party CSS loaded unlayered also beats the framework,
+which is how an icon font ends up winning over `mw-tags-icon`. Load it into a
+layer of its own:
+
+```html
+<style>
+  @layer vendor, mw;
+  @import url('https://cdn.example.com/font-awesome.css') layer(vendor);
+</style>
+<link rel="stylesheet" href="maverick-wave.min.css" />
+```
+
 ### 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. Pass your overrides through `with`:
@@ -394,8 +432,14 @@ above):
 > contract. Theme switching, for example, is a single class on `<body>`:
 
 ```typescript
-// theme.service.ts
+// theme.service.ts - mw-theme-switching suppresses the transitions the flip
+// would otherwise start on every element at once
+const root = document.documentElement;
+
+root.classList.add('mw-theme-switching');
 document.body.classList.toggle('mw-theme-light', isLight);
+void root.offsetHeight;
+root.classList.remove('mw-theme-switching');
 ```
 
 The `mw-field` wrapper groups label, control, hint and error. Bind the error

package/index.html

@@ -11,10 +11,16 @@
       content="telephone=no,email=no,address=no,date=no"
     />
     <title>MaverickWave</title>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-    />
+    <!-- Third-party CSS goes into a layer of its own, declared ahead of the
+         framework's. Unlayered CSS beats every layer, so a plain <link> here
+         would let Font Awesome's `.fas { display }` win over `.mw-tags-icon`.
+         Any project that loads a vendor stylesheet next to MaverickWave wants
+         these two lines. -->
+    <style>
+      @layer vendor, mw;
+      @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css')
+      layer(vendor);
+    </style>
     <link rel="stylesheet" href="maverick-wave.min.css" />
     <!-- Favicons -->
     <link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
@@ -40,18 +46,10 @@
         position: relative;
       }
 
+      /* A version number is digits, so it gets the mono stack - the rest of
+         the pill is mw-hero-badge */
       .version-corner {
-        position: absolute;
-        top: -24px;
-        right: 13%;
-        background: var(--mw-primary-color);
-        color: var(--mw-primary-accent-text-color);
-        font-size: 1.1rem;
-        padding: 0.3rem 0.7rem;
-        border-radius: 0.4rem;
-        font-weight: 600;
-        box-shadow: 3px 7px 10px var(--mw-shadow);
-        transform: rotate(7deg);
+        font-family: var(--mw-font-family-mono);
       }
 
       .color-card {
@@ -80,11 +78,6 @@
 
       /* Medium screens */
       @media (max-width: 992px) {
-        .version-corner {
-          right: 7%;
-          font-size: 1rem;
-        }
-
         /* Two calendars side by side squeeze their cells below md, so they
            stack one breakpoint earlier than mw-grid-2 would on its own */
         .calendar-demos {
@@ -94,15 +87,6 @@
 
       /* Small screens */
       @media (max-width: 576px) {
-        /* The h1 drops to 2.2rem down here, so the sticker has to move up with
-           it or it lands on the word instead of next to it */
-        .version-corner {
-          top: -32px;
-          right: 4%;
-          font-size: 0.9rem;
-          padding: 0.25rem 0.55rem;
-        }
-
         .color-swatch {
           margin: 0 auto 7px auto;
           width: 92%;
@@ -115,6 +99,8 @@
   </head>
 
   <body>
+    <a class="mw-skip-link" href="#main">Skip to content</a>
+
     <!-- Header -->
     <header class="mw-header mw-localhost-indicator-activated">
       <div class="mw-container">
@@ -122,7 +108,7 @@
       </div>
     </header>
 
-    <main class="mw-main">
+    <main class="mw-main" id="main">
       <!-- Home section -->
       <section id="home" class="mw-section">
         <div class="mw-container">
@@ -612,14 +598,9 @@
         apply(cycleSwitch.querySelector('.mw-active'));
       });
 
-      // for the modals
-      function openModal(modalId) {
-        document.getElementById(modalId).classList.add('mw-modal-open');
-      }
-
-      function closeModal(modalId) {
-        document.getElementById(modalId).classList.remove('mw-modal-open');
-      }
+      // for the modals - the framework handles both shapes, div and <dialog>
+      const openModal = window.mwOpenModal;
+      const closeModal = window.mwCloseModal;
     </script>
   </body>
 </html>