@vandeurenglenn/lite-elements 0.3.18

package/exports/bundle/demo.js

@@ -0,0 +1,457 @@
+import{_ as t,a as e,e as o}from"./custom-element-c2e883ba.js";import{j as s,v as i,D as m}from"./property-58e28172.js";import{t as a}from"./query-73dacde5.js";let c=(()=>{let c,u,n,r,l=[o("demo-shell")],p=[],d=m,b=[],y=[],g=[],w=[];return class extends d{static{u=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;n=[a("custom-selector")],r=[a("custom-pages")],t(this,null,n,{kind:"accessor",name:"selector",static:!1,private:!1,access:{has:t=>"selector"in t,get:t=>t.selector,set:(t,e)=>{t.selector=e}},metadata:e},b,y),t(this,null,r,{kind:"accessor",name:"pages",static:!1,private:!1,access:{has:t=>"pages"in t,get:t=>t.pages,set:(t,e)=>{t.pages=e}},metadata:e},g,w),t(null,c={value:u},l,{kind:"class",name:u.name,metadata:e},null,p),u=c.value,e&&Object.defineProperty(u,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,b,void 0);get selector(){return this.#t}set selector(t){this.#t=t}#e=(e(this,y),e(this,g,void 0));get pages(){return this.#e}set pages(t){this.#e=t}static styles=[s`
+      :host {
+        display: block;
+      }
+    `];async connectedCallback(){this.selector.addEventListener("selected",(async({detail:t})=>{document.dispatchEvent(new CustomEvent("custom-scroll",{detail:{scrolling:!1}})),this.pages.select(t),localStorage.setItem("last-selected",t)}));const t=localStorage.getItem("last-selected");t&&(customElements.get("custom-selector")?this.selector.select(t):(await customElements.whenDefined("custom-selector"),this.selector.select(t),this.pages.select(t)))}render(){return i`
+      <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(){super(...arguments),e(this,w)}static{e(u,p)}},u})();export{c as DemoShell};

package/exports/bundle/dial.js

@@ -0,0 +1 @@
+

package/exports/bundle/dialog.js

@@ -0,0 +1,149 @@
+import{_ as e,a as t,e as s}from"./custom-element-c2e883ba.js";import{e as o,j as a,v as n,D as r}from"./property-58e28172.js";import"./elevation.js";import"./icon.js";import"./index-3c006227.js";let i=(()=>{let i,l,c,h,d,m,p,u=[s("custom-dialog")],g=[],f=r,y=[],v=[],x=[],_=[],b=[],H=[],w=[],k=[],A=[],j=[];return class extends f{static{l=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;c=[o({type:Boolean,reflect:!0})],h=[o({type:Boolean,reflect:!0})],d=[o({type:Boolean,reflect:!0,attribute:"has-actions"})],m=[o({type:Boolean,reflect:!0,attribute:"has-header"})],p=[o({type:Boolean,reflect:!0,attribute:"has-hero"})],e(this,null,c,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:e=>"open"in e,get:e=>e.open,set:(e,t)=>{e.open=t}},metadata:t},y,v),e(this,null,h,{kind:"accessor",name:"fullscreen",static:!1,private:!1,access:{has:e=>"fullscreen"in e,get:e=>e.fullscreen,set:(e,t)=>{e.fullscreen=t}},metadata:t},x,_),e(this,null,d,{kind:"accessor",name:"hasActions",static:!1,private:!1,access:{has:e=>"hasActions"in e,get:e=>e.hasActions,set:(e,t)=>{e.hasActions=t}},metadata:t},b,H),e(this,null,m,{kind:"accessor",name:"hasHeader",static:!1,private:!1,access:{has:e=>"hasHeader"in e,get:e=>e.hasHeader,set:(e,t)=>{e.hasHeader=t}},metadata:t},w,k),e(this,null,p,{kind:"accessor",name:"hasHero",static:!1,private:!1,access:{has:e=>"hasHero"in e,get:e=>e.hasHero,set:(e,t)=>{e.hasHero=t}},metadata:t},A,j),e(null,i={value:l},u,{kind:"class",name:l.name,metadata:t},null,g),l=i.value,t&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,y,!1);get open(){return this.#e}set open(e){this.#e=e}#t=(t(this,v),t(this,x,!1));get fullscreen(){return this.#t}set fullscreen(e){this.#t=e}#s=(t(this,_),t(this,b,!1));get hasActions(){return this.#s}set hasActions(e){this.#s=e}#o=(t(this,H),t(this,w,!1));get hasHeader(){return this.#o}set hasHeader(e){this.#o=e}#a=(t(this,k),t(this,A,!1));get hasHero(){return this.#a}set hasHero(e){this.#a=e}connectedCallback(){const e=this.shadowRoot.querySelector('slot[name="actions"]');this.hasActions=0!==Array.from(e?.assignedNodes()||[]).length;let t=this.shadowRoot.querySelector('slot[name="header"]');const s=["title","header-start","header-end"];let o=0;for(;0===Array.from(t.assignedElements()).length&&o<s.length;)t=this.shadowRoot.querySelector(`slot[name="${s[o]}"]`),o+=1;this.hasHeader=0!==t.assignedElements().length;const a=this.shadowRoot.querySelector('slot[name="hero-icon"]');this.hashero=0!==Array.from(a?.assignedNodes()||[]).length}onChange(e,t){"open"===e&&(this.open?this.querySelector('[slot="actions"]').addEventListener("click",this._close):this.querySelector('[slot="actions"]').removeEventListener("click",this._close))}_close=(t(this,j),e=>{const t=e.composedPath()[0];this.dispatchEvent(new CustomEvent("close",{detail:t.getAttribute("action")||"close"})),this.open=!1});static styles=[a`
+      :host {
+        position: fixed;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+      }
+
+      .header {
+        height: 56px;
+        box-sizing: border-box;
+      }
+
+      .scrim,
+      .dialog {
+        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
+          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+      }
+
+      .scrim {
+        position: absolute;
+        inset: 0;
+        background-color: var(--md-sys-color-scrim);
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      dialog {
+        pointer-events: none;
+        border: none;
+        min-width: 280px;
+        max-width: 560px;
+        width: fit-content;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+        background-color: var(--md-sys-color-surface-container-high);
+        color: var(--md-sys-color-on-surface);
+        padding: 24px;
+        box-sizing: border-box;
+        position: relative;
+        opacity: 0;
+        transform: scaleY(0.1);
+      }
+
+      .body {
+        overflow-y: auto;
+      }
+
+      :host([has-actions]) .body {
+        padding-top: 16px;
+        padding-bottom: 24px;
+      }
+
+      :host([has-header][has-hero]) .header {
+        padding-top: 16px;
+      }
+
+      slot[name='title']::slotted(*) {
+        font-family: var(--md-sys-typescale-title-large-font-family-name);
+        font-style: var(--md-sys-typescale-title-large-font-family-style);
+        font-weight: var(--md-sys-typescale-title-large-font-weight);
+        font-size: var(--md-sys-typescale-title-large-font-size);
+        letter-spacing: var(--md-sys-typescale-title-large-tracking);
+        line-height: var(--md-sys-typescale-title-large-height);
+        text-transform: var(--md-sys-typescale-title-large-text-transform);
+        text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+      }
+
+      :host([has-hero]) slot[name='title']::slotted(*) {
+        padding-top: 16px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      :host([fullscreen]) slot[name='title']::slotted(*) {
+        padding-left: 16px;
+      }
+
+      :host(:not([fullscreen])) dialog {
+        align-items: center;
+        justify-content: center;
+      }
+
+      slot[name='supporting-text']::slotted(*) {
+        color: var(--md-sys-color-on-surface-variant);
+        padding-bottom: 16px;
+      }
+
+      slot[name='actions']::slotted(*) {
+        align-items: center;
+        justify-content: end;
+      }
+
+      :host([open]) dialog,
+      :host([open]) .scrim {
+        pointer-events: auto;
+        opacity: 1;
+        transform: scaleY(1);
+        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
+          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+      }
+
+      :host([open]) .scrim {
+        opacity: 0.44;
+      }
+
+      :host([fullscreen]) slot[name='actions']::slotted(*) {
+        --custom-icon-size: 12px;
+        --custom-button-color: var(--md-sys-color-primary);
+      }
+
+      slot[name='actions'] {
+        align-items: flex-end;
+      }
+    `];render(){return n`
+      <span class="scrim" @click=${this._close}></span>
+      <dialog ?open=${this.open}>
+        <custom-elevation level=${this.fullscreen?0:3}></custom-elevation>
+        <slot name="hero-icon"></slot>
+        <slot name="supporting-text"></slot>
+        <flex-row class="header" center>
+          <slot name="header">
+            <flex-row center style="width: 100%">
+              <slot name="header-start">
+                ${this.fullscreen?n`<custom-button @click=${this._close}
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                    >`:""}
+              </slot>
+              <slot name="title"></slot>
+              <flex-it></flex-it>
+              <slot name="header-end">
+                ${this.fullscreen?n`<slot name="actions"></slot>`:""}
+                ${this.fullscreen?"":n`<custom-button @click=${this._close}
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                    >`}
+              </slot>
+            </flex-row>
+          </slot>
+        </flex-row>
+        <flex-column class="body">
+          <slot></slot>
+        </flex-column>
+
+        ${this.fullscreen?"":n`<slot name="actions"></slot>`}
+      </dialog>
+    `}static{t(l,g)}},l})();export{i as CustomDialog};

package/exports/bundle/divider.js

@@ -0,0 +1,21 @@
+import{_ as t,a as e,e as a}from"./custom-element-c2e883ba.js";import{v as i,D as r}from"./property-58e28172.js";import"./button.js";import"./elevation.js";let o=(()=>{let o,l,n=[a("custom-divider")],s=[],m=r;return class extends m{static{l=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;t(null,o={value:l},n,{kind:"class",name:l.name,metadata:e},null,s),l=o.value,e&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static properties={inset:{type:Boolean,reflect:!0,attribute:"inset"},middleInset:{type:Boolean,reflect:!0,attribute:"middle-inset"}};render(){return i`
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+          min-height: 1px;
+          margin: 8px 0 16px 0;
+          background: var(--md-sys-color-outline);
+        }
+
+        :host([inset]) {
+          margin-left: 16px;
+          margin-right: 0;
+        }
+
+        :host([middle-inset]) {
+          margin-left: 16px;
+          margin-right: 16px;
+        }
+      </style>
+    `}static{e(l,s)}},l})();export{o as CustomDivider};

package/exports/bundle/drawer-button.js

@@ -0,0 +1,18 @@
+import{_ as e,a as t,e as s}from"./custom-element-c2e883ba.js";import{e as a,j as o,v as i,D as r}from"./property-58e28172.js";import"./icon.js";import"./button.js";import"./index-3c006227.js";import"./elevation.js";let n=(()=>{let n,c,l,d,m,p=[s("custom-drawer-button")],u=[],h=r,b=[],_=[],g=[],w=[],v=[],y=[];return class extends h{static{c=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;l=[a({type:Boolean,reflect:!0})],d=[a({type:Boolean,reflect:!0,attribute:"drawer-open"})],m=[a()],e(this,null,l,{kind:"accessor",name:"mobile",static:!1,private:!1,access:{has:e=>"mobile"in e,get:e=>e.mobile,set:(e,t)=>{e.mobile=t}},metadata:t},b,_),e(this,null,d,{kind:"accessor",name:"drawerOpen",static:!1,private:!1,access:{has:e=>"drawerOpen"in e,get:e=>e.drawerOpen,set:(e,t)=>{e.drawerOpen=t}},metadata:t},g,w),e(this,null,m,{kind:"accessor",name:"id",static:!1,private:!1,access:{has:e=>"id"in e,get:e=>e.id,set:(e,t)=>{e.id=t}},metadata:t},v,y),e(null,n={value:c},p,{kind:"class",name:c.name,metadata:t},null,u),c=n.value,t&&Object.defineProperty(c,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,b,!1);get mobile(){return this.#e}set mobile(e){this.#e=e}#t=(t(this,_),t(this,g,void 0));get drawerOpen(){return this.#t}set drawerOpen(e){this.#t=e}#s=(t(this,w),t(this,v,void 0));get id(){return this.#s}set id(e){this.#s=e}openPane(){document.dispatchEvent(new CustomEvent("custom-pane-open",{detail:this.id}))}static styles=[o`
+      :host {
+        display: block;
+        opacity: 1;
+        pointer-events: auto;
+        will-change: width, opacity;
+      }
+
+      :host([drawer-open]) {
+        opacity: 0;
+        pointer-events: none;
+        width: 0;
+      }
+    `];render(){return i`
+      <custom-button @click=${()=>this.openPane()}>
+        <custom-icon slot="icon">menu</custom-icon>
+      </custom-button>
+    `}constructor(){super(...arguments),t(this,y)}static{t(c,u)}},c})();export{n as CustomDrawerButton};