maverick-wave 3.3.1 → 3.4.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/references/components.md +1 -1
- package/.claude/skills/maverick-wave/references/forms.md +3 -1
- package/maverick-wave.min.css +1 -1
- package/maverick-wave.min.js +1 -1
- package/package.json +2 -2
- package/src/js/main.js +71 -42
- package/src/partials/utilities-container.html +34 -2
- package/src/scss/abstracts/_variables.scss +2 -2
- package/src/scss/components/_gallery.scss +38 -42
- package/src/scss/components/_modals.scss +4 -4
- package/src/scss/form-elements/_form.scss +11 -2
- package/src/scss/layout/_header.scss +141 -55
- package/src/scss/utilities/_flex.scss +19 -0
- package/src/scss/utilities/_spacing.scss +34 -28
|
@@ -222,7 +222,7 @@ via the header state. Content taller than 500px scrolls. Toggling is JS - see
|
|
|
222
222
|
- Body scroll lock is automatic: the stylesheet uses
|
|
223
223
|
`body:has(.mw-modal-open)`. Nothing to implement.
|
|
224
224
|
- Sizes: `mw-modal-sm` 370px, default 550px, `mw-modal-lg` 680px,
|
|
225
|
-
`mw-modal-xl` 900px. Height is capped at
|
|
225
|
+
`mw-modal-xl` 900px. Height is capped at 80-92dvh, the body scrolls.
|
|
226
226
|
- `mw-modal-backdrop` is the click-to-close surface; put the close handler on it.
|
|
227
227
|
- `mw-modal-body` takes a `mw-form` directly - the form brings the field gaps,
|
|
228
228
|
the body brings the padding.
|
|
@@ -54,7 +54,7 @@ reactive form control.
|
|
|
54
54
|
```html
|
|
55
55
|
<form class="mw-form">
|
|
56
56
|
<div class="mw-form-group">
|
|
57
|
-
<
|
|
57
|
+
<h4 class="mw-form-group-title">Personal information</h4>
|
|
58
58
|
<div class="mw-grid-2">
|
|
59
59
|
<div class="mw-field">...</div>
|
|
60
60
|
<div class="mw-field">...</div>
|
|
@@ -74,6 +74,8 @@ reactive form control.
|
|
|
74
74
|
when there is no real form element.
|
|
75
75
|
- `mw-form-inline` lays the children out in a row.
|
|
76
76
|
- `mw-form-group` is the bordered block for a titled group of fields.
|
|
77
|
+
`mw-form-group-title` is the heading hook inside it - put it on the `<h3>` /
|
|
78
|
+
`<h4>`, otherwise the heading keeps its full document-level size.
|
|
77
79
|
- `mw-form-actions` is a right-aligned wrapping button row.
|
|
78
80
|
`mw-form-actions-hint` is a full-width note above the buttons.
|
|
79
81
|
Alignment variants: `mw-form-actions-left`, `mw-form-actions-center`,
|