@vandeurenglenn/lite-elements 0.3.81 → 0.3.83

package/exports/bundle/demo-shell.js

@@ -68,6 +68,7 @@ import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as i}f
             <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-drawer-item route="places-input">places-input</custom-drawer-item>
           </custom-selector>
         </flex-column>
 
@@ -536,6 +537,10 @@ import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as i}f
             </demo-section>
           </custom-pages>
         </flex-column>
+
+        <demo-section route="places-input">
+          <places-input placeholder="place"> </places-input>
+        </demo-section>
       </custom-drawer-layout>
       <!-- </custom-root> -->
       <!-- </flex-row> -->

package/exports/bundle/demo.js

@@ -25,6 +25,8 @@ import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as i}f
             <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="places-input">places-input</custom-drawer-item>
           </custom-selector>
         </flex-column>
 

package/exports/bundle/drawer-button.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s,r as a,i as o,x as i}from"./dark-mode-m29sAj4H.js";import{e as r}from"./custom-element-B_TPyPQO.js";import"./icon-button.js";import"./button.js";import"./elevation.js";import"./button.css.js";import"./icon.js";let n=(()=>{let n,c,l,d,m,p=[r("custom-drawer-button")],u=[],b=s,h=[],_=[],g=[],w=[],v=[],y=[];return class extends b{static{c=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(b[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},h,_),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,h,!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`
+import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s as a,r as s,i as r,x as o}from"./dark-mode-m29sAj4H.js";import{e as i}from"./custom-element-B_TPyPQO.js";import"./icon-button.js";import"./button.js";import"./elevation.js";import"./button.css.js";import"./icon.js";let n=(()=>{let n,c,l,d,p,m=[i("custom-drawer-button")],u=[],b=a,h=[],_=[],g=[],w=[],v=[],y=[];return class extends b{static{c=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(b[Symbol.metadata]??null):void 0;l=[s({type:Boolean,reflect:!0,attribute:"drawer-open"})],d=[s()],p=[s({type:String,reflect:!0})],e(this,null,l,{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},h,_),e(this,null,d,{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},g,w),e(this,null,p,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:e=>"label"in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},v,y),e(null,n={value:c},m,{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,h,void 0);get drawerOpen(){return this.#e}set drawerOpen(e){this.#e=e}#t=(t(this,_),t(this,g,void 0));get id(){return this.#t}set id(e){this.#t=e}#a=(t(this,w),t(this,v,"menu"));get label(){return this.#a}set label(e){this.#a=e}openPane(){document.dispatchEvent(new CustomEvent("custom-pane-open",{detail:this.id}))}static styles=[r`
       :host {
         display: block;
         opacity: 1;
@@ -11,4 +11,6 @@ import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s,r as a,i as o,x as i
         pointer-events: none;
         width: 0;
       }
-    `];render(){return i` <custom-icon-button @click=${()=>this.openPane()} icon="menu"> </custom-icon-button> `}constructor(){super(...arguments),t(this,y)}static{t(c,u)}},c})();export{n as CustomDrawerButton};
+    `];render(){return o`
+      <custom-icon-button @click=${()=>this.openPane()} label="Open drawer" icon="menu"> </custom-icon-button>
+    `}constructor(){super(...arguments),t(this,y)}static{t(c,u)}},c})();export{n as CustomDrawerButton};

package/exports/bundle/drawer.js

