scb-wc-test 0.1.1

package/scb-logo.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="-0.0002 -0.0066 1344.9076 377.9532" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style type="text/css">
+  g {
+  fill: #100f0d;
+  }
+  g:target {
+  fill: #fff;
+  }
+ </style>
+  </defs>
+  <g transform="matrix(1.3333330154418945, 0, 0, -1.3333330154418945, 0, 377.9466552734375)" id="g10">
+    <g transform="scale(0.1)" id="inverted">
+      <path id="path14" d="m 1346.6,2515.59 c 0,48.24 -39.11,87.31 -87.4,87.31 -48.29,0 -87.4,-39.07 -87.4,-87.31 V 312.898 c 0,-48.339 39.11,-87.5 87.4,-87.5 48.29,0 87.4,39.161 87.4,87.5 V 1106.8 c 0,5.77 4.79,10.45 10.51,10.45 h 287.22 c 5.76,0 10.5,-4.68 10.5,-10.45 V 305.969 C 1654.83,137.02 1477.67,0 1259.2,0 1040.63,0 863.523,137.02 863.523,305.969 V 2528.77 c 0,168.86 177.107,305.88 395.677,305.88 218.47,0 395.63,-137.02 395.63,-305.88 V 1738.1 c 0,-5.86 -4.74,-10.45 -10.5,-10.45 h -287.22 c -5.72,0 -10.51,4.59 -10.51,10.45 v 777.49"/>
+      <path id="path16" d="M 10.4414,2265.38 C -8.01563,2136.85 -1.52734,1926.1 26.1172,1807.73 56.4922,1678.71 231.645,1417.96 310.555,1296.86 389.566,1175.85 494.949,1049.49 493.375,880.922 V 477.18 c 0,-48.25 -39.109,-87.41 -87.406,-87.41 -48.145,0 -87.254,39.16 -87.254,87.41 v 618.79 c 0,5.76 -4.785,10.55 -10.645,10.55 H 20.9453 c -5.8711,0 -10.5039,-4.79 -10.5039,-10.55 V 458.719 c 0,-168.957 177.1056,-305.969 395.5276,-305.969 218.574,0 395.683,137.012 395.683,305.969 v 422.203 c -1.324,289.568 -80.332,331.748 -182.867,505.398 -73.445,124.71 -254.121,381.95 -284.398,510.97 -27.735,118.36 -26.516,255.39 -15.672,379.9 0,48.25 39.109,87.41 87.254,87.41 48.297,0 87.406,-39.16 87.406,-87.41 v -550.32 c 0,-5.77 4.746,-10.45 10.645,-10.45 h 287.085 c 5.911,0 10.547,4.68 10.547,10.45 v 538.51 c 0,169.06 -177.109,305.97 -395.683,305.97 -218.422,0 -395.5276,-136.91 -395.5276,-305.97"/>
+      <path id="path18" d="m 1726.57,2547.82 h 440.8 c 182.04,0 329.61,-147.57 329.61,-329.52 v -462.24 c 0,-129.59 -84.97,-238.98 -202.16,-276.48 v -6.24 c 117.19,-37.4 202.16,-146.89 202.16,-276.58 V 491.148 c 0,-160.367 -130.2,-290.457 -290.45,-290.457 l -479.96,-0.293 c -5.91,0 -10.6,4.793 -10.6,10.454 V 2537.37 c 0,5.66 4.69,10.45 10.6,10.45 m 308.27,-229.22 c -5.97,0 -10.65,-4.78 -10.65,-10.55 v -729.33 c 0,-5.97 4.68,-10.65 10.65,-10.65 h 43.36 c 58.01,0 105.08,47.16 105.08,105.18 v 540.18 c 0,58 -47.07,105.17 -105.08,105.17 z m 0,-982.29 c -5.97,0 -10.65,-4.69 -10.65,-10.45 V 430.59 c 0,-5.86 4.68,-10.649 10.65,-10.649 h 51.85 c 58.12,0 105.09,47.18 105.09,105.188 v 706.011 c 0,58.19 -46.97,105.17 -105.09,105.17 h -51.85"/>
+    </g>
+  </g>
+  <text style="fill: rgb(1, 1, 1); font-family: Roboto; font-size: 139.2px; font-weight: 500; stroke: rgb(0, 0, 0); white-space: pre;" x="455.182" y="234.25">Designsystem</text>
+</svg>

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

