@natachah/vanilla-frontend 0.2.9 → 0.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.
Files changed (52) hide show
  1. package/docs/main-demo.js +2 -0
  2. package/docs/main.js +1 -1
  3. package/docs/pages/base/layout.html +131 -0
  4. package/docs/pages/components/button.html +9 -10
  5. package/docs/pages/components/disclosure.html +0 -139
  6. package/docs/pages/components/loading.html +4 -4
  7. package/docs/pages/{components → customs}/badge.html +4 -8
  8. package/docs/pages/{components → customs}/breadcrumb.html +1 -1
  9. package/docs/pages/{components → customs}/card.html +4 -8
  10. package/docs/pages/{components → customs}/list.html +0 -65
  11. package/docs/pages/{components → customs}/slider.html +14 -29
  12. package/docs/pages/demo/layout.html +85 -0
  13. package/docs/pages/javascript/comfort.html +14 -2
  14. package/docs/pages/quick-start/customization.html +115 -87
  15. package/docs/pages/quick-start/mixins.html +22 -54
  16. package/docs/src/js/demo.js +7 -1
  17. package/docs/src/js/doc-layout.js +13 -9
  18. package/docs/vite.config.mjs +1 -1
  19. package/js/_comfort.js +17 -0
  20. package/js/tests/autofill.test.js +8 -0
  21. package/js/tests/comfort.test.js +32 -2
  22. package/js/tests/consent.test.js +4 -0
  23. package/js/tests/dialog.test.js +4 -1
  24. package/js/tests/dropdown.test.js +4 -0
  25. package/js/tests/form-helper.test.js +2 -2
  26. package/js/tests/scroll.test.js +21 -6
  27. package/js/tests/slider.test.js +19 -2
  28. package/js/tests/sortable.test.js +8 -0
  29. package/js/tests/tabpanel.test.js +4 -0
  30. package/js/tests/toggle.test.js +4 -0
  31. package/js/tests/trap.test.js +4 -0
  32. package/js/tests/tree.test.js +10 -10
  33. package/natachah-vanilla-frontend-0.4.0.tgz +0 -0
  34. package/package.json +7 -7
  35. package/scss/abstracts/_mixins.scss +58 -87
  36. package/scss/base/_layout.scss +61 -0
  37. package/scss/base/_typography.scss +2 -2
  38. package/scss/base/index.scss +1 -0
  39. package/scss/components/_badge.scss +12 -0
  40. package/scss/components/_button.scss +12 -0
  41. package/scss/components/_card.scss +12 -0
  42. package/scss/components/_disclosure.scss +0 -3
  43. package/scss/components/index.scss +3 -3
  44. package/scss/themes/_root.scss +43 -4
  45. package/scss/vanilla-frontend-doc.scss +34 -0
  46. package/vitest.config.js +2 -1
  47. package/docs/pages/test.html +0 -15
  48. package/natachah-vanilla-frontend-0.2.9.tgz +0 -0
  49. package/scss/abstracts/_options.scss +0 -44
  50. /package/docs/pages/{components → customs}/drawer.html +0 -0
  51. /package/docs/pages/{components → customs}/dropdown.html +0 -0
  52. /package/docs/pages/{components → customs}/grid.html +0 -0
package/docs/main-demo.js ADDED
@@ -0,0 +1,2 @@
1
+ // Import main css
2
+ import './../scss/vanilla-frontend.scss'
package/docs/main.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // Import main css
2
- import './../scss/vanilla-frontend.scss'
2
+ import './../scss/vanilla-frontend-doc.scss'
3
3
 
4
4
  // HERE go the code
5
5
  import './src/js/doc-layout.js'
