maverick-wave 4.2.1 → 4.4.0

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

@@ -186,7 +186,8 @@ Everything below is documented in `references/components.md` unless marked other
 
 **Forms** (`references/forms.md`) `mw-field` · `mw-input` · `mw-select` ·
 `mw-textarea` · `mw-checkbox` · `mw-radio` · `mw-toggle` · `mw-slider` ·
-`mw-input-group` · `mw-form` / `mw-form-group` / `mw-form-actions` · `mw-login`
+`mw-input-group` · `mw-prefilled` · `mw-form` / `mw-form-group` /
+`mw-form-actions` · `mw-login`
 
 **Layout** (`references/layout.md`) `mw-main` · `mw-container` · `mw-content` ·
 `mw-section` · `mw-page-header` · `mw-grid-*` · `mw-row-split` · `mw-hero` ·

package/.claude/skills/maverick-wave/examples/angular-form.md

@@ -238,6 +238,10 @@ export class ProjectFormComponent {
   container - use `mw-form-element-error` instead.
 - **`disabled`/`readonly` are attributes**, not classes. With reactive forms use
   `control.disable()`; the muted look comes from the `:disabled` selector.
+- **Prefilled values** take `mw-prefilled` on the control, not on the wrapper.
+  In an edit form that starts from `patchValue()`, bind it to your own flag:
+  `[class.mw-prefilled]="loaded() && !form.controls.name.dirty"`. Repeat the
+  information in the `mw-field-hint`, the marker itself is decoration.
 - **The slider needs two bindings**: `data-value` for the badge text,
   `--value` for the filled part of the track.
 - **A spinner inside a button** needs its shape class (`mw-spinner-border`) plus

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

@@ -170,6 +170,33 @@ Sizes: `mw-textarea-sm`, `mw-textarea-lg`. Resizing is off by default; enable it
 with `mw-textarea-resizable`, `mw-textarea-resizable-vertical` or
 `mw-textarea-resizable-horizontal`.
 
+## Prefilled values
+
+`mw-prefilled` marks a control whose value did not come from the user in this
+session - loaded from an existing record, restored from a draft, filled with a
+default. It draws a small triangle into the top left corner of the control.
+
+```html
+<input type="text" class="mw-input mw-prefilled" value="Max Mustermann" />
+<select class="mw-select mw-select-sm mw-prefilled">
+  ...
+</select>
+<textarea class="mw-textarea mw-prefilled" rows="3"></textarea>
+```
+
+- Works on `mw-input`, `mw-select` and `mw-textarea`, and goes on the control
+  itself, not on the `mw-field` wrapper - so it also works in an input group or
+  on a standalone control.
+- The triangle follows the size modifier (`mw-input-sm`, `mw-select-lg`, ...)
+  and stays visible on `readonly` and `disabled` controls.
+- Colour is `--mw-info-color`, deliberately not primary or danger: it is an
+  information about the value, not a state or an error.
+- Decoration only. Screen readers do not see it, so put the same information in
+  an `mw-field-hint` and reference it with `aria-describedby`.
+- It is drawn as a background layer, not a pseudo element (`input` and `select`
+  never render `::before`/`::after`). A rule that sets the `background`
+  shorthand on the same control wipes it - use `background-color` there.
+
 ## Checkbox
 
 The native input is hidden; `mw-checkbox-box` is the visible control, so the

package/CHANGELOG.md

@@ -6,6 +6,16 @@ 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.4.0] - 2026-08-20
+
+### Added
+
+- prefilled marker for form controls (`mw-prefilled`)
+
+### Fixed
+
+- disabled select lost its arrow
+
 ## [4.3.0] - 2026-08-19
 
 ### Fixed

package/CLAUDE.md

@@ -21,21 +21,21 @@ There are no test or lint scripts.
 
 ## Architecture
 
