@vandeurenglenn/lite-elements 0.3.50 → 0.3.51

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 (81) hide show
  1. package/exports/banner.js +36 -36
  2. package/exports/bundle/button.js +6 -1
  3. package/exports/bundle/index.html +590 -590
  4. package/exports/bundle/themes/default/colors.module.css +180 -180
  5. package/exports/bundle/themes/default/missing/motion.css +3 -3
  6. package/exports/bundle/themes/default/missing/shape.css +12 -12
  7. package/exports/bundle/themes/default/missing/theme.dark.css +4 -4
  8. package/exports/bundle/themes/default/missing/theme.light.css +4 -4
  9. package/exports/bundle/themes/default/missing/tokens.css +8 -8
  10. package/exports/bundle/themes/default/theme.css +10 -10
  11. package/exports/bundle/themes/default/theme.dark.css +33 -33
  12. package/exports/bundle/themes/default/theme.light.css +33 -33
  13. package/exports/bundle/themes/default/tokens.css +256 -256
  14. package/exports/bundle/themes/default/typography.module.css +150 -150
  15. package/exports/bundle/upload-image.js +49 -45
  16. package/exports/button.js +148 -143
  17. package/exports/card.js +139 -139
  18. package/exports/code.js +34 -34
  19. package/exports/demo-icons.js +15 -15
  20. package/exports/demo-shell.js +539 -539
  21. package/exports/demo.js +456 -456
  22. package/exports/dialog.js +148 -148
  23. package/exports/divider.js +21 -21
  24. package/exports/drawer-button.js +13 -13
  25. package/exports/drawer-item.js +38 -38
  26. package/exports/drawer-layout.js +95 -95
  27. package/exports/drawer.js +7 -7
  28. package/exports/dropdown-menu.js +58 -58
  29. package/exports/dropdown.js +25 -25
  30. package/exports/elevation.js +50 -50
  31. package/exports/fab.js +145 -145
  32. package/exports/icon-button.js +12 -12
  33. package/exports/icon-set.js +4 -4
  34. package/exports/icon.js +15 -15
  35. package/exports/input.js +5 -5
  36. package/exports/list-item.js +42 -42
  37. package/exports/menu.js +12 -12
  38. package/exports/minute-field.js +4 -4
  39. package/exports/mixins/scroll-mixin.d.ts +1 -1
  40. package/exports/notification.js +34 -34
  41. package/exports/notifications.js +65 -65
  42. package/exports/pages.js +42 -42
  43. package/exports/pane.js +18 -18
  44. package/exports/rail.js +57 -57
  45. package/exports/root.js +7 -7
  46. package/exports/section/section.d.ts +1 -1
  47. package/exports/section.js +10 -10
  48. package/exports/section2.js +24 -24
  49. package/exports/selector.js +30 -30
  50. package/exports/summary-mirror.js +19 -19
  51. package/exports/summary.js +24 -24
  52. package/exports/supporting-pane.js +46 -46
  53. package/exports/tab.js +21 -21
  54. package/exports/tabs.js +50 -50
  55. package/exports/text-field.js +9 -9
  56. package/exports/theme.js +8 -8
  57. package/exports/themes/default/colors.module.css +180 -180
  58. package/exports/themes/default/missing/motion.css +3 -3
  59. package/exports/themes/default/missing/shape.css +12 -12
  60. package/exports/themes/default/missing/theme.dark.css +4 -4
  61. package/exports/themes/default/missing/theme.light.css +4 -4
  62. package/exports/themes/default/missing/tokens.css +8 -8
  63. package/exports/themes/default/theme.css +10 -10
  64. package/exports/themes/default/theme.dark.css +33 -33
  65. package/exports/themes/default/theme.light.css +33 -33
  66. package/exports/themes/default/tokens.css +256 -256
  67. package/exports/themes/default/typography.module.css +150 -150
  68. package/exports/time-picker.js +20 -20
  69. package/exports/toggle-button.js +3 -3
  70. package/exports/toggle.js +4 -4
  71. package/exports/top-app-bar.js +20 -20
  72. package/exports/typography.js +155 -155
  73. package/exports/upload-file.js +8 -8
  74. package/exports/upload-image.js +200 -200
  75. package/package.json +20 -28
  76. package/exports/bundle/simple-hash-router.js +0 -1
  77. package/exports/bundle/types2.js +0 -1
  78. package/exports/router/simple-hash-router.d.ts +0 -34
  79. package/exports/router/types.d.ts +0 -45
  80. package/exports/simple-hash-router.js +0 -111
  81. package/exports/types2.js +0 -1
