maverick-wave 4.9.4 → 4.11.0

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,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.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')