@vandeurenglenn/lite-elements 0.3.77 → 0.3.79

package/exports/bundle/button.css.js

@@ -1,11 +1,13 @@
 import{i as e}from"./dark-mode-m29sAj4H.js";var o=e`
   :host {
     --custom-button-border-radius: var(--md-sys-shape-corner-large);
+
     color: var(--custom-button-color, --md-sys-color-on-background);
     display: flex;
 
     height: 40px;
     border-radius: var(--custom-button-border-radius);
+
     position: relative;
     pointer-events: auto;
     cursor: pointer;
@@ -36,7 +38,7 @@ import{i as e}from"./dark-mode-m29sAj4H.js";var o=e`
 
   .label,
   ::slotted(*) {
-    font-family: var(--md-sys-typescale-label-large-font-family-name);
+    font-family: inherit;
     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);

package/exports/bundle/demo-shell.js

@@ -1,4 +1,4 @@
-import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as i}from"./dark-mode-m29sAj4H.js";import{t as m}from"./query-DCTzLeFk.js";import{e as a}from"./custom-element-B_TPyPQO.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.js";import"./notifications.js";import"./code.js";import"./elevation.js";import"./button.css.js";import"./it-Dft_Rjy-.js";import"./selector-mixin.js";import"./select-mixin.js";import"./scroll-mixin.js";import"./column-CLFZeRaw.js";import"./row-DZm4UH0H.js";import"./tab.js";import"./input.js";import"./property-CMTrOHQk.js";let c=(()=>{let c,u,n,r,l=[a("demo-shell")],p=[],d=o,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=[m("custom-selector")],r=[m("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}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as i}from"./dark-mode-m29sAj4H.js";import{t as m}from"./query-DCTzLeFk.js";import{e as a}from"./custom-element-B_TPyPQO.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.js";import"./notifications.js";import"./code.js";import"./elevation.js";import"./button.css.js";import"./it-Dft_Rjy-.js";import"./selector-mixin.js";import"./select-mixin.js";import"./scroll-mixin.js";import"./column-CLFZeRaw.js";import"./row-DZm4UH0H.js";import"./tab.js";import"./input.js";import"./property-CMTrOHQk.js";let c=(()=>{let c,u,n,r,l=[a("demo-shell")],p=[],d=o,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=[m("custom-selector")],r=[m("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}firstRender(){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%;
@@ -76,7 +76,7 @@ import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as i}f
         <flex-row slot="top-app-bar-end">
           <custom-theme-mode></custom-theme-mode>
           <custom-button>
-            <custom-icon slot="icon">more_vert</custom-icon>
+            <custom-icon icon="more_vert" slot="icon"></custom-icon>
           </custom-button>
         </flex-row>
 
@@ -332,7 +332,7 @@ import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as i}f
 
               <custom-tabs round>
                 <custom-tab>
-                  <custom-icon>home</custom-icon>
+                  <custom-icon icon="home"></custom-icon>
                   home
                 </custom-tab>
                 <custom-tab>about</custom-tab>
@@ -341,7 +341,9 @@ import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as i}f
 
             <demo-section route="dialog">
               <flex-container>
-                <custom-button class="fullscreen-dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
+                <custom-button class="fullscreen-dialog"
+                  ><custom-icon slot="icon" icon="menu"></custom-icon
+                ></custom-button>
                 <custom-dialog fullscreen>
                   <span slot="title">title</span>
                   <p>
@@ -517,7 +519,7 @@ import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as i}f
               </custom-list-item>
             </demo-section>
             <demo-section route="toggle">
-              <custom-toggle togglers='["check_box","check_box_outline_blank", "info"]'></custom-toggle>
+              <custom-toggle .togglers=${"['check_box', 'check_box_outline_blank', 'info']"}></custom-toggle>
 
               <custom-button label="next"></custom-button>
 