@@ -0,0 +1,22 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class ScbMenuItem extends LitElement {
+    label: string;
+    hasSubMenu: boolean;
+    openLeft: boolean;
+    divider: boolean;
+    leadingIcon: string;
+    trailingIcon: string;
+    itemHref: string;
+    private static __iconLoaded;
+    private static __rippleLoaded;
+    protected firstUpdated(): Promise<void>;
+    static styles: import('lit').CSSResult;
+    updated(): void;
+    private handleClick;
+    render(): TemplateResult;
+    _navigateToHref(e: Event): void;
+    _toggleSubMenu(): void;
+    /** Trigger click handler on Enter/Space for accessibility */
+    private _onKeyDown;
+}

package/scb-menu/scb-menu-item.js

@@ -0,0 +1,107 @@
+import { css as h, LitElement as c, html as i } from "lit";
+import { property as r, customElement as m } from "lit/decorators.js";
+import "../scb-divider/scb-divider.js";
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (e, s, l, a) => {
+  for (var o = a > 1 ? void 0 : a ? f(s, l) : s, p = e.length - 1, d; p >= 0; p--)
+    (d = e[p]) && (o = (a ? d(s, l, o) : d(o)) || o);
+  return a && o && u(s, l, o), o;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.label = "", this.hasSubMenu = !1, this.openLeft = !1, this.divider = !1, this.leadingIcon = "", this.trailingIcon = "", this.itemHref = "", this.handleClick = (e) => {
+      this.itemHref ? this._navigateToHref(e) : this._toggleSubMenu();
+    }, this._onKeyDown = (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick(e));
+    };
+  }
+  // Ladda in md-icon + md-ripple on-demand (första gången komponenten mountas)
+  async firstUpdated() {
+    t.__iconLoaded || (await import("@material/web/icon/icon.js"), t.__iconLoaded = !0), t.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), t.__rippleLoaded = !0);
+  }
+  updated() {
+    const e = this.nextElementSibling;
+    this.hasSubMenu = !!(e && e.tagName === "SCB-SUB-MENU"), this.openLeft = !!(this.hasSubMenu && e && e.hasAttribute("open-left"));
+  }
+  render() {
+    return i`
+      ${this.divider ? i`<scb-divider></scb-divider>` : ""}
+      <li @click=${this.handleClick} @keydown=${this._onKeyDown} role="menuitem" tabindex="0">
+        ${this.itemHref ? i`<a href="${this.itemHref}" tabindex="-1">
+              ${this.leadingIcon ? i`<md-icon>${this.leadingIcon}</md-icon>` : ""}
+              <div>${this.label}</div>
+              ${this.trailingIcon ? i`<md-icon>${this.trailingIcon}</md-icon>` : ""}
+              <md-ripple></md-ripple>
+            </a>` : i`
+              ${this.leadingIcon ? i`<md-icon>${this.leadingIcon}</md-icon>` : ""}
+              <div>${this.label}</div>
+              ${this.trailingIcon ? i`<md-icon>${this.trailingIcon}</md-icon>` : ""}
+              <md-ripple></md-ripple>
+            `}
+      </li>
+    `;
+  }
+  _navigateToHref(e) {
+    this.itemHref && (window.location.href = this.itemHref), e.stopPropagation();
+  }
+  _toggleSubMenu() {
+    const e = this.nextElementSibling;
+    e && e.tagName === "SCB-SUB-MENU" && (e.hasAttribute("open") ? e.dispatchEvent(new CustomEvent("hide-submenu", { bubbles: !0, composed: !0 })) : e.dispatchEvent(new CustomEvent("show-submenu", { bubbles: !0, composed: !0 })));
+  }
+};
+t.__iconLoaded = !1;
+t.__rippleLoaded = !1;
+t.styles = h`
+    :host { display: block; }
+    :host li{
+      position: relative;
+      list-style: none;
+      padding: 8px 16px;
+      cursor: pointer;
+      min-height: 56px;
+      font-size: 18px;
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      max-width: 300px;
+      min-width: 112px; 
+    }
+    :host li a {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      color: var(--md-sys-color-on-surface);
+      text-decoration: none;
+    }
+    li:hover md-ripple {
+      --md-ripple-hover-color: transparent;
+      --md-ripple-hover-opacity: 0;
+    }
+    li:hover { background: var(--md-sys-color-secondary-container, #D6F1FF); }
+  `;
+n([
+  r({ type: String })
+], t.prototype, "label", 2);
+n([
+  r({ type: Boolean })
+], t.prototype, "hasSubMenu", 2);
+n([
+  r({ type: Boolean })
+], t.prototype, "openLeft", 2);
+n([
+  r({ type: Boolean })
+], t.prototype, "divider", 2);
+n([
+  r({ type: String, attribute: "leading-icon" })
+], t.prototype, "leadingIcon", 2);
+n([
+  r({ type: String, attribute: "trailing-icon" })
+], t.prototype, "trailingIcon", 2);
+n([
+  r({ type: String, attribute: "item-href" })
+], t.prototype, "itemHref", 2);
+t = n([
+  m("scb-menu-item")
+], t);
+export {
+  t as ScbMenuItem
+};

