npm - @vandeurenglenn/lite-elements - Versions diffs - 0.3.49 → 0.3.51 - Mend

@vandeurenglenn/lite-elements 0.3.49 → 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 (142) hide show

package/exports/banner.js +37 -37
package/exports/bar/top-app-bar.d.ts +1 -1
package/exports/bundle/banner.js +2 -2
package/exports/bundle/button.js +6 -1
package/exports/bundle/card.js +1 -1
package/exports/bundle/code.js +1 -1
package/exports/bundle/{column-B0bUzxkF.js → column-dsIMZ5XT.js} +1 -1
package/exports/bundle/demo-elements.js +1 -1
package/exports/bundle/demo-icons.js +1 -1
package/exports/bundle/demo-shell.js +1 -1
package/exports/bundle/demo.js +1 -1
package/exports/bundle/dialog.js +1 -1
package/exports/bundle/divider.js +1 -1
package/exports/bundle/drawer-button.js +1 -1
package/exports/bundle/drawer-item.js +1 -1
package/exports/bundle/drawer-layout.js +1 -1
package/exports/bundle/drawer.js +2 -2
package/exports/bundle/dropdown-menu.js +1 -1
package/exports/bundle/dropdown.js +1 -1
package/exports/bundle/elements.js +1 -1
package/exports/bundle/elevation.js +1 -1
package/exports/bundle/fab.js +2 -2
package/exports/bundle/icon-button.js +1 -1
package/exports/bundle/icon-set.js +1 -1
package/exports/bundle/icon.js +1 -1
package/exports/bundle/index.html +590 -590
package/exports/bundle/input.js +2 -2
package/exports/bundle/list-item.js +1 -1
package/exports/bundle/menu.js +1 -1
package/exports/bundle/minute-field.js +1 -1
package/exports/bundle/notification.js +1 -1
package/exports/bundle/notifications.js +1 -1
package/exports/bundle/pages.js +1 -1
package/exports/bundle/pane.js +3 -3
package/exports/bundle/property-C1gA9hig.js +23 -0
package/exports/bundle/property-DL093_VN.js +11 -0
package/exports/bundle/rail.js +1 -1
package/exports/bundle/root.js +2 -2
package/exports/bundle/row-CW5FbTZ_.js +28 -0
package/exports/bundle/section.js +1 -1
package/exports/bundle/section2.js +1 -1
package/exports/bundle/select-mixin.js +1 -1
package/exports/bundle/selector-mixin.js +1 -1
package/exports/bundle/selector.js +1 -1
package/exports/bundle/summary-mirror.js +1 -1
package/exports/bundle/summary.js +2 -2
package/exports/bundle/supporting-pane.js +1 -1
package/exports/bundle/tab.js +2 -2
package/exports/bundle/tabs.js +1 -1
package/exports/bundle/text-field.js +1 -1
package/exports/bundle/theme.js +1 -1
package/exports/bundle/themes/default/colors.module.css +180 -180
package/exports/bundle/themes/default/missing/motion.css +3 -3
package/exports/bundle/themes/default/missing/shape.css +12 -12
package/exports/bundle/themes/default/missing/theme.dark.css +4 -4
package/exports/bundle/themes/default/missing/theme.light.css +4 -4
package/exports/bundle/themes/default/missing/tokens.css +8 -8
package/exports/bundle/themes/default/theme.css +10 -10
package/exports/bundle/themes/default/theme.dark.css +33 -33
package/exports/bundle/themes/default/theme.light.css +33 -33
package/exports/bundle/themes/default/tokens.css +256 -256
package/exports/bundle/themes/default/typography.module.css +150 -150
package/exports/bundle/time-picker.js +1 -1
package/exports/bundle/toggle-button.js +1 -1
package/exports/bundle/toggle.js +1 -1
package/exports/bundle/top-app-bar.js +63 -2
package/exports/bundle/typography.js +1 -1
package/exports/bundle/upload-file.js +1 -1
package/exports/bundle/upload-image.js +62 -55
package/exports/button.js +149 -144
package/exports/card.js +140 -140
package/exports/code.js +35 -35
package/exports/demo-elements.js +1 -1
package/exports/demo-icons.js +16 -16
package/exports/demo-shell.js +540 -540
package/exports/demo.js +457 -457
package/exports/dialog.js +149 -149
package/exports/divider.js +22 -22
package/exports/drawer-button.js +14 -14
package/exports/drawer-item.js +39 -39
package/exports/drawer-layout.js +96 -96
package/exports/drawer.js +8 -8
package/exports/dropdown-menu.js +59 -59
package/exports/dropdown.js +26 -26
package/exports/elements.js +1 -1
package/exports/elevation.js +51 -51
package/exports/fab.js +146 -146
package/exports/icon-button.js +13 -13
package/exports/icon-set.js +5 -5
package/exports/icon.js +16 -16
package/exports/input.js +6 -6
package/exports/list-item.js +43 -43
package/exports/menu.js +13 -13
package/exports/minute-field.js +5 -5
package/exports/mixins/scroll-mixin.d.ts +1 -1
package/exports/notification.js +35 -35
package/exports/notifications.js +66 -66
package/exports/pages.js +42 -42
package/exports/pane.js +19 -19
package/exports/rail.js +58 -58
package/exports/root.js +8 -8
package/exports/section/section.d.ts +2 -2
package/exports/section.js +11 -11
package/exports/section2.js +25 -25
package/exports/selector.js +31 -31
package/exports/summary-mirror.js +20 -20
package/exports/summary.js +25 -25
package/exports/supporting-pane.js +47 -47
package/exports/tab.js +22 -22
package/exports/tabs.js +51 -51
package/exports/text-field.js +10 -10
package/exports/theme.js +9 -9
package/exports/themes/default/colors.module.css +180 -180
package/exports/themes/default/missing/motion.css +3 -3
package/exports/themes/default/missing/shape.css +12 -12
package/exports/themes/default/missing/theme.dark.css +4 -4
package/exports/themes/default/missing/theme.light.css +4 -4
package/exports/themes/default/missing/tokens.css +8 -8
package/exports/themes/default/theme.css +10 -10
package/exports/themes/default/theme.dark.css +33 -33
package/exports/themes/default/theme.light.css +33 -33
package/exports/themes/default/tokens.css +256 -256
package/exports/themes/default/typography.module.css +150 -150
package/exports/time-picker.js +21 -21
package/exports/toggle-button.js +4 -4
package/exports/toggle.js +5 -5
package/exports/top-app-bar.js +21 -21
package/exports/{tslib.es6-CFl_-KPR.js → tslib.es6-Cg9lAhfj.js} +1 -1
package/exports/typography.js +156 -156
package/exports/upload-file.js +9 -9
package/exports/upload-image.js +201 -201
package/package.json +20 -36
package/exports/bundle/property-BYA8Sw2t.js +0 -11
package/exports/bundle/property-C4lhirVQ.js +0 -23
package/exports/bundle/row-DYDgQVDj.js +0 -28
package/exports/bundle/simple-hash-router.js +0 -1
package/exports/bundle/types2.js +0 -1
package/exports/mixins/file-reader-mixin.d.ts +0 -341
package/exports/router/types.d.ts +0 -45
package/exports/simple-hash-router.js +0 -111
package/exports/types2.js +0 -1
package/exports/upload/upload-image.d.ts +0 -381

