scb-wc-test 0.1.1

package/scb-icon-button/scb-icon-button.js

@@ -0,0 +1,208 @@
+import { css as u, LitElement as h, html as a } from "lit";
+import { property as s, customElement as b } from "lit/decorators.js";
+var m = Object.defineProperty, p = Object.getOwnPropertyDescriptor, l = (t, o, e, r) => {
+  for (var i = r > 1 ? void 0 : r ? p(o, e) : o, d = t.length - 1, c; d >= 0; d--)
+    (c = t[d]) && (i = (r ? c(o, e, i) : c(i)) || i);
+  return r && i && m(o, e, i), i;
+};
+let n = class extends h {
+  constructor() {
+    super(...arguments), this.ariaLabel = "", this.variant = "standard", this.icon = "home", this.toggle = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.error = !1, this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__onChange = () => {
+      const t = this.__lastBtn;
+      this.dispatchEvent(new CustomEvent("change", {
+        detail: { selected: !!(t != null && t.selected) },
+        bubbles: !0,
+        composed: !0
+      }));
+    };
+  }
+  __attachChangeListener() {
+    var o, e, r;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(
+      "md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button"
+    );
+    t && t !== this.__lastBtn && ((r = (e = this.__lastBtn) == null ? void 0 : e.removeEventListener) == null || r.call(e, "change", this.__onChange), t.addEventListener("change", this.__onChange), this.__lastBtn = t);
+  }
+  async firstUpdated() {
+    await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener();
+  }
+  updated(t) {
+    super.updated(t), t.has("disabled") && this.toggleAttribute("aria-disabled", this.disabled), t.has("variant") || t.has("icon") || t.has("toggle") ? this.__ensureDepsLoaded().then(() => queueMicrotask(() => this.__attachChangeListener())) : queueMicrotask(() => this.__attachChangeListener());
+  }
+  // koppla loss lyssnare om host tas bort
+  disconnectedCallback() {
+    var t, o;
+    super.disconnectedCallback(), (o = (t = this.__lastBtn) == null ? void 0 : t.removeEventListener) == null || o.call(t, "change", this.__onChange), this.__lastBtn = null;
+  }
+  //  Ladda in rätt Material-komponenter vid behov (variant + ikon)
+  async __ensureDepsLoaded() {
+    if (!this.__loadedVariants.has(this.variant)) {
+      switch (this.variant) {
+        case "filled":
+          await import("@material/web/iconbutton/filled-icon-button.js");
+          break;
+        case "outlined":
+          await import("@material/web/iconbutton/outlined-icon-button.js");
+          break;
+        case "filled-tonal":
+          await import("@material/web/iconbutton/filled-tonal-icon-button.js");
+          break;
+        default:
+          await import("@material/web/iconbutton/icon-button.js");
+          break;
+      }
+      this.__loadedVariants.add(this.variant);
+    }
+    this.__iconLoaded || (await import("@material/web/icon/icon.js"), this.__iconLoaded = !0);
+  }
+  render() {
+    const t = this.ariaLabel.trim() || this.icon, o = this.error ? "error" : void 0, e = a`
+      <md-icon aria-hidden="true">${this.toggleofficon}</md-icon>
+      <md-icon slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
+    `, r = a`<md-icon aria-hidden="true">${this.icon}</md-icon>`;
+    if (this.toggle) {
+      const i = this.selected || !1;
+      switch (this.variant) {
+        case "filled":
+          return a`
+            <md-filled-icon-button
+              toggle
+              variant=${o}
+              ?disabled=${this.disabled}
+              aria-label=${t}
+              aria-pressed="${i}"
+            >${e}</md-filled-icon-button>
+          `;
+        case "outlined":
+          return a`
+            <md-outlined-icon-button
+              toggle
+              variant=${o}
+              ?disabled=${this.disabled}
+              aria-label=${t}
+              aria-pressed="${i}"
+            >${e}</md-outlined-icon-button>
+          `;
+        case "filled-tonal":
+          return a`
+            <md-filled-tonal-icon-button
+              toggle
+              variant=${o}
+              ?disabled=${this.disabled}
+              aria-label=${t}
+              aria-pressed="${i}"
+            >${e}</md-filled-tonal-icon-button>
+          `;
+        default:
+          return a`
+            <md-icon-button
+              role="button"
+              toggle
+              variant=${o}
+              ?disabled=${this.disabled}
+              aria-label=${t}
+              aria-pressed="${i}"
+            >${e}</md-icon-button>
+          `;
+      }
+    }
+    switch (this.variant) {
+      case "filled":
+        return a`
+          <md-filled-icon-button
+            variant=${o}
+            ?disabled=${this.disabled}
+            aria-label=${t}
+          >${r}</md-filled-icon-button>
+        `;
+      case "outlined":
+        return a`
+          <md-outlined-icon-button
+            variant=${o}
+            ?disabled=${this.disabled}
+            aria-label=${t}
+          >${r}</md-outlined-icon-button>
+        `;
+      case "filled-tonal":
+        return a`
+          <md-filled-tonal-icon-button
+            variant=${o}
+            ?disabled=${this.disabled}
+            aria-label=${t}
+          >${r}</md-filled-tonal-icon-button>
+        `;
+      default:
+        return a`
+          <md-icon-button
+            variant=${o}
+            ?disabled=${this.disabled}
+            aria-label=${t}
+          >${r}</md-icon-button>
+        `;
+    }
+  }
+};
+n.styles = u`
+    /*Error-styling på alla underliggande knappar*/
+    :host([error]) md-filled-icon-button[variant='error'],
+    :host([error]) md-outlined-icon-button[variant='error'],
+    :host([error]) md-filled-tonal-icon-button[variant='error'],
+    :host([error]) md-icon-button[variant='error'] {
+      --md-sys-color-primary: var(--md-sys-color-error);
+      --md-sys-color-on-primary: var(--md-sys-color-on-error);
+    }
+    :host([error]) md-outlined-icon-button[variant='error'] md-icon,
+    :host([error]) md-icon-button[variant='error'] md-icon {
+      color: var(--md-sys-color-error) !important;
+    }
+    :host([error]) md-outlined-icon-button[variant='error'] {
+      --_outline-color: var(--md-sys-color-error);
+      --md-outlined-icon-button-pressed-outline-color: var(--md-sys-color-error);
+    }
+    :host([error]) md-outlined-icon-button[variant='error']:hover {
+      --md-outlined-icon-button-outline-width: 2px;
+    }
+    :host([error]) md-filled-tonal-icon-button[variant='error'] {
+      --md-filled-tonal-icon-button-container-color: var(--md-sys-color-error-container);
+      --md-filled-tonal-icon-button-label-text-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-hover-label-text-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-pressed-label-text-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-focus-label-text-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-icon-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-hover-icon-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-pressed-icon-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-focus-icon-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-hover-state-layer-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-pressed-state-layer-color: var(--md-sys-color-on-error-container);
+    }
+  `;
+l([
+  s({ type: String, reflect: !0, attribute: "aria-label" })
+], n.prototype, "ariaLabel", 2);
+l([
+  s({ type: String })
+], n.prototype, "variant", 2);
+l([
+  s({ type: String })
+], n.prototype, "icon", 2);
+l([
+  s({ type: Boolean, reflect: !0 })
+], n.prototype, "toggle", 2);
+l([
+  s({ type: String })
+], n.prototype, "toggleofficon", 2);
+l([
+  s({ type: String })
+], n.prototype, "toggleonicon", 2);
+l([
+  s({ type: Boolean, reflect: !0 })
+], n.prototype, "disabled", 2);
+l([
+  s({ type: Boolean, reflect: !0 })
+], n.prototype, "error", 2);
+n = l([
+  b("scb-icon-button")
+], n);
+export {
+  n as ScbIconButton
+};

