scb-wc-test 0.1.104 → 0.1.106

package/scb-button/scb-button.js

@@ -1,18 +1,20 @@
-import { LitElement as _, css as x, html as m, nothing as r } from "lit";
-import { property as s, customElement as I } from "lit/decorators.js";
+import { LitElement as k, css as T, html as p, nothing as r } from "lit";
+import { property as s, customElement as B } from "lit/decorators.js";
 import "@material/web/button/filled-button.js";
 import "@material/web/button/outlined-button.js";
 import "@material/web/button/filled-tonal-button.js";
 import "@material/web/button/text-button.js";
 import "@material/web/icon/icon.js";
-var S = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (t, e, n, o) => {
-  for (var i = o > 1 ? void 0 : o ? O(e, n) : e, b = t.length - 1, u; b >= 0; b--)
-    (u = t[b]) && (i = (o ? u(e, n, i) : u(i)) || i);
-  return o && i && S(e, n, i), i;
-};
-let a = class extends _ {
+var O = Object.defineProperty, w = Object.getOwnPropertyDescriptor, x = (t) => {
+  throw TypeError(t);
+}, a = (t, e, i, l) => {
+  for (var n = l > 1 ? void 0 : l ? w(e, i) : e, b = t.length - 1, u; b >= 0; b--)
+    (u = t[b]) && (n = (l ? u(e, i, n) : u(n)) || n);
+  return l && n && O(e, i, n), n;
+}, L = (t, e, i) => e.has(t) || x("Cannot " + i), P = (t, e, i) => e.has(t) ? x("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), A = (t, e, i) => (L(t, e, "access private method"), i), m, g;
+let o = class extends k {
   constructor() {
-    super(...arguments), this.variant = "filled", this.type = "button", this.label = "Button", this.trailingIcon = !1, this.icon = "", this.disabled = !1, this.href = "", this.target = "", this.rel = "";
+    super(...arguments), P(this, m), this.variant = "filled", this.type = "button", this.label = "Button", this.trailingIcon = !1, this.icon = "", this.disabled = !1, this.href = "", this.target = "", this.rel = "", this.spacing = "", this.spacingTop = "", this.spacingBottom = "";
   }
   // Hosta md-* elementet (värden flyttas därifrån in i dess shadow <button>)
   __getMdHost() {
@@ -27,26 +29,26 @@ let a = class extends _ {
   }
   // Spegla aria-attribut från host/md-host -> inre native <button>
   __syncAriaToInner() {
-    var y;
+    var $;
     const t = this.__getMdHost(), e = this.__getInnerNativeButton(t);
     if (!t || !e) return;
-    const n = (this.getAttribute("aria-label") || "").trim(), o = (t.getAttribute("aria-label") || "").trim(), i = this.label.trim() === "" ? (this.icon || "").trim() : "", b = n || o || i;
+    const i = (this.getAttribute("aria-label") || "").trim(), l = (t.getAttribute("aria-label") || "").trim(), n = this.label.trim() === "" ? (this.icon || "").trim() : "", b = i || l || n;
     b ? e.setAttribute("aria-label", b) : e.removeAttribute("aria-label");
     const u = this.getAttribute("aria-controls");
     u !== null ? e.setAttribute("aria-controls", u) : e.removeAttribute("aria-controls");
-    const v = this.getAttribute("aria-expanded");
-    v !== null ? e.setAttribute("aria-expanded", v) : e.removeAttribute("aria-expanded"), t.removeAttribute("aria-label"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"), this.removeAttribute("aria-expanded"), (y = this.__ariaObserver) == null || y.disconnect(), this.__ariaObserver = new MutationObserver(($) => {
-      const d = this.__getMdHost(), h = this.__getInnerNativeButton(d);
-      if (!(!d || !h)) {
-        for (const p of $) {
-          if (p.type !== "attributes" || !p.attributeName) continue;
-          const c = p.attributeName, f = this.getAttribute(c);
-          if (c === "aria-label") {
-            const A = (d.getAttribute("aria-label") || "").trim(), g = (f || A || (this.label.trim() === "" ? (this.icon || "").trim() : "")).trim();
-            g ? h.setAttribute("aria-label", g) : h.removeAttribute("aria-label"), d.removeAttribute("aria-label");
-          } else (c === "aria-controls" || c === "aria-expanded") && (f === null ? h.removeAttribute(c) : h.setAttribute(c, f), c === "aria-expanded" && this.removeAttribute("aria-expanded"));
+    const y = this.getAttribute("aria-expanded");
+    y !== null ? e.setAttribute("aria-expanded", y) : e.removeAttribute("aria-expanded"), t.removeAttribute("aria-label"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"), this.removeAttribute("aria-expanded"), ($ = this.__ariaObserver) == null || $.disconnect(), this.__ariaObserver = new MutationObserver((S) => {
+      const c = this.__getMdHost(), h = this.__getInnerNativeButton(c);
+      if (!(!c || !h)) {
+        for (const f of S) {
+          if (f.type !== "attributes" || !f.attributeName) continue;
+          const d = f.attributeName, v = this.getAttribute(d);
+          if (d === "aria-label") {
+            const I = (c.getAttribute("aria-label") || "").trim(), _ = (v || I || (this.label.trim() === "" ? (this.icon || "").trim() : "")).trim();
+            _ ? h.setAttribute("aria-label", _) : h.removeAttribute("aria-label"), c.removeAttribute("aria-label");
+          } else (d === "aria-controls" || d === "aria-expanded") && (v === null ? h.removeAttribute(d) : h.setAttribute(d, v), d === "aria-expanded" && this.removeAttribute("aria-expanded"));
         }
-        d.removeAttribute("aria-label"), d.removeAttribute("aria-controls"), d.removeAttribute("aria-expanded");
+        c.removeAttribute("aria-label"), c.removeAttribute("aria-controls"), c.removeAttribute("aria-expanded");
       }
     }), this.__ariaObserver.observe(this, {
       attributes: !0,
@@ -60,25 +62,33 @@ let a = class extends _ {
         const t = this.closest("form");
         t && (this.type === "submit" && t.requestSubmit(), this.type === "reset" && t.reset());
       }
-    }), this.__syncAriaToInner();
+    }), this.__syncAriaToInner(), A(this, m, g).call(this);
   }
-  // Kör även när variant/icon ändras
+  // Kör även när variant/icon/spacing ändras
   updated(t) {
-    t.has("variant") && this.__syncAriaToInner();
+    t.has("variant") && this.__syncAriaToInner(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && A(this, m, g).call(this);
   }
   disconnectedCallback() {
     var t;
     (t = this.__ariaObserver) == null || t.disconnect(), super.disconnectedCallback();
   }
+  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;
+  }
   static get styles() {
-    return x`
+    return T`
       /* Gör hosten stretchbar i t.ex. flex/grid */
       :host {
         display: inline-flex;
         block-size: var(--scb-button-block-size, auto);
+        margin-block-start: var(--scb-button-spacing-block-start, 0);
+        margin-block-end: var(--scb-button-spacing-block-end, 0);
       }
 
-      /* Låt inre md-knappen fylla hostens höjd*/
+      /* Låt inre md-knappar fylla hostens höjd */
       md-filled-button,
       md-outlined-button,
       md-filled-tonal-button,
@@ -133,17 +143,17 @@ let a = class extends _ {
     `;
   }
   render() {
-    var i;
-    const t = !!((i = this.icon) != null && i.trim()), e = t ? m`<md-icon slot="icon">${this.icon}</md-icon>` : r, n = r, o = this.label.trim() === "" ? this.icon : void 0;
+    var n;
+    const t = !!((n = this.icon) != null && n.trim()), e = t ? p`<md-icon slot="icon">${this.icon}</md-icon>` : r, i = r, l = this.label.trim() === "" ? this.icon : void 0;
     switch (this.variant) {
       case "filled":
-        return m`
+        return p`
           <md-filled-button
             type=${this.type}
-            variant=${n}
+            variant=${i}
             ?trailing-icon=${this.trailingIcon}
             ?disabled=${this.disabled}
-            aria-label=${o}
+            aria-label=${l}
             href=${this.href || r}
             target=${this.target || r}
             rel=${this.rel || r}
@@ -154,13 +164,13 @@ let a = class extends _ {
           </md-filled-button>
         `;
       case "outlined":
-        return m`
+        return p`
           <md-outlined-button
             type=${this.type}
-            variant=${n}
+            variant=${i}
             ?trailing-icon=${this.trailingIcon}
             ?disabled=${this.disabled}
-            aria-label=${o}
+            aria-label=${l}
             href=${this.href || r}
             target=${this.target || r}
             rel=${this.rel || r}
@@ -171,13 +181,13 @@ let a = class extends _ {
           </md-outlined-button>
         `;
       case "filled-tonal":
-        return m`
+        return p`
           <md-filled-tonal-button
             type=${this.type}
-            variant=${n}
+            variant=${i}
             ?trailing-icon=${this.trailingIcon}
             ?disabled=${this.disabled}
-            aria-label=${o}
+            aria-label=${l}
             href=${this.href || r}
             target=${this.target || r}
             rel=${this.rel || r}
@@ -188,13 +198,13 @@ let a = class extends _ {
           </md-filled-tonal-button>
         `;
       case "text":
-        return m`
+        return p`
           <md-text-button
             type=${this.type}
-            variant=${n}
+            variant=${i}
             ?trailing-icon=${this.trailingIcon}
             ?disabled=${this.disabled}
-            aria-label=${o}
+            aria-label=${l}
             href=${this.href || r}
             target=${this.target || r}
             rel=${this.rel || r}
@@ -205,40 +215,54 @@ let a = class extends _ {
           </md-text-button>
         `;
       default:
-        return m``;
+        return p``;
     }
   }
 };
-l([
+m = /* @__PURE__ */ new WeakSet();
+g = function() {
+  const t = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop) ?? t, i = this.mapSpacingToken(this.spacingBottom) ?? t;
+  e ? this.style.setProperty("--scb-button-spacing-block-start", e) : this.style.removeProperty("--scb-button-spacing-block-start"), i ? this.style.setProperty("--scb-button-spacing-block-end", i) : this.style.removeProperty("--scb-button-spacing-block-end");
+};
+a([
   s({ type: String, reflect: !0 })
-], a.prototype, "variant", 2);
-l([
+], o.prototype, "variant", 2);
+a([
   s({ type: String, reflect: !0 })
-], a.prototype, "type", 2);
-l([
+], o.prototype, "type", 2);
+a([
   s({ type: String })
-], a.prototype, "label", 2);
-l([
+], o.prototype, "label", 2);
+a([
   s({ type: Boolean, attribute: "trailing-icon" })
-], a.prototype, "trailingIcon", 2);
-l([
+], o.prototype, "trailingIcon", 2);
+a([
   s({ type: String })
-], a.prototype, "icon", 2);
-l([
+], o.prototype, "icon", 2);
+a([
   s({ type: Boolean, reflect: !0 })
-], a.prototype, "disabled", 2);
-l([
+], o.prototype, "disabled", 2);
+a([
   s({ type: String })
-], a.prototype, "href", 2);
-l([
+], o.prototype, "href", 2);
+a([
   s({ type: String })
-], a.prototype, "target", 2);
-l([
+], o.prototype, "target", 2);
+a([
   s({ type: String })
-], a.prototype, "rel", 2);
-a = l([
-  I("scb-button")
-], a);
+], o.prototype, "rel", 2);
+a([
+  s({ type: String, reflect: !0 })
+], o.prototype, "spacing", 2);
+a([
+  s({ type: String, attribute: "spacing-top", reflect: !0 })
+], o.prototype, "spacingTop", 2);
+a([
+  s({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], o.prototype, "spacingBottom", 2);
+o = a([
+  B("scb-button")
+], o);
 export {
-  a as ScbButton
+  o as ScbButton
 };

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

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 export declare class ScbCalendarCard extends LitElement {
+    #private;
     variant: 'default' | 'outlined' | 'filled';
     direction: 'horizontal' | 'vertical';
     title: string;
@@ -18,6 +19,9 @@ export declare class ScbCalendarCard extends LitElement {
     maxHeight: string;
     minHeight: string;
     sizing: 'stretch' | 'content-width' | 'content-height';
+    spacing: string;
+    spacingTop: string;
+    spacingBottom: string;
     private static __iconLoaded;
     private static __rippleLoaded;
     protected firstUpdated(): Promise<void>;
@@ -26,6 +30,7 @@ export declare class ScbCalendarCard extends LitElement {
     private __applyInnerSizing;
     private _onKeyDown;
     private _handleHrefNavigation;
+    private mapSpacingToken;
     protected updated(changed: Map<string, unknown>): void;
 }
 declare global {

package/scb-calendar-card/scb-calendar-card.js

@@ -1,23 +1,25 @@
-import { css as m, LitElement as f, html as d } from "lit";
-import { property as r, customElement as g } from "lit/decorators.js";
+import { css as u, LitElement as v, html as d } from "lit";
+import { property as a, customElement as b } from "lit/decorators.js";
 import "@material/web/focus/md-focus-ring.js";
-var y = Object.defineProperty, u = Object.getOwnPropertyDescriptor, t = (e, s, c, n) => {
-  for (var a = n > 1 ? void 0 : n ? u(s, c) : s, o = e.length - 1, l; o >= 0; o--)
-    (l = e[o]) && (a = (n ? l(s, c, a) : l(a)) || a);
-  return n && a && y(s, c, a), a;
-};
-let i = class extends f {
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, f = (e) => {
+  throw TypeError(e);
+}, r = (e, t, s, o) => {
+  for (var n = o > 1 ? void 0 : o ? w(t, s) : t, l = e.length - 1, c; l >= 0; l--)
+    (c = e[l]) && (n = (o ? c(t, s, n) : c(n)) || n);
+  return o && n && x(t, s, n), n;
+}, z = (e, t, s) => t.has(e) || f("Cannot " + s), k = (e, t, s) => t.has(e) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), g = (e, t, s) => (z(e, t, "access private method"), s), p, h;
+let i = class extends v {
   constructor() {
-    super(...arguments), this.variant = "default", this.direction = "horizontal", this.title = "", this.subtitle = "", this.supportingText = "", this.cardHref = "", this.cardHrefNav = "", this.showMedia = null, this.mediaWidth = "", this.mediaHeight = "", this.mediaAspect = "", this.width = "", this.maxWidth = "", this.minWidth = "", this.height = "", this.maxHeight = "", this.minHeight = "", this.sizing = "stretch";
+    super(...arguments), k(this, p), this.variant = "default", this.direction = "horizontal", this.title = "", this.subtitle = "", this.supportingText = "", this.cardHref = "", this.cardHrefNav = "", this.showMedia = null, this.mediaWidth = "", this.mediaHeight = "", this.mediaAspect = "", this.width = "", this.maxWidth = "", this.minWidth = "", this.height = "", this.maxHeight = "", this.minHeight = "", this.sizing = "stretch", this.spacing = "", this.spacingTop = "", this.spacingBottom = "";
   }
   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, p, h).call(this);
   }
   render() {
-    const e = this.variant ? `${this.variant.toLowerCase()}` : "", s = this.direction ? `${this.direction.toLowerCase()}` : "", c = this.cardHref ? "clickable" : "", n = 1, a = "Jan", o = this.mediaWidth && this.mediaWidth.trim() !== "" ? this.mediaWidth : "", l = this.mediaHeight && this.mediaHeight.trim() !== "" ? this.mediaHeight : "", h = this.mediaAspect && this.mediaAspect.trim() !== "" ? this.mediaAspect : "", p = `${o ? `inline-size:${o};` : ""}${l ? `block-size:${l};` : ""}${h ? `aspect-ratio:${h};` : ""}`;
+    const e = this.variant ? `${this.variant.toLowerCase()}` : "", t = this.direction ? `${this.direction.toLowerCase()}` : "", s = this.cardHref ? "clickable" : "", o = 1, n = "Jan", l = this.mediaWidth && this.mediaWidth.trim() !== "" ? this.mediaWidth : "", c = this.mediaHeight && this.mediaHeight.trim() !== "" ? this.mediaHeight : "", m = this.mediaAspect && this.mediaAspect.trim() !== "" ? this.mediaAspect : "", y = `${l ? `inline-size:${l};` : ""}${c ? `block-size:${c};` : ""}${m ? `aspect-ratio:${m};` : ""}`;
     return d`
       <div
-        class="calendar-card ${s} ${c} ${e}"
+        class="calendar-card ${t} ${s} ${e}"
         role="${this.cardHref ? "link" : "group"}"
         aria-label="${this.title || "Kalenderkort"}"
         tabindex="${this.cardHref ? "0" : "-1"}"
@@ -27,9 +29,9 @@ let i = class extends f {
       >
         ${this.cardHref ? d`<md-ripple></md-ripple>` : ""}
         ${this.showMedia ? d`
-              <div class="media" style="${p}" aria-label="Datum: ${n} ${a}">
-                <div class="day">${n}</div>
-                <div class="month">${a}</div>
+              <div class="media" style="${y}" aria-label="Datum: ${o} ${n}">
+                <div class="day">${o}</div>
+                <div class="month">${n}</div>
               </div>
             ` : ""}
         <div class="container">
@@ -55,13 +57,24 @@ let i = class extends f {
   _handleHrefNavigation() {
     this.cardHref && (this.cardHrefNav === "tab" ? window.open(this.cardHref, "_blank") : this.cardHrefNav === "window" ? window.open(this.cardHref, "_blank", "noopener,noreferrer,width=800,height=600") : window.open(this.cardHref, "_self"));
   }
+  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;
+  }
   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("minWidth") && (this.minWidth ? this.style.minInlineSize = this.minWidth : this.style.removeProperty("min-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("minHeight") && (this.minHeight ? this.style.minBlockSize = this.minHeight : this.style.removeProperty("min-block-size")), (e.has("width") || e.has("height") || e.has("maxHeight") || e.has("sizing")) && this.__applyInnerSizing();
+    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("minWidth") && (this.minWidth ? this.style.minInlineSize = this.minWidth : this.style.removeProperty("min-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("minHeight") && (this.minHeight ? this.style.minBlockSize = this.minHeight : this.style.removeProperty("min-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, p, h).call(this);
   }
 };
+p = /* @__PURE__ */ new WeakSet();
+h = function() {
+  const e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, s = this.mapSpacingToken(this.spacingBottom) ?? e;
+  t ? this.style.setProperty("--scb-calendar-card-spacing-block-start", t) : this.style.removeProperty("--scb-calendar-card-spacing-block-start"), s ? this.style.setProperty("--scb-calendar-card-spacing-block-end", s) : this.style.removeProperty("--scb-calendar-card-spacing-block-end");
+};
 i.__iconLoaded = !1;
 i.__rippleLoaded = !1;
-i.styles = m`
+i.styles = u`
     :host {
       display: block;
       position: relative;
@@ -69,6 +82,8 @@ i.styles = m`
       inline-size: 100%;
       min-inline-size: 0;
       padding: var(--scb-calendar-card-focus-ring-gap, 4px);
+      margin-block-start: var(--scb-calendar-card-spacing-block-start, 0);
+      margin-block-end: var(--scb-calendar-card-spacing-block-end, 0);
     }
 
     :host([sizing='stretch']) {
@@ -279,62 +294,71 @@ i.styles = m`
       text-overflow: clip;
     }
   `;
-t([
-  r({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "variant", 2);
-t([
-  r({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "direction", 2);
-t([
-  r({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "title", 2);
-t([
-  r({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "subtitle", 2);
-t([
-  r({ type: String, attribute: "supporting-text", reflect: !0 })
+r([
+  a({ type: String, attribute: "supporting-text", reflect: !0 })
 ], i.prototype, "supportingText", 2);
-t([
-  r({ type: String, attribute: "card-href" })
+r([
+  a({ type: String, attribute: "card-href" })
 ], i.prototype, "cardHref", 2);
-t([
-  r({ type: String, attribute: "card-href-nav" })
+r([
+  a({ type: String, attribute: "card-href-nav" })
 ], i.prototype, "cardHrefNav", 2);
-t([
-  r({ type: Boolean, reflect: !0, attribute: "show-media" })
+r([
+  a({ type: Boolean, reflect: !0, attribute: "show-media" })
 ], i.prototype, "showMedia", 2);
-t([
-  r({ type: String, attribute: "media-width" })
+r([
+  a({ type: String, attribute: "media-width" })
 ], i.prototype, "mediaWidth", 2);
-t([
-  r({ type: String, attribute: "media-height" })
+r([
+  a({ type: String, attribute: "media-height" })
 ], i.prototype, "mediaHeight", 2);
-t([
-  r({ type: String, attribute: "media-aspect" })
+r([
+  a({ type: String, attribute: "media-aspect" })
 ], i.prototype, "mediaAspect", 2);
-t([
-  r({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "width", 2);
-t([
-  r({ type: String, reflect: !0, attribute: "max-width" })
+r([
+  a({ type: String, reflect: !0, attribute: "max-width" })
 ], i.prototype, "maxWidth", 2);
-t([
-  r({ type: String, attribute: "min-width" })
+r([
+  a({ type: String, attribute: "min-width" })
 ], i.prototype, "minWidth", 2);
-t([
-  r({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "height", 2);
-t([
-  r({ type: String, reflect: !0, attribute: "max-height" })
+r([
+  a({ type: String, reflect: !0, attribute: "max-height" })
 ], i.prototype, "maxHeight", 2);
-t([
-  r({ type: String, attribute: "min-height" })
+r([
+  a({ type: String, attribute: "min-height" })
 ], i.prototype, "minHeight", 2);
-t([
-  r({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "sizing", 2);
-i = t([
-  g("scb-calendar-card")
+r([
+  a({ type: String, reflect: !0 })
+], i.prototype, "spacing", 2);
+r([
+  a({ type: String, attribute: "spacing-top", reflect: !0 })
+], i.prototype, "spacingTop", 2);
+r([
+  a({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], i.prototype, "spacingBottom", 2);
+i = r([
+  b("scb-calendar-card")
 ], i);
 export {
   i as ScbCalendarCard

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

@@ -1,5 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
 export declare class ScbCard extends LitElement {
+    #private;
     private static __iconLoaded;
     private static __rippleLoaded;
     type: string;
@@ -33,10 +34,14 @@ export declare class ScbCard extends LitElement {
     maxWidth: string;
     height: string;
     maxHeight: string;
+    spacing: string;
+    spacingTop: string;
+    spacingBottom: string;
     static styles: import('lit').CSSResult;
     private __calcAspectWH;
     private __onImgLoad;
     private __mediaTemplate;
+    private mapSpacingToken;
     render(): import('lit-html').TemplateResult<1>;
     protected updated(changed: PropertyValues): void;
     protected firstUpdated(_changed: PropertyValues): Promise<void>;