package/docs/pages/base/layout.html ADDED
@@ -0,0 +1,131 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Documentations: Layout > Container</title>
8
+ </head>
9
+
10
+ <body data-preload>
11
+ <doc-layout>
12
+
13
+ <h1>Layout</h1>
14
+
15
+ <p>The framework uses a CSS grid to create the default page layout on the body. It features default CSS variables that you can customize, such as the maximum content width, which is set at <b>1280px</b>. Since it uses a grid, it includes gaps and columns.</p>
16
+
17
+ <p>Also, the grid template as two content zone available as <code>full</code> and <code>content</code> that you can use as you wish.</p>
18
+
19
+ <p>But as every website can be different, these value can be changed !</p>
20
+
21
+ <p><a href="/pages/demo/layout.html">Check the demo page !</a></p>
22
+
23
+ <table>
24
+ <caption>
25
+ <h2>Device Breakpoint Viewport</h2>
26
+ </caption>
27
+ <thead>
28
+ <tr>
29
+ <th>Device</th>
30
+ <th>Breakpoint</th>
31
+ <th>Columns</th>
32
+ <th>Vieport</th>
33
+ </tr>
34
+ </thead>
35
+ <tbody>
36
+ <tr>
37
+ <td>Mobile</td>
38
+ <td>
39
+ &lt; 720
40
+ </td>
41
+ <td>1</td>
42
+ <td>100%</td>
43
+ </tr>
44
+ <tr>
45
+ <td>Tablet</td>
46
+ <td>&lt; 1024px</td>
47
+ <td>6</td>
48
+ <td>100%</td>
49
+ </tr>
50
+ <tr>
51
+ <td>Laptop</td>
52
+ <td>&lt; 1440px</td>
53
+ <td>12</td>
54
+ <td>1280px</td>
55
+ </tr>
56
+ <tr>
57
+ <td>Desktop</td>
58
+ <td>&gt; 1440px</td>
59
+ <td>12</td>
60
+ <td>1280px</td>
61
+ </tr>
62
+ </tbody>
63
+ </table>
64
+
65
+ <div class="code-group">
66
+ <div role="tablist">
67
+ <button role="tab" aria-controls="html">HTML</button>
68
+ <button role="tab" aria-controls="scss">SCSS</button>
69
+ <button role="tab" aria-controls="css">CSS</button>
70
+ </div>
71
+ <doc-code id="html" data-type="html" role="tabpanel">
72
+ <!--
73
+ <body data-preload>
74
+ <header></header>
75
+ <main></main>
76
+ <footer></footer>
77
+ </body>
78
+ -->
79
+ </doc-code>
80
+ <doc-code id="scss" data-type="scss" role="tabpanel">
81
+ @use '@natachah/vanilla-frontend/scss/base/layout';
82
+ </doc-code>
83
+ <doc-code id="css" data-type="css" role="tabpanel">
84
+ --layout-width
85
+ --layout-gap-block
86
+ --layout-gap-inline
87
+ --layout-columns
88
+ --subgrid-gap-block
89
+ --subgrid-gap-inline
90
+ </doc-code>
91
+ </div>
92
+
93
+ <blockquote class="info">
94
+ <p>The <code>--subgrid-gap-*</code> are used for the direct child as header, main and footer. It set by default the gap block at 0 and take the layout inline gap.</p>
95
+ </blockquote>
96
+
97
+ <h2>Container</h2>
98
+
99
+ <p>The default layout include a <code>.container</code> and a <code>.container-full</code>.</p>
100
+
101
+ <p>The classic container is centered into the page layout and the full container take the full length of the page.<br>It's perfect if you need to set a background color to a section.</p>
102
+
103
+ <doc-code id="html" data-type="html" role="tabpanel">
104
+ <section class="container"></section>
105
+ <section class="container-full"></section>
106
+ </doc-code>
107
+
108
+ <h2>Subgrid</h2>
109
+
110
+ <p>You can re-use the layout grid into a container with the class <code>.subgrid</code>. Then you can use the <code>grid-column</code> CSS property to manage the space.</p>
111
+
112
+ <div class="code-group">
113
+ <div role="tablist">
114
+ <button role="tab" aria-controls="html">HTML</button>
115
+ <button role="tab" aria-controls="css">CSS</button>
116
+ </div>
117
+ <doc-code id="html" data-type="html" role="tabpanel">
118
+ <section class="container subgrid"></section>
119
+ <section class="container-full subgrid"></section>
120
+ </doc-code>
121
+ <doc-code id="css" data-type="css" role="tabpanel">
122
+ --subgrid-gap-block
123
+ --subgrid-gap-inline
124
+ </doc-code>
125
+ </div>
126
+
127
+ </doc-layout>
128
+ <script type="module" src="/main.js"></script>
129
+ </body>
130
+
131
+ </html>
package/docs/pages/components/button.html CHANGED
@@ -113,7 +113,7 @@
113
113
  <div class="code-group">
