maverick-wave 3.10.0 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/skills/maverick-wave/SKILL.md +62 -30
- package/.claude/skills/maverick-wave/examples/angular-form.md +1 -1
- package/.claude/skills/maverick-wave/examples/angular-services.md +15 -8
- package/.claude/skills/maverick-wave/examples/static-landing-page.md +4 -4
- package/.claude/skills/maverick-wave/references/components.md +416 -27
- package/.claude/skills/maverick-wave/references/forms.md +8 -4
- package/.claude/skills/maverick-wave/references/javascript.md +32 -18
- package/.claude/skills/maverick-wave/references/layout.md +48 -3
- package/.claude/skills/maverick-wave/references/theming.md +34 -24
- package/CHANGELOG.md +56 -0
- package/index.html +25 -0
- package/maverick-wave.min.css +2 -2
- package/maverick-wave.min.js +1 -1
- package/package.json +2 -2
- package/src/js/main.js +314 -20
- package/src/partials/accordions-container.html +2 -2
- package/src/partials/button-bar-container.html +4 -2
- package/src/partials/buttons-container.html +35 -0
- package/src/partials/calendar-container.html +205 -0
- package/src/partials/cards-container.html +43 -0
- package/src/partials/documentation-container.html +3 -0
- package/src/partials/form-container.html +1 -1
- package/src/partials/get-started-container.html +2 -2
- package/src/partials/kanban-container.html +680 -715
- package/src/partials/modals-container.html +5 -5
- package/src/partials/pagination-container.html +50 -13
- package/src/partials/segmented-container.html +66 -0
- package/src/partials/tables-container.html +96 -24
- package/src/partials/tabs-container.html +16 -6
- package/src/partials/tags-container.html +15 -0
- package/src/partials/timelines-container.html +2 -2
- package/src/partials/utilities-container.html +81 -0
- package/src/scss/abstracts/_mixins.scss +34 -0
- package/src/scss/abstracts/_variables.scss +6 -2
- package/src/scss/base/_base.scss +21 -0
- package/src/scss/components/_accordions.scss +2 -0
- package/src/scss/components/_alerts.scss +5 -19
- package/src/scss/components/_button-bar.scss +6 -0
- package/src/scss/components/_buttons.scss +67 -0
- package/src/scss/components/_calendar.scss +290 -0
- package/src/scss/components/_content-slider.scss +1 -0
- package/src/scss/components/_index.scss +2 -0
- package/src/scss/components/_kanban.scss +2 -6
- package/src/scss/components/_modals.scss +15 -4
- package/src/scss/components/_pagination.scss +68 -64
- package/src/scss/components/_segmented.scss +85 -0
- package/src/scss/components/_tables.scss +16 -0
- package/src/scss/components/_tabs.scss +15 -0
- package/src/scss/components/_tags.scss +16 -0
- package/src/scss/components/_theme-toggle.scss +2 -0
- package/src/scss/components/_timelines.scss +3 -0
- package/src/scss/form-elements/_form.scss +13 -7
- package/src/scss/layout/_header.scss +3 -0
- package/src/scss/layout/_main.scss +5 -1
- package/src/scss/layout/_section.scss +1 -1
- package/src/scss/utilities/_accessibility.scss +14 -0
- package/src/scss/utilities/_flex.scss +17 -0
- package/src/scss/utilities/_index.scss +2 -0
- package/src/scss/utilities/_text.scss +17 -5
- package/src/scss/utilities/_touch-targets.scss +54 -0
|
@@ -25,23 +25,34 @@ classes are the entire contract.
|
|
|
25
25
|
|
|
26
26
|
## Behaviour inventory
|
|
27
27
|
|
|
28
|
-
| Behaviour | What the shipped JS does
|
|
29
|
-
| ------------------- |
|
|
30
|
-
| Accordion | Toggles `active` on `mw-accordion-header` and the following `mw-accordion-content`
|
|
31
|
-
| Tabs | `data-tab` → panel `id`; sets `active` on nav item and panel
|
|
32
|
-
| Modal | Click on `mw-modal-close` removes `mw-modal-open` from the overlay
|
|
33
|
-
| Mobile nav | Toggles `open` on `mw-menu-btn` and `mw-navbar`, closes on anchor click
|
|
34
|
-
| Scroll spy | Sets `active` on `mw-navbar-link` from the scroll position
|
|
35
|
-
| Theme toggle | `localStorage['mw-theme']`, toggles `mw-theme-light` on `<body>` and `active` on the toggle
|
|
36
|
-
| Progress bar | `IntersectionObserver` sets `width` from `data-value`
|
|
37
|
-
| Slider | On `input`, sets `--value` (track fill) and `data-value` (badge text)
|
|
38
|
-
| Alerts | Close button adds `mw-alert-closed` (`display: none`)
|
|
39
|
-
| Checkbox lists | Adds `mw-selected` to the `li`, emits a `checkboxToggle` event, exposes `window.toggleCheckbox`
|
|
40
|
-
| Gallery | Generates the dots, moves the track, swipe handling, writes `mw-gallery-desc`
|
|
41
|
-
| Image slider | Toggles `active` on the overlay image and the control button with the matching `data-index`
|
|
42
|
-
|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
28
|
+
| Behaviour | What the shipped JS does | What to do instead |
|
|
29
|
+
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
30
|
+
| Accordion | Toggles `mw-active` on `mw-accordion-header` and the following `mw-accordion-content` | `[class.mw-active]="isOpen()"` on both elements |
|
|
31
|
+
| Tabs | `data-tab` → panel `id`; sets `mw-active` on nav item and panel | Track the selected index/key, bind `mw-active` on both; drop `data-tab` |
|
|
32
|
+
| Modal | Click on `mw-modal-close` removes `mw-modal-open` from the overlay | `[class.mw-modal-open]="isOpen()"`; backdrop click closes. Opening is not in the script at all (the showcase has its own `openModal`) |
|
|
33
|
+
| Mobile nav | Toggles `open` on `mw-menu-btn` and `mw-navbar`, closes on anchor click | One signal, bound to both; reset it on navigation end |
|
|
34
|
+
| Scroll spy | Sets `mw-active` on `mw-navbar-link` from the scroll position | Router-based: `routerLinkActive="mw-active"` |
|
|
35
|
+
| Theme toggle | `localStorage['mw-theme']`, toggles `mw-theme-light` on `<body>` and `mw-active` on the toggle | A theme service - see `examples/angular-services.md` |
|
|
36
|
+
| Progress bar | `IntersectionObserver` sets `width` from `data-value` | Bind `[style.width.%]="value()"` on `mw-progress-fill` |
|
|
37
|
+
| Slider | On `input`, sets `--value` (track fill) and `data-value` (badge text) | Bind `[style.--value.%]` and `[attr.data-value]` |
|
|
38
|
+
| Alerts | Close button adds `mw-alert-closed` (`display: none`) | Remove the alert from the list/signal |
|
|
39
|
+
| Checkbox lists | Adds `mw-selected` to the `li`, emits a `checkboxToggle` event, exposes `window.toggleCheckbox` | `[class.mw-selected]="item.checked"` |
|
|
40
|
+
| Gallery | Generates the dots, moves the track, swipe handling, writes `mw-gallery-desc` | Render dots in the template, bind the track transform and `mw-active` on the current dot |
|
|
41
|
+
| Image slider | Toggles `mw-active` on the overlay image and the control button with the matching `data-index` | Bind `mw-active` from the selected index |
|
|
42
|
+
| Kanban board | Counts the tickets per lane, moves a card between lanes (`data-kanban-move`), clones `mw-kanban-card-template` on save, derives the next key from `data-kanban-prefix`, toggles `mw-active` on the composer | Keep the tickets in a signal/store and render the lanes from it; `mw-active` on the composer, `mw-kanban-editing` on the ticket it replaces. Neither the `<template>` nor the `mw-kanban-composer-*` hook classes are needed |
|
|
43
|
+
| Calendar | Renders the month or week grid from `data-calendar="month | week"`, pages with `data-calendar-nav`, draws the status dots from `data-calendar-markers`, toggles `mw-selected`and emits`mw-calendar-select` | Render the cells from a signal and bind `mw-calendar-adjacent`, `mw-calendar-weekend`, `mw-calendar-today` and `mw-selected` yourself; none of the `data-calendar-*` attributes are needed |
|
|
44
|
+
| Localhost indicator | On a local hostname, prepends `mw-localhost-indicator-pulse` to the header when it carries `mw-localhost-indicator-activated` | Render the element conditionally |
|
|
45
|
+
| Header login button | Swaps the FontAwesome lock icon | Bind the icon class |
|
|
46
|
+
| Color swatches | Showcase-only (prints computed hex values) | Not needed |
|
|
47
|
+
|
|
48
|
+
## A note on the state class
|
|
49
|
+
|
|
50
|
+
Since 4.0.0 the script writes `mw-active` and clears both `mw-active` and the
|
|
51
|
+
deprecated bare `active` when it switches a state off. That is deliberate: HTML
|
|
52
|
+
written against an older version marks the first tab with `active`, and if
|
|
53
|
+
switching away only removed `mw-active`, that first tab would stay lit next to
|
|
54
|
+
the newly chosen one. In your own components bind `mw-active` and forget the
|
|
55
|
+
other spelling exists.
|
|
45
56
|
|
|
46
57
|
## What works without any JavaScript
|
|
47
58
|
|
|
@@ -49,7 +60,10 @@ Pure CSS, nothing to wire up: hover and focus states, the card lift, tooltips
|
|
|
49
60
|
(`data-tooltip`), `mw-rating` (via `data-rating`), the responsive table card
|
|
50
61
|
view (`data-label`), all grids and utilities, the body scroll lock while a modal
|
|
51
62
|
is open (`body:has(.mw-modal-open)`), toast entry animations, the sticky table
|
|
52
|
-
header,
|
|
63
|
+
header, the scroll hint on a tab bar (four gradients, no scroll listener), the
|
|
64
|
+
kanban empty-lane placeholder (hidden via `:has()` as soon as the lane holds a
|
|
65
|
+
ticket), touch target sizing on a coarse pointer, `prefers-reduced-motion`
|
|
66
|
+
handling.
|
|
53
67
|
|
|
54
68
|
## When you do keep the shipped JS
|
|
55
69
|
|
|
@@ -26,7 +26,11 @@
|
|
|
26
26
|
- `mw-main` is a full-height flex column - the footer stays at the bottom on
|
|
27
27
|
short pages.
|
|
28
28
|
- `mw-container` is `min(1200px, 89%)`, horizontally centered. Nest it inside
|
|
29
|
-
every full-bleed band (header, section, footer), never around them.
|
|
29
|
+
every full-bleed band (header, section, footer), never around them. Below
|
|
30
|
+
576px it switches to a fixed 1rem gutter instead of the percentage - 89% of a
|
|
31
|
+
375px screen leaves 41px of nothing on a card that has to fit an amount, a
|
|
32
|
+
status and two labels into one row. Both widths are tokens,
|
|
33
|
+
`--mw-container-width` and `--mw-container-width-sm`.
|
|
30
34
|
- `mw-content` (`flex: 1` + top padding) is the alternative to `mw-section` when
|
|
31
35
|
a page has one single content area. `mw-content-centered` centers it
|
|
32
36
|
vertically over the full viewport - login pages, error pages.
|
|
@@ -59,7 +63,7 @@ its children are styled through descendant selectors:
|
|
|
59
63
|
<nav class="mw-navbar mw-navbar-medium">
|
|
60
64
|
<ul class="mw-navbar-list">
|
|
61
65
|
<li class="mw-navbar-item">
|
|
62
|
-
<a href="#start" class="mw-navbar-link active">Start</a>
|
|
66
|
+
<a href="#start" class="mw-navbar-link mw-active">Start</a>
|
|
63
67
|
</li>
|
|
64
68
|
<li class="mw-navbar-item">
|
|
65
69
|
<a href="#docs" class="mw-navbar-link">Docs</a>
|
|
@@ -153,7 +157,7 @@ viewport, so keep long tooltips off the outermost elements.
|
|
|
153
157
|
|
|
154
158
|
| Class | Use |
|
|
155
159
|
| ----------------------------------- | -------------------------------------------------------------------------- |
|
|
156
|
-
| `mw-section` | Vertical rhythm
|
|
160
|
+
| `mw-section` | Vertical rhythm for a page band - `--mw-section-padding-block`, 1.75rem |
|
|
157
161
|
| `mw-section-alternate` | Diagonal pattern background; combine with `mw-section` |
|
|
158
162
|
| `mw-section-title` | Centered `3xl` heading with a decorative primary underline - landing pages |
|
|
159
163
|
| `mw-section-subtitle` | Centered `2xl` heading with a thin secondary underline |
|
|
@@ -277,6 +281,47 @@ automatically.
|
|
|
277
281
|
**Display** - `mw-d-flex`, `mw-d-inline-flex`, `mw-d-block`, `mw-d-inline`,
|
|
278
282
|
`mw-d-inline-block`, `mw-d-grid`, `mw-d-none`, `mw-d-contents`.
|
|
279
283
|
|
|
284
|
+
**Numbers** - `mw-text-numeric` is fixed-width digits and nothing else, for a
|
|
285
|
+
clock, a counter or an ID that must not jitter while it changes.
|
|
286
|
+
`mw-text-currency` adds right alignment and `nowrap` on top, which is what a
|
|
287
|
+
money column in a table wants. Do not reach for `mw-text-currency` just to get
|
|
288
|
+
the digits - that was the old behaviour of `mw-text-numeric` and the reason
|
|
289
|
+
people wrote `font-variant-numeric` out by hand.
|
|
290
|
+
|
|
291
|
+
### `mw-row-split` - the row with two ends
|
|
292
|
+
|
|
293
|
+
The most common layout in any application: what it is on the left, the value or
|
|
294
|
+
the action on the right, wrapping to two lines when it runs out of room. Card
|
|
295
|
+
header, section header, key figure, week row.
|
|
296
|
+
|
|
297
|
+
```html
|
|
298
|
+
<div class="mw-row-split">
|
|
299
|
+
<strong>Invoice 2026-0042</strong>
|
|
300
|
+
<span class="mw-text-currency">1,204.50</span>
|
|
301
|
+
</div>
|
|
302
|
+
```
|
|
303
|
+
|
|
304
|
+
Five declarations you would otherwise write again in every component -
|
|
305
|
+
including the `flex-wrap` everyone forgets, which is what keeps the left half
|
|
306
|
+
from being squashed on a phone.
|
|
307
|
+
|
|
308
|
+
`mw-row-split` aligns on the baseline, which is right for text against text. Add
|
|
309
|
+
`mw-row-split-center` when the two sides differ in height - a heading beside a
|
|
310
|
+
button, a label beside an icon.
|
|
311
|
+
|
|
312
|
+
### `mw-sr-only` - text for screen readers only
|
|
313
|
+
|
|
314
|
+
```html
|
|
315
|
+
<button type="button" class="mw-btn mw-btn-outline">
|
|
316
|
+
<i class="fas fa-trash"></i>
|
|
317
|
+
<span class="mw-sr-only">Delete invoice 2026-0042</span>
|
|
318
|
+
</button>
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
Wherever an icon carries the whole message. Not `display: none` and not
|
|
322
|
+
`visibility: hidden` - both drop the element out of the accessibility tree,
|
|
323
|
+
which is precisely what must not happen.
|
|
324
|
+
|
|
280
325
|
There are no responsive display variants. Show/hide per breakpoint is the
|
|
281
326
|
application's job (media query in your own stylesheet, or `@if` in the
|
|
282
327
|
template).
|
|
@@ -37,30 +37,40 @@ a palette switch meant setting 41 variables.
|
|
|
37
37
|
|
|
38
38
|
## Which token for what
|
|
39
39
|
|
|
40
|
-
| Token | Role
|
|
41
|
-
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
42
|
-
| `--mw-primary-color` | Brand colour: primary buttons, table headers, focus rings, active states
|
|
43
|
-
| `--mw-primary-color-hover` | Solid hover surface (derived: base + 18% black)
|
|
44
|
-
| `--mw-primary-background` | 20% tint - focus halo, scrollbar tracks
|
|
45
|
-
| `--mw-primary-background-hover` | 50% tint - row and list hover
|
|
46
|
-
| `--mw-primary-info-background` | 70% tint - alert and info surfaces
|
|
47
|
-
| `--mw-border-accent` | Translucent accent **line**: panel rules, dividers, tab underlines
|
|
48
|
-
| `--mw-secondary-*` | Same set for the second brand colour
|
|
49
|
-
| `--mw-success/warning/danger/info-color` | Status colours, each with `-color-hover`, `-info-background`, `-info-background-hover`
|
|
50
|
-
| `--mw-accent-text-color` | Text on any solid coloured surface (buttons, table/panel headers, badges, stepper dots)
|
|
51
|
-
| `--mw-gray-color` | Neutral foreground: muted icons, tooltips
|
|
52
|
-
| `--mw-gray-background` | Subtle neutral surface (20% alpha): zebra rows, disabled fields, tracks, skeletons
|
|
53
|
-
| `--mw-
|
|
54
|
-
| `--mw-
|
|
55
|
-
| `--mw-
|
|
56
|
-
| `--mw-
|
|
57
|
-
| `--mw-
|
|
58
|
-
| `--mw-
|
|
59
|
-
| `--mw-
|
|
60
|
-
| `--mw-
|
|
61
|
-
| `--mw-card-
|
|
62
|
-
| `--mw-
|
|
63
|
-
| `--mw-
|
|
40
|
+
| Token | Role |
|
|
41
|
+
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
42
|
+
| `--mw-primary-color` | Brand colour: primary buttons, table headers, focus rings, active states |
|
|
43
|
+
| `--mw-primary-color-hover` | Solid hover surface (derived: base + 18% black) |
|
|
44
|
+
| `--mw-primary-background` | 20% tint - focus halo, scrollbar tracks |
|
|
45
|
+
| `--mw-primary-background-hover` | 50% tint - row and list hover |
|
|
46
|
+
| `--mw-primary-info-background` | 70% tint - alert and info surfaces |
|
|
47
|
+
| `--mw-border-accent` | Translucent accent **line**: panel rules, dividers, tab underlines |
|
|
48
|
+
| `--mw-secondary-*` | Same set for the second brand colour |
|
|
49
|
+
| `--mw-success/warning/danger/info-color` | Status colours, each with `-color-hover`, `-info-background`, `-info-background-hover` |
|
|
50
|
+
| `--mw-accent-text-color` | Text on any solid coloured surface (buttons, table/panel headers, badges, stepper dots) |
|
|
51
|
+
| `--mw-gray-color` | Neutral foreground: muted icons, tooltips |
|
|
52
|
+
| `--mw-gray-background` | Subtle neutral surface (20% alpha): zebra rows, disabled fields, tracks, skeletons |
|
|
53
|
+
| `--mw-surface-muted` | Alias of `--mw-gray-background` under the name you reach for: a slightly set-off area _inside_ a card - hint block, framed paragraph, form summary |
|
|
54
|
+
| `--mw-overlay-background` | Heavy scrim (60%) behind modals and blocking spinners |
|
|
55
|
+
| `--mw-page-background`, `--mw-card-background`, `--mw-footer-background`, `--mw-border`, `--mw-shadow`, `--mw-text-color`, `--mw-text-muted-color`, `--mw-hero-overlay-background` | The **active theme** - aliases pointing at the `--mw-dark-*` or `--mw-light-*` set |
|
|
56
|
+
| `--mw-header-*` | Header chrome: `background`, `text-color`, `navbar-list-color`, `navbar-list-active-color`, `burgerbutton-color`, `border` - dark in both themes |
|
|
57
|
+
| `--mw-form-elements-background`, `--mw-form-elements-color` | Form controls stay light in both themes and therefore have their own pair |
|
|
58
|
+
| `--mw-font-family-base`, `-heading`, `-mono` | Font stacks (default: system stacks - no font is bundled) |
|
|
59
|
+
| `--mw-hero-background` | Hero image (`url(...)`) |
|
|
60
|
+
| `--mw-transition` | Global transition (`all 0.3s ease`) |
|
|
61
|
+
| `--mw-card-img-height` | Per-card image height (default `210px`; `mw-card-lg`/`-xl` set it to 340px/480px) |
|
|
62
|
+
| `--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 |
|
|
63
|
+
| `--mw-table-scroll-height` | Per-table height cap for `mw-table-responsive-scroll` |
|
|
64
|
+
| `--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`) |
|
|
65
|
+
| `--mw-container-width`, `--mw-container-width-sm` | Content width of `mw-container` (`min(1200px, 89%)`, below 576px a 1rem gutter) |
|
|
66
|
+
| `--mw-section-padding-block` | Top/bottom rhythm of `mw-section` (1.75rem) |
|
|
67
|
+
| `--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 |
|
|
68
|
+
| `--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` |
|
|
69
|
+
| `--mw-internal-theme-mode` | Read-only: what `$mw-theme-mode` was compiled to |
|
|
70
|
+
|
|
71
|
+
The four above are the knobs a good default cannot settle, because the right
|
|
72
|
+
answer differs per project: what reads as generous on a landing page costs
|
|
73
|
+
visible content in an application with a sticky header.
|
|
64
74
|
|
|
65
75
|
Two rules that prevent most colour bugs:
|
|
66
76
|
|
package/CHANGELOG.md
CHANGED
|
@@ -10,12 +10,68 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
10
10
|
<<<<<<< HEAD
|
|
11
11
|
<<<<<<< HEAD
|
|
12
12
|
<<<<<<< HEAD
|
|
13
|
+
<<<<<<< HEAD
|
|
14
|
+
<<<<<<< HEAD
|
|
13
15
|
||||||| 4031dbb
|
|
14
16
|
=======
|
|
15
17
|
||||||| 0be20d9
|
|
16
18
|
=======
|
|
17
19
|
||||||| da0294d
|
|
18
20
|
=======
|
|
21
|
+
||||||| 15e4c7d
|
|
22
|
+
=======
|
|
23
|
+
||||||| 19a1edb
|
|
24
|
+
=======
|
|
25
|
+
## [4.0.0] - 2026-08-19
|
|
26
|
+
|
|
27
|
+
### Added
|
|
28
|
+
|
|
29
|
+
- mw-sr-only
|
|
30
|
+
- mw-row-split (+ center)
|
|
31
|
+
- mw-btn-plain
|
|
32
|
+
- mw-tag-neutral / mw-tags-neutral
|
|
33
|
+
- mw-button-bar-center
|
|
34
|
+
- mw-segmented (+ secondary, auto)
|
|
35
|
+
- mw-text-currency
|
|
36
|
+
- mw-table-responsive-hint
|
|
37
|
+
- mw-actions-note
|
|
38
|
+
- scroll hint on the tab bar, no JavaScript needed
|
|
39
|
+
- touch targets grow on a coarse pointer or below 768px
|
|
40
|
+
- tokens: --mw-surface-muted, --mw-container-width, --mw-container-width-sm,
|
|
41
|
+
--mw-section-padding-block, --mw-calendar-dot, --mw-scroll-hint-cover
|
|
42
|
+
|
|
43
|
+
### Changed
|
|
44
|
+
|
|
45
|
+
- **Breaking:** mw-text-numeric is now digits only - use mw-text-currency for a
|
|
46
|
+
money column
|
|
47
|
+
- **Breaking:** mw-container drops to a 1rem gutter below 576px instead of 89%
|
|
48
|
+
- mw-active is the state class everywhere; bare active still works but is
|
|
49
|
+
deprecated
|
|
50
|
+
- calendar dot colour comes from --mw-calendar-dot, tone classes are presets
|
|
51
|
+
- mw-modal-backdrop works as a button without a reset
|
|
52
|
+
- modal widths evenly stepped: 370 / 520 / 720 / 960px
|
|
53
|
+
- mw-form-actions-hint is now mw-actions-note and works in modal, card and
|
|
54
|
+
panel footers too; the old name stays as an alias
|
|
55
|
+
|
|
56
|
+
## [3.12.0] - 2026-08-19
|
|
57
|
+
|
|
58
|
+
### Added
|
|
59
|
+
|
|
60
|
+
- calendar (month, week and compact month)
|
|
61
|
+
|
|
62
|
+
### Changed
|
|
63
|
+
|
|
64
|
+
- pagination frame now matches the calendar
|
|
65
|
+
- big update with the needs of another project
|
|
66
|
+
|
|
67
|
+
>>>>>>> main
|
|
68
|
+
## [3.11.0] - 2026-08-12
|
|
69
|
+
|
|
70
|
+
### Fixed
|
|
71
|
+
|
|
72
|
+
- footer color
|
|
73
|
+
|
|
74
|
+
>>>>>>> main
|
|
19
75
|
## [3.10.0] - 2026-08-10
|
|
20
76
|
|
|
21
77
|
### Added
|
package/index.html
CHANGED
|
@@ -93,12 +93,25 @@
|
|
|
93
93
|
border: 1px solid var(--mw-border);
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
+
/* A calendar fills its container; across the full page that stretches the
|
|
97
|
+
cells to 150px, so the demos get a realistic column instead */
|
|
98
|
+
.calendar-demo {
|
|
99
|
+
max-width: 520px;
|
|
100
|
+
margin-inline: auto;
|
|
101
|
+
}
|
|
102
|
+
|
|
96
103
|
/* Medium screens */
|
|
97
104
|
@media (max-width: 992px) {
|
|
98
105
|
.version-corner {
|
|
99
106
|
right: 7%;
|
|
100
107
|
font-size: 1rem;
|
|
101
108
|
}
|
|
109
|
+
|
|
110
|
+
/* Two calendars side by side squeeze their cells below md, so they
|
|
111
|
+
stack one breakpoint earlier than mw-grid-2 would on its own */
|
|
112
|
+
.calendar-demos {
|
|
113
|
+
grid-template-columns: minmax(0, 1fr);
|
|
114
|
+
}
|
|
102
115
|
}
|
|
103
116
|
|
|
104
117
|
/* Small screens */
|
|
@@ -346,6 +359,7 @@
|
|
|
346
359
|
<nav class="mw-section-nav">
|
|
347
360
|
<a href="#form-elements" class="mw-section-btn">Form Elements</a>
|
|
348
361
|
<a href="#input-group" class="mw-section-btn">Input Group</a>
|
|
362
|
+
<a href="#segmented" class="mw-section-btn">Segmented Control</a>
|
|
349
363
|
<a href="#form-field" class="mw-section-btn">Field Pattern</a>
|
|
350
364
|
<a href="#form" class="mw-section-btn">Form</a>
|
|
351
365
|
<a href="#login" class="mw-section-btn">Login</a>
|
|
@@ -361,6 +375,11 @@
|
|
|
361
375
|
@@include('./src/partials/input-group-container.html')
|
|
362
376
|
</div>
|
|
363
377
|
|
|
378
|
+
<!-- Segmented control container -->
|
|
379
|
+
<div id="segmented">
|
|
380
|
+
@@include('./src/partials/segmented-container.html')
|
|
381
|
+
</div>
|
|
382
|
+
|
|
364
383
|
<!-- Form Field pattern container -->
|
|
365
384
|
<div id="form-field">
|
|
366
385
|
@@include('./src/partials/form-field-container.html')
|
|
@@ -383,6 +402,7 @@
|
|
|
383
402
|
<a href="#meta-info" class="mw-section-btn">Meta Info</a>
|
|
384
403
|
<a href="#tables" class="mw-section-btn">Tables</a>
|
|
385
404
|
<a href="#kanban" class="mw-section-btn">Kanban</a>
|
|
405
|
+
<a href="#calendar" class="mw-section-btn">Calendar</a>
|
|
386
406
|
<a href="#pagination" class="mw-section-btn">Pagination</a>
|
|
387
407
|
<a href="#timelines" class="mw-section-btn">Timelines</a>
|
|
388
408
|
<a href="#gallery" class="mw-section-btn">Image Gallery</a>
|
|
@@ -413,6 +433,11 @@
|
|
|
413
433
|
@@include('./src/partials/kanban-container.html')
|
|
414
434
|
</div>
|
|
415
435
|
|
|
436
|
+
<!-- Calendar container -->
|
|
437
|
+
<div id="calendar">
|
|
438
|
+
@@include('./src/partials/calendar-container.html')
|
|
439
|
+
</div>
|
|
440
|
+
|
|
416
441
|
<!-- Pagination container -->
|
|
417
442
|
<div id="pagination">
|
|
418
443
|
@@include('./src/partials/pagination-container.html')
|