scb-wc 0.1.16 → 0.1.17

package/README.md

@@ -1,6 +1,9 @@
-# Om SCB Web Components
+# Om SCB Web Components Preview
 
-SCB Web Components finns för att underlätta skapandet av enhetliga, tillgängliga och användbara webbapplikationer.
+> ⚠️ **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(test) finns för att underlätta skapandet av enhetliga, tillgängliga och användbara webbapplikationer.
 
 Komponenterna bygger på:
 - [Lit](https://lit.dev/)
@@ -8,45 +11,32 @@ Komponenterna bygger på:
 
 ## Storybook och dokumentation (internt)
 
-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
 
-Rekommenderad startväg:
-
-```sh
-npx scb-wc init html my-app
-npx scb-wc init react my-react-app
-npx scb-wc init blazor my-blazor-app
-```
-
-Det skapar en liten starterapp med:
-- `scb-header`
-- `scb-footer`
-- `scb-grid`
-- några vanliga komponenter
-
-Välj sedan den starter som ligger närmast din app och kör `npm install` i den nya mappen.
+> **Obs:** Kör alla kommandon i mappen där din `package.json` ligger.  
+> Har du ingen? Kör `npm init -y` i projektroten (eller annan lämplig mapp).
 
-Om du redan har en app med `package.json`, kör kommandon i den mappen och installera paketet:
+Installera previewkanalen:
 
 ```sh
-npm install scb-wc
+npm install scb-wc@next
 ```
 
 ---
 
 ## Alternativ 1: Använd som ES‑moduler (t.ex. i React, Vue, SPA)
 
-Importera CSS och de komponenter du använder (bäst för tree‑shaking):
+Importera CSS och de testkomponenter du använder (bäst för tree‑shaking):
 
 ```js
 // Global CSS + tokens (måste bara importeras en gång)
@@ -82,7 +72,7 @@ Då används paketets egna fontfiler under `node_modules/scb-wc/fonts/`.
 
 ## Alternativ 2: Använd i MVC/MPA via `<script type="module">`
 
-Det här läget använder den färdig‑splittrade **MVC‑ESM**‑builden som följer med paketet under:
+Det här läget använder den färdig‑splittade **MVC‑ESM**‑builden som följer med paketet under:
 
 ```text
 node_modules/scb-wc/mvc/
@@ -95,7 +85,7 @@ Lägg till i din apps `package.json`:
 ```jsonc
 {
   "scripts": {
-    "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\""
+    "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc@next?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\""
   }
 }
 ```
@@ -142,7 +132,7 @@ Behöver du en annan webbrotsökväg (t.ex. om din `wwwroot` ligger någon annan
 
 ## Alternativ 3: Bundlad version (IIFE) för äldre miljöer
 
-Om ESM inte stöds kan du använda den bundlade varianten från paketroten.  
+Om ESM inte stöds kan du använda den bundlade test‑varianten från paketroten.  
 Flytta följande två filer från `node_modules/scb-wc` och använd dem i applikationen:
 
 ```text
@@ -164,7 +154,7 @@ node_modules/scb-wc/scb-wc.css
 
 SCB Web Components fungerar även i Blazor‑appar när du vill använda samma komponenter i både MVC/MPA och Blazor.
 
-Grundprincipen är:
+Grundprincipen är samma som för `scb-wc`:
 
 1. Använd MVC‑ESM‑builden (`node_modules/scb-wc/mvc`) och kopiera den till `wwwroot/ui` med `ui:install`.
 2. Ladda `scb-blazor-bridge.js` från `wwwroot/ui` i din Blazor‑layout.
@@ -177,8 +167,8 @@ Lägg till ett script som kopierar interop-filen från `node_modules` till ditt
 ```jsonc
 {
   "scripts": {
-    "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\"",
-    "ui:blazor:interop": "node -e \"const fs=require('fs'),p=require('path');const start=process.env.INIT_CWD||process.cwd();const src=p.resolve('node_modules/scb-wc/blazor/ScbBlazorInteropBase.cs');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc?');process.exit(1);}const dst=p.resolve(start,'ScbBlazor/ScbBlazorInteropBase.cs');fs.mkdirSync(p.dirname(dst),{recursive:true});fs.copyFileSync(src,dst);console.log('Kopierade '+src+' → '+dst);\""
+    "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc@next?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\"",
+    "ui:blazor:interop": "node -e \"const fs=require('fs'),p=require('path');const start=process.env.INIT_CWD||process.cwd();const src=p.resolve('node_modules/scb-wc/blazor/ScbBlazorInteropBase.cs');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc@next?');process.exit(1);}const dst=p.resolve(start,'ScbBlazor/ScbBlazorInteropBase.cs');fs.mkdirSync(p.dirname(dst),{recursive:true});fs.copyFileSync(src,dst);console.log('Kopierade '+src+' → '+dst);\""
   }
 }
 ```
@@ -192,13 +182,13 @@ Exempel på layout:
 <script type="module" src="~/ui/scb-blazor-bridge.js"></script>
 ```
 
-`ScbBlazorInteropBase` kan återanvändas mellan projekt som använder både `scb-wc@latest` och `scb-wc@next`.
+`ScbBlazorInteropBase` är samma bas‑klass i preview- och public-kanalen. Du kan därför dela samma C#‑fil mellan projekt som använder `scb-wc@next` och `scb-wc@latest`.
 
 ---
 
 ## 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 kommandon i mappen med din `package.json`.** Placeringen av `package.json` styr standardmål för `ui:install` (rot → `wwwroot/ui`, `ClientApp/` → använd `--ui_wwwroot=../wwwroot`).  
 - **Blanda inte MVC‑ESM och IIFE på samma sida.** Välj en distributionsform per sida/app.  
 - **Blazor:** Se till att `scb-blazor-bridge.js` laddas efter att komponent‑JS:et finns på sidan, och att `ScbBlazorInteropBase` inte dupliceras i flera namespaces i samma lösning.

package/all.js

@@ -85,7 +85,6 @@ import './mvc/components/scb-textfield/scb-textfield.js';
 import './mvc/components/scb-toc/scb-toc-item.js';
 import './mvc/components/scb-toc/scb-toc.js';
 import './mvc/components/scb-tooltip/scb-tooltip.js';
-import './mvc/components/scb-vignette/scb-vignette.js';
 import './mvc/components/scb-viz/scb-viz-actions-runtime.js';
 import './mvc/components/scb-viz/scb-viz-print-runtime.js';
 import './mvc/components/scb-viz/scb-viz-series-differentiation-registry.js';
@@ -183,7 +182,6 @@ import './scb-textfield/scb-textfield.js';
 import './scb-toc/scb-toc-item.js';
 import './scb-toc/scb-toc.js';
 import './scb-tooltip/scb-tooltip.js';
-import './scb-vignette/scb-vignette.js';
 import './scb-viz/scb-viz-actions-runtime.js';
 import './scb-viz/scb-viz-print-runtime.js';
 import './scb-viz/scb-viz-series-differentiation-registry.js';

package/blazor/ScbBlazorInteropBase.cs

@@ -739,9 +739,6 @@ namespace ScbBlazor
                         Type           = dto.Type           ?? string.Empty,
                         Variant        = dto.Variant        ?? string.Empty,
                         Direction      = dto.Direction      ?? string.Empty,
-                        Title          = dto.Title          ?? string.Empty,
-                        Subtitle       = dto.Subtitle       ?? string.Empty,
-                        SupportingText = dto.SupportingText ?? string.Empty,
                         CardHref       = dto.CardHref       ?? string.Empty,
 
                         MediaType          = dto.MediaType          ?? string.Empty,
@@ -848,9 +845,6 @@ namespace ScbBlazor
                     {
                         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,
@@ -1052,9 +1046,6 @@ namespace ScbBlazor
             if (state.Calendars is not null && state.Calendars.Length > 0)
             {
                 var dto = state.Calendars[0];
-                Calendar.Title          = dto.Title          ?? string.Empty;
-                Calendar.Subtitle       = dto.Subtitle       ?? string.Empty;
-                Calendar.SupportingText = dto.SupportingText ?? string.Empty;
                 Calendar.Variant        = string.IsNullOrWhiteSpace(dto.Variant)
                     ? "default"
                     : dto.Variant!;
@@ -1062,9 +1053,6 @@ namespace ScbBlazor
             }
             else if (state.Calendar is not null)
             {
-                Calendar.Title          = state.Calendar.Title ?? string.Empty;
-                Calendar.Subtitle       = state.Calendar.Subtitle ?? string.Empty;
-                Calendar.SupportingText = state.Calendar.SupportingText ?? string.Empty;
                 Calendar.Variant        = string.IsNullOrWhiteSpace(state.Calendar.Variant)
                     ? "default"
                     : state.Calendar.Variant!;
@@ -1072,9 +1060,6 @@ namespace ScbBlazor
             }
             else
             {
-                Calendar.Title          = string.Empty;
-                Calendar.Subtitle       = string.Empty;
-                Calendar.SupportingText = string.Empty;
                 Calendar.Variant        = "default";
                 Calendar.ShowMedia      = false;
             }
@@ -1088,9 +1073,6 @@ namespace ScbBlazor
                     var dto = state.Calendars[i];
                     calendars[i] = new CalendarState
                     {
-                        Title          = dto.Title          ?? string.Empty,
-                        Subtitle       = dto.Subtitle       ?? string.Empty,
-                        SupportingText = dto.SupportingText ?? string.Empty,
                         Variant        = string.IsNullOrWhiteSpace(dto.Variant)
                             ? "default"
                             : dto.Variant!,
@@ -1184,17 +1166,11 @@ namespace ScbBlazor
                     notifications[i] = new NotificationState
                     {
                         Open            = dto.Open,
-                        Variant         = dto.Variant         ?? string.Empty,
-                        Title           = dto.Title           ?? string.Empty,
-                        Subtitle        = dto.Subtitle        ?? string.Empty,
-                        SupportingText  = dto.SupportingText  ?? string.Empty,
-                        LinkText        = dto.LinkText        ?? string.Empty,
-                        LinkHref        = dto.LinkHref        ?? string.Empty,
+                        Variant         = dto.Variant   ?? string.Empty,
+                        Size            = dto.Size      ?? string.Empty,
                         ShowIcon        = dto.ShowIcon,
                         ShowCloseButton = dto.ShowCloseButton,
-                        FullHeight      = dto.FullHeight,
-                        FullWidth       = dto.FullWidth,
-                        Direction       = dto.Direction       ?? string.Empty
+                        Direction       = dto.Direction ?? string.Empty
                     };
                 }
                 Notifications = notifications;
@@ -2587,16 +2563,6 @@ namespace ScbBlazor
         }
 
         // Calendar card: index-baserad och id-baserad variant
-        public Task SetCalendarCardTitleAsync(int index, string title)
-        {
-            return JS.InvokeVoidAsync("SCBBlazor.setCalendarCardTitle", GetScbRootArg(), index, title ?? string.Empty).AsTask();
-        }
-
-        public Task SetCalendarCardTitleByIdAsync(string id, string title)
-        {
-            return JS.InvokeVoidAsync("SCBBlazor.setCalendarCardTitleById", GetScbRootArg(), id ?? string.Empty, title ?? string.Empty).AsTask();
-        }
-
         public Task SetCalendarCardShowMediaAsync(int index, bool showMedia)
         {
             return JS.InvokeVoidAsync("SCBBlazor.setCalendarCardShowMedia", GetScbRootArg(), index, showMedia).AsTask();
@@ -3008,9 +2974,6 @@ namespace ScbBlazor
             public string Type           { get; set; } = string.Empty;
             public string Variant        { get; set; } = string.Empty;
             public string Direction      { get; set; } = string.Empty;
-            public string Title          { get; set; } = string.Empty;
-            public string Subtitle       { get; set; } = string.Empty;
-            public string SupportingText { get; set; } = string.Empty;
             public string CardHref       { get; set; } = string.Empty;
 
             public string MediaType          { get; set; } = string.Empty;
@@ -3076,9 +3039,6 @@ namespace ScbBlazor
         {
             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; }
@@ -3191,9 +3151,6 @@ namespace ScbBlazor
 
         protected sealed class CalendarState
         {
-            public string Title          { get; set; } = string.Empty;
-            public string Subtitle       { get; set; } = string.Empty;
-            public string SupportingText { get; set; } = string.Empty;
             public string Variant        { get; set; } = "default";
             public bool   ShowMedia      { get; set; }
         }
@@ -3219,15 +3176,9 @@ namespace ScbBlazor
         {
             public bool   Open            { get; set; }
             public string Variant         { get; set; } = string.Empty;
-            public string Title           { get; set; } = string.Empty;
-            public string Subtitle        { get; set; } = string.Empty;
-            public string SupportingText  { get; set; } = string.Empty;
-            public string LinkText        { get; set; } = string.Empty;
-            public string LinkHref        { get; set; } = string.Empty;
+            public string Size            { get; set; } = string.Empty;
             public bool   ShowIcon        { get; set; }
             public bool   ShowCloseButton { get; set; }
-            public bool   FullHeight      { get; set; }
-            public bool   FullWidth       { get; set; }
             public string Direction       { get; set; } = string.Empty;
         }
 
@@ -3889,9 +3840,6 @@ namespace ScbBlazor
             public string? Type           { get; set; }
             public string? Variant        { get; set; }
             public string? Direction      { get; set; }
-            public string? Title          { get; set; }
-            public string? Subtitle       { get; set; }
-            public string? SupportingText { get; set; }
             public string? CardHref       { get; set; }
 
             public string? MediaType          { get; set; }
@@ -3957,9 +3905,6 @@ namespace ScbBlazor
         {
             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; }
@@ -4072,9 +4017,6 @@ namespace ScbBlazor
 
         private sealed class CalendarDto
         {
-            public string? Title          { get; set; }
-            public string? Subtitle       { get; set; }
-            public string? SupportingText { get; set; }
             public string? Variant        { get; set; }
             public bool   ShowMedia       { get; set; }
         }
@@ -4101,15 +4043,9 @@ namespace ScbBlazor
         {
             public bool   Open            { get; set; }
             public string? Variant        { get; set; }
-            public string? Title          { get; set; }
-            public string? Subtitle       { get; set; }
-            public string? SupportingText { get; set; }
-            public string? LinkText       { get; set; }
-            public string? LinkHref       { get; set; }
+            public string? Size           { get; set; }
             public bool   ShowIcon        { get; set; }
             public bool   ShowCloseButton { get; set; }
-            public bool   FullHeight      { get; set; }
-            public bool   FullWidth       { get; set; }
             public string? Direction      { get; set; }
         }
 

package/blazor/scb-blazor-bridge.js

@@ -291,8 +291,6 @@ function mirrorHeaderSearch(el, ev) {
     { 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: 'title-changed', to: 'titlechange', prop: 'title' },
-    { sel: 'scb-calendar-card', from: 'subtitle-changed', to: 'subtitlechange', prop: 'subtitle' },
     { sel: 'scb-calendar-card', from: 'show-media-changed', to: 'showmediachange', prop: 'showMedia' },
     { sel: 'scb-toc-item', from: 'expanded-changed', to: 'expandedchange', prop: 'expanded' },
     // </auto-generated blazor-source-rules>
@@ -535,9 +533,6 @@ function mirrorHeaderSearch(el, ev) {
       },
     },
 
-    // scb-fact-card-content
-    // scb-fact-card-content använder attribut (title/subtitle/supporting-text) och saknar egna change-events
-
     // scb-options-menu
     {
       sel: 'scb-options-menu',
@@ -1015,30 +1010,6 @@ function mirrorHeaderSearch(el, ev) {
         open: typeof el.open === 'boolean' ? el.open : el.hasAttribute('open'),
       }),
     },
-    {
-      sel: 'scb-fact-card',
-      attr: 'title',
-      to: 'titlechange',
-      detail: (el) => ({
-        title: (el.title ?? el.getAttribute('title') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-fact-card',
-      attr: 'subtitle',
-      to: 'subtitlechange',
-      detail: (el) => ({
-        subtitle: (el.subtitle ?? el.getAttribute('subtitle') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-fact-card',
-      attr: 'supporting-text',
-      to: 'supportingtextchange',
-      detail: (el) => ({
-        supportingText: (el.supportingText ?? el.getAttribute('supporting-text') ?? '').toString(),
-      }),
-    },
     {
       sel: 'scb-fact-card',
       attr: 'variant',
@@ -1063,30 +1034,6 @@ function mirrorHeaderSearch(el, ev) {
         showCloseButton: typeof el.showCloseButton === 'boolean' ? el.showCloseButton : el.hasAttribute('show-close-button'),
       }),
     },
-    {
-      sel: 'scb-fact-card-content',
-      attr: 'title',
-      to: 'titlechange',
-      detail: (el) => ({
-        title: (el.title ?? el.getAttribute('title') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-fact-card-content',
-      attr: 'subtitle',
-      to: 'subtitlechange',
-      detail: (el) => ({
-        subtitle: (el.subtitle ?? el.getAttribute('subtitle') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-fact-card-content',
-      attr: 'supporting-text',
-      to: 'supportingtextchange',
-      detail: (el) => ({
-        supportingText: (el.supportingText ?? el.getAttribute('supporting-text') ?? '').toString(),
-      }),
-    },
     {
       sel: 'scb-progress-indicator',
       attr: 'type',
@@ -1351,30 +1298,6 @@ function mirrorHeaderSearch(el, ev) {
         disabled: typeof el.disabled === 'boolean' ? el.disabled : el.hasAttribute('disabled'),
       }),
     },
-    {
-      sel: 'scb-calendar-card',
-      attr: 'title',
-      to: 'titlechange',
-      detail: (el) => ({
-        title: (el.title ?? el.getAttribute('title') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-calendar-card',
-      attr: 'subtitle',
-      to: 'subtitlechange',
-      detail: (el) => ({
-        subtitle: (el.subtitle ?? el.getAttribute('subtitle') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-calendar-card',
-      attr: 'supporting-text',
-      to: 'supportingtextchange',
-      detail: (el) => ({
-        supportingText: (el.supportingText ?? el.getAttribute('supporting-text') ?? '').toString(),
-      }),
-    },
     {
       sel: 'scb-calendar-card',
       attr: 'variant',
@@ -1399,22 +1322,6 @@ function mirrorHeaderSearch(el, ev) {
         keyfigure: (el.keyfigure ?? el.getAttribute('keyfigure') ?? '').toString(),
       }),
     },
-    {
-      sel: 'scb-keyfigure-card',
-      attr: 'subtitle',
-      to: 'subtitlechange',
-      detail: (el) => ({
-        subtitle: (el.subtitle ?? el.getAttribute('subtitle') ?? '').toString(),
-      }),
-    },
-    {
-      sel: 'scb-keyfigure-card',
-      attr: 'supporting-text',
-      to: 'supportingtextchange',
-      detail: (el) => ({
-        supportingText: (el.supportingText ?? el.getAttribute('supporting-text') ?? '').toString(),
-      }),
-    },
     {
       sel: 'scb-keyfigure-card',
       attr: 'card-href',
@@ -1892,17 +1799,6 @@ function mirrorHeaderSearch(el, ev) {
       attr: 'show-close-button',
       to: 'showclosebuttonchange',
     },
-    {
-      sel: 'scb-notification-card',
-      attr: 'full-height',
-      to: 'fullheightchange',
-    },
-    {
-      sel: 'scb-notification-card',
-      attr: 'full-width',
-      to: 'fullwidthchange',
-    },
-
     { sel: 'scb-table-advanced', attr: 'with-pagination', to: 'tableadvancedchange' },
     { sel: 'scb-table-advanced', attr: 'with-filtering-search', to: 'tableadvancedchange' },
     { sel: 'scb-table-advanced', attr: 'no-scroll', to: 'tableadvancedchange' },
@@ -2124,7 +2020,7 @@ window.SCBBlazor.getState = function (root) {
   const breadcrumbItemsState = Array.from(breadcrumbItems).map((item) => {
     const anyItem = item;
     const label = (
-      anyItem.label ?? item.getAttribute('label') ?? ''
+      anyItem.label ?? item.getAttribute('label') ?? item.textContent?.trim() ?? ''
     ).toString();
 
     const href = (
@@ -2201,7 +2097,7 @@ window.SCBBlazor.getState = function (root) {
 
   // App bar, läser direkt från attributen
   const appBarState = {
-    title: appBar ? appBar.getAttribute('title') || '' : '',
+    title: appBar ? appBar.getAttribute('app-bar-title') || appBar.getAttribute('title') || '' : '',
     type: appBar ? appBar.getAttribute('type') || '' : '',
     position: appBar ? appBar.getAttribute('position') || '' : '',
     searchSupportingText: appBar
@@ -2259,9 +2155,6 @@ window.SCBBlazor.getState = function (root) {
 
   // Alla scb-calendar-card på sidan
   const calendarsState = Array.from(calendars).map((c) => ({
-    title: c.getAttribute('title') || '',
-    subtitle: c.getAttribute('subtitle') || '',
-    supportingText: c.getAttribute('supporting-text') || '',
     variant: c.getAttribute('variant') || '',
     showMedia: c.hasAttribute('show-media'),
   }));
@@ -2271,9 +2164,6 @@ window.SCBBlazor.getState = function (root) {
     calendarsState.length > 0
       ? calendarsState[0]
       : {
-          title: '',
-          subtitle: '',
-          supportingText: '',
           variant: '',
           showMedia: false,
         };
@@ -2482,9 +2372,6 @@ window.SCBBlazor.getState = function (root) {
 
     const id = (fc.getAttribute('id') ?? '').toString();
     const variant = (anyFc.variant ?? fc.getAttribute('variant') ?? '').toString();
-    const title = (anyFc.title ?? fc.getAttribute('title') ?? '').toString();
-    const subtitle = (anyFc.subtitle ?? fc.getAttribute('subtitle') ?? '').toString();
-    const supportingText = (anyFc.supportingText ?? fc.getAttribute('supporting-text') ?? '').toString();
     const icon = (anyFc.icon ?? fc.getAttribute('icon') ?? '').toString();
 
     const showCloseButton =
@@ -2502,9 +2389,6 @@ window.SCBBlazor.getState = function (root) {
     return {
       id,
       variant,
-      title,
-      subtitle,
-      supportingText,
       icon,
       showCloseButton: !!showCloseButton,
       open: !!open,
@@ -2715,11 +2599,16 @@ window.SCBBlazor.getState = function (root) {
     };
   });
 
-// Alla scb-keyfigure-card på sidan
+  const getSlottedText = (element, slotName) => Array.from(element.querySelectorAll(`[slot="${slotName}"]`))
+    .map((item) => item.textContent?.trim() ?? '')
+    .filter(Boolean)
+    .join(' ');
+
+  // Alla scb-keyfigure-card på sidan
   const keyfiguresState = Array.from(keyfigures).map((card) => ({
     keyfigure: card.getAttribute('keyfigure') || '',
-    subtitle: card.getAttribute('subtitle') || '',
-    supportingText: card.getAttribute('supporting-text') || '',
+    subtitle: getSlottedText(card, 'subtitle'),
+    supportingText: getSlottedText(card, 'supporting-text'),
     cardHref: card.getAttribute('card-href') || '',
     icon: card.getAttribute('icon') || '',
     size: card.getAttribute('size') || '',
@@ -2975,15 +2864,9 @@ window.SCBBlazor.getState = function (root) {
   const notificationsState = Array.from(notifications).map((card) => ({
     open: card.hasAttribute('open'),
     variant: card.getAttribute('variant') || '',
-    title: card.getAttribute('title') || '',
-    subtitle: card.getAttribute('subtitle') || '',
-    supportingText: card.getAttribute('supporting-text') || '',
-    linkText: card.getAttribute('link-text') || '',
-    linkHref: card.getAttribute('link-href') || '',
+    size: card.getAttribute('size') || '',
     showIcon: card.hasAttribute('show-icon'),
     showCloseButton: card.hasAttribute('show-close-button'),
-    fullHeight: card.hasAttribute('full-height'),
-    fullWidth: card.hasAttribute('full-width'),
     direction: card.getAttribute('direction') || '',
   }));
 
@@ -4815,10 +4698,16 @@ window.SCBBlazor.getState = function (root) {
     if (!appBar) return;
     const value = title == null ? '' : String(title);
     try {
+      appBar.appBarTitle = value;
       appBar.title = value;
     } catch (_) {}
-    if (value) appBar.setAttribute('title', value);
-    else appBar.removeAttribute('title');
+    if (value) {
+      appBar.setAttribute('app-bar-title', value);
+      appBar.setAttribute('title', value);
+    } else {
+      appBar.removeAttribute('app-bar-title');
+      appBar.removeAttribute('title');
+    }
     dispatchChange(appBar, 'titlechange', { title: value });
   };
 
@@ -6398,44 +6287,6 @@ window.SCBBlazor.getState = function (root) {
 
   // Calendar card
 
-  api.setCalendarCardTitle = function (index, title) {
-    const __scbHasRoot = arguments.length === 3;
-    const __scbCtx = (window.SCBBlazor && window.SCBBlazor.__resolveRoot ? window.SCBBlazor.__resolveRoot(__scbHasRoot ? arguments[0] : null) : window.document) || window.document;
-    const document = __scbCtx;
-    if (__scbHasRoot) {
-      index = arguments[1];
-      title = arguments[2];
-    }
-    const card = getByIndex(document, 'scb-calendar-card', index);
-    if (!card) return;
-    const value = title == null ? '' : String(title);
-    try {
-      card.title = value;
-    } catch (_) {}
-    if (value) card.setAttribute('title', value);
-    else card.removeAttribute('title');
-    dispatchChange(card, 'titlechange', { title: value });
-  };
-
-  api.setCalendarCardTitleById = function (id, title) {
-    const __scbHasRoot = arguments.length === 3;
-    const __scbCtx = (window.SCBBlazor && window.SCBBlazor.__resolveRoot ? window.SCBBlazor.__resolveRoot(__scbHasRoot ? arguments[0] : null) : window.document) || window.document;
-    const document = __scbCtx;
-    if (__scbHasRoot) {
-      id = arguments[1];
-      title = arguments[2];
-    }
-    const card = getById(document, id, 'scb-calendar-card');
-    if (!card) return;
-    const value = title == null ? '' : String(title);
-    try {
-      card.title = value;
-    } catch (_) {}
-    if (value) card.setAttribute('title', value);
-    else card.removeAttribute('title');
-    dispatchChange(card, 'titlechange', { title: value });
-  };
-
   api.setCalendarCardShowMedia = function (index, showMedia) {
     const __scbHasRoot = arguments.length === 3;
     const __scbCtx = (window.SCBBlazor && window.SCBBlazor.__resolveRoot ? window.SCBBlazor.__resolveRoot(__scbHasRoot ? arguments[0] : null) : window.document) || window.document;

package/blazor/wrappers/ScbAppBar.razor

@@ -37,7 +37,7 @@
         
         if (!string.IsNullOrWhiteSpace(Title))
         {
-            attributes["title"] = Title!;
+            attributes["app-bar-title"] = Title!;
         }
         
         if (!string.IsNullOrWhiteSpace(Type))