@vandeurenglenn/lite-elements 0.3.33 → 0.3.35

package/exports/bundle/dialog.js

@@ -121,21 +121,21 @@ import{_ as e,a as t,e as s}from"./custom-element-BOdKJYdz.js";import{t as o,j a
         <custom-elevation level=${this.fullscreen?0:3}></custom-elevation>
         <slot name="hero-icon"></slot>
         <slot name="supporting-text"></slot>
-        <slot name="header">          
-          <flex-row class="header" center></flex-row>
+        <slot name="header">
+          <flex-row class="header" center>
             <flex-row center style="width: 100%">
               <slot name="header-start">
                 ${this.fullscreen?n`<custom-button @click=${this._close}
-                        ><custom-icon slot="icon">close</custom-icon></custom-button
-                      >`:""}
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                    >`:""}
               </slot>
               <slot name="title"></slot>
               <flex-it></flex-it>
               <slot name="header-end">
                 ${this.fullscreen?n`<slot name="actions"></slot>`:""}
                 ${this.fullscreen?"":n`<custom-button @click=${this._close}
-                        ><custom-icon slot="icon">close</custom-icon></custom-button
-                      >`}
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                    >`}
               </slot>
             </flex-row>
           </flex-row>

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{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{CustomNotification}from"./notification.js";export{CustomNotifications}from"./notifications.js";import"./custom-element-BOdKJYdz.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";import"./property-DyuvULjI.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{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{CustomNotification}from"./notification.js";export{CustomNotifications}from"./notifications.js";import"./custom-element-BOdKJYdz.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";import"./property-DyuvULjI.js";

package/exports/bundle/fab.js

@@ -0,0 +1,146 @@
+import{_ as e,a as t,e as o}from"./custom-element-BOdKJYdz.js";import{t as a,j as r,v as s,D as l}from"./property-Do5-bKhz.js";import"./elevation.js";let n=(()=>{let n,i,c,d=[o("custom-fab")],y=[],m=l,p=[],v=[];return class extends m{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;c=[a({attribute:"type",reflect:!0})],e(this,null,c,{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,v),e(null,n={value:i},d,{kind:"class",name:i.name,metadata:t},null,y),i=n.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,p,"normal");get type(){return this.#e}set type(e){this.#e=e}static styles=[r`
+      :host {
+        color: var(--custom-fab-color, --md-sys-color-on-background);
+        display: flex;
+
+        height: 56px;
+        width: 56px;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+        position: relative;
+        pointer-events: auto;
+        cursor: pointer;
+        box-sizing: border-box;
+        padding: 16px;
+
+        --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;
+      }
+
+      ::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);
+      }
+
+      custom-elevation {
+        --elevation-level: 1;
+      }
+
+      :host([type='normal']) button {
+        align-items: center;
+        justify-content: center;
+      }
+
+      :host([type='extended']) button {
+        align-items: center;
+      }
+
+      :host([type='extended']) {
+        min-width: 80px;
+        width: fit-content;
+      }
+
+      :not([name='icon']) ::slotted(*) {
+        margin-left: 24px;
+        margin-right: 24px;
+      }
+
+      :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;
+      }
+    `];render(){return s`
+      <button>
+        <custom-elevation></custom-elevation>
+        <slot name="icon"></slot>
+        <slot></slot>
+      </button>
+    `}constructor(){super(...arguments),t(this,v)}static{t(i,y)}},i})();export{n as CustomButton};

package/exports/bundle/icon.js

@@ -13,4 +13,4 @@ import{_ as s,a as t,e}from"./custom-element-BOdKJYdz.js";import{L as o}from"./i
         width: inherit;
         pointer-events: none;
       }
-    `];connectedCallback(){this.setName=this.getAttribute("set-name")||"icons"}render(){return c` ${this._icon} `}constructor(){super(...arguments),t(this,k)}static{t(r,g)}},r})();export{r as CustomIcon,r as Icon};
+    `];connectedCallback(){this.setName=this.getAttribute("set-name")||"icons"}render(){return c` ${this._icon} `}constructor(){super(...arguments),t(this,k)}static{t(r,g)}},r})();export{r as CustomIcon};

package/exports/bundle/upload-image.js

@@ -1,4 +1,4 @@
-import{b as e,_ as t,a as r,e as o}from"./custom-element-BOdKJYdz.js";import{t as a,j as n,v as l,D as s}from"./property-Do5-bKhz.js";import{t as d}from"./query-D-PG8Oyh.js";import{n as c,s as u,x as p,i as h,t as v,w as m,T as f,j as b}from"./property-DyuvULjI.js";import{DeviceApi as g}from"./device.js";import"@vandeurenglenn/lite-elements/dialog.js";import"@vandeurenglenn/lite-elements/icon.js";import"@vandeurenglenn/lite-elements/tabs.js";import"@vandeurenglenn/lite-elements/tab.js";import"@vandeurenglenn/lite-elements/selector.js";import"@vandeurenglenn/lite-elements/pages.js";import{FileReaderMixin as x}from"./file-reader-mixin.js";
+import{b as e,_ as t,a as r,e as o}from"./custom-element-BOdKJYdz.js";import{t as a,j as n,v as l,D as s}from"./property-Do5-bKhz.js";import{t as d}from"./query-D-PG8Oyh.js";import{n as c,s as u,x as p,i as h,t as v,w as m,T as f,j as b}from"./property-DyuvULjI.js";import{DeviceApi as g}from"./device.js";import"./dialog.js";import"./icon.js";import"./tabs.js";import"./tab.js";import"./selector.js";import"./pages.js";import{FileReaderMixin as x}from"./file-reader-mixin.js";import"./elevation.js";import"./index-B3uz3f8C.js";import"./selector-mixin.js";import"./select-mixin.js";
 /**
  * @license
  * Copyright 2017 Google LLC

package/exports/dialog/dialog.d.ts

@@ -0,0 +1,15 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+import '../elevation/elevation.js';
+import '../icon/icon.js';
+export declare class CustomDialog extends LiteElement {
+    accessor open: boolean;
+    accessor fullscreen: boolean;
+    accessor hasActions: boolean;
+    accessor hasHeader: boolean;
+    accessor hasHero: boolean;
+    connectedCallback(): void;
+    onChange(propertyKey: any, value: any): void;
+    private _close;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/dialog.js

@@ -215,14 +215,14 @@ let CustomDialog = (() => {
         <custom-elevation level=${this.fullscreen ? 0 : 3}></custom-elevation>
         <slot name="hero-icon"></slot>
         <slot name="supporting-text"></slot>
-        <slot name="header">          
-          <flex-row class="header" center></flex-row>
+        <slot name="header">
+          <flex-row class="header" center>
             <flex-row center style="width: 100%">
               <slot name="header-start">
                 ${this.fullscreen
                 ? html `<custom-button @click=${this._close}