114
114
  <div role="tablist">
115
115
  <button role="tab" aria-controls="html">HTML</button>
116
- <button role="tab" aria-controls="scss">setting.scss</button>
116
+ <button role="tab" aria-controls="scss">SCSS</button>
117
117
  </div>
118
118
  <doc-code id="html" data-type="html" role="tabpanel">
119
119
  <button class="outline">Button</button>
@@ -121,9 +121,7 @@
121
121
  <button class="outline" aria-pressed="true">Active</button>
122
122
  </doc-code>
123
123
  <doc-code id="scss" data-type="scss" role="tabpanel">
124
- $outline-variations: (
125
- button
126
- );
124
+ @use "@natachah/vanilla-frontend/scss/components/button" with ($outline: true);
127
125
  </doc-code>
128
126
  </div>
129
127
 
@@ -132,24 +130,25 @@
132
130
  <p>You can create a color variation by adding the class <code>.{COLOR}</code>.</p>
133
131
 
134
132
  <doc-demo>
135
- <button class="primary">Primary</button> <button class="outline primary">Outline</button> <button class="primary" disabled>Disabled</button> <button class="primary" aria-pressed="true">Active</button>
133
+ <button class="primary">Primary</button> <button class="primary" disabled>Disabled</button> <button class="primary" aria-pressed="true">Active</button>
134
+ <button class="primary outline">Primary</button> <button class="primary outline" disabled>Disabled</button> <button class="primary outline" aria-pressed="true">Active</button>
136
135
  </doc-demo>
137
136
 
138
137
  <div class="code-group">
139
138
  <div role="tablist">
140
139
  <button role="tab" aria-controls="html">HTML</button>
141
- <button role="tab" aria-controls="scss">setting.scss</button>
140
+ <button role="tab" aria-controls="scss">SCSS</button>
142
141
  </div>
143
142
  <doc-code id="html" data-type="html" role="tabpanel">
144
143
  <button class="primary">Primary</button>
145
- <button class="outline primary">Outline</button>
146
144
  <button class="primary" disabled>Disabled</button>
147
145
  <button class="primary" aria-pressed="true">Active</button>
146
+ <button class="primary outline">Primary</button>
147
+ <button class="primary outline" disabled>Disabled</button>
148
+ <button class="primary outline" aria-pressed="true">Active</button>
148
149
  </doc-code>
149
150
  <doc-code id="scss" data-type="scss" role="tabpanel">
150
- $color-variations: (
151
- button: (primary)
152
- );
151
+ @use "@natachah/vanilla-frontend/scss/components/button" with ($colors: ('primary'),$outline: true);
153
152
  </doc-code>
154
153
  </div>
155
154
 
package/docs/pages/components/disclosure.html CHANGED
@@ -97,145 +97,6 @@
97
97
 
98
98
  <h2>Variants</h2>
99
99
 