package/scb-keyfigure-card/scb-keyfigure-card.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+
+export declare class ScbKeyFigureCard extends LitElement {
+    keyfigure: number;
+    subLabel: string;
+    supportingText: string;
+    cardHref: string;
+    icon: string;
+    size: 'standard' | 'large';
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+    firstUpdated(): void;
+}

package/scb-keyfigure-card/scb-keyfigure-card.js

@@ -0,0 +1,119 @@
+import { css as p, LitElement as g, html as r } from "lit";
+import { property as n, customElement as y } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+var h = Object.defineProperty, m = Object.getOwnPropertyDescriptor, c = (i, s, l, t) => {
+  for (var a = t > 1 ? void 0 : t ? m(s, l) : s, o = i.length - 1, d; o >= 0; o--)
+    (d = i[o]) && (a = (t ? d(s, l, a) : d(a)) || a);
+  return t && a && h(s, l, a), a;
+};
+let e = class extends g {
+  constructor() {
+    super(...arguments), this.keyfigure = 0, this.subLabel = "", this.supportingText = "", this.cardHref = "", this.icon = "", this.size = "standard";
+  }
+  render() {
+    const i = this.cardHref ? "clickable" : "", l = ((t) => typeof t == "number" ? t.toLocaleString("sv-SE").replace(/\u00A0/g, " ") : t)(this.keyfigure);
+    return r`
+        <div class="scb-keyfigure-card ${i} ${this.size}">
+                ${this.cardHref ? r`<md-ripple></md-ripple>` : ""}
+                ${this.icon ? r`<md-icon>${this.icon}</md-icon>` : ""}
+                ${this.keyfigure ? r`
+                    <div class="keyfigure">
+                    ${l}
+                    ${this.cardHref ? r`<md-icon>arrow_forward</md-icon>` : l}
+                    </div>` : ""}
+                ${this.subLabel ? r`
+                    <div class="sub-label">
+                        ${this.cardHref ? r`<a href="${this.subLabel}" tabindex="0">${this.subLabel}</a>` : this.subLabel}
+                    </div>` : ""}
+                ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+        </div>
+        `;
+  }
+  firstUpdated() {
+    if (this.cardHref) {
+      const i = this.renderRoot.querySelector(".scb-keyfigure-card");
+      i && i.addEventListener("click", (s) => {
+        s.target.closest("a") || (window.location.href = this.cardHref);
+      });
+    }
+  }
+};
+e.styles = p`
+    :host{ --scb-card-min-w:  360px; }
+    :host {
+        max-width: var(--scb-card-min-w);
+        width: fit-content;;
+        display: block;
+    }
+    .scb-keyfigure-card {
+        color: var(--md-sys-color-on-surface);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-3);
+        width: fit-content;
+        max-width: var(--scb-card-min-w);
+        position: relative;
+        border-radius: var(--md-sys-shape-corner-large);
+        background: var(--md-sys-color-surface-dim);
+        padding: var(--spacing-7) var(--spacing-6);
+    }
+    .keyfigure{
+        letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
+        gap: var(--spacing-3);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: var(--md-sys-typescale-headline-large-size);
+        font-weight: var(--weight-bold);
+        line-height: var(--md-sys-typescale-headline-large-line-height);
+        letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+    }
+    .sub-label a {
+        color: inherit;
+        text-decoration: none;
+    }
+    .sub-label {
+        font-size: var(--md-sys-typescale-title-medium-size);
+        font-weight: var(--weight-semibold);
+        line-height: var(--md-sys-typescale-title-medium-line-height);
+        letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+    }
+    .supporting-text {
+        font-size: var(--md-sys-typescale-body-large-size);
+        line-height: var(--md-sys-typescale-body-large-line-height);
+        letter-spacing: var(--md-sys-typescale-body-large-tracking);
+    }
+    .scb-keyfigure-card.clickable {
+        cursor: pointer;
+    }
+    .scb-keyfigure-card.large .keyfigure {
+        font-size: var(--md-sys-typescale-display-medium-size);
+        line-height: var(--md-sys-typescale-display-medium-line-height);
+        letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+    }
+  `;
+c([
+  n({ type: Number })
+], e.prototype, "keyfigure", 2);
+c([
+  n({ type: String, attribute: "sub-label" })
+], e.prototype, "subLabel", 2);
+c([
+  n({ type: String, attribute: "supporting-text" })
+], e.prototype, "supportingText", 2);
+c([
+  n({ type: String, attribute: "card-href" })
+], e.prototype, "cardHref", 2);
+c([
+  n({ type: String })
+], e.prototype, "icon", 2);
+c([
+  n({ type: String })
+], e.prototype, "size", 2);
+e = c([
+  y("scb-keyfigure-card")
+], e);
+export {
+  e as ScbKeyFigureCard
+};

