scb-wc-test 0.1.105 → 0.1.107

package/scb-stepper/scb-stepper.js

@@ -1,59 +1,69 @@
-import { css as l, LitElement as h, html as d } from "lit";
-import { property as p, state as v, customElement as f } from "lit/decorators.js";
+import { css as g, LitElement as b, html as u } from "lit";
+import { property as o, state as m, customElement as y } from "lit/decorators.js";
 import "./scb-step.js";
-var b = Object.defineProperty, u = Object.getOwnPropertyDescriptor, r = (e, t, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? u(t, s) : t, a = e.length - 1, c; a >= 0; a--)
-    (c = e[a]) && (n = (i ? c(t, s, n) : c(n)) || n);
-  return i && n && b(t, s, n), n;
-};
-let o = class extends h {
+var S = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, f = (t) => {
+  throw TypeError(t);
+}, a = (t, e, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? _(e, s) : e, c = t.length - 1, d; c >= 0; c--)
+    (d = t[c]) && (n = (i ? d(e, s, n) : d(n)) || n);
+  return i && n && S(e, s, n), n;
+}, x = (t, e, s) => e.has(t) || f("Cannot " + s), k = (t, e, s) => e.has(t) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), l = (t, e, s) => (x(t, e, "access private method"), s), p, v, h;
+let r = class extends b {
   constructor() {
-    super(...arguments), this.type = "", this.label = "", this.changeOnCompleted = !1, this.variant = "horizontal", this.symbolVariant = "number", this.activeIndex = 0, this._onKeyNav = (e) => {
-      const t = this._getSteps(), s = this.activeIndex;
+    super(...arguments), k(this, p), this.type = "", this.label = "", this.changeOnCompleted = !1, this.variant = "horizontal", this.symbolVariant = "number", this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this.activeIndex = 0, this._onKeyNav = (t) => {
+      const e = this._getSteps(), s = this.activeIndex;
       let i = s;
-      e.detail.key === "ArrowRight" ? s < t.length - 1 ? i = s + 1 : i = 0 : e.detail.key === "ArrowLeft" && (s > 0 ? i = s - 1 : i = t.length - 1), i !== s && (this._onStepClick(i), setTimeout(() => {
-        var a;
-        const n = (a = t[i].shadowRoot) == null ? void 0 : a.querySelector(".scb-step-content");
+      t.detail.key === "ArrowRight" ? s < e.length - 1 ? i = s + 1 : i = 0 : t.detail.key === "ArrowLeft" && (s > 0 ? i = s - 1 : i = e.length - 1), i !== s && (this._onStepClick(i), setTimeout(() => {
+        var c;
+        const n = (c = e[i].shadowRoot) == null ? void 0 : c.querySelector(
+          ".scb-step-content"
+        );
         n && "focus" in n && typeof n.focus == "function" && n.focus();
       }, 0));
-    }, this._onStepContainerClick = (e) => {
-      const t = this._getSteps(), s = e.composedPath(), i = t.findIndex((n) => s.includes(n));
+    }, this._onStepContainerClick = (t) => {
+      const e = this._getSteps(), s = t.composedPath(), i = e.findIndex((n) => s.includes(n));
       i !== -1 && this._onStepClick(i);
     };
   }
-  _onStepClick(e) {
-    const t = this.activeIndex;
-    this.activeIndex = e, this._updateSteps(), this.dispatchEvent(new CustomEvent("scb-step-change", {
-      detail: {
-        index: this.activeIndex,
-        step: this._getSteps()[this.activeIndex]
-      },
-      bubbles: !0,
-      composed: !0
-    })), e > t ? this.dispatchEvent(new CustomEvent("scb-step-next", {
-      detail: {
-        from: t,
-        to: e,
-        step: this._getSteps()[e]
-      },
-      bubbles: !0,
-      composed: !0
-    })) : e < t && this.dispatchEvent(new CustomEvent("scb-step-prev", {
-      detail: {
-        from: t,
-        to: e,
-        step: this._getSteps()[e]
-      },
-      bubbles: !0,
-      composed: !0
-    }));
+  _onStepClick(t) {
+    const e = this.activeIndex;
+    this.activeIndex = t, this._updateSteps(), this.dispatchEvent(
+      new CustomEvent("scb-step-change", {
+        detail: {
+          index: this.activeIndex,
+          step: this._getSteps()[this.activeIndex]
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    ), t > e ? this.dispatchEvent(
+      new CustomEvent("scb-step-next", {
+        detail: {
+          from: e,
+          to: t,
+          step: this._getSteps()[t]
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    ) : t < e && this.dispatchEvent(
+      new CustomEvent("scb-step-prev", {
+        detail: {
+          from: e,
+          to: t,
+          step: this._getSteps()[t]
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
   }
   /**
    * Gå till nästa steg programatiskt
    */
   nextStep() {
-    const e = this._getSteps();
-    this.activeIndex < e.length - 1 && this._onStepClick(this.activeIndex + 1);
+    const t = this._getSteps();
+    this.activeIndex < t.length - 1 && this._onStepClick(this.activeIndex + 1);
   }
   /**
    * Gå till föregående steg programatiskt
@@ -68,22 +78,22 @@ let o = class extends h {
     return this.activeIndex;
   }
   _updateSteps() {
-    const e = this._getSteps();
-    e.forEach((t, s) => {
-      t.active = s === this.activeIndex, t.completed = s < this.activeIndex, t.islast = !1, t.changeOnCompleted = this.changeOnCompleted, t.number = s + 1, t.variant = this.variant, t.symbolVariant = this.symbolVariant;
-    }), e.length > 0 && (e[e.length - 1].islast = !0);
+    const t = this._getSteps();
+    t.forEach((e, s) => {
+      e.active = s === this.activeIndex, e.completed = s < this.activeIndex, e.islast = !1, e.changeOnCompleted = this.changeOnCompleted, e.number = s + 1, e.variant = this.variant, e.symbolVariant = this.symbolVariant;
+    }), t.length > 0 && (t[t.length - 1].islast = !0);
   }
   _getSteps() {
     return Array.from(this.querySelectorAll("scb-step"));
   }
-  firstUpdated() {
-    this._updateSteps();
+  firstUpdated(t) {
+    this._updateSteps(), l(this, p, v).call(this);
   }
-  updated() {
-    this._updateSteps();
+  updated(t) {
+    this._updateSteps(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && l(this, p, v).call(this);
   }
   render() {
-    return d`
+    return u`
       <div
         class="steps"
         role="list"
@@ -96,10 +106,21 @@ let o = class extends h {
     `;
   }
 };
-o.styles = l`
+p = /* @__PURE__ */ new WeakSet();
+v = function() {
+  const t = l(this, p, h).call(this, this.spacing), e = l(this, p, h).call(this, this.spacingTop) ?? t, s = l(this, p, h).call(this, this.spacingBottom) ?? t;
+  e ? this.style.setProperty("--scb-stepper-spacing-block-start", e) : this.style.removeProperty("--scb-stepper-spacing-block-start"), s ? this.style.setProperty("--scb-stepper-spacing-block-end", s) : this.style.removeProperty("--scb-stepper-spacing-block-end");
+};
+h = function(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;
+};
+r.styles = g`
     :host {
-        --scb-stepper-width: 100%;
-        --scb-stepper-height: 100%;
+      --scb-stepper-width: 100%;
+      --scb-stepper-height: 100%;
       display: block;
       padding: var(--spacing-5) 0;
       width: 100%;
@@ -107,6 +128,9 @@ o.styles = l`
       font-family: var(--brand-font);
       max-width: var(--scb-stepper-width);
       height: var(--scb-stepper-height);
+
+      margin-block-start: var(--scb-stepper-spacing-block-start, 0);
+      margin-block-end: var(--scb-stepper-spacing-block-end, 0);
     }
     .steps {
       display: flex;
@@ -140,56 +164,65 @@ o.styles = l`
       z-index: 0;
     }
     /* Vertikal connector */
-    ::slotted(scb-step[variant="vertical"]:not(:first-child))::before {
-        display: none;
+    ::slotted(scb-step[variant='vertical']:not(:first-child))::before {
+      display: none;
     }
-    ::slotted(scb-step[variant="vertical"]:not(:last-child))::after {
-        content: '';
-        position: absolute;
-        left: 28px;
-        top: 52px;
-        width: 1px;
-        height: calc(100% - 16px);
-        background: var(--n-70);
-        z-index: 0;
-        transform: translateX(-50%);
+    ::slotted(scb-step[variant='vertical']:not(:last-child))::after {
+      content: '';
+      position: absolute;
+      left: 28px;
+      top: 52px;
+      width: 1px;
+      height: calc(100% - 16px);
+      background: var(--n-70);
+      z-index: 0;
+      transform: translateX(-50%);
     }
-    ::slotted(scb-step[variant="vertical"][symbol-variant="marker"]:not(:last-child))::after {
-        content: "";
-        position: absolute;
-        left: 20px;
-        top: 38px;
-        width: 1px;
-        height: calc(100% - 2px);
-        background: var(--n-70);
-        z-index: 0;
-        transform: translateX(-50%);
+    ::slotted(scb-step[variant='vertical'][symbol-variant='marker']:not(:last-child))::after {
+      content: '';
+      position: absolute;
+      left: 20px;
+      top: 38px;
+      width: 1px;
+      height: calc(100% - 2px);
+      background: var(--n-70);
+      z-index: 0;
+      transform: translateX(-50%);
     }
-    ::slotted(scb-step[symbol-variant="marker"]:not(:first-child))::before  {
-        top: 20px;
+    ::slotted(scb-step[symbol-variant='marker']:not(:first-child))::before {
+      top: 20px;
     }
   `;
-r([
-  p({ type: String, reflect: !0 })
-], o.prototype, "type", 2);
-r([
-  p({ type: String, reflect: !0 })
-], o.prototype, "label", 2);
-r([
-  p({ type: Boolean, reflect: !0, attribute: "change-on-completed" })
-], o.prototype, "changeOnCompleted", 2);
-r([
-  p({ type: String })
-], o.prototype, "variant", 2);
-r([
-  p({ type: String, reflect: !0, attribute: "symbol-variant" })
-], o.prototype, "symbolVariant", 2);
-r([
-  v()
-], o.prototype, "activeIndex", 2);
-o = r([
-  f("scb-stepper")
-], o);
+a([
+  o({ type: String, reflect: !0 })
+], r.prototype, "type", 2);
+a([
+  o({ type: String, reflect: !0 })
+], r.prototype, "label", 2);
+a([
+  o({ type: Boolean, reflect: !0, attribute: "change-on-completed" })
+], r.prototype, "changeOnCompleted", 2);
+a([
+  o({ type: String })
+], r.prototype, "variant", 2);
+a([
+  o({ type: String, reflect: !0, attribute: "symbol-variant" })
+], r.prototype, "symbolVariant", 2);
+a([
+  o({ type: String, reflect: !0 })
+], r.prototype, "spacing", 2);
+a([
+  o({ type: String, attribute: "spacing-top", reflect: !0 })
+], r.prototype, "spacingTop", 2);
+a([
+  o({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], r.prototype, "spacingBottom", 2);
+a([
+  m()
+], r.prototype, "activeIndex", 2);
+r = a([
+  y("scb-stepper")
+], r);
 export {
-  o as ScbStepper
+  r as ScbStepper
 };

package/scb-switch/scb-switch.d.ts

@@ -1,5 +1,9 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
 export declare class ScbSwitch extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     label: string;
     ariaLabel: string;
     icons: boolean;
@@ -7,9 +11,24 @@ export declare class ScbSwitch extends LitElement {
     disabled: boolean;
     /** Full-width layout: space-between + width:100% när true */
     fullWidth: boolean;
+    /** Vertikalt avstånd ovanför/under komponenten. 0–14 mappar till spacing-tokens, annars CSS-värde. */
+    spacing: string;
+    /** Överkantens avstånd. Om satt går före spacing. 0–14 mappar till spacing-tokens, annars CSS-värde. */
+    spacingTop: string;
+    /** Nederkantens avstånd. Om satt går före spacing. 0–14 mappar till spacing-tokens, annars CSS-värde. */
+    spacingBottom: string;
+    name: string;
+    value: string;
+    private _form;
+    private _formResetHandler;
+    private _initialSelected;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     static styles: import('lit').CSSResult;
-    protected updated(): void;
     protected firstUpdated(): void;
+    protected updated(changed: PropertyValues): void;
+    formDisabledCallback(disabled: boolean): void;
+    private __syncFormValue;
     render(): TemplateResult;
 }
 declare global {

package/scb-switch/scb-switch.js

@@ -1,49 +1,86 @@
-import { css as d, LitElement as b, nothing as h, html as p } from "lit";
-import { property as r, customElement as f } from "lit/decorators.js";
+import { css as y, LitElement as g, nothing as b, html as u } from "lit";
+import { property as r, customElement as v } from "lit/decorators.js";
 import "@material/web/switch/switch.js";
-var u = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (e, t, a, n) => {
-  for (var i = n > 1 ? void 0 : n ? m(t, a) : t, o = e.length - 1, c; o >= 0; o--)
-    (c = e[o]) && (i = (n ? c(t, a, i) : c(i)) || i);
-  return n && i && u(t, a, i), i;
-};
-let s = class extends b {
+var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, m = (t) => {
+  throw TypeError(t);
+}, a = (t, e, s, o) => {
+  for (var l = o > 1 ? void 0 : o ? w(e, s) : e, p = t.length - 1, d; p >= 0; p--)
+    (d = t[p]) && (l = (o ? d(e, s, l) : d(l)) || l);
+  return o && l && _(e, s, l), l;
+}, k = (t, e, s) => e.has(t) || m("Cannot " + s), S = (t, e, s) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), c = (t, e, s) => (k(t, e, "access private method"), s), n, f, h;
+let i = class extends g {
   constructor() {
-    super(...arguments), this.label = "", this.ariaLabel = "", this.icons = !1, this.selected = !1, this.disabled = !1, this.fullWidth = !1;
+    super(), S(this, n), this._internals = null, this.label = "", this.ariaLabel = "", this.icons = !1, this.selected = !1, this.disabled = !1, this.fullWidth = !1, this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this.name = "", this.value = "on", this._form = null, this._formResetHandler = null, this._initialSelected = !1, "attachInternals" in this && (this._internals = this.attachInternals());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._initialSelected = this.selected, this._form = this.closest("form"), this._form && (this._formResetHandler = () => {
+      this.selected = this._initialSelected, this.__syncFormValue();
+    }, this._form.addEventListener("reset", this._formResetHandler, !0)), this.__syncFormValue();
   }
-  updated() {
-    this.toggleAttribute("aria-disabled", this.disabled);
+  disconnectedCallback() {
+    this._form && this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0), super.disconnectedCallback();
   }
   firstUpdated() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("md-switch");
-    e == null || e.addEventListener("change", (a) => {
-      this.selected = a.target.selected, this.dispatchEvent(new CustomEvent("change", {
-        detail: { selected: this.selected },
-        bubbles: !0,
-        composed: !0
-      }));
-    });
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("md-switch");
+    t == null || t.addEventListener("change", (s) => {
+      this.selected = s.target.selected, this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { selected: this.selected },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }), c(this, n, f).call(this);
+  }
+  updated(t) {
+    super.updated(t), t.has("disabled") && this.toggleAttribute("aria-disabled", this.disabled), (t.has("selected") || t.has("disabled") || t.has("value")) && this.__syncFormValue(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && c(this, n, f).call(this);
+  }
+  // Körs av webbläsaren när formuläret sätter disabled
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
+  // Synkar selected/disabled mot value
+  __syncFormValue() {
+    if (!this._internals) return;
+    const t = this.disabled || !this.selected ? null : this.value;
+    this._internals.setFormValue(t);
   }
   render() {
-    const e = this.label.trim().length > 0, t = e ? h : this.ariaLabel || h, a = p`
+    const t = this.label.trim().length > 0, e = t ? b : this.ariaLabel || b, s = u`
       <md-switch
         ?icons=${this.icons}
         ?selected=${this.selected}
         ?disabled=${this.disabled}
-        aria-label=${t}
+        aria-label=${e}
       ></md-switch>
     `;
-    return e ? p`
-        <label class="switch-container" ?disabled=${this.disabled}>
-          <span class="switch-label">${this.label}</span>
-          ${a}
-        </label>
-      ` : a;
+    return t ? u`
+          <label class="switch-container" ?disabled=${this.disabled}>
+            <span class="switch-label">${this.label}</span>
+            ${s}
+          </label>
+        ` : s;
   }
 };
-s.styles = d`
+n = /* @__PURE__ */ new WeakSet();
+f = function() {
+  const t = c(this, n, h).call(this, this.spacing), e = c(this, n, h).call(this, this.spacingTop) ?? t, s = c(this, n, h).call(this, this.spacingBottom) ?? t;
+  e ? this.style.setProperty("--scb-switch-spacing-block-start", e) : this.style.removeProperty("--scb-switch-spacing-block-start"), s ? this.style.setProperty("--scb-switch-spacing-block-end", s) : this.style.removeProperty("--scb-switch-spacing-block-end");
+};
+h = function(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;
+};
+i.formAssociated = !0;
+i.styles = y`
     :host {
       display: block;
+      /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+      margin-block-start: var(--scb-switch-spacing-block-start, 0);
+      margin-block-end: var(--scb-switch-spacing-block-end, 0);
     }
 
     .switch-container {
@@ -82,27 +119,42 @@ s.styles = d`
       color: var(--scb-switch-label-color, inherit);
     }
   `;
-l([
+a([
   r({ type: String })
-], s.prototype, "label", 2);
-l([
+], i.prototype, "label", 2);
+a([
   r({ type: String, reflect: !0, attribute: "aria-label" })
-], s.prototype, "ariaLabel", 2);
-l([
+], i.prototype, "ariaLabel", 2);
+a([
   r({ type: Boolean, reflect: !0 })
-], s.prototype, "icons", 2);
-l([
+], i.prototype, "icons", 2);
+a([
   r({ type: Boolean, reflect: !0 })
-], s.prototype, "selected", 2);
-l([
+], i.prototype, "selected", 2);
+a([
   r({ type: Boolean, reflect: !0 })
-], s.prototype, "disabled", 2);
-l([
+], i.prototype, "disabled", 2);
+a([
   r({ type: Boolean, reflect: !0, attribute: "full-width" })
-], s.prototype, "fullWidth", 2);
-s = l([
-  f("scb-switch")
-], s);
+], i.prototype, "fullWidth", 2);
+a([
+  r({ type: String, reflect: !0 })
+], i.prototype, "spacing", 2);
+a([
+  r({ type: String, attribute: "spacing-top", reflect: !0 })
+], i.prototype, "spacingTop", 2);
+a([
+  r({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], i.prototype, "spacingBottom", 2);
+a([
+  r({ type: String })
+], i.prototype, "name", 2);
+a([
+  r({ type: String })
+], i.prototype, "value", 2);
+i = a([
+  v("scb-switch")
+], i);
 export {
-  s as ScbSwitch
+  i as ScbSwitch
 };

package/scb-tabs/scb-tabs.d.ts

@@ -1,9 +1,17 @@
 import { MdTabs } from '@material/web/tabs/tabs.js';
 export declare class ScbTabs extends MdTabs {
+    #private;
     ariaLabel: string;
+    /** Vertikalt avstånd ovanför/under tabs-komponenten. 0–14 mappar till spacing-tokens, annars CSS-värde. */
+    spacing: string;
+    /** Överkantens avstånd. Om satt går före spacing. 0–14 mappar till spacing-tokens, annars CSS-värde. */
+    spacingTop: string;
+    /** Nederkantens avstånd. Om satt går före spacing. 0–14 mappar till spacing-tokens, annars CSS-värde. */
+    spacingBottom: string;
     private _isDispatching;
     static styles: import('lit').CSSResultOrNative[];
     connectedCallback(): void;
     protected firstUpdated(changedProperties: Map<string, unknown>): void;
+    updated(changed: Map<string, unknown>): void;
     private _onChange;
 }