@pushengineering/umg-web-components 2.0.2 → 2.0.3

package/dist/{packages/web-components/components → components}/table/table.js

@@ -1,21 +1,18 @@
-import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as s, nothing as d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import { LitElement as c } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { customElement as b } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as o } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as h } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
-import { global as u } from "../../styles/global.js";
-import { settings as f } from "../../scripts/settings.js";
-import { mergeStyles as v } from "../../scripts/mergeStyles.js";
+import { css as c, LitElement as b, html as i, nothing as m } from "lit";
+import { customElement as h } from "lit/decorators/custom-element.js";
+import { property as o } from "lit/decorators/property.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { global as v } from "../../styles/global.js";
+import { settings as y } from "../../scripts/settings.js";
+import { mergeStyles as f } from "../../scripts/mergeStyles.js";
 import "../text/text.js";
-import { css as y } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, i = (t, a, p, l) => {
-  for (var e = l > 1 ? void 0 : l ? w(a, p) : a, n = t.length - 1, m; n >= 0; n--)
-    (m = t[n]) && (e = (l ? m(a, p, e) : m(e)) || e);
+var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (t, a, p, l) => {
+  for (var e = l > 1 ? void 0 : l ? w(a, p) : a, n = t.length - 1, d; n >= 0; n--)
+    (d = t[n]) && (e = (l ? d(a, p, e) : d(e)) || e);
   return l && e && g(a, p, e), e;
 };
-const { prefix: x } = f;
-let r = class extends c {
+const { prefix: x } = y;
+let r = class extends b {
   constructor() {
     super(...arguments), this.columnLabels = [], this.rowData = [], this.title = "", this.hideTitle = !1;
   }
@@ -24,13 +21,13 @@ let r = class extends c {
     return t["visually-hidden"] = this.hideTitle, t;
   }
   tableHeader() {
-    return Array.isArray(this.columnLabels) ? s`
+    return Array.isArray(this.columnLabels) ? i`
                 <div
                     class="table-header row"
                     part="table-header"
                     role="rowgroup"
                     >
-                    ${this.columnLabels.map((t) => s`
+                    ${this.columnLabels.map((t) => i`
                         <div
                             class="table-cell"
                             part="table-cell"
@@ -46,18 +43,18 @@ let r = class extends c {
                         </div>
                     `)}
                 </div>
-            ` : d;
+            ` : m;
   }
   tableRows() {
-    return this.rowData && Array.isArray(this.rowData) ? s` ${this.rowData.map((t) => {
+    return this.rowData && Array.isArray(this.rowData) ? i` ${this.rowData.map((t) => {
       if (Array.isArray(t))
-        return s`
+        return i`
                     <div
                         class="table-row row"
                         part="table-row"
                         role="rowgroup"
                         >
-                        ${t.map((a) => s`
+                        ${t.map((a) => i`
                             <div
                                 class="table-cell"
                                 part="table-cell"
@@ -74,10 +71,10 @@ let r = class extends c {
                         `)}
                     </div>
                 `;
-    })}` : d;
+    })}` : m;
   }
   render() {
-    return s`
+    return i`
             <div
                 class="table"
                 part = "table"
@@ -87,7 +84,7 @@ let r = class extends c {
                 >
                 <div
                     id="TableDescription"
-                    class="table-description ${h(this.descriptionClasses())}"
+                    class="table-description ${u(this.descriptionClasses())}"
                     part = "table-description"
                     >
                     <umg-text
@@ -107,9 +104,9 @@ let r = class extends c {
          `;
   }
 };
-r.styles = v([
-  u,
-  y`
+r.styles = f([
+  v,
+  c`
             :host {
                 display: block;
             }
@@ -138,20 +135,20 @@ r.styles = v([
             }
         `
 ]);
-i([
+s([
   o({ type: Array })
 ], r.prototype, "columnLabels", 2);
-i([
+s([
   o({ type: Array })
 ], r.prototype, "rowData", 2);
-i([
+s([
   o()
 ], r.prototype, "title", 2);
-i([
+s([
   o({ type: Boolean })
 ], r.prototype, "hideTitle", 2);
-r = i([
-  b(`${x}-table`)
+r = s([
+  h(`${x}-table`)
 ], r);
 export {
   r as Table

package/dist/components/text/index.d.ts

@@ -0,0 +1,2 @@
+import { Text } from './text';
+export { Text };

package/dist/components/text/text.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import type { TextVariant, TextAs, TextColor, TextAlignment, TextLineHeight, TextTransform, FontWeight, FontStyle, GroupSpacing } from '../../types';
+export declare class Text extends LitElement {
+    as: TextAs;
+    variant: TextVariant;
+    color: TextColor;
+    fontSize: number | undefined;
+    fontWeight: FontWeight;
+    fontStyle: FontStyle;
+    lineHeight: TextLineHeight | undefined;
+    spacing: GroupSpacing | undefined;
+    alignment: TextAlignment | undefined;
+    mobileAlignment: TextAlignment | undefined;
+    withoutMargin: boolean;
+    transform: TextTransform;
+    truncate: boolean;
+    breakWord: boolean;
+    hidden: boolean;
+    textClasses(): any;
+    textStyles(): {};
+    textAs(classes: any): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/{packages/web-components/components → components}/text/text.js

@@ -1,21 +1,19 @@
-import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as a } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import { LitElement as m } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { classMap as n } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
-import { customElement as x } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as i } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
-import { global as c } from "../../styles/global.js";
-import { fontSizes as d, fontWeights as f, fontStyle as u, fontMargins as y } from "../../styles/fonts.js";
-import { settings as b } from "../../scripts/settings.js";
-import { mergeStyles as w } from "../../scripts/mergeStyles.js";
-import { css as v } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-var S = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (t, s, h, l) => {
-  for (var o = l > 1 ? void 0 : l ? $(s, h) : s, p = t.length - 1, g; p >= 0; p--)
-    (g = t[p]) && (o = (l ? g(s, h, o) : g(o)) || o);
-  return l && o && S(s, h, o), o;
+import { css as m, LitElement as c, html as a } from "lit";
+import { classMap as n } from "lit/directives/class-map.js";
+import { styleMap as s } from "lit/directives/style-map.js";
+import { customElement as f } from "lit/decorators/custom-element.js";
+import { property as r } from "lit/decorators/property.js";
+import { global as d } from "../../styles/global.js";
+import { fontSizes as u, fontWeights as y, fontStyle as b, fontMargins as w } from "../../styles/fonts.js";
+import { settings as v } from "../../scripts/settings.js";
+import { mergeStyles as S } from "../../scripts/mergeStyles.js";
+var $ = Object.defineProperty, z = Object.getOwnPropertyDescriptor, i = (t, l, p, h) => {
+  for (var o = h > 1 ? void 0 : h ? z(l, p) : l, g = t.length - 1, x; g >= 0; g--)
+    (x = t[g]) && (o = (h ? x(l, p, o) : x(o)) || o);
+  return h && o && $(l, p, o), o;
 };
-const { prefix: k } = b;
-let e = class extends m {
+const { prefix: k } = v;
+let e = class extends c {
   constructor() {
     super(...arguments), this.as = "p", this.variant = "bodyMd", this.color = "default", this.fontWeight = "regular", this.fontStyle = "normal", this.withoutMargin = !1, this.transform = "none", this.truncate = !1, this.breakWord = !1, this.hidden = !1;
   }
@@ -28,20 +26,27 @@ let e = class extends m {
     };
     return this.color && (t["txt--color-" + this.color] = !0), this.variant && (t["txt--" + this.variant] = !0), this.lineHeight && (t["txt--line-height-" + this.lineHeight] = !0), this.spacing && (t["txt--spacing-" + this.spacing] = !0), this.fontWeight && (t["txt--" + this.fontWeight] = !0), this.fontStyle && (t["txt--" + this.fontStyle] = !0), this.alignment && (t["txt--align-" + this.alignment] = this.alignment), this.mobileAlignment ? t["txt--mobile-align-" + this.mobileAlignment] = !0 : t["txt--mobile-align-" + this.alignment] = this.alignment, this.withoutMargin && this.as !== "span" && (t["text--without-margin"] = !0), this.transform !== "none" && (t["txt-transform--" + this.transform] = !0), t;
   }
+  textStyles() {
+    let t = {};
+    return this.fontSize && (t = {
+      ...t,
+      "--um-font-size": this.fontSize / 16
+    }), t;
+  }
   textAs(t) {
     switch (this.as) {
       case "p":
-        return a`<p part="p-text paragraph" class="paragraph${n(t)}"><slot></slot></p>`;
+        return a`<p part="p-text paragraph" class="paragraph${n(t)}" style="${s(this.textStyles())}"><slot></slot></p>`;
       case "h1":
-        return a`<h1 part="h1-text heading" class="heading${n(t)}"><slot></slot></h1>`;
+        return a`<h1 part="h1-text heading" class="heading${n(t)}" style="${s(this.textStyles())}"><slot></slot></h1>`;
       case "h2":
-        return a`<h2 part="h2-text heading" class="heading${n(t)}"><slot></slot></h2>`;
+        return a`<h2 part="h2-text heading" class="heading${n(t)}" style="${s(this.textStyles())}"><slot></slot></h2>`;
       case "h3":
-        return a`<h3 part="h3-text heading" class="heading${n(t)}"><slot></slot></h3>`;
+        return a`<h3 part="h3-text heading" class="heading${n(t)}" style="${s(this.textStyles())}"><slot></slot></h3>`;
       case "h4":
-        return a`<h4 part="h4-text heading" class="heading${n(t)}"><slot></slot></h4>`;
+        return a`<h4 part="h4-text heading" class="heading${n(t)}" style="${s(this.textStyles())}"><slot></slot></h4>`;
       case "h5":
-        return a`<h5 part="h5-text heading" class="heading${n(t)}"><slot></slot></h5>`;
+        return a`<h5 part="h5-text heading" class="heading${n(t)}" style="${s(this.textStyles())}"><slot></slot></h5>`;
       case "skeleton":
         return a`<div class="skeleton${n(t)}"><slot></slot></div>`;
       default:
@@ -53,13 +58,13 @@ let e = class extends m {
     return a`${this.textAs(this.textClasses())}`;
   }
 };
-e.styles = w([
-  c,
+e.styles = S([
   d,
-  f,
   u,
   y,
-  v`
+  b,
+  w,
+  m`
             .skeleton {
                 display: flex;
                 background-color: rgb(var(--um-color-skeleton-bg, 1));
@@ -195,50 +200,53 @@ e.styles = w([
             }
         `
 ]);
-r([
-  i({ type: String })
+i([
+  r({ type: String })
 ], e.prototype, "as", 2);
-r([
-  i({ type: String })
+i([
+  r({ type: String })
 ], e.prototype, "variant", 2);
-r([
-  i({ type: String })
+i([
+  r({ type: String })
 ], e.prototype, "color", 2);
-r([
-  i({ type: String })
+i([
+  r({ type: Number })
+], e.prototype, "fontSize", 2);
+i([
+  r({ type: String })
 ], e.prototype, "fontWeight", 2);
-r([
-  i({ type: String })
+i([
+  r({ type: String })
 ], e.prototype, "fontStyle", 2);
-r([
-  i({ type: String })
+i([
+  r({ type: String })
 ], e.prototype, "lineHeight", 2);
-r([
-  i({ type: String })
+i([
+  r({ type: String })
 ], e.prototype, "spacing", 2);
-r([
-  i({ type: String })
+i([
+  r({ type: String })
 ], e.prototype, "alignment", 2);
-r([
-  i({ type: String })
+i([
+  r({ type: String })
 ], e.prototype, "mobileAlignment", 2);
-r([
-  i({ type: Boolean })
+i([
+  r({ type: Boolean })
 ], e.prototype, "withoutMargin", 2);
-r([
-  i()
+i([
+  r()
 ], e.prototype, "transform", 2);
-r([
-  i({ type: Boolean })
+i([
+  r({ type: Boolean })
 ], e.prototype, "truncate", 2);
-r([
-  i({ type: Boolean })
+i([
+  r({ type: Boolean })
 ], e.prototype, "breakWord", 2);
-r([
-  i({ type: Boolean })
+i([
+  r({ type: Boolean })
 ], e.prototype, "hidden", 2);
-e = r([
-  x(`${k}-text`)
+e = i([
+  f(`${k}-text`)
 ], e);
 export {
   e as Text

package/dist/components/text-field/index.d.ts

@@ -0,0 +1,2 @@
+import { TextField } from './text-field';
+export { TextField };

package/dist/components/text-field/text-field.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+import type { FieldTextType } from '../../types';
+export declare class TextField extends LitElement {
+    type: FieldTextType;
+    hideLabel: boolean;
+    multiline: boolean;
+    placeholder: string;
+    disabled: boolean;
+    required: boolean;
+    id: string;
+    error: boolean;
+    name: string;
+    value: string;
+    fieldClasses(): any;
+    inputClasses(): any;
+    labelClasses(): any;
+    renderLabel(classes: any): import("lit").TemplateResult<1>;
+    renderInput(classes: any): import("lit").TemplateResult<1>;
+    renderTextarea(classes: any): import("lit").TemplateResult<1>;
+    renderErrorMessage(): import("lit").TemplateResult<1> | undefined;
+    inputAs(classes: any): import("lit").TemplateResult<1>;
+    checkIfMultiline(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/{packages/web-components/components → components}/text-field/text-field.js

@@ -1,20 +1,17 @@
-import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as s } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import { LitElement as c } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { customElement as h } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as t } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as a } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { css as c, LitElement as h, html as s } from "lit";
+import { customElement as f } from "lit/decorators/custom-element.js";
+import { property as t } from "lit/decorators/property.js";
+import { classMap as a } from "lit/directives/class-map.js";
 import { global as m } from "../../styles/global.js";
-import { settings as f } from "../../scripts/settings.js";
-import { mergeStyles as b } from "../../scripts/mergeStyles.js";
-import { css as _ } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+import { settings as b } from "../../scripts/settings.js";
+import { mergeStyles as _ } from "../../scripts/mergeStyles.js";
 var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, o, n, d) => {
-  for (var l = d > 1 ? void 0 : d ? y(o, n) : o, p = e.length - 1, u; p >= 0; p--)
-    (u = e[p]) && (l = (d ? u(o, n, l) : u(l)) || l);
+  for (var l = d > 1 ? void 0 : d ? y(o, n) : o, u = e.length - 1, p; u >= 0; u--)
+    (p = e[u]) && (l = (d ? p(o, n, l) : p(l)) || l);
   return d && l && v(o, n, l), l;
 };
-const { prefix: x } = f;
-let r = class extends c {
+const { prefix: x } = b;
+let r = class extends h {
   constructor() {
     super(...arguments), this.type = "text", this.hideLabel = !1, this.multiline = !1, this.placeholder = "", this.disabled = !1, this.required = !1, this.id = "", this.error = !1, this.name = "", this.value = "";
   }
@@ -124,9 +121,9 @@ let r = class extends c {
         `;
   }
 };
-r.styles = b([
+r.styles = _([
   m,
-  _`
+  c`
             /* Base */
             .field {
                 display: flex;
@@ -250,7 +247,7 @@ i([
   t({ reflect: !0 })
 ], r.prototype, "value", 2);
 r = i([
-  h(`${x}-text-field`)
+  f(`${x}-text-field`)
 ], r);
 export {
   r as TextField

package/dist/components/thumbnail-slider/index.d.ts

@@ -0,0 +1,2 @@
+import { ThumbnailSlider } from './thumbnail-slider';
+export { ThumbnailSlider };

package/dist/components/thumbnail-slider/thumbnail-slide.d.ts

@@ -0,0 +1,5 @@
+import { Slide } from '../slider/slide';
+export declare class ThumbnailSlide extends Slide {
+    mediaId: string;
+    static styles: (import("lit").CSSResult | import("lit").CSSResultArray)[];
+}

package/dist/components/thumbnail-slider/thumbnail-slide.js

@@ -0,0 +1,48 @@
+import { css as n } from "lit";
+import { property as c } from "lit/decorators/property.js";
+import { customElement as d } from "lit/decorators/custom-element.js";
+import { Slide as m } from "../slider/slide.js";
+import { settings as f } from "../../scripts/settings.js";
+var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (l, e, s, t) => {
+  for (var r = t > 1 ? void 0 : t ? b(e, s) : e, i = l.length - 1, p; i >= 0; i--)
+    (p = l[i]) && (r = (t ? p(e, s, r) : p(r)) || r);
+  return t && r && u(e, s, r), r;
+};
+const { prefix: v } = f;
+let o = class extends m {
+  constructor() {
+    super(...arguments), this.mediaId = "";
+  }
+};
+o.styles = [
+  m.styles,
+  n`
+            :host {
+                padding: var(--um-space-4, 0.25rem);
+            }
+            :host([active]) {
+                padding: 0;
+                position: relative;
+            }
+            :host([active])::after {
+                content: '';
+                display: block;
+                position: absolute;
+                inset: 0;
+                background-color: rgb(255,255,255,0.2);
+                cursor: default;
+            }
+            li {
+                border: 0.0625rem solid rgb(0,0,0,0.1);
+            }
+        `
+];
+a([
+  c()
+], o.prototype, "mediaId", 2);
+o = a([
+  d(`${v}-thumbnail-slide`)
+], o);
+export {
+  o as ThumbnailSlide
+};

package/dist/components/thumbnail-slider/thumbnail-slider.d.ts

@@ -0,0 +1,20 @@
+import { Slider } from '../slider';
+import './thumbnail-slide';
+import { EventManager } from '../../classes/event-manager/event-manager.js';
+import { SlideEvent } from '../../classes/event-manager/types.js';
+export declare class ThumbnailSlider extends Slider {
+    currentMediaId: string;
+    contentType: string;
+    desktopSlider: boolean;
+    mobileSlider: boolean;
+    slideEventManager: EventManager;
+    constructor();
+    private _initialiseSlides;
+    slidesChanged(): void;
+    private _updateActiveSlide;
+    private _updateActiveMedia;
+    private _eventsDispatcher;
+    protected _customEventsHandler(e: SlideEvent): void;
+    updated(changedProperties: Map<string, any>): void;
+    gridClasses(): any;
+}

package/dist/{packages/web-components/components → components}/thumbnail-slider/thumbnail-slider.js

@@ -1,16 +1,16 @@
-import { customElement as c } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as n } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { customElement as c } from "lit/decorators/custom-element.js";
+import { property as n } from "lit/decorators/property.js";
 import { Slider as u } from "../slider/slider.js";
 import "./thumbnail-slide.js";
 import { settings as p } from "../../scripts/settings.js";
 import { EventManager as h } from "../../classes/event-manager/event-manager.js";
-var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, d = (e, t, s, r) => {
+var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (e, t, s, r) => {
   for (var i = r > 1 ? void 0 : r ? m(t, s) : t, o = e.length - 1, l; o >= 0; o--)
     (l = e[o]) && (i = (r ? l(t, s, i) : l(i)) || i);
   return r && i && v(t, s, i), i;
 };
 const { prefix: f } = p;
-let a = class extends u {
+let d = class extends u {
   constructor() {
     super(), this.currentMediaId = "", this.contentType = "slider", this.desktopSlider = !0, this.mobileSlider = !0, this.slideEventManager = new h(this);
     const e = [...this.constructor.eventTypes];
@@ -68,21 +68,21 @@ let a = class extends u {
     return e["slider--selectable"] = !0, e;
   }
 };
-d([
+a([
   n({ reflect: !0 })
-], a.prototype, "currentMediaId", 2);
-d([
+], d.prototype, "currentMediaId", 2);
+a([
   n({ state: !0 })
-], a.prototype, "contentType", 2);
-d([
+], d.prototype, "contentType", 2);
+a([
   n({ state: !0, type: Boolean })
-], a.prototype, "desktopSlider", 2);
-d([
+], d.prototype, "desktopSlider", 2);
+a([
   n({ state: !0, type: Boolean })
-], a.prototype, "mobileSlider", 2);
-a = d([
+], d.prototype, "mobileSlider", 2);
+d = a([
   c(`${f}-thumbnail-slider`)
-], a);
+], d);
 export {
-  a as ThumbnailSlider
+  d as ThumbnailSlider
 };

package/dist/components/vertical-stack/index.d.ts

@@ -0,0 +1,2 @@
+import { VerticalStack } from './vertical-stack';
+export { VerticalStack };

package/dist/components/vertical-stack/vertical-stack.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import type { GroupAlign } from '../../types';
+export declare class VerticalStack extends LitElement {
+    gap: number | undefined;
+    align: GroupAlign;
+    justify: GroupAlign;
+    mobileAlign: GroupAlign | undefined;
+    mobileJustify: GroupAlign | undefined;
+    stackStyles(): {};
+    stackClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}