package/exports/demo.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
 import { customElement, query, css, html, LiteElement } from '@vandeurenglenn/lite';
 let DemoShell = (() => {
@@ -32,10 +32,10 @@ let DemoShell = (() => {
         get pages() { return this.#pages_accessor_storage; }
         set pages(value) { this.#pages_accessor_storage = value; }
         static styles = [
-            css `
-      :host {
-        display: block;
-      }
+            css `
+      :host {
+        display: block;
+      }
     `
         ];
         async connectedCallback() {
@@ -56,458 +56,458 @@ let DemoShell = (() => {
                 }
         }
         render() {
-            return html `
-      <custom-drawer-layout class="demo-container">
-        <span slot="drawer-headline"> menu </span>
-        <flex-column slot="drawer-content">
-          <custom-selector attr-for-selected="route" default-selected="banner">
-            <custom-drawer-item route="banner">banner</custom-drawer-item>
-            <custom-drawer-item route="dialog">dialog</custom-drawer-item>
-            <custom-drawer-item route="divider">divider</custom-drawer-item>
-            <custom-drawer-item route="buttons">buttons</custom-drawer-item>
-            <custom-drawer-item route="cards">cards</custom-drawer-item>
-            <custom-drawer-item route="top-app-bar">top-app-bar</custom-drawer-item>
-            <custom-drawer-item route="typography">typography</custom-drawer-item>
-            <custom-drawer-item route="drawer">drawer</custom-drawer-item>
-            <custom-drawer-item route="pane">pane</custom-drawer-item>
-            <custom-drawer-item route="supporting-pane">supporting pane</custom-drawer-item>
-            <custom-drawer-item route="tabs">tabs</custom-drawer-item>
-            <custom-drawer-item route="menu">menu</custom-drawer-item>
-            <custom-drawer-item route="dropdown-menu">dropdown-menu</custom-drawer-item>
-            <custom-drawer-item route="list-item">list-item</custom-drawer-item>
-            <custom-drawer-item route="toggle">toggle</custom-drawer-item>
-            <custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
-          </custom-selector>
-        </flex-column>
-        <span slot="top-app-bar-title">custom-elements</span>
-        <flex-row slot="top-app-bar-end">
-          <custom-theme-mode></custom-theme-mode>
-          <custom-button>
-            <custom-icon slot="icon">more_vert</custom-icon>
-          </custom-button>
-        </flex-row>
-        <flex-column>
-          <custom-pages attr-for-selected="route" default-selected="banner">
-            <demo-section route="banner">
-              <custom-banner>Banner</custom-banner>
-            </demo-section>
-            <demo-section route="divider">
-              <custom-divider></custom-divider>
-              <custom-divider inset></custom-divider>
-              <custom-divider middle-inset></custom-divider>
-            </demo-section>
-            <demo-section route="cards">
-              <custom-card type="filled">
-                <span slot="headline">filled</span>
-                <span slot="subline">subline</span>
-                <p slot="supportingText">
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
-                  magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
-                  facilis et quasi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi
-                  eum aliquam enim, magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam
-                  praesentium veritatis facilis et quasi?
-                </p>
-                <flex-row slot="actions">
-                  <custom-button type="filled" label="YES"></custom-button>
-                </flex-row>
-              </custom-card>
-              <custom-card type="elevated">
-                <span slot="headline">elevated</span>
-                <span slot="subline">subline</span>
-                <p slot="supportingText">
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
-                  magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
-                  facilis et quasi?
-                </p>
-                <flex-row slot="actions">
-                  <custom-button type="elevated" label="YES"></custom-button>
-                </flex-row>
-              </custom-card>
-              <custom-card type="outlined">
-                <span slot="headline">outlined</span>
-                <span slot="subline">subline</span>
-                <p slot="supportingText">
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
-                  magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
-                  facilis et quasi?
-                </p>
-                <flex-row slot="actions">
-                  <custom-button type="outlined" label="YES"></custom-button>
-                </flex-row>
-              </custom-card>
-              <custom-card type="tertiary">
-                <img
-                  loading="lazy"
-                  slot="image"
-                  src="https://lh3.googleusercontent.com/9NBw6U14z6f-EAnwPqfcX-mIkxNdpK0IXvwiun9w84JkMcZfBT0bfRqn7QWdBVqnCYC5hsDEnGhSjbaWcgi1HT_Q6pCioSRTgMFODqZdAXw=s0"
-                />
-                <span slot="headline">tertiary</span>
-                <span slot="subline">subline</span>
-                <flex-row slot="actions">
-                  <custom-button type="tertiary" label="YES"></custom-button>
-                </flex-row>
-              </custom-card>
-            </demo-section>
-            <demo-section route="buttons">
-              <custom-button type="text" label="text"></custom-button>
-              <custom-button type="text" label="with icon">
-                <span slot="icon">+</span>
-              </custom-button>
-              <custom-button type="filled" label="filled"></custom-button>
-              <custom-button type="filled" label="with icon">
-                <span slot="icon">+</span>
-              </custom-button>
-              <custom-button type="elevated" label="elevated"></custom-button>
-              <custom-button type="elevated" label="with icon">
-                <span slot="icon">+</span>
-              </custom-button>
-              <custom-button type="outlined" label="outlined"></custom-button>
-              <custom-button type="outlined" label="with icon">
-                <span slot="icon">+</span>
-              </custom-button>
-              <custom-button type="tonal" label="tonal"></custom-button>
-              <custom-button type="tonal" label="with icon">
-                <span slot="icon">+</span>
-              </custom-button>
-              <custom-button type="tertiary" label="tertiary"></custom-button>
-              <custom-button type="tertiary" label="with icon">
-                <span slot="icon">+</span>
-              </custom-button>
-            </demo-section>
-            <demo-section route="top-app-bar">
-              <custom-top-app-bar>
-                <span slot="title">title</span>
-              </custom-top-app-bar>
-              <custom-top-app-bar type="small">
-                <custom-icon-button slot="start" icon="menu"></custom-icon-button>
-                <span slot="title">title</span>
-              </custom-top-app-bar>
-              <custom-top-app-bar type="medium">
-                <custom-icon-button slot="start" icon="menu"></custom-icon-button>
-                <span slot="title">title</span>
-              </custom-top-app-bar>
-              <custom-top-app-bar type="large">
-                <custom-icon-button slot="start" icon="menu"></custom-icon-button>
-                <span slot="title">title</span>
-              </custom-top-app-bar>
-            </demo-section>
-            <demo-section route="typography">
-              <custom-typography>
-                <span>title</span>
-              </custom-typography>
-              <custom-typography size="medium">
-                <span>title medium</span>
-              </custom-typography>
-              <custom-typography size="small">
-                <span>title small</span>
-              </custom-typography>
-              <custom-typography type="body">
-                <span>body</span>
-              </custom-typography>
-              <custom-typography type="body" size="medium">
-                <span>body medium</span>
-              </custom-typography>
-              <custom-typography type="body" size="small">
-                <span>body small</span>
-              </custom-typography>
-              <custom-typography type="label">
-                <span>label</span>
-              </custom-typography>
-              <custom-typography type="label" size="medium">
-                <span>label medium</span>
-              </custom-typography>
-              <custom-typography type="label" size="small">
-                <span>label small</span>
-              </custom-typography>
-              <custom-typography type="headline">
-                <span>headline</span>
-              </custom-typography>
-              <custom-typography type="headline" size="medium">
-                <span>headline medium</span>
-              </custom-typography>
-              <custom-typography type="headline" size="small">
-                <span>headline small</span>
-              </custom-typography>
-              <custom-typography type="display">
-                <span>display</span>
-              </custom-typography>
-              <custom-typography type="display" size="medium">
-                <span>display medium</span>
-              </custom-typography>
-              <custom-typography type="display" size="small">
-                <span>display small</span>
-              </custom-typography>
-            </demo-section>
-            <demo-section route="drawer">
-              <custom-drawer open type="modal" id="demo-drawer">
-                <span slot="content">
-                  <custom-drawer-item>home</custom-drawer-item>
-                  <custom-drawer-item>about</custom-drawer-item>
-                </span>
-              </custom-drawer>
-              <custom-drawer-button id="demo-drawer"></custom-drawer-button>
-              <custom-selector>
-                <custom-drawer-item id="demo-drawer">drawer-item</custom-drawer-item>
-              </custom-selector>
-            </demo-section>
-            <demo-section route="pane">
-              <custom-pane open type="modal" id="demo-pane">
-                <span slot="content">
-                  <custom-drawer-item>home</custom-drawer-item>
-                  <custom-drawer-item>about</custom-drawer-item>
-                </span>
-              </custom-pane>
-              <custom-pane open type="modal" id="demo-pane" right>
-                <span slot="content">
-                  <custom-drawer-item>home</custom-drawer-item>
-                  <custom-drawer-item>about</custom-drawer-item>
-                </span>
-              </custom-pane>
-            </demo-section>
-            <demo-section route="tabs">
-              <custom-tabs>
-                <custom-tab>home</custom-tab>
-                <custom-tab>about</custom-tab>
-              </custom-tabs>
-            </demo-section>
-            <demo-section route="dialog">
-              <flex-container>
-                <custom-button class="fullscreen-dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
-                <custom-dialog fullscreen>
-                  <span slot="title">title</span>
-                  <p>
-                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
-                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
-                    dolorem corporis.
-                  </p>
-                  <p>
-                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
-                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
-                    dolorem corporis.
-                  </p>
-                  <p>
-                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
-                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
-                    dolorem corporis.
-                  </p>
-                  <p>
-                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
-                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
-                    dolorem corporis.
-                  </p>
-                  <p>
-                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
-                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
-                    dolorem corporis.
-                  </p>
-                  <p>
-                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
-                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
-                    dolorem corporis.
-                  </p>
-                  <flex-row slot="actions">
-                    <custom-button label="agree" action="agree">agree</custom-button>
-                  </flex-row>
-                </custom-dialog>
-                <script>
-                  const demoSection = document.querySelector('demo-section[route="dialog"]')
-                  const fullscreenDialog = demoSection.querySelector('custom-dialog[fullscreen]')
-                  demoSection.querySelector('.fullscreen-dialog').addEventListener('click', () => {
-                    fullscreenDialog.open = !fullscreenDialog.open
-                  })
-                </script>
-              </flex-container>
-              <flex-container>
-                <custom-button class="dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
-                <custom-dialog class="dialog">
-                  <span slot="title">title</span>
-                  <p>
-                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
-                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
-                    dolorem corporis.
-                  </p>
-                  <flex-row slot="actions">
-                    <custom-button label="agree" action="agree">agree</custom-button>
-                  </flex-row>
-                </custom-dialog>
-                <script>
-                  const dialog = demoSection.querySelector('custom-dialog.dialog')
-                  demoSection.querySelector('.dialog').addEventListener('click', () => {
-                    dialog.open = !dialog.open
-                  })
-                </script>
-              </flex-container>
-            </demo-section>
-            <demo-section route="menu">
-              <custom-menu>
-                <custom-list-item type="menu">
-                  <custom-icon slot="start">info</custom-icon>
-                  item 1
-                </custom-list-item>
-                <custom-list-item type="menu">
-                  <custom-icon slot="start">info</custom-icon>
-                  item 2
-                </custom-list-item>
-                <custom-list-item type="menu">
-                  <custom-icon slot="start">info</custom-icon>
-                  item 3
-                </custom-list-item>
-              </custom-menu>
-            </demo-section>
-            <demo-section route="dropdown-menu">
-              <custom-dropdown-menu>
-                <custom-list-item type="menu">
-                  <custom-icon slot="start">info</custom-icon>
-                  item 1
-                </custom-list-item>
-                <custom-list-item type="menu">
-                  <custom-icon slot="start">info</custom-icon>
-                  item 2
-                </custom-list-item>
-                <custom-list-item type="menu">
-                  <custom-icon slot="start">info</custom-icon>
-                  item 3
-                </custom-list-item>
-              </custom-dropdown-menu>
-              <flex-row>
-                <flex-it></flex-it>
-                <custom-dropdown-menu right>
-                  <custom-list-item type="menu">
-                    <custom-icon slot="start">info</custom-icon>
-                    item 1
-                  </custom-list-item>
-                  <custom-list-item type="menu">
-                    <custom-icon slot="start">info</custom-icon>
-                    item 2
-                  </custom-list-item>
-                  <custom-list-item type="menu">
-                    <custom-icon slot="start">info</custom-icon>
-                    item 3
-                  </custom-list-item>
-                </custom-dropdown-menu>
-              </flex-row>
-              <custom-dropdown-menu bottom>
-                <custom-list-item type="menu">
-                  <custom-icon slot="start">info</custom-icon>
-                  item 1
-                </custom-list-item>
-                <custom-list-item type="menu">
-                  <custom-icon slot="start">info</custom-icon>
-                  item 2
-                </custom-list-item>
-                <custom-list-item type="menu">
-                  <custom-icon slot="start">info</custom-icon>
-                  item 3
-                </custom-list-item>
-              </custom-dropdown-menu>
-              <flex-row>
-                <flex-it></flex-it>
-                <custom-dropdown-menu bottom right>
-                  <custom-list-item type="menu">
-                    <custom-icon slot="start">info</custom-icon>
-                    item 1
-                  </custom-list-item>
-                  <custom-list-item type="menu">
-                    <custom-icon slot="start">info</custom-icon>
-                    item 2
-                  </custom-list-item>
-                  <custom-list-item type="menu">
-                    <custom-icon slot="start">info</custom-icon>
-                    item 3
-                  </custom-list-item>
-                </custom-dropdown-menu>
-              </flex-row>
-            </demo-section>
-            <demo-section route="list-item">
-              <custom-list-item>
-                <custom-icon slot="start">info</custom-icon>
-              </custom-list-item>
-            </demo-section>
-            <demo-section route="toggle">
-              <custom-toggle>
-                <custom-icon>check_box</custom-icon>
-                <custom-icon>check_box_outline_blank</custom-icon>
-                <custom-icon>info</custom-icon>
-              </custom-toggle>
-            </demo-section>
-            <demo-section route="toggle-button">
-              <custom-toggle-button>
-                <custom-icon>check_box</custom-icon>
-                <custom-icon>check_box_outline_blank</custom-icon>
-              </custom-toggle-button>
-            </demo-section>
-          </custom-pages>
-        </flex-column>
-      </custom-drawer-layout>
+            return html `
+      <custom-drawer-layout class="demo-container">
+        <span slot="drawer-headline"> menu </span>
+        <flex-column slot="drawer-content">
+          <custom-selector attr-for-selected="route" default-selected="banner">
+            <custom-drawer-item route="banner">banner</custom-drawer-item>
+            <custom-drawer-item route="dialog">dialog</custom-drawer-item>
+            <custom-drawer-item route="divider">divider</custom-drawer-item>
+            <custom-drawer-item route="buttons">buttons</custom-drawer-item>
+            <custom-drawer-item route="cards">cards</custom-drawer-item>
+            <custom-drawer-item route="top-app-bar">top-app-bar</custom-drawer-item>
+            <custom-drawer-item route="typography">typography</custom-drawer-item>
+            <custom-drawer-item route="drawer">drawer</custom-drawer-item>
+            <custom-drawer-item route="pane">pane</custom-drawer-item>
+            <custom-drawer-item route="supporting-pane">supporting pane</custom-drawer-item>
+            <custom-drawer-item route="tabs">tabs</custom-drawer-item>
+            <custom-drawer-item route="menu">menu</custom-drawer-item>
+            <custom-drawer-item route="dropdown-menu">dropdown-menu</custom-drawer-item>
+            <custom-drawer-item route="list-item">list-item</custom-drawer-item>
+            <custom-drawer-item route="toggle">toggle</custom-drawer-item>
+            <custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
+          </custom-selector>
+        </flex-column>
+        <span slot="top-app-bar-title">custom-elements</span>
+        <flex-row slot="top-app-bar-end">
+          <custom-theme-mode></custom-theme-mode>
+          <custom-button>
+            <custom-icon slot="icon">more_vert</custom-icon>
+          </custom-button>
+        </flex-row>
+        <flex-column>
+          <custom-pages attr-for-selected="route" default-selected="banner">
+            <demo-section route="banner">
+              <custom-banner>Banner</custom-banner>
+            </demo-section>
+            <demo-section route="divider">
+              <custom-divider></custom-divider>
+              <custom-divider inset></custom-divider>
+              <custom-divider middle-inset></custom-divider>
+            </demo-section>
+            <demo-section route="cards">
+              <custom-card type="filled">
+                <span slot="headline">filled</span>
+                <span slot="subline">subline</span>
+                <p slot="supportingText">
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
+                  magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
+                  facilis et quasi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi
+                  eum aliquam enim, magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam
+                  praesentium veritatis facilis et quasi?
+                </p>
+                <flex-row slot="actions">
+                  <custom-button type="filled" label="YES"></custom-button>
+                </flex-row>
+              </custom-card>
+              <custom-card type="elevated">
+                <span slot="headline">elevated</span>
+                <span slot="subline">subline</span>
+                <p slot="supportingText">
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
+                  magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
+                  facilis et quasi?
+                </p>
+                <flex-row slot="actions">
+                  <custom-button type="elevated" label="YES"></custom-button>
+                </flex-row>
+              </custom-card>
+              <custom-card type="outlined">
+                <span slot="headline">outlined</span>
+                <span slot="subline">subline</span>
+                <p slot="supportingText">
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
+                  magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
+                  facilis et quasi?
+                </p>
+                <flex-row slot="actions">
+                  <custom-button type="outlined" label="YES"></custom-button>
+                </flex-row>
+              </custom-card>
+              <custom-card type="tertiary">
+                <img
+                  loading="lazy"
+                  slot="image"
+                  src="https://lh3.googleusercontent.com/9NBw6U14z6f-EAnwPqfcX-mIkxNdpK0IXvwiun9w84JkMcZfBT0bfRqn7QWdBVqnCYC5hsDEnGhSjbaWcgi1HT_Q6pCioSRTgMFODqZdAXw=s0"
+                />
+                <span slot="headline">tertiary</span>
+                <span slot="subline">subline</span>
+                <flex-row slot="actions">
+                  <custom-button type="tertiary" label="YES"></custom-button>
+                </flex-row>
+              </custom-card>
+            </demo-section>
+            <demo-section route="buttons">
+              <custom-button type="text" label="text"></custom-button>
+              <custom-button type="text" label="with icon">
+                <span slot="icon">+</span>
+              </custom-button>
+              <custom-button type="filled" label="filled"></custom-button>
+              <custom-button type="filled" label="with icon">
+                <span slot="icon">+</span>
+              </custom-button>
+              <custom-button type="elevated" label="elevated"></custom-button>
+              <custom-button type="elevated" label="with icon">
+                <span slot="icon">+</span>
+              </custom-button>
+              <custom-button type="outlined" label="outlined"></custom-button>
+              <custom-button type="outlined" label="with icon">
+                <span slot="icon">+</span>
+              </custom-button>
+              <custom-button type="tonal" label="tonal"></custom-button>
+              <custom-button type="tonal" label="with icon">
+                <span slot="icon">+</span>
+              </custom-button>
+              <custom-button type="tertiary" label="tertiary"></custom-button>
+              <custom-button type="tertiary" label="with icon">
+                <span slot="icon">+</span>
+              </custom-button>
+            </demo-section>
+            <demo-section route="top-app-bar">
+              <custom-top-app-bar>
+                <span slot="title">title</span>
+              </custom-top-app-bar>
+              <custom-top-app-bar type="small">
+                <custom-icon-button slot="start" icon="menu"></custom-icon-button>
+                <span slot="title">title</span>
+              </custom-top-app-bar>
+              <custom-top-app-bar type="medium">
+                <custom-icon-button slot="start" icon="menu"></custom-icon-button>
+                <span slot="title">title</span>
+              </custom-top-app-bar>
+              <custom-top-app-bar type="large">
+                <custom-icon-button slot="start" icon="menu"></custom-icon-button>
+                <span slot="title">title</span>
+              </custom-top-app-bar>
+            </demo-section>
+            <demo-section route="typography">
+              <custom-typography>
+                <span>title</span>
+              </custom-typography>
+              <custom-typography size="medium">
+                <span>title medium</span>
+              </custom-typography>
+              <custom-typography size="small">
+                <span>title small</span>
+              </custom-typography>
+              <custom-typography type="body">
+                <span>body</span>
+              </custom-typography>
+              <custom-typography type="body" size="medium">
+                <span>body medium</span>
+              </custom-typography>
+              <custom-typography type="body" size="small">
+                <span>body small</span>
+              </custom-typography>
+              <custom-typography type="label">
+                <span>label</span>
+              </custom-typography>
+              <custom-typography type="label" size="medium">
+                <span>label medium</span>
+              </custom-typography>
+              <custom-typography type="label" size="small">
+                <span>label small</span>
+              </custom-typography>
+              <custom-typography type="headline">
+                <span>headline</span>
+              </custom-typography>
+              <custom-typography type="headline" size="medium">
+                <span>headline medium</span>
+              </custom-typography>
+              <custom-typography type="headline" size="small">
+                <span>headline small</span>
+              </custom-typography>
+              <custom-typography type="display">
+                <span>display</span>
+              </custom-typography>
+              <custom-typography type="display" size="medium">
+                <span>display medium</span>
+              </custom-typography>
+              <custom-typography type="display" size="small">
+                <span>display small</span>
+              </custom-typography>
+            </demo-section>
+            <demo-section route="drawer">
+              <custom-drawer open type="modal" id="demo-drawer">
+                <span slot="content">
+                  <custom-drawer-item>home</custom-drawer-item>
+                  <custom-drawer-item>about</custom-drawer-item>
+                </span>
+              </custom-drawer>
+              <custom-drawer-button id="demo-drawer"></custom-drawer-button>
+              <custom-selector>
+                <custom-drawer-item id="demo-drawer">drawer-item</custom-drawer-item>
+              </custom-selector>
+            </demo-section>
+            <demo-section route="pane">
+              <custom-pane open type="modal" id="demo-pane">
+                <span slot="content">
+                  <custom-drawer-item>home</custom-drawer-item>
+                  <custom-drawer-item>about</custom-drawer-item>
+                </span>
+              </custom-pane>
+              <custom-pane open type="modal" id="demo-pane" right>
+                <span slot="content">
+                  <custom-drawer-item>home</custom-drawer-item>
+                  <custom-drawer-item>about</custom-drawer-item>
+                </span>
+              </custom-pane>
+            </demo-section>
+            <demo-section route="tabs">
+              <custom-tabs>
+                <custom-tab>home</custom-tab>
+                <custom-tab>about</custom-tab>
+              </custom-tabs>
+            </demo-section>
+            <demo-section route="dialog">
+              <flex-container>
+                <custom-button class="fullscreen-dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
+                <custom-dialog fullscreen>
+                  <span slot="title">title</span>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <flex-row slot="actions">
+                    <custom-button label="agree" action="agree">agree</custom-button>
+                  </flex-row>
+                </custom-dialog>
+                <script>
+                  const demoSection = document.querySelector('demo-section[route="dialog"]')
+                  const fullscreenDialog = demoSection.querySelector('custom-dialog[fullscreen]')
+                  demoSection.querySelector('.fullscreen-dialog').addEventListener('click', () => {
+                    fullscreenDialog.open = !fullscreenDialog.open
+                  })
+                </script>
+              </flex-container>
+              <flex-container>
+                <custom-button class="dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
+                <custom-dialog class="dialog">
+                  <span slot="title">title</span>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <flex-row slot="actions">
+                    <custom-button label="agree" action="agree">agree</custom-button>
+                  </flex-row>
+                </custom-dialog>
+                <script>
+                  const dialog = demoSection.querySelector('custom-dialog.dialog')
+                  demoSection.querySelector('.dialog').addEventListener('click', () => {
+                    dialog.open = !dialog.open
+                  })
+                </script>
+              </flex-container>
+            </demo-section>
+            <demo-section route="menu">
+              <custom-menu>
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 1
+                </custom-list-item>
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 2
+                </custom-list-item>
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 3
+                </custom-list-item>
+              </custom-menu>
+            </demo-section>
+            <demo-section route="dropdown-menu">
+              <custom-dropdown-menu>
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 1
+                </custom-list-item>
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 2
+                </custom-list-item>
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 3
+                </custom-list-item>
+              </custom-dropdown-menu>
+              <flex-row>
+                <flex-it></flex-it>
+                <custom-dropdown-menu right>
+                  <custom-list-item type="menu">
+                    <custom-icon slot="start">info</custom-icon>
+                    item 1
+                  </custom-list-item>
+                  <custom-list-item type="menu">
+                    <custom-icon slot="start">info</custom-icon>
+                    item 2
+                  </custom-list-item>
+                  <custom-list-item type="menu">
+                    <custom-icon slot="start">info</custom-icon>
+                    item 3
+                  </custom-list-item>
+                </custom-dropdown-menu>
+              </flex-row>
+              <custom-dropdown-menu bottom>
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 1
+                </custom-list-item>
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 2
+                </custom-list-item>
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 3
+                </custom-list-item>
+              </custom-dropdown-menu>
+              <flex-row>
+                <flex-it></flex-it>
+                <custom-dropdown-menu bottom right>
+                  <custom-list-item type="menu">
+                    <custom-icon slot="start">info</custom-icon>
+                    item 1
+                  </custom-list-item>
+                  <custom-list-item type="menu">
+                    <custom-icon slot="start">info</custom-icon>
+                    item 2
+                  </custom-list-item>
+                  <custom-list-item type="menu">
+                    <custom-icon slot="start">info</custom-icon>
+                    item 3
+                  </custom-list-item>
+                </custom-dropdown-menu>
+              </flex-row>
+            </demo-section>
+            <demo-section route="list-item">
+              <custom-list-item>
+                <custom-icon slot="start">info</custom-icon>
+              </custom-list-item>
+            </demo-section>
+            <demo-section route="toggle">
+              <custom-toggle>
+                <custom-icon>check_box</custom-icon>
+                <custom-icon>check_box_outline_blank</custom-icon>
+                <custom-icon>info</custom-icon>
+              </custom-toggle>
+            </demo-section>
+            <demo-section route="toggle-button">
+              <custom-toggle-button>
+                <custom-icon>check_box</custom-icon>
+                <custom-icon>check_box_outline_blank</custom-icon>
+              </custom-toggle-button>
+            </demo-section>
+          </custom-pages>
+        </flex-column>
+      </custom-drawer-layout>
     `;
         }
         constructor() {