@@ -37,7 +37,7 @@ import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{i as s,s as a,r as o,x
   ::slotted(*) {
     pointer-events: none;
   }
-`;let l=(()=>{let s,l,c,m,d,p,h,g=[r("custom-drawer")],u=[],y=a,b=[],v=[],f=[],_=[],x=[],w=[],j=[],k=[],S=[],z=[];return class extends y{static{l=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;c=[o({type:Boolean,reflect:!0})],m=[o({type:Boolean,reflect:!0})],d=[o({type:String,reflect:!0})],p=[o({type:Boolean})],h=[o({type:String})],t(this,null,c,{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},b,v),t(this,null,m,{kind:"accessor",name:"mobile",static:!1,private:!1,access:{has:t=>"mobile"in t,get:t=>t.mobile,set:(t,e)=>{t.mobile=e}},metadata:e},f,_),t(this,null,d,{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},x,w),t(this,null,p,{kind:"accessor",name:"right",static:!1,private:!1,access:{has:t=>"right"in t,get:t=>t.right,set:(t,e)=>{t.right=e}},metadata:e},j,k),t(this,null,h,{kind:"accessor",name:"id",static:!1,private:!1,access:{has:t=>"id"in t,get:t=>t.id,set:(t,e)=>{t.id=e}},metadata:e},S,z),t(null,s={value:l},g,{kind:"class",name:l.name,metadata:e},null,u),l=s.value,e&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,b,void 0);get open(){return this.#t}set open(t){this.#t=t}#e=(e(this,v),e(this,f,void 0));get mobile(){return this.#e}set mobile(t){this.#e=t}#s=(e(this,_),e(this,x,void 0));get type(){return this.#s}set type(t){this.#s=t}#a=(e(this,w),e(this,j,void 0));get right(){return this.#a}set right(t){this.#a=t}#o=(e(this,k),e(this,S,void 0));get id(){return this.#o}set id(t){this.#o=t}connectedCallback(){document.addEventListener("custom-pane-close",(({detail:t})=>{this.id===t&&(this.open=!1)})),document.addEventListener("custom-pane-open",(({detail:t})=>{this.id===t&&(this.open=!0)}))}static styles=[n];render(){return i`
+`;let l=(()=>{let s,l,c,m,d,p,h,g=[r("custom-drawer")],u=[],y=a,b=[],v=[],f=[],_=[],x=[],w=[],j=[],k=[],S=[],z=[];return class extends y{static{l=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;c=[o({type:Boolean,reflect:!0})],m=[o({type:Boolean,reflect:!0})],d=[o({type:String,reflect:!0})],p=[o({type:Boolean})],h=[o({type:String})],t(this,null,c,{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},b,v),t(this,null,m,{kind:"accessor",name:"mobile",static:!1,private:!1,access:{has:t=>"mobile"in t,get:t=>t.mobile,set:(t,e)=>{t.mobile=e}},metadata:e},f,_),t(this,null,d,{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},x,w),t(this,null,p,{kind:"accessor",name:"right",static:!1,private:!1,access:{has:t=>"right"in t,get:t=>t.right,set:(t,e)=>{t.right=e}},metadata:e},j,k),t(this,null,h,{kind:"accessor",name:"id",static:!1,private:!1,access:{has:t=>"id"in t,get:t=>t.id,set:(t,e)=>{t.id=e}},metadata:e},S,z),t(null,s={value:l},g,{kind:"class",name:l.name,metadata:e},null,u),l=s.value,e&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,b,void 0);get open(){return this.#t}set open(t){this.#t=t}#e=(e(this,v),e(this,f,void 0));get mobile(){return this.#e}set mobile(t){this.#e=t}#s=(e(this,_),e(this,x,void 0));get type(){return this.#s}set type(t){this.#s=t}#a=(e(this,w),e(this,j,void 0));get right(){return this.#a}set right(t){this.#a=t}#o=(e(this,k),e(this,S,void 0));get id(){return this.#o}set id(t){this.#o=t}firstRender(){document.addEventListener("custom-pane-close",(({detail:t})=>{this.id===t&&(this.open=!1)})),document.addEventListener("custom-pane-open",(({detail:t})=>{this.id===t&&(this.open=!0)}))}static styles=[n];render(){return i`
       <custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type} .id=${this.id}>
         <slot name="headline" slot="headline"></slot>
         <slot name="menu-button" slot="menu-button"></slot>

package/exports/bundle/icon-button.js

@@ -36,9 +36,9 @@ import{_ as t,a as o}from"./tslib.es6-B87RQr7F.js";import{r as s,i as e,x as a}f
         --custom-icon-color: var(--md-sys-color-on-secondary-container);
       }
     `];render(){return a`
-      <button label=${this.label}>
+      <button label=${this.label||this.icon}>
         <custom-elevation></custom-elevation>
