scb-wc-test 0.1.104 → 0.1.106

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

@@ -1,14 +1,16 @@
-import { css as h, LitElement as u, html as o } from "lit";
-import { property as a, customElement as _ } from "lit/decorators.js";
+import { css as b, LitElement as g, html as a } from "lit";
+import { property as r, customElement as f } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
-var b = Object.defineProperty, p = Object.getOwnPropertyDescriptor, n = (t, e, l, r) => {
-  for (var s = r > 1 ? void 0 : r ? p(e, l) : e, d = t.length - 1, c; d >= 0; d--)
-    (c = t[d]) && (s = (r ? c(e, l, s) : c(s)) || s);
-  return r && s && b(e, l, s), s;
-};
-let i = class extends u {
+var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, _ = (t) => {
+  throw TypeError(t);
+}, o = (t, e, i, l) => {
+  for (var n = l > 1 ? void 0 : l ? v(e, i) : e, d = t.length - 1, h; d >= 0; d--)
+    (h = t[d]) && (n = (l ? h(e, i, n) : h(n)) || n);
+  return l && n && m(e, i, n), n;
+}, y = (t, e, i) => e.has(t) || _("Cannot " + i), $ = (t, e, i) => e.has(t) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), p = (t, e, i) => (y(t, e, "access private method"), i), c, u;
+let s = class extends g {
   constructor() {
-    super(...arguments), this.icon = "home", this.tooltip = "", this.ariaLabel = "", this.variant = "standard", this.toggle = !1, this.selected = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__lastMdHost = null, this.__onInnerChange = () => {
+    super(...arguments), $(this, c), this.icon = "home", this.tooltip = "", this.ariaLabel = "", this.variant = "standard", this.toggle = !1, this.selected = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.spacing = "", this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__lastMdHost = null, this.__onInnerChange = () => {
       const t = this.__getMdHost(), e = !!(t != null && t.selected);
       this.toggle && (this.selected = e), this.dispatchEvent(
         new CustomEvent("change", {
@@ -20,10 +22,10 @@ let i = class extends u {
     };
   }
   async firstUpdated() {
-    await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener(), this.__syncTitleAndAria();
+    await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener(), this.__syncTitleAndAria(), p(this, c, u).call(this);
   }
   updated(t) {
-    if (super.updated(t), t.has("variant")) {
+    if (super.updated(t), t.has("spacing") && p(this, c, u).call(this), t.has("variant")) {
       this.__ensureDepsLoaded().then(() => {
         queueMicrotask(() => {
           this.__attachChangeListener(), this.__syncTitleAndAria();
@@ -67,35 +69,42 @@ let i = class extends u {
   }
   /** Koppla change-event från md-* samt spegla selected. */
   __attachChangeListener() {
-    var e, l;
+    var e, i;
     const t = this.__getMdHost();
-    t && t !== this.__lastMdHost && ((l = (e = this.__lastMdHost) == null ? void 0 : e.removeEventListener) == null || l.call(e, "change", this.__onInnerChange), t.addEventListener("change", this.__onInnerChange), this.__lastMdHost = t), this.toggle && t && "selected" in t && (t.selected = this.selected);
+    t && t !== this.__lastMdHost && ((i = (e = this.__lastMdHost) == null ? void 0 : e.removeEventListener) == null || i.call(e, "change", this.__onInnerChange), t.addEventListener("change", this.__onInnerChange), this.__lastMdHost = t), this.toggle && t && "selected" in t && (t.selected = this.selected);
   }
   /**
-   * Synkar native title och aria-* mellan host och md-*. */
+   * Synkar native title och aria-* mellan host och md-*.
+   */
   __syncTitleAndAria() {
     const t = this.__getMdHost();
     if (!t) return;
-    const e = (this.tooltip || this.getAttribute("title") || "").trim(), l = (this.ariaLabel || this.getAttribute("aria-label") || "").trim(), r = this.getAttribute("aria-controls"), s = this.getAttribute("aria-expanded");
+    const e = (this.tooltip || this.getAttribute("title") || "").trim(), i = (this.ariaLabel || this.getAttribute("aria-label") || "").trim(), l = this.getAttribute("aria-controls"), n = this.getAttribute("aria-expanded");
     this.tooltip && this.setAttribute("title", e);
-    const d = l || e || this.icon.trim() || void 0;
-    d ? t.setAttribute("aria-label", d) : t.removeAttribute("aria-label"), e ? t.setAttribute("title", e) : t.removeAttribute("title"), r !== null ? t.setAttribute("aria-controls", r) : t.removeAttribute("aria-controls"), s !== null ? t.setAttribute("aria-expanded", s) : t.removeAttribute("aria-expanded");
+    const d = i || e || this.icon.trim() || void 0;
+    d ? t.setAttribute("aria-label", d) : t.removeAttribute("aria-label"), e ? t.setAttribute("title", e) : t.removeAttribute("title"), l !== null ? t.setAttribute("aria-controls", l) : t.removeAttribute("aria-controls"), n !== null ? t.setAttribute("aria-expanded", n) : t.removeAttribute("aria-expanded");
+  }
+  mapSpacingToken(t) {
+    if (!t) return;
+    const e = String(t).trim();
+    if (e)
+      return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
   }
   __renderToggleIcons() {
-    return o`
+    return a`
       <md-icon aria-hidden="true">${this.toggleofficon}</md-icon>
       <md-icon slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
     `;
   }
   __renderSingleIcon() {
-    return o`<md-icon aria-hidden="true">${this.icon}</md-icon>`;
+    return a`<md-icon aria-hidden="true">${this.icon}</md-icon>`;
   }
   __renderMd() {
     const t = this.toggle ? this.__renderToggleIcons() : this.__renderSingleIcon();
     if (this.toggle)
       switch (this.variant) {
         case "filled":
-          return o`
+          return a`
             <md-filled-icon-button
               toggle
               ?selected=${this.selected}
@@ -105,7 +114,7 @@ let i = class extends u {
             </md-filled-icon-button>
           `;
         case "outlined":
-          return o`
+          return a`
             <md-outlined-icon-button
               toggle
               ?selected=${this.selected}
@@ -115,7 +124,7 @@ let i = class extends u {
             </md-outlined-icon-button>
           `;
         case "filled-tonal":
-          return o`
+          return a`
             <md-filled-tonal-icon-button
               toggle
               ?selected=${this.selected}
@@ -125,7 +134,7 @@ let i = class extends u {
             </md-filled-tonal-icon-button>
           `;
         default:
-          return o`
+          return a`
             <md-icon-button toggle ?selected=${this.selected} ?disabled=${this.disabled}>
               ${t}
             </md-icon-button>
@@ -133,25 +142,25 @@ let i = class extends u {
       }
     switch (this.variant) {
       case "filled":
-        return o`
+        return a`
           <md-filled-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-filled-icon-button>
         `;
       case "outlined":
-        return o`
+        return a`
           <md-outlined-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-outlined-icon-button>
         `;
       case "filled-tonal":
-        return o`
+        return a`
           <md-filled-tonal-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-filled-tonal-icon-button>
         `;
       default:
-        return o`
+        return a`
           <md-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-icon-button>
@@ -162,37 +171,50 @@ let i = class extends u {
     return this.__renderMd();
   }
 };
-i.styles = h``;
-n([
-  a({ type: String })
-], i.prototype, "icon", 2);
-n([
-  a({ type: String })
-], i.prototype, "tooltip", 2);
-n([
-  a({ type: String, attribute: "aria-label" })
-], i.prototype, "ariaLabel", 2);
-n([
-  a({ type: String })
-], i.prototype, "variant", 2);
-n([
-  a({ type: Boolean, reflect: !0 })
-], i.prototype, "toggle", 2);
-n([
-  a({ type: Boolean, reflect: !0 })
-], i.prototype, "selected", 2);
-n([
-  a({ type: String })
-], i.prototype, "toggleofficon", 2);
-n([
-  a({ type: String })
-], i.prototype, "toggleonicon", 2);
-n([
-  a({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled", 2);
-i = n([
-  _("scb-icon-button")
-], i);
+c = /* @__PURE__ */ new WeakSet();
+u = function() {
+  const t = this.mapSpacingToken(this.spacing);
+  t ? this.style.setProperty("--scb-icon-button-spacing-block", t) : this.style.removeProperty("--scb-icon-button-spacing-block");
+};
+s.styles = b`
+    :host {
+      display: inline-flex;
+      margin-block: var(--scb-icon-button-spacing-block, 0);
+    }
+  `;
+o([
+  r({ type: String })
+], s.prototype, "icon", 2);
+o([
+  r({ type: String })
+], s.prototype, "tooltip", 2);
+o([
+  r({ type: String, attribute: "aria-label" })
+], s.prototype, "ariaLabel", 2);
+o([
+  r({ type: String })
+], s.prototype, "variant", 2);
+o([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "toggle", 2);
+o([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "selected", 2);
+o([
+  r({ type: String })
+], s.prototype, "toggleofficon", 2);
+o([
+  r({ type: String })
+], s.prototype, "toggleonicon", 2);
+o([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+o([
+  r({ type: String, reflect: !0 })
+], s.prototype, "spacing", 2);
+s = o([
+  f("scb-icon-button")
+], s);
 export {
-  i as ScbIconButton
+  s as ScbIconButton
 };

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

@@ -1,5 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
 export declare class ScbKeyFigureCard extends LitElement {
+    #private;
     private static __iconLoaded;
     private static __rippleLoaded;
     keyfigure: number | string;
@@ -14,12 +15,21 @@ export declare class ScbKeyFigureCard extends LitElement {
     height: string;
     maxHeight: string;
     sizing: 'stretch' | 'content-width' | 'content-height';
+    /**
+     * Vertikalt avstånd till omgivande innehåll.
+     * spacing sätter både top och bottom om spacing-top/spacing-bottom inte är satta.
+     * "N" (0–14) mappas till var(--spacing-N), annars valfritt CSS-värde (t.ex. "16px" eller "var(--spacing-6)").
+     */
+    spacing: string;
+    spacingTop: string;
+    spacingBottom: string;
     static styles: import('lit').CSSResult;
     private formatNumber;
     protected firstUpdated(): Promise<void>;
     render(): import('lit-html').TemplateResult<1>;
     private __applyInnerSizing;
     protected updated(changed: PropertyValues): void;
+    private mapSpacingToken;
     private __onKeyDown;
     private __handleHrefNavigation;
 }

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

@@ -1,14 +1,16 @@
-import { css as p, LitElement as d, html as a } from "lit";
-import { property as s, customElement as u } from "lit/decorators.js";
+import { css as u, LitElement as f, html as l } from "lit";
+import { property as a, customElement as m } from "lit/decorators.js";
 import "@material/web/focus/md-focus-ring.js";
-var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (e, r, n, o) => {
-  for (var l = o > 1 ? void 0 : o ? g(r, n) : r, h = e.length - 1, c; h >= 0; h--)
-    (c = e[h]) && (l = (o ? c(r, n, l) : c(l)) || l);
-  return o && l && y(r, n, l), l;
-};
-let i = class extends d {
+var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, y = (e) => {
+  throw TypeError(e);
+}, s = (e, t, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? v(t, r) : t, p = e.length - 1, h; p >= 0; p--)
+    (h = e[p]) && (o = (n ? h(t, r, o) : h(o)) || o);
+  return n && o && b(t, r, o), o;
+}, k = (e, t, r) => t.has(e) || y("Cannot " + r), z = (e, t, r) => t.has(e) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), g = (e, t, r) => (k(e, t, "access private method"), r), c, d;
+let i = class extends f {
   constructor() {
-    super(...arguments), this.keyfigure = 0, this.subtitle = "", this.supportingText = "", this.cardHref = "", this.icon = "", this.size = "standard", this.unit = "", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.sizing = "stretch", this.__onKeyDown = (e) => {
+    super(...arguments), z(this, c), this.keyfigure = 0, this.subtitle = "", this.supportingText = "", this.cardHref = "", this.icon = "", this.size = "standard", this.unit = "", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.sizing = "stretch", this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this.__onKeyDown = (e) => {
       (e.key === "Enter" || e.key === " ") && this.cardHref && (e.preventDefault(), window.location.href = this.cardHref);
     }, this.__handleHrefNavigation = (e) => {
       this.cardHref && (e.target.closest("a") || (window.location.href = this.cardHref));
@@ -17,43 +19,43 @@ let i = class extends d {
   formatNumber(e) {
     if (typeof e == "number")
       return e.toLocaleString("sv-SE").replace(/\u00A0/g, " ");
-    const r = Number(e);
-    return Number.isNaN(r) ? String(e) : r.toLocaleString("sv-SE").replace(/\u00A0/g, " ");
+    const t = Number(e);
+    return Number.isNaN(t) ? String(e) : t.toLocaleString("sv-SE").replace(/\u00A0/g, " ");
   }
   async firstUpdated() {
-    i.__iconLoaded || (await import("@material/web/icon/icon.js"), i.__iconLoaded = !0), i.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), i.__rippleLoaded = !0), this.__applyInnerSizing();
+    i.__iconLoaded || (await import("@material/web/icon/icon.js"), i.__iconLoaded = !0), i.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), i.__rippleLoaded = !0), this.__applyInnerSizing(), g(this, c, d).call(this);
   }
   render() {
-    const e = !!this.cardHref, r = this.formatNumber(this.keyfigure), n = (this.unit || "").trim(), o = n ? `${r} ${n}` : r;
-    return a`
+    const e = !!this.cardHref, t = this.formatNumber(this.keyfigure), r = (this.unit || "").trim(), n = r ? `${t} ${r}` : t;
+    return l`
       <div
         class="scb-keyfigure-card ${e ? "clickable" : ""} ${this.size}"
         role=${e ? "link" : "group"}
         tabindex=${e ? "0" : "-1"}
-        aria-label=${this.subtitle || o}
+        aria-label=${this.subtitle || n}
         @click=${e ? this.__handleHrefNavigation : null}
         @keydown=${e ? this.__onKeyDown : null}
         style="cursor:${e ? "pointer" : "default"};"
       >
-        ${e ? a`<md-ripple></md-ripple>` : ""}
-        ${this.icon ? a`<md-icon>${this.icon}</md-icon>` : ""}
+        ${e ? l`<md-ripple></md-ripple>` : ""}
+        ${this.icon ? l`<md-icon>${this.icon}</md-icon>` : ""}
 
-        ${this.keyfigure !== void 0 && this.keyfigure !== null && this.keyfigure !== "" ? a`
+        ${this.keyfigure !== void 0 && this.keyfigure !== null && this.keyfigure !== "" ? l`
           <div class="keyfigure">
-            <span class="value" aria-label="${o}">
-              ${r}${n ? a`<span class="unit" aria-hidden="true">\u00A0${n}</span>` : ""}
+            <span class="value" aria-label="${n}">
+              ${t}${r ? l`<span class="unit" aria-hidden="true">\u00A0${r}</span>` : ""}
             </span>
-            ${e ? a`<md-icon>arrow_forward</md-icon>` : ""}
+            ${e ? l`<md-icon>arrow_forward</md-icon>` : ""}
           </div>
         ` : ""}
 
-        ${this.subtitle ? a`
+        ${this.subtitle ? l`
           <div class="sub-label">
-            ${e ? a`<a href="${this.cardHref}" tabindex="-1">${this.subtitle}</a>` : this.subtitle}
+            ${e ? l`<a href="${this.cardHref}" tabindex="-1">${this.subtitle}</a>` : this.subtitle}
           </div>
         ` : ""}
 
-        ${this.supportingText ? a`<div class="supporting-text">${this.supportingText}</div>` : ""}
+        ${this.supportingText ? l`<div class="supporting-text">${this.supportingText}</div>` : ""}
       </div>
 
       <md-focus-ring></md-focus-ring>
@@ -65,12 +67,23 @@ let i = class extends d {
     this.width && this.width.trim() !== "" ? (e.style.inlineSize = "100%", e.style.maxInlineSize = "100%") : (e.style.removeProperty("inline-size"), e.style.removeProperty("max-inline-size")), this.height && this.height.trim() !== "" || this.sizing === "stretch" ? e.style.blockSize = "100%" : e.style.removeProperty("block-size"), this.maxHeight && this.maxHeight.trim() !== "" ? e.style.maxBlockSize = "100%" : e.style.removeProperty("max-block-size");
   }
   updated(e) {
-    super.updated(e), e.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), e.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), e.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), e.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), (e.has("width") || e.has("height") || e.has("maxHeight") || e.has("sizing")) && this.__applyInnerSizing();
+    super.updated(e), e.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), e.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), e.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), e.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), (e.has("width") || e.has("height") || e.has("maxHeight") || e.has("sizing")) && this.__applyInnerSizing(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom")) && g(this, c, d).call(this);
+  }
+  mapSpacingToken(e) {
+    if (!e) return;
+    const t = String(e).trim();
+    if (t)
+      return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
   }
 };
+c = /* @__PURE__ */ new WeakSet();
+d = function() {
+  const e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop), r = this.mapSpacingToken(this.spacingBottom), n = t ?? e, o = r ?? e;
+  n ? this.style.setProperty("--scb-keyfigure-card-spacing-block-start", n) : this.style.removeProperty("--scb-keyfigure-card-spacing-block-start"), o ? this.style.setProperty("--scb-keyfigure-card-spacing-block-end", o) : this.style.removeProperty("--scb-keyfigure-card-spacing-block-end");
+};
 i.__iconLoaded = !1;
 i.__rippleLoaded = !1;
-i.styles = p`
+i.styles = u`
     :host {
       display: block;
       box-sizing: border-box;
@@ -78,6 +91,8 @@ i.styles = p`
       inline-size: 100%;
       min-inline-size: 0;
       padding: var(--scb-keyfigure-card-focus-ring-gap, 4px);
+      margin-block-start: var(--scb-keyfigure-card-spacing-block-start, 0);
+      margin-block-end: var(--scb-keyfigure-card-spacing-block-end, 0);
     }
 
     /* Ska vi ha tabulära eller inte? */
@@ -187,44 +202,53 @@ i.styles = p`
       letter-spacing: var(--md-sys-typescale-display-medium-tracking);
     }
   `;
-t([
-  s({ attribute: "keyfigure" })
+s([
+  a({ attribute: "keyfigure" })
 ], i.prototype, "keyfigure", 2);
-t([
-  s({ type: String, attribute: "subtitle" })
+s([
+  a({ type: String, attribute: "subtitle" })
 ], i.prototype, "subtitle", 2);
-t([
-  s({ type: String, attribute: "supporting-text" })
+s([
+  a({ type: String, attribute: "supporting-text" })
 ], i.prototype, "supportingText", 2);
-t([
-  s({ type: String, attribute: "card-href" })
+s([
+  a({ type: String, attribute: "card-href" })
 ], i.prototype, "cardHref", 2);
-t([
-  s({ type: String })
+s([
+  a({ type: String })
 ], i.prototype, "icon", 2);
-t([
-  s({ type: String })
+s([
+  a({ type: String })
 ], i.prototype, "size", 2);
-t([
-  s({ type: String })
+s([
+  a({ type: String })
 ], i.prototype, "unit", 2);
-t([
-  s({ type: String, reflect: !0 })
+s([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "width", 2);
-t([
-  s({ type: String, reflect: !0, attribute: "max-width" })
+s([
+  a({ type: String, reflect: !0, attribute: "max-width" })
 ], i.prototype, "maxWidth", 2);
-t([
-  s({ type: String, reflect: !0 })
+s([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "height", 2);
-t([
-  s({ type: String, reflect: !0, attribute: "max-height" })
+s([
+  a({ type: String, reflect: !0, attribute: "max-height" })
 ], i.prototype, "maxHeight", 2);
-t([
-  s({ type: String, reflect: !0 })
+s([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "sizing", 2);
-i = t([
-  u("scb-keyfigure-card")
+s([
+  a({ type: String, reflect: !0 })
+], i.prototype, "spacing", 2);
+s([
+  a({ type: String, reflect: !0, attribute: "spacing-top" })
+], i.prototype, "spacingTop", 2);
+s([
+  a({ type: String, reflect: !0, attribute: "spacing-bottom" })
+], i.prototype, "spacingBottom", 2);
+i = s([
+  m("scb-keyfigure-card")
 ], i);
 export {
   i as ScbKeyFigureCard

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

@@ -1,13 +1,19 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
 export declare class ScbList extends LitElement {
     #private;
     noDivider: boolean;
+    spacing: string;
+    spacingTop: string;
+    spacingBottom: string;
     private _slotEl;
     protected firstUpdated(): Promise<void>;
+    protected updated(changed: PropertyValues): void;
     private _onSlotChange;
     private _getItems;
     private _setupItems;
     private _onKeyDown;
+    private _mapSpacingToken;
+    private _applySpacing;
     static styles: import('lit').CSSResult[];
     render(): TemplateResult;
 }

package/scb-list/scb-list.js

@@ -1,69 +1,82 @@
-import { css as v, LitElement as f, html as u } from "lit";
-import { property as m, query as _, customElement as b } from "lit/decorators.js";
+import { css as g, LitElement as u, html as f } from "lit";
+import { property as c, query as v, customElement as _ } from "lit/decorators.js";
 import "./scb-list-item.js";
-var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (e) => {
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (e) => {
   throw TypeError(e);
-}, l = (e, t, r, s) => {
-  for (var i = s > 1 ? void 0 : s ? y(t, r) : t, o = e.length - 1, a; o >= 0; o--)
-    (a = e[o]) && (i = (s ? a(t, r, i) : a(i)) || i);
-  return s && i && g(t, r, i), i;
-}, p = (e, t, r) => t.has(e) || c("Cannot " + r), w = (e, t, r) => (p(e, t, "read from private field"), t.get(e)), A = (e, t, r) => t.has(e) ? c("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), k = (e, t, r, s) => (p(e, t, "write to private field"), t.set(e, r), r), d;
-let n = class extends f {
+}, o = (e, t, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? y(t, s) : t, p = e.length - 1, n; p >= 0; p--)
+    (n = e[p]) && (i = (r ? n(t, s, i) : n(i)) || i);
+  return r && i && b(t, s, i), i;
+}, h = (e, t, s) => t.has(e) || d("Cannot " + s), k = (e, t, s) => (h(e, t, "read from private field"), t.get(e)), S = (e, t, s) => t.has(e) ? d("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), w = (e, t, s, r) => (h(e, t, "write to private field"), t.set(e, s), s), l;
+let a = class extends u {
   constructor() {
-    super(...arguments), A(this, d, !1), this.noDivider = !1, this._onSlotChange = () => this._setupItems();
+    super(...arguments), S(this, l, !1), this.noDivider = !1, this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this._onSlotChange = () => this._setupItems();
   }
   async firstUpdated() {
-    w(this, d) || (await import("@material/web/list/list.js"), k(this, d, !0)), this._setupItems();
+    k(this, l) || (await import("@material/web/list/list.js"), w(this, l, !0)), this._setupItems(), this._applySpacing();
+  }
+  updated(e) {
+    super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom")) && this._applySpacing();
   }
   _getItems() {
     var t;
-    return (((t = this._slotEl) == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? []).filter((r) => r instanceof HTMLElement);
+    return (((t = this._slotEl) == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? []).filter((s) => s instanceof HTMLElement);
   }
   _setupItems() {
-    var r;
-    this._getItems().forEach((s, i) => {
-      s.hasAttribute("role") || s.setAttribute("role", "listitem"), s.setAttribute("tabindex", i === 0 ? "0" : "-1");
+    var s;
+    this._getItems().forEach((r, i) => {
+      r.hasAttribute("role") || r.setAttribute("role", "listitem"), r.setAttribute("tabindex", i === 0 ? "0" : "-1");
     });
-    const t = (r = this.renderRoot) == null ? void 0 : r.querySelector("md-list");
-    t && !t.hasAttribute("data-kbd") && (t.setAttribute("data-kbd", "true"), t.addEventListener("keydown", (s) => this._onKeyDown(s)));
+    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 r = t.findIndex((i) => i.getAttribute("tabindex") === "0"), s = (i) => {
-      const o = (i % t.length + t.length) % t.length;
-      t.forEach((h) => h.setAttribute("tabindex", "-1"));
-      const a = t[o];
-      a.setAttribute("tabindex", "0"), a.focus();
+    const s = t.findIndex((i) => i.getAttribute("tabindex") === "0"), r = (i) => {
+      const p = (i % t.length + t.length) % t.length;
+      t.forEach((m) => m.setAttribute("tabindex", "-1"));
+      const n = t[p];
+      n.setAttribute("tabindex", "0"), n.focus();
     };
     switch (e.key) {
       case "ArrowDown":
       case "ArrowRight":
-        e.preventDefault(), s(r < 0 ? 0 : r + 1);
+        e.preventDefault(), r(s < 0 ? 0 : s + 1);
         break;
       case "ArrowUp":
       case "ArrowLeft":
-        e.preventDefault(), s(r < 0 ? 0 : r - 1);
+        e.preventDefault(), r(s < 0 ? 0 : s - 1);
         break;
       case "Home":
-        e.preventDefault(), s(0);
+        e.preventDefault(), r(0);
         break;
       case "End":
-        e.preventDefault(), s(t.length - 1);
+        e.preventDefault(), r(t.length - 1);
         break;
     }
   }
+  _mapSpacingToken(e) {
+    if (!e) return;
+    const t = String(e).trim();
+    if (t)
+      return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+  }
+  _applySpacing() {
+    const e = this._mapSpacingToken(this.spacing), t = this._mapSpacingToken(this.spacingTop) ?? e, s = this._mapSpacingToken(this.spacingBottom) ?? e;
+    t ? this.style.marginBlockStart = t : this.style.removeProperty("margin-block-start"), s ? this.style.marginBlockEnd = s : this.style.removeProperty("margin-block-end");
+  }
   render() {
-    return u`
+    return f`
       <md-list role="list" @slotchange=${this._onSlotChange}>
         <slot></slot>
       </md-list>
     `;
   }
 };
-d = /* @__PURE__ */ new WeakMap();
-n.styles = [
-  v`
+l = /* @__PURE__ */ new WeakMap();
+a.styles = [
+  g`
       :host {
         display: block;
         --scb-list-bg: transparent;
@@ -85,15 +98,24 @@ n.styles = [
       }
     `
 ];
-l([
-  m({ type: Boolean, attribute: "no-divider", reflect: !0 })
-], n.prototype, "noDivider", 2);
-l([
-  _("slot")
-], n.prototype, "_slotEl", 2);
-n = l([
-  b("scb-list")
-], n);
+o([
+  c({ type: Boolean, attribute: "no-divider", reflect: !0 })
+], a.prototype, "noDivider", 2);
+o([
+  c({ type: String, reflect: !0 })
+], a.prototype, "spacing", 2);
+o([
+  c({ type: String, reflect: !0, attribute: "spacing-top" })
+], a.prototype, "spacingTop", 2);
+o([
+  c({ type: String, reflect: !0, attribute: "spacing-bottom" })
+], a.prototype, "spacingBottom", 2);
+o([
+  v("slot")
+], a.prototype, "_slotEl", 2);
+a = o([
+  _("scb-list")
+], a);
 export {
-  n as ScbList
+  a as ScbList
 };

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

@@ -20,9 +20,14 @@ export declare class ScbNotificationCard extends LitElement {
     maxHeight: string;
     fullHeight: boolean;
     fullWidth: boolean;
+    spacing: string;
+    spacingTop: string;
+    spacingBottom: string;
     static styles: import('lit').CSSResult[];
     private _iconForVariant;
     private _closeNotification;
+    private __resolveSpacingToken;
+    private __applySpacing;
     protected updated(changed: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
 }