@natachah/vanilla-frontend 0.1.18 → 0.1.20
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/docs/pages/base/typography.html +5 -4
- package/docs/pages/components/button.html +7 -4
- package/docs/pages/components/dialog.html +1 -1
- package/docs/pages/components/disclosure.html +9 -6
- package/docs/pages/components/dropdown.html +7 -4
- package/docs/pages/components/form.html +75 -15
- package/docs/pages/components/list.html +7 -4
- package/docs/pages/layouts/grid.html +21 -3
- package/docs/pages/quick-start/customization.html +31 -17
- package/docs/pages/quick-start/installation.html +1 -0
- package/docs/src/js/doc-code.js +1 -1
- package/docs/src/js/doc-layout.js +1 -1
- package/js/_dialog.js +15 -2
- package/natachah-vanilla-frontend-0.1.20.tgz +0 -0
- package/package.json +1 -1
- package/scss/abstracts/_mixins.scss +18 -10
- package/scss/base/_typography.scss +4 -2
- package/scss/components/_form.scss +15 -0
- package/scss/layouts/_grid.scss +2 -5
- package/scss/themes/_root.scss +5 -5
- package/natachah-vanilla-frontend-0.1.18.tgz +0 -0
|
@@ -94,12 +94,13 @@
|
|
|
94
94
|
--anchor-decoration
|
|
95
95
|
--anchor-color
|
|
96
96
|
--anchor-hover-color
|
|
97
|
+
--anchor-focus-color
|
|
97
98
|
--anchor-active-color
|
|
98
99
|
--anchor-disabled-opacity
|
|
99
|
-
--anchor-
|
|
100
|
-
--anchor-
|
|
101
|
-
--anchor-
|
|
102
|
-
--anchor-
|
|
100
|
+
--anchor-outline-size
|
|
101
|
+
--anchor-outline-style
|
|
102
|
+
--anchor-outline-color
|
|
103
|
+
--anchor-outline-offset
|
|
103
104
|
</doc-code>
|
|
104
105
|
</div>
|
|
105
106
|
|
|
@@ -42,13 +42,16 @@
|
|
|
42
42
|
--button-padding-block
|
|
43
43
|
--button-transition
|
|
44
44
|
--button-decoration
|
|
45
|
-
--button-
|
|
46
|
-
--button-
|
|
47
|
-
--button-
|
|
48
|
-
--button-
|
|
45
|
+
--button-outline-size
|
|
46
|
+
--button-outline-style
|
|
47
|
+
--button-outline-color
|
|
48
|
+
--button-outline-offset
|
|
49
49
|
--button-hover-color
|
|
50
50
|
--button-hover-background
|
|
51
51
|
--button-hover-border-color
|
|
52
|
+
--button-focus-color
|
|
53
|
+
--button-focus-background
|
|
54
|
+
--button-focus-border-color
|
|
52
55
|
--button-active-color
|
|
53
56
|
--button-active-background
|
|
54
57
|
--button-active-border-color
|
|
@@ -65,13 +65,16 @@
|
|
|
65
65
|
--disclosure-padding-block
|
|
66
66
|
--disclosure-transition
|
|
67
67
|
--disclosure-decoration
|
|
68
|
-
--disclosure-
|
|
69
|
-
--disclosure-
|
|
70
|
-
--disclosure-
|
|
71
|
-
--disclosure-
|
|
68
|
+
--disclosure-outline-size
|
|
69
|
+
--disclosure-outline-style
|
|
70
|
+
--disclosure-outline-color
|
|
71
|
+
--disclosure-outline-offset
|
|
72
72
|
--disclosure-hover-color
|
|
73
73
|
--disclosure-hover-background
|
|
74
74
|
--disclosure-hover-border-color
|
|
75
|
+
--disclosure-focus-color
|
|
76
|
+
--disclosure-focus-background
|
|
77
|
+
--disclosure-focus-border-color
|
|
75
78
|
--disclosure-active-color
|
|
76
79
|
--disclosure-active-background
|
|
77
80
|
--disclosure-active-border-color
|
|
@@ -130,7 +133,7 @@
|
|
|
130
133
|
</doc-code>
|
|
131
134
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
132
135
|
$outline-variations: (
|
|
133
|
-
|
|
136
|
+
disclosure
|
|
134
137
|
);
|
|
135
138
|
</doc-code>
|
|
136
139
|
</div>
|
|
@@ -224,7 +227,7 @@
|
|
|
224
227
|
</doc-code>
|
|
225
228
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
226
229
|
$color-variations: (
|
|
227
|
-
|
|
230
|
+
disclosure: (primary)
|
|
228
231
|
);
|
|
229
232
|
</doc-code>
|
|
230
233
|
</div>
|
|
@@ -69,13 +69,16 @@
|
|
|
69
69
|
--dropdown-padding-block
|
|
70
70
|
--dropdown-transition
|
|
71
71
|
--dropdown-decoration
|
|
72
|
-
--dropdown-
|
|
73
|
-
--dropdown-
|
|
74
|
-
--dropdown-
|
|
75
|
-
--dropdown-
|
|
72
|
+
--dropdown-outline-size
|
|
73
|
+
--dropdown-outline-style
|
|
74
|
+
--dropdown-outline-color
|
|
75
|
+
--dropdown-outline-offset
|
|
76
76
|
--dropdown-hover-color
|
|
77
77
|
--dropdown-hover-background
|
|
78
78
|
--dropdown-hover-border-color
|
|
79
|
+
--dropdown-focus-color
|
|
80
|
+
--dropdown-focus-background
|
|
81
|
+
--dropdown-focus-border-color
|
|
79
82
|
--dropdown-active-color
|
|
80
83
|
--dropdown-active-background
|
|
81
84
|
--dropdown-active-border-color
|
|
@@ -47,10 +47,10 @@
|
|
|
47
47
|
--form-padding-block
|
|
48
48
|
--form-transition
|
|
49
49
|
--form-decoration
|
|
50
|
-
--form-
|
|
51
|
-
--form-
|
|
52
|
-
--form-
|
|
53
|
-
--form-
|
|
50
|
+
--form-outline-size
|
|
51
|
+
--form-outline-style
|
|
52
|
+
--form-outline-color
|
|
53
|
+
--form-outline-offset
|
|
54
54
|
--form-disabled-opacity
|
|
55
55
|
</doc-code>
|
|
56
56
|
</div>
|
|
@@ -288,19 +288,79 @@
|
|
|
288
288
|
<h3>Validation</h3>
|
|
289
289
|
<p>Use the <code>aria-invalid</code> attribute to display the element as in/valid and use <code>aria-describedby</code> attribute with a <code><small></code> tag to display the information.</p>
|
|
290
290
|
<blockquote class="warning">
|
|
291
|
-
<p>As every design is different, there is
|
|
291
|
+
<p>As every design is different, there is not too much default style for in/valid elements. But for accessibility don't forget to add icons to show the errors.</p>
|
|
292
292
|
</blockquote>
|
|
293
293
|
|
|
294
|
-
<doc-
|
|
295
|
-
<
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
294
|
+
<doc-demo>
|
|
295
|
+
<form action="#">
|
|
296
|
+
<div>
|
|
297
|
+
<label for="invalidInput">Invalid input</label>
|
|
298
|
+
<input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
|
|
299
|
+
<small id="invalidMsg">
|
|
300
|
+
<span aria-live="assertive">
|
|
301
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
302
|
+
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
303
|
+
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
|
|
304
|
+
</svg>
|
|
305
|
+
Incorrect value !
|
|
306
|
+
</span>
|
|
307
|
+
</small>
|
|
308
|
+
</div>
|
|
309
|
+
<div>
|
|
310
|
+
<label for="validInput">Valid input</label>
|
|
311
|
+
<input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
|
|
312
|
+
<small id="validMsg">
|
|
313
|
+
<span aria-live="assertive">
|
|
314
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
315
|
+
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
316
|
+
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
|
|
317
|
+
</svg>
|
|
318
|
+
All good !
|
|
319
|
+
</span>
|
|
320
|
+
</small>
|
|
321
|
+
</div>
|
|
322
|
+
</form>
|
|
323
|
+
</doc-demo>
|
|
324
|
+
|
|
325
|
+
<div class="code-group">
|
|
326
|
+
<div role="tablist">
|
|
327
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
328
|
+
<button role="tab" aria-controls="scss">SCSS</button>
|
|
329
|
+
</div>
|
|
330
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
331
|
+
<div>
|
|
332
|
+
<label for="invalidInput">Invalid input</label>
|
|
333
|
+
<input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
|
|
334
|
+
<small id="invalidMsg">
|
|
335
|
+
<span aria-live="assertive">Incorrect value !</span>
|
|
336
|
+
</small>
|
|
337
|
+
</div>
|
|
338
|
+
<div>
|
|
339
|
+
<label for="validInput">Valid input</label>
|
|
340
|
+
<input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
|
|
341
|
+
<small id="validMsg">
|
|
342
|
+
<span aria-live="assertive">All good !</span>
|
|
343
|
+
</small>
|
|
344
|
+
</div>
|
|
345
|
+
</doc-code>
|
|
346
|
+
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
347
|
+
form div {
|
|
348
|
+
&:has([aria-invalid=true]) {
|
|
349
|
+
[aria-live] {
|
|
350
|
+
color: var(--color-error);
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
&:has([aria-invalid=false]) {
|
|
355
|
+
[aria-live] {
|
|
356
|
+
color: var(--color-success);
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
</doc-code>
|
|
361
|
+
</div>
|
|
362
|
+
|
|
363
|
+
|
|
304
364
|
|
|
305
365
|
<h2>Variants</h2>
|
|
306
366
|
<h3>Group</h3>
|
|
@@ -88,13 +88,16 @@
|
|
|
88
88
|
<doc-code id="css" data-type="css" role="tabpanel">
|
|
89
89
|
--list-transition
|
|
90
90
|
--list-decoration
|
|
91
|
-
--list-
|
|
92
|
-
--list-
|
|
93
|
-
--list-
|
|
94
|
-
--list-
|
|
91
|
+
--list-outline-size
|
|
92
|
+
--list-outline-style
|
|
93
|
+
--list-outline-color
|
|
94
|
+
--list-outline-offset
|
|
95
95
|
--list-hover-color
|
|
96
96
|
--list-hover-background
|
|
97
97
|
--list-hover-border-color
|
|
98
|
+
--list-focus-color
|
|
99
|
+
--list-focus-background
|
|
100
|
+
--list-focus-border-color
|
|
98
101
|
--list-active-color
|
|
99
102
|
--list-active-background
|
|
100
103
|
--list-active-border-color
|
|
@@ -65,7 +65,6 @@
|
|
|
65
65
|
<h2 id="flex-grid">Flex grid</h2>
|
|
66
66
|
|
|
67
67
|
<p>You can create a flexible grid via the <code>.flex-grid</code> class.</p>
|
|
68
|
-
|
|
69
68
|
<p>This method is more for <b>flexible</b> layout with a random number of items to display.</p>
|
|
70
69
|
|
|
71
70
|
<doc-demo>
|
|
@@ -106,7 +105,26 @@
|
|
|
106
105
|
|
|
107
106
|
<p>Both of them can be responsive by changing the CSS custom property <code>--grid-columns</code> inside a <code>@media</code> or a <code>@container</code>.</p>
|
|
108
107
|
|
|
109
|
-
<
|
|
108
|
+
<h3>Auto-fill</h3>
|
|
109
|
+
|
|
110
|
+
<p>With <code>.grid</code> you can add an auto layout with a maximum column size by changing the CSS custom properties <code>--grid-columns:auto-fill</code> and <code>--grid-column-size</code> and .</p>
|
|
111
|
+
|
|
112
|
+
<doc-demo>
|
|
113
|
+
<div class="grid" style="--grid-columns: auto-fill; --grid-column-size: 270px">
|
|
114
|
+
<div>1</div>
|
|
115
|
+
<div>2</div>
|
|
116
|
+
<div>3</div>
|
|
117
|
+
<div>4</div>
|
|
118
|
+
<div>5</div>
|
|
119
|
+
<div>6</div>
|
|
120
|
+
<div>7</div>
|
|
121
|
+
<div>8</div>
|
|
122
|
+
<div>9</div>
|
|
123
|
+
<div>10</div>
|
|
124
|
+
<div>11</div>
|
|
125
|
+
<div>12</div>
|
|
126
|
+
</div>
|
|
127
|
+
</doc-demo>
|
|
110
128
|
|
|
111
129
|
<h2>Columns</h2>
|
|
112
130
|
|
|
@@ -191,7 +209,7 @@
|
|
|
191
209
|
--grid-align
|
|
192
210
|
--grid-columns
|
|
193
211
|
--grid-grow /* only for .flex-grid */
|
|
194
|
-
|
|
212
|
+
--grid-column-size /* only for .grid */
|
|
195
213
|
</doc-code>
|
|
196
214
|
|
|
197
215
|
</doc-layout>
|
|
@@ -55,11 +55,11 @@
|
|
|
55
55
|
--border-style: solid;
|
|
56
56
|
--border-radius: .25rem;
|
|
57
57
|
|
|
58
|
-
//
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
--
|
|
62
|
-
--
|
|
58
|
+
// Outline (:focus)
|
|
59
|
+
--outline-size: 3px;
|
|
60
|
+
--outline-style: solid;
|
|
61
|
+
--outline-offset: 0;
|
|
62
|
+
--outline-opacity: 50%;
|
|
63
63
|
|
|
64
64
|
// Hover (color-mix)
|
|
65
65
|
--hover-color: black;
|
|
@@ -84,12 +84,26 @@
|
|
|
84
84
|
--color-warning-contrast: black;
|
|
85
85
|
|
|
86
86
|
// Icons
|
|
87
|
-
--icon-date: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
--icon-
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
--icon-date: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16">
|
|
88
|
+
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
|
|
89
|
+
</svg>');
|
|
90
|
+
--icon-time: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
91
|
+
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
|
|
92
|
+
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
|
|
93
|
+
</svg>');
|
|
94
|
+
--icon-file: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
95
|
+
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
|
|
96
|
+
<path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z" />
|
|
97
|
+
</svg>');
|
|
98
|
+
--icon-select: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
99
|
+
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
|
|
100
|
+
</svg>');
|
|
101
|
+
--icon-radio: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16">
|
|
102
|
+
<circle cx="8" cy="8" r="8" />
|
|
103
|
+
</svg>');
|
|
104
|
+
--icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16">
|
|
105
|
+
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
|
|
106
|
+
</svg>');
|
|
93
107
|
--icon-switch: var(--icon-radio);
|
|
94
108
|
|
|
95
109
|
}
|
|
@@ -102,20 +116,20 @@
|
|
|
102
116
|
// This is the light theme (or if there is none)
|
|
103
117
|
html[data-theme=light],
|
|
104
118
|
html:not([data-theme]) {
|
|
105
|
-
|
|
106
|
-
|
|
119
|
+
--color-body: white;
|
|
120
|
+
--color-font: black;
|
|
107
121
|
}
|
|
108
122
|
|
|
109
123
|
// This is for the dark theme
|
|
110
124
|
html[data-theme=dark] {
|
|
111
|
-
|
|
112
|
-
|
|
125
|
+
--color-body: black;
|
|
126
|
+
--color-font: white;
|
|
113
127
|
}
|
|
114
128
|
|
|
115
129
|
// This is for the dark theme
|
|
116
130
|
html[data-theme=my-custom-theme] {
|
|
117
|
-
|
|
118
|
-
|
|
131
|
+
--color-body: white;
|
|
132
|
+
--color-font: orange;
|
|
119
133
|
}
|
|
120
134
|
</doc-code>
|
|
121
135
|
|
|
@@ -46,6 +46,7 @@
|
|
|
46
46
|
@use '@natachah/vanilla-frontend/scss/components/_card';
|
|
47
47
|
@use '@natachah/vanilla-frontend/scss/components/_dialog';
|
|
48
48
|
@use '@natachah/vanilla-frontend/scss/components/_disclosure';
|
|
49
|
+
@use '@natachah/vanilla-frontend/scss/components/_drawer';
|
|
49
50
|
@use '@natachah/vanilla-frontend/scss/components/_dropdown';
|
|
50
51
|
@use '@natachah/vanilla-frontend/scss/components/_form';
|
|
51
52
|
@use '@natachah/vanilla-frontend/scss/components/_grid';
|
package/docs/src/js/doc-code.js
CHANGED
|
@@ -61,7 +61,7 @@ class DocCode extends HTMLElement {
|
|
|
61
61
|
const type = this.getAttribute('data-type') ?? 'html'
|
|
62
62
|
|
|
63
63
|
// Clean the code
|
|
64
|
-
let content = type === 'html'
|
|
64
|
+
let content = type === 'html' ? this.innerHTML : this.textContent
|
|
65
65
|
var pattern = content.match(/\s*\n[\t\s]*/)
|
|
66
66
|
content = content.replace(new RegExp(pattern, "g"), '\n').replaceAll('=""', '')
|
|
67
67
|
content = content.trim()
|
|
@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
|
|
|
18
18
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
|
|
19
19
|
<path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
|
|
20
20
|
</svg>
|
|
21
|
-
0.1.
|
|
21
|
+
0.1.20
|
|
22
22
|
</span>
|
|
23
23
|
</li>
|
|
24
24
|
<li>
|
package/js/_dialog.js
CHANGED
|
@@ -36,6 +36,8 @@ export default class Dialog extends BaseComponent {
|
|
|
36
36
|
|
|
37
37
|
this._form = this._element.querySelector('form') ?? {}
|
|
38
38
|
|
|
39
|
+
this._previousFocus = null
|
|
40
|
+
|
|
39
41
|
// Init the event listener
|
|
40
42
|
this.#init()
|
|
41
43
|
|
|
@@ -49,7 +51,7 @@ export default class Dialog extends BaseComponent {
|
|
|
49
51
|
#init() {
|
|
50
52
|
|
|
51
53
|
// OPEN
|
|
52
|
-
this._buttons.open.forEach((button) => button.addEventListener('click', () => this.open()))
|
|
54
|
+
this._buttons.open.forEach((button) => button.addEventListener('click', (e) => this.open(e)))
|
|
53
55
|
|
|
54
56
|
// CLOSE
|
|
55
57
|
this._buttons.close.forEach((button) => button.addEventListener('click', () => this.close()))
|
|
@@ -79,7 +81,7 @@ export default class Dialog extends BaseComponent {
|
|
|
79
81
|
* Open the dialog
|
|
80
82
|
*
|
|
81
83
|
*/
|
|
82
|
-
open() {
|
|
84
|
+
open(e) {
|
|
83
85
|
|
|
84
86
|
// Run event before opening, and stop if e.preventDefault()
|
|
85
87
|
const callback = this.emmitEvent('opening')
|
|
@@ -88,6 +90,11 @@ export default class Dialog extends BaseComponent {
|
|
|
88
90
|
// Open the dialog (the methode changed if it's a modal)
|
|
89
91
|
this._isModal ? this._element.showModal() : this._element.show()
|
|
90
92
|
|
|
93
|
+
// If open via an HTML element, keep it as previous to reset the focus
|
|
94
|
+
if (e && e.target instanceof HTMLElement) {
|
|
95
|
+
this._previousFocus = e.target
|
|
96
|
+
}
|
|
97
|
+
|
|
91
98
|
// Toggle the [inert] attribute on the body
|
|
92
99
|
this.#toggleBodyAttribute()
|
|
93
100
|
|
|
@@ -112,6 +119,9 @@ export default class Dialog extends BaseComponent {
|
|
|
112
119
|
// Toggle the [inert] attribute on the body
|
|
113
120
|
this.#toggleBodyAttribute()
|
|
114
121
|
|
|
122
|
+
// Reset the focus on the previous element
|
|
123
|
+
if (this._previousFocus) this._previousFocus.focus()
|
|
124
|
+
|
|
115
125
|
// Run event after closed
|
|
116
126
|
this.emmitEvent('closed')
|
|
117
127
|
|
|
@@ -148,6 +158,9 @@ export default class Dialog extends BaseComponent {
|
|
|
148
158
|
// Toggle the [inert] attribute on the body
|
|
149
159
|
this.#toggleBodyAttribute()
|
|
150
160
|
|
|
161
|
+
// Reset the focus on the previous element
|
|
162
|
+
if (this._previousFocus) this._previousFocus.focus()
|
|
163
|
+
|
|
151
164
|
// Run event after submited
|
|
152
165
|
this.emmitEvent('submited', { form: this._form })
|
|
153
166
|
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -35,6 +35,9 @@
|
|
|
35
35
|
$default-padding-inline: var(--#{$name}-padding-inline, map.get($properties, padding-inline));
|
|
36
36
|
$default-padding-block: var(--#{$name}-padding-block, map.get($properties, padding-block));
|
|
37
37
|
|
|
38
|
+
$default-hover-background: color-mix(in srgb, $default-background, var(--hover-color) var(--hover-percent));
|
|
39
|
+
$default-active-background: color-mix(in srgb, $default-background, var(--active-color) var(--active-percent));
|
|
40
|
+
|
|
38
41
|
// Define the CSS
|
|
39
42
|
color: $default-color;
|
|
40
43
|
background-color: $default-background;
|
|
@@ -59,23 +62,28 @@
|
|
|
59
62
|
// Define the interactive states
|
|
60
63
|
@if($states !=()) {
|
|
61
64
|
|
|
62
|
-
// State: focus
|
|
63
|
-
@if(list.index($states, 'focus')) {
|
|
64
|
-
&:focus {
|
|
65
|
-
outline: var(--#{$name}-focus-size, var(--focus-size)) var(--#{$name}-focus-style, var(--focus-style)) var(--#{$name}-focus-color, color-mix(in srgb, var(--#{$name}-border-color, var(--#{$name}-background, $default-color)), transparent var(--focus-opacity)));
|
|
66
|
-
outline-offset: var(--#{$name}-focus-offset, var(--focus-offset));
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
65
|
// State: hover
|
|
71
66
|
@if(list.index($states, 'hover')) {
|
|
72
67
|
&:hover {
|
|
73
68
|
color: var(--#{$name}-hover-color, $default-color);
|
|
74
|
-
background-color: var(--#{$name}-hover-background,
|
|
69
|
+
background-color: var(--#{$name}-hover-background, $default-hover-background);
|
|
75
70
|
border-color: var(--#{$name}-hover-border-color, $default-border-color);
|
|
76
71
|
}
|
|
77
72
|
}
|
|
78
73
|
|
|
74
|
+
// State: focus
|
|
75
|
+
@if(list.index($states, 'focus')) {
|
|
76
|
+
|
|
77
|
+
&:focus,
|
|
78
|
+
&:focus-visible {
|
|
79
|
+
color: var(--#{$name}-focus-color, var(--#{$name}-hover-color, $default-color));
|
|
80
|
+
background-color: var(--#{$name}-focus-background, var(--#{$name}-hover-background, $default-hover-background));
|
|
81
|
+
border-color: var(--#{$name}-focus-border-color, var(--#{$name}-hover-border-color, $default-border-color));
|
|
82
|
+
outline: var(--#{$name}-outline-size, var(--outline-size)) var(--#{$name}-outline-style, var(--outline-style)) var(--#{$name}-outline-color, color-mix(in srgb, currentColor, transparent var(--outline-opacity)));
|
|
83
|
+
outline-offset: var(--#{$name}-outline-offset, var(--outline-offset));
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
79
87
|
// State: active
|
|
80
88
|
@if(list.index($states, 'active')) {
|
|
81
89
|
|
|
@@ -84,7 +92,7 @@
|
|
|
84
92
|
&[aria-selected=true],
|
|
85
93
|
&[aria-pressed=true] {
|
|
86
94
|
color: var(--#{$name}-active-color, $default-color);
|
|
87
|
-
background-color: var(--#{$name}-active-background,
|
|
95
|
+
background-color: var(--#{$name}-active-background, $default-active-background);
|
|
88
96
|
border-color: var(--#{$name}-active-border-color, $default-border-color);
|
|
89
97
|
}
|
|
90
98
|
}
|
|
@@ -30,9 +30,11 @@ button[role=link] {
|
|
|
30
30
|
color: var(--anchor-hover-color, var(--anchor-color, currentColor));
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
&:focus,
|
|
33
34
|
&:focus-visible {
|
|
34
|
-
|
|
35
|
-
outline
|
|
35
|
+
color: var(--anchor-focus-color, var(--anchor-hover-color, var(--anchor-color, currentColor)));
|
|
36
|
+
outline: var(--anchor-outline-size, var(--outline-size)) var(--anchor-outline-style, var(--outline-style)) var(--anchor-outline-color, color-mix(in srgb, currentColor, transparent var(--outline-opacity)));
|
|
37
|
+
outline-offset: var(--anchor-outline-offset, var(--outline-offset));
|
|
36
38
|
}
|
|
37
39
|
|
|
38
40
|
&:active,
|
|
@@ -195,4 +195,19 @@ select {
|
|
|
195
195
|
background-position: calc(100% - .125em) center;
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
form div {
|
|
202
|
+
&:has([aria-invalid=true]) {
|
|
203
|
+
[aria-live] {
|
|
204
|
+
color: var(--color-error);
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
&:has([aria-invalid=false]) {
|
|
209
|
+
[aria-live] {
|
|
210
|
+
color: var(--color-success);
|
|
211
|
+
}
|
|
212
|
+
}
|
|
198
213
|
}
|
package/scss/layouts/_grid.scss
CHANGED
|
@@ -13,26 +13,23 @@
|
|
|
13
13
|
|
|
14
14
|
.grid,
|
|
15
15
|
.flex-grid {
|
|
16
|
-
|
|
17
16
|
gap: var(--grid-gap-block, 1rem) var(--grid-gap-inline, 1rem);
|
|
18
17
|
justify-content: var(--grid-justify, start);
|
|
19
18
|
align-items: var(--grid-align, initial);
|
|
20
|
-
|
|
21
19
|
}
|
|
22
20
|
|
|
23
21
|
.grid {
|
|
24
22
|
display: grid;
|
|
25
|
-
grid-template-columns: repeat(var(--grid-columns, 12), minmax(0
|
|
23
|
+
grid-template-columns: repeat(var(--grid-columns, 12), minmax(min(var(--grid-column-size, 0%), 100%), 1fr));
|
|
26
24
|
}
|
|
27
25
|
|
|
28
26
|
.flex-grid {
|
|
29
|
-
|
|
30
27
|
display: flex;
|
|
31
28
|
flex-wrap: wrap;
|
|
32
29
|
|
|
33
30
|
> * {
|
|
34
31
|
$column: var(--grid-columns, 12);
|
|
35
|
-
flex-basis: calc((1
|
|
32
|
+
flex-basis: calc((1 * 100% - (($column - 1) * var(--grid-gap-inline, 1rem))) / $column);
|
|
36
33
|
flex-grow: var(--grid-grow, 0);
|
|
37
34
|
}
|
|
38
35
|
|
package/scss/themes/_root.scss
CHANGED
|
@@ -38,11 +38,11 @@
|
|
|
38
38
|
--border-style: solid;
|
|
39
39
|
--border-radius: .25rem;
|
|
40
40
|
|
|
41
|
-
//
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
41
|
+
// Outline (:focus)
|
|
42
|
+
--outline-size: 3px;
|
|
43
|
+
--outline-style: solid;
|
|
44
|
+
--outline-offset: 0;
|
|
45
|
+
--outline-opacity: 50%;
|
|
46
46
|
|
|
47
47
|
// Hover (color-mix)
|
|
48
48
|
--hover-color: black;
|
|
Binary file
|