package/scb-menu/scb-menu.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class ScbMenu extends LitElement {
+    open: boolean;
+    __lastTriggerEl: HTMLElement | null;
+    static styles: import('lit').CSSResult;
+    render(): TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Sätt endast state; side effects (overlay, fokus, events mm) hanteras i `updated()`. */
+    private __setOpen;
+    private __getActionFromEvent;
+    private __onDocumentClick;
+    private __onDocumentKeydown;
+    /** Reagera på ändrat `open` oavsett om det kom från triggers eller från kod (menu.open = …). */
+    protected updated(changed: Map<string, unknown>): void;
+    /** scroll lock, aria-uppdatering, fokusflytt och öppna/stäng-events. */
+    private __applyOpenSideEffects;
+    /** Sätt aria-expanded=true/false på alla kontroller som pekar på aktuell meny via id. */
+    private __updateTriggersExpanded;
+}

package/scb-menu/scb-menu.js

@@ -0,0 +1,98 @@
+import { css as c, LitElement as u, html as d } from "lit";
+import { property as p, customElement as _ } from "lit/decorators.js";
+import "./scb-menu-item.js";
+import "./scb-sub-menu.js";
+var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (e, t, n, o) => {
+  for (var s = o > 1 ? void 0 : o ? f(t, n) : t, i = e.length - 1, a; i >= 0; i--)
+    (a = e[i]) && (s = (o ? a(t, n, s) : a(s)) || s);
+  return o && s && h(t, n, s), s;
+};
+let r = class extends u {
+  constructor() {
+    super(...arguments), this.open = !1, this.__lastTriggerEl = null, this.__onDocumentClick = (e) => {
+      const t = this.__getActionFromEvent(e);
+      if (t) {
+        t === "open" && this.__setOpen(!0), t === "close" && this.__setOpen(!1), t === "toggle" && this.__setOpen(!this.open), e.stopPropagation();
+        return;
+      }
+    }, this.__onDocumentKeydown = (e) => {
+      if (this.open && e.key === "Escape") {
+        this.__setOpen(!1);
+        return;
+      }
+    };
+  }
+  render() {
+    return d`
+      <div style="display:${this.open ? "block" : "none"};">
+        <slot></slot>
+      </div>
+    `;
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.__onDocumentClick, !1), document.addEventListener("keydown", this.__onDocumentKeydown, !0);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.__onDocumentClick, !1), document.removeEventListener("keydown", this.__onDocumentKeydown, !0), super.disconnectedCallback();
+  }
+  /** Sätt endast state; side effects (overlay, fokus, events mm) hanteras i `updated()`. */
+  __setOpen(e) {
+    this.open = e;
+  }
+  // Kolla trigger via composedPath() (fungerar i shadow DOM)
+  __getActionFromEvent(e) {
+    if (!this.id) return null;
+    const t = e.composedPath();
+    for (const n of t)
+      if (n instanceof Element) {
+        if (n.getAttribute("data-menu-open") === this.id)
+          return this.__lastTriggerEl = n, "open";
+        if (n.getAttribute("data-menu-close") === this.id)
+          return this.__lastTriggerEl = n, "close";
+        if (n.getAttribute("data-menu-toggle") === this.id)
+          return this.__lastTriggerEl = n, "toggle";
+        if (n.getAttribute("aria-controls") === this.id)
+          return this.__lastTriggerEl = n, "toggle";
+      }
+    return null;
+  }
+  /** Reagera på ändrat `open` oavsett om det kom från triggers eller från kod (menu.open = …). */
+  updated(e) {
+    e.has("open") && this.__applyOpenSideEffects();
+  }
+  /** scroll lock, aria-uppdatering, fokusflytt och öppna/stäng-events. */
+  __applyOpenSideEffects() {
+    this.__updateTriggersExpanded();
+  }
+  /** Sätt aria-expanded=true/false på alla kontroller som pekar på aktuell meny via id. */
+  __updateTriggersExpanded() {
+    if (!this.id) return;
+    document.querySelectorAll(
+      `[aria-controls="${this.id}"], [data-menu-open="${this.id}"], [data-menu-close="${this.id}"], [data-menu-toggle="${this.id}"]`
+    ).forEach((t) => {
+      t.hasAttribute("aria-controls") && t.setAttribute("aria-expanded", String(this.open));
+    });
+  }
+};
+r.styles = c`
+    :host {
+      position: absolute;
+      display: block;
+      color: var(--md-sys-color-on-surface);
+      border-radius: var(--Radius-Extra-small, 4px);
+      background: var(--md-sys-color-surface, #FFF);
+      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.20), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
+    }
+    :host div {
+      background: var(--md-sys-color-surface, #FFF);
+    }
+  `;
+l([
+  p({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+r = l([
+  _("scb-menu")
+], r);
+export {
+  r as ScbMenu
+};

package/scb-menu/scb-sub-menu.d.ts

@@ -0,0 +1,12 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class ScbSubMenu extends LitElement {
+    open: boolean;
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    _show: () => void;
+    _hide: (e?: Event) => void;
+    firstUpdated(): void;
+    render(): TemplateResult;
+}

package/scb-menu/scb-sub-menu.js

@@ -0,0 +1,69 @@
+import { css as u, LitElement as a, html as h } from "lit";
+import { property as b, customElement as d } from "lit/decorators.js";
+var c = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? m(e, r) : e, i = t.length - 1, p; i >= 0; i--)
+    (p = t[i]) && (s = (o ? p(e, r, s) : p(s)) || s);
+  return o && s && c(e, r, s), s;
+};
+let n = class extends a {
+  constructor() {
+    super(...arguments), this.open = !1, this._show = () => {
+      this.setAttribute("open", ""), this.open = !0;
+    }, this._hide = (t) => {
+      this.removeAttribute("open"), this.open = !1, t && t.stopPropagation();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("show-submenu", this._show), this.addEventListener("hide-submenu", this._hide);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("show-submenu", this._show), this.removeEventListener("hide-submenu", this._hide), super.disconnectedCallback();
+  }
+  firstUpdated() {
+    let t = 0, e = this.parentElement;
+    for (; e; )
+      e.tagName === "SCB-SUB-MENU" && t++, e = e.parentElement;
+    t % 2 === 1 ? this.setAttribute("open-left", "") : this.removeAttribute("open-left");
+  }
+  render() {
+    return h`
+      <div class="submenu${this.open ? " open" : ""}">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+n.styles = u`
+    :host {
+      display: block;
+      position: relative;
+
+    }
+    .submenu {
+      display: none;
+      position: absolute;
+      left: 100%;
+      top: -44px;
+      z-index: 100;
+      border-radius: var(--Radius-Extra-small, 4px);
+      background: var(--md-sys-color-surface, #FFF);
+      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.20), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
+    }
+    :host([open-left]) .submenu {
+      left: auto;
+      right: 100%;
+    }
+    :host([open]) .submenu,
+    .submenu.open {
+      display: block;
+    }
+  `;
+l([
+  b({ type: Boolean, reflect: !0 })
+], n.prototype, "open", 2);
+n = l([
+  d("scb-sub-menu")
+], n);
+export {
+  n as ScbSubMenu
+};

package/scb-notification/scb-notification.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+
+export declare class ScbNotification extends LitElement {
+    open: boolean;
+    label: string;
+    type: string;
+    linkText: string;
+    linkhref: string;
+    showIcon: boolean;
+    showCloseButton: boolean;
+    static styles: import('lit').CSSResult[];
+    /** Return icon name for notification type */
+    private _iconForType;
+    private _closeNotification;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/scb-notification/scb-notification.js

@@ -0,0 +1,187 @@
+import { css as h, LitElement as f, html as n } from "lit";
+import { property as i, customElement as d } from "lit/decorators.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "@material/web/icon/icon.js";
+var x = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (r, s, a, c) => {
+  for (var e = c > 1 ? void 0 : c ? u(s, a) : s, l = r.length - 1, p; l >= 0; l--)
+    (p = r[l]) && (e = (c ? p(s, a, e) : p(e)) || e);
+  return c && e && x(s, a, e), e;
+};
+let t = class extends f {
+  constructor() {
+    super(...arguments), this.open = !1, this.label = "", this.type = "success", this.linkText = "", this.linkhref = "#", this.showIcon = !1, this.showCloseButton = !1, this._closeNotification = () => {
+      this.open = !1;
+      const r = new CustomEvent("close", {
+        detail: { open: this.open }
+      });
+      this.dispatchEvent(r);
+    };
+  }
+  /** Return icon name for notification type */
+  _iconForType() {
+    switch (this.type) {
+      case "success":
+        return "check_circle";
+      case "error":
+        return "error";
+      case "warning":
+        return "warning";
+      case "info":
+        return "info";
+      default:
+        return "info";
+    }
+  }
+  render() {
+    return n`
+            <div class="notification" type=${this.type} role="alert" aria-live="assertive" aria-atomic="true" style="display: ${this.open ? "flex" : "none"};">
+                ${this.showIcon || this.showCloseButton ? n`<div class="notification-header">
+                    ${this.showIcon ? n`<md-icon>${this._iconForType()}</md-icon>` : ""}
+                    ${this.showCloseButton ? n`<scb-icon-button icon="close" @click=${this._closeNotification}></scb-icon-button>` : ""}
+                </div>` : ""}
+                <div class="notification-content">
+                    ${this.label ? n`<div class="notification-label">${this.label}</div>` : ""}
+                    <slot></slot>
+                    ${this.linkText ? n`
+                    <div class="notification-footer">
+                        <a class="footer-link" href="${this.linkhref}">${this.linkText}</a>
+                    </div>
+                    ` : ""}
+                <div>
+            </div>
+        `;
+  }
+};
+t.styles = [
+  h`
+            :host {
+                display: block;
+                position: relative;
+                container-type: inline-size;
+                container-name: notification-container;
+            }
+
+            .notification {
+                border-radius: 12px;
+                padding: 16px;
+                display: flex;
+                gap: 12px;
+                flex-direction: column;
+
+            }
+            @container notification-container (min-width: 400px) {
+                .notification {
+                    flex-direction: row;
+                }
+                .notification-label {
+                    margin-right: 40px;
+                }
+            }
+            .notification-label {
+                font-weight: 600;
+                font-size: 20px;
+                line-height: 28px; /* 140% */
+                letter-spacing: -0.4px;
+            }
+            .notification[type="success"] {
+                background: var(--md-sys-color-success-container);
+                color: var(--md-sys-color-on-success-container);   
+
+                a{
+                    text-decoration: underline;
+                    text-decoration-thickness: 1px;
+                    text-underline-offset: .1578em;
+                    color: var(--md-sys-color-on-success-container);
+                    &:hover {text-decoration-thickness: 2px;}
+                }
+            }
+            .notification[type="error"] {
+                background: var(--md-sys-color-error-container);
+                color: var(--md-sys-color-on-error-container);
+                a{
+                    text-decoration: underline;
+                    text-decoration-thickness: 1px;
+                    text-underline-offset: .1578em;
+                    color: var(--md-sys-color-on-error-container);
+                    &:hover {text-decoration-thickness: 2px;}
+                }
+            }
+            .notification[type="warning"] {
+                background: var(--md-sys-color-warning-container);
+                color: var(--md-sys-color-on-warning-container);
+                a{
+                    text-decoration: underline;
+                    text-decoration-thickness: 1px;
+                    text-underline-offset: .1578em;
+                    color: var(--md-sys-color-on-warning-container);
+                    &:hover {text-decoration-thickness: 2px;}
+                }
+            }
+            .notification[type="info"] {
+                background: var(--md-sys-color-info-container);
+                color: var(--md-sys-color-on-info-container);
+                a{
+                    text-decoration: underline;
+                    text-decoration-thickness: 1px;
+                    text-underline-offset: .1578em;
+                    color: var(--md-sys-color-on-info-container);
+                    &:hover {text-decoration-thickness: 2px;}
+                }
+            }
+            .notification-header scb-icon-button {
+                position: absolute;
+                right: 8px;
+                top: 8px;
+            }
+            .notification-content{
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+            }
+            slot{
+                font-size: 18px;
+                line-height: 26px; 
+            }
+            .notification-footer {
+                font-size: 18px;
+                margin-top: 4px;
+                line-height: 26px; /* 133% */
+            }
+
+            :host([open]) .notification {
+                opacity: 1;
+            }
+
+            :host(:not([open])) .notification {
+                opacity: 0;
+                pointer-events: none;
+            }
+        `
+];
+o([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+o([
+  i({ type: String })
+], t.prototype, "label", 2);
+o([
+  i({ type: String })
+], t.prototype, "type", 2);
+o([
+  i({ type: String, attribute: "link-text" })
+], t.prototype, "linkText", 2);
+o([
+  i({ type: String, attribute: "link-href" })
+], t.prototype, "linkhref", 2);
+o([
+  i({ type: Boolean, attribute: "show-icon" })
+], t.prototype, "showIcon", 2);
+o([
+  i({ type: Boolean, attribute: "show-close-button" })
+], t.prototype, "showCloseButton", 2);
+t = o([
+  d("scb-notification")
+], t);
+export {
+  t as ScbNotification
+};

package/scb-progress-indicator/scb-progress-indicator.d.ts

@@ -0,0 +1,11 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class ScbProgressIndicator extends LitElement {
+    label: string;
+    type: 'circular' | 'linear';
+    color: string;
+    progress: number;
+    isStatic: boolean;
+    static styles: import('lit').CSSResult[];
+    render(): TemplateResult;
+}