-        <slot name="icon"> <custom-icon .icon=${this.icon}></custom-icon></slot>
+        <slot name="icon"> <custom-icon .icon=${this.icon||this.label}></custom-icon></slot>
         <span class="label">${this.label}</span>
         <span class="hover"></span>
       </button>

package/exports/bundle/input2.js

@@ -0,0 +1 @@
+import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s as a,x as l}from"./dark-mode-m29sAj4H.js";import{e as r}from"./custom-element-B_TPyPQO.js";let s=(()=>{let s,o,m=[r("custom-pane")],n=[],c=a;return class extends c{static{o=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;e(null,s={value:o},m,{kind:"class",name:o.name,metadata:t},null,n),o=s.value,t&&Object.defineProperty(o,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static styles=[];render(){return l`<input type="text" placeholder="Search for places..." />`}static{t(o,n)}},o})();export{s as CustomPlacesInput};

package/exports/bundle/pane.js

@@ -87,14 +87,15 @@ import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{i as s,s as o,r as a,x
     box-sizing: border-box;
     align-items: center;
   }
-`;let c=(()=>{let s,c,l,m,d,h,p,g,u=[r("custom-pane")],f=[],b=o,v=[],y=[],_=[],x=[],w=[],j=[],k=[],z=[],S=[],B=[],P=[],X=[];return class extends b{static{c=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(b[Symbol.metadata]??null):void 0;l=[a({type:Boolean,reflect:!0})],m=[a({type:Boolean,reflect:!0})],d=[a({type:String,reflect:!0})],h=[a({type:Boolean,reflect:!0})],p=[a({type:Boolean,reflect:!0})],g=[a({type:String})],e(this,null,l,{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},v,y),e(this,null,m,{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},_,x),e(this,null,d,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:e=>"type"in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},w,j),e(this,null,h,{kind:"accessor",name:"left",static:!1,private:!1,access:{has:e=>"left"in e,get:e=>e.left,set:(e,t)=>{e.left=t}},metadata:t},k,z),e(this,null,p,{kind:"accessor",name:"right",static:!1,private:!1,access:{has:e=>"right"in e,get:e=>e.right,set:(e,t)=>{e.right=t}},metadata:t},S,B),e(this,null,g,{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},P,X),e(null,s={value:c},u,{kind:"class",name:c.name,metadata:t},null,f),c=s.value,t&&Object.defineProperty(c,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,v,!1);get open(){return this.#e}set open(e){this.#e=e}#t=(t(this,y),t(this,_,!1));get mobile(){return this.#t}set mobile(e){this.#t=e}#s=(t(this,x),t(this,w,void 0));get type(){return this.#s}set type(e){this.#s=e}#o=(t(this,j),t(this,k,!0));get left(){return this.#o}set left(e){this.#o=e}#a=(t(this,z),t(this,S,!1));get right(){return this.#a}set right(e){this.#a=e}#i=(t(this,B),t(this,P,void 0));get id(){return this.#i}set id(e){this.#i=e}closePane(e){e.stopPropagation(),this.open=!1,document.dispatchEvent(new CustomEvent("custom-pane-close",{detail:this.id||""+(this.left?"left":"right")}))}static styles=[n];render(){return i`
+`;let c=(()=>{let s,c,l,m,d,h,p,g,u,f=[r("custom-pane")],_=[],v=o,b=[],y=[],x=[],w=[],k=[],j=[],z=[],S=[],B=[],P=[],X=[],$=[],E=[],O=[];return class extends v{static{c=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(v[Symbol.metadata]??null):void 0;l=[a({type:Boolean,reflect:!0})],m=[a({type:Boolean,reflect:!0})],d=[a({type:String,reflect:!0})],h=[a({type:Boolean,reflect:!0})],p=[a({type:Boolean,reflect:!0})],g=[a({type:String})],u=[a({type:String})],e(this,null,l,{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},b,y),e(this,null,m,{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},x,w),e(this,null,d,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:e=>"type"in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},k,j),e(this,null,h,{kind:"accessor",name:"left",static:!1,private:!1,access:{has:e=>"left"in e,get:e=>e.left,set:(e,t)=>{e.left=t}},metadata:t},z,S),e(this,null,p,{kind:"accessor",name:"right",static:!1,private:!1,access:{has:e=>"right"in e,get:e=>e.right,set:(e,t)=>{e.right=t}},metadata:t},B,P),e(this,null,g,{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},X,$),e(this,null,u,{kind:"accessor",name:"icon",static:!1,private:!1,access:{has:e=>"icon"in e,get:e=>e.icon,set:(e,t)=>{e.icon=t}},metadata:t},E,O),e(null,s={value:c},f,{kind:"class",name:c.name,metadata:t},null,_),c=s.value,t&&Object.defineProperty(c,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,b,!1);get open(){return this.#e}set open(e){this.#e=e}#t=(t(this,y),t(this,x,!1));get mobile(){return this.#t}set mobile(e){this.#t=e}#s=(t(this,w),t(this,k,void 0));get type(){return this.#s}set type(e){this.#s=e}#o=(t(this,j),t(this,z,!0));get left(){return this.#o}set left(e){this.#o=e}#a=(t(this,S),t(this,B,!1));get right(){return this.#a}set right(e){this.#a=e}#i=(t(this,P),t(this,X,void 0));get id(){return this.#i}set id(e){this.#i=e}#r=(t(this,$),t(this,E,void 0));get icon(){return this.#r}set icon(e){this.#r=e}closePane(e){e.stopPropagation(),this.open=!1,document.dispatchEvent(new CustomEvent("custom-pane-close",{detail:this.id||""+(this.left?"left":"right")}))}static styles=[n];render(){return i`
       <custom-elevation></custom-elevation>
       <aside>
         <slot name="header">
           <flex-row center>
             <slot name="headline"></slot>
             <flex-it></flex-it>
-            <custom-icon-button @click=${e=>this.closePane(e)} .id=${this.id} icon="menu_open">
+
+            <custom-icon-button @click=${e=>this.closePane(e)} .id=${this.id} .icon=${this.icon||"menu_open"}>
             </custom-icon-button>
           </flex-row>
         </slot>
@@ -105,4 +106,4 @@ import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{i as s,s as o,r as a,x
           <slot name="footer"></slot>
         </flex-row>
       </aside>
-    `}constructor(){super(...arguments),t(this,X)}static{t(c,f)}},c})();export{c as CustomPane};
+    `}constructor(){super(...arguments),t(this,O)}static{t(c,_)}},c})();export{c as CustomPane};

