@vandeurenglenn/lite-elements 0.3.50 → 0.3.51

package/exports/rail.js

@@ -56,63 +56,63 @@ let CustomRail = (() => {
         get right() { return this.#right_accessor_storage; }
         set right(value) { this.#right_accessor_storage = value; }
         render() {
-            return html `<style>
-        :host {
-          display: contents;
-        }
-
-        custom-pane {
-          box-sizing: border-box;
-          padding: 12px 24px;
-          height: 100%;
-          --custom-pane-width: var(--custom-drawer-with, 320px);
-        }
-
-        slot[name='headline']::slotted(*) {
-          color: var(--md-sys-color-on-surface-variant);
-          font-family: var(--md-sys-typescale-title-small-font-family-name);
-          font-style: var(--md-sys-typescale-title-small-font-family-style);
-          font-weight: var(--md-sys-typescale-title-small-font-weight);
-          font-size: var(--md-sys-typescale-title-small-font-size);
-          letter-spacing: var(--md-sys-typescale-title-small-tracking);
-          line-height: var(--md-sys-typescale-title-small-height);
-          text-transform: var(--md-sys-typescale-title-small-text-transform);
-          text-decoration: var(--md-sys-typescale-title-small-text-decoration);
-          text-transform: capitalize;
-          margin: 0;
-        }
-
-        ::slotted([slot='footer']) {
-          display: block;
-          box-sizing: border-box;
-          min-height: 48px;
-          border-top: 1px solid rgba(0, 0, 0, 0.14);
-        }
-
-        ::slotted([slot='content']) {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          width: 100%;
-          overflow-y: auto;
-        }
-
-        ::slotted(*) {
-          pointer-events: none;
-        }
-
-        aside {
-          width: 100%;
-        }
-      </style>
-
-      <custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type}>
-        <slot name="header">
-          <slot name="headline" slot="headline"></slot>
-          <slot name="menu-button" slot="menu-button"></slot>
-        </slot>
-        <slot name="content" slot="content"></slot>
-        <slot name="footer" slot="footer"></slot>
+            return html `<style>
+        :host {
+          display: contents;
+        }
+
+        custom-pane {
+          box-sizing: border-box;
+          padding: 12px 24px;
+          height: 100%;
+          --custom-pane-width: var(--custom-drawer-with, 320px);
+        }
+
+        slot[name='headline']::slotted(*) {
+          color: var(--md-sys-color-on-surface-variant);
+          font-family: var(--md-sys-typescale-title-small-font-family-name);
+          font-style: var(--md-sys-typescale-title-small-font-family-style);
+          font-weight: var(--md-sys-typescale-title-small-font-weight);
+          font-size: var(--md-sys-typescale-title-small-font-size);
+          letter-spacing: var(--md-sys-typescale-title-small-tracking);
+          line-height: var(--md-sys-typescale-title-small-height);
+          text-transform: var(--md-sys-typescale-title-small-text-transform);
+          text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+          text-transform: capitalize;
+          margin: 0;
+        }
+
+        ::slotted([slot='footer']) {
+          display: block;
+          box-sizing: border-box;
+          min-height: 48px;
+          border-top: 1px solid rgba(0, 0, 0, 0.14);
+        }
+
+        ::slotted([slot='content']) {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          width: 100%;
+          overflow-y: auto;
+        }
+
+        ::slotted(*) {
+          pointer-events: none;
+        }
+
+        aside {
+          width: 100%;
+        }
+      </style>
+
+      <custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type}>
+        <slot name="header">
+          <slot name="headline" slot="headline"></slot>
+          <slot name="menu-button" slot="menu-button"></slot>
+        </slot>
+        <slot name="content" slot="content"></slot>
+        <slot name="footer" slot="footer"></slot>
       </custom-pane> `;
         }
         constructor() {

package/exports/root.js

@@ -17,16 +17,16 @@ let CustomRoot = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
-            css `
-      :host {
-        display: contents;
-      }
+            css `
+      :host {
+        display: contents;
+      }
     `
         ];
         render() {
-            return html `
-      <custom-theme></custom-theme>
-      <slot></slot>
+            return html `
+      <custom-theme></custom-theme>
+      <slot></slot>
     `;
         }
         static {

package/exports/section/section.d.ts

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

package/exports/section.js

@@ -29,19 +29,19 @@ let DemoSection = (() => {
             }
         }
         static styles = [
-            css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        box-sizing: border-box;
-      }
+            css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+      }
     `
         ];
         render() {
-            return html `
-      <custom-section>
-        <slot></slot>
-      </custom-section>
+            return html `
+      <custom-section>
+        <slot></slot>
+      </custom-section>
     `;
         }
         static {

package/exports/section2.js

@@ -19,33 +19,33 @@ let CustomSection = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
-            css `
-      :host {
-        display: flex;
-        justify-content: center;
-        align-items: baseline;
-        margin: 16px;
-        position: relative;
-        overflow-y: auto;
-      }
-      .container {
-        align-items: center;
-        box-sizing: border-box;
-        padding: 12px;
-        border-radius: var(--md-sys-shape-corner-extra-large);
-      }
-      .content {
-        max-width: 720px;
-      }
+            css `
+      :host {
+        display: flex;
+        justify-content: center;
+        align-items: baseline;
+        margin: 16px;
+        position: relative;
+        overflow-y: auto;
+      }
+      .container {
+        align-items: center;
+        box-sizing: border-box;
+        padding: 12px;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+      }
+      .content {
+        max-width: 720px;
+      }
     `
         ];
         render() {
-            return html `
-      <flex-column class="container">
-        <flex-column class="content">
-          <slot></slot>
-        </flex-column>
-      </flex-column>
+            return html `
+      <flex-column class="container">
+        <flex-column class="content">
+          <slot></slot>
+        </flex-column>
+      </flex-column>
     `;
         }
         static {

package/exports/selector.js

@@ -18,36 +18,36 @@ let CustomSelector = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
-            css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-      }
-
-      ::slotted(.custom-selected:not([non-interactive])) {
-        background: var(--md-sys-color-secondary-container);
-        color: var(--md-sys-color-on-secondary-container);
-      }
-
-      ::slotted(*) {
-        color: var(--md-sys-color-on-surface-variant);
-        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);
-      }
-
-      ::slotted(:not(.custom-selected):not([non-interactive]):hover) {
-        background: var(--md-sys-color-secondary-container-hover);
-        color: var(--md-sys-color-on-secondary-container);
-      }
+            css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+      }
+
+      ::slotted(.custom-selected:not([non-interactive])) {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      ::slotted(*) {
+        color: var(--md-sys-color-on-surface-variant);
+        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);
+      }
+
+      ::slotted(:not(.custom-selected):not([non-interactive]):hover) {
+        background: var(--md-sys-color-secondary-container-hover);
+        color: var(--md-sys-color-on-secondary-container);
+      }
     `
         ];
         render() {

package/exports/summary-mirror.js

@@ -39,25 +39,25 @@ let CustomSummaryMirror = (() => {
             }
         }
         get template() {
-            return html `
-      <style>
-        :host {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          min-height: 400px;
-          max-width: 1200px;
-        }
-
-        @media (min-width: 1200px) {
-          :host {
-            flex-direction: row;
-            width: 80%;
-          }
-        }
-      </style>
-      <slot name="left"></slot>
-      <slot name="right"></slot>
+            return html `
+      <style>
+        :host {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          min-height: 400px;
+          max-width: 1200px;
+        }
+
+        @media (min-width: 1200px) {
+          :host {
+            flex-direction: row;
+            width: 80%;
+          }
+        }
+      </style>
+      <slot name="left"></slot>
+      <slot name="right"></slot>
     `;
         }
     });

package/exports/summary.js

@@ -16,33 +16,33 @@ let CustomSummary = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
-            css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        min-height: 400px;
-        max-width: 1200px;
-      }
-      ::slotted([slot='left']) {
-        padding-bottom: 24px;
-      }
-      @media (min-width: 1200px) {
-        :host {
-          flex-direction: row;
-          width: 80%;
-        }
-        ::slotted([slot='left']) {
-          padding-right: 24px;
-          padding-bottom: 0;
-        }
-      }
+            css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 400px;
+        max-width: 1200px;
+      }
+      ::slotted([slot='left']) {
+        padding-bottom: 24px;
+      }
+      @media (min-width: 1200px) {
+        :host {
+          flex-direction: row;
+          width: 80%;
+        }
+        ::slotted([slot='left']) {
+          padding-right: 24px;
+          padding-bottom: 0;
+        }
+      }
     `
         ];
         render() {
-            return html `
-      <slot name="left"></slot>
-      <slot name="right"></slot>
+            return html `
+      <slot name="left"></slot>
+      <slot name="right"></slot>
     `;
         }
         static {

package/exports/supporting-pane.js

@@ -76,52 +76,52 @@ let CustomSupportingPane = (() => {
             });
         }
         render() {
-            return html `<style>
-        :host {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          background: var(--md-sys-color-surface);
-          color: var(--md-sys-color-on-surface);
-          width: 100%;
-          position: relative;
-          --supporting-pane-width: 360px;
-        }
-        .support {
-          position: absolute;
-          right: 0;
-        }
-
-        :host([left]) {
-          left: 0;
-          right: none;
-        }
-        :host([variant='expanded']) .support {
-          --custom-pane-width: var(--supporting-pane-width);
-        }
-        :host([variant='expanded']) {
-          flex-direction: row;
-        }
-
-        :host([variant='compact']) .support {
-          position: absolute;
-          flex-direction: row;
-        }
-        main {
-          width: 100%;
-        }
-        :host([open]) main {
-          width: calc(100% - var(--supporting-pane-width));
-        }
-      </style>
-      <main>
-        <slot></slot>
-      </main>
-      <custom-pane class="support" ?open=${this.open} ?right=${!this.left} .id=${this.id}>
-        <slot name="supporting">
-          <slot name="supporting-header" slot="header"></slot>
-          <slot name="supporting-content"></slot>
-        </slot>
+            return html `<style>
+        :host {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          background: var(--md-sys-color-surface);
+          color: var(--md-sys-color-on-surface);
+          width: 100%;
+          position: relative;
+          --supporting-pane-width: 360px;
+        }
+        .support {
+          position: absolute;
+          right: 0;
+        }
+
+        :host([left]) {
+          left: 0;
+          right: none;
+        }
+        :host([variant='expanded']) .support {
+          --custom-pane-width: var(--supporting-pane-width);
+        }
+        :host([variant='expanded']) {
+          flex-direction: row;
+        }
+
+        :host([variant='compact']) .support {
+          position: absolute;
+          flex-direction: row;
+        }
+        main {
+          width: 100%;
+        }
+        :host([open]) main {
+          width: calc(100% - var(--supporting-pane-width));
+        }
+      </style>
+      <main>
+        <slot></slot>
+      </main>
+      <custom-pane class="support" ?open=${this.open} ?right=${!this.left} .id=${this.id}>
+        <slot name="supporting">
+          <slot name="supporting-header" slot="header"></slot>
+          <slot name="supporting-content"></slot>
+        </slot>
       </custom-pane>`;
         }
         constructor() {

package/exports/tab.js

@@ -17,27 +17,27 @@ let CustomTab = (() => {
             __runInitializers(_classThis, _classExtraInitializers);
         }
         render() {
-            return html `
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 8px;
-          height: 40px;
-          padding: 0 12px;
-          box-sizing: border-box;
-          width: auto;
-          font: var(--_supporting-text-type);
-          cursor: pointer;
-          white-space: nowrap;
-        }
-
-        slot {
-          pointer-events: none;
-        }
-      </style>
-      <slot></slot>
+            return html `
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          height: 40px;
+          padding: 0 12px;
+          box-sizing: border-box;
+          width: auto;
+          font: var(--_supporting-text-type);
+          cursor: pointer;
+          white-space: nowrap;
+        }
+
+        slot {
+          pointer-events: none;
+        }
+      </style>
+      <slot></slot>
     `;
         }
     });

package/exports/tabs.js

@@ -21,56 +21,56 @@ let CustomTabs = (() => {
         }
         // TODO: make scrollable
         render() {
-            return html `
-      <style>
-        :host {
-          --custom-tabs-background: var(---md-sys-color-surface);
-          --selected-color: var(--md-sys-color-primary);
-          --selected-tab-color: var(--md-sys-color-primary);
-          --custom-tabs-shape: var(--md-sys-shape-corner-none);
-          --inactive-color: var(--md-sys-color-on-surface-variant);
-          display: flex;
-          flex-direction: row;
-          min-height: var(--custom-tabs-height, 64px);
-          overflow-x: auto;
-          background: var(--custom-tabs-background);
-          border-radius: var(--custom-tabs-shape);
-        }
-        ::slotted(*) {
-          color: var(--inactive-color);
-        }
-        ::slotted(.custom-selected) {
-          color: var(--selected-color);
-          border-bottom: 2px solid var(--selected-tab-color);
-        }
-
-        :host([round]) ::slotted(*) {
-          gap: 0;
-        }
-
-        :host([round]) ::slotted(.custom-selected) {
-          --md-sys-color-on-surface: var(--md-sys-color-on-tertiary);
-          color: var(--md-sys-color-on-tertiary);
-          background: var(--md-sys-color-tertiary);
-          border: none;
-          border-radius: var(--md-sys-shape-corner-extra-large);
-        }
-        ::-webkit-scrollbar {
-          width: 6px;
-          border-radius: 12px;
-        }
-        ::-webkit-scrollbar-track {
-          background: #f1f1f1;
-        }
-        ::-webkit-scrollbar-thumb {
-          background: #888;
-          border-radius: 12px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-          background: #555;
-        }
-      </style>
-      <slot></slot>
+            return html `
+      <style>
+        :host {
+          --custom-tabs-background: var(---md-sys-color-surface);
+          --selected-color: var(--md-sys-color-primary);
+          --selected-tab-color: var(--md-sys-color-primary);
+          --custom-tabs-shape: var(--md-sys-shape-corner-none);
+          --inactive-color: var(--md-sys-color-on-surface-variant);
+          display: flex;
+          flex-direction: row;
+          min-height: var(--custom-tabs-height, 64px);
+          overflow-x: auto;
+          background: var(--custom-tabs-background);
+          border-radius: var(--custom-tabs-shape);
+        }
+        ::slotted(*) {
+          color: var(--inactive-color);
+        }
+        ::slotted(.custom-selected) {
+          color: var(--selected-color);
+          border-bottom: 2px solid var(--selected-tab-color);
+        }
+
+        :host([round]) ::slotted(*) {
+          gap: 0;
+        }
+
+        :host([round]) ::slotted(.custom-selected) {
+          --md-sys-color-on-surface: var(--md-sys-color-on-tertiary);
+          color: var(--md-sys-color-on-tertiary);
+          background: var(--md-sys-color-tertiary);
+          border: none;
+          border-radius: var(--md-sys-shape-corner-extra-large);
+        }
+        ::-webkit-scrollbar {
+          width: 6px;
+          border-radius: 12px;
+        }
+        ::-webkit-scrollbar-track {
+          background: #f1f1f1;
+        }
+        ::-webkit-scrollbar-thumb {
+          background: #888;
+          border-radius: 12px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+          background: #555;
+        }
+      </style>
+      <slot></slot>
     `;
         }
     });