maverick-wave 4.27.0 → 4.28.0

package/.claude/skills/mw-maverick-wave/SKILL.md

@@ -44,14 +44,14 @@ Load the one you need - do not read them all up front.
 ```html
 <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@4.28.0/maverick-wave.min.css"
 />
 <link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
 />
 ...
-<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@4.28.0/maverick-wave.min.js"></script>
 ```
 
 Pin the version. The JS file is optional and only for server-rendered/static pages -
@@ -221,7 +221,9 @@ feature frame) ·
 
 **Navigation** `mw-header` + `mw-navbar` · `mw-breadcrumbs` · `mw-pagination` ·
 `mw-dropdown` (+ `-menu`, `-item`, `-item-danger`, `-divider`, `-label`,
-`-caret`, `-end`, `-up`) · `mw-section-nav` (`references/layout.md`)
+`-caret`, `-end`, `-up`) · `mw-lang-switch` (+ `-code`, `-name`, `-check`,
+`inverted`) · `mw-flag` (+ 23 country codes) ·
+`mw-section-nav` (`references/layout.md`)
 
 **Media & content** `mw-avatar` (+ `initials`, `group`) · `mw-gallery` ·
 `mw-image-slider` · `mw-blog-post` · `mw-testimonial` (+ `-source`, `-detail`,

package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md

@@ -20,7 +20,7 @@ accordion FAQ.
 
     <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@4.28.0/maverick-wave.min.css"
     />
     <link
       rel="stylesheet"
@@ -479,7 +479,7 @@ accordion FAQ.
       <div class="mw-modal-backdrop" onclick="closeModal('demo')"></div>
     </div>
 
-    <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@4.28.0/maverick-wave.min.js"></script>
     <script>
       // The only thing the shipped script does not cover: opening a modal.
       // Closing works through .mw-modal-close, the backdrop is wired above.

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

@@ -1170,6 +1170,54 @@ your own it is `:has(.mw-dropdown[open]) { overflow: visible }`.
 On a coarse pointer the rows grow to 2.75rem and the menu takes at least the
 trigger's full width.
 
+## Language switcher
+
+A `mw-dropdown` with a quieter trigger: no fill and no border until it is
+hovered, so a header bar does not turn into a row of competing buttons.
+
+```html
+<details class="mw-dropdown mw-dropdown-end mw-lang-switch">
+  <summary aria-label="Language: Deutsch">
+    <span class="mw-flag mw-flag-de"></span>
+    <span class="mw-lang-switch-code">de</span>
+    <i class="fas fa-chevron-down mw-dropdown-caret"></i>
+  </summary>
+  <div class="mw-dropdown-menu">
+    <button
+      type="button"
+      class="mw-dropdown-item mw-active"
+      aria-current="true"
+      data-mw-lang="de"
+    >
+      <span class="mw-flag mw-flag-de"></span>
+      <span class="mw-lang-switch-name" lang="de">Deutsch</span>
+      <i class="fas fa-check mw-lang-switch-check"></i>
+    </button>
+    <button type="button" class="mw-dropdown-item" data-mw-lang="en">
+      <span class="mw-flag mw-flag-gb"></span>
+      <span class="mw-lang-switch-name" lang="en">English</span>
+      <i class="fas fa-check mw-lang-switch-check"></i>
+    </button>
+  </div>
+</details>
+```
+
+The two-letter code carries the state, not the flag: a flag is a country and
+never a language - no country stands for English. Write each language name in
+its own language and put `lang="fr"` on it, so a screen reader pronounces it
+instead of spelling it out.
+
+Parts: `mw-lang-switch-code`, `-name`, `-check` (the tick, shown by `mw-active`
+on the item and kept in the layout while hidden). `mw-lang-switch-inverted` is
+for a dark bar built without `mw-header`; inside `mw-header` those colours apply
+on their own.
+
+Flags: `mw-flag` plus `mw-flag-<iso>` for de, at, ch, gb, us, ie, fr, it, es,
+pt, nl, be, pl, hu, ro, bg, ua, se, dk, no, fi, tr and jp - CSS gradients, all
+in the same 4:3 box whatever the real ratio. Never an emoji flag: Windows ships
+no glyphs for them. Anything outside the set goes as an `<img>` or an inline
+`<svg>` inside `mw-flag`.
+
 ## Keyboard keys
 
 `<kbd>` is styled directly, so a shortcut in prose needs no class:

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

@@ -45,6 +45,7 @@ classes are the entire contract.
 | Header login button | Swaps the FontAwesome lock icon                                                                                                                                                                                                                                                 | Bind the icon class                                                                                                                                                                                                          |
 | Color swatches      | Showcase-only (prints computed hex values)                                                                                                                                                                                                                                      | Not needed                                                                                                                                                                                                                   |
 | Dropdown            | Delegated to the document: closes the open `mw-dropdown` on Escape, on a click elsewhere and on a click on a `mw-dropdown-item`, and returns focus to the `summary`                                                                                                             | The `<details>` does the opening, the keyboard and the state on its own. Rebuild only the two behaviours markup cannot express - or bind `[attr.open]` and keep them in the component                                        |
+| Language switcher   | Keeps the trigger's flag and code in step with the chosen item, moves `mw-active` and `aria-current`, and fires `mw-language-change` (`detail: { lang, name }`) on the switcher                                                                                                 | Bind the trigger from your locale signal and switch the language in your own i18n service; the menu itself is a `<details>` and needs nothing                                                                                |
 
 ## A note on the state class
 

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).
 
+## [4.28.0] - 2026-09-08
+
+### Added
+
+- language switcher in header
+
 ## [4.27.0] - 2026-09-07
 
 ### Fixed

package/README.md

@@ -40,12 +40,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@4.28.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@4.28.0/maverick-wave.min.js"></script>
   </body>
 </html>
 ```