@vandeurenglenn/lite-elements 0.3.50 → 0.3.51

package/exports/drawer.js

@@ -75,13 +75,13 @@ let CustomDrawer = (() => {
         }
         static styles = [style];
         render() {
-            return html `
-      <custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type} .id=${this.id}>
-        <slot name="headline" slot="headline"></slot>
-        <slot name="menu-button" slot="menu-button"></slot>
-        <slot name="content" slot="content"></slot>
-        <slot name="footer" slot="footer"></slot>
-      </custom-pane>
+            return html `
+      <custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type} .id=${this.id}>
+        <slot name="headline" slot="headline"></slot>
+        <slot name="menu-button" slot="menu-button"></slot>
+        <slot name="content" slot="content"></slot>
+        <slot name="footer" slot="footer"></slot>
+      </custom-pane>
     `;
         }
         constructor() {

package/exports/dropdown-menu.js

@@ -99,67 +99,67 @@ let CustomDropdownMenu = (() => {
             }
         };
         static styles = [
-            css `
-      :host {
-        position: relative;
-        display: block;
-        --custom-dropdown-top: 48px;
-      }
-
-      custom-dropdown {
-        display: flex;
-        flex-direction: column;
-        width: fit-content;
-        top: var(--custom-dropdown-top);
-        padding: 8px 0;
-        border-radius: var(--md-sys-shape-corner-extra-small);
-      }
-
-      custom-elevation {
-        --md-elevation-level: var(--elevation-level, 1);
-        border-radius: var(--md-sys-shape-corner-extra-small);
-      }
-
-      :host([bottom]) custom-dropdown {
-        transform-origin: bottom left;
-        top: auto;
-        bottom: var(--custom-dropdown-top);
-      }
-
-      :host([right]) custom-dropdown {
-        transform-origin: top right;
-        right: 0;
-      }
-
-      :host([bottom][right]) custom-dropdown {
-        transform-origin: bottom right;
-      }
-
-      .scrim {
-        position: fixed;
-        inset: 0;
-        pointer-events: none;
-      }
-
-      :host([open]) .scrim {
-        pointer-events: auto;
-      }
+            css `
+      :host {
+        position: relative;
+        display: block;
+        --custom-dropdown-top: 48px;
+      }
+
+      custom-dropdown {
+        display: flex;
+        flex-direction: column;
+        width: fit-content;
+        top: var(--custom-dropdown-top);
+        padding: 8px 0;
+        border-radius: var(--md-sys-shape-corner-extra-small);
+      }
+
+      custom-elevation {
+        --md-elevation-level: var(--elevation-level, 1);
+        border-radius: var(--md-sys-shape-corner-extra-small);
+      }
+
+      :host([bottom]) custom-dropdown {
+        transform-origin: bottom left;
+        top: auto;
+        bottom: var(--custom-dropdown-top);
+      }
+
+      :host([right]) custom-dropdown {
+        transform-origin: top right;
+        right: 0;
+      }
+
+      :host([bottom][right]) custom-dropdown {
+        transform-origin: bottom right;
+      }
+
+      .scrim {
+        position: fixed;
+        inset: 0;
+        pointer-events: none;
+      }
+
+      :host([open]) .scrim {
+        pointer-events: auto;
+      }
     `
         ];
         render() {
-            return html `
-      <span class="scrim" @click=${this._scrimClick}></span>
-
-      <custom-button part="button" @click=${() => (this.open = !this.open)}>
-        <custom-icon slot="icon" .icon=${this.icon}></custom-icon>
-      </custom-button>
-
-      <custom-dropdown part="dropdown" .open=${this.open} ?right=${this.right} ?bottom=${this.bottom}>
-        <custom-elevation></custom-elevation>
-        <custom-menu @selected=${this._onselected}>
-          <slot></slot>
-        </custom-menu>
-      </custom-dropdown>
+            return html `
+      <span class="scrim" @click=${this._scrimClick}></span>
+
+      <custom-button part="button" @click=${() => (this.open = !this.open)}>
+        <custom-icon slot="icon" .icon=${this.icon}></custom-icon>
+      </custom-button>
+
+      <custom-dropdown part="dropdown" .open=${this.open} ?right=${this.right} ?bottom=${this.bottom}>
+        <custom-elevation></custom-elevation>
+        <custom-menu @selected=${this._onselected}>
+          <slot></slot>
+        </custom-menu>
+      </custom-dropdown>
     `;
         }
         static {

package/exports/dropdown.js

@@ -24,31 +24,31 @@ let CustomDropdown = (() => {
         get open() { return this.#open_accessor_storage; }
         set open(value) { this.#open_accessor_storage = value; }
         static styles = [
-            css `
-      :host {
-        position: absolute;
-        pointer-events: none;
-        opacity: 0;
-        flex: 1;
-        width: fit-content;
-        display: flex;
-        flex-direction: column;
-        border: 1px;
-        background: var(--md-sys-color-surface);
-        z-index: 1001;
-        transform: scale(0, 0);
-        transform-origin: top left;
-        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
-          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
-      }
-
-      :host([open]) {
-        pointer-events: auto;
-        opacity: 1;
-        transform: scale(1, 1);
-        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
-          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
-      }
+            css `
+      :host {
+        position: absolute;
+        pointer-events: none;
+        opacity: 0;
+        flex: 1;
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+        border: 1px;
+        background: var(--md-sys-color-surface);
+        z-index: 1001;
+        transform: scale(0, 0);
+        transform-origin: top left;
+        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
+          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+      }
+
+      :host([open]) {
+        pointer-events: auto;
+        opacity: 1;
+        transform: scale(1, 1);
+        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
+          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+      }
     `
         ];
         render() {

package/exports/elevation.js

@@ -34,56 +34,56 @@ let CustomElevation = (() => {
                 this.style.setProperty('--md-elevation-level', String(value));
         }
         render() {
-            return html `
-      <style>
-        :host {
-          --_level: var(--md-elevation-level, 0);
-          --_shadow-color: var(--md-sys-color-shadow);
-          display: flex;
-          pointer-events: none;
-        }
-
-        :host,
-        .shadow,
-        .shadow::before,
-        .shadow::after {
-          border-radius: inherit;
-          inset: 0;
-          position: absolute;
-          transition-duration: inherit;
-          transition-timing-function: inherit;
-        }
-
-        .shadow::before,
-        .shadow::after {
-          content: '';
-          transition-property: box-shadow, opacity;
-        }
-
-        .shadow::before {
-          box-shadow: 0px
-            calc(
-              1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))
-            )
-            calc(
-              1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))
-            )
-            0px var(--_shadow-color);
-          opacity: 0.3;
-        }
-
-        .shadow::after {
-          box-shadow: 0px
-            calc(
-              1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))
-            )
-            calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3)))
-            calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);
-          opacity: 0.15;
-        }
-      </style>
-
-      <span class="shadow"></span>
+            return html `
+      <style>
+        :host {
+          --_level: var(--md-elevation-level, 0);
+          --_shadow-color: var(--md-sys-color-shadow);
+          display: flex;
+          pointer-events: none;
+        }
+
+        :host,
+        .shadow,
+        .shadow::before,
+        .shadow::after {
+          border-radius: inherit;
+          inset: 0;
+          position: absolute;
+          transition-duration: inherit;
+          transition-timing-function: inherit;
+        }
+
+        .shadow::before,
+        .shadow::after {
+          content: '';
+          transition-property: box-shadow, opacity;
+        }
+
+        .shadow::before {
+          box-shadow: 0px
+            calc(
+              1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))
+            )
+            calc(
+              1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))
+            )
+            0px var(--_shadow-color);
+          opacity: 0.3;
+        }
+
+        .shadow::after {
+          box-shadow: 0px
+            calc(
+              1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))
+            )
+            calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3)))
+            calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);
+          opacity: 0.15;
+        }
+      </style>
+
+      <span class="shadow"></span>
     `;
         }
         constructor() {

package/exports/fab.js

@@ -25,154 +25,154 @@ let CustomButton = (() => {
         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;
-      }
+            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>
+            return html `
+      <button>
+        <custom-elevation></custom-elevation>
+        <slot name="icon"></slot>
+        <slot></slot>
+      </button>
     `;
         }
         constructor() {

package/exports/icon-button.js

@@ -28,21 +28,21 @@ let CustomIconButton = (() => {
         get icon() { return this.#icon_accessor_storage; }
         set icon(value) { this.#icon_accessor_storage = value; }
         static styles = [
-            css `
-      :host {
-        display: block;
-      }
-
-      custom-icon {
-        --custom-icon-color: var(--md-sys-color-on-surface);
-      }
+            css `
+      :host {
+        display: block;
+      }
+
+      custom-icon {
+        --custom-icon-color: var(--md-sys-color-on-surface);
+      }
     `
         ];
         render() {
-            return html `
-      <custom-button>
-        <custom-icon slot="icon" .icon=${this.icon}></custom-icon>
-      </custom-button>
+            return html `
+      <custom-button>
+        <custom-icon slot="icon" .icon=${this.icon}></custom-icon>
+      </custom-button>
     `;
         }
         constructor() {

package/exports/icon-set.js

@@ -18,10 +18,10 @@ let CustomIconSet = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
-            css `
-      :host {
-        display: none;
-      }
+            css `
+      :host {
+        display: none;
+      }
     `
         ];
         #getIcon(name) {