nve-designsystem 2.12.0 → 2.12.2

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.
@@ -1,10 +1,12 @@
1
- import { i as o } from "../../chunks/lit-element.js";
2
- const e = o`
1
+ import { i as a } from "../../chunks/lit-element.js";
2
+ const r = a`
3
3
  :host {
4
4
  --header-spacing: var(--spacing-x-large, 2rem);
5
5
  --body-spacing: var(--spacing-x-large, 2rem);
6
6
  --footer-spacing: var(--spacing-x-large, 2rem);
7
7
  --width: 40.625rem;
8
+ --sl-panel-background-color: var(--neutrals-background-primary);
9
+ --sl-shadow-x-large: var(--dropdown);
8
10
  }
9
11
 
10
12
  :host::part(footer),
@@ -64,7 +66,10 @@ const e = o`
64
66
  padding-bottom: var(--body-spacing);
65
67
  }
66
68
  }
69
+ :host::part(header-actions) {
70
+ fill: var(--neutrals-foreground-primary);
71
+ }
67
72
  `;
68
73
  export {
69
- e as default
74
+ r as default
70
75
  };
@@ -1,51 +1,53 @@
1
1
  import { i as r } from "../../chunks/lit-element.js";
2
- const d = r`
3
- :host {
4
- --drawer-padding-block: var(--spacing-large);
5
- --drawer-padding-inline: var(--spacing-medium);
6
- }
2
+ const o = r`
3
+ :host {
4
+ --drawer-padding-block: var(--spacing-large);
5
+ --drawer-padding-inline: var(--spacing-medium);
6
+ }
7
7
 
8
- :host::part(title) {
9
- display: flex;
10
- align-items: center;
11
- font-size: var(--font-size-small);
12
- font-weight: var(--font-weight-semibold);
13
- padding: 0;
14
- }
8
+ :host::part(title) {
9
+ display: flex;
10
+ align-items: center;
11
+ font-size: var(--font-size-small);
12
+ font-weight: var(--font-weight-semibold);
13
+ padding: 0;
14
+ }
15
15
 
16
- :host::part(header) {
17
- padding: var(--drawer-padding-block) var(--drawer-padding-inline);
18
- border-bottom: 1px solid var(--neutrals-border-subtle);
19
- }
16
+ :host::part(header) {
17
+ padding: var(--drawer-padding-block) var(--drawer-padding-inline);
18
+ border-bottom: 1px solid var(--neutrals-border-subtle);
19
+ }
20
20
 
21
- :host::part(header-actions) {
22
- display: flex;
23
- align-items: center;
24
- padding: 0;
25
- }
21
+ :host::part(header-actions) {
22
+ display: flex;
23
+ align-items: center;
24
+ padding: 0;
25
+ }
26
26
 
27
- :host::part(panel) {
28
- background-color: var(--neutrals-background-primary);
29
- color: var(--neutrals-foreground-primary);
30
- }
27
+ :host::part(panel) {
28
+ background-color: var(--neutrals-background-primary);
29
+ color: var(--neutrals-foreground-primary);
30
+ }
31
31
 
32
- :host::part(body) {
33
- padding: var(--drawer-padding-block) var(--drawer-padding-inline);
34
- }
32
+ :host::part(body) {
33
+ padding: var(--drawer-padding-block) var(--drawer-padding-inline);
34
+ }
35
35
 
36
- :host::part(footer) {
37
- display: flex;
38
- gap: var(--spacing-small);
39
- padding: var(--drawer-padding-block) var(--drawer-padding-inline);
40
- justify-content: flex-start;
41
- }
42
-
43
- :host::part(close-button):hover {
44
- background-color: var(--interactive-ghost-background-hover);
45
- border-radius: var(--border-radius-small, 4px);
46
- transition: background-color 0.3s ease;
47
- }
36
+ :host::part(footer) {
37
+ display: flex;
38
+ gap: var(--spacing-small);
39
+ padding: var(--drawer-padding-block) var(--drawer-padding-inline);
40
+ justify-content: flex-start;
41
+ }
42
+ :host::part(close-button) {
43
+ color: var(--neutrals-foreground-primary);
44
+ }
45
+ :host::part(close-button):hover {
46
+ background-color: var(--interactive-ghost-background-hover);
47
+ border-radius: var(--border-radius-small, 4px);
48
+ transition: background-color 0.3s ease;
49
+ }
48
50
  `;
49
51
  export {
50
- d as default
52
+ o as default
51
53
  };
@@ -84,7 +84,7 @@ const a = r`
84
84
  }
85
85
 
86
86
  /* Gir rød ramme ved valideringsfeil */
87
- :host([data-user-invalid])::part(base) {
87
+ :host([data-user-invalid]:not([noValidation]))::part(base) {
88
88
  border-color: var(--feedback-background-emphasized-error);
89
89
  }
90
90
 
@@ -1,5 +1,5 @@
1
1
  import { i as o } from "../../chunks/lit-element.js";
2
- const e = o`
2
+ const r = o`
3
3
  .switch {
4
4
  display: flex;
5
5
  align-items: center;
@@ -22,8 +22,8 @@ const e = o`
22
22
  width: 48px;
23
23
  --label-color: var(--neutrals-foreground-primary);
24
24
  --on-color: var(--neutrals-foreground-subtle);
25
- --off-color: var(--neutrals-background-secondary);
26
- --thumb-color: var(--on-color);
25
+ --off-color: var(--neutrals-background-secondary);
26
+ --thumb-color: var(--on-color);
27
27
  background-color: var(--off-color);
28
28
  transition: background-color 0.3s ease-in-out;
29
29
  }
@@ -35,10 +35,10 @@ const e = o`
35
35
  .switch--checked .switch__control {
36
36
  /* 100% - bredde på thumb + 4px */
37
37
  --left: calc(100% - var(--font-size-xsmall) - 4px);
38
- --thumb-color: var(--off-color);
38
+ --thumb-color: var(--off-color);
39
39
  background-color: var(--on-color);
40
40
  }
41
-
41
+
42
42
  .switch__thumb {
43
43
  position: absolute;
44
44
  left: var(--left);
@@ -69,17 +69,20 @@ const e = o`
69
69
 
70
70
  .switch__icon.switch__onicon {
71
71
  left: calc(0% + 6px);
72
+ /* Disse fargene skal være motsatt av bakgrunnen */
73
+ color: var(--off-color);
72
74
  }
73
75
 
74
76
  .switch__icon.switch__officon {
75
77
  left: calc(100% - var(--font-size-2xsmall) - 6px);
78
+ color: var(--on-color);
76
79
  }
77
80
 
78
81
  .switch input[type='checkbox'] {
79
82
  clip: rect(0, 0, 0, 0);
80
83
  position: absolute;
81
84
  }
82
-
85
+
83
86
  .switch.switch--focused:has(:focus-visible) .switch__control {
84
87
  outline: 2px solid var(--interactive-links-focus);
85
88
  outline-offset: 1px;
@@ -92,13 +95,13 @@ const e = o`
92
95
  }
93
96
  .switch.switch--disabled {
94
97
  opacity: var(--disabled);
95
- }
96
-
97
- .switch--label-start {
98
+ }
99
+
100
+ .switch--label-start {
98
101
  justify-content: flex-end;
99
102
  flex-direction: row-reverse;
100
103
  }
101
-
104
+
102
105
  .switch--primary {
103
106
  &.switch--checked .switch__control {
104
107
  --on-color: var(--interactive-primary-foreground-border-focus);
@@ -107,5 +110,5 @@ const e = o`
107
110
  }
108
111
  `;
109
112
  export {
110
- e as default
113
+ r as default
111
114
  };
@@ -70,6 +70,127 @@
70
70
  }
71
71
  ]
72
72
  },
73
+ {
74
+ "kind": "javascript-module",
75
+ "path": "components/nve-accordion-item/nve-accordion-item.js",
76
+ "declarations": [
77
+ {
78
+ "kind": "class",
79
+ "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.",
80
+ "name": "NveAccordionItem",
81
+ "members": [
82
+ {
83
+ "kind": "field",
84
+ "name": "testId",
85
+ "type": {
86
+ "text": "string | undefined"
87
+ },
88
+ "default": "undefined"
89
+ },
90
+ {
91
+ "kind": "field",
92
+ "name": "leftStroke",
93
+ "type": {
94
+ "text": "boolean"
95
+ },
96
+ "default": "false",
97
+ "description": "tykk strek på venstre side"
98
+ },
99
+ {
100
+ "kind": "field",
101
+ "name": "variant",
102
+ "type": {
103
+ "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
104
+ },
105
+ "default": "'none'",
106
+ "description": "Setter farge på bakgrunn og tekst"
107
+ },
108
+ {
109
+ "kind": "field",
110
+ "name": "border",
111
+ "type": {
112
+ "text": "boolean"
113
+ },
114
+ "default": "false",
115
+ "description": "Vis en ramme rundt hele komponenten"
116
+ },
117
+ {
118
+ "kind": "field",
119
+ "name": "compact",
120
+ "type": {
121
+ "text": "boolean"
122
+ },
123
+ "default": "false",
124
+ "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
125
+ },
126
+ {
127
+ "kind": "field",
128
+ "name": "styles",
129
+ "type": {
130
+ "text": "array"
131
+ },
132
+ "static": true,
133
+ "default": "[SlDetails.styles, styles]"
134
+ }
135
+ ],
136
+ "attributes": [
137
+ {
138
+ "name": "testId",
139
+ "type": {
140
+ "text": "string | undefined"
141
+ },
142
+ "description": ""
143
+ },
144
+ {
145
+ "name": "leftStroke",
146
+ "type": {
147
+ "text": "boolean"
148
+ },
149
+ "description": "tykk strek på venstre side"
150
+ },
151
+ {
152
+ "name": "variant",
153
+ "type": {
154
+ "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
155
+ },
156
+ "description": "Setter farge på bakgrunn og tekst"
157
+ },
158
+ {
159
+ "name": "border",
160
+ "type": {
161
+ "text": "boolean"
162
+ },
163
+ "description": "Vis en ramme rundt hele komponenten"
164
+ },
165
+ {
166
+ "name": "compact",
167
+ "type": {
168
+ "text": "boolean"
169
+ },
170
+ "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
171
+ }
172
+ ],
173
+ "superclass": {
174
+ "name": "SlDetails",
175
+ "package": "@shoelace-style/shoelace"
176
+ },
177
+ "tagNameWithoutPrefix": "accordion-item",
178
+ "tagName": "nve-accordion-item",
179
+ "customElement": true,
180
+ "jsDoc": "/**\n * Viser et kort sammendrag og utvides for å vise ekstra innhold.\n * Kan brukes som en selvstendig komponent eller som en del av nve-accordion.\n */"
181
+ }
182
+ ],
183
+ "exports": [
184
+ {
185
+ "kind": "js",
186
+ "name": "default",
187
+ "declaration": {
188
+ "name": "NveAccordionItem",
189
+ "module": "components/nve-accordion-item/nve-accordion-item.js"
190
+ }
191
+ }
192
+ ]
193
+ },
73
194
  {
74
195
  "kind": "javascript-module",
75
196
  "path": "components/nve-alert/nve-alert.js",
@@ -470,127 +591,6 @@
470
591
  }
471
592
  ]
