scb-wc 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +128 -0
  2. package/all.js +1 -0
  3. package/dummy.png +0 -0
  4. package/index.d.ts +0 -0
  5. package/index.js +1 -0
  6. package/mvc/components/all.js +1 -0
  7. package/mvc/components/index.js +1 -0
  8. package/mvc/scb-logo.svg +21 -0
  9. package/mvc/scb-wc.css +1 -0
  10. package/mvc/scb.svg +14 -0
  11. package/package.json +32 -0
  12. package/scb-logo.svg +21 -0
  13. package/scb-wc.bundle.js +1670 -0
  14. package/scb-wc.css +1 -0
  15. package/scb-wc.d.ts +0 -0
  16. package/scb.svg +14 -0
package/README.md ADDED
@@ -0,0 +1,128 @@
1
+ # Om SCB Web Components
2
+
3
+ SCB Web Components finns för att underlätta skapandet av enhetliga, tillgängliga och användbara webbapplikationer.
4
+
5
+ ---
6
+
7
+ ## Kom igång
8
+
9
+ **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).
10
+
11
+ Installera paketet:
12
+ ```sh
13
+ npm install scb-wc
14
+ ```
15
+
16
+ ---
17
+
18
+ ## Alternativ 1: Använd som ES-moduler (i exempelvis React)
19
+
20
+ Importera enskilda komponenter (bäst för tree-shaking):
21
+ ```js
22
+ import 'scb-wc/scb-wc.css';
23
+ import 'scb-wc/scb-button';
24
+ import 'scb-wc/scb-accordion';
25
+ ```
26
+
27
+ Importera allt (ej rekommenderat, men möjligt):
28
+ ```js
29
+ import 'scb-wc/scb-wc.css';
30
+ import 'scb-wc/all';
31
+ ```
32
+
33
+ ---
34
+
35
+ ## Alternativ 2: Använd i MVC/MPA via `<script type="module">`
36
+
37
+ Det här läget använder den färdig-splittrade **MVC-ESM**-builden som följer med paketet under `node_modules/scb-wc/mvc/`.
38
+
39
+ ### Rekommenderat: ett npm-script
40
+
41
+ Lägg till i din apps `package.json`:
42
+ ```jsonc
43
+ {
44
+ "scripts": {
45
+ "ui:install": "node -e \"const fs=require('fs'),p=require('path');const base=(process.env.npm_config_ui_wwwroot)||'wwwroot';const src=p.resolve('node_modules/scb-wc/mvc');const dst=p.resolve(base,'ui');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc?');process.exit(1);}fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\""
46
+ }
47
+ }
48
+ ```
49
+
50
+ Kör sedan:
51
+ ```sh
52
+ npm run ui:install
53
+ ```
54
+
55
+ Det kopierar hela `mvc/` till `wwwroot/ui/` (komponenter, vendor och CSS).
56
+
57
+ #### Vanliga lägen (var ligger din `package.json`?)
58
+
59
+ **A) Standard MVC-projekt**
60
+ `package.json` ligger i **projektroten** (vid sidan av `.csproj`).
61
+ Kör bara:
62
+ ```sh
63
+ npm run ui:install
64
+ ```
65
+ Resultat: filer kopieras till `./wwwroot/ui/`.
66
+
67
+ **B) Frontend i `ClientApp/`**
68
+ `package.json` ligger i **ClientApp/** och webbroten är `../wwwroot`.
69
+ Kör med flagga:
70
+ ```sh
71
+ npm run ui:install --ui_wwwroot=../wwwroot
72
+ ```
73
+ Resultat: filer kopieras till `../wwwroot/ui/`.
74
+
75
+ ### Ladda filer i din layout
76
+
77
+ ```html
78
+ <!-- Lägg helst i <head> -->
79
+ <link rel="stylesheet" href="~/ui/scb-wc.css" />
80
+
81
+ <!-- Ladda ENDAST de komponenter du använder på sidan, gärna precis före </body> -->
82
+ <script type="module" src="~/ui/components/scb-link/scb-link.js"></script>
83
+ <script type="module" src="~/ui/components/scb-button/scb-button.js"></script>
84
+
85
+ <!-- För demosida: ladda alla -->
86
+ <!-- <script type="module" src="~/ui/components/all.js"></script> -->
87
+ ```
88
+
89
+ ---
90
+
91
+ ### 2.1) CI/CD (exempel)
92
+
93
+ Kör samma script i din pipeline:
94
+ ```yaml
95
+ steps:
96
+ - script: npm ci
97
+ - script: npm run ui:install
98
+ ```
99
+
100
+ Behöver du annan webbrotsökväg i pipelinen? Lägg till flaggan:
101
+ ```yaml
102
+ - script: npm run ui:install --ui_wwwroot=../wwwroot
103
+ ```
104
+
105
+ ---
106
+
107
+ ## Alternativ 3: Använd bundlad version (IIFE)
108
+
109
+ Om ESM inte stöds, använd den bundlade varianten från paketroten.
110
+ Flytta följande två filer från `node_modules/scb-wc` och använd dem i applikationen:
111
+
112
+ ```
113
+ node_modules/scb-wc/scb-wc.bundle.js
114
+ node_modules/scb-wc/scb-wc.css
115
+ ```
116
+
117
+ ```html
118
+ <link rel="stylesheet" href="scb-wc.css">
119
+ <script src="scb-wc.bundle.js"></script>
120
+ ```
121
+
122
+ ---
123
+
124
+ ## Viktigt
125
+
126
+ - **Stå i mappen med din `package.json`** när du kör `npm install` och kopieringskommandon.
127
+ - **Placeringen av `package.json` styr defaultmål**: roten → `wwwroot/ui`, `ClientApp/` → använd `--ui_wwwroot=../wwwroot`.
128
+ - **Blanda inte** MVC-ESM och IIFE på samma sida.
package/all.js ADDED
@@ -0,0 +1 @@
1
+ import './index.js';
package/dummy.png ADDED
Binary file
package/index.d.ts ADDED
File without changes
package/index.js ADDED
@@ -0,0 +1 @@
1
+
package/mvc/components/all.js ADDED
@@ -0,0 +1 @@
1
+
package/mvc/components/index.js ADDED
@@ -0,0 +1 @@
1
+
package/mvc/scb-logo.svg ADDED
@@ -0,0 +1,21 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <svg viewBox="-0.0002 -0.0066 1344.9076 377.9532" xmlns="http://www.w3.org/2000/svg">
3
+ <defs>
4
+ <style type="text/css">
5
+ g {
6
+ fill: #100f0d;
7
+ }
8
+ g:target {
9
+ fill: #fff;
10
+ }
11
+ </style>
12
+ </defs>
13
+ <g transform="matrix(1.3333330154418945, 0, 0, -1.3333330154418945, 0, 377.9466552734375)" id="g10">
14
+ <g transform="scale(0.1)" id="inverted">
15
+ <path id="path14" d="m 1346.6,2515.59 c 0,48.24 -39.11,87.31 -87.4,87.31 -48.29,0 -87.4,-39.07 -87.4,-87.31 V 312.898 c 0,-48.339 39.11,-87.5 87.4,-87.5 48.29,0 87.4,39.161 87.4,87.5 V 1106.8 c 0,5.77 4.79,10.45 10.51,10.45 h 287.22 c 5.76,0 10.5,-4.68 10.5,-10.45 V 305.969 C 1654.83,137.02 1477.67,0 1259.2,0 1040.63,0 863.523,137.02 863.523,305.969 V 2528.77 c 0,168.86 177.107,305.88 395.677,305.88 218.47,0 395.63,-137.02 395.63,-305.88 V 1738.1 c 0,-5.86 -4.74,-10.45 -10.5,-10.45 h -287.22 c -5.72,0 -10.51,4.59 -10.51,10.45 v 777.49"/>
16
+ <path id="path16" d="M 10.4414,2265.38 C -8.01563,2136.85 -1.52734,1926.1 26.1172,1807.73 56.4922,1678.71 231.645,1417.96 310.555,1296.86 389.566,1175.85 494.949,1049.49 493.375,880.922 V 477.18 c 0,-48.25 -39.109,-87.41 -87.406,-87.41 -48.145,0 -87.254,39.16 -87.254,87.41 v 618.79 c 0,5.76 -4.785,10.55 -10.645,10.55 H 20.9453 c -5.8711,0 -10.5039,-4.79 -10.5039,-10.55 V 458.719 c 0,-168.957 177.1056,-305.969 395.5276,-305.969 218.574,0 395.683,137.012 395.683,305.969 v 422.203 c -1.324,289.568 -80.332,331.748 -182.867,505.398 -73.445,124.71 -254.121,381.95 -284.398,510.97 -27.735,118.36 -26.516,255.39 -15.672,379.9 0,48.25 39.109,87.41 87.254,87.41 48.297,0 87.406,-39.16 87.406,-87.41 v -550.32 c 0,-5.77 4.746,-10.45 10.645,-10.45 h 287.085 c 5.911,0 10.547,4.68 10.547,10.45 v 538.51 c 0,169.06 -177.109,305.97 -395.683,305.97 -218.422,0 -395.5276,-136.91 -395.5276,-305.97"/>
17
+ <path id="path18" d="m 1726.57,2547.82 h 440.8 c 182.04,0 329.61,-147.57 329.61,-329.52 v -462.24 c 0,-129.59 -84.97,-238.98 -202.16,-276.48 v -6.24 c 117.19,-37.4 202.16,-146.89 202.16,-276.58 V 491.148 c 0,-160.367 -130.2,-290.457 -290.45,-290.457 l -479.96,-0.293 c -5.91,0 -10.6,4.793 -10.6,10.454 V 2537.37 c 0,5.66 4.69,10.45 10.6,10.45 m 308.27,-229.22 c -5.97,0 -10.65,-4.78 -10.65,-10.55 v -729.33 c 0,-5.97 4.68,-10.65 10.65,-10.65 h 43.36 c 58.01,0 105.08,47.16 105.08,105.18 v 540.18 c 0,58 -47.07,105.17 -105.08,105.17 z m 0,-982.29 c -5.97,0 -10.65,-4.69 -10.65,-10.45 V 430.59 c 0,-5.86 4.68,-10.649 10.65,-10.649 h 51.85 c 58.12,0 105.09,47.18 105.09,105.188 v 706.011 c 0,58.19 -46.97,105.17 -105.09,105.17 h -51.85"/>
18
+ </g>
19
+ </g>
20
+ <text style="fill: rgb(1, 1, 1); font-family: Roboto; font-size: 139.2px; font-weight: 500; stroke: rgb(0, 0, 0); white-space: pre;" x="455.182" y="234.25">Designsystem</text>
21
+ </svg>
package/mvc/scb-wc.css ADDED
@@ -0,0 +1 @@
1
+ @import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined);@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);:root{color-scheme:light dark;--p-100:#FFFFFF;--p-99:#FAFDFF;--p-95:#EBF8FF;--p-90:#D6F1FF;--p-80:#B8E7FF;--p-70:#99D1FF;--p-60:#75AFFF;--p-50:#477EFF;--p-40:#1F44FF;--p-30:#1E00BE;--p-20:#0F0865;--p-10:#0B0544;--p-0:#000000;--s-100:#FFFFFF;--s-99:#FFFAFF;--s-95:#FFEBFF;--s-90:#FFDBFF;--s-80:#FFC2FF;--s-70:#FA9EFA;--s-60:#EC75F0;--s-50:#D850E2;--s-40:#B633C1;--s-30:#91219C;--s-20:#6A1471;--s-10:#430449;--s-0:#000000;--t-100:#FFFFFF;--t-99:#FAFFFA;--t-95:#E7FEE9;--t-90:#C1FAC9;--t-80:#91EDAD;--t-70:#50E294;--t-60:#00CC7B;--t-50:#00A865;--t-40:#008A53;--t-30:#007041;--t-20:#004D2D;--t-10:#00331E;--t-0:#000000;--e-100:#FFFFFF;--e-99:#FFFBFA;--e-95:#FFFEEB;--e-90:#FFD7C7;--e-80:#FFB699;--e-70:#FA9269;--e-60:#ED7140;--e-50:#DB490F;--e-40:#BF3600;--e-30:#942500;--e-20:#631900;--e-10:#3D0C00;--e-0:#000000;--w-100:#FFFFFF;--w-99:#FFFCEB;--w-95:#FFF7D1;--w-90:#FEEEA0;--w-80:#FCE369;--w-70:#F3D53F;--w-60:#E6C10A;--w-50:#D1A400;--w-40:#B28C00;--w-30:#8F7200;--w-20:#6B5600;--w-10:#473800;--w-0:#000000;--n-100:#FFFFFF;--n-99:#FAFAFA;--n-95:#F0F0F0;--n-90:#DBDBDB;--n-80:#CCCCCC;--n-70:#B3B3B3;--n-60:#999999;--n-50:#808080;--n-40:#666666;--n-30:#4D4D4D;--n-20:#333333;--n-10:#1A1A1A;--n-0:#000000;--nv-100:#FFFFFF;--nv-99:#FDFCF7;--nv-95:#F9F8EF;--nv-90:#EAE7D7;--nv-80:#D7D4BC;--nv-70:#BEB39D;--nv-60:#A69D8C;--nv-50:#726F65;--nv-40:#504F49;--nv-30:#3B3A35;--nv-20:#2B2A27;--nv-10:#1B1A18;--nv-0:#000000;--brand-font:"Inter", sans-serif;--weight-regular:400;--weight-semibold:600;--weight-bold:700;--scale-01:12px;--scale-02:14px;--scale-03:16px;--scale-04:18px;--scale-05:20px;--scale-06:24px;--scale-07:28px;--scale-08:32px;--scale-09:36px;--scale-10:40px;--scale-11:48px;--scale-12:64px;--scale-13:80px;--spacing-0:0px;--spacing-1:2px;--spacing-2:4px;--spacing-3:8px;--spacing-4:12px;--spacing-5:16px;--spacing-6:20px;--spacing-7:24px;--spacing-8:32px;--spacing-9:40px;--spacing-10:48px;--spacing-11:64px;--spacing-12:80px;--spacing-13:96px;--spacing-14:120px;--line-height-01:18px;--line-height-02:20px;--line-height-03:24px;--line-height-04:26px;--line-height-05:28px;--line-height-06:32px;--line-height-07:34px;--line-height-08:38px;--line-height-09:42px;--line-height-10:56px;--line-height-11:76px;--tracking-01:0px;--tracking-02:-0.1px;--tracking-03:-0.15px;--tracking-04:-0.3px;--tracking-05:-0.4px;--tracking-06:-0.6px;--tracking-07:-0.7px;--md-sys-typescale-display-large-font:var(--brand-font);--md-sys-typescale-display-large-size:var(--scale-12);--md-sys-typescale-display-large-line-height:var(--line-height-11);--md-sys-typescale-display-large-weight:var(--weight-bold);--md-sys-typescale-display-large-tracking:var(--tracking-07);--md-sys-typescale-display-medium-font:var(--brand-font);--md-sys-typescale-display-medium-size:var(--scale-11);--md-sys-typescale-display-medium-line-height:var(--line-height-10);--md-sys-typescale-display-medium-weight:var(--weight-bold);--md-sys-typescale-display-medium-tracking:var(--tracking-07);--md-sys-typescale-display-small-font:var(--brand-font);--md-sys-typescale-display-small-size:var(--scale-09);--md-sys-typescale-display-small-line-height:var(--line-height-09);--md-sys-typescale-display-small-weight:var(--weight-bold);--md-sys-typescale-display-small-tracking:var(--tracking-06);--md-sys-typescale-headline-large-font:var(--brand-font);--md-sys-typescale-headline-large-size:var(--scale-08);--md-sys-typescale-headline-large-line-height:var(--line-height-08);--md-sys-typescale-headline-large-weight:var(--weight-bold);--md-sys-typescale-headline-large-tracking:var(--tracking-06);--md-sys-typescale-headline-medium-font:var(--brand-font);--md-sys-typescale-headline-medium-size:var(--scale-07);--md-sys-typescale-headline-medium-line-height:var(--line-height-07);--md-sys-typescale-headline-medium-weight:var(--weight-bold);--md-sys-typescale-headline-medium-tracking:var(--tracking-06);--md-sys-typescale-headline-small-font:var(--brand-font);--md-sys-typescale-headline-small-size:var(--scale-06);--md-sys-typescale-headline-small-line-height:var(--line-height-06);--md-sys-typescale-headline-small-weight:var(--weight-bold);--md-sys-typescale-headline-small-tracking:var(--tracking-06);--md-sys-typescale-title-large-font:var(--brand-font);--md-sys-typescale-title-large-size:var(--scale-05);--md-sys-typescale-title-large-line-height:var(--line-height-05);--md-sys-typescale-title-large-weight:var(--weight-semibold);--md-sys-typescale-title-large-tracking:var(--tracking-05);--md-sys-typescale-title-medium-font:var(--brand-font);--md-sys-typescale-title-medium-size:var(--scale-04);--md-sys-typescale-title-medium-line-height:var(--line-height-04);--md-sys-typescale-title-medium-weight:var(--weight-semibold);--md-sys-typescale-title-medium-tracking:var(--tracking-04);--md-sys-typescale-title-small-font:var(--brand-font);--md-sys-typescale-title-small-size:var(--scale-03);--md-sys-typescale-title-small-line-height:var(--line-height-03);--md-sys-typescale-title-small-weight:var(--weight-semibold);--md-sys-typescale-title-small-tracking:var(--tracking-03);--md-sys-typescale-label-large-font:var(--brand-font);--md-sys-typescale-label-large-size:var(--scale-03);--md-sys-typescale-label-large-line-height:var(--line-height-03);--md-sys-typescale-label-large-weight:var(--weight-semibold);--md-sys-typescale-label-large-tracking:var(--tracking-03);--md-sys-typescale-label-medium-font:var(--brand-font);--md-sys-typescale-label-medium-size:var(--scale-02);--md-sys-typescale-label-medium-line-height:var(--line-height-02);--md-sys-typescale-label-medium-weight:var(--weight-semibold);--md-sys-typescale-label-medium-tracking:var(--tracking-02);--md-sys-typescale-label-small-font:var(--brand-font);--md-sys-typescale-label-small-size:var(--scale-01);--md-sys-typescale-label-small-line-height:var(--line-height-01);--md-sys-typescale-label-small-weight:var(--weight-semibold);--md-sys-typescale-label-small-tracking:var(--tracking-01);--md-sys-typescale-body-large-font:var(--brand-font);--md-sys-typescale-body-large-size:var(--scale-04);--md-sys-typescale-body-large-line-height:var(--line-height-04);--md-sys-typescale-body-large-weight:var(--weight-regular);--md-sys-typescale-body-large-tracking:var(--tracking-04);--md-sys-typescale-body-medium-font:var(--brand-font);--md-sys-typescale-body-medium-size:var(--scale-03);--md-sys-typescale-body-medium-line-height:var(--line-height-03);--md-sys-typescale-body-medium-weight:var(--weight-regular);--md-sys-typescale-body-medium-tracking:var(--tracking-03);--md-sys-typescale-body-small-font:var(--brand-font);--md-sys-typescale-body-small-size:var(--scale-02);--md-sys-typescale-body-small-line-height:var(--line-height-02);--md-sys-typescale-body-small-weight:var(--weight-regular);--md-sys-typescale-body-small-tracking:var(--tracking-02);--md-sys-color-primary:light-dark(var(--p-40), var(--p-70));--md-sys-color-on-primary:light-dark(var(--p-100), var(--p-20));--md-sys-color-primary-container:light-dark(var(--p-80), var(--p-30));--md-sys-color-on-primary-container:light-dark(var(--p-30), var(--p-100));--md-sys-color-primary-fixed:light-dark(var(--p-90), var(--p-90));--md-sys-color-primary-fixed-dim:light-dark(var(--p-80), var(--p-80));--md-sys-color-on-primary-fixed:light-dark(var(--p-20), var(--p-20));--md-sys-color-on-primary-fixed-variant:light-dark(var(--p-30), var(--p-30));--md-sys-color-secondary:light-dark(var(--p-20), var(--p-80));--md-sys-color-on-secondary:light-dark(var(--p-100), var(--p-20));--md-sys-color-secondary-container:light-dark(var(--p-90), var(--p-30));--md-sys-color-on-secondary-container:light-dark(var(--p-30), var(--p-100));--md-sys-color-secondary-fixed:light-dark(var(--p-90), var(--p-90));--md-sys-color-secondary-fixed-dim:light-dark(var(--p-80), var(--p-80));--md-sys-color-on-secondary-fixed:light-dark(var(--p-20), var(--p-20));--md-sys-color-on-secondary-fixed-variant:light-dark(var(--p-30), var(--p-30));--md-sys-color-tertiary:light-dark(var(--s-40), var(--s-80));--md-sys-color-on-tertiary:light-dark(var(--t-100), var(--s-20));--md-sys-color-tertiary-container:light-dark(var(--s-90), var(--s-10));--md-sys-color-on-tertiary-container:light-dark(var(--s-20), var(--s-100));--md-sys-color-tertiary-fixed:light-dark(var(--s-90), var(--s-90));--md-sys-color-tertiary-fixed-dim:light-dark(var(--s-80), var(--s-80));--md-sys-color-on-tertiary-fixed:light-dark(var(--s-10), var(--s-10));--md-sys-color-on-tertiary-fixed-variant:light-dark(var(--s-30), var(--s-30));--md-sys-color-background:light-dark(var(--p-100), var(--p-0));--md-sys-color-on-background:light-dark(var(--p-20), var(--p-100));--md-sys-color-surface:light-dark(var(--nv-100), var(--nv-20));--md-sys-color-surface-variant:light-dark(var(--nv-99), var(--n-10));--md-sys-color-surface-bright:light-dark(var(--nv-99), var(--nv-20));--md-sys-color-surface-dim:light-dark(var(--nv-95), var(--nv-10));--md-sys-color-surface-container-lowest:light-dark(var(--p-100), var(--nv-0));--md-sys-color-surface-container-low:light-dark(var(--p-99), var(--nv-10));--md-sys-color-surface-container:light-dark(var(--p-95), var(--nv-20));--md-sys-color-surface-container-high:light-dark(var(--p-90), var(--nv-20));--md-sys-color-surface-container-highest:light-dark(var(--p-80), var(--nv-20));--md-sys-color-surface-tint:light-dark(var(--p-40), var(--p-70));--md-sys-color-on-surface:light-dark(var(--p-20), var(--p-100));--md-sys-color-on-surface-variant:light-dark(var(--p-20), var(--p-100));--md-sys-color-inverse-surface:light-dark(var(--p-20), var(--p-90));--md-sys-color-inverse-on-surface:light-dark(var(--p-95), var(--p-20));--md-sys-color-inverse-primary:light-dark(var(--p-80), var(--p-40));--md-sys-color-outline:light-dark(var(--n-50), var(--n-30));--md-sys-color-outline-variant:light-dark(var(--n-80), var(--n-30));--md-sys-color-scrim:light-dark(var(--n-0), var(--n-0));--md-sys-color-shadow:light-dark(var(--n-0), var(--n-0));--md-sys-color-error:light-dark(var(--e-40), var(--e-80));--md-sys-color-on-error:light-dark(var(--e-100), var(--e-20));--md-sys-color-error-container:light-dark(var(--e-90), var(--e-20));--md-sys-color-on-error-container:light-dark(var(--e-30), var(--e-95));--md-sys-color-warning:light-dark(var(--w-40), var(--w-80));--md-sys-color-on-warning:light-dark(var(--w-100), var(--w-20));--md-sys-color-warning-container:light-dark(var(--w-90), var(--w-20));--md-sys-color-on-warning-container:light-dark(var(--w-20), var(--w-95));--md-sys-color-info:light-dark(var(--p-40), var(--p-80));--md-sys-color-on-info:light-dark(var(--p-100), var(--p-20));--md-sys-color-info-container:light-dark(var(--p-90), var(--p-20));--md-sys-color-on-info-container:light-dark(var(--p-30), var(--p-95));--md-sys-color-success:light-dark(var(--t-40), var(--t-80));--md-sys-color-on-success:light-dark(var(--t-100), var(--t-20));--md-sys-color-success-container:light-dark(var(--t-95), var(--t-20));--md-sys-color-on-success-container:light-dark(var(--t-30), var(--t-95));--radius-none:0px;--radius-xs:4px;--radius-s:8px;--radius-m:12px;--radius-l:16px;--radius-xl:24px;--radius-full:1000px;--md-sys-shape-corner-none:var(--radius-none);--md-sys-shape-corner-extra-small:var(--radius-xs);--md-sys-shape-corner-small:var(--radius-s);--md-sys-shape-corner-medium:var(--radius-m);--md-sys-shape-corner-large:var(--radius-l);--md-sys-shape-corner-extra-large:var(--radius-xl);--md-sys-shape-corner-full:var(--radius-full);--stroke-border:1px;--stroke-focus-ring:3px;--md-focus-ring-color:light-dark(var(--p-40), var(--p-80));--md-focus-ring-width:var(--stroke-focus-ring);--md-outlined-button-outline-width:var(--stroke-border);--md-outlined-field-outline-width:var(--stroke-border);--icon-size-small:24px;--icon-size-medium:32px;--icon-size-large:40px;--icon-size-number:0px}:root[data-density="-2"],[data-density="-2"]{--spacing-0:0px;--spacing-1:0px;--spacing-2:2px;--spacing-3:6px;--spacing-4:10px;--spacing-5:14px;--spacing-6:18px;--spacing-7:20px;--spacing-8:28px;--spacing-9:36px;--spacing-10:42px;--spacing-11:56px;--spacing-12:72px;--spacing-13:88px;--spacing-14:112px}:root[data-density="-4"],[data-density="-4"]{--spacing-0:0px;--spacing-1:0px;--spacing-2:0px;--spacing-3:4px;--spacing-4:8px;--spacing-5:12px;--spacing-6:16px;--spacing-7:16px;--spacing-8:24px;--spacing-9:36px;--spacing-10:36px;--spacing-11:50px;--spacing-12:64px;--spacing-13:80px;--spacing-14:104px}label{color:light-dark(var(--p-10),var(--p-100))}fieldset.scb-fieldset{border:0;padding:0;margin:0}fieldset.scb-fieldset+fieldset.scb-fieldset{margin-block-start:var(--spacing-8, 32px)}legend.scb-legend{display:block;margin:0 0 var(--spacing-6, 20px)0;font-family:var(--brand-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--weight-semibold);letter-spacing:var(--md-sys-typescale-title-small-tracking);color:var(--md-sys-color-on-surface)}fieldset.scb-fieldset[disabled]{opacity:.7}
package/mvc/scb.svg ADDED
@@ -0,0 +1,14 @@
1
+ <svg
2
+ xmlns="http://www.w3.org/2000/svg"
3
+ xmlns:xlink="http://www.w3.org/1999/xlink"
4
+ aria-hidden="true"
5
+ role="img"
6
+ width="48"
7
+ height="48"
8
+ preserveAspectRatio="xMidYMid meet"
9
+ viewBox="0 0 1300 1300"
10
+ >
11
+ <path d="M539.3,128.2c0-19.3-15.7-35-35-35c-19.3,0-35,15.6-35,35v882.1c0,19.4,15.7,35,35,35c19.3,0,35-15.7,35-35V692.4 c0-2.3,1.9-4.2,4.2-4.2h115c2.3,0,4.2,1.9,4.2,4.2v320.7c0,67.7-71,122.5-158.4,122.5c-87.5,0-158.5-54.9-158.5-122.5V122.9 c0-67.6,70.9-122.5,158.5-122.5c87.5,0,158.4,54.9,158.4,122.5v316.6c0,2.3-1.9,4.2-4.2,4.2h-115c-2.3,0-4.2-1.8-4.2-4.2V128.2z" />
12
+ <path d="M4.2,228.4c-7.4,51.5-4.8,135.9,6.3,183.3c12.2,51.7,82.3,156.1,113.9,204.6c31.6,48.5,73.8,99.1,73.2,166.6v161.7 c0,19.3-15.7,35-35,35c-19.3,0-34.9-15.7-34.9-35V696.7c0-2.3-1.9-4.2-4.3-4.2H8.4c-2.4,0-4.2,1.9-4.2,4.2v255.2 c0,67.7,70.9,122.5,158.4,122.5c87.5,0,158.5-54.9,158.5-122.5V782.8c-0.5-116-32.2-132.9-73.2-202.4 c-29.4-49.9-101.8-153-113.9-204.6c-11.1-47.4-10.6-102.3-6.3-152.1c0-19.3,15.7-35,34.9-35c19.3,0,35,15.7,35,35V444 c0,2.3,1.9,4.2,4.3,4.2h115c2.4,0,4.2-1.9,4.2-4.2V228.4c0-67.7-70.9-122.5-158.5-122.5C75.1,105.8,4.2,160.7,4.2,228.4" />
13
+ <path d="M814.9,600.4c-2.4,0-4.3,1.9-4.3,4.2v358.5c0,2.3,1.9,4.3,4.3,4.3h20.8c23.3,0,42.1-18.9,42.1-42.1V642.6 c0-23.3-18.8-42.1-42.1-42.1H814.9z M814.9,207.1c-2.4,0-4.3,1.9-4.3,4.2v292.1c0,2.4,1.9,4.3,4.3,4.3h17.4 c23.2,0,42.1-18.9,42.1-42.1V249.2c0-23.2-18.9-42.1-42.1-42.1H814.9z M691.5,115.3H868c72.9,0,132,59.1,132,132v185.1 c0,51.9-34,95.7-81,110.7v2.5c46.9,15,81,58.8,81,110.8v282.6c0,64.2-52.1,116.3-116.3,116.3l-192.2,0.1c-2.4,0-4.2-1.9-4.2-4.2 V119.4C687.2,117.2,689.1,115.3,691.5,115.3" />
14
+ </svg>
package/package.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "scb-wc",
3
+ "version": "0.1.1",
4
+ "type": "module",
5
+ "main": "index.js",
6
+ "module": "index.js",
7
+ "browser": "scb-wc.bundle.js",
8
+ "typings": "scb-wc.d.ts",
9
+ "style": "scb-wc.css",
10
+ "sideEffects": [
11
+ "**/*.css"
12
+ ],
13
+ "peerDependencies": {
14
+ "@material/web": "^1.5.1",
15
+ "lit": "^3.1.0"
16
+ },
17
+ "files": [
18
+ "*"
19
+ ],
20
+ "exports": {
21
+ ".": {
22
+ "import": "./index.js",
23
+ "require": "./index.js"
24
+ },
25
+ "./scb-wc.css": "./scb-wc.css",
26
+ "./all": {
27
+ "import": "./all.js",
28
+ "require": "./all.js"
29
+ },
30
+ "./mvc/*": "./mvc/*"
31
+ }
32
+ }
package/scb-logo.svg ADDED
@@ -0,0 +1,21 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <svg viewBox="-0.0002 -0.0066 1344.9076 377.9532" xmlns="http://www.w3.org/2000/svg">
3
+ <defs>
4
+ <style type="text/css">
5
+ g {
6
+ fill: #100f0d;
7
+ }
8
+ g:target {
9
+ fill: #fff;
10
+ }
11
+ </style>
12
+ </defs>
13
+ <g transform="matrix(1.3333330154418945, 0, 0, -1.3333330154418945, 0, 377.9466552734375)" id="g10">
14
+ <g transform="scale(0.1)" id="inverted">
15
+ <path id="path14" d="m 1346.6,2515.59 c 0,48.24 -39.11,87.31 -87.4,87.31 -48.29,0 -87.4,-39.07 -87.4,-87.31 V 312.898 c 0,-48.339 39.11,-87.5 87.4,-87.5 48.29,0 87.4,39.161 87.4,87.5 V 1106.8 c 0,5.77 4.79,10.45 10.51,10.45 h 287.22 c 5.76,0 10.5,-4.68 10.5,-10.45 V 305.969 C 1654.83,137.02 1477.67,0 1259.2,0 1040.63,0 863.523,137.02 863.523,305.969 V 2528.77 c 0,168.86 177.107,305.88 395.677,305.88 218.47,0 395.63,-137.02 395.63,-305.88 V 1738.1 c 0,-5.86 -4.74,-10.45 -10.5,-10.45 h -287.22 c -5.72,0 -10.51,4.59 -10.51,10.45 v 777.49"/>
16
+ <path id="path16" d="M 10.4414,2265.38 C -8.01563,2136.85 -1.52734,1926.1 26.1172,1807.73 56.4922,1678.71 231.645,1417.96 310.555,1296.86 389.566,1175.85 494.949,1049.49 493.375,880.922 V 477.18 c 0,-48.25 -39.109,-87.41 -87.406,-87.41 -48.145,0 -87.254,39.16 -87.254,87.41 v 618.79 c 0,5.76 -4.785,10.55 -10.645,10.55 H 20.9453 c -5.8711,0 -10.5039,-4.79 -10.5039,-10.55 V 458.719 c 0,-168.957 177.1056,-305.969 395.5276,-305.969 218.574,0 395.683,137.012 395.683,305.969 v 422.203 c -1.324,289.568 -80.332,331.748 -182.867,505.398 -73.445,124.71 -254.121,381.95 -284.398,510.97 -27.735,118.36 -26.516,255.39 -15.672,379.9 0,48.25 39.109,87.41 87.254,87.41 48.297,0 87.406,-39.16 87.406,-87.41 v -550.32 c 0,-5.77 4.746,-10.45 10.645,-10.45 h 287.085 c 5.911,0 10.547,4.68 10.547,10.45 v 538.51 c 0,169.06 -177.109,305.97 -395.683,305.97 -218.422,0 -395.5276,-136.91 -395.5276,-305.97"/>
17
+ <path id="path18" d="m 1726.57,2547.82 h 440.8 c 182.04,0 329.61,-147.57 329.61,-329.52 v -462.24 c 0,-129.59 -84.97,-238.98 -202.16,-276.48 v -6.24 c 117.19,-37.4 202.16,-146.89 202.16,-276.58 V 491.148 c 0,-160.367 -130.2,-290.457 -290.45,-290.457 l -479.96,-0.293 c -5.91,0 -10.6,4.793 -10.6,10.454 V 2537.37 c 0,5.66 4.69,10.45 10.6,10.45 m 308.27,-229.22 c -5.97,0 -10.65,-4.78 -10.65,-10.55 v -729.33 c 0,-5.97 4.68,-10.65 10.65,-10.65 h 43.36 c 58.01,0 105.08,47.16 105.08,105.18 v 540.18 c 0,58 -47.07,105.17 -105.08,105.17 z m 0,-982.29 c -5.97,0 -10.65,-4.69 -10.65,-10.45 V 430.59 c 0,-5.86 4.68,-10.649 10.65,-10.649 h 51.85 c 58.12,0 105.09,47.18 105.09,105.188 v 706.011 c 0,58.19 -46.97,105.17 -105.09,105.17 h -51.85"/>
18
+ </g>
19
+ </g>
20
+ <text style="fill: rgb(1, 1, 1); font-family: Roboto; font-size: 139.2px; font-weight: 500; stroke: rgb(0, 0, 0); white-space: pre;" x="455.182" y="234.25">Designsystem</text>
21
+ </svg>