scb-wc-test 0.1.1

package/scb-avatar/scb-avatar.js

@@ -0,0 +1,169 @@
+import { css as d, LitElement as g, nothing as c, html as a } from "lit";
+import { property as l, state as m, customElement as v } from "lit/decorators.js";
+var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (i, t, o, s) => {
+  for (var n = s > 1 ? void 0 : s ? _(t, o) : t, h = i.length - 1, p; h >= 0; h--)
+    (p = i[h]) && (n = (s ? p(t, o, n) : p(n)) || n);
+  return s && n && u(t, o, n), n;
+};
+let e = class extends g {
+  constructor() {
+    super(...arguments), this.src = "", this.alt = "", this.label = "", this.size = "medium", this.shape = "circular", this.iconName = "", this.variant = "image", this._imgError = !1, this._hasIconSlot = !1, this._onImgLoad = () => {
+      this._imgError = !1, this.dispatchEvent(new CustomEvent("image-load", { bubbles: !0, composed: !0 }));
+    }, this._onImgError = () => {
+      this._imgError = !0, this.dispatchEvent(new CustomEvent("image-error", { bubbles: !0, composed: !0 }));
+    }, this._onIconSlotChange = (i) => {
+      const t = i.currentTarget;
+      this._hasIconSlot = (t.assignedNodes({ flatten: !0 }) || []).length > 0;
+    };
+  }
+  async firstUpdated() {
+    this.variant === "icon" && await import("@material/web/icon/icon.js");
+  }
+  _initials() {
+    const i = (this.label || this.alt || "").trim();
+    if (!i) return "?";
+    const t = i.split(/\s+/).filter(Boolean);
+    if (t.length === 1) return t[0].slice(0, 1).toUpperCase();
+    const o = t[0].slice(0, 1), s = t[t.length - 1].slice(0, 1);
+    return (o + s).toUpperCase();
+  }
+  _ariaLabel() {
+    const i = (this.label || this.alt || "").trim();
+    return i || null;
+  }
+  render() {
+    const i = this._ariaLabel(), t = this.variant === "image" && !!this.src && !this._imgError, o = a`${c}
+        <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
+        ${this._hasIconSlot ? c : this.iconName ? a`<md-icon aria-hidden="true">${this.iconName}</md-icon>` : a`<div class="fallback" part="fallback">${this._initials()}</div>`}
+      `, s = t ? a`<img class="photo" part="image" src=${this.src} alt=${this.alt}
+                    @load=${this._onImgLoad} @error=${this._onImgError} />` : a`
+            <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
+            ${this._hasIconSlot ? c : this.iconName ? a`<md-icon aria-hidden="true">${this.iconName}</md-icon>` : a`<div class="fallback" part="fallback">${this._initials()}</div>`}
+          `;
+    return a`
+      <div class="container" part="container" role="img" aria-label=${i ?? c}>
+        ${this.variant === "icon" ? o : s}
+      </div>
+    `;
+  }
+};
+e.styles = d`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      --_size: 40px;
+      --_font-size: 16px;
+      --_bg: var(--md-sys-color-primary-fixed-dim, var(--md-sys-color-primary-container));
+      --_fg: var(--md-sys-color-on-primary-fixed, var(--md-sys-color-on-primary-container));
+      --_radius: var(--radius-full, 1000px);
+      --_border: 0 solid transparent;
+
+      font-family: var(--brand-font, Inter, system-ui, sans-serif);
+      color-scheme: light dark;
+    }
+
+    :host([size="small"])  { --_size: 32px; --_font-size: var(--md-sys-typescale-label-medium-size, 14px); }
+    :host([size="medium"]) { --_size: 40px; --_font-size: var(--md-sys-typescale-label-large-size, 16px); }
+    :host([size="large"])  { --_size: 56px; --_font-size: var(--md-sys-typescale-title-large-size, 20px); }
+
+    :host([shape="circular"]) { --_radius: var(--radius-full, 1000px); }
+    :host([shape="rounded"])  { --_radius: var(--radius-s, 8px); }
+    :host([shape="square"])   { --_radius: 0; }
+
+    .container {
+      inline-size: var(--_size);
+      block-size: var(--_size);
+      border-radius: var(--_radius);
+      position: relative;
+      overflow: hidden;
+      user-select: none;
+      line-height: 1;
+      border: var(--_border);
+      display: grid;
+      place-items: center;
+    }
+
+    :host([variant="image"]) .container { background: none; }
+    :host([variant="image"]) img.photo {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    :host([size="small"])  { --_icon-size: var(--icon-size-small, 24px); }
+    :host([size="medium"]) { --_icon-size: var(--icon-size-medium, 32px); }
+    :host([size="large"])  { --_icon-size: var(--icon-size-large, 40px); }
+
+    :host([variant="icon"]) .container { background: var(--_bg); color: var(--_fg); }
+
+    img.icon {
+      width: var(--_icon-size);
+      height: var(--_icon-size);
+      object-fit: contain;
+      display: block;
+    }
+
+    .fallback {
+      display: grid;
+      place-items: center;
+      width: 100%;
+      height: 100%;
+      font-size: var(--_font-size);
+      font-weight: var(--weight-semibold, 600);
+      letter-spacing: .01em;
+      text-transform: uppercase;
+      color: var(--_fg);
+      background: var(--_bg);
+    }
+
+    :host([variant="image"]) .fallback {
+      color: var(--md-sys-color-on-primary-container);
+      background: var(--md-sys-color-primary-container);
+    }
+
+    ::slotted([slot="icon"]) {
+      width: var(--_icon-size);
+      height: var(--_icon-size);
+      line-height: 1;
+    }
+
+    :host(:focus-visible) .container {
+      outline: var(--md-focus-ring-width, 2px) solid var(--md-focus-ring-color, var(--p-40));
+      outline-offset: 2px;
+      border-radius: var(--_radius);
+    }
+  `;
+r([
+  l({ type: String })
+], e.prototype, "src", 2);
+r([
+  l({ type: String })
+], e.prototype, "alt", 2);
+r([
+  l({ type: String })
+], e.prototype, "label", 2);
+r([
+  l({ type: String, reflect: !0 })
+], e.prototype, "size", 2);
+r([
+  l({ type: String, reflect: !0 })
+], e.prototype, "shape", 2);
+r([
+  l({ type: String, attribute: "icon-name", reflect: !0 })
+], e.prototype, "iconName", 2);
+r([
+  l({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+r([
+  m()
+], e.prototype, "_imgError", 2);
+r([
+  m()
+], e.prototype, "_hasIconSlot", 2);
+e = r([
+  v("scb-avatar")
+], e);
+export {
+  e as ScbAvatar
+};

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

@@ -0,0 +1,9 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class SCBBreadcrumbItem extends LitElement {
+    label: string;
+    isCurrent: boolean;
+    href: string;
+    static get styles(): import('lit').CSSResult;
+    protected render(): TemplateResult;
+}

package/scb-breadcrumb/scb-breadcrumb-item.js

@@ -0,0 +1,54 @@
+import { LitElement as u, css as b, html as p } from "lit";
+import { property as i, customElement as m } from "lit/decorators.js";
+var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (l, t, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? f(t, o) : t, c = l.length - 1, n; c >= 0; c--)
+    (n = l[c]) && (r = (s ? n(t, o, r) : n(r)) || r);
+  return s && r && h(t, o, r), r;
+};
+let e = class extends u {
+  constructor() {
+    super(...arguments), this.label = "", this.isCurrent = !1, this.href = "";
+  }
+  static get styles() {
+    return b`
+    .breadcrumb-separator {
+      margin: 0 8px;
+      color: var(--md-sys-color-on-surface);
+    }
+    .breadcrumb-link { 
+        color: var(--md-sys-color-primary);
+        text-decoration-thickness: 1px;
+        
+      }
+      .breadcrumb-link:hover { 
+        text-decoration-thickness: 2px;
+      }
+    `;
+  }
+  render() {
+    switch (!0) {
+      case this.isCurrent:
+        return p`<span class="breadcrumb-current">${this.label}</span>`;
+      default:
+        return p`
+          <a href="${this.href}" class="breadcrumb-link">${this.label}</a>
+          <span class="breadcrumb-separator">/</span>
+        `;
+    }
+  }
+};
+a([
+  i({ type: String })
+], e.prototype, "label", 2);
+a([
+  i({ type: Boolean, attribute: "is-current" })
+], e.prototype, "isCurrent", 2);
+a([
+  i({ type: String, attribute: "item-href" })
+], e.prototype, "href", 2);
+e = a([
+  m("scb-breadcrumb-item")
+], e);
+export {
+  e as SCBBreadcrumbItem
+};

package/scb-breadcrumb/scb-breadcrumb.d.ts

@@ -0,0 +1,16 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class SCBBreadcrumb extends LitElement {
+    showAll: boolean;
+    private static __iconLoaded;
+    private __ensureIconLoaded;
+    static get styles(): import('lit').CSSResult;
+    protected firstUpdated(): void;
+    private _onEllipsisClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-breadcrumb': SCBBreadcrumb;
+    }
+}

package/scb-breadcrumb/scb-breadcrumb.js

@@ -0,0 +1,105 @@
+import { LitElement as d, css as m, html as n } from "lit";
+import { property as p, customElement as b } from "lit/decorators.js";
+import "./scb-breadcrumb-item.js";
+var h = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (e, r, s, t) => {
+  for (var a = t > 1 ? void 0 : t ? u(r, s) : r, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (a = (t ? o(r, s, a) : o(a)) || a);
+  return t && a && h(r, s, a), a;
+};
+let l = class extends d {
+  constructor() {
+    super(...arguments), this.showAll = !1;
+  }
+  async __ensureIconLoaded() {
+    l.__iconLoaded || (await import("@material/web/icon/icon.js"), l.__iconLoaded = !0);
+  }
+  static get styles() {
+    return m`
+      .scb-breadcrumb {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      .breadcrumb-separator {
+        margin: 0 8px;
+        color: var(--md-sys-color-on-surface);
+      }
+      .collapsed > scb-breadcrumb-item {
+        display: none;
+      }
+      .collapsed > scb-breadcrumb-item:nth-child(-n+3),
+      .collapsed > scb-breadcrumb-item:nth-last-child(-n+3) {
+        display: inline-flex;
+      }
+      .ellipsis {
+        cursor: pointer;
+        display: inline-flex;
+        color: var(--md-sys-color-primary);
+      }
+      .collapsed .ellipsis {
+        display: inline-flex;
+      }
+      .expanded .ellipsis {
+        display: none;
+      }
+        .breadcrumb-animate {
+          opacity: 0;
+          transform: translateY(10px);
+          animation: fadeInBreadcrumb 0.4s cubic-bezier(0.4,0,0.2,1) forwards;
+        }
+        @keyframes fadeInBreadcrumb {
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+    `;
+  }
+  firstUpdated() {
+    this.children.length > 6 && !this.showAll && this.__ensureIconLoaded();
+  }
+  _onEllipsisClick() {
+    this.showAll ? (this.showAll = !1, l.__iconLoaded || this.__ensureIconLoaded()) : (this.showAll = !0, this.updateComplete.then(() => {
+      var r;
+      const e = (r = this.shadowRoot) == null ? void 0 : r.querySelectorAll(".scb-breadcrumb.expanded > scb-breadcrumb-item");
+      e && (e.forEach((s, t) => {
+        s.classList.add("breadcrumb-animate"), s.style.animationDelay = `${t * 60}ms`;
+      }), setTimeout(() => {
+        e.forEach((s) => {
+          s.classList.remove("breadcrumb-animate"), s.style.animationDelay = "";
+        });
+      }, 600));
+    }));
+  }
+  render() {
+    let e = [];
+    this.children.length || (e = Array.from(this.shadowRoot ? this.shadowRoot.querySelectorAll("scb-breadcrumb-item") : [])), e.length || (e = Array.from(this.children).filter((s) => s.tagName.toLowerCase() === "scb-breadcrumb-item")), e.length > 0 && e[e.length - 1].setAttribute("is-current", "true");
+    const r = e.length > 6 && !this.showAll;
+    return n`
+      <div class="scb-breadcrumb ${r ? "collapsed" : "expanded"}">
+        ${r ? e.map(
+      (s, t) => t === 3 ? n`<span
+                    class="ellipsis"
+                    aria-label="Visa alla"
+                    role="button"
+                    tabindex="0"
+                    @click=${this._onEllipsisClick}
+                    @keydown=${(a) => {
+        (a.key === "Enter" || a.key === " ") && this._onEllipsisClick();
+      }}
+                  ><md-icon>more_horiz</md-icon></span><span class="breadcrumb-separator">/</span>${s}` : n`${s}`
+    ) : e.map((s) => s)}
+      </div>
+    `;
+  }
+};
+l.__iconLoaded = !1;
+c([
+  p({ type: Boolean })
+], l.prototype, "showAll", 2);
+l = c([
+  b("scb-breadcrumb")
+], l);
+export {
+  l as SCBBreadcrumb
+};

package/scb-button/scb-button.d.ts

@@ -0,0 +1,26 @@
+import { LitElement, TemplateResult } from 'lit';
+
+/** "filled", "outlined", "filled-tonal" eller "text" */
+export type ScbButtonVariant = 'filled' | 'outlined' | 'filled-tonal' | 'text';
+export declare class ScbButton extends LitElement {
+    variant: ScbButtonVariant;
+    type: string;
+    label: string;
+    trailingIcon: boolean;
+    icon: string;
+    disabled: boolean;
+    href: string;
+    target: string;
+    rel: string;
+    private __loadedButtons;
+    private __iconLoaded;
+    private __ariaObserver?;
+    private __ensureDepsLoaded;
+    private __getInnerButton;
+    private __syncAriaToInner;
+    protected firstUpdated(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    static get styles(): import('lit').CSSResult;
+    render(): TemplateResult;
+}

package/scb-button/scb-button.js

@@ -0,0 +1,247 @@
+import { LitElement as b, css as m, html as u, nothing as e } from "lit";
+import { property as d, customElement as p } from "lit/decorators.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, r, a, i) => {
+  for (var o = i > 1 ? void 0 : i ? v(r, a) : r, c = t.length - 1, n; c >= 0; c--)
+    (n = t[c]) && (o = (i ? n(r, a, o) : n(o)) || o);
+  return i && o && f(r, a, o), o;
+};
+let l = class extends b {
+  constructor() {
+    super(...arguments), this.variant = "filled", this.type = "button", this.label = "Button", this.trailingIcon = !1, this.icon = "", this.disabled = !1, this.href = "", this.target = "", this.rel = "", this.__loadedButtons = /* @__PURE__ */ new Set(), this.__iconLoaded = !1;
+  }
+  // Ladda in nödvändiga Material-web-komponenter vid behov (variant + ev. ikon)
+  async __ensureDepsLoaded() {
+    if (!this.__loadedButtons.has(this.variant)) {
+      switch (this.variant) {
+        case "filled":
+          await import("@material/web/button/filled-button.js");
+          break;
+        case "outlined":
+          await import("@material/web/button/outlined-button.js");
+          break;
+        case "filled-tonal":
+          await import("@material/web/button/filled-tonal-button.js");
+          break;
+        case "text":
+          await import("@material/web/button/text-button.js");
+          break;
+      }
+      this.__loadedButtons.add(this.variant);
+    }
+    this.icon && !this.__iconLoaded && (await import("@material/web/icon/icon.js"), this.__iconLoaded = !0);
+  }
+  // Hämta inre md-knapp (oavsett variant)
+  __getInnerButton() {
+    return this.renderRoot.querySelector(
+      "md-filled-button, md-outlined-button, md-filled-tonal-button, md-text-button"
+    );
+  }
+  // Spegla aria-attribut från host -> inre md-knapp
+  // (behåll aria-controls på host; ta bort aria-expanded från host
+  __syncAriaToInner() {
+    var i;
+    const t = this.__getInnerButton();
+    if (!t) return;
+    const r = this.getAttribute("aria-controls");
+    r && t.setAttribute("aria-controls", r);
+    const a = this.getAttribute("aria-expanded");
+    a !== null && (t.setAttribute("aria-expanded", a), this.removeAttribute("aria-expanded")), (i = this.__ariaObserver) == null || i.disconnect(), this.__ariaObserver = new MutationObserver((o) => {
+      const c = this.__getInnerButton();
+      if (c) {
+        for (const n of o)
+          if (!(n.type !== "attributes" || !n.attributeName) && (n.attributeName === "aria-controls" || n.attributeName === "aria-expanded")) {
+            const h = this.getAttribute(n.attributeName);
+            h === null ? c.removeAttribute(n.attributeName) : c.setAttribute(n.attributeName, h), n.attributeName === "aria-expanded" && this.removeAttribute("aria-expanded");
+          }
+      }
+    }), this.__ariaObserver.observe(this, { attributes: !0, attributeFilter: ["aria-controls", "aria-expanded"] });
+  }
+  // Kör dynamisk import första gången komponenten renderats
+  firstUpdated() {
+    (this.type === "submit" || this.type === "reset") && this.addEventListener("click", () => {
+      if (!this.disabled) {
+        const t = this.closest("form");
+        t && (this.type === "submit" && t.requestSubmit(), this.type === "reset" && t.reset());
+      }
+    }), this.__ensureDepsLoaded(), this.__syncAriaToInner();
+  }
+  // Kör även när variant/icon ändras
+  updated(t) {
+    (t.has("variant") || t.has("icon") && this.icon) && this.__ensureDepsLoaded(), t.has("variant") && this.__syncAriaToInner();
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.__ariaObserver) == null || t.disconnect(), super.disconnectedCallback();
+  }
+  static get styles() {
+    return m`
+      /* Gör hosten stretchbar i t.ex. flex/grid */
+      :host {
+        display: inline-flex;
+        block-size: var(--scb-button-block-size, auto);
+      }
+
+      /* Låt inre md-knappen fylla hostens höjd*/
+      md-filled-button,
+      md-outlined-button,
+      md-filled-tonal-button,
+      md-text-button {
+        block-size: 100%;
+      }
+
+      /*  Errorvarianter  */
+      /*
+      md-filled-button[variant='error'],
+      md-outlined-button[variant='error'],
+      md-filled-tonal-button[variant='error'],
+      md-text-button[variant='error'] {
+        --md-sys-color-primary: var(--md-sys-color-error);
+        --md-sys-color-on-primary: var(--md-sys-color-on-error);
+      }
+      */
+
+      /* Outlined – röd outline vid error + tjockare vid hover */
+      /*
+      md-outlined-button[variant='error'] {
+        --_outline-color: var(--md-sys-color-error);
+        --md-outlined-button-pressed-outline-color: var(--md-sys-color-error);
+      }
+      */
+      /* md-outlined-button[variant='error']:hover, */
+      md-outlined-button:hover {
+        --md-outlined-button-outline-width: var(--spacing-1, 1px);
+      }
+
+      /* Filled-tonal – error-färger */
+      /*
+      md-filled-tonal-button[variant='error'] {
+        --md-filled-tonal-button-container-color: var(--md-sys-color-error-container);
+        --md-filled-tonal-button-label-text-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-hover-label-text-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-pressed-label-text-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-focus-label-text-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-icon-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-hover-icon-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-pressed-icon-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-focus-icon-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-hover-state-layer-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-pressed-state-layer-color: var(--md-sys-color-on-error-container);
+      }
+      @media (prefers-color-scheme: dark) {
+        md-filled-tonal-button[variant='error'] {
+          --md-filled-tonal-button-container-color: var(--md-sys-color-on-error);
+        }
+      }
+      */
+    `;
+  }
+  render() {
+    var o;
+    const t = !!((o = this.icon) != null && o.trim()), r = t ? u`<md-icon slot="icon">${this.icon}</md-icon>` : e, a = e, i = this.label.trim() === "" ? this.icon : void 0;
+    switch (this.variant) {
+      case "filled":
+        return u`
+          <md-filled-button
+            type=${this.type}
+            variant=${a}
+            ?trailing-icon=${this.trailingIcon}
+            ?disabled=${this.disabled}
+            aria-label=${i}
+            href=${this.href || e}
+            target=${this.target || e}
+            rel=${this.rel || e}
+          >
+            ${t && !this.trailingIcon ? r : e}
+            ${this.label}
+            ${t && this.trailingIcon ? r : e}
+          </md-filled-button>
+        `;
+      case "outlined":
+        return u`
+          <md-outlined-button
+            type=${this.type}
+            variant=${a}
+            ?trailing-icon=${this.trailingIcon}
+            ?disabled=${this.disabled}
+            aria-label=${i}
+            href=${this.href || e}
+            target=${this.target || e}
+            rel=${this.rel || e}
+          >
+            ${t && !this.trailingIcon ? r : e}
+            ${this.label}
+            ${t && this.trailingIcon ? r : e}
+          </md-outlined-button>
+        `;
+      case "filled-tonal":
+        return u`
+          <md-filled-tonal-button
+            type=${this.type}
+            variant=${a}
+            ?trailing-icon=${this.trailingIcon}
+            ?disabled=${this.disabled}
+            aria-label=${i}
+            href=${this.href || e}
+            target=${this.target || e}
+            rel=${this.rel || e}
+          >
+            ${t && !this.trailingIcon ? r : e}
+            ${this.label}
+            ${t && this.trailingIcon ? r : e}
+          </md-filled-tonal-button>
+        `;
+      case "text":
+        return u`
+          <md-text-button
+            type=${this.type}
+            variant=${a}
+            ?trailing-icon=${this.trailingIcon}
+            ?disabled=${this.disabled}
+            aria-label=${i}
+            href=${this.href || e}
+            target=${this.target || e}
+            rel=${this.rel || e}
+          >
+            ${t && !this.trailingIcon ? r : e}
+            ${this.label}
+            ${t && this.trailingIcon ? r : e}
+          </md-text-button>
+        `;
+      default:
+        return u``;
+    }
+  }
+};
+s([
+  d({ type: String, reflect: !0 })
+], l.prototype, "variant", 2);
+s([
+  d({ type: String, reflect: !0 })
+], l.prototype, "type", 2);
+s([
+  d({ type: String })
+], l.prototype, "label", 2);
+s([
+  d({ type: Boolean, attribute: "trailing-icon" })
+], l.prototype, "trailingIcon", 2);
+s([
+  d({ type: String })
+], l.prototype, "icon", 2);
+s([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+s([
+  d({ type: String })
+], l.prototype, "href", 2);
+s([
+  d({ type: String })
+], l.prototype, "target", 2);
+s([
+  d({ type: String })
+], l.prototype, "rel", 2);
+l = s([
+  p("scb-button")
+], l);
+export {
+  l as ScbButton
+};

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+
+/**
+ * Enkel kort-komponent för SCB-designsystemet
+ */
+export declare class ScbCalendarCard extends LitElement {
+    variant: 'default' | 'outlined' | 'filled';
+    direction: 'horizontal' | 'vertical';
+    header: string;
+    subtitle: string;
+    supportingText: string;
+    cardHref: string;
+    showMedia: boolean | null;
+    private static __iconLoaded;
+    private static __rippleLoaded;
+    protected firstUpdated(): Promise<void>;
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+    private _onKeyDown;
+}