scb-wc 0.1.1 → 0.1.2

package/blazor/ScbBlazorInteropBase.cs

@@ -0,0 +1,1663 @@
+/* 
+Bas-klass för Razor-komponenter som vill läsa state från SCB web components.
+JS-bryggan (scb-blazor-bridge.js) samlar state från DOM:en och levererar det som ett ScbStateDto. Den här klassen mappar DTO:t till starkt typade C#-klasser 
+som kan användas direkt i Razor-vyer */
+
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace ScbBlazorDemo
+{
+    public abstract class ScbBlazorInteropBase : ComponentBase, IAsyncDisposable
+    {
+        // JSRuntime används för att anropa SCBBlazor-objektet i scb-blazor-bridge.js
+        [Inject] protected IJSRuntime JS { get; set; } = default!;
+
+        // Håller en .NET-referens som JS kan använda för att ropa tillbaka på OnScbEvent
+        private DotNetObjectReference<ScbBlazorInteropBase>? _dotNetRef;
+
+        // Header (scb-header): aktiv flik, drawerstatus och eventuell söktext
+        protected HeaderState Header { get; private set; } = new();
+
+        // Drawer (scb-drawer): öppet/stängt och texter
+        protected DrawerState Drawer { get; private set; } = new();
+
+        // Meny (scb-menu): övergripande öppet/stängt-läge
+        protected MenuState Menu { get; private set; } = new();
+
+        // Alla submenyer (scb-sub-menu) på sidan
+        protected SubMenuState[] SubMenus { get; private set; } = Array.Empty<SubMenuState>();
+
+        // Breadcrumb (scb-breadcrumb): övergripande state
+        protected BreadcrumbState Breadcrumb { get; private set; } = new();
+
+        // Alla breadcrumb-länkar (scb-breadcrumb-item)
+        protected BreadcrumbItemState[] BreadcrumbItems { get; private set; } = Array.Empty<BreadcrumbItemState>();
+
+        // Alla accordions på sidan (scb-accordion) med sina items
+        protected AccordionListState[] Accordions { get; private set; } = Array.Empty<AccordionListState>();
+
+        // Lista som speglar checkboxarnas valda läge och metadata
+        protected CheckboxState[] Checkboxes { get; private set; } = Array.Empty<CheckboxState>();
+
+        // Lista som speglar switcharnas valda läge och metadata
+        protected SwitchState[] Switches { get; private set; } = Array.Empty<SwitchState>();
+
+        // App-bar (scb-app-bar)
+        protected AppBarState AppBar { get; private set; } = new();
+
+        // Segmented button (scb-segmented-button)
+        protected SegmentedState Segmented { get; private set; } = new();
+
+        // Alla tabbar (scb-tabs) på sidan
+        protected TabsState[] Tabs { get; private set; } = Array.Empty<TabsState>();
+
+        // Stepper (scb-stepper)
+        protected StepperState Stepper { get; private set; } = new();
+
+        // Cards (scb-card) om man vill läsa av state
+        protected CardState[] Cards { get; private set; } = Array.Empty<CardState>();
+
+        // Nyckeltalskort (scb-keyfigure-card)
+        protected KeyfigureState[] Keyfigures { get; private set; } = Array.Empty<KeyfigureState>();
+
+        // Enskild kalender (scb-calendar-card) för scenarion där man bara bryr sig om en
+        protected CalendarState Calendar { get; private set; } = new();
+
+        // Alla kalenderkort på sidan
+        protected CalendarState[] Calendars { get; private set; } = Array.Empty<CalendarState>();
+
+        // Dialog (scb-dialog)
+        protected DialogState Dialog { get; private set; } = new();
+
+        // Alla notification-kort (scb-notification-card) på sidan
+        protected NotificationState[] Notifications { get; private set; } = Array.Empty<NotificationState>();
+
+        // Alla snackbars (scb-snackbar) på sidan
+        protected SnackbarState[] Snackbars { get; private set; } = Array.Empty<SnackbarState>();
+
+        // Alla statuspiller (scb-status-pill) på sidan
+        protected StatusPillState[] StatusPills { get; private set; } = Array.Empty<StatusPillState>();
+
+        // Alla tooltips (scb-tooltip) på sidan
+        protected TooltipState[] Tooltips { get; private set; } = Array.Empty<TooltipState>();
+
+        // Alla pagination-komponenter (scb-pagination) på sidan
+        protected PaginationState[] Paginations { get; private set; } = Array.Empty<PaginationState>();
+
+        // Alla radio-grupper (scb-radio-group) på sidan
+        protected RadioGroupState[] RadioGroups { get; private set; } = Array.Empty<RadioGroupState>();
+
+        // Alla textfält (scb-textfield) på sidan
+        protected TextfieldState[] Textfields { get; private set; } = Array.Empty<TextfieldState>();
+
+        // Alla sökfält (fristående scb-search) på sidan
+        protected SearchState[] Searches { get; private set; } = Array.Empty<SearchState>();
+
+        // Alla listor (scb-list) med sina list-items (scb-list-item)
+        protected ListState[] Lists { get; private set; } = Array.Empty<ListState>();
+
+        // Alla länkar (scb-link) på sidan
+        protected LinkState[] Links { get; private set; } = Array.Empty<LinkState>();
+
+        // Alla innehållsförteckningar (scb-toc) på sidan
+        protected TocState[] Tocs { get; private set; } = Array.Empty<TocState>();
+
+        // Alla viz-komponenter (scb-viz) på sidan
+        protected VizState[] Viz { get; private set; } = Array.Empty<VizState>();
+
+        // Registrerar JS-interop vid första render och hämtar initialt state
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+            {
+                // Skapar en .NET-referens så att JS kan anropa OnScbEvent på rätt instans
+                _dotNetRef = DotNetObjectReference.Create(this);
+
+                // Registrerar eventhanterare i JS (i scb-blazor-bridge.js)
+                await JS.InvokeVoidAsync("SCBBlazor.registerScbEventHandlers", _dotNetRef);
+
+                // Hämtar första snapshoten av state
+                await RefreshScbStateAsync();
+            }
+        }
+
+        // Läser in hela state-strukturen från JS och mappar till C#-klasserna ovan
+        public async Task RefreshScbStateAsync()
+        {
+            // Hämtar DTO från globala SCBBlazor.getState
+            var state = await JS.InvokeAsync<ScbStateDto>("SCBBlazor.getState");
+
+            // Header
+            Header.ActiveTab  = state.Header.ActiveTab;
+            Header.DrawerOpen = state.Header.DrawerOpen;
+            Header.SearchText = state.Header.SearchText ?? string.Empty;
+
+            // Drawer
+            if (state.Drawer is not null)
+            {
+                Drawer.Open     = state.Drawer.Open;
+                Drawer.Label    = state.Drawer.Label ?? string.Empty;
+                Drawer.SubLabel = state.Drawer.SubLabel ?? string.Empty;
+            }
+            else
+            {
+                Drawer.Open     = false;
+                Drawer.Label    = string.Empty;
+                Drawer.SubLabel = string.Empty;
+            }
+
+            // Meny
+            if (state.Menu is not null)
+            {
+                Menu.Open = state.Menu.Open;
+            }
+            else
+            {
+                Menu.Open = false;
+            }
+
+            // Sub-menyer
+            if (state.SubMenus is not null && state.SubMenus.Length > 0)
+            {
+                var subMenus = new SubMenuState[state.SubMenus.Length];
+                for (var i = 0; i < state.SubMenus.Length; i++)
+                {
+                    var dto = state.SubMenus[i];
+                    subMenus[i] = new SubMenuState
+                    {
+                        Open     = dto.Open,
+                        OpenLeft = dto.OpenLeft
+                    };
+                }
+
+                SubMenus = subMenus;
+            }
+            else
+            {
+                SubMenus = Array.Empty<SubMenuState>();
+            }
+
+            // Breadcrumb
+            if (state.Breadcrumb is not null)
+            {
+                Breadcrumb.ShowAll = state.Breadcrumb.ShowAll;
+            }
+            else
+            {
+                Breadcrumb.ShowAll = false;
+            }
+
+            // Breadcrumb-items
+            if (state.BreadcrumbItems is not null && state.BreadcrumbItems.Length > 0)
+            {
+                var items = new BreadcrumbItemState[state.BreadcrumbItems.Length];
+                for (var i = 0; i < state.BreadcrumbItems.Length; i++)
+                {
+                    var dto = state.BreadcrumbItems[i];
+                    items[i] = new BreadcrumbItemState
+                    {
+                        Label     = dto.Label ?? string.Empty,
+                        IsCurrent = dto.IsCurrent,
+                        Href      = dto.Href ?? string.Empty,
+                    };
+                }
+
+                BreadcrumbItems = items;
+            }
+            else
+            {
+                BreadcrumbItems = Array.Empty<BreadcrumbItemState>();
+            }
+
+            // Accordions
+            if (state.Accordions is not null && state.Accordions.Length > 0)
+            {
+                var accordions = new AccordionListState[state.Accordions.Length];
+                for (var i = 0; i < state.Accordions.Length; i++)
+                {
+                    var dto = state.Accordions[i];
+                    var items = dto.Items ?? Array.Empty<AccordionItemDto>();
+                    var itemStates = new AccordionItemState[items.Length];
+
+                    for (var j = 0; j < items.Length; j++)
+                    {
+                        var itemDto = items[j];
+                        itemStates[j] = new AccordionItemState
+                        {
+                            Open           = itemDto.Open,
+                            Title          = itemDto.Title ?? string.Empty,
+                            Overline       = itemDto.Overline ?? string.Empty,
+                            SupportingText = itemDto.SupportingText ?? string.Empty
+                        };
+                    }
+
+                    accordions[i] = new AccordionListState
+                    {
+                        Detached = dto.Detached,
+                        Items    = itemStates
+                    };
+                }
+
+                Accordions = accordions;
+            }
+            else
+            {
+                Accordions = Array.Empty<AccordionListState>();
+            }
+
+            // Checkboxar och switchar
+            Checkboxes = (state.Checkboxes ?? Array.Empty<CheckboxDto>())
+                .Select(dto => new CheckboxState
+                {
+                    Checked = dto.Checked,
+                    Name    = dto.Name  ?? string.Empty,
+                    Value   = dto.Value ?? string.Empty,
+                    Label   = dto.Label ?? string.Empty,
+                })
+                .ToArray();
+
+            Switches = (state.Switches ?? Array.Empty<SwitchDto>())
+                .Select(dto => new SwitchState
+                {
+                    Selected = dto.Selected,
+                    Name     = dto.Name  ?? string.Empty,
+                    Value    = dto.Value ?? string.Empty,
+                    Label    = dto.Label ?? string.Empty,
+                })
+                .ToArray();
+
+            // App-bar
+            AppBar.Title                = state.AppBar.Title ?? string.Empty;
+            AppBar.Type                 = string.IsNullOrWhiteSpace(state.AppBar.Type) ? "default" : state.AppBar.Type!;
+            AppBar.Position             = string.IsNullOrWhiteSpace(state.AppBar.Position) ? "default" : state.AppBar.Position!;
+            AppBar.SearchSupportingText = state.AppBar.SearchSupportingText ?? string.Empty;
+
+            // Segmented button
+            if (state.Segmented is not null)
+            {
+                Segmented.Value  = state.Segmented.Value ?? string.Empty;
+                Segmented.Values = state.Segmented.Values ?? Array.Empty<string>();
+            }
+            else
+            {
+                Segmented.Value  = string.Empty;
+                Segmented.Values = Array.Empty<string>();
+            }
+
+            // Tabs
+            if (state.Tabs is not null && state.Tabs.Length > 0)
+            {
+                var tabs = new TabsState[state.Tabs.Length];
+                for (var i = 0; i < state.Tabs.Length; i++)
+                {
+                    var dto = state.Tabs[i];
+                    tabs[i] = new TabsState
+                    {
+                        ActiveIndex = dto.ActiveIndex
+                    };
+                }
+                Tabs = tabs;
+            }
+            else
+            {
+                Tabs = Array.Empty<TabsState>();
+            }
+
+            // Stepper
+            if (state.Stepper is not null)
+            {
+                Stepper.ActiveIndex = state.Stepper.ActiveIndex;
+                Stepper.TotalSteps  = state.Stepper.TotalSteps;
+            }
+            else
+            {
+                Stepper.ActiveIndex = 0;
+                Stepper.TotalSteps  = 0;
+            }
+
+            // Cards
+            if (state.Cards is not null && state.Cards.Length > 0)
+            {
+                var cards = new CardState[state.Cards.Length];
+                for (var i = 0; i < state.Cards.Length; i++)
+                {
+                    var dto = state.Cards[i];
+                    cards[i] = new CardState
+                    {
+                        Type           = dto.Type           ?? string.Empty,
+                        Variant        = dto.Variant        ?? string.Empty,
+                        Direction      = dto.Direction      ?? string.Empty,
+                        Title          = dto.Title          ?? string.Empty,
+                        Subtitle       = dto.Subtitle       ?? string.Empty,
+                        SupportingText = dto.SupportingText ?? string.Empty,
+                        CardHref       = dto.CardHref       ?? string.Empty
+                    };
+                }
+                Cards = cards;
+            }
+            else
+            {
+                Cards = Array.Empty<CardState>();
+            }
+
+            // Keyfigure cards
+            if (state.Keyfigures is not null && state.Keyfigures.Length > 0)
+            {
+                var keyfigs = new KeyfigureState[state.Keyfigures.Length];
+                for (var i = 0; i < state.Keyfigures.Length; i++)
+                {
+                    var dto = state.Keyfigures[i];
+                    keyfigs[i] = new KeyfigureState
+                    {
+                        Keyfigure      = dto.Keyfigure      ?? string.Empty,
+                        Subtitle       = dto.Subtitle       ?? string.Empty,
+                        SupportingText = dto.SupportingText ?? string.Empty,
+                        CardHref       = dto.CardHref       ?? string.Empty,
+                        Icon           = dto.Icon           ?? string.Empty,
+                        Size           = dto.Size           ?? string.Empty,
+                        Unit           = dto.Unit           ?? string.Empty
+                    };
+                }
+                Keyfigures = keyfigs;
+            }
+            else
+            {
+                Keyfigures = Array.Empty<KeyfigureState>();
+            }
+
+            // Enskild kalender: baseras på första kalendern om en lista finns, annars på state.Calendar
+            if (state.Calendars is not null && state.Calendars.Length > 0)
+            {
+                var dto = state.Calendars[0];
+                Calendar.Title          = dto.Title          ?? string.Empty;
+                Calendar.Subtitle       = dto.Subtitle       ?? string.Empty;
+                Calendar.SupportingText = dto.SupportingText ?? string.Empty;
+                Calendar.Variant        = string.IsNullOrWhiteSpace(dto.Variant)
+                    ? "default"
+                    : dto.Variant!;
+                Calendar.ShowMedia      = dto.ShowMedia;
+            }
+            else if (state.Calendar is not null)
+            {
+                Calendar.Title          = state.Calendar.Title ?? string.Empty;
+                Calendar.Subtitle       = state.Calendar.Subtitle ?? string.Empty;
+                Calendar.SupportingText = state.Calendar.SupportingText ?? string.Empty;
+                Calendar.Variant        = string.IsNullOrWhiteSpace(state.Calendar.Variant)
+                    ? "default"
+                    : state.Calendar.Variant!;
+                Calendar.ShowMedia      = state.Calendar.ShowMedia;
+            }
+            else
+            {
+                Calendar.Title          = string.Empty;
+                Calendar.Subtitle       = string.Empty;
+                Calendar.SupportingText = string.Empty;
+                Calendar.Variant        = "default";
+                Calendar.ShowMedia      = false;
+            }
+
+            // Lista med alla calendar cards
+            if (state.Calendars is not null && state.Calendars.Length > 0)
+            {
+                var calendars = new CalendarState[state.Calendars.Length];
+                for (var i = 0; i < state.Calendars.Length; i++)
+                {
+                    var dto = state.Calendars[i];
+                    calendars[i] = new CalendarState
+                    {
+                        Title          = dto.Title          ?? string.Empty,
+                        Subtitle       = dto.Subtitle       ?? string.Empty,
+                        SupportingText = dto.SupportingText ?? string.Empty,
+                        Variant        = string.IsNullOrWhiteSpace(dto.Variant)
+                            ? "default"
+                            : dto.Variant!,
+                        ShowMedia      = dto.ShowMedia
+                    };
+                }
+
+                Calendars = calendars;
+            }
+            else
+            {
+                Calendars = Array.Empty<CalendarState>();
+            }
+
+            // Dialog
+            if (state.Dialog is not null)
+            {
+                Dialog.Open    = state.Dialog.Open;
+                Dialog.Variant = state.Dialog.Variant ?? string.Empty;
+                Dialog.Label   = state.Dialog.Label ?? string.Empty;
+            }
+            else
+            {
+                Dialog.Open    = false;
+                Dialog.Variant = string.Empty;
+                Dialog.Label   = string.Empty;
+            }
+
+            // Notification cards
+            if (state.Notifications is not null && state.Notifications.Length > 0)
+            {
+                var notifications = new NotificationState[state.Notifications.Length];
+                for (var i = 0; i < state.Notifications.Length; i++)
+                {
+                    var dto = state.Notifications[i];
+                    notifications[i] = new NotificationState
+                    {
+                        Open            = dto.Open,
+                        Variant         = dto.Variant         ?? string.Empty,
+                        Title           = dto.Title           ?? string.Empty,
+                        Subtitle        = dto.Subtitle        ?? string.Empty,
+                        SupportingText  = dto.SupportingText  ?? string.Empty,
+                        LinkText        = dto.LinkText        ?? string.Empty,
+                        LinkHref        = dto.LinkHref        ?? string.Empty,
+                        ShowIcon        = dto.ShowIcon,
+                        ShowCloseButton = dto.ShowCloseButton,
+                        FullHeight      = dto.FullHeight,
+                        FullWidth       = dto.FullWidth,
+                        Direction       = dto.Direction       ?? string.Empty
+                    };
+                }
+                Notifications = notifications;
+            }
+            else
+            {
+                Notifications = Array.Empty<NotificationState>();
+            }
+
+            // Snackbars
+            if (state.Snackbars is not null && state.Snackbars.Length > 0)
+            {
+                var snackbars = new SnackbarState[state.Snackbars.Length];
+                for (var i = 0; i < state.Snackbars.Length; i++)
+                {
+                    var dto = state.Snackbars[i];
+                    snackbars[i] = new SnackbarState
+                    {
+                        Open             = dto.Open,
+                        Message          = dto.Message         ?? string.Empty,
+                        ActionText       = dto.ActionText      ?? string.Empty,
+                        ShowClose        = dto.ShowClose,
+                        Fixed            = dto.Fixed,
+                        Fadeout          = dto.Fadeout,
+                        WithLongerAction = dto.WithLongerAction
+                    };
+                }
+                Snackbars = snackbars;
+            }
+            else
+            {
+                Snackbars = Array.Empty<SnackbarState>();
+            }
+
+            // Status pills
+            if (state.StatusPills is not null && state.StatusPills.Length > 0)
+            {
+                var pills = new StatusPillState[state.StatusPills.Length];
+                for (var i = 0; i < state.StatusPills.Length; i++)
+                {
+                    var dto = state.StatusPills[i];
+                    pills[i] = new StatusPillState
+                    {
+                        Status   = dto.Status   ?? string.Empty,
+                        Label    = dto.Label    ?? string.Empty,
+                        ShowIcon = dto.ShowIcon
+                    };
+                }
+                StatusPills = pills;
+            }
+            else
+            {
+                StatusPills = Array.Empty<StatusPillState>();
+            }
+
+            // Tooltips
+            if (state.Tooltips is not null && state.Tooltips.Length > 0)
+            {
+                var tips = new TooltipState[state.Tooltips.Length];
+                for (var i = 0; i < state.Tooltips.Length; i++)
+                {
+                    var dto = state.Tooltips[i];
+                    tips[i] = new TooltipState
+                    {
+                        Open           = dto.Open,
+                        Variant        = dto.Variant        ?? string.Empty,
+                        Position       = dto.Position       ?? string.Empty,
+                        Trigger        = dto.Trigger        ?? string.Empty,
+                        Delay          = dto.Delay,
+                        Offset         = dto.Offset,
+                        Label          = dto.Label          ?? string.Empty,
+                        SupportingText = dto.SupportingText ?? string.Empty
+                    };
+                }
+                Tooltips = tips;
+            }
+            else
+            {
+                Tooltips = Array.Empty<TooltipState>();
+            }
+
+            // Pagination
+            if (state.Paginations is not null && state.Paginations.Length > 0)
+            {
+                var paginations = new PaginationState[state.Paginations.Length];
+                for (var i = 0; i < state.Paginations.Length; i++)
+                {
+                    var dto = state.Paginations[i];
+                    paginations[i] = new PaginationState
+                    {
+                        Page       = dto.Page,
+                        TotalPages = dto.TotalPages
+                    };
+                }
+
+                Paginations = paginations;
+            }
+            else
+            {
+                Paginations = Array.Empty<PaginationState>();
+            }
+
+            // Radio groups
+            if (state.RadioGroups is not null && state.RadioGroups.Length > 0)
+            {
+                var groups = new RadioGroupState[state.RadioGroups.Length];
+                for (var i = 0; i < state.RadioGroups.Length; i++)
+                {
+                    var dto = state.RadioGroups[i];
+                    groups[i] = new RadioGroupState
+                    {
+                        Name  = dto.Name  ?? string.Empty,
+                        Value = dto.Value ?? string.Empty
+                    };
+                }
+                RadioGroups = groups;
+            }
+            else
+            {
+                RadioGroups = Array.Empty<RadioGroupState>();
+            }
+
+            // Textfield
+            if (state.Textfields is not null && state.Textfields.Length > 0)
+            {
+                var fields = new TextfieldState[state.Textfields.Length];
+                for (var i = 0; i < state.Textfields.Length; i++)
+                {
+                    var dto = state.Textfields[i];
+                    fields[i] = new TextfieldState
+                    {
+                        Value          = dto.Value          ?? string.Empty,
+                        Label          = dto.Label          ?? string.Empty,
+                        SupportingText = dto.SupportingText ?? string.Empty,
+                        Error          = dto.Error,
+                        Name           = dto.Name           ?? string.Empty,
+                        Id             = dto.Id             ?? string.Empty
+                    };
+                }
+                Textfields = fields;
+            }
+            else
+            {
+                Textfields = Array.Empty<TextfieldState>();
+            }
+
+            // Search
+            if (state.Searches is not null && state.Searches.Length > 0)
+            {
+                var searches = new SearchState[state.Searches.Length];
+                for (var i = 0; i < state.Searches.Length; i++)
+                {
+                    var dto = state.Searches[i];
+                    searches[i] = new SearchState
+                    {
+                        Value          = dto.Value          ?? string.Empty,
+                        SupportingText = dto.SupportingText ?? string.Empty,
+                        FullScreen     = dto.FullScreen,
+                        Size           = dto.Size           ?? string.Empty,
+                        Name           = dto.Name           ?? string.Empty,
+                        Id             = dto.Id             ?? string.Empty
+                    };
+                }
+                Searches = searches;
+            }
+            else
+            {
+                Searches = Array.Empty<SearchState>();
+            }
+
+            // Listor
+            if (state.Lists is not null && state.Lists.Length > 0)
+            {
+                var lists = new ListState[state.Lists.Length];
+                for (var i = 0; i < state.Lists.Length; i++)
+                {
+                    var listDto   = state.Lists[i];
+                    var itemsDto  = listDto.Items ?? Array.Empty<ListItemDto>();
+                    var itemStates = new ListItemState[itemsDto.Length];
+
+                    for (var j = 0; j < itemsDto.Length; j++)
+                    {
+                        var itemDto = itemsDto[j];
+                        itemStates[j] = new ListItemState
+                        {
+                            Type            = itemDto.Type            ?? string.Empty,
+                            Label           = itemDto.Label           ?? string.Empty,
+                            SupportingText  = itemDto.SupportingText  ?? string.Empty,
+                            Overline        = itemDto.Overline        ?? string.Empty,
+                            Leading         = itemDto.Leading,
+                            LeadingVariant  = itemDto.LeadingVariant  ?? string.Empty,
+                            LeadingIcon     = itemDto.LeadingIcon     ?? string.Empty,
+                            Trailing        = itemDto.Trailing,
+                            TrailingVariant = itemDto.TrailingVariant ?? string.Empty,
+                            TrailingIcon    = itemDto.TrailingIcon    ?? string.Empty,
+                            Disabled        = itemDto.Disabled,
+                            Href            = itemDto.Href            ?? string.Empty,
+                            ItemHref        = itemDto.ItemHref        ?? string.Empty,
+                            Target          = itemDto.Target          ?? string.Empty,
+                            Density         = itemDto.Density,
+                            NoDivider       = itemDto.NoDivider,
+                            ImgHrefImage    = itemDto.ImgHrefImage    ?? string.Empty,
+                            AvatarLabel     = itemDto.AvatarLabel     ?? string.Empty,
+                            AvatarAlt       = itemDto.AvatarAlt       ?? string.Empty,
+                            AvatarVariant   = itemDto.AvatarVariant   ?? string.Empty,
+                            AvatarSrc       = itemDto.AvatarSrc       ?? string.Empty
+                        };
+                    }
+
+                    lists[i] = new ListState
+                    {
+                        NoDivider = listDto.NoDivider,
+                        Items     = itemStates
+                    };
+                }
+
+                Lists = lists;
+            }
+            else
+            {
+                Lists = Array.Empty<ListState>();
+            }
+
+            // Links
+            if (state.Links is not null && state.Links.Length > 0)
+            {
+                var links = new LinkState[state.Links.Length];
+                for (var i = 0; i < state.Links.Length; i++)
+                {
+                    var dto = state.Links[i];
+                    links[i] = new LinkState
+                    {
+                        Href      = dto.Href      ?? string.Empty,
+                        Target    = dto.Target    ?? string.Empty,
+                        Rel       = dto.Rel       ?? string.Empty,
+                        Download  = dto.Download  ?? string.Empty,
+                        Disabled  = dto.Disabled,
+                        AriaLabel = dto.AriaLabel ?? string.Empty,
+                        Text      = dto.Text      ?? string.Empty
+                    };
+                }
+
+                Links = links;
+            }
+            else
+            {
+                Links = Array.Empty<LinkState>();
+            }
+
+            // TOC
+            if (state.Tocs is not null && state.Tocs.Length > 0)
+            {
+                var tocs = new TocState[state.Tocs.Length];
+                for (var i = 0; i < state.Tocs.Length; i++)
+                {
+                    var dto = state.Tocs[i];
+                    var itemsDto = dto.Items ?? Array.Empty<TocItemDto>();
+                    var itemStates = new TocItemState[itemsDto.Length];
+
+                    for (var j = 0; j < itemsDto.Length; j++)
+                    {
+                        var itemDto = itemsDto[j];
+                        itemStates[j] = new TocItemState
+                        {
+                            Expanded       = itemDto.Expanded,
+                            Label          = itemDto.Label          ?? string.Empty,
+                            SupportingText = itemDto.SupportingText ?? string.Empty,
+                            ItemHref       = itemDto.ItemHref       ?? string.Empty,
+                            Divider        = itemDto.Divider
+                        };
+                    }
+
+                    tocs[i] = new TocState
+                    {
+                        Detached = dto.Detached,
+                        Items    = itemStates
+                    };
+                }
+
+                Tocs = tocs;
+            }
+            else
+            {
+                Tocs = Array.Empty<TocState>();
+            }
+
+            // Viz
+            if (state.Viz is not null && state.Viz.Length > 0)
+            {
+                var vizStates = new VizState[state.Viz.Length];
+                for (var i = 0; i < state.Viz.Length; i++)
+                {
+                    var dto = state.Viz[i];
+                    vizStates[i] = new VizState
+                    {
+                        Variant      = dto.Variant      ?? string.Empty,
+                        Title        = dto.Title        ?? string.Empty,
+                        Subtitle     = dto.Subtitle     ?? string.Empty,
+                        Description  = dto.Description  ?? string.Empty,
+                        Comment      = dto.Comment      ?? string.Empty,
+                        Source       = dto.Source       ?? string.Empty,
+                        Footnote     = dto.Footnote     ?? string.Empty,
+                        Lang         = dto.Lang         ?? string.Empty,
+                        ImageHref    = dto.ImageHref    ?? string.Empty,
+                        SelectedChip = dto.SelectedChip ?? string.Empty
+                    };
+                }
+
+                Viz = vizStates;
+            }
+            else
+            {
+                Viz = Array.Empty<VizState>();
+            }
+
+            // Hook för arvklasser som vill reagera när state uppdateras
+            await OnScbStateChangedAsync();
+
+            // Talar om för Blazor att state har ändrats
+            StateHasChanged();
+        }
+
+        // JS anropar denna metod när något normaliserat event inträffar
+        [JSInvokable]
+        public Task OnScbEvent(string eventName)
+        {
+            return RefreshScbStateAsync();
+        }
+
+        // Kan overridas i arvklasser för att reagera på stateändringar
+        protected virtual Task OnScbStateChangedAsync() => Task.CompletedTask;
+
+        public ValueTask DisposeAsync()
+        {
+            _dotNetRef?.Dispose();
+            return ValueTask.CompletedTask;
+        }
+
+        
+
+        // Styrkommandon som skickar anrop från Blazor till SCB web components via SCBBlazor-objektet i JS.
+        // Dessa metoder uppdaterar DOM:ens state och triggar samma normaliserade events som vid användarinteraktion.
+        // Id- och name-baserade varianter rekommenderas för mer robust adressering än ren index-baserad styrning.
+
+        // Header (scb-header)
+        protected Task SetHeaderActiveTabAsync(int activeTab)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setHeaderActiveTab", activeTab).AsTask();
+        }
+
+        protected Task SetHeaderDrawerOpenAsync(bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setHeaderDrawerOpen", open).AsTask();
+        }
+
+        protected Task SetHeaderSearchTextAsync(string searchText)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setHeaderSearchText", searchText ?? string.Empty).AsTask();
+        }
+
+        // Drawer och meny
+        protected Task SetDrawerOpenAsync(bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setDrawerOpen", open).AsTask();
+        }
+
+        protected Task SetDrawerTextAsync(string label, string subLabel)
+        {
+            return JS.InvokeVoidAsync(
+                "SCBBlazor.setDrawerText",
+                label ?? string.Empty,
+                subLabel ?? string.Empty).AsTask();
+        }
+
+        protected Task SetMenuOpenAsync(bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setMenuOpen", open).AsTask();
+        }
+
+        // Sub-menyer: index-baserad och id-baserad variant
+        protected Task SetSubMenuOpenAsync(int index, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSubMenuOpen", index, open).AsTask();
+        }
+
+        protected Task SetSubMenuOpenByIdAsync(string id, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSubMenuOpenById", id ?? string.Empty, open).AsTask();
+        }
+
+        // Breadcrumb
+        protected Task SetBreadcrumbShowAllAsync(bool showAll)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setBreadcrumbShowAll", showAll).AsTask();
+        }
+
+        // Accordions: index-baserad och id-baserad variant för items
+        protected Task SetAccordionItemOpenAsync(int accordionIndex, int itemIndex, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setAccordionItemOpen", accordionIndex, itemIndex, open).AsTask();
+        }
+
+        protected Task SetAccordionItemOpenByIdAsync(string itemId, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setAccordionItemOpenById", itemId ?? string.Empty, open).AsTask();
+        }
+
+        // Checkboxar: index-baserad och id-baserad variant
+        protected Task SetCheckboxCheckedAsync(int index, bool isChecked)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setCheckboxChecked", index, isChecked).AsTask();
+        }
+
+        protected Task SetCheckboxCheckedByIdAsync(string id, bool isChecked)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setCheckboxCheckedById", id ?? string.Empty, isChecked).AsTask();
+        }
+
+        // Switchar: index-baserad och id-baserad variant
+        protected Task SetSwitchSelectedAsync(int index, bool selected)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSwitchSelected", index, selected).AsTask();
+        }
+
+        protected Task SetSwitchSelectedByIdAsync(string id, bool selected)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSwitchSelectedById", id ?? string.Empty, selected).AsTask();
+        }
+
+        // Segmented button: global och id-baserad variant
+        protected Task SetSegmentedValueAsync(string value)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSegmentedValue", value ?? string.Empty).AsTask();
+        }
+
+        protected Task SetSegmentedValuesAsync(string[] values)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSegmentedValues", values ?? Array.Empty<string>()).AsTask();
+        }
+
+        protected Task SetSegmentedValueByIdAsync(string id, string value)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSegmentedValueById", id ?? string.Empty, value ?? string.Empty).AsTask();
+        }
+
+        protected Task SetSegmentedValuesByIdAsync(string id, string[] values)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSegmentedValuesById", id ?? string.Empty, values ?? Array.Empty<string>()).AsTask();
+        }
+
+        // Tabs: index-baserad och id-baserad variant
+        protected Task SetTabsActiveIndexAsync(int tabsIndex, int activeIndex)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setTabsActiveIndex", tabsIndex, activeIndex).AsTask();
+        }
+
+        protected Task SetTabsActiveIndexByIdAsync(string id, int activeIndex)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setTabsActiveIndexById", id ?? string.Empty, activeIndex).AsTask();
+        }
+
+        // Dialog
+        protected Task SetDialogOpenAsync(bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setDialogOpen", open).AsTask();
+        }
+
+        // Notification: index-baserad och id-baserad variant
+        protected Task SetNotificationOpenAsync(int index, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setNotificationOpen", index, open).AsTask();
+        }
+
+        protected Task SetNotificationOpenByIdAsync(string id, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setNotificationOpenById", id ?? string.Empty, open).AsTask();
+        }
+
+        // Snackbar: index-baserad och id-baserad variant
+        protected Task SetSnackbarOpenAsync(int index, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSnackbarOpen", index, open).AsTask();
+        }
+
+        protected Task SetSnackbarOpenByIdAsync(string id, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSnackbarOpenById", id ?? string.Empty, open).AsTask();
+        }
+
+        // Stepper: global och id-baserad variant
+        protected Task SetStepperActiveIndexAsync(int activeIndex)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setStepperActiveIndex", activeIndex).AsTask();
+        }
+
+        protected Task SetStepperActiveIndexByIdAsync(string id, int activeIndex)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setStepperActiveIndexById", id ?? string.Empty, activeIndex).AsTask();
+        }
+
+        // Pagination: index-baserad och id-baserad variant
+        protected Task SetPaginationPageAsync(int paginationIndex, int page)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setPaginationPage", paginationIndex, page).AsTask();
+        }
+
+        protected Task SetPaginationPageByIdAsync(string id, int page)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setPaginationPageById", id ?? string.Empty, page).AsTask();
+        }
+
+        // Radio-group: index-, name- och id-baserad variant
+        protected Task SetRadioGroupValueByIndexAsync(int index, string value)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setRadioGroupValueByIndex", index, value ?? string.Empty).AsTask();
+        }
+
+        protected Task SetRadioGroupValueByNameAsync(string name, string value)
+        {
+            return JS.InvokeVoidAsync(
+                "SCBBlazor.setRadioGroupValueByName",
+                name ?? string.Empty,
+                value ?? string.Empty).AsTask();
+        }
+
+        protected Task SetRadioGroupValueByIdAsync(string id, string value)
+        {
+            return JS.InvokeVoidAsync(
+                "SCBBlazor.setRadioGroupValueById",
+                id ?? string.Empty,
+                value ?? string.Empty).AsTask();
+        }
+
+        // Textfield: index- och id-baserad variant
+        protected Task SetTextfieldValueAsync(int index, string value)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setTextfieldValue", index, value ?? string.Empty).AsTask();
+        }
+
+        protected Task SetTextfieldValueByIdAsync(string id, string value)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setTextfieldValueById", id ?? string.Empty, value ?? string.Empty).AsTask();
+        }
+
+        // Search: index- och id-baserad variant
+        protected Task SetSearchValueAsync(int index, string value)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSearchValue", index, value ?? string.Empty).AsTask();
+        }
+
+        protected Task SetSearchValueByIdAsync(string id, string value)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSearchValueById", id ?? string.Empty, value ?? string.Empty).AsTask();
+        }
+
+        // TOC: index-baserad och id-baserad variant för items
+        protected Task SetTocItemExpandedAsync(int tocIndex, int itemIndex, bool expanded)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setTocItemExpanded", tocIndex, itemIndex, expanded).AsTask();
+        }
+
+        protected Task SetTocItemExpandedByIdAsync(string itemId, bool expanded)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setTocItemExpandedById", itemId ?? string.Empty, expanded).AsTask();
+        }
+
+        // Viz: index- och id-baserad variant
+        protected Task SetVizSelectedChipAsync(int index, string selectedChip)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setVizSelectedChip", index, selectedChip ?? string.Empty).AsTask();
+        }
+
+        protected Task SetVizSelectedChipByIdAsync(string id, string selectedChip)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setVizSelectedChipById", id ?? string.Empty, selectedChip ?? string.Empty).AsTask();
+        }
+
+// Nedan följer alla state-klasser som används i Razor views
+
+        protected sealed class HeaderState
+        {
+            public int ActiveTab { get; set; }
+            public bool   DrawerOpen { get; set; }
+            public string SearchText { get; set; } = string.Empty;
+        }
+
+        protected sealed class DrawerState
+        {
+            public bool   Open { get; set; }
+            public string Label { get; set; } = string.Empty;
+            public string SubLabel { get; set; } = string.Empty;
+        }
+
+        protected sealed class MenuState
+        {
+            public bool Open { get; set; }
+        }
+
+        protected sealed class SubMenuState
+        {
+            public bool Open { get; set; }
+            public bool OpenLeft { get; set; }
+        }
+
+        protected sealed class BreadcrumbState
+        {
+            public bool ShowAll { get; set; }
+        }
+
+        protected sealed class BreadcrumbItemState
+        {
+            public string Label    { get; set; } = string.Empty;
+            public bool   IsCurrent { get; set; }
+            public string Href     { get; set; } = string.Empty;
+        }
+
+        protected sealed class AccordionListState
+        {
+            public bool Detached { get; set; }
+            public AccordionItemState[] Items { get; set; } = Array.Empty<AccordionItemState>();
+        }
+
+        protected sealed class AccordionItemState
+        {
+            public bool   Open           { get; set; }
+            public string Title          { get; set; } = string.Empty;
+            public string Overline       { get; set; } = string.Empty;
+            public string SupportingText { get; set; } = string.Empty;
+        }
+
+        protected sealed class CheckboxState
+        {
+            public bool   Checked { get; set; }
+            public string Name    { get; set; } = string.Empty;
+            public string Value   { get; set; } = string.Empty;
+            public string Label   { get; set; } = string.Empty;
+        }
+
+        protected sealed class SwitchState
+        {
+            public bool   Selected { get; set; }
+            public string Name     { get; set; } = string.Empty;
+            public string Value    { get; set; } = string.Empty;
+            public string Label    { get; set; } = string.Empty;
+        }
+
+        protected sealed class AppBarState
+        {
+            public string Title { get; set; } = string.Empty;
+            public string Type { get; set; } = "default";
+            public string Position { get; set; } = "default";
+            public string SearchSupportingText { get; set; } = string.Empty;
+        }
+
+        protected sealed class SegmentedState
+        {
+            public string   Value  { get; set; } = string.Empty;
+            public string[] Values { get; set; } = Array.Empty<string>();
+        }
+
+        protected sealed class TabsState
+        {
+            public int ActiveIndex { get; set; }
+        }
+
+        protected sealed class StepperState
+        {
+            public int ActiveIndex { get; set; }
+            public int TotalSteps  { get; set; }
+        }
+
+        protected sealed class CardState
+        {
+            public string Type           { get; set; } = string.Empty;
+            public string Variant        { get; set; } = string.Empty;
+            public string Direction      { get; set; } = string.Empty;
+            public string Title          { get; set; } = string.Empty;
+            public string Subtitle       { get; set; } = string.Empty;
+            public string SupportingText { get; set; } = string.Empty;
+            public string CardHref       { get; set; } = string.Empty;
+        }
+
+        protected sealed class KeyfigureState
+        {
+            public string Keyfigure      { get; set; } = string.Empty;
+            public string Subtitle       { get; set; } = string.Empty;
+            public string SupportingText { get; set; } = string.Empty;
+            public string CardHref       { get; set; } = string.Empty;
+            public string Icon           { get; set; } = string.Empty;
+            public string Size           { get; set; } = string.Empty;
+            public string Unit           { get; set; } = string.Empty;
+        }
+
+        protected sealed class CalendarState
+        {
+            public string Title          { get; set; } = string.Empty;
+            public string Subtitle       { get; set; } = string.Empty;
+            public string SupportingText { get; set; } = string.Empty;
+            public string Variant        { get; set; } = "default";
+            public bool   ShowMedia      { get; set; }
+        }
+
+        protected sealed class DialogState
+        {
+            public bool   Open    { get; set; }
+            public string Variant { get; set; } = string.Empty;
+            public string Label   { get; set; } = string.Empty;
+        }
+
+        protected sealed class NotificationState
+        {
+            public bool   Open            { get; set; }
+            public string Variant         { get; set; } = string.Empty;
+            public string Title           { get; set; } = string.Empty;
+            public string Subtitle        { get; set; } = string.Empty;
+            public string SupportingText  { get; set; } = string.Empty;
+            public string LinkText        { get; set; } = string.Empty;
+            public string LinkHref        { get; set; } = string.Empty;
+            public bool   ShowIcon        { get; set; }
+            public bool   ShowCloseButton { get; set; }
+            public bool   FullHeight      { get; set; }
+            public bool   FullWidth       { get; set; }
+            public string Direction       { get; set; } = string.Empty;
+        }
+
+        protected sealed class SnackbarState
+        {
+            public bool   Open             { get; set; }
+            public string Message          { get; set; } = string.Empty;
+            public string ActionText       { get; set; } = string.Empty;
+            public bool   ShowClose        { get; set; }
+            public bool   Fixed            { get; set; }
+            public bool   Fadeout          { get; set; }
+            public bool   WithLongerAction { get; set; }
+        }
+
+        protected sealed class StatusPillState
+        {
+            public string Status   { get; set; } = string.Empty;
+            public string Label    { get; set; } = string.Empty;
+            public bool   ShowIcon { get; set; }
+        }
+
+        protected sealed class TooltipState
+        {
+            public bool   Open           { get; set; }
+            public string Variant        { get; set; } = string.Empty;
+            public string Position       { get; set; } = string.Empty;
+            public string Trigger        { get; set; } = string.Empty;
+            public double Delay          { get; set; }
+            public double Offset         { get; set; }
+            public string Label          { get; set; } = string.Empty;
+            public string SupportingText { get; set; } = string.Empty;
+        }
+
+        protected sealed class PaginationState
+        {
+            public int Page       { get; set; }
+            public int TotalPages { get; set; }
+        }
+
+        protected sealed class RadioGroupState
+        {
+            public string Name  { get; set; } = string.Empty;
+            public string Value { get; set; } = string.Empty;
+        }
+
+        protected sealed class TextfieldState
+        {
+            public string Value          { get; set; } = string.Empty;
+            public string Label          { get; set; } = string.Empty;
+            public string SupportingText { get; set; } = string.Empty;
+            public bool   Error          { get; set; }
+            public string Name           { get; set; } = string.Empty;
+            public string Id             { get; set; } = string.Empty;
+        }
+
+        protected sealed class SearchState
+        {
+            public string Value          { get; set; } = string.Empty;
+            public string SupportingText { get; set; } = string.Empty;
+            public bool   FullScreen     { get; set; }
+            public string Size           { get; set; } = string.Empty;
+            public string Name           { get; set; } = string.Empty;
+            public string Id             { get; set; } = string.Empty;
+        }
+
+        protected sealed class ListState
+        {
+            public bool NoDivider { get; set; }
+            public ListItemState[] Items { get; set; } = Array.Empty<ListItemState>();
+        }
+
+        protected sealed class ListItemState
+        {
+            public string Type            { get; set; } = string.Empty;
+            public string Label           { get; set; } = string.Empty;
+            public string SupportingText  { get; set; } = string.Empty;
+            public string Overline        { get; set; } = string.Empty;
+            public bool   Leading         { get; set; }
+            public string LeadingVariant  { get; set; } = string.Empty;
+            public string LeadingIcon     { get; set; } = string.Empty;
+            public bool   Trailing        { get; set; }
+            public string TrailingVariant { get; set; } = string.Empty;
+            public string TrailingIcon    { get; set; } = string.Empty;
+            public bool   Disabled        { get; set; }
+            public string Href            { get; set; } = string.Empty;
+            public string ItemHref        { get; set; } = string.Empty;
+            public string Target          { get; set; } = string.Empty;
+            public int    Density         { get; set; }
+            public bool   NoDivider       { get; set; }
+            public string ImgHrefImage    { get; set; } = string.Empty;
+            public string AvatarLabel     { get; set; } = string.Empty;
+            public string AvatarAlt       { get; set; } = string.Empty;
+            public string AvatarVariant   { get; set; } = string.Empty;
+            public string AvatarSrc       { get; set; } = string.Empty;
+        }
+
+        protected sealed class LinkState
+        {
+            public string Href      { get; set; } = string.Empty;
+            public string Target    { get; set; } = string.Empty;
+            public string Rel       { get; set; } = string.Empty;
+            public string Download  { get; set; } = string.Empty;
+            public bool   Disabled  { get; set; }
+            public string AriaLabel { get; set; } = string.Empty;
+            public string Text      { get; set; } = string.Empty;
+        }
+
+        protected sealed class TocState
+        {
+            public bool Detached { get; set; }
+            public TocItemState[] Items { get; set; } = Array.Empty<TocItemState>();
+        }
+
+        protected sealed class TocItemState
+        {
+            public bool   Expanded       { get; set; }
+            public string Label          { get; set; } = string.Empty;
+            public string SupportingText { get; set; } = string.Empty;
+            public string ItemHref       { get; set; } = string.Empty;
+            public bool   Divider        { get; set; }
+        }
+
+        protected sealed class VizState
+        {
+            public string Variant      { get; set; } = string.Empty;
+            public string Title        { get; set; } = string.Empty;
+            public string Subtitle     { get; set; } = string.Empty;
+            public string Description  { get; set; } = string.Empty;
+            public string Comment      { get; set; } = string.Empty;
+            public string Source       { get; set; } = string.Empty;
+            public string Footnote     { get; set; } = string.Empty;
+            public string Lang         { get; set; } = string.Empty;
+            public string ImageHref    { get; set; } = string.Empty;
+            public string SelectedChip { get; set; } = string.Empty;
+        }
+
+        // DTO-klasserna nedan speglar exakt vad JS-bryggan skickar tillbaka
+
+        private sealed class ScbStateDto
+        {
+            public HeaderDto Header { get; set; } = new();
+
+            public DrawerDto Drawer { get; set; } = new();
+
+            public MenuDto Menu { get; set; } = new();
+
+            public SubMenuDto[] SubMenus { get; set; } = Array.Empty<SubMenuDto>();
+
+            public BreadcrumbDto Breadcrumb { get; set; } = new();
+
+            public BreadcrumbItemDto[] BreadcrumbItems { get; set; } = Array.Empty<BreadcrumbItemDto>();
+
+            public AccordionListDto[] Accordions { get; set; } = Array.Empty<AccordionListDto>();
+
+            public CheckboxDto[] Checkboxes { get; set; } = Array.Empty<CheckboxDto>();
+            public SwitchDto[] Switches   { get; set; } = Array.Empty<SwitchDto>();
+            public AppBarDto AppBar { get; set; } = new();
+            public SegmentedDto Segmented { get; set; } = new();
+
+            public TabsDto[] Tabs { get; set; } = Array.Empty<TabsDto>();
+
+            public StepperDto Stepper { get; set; } = new();
+
+            public CardDto[] Cards { get; set; } = Array.Empty<CardDto>();
+
+            public KeyfigureDto[] Keyfigures { get; set; } = Array.Empty<KeyfigureDto>();
+
+            public CalendarDto Calendar { get; set; } = new();
+
+            public CalendarDto[] Calendars { get; set; } = Array.Empty<CalendarDto>();
+
+            public DialogDto Dialog { get; set; } = new();
+
+            public NotificationDto[] Notifications { get; set; } = Array.Empty<NotificationDto>();
+
+            public SnackbarDto[] Snackbars { get; set; } = Array.Empty<SnackbarDto>();
+
+            public StatusPillDto[] StatusPills { get; set; } = Array.Empty<StatusPillDto>();
+
+            public TooltipDto[] Tooltips { get; set; } = Array.Empty<TooltipDto>();
+
+            public PaginationDto[] Paginations { get; set; } = Array.Empty<PaginationDto>();
+
+            public RadioGroupDto[] RadioGroups { get; set; } = Array.Empty<RadioGroupDto>();
+
+            public TextfieldDto[] Textfields { get; set; } = Array.Empty<TextfieldDto>();
+
+            public SearchDto[] Searches { get; set; } = Array.Empty<SearchDto>();
+
+            public ListDto[] Lists { get; set; } = Array.Empty<ListDto>();
+
+            public LinkDto[] Links { get; set; } = Array.Empty<LinkDto>();
+
+            public TocDto[] Tocs { get; set; } = Array.Empty<TocDto>();
+
+            public VizDto[] Viz { get; set; } = Array.Empty<VizDto>();
+        }
+
+        private sealed class HeaderDto
+        {
+            public int ActiveTab { get; set; }
+            public bool   DrawerOpen { get; set; }
+            public string? SearchText { get; set; }
+        }
+
+        private sealed class DrawerDto
+        {
+            public bool   Open { get; set; }
+            public string? Label { get; set; }
+            public string? SubLabel { get; set; }
+        }
+
+        private sealed class MenuDto
+        {
+            public bool Open { get; set; }
+        }
+
+        private sealed class SubMenuDto
+        {
+            public bool Open { get; set; }
+            public bool OpenLeft { get; set; }
+        }
+
+        private sealed class BreadcrumbDto
+        {
+            public bool ShowAll { get; set; }
+        }
+
+        private sealed class BreadcrumbItemDto
+        {
+            public string? Label    { get; set; }
+            public bool   IsCurrent { get; set; }
+            public string? Href     { get; set; }
+        }
+
+        private sealed class AccordionListDto
+        {
+            public bool Detached { get; set; }
+            public AccordionItemDto[] Items { get; set; } = Array.Empty<AccordionItemDto>();
+        }
+
+        private sealed class AccordionItemDto
+        {
+            public bool   Open           { get; set; }
+            public string? Title         { get; set; }
+            public string? Overline      { get; set; }
+            public string? SupportingText { get; set; }
+        }
+
+        private sealed class CheckboxDto
+        {
+            public bool   Checked { get; set; }
+            public string? Name   { get; set; }
+            public string? Value  { get; set; }
+            public string? Label  { get; set; }
+        }
+
+        private sealed class SwitchDto
+        {
+            public bool   Selected { get; set; }
+            public string? Name    { get; set; }
+            public string? Value   { get; set; }
+            public string? Label   { get; set; }
+        }
+
+        private sealed class AppBarDto
+        {
+            public string? Title { get; set; }
+            public string? Type { get; set; }
+            public string? Position { get; set; }
+            public string? SearchSupportingText { get; set; }
+        }
+
+        private sealed class SegmentedDto
+        {
+            public string? Value { get; set; }
+            public string[]? Values { get; set; }
+        }
+
+        private sealed class TabsDto
+        {
+            public int ActiveIndex { get; set; }
+        }
+
+        private sealed class StepperDto
+        {
+            public int ActiveIndex { get; set; }
+            public int TotalSteps  { get; set; }
+        }
+
+        private sealed class CardDto
+        {
+            public string? Type           { get; set; }
+            public string? Variant        { get; set; }
+            public string? Direction      { get; set; }
+            public string? Title          { get; set; }
+            public string? Subtitle       { get; set; }
+            public string? SupportingText { get; set; }
+            public string? CardHref       { get; set; }
+        }
+
+        private sealed class KeyfigureDto
+        {
+            public string? Keyfigure      { get; set; }
+            public string? Subtitle       { get; set; }
+            public string? SupportingText { get; set; }
+            public string? CardHref       { get; set; }
+            public string? Icon           { get; set; }
+            public string? Size           { get; set; }
+            public string? Unit           { get; set; }
+        }
+
+        private sealed class CalendarDto
+        {
+            public string? Title          { get; set; }
+            public string? Subtitle       { get; set; }
+            public string? SupportingText { get; set; }
+            public string? Variant        { get; set; }
+            public bool   ShowMedia       { get; set; }
+        }
+
+        private sealed class DialogDto
+        {
+            public bool   Open    { get; set; }
+            public string? Variant { get; set; }
+            public string? Label   { get; set; }
+        }
+
+        private sealed class NotificationDto
+        {
+            public bool   Open            { get; set; }
+            public string? Variant        { get; set; }
+            public string? Title          { get; set; }
+            public string? Subtitle       { get; set; }
+            public string? SupportingText { get; set; }
+            public string? LinkText       { get; set; }
+            public string? LinkHref       { get; set; }
+            public bool   ShowIcon        { get; set; }
+            public bool   ShowCloseButton { get; set; }
+            public bool   FullHeight      { get; set; }
+            public bool   FullWidth       { get; set; }
+            public string? Direction      { get; set; }
+        }
+
+        private sealed class SnackbarDto
+        {
+            public bool   Open             { get; set; }
+            public string? Message         { get; set; }
+            public string? ActionText      { get; set; }
+            public bool   ShowClose        { get; set; }
+            public bool   Fixed            { get; set; }
+            public bool   Fadeout          { get; set; }
+            public bool   WithLongerAction { get; set; }
+        }
+
+        private sealed class StatusPillDto
+        {
+            public string? Status   { get; set; }
+            public string? Label    { get; set; }
+            public bool   ShowIcon  { get; set; }
+        }
+
+        private sealed class TooltipDto
+        {
+            public bool   Open            { get; set; }
+            public string? Variant        { get; set; }
+            public string? Position       { get; set; }
+            public string? Trigger        { get; set; }
+            public double Delay           { get; set; }
+            public double Offset          { get; set; }
+            public string? Label          { get; set; }
+            public string? SupportingText { get; set; }
+        }
+
+        private sealed class PaginationDto
+        {
+            public int Page       { get; set; }
+            public int TotalPages { get; set; }
+        }
+
+        private sealed class RadioGroupDto
+        {
+            public string? Name  { get; set; }
+            public string? Value { get; set; }
+        }
+
+        private sealed class TextfieldDto
+        {
+            public string? Value          { get; set; }
+            public string? Label          { get; set; }
+            public string? SupportingText { get; set; }
+            public bool   Error           { get; set; }
+            public string? Name           { get; set; }
+            public string? Id             { get; set; }
+        }
+
+        private sealed class SearchDto
+        {
+            public string? Value          { get; set; }
+            public string? SupportingText { get; set; }
+            public bool   FullScreen      { get; set; }
+            public string? Size           { get; set; }
+            public string? Name           { get; set; }
+            public string? Id             { get; set; }
+        }
+
+        private sealed class ListDto
+        {
+            public bool NoDivider { get; set; }
+            public ListItemDto[] Items { get; set; } = Array.Empty<ListItemDto>();
+        }
+
+        private sealed class ListItemDto
+        {
+            public string? Type            { get; set; }
+            public string? Label           { get; set; }
+            public string? SupportingText  { get; set; }
+            public string? Overline        { get; set; }
+            public bool   Leading          { get; set; }
+            public string? LeadingVariant  { get; set; }
+            public string? LeadingIcon     { get; set; }
+            public bool   Trailing         { get; set; }
+            public string? TrailingVariant { get; set; }
+            public string? TrailingIcon    { get; set; }
+            public bool   Disabled         { get; set; }
+            public string? Href            { get; set; }
+            public string? ItemHref        { get; set; }
+            public string? Target          { get; set; }
+            public int    Density          { get; set; }
+            public bool   NoDivider        { get; set; }
+            public string? ImgHrefImage    { get; set; }
+            public string? AvatarLabel     { get; set; }
+            public string? AvatarAlt       { get; set; }
+            public string? AvatarVariant   { get; set; }
+            public string? AvatarSrc       { get; set; }
+        }
+
+        private sealed class LinkDto
+        {
+            public string? Href      { get; set; }
+            public string? Target    { get; set; }
+            public string? Rel       { get; set; }
+            public string? Download  { get; set; }
+            public bool   Disabled   { get; set; }
+            public string? AriaLabel { get; set; }
+            public string? Text      { get; set; }
+        }
+
+        private sealed class TocDto
+        {
+            public bool Detached { get; set; }
+            public TocItemDto[] Items { get; set; } = Array.Empty<TocItemDto>();
+        }
+
+        private sealed class TocItemDto
+        {
+            public bool   Expanded        { get; set; }
+            public string? Label          { get; set; }
+            public string? SupportingText { get; set; }
+            public string? ItemHref       { get; set; }
+            public bool   Divider         { get; set; }
+        }
+
+        private sealed class VizDto
+        {
+            public string? Variant      { get; set; }
+            public string? Title        { get; set; }
+            public string? Subtitle     { get; set; }
+            public string? Description  { get; set; }
+            public string? Comment      { get; set; }
+            public string? Source       { get; set; }
+            public string? Footnote     { get; set; }
+            public string? Lang         { get; set; }
+            public string? ImageHref    { get; set; }
+            public string? SelectedChip { get; set; }
+        }
+    }
+}