scb-wc-test 0.1.105 → 0.1.107

package/scb-divider/scb-divider.js

@@ -1,79 +1,127 @@
-import { css as v, LitElement as d, html as p } from "lit";
-import { property as i, customElement as b } from "lit/decorators.js";
-var h = Object.defineProperty, g = Object.getOwnPropertyDescriptor, e = (l, o, s, n) => {
-  for (var t = n > 1 ? void 0 : n ? g(o, s) : o, c = l.length - 1, a; c >= 0; c--)
-    (a = l[c]) && (t = (n ? a(o, s, t) : a(t)) || t);
-  return n && t && h(o, s, t), t;
-};
-let r = class extends d {
+import { css as g, LitElement as b, html as y } from "lit";
+import { property as s, customElement as u } from "lit/decorators.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, h = (r) => {
+  throw TypeError(r);
+}, a = (r, e, t, o) => {
+  for (var n = o > 1 ? void 0 : o ? m(e, t) : e, l = r.length - 1, d; l >= 0; l--)
+    (d = r[l]) && (n = (o ? d(e, t, n) : d(n)) || n);
+  return o && n && f(e, t, n), n;
+}, k = (r, e, t) => e.has(r) || h("Cannot " + t), _ = (r, e, t) => e.has(r) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t), p = (r, e, t) => (k(r, e, "access private method"), t), c, v;
+let i = class extends b {
   constructor() {
-    super(...arguments), this.variant = "thin", this.direction = "horizontal", this.inset = "none", this.overlay = !1, this.anchor = "end";
+    super(...arguments), _(this, c), this.variant = "thin", this.direction = "horizontal", this.inset = "none", this.overlay = !1, this.anchor = "end", this.spacing = "";
+  }
+  firstUpdated() {
+    p(this, c, v).call(this);
+  }
+  updated(r) {
+    r.has("spacing") && p(this, c, v).call(this);
+  }
+  mapSpacingToken(r) {
+    if (!r) return;
+    const e = String(r).trim();
+    if (e)
+      return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
   }
   render() {
-    return p``;
+    return y``;
   }
 };
-r.styles = v`
+c = /* @__PURE__ */ new WeakSet();
+v = function() {
+  const r = this.mapSpacingToken(this.spacing);
+  r ? this.style.setProperty("--scb-divider-spacing-orth", r) : this.style.removeProperty("--scb-divider-spacing-orth");
+};
+i.styles = g`
     :host {
       --scb-divider-color: var(--md-sys-color-outline-variant);
       --scb-divider-thickness: 1px;
       --scb-divider-gap: var(--scb-grid-column-gap, var(--spacing-6, 24px));
+      --scb-divider-spacing-orth: 0;
+
       display: block;
       box-sizing: border-box;
-      pointer-events: none; 
+      pointer-events: none;
     }
