@vandeurenglenn/lite-elements 0.3.24 → 0.3.25

package/exports/bundle/column-D2XB0lDz.js

@@ -0,0 +1 @@
+import{F as e}from"./row-DNgwBcX5.js";customElements.define("flex-column",class FlexColumn extends e{constructor(){super(),this.direction="column"}});

package/exports/bundle/demo-shell.js

@@ -1,4 +1,4 @@
-import{_ as t,a as e,e as o}from"./custom-element-BMhVvZjf.js";import{j as s,v as i,D as m}from"./property-Do5-bKhz.js";import{t as a}from"./query-D-PG8Oyh.js";import"./demo-icons.js";import"./section.js";import"./card.js";import"./theme.js";import"./divider.js";import"./button.js";import"./banner.js";import"./selector.js";import"./pages.js";import"./drawer.js";import"./drawer-button.js";import"./drawer-item.js";import"./section2.js";import"./drawer-layout.js";import"./top-app-bar-DZJ8jFM2.js";import"./icon.js";import"./typography.js";import"./pane.js";import"./supporting-pane.js";import"./tabs.js";import"./root.js";import"./dialog.js";import"./icon-set.js";import"./list-item.js";import"./menu.js";import"./icon-button.js";import"./dropdown-menu.js";import"./dropdown.js";import"./toggle.js";import"./toggle-button.js";import"./time-picker.js";import"./code.js";import"./elevation.js";import"./it-Dft_Rjy-.js";import"./selector-mixin.js";import"./select-mixin.js";import"./scroll-mixin.js";import"./index-B3uz3f8C.js";import"./tab.js";import"./input.js";let c=(()=>{let c,u,n,r,l=[o("demo-shell")],p=[],d=m,g=[],b=[],y=[],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},g,b),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},y,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,g,void 0);get selector(){return this.#t}set selector(t){this.#t=t}#e=(e(this,b),e(this,y,void 0));get pages(){return this.#e}set pages(t){this.#e=t}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-serlector")?this.selector.select(t):(this.selector.select(t),this.pages.select(t)))}static styles=[s`
+import{_ as t,a as e,e as o}from"./custom-element-BMhVvZjf.js";import{j as s,v as i,D as m}from"./property-Do5-bKhz.js";import{t as a}from"./query-D-PG8Oyh.js";import"./demo-icons.js";import"./section.js";import"./card.js";import"./theme.js";import"./divider.js";import"./button.js";import"./banner.js";import"./selector.js";import"./pages.js";import"./drawer.js";import"./drawer-button.js";import"./drawer-item.js";import"./section2.js";import"./drawer-layout.js";import"./top-app-bar.js";import"./icon.js";import"./typography.js";import"./pane.js";import"./supporting-pane.js";import"./tabs.js";import"./root.js";import"./dialog.js";import"./icon-set.js";import"./list-item.js";import"./menu.js";import"./icon-button.js";import"./dropdown-menu.js";import"./dropdown.js";import"./toggle.js";import"./toggle-button.js";import"./time-picker.js";import"./notification-Dwr0-l4e.js";import"./notifications.js";import"./code.js";import"./elevation.js";import"./it-Dft_Rjy-.js";import"./selector-mixin.js";import"./select-mixin.js";import"./scroll-mixin.js";import"./column-D2XB0lDz.js";import"./row-DNgwBcX5.js";import"./index-B3uz3f8C.js";import"./tab.js";import"./input.js";let c=(()=>{let c,u,n,r,l=[o("demo-shell")],p=[],d=m,g=[],b=[],y=[],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},g,b),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},y,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,g,void 0);get selector(){return this.#t}set selector(t){this.#t=t}#e=(e(this,b),e(this,y,void 0));get pages(){return this.#e}set pages(t){this.#e=t}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-serlector")?this.selector.select(t):(this.selector.select(t),this.pages.select(t)))}static styles=[s`
       custom-drawer-layout {
         height: 100%;
         width: 100%;

package/exports/bundle/drawer-layout.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t,e as a}from"./custom-element-BMhVvZjf.js";import{t as r,v as s,D as o}from"./property-Do5-bKhz.js";import"./drawer.js";import"./drawer-button.js";import"./drawer-item.js";import{F as n}from"./top-app-bar-DZJ8jFM2.js";import"./elevation.js";import"./button.js";import"./pane.js";import"./icon.js";import"./index-B3uz3f8C.js";import"./it-Dft_Rjy-.js";customElements.define("flex-column",class FlexColumn extends n{constructor(){super(),this.direction="column"}});let i=(()=>{let n,i,d,c,p,l,m,w,h=[a("custom-drawer-layout")],u=[],y=o,g=[],_=[],b=[],f=[],k=[],v=[],O=[],T=[],x=[],D=[],j=[],I=[];return class extends y{static{i=this}static{const a="function"==typeof Symbol&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;d=[r({type:Boolean,reflect:!0,attribute:"drawer-open"})],c=[r({type:Boolean,reflect:!0,attribute:"keep-closed"})],p=[r({type:Boolean,reflect:!0})],l=[r({type:String})],m=[r({type:String})],w=[r({type:String})],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:a},g,_),e(this,null,c,{kind:"accessor",name:"keepClosed",static:!1,private:!1,access:{has:e=>"keepClosed"in e,get:e=>e.keepClosed,set:(e,t)=>{e.keepClosed=t}},metadata:a},b,f),e(this,null,p,{kind:"accessor",name:"narrow",static:!1,private:!1,access:{has:e=>"narrow"in e,get:e=>e.narrow,set:(e,t)=>{e.narrow=t}},metadata:a},k,v),e(this,null,l,{kind:"accessor",name:"drawerType",static:!1,private:!1,access:{has:e=>"drawerType"in e,get:e=>e.drawerType,set:(e,t)=>{e.drawerType=t}},metadata:a},O,T),e(this,null,m,{kind:"accessor",name:"appBarType",static:!1,private:!1,access:{has:e=>"appBarType"in e,get:e=>e.appBarType,set:(e,t)=>{e.appBarType=t}},metadata:a},x,D),e(this,null,w,{kind:"accessor",name:"mainDrawerId",static:!1,private:!1,access:{has:e=>"mainDrawerId"in e,get:e=>e.mainDrawerId,set:(e,t)=>{e.mainDrawerId=t}},metadata:a},j,I),e(null,n={value:i},h,{kind:"class",name:i.name,metadata:a},null,u),i=n.value,a&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a}),t(i,u)}#e=t(this,g,!1);get drawerOpen(){return this.#e}set drawerOpen(e){this.#e=e}#t=(t(this,_),t(this,b,!1));get keepClosed(){return this.#t}set keepClosed(e){this.#t=e}#a=(t(this,f),t(this,k,!1));get narrow(){return this.#a}set narrow(e){this.#a=e}#r=(t(this,v),t(this,O,"modal"));get drawerType(){return this.#r}set drawerType(e){this.#r=e}#s=(t(this,T),t(this,x,"center-aligned"));get appBarType(){return this.#s}set appBarType(e){this.#s=e}#o=(t(this,D),t(this,j,crypto.randomUUID()));get mainDrawerId(){return this.#o}set mainDrawerId(e){this.#o=e}connectedCallback(){const e=matchMedia("(max-width: 860px)");this._onnarrow({detail:e.matches}),document.addEventListener("custom-pane-close",(({detail:e})=>{this.mainDrawerId===e&&(this.drawerOpen=!1)})),document.addEventListener("custom-pane-open",(({detail:e})=>{this.mainDrawerId!==e||this.keepClosed||(this.drawerOpen=!0)})),document.addEventListener("custom-theme-narrow",this._onnarrow)}_onnarrow({detail:e}){if(this.narrow=e,this.keepClosed)return this.drawerOpen=!1;this.drawerOpen=!e}_click=(t(this,I),()=>{this.narrow&&(this.drawerOpen=!this.drawerOpen)});render(){return s`<style>
+import{_ as e,a as t,e as a}from"./custom-element-BMhVvZjf.js";import{t as r,v as s,D as o}from"./property-Do5-bKhz.js";import"./drawer.js";import"./drawer-button.js";import"./drawer-item.js";import"./top-app-bar.js";import"./column-D2XB0lDz.js";import"./elevation.js";import"./button.js";import"./pane.js";import"./icon.js";import"./index-B3uz3f8C.js";import"./it-Dft_Rjy-.js";import"./row-DNgwBcX5.js";let n=(()=>{let n,i,d,c,p,l,m,w,h=[a("custom-drawer-layout")],u=[],y=o,g=[],_=[],b=[],k=[],f=[],v=[],O=[],T=[],j=[],x=[],D=[],I=[];return class extends y{static{i=this}static{const a="function"==typeof Symbol&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;d=[r({type:Boolean,reflect:!0,attribute:"drawer-open"})],c=[r({type:Boolean,reflect:!0,attribute:"keep-closed"})],p=[r({type:Boolean,reflect:!0})],l=[r({type:String})],m=[r({type:String})],w=[r({type:String})],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:a},g,_),e(this,null,c,{kind:"accessor",name:"keepClosed",static:!1,private:!1,access:{has:e=>"keepClosed"in e,get:e=>e.keepClosed,set:(e,t)=>{e.keepClosed=t}},metadata:a},b,k),e(this,null,p,{kind:"accessor",name:"narrow",static:!1,private:!1,access:{has:e=>"narrow"in e,get:e=>e.narrow,set:(e,t)=>{e.narrow=t}},metadata:a},f,v),e(this,null,l,{kind:"accessor",name:"drawerType",static:!1,private:!1,access:{has:e=>"drawerType"in e,get:e=>e.drawerType,set:(e,t)=>{e.drawerType=t}},metadata:a},O,T),e(this,null,m,{kind:"accessor",name:"appBarType",static:!1,private:!1,access:{has:e=>"appBarType"in e,get:e=>e.appBarType,set:(e,t)=>{e.appBarType=t}},metadata:a},j,x),e(this,null,w,{kind:"accessor",name:"mainDrawerId",static:!1,private:!1,access:{has:e=>"mainDrawerId"in e,get:e=>e.mainDrawerId,set:(e,t)=>{e.mainDrawerId=t}},metadata:a},D,I),e(null,n={value:i},h,{kind:"class",name:i.name,metadata:a},null,u),i=n.value,a&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a}),t(i,u)}#e=t(this,g,!1);get drawerOpen(){return this.#e}set drawerOpen(e){this.#e=e}#t=(t(this,_),t(this,b,!1));get keepClosed(){return this.#t}set keepClosed(e){this.#t=e}#a=(t(this,k),t(this,f,!1));get narrow(){return this.#a}set narrow(e){this.#a=e}#r=(t(this,v),t(this,O,"modal"));get drawerType(){return this.#r}set drawerType(e){this.#r=e}#s=(t(this,T),t(this,j,"center-aligned"));get appBarType(){return this.#s}set appBarType(e){this.#s=e}#o=(t(this,x),t(this,D,crypto.randomUUID()));get mainDrawerId(){return this.#o}set mainDrawerId(e){this.#o=e}connectedCallback(){const e=matchMedia("(max-width: 860px)");this._onnarrow({detail:e.matches}),document.addEventListener("custom-pane-close",(({detail:e})=>{this.mainDrawerId===e&&(this.drawerOpen=!1)})),document.addEventListener("custom-pane-open",(({detail:e})=>{this.mainDrawerId!==e||this.keepClosed||(this.drawerOpen=!0)})),document.addEventListener("custom-theme-narrow",this._onnarrow)}_onnarrow({detail:e}){if(this.narrow=e,this.keepClosed)return this.drawerOpen=!1;this.drawerOpen=!e}_click=(t(this,I),()=>{this.narrow&&(this.drawerOpen=!this.drawerOpen)});render(){return s`<style>
         :host {
           --custom-drawer-width: 320px;
           display: flex;
@@ -93,4 +93,4 @@ import{_ as e,a as t,e as a}from"./custom-element-BMhVvZjf.js";import{t as r,v a
             <slot></slot>
           </main>
         </slot>
-      </flex-column> `}},i})();export{i as CustomDrawerLayout};
+      </flex-column> `}},i})();export{n as CustomDrawerLayout};

package/exports/bundle/elements.js