100
- <h3>Outline</h3>
101
-
102
- <p>You can create an outline variation by adding the class <code>.outline</code>.</p>
103
-
104
- <doc-demo>
105
- <details>
106
- <summary class="outline">
107
- Some disclosure
108
- </summary>
109
- <div>
110
- <p>
111
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam
112
- reprehenderit ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam
113
- voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
114
- </p>
115
- </div>
116
- </details>
117
- </doc-demo>
118
-
119
- <div class="code-group">
120
- <div role="tablist">
121
- <button role="tab" aria-controls="html">HTML</button>
122
- <button role="tab" aria-controls="scss">setting.scss</button>
123
- </div>
124
- <doc-code id="html" data-type="html" role="tabpanel">
125
- <details>
126
- <summary class="outline">
127
- Some disclosure
128
- </summary>
129
- <div>
130
- ...
131
- </div>
132
- </details>
133
- </doc-code>
134
- <doc-code id="scss" data-type="scss" role="tabpanel">
135
- $outline-variations: (
136
- disclosure
137
- );
138
- </doc-code>
139
- </div>
140
-
141
- <blockquote class="todo">
142
- <p>This feature must be optimize...</p>
143
- </blockquote>
144
-
145
- <h3>Color</h3>
146
- <p>You can create a color variation by adding the class <code>.{COLOR}</code>.</p>
147
- <p>The variation can be applied on:</p>
148
- <ul>
149
- <li>The full component on the<code>&lt;details&gt;</code></li>
150
- <li>Only the button, on the <code>&lt;summary&gt;</code></li>
151
- <li>Only the content, on the <code>&lt;div&gt;</code></li>
152
- </ul>
153
-
154
- <doc-demo>
155
- <details class="primary">
156
- <summary>
157
- Some disclosure FULL primary
158
- </summary>
159
- <div>
160
- <p>
161
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam
162
- reprehenderit ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam
163
- voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
164
- </p>
165
- </div>
166
- </details>
167
-
168
- <details style="margin-top:1rem">
169
- <summary class="primary">
170
- Some disclosure with ONLY summary as primary
171
- </summary>
172
- <div>
173
- <p>
174
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam
175
- reprehenderit ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam
176
- voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
177
- </p>
178
- </div>
179
- </details>
180
-
181
- <details style="margin-top:1rem">
182
- <summary>
183
- Some disclosure with ONLY content as primary
184
- </summary>
185
- <div class="primary">
186
- <p>
187
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam
188
- reprehenderit ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam
189
- voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
190
- </p>
191
- </div>
192
- </details>
193
- </doc-demo>
194
-
195
- <div class="code-group">
196
- <div role="tablist">
197
- <button role="tab" aria-controls="html">HTML</button>
198
- <button role="tab" aria-controls="scss">setting.scss</button>
199
- </div>
200
- <doc-code id="html" data-type="html" role="tabpanel">
201
- <details class="primary">
202
- <summary>
203
- Some disclosure FULL primary
204
- </summary>
205
- <div>
206
- ...
207
- </div>
208
- </details>
209
-
210
- <details>
211
- <summary class="primary">
212
- Some disclosure with ONLY summary as primary
213
- </summary>
214
- <div>
215
- ...
216
- </div>
217
- </details>
218
-
219
- <details>
220
- <summary>
221
- Some disclosure with ONLY content as primary
222
- </summary>
223
- <div class="primary">
224
- ...
225
- </div>
226
- </details>
227
- </doc-code>
228
- <doc-code id="scss" data-type="scss" role="tabpanel">
229
- $color-variations: (
230
- disclosure: (primary)
231
- );
232
- </doc-code>
233
- </div>
234
-
235
- <blockquote class="todo">
236
- <p>This feature must be optimize...</p>
237
- </blockquote>
238
-
239
100
  <h3>Group</h3>
240
101
 
241
102
  <p>You can group some disclosure by putting them in a <code>&lt;div&gt;</code> with the class <code>.accordion</code>.</p>
package/docs/pages/components/loading.html CHANGED
@@ -41,14 +41,14 @@
41
41
  <doc-demo>
42
42
  <button aria-busy="true"></button>
43
43
  <button class="outline" aria-busy="true">Button</button>
44
- <button class="error" aria-busy="true">Button</button>
45
- <button class="error outline" aria-busy="true">Button</button>
44
+ <button class="primary" aria-busy="true">Button</button>
45
+ <button class="primary outline" aria-busy="true">Button</button>
46
46
  </doc-demo>
47
47
  <doc-code>
48
48
  <button aria-busy="true"></button>
49
49
  <button class="outline" aria-busy="true">Button</button>
50
- <button class="error" aria-busy="true">Button</button>
51
- <button class="error outline" aria-busy="true">Button</button>
50
+ <button class="primary" aria-busy="true">Button</button>
51
+ <button class="primary outline" aria-busy="true">Button</button>
52
52
  </doc-code>
53
53
 
54
54
  </doc-layout>
