@vandeurenglenn/lite-elements 0.3.24 → 0.3.26

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}from"./tslib.es6-B0cSixZg.js";import{t as s,j as o,v as l,D as a}from"./property-Do5-bKhz.js";import{e as r}from"./custom-element-DIOmDbQp.js";import"./it-Dft_Rjy-.js";import"./row-DNgwBcX5.js";let i=(()=>{let i,n,c,p,m=[r("custom-top-app-bar")],d=[],g=a,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=[s({type:String,reflect:!0})],p=[s({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=[o`
+      :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 l`
+      <flex-column class="container">
+        <custom-elevation></custom-elevation>
+        <flex-row>
+          <slot name="start"></slot>
+          ${"center-aligned"===this.type||"small"===this.type?l`
+                <custom-typography>
+                  <slot name="title"></slot>
+                </custom-typography>
+              `:""}
+          <flex-it></flex-it>
+          <slot name="end"></slot>
+        </flex-row>
+        ${"medium"===this.type||"large"===this.type?l`
+              <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/bundle/{custom-element-BMhVvZjf.js → tslib.es6-B0cSixZg.js}

@@ -1 +1 @@
-function e(e,t,r,n,o,i){function c(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,a=n.kind,f="getter"===a?"get":"setter"===a?"set":"value",u=!t&&e?n.static?e:e.prototype:null,l=t||(u?Object.getOwnPropertyDescriptor(u,n.name):{}),p=!1,d=r.length-1;d>=0;d--){var g={};for(var h in n)g[h]="access"===h?{}:n[h];for(var h in n.access)g.access[h]=n.access[h];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");i.push(c(e||null))};var v=(0,r[d])("accessor"===a?{get:l.get,set:l.set}:l[f],g);if("accessor"===a){if(void 0===v)continue;if(null===v||"object"!=typeof v)throw new TypeError("Object expected");(s=c(v.get))&&(l.get=s),(s=c(v.set))&&(l.set=s),(s=c(v.init))&&o.unshift(s)}else(s=c(v))&&("field"===a?o.unshift(s):l[f]=s)}u&&Object.defineProperty(u,n.name,l),p=!0}function t(e,t,r){for(var n=arguments.length>2,o=0;o<t.length;o++)r=n?t[o].call(e,r):t[o].call(e);return n?r:void 0}function r(e){return(t,{addInitializer:r})=>{r((function(){customElements.define(e??t.name.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase(),this)}))}}"function"==typeof SuppressedError&&SuppressedError;export{e as _,t as a,r as e};
+function e(e,t,r,n,o,i){function c(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,a=n.kind,f="getter"===a?"get":"setter"===a?"set":"value",p=!t&&e?n.static?e:e.prototype:null,l=t||(p?Object.getOwnPropertyDescriptor(p,n.name):{}),u=!1,d=r.length-1;d>=0;d--){var g={};for(var h in n)g[h]="access"===h?{}:n[h];for(var h in n.access)g.access[h]=n.access[h];g.addInitializer=function(e){if(u)throw new TypeError("Cannot add initializers after decoration has completed");i.push(c(e||null))};var v=(0,r[d])("accessor"===a?{get:l.get,set:l.set}:l[f],g);if("accessor"===a){if(void 0===v)continue;if(null===v||"object"!=typeof v)throw new TypeError("Object expected");(s=c(v.get))&&(l.get=s),(s=c(v.set))&&(l.set=s),(s=c(v.init))&&o.unshift(s)}else(s=c(v))&&("field"===a?o.unshift(s):l[f]=s)}p&&Object.defineProperty(p,n.name,l),u=!0}function t(e,t,r){for(var n=arguments.length>2,o=0;o<t.length;o++)r=n?t[o].call(e,r):t[o].call(e);return n?r:void 0}"function"==typeof SuppressedError&&SuppressedError;export{e as _,t as a};

package/exports/bundle/typography.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t,e as s}from"./custom-element-BMhVvZjf.js";import{t as a,j as l,v as y,D as i}from"./property-Do5-bKhz.js";let m=(()=>{let m,r,o,n,d=[s("custom-typography")],c=[],f=i,p=[],g=[],h=[],v=[];return class extends f{static{r=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;o=[a({type:String,reflect:!0})],n=[a({type:String,reflect:!0})],e(this,null,o,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:e=>"type"in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},p,g),e(this,null,n,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:e=>"size"in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},h,v),e(null,m={value:r},d,{kind:"class",name:r.name,metadata:t},null,c),r=m.value,t&&Object.defineProperty(r,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,p,"title");get type(){return this.#e}set type(e){this.#e=e}#t=(t(this,g),t(this,h,"large"));get size(){return this.#t}set size(e){this.#t=e}static styles=[l`
+import{_ as e,a as t}from"./tslib.es6-B0cSixZg.js";import{t as s,j as a,v as l,D as y}from"./property-Do5-bKhz.js";import{e as i}from"./custom-element-DIOmDbQp.js";let m=(()=>{let m,r,o,n,d=[i("custom-typography")],c=[],f=y,p=[],g=[],h=[],v=[];return class extends f{static{r=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;o=[s({type:String,reflect:!0})],n=[s({type:String,reflect:!0})],e(this,null,o,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:e=>"type"in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},p,g),e(this,null,n,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:e=>"size"in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},h,v),e(null,m={value:r},d,{kind:"class",name:r.name,metadata:t},null,c),r=m.value,t&&Object.defineProperty(r,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,p,"title");get type(){return this.#e}set type(e){this.#e=e}#t=(t(this,g),t(this,h,"large"));get size(){return this.#t}set size(e){this.#t=e}static styles=[a`
       :host {
         display: contents;
       }
@@ -153,4 +153,4 @@ import{_ as e,a as t,e as s}from"./custom-element-BMhVvZjf.js";import{t as a,j a
         text-transform: var(--md-sys-typescale-title-small-text-transform);
         text-decoration: var(--md-sys-typescale-title-small-text-decoration);
       }
-    `];render(){return y` <slot></slot> `}constructor(){super(...arguments),t(this,v)}static{t(r,c)}},r})();export{m as CustomTypography};
+    `];render(){return l` <slot></slot> `}constructor(){super(...arguments),t(this,v)}static{t(r,c)}},r})();export{m as CustomTypography};

package/exports/bundle/upload-file.js

@@ -1,4 +1,4 @@
-import{_ as t,a as e,e as l}from"./custom-element-BMhVvZjf.js";import{t as a,j as s,v as i,D as r}from"./property-Do5-bKhz.js";let o=(()=>{let o,u,m,n=[l("custom-upload-file")],p=[],c=r,d=[],y=[];return class extends c{static{u=this}static{const l="function"==typeof Symbol&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;m=[a({type:Boolean})],t(this,null,m,{kind:"accessor",name:"multiple",static:!1,private:!1,access:{has:t=>"multiple"in t,get:t=>t.multiple,set:(t,e)=>{t.multiple=e}},metadata:l},d,y),t(null,o={value:u},n,{kind:"class",name:u.name,metadata:l},null,p),u=o.value,l&&Object.defineProperty(u,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:l}),e(u,p)}#t=e(this,d,void 0);get multiple(){return this.#t}set multiple(t){this.#t=t}static get styles(){return[s`
+import{_ as t,a as e}from"./tslib.es6-B0cSixZg.js";import{t as l,j as s,v as a,D as i}from"./property-Do5-bKhz.js";import{e as r}from"./custom-element-DIOmDbQp.js";let o=(()=>{let o,m,u,n=[r("custom-upload-file")],p=[],c=i,d=[],y=[];return class extends c{static{m=this}static{const s="function"==typeof Symbol&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;u=[l({type:Boolean})],t(this,null,u,{kind:"accessor",name:"multiple",static:!1,private:!1,access:{has:t=>"multiple"in t,get:t=>t.multiple,set:(t,e)=>{t.multiple=e}},metadata:s},d,y),t(null,o={value:m},n,{kind:"class",name:m.name,metadata:s},null,p),m=o.value,s&&Object.defineProperty(m,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s}),e(m,p)}#t=e(this,d,void 0);get multiple(){return this.#t}set multiple(t){this.#t=t}static get styles(){return[s`
         :host {
           display: flex;
         }
@@ -6,4 +6,4 @@ import{_ as t,a as e,e as l}from"./custom-element-BMhVvZjf.js";import{t as a,j a
         input {
           display: hidden;
         }
-      `]}render(){return i`<input type="file" ?multiple=${this.multiple} />`}constructor(){super(...arguments),e(this,y)}},u})();export{o as CustomUploadFile};
+      `]}render(){return a`<input type="file" ?multiple=${this.multiple} />`}constructor(){super(...arguments),e(this,y)}},m})();export{o as CustomUploadFile};

package/exports/bundle/upload.js

@@ -1 +1 @@
-import{_ as t,a,e}from"./custom-element-BMhVvZjf.js";import{t as r,v as s,D as i}from"./property-Do5-bKhz.js";let m=(()=>{let m,o,c,l=[e("custom-upload")],n=[],u=i,h=[],d=[];return class extends u{static{o=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(u[Symbol.metadata]??null):void 0;c=[r({attribute:"with-camera"})],t(this,null,c,{kind:"accessor",name:"withCamera",static:!1,private:!1,access:{has:t=>"withCamera"in t,get:t=>t.withCamera,set:(t,a)=>{t.withCamera=a}},metadata:e},h,d),t(null,m={value:o},l,{kind:"class",name:o.name,metadata:e},null,n),o=m.value,e&&Object.defineProperty(o,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e}),a(o,n)}#t=a(this,h,void 0);get withCamera(){return this.#t}set withCamera(t){this.#t=t}render(){return s` <custom-pages> </custom-pages> `}constructor(){super(...arguments),a(this,d)}},o})();export{m as CustomUpload};
+import{_ as t,a}from"./tslib.es6-B0cSixZg.js";import{t as e,v as s,D as r}from"./property-Do5-bKhz.js";import{e as i}from"./custom-element-DIOmDbQp.js";let m=(()=>{let m,o,c,l=[i("custom-upload")],n=[],u=r,h=[],d=[];return class extends u{static{o=this}static{const s="function"==typeof Symbol&&Symbol.metadata?Object.create(u[Symbol.metadata]??null):void 0;c=[e({attribute:"with-camera"})],t(this,null,c,{kind:"accessor",name:"withCamera",static:!1,private:!1,access:{has:t=>"withCamera"in t,get:t=>t.withCamera,set:(t,a)=>{t.withCamera=a}},metadata:s},h,d),t(null,m={value:o},l,{kind:"class",name:o.name,metadata:s},null,n),o=m.value,s&&Object.defineProperty(o,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s}),a(o,n)}#t=a(this,h,void 0);get withCamera(){return this.#t}set withCamera(t){this.#t=t}render(){return s` <custom-pages> </custom-pages> `}constructor(){super(...arguments),a(this,d)}},o})();export{m as CustomUpload};

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,17 @@
+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 {
+    accessor open: boolean;
+    get _list(): Element;
+    createNotification({ title, message, image }: {
+        title: string;
+        message: string;
+        image?: string;
+    }, timeout?: EpochTimeStamp): void;
+    _onclick(): 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.26",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {
@@ -57,14 +57,6 @@
 			"import": "./exports/banner.js",
 			"types": "./exports/banner/banner.d.ts"
 		},
-		"./button": {
-			"import": "./exports/button.js",
-			"types": "./exports/button/button.d.ts"
-		},
-		"./button.js": {
-			"import": "./exports/button.js",
-			"types": "./exports/button/button.d.ts"
-		},
 		"./card": {
 			"import": "./exports/card.js",
 			"types": "./exports/card/card.d.ts"
@@ -193,14 +185,6 @@
 			"import": "./exports/elements.js",
 			"types": "./exports/elements.d.ts"
 		},
-		"./elevation": {
-			"import": "./exports/elevation.js",
-			"types": "./exports/elevation/elevation.d.ts"
-		},
-		"./elevation.js": {
-			"import": "./exports/elevation.js",
-			"types": "./exports/elevation/elevation.d.ts"
-		},
 		"./hour-field": {
 			"import": "./exports/hour-field.js",
 			"types": "./exports/time-picker/hour-field.d.ts"
@@ -225,14 +209,6 @@
 			"import": "./exports/icon-set.js",
 			"types": "./exports/icon/icon-set.d.ts"
 		},
-		"./icon": {
-			"import": "./exports/icon.js",
-			"types": "./exports/icon/icon.d.ts"
-		},
-		"./icon.js": {
-			"import": "./exports/icon.js",
-			"types": "./exports/icon/icon.d.ts"
-		},
 		"./input": {
 			"import": "./exports/input.js",
 			"types": "./exports/time-picker/input.d.ts"
@@ -273,6 +249,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"
@@ -281,14 +273,6 @@
 			"import": "./exports/pages.js",
 			"types": "./exports/pages/pages.d.ts"
 		},
-		"./pane": {
-			"import": "./exports/pane.js",
-			"types": "./exports/pane/pane.d.ts"
-		},
-		"./pane.js": {
-			"import": "./exports/pane.js",
-			"types": "./exports/pane/pane.d.ts"
-		},
 		"./rail": {
 			"import": "./exports/rail.js",
 			"types": "./exports/rail/rail.d.ts"