scb-wc-test 0.1.1

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

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+
+export declare class ScbFactCardContent extends LitElement {
+    label: string;
+    subLabel: string;
+    supportingText: string;
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+    private _hasSlotContent;
+}

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

@@ -0,0 +1,83 @@
+import { css as d, LitElement as h, html as r } from "lit";
+import { property as c, customElement as g } from "lit/decorators.js";
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (a, e, l, t) => {
+  for (var s = t > 1 ? void 0 : t ? y(e, l) : e, o = a.length - 1, p; o >= 0; o--)
+    (p = a[o]) && (s = (t ? p(e, l, s) : p(s)) || s);
+  return t && s && u(e, l, s), s;
+};
+let i = class extends h {
+  constructor() {
+    super(...arguments), this.label = "", this.subLabel = "", this.supportingText = "";
+  }
+  render() {
+    return r`
+        ${this.label ? r`
+        <div class="label">
+            ${this.label}
+        </div>` : ""}
+        ${this.subLabel ? r`<div class="sub-label">${this.subLabel}</div>` : ""}
+        ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+        <slot @slotchange=${this.requestUpdate}></slot>
+        ${this._hasSlotContent() ? r`<div class="content links"><slot></slot></div>` : ""}
+        `;
+  }
+  _hasSlotContent() {
+    const a = this.shadowRoot && this.shadowRoot.querySelector("slot");
+    if (!a) return !1;
+    const e = a.assignedNodes({ flatten: !0 });
+    return e.length > 0 && e.some((l) => {
+      var t;
+      return l.nodeType === Node.TEXT_NODE ? (t = l.textContent) == null ? void 0 : t.trim() : !0;
+    });
+  }
+};
+i.styles = d`
+        :host {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-3);
+            width: 100%;
+        }
+        .label{
+            letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: var(--md-sys-typescale-headline-small-size);
+            font-weight: var(--weight-bold);
+            line-height: var(--md-sys-typescale-headline-small-line-height);
+            letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
+        }
+        .sub-label {
+            font-size: var(--md-sys-typescale-title-medium-size);
+            font-weight: var(--weight-semibold);
+            line-height: var(--md-sys-typescale-title-medium-line-height);
+            letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+        }
+        .supporting-text {
+            font-size: var(--md-sys-typescale-body-large-size);
+            line-height: var(--md-sys-typescale-body-large-line-height);
+            letter-spacing: var(--md-sys-typescale-body-large-tracking);
+        }
+        .content.links ::slotted(*) {
+        margin-top: var(--spacing-3);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-3);
+    }
+    `;
+n([
+  c({ type: String })
+], i.prototype, "label", 2);
+n([
+  c({ type: String, attribute: "sub-label" })
+], i.prototype, "subLabel", 2);
+n([
+  c({ type: String, attribute: "supporting-text" })
+], i.prototype, "supportingText", 2);
+i = n([
+  g("scb-fact-card-content")
+], i);
+export {
+  i as ScbFactCardContent
+};

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+
+/**
+ * Enkel faktakort-komponent för SCB-designsystemet
+ */
+export declare class ScbFactCard extends LitElement {
+    variant: 'filled' | 'outlined';
+    label: string;
+    subLabel: string;
+    supportingText: string;
+    icon: string;
+    showCloseButton: boolean;
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,110 @@
+import { css as d, LitElement as u, html as l } from "lit";
+import { property as s, customElement as b } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "./scb-fact-card-content.js";
+var m = Object.defineProperty, h = Object.getOwnPropertyDescriptor, r = (i, e, c, a) => {
+  for (var o = a > 1 ? void 0 : a ? h(e, c) : e, n = i.length - 1, p; n >= 0; n--)
+    (p = i[n]) && (o = (a ? p(e, c, o) : p(o)) || o);
+  return a && o && m(e, c, o), o;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.variant = "filled", this.label = "", this.subLabel = "", this.supportingText = "", this.icon = "", this.showCloseButton = !0;
+  }
+  render() {
+    const i = this.variant === "outlined" ? "outlined" : "filled";
+    return l`
+    ${this.icon ? l`<div class="icon-wrapper ${i}"><md-icon>${this.icon}</md-icon></div>` : ""}
+    <div class="scb-fact-card ${i} ${this.icon ? "no-topleft-radius" : ""} ${this.showCloseButton ? "has-close" : ""}">
+        ${this.showCloseButton ? l`<scb-icon-button variant="standard" icon="close"></scb-icon-button>` : ""}
+        <div class="content">
+            <slot></slot>
+        </div>
+    </div>
+    `;
+  }
+};
+t.styles = d`
+    :host{ --scb-card-min-w:  580px; }
+    :host {
+        max-width: var(--scb-card-min-w);
+        width: 100%;
+        display: block;
+        position: relative;
+    }
+    .scb-fact-card {
+        color: var(--md-sys-color-on-surface);
+        max-width: var(--scb-card-min-w);
+        position: relative;
+        border-radius: var(--md-sys-shape-corner-large);
+        background: var(--md-sys-color-surface-dim);
+        padding: var(--spacing-7);
+    }
+    .scb-fact-card.has-close {
+        padding-right: 80px;
+    }
+    .scb-fact-card.no-topleft-radius {
+        border-top-left-radius: 0 ;
+        margin-top: 40px;
+    }
+    .scb-fact-card.outlined {
+        border: 1px solid var(--md-sys-color-outline);
+        background: var(--md-sys-color-surface);
+    }
+    .icon-wrapper {
+        top: -40px;
+        position: absolute;
+        z-index: 1;
+        padding: 16px 24px;
+        padding-bottom: 0;
+        width: fit-content;
+        border-radius: 1000px 1000px 0 0 / 1000px 1000px 0 0; /* halvmåne upptill */
+        background: var(--md-sys-color-surface-dim);
+        line-height: 0;
+    }
+    .icon-wrapper.outlined {
+        border: 1px solid var(--md-sys-color-outline);
+        border-bottom: none;
+        background: var(--md-sys-color-surface);
+    }
+    scb-icon-button {
+        position: absolute;
+        right: 12px;
+        top: 12px;
+    }
+    .scb-fact-card.clickable {
+        cursor: pointer;
+    }
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-8);
+        width: 100%;
+    }
+  `;
+r([
+  s({ type: String })
+], t.prototype, "variant", 2);
+r([
+  s({ type: String })
+], t.prototype, "label", 2);
+r([
+  s({ type: String, attribute: "sub-label" })
+], t.prototype, "subLabel", 2);
+r([
+  s({ type: String, attribute: "supporting-text" })
+], t.prototype, "supportingText", 2);
+r([
+  s({ type: String })
+], t.prototype, "icon", 2);
+r([
+  s({ type: Boolean, attribute: "show-close-button" })
+], t.prototype, "showCloseButton", 2);
+t = r([
+  b("scb-fact-card")
+], t);
+export {
+  t as ScbFactCard
+};