package/docs/pages/{components → customs}/badge.html RENAMED
@@ -83,15 +83,13 @@
83
83
  <div class="code-group">
84
84
  <div role="tablist">
85
85
  <button role="tab" aria-controls="html">HTML</button>
86
- <button role="tab" aria-controls="scss">setting.scss</button>
86
+ <button role="tab" aria-controls="scss">SCSS</button>
87
87
  </div>
88
88
  <doc-code id="html" data-type="html" role="tabpanel">
89
89
  <span class="badge outline">Badge</span>
90
90
  </doc-code>
91
91
  <doc-code id="scss" data-type="scss" role="tabpanel">
92
- $outline-variations: (
93
- badge
94
- );
92
+ @use "@natachah/vanilla-frontend/scss/components/badge" with ($outline: true);
95
93
  </doc-code>
96
94
  </div>
97
95
 
@@ -106,16 +104,14 @@
106
104
  <div class="code-group">
107
105
  <div role="tablist">
108
106
  <button role="tab" aria-controls="html">HTML</button>
109
- <button role="tab" aria-controls="scss">setting.scss</button>
107
+ <button role="tab" aria-controls="scss">SCSS</button>
110
108
  </div>
111
109
  <doc-code id="html" data-type="html" role="tabpanel">
112
110
  <span class="badge primary">Primary</span>
113
111
  <span class="badge outline primary">Outline</span>
114
112
  </doc-code>
115
113
  <doc-code id="scss" data-type="scss" role="tabpanel">
116
- $color-variations: (
117
- badge: (primary)
118
- );
114
+ @use "@natachah/vanilla-frontend/scss/components/badge" with ($colors: ('primary'), $outline: true);
119
115
  </doc-code>
120
116
  </div>
121
117
 
package/docs/pages/{components → customs}/breadcrumb.html RENAMED
@@ -10,7 +10,7 @@
10
10
  <body data-preload>
11
11
  <doc-layout>
12
12
 
13
- <h2>Breadcrumb</h2>
13
+ <h1>Breadcrumb</h1>
14
14
  <p>To create a breadcrumb navigation, always use <code>&lt;ol&gt;</code> with a class <code>.breadcrumb</code> inside a <code>&lt;nav&gt;</code> tag.</p>
15
15
  <p>The breadcrumb will automatically be distributed horizontally.</p>
16
16
  <doc-demo>
package/docs/pages/{components → customs}/card.html RENAMED
@@ -145,15 +145,13 @@
145
145
  <div class="code-group">
146
146
  <div role="tablist">
147
147
  <button role="tab" aria-controls="html">HTML</button>
148
- <button role="tab" aria-controls="scss">setting.scss</button>
148
+ <button role="tab" aria-controls="scss">SCSS</button>
149
149
  </div>
150
150
  <doc-code id="html" data-type="html" role="tabpanel">
151
151
  <div class="card outline">Hello there !</div>
152
152
  </doc-code>
153
153
  <doc-code id="scss" data-type="scss" role="tabpanel">
154
- $outline-variations: (
155
- card
156
- );
154
+ @use "@natachah/vanilla-frontend/scss/components/card" with ($outline: true);
157
155
  </doc-code>
158
156
  </div>
159
157
 
@@ -169,16 +167,14 @@
169
167
  <div class="code-group">
170
168
  <div role="tablist">
171
169
  <button role="tab" aria-controls="html">HTML</button>
172
- <button role="tab" aria-controls="scss">setting.scss</button>
170
+ <button role="tab" aria-controls="scss">SCSS</button>
173
171
  </div>
174
172
  <doc-code id="html" data-type="html" role="tabpanel">
175
173
  <div class="card primary">Hello there !</div>
176
174
  <div class="card outline primary">Hello there !</div>
177
175
  </doc-code>
178
176
  <doc-code id="scss" data-type="scss" role="tabpanel">
179
- $color-variations: (
180
- card: (primary)
181
- );
177
+ @use "@natachah/vanilla-frontend/scss/components/card" with ($colors: ('primary'),$outline: true);
182
178
  </doc-code>
183
179
  </div>
