@vandeurenglenn/lite-elements 0.3.50 → 0.3.52

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>
     `;
         }
     });

package/exports/text-field.js

@@ -64,15 +64,15 @@ let TextField = (() => {
             this.trailingIconSlot.addEventListener('slotchange', this.#trailingIconSlotChange);
         }
         static styles = [
-            css `
-      :host {
-        display: block;
-      }
-      .label {
-      }
-
-      :host([has-leading-icon]) {
-      }
+            css `
+      :host {
+        display: block;
+      }
+      .label {
+      }
+
+      :host([has-leading-icon]) {
+      }
     `
         ];
         render() {

package/exports/theme.js

@@ -82,14 +82,14 @@ let CustomTheme = (() => {
             // this.load('./themes/default/tokens.js')
             this.load('./themes/default/theme.css');
             const style = document.createElement('style');
-            style.innerHTML = `
-    html, body {
-      inset: 0;
-      position: absolute;
-      margin: 0;
-      background: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-      overflow: hidden;
+            style.innerHTML = `
+    html, body {
+      inset: 0;
+      position: absolute;
+      margin: 0;
+      background: var(--md-sys-color-background);
+      color: var(--md-sys-color-on-background);
+      overflow: hidden;
     }`;
             document.head.appendChild(style);
             if (this.loadFont || this.loadSymbols)