-**Build pipeline** — `gulpfile.js` orchestrates everything: SCSS compilation (autoprefixed, minified), JS minification via Terser, HTML templating via `gulp-file-include`, asset copying, and build-info injection (`{{VERSION}}`, `{{LAST_BUILD_DATE}}`, `{{LAST_BUILD_YEAR}}` placeholders replaced in HTML at build time).
+**Build pipeline** - `gulpfile.js` orchestrates everything: SCSS compilation (autoprefixed, minified), JS minification via Terser, HTML templating via `gulp-file-include`, asset copying, and build-info injection (`{{VERSION}}`, `{{LAST_BUILD_DATE}}`, `{{LAST_BUILD_YEAR}}` placeholders replaced in HTML at build time).
 
 **SCSS layers** (`src/scss/`) follow an ITCSS-inspired structure:
 
-- `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)
-- `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`)
+- `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)
+- `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 slider, theme toggle (persisted to localStorage), accordion, mobile nav, progress bar (IntersectionObserver), scroll spy, tabs, alerts/toasts, modals, range inputs.
 
-**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 40+ partials from `src/partials/`. These compile into `dist/index.html`.
 
 ## Naming Conventions
 

package/README.md

@@ -63,8 +63,8 @@ Download `maverick-wave.min.css` and `maverick-wave.min.js` from the [latest rel
 
 ### CSS Custom Properties
 
-There are thirteen root color tokens. Everything else — hover tones, translucent
-backgrounds, borders, muted text — is derived from them at runtime with
+There are thirteen root color tokens. Everything else - hover tones, translucent
+backgrounds, borders, muted text - is derived from them at runtime with
 `color-mix()`, so overriding a root token is enough. Load your stylesheet
 **after** `maverick-wave.min.css`:
 
@@ -121,7 +121,7 @@ For full control, clone the repository and integrate `src/scss/main.scss` into y
 );
 ```
 
-> Plain variable assignments before `@use` have no effect — the framework
+> Plain variable assignments before `@use` have no effect - the framework
 > declares its root colors with `!default`, which only `@use ... with` feeds.
 
 ### Importing Only What You Need
@@ -133,7 +133,7 @@ have no use for the marketing components (`blog-post`, `gallery`,
 `home`), and Angular bundle budgets notice the difference.
 
 ```scss
-// styles.scss — configuration first, then pick
+// styles.scss - configuration first, then pick
 @use 'maverick-wave/src/scss/abstracts/variables' with (
   $primary-color: #0f766e
 );
@@ -154,7 +154,7 @@ have no use for the marketing components (`blog-post`, `gallery`,
 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.
 
-> **`base` is not optional.** It carries the `:root` custom properties — without
+> **`base` is not optional.** It carries the `:root` custom properties - without
 > it every component renders without colors. If you bring your own reset, use
 > `@use 'maverick-wave/src/scss/base/base'` for the token block alone.
 > The `with (...)` configuration has to be the first statement in the file,
@@ -174,7 +174,7 @@ above):
 > are never initialized, and the theme toggle mutates the DOM behind Angular's
 > change detection. The behaviors it covers (accordion, tabs, modal close, mobile
 > nav, scroll spy, theme toggle, progress bars, sliders, alerts, galleries) are a
-> few lines each in a component — the framework's state classes are the whole
+> few lines each in a component - the framework's state classes are the whole
 > contract. Theme switching, for example, is a single class on `<body>`:
 
 ```typescript
@@ -183,7 +183,7 @@ document.body.classList.toggle('mw-theme-light', isLight);
 ```
 
 The `mw-field` wrapper groups label, control, hint and error. Bind the error
-state yourself — the framework does not style Angular's `ng-invalid` /
+state yourself - the framework does not style Angular's `ng-invalid` /
 `ng-touched` classes:
 
 ```html
@@ -202,8 +202,8 @@ state yourself — the framework does not style Angular's `ng-invalid` /
 </div>
 ```
 
-A complete usage guide for AI coding assistants — every component, token,
-integration pattern and example — ships with the package as a Claude Code skill
+A complete usage guide for AI coding assistants - every component, token,
+integration pattern and example - ships with the package as a Claude Code skill
 in `.claude/skills/maverick-wave/`.
 
 ## Development