184
180
 
package/docs/pages/{components → customs}/list.html RENAMED
@@ -105,71 +105,6 @@
105
105
  </doc-code>
106
106
  </div>
107
107
 
108
- <h2>Variants</h2>
109
- <h3>Outline</h3>
110
- <p>You can create an outline variation by adding the class <code>.outline</code> on each children.</p>
111
- <doc-demo>
112
- <div class="list">
113
- <div class="outline">List A</div>
114
- <div><button class="outline">List B</button></div>
115
- <div><a role="button" class="outline" href="#">List C</a></div>
116
- </div>
117
- </doc-demo>
118
-
119
- <div class="code-group">
120
- <div role="tablist">
121
- <button role="tab" aria-controls="html">HTML</button>
122
- <button role="tab" aria-controls="scss">setting.scss</button>
123
- </div>
124
- <doc-code id="html" data-type="html" role="tabpanel">
125
- <div class="list">
126
- <div class="outline">List A</div>
127
- <div><button class="outline">List B</button></div>
128
- <div><a role="button" class="outline" href="#">List C</a></div>
129
- </div>
130
- </doc-code>
131
- <doc-code id="scss" data-type="scss" role="tabpanel">
132
- $outline-variations: (
133
- list
134
- );
135
- </doc-code>
136
- </div>
137
-
138
- <h3>Color</h3>
139
- <p>You can create a color variation by adding the class <code>.{COLOR}</code> on each children.</p>
140
- <doc-demo>
141
- <div class="list">
142
- <div class="primary">List A</div>
143
- <div class="primary outline">List B</div>
144
- <div><button class="primary">List C</button></div>
145
- <div><button class="primary outline">List D</button></div>
146
- <div><a role="button" class="primary" href="#">List E</a></div>
147
- <div><a role="button" class="primary outline" href="#">List F</a></div>
148
- </div>
149
- </doc-demo>
150
-
151
- <div class="code-group">
152
- <div role="tablist">
153
- <button role="tab" aria-controls="html">HTML</button>
154
- <button role="tab" aria-controls="scss">setting.scss</button>
155
- </div>
156
- <doc-code id="html" data-type="html" role="tabpanel">
157
- <div class="list">
158
- <div class="primary">List A</div>
159
- <div class="primary outline">List B</div>
160
- <div><button class="primary">List C</button></div>
161
- <div><button class="primary outline">List D</button></div>
162
- <div><a role="button" class="primary" href="#">List E</a></div>
163
- <div><a role="button" class="primary outline" href="#">List F</a></div>
164
- </div>
165
- </doc-code>
166
- <doc-code id="scss" data-type="scss" role="tabpanel">
167
- $color-variations: (
168
- list: (primary)
169
- );
170
- </doc-code>
171
- </div>
172
-
173
108
  </doc-layout>
174
109
  <script type="module" src="/main.js"></script>
175
110
  </body>
package/docs/pages/{components → customs}/slider.html RENAMED
@@ -15,21 +15,15 @@
15
15
  <p>Each slide must be a <code>&lt;div&gt;</code> with <code>role=&quot;tabpanel&quot;</code> and <code>aria-hidden=&quot;true&quot;</code> attributes.</p>
16
16
  <doc-demo>
17
17
  <div id="sliderFull" class="slider demo-slider">
18
- <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
19
- <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
20
- <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
21
- <div id="slide4" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=four" alt="Image 4"></div>
22
- <div id="slide5" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=five" alt="Image 5"></div>
23
- <div id="slide6" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=six" alt="Image 6"></div>
18
+ <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/1/300" alt="Image 1"></div>
19
+ <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/2/300" alt="Image 2"></div>
20
+ <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/3/300" alt="Image 3"></div>
24
21
  </div>
25
22
  <button aria-controls="sliderFull" data-slider-prev>previous</button>
26
23
  <div aria-controls="sliderFull" role="tablist">
27
24
  <button role="tab" aria-controls="slide1" aria-selected="true">1</button>
28
25
  <button role="tab" aria-controls="slide2" aria-selected="false">2</button>
