maverick-wave 4.10.0 → 4.12.0

package/.claude/skills/maverick-wave/references/layout.md

@@ -117,7 +117,7 @@ same height as the login and burger buttons.
   palette. All of them derive from `--mw-primary-color`, not from a theme
   colour: the bar is dark in both themes and a light-only project must not have
   to configure dark-theme values to change it. The bar itself is the primary
-  darkened toward black, `$header-surface` (16%) - see `theming.md`.
+  darkened toward black, `$header-surface` (14%) - see `theming.md`.
 
 **Localhost indicator.** Put `mw-localhost-indicator-activated` on the header
 and the shipped JS prepends a pulsing bar when the host is localhost/127.0.0.1/
@@ -238,8 +238,8 @@ mode with the background image from `--mw-hero-background`.
 `mw-home-content-fade` fades the content in.
 
 The image is treated per theme through `--mw-hero-image-filter` - a filter, not
-a tinted overlay: `$hero-filter-dark` (`brightness(0.5)`) against
-`$hero-filter-light` (`brightness(1.15) saturate(1.2)`). A translucent layer can
+a tinted overlay: `$hero-filter-dark` (`brightness(0.7)`) against
+`$hero-filter-light` (`brightness(1.1)`). A translucent layer can
 only darken toward its own colour, so on an already dark photo both themes look
 the same until the alpha is high enough that the tint colour is what you see.
 Moving the image's brightness reads as a difference even on a dark photo, and
@@ -314,6 +314,41 @@ automatically.
 **Display** - `mw-d-flex`, `mw-d-inline-flex`, `mw-d-block`, `mw-d-inline`,
 `mw-d-inline-block`, `mw-d-grid`, `mw-d-none`, `mw-d-contents`.
 
+**Responsive display** - `mw-d-{sm|md|lg|xl}-{none|block|flex|inline-flex|grid|inline-block}`.
+Mobile-first and min-width, like everything else here: `mw-d-md-flex` means
+"flex from the md breakpoint up", and the unprefixed class beside it is what
+applies below that. The pair `mw-d-none mw-d-md-flex` is hidden on a phone and a
+row from a tablet on. `mw-hide-mobile` (gone below md) and `mw-hide-desktop`
+(gone from md up) spell out the two everyone actually reaches for.
+
+**Text overflow** - `mw-text-truncate` is one line ending in an ellipsis and
+carries `min-width: 0` with it, which is the reason truncation "does not work"
+nine times out of ten inside a flex row. `mw-text-clamp-2` through `-5` is that
+many lines ending in one. `mw-text-break` is for a string with nothing to break
+at - a URL, a hash, an API key - and is what keeps a phone page from scrolling
+sideways. `mw-text-nowrap` is the opposite.
+
+**Wrapping and measure** - `mw-text-balance` evens out the lines of a short
+block so a headline never leaves one word alone (headings get it already);
+`mw-text-pretty` only prevents the orphan and is the one for body copy
+(paragraphs get it already). `mw-text-measure` caps a column at 68 characters -
+past roughly 75 the eye loses the start of the next line on the way back.
+`mw-text-eyebrow` is the small spaced upper-case kicker above a heading.
+`mw-text-uppercase` carries the letter-spacing capitals need to stay legible
+with it; `mw-text-capitalize` is the plain transform.
+
+**Elevation** - `mw-elevation-0` through `-5`, the same ramp every component
+uses. See the scale table in `SKILL.md`. Never hand-roll a `box-shadow`.
+
+**Aspect ratio** - `mw-aspect-square|video|wide|portrait|photo`. Reserves the
+box before the image inside it has loaded, so the page does not reflow when the
+picture arrives. The child fills the box and crops rather than stretching.
+
+**Overflow and scrolling** - `mw-overflow-auto`, `mw-overflow-x-auto` (which
+also contains the overscroll, so a sideways swipe on a wide table does not walk
+the whole page), `mw-overflow-hidden`, and `mw-snap-x` to make a horizontal
+strip come to rest on an item instead of halfway between two.
+
 **Numbers** - `mw-text-numeric` is fixed-width digits and nothing else, for a
 clock, a counter or an ID that must not jitter while it changes.
 `mw-text-currency` adds right alignment and `nowrap` on top, which is what a

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

@@ -68,7 +68,7 @@ Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
 | `--mw-form-elements-background`, `--mw-form-elements-color`                                                                                                                  | Form controls stay light in both themes and therefore have their own pair                                                                                                                                                                                                                        |
 | `--mw-font-family-base`, `-heading`, `-mono`                                                                                                                                 | Font stacks - system stacks by default (`-mono` leads with Fira Code); no font is bundled. Configurable in SCSS, see below                                                                                                                                                                       |
 | `--mw-hero-background`, `--mw-hero-text-color`                                                                                                                               | Hero image (`url(...)`) and the ink on it. Fixed across themes - the photo does not change with the theme, so its text must not either. Defaults to the light end of the palette                                                                                                                 |
