@vandeurenglenn/lite-elements 0.3.19 → 0.3.20

package/exports/bundle/icon-set.js

@@ -2,4 +2,4 @@ import{_ as e,a as t,e as s}from"./custom-element-c2e883ba.js";import{j as n,D a
       :host {
         display: none;
       }
-    `];#e(e){return this.querySelector("template").content.querySelector(`span[name="${e}"]`).children[0]}getIcon(e){const t=this.#e(e);return t?t.cloneNode(!0):(console.warn(`missing icon ${e}`),e)}get setName(){return this.getAttribute("set-name")||"icons"}connectedCallback(){globalThis.pubsub.subscribe(`custom-icon-set-${this.setName}-connected`,(()=>{})),globalThis.pubsub.publish(`custom-icon-set-${this.setName}-connected`,this)}static{t(l,i)}},l})();export{l as CustomIconSet};
+    `];#e(e){return this.querySelector("template").content.querySelector(`span[name="${e}"]`)?.children[0]}getIcon(e){const t=this.#e(e);return t?t.cloneNode(!0):(console.warn(`missing icon ${e}`),e)}get setName(){return this.getAttribute("set-name")||"icons"}connectedCallback(){globalThis.pubsub.subscribe(`custom-icon-set-${this.setName}-connected`,(()=>{})),globalThis.pubsub.publish(`custom-icon-set-${this.setName}-connected`,this)}static{t(l,i)}},l})();export{l as CustomIconSet};

package/exports/bundle/theme.js