package/scb-footer/scb-footer-section.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+
+/**
+ * Lätt wrapper för en länkkolumn i <scb-footer>.
+ * Används endast som datakälla - renderas inte visuellt.
+ *
+ * <scb-footer-section title="Rubrik">
+ *   <scb-link href="#">Länk 1</scb-link>
+ *   <scb-link href="#">Länk 2</scb-link>
+ * </scb-footer-section>
+ */
+export declare class ScbFooterSection extends LitElement {
+    title: string;
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-footer-section': ScbFooterSection;
+    }
+}

package/scb-footer/scb-footer-section.js

@@ -0,0 +1,28 @@
+import { css as i, LitElement as f, html as m } from "lit";
+import { property as u, customElement as v } from "lit/decorators.js";
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (n, e, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? y(e, s) : e, l = n.length - 1, p; l >= 0; l--)
+    (p = n[l]) && (t = (r ? p(e, s, t) : p(t)) || t);
+  return r && t && _(e, s, t), t;
+};
+let o = class extends f {
+  constructor() {
+    super(...arguments), this.title = "";
+  }
+  // Renderar inget (children behövs bara för att läsas av <scb-footer>)
+  render() {
+    return m`<slot></slot>`;
+  }
+};
+o.styles = i`
+    :host { display: none; }
+  `;
+c([
+  u({ type: String, reflect: !0 })
+], o.prototype, "title", 2);
+o = c([
+  v("scb-footer-section")
+], o);
+export {
+  o as ScbFooterSection
+};

