scb-wc-test 0.1.1

package/scb-search/scb-search.js

@@ -0,0 +1,410 @@
+import { css as y, LitElement as x, nothing as b, html as d } from "lit";
+import { property as h, customElement as A } from "lit/decorators.js";
+import "../scb-list/scb-list.js";
+import "@material/web/ripple/ripple.js";
+import "@material/web/icon/icon.js";
+var w = Object.defineProperty, I = Object.getOwnPropertyDescriptor, l = (e, t, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? I(t, i) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (s = (n ? a(t, i, s) : a(s)) || s);
+  return n && s && w(t, i, s), s;
+};
+let S = 0, o = class extends x {
+  constructor() {
+    super(...arguments), this.supportingText = "Hinted search text", this.value = "", this.size = "default", this.fullScreen = !1, this._inputFocused = !1, this._visibleSuggestions = 0, this._activeIndex = -1, this._listboxId = `scb-search-listbox-${++S}`, this._kbMode = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    const e = this._inputEl();
+    e && this._boundNativeKeydown && e.removeEventListener("keydown", this._boundNativeKeydown, !0), super.disconnectedCallback();
+  }
+  firstUpdated() {
+    this._ensureListboxA11y(), this._updateComboboxA11y();
+    const e = this._inputEl();
+    e && (this._boundNativeKeydown = (t) => this._handleKey(t), e.addEventListener("keydown", this._boundNativeKeydown, !0));
+  }
+  updated() {
+    this._ensureListboxA11y(), this._updateComboboxA11y();
+  }
+  render() {
+    const e = (this.value ?? "").trim().length > 0, t = this._inputFocused && e && this._hasSuggestions;
+    return d`
+      <div class="ripple-wrapper">
+        <md-icon class="leading">${e ? "arrow_back" : "search"}</md-icon>
+
+        <input
+          id="searchInput"
+          type="search"
+          name="textfield"
+          class=${t ? "with-list" : ""}
+          .value=${this.value}
+          placeholder=${this.supportingText}
+          autocomplete="off"
+          @input=${this._onInput}
+          @focus=${this._onFocus}
+          @blur=${this._onBlur}
+          aria-label=${this.supportingText || "Sök"}
+        />
+
+        ${e ? d`<button class="clear-btn" @click=${this._clearInput} tabindex="-1" aria-label="Rensa sökfält">
+                   <md-icon>close</md-icon>
+                 </button>` : this.trailingIcon ? d`<span class="trailing"><md-icon>${this.trailingIcon}</md-icon></span>` : b}
+
+        <md-ripple></md-ripple>
+      </div>
+
+      <div class="list-divider" aria-hidden=${String(!(this.fullScreen && t))}></div>
+
+      ${t ? d`<scb-list class="suggestion-list" id=${this._listboxId}>
+                 <slot @slotchange=${this._onSlotChange}></slot>
+               </scb-list>` : b}
+    `;
+  }
+  submit() {
+    const e = this._getActiveItem(), t = { value: this.value };
+    e && (t.active = this._itemPayload(e)), this.dispatchEvent(new CustomEvent("scb-search-submit", {
+      detail: t,
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  get _hasSuggestions() {
+    return this._visibleSuggestions >= 0 ? this._visibleSuggestions > 0 : Array.from(this.getElementsByTagName("scb-list-item")).some((t) => !t.hasAttribute("hidden") && t.style.display !== "none");
+  }
+  _onSlotChange() {
+    this._filterSuggestions(this.value);
+  }
+  _onInput(e) {
+    const t = e.target;
+    this.value = t.value, this._filterSuggestions(this.value), this._activeIndex = -1, this._kbMode = !1, this._updateComboboxA11y(), this.dispatchEvent(new CustomEvent("scb-search-input", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _onFocus() {
+    this._inputFocused = !0, this._filterSuggestions(this.value), this._updateComboboxA11y(), this.requestUpdate();
+  }
+  _onBlur() {
+    setTimeout(() => {
+      this._inputFocused = !1, this._activeIndex = -1, this._kbMode = !1, this._updateComboboxA11y(), this.requestUpdate();
+    }, 100);
+  }
+  _handleKey(e) {
+    if (!this._inputEl()) return;
+    const i = this._getVisibleItems(), n = (this.value ?? "").trim().length > 0, s = this._inputFocused && n && i.length > 0, r = e.key, a = e.keyCode, c = r === "ArrowDown" || r === "Down" || a === 40, p = r === "ArrowUp" || r === "Up" || a === 38, v = r === "Home" || a === 36, g = r === "End" || a === 35, m = r === "Enter" || a === 13, f = r === "Escape" || r === "Esc" || a === 27;
+    if (c) {
+      if (!s) return;
+      e.preventDefault(), this._kbMode = !0, this._moveActive(i, 1);
+      return;
+    }
+    if (p) {
+      if (!s) return;
+      e.preventDefault(), this._kbMode = !0, this._moveActive(i, -1);
+      return;
+    }
+    if (v) {
+      if (!s) return;
+      e.preventDefault(), this._kbMode = !0, this._activeIndex = i.length ? 0 : -1, this._updateComboboxA11y(), this._scrollActiveIntoView();
+      return;
+    }
+    if (g) {
+      if (!s) return;
+      e.preventDefault(), this._kbMode = !0, this._activeIndex = i.length ? i.length - 1 : -1, this._updateComboboxA11y(), this._scrollActiveIntoView();
+      return;
+    }
+    if (m) {
+      if (!s) {
+        this.submit();
+        return;
+      }
+      e.preventDefault();
+      const u = this._getActiveItem();
+      if (u) {
+        const _ = u.getAttribute("label") || "";
+        this.value = _, this.dispatchEvent(new CustomEvent("scb-search-submit", {
+          detail: { value: this.value, active: this._itemPayload(u) },
+          bubbles: !0,
+          composed: !0
+        })), this._visibleSuggestions = 0, this._activeIndex = -1, this._kbMode = !1, this.requestUpdate();
+      } else
+        this.submit();
+      return;
+    }
+    if (f) {
+      e.preventDefault(), this._clearInput();
+      return;
+    }
+  }
+  _clearInput() {
+    this.value = "", this._activeIndex = -1, this._kbMode = !1;
+    const e = this._inputEl();
+    e == null || e.focus(), e && (e.value = ""), this._filterSuggestions(""), this._updateComboboxA11y(), this.dispatchEvent(new CustomEvent("scb-search-clear", { bubbles: !0, composed: !0 }));
+  }
+  _filterSuggestions(e) {
+    const t = (e ?? "").trim().toLowerCase(), i = Array.from(this.querySelectorAll("scb-list-item"));
+    let n = 0;
+    for (const s of i) {
+      const r = (s.getAttribute("label") || "").toLowerCase(), a = (s.getAttribute("supporting-text") || "").toLowerCase(), c = `${r} ${a}`.trim();
+      t !== "" && c.includes(t) ? (s.removeAttribute("hidden"), n++) : s.setAttribute("hidden", ""), this._ensureOptionA11y(s);
+    }
+    this._visibleSuggestions = n, this._activeIndex >= n && (this._activeIndex = -1), this._updateComboboxA11y(), this.requestUpdate();
+  }
+  _inputEl() {
+    var e;
+    return ((e = this.renderRoot) == null ? void 0 : e.querySelector("#searchInput")) ?? null;
+  }
+  _listEl() {
+    var e;
+    return ((e = this.renderRoot) == null ? void 0 : e.querySelector("scb-list.suggestion-list")) ?? null;
+  }
+  _getVisibleItems() {
+    return Array.from(this.querySelectorAll("scb-list-item")).filter((t) => !t.hasAttribute("hidden") && t.style.display !== "none");
+  }
+  _getActiveItem() {
+    const e = this._getVisibleItems();
+    return this._activeIndex < 0 || this._activeIndex >= e.length ? null : e[this._activeIndex] ?? null;
+  }
+  _moveActive(e, t) {
+    if (!e.length) {
+      this._activeIndex = -1, this._updateComboboxA11y();
+      return;
+    }
+    let i = this._activeIndex + t;
+    this._activeIndex === -1 ? i = t > 0 ? 0 : e.length - 1 : (i < 0 && (i = 0), i >= e.length && (i = e.length - 1)), this._activeIndex = i, this._updateComboboxA11y(), this._scrollActiveIntoView();
+  }
+  _scrollActiveIntoView() {
+    const e = this._getActiveItem();
+    e && e.scrollIntoView({ block: "nearest" });
+  }
+  _itemPayload(e) {
+    return {
+      label: e.getAttribute("label") || "",
+      supportingText: e.getAttribute("supporting-text") || "",
+      href: e.getAttribute("href") || "",
+      type: e.getAttribute("type") || "",
+      id: e.id || ""
+    };
+  }
+  _ensureListboxA11y() {
+    const e = this._listEl();
+    e && (e.id || (e.id = this._listboxId), e.setAttribute("role", "listbox"), e.setAttribute("aria-label", "Sökförslag")), Array.from(this.querySelectorAll("scb-list-item")).forEach((i) => this._ensureOptionA11y(i));
+  }
+  _ensureOptionA11y(e) {
+    e.id || (e.id = `${this._listboxId}-opt-${Math.random().toString(36).slice(2, 8)}`), e.setAttribute("role", "option"), e.setAttribute("tabindex", "-1");
+  }
+  _updateComboboxA11y() {
+    const e = this._inputEl();
+    if (!e) return;
+    const t = this._getVisibleItems(), i = (this.value ?? "").trim().length > 0, n = this._inputFocused && i && t.length > 0;
+    e.setAttribute("role", "combobox"), e.setAttribute("aria-autocomplete", "list"), e.setAttribute("aria-controls", this._listboxId), e.setAttribute("aria-expanded", String(n));
+    const s = n ? this._getActiveItem() : null;
+    s != null && s.id ? e.setAttribute("aria-activedescendant", s.id) : e.removeAttribute("aria-activedescendant"), t.forEach((r, a) => {
+      const c = a === this._activeIndex;
+      r.setAttribute("aria-selected", String(c)), r.style.boxShadow = "", r.style.borderRadius = "", this._kbMode && c && (r.style.boxShadow = "inset 0 0 0 var(--md-focus-ring-width, 2px) var(--md-focus-ring-color, var(--p-40))", r.style.borderRadius = "var(--md-sys-shape-corner-small, 8px)");
+    });
+  }
+};
+o.styles = y`
+    :host {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      color: var(--md-sys-color-on-surface);
+      -webkit-tap-highlight-color: transparent;
+
+      --scb-search-radius: var(--radius-full, 1000px);
+      --scb-search-open-radius: var(--radius-xl, 24px);
+
+      --scb-search-height: 56px;
+      --scb-search-padding-x: var(--spacing-5, 16px);
+      --scb-search-padding-y: var(--spacing-5, 16px);
+
+      --scb-search-leading-size: var(--scale-11, 48px);
+      --scb-search-trailing-size: var(--scale-11, 48px);
+      --scb-search-gap: var(--spacing-2, 4px);
+
+      letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
+
+      --scb-search-leading-gap: calc(
+        var(--scb-search-padding-x) + var(--scb-search-leading-size) + var(--scb-search-gap)
+      );
+      --scb-search-trailing-gap: calc(
+        var(--scb-search-padding-x) + var(--scb-search-trailing-size) + var(--scb-search-gap)
+      );
+
+      --scb-search-font-size: var(--md-sys-typescale-body-large-size, 18px);
+      --scb-search-line-height: var(--md-sys-typescale-body-large-line-height, 24px);
+      --scb-search-icon-size: var(--icon-size-small, 24px);
+    }
+
+    :host([size="compact"]) {
+      --scb-search-height: var(--scale-11, 40px);
+      --scb-search-padding-x: var(--spacing-4, 12px);
+      --scb-search-padding-y: var(--spacing-3, 8px);
+      --scb-search-open-radius: var(--radius-l, 16px);
+      --scb-search-font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+      --scb-search-line-height: var(--md-sys-typescale-body-medium-line-height, 20px);
+    }
+
+    .ripple-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .leading {
+      position: absolute;
+      left: var(--scb-search-padding-x);
+      top: 50%;
+      transform: translateY(-50%);
+      width: var(--scb-search-leading-size);
+      height: var(--scb-search-leading-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      color: var(--md-sys-color-on-surface-variant);
+      z-index: 2;
+    }
+    .leading md-icon {
+      font-size: var(--scb-search-icon-size);
+      line-height: 1;
+    }
+
+    .trailing,
+    .clear-btn {
+      position: absolute;
+      right: var(--scb-search-padding-x);
+      top: 50%;
+      transform: translateY(-50%);
+      width: var(--scb-search-trailing-size);
+      height: var(--scb-search-trailing-size);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--md-sys-color-on-surface-variant);
+      z-index: 3;
+    }
+    .trailing md-icon { pointer-events: none; font-size: var(--scb-search-icon-size); }
+
+    .clear-btn {
+      background: none;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+    }
+    .clear-btn[hidden] { display: none; }
+
+    input[type="search"] {
+      padding:
+        var(--scb-search-padding-y)
+        var(--scb-search-trailing-gap)
+        var(--scb-search-padding-y)
+        var(--scb-search-leading-gap);
+      min-height: var(--scb-search-height);
+      width: 100%;
+      box-sizing: border-box;
+
+      border: var(--stroke-border, 1px) solid var(--md-sys-color-outline);
+      border-radius: var(--scb-search-radius);
+
+      font-family: var(--md-sys-typescale-body-large-font, var(--brand-font, Inter), sans-serif);
+      font-size: var(--scb-search-font-size);
+      line-height: var(--scb-search-line-height);
+
+      color: var(--md-sys-color-on-surface);
+      background: var(--md-sys-color-surface);
+
+      position: relative;
+      z-index: 1;
+    }
+    input[type="search"]::placeholder {
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: var(--scb-search-font-size);
+      line-height: var(--scb-search-line-height);
+    }
+    input[type="search"]:hover { outline: var(--md-sys-color-outline) auto var(--stroke-border, 1px); }
+    input[type="search"]:focus { outline: none; }
+
+    md-ripple {
+      border-radius: var(--scb-search-radius);
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      pointer-events: none;
+      --md-ripple-hover-color: transparent;
+      --md-ripple-hover-opacity: 0;
+    }
+
+    input[type="search"]::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      appearance: none;
+      display: none;
+    }
+
+    input.with-list     { border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0; }
+    input.with-list ~ md-ripple { border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0; }
+
+    scb-list.suggestion-list {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      z-index: 10;
+      background: var(--md-sys-color-surface);
+      border: var(--stroke-border, 1px) solid var(--md-sys-color-outline);
+      border-top: 0;
+      border-radius: 0 0 var(--scb-search-open-radius) var(--scb-search-open-radius);
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+
+    :host([full-screen]) input[type="search"],
+    :host([full-screen]) input.with-list,
+    :host([full-screen]) input.with-list ~ md-ripple,
+    :host([full-screen]) md-ripple {
+      border-radius: var(--radius-none, 0px) !important;
+    }
+    :host([full-screen]) scb-list.suggestion-list {
+      position: static;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+    }
+
+    .list-divider {
+      display: none;
+      height: var(--stroke-border, 1px);
+      background: var(--md-sys-color-outline);
+      width: 100%;
+    }
+    :host([full-screen]) .list-divider[aria-hidden="false"] { display: block; }
+
+    @media (prefers-color-scheme: dark) {
+      :host { color: var(--md-sys-color-on-surface); }
+    }
+  `;
+l([
+  h({ type: String, attribute: "trailing-icon" })
+], o.prototype, "trailingIcon", 2);
+l([
+  h({ type: String, attribute: "supporting-text" })
+], o.prototype, "supportingText", 2);
+l([
+  h({ type: String })
+], o.prototype, "value", 2);
+l([
+  h({ type: String, reflect: !0 })
+], o.prototype, "size", 2);
+l([
+  h({ type: Boolean, attribute: "full-screen", reflect: !0 })
+], o.prototype, "fullScreen", 2);
+o = l([
+  A("scb-search")
+], o);
+export {
+  o as ScbSearch
+};

package/scb-snackbar/scb-snackbar.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+
+export declare class ScbSnackbar extends LitElement {
+    message: string;
+    open: boolean;
+    actionText: string;
+    showClose: boolean;
+    fixed: boolean;
+    fadeout: boolean;
+    withLongerAction: boolean;
+    private _fadeoutTimer;
+    static styles: import('lit').CSSResult;
+    private handleAction;
+    private handleClose;
+    updated(changedProps: Map<string, any>): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/scb-snackbar/scb-snackbar.js

@@ -0,0 +1,140 @@
+import { css as d, LitElement as m, html as r } from "lit";
+import { property as a, customElement as u } from "lit/decorators.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-button/scb-button.js";
+var h = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (t, e, n, c) => {
+  for (var i = c > 1 ? void 0 : c ? b(e, n) : e, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (i = (c ? p(e, n, i) : p(i)) || i);
+  return c && i && h(e, n, i), i;
+};
+let o = class extends m {
+  constructor() {
+    super(...arguments), this.message = "", this.open = !1, this.actionText = "", this.showClose = !1, this.fixed = !1, this.fadeout = !1, this.withLongerAction = !1;
+  }
+  handleAction() {
+    this.dispatchEvent(new CustomEvent("snackbar-action")), this.open = !1;
+  }
+  handleClose() {
+    this.dispatchEvent(new CustomEvent("snackbar-close")), this.open = !1;
+  }
+  updated(t) {
+    super.updated(t), (t.has("open") || t.has("fadeout")) && (this.open && this.fadeout ? (window.clearTimeout(this._fadeoutTimer), this._fadeoutTimer = window.setTimeout(() => {
+      this.open = !1;
+    }, 5e3)) : window.clearTimeout(this._fadeoutTimer));
+  }
+  render() {
+    const t = !!this.actionText, e = !!this.showClose;
+    let n = "snackbar";
+    return !t && !e && (n += " no-actions"), this.withLongerAction && (n += " longer-action"), r`
+            <div class="${n}" ?hidden=${!this.open}>
+                ${this.withLongerAction ? r`
+                    <div class="message">${this.message}</div>
+                    <div class="actions">
+                        ${t ? r`<scb-button variant="text" label=${this.actionText} @click=${this.handleAction}></scb-button>` : ""}
+                        ${e ? r`<scb-icon-button icon="close" @click=${this.handleClose} aria-label="Stäng"></scb-icon-button>` : ""}
+                    </div>
+                ` : r`
+                    <span class="message">${this.message}</span>
+                    ${t ? r`<scb-button variant="text" label=${this.actionText} @click=${this.handleAction}></scb-button>` : ""}
+                    ${e ? r`<scb-icon-button icon="close" @click=${this.handleClose} aria-label="Stäng"></scb-icon-button>` : ""}
+                `}
+
+            </div>
+        `;
+  }
+};
+o.styles = d`
+		:host {
+			position: relative;
+			display: block;
+            min-width: 312px;
+			max-width: 560px;
+		}
+		:host([fixed]) {
+			position: fixed;
+            z-index: 9999;
+            left: 50%;
+			bottom: 24px;
+            transform: translateX(-50%);
+		}
+		.snackbar {
+			background: var(--md-sys-color-inverse-surface);
+			color: var(--md-sys-color-inverse-on-surface);
+			border-radius: 4px;
+			box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
+			display: flex;
+			align-items: center;
+			padding: 14px 16px;
+			font-size: 16px;
+			opacity: 0;
+			transition: opacity 0.3s, bottom 0.3s;
+			pointer-events: auto;
+            position: relative;
+		}
+        .snackbar.longer-action {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        .snackbar .actions {
+            display: flex;
+            margin-top: 10px;
+            width: 100%;
+            justify-content: flex-end;
+
+        }
+        .message.no-actions {
+			margin-right: 0;
+		}
+		:host([open]) .snackbar {
+			opacity: 1;
+			pointer-events: auto;
+		}
+		.message {
+			flex: 1 1 auto;
+            margin-right: 4px;
+		}
+        .snackbar scb-icon-button{
+            --md-icon-button-icon-color: var(--md-sys-color-inverse-on-surface);
+            --md-icon-button-hover-icon-color: var(--md-sys-color-inverse-on-surface);
+            --md-icon-button-hover-state-layer-color: var(--md-sys-color-surface-container);
+            --md-icon-button-focus-icon-color: var(--md-sys-color-inverse-on-surface);
+            --md-icon-button-pressed-icon-color: var(--md-sys-color-inverse-on-surface);
+            --md-focus-ring-color: var(--md-sys-color-inverse-on-surface);
+        }
+        .snackbar scb-button{
+            --md-text-button-label-text-color: var(--md-sys-color-inverse-primary);
+            --md-text-button-hover-label-text-color: var(--md-sys-color-inverse-primary);
+            --md-text-button-hover-state-layer-color: var(--md-sys-color-surface-container);
+            --md-text-button-focus-label-text-color: var(--md-sys-color-inverse-primary);
+            --md-text-button-pressed-label-text-color: var(--md-sys-color-inverse-primary);
+            --md-focus-ring-color: var(--md-sys-color-inverse-on-surface);
+        }
+
+	`;
+s([
+  a({ type: String })
+], o.prototype, "message", 2);
+s([
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+s([
+  a({ type: String, attribute: "action-text" })
+], o.prototype, "actionText", 2);
+s([
+  a({ type: Boolean, attribute: "show-close" })
+], o.prototype, "showClose", 2);
+s([
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "fixed", 2);
+s([
+  a({ type: Boolean })
+], o.prototype, "fadeout", 2);
+s([
+  a({ type: Boolean, attribute: "with-longer-action" })
+], o.prototype, "withLongerAction", 2);
+o = s([
+  u("scb-snackbar")
+], o);
+export {
+  o as ScbSnackbar
+};

package/scb-status-pill/scb-status-pill.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+
+export declare class ScbStatusPill extends LitElement {
+    status: string;
+    label: string;
+    showIcon: boolean;
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/scb-status-pill/scb-status-pill.js

@@ -0,0 +1,62 @@
+import { css as u, LitElement as d, html as e } from "lit";
+import { property as l, customElement as m } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+var h = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (p, o, c, t) => {
+  for (var s = t > 1 ? void 0 : t ? b(o, c) : o, i = p.length - 1, a; i >= 0; i--)
+    (a = p[i]) && (s = (t ? a(o, c, s) : a(s)) || s);
+  return t && s && h(o, c, s), s;
+};
+let r = class extends d {
+  constructor() {
+    super(...arguments), this.status = "", this.label = "", this.showIcon = !1;
+  }
+  render() {
+    return e`
+    ${this.showIcon ? this.status === "success" ? e`<md-icon>check_circle</md-icon>` : this.status === "warning" ? e`<md-icon>warning</md-icon>` : this.status === "error" ? e`<md-icon>error</md-icon>` : "" : ""}
+    <span>${this.label}</span>
+    `;
+  }
+};
+r.styles = u`
+    :host {
+      display: inline-block;
+      border-radius: 999px;
+      padding: 6px 16px;
+      font-size: 14px;
+      font-weight: 600;
+      border: none;
+      box-sizing: border-box;
+      user-select: none;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: fit-content;
+    }
+    :host([status="success"]) {
+        background: var(--md-sys-color-success-container);
+        color: var(--md-sys-color-on-success-container);   
+    }
+    :host([status="warning"]) {
+      background: var(--md-sys-color-warning-container);
+      color: var(--md-sys-color-on-warning-container);
+    }
+    :host([status="error"]) {
+        background: var(--md-sys-color-error-container);
+        color: var(--md-sys-color-on-error-container);
+    }
+  `;
+n([
+  l({ type: String })
+], r.prototype, "status", 2);
+n([
+  l({ type: String })
+], r.prototype, "label", 2);
+n([
+  l({ type: Boolean, attribute: "show-icon" })
+], r.prototype, "showIcon", 2);
+r = n([
+  m("scb-status-pill")
+], r);
+export {
+  r as ScbStatusPill
+};

package/scb-switch/scb-switch.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class ScbSwitch extends LitElement {
+    #private;
+    label: string;
+    ariaLabel: string;
+    icons: boolean;
+    selected: boolean;
+    disabled: boolean;
+    /** Full-width layout: space-between + width:100% när true */
+    fullWidth: boolean;
+    static styles: import('lit').CSSResult;
+    protected updated(): void;
+    protected firstUpdated(): Promise<void>;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-switch': ScbSwitch;
+    }
+}