package/exports/bundle/menu.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s,i as l,x as o}from"./dark-mode-m29sAj4H.js";import{e as c}from"./custom-element-B_TPyPQO.js";import"./dropdown.js";import"./selector.js";import"./selector-mixin.js";import"./select-mixin.js";let r=(()=>{let r,i,a=[c("custom-menu")],n=[],d=s;return class extends d{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;e(null,r={value:i},a,{kind:"class",name:i.name,metadata:t},null,n),i=r.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}get selector(){return this.shadowRoot.querySelector("custom-selector")}set selected(e){this.selector.selected=e}get selected(){return this.selector.selected}select(e){this.selector.select(e)}#e=({detail:e})=>{this.dispatchEvent(new CustomEvent("selected",{detail:e}))};connectedCallback(){this.selector.addEventListener("selected",this.#e)}disconnectedCallback(){this.selector.removeEventListener("selected",this.#e)}static styles=[l`
+import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s,i as l,x as o}from"./dark-mode-m29sAj4H.js";import{e as c}from"./custom-element-B_TPyPQO.js";import"./dropdown.js";import"./selector.js";import"./selector-mixin.js";import"./select-mixin.js";let r=(()=>{let r,i,a=[c("custom-menu")],n=[],d=s;return class extends d{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;e(null,r={value:i},a,{kind:"class",name:i.name,metadata:t},null,n),i=r.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}get selector(){return this.shadowRoot.querySelector("custom-selector")}set selected(e){this.selector.selected=e}get selected(){return this.selector.selected}select(e){this.selector.select(e)}#e=({detail:e})=>{this.dispatchEvent(new CustomEvent("selected",{detail:e}))};firstRender(){this.selector.addEventListener("selected",this.#e)}disconnectedCallback(){this.selector.removeEventListener("selected",this.#e)}static styles=[l`
       :host {
         display: flex;
         flex-direction: column;

package/exports/bundle/scroll-mixin.js

@@ -1 +1 @@
-const l=l=>class ScrollMixin extends l{set scrolling(l){l?this.setAttribute("scrolling",""):this.removeAttribute("scrolling")}get scrolling(){return this.hasAttribute("scrolling")}scrollElement=this;#l=()=>{this.isScrolling?clearTimeout(this.isScrolling):document.dispatchEvent(new CustomEvent("custom-scroll",{detail:{scrolling:0!==this.scrollTop}})),this.isScrolling=setTimeout((()=>{this.scrolling=0!==this.scrollTop,document.dispatchEvent(new CustomEvent("custom-scroll",{detail:{scrolling:this.scrolling}})),this.isScrolling=void 0}),this.scrollTimeout)};async connectedCallback(l={scrollElement:void 0}){super.connectedCallback&&super.connectedCallback(),await this.updateComplete,this.scrollElement=this.shadowRoot.querySelector(l.scrollElement)||this,this.scrollTimeout=100,this.scrollElement.addEventListener("scroll",this.#l)}disconnectedCallback(){super.disconnectedCallback&&super.disconnectedCallback(),this.scrollElement.removeEventListener("scroll",this.#l)}};export{l as ScrollMixin};
+const l=l=>class ScrollMixin extends l{set scrolling(l){l?this.setAttribute("scrolling",""):this.removeAttribute("scrolling")}get scrolling(){return this.hasAttribute("scrolling")}scrollElement;#l=()=>{this.isScrolling?clearTimeout(this.isScrolling):document.dispatchEvent(new CustomEvent("custom-scroll",{detail:{scrolling:0!==this.scrollTop}})),this.isScrolling=setTimeout((()=>{this.scrolling=0!==this.scrollTop,document.dispatchEvent(new CustomEvent("custom-scroll",{detail:{scrolling:this.scrolling}})),this.isScrolling=void 0}),this.scrollTimeout)};firstRender(){super.firstRender?.(),this.scrollElement=this.scrollElement?this.shadowRoot.querySelector(this.scrollElement):this,this.scrollTimeout=100,this.scrollElement.addEventListener("scroll",this.#l)}disconnectedCallback(){super.disconnectedCallback&&super.disconnectedCallback(),this.scrollElement.removeEventListener("scroll",this.#l)}};export{l as ScrollMixin};

package/exports/bundle/section.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as a}from"./dark-mode-m29sAj4H.js";import{e as l}from"./custom-element-B_TPyPQO.js";import"./section2.js";import"./code.js";import"./scroll-mixin.js";import"./elevation.js";let c=(()=>{let c,n,r=[l("demo-section")],i=[],m=o;return class extends m{static{n=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;e(null,c={value:n},r,{kind:"class",name:n.name,metadata:t},null,i),n=c.value,t&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}async connectedCallback(){const e=this.shadowRoot.querySelector("slot").assignedElements();for(const o of e){const e=document.createElement("demo-code");e.code=await(t=o.outerHTML,t.replace(/(\  <\/(?=[^<\/]*$))/g,"<")),o.after(e)}var t}static styles=[s`
+import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as a}from"./dark-mode-m29sAj4H.js";import{e as r}from"./custom-element-B_TPyPQO.js";import"./section2.js";import"./code.js";import"./scroll-mixin.js";import"./elevation.js";let l=(()=>{let l,i,n=[r("demo-section")],c=[],m=o;return class extends m{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;e(null,l={value:i},n,{kind:"class",name:i.name,metadata:t},null,c),i=l.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}async firstRender(){const e=this.shadowRoot.querySelector("slot").assignedElements();for(const o of e){const e=document.createElement("demo-code");e.code=await(t=o.outerHTML,t.replace(/(\  <\/(?=[^<\/]*$))/g,"<")),o.after(e)}var t}static styles=[s`
       :host {
         display: flex;
         flex-direction: column;
@@ -8,4 +8,4 @@ import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as a}f
       <custom-section>
         <slot></slot>
       </custom-section>
-    `}static{t(n,i)}},n})();export{c as DemoSection};
+    `}static{t(i,c)}},i})();export{l as DemoSection};

package/exports/button.css.js

@@ -3,11 +3,13 @@ import { css } from '@vandeurenglenn/lite';
 var style = css `
   :host {
     --custom-button-border-radius: var(--md-sys-shape-corner-large);
+
     color: var(--custom-button-color, --md-sys-color-on-background);
     display: flex;
 
     height: 40px;
     border-radius: var(--custom-button-border-radius);
+
     position: relative;
     pointer-events: auto;
     cursor: pointer;
@@ -38,7 +40,7 @@ var style = css `
 
   .label,
   ::slotted(*) {
-    font-family: var(--md-sys-typescale-label-large-font-family-name);
+    font-family: inherit;
     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);

package/exports/demo/demo-shell.d.ts

@@ -4,7 +4,7 @@ import './../elements.js';
 export declare class DemoShell extends LiteElement {
     accessor selector: any;
     accessor pages: any;
-    connectedCallback(): void;
+    firstRender(): void;
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/demo/section.d.ts

@@ -2,7 +2,7 @@ import { LiteElement } from '@vandeurenglenn/lite';
 import '../section/section.js';
 import './code.js';
 export declare class DemoSection extends LiteElement {
-    connectedCallback(): Promise<void>;
+    firstRender(): Promise<void>;
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/demo-shell.js

@@ -81,7 +81,7 @@ let DemoShell = (() => {
         #pages_accessor_storage = (__runInitializers(this, _selector_extraInitializers), __runInitializers(this, _pages_initializers, void 0));
         get pages() { return this.#pages_accessor_storage; }
         set pages(value) { this.#pages_accessor_storage = value; }
-        connectedCallback() {
+        firstRender() {
             const onSelected = async ({ detail }) => {
                 document.dispatchEvent(new CustomEvent('custom-scroll', { detail: { scrolling: false } }));
                 this.pages.select(detail);
@@ -179,7 +179,7 @@ let DemoShell = (() => {
         <flex-row slot="top-app-bar-end">
           <custom-theme-mode></custom-theme-mode>
           <custom-button>
-            <custom-icon slot="icon">more_vert</custom-icon>
+            <custom-icon icon="more_vert" slot="icon"></custom-icon>
           </custom-button>
         </flex-row>
 
@@ -435,7 +435,7 @@ let DemoShell = (() => {
 
               <custom-tabs round>
                 <custom-tab>
-                  <custom-icon>home</custom-icon>
+                  <custom-icon icon="home"></custom-icon>
                   home
                 </custom-tab>
                 <custom-tab>about</custom-tab>
@@ -444,7 +444,9 @@ let DemoShell = (() => {
 
             <demo-section route="dialog">
               <flex-container>
-                <custom-button class="fullscreen-dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
+                <custom-button class="fullscreen-dialog"
+                  ><custom-icon slot="icon" icon="menu"></custom-icon
+                ></custom-button>
                 <custom-dialog fullscreen>
                   <span slot="title">title</span>
                   <p>
@@ -620,7 +622,7 @@ let DemoShell = (() => {
               </custom-list-item>
             </demo-section>
             <demo-section route="toggle">
-              <custom-toggle togglers='["check_box","check_box_outline_blank", "info"]'></custom-toggle>
+              <custom-toggle .togglers=${"['check_box', 'check_box_outline_blank', 'info']"}></custom-toggle>
 
               <custom-button label="next"></custom-button>
 

package/exports/menu/menu.d.ts

@@ -8,7 +8,7 @@ export declare class CustomMenu extends LiteElement {
     set selected(value: string | number | HTMLElement | string[] | HTMLElement[]);
     get selected(): string | number | HTMLElement | string[] | HTMLElement[];
     select(selected: any): void;
-    connectedCallback(): void;
+    firstRender(): void;
     disconnectedCallback(): void;
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;

package/exports/menu.js

@@ -34,7 +34,7 @@ let CustomMenu = (() => {
         #onselected = ({ detail }) => {
             this.dispatchEvent(new CustomEvent('selected', { detail }));
         };
-        connectedCallback() {
+        firstRender() {
             this.selector.addEventListener('selected', this.#onselected);
         }
         disconnectedCallback() {

package/exports/mixins/scroll-mixin.d.ts

@@ -2,11 +2,9 @@ export declare const ScrollMixin: (Base: any) => {
     new (): {
         [x: string]: any;
         scrolling: any;
-        scrollElement: /*elided*/ any;
+        scrollElement: any;
         "__#2@#onscroll": () => void;
-        connectedCallback(options?: {
-            scrollElement: undefined | string;
-        }): Promise<void>;
+        firstRender(): void;
         disconnectedCallback(): void;
     };
     [x: string]: any;

package/exports/scroll-mixin.js

@@ -8,7 +8,7 @@ const ScrollMixin = (Base) => class ScrollMixin extends Base {
     get scrolling() {
         return this.hasAttribute('scrolling');
     }
-    scrollElement = this;
+    scrollElement;
     #onscroll = () => {
         if (this.isScrolling)
             clearTimeout(this.isScrolling);
@@ -20,10 +20,9 @@ const ScrollMixin = (Base) => class ScrollMixin extends Base {
             this.isScrolling = undefined;
         }, this.scrollTimeout);
     };
-    async connectedCallback(options = { scrollElement: undefined }) {
-        super.connectedCallback && super.connectedCallback();
-        await this.updateComplete;
-        this.scrollElement = this.shadowRoot.querySelector(options.scrollElement) || this;
+    firstRender() {
+        super.firstRender?.();
+        this.scrollElement = this.scrollElement ? this.shadowRoot.querySelector(this.scrollElement) : this;
         this.scrollTimeout = 100;
         this.scrollElement.addEventListener('scroll', this.#onscroll);
     }

package/exports/section/section.d.ts

@@ -3,11 +3,9 @@ declare const CustomSection_base: {
     new (): {
         [x: string]: any;
         scrolling: any;
-        scrollElement: /*elided*/ any;
+        scrollElement: any;
         "__#2@#onscroll": () => void;
-        connectedCallback(options?: {
-            scrollElement: undefined | string;
-        }): Promise<void>;
+        firstRender(): void;
         disconnectedCallback(): void;
     };
     [x: string]: any;

package/exports/section.js

@@ -20,7 +20,7 @@ let DemoSection = (() => {
             _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        async connectedCallback() {
+        async firstRender() {
             const assignedElements = this.shadowRoot.querySelector('slot').assignedElements();
             for (const element of assignedElements) {
                 const code = document.createElement('demo-code');

package/package.json

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