@skf-design-system/ui-components 1.0.0-beta.7 → 1.0.1-beta.1

package/dist/components/dialog/dialog.component.js

@@ -119,9 +119,7 @@ const y = class y extends v {
     })}
 			>
 				<div class="dialog__head">
-					<h2 class="dialog__heading">
-						<slot name="heading"></slot>
-					</h2>
+					<h2 class="dialog__heading">${this.heading}</h2>
 					${this.noCloseButton ? k : b`
 								<button
 									@click=${this._handleClose}
@@ -137,7 +135,7 @@ const y = class y extends v {
 					<slot
 						class=${$({
       dialog__foot: !0,
-      "dialog__foot-hidden": !this.renderFoot
+      "dialog__foot--hidden": !this.renderFoot
     })}
 						name="footer"
 					></slot>

package/dist/components/icon/icon.component.d.ts

@@ -10,7 +10,6 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfIcon extends SkfElement {
     static styles: CSSResultGroup;
-    private _rootId;
     /**
      * Sets the color of the icon
      * @type { "primary" | "inverse" | "emphasised" | "secondary" | "success" | "info" | "warning" | "error" | "alert" }
@@ -27,8 +26,6 @@ export declare class SkfIcon extends SkfElement {
      * Size of the icon
      * @type { "xs" | "sm" | "md" | "lg" }
      */
-    size?: IconSize;
-    private renderDecorativeIcon;
-    private renderInformativeIcon;
+    size: IconSize;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/icon/icon.component.js

@@ -1,30 +1,39 @@
 import { SkfElement as f } from "../../internal/components/skf-element.js";
-import { ICONS as d } from "@skf-design-system/ui-assets";
-import h from "../../styles/component.styles.js";
-import { html as l } from "lit";
+import { ICONS as c } from "@skf-design-system/ui-assets";
+import d from "../../styles/component.styles.js";
+import { html as h } from "lit";
 import { property as t } from "lit/decorators.js";
-import { ifDefined as c } from "lit/directives/if-defined.js";
-import { when as v } from "lit/directives/when.js";
-import u from "./icon.styles.js";
-var y = Object.defineProperty, o = (m, n, p, I) => {
-  for (var r = void 0, i = m.length - 1, a; i >= 0; i--)
-    (a = m[i]) && (r = a(n, p, r) || r);
-  return r && y(n, p, r), r;
+import { classMap as u } from "lit/directives/class-map.js";
+import { ifDefined as s } from "lit/directives/if-defined.js";
+import v from "./icon.styles.js";
+var y = Object.defineProperty, o = (m, p, a, $) => {
+  for (var r = void 0, i = m.length - 1, n; i >= 0; i--)
+    (n = m[i]) && (r = n(p, a, r) || r);
+  return r && y(p, a, r), r;
 };
-const s = class s extends f {
+const l = class l extends f {
   constructor() {
-    super(...arguments), this._rootId = "root", this.color = "primary", this.size = "md", this.renderDecorativeIcon = () => l`
-		<div aria-hidden="true" id=${this._rootId}>${d[this.name]}</div>
-	`, this.renderInformativeIcon = () => l`
-		<div aria-label=${c(this.label)} id=${this._rootId} role="img">${d[this.name]}</div>
-	`;
+    super(...arguments), this.color = "primary", this.size = "md";
   }
   render() {
-    return v(!!this.label, this.renderInformativeIcon, this.renderDecorativeIcon);
+    return h`
+			<div
+				aria-hidden=${s(this.label ? void 0 : "true")}
+				aria-label=${s(this.label)}
+				class=${u({
+      icon: !0,
+      [`icon--color-${this.color}`]: !0,
+      [`icon--size-${this.size}`]: !0
+    })}
+				role=${s(this.label ? "img" : void 0)}
+			>
+				${c[this.name]}
+			</div>
+		`;
   }
 };
-s.styles = [h, u];
-let e = s;
+l.styles = [d, v];
+let e = l;
 o([
   t({ reflect: !0 })
 ], e.prototype, "color");

package/dist/components/icon/icon.styles.js

@@ -1,78 +1,84 @@
 import { css as o } from "lit";
-const r = o`
+const i = o`
+	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		:host {
 			display: inline-flex;
 		}
 
-		#root {
-			--_skf-icon-size: var(--skf-icon-size-md);
+		:host-context(.skf-icon-host) {
+			color: inherit;
+		}
 
+		.icon {
 			block-size: var(--_skf-icon-size);
-			color: var(--_skf-icon-color, var(--skf-icon-color-primary));
 			display: inline-flex;
 			flex-shrink: 0; /* Prevents shrink when flex-child */
 			inline-size: var(--_skf-icon-size);
 			pointer-events: none;
 			user-select: none;
 
-			:host-context(.skf-icon-host) & {
-				color: inherit;
+			:not(:host-context(.skf-icon-host)) & {
+				color: var(--_skf-icon-color, var(--skf-icon-color-primary));
 			}
+		}
 
-			/**
-			 * Colors
-			 */
-			:host([color='secondary']) & {
-				--_skf-icon-color: var(--skf-icon-color-secondary);
-			}
+		/**
+		 * Colors
+		 */
+		.icon--color-secondary {
+			--_skf-icon-color: var(--skf-icon-color-secondary);
+		}
 
-			:host([color='inverse']) & {
-				--_skf-icon-color: var(--skf-icon-color-inverse);
-			}
+		.icon--color-inverse {
+			--_skf-icon-color: var(--skf-icon-color-inverse);
+		}
 
-			:host([color='emphasised']) & {
-				--_skf-icon-color: var(--skf-icon-color-emphasised);
-			}
+		.icon--color-emphasised {
+			--_skf-icon-color: var(--skf-icon-color-emphasised);
+		}
 
-			/* Severity */
-			:host([color='alert']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-alert);
-			}
+		/* Severity */
+		.icon--color-alert {
+			--_skf-icon-color: var(--skf-severity-fg-color-alert);
+		}
 
-			:host([color='error']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-error);
-			}
+		.icon--color-error {
+			--_skf-icon-color: var(--skf-severity-fg-color-error);
+		}
 
-			:host([color='info']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-info);
-			}
+		.icon--color-info {
+			--_skf-icon-color: var(--skf-severity-fg-color-info);
+		}
 
-			:host([color='success']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-success);
-			}
+		.icon--color-success {
+			--_skf-icon-color: var(--skf-severity-fg-color-success);
+		}
 
-			:host([color='warning']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-warning);
-			}
+		.icon--color-warning {
+			--_skf-icon-color: var(--skf-severity-fg-color-warning);
+		}
 
-			/**
-			 * Sizes
-			 */
-			:host([size='xs']) & {
-				--_skf-icon-size: var(--skf-icon-size-xs);
-			}
+		/**
+		 * Sizes
+		 */
+		.icon--size-xs {
+			--_skf-icon-size: var(--skf-icon-size-xs);
+		}
 
-			:host([size='sm']) & {
-				--_skf-icon-size: var(--skf-icon-size-sm);
-			}
+		.icon--size-sm {
+			--_skf-icon-size: var(--skf-icon-size-sm);
+		}
 
-			:host([size='lg']) & {
-				--_skf-icon-size: var(--skf-icon-size-lg);
-			}
+		.icon--size-md {
+			--_skf-icon-size: var(--skf-icon-size-md);
+		}
+
+		.icon--size-lg {
+			--_skf-icon-size: var(--skf-icon-size-lg);
 		}
 	}
 `;
 export {
-  r as default
+  i as default
 };

package/dist/components/input/input.component.d.ts

@@ -105,6 +105,7 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     private _passwordController;
     protected firstUpdated(): void;
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    valueChanged(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /** @internal */
     _handleInput: () => void;

package/dist/components/input/input.component.js

@@ -2,22 +2,23 @@ import "../icon/icon.js";
 import { FormBase as b } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
 import { hintSeverity as v } from "../../internal/helpers/hintSeverity.js";
-import { Asterisk as y } from "../../internal/templates/asterisk.js";
-import f from "../../styles/component.styles.js";
-import { html as h, nothing as d } from "lit";
-import { property as e, state as c, query as _, queryAssignedNodes as $ } from "lit/decorators.js";
+import { watch as y } from "../../internal/helpers/watch.js";
+import { Asterisk as f } from "../../internal/templates/asterisk.js";
+import _ from "../../styles/component.styles.js";
+import { html as h, nothing as u } from "lit";
+import { property as i, state as c, query as $, queryAssignedNodes as g } from "lit/decorators.js";
 import { ifDefined as n } from "lit/directives/if-defined.js";
-import { live as g } from "lit/directives/live.js";
-import { InputNumberController as w, InputPasswordController as E } from "./input.controllers.js";
+import { live as w } from "lit/directives/live.js";
+import { InputNumberController as E, InputPasswordController as C } from "./input.controllers.js";
 import A from "./input.styles.js";
-var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (m, s, r, a) => {
-  for (var o = a > 1 ? void 0 : a ? S(s, r) : s, l = m.length - 1, u; l >= 0; l--)
-    (u = m[l]) && (o = (a ? u(s, r, o) : u(o)) || o);
-  return a && o && C(s, r, o), o;
+var S = Object.defineProperty, L = Object.getOwnPropertyDescriptor, e = (m, s, r, a) => {
+  for (var o = a > 1 ? void 0 : a ? L(s, r) : s, l = m.length - 1, d; l >= 0; l--)
+    (d = m[l]) && (o = (a ? d(s, r, o) : d(o)) || o);
+  return a && o && S(s, r, o), o;
 };
 const p = class p extends b {
   constructor() {
-    super(...arguments), this.buttonAriaLabelClear = "Clear input", this.buttonAriaLabelHide = "Hide password", this.buttonAriaLabelShow = "Show password", this.inputmode = "text", this.size = "md", this.type = "text", this.validateOn = "change", this.value = "", this.invalid = !1, this._buttonDown = !1, this._numberController = new w(this), this._passwordController = new E(this), this._handleInput = () => {
+    super(...arguments), this.buttonAriaLabelClear = "Clear input", this.buttonAriaLabelHide = "Hide password", this.buttonAriaLabelShow = "Show password", this.inputmode = "text", this.size = "md", this.type = "text", this.validateOn = "change", this.value = "", this.invalid = !1, this._buttonDown = !1, this._numberController = new E(this), this._passwordController = new C(this), this._handleInput = () => {
       this.value = this.$input.value || "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
     }, this._resetValue = (s) => {
       var r;
@@ -91,6 +92,9 @@ const p = class p extends b {
       } else
         this.removeAttribute("invalid"), !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
   }
+  valueChanged() {
+    this._internals.setFormValue(this.value), console.log("updated internals", this.$input.value), this.validateInput();
+  }
   attributeChangedCallback(s, r, a) {
     if (super.attributeChangedCallback(s, r, a), s === "value" && this._internals.setFormValue(a), s === "custom-invalid")
       if (typeof a == "string") {
@@ -131,10 +135,10 @@ const p = class p extends b {
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${s} id="label">
 						<slot>${this.label}</slot>
-						${this.required ? y(this.requiredLabel) : null}
+						${this.required ? f(this.requiredLabel) : null}
 					</div>
 					<div id="input">
-						${this.type === "search" ? h`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : d}
+						${this.type === "search" ? h`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : u}
 						<div
 							data-leading=${n(this.leading)}
 							data-trailing=${n(this.trailing)}
@@ -144,12 +148,12 @@ const p = class p extends b {
 								?disabled=${this.disabled}
 								?readonly=${this.readonly}
 								?required=${this.required}
-								.value=${g(this.value)}
+								.value=${w(this.value)}
 								@blur=${this._onBlur}
 								@input=${this._handleInput}
 								autocomplete=${this.autocomplete}
-								aria-describedby=${n((o = this.hint) != null && o.trim() ? "hint" : d)}
-								aria-errormessage=${n((l = this.hint) != null && l.trim() ? "hint" : d)}
+								aria-describedby=${n((o = this.hint) != null && o.trim() ? "hint" : u)}
+								aria-errormessage=${n((l = this.hint) != null && l.trim() ? "hint" : u)}
 								aria-invalid=${!!this.invalid}
 								autocomplete="off"
 								data-testid="field-input"
@@ -170,9 +174,9 @@ const p = class p extends b {
 									<div id="action">
 										${this._renderNumberButton("inc")} ${this._renderNumberButton("dec")}
 									</div>
-								` : d}
-						${this.type === "password" ? this._renderPasswordButton() : d}
-						${this.type === "search" && this.value.length > 0 ? this._renderSearchButton() : d}
+								` : u}
+						${this.type === "password" ? this._renderPasswordButton() : u}
+						${this.type === "search" && this.value.length > 0 ? this._renderSearchButton() : u}
 					</div>
 				</label>
 				${this.hint && h`
@@ -187,101 +191,104 @@ const p = class p extends b {
 		`;
   }
 };
-p.styles = [f, A];
+p.styles = [_, A];
 let t = p;
-i([
-  e({ type: String })
+e([
+  i({ type: String })
 ], t.prototype, "autocomplete", 2);
-i([
-  e({ attribute: "button-aria-label-clear" })
+e([
+  i({ attribute: "button-aria-label-clear" })
 ], t.prototype, "buttonAriaLabelClear", 2);
-i([
-  e({ attribute: "button-aria-label-hide" })
+e([
+  i({ attribute: "button-aria-label-hide" })
 ], t.prototype, "buttonAriaLabelHide", 2);
-i([
-  e({ attribute: "button-aria-label-show" })
+e([
+  i({ attribute: "button-aria-label-show" })
 ], t.prototype, "buttonAriaLabelShow", 2);
-i([
-  e({ attribute: "custom-invalid", reflect: !0 })
+e([
+  i({ attribute: "custom-invalid", reflect: !0 })
 ], t.prototype, "customInvalid", 1);
-i([
-  e({ type: Boolean })
+e([
+  i({ type: Boolean })
 ], t.prototype, "debug", 2);
-i([
-  e({ type: Boolean, attribute: "hide-label" })
+e([
+  i({ type: Boolean, attribute: "hide-label" })
 ], t.prototype, "hideLabel", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "hint", 2);
-i([
-  e({ type: String })
+e([
+  i({ type: String })
 ], t.prototype, "inputmode", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "label", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "leading", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "max", 2);
-i([
-  e({ type: Number, attribute: "maxlength" })
+e([
+  i({ type: Number, attribute: "maxlength" })
 ], t.prototype, "maxLength", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "min", 2);
-i([
-  e({ type: Number, attribute: "minlength" })
+e([
+  i({ type: Number, attribute: "minlength" })
 ], t.prototype, "minLength", 2);
-i([
-  e()
+e([
+  i({ reflect: !0 })
 ], t.prototype, "name", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "pattern", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "placeholder", 2);
-i([
-  e({ type: Boolean })
+e([
+  i({ type: Boolean })
 ], t.prototype, "readonly", 2);
-i([
-  e({ attribute: "required-label" })
+e([
+  i({ attribute: "required-label" })
 ], t.prototype, "requiredLabel", 2);
-i([
-  e({ reflect: !0 })
+e([
+  i({ reflect: !0 })
 ], t.prototype, "severity", 2);
-i([
-  e({ type: Boolean, attribute: "show-valid" })
+e([
+  i({ type: Boolean, attribute: "show-valid" })
 ], t.prototype, "showValid", 2);
-i([
-  e({ reflect: !0 })
+e([
+  i({ reflect: !0 })
 ], t.prototype, "size", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "trailing", 2);
-i([
-  e()
+e([
+  i()
 ], t.prototype, "type", 2);
-i([
-  e({ type: String, attribute: "validate-on" })
+e([
+  i({ type: String, attribute: "validate-on" })
 ], t.prototype, "validateOn", 2);
-i([
-  e()
+e([
+  i({ reflect: !0 })
 ], t.prototype, "value", 2);
-i([
+e([
   c()
 ], t.prototype, "invalid", 2);
-i([
+e([
   c()
 ], t.prototype, "_buttonDown", 2);
-i([
-  _("input")
+e([
+  $("input")
 ], t.prototype, "$input", 2);
-i([
-  $({ flatten: !0 })
+e([
+  g({ flatten: !0 })
 ], t.prototype, "_defaultSlot", 2);
+e([
+  y("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+], t.prototype, "valueChanged", 1);
 export {
   t as SkfInput
 };

package/dist/components/link/link.component.d.ts

@@ -15,6 +15,7 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfLink extends SkfElement {
     static styles: CSSResultGroup;
+    static classMap: {};
     private _onClick?;
     /** Defines the semantic element to render */
     as: 'button' | 'a';

package/dist/components/link/link.component.js

@@ -5,14 +5,14 @@ import u from "../../styles/component.styles.js";
 import "lit";
 import { property as r } from "lit/decorators.js";
 import { classMap as k } from "lit/directives/class-map.js";
-import { ifDefined as n } from "lit/directives/if-defined.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
 import { html as f, literal as m } from "lit/static-html.js";
-var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (h, t, i, c) => {
-  for (var s = c > 1 ? void 0 : c ? g(t, i) : t, l = h.length - 1, p; l >= 0; l--)
-    (p = h[l]) && (s = (c ? p(t, i, s) : p(s)) || s);
-  return c && s && v(t, i, s), s;
-};
-const a = class a extends d {
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (h, t, i, l) => {
+  for (var n = l > 1 ? void 0 : l ? g(t, i) : t, p = h.length - 1, a; p >= 0; p--)
+    (a = h[p]) && (n = (l ? a(t, i, n) : a(n)) || n);
+  return l && n && v(t, i, n), n;
+}, s;
+const e = (s = class extends d {
   constructor() {
     super(...arguments), this.as = "a", this.color = "primary", this.iconPlacement = "left", this.stretch = !1, this.type = "button", this._preprocessOnClick = (t) => {
       this.as === "a" && this.onClick && t.preventDefault(), t.stopPropagation(), this.emit("click");
@@ -21,8 +21,8 @@ const a = class a extends d {
   set onClick(t) {
     if (!t) return;
     this._onClick = t;
-    const i = (c) => {
-      t(c, this.href ?? this.route);
+    const i = (l) => {
+      t(l, this.href ?? this.route);
     };
     this._assertValidOnClick(t), this.removeEventListener("click", i), this.addEventListener("click", i);
   }
@@ -48,36 +48,35 @@ const a = class a extends d {
       inverse: "inverse"
     });
     return f`
-			<skf-icon color=${t[this.color]} name=${n(this.icon)} size="sm"></skf-icon>
+			<skf-icon color=${t[this.color]} name=${c(this.icon)} size="sm"></skf-icon>
 		`;
   }
   render() {
     const t = this.as === "a", i = t ? m`a` : m`button`;
     return f`
 			<${i}
-				?disabled=${n(t ? void 0 : this.disabled)}
+				?disabled=${c(t ? void 0 : this.disabled)}
 				@click=${this._preprocessOnClick}
 				class=${k({
       link: !0,
       "link--color-inverse": this.color === "inverse",
       "link--color-primary": this.color === "primary",
       "link--icon-right": this.iconPlacement === "right",
-      "link--stretch": this.stretch
+      "link--stretch": this.stretch,
+      ...s.classMap
     })}
-        		download=${n(t ? this.download : void 0)}
-				href=${n(t ? this.href : void 0)}
-				rel=${n(t ? this.rel : void 0)}
-				target=${n(t ? this.target : void 0)}
-				type=${n(t ? void 0 : this.type)}
+        		download=${c(t ? this.download : void 0)}
+				href=${c(t ? this.href : void 0)}
+				rel=${c(t ? this.rel : void 0)}
+				target=${c(t ? this.target : void 0)}
+				type=${c(t ? void 0 : this.type)}
 			>
 				${this.icon && this._renderIcon()}
 				<slot>Default link text</slot>
 			</${i}>
 		`;
   }
-};
-a.styles = [u, y];
-let e = a;
+}, s.styles = [u, y], s.classMap = {}, s);
 o([
   r({ type: String, reflect: !0 })
 ], e.prototype, "as", 2);
@@ -117,6 +116,7 @@ o([
 o([
   r({ attribute: !1 })
 ], e.prototype, "onClick", 1);
+let E = e;
 export {
-  e as SkfLink
+  E as SkfLink
 };

package/dist/components/menu/menu.component.d.ts

@@ -0,0 +1,24 @@
+import { SkfPopoverBase } from '../../internal/base-classes/popover/popover.base.js';
+import type { CSSResultGroup } from 'lit';
+/**
+ * The `<skf-menu>` is a component that displays a list of actions or options.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @property {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} [placement='bottom-start'] - The placement of the menu
+ * @property {boolean} [isOpen=false] - Whether the menu is open
+ * @property {string} [anchor] - The id of the element the menu will be anchored to
+ *
+ * @event open - Fired when the menu is opened
+ * @event close - Fired when the menu is closed
+ *
+ * @slot - The menu popover content
+ *
+ * @tagname skf-menu
+ */
+export declare class SkfMenu extends SkfPopoverBase {
+    static styles: CSSResultGroup;
+    constructor();
+    addEventListeners($element: HTMLElement | Element): void;
+    removeEventListeners($element: HTMLElement | Element): void;
+}

package/dist/components/menu/menu.component.js

@@ -0,0 +1,18 @@
+import { SkfPopoverBase as t } from "../../internal/base-classes/popover/popover.base.js";
+import { styles as o } from "./menu.styles.js";
+const s = class s extends t {
+  constructor() {
+    super(), this.placement = "bottom-start", t.classMap = { menu: !0 };
+  }
+  addEventListeners(e) {
+    e.addEventListener("mouseenter", this.open);
+  }
+  removeEventListeners(e) {
+    e.removeEventListener("mouseenter", this.open);
+  }
+};
+s.styles = [t.styles, o];
+let r = s;
+export {
+  r as SkfMenu
+};

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,8 @@
+import { SkfMenu } from './menu.component';
+export * from './menu.component';
+export default SkfMenu;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-menu': SkfMenu;
+    }
+}

package/dist/components/menu/menu.js

@@ -0,0 +1,6 @@
+import { SkfMenu as e } from "./menu.component.js";
+e.define("skf-menu");
+export {
+  e as SkfMenu,
+  e as default
+};

package/dist/components/menu/menu.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;