-| `--mw-transition`                                                                                                                                                            | Global transition (`all 0.3s ease`)                                                                                                                                                                                                                                                              |
+| `--mw-transition`                                                                                                                                                            | Hover and focus states - an explicit paint-only property list at `--mw-duration-base`, never `all`                                                                                                                                                                                               |
 | `--mw-card-img-height`                                                                                                                                                       | Per-card image height (default `210px`; `mw-card-lg`/`-xl` set it to 340px/480px, 260px/340px below `sm`)                                                                                                                                                                                        |
 | `--mw-card-addon-color`                                                                                                                                                      | Background of `mw-card-badge` / `mw-card-ribbon`; the `mw-card-addon-*` classes set it, override it for a custom colour                                                                                                                                                                          |
 | `--mw-card-addon-text-color`                                                                                                                                                 | Label on that badge/ribbon; the `mw-card-addon-*` classes point it at the matching `--mw-*-accent-text-color`                                                                                                                                                                                    |
@@ -79,6 +79,15 @@ Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
 | `--mw-section-padding-block`                                                                                                                                                 | Top/bottom rhythm of `mw-section` (1.75rem)                                                                                                                                                                                                                                                      |
 | `--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                                                                                                                   |
+| `--mw-shadow-near`, `--mw-shadow-far`                                                                                                                                        | The two tones the ramp above is mixed from, per theme                                                                                                                                                                                                                                            |
+| `--mw-transition-fast`                                                                                                                                                       | The same property list at `--mw-duration-fast` - for a state change that should feel instant under the pointer                                                                                                                                                                                   |
+| `--mw-duration-instant\|fast\|base\|slow\|slower`                                                                                                                            | 110 / 180 / 300 / 520 / 900ms. Anything built on these is covered by `prefers-reduced-motion` for free                                                                                                                                                                                           |
+| `--mw-duration-zoom`                                                                                                                                                         | 650ms, for a large surface actually travelling - an image scaling inside a card, a slider track                                                                                                                                                                                                  |
+| `--mw-ease-out`, `--mw-ease-in-out`, `--mw-ease-spring`                                                                                                                      | Things arriving (the default) / A to B and back / a pop                                                                                                                                                                                                                                          |
+| `--mw-control-height-sm\|·\|lg`, `--mw-control-font-sm\|·\|lg`, `--mw-control-line-height`                                                                                   | One size scale for input, select, textarea and button, so a field and the button beside it line up by construction                                                                                                                                                                               |
+| `--mw-focus-ring-width\|offset\|color`                                                                                                                                       | The keyboard focus ring                                                                                                                                                                                                                                                                          |
+| `--mw-focus-halo-size\|opacity`                                                                                                                                              | The soft ring a form field gets instead of a hard outline                                                                                                                                                                                                                                        |
 | `--mw-internal-theme-mode`                                                                                                                                                   | Read-only: what `$mw-theme-mode` was compiled to                                                                                                                                                                                                                                                 |
 
 `--mw-container-gutter`, `--mw-container-width` and `--mw-section-padding-block`
@@ -97,11 +106,26 @@ Two rules that prevent most colour bugs:
    or `--mw-border`.
 2. **`--mw-text-muted-color` is only for text on theme surfaces** (cards, page
    background) - it follows the theme. It is a true gray with `$muted-tint`
-   (12%) of the primary mixed in, not a stepped-back text colour, so it stays
+   (23%) of the primary mixed in, not a stepped-back text colour, so it stays
    gray no matter how tinted the palette is. On a colour surface that stays the same
    in both themes it is always wrong: use `--mw-*-accent-text-color`, or
    `opacity` for a disabled look.
 
+3. **Elevation, motion and focus are tokens too.** `var(--mw-elevation-1..5)`
+   for any shadow, `var(--mw-transition)` / `var(--mw-transition-fast)` for a
+   hover or focus state, `var(--mw-duration-*)` with `var(--mw-ease-*)` for
+   anything else, and `--mw-focus-ring-*` / `--mw-focus-halo-*` for the ring.
+   A hand-rolled shadow is the wrong colour in one of the two themes: the dark
+   theme's shadow is a light rim over a dark contact layer, not a black blur.
+   A hand-rolled duration also opts out of `prefers-reduced-motion`, which works
+   by turning the duration tokens down.
+
+4. **The header has two knobs of its own.** `$header-surface` sets how dark the
+   bar sits under the primary colour (lower is darker); `$header-active-tint`
+   sets how far the active navbar link is lifted off it (lower is a stronger,
+   more saturated blue, higher is paler with more contrast against the bar).
+   Both are `!default` in `abstracts/_variables.scss`.
+
 ## Light & dark
 
 - Dark is the base. Light is applied by putting `mw-theme-light` on `<body>` -
@@ -124,7 +148,7 @@ Two rules that prevent most colour bugs:
   both themes, and so does the header - see the next point for where its colour
   comes from.
 - The header bar is **not** part of that surface stack. It is
-  `--mw-primary-color` darkened straight toward black - `$header-surface` (16%)
+  `--mw-primary-color` darkened straight toward black - `$header-surface` (14%)
   is how much of the colour survives, the same shade ramp a colour tool prints.
   It sits well past the bottom of that ramp so the hue reads as a tint on
   near-black, not as a colour of its own. That matters for a light-only project:
@@ -185,6 +209,9 @@ effect, because the root colours are declared with `!default`.
   $footer-surface-light: 0.95,
   // the header bar - how much of the primary survives darkening toward black
   $header-surface: 16%,
+  // how far the active navbar link sits off the primary colour - lower is a
+  // stronger, more saturated blue, higher is paler with more contrast
+  $header-active-tint: 25%,
   $mw-hero-image: url('/assets/hero.jpg'),
   // ink on that image - fixed, because the image is
   $mw-hero-text-color: var(--mw-dark-text-color),
@@ -236,7 +263,7 @@ they are all `var()` references anyway:
 
 ## Importing only what you need
 
-The full stylesheet is ~172 kB raw / ~26 kB gzipped. Marketing components
+The full stylesheet is ~200 kB raw / ~31 kB gzipped. Marketing components
 (`blog-post`, `gallery`, `content-slider`, `techstack-bucket`, `tiles`,
 `coming-soon`, `ratings`, `home`, `hero`) are dead weight in an application, and
 Angular bundle budgets notice.
@@ -275,8 +302,7 @@ colourless.
 @use 'maverick-wave/src/scss/utilities';
 ```
 
