scb-wc-test 0.1.207 → 0.1.209

package/blazor/ScbBlazorInteropBase.cs

@@ -20,6 +20,30 @@ namespace ScbBlazorDemo
         // Håller en .NET-referens som JS kan använda för att ropa tillbaka på OnScbEvent
         private DotNetObjectReference<ScbBlazorInteropBase>? _dotNetRef;
 
+        // Subscription-id som används för att kunna avregistrera globala listeners vid Dispose
+        private string? _subscriptionId;
+
+        // Flagga som anger om JS-interop är initierad (kan misslyckas vid prerender och behöver då försöka igen)
+        private bool _interopInitialized;
+        private bool _interopInitInProgress;
+
+        // Root-selektor som kan användas för att scopa getState och eventhantering till en del av DOM:en
+        protected virtual string? ScbRootSelector => null;
+
+        // Senast mottagna normaliserade eventnamn från JS-bryggan
+        protected string LastScbEventName { get; private set; } = string.Empty;
+
+        // Om true så samlas flera events ihop och ger en state-refresh per animation frame
+        protected virtual bool CoalesceScbEvents => true;
+
+        // Om true så observeras ändringar i viktiga attribut via MutationObserver
+        protected virtual bool ObserveScbAttributes => true;
+
+        private bool _refreshQueued;
+        private bool _refreshRunning;
+        private Task? _refreshLoopTask;
+
+
         // Header (scb-header): aktiv flik, drawerstatus och eventuell söktext
         protected HeaderState Header { get; private set; } = new();
 
@@ -29,6 +53,27 @@ namespace ScbBlazorDemo
         // Meny (scb-options-menu): övergripande öppet/stängt-läge
         protected MenuState Menu { get; private set; } = new();
 
+        // Alla options-menyer (scb-options-menu) på sidan
+        protected OptionsMenuState[] OptionsMenus { get; private set; } = Array.Empty<OptionsMenuState>();
+
+        // Uppslag med alla options-menyer (scb-options-menu) nycklade på id-attributet
+        protected Dictionary<string, OptionsMenuState> OptionsMenusById { get; private set; } = new Dictionary<string, OptionsMenuState>(StringComparer.Ordinal);
+
+        // Alla progress indicators (scb-progress-indicator) på sidan
+        protected ProgressIndicatorState[] ProgressIndicators { get; private set; } = Array.Empty<ProgressIndicatorState>();
+
+        // Alla progress steppers (scb-progress-stepper) på sidan
+        protected ProgressStepperState[] ProgressSteppers { get; private set; } = Array.Empty<ProgressStepperState>();
+
+        // Alla progress steps (scb-progress-step) på sidan
+        protected ProgressStepState[] ProgressSteps { get; private set; } = Array.Empty<ProgressStepState>();
+
+        // Alla skeletons (scb-skeleton) på sidan
+        protected SkeletonState[] Skeletons { get; private set; } = Array.Empty<SkeletonState>();
+
+        // Alla avancerade tabeller (scb-table-advanced) på sidan
+        protected TableAdvancedState[] TablesAdvanced { get; private set; } = Array.Empty<TableAdvancedState>();
+
         // Alla submenyer (scb-options-sub-menu) på sidan
         protected SubMenuState[] SubMenus { get; private set; } = Array.Empty<SubMenuState>();
 
@@ -62,6 +107,15 @@ namespace ScbBlazorDemo
         // Cards (scb-card) om man vill läsa av state
         protected CardState[] Cards { get; private set; } = Array.Empty<CardState>();
 
+        // Fact cards (scb-fact-card)
+        protected FactCardState[] FactCards { get; private set; } = Array.Empty<FactCardState>();
+
+        // Footer (scb-footer)
+        protected FooterState[] Footers { get; private set; } = Array.Empty<FooterState>();
+
+        // Horizontal scroller (scb-horizontal-scroller)
+        protected HorizontalScrollerState[] HorizontalScrollers { get; private set; } = Array.Empty<HorizontalScrollerState>();
+
         // Nyckeltalskort (scb-keyfigure-card)
         protected KeyfigureState[] Keyfigures { get; private set; } = Array.Empty<KeyfigureState>();
 
@@ -104,6 +158,24 @@ namespace ScbBlazorDemo
         // Alla sökfält (fristående scb-search) på sidan
         protected SearchState[] Searches { get; private set; } = Array.Empty<SearchState>();
 
+        // Alla dropdowns (scb-dropdown) på sidan
+        protected DropdownState[] Dropdowns { get; private set; } = Array.Empty<DropdownState>();
+
+        // Alla select-komponenter (scb-select) på sidan
+        protected SelectState[] Selects { get; private set; } = Array.Empty<SelectState>();
+
+        // Alla sliders (scb-slider) på sidan
+        protected SliderState[] Sliders { get; private set; } = Array.Empty<SliderState>();
+
+        // Alla datepickers (scb-datepicker) på sidan
+        protected DatepickerState[] Datepickers { get; private set; } = Array.Empty<DatepickerState>();
+
+        // Alla collapse (scb-collapse) på sidan
+        protected CollapseState[] Collapses { get; private set; } = Array.Empty<CollapseState>();
+
+        // Alla cookies-consent (scb-cookies-consent) på sidan
+        protected CookiesConsentState[] CookiesConsents { get; private set; } = Array.Empty<CookiesConsentState>();
+
         // Alla listor (scb-list) med sina list-items (scb-list-item)
         protected ListState[] Lists { get; private set; } = Array.Empty<ListState>();
 
@@ -111,6 +183,27 @@ namespace ScbBlazorDemo
         protected LinkState[] Links { get; private set; } = Array.Empty<LinkState>();
 
 
+        // Alla avatars (scb-avatar) på sidan
+        protected AvatarState[] Avatars { get; private set; } = Array.Empty<AvatarState>();
+
+        // Alla badges (scb-badge) på sidan
+        protected BadgeState[] Badges { get; private set; } = Array.Empty<BadgeState>();
+
+
+        // Alla icon-buttons (scb-icon-button) på sidan
+        protected IconButtonState[] IconButtons { get; private set; } = Array.Empty<IconButtonState>();
+
+        // Uppslag med alla icon-buttons (scb-icon-button) nycklade på id-attributet
+        protected Dictionary<string, IconButtonState> IconButtonsById { get; private set; } = new Dictionary<string, IconButtonState>(StringComparer.Ordinal);
+
+        // Alla menyer (scb-menu) på sidan
+        protected MenuInstanceState[] Menus { get; private set; } = Array.Empty<MenuInstanceState>();
+
+        // Uppslag med alla menyer (scb-menu) nycklade på id-attributet
+        protected Dictionary<string, MenuInstanceState> MenusById { get; private set; } = new Dictionary<string, MenuInstanceState>(StringComparer.Ordinal);
+
+
+
         // Alla nav (scb-nav) på sidan
         protected NavState[] Navs { get; private set; } = Array.Empty<NavState>();
 
@@ -130,28 +223,87 @@ namespace ScbBlazorDemo
 
         // 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
+        // Registrerar JS-interop när Blazor kan köra JS och hämtar initialt state
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
-            if (firstRender)
+            await EnsureScbInteropInitializedAsync();
+        }
+
+        private async Task EnsureScbInteropInitializedAsync()
+        {
+            if (_interopInitialized || _interopInitInProgress) return;
+
+            _interopInitInProgress = true;
+            try
             {
                 // Skapar en .NET-referens så att JS kan anropa OnScbEvent på rätt instans
-                _dotNetRef = DotNetObjectReference.Create(this);
+                _dotNetRef ??= DotNetObjectReference.Create(this);
 
                 // Registrerar eventhanterare i JS (i scb-blazor-bridge.js)
-                await JS.InvokeVoidAsync("SCBBlazor.registerScbEventHandlers", _dotNetRef);
+                if (!string.IsNullOrWhiteSpace(_subscriptionId))
+                {
+                    try
+                    {
+                        await JS.InvokeVoidAsync("SCBBlazor.unregisterScbEventHandlers", _subscriptionId);
+                    }
+                    catch (InvalidOperationException)
+                    {
+                    }
+                    catch (JSDisconnectedException)
+                    {
+                    }
+                    catch (TaskCanceledException)
+                    {
+                    }
+
+                    _subscriptionId = null;
+                }
+
+                var options = new
+                {
+                    root = GetScbRootArg(),
+                    coalesce = CoalesceScbEvents,
+                    observeAttributes = ObserveScbAttributes
+                };
+
+                _subscriptionId = await JS.InvokeAsync<string?>(
+                    "SCBBlazor.registerScbEventHandlers",
+                    _dotNetRef,
+                    options);
 
                 // Hämtar första snapshoten av state
                 await RefreshScbStateAsync();
+
+                _interopInitialized = true;
+            }
+            catch (InvalidOperationException)
+            {
+                // Kan inträffa vid prerendering när JS-interop inte är tillgängligt ännu
+            }
+            catch (JSDisconnectedException)
+            {
+                // Kan inträffa vid navigation/omkoppling när JS inte längre är tillgängligt
+            }
+            catch (TaskCanceledException)
+            {
+            }
+            finally
+            {
+                _interopInitInProgress = false;
             }
         }
 
+        private object? GetScbRootArg()
+        {
+            var s = ScbRootSelector;
+            return string.IsNullOrWhiteSpace(s) ? null : s;
+        }
+
         // 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");
+            var state = await JS.InvokeAsync<ScbStateDto>("SCBBlazor.getState", GetScbRootArg());
 
             // Header
             Header.ActiveTab  = state.Header.ActiveTab;
@@ -182,6 +334,195 @@ namespace ScbBlazorDemo
                 Menu.Open = false;
             }
 
