@vandeurenglenn/lite-elements 0.3.50 → 0.3.52

package/exports/dialog.js

@@ -94,161 +94,163 @@ let CustomDialog = (() => {
             this.open = false;
         }
         static styles = [
-            css `
-      :host {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-      }
-
-      .header {
-        height: 56px;
-        box-sizing: border-box;
-      }
-
-      .scrim,
-      .dialog {
-        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
-          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
-      }
-
-      .scrim {
-        position: absolute;
-        inset: 0;
-        background-color: var(--md-sys-color-scrim);
-        opacity: 0;
-        pointer-events: none;
-      }
-
-      dialog {
-        pointer-events: none;
-        border: none;
-        min-width: var(--custom-dialog-min-width, 280px);
-        max-width: var(--custom-dialog-max-width, 560px);
-        width: fit-content;
-        border-radius: var(--md-sys-shape-corner-extra-large);
-        background-color: var(--md-sys-color-surface-container-high);
-        color: var(--md-sys-color-on-surface);
-        padding: 24px;
-        box-sizing: border-box;
-        position: relative;
-        opacity: 0;
-        transform: scaleY(0.1);
-      }
-
-      .body {
-        overflow-y: auto;
-      }
-
-      :host([has-actions]) .body {
-        padding-top: 16px;
-        padding-bottom: 24px;
-      }
-
-      :host([has-header][has-hero]) .header {
-        padding-top: 16px;
-      }
-
-      slot[name='title']::slotted(*) {
-        font-family: var(--md-sys-typescale-title-large-font-family-name);
-        font-style: var(--md-sys-typescale-title-large-font-family-style);
-        font-weight: var(--md-sys-typescale-title-large-font-weight);
-        font-size: var(--md-sys-typescale-title-large-font-size);
-        letter-spacing: var(--md-sys-typescale-title-large-tracking);
-        line-height: var(--md-sys-typescale-title-large-height);
-        text-transform: var(--md-sys-typescale-title-large-text-transform);
-        text-decoration: var(--md-sys-typescale-title-large-text-decoration);
-      }
-
-      :host([has-hero]) slot[name='title']::slotted(*) {
-        padding-top: 16px;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      :host([fullscreen]) slot[name='title']::slotted(*) {
-        padding-left: 16px;
-      }
-
-      :host(:not([fullscreen])) dialog {
-        align-items: center;
-        justify-content: center;
-      }
-
-      slot[name='supporting-text']::slotted(*) {
-        color: var(--md-sys-color-on-surface-variant);
-        padding-bottom: 16px;
-      }
-
-      slot[name='actions']::slotted(*) {
-        align-items: center;
-        justify-content: end;
-      }
-
-      :host([open]) dialog,
-      :host([open]) .scrim {
-        pointer-events: auto;
-        opacity: 1;
-        transform: scaleY(1);
-        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
-          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
-      }
-
-      :host([open]) .scrim {
-        opacity: 0.44;
-      }
-
-      :host([fullscreen]) slot[name='actions']::slotted(*) {
-        --custom-icon-size: 12px;
-        --custom-button-color: var(--md-sys-color-primary);
-      }
-
-      slot[name='actions'] {
-        align-items: flex-end;
-      }
+            css `
+      :host {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+      }
+
+      .header {
+        height: 56px;
+        box-sizing: border-box;
+      }
+
+      .scrim,
+      .dialog {
+        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
+          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+      }
+
+      .scrim {
+        position: absolute;
+        inset: 0;
+        background-color: var(--md-sys-color-scrim);
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      dialog {
+        pointer-events: none;
+        border: none;
+        min-width: var(--custom-dialog-min-width, 280px);
+        max-width: var(--custom-dialog-max-width, 560px);
+        width: fit-content;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+        background-color: var(--md-sys-color-surface-container-high);
+        color: var(--md-sys-color-on-surface);
+        padding: 24px;
+        box-sizing: border-box;
+        position: relative;
+        opacity: 0;
+        transform: scaleY(0.1);
+      }
+
+      .body {
+        margin-top: 16px;
+        margin-bottom: 24px;
+        overflow-y: auto;
+      }
+
+      :host([has-actions]) .body {
+        margin-top: 16px;
+        margin-bottom: 24px;
+      }
+
+      :host([has-header][has-hero]) .header {
+        padding-top: 16px;
+      }
+
+      slot[name='title']::slotted(*) {
+        font-family: var(--md-sys-typescale-title-large-font-family-name);
+        font-style: var(--md-sys-typescale-title-large-font-family-style);
+        font-weight: var(--md-sys-typescale-title-large-font-weight);
+        font-size: var(--md-sys-typescale-title-large-font-size);
+        letter-spacing: var(--md-sys-typescale-title-large-tracking);
+        line-height: var(--md-sys-typescale-title-large-height);
+        text-transform: var(--md-sys-typescale-title-large-text-transform);
+        text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+      }
+
+      :host([has-hero]) slot[name='title']::slotted(*) {
+        padding-top: 16px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      :host([fullscreen]) slot[name='title']::slotted(*) {
+        padding-left: 16px;
+      }
+
+      :host(:not([fullscreen])) dialog {
+        align-items: center;
+        justify-content: center;
+      }
+
+      slot[name='supporting-text']::slotted(*) {
+        color: var(--md-sys-color-on-surface-variant);
+        padding-bottom: 16px;
+      }
+
+      slot[name='actions']::slotted(*) {
+        align-items: center;
+        justify-content: end;
+      }
+
+      :host([open]) dialog,
+      :host([open]) .scrim {
+        pointer-events: auto;
+        opacity: 1;
+        transform: scaleY(1);
+        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
+          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+      }
+
+      :host([open]) .scrim {
+        opacity: 0.44;
+      }
+
+      :host([fullscreen]) slot[name='actions']::slotted(*) {
+        --custom-icon-size: 12px;
+        --custom-button-color: var(--md-sys-color-primary);
+      }
+
+      slot[name='actions'] {
+        align-items: flex-end;
+      }
     `
         ];
         render() {
-            return html `
-      <span class="scrim" @click=${this._close}></span>
-      <dialog ?open=${this.open}>
-        <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 center style="width: 100%">
-              <slot name="header-start">
+            return html `
+      <span class="scrim" @click=${this._close}></span>
+      <dialog ?open=${this.open}>
+        <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 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
+                ? html `<custom-button @click=${this._close}
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
                     >`
-                : ''}
-              </slot>
-              <slot name="title"></slot>
-              <flex-it></flex-it>
-              <slot name="header-end">
-                ${this.fullscreen ? html `<slot name="actions"></slot>` : ''}
+                : ''}
+              </slot>
+              <slot name="title"></slot>
+              <flex-it></flex-it>
+              <slot name="header-end">
+                ${this.fullscreen ? html `<slot name="actions"></slot>` : ''}
                 ${this.fullscreen
                 ? ''
-                : html `<custom-button @click=${this._close}
-                      ><custom-icon slot="icon">close</custom-icon></custom-button
-                    >`}
-              </slot>
-            </flex-row>
-          </flex-row>
-        </slot>
-        <flex-column class="body">
-          <slot></slot>
-        </flex-column>
-
-        ${this.fullscreen ? '' : html `<slot name="actions"></slot>`}
-      </dialog>
+                : html `<custom-button @click=${this._close}
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                    >`}
+              </slot>
+            </flex-row>
+          </flex-row>
+        </slot>
+        <flex-column class="body">
+          <slot></slot>
+        </flex-column>
+
+        ${this.fullscreen ? '' : html `<slot name="actions"></slot>`}
+      </dialog>
     `;
         }
         static {

package/exports/divider.js

@@ -22,27 +22,27 @@ let CustomDivider = (() => {
             middleInset: { type: Boolean, reflect: true, attribute: 'middle-inset' }
         };
         render() {
-            return html `
-      <style>
-        :host {
-          display: block;
-          box-sizing: border-box;
-          min-height: 1px;
-          margin: 8px 0 16px 0;
-          width: 100%;
-          background: var(--md-sys-color-outline);
-        }
-
-        :host([inset]) {
-          margin-left: 16px;
-          margin-right: 0;
-        }
-
-        :host([middle-inset]) {
-          margin-left: 16px;
-          margin-right: 16px;
-        }
-      </style>
+            return html `
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+          min-height: 1px;
+          margin: 8px 0 16px 0;
+          width: 100%;
+          background: var(--md-sys-color-outline);
+        }
+
+        :host([inset]) {
+          margin-left: 16px;
+          margin-right: 0;
+        }
+
+        :host([middle-inset]) {
+          margin-left: 16px;
+          margin-right: 16px;
+        }
+      </style>
     `;
         }
         static {

package/exports/drawer-button.js

@@ -48,19 +48,19 @@ let CustomDrawerButton = (() => {
             document.dispatchEvent(new CustomEvent('custom-pane-open', { detail: this.id }));
         }
         static styles = [
-            css `
-      :host {
-        display: block;
-        opacity: 1;
-        pointer-events: auto;
-        will-change: width, opacity;
-      }
-
-      :host([drawer-open]) {
-        opacity: 0;
-        pointer-events: none;
-        width: 0;
-      }
+            css `
+      :host {
+        display: block;
+        opacity: 1;
+        pointer-events: auto;
+        will-change: width, opacity;
+      }
+
+      :host([drawer-open]) {
+        opacity: 0;
+        pointer-events: none;
+        width: 0;
+      }
     `
         ];
         render() {

package/exports/drawer-item.js

@@ -16,47 +16,47 @@ let CustomDrawerItem = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
-            css `
-      :host {
-        display: flex;
-        padding-left: 16px;
-        padding-right: 24px;
-        height: 100%;
-        min-height: 54px;
-        max-height: 54px;
-        width: 100%;
-        box-sizing: border-box;
-        border-radius: var(--md-sys-shape-corner-extra-large);
-        align-items: center;
-        pointer-events: auto;
-        cursor: pointer;
-      }
-
-      slot {
-        pointer-events: none;
-      }
-
-      slot[name='icon']::slotted(*) {
-        margin-right: 12px;
-        height: 24px;
-        width: 24px;
-      }
-
-      slot[name='end']::slotted(*) {
-        margin-left: 12px;
-        box-sizing: border-box;
-      }
-
-      :host([non-interactive]) {
-        pointer-events: none;
-      }
+            css `
+      :host {
+        display: flex;
+        padding-left: 16px;
+        padding-right: 24px;
+        height: 100%;
+        min-height: 54px;
+        max-height: 54px;
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+        align-items: center;
+        pointer-events: auto;
+        cursor: pointer;
+      }
+
+      slot {
+        pointer-events: none;
+      }
+
+      slot[name='icon']::slotted(*) {
+        margin-right: 12px;
+        height: 24px;
+        width: 24px;
+      }
+
+      slot[name='end']::slotted(*) {
+        margin-left: 12px;
+        box-sizing: border-box;
+      }
+
+      :host([non-interactive]) {
+        pointer-events: none;
+      }
     `
         ];
         render() {
-            return html `
-      <slot name="icon"></slot>
-      <slot></slot>
-      <slot name="end"></slot>
+            return html `
+      <slot name="icon"></slot>
+      <slot></slot>
+      <slot name="end"></slot>
     `;
         }
         static {