scb-wc-test 0.1.11 → 0.1.13

package/scb-link/scb-link.js

@@ -1,72 +1,99 @@
-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) => {
+import { css as h, LitElement as u, html as v } from "lit";
+import { property as s, customElement as y } from "lit/decorators.js";
+import { ifDefined as n } from "lit/directives/if-defined.js";
+import "@material/web/focus/md-focus-ring.js";
+var m = Object.defineProperty, b = 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 {
+}, i = (e, r, t, l) => {
+  for (var a = l > 1 ? void 0 : l ? b(r, t) : r, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (a = (l ? c(r, t, a) : c(a)) || a);
+  return l && a && m(r, t, a), a;
+}, g = (e, r, t) => r.has(e) || f("Cannot " + t), _ = (e, r, t) => (g(e, r, "read from private field"), t ? t.call(e) : r.get(e)), x = (e, r, t) => r.has(e) ? f("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, t), p;
+let o = class extends u {
   constructor() {
-    super(...arguments), this.href = "", this.disabled = !1, g(this, d, (e) => {
+    super(...arguments), this.href = "", this.disabled = !1, this.ariaLabel = "", x(this, p, (e) => {
       this.disabled && (e.preventDefault(), e.stopPropagation());
     });
   }
   render() {
     const e = this.target === "_blank" && !this.rel ? "noopener noreferrer" : this.rel;
-    return u`
+    return v`
       <a
         part="anchor"
-        href=${i(this.disabled ? void 0 : this.href || void 0)}
-        target=${i(this.target)}
-        rel=${i(e)}
-        download=${i(this.download)}
+        href=${n(this.disabled ? void 0 : this.href || void 0)}
+        target=${n(this.target)}
+        rel=${n(e)}
+        download=${n(this.download)}
         aria-disabled=${this.disabled ? "true" : "false"}
-        aria-label=${i(this.ariaLabel ?? void 0)}
-        @click=${b(this, d)}
+        aria-label=${n(this.ariaLabel || void 0)}
+        @click=${_(this, p)}
       ><slot></slot></a>
+
+      <md-focus-ring></md-focus-ring>
     `;
   }
 };
-d = /* @__PURE__ */ new WeakMap();
+p = /* @__PURE__ */ new WeakMap();
 o.styles = h`
-    :host { display:inline }
+    :host {
+      display: inline-block; 
+      position: relative;  
+       padding: var(--scb-link-focus-ring-gap, 4px);
+      font-family: var(--brand-font, inherit);
+      color: var(--md-sys-color-on-surface);
+    }
+
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: var(--scb-link-focus-ring-radius, var(--md-sys-shape-corner-small, 1px));
+    }
+    :host(:focus-within) md-focus-ring {
+      display: block;
+    }
+
     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;
+      border-radius: var(--radius-2, 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:focus { outline: none; }
     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; }
+
+    :host([disabled]) a {
+      pointer-events: none;
+      opacity: .64;
+      text-decoration: none;
+      cursor: default;
+    }
   `;
-s([
-  n({ type: String, reflect: !0 })
+i([
+  s({ type: String, reflect: !0 })
 ], o.prototype, "href", 2);
-s([
-  n({ type: String, reflect: !0 })
+i([
+  s({ type: String, reflect: !0 })
 ], o.prototype, "target", 2);
-s([
-  n({ type: String, reflect: !0 })
+i([
+  s({ type: String, reflect: !0 })
 ], o.prototype, "rel", 2);
-s([
-  n({ type: String, reflect: !0 })
+i([
+  s({ type: String, reflect: !0 })
 ], o.prototype, "download", 2);
-s([
-  n({ type: Boolean, reflect: !0 })
+i([
+  s({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
-o = s([
+i([
+  s({ type: String, attribute: "aria-label" })
+], o.prototype, "ariaLabel", 2);
+o = i([
   y("scb-link")
 ], o);
 export {

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

@@ -2,7 +2,6 @@ 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;
@@ -11,17 +10,21 @@ export declare class ScbListItem extends LitElement {
     supportingText: string;
     overline: string;
     leading: boolean;
+    leadingVariant: '' | 'icon' | 'avatar' | 'image';
     leadingIcon: string;
-    imgHrefAvatar: string;
+    avatarLabel: string;
+    avatarAlt: string;
+    avatarVariant: 'icon' | 'image';
+    avatarSrc: string;
     imgHrefImage: string;
-    leadingVariant: 'icon' | 'avatar' | 'image';
     trailing: boolean;
+    trailingVariant: '' | 'icon' | 'checkbox' | 'switch';
     trailingIcon: string;
-    trailingVariant: 'icon' | 'checkbox' | 'switch';
+    density: -4 | -2 | 0;
     static get styles(): import('lit').CSSResult;
     protected firstUpdated(): Promise<void>;
     protected updated(changed: PropertyValues): void;
-    private onListClick;
+    private onRowClick;
     render(): TemplateResult;
 }
 declare global {

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

@@ -1,93 +1,191 @@
-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) => {
+import { LitElement as S, css as $, nothing as l, html as o } from "lit";
+import { property as s, customElement as V } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/ripple/ripple.js";
+var I = Object.defineProperty, L = Object.getOwnPropertyDescriptor, _ = (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;
+  for (var p = n > 1 ? void 0 : n ? L(i, e) : i, d = t.length - 1, c; d >= 0; d--)
+    (c = t[d]) && (p = (n ? c(i, e, p) : c(p)) || p);
+  return n && p && I(i, e, p), p;
+}, w = (t, i, e) => i.has(t) || _("Cannot " + e), g = (t, i, e) => (w(t, i, "read from private field"), e ? e.call(t) : i.get(t)), h = (t, i, e) => i.has(t) ? _("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), m = (t, i, e, n) => (w(t, i, "write to private field"), i.set(t, e), e), x = (t, i, e) => (w(t, i, "access private method"), e), y, f, u, v, b, k;
 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);
+    super(...arguments), h(this, v), this.type = "text", this.href = "", this.itemHref = "", this.target = "", this.disabled = !1, this.label = "", this.supportingText = "", this.overline = "", this.leading = !1, this.leadingVariant = "", this.leadingIcon = "", this.avatarLabel = "", this.avatarAlt = "", this.avatarVariant = "icon", this.avatarSrc = "", this.imgHrefImage = "", this.trailing = !1, this.trailingVariant = "", this.trailingIcon = "", this.density = 0, h(this, y, !1), h(this, f, !1), h(this, u, !1), this.onRowClick = () => {
+      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);
+    }, h(this, k, (t) => {
+      var i;
+      if (!t.defaultPrevented && (t.key === "Enter" || t.key === " ")) {
+        if (this.type === "link") {
+          const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("a[href]");
+          if (e) {
+            t.preventDefault(), e.click();
+            return;
+          }
+        }
+        t.preventDefault(), this.onRowClick();
+      }
+    });
   }
   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; }
+      :host {
+        border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
+        margin-bottom: calc(var(--stroke-border, 1px) * -1);
+        outline: none;
+        position: relative;
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand-font);
+      }
+
+      md-focus-ring {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        display: none;
+        border-radius: var(--scb-list-item-focus-ring-radius, var(--md-sys-shape-corner-small, 8px));
+      }
+      :host(:focus-visible) md-focus-ring { display: block; }
+
+      .row {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-5, 16px);
+        padding-block: var(--spacing-7, 24px);
+        padding-inline: var(--spacing-5, 16px);
+        border-radius: var(--radius-none, 0px);
+        -webkit-tap-highlight-color: transparent;
+        position: relative;
+        overflow: hidden;
+        cursor: default;
+      }
+      :host([type="link"]) .row { cursor: pointer; }
+
+      :host([density="-2"]) .row,
+      :host-context([data-density="-2"]) .row {
+        padding-block: var(--spacing-5, 16px);
+      }
+      :host([density="-4"]) .row,
+      :host-context([data-density="-4"]) .row {
+        padding-block: var(--spacing-4, 12px);
+      }
 
-      .leading-content:has(.avatar) {
-        width: 40px; height: 40px;
-        background: var(--md-sys-color-primary-container);
-        border-radius: 50%;
-        align-content: center; justify-items: center;
+      md-ripple {
+        border-radius: inherit;
+        inset: 0;
+        position: absolute;
+        pointer-events: none;
       }
-      .avatar { width: 24px; height: 24px; position: relative; display: flex; }
-      .img { width: 56px; height: 56px; }
+
+      .leading { align-self: center; display: grid; place-items: center; }
+      .img {
+        width: calc(var(--icon-size-large, 40px) + var(--spacing-5, 16px));
+        height: calc(var(--icon-size-large, 40px) + var(--spacing-5, 16px));
+        object-fit: contain;
+        border-radius: var(--radius-s, 8px);
+      }
+
+      .texts { display: grid; gap: var(--spacing-1, 2px); min-inline-size: 0; }
+
+      .overline {
+        font-family: var(--brand-font);
+        font-size: var(--md-sys-typescale-label-medium-size);
+        line-height: var(--md-sys-typescale-label-medium-line-height);
+        font-weight: var(--weight-regular);
+        letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .label {
+        font-family: var(--brand-font);
+        font-size: var(--md-sys-typescale-title-large-size);
+        line-height: var(--md-sys-typescale-title-large-line-height);
+        font-weight: var(--weight-semibold);
+        letter-spacing: var(--md-sys-typescale-title-large-tracking);
+        color: var(--md-sys-color-on-surface);
+      }
+      .supporting-text {
+        font-family: var(--brand-font);
+        font-size: var(--md-sys-typescale-body-medium-size);
+        line-height: var(--md-sys-typescale-body-medium-line-height);
+        font-weight: var(--weight-regular);
+        letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .trailing { margin-left: auto; align-self: center; }
+      .trailing scb-checkbox { margin-right: 11px; }
+
+      .link { text-decoration: none; color: inherit; display: contents; }
     `;
   }
-  // Ladda in rätt beroenden första gången
   async firstUpdated() {
-    await _(this, v, w).call(this);
+    await x(this, v, b).call(this), this.addEventListener("keydown", g(this, k));
   }
-  // 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);
+    super.updated(t), (t.has("leading") || t.has("leadingVariant") || t.has("trailing") || t.has("trailingVariant") || t.has("type") || t.has("target")) && x(this, v, b).call(this);
   }
   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;
+    const t = this.leading ? (() => {
+      switch (this.leadingVariant) {
+        case "icon":
+          return this.leadingIcon ? o`<div class="leading"><md-icon>${this.leadingIcon}</md-icon></div>` : l;
+        case "avatar":
+          return o`
+            <div class="leading">
+              <scb-avatar
+                label=${this.avatarLabel}
+                alt=${this.avatarAlt}
+                src=${this.avatarVariant === "image" ? this.avatarSrc : ""}
+                size="medium"
+                shape="circular"
+                variant=${this.avatarVariant}
+              ></scb-avatar>
+            </div>
+          `;
+        case "image":
+          return this.imgHrefImage ? o`<div class="leading"><img class="img" src="${this.imgHrefImage}" alt="" /></div>` : l;
+        default:
+          return l;
+      }
+    })() : l, i = this.href || this.itemHref || "", e = this.target === "_blank" ? "open_in_new" : "chevron_right";
+    let n = l;
     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>
+        const c = this.trailingIcon || (this.type === "link" ? e : "");
+        n = c ? o`<div class="trailing"><md-icon>${c}</md-icon></div>` : l;
+      } else this.trailingVariant === "checkbox" ? n = o`<div class="trailing"><scb-checkbox @click=${(c) => c.stopPropagation()}></scb-checkbox></div>` : this.trailingVariant === "switch" && (n = o`<div class="trailing"><scb-switch @click=${(c) => c.stopPropagation()}></scb-switch></div>`);
+    else this.type === "link" && (n = o`<div class="trailing"><md-icon>${e}</md-icon></div>`);
+    const p = this.type === "link" && this.target === "_blank" ? "noopener noreferrer" : l, d = o`
+      ${t}
+      <div class="texts">
+        ${this.overline ? o`<div class="overline">${this.overline}</div>` : l}
+        <div class="label">${this.label}</div>
+        ${this.supportingText ? o`<div class="supporting-text">${this.supportingText}</div>` : l}
+      </div>
+      ${n}
+    `;
+    return o`
+      <div class="row" @click=${this.onRowClick} ?inert=${this.disabled} aria-disabled=${this.disabled ? "true" : "false"}>
+        ${this.type === "link" && i ? o`<a class="link" href=${i} target=${this.target || l} rel=${p}>${d}</a>` : d}
+        ${this.type === "link" ? o`<md-ripple></md-ripple>` : l}
+      </div>
+
+      <md-focus-ring></md-focus-ring>
     `;
   }
 };
-f = /* @__PURE__ */ new WeakMap();
-m = /* @__PURE__ */ new WeakMap();
 y = /* @__PURE__ */ new WeakMap();
+f = /* @__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));
+b = async function() {
+  const t = this.type === "link" && (!this.trailing || this.trailingVariant === "icon");
+  (this.leading && this.leadingVariant === "icon" || this.trailing && this.trailingVariant === "icon" || t) && !g(this, y) && (await import("@material/web/icon/icon.js"), m(this, y, !0)), this.trailing && this.trailingVariant === "checkbox" && !g(this, f) && (await import("../scb-checkbox/scb-checkbox.js"), m(this, f, !0)), this.trailing && this.trailingVariant === "switch" && !g(this, u) && (await import("../scb-switch/scb-switch.js"), m(this, u, !0));
 };
+k = /* @__PURE__ */ new WeakMap();
 r([
   s({ type: String, reflect: !0, attribute: "type" })
 ], a.prototype, "type", 2);
@@ -115,29 +213,41 @@ r([
 r([
   s({ type: Boolean })
 ], a.prototype, "leading", 2);
+r([
+  s({ type: String, attribute: "leading-variant", reflect: !0 })
+], a.prototype, "leadingVariant", 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);
+  s({ type: String, attribute: "avatar-label" })
+], a.prototype, "avatarLabel", 2);
+r([
+  s({ type: String, attribute: "avatar-alt" })
+], a.prototype, "avatarAlt", 2);
+r([
+  s({ type: String, attribute: "avatar-variant" })
+], a.prototype, "avatarVariant", 2);
+r([
+  s({ type: String, attribute: "avatar-src" })
+], a.prototype, "avatarSrc", 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-variant", reflect: !0 })
+], a.prototype, "trailingVariant", 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);
+  s({ type: Number, reflect: !0 })
+], a.prototype, "density", 2);
 a = r([
-  I("scb-list-item")
+  V("scb-list-item")
 ], a);
 export {
   a as ScbListItem

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

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

package/scb-list/scb-list.js

@@ -1,38 +1,88 @@
-import { css as v, LitElement as c, html as _ } from "lit";
-import { customElement as f } from "lit/decorators.js";
+import { css as u, LitElement as f, html as _ } from "lit";
+import { query as m, customElement as v } 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 {
+var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, c = (e) => {
+  throw TypeError(e);
+}, d = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? b(t, s) : t, o = e.length - 1, i; o >= 0; o--)
+    (i = e[o]) && (a = (r ? i(t, s, a) : i(a)) || a);
+  return r && a && g(t, s, a), a;
+}, h = (e, t, s) => t.has(e) || c("Cannot " + s), w = (e, t, s) => (h(e, t, "read from private field"), t.get(e)), y = (e, t, s) => t.has(e) ? c("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), A = (e, t, s, r) => (h(e, t, "write to private field"), t.set(e, s), s), n;
+let l = class extends f {
   constructor() {
-    super(...arguments), y(this, a, !1);
+    super(...arguments), y(this, n, !1), this._onSlotChange = () => this._setupItems();
   }
   async firstUpdated() {
-    u(this, a) || (await import("@material/web/list/list.js"), w(this, a, !0));
+    w(this, n) || (await import("@material/web/list/list.js"), A(this, n, !0)), this._setupItems();
+  }
+  _getItems() {
+    var t;
+    return (((t = this._slotEl) == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? []).filter((s) => s instanceof HTMLElement);
+  }
+  _setupItems() {
+    var s;
+    this._getItems().forEach((r, a) => {
+      r.hasAttribute("role") || r.setAttribute("role", "listitem"), r.setAttribute("tabindex", a === 0 ? "0" : "-1");
+    });
+    const t = (s = this.renderRoot) == null ? void 0 : s.querySelector("md-list");
+    t && !t.hasAttribute("data-kbd") && (t.setAttribute("data-kbd", "true"), t.addEventListener("keydown", (r) => this._onKeyDown(r)));
+  }
+  _onKeyDown(e) {
+    const t = this._getItems();
+    if (!t.length) return;
+    const s = t.findIndex((a) => a.getAttribute("tabindex") === "0"), r = (a) => {
+      const o = (a % t.length + t.length) % t.length;
+      t.forEach((p) => p.setAttribute("tabindex", "-1"));
+      const i = t[o];
+      i.setAttribute("tabindex", "0"), i.focus();
+    };
+    switch (e.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        e.preventDefault(), r(s < 0 ? 0 : s + 1);
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        e.preventDefault(), r(s < 0 ? 0 : s - 1);
+        break;
+      case "Home":
+        e.preventDefault(), r(0);
+        break;
+      case "End":
+        e.preventDefault(), r(t.length - 1);
+        break;
+    }
   }
   render() {
     return _`
-      <md-list role="list">
+      <md-list role="list" @slotchange=${this._onSlotChange}>
         <slot></slot>
       </md-list>
     `;
   }
 };
-a = /* @__PURE__ */ new WeakMap();
+n = /* @__PURE__ */ new WeakMap();
 l.styles = [
-  v`
-      ::slotted(scb-list-item:first-of-type) {
-        border-top: 1px solid var(--md-sys-color-outline-variant);
-      }
-    `
+  u`
+    :host {
+      display: block;
+      --scb-list-bg: var(--md-sys-color-surface-container-lowest);
+    }
+
+    md-list {
+      background: var(--scb-list-bg);
+    }
+
+    ::slotted(scb-list-item:first-of-type) {
+      border-top: 1px solid var(--md-sys-color-outline-variant);
+    }
+  `
 ];
-l = m([
-  f("scb-list")
+d([
+  m("slot")
+], l.prototype, "_slotEl", 2);
+l = d([
+  v("scb-list")
 ], l);
 export {
   l as ScbList

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

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export declare class ScbNotificationCard extends LitElement {
+    type: string;
+    direction: 'horizontal' | 'vertical';
+    title: string;
+    subtitle: string;
+    supportingText: string;
+    open: boolean;
+    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>;
+}