+            // Options-menyer (scb-options-menu)
+            if (state.OptionsMenus is not null && state.OptionsMenus.Length > 0)
+            {
+                var menus = new OptionsMenuState[state.OptionsMenus.Length];
+                for (var i = 0; i < state.OptionsMenus.Length; i++)
+                {
+                    var dto = state.OptionsMenus[i];
+                    menus[i] = new OptionsMenuState
+                    {
+                        Id            = dto.Id ?? string.Empty,
+                        Open          = dto.Open,
+                        Spacing       = dto.Spacing ?? string.Empty,
+                        SpacingTop    = dto.SpacingTop ?? string.Empty,
+                        SpacingBottom = dto.SpacingBottom ?? string.Empty,
+                        SpacingLeft   = dto.SpacingLeft ?? string.Empty,
+                        SpacingRight  = dto.SpacingRight ?? string.Empty,
+                    };
+                }
+
+                OptionsMenus = menus;
+
+                var byId = new Dictionary<string, OptionsMenuState>(StringComparer.Ordinal);
+                for (var i = 0; i < menus.Length; i++)
+                {
+                    var m = menus[i];
+                    if (string.IsNullOrWhiteSpace(m.Id)) continue;
+                    byId[m.Id] = m;
+                }
+                OptionsMenusById = byId;
+            }
+            else
+            {
+                OptionsMenus = Array.Empty<OptionsMenuState>();
+                OptionsMenusById = new Dictionary<string, OptionsMenuState>(StringComparer.Ordinal);
+            }
+
+            // Progress indicator (scb-progress-indicator)
+            if (state.ProgressIndicators is not null && state.ProgressIndicators.Length > 0)
+            {
+                var indicators = new ProgressIndicatorState[state.ProgressIndicators.Length];
+                for (var i = 0; i < state.ProgressIndicators.Length; i++)
+                {
+                    var dto = state.ProgressIndicators[i];
+                    indicators[i] = new ProgressIndicatorState
+                    {
+                        Id            = dto.Id ?? string.Empty,
+                        Type          = dto.Type ?? string.Empty,
+                        Progress      = dto.Progress,
+                        IsStatic      = dto.IsStatic,
+                        Spacing       = dto.Spacing ?? string.Empty,
+                        SpacingTop    = dto.SpacingTop ?? string.Empty,
+                        SpacingBottom = dto.SpacingBottom ?? string.Empty,
+                        SpacingLeft   = dto.SpacingLeft ?? string.Empty,
+                        SpacingRight  = dto.SpacingRight ?? string.Empty,
+                    };
+                }
+                ProgressIndicators = indicators;
+            }
+            else
+            {
+                ProgressIndicators = Array.Empty<ProgressIndicatorState>();
+            }
+
+            // Progress steps (scb-progress-step)
+            if (state.ProgressSteps is not null && state.ProgressSteps.Length > 0)
+            {
+                var steps = new ProgressStepState[state.ProgressSteps.Length];
+                for (var i = 0; i < state.ProgressSteps.Length; i++)
+                {
+                    var dto = state.ProgressSteps[i];
+                    steps[i] = new ProgressStepState
+                    {
+                        Id       = dto.Id ?? string.Empty,
+                        Width    = dto.Width ?? string.Empty,
+                        Active   = dto.Active,
+                        Disabled = dto.Disabled,
+                        Href     = dto.Href ?? string.Empty,
+                        Label    = dto.Label ?? string.Empty,
+                        Position = dto.Position ?? string.Empty,
+                    };
+                }
+                ProgressSteps = steps;
+            }
+            else
+            {
+                ProgressSteps = Array.Empty<ProgressStepState>();
+            }
+
+            // Progress steppers (scb-progress-stepper)
+            if (state.ProgressSteppers is not null && state.ProgressSteppers.Length > 0)
+            {
+                var steppers = new ProgressStepperState[state.ProgressSteppers.Length];
+                for (var i = 0; i < state.ProgressSteppers.Length; i++)
+                {
+                    var dto = state.ProgressSteppers[i];
+
+                    var stepsDto = dto.Steps ?? Array.Empty<ProgressStepDto>();
+                    var steps = new ProgressStepState[stepsDto.Length];
+                    for (var s = 0; s < stepsDto.Length; s++)
+                    {
+                        var sdto = stepsDto[s];
+                        steps[s] = new ProgressStepState
+                        {
+                            Id       = sdto.Id ?? string.Empty,
+                            Width    = sdto.Width ?? string.Empty,
+                            Active   = sdto.Active,
+                            Disabled = sdto.Disabled,
+                            Href     = sdto.Href ?? string.Empty,
+                            Label    = sdto.Label ?? string.Empty,
+                            Position = sdto.Position ?? string.Empty,
+                        };
+                    }
+
+                    steppers[i] = new ProgressStepperState
+                    {
+                        Id            = dto.Id ?? string.Empty,
+                        ProgressWidth = dto.ProgressWidth,
+                        Height        = dto.Height ?? string.Empty,
+                        Position      = dto.Position ?? string.Empty,
+                        Spacing       = dto.Spacing ?? string.Empty,
+                        SpacingTop    = dto.SpacingTop ?? string.Empty,
+                        SpacingBottom = dto.SpacingBottom ?? string.Empty,
+                        SpacingLeft   = dto.SpacingLeft ?? string.Empty,
+                        SpacingRight  = dto.SpacingRight ?? string.Empty,
+                        Steps         = steps,
+                    };
+                }
+
+                ProgressSteppers = steppers;
+            }
+            else
+            {
+                ProgressSteppers = Array.Empty<ProgressStepperState>();
+            }
+
+            // Skeletons (scb-skeleton)
+            if (state.Skeletons is not null && state.Skeletons.Length > 0)
+            {
+                var items = new SkeletonState[state.Skeletons.Length];
+                for (var i = 0; i < state.Skeletons.Length; i++)
+                {
+                    var dto = state.Skeletons[i];
+                    items[i] = new SkeletonState
+                    {
+                        Id         = dto.Id ?? string.Empty,
+                        Variant    = dto.Variant ?? string.Empty,
+                        Width      = dto.Width ?? string.Empty,
+                        Height     = dto.Height ?? string.Empty,
+                        BorderSize = dto.BorderSize ?? string.Empty,
+                        Spacing       = dto.Spacing ?? string.Empty,
+                        SpacingTop    = dto.SpacingTop ?? string.Empty,
+                        SpacingBottom = dto.SpacingBottom ?? string.Empty,
+                        SpacingLeft   = dto.SpacingLeft ?? string.Empty,
+                        SpacingRight  = dto.SpacingRight ?? string.Empty,
+                    };
+                }
+                Skeletons = items;
+            }
+            else
+            {
+                Skeletons = Array.Empty<SkeletonState>();
+            }
+
+            // Table advanced (scb-table-advanced)
+            if (state.TablesAdvanced is not null && state.TablesAdvanced.Length > 0)
+            {
+                var items = new TableAdvancedState[state.TablesAdvanced.Length];
+                for (var i = 0; i < state.TablesAdvanced.Length; i++)
+                {
+                    var dto = state.TablesAdvanced[i];
+                    items[i] = new TableAdvancedState
+                    {
+                        Id             = dto.Id ?? string.Empty,
+                        SearchTerm      = dto.SearchTerm ?? string.Empty,
+                        Pagination      = dto.Pagination,
+                        FilteringSearch = dto.FilteringSearch,
+                        NoScroll        = dto.NoScroll,
+                        PageSize        = dto.PageSize,
+                        CurrentPage     = dto.CurrentPage,
+                        TotalRows       = dto.TotalRows,
+                    };
+                }
+                TablesAdvanced = items;
+            }
+            else
+            {
+                TablesAdvanced = Array.Empty<TableAdvancedState>();
+            }
+
             // Sub-menyer
             if (state.SubMenus is not null && state.SubMenus.Length > 0)
             {
@@ -259,7 +600,7 @@ namespace ScbBlazorDemo
 
                     accordions[i] = new AccordionListState
                     {
-                        Detached = dto.Detached,
+                        SingleOpen = dto.SingleOpen,
                         Items    = itemStates
                     };
                 }
@@ -356,7 +697,49 @@ namespace ScbBlazorDemo
                         Title          = dto.Title          ?? string.Empty,
                         Subtitle       = dto.Subtitle       ?? string.Empty,
                         SupportingText = dto.SupportingText ?? string.Empty,
-                        CardHref       = dto.CardHref       ?? string.Empty
+                        CardHref       = dto.CardHref       ?? string.Empty,
+
+                        MediaType          = dto.MediaType          ?? string.Empty,
+                        MediaHref          = dto.MediaHref          ?? string.Empty,
+                        MediaAlt           = dto.MediaAlt           ?? string.Empty,
+                        MediaSrcset        = dto.MediaSrcset        ?? string.Empty,
+                        MediaSizes         = dto.MediaSizes         ?? string.Empty,
+                        MediaLoading       = dto.MediaLoading       ?? string.Empty,
+                        MediaDecoding      = dto.MediaDecoding      ?? string.Empty,
+                        MediaFetchPriority = dto.MediaFetchPriority ?? string.Empty,
+                        MediaFit           = dto.MediaFit           ?? string.Empty,
+                        MediaPosition      = dto.MediaPosition      ?? string.Empty,
+                        MediaWidth         = dto.MediaWidth         ?? string.Empty,
+                        MediaHeight        = dto.MediaHeight        ?? string.Empty,
+                        MediaAspect        = dto.MediaAspect        ?? string.Empty,
+                        MediaPlaceholder   = dto.MediaPlaceholder,
+
+                        Date = dto.Date ?? string.Empty,
+
+                        CommentsText = dto.CommentsText ?? string.Empty,
+                        Comments     = dto.Comments,
+                        CommentsHref = dto.CommentsHref ?? string.Empty,
+
+                        LikesText        = dto.LikesText ?? string.Empty,
+                        Likes            = dto.Likes,
+                        HasLiked         = dto.HasLiked,
+                        LikesInteractive = dto.LikesInteractive,
+
+                        Author     = dto.Author,
+                        AuthorText = dto.AuthorText ?? string.Empty,
+                        AuthorHref = dto.AuthorHref ?? string.Empty,
+
+                        Sizing    = dto.Sizing ?? string.Empty,
+                        Width     = dto.Width ?? string.Empty,
+                        MaxWidth  = dto.MaxWidth ?? string.Empty,
+                        Height    = dto.Height ?? string.Empty,
+                        MaxHeight = dto.MaxHeight ?? string.Empty,
+
+                        Spacing       = dto.Spacing ?? string.Empty,
+                        SpacingTop    = dto.SpacingTop ?? string.Empty,
+                        SpacingBottom = dto.SpacingBottom ?? string.Empty,
+                        SpacingLeft   = dto.SpacingLeft ?? string.Empty,
+                        SpacingRight  = dto.SpacingRight ?? string.Empty,
                     };
                 }
                 Cards = cards;
@@ -366,6 +749,132 @@ namespace ScbBlazorDemo
                 Cards = Array.Empty<CardState>();
             }
 
+            // Fact cards
+            if (state.FactCards is not null && state.FactCards.Length > 0)
+            {
+                var factCards = new FactCardState[state.FactCards.Length];
+                for (var i = 0; i < state.FactCards.Length; i++)
+                {
+                    var dto = state.FactCards[i];
+                    factCards[i] = new FactCardState
+                    {
+                        Id             = dto.Id             ?? string.Empty,
+                        Variant        = dto.Variant        ?? string.Empty,
+                        Title          = dto.Title          ?? string.Empty,
+                        Subtitle       = dto.Subtitle       ?? string.Empty,
+                        SupportingText = dto.SupportingText ?? string.Empty,
+                        Icon           = dto.Icon           ?? string.Empty,
+                        ShowCloseButton = dto.ShowCloseButton,
+                        Open           = dto.Open,
+                        Sizing         = dto.Sizing         ?? string.Empty,
+                        Width          = dto.Width          ?? string.Empty,
+                        MaxWidth       = dto.MaxWidth       ?? string.Empty,
+                        Height         = dto.Height         ?? string.Empty,
+                        MaxHeight      = dto.MaxHeight      ?? string.Empty,
+                        Spacing        = dto.Spacing        ?? string.Empty,
+                        SpacingTop     = dto.SpacingTop     ?? string.Empty,
+                        SpacingBottom  = dto.SpacingBottom  ?? string.Empty,
+                        SpacingLeft    = dto.SpacingLeft    ?? string.Empty,
+                        SpacingRight   = dto.SpacingRight   ?? string.Empty,
+                    };
+                }
+                FactCards = factCards;
+            }
+            else
+            {
+                FactCards = Array.Empty<FactCardState>();
+            }
+
+            // Footers
+            if (state.Footers is not null && state.Footers.Length > 0)
+            {
+                var footers = new FooterState[state.Footers.Length];
+                for (var i = 0; i < state.Footers.Length; i++)
+                {
+                    var dto = state.Footers[i];
+
+                    var sectionsDto = dto.Sections ?? Array.Empty<FooterSectionDto>();
+                    var sections = new FooterSectionState[sectionsDto.Length];
+                    for (var s = 0; s < sectionsDto.Length; s++)
+                    {
+                        var secDto = sectionsDto[s];
+
+                        var linksDto = secDto.Links ?? Array.Empty<FooterLinkDto>();
+                        var links = new FooterLinkState[linksDto.Length];
+                        for (var l = 0; l < linksDto.Length; l++)
+                        {
+                            var lnk = linksDto[l];
+                            links[l] = new FooterLinkState
+                            {
+                                Label  = lnk.Label  ?? string.Empty,
+                                Href   = lnk.Href   ?? string.Empty,
+                                Target = lnk.Target ?? string.Empty,
+                            };
+                        }
+
+                        sections[s] = new FooterSectionState
+                        {
+                            Title = secDto.Title ?? string.Empty,
+                            Links = links
+                        };
+                    }
+
+                    footers[i] = new FooterState
+                    {
+                        Id           = dto.Id          ?? string.Empty,
+                        MaxWidth      = dto.MaxWidth     ?? string.Empty,
+                        DeferPaint    = dto.DeferPaint,
+                        Spacing       = dto.Spacing      ?? string.Empty,
+                        SpacingTop    = dto.SpacingTop   ?? string.Empty,
+                        SpacingBottom = dto.SpacingBottom ?? string.Empty,
+                        Description   = dto.Description  ?? string.Empty,
+                        Sections      = sections
+                    };
+                }
+
+                Footers = footers;
+            }
+            else
+            {
+                Footers = Array.Empty<FooterState>();
+            }
+
+            // Horizontal scrollers
+            if (state.HorizontalScrollers is not null && state.HorizontalScrollers.Length > 0)
+            {
+                var scrollers = new HorizontalScrollerState[state.HorizontalScrollers.Length];
+                for (var i = 0; i < state.HorizontalScrollers.Length; i++)
+                {
+                    var dto = state.HorizontalScrollers[i];
+                    scrollers[i] = new HorizontalScrollerState
+                    {
+                        Id                   = dto.Id                   ?? string.Empty,
+                        Variant              = dto.Variant              ?? string.Empty,
+                        Width                = dto.Width                ?? string.Empty,
+                        ShowScrollbar         = dto.ShowScrollbar,
+                        RightScrollButtonLabel = dto.RightScrollButtonLabel ?? string.Empty,
+                        LeftScrollButtonLabel  = dto.LeftScrollButtonLabel  ?? string.Empty,
+                        ContentFlex          = dto.ContentFlex,
+                        InternalGap          = dto.InternalGap          ?? string.Empty,
+                        Spacing              = dto.Spacing              ?? string.Empty,
+                        SpacingTop           = dto.SpacingTop           ?? string.Empty,
+                        SpacingBottom        = dto.SpacingBottom        ?? string.Empty,
+                        SpacingLeft          = dto.SpacingLeft          ?? string.Empty,
+                        SpacingRight         = dto.SpacingRight         ?? string.Empty,
+                        ScrollLeft           = dto.ScrollLeft,
+                        CanScrollLeft        = dto.CanScrollLeft,
+                        CanScrollRight       = dto.CanScrollRight,
+                    };
+                }
+
+                HorizontalScrollers = scrollers;
+            }
+            else
+            {
+                HorizontalScrollers = Array.Empty<HorizontalScrollerState>();
+            }
+
+
             // Keyfigure cards
             if (state.Keyfigures is not null && state.Keyfigures.Length > 0)
             {
@@ -708,6 +1217,151 @@ namespace ScbBlazorDemo
                 Searches = Array.Empty<SearchState>();
             }
 
+            // Dropdown
+            if (state.Dropdowns is not null && state.Dropdowns.Length > 0)
+            {
+                var dropdowns = new DropdownState[state.Dropdowns.Length];
+                for (var i = 0; i < state.Dropdowns.Length; i++)
+                {
+                    var dto = state.Dropdowns[i];
+                    dropdowns[i] = new DropdownState
+                    {
+                        Id       = dto.Id       ?? string.Empty,
+                        Label    = dto.Label    ?? string.Empty,
+                        Variant  = dto.Variant  ?? string.Empty,
+                        Size     = dto.Size     ?? string.Empty,
+                        Open     = dto.Open,
+                        Disabled = dto.Disabled,
+                    };
+                }
+                Dropdowns = dropdowns;
+            }
+            else
+            {
+                Dropdowns = Array.Empty<DropdownState>();
+            }
+
+            // Select
+            if (state.Selects is not null && state.Selects.Length > 0)
+            {
+                var selects = new SelectState[state.Selects.Length];
+                for (var i = 0; i < state.Selects.Length; i++)
+                {
+                    var dto = state.Selects[i];
+                    selects[i] = new SelectState
+                    {
+                        Id       = dto.Id       ?? string.Empty,
+                        Variant  = dto.Variant  ?? string.Empty,
+                        Open     = dto.Open,
+                        Value    = dto.Value    ?? string.Empty,
+                        Values   = dto.Values   ?? Array.Empty<string>(),
+                        Disabled = dto.Disabled,
+                    };
+                }
+                Selects = selects;
+            }
+            else
+            {
+                Selects = Array.Empty<SelectState>();
+            }
+
+            // Slider
+            if (state.Sliders is not null && state.Sliders.Length > 0)
+            {
+                var sliders = new SliderState[state.Sliders.Length];
+                for (var i = 0; i < state.Sliders.Length; i++)
+                {
+                    var dto = state.Sliders[i];
+                    sliders[i] = new SliderState
+                    {
+                        Id         = dto.Id ?? string.Empty,
+                        Range      = dto.Range,
+                        Value      = dto.Value,
+                        ValueStart = dto.ValueStart,
+                        ValueEnd   = dto.ValueEnd,
+                        Min        = dto.Min,
+                        Max        = dto.Max,
+                        Step       = dto.Step,
+                        Disabled   = dto.Disabled,
+                    };
+                }
+                Sliders = sliders;
+            }
+            else
+            {
+                Sliders = Array.Empty<SliderState>();
+            }
+
+            // Datepicker
+            if (state.Datepickers is not null && state.Datepickers.Length > 0)
+            {
+                var datepickers = new DatepickerState[state.Datepickers.Length];
+                for (var i = 0; i < state.Datepickers.Length; i++)
+                {
+                    var dto = state.Datepickers[i];
+                    datepickers[i] = new DatepickerState
+                    {
+                        Id            = dto.Id            ?? string.Empty,
+                        Open          = dto.Open,
+                        SelectedValue = dto.SelectedValue ?? string.Empty,
+                        Variant       = dto.Variant       ?? string.Empty,
+                        Lang          = dto.Lang          ?? string.Empty,
+                    };
+                }
+                Datepickers = datepickers;
+            }
+            else
+            {
+                Datepickers = Array.Empty<DatepickerState>();
+            }
+
+            // Collapse
+            if (state.Collapses is not null && state.Collapses.Length > 0)
+            {
+                var collapses = new CollapseState[state.Collapses.Length];
+                for (var i = 0; i < state.Collapses.Length; i++)
+                {
+                    var dto = state.Collapses[i];
+                    collapses[i] = new CollapseState
+                    {
+                        Id                  = dto.Id                  ?? string.Empty,
+                        Variant             = dto.Variant             ?? string.Empty,
+                        Expanded            = dto.Expanded,
+                        CollapsedHeight     = dto.CollapsedHeight,
+                        VisibleElements     = dto.VisibleElements,
+                        ExpandButtonLabel   = dto.ExpandButtonLabel   ?? string.Empty,
+                        CollapseButtonLabel = dto.CollapseButtonLabel ?? string.Empty,
+                    };
+                }
+                Collapses = collapses;
+            }
+            else
+            {
+                Collapses = Array.Empty<CollapseState>();
+            }
+
+            // Cookies-consent
+            if (state.CookiesConsents is not null && state.CookiesConsents.Length > 0)
+            {
+                var cookies = new CookiesConsentState[state.CookiesConsents.Length];
+                for (var i = 0; i < state.CookiesConsents.Length; i++)
+                {
+                    var dto = state.CookiesConsents[i];
+                    cookies[i] = new CookiesConsentState
+                    {
+                        Id             = dto.Id             ?? string.Empty,
+                        Open           = dto.Open,
+                        Title          = dto.Title          ?? string.Empty,
+                        SupportingText = dto.SupportingText ?? string.Empty,
+                    };
+                }
+                CookiesConsents = cookies;
+            }
+            else
+            {
+                CookiesConsents = Array.Empty<CookiesConsentState>();
+            }
+
             // Listor
             if (state.Lists is not null && state.Lists.Length > 0)
             {
@@ -787,13 +1441,287 @@ namespace ScbBlazorDemo
                 Links = Array.Empty<LinkState>();
             }
 
-            // Nav
-            if (state.Navs is not null && state.Navs.Length > 0)
+            // Avatars
+            if (state.Avatars is not null && state.Avatars.Length > 0)
             {
-                var navs = new NavState[state.Navs.Length];
-                for (var i = 0; i < state.Navs.Length; i++)
+                var avatars = new AvatarState[state.Avatars.Length];
+                for (var i = 0; i < state.Avatars.Length; i++)
                 {
-                    var dto = state.Navs[i];
+                    var dto = state.Avatars[i];
+                    avatars[i] = new AvatarState
+                    {
+                        Src          = dto.Src          ?? string.Empty,
+                        Alt          = dto.Alt          ?? string.Empty,
+                        Label        = dto.Label        ?? string.Empty,
+                        Size         = dto.Size         ?? string.Empty,
+                        Shape        = dto.Shape        ?? string.Empty,
+                        IconName     = dto.IconName     ?? string.Empty,
+                        Variant      = dto.Variant      ?? string.Empty,
+                        Spacing      = dto.Spacing      ?? string.Empty,
+                        SpacingTop   = dto.SpacingTop   ?? string.Empty,
+                        SpacingBottom = dto.SpacingBottom ?? string.Empty,
+                        SpacingLeft  = dto.SpacingLeft  ?? string.Empty,
+                        SpacingRight = dto.SpacingRight ?? string.Empty
+                    };
+                }
+
+                Avatars = avatars;
+            }
+            else
+            {
+                Avatars = Array.Empty<AvatarState>();
+            }
+
+            // Badges
+            if (state.Badges is not null && state.Badges.Length > 0)
+            {
+                var badges = new BadgeState[state.Badges.Length];
+                for (var i = 0; i < state.Badges.Length; i++)
+                {
+                    var dto = state.Badges[i];
+                    badges[i] = new BadgeState
+                    {
+                        AutoHide     = dto.AutoHide,
+                        Hidden       = dto.Hidden,
+                        Sizing       = dto.Sizing       ?? string.Empty,
+                        Position     = dto.Position     ?? string.Empty,
+                        PositionSide = dto.PositionSide ?? string.Empty,
+                        PositionTop  = dto.PositionTop  ?? string.Empty,
+                        PositionRight = dto.PositionRight ?? string.Empty,
+                        PositionLeft  = dto.PositionLeft  ?? string.Empty,
+                        Value        = dto.Value        ?? string.Empty,
+                        Label        = dto.Label        ?? string.Empty,
+                        Variant      = dto.Variant      ?? string.Empty
+                    };
+                }
+
+                Badges = badges;
+            }
+            else
+            {
+                Badges = Array.Empty<BadgeState>();
+            }
+
+            
+
+            // Icon buttons
+            if (state.IconButtons is not null && state.IconButtons.Length > 0)
+            {
+                var iconButtons = new IconButtonState[state.IconButtons.Length];
+                for (var i = 0; i < state.IconButtons.Length; i++)
+                {
+                    var dto = state.IconButtons[i];
+                    iconButtons[i] = new IconButtonState
+                    {
+                        Id        = dto.Id        ?? string.Empty,
+                        Icon      = dto.Icon      ?? string.Empty,
+                        Toggle    = dto.Toggle,
+                        Selected  = dto.Selected,
+                        Disabled  = dto.Disabled,
+                        AriaLabel = dto.AriaLabel ?? string.Empty,
+                        Href      = dto.Href      ?? string.Empty,
+                        Target    = dto.Target    ?? string.Empty,
+                        Rel       = dto.Rel       ?? string.Empty
+                    };
+                }
+
+                IconButtons = iconButtons;
+            }
+            else
+            {
+                IconButtons = Array.Empty<IconButtonState>();
+            }
+
+            if (state.IconButtonsById is not null && state.IconButtonsById.Count > 0)
+            {
+                var byId = new Dictionary<string, IconButtonState>(state.IconButtonsById.Count, StringComparer.Ordinal);
+                foreach (var kvp in state.IconButtonsById)
+                {
+                    var id  = kvp.Key;
+                    var dto = kvp.Value;
+
+                    if (string.IsNullOrWhiteSpace(id) || dto is null)
+                    {
+                        continue;
+                    }
+
+                    byId[id] = new IconButtonState
+                    {
+                        Id        = id,
+                        Icon      = dto.Icon      ?? string.Empty,
+                        Toggle    = dto.Toggle,
+                        Selected  = dto.Selected,
+                        Disabled  = dto.Disabled,
+                        AriaLabel = dto.AriaLabel ?? string.Empty,
+                        Href      = dto.Href      ?? string.Empty,
+                        Target    = dto.Target    ?? string.Empty,
+                        Rel       = dto.Rel       ?? string.Empty
+                    };
+                }
+
+                IconButtonsById = byId;
+            }
+            else if (IconButtons.Length > 0)
+            {
+                var byId = new Dictionary<string, IconButtonState>(IconButtons.Length, StringComparer.Ordinal);
+                for (var i = 0; i < IconButtons.Length; i++)
+                {
+                    var b = IconButtons[i];
+                    var id = b.Id;
+
+                    if (string.IsNullOrWhiteSpace(id))
+                    {
+                        continue;
+                    }
+
+                    byId[id] = b;
+                }
+
+                IconButtonsById = byId;
+            }
+            else
+            {
+                IconButtonsById = new Dictionary<string, IconButtonState>(StringComparer.Ordinal);
+            }
+
+            // Menyer
+            if (state.Menus is not null && state.Menus.Length > 0)
+            {
+                var menus = new MenuInstanceState[state.Menus.Length];
+                for (var i = 0; i < state.Menus.Length; i++)
+                {
+                    var dto = state.Menus[i];
+
+                    MenuSelectedItemState? selected = null;
+                    if (dto.Selected is not null)
+                    {
+                        selected = new MenuSelectedItemState
+                        {
+                            Label       = dto.Selected.Label       ?? string.Empty,
+                            ItemHref    = dto.Selected.ItemHref    ?? string.Empty,
+                            LeadingIcon = dto.Selected.LeadingIcon ?? string.Empty,
+                            Path        = dto.Selected.Path        ?? string.Empty
+                        };
+                    }
+
+                    var expanded = Array.Empty<MenuExpandedItemState>();
+                    if (dto.Expanded is not null && dto.Expanded.Length > 0)
+                    {
+                        expanded = new MenuExpandedItemState[dto.Expanded.Length];
+                        for (var j = 0; j < dto.Expanded.Length; j++)
+                        {
+                            var ex = dto.Expanded[j];
+                            expanded[j] = new MenuExpandedItemState
+                            {
+                                Label    = ex.Label    ?? string.Empty,
+                                ItemHref = ex.ItemHref ?? string.Empty,
+                                Path     = ex.Path     ?? string.Empty
+                            };
+                        }
+                    }
+
+                    menus[i] = new MenuInstanceState
+                    {
+                        Id                 = dto.Id                 ?? string.Empty,
+                        Label              = dto.Label              ?? string.Empty,
+                        SubLabel           = dto.SubLabel           ?? string.Empty,
+                        NoHighlightSelected = dto.NoHighlightSelected,
+                        Selected           = selected,
+                        Expanded           = expanded
+                    };
+                }
+
+                Menus = menus;
+            }
+            else
+            {
+                Menus = Array.Empty<MenuInstanceState>();
+            }
+
+            if (state.MenusById is not null && state.MenusById.Count > 0)
+            {
+                var byId = new Dictionary<string, MenuInstanceState>(state.MenusById.Count, StringComparer.Ordinal);
+                foreach (var kvp in state.MenusById)
+                {
+                    var id  = kvp.Key;
+                    var dto = kvp.Value;
+
+                    if (string.IsNullOrWhiteSpace(id) || dto is null)
+                    {
+                        continue;
+                    }
+
+                    MenuSelectedItemState? selected = null;
+                    if (dto.Selected is not null)
+                    {
+                        selected = new MenuSelectedItemState
+                        {
+                            Label       = dto.Selected.Label       ?? string.Empty,
+                            ItemHref    = dto.Selected.ItemHref    ?? string.Empty,
+                            LeadingIcon = dto.Selected.LeadingIcon ?? string.Empty,
+                            Path        = dto.Selected.Path        ?? string.Empty
+                        };
+                    }
+
+                    var expanded = Array.Empty<MenuExpandedItemState>();
+                    if (dto.Expanded is not null && dto.Expanded.Length > 0)
+                    {
+                        expanded = new MenuExpandedItemState[dto.Expanded.Length];
+                        for (var j = 0; j < dto.Expanded.Length; j++)
+                        {
+                            var ex = dto.Expanded[j];
+                            expanded[j] = new MenuExpandedItemState
+                            {
+                                Label    = ex.Label    ?? string.Empty,
+                                ItemHref = ex.ItemHref ?? string.Empty,
+                                Path     = ex.Path     ?? string.Empty
+                            };
+                        }
+                    }
+
+                    byId[id] = new MenuInstanceState
+                    {
+                        Id                 = id,
+                        Label              = dto.Label              ?? string.Empty,
+                        SubLabel           = dto.SubLabel           ?? string.Empty,
+                        NoHighlightSelected = dto.NoHighlightSelected,
+                        Selected           = selected,
+                        Expanded           = expanded
+                    };
+                }
+
+                MenusById = byId;
+            }
+            else if (Menus.Length > 0)
+            {
+                var byId = new Dictionary<string, MenuInstanceState>(Menus.Length, StringComparer.Ordinal);
+                for (var i = 0; i < Menus.Length; i++)
+                {
+                    var m2 = Menus[i];
+                    var id = m2.Id;
+
+                    if (string.IsNullOrWhiteSpace(id))
+                    {
+                        continue;
+                    }
+
+                    byId[id] = m2;
+                }
+
+                MenusById = byId;
+            }
+            else
+            {
+                MenusById = new Dictionary<string, MenuInstanceState>(StringComparer.Ordinal);
+            }
+
+// Nav
+            if (state.Navs is not null && state.Navs.Length > 0)
+            {
+                var navs = new NavState[state.Navs.Length];
+                for (var i = 0; i < state.Navs.Length; i++)
+                {
+                    var dto = state.Navs[i];
                     navs[i] = new NavState
                     {
                         Id               = dto.Id               ?? string.Empty,
@@ -1061,25 +1989,79 @@ namespace ScbBlazorDemo
             // 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)
+        public Task OnScbEvent(string? eventName)
+        {
+            var safeEventName = eventName ?? string.Empty;
+            LastScbEventName = safeEventName;
+
+            var eventTask = InvokeAsync(() => OnScbEventAsync(safeEventName));
+
+            if (ShouldRefreshOnScbEvent(safeEventName))
+            {
+                _refreshQueued = true;
+
+                if (_refreshLoopTask == null || _refreshLoopTask.IsCompleted)
+                {
+                    _refreshLoopTask = InvokeAsync(RefreshLoopAsync);
+                }
+
+                return Task.WhenAll(_refreshLoopTask, eventTask);
+            }
+
+            return eventTask;
+        }
+
+        private async Task RefreshLoopAsync()
         {
-            return RefreshScbStateAsync();
+            if (_refreshRunning) return;
+
+            _refreshRunning = true;
+            try
+            {
+                while (_refreshQueued)
+                {
+                    _refreshQueued = false;
+                    await RefreshScbStateAsync();
+                }
+            }
+            finally
+            {
+                _refreshRunning = false;
+            }
         }
 
         // Kan overridas i arvklasser för att reagera på stateändringar
         protected virtual Task OnScbStateChangedAsync() => Task.CompletedTask;
 
-        public ValueTask DisposeAsync()
+        // Kan overridas i arvklasser för att reagera på normaliserade events från JS-bryggan
+        protected virtual Task OnScbEventAsync(string eventName) => Task.CompletedTask;
+
+        // Kan overridas i arvklasser för att avgöra om ett event ska trigga en state-refresh
+        protected virtual bool ShouldRefreshOnScbEvent(string eventName) => true;
+        public async ValueTask DisposeAsync()
         {
+            if (!string.IsNullOrWhiteSpace(_subscriptionId))
+            {
+                try
+                {
+                    await JS.InvokeVoidAsync("SCBBlazor.unregisterScbEventHandlers", _subscriptionId);
+                }
+                catch (InvalidOperationException)
+                {
+                }
+                catch (JSDisconnectedException)
+                {
+                }
+                catch (TaskCanceledException)
+                {
+                }
+            }
+
             _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.
@@ -1087,231 +2069,233 @@ namespace ScbBlazorDemo
         // Header (scb-header)
         protected Task SetHeaderActiveTabAsync(int activeTab)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setHeaderActiveTab", activeTab).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setHeaderActiveTab", GetScbRootArg(), activeTab).AsTask();
         }
 
         protected Task SetHeaderDrawerOpenAsync(bool open)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setHeaderDrawerOpen", open).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setHeaderDrawerOpen", GetScbRootArg(), open).AsTask();
         }
 
         protected Task SetHeaderSearchTextAsync(string searchText)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setHeaderSearchText", searchText ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setHeaderSearchText", GetScbRootArg(), searchText ?? string.Empty).AsTask();
         }
 
         // Drawer och meny
         protected Task SetDrawerOpenAsync(bool open)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setDrawerOpen", open).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setDrawerOpen", GetScbRootArg(), open).AsTask();
         }
 
         protected Task SetDrawerTextAsync(string label, string subLabel)
         {
             return JS.InvokeVoidAsync(
                 "SCBBlazor.setDrawerText",
+                GetScbRootArg(),
                 label ?? string.Empty,
                 subLabel ?? string.Empty).AsTask();
         }
 
         protected Task SetMenuOpenAsync(bool open)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setMenuOpen", open).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setMenuOpen", GetScbRootArg(), 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();
+            return JS.InvokeVoidAsync("SCBBlazor.setSubMenuOpen", GetScbRootArg(), index, open).AsTask();
         }
 
         protected Task SetSubMenuOpenByIdAsync(string id, bool open)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setSubMenuOpenById", id ?? string.Empty, open).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setSubMenuOpenById", GetScbRootArg(), id ?? string.Empty, open).AsTask();
         }
 
         // Breadcrumb
         protected Task SetBreadcrumbShowAllAsync(bool showAll)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setBreadcrumbShowAll", showAll).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setBreadcrumbShowAll", GetScbRootArg(), 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();
+            return JS.InvokeVoidAsync("SCBBlazor.setAccordionItemOpen", GetScbRootArg(), accordionIndex, itemIndex, open).AsTask();
         }
 
         protected Task SetAccordionItemOpenByIdAsync(string itemId, bool open)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setAccordionItemOpenById", itemId ?? string.Empty, open).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setAccordionItemOpenById", GetScbRootArg(), 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();
+            return JS.InvokeVoidAsync("SCBBlazor.setCheckboxChecked", GetScbRootArg(), index, isChecked).AsTask();
         }
 
         protected Task SetCheckboxCheckedByIdAsync(string id, bool isChecked)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setCheckboxCheckedById", id ?? string.Empty, isChecked).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setCheckboxCheckedById", GetScbRootArg(), 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();
+            return JS.InvokeVoidAsync("SCBBlazor.setSwitchSelected", GetScbRootArg(), index, selected).AsTask();
         }
 
         protected Task SetSwitchSelectedByIdAsync(string id, bool selected)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setSwitchSelectedById", id ?? string.Empty, selected).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setSwitchSelectedById", GetScbRootArg(), 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();
+            return JS.InvokeVoidAsync("SCBBlazor.setSegmentedValue", GetScbRootArg(), value ?? string.Empty).AsTask();
         }
 
         protected Task SetSegmentedValuesAsync(string[] values)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setSegmentedValues", values ?? Array.Empty<string>()).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setSegmentedValues", GetScbRootArg(), values ?? Array.Empty<string>()).AsTask();
         }
 
         protected Task SetSegmentedValueByIdAsync(string id, string value)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setSegmentedValueById", id ?? string.Empty, value ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setSegmentedValueById", GetScbRootArg(), 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();
+            return JS.InvokeVoidAsync("SCBBlazor.setSegmentedValuesById", GetScbRootArg(), 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();
+            return JS.InvokeVoidAsync("SCBBlazor.setTabsActiveIndex", GetScbRootArg(), tabsIndex, activeIndex).AsTask();
         }
 
         protected Task SetTabsActiveIndexByIdAsync(string id, int activeIndex)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setTabsActiveIndexById", id ?? string.Empty, activeIndex).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setTabsActiveIndexById", GetScbRootArg(), id ?? string.Empty, activeIndex).AsTask();
         }
 
         // Dialog
         protected Task SetDialogOpenAsync(bool open)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setDialogOpen", open).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setDialogOpen", GetScbRootArg(), open).AsTask();
         }
 
         // Notification: index-baserad och id-baserad variant
         protected Task SetNotificationOpenAsync(int index, bool open)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setNotificationOpen", index, open).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setNotificationOpen", GetScbRootArg(), index, open).AsTask();
         }
 
         protected Task SetNotificationOpenByIdAsync(string id, bool open)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setNotificationOpenById", id ?? string.Empty, open).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setNotificationOpenById", GetScbRootArg(), 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();
+            return JS.InvokeVoidAsync("SCBBlazor.setSnackbarOpen", GetScbRootArg(), index, open).AsTask();
         }
 
         protected Task SetSnackbarOpenByIdAsync(string id, bool open)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setSnackbarOpenById", id ?? string.Empty, open).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setSnackbarOpenById", GetScbRootArg(), id ?? string.Empty, open).AsTask();
         }
 
         // Stepper: global och id-baserad variant
         protected Task SetStepperActiveIndexAsync(int activeIndex)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setStepperActiveIndex", activeIndex).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setStepperActiveIndex", GetScbRootArg(), activeIndex).AsTask();
         }
 
         protected Task SetStepperActiveIndexByIdAsync(string id, int activeIndex)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setStepperActiveIndexById", id ?? string.Empty, activeIndex).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setStepperActiveIndexById", GetScbRootArg(), id ?? string.Empty, activeIndex).AsTask();
         }
 
         // Calendar (scb-calendar): global och id-baserad variant
         protected Task SetCalendarDisplayMonthYearAsync(int year, int month)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setCalendarDisplayMonthYear", year, month).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setCalendarDisplayMonthYear", GetScbRootArg(), year, month).AsTask();
         }
 
         protected Task SetCalendarSelectedDateAsync(string date)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setCalendarSelectedDate", date ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setCalendarSelectedDate", GetScbRootArg(), date ?? string.Empty).AsTask();
         }
 
         protected Task SetCalendarDisableWeekendAsync(bool disableWeekend)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setCalendarDisableWeekend", disableWeekend).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setCalendarDisableWeekend", GetScbRootArg(), disableWeekend).AsTask();
         }
 
         protected Task SetCalendarPublicHolidaysAsync(bool publicHolidays)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setCalendarPublicHolidays", publicHolidays).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setCalendarPublicHolidays", GetScbRootArg(), publicHolidays).AsTask();
         }
 
         protected Task SetCalendarLangAsync(string lang)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setCalendarLang", lang ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setCalendarLang", GetScbRootArg(), lang ?? string.Empty).AsTask();
         }
 
         protected Task SetCalendarDisplayMonthYearByIdAsync(string id, int year, int month)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setCalendarDisplayMonthYearById", id ?? string.Empty, year, month).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setCalendarDisplayMonthYearById", GetScbRootArg(), id ?? string.Empty, year, month).AsTask();
         }
 
         protected Task SetCalendarSelectedDateByIdAsync(string id, string date)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setCalendarSelectedDateById", id ?? string.Empty, date ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setCalendarSelectedDateById", GetScbRootArg(), id ?? string.Empty, date ?? string.Empty).AsTask();
         }
 
         protected Task SetCalendarDisableWeekendByIdAsync(string id, bool disableWeekend)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setCalendarDisableWeekendById", id ?? string.Empty, disableWeekend).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setCalendarDisableWeekendById", GetScbRootArg(), id ?? string.Empty, disableWeekend).AsTask();
         }
 
         protected Task SetCalendarPublicHolidaysByIdAsync(string id, bool publicHolidays)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setCalendarPublicHolidaysById", id ?? string.Empty, publicHolidays).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setCalendarPublicHolidaysById", GetScbRootArg(), id ?? string.Empty, publicHolidays).AsTask();
         }
 
         protected Task SetCalendarLangByIdAsync(string id, string lang)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setCalendarLangById", id ?? string.Empty, lang ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setCalendarLangById", GetScbRootArg(), id ?? string.Empty, lang ?? string.Empty).AsTask();
         }
 
         // Pagination: index-baserad och id-baserad variant
         protected Task SetPaginationPageAsync(int paginationIndex, int page)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setPaginationPage", paginationIndex, page).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setPaginationPage", GetScbRootArg(), paginationIndex, page).AsTask();
         }
 
         protected Task SetPaginationPageByIdAsync(string id, int page)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setPaginationPageById", id ?? string.Empty, page).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setPaginationPageById", GetScbRootArg(), 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();
+            return JS.InvokeVoidAsync("SCBBlazor.setRadioGroupValueByIndex", GetScbRootArg(), index, value ?? string.Empty).AsTask();
         }
 
         protected Task SetRadioGroupValueByNameAsync(string name, string value)
         {
             return JS.InvokeVoidAsync(
                 "SCBBlazor.setRadioGroupValueByName",
+                GetScbRootArg(),
                 name ?? string.Empty,
                 value ?? string.Empty).AsTask();
         }
@@ -1320,6 +2304,7 @@ namespace ScbBlazorDemo
         {
             return JS.InvokeVoidAsync(
                 "SCBBlazor.setRadioGroupValueById",
+                GetScbRootArg(),
                 id ?? string.Empty,
                 value ?? string.Empty).AsTask();
         }
@@ -1327,62 +2312,158 @@ namespace ScbBlazorDemo
         // Textfield: index- och id-baserad variant
         protected Task SetTextfieldValueAsync(int index, string value)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setTextfieldValue", index, value ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setTextfieldValue", GetScbRootArg(), index, value ?? string.Empty).AsTask();
         }
 
         protected Task SetTextfieldValueByIdAsync(string id, string value)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setTextfieldValueById", id ?? string.Empty, value ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setTextfieldValueById", GetScbRootArg(), 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();
+            return JS.InvokeVoidAsync("SCBBlazor.setSearchValue", GetScbRootArg(), index, value ?? string.Empty).AsTask();
         }
 
         protected Task SetSearchValueByIdAsync(string id, string value)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setSearchValueById", id ?? string.Empty, value ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setSearchValueById", GetScbRootArg(), id ?? string.Empty, value ?? string.Empty).AsTask();
+        }
+
+
+        // Dropdown
+        protected Task SetDropdownOpenAsync(int index, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setDropdownOpen", GetScbRootArg(), index, open).AsTask();
+        }
+
+        protected Task SetDropdownOpenByIdAsync(string id, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setDropdownOpenById", GetScbRootArg(), id ?? string.Empty, open).AsTask();
+        }
+
+
+        // Select, slider och datepicker
+        protected Task SetSelectValueAsync(int index, string value)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSelectValue", GetScbRootArg(), index, value ?? string.Empty).AsTask();
+        }
+
+        protected Task SetSelectValueByIdAsync(string id, string value)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSelectValueById", GetScbRootArg(), id ?? string.Empty, value ?? string.Empty).AsTask();
+        }
+
+        protected Task SetSelectValuesAsync(int index, string[] values)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSelectValues", GetScbRootArg(), index, values ?? Array.Empty<string>()).AsTask();
+        }
+
+        protected Task SetSelectValuesByIdAsync(string id, string[] values)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSelectValuesById", GetScbRootArg(), id ?? string.Empty, values ?? Array.Empty<string>()).AsTask();
+        }
+
+        protected Task SetSelectOpenAsync(int index, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSelectOpen", GetScbRootArg(), index, open).AsTask();
+        }
+
+        protected Task SetSelectOpenByIdAsync(string id, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSelectOpenById", GetScbRootArg(), id ?? string.Empty, open).AsTask();
+        }
+
+        protected Task SetSliderValueAsync(int index, double value)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSliderValue", GetScbRootArg(), index, value).AsTask();
+        }
+
+        protected Task SetSliderValueByIdAsync(string id, double value)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSliderValueById", GetScbRootArg(), id ?? string.Empty, value).AsTask();
+        }
+
+        protected Task SetSliderRangeAsync(int index, double valueStart, double valueEnd)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSliderRange", GetScbRootArg(), index, valueStart, valueEnd).AsTask();
+        }
+
+        protected Task SetSliderRangeByIdAsync(string id, double valueStart, double valueEnd)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setSliderRangeById", GetScbRootArg(), id ?? string.Empty, valueStart, valueEnd).AsTask();
+        }
+
+        protected Task SetDatepickerOpenAsync(int index, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setDatepickerOpen", GetScbRootArg(), index, open).AsTask();
+        }
+
+        protected Task SetDatepickerOpenByIdAsync(string id, bool open)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setDatepickerOpenById", GetScbRootArg(), id ?? string.Empty, open).AsTask();
+        }
+
+        protected Task SetDatepickerSelectedValueAsync(int index, string selectedValue)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setDatepickerSelectedValue", GetScbRootArg(), index, selectedValue ?? string.Empty).AsTask();
+        }
+
+        protected Task SetDatepickerSelectedValueByIdAsync(string id, string selectedValue)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setDatepickerSelectedValueById", GetScbRootArg(), id ?? string.Empty, selectedValue ?? string.Empty).AsTask();
+        }
+
+
+        // Collapse
+        protected Task SetCollapseExpandedAsync(int index, bool expanded)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setCollapseExpanded", GetScbRootArg(), index, expanded).AsTask();
+        }
+
+        protected Task SetCollapseExpandedByIdAsync(string id, bool expanded)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setCollapseExpandedById", GetScbRootArg(), id ?? string.Empty, expanded).AsTask();
         }
 
 
         protected Task SetNavActiveHrefByIdAsync(string id, string activeHref)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setNavActiveHrefById", id ?? string.Empty, activeHref ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setNavActiveHrefById", GetScbRootArg(), id ?? string.Empty, activeHref ?? 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();
+            return JS.InvokeVoidAsync("SCBBlazor.setTocItemExpanded", GetScbRootArg(), tocIndex, itemIndex, expanded).AsTask();
         }
 
         protected Task SetTocItemExpandedByIdAsync(string itemId, bool expanded)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setTocItemExpandedById", itemId ?? string.Empty, expanded).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setTocItemExpandedById", GetScbRootArg(), 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();
+            return JS.InvokeVoidAsync("SCBBlazor.setVizSelectedChip", GetScbRootArg(), index, selectedChip ?? string.Empty).AsTask();
         }
 
         protected Task SetVizSelectedChipByIdAsync(string id, string selectedChip)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setVizSelectedChipById", id ?? string.Empty, selectedChip ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setVizSelectedChipById", GetScbRootArg(), id ?? string.Empty, selectedChip ?? string.Empty).AsTask();
         }
 
 
         protected Task SetVizViewAsync(int index, string view)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setVizView", index, view ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setVizView", GetScbRootArg(), index, view ?? string.Empty).AsTask();
         }
 
         protected Task SetVizViewByIdAsync(string id, string view)
         {
-            return JS.InvokeVoidAsync("SCBBlazor.setVizViewById", id ?? string.Empty, view ?? string.Empty).AsTask();
+            return JS.InvokeVoidAsync("SCBBlazor.setVizViewById", GetScbRootArg(), id ?? string.Empty, view ?? string.Empty).AsTask();
         }
 
 // Nedan följer alla state-klasser som används i Razor views
@@ -1412,6 +2493,81 @@ namespace ScbBlazorDemo
             public bool OpenLeft { get; set; }
         }
 
+        protected sealed class OptionsMenuState
+        {
+            public string Id { get; set; } = string.Empty;
+            public bool Open { get; set; }
+            public string Spacing { get; set; } = string.Empty;
+            public string SpacingTop { get; set; } = string.Empty;
+            public string SpacingBottom { get; set; } = string.Empty;
+            public string SpacingLeft { get; set; } = string.Empty;
+            public string SpacingRight { get; set; } = string.Empty;
+        }
+
+        protected sealed class ProgressIndicatorState
+        {
+            public string Id { get; set; } = string.Empty;
+            public string Type { get; set; } = string.Empty;
+            public double Progress { get; set; }
+            public bool IsStatic { get; set; }
+            public string Spacing { get; set; } = string.Empty;
+            public string SpacingTop { get; set; } = string.Empty;
+            public string SpacingBottom { get; set; } = string.Empty;
+            public string SpacingLeft { get; set; } = string.Empty;
+            public string SpacingRight { get; set; } = string.Empty;
+        }
+
+        protected sealed class ProgressStepState
+        {
+            public string Id { get; set; } = string.Empty;
+            public string Width { get; set; } = string.Empty;
+            public bool Active { get; set; }
+            public bool Disabled { get; set; }
+            public string Href { get; set; } = string.Empty;
+            public string Label { get; set; } = string.Empty;
+            public string Position { get; set; } = string.Empty;
+        }
+
+        protected sealed class ProgressStepperState
+        {
+            public string Id { get; set; } = string.Empty;
+            public double ProgressWidth { get; set; }
+            public string Height { get; set; } = string.Empty;
+            public string Position { get; set; } = string.Empty;
+            public string Spacing { get; set; } = string.Empty;
+            public string SpacingTop { get; set; } = string.Empty;
+            public string SpacingBottom { get; set; } = string.Empty;
+            public string SpacingLeft { get; set; } = string.Empty;
+            public string SpacingRight { get; set; } = string.Empty;
+            public ProgressStepState[] Steps { get; set; } = Array.Empty<ProgressStepState>();
+        }
+
+        protected sealed class SkeletonState
+        {
+            public string Id { get; set; } = string.Empty;
+            public string Variant { get; set; } = string.Empty;
+            public string Width { get; set; } = string.Empty;
+            public string Height { get; set; } = string.Empty;
+            public string BorderSize { get; set; } = string.Empty;
+            public string Spacing { get; set; } = string.Empty;
+            public string SpacingTop { get; set; } = string.Empty;
+            public string SpacingBottom { get; set; } = string.Empty;
+            public string SpacingLeft { get; set; } = string.Empty;
+            public string SpacingRight { get; set; } = string.Empty;
+        }
+
+        protected sealed class TableAdvancedState
+        {
+            public string Id { get; set; } = string.Empty;
+            public string SearchTerm { get; set; } = string.Empty;
+            public bool Pagination { get; set; }
+            public bool FilteringSearch { get; set; }
+            public bool NoScroll { get; set; }
+            public int PageSize { get; set; }
+            public int CurrentPage { get; set; }
+            public int TotalRows { get; set; }
+        }
+
         protected sealed class BreadcrumbState
         {
             public bool ShowAll { get; set; }
@@ -1426,7 +2582,7 @@ namespace ScbBlazorDemo
 
         protected sealed class AccordionListState
         {
-            public bool Detached { get; set; }
+            public bool SingleOpen { get; set; }
             public AccordionItemState[] Items { get; set; } = Array.Empty<AccordionItemState>();
         }
 
@@ -1488,7 +2644,125 @@ namespace ScbBlazorDemo
             public string Subtitle       { get; set; } = string.Empty;
             public string SupportingText { get; set; } = string.Empty;
             public string CardHref       { get; set; } = string.Empty;
-        }
+
+            public string MediaType          { get; set; } = string.Empty;
+            public string MediaHref          { get; set; } = string.Empty;
+            public string MediaAlt           { get; set; } = string.Empty;
+            public string MediaSrcset        { get; set; } = string.Empty;
+            public string MediaSizes         { get; set; } = string.Empty;
+            public string MediaLoading       { get; set; } = string.Empty;
+            public string MediaDecoding      { get; set; } = string.Empty;
+            public string MediaFetchPriority { get; set; } = string.Empty;
+            public string MediaFit           { get; set; } = string.Empty;
+            public string MediaPosition      { get; set; } = string.Empty;
+            public string MediaWidth         { get; set; } = string.Empty;
+            public string MediaHeight        { get; set; } = string.Empty;
+            public string MediaAspect        { get; set; } = string.Empty;
+            public bool   MediaPlaceholder   { get; set; }
+
+            public string Date { get; set; } = string.Empty;
+
+            public string CommentsText { get; set; } = string.Empty;
+            public int    Comments     { get; set; }
+            public string CommentsHref { get; set; } = string.Empty;
+
+            public string LikesText         { get; set; } = string.Empty;
+            public int    Likes             { get; set; }
+            public bool   HasLiked          { get; set; }
+            public bool   LikesInteractive  { get; set; }
+
+            public bool   Author      { get; set; }
+            public string AuthorText  { get; set; } = string.Empty;
+            public string AuthorHref  { get; set; } = string.Empty;
+
+            public string Sizing    { get; set; } = string.Empty;
+            public string Width     { get; set; } = string.Empty;
+            public string MaxWidth  { get; set; } = string.Empty;
+            public string Height    { get; set; } = string.Empty;
+            public string MaxHeight { get; set; } = string.Empty;
+
+            public string Spacing       { get; set; } = string.Empty;
+            public string SpacingTop    { get; set; } = string.Empty;
+            public string SpacingBottom { get; set; } = string.Empty;
+            public string SpacingLeft   { get; set; } = string.Empty;
+            public string SpacingRight  { get; set; } = string.Empty;
+        }
+
+
+        protected sealed class FactCardState
+        {
+            public string Id             { get; set; } = string.Empty;
+            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 Icon           { get; set; } = string.Empty;
+            public bool   ShowCloseButton { get; set; }
+            public bool   Open           { get; set; }
+            public string Sizing         { get; set; } = string.Empty;
+
+            public string Width     { get; set; } = string.Empty;
+            public string MaxWidth  { get; set; } = string.Empty;
+            public string Height    { get; set; } = string.Empty;
+            public string MaxHeight { get; set; } = string.Empty;
+
+            public string Spacing       { get; set; } = string.Empty;
+            public string SpacingTop    { get; set; } = string.Empty;
+            public string SpacingBottom { get; set; } = string.Empty;
+            public string SpacingLeft   { get; set; } = string.Empty;
+            public string SpacingRight  { get; set; } = string.Empty;
+        }
+
+        protected sealed class FooterState
+        {
+            public string Id       { get; set; } = string.Empty;
+            public string MaxWidth { get; set; } = string.Empty;
+            public bool   DeferPaint { get; set; }
+
+            public string Spacing       { get; set; } = string.Empty;
+            public string SpacingTop    { get; set; } = string.Empty;
+            public string SpacingBottom { get; set; } = string.Empty;
+
+            public string Description { get; set; } = string.Empty;
+            public FooterSectionState[] Sections { get; set; } = Array.Empty<FooterSectionState>();
+        }
+
+        protected sealed class FooterSectionState
+        {
+            public string Title { get; set; } = string.Empty;
+            public FooterLinkState[] Links { get; set; } = Array.Empty<FooterLinkState>();
+        }
+
+        protected sealed class FooterLinkState
+        {
+            public string Label  { get; set; } = string.Empty;
+            public string Href   { get; set; } = string.Empty;
+            public string Target { get; set; } = string.Empty;
+        }
+
+        protected sealed class HorizontalScrollerState
+        {
+            public string Id      { get; set; } = string.Empty;
+            public string Variant { get; set; } = string.Empty;
+            public string Width   { get; set; } = string.Empty;
+
+            public bool   ShowScrollbar { get; set; }
+            public string RightScrollButtonLabel { get; set; } = string.Empty;
+            public string LeftScrollButtonLabel  { get; set; } = string.Empty;
+
+            public bool   ContentFlex { get; set; }
+            public string InternalGap { get; set; } = string.Empty;
+
+            public string Spacing       { get; set; } = string.Empty;
+            public string SpacingTop    { get; set; } = string.Empty;
+            public string SpacingBottom { get; set; } = string.Empty;
+            public string SpacingLeft   { get; set; } = string.Empty;
+            public string SpacingRight  { get; set; } = string.Empty;
+
+            public double ScrollLeft     { get; set; }
+            public bool   CanScrollLeft  { get; set; }
+            public bool   CanScrollRight { get; set; }
+        }
 
         protected sealed class KeyfigureState
         {
@@ -1605,6 +2879,67 @@ namespace ScbBlazorDemo
             public string Id             { get; set; } = string.Empty;
         }
 
+        protected sealed class DropdownState
+        {
+            public string Id       { get; set; } = string.Empty;
+            public string Label    { get; set; } = string.Empty;
+            public string Variant  { get; set; } = string.Empty;
+            public string Size     { get; set; } = string.Empty;
+            public bool   Open     { get; set; }
+            public bool   Disabled { get; set; }
+        }
+
+        protected sealed class SelectState
+        {
+            public string Id       { get; set; } = string.Empty;
+            public string Variant  { get; set; } = string.Empty;
+            public bool   Open     { get; set; }
+            public string Value    { get; set; } = string.Empty;
+            public string[] Values { get; set; } = Array.Empty<string>();
+            public bool   Disabled { get; set; }
+        }
+
+        protected sealed class SliderState
+        {
+            public string Id { get; set; } = string.Empty;
+            public bool   Range { get; set; }
+            public double Value { get; set; }
+            public double ValueStart { get; set; }
+            public double ValueEnd { get; set; }
+            public double Min { get; set; }
+            public double Max { get; set; }
+            public double Step { get; set; }
+            public bool   Disabled { get; set; }
+        }
+
+        protected sealed class DatepickerState
+        {
+            public string Id { get; set; } = string.Empty;
+            public bool   Open { get; set; }
+            public string SelectedValue { get; set; } = string.Empty;
+            public string Variant { get; set; } = string.Empty;
+            public string Lang { get; set; } = string.Empty;
+        }
+
+        protected sealed class CollapseState
+        {
+            public string Id                  { get; set; } = string.Empty;
+            public string Variant             { get; set; } = string.Empty;
+            public bool   Expanded            { get; set; }
+            public int    CollapsedHeight     { get; set; }
+            public int    VisibleElements     { get; set; }
+            public string ExpandButtonLabel   { get; set; } = string.Empty;
+            public string CollapseButtonLabel { get; set; } = string.Empty;
+        }
+
+        protected sealed class CookiesConsentState
+        {
+            public string Id { get; set; } = string.Empty;
+            public bool   Open { get; set; }
+            public string Title { get; set; } = string.Empty;
+            public string SupportingText { get; set; } = string.Empty;
+        }
+
         protected sealed class ListState
         {
             public bool NoDivider { get; set; }
@@ -1647,6 +2982,86 @@ namespace ScbBlazorDemo
             public string Text      { get; set; } = string.Empty;
         }
 
+
+        protected sealed class AvatarState
+        {
+            public string Src           { get; set; } = string.Empty;
+            public string Alt           { get; set; } = string.Empty;
+            public string Label         { get; set; } = string.Empty;
+            public string Size          { get; set; } = string.Empty;
+            public string Shape         { get; set; } = string.Empty;
+            public string IconName      { get; set; } = string.Empty;
+            public string Variant       { get; set; } = string.Empty;
+
+            public string Spacing       { get; set; } = string.Empty;
+            public string SpacingTop    { get; set; } = string.Empty;
+            public string SpacingBottom { get; set; } = string.Empty;
+            public string SpacingLeft   { get; set; } = string.Empty;
+            public string SpacingRight  { get; set; } = string.Empty;
+        }
+
+        protected sealed class BadgeState
+        {
+            public bool   AutoHide      { get; set; }
+            public bool   Hidden        { get; set; }
+
+            public string Sizing        { get; set; } = string.Empty;
+            public string Position      { get; set; } = string.Empty;
+            public string PositionSide  { get; set; } = string.Empty;
+            public string PositionTop   { get; set; } = string.Empty;
+            public string PositionRight { get; set; } = string.Empty;
+            public string PositionLeft  { get; set; } = string.Empty;
+
+            public string Value         { get; set; } = string.Empty;
+            public string Label         { get; set; } = string.Empty;
+            public string Variant       { get; set; } = string.Empty;
+        }
+
+        protected sealed class IconButtonState
+        {
+            public string Id        { get; set; } = string.Empty;
+            public string Icon      { get; set; } = string.Empty;
+
+            public bool   Toggle    { get; set; }
+            public bool   Selected  { get; set; }
+            public bool   Disabled  { get; set; }
+
+            public string AriaLabel { get; set; } = string.Empty;
+
+            public string Href      { get; set; } = string.Empty;
+            public string Target    { get; set; } = string.Empty;
+            public string Rel       { get; set; } = string.Empty;
+        }
+
+        protected sealed class MenuInstanceState
+        {
+            public string Id                 { get; set; } = string.Empty;
+            public string Label              { get; set; } = string.Empty;
+            public string SubLabel           { get; set; } = string.Empty;
+            public bool   NoHighlightSelected { get; set; }
+
+            public MenuSelectedItemState? Selected { get; set; }
+
+            public MenuExpandedItemState[] Expanded { get; set; } = Array.Empty<MenuExpandedItemState>();
+        }
+
+        protected sealed class MenuSelectedItemState
+        {
+            public string Label       { get; set; } = string.Empty;
+            public string ItemHref    { get; set; } = string.Empty;
+            public string LeadingIcon { get; set; } = string.Empty;
+            public string Path        { get; set; } = string.Empty;
+        }
+
+        protected sealed class MenuExpandedItemState
+        {
+            public string Label    { get; set; } = string.Empty;
+            public string ItemHref { get; set; } = string.Empty;
+            public string Path     { get; set; } = string.Empty;
+        }
+
+
+
         protected sealed class NavState
         {
             public string Id { get; set; } = string.Empty;
@@ -1715,6 +3130,20 @@ namespace ScbBlazorDemo
 
             public MenuDto Menu { get; set; } = new();
 
+            public OptionsMenuDto[] OptionsMenus { get; set; } = Array.Empty<OptionsMenuDto>();
+
+            public Dictionary<string, OptionsMenuDto> OptionsMenusById { get; set; } = new();
+
+            public ProgressIndicatorDto[] ProgressIndicators { get; set; } = Array.Empty<ProgressIndicatorDto>();
+
+            public ProgressStepperDto[] ProgressSteppers { get; set; } = Array.Empty<ProgressStepperDto>();
+
+            public ProgressStepDto[] ProgressSteps { get; set; } = Array.Empty<ProgressStepDto>();
+
+            public SkeletonDto[] Skeletons { get; set; } = Array.Empty<SkeletonDto>();
+
+            public TableAdvancedDto[] TablesAdvanced { get; set; } = Array.Empty<TableAdvancedDto>();
+
             public SubMenuDto[] SubMenus { get; set; } = Array.Empty<SubMenuDto>();
 
             public BreadcrumbDto Breadcrumb { get; set; } = new();
@@ -1734,6 +3163,12 @@ namespace ScbBlazorDemo
 
             public CardDto[] Cards { get; set; } = Array.Empty<CardDto>();
 
+            public FactCardDto[] FactCards { get; set; } = Array.Empty<FactCardDto>();
+
+            public FooterDto[] Footers { get; set; } = Array.Empty<FooterDto>();
+
+            public HorizontalScrollerDto[] HorizontalScrollers { get; set; } = Array.Empty<HorizontalScrollerDto>();
+
             public KeyfigureDto[] Keyfigures { get; set; } = Array.Empty<KeyfigureDto>();
 
             public CalendarDto Calendar { get; set; } = new();
@@ -1762,10 +3197,34 @@ namespace ScbBlazorDemo
 
             public SearchDto[] Searches { get; set; } = Array.Empty<SearchDto>();
 
+            public DropdownDto[] Dropdowns { get; set; } = Array.Empty<DropdownDto>();
+
+            public SelectDto[] Selects { get; set; } = Array.Empty<SelectDto>();
+
+            public SliderDto[] Sliders { get; set; } = Array.Empty<SliderDto>();
+
+            public DatepickerDto[] Datepickers { get; set; } = Array.Empty<DatepickerDto>();
+
+            public CollapseDto[] Collapses { get; set; } = Array.Empty<CollapseDto>();
+
+            public CookiesConsentDto[] CookiesConsents { get; set; } = Array.Empty<CookiesConsentDto>();
+
             public ListDto[] Lists { get; set; } = Array.Empty<ListDto>();
 
             public LinkDto[] Links { get; set; } = Array.Empty<LinkDto>();
 
+            public AvatarDto[] Avatars { get; set; } = Array.Empty<AvatarDto>();
+
+            public BadgeDto[] Badges { get; set; } = Array.Empty<BadgeDto>();
+
+            public IconButtonDto[] IconButtons { get; set; } = Array.Empty<IconButtonDto>();
+
+            public Dictionary<string, IconButtonDto> IconButtonsById { get; set; } = new();
+
+            public MenuInstanceDto[] Menus { get; set; } = Array.Empty<MenuInstanceDto>();
+
+            public Dictionary<string, MenuInstanceDto> MenusById { get; set; } = new();
+
 
             public NavDto[] Navs { get; set; } = Array.Empty<NavDto>();
 
@@ -1806,6 +3265,81 @@ namespace ScbBlazorDemo
             public bool OpenLeft { get; set; }
         }
 
+        private sealed class OptionsMenuDto
+        {
+            public string? Id { get; set; }
+            public bool Open { get; set; }
+            public string? Spacing { get; set; }
+            public string? SpacingTop { get; set; }
+            public string? SpacingBottom { get; set; }
+            public string? SpacingLeft { get; set; }
+            public string? SpacingRight { get; set; }
+        }
+
+        private sealed class ProgressIndicatorDto
+        {
+            public string? Id { get; set; }
+            public string? Type { get; set; }
+            public double Progress { get; set; }
+            public bool IsStatic { get; set; }
+            public string? Spacing { get; set; }
+            public string? SpacingTop { get; set; }
+            public string? SpacingBottom { get; set; }
+            public string? SpacingLeft { get; set; }
+            public string? SpacingRight { get; set; }
+        }
+
+        private sealed class ProgressStepDto
+        {
+            public string? Id { get; set; }
+            public string? Width { get; set; }
+            public bool Active { get; set; }
+            public bool Disabled { get; set; }
+            public string? Href { get; set; }
+            public string? Label { get; set; }
+            public string? Position { get; set; }
+        }
+
+        private sealed class ProgressStepperDto
+        {
+            public string? Id { get; set; }
+            public double ProgressWidth { get; set; }
+            public string? Height { get; set; }
+            public string? Position { get; set; }
+            public string? Spacing { get; set; }
+            public string? SpacingTop { get; set; }
+            public string? SpacingBottom { get; set; }
+            public string? SpacingLeft { get; set; }
+            public string? SpacingRight { get; set; }
+            public ProgressStepDto[] Steps { get; set; } = Array.Empty<ProgressStepDto>();
+        }
+
+        private sealed class SkeletonDto
+        {
+            public string? Id { get; set; }
+            public string? Variant { get; set; }
+            public string? Width { get; set; }
+            public string? Height { get; set; }
+            public string? BorderSize { get; set; }
+            public string? Spacing { get; set; }
+            public string? SpacingTop { get; set; }
+            public string? SpacingBottom { get; set; }
+            public string? SpacingLeft { get; set; }
+            public string? SpacingRight { get; set; }
+        }
+
+        private sealed class TableAdvancedDto
+        {
+            public string? Id { get; set; }
+            public string? SearchTerm { get; set; }
+            public bool Pagination { get; set; }
+            public bool FilteringSearch { get; set; }
+            public bool NoScroll { get; set; }
+            public int PageSize { get; set; }
+            public int CurrentPage { get; set; }
+            public int TotalRows { get; set; }
+        }
+
         private sealed class BreadcrumbDto
         {
             public bool ShowAll { get; set; }
@@ -1820,7 +3354,7 @@ namespace ScbBlazorDemo
 
         private sealed class AccordionListDto
         {
-            public bool Detached { get; set; }
+            public bool SingleOpen { get; set; }
             public AccordionItemDto[] Items { get; set; } = Array.Empty<AccordionItemDto>();
         }
 
@@ -1882,6 +3416,124 @@ namespace ScbBlazorDemo
             public string? Subtitle       { get; set; }
             public string? SupportingText { get; set; }
             public string? CardHref       { get; set; }
+
+            public string? MediaType          { get; set; }
+            public string? MediaHref          { get; set; }
+            public string? MediaAlt           { get; set; }
+            public string? MediaSrcset        { get; set; }
+            public string? MediaSizes         { get; set; }
+            public string? MediaLoading       { get; set; }
+            public string? MediaDecoding      { get; set; }
+            public string? MediaFetchPriority { get; set; }
+            public string? MediaFit           { get; set; }
+            public string? MediaPosition      { get; set; }
+            public string? MediaWidth         { get; set; }
+            public string? MediaHeight        { get; set; }
+            public string? MediaAspect        { get; set; }
+            public bool   MediaPlaceholder    { get; set; }
+
+            public string? Date { get; set; }
+
+            public string? CommentsText { get; set; }
+            public int     Comments     { get; set; }
+            public string? CommentsHref { get; set; }
+
+            public string? LikesText        { get; set; }
+            public int     Likes            { get; set; }
+            public bool    HasLiked         { get; set; }
+            public bool    LikesInteractive { get; set; }
+
+            public bool    Author     { get; set; }
+            public string? AuthorText { get; set; }
+            public string? AuthorHref { get; set; }
+
+            public string? Sizing    { get; set; }
+            public string? Width     { get; set; }
+            public string? MaxWidth  { get; set; }
+            public string? Height    { get; set; }
+            public string? MaxHeight { get; set; }
+
+            public string? Spacing       { get; set; }
+            public string? SpacingTop    { get; set; }
+            public string? SpacingBottom { get; set; }
+            public string? SpacingLeft   { get; set; }
+            public string? SpacingRight  { get; set; }
+        }
+
+
+        private sealed class FactCardDto
+        {
+            public string? Id             { get; set; }
+            public string? Variant        { get; set; }
+            public string? Title          { get; set; }
+            public string? Subtitle       { get; set; }
+            public string? SupportingText { get; set; }
+            public string? Icon           { get; set; }
+            public bool   ShowCloseButton { get; set; }
+            public bool   Open            { get; set; }
+            public string? Sizing         { get; set; }
+
+            public string? Width     { get; set; }
+            public string? MaxWidth  { get; set; }
+            public string? Height    { get; set; }
+            public string? MaxHeight { get; set; }
+
+            public string? Spacing       { get; set; }
+            public string? SpacingTop    { get; set; }
+            public string? SpacingBottom { get; set; }
+            public string? SpacingLeft   { get; set; }
+            public string? SpacingRight  { get; set; }
+        }
+
+        private sealed class FooterDto
+        {
+            public string? Id       { get; set; }
+            public string? MaxWidth { get; set; }
+            public bool   DeferPaint { get; set; }
+
+            public string? Spacing       { get; set; }
+            public string? SpacingTop    { get; set; }
+            public string? SpacingBottom { get; set; }
+
+            public string? Description { get; set; }
+            public FooterSectionDto[]? Sections { get; set; }
+        }
+
+        private sealed class FooterSectionDto
+        {
+            public string? Title { get; set; }
+            public FooterLinkDto[]? Links { get; set; }
+        }
+
+        private sealed class FooterLinkDto
+        {
+            public string? Label  { get; set; }
+            public string? Href   { get; set; }
+            public string? Target { get; set; }
+        }
+
+        private sealed class HorizontalScrollerDto
+        {
+            public string? Id      { get; set; }
+            public string? Variant { get; set; }
+            public string? Width   { get; set; }
+
+            public bool   ShowScrollbar { get; set; }
+            public string? RightScrollButtonLabel { get; set; }
+            public string? LeftScrollButtonLabel  { get; set; }
+
+            public bool   ContentFlex { get; set; }
+            public string? InternalGap { get; set; }
+
+            public string? Spacing       { get; set; }
+            public string? SpacingTop    { get; set; }
+            public string? SpacingBottom { get; set; }
+            public string? SpacingLeft   { get; set; }
+            public string? SpacingRight  { get; set; }
+
+            public double ScrollLeft     { get; set; }
+            public bool   CanScrollLeft  { get; set; }
+            public bool   CanScrollRight { get; set; }
         }
 
         private sealed class KeyfigureDto
@@ -2000,6 +3652,67 @@ namespace ScbBlazorDemo
             public string? Id             { get; set; }
         }
 
+        private sealed class DropdownDto
+        {
+            public string? Id       { get; set; }
+            public string? Label    { get; set; }
+            public string? Variant  { get; set; }
+            public string? Size     { get; set; }
+            public bool   Open      { get; set; }
+            public bool   Disabled  { get; set; }
+        }
+
+        private sealed class SelectDto
+        {
+            public string? Id { get; set; }
+            public string? Variant { get; set; }
+            public bool   Open { get; set; }
+            public string? Value { get; set; }
+            public string[]? Values { get; set; }
+            public bool   Disabled { get; set; }
+        }
+
+        private sealed class SliderDto
+        {
+            public string? Id { get; set; }
+            public bool   Range { get; set; }
+            public double Value { get; set; }
+            public double ValueStart { get; set; }
+            public double ValueEnd { get; set; }
+            public double Min { get; set; }
+            public double Max { get; set; }
+            public double Step { get; set; }
+            public bool   Disabled { get; set; }
+        }
+
+        private sealed class DatepickerDto
+        {
+            public string? Id { get; set; }
+            public bool   Open { get; set; }
+            public string? SelectedValue { get; set; }
+            public string? Variant { get; set; }
+            public string? Lang { get; set; }
+        }
+
+        private sealed class CollapseDto
+        {
+            public string? Id                  { get; set; }
+            public string? Variant             { get; set; }
+            public bool   Expanded             { get; set; }
+            public int    CollapsedHeight      { get; set; }
+            public int    VisibleElements      { get; set; }
+            public string? ExpandButtonLabel   { get; set; }
+            public string? CollapseButtonLabel { get; set; }
+        }
+
+        private sealed class CookiesConsentDto
+        {
+            public string? Id { get; set; }
+            public bool   Open { get; set; }
+            public string? Title { get; set; }
+            public string? SupportingText { get; set; }
+        }
+
         private sealed class ListDto
         {
             public bool NoDivider { get; set; }
@@ -2058,6 +3771,87 @@ namespace ScbBlazorDemo
             public string? ContentPadding  { get; set; }
         }
 
+
+        private sealed class AvatarDto
+        {
+            public string? Src           { get; set; }
+            public string? Alt           { get; set; }
+            public string? Label         { get; set; }
+            public string? Size          { get; set; }
+            public string? Shape         { get; set; }
+            public string? IconName      { get; set; }
+            public string? Variant       { get; set; }
+
+            public string? Spacing       { get; set; }
+            public string? SpacingTop    { get; set; }
+            public string? SpacingBottom { get; set; }
+            public string? SpacingLeft   { get; set; }
+            public string? SpacingRight  { get; set; }
+        }
+
+        private sealed class BadgeDto
+        {
+            public bool   AutoHide      { get; set; }
+            public bool   Hidden        { get; set; }
+
+            public string? Sizing       { get; set; }
+            public string? Position     { get; set; }
+            public string? PositionSide { get; set; }
+            public string? PositionTop  { get; set; }
+            public string? PositionRight { get; set; }
+            public string? PositionLeft { get; set; }
+
+            public string? Value        { get; set; }
+            public string? Label        { get; set; }
+            public string? Variant      { get; set; }
+        }
+
+        private sealed class IconButtonDto
+        {
+            public string? Id        { get; set; }
+            public string? Icon      { get; set; }
+
+            public bool   Toggle     { get; set; }
+            public bool   Selected   { get; set; }
+            public bool   Disabled   { get; set; }
+
+            public string? AriaLabel { get; set; }
+
+            public string? Href      { get; set; }
+            public string? Target    { get; set; }
+            public string? Rel       { get; set; }
+        }
+
+        private sealed class MenuInstanceDto
+        {
+            public string? Id { get; set; }
+            public string? Label { get; set; }
+            public string? SubLabel { get; set; }
+
+            public bool NoHighlightSelected { get; set; }
+
+            public MenuSelectedItemDto? Selected { get; set; }
+
+            public MenuExpandedItemDto[] Expanded { get; set; } = Array.Empty<MenuExpandedItemDto>();
+        }
+
+        private sealed class MenuSelectedItemDto
+        {
+            public string? Label { get; set; }
+            public string? ItemHref { get; set; }
+            public string? LeadingIcon { get; set; }
+            public string? Path { get; set; }
+        }
+
+        private sealed class MenuExpandedItemDto
+        {
+            public string? Label { get; set; }
+            public string? ItemHref { get; set; }
+            public string? Path { get; set; }
+        }
+
+
+
         private sealed class NavDto
         {
             public string? Id { get; set; }
@@ -2100,4 +3894,4 @@ namespace ScbBlazorDemo
             public string? SelectedChip { get; set; }
         }
     }
-}
+}