package/exports/demo-shell.js

@@ -171,6 +171,7 @@ let DemoShell = (() => {
             <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-drawer-item route="places-input">places-input</custom-drawer-item>
           </custom-selector>
         </flex-column>
 
@@ -639,6 +640,10 @@ let DemoShell = (() => {
             </demo-section>
           </custom-pages>
         </flex-column>
+
+        <demo-section route="places-input">
+          <places-input placeholder="place"> </places-input>
+        </demo-section>
       </custom-drawer-layout>
       <!-- </custom-root> -->
       <!-- </flex-row> -->

package/exports/demo.js

@@ -79,6 +79,8 @@ let DemoShell = (() => {
             <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="places-input">places-input</custom-drawer-item>
           </custom-selector>
         </flex-column>
 

package/exports/drawer/drawer-button.d.ts

@@ -1,9 +1,9 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 import '../button/icon-button.js';
 export declare class CustomDrawerButton extends LiteElement {
-    accessor mobile: boolean;
     accessor drawerOpen: boolean;
     accessor id: string;
+    accessor label: string;
     openPane(): void;
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;

package/exports/drawer/drawer.d.ts

@@ -8,7 +8,7 @@ export declare class CustomDrawer extends LiteElement {
     accessor type: 'modal' | undefined;
     accessor right: boolean;
     accessor id: string;
-    connectedCallback(): void;
-    static styles?: import("lit").CSSResultOrNative[];
+    firstRender(): void;
+    static styles: import("lit").CSSResultOrNative[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/drawer-button.js

@@ -13,38 +13,38 @@ let CustomDrawerButton = (() => {
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = LiteElement;
-    let _mobile_decorators;
-    let _mobile_initializers = [];
-    let _mobile_extraInitializers = [];
     let _drawerOpen_decorators;
     let _drawerOpen_initializers = [];
     let _drawerOpen_extraInitializers = [];
     let _id_decorators;
     let _id_initializers = [];
     let _id_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
     (class extends _classSuper {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _mobile_decorators = [property({ type: Boolean, reflect: true })];
             _drawerOpen_decorators = [property({ type: Boolean, reflect: true, attribute: 'drawer-open' })];
             _id_decorators = [property()];
-            __esDecorate(this, null, _mobile_decorators, { kind: "accessor", name: "mobile", static: false, private: false, access: { has: obj => "mobile" in obj, get: obj => obj.mobile, set: (obj, value) => { obj.mobile = value; } }, metadata: _metadata }, _mobile_initializers, _mobile_extraInitializers);
+            _label_decorators = [property({ type: String, reflect: true })];
             __esDecorate(this, null, _drawerOpen_decorators, { kind: "accessor", name: "drawerOpen", static: false, private: false, access: { has: obj => "drawerOpen" in obj, get: obj => obj.drawerOpen, set: (obj, value) => { obj.drawerOpen = value; } }, metadata: _metadata }, _drawerOpen_initializers, _drawerOpen_extraInitializers);
             __esDecorate(this, null, _id_decorators, { kind: "accessor", name: "id", static: false, private: false, access: { has: obj => "id" in obj, get: obj => obj.id, set: (obj, value) => { obj.id = value; } }, metadata: _metadata }, _id_initializers, _id_extraInitializers);
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        #mobile_accessor_storage = __runInitializers(this, _mobile_initializers, false);
-        get mobile() { return this.#mobile_accessor_storage; }
-        set mobile(value) { this.#mobile_accessor_storage = value; }
-        #drawerOpen_accessor_storage = (__runInitializers(this, _mobile_extraInitializers), __runInitializers(this, _drawerOpen_initializers, void 0));
+        #drawerOpen_accessor_storage = __runInitializers(this, _drawerOpen_initializers, void 0);
         get drawerOpen() { return this.#drawerOpen_accessor_storage; }
         set drawerOpen(value) { this.#drawerOpen_accessor_storage = value; }
         #id_accessor_storage = (__runInitializers(this, _drawerOpen_extraInitializers), __runInitializers(this, _id_initializers, void 0));
         get id() { return this.#id_accessor_storage; }
         set id(value) { this.#id_accessor_storage = value; }
+        #label_accessor_storage = (__runInitializers(this, _id_extraInitializers), __runInitializers(this, _label_initializers, 'menu'));
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
         openPane() {
             document.dispatchEvent(new CustomEvent('custom-pane-open', { detail: this.id }));
         }
@@ -65,11 +65,13 @@ let CustomDrawerButton = (() => {
     `
         ];
         render() {
-            return html ` <custom-icon-button @click=${() => this.openPane()} icon="menu"> </custom-icon-button> `;
+            return html `
+      <custom-icon-button @click=${() => this.openPane()} label="Open drawer" icon="menu"> </custom-icon-button>
+    `;
         }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _id_extraInitializers);
+            __runInitializers(this, _label_extraInitializers);
         }
         static {
             __runInitializers(_classThis, _classExtraInitializers);

package/exports/drawer.js

@@ -64,7 +64,7 @@ let CustomDrawer = (() => {
         #id_accessor_storage = (__runInitializers(this, _right_extraInitializers), __runInitializers(this, _id_initializers, void 0));
         get id() { return this.#id_accessor_storage; }
         set id(value) { this.#id_accessor_storage = value; }
-        connectedCallback() {
+        firstRender() {
             document.addEventListener('custom-pane-close', ({ detail }) => {
                 if (this.id === detail)
                     this.open = false;

package/exports/icon-button.js

@@ -71,9 +71,9 @@ let CustomIconButton = (() => {
         ];
         render() {
             return html `
-      <button label=${this.label}>
+      <button label=${this.label || this.icon}>
         <custom-elevation></custom-elevation>
-        <slot name="icon"> <custom-icon .icon=${this.icon}></custom-icon></slot>
+        <slot name="icon"> <custom-icon .icon=${this.icon || this.label}></custom-icon></slot>
         <span class="label">${this.label}</span>
         <span class="hover"></span>
       </button>

package/exports/input2.js

@@ -0,0 +1,29 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
+import { customElement, LiteElement, html } from '@vandeurenglenn/lite';
+
+let CustomPlacesInput = (() => {
+    let _classDecorators = [customElement('custom-pane')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [];
+        render() {
+            return html `<input type="text" placeholder="Search for places..." />`;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomPlacesInput };

package/exports/pane/pane.d.ts

@@ -9,6 +9,7 @@ export declare class CustomPane extends LiteElement {
     accessor left: boolean;
     accessor right: boolean;
     accessor id: string;
+    accessor icon: string;
     closePane(event: any): void;
     static styles: import("lit").CSSResultOrNative[];
     render(): import("lit-html").TemplateResult<1>;

package/exports/pane.js

@@ -32,6 +32,9 @@ let CustomPane = (() => {
     let _id_decorators;
     let _id_initializers = [];
     let _id_extraInitializers = [];
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
     (class extends _classSuper {
         static { _classThis = this; }
         static {
@@ -42,12 +45,14 @@ let CustomPane = (() => {
             _left_decorators = [property({ type: Boolean, reflect: true })];
             _right_decorators = [property({ type: Boolean, reflect: true })];
             _id_decorators = [property({ type: String })];
+            _icon_decorators = [property({ type: String })];
             __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
             __esDecorate(this, null, _mobile_decorators, { kind: "accessor", name: "mobile", static: false, private: false, access: { has: obj => "mobile" in obj, get: obj => obj.mobile, set: (obj, value) => { obj.mobile = value; } }, metadata: _metadata }, _mobile_initializers, _mobile_extraInitializers);
             __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
             __esDecorate(this, null, _left_decorators, { kind: "accessor", name: "left", static: false, private: false, access: { has: obj => "left" in obj, get: obj => obj.left, set: (obj, value) => { obj.left = value; } }, metadata: _metadata }, _left_initializers, _left_extraInitializers);
             __esDecorate(this, null, _right_decorators, { kind: "accessor", name: "right", static: false, private: false, access: { has: obj => "right" in obj, get: obj => obj.right, set: (obj, value) => { obj.right = value; } }, metadata: _metadata }, _right_initializers, _right_extraInitializers);
             __esDecorate(this, null, _id_decorators, { kind: "accessor", name: "id", static: false, private: false, access: { has: obj => "id" in obj, get: obj => obj.id, set: (obj, value) => { obj.id = value; } }, metadata: _metadata }, _id_initializers, _id_extraInitializers);
+            __esDecorate(this, null, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -70,6 +75,9 @@ let CustomPane = (() => {
         #id_accessor_storage = (__runInitializers(this, _right_extraInitializers), __runInitializers(this, _id_initializers, void 0));
         get id() { return this.#id_accessor_storage; }
         set id(value) { this.#id_accessor_storage = value; }
+        #icon_accessor_storage = (__runInitializers(this, _id_extraInitializers), __runInitializers(this, _icon_initializers, void 0));
+        get icon() { return this.#icon_accessor_storage; }
+        set icon(value) { this.#icon_accessor_storage = value; }
         closePane(event) {
             event.stopPropagation();
             this.open = false;
@@ -84,7 +92,8 @@ let CustomPane = (() => {
           <flex-row center>
             <slot name="headline"></slot>
             <flex-it></flex-it>
-            <custom-icon-button @click=${(e) => this.closePane(e)} .id=${this.id} icon="menu_open">
+
+            <custom-icon-button @click=${(e) => this.closePane(e)} .id=${this.id} .icon=${this.icon || 'menu_open'}>
             </custom-icon-button>
           </flex-row>
         </slot>
@@ -99,7 +108,7 @@ let CustomPane = (() => {
         }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _id_extraInitializers);
+            __runInitializers(this, _icon_extraInitializers);
         }
         static {
             __runInitializers(_classThis, _classExtraInitializers);

package/exports/places/input.d.ts

@@ -0,0 +1,5 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class CustomPlacesInput extends LiteElement {
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.81",
+	"version": "0.3.83",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {