scb-wc 0.1.76 → 0.1.77

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)
@@ -111,7 +92,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/
@@ -124,7 +105,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);\""
   }
 }
 ```
@@ -172,7 +153,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
@@ -195,7 +176,7 @@ node_modules/scb-wc/scb-typography.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.
@@ -208,8 +189,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);\""
   }
 }
 ```
@@ -223,13 +204,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';

package/icons.json

@@ -1,178 +1,178 @@
-[
-"add",
-"remove",
-"add_circle",
-"remove_circle",
-"expand_more",
-"expand_less",
-"chevron_right",
-"chevron_left",
-"unfold_more",
-"unfold_less",
-"info",
-"warning",
-"menu",
-"code",
-"more_horiz",
-"more_vert",
-"check_circle",
-"check",
-"check_small",
-"close",
-"border_color",
-"error",
-"edit",
-"edit_square",
-"refresh",
-"print",
-"group",
-"person_add",
-"person",
-"download",
-"mobile_arrow_down",
-"upload",
-"mail",
-"calendar_month",
-"calendar_today",
-"volume_up",
-"description",
-"folder",
-"play_arrow",
-"grain",
-"check_box",
-"help",
-"check_box_outline_blank",
-"indeterminate_check_box",
-"radio_button_checked",
-"radio_button_unchecked",
-"face",
-"male",
-"female",
-"grid_on",
-"label",
-"delete",
-"pin",
-"location_on",
-"straighten",
-"compare_arrows",
-"swap_horiz",
-"filter_vintage",
-"deceased",
-"apartment",
-"eco",
-"texture",
-"table_chart",
-"bar_chart",
-"bid_landscape",
-"show_chart",
-"ssid_chart",
-"bubble_chart",
-"touch_app",
-"near_me",
-"toggle_off",
-"toggle_on",
-"cancel",
-"book",
-"public",
-"style",
-"restore",
-"payment",
-"shopping_cart",
-"list",
-"ballot",
-"list_alt",
-"view_list",
-"format_list_bulleted",
-"database",
-"database_search",
-"data_table",
-"share",
-"home",
-"arrow_back",
-"arrow_forward",
-"arrow_upward",
-"arrow_downward",
-"arrow_outward",
-"call_made",
-"arrow_back_ios",
-"arrow_forward_ios",
-"favorite",
-"filter_list",
-"sort",
-"view_module",
-"hearing",
-"event_note",
-"image",
-"language",
-"repeat",
-"insert_chart",
-"insert_chart_filled",
-"leaderboard",
-"article",
-"reorder",
-"subject",
-"visibility",
-"visibility_off",
-"arrow_right",
-"arrow_drop_down",
-"tune",
-"settings",
-"manufacturing",
-"preview",
-"mic",
-"laptop_windows",
-"mobile",
-"tablet",
-"table",
-"sell",
-"shoppingmode",
-"lightbulb",
-"content_copy",
-"colors",
-"link",
-"format_bold",
-"format_color_text",
-"format_align_left",
-"fiber_manual_record",
-"breaking_news",
-"release_alert",
-"person_play",
-"comment",
-"mode_comment",
-"fullscreen",
-"fullscreen_exit",
-"filter_alt",
-"open_in_new",
-"search",
-"support",
-"location_searching",
-"explore",
-"assistant_direction",
-"mouse",
-"thumb_up",
-"checklist",
-"progress_activity",
-"reply",
-"percent",
-"space_bar",
-"graph_7",
-"verified",
-"deployed_code",
-"build",
-"code_blocks",
-"inventory",
-"save",
-"data_info_alert",
-"auto_stories",
-"menu_book",
-"book_2",
-"import_contacts",
-"nature",
-"spa",
-"contact_support",
-"work",
-"person_4",
-"price_change",
-"keyboard_arrow_down",
-"keyboard_arrow_up"
-]
+[
+"add",
+"remove",
+"add_circle",
+"remove_circle",
+"expand_more",
+"expand_less",
+"chevron_right",
+"chevron_left",
+"unfold_more",
+"unfold_less",
+"info",
+"warning",
+"menu",
+"code",
+"more_horiz",
+"more_vert",
+"check_circle",
+"check",
+"check_small",
+"close",
+"border_color",
+"error",
+"edit",
+"edit_square",
+"refresh",
+"print",
+"group",
+"person_add",
+"person",
+"download",
+"mobile_arrow_down",
+"upload",
+"mail",
+"calendar_month",
+"calendar_today",
+"volume_up",
+"description",
+"folder",
+"play_arrow",
+"grain",
+"check_box",
+"help",
+"check_box_outline_blank",
+"indeterminate_check_box",
+"radio_button_checked",
+"radio_button_unchecked",
+"face",
+"male",
+"female",
+"grid_on",
+"label",
+"delete",
+"pin",
+"location_on",
+"straighten",
+"compare_arrows",
+"swap_horiz",
+"filter_vintage",
+"deceased",
+"apartment",
+"eco",
+"texture",
+"table_chart",
+"bar_chart",
+"bid_landscape",
+"show_chart",
+"ssid_chart",
+"bubble_chart",
+"touch_app",
+"near_me",
+"toggle_off",
+"toggle_on",
+"cancel",
+"book",
+"public",
+"style",
+"restore",
+"payment",
+"shopping_cart",
+"list",
+"ballot",
+"list_alt",
+"view_list",
+"format_list_bulleted",
+"database",
+"database_search",
+"data_table",
+"share",
+"home",
+"arrow_back",
+"arrow_forward",
+"arrow_upward",
+"arrow_downward",
+"arrow_outward",
+"call_made",
+"arrow_back_ios",
+"arrow_forward_ios",
+"favorite",
+"filter_list",
+"sort",
+"view_module",
+"hearing",
+"event_note",
+"image",
+"language",
+"repeat",
+"insert_chart",
+"insert_chart_filled",
+"leaderboard",
+"article",
+"reorder",
+"subject",
+"visibility",
+"visibility_off",
+"arrow_right",
+"arrow_drop_down",
+"tune",
+"settings",
+"manufacturing",
+"preview",
+"mic",
+"laptop_windows",
+"mobile",
+"tablet",
+"table",
+"sell",
+"shoppingmode",
+"lightbulb",
+"content_copy",
+"colors",
+"link",
+"format_bold",
+"format_color_text",
+"format_align_left",
+"fiber_manual_record",
+"breaking_news",
+"release_alert",
+"person_play",
+"comment",
+"mode_comment",
+"fullscreen",
+"fullscreen_exit",
+"filter_alt",
+"open_in_new",
+"search",
+"support",
+"location_searching",
+"explore",
+"assistant_direction",
+"mouse",
+"thumb_up",
+"checklist",
+"progress_activity",
+"reply",
+"percent",
+"space_bar",
+"graph_7",
+"verified",
+"deployed_code",
+"build",
+"code_blocks",
+"inventory",
+"save",
+"data_info_alert",
+"auto_stories",
+"menu_book",
+"book_2",
+"import_contacts",
+"nature",
+"spa",
+"contact_support",
+"work",
+"person_4",
+"price_change",
+"keyboard_arrow_down",
+"keyboard_arrow_up"
+]