@@ -1 +1 @@
-export{CustomCard}from"./card.js";export{CustomTheme}from"./theme.js";export{CustomDivider}from"./divider.js";export{CustomButton}from"./button.js";export{CustomBanner}from"./banner.js";export{CustomSelector}from"./selector.js";export{CustomPages}from"./pages.js";export{CustomDrawer}from"./drawer.js";export{CustomDrawerButton}from"./drawer-button.js";export{CustomDrawerItem}from"./drawer-item.js";export{CustomSection}from"./section2.js";export{CustomDrawerLayout}from"./drawer-layout.js";export{C as CustomTopAppBar}from"./top-app-bar-DZJ8jFM2.js";export{Icon as CustomIcon}from"./icon.js";export{CustomTypography}from"./typography.js";export{CustomPane}from"./pane.js";export{CustomSupportingPane}from"./supporting-pane.js";export{CustomTabs}from"./tabs.js";export{CustomRoot}from"./root.js";export{CustomDialog}from"./dialog.js";export{CustomIconSet}from"./icon-set.js";export{CustomListItem}from"./list-item.js";export{CustomMenu}from"./menu.js";export{CustomIconButton}from"./icon-button.js";export{CustomDropdownMenu}from"./dropdown-menu.js";export{CustomDropdown}from"./dropdown.js";export{CustomToggle}from"./toggle.js";export{CustomToggleButton}from"./toggle-button.js";export{CustomTimePicker}from"./time-picker.js";import"./custom-element-BMhVvZjf.js";import"./property-Do5-bKhz.js";import"./elevation.js";import"./it-Dft_Rjy-.js";import"./selector-mixin.js";import"./select-mixin.js";import"./scroll-mixin.js";import"./index-B3uz3f8C.js";import"./query-D-PG8Oyh.js";import"./tab.js";import"./input.js";
+export{CustomCard}from"./card.js";export{CustomTheme}from"./theme.js";export{CustomDivider}from"./divider.js";export{CustomButton}from"./button.js";export{CustomBanner}from"./banner.js";export{CustomSelector}from"./selector.js";export{CustomPages}from"./pages.js";export{CustomDrawer}from"./drawer.js";export{CustomDrawerButton}from"./drawer-button.js";export{CustomDrawerItem}from"./drawer-item.js";export{CustomSection}from"./section2.js";export{CustomDrawerLayout}from"./drawer-layout.js";export{CustomTopAppBar}from"./top-app-bar.js";export{Icon as CustomIcon}from"./icon.js";export{CustomTypography}from"./typography.js";export{CustomPane}from"./pane.js";export{CustomSupportingPane}from"./supporting-pane.js";export{CustomTabs}from"./tabs.js";export{CustomRoot}from"./root.js";export{CustomDialog}from"./dialog.js";export{CustomIconSet}from"./icon-set.js";export{CustomListItem}from"./list-item.js";export{CustomMenu}from"./menu.js";export{CustomIconButton}from"./icon-button.js";export{CustomDropdownMenu}from"./dropdown-menu.js";export{CustomDropdown}from"./dropdown.js";export{CustomToggle}from"./toggle.js";export{CustomToggleButton}from"./toggle-button.js";export{CustomTimePicker}from"./time-picker.js";export{C as CustomNotification}from"./notification-Dwr0-l4e.js";export{CustomNotifications}from"./notifications.js";import"./custom-element-BMhVvZjf.js";import"./property-Do5-bKhz.js";import"./elevation.js";import"./it-Dft_Rjy-.js";import"./selector-mixin.js";import"./select-mixin.js";import"./scroll-mixin.js";import"./column-D2XB0lDz.js";import"./row-DNgwBcX5.js";import"./index-B3uz3f8C.js";import"./query-D-PG8Oyh.js";import"./tab.js";import"./input.js";

package/exports/bundle/notification-Dwr0-l4e.js

