scb-wc 0.1.128 → 0.1.129

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 preview finns för att underlätta skapandet av enhetliga, tillgängliga och användbara webbapplikationer.
 
 Komponenterna bygger på:
 - [Lit](https://lit.dev/)
@@ -8,54 +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 html-service my-service
-npx scb-wc init react my-react-app
-npx scb-wc init react-service my-react-service
-npx scb-wc init blazor my-blazor-app
-npx scb-wc init blazor-service my-blazor-service
-```
-
-Webbplatsmallarna skapar en liten starterapp med:
-- `scb-header`
-- `scb-footer`
-- `scb-grid`
-- några vanliga komponenter
-
-Webbtjänstmallarna skapar en starterapp med:
-- `scb-app-bar`
-- `scb-search`
-- `scb-table-advanced`
-- komponenter för actions och status
-
-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)
@@ -121,7 +102,7 @@ För MVC/MPA räcker det normalt att använda `scb-wc-selfhost.css`, eftersom de
 
 ## 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/
@@ -134,7 +115,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);\""
   }
 }
 ```
@@ -183,7 +164,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 tre filer från `node_modules/scb-wc` och använd dem i applikationen:
 
 ```text
@@ -208,7 +189,7 @@ Lägg till `scb-compact.css` om sidan ska använda compact-typografi.
 
 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.
@@ -221,8 +202,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);\""
   }
 }
 ```
@@ -236,13 +217,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

@@ -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';
@@ -32,6 +34,7 @@ import './scb-fact-card/scb-fact-card-content.js';
 import './scb-fact-card/scb-fact-card.js';
 import './scb-footer/scb-footer-section.js';
 import './scb-footer/scb-footer.js';
+import './scb-form-error-summary/scb-form-error-summary.js';
 import './scb-gallery-grid/scb-gallery-grid.js';
 import './scb-grid/scb-grid-item.js';
 import './scb-grid/scb-grid.js';
@@ -96,3 +99,6 @@ 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/lazy-focus-ring.js';
+import './shared/lazy-ripple.js';
+import './shared/scb-icon-svg.js';

package/blazor/ScbBlazorInteropBase.cs

@@ -203,6 +203,9 @@ namespace ScbBlazor
         // Alla länkar (scb-link) på sidan
         protected LinkState[] Links { get; private set; } = Array.Empty<LinkState>();
 
+        // Alla felöversikter (scb-form-error-summary) på sidan
+        protected FormErrorSummaryState[] FormErrorSummaries { get; private set; } = Array.Empty<FormErrorSummaryState>();
+
 
         // Alla avatars (scb-avatar) på sidan
         protected AvatarState[] Avatars { get; private set; } = Array.Empty<AvatarState>();
@@ -1308,6 +1311,7 @@ namespace ScbBlazor
                         Value          = dto.Value          ?? string.Empty,
                         Label          = dto.Label          ?? string.Empty,
                         SupportingText = dto.SupportingText ?? string.Empty,
+                        HelpText       = dto.HelpText       ?? string.Empty,
                         Error          = dto.Error,
                         Name           = dto.Name           ?? string.Empty,
                         Id             = dto.Id             ?? string.Empty
@@ -1378,6 +1382,9 @@ namespace ScbBlazor
                     selects[i] = new SelectState
                     {
                         Id       = dto.Id       ?? string.Empty,
+                        Label    = dto.Label    ?? string.Empty,
+                        SupportingText = dto.SupportingText ?? string.Empty,
+                        HelpText = dto.HelpText ?? string.Empty,
                         Variant  = dto.Variant  ?? string.Empty,
                         Open     = dto.Open,
                         Value    = dto.Value    ?? string.Empty,
@@ -1616,6 +1623,32 @@ namespace ScbBlazor
                 Links = Array.Empty<LinkState>();
             }
 
+            // Form error summaries
+            if (state.FormErrorSummaries is not null && state.FormErrorSummaries.Length > 0)
+            {
+                var summaries = new FormErrorSummaryState[state.FormErrorSummaries.Length];
+                for (var i = 0; i < state.FormErrorSummaries.Length; i++)
+                {
+                    var dto = state.FormErrorSummaries[i];
+                    summaries[i] = new FormErrorSummaryState
+                    {
+                        Heading       = dto.Heading       ?? string.Empty,
+                        HeadingLevel  = dto.HeadingLevel  ?? 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
+                    };
+                }
+
+                FormErrorSummaries = summaries;
+            }
+            else
+            {
+                FormErrorSummaries = Array.Empty<FormErrorSummaryState>();
+            }
+
             // Avatars
             if (state.Avatars is not null && state.Avatars.Length > 0)
             {
@@ -3235,6 +3268,7 @@ namespace ScbBlazor
             public string Value          { get; set; } = string.Empty;
             public string Label          { get; set; } = string.Empty;
             public string SupportingText { get; set; } = string.Empty;
+            public string HelpText       { get; set; } = string.Empty;
             public bool   Error          { get; set; }
             public string Name           { get; set; } = string.Empty;
             public string Id             { get; set; } = string.Empty;
@@ -3263,6 +3297,9 @@ namespace ScbBlazor
         protected sealed class SelectState
         {
             public string Id       { get; set; } = string.Empty;
+            public string Label    { get; set; } = string.Empty;
+            public string SupportingText { get; set; } = string.Empty;
+            public string HelpText { get; set; } = string.Empty;
             public string Variant  { get; set; } = string.Empty;
             public bool   Open     { get; set; }
             public string Value    { get; set; } = string.Empty;
@@ -3371,6 +3408,17 @@ namespace ScbBlazor
             public string Text      { get; set; } = string.Empty;
         }
 
+        protected sealed class FormErrorSummaryState
+        {
+            public string Heading       { get; set; } = string.Empty;
+            public string HeadingLevel  { 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 AvatarState
         {
@@ -3638,6 +3686,8 @@ namespace ScbBlazor
 
             public LinkDto[] Links { get; set; } = Array.Empty<LinkDto>();
 
+            public FormErrorSummaryDto[] FormErrorSummaries { get; set; } = Array.Empty<FormErrorSummaryDto>();
+
             public AvatarDto[] Avatars { get; set; } = Array.Empty<AvatarDto>();
 
             public BadgeDto[] Badges { get; set; } = Array.Empty<BadgeDto>();
@@ -4105,6 +4155,7 @@ namespace ScbBlazor
             public string? Value          { get; set; }
             public string? Label          { get; set; }
             public string? SupportingText { get; set; }
+            public string? HelpText       { get; set; }
             public bool   Error           { get; set; }
             public string? Name           { get; set; }
             public string? Id             { get; set; }
@@ -4133,6 +4184,9 @@ namespace ScbBlazor
         private sealed class SelectDto
         {
             public string? Id { get; set; }
+            public string? Label { get; set; }
+            public string? SupportingText { get; set; }
+            public string? HelpText { get; set; }
             public string? Variant { get; set; }
             public bool   Open { get; set; }
             public string? Value { get; set; }
@@ -4223,6 +4277,17 @@ namespace ScbBlazor
             public string? Text      { get; set; }
         }
 
+        private sealed class FormErrorSummaryDto
+        {
+            public string? Heading       { get; set; }
+            public string? HeadingLevel  { 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 ButtonDto
         {
             public string? Variant { get; set; }

package/blazor/scb-blazor-bridge.js

@@ -1978,6 +1978,7 @@ window.SCBBlazor.getState = function (root) {
   const buttons = ctx.querySelectorAll('scb-button');
   const chips = ctx.querySelectorAll('scb-chip');
   const links = ctx.querySelectorAll('scb-link');
+  const formErrorSummaries = ctx.querySelectorAll('scb-form-error-summary');
   const subMenus = ctx.querySelectorAll('scb-options-sub-menu');
   const avatars = ctx.querySelectorAll('scb-avatar');
   const badges = ctx.querySelectorAll('scb-badge');
@@ -3084,6 +3085,12 @@ window.SCBBlazor.getState = function (root) {
       ''
     ).toString();
 
+    const helpText = (
+      anyTf.helpText ??
+      tf.getAttribute('help-text') ??
+      ''
+    ).toString();
+
     const error =
       typeof anyTf.error === 'boolean'
         ? anyTf.error
@@ -3105,6 +3112,7 @@ window.SCBBlazor.getState = function (root) {
       value,
       label,
       supportingText,
+      helpText,
       error,
       name,
       id,
@@ -3187,6 +3195,17 @@ window.SCBBlazor.getState = function (root) {
 
   const selectsState = Array.from(selects).map((sel) => {
     const anySel = sel;
+    const label = (anySel.label ?? sel.getAttribute('label') ?? '').toString();
+    const supportingText = (
+      anySel.supportingText ??
+      sel.getAttribute('supporting-text') ??
+      ''
+    ).toString();
+    const helpText = (
+      anySel.helpText ??
+      sel.getAttribute('help-text') ??
+      ''
+    ).toString();
     const variant = (anySel.variant ?? sel.getAttribute('variant') ?? '').toString();
     const open =
       typeof anySel.open === 'boolean' ? anySel.open : sel.hasAttribute('open');
@@ -3201,6 +3220,9 @@ window.SCBBlazor.getState = function (root) {
 
     return {
       id: sel.id || '',
+      label,
+      supportingText,
+      helpText,
       variant,
       open: !!open,
       value,
@@ -3883,6 +3905,29 @@ window.SCBBlazor.getState = function (root) {
     };
   });
 
+  // Alla scb-form-error-summary på sidan
+  const formErrorSummariesState = Array.from(formErrorSummaries).map((summary) => {
+    const anySummary = summary;
+
+    const heading = (anySummary.heading ?? summary.getAttribute('heading') ?? '').toString();
+    const headingLevel = (anySummary.headingLevel ?? summary.getAttribute('heading-level') ?? '').toString();
+    const spacing = (anySummary.spacing ?? summary.getAttribute('spacing') ?? '').toString();
+    const spacingTop = (anySummary.spacingTop ?? summary.getAttribute('spacing-top') ?? '').toString();
+    const spacingBottom = (anySummary.spacingBottom ?? summary.getAttribute('spacing-bottom') ?? '').toString();
+    const spacingLeft = (anySummary.spacingLeft ?? summary.getAttribute('spacing-left') ?? '').toString();
+    const spacingRight = (anySummary.spacingRight ?? summary.getAttribute('spacing-right') ?? '').toString();
+
+    return {
+      heading,
+      headingLevel,
+      spacing,
+      spacingTop,
+      spacingBottom,
+      spacingLeft,
+      spacingRight,
+    };
+  });
+
   // Alla scb-avatar på sidan
   const avatarsState = Array.from(avatars).map((av) => {
     const anyAv = av;
@@ -4233,6 +4278,7 @@ window.SCBBlazor.getState = function (root) {
     buttons: buttonsState,
     chips: chipsState,
     links: linksState,
+    formErrorSummaries: formErrorSummariesState,
     avatars: avatarsState,
     badges: badgesState,
     iconButtons: iconButtonsState,

package/icons.json

@@ -26,12 +26,14 @@
 "refresh",
 "print",
 "group",
+"groups",
 "person_add",
 "person",
 "download",
 "mobile_arrow_down",
 "upload",
 "mail",
+"email",
 "calendar_month",
 "calendar_today",
 "volume_up",
@@ -77,6 +79,7 @@
 "style",
 "restore",
 "payment",
+"payments",
 "shopping_cart",
 "list",
 "ballot",
@@ -88,6 +91,8 @@
 "data_table",
 "share",
 "home",
+"query_stats",
+"analytics",
 "arrow_back",
 "arrow_forward",
 "arrow_upward",
@@ -104,15 +109,18 @@
 "event_note",
 "image",
 "language",
+"apps",
 "repeat",
 "insert_chart",
 "insert_chart_filled",
 "leaderboard",
 "article",
+"assignment",
 "reorder",
 "subject",
 "visibility",
 "visibility_off",
+"lock",
 "arrow_right",
 "arrow_drop_down",
 "tune",
@@ -144,6 +152,7 @@
 "filter_alt",
 "open_in_new",
 "search",
+"notifications",
 "support",
 "location_searching",
 "explore",
@@ -173,8 +182,7 @@
 "work",
 "person_4",
 "price_change",
+"trending_up",
 "keyboard_arrow_down",
-"keyboard_arrow_up",
-"stop",
-"pause"
+"keyboard_arrow_up"
 ]