@vandeurenglenn/lite-elements 0.3.67 → 0.3.69

package/exports/button.css.js

@@ -0,0 +1,217 @@
+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;
+    overflow: hidden;
+
+    --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: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: relative;
+    pointer-events: none;
+    font-size: inherit;
+  }
+
+  .label,
+  ::slotted(*) {
+    font-family: var(--md-sys-typescale-label-large-font-family-name);
+    font-style: var(--md-sys-typescale-label-large-font-family-style);
+    font-weight: var(--md-sys-typescale-label-large-font-weight);
+    font-size: var(--md-sys-typescale-label-large-font-size);
+    letter-spacing: var(--md-sys-typescale-label-large-tracking);
+    line-height: var(--md-sys-typescale-label-large-height);
+    text-transform: var(--md-sys-typescale-label-large-text-transform);
+    text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+  }
+
+  :host([type='filled']) {
+    background: var(--md-sys-color-primary);
+  }
+
+  :host([type='filled']),
+  :host([type='filled']) ::slotted(*) {
+    color: var(--md-sys-color-on-primary);
+    fill: var(--md-sys-color-on-primary);
+  }
+
+  :host([type='outlined']) {
+    border: solid 1px;
+    border-color: var(--md-sys-color-outline);
+    background: var(--md-sys-color-surface);
+  }
+
+  :host([type='outlined']),
+  :host([type='outlined']) ::slotted(*) {
+    color: var(--md-sys-color-on-surface);
+    fill: var(--md-sys-color-on-surface);
+  }
+
+  :host([type='elevated']) {
+    background: var(--md-sys-color-surface-container-low);
+  }
+
+  :host([type='elevated']),
+  :host([type='elevated']) ::slotted(*) {
+    color: var(--md-sys-color-primary);
+    fill: var(--md-sys-color-primary);
+  }
+
+  :host([type='tertiary']) {
+    background: var(--md-sys-color-tertiary);
+  }
+
+  :host([type='tertiary']),
+  :host([type='tertiary']) ::slotted(*) {
+    color: var(--md-sys-color-on-tertiary);
+    fill: var(--md-sys-color-on-tertiary);
+  }
+
+  :host([type='tonal']) {
+    background: var(--md-sys-color-secondary-container);
+  }
+
+  :host([type='tonal']),
+  :host([type='tonal']) ::slotted(*) {
+    color: var(--md-sys-color-on-secondary-container);
+    fill: var(--md-sys-color-on-secondary-container);
+  }
+
+  custom-elevation {
+    --md-elevation-level: var(--elevation-level);
+  }
+
+  :host([type='elevated']) custom-elevation {
+    --elevation-level: 1;
+  }
+
+  :host([type='filled']),
+  :host([type='outlined']),
+  :host([type='text']),
+  :host([type='tonal']) {
+    --elevation-level: 0;
+  }
+
+  :host([has-label]) .label {
+    padding-left: 24px;
+    padding-right: 24px;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    flex: 1;
+    text-align: center;
+  }
+
+  :host([has-icon]:not([has-label])) {
+    border-radius: 50%;
+    width: 40px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :host([has-icon][has-label]) .label {
+    padding-left: 8px;
+    padding-right: 24px;
+    text-align: end;
+  }
+  :host([has-icon][has-label]) slot[name='icon']::slotted(*) {
+    padding-left: 16px;
+  }
+
+  :host([disabled]) .label,
+  :host([disabled]) slot[name='icon']::slotted(*) {
+    opacity: 0.28;
+  }
+  .label {
+    font-size: inherit;
+  }
+
+  ::slotted(*) {
+    pointer-events: none;
+  }
+
+  :host([type='elevated']:focus),
+  :host([type='elevated']:hover) {
+    --elevation-level: 2;
+  }
+
+  :host(:active) {
+    --elevation-level: 0;
+  }
+
+  button * {
+    pointer-events: none;
+  }
+  .hover {
+    position: absolute;
+    inset: 0;
+    background-color: var(--md-sys-color-primary);
+    opacity: 0;
+    transition: opacity 200ms;
+    border-radius: var(--custom-button-border-radius);
+  }
+
+  :host(:focus) .hover,
+  :host(:hover) .hover {
+    opacity: 0.1;
+  }
+
+  :host(:active) .hover {
+    opacity: 0.2;
+  }
+
+  :host([type='filled']:focus) .hover,
+  :host([type='filled']:hover) .hover {
+    background-color: var(--md-sys-color-on-primary);
+    opacity: 0.1;
+  }
+
+  :host([type='filled']:active) .hover {
+    opacity: 0.2;
+  }
+
+  :host([type='tertiary']:focus) .hover,
+  :host([type='tertiary']:hover) .hover {
+    background-color: var(--md-sys-color-on-tertiary);
+    opacity: 0.1;
+  }
+
+  :host([type='tertiary']:active) .hover {
+    opacity: 0.2;
+  }
+
+  :host([type='tonal']:focus) .hover,
+  :host([type='tonal']:hover) .hover {
+    background-color: var(--md-sys-color-on-secondary-container);
+    opacity: 0.1;
+  }
+
+  :host([type='tonal']:active) .hover {
+    opacity: 0.2;
+  }
+`;
+
+export { style as default };

package/exports/button.js

@@ -1,6 +1,7 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, html } from '@vandeurenglenn/lite';
 import './elevation.js';
+import style from './button.css.js';
 
 let CustomButton = (() => {
     let _classDecorators = [customElement('custom-button')];
@@ -11,27 +12,27 @@ let CustomButton = (() => {
     let _hasIcon_decorators;
     let _hasIcon_initializers = [];
     let _hasIcon_extraInitializers = [];
-    let _hasLabel_decorators;
-    let _hasLabel_initializers = [];
-    let _hasLabel_extraInitializers = [];
     let _type_decorators;
     let _type_initializers = [];
     let _type_extraInitializers = [];
     let _label_decorators;
     let _label_initializers = [];
     let _label_extraInitializers = [];
+    let _hasLabel_decorators;
+    let _hasLabel_initializers = [];
+    let _hasLabel_extraInitializers = [];
     (class extends _classSuper {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _hasIcon_decorators = [property({ attribute: 'has-icon', reflect: true })];
-            _hasLabel_decorators = [property({ attribute: 'has-label', reflect: true })];
             _type_decorators = [property({ attribute: 'type', reflect: true })];
             _label_decorators = [property({ attribute: true })];
+            _hasLabel_decorators = [property({ attribute: 'has-label', reflect: true })];
             __esDecorate(this, null, _hasIcon_decorators, { kind: "accessor", name: "hasIcon", static: false, private: false, access: { has: obj => "hasIcon" in obj, get: obj => obj.hasIcon, set: (obj, value) => { obj.hasIcon = value; } }, metadata: _metadata }, _hasIcon_initializers, _hasIcon_extraInitializers);
-            __esDecorate(this, null, _hasLabel_decorators, { kind: "accessor", name: "hasLabel", static: false, private: false, access: { has: obj => "hasLabel" in obj, get: obj => obj.hasLabel, set: (obj, value) => { obj.hasLabel = value; } }, metadata: _metadata }, _hasLabel_initializers, _hasLabel_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(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _hasLabel_decorators, { kind: "accessor", name: "hasLabel", static: false, private: false, access: { has: obj => "hasLabel" in obj, get: obj => obj.hasLabel, set: (obj, value) => { obj.hasLabel = value; } }, metadata: _metadata }, _hasLabel_initializers, _hasLabel_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 });
@@ -39,227 +40,24 @@ let CustomButton = (() => {
         #hasIcon_accessor_storage = __runInitializers(this, _hasIcon_initializers, void 0);
         get hasIcon() { return this.#hasIcon_accessor_storage; }
         set hasIcon(value) { this.#hasIcon_accessor_storage = value; }
-        #hasLabel_accessor_storage = (__runInitializers(this, _hasIcon_extraInitializers), __runInitializers(this, _hasLabel_initializers, void 0));
-        get hasLabel() { return this.#hasLabel_accessor_storage; }
-        set hasLabel(value) { this.#hasLabel_accessor_storage = value; }
-        #type_accessor_storage = (__runInitializers(this, _hasLabel_extraInitializers), __runInitializers(this, _type_initializers, 'text'));
+        #type_accessor_storage = (__runInitializers(this, _hasIcon_extraInitializers), __runInitializers(this, _type_initializers, 'text'));
         get type() { return this.#type_accessor_storage; }
         set type(value) { this.#type_accessor_storage = value; }
         #label_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _label_initializers, void 0));
         get label() { return this.#label_accessor_storage; }
         set label(value) { this.#label_accessor_storage = value; }
-        static styles = [
-            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;
-        overflow: hidden;
-
-        --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: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        position: relative;
-        pointer-events: none;
-        font-size: inherit;
-      }
-
-      .label {
-        flex: 1;
-        text-align: center;
-      }
-
-      .label,
-      ::slotted(*) {
-        font-family: var(--md-sys-typescale-label-large-font-family-name);
-        font-style: var(--md-sys-typescale-label-large-font-family-style);
-        font-weight: var(--md-sys-typescale-label-large-font-weight);
-        font-size: var(--md-sys-typescale-label-large-font-size);
-        letter-spacing: var(--md-sys-typescale-label-large-tracking);
-        line-height: var(--md-sys-typescale-label-large-height);
-        text-transform: var(--md-sys-typescale-label-large-text-transform);
-        text-decoration: var(--md-sys-typescale-label-large-text-decoration);
-      }
-
-      :host([type='filled']),
-      :host([type='filled']) ::slotted(*) {
-        color: var(--md-sys-color-on-primary);
-        fill: var(--md-sys-color-on-primary);
-        background: var(--md-sys-color-primary);
-      }
-
-      :host([type='outlined']) {
-        border: solid 1px;
-        border-color: var(--md-sys-color-outline);
-      }
-
-      :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);
-      }
-
-      :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-secondary-container);
-        fill: var(--md-sys-color-on-secondary-container);
-      }
-
-      custom-elevation {
-        --md-elevation-level: var(--elevation-level);
-      }
-
-      :host([type='elevated']) custom-elevation {
-        --elevation-level: 1;
-      }
-
-      :host([type='filled']),
-      :host([type='outlined']),
-      :host([type='text']),
-      :host([type='tonal']) {
-        --elevation-level: 0;
-      }
-
-      :host([has-label]) .label {
-        padding-left: 24px;
-        padding-right: 24px;
-        align-items: center;
-        display: flex;
-        justify-content: center;
-      }
-
-      :host([has-icon]:not([has-label])) {
-        border-radius: 50%;
-        width: 40px;
-        align-items: center;
-        justify-content: center;
-      }
-
-      :host([has-icon][has-label]) .label {
-        padding-left: 8px;
-        padding-right: 24px;
-        text-align: end;
-      }
-      :host([has-icon][has-label]) slot[name='icon']::slotted(*) {
-        padding-left: 16px;
-      }
-
-      :host([disabled]) .label,
-      :host([disabled]) slot[name='icon']::slotted(*) {
-        opacity: 0.28;
-      }
-      .label {
-        font-size: inherit;
-      }
-
-      ::slotted(*) {
-        pointer-events: none;
-      }
-
-      :host([type='elevated']:focus),
-      :host([type='elevated']:hover) {
-        --elevation-level: 2;
-      }
-
-      :host(:active) {
-        --elevation-level: 0;
-      }
-
-      button * {
-        pointer-events: none;
-      }
-      .hover {
-        position: absolute;
-        inset: 0;
-        background-color: var(--md-sys-color-primary);
-        opacity: 0;
-        transition: opacity 200ms;
-        border-radius: var(--custom-button-border-radius);
-      }
-
-      :host(:focus) .hover,
-      :host(:hover) .hover {
-        opacity: 0.1;
-      }
-
-      :host(:active) .hover {
-        opacity: 0.2;
-      }
-
-      :host([type='filled']:focus) .hover,
-      :host([type='filled']:hover) .hover {
-        background-color: var(--md-sys-color-on-primary);
-        opacity: 0.1;
-      }
-
-      :host([type='filled']:active) .hover {
-        opacity: 0.2;
-      }
-
-      :host([type='tertiary']:focus) .hover,
-      :host([type='tertiary']:hover) .hover {
-        background-color: var(--md-sys-color-on-tertiary);
-        opacity: 0.1;
-      }
-
-      :host([type='tertiary']:active) .hover {
-        opacity: 0.2;
-      }
-
-      :host([type='tonal']:focus) .hover,
-      :host([type='tonal']:hover) .hover {
-        background-color: var(--md-sys-color-on-secondary-container);
-        opacity: 0.1;
-      }
-
-      :host([type='tonal']:active) .hover {
-        opacity: 0.2;
-      }
-    `
-        ];
-        connectedCallback() {
+        #hasLabel_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _hasLabel_initializers, void 0));
+        get hasLabel() { return this.#hasLabel_accessor_storage; }
+        set hasLabel(value) { this.#hasLabel_accessor_storage = value; }
+        static styles = [style];
+        firstRender() {
             const slots = Array.from(this.shadowRoot.querySelectorAll('slot'));
             for (const slot of slots) {
                 slot.addEventListener('slotchange', () => this.#slotchange(slot));
             }
-            this.#slotchange(slots[0]);
+            if (slots?.length > 0)
+                for (const slot of slots)
+                    this.#slotchange(slot);
         }
         onChange(propertyKey, value) {
             if (propertyKey === 'label') {
@@ -269,7 +67,7 @@ let CustomButton = (() => {
                     this.hasLabel = false;
             }
         }
-        #slotchange = (__runInitializers(this, _label_extraInitializers), (slot) => {
+        #slotchange = (__runInitializers(this, _hasLabel_extraInitializers), (slot) => {
             if (slot.getAttribute('name') === 'icon') {
                 this.hasIcon = Array.from(slot?.assignedNodes() || []).length !== 0;
             }

package/exports/card.js

@@ -1,8 +1,9 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, html } from '@vandeurenglenn/lite';
 import './button.js';
 import './divider.js';
 import './elevation.js';
+import './button.css.js';
 
 let CustomCard = (() => {
     let _classDecorators = [customElement('custom-card')];

package/exports/code.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, css, html } from '@vandeurenglenn/lite';
 
 let DemoCode = (() => {
     let _classDecorators = [customElement('demo-code')];

package/exports/demo-icons.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, css, html } from '@vandeurenglenn/lite';
 import './icon-set.js';
 import '@vandeurenglenn/little-pubsub';
 

package/exports/demo-shell.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, query, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, query, css, html } from '@vandeurenglenn/lite';
 import './demo-icons.js';
 import './section.js';
 import './card.js';
@@ -35,6 +35,7 @@ import './notification.js';
 import './notifications.js';
 import './code.js';
 import './elevation.js';
+import './button.css.js';
 import '@vandeurenglenn/flex-elements/it.js';
 import './selector-mixin.js';
 import './select-mixin.js';

package/exports/demo.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, query, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, query, css, html } from '@vandeurenglenn/lite';
 
 let DemoShell = (() => {
     let _classDecorators = [customElement('demo-shell')];

package/exports/dialog.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, css, html } from '@vandeurenglenn/lite';
 import './elevation.js';
 import './icon.js';
 import '@vandeurenglenn/little-pubsub';

package/exports/divider.js

@@ -1,7 +1,8 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, html } from '@vandeurenglenn/lite';
 import './button.js';
 import './elevation.js';
+import './button.css.js';
 
 let CustomDivider = (() => {
     let _classDecorators = [customElement('custom-divider')];

package/exports/drawer-button.js

@@ -1,8 +1,9 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, css, html } from '@vandeurenglenn/lite';
 import './icon-button.js';
 import './button.js';
 import './elevation.js';
+import './button.css.js';
 import './icon.js';
 import '@vandeurenglenn/little-pubsub';
 

package/exports/drawer-item.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, css, html } from '@vandeurenglenn/lite';
 
 let CustomDrawerItem = (() => {
     let _classDecorators = [customElement('custom-drawer-item')];

package/exports/drawer-layout.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, html } from '@vandeurenglenn/lite';
 import './drawer.js';
 import './drawer-button.js';
 import './drawer-item.js';
@@ -7,6 +7,7 @@ import './top-app-bar.js';
 import '@vandeurenglenn/flex-elements/column.js';
 import './elevation.js';
 import './button.js';
+import './button.css.js';
 import './pane.js';
 import './icon-button.js';
 import './icon.js';

package/exports/drawer.js

@@ -1,9 +1,10 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, html } from '@vandeurenglenn/lite';
 import './elevation.js';
 import './button.js';
 import './pane.js';
 import style from '@vandeurenglenn/custom-shared-styles/drawer.css';
+import './button.css.js';
 import './icon-button.js';
 import './icon.js';
 import '@vandeurenglenn/little-pubsub';

package/exports/dropdown-menu.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, query, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, query, css, html } from '@vandeurenglenn/lite';
 import './dropdown.js';
 import './menu.js';
 import './icon.js';

package/exports/dropdown.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, css, html } from '@vandeurenglenn/lite';
 
 let CustomDropdown = (() => {
     let _classDecorators = [customElement('custom-dropdown')];

package/exports/elements.js

@@ -32,6 +32,7 @@ export { CustomNotifications } from './notifications.js';
 import './tslib.es6-Cg9lAhfj.js';
 import '@vandeurenglenn/lite';
 import './elevation.js';
+import './button.css.js';
 import '@vandeurenglenn/flex-elements/it.js';
 import './selector-mixin.js';
 import './select-mixin.js';

package/exports/elevation.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, html } from '@vandeurenglenn/lite';
 
 /**
  * @license

package/exports/fab.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, css, html } from '@vandeurenglenn/lite';
 import './elevation.js';
 
 let CustomButton = (() => {

package/exports/icon/icon.d.ts

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