472
593
  },
473
- {
474
- "kind": "javascript-module",
475
- "path": "components/nve-accordion-item/nve-accordion-item.js",
476
- "declarations": [
477
- {
478
- "kind": "class",
479
- "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.",
480
- "name": "NveAccordionItem",
481
- "members": [
482
- {
483
- "kind": "field",
484
- "name": "testId",
485
- "type": {
486
- "text": "string | undefined"
487
- },
488
- "default": "undefined"
489
- },
490
- {
491
- "kind": "field",
492
- "name": "leftStroke",
493
- "type": {
494
- "text": "boolean"
495
- },
496
- "default": "false",
497
- "description": "tykk strek på venstre side"
498
- },
499
- {
500
- "kind": "field",
501
- "name": "variant",
502
- "type": {
503
- "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
504
- },
505
- "default": "'none'",
506
- "description": "Setter farge på bakgrunn og tekst"
507
- },
508
- {
509
- "kind": "field",
510
- "name": "border",
511
- "type": {
512
- "text": "boolean"
513
- },
514
- "default": "false",
515
- "description": "Vis en ramme rundt hele komponenten"
516
- },
517
- {
518
- "kind": "field",
519
- "name": "compact",
520
- "type": {
521
- "text": "boolean"
522
- },
523
- "default": "false",
524
- "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
525
- },
526
- {
527
- "kind": "field",
528
- "name": "styles",
529
- "type": {
530
- "text": "array"
531
- },
532
- "static": true,
533
- "default": "[SlDetails.styles, styles]"
534
- }
535
- ],
536
- "attributes": [
537
- {
538
- "name": "testId",
539
- "type": {
540
- "text": "string | undefined"
541
- },
542
- "description": ""
543
- },
544
- {
545
- "name": "leftStroke",
546
- "type": {
547
- "text": "boolean"
548
- },
549
- "description": "tykk strek på venstre side"
550
- },
551
- {
552
- "name": "variant",
553
- "type": {
554
- "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
555
- },
556
- "description": "Setter farge på bakgrunn og tekst"
557
- },
558
- {
559
- "name": "border",
560
- "type": {
561
- "text": "boolean"
562
- },
563
- "description": "Vis en ramme rundt hele komponenten"
564
- },
565
- {
566
- "name": "compact",
567
- "type": {
568
- "text": "boolean"
569
- },
570
- "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
571
- }
572
- ],
573
- "superclass": {
574
- "name": "SlDetails",
575
- "package": "@shoelace-style/shoelace"
576
- },
577
- "tagNameWithoutPrefix": "accordion-item",
578
- "tagName": "nve-accordion-item",
579
- "customElement": true,
580
- "jsDoc": "/**\n * Viser et kort sammendrag og utvides for å vise ekstra innhold.\n * Kan brukes som en selvstendig komponent eller som en del av nve-accordion.\n */"
581
- }
582
- ],
583
- "exports": [
584
- {
585
- "kind": "js",
586
- "name": "default",
587
- "declaration": {
588
- "name": "NveAccordionItem",
589
- "module": "components/nve-accordion-item/nve-accordion-item.js"
590
- }
591
- }
592
- ]
593
- },
594
594
  {
595
595
  "kind": "javascript-module",
596
596
  "path": "components/nve-badge/nve-badge.js",
@@ -7192,7 +7192,7 @@
7192
7192
  "package": {
7193
7193
  "name": "nve-designsystem",
7194
7194
  "description": "Designsystem for NVE",
7195
- "version": "2.11.0",
7195
+ "version": "2.12.1",
7196
7196
  "author": {
7197
7197
  "name": "NVE",
7198
7198
  "email": "nve@nve.no"
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  },
8
8
  "license": "MIT",
9
9
  "homepage": "https://github.com/NVE/Designsystem/",
10
- "version": "2.12.0",
10
+ "version": "2.12.2",
11
11
  "customElements": "custom-elements.json",
12
12
  "exports": {
13
13
  ".": {
@@ -13,6 +13,46 @@
13
13
  }
14
14
  ]
15
15
  },
16
+ {
17
+ "name": "nve-accordion-item",
18
+ "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.\n---\n",
19
+ "attributes": [
20
+ { "name": "testId", "description": "", "values": [] },
21
+ {
22
+ "name": "leftStroke",
23
+ "description": "tykk strek på venstre side",
24
+ "values": []
25
+ },
26
+ {
27
+ "name": "variant",
28
+ "description": "Setter farge på bakgrunn og tekst",
29
+ "values": [
30
+ { "name": "none" },
31
+ { "name": "neutral" },
32
+ { "name": "info" },
33
+ { "name": "success" },
34
+ { "name": "warning" },
35
+ { "name": "error" }
36
+ ]
37
+ },
38
+ {
39
+ "name": "border",
40
+ "description": "Vis en ramme rundt hele komponenten",
41
+ "values": []
42
+ },
43
+ {
44
+ "name": "compact",
45
+ "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre",
46
+ "values": []
47
+ }
48
+ ],
49
+ "references": [
50
+ {
51
+ "name": "Mer info",
52
+ "url": "https://designsystem.nve.no/components/nve-accordion-item"
53
+ }
54
+ ]
55
+ },
16
56
  {
17
57
  "name": "nve-alert",
18
58
  "description": "Brukes til å vise viktige beskjeder som toast. Dette er en komponent som bruker alert-rollen.\nHvis du trenger å vise en statisk varsling med mer informasjon, bruk nve-message-card.\nLes mer i seksjonen om universel utforming.\n---\n\n\n### **Hendelser:**\n - **sl-show** - Når alerten blir vist\n- **sl-hide** - Når alerten blir skjult\n- **sl-after-show** - Etter allerten er vist\n- **sl-after-hide** - Etter allerten er skjult\n\n### **Metoder:**\n - **show(): __** - Viser alerten med animasjon.\nSetter `open` til true, kjører visningsanimasjonen, og starter eventuell auto-hide timer.\nSender ut eventen `sl-after-show` når animasjonen er ferdig.\n- **hide(): __** - Skjuler alerten med animasjon.\nKjører skjuleanimasjonen før `open` settes til false.\nSender ut eventen `sl-after-hide` når animasjonen og oppdateringen er ferdig.\nStopper eventuell auto-hide timer.\n- **toast(): __** - Viser alerten som en toast-melding.\nLegger alerten i toast-stacken, venter til den er rendret, og viser den med animasjon.\nFjerner alerten fra toast-stacken når den skjules, og fjerner stacken hvis det ikke er flere alerts igjen.\n\n### **Spor:**\n - _default_ - tekst - Hoved teksten i alerten.\n- **icon** - Det første ikonet (til venstre).\n- **label** - Overskriften for alerten.\n\n### **Deler:**\n - **base** - Topp-element\n- **icon** - Ikonet til venstre\n- **label** - Overskriften\n- **message** - Hoved tekst",
@@ -79,46 +119,6 @@
79
119
  }
80
120
  ]
81
121
  },
82
- {
83
- "name": "nve-accordion-item",
84
- "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.\n---\n",
85
- "attributes": [
86
- { "name": "testId", "description": "", "values": [] },
87
- {
88
- "name": "leftStroke",
89
- "description": "tykk strek på venstre side",
90
- "values": []
91
- },
92
- {
93
- "name": "variant",
94
- "description": "Setter farge på bakgrunn og tekst",
95
- "values": [
96
- { "name": "none" },
97
- { "name": "neutral" },
98
- { "name": "info" },
99
- { "name": "success" },
100
- { "name": "warning" },
101
- { "name": "error" }
102
- ]
103
- },
104
- {
105
- "name": "border",
106
- "description": "Vis en ramme rundt hele komponenten",
107
- "values": []
108
- },
109
- {
110
- "name": "compact",
111
- "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre",
112
- "values": []
113
- }
114
- ],
115
- "references": [
116
- {
117
- "name": "Mer info",
118
- "url": "https://designsystem.nve.no/components/nve-accordion-item"
119
- }
120
- ]
121
- },
122
122
  {
123
123
  "name": "nve-badge",
124
124
  "description": "En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.\n---\n",