@@ -1 +1 @@
-import{_ as t,a as e,e as a}from"./custom-element-c2e883ba.js";import{t as s,D as o}from"./property-c909a6bf.js";let r=(()=>{let r,n,i,l,c,g=[a("custom-theme")],d=[],h=o,m=[],u=[],p=[],y=[],b=[],w=[];return class extends h{static{n=this}static{const a="function"==typeof Symbol&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;i=[s({type:Boolean})],l=[s({type:String,attribute:"mobile-trigger"})],c=[s({type:Boolean})],t(this,null,i,{kind:"accessor",name:"loadFont",static:!1,private:!1,access:{has:t=>"loadFont"in t,get:t=>t.loadFont,set:(t,e)=>{t.loadFont=e}},metadata:a},m,u),t(this,null,l,{kind:"accessor",name:"narrowTrigger",static:!1,private:!1,access:{has:t=>"narrowTrigger"in t,get:t=>t.narrowTrigger,set:(t,e)=>{t.narrowTrigger=e}},metadata:a},p,y),t(this,null,c,{kind:"accessor",name:"narrow",static:!1,private:!1,access:{has:t=>"narrow"in t,get:t=>t.narrow,set:(t,e)=>{t.narrow=e}},metadata:a},b,w),t(null,r={value:n},g,{kind:"class",name:n.name,metadata:a},null,d),n=r.value,a&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a}),e(n,d)}#t=e(this,m,!0);get loadFont(){return this.#t}set loadFont(t){this.#t=t}#e=(e(this,u),e(this,p,"(max-width: 860px)"));get narrowTrigger(){return this.#e}set narrowTrigger(t){this.#e=t}#a=(e(this,y),e(this,b,void 0));get narrow(){return this.#a}set narrow(t){this.#a=t}#s(t,e,a){let s=document.createElement("link");if(s.rel=e,s.href=t,a)for(const t of a)s.setAttribute(t,"");document.head.appendChild(s)}#o(){let t="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap";return globalThis.symbols&&(t+=`&text=${globalThis.symbols}`),t}constructor(){super();const t=matchMedia("(max-width: 860px)");t.onchange=this.#r,this.#r({matches:t.matches}),this.load("./themes/default/theme.css");const e=document.createElement("style");e.innerHTML="\n    html, body {\n      inset: 0;\n      position: absolute;\n      margin: 0;\n      background: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n      overflow: hidden;\n    }",document.head.appendChild(e);const a=!this.hasAttribute("load-symbols")||"false"!==this.getAttribute("load-symbols");(this.loadFont||a)&&this.#s("https://fonts.googleapis.com","preconnect"),this.#s("https://fonts.gstatic.com","preconnect",["crossorigin"]),this.loadFont&&this.#s("https://fonts.googleapis.com/css2?family=Roboto&display=swap","stylesheet"),a&&this.#s(this.#o(),"stylesheet")}#r=(e(this,w),({matches:t})=>{this.narrow=t,document.dispatchEvent(new CustomEvent("custom-theme-narrow",{detail:this.narrow}))});set language(t){this.setAttribute("language",t)}get language(){return this.getAttribute("language")||"css"}async load(t){if("js"===this.language){const e=await import(t);for(const[t,a]of Object.entries(e)){const e=`--${t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}`;document.body.style.setProperty(e,a)}}else if("css"===this.language){const e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)}}},n})();export{r as CustomTheme};
+import{_ as t,a as e,e as a}from"./custom-element-c2e883ba.js";import{t as s,D as o}from"./property-c909a6bf.js";let r=(()=>{let r,n,i,l,c,d,m=[a("custom-theme")],g=[],h=o,u=[],y=[],b=[],p=[],w=[],_=[],f=[],S=[];return class extends h{static{n=this}static{const a="function"==typeof Symbol&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;i=[s({type:Boolean,attribute:"load-font"})],l=[s({type:Boolean,attribute:"load-symbols"})],c=[s({type:String,attribute:"mobile-trigger"})],d=[s({type:Boolean})],t(this,null,i,{kind:"accessor",name:"loadFont",static:!1,private:!1,access:{has:t=>"loadFont"in t,get:t=>t.loadFont,set:(t,e)=>{t.loadFont=e}},metadata:a},u,y),t(this,null,l,{kind:"accessor",name:"loadSymbols",static:!1,private:!1,access:{has:t=>"loadSymbols"in t,get:t=>t.loadSymbols,set:(t,e)=>{t.loadSymbols=e}},metadata:a},b,p),t(this,null,c,{kind:"accessor",name:"narrowTrigger",static:!1,private:!1,access:{has:t=>"narrowTrigger"in t,get:t=>t.narrowTrigger,set:(t,e)=>{t.narrowTrigger=e}},metadata:a},w,_),t(this,null,d,{kind:"accessor",name:"narrow",static:!1,private:!1,access:{has:t=>"narrow"in t,get:t=>t.narrow,set:(t,e)=>{t.narrow=e}},metadata:a},f,S),t(null,r={value:n},m,{kind:"class",name:n.name,metadata:a},null,g),n=r.value,a&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a}),e(n,g)}#t=e(this,u,!0);get loadFont(){return this.#t}set loadFont(t){this.#t=t}#e=(e(this,y),e(this,b,!0));get loadSymbols(){return this.#e}set loadSymbols(t){this.#e=t}#a=(e(this,p),e(this,w,"(max-width: 860px)"));get narrowTrigger(){return this.#a}set narrowTrigger(t){this.#a=t}#s=(e(this,_),e(this,f,void 0));get narrow(){return this.#s}set narrow(t){this.#s=t}#o(t,e,a){let s=document.createElement("link");if(s.rel=e,s.href=t,a)for(const t of a)s.setAttribute(t,"");document.head.appendChild(s)}#r(){let t="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap";return globalThis.symbols&&(t+=`&text=${globalThis.symbols}`),t}connectedCallback(){const t=matchMedia("(max-width: 860px)");t.onchange=this.#n,this.#n({matches:t.matches}),this.load("./themes/default/theme.css");const e=document.createElement("style");e.innerHTML="\n    html, body {\n      inset: 0;\n      position: absolute;\n      margin: 0;\n      background: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n      overflow: hidden;\n    }",document.head.appendChild(e),(this.loadFont||this.loadSymbols)&&this.#o("https://fonts.googleapis.com","preconnect"),this.#o("https://fonts.gstatic.com","preconnect",["crossorigin"]),this.loadFont&&this.#o("https://fonts.googleapis.com/css2?family=Roboto&display=swap","stylesheet"),this.loadSymbols&&this.#o(this.#r(),"stylesheet")}#n=(e(this,S),({matches:t})=>{this.narrow=t,document.dispatchEvent(new CustomEvent("custom-theme-narrow",{detail:this.narrow}))});set language(t){this.setAttribute("language",t)}get language(){return this.getAttribute("language")||"css"}async load(t){if("js"===this.language){const e=await import(t);for(const[t,a]of Object.entries(e)){const e=`--${t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}`;document.body.style.setProperty(e,a)}}else if("css"===this.language){const e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)}}},n})();export{r as CustomTheme};

package/exports/icon-set.js

@@ -25,7 +25,7 @@ let CustomIconSet = (() => {
     `
         ];
         #getIcon(name) {
-            return this.querySelector('template').content.querySelector(`span[name="${name}"]`).children[0];
+            return this.querySelector('template').content.querySelector(`span[name="${name}"]`)?.children[0];
         }
         getIcon(name) {
             const node = this.#getIcon(name);

package/exports/theme/theme.d.ts

@@ -2,9 +2,10 @@ import { LiteElement } from '@vandeurenglenn/lite';
 export declare class CustomTheme extends LiteElement {
     #private;
     accessor loadFont: boolean;
+    accessor loadSymbols: boolean;
     accessor narrowTrigger: string;
     accessor narrow: boolean;
-    constructor();
+    connectedCallback(): void;
     set language(value: string);
     get language(): string;
     /**

package/exports/theme.js

@@ -11,6 +11,9 @@ let CustomTheme = (() => {
     let _loadFont_decorators;
     let _loadFont_initializers = [];
     let _loadFont_extraInitializers = [];
+    let _loadSymbols_decorators;
+    let _loadSymbols_initializers = [];
+    let _loadSymbols_extraInitializers = [];
     let _narrowTrigger_decorators;
     let _narrowTrigger_initializers = [];
     let _narrowTrigger_extraInitializers = [];
@@ -21,10 +24,12 @@ let CustomTheme = (() => {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _loadFont_decorators = [property({ type: Boolean })];
+            _loadFont_decorators = [property({ type: Boolean, attribute: 'load-font' })];
+            _loadSymbols_decorators = [property({ type: Boolean, attribute: 'load-symbols' })];
             _narrowTrigger_decorators = [property({ type: String, attribute: 'mobile-trigger' })];
             _narrow_decorators = [property({ type: Boolean })];
             __esDecorate(this, null, _loadFont_decorators, { kind: "accessor", name: "loadFont", static: false, private: false, access: { has: obj => "loadFont" in obj, get: obj => obj.loadFont, set: (obj, value) => { obj.loadFont = value; } }, metadata: _metadata }, _loadFont_initializers, _loadFont_extraInitializers);
+            __esDecorate(this, null, _loadSymbols_decorators, { kind: "accessor", name: "loadSymbols", static: false, private: false, access: { has: obj => "loadSymbols" in obj, get: obj => obj.loadSymbols, set: (obj, value) => { obj.loadSymbols = value; } }, metadata: _metadata }, _loadSymbols_initializers, _loadSymbols_extraInitializers);
             __esDecorate(this, null, _narrowTrigger_decorators, { kind: "accessor", name: "narrowTrigger", static: false, private: false, access: { has: obj => "narrowTrigger" in obj, get: obj => obj.narrowTrigger, set: (obj, value) => { obj.narrowTrigger = value; } }, metadata: _metadata }, _narrowTrigger_initializers, _narrowTrigger_extraInitializers);
             __esDecorate(this, null, _narrow_decorators, { kind: "accessor", name: "narrow", static: false, private: false, access: { has: obj => "narrow" in obj, get: obj => obj.narrow, set: (obj, value) => { obj.narrow = value; } }, metadata: _metadata }, _narrow_initializers, _narrow_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
@@ -35,7 +40,10 @@ let CustomTheme = (() => {
         #loadFont_accessor_storage = __runInitializers(this, _loadFont_initializers, true);
         get loadFont() { return this.#loadFont_accessor_storage; }
         set loadFont(value) { this.#loadFont_accessor_storage = value; }
-        #narrowTrigger_accessor_storage = (__runInitializers(this, _loadFont_extraInitializers), __runInitializers(this, _narrowTrigger_initializers, '(max-width: 860px)'));
+        #loadSymbols_accessor_storage = (__runInitializers(this, _loadFont_extraInitializers), __runInitializers(this, _loadSymbols_initializers, true));
+        get loadSymbols() { return this.#loadSymbols_accessor_storage; }
+        set loadSymbols(value) { this.#loadSymbols_accessor_storage = value; }
+        #narrowTrigger_accessor_storage = (__runInitializers(this, _loadSymbols_extraInitializers), __runInitializers(this, _narrowTrigger_initializers, '(max-width: 860px)'));
         get narrowTrigger() { return this.#narrowTrigger_accessor_storage; }
         set narrowTrigger(value) { this.#narrowTrigger_accessor_storage = value; }
         #narrow_accessor_storage = (__runInitializers(this, _narrowTrigger_extraInitializers), __runInitializers(this, _narrow_initializers, void 0));
@@ -59,8 +67,7 @@ let CustomTheme = (() => {
             }
             return link;
         }
-        constructor() {
-            super();
+        connectedCallback() {
             const media = matchMedia('(max-width: 860px)');
             media.onchange = this.#mediaQueryChange;
             this.#mediaQueryChange({ matches: media.matches });
@@ -77,13 +84,12 @@ let CustomTheme = (() => {
       overflow: hidden;
     }`;
             document.head.appendChild(style);
-            const loadSymbols = this.hasAttribute('load-symbols') ? this.getAttribute('load-symbols') !== 'false' : true;
-            if (this.loadFont || loadSymbols)
+            if (this.loadFont || this.loadSymbols)
                 this.#loadLink('https://fonts.googleapis.com', 'preconnect');
             this.#loadLink('https://fonts.gstatic.com', 'preconnect', ['crossorigin']);
             if (this.loadFont)
                 this.#loadLink('https://fonts.googleapis.com/css2?family=Roboto&display=swap', 'stylesheet');
-            if (loadSymbols)
+            if (this.loadSymbols)
                 this.#loadLink(this.#generateSymbolsLink(), 'stylesheet');
         }
         #mediaQueryChange = (__runInitializers(this, _narrow_extraInitializers), ({ matches }) => {

package/package.json

@@ -1,445 +1,445 @@
-{
-	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.19",
-	"description": "set of lite elements following Material Design 3 spec",
-	"type": "module",
-	"scripts": {
-		"watch": "rollup -c -w",
-		"build": "rollup -c",
-		"serve": "jsproject --serve ./exports/bundle --port 8888",
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"files": [
-		"./exports",
-		"LICENSE"
-	],
-	"keywords": [],
-	"author": "",
-	"license": "MIT",
-	"dependencies": {
-		"@material-design-icons/svg": "^0.14.10",
-		"@material-symbols/svg-400": "^0.10.2",
-		"@material/web": "^1.0.0-pre.10",
-		"@vandeurenglenn/flex-elements": "^1.2.5",
-		"@vandeurenglenn/lite": "^0.2.32",
-		"custom-element-decorator": "^0.6.0"
-	},
-	"devDependencies": {
-		"@rollup/plugin-commonjs": "^25.0.2",
-		"@rollup/plugin-json": "^6.0.0",
-		"@rollup/plugin-node-resolve": "^15.1.0",
-		"@rollup/plugin-terser": "^0.4.3",
-		"@rollup/plugin-typescript": "^11.1.1",
-		"@types/html": "^1.0.1",
-		"@types/node": "^20.3.0",
-		"@web/rollup-plugin-html": "^2.0.0",
-		"chrome-launcher": "^1.0.0",
-		"globby": "^13.1.4",
-		"lighthouse": "^10.4.0",
-		"material-symbols": "^0.10.1",
-		"rimraf": "^5.0.1",
-		"rollup": "^3.24.1",
-		"rollup-plugin-auto-exports": "^1.0.0",
-		"rollup-plugin-material-symbols": "^2.1.0",
-		"tslib": "^2.5.3",
-		"typescript": "^5.1.3"
-	},
-	"exports": {
-		".": {
-			"import": "./exports/lite-elements.js",
-			"types": "./exports/lite-elements.d.ts"
-		},
-		"./banner": {
-			"import": "./exports/banner.js",
-			"types": "./exports/banner/banner.d.ts"
-		},
-		"./banner.js": {
-			"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"
-		},
-		"./card.js": {
-			"import": "./exports/card.js",
-			"types": "./exports/card/card.d.ts"
-		},
-		"./code": {
-			"import": "./exports/code.js",
-			"types": "./exports/demo/code.d.ts"
-		},
-		"./code.js": {
-			"import": "./exports/code.js",
-			"types": "./exports/demo/code.d.ts"
-		},
-		"./demo-elements": {
-			"import": "./exports/demo-elements.js",
-			"types": "./exports/demo-elements.d.ts"
-		},
-		"./demo-elements.js": {
-			"import": "./exports/demo-elements.js",
-			"types": "./exports/demo-elements.d.ts"
-		},
-		"./demo-icons": {
-			"import": "./exports/demo-icons.js",
-			"types": "./exports/demo/demo-icons.d.ts"
-		},
-		"./demo-icons.js": {
-			"import": "./exports/demo-icons.js",
-			"types": "./exports/demo/demo-icons.d.ts"
-		},
-		"./demo-shell": {
-			"import": "./exports/demo-shell.js",
-			"types": "./exports/demo/demo-shell.d.ts"
-		},
-		"./demo-shell.js": {
-			"import": "./exports/demo-shell.js",
-			"types": "./exports/demo/demo-shell.d.ts"
-		},
-		"./demo": {
-			"import": "./exports/demo.js",
-			"types": "./exports/demo/demo.d.ts"
-		},
-		"./demo.js": {
-			"import": "./exports/demo.js",
-			"types": "./exports/demo/demo.d.ts"
-		},
-		"./dial": {
-			"import": "./exports/dial.js",
-			"types": "./exports/time-picker/dial.d.ts"
-		},
-		"./dial.js": {
-			"import": "./exports/dial.js",
-			"types": "./exports/time-picker/dial.d.ts"
-		},
-		"./dialog": {
-			"import": "./exports/dialog.js",
-			"types": "./exports/dialog/dialog.d.ts"
-		},
-		"./dialog.js": {
-			"import": "./exports/dialog.js",
-			"types": "./exports/dialog/dialog.d.ts"
-		},
-		"./divider": {
-			"import": "./exports/divider.js",
-			"types": "./exports/divider/divider.d.ts"
-		},
-		"./divider.js": {
-			"import": "./exports/divider.js",
-			"types": "./exports/divider/divider.d.ts"
-		},
-		"./drawer-button": {
-			"import": "./exports/drawer-button.js",
-			"types": "./exports/drawer/drawer-button.d.ts"
-		},
-		"./drawer-button.js": {
-			"import": "./exports/drawer-button.js",
-			"types": "./exports/drawer/drawer-button.d.ts"
-		},
-		"./drawer-item": {
-			"import": "./exports/drawer-item.js",
-			"types": "./exports/drawer/drawer-item.d.ts"
-		},
-		"./drawer-item.js": {
-			"import": "./exports/drawer-item.js",
-			"types": "./exports/drawer/drawer-item.d.ts"
-		},
-		"./drawer-layout": {
-			"import": "./exports/drawer-layout.js",
-			"types": "./exports/drawer/drawer-layout.d.ts"
-		},
-		"./drawer-layout.js": {
-			"import": "./exports/drawer-layout.js",
-			"types": "./exports/drawer/drawer-layout.d.ts"
-		},
-		"./drawer": {
-			"import": "./exports/drawer.js",
-			"types": "./exports/drawer/drawer.d.ts"
-		},
-		"./drawer.js": {
-			"import": "./exports/drawer.js",
-			"types": "./exports/drawer/drawer.d.ts"
-		},
-		"./dropdown-menu": {
-			"import": "./exports/dropdown-menu.js",
-			"types": "./exports/dropdown/dropdown-menu.d.ts"
-		},
-		"./dropdown-menu.js": {
-			"import": "./exports/dropdown-menu.js",
-			"types": "./exports/dropdown/dropdown-menu.d.ts"
-		},
-		"./dropdown": {
-			"import": "./exports/dropdown.js",
-			"types": "./exports/dropdown/dropdown.d.ts"
-		},
-		"./dropdown.js": {
-			"import": "./exports/dropdown.js",
-			"types": "./exports/dropdown/dropdown.d.ts"
-		},
-		"./elements": {
-			"import": "./exports/elements.js",
-			"types": "./exports/elements.d.ts"
-		},
-		"./elements.js": {
-			"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"
-		},
-		"./hour-field.js": {
-			"import": "./exports/hour-field.js",
-			"types": "./exports/time-picker/hour-field.d.ts"
-		},
-		"./icon-button": {
-			"import": "./exports/icon-button.js",
-			"types": "./exports/button/icon-button.d.ts"
-		},
-		"./icon-button.js": {
-			"import": "./exports/icon-button.js",
-			"types": "./exports/button/icon-button.d.ts"
-		},
-		"./icon-set": {
-			"import": "./exports/icon-set.js",
-			"types": "./exports/icon/icon-set.d.ts"
-		},
-		"./icon-set.js": {
-			"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"
-		},
-		"./input.js": {
-			"import": "./exports/input.js",
-			"types": "./exports/time-picker/input.d.ts"
-		},
-		"./list-item": {
-			"import": "./exports/list-item.js",
-			"types": "./exports/list/list-item.d.ts"
-		},
-		"./list-item.js": {
-			"import": "./exports/list-item.js",
-			"types": "./exports/list/list-item.d.ts"
-		},
-		"./list": {
-			"import": "./exports/list.js",
-			"types": "./exports/list/list.d.ts"
-		},
-		"./list.js": {
-			"import": "./exports/list.js",
-			"types": "./exports/list/list.d.ts"
-		},
-		"./menu": {
-			"import": "./exports/menu.js",
-			"types": "./exports/tabs/menu.d.ts"
-		},
-		"./menu.js": {
-			"import": "./exports/menu.js",
-			"types": "./exports/tabs/menu.d.ts"
-		},
-		"./minute-field": {
-			"import": "./exports/minute-field.js",
-			"types": "./exports/time-picker/minute-field.d.ts"
-		},
-		"./minute-field.js": {
-			"import": "./exports/minute-field.js",
-			"types": "./exports/time-picker/minute-field.d.ts"
-		},
-		"./pages": {
-			"import": "./exports/pages.js",
-			"types": "./exports/pages/pages.d.ts"
-		},
-		"./pages.js": {
-			"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"
-		},
-		"./rail.js": {
-			"import": "./exports/rail.js",
-			"types": "./exports/rail/rail.d.ts"
-		},
-		"./root": {
-			"import": "./exports/root.js",
-			"types": "./exports/root/root.d.ts"
-		},
-		"./root.js": {
-			"import": "./exports/root.js",
-			"types": "./exports/root/root.d.ts"
-		},
-		"./scroll-mixin": {
-			"import": "./exports/scroll-mixin.js",
-			"types": "./exports/mixins/scroll-mixin.d.ts"
-		},
-		"./scroll-mixin.js": {
-			"import": "./exports/scroll-mixin.js",
-			"types": "./exports/mixins/scroll-mixin.d.ts"
-		},
-		"./section": {
-			"import": "./exports/section.js",
-			"types": "./exports/section/section.d.ts"
-		},
-		"./section.js": {
-			"import": "./exports/section.js",
-			"types": "./exports/section/section.d.ts"
-		},
-		"./select-mixin": {
-			"import": "./exports/select-mixin.js",
-			"types": "./exports/mixins/select-mixin.d.ts"
-		},
-		"./select-mixin.js": {
-			"import": "./exports/select-mixin.js",
-			"types": "./exports/mixins/select-mixin.d.ts"
-		},
-		"./selector-mixin": {
-			"import": "./exports/selector-mixin.js",
-			"types": "./exports/mixins/selector-mixin.d.ts"
-		},
-		"./selector-mixin.js": {
-			"import": "./exports/selector-mixin.js",
-			"types": "./exports/mixins/selector-mixin.d.ts"
-		},
-		"./selector": {
-			"import": "./exports/selector.js",
-			"types": "./exports/selector/selector.d.ts"
-		},
-		"./selector.js": {
-			"import": "./exports/selector.js",
-			"types": "./exports/selector/selector.d.ts"
-		},
-		"./supporting-pane": {
-			"import": "./exports/supporting-pane.js",
-			"types": "./exports/supporting-pane/supporting-pane.d.ts"
-		},
-		"./supporting-pane.js": {
-			"import": "./exports/supporting-pane.js",
-			"types": "./exports/supporting-pane/supporting-pane.d.ts"
-		},
-		"./tab": {
-			"import": "./exports/tab.js",
-			"types": "./exports/tabs/tab.d.ts"
-		},
-		"./tab.js": {
-			"import": "./exports/tab.js",
-			"types": "./exports/tabs/tab.d.ts"
-		},
-		"./tabs": {
-			"import": "./exports/tabs.js",
-			"types": "./exports/tabs/tabs.d.ts"
-		},
-		"./tabs.js": {
-			"import": "./exports/tabs.js",
-			"types": "./exports/tabs/tabs.d.ts"
-		},
-		"./text-field": {
-			"import": "./exports/text-field.js",
-			"types": "./exports/text-field/text-field.d.ts"
-		},
-		"./text-field.js": {
-			"import": "./exports/text-field.js",
-			"types": "./exports/text-field/text-field.d.ts"
-		},
-		"./theme": {
-			"import": "./exports/theme.js",
-			"types": "./exports/theme/theme.d.ts"
-		},
-		"./theme.js": {
-			"import": "./exports/theme.js",
-			"types": "./exports/theme/theme.d.ts"
-		},
-		"./time-picker": {
-			"import": "./exports/time-picker.js",
-			"types": "./exports/time-picker/time-picker.d.ts"
-		},
-		"./time-picker.js": {
-			"import": "./exports/time-picker.js",
-			"types": "./exports/time-picker/time-picker.d.ts"
-		},
-		"./title": {
-			"import": "./exports/title.js",
-			"types": "./exports/typography/title.d.ts"
-		},
-		"./title.js": {
-			"import": "./exports/title.js",
-			"types": "./exports/typography/title.d.ts"
-		},
-		"./toggle-button": {
-			"import": "./exports/toggle-button.js",
-			"types": "./exports/toggle/toggle-button.d.ts"
-		},
-		"./toggle-button.js": {
-			"import": "./exports/toggle-button.js",
-			"types": "./exports/toggle/toggle-button.d.ts"
-		},
-		"./toggle": {
-			"import": "./exports/toggle.js",
-			"types": "./exports/toggle/toggle.d.ts"
-		},
-		"./toggle.js": {
-			"import": "./exports/toggle.js",
-			"types": "./exports/toggle/toggle.d.ts"
-		},
-		"./top-app-bar": {
-			"import": "./exports/top-app-bar.js",
-			"types": "./exports/bar/top-app-bar.d.ts"
-		},
-		"./top-app-bar.js": {
-			"import": "./exports/top-app-bar.js",
-			"types": "./exports/bar/top-app-bar.d.ts"
-		},
-		"./types": {
-			"import": "./exports/types.js",
-			"types": "./exports/types.d.ts"
-		},
-		"./types.js": {
-			"import": "./exports/types.js",
-			"types": "./exports/types.d.ts"
-		},
-		"./typography": {
-			"import": "./exports/typography.js",
-			"types": "./exports/typography/typography.d.ts"
-		},
-		"./typography.js": {
-			"import": "./exports/typography.js",
-			"types": "./exports/typography/typography.d.ts"
-		}
-	}
-}
+{
+	"name": "@vandeurenglenn/lite-elements",
+	"version": "0.3.20",
+	"description": "set of lite elements following Material Design 3 spec",
+	"type": "module",
+	"scripts": {
+		"watch": "rollup -c -w",
+		"build": "rollup -c",
+		"serve": "jsproject --serve ./exports/bundle --port 8888",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"files": [
+		"./exports",
+		"LICENSE"
+	],
+	"keywords": [],
+	"author": "",
+	"license": "MIT",
+	"dependencies": {
+		"@material-design-icons/svg": "^0.14.10",
+		"@material-symbols/svg-400": "^0.10.2",
+		"@material/web": "^1.0.0-pre.10",
+		"@vandeurenglenn/flex-elements": "^1.2.5",
+		"@vandeurenglenn/lite": "^0.2.32",
+		"custom-element-decorator": "^0.6.0"
+	},
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^25.0.2",
+		"@rollup/plugin-json": "^6.0.0",
+		"@rollup/plugin-node-resolve": "^15.1.0",
+		"@rollup/plugin-terser": "^0.4.3",
+		"@rollup/plugin-typescript": "^11.1.1",
+		"@types/html": "^1.0.1",
+		"@types/node": "^20.3.0",
+		"@web/rollup-plugin-html": "^2.0.0",
+		"chrome-launcher": "^1.0.0",
+		"globby": "^13.1.4",
+		"lighthouse": "^10.4.0",
+		"material-symbols": "^0.10.1",
+		"rimraf": "^5.0.1",
+		"rollup": "^3.24.1",
+		"rollup-plugin-auto-exports": "^1.0.0",
+		"rollup-plugin-material-symbols": "^2.1.0",
+		"tslib": "^2.5.3",
+		"typescript": "^5.1.3"
+	},
+	"exports": {
+		".": {
+			"import": "./exports/lite-elements.js",
+			"types": "./exports/lite-elements.d.ts"
+		},
+		"./banner": {
+			"import": "./exports/banner.js",
+			"types": "./exports/banner/banner.d.ts"
+		},
+		"./banner.js": {
+			"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"
+		},
+		"./card.js": {
+			"import": "./exports/card.js",
+			"types": "./exports/card/card.d.ts"
+		},
+		"./code": {
+			"import": "./exports/code.js",
+			"types": "./exports/demo/code.d.ts"
+		},
+		"./code.js": {
+			"import": "./exports/code.js",
+			"types": "./exports/demo/code.d.ts"
+		},
+		"./demo-elements": {
+			"import": "./exports/demo-elements.js",
+			"types": "./exports/demo-elements.d.ts"
+		},
+		"./demo-elements.js": {
+			"import": "./exports/demo-elements.js",
+			"types": "./exports/demo-elements.d.ts"
+		},
+		"./demo-icons": {
+			"import": "./exports/demo-icons.js",
+			"types": "./exports/demo/demo-icons.d.ts"
+		},
+		"./demo-icons.js": {
+			"import": "./exports/demo-icons.js",
+			"types": "./exports/demo/demo-icons.d.ts"
+		},
+		"./demo-shell": {
+			"import": "./exports/demo-shell.js",
+			"types": "./exports/demo/demo-shell.d.ts"
+		},
+		"./demo-shell.js": {
+			"import": "./exports/demo-shell.js",
+			"types": "./exports/demo/demo-shell.d.ts"
+		},
+		"./demo": {
+			"import": "./exports/demo.js",
+			"types": "./exports/demo/demo.d.ts"
+		},
+		"./demo.js": {
+			"import": "./exports/demo.js",
+			"types": "./exports/demo/demo.d.ts"
+		},
+		"./dial": {
+			"import": "./exports/dial.js",
+			"types": "./exports/time-picker/dial.d.ts"
+		},
+		"./dial.js": {
+			"import": "./exports/dial.js",
+			"types": "./exports/time-picker/dial.d.ts"
+		},
+		"./dialog": {
+			"import": "./exports/dialog.js",
+			"types": "./exports/dialog/dialog.d.ts"
+		},
+		"./dialog.js": {
+			"import": "./exports/dialog.js",
+			"types": "./exports/dialog/dialog.d.ts"
+		},
+		"./divider": {
+			"import": "./exports/divider.js",
+			"types": "./exports/divider/divider.d.ts"
+		},
+		"./divider.js": {
+			"import": "./exports/divider.js",
+			"types": "./exports/divider/divider.d.ts"
+		},
+		"./drawer-button": {
+			"import": "./exports/drawer-button.js",
+			"types": "./exports/drawer/drawer-button.d.ts"
+		},
+		"./drawer-button.js": {
+			"import": "./exports/drawer-button.js",
+			"types": "./exports/drawer/drawer-button.d.ts"
+		},
+		"./drawer-item": {
+			"import": "./exports/drawer-item.js",
+			"types": "./exports/drawer/drawer-item.d.ts"
+		},
+		"./drawer-item.js": {
+			"import": "./exports/drawer-item.js",
+			"types": "./exports/drawer/drawer-item.d.ts"
+		},
+		"./drawer-layout": {
+			"import": "./exports/drawer-layout.js",
+			"types": "./exports/drawer/drawer-layout.d.ts"
+		},
+		"./drawer-layout.js": {
+			"import": "./exports/drawer-layout.js",
+			"types": "./exports/drawer/drawer-layout.d.ts"
+		},
+		"./drawer": {
+			"import": "./exports/drawer.js",
+			"types": "./exports/drawer/drawer.d.ts"
+		},
+		"./drawer.js": {
+			"import": "./exports/drawer.js",
+			"types": "./exports/drawer/drawer.d.ts"
+		},
+		"./dropdown-menu": {
+			"import": "./exports/dropdown-menu.js",
+			"types": "./exports/dropdown/dropdown-menu.d.ts"
+		},
+		"./dropdown-menu.js": {
+			"import": "./exports/dropdown-menu.js",
+			"types": "./exports/dropdown/dropdown-menu.d.ts"
+		},
+		"./dropdown": {
+			"import": "./exports/dropdown.js",
+			"types": "./exports/dropdown/dropdown.d.ts"
+		},
+		"./dropdown.js": {
+			"import": "./exports/dropdown.js",
+			"types": "./exports/dropdown/dropdown.d.ts"
+		},
+		"./elements": {
+			"import": "./exports/elements.js",
+			"types": "./exports/elements.d.ts"
+		},
+		"./elements.js": {
+			"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"
+		},
+		"./hour-field.js": {
+			"import": "./exports/hour-field.js",
+			"types": "./exports/time-picker/hour-field.d.ts"
+		},
+		"./icon-button": {
+			"import": "./exports/icon-button.js",
+			"types": "./exports/button/icon-button.d.ts"
+		},
+		"./icon-button.js": {
+			"import": "./exports/icon-button.js",
+			"types": "./exports/button/icon-button.d.ts"
+		},
+		"./icon-set": {
+			"import": "./exports/icon-set.js",
+			"types": "./exports/icon/icon-set.d.ts"
+		},
+		"./icon-set.js": {
+			"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"
+		},
+		"./input.js": {
+			"import": "./exports/input.js",
+			"types": "./exports/time-picker/input.d.ts"
+		},
+		"./list-item": {
+			"import": "./exports/list-item.js",
+			"types": "./exports/list/list-item.d.ts"
+		},
+		"./list-item.js": {
+			"import": "./exports/list-item.js",
+			"types": "./exports/list/list-item.d.ts"
+		},
+		"./list": {
+			"import": "./exports/list.js",
+			"types": "./exports/list/list.d.ts"
+		},
+		"./list.js": {
+			"import": "./exports/list.js",
+			"types": "./exports/list/list.d.ts"
+		},
+		"./menu": {
+			"import": "./exports/menu.js",
+			"types": "./exports/tabs/menu.d.ts"
+		},
+		"./menu.js": {
+			"import": "./exports/menu.js",
+			"types": "./exports/tabs/menu.d.ts"
+		},
+		"./minute-field": {
+			"import": "./exports/minute-field.js",
+			"types": "./exports/time-picker/minute-field.d.ts"
+		},
+		"./minute-field.js": {
+			"import": "./exports/minute-field.js",
+			"types": "./exports/time-picker/minute-field.d.ts"
+		},
+		"./pages": {
+			"import": "./exports/pages.js",
+			"types": "./exports/pages/pages.d.ts"
+		},
+		"./pages.js": {
+			"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"
+		},
+		"./rail.js": {
+			"import": "./exports/rail.js",
+			"types": "./exports/rail/rail.d.ts"
+		},
+		"./root": {
+			"import": "./exports/root.js",
+			"types": "./exports/root/root.d.ts"
+		},
+		"./root.js": {
+			"import": "./exports/root.js",
+			"types": "./exports/root/root.d.ts"
+		},
+		"./scroll-mixin": {
+			"import": "./exports/scroll-mixin.js",
+			"types": "./exports/mixins/scroll-mixin.d.ts"
+		},
+		"./scroll-mixin.js": {
+			"import": "./exports/scroll-mixin.js",
+			"types": "./exports/mixins/scroll-mixin.d.ts"
+		},
+		"./section": {
+			"import": "./exports/section.js",
+			"types": "./exports/section/section.d.ts"
+		},
+		"./section.js": {
+			"import": "./exports/section.js",
+			"types": "./exports/section/section.d.ts"
+		},
+		"./select-mixin": {
+			"import": "./exports/select-mixin.js",
+			"types": "./exports/mixins/select-mixin.d.ts"
+		},
+		"./select-mixin.js": {
+			"import": "./exports/select-mixin.js",
+			"types": "./exports/mixins/select-mixin.d.ts"
+		},
+		"./selector-mixin": {
+			"import": "./exports/selector-mixin.js",
+			"types": "./exports/mixins/selector-mixin.d.ts"
+		},
+		"./selector-mixin.js": {
+			"import": "./exports/selector-mixin.js",
+			"types": "./exports/mixins/selector-mixin.d.ts"
+		},
+		"./selector": {
+			"import": "./exports/selector.js",
+			"types": "./exports/selector/selector.d.ts"
+		},
+		"./selector.js": {
+			"import": "./exports/selector.js",
+			"types": "./exports/selector/selector.d.ts"
+		},
+		"./supporting-pane": {
+			"import": "./exports/supporting-pane.js",
+			"types": "./exports/supporting-pane/supporting-pane.d.ts"
+		},
+		"./supporting-pane.js": {
+			"import": "./exports/supporting-pane.js",
+			"types": "./exports/supporting-pane/supporting-pane.d.ts"
+		},
+		"./tab": {
+			"import": "./exports/tab.js",
+			"types": "./exports/tabs/tab.d.ts"
+		},
+		"./tab.js": {
+			"import": "./exports/tab.js",
+			"types": "./exports/tabs/tab.d.ts"
+		},
+		"./tabs": {
+			"import": "./exports/tabs.js",
+			"types": "./exports/tabs/tabs.d.ts"
+		},
+		"./tabs.js": {
+			"import": "./exports/tabs.js",
+			"types": "./exports/tabs/tabs.d.ts"
+		},
+		"./text-field": {
+			"import": "./exports/text-field.js",
+			"types": "./exports/text-field/text-field.d.ts"
+		},
+		"./text-field.js": {
+			"import": "./exports/text-field.js",
+			"types": "./exports/text-field/text-field.d.ts"
+		},
+		"./theme": {
+			"import": "./exports/theme.js",
+			"types": "./exports/theme/theme.d.ts"
+		},
+		"./theme.js": {
+			"import": "./exports/theme.js",
+			"types": "./exports/theme/theme.d.ts"
+		},
+		"./time-picker": {
+			"import": "./exports/time-picker.js",
+			"types": "./exports/time-picker/time-picker.d.ts"
+		},
+		"./time-picker.js": {
+			"import": "./exports/time-picker.js",
+			"types": "./exports/time-picker/time-picker.d.ts"
+		},
+		"./title": {
+			"import": "./exports/title.js",
+			"types": "./exports/typography/title.d.ts"
+		},
+		"./title.js": {
+			"import": "./exports/title.js",
+			"types": "./exports/typography/title.d.ts"
+		},
+		"./toggle-button": {
+			"import": "./exports/toggle-button.js",
+			"types": "./exports/toggle/toggle-button.d.ts"
+		},
+		"./toggle-button.js": {
+			"import": "./exports/toggle-button.js",
+			"types": "./exports/toggle/toggle-button.d.ts"
+		},
+		"./toggle": {
+			"import": "./exports/toggle.js",
+			"types": "./exports/toggle/toggle.d.ts"
+		},
+		"./toggle.js": {
+			"import": "./exports/toggle.js",
+			"types": "./exports/toggle/toggle.d.ts"
+		},
+		"./top-app-bar": {
+			"import": "./exports/top-app-bar.js",
+			"types": "./exports/bar/top-app-bar.d.ts"
+		},
+		"./top-app-bar.js": {
+			"import": "./exports/top-app-bar.js",
+			"types": "./exports/bar/top-app-bar.d.ts"
+		},
+		"./types": {
+			"import": "./exports/types.js",
+			"types": "./exports/types.d.ts"
+		},
+		"./types.js": {
+			"import": "./exports/types.js",
+			"types": "./exports/types.d.ts"
+		},
+		"./typography": {
+			"import": "./exports/typography.js",
+			"types": "./exports/typography/typography.d.ts"
+		},
+		"./typography.js": {
+			"import": "./exports/typography.js",
+			"types": "./exports/typography/typography.d.ts"
+		}
+	}
+}