npm - @vandeurenglenn/lite-elements - Versions diffs - 0.3.18 - Mend

@vandeurenglenn/lite-elements 0.3.18

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 (158) hide show

package/exports/banner/banner.d.ts +7 -0
package/exports/banner.js +68 -0
package/exports/bundle/banner.js +37 -0
package/exports/bundle/button.js +144 -0
package/exports/bundle/card.js +140 -0
package/exports/bundle/code.js +35 -0
package/exports/bundle/custom-element-c2e883ba.js +1 -0
package/exports/bundle/demo-elements.js +1 -0
package/exports/bundle/demo-icons.js +16 -0
package/exports/bundle/demo-shell.js +540 -0
package/exports/bundle/demo.js +457 -0
package/exports/bundle/dial.js +1 -0
package/exports/bundle/dialog.js +149 -0
package/exports/bundle/divider.js +21 -0
package/exports/bundle/drawer-button.js +18 -0
package/exports/bundle/drawer-item.js +39 -0
package/exports/bundle/drawer-layout.js +96 -0
package/exports/bundle/drawer.js +56 -0
package/exports/bundle/dropdown-menu.js +59 -0
package/exports/bundle/dropdown.js +26 -0
package/exports/bundle/elements.js +1 -0
package/exports/bundle/elevation.js +56 -0
package/exports/bundle/hour-field.js +1 -0
package/exports/bundle/icon-button.js +13 -0
package/exports/bundle/icon-set.js +5 -0
package/exports/bundle/icon.js +16 -0
package/exports/bundle/index-3c006227.js +1 -0
package/exports/bundle/index.html +590 -0
package/exports/bundle/input.js +6 -0
package/exports/bundle/it-d4d177bf.js +1 -0
package/exports/bundle/list-item.js +43 -0
package/exports/bundle/list.js +1 -0
package/exports/bundle/menu.js +13 -0
package/exports/bundle/menu2.js +1 -0
package/exports/bundle/minute-field.js +5 -0
package/exports/bundle/pages.js +43 -0
package/exports/bundle/pane.js +96 -0
package/exports/bundle/property-58e28172.js +11 -0
package/exports/bundle/query-73dacde5.js +1 -0
package/exports/bundle/rail.js +58 -0
package/exports/bundle/root.js +8 -0
package/exports/bundle/scroll-mixin.js +1 -0
package/exports/bundle/section.js +11 -0
package/exports/bundle/section2.js +25 -0
package/exports/bundle/select-mixin.js +1 -0
package/exports/bundle/selector-mixin.js +1 -0
package/exports/bundle/selector.js +31 -0
package/exports/bundle/supporting-pane.js +47 -0
package/exports/bundle/tab.js +22 -0
package/exports/bundle/tabs.js +51 -0
package/exports/bundle/text-field.js +10 -0
package/exports/bundle/theme.js +1 -0
package/exports/bundle/themes/default/colors.module.css +180 -0
package/exports/bundle/themes/default/missing/motion.css +4 -0
package/exports/bundle/themes/default/missing/shape.css +13 -0
package/exports/bundle/themes/default/missing/theme.dark.css +5 -0
package/exports/bundle/themes/default/missing/theme.light.css +5 -0
package/exports/bundle/themes/default/missing/tokens.css +9 -0
package/exports/bundle/themes/default/theme.css +10 -0
package/exports/bundle/themes/default/theme.dark.css +33 -0
package/exports/bundle/themes/default/theme.light.css +33 -0
package/exports/bundle/themes/default/tokens.css +256 -0
package/exports/bundle/themes/default/typography.module.css +150 -0
package/exports/bundle/time-picker.js +21 -0
package/exports/bundle/title.js +1 -0
package/exports/bundle/toggle-button.js +4 -0
package/exports/bundle/toggle.js +5 -0
package/exports/bundle/top-app-bar-e6e33a9e.js +114 -0
package/exports/bundle/top-app-bar.js +1 -0
package/exports/bundle/types.js +1 -0
package/exports/bundle/typography.js +156 -0
package/exports/button.js +227 -0
package/exports/card/card.d.ts +13 -0
package/exports/card.js +187 -0
package/exports/code.js +77 -0
package/exports/demo-elements.d.ts +9 -0
package/exports/demo-elements.js +10 -0
package/exports/demo-icons.js +48 -0
package/exports/demo-shell.js +648 -0
package/exports/demo.js +524 -0
package/exports/dial.js +1 -0
package/exports/dialog.js +256 -0
package/exports/divider/divider.d.ts +17 -0
package/exports/divider.js +54 -0
package/exports/drawer/drawer-button.d.ts +9 -0
package/exports/drawer/drawer-layout.d.ts +19 -0
package/exports/drawer/drawer.d.ts +13 -0
package/exports/drawer-button.js +83 -0
package/exports/drawer-item.js +69 -0
package/exports/drawer-layout.js +209 -0
package/exports/drawer.js +140 -0
package/exports/dropdown-menu.js +172 -0
package/exports/dropdown.js +68 -0
package/exports/elements.d.ts +63 -0
package/exports/elements.js +41 -0
package/exports/elevation/elevation.d.ts +11 -0
package/exports/elevation.js +97 -0
package/exports/hour-field.js +1 -0
package/exports/icon-button.js +59 -0
package/exports/icon-set.js +52 -0
package/exports/icon.js +103 -0
package/exports/input.js +36 -0
package/exports/list/list.d.ts +1 -0
package/exports/list-item.js +127 -0
package/exports/list.js +1 -0
package/exports/menu.js +68 -0
package/exports/menu2.js +1 -0
package/exports/minute-field.js +36 -0
package/exports/mixins/scroll-mixin.d.ts +13 -0
package/exports/mixins/select-mixin.d.ts +32 -0
package/exports/mixins/selector-mixin.d.ts +8 -0
package/exports/pages.js +88 -0
package/exports/pane/pane.d.ts +14 -0
package/exports/pane.js +182 -0
package/exports/rail/rail.d.ts +9 -0
package/exports/rail.js +124 -0
package/exports/root.js +39 -0
package/exports/scroll-mixin.js +36 -0
package/exports/section.js +54 -0
package/exports/section2.js +58 -0
package/exports/select-mixin.js +139 -0
package/exports/selector-mixin.js +43 -0
package/exports/selector.js +63 -0
package/exports/supporting-pane/supporting-pane.d.ts +12 -0
package/exports/supporting-pane.js +133 -0
package/exports/tab.js +47 -0
package/exports/tabs/menu.d.ts +1 -0
package/exports/tabs/tab.d.ts +4 -0
package/exports/tabs/tabs.d.ts +5 -0
package/exports/tabs.js +80 -0
package/exports/text-field.js +88 -0
package/exports/theme/theme.d.ts +15 -0
package/exports/theme.js +123 -0
package/exports/themes/default/colors.module.css +180 -0
package/exports/themes/default/missing/motion.css +4 -0
package/exports/themes/default/missing/shape.css +13 -0
package/exports/themes/default/missing/theme.dark.css +5 -0
package/exports/themes/default/missing/theme.light.css +5 -0
package/exports/themes/default/missing/tokens.css +9 -0
package/exports/themes/default/theme.css +10 -0
package/exports/themes/default/theme.dark.css +33 -0
package/exports/themes/default/theme.light.css +33 -0
package/exports/themes/default/tokens.css +256 -0
package/exports/themes/default/typography.module.css +150 -0
package/exports/time-picker/dial.d.ts +1 -0
package/exports/time-picker/hour-field.d.ts +1 -0
package/exports/time-picker.js +52 -0
package/exports/title.js +1 -0
package/exports/toggle/toggle-button.d.ts +13 -0
package/exports/toggle-button.js +63 -0
package/exports/toggle.js +78 -0
package/exports/top-app-bar.js +143 -0
package/exports/tslib.es6-d3ba6528.js +57 -0
package/exports/types.d.ts +18 -0
package/exports/types.js +1 -0
package/exports/typography/title.d.ts +1 -0
package/exports/typography.js +206 -0
package/package.json +256 -0