-That set compiles to ~77 kB raw / ~13 kB gzipped - well under half the full
-build.
+That set compiles to ~100 kB raw / ~17 kB gzipped - half the full build.
 
 Details worth knowing:
 
@@ -284,7 +310,7 @@ Details worth knowing:
   before any other module loads it, so the `with (...)` line goes at the top of
   the file. Configuring `main` instead pulls in everything again.
 - `base` forwards `reset`, `base` and `typography`. If you already have your own
-  reset, `@use '.../base/base'` gives you the `:root` block alone (~9 kB with a
+  reset, `@use '.../base/base'` gives you the `:root` block alone (~11 kB with a
   component or two).
 - Module names are the file names without the leading underscore:
   `components/_buttons.scss` becomes `components/buttons`.

package/CHANGELOG.md

@@ -6,6 +6,18 @@ 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.12.0] - 2026-08-27
+
+### Fixed
+
+- some fixes because of the big update previously
+
+## [4.11.0] - 2026-08-27
+
+### Changed
+
+- claude ui/ux pro skill - glow up
+
 ## [4.10.0] - 2026-08-24
 
 ### Added

package/README.md

@@ -17,9 +17,11 @@ The result is a framework that balances utility with simplicity, offering develo
 ## 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
+- 30+ UI Components: Buttons, Cards, Panels, Tabs, Accordions, Modals, Tiles, Alerts, Spinners, Progress Bars, Avatars, Tags, Badges, Dropdown, 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
+- Utility Classes for spacing, flex, display, typography, text overflow, elevation and aspect ratio
+- A five-step elevation ramp and a motion scale, so every shadow and every transition in the framework comes from one place
+- Mobile as a first-class target: 44px touch targets on a coarse pointer, modals that become bottom sheets, press states on everything, and hover effects that do not latch after a tap
 - 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`)
@@ -116,6 +118,79 @@ still be overridden individually if you want to break out of the scale.
 > `browserslist` in `package.json`, which is what Autoprefixer and cssnano read
 > when building `dist/`.
 
+### Elevation and motion
+
+Two scales that are not colours, and both are tokens for the same reason: a
+framework where every component picks its own shadow and its own timing looks
+assembled rather than designed.
+
+```css
+:root {
+  /* Elevation. Each level is two shadows - a tight contact layer that gives
+     the box weight, and a wide ambient one that says how high it floats.
+     Declared per theme, because the tones they are mixed from differ. */
+  --mw-elevation-1: /* resting: inputs, tags, small controls */;
+  --mw-elevation-2: /* raised: cards and panels at rest */;
+  --mw-elevation-3: /* floating: a card under the pointer */;
+  --mw-elevation-4: /* overlay: dropdowns, popovers, drawer */;
+  --mw-elevation-5: /* modal */;
+
+  /* Motion */
+  --mw-duration-instant: 90ms; /* a press */
+  --mw-duration-fast: 150ms; /* a colour swap under the pointer */
+  --mw-duration-base: 240ms; /* the default */
+  --mw-duration-slow: 400ms; /* something crossing the screen */
+  --mw-duration-slower: 700ms; /* a slider, a progress bar */
+  --mw-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* things arriving */
+  --mw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* A to B and back */
+  --mw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* a pop */
+
+  /* The two ready-made transitions every component uses */
+  --mw-transition: /* the explicit paint-only property list, base duration */;
+  --mw-transition-fast: /* the same list, fast duration */;
+
+  /* Control sizes - one height per step, shared by input, select, textarea
+     and button, so a field and the button beside it line up */
+  --mw-control-height-sm: 2rem;
+  --mw-control-height: 2.25rem;
+  --mw-control-height-lg: 2.5rem;
+  --mw-control-font-sm: 0.8rem;
+  --mw-control-font: 0.9rem;
+  --mw-control-font-lg: 1rem;
+  --mw-control-line-height: 1.35;
+
+  /* Focus */
+  --mw-focus-ring-width: 2px;
+  --mw-focus-ring-offset: 2px;
+  --mw-focus-ring-color: var(--mw-primary-text-color);
+  --mw-focus-halo-size: 3px; /* the soft ring a form field gets instead */
+  --mw-focus-halo-opacity: 28%;
+}
+```
+
+`--mw-transition` deliberately lists its properties rather than saying `all`: a
+width that changes at a breakpoint should snap, not crawl. Anything that really
+does want to animate a size says so itself. `--mw-duration-zoom` (650ms) is the
+one for a large surface actually travelling - an image scaling inside a card, a
+slider track crossing its frame - because the eye reads speed as distance over
+time, and the 300ms that feels right on a 40px button feels snatched on a 300px
+photo.
+
+The control scale is what makes a form row line up. Each field used to work its
+own height out from its own font size, its own line-height and its own padding,
+and no two of them agreed: an input, a select and a button side by side measured
+32.2, 34.4 and 37.2 pixels. They all measure the same now, and the fields share
+one font scale instead of the select sitting a step below the input next to it.
+
+Under `prefers-reduced-motion: reduce` the duration tokens all drop to 1ms and a
+blanket rule catches anything that names its own timing - including whatever you
+wrote yourself. 1ms rather than 0, so a script waiting on `transitionend` still
+gets one.
+
+To retune from SCSS instead, the same values are `$duration-*`, `$ease-*`,
+`$control-height*` / `$control-font*`, `$focus-ring-*` and `$shadow-near-*` /
+`$shadow-far-*` in `abstracts/_variables.scss`, all `!default`.
+
 ### Fill or ink
 
 Every brand and status colour comes in two tokens, and picking the right one is
@@ -292,8 +367,8 @@ have no use for the marketing components (`blog-post`, `gallery`,
 @use 'maverick-wave/src/scss/utilities';
 ```
 