package/scb-footer/scb-footer.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, TemplateResult } from 'lit';
+
+type FooterLink = {
+    label: string;
+    href: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+};
+type FooterSection = {
+    title: string;
+    links: FooterLink[];
+};
+export declare class ScbFooter extends LitElement {
+    #private;
+    maxWidth: string;
+    sections: FooterSection[];
+    description: string;
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-footer': ScbFooter;
+    }
+}
+export {};

package/scb-footer/scb-footer.js

@@ -0,0 +1,326 @@
+import { css as A, LitElement as H, html as v } from "lit";
+import { property as y, customElement as L } from "lit/decorators.js";
+import "../scb-link/scb-link.js";
+import "../scb-grid/scb-grid.js";
+import "../scb-grid/scb-grid-item.js";
+import "./scb-footer-section.js";
+var T = Object.defineProperty, P = Object.getOwnPropertyDescriptor, O = (t) => {
+  throw TypeError(t);
+}, x = (t, e, i, a) => {
+  for (var r = a > 1 ? void 0 : a ? P(e, i) : e, s = t.length - 1, g; s >= 0; s--)
+    (g = t[s]) && (r = (a ? g(e, i, r) : g(r)) || r);
+  return a && r && T(e, i, r), r;
+}, w = (t, e, i) => e.has(t) || O("Cannot " + i), c = (t, e, i) => (w(t, e, "read from private field"), i ? i.call(t) : e.get(t)), d = (t, e, i) => e.has(t) ? O("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), o = (t, e, i, a) => (w(t, e, "write to private field"), e.set(t, i), i), l = (t, e, i) => (w(t, e, "access private method"), i), p, f, h, u, n, M, C, N, k, _, E, W, S;
+let m = class extends H {
+  constructor() {
+    super(...arguments), d(this, n), this.maxWidth = "1440px", this.sections = [], this.description = "Statistikmyndigheten SCB förser samhället med statistik för beslutsfattande, debatt och forskning.", d(this, p, null), d(this, f, ""), d(this, h), d(this, u, !1), d(this, _, 8);
+  }
+  /* === Livscykel: initiera harvest före första render (ingen varning) === */
+  connectedCallback() {
+    super.connectedCallback(), l(this, n, k).call(this, !0), l(this, n, M).call(this);
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = c(this, h)) == null || t.disconnect();
+  }
+  render() {
+    const t = c(this, n, N);
+    return v`
+      <footer class="outer" role="contentinfo" style=${`--scb-footer-max-width:${this.maxWidth}`}>
+        <nav aria-label="Sidfot med länkar">
+          <scb-grid
+            .colsCompact=${4}
+            .colsMedium=${8}
+            .colsExpanded=${8}
+            padding-block="0"
+            .maxWidth=${this.maxWidth}
+          >
+            ${l(this, n, E).call(this, t)}
+          </scb-grid>
+        </nav>
+
+        <div class="brand">
+          <div class="brand-inner">
+            <svg class="logo" viewBox="0 0 48 54" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+              <g clip-path="url(#clip0_4974_83818)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M25.6527 6.07812C25.6527 5.15909 24.9076 4.41482 23.9877 4.41482C23.0677 4.41482 22.3226 5.15909 22.3226 6.07812V48.0391C22.3226 48.9601 23.0677 49.7061 23.9877 49.7061C24.9076 49.7061 25.6527 48.9601 25.6527 48.0391V32.9153C25.6527 32.8056 25.744 32.7163 25.8527 32.7163H31.3245C31.4342 32.7163 31.5245 32.8056 31.5245 32.9153V48.1711C31.5245 51.3899 28.1496 54 23.9877 54C19.8241 54 16.4501 51.3899 16.4501 48.1711V5.82708C16.4501 2.6103 19.8241 0 23.9877 0C28.1496 0 31.5245 2.6103 31.5245 5.82708V20.8893C31.5245 21.0009 31.4342 21.0883 31.3245 21.0883H25.8527C25.744 21.0883 25.6527 21.0009 25.6527 20.8893V6.07812Z" fill="white"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.198901 10.8446C-0.152687 13.293 -0.0290117 17.3078 0.49751 19.5627C1.07611 22.0203 4.41288 26.9878 5.91609 29.2948C7.42127 31.5999 9.42869 34.0073 9.39892 37.2185V44.9097C9.39892 45.8287 8.65375 46.5748 7.73382 46.5748C6.81659 46.5748 6.0715 45.8287 6.0715 44.9097V33.1217C6.0715 33.012 5.9803 32.9208 5.86868 32.9208H0.39893C0.287311 32.9208 0.198901 33.012 0.198901 33.1217V45.2613C0.198901 48.4798 3.57282 51.0901 7.73382 51.0901C11.8975 51.0901 15.2714 48.4798 15.2714 45.2613V37.2185C15.2463 31.7023 13.7412 30.8985 11.7877 27.5906C10.3886 25.2148 6.94682 20.3143 6.37003 17.8566C5.8417 15.6018 5.86491 12.9916 6.0715 10.6194C6.0715 9.70039 6.81659 8.95432 7.73382 8.95432C8.65375 8.95432 9.39892 9.70039 9.39892 10.6194V21.1032C9.39892 21.2129 9.48913 21.3022 9.60166 21.3022H15.0706C15.183 21.3022 15.2714 21.2129 15.2714 21.1032V10.8446C15.2714 7.62408 11.8975 5.01575 7.73382 5.01575C3.57282 5.01575 0.198901 7.62408 0.198901 10.8446Z" fill="white"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M32.8911 5.46411H41.2883C44.7561 5.46411 47.5674 8.27534 47.5674 11.7414V20.547C47.5674 23.0158 45.9488 25.0995 43.7161 25.8139V25.933C45.9488 26.6456 47.5674 28.7312 47.5674 31.2018V44.6438C47.5674 47.6988 45.0873 50.1768 42.0344 50.1768L32.8911 50.1823C32.7786 50.1823 32.6892 50.0911 32.6892 49.9832V5.66324C32.6892 5.55539 32.7786 5.46411 32.8911 5.46411ZM38.7636 9.83067C38.6502 9.83067 38.5608 9.92179 38.5608 10.0316V23.9255C38.5608 24.039 38.6502 24.1284 38.7636 24.1284H39.5898C40.6948 24.1284 41.5916 23.2297 41.5916 22.1246V11.8343C41.5916 10.7293 40.6948 9.83067 39.5898 9.83067H38.7636ZM38.7636 28.5432C38.6502 28.5432 38.5608 28.6325 38.5608 28.7423V45.7971C38.5608 45.9088 38.6502 46 38.7636 46H39.7514C40.8584 46 41.7534 45.1014 41.7534 43.9962V30.5469C41.7534 29.4381 40.8584 28.5432 39.7514 28.5432H38.7636Z" fill="white"/>
+              </g>
+              <defs><clipPath id="clip0_4974_83818"><rect width="48" height="54" fill="white"/></clipPath></defs>
+            </svg>
+
+            <p class="desc">${this.description}</p>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+};
+p = /* @__PURE__ */ new WeakMap();
+f = /* @__PURE__ */ new WeakMap();
+h = /* @__PURE__ */ new WeakMap();
+u = /* @__PURE__ */ new WeakMap();
+n = /* @__PURE__ */ new WeakSet();
+M = function() {
+  var t;
+  (t = c(this, h)) == null || t.disconnect(), o(this, h, new MutationObserver((e) => {
+    for (const i of e) {
+      if (i.type === "childList") {
+        const a = [...i.addedNodes].some((s) => s.tagName === "SCB-FOOTER-SECTION" || s.tagName === "SCB-LINK"), r = [...i.removedNodes].some((s) => s.tagName === "SCB-FOOTER-SECTION" || s.tagName === "SCB-LINK");
+        if (a || r) {
+          l(this, n, C).call(this);
+          return;
+        }
+      }
+      if (i.type === "attributes" && (i.target.tagName === "SCB-FOOTER-SECTION" || i.target.tagName === "SCB-LINK")) {
+        l(this, n, C).call(this);
+        return;
+      }
+    }
+  })), c(this, h).observe(this, {
+    subtree: !0,
+    childList: !0,
+    attributes: !0,
+    attributeFilter: ["title", "href", "target"]
+  });
+};
+C = function() {
+  c(this, u) || (o(this, u, !0), queueMicrotask(() => {
+    o(this, u, !1), l(this, n, k).call(this, !1);
+  }));
+};
+N = function() {
+  return c(this, p) ?? this.sections ?? [];
+};
+k = function(t = !1) {
+  const e = Array.from(this.querySelectorAll("scb-footer-section"));
+  if (!e.length) {
+    c(this, p) !== null && (o(this, p, null), o(this, f, ""), t || this.requestUpdate());
+    return;
+  }
+  const i = e.map((r) => {
+    const s = (r.getAttribute("title") || "").trim(), g = Array.from(r.querySelectorAll("scb-link")).map((b) => {
+      const B = (b.getAttribute("href") || "").trim(), $ = b.getAttribute("target"), V = { label: (b.textContent || "").trim(), href: B };
+      return $ && (V.target = $), V;
+    });
+    return { title: s, links: g };
+  }), a = JSON.stringify(i);
+  a !== c(this, f) && (o(this, f, a), o(this, p, i), t || this.requestUpdate());
+};
+_ = /* @__PURE__ */ new WeakMap();
+E = function(t) {
+  const e = [], a = t.length;
+  if (a > 0 && a < 4)
+    return e.push(v`
+        <scb-grid-item
+          col-span-compact="4"
+          col-span-medium="8"
+          col-span-expanded="${c(this, _)}"
+        >
+          <div class="center-row">
+            ${t.map((r, s) => l(this, n, S).call(this, r, s, !0))}
+          </div>
+        </scb-grid-item>
+      `), e;
+  for (let r = 0; r < a; r++) e.push(l(this, n, W).call(this, t[r], r));
+  return e;
+};
+W = function(t, e) {
+  return v`
+      <scb-grid-item
+        col-span-compact="4"
+        col-span-medium="4"
+        col-span-expanded="2"
+      >
+        ${l(this, n, S).call(this, t, e, !1)}
+      </scb-grid-item>
+    `;
+};
+S = function(t, e, i) {
+  return v`
+      <section class="group ${i ? "group--centered" : ""}" aria-labelledby=${`scb-footer-sec-${e}`}>
+        <h3 id=${`scb-footer-sec-${e}`} class="title">${t.title}</h3>
+        <ul>
+          ${t.links.map((a) => v`
+            <li>
+              <scb-link .href=${a.href} .target=${a.target ?? void 0}>${a.label}</scb-link>
+            </li>
+          `)}
+        </ul>
+      </section>
+    `;
+};
+m.styles = A`
+    :host {
+      display: block;
+      color: var(--p-100);
+      background: var(--scb-footer-bg, var(--p-20));
+    }
+
+    /* Yttre behållare */
+    .outer {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: var(--spacing-10, 48px) 0 var(--spacing-5, 16px);
+      gap: var(--spacing-4, 12px);
+      align-self: stretch;
+    }
+
+    nav { width: 100%; }
+
+    /* Grid */
+    scb-grid {
+      --scb-grid-padding-inline: var(--spacing-8, 32px);
+      --scb-grid-row-gap: var(--spacing-9, 40px);
+      --scb-grid-column-gap: var(--spacing-9, 40px);
+      --scb-grid-gap: var(--spacing-9, 40px) var(--spacing-9, 40px);
+      --scb-grid-max-width: var(--scb-footer-max-width, 1440px);
+    }
+    /* ↑ lite mer luft mellan rader när sektioner staplas */
+    @media (max-width: 839.98px) {
+      scb-grid { --scb-grid-row-gap: var(--spacing-11, 64px); }
+    }
+    @media (min-width: 840px) {
+      scb-grid { --scb-grid-row-gap: var(--spacing-11, 64px); }
+    }
+
+    /* Kolumn (grupp) */
+    .group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-7, 24px);
+      min-width: 248px;
+      flex: 1 0 0;
+      align-self: stretch;
+    }
+
+    /* Grupp i centrerad rad: innehållsbredd i desktop för visuell centrering */
+    @media (min-width: 840px) {
+      .group--centered {
+        flex: 0 1 auto;
+        min-width: 248px;
+        max-width: 420px;
+      }
+    }
+
+    /* Radbehållare för centrerat läge (desktop) */
+    @media (min-width: 840px) {
+      .center-row {
+        display: flex;
+        align-items: start;
+        justify-content: center;
+        gap: var(--spacing-9, 40px);
+        width: 100%;
+      }
+    }
+
+    /* Extra topmarginal för grupper som hamnar på senare/undre rader i compact/medium */
+    @media (max-width: 599px) {
+      scb-grid-item:nth-child(n+2) .group { margin-top: var(--spacing-7, 24px); }
+    }
+    @media (min-width: 600px) and (max-width: 839px) {
+      scb-grid-item:nth-child(n+3) .group { margin-top: var(--spacing-7, 24px); }
+    }
+
+    /* Rubrik (Title/Medium) */
+    .title {
+      margin: 0;
+      color: var(--p-100);
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-title-medium-size);
+      line-height: var(--md-sys-typescale-title-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+      font-weight: var(--weight-semibold);
+      align-self: stretch;
+    }
+
+    /* Länklista */
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-5, 16px);
+    }
+
+    /* Länkar i fot */
+    scb-link {
+      --scb-link-color: var(--p-100);
+      --scb-link-visited-color: var(--p-100);
+    }
+    scb-link::part(anchor) {
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
+      font-weight: var(--weight-regular);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+    }
+
+    /* Brand-block */
+    .brand {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      align-self: stretch;
+      padding: var(--spacing-9, 40px) var(--spacing-8, 32px);
+      gap: var(--spacing-5, 16px);
+    }
+    .brand-inner {
+      width: 100%;
+      max-width: var(--scb-footer-max-width, 1440px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--spacing-5, 16px);
+      margin-inline: auto;
+    }
+    .logo { width: 48px; height: 54px; display: block; }
+
+    /* Slogan/beskrivning: max 312 (mobil), 376 (≥600px). Bryter alltid tjusigt. */
+    .desc {
+      margin: 0;
+      text-align: center;
+      opacity: .9;
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-body-small-size);
+      line-height: var(--md-sys-typescale-body-small-line-height);
+      font-weight: var(--weight-regular);
+      letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+      color: var(--p-100);
+      width: min(100%, 312px);
+      overflow-wrap: anywhere;
+    }
+    @media (min-width: 600px) { .desc { width: min(100%, 376px); } }
+
+    .spacer { display: none; }
+    @media (min-width: 840px) { .spacer { display: block; } }
+  `;
+x([
+  y({
+    type: String,
+    attribute: "max-width",
+    reflect: !0,
+    converter: {
+      fromAttribute: (t) => {
+        if (t == null) return "1440px";
+        const e = t.trim();
+        return e === "" ? "1440px" : /^\d+$/.test(e) ? `${e}px` : e;
+      }
+    }
+  })
+], m.prototype, "maxWidth", 2);
+x([
+  y({ type: Array })
+], m.prototype, "sections", 2);
+x([
+  y({ type: String })
+], m.prototype, "description", 2);
+m = x([
+  L("scb-footer")
+], m);
+export {
+  m as ScbFooter
+};

package/scb-grid/scb-grid-item.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+
+/**
+  <scb-grid-item>
+  Styr enskilda celler i <scb-grid>.
+  - Span-attribut (reflectas som CSS-variabler) → läses av <scb-grid>
+  - Per-item justering: align/justify (align-self/justify-self)
+  - fit (width: fit-content)
+ */
+export declare class ScbGridItem extends LitElement {
+    #private;
+    colSpan?: number;
+    colSpanCompact?: number;
+    colSpanMedium?: number;
+    colSpanExpanded?: number;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'stretch';
+    fit: boolean;
+    static styles: import('lit').CSSResult;
+    protected firstUpdated(): void;
+    protected updated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-grid-item': ScbGridItem;
+    }
+}