@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-shell.js CHANGED
@@ -97,548 +97,548 @@ let DemoShell = (() => {
97
97
  }
98
98
  }
99
99
  static styles = [
100
- css `
101
- custom-drawer-layout {
102
- height: 100%;
103
- width: 100%;
104
- inset: 0;
105
-
106
- background: var(--md-sys-color-background, #fff);
107
- position: absolute;
108
- display: flex;
109
- }
110
- .demo-container {
111
- height: 100%;
112
- width: 100%;
113
- }
114
-
115
- flex-column {
116
- width: 100%;
117
- height: 100%;
118
- overflow-y: auto;
119
- }
120
-
121
- .demo-container section {
122
- align-items: center;
123
- justify-content: center;
124
- }
125
-
126
- [non-interactive] {
127
- pointer-events: none;
128
- }
129
-
130
- h4 {
131
- margin: 0;
132
- padding-top: 16px;
133
- padding-bottom: 12px;
134
- }
135
-
136
- custom-drawer custom-divider {
137
- margin-top: 16px;
138
- }
139
-
140
- flex-row:not([slot='top-app-bar-end']) {
141
- width: 100%;
142
- }
100
+ css `
101
+ custom-drawer-layout {
102
+ height: 100%;
103
+ width: 100%;
104
+ inset: 0;
105
+
106
+ background: var(--md-sys-color-background, #fff);
107
+ position: absolute;
108
+ display: flex;
109
+ }
110
+ .demo-container {
111
+ height: 100%;
112
+ width: 100%;
113
+ }
114
+
115
+ flex-column {
116
+ width: 100%;
117
+ height: 100%;
118
+ overflow-y: auto;
119
+ }
120
+
121
+ .demo-container section {
122
+ align-items: center;
123
+ justify-content: center;
124
+ }
125
+
126
+ [non-interactive] {
127
+ pointer-events: none;
128
+ }
129
+
130
+ h4 {
131
+ margin: 0;
132
+ padding-top: 16px;
133
+ padding-bottom: 12px;
134
+ }
135
+
136
+ custom-drawer custom-divider {
137
+ margin-top: 16px;
138
+ }
139
+
140
+ flex-row:not([slot='top-app-bar-end']) {
141
+ width: 100%;
142
+ }
143
143
  `
144
144
  ];
145
145
  render() {
146
- return html `
147
- <custom-theme></custom-theme>
148
- <demo-icons></demo-icons>
149
-
150
- <!-- <custom-root> -->
151
- <custom-drawer-layout class="demo-container">
152
- <span slot="drawer-headline"> menu </span>
153
-
154
- <flex-column slot="drawer-content">
155
- <custom-selector attr-for-selected="route" default-selected="banner">
156
- <custom-drawer-item route="banner">banner</custom-drawer-item>
157
- <custom-drawer-item route="dialog">dialog</custom-drawer-item>
158
- <custom-drawer-item route="divider">divider</custom-drawer-item>
159
- <custom-drawer-item route="buttons">buttons</custom-drawer-item>
160
- <custom-drawer-item route="cards">cards</custom-drawer-item>
161
- <custom-drawer-item route="top-app-bar">top-app-bar</custom-drawer-item>
162
- <custom-drawer-item route="typography">typography</custom-drawer-item>
163
- <custom-drawer-item route="drawer">drawer</custom-drawer-item>
164
- <custom-drawer-item route="pane">pane</custom-drawer-item>
165
- <custom-drawer-item route="supporting-pane">supporting-pane</custom-drawer-item>
166
- <custom-drawer-item route="tabs">tabs</custom-drawer-item>
167
- <custom-drawer-item route="menu">menu</custom-drawer-item>
168
- <custom-drawer-item route="dropdown-menu">dropdown-menu</custom-drawer-item>
169
- <custom-drawer-item route="list-item">list-item</custom-drawer-item>
170
- <custom-drawer-item route="toggle">toggle</custom-drawer-item>
171
- <custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
172
- <custom-drawer-item route="time-picker">time-picker</custom-drawer-item>
173
- </custom-selector>
174
- </flex-column>
175
-
176
- <span slot="top-app-bar-title">custom-elements</span>
177
-
178
- <flex-row slot="top-app-bar-end">
179
- <custom-theme-mode></custom-theme-mode>
180
- <custom-button>
181
- <custom-icon slot="icon">more_vert</custom-icon>
182
- </custom-button>
183
- </flex-row>
184
-
185
- <flex-column>
186
- <custom-pages attr-for-selected="route" default-selected="banner">
187
- <demo-section route="banner">
188
- <custom-banner>Banner</custom-banner>
189
- </demo-section>
190
-
191
- <demo-section route="divider">
192
- <custom-divider></custom-divider>
193
- <custom-divider inset></custom-divider>
194
- <custom-divider middle-inset></custom-divider>
195
- </demo-section>
196
-
197
- <demo-section route="cards">
198
- <custom-card type="filled">
199
- <span slot="headline">filled</span>
200
- <span slot="subline">subline</span>
201
- <p slot="supportingText">
202
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
203
- magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
204
- facilis et quasi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi
205
- eum aliquam enim, magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam
206
- praesentium veritatis facilis et quasi?
207
- </p>
208
- <flex-row slot="actions">
209
- <custom-button type="filled" label="YES"></custom-button>
210
- </flex-row>
211
- </custom-card>
212
-
213
- <custom-card type="elevated">
214
- <span slot="headline">elevated</span>
215
- <span slot="subline">subline</span>
216
- <p slot="supportingText">
217
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
218
- magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
219
- facilis et quasi?
220
- </p>
221
- <flex-row slot="actions">
222
- <custom-button type="elevated" label="YES"></custom-button>
223
- </flex-row>
224
- </custom-card>
225
-
226
- <custom-card type="outlined">
227
- <span slot="headline">outlined</span>
228
- <span slot="subline">subline</span>
229
- <p slot="supportingText">
230
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
231
- magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
232
- facilis et quasi?
233
- </p>
234
- <flex-row slot="actions">
235
- <custom-button type="outlined" label="YES"></custom-button>
236
- </flex-row>
237
- </custom-card>
238
-
239
- <custom-card type="tertiary">
240
- <img
241
- loading="lazy"
242
- slot="image"
243
- src="https://lh3.googleusercontent.com/9NBw6U14z6f-EAnwPqfcX-mIkxNdpK0IXvwiun9w84JkMcZfBT0bfRqn7QWdBVqnCYC5hsDEnGhSjbaWcgi1HT_Q6pCioSRTgMFODqZdAXw=s0"
244
- />
245
- <span slot="headline">tertiary</span>
246
- <span slot="subline">subline</span>
247
-
248
- <flex-row slot="actions">
249
- <custom-button label="YES" type="tertiary"></custom-button>
250
- </flex-row>
251
- </custom-card>
252
- </demo-section>
253
-
254
- <demo-section route="buttons">
255
- <custom-button type="text" label="text"></custom-button>
256
-
257
- <custom-button type="text" label="with icon">
258
- <span slot="icon">+</span>
259
- </custom-button>
260
-
261
- <custom-button type="filled" label="filled"></custom-button>
262
-
263
- <custom-button type="filled" label="with icon">
264
- <span slot="icon">+</span>
265
- </custom-button>
266
-
267
- <custom-button type="elevated" label="elevated"></custom-button>
268
-
269
- <custom-button type="elevated" label="with icon">
270
- <span slot="icon">+</span>
271
- </custom-button>
272
-
273
- <custom-button type="outlined" label="outlined"></custom-button>
274
-
275
- <custom-button type="outlined" label="with icon">
276
- <span slot="icon">+</span>
277
- </custom-button>
278
-
279
- <custom-button type="tonal" label="tonal"></custom-button>
280
-
281
- <custom-button type="tonal" label="with icon">
282
- <span slot="icon">+</span>
283
- </custom-button>
284
-
285
- <custom-button type="tertiary" label="tertiary"></custom-button>
286
-
287
- <custom-button type="tertiary" label="with icon">
288
- <span slot="icon">+</span>
289
- </custom-button>
290
- </demo-section>
291
-
292
- <demo-section route="top-app-bar">
293
- <custom-top-app-bar>
294
- <span slot="title">title</span>
295
- </custom-top-app-bar>
296
-
297
- <custom-top-app-bar type="small">
298
- <custom-icon-button slot="start" icon="menu"></custom-icon-button>
299
- <span slot="title">title</span>
300
- </custom-top-app-bar>
301
-
302
- <custom-top-app-bar type="medium">
303
- <custom-icon-button slot="start" icon="menu"></custom-icon-button>
304
- <span slot="title">title</span>
305
- </custom-top-app-bar>
306
-
307
- <custom-top-app-bar type="large">
308
- <custom-icon-button slot="start" icon="menu"></custom-icon-button>
309
- <span slot="title">title</span>
310
- </custom-top-app-bar>
311
- </demo-section>
312
-
313
- <demo-section route="typography">
314
- <custom-typography>
315
- <span>title</span>
316
- </custom-typography>
317
-
318
- <custom-typography size="medium">
319
- <span>title medium</span>
320
- </custom-typography>
321
-
322
- <custom-typography size="small">
323
- <span>title small</span>
324
- </custom-typography>
325
-
326
- <custom-typography type="body">
327
- <span>body</span>
328
- </custom-typography>
329
-
330
- <custom-typography type="body" size="medium">
331
- <span>body medium</span>
332
- </custom-typography>
333
-
334
- <custom-typography type="body" size="small">
335
- <span>body small</span>
336
- </custom-typography>
337
-
338
- <custom-typography type="label">
339
- <span>label</span>
340
- </custom-typography>
341
-
342
- <custom-typography type="label" size="medium">
343
- <span>label medium</span>
344
- </custom-typography>
345
-
346
- <custom-typography type="label" size="small">
347
- <span>label small</span>
348
- </custom-typography>
349
-
350
- <custom-typography type="headline">
351
- <span>headline</span>
352
- </custom-typography>
353
-
354
- <custom-typography type="headline" size="medium">
355
- <span>headline medium</span>
356
- </custom-typography>
357
-
358
- <custom-typography type="headline" size="small">
359
- <span>headline small</span>
360
- </custom-typography>
361
-
362
- <custom-typography type="display">
363
- <span>display</span>
364
- </custom-typography>
365
-
366
- <custom-typography type="display" size="medium">
367
- <span>display medium</span>
368
- </custom-typography>
369
-
370
- <custom-typography type="display" size="small">
371
- <span>display small</span>
372
- </custom-typography>
373
- </demo-section>
374
-
375
- <demo-section route="drawer">
376
- <custom-drawer open type="modal" id="demo-drawer">
377
- <span slot="content">
378
- <custom-drawer-item>home</custom-drawer-item>
379
- <custom-drawer-item>about</custom-drawer-item>
380
- </span>
381
- </custom-drawer>
382
-
383
- <custom-drawer-button id="demo-drawer"></custom-drawer-button>
384
-
385
- <custom-selector>
386
- <custom-drawer-item id="demo-drawer">drawer-item</custom-drawer-item>
387
- </custom-selector>
388
- </demo-section>
389
-
390
- <demo-section route="pane">
391
- <custom-pane open type="modal" id="demo-pane">
392
- <span slot="content">
393
- <custom-drawer-item>home</custom-drawer-item>
394
- <custom-drawer-item>about</custom-drawer-item>
395
- </span>
396
- </custom-pane>
397
-
398
- <custom-pane open type="modal" id="demo-pane" right>
399
- <span slot="content">
400
- <custom-drawer-item>home</custom-drawer-item>
401
- <custom-drawer-item>about</custom-drawer-item>
402
- </span>
403
- </custom-pane>
404
- </demo-section>
405
- <demo-section route="supporting-pane">
406
- <custom-supporting-pane id="demo-supporting-pane">
407
- <flex-column>
408
- <p>
409
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolor minima. Ab nobis quae neque
410
- dolor. Asperiores itaque incidunt quae quis est explicabo dolorem, laudantium repellat earum nisi.
411
- Quae, cum.
412
- </p>
413
- </flex-column>
414
- <flex-column slot="supporting"></flex-column>
415
- </custom-supporting-pane>
416
- <custom-drawer-button id="demo-supporting-pane"></custom-drawer-button>
417
- <custom-supporting-pane open left>
418
- <flex-column>
419
- <p>
420
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolor minima. Ab nobis quae neque
421
- dolor. Asperiores itaque incidunt quae quis est explicabo dolorem, laudantium repellat earum nisi.
422
- Quae, cum.
423
- </p>
424
- </flex-column>
425
- <flex-column slot="supporting"></flex-column>
426
- </custom-supporting-pane>
427
- </demo-section>
428
-
429
- <demo-section route="tabs">
430
- <custom-tabs>
431
- <custom-tab>home</custom-tab>
432
- <custom-tab>about</custom-tab>
433
- </custom-tabs>
434
-
435
- <custom-tabs round>
436
- <custom-tab>
437
- <custom-icon>home</custom-icon>
438
- home
439
- </custom-tab>
440
- <custom-tab>about</custom-tab>
441
- </custom-tabs>
442
- </demo-section>
443
-
444
- <demo-section route="dialog">
445
- <flex-container>
446
- <custom-button class="fullscreen-dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
447
- <custom-dialog fullscreen>
448
- <span slot="title">title</span>
449
- <p>
450
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
451
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
452
- dolorem corporis.
453
- </p>
454
- <p>
455
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
456
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
457
- dolorem corporis.
458
- </p>
459
- <p>
460
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
461
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
462
- dolorem corporis.
463
- </p>
464
- <p>
465
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
466
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
467
- dolorem corporis.
468
- </p>
469
- <p>
470
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
471
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
472
- dolorem corporis.
473
- </p>
474
- <p>
475
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
476
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
477
- dolorem corporis.
478
- </p>
479
- <flex-row slot="actions">
480
- <custom-button label="agree" action="agree">agree</custom-button>
481
- </flex-row>
482
- </custom-dialog>
483
-
484
- <script>
485
- const demoSection = document.querySelector('demo-section[route="dialog"]')
486
- const fullscreenDialog = demoSection.querySelector('custom-dialog[fullscreen]')
487
- demoSection.querySelector('.fullscreen-dialog').addEventListener('click', () => {
488
- fullscreenDialog.open = !fullscreenDialog.open
489
- })
490
- </script>
491
- </flex-container>
492
-
493
- <flex-container>
494
- <custom-button class="dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
495
- <custom-dialog class="dialog">
496
- <span slot="title">title</span>
497
- <p>
498
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
499
- minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
500
- dolorem corporis.
501
- </p>
502
-
503
- <flex-row slot="actions">
504
- <custom-button label="agree" action="agree">agree</custom-button>
505
- </flex-row>
506
- </custom-dialog>
507
-
508
- <script>
509
- const dialog = demoSection.querySelector('custom-dialog.dialog')
510
- demoSection.querySelector('.dialog').addEventListener('click', () => {
511
- dialog.open = !dialog.open
512
- })
513
- </script>
514
- </flex-container>
515
- </demo-section>
516
-
517
- <demo-section route="time-picker">
518
- <custom-time-picker></custom-time-picker>
519
- </demo-section>
520
-
521
- <demo-section route="menu">
522
- <custom-menu>
523
- <custom-list-item type="menu">
524
- <custom-icon slot="start">info</custom-icon>
525
- item 1
526
- </custom-list-item>
527
-
528
- <custom-list-item type="menu">
529
- <custom-icon slot="start">info</custom-icon>
530
- item 2
531
- </custom-list-item>
532
-
533
- <custom-list-item type="menu">
534
- <custom-icon slot="start">info</custom-icon>
535
- item 3
536
- </custom-list-item>
537
- </custom-menu>
538
- </demo-section>
539
-
540
- <demo-section route="dropdown-menu">
541
- <custom-dropdown-menu>
542
- <custom-list-item type="menu">
543
- <custom-icon slot="start">info</custom-icon>
544
- item 1
545
- </custom-list-item>
546
-
547
- <custom-list-item type="menu">
548
- <custom-icon slot="start">info</custom-icon>
549
- item 2
550
- </custom-list-item>
551
-
552
- <custom-list-item type="menu">
553
- <custom-icon slot="start">info</custom-icon>
554
- item 3
555
- </custom-list-item>
556
- </custom-dropdown-menu>
557
-
558
- <flex-row>
559
- <flex-it></flex-it>
560
- <custom-dropdown-menu right>
561
- <custom-list-item type="menu">
562
- <custom-icon slot="start">info</custom-icon>
563
- item 1
564
- </custom-list-item>
565
-
566
- <custom-list-item type="menu">
567
- <custom-icon slot="start">info</custom-icon>
568
- item 2
569
- </custom-list-item>
570
-
571
- <custom-list-item type="menu">
572
- <custom-icon slot="start">info</custom-icon>
573
- item 3
574
- </custom-list-item>
575
- </custom-dropdown-menu>
576
- </flex-row>
577
-
578
- <custom-dropdown-menu bottom>
579
- <custom-list-item type="menu">
580
- <custom-icon slot="start">info</custom-icon>
581
- item 1
582
- </custom-list-item>
583
-
584
- <custom-list-item type="menu">
585
- <custom-icon slot="start">info</custom-icon>
586
- item 2
587
- </custom-list-item>
588
-
589
- <custom-list-item type="menu">
590
- <custom-icon slot="start">info</custom-icon>
591
- item 3
592
- </custom-list-item>
593
- </custom-dropdown-menu>
594
-
595
- <flex-row>
596
- <flex-it></flex-it>
597
- <custom-dropdown-menu bottom right>
598
- <custom-list-item type="menu">
599
- <custom-icon slot="start">info</custom-icon>
600
- item 1
601
- </custom-list-item>
602
-
603
- <custom-list-item type="menu">
604
- <custom-icon slot="start">info</custom-icon>
605
- item 2
606
- </custom-list-item>
607
-
608
- <custom-list-item type="menu">
609
- <custom-icon slot="start">info</custom-icon>
610
- item 3
611
- </custom-list-item>
612
- </custom-dropdown-menu>
613
- </flex-row>
614
- </demo-section>
615
-
616
- <demo-section route="list-item">
617
- <custom-list-item>
618
- <custom-icon slot="start">info</custom-icon>
619
- </custom-list-item>
620
- </demo-section>
621
- <demo-section route="toggle">
622
- <custom-toggle togglers='["check_box","check_box_outline_blank", "info"]'></custom-toggle>
623
-
624
- <custom-button label="next"></custom-button>
625
-
626
- <script>
627
- const toggleDemo = document.querySelector('demo-section[route="toggle"]')
628
- toggleDemo.querySelector('custom-button').addEventListener('click', () => {
629
- toggleDemo.querySelector('custom-toggle').next()
630
- })
631
- </script>
632
- </demo-section>
633
-
634
- <demo-section route="toggle-button">
635
- <custom-toggle-button .togglers='["check_box","check_box_outline_blank"]'> </custom-toggle-button>
636
- </demo-section>
637
- </custom-pages>
638
- </flex-column>
639
- </custom-drawer-layout>
640
- <!-- </custom-root> -->
641
- <!-- </flex-row> -->
146
+ return html `
147
+ <custom-theme></custom-theme>
148
+ <demo-icons></demo-icons>
149
+
150
+ <!-- <custom-root> -->
151
+ <custom-drawer-layout class="demo-container">
152
+ <span slot="drawer-headline"> menu </span>
153
+
154
+ <flex-column slot="drawer-content">
155
+ <custom-selector attr-for-selected="route" default-selected="banner">
156
+ <custom-drawer-item route="banner">banner</custom-drawer-item>
157
+ <custom-drawer-item route="dialog">dialog</custom-drawer-item>
158
+ <custom-drawer-item route="divider">divider</custom-drawer-item>
159
+ <custom-drawer-item route="buttons">buttons</custom-drawer-item>
160
+ <custom-drawer-item route="cards">cards</custom-drawer-item>
161
+ <custom-drawer-item route="top-app-bar">top-app-bar</custom-drawer-item>
162
+ <custom-drawer-item route="typography">typography</custom-drawer-item>
163
+ <custom-drawer-item route="drawer">drawer</custom-drawer-item>
164
+ <custom-drawer-item route="pane">pane</custom-drawer-item>
165
+ <custom-drawer-item route="supporting-pane">supporting-pane</custom-drawer-item>
166
+ <custom-drawer-item route="tabs">tabs</custom-drawer-item>
167
+ <custom-drawer-item route="menu">menu</custom-drawer-item>
168
+ <custom-drawer-item route="dropdown-menu">dropdown-menu</custom-drawer-item>
169
+ <custom-drawer-item route="list-item">list-item</custom-drawer-item>
170
+ <custom-drawer-item route="toggle">toggle</custom-drawer-item>
171
+ <custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
172
+ <custom-drawer-item route="time-picker">time-picker</custom-drawer-item>
173
+ </custom-selector>
174
+ </flex-column>
175
+
176
+ <span slot="top-app-bar-title">custom-elements</span>
177
+
178
+ <flex-row slot="top-app-bar-end">
179
+ <custom-theme-mode></custom-theme-mode>
180
+ <custom-button>
181
+ <custom-icon slot="icon">more_vert</custom-icon>
182
+ </custom-button>
183
+ </flex-row>
184
+
185
+ <flex-column>
186
+ <custom-pages attr-for-selected="route" default-selected="banner">
187
+ <demo-section route="banner">
188
+ <custom-banner>Banner</custom-banner>
189
+ </demo-section>
190
+
191
+ <demo-section route="divider">
192
+ <custom-divider></custom-divider>
193
+ <custom-divider inset></custom-divider>
194
+ <custom-divider middle-inset></custom-divider>
195
+ </demo-section>
196
+
197
+ <demo-section route="cards">
198
+ <custom-card type="filled">
199
+ <span slot="headline">filled</span>
200
+ <span slot="subline">subline</span>
201
+ <p slot="supportingText">
202
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
203
+ magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
204
+ facilis et quasi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi
205
+ eum aliquam enim, magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam
206
+ praesentium veritatis facilis et quasi?
207
+ </p>
208
+ <flex-row slot="actions">
209
+ <custom-button type="filled" label="YES"></custom-button>
210
+ </flex-row>
211
+ </custom-card>
212
+
213
+ <custom-card type="elevated">
214
+ <span slot="headline">elevated</span>
215
+ <span slot="subline">subline</span>
216
+ <p slot="supportingText">
217
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
218
+ magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
219
+ facilis et quasi?
220
+ </p>
221
+ <flex-row slot="actions">
222
+ <custom-button type="elevated" label="YES"></custom-button>
223
+ </flex-row>
224
+ </custom-card>
225
+
226
+ <custom-card type="outlined">
227
+ <span slot="headline">outlined</span>
228
+ <span slot="subline">subline</span>
229
+ <p slot="supportingText">
230
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
231
+ magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
232
+ facilis et quasi?
233
+ </p>
234
+ <flex-row slot="actions">
235
+ <custom-button type="outlined" label="YES"></custom-button>
236
+ </flex-row>
237
+ </custom-card>
238
+
239
+ <custom-card type="tertiary">
240
+ <img
241
+ loading="lazy"
242
+ slot="image"
243
+ src="https://lh3.googleusercontent.com/9NBw6U14z6f-EAnwPqfcX-mIkxNdpK0IXvwiun9w84JkMcZfBT0bfRqn7QWdBVqnCYC5hsDEnGhSjbaWcgi1HT_Q6pCioSRTgMFODqZdAXw=s0"
244
+ />
245
+ <span slot="headline">tertiary</span>
246
+ <span slot="subline">subline</span>
247
+
248
+ <flex-row slot="actions">
249
+ <custom-button label="YES" type="tertiary"></custom-button>
250
+ </flex-row>
251
+ </custom-card>
252
+ </demo-section>
253
+
254
+ <demo-section route="buttons">
255
+ <custom-button type="text" label="text"></custom-button>
256
+
257
+ <custom-button type="text" label="with icon">
258
+ <span slot="icon">+</span>
259
+ </custom-button>
260
+
261
+ <custom-button type="filled" label="filled"></custom-button>
262
+
263
+ <custom-button type="filled" label="with icon">
264
+ <span slot="icon">+</span>
265
+ </custom-button>
266
+
267
+ <custom-button type="elevated" label="elevated"></custom-button>
268
+
269
+ <custom-button type="elevated" label="with icon">
270
+ <span slot="icon">+</span>
271
+ </custom-button>
272
+
273
+ <custom-button type="outlined" label="outlined"></custom-button>
274
+
275
+ <custom-button type="outlined" label="with icon">
276
+ <span slot="icon">+</span>
277
+ </custom-button>
278
+
279
+ <custom-button type="tonal" label="tonal"></custom-button>
280
+
281
+ <custom-button type="tonal" label="with icon">
282
+ <span slot="icon">+</span>
283
+ </custom-button>
284
+
285
+ <custom-button type="tertiary" label="tertiary"></custom-button>
286
+
287
+ <custom-button type="tertiary" label="with icon">
288
+ <span slot="icon">+</span>
289
+ </custom-button>
290
+ </demo-section>
291
+
292
+ <demo-section route="top-app-bar">
293
+ <custom-top-app-bar>
294
+ <span slot="title">title</span>
295
+ </custom-top-app-bar>
296
+
297
+ <custom-top-app-bar type="small">
298
+ <custom-icon-button slot="start" icon="menu"></custom-icon-button>
299
+ <span slot="title">title</span>
300
+ </custom-top-app-bar>
301
+
302
+ <custom-top-app-bar type="medium">
303
+ <custom-icon-button slot="start" icon="menu"></custom-icon-button>
304
+ <span slot="title">title</span>
305
+ </custom-top-app-bar>
306
+
307
+ <custom-top-app-bar type="large">
308
+ <custom-icon-button slot="start" icon="menu"></custom-icon-button>
309
+ <span slot="title">title</span>
310
+ </custom-top-app-bar>
311
+ </demo-section>
312
+
313
+ <demo-section route="typography">
314
+ <custom-typography>
315
+ <span>title</span>
316
+ </custom-typography>
317
+
318
+ <custom-typography size="medium">
319
+ <span>title medium</span>
320
+ </custom-typography>
321
+
322
+ <custom-typography size="small">
323
+ <span>title small</span>
324
+ </custom-typography>
325
+
326
+ <custom-typography type="body">
327
+ <span>body</span>
328
+ </custom-typography>
329
+
330
+ <custom-typography type="body" size="medium">
331
+ <span>body medium</span>
332
+ </custom-typography>
333
+
334
+ <custom-typography type="body" size="small">
335
+ <span>body small</span>
336
+ </custom-typography>
337
+
338
+ <custom-typography type="label">
339
+ <span>label</span>
340
+ </custom-typography>
341
+
342
+ <custom-typography type="label" size="medium">
343
+ <span>label medium</span>
344
+ </custom-typography>
345
+
346
+ <custom-typography type="label" size="small">
347
+ <span>label small</span>
348
+ </custom-typography>
349
+
350
+ <custom-typography type="headline">
351
+ <span>headline</span>
352
+ </custom-typography>
353
+
354
+ <custom-typography type="headline" size="medium">
355
+ <span>headline medium</span>
356
+ </custom-typography>
357
+
358
+ <custom-typography type="headline" size="small">
359
+ <span>headline small</span>
360
+ </custom-typography>
361
+
362
+ <custom-typography type="display">
363
+ <span>display</span>
364
+ </custom-typography>
365
+
366
+ <custom-typography type="display" size="medium">
367
+ <span>display medium</span>
368
+ </custom-typography>
369
+
370
+ <custom-typography type="display" size="small">
371
+ <span>display small</span>
372
+ </custom-typography>
373
+ </demo-section>
374
+
375
+ <demo-section route="drawer">
376
+ <custom-drawer open type="modal" id="demo-drawer">
377
+ <span slot="content">
378
+ <custom-drawer-item>home</custom-drawer-item>
379
+ <custom-drawer-item>about</custom-drawer-item>
380
+ </span>
381
+ </custom-drawer>
382
+
383
+ <custom-drawer-button id="demo-drawer"></custom-drawer-button>
384
+
385
+ <custom-selector>
386
+ <custom-drawer-item id="demo-drawer">drawer-item</custom-drawer-item>
387
+ </custom-selector>
388
+ </demo-section>
389
+
390
+ <demo-section route="pane">
391
+ <custom-pane open type="modal" id="demo-pane">
392
+ <span slot="content">
393
+ <custom-drawer-item>home</custom-drawer-item>
394
+ <custom-drawer-item>about</custom-drawer-item>
395
+ </span>
396
+ </custom-pane>
397
+
398
+ <custom-pane open type="modal" id="demo-pane" right>
399
+ <span slot="content">
400
+ <custom-drawer-item>home</custom-drawer-item>
401
+ <custom-drawer-item>about</custom-drawer-item>
402
+ </span>
403
+ </custom-pane>
404
+ </demo-section>
405
+ <demo-section route="supporting-pane">
406
+ <custom-supporting-pane id="demo-supporting-pane">
407
+ <flex-column>
408
+ <p>
409
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolor minima. Ab nobis quae neque
410
+ dolor. Asperiores itaque incidunt quae quis est explicabo dolorem, laudantium repellat earum nisi.
411
+ Quae, cum.
412
+ </p>
413
+ </flex-column>
414
+ <flex-column slot="supporting"></flex-column>
415
+ </custom-supporting-pane>
416
+ <custom-drawer-button id="demo-supporting-pane"></custom-drawer-button>
417
+ <custom-supporting-pane open left>
418
+ <flex-column>
419
+ <p>
420
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolor minima. Ab nobis quae neque
421
+ dolor. Asperiores itaque incidunt quae quis est explicabo dolorem, laudantium repellat earum nisi.
422
+ Quae, cum.
423
+ </p>
424
+ </flex-column>
425
+ <flex-column slot="supporting"></flex-column>
426
+ </custom-supporting-pane>
427
+ </demo-section>
428
+
429
+ <demo-section route="tabs">
430
+ <custom-tabs>
431
+ <custom-tab>home</custom-tab>
432
+ <custom-tab>about</custom-tab>
433
+ </custom-tabs>
434
+
435
+ <custom-tabs round>
436
+ <custom-tab>
437
+ <custom-icon>home</custom-icon>
438
+ home
439
+ </custom-tab>
440
+ <custom-tab>about</custom-tab>
441
+ </custom-tabs>
442
+ </demo-section>
443
+
444
+ <demo-section route="dialog">
445
+ <flex-container>
446
+ <custom-button class="fullscreen-dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
447
+ <custom-dialog fullscreen>
448
+ <span slot="title">title</span>
449
+ <p>
450
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
451
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
452
+ dolorem corporis.
453
+ </p>
454
+ <p>
455
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
456
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
457
+ dolorem corporis.
458
+ </p>
459
+ <p>
460
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
461
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
462
+ dolorem corporis.
463
+ </p>
464
+ <p>
465
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
466
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
467
+ dolorem corporis.
468
+ </p>
469
+ <p>
470
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
471
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
472
+ dolorem corporis.
473
+ </p>
474
+ <p>
475
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
476
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
477
+ dolorem corporis.
478
+ </p>
479
+ <flex-row slot="actions">
480
+ <custom-button label="agree" action="agree">agree</custom-button>
481
+ </flex-row>
482
+ </custom-dialog>
483
+
484
+ <script>
485
+ const demoSection = document.querySelector('demo-section[route="dialog"]')
486
+ const fullscreenDialog = demoSection.querySelector('custom-dialog[fullscreen]')
487
+ demoSection.querySelector('.fullscreen-dialog').addEventListener('click', () => {
488
+ fullscreenDialog.open = !fullscreenDialog.open
489
+ })
490
+ </script>
491
+ </flex-container>
492
+
493
+ <flex-container>
494
+ <custom-button class="dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
495
+ <custom-dialog class="dialog">
496
+ <span slot="title">title</span>
497
+ <p>
498
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
499
+ minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
500
+ dolorem corporis.
501
+ </p>
502
+
503
+ <flex-row slot="actions">
504
+ <custom-button label="agree" action="agree">agree</custom-button>
505
+ </flex-row>
506
+ </custom-dialog>
507
+
508
+ <script>
509
+ const dialog = demoSection.querySelector('custom-dialog.dialog')
510
+ demoSection.querySelector('.dialog').addEventListener('click', () => {
511
+ dialog.open = !dialog.open
512
+ })
513
+ </script>
514
+ </flex-container>
515
+ </demo-section>
516
+
517
+ <demo-section route="time-picker">
518
+ <custom-time-picker></custom-time-picker>
519
+ </demo-section>
520
+
521
+ <demo-section route="menu">
522
+ <custom-menu>
523
+ <custom-list-item type="menu">
524
+ <custom-icon slot="start">info</custom-icon>
525
+ item 1
526
+ </custom-list-item>
527
+
528
+ <custom-list-item type="menu">
529
+ <custom-icon slot="start">info</custom-icon>
530
+ item 2
531
+ </custom-list-item>
532
+
533
+ <custom-list-item type="menu">
534
+ <custom-icon slot="start">info</custom-icon>
535
+ item 3
536
+ </custom-list-item>
537
+ </custom-menu>
538
+ </demo-section>
539
+
540
+ <demo-section route="dropdown-menu">
541
+ <custom-dropdown-menu>
542
+ <custom-list-item type="menu">
543
+ <custom-icon slot="start">info</custom-icon>
544
+ item 1
545
+ </custom-list-item>
546
+
547
+ <custom-list-item type="menu">
548
+ <custom-icon slot="start">info</custom-icon>
549
+ item 2
550
+ </custom-list-item>
551
+
552
+ <custom-list-item type="menu">
553
+ <custom-icon slot="start">info</custom-icon>
554
+ item 3
555
+ </custom-list-item>
556
+ </custom-dropdown-menu>
557
+
558
+ <flex-row>
559
+ <flex-it></flex-it>
560
+ <custom-dropdown-menu right>
561
+ <custom-list-item type="menu">
562
+ <custom-icon slot="start">info</custom-icon>
563
+ item 1
564
+ </custom-list-item>
565
+
566
+ <custom-list-item type="menu">
567
+ <custom-icon slot="start">info</custom-icon>
568
+ item 2
569
+ </custom-list-item>
570
+
571
+ <custom-list-item type="menu">
572
+ <custom-icon slot="start">info</custom-icon>
573
+ item 3
574
+ </custom-list-item>
575
+ </custom-dropdown-menu>
576
+ </flex-row>
577
+
578
+ <custom-dropdown-menu bottom>
579
+ <custom-list-item type="menu">
580
+ <custom-icon slot="start">info</custom-icon>
581
+ item 1
582
+ </custom-list-item>
583
+
584
+ <custom-list-item type="menu">
585
+ <custom-icon slot="start">info</custom-icon>
586
+ item 2
587
+ </custom-list-item>
588
+
589
+ <custom-list-item type="menu">
590
+ <custom-icon slot="start">info</custom-icon>
591
+ item 3
592
+ </custom-list-item>
593
+ </custom-dropdown-menu>
594
+
595
+ <flex-row>
596
+ <flex-it></flex-it>
597
+ <custom-dropdown-menu bottom right>
598
+ <custom-list-item type="menu">
599
+ <custom-icon slot="start">info</custom-icon>
600
+ item 1
601
+ </custom-list-item>
602
+
603
+ <custom-list-item type="menu">
604
+ <custom-icon slot="start">info</custom-icon>
605
+ item 2
606
+ </custom-list-item>
607
+
608
+ <custom-list-item type="menu">
609
+ <custom-icon slot="start">info</custom-icon>
610
+ item 3
611
+ </custom-list-item>
612
+ </custom-dropdown-menu>
613
+ </flex-row>
614
+ </demo-section>
615
+
616
+ <demo-section route="list-item">
617
+ <custom-list-item>
618
+ <custom-icon slot="start">info</custom-icon>
619
+ </custom-list-item>
620
+ </demo-section>
621
+ <demo-section route="toggle">
622
+ <custom-toggle togglers='["check_box","check_box_outline_blank", "info"]'></custom-toggle>
623
+
624
+ <custom-button label="next"></custom-button>
625
+
626
+ <script>
627
+ const toggleDemo = document.querySelector('demo-section[route="toggle"]')
628
+ toggleDemo.querySelector('custom-button').addEventListener('click', () => {
629
+ toggleDemo.querySelector('custom-toggle').next()
630
+ })
631
+ </script>
632
+ </demo-section>
633
+
634
+ <demo-section route="toggle-button">
635
+ <custom-toggle-button .togglers='["check_box","check_box_outline_blank"]'> </custom-toggle-button>
636
+ </demo-section>
637
+ </custom-pages>
638
+ </flex-column>
639
+ </custom-drawer-layout>
640
+ <!-- </custom-root> -->
641
+ <!-- </flex-row> -->
642
642
  `;
643
643
  }
644
644
  constructor() {