-    :host([variant="bold"]) {
+
+    :host([variant='bold']) {
       --scb-divider-color: var(--md-sys-color-outline);
     }
 
-    :host(:not([direction="vertical"])) {
+    /* Horisontell avdelare: drar ut sig på inline-led, spacing på block-led (ovan/under). */
+    :host(:not([direction='vertical'])) {
       inline-size: 100%;
       block-size: var(--scb-divider-thickness);
       background: var(--scb-divider-color);
+      margin-block: var(--scb-divider-spacing-orth, 0);
     }
-    :host([inset="both"]:not([direction="vertical"]))   { margin-inline: var(--spacing-8, 32px); }
-    :host([inset="start"]:not([direction="vertical"]))  { margin-inline-start: var(--spacing-8, 32px); }
-    :host([inset="end"]:not([direction="vertical"]))    { margin-inline-end: var(--spacing-8, 32px); }
 
-    :host([direction="vertical"]) {
+    :host([inset='both']:not([direction='vertical'])) {
+      margin-inline: var(--spacing-8, 32px);
+    }
+    :host([inset='start']:not([direction='vertical'])) {
+      margin-inline-start: var(--spacing-8, 32px);
+    }
+    :host([inset='end']:not([direction='vertical'])) {
+      margin-inline-end: var(--spacing-8, 32px);
+    }
+
+    /* Vertikal avdelare: drar ut sig på block-led, spacing på inline-led (vänster/höger). */
+    :host([direction='vertical']:not([overlay])) {
       inline-size: var(--scb-divider-thickness);
       block-size: 100%;
       background: var(--scb-divider-color);
       align-self: stretch;
       justify-self: center;
+      margin-inline: var(--scb-divider-spacing-orth, 0);
+    }
+
+    :host([direction='vertical'][inset='both']:not([overlay])) {
+      margin-block: var(--spacing-8, 32px);
+    }
+    :host([direction='vertical'][inset='start']:not([overlay])) {
+      margin-block-start: var(--spacing-8, 32px);
+    }
+    :host([direction='vertical'][inset='end']:not([overlay])) {
+      margin-block-end: var(--spacing-8, 32px);
     }
-    :host([direction="vertical"][inset="both"]:not([overlay]))  { margin-block: var(--spacing-8, 32px); }
-    :host([direction="vertical"][inset="start"]:not([overlay])) { margin-block-start: var(--spacing-8, 32px); }
-    :host([direction="vertical"][inset="end"]:not([overlay]))   { margin-block-end: var(--spacing-8, 32px); }
 
-    :host([overlay][direction="vertical"]) {
+    /* Overlay-variant för vertikal avdelare, spacing ignoreras (absolut positionerad). */
+    :host([overlay][direction='vertical']) {
       position: absolute;
       top: 0;
       bottom: 0;
       inline-size: var(--scb-divider-thickness);
       background: var(--scb-divider-color);
     }
-    :host([overlay][direction="vertical"][anchor="end"])  { right: calc(var(--scb-divider-gap) / -2); }
-    :host([overlay][direction="vertical"][anchor="start"]){ left:  calc(var(--scb-divider-gap) / -2); }
+    :host([overlay][direction='vertical'][anchor='end']) {
+      right: calc(var(--scb-divider-gap) / -2);
+    }
+    :host([overlay][direction='vertical'][anchor='start']) {
+      left: calc(var(--scb-divider-gap) / -2);
+    }
   `;
-e([
-  i({ type: String, reflect: !0 })
-], r.prototype, "variant", 2);
-e([
-  i({ type: String, reflect: !0 })
-], r.prototype, "direction", 2);
-e([
-  i({ type: String, reflect: !0 })
-], r.prototype, "inset", 2);
-e([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "overlay", 2);
-e([
-  i({ type: String, reflect: !0 })
-], r.prototype, "anchor", 2);
-r = e([
-  b("scb-divider")
-], r);
+a([
+  s({ type: String, reflect: !0 })
+], i.prototype, "variant", 2);
+a([
+  s({ type: String, reflect: !0 })
+], i.prototype, "direction", 2);
+a([
+  s({ type: String, reflect: !0 })
+], i.prototype, "inset", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], i.prototype, "overlay", 2);
+a([
+  s({ type: String, reflect: !0 })
+], i.prototype, "anchor", 2);
+a([
+  s({ type: String, reflect: !0 })
+], i.prototype, "spacing", 2);
+i = a([
+  u("scb-divider")
+], i);
 export {
-  r as ScbDivider
+  i as ScbDivider
 };

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

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 export declare class ScbFactCard extends LitElement {
+    #private;
     private static __iconLoaded;
     private static __instances;
     private static __docListenerAttached;
@@ -20,6 +21,14 @@ export declare class ScbFactCard extends LitElement {
     maxWidth: string;
     height: string;
     maxHeight: string;
+    /**
+     * 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) mappar till var(--spacing-N), annars valfritt CSS-värde (till exempel "16px" eller "var(--spacing-6)").
+     */
+    spacing: string;
+    spacingTop: string;
+    spacingBottom: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(ch: Map<string, unknown>): void;
@@ -28,6 +37,7 @@ export declare class ScbFactCard extends LitElement {
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
     firstUpdated(): Promise<void>;
+    private mapSpacingToken;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/scb-fact-card/scb-fact-card.js

@@ -1,66 +1,74 @@
-import { css as h, LitElement as p, html as c } from "lit";
-import { property as n, customElement as u } from "lit/decorators.js";
+import { css as b, LitElement as f, html as c } from "lit";
+import { property as a, customElement as m } from "lit/decorators.js";
 import "../scb-icon-button/scb-icon-button.js";
 import "./scb-fact-card-content.js";
 import "../scb-link/scb-link.js";
-var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (e, s, r, a) => {
-  for (var o = a > 1 ? void 0 : a ? f(s, r) : s, l = e.length - 1, d; l >= 0; l--)
-    (d = e[l]) && (o = (a ? d(s, r, o) : d(o)) || o);
-  return a && o && b(s, r, o), o;
-};
-let t = class extends p {
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, g = (t) => {
+  throw TypeError(t);
+}, o = (t, i, s, r) => {
+  for (var n = r > 1 ? void 0 : r ? _(i, s) : i, p = t.length - 1, d; p >= 0; p--)
+    (d = t[p]) && (n = (r ? d(i, s, n) : d(n)) || n);
+  return r && n && v(i, s, n), n;
+}, y = (t, i, s) => i.has(t) || g("Cannot " + s), x = (t, i, s) => i.has(t) ? g("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, s), u = (t, i, s) => (y(t, i, "access private method"), s), l, h;
+let e = class extends f {
   constructor() {
-    super(...arguments), this.__onCloseClick = (e) => {
-      e.stopPropagation(), this.__setOpen(!1);
-    }, this.variant = "filled", this.title = "", this.subtitle = "", this.supportingText = "", this.icon = "", this.showCloseButton = !1, this.open = !0, this.__lastTriggerEl = null, this.sizing = "stretch", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "";
+    super(...arguments), x(this, l), this.__onCloseClick = (t) => {
+      t.stopPropagation(), this.__setOpen(!1);
+    }, this.variant = "filled", this.title = "", this.subtitle = "", this.supportingText = "", this.icon = "", this.showCloseButton = !1, this.open = !0, this.__lastTriggerEl = null, this.sizing = "stretch", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.spacing = "", this.spacingTop = "", this.spacingBottom = "";
   }
-  static __handleDocClick(e) {
-    const s = e.composedPath();
-    for (const r of s) {
-      if (!(r instanceof Element)) continue;
-      const a = r.getAttribute("data-fact-card-toggle") || r.getAttribute("aria-controls");
-      if (!a) continue;
-      const o = t.__instances.get(a);
-      if (!o) {
-        t.__instances.delete(a);
+  static __handleDocClick(t) {
+    const i = t.composedPath();
+    for (const s of i) {
+      if (!(s instanceof Element)) continue;
+      const r = s.getAttribute("data-fact-card-toggle") || s.getAttribute("aria-controls");
+      if (!r) continue;
+      const n = e.__instances.get(r);
+      if (!n) {
+        e.__instances.delete(r);
         continue;
       }
-      o.__lastTriggerEl = r, o.__setOpen(!o.open), e.stopPropagation();
+      n.__lastTriggerEl = s, n.__setOpen(!n.open), t.stopPropagation();
       break;
     }
   }
   static __ensureDocListener() {
-    t.__docListenerAttached || (document.addEventListener("click", t.__handleDocClick, !0), t.__docListenerAttached = !0);
+    e.__docListenerAttached || (document.addEventListener("click", e.__handleDocClick, !0), e.__docListenerAttached = !0);
   }
   static __maybeRemoveDocListener() {
-    t.__docListenerAttached && t.__instances.size === 0 && (document.removeEventListener("click", t.__handleDocClick, !0), t.__docListenerAttached = !1);
+    e.__docListenerAttached && e.__instances.size === 0 && (document.removeEventListener("click", e.__handleDocClick, !0), e.__docListenerAttached = !1);
   }
   connectedCallback() {
-    super.connectedCallback(), this.id && t.__instances.set(this.id, this), t.__ensureDocListener();
+    super.connectedCallback(), this.id && e.__instances.set(this.id, this), e.__ensureDocListener();
   }
   disconnectedCallback() {
-    this.id && t.__instances.delete(this.id), t.__maybeRemoveDocListener(), super.disconnectedCallback();
+    this.id && e.__instances.delete(this.id), e.__maybeRemoveDocListener(), super.disconnectedCallback();
   }
-  updated(e) {
-    e.has("open") && this.__updateTriggersExpanded(), 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"));
+  updated(t) {
+    t.has("open") && this.__updateTriggersExpanded(), t.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), t.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), t.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), t.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && u(this, l, h).call(this);
   }
   __updateTriggersExpanded() {
-    this.id && document.querySelectorAll(`[aria-controls="${this.id}"], [data-fact-card-toggle="${this.id}"]`).forEach((e) => {
-      e.hasAttribute("aria-controls") && e.setAttribute("aria-expanded", String(this.open));
+    this.id && document.querySelectorAll(`[aria-controls="${this.id}"], [data-fact-card-toggle="${this.id}"]`).forEach((t) => {
+      t.hasAttribute("aria-controls") && t.setAttribute("aria-expanded", String(this.open));
     });
   }
-  __setOpen(e) {
-    const s = this.open;
-    this.open = e, e && !s ? this.dispatchEvent(new CustomEvent("open", { bubbles: !0, composed: !0 })) : !e && s && this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
+  __setOpen(t) {
+    const i = this.open;
+    this.open = t, t && !i ? this.dispatchEvent(new CustomEvent("open", { bubbles: !0, composed: !0 })) : !t && i && this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
   }
   render() {
     if (!this.open) return c``;
-    const e = this.variant === "outlined" ? "outlined" : "filled", s = !!this.icon;
+    const t = this.variant === "outlined" ? "outlined" : "filled", i = !!this.icon;
     return c`
-      <div class="outer ${s ? "has-icon" : ""}">
-        ${s ? c`<div class="icon-wrapper ${e}"><md-icon>${this.icon}</md-icon></div>` : ""}
-        <div class="scb-fact-card ${e} ${this.showCloseButton ? "has-close" : ""}">
-          ${this.showCloseButton ? c`<scb-icon-button variant="standard" icon="close" @click=${this.__onCloseClick}></scb-icon-button>` : ""}
+      <div class="outer ${i ? "has-icon" : ""}">
+        ${i ? c`<div class="icon-wrapper ${t}"><md-icon>${this.icon}</md-icon></div>` : ""}
+        <div class="scb-fact-card ${t} ${this.showCloseButton ? "has-close" : ""}">
+          ${this.showCloseButton ? c`
+                <scb-icon-button
+                  variant="standard"
+                  icon="close"
+                  @click=${this.__onCloseClick}
+                ></scb-icon-button>
+              ` : ""}
           <div class="content">
             <slot></slot>
           </div>
@@ -69,13 +77,24 @@ let t = class extends p {
     `;
   }
   async firstUpdated() {
-    t.__iconLoaded || (await import("@material/web/icon/icon.js"), t.__iconLoaded = !0);
+    u(this, l, h).call(this), e.__iconLoaded || (await import("@material/web/icon/icon.js"), e.__iconLoaded = !0);
+  }
+  mapSpacingToken(t) {
+    if (!t) return;
+    const i = String(t).trim();
+    if (i)
+      return /^\d+$/.test(i) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(i, 10)))})` : i;
   }
 };
-t.__iconLoaded = !1;
-t.__instances = /* @__PURE__ */ new Map();
-t.__docListenerAttached = !1;
-t.styles = h`
+l = /* @__PURE__ */ new WeakSet();
+h = function() {
+  const t = this.mapSpacingToken(this.spacing), i = this.mapSpacingToken(this.spacingTop), s = this.mapSpacingToken(this.spacingBottom), r = i ?? t, n = s ?? t;
+  r ? this.style.setProperty("--scb-fact-card-spacing-block-start", r) : this.style.removeProperty("--scb-fact-card-spacing-block-start"), n ? this.style.setProperty("--scb-fact-card-spacing-block-end", n) : this.style.removeProperty("--scb-fact-card-spacing-block-end");
+};
+e.__iconLoaded = !1;
+e.__instances = /* @__PURE__ */ new Map();
+e.__docListenerAttached = !1;
+e.styles = b`
     :host {
       --scb-fact-card-icon-overhang: 40px;
       display: block;
@@ -86,20 +105,22 @@ t.styles = h`
       max-inline-size: var(--scb-fact-card-max-w);
       height: auto;
       padding: 0;
+      margin-block-start: var(--scb-fact-card-spacing-block-start, 0);
+      margin-block-end: var(--scb-fact-card-spacing-block-end, 0);
     }
 
-    :host([sizing="stretch"]) {
+    :host([sizing='stretch']) {
       inline-size: 100%;
       block-size: 100%;
       max-inline-size: none;
     }
-    :host([sizing="content-width"]) {
+    :host([sizing='content-width']) {
       display: inline-block;
       inline-size: auto;
       block-size: auto;
       max-inline-size: var(--scb-fact-card-max-w);
     }
-    :host([sizing="content-height"]) {
+    :host([sizing='content-height']) {
       inline-size: 100%;
       block-size: auto;
       max-inline-size: none;
@@ -113,13 +134,13 @@ t.styles = h`
       padding-top: var(--_icon-pad);
       box-sizing: border-box;
     }
-    :host([sizing="content-width"]) .outer {
+    :host([sizing='content-width']) .outer {
       inline-size: max-content;
     }
 
     :host([height]) .outer,
     :host([max-height]) .outer,
-    :host([sizing="stretch"]) .outer {
+    :host([sizing='stretch']) .outer {
       block-size: 100%;
     }
 
@@ -140,16 +161,25 @@ t.styles = h`
 
     :host([height]) .scb-fact-card,
     :host([max-height]) .scb-fact-card,
-    :host([sizing="stretch"]) .scb-fact-card {
+    :host([sizing='stretch']) .scb-fact-card {
       block-size: calc(100% - var(--_icon-pad));
     }
 
-    .scb-fact-card.has-close { padding-right: var(--spacing-12); }
+    .scb-fact-card.has-close {
+      padding-right: var(--spacing-12);
+    }
 
-    .scb-fact-card.outlined { border: 1px solid var(--md-sys-color-outline); background: var(--md-sys-color-surface); }
+    .scb-fact-card.outlined {
+      border: 1px solid var(--md-sys-color-outline);
+      background: var(--md-sys-color-surface);
+    }
 
-    .outer.has-icon { --_icon-pad: var(--scb-fact-card-icon-overhang); }
-    .outer.has-icon .scb-fact-card { border-top-left-radius: 0; }
+    .outer.has-icon {
+      --_icon-pad: var(--scb-fact-card-icon-overhang);
+    }
+    .outer.has-icon .scb-fact-card {
+      border-top-left-radius: 0;
+    }
 
     .icon-wrapper {
       position: absolute;
@@ -160,7 +190,7 @@ t.styles = h`
       padding-bottom: 0;
       width: fit-content;
       border-radius: var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0 0 /
-                     var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0 0;
+        var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0 0;
       background: var(--md-sys-color-surface-dim);
       line-height: 0;
     }
@@ -176,7 +206,9 @@ t.styles = h`
       top: var(--scale-01);
     }
 
-    .scb-fact-card.clickable { cursor: pointer; }
+    .scb-fact-card.clickable {
+      cursor: pointer;
+    }
 
     .content {
       display: flex;
@@ -197,45 +229,54 @@ t.styles = h`
       hyphens: auto;
     }
   `;
-i([
-  n({ type: String })
-], t.prototype, "variant", 2);
-i([
-  n({ type: String, attribute: "title" })
-], t.prototype, "title", 2);
-i([
-  n({ type: String, attribute: "subtitle" })
-], t.prototype, "subtitle", 2);
-i([
-  n({ type: String, attribute: "supporting-text" })
-], t.prototype, "supportingText", 2);
-i([
-  n({ type: String })
-], t.prototype, "icon", 2);
-i([
-  n({ type: Boolean, attribute: "show-close-button" })
-], t.prototype, "showCloseButton", 2);
-i([
-  n({ type: Boolean, reflect: !0 })
-], t.prototype, "open", 2);
-i([
-  n({ type: String, reflect: !0 })
-], t.prototype, "sizing", 2);
-i([
-  n({ type: String, reflect: !0 })
-], t.prototype, "width", 2);
-i([
-  n({ type: String, reflect: !0, attribute: "max-width" })
-], t.prototype, "maxWidth", 2);
-i([
-  n({ type: String, reflect: !0 })
-], t.prototype, "height", 2);
-i([
-  n({ type: String, reflect: !0, attribute: "max-height" })
-], t.prototype, "maxHeight", 2);
-t = i([
-  u("scb-fact-card")
-], t);
+o([
+  a({ type: String })
+], e.prototype, "variant", 2);
+o([
+  a({ type: String, attribute: "title" })
+], e.prototype, "title", 2);
+o([
+  a({ type: String, attribute: "subtitle" })
+], e.prototype, "subtitle", 2);
+o([
+  a({ type: String, attribute: "supporting-text" })
+], e.prototype, "supportingText", 2);
+o([
+  a({ type: String })
+], e.prototype, "icon", 2);
+o([
+  a({ type: Boolean, attribute: "show-close-button" })
+], e.prototype, "showCloseButton", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "open", 2);
+o([
+  a({ type: String, reflect: !0 })
+], e.prototype, "sizing", 2);
+o([
+  a({ type: String, reflect: !0 })
+], e.prototype, "width", 2);
+o([
+  a({ type: String, reflect: !0, attribute: "max-width" })
+], e.prototype, "maxWidth", 2);
+o([
+  a({ type: String, reflect: !0 })
+], e.prototype, "height", 2);
+o([
+  a({ type: String, reflect: !0, attribute: "max-height" })
+], e.prototype, "maxHeight", 2);
+o([
+  a({ type: String, reflect: !0 })
+], e.prototype, "spacing", 2);
+o([
+  a({ type: String, reflect: !0, attribute: "spacing-top" })
+], e.prototype, "spacingTop", 2);
+o([
+  a({ type: String, reflect: !0, attribute: "spacing-bottom" })
+], e.prototype, "spacingBottom", 2);
+e = o([
+  m("scb-fact-card")
+], e);
 export {
-  t as ScbFactCard
+  e as ScbFactCard
 };

package/scb-horizontal-scroller/scb-horizontal-scroller.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
 export declare class ScbHorizontalScroller extends LitElement {
+    #private;
     /** Variant för scroll-layout. */
     variant: 'standard' | 'inline';
     /** Fast bredd på scroller, t.ex. '400px' eller '100%'. */
@@ -7,6 +8,14 @@ export declare class ScbHorizontalScroller extends LitElement {
     showScrollbar: boolean;
     rightScrollButtonLabel: string;
     leftScrollButtonLabel: string;
+    /**
+     * 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) mappar till var(--spacing-N), annars valfritt CSS-värde (till exempel "16px" eller "var(--spacing-6)").
+     */
+    spacing: string;
+    spacingTop: string;
+    spacingBottom: string;
     contentFlex: boolean;
     static styles: import('lit').CSSResult;
     private doScrollBy;
@@ -22,5 +31,6 @@ export declare class ScbHorizontalScroller extends LitElement {
     private handleScroll;
     firstUpdated(): void;
     updated(changed: PropertyValues): void;
+    private mapSpacingToken;
     render(): import('lit-html').TemplateResult<1>;
 }