scb-wc-test 0.1.1

package/scb-header/scb-header.js

@@ -0,0 +1,618 @@
+import { css as S, LitElement as M, html as c, nothing as u } from "lit";
+import { property as n, state as p, customElement as A } from "lit/decorators.js";
+import "../scb-grid/scb-grid-item.js";
+import "../scb-grid/scb-grid.js";
+import "../scb-link/scb-link.js";
+import "../scb-search/scb-search.js";
+import "../scb-tabs/scb-tabs.js";
+import "../scb-tabs/scb-secondary-tab.js";
+import "../scb-drawer/scb-drawer.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-button/scb-button.js";
+var k = Object.defineProperty, T = Object.getOwnPropertyDescriptor, i = (e, t, s, a) => {
+  for (var l = a > 1 ? void 0 : a ? T(t, s) : t, d = e.length - 1, o; d >= 0; d--)
+    (o = e[d]) && (l = (a ? o(t, s, l) : o(l)) || l);
+  return a && l && k(t, s, l), l;
+};
+const w = {
+  fromAttribute: (e) => e == null ? !0 : !/^(false|0|off|no)$/i.test(e),
+  toAttribute: (e) => String(!!e)
+};
+let r = class extends M {
+  constructor() {
+    super(...arguments), this.maxWidth = "1440px", this.logoText = "Statistikmyndigheten", this.logoHref = "/", this.banner = !1, this.tabs = [], this.activeTab = 0, this.utilityItems = [], this.showDrawer = !0, this.showSearch = !0, this.includeUtilityInDrawer = !1, this._drawerId = "main-drawer", this._paddingInline = "32px", this._drawerMounted = !1, this._drawerExpanded = !1, this._searchId = "header-search", this._slotTabs = [], this._slotUtils = [], this._slotMenu = [], this._measureScheduled = !1, this._scheduleMeasure = () => {
+      this._measureScheduled || (this._measureScheduled = !0, requestAnimationFrame(() => {
+        this._measureScheduled = !1, this._measure();
+      }));
+    }, this._onWindowResize = () => {
+      this._updatePadding(), this._scheduleMeasure();
+    }, this._onDrawerSelect = (e) => {
+      this.dispatchEvent(new CustomEvent("drawer-select", {
+        detail: e.detail,
+        bubbles: !0,
+        composed: !0
+      })), this._closeDrawerNow();
+    }, this._collapsed = !1, this._unlockAtWidth = 0, this._hideLogoText = !1, this._logoTextUnlockAt = 0, this._harvestPending = !1, this._harvest = () => {
+      const e = this._slotEl;
+      if (!e) return;
+      const t = e.assignedElements({ flatten: !0 }), s = [], a = [], l = [], d = (o) => ({
+        label: o.getAttribute("label") ?? "",
+        href: o.getAttribute("href") ?? void 0,
+        icon: o.getAttribute("icon") ?? void 0
+      });
+      for (const o of t) {
+        const h = o.tagName.toLowerCase();
+        if (h === "scb-header-tab") {
+          s.push({ label: o.getAttribute("label") ?? "", href: o.getAttribute("href") ?? "#" });
+          continue;
+        }
+        if (h === "scb-header-utility") {
+          a.push({
+            label: o.getAttribute("label") ?? "",
+            href: o.getAttribute("href") ?? "#",
+            target: o.getAttribute("target") ?? void 0
+          });
+          continue;
+        }
+        if (h === "scb-header-drawer-group") {
+          const b = {
+            label: o.getAttribute("label") ?? "",
+            icon: o.getAttribute("icon") ?? void 0,
+            children: []
+          };
+          o.querySelectorAll("scb-header-drawer-item").forEach((m) => b.children.push(d(m))), l.push(b);
+          continue;
+        }
+        h === "scb-header-drawer-item" && l.push(d(o));
+      }
+      this._slotTabs = s, this._slotUtils = a, this._slotMenu = l, queueMicrotask(() => {
+        this.updateComplete.then(() => {
+          this._applyActiveToTabs(), this._scheduleMeasure();
+        });
+      });
+    }, this._measure = () => {
+      var m, v, f;
+      const e = this._top, t = this._logoGroup;
+      if (!e || !t) return;
+      const s = window.innerWidth, a = e.clientWidth, l = this._overflows(this._util), d = this._overflows(this._tabsEl), o = s < this.BP_MD || l || d;
+      this._collapsed ? !o && a >= this._unlockAtWidth && this._setCollapsed(!1) : o && (this._unlockAtWidth = a + this._HYST, this._setCollapsed(!0));
+      let h = !1;
+      if (this.showSearch && s >= this.BP_SM && s < this.BP_MD && this._searchWrap) {
+        const _ = getComputedStyle(this._searchWrap), y = Math.max(
+          this._num(_.minWidth, this._tokenPx("--scb-header-search-min", 320)),
+          this._tokenPx("--scb-header-search-min", 320)
+        ), g = this._num(getComputedStyle(e).gap, this._tokenPx("--spacing-7", 24)), C = this.showDrawer && (s < this.BP_MD || this._collapsed) ? ((m = this._menuBtn) == null ? void 0 : m.getBoundingClientRect().width) || this._tokenPx("--icon-size-large", 48) : 0;
+        h = t.getBoundingClientRect().width + g + y + g + C + 8 > a + 0.5;
+      }
+      this._setHideSearch(h);
+      let b = !1;
+      if (this.showDrawer && (s < this.BP_MD || this._collapsed) && !this._visible(this._util) && !this._visible(this._searchWrap)) {
+        const _ = this._num(getComputedStyle(e).gap, this._tokenPx("--spacing-7", 24)), y = ((v = this._menuBtn) == null ? void 0 : v.getBoundingClientRect().width) || this._tokenPx("--icon-size-large", 48), g = (((f = this._logoGroup) == null ? void 0 : f.getBoundingClientRect().width) || 0) + _ + y;
+        this._hideLogoText ? b = !(a >= this._logoTextUnlockAt) : g > a + 0.5 && (b = !0, this._logoTextUnlockAt = a + this._HYST);
+      } else
+        b = !1, this._logoTextUnlockAt = 0;
+      this._setHideLogoText(b);
+    }, this._updatePadding = () => {
+      const e = window.innerWidth || 0;
+      e <= 360 ? this._paddingInline = "16px" : e < this.BP_SM ? this._paddingInline = "24px" : this._paddingInline = "32px";
+    }, this._onMenuClick = async (e) => {
+      e.preventDefault(), e.stopPropagation(), this.showDrawer && (this.dispatchEvent(new CustomEvent("menu-click", { bubbles: !0, composed: !0 })), await this._ensureDrawerMounted(), await r._nextFrame(), await r._nextFrame(), this._openDrawerNow());
+    }, this._onSearchClick = (e) => {
+      var a;
+      const t = this._searchEl;
+      if (t != null && t.submit && typeof t.submit == "function") {
+        t.submit();
+        return;
+      }
+      const s = (t == null ? void 0 : t.value) ?? void 0;
+      this.dispatchEvent(new CustomEvent("search-click", {
+        detail: { value: s },
+        bubbles: !0,
+        composed: !0
+      })), (a = t == null ? void 0 : t.focus) == null || a.call(t);
+    }, this._onTabsChange = (e) => {
+      var d, o, h;
+      const t = e, s = ((d = t == null ? void 0 : t.detail) == null ? void 0 : d.activeTabIndex) ?? ((o = e.target) == null ? void 0 : o.activeTabIndex) ?? 0;
+      this.activeTab = s;
+      const l = ((h = (this._slotTabs.length ? this._slotTabs : this.tabs)[s]) == null ? void 0 : h.href) ?? "";
+      this.dispatchEvent(new CustomEvent("tab-change", {
+        detail: { index: s, href: l },
+        bubbles: !0,
+        composed: !0
+      }));
+    };
+  }
+  /* Hysteresis för respons – läses som spacing-token */
+  get _HYST() {
+    return this._tokenPx("--spacing-11", 64);
+  }
+  get BP_SM() {
+    return this._tokenPx("--bp-sm", r.BP_SM_DEFAULT);
+  }
+  get BP_MD() {
+    return this._tokenPx("--bp-md", r.BP_MD_DEFAULT);
+  }
+  _scheduleHarvest() {
+    this._harvestPending || (this._harvestPending = !0, queueMicrotask(() => {
+      this._harvestPending = !1, this._harvest();
+    }));
+  }
+  /* Hjälp-getters för att nå element i renderRoot/Shadow DOM. */
+  get _slotEl() {
+    var e;
+    return ((e = this.shadowRoot) == null ? void 0 : e.querySelector("slot#data-slot")) ?? null;
+  }
+  get _top() {
+    return this.renderRoot.querySelector(".top-row");
+  }
+  get _util() {
+    return this.renderRoot.querySelector(".utility");
+  }
+  get _tabsEl() {
+    return this.renderRoot.querySelector("scb-tabs");
+  }
+  get _logoGroup() {
+    return this.renderRoot.querySelector(".logo-group");
+  }
+  get _searchWrap() {
+    return this.renderRoot.querySelector(".search");
+  }
+  get _menuBtn() {
+    return this.renderRoot.querySelector(".menu-trigger");
+  }
+  get _searchEl() {
+    return this.renderRoot.querySelector(`#${this._searchId}`);
+  }
+  /* Kopplar in MutationObserver för slot-innehållet. */
+  _attachSlotObservers() {
+    var t;
+    (t = this._slotMo) == null || t.disconnect();
+    const e = new MutationObserver((s) => {
+      this._scheduleHarvest();
+    });
+    this._slotMo = e, e.observe(this, {
+      subtree: !0,
+      childList: !0,
+      attributes: !0,
+      attributeFilter: ["label", "href", "icon", "target"]
+    });
+  }
+  /* Data-attribut för CSS (collapsed / hide-search / hide-logo-text). */
+  _setCollapsed(e) {
+    this._collapsed !== e && (this._collapsed = e, e ? this.setAttribute("data-collapsed", "") : this.removeAttribute("data-collapsed"));
+  }
+  _setHideSearch(e) {
+    e ? this.setAttribute("data-hide-search", "") : this.removeAttribute("data-hide-search");
+  }
+  _setHideLogoText(e) {
+    this._hideLogoText !== e && (this._hideLogoText = e, e ? this.setAttribute("data-hide-logo-text", "") : this.removeAttribute("data-hide-logo-text"));
+  }
+  /* Helpers: hämta numeriskt tokenvärde (px) */
+  _num(e, t) {
+    const s = Number.parseFloat(String(e ?? "").trim());
+    return Number.isFinite(s) ? s : t;
+  }
+  _tokenPx(e, t) {
+    const s = getComputedStyle(this);
+    return this._num(s.getPropertyValue(e), t);
+  }
+  _visible(e) {
+    return e ? getComputedStyle(e).display !== "none" : !1;
+  }
+  _overflows(e) {
+    return !e || !this._visible(e) ? !1 : e.scrollWidth > e.clientWidth + 1;
+  }
+  firstUpdated() {
+    this._updatePadding(), this.updateComplete.then(() => {
+      this._harvest(), this._attachSlotObservers();
+    });
+    const e = this._top;
+    e && (this._ro = new ResizeObserver(() => this._scheduleMeasure()), this._ro.observe(e)), window.addEventListener("resize", this._onWindowResize, { passive: !0 });
+    const t = this._menuBtn, s = () => this._ensureDrawerMounted();
+    t == null || t.addEventListener("pointerenter", s, { once: !0 }), t == null || t.addEventListener("focusin", s, { once: !0 }), t == null || t.addEventListener("touchstart", s, { once: !0, passive: !0 });
+  }
+  updated(e) {
+    e.has("searchMax") && this.style.setProperty("--scb-header-search-max", this.searchMax ?? "480px"), e.has("searchMin") && this.style.setProperty("--scb-header-search-min", this.searchMin ?? "320px"), (e.has("utilityItems") || e.has("tabs") || e.has("logoText") || e.has("activeTab") || e.has("_slotTabs") || e.has("_slotUtils") || e.has("_slotMenu") || e.has("showDrawer") || e.has("showSearch") || e.has("searchMax") || e.has("searchMin")) && this.updateComplete.then(() => {
+      this._scheduleMeasure(), this._applyActiveToTabs();
+    });
+  }
+  disconnectedCallback() {
+    var e, t;
+    (e = this._ro) == null || e.disconnect(), (t = this._slotMo) == null || t.disconnect(), window.removeEventListener("resize", this._onWindowResize), super.disconnectedCallback();
+  }
+  /* Säkerställ att <scb-drawer> finns i DOM innan vi öppnar. */
+  async _ensureDrawerMounted() {
+    this._drawerMounted || (this._drawerMounted = !0, await this.updateComplete);
+  }
+  /* Öppna/stäng drawer + aria-expanded (+ nya event) */
+  _openDrawerNow() {
+    var t, s;
+    const e = this.renderRoot.querySelector(`#${this._drawerId}`);
+    e && (e.open = !0, e.setAttribute("open", ""), (t = e.show) == null || t.call(e), (s = e.openDrawer) == null || s.call(e), this._drawerExpanded = !0, this._syncMenuBtnAria(), this.dispatchEvent(new CustomEvent("drawer-open", { bubbles: !0, composed: !0 })));
+  }
+  _closeDrawerNow() {
+    const e = this.renderRoot.querySelector(`#${this._drawerId}`);
+    e && (e.open = !1), this._drawerExpanded = !1, this._syncMenuBtnAria(), this.dispatchEvent(new CustomEvent("drawer-close", { bubbles: !0, composed: !0 }));
+  }
+  _syncMenuBtnAria() {
+    const e = this.renderRoot.querySelector(".menu-trigger");
+    e && e.setAttribute("aria-expanded", String(this._drawerExpanded));
+  }
+  /* Synca selected på scb-secondary-tab */
+  _applyActiveToTabs() {
+    const e = this._tabsEl;
+    if (!e) return;
+    e.activeTabIndex = this.activeTab, e.querySelectorAll("scb-secondary-tab").forEach((s, a) => {
+      s.selected = a === this.activeTab;
+    });
+  }
+  /* Rendera drawer-träd */
+  _renderDrawerNodes(e) {
+    return !e || e.length === 0 ? c`` : c`${e.map((t) => {
+      const s = Array.isArray(t.children) && t.children.length > 0;
+      return c`
+        <scb-drawer-item
+          label=${t.label}
+          ?selected=${!1}
+          leading-icon=${t.icon ?? ""}
+          item-href=${t.href ?? ""}
+        >
+          ${s ? c`
+            <scb-sub-drawer label=${t.label}>
+              ${t.children.map((a) => c`
+                <scb-drawer-item
+                  label=${a.label}
+                  item-href=${a.href ?? ""}
+                  leading-icon=${a.icon ?? ""}
+                ></scb-drawer-item>
+              `)}
+            </scb-sub-drawer>
+          ` : u}
+        </scb-drawer-item>
+      `;
+    })}`;
+  }
+  /* Sätt data-attribut för layoutjusteringar (saknar utility / saknar sök). */
+  _syncFlags(e, t) {
+    this.toggleAttribute("data-no-utility", e), this.toggleAttribute("data-no-search", t);
+  }
+  render() {
+    const e = this._slotTabs.length ? this._slotTabs : this.tabs, t = this._slotUtils.length ? this._slotUtils : this.utilityItems, s = this._slotMenu.length ? this._slotMenu : this.menuData ?? [];
+    return this._syncFlags(t.length === 0, !this.showSearch), c`
+      <!-- Slot för wrapper-barn (osynliga; fungerar som datakällor) -->
+      <slot id="data-slot" @slotchange=${() => {
+      this._harvest(), this._attachSlotObservers();
+    }} hidden></slot>
+
+      <!-- Banner-landmark är opt-in och omsluter hela headerblocket -->
+      <div
+        class="header-landmark"
+        role=${this.banner ? "banner" : u}
+        aria-label=${this.banner && this.bannerLabel ? this.bannerLabel : u}
+      >
+        <scb-grid cols-compact="4" cols-medium="8" cols-expanded="12" padding-inline=${this._paddingInline} max-width=${this.maxWidth} gap="0">
+          <scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
+            <div class="top-row">
+              <a class="logo-group" href=${this.logoHref} aria-label="Gå till startsidan">
+                ${this._renderLogo()} <span class="logo-text">${this.logoText}</span>
+              </a>
+
+              <div class="actions">
+                <nav class="utility" aria-label="Funktionslänkar">
+                  ${t.map((a) => c`<scb-link .href=${a.href} .target=${a.target ?? void 0}>${a.label}</scb-link>`)}
+                </nav>
+
+                ${this.showSearch ? c`
+                  <div class="search">
+                    <scb-search
+                      id=${this._searchId}
+                      size="compact"
+                      .supportingText=${this.searchPlaceholder ?? ""}
+                    ></scb-search>
+                    <scb-button
+                      variant="filled-tonal"
+                      label="Sök"
+                      @click=${this._onSearchClick}
+                    ></scb-button>
+                  </div>
+                ` : u}
+              </div>
+
+              ${this.showDrawer ? c`
+                <scb-icon-button
+                  class="menu-trigger"
+                  aria-label="Meny"
+                  icon="menu"
+                  variant="outlined"
+                  aria-controls=${this._drawerMounted ? this._drawerId : u}
+                  aria-haspopup="dialog"
+                  aria-expanded=${String(this._drawerExpanded)}
+                  data-drawer-toggle=${this._drawerId}
+                  title="Öppna meny"
+                  @click=${this._onMenuClick}
+                ></scb-icon-button>
+              ` : u}
+            </div>
+          </scb-grid-item>
+
+          <scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
+            <div class="tabs-inset">
+              <scb-tabs aria-label="Huvudnavigering" .activeTabIndex=${this.activeTab} @change=${this._onTabsChange}>
+                ${e.map((a, l) => c`<scb-secondary-tab ?selected=${l === this.activeTab}>${a.label}</scb-secondary-tab>`)}
+              </scb-tabs>
+            </div>
+            <div class="divider" role="presentation"></div>
+          </scb-grid-item>
+        </scb-grid>
+      </div>
+
+      ${this.showDrawer && this._drawerMounted ? c`
+        <scb-drawer
+          id=${this._drawerId}
+          .label=${this.drawerLabel ?? ""}
+          .subLabel=${this.drawerSubLabel ?? ""}
+          floating right overlay lock-scroll modal
+          @scb-drawer-select=${this._onDrawerSelect}
+        >
+          <div style="padding: var(--spacing-4, 12px);">
+            <scb-search size="compact" .supportingText=${this.drawerSearchPlaceholder ?? ""}></scb-search>
+          </div>
+
+          ${this.drawerSectionLabel ? c`<scb-drawer-section .label=${this.drawerSectionLabel}></scb-drawer-section>` : u}
+
+          ${this._renderDrawerNodes(s)}
+
+          ${this.includeUtilityInDrawer && ((t == null ? void 0 : t.length) ?? 0) > 0 ? c`
+            <scb-drawer-section label=''></scb-drawer-section>
+            ${t.map((a) => c`<scb-drawer-item label=${a.label} item-href=${a.href}></scb-drawer-item>`)}
+          ` : u}
+        </scb-drawer>
+      ` : u}
+    `;
+  }
+  /* SCB-logotypens SVG */
+  _renderLogo() {
+    return c`
+      <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_scb_header)">
+          <path fill="currentColor" 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" />
+          <path fill="currentColor" 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" />
+          <path fill="currentColor" 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" />
+        </g>
+        <defs><clipPath id="clip0_scb_header"><rect width="48" height="54" fill="white" /></clipPath></defs>
+      </svg>
+    `;
+  }
+};
+r._JSON_ARRAY = {
+  fromAttribute: (e) => {
+    if (e == null || e === "") return [];
+    try {
+      const t = JSON.parse(e);
+      return Array.isArray(t) ? t : [];
+    } catch {
+      return [];
+    }
+  },
+  toAttribute: (e) => e == null ? null : JSON.stringify(e)
+};
+r.BP_SM_DEFAULT = 600;
+r.BP_MD_DEFAULT = 840;
+r.styles = S`
+    :host {
+      display:block;
+      background:var(--md-sys-color-surface,#fff);
+      color:var(--md-sys-color-on-surface,#1b1b1f);
+      --scb-header-search-max: 380px;
+      --scb-header-search-min: 250px;
+
+      /* Overridebara logo-mått (knutna till tokens) */
+      --scb-header-logo-w: var(--icon-size-large, 40px);
+      --scb-header-logo-h: calc(var(--scb-header-logo-w) * 1.125);
+    }
+
+    .top-row { display:flex; align-items:center; gap:var(--spacing-7,24px); padding-block:var(--spacing-7,24px); min-width:0; }
+    .logo-group { display:inline-flex; align-items:center; gap:var(--spacing-5,16px); text-decoration:none; color:inherit; flex-shrink:0; min-width:0; }
+    .logo-group svg { width:var(--scb-header-logo-w); height:var(--scb-header-logo-h); display:block; color:var(--md-sys-color-on-surface); }
+    .logo-text{
+      font-family: var(--brand-font, Inter), sans-serif;
+      font-size: var(--md-sys-typescale-body-medium-size, 1rem);
+      line-height: var(--md-sys-typescale-body-medium-line-height, 1.5rem);
+      font-weight: var(--weight-regular, 400);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.009375rem);
+      color: var(--md-sys-color-on-surface, var(--p-20));
+      white-space: nowrap;
+    }
+    @media (max-width:360px){ .logo-text{ margin-right: calc(var(--spacing-9, 40px) * -1); } }
+
+    .actions{ display:flex; align-items:center; gap:var(--spacing-7,24px); margin-left:auto; width:100%; justify-content:flex-end; min-width:0; }
+
+    .utility{ display:none; flex-wrap:nowrap; align-items:center; gap:var(--spacing-5,16px); min-width:0; }
+    .utility scb-link::part(anchor){
+      /* typografi och färg helt via tokens */
+      font-family: var(--md-sys-typescale-body-medium-font, var(--brand-font)), sans-serif;
+      font-size: var(--md-sys-typescale-body-medium-size);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
+      font-weight: var(--md-sys-typescale-body-medium-weight);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+      color: var(--md-sys-color-primary);
+      text-decoration: underline;
+      text-underline-offset: 3px;
+      text-decoration-thickness: 2px;
+      white-space: nowrap;
+    }
+    @media (min-width:840px){ .utility{ display:flex; } }
+    :host([data-collapsed]) .utility{ display:none !important; }
+
+    .menu-trigger{ display:none; }
+    @media (max-width:839.98px){ .menu-trigger{ display:inline-flex; } }
+    :host([data-collapsed]) .menu-trigger{ display:inline-flex; }
+
+    .search{
+      display:none;
+      align-items:stretch;
+      gap: var(--spacing-3, 8px);
+      flex: 0 1 var(--scb-header-search-max);
+      max-width: var(--scb-header-search-max);
+      min-width: var(--scb-header-search-min);
+    }
+    
+    .search scb-search{ flex:1 1 auto; width:auto; }
+    .search scb-button{
+      flex:0 0 auto;
+      --scb-button-block-size: var(--scb-search-height);
+    }
+
+    scb-search{ width:100%; }
+    @media (min-width:600px){ .search{ display:flex; } }
+    @media (min-width:600px) and (max-width:839.98px){ :host([data-hide-search]) .search{ display:none !important; } }
+
+    :host([data-no-utility]) .actions{ gap:var(--spacing-5,16px); }
+    :host([data-no-utility]) .search{
+      flex: 1 1 var(--scb-header-search-max);
+      max-width: var(--scb-header-search-max);
+      min-width: var(--scb-header-search-min);
+    }
+
+    .tabs-inset{ display:inline-block; width:fit-content; max-width:100%; }
+    @media (max-width:839.98px){ .tabs-inset{ display:none; } }
+    scb-tabs, scb-tabs::part(divider){
+      --md-tabs-divider-color:transparent; --md-primary-tab-divider-color:transparent; --md-secondary-tab-divider-color:transparent;
+      border-bottom:0; box-shadow:none;
+    }
+    scb-tabs::part(divider){ display:none; height:0; }
+    scb-tabs{ margin-bottom:0; }
+    .divider{ border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant,#e0e0e0); }
+
+    scb-tabs{
+      --md-secondary-tab-active-indicator-color:var(--md-sys-color-primary);
+      --md-secondary-tab-active-indicator-height:3px;
+      --md-secondary-tab-label-text-color:var(--md-sys-color-on-surface);
+      --md-secondary-tab-active-label-text-color:var(--md-sys-color-primary);
+      --md-secondary-tab-text-color:var(--md-sys-color-on-surface);
+      --md-secondary-tab-active-text-color:var(--md-sys-color-primary);
+      --md-secondary-tab-hover-label-text-color: var(--md-sys-color-primary);
+      --md-secondary-tab-pressed-label-text-color: var(--md-sys-color-primary);
+      --md-secondary-tab-focus-label-text-color: var(--md-sys-color-primary);
+      --md-secondary-tab-active-hover-label-text-color: var(--md-sys-color-primary);
+      --md-secondary-tab-active-pressed-label-text-color: var(--md-sys-color-primary);
+      --md-secondary-tab-active-focus-label-text-color: var(--md-sys-color-primary);
+      --md-secondary-tab-state-layer-color: transparent;
+      --md-secondary-tab-active-state-layer-color: transparent;
+    }
+
+@media (prefers-color-scheme: dark) {
+  .tabs-inset scb-tabs {
+    --nv-20: transparent;
+    --md-primary-tab-container-color: transparent;
+    --md-secondary-tab-container-color: transparent;
+    background-color: transparent !important;
+  }
+  .tabs-inset scb-tabs::part(container),
+  .tabs-inset scb-tabs::part(base),
+  .tabs-inset scb-tabs::part(tabbar) {
+    background: transparent !important;
+  }
+}
+
+:host([data-hide-logo-text]) .logo-text {
+  display: none;
+}
+  `;
+r._nextFrame = () => new Promise((e) => requestAnimationFrame(() => e()));
+i([
+  n({ type: String, attribute: "max-width" })
+], r.prototype, "maxWidth", 2);
+i([
+  n({ type: String, attribute: "logo-text" })
+], r.prototype, "logoText", 2);
+i([
+  n({ type: String, attribute: "logo-href" })
+], r.prototype, "logoHref", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "banner", 2);
+i([
+  n({ type: String, attribute: "banner-label" })
+], r.prototype, "bannerLabel", 2);
+i([
+  n({ attribute: "tabs", converter: r._JSON_ARRAY })
+], r.prototype, "tabs", 2);
+i([
+  n({ type: Number, attribute: "active-tab" })
+], r.prototype, "activeTab", 2);
+i([
+  n({ attribute: "utility-items", converter: r._JSON_ARRAY })
+], r.prototype, "utilityItems", 2);
+i([
+  n({ type: String, attribute: "search-placeholder" })
+], r.prototype, "searchPlaceholder", 2);
+i([
+  n({ type: String, attribute: "drawer-label" })
+], r.prototype, "drawerLabel", 2);
+i([
+  n({ type: String, attribute: "drawer-sub-label" })
+], r.prototype, "drawerSubLabel", 2);
+i([
+  n({ type: String, attribute: "drawer-section-label" })
+], r.prototype, "drawerSectionLabel", 2);
+i([
+  n({ type: String, attribute: "drawer-search-placeholder" })
+], r.prototype, "drawerSearchPlaceholder", 2);
+i([
+  n({ attribute: "menu-data", converter: r._JSON_ARRAY })
+], r.prototype, "menuData", 2);
+i([
+  n({ attribute: "show-drawer", reflect: !0, converter: w })
+], r.prototype, "showDrawer", 2);
+i([
+  n({ attribute: "show-search", reflect: !0, converter: w })
+], r.prototype, "showSearch", 2);
+i([
+  n({ attribute: "include-utility-in-drawer", reflect: !0, converter: w })
+], r.prototype, "includeUtilityInDrawer", 2);
+i([
+  n({ type: String, attribute: "search-max" })
+], r.prototype, "searchMax", 2);
+i([
+  n({ type: String, attribute: "search-min" })
+], r.prototype, "searchMin", 2);
+i([
+  p()
+], r.prototype, "_drawerId", 2);
+i([
+  p()
+], r.prototype, "_paddingInline", 2);
+i([
+  p()
+], r.prototype, "_drawerMounted", 2);
+i([
+  p()
+], r.prototype, "_drawerExpanded", 2);
+i([
+  p()
+], r.prototype, "_searchId", 2);
+i([
+  p()
+], r.prototype, "_slotTabs", 2);
+i([
+  p()
+], r.prototype, "_slotUtils", 2);
+i([
+  p()
+], r.prototype, "_slotMenu", 2);
+i([
+  p()
+], r.prototype, "_collapsed", 2);
+i([
+  p()
+], r.prototype, "_hideLogoText", 2);
+r = i([
+  A("scb-header")
+], r);
+export {
+  r as ScbHeader
+};

package/scb-icon-button/scb-icon-button.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
+
+export declare class ScbIconButton extends LitElement {
+    /** Accessible name för knappen; om inte satt fallbackar vi till `icon` */
+    ariaLabel: string;
+    /** Variant: "filled" | "outlined" | "filled-tonal" | "standard" */
+    variant: 'filled' | 'outlined' | 'filled-tonal' | 'standard';
+    /** Ikon när inte i toggle-läge */
+    icon: string;
+    /** Om true används toggle-läge */
+    toggle: boolean;
+    /** Ikon när toggle är off */
+    toggleofficon: string;
+    /** Ikon när toggle är on */
+    toggleonicon: string;
+    /** Inaktiverar knappen */
+    disabled: boolean;
+    /** Error-state */
+    error: boolean;
+    private __loadedVariants;
+    private __iconLoaded;
+    private __lastBtn?;
+    private __onChange;
+    private __attachChangeListener;
+    protected firstUpdated(): Promise<void>;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private __ensureDepsLoaded;
+    static styles: import('lit').CSSResult;
+    render(): TemplateResult;
+}