scb-wc-test 0.1.105 → 0.1.107

package/scb-tabs/scb-tabs.js

@@ -1,65 +1,95 @@
-import { MdTabs as l } from "@material/web/tabs/tabs.js";
-import { property as d, customElement as m } from "lit/decorators.js";
-import { css as p } from "lit";
+import { MdTabs as m } from "@material/web/tabs/tabs.js";
+import { property as l, customElement as y } from "lit/decorators.js";
+import { css as g } from "lit";
 import "./scb-primary-tab.js";
 import "./scb-secondary-tab.js";
-var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (r, t, s, e) => {
-  for (var a = e > 1 ? void 0 : e ? v(t, s) : t, i = r.length - 1, c; i >= 0; i--)
-    (c = r[i]) && (a = (e ? c(t, s, a) : c(a)) || a);
-  return e && a && b(t, s, a), a;
-};
-let o = class extends l {
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, v = (t) => {
+  throw TypeError(t);
+}, c = (t, a, r, n) => {
+  for (var s = n > 1 ? void 0 : n ? f(a, r) : a, d = t.length - 1, b; d >= 0; d--)
+    (b = t[d]) && (s = (n ? b(a, r, s) : b(s)) || s);
+  return n && s && u(a, r, s), s;
+}, _ = (t, a, r) => a.has(t) || v("Cannot " + r), S = (t, a, r) => a.has(t) ? v("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, r), i = (t, a, r) => (_(t, a, "access private method"), r), e, h, p;
+let o = class extends m {
   constructor() {
-    super(...arguments), this.ariaLabel = "", this._isDispatching = !1, this._onChange = (r) => {
-      if (!r.composed && !this._isDispatching) {
-        r.stopPropagation(), this._isDispatching = !0;
-        const t = r.target.activeTabIndex;
-        this.dispatchEvent(new CustomEvent("change", {
-          detail: { activeTabIndex: t },
-          bubbles: !0,
-          composed: !0
-        })), this._isDispatching = !1;
+    super(...arguments), S(this, e), this.ariaLabel = "", this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this._isDispatching = !1, this._onChange = (t) => {
+      if (!t.composed && !this._isDispatching) {
+        t.stopPropagation(), this._isDispatching = !0;
+        const a = t.target.activeTabIndex;
+        this.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { activeTabIndex: a },
+            bubbles: !0,
+            composed: !0
+          })
+        ), this._isDispatching = !1;
       }
     };
   }
   connectedCallback() {
     super.connectedCallback(), this.setAttribute("role", "tablist");
   }
-  firstUpdated(r) {
-    super.firstUpdated(r), this.addEventListener("change", this._onChange);
+  firstUpdated(t) {
+    super.firstUpdated(t), this.addEventListener("change", this._onChange), i(this, e, h).call(this);
+  }
+  updated(t) {
+    super.updated(t), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && i(this, e, h).call(this);
   }
 };
+e = /* @__PURE__ */ new WeakSet();
+h = function() {
+  const t = i(this, e, p).call(this, this.spacing), a = i(this, e, p).call(this, this.spacingTop) ?? t, r = i(this, e, p).call(this, this.spacingBottom) ?? t;
+  a ? this.style.setProperty("--scb-tabs-spacing-block-start", a) : this.style.removeProperty("--scb-tabs-spacing-block-start"), r ? this.style.setProperty("--scb-tabs-spacing-block-end", r) : this.style.removeProperty("--scb-tabs-spacing-block-end");
+};
+p = function(t) {
+  if (!t) return;
+  const a = String(t).trim();
+  if (a)
+    return /^\d+$/.test(a) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(a, 10)))})` : a;
+};
 o.styles = [
-  ...l.styles,
-  p`
-    :host {
-      /*Containerfärg */
-      --md-primary-tab-container-color: var(--md-sys-color-surface);
-      --md-secondary-tab-container-color: var(--md-sys-color-surface);
+  ...m.styles,
+  g`
+      :host {
+        /*Containerfärg */
+        --md-primary-tab-container-color: var(--md-sys-color-surface);
+        --md-secondary-tab-container-color: var(--md-sys-color-surface);
 
-      /* Text- och ikonfärger */
-      --md-primary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
-      --md-secondary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
-      --md-primary-tab-active-label-text-color: var(--md-sys-color-on-surface);
-      --md-secondary-tab-active-label-text-color: var(--md-sys-color-on-surface);
+        /* Text- och ikonfärger */
+        --md-primary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
+        --md-secondary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
+        --md-primary-tab-active-label-text-color: var(--md-sys-color-on-surface);
+        --md-secondary-tab-active-label-text-color: var(--md-sys-color-on-surface);
 
-      /* Indikator och divider */
-      --md-primary-tab-active-indicator-color: var(--md-sys-color-primary);
-      --md-primary-tab-divider-color: var(--md-sys-color-outline-variant);
-      --md-secondary-tab-divider-color: var(--md-sys-color-outline-variant);
+        /* Indikator och divider */
+        --md-primary-tab-active-indicator-color: var(--md-sys-color-primary);
+        --md-primary-tab-divider-color: var(--md-sys-color-outline-variant);
+        --md-secondary-tab-divider-color: var(--md-sys-color-outline-variant);
 
-      /* State layers (hover/press) */
-      --md-primary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
-      --md-secondary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
-    }
+        /* State layers (hover/press) */
+        --md-primary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
+        --md-secondary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
 
-  `
+        /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+        margin-block-start: var(--scb-tabs-spacing-block-start, 0);
+        margin-block-end: var(--scb-tabs-spacing-block-end, 0);
+      }
+    `
 ];
-n([
-  d({ type: String, reflect: !0, attribute: "aria-label" })
+c([
+  l({ type: String, reflect: !0, attribute: "aria-label" })
 ], o.prototype, "ariaLabel", 2);
-o = n([
-  m("scb-tabs")
+c([
+  l({ type: String, reflect: !0 })
+], o.prototype, "spacing", 2);
+c([
+  l({ type: String, attribute: "spacing-top", reflect: !0 })
+], o.prototype, "spacingTop", 2);
+c([
+  l({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], o.prototype, "spacingBottom", 2);
+o = c([
+  y("scb-tabs")
 ], o);
 export {
   o as ScbTabs

package/scb-textfield/scb-textfield.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult, PropertyValues } from 'lit';
 export declare class ScbTextField extends LitElement {
+    #private;
     static formAssociated: boolean;
     private _internals;
     constructor();
@@ -15,6 +16,12 @@ export declare class ScbTextField extends LitElement {
     error: boolean;
     disabled: boolean;
     required: boolean;
+    /** Vertikalt avstånd ovanför/under textfältet. 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 _form;
     private _formSubmitHandler;
     private _formResetHandler;

package/scb-textfield/scb-textfield.js

@@ -1,19 +1,21 @@
-import { css as h, LitElement as p, html as n } from "lit";
-import { property as a, customElement as u } from "lit/decorators.js";
+import { css as m, LitElement as x, html as d } from "lit";
+import { property as a, customElement as v } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
-var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (t, e, i, l) => {
-  for (var o = l > 1 ? void 0 : l ? f(e, i) : e, d = t.length - 1, c; d >= 0; d--)
-    (c = t[d]) && (o = (l ? c(e, i, o) : c(o)) || o);
-  return l && o && b(e, i, o), o;
-};
-let s = class extends p {
+var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, f = (t) => {
+  throw TypeError(t);
+}, r = (t, e, i, l) => {
+  for (var o = l > 1 ? void 0 : l ? g(e, i) : e, p = t.length - 1, u; p >= 0; p--)
+    (u = t[p]) && (o = (l ? u(e, i, o) : u(o)) || o);
+  return l && o && y(e, i, o), o;
+}, _ = (t, e, i) => e.has(t) || f("Cannot " + i), w = (t, e, i) => e.has(t) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), c = (t, e, i) => (_(t, e, "access private method"), i), n, b, h;
+let s = class extends x {
   constructor() {
-    super(), this._internals = null, this.type = "text", this.label = "", this.supportingText = "", this.errorText = "", this.leadingIcon = "", this.name = "", this.pattern = "", this.value = "", this.underLabel = "", this.error = !1, this.disabled = !1, this.required = !1, this._form = null, this._formSubmitHandler = null, this._formResetHandler = null, this._initialValue = "", this._inputId = "", "attachInternals" in this && (this._internals = this.attachInternals());
+    super(), w(this, n), this._internals = null, this.type = "text", this.label = "", this.supportingText = "", this.errorText = "", this.leadingIcon = "", this.name = "", this.pattern = "", this.value = "", this.underLabel = "", this.error = !1, this.disabled = !1, this.required = !1, this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this._form = null, this._formSubmitHandler = null, this._formResetHandler = null, this._initialValue = "", this._inputId = "", "attachInternals" in this && (this._internals = this.attachInternals());
   }
   render() {
-    const t = this.leadingIcon ? n`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, e = this.error ? n`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>` : null;
+    const t = this.leadingIcon ? d`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, e = this.error ? d`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>` : null;
     this.underLabel = this.error ? this.errorText || "Ogiltig inmatning." : this.supportingText, this.value = this.value || "";
-    const i = this.underLabel ? `${this._inputId}-supporting-text` : void 0, l = this.type === "search" && this.value ? n`
+    const i = this.underLabel ? `${this._inputId}-supporting-text` : void 0, l = this.type === "search" && this.value ? d`
             <button
               type="button"
               class="scb-textfield-clear"
@@ -48,7 +50,7 @@ let s = class extends p {
               </svg>
             </button>
           ` : null;