package/scb-link/scb-link.d.ts

@@ -0,0 +1,17 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class ScbLink extends LitElement {
+    #private;
+    href: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    rel?: string;
+    download?: string;
+    disabled: boolean;
+    static styles: import('lit').CSSResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-link': ScbLink;
+    }
+}

package/scb-link/scb-link.js

@@ -0,0 +1,74 @@
+import { css as h, LitElement as v, html as u } from "lit";
+import { property as n, customElement as y } from "lit/decorators.js";
+import { ifDefined as i } from "lit/directives/if-defined.js";
+var _ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, f = (e) => {
+  throw TypeError(e);
+}, s = (e, t, r, l) => {
+  for (var a = l > 1 ? void 0 : l ? m(t, r) : t, p = e.length - 1, c; p >= 0; p--)
+    (c = e[p]) && (a = (l ? c(t, r, a) : c(a)) || a);
+  return l && a && _(t, r, a), a;
+}, x = (e, t, r) => t.has(e) || f("Cannot " + r), b = (e, t, r) => (x(e, t, "read from private field"), r ? r.call(e) : t.get(e)), g = (e, t, r) => t.has(e) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), d;
+let o = class extends v {
+  constructor() {
+    super(...arguments), this.href = "", this.disabled = !1, g(this, d, (e) => {
+      this.disabled && (e.preventDefault(), e.stopPropagation());
+    });
+  }
+  render() {
+    const e = this.target === "_blank" && !this.rel ? "noopener noreferrer" : this.rel;
+    return u`
+      <a
+        part="anchor"
+        href=${i(this.disabled ? void 0 : this.href || void 0)}
+        target=${i(this.target)}
+        rel=${i(e)}
+        download=${i(this.download)}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-label=${i(this.ariaLabel ?? void 0)}
+        @click=${b(this, d)}
+      ><slot></slot></a>
+    `;
+  }
+};
+d = /* @__PURE__ */ new WeakMap();
+o.styles = h`
+    :host { display:inline }
+    a {
+      text-decoration: underline;
+      text-underline-offset: .22em;
+      text-decoration-thickness: 1px;
+      color: var(--scb-link-color, var(--md-sys-color-primary));
+      border-radius: 2px;
+      outline: none;
+      cursor: pointer;
+      transition: text-decoration-thickness .12s ease;
+    }
+    a:hover { text-decoration-thickness: 2px; }
+    a:focus-visible {
+      outline: 2px solid var(--scb-link-focus, var(--md-sys-color-primary));
+      outline-offset: 3px;
+    }
+    a:visited { color: var(--scb-link-visited-color, var(--md-sys-color-on-surface)); }
+    :host([disabled]) a { pointer-events: none; opacity:.64; text-decoration:none; cursor: default; }
+  `;
+s([
+  n({ type: String, reflect: !0 })
+], o.prototype, "href", 2);
+s([
+  n({ type: String, reflect: !0 })
+], o.prototype, "target", 2);
+s([
+  n({ type: String, reflect: !0 })
+], o.prototype, "rel", 2);
+s([
+  n({ type: String, reflect: !0 })
+], o.prototype, "download", 2);
+s([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+o = s([
+  y("scb-link")
+], o);
+export {
+  o as ScbLink
+};

package/scb-list/scb-list-item.d.ts

@@ -0,0 +1,32 @@
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
+
+export declare class ScbListItem extends LitElement {
+    #private;
+    type: 'text' | 'link';
+    /** Alias till item-href (href får företräde om båda sätts) */
+    href: string;
+    itemHref: string;
+    target: string;
+    disabled: boolean;
+    label: string;
+    supportingText: string;
+    overline: string;
+    leading: boolean;
+    leadingIcon: string;
+    imgHrefAvatar: string;
+    imgHrefImage: string;
+    leadingVariant: 'icon' | 'avatar' | 'image';
+    trailing: boolean;
+    trailingIcon: string;
+    trailingVariant: 'icon' | 'checkbox' | 'switch';
+    static get styles(): import('lit').CSSResult;
+    protected firstUpdated(): Promise<void>;
+    protected updated(changed: PropertyValues): void;
+    private onListClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-list-item': ScbListItem;
+    }
+}

package/scb-list/scb-list-item.js

@@ -0,0 +1,144 @@
+import { LitElement as S, css as $, html as c, nothing as h } from "lit";
+import { property as s, customElement as I } from "lit/decorators.js";
+var V = Object.defineProperty, L = Object.getOwnPropertyDescriptor, k = (t) => {
+  throw TypeError(t);
+}, r = (t, i, e, n) => {
+  for (var l = n > 1 ? void 0 : n ? L(i, e) : i, o = t.length - 1, b; o >= 0; o--)
+    (b = t[o]) && (l = (n ? b(i, e, l) : b(l)) || l);
+  return n && l && V(i, e, l), l;
+}, x = (t, i, e) => i.has(t) || k("Cannot " + e), g = (t, i, e) => (x(t, i, "read from private field"), i.get(t)), p = (t, i, e) => i.has(t) ? k("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), d = (t, i, e, n) => (x(t, i, "write to private field"), i.set(t, e), e), _ = (t, i, e) => (x(t, i, "access private method"), e), f, m, y, u, v, w;
+let a = class extends S {
+  constructor() {
+    super(...arguments), p(this, v), this.type = "text", this.href = "", this.itemHref = "", this.target = "", this.disabled = !1, this.label = "", this.supportingText = "", this.overline = "", this.leading = !1, this.leadingIcon = "", this.imgHrefAvatar = "https://www.scb.se/img/scb-logo.svg", this.imgHrefImage = "https://www.scb.se/img/scb-logo.svg", this.leadingVariant = "image", this.trailing = !1, this.trailingIcon = "", this.trailingVariant = "icon", p(this, f, !1), p(this, m, !1), p(this, y, !1), p(this, u, !1);
+  }
+  static get styles() {
+    return $`
+      :host { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
+      .scb-list-item { display: flex; }
+      .leading-content { margin-right: 16px; align-self: center; }
+      .trailing-content { margin-left: auto; align-self: center; }
+      .trailing-content scb-checkbox { margin-right: 11px; }
+      .label { line-height: 27px; }
+      .overline { font-size: 14px; color: var(--md-sys-color-on-surface-variant); line-height: 21px; }
+      .supporting-text { font-size: 16px; color: var(--md-sys-color-on-surface-variant); line-height: 24px; }
+
+      .leading-content:has(.avatar) {
+        width: 40px; height: 40px;
+        background: var(--md-sys-color-primary-container);
+        border-radius: 50%;
+        align-content: center; justify-items: center;
+      }
+      .avatar { width: 24px; height: 24px; position: relative; display: flex; }
+      .img { width: 56px; height: 56px; }
+    `;
+  }
+  // Ladda in rätt beroenden första gången
+  async firstUpdated() {
+    await _(this, v, w).call(this);
+  }
+  // Ladda om/utöka beroenden om varianter ändras
+  updated(t) {
+    super.updated(t), (t.has("leading") || t.has("leadingVariant") || t.has("trailing") || t.has("trailingVariant") || t.has("type") || t.has("target")) && _(this, v, w).call(this);
+  }
+  onListClick() {
+    var e, n;
+    if (this.type === "link" && (this.href || this.itemHref)) return;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("scb-checkbox"), i = (n = this.shadowRoot) == null ? void 0 : n.querySelector("scb-switch");
+    t && (t.checked = !t.checked), i && (i.selected = !i.selected);
+  }
+  render() {
+    const t = this.leadingVariant === "icon" ? c`<div class="leading-content"><md-icon>${this.leadingIcon}</md-icon></div>` : this.leadingVariant === "avatar" ? c`<div class="leading-content"><img class="avatar" src="${this.imgHrefAvatar}" /></div>` : this.leadingVariant === "image" ? c`<div class="leading-content"><img class="img" src="${this.imgHrefImage}" /></div>` : h, i = this.href || this.itemHref || "", e = this.target === "_blank" ? "open_in_new" : "chevron_right";
+    let n = h;
+    if (this.trailing)
+      if (this.trailingVariant === "icon") {
+        const o = this.trailingIcon || (this.type === "link" ? e : "");
+        n = o ? c`<div class="trailing-content"><md-icon>${o}</md-icon></div>` : h;
+      } else this.trailingVariant === "checkbox" ? n = c`<div class="trailing-content"><scb-checkbox @click=${(o) => o.stopPropagation()}></scb-checkbox></div>` : this.trailingVariant === "switch" && (n = c`<div class="trailing-content"><scb-switch @click=${(o) => o.stopPropagation()}></scb-switch></div>`);
+    else this.type === "link" && (n = c`<div class="trailing-content"><md-icon>${e}</md-icon></div>`);
+    const l = this.type === "link" && this.target === "_blank" ? "noopener noreferrer" : h;
+    return c`
+      <md-list-item
+        type=${this.type}
+        href=${this.type === "link" && i ? i : h}
+        target=${this.type === "link" && this.target ? this.target : h}
+        rel=${l}
+        ?disabled=${this.disabled}
+      >
+        <div class="scb-list-item" @click=${this.onListClick}>
+            ${this.leading ? t : h}
+          <div>
+            <div class="overline">${this.overline}</div>
+            <div class="label">${this.label}</div>
+            <div class="supporting-text">${this.supportingText}</div>
+          </div>
+            ${n}
+        </div>
+      </md-list-item>
+    `;
+  }
+};
+f = /* @__PURE__ */ new WeakMap();
+m = /* @__PURE__ */ new WeakMap();
+y = /* @__PURE__ */ new WeakMap();
+u = /* @__PURE__ */ new WeakMap();
+v = /* @__PURE__ */ new WeakSet();
+w = async function() {
+  g(this, f) || (await import("@material/web/list/list-item.js"), d(this, f, !0));
+  const t = this.type === "link" && (!this.trailing || // Visa standardikon för länkar om trailing inte används
+  this.trailingVariant === "icon");
+  (this.leading && this.leadingVariant === "icon" || this.trailing && this.trailingVariant === "icon" || t) && !g(this, m) && (await import("@material/web/icon/icon.js"), d(this, m, !0)), this.trailing && this.trailingVariant === "checkbox" && !g(this, y) && (await import("../scb-checkbox/scb-checkbox.js"), d(this, y, !0)), this.trailing && this.trailingVariant === "switch" && !g(this, u) && (await import("../scb-switch/scb-switch.js"), d(this, u, !0));
+};
+r([
+  s({ type: String, reflect: !0, attribute: "type" })
+], a.prototype, "type", 2);
+r([
+  s({ type: String })
+], a.prototype, "href", 2);
+r([
+  s({ type: String, attribute: "item-href" })
+], a.prototype, "itemHref", 2);
+r([
+  s({ type: String, attribute: "target" })
+], a.prototype, "target", 2);
+r([
+  s({ type: Boolean, attribute: "disabled" })
+], a.prototype, "disabled", 2);
+r([
+  s({ type: String, reflect: !0 })
+], a.prototype, "label", 2);
+r([
+  s({ type: String, attribute: "supporting-text" })
+], a.prototype, "supportingText", 2);
+r([
+  s({ type: String, attribute: "overline" })
+], a.prototype, "overline", 2);
+r([
+  s({ type: Boolean })
+], a.prototype, "leading", 2);
+r([
+  s({ type: String, attribute: "leading-icon" })
+], a.prototype, "leadingIcon", 2);
+r([
+  s({ type: String, reflect: !0, attribute: "img-href-avatar" })
+], a.prototype, "imgHrefAvatar", 2);
+r([
+  s({ type: String, reflect: !0, attribute: "img-href-image" })
+], a.prototype, "imgHrefImage", 2);
+r([
+  s({ type: String, reflect: !0, attribute: "leading-variant" })
+], a.prototype, "leadingVariant", 2);
+r([
+  s({ type: Boolean })
+], a.prototype, "trailing", 2);
+r([
+  s({ type: String, attribute: "trailing-icon" })
+], a.prototype, "trailingIcon", 2);
+r([
+  s({ type: String, reflect: !0, attribute: "trailing-variant" })
+], a.prototype, "trailingVariant", 2);
+a = r([
+  I("scb-list-item")
+], a);
+export {
+  a as ScbListItem
+};

package/scb-list/scb-list.d.ts

@@ -0,0 +1,8 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class ScbList extends LitElement {
+    #private;
+    protected firstUpdated(): Promise<void>;
+    static styles: import('lit').CSSResult[];
+    render(): TemplateResult;
+}

package/scb-list/scb-list.js

@@ -0,0 +1,39 @@
+import { css as v, LitElement as c, html as _ } from "lit";
+import { customElement as f } from "lit/decorators.js";
+import "./scb-list-item.js";
+var h = Object.getOwnPropertyDescriptor, p = (t) => {
+  throw TypeError(t);
+}, m = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? h(e, r) : e, o = t.length - 1, n; o >= 0; o--)
+    (n = t[o]) && (s = n(s) || s);
+  return s;
+}, d = (t, e, r) => e.has(t) || p("Cannot " + r), u = (t, e, r) => (d(t, e, "read from private field"), e.get(t)), y = (t, e, r) => e.has(t) ? p("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), w = (t, e, r, i) => (d(t, e, "write to private field"), e.set(t, r), r), a;
+let l = class extends c {
+  constructor() {
+    super(...arguments), y(this, a, !1);
+  }
+  async firstUpdated() {
+    u(this, a) || (await import("@material/web/list/list.js"), w(this, a, !0));
+  }
+  render() {
+    return _`
+      <md-list role="list">
+        <slot></slot>
+      </md-list>
+    `;
+  }
+};
+a = /* @__PURE__ */ new WeakMap();
+l.styles = [
+  v`
+      ::slotted(scb-list-item:first-of-type) {
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+    `
+];
+l = m([
+  f("scb-list")
+], l);
+export {
+  l as ScbList
+};