scb-wc 0.1.1 → 0.1.2

package/blazor/scb-blazor-bridge.js

@@ -0,0 +1,2517 @@
+/* Kopplar ihop SCB-webbkomponenter med Blazor genom att normalisera events.
+   - Lyssnar på komponenternas egna events i DOM.
+   - Hittar berörd komponent via composedPath eller closest.
+   - Speglar relevanta värden från event.detail till motsvarande egenskap på elementet.
+   - Skickar ett Blazor-vänligt event name som går att använda med @on… i Razor.
+   - Använder MutationObserver för att skicka *change-events när "viktiga" attribut ändras.
+*/
+(function () {
+  'use strict';
+
+  /* Hjälpfunktion som letar upp närmaste element i eventets composedPath
+     som matchar en selektor (eller taggnamn). */
+  function closestInPath(selector, ev) {
+    if (ev.composedPath) {
+      const path = ev.composedPath();
+      for (const n of path) {
+        if (
+          n instanceof Element &&
+          (n.matches(selector) ||
+            (n.tagName && n.tagName.toLowerCase() === selector))
+        ) {
+          return n;
+        }
+      }
+    }
+    const t = ev.target;
+    return t instanceof Element ? t.closest(selector) : null;
+  }
+
+  /* Hjälpfunktion som skapar ett nytt event på elementet.
+     Om källan är ett CustomEvent så behålls detail i det nya eventet. */
+  function emit(el, name, srcEv) {
+    if (srcEv && typeof srcEv === 'object' && 'detail' in srcEv) {
+      el.dispatchEvent(
+        new CustomEvent(name, {
+          bubbles: true,
+          composed: true,
+          detail: srcEv.detail,
+        }),
+      );
+    } else {
+      el.dispatchEvent(new Event(name, { bubbles: true, composed: true }));
+    }
+  }
+
+  /* Mirror functions för scb-header-events.
+     Håller headerns attribut i synk med interna properties och inkommande events. */
+  function mirrorHeaderTab(el, ev) {
+    const i =
+      (ev && ev.detail && (ev.detail.index ?? ev.detail.value)) ?? 0;
+    try {
+      el.activeTab = i;
+    } catch (_) {}
+    el.setAttribute('active-tab', String(i));
+  }
+
+  // Markerar om headerns drawer är öppen eller stängd utan att påverka konfigurationen
+  function mirrorHeaderDrawer(el, isOpen) {
+    if (isOpen) el.setAttribute('drawer-open', '');
+    else el.removeAttribute('drawer-open');
+  }
+
+  function mirrorHeaderSearch(el, ev) {
+    const v = (ev && ev.detail && (ev.detail.value ?? ev.detail.text)) ?? '';
+    try {
+      el.searchText = v;
+    } catch (_) {}
+    if (!v) el.removeAttribute('search-text');
+    else el.setAttribute('search-text', String(v));
+  }
+
+  /* Regler som beskriver hur komponenternas egna events ska översättas
+     till enklare, Blazor-vänliga events (och ibland speglas till properties). */
+  const RULES = [
+    // scb-header med mirror fucntions som uppdaterar attribut och state
+    {
+      sel: 'scb-header',
+      from: 'tab-change',
+      to: 'tabchange',
+      mirror: mirrorHeaderTab,
+    },
+    {
+      sel: 'scb-header',
+      from: 'drawer-open',
+      to: 'draweropen',
+      mirror: (el) => mirrorHeaderDrawer(el, true),
+    },
+    {
+      sel: 'scb-header',
+      from: 'drawer-close',
+      to: 'draweropen',
+      mirror: (el) => mirrorHeaderDrawer(el, false),
+    },
+    { sel: 'scb-header', from: 'drawer-select', to: 'select' },
+    { sel: 'scb-header', from: 'menu-click', to: 'menuclick' },
+    {
+      sel: 'scb-header',
+      from: 'search-input',
+      to: 'search',
+      mirror: mirrorHeaderSearch,
+    },
+    {
+      sel: 'scb-header',
+      from: 'search-change',
+      to: 'search',
+      mirror: mirrorHeaderSearch,
+    },
+    {
+      sel: 'scb-header',
+      from: 'search-text-change',
+      to: 'search',
+      mirror: mirrorHeaderSearch,
+    },
+    {
+      sel: 'scb-header',
+      from: 'search-click',
+      to: 'search',
+      mirror: mirrorHeaderSearch,
+    },
+
+    // scb-accordion-item
+    // Lyssnar på open-changed, uppdaterar egenskapen open och skickar openchange
+    {
+      sel: 'scb-accordion-item',
+      from: 'open-changed',
+      to: 'openchange',
+      prop: 'open',
+    },
+
+    // scb-app-bar
+    {
+      sel: 'scb-app-bar',
+      from: 'title-changed',
+      to: 'titlechange',
+      prop: 'title',
+    },
+    {
+      sel: 'scb-app-bar',
+      from: 'position-changed',
+      to: 'positionchange',
+      prop: 'position',
+    },
+    { sel: 'scb-app-bar', from: 'type-changed', to: 'typechange' },
+    {
+      sel: 'scb-app-bar',
+      from: 'search-supporting-text-changed',
+      to: 'searchsupportingtextchange',
+    },
+
+    // scb-breadcrumb
+    {
+      sel: 'scb-breadcrumb',
+      from: 'show-all-changed',
+      to: 'showallchange',
+      prop: 'showAll',
+    },
+    {
+      sel: 'scb-breadcrumb-item',
+      from: 'current-changed',
+      to: 'currentchange',
+      prop: 'isCurrent',
+    },
+
+    // scb-button (click mappas inte här, Blazor kan använda @onclick direkt)
+    {
+      sel: 'scb-button',
+      from: 'variant-changed',
+      to: 'variantchange',
+      prop: 'variant',
+    },
+    {
+      sel: 'scb-button',
+      from: 'label-changed',
+      to: 'labelchange',
+      prop: 'label',
+    },
+    {
+      sel: 'scb-button',
+      from: 'disabled-changed',
+      to: 'disabledchange',
+      prop: 'disabled',
+    },
+
+    // scb-calendar-card
+    {
+      sel: 'scb-calendar-card',
+      from: 'title-changed',
+      to: 'titlechange',
+      prop: 'title',
+    },
+    {
+      sel: 'scb-calendar-card',
+      from: 'subtitle-changed',
+      to: 'subtitlechange',
+      prop: 'subtitle',
+    },
+    {
+      sel: 'scb-calendar-card',
+      from: 'show-media-changed',
+      to: 'showmediachange',
+      prop: 'showMedia',
+    },
+    {
+      sel: 'scb-calendar-card',
+      from: 'media-width-changed',
+      to: 'mediawidthchange',
+      prop: 'mediaWidth',
+    },
+    {
+      sel: 'scb-calendar-card',
+      from: 'media-height-changed',
+      to: 'mediaheightchange',
+      prop: 'mediaHeight',
+    },
+
+    // scb-card
+    {
+      sel: 'scb-card',
+      from: 'variant-changed',
+      to: 'variantchange',
+      prop: 'variant',
+    },
+    {
+      sel: 'scb-card',
+      from: 'direction-changed',
+      to: 'directionchange',
+      prop: 'direction',
+    },
+    {
+      sel: 'scb-card',
+      from: 'title-changed',
+      to: 'titlechange',
+      prop: 'title',
+    },
+    {
+      sel: 'scb-card',
+      from: 'subtitle-changed',
+      to: 'subtitlechange',
+      prop: 'subtitle',
+    },
+    {
+      sel: 'scb-card',
+      from: 'show-media-changed',
+      to: 'showmediachange',
+      prop: 'showMedia',
+    },
+    {
+      sel: 'scb-card',
+      from: 'media-width-changed',
+      to: 'mediawidthchange',
+      prop: 'mediaWidth',
+    },
+    {
+      sel: 'scb-card',
+      from: 'media-height-changed',
+      to: 'mediaheightchange',
+      prop: 'mediaHeight',
+    },
+
+    // scb-chip
+    { sel: 'scb-chip', from: 'remove', to: 'remove' },
+    {
+      sel: 'scb-chip',
+      from: 'selected-changed',
+      to: 'selectedchange',
+      prop: 'selected',
+    },
+    {
+      sel: 'scb-chip',
+      from: 'variant-changed',
+      to: 'variantchange',
+      prop: 'variant',
+    },
+    {
+      sel: 'scb-chip',
+      from: 'label-changed',
+      to: 'labelchange',
+      prop: 'label',
+    },
+    {
+      sel: 'scb-chip',
+      from: 'disabled-changed',
+      to: 'disabledchange',
+      prop: 'disabled',
+    },
+    {
+      sel: 'scb-chip',
+      from: 'elevated-changed',
+      to: 'elevatedchange',
+      prop: 'elevated',
+    },
+    {
+      sel: 'scb-chip',
+      from: 'icon-changed',
+      to: 'iconchange',
+      prop: 'icon',
+    },
+
+    // scb-checkbox
+    {
+      sel: 'scb-checkbox',
+      from: 'checked-changed',
+      to: 'checkedchange',
+      prop: 'checked',
+    },
+    {
+      sel: 'scb-checkbox',
+      from: 'disabled-changed',
+      to: 'disabledchange',
+      prop: 'disabled',
+    },
+    {
+      sel: 'scb-checkbox',
+      from: 'indeterminate-changed',
+      to: 'indeterminatechange',
+      prop: 'indeterminate',
+    },
+
+    // scb-checkbox-group
+    {
+      sel: 'scb-checkbox-group',
+      from: 'orientation-changed',
+      to: 'orientationchange',
+      prop: 'orientation',
+    },
+    {
+      sel: 'scb-checkbox-group',
+      from: 'disabled-changed',
+      to: 'disabledchange',
+      prop: 'disabled',
+    },
+    {
+      sel: 'scb-checkbox-group',
+      from: 'spacing-changed',
+      to: 'spacingchange',
+      prop: 'spacing',
+    },
+
+    // scb-dialog (actions mappas rakt vidare)
+    { sel: 'scb-dialog', from: 'ok', to: 'ok' },
+    { sel: 'scb-dialog', from: 'cancel', to: 'cancel' },
+    { sel: 'scb-dialog', from: 'confirm', to: 'confirm' },
+    { sel: 'scb-dialog', from: 'deny', to: 'deny' },
+    { sel: 'scb-dialog', from: 'reset', to: 'reset' },
+    { sel: 'scb-dialog', from: 'submit', to: 'submit' },
+    { sel: 'scb-dialog', from: 'esc', to: 'esc' },
+    { sel: 'scb-dialog', from: 'scrim', to: 'scrim' },
+
+    // scb-drawer
+    {
+      sel: 'scb-drawer',
+      from: 'scb-drawer-opened',
+      to: 'openchange',
+      prop: 'open',
+    },
+    {
+      sel: 'scb-drawer',
+      from: 'scb-drawer-closed',
+      to: 'openchange',
+      prop: 'open',
+    },
+
+    // scb-drawer-item
+    {
+      sel: 'scb-drawer-item',
+      from: 'scb-drawer-expand',
+      to: 'expandedchange',
+    },
+    { sel: 'scb-drawer-item', from: 'scb-drawer-select', to: 'select' },
+
+    // scb-fact-card
+    {
+      sel: 'scb-fact-card',
+      from: 'open',
+      to: 'openchange',
+      prop: 'open',
+    },
+    {
+      sel: 'scb-fact-card',
+      from: 'close',
+      to: 'openchange',
+      prop: 'open',
+    },
+
+    // scb-fact-card-content
+    {
+      sel: 'scb-fact-card-content',
+      from: 'label-changed',
+      to: 'labelchange',
+      prop: 'label',
+    },
+    {
+      sel: 'scb-fact-card-content',
+      from: 'sub-label-changed',
+      to: 'sublabelchange',
+      prop: 'subLabel',
+    },
+    {
+      sel: 'scb-fact-card-content',
+      from: 'supporting-text-changed',
+      to: 'supportingtextchange',
+      prop: 'supportingText',
+    },
+
+    // scb-horizontal-scroller
+    {
+      sel: 'scb-horizontal-scroller',
+      from: 'scb-scroll',
+      to: 'scroll',
+      prop: 'scrollLeft',
+    },
+    {
+      sel: 'scb-horizontal-scroller',
+      from: 'scb-scroll-start',
+      to: 'scrollstart',
+      prop: 'scrollLeft',
+    },
+    {
+      sel: 'scb-horizontal-scroller',
+      from: 'scb-scroll-end',
+      to: 'scrollend',
+      prop: 'scrollLeft',
+    },
+    {
+      sel: 'scb-horizontal-scroller',
+      from: 'scb-scroll-right',
+      to: 'scrollright',
+      prop: 'scrollLeft',
+    },
+    {
+      sel: 'scb-horizontal-scroller',
+      from: 'scb-scroll-left',
+      to: 'scrollleft',
+      prop: 'scrollLeft',
+    },
+
+    // scb-icon-button
+    {
+      sel: 'scb-icon-button',
+      from: 'change',
+      to: 'selectedchange',
+      prop: 'selected',
+    },
+    {
+      sel: 'scb-icon-button',
+      from: 'toggle-changed',
+      to: 'togglechange',
+      prop: 'toggle',
+    },
+    {
+      sel: 'scb-icon-button',
+      from: 'icon-changed',
+      to: 'iconchange',
+      prop: 'icon',
+    },
+    {
+      sel: 'scb-icon-button',
+      from: 'disabled-changed',
+      to: 'disabledchange',
+      prop: 'disabled',
+    },
+    {
+      sel: 'scb-icon-button',
+      from: 'tooltip-changed',
+      to: 'tooltipchange',
+      prop: 'tooltip',
+    },
+
+    // scb-menu
+    { sel: 'scb-menu', from: 'open', to: 'openchange', prop: 'open' },
+    { sel: 'scb-menu', from: 'close', to: 'openchange', prop: 'open' },
+    { sel: 'scb-menu', from: 'toggle', to: 'openchange', prop: 'open' },
+
+    // scb-search (fristående search-komponent, inte headern)
+    {
+      sel: 'scb-search',
+      from: 'scb-search-input',
+      to: 'valuechange',
+      prop: 'value',
+    },
+    {
+      sel: 'scb-search',
+      from: 'scb-search-submit',
+      to: 'search',
+      prop: 'value',
+    },
+    {
+      sel: 'scb-search',
+      from: 'scb-search-clear',
+      to: 'valuechange',
+      prop: 'value',
+    },
+
+    // scb-radio-group
+    { sel: 'scb-radio-group', from: 'scb-change', to: 'change' },
+
+    // scb-segmented-button
+    {
+      sel: 'scb-segmented-button',
+      from: 'change',
+      to: 'valuechange',
+      prop: 'value',
+    },
+    {
+      sel: 'scb-segmented-button',
+      from: 'change',
+      to: 'valueschange',
+      prop: 'values',
+    },
+
+    // scb-snackbar, hanterar öppna/stäng via egna events
+    {
+      sel: 'scb-snackbar',
+      from: 'snackbar-open',
+      to: 'openchange',
+      mirror: (el) => {
+        try {
+          el.open = true;
+        } catch (_) {}
+        el.setAttribute('open', '');
+      },
+    },
+    {
+      sel: 'scb-snackbar',
+      from: 'snackbar-close',
+      to: 'openchange',
+      mirror: (el) => {
+        try {
+          el.open = false;
+        } catch (_) {}
+        el.removeAttribute('open');
+      },
+    },
+    { sel: 'scb-snackbar', from: 'snackbar-action', to: 'action' },
+
+    // scb-notification-card, liknande hantering som snackbar
+    {
+      sel: 'scb-notification-card',
+      from: 'notification-open',
+      to: 'openchange',
+      mirror: (el) => {
+        try {
+          el.open = true;
+        } catch (_) {}
+        el.setAttribute('open', '');
+      },
+    },
+    {
+      sel: 'scb-notification-card',
+      from: 'notification-close',
+      to: 'openchange',
+      mirror: (el) => {
+        try {
+          el.open = false;
+        } catch (_) {}
+        el.removeAttribute('open');
+      },
+    },
+    {
+      sel: 'scb-notification-card',
+      from: 'close',
+      to: 'openchange',
+      mirror: (el) => {
+        try {
+          el.open = false;
+        } catch (_) {}
+        el.removeAttribute('open');
+      },
+    },
+
+    // scb-switch
+    {
+      sel: 'scb-switch',
+      from: 'change',
+      to: 'selectedchange',
+      prop: 'selected',
+    },
+
+    // scb-tabs
+    {
+      sel: 'scb-tabs',
+      from: 'change',
+      to: 'tabschange',
+      prop: 'activeTabIndex',
+    },
+
+    // scb-textfield
+    {
+      sel: 'scb-textfield',
+      from: 'onValueChanged',
+      to: 'valuechange',
+      prop: 'value',
+    },
+    {
+      sel: 'scb-textfield',
+      from: 'input',
+      to: 'input',
+      prop: 'value',
+    },
+    {
+      sel: 'scb-textfield',
+      from: 'change',
+      to: 'change',
+      prop: 'value',
+    },
+    { sel: 'scb-textfield', from: 'select', to: 'select' },
+
+    // scb-toc-item
+    {
+      sel: 'scb-toc-item',
+      from: 'expanded-changed',
+      to: 'expandedchange',
+      prop: 'expanded',
+    },
+
+    // scb-pagination
+    { sel: 'scb-pagination', from: 'page-change', to: 'pagechange' },
+
+    // scb-stepper (stegbyte i steppern)
+    {
+      sel: 'scb-stepper',
+      from: 'scb-step-change',
+      to: 'stepchange',
+    },
+  ];
+
+  /* Indexering av regler per source event för snabbare lookup vid dispatch. */
+  const bySource = new Map();
+  for (const r of RULES) {
+    if (!bySource.has(r.from)) bySource.set(r.from, []);
+    bySource.get(r.from).push(r);
+  }
+
+  /* Registrerar en global listener per source event.
+     Varje listener hittar relevant komponent och triggar rätt normaliserat event. */
+  bySource.forEach((rules, fromEvent) => {
+    document.addEventListener(
+      fromEvent,
+      (ev) => {
+        for (const rule of rules) {
+          const el = closestInPath(rule.sel, ev);
+          if (!el) continue;
+
+          // Uppdatera elementets state om en mirror function finns
+          if (rule.mirror) {
+            try {
+              rule.mirror(el, ev);
+            } catch (_) {}
+          } else {
+            const detail = ev.detail;
+            if (
+              rule.prop &&
+              detail &&
+              Object.prototype.hasOwnProperty.call(detail, rule.prop)
+            ) {
+              try {
+                el[rule.prop] = detail[rule.prop];
+              } catch (_) {}
+            }
+          }
+
+          // Skicka endast vidare om namn faktiskt ändras
+          if (rule.from !== rule.to) {
+            emit(el, rule.to, ev);
+          }
+        }
+      },
+      { capture: true },
+    );
+  });
+
+  /* MutationObserver som lyssnar på attributförändringar
+     och skickar motsvarande *change-event när något viktigt ändras. */
+  const ATTR_RULES = [
+    { sel: 'scb-drawer', attr: 'open', to: 'openchange' },
+    { sel: 'scb-fact-card', attr: 'open', to: 'openchange' },
+    // scb-accordion-item: emit openchange när attributet open ändras
+    { sel: 'scb-accordion-item', attr: 'open', to: 'openchange' },
+    { sel: 'scb-icon-button', attr: 'selected', to: 'selectedchange' },
+    { sel: 'scb-checkbox', attr: 'checked', to: 'checkedchange' },
+    { sel: 'scb-menu', attr: 'open', to: 'openchange' },
+    { sel: 'scb-sub-menu', attr: 'open', to: 'openchange' },
+    { sel: 'scb-chip', attr: 'selected', to: 'selectedchange' },
+    { sel: 'scb-notification-card', attr: 'open', to: 'openchange' },
+
+    // scb-breadcrumb attribut som ska trigga state-refresh
+    { sel: 'scb-breadcrumb', attr: 'show-all', to: 'showallchange' },
+    { sel: 'scb-breadcrumb-item', attr: 'is-current', to: 'currentchange' },
+    { sel: 'scb-breadcrumb-item', attr: 'current', to: 'currentchange' },
+
+    // scb-calendar-card attribut som ska trigga state-refresh
+    { sel: 'scb-calendar-card', attr: 'title', to: 'titlechange' },
+    { sel: 'scb-calendar-card', attr: 'subtitle', to: 'subtitlechange' },
+    {
+      sel: 'scb-calendar-card',
+      attr: 'supporting-text',
+      to: 'supportingtextchange',
+    },
+    { sel: 'scb-calendar-card', attr: 'variant', to: 'variantchange' },
+    { sel: 'scb-calendar-card', attr: 'show-media', to: 'showmediachange' },
+
+    // scb-keyfigure-card attribut som ska trigga state-refresh
+    { sel: 'scb-keyfigure-card', attr: 'keyfigure', to: 'keyfigurechange' },
+    { sel: 'scb-keyfigure-card', attr: 'subtitle', to: 'subtitlechange' },
+    {
+      sel: 'scb-keyfigure-card',
+      attr: 'supporting-text',
+      to: 'supportingtextchange',
+    },
+    {
+      sel: 'scb-keyfigure-card',
+      attr: 'card-href',
+      to: 'cardhrefchange',
+    },
+    { sel: 'scb-keyfigure-card', attr: 'unit', to: 'unitchange' },
+
+    // scb-radio-button
+    { sel: 'scb-radio-button', attr: 'checked', to: 'checkedchange' },
+    { sel: 'scb-radio-button', attr: 'disabled', to: 'disabledchange' },
+    {
+      sel: 'scb-radio-button',
+      attr: 'aria-disabled',
+      to: 'ariadisabledchange',
+    },
+
+    // scb-radio-group
+    { sel: 'scb-radio-group', attr: 'disabled', to: 'disabledchange' },
+    {
+      sel: 'scb-radio-group',
+      attr: 'orientation',
+      to: 'orientationchange',
+    },
+    { sel: 'scb-radio-group', attr: 'spacing', to: 'spacingchange' },
+    { sel: 'scb-radio-group', attr: 'aria-label', to: 'arialabelchange' },
+    { sel: 'scb-radio-group', attr: 'name', to: 'namechange' },
+    { sel: 'scb-radio-group', attr: 'role', to: 'rolechange' },
+    { sel: 'scb-radio-group', attr: 'value', to: 'valuechange' },
+    { sel: 'scb-radio-group', attr: 'dir', to: 'dirchange' },
+    { sel: 'scb-radio-group', attr: 'style', to: 'stylechange' },
+    { sel: 'scb-radio-group', attr: 'class', to: 'classchange' },
+    { sel: 'scb-radio-group', attr: 'id', to: 'idchange' },
+    { sel: 'scb-radio-group', attr: 'hidden', to: 'hiddenchange' },
+    { sel: 'scb-radio-group', attr: 'tabindex', to: 'tabindexchange' },
+    { sel: 'scb-radio-group', attr: 'title', to: 'titlechange' },
+    { sel: 'scb-radio-group', attr: 'lang', to: 'langchange' },
+    { sel: 'scb-radio-group', attr: 'data-*', to: 'datachange' },
+    { sel: 'scb-radio-group', attr: 'draggable', to: 'draggablechange' },
+    {
+      sel: 'scb-radio-group',
+      attr: 'spellcheck',
+      to: 'spellcheckchange',
+    },
+    {
+      sel: 'scb-radio-group',
+      attr: 'contenteditable',
+      to: 'contenteditablechange',
+    },
+
+    { sel: 'scb-snackbar', attr: 'open', to: 'openchange' },
+
+    // scb-status-pill
+    { sel: 'scb-status-pill', attr: 'status', to: 'statuschange' },
+    { sel: 'scb-status-pill', attr: 'label', to: 'labelchange' },
+    { sel: 'scb-status-pill', attr: 'show-icon', to: 'showiconchange' },
+
+    { sel: 'scb-switch', attr: 'selected', to: 'selectedchange' },
+    { sel: 'scb-switch', attr: 'disabled', to: 'disabledchange' },
+    { sel: 'scb-switch', attr: 'icons', to: 'iconschange' },
+    { sel: 'scb-switch', attr: 'full-width', to: 'fullwidthchange' },
+    { sel: 'scb-switch', attr: 'label', to: 'labelchange' },
+    { sel: 'scb-switch', attr: 'aria-label', to: 'arialabelchange' },
+    { sel: 'scb-tabs', attr: 'aria-label', to: 'arialabelchange' },
+    { sel: 'scb-primary-tab', attr: 'icon', to: 'iconchange' },
+    { sel: 'scb-primary-tab', attr: 'icon-only', to: 'icononlychange' },
+    { sel: 'scb-primary-tab', attr: 'inline-icon', to: 'inlineiconchange' },
+    { sel: 'scb-primary-tab', attr: 'aria-label', to: 'arialabelchange' },
+    { sel: 'scb-primary-tab', attr: 'active', to: 'activechange' },
+    { sel: 'scb-secondary-tab', attr: 'icon', to: 'iconchange' },
+    { sel: 'scb-secondary-tab', attr: 'icon-only', to: 'icononlychange' },
+    { sel: 'scb-secondary-tab', attr: 'aria-label', to: 'arialabelchange' },
+    { sel: 'scb-secondary-tab', attr: 'active', to: 'activechange' },
+    { sel: 'scb-textfield', attr: 'value', to: 'valuechange' },
+    { sel: 'scb-textfield', attr: 'label', to: 'labelchange' },
+    {
+      sel: 'scb-textfield',
+      attr: 'supporting-text',
+      to: 'supportingtextchange',
+    },
+    { sel: 'scb-textfield', attr: 'error-text', to: 'errortextchange' },
+    { sel: 'scb-textfield', attr: 'leading-icon', to: 'leadingiconchange' },
+    { sel: 'scb-textfield', attr: 'type', to: 'typechange' },
+    { sel: 'scb-textfield', attr: 'name', to: 'namechange' },
+    { sel: 'scb-textfield', attr: 'pattern', to: 'patternchange' },
+    { sel: 'scb-textfield', attr: 'disabled', to: 'disabledchange' },
+    { sel: 'scb-textfield', attr: 'required', to: 'requiredchange' },
+    { sel: 'scb-textfield', attr: 'error', to: 'errorchange' },
+    { sel: 'scb-textfield', attr: 'aria-label', to: 'arialabelchange' },
+
+    { sel: 'scb-toc', attr: 'detached', to: 'detachedchange' },
+    { sel: 'scb-toc-item', attr: 'expanded', to: 'expandedchange' },
+    { sel: 'scb-toc-item', attr: 'label', to: 'labelchange' },
+    {
+      sel: 'scb-toc-item',
+      attr: 'supporting-text',
+      to: 'supportingtextchange',
+    },
+    { sel: 'scb-toc-item', attr: 'divider', to: 'dividerchange' },
+    { sel: 'scb-toc-item', attr: 'item-href', to: 'itemhrefchange' },
+
+    { sel: 'scb-tooltip', attr: 'open', to: 'openchange' },
+    { sel: 'scb-tooltip', attr: 'variant', to: 'variantchange' },
+    { sel: 'scb-tooltip', attr: 'position', to: 'positionchange' },
+    { sel: 'scb-tooltip', attr: 'trigger', to: 'triggerchange' },
+    { sel: 'scb-tooltip', attr: 'arrow', to: 'arrowchange' },
+    { sel: 'scb-tooltip', attr: 'delay', to: 'delaychange' },
+    { sel: 'scb-tooltip', attr: 'offset', to: 'offsetchange' },
+    { sel: 'scb-tooltip', attr: 'label', to: 'labelchange' },
+    {
+      sel: 'scb-tooltip',
+      attr: 'supporting-text',
+      to: 'supportingtextchange',
+    },
+    { sel: 'scb-dialog', attr: 'open', to: 'openchange' },
+    { sel: 'scb-dialog', attr: 'variant', to: 'variantchange' },
+    { sel: 'scb-dialog', attr: 'label', to: 'labelchange' },
+    { sel: 'scb-dialog', attr: 'icon', to: 'iconchange' },
+    {
+      sel: 'scb-dialog',
+      attr: 'supporting-text',
+      to: 'supportingtextchange',
+    },
+    { sel: 'scb-dialog', attr: 'ok-button', to: 'okbuttonchange' },
+    { sel: 'scb-dialog', attr: 'cancel-button', to: 'cancelbuttonchange' },
+    { sel: 'scb-dialog', attr: 'delete-button', to: 'deletebuttonchange' },
+    { sel: 'scb-dialog', attr: 'scrim-close', to: 'scrimclosechange' },
+
+    { sel: 'scb-drawer-item', attr: 'selected', to: 'selectedchange' },
+    { sel: 'scb-drawer-item', attr: 'label', to: 'labelchange' },
+    {
+      sel: 'scb-drawer-item',
+      attr: 'leading-icon',
+      to: 'leadingiconchange',
+    },
+    { sel: 'scb-drawer-item', attr: 'item-href', to: 'itemhrefchange' },
+
+    { sel: 'scb-list', attr: 'no-divider', to: 'nodividerchange' },
+    { sel: 'scb-list-item', attr: 'type', to: 'typechange' },
+    { sel: 'scb-list-item', attr: 'label', to: 'labelchange' },
+    {
+      sel: 'scb-list-item',
+      attr: 'supporting-text',
+      to: 'supportingtextchange',
+    },
+    {
+      sel: 'scb-list-item',
+      attr: 'trailing-supporting-text',
+      to: 'trailingsupportingtextchange',
+    },
+    { sel: 'scb-list-item', attr: 'headline', to: 'headlinechange' },
+    {
+      sel: 'scb-list-item',
+      attr: 'trailing-headline',
+      to: 'trailingheadlinechange',
+    },
+    { sel: 'scb-list-item', attr: 'href', to: 'hrefchange' },
+    { sel: 'scb-list-item', attr: 'current', to: 'currentchange' },
+    { sel: 'scb-list-item', attr: 'selected', to: 'selectedchange' },
+    { sel: 'scb-list-item', attr: 'checkbox', to: 'checkboxchange' },
+    { sel: 'scb-list-item', attr: 'avatar', to: 'avatarchange' },
+    { sel: 'scb-list-item', attr: 'overline', to: 'overlinechange' },
+    { sel: 'scb-list-item', attr: 'two-line', to: 'twolinechange' },
+    { sel: 'scb-list-item', attr: 'three-line', to: 'threelinechange' },
+    { sel: 'scb-list-item', attr: 'no-divider', to: 'nodividerchange' },
+    {
+      sel: 'scb-list-item',
+      attr: 'leading-variant',
+      to: 'leadingvariantchange',
+    },
+    {
+      sel: 'scb-list-item',
+      attr: 'trailing-variant',
+      to: 'trailingvariantchange',
+    },
+    { sel: 'scb-list-item', attr: 'density', to: 'densitychange' },
+    {
+      sel: 'scb-list-item',
+      attr: 'img-href-image',
+      to: 'imghrefimagechange',
+    },
+
+    { sel: 'scb-menu-item', attr: 'leading-icon', to: 'leadingiconchange' },
+    {
+      sel: 'scb-menu-item',
+      attr: 'trailing-icon',
+      to: 'trailingiconchange',
+    },
+    { sel: 'scb-menu-item', attr: 'item-href', to: 'itemhrefchange' },
+
+    {
+      sel: 'scb-notification-card',
+      attr: 'direction',
+      to: 'directionchange',
+    },
+    {
+      sel: 'scb-notification-card',
+      attr: 'show-icon',
+      to: 'showiconchange',
+    },
+    {
+      sel: 'scb-notification-card',
+      attr: 'show-close-button',
+      to: 'showclosebuttonchange',
+    },
+    {
+      sel: 'scb-notification-card',
+      attr: 'full-height',
+      to: 'fullheightchange',
+    },
+    {
+      sel: 'scb-notification-card',
+      attr: 'full-width',
+      to: 'fullwidthchange',
+    },
+
+    {
+      sel: 'scb-progress-indicator',
+      attr: 'type',
+      to: 'typechange',
+    },
+    {
+      sel: 'scb-progress-indicator',
+      attr: 'progress',
+      to: 'progresschange',
+    },
+    {
+      sel: 'scb-progress-indicator',
+      attr: 'is-static',
+      to: 'isstaticchange',
+    },
+
+    // scb-segmented-button: ändring av value-attribut ska trigga valuechange
+    { sel: 'scb-segmented-button', attr: 'value', to: 'valuechange' },
+
+    // scb-search: ändring av value-attribut ska trigga valuechange
+    { sel: 'scb-search', attr: 'value', to: 'valuechange' },
+
+    // scb-pagination: ändring av page-attribut ska trigga pagechange
+    { sel: 'scb-pagination', attr: 'page', to: 'pagechange' },
+
+    // scb-viz: attribut som ska trigga state-refresh
+    { sel: 'scb-viz', attr: 'variant', to: 'variantchange' },
+    { sel: 'scb-viz', attr: 'title', to: 'titlechange' },
+    { sel: 'scb-viz', attr: 'subtitle', to: 'subtitlechange' },
+    { sel: 'scb-viz', attr: 'description', to: 'descriptionchange' },
+    { sel: 'scb-viz', attr: 'comment', to: 'commentchange' },
+    { sel: 'scb-viz', attr: 'source', to: 'sourcechange' },
+    { sel: 'scb-viz', attr: 'footnote', to: 'footnotechange' },
+    { sel: 'scb-viz', attr: 'lang', to: 'langchange' },
+    { sel: 'scb-viz', attr: 'image-href', to: 'imagehrefchange' },
+  ];
+
+  /* Indexering av attributregler per attributnamn så att observern kan köra snabbare lookup. */
+  const ATTR_INDEX = new Map();
+  for (const r of ATTR_RULES) {
+    if (!ATTR_INDEX.has(r.attr)) ATTR_INDEX.set(r.attr, []);
+    ATTR_INDEX.get(r.attr).push(r);
+  }
+
+  /* Själva MutationObservern som bevakar attributändringar på alla relevanta element. */
+  const observer = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      if (m.type !== 'attributes') continue;
+      const el = m.target;
+      const attr = m.attributeName;
+      if (!(el instanceof Element) || !attr) continue;
+      const candidates = ATTR_INDEX.get(attr);
+      if (!candidates) continue;
+      for (const r of candidates) {
+        if (el.matches(r.sel)) emit(el, r.to);
+      }
+    }
+  });
+
+  observer.observe(document.documentElement, {
+    subtree: true,
+    attributes: true,
+    attributeFilter: Array.from(ATTR_INDEX.keys()),
+  });
+})();
+
+/* Globalt SCBBlazor-objekt med getState som läser av aktuellt state för alla relevanta komponenter på sidan. */
+window.SCBBlazor = window.SCBBlazor || {};
+window.SCBBlazor.getState = function () {
+  const header = document.querySelector('scb-header');
+  const drawer = document.querySelector('scb-drawer');
+  const breadcrumb = document.querySelector('scb-breadcrumb');
+  const breadcrumbItems = document.querySelectorAll('scb-breadcrumb-item');
+  const accordions = document.querySelectorAll('scb-accordion');
+  const checkboxes = document.querySelectorAll('scb-checkbox');
+  const switches = document.querySelectorAll('scb-switch');
+  const appBar = document.querySelector('scb-app-bar');
+  const segmented = document.querySelector('scb-segmented-button');
+  const tabs = document.querySelectorAll('scb-tabs');
+  const calendars = document.querySelectorAll('scb-calendar-card');
+  const cards = document.querySelectorAll('scb-card');
+  const keyfigures = document.querySelectorAll('scb-keyfigure-card');
+  const menu = document.querySelector('scb-menu');
+  const dialog = document.querySelector('scb-dialog');
+  const notifications = document.querySelectorAll('scb-notification-card');
+  const radioGroups = document.querySelectorAll('scb-radio-group');
+  const paginations = document.querySelectorAll('scb-pagination');
+  const snackbars = document.querySelectorAll('scb-snackbar');
+  const statusPills = document.querySelectorAll('scb-status-pill');
+  const stepper = document.querySelector('scb-stepper');
+  const tooltips = document.querySelectorAll('scb-tooltip');
+  const textfields = document.querySelectorAll('scb-textfield');
+  const searches = document.querySelectorAll('scb-search');
+  const tocs = document.querySelectorAll('scb-toc');
+  const vizs = document.querySelectorAll('scb-viz');
+  const lists = document.querySelectorAll('scb-list');
+  const links = document.querySelectorAll('scb-link');
+  const subMenus = document.querySelectorAll('scb-sub-menu');
+
+  // Headerstate hämtas från attributen på första scb-header
+  const headerState = {
+    activeTab: header
+      ? parseInt(header.getAttribute('active-tab') || '0', 10) || 0
+      : 0,
+    drawerOpen: header ? header.hasAttribute('drawer-open') : false,
+    searchText: header ? header.getAttribute('search-text') || '' : '',
+  };
+
+  // Drawerstate hämtas från attributen på första scb-drawer
+  const drawerState = {
+    open: drawer ? drawer.hasAttribute('open') : false,
+    label: drawer ? drawer.getAttribute('label') || '' : '',
+    subLabel: drawer ? drawer.getAttribute('sub-label') || '' : '',
+  };
+
+  // Breadcrumb (första på sidan)
+  const breadcrumbState = {
+    showAll: breadcrumb
+      ? !!(
+          breadcrumb.showAll ?? breadcrumb.hasAttribute('show-all')
+        )
+      : false,
+  };
+
+  const breadcrumbItemsState = Array.from(breadcrumbItems).map((item) => {
+    const anyItem = item;
+    const label = (
+      anyItem.label ?? item.getAttribute('label') ?? ''
+    ).toString();
+
+    const href = (
+      anyItem.href ??
+      anyItem.itemHref ??
+      item.getAttribute('item-href') ??
+      item.getAttribute('href') ??
+      ''
+    ).toString();
+
+    const isCurrent =
+      typeof anyItem.isCurrent === 'boolean'
+        ? anyItem.isCurrent
+        : item.hasAttribute('is-current') || item.hasAttribute('current');
+
+    return {
+      label,
+      href,
+      isCurrent: !!isCurrent,
+    };
+  });
+
+  // Generell modell för alla scb-accordion med sina scb-accordion-item
+  const accordionsState = Array.from(accordions).map((acc) => {
+    const items = acc.querySelectorAll('scb-accordion-item');
+    return {
+      detached: acc.hasAttribute('detached'),
+      items: Array.from(items).map((item) => ({
+        open: item.hasAttribute('open'),
+        title: item.getAttribute('title') || '',
+        overline: item.getAttribute('overline') || '',
+        supportingText: item.getAttribute('supporting-text') || '',
+      })),
+    };
+  });
+
+  const checkboxesState = Array.from(checkboxes).map((cb) => {
+    const anyCb = cb;
+    const checked =
+      typeof anyCb.checked === 'boolean'
+        ? anyCb.checked
+        : cb.hasAttribute('checked');
+
+    return {
+      checked: !!checked,
+      name: cb.getAttribute('name') || '',
+      value: cb.getAttribute('value') || '',
+      label: cb.getAttribute('label') || '',
+    };
+  });
+
+  // Switchar på sidan hämtas som objekt med selected, name, value och label
+  const switchesState = Array.from(switches).map((sw) => {
+    const anySw = sw;
+    const selected =
+      typeof anySw.selected === 'boolean'
+        ? anySw.selected
+        : sw.hasAttribute('selected');
+
+    return {
+      selected: !!selected,
+      name: sw.getAttribute('name') || '',
+      value: sw.getAttribute('value') || '',
+      label: sw.getAttribute('label') || '',
+    };
+  });
+
+  // App bar, läser direkt från attributen
+  const appBarState = {
+    title: appBar ? appBar.getAttribute('title') || '' : '',
+    type: appBar ? appBar.getAttribute('type') || '' : '',
+    position: appBar ? appBar.getAttribute('position') || '' : '',
+    searchSupportingText: appBar
+      ? appBar.getAttribute('search-supporting-text') || ''
+      : '',
+  };
+
+  // Första scb-segmented-button på sidan
+  let segValue = '';
+  let segValues = [];
+
+  if (segmented) {
+    const hostValue =
+      segmented.value ?? segmented.getAttribute('value') ?? '';
+    const hostValues = Array.isArray(segmented.values)
+      ? segmented.values
+      : [];
+
+    if (hostValue || (hostValues && hostValues.length)) {
+      const firstHostValue =
+        hostValues && hostValues.length ? hostValues[0] : '';
+      segValue = String(hostValue || firstHostValue);
+      if (hostValues && hostValues.length) {
+        segValues = hostValues.slice();
+      } else if (segValue) {
+        segValues = [segValue];
+      }
+    }
+  }
+
+  const segmentedState = {
+    value: segValue,
+    values: segValues,
+  };
+
+  // Alla scb-tabs med aktiv index per tabbar
+  const tabsState = Array.from(tabs).map((t) => {
+    const anyT = t;
+    let activeIndex = 0;
+
+    if (typeof anyT.activeTabIndex === 'number') {
+      activeIndex = anyT.activeTabIndex;
+    } else {
+      const attrVal = t.getAttribute('active-tab-index');
+      if (attrVal != null) {
+        const parsed = parseInt(attrVal, 10);
+        if (!Number.isNaN(parsed)) {
+          activeIndex = parsed;
+        }
+      }
+    }
+
+    return { activeIndex };
+  });
+
+  // Alla scb-calendar-card på sidan
+  const calendarsState = Array.from(calendars).map((c) => ({
+    title: c.getAttribute('title') || '',
+    subtitle: c.getAttribute('subtitle') || '',
+    supportingText: c.getAttribute('supporting-text') || '',
+    variant: c.getAttribute('variant') || '',
+    showMedia: c.hasAttribute('show-media'),
+  }));
+
+  // Enkelt kalenderläge för den första kalendern
+  const calendarState =
+    calendarsState.length > 0
+      ? calendarsState[0]
+      : {
+          title: '',
+          subtitle: '',
+          supportingText: '',
+          variant: '',
+          showMedia: false,
+        };
+
+  // Alla scb-card på sidan
+  const cardsState = Array.from(cards).map((card) => ({
+    type: card.getAttribute('type') || '',
+    variant: card.getAttribute('variant') || '',
+    direction: card.getAttribute('direction') || '',
+    title: card.getAttribute('title') || '',
+    subtitle: card.getAttribute('subtitle') || '',
+    supportingText: card.getAttribute('supporting-text') || '',
+    cardHref: card.getAttribute('card-href') || '',
+  }));
+
+  // Alla scb-keyfigure-card på sidan
+  const keyfiguresState = Array.from(keyfigures).map((card) => ({
+    keyfigure: card.getAttribute('keyfigure') || '',
+    subtitle: card.getAttribute('subtitle') || '',
+    supportingText: card.getAttribute('supporting-text') || '',
+    cardHref: card.getAttribute('card-href') || '',
+    icon: card.getAttribute('icon') || '',
+    size: card.getAttribute('size') || '',
+    unit: card.getAttribute('unit') || '',
+  }));
+
+  // Meny (första scb-menu)
+  const menuState = {
+    open: menu ? menu.hasAttribute('open') : false,
+  };
+
+  // Alla notification cards på sidan
+  const notificationsState = Array.from(notifications).map((card) => ({
+    open: card.hasAttribute('open'),
+    variant: card.getAttribute('variant') || '',
+    title: card.getAttribute('title') || '',
+    subtitle: card.getAttribute('subtitle') || '',
+    supportingText: card.getAttribute('supporting-text') || '',
+    linkText: card.getAttribute('link-text') || '',
+    linkHref: card.getAttribute('link-href') || '',
+    showIcon: card.hasAttribute('show-icon'),
+    showCloseButton: card.hasAttribute('show-close-button'),
+    fullHeight: card.hasAttribute('full-height'),
+    fullWidth: card.hasAttribute('full-width'),
+    direction: card.getAttribute('direction') || '',
+  }));
+
+  // Alla snackbars, med stöd för både attribut och properties
+  const snackbarsState = Array.from(snackbars).map((sb) => {
+    const anySb = sb;
+    const message =
+      (anySb.message ?? sb.getAttribute('message') ?? '').toString();
+    const actionText =
+      (anySb.actionText ?? sb.getAttribute('action-text') ?? '').toString();
+    const showClose =
+      typeof anySb.showClose === 'boolean'
+        ? anySb.showClose
+        : sb.hasAttribute('show-close');
+    const fixed =
+      typeof anySb.fixed === 'boolean'
+        ? anySb.fixed
+        : sb.hasAttribute('fixed');
+    const fadeout =
+      typeof anySb.fadeout === 'boolean'
+        ? anySb.fadeout
+        : sb.hasAttribute('fadeout');
+    const withLongerAction =
+      typeof anySb.withLongerAction === 'boolean'
+        ? anySb.withLongerAction
+        : sb.hasAttribute('with-longer-action');
+
+    return {
+      open: sb.hasAttribute('open'),
+      message,
+      actionText,
+      showClose,
+      fixed,
+      fadeout,
+      withLongerAction,
+    };
+  });
+
+  // Alla status pills på sidan
+  const statusPillsState = Array.from(statusPills).map((sp) => {
+    const anySp = sp;
+    const status =
+      (anySp.status ?? sp.getAttribute('status') ?? '').toString();
+    const label =
+      (anySp.label ?? sp.getAttribute('label') ?? '').toString();
+    const showIcon =
+      typeof anySp.showIcon === 'boolean'
+        ? anySp.showIcon
+        : sp.hasAttribute('show-icon');
+
+    return {
+      status,
+      label,
+      showIcon,
+    };
+  });
+
+  // Alla tooltips på sidan
+  const tooltipsState = Array.from(tooltips).map((tooltip) => {
+    const anyTooltip = tooltip;
+    const open =
+      typeof anyTooltip.open === 'boolean'
+        ? anyTooltip.open
+        : tooltip.hasAttribute('open');
+
+    const variant = (
+      anyTooltip.variant ??
+      tooltip.getAttribute('variant') ??
+      ''
+    ).toString();
+
+    const position = (
+      anyTooltip.position ??
+      tooltip.getAttribute('position') ??
+      ''
+    ).toString();
+
+    const trigger = (
+      anyTooltip.trigger ??
+      tooltip.getAttribute('trigger') ??
+      ''
+    ).toString();
+
+    let delay = 0;
+    if (typeof anyTooltip.delay === 'number') {
+      delay = anyTooltip.delay;
+    } else {
+      const attrDelay = tooltip.getAttribute('delay');
+      const parsed =
+        attrDelay != null ? Number.parseFloat(attrDelay) : Number.NaN;
+      delay = Number.isNaN(parsed) ? 0 : parsed;
+    }
+
+    let offset = 0;
+    if (typeof anyTooltip.offset === 'number') {
+      offset = anyTooltip.offset;
+    } else {
+      const attrOffset = tooltip.getAttribute('offset');
+      const parsed =
+        attrOffset != null ? Number.parseFloat(attrOffset) : Number.NaN;
+      offset = Number.isNaN(parsed) ? 0 : parsed;
+    }
+
+    const label = (
+      anyTooltip.label ??
+      tooltip.getAttribute('label') ??
+      ''
+    ).toString();
+
+    const supportingText = (
+      anyTooltip.supportingtext ??
+      tooltip.getAttribute('supporting-text') ??
+      ''
+    ).toString();
+
+    return {
+      open: !!open,
+      variant,
+      position,
+      trigger,
+      delay,
+      offset,
+      label,
+      supportingText,
+    };
+  });
+
+  // Alla radio groups med namn och vald radios value
+  const radioGroupsState = Array.from(radioGroups).map((group) => {
+    const radios = group.querySelectorAll('scb-radio-button');
+    let value = '';
+    for (const rb of Array.from(radios)) {
+      if (rb.hasAttribute('checked')) {
+        value = rb.getAttribute('value') || '';
+        break;
+      }
+    }
+    return {
+      name: group.getAttribute('name') || '',
+      value,
+    };
+  });
+
+  // Alla pagination-komponenter med aktuell sida och antal sidor
+  const paginationsState = Array.from(paginations).map((p) => {
+    const el = p;
+    const pageProp =
+      typeof el.page === 'number'
+        ? el.page
+        : parseInt(p.getAttribute('page') || '0', 10) || 0;
+
+    const totalPagesProp =
+      typeof el.totalPages === 'number'
+        ? el.totalPages
+        : parseInt(p.getAttribute('total-pages') || '0', 10) || 0;
+
+    return {
+      page: pageProp,
+      totalPages: totalPagesProp,
+    };
+  });
+
+  // Dialog (första scb-dialog på sidan)
+  const dialogState = {
+    open: dialog ? dialog.hasAttribute('open') : false,
+    variant: dialog ? dialog.getAttribute('variant') || '' : '',
+    label: dialog ? dialog.getAttribute('label') || '' : '',
+  };
+
+  // Stepper (första scb-stepper på sidan) med aktivt steg och antal steg
+  const stepperState = (function () {
+    if (!stepper) {
+      return { activeIndex: 0, totalSteps: 0 };
+    }
+
+    const anyStepper = stepper;
+    const steps = stepper.querySelectorAll('scb-step');
+    const totalSteps = steps.length;
+
+    let activeIndex = 0;
+
+    if (typeof anyStepper.activeIndex === 'number') {
+      activeIndex = anyStepper.activeIndex;
+    } else {
+      const attrVal = stepper.getAttribute('active-index');
+      if (attrVal != null) {
+        const parsed = parseInt(attrVal, 10);
+        if (!Number.isNaN(parsed)) {
+          activeIndex = parsed;
+        }
+      }
+    }
+
+    return { activeIndex, totalSteps };
+  })();
+
+  // Alla textfält på sidan
+  const textfieldsState = Array.from(textfields).map((tf) => {
+    const anyTf = tf;
+    const value = (
+      anyTf.value ??
+      tf.getAttribute('value') ??
+      ''
+    ).toString();
+
+    const label = (
+      anyTf.label ??
+      tf.getAttribute('label') ??
+      ''
+    ).toString();
+
+    const supportingText = (
+      anyTf.supportingText ??
+      tf.getAttribute('supporting-text') ??
+      ''
+    ).toString();
+
+    const error =
+      typeof anyTf.error === 'boolean'
+        ? anyTf.error
+        : tf.hasAttribute('error');
+
+    const name = (
+      anyTf.name ??
+      tf.getAttribute('name') ??
+      ''
+    ).toString();
+
+    const id = (
+      anyTf.id ??
+      tf.getAttribute('id') ??
+      ''
+    ).toString();
+
+    return {
+      value,
+      label,
+      supportingText,
+      error,
+      name,
+      id,
+    };
+  });
+
+  // Alla search-komponenter på sidan
+  const searchesState = Array.from(searches).map((s) => {
+    const anyS = s;
+    const value = (
+      anyS.value ??
+      s.getAttribute('value') ??
+      ''
+    ).toString();
+
+    const supportingText = (
+      anyS.supportingText ??
+      s.getAttribute('supporting-text') ??
+      ''
+    ).toString();
+
+    const fullScreen =
+      typeof anyS.fullScreen === 'boolean'
+        ? anyS.fullScreen
+        : s.hasAttribute('full-screen');
+
+    const size = (
+      anyS.size ??
+      s.getAttribute('size') ??
+      ''
+    ).toString();
+
+    const name = (
+      anyS.name ??
+      s.getAttribute('name') ??
+      ''
+    ).toString();
+
+    const id = (
+      anyS.id ??
+      s.getAttribute('id') ??
+      ''
+    ).toString();
+
+    return {
+      value,
+      supportingText,
+      fullScreen,
+      size,
+      name,
+      id,
+    };
+  });
+
+  // Alla scb-toc på sidan med sina scb-toc-item
+  const tocsState = Array.from(tocs).map((toc) => {
+    const items = toc.querySelectorAll('scb-toc-item');
+    return {
+      detached: toc.hasAttribute('detached'),
+      items: Array.from(items).map((item) => {
+        const anyItem = item;
+        const expanded =
+          typeof anyItem.expanded === 'boolean'
+            ? anyItem.expanded
+            : false;
+        const label = (
+          anyItem.label ??
+          item.getAttribute('label') ??
+          ''
+        ).toString();
+        const supportingText = (
+          anyItem.supportingText ??
+          item.getAttribute('supporting-text') ??
+          ''
+        ).toString();
+        const itemHref = (
+          anyItem.itemHref ??
+          item.getAttribute('item-href') ??
+          ''
+        ).toString();
+        const divider =
+          typeof anyItem.divider === 'boolean'
+            ? anyItem.divider
+            : item.hasAttribute('divider');
+
+        return {
+          expanded: !!expanded,
+          label,
+          supportingText,
+          itemHref,
+          divider,
+        };
+      }),
+    };
+  });
+
+  // Alla scb-viz på sidan
+  const vizState = Array.from(vizs).map((v) => {
+    const anyV = v;
+    const variant = (
+      anyV.variant ??
+      v.getAttribute('variant') ??
+      ''
+    ).toString();
+    const title = (
+      anyV.title ??
+      v.getAttribute('title') ??
+      ''
+    ).toString();
+    const subtitle = (
+      anyV.subtitle ??
+      v.getAttribute('subtitle') ??
+      ''
+    ).toString();
+    const description = (
+      anyV.description ??
+      v.getAttribute('description') ??
+      ''
+    ).toString();
+    const comment = (
+      anyV.comment ??
+      v.getAttribute('comment') ??
+      ''
+    ).toString();
+    const source = (
+      anyV.source ??
+      v.getAttribute('source') ??
+      ''
+    ).toString();
+    const footnote = (
+      anyV.footnote ??
+      v.getAttribute('footnote') ??
+      ''
+    ).toString();
+    const lang = (
+      anyV.lang ??
+      v.getAttribute('lang') ??
+      ''
+    ).toString();
+    const imageHref = (
+      anyV.imageHref ??
+      v.getAttribute('image-href') ??
+      ''
+    ).toString();
+    const selectedChip = (
+      anyV.selectedChip ??
+      ''
+    ).toString();
+
+    return {
+      variant,
+      title,
+      subtitle,
+      description,
+      comment,
+      source,
+      footnote,
+      lang,
+      imageHref,
+      selectedChip,
+    };
+  });
+
+  // Alla scb-list med sina scb-list-item
+  const listsState = Array.from(lists).map((list) => {
+    const items = list.querySelectorAll('scb-list-item');
+    return {
+      noDivider: list.hasAttribute('no-divider'),
+      items: Array.from(items).map((item) => {
+        const anyItem = item;
+        const type = (
+          anyItem.type ??
+          item.getAttribute('type') ??
+          ''
+        ).toString();
+        const label = (
+          anyItem.label ??
+          item.getAttribute('label') ??
+          ''
+        ).toString();
+        const supportingText = (
+          anyItem.supportingText ??
+          item.getAttribute('supporting-text') ??
+          ''
+        ).toString();
+        const overline = (
+          anyItem.overline ??
+          item.getAttribute('overline') ??
+          ''
+        ).toString();
+        const leading =
+          typeof anyItem.leading === 'boolean'
+            ? anyItem.leading
+            : item.hasAttribute('leading');
+        const leadingVariant = (
+          anyItem.leadingVariant ??
+          item.getAttribute('leading-variant') ??
+          ''
+        ).toString();
+        const leadingIcon = (
+          anyItem.leadingIcon ??
+          item.getAttribute('leading-icon') ??
+          ''
+        ).toString();
+        const trailing =
+          typeof anyItem.trailing === 'boolean'
+            ? anyItem.trailing
+            : item.hasAttribute('trailing');
+        const trailingVariant = (
+          anyItem.trailingVariant ??
+          item.getAttribute('trailing-variant') ??
+          ''
+        ).toString();
+        const trailingIcon = (
+          anyItem.trailingIcon ??
+          item.getAttribute('trailing-icon') ??
+          ''
+        ).toString();
+        const disabled =
+          typeof anyItem.disabled === 'boolean'
+            ? anyItem.disabled
+            : item.hasAttribute('disabled');
+        const href = (
+          anyItem.href ??
+          item.getAttribute('href') ??
+          ''
+        ).toString();
+        const itemHref = (
+          anyItem.itemHref ??
+          item.getAttribute('item-href') ??
+          ''
+        ).toString();
+        const target = (
+          anyItem.target ??
+          item.getAttribute('target') ??
+          ''
+        ).toString();
+        let density = 0;
+        if (typeof anyItem.density === 'number') {
+          density = anyItem.density;
+        } else {
+          const attrDensity = item.getAttribute('density');
+          const parsed =
+            attrDensity != null ? Number.parseInt(attrDensity, 10) : Number.NaN;
+          density = Number.isNaN(parsed) ? 0 : parsed;
+        }
+        const noDivider =
+          typeof anyItem.noDivider === 'boolean'
+            ? anyItem.noDivider
+            : item.hasAttribute('no-divider');
+        const imgHrefImage = (
+          anyItem.imgHrefImage ??
+          item.getAttribute('img-href-image') ??
+          ''
+        ).toString();
+        const avatarLabel = (
+          anyItem.avatarLabel ??
+          item.getAttribute('avatar-label') ??
+          ''
+        ).toString();
+        const avatarAlt = (
+          anyItem.avatarAlt ??
+          item.getAttribute('avatar-alt') ??
+          ''
+        ).toString();
+        const avatarVariant = (
+          anyItem.avatarVariant ??
+          item.getAttribute('avatar-variant') ??
+          ''
+        ).toString();
+        const avatarSrc = (
+          anyItem.avatarSrc ??
+          item.getAttribute('avatar-src') ??
+          ''
+        ).toString();
+
+        return {
+          type,
+          label,
+          supportingText,
+          overline,
+          leading: !!leading,
+          leadingVariant,
+          leadingIcon,
+          trailing: !!trailing,
+          trailingVariant,
+          trailingIcon,
+          disabled: !!disabled,
+          href,
+          itemHref,
+          target,
+          density,
+          noDivider,
+          imgHrefImage,
+          avatarLabel,
+          avatarAlt,
+          avatarVariant,
+          avatarSrc,
+        };
+      }),
+    };
+  });
+
+  // Alla scb-link på sidan
+  const linksState = Array.from(links).map((link) => {
+    const anyLink = link;
+    const href = (
+      anyLink.href ??
+      link.getAttribute('href') ??
+      ''
+    ).toString();
+    const target = (
+      anyLink.target ??
+      link.getAttribute('target') ??
+      ''
+    ).toString();
+    const rel = (
+      anyLink.rel ??
+      link.getAttribute('rel') ??
+      ''
+    ).toString();
+    const download = (
+      anyLink.download ??
+      link.getAttribute('download') ??
+      ''
+    ).toString();
+    const disabled =
+      typeof anyLink.disabled === 'boolean'
+        ? anyLink.disabled
+        : link.hasAttribute('disabled');
+    const ariaLabel = (
+      anyLink.ariaLabel ??
+      link.getAttribute('aria-label') ??
+      ''
+    ).toString();
+    const text = (
+      anyLink.text ??
+      (link.textContent ?? '') ??
+      ''
+    ).toString().trim();
+
+    return {
+      href,
+      target,
+      rel,
+      download,
+      disabled: !!disabled,
+      ariaLabel,
+      text,
+    };
+  });
+
+  // Alla scb-sub-menu på sidan (till SubMenus i C#-modellen)
+const subMenusState = Array.from(subMenus).map((sm) => {
+  const anySm = sm;
+
+  const open =
+    typeof anySm.open === 'boolean'
+      ? anySm.open
+      : sm.hasAttribute('open');
+
+  const openLeft =
+    typeof anySm.openLeft === 'boolean'
+      ? anySm.openLeft
+      : sm.hasAttribute('open-left');
+
+  return {
+    open: !!open,
+    openLeft: !!openLeft,
+  };
+});
+
+
+  // Objektet nedan är det som serialiseras till C#-modellen ScbStateDto
+  return {
+    header: headerState,
+    drawer: drawerState,
+    breadcrumb: breadcrumbState,
+    breadcrumbItems: breadcrumbItemsState,
+    accordions: accordionsState,
+    checkboxes: checkboxesState,
+    switches: switchesState,
+    appBar: appBarState,
+    segmented: segmentedState,
+    tabs: tabsState,
+    calendar: calendarState,
+    calendars: calendarsState,
+    cards: cardsState,
+    keyfigures: keyfiguresState,
+    menu: menuState,
+    notifications: notificationsState,
+    snackbars: snackbarsState,
+    statusPills: statusPillsState,
+    tooltips: tooltipsState,
+    dialog: dialogState,
+    radioGroups: radioGroupsState,
+    paginations: paginationsState,
+    stepper: stepperState,
+    textfields: textfieldsState,
+    searches: searchesState,
+    tocs: tocsState,
+    viz: vizState,
+    lists: listsState,
+    links: linksState,
+    subMenus: subMenusState,
+  };
+};
+
+/* Registrerar globala listeners för normaliserade events och anropar den Blazor-komponent som skickat in dotNetRef. */
+window.SCBBlazor.registerScbEventHandlers = function (dotNetRef) {
+  if (!dotNetRef || window.__scbBlazorHandlersRegistered) return;
+  window.__scbBlazorHandlersRegistered = true;
+
+  // Lista över normaliserade events som ska trigga uppdatering av Blazor state
+  const relevantEvents = [
+    'tabchange',
+    'draweropen',
+    'search',
+    'openchange',
+    'checkedchange',
+    'selectedchange',
+    'tabschange',
+    'titlechange',
+    'positionchange',
+    'typechange',
+    'searchsupportingtextchange',
+    // segmented button
+    'valueschange',
+    // calendar-card mm
+    'subtitlechange',
+    'supportingtextchange',
+    'variantchange',
+    'showmediachange',
+    // keyfigure-card
+    'keyfigurechange',
+    'cardhrefchange',
+    'unitchange',
+    // status-pill
+    'statuschange',
+    'labelchange',
+    'showiconchange',
+    // breadcrumb
+    'showallchange',
+    'currentchange',
+    // pagination
+    'pagechange',
+    // stepper
+    'stepchange',
+    // dialog extra
+    'iconchange',
+    'okbuttonchange',
+    'cancelbuttonchange',
+    'deletebuttonchange',
+    'scrimclosechange',
+    // notification extra
+    'directionchange',
+    'fullheightchange',
+    'fullwidthchange',
+    'showclosebuttonchange',
+    // toc
+    'detachedchange',
+    'expandedchange',
+    'dividerchange',
+    'itemhrefchange',
+    // viz
+    'descriptionchange',
+    'commentchange',
+    'sourcechange',
+    'footnotechange',
+    'langchange',
+    'imagehrefchange',
+    // värdeförändringar, t.ex. scb-textfield och scb-search
+    'valuechange',
+  ];
+
+  relevantEvents.forEach((evtName) => {
+    document.addEventListener(evtName, () => {
+      dotNetRef
+        .invokeMethodAsync('OnScbEvent', evtName)
+        .catch((err) =>
+          console.error('SCBBlazor.OnScbEvent failed', err),
+        );
+    });
+  });
+};
+
+/* 
+   Styrkommandon från Blazor.
+   Dessa funktioner uppdaterar komponenternas state i DOM och triggar normaliserade events
+   så att SCBBlazor.getState och registerScbEventHandlers kan uppdatera Blazor-modellen.
+*/
+(function () {
+  'use strict';
+
+  function getByIndex(selector, index) {
+    const list = document.querySelectorAll(selector);
+    if (!list || list.length === 0) return null;
+    const i = typeof index === 'number' ? index : parseInt(index, 10);
+    if (Number.isNaN(i) || i < 0 || i >= list.length) return null;
+    return list[i];
+  }
+
+  function getById(id, selector) {
+    if (!id) return null;
+    const el = document.getElementById(String(id));
+    if (!el) return null;
+    if (selector && (!(el instanceof Element) || !el.matches(selector))) return null;
+    return el;
+  }
+
+  function toBool(value) {
+    return !!value;
+  }
+
+  function dispatchChange(el, name, detail) {
+    if (!el) return;
+    el.dispatchEvent(
+      new CustomEvent(name, {
+        bubbles: true,
+        composed: true,
+        detail: detail || {},
+      }),
+    );
+  }
+
+  const api = (window.SCBBlazor = window.SCBBlazor || {});
+
+  // Header
+
+  api.setHeaderActiveTab = function (index) {
+    const header = document.querySelector('scb-header');
+    if (!header) return;
+    const i = typeof index === 'number' ? index : parseInt(index, 10) || 0;
+    try {
+      header.activeTab = i;
+    } catch (_) {}
+    header.setAttribute('active-tab', String(i));
+    dispatchChange(header, 'tabchange', { index: i });
+  };
+
+  api.setHeaderDrawerOpen = function (open) {
+    const header = document.querySelector('scb-header');
+    if (!header) return;
+    const isOpen = toBool(open);
+    if (isOpen) header.setAttribute('drawer-open', '');
+    else header.removeAttribute('drawer-open');
+    dispatchChange(header, 'draweropen', { open: isOpen });
+  };
+
+  api.setHeaderSearchText = function (text) {
+    const header = document.querySelector('scb-header');
+    if (!header) return;
+    const value = text == null ? '' : String(text);
+    try {
+      header.searchText = value;
+    } catch (_) {}
+    if (value) header.setAttribute('search-text', value);
+    else header.removeAttribute('search-text');
+    dispatchChange(header, 'search', { value });
+  };
+
+  // Drawer och menu
+
+  api.setDrawerOpen = function (open) {
+    const drawer = document.querySelector('scb-drawer');
+    if (!drawer) return;
+    const isOpen = toBool(open);
+    try {
+      drawer.open = isOpen;
+    } catch (_) {}
+    if (isOpen) drawer.setAttribute('open', '');
+    else drawer.removeAttribute('open');
+    dispatchChange(drawer, 'openchange', { open: isOpen });
+  };
+
+  api.setDrawerText = function (label, subLabel) {
+    const drawer = document.querySelector('scb-drawer');
+    if (!drawer) return;
+    const l = label == null ? '' : String(label);
+    const s = subLabel == null ? '' : String(subLabel);
+    drawer.setAttribute('label', l);
+    drawer.setAttribute('sub-label', s);
+  };
+
+  api.setMenuOpen = function (open) {
+    const menu = document.querySelector('scb-menu');
+    if (!menu) return;
+    const isOpen = toBool(open);
+    try {
+      menu.open = isOpen;
+    } catch (_) {}
+    if (isOpen) menu.setAttribute('open', '');
+    else menu.removeAttribute('open');
+    dispatchChange(menu, 'openchange', { open: isOpen });
+  };
+
+  api.setSubMenuOpen = function (index, open) {
+    const subMenu = getByIndex('scb-sub-menu', index);
+    if (!subMenu) return;
+    const isOpen = toBool(open);
+    try {
+      subMenu.open = isOpen;
+    } catch (_) {}
+    if (isOpen) subMenu.setAttribute('open', '');
+    else subMenu.removeAttribute('open');
+    dispatchChange(subMenu, 'openchange', { open: isOpen });
+  };
+
+  api.setSubMenuOpenById = function (id, open) {
+    const subMenu = getById(id, 'scb-sub-menu');
+    if (!subMenu) return;
+    const isOpen = toBool(open);
+    try {
+      subMenu.open = isOpen;
+    } catch (_) {}
+    if (isOpen) subMenu.setAttribute('open', '');
+    else subMenu.removeAttribute('open');
+    dispatchChange(subMenu, 'openchange', { open: isOpen });
+  };
+
+  // Breadcrumb
+
+  api.setBreadcrumbShowAll = function (showAll) {
+    const breadcrumb = document.querySelector('scb-breadcrumb');
+    if (!breadcrumb) return;
+    const value = toBool(showAll);
+    try {
+      breadcrumb.showAll = value;
+    } catch (_) {}
+    if (value) breadcrumb.setAttribute('show-all', '');
+    else breadcrumb.removeAttribute('show-all');
+    dispatchChange(breadcrumb, 'showallchange', { value });
+  };
+
+  // Accordion
+
+  api.setAccordionItemOpen = function (accordionIndex, itemIndex, open) {
+    const acc = getByIndex('scb-accordion', accordionIndex);
+    if (!acc) return;
+    const items = acc.querySelectorAll('scb-accordion-item');
+    if (!items || items.length === 0) return;
+    const i = typeof itemIndex === 'number' ? itemIndex : parseInt(itemIndex, 10) || 0;
+    if (i < 0 || i >= items.length) return;
+    const item = items[i];
+    const isOpen = toBool(open);
+    try {
+      item.open = isOpen;
+    } catch (_) {}
+    if (isOpen) item.setAttribute('open', '');
+    else item.removeAttribute('open');
+    dispatchChange(item, 'openchange', { open: isOpen });
+  };
+
+  api.setAccordionItemOpenById = function (itemId, open) {
+    const item = getById(itemId, 'scb-accordion-item');
+    if (!item) return;
+    const isOpen = toBool(open);
+    try {
+      item.open = isOpen;
+    } catch (_) {}
+    if (isOpen) item.setAttribute('open', '');
+    else item.removeAttribute('open');
+    dispatchChange(item, 'openchange', { open: isOpen });
+  };
+
+  // Checkbox och switch
+
+  api.setCheckboxChecked = function (index, checked) {
+    const cb = getByIndex('scb-checkbox', index);
+    if (!cb) return;
+    const isChecked = toBool(checked);
+    try {
+      cb.checked = isChecked;
+    } catch (_) {}
+    if (isChecked) cb.setAttribute('checked', '');
+    else cb.removeAttribute('checked');
+    dispatchChange(cb, 'checkedchange', { checked: isChecked });
+  };
+
+  api.setCheckboxCheckedById = function (id, checked) {
+    const cb = getById(id, 'scb-checkbox');
+    if (!cb) return;
+    const isChecked = toBool(checked);
+    try {
+      cb.checked = isChecked;
+    } catch (_) {}
+    if (isChecked) cb.setAttribute('checked', '');
+    else cb.removeAttribute('checked');
+    dispatchChange(cb, 'checkedchange', { checked: isChecked });
+  };
+
+  api.setSwitchSelected = function (index, selected) {
+    const sw = getByIndex('scb-switch', index);
+    if (!sw) return;
+    const isSelected = toBool(selected);
+    try {
+      sw.selected = isSelected;
+    } catch (_) {}
+    if (isSelected) sw.setAttribute('selected', '');
+    else sw.removeAttribute('selected');
+    dispatchChange(sw, 'selectedchange', { selected: isSelected });
+  };
+
+  api.setSwitchSelectedById = function (id, selected) {
+    const sw = getById(id, 'scb-switch');
+    if (!sw) return;
+    const isSelected = toBool(selected);
+    try {
+      sw.selected = isSelected;
+    } catch (_) {}
+    if (isSelected) sw.setAttribute('selected', '');
+    else sw.removeAttribute('selected');
+    dispatchChange(sw, 'selectedchange', { selected: isSelected });
+  };
+
+  // Segmented button
+
+  api.setSegmentedValue = function (value) {
+    const seg = document.querySelector('scb-segmented-button');
+    if (!seg) return;
+    const v = value == null ? '' : String(value);
+    try {
+      seg.value = v;
+    } catch (_) {}
+    if (v) seg.setAttribute('value', v);
+    else seg.removeAttribute('value');
+    dispatchChange(seg, 'valuechange', { value: v });
+  };
+
+  api.setSegmentedValues = function (values) {
+    const seg = document.querySelector('scb-segmented-button');
+    if (!seg) return;
+    const arr = Array.isArray(values) ? values.map((v) => String(v)) : [];
+    try {
+      seg.values = arr;
+    } catch (_) {}
+    if (arr.length > 0) {
+      seg.setAttribute('value', arr[0]);
+    } else {
+      seg.removeAttribute('value');
+    }
+    dispatchChange(seg, 'valueschange', { values: arr });
+  };
+
+  api.setSegmentedValueById = function (id, value) {
+    const seg = getById(id, 'scb-segmented-button');
+    if (!seg) return;
+    const v = value == null ? '' : String(value);
+    try {
+      seg.value = v;
+    } catch (_) {}
+    if (v) seg.setAttribute('value', v);
+    else seg.removeAttribute('value');
+    dispatchChange(seg, 'valuechange', { value: v });
+  };
+
+  api.setSegmentedValuesById = function (id, values) {
+    const seg = getById(id, 'scb-segmented-button');
+    if (!seg) return;
+    const arr = Array.isArray(values) ? values.map((v) => String(v)) : [];
+    try {
+      seg.values = arr;
+    } catch (_) {}
+    if (arr.length > 0) {
+      seg.setAttribute('value', arr[0]);
+    } else {
+      seg.removeAttribute('value');
+    }
+    dispatchChange(seg, 'valueschange', { values: arr });
+  };
+
+  // Tabs
+
+  api.setTabsActiveIndex = function (tabsIndex, activeIndex) {
+    const tabs = getByIndex('scb-tabs', tabsIndex);
+    if (!tabs) return;
+    const i = typeof activeIndex === 'number' ? activeIndex : parseInt(activeIndex, 10) || 0;
+    const anyTabs = tabs;
+    try {
+      anyTabs.activeTabIndex = i;
+    } catch (_) {}
+    tabs.setAttribute('active-tab-index', String(i));
+    dispatchChange(tabs, 'tabschange', { activeIndex: i });
+  };
+
+  api.setTabsActiveIndexById = function (id, activeIndex) {
+    const tabs = getById(id, 'scb-tabs');
+    if (!tabs) return;
+    const i = typeof activeIndex === 'number' ? activeIndex : parseInt(activeIndex, 10) || 0;
+    const anyTabs = tabs;
+    try {
+      anyTabs.activeTabIndex = i;
+    } catch (_) {}
+    tabs.setAttribute('active-tab-index', String(i));
+    dispatchChange(tabs, 'tabschange', { activeIndex: i });
+  };
+
+  // Dialog, notification och snackbar
+
+  api.setDialogOpen = function (open) {
+    const dialog = document.querySelector('scb-dialog');
+    if (!dialog) return;
+    const isOpen = toBool(open);
+    try {
+      dialog.open = isOpen;
+    } catch (_) {}
+    if (isOpen) dialog.setAttribute('open', '');
+    else dialog.removeAttribute('open');
+    dispatchChange(dialog, 'openchange', { open: isOpen });
+  };
+
+  api.setNotificationOpen = function (index, open) {
+    const card = getByIndex('scb-notification-card', index);
+    if (!card) return;
+    const isOpen = toBool(open);
+    if (isOpen) card.setAttribute('open', '');
+    else card.removeAttribute('open');
+    dispatchChange(card, 'openchange', { open: isOpen });
+  };
+
+  api.setNotificationOpenById = function (id, open) {
+    const card = getById(id, 'scb-notification-card');
+    if (!card) return;
+    const isOpen = toBool(open);
+    if (isOpen) card.setAttribute('open', '');
+    else card.removeAttribute('open');
+    dispatchChange(card, 'openchange', { open: isOpen });
+  };
+
+  api.setSnackbarOpen = function (index, open) {
+    const sb = getByIndex('scb-snackbar', index);
+    if (!sb) return;
+    const isOpen = toBool(open);
+    if (isOpen) sb.setAttribute('open', '');
+    else sb.removeAttribute('open');
+    dispatchChange(sb, 'openchange', { open: isOpen });
+  };
+
+  api.setSnackbarOpenById = function (id, open) {
+    const sb = getById(id, 'scb-snackbar');
+    if (!sb) return;
+    const isOpen = toBool(open);
+    if (isOpen) sb.setAttribute('open', '');
+    else sb.removeAttribute('open');
+    dispatchChange(sb, 'openchange', { open: isOpen });
+  };
+
+  // Stepper och pagination
+
+  api.setStepperActiveIndex = function (activeIndex) {
+    const stepper = document.querySelector('scb-stepper');
+    if (!stepper) return;
+    const i = typeof activeIndex === 'number' ? activeIndex : parseInt(activeIndex, 10) || 0;
+    const anyStepper = stepper;
+    try {
+      anyStepper.activeIndex = i;
+    } catch (_) {}
+    stepper.setAttribute('active-index', String(i));
+    dispatchChange(stepper, 'stepchange', { activeIndex: i });
+  };
+
+  api.setStepperActiveIndexById = function (id, activeIndex) {
+    const stepper = getById(id, 'scb-stepper');
+    if (!stepper) return;
+    const i = typeof activeIndex === 'number' ? activeIndex : parseInt(activeIndex, 10) || 0;
+    const anyStepper = stepper;
+    try {
+      anyStepper.activeIndex = i;
+    } catch (_) {}
+    stepper.setAttribute('active-index', String(i));
+    dispatchChange(stepper, 'stepchange', { activeIndex: i });
+  };
+
+  api.setPaginationPage = function (paginationIndex, page) {
+    const p = getByIndex('scb-pagination', paginationIndex);
+    if (!p) return;
+    const i = typeof page === 'number' ? page : parseInt(page, 10) || 0;
+    const anyP = p;
+    try {
+      anyP.page = i;
+    } catch (_) {}
+    p.setAttribute('page', String(i));
+    dispatchChange(p, 'pagechange', { page: i });
+  };
+
+  api.setPaginationPageById = function (id, page) {
+    const p = getById(id, 'scb-pagination');
+    if (!p) return;
+    const i = typeof page === 'number' ? page : parseInt(page, 10) || 0;
+    const anyP = p;
+    try {
+      anyP.page = i;
+    } catch (_) {}
+    p.setAttribute('page', String(i));
+    dispatchChange(p, 'pagechange', { page: i });
+  };
+
+  // Radio group
+
+  api.setRadioGroupValueByIndex = function (groupIndex, value) {
+    const group = getByIndex('scb-radio-group', groupIndex);
+    if (!group) return;
+    const v = value == null ? '' : String(value);
+    try {
+      group.value = v;
+    } catch (_) {}
+    group.setAttribute('value', v);
+    dispatchChange(group, 'valuechange', { value: v });
+  };
+
+  api.setRadioGroupValueByName = function (name, value) {
+    if (!name) return;
+    const selector = 'scb-radio-group[name="' + String(name) + '"]';
+    const group = document.querySelector(selector);
+    if (!group) return;
+    const v = value == null ? '' : String(value);
+    try {
+      group.value = v;
+    } catch (_) {}
+    group.setAttribute('value', v);
+    dispatchChange(group, 'valuechange', { value: v });
+  };
+
+  api.setRadioGroupValueById = function (id, value) {
+    const group = getById(id, 'scb-radio-group');
+    if (!group) return;
+    const v = value == null ? '' : String(value);
+    try {
+      group.value = v;
+    } catch (_) {}
+    group.setAttribute('value', v);
+    dispatchChange(group, 'valuechange', { value: v });
+  };
+
+  // Textfield och search
+
+  api.setTextfieldValue = function (index, value) {
+    const tf = getByIndex('scb-textfield', index);
+    if (!tf) return;
+    const v = value == null ? '' : String(value);
+    const anyTf = tf;
+    try {
+      anyTf.value = v;
+    } catch (_) {}
+    tf.setAttribute('value', v);
+    dispatchChange(tf, 'valuechange', { value: v });
+  };
+
+  api.setTextfieldValueById = function (id, value) {
+    const tf = getById(id, 'scb-textfield');
+    if (!tf) return;
+    const v = value == null ? '' : String(value);
+    const anyTf = tf;
+    try {
+      anyTf.value = v;
+    } catch (_) {}
+    tf.setAttribute('value', v);
+    dispatchChange(tf, 'valuechange', { value: v });
+  };
+
+  api.setSearchValue = function (index, value) {
+    const s = getByIndex('scb-search', index);
+    if (!s) return;
+    const v = value == null ? '' : String(value);
+    const anyS = s;
+    try {
+      anyS.value = v;
+    } catch (_) {}
+    s.setAttribute('value', v);
+    dispatchChange(s, 'valuechange', { value: v });
+  };
+
+  api.setSearchValueById = function (id, value) {
+    const s = getById(id, 'scb-search');
+    if (!s) return;
+    const v = value == null ? '' : String(value);
+    const anyS = s;
+    try {
+      anyS.value = v;
+    } catch (_) {}
+    s.setAttribute('value', v);
+    dispatchChange(s, 'valuechange', { value: v });
+  };
+
+  // TOC
+
+  api.setTocItemExpanded = function (tocIndex, itemIndex, expanded) {
+    const toc = getByIndex('scb-toc', tocIndex);
+    if (!toc) return;
+    const items = toc.querySelectorAll('scb-toc-item');
+    if (!items || items.length === 0) return;
+    const i = typeof itemIndex === 'number' ? itemIndex : parseInt(itemIndex, 10) || 0;
+    if (i < 0 || i >= items.length) return;
+    const item = items[i];
+    const isExpanded = toBool(expanded);
+    const anyItem = item;
+    try {
+      anyItem.expanded = isExpanded;
+    } catch (_) {}
+    if (isExpanded) item.setAttribute('expanded', '');
+    else item.removeAttribute('expanded');
+    dispatchChange(item, 'expandedchange', { expanded: isExpanded });
+  };
+
+  api.setTocItemExpandedById = function (itemId, expanded) {
+    const item = getById(itemId, 'scb-toc-item');
+    if (!item) return;
+    const isExpanded = toBool(expanded);
+    const anyItem = item;
+    try {
+      anyItem.expanded = isExpanded;
+    } catch (_) {}
+    if (isExpanded) item.setAttribute('expanded', '');
+    else item.removeAttribute('expanded');
+    dispatchChange(item, 'expandedchange', { expanded: isExpanded });
+  };
+
+  // Viz
+
+  api.setVizSelectedChip = function (index, selectedChip) {
+    const viz = getByIndex('scb-viz', index);
+    if (!viz) return;
+    const value = selectedChip == null ? '' : String(selectedChip);
+    const anyViz = viz;
+    try {
+      anyViz.selectedChip = value;
+    } catch (_) {}
+    dispatchChange(viz, 'valuechange', { value });
+  };
+
+  api.setVizSelectedChipById = function (id, selectedChip) {
+    const viz = getById(id, 'scb-viz');
+    if (!viz) return;
+    const value = selectedChip == null ? '' : String(selectedChip);
+    const anyViz = viz;
+    try {
+      anyViz.selectedChip = value;
+    } catch (_) {}
+    dispatchChange(viz, 'valuechange', { value });
+  };
+})();