-    return this.type === "textarea" ? n`
+    return this.type === "textarea" ? d`
         <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
         <span
           class="scb-textfield-supporting-text"
@@ -68,7 +70,7 @@ let s = class extends p {
 ${this.value}</textarea
           >
         </div>
-      ` : n`
+      ` : d`
       <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
       <span
         class="scb-textfield-supporting-text"
@@ -122,13 +124,14 @@ ${this.value}</textarea
       this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
     }), e.addEventListener("select", () => {
       this.dispatchEvent(new Event("select", { bubbles: !0, composed: !0 }));
-    }));
+    })), c(this, n, b).call(this);
   }
   updated(t) {
     if (super.updated(t), this.toggleAttribute("aria-disabled", this.disabled), this._internals && (t.has("value") || t.has("disabled"))) {
       const e = this.disabled ? null : this.value;
       this._internals.setFormValue(e);
     }
+    (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && c(this, n, b).call(this);
   }
   // Körs av webbläsaren när formuläret sätter disabled på kontrollen
   formDisabledCallback(t) {
@@ -185,9 +188,20 @@ ${this.value}</textarea
     }
   }
 };
+n = /* @__PURE__ */ new WeakSet();
+b = function() {
+  const t = c(this, n, h).call(this, this.spacing), e = c(this, n, h).call(this, this.spacingTop) ?? t, i = c(this, n, h).call(this, this.spacingBottom) ?? t;
+  e ? this.style.setProperty("--scb-textfield-spacing-block-start", e) : this.style.removeProperty("--scb-textfield-spacing-block-start"), i ? this.style.setProperty("--scb-textfield-spacing-block-end", i) : this.style.removeProperty("--scb-textfield-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;
+};
 s.formAssociated = !0;
 s.styles = [
-  h`
+  m`
       :host {
         --scb-textfield-number-max-width: 280px;
         --scb-textfield-text-max-width: 400px;
@@ -199,6 +213,10 @@ s.styles = [
         --scb-textfield-textarea-max-width: 600px;
         font-family: var(--brand-font);
         color: var(--md-sys-color-on-surface);
+
+        /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+        margin-block-start: var(--scb-textfield-spacing-block-start, 0);
+        margin-block-end: var(--scb-textfield-spacing-block-end, 0);
       }
 
       :host([type='number']) {
@@ -398,8 +416,17 @@ r([
 r([
   a({ type: Boolean, reflect: !0 })
 ], s.prototype, "required", 2);
+r([
+  a({ type: String, reflect: !0 })
+], s.prototype, "spacing", 2);
+r([
+  a({ type: String, attribute: "spacing-top", reflect: !0 })
+], s.prototype, "spacingTop", 2);
+r([
+  a({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], s.prototype, "spacingBottom", 2);
 s = r([
-  u("scb-textfield")
+  v("scb-textfield")
 ], s);
 export {
   s as ScbTextField

package/scb-toc/scb-toc.d.ts

@@ -1,6 +1,15 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 export declare class ScbToc extends LitElement {
+    #private;
     detached: boolean;
+    /** Vertikalt avstånd ovanför/under innehållsförteckningen. 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;
     static styles: import('lit').CSSResult[];
+    protected firstUpdated(_changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
 }

package/scb-toc/scb-toc.js

@@ -1,27 +1,49 @@
-import { css as a, LitElement as m, html as n } from "lit";
-import { property as f, customElement as b } from "lit/decorators.js";
+import { css as b, LitElement as f, html as y } from "lit";
+import { property as l, customElement as m } from "lit/decorators.js";
 import "./scb-toc-item.js";
-var d = Object.defineProperty, u = Object.getOwnPropertyDescriptor, i = (p, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? u(e, o) : e, l = p.length - 1, c; l >= 0; l--)
-    (c = p[l]) && (t = (s ? c(e, o, t) : c(t)) || t);
-  return s && t && d(e, o, t), t;
-};
-let r = class extends m {
+var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, v = (t) => {
+  throw TypeError(t);
+}, i = (t, s, e, n) => {
+  for (var r = n > 1 ? void 0 : n ? _(s, e) : s, h = t.length - 1, g; h >= 0; h--)
+    (g = t[h]) && (r = (n ? g(s, e, r) : g(r)) || r);
+  return n && r && u(s, e, r), r;
+}, S = (t, s, e) => s.has(t) || v("Cannot " + e), k = (t, s, e) => s.has(t) ? v("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), c = (t, s, e) => (S(t, s, "access private method"), e), a, d, p;
+let o = class extends f {
   constructor() {
-    super(...arguments), this.detached = !1;
+    super(...arguments), k(this, a), this.detached = !1, this.spacing = "", this.spacingTop = "", this.spacingBottom = "";
+  }
+  firstUpdated(t) {
+    c(this, a, d).call(this);
+  }
+  updated(t) {
+    super.updated(t), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && c(this, a, d).call(this);
   }
   render() {
-    return n`
+    return y`
       <div class="scb-toc-list" role="list">
         <slot></slot>
       </div>
     `;
   }
 };
-r.styles = [
-  a`
+a = /* @__PURE__ */ new WeakSet();
+d = function() {
+  const t = c(this, a, p).call(this, this.spacing), s = c(this, a, p).call(this, this.spacingTop) ?? t, e = c(this, a, p).call(this, this.spacingBottom) ?? t;
+  s ? this.style.setProperty("--scb-toc-spacing-block-start", s) : this.style.removeProperty("--scb-toc-spacing-block-start"), e ? this.style.setProperty("--scb-toc-spacing-block-end", e) : this.style.removeProperty("--scb-toc-spacing-block-end");
+};
+p = function(t) {
+  if (!t) return;
+  const s = String(t).trim();
+  if (s)
+    return /^\d+$/.test(s) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(s, 10)))})` : s;
+};
+o.styles = [
+  b`
       :host {
         display: block;
+        /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+        margin-block-start: var(--scb-toc-spacing-block-start, 0);
+        margin-block-end: var(--scb-toc-spacing-block-end, 0);
       }
 
       .scb-toc-list {
@@ -30,11 +52,20 @@ r.styles = [
     `
 ];
 i([
-  f({ type: Boolean, reflect: !0 })
-], r.prototype, "detached", 2);
-r = i([
-  b("scb-toc")
-], r);
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "detached", 2);
+i([
+  l({ type: String, reflect: !0 })
+], o.prototype, "spacing", 2);
+i([
+  l({ type: String, attribute: "spacing-top", reflect: !0 })
+], o.prototype, "spacingTop", 2);
+i([
+  l({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], o.prototype, "spacingBottom", 2);
+o = i([
+  m("scb-toc")
+], o);
 export {
-  r as ScbToc
+  o as ScbToc
 };

package/scb-viz/scb-viz.d.ts

@@ -1,5 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 export declare class ScbViz extends LitElement {
+    #private;
     variant: 'Standard' | 'Table' | 'Image';
     selectedChip: 'Diagram' | 'Table' | null;
     title: string;
@@ -10,14 +11,20 @@ export declare class ScbViz extends LitElement {
     footnote: string;
     lang: string;
     imageHref: string;
+    /** 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;
     get descriptionLabel(): "Description of the chart" | "Beskrivning av diagrammet";
     get moreAboutStatsLabel(): "More about the statistics" | "Mer om statistiken";
     get commentLabel(): "Comments" | "Kommentar";
     get sourceLabel(): "Source" | "Källa";
     get footnoteLabel(): "Footnotes" | "Fotnot";
     static styles: import('lit').CSSResult;
-    firstUpdated(): void;
-    updated(): void;
+    protected firstUpdated(_changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     private _styleSlottedTable;
     render(): import('lit-html').TemplateResult<1>;
     private _onSegmentedChange;