29
26
  <button role="tab" aria-controls="slide3" aria-selected="false">3</button>
30
- <button role="tab" aria-controls="slide4" aria-selected="false">4</button>
31
- <button role="tab" aria-controls="slide5" aria-selected="false">5</button>
32
- <button role="tab" aria-controls="slide6" aria-selected="false">6</button>
33
27
  </div>
34
28
  <button aria-controls="sliderFull" data-slider-next>next</button>
35
29
  </doc-demo>
@@ -42,21 +36,15 @@
42
36
  </div>
43
37
  <doc-code id="html" data-type="html" role="tabpanel" aria-hidden="false">
44
38
  <div id="slider" class="slider">
45
- <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
46
- <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
47
- <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
48
- <div id="slide4" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=four" alt="Image 4"></div>
49
- <div id="slide5" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=five" alt="Image 5"></div>
50
- <div id="slide6" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=six" alt="Image 6"></div>
39
+ <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/1/300" alt="Image 1"></div>
40
+ <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/2/300" alt="Image 2"></div>
41
+ <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/3/300" alt="Image 3"></div>
51
42
  </div>
52
43
  <button aria-controls="slider" data-slider-prev>previous</button>
53
44
  <div aria-controls="slider" role="tablist">
54
45
  <button role="tab" aria-controls="slide1" aria-selected="true">1</button>
55
46
  <button role="tab" aria-controls="slide2" aria-selected="false">2</button>
56
47
  <button role="tab" aria-controls="slide3" aria-selected="false">3</button>
57
- <button role="tab" aria-controls="slide4" aria-selected="false">4</button>
58
- <button role="tab" aria-controls="slide5" aria-selected="false">5</button>
59
- <button role="tab" aria-controls="slide6" aria-selected="false">6</button>
60
48
  </div>
61
49
  <button aria-controls="slider" data-slider-next>next</button>
62
50
  </doc-code>
@@ -83,9 +71,6 @@
83
71
  <button role="tab" aria-controls="slide1" aria-selected="true">1</button>
84
72
  <button role="tab" aria-controls="slide2" aria-selected="false">2</button>
85
73
  <button role="tab" aria-controls="slide3" aria-selected="false">3</button>
86
- <button role="tab" aria-controls="slide4" aria-selected="false">4</button>
87
- <button role="tab" aria-controls="slide5" aria-selected="false">5</button>
88
- <button role="tab" aria-controls="slide6" aria-selected="false">6</button>
89
74
  </div>
90
75
  </doc-code>
91
76
 
@@ -100,10 +85,10 @@
100
85
  <h3>Fade effect</h3>
101
86
  <p>You can change the CSS and JS to create a sort of fade effect, but it's not optimal.</p>
102
87
  <doc-demo>
103
- <div id="sliderFade" class="slider slider-fade-demo" style="background-image: url(https://fakeimg.pl/760x506/?text=one);">
104
- <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
105
- <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
106
- <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
88
+ <div id="sliderFade" class="slider slider-fade-demo" style="background-image: url(https://picsum.photos/id/1/300);">
89
+ <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/1/300" alt="Image 1"></div>
90
+ <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/2/300" alt="Image 2"></div>
91
+ <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/3/300" alt="Image 3"></div>
107
92
  </div>
108
93
  </doc-demo>
109
94
  <div class="code-group">
@@ -113,10 +98,10 @@
113
98
  <button role="tab" aria-controls="js">JS</button>
114
99
  </div>
115
100
  <doc-code id="html" data-type="html" role="tabpanel">
116
- <div id="sliderFade" class="slider slider-fade-demo" style="background-image: url(https://fakeimg.pl/760x506/?text=one);">
117
- <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
118
- <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
119
- <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
101
+ <div id="sliderFade" class="slider slider-fade-demo" style="background-image: url(https://picsum.photos/id/1/300);">
102
+ <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/1/300" alt="Image 1"></div>
103
+ <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/2/300" alt="Image 2"></div>
104
+ <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/3/300" alt="Image 3"></div>
120
105
  </div>
121
106
  </doc-code>
122
107
  <doc-code id="css" data-type="css" role="tabpanel">