-                        ><custom-icon slot="icon">close</custom-icon></custom-button
-                      >`
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                    >`
                 : ''}
               </slot>
               <slot name="title"></slot>
@@ -232,8 +232,8 @@ let CustomDialog = (() => {
                 ${this.fullscreen
                 ? ''
                 : html `<custom-button @click=${this._close}
-                        ><custom-icon slot="icon">close</custom-icon></custom-button
-                      >`}
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                    >`}
               </slot>
             </flex-row>
           </flex-row>

package/exports/elements.js

@@ -11,7 +11,7 @@ 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 { CustomIcon } from './icon.js';
 export { CustomTypography } from './typography.js';
 export { CustomPane } from './pane.js';
 export { CustomSupportingPane } from './supporting-pane.js';

package/exports/elevation/elevation.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class CustomElevation extends LiteElement {
+    accessor level: number;
+    onChange(propertyKey: any, value: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/fab/fab.d.ts

@@ -0,0 +1,7 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+import '../elevation/elevation.js';
+export declare class CustomButton extends LiteElement {
+    accessor type: 'normal' | 'extended';
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/fab.js

@@ -0,0 +1,189 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
+import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import './elevation.js';
+
+let CustomButton = (() => {
+    let _classDecorators = [customElement('custom-fab')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    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;
+            _type_decorators = [property({ attribute: 'type', reflect: true })];
+            __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 });
+        }
+        #type_accessor_storage = __runInitializers(this, _type_initializers, 'normal');
+        get type() { return this.#type_accessor_storage; }
+        set type(value) { this.#type_accessor_storage = value; }
+        static styles = [
+            css `
+      :host {
+        color: var(--custom-fab-color, --md-sys-color-on-background);
+        display: flex;
+
+        height: 56px;
+        width: 56px;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+        position: relative;
+        pointer-events: auto;
+        cursor: pointer;
+        box-sizing: border-box;
+        padding: 16px;
+
+        --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;
+      }
+
+      ::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);
+      }
+
+      custom-elevation {
+        --elevation-level: 1;
+      }
+
+      :host([type='normal']) button {
+        align-items: center;
+        justify-content: center;
+      }
+
+      :host([type='extended']) button {
+        align-items: center;
+      }
+
+      :host([type='extended']) {
+        min-width: 80px;
+        width: fit-content;
+      }
+
+      :not([name='icon']) ::slotted(*) {
+        margin-left: 24px;
+        margin-right: 24px;
+      }
+
+      :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;
+      }
+    `
+        ];
+        render() {
+            return html `
+      <button>
+        <custom-elevation></custom-elevation>
+        <slot name="icon"></slot>
+        <slot></slot>
+      </button>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _type_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomButton };

package/exports/icon/icon.d.ts

@@ -0,0 +1,11 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class CustomIcon extends LiteElement {
+    accessor host: any;
+    accessor icon: string;
+    accessor setName: any;
+    accessor _icon: any;
+    onChange(propertyKey: any, value: any): void;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/icon.js

@@ -3,7 +3,7 @@ import PubSub from '@vandeurenglenn/little-pubsub';
 import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
 
 globalThis.pubsub = globalThis.pubsub || new PubSub(true);
-let Icon = (() => {
+let CustomIcon = (() => {
     let _classDecorators = [customElement('custom-icon')];
     let _classDescriptor;
     let _classExtraInitializers = [];
@@ -100,4 +100,4 @@ let Icon = (() => {
     return _classThis;
 })();
 
-export { Icon as CustomIcon, Icon };
+export { CustomIcon };

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

@@ -0,0 +1,32 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class SelectBase extends LiteElement {
+    #private;
+    currentSelected: HTMLElement;
+    connectedCallback(): void;
+    get multi(): boolean;
+    set multi(value: boolean);
+    get defaultSelected(): string | 0;
+    set selected(value: string | number | HTMLElement | string[] | HTMLElement[]);
+    get selected(): string | number | HTMLElement | string[] | HTMLElement[];
+    get slotted(): HTMLSlotElement | this;
+    get attrForSelected(): string;
+    /**
+     * get the attribute used to set selected
+     *
+     * @example
+     * <custom-selector attr-for-selected="select">
+     *  <li select="1"></li>
+     *  <li select="2"></li>
+     * </custom-selector>
+     */
+    set attrForSelected(value: string);
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    /**
+     * @param {string|number|HTMLElement} selected
+     */
+    select(selected: any): void;
+    next(): void;
+    previous(): void;
+    getIndexFor(element: any): number;
+}
+export declare function SelectMixin<TBase extends CustomElementConstructor>(Base: TBase): typeof SelectBase;

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

@@ -0,0 +1,8 @@
+import { SelectBase } from './select-mixin.js';
+export declare class SelectorBase extends SelectBase {
+    #private;
+    constructor();
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+}
+export declare function SelectorMixin<TBase extends CustomElementConstructor>(Base: TBase): typeof SelectorBase;

package/exports/pages/pages.d.ts

@@ -0,0 +1,14 @@
+import { SelectBase } from '../mixins/select-mixin.js';
+/**
+ * @extends HTMLElement
+ */
+export declare class CustomPages extends SelectBase {
+    connectedCallback(): Promise<void>;
+    isEvenNumber(number: any): boolean;
+    /**
+     * set animation class when slot changes
+     */
+    slotchange(): void;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/selector/selector.d.ts

@@ -0,0 +1,5 @@
+import { SelectorBase } from '../mixins/selector-mixin.js';
+export declare class CustomSelector extends SelectorBase {
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/tabs/tab.d.ts

@@ -0,0 +1,4 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class CustomTab extends LiteElement {
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/tabs/tabs.d.ts

@@ -0,0 +1,5 @@
+import { SelectorBase } from '../mixins/selector-mixin.js';
+import './tab.js';
+export declare class CustomTabs extends SelectorBase {
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/upload/upload-image.d.ts

@@ -2,12 +2,12 @@ import '@material/web/button/filled-tonal-button.js';
 import '@material/web/textfield/outlined-text-field.js';
 import { DeviceApi } from './../apis/device.js';
 import '@material/web/progress/circular-progress.js';
-import '@vandeurenglenn/lite-elements/dialog.js';
-import '@vandeurenglenn/lite-elements/icon.js';
-import '@vandeurenglenn/lite-elements/tabs.js';
-import '@vandeurenglenn/lite-elements/tab.js';
-import '@vandeurenglenn/lite-elements/selector.js';
-import '@vandeurenglenn/lite-elements/pages.js';
+import './../dialog/dialog.js';
+import './../icon/icon.js';
+import './../tabs/tabs.js';
+import './../tabs/tab.js';
+import './../selector/selector.js';
+import './../pages/pages.js';
 declare type actionResult = {
     action: string;
     fields: [];

package/exports/upload-image.js

@@ -5,13 +5,17 @@ import '@material/web/button/filled-tonal-button.js';
 import '@material/web/textfield/outlined-text-field.js';
 import { DeviceApi } from './device.js';
 import '@material/web/progress/circular-progress.js';
-import '@vandeurenglenn/lite-elements/dialog.js';
-import '@vandeurenglenn/lite-elements/icon.js';
-import '@vandeurenglenn/lite-elements/tabs.js';
-import '@vandeurenglenn/lite-elements/tab.js';
-import '@vandeurenglenn/lite-elements/selector.js';
-import '@vandeurenglenn/lite-elements/pages.js';
+import './dialog.js';
+import './icon.js';
+import './tabs.js';
+import './tab.js';
+import './selector.js';
+import './pages.js';
 import { FileReaderMixin } from './file-reader-mixin.js';
+import './elevation.js';
+import '@vandeurenglenn/little-pubsub';
+import './selector-mixin.js';
+import './select-mixin.js';
 
 let CustomUploadImage = (() => {
     let _classDecorators = [customElement('custom-upload-image')];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.33",
+	"version": "0.3.35",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {
@@ -129,6 +129,14 @@
 			"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"
@@ -193,6 +201,22 @@
 			"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"
+		},
+		"./fab": {
+			"import": "./exports/fab.js",
+			"types": "./exports/fab/fab.d.ts"
+		},
+		"./fab.js": {
+			"import": "./exports/fab.js",
+			"types": "./exports/fab/fab.d.ts"
+		},
 		"./file-reader-mixin": {
 			"import": "./exports/file-reader-mixin.js",
 			"types": "./exports/mixins/file-reader-mixin.d.ts"
@@ -225,6 +249,14 @@
 			"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"
@@ -281,6 +313,14 @@
 			"import": "./exports/notifications.js",
 			"types": "./exports/notification/notifications.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"
@@ -321,6 +361,30 @@
 			"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"
+		},
 		"./summary-mirror": {
 			"import": "./exports/summary-mirror.js",
 			"types": "./exports/summary/summary-mirror.d.ts"
@@ -345,6 +409,22 @@
 			"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"