maverick-wave 4.27.0 → 5.0.0

package/.claude/skills/mw-maverick-wave/references/theming.md

@@ -78,6 +78,7 @@ Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
 | `--mw-kanban-background`, `--mw-kanban-lane-border`, `--mw-kanban-column-min-height`                                                                                         | Per-board surface, lane border and lane floor (120px, 90px on `mw-kanban-compact`)                                                                                                                                                                                                                                                      |
 | `--mw-container-gutter`, `--mw-container-width`                                                                                                                              | Page gutter of `mw-container` (fluid `clamp(1rem, 4.2vw + 0.5rem, 4rem)`, never below the safe-area inset) and the width derived from it (`min(1200px, 100% - 2 * gutter)`)                                                                                                                                                             |
 | `--mw-section-padding-block`                                                                                                                                                 | Top/bottom rhythm of `mw-section` (3.3rem, stepping down to 2.5rem below `md` and 1.75rem below `sm`)                                                                                                                                                                                                                                   |
+| `--mw-section-nav-height`                                                                                                                                                    | Height the sticky `mw-section-nav` reserves (3.7rem). Add it to `--mw-header-height` for the `scroll-margin-top` of anything the strip can cover                                                                                                                                                                                        |
 | `--mw-calendar-dot`                                                                                                                                                          | Colour of a single calendar dot - set it per dot or per cell; the `mw-calendar-dot-*` classes are presets for it                                                                                                                                                                                                                        |
 | `--mw-scroll-hint-cover`                                                                                                                                                     | Colour the scroll hint on a tab bar fades into. Preset to the page, re-pointed to the card background inside `mw-card`, `mw-panel`, `mw-modal`, `mw-tile`, `mw-calendar`                                                                                                                                                                |
 | `--mw-elevation-1` … `-5`                                                                                                                                                    | Every shadow in the framework. Two layers per level - contact plus ambient. Never write a `box-shadow` by hand: a hand-rolled one is the wrong colour in one of the two themes                                                                                                                                                          |
@@ -171,9 +172,20 @@ Two rules that prevent most colour bugs:
 - Persisting the choice, the toggle UI and the initial class are the
   application's job in a SPA (`examples/angular-services.md`). The shipped JS
   does it for static pages using `localStorage` under the key `mw-theme`.
+- **Suppress transitions while the class flips.** Colour changes on nearly every
+  element at once, and the shared `--mw-transition` turns that into thousands of
+  concurrent animations - on a documentation-sized page it is seconds of blocked
+  style and layout. `mw-theme-switching` on `<html>` kills them for the flip; the
+  forced reflow between the two class changes is what commits the new colours
+  before transitions come back.
 
 ```ts
+const root = document.documentElement;
+
+root.classList.add('mw-theme-switching');
 document.body.classList.toggle('mw-theme-light', isLight);
+void root.offsetHeight; // commit the new colours with transitions off
+root.classList.remove('mw-theme-switching');
 ```
 
 ## SCSS configuration
@@ -262,6 +274,29 @@ they are all `var()` references anyway:
 }
 ```
 
+## Overriding a component
+
+Tokens cover colour and rhythm; for anything else write a normal rule. The
+framework emits everything inside
+`@layer mw.reset, mw.base, mw.forms, mw.components, mw.layout, mw.utilities`,
+and an unlayered rule beats every layer regardless of weight:
+
+```css
+/* wins over .mw-card, no !important and no doubled selector */
+.mw-card {
+  border-radius: 12px;
+}
+```
+
+The same rule cuts the other way: third-party CSS loaded unlayered also beats
+the framework, which is what makes an icon font quietly win over `mw-tags-icon`.
+Give it a layer of its own:
+
+```css
+@layer vendor, mw;
+@import url('font-awesome.css') layer(vendor);
+```
+
 ## Importing only what you need
 
 The full stylesheet is ~200 kB raw / ~31 kB gzipped. Marketing components
@@ -272,7 +307,9 @@ Angular bundle budgets notice.
 Every layer forwards one module per file, and no `@extend` crosses a file
 boundary, so partial imports are safe. **The one thing you must not drop is
 `base`** - it carries the `:root` tokens; without it every component renders
-colourless.
+colourless. The cascade layer order comes along on its own: every module loads
+`abstracts`, which declares it, so a hand-picked subset orders itself the same
+way the full build does.
 
 ```scss
 // styles.scss - configure first, then pick

package/.impeccable/config.local.json

@@ -0,0 +1,5 @@
+{
+  "hook": {
+    "consent": "accepted"
+  }
+}

package/.impeccable/hook.cache.json

@@ -0,0 +1 @@
+{"version":1,"sessions":{"5682ec58-6688-479f-994f-990ff918c05d":{"updatedAt":1789084033412,"files":{"/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/layout/_header.scss":{"editCount":3,"findings":[],"stopBaseline":{"version":1,"engine":"0.1.5","counts":{}},"cleanAcked":true},"/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/form-elements/_slider.scss":{"editCount":1,"findings":[],"stopBaseline":{"version":1,"engine":"0.1.5","counts":{}},"cleanAcked":true},"/Users/m1well/Dev/workspace/css/maverick-wave/src/js/main.js":{"editCount":7,"findings":[]},"/Users/m1well/Dev/workspace/css/maverick-wave/index.html":{"editCount":2,"findings":["low-contrast:0:3.3:1 (need 4.5:1) — text #7d85a5 on #313746","pulsing-dot:0:.mw-spinner-dots>div — 16x16px dot with infinite \"mw-bounce\" animation","dark-glow:0:Colored box-shadow glow (#d1bb21) on dark page"]},"/Users/m1well/Dev/workspace/css/maverick-wave/src/partials/typography-container.html":{"editCount":2,"findings":[],"cleanAcked":true},"/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/base/_base.scss":{"editCount":2,"findings":[],"stopBaseline":{"version":1,"engine":"0.1.5","counts":{}},"cleanAcked":true},"/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/layout/_section.scss":{"editCount":7,"findings":[],"cleanAcked":true},"/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/form-elements/_form.scss":{"editCount":1,"findings":[],"stopBaseline":{"version":1,"engine":"0.1.5","counts":{}},"cleanAcked":true},"/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/components/_alerts.scss":{"editCount":1,"findings":["side-tab:83"],"stopBaseline":{"version":1,"engine":"0.1.5","counts":{"62d926b4b80efa38e6fbf0fe65f45cf171d9b8a80be0b2ee47ac4cbb6c9498d0":1}},"cleanAcked":true},"/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/layout/_main.scss":{"editCount":1,"findings":[],"stopBaseline":{"version":1,"engine":"0.1.5","counts":{}},"cleanAcked":true}},"footerShown":true}}}

package/CHANGELOG.md

@@ -6,6 +6,23 @@ 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
+
+- language switcher in header
+
 ## [4.27.0] - 2026-09-07
 
 ### Fixed

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.25.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.25.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>