package/exports/bundle/index.html ADDED Viewed

@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      html,
+      body {
+        inset: 0;
+        position: absolute;
+        margin: 0;
+        width: 100%;
+        color: var(--md-sys-color-on-background);
+        overflow: hidden;
+      }
+      custom-drawer-layout {
+        height: 100%;
+        width: 100%;
+        inset: 0;
+        background: var(--md-sys-color-background, #fff);
+        position: absolute;
+        display: flex;
+      }
+      .demo-container {
+        height: 100%;
+        width: 100%;
+      }
+      flex-column {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+      }
+      .demo-container section {
+        align-items: center;
+        justify-content: center;
+      }
+      [non-interactive] {
+        pointer-events: none;
+      }
+      h4 {
+        margin: 0;
+        padding-top: 16px;
+        padding-bottom: 12px;
+      }
+      custom-drawer custom-divider {
+        margin-top: 16px;
+      }
+      flex-row:not([slot='top-app-bar-end']) {
+        width: 100%;
+      }
+      flex-column {
+        display: flex;
+        flex-direction: column;
+      }
+    </style>
+  </head>
+  <body>
+    <custom-theme></custom-theme>
+    <demo-icons></demo-icons>
+    <!-- <custom-root> -->
+    <custom-drawer-layout class="demo-container" drawer-open>
+      <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-drawer-item route="time-picker">time-picker</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="supporting-pane">
+            <custom-supporting-pane id="demo-supporting-pane">
+              <flex-column>
+                <p>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolor minima. Ab nobis quae neque
+                  dolor. Asperiores itaque incidunt quae quis est explicabo dolorem, laudantium repellat earum nisi.
+                  Quae, cum.
+                </p>
+              </flex-column>
+              <flex-column slot="supporting"></flex-column>
+            </custom-supporting-pane>
+            <custom-drawer-button id="demo-supporting-pane"></custom-drawer-button>
+            <custom-supporting-pane open left>
+              <flex-column>
+                <p>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolor minima. Ab nobis quae neque
+                  dolor. Asperiores itaque incidunt quae quis est explicabo dolorem, laudantium repellat earum nisi.
+                  Quae, cum.
+                </p>
+              </flex-column>
+              <flex-column slot="supporting"></flex-column>
+            </custom-supporting-pane>
+          </demo-section>
+          <demo-section route="tabs">
+            <custom-tabs>
+              <custom-tab>home</custom-tab>
+              <custom-tab>about</custom-tab>
+            </custom-tabs>
+            <custom-tabs round>
+              <custom-tab>
+                <custom-icon>home</custom-icon>
+                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="time-picker">
+            <custom-time-picker></custom-time-picker>
+          </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 togglers='["check_box","check_box_outline_blank", "info"]'></custom-toggle>
+            <custom-button label="next"></custom-button>
+            <script>
+              const toggleDemo = document.querySelector('demo-section[route="toggle"]')
+              toggleDemo.querySelector('custom-button').addEventListener('click', () => {
+                toggleDemo.querySelector('custom-toggle').next()
+              })
+            </script>
+          </demo-section>
+          <demo-section route="toggle-button">
+            <custom-toggle-button togglers='["check_box","check_box_outline_blank"]'> </custom-toggle-button>
+          </demo-section>
+        </custom-pages>
+      </flex-column>
+    </custom-drawer-layout>
+    <!-- </custom-root> -->
+    <!-- </flex-row> -->
+    <script type="module">
+      import './demo-elements.js'
+      import './elements.js'
+      const selector = document.querySelector('custom-selector')
+      const pages = document.querySelector('custom-pages')
+      const onSelected = async ({ detail }) => {
+        document.dispatchEvent(new CustomEvent('custom-scroll', { detail: { scrolling: false } }))
+        pages.select(detail)
+        localStorage.setItem('last-selected', detail)
+      }
+      selector.addEventListener('selected', onSelected)
+      const lastSelected = localStorage.getItem('last-selected')
+      if (lastSelected)
+        if (customElements.get('custom-serlector')) selector.select(lastSelected)
+        else {
+          await customElements.whenDefined('custom-selector')
+          selector.select(lastSelected)
+          pages.select(lastSelected)
+        }
+    </script>
+  </body>
+</html>

package/exports/bundle/input.js ADDED Viewed

@@ -0,0 +1,6 @@
+import{_ as t,a as e,e as a}from"./custom-element-c2e883ba.js";import{j as l,v as i,D as m}from"./property-58e28172.js";let n=(()=>{let n,o,r=[a("custom-time-picker-input")],s=[],c=m;return class extends c{static{o=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;t(null,n={value:o},r,{kind:"class",name:o.name,metadata:e},null,s),o=n.value,e&&Object.defineProperty(o,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static styles=[l`
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+    `];render(){return i` <input type="time" /> `}static{e(o,s)}},o})();export{n as TimePickerInput};

package/exports/bundle/it-d4d177bf.js ADDED Viewed

@@ -0,0 +1 @@

+ class FlexIt extends HTMLElement{static get observedAttributes(){return["flex","min-width","max-width","width"]}constructor(){super(),this.attachShadow({mode:"open"}),this.maxWidth=this.getAttribute("max-width")||"auto",this.minWidth=this.getAttribute("min-width")||"auto",this.width=this.getAttribute("width")||"100%",this.flex=this.getAttribute("flex")||"1",this.shadowRoot.innerHTML=this.template}attributeChangedCallback(t,e,i){e!==i&&this.style.setProperty(`--flex-it-${t}`,i)}set minWidth(t){t!==this.minWidth&&this.setAttribute("min-width",t)}set maxWidth(t){t!==this.maxWidth&&this.setAttribute("max-width",t)}set width(t){t!==this.width&&this.setAttribute("width",t)}set flex(t){t!==this.flex&&this.setAttribute("flex",t)}get minWidth(){return this.getAttribute("min-width")}get maxWidth(){return this.getAttribute("max-width")}get width(){return this.getAttribute("width")}get flex(){return this.getAttribute("flex")}get template(){return`<style>\n :host {\n --flex-it-pointer-events: none;\n --flex-it-user-select: none;\n\n flex: var(--flex-it-flex, ${this.flex});\n max-width: var(--flex-it-max-width, ${this.maxWidth});\n min-width: var(--flex-it-min-width, ${this.minWidth});\n width: var(--flex-it-width, ${this.width});\n pointer-events: var(--flex-it-pointer-events);\n user-select: var(--flex-it-user-select);\n }\n </style>\n <slot></slot>\n `}}customElements.define("flex-it",FlexIt);

package/exports/bundle/list-item.js ADDED Viewed

@@ -0,0 +1,43 @@
+import{_ as t,a as e,e as s}from"./custom-element-c2e883ba.js";import{e as a,j as n,v as r,D as o}from"./property-58e28172.js";import{t as i}from"./query-73dacde5.js";const c=t=>function(e,{kind:s,name:a,access:n,addInitializer:r}){let o;return"accessor"!==s&&r((function(){console.warn(`${this.localName}: @assignedElements${!t??`(${t})`} ${String(a)} ${s} is not supported`)})),o=t?()=>document.querySelector(`slot[name="${t}"]`):()=>document.querySelector("slot:not([name])"),{get:()=>o().assignedElements()}};let l=(()=>{let l,h,p,d,m,g,u,S,_=[s("custom-list-item")],v=[],y=o,f=[],b=[],x=[],E=[],I=[],k=[],$=[],j=[],w=[],q=[],B=[],C=[];return class extends y{static{h=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;p=[a({type:String,reflect:!0})],d=[a({type:Boolean,reflect:!0})],m=[a({type:Boolean,reflect:!0,attribute:"has-start"})],g=[a({type:Boolean,reflect:!0,attribute:"non-interactive"})],u=[c("start")],S=[i('slot[name="start"]')],t(this,null,p,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:t=>"type"in t,get:t=>t.type,set:(t,e)=>{t.type=e}},metadata:e},f,b),t(this,null,d,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:t=>"open"in t,get:t=>t.open,set:(t,e)=>{t.open=e}},metadata:e},x,E),t(this,null,m,{kind:"accessor",name:"hasStart",static:!1,private:!1,access:{has:t=>"hasStart"in t,get:t=>t.hasStart,set:(t,e)=>{t.hasStart=e}},metadata:e},I,k),t(this,null,g,{kind:"accessor",name:"nonInteractive",static:!1,private:!1,access:{has:t=>"nonInteractive"in t,get:t=>t.nonInteractive,set:(t,e)=>{t.nonInteractive=e}},metadata:e},$,j),t(this,null,u,{kind:"accessor",name:"assignedStartElements",static:!1,private:!1,access:{has:t=>"assignedStartElements"in t,get:t=>t.assignedStartElements,set:(t,e)=>{t.assignedStartElements=e}},metadata:e},w,q),t(this,null,S,{kind:"accessor",name:"startSlot",static:!1,private:!1,access:{has:t=>"startSlot"in t,get:t=>t.startSlot,set:(t,e)=>{t.startSlot=e}},metadata:e},B,C),t(null,l={value:h},_,{kind:"class",name:h.name,metadata:e},null,v),h=l.value,e&&Object.defineProperty(h,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,f,"one-line");get type(){return this.#t}set type(t){this.#t=t}#e=(e(this,b),e(this,x,void 0));get open(){return this.#e}set open(t){this.#e=t}#s=(e(this,E),e(this,I,void 0));get hasStart(){return this.#s}set hasStart(t){this.#s=t}#a=(e(this,k),e(this,$,void 0));get nonInteractive(){return this.#a}set nonInteractive(t){this.#a=t}#n=(e(this,j),e(this,w,void 0));get assignedStartElements(){return this.#n}set assignedStartElements(t){this.#n=t}#r=(e(this,q),e(this,B,void 0));get startSlot(){return this.#r}set startSlot(t){this.#r=t}#o=(e(this,C),()=>{this.hasStart=!0});connectedCallback(){this.startSlot.addEventListener("slotchange",this.#o)}static styles=[n`
+      * {
+        pointer-events: none;
+        user-select: none;
+      }
+      :host {
+        display: flex;
+        /* top, right, bottom, left */
+        padding: 8px 24px 8px 16px;
+        box-sizing: border-box;
+        width: 100%;
+        cursor: pointer;
+        min-width: 112px;
+        max-width: 280px;
+        height: 48px;
+        pointer-events: auto;
+      }
+      :host([type='menu']) {
+        padding: 0 12px;
+        height: 48px;
+      }
+      :host([type='menu']),
+      :host([type='one-line']) {
+        align-items: center;
+      }
+      :host([has-start]) .body {
+        padding-left: 12px;
+      }
+      :host([non-interactive]) {
+        pointer-events: none;
+        cursor: default;
+      }
+    `];render(){return r`
+      <slot name="start"></slot>
+      <span class="body">
+        <slot></slot>
+      </span>
+      <flex-it></flex-it>
+      <slot name="end"></slot>
+    `}static{e(h,v)}},h})();export{l as CustomListItem};

package/exports/bundle/list.js ADDED Viewed

	@@ -0,0 +1 @@
1	+

package/exports/bundle/menu.js ADDED Viewed

@@ -0,0 +1,13 @@
+import{_ as e,a as t,e as s}from"./custom-element-c2e883ba.js";import{j as l,v as o,D as c}from"./property-58e28172.js";import"./dropdown.js";import"./selector.js";import"./selector-mixin.js";import"./select-mixin.js";let r=(()=>{let r,i,a=[s("custom-menu")],n=[],d=c;return class extends d{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;e(null,r={value:i},a,{kind:"class",name:i.name,metadata:t},null,n),i=r.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}get selector(){return this.shadowRoot.querySelector("custom-selector")}set selected(e){this.selector.selected=e}get selected(){return this.selector.selected}select(e){this.selector.select(e)}#e=({detail:e})=>{this.dispatchEvent(new CustomEvent("selected",{detail:e}))};connectedCallback(){this.selector.addEventListener("selected",this.#e)}disconnectedCallback(){this.selector.removeEventListener("selected",this.#e)}static styles=[l`
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        min-width: 120px;
+        max-width: 280px;
+      }
+    `];render(){return o`
+      <custom-selector>
+        <slot></slot>
+      </custom-selector>
+    `}static{t(i,n)}},i})();export{r as CustomMenu};

package/exports/bundle/menu2.js ADDED Viewed

	@@ -0,0 +1 @@
1	+