-A typical application subset like the one above compiles to roughly 98 kB raw /
-15 kB gzipped, against 147 kB / 22.5 kB for the full build.
+A typical application subset like the one above compiles to roughly 85 kB raw /
+14 kB gzipped, against 196 kB / 30 kB for the full build.
 
 > **`base` is not optional.** It carries the `:root` custom properties - without
 > it every component renders without colors. If you bring your own reset, use

package/index.html

@@ -271,6 +271,9 @@
             <a href="#spinners" class="mw-section-btn">Loading Spinners</a>
             <a href="#avatars" class="mw-section-btn">Avatars</a>
             <a href="#tags" class="mw-section-btn">Tags</a>
+            <a href="#badges" class="mw-section-btn">Badges</a>
+            <a href="#dropdown" class="mw-section-btn">Dropdown</a>
+            <a href="#kbd" class="mw-section-btn">Keyboard Keys</a>
             <a href="#ratings" class="mw-section-btn">Ratings</a>
             <a href="#info" class="mw-section-btn">Info</a>
             <a href="#alerts" class="mw-section-btn">Alerts</a>
@@ -307,6 +310,19 @@
           <!-- Tags container -->
           <div id="tags">@@include('./src/partials/tags-container.html')</div>
 
+          <!-- Badges container -->
+          <div id="badges">
+            @@include('./src/partials/badges-container.html')
+          </div>
+
+          <!-- Dropdown container -->
+          <div id="dropdown">
+            @@include('./src/partials/dropdown-container.html')
+          </div>
+
+          <!-- Keyboard keys container -->
+          <div id="kbd">@@include('./src/partials/kbd-container.html')</div>
+
           <!-- Ratings container -->
           <div id="ratings">
             @@include('./src/partials/ratings-container.html')