@@ -0,0 +1,91 @@
+import{e as t,_ as e,a as i}from"./custom-element-BMhVvZjf.js";import{L as o}from"./index-B3uz3f8C.js";import{t as r,j as a,v as h,D as c}from"./property-Do5-bKhz.js";import"./column-D2XB0lDz.js";import"./row-DNgwBcX5.js";
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const l=globalThis,d=l.ShadowRoot&&(void 0===l.ShadyCSS||l.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,p=Symbol(),u=new WeakMap;let _=class n{constructor(t,e,i){if(this._$cssResult$=!0,i!==p)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(d&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=u.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&u.set(e,t))}return t}toString(){return this.cssText}};const m=d?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new _("string"==typeof t?t:t+"",void 0,p))(e)})(t):t
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */,{is:f,defineProperty:$,getOwnPropertyDescriptor:g,getOwnPropertyNames:y,getOwnPropertySymbols:v,getPrototypeOf:A}=Object,E=globalThis,w=E.trustedTypes,P=w?w.emptyScript:"",C=E.reactiveElementPolyfillSupport,U=(t,e)=>t,x={toAttribute(t,e){switch(e){case Boolean:t=t?P:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},O=(t,e)=>!f(t,e),T={attribute:!0,type:String,converter:x,reflect:!1,hasChanged:O};Symbol.metadata??=Symbol("metadata"),E.litPropertyMetadata??=new WeakMap;let N=class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=T){if(e.state&&(e.attribute=!1),this._$Ei(),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(t,i,e);void 0!==o&&$(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:r}=g(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get(){return o?.call(this)},set(e){const a=o?.call(this);r.call(this,e),this.requestUpdate(t,a,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??T}static _$Ei(){if(this.hasOwnProperty(U("elementProperties")))return;const t=A(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(U("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(U("properties"))){const t=this.properties,e=[...y(t),...v(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(m(t))}else void 0!==t&&e.push(m(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,e)=>{if(d)t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const i of e){const e=document.createElement("style"),o=l.litNonce;void 0!==o&&e.setAttribute("nonce",o),e.textContent=i.cssText,t.appendChild(e)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$EC(t,e){const i=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,i);if(void 0!==o&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:x).toAttribute(e,i.type);this._$Em=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$Em=null}}_$AK(t,e){const i=this.constructor,o=i._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=i.getPropertyOptions(o),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:x;this._$Em=o,this[o]=r.fromAttribute(e,t.type),this._$Em=null}}requestUpdate(t,e,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??O)(this[t],e))return;this.P(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$ET())}P(t,e,i){this._$AL.has(t)||this._$AL.set(t,e),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t)!0!==i.wrapped||this._$AL.has(e)||void 0===this[e]||this.P(e,this[e],i)}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(e)):this._$EU()}catch(e){throw t=!1,this._$EU(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU()}updated(t){}firstUpdated(t){}};N.elementStyles=[],N.shadowRootOptions={mode:"open"},N[U("elementProperties")]=new Map,N[U("finalized")]=new Map,C?.({ReactiveElement:N}),(E.reactiveElementVersions??=[]).push("2.0.4");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const z=globalThis,j=z.trustedTypes,D=j?j.createPolicy("lit-html",{createHTML:t=>t}):void 0,B="$lit$",W=`lit$${(Math.random()+"").slice(9)}$`,q="?"+W,J=`<${q}>`,K=document,Z=()=>K.createComment(""),F=t=>null===t||"object"!=typeof t&&"function"!=typeof t,G=Array.isArray,Q="[ \t\n\f\r]",X=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Y=/-->/g,tt=/>/g,et=RegExp(`>|${Q}(?:([^\\s"'>=/]+)(${Q}*=${Q}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),st=/'/g,it=/"/g,ot=/^(?:script|style|textarea|title)$/i,rt=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),nt=Symbol.for("lit-noChange"),at=Symbol.for("lit-nothing"),ht=new WeakMap,ct=K.createTreeWalker(K,129);function lt(t,e){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==D?D.createHTML(e):e}const dt=(t,e)=>{const i=t.length-1,o=[];let r,a=2===e?"<svg>":"",h=X;for(let e=0;e<i;e++){const i=t[e];let c,l,d=-1,p=0;for(;p<i.length&&(h.lastIndex=p,l=h.exec(i),null!==l);)p=h.lastIndex,h===X?"!--"===l[1]?h=Y:void 0!==l[1]?h=tt:void 0!==l[2]?(ot.test(l[2])&&(r=RegExp("</"+l[2],"g")),h=et):void 0!==l[3]&&(h=et):h===et?">"===l[0]?(h=r??X,d=-1):void 0===l[1]?d=-2:(d=h.lastIndex-l[2].length,c=l[1],h=void 0===l[3]?et:'"'===l[3]?it:st):h===it||h===st?h=et:h===Y||h===tt?h=X:(h=et,r=void 0);const u=h===et&&t[e+1].startsWith("/>")?" ":"";a+=h===X?i+J:d>=0?(o.push(c),i.slice(0,d)+B+i.slice(d)+W+u):i+W+(-2===d?e:u)}return[lt(t,a+(t[i]||"<?>")+(2===e?"</svg>":"")),o]};class V{constructor({strings:t,_$litType$:e},i){let o;this.parts=[];let r=0,a=0;const h=t.length-1,c=this.parts,[l,d]=dt(t,e);if(this.el=V.createElement(l,i),ct.currentNode=this.el.content,2===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(o=ct.nextNode())&&c.length<h;){if(1===o.nodeType){if(o.hasAttributes())for(const t of o.getAttributeNames())if(t.endsWith(B)){const e=d[a++],i=o.getAttribute(t).split(W),h=/([.?@])?(.*)/.exec(e);c.push({type:1,index:r,name:h[2],strings:i,ctor:"."===h[1]?k:"?"===h[1]?H:"@"===h[1]?I:R}),o.removeAttribute(t)}else t.startsWith(W)&&(c.push({type:6,index:r}),o.removeAttribute(t));if(ot.test(o.tagName)){const t=o.textContent.split(W),e=t.length-1;if(e>0){o.textContent=j?j.emptyScript:"";for(let i=0;i<e;i++)o.append(t[i],Z()),ct.nextNode(),c.push({type:2,index:++r});o.append(t[e],Z())}}}else if(8===o.nodeType)if(o.data===q)c.push({type:2,index:r});else{let t=-1;for(;-1!==(t=o.data.indexOf(W,t+1));)c.push({type:7,index:r}),t+=W.length-1}r++}}static createElement(t,e){const i=K.createElement("template");return i.innerHTML=t,i}}function pt(t,e,i=t,o){if(e===nt)return e;let r=void 0!==o?i._$Co?.[o]:i._$Cl;const a=F(e)?void 0:e._$litDirective$;return r?.constructor!==a&&(r?._$AO?.(!1),void 0===a?r=void 0:(r=new a(t),r._$AT(t,i,o)),void 0!==o?(i._$Co??=[])[o]=r:i._$Cl=r),void 0!==r&&(e=pt(t,r._$AS(t,e.values),r,o)),e}let ut=class S{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:i}=this._$AD,o=(t?.creationScope??K).importNode(e,!0);ct.currentNode=o;let r=ct.nextNode(),a=0,h=0,c=i[0];for(;void 0!==c;){if(a===c.index){let e;2===c.type?e=new M(r,r.nextSibling,this,t):1===c.type?e=new c.ctor(r,c.name,c.strings,this,t):6===c.type&&(e=new L(r,this,t)),this._$AV.push(e),c=i[++h]}a!==c?.index&&(r=ct.nextNode(),a++)}return ct.currentNode=K,o}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}};class M{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,o){this.type=2,this._$AH=at,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=pt(this,t,e),F(t)?t===at||null==t||""===t?(this._$AH!==at&&this._$AR(),this._$AH=at):t!==this._$AH&&t!==nt&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>G(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}S(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.S(t))}_(t){this._$AH!==at&&F(this._$AH)?this._$AA.nextSibling.data=t:this.T(K.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,o="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=V.createElement(lt(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===o)this._$AH.p(e);else{const t=new ut(o,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=ht.get(t.strings);return void 0===e&&ht.set(t.strings,e=new V(t)),e}k(t){G(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,o=0;for(const r of t)o===e.length?e.push(i=new M(this.S(Z()),this.S(Z()),this,this.options)):i=e[o],i._$AI(r),o++;o<e.length&&(this._$AR(i&&i._$AB.nextSibling,o),e.length=o)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class R{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,o,r){this.type=1,this._$AH=at,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=r,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=at}_$AI(t,e=this,i,o){const r=this.strings;let a=!1;if(void 0===r)t=pt(this,t,e,0),a=!F(t)||t!==this._$AH&&t!==nt,a&&(this._$AH=t);else{const o=t;let h,c;for(t=r[0],h=0;h<r.length-1;h++)c=pt(this,o[i+h],e,h),c===nt&&(c=this._$AH[h]),a||=!F(c)||c!==this._$AH[h],c===at?t=at:t!==at&&(t+=(c??"")+r[h+1]),this._$AH[h]=c}a&&!o&&this.j(t)}j(t){t===at?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class k extends R{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===at?void 0:t}}class H extends R{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==at)}}class I extends R{constructor(t,e,i,o,r){super(t,e,i,o,r),this.type=5}_$AI(t,e=this){if((t=pt(this,t,e,0)??at)===nt)return;const i=this._$AH,o=t===at&&i!==at||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,r=t!==at&&(i===at||o);o&&this.element.removeEventListener(this.name,this,i),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class L{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){pt(this,t)}}const _t=z.litHtmlPolyfillSupport;_t?.(V,M),(z.litHtmlVersions??=[]).push("3.1.2");const mt=globalThis,ft=mt.ShadowRoot&&(void 0===mt.ShadyCSS||mt.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,$t=Symbol(),gt=new WeakMap;
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */let yt=class n{constructor(t,e,i){if(this._$cssResult$=!0,i!==$t)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(ft&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=gt.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&gt.set(e,t))}return t}toString(){return this.cssText}};const vt=(t,...e)=>{const i=1===t.length?t[0]:e.reduce(((e,i,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[o+1]),t[0]);return new yt(i,t,$t)},bt=ft?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new yt("string"==typeof t?t:t+"",void 0,$t))(e)})(t):t
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */,{is:At,defineProperty:Et,getOwnPropertyDescriptor:St,getOwnPropertyNames:wt,getOwnPropertySymbols:Pt,getPrototypeOf:Ct}=Object,Ut=globalThis,xt=Ut.trustedTypes,Ot=xt?xt.emptyScript:"",Tt=Ut.reactiveElementPolyfillSupport,Rt=(t,e)=>t,Mt={toAttribute(t,e){switch(e){case Boolean:t=t?Ot:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},Nt=(t,e)=>!At(t,e),kt={attribute:!0,type:String,converter:Mt,reflect:!1,hasChanged:Nt};Symbol.metadata??=Symbol("metadata"),Ut.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=kt){if(e.state&&(e.attribute=!1),this._$Ei(),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(t,i,e);void 0!==o&&Et(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:r}=St(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get(){return o?.call(this)},set(e){const a=o?.call(this);r.call(this,e),this.requestUpdate(t,a,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??kt}static _$Ei(){if(this.hasOwnProperty(Rt("elementProperties")))return;const t=Ct(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(Rt("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(Rt("properties"))){const t=this.properties,e=[...wt(t),...Pt(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(bt(t))}else void 0!==t&&e.push(bt(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,e)=>{if(ft)t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const i of e){const e=document.createElement("style"),o=mt.litNonce;void 0!==o&&e.setAttribute("nonce",o),e.textContent=i.cssText,t.appendChild(e)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$EC(t,e){const i=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,i);if(void 0!==o&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:Mt).toAttribute(e,i.type);this._$Em=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$Em=null}}_$AK(t,e){const i=this.constructor,o=i._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=i.getPropertyOptions(o),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:Mt;this._$Em=o,this[o]=r.fromAttribute(e,t.type),this._$Em=null}}requestUpdate(t,e,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??Nt)(this[t],e))return;this.P(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$ET())}P(t,e,i){this._$AL.has(t)||this._$AL.set(t,e),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t)!0!==i.wrapped||this._$AL.has(e)||void 0===this[e]||this.P(e,this[e],i)}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(e)):this._$EU()}catch(e){throw t=!1,this._$EU(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU()}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[Rt("elementProperties")]=new Map,b[Rt("finalized")]=new Map,Tt?.({ReactiveElement:b}),(Ut.reactiveElementVersions??=[]).push("2.0.4");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class s extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{const o=i?.renderBefore??e;let r=o._$litPart$;if(void 0===r){const t=i?.renderBefore??null;o._$litPart$=r=new M(e.insertBefore(Z(),t),t,void 0,i??{})}return r._$AI(t),r})(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return nt}}s._$litElement$=!0,s.finalized=!0,globalThis.litElementHydrateSupport?.({LitElement:s});const Ht=globalThis.litElementPolyfillSupport;Ht?.({LitElement:s}),(globalThis.litElementVersions??=[]).push("4.0.4");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const zt=t=>(e,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(t,e)})):customElements.define(t,e)}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */,jt={attribute:!0,type:String,converter:x,reflect:!1,hasChanged:O},Lt=(t=jt,e,i)=>{const{kind:o,metadata:r}=i;let a=globalThis.litPropertyMetadata.get(r);if(void 0===a&&globalThis.litPropertyMetadata.set(r,a=new Map),a.set(i.name,t),"accessor"===o){const{name:o}=i;return{set(i){const r=e.get.call(this);e.set.call(this,i),this.requestUpdate(o,r,t)},init(e){return void 0!==e&&this.P(o,void 0,t),e}}}if("setter"===o){const{name:o}=i;return function(i){const r=this[o];e.call(this,i),this.requestUpdate(o,r,t)}}throw Error("Unsupported decorator location: "+o)};function Dt(t){return(e,i)=>"object"==typeof i?Lt(t,e,i):((t,e,i)=>{const o=e.hasOwnProperty(i);return e.constructor.createProperty(i,o?{...t,wrapped:!0}:t),o?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}function It(t,e,i,o,r,a){function h(t){if(void 0!==t&&"function"!=typeof t)throw new TypeError("Function expected");return t}for(var c,l=o.kind,d="getter"===l?"get":"setter"===l?"set":"value",p=!e&&t?o.static?t:t.prototype:null,u=e||(p?Object.getOwnPropertyDescriptor(p,o.name):{}),_=!1,m=i.length-1;m>=0;m--){var f={};for(var $ in o)f[$]="access"===$?{}:o[$];for(var $ in o.access)f.access[$]=o.access[$];f.addInitializer=function(t){if(_)throw new TypeError("Cannot add initializers after decoration has completed");a.push(h(t||null))};var g=(0,i[m])("accessor"===l?{get:u.get,set:u.set}:u[d],f);if("accessor"===l){if(void 0===g)continue;if(null===g||"object"!=typeof g)throw new TypeError("Object expected");(c=h(g.get))&&(u.get=c),(c=h(g.set))&&(u.set=c),(c=h(g.init))&&r.unshift(c)}else(c=h(g))&&("field"===l?r.unshift(c):u[d]=c)}p&&Object.defineProperty(p,o.name,u),_=!0}function Bt(t,e,i){for(var o=arguments.length>2,r=0;r<e.length;r++)i=o?e[r].call(t,i):e[r].call(t);return o?i:void 0}"function"==typeof SuppressedError&&SuppressedError,globalThis.pubsub=globalThis.pubsub||new o(!0),(()=>{let e,i,o,l,d,p,u=[t("custom-icon")],_=[],m=c,f=[],$=[],g=[],y=[],v=[],A=[],E=[],w=[];(class extends m{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;o=[r()],l=[r({attribute:"icon"})],d=[r()],p=[r()],It(this,null,o,{kind:"accessor",name:"host",static:!1,private:!1,access:{has:t=>"host"in t,get:t=>t.host,set:(t,e)=>{t.host=e}},metadata:t},f,$),It(this,null,l,{kind:"accessor",name:"icon",static:!1,private:!1,access:{has:t=>"icon"in t,get:t=>t.icon,set:(t,e)=>{t.icon=e}},metadata:t},g,y),It(this,null,d,{kind:"accessor",name:"setName",static:!1,private:!1,access:{has:t=>"setName"in t,get:t=>t.setName,set:(t,e)=>{t.setName=e}},metadata:t},v,A),It(this,null,p,{kind:"accessor",name:"_icon",static:!1,private:!1,access:{has:t=>"_icon"in t,get:t=>t._icon,set:(t,e)=>{t._icon=e}},metadata:t},E,w),It(null,e={value:i},u,{kind:"class",name:i.name,metadata:t},null,_),i=e.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#t=Bt(this,f,void 0);get host(){return this.#t}set host(t){this.#t=t}#e=(Bt(this,$),Bt(this,g,this.innerHTML));get icon(){return this.#e}set icon(t){this.#e=t}#s=(Bt(this,y),Bt(this,v,void 0));get setName(){return this.#s}set setName(t){this.#s=t}#i=(Bt(this,A),Bt(this,E,void 0));get _icon(){return this.#i}set _icon(t){this.#i=t}onChange(t,e){"setName"===t&&(this.host=globalThis.pubsub.subscribers[`custom-icon-set-${e}-connected`]?.value,this.host||globalThis.pubsub.subscribe(`custom-icon-set-${e}-connected`,(t=>{t&&(this.host=t)}))),"icon"!==t&&"host"!==t||this.host&&this.icon&&(this._icon=this.host.getIcon(this.icon))}static styles=[a`
+      :host {
+        --__custom-icon-size: var(--custom-icon-size, 24px);
+        --custom-icon-color: var(--md-sys-color-on-surface);
+        display: flex;
+        height: var(--custom-icon-size, 24px);
+        width: var(--custom-icon-size, 24px);
+      }
+
+      svg {
+        fill: var(--custom-icon-color);
+        height: inherit;
+        width: inherit;
+        pointer-events: none;
+      }
+    `];connectedCallback(){this.setName=this.getAttribute("set-name")||"icons"}render(){return h` ${this._icon} `}constructor(){super(...arguments),Bt(this,w)}static{Bt(i,_)}})})();let Vt=(()=>{let t,o,r,a,h,c,l=[zt("custom-notification")],d=[],p=s,u=[],_=[],m=[],f=[],$=[],g=[],y=[],v=[];return class extends p{static{o=this}static{const i="function"==typeof Symbol&&Symbol.metadata?Object.create(p[Symbol.metadata]??null):void 0;r=[Dt()],a=[Dt()],h=[Dt()],c=[Dt()],e(this,null,r,{kind:"accessor",name:"title",static:!1,private:!1,access:{has:t=>"title"in t,get:t=>t.title,set:(t,e)=>{t.title=e}},metadata:i},u,_),e(this,null,a,{kind:"accessor",name:"message",static:!1,private:!1,access:{has:t=>"message"in t,get:t=>t.message,set:(t,e)=>{t.message=e}},metadata:i},m,f),e(this,null,h,{kind:"accessor",name:"image",static:!1,private:!1,access:{has:t=>"image"in t,get:t=>t.image,set:(t,e)=>{t.image=e}},metadata:i},$,g),e(this,null,c,{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:i},y,v),e(null,t={value:o},l,{kind:"class",name:o.name,metadata:i},null,d),o=t.value,i&&Object.defineProperty(o,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})}#o=i(this,u,void 0);get title(){return this.#o}set title(t){this.#o=t}#r=(i(this,_),i(this,m,void 0));get message(){return this.#r}set message(t){this.#r=t}#n=(i(this,f),i(this,$,void 0));get image(){return this.#n}set image(t){this.#n=t}#a=(i(this,g),i(this,y,void 0));get type(){return this.#a}set type(t){this.#a=t}#h=(i(this,v),()=>{this.parentElement.removeChild(this)});static styles=vt`
+    :host {
+      display: flex;
+      align-items: flex-start;
+      font-size: 13px;
+      border: 1px solid;
+      border-radius: 12px;
+      padding: 6px 12px;
+      box-sizing: border-box;
+      margin-bottom: 12px;
+    }
+
+    flex-row {
+      height: 24px;
+      box-sizing: border-box;
+      align-items: center;
+    }
+
+    strong {
+      font-size: 14px;
+    }
+  `;render(){return rt`
+      ${this.image?rt`<img src=${this.image} />`:""}
+      <flex-column>
+        <flex-row>
+          <strong>${this.title}</strong>
+          <flex-it></flex-it>
+          <custom-icon icon="close" @click=${this.#h}></custom-icon>
+        </flex-row>
+
+        <p>${this.message}</p>
+      </flex-column>
+    `}static{i(o,d)}},o})();export{Vt as C,It as _,Bt as a};

package/exports/bundle/notification.js

@@ -0,0 +1 @@
+import"./custom-element-BMhVvZjf.js";export{C as CustomNotification}from"./notification-Dwr0-l4e.js";import"./column-D2XB0lDz.js";import"./row-DNgwBcX5.js";import"./index-B3uz3f8C.js";import"./property-Do5-bKhz.js";

package/exports/bundle/notifications.js

@@ -0,0 +1,359 @@
+import{e,_ as t,a as s}from"./custom-element-BMhVvZjf.js";import{t as a,v as o,D as l,j as i}from"./property-Do5-bKhz.js";import{_ as r,a as n}from"./notification-Dwr0-l4e.js";import"./row-DNgwBcX5.js";import"./index-B3uz3f8C.js";import"./column-D2XB0lDz.js";
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */(()=>{let t,s,i,c=[e("custom-elevation")],d=[],h=l,m=[],p=[];(class extends h{static{s=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;i=[a({type:Number,renders:!1})],r(this,null,i,{kind:"accessor",name:"level",static:!1,private:!1,access:{has:e=>"level"in e,get:e=>e.level,set:(e,t)=>{e.level=t}},metadata:e},m,p),r(null,t={value:s},c,{kind:"class",name:s.name,metadata:e},null,d),s=t.value,e&&Object.defineProperty(s,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e}),n(s,d)}#e=n(this,m,void 0);get level(){return this.#e}set level(e){this.#e=e}onChange(e,t){"level"===e&&this.style.setProperty("--md-elevation-level",String(t))}render(){return o`
+      <style>
+        :host {
+          --_level: var(--md-elevation-level, 0);
+          --_shadow-color: var(--md-sys-color-shadow);
+          display: flex;
+          pointer-events: none;
+        }
+
+        :host,
+        .shadow,
+        .shadow::before,
+        .shadow::after {
+          border-radius: inherit;
+          inset: 0;
+          position: absolute;
+          transition-duration: inherit;
+          transition-timing-function: inherit;
+        }
+
+        .shadow::before,
+        .shadow::after {
+          content: '';
+          transition-property: box-shadow, opacity;
+        }
+
+        .shadow::before {
+          box-shadow: 0px
+            calc(
+              1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))
+            )
+            calc(
+              1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))
+            )
+            0px var(--_shadow-color);
+          opacity: 0.3;
+        }
+
+        .shadow::after {
+          box-shadow: 0px
+            calc(
+              1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))
+            )
+            calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3)))
+            calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);
+          opacity: 0.15;
+        }
+      </style>
+
+      <span class="shadow"></span>
+    `}constructor(){super(...arguments),n(this,p)}})})(),(()=>{let t,s,c,d,h,m,p=[e("custom-button")],u=[],v=l,y=[],g=[],b=[],f=[],_=[],x=[],w=[],k=[];(class extends v{static{s=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(v[Symbol.metadata]??null):void 0;c=[a({attribute:"has-icon",reflect:!0})],d=[a({attribute:"has-label",reflect:!0})],h=[a({attribute:"type",reflect:!0})],m=[a()],r(this,null,c,{kind:"accessor",name:"hasIcon",static:!1,private:!1,access:{has:e=>"hasIcon"in e,get:e=>e.hasIcon,set:(e,t)=>{e.hasIcon=t}},metadata:e},y,g),r(this,null,d,{kind:"accessor",name:"hasLabel",static:!1,private:!1,access:{has:e=>"hasLabel"in e,get:e=>e.hasLabel,set:(e,t)=>{e.hasLabel=t}},metadata:e},b,f),r(this,null,h,{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:e},_,x),r(this,null,m,{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:e},w,k),r(null,t={value:s},p,{kind:"class",name:s.name,metadata:e},null,u),s=t.value,e&&Object.defineProperty(s,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=n(this,y,void 0);get hasIcon(){return this.#t}set hasIcon(e){this.#t=e}#s=(n(this,g),n(this,b,void 0));get hasLabel(){return this.#s}set hasLabel(e){this.#s=e}#a=(n(this,f),n(this,_,"text"));get type(){return this.#a}set type(e){this.#a=e}#o=(n(this,x),n(this,w,void 0));get label(){return this.#o}set label(e){this.#o=e}static styles=[i`
+      :host {
+        color: var(--custom-button-color, --md-sys-color-on-background);
+        display: flex;
+
+        height: 40px;
+        border-radius: 20px;
+        position: relative;
+        pointer-events: auto;
+        cursor: pointer;
+
+        --elevation-level: 0;
+      }
+
+      button {
+        box-sizing: border-box;
+        border: none;
+        background: transparent;
+        color: inherit;
+        align-items: center;
+        justify-content: center;
+        user-select: none;
+        outline: none;
+        cursor: pointer;
+        border-radius: inherit;
+        padding: none;
+        width: inherit;
+        height: inherit;
+        display: flex;
+        pointer-events: none;
+      }
+
+      .label,
+      ::slotted(*) {
+        font-family: var(--md-sys-typescale-label-large-font-family-name);
+        font-style: var(--md-sys-typescale-label-large-font-family-style);
+        font-weight: var(--md-sys-typescale-label-large-font-weight);
+        font-size: var(--md-sys-typescale-label-large-font-size);
+        letter-spacing: var(--md-sys-typescale-label-large-tracking);
+        line-height: var(--md-sys-typescale-label-large-height);
+        text-transform: var(--md-sys-typescale-label-large-text-transform);
+        text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+      }
+
+      :host([type='filled']),
+      :host([type='filled']) ::slotted(*) {
+        color: var(--md-sys-color-on-primary);
+        fill: var(--md-sys-color-on-primary);
+        background: var(--md-sys-color-primary);
+      }
+
+      :host([type='outlined']),
+      :host([type='outlined']) ::slotted(*) {
+        color: var(--md-sys-color-on-surface);
+        fill: var(--md-sys-color-on-surface);
+        background: var(--md-sys-color-surface);
+        border: solid 1px;
+        border-color: var(--md-sys-color-outline);
+      }
+
+      :host([type='elevated']),
+      :host([type='elevated']) ::slotted(*) {
+        color: var(--md-sys-color-primary);
+        fill: var(--md-sys-color-primary);
+        background: var(--md-sys-color-surface-container-low);
+      }
+
+      :host([type='tertiary']),
+      :host([type='tertiary']) ::slotted(*) {
+        background: var(--md-sys-color-tertiary);
+        color: var(--md-sys-color-on-tertiary);
+        fill: var(--md-sys-color-on-tertiary);
+      }
+
+      :host([type='tonal']),
+      :host([type='tonal']) ::slotted(*) {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-seconday-container);
+        fill: var(--md-sys-color-on-seconday-container);
+      }
+
+      custom-elevation {
+        --md-elevation-level: var(--elevation-level);
+      }
+
+      :host([type='elevated']) custom-elevation {
+        --elevation-level: 1;
+      }
+
+      :host([type='filled']),
+      :host([type='outlined']),
+      :host([type='text']),
+      :host([type='tonal']) {
+        --elevation-level: 0;
+      }
+
+      :host([has-label]) .label {
+        padding-left: 24px;
+        padding-right: 24px;
+      }
+
+      :host([has-icon]:not([has-label])) {
+        border-radius: 50%;
+        width: 40px;
+        align-items: center;
+        justify-content: center;
+      }
+
+      :host([has-icon][has-label]) .label {
+        padding-left: 8px;
+        padding-right: 24px;
+      }
+      :host([has-icon][has-label]) slot[name='icon']::slotted(*) {
+        padding-left: 16px;
+      }
+
+      :host([disabled]) .label,
+      :host([disabled]) slot[name='icon']::slotted(*) {
+        opacity: 0.38;
+      }
+
+      ::slotted(*) {
+        pointer-events: none;
+      }
+
+      :host(:focus),
+      :host(:hover) {
+        --elevation-level: 2;
+      }
+
+      :host(:active) {
+        --elevation-level: 0;
+      }
+
+      button * {
+        pointer-events: none;
+      }
+    `];connectedCallback(){const e=Array.from(this.shadowRoot.querySelectorAll("slot"));for(const t of e)t.addEventListener("slotchange",(()=>this.#l(t)));this.#l(e[0])}onChange(e,t){"label"===e&&(this.hasLabel=!!t)}#l=(n(this,k),e=>{"icon"===e.getAttribute("name")&&(this.hasIcon=0!==Array.from(e?.assignedNodes()||[]).length)});render(){return o`
+      <button label=${this.label}>
+        <custom-elevation></custom-elevation>
+        <slot name="icon"></slot>
+        <span class="label">${this.label}</span>
+      </button>
+    `}static{n(s,u)}})})(),(()=>{let t,s,i,c,d,h,m,p,u=[e("custom-pane")],v=[],y=l,g=[],b=[],f=[],_=[],x=[],w=[],k=[],S=[],j=[],z=[],L=[],I=[];(class extends y{static{s=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;i=[a({type:Boolean,reflect:!0})],c=[a({type:Boolean,reflect:!0})],d=[a({type:String,reflect:!0})],h=[a({type:Boolean,reflect:!0})],m=[a({type:Boolean,reflect:!0})],p=[a({type:String})],r(this,null,i,{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:e},g,b),r(this,null,c,{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:e},f,_),r(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:e},x,w),r(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:e},k,S),r(this,null,m,{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:e},j,z),r(this,null,p,{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:e},L,I),r(null,t={value:s},u,{kind:"class",name:s.name,metadata:e},null,v),s=t.value,e&&Object.defineProperty(s,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e}),n(s,v)}#i=n(this,g,!1);get open(){return this.#i}set open(e){this.#i=e}#r=(n(this,b),n(this,f,!1));get mobile(){return this.#r}set mobile(e){this.#r=e}#a=(n(this,_),n(this,x,void 0));get type(){return this.#a}set type(e){this.#a=e}#n=(n(this,w),n(this,k,!0));get left(){return this.#n}set left(e){this.#n=e}#c=(n(this,S),n(this,j,!1));get right(){return this.#c}set right(e){this.#c=e}#d=(n(this,z),n(this,L,void 0));get id(){return this.#d}set id(e){this.#d=e}closePane(e){e.stopPropagation(),this.open=!1,document.dispatchEvent(new CustomEvent("custom-pane-close",{detail:this.id||""+(this.left?"left":"right")}))}render(){return o`<style>
+        :host {
+          --custom-pane-width: 100%;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          background: var(--md-sys-color-surface);
+          color: var(--md-sys-color-on-surface);
+          position: relative;
+          /* border-radius: 12px; */
+
+          --md-elevation-level: 0;
+
+          pointer-events: none;
+          opacity: 0;
+          width: 100%;
+          max-width: var(--custom-pane-width);
+          transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
+            var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+        }
+
+        :host([left]) {
+          border-radius: var(--md-sys-shape-corner-large-end);
+          transform: translateX(-100%);
+          z-index: 1002;
+        }
+
+        :host([right]) {
+          border-radius: var(--md-sys-shape-corner-large-start);
+          transform: translateX(100%);
+          z-index: 1001;
+        }
+
+        :host([mobile]) {
+          inset: 0;
+          position: fixed;
+          z-index: 1001;
+        }
+
+        :host([type='modal']) {
+          --md-elevation-level: 1;
+        }
+
+        :host([open]) {
+          transform: translateX(0);
+          opacity: 1;
+          pointer-events: auto;
+          transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
+            var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+        }
+
+        :host([open]) {
+          position: relative;
+        }
+
+        :host([open][mobile]) {
+          position: fixed;
+        }
+
+        aside {
+          width: 100%;
+          height: 100%;
+        }
+
+        .content {
+          height: calc(100% - 54px);
+          width: 100%;
+          overflow-y: auto;
+        }
+
+        .footer {
+          height: 54px;
+        }
+
+        :host([right]) custom-button {
+          transform: rotateZ(180deg);
+        }
+      </style>
+      <custom-elevation></custom-elevation>
+      <aside>
+        <slot name="header">
+          <flex-row center>
+            <slot name="headline"></slot>
+            <flex-it></flex-it>
+            <custom-button @click=${e=>this.closePane(e)} .id=${this.id}>
+              <custom-icon slot="icon">menu_open</custom-icon>
+            </custom-button>
+          </flex-row>
+        </slot>
+        <flex-column class="content">
+          <slot name="content"></slot>
+        </flex-column>
+        <flex-row class="footer">
+          <slot name="footer"></slot>
+        </flex-row>
+      </aside> `}constructor(){super(...arguments),n(this,I)}})})();let c=(()=>{let r,n,c,d=[e("custom-notifications")],h=[],m=l,p=[],u=[];return class extends m{static{n=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;c=[a({type:Boolean,reflect:!0})],t(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:e},p,u),t(null,r={value:n},d,{kind:"class",name:n.name,metadata:e},null,h),n=r.value,e&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#i=s(this,p,void 0);get open(){return this.#i}set open(e){this.#i=e}get#h(){return this.shadowRoot.querySelector(".list")}createNotification({title:e,message:t,image:s},a=3e3){const o=document.createElement("custom-notification");o.title=e,o.message=t,o.image=s,a&&setTimeout((()=>{this.removeChild(o);const a=document.createElement("custom-notification");a.image=s,a.title=e,a.message=t,this.#h.appendChild(a)}),a),this.appendChild(o)}#m(){const e=Array.from(this.#h.querySelectorAll("custom-notification"));for(const t of e)this.#h.removeChild(t);this.open=!1}static styles=[i`
+      :host {
+        display: flex;
+        flex-direction: column;
+        pointer-events: auto;
+        z-index: 10001;
+        position: absolute;
+        right: 0;
+        top: 0;
+        overflow: hidden;
+        width: 100%;
+        max-width: 320px;
+        height: auto;
+        box-sizing: border-box;
+        color: #eee;
+        pointer-events: none;
+        height: 100%;
+      }
+
+      :host([open]) {
+        background: rgb(51, 55, 80);
+      }
+
+      .recents {
+        display: block;
+        position: relative;
+        top: 12px;
+        right: 12px;
+        width: 100%;
+        pointer-events: none;
+
+        box-sizing: border-box;
+        padding: 12px;
+      }
+
+      .list {
+        padding: 24px;
+        height: 100%;
+      }
+
+      custom-icon {
+        pointer-events: auto;
+      }
+    `];render(){return o`
+      <flex-row style="margin-top: 12px;margin-right: 12px;">
+        <flex-it></flex-it>
+        <custom-icon
+          icon="notifications"
+          @click=${()=>{0!==this.#h.childElementCount&&(this.open=!this.open)}}
+        ></custom-icon>
+      </flex-row>
+
+      <span class="recents">
+        <slot></slot>
+      </span>
+
+      <custom-pane ?open=${this.open} right top>
+        <span slot="header"></span>
+        <flex-column class="list" slot="content"> </flex-column>
+
+        <flex-row slot="footer" width="100%">
+          <flex-it></flex-it>
+          <custom-icon style="margin-right: 24px;" icon="clear-all" @click="${this.#m}"></custom-icon>
+        </flex-row>
+      </custom-pane>
+    `}constructor(){super(...arguments),s(this,u)}static{s(n,h)}},n})();export{c as CustomNotifications};

package/exports/bundle/row-DNgwBcX5.js

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=globalThis,e=t.trustedTypes,s=e?e.createPolicy("lit-html",{createHTML:t=>t}):void 0,i="$lit$",r=`lit$${(Math.random()+"").slice(9)}$`,n="?"+r,a=`<${n}>`,o=document,h=()=>o.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,l=Array.isArray,d="[ \t\n\f\r]",u=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,p=/-->/g,g=/>/g,_=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),b=/'/g,m=/"/g,$=/^(?:script|style|textarea|title)$/i,A=(t,...e)=>({_$litType$:1,strings:t,values:e}),f=Symbol.for("lit-noChange"),y=Symbol.for("lit-nothing"),v=new WeakMap,x=o.createTreeWalker(o,129);function S(t,e){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(e):e}const T=(t,e)=>{const s=t.length-1,n=[];let o,h=2===e?"<svg>":"",c=u;for(let e=0;e<s;e++){const s=t[e];let l,d,A=-1,f=0;for(;f<s.length&&(c.lastIndex=f,d=c.exec(s),null!==d);)f=c.lastIndex,c===u?"!--"===d[1]?c=p:void 0!==d[1]?c=g:void 0!==d[2]?($.test(d[2])&&(o=RegExp("</"+d[2],"g")),c=_):void 0!==d[3]&&(c=_):c===_?">"===d[0]?(c=o??u,A=-1):void 0===d[1]?A=-2:(A=c.lastIndex-d[2].length,l=d[1],c=void 0===d[3]?_:'"'===d[3]?m:b):c===m||c===b?c=_:c===p||c===g?c=u:(c=_,o=void 0);const y=c===_&&t[e+1].startsWith("/>")?" ":"";h+=c===u?s+a:A>=0?(n.push(l),s.slice(0,A)+i+s.slice(A)+r+y):s+r+(-2===A?e:y)}return[S(t,h+(t[s]||"<?>")+(2===e?"</svg>":"")),n]};class N{constructor({strings:t,_$litType$:s},a){let o;this.parts=[];let c=0,l=0;const d=t.length-1,u=this.parts,[p,g]=T(t,s);if(this.el=N.createElement(p,a),x.currentNode=this.el.content,2===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(o=x.nextNode())&&u.length<d;){if(1===o.nodeType){if(o.hasAttributes())for(const t of o.getAttributeNames())if(t.endsWith(i)){const e=g[l++],s=o.getAttribute(t).split(r),i=/([.?@])?(.*)/.exec(e);u.push({type:1,index:c,name:i[2],strings:s,ctor:"."===i[1]?M:"?"===i[1]?E:"@"===i[1]?I:R}),o.removeAttribute(t)}else t.startsWith(r)&&(u.push({type:6,index:c}),o.removeAttribute(t));if($.test(o.tagName)){const t=o.textContent.split(r),s=t.length-1;if(s>0){o.textContent=e?e.emptyScript:"";for(let e=0;e<s;e++)o.append(t[e],h()),x.nextNode(),u.push({type:2,index:++c});o.append(t[s],h())}}}else if(8===o.nodeType)if(o.data===n)u.push({type:2,index:c});else{let t=-1;for(;-1!==(t=o.data.indexOf(r,t+1));)u.push({type:7,index:c}),t+=r.length-1}c++}}static createElement(t,e){const s=o.createElement("template");return s.innerHTML=t,s}}function H(t,e,s=t,i){if(e===f)return e;let r=void 0!==i?s._$Co?.[i]:s._$Cl;const n=c(e)?void 0:e._$litDirective$;return r?.constructor!==n&&(r?._$AO?.(!1),void 0===n?r=void 0:(r=new n(t),r._$AT(t,s,i)),void 0!==i?(s._$Co??=[])[i]=r:s._$Cl=r),void 0!==r&&(e=H(t,r._$AS(t,e.values),r,i)),e}class C{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=(t?.creationScope??o).importNode(e,!0);x.currentNode=i;let r=x.nextNode(),n=0,a=0,h=s[0];for(;void 0!==h;){if(n===h.index){let e;2===h.type?e=new w(r,r.nextSibling,this,t):1===h.type?e=new h.ctor(r,h.name,h.strings,this,t):6===h.type&&(e=new U(r,this,t)),this._$AV.push(e),h=s[++a]}n!==h?.index&&(r=x.nextNode(),n++)}return x.currentNode=o,i}p(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class w{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=y,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=H(this,t,e),c(t)?t===y||null==t||""===t?(this._$AH!==y&&this._$AR(),this._$AH=y):t!==this._$AH&&t!==f&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>l(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}S(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.S(t))}_(t){this._$AH!==y&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(o.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:s}=t,i="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(S(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===i)this._$AH.p(e);else{const t=new C(i,this),s=t.u(this.options);t.p(e),this.T(s),this._$AH=t}}_$AC(t){let e=v.get(t.strings);return void 0===e&&v.set(t.strings,e=new N(t)),e}k(t){l(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const r of t)i===e.length?e.push(s=new w(this.S(h()),this.S(h()),this,this.options)):s=e[i],s._$AI(r),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class R{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,r){this.type=1,this._$AH=y,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=r,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=y}_$AI(t,e=this,s,i){const r=this.strings;let n=!1;if(void 0===r)t=H(this,t,e,0),n=!c(t)||t!==this._$AH&&t!==f,n&&(this._$AH=t);else{const i=t;let a,o;for(t=r[0],a=0;a<r.length-1;a++)o=H(this,i[s+a],e,a),o===f&&(o=this._$AH[a]),n||=!c(o)||o!==this._$AH[a],o===y?t=y:t!==y&&(t+=(o??"")+r[a+1]),this._$AH[a]=o}n&&!i&&this.j(t)}j(t){t===y?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class M extends R{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===y?void 0:t}}class E extends R{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==y)}}class I extends R{constructor(t,e,s,i,r){super(t,e,s,i,r),this.type=5}_$AI(t,e=this){if((t=H(this,t,e,0)??y)===f)return;const s=this._$AH,i=t===y&&s!==y||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==y&&(s===y||i);i&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class U{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){H(this,t)}}const W=t.litHtmlPolyfillSupport;W?.(N,w),(t.litHtmlVersions??=[]).push("3.1.2");const j=globalThis;j.ShadowRoot&&(void 0===j.ShadyCSS||j.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&CSSStyleSheet.prototype,Symbol.metadata??=Symbol("metadata");class D extends HTMLElement{static get observedAttributes(){return this[Symbol.metadata]?.observedAttributes?.values()??[]}attributeChangedCallback(t,e,s){this[t]=s}constructor(){super(),this.renderedOnce=!1,this.rendered=new Promise((t=>{this.renderResolve=t})),this.attachShadow({mode:"open"});const t=customElements.get(this.localName);this.shadowRoot.adoptedStyleSheets=t.styles?t.styles.map((t=>t.styleSheet??t)):[],this.requestRender()}render(){return A`<slot></slot>`}requestRender(){((t,e,s)=>{const i=e;let r=i._$litPart$;if(void 0===r){const t=null;i._$litPart$=r=new w(e.insertBefore(h(),t),t,void 0,{})}r._$AI(t)})(this.render(),this.shadowRoot),this.renderedOnce||(this.renderResolve(!0),this.renderedOnce=!0,this.firstRender&&this.firstRender())}}globalThis.pubsub=globalThis.pubsub||new class{subscribers={};verbose;constructor(t){this.verbose=t}_handleContext(t,e){return void 0===e&&(e=t),e}hasSubscribers(t){return!!this.subscribers[t]}subscribe(t,e,s){this.hasSubscribers(t)||(this.subscribers[t]={handlers:[],value:void 0}),s=this._handleContext(e,s),this.subscribers[t].handlers.push(e.bind(s))}unsubscribe(t,e,s){if(!this.hasSubscribers(t))return;s=this._handleContext(e,s);const i=this.subscribers[t].handlers.indexOf(e.bind(s));this.subscribers[t].handlers.splice(i),0===this.subscribers[t].handlers.length&&delete this.subscribers[t]}publish(t,e,s){this.hasSubscribers(t)||(this.subscribers[t]={handlers:[]});const i=this.subscribers[t]?.value;if(this.verbose||s||i!==e){this.subscribers[t].value=e;for(const s of this.subscribers[t].handlers)s(e,i)}}publishVerbose(t,e){this.publish(t,e,!0)}once(t){return new Promise((e=>{const s=i=>{e(i),this.unsubscribe(t,s)};this.subscribe(t,s)}))}};const k={type:String,reflect:!1,renders:!0,batchDelay:50,temporaryRender:10},O=(t,e)=>{let s=t;return e===Boolean?s=Boolean("true"===t):e===Number?s=Number(t):e===Uint8Array?s=new Uint8Array(t.split(",")):e!==Array&&e!==Object&&e!==WeakMap&&e!==Map&&e!==Uint8Array||(s=JSON.parse(t),e===Map&&(s=new Map(t)),e===WeakMap&&(s=new WeakMap(t))),s},z=t=>{t={...k,...t};let e=0;return function(s,{kind:i,name:r,addInitializer:n,access:a,metadata:o}){const{type:h,reflect:c,attribute:l,renders:d,batches:u,batchDelay:p,consumer:g,provider:_,temporaryRender:b}=t,m=String(r),$=l&&"string"==typeof l?l:m,A=h===Boolean,f=g||"boolean"==typeof t.consumes?$:t.consumes,y=_||"boolean"==typeof t.provides?$:t.provides;if(t.provider&&console.warn(`${m}: 'options.provider' is deprecated, use options.provides instead`),t.consumer&&console.warn(`${m}: 'options.consumer' is deprecated, used options.consumes instead`),n((async function(){"accessor"!==i&&console.warn(`${this.localName}: @property(${t}) ${m} ${i} is not supported`),(l||c)&&(o||(o={}),o.observedAttributes||(o.observedAttributes=new Map),o.observedAttributes.set(m,$)),f&&globalThis.pubsub.subscribe(f,(async t=>{this[r]=t}))})),"accessor"===i)return{get(){return v.call(this)},set(t){return x.call(this,t)},init(t){return this.hasAttribute($)&&(t=A?this.hasAttribute($):O(this.getAttribute($),h)),void 0!==t&&x.call(this,t),f&&globalThis.pubsub.subscribers?.[f]?.value&&x.call(this,globalThis.pubsub.subscribers[f].value),this[r]}};function v(){const t=c||l?A?this.hasAttribute($):O(this.getAttribute($),h):this[`__${m}`]?this[`__${m}`]:this[`_${m}`];return f&&!this[`__${m}`]&&globalThis.pubsub.subscribers?.[f]?.value?(t!==globalThis.pubsub.subscribers[f].value&&x.call(this,globalThis.pubsub.subscribers[f].value),globalThis.pubsub.subscribers[f].value):t}async function x(t){if(y&&globalThis.pubsub.publish(y,t),this[`_${m}`]!==t){this.willChange&&(this[`__${m}`]=await this.willChange(r,t)),c||l?A?t||this[`__${m}`]?this.setAttribute($,""):this.removeAttribute($):t||this[`__${m}`]?this.setAttribute($,((t,e)=>{let s=e;if(t===Boolean||t===Number||t===Uint8Array)return e.toString();if(t===Array||t===Object||t===WeakMap||t===Map||t===Uint8Array){let i;t!==Map&&t!==WeakMap||(i=Object(e).entries()),s=JSON.stringify(i)}return s})(h,this[`__${m}`]??t)):this.removeAttribute($):this[`_${m}`]=t;const s=()=>{e=0,this.requestRender&&d&&this.requestRender(),this.onChange&&this.onChange(r,this[`__${m}`]??t)};u?(e===b&&s(),this[`_${m}_timeout`]&&clearTimeout(this[`_${m}_timeout`]),this[`_${m}_timeout`]=setTimeout(s,p)):s()}}}};var B=function(t,e,s,i,r,n){function a(t){if(void 0!==t&&"function"!=typeof t)throw new TypeError("Function expected");return t}for(var o,h=i.kind,c="getter"===h?"get":"setter"===h?"set":"value",l=!e&&t?i.static?t:t.prototype:null,d=e||(l?Object.getOwnPropertyDescriptor(l,i.name):{}),u=!1,p=s.length-1;p>=0;p--){var g={};for(var _ in i)g[_]="access"===_?{}:i[_];for(var _ in i.access)g.access[_]=i.access[_];g.addInitializer=function(t){if(u)throw new TypeError("Cannot add initializers after decoration has completed");n.push(a(t||null))};var b=(0,s[p])("accessor"===h?{get:d.get,set:d.set}:d[c],g);if("accessor"===h){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(o=a(b.get))&&(d.get=o),(o=a(b.set))&&(d.set=o),(o=a(b.init))&&r.unshift(o)}else(o=a(b))&&("field"===h?r.unshift(o):d[c]=o)}l&&Object.defineProperty(l,i.name,d),u=!0},P=function(t,e,s){for(var i=arguments.length>2,r=0;r<e.length;r++)s=i?e[r].call(t,s):e[r].call(t);return i?s:void 0};let L=(()=>{let t,e,s,i,r,n,a,o,h,c,l=D,d=[],u=[],p=[],g=[],_=[],b=[],m=[],$=[],f=[],y=[],v=[];return class FlexDisplay extends l{static{const A="function"==typeof Symbol&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;t=[z({type:String})],e=[z({type:String})],s=[z({type:String})],i=[z({type:String})],r=[z({type:String,reflect:!0})],n=[z({type:Boolean,reflect:!0})],a=[z({type:Boolean,reflect:!0,attribute:"center-center"})],o=[z({type:String})],h=[z({type:String})],c=[z({type:String})],B(this,null,t,{kind:"accessor",name:"padding",static:!1,private:!1,access:{has:t=>"padding"in t,get:t=>t.padding,set:(t,e)=>{t.padding=e}},metadata:A},u,d),B(this,null,e,{kind:"accessor",name:"minWidth",static:!1,private:!1,access:{has:t=>"minWidth"in t,get:t=>t.minWidth,set:(t,e)=>{t.minWidth=e}},metadata:A},p,d),B(this,null,s,{kind:"accessor",name:"maxWidth",static:!1,private:!1,access:{has:t=>"maxWidth"in t,get:t=>t.maxWidth,set:(t,e)=>{t.maxWidth=e}},metadata:A},g,d),B(this,null,i,{kind:"accessor",name:"width",static:!1,private:!1,access:{has:t=>"width"in t,get:t=>t.width,set:(t,e)=>{t.width=e}},metadata:A},_,d),B(this,null,r,{kind:"accessor",name:"direction",static:!1,private:!1,access:{has:t=>"direction"in t,get:t=>t.direction,set:(t,e)=>{t.direction=e}},metadata:A},b,d),B(this,null,n,{kind:"accessor",name:"center",static:!1,private:!1,access:{has:t=>"center"in t,get:t=>t.center,set:(t,e)=>{t.center=e}},metadata:A},m,d),B(this,null,a,{kind:"accessor",name:"centerCenter",static:!1,private:!1,access:{has:t=>"centerCenter"in t,get:t=>t.centerCenter,set:(t,e)=>{t.centerCenter=e}},metadata:A},$,d),B(this,null,o,{kind:"accessor",name:"justifyContent",static:!1,private:!1,access:{has:t=>"justifyContent"in t,get:t=>t.justifyContent,set:(t,e)=>{t.justifyContent=e}},metadata:A},f,d),B(this,null,h,{kind:"accessor",name:"alignItems",static:!1,private:!1,access:{has:t=>"alignItems"in t,get:t=>t.alignItems,set:(t,e)=>{t.alignItems=e}},metadata:A},y,d),B(this,null,c,{kind:"accessor",name:"boxSizing",static:!1,private:!1,access:{has:t=>"boxSizing"in t,get:t=>t.boxSizing,set:(t,e)=>{t.boxSizing=e}},metadata:A},v,d),A&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:A})}#t=(P(this,d),P(this,u,"0"));get padding(){return this.#t}set padding(t){this.#t=t}#e=P(this,p,"auto");get minWidth(){return this.#e}set minWidth(t){this.#e=t}#s=P(this,g,"auto");get maxWidth(){return this.#s}set maxWidth(t){this.#s=t}#i=P(this,_,"100%");get width(){return this.#i}set width(t){this.#i=t}#r=P(this,b,"row");get direction(){return this.#r}set direction(t){this.#r=t}#n=P(this,m,void 0);get center(){return this.#n}set center(t){this.#n=t}#a=P(this,$,void 0);get centerCenter(){return this.#a}set centerCenter(t){this.#a=t}#o=P(this,f,"flex-start");get justifyContent(){return this.#o}set justifyContent(t){this.#o=t}#h=P(this,y,"flex-start");get alignItems(){return this.#h}set alignItems(t){this.#h=t}#c=P(this,v,"border-box");get boxSizing(){return this.#c}set boxSizing(t){this.#c=t}render(){return A`
+      <style>
+        :host {
+          display: flex;
+          box-sizing: var(--flex-display-box-sizing, ${this.boxSizing});
+          max-width: var(--flex-display-max-width, ${this.maxWidth});
+          min-width: var(--flex-display-min-width, ${this.minWidth});
+          width: var(--flex-display-width, ${this.width});
+          flex-direction: var(--flex-display-direction, ${this.direction});
+          justify-content: var(
+            --flex-display-justify-content,
+            ${this.justifyContent}
+          );
+          align-items: var(--flex-display-align-items, ${this.alignItems});
+          padding: var(--flex-display-padding, ${this.padding});
+        }
+
+        :host([center]) {
+          align-items: center;
+        }
+
+        :host([center-center]) {
+          align-items: center;
+          justify-content: center;
+        }
+      </style>
+      <slot></slot>
+    `}}})();customElements.define("flex-row",class FlexRow extends L{constructor(){super(),this.direction="row",this.width="auto"}});export{L as F};

package/exports/bundle/top-app-bar.js

@@ -1 +1,82 @@
-import"./custom-element-BMhVvZjf.js";import"./property-Do5-bKhz.js";import"./it-Dft_Rjy-.js";export{C as CustomTopAppBar}from"./top-app-bar-DZJ8jFM2.js";
+import{_ as t,a as e,e as s}from"./custom-element-BMhVvZjf.js";import{t as o,j as l,v as a,D as r}from"./property-Do5-bKhz.js";import"./it-Dft_Rjy-.js";import"./row-DNgwBcX5.js";let i=(()=>{let i,n,c,p,m=[s("custom-top-app-bar")],d=[],g=r,y=[],h=[],u=[],x=[];return class extends g{static{n=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(g[Symbol.metadata]??null):void 0;c=[o({type:String,reflect:!0})],p=[o({type:Boolean,reflect:!0})],t(this,null,c,{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},y,h),t(this,null,p,{kind:"accessor",name:"scrolling",static:!1,private:!1,access:{has:t=>"scrolling"in t,get:t=>t.scrolling,set:(t,e)=>{t.scrolling=e}},metadata:e},u,x),t(null,i={value:n},m,{kind:"class",name:n.name,metadata:e},null,d),n=i.value,e&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,y,"center-aligned");get type(){return this.#t}set type(t){this.#t=t}#e=(e(this,h),e(this,u,void 0));get scrolling(){return this.#e}set scrolling(t){this.#e=t}static styles=[l`
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: calc(100% - 2px);
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+        box-sizing: border-box;
+      }
+
+      .container {
+        padding: 20px 12px 24px 12px;
+        box-sizing: border-box;
+        position: relative;
+        height: 64px;
+      }
+
+      :host([type='center-aligned']) .container,
+      :host([type='small']) .container {
+        justify-content: center;
+      }
+
+      :host(:not([type='center-aligned'])) ::slotted([name='title']) {
+        padding-left: 16px;
+      }
+
+      :host(:not([type='large'])) ::slotted([name='title']) {
+        padding-bottom: 28px;
+      }
+
+      :host([type='medium']) .container {
+        height: 112px;
+      }
+      :host([type='large']) .container {
+        height: 152px;
+      }
+
+      :host([type='center-aligned']) slot[name='title']::slotted(*) {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      :host(:not([type='center-aligned'])) slot[name='title']::slotted(*) {
+        padding-left: 6px;
+      }
+
+      :host([scrolling]) {
+        --md-elevation-level: 2;
+        padding: 0 16px;
+      }
+
+      flex-row {
+        width: 100%;
+        align-items: center;
+      }
+
+      custom-elevation {
+        border-radius: var(--md-sys-shape-corner-large);
+      }
+    `];connectedCallback(){document.addEventListener("custom-scroll",(({detail:t})=>{this.scrolling=t.scrolling}))}render(){return a`
+      <flex-column class="container">
+        <custom-elevation></custom-elevation>
+        <flex-row>
+          <slot name="start"></slot>
+          ${"center-aligned"===this.type||"small"===this.type?a`
+                <custom-typography>
+                  <slot name="title"></slot>
+                </custom-typography>
+              `:""}
+          <flex-it></flex-it>
+          <slot name="end"></slot>
+        </flex-row>
+        ${"medium"===this.type||"large"===this.type?a`
+              <flex-it></flex-it>
+              <custom-typography type="headline" size="small">
+                <slot name="title"></slot>
+              </custom-typography>
+            `:""}
+      </flex-column>
+    `}constructor(){super(...arguments),e(this,x)}static{e(n,d)}},n})();export{i as CustomTopAppBar};

package/exports/demo-shell.js

@@ -31,6 +31,8 @@ import './dropdown.js';
 import './toggle.js';
 import './toggle-button.js';
 import './time-picker.js';
+import './notification.js';
+import './notifications.js';
 import './code.js';
 import './elevation.js';
 import '@vandeurenglenn/flex-elements/it.js';
@@ -42,6 +44,10 @@ import '@vandeurenglenn/flex-elements/row.js';
 import '@vandeurenglenn/little-pubsub';
 import './tab.js';
 import './input.js';
+import 'lit';
+import 'lit/decorators.js';
+import '@vandeurenglenn/lite-elements/icon.js';
+import '@vandeurenglenn/lite-elements/pane.js';
 
 let DemoShell = (() => {
     let _classDecorators = [customElement('demo-shell')];

package/exports/elements.d.ts

@@ -27,7 +27,9 @@ import { CustomDropdown } from './dropdown/dropdown.js';
 import { CustomToggle } from './toggle/toggle.js';
 import { CustomToggleButton } from './toggle/toggle-button.js';
 import { CustomTimePicker } from './time-picker/time-picker.js';
-export { CustomTheme, CustomDivider, CustomButton, CustomCard, CustomDialog, CustomDrawer, CustomDrawerButton, CustomDrawerItem, CustomDrawerLayout, CustomBanner, CustomPane, CustomSupportingPane, CustomSection, CustomSelector, CustomPages, CustomRoot, CustomTabs, CustomTopAppBar, CustomIcon, CustomIconSet, CustomTypography, CustomListItem, CustomMenu, CustomIconButton, CustomDropdownMenu, CustomDropdown, CustomToggle, CustomToggleButton, CustomTimePicker };
+import { CustomNotification } from './notification/notification.js';
+import { CustomNotifications } from './notification/notifications.js';
+export { CustomTheme, CustomDivider, CustomButton, CustomCard, CustomDialog, CustomDrawer, CustomDrawerButton, CustomDrawerItem, CustomDrawerLayout, CustomBanner, CustomPane, CustomSupportingPane, CustomSection, CustomSelector, CustomPages, CustomRoot, CustomTabs, CustomTopAppBar, CustomIcon, CustomIconSet, CustomTypography, CustomListItem, CustomMenu, CustomIconButton, CustomDropdownMenu, CustomDropdown, CustomToggle, CustomToggleButton, CustomTimePicker, CustomNotification, CustomNotifications };
 declare global {
     interface HTMLElementTagNameMap {
         'custom-theme': CustomTheme;
@@ -59,5 +61,7 @@ declare global {
         'custom-toggle': CustomToggle;
         'custom-time-picker': CustomTimePicker;
         'custom-toggle-button': CustomToggleButton;
+        'custom-notification': CustomNotification;
+        'custom-notifications': CustomNotifications;
     }
 }

package/exports/elements.js

@@ -27,6 +27,8 @@ export { CustomDropdown } from './dropdown.js';
 export { CustomToggle } from './toggle.js';
 export { CustomToggleButton } from './toggle-button.js';
 export { CustomTimePicker } from './time-picker.js';
+export { CustomNotification } from './notification.js';
+export { CustomNotifications } from './notifications.js';
 import './tslib.es6-CFl_-KPR.js';
 import '@vandeurenglenn/lite';
 import './elevation.js';
@@ -39,3 +41,7 @@ import '@vandeurenglenn/flex-elements/row.js';
 import '@vandeurenglenn/little-pubsub';
 import './tab.js';
 import './input.js';
+import 'lit';
+import 'lit/decorators.js';
+import '@vandeurenglenn/lite-elements/icon.js';
+import '@vandeurenglenn/lite-elements/pane.js';

package/exports/notification/notification.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import '@vandeurenglenn/lite-elements/icon.js';
+import '@vandeurenglenn/flex-elements/column.js';
+import '@vandeurenglenn/flex-elements/row.js';
+export declare class CustomNotification extends LitElement {
+    #private;
+    accessor title: string;
+    accessor message: string;
+    accessor image: string;
+    accessor type: 'error' | 'info' | 'warning';
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/notification/notifications.d.ts

@@ -0,0 +1,16 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+import './notification.js';
+import '@vandeurenglenn/lite-elements/icon.js';
+import '@vandeurenglenn/lite-elements/pane.js';
+import '@vandeurenglenn/flex-elements/row.js';
+export declare class CustomNotifications extends LiteElement {
+    #private;
+    accessor open: boolean;
+    createNotification({ title, message, image }: {
+        title: string;
+        message: string;
+        image?: string;
+    }, timeout?: EpochTimeStamp): void;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/notification.js

@@ -0,0 +1,100 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@vandeurenglenn/lite-elements/icon.js';
+import '@vandeurenglenn/flex-elements/column.js';
+import '@vandeurenglenn/flex-elements/row.js';
+
+let CustomNotification = (() => {
+    let _classDecorators = [customElement('custom-notification')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LitElement;
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _message_decorators;
+    let _message_initializers = [];
+    let _message_extraInitializers = [];
+    let _image_decorators;
+    let _image_initializers = [];
+    let _image_extraInitializers = [];
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _title_decorators = [property()];
+            _message_decorators = [property()];
+            _image_decorators = [property()];
+            _type_decorators = [property()];
+            __esDecorate(this, null, _title_decorators, { kind: "accessor", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+            __esDecorate(this, null, _message_decorators, { kind: "accessor", name: "message", static: false, private: false, access: { has: obj => "message" in obj, get: obj => obj.message, set: (obj, value) => { obj.message = value; } }, metadata: _metadata }, _message_initializers, _message_extraInitializers);
+            __esDecorate(this, null, _image_decorators, { kind: "accessor", name: "image", static: false, private: false, access: { has: obj => "image" in obj, get: obj => obj.image, set: (obj, value) => { obj.image = value; } }, metadata: _metadata }, _image_initializers, _image_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(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 });
+        }
+        #title_accessor_storage = __runInitializers(this, _title_initializers, void 0);
+        get title() { return this.#title_accessor_storage; }
+        set title(value) { this.#title_accessor_storage = value; }
+        #message_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _message_initializers, void 0));
+        get message() { return this.#message_accessor_storage; }
+        set message(value) { this.#message_accessor_storage = value; }
+        #image_accessor_storage = (__runInitializers(this, _message_extraInitializers), __runInitializers(this, _image_initializers, void 0));
+        get image() { return this.#image_accessor_storage; }
+        set image(value) { this.#image_accessor_storage = value; }
+        #type_accessor_storage = (__runInitializers(this, _image_extraInitializers), __runInitializers(this, _type_initializers, void 0));
+        get type() { return this.#type_accessor_storage; }
+        set type(value) { this.#type_accessor_storage = value; }
+        #onclick = (__runInitializers(this, _type_extraInitializers), () => {
+            this.parentElement.removeChild(this);
+        });
+        static styles = css `
+    :host {
+      display: flex;
+      align-items: flex-start;
+      font-size: 13px;
+      border: 1px solid;
+      border-radius: 12px;
+      padding: 6px 12px;
+      box-sizing: border-box;
+      margin-bottom: 12px;
+    }
+
+    flex-row {
+      height: 24px;
+      box-sizing: border-box;
+      align-items: center;
+    }
+
+    strong {
+      font-size: 14px;
+    }
+  `;
+        render() {
+            return html `
+      ${this.image ? html `<img src=${this.image} />` : ''}
+      <flex-column>
+        <flex-row>
+          <strong>${this.title}</strong>
+          <flex-it></flex-it>
+          <custom-icon icon="close" @click=${this.#onclick}></custom-icon>
+        </flex-row>
+
+        <p>${this.message}</p>
+      </flex-column>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomNotification };

package/exports/notifications.js

@@ -0,0 +1,146 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
+import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import './notification.js';
+import '@vandeurenglenn/lite-elements/icon.js';
+import '@vandeurenglenn/lite-elements/pane.js';
+import '@vandeurenglenn/flex-elements/row.js';
+import 'lit';
+import 'lit/decorators.js';
+import '@vandeurenglenn/flex-elements/column.js';
+
+let CustomNotifications = (() => {
+    let _classDecorators = [customElement('custom-notifications')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _open_decorators = [property({ type: Boolean, reflect: true })];
+            __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(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 });
+        }
+        #open_accessor_storage = __runInitializers(this, _open_initializers, void 0);
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        get #list() {
+            return this.shadowRoot.querySelector('.list');
+        }
+        createNotification({ title, message, image }, timeout = 3000) {
+            const notification = document.createElement('custom-notification');
+            notification.title = title;
+            notification.message = message;
+            notification.image = image;
+            if (timeout) {
+                setTimeout(() => {
+                    this.removeChild(notification);
+                    const _notification = document.createElement('custom-notification');
+                    _notification.image = image;
+                    _notification.title = title;
+                    _notification.message = message;
+                    this.#list.appendChild(_notification);
+                }, timeout);
+            }
+            this.appendChild(notification);
+        }
+        #onclick() {
+            const children = Array.from(this.#list.querySelectorAll('custom-notification'));
+            for (const child of children) {
+                this.#list.removeChild(child);
+            }
+            this.open = false;
+        }
+        static styles = [
+            css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        pointer-events: auto;
+        z-index: 10001;
+        position: absolute;
+        right: 0;
+        top: 0;
+        overflow: hidden;
+        width: 100%;
+        max-width: 320px;
+        height: auto;
+        box-sizing: border-box;
+        color: #eee;
+        pointer-events: none;
+        height: 100%;
+      }
+
+      :host([open]) {
+        background: rgb(51, 55, 80);
+      }
+
+      .recents {
+        display: block;
+        position: relative;
+        top: 12px;
+        right: 12px;
+        width: 100%;
+        pointer-events: none;
+
+        box-sizing: border-box;
+        padding: 12px;
+      }
+
+      .list {
+        padding: 24px;
+        height: 100%;
+      }
+
+      custom-icon {
+        pointer-events: auto;
+      }
+    `
+        ];
+        render() {
+            return html `
+      <flex-row style="margin-top: 12px;margin-right: 12px;">
+        <flex-it></flex-it>
+        <custom-icon
+          icon="notifications"
+          @click=${() => {
+                if (this.#list.childElementCount === 0)
+                    return;
+                this.open = !this.open;
+            }}
+        ></custom-icon>
+      </flex-row>
+
+      <span class="recents">
+        <slot></slot>
+      </span>
+
+      <custom-pane ?open=${this.open} right top>
+        <span slot="header"></span>
+        <flex-column class="list" slot="content"> </flex-column>
+
+        <flex-row slot="footer" width="100%">
+          <flex-it></flex-it>
+          <custom-icon style="margin-right: 24px;" icon="clear-all" @click="${this.#onclick}"></custom-icon>
+        </flex-row>
+      </custom-pane>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _open_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomNotifications };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.24",
+	"version": "0.3.25",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {
@@ -273,6 +273,22 @@
 			"import": "./exports/minute-field.js",
 			"types": "./exports/time-picker/minute-field.d.ts"
 		},
+		"./notification": {
+			"import": "./exports/notification.js",
+			"types": "./exports/notification/notification.d.ts"
+		},
+		"./notification.js": {
+			"import": "./exports/notification.js",
+			"types": "./exports/notification/notification.d.ts"
+		},
+		"./notifications": {
+			"import": "./exports/notifications.js",
+			"types": "./exports/notification/notifications.d.ts"
+		},
+		"./notifications.js": {
+			"import": "./exports/notifications.js",
+			"types": "./exports/notification/notifications.d.ts"
+		},
 		"./pages": {
 			"import": "./exports/pages.js",
 			"types": "./exports/pages/pages.d.ts"

package/exports/bundle/top-app-bar-DZJ8jFM2.js

@@ -1,114 +0,0 @@
-import{_ as t,a as e,e as s}from"./custom-element-BMhVvZjf.js";import{t as i,j as r,v as n,D as o}from"./property-Do5-bKhz.js";import"./it-Dft_Rjy-.js";
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const a=globalThis,c=a.trustedTypes,l=c?c.createPolicy("lit-html",{createHTML:t=>t}):void 0,h="$lit$",d=`lit$${(Math.random()+"").slice(9)}$`,u="?"+d,p=`<${u}>`,g=document,m=()=>g.createComment(""),_=t=>null===t||"object"!=typeof t&&"function"!=typeof t,b=Array.isArray,y="[ \t\n\f\r]",$=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,f=/-->/g,v=/>/g,A=RegExp(`>|${y}(?:([^\\s"'>=/]+)(${y}*=${y}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),x=/'/g,S=/"/g,T=/^(?:script|style|textarea|title)$/i,H=(t,...e)=>({_$litType$:1,strings:t,values:e}),j=Symbol.for("lit-noChange"),W=Symbol.for("lit-nothing"),k=new WeakMap,z=g.createTreeWalker(g,129);function O(t,e){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==l?l.createHTML(e):e}const B=(t,e)=>{const s=t.length-1,i=[];let r,n=2===e?"<svg>":"",o=$;for(let e=0;e<s;e++){const s=t[e];let a,c,l=-1,u=0;for(;u<s.length&&(o.lastIndex=u,c=o.exec(s),null!==c);)u=o.lastIndex,o===$?"!--"===c[1]?o=f:void 0!==c[1]?o=v:void 0!==c[2]?(T.test(c[2])&&(r=RegExp("</"+c[2],"g")),o=A):void 0!==c[3]&&(o=A):o===A?">"===c[0]?(o=r??$,l=-1):void 0===c[1]?l=-2:(l=o.lastIndex-c[2].length,a=c[1],o=void 0===c[3]?A:'"'===c[3]?S:x):o===S||o===x?o=A:o===f||o===v?o=$:(o=A,r=void 0);const g=o===A&&t[e+1].startsWith("/>")?" ":"";n+=o===$?s+p:l>=0?(i.push(a),s.slice(0,l)+h+s.slice(l)+d+g):s+d+(-2===l?e:g)}return[O(t,n+(t[s]||"<?>")+(2===e?"</svg>":"")),i]};class N{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let r=0,n=0;const o=t.length-1,a=this.parts,[l,p]=B(t,e);if(this.el=N.createElement(l,s),z.currentNode=this.el.content,2===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=z.nextNode())&&a.length<o;){if(1===i.nodeType){if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(h)){const e=p[n++],s=i.getAttribute(t).split(d),o=/([.?@])?(.*)/.exec(e);a.push({type:1,index:r,name:o[2],strings:s,ctor:"."===o[1]?M:"?"===o[1]?E:"@"===o[1]?I:R}),i.removeAttribute(t)}else t.startsWith(d)&&(a.push({type:6,index:r}),i.removeAttribute(t));if(T.test(i.tagName)){const t=i.textContent.split(d),e=t.length-1;if(e>0){i.textContent=c?c.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],m()),z.nextNode(),a.push({type:2,index:++r});i.append(t[e],m())}}}else if(8===i.nodeType)if(i.data===u)a.push({type:2,index:r});else{let t=-1;for(;-1!==(t=i.data.indexOf(d,t+1));)a.push({type:7,index:r}),t+=d.length-1}r++}}static createElement(t,e){const s=g.createElement("template");return s.innerHTML=t,s}}function P(t,e,s=t,i){if(e===j)return e;let r=void 0!==i?s._$Co?.[i]:s._$Cl;const n=_(e)?void 0:e._$litDirective$;return r?.constructor!==n&&(r?._$AO?.(!1),void 0===n?r=void 0:(r=new n(t),r._$AT(t,s,i)),void 0!==i?(s._$Co??=[])[i]=r:s._$Cl=r),void 0!==r&&(e=P(t,r._$AS(t,e.values),r,i)),e}class C{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=(t?.creationScope??g).importNode(e,!0);z.currentNode=i;let r=z.nextNode(),n=0,o=0,a=s[0];for(;void 0!==a;){if(n===a.index){let e;2===a.type?e=new w(r,r.nextSibling,this,t):1===a.type?e=new a.ctor(r,a.name,a.strings,this,t):6===a.type&&(e=new U(r,this,t)),this._$AV.push(e),a=s[++o]}n!==a?.index&&(r=z.nextNode(),n++)}return z.currentNode=g,i}p(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class w{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=W,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=P(this,t,e),_(t)?t===W||null==t||""===t?(this._$AH!==W&&this._$AR(),this._$AH=W):t!==this._$AH&&t!==j&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>b(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}S(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.S(t))}_(t){this._$AH!==W&&_(this._$AH)?this._$AA.nextSibling.data=t:this.T(g.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:s}=t,i="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(O(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===i)this._$AH.p(e);else{const t=new C(i,this),s=t.u(this.options);t.p(e),this.T(s),this._$AH=t}}_$AC(t){let e=k.get(t.strings);return void 0===e&&k.set(t.strings,e=new N(t)),e}k(t){b(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const r of t)i===e.length?e.push(s=new w(this.S(m()),this.S(m()),this,this.options)):s=e[i],s._$AI(r),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class R{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,r){this.type=1,this._$AH=W,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=r,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=W}_$AI(t,e=this,s,i){const r=this.strings;let n=!1;if(void 0===r)t=P(this,t,e,0),n=!_(t)||t!==this._$AH&&t!==j,n&&(this._$AH=t);else{const i=t;let o,a;for(t=r[0],o=0;o<r.length-1;o++)a=P(this,i[s+o],e,o),a===j&&(a=this._$AH[o]),n||=!_(a)||a!==this._$AH[o],a===W?t=W:t!==W&&(t+=(a??"")+r[o+1]),this._$AH[o]=a}n&&!i&&this.j(t)}j(t){t===W?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class M extends R{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===W?void 0:t}}class E extends R{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==W)}}class I extends R{constructor(t,e,s,i,r){super(t,e,s,i,r),this.type=5}_$AI(t,e=this){if((t=P(this,t,e,0)??W)===j)return;const s=this._$AH,i=t===W&&s!==W||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==W&&(s===W||i);i&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class U{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){P(this,t)}}const L=a.litHtmlPolyfillSupport;L?.(N,w),(a.litHtmlVersions??=[]).push("3.1.2");const V=globalThis;V.ShadowRoot&&(void 0===V.ShadyCSS||V.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&CSSStyleSheet.prototype,Symbol.metadata??=Symbol("metadata");class D extends HTMLElement{static get observedAttributes(){return this[Symbol.metadata]?.observedAttributes?.values()??[]}attributeChangedCallback(t,e,s){this[t]=s}constructor(){super(),this.renderedOnce=!1,this.rendered=new Promise((t=>{this.renderResolve=t})),this.attachShadow({mode:"open"});const t=customElements.get(this.localName);this.shadowRoot.adoptedStyleSheets=t.styles?t.styles.map((t=>t.styleSheet??t)):[],this.requestRender()}render(){return H`<slot></slot>`}requestRender(){((t,e,s)=>{const i=e;let r=i._$litPart$;if(void 0===r){const t=null;i._$litPart$=r=new w(e.insertBefore(m(),t),t,void 0,{})}r._$AI(t)})(this.render(),this.shadowRoot),this.renderedOnce||(this.renderResolve(!0),this.renderedOnce=!0,this.firstRender&&this.firstRender())}}globalThis.pubsub=globalThis.pubsub||new class{subscribers={};verbose;constructor(t){this.verbose=t}_handleContext(t,e){return void 0===e&&(e=t),e}hasSubscribers(t){return!!this.subscribers[t]}subscribe(t,e,s){this.hasSubscribers(t)||(this.subscribers[t]={handlers:[],value:void 0}),s=this._handleContext(e,s),this.subscribers[t].handlers.push(e.bind(s))}unsubscribe(t,e,s){if(!this.hasSubscribers(t))return;s=this._handleContext(e,s);const i=this.subscribers[t].handlers.indexOf(e.bind(s));this.subscribers[t].handlers.splice(i),0===this.subscribers[t].handlers.length&&delete this.subscribers[t]}publish(t,e,s){this.hasSubscribers(t)||(this.subscribers[t]={handlers:[]});const i=this.subscribers[t]?.value;if(this.verbose||s||i!==e){this.subscribers[t].value=e;for(const s of this.subscribers[t].handlers)s(e,i)}}publishVerbose(t,e){this.publish(t,e,!0)}once(t){return new Promise((e=>{const s=i=>{e(i),this.unsubscribe(t,s)};this.subscribe(t,s)}))}};const q={type:String,reflect:!1,renders:!0,batchDelay:50,temporaryRender:10},F=(t,e)=>{let s=t;return e===Boolean?s=Boolean("true"===t):e===Number?s=Number(t):e===Uint8Array?s=new Uint8Array(t.split(",")):e!==Array&&e!==Object&&e!==WeakMap&&e!==Map&&e!==Uint8Array||(s=JSON.parse(t),e===Map&&(s=new Map(t)),e===WeakMap&&(s=new WeakMap(t))),s},J=t=>{t={...q,...t};let e=0;return function(s,{kind:i,name:r,addInitializer:n,access:o,metadata:a}){const{type:c,reflect:l,attribute:h,renders:d,batches:u,batchDelay:p,consumer:g,provider:m,temporaryRender:_}=t,b=String(r),y=h&&"string"==typeof h?h:b,$=c===Boolean,f=g||"boolean"==typeof t.consumes?y:t.consumes,v=m||"boolean"==typeof t.provides?y:t.provides;if(t.provider&&console.warn(`${b}: 'options.provider' is deprecated, use options.provides instead`),t.consumer&&console.warn(`${b}: 'options.consumer' is deprecated, used options.consumes instead`),n((async function(){"accessor"!==i&&console.warn(`${this.localName}: @property(${t}) ${b} ${i} is not supported`),(h||l)&&(a||(a={}),a.observedAttributes||(a.observedAttributes=new Map),a.observedAttributes.set(b,y)),f&&globalThis.pubsub.subscribe(f,(async t=>{this[r]=t}))})),"accessor"===i)return{get(){return A.call(this)},set(t){return x.call(this,t)},init(t){return this.hasAttribute(y)&&(t=$?this.hasAttribute(y):F(this.getAttribute(y),c)),void 0!==t&&x.call(this,t),f&&globalThis.pubsub.subscribers?.[f]?.value&&x.call(this,globalThis.pubsub.subscribers[f].value),this[r]}};function A(){const t=l||h?$?this.hasAttribute(y):F(this.getAttribute(y),c):this[`__${b}`]?this[`__${b}`]:this[`_${b}`];return f&&!this[`__${b}`]&&globalThis.pubsub.subscribers?.[f]?.value?(t!==globalThis.pubsub.subscribers[f].value&&x.call(this,globalThis.pubsub.subscribers[f].value),globalThis.pubsub.subscribers[f].value):t}async function x(t){if(v&&globalThis.pubsub.publish(v,t),this[`_${b}`]!==t){this.willChange&&(this[`__${b}`]=await this.willChange(r,t)),l||h?$?t||this[`__${b}`]?this.setAttribute(y,""):this.removeAttribute(y):t||this[`__${b}`]?this.setAttribute(y,((t,e)=>{let s=e;if(t===Boolean||t===Number||t===Uint8Array)return e.toString();if(t===Array||t===Object||t===WeakMap||t===Map||t===Uint8Array){let i;t!==Map&&t!==WeakMap||(i=Object(e).entries()),s=JSON.stringify(i)}return s})(c,this[`__${b}`]??t)):this.removeAttribute(y):this[`_${b}`]=t;const s=()=>{e=0,this.requestRender&&d&&this.requestRender(),this.onChange&&this.onChange(r,this[`__${b}`]??t)};u?(e===_&&s(),this[`_${b}_timeout`]&&clearTimeout(this[`_${b}_timeout`]),this[`_${b}_timeout`]=setTimeout(s,p)):s()}}}};var Z=function(t,e,s,i,r,n){function o(t){if(void 0!==t&&"function"!=typeof t)throw new TypeError("Function expected");return t}for(var a,c=i.kind,l="getter"===c?"get":"setter"===c?"set":"value",h=!e&&t?i.static?t:t.prototype:null,d=e||(h?Object.getOwnPropertyDescriptor(h,i.name):{}),u=!1,p=s.length-1;p>=0;p--){var g={};for(var m in i)g[m]="access"===m?{}:i[m];for(var m in i.access)g.access[m]=i.access[m];g.addInitializer=function(t){if(u)throw new TypeError("Cannot add initializers after decoration has completed");n.push(o(t||null))};var _=(0,s[p])("accessor"===c?{get:d.get,set:d.set}:d[l],g);if("accessor"===c){if(void 0===_)continue;if(null===_||"object"!=typeof _)throw new TypeError("Object expected");(a=o(_.get))&&(d.get=a),(a=o(_.set))&&(d.set=a),(a=o(_.init))&&r.unshift(a)}else(a=o(_))&&("field"===c?r.unshift(a):d[l]=a)}h&&Object.defineProperty(h,i.name,d),u=!0},G=function(t,e,s){for(var i=arguments.length>2,r=0;r<e.length;r++)s=i?e[r].call(t,s):e[r].call(t);return i?s:void 0};let K=(()=>{let t,e,s,i,r,n,o,a,c,l,h=D,d=[],u=[],p=[],g=[],m=[],_=[],b=[],y=[],$=[],f=[],v=[];return class FlexDisplay extends h{static{const A="function"==typeof Symbol&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;t=[J({type:String})],e=[J({type:String})],s=[J({type:String})],i=[J({type:String})],r=[J({type:String,reflect:!0})],n=[J({type:Boolean,reflect:!0})],o=[J({type:Boolean,reflect:!0,attribute:"center-center"})],a=[J({type:String})],c=[J({type:String})],l=[J({type:String})],Z(this,null,t,{kind:"accessor",name:"padding",static:!1,private:!1,access:{has:t=>"padding"in t,get:t=>t.padding,set:(t,e)=>{t.padding=e}},metadata:A},u,d),Z(this,null,e,{kind:"accessor",name:"minWidth",static:!1,private:!1,access:{has:t=>"minWidth"in t,get:t=>t.minWidth,set:(t,e)=>{t.minWidth=e}},metadata:A},p,d),Z(this,null,s,{kind:"accessor",name:"maxWidth",static:!1,private:!1,access:{has:t=>"maxWidth"in t,get:t=>t.maxWidth,set:(t,e)=>{t.maxWidth=e}},metadata:A},g,d),Z(this,null,i,{kind:"accessor",name:"width",static:!1,private:!1,access:{has:t=>"width"in t,get:t=>t.width,set:(t,e)=>{t.width=e}},metadata:A},m,d),Z(this,null,r,{kind:"accessor",name:"direction",static:!1,private:!1,access:{has:t=>"direction"in t,get:t=>t.direction,set:(t,e)=>{t.direction=e}},metadata:A},_,d),Z(this,null,n,{kind:"accessor",name:"center",static:!1,private:!1,access:{has:t=>"center"in t,get:t=>t.center,set:(t,e)=>{t.center=e}},metadata:A},b,d),Z(this,null,o,{kind:"accessor",name:"centerCenter",static:!1,private:!1,access:{has:t=>"centerCenter"in t,get:t=>t.centerCenter,set:(t,e)=>{t.centerCenter=e}},metadata:A},y,d),Z(this,null,a,{kind:"accessor",name:"justifyContent",static:!1,private:!1,access:{has:t=>"justifyContent"in t,get:t=>t.justifyContent,set:(t,e)=>{t.justifyContent=e}},metadata:A},$,d),Z(this,null,c,{kind:"accessor",name:"alignItems",static:!1,private:!1,access:{has:t=>"alignItems"in t,get:t=>t.alignItems,set:(t,e)=>{t.alignItems=e}},metadata:A},f,d),Z(this,null,l,{kind:"accessor",name:"boxSizing",static:!1,private:!1,access:{has:t=>"boxSizing"in t,get:t=>t.boxSizing,set:(t,e)=>{t.boxSizing=e}},metadata:A},v,d),A&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:A})}#t=(G(this,d),G(this,u,"0"));get padding(){return this.#t}set padding(t){this.#t=t}#e=G(this,p,"auto");get minWidth(){return this.#e}set minWidth(t){this.#e=t}#s=G(this,g,"auto");get maxWidth(){return this.#s}set maxWidth(t){this.#s=t}#i=G(this,m,"100%");get width(){return this.#i}set width(t){this.#i=t}#r=G(this,_,"row");get direction(){return this.#r}set direction(t){this.#r=t}#n=G(this,b,void 0);get center(){return this.#n}set center(t){this.#n=t}#o=G(this,y,void 0);get centerCenter(){return this.#o}set centerCenter(t){this.#o=t}#a=G(this,$,"flex-start");get justifyContent(){return this.#a}set justifyContent(t){this.#a=t}#c=G(this,f,"flex-start");get alignItems(){return this.#c}set alignItems(t){this.#c=t}#l=G(this,v,"border-box");get boxSizing(){return this.#l}set boxSizing(t){this.#l=t}render(){return H`
-      <style>
-        :host {
-          display: flex;
-          box-sizing: var(--flex-display-box-sizing, ${this.boxSizing});
-          max-width: var(--flex-display-max-width, ${this.maxWidth});
-          min-width: var(--flex-display-min-width, ${this.minWidth});
-          width: var(--flex-display-width, ${this.width});
-          flex-direction: var(--flex-display-direction, ${this.direction});
-          justify-content: var(
-            --flex-display-justify-content,
-            ${this.justifyContent}
-          );
-          align-items: var(--flex-display-align-items, ${this.alignItems});
-          padding: var(--flex-display-padding, ${this.padding});
-        }
-
-        :host([center]) {
-          align-items: center;
-        }
-
-        :host([center-center]) {
-          align-items: center;
-          justify-content: center;
-        }
-      </style>
-      <slot></slot>
-    `}}})();customElements.define("flex-row",class FlexRow extends K{constructor(){super(),this.direction="row",this.width="auto"}});let Q=(()=>{let a,c,l,h,d=[s("custom-top-app-bar")],u=[],p=o,g=[],m=[],_=[],b=[];return class extends p{static{c=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(p[Symbol.metadata]??null):void 0;l=[i({type:String,reflect:!0})],h=[i({type:Boolean,reflect:!0})],t(this,null,l,{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},g,m),t(this,null,h,{kind:"accessor",name:"scrolling",static:!1,private:!1,access:{has:t=>"scrolling"in t,get:t=>t.scrolling,set:(t,e)=>{t.scrolling=e}},metadata:e},_,b),t(null,a={value:c},d,{kind:"class",name:c.name,metadata:e},null,u),c=a.value,e&&Object.defineProperty(c,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#h=e(this,g,"center-aligned");get type(){return this.#h}set type(t){this.#h=t}#d=(e(this,m),e(this,_,void 0));get scrolling(){return this.#d}set scrolling(t){this.#d=t}static styles=[r`
-      :host {
-        display: flex;
-        flex-direction: column;
-        width: calc(100% - 2px);
-        background-color: var(--md-sys-color-surface);
-        color: var(--md-sys-color-on-surface);
-        box-sizing: border-box;
-      }
-
-      .container {
-        padding: 20px 12px 24px 12px;
-        box-sizing: border-box;
-        position: relative;
-        height: 64px;
-      }
-
-      :host([type='center-aligned']) .container,
-      :host([type='small']) .container {
-        justify-content: center;
-      }
-
-      :host(:not([type='center-aligned'])) ::slotted([name='title']) {
-        padding-left: 16px;
-      }
-
-      :host(:not([type='large'])) ::slotted([name='title']) {
-        padding-bottom: 28px;
-      }
-
-      :host([type='medium']) .container {
-        height: 112px;
-      }
-      :host([type='large']) .container {
-        height: 152px;
-      }
-
-      :host([type='center-aligned']) slot[name='title']::slotted(*) {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      :host(:not([type='center-aligned'])) slot[name='title']::slotted(*) {
-        padding-left: 6px;
-      }
-
-      :host([scrolling]) {
-        --md-elevation-level: 2;
-        padding: 0 16px;
-      }
-
-      flex-row {
-        width: 100%;
-        align-items: center;
-      }
-
-      custom-elevation {
-        border-radius: var(--md-sys-shape-corner-large);
-      }
-    `];connectedCallback(){document.addEventListener("custom-scroll",(({detail:t})=>{this.scrolling=t.scrolling}))}render(){return n`
-      <flex-column class="container">
-        <custom-elevation></custom-elevation>
-        <flex-row>
-          <slot name="start"></slot>
-          ${"center-aligned"===this.type||"small"===this.type?n`
-                <custom-typography>
-                  <slot name="title"></slot>
-                </custom-typography>
-              `:""}
-          <flex-it></flex-it>
-          <slot name="end"></slot>
-        </flex-row>
-        ${"medium"===this.type||"large"===this.type?n`
-              <flex-it></flex-it>
-              <custom-typography type="headline" size="small">
-                <slot name="title"></slot>
-              </custom-typography>
-            `:""}
-      </flex-column>
-    `}constructor(){super(...arguments),e(this,b)}static{e(c,u)}},c})();export{Q as C,K as F};