package/exports/demo.js CHANGED
@@ -32,10 +32,10 @@ let DemoShell = (() => {
32
32
  get pages() { return this.#pages_accessor_storage; }
33
33
  set pages(value) { this.#pages_accessor_storage = value; }
34
34
  static styles = [
35
- css `
36
- :host {
37
- display: block;
38
- }
35
+ css `
36
+ :host {
37
+ display: block;
38
+ }
39
39
  `
40
40
  ];
41
41
  async connectedCallback() {
@@ -56,458 +56,458 @@ let DemoShell = (() => {
56
56
  }
57
57
  }
58
58
  render() {
59
- return html `
60
- <custom-drawer-layout class="demo-container">
61
- <span slot="drawer-headline"> menu </span>
62
-
63
- <flex-column slot="drawer-content">
64
- <custom-selector attr-for-selected="route" default-selected="banner">
65
- <custom-drawer-item route="banner">banner</custom-drawer-item>
66
- <custom-drawer-item route="dialog">dialog</custom-drawer-item>
67
- <custom-drawer-item route="divider">divider</custom-drawer-item>
68
- <custom-drawer-item route="buttons">buttons</custom-drawer-item>
69
- <custom-drawer-item route="cards">cards</custom-drawer-item>
70
- <custom-drawer-item route="top-app-bar">top-app-bar</custom-drawer-item>
71
- <custom-drawer-item route="typography">typography</custom-drawer-item>
72
- <custom-drawer-item route="drawer">drawer</custom-drawer-item>
73
- <custom-drawer-item route="pane">pane</custom-drawer-item>
74
- <custom-drawer-item route="supporting-pane">supporting pane</custom-drawer-item>
75
- <custom-drawer-item route="tabs">tabs</custom-drawer-item>
76
- <custom-drawer-item route="menu">menu</custom-drawer-item>
77
- <custom-drawer-item route="dropdown-menu">dropdown-menu</custom-drawer-item>
78
- <custom-drawer-item route="list-item">list-item</custom-drawer-item>
79
- <custom-drawer-item route="toggle">toggle</custom-drawer-item>
80
- <custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
81
- </custom-selector>
82
- </flex-column>
83
-
84
- <span slot="top-app-bar-title">custom-elements</span>
85
-
86
- <flex-row slot="top-app-bar-end">
87
- <custom-theme-mode></custom-theme-mode>
88
- <custom-button>
89
- <custom-icon slot="icon">more_vert</custom-icon>
90
- </custom-button>
91
- </flex-row>
92
-
93
- <flex-column>
94
- <custom-pages attr-for-selected="route" default-selected="banner">
95
- <demo-section route="banner">
96
- <custom-banner>Banner</custom-banner>
97
- </demo-section>
98
-
99
- <demo-section route="divider">
100
- <custom-divider></custom-divider>
101
- <custom-divider inset></custom-divider>
102
- <custom-divider middle-inset></custom-divider>
103
- </demo-section>
104
-
105
- <demo-section route="cards">
106
- <custom-card type="filled">
107
- <span slot="headline">filled</span>
108
- <span slot="subline">subline</span>
109
- <p slot="supportingText">
110
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
111
- magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
112
- facilis et quasi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi
113
- eum aliquam enim, magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam
114
- praesentium veritatis facilis et quasi?
115
- </p>
116
- <flex-row slot="actions">
117
- <custom-button type="filled" label="YES"></custom-button>
118
- </flex-row>
119
- </custom-card>
120
-
121
- <custom-card type="elevated">
122
- <span slot="headline">elevated</span>
123
- <span slot="subline">subline</span>
124
- <p slot="supportingText">
125
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
126
- magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
127
- facilis et quasi?
128
- </p>
129
- <flex-row slot="actions">
130
- <custom-button type="elevated" label="YES"></custom-button>
131
- </flex-row>
132
- </custom-card>
133
-
134
- <custom-card type="outlined">
135
- <span slot="headline">outlined</span>
136
- <span slot="subline">subline</span>
137
- <p slot="supportingText">
138
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
139
- magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
140
- facilis et quasi?
141
- </p>
142
- <flex-row slot="actions">
143
- <custom-button type="outlined" label="YES"></custom-button>
144
- </flex-row>
145
- </custom-card>
146
-
147
- <custom-card type="tertiary">
148
- <img
149
- loading="lazy"
150
- slot="image"
151
- src="https://lh3.googleusercontent.com/9NBw6U14z6f-EAnwPqfcX-mIkxNdpK0IXvwiun9w84JkMcZfBT0bfRqn7QWdBVqnCYC5hsDEnGhSjbaWcgi1HT_Q6pCioSRTgMFODqZdAXw=s0"
152
- />
153
- <span slot="headline">tertiary</span>
154
- <span slot="subline">subline</span>
155
-
156
- <flex-row slot="actions">
157
- <custom-button type="tertiary" label="YES"></custom-button>
158
- </flex-row>
159
- </custom-card>
160
- </demo-section>
161
-
162
- <demo-section route="buttons">
163
- <custom-button type="text" label="text"></custom-button>
164
-
165
- <custom-button type="text" label="with icon">
166
- <span slot="icon">+</span>
167
- </custom-button>
168
-
169
- <custom-button type="filled" label="filled"></custom-button>
170
-
171
- <custom-button type="filled" label="with icon">
172
- <span slot="icon">+</span>
173
- </custom-button>
174
-
175
- <custom-button type="elevated" label="elevated"></custom-button>
176
-
177
- <custom-button type="elevated" label="with icon">
178
- <span slot="icon">+</span>
179
- </custom-button>
180
-
181
- <custom-button type="outlined" label="outlined"></custom-button>
182
-
183
- <custom-button type="outlined" label="with icon">
184
- <span slot="icon">+</span>
185
- </custom-button>
186
-
187
- <custom-button type="tonal" label="tonal"></custom-button>
188
-
189
- <custom-button type="tonal" label="with icon">
190
- <span slot="icon">+</span>
191
- </custom-button>
192
-
193
- <custom-button type="tertiary" label="tertiary"></custom-button>
194
-
195
- <custom-button type="tertiary" label="with icon">
196
- <span slot="icon">+</span>
197
- </custom-button>
198
- </demo-section>
199
-
200
- <demo-section route="top-app-bar">
201
- <custom-top-app-bar>
202
- <span slot="title">title</span>
203
- </custom-top-app-bar>
204
-
205
- <custom-top-app-bar type="small">
206
- <custom-icon-button slot="start" icon="menu"></custom-icon-button>
207
- <span slot="title">title</span>
208
- </custom-top-app-bar>
209
-
210
- <custom-top-app-bar type="medium">
211
- <custom-icon-button slot="start" icon="menu"></custom-icon-button>
212
- <span slot="title">title</span>
213
- </custom-top-app-bar>
214
-
215
- <custom-top-app-bar type="large">
216
- <custom-icon-button slot="start" icon="menu"></custom-icon-button>
217
- <span slot="title">title</span>
218
- </custom-top-app-bar>
219
- </demo-section>
220
-
221
- <demo-section route="typography">
222
- <custom-typography>
223
- <span>title</span>
224
- </custom-typography>
225
-
226
- <custom-typography size="medium">
227
- <span>title medium</span>
228
- </custom-typography>
229
-
230
- <custom-typography size="small">
231
- <span>title small</span>
232
- </custom-typography>
233
-
234
- <custom-typography type="body">
235
- <span>body</span>
236
- </custom-typography>
237
-
238
- <custom-typography type="body" size="medium">
239
- <span>body medium</span>
240
- </custom-typography>
241
-
242
- <custom-typography type="body" size="small">
243
- <span>body small</span>
244
- </custom-typography>
245
-
246
- <custom-typography type="label">
247
- <span>label</span>
248
- </custom-typography>
249
-
250
- <custom-typography type="label" size="medium">
251
- <span>label medium</span>
252
- </custom-typography>
253
-
254
- <custom-typography type="label" size="small">
255
- <span>label small</span>
256
- </custom-typography>
257
-
258
- <custom-typography type="headline">
259
- <span>headline</span>
260
- </custom-typography>
261
-
262
- <custom-typography type="headline" size="medium">
263
- <span>headline medium</span>
264
- </custom-typography>
265
-
266
- <custom-typography type="headline" size="small">
267
- <span>headline small</span>
268
- </custom-typography>
269
-
270
- <custom-typography type="display">
271
- <span>display</span>
272
- </custom-typography>
273
-
274
- <custom-typography type="display" size="medium">
275
- <span>display medium</span>
276
- </custom-typography>
277
-
278
- <custom-typography type="display" size="small">
279
- <span>display small</span>
280
- </custom-typography>
281
- </demo-section>
282
-
283
- <demo-section route="drawer">
284
- <custom-drawer open type="modal" id="demo-drawer">
285
- <span slot="content">
286
- <custom-drawer-item>home</custom-drawer-item>
287
- <custom-drawer-item>about</custom-drawer-item>
288
- </span>
289
- </custom-drawer>
290
-
291
- <custom-drawer-button id="demo-drawer"></custom-drawer-button>
292
-
293
- <custom-selector>
294
- <custom-drawer-item id="demo-drawer">drawer-item</custom-drawer-item>
295
- </custom-selector>
296
- </demo-section>
297
-
298
- <demo-section route="pane">
299
- <custom-pane open type="modal" id="demo-pane">
300
- <span slot="content">
301
- <custom-drawer-item>home</custom-drawer-item>
302
- <custom-drawer-item>about</custom-drawer-item>
303
- </span>
304
- </custom-pane>
305
-
306
- <custom-pane open type="modal" id="demo-pane" right>
307
- <span slot="content">
308
- <custom-drawer-item>home</custom-drawer-item>
309
- <custom-drawer-item>about</custom-drawer-item>
310
- </span>
311
- </custom-pane>
312
- </demo-section>
313
-
314
- <demo-section route="tabs">
315
- <custom-tabs>
316
- <custom-tab>home</custom-tab>
317
- <custom-tab>about</custom-tab>
318
- </custom-tabs>
319
- </demo-section>
320
-
321
- <demo-section route="dialog">
322
- <flex-container>
323
- <custom-button class="fullscreen-dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
324
- <custom-dialog fullscreen>
325
- <span slot="title">title</span>
326
- <p>
327
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
328
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
329
- dolorem corporis.
330
- </p>
331
- <p>
332
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
333
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
334
- dolorem corporis.
335
- </p>
336
- <p>
337
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
338
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
339
- dolorem corporis.
340
- </p>
341
- <p>
342
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
343
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
344
- dolorem corporis.
345
- </p>
346
- <p>
347
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
348
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
349
- dolorem corporis.
350
- </p>
351
- <p>
352
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
353
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
354
- dolorem corporis.
355
- </p>
356
- <flex-row slot="actions">
357
- <custom-button label="agree" action="agree">agree</custom-button>
358
- </flex-row>
359
- </custom-dialog>
360
-
361
- <script>
362
- const demoSection = document.querySelector('demo-section[route="dialog"]')
363
- const fullscreenDialog = demoSection.querySelector('custom-dialog[fullscreen]')
364
- demoSection.querySelector('.fullscreen-dialog').addEventListener('click', () => {
365
- fullscreenDialog.open = !fullscreenDialog.open
366
- })
367
- </script>
368
- </flex-container>
369
-
370
- <flex-container>
371
- <custom-button class="dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
372
- <custom-dialog class="dialog">
373
- <span slot="title">title</span>
374
- <p>
375
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
376
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
377
- dolorem corporis.
378
- </p>
379
-
380
- <flex-row slot="actions">
381
- <custom-button label="agree" action="agree">agree</custom-button>
382
- </flex-row>
383
- </custom-dialog>
384
-
385
- <script>
386
- const dialog = demoSection.querySelector('custom-dialog.dialog')
387
- demoSection.querySelector('.dialog').addEventListener('click', () => {
388
- dialog.open = !dialog.open
389
- })
390
- </script>
391
- </flex-container>
392
- </demo-section>
393
-
394
- <demo-section route="menu">
395
- <custom-menu>
396
- <custom-list-item type="menu">
397
- <custom-icon slot="start">info</custom-icon>
398
- item 1
399
- </custom-list-item>
400
-
401
- <custom-list-item type="menu">
402
- <custom-icon slot="start">info</custom-icon>
403
- item 2
404
- </custom-list-item>
405
-
406
- <custom-list-item type="menu">
407
- <custom-icon slot="start">info</custom-icon>
408
- item 3
409
- </custom-list-item>
410
- </custom-menu>
411
- </demo-section>
412
-
413
- <demo-section route="dropdown-menu">
414
- <custom-dropdown-menu>
415
- <custom-list-item type="menu">
416
- <custom-icon slot="start">info</custom-icon>
417
- item 1
418
- </custom-list-item>
419
-
420
- <custom-list-item type="menu">
421
- <custom-icon slot="start">info</custom-icon>
422
- item 2
423
- </custom-list-item>
424
-
425
- <custom-list-item type="menu">
426
- <custom-icon slot="start">info</custom-icon>
427
- item 3
428
- </custom-list-item>
429
- </custom-dropdown-menu>
430
-
431
- <flex-row>
432
- <flex-it></flex-it>
433
- <custom-dropdown-menu right>
434
- <custom-list-item type="menu">
435
- <custom-icon slot="start">info</custom-icon>
436
- item 1
437
- </custom-list-item>
438
-
439
- <custom-list-item type="menu">
440
- <custom-icon slot="start">info</custom-icon>
441
- item 2
442
- </custom-list-item>
443
-
444
- <custom-list-item type="menu">
445
- <custom-icon slot="start">info</custom-icon>
446
- item 3
447
- </custom-list-item>
448
- </custom-dropdown-menu>
449
- </flex-row>
450
-
451
- <custom-dropdown-menu bottom>
452
- <custom-list-item type="menu">
453
- <custom-icon slot="start">info</custom-icon>
454
- item 1
455
- </custom-list-item>
456
-
457
- <custom-list-item type="menu">
458
- <custom-icon slot="start">info</custom-icon>
459
- item 2
460
- </custom-list-item>
461
-
462
- <custom-list-item type="menu">
463
- <custom-icon slot="start">info</custom-icon>
464
- item 3
465
- </custom-list-item>
466
- </custom-dropdown-menu>
467
-
468
- <flex-row>
469
- <flex-it></flex-it>
470
- <custom-dropdown-menu bottom right>
471
- <custom-list-item type="menu">
472
- <custom-icon slot="start">info</custom-icon>
473
- item 1
474
- </custom-list-item>
475
-
476
- <custom-list-item type="menu">
477
- <custom-icon slot="start">info</custom-icon>
478
- item 2
479
- </custom-list-item>
480
-
481
- <custom-list-item type="menu">
482
- <custom-icon slot="start">info</custom-icon>
483
- item 3
484
- </custom-list-item>
485
- </custom-dropdown-menu>
486
- </flex-row>
487
- </demo-section>
488
-
489
- <demo-section route="list-item">
490
- <custom-list-item>
491
- <custom-icon slot="start">info</custom-icon>
492
- </custom-list-item>
493
- </demo-section>
494
- <demo-section route="toggle">
495
- <custom-toggle>
496
- <custom-icon>check_box</custom-icon>
497
- <custom-icon>check_box_outline_blank</custom-icon>
498
- <custom-icon>info</custom-icon>
499
- </custom-toggle>
500
- </demo-section>
501
-
502
- <demo-section route="toggle-button">
503
- <custom-toggle-button>
504
- <custom-icon>check_box</custom-icon>
505
- <custom-icon>check_box_outline_blank</custom-icon>
506
- </custom-toggle-button>
507
- </demo-section>
508
- </custom-pages>
509
- </flex-column>
510
- </custom-drawer-layout>
59
+ return html `
60
+ <custom-drawer-layout class="demo-container">
61
+ <span slot="drawer-headline"> menu </span>
62
+
63
+ <flex-column slot="drawer-content">
64
+ <custom-selector attr-for-selected="route" default-selected="banner">
65
+ <custom-drawer-item route="banner">banner</custom-drawer-item>
66
+ <custom-drawer-item route="dialog">dialog</custom-drawer-item>
67
+ <custom-drawer-item route="divider">divider</custom-drawer-item>
68
+ <custom-drawer-item route="buttons">buttons</custom-drawer-item>
69
+ <custom-drawer-item route="cards">cards</custom-drawer-item>
70
+ <custom-drawer-item route="top-app-bar">top-app-bar</custom-drawer-item>
71
+ <custom-drawer-item route="typography">typography</custom-drawer-item>
72
+ <custom-drawer-item route="drawer">drawer</custom-drawer-item>
73
+ <custom-drawer-item route="pane">pane</custom-drawer-item>
74
+ <custom-drawer-item route="supporting-pane">supporting pane</custom-drawer-item>
75
+ <custom-drawer-item route="tabs">tabs</custom-drawer-item>
76
+ <custom-drawer-item route="menu">menu</custom-drawer-item>
77
+ <custom-drawer-item route="dropdown-menu">dropdown-menu</custom-drawer-item>
78
+ <custom-drawer-item route="list-item">list-item</custom-drawer-item>
79
+ <custom-drawer-item route="toggle">toggle</custom-drawer-item>
80
+ <custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
81
+ </custom-selector>
82
+ </flex-column>
83
+
84
+ <span slot="top-app-bar-title">custom-elements</span>
85
+
86
+ <flex-row slot="top-app-bar-end">
87
+ <custom-theme-mode></custom-theme-mode>
88
+ <custom-button>
89
+ <custom-icon slot="icon">more_vert</custom-icon>
90
+ </custom-button>
91
+ </flex-row>
92
+
93
+ <flex-column>
94
+ <custom-pages attr-for-selected="route" default-selected="banner">
95
+ <demo-section route="banner">
96
+ <custom-banner>Banner</custom-banner>
97
+ </demo-section>
98
+
99
+ <demo-section route="divider">
100
+ <custom-divider></custom-divider>
101
+ <custom-divider inset></custom-divider>
102
+ <custom-divider middle-inset></custom-divider>
103
+ </demo-section>
104
+
105
+ <demo-section route="cards">
106
+ <custom-card type="filled">
107
+ <span slot="headline">filled</span>
108
+ <span slot="subline">subline</span>
109
+ <p slot="supportingText">
110
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
111
+ magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
112
+ facilis et quasi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi
113
+ eum aliquam enim, magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam
114
+ praesentium veritatis facilis et quasi?
115
+ </p>
116
+ <flex-row slot="actions">
117
+ <custom-button type="filled" label="YES"></custom-button>
118
+ </flex-row>
119
+ </custom-card>
120
+
121
+ <custom-card type="elevated">
122
+ <span slot="headline">elevated</span>
123
+ <span slot="subline">subline</span>
124
+ <p slot="supportingText">
125
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
126
+ magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
127
+ facilis et quasi?
128
+ </p>
129
+ <flex-row slot="actions">
130
+ <custom-button type="elevated" label="YES"></custom-button>
131
+ </flex-row>
132
+ </custom-card>
133
+
134
+ <custom-card type="outlined">
135
+ <span slot="headline">outlined</span>
136
+ <span slot="subline">subline</span>
137
+ <p slot="supportingText">
138
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
139
+ magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
140
+ facilis et quasi?
141
+ </p>
142
+ <flex-row slot="actions">
143
+ <custom-button type="outlined" label="YES"></custom-button>
144
+ </flex-row>
145
+ </custom-card>
146
+
147
+ <custom-card type="tertiary">
148
+ <img
149
+ loading="lazy"
150
+ slot="image"
151
+ src="https://lh3.googleusercontent.com/9NBw6U14z6f-EAnwPqfcX-mIkxNdpK0IXvwiun9w84JkMcZfBT0bfRqn7QWdBVqnCYC5hsDEnGhSjbaWcgi1HT_Q6pCioSRTgMFODqZdAXw=s0"
152
+ />
153
+ <span slot="headline">tertiary</span>
154
+ <span slot="subline">subline</span>
155
+
156
+ <flex-row slot="actions">
157
+ <custom-button type="tertiary" label="YES"></custom-button>
158
+ </flex-row>
159
+ </custom-card>
160
+ </demo-section>
161
+
162
+ <demo-section route="buttons">
163
+ <custom-button type="text" label="text"></custom-button>
164
+
165
+ <custom-button type="text" label="with icon">
166
+ <span slot="icon">+</span>
167
+ </custom-button>
168
+
169
+ <custom-button type="filled" label="filled"></custom-button>
170
+
171
+ <custom-button type="filled" label="with icon">
172
+ <span slot="icon">+</span>
173
+ </custom-button>
174
+
175
+ <custom-button type="elevated" label="elevated"></custom-button>
176
+
177
+ <custom-button type="elevated" label="with icon">
178
+ <span slot="icon">+</span>
179
+ </custom-button>
180
+
181
+ <custom-button type="outlined" label="outlined"></custom-button>
182
+
183
+ <custom-button type="outlined" label="with icon">
184
+ <span slot="icon">+</span>
185
+ </custom-button>
186
+
187
+ <custom-button type="tonal" label="tonal"></custom-button>
188
+
189
+ <custom-button type="tonal" label="with icon">
190
+ <span slot="icon">+</span>
191
+ </custom-button>
192
+
193
+ <custom-button type="tertiary" label="tertiary"></custom-button>
194
+
195
+ <custom-button type="tertiary" label="with icon">
196
+ <span slot="icon">+</span>
197
+ </custom-button>
198
+ </demo-section>
199
+
200
+ <demo-section route="top-app-bar">
201
+ <custom-top-app-bar>
202
+ <span slot="title">title</span>
203
+ </custom-top-app-bar>
204
+
205
+ <custom-top-app-bar type="small">
206
+ <custom-icon-button slot="start" icon="menu"></custom-icon-button>
207
+ <span slot="title">title</span>
208
+ </custom-top-app-bar>
209
+
210
+ <custom-top-app-bar type="medium">
211
+ <custom-icon-button slot="start" icon="menu"></custom-icon-button>
212
+ <span slot="title">title</span>
213
+ </custom-top-app-bar>
214
+
215
+ <custom-top-app-bar type="large">
216
+ <custom-icon-button slot="start" icon="menu"></custom-icon-button>
217
+ <span slot="title">title</span>
218
+ </custom-top-app-bar>
219
+ </demo-section>
220
+
221
+ <demo-section route="typography">
222
+ <custom-typography>
223
+ <span>title</span>
224
+ </custom-typography>
225
+
226
+ <custom-typography size="medium">
227
+ <span>title medium</span>
228
+ </custom-typography>
229
+
230
+ <custom-typography size="small">
231
+ <span>title small</span>
232
+ </custom-typography>
233
+
234
+ <custom-typography type="body">
235
+ <span>body</span>
236
+ </custom-typography>
237
+
238
+ <custom-typography type="body" size="medium">
239
+ <span>body medium</span>
240
+ </custom-typography>
241
+
242
+ <custom-typography type="body" size="small">
243
+ <span>body small</span>
244
+ </custom-typography>
245
+
246
+ <custom-typography type="label">
247
+ <span>label</span>
248
+ </custom-typography>
249
+
250
+ <custom-typography type="label" size="medium">
251
+ <span>label medium</span>
252
+ </custom-typography>
253
+
254
+ <custom-typography type="label" size="small">
255
+ <span>label small</span>
256
+ </custom-typography>
257
+
258
+ <custom-typography type="headline">
259
+ <span>headline</span>
260
+ </custom-typography>
261
+
262
+ <custom-typography type="headline" size="medium">
263
+ <span>headline medium</span>
264
+ </custom-typography>
265
+
266
+ <custom-typography type="headline" size="small">
267
+ <span>headline small</span>
268
+ </custom-typography>
269
+
270
+ <custom-typography type="display">
271
+ <span>display</span>
272
+ </custom-typography>
273
+
274
+ <custom-typography type="display" size="medium">
275
+ <span>display medium</span>
276
+ </custom-typography>
277
+
278
+ <custom-typography type="display" size="small">
279
+ <span>display small</span>
280
+ </custom-typography>
281
+ </demo-section>
282
+
283
+ <demo-section route="drawer">
284
+ <custom-drawer open type="modal" id="demo-drawer">
285
+ <span slot="content">
286
+ <custom-drawer-item>home</custom-drawer-item>
287
+ <custom-drawer-item>about</custom-drawer-item>
288
+ </span>
289
+ </custom-drawer>
290
+
291
+ <custom-drawer-button id="demo-drawer"></custom-drawer-button>
292
+
293
+ <custom-selector>
294
+ <custom-drawer-item id="demo-drawer">drawer-item</custom-drawer-item>
295
+ </custom-selector>
296
+ </demo-section>
297
+
298
+ <demo-section route="pane">
299
+ <custom-pane open type="modal" id="demo-pane">
300
+ <span slot="content">
301
+ <custom-drawer-item>home</custom-drawer-item>
302
+ <custom-drawer-item>about</custom-drawer-item>
303
+ </span>
304
+ </custom-pane>
305
+
306
+ <custom-pane open type="modal" id="demo-pane" right>
307
+ <span slot="content">
308
+ <custom-drawer-item>home</custom-drawer-item>
309
+ <custom-drawer-item>about</custom-drawer-item>
310
+ </span>
311
+ </custom-pane>
312
+ </demo-section>
313
+
314
+ <demo-section route="tabs">
315
+ <custom-tabs>
316
+ <custom-tab>home</custom-tab>
317
+ <custom-tab>about</custom-tab>
318
+ </custom-tabs>
319
+ </demo-section>
320
+
321
+ <demo-section route="dialog">
322
+ <flex-container>
323
+ <custom-button class="fullscreen-dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
324
+ <custom-dialog fullscreen>
325
+ <span slot="title">title</span>
326
+ <p>
327
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
328
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
329
+ dolorem corporis.
330
+ </p>
331
+ <p>
332
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
333
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
334
+ dolorem corporis.
335
+ </p>
336
+ <p>
337
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
338
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
339
+ dolorem corporis.
340
+ </p>
341
+ <p>
342
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
343
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
344
+ dolorem corporis.
345
+ </p>
346
+ <p>
347
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
348
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
349
+ dolorem corporis.
350
+ </p>
351
+ <p>
352
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
353
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
354
+ dolorem corporis.
355
+ </p>
356
+ <flex-row slot="actions">
357
+ <custom-button label="agree" action="agree">agree</custom-button>
358
+ </flex-row>
359
+ </custom-dialog>
360
+
361
+ <script>
362
+ const demoSection = document.querySelector('demo-section[route="dialog"]')
363
+ const fullscreenDialog = demoSection.querySelector('custom-dialog[fullscreen]')
364
+ demoSection.querySelector('.fullscreen-dialog').addEventListener('click', () => {
365
+ fullscreenDialog.open = !fullscreenDialog.open
366
+ })
367
+ </script>
368
+ </flex-container>
369
+
370
+ <flex-container>
371
+ <custom-button class="dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
372
+ <custom-dialog class="dialog">
373
+ <span slot="title">title</span>
374
+ <p>
375
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
376
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
377
+ dolorem corporis.
378
+ </p>
379
+
380
+ <flex-row slot="actions">
381
+ <custom-button label="agree" action="agree">agree</custom-button>
382
+ </flex-row>
383
+ </custom-dialog>
384
+
385
+ <script>
386
+ const dialog = demoSection.querySelector('custom-dialog.dialog')
387
+ demoSection.querySelector('.dialog').addEventListener('click', () => {
388
+ dialog.open = !dialog.open
389
+ })
390
+ </script>
391
+ </flex-container>
392
+ </demo-section>
393
+
394
+ <demo-section route="menu">
395
+ <custom-menu>
396
+ <custom-list-item type="menu">
397
+ <custom-icon slot="start">info</custom-icon>
398
+ item 1
399
+ </custom-list-item>
400
+
401
+ <custom-list-item type="menu">
402
+ <custom-icon slot="start">info</custom-icon>
403
+ item 2
404
+ </custom-list-item>
405
+
406
+ <custom-list-item type="menu">
407
+ <custom-icon slot="start">info</custom-icon>
408
+ item 3
409
+ </custom-list-item>
410
+ </custom-menu>
411
+ </demo-section>
412
+
413
+ <demo-section route="dropdown-menu">
414
+ <custom-dropdown-menu>
415
+ <custom-list-item type="menu">
416
+ <custom-icon slot="start">info</custom-icon>
417
+ item 1
418
+ </custom-list-item>
419
+
420
+ <custom-list-item type="menu">
421
+ <custom-icon slot="start">info</custom-icon>
422
+ item 2
423
+ </custom-list-item>
424
+
425
+ <custom-list-item type="menu">
426
+ <custom-icon slot="start">info</custom-icon>
427
+ item 3
428
+ </custom-list-item>
429
+ </custom-dropdown-menu>
430
+
431
+ <flex-row>
432
+ <flex-it></flex-it>
433
+ <custom-dropdown-menu right>
434
+ <custom-list-item type="menu">
435
+ <custom-icon slot="start">info</custom-icon>
436
+ item 1
437
+ </custom-list-item>
438
+
439
+ <custom-list-item type="menu">
440
+ <custom-icon slot="start">info</custom-icon>
441
+ item 2
442
+ </custom-list-item>
443
+
444
+ <custom-list-item type="menu">
445
+ <custom-icon slot="start">info</custom-icon>
446
+ item 3
447
+ </custom-list-item>
448
+ </custom-dropdown-menu>
449
+ </flex-row>
450
+
451
+ <custom-dropdown-menu bottom>
452
+ <custom-list-item type="menu">
453
+ <custom-icon slot="start">info</custom-icon>
454
+ item 1
455
+ </custom-list-item>
456
+
457
+ <custom-list-item type="menu">
458
+ <custom-icon slot="start">info</custom-icon>
459
+ item 2
460
+ </custom-list-item>
461
+
462
+ <custom-list-item type="menu">
463
+ <custom-icon slot="start">info</custom-icon>
464
+ item 3
465
+ </custom-list-item>
466
+ </custom-dropdown-menu>
467
+
468
+ <flex-row>
469
+ <flex-it></flex-it>
470
+ <custom-dropdown-menu bottom right>
471
+ <custom-list-item type="menu">
472
+ <custom-icon slot="start">info</custom-icon>
473
+ item 1
474
+ </custom-list-item>
475
+
476
+ <custom-list-item type="menu">
477
+ <custom-icon slot="start">info</custom-icon>
478
+ item 2
479
+ </custom-list-item>
480
+
481
+ <custom-list-item type="menu">
482
+ <custom-icon slot="start">info</custom-icon>
483
+ item 3
484
+ </custom-list-item>
485
+ </custom-dropdown-menu>
486
+ </flex-row>
487
+ </demo-section>
488
+
489
+ <demo-section route="list-item">
490
+ <custom-list-item>
491
+ <custom-icon slot="start">info</custom-icon>
492
+ </custom-list-item>
493
+ </demo-section>
494
+ <demo-section route="toggle">
495
+ <custom-toggle>
496
+ <custom-icon>check_box</custom-icon>
497
+ <custom-icon>check_box_outline_blank</custom-icon>
498
+ <custom-icon>info</custom-icon>
499
+ </custom-toggle>
500
+ </demo-section>
501
+
502
+ <demo-section route="toggle-button">
503
+ <custom-toggle-button>
504
+ <custom-icon>check_box</custom-icon>
505
+ <custom-icon>check_box_outline_blank</custom-icon>
506
+ </custom-toggle-button>
507
+ </demo-section>
508
+ </custom-pages>
509
+ </flex-column>
510
+ </custom-drawer-layout>
511
511
  `;
512
512
  }
513
513
  constructor() {