scb-wc-test 0.1.105 → 0.1.106

package/scb-checkbox/scb-checkbox.js

@@ -1,62 +1,77 @@
-import { css as x, LitElement as y, nothing as h, html as u } from "lit";
-import { property as b, customElement as v } from "lit/decorators.js";
+import { css as y, LitElement as v, nothing as p, html as m } from "lit";
+import { property as d, customElement as x } from "lit/decorators.js";
 import "@material/web/checkbox/checkbox.js";
 import "./scb-checkbox-group.js";
-var f = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (e, i, t, s) => {
-  for (var r = s > 1 ? void 0 : s ? k(i, t) : i, a = e.length - 1, o; a >= 0; a--)
-    (o = e[a]) && (r = (s ? o(i, t, r) : o(r)) || r);
-  return s && r && f(i, t, r), r;
+var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, h = (e, s, t, r) => {
+  for (var i = r > 1 ? void 0 : r ? k(s, t) : s, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (i = (r ? l(s, t, i) : l(i)) || i);
+  return r && i && g(s, t, i), i;
 };
-let n = class extends y {
+let a = class extends v {
   constructor() {
-    super(...arguments), this.disabled = !1, this.indeterminate = !1, this.checked = !1, this.label = "", this.supportingText = "", this.ariaLabel = "", this._checkboxId = "";
+    super(), this._internals = null, this.disabled = !1, this.indeterminate = !1, this.checked = !1, this.label = "", this.supportingText = "", this.ariaLabel = "", this.name = "", this.value = "on", this._form = null, this._formResetHandler = null, this._initialChecked = !1, this._checkboxId = "", "attachInternals" in this && (this._internals = this.attachInternals());
   }
   connectedCallback() {
-    super.connectedCallback(), this._checkboxId = this.id || `scb-checkbox-${Math.random().toString(36).slice(2, 11)}`;
+    super.connectedCallback(), this._checkboxId = this.id || `scb-checkbox-${Math.random().toString(36).slice(2, 11)}`, this._initialChecked = this.checked, this._form = this.closest("form"), this._form && (this._formResetHandler = () => {
+      this.checked = this._initialChecked, this.indeterminate = !1, this.__syncFormValue();
+    }, this._form.addEventListener("reset", this._formResetHandler, !0)), this.__syncFormValue();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._form && this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0);
   }
   firstUpdated() {
-    var t, s;
+    var t, r;
     const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("md-checkbox");
     e && e.addEventListener("change", () => {
-      const r = e, a = !!r.checked, o = !!r.indeterminate;
-      this.checked = a, this.indeterminate = o, this.dispatchEvent(
+      const i = e, o = !!i.checked, l = !!i.indeterminate;
+      this.checked = o, this.indeterminate = l, this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { checked: a, indeterminate: o },
+          detail: { checked: o, indeterminate: l },
           bubbles: !0,
           composed: !0
         })
       );
     });
-    const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector("label.wrap");
-    i == null || i.addEventListener("click", (r) => {
+    const s = (r = this.shadowRoot) == null ? void 0 : r.querySelector("label.wrap");
+    s == null || s.addEventListener("click", (i) => {
       if (this.disabled) return;
-      if (!r.composedPath().some((c) => {
-        var p, m, g;
-        const l = c;
-        return ((m = (p = l == null ? void 0 : l.tagName) == null ? void 0 : p.toLowerCase) == null ? void 0 : m.call(p)) === "md-checkbox" || ((g = l == null ? void 0 : l.classList) == null ? void 0 : g.contains("box-wrap"));
+      if (!i.composedPath().some((c) => {
+        var b, u, f;
+        const n = c;
+        return ((u = (b = n == null ? void 0 : n.tagName) == null ? void 0 : b.toLowerCase) == null ? void 0 : u.call(b)) === "md-checkbox" || ((f = n == null ? void 0 : n.classList) == null ? void 0 : f.contains("box-wrap"));
       })) {
-        r.preventDefault();
+        i.preventDefault();
         const c = this.shadowRoot.querySelector("md-checkbox");
         c && (c.checked = !c.checked, c.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })));
       }
     }), this.__syncInnerAria();
   }
   updated(e) {
-    super.updated(e), e.has("disabled") && this.toggleAttribute("aria-disabled", this.disabled), (e.has("label") || e.has("supportingText") || e.has("ariaLabel")) && this.__syncInnerAria();
+    super.updated(e), e.has("disabled") && this.toggleAttribute("aria-disabled", this.disabled), (e.has("label") || e.has("supportingText") || e.has("ariaLabel")) && this.__syncInnerAria(), (e.has("checked") || e.has("disabled") || e.has("value")) && this.__syncFormValue();
+  }
+  // Körs av webbläsaren när formuläret sätter disabled
+  formDisabledCallback(e) {
+    this.disabled = e;
   }
   __syncInnerAria() {
-    var o, c, l;
-    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("md-checkbox"), i = e == null ? void 0 : e.shadowRoot;
-    if (!i) return;
-    const t = i.querySelector('[role="checkbox"]') || i.querySelector('input[type="checkbox"]');
+    var l, c, n;
+    const e = (l = this.shadowRoot) == null ? void 0 : l.querySelector("md-checkbox"), s = e == null ? void 0 : e.shadowRoot;
+    if (!s) return;
+    const t = s.querySelector('[role="checkbox"]') || s.querySelector('input[type="checkbox"]');
     if (!t) return;
-    const s = !!((c = this.label) != null && c.trim()), r = s ? `${this._checkboxId}-label` : "", a = this.supportingText ? `${this._checkboxId}-supporting-text` : "";
-    s && r ? (t.setAttribute("aria-labelledby", r), t.removeAttribute("aria-label")) : (t.removeAttribute("aria-labelledby"), (l = this.ariaLabel) != null && l.trim() ? t.setAttribute("aria-label", this.ariaLabel.trim()) : t.removeAttribute("aria-label")), a ? t.setAttribute("aria-describedby", a) : t.removeAttribute("aria-describedby");
+    const r = !!((c = this.label) != null && c.trim()), i = r ? `${this._checkboxId}-label` : "", o = this.supportingText ? `${this._checkboxId}-supporting-text` : "";
+    r && i ? (t.setAttribute("aria-labelledby", i), t.removeAttribute("aria-label")) : (t.removeAttribute("aria-labelledby"), (n = this.ariaLabel) != null && n.trim() ? t.setAttribute("aria-label", this.ariaLabel.trim()) : t.removeAttribute("aria-label")), o ? t.setAttribute("aria-describedby", o) : t.removeAttribute("aria-describedby");
+  }
+  // Synkar checked/disabled mot value
+  __syncFormValue() {
+    if (!this._internals) return;
+    const e = this.disabled || !this.checked ? null : this.value;
+    this._internals.setFormValue(e);
   }
   render() {
-    var s;
-    const e = this.supportingText ? `${this._checkboxId}-supporting-text` : void 0, i = !!((s = this.label) != null && s.trim()), t = i ? h : this.ariaLabel || h;
-    return u`
+    var r;
+    const e = this.supportingText ? `${this._checkboxId}-supporting-text` : void 0, s = !!((r = this.label) != null && r.trim()), t = s ? p : this.ariaLabel || p;
+    return m`
       <label class="wrap">
         <div class="box-wrap">
           <md-checkbox
@@ -67,17 +82,18 @@ let n = class extends y {
             aria-label=${t}
           ></md-checkbox>
         </div>
-        ${i ? u`<span class="lbl" id="${this._checkboxId}-label">${this.label}</span>` : h}
+        ${s ? m`<span class="lbl" id="${this._checkboxId}-label">${this.label}</span>` : p}
       </label>
 
-      ${this.supportingText ? u`<div id="${e}" class="supporting-text">
+      ${this.supportingText ? m`<div id="${e}" class="supporting-text">
             ${this.supportingText}
-          </div>` : h}
+          </div>` : p}
       <slot></slot>
     `;
   }
 };
-n.styles = x`
+a.formAssociated = !0;
+a.styles = y`
     :host {
       display: inline-grid;
       grid-template-columns: auto;
@@ -149,27 +165,33 @@ n.styles = x`
       }
     }
   `;
-d([
-  b({ type: Boolean, reflect: !0 })
-], n.prototype, "disabled", 2);
-d([
-  b({ type: Boolean, reflect: !0 })
-], n.prototype, "indeterminate", 2);
-d([
-  b({ type: Boolean, reflect: !0 })
-], n.prototype, "checked", 2);
-d([
-  b({ type: String })
-], n.prototype, "label", 2);
-d([
-  b({ type: String, attribute: "supporting-text" })
-], n.prototype, "supportingText", 2);
-d([
-  b({ type: String, reflect: !0, attribute: "aria-label" })
-], n.prototype, "ariaLabel", 2);
-n = d([
-  v("scb-checkbox")
-], n);
+h([
+  d({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+h([
+  d({ type: Boolean, reflect: !0 })
+], a.prototype, "indeterminate", 2);
+h([
+  d({ type: Boolean, reflect: !0 })
+], a.prototype, "checked", 2);
+h([
+  d({ type: String })
+], a.prototype, "label", 2);
+h([
+  d({ type: String, attribute: "supporting-text" })
+], a.prototype, "supportingText", 2);
+h([
+  d({ type: String, reflect: !0, attribute: "aria-label" })
+], a.prototype, "ariaLabel", 2);
+h([
+  d({ type: String })
+], a.prototype, "name", 2);
+h([
+  d({ type: String })
+], a.prototype, "value", 2);
+a = h([
+  x("scb-checkbox")
+], a);
 export {
-  n as ScbCheckbox
+  a as ScbCheckbox
 };

package/scb-chip/scb-chip.d.ts

@@ -1,5 +1,7 @@
 import { LitElement, TemplateResult, PropertyValues } from 'lit';
 export declare class ScbChip extends LitElement {
+    #private;
+    static formAssociated: boolean;
     variant: 'assist' | 'filter';
     label: string;
     icon: string;
@@ -9,9 +11,28 @@ export declare class ScbChip extends LitElement {
     selected: boolean;
     href: string;
     target: '_self' | '_blank' | '_parent' | '_top' | '';
+    name: string;
+    value: string;
+    /**
+     * Vertikalt avstånd till omgivande innehåll.
+     * "N" (0–14) mappar till var(--spacing-N), annars valfritt CSS-värde.
+     * spacing-top / spacing-bottom styr över respektive nederkant och tar över spacing om de är satta.
+     */
+    spacing: string;
+    /** Vertikalt avstånd ovanför chipet. Tar över spacing om satt. */
+    spacingTop: string;
+    /** Vertikalt avstånd under chipet. Tar över spacing om satt. */
+    spacingBottom: string;
+    /**
+     * Storlek: small | medium | large.
+     * Medium är standard (vid tom sträng eller inget värde).
+     */
+    size: 'small' | 'medium' | 'large' | '';
+    private _internals;
     private __loadedVariants;
     private __chipSetLoaded;
     private __iconLoaded;
+    constructor();
     protected updated(changed: PropertyValues): void;
     protected firstUpdated(): void;
     private __ensureDepsLoaded;
@@ -22,6 +43,9 @@ export declare class ScbChip extends LitElement {
     private _toggleSelected;
     private _onRemove;
     private _forward;
+    private _updateFormValue;
+    formDisabledCallback(disabled: boolean): void;
+    private mapSpacingToken;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/scb-chip/scb-chip.js

@@ -1,51 +1,59 @@
-import { css as c, LitElement as p, html as o } from "lit";
-import { property as i, customElement as u } from "lit/decorators.js";
-var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (e, r, d, l) => {
-  for (var a = l > 1 ? void 0 : l ? v(r, d) : r, h = e.length - 1, n; h >= 0; h--)
-    (n = e[h]) && (a = (l ? n(r, d, a) : n(a)) || a);
-  return l && a && b(r, d, a), a;
-};
-let t = class extends p {
+import { css as b, LitElement as v, html as n } from "lit";
+import { property as a, customElement as f } from "lit/decorators.js";
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, u = (t) => {
+  throw TypeError(t);
+}, i = (t, e, r, l) => {
+  for (var o = l > 1 ? void 0 : l ? y(e, r) : e, p = t.length - 1, c; p >= 0; p--)
+    (c = t[p]) && (o = (l ? c(e, r, o) : c(o)) || o);
+  return l && o && _(e, r, o), o;
+}, g = (t, e, r) => e.has(t) || u("Cannot " + r), S = (t, e, r) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), m = (t, e, r) => (g(t, e, "access private method"), r), h, d;
+let s = class extends v {
   constructor() {
-    super(...arguments), this.variant = "assist", this.label = "", this.icon = "", this.disabled = !1, this.elevated = !1, this.removable = !1, this.selected = !1, this.href = "", this.target = "", this.__loadedVariants = /* @__PURE__ */ new Set(), this.__chipSetLoaded = !1, this.__iconLoaded = !1;
+    super(), S(this, h), this.variant = "assist", this.label = "", this.icon = "", this.disabled = !1, this.elevated = !1, this.removable = !1, this.selected = !1, this.href = "", this.target = "", this.name = "", this.value = "", this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this.size = "", this._internals = null, this.__loadedVariants = /* @__PURE__ */ new Set(), this.__chipSetLoaded = !1, this.__iconLoaded = !1, "attachInternals" in this && (this._internals = this.attachInternals());
   }
   // aria-disabled på host + bridge-vänliga *-changed-events
-  updated(e) {
-    super.updated(e), (e.has("variant") || e.has("icon")) && this.__ensureDepsLoaded(), e.has("disabled") && (this.toggleAttribute("aria-disabled", this.disabled), this.dispatchEvent(
+  updated(t) {
+    super.updated(t), (t.has("variant") || t.has("icon")) && this.__ensureDepsLoaded(), t.has("disabled") && (this.toggleAttribute("aria-disabled", this.disabled), this.dispatchEvent(
       new CustomEvent("disabled-changed", {
         detail: { disabled: this.disabled },
         bubbles: !0,
         composed: !0
       })
-    )), e.has("variant") && this.dispatchEvent(
+    )), t.has("variant") && this.dispatchEvent(
       new CustomEvent("variant-changed", {
         detail: { variant: this.variant },
         bubbles: !0,
         composed: !0
       })
-    ), e.has("label") && this.dispatchEvent(
+    ), t.has("label") && this.dispatchEvent(
       new CustomEvent("label-changed", {
         detail: { label: this.label },
         bubbles: !0,
         composed: !0
       })
-    ), e.has("elevated") && this.dispatchEvent(
+    ), t.has("elevated") && this.dispatchEvent(
       new CustomEvent("elevated-changed", {
         detail: { elevated: this.elevated },
         bubbles: !0,
         composed: !0
       })
-    ), e.has("icon") && this.dispatchEvent(
+    ), t.has("icon") && this.dispatchEvent(
       new CustomEvent("icon-changed", {
         detail: { icon: this.icon },
         bubbles: !0,
         composed: !0
       })
-    );
+    ), t.has("size") && this.dispatchEvent(
+      new CustomEvent("size-changed", {
+        detail: { size: this.size },
+        bubbles: !0,
+        composed: !0
+      })
+    ), (t.has("selected") || t.has("disabled") || t.has("variant") || t.has("value") || t.has("name")) && this._updateFormValue(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && m(this, h, d).call(this);
   }
   // Kör dynamisk import första gången komponenten finns i DOM
   firstUpdated() {
-    this.__ensureDepsLoaded();
+    this.__ensureDepsLoaded(), m(this, h, d).call(this), this._updateFormValue();
   }
   /* Ladda in nödvändiga Material-web-komponenter vid behov (variant + ev. chip-set + ev. ikon) */
   async __ensureDepsLoaded() {
@@ -66,30 +74,30 @@ let t = class extends p {
     return !!this.closest("md-chip-set");
   }
   render() {
-    const e = this._renderChip();
-    return this._insideChipSet ? e : o`<md-chip-set>${e}</md-chip-set>`;
+    const t = this._renderChip();
+    return this._insideChipSet ? t : n`<md-chip-set>${t}</md-chip-set>`;
   }
   _renderChip() {
-    const e = this.icon ? o`<md-icon slot="icon">${this.icon}</md-icon>` : null;
+    const t = this.icon ? n`<md-icon slot="icon">${this.icon}</md-icon>` : null;
     switch (this.variant) {
       case "assist": {
-        const r = this.target === "_blank" ? "noopener noreferrer" : void 0;
-        return o`
+        const e = this.target === "_blank" ? "noopener noreferrer" : void 0;
+        return n`
           <md-assist-chip
             label=${this.label}
             ?disabled=${this.disabled}
             ?elevated=${this.elevated}
             href=${this.href || void 0}
             target=${this.href && this.target || void 0}
-            rel=${r}
+            rel=${e}
             @update-focus=${this._forward}
           >
-            ${e}
+            ${t}
           </md-assist-chip>
         `;
       }
       case "filter":
-        return o`
+        return n`
           <md-filter-chip
             label=${this.label}
             ?disabled=${this.disabled}
@@ -99,11 +107,11 @@ let t = class extends p {
             @update-focus=${this._forward}
             @click=${() => this._toggleSelected()}
           >
-            ${e}
+            ${t}
           </md-filter-chip>
         `;
       default:
-        return o``;
+        return n``;
     }
   }
   _toggleSelected() {
@@ -113,10 +121,10 @@ let t = class extends p {
         bubbles: !0,
         composed: !0
       })
-    );
+    ), this._updateFormValue();
   }
-  _onRemove(e) {
-    e.stopPropagation(), this.dispatchEvent(
+  _onRemove(t) {
+    t.stopPropagation(), this.dispatchEvent(
       new CustomEvent("remove", {
         detail: { label: this.label },
         bubbles: !0,
@@ -124,19 +132,47 @@ let t = class extends p {
       })
     );
   }
-  _forward(e) {
+  _forward(t) {
     this.dispatchEvent(
-      new CustomEvent(e.type, {
-        detail: e.detail,
+      new CustomEvent(t.type, {
+        detail: t.detail,
         bubbles: !0,
         composed: !0
       })
     );
   }
+  // Kopplar selected/variant/disabled till formvärde
+  _updateFormValue() {
+    if (!this._internals) return;
+    if (!(this.variant === "filter" && this.selected && !this.disabled && !!this.name)) {
+      this._internals.setFormValue(null), this._internals.setValidity({});
+      return;
+    }
+    const e = this.value || this.label || "";
+    this._internals.setFormValue(e, this.name), this._internals.setValidity({});
+  }
+  // Körs av webbläsaren när formuläret sätter disabled på kontrollen
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
+  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;
+  }
 };
-t.styles = c`
+h = /* @__PURE__ */ new WeakSet();
+d = function() {
+  const t = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop), r = this.mapSpacingToken(this.spacingBottom), l = e ?? t, o = r ?? t;
+  l ? this.style.setProperty("--scb-chip-spacing-block-start", l) : this.style.removeProperty("--scb-chip-spacing-block-start"), o ? this.style.setProperty("--scb-chip-spacing-block-end", o) : this.style.removeProperty("--scb-chip-spacing-block-end");
+};
+s.formAssociated = !0;
+s.styles = b`
     :host {
       display: inline-block;
+      margin-block-start: var(--scb-chip-spacing-block-start, 0);
+      margin-block-end: var(--scb-chip-spacing-block-end, 0);
     }
 
     /* Sätt samma färg på label för assist som är på filter */
@@ -147,41 +183,77 @@ t.styles = c`
       --_pressed-label-text-color: var(--md-sys-color-on-surface-variant);
     }
 
+    /* Storlekar: små/medium/stora chips via tokens.
+       Medium (default) är Material-standardvärdena. */
+    :host([size='small']) md-assist-chip,
+    :host([size='small']) md-filter-chip {
+      --md-assist-chip-container-height: 28px;
+      --md-filter-chip-container-height: 28px;
+      --md-assist-chip-label-text-size: 0.8125rem;
+      --md-filter-chip-label-text-size: 0.8125rem;
+    }
+
+    :host([size='large']) md-assist-chip,
+    :host([size='large']) md-filter-chip {
+      --md-assist-chip-container-height: 40px;
+      --md-filter-chip-container-height: 40px;
+      --md-assist-chip-label-text-size: 0.9375rem;
+      --md-filter-chip-label-text-size: 0.9375rem;
+    }
+
     md-icon {
       color: var(--md-sys-color-on-surface);
       font-size: var(--md-sys-typescale-body-large-size);
     }
   `;
-s([
-  i({ type: String, reflect: !0 })
-], t.prototype, "variant", 2);
-s([
-  i({ type: String })
-], t.prototype, "label", 2);
-s([
-  i({ type: String })
-], t.prototype, "icon", 2);
-s([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
-s([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "elevated", 2);
-s([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "removable", 2);
-s([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "selected", 2);
-s([
-  i({ type: String })
-], t.prototype, "href", 2);
-s([
-  i({ type: String })
-], t.prototype, "target", 2);
-t = s([
-  u("scb-chip")
-], t);
+i([
+  a({ type: String, reflect: !0 })
+], s.prototype, "variant", 2);
+i([
+  a({ type: String })
+], s.prototype, "label", 2);
+i([
+  a({ type: String })
+], s.prototype, "icon", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "elevated", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "removable", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "selected", 2);
+i([
+  a({ type: String })
+], s.prototype, "href", 2);
+i([
+  a({ type: String })
+], s.prototype, "target", 2);
+i([
+  a({ type: String })
+], s.prototype, "name", 2);
+i([
+  a({ type: String })
+], s.prototype, "value", 2);
+i([
+  a({ type: String, reflect: !0 })
+], s.prototype, "spacing", 2);
+i([
+  a({ type: String, reflect: !0, attribute: "spacing-top" })
+], s.prototype, "spacingTop", 2);
+i([
+  a({ type: String, reflect: !0, attribute: "spacing-bottom" })
+], s.prototype, "spacingBottom", 2);
+i([
+  a({ type: String, reflect: !0 })
+], s.prototype, "size", 2);
+s = i([
+  f("scb-chip")
+], s);
 export {
-  t as ScbChip
+  s as ScbChip
 };

package/scb-divider/scb-divider.d.ts

@@ -4,12 +4,26 @@ type Direction = 'horizontal' | 'vertical';
 type Inset = 'none' | 'both' | 'start' | 'end';
 type Anchor = 'start' | 'end';
 export declare class ScbDivider extends LitElement {
+    #private;
     variant: Variant;
     direction: Direction;
     inset: Inset;
     overlay: boolean;
     anchor: Anchor;
+    /**
+     * Styr avstånd ortogonalt mot avdelaren.
+     * - Horizontal divider: spacing ger margin-block (avstånd ovan/under).
+     * - Vertical divider: spacing ger margin-inline (avstånd vänster/höger), om inte overlay används.
+     *
+     * Värden:
+     * - "N" (0–14) mappas till var(--spacing-N)
+     * - Annars tas värdet som ett CSS-värde (t.ex. "16px", "1rem", "var(--spacing-6)").
+     */
+    spacing: string;
     static styles: import('lit').CSSResult;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    private mapSpacingToken;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {