scb-wc 0.1.182 → 0.1.184

package/README.md

@@ -1,16 +1,19 @@
-# Om SCB Web Components
+# Om SCB Web Components Preview
 
-SCB Web Components innehåller SCB:s gemensamma webbkomponenter.
+> ⚠️ **Previewkanal**  
+> Installera `scb-wc` via `@next` för komponenter under utveckling. API, utseende och beteende kan ändras eller tas bort mellan versioner.
+
+SCB Web Components preview innehåller SCB:s gemensamma webbkomponenter.
 
 ## Dokumentation
 
-Produktionskomponenterna dokumenteras och demonstreras i Storybook på SCB:s interna adress:
+Previewkomponenterna dokumenteras och demonstreras i Storybook på SCB:s interna testadress:
 
-- Prod: <https://webcomponents.scb.intra>
+- Test: <https://webcomponentstest.scb.intra>
 
-Testkomponenterna finns på:
+Den publika/stabila Storybooken finns på:
 
-- Test: <https://webcomponentstest.scb.intra>
+- Prod: <https://webcomponents.scb.intra>
 
 ## Kom igång
 
@@ -19,7 +22,7 @@ Testkomponenterna finns på:
 Välj den teknik du använder. Exemplet skapar en vanlig webbplats:
 
 ```sh
-npx scb-wc init html my-app
+npx scb-wc@next init html my-app
 cd my-app
 npm install
 npm run dev
@@ -36,7 +39,7 @@ Byt `html` mot:
 Kör kommandot i mappen där appens `package.json` ligger:
 
 ```sh
-npm install scb-wc
+npm install scb-wc@next
 ```
 
 Importera CSS och bara de komponenter som sidan använder:
@@ -55,9 +58,9 @@ Lägg sedan komponenten i sidan:
 
 ### Nästa steg
 
-- Öppna Kom igång i [Prod Storybook](https://webcomponents.scb.intra/?path=/docs/docs-kom-igång--beskrivning) för HTML/CSS, React, MVC och Blazor.
-- Öppna [mallar och exempel](https://webcomponents.scb.intra/?path=/docs/examples-and-templates-att-använda-mallar-och-exempel--beskrivning) när du vill bygga en hel sida.
-- Öppna [komponentöversikten](https://webcomponents.scb.intra/?path=/story/components-översikt-alla-komponenter-exposé--expose) när du vill välja nästa komponent.
+- Öppna Kom igång i [Test Storybook](https://webcomponentstest.scb.intra/?path=/docs/docs-kom-igång--beskrivning) för HTML/CSS, React, MVC och Blazor.
+- Öppna [mallar och exempel](https://webcomponentstest.scb.intra/?path=/docs/examples-and-templates-att-använda-mallar-och-exempel--beskrivning) när du vill bygga en hel sida.
+- Öppna [komponentöversikten](https://webcomponentstest.scb.intra/?path=/story/components-översikt-alla-komponenter-exposé--expose) när du vill välja nästa komponent.
 
 ## Kort referens
 
@@ -85,15 +88,15 @@ Webbplatsmallarna använder standardläget. Service- och appmallarna laddar Comp
 
 ### MVC och statiska webbplatser
 
-Paketets färdiga MVC-filer ligger i `node_modules/scb-wc/mvc/`. Följ det kopierbara MVC-exemplet i [Kom igång](https://webcomponents.scb.intra/?path=/docs/docs-kom-igång--beskrivning). Det visar vilket `ui:install`-script som ska läggas i appens `package.json` och vilka filer layouten ska ladda.
+Paketets färdiga MVC-filer ligger i `node_modules/scb-wc/mvc/`. Följ det kopierbara MVC-exemplet i [Kom igång](https://webcomponentstest.scb.intra/?path=/docs/docs-kom-igång--beskrivning). Det visar vilket `ui:install`-script som ska läggas i appens `package.json` och vilka filer layouten ska ladda.
 
 ### Blazor
 
-Blazor använder samma MVC-filer plus wrappers och interop under `node_modules/scb-wc/blazor/`. Följ [Kom igång](https://webcomponents.scb.intra/?path=/docs/docs-kom-igång--beskrivning) för första installationen och [Blazor-guiden](https://webcomponents.scb.intra/?path=/docs/docs-om-användning-i-blazor--beskrivning) när integrationen behöver state, parametrar eller events.
+Blazor använder samma MVC-filer plus wrappers och interop under `node_modules/scb-wc/blazor/`. Följ [Kom igång](https://webcomponentstest.scb.intra/?path=/docs/docs-kom-igång--beskrivning) för första installationen och [Blazor-guiden](https://webcomponentstest.scb.intra/?path=/docs/docs-om-användning-i-blazor--beskrivning) när integrationen behöver state, parametrar eller events.
 
 ### Fonter och egna ikoner
 
-Vanliga appar använder `scb-wc.css`. Selfhost och egna Material Symbols-subset är avancerade val. Följ [Foundations/Icons](https://webcomponents.scb.intra/?path=/docs/foundations-icons-ikoner--beskrivning) om appen inte får ladda Google Fonts eller behöver fler ikoner än paketets `icons.json`.
+Vanliga appar använder `scb-wc.css`. Selfhost och egna Material Symbols-subset är avancerade val. Följ [Foundations/Icons](https://webcomponentstest.scb.intra/?path=/docs/foundations-icons-ikoner--beskrivning) om appen inte får ladda Google Fonts eller behöver fler ikoner än paketets `icons.json`.
 
 ### Bundlad version
 
@@ -115,18 +118,18 @@ Kör först i appens mapp:
 npm outdated scb-wc
 ```
 
-Om en ny version finns, läs [Uppdatera SCB Web Components](https://webcomponents.scb.intra/?path=/docs/docs-uppdatera-s%C3%A5-uppdaterar-du--beskrivning). Där länkas du vidare till versionen och eventuella migrationssteg.
+Om en ny version finns, läs [Uppdatera SCB Web Components](https://webcomponentstest.scb.intra/?path=/docs/docs-uppdatera-s%C3%A5-uppdaterar-du--beskrivning). Där länkas du vidare till versionen och eventuella migrationssteg.
 
 Uppdatera sedan paketet, bygg appen och kör appens vanliga tester:
 
 ```sh
-npm install scb-wc
+npm install scb-wc@next
 ```
 
 För MVC och Blazor behöver du även köra appens befintliga kopieringsscript efter installationen. Exakta steg finns på uppdateringssidan.
 
 ## Viktigt
 
-- `scb-wc@latest` är produktionskanalen. Använd `scb-wc@next` för komponenter under utveckling och experiment.
+- `scb-wc@next` är **previewkanalen**. Komponenter kan ändras eller tas bort mellan versioner. Använd `scb-wc@latest` i externa produktionsmiljöer.
 - Kör alltid npm-kommandon i mappen där appens `package.json` ligger.
 - Ladda inte samma komponent på flera sätt på samma sida.

package/all.js

@@ -18,10 +18,12 @@ import './scb-card/scb-list-card.js';
 import './scb-card/scb-social-card.js';
 import './scb-checkbox/scb-checkbox-group.js';
 import './scb-checkbox/scb-checkbox.js';
+import './scb-chevron/scb-chevron.js';
 import './scb-chip/scb-chip.js';
 import './scb-collapse/scb-collapse.js';
 import './scb-container-card/scb-container-card.js';
 import './scb-cookies-consent/scb-cookies-consent.js';
+import './scb-datepicker/scb-datepicker.js';
 import './scb-dialog/scb-dialog.js';
 import './scb-divider/scb-divider.js';
 import './scb-drawer/scb-drawer.js';
@@ -97,3 +99,8 @@ import './scb-viz/scb-viz-series-differentiation-registry.js';
 import './scb-viz/scb-viz-series-differentiation-runtime.js';
 import './scb-viz/scb-viz-table-runtime.js';
 import './scb-viz/scb-viz.js';
+import './shared/component-size-token.js';
+import './shared/lazy-focus-ring.js';
+import './shared/lazy-ripple.js';
+import './shared/manual-popover.js';
+import './shared/scb-icon-svg.js';

package/blazor/scb-blazor-bridge.js

@@ -246,11 +246,17 @@ function mirrorHeaderSearch(el, ev) {
       mirror: mirrorHeaderSearch,
     },
     // <auto-generated blazor-source-rules>
+    { sel: 'scb-accordion-item', from: 'open-changed', to: 'openchange', prop: 'open' },
     { sel: 'scb-app-bar', from: 'title-changed', to: 'titlechange', prop: 'title' },
     { sel: 'scb-app-bar', from: 'position-changed', to: 'positionchange', prop: 'position' },
     { sel: 'scb-app-bar', from: 'type-changed', to: 'typechange' },
     { sel: 'scb-app-bar', from: 'search-supporting-text-changed', to: 'searchsupportingtextchange' },
-    { sel: 'scb-accordion-item', from: 'open-changed', to: 'openchange', prop: 'open' },
+    { sel: 'scb-breadcrumb', from: 'show-all-changed', to: 'showallchange', prop: 'showAll' },
+    { sel: 'scb-breadcrumb-item', from: 'current-changed', to: 'currentchange', prop: 'isCurrent' },
+    { sel: 'scb-button', from: 'variant-changed', to: 'variantchange', prop: 'variant' },
+    { sel: 'scb-button', from: 'label-changed', to: 'labelchange', prop: 'label' },
+    { sel: 'scb-button', from: 'disabled-changed', to: 'disabledchange', prop: 'disabled' },
+    { sel: 'scb-calendar-card', from: 'show-media-changed', to: 'showmediachange', prop: 'showMedia' },
     { sel: 'scb-card', from: 'variant-changed', to: 'variantchange', prop: 'variant' },
     { sel: 'scb-card', from: 'direction-changed', to: 'directionchange', prop: 'direction' },
     { sel: 'scb-card', from: 'title-changed', to: 'titlechange', prop: 'title' },
@@ -260,22 +266,6 @@ function mirrorHeaderSearch(el, ev) {
     { sel: 'scb-card', from: 'media-height-changed', to: 'mediaheightchange', prop: 'mediaHeight' },
     { sel: 'scb-card', from: 'like-click', to: 'likeclick' },
     { sel: 'scb-card', from: 'like-hover', to: 'likehover' },
-    { sel: 'scb-drawer', from: 'scb-drawer-opened', to: 'openchange', prop: 'open' },
-    { sel: 'scb-drawer', from: 'scb-drawer-closed', to: 'openchange', prop: 'open' },
-    { sel: 'scb-fact-card', from: 'open', to: 'openchange', prop: 'open' },
-    { sel: 'scb-fact-card', from: 'close', to: 'openchange', prop: 'open' },
-    { sel: 'scb-horizontal-scroller', from: 'scb-scroll', to: 'scroll', prop: 'scrollLeft' },
-    { sel: 'scb-horizontal-scroller', from: 'scb-scroll-start', to: 'scrollstart', prop: 'scrollLeft' },
-    { sel: 'scb-horizontal-scroller', from: 'scb-scroll-end', to: 'scrollend', prop: 'scrollLeft' },
-    { sel: 'scb-horizontal-scroller', from: 'scb-scroll-right', to: 'scrollright', prop: 'scrollLeft' },
-    { sel: 'scb-horizontal-scroller', from: 'scb-scroll-left', to: 'scrollleft', prop: 'scrollLeft' },
-    { sel: 'scb-progress-step', from: 'step-click', to: 'progressstepclick' },
-    { sel: 'scb-stepper', from: 'scb-step-change', to: 'stepchange' },
-    { sel: 'scb-breadcrumb', from: 'show-all-changed', to: 'showallchange', prop: 'showAll' },
-    { sel: 'scb-breadcrumb-item', from: 'current-changed', to: 'currentchange', prop: 'isCurrent' },
-    { sel: 'scb-button', from: 'variant-changed', to: 'variantchange', prop: 'variant' },
-    { sel: 'scb-button', from: 'label-changed', to: 'labelchange', prop: 'label' },
-    { sel: 'scb-button', from: 'disabled-changed', to: 'disabledchange', prop: 'disabled' },
     { sel: 'scb-chip', from: 'remove', to: 'remove' },
     { sel: 'scb-chip', from: 'selected-changed', to: 'selectedchange', prop: 'selected' },
     { sel: 'scb-chip', from: 'variant-changed', to: 'variantchange', prop: 'variant' },
@@ -287,11 +277,21 @@ function mirrorHeaderSearch(el, ev) {
     { sel: 'scb-cookies-consent', from: 'cookies-accept', to: 'cookiesaccept' },
     { sel: 'scb-cookies-consent', from: 'cookies-decline', to: 'cookiesdecline' },
     { sel: 'scb-cookies-consent', from: 'cookies-handle', to: 'cookieshandle' },
+    { sel: 'scb-drawer', from: 'scb-drawer-opened', to: 'openchange', prop: 'open' },
+    { sel: 'scb-drawer', from: 'scb-drawer-closed', to: 'openchange', prop: 'open' },
+    { sel: 'scb-fact-card', from: 'open', to: 'openchange', prop: 'open' },
+    { sel: 'scb-fact-card', from: 'close', to: 'openchange', prop: 'open' },
+    { sel: 'scb-horizontal-scroller', from: 'scb-scroll', to: 'scroll', prop: 'scrollLeft' },
+    { sel: 'scb-horizontal-scroller', from: 'scb-scroll-start', to: 'scrollstart', prop: 'scrollLeft' },
+    { sel: 'scb-horizontal-scroller', from: 'scb-scroll-end', to: 'scrollend', prop: 'scrollLeft' },
+    { sel: 'scb-horizontal-scroller', from: 'scb-scroll-right', to: 'scrollright', prop: 'scrollLeft' },
+    { sel: 'scb-horizontal-scroller', from: 'scb-scroll-left', to: 'scrollleft', prop: 'scrollLeft' },
     { sel: 'scb-icon-button', from: 'change', to: 'selectedchange', prop: 'selected' },
     { sel: 'scb-icon-button', from: 'toggle-changed', to: 'togglechange', prop: 'toggle' },
     { sel: 'scb-icon-button', from: 'icon-changed', to: 'iconchange', prop: 'icon' },
     { sel: 'scb-icon-button', from: 'disabled-changed', to: 'disabledchange', prop: 'disabled' },
-    { sel: 'scb-calendar-card', from: 'show-media-changed', to: 'showmediachange', prop: 'showMedia' },
+    { sel: 'scb-progress-step', from: 'step-click', to: 'progressstepclick' },
+    { sel: 'scb-stepper', from: 'scb-step-change', to: 'stepchange' },
     { sel: 'scb-toc-item', from: 'expanded-changed', to: 'expandedchange', prop: 'expanded' },
     // </auto-generated blazor-source-rules>
 
@@ -994,166 +994,6 @@ function mirrorHeaderSearch(el, ev) {
         open: typeof el.open === 'boolean' ? el.open : el.hasAttribute('open'),
       }),
     },
-    {
-      sel: 'scb-drawer',
-      attr: 'open',
-      to: 'openchange',
-      detail: (el) => ({
-        open: typeof el.open === 'boolean' ? el.open : el.hasAttribute('open'),
-      }),
-    },
-    {
-      sel: 'scb-fact-card',
-      attr: 'open',
-      to: 'openchange',
-      detail: (el) => ({
-        open: typeof el.open === 'boolean' ? el.open : el.hasAttribute('open'),
-      }),
-    },
-    {
-      sel: 'scb-fact-card',
-      attr: 'variant',
-      to: 'variantchange',
-      detail: (el) => ({
-        variant: (el.variant ?? el.getAttribute('variant') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-fact-card',
-      attr: 'icon',
-      to: 'iconchange',
-      detail: (el) => ({
-        icon: (el.icon ?? el.getAttribute('icon') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-fact-card',
-      attr: 'show-close-button',
-      to: 'showclosebuttonchange',
-      detail: (el) => ({
-        showCloseButton: typeof el.showCloseButton === 'boolean' ? el.showCloseButton : el.hasAttribute('show-close-button'),
-      }),
-    },
-    {
-      sel: 'scb-progress-indicator',
-      attr: 'type',
-      to: 'typechange',
-      detail: (el) => ({
-        type: (el.type ?? el.getAttribute('type') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-progress-indicator',
-      attr: 'progress',
-      to: 'progresschange',
-      detail: (el) => ({
-        progress: (el.progress ?? el.getAttribute('progress') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-progress-indicator',
-      attr: 'is-static',
-      to: 'isstaticchange',
-      detail: (el) => ({
-        isStatic: typeof el.isStatic === 'boolean' ? el.isStatic : el.hasAttribute('is-static'),
-      }),
-    },
-    {
-      sel: 'scb-progress-stepper',
-      attr: 'progress-width',
-      to: 'progresswidthchange',
-      detail: (el) => ({
-        progressWidth: (el.progressWidth ?? el.getAttribute('progress-width') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-progress-stepper',
-      attr: 'height',
-      to: 'heightchange',
-      detail: (el) => ({
-        height: (el.height ?? el.getAttribute('height') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-progress-stepper',
-      attr: 'position',
-      to: 'positionchange',
-      detail: (el) => ({
-        position: (el.position ?? el.getAttribute('position') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-skeleton',
-      attr: 'variant',
-      to: 'variantchange',
-      detail: (el) => ({
-        variant: (el.variant ?? el.getAttribute('variant') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-skeleton',
-      attr: 'width',
-      to: 'widthchange',
-      detail: (el) => ({
-        width: (el.width ?? el.getAttribute('width') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-skeleton',
-      attr: 'height',
-      to: 'heightchange',
-      detail: (el) => ({
-        height: (el.height ?? el.getAttribute('height') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-skeleton',
-      attr: 'border-size',
-      to: 'bordersizechange',
-      detail: (el) => ({
-        borderSize: (el.borderSize ?? el.getAttribute('border-size') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-skeleton',
-      attr: 'spacing',
-      to: 'spacingchange',
-      detail: (el) => ({
-        spacing: (el.spacing ?? el.getAttribute('spacing') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-skeleton',
-      attr: 'spacing-top',
-      to: 'spacingchange',
-      detail: (el) => ({
-        spacingTop: (el.spacingTop ?? el.getAttribute('spacing-top') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-skeleton',
-      attr: 'spacing-bottom',
-      to: 'spacingchange',
-      detail: (el) => ({
-        spacingBottom: (el.spacingBottom ?? el.getAttribute('spacing-bottom') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-skeleton',
-      attr: 'spacing-left',
-      to: 'spacingchange',
-      detail: (el) => ({
-        spacingLeft: (el.spacingLeft ?? el.getAttribute('spacing-left') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-skeleton',
-      attr: 'spacing-right',
-      to: 'spacingchange',
-      detail: (el) => ({
-        spacingRight: (el.spacingRight ?? el.getAttribute('spacing-right') ?? '').toString(),
-      }),
-    },
     {
       sel: 'scb-breadcrumb',
       attr: 'show-all',
@@ -1202,6 +1042,22 @@ function mirrorHeaderSearch(el, ev) {
         disabled: typeof el.disabled === 'boolean' ? el.disabled : el.hasAttribute('disabled'),
       }),
     },
+    {
+      sel: 'scb-calendar-card',
+      attr: 'variant',
+      to: 'variantchange',
+      detail: (el) => ({
+        variant: (el.variant ?? el.getAttribute('variant') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-calendar-card',
+      attr: 'show-media',
+      to: 'showmediachange',
+      detail: (el) => ({
+        showMedia: typeof el.showMedia === 'boolean' ? el.showMedia : el.hasAttribute('show-media'),
+      }),
+    },
     {
       sel: 'scb-chip',
       attr: 'selected',
@@ -1266,6 +1122,46 @@ function mirrorHeaderSearch(el, ev) {
         open: typeof el.open === 'boolean' ? el.open : el.hasAttribute('open'),
       }),
     },
+    {
+      sel: 'scb-drawer',
+      attr: 'open',
+      to: 'openchange',
+      detail: (el) => ({
+        open: typeof el.open === 'boolean' ? el.open : el.hasAttribute('open'),
+      }),
+    },
+    {
+      sel: 'scb-fact-card',
+      attr: 'open',
+      to: 'openchange',
+      detail: (el) => ({
+        open: typeof el.open === 'boolean' ? el.open : el.hasAttribute('open'),
+      }),
+    },
+    {
+      sel: 'scb-fact-card',
+      attr: 'variant',
+      to: 'variantchange',
+      detail: (el) => ({
+        variant: (el.variant ?? el.getAttribute('variant') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-fact-card',
+      attr: 'icon',
+      to: 'iconchange',
+      detail: (el) => ({
+        icon: (el.icon ?? el.getAttribute('icon') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-fact-card',
+      attr: 'show-close-button',
+      to: 'showclosebuttonchange',
+      detail: (el) => ({
+        showCloseButton: typeof el.showCloseButton === 'boolean' ? el.showCloseButton : el.hasAttribute('show-close-button'),
+      }),
+    },
     {
       sel: 'scb-icon-button',
       attr: 'selected',
@@ -1298,22 +1194,6 @@ function mirrorHeaderSearch(el, ev) {
         disabled: typeof el.disabled === 'boolean' ? el.disabled : el.hasAttribute('disabled'),
       }),
     },
-    {
-      sel: 'scb-calendar-card',
-      attr: 'variant',
-      to: 'variantchange',
-      detail: (el) => ({
-        variant: (el.variant ?? el.getAttribute('variant') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-calendar-card',
-      attr: 'show-media',
-      to: 'showmediachange',
-      detail: (el) => ({
-        showMedia: typeof el.showMedia === 'boolean' ? el.showMedia : el.hasAttribute('show-media'),
-      }),
-    },
     {
       sel: 'scb-keyfigure-card',
       attr: 'keyfigure',
@@ -1427,51 +1307,123 @@ function mirrorHeaderSearch(el, ev) {
       }),
     },
     {
-      sel: 'scb-toc',
-      attr: 'detached',
-      to: 'detachedchange',
+      sel: 'scb-progress-indicator',
+      attr: 'type',
+      to: 'typechange',
       detail: (el) => ({
-        detached: typeof el.detached === 'boolean' ? el.detached : el.hasAttribute('detached'),
+        type: (el.type ?? el.getAttribute('type') ?? '').toString(),
       }),
     },
     {
-      sel: 'scb-toc-item',
-      attr: 'expanded',
-      to: 'expandedchange',
+      sel: 'scb-progress-indicator',
+      attr: 'progress',
+      to: 'progresschange',
       detail: (el) => ({
-        expanded: typeof el.expanded === 'boolean' ? el.expanded : el.hasAttribute('expanded'),
+        progress: (el.progress ?? el.getAttribute('progress') ?? '').toString(),
       }),
     },
     {
-      sel: 'scb-toc-item',
-      attr: 'label',
-      to: 'labelchange',
+      sel: 'scb-progress-indicator',
+      attr: 'is-static',
+      to: 'isstaticchange',
       detail: (el) => ({
-        label: (el.label ?? el.getAttribute('label') ?? '').toString(),
+        isStatic: typeof el.isStatic === 'boolean' ? el.isStatic : el.hasAttribute('is-static'),
       }),
     },
     {
-      sel: 'scb-toc-item',
-      attr: 'supporting-text',
-      to: 'supportingtextchange',
+      sel: 'scb-progress-stepper',
+      attr: 'progress-width',
+      to: 'progresswidthchange',
       detail: (el) => ({
-        supportingText: (el.supportingText ?? el.getAttribute('supporting-text') ?? '').toString(),
+        progressWidth: (el.progressWidth ?? el.getAttribute('progress-width') ?? '').toString(),
       }),
     },
     {
-      sel: 'scb-toc-item',
-      attr: 'divider',
-      to: 'dividerchange',
+      sel: 'scb-progress-stepper',
+      attr: 'height',
+      to: 'heightchange',
       detail: (el) => ({
-        divider: typeof el.divider === 'boolean' ? el.divider : el.hasAttribute('divider'),
+        height: (el.height ?? el.getAttribute('height') ?? '').toString(),
       }),
     },
     {
-      sel: 'scb-toc-item',
-      attr: 'item-href',
-      to: 'itemhrefchange',
+      sel: 'scb-progress-stepper',
+      attr: 'position',
+      to: 'positionchange',
       detail: (el) => ({
-        itemHref: (el.itemHref ?? el.getAttribute('item-href') ?? '').toString(),
+        position: (el.position ?? el.getAttribute('position') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-skeleton',
+      attr: 'variant',
+      to: 'variantchange',
+      detail: (el) => ({
+        variant: (el.variant ?? el.getAttribute('variant') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-skeleton',
+      attr: 'width',
+      to: 'widthchange',
+      detail: (el) => ({
+        width: (el.width ?? el.getAttribute('width') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-skeleton',
+      attr: 'height',
+      to: 'heightchange',
+      detail: (el) => ({
+        height: (el.height ?? el.getAttribute('height') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-skeleton',
+      attr: 'border-size',
+      to: 'bordersizechange',
+      detail: (el) => ({
+        borderSize: (el.borderSize ?? el.getAttribute('border-size') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-skeleton',
+      attr: 'spacing',
+      to: 'spacingchange',
+      detail: (el) => ({
+        spacing: (el.spacing ?? el.getAttribute('spacing') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-skeleton',
+      attr: 'spacing-top',
+      to: 'spacingchange',
+      detail: (el) => ({
+        spacingTop: (el.spacingTop ?? el.getAttribute('spacing-top') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-skeleton',
+      attr: 'spacing-bottom',
+      to: 'spacingchange',
+      detail: (el) => ({
+        spacingBottom: (el.spacingBottom ?? el.getAttribute('spacing-bottom') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-skeleton',
+      attr: 'spacing-left',
+      to: 'spacingchange',
+      detail: (el) => ({
+        spacingLeft: (el.spacingLeft ?? el.getAttribute('spacing-left') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-skeleton',
+      attr: 'spacing-right',
+      to: 'spacingchange',
+      detail: (el) => ({
+        spacingRight: (el.spacingRight ?? el.getAttribute('spacing-right') ?? '').toString(),
       }),
     },
     {
@@ -1498,6 +1450,54 @@ function mirrorHeaderSearch(el, ev) {
         showIcon: typeof el.showIcon === 'boolean' ? el.showIcon : el.hasAttribute('show-icon'),
       }),
     },
+    {
+      sel: 'scb-toc',
+      attr: 'detached',
+      to: 'detachedchange',
+      detail: (el) => ({
+        detached: typeof el.detached === 'boolean' ? el.detached : el.hasAttribute('detached'),
+      }),
+    },
+    {
+      sel: 'scb-toc-item',
+      attr: 'expanded',
+      to: 'expandedchange',
+      detail: (el) => ({
+        expanded: typeof el.expanded === 'boolean' ? el.expanded : el.hasAttribute('expanded'),
+      }),
+    },
+    {
+      sel: 'scb-toc-item',
+      attr: 'label',
+      to: 'labelchange',
+      detail: (el) => ({
+        label: (el.label ?? el.getAttribute('label') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-toc-item',
+      attr: 'supporting-text',
+      to: 'supportingtextchange',
+      detail: (el) => ({
+        supportingText: (el.supportingText ?? el.getAttribute('supporting-text') ?? '').toString(),
+      }),
+    },
+    {
+      sel: 'scb-toc-item',
+      attr: 'divider',
+      to: 'dividerchange',
+      detail: (el) => ({
+        divider: typeof el.divider === 'boolean' ? el.divider : el.hasAttribute('divider'),
+      }),
+    },
+    {
+      sel: 'scb-toc-item',
+      attr: 'item-href',
+      to: 'itemhrefchange',
+      detail: (el) => ({
+        itemHref: (el.itemHref ?? el.getAttribute('item-href') ?? '').toString(),
+      }),
+    },
     // </auto-generated blazor-attr-rules>
 
 	// scb-calendar attribut som ska trigga state-refresh