nve-designsystem 1.4.0 → 1.4.4

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 (7) hide show
  1. package/components/nve-accordion/nve-accordion.component.d.ts +0 -1
  2. package/components/nve-button/nve-button.component.d.ts +0 -1
  3. package/css/global.css +1 -1
  4. package/custom-elements.json +288 -288
  5. package/nve-designsystem.css +1 -0
  6. package/nve-designsystem.d.ts +0 -2
  7. package/package.json +1 -1
package/components/nve-accordion/nve-accordion.component.d.ts CHANGED
@@ -5,7 +5,6 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
5
5
  * Komponenten vil sørge for at kun en nve-accordion-item kan være åpen om gangen.
6
6
  * Komponenten har ingen egen utforming, den viser kun det som er inni.
7
7
  * @slot (default) - legg alle nve-accordion-item inne denne for å kontrollere dem
8
- *
9
8
  */
10
9
  export default class NveAccordion extends LitElement implements INveComponent {
11
10
  testId: string | undefined;
package/components/nve-button/nve-button.component.d.ts CHANGED
@@ -5,7 +5,6 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
5
5
  * Bruk href for å gjøre den om til en link.
6
6
  * Disse feltene skal ikke brukes:caret og pill
7
7
  * Circle attributte skal brukes kun når man viser bare et ikon.
8
- *
9
8
  */
10
9
  export default class NveButton extends SlButton implements INveComponent {
11
10
  constructor();
package/css/global.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@shoelace-style/shoelace/dist/themes/light.css';
1
+ @import '../nve-designsystem.css';
2
2
  @import url('https://fonts.cdnfonts.com/css/source-sans-pro');
3
3
 
4
4
  :root {
package/custom-elements.json CHANGED
@@ -47,7 +47,7 @@
47
47
  "tagNameWithoutPrefix": "accordion",
48
48
  "tagName": "nve-accordion",
49
49
  "customElement": true,
50
- "jsDoc": "/**\n * En gruppering av nve-accordion-item slik at de sammen fungerer som et accordion.\n * Komponenten vil sørge for at kun en nve-accordion-item kan være åpen om gangen.\n * Komponenten har ingen egen utforming, den viser kun det som er inni.\n * @slot (default) - legg alle nve-accordion-item inne denne for å kontrollere dem\n * \n */"
50
+ "jsDoc": "/**\n * En gruppering av nve-accordion-item slik at de sammen fungerer som et accordion.\n * Komponenten vil sørge for at kun en nve-accordion-item kan være åpen om gangen.\n * Komponenten har ingen egen utforming, den viser kun det som er inni.\n * @slot (default) - legg alle nve-accordion-item inne denne for å kontrollere dem\n */"
51
51
  }
52
52
  ],
53
53
  "exports": [
@@ -63,56 +63,48 @@
63
63
  },
64
64
  {
65
65
  "kind": "javascript-module",
66
- "path": "components/nve-accordion-item/nve-accordion-item.js",
66
+ "path": "components/nve-alert/nve-alert.js",
67
67
  "declarations": [
68
68
  {
69
69
  "kind": "class",
70
- "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.",
71
- "name": "NveAccordionItem",
70
+ "description": "Brukes til å vise viktige beskjeder enten på en side eller som en enkel popup.\nHvis du trenger å vise en statisk varsling med mer informasjon, kan det hende at\nnve-message-card er et bedre valg.",
71
+ "name": "NveAlert",
72
72
  "members": [
73
73
  {
74
74
  "kind": "field",
75
- "name": "testId",
76
- "type": {
77
- "text": "string | undefined"
78
- },
79
- "default": "undefined"
80
- },
81
- {
82
- "kind": "field",
83
- "name": "leftStroke",
75
+ "name": "title",
84
76
  "type": {
85
- "text": "boolean"
77
+ "text": "string"
86
78
  },
87
- "default": "false",
88
- "description": "tykk strek på venstre side"
79
+ "default": "''",
80
+ "description": "Tykk tekst, vises helt til venstre"
89
81
  },
90
82
  {
91
83
  "kind": "field",
92
- "name": "variant",
84
+ "name": "text",
93
85
  "type": {
94
- "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
86
+ "text": "string"
95
87
  },
96
- "default": "'none'",
97
- "description": "Setter farge på bakgrunn og tekst"
88
+ "default": "''",
89
+ "description": "Tynnere beskrivelse tekst"
98
90
  },
99
91
  {
100
92
  "kind": "field",
101
- "name": "border",
93
+ "name": "saturation",
102
94
  "type": {
103
- "text": "boolean"
95
+ "text": "'emphasized' | null"
104
96
  },
105
- "default": "false",
106
- "description": "Vis en ramme rundt hele komponenten"
97
+ "default": "null",
98
+ "description": "Bestemmer sterkere bakgrunnsfarge"
107
99
  },
108
100
  {
109
101
  "kind": "field",
110
- "name": "compact",
102
+ "name": "leftStroke",
111
103
  "type": {
112
104
  "text": "boolean"
113
105
  },
114
106
  "default": "false",
115
- "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
107
+ "description": "Ramme linje til venstre"
116
108
  },
117
109
  {
118
110
  "kind": "field",
@@ -121,7 +113,19 @@
121
113
  "text": "array"
122
114
  },
123
115
  "static": true,
124
- "default": "[SlDetails.styles, styles]"
116
+ "default": "[ SlAlert.styles, // we have to have this otherwise closable is not working styles, ]"
117
+ },
118
+ {
119
+ "kind": "method",
120
+ "name": "updated",
121
+ "parameters": [
122
+ {
123
+ "name": "changedProperties",
124
+ "type": {
125
+ "text": "PropertyValues"
126
+ }
127
+ }
128
+ ]
125
129
  },
126
130
  {
127
131
  "kind": "field",
@@ -130,167 +134,177 @@
130
134
  "text": "object"
131
135
  },
132
136
  "static": true,
133
- "default": "{ 'sl-icon': SlIcon }",
134
- "inheritedFrom": {
135
- "name": "SlDetails"
136
- }
137
- },
138
- {
139
- "kind": "field",
140
- "name": "details",
141
- "type": {
142
- "text": "HTMLDetailsElement"
143
- },
137
+ "default": "{ 'sl-icon-button': SlIconButton }",
144
138
  "inheritedFrom": {
145
- "name": "SlDetails"
139
+ "name": "SlAlert"
146
140
  }
147
141
  },
148
142
  {
149
143
  "kind": "field",
150
- "name": "header",
144
+ "name": "base",
151
145
  "type": {
152
146
  "text": "HTMLElement"
153
147
  },
154
148
  "inheritedFrom": {
155
- "name": "SlDetails"
149
+ "name": "SlAlert"
156
150
  }
157
151
  },
158
152
  {
159
153
  "kind": "field",
160
- "name": "body",
154
+ "name": "countdownElement",
161
155
  "type": {
162
156
  "text": "HTMLElement"
163
157
  },
164
158
  "inheritedFrom": {
165
- "name": "SlDetails"
159
+ "name": "SlAlert"
166
160
  }
167
161
  },
168
162
  {
169
163
  "kind": "field",
170
- "name": "expandIconSlot",
164
+ "name": "open",
171
165
  "type": {
172
- "text": "HTMLSlotElement"
166
+ "text": "boolean"
173
167
  },
168
+ "default": "false",
169
+ "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
170
+ "attribute": "open",
171
+ "reflects": true,
174
172
  "inheritedFrom": {
175
- "name": "SlDetails"
173
+ "name": "SlAlert"
176
174
  }
177
175
  },
178
176
  {
179
177
  "kind": "field",
180
- "name": "detailsObserver",
178
+ "name": "closable",
181
179
  "type": {
182
- "text": "MutationObserver"
180
+ "text": "boolean"
183
181
  },
182
+ "default": "false",
183
+ "description": "Enables a close button that allows the user to dismiss the alert.",
184
+ "attribute": "closable",
185
+ "reflects": true,
184
186
  "inheritedFrom": {
185
- "name": "SlDetails"
187
+ "name": "SlAlert"
186
188
  }
187
189
  },
188
190
  {
189
191
  "kind": "field",
190
- "name": "open",
192
+ "name": "variant",
191
193
  "type": {
192
- "text": "boolean"
194
+ "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
193
195
  },
194
- "default": "false",
195
- "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
196
- "attribute": "open",
196
+ "default": "'primary'",
197
+ "description": "The alert's theme variant.",
198
+ "attribute": "variant",
197
199
  "reflects": true,
198
200
  "inheritedFrom": {
199
- "name": "SlDetails"
201
+ "name": "SlAlert"
200
202
  }
201
203
  },
202
204
  {
203
205
  "kind": "field",
204
- "name": "summary",
205
- "type": {
206
- "text": "string"
207
- },
208
- "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
209
- "attribute": "summary",
206
+ "name": "duration",
207
+ "default": "Infinity",
208
+ "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
209
+ "attribute": "duration",
210
210
  "inheritedFrom": {
211
- "name": "SlDetails"
211
+ "name": "SlAlert"
212
212
  }
213
213
  },
214
214
  {
215
215
  "kind": "field",
216
- "name": "disabled",
216
+ "name": "countdown",
217
217
  "type": {
218
- "text": "boolean"
218
+ "text": "'rtl' | 'ltr' | undefined"
219
219
  },
220
- "default": "false",
221
- "description": "Disables the details so it can't be toggled.",
222
- "attribute": "disabled",
220
+ "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
221
+ "attribute": "countdown",
223
222
  "reflects": true,
224
223
  "inheritedFrom": {
225
- "name": "SlDetails"
224
+ "name": "SlAlert"
226
225
  }
227
226
  },
228
227
  {
229
228
  "kind": "method",
230
229
  "name": "handleOpenChange",
231
230
  "inheritedFrom": {
232
- "name": "SlDetails"
231
+ "name": "SlAlert"
232
+ }
233
+ },
234
+ {
235
+ "kind": "method",
236
+ "name": "handleDurationChange",
237
+ "inheritedFrom": {
238
+ "name": "SlAlert"
233
239
  }
234
240
  },
235
241
  {
236
242
  "kind": "method",
237
243
  "name": "show",
238
- "description": "Shows the details.",
244
+ "description": "Shows the alert.",
239
245
  "inheritedFrom": {
240
- "name": "SlDetails"
246
+ "name": "SlAlert"
241
247
  }
242
248
  },
243
249
  {
244
250
  "kind": "method",
245
251
  "name": "hide",
246
- "description": "Hides the details",
252
+ "description": "Hides the alert",
247
253
  "inheritedFrom": {
248
- "name": "SlDetails"
254
+ "name": "SlAlert"
255
+ }
256
+ },
257
+ {
258
+ "kind": "method",
259
+ "name": "toast",
260
+ "description": "Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.",
261
+ "inheritedFrom": {
262
+ "name": "SlAlert"
249
263
  }
250
264
  }
251
265
  ],
252
266
  "superclass": {
253
- "name": "SlDetails",
254
- "package": "@shoelace-style/shoelace"
267
+ "name": "SlAlert",
268
+ "package": "@shoelace-style/shoelace/dist/components/alert/alert.js"
255
269
  },
256
- "tagNameWithoutPrefix": "accordion-item",
257
- "tagName": "nve-accordion-item",
270
+ "tagNameWithoutPrefix": "alert",
271
+ "tagName": "nve-alert",
258
272
  "customElement": true,
259
- "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 */",
273
+ "jsDoc": "/**\n * Brukes til å vise viktige beskjeder enten på en side eller som en enkel popup.\n * Hvis du trenger å vise en statisk varsling med mer informasjon, kan det hende at\n * nve-message-card er et bedre valg.\n */",
260
274
  "cssParts": [
261
275
  {
262
276
  "description": "The component's base wrapper.",
263
277
  "name": "base",
264
278
  "inheritedFrom": {
265
- "name": "SlDetails"
279
+ "name": "SlAlert"
266
280
  }
267
281
  },
268
282
  {
269
- "description": "The header that wraps both the summary and the expand/collapse icon.",
270
- "name": "header",
283
+ "description": "The container that wraps the optional icon.",
284
+ "name": "icon",
271
285
  "inheritedFrom": {
272
- "name": "SlDetails"
286
+ "name": "SlAlert"
273
287
  }
274
288
  },
275
289
  {
276
- "description": "The container that wraps the summary.",
277
- "name": "summary",
290
+ "description": "The container that wraps the alert's main content.",
291
+ "name": "message",
278
292
  "inheritedFrom": {
279
- "name": "SlDetails"
293
+ "name": "SlAlert"
280
294
  }
281
295
  },
282
296
  {
283
- "description": "The container that wraps the expand/collapse icons.",
284
- "name": "summary-icon",
297
+ "description": "The close button, an `<sl-icon-button>`.",
298
+ "name": "close-button",
285
299
  "inheritedFrom": {
286
- "name": "SlDetails"
300
+ "name": "SlAlert"
287
301
  }
288
302
  },
289
303
  {
290
- "description": "The details content.",
291
- "name": "content",
304
+ "description": "The close button's exported `base` part.",
305
+ "name": "close-button__base",
292
306
  "inheritedFrom": {
293
- "name": "SlDetails"
307
+ "name": "SlAlert"
294
308
  }
295
309
  }
296
310
  ],
@@ -301,101 +315,108 @@
301
315
  "text": "boolean"
302
316
  },
303
317
  "default": "false",
304
- "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
318
+ "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
305
319
  "fieldName": "open",
306
320
  "inheritedFrom": {
307
- "name": "SlDetails"
321
+ "name": "SlAlert"
308
322
  }
309
323
  },
310
324
  {
311
- "name": "summary",
325
+ "name": "closable",
312
326
  "type": {
313
- "text": "string"
327
+ "text": "boolean"
314
328
  },
315
- "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
316
- "fieldName": "summary",
329
+ "default": "false",
330
+ "description": "Enables a close button that allows the user to dismiss the alert.",
331
+ "fieldName": "closable",
317
332
  "inheritedFrom": {
318
- "name": "SlDetails"
333
+ "name": "SlAlert"
319
334
  }
320
335
  },
321
336
  {
322
- "name": "disabled",
337
+ "name": "variant",
323
338
  "type": {
324
- "text": "boolean"
339
+ "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
325
340
  },
326
- "default": "false",
327
- "description": "Disables the details so it can't be toggled.",
328
- "fieldName": "disabled",
341
+ "default": "'primary'",
342
+ "description": "The alert's theme variant.",
343
+ "fieldName": "variant",
329
344
  "inheritedFrom": {
330
- "name": "SlDetails"
345
+ "name": "SlAlert"
346
+ }
347
+ },
348
+ {
349
+ "name": "duration",
350
+ "default": "Infinity",
351
+ "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
352
+ "fieldName": "duration",
353
+ "inheritedFrom": {
354
+ "name": "SlAlert"
355
+ }
356
+ },
357
+ {
358
+ "name": "countdown",
359
+ "type": {
360
+ "text": "'rtl' | 'ltr' | undefined"
361
+ },
362
+ "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
363
+ "fieldName": "countdown",
364
+ "inheritedFrom": {
365
+ "name": "SlAlert"
331
366
  }
332
367
  }
333
368
  ],
334
369
  "events": [
335
370
  {
336
- "description": "Emitted when the details opens.",
371
+ "description": "Emitted when the alert opens.",
337
372
  "name": "sl-show",
338
373
  "reactName": "onSlShow",
339
374
  "eventName": "SlShowEvent",
340
375
  "inheritedFrom": {
341
- "name": "SlDetails"
376
+ "name": "SlAlert"
342
377
  }
343
378
  },
344
379
  {
345
- "description": "Emitted after the details opens and all animations are complete.",
380
+ "description": "Emitted after the alert opens and all animations are complete.",
346
381
  "name": "sl-after-show",
347
382
  "reactName": "onSlAfterShow",
348
383
  "eventName": "SlAfterShowEvent",
349
384
  "inheritedFrom": {
350
- "name": "SlDetails"
385
+ "name": "SlAlert"
351
386
  }
352
387
  },
353
388
  {
354
- "description": "Emitted when the details closes.",
389
+ "description": "Emitted when the alert closes.",
355
390
  "name": "sl-hide",
356
391
  "reactName": "onSlHide",
357
392
  "eventName": "SlHideEvent",
358
393
  "inheritedFrom": {
359
- "name": "SlDetails"
394
+ "name": "SlAlert"
360
395
  }
361
396
  },
362
397
  {
363
- "description": "Emitted after the details closes and all animations are complete.",
398
+ "description": "Emitted after the alert closes and all animations are complete.",
364
399
  "name": "sl-after-hide",
365
400
  "reactName": "onSlAfterHide",
366
401
  "eventName": "SlAfterHideEvent",
367
402
  "inheritedFrom": {
368
- "name": "SlDetails"
403
+ "name": "SlAlert"
369
404
  }
370
405
  }
371
406
  ],
372
407
  "slots": [
373
408
  {
374
- "description": "The details' main content.",
409
+ "description": "The alert's main content.",
375
410
  "name": "",
376
411
  "inheritedFrom": {
377
- "name": "SlDetails"
378
- }
379
- },
380
- {
381
- "description": "The details' summary. Alternatively, you can use the `summary` attribute.",
382
- "name": "summary",
383
- "inheritedFrom": {
384
- "name": "SlDetails"
385
- }
386
- },
387
- {
388
- "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`.",
389
- "name": "expand-icon",
390
- "inheritedFrom": {
391
- "name": "SlDetails"
412
+ "name": "SlAlert"
392
413
  }
393
414
  },
394
415
  {
395
- "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.",
396
- "name": "collapse-icon",
416
+ "description": "An icon to show in the alert. Works best with `<sl-icon>`.",
417
+ "name": "icon",
397
418
  "inheritedFrom": {
398
- "name": "SlDetails"
419
+ "name": "SlAlert"
399
420
  }
400
421
  }
401
422
  ]
@@ -406,56 +427,64 @@
406
427
  "kind": "js",
407
428
  "name": "default",
408
429
  "declaration": {
409
- "name": "NveAccordionItem",
410
- "module": "components/nve-accordion-item/nve-accordion-item.js"
430
+ "name": "NveAlert",
431
+ "module": "components/nve-alert/nve-alert.js"
411
432
  }
412
433
  }
413
434
  ]
414
435
  },
415
436
  {
416
437
  "kind": "javascript-module",
417
- "path": "components/nve-alert/nve-alert.js",
438
+ "path": "components/nve-accordion-item/nve-accordion-item.js",
418
439
  "declarations": [
419
440
  {
420
441
  "kind": "class",
421
- "description": "Brukes til å vise viktige beskjeder enten på en side eller som en enkel popup.\nHvis du trenger å vise en statisk varsling med mer informasjon, kan det hende at\nnve-message-card er et bedre valg.",
422
- "name": "NveAlert",
442
+ "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.",
443
+ "name": "NveAccordionItem",
423
444
  "members": [
424
445
  {
425
446
  "kind": "field",
426
- "name": "title",
447
+ "name": "testId",
427
448
  "type": {
428
- "text": "string"
449
+ "text": "string | undefined"
429
450
  },
430
- "default": "''",
431
- "description": "Tykk tekst, vises helt til venstre"
451
+ "default": "undefined"
432
452
  },
433
453
  {
434
454
  "kind": "field",
435
- "name": "text",
455
+ "name": "leftStroke",
436
456
  "type": {
437
- "text": "string"
457
+ "text": "boolean"
438
458
  },
439
- "default": "''",
440
- "description": "Tynnere beskrivelse tekst"
459
+ "default": "false",
460
+ "description": "tykk strek på venstre side"
461
+ },
462
+ {
463
+ "kind": "field",
464
+ "name": "variant",
465
+ "type": {
466
+ "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
467
+ },
468
+ "default": "'none'",
469
+ "description": "Setter farge på bakgrunn og tekst"
441
470
  },
442
471
  {
443
472
  "kind": "field",
444
- "name": "saturation",
473
+ "name": "border",
445
474
  "type": {
446
- "text": "'emphasized' | null"
475
+ "text": "boolean"
447
476
  },
448
- "default": "null",
449
- "description": "Bestemmer sterkere bakgrunnsfarge"
477
+ "default": "false",
478
+ "description": "Vis en ramme rundt hele komponenten"
450
479
  },
451
480
  {
452
481
  "kind": "field",
453
- "name": "leftStroke",
482
+ "name": "compact",
454
483
  "type": {
455
484
  "text": "boolean"
456
485
  },
457
486
  "default": "false",
458
- "description": "Ramme linje til venstre"
487
+ "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
459
488
  },
460
489
  {
461
490
  "kind": "field",
@@ -464,19 +493,7 @@
464
493
  "text": "array"
465
494
  },
466
495
  "static": true,
467
- "default": "[ SlAlert.styles, // we have to have this otherwise closable is not working styles, ]"
468
- },
469
- {
470
- "kind": "method",
471
- "name": "updated",
472
- "parameters": [
473
- {
474
- "name": "changedProperties",
475
- "type": {
476
- "text": "PropertyValues"
477
- }
478
- }
479
- ]
496
+ "default": "[SlDetails.styles, styles]"
480
497
  },
481
498
  {
482
499
  "kind": "field",
@@ -485,177 +502,167 @@
485
502
  "text": "object"
486
503
  },
487
504
  "static": true,
488
- "default": "{ 'sl-icon-button': SlIconButton }",
505
+ "default": "{ 'sl-icon': SlIcon }",
489
506
  "inheritedFrom": {
490
- "name": "SlAlert"
507
+ "name": "SlDetails"
491
508
  }
492
509
  },
493
510
  {
494
511
  "kind": "field",
495
- "name": "base",
512
+ "name": "details",
496
513
  "type": {
497
- "text": "HTMLElement"
514
+ "text": "HTMLDetailsElement"
498
515
  },
499
516
  "inheritedFrom": {
500
- "name": "SlAlert"
517
+ "name": "SlDetails"
501
518
  }
502
519
  },
503
520
  {
504
521
  "kind": "field",
505
- "name": "countdownElement",
522
+ "name": "header",
506
523
  "type": {
507
524
  "text": "HTMLElement"
508
525
  },
509
526
  "inheritedFrom": {
510
- "name": "SlAlert"
527
+ "name": "SlDetails"
511
528
  }
512
529
  },
513
530
  {
514
531
  "kind": "field",
515
- "name": "open",
532
+ "name": "body",
516
533
  "type": {
517
- "text": "boolean"
534
+ "text": "HTMLElement"
518
535
  },
519
- "default": "false",
520
- "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
521
- "attribute": "open",
522
- "reflects": true,
523
536
  "inheritedFrom": {
524
- "name": "SlAlert"
537
+ "name": "SlDetails"
525
538
  }
526
539
  },
527
540
  {
528
541
  "kind": "field",
529
- "name": "closable",
542
+ "name": "expandIconSlot",
530
543
  "type": {
531
- "text": "boolean"
544
+ "text": "HTMLSlotElement"
532
545
  },
533
- "default": "false",
534
- "description": "Enables a close button that allows the user to dismiss the alert.",
535
- "attribute": "closable",
536
- "reflects": true,
537
546
  "inheritedFrom": {
538
- "name": "SlAlert"
547
+ "name": "SlDetails"
539
548
  }
540
549
  },
541
550
  {
542
551
  "kind": "field",
543
- "name": "variant",
552
+ "name": "detailsObserver",
544
553
  "type": {
545
- "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
554
+ "text": "MutationObserver"
546
555
  },
547
- "default": "'primary'",
548
- "description": "The alert's theme variant.",
549
- "attribute": "variant",
550
- "reflects": true,
551
556
  "inheritedFrom": {
552
- "name": "SlAlert"
557
+ "name": "SlDetails"
553
558
  }
554
559
  },
555
560
  {
556
561
  "kind": "field",
557
- "name": "duration",
558
- "default": "Infinity",
559
- "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
560
- "attribute": "duration",
562
+ "name": "open",
563
+ "type": {
564
+ "text": "boolean"
565
+ },
566
+ "default": "false",
567
+ "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
568
+ "attribute": "open",
569
+ "reflects": true,
561
570
  "inheritedFrom": {
562
- "name": "SlAlert"
571
+ "name": "SlDetails"
563
572
  }
564
573
  },
565
574
  {
566
575
  "kind": "field",
567
- "name": "countdown",
576
+ "name": "summary",
568
577
  "type": {
569
- "text": "'rtl' | 'ltr' | undefined"
578
+ "text": "string"
570
579
  },
571
- "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
572
- "attribute": "countdown",
573
- "reflects": true,
580
+ "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
581
+ "attribute": "summary",
574
582
  "inheritedFrom": {
575
- "name": "SlAlert"
583
+ "name": "SlDetails"
576
584
  }
577
585
  },
578
586
  {
579
- "kind": "method",
580
- "name": "handleOpenChange",
587
+ "kind": "field",
588
+ "name": "disabled",
589
+ "type": {
590
+ "text": "boolean"
591
+ },
592
+ "default": "false",
593
+ "description": "Disables the details so it can't be toggled.",
594
+ "attribute": "disabled",
595
+ "reflects": true,
581
596
  "inheritedFrom": {
582
- "name": "SlAlert"
597
+ "name": "SlDetails"
583
598
  }
584
599
  },
585
600
  {
586
601
  "kind": "method",
587
- "name": "handleDurationChange",
602
+ "name": "handleOpenChange",
588
603
  "inheritedFrom": {
589
- "name": "SlAlert"
604
+ "name": "SlDetails"
590
605
  }
591
606
  },
592
607
  {
593
608
  "kind": "method",
594
609
  "name": "show",
595
- "description": "Shows the alert.",
610
+ "description": "Shows the details.",
596
611
  "inheritedFrom": {
597
- "name": "SlAlert"
612
+ "name": "SlDetails"
598
613
  }
599
614
  },
600
615
  {
601
616
  "kind": "method",
602
617
  "name": "hide",
603
- "description": "Hides the alert",
604
- "inheritedFrom": {
605
- "name": "SlAlert"
606
- }
607
- },
608
- {
609
- "kind": "method",
610
- "name": "toast",
611
- "description": "Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.",
618
+ "description": "Hides the details",
612
619
  "inheritedFrom": {
613
- "name": "SlAlert"
620
+ "name": "SlDetails"
614
621
  }
615
622
  }
616
623
  ],
617
624
  "superclass": {
618
- "name": "SlAlert",
619
- "package": "@shoelace-style/shoelace/dist/components/alert/alert.js"
625
+ "name": "SlDetails",
626
+ "package": "@shoelace-style/shoelace"
620
627
  },
621
- "tagNameWithoutPrefix": "alert",
622
- "tagName": "nve-alert",
628
+ "tagNameWithoutPrefix": "accordion-item",
629
+ "tagName": "nve-accordion-item",
623
630
  "customElement": true,
624
- "jsDoc": "/**\n * Brukes til å vise viktige beskjeder enten på en side eller som en enkel popup.\n * Hvis du trenger å vise en statisk varsling med mer informasjon, kan det hende at\n * nve-message-card er et bedre valg.\n */",
631
+ "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 */",
625
632
  "cssParts": [
626
633
  {
627
634
  "description": "The component's base wrapper.",
628
635
  "name": "base",
629
636
  "inheritedFrom": {
630
- "name": "SlAlert"
637
+ "name": "SlDetails"
631
638
  }
632
639
  },
633
640
  {
634
- "description": "The container that wraps the optional icon.",
635
- "name": "icon",
641
+ "description": "The header that wraps both the summary and the expand/collapse icon.",
642
+ "name": "header",
636
643
  "inheritedFrom": {
637
- "name": "SlAlert"
644
+ "name": "SlDetails"
638
645
  }
639
646
  },
640
647
  {
641
- "description": "The container that wraps the alert's main content.",
642
- "name": "message",
648
+ "description": "The container that wraps the summary.",
649
+ "name": "summary",
643
650
  "inheritedFrom": {
644
- "name": "SlAlert"
651
+ "name": "SlDetails"
645
652
  }
646
653
  },
647
654
  {
648
- "description": "The close button, an `<sl-icon-button>`.",
649
- "name": "close-button",
655
+ "description": "The container that wraps the expand/collapse icons.",
656
+ "name": "summary-icon",
650
657
  "inheritedFrom": {
651
- "name": "SlAlert"
658
+ "name": "SlDetails"
652
659
  }
653
660
  },
654
661
  {
655
- "description": "The close button's exported `base` part.",
656
- "name": "close-button__base",
662
+ "description": "The details content.",
663
+ "name": "content",
657
664
  "inheritedFrom": {
658
- "name": "SlAlert"
665
+ "name": "SlDetails"
659
666
  }
660
667
  }
661
668
  ],
@@ -666,108 +673,101 @@
666
673
  "text": "boolean"
667
674
  },
668
675
  "default": "false",
669
- "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
676
+ "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
670
677
  "fieldName": "open",
671
678
  "inheritedFrom": {
672
- "name": "SlAlert"
673
- }
674
- },
675
- {
676
- "name": "closable",
677
- "type": {
678
- "text": "boolean"
679
- },
680
- "default": "false",
681
- "description": "Enables a close button that allows the user to dismiss the alert.",
682
- "fieldName": "closable",
683
- "inheritedFrom": {
684
- "name": "SlAlert"
679
+ "name": "SlDetails"
685
680
  }
686
681
  },
687
682
  {
688
- "name": "variant",
683
+ "name": "summary",
689
684
  "type": {
690
- "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
685
+ "text": "string"
691
686
  },
692
- "default": "'primary'",
693
- "description": "The alert's theme variant.",
694
- "fieldName": "variant",
695
- "inheritedFrom": {
696
- "name": "SlAlert"
697
- }
698
- },
699
- {
700
- "name": "duration",
701
- "default": "Infinity",
702
- "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
703
- "fieldName": "duration",
687
+ "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
688
+ "fieldName": "summary",
704
689
  "inheritedFrom": {
705
- "name": "SlAlert"
690
+ "name": "SlDetails"
706
691
  }
707
692
  },
708
693
  {
709
- "name": "countdown",
694
+ "name": "disabled",
710
695
  "type": {
711
- "text": "'rtl' | 'ltr' | undefined"
696
+ "text": "boolean"
712
697
  },
713
- "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
714
- "fieldName": "countdown",
698
+ "default": "false",
699
+ "description": "Disables the details so it can't be toggled.",
700
+ "fieldName": "disabled",
715
701
  "inheritedFrom": {
716
- "name": "SlAlert"
702
+ "name": "SlDetails"
717
703
  }
718
704
  }
719
705
  ],
720
706
  "events": [
721
707
  {
722
- "description": "Emitted when the alert opens.",
708
+ "description": "Emitted when the details opens.",
723
709
  "name": "sl-show",
724
710
  "reactName": "onSlShow",
725
711
  "eventName": "SlShowEvent",
726
712
  "inheritedFrom": {
727
- "name": "SlAlert"
713
+ "name": "SlDetails"
728
714
  }
729
715
  },
730
716
  {
731
- "description": "Emitted after the alert opens and all animations are complete.",
717
+ "description": "Emitted after the details opens and all animations are complete.",
732
718
  "name": "sl-after-show",
733
719
  "reactName": "onSlAfterShow",
734
720
  "eventName": "SlAfterShowEvent",
735
721
  "inheritedFrom": {
736
- "name": "SlAlert"
722
+ "name": "SlDetails"
737
723
  }
738
724
  },
739
725
  {
740
- "description": "Emitted when the alert closes.",
726
+ "description": "Emitted when the details closes.",
741
727
  "name": "sl-hide",
742
728
  "reactName": "onSlHide",
743
729
  "eventName": "SlHideEvent",
744
730
  "inheritedFrom": {
745
- "name": "SlAlert"
731
+ "name": "SlDetails"
746
732
  }
747
733
  },
748
734
  {
749
- "description": "Emitted after the alert closes and all animations are complete.",
735
+ "description": "Emitted after the details closes and all animations are complete.",
750
736
  "name": "sl-after-hide",
751
737
  "reactName": "onSlAfterHide",
752
738
  "eventName": "SlAfterHideEvent",
753
739
  "inheritedFrom": {
754
- "name": "SlAlert"
740
+ "name": "SlDetails"
755
741
  }
756
742
  }
757
743
  ],
758
744
  "slots": [
759
745
  {
760
- "description": "The alert's main content.",
746
+ "description": "The details' main content.",
761
747
  "name": "",
762
748
  "inheritedFrom": {
763
- "name": "SlAlert"
749
+ "name": "SlDetails"
764
750
  }
765
751
  },
766
752
  {
767
- "description": "An icon to show in the alert. Works best with `<sl-icon>`.",
768
- "name": "icon",
753
+ "description": "The details' summary. Alternatively, you can use the `summary` attribute.",
754
+ "name": "summary",
769
755
  "inheritedFrom": {
770
- "name": "SlAlert"
756
+ "name": "SlDetails"
757
+ }
758
+ },
759
+ {
760
+ "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`.",
761
+ "name": "expand-icon",
762
+ "inheritedFrom": {
763
+ "name": "SlDetails"
764
+ }
765
+ },
766
+ {
767
+ "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.",
768
+ "name": "collapse-icon",
769
+ "inheritedFrom": {
770
+ "name": "SlDetails"
771
771
  }
772
772
  }
773
773
  ]
@@ -778,8 +778,8 @@
778
778
  "kind": "js",
779
779
  "name": "default",
780
780
  "declaration": {
781
- "name": "NveAlert",
782
- "module": "components/nve-alert/nve-alert.js"
781
+ "name": "NveAccordionItem",
782
+ "module": "components/nve-accordion-item/nve-accordion-item.js"
783
783
  }
784
784
  }
785
785
  ]
@@ -1330,7 +1330,7 @@
1330
1330
  "tagNameWithoutPrefix": "button",
1331
1331
  "tagName": "nve-button",
1332
1332
  "customElement": true,
1333
- "jsDoc": "/**\n * Selveste NVE-knappen.\n * Bruk href for å gjøre den om til en link.\n * Disse feltene skal ikke brukes:caret og pill\n * Circle attributte skal brukes kun når man viser bare et ikon.\n *\n */",
1333
+ "jsDoc": "/**\n * Selveste NVE-knappen.\n * Bruk href for å gjøre den om til en link.\n * Disse feltene skal ikke brukes:caret og pill\n * Circle attributte skal brukes kun når man viser bare et ikon.\n */",
1334
1334
  "cssParts": [
1335
1335
  {
1336
1336
  "description": "The component's base wrapper.",
@@ -12657,7 +12657,7 @@
12657
12657
  "package": {
12658
12658
  "name": "nve-designsystem",
12659
12659
  "description": "Designsystem for NVE",
12660
- "version": "1.3.1",
12660
+ "version": "1.4.3",
12661
12661
  "author": {
12662
12662
  "name": "NVE",
12663
12663
  "email": "nve@nve.no"
package/nve-designsystem.css ADDED
@@ -0,0 +1 @@
1
+ :root,:host,.sl-theme-light{color-scheme:light;--sl-color-gray-50: hsl(0 0% 97.5%);--sl-color-gray-100: hsl(240 4.8% 95.9%);--sl-color-gray-200: hsl(240 5.9% 90%);--sl-color-gray-300: hsl(240 4.9% 83.9%);--sl-color-gray-400: hsl(240 5% 64.9%);--sl-color-gray-500: hsl(240 3.8% 46.1%);--sl-color-gray-600: hsl(240 5.2% 33.9%);--sl-color-gray-700: hsl(240 5.3% 26.1%);--sl-color-gray-800: hsl(240 3.7% 15.9%);--sl-color-gray-900: hsl(240 5.9% 10%);--sl-color-gray-950: hsl(240 7.3% 8%);--sl-color-red-50: hsl(0 85.7% 97.3%);--sl-color-red-100: hsl(0 93.3% 94.1%);--sl-color-red-200: hsl(0 96.3% 89.4%);--sl-color-red-300: hsl(0 93.5% 81.8%);--sl-color-red-400: hsl(0 90.6% 70.8%);--sl-color-red-500: hsl(0 84.2% 60.2%);--sl-color-red-600: hsl(0 72.2% 50.6%);--sl-color-red-700: hsl(0 73.7% 41.8%);--sl-color-red-800: hsl(0 70% 35.3%);--sl-color-red-900: hsl(0 62.8% 30.6%);--sl-color-red-950: hsl(0 60% 19.6%);--sl-color-orange-50: hsl(33.3 100% 96.5%);--sl-color-orange-100: hsl(34.3 100% 91.8%);--sl-color-orange-200: hsl(32.1 97.7% 83.1%);--sl-color-orange-300: hsl(30.7 97.2% 72.4%);--sl-color-orange-400: hsl(27 96% 61%);--sl-color-orange-500: hsl(24.6 95% 53.1%);--sl-color-orange-600: hsl(20.5 90.2% 48.2%);--sl-color-orange-700: hsl(17.5 88.3% 40.4%);--sl-color-orange-800: hsl(15 79.1% 33.7%);--sl-color-orange-900: hsl(15.3 74.6% 27.8%);--sl-color-orange-950: hsl(15.2 69.1% 19%);--sl-color-amber-50: hsl(48 100% 96.1%);--sl-color-amber-100: hsl(48 96.5% 88.8%);--sl-color-amber-200: hsl(48 96.6% 76.7%);--sl-color-amber-300: hsl(45.9 96.7% 64.5%);--sl-color-amber-400: hsl(43.3 96.4% 56.3%);--sl-color-amber-500: hsl(37.7 92.1% 50.2%);--sl-color-amber-600: hsl(32.1 94.6% 43.7%);--sl-color-amber-700: hsl(26 90.5% 37.1%);--sl-color-amber-800: hsl(22.7 82.5% 31.4%);--sl-color-amber-900: hsl(21.7 77.8% 26.5%);--sl-color-amber-950: hsl(22.9 74.1% 16.7%);--sl-color-yellow-50: hsl(54.5 91.7% 95.3%);--sl-color-yellow-100: hsl(54.9 96.7% 88%);--sl-color-yellow-200: hsl(52.8 98.3% 76.9%);--sl-color-yellow-300: hsl(50.4 97.8% 63.5%);--sl-color-yellow-400: hsl(47.9 95.8% 53.1%);--sl-color-yellow-500: hsl(45.4 93.4% 47.5%);--sl-color-yellow-600: hsl(40.6 96.1% 40.4%);--sl-color-yellow-700: hsl(35.5 91.7% 32.9%);--sl-color-yellow-800: hsl(31.8 81% 28.8%);--sl-color-yellow-900: hsl(28.4 72.5% 25.7%);--sl-color-yellow-950: hsl(33.1 69% 13.9%);--sl-color-lime-50: hsl(78.3 92% 95.1%);--sl-color-lime-100: hsl(79.6 89.1% 89.2%);--sl-color-lime-200: hsl(80.9 88.5% 79.6%);--sl-color-lime-300: hsl(82 84.5% 67.1%);--sl-color-lime-400: hsl(82.7 78% 55.5%);--sl-color-lime-500: hsl(83.7 80.5% 44.3%);--sl-color-lime-600: hsl(84.8 85.2% 34.5%);--sl-color-lime-700: hsl(85.9 78.4% 27.3%);--sl-color-lime-800: hsl(86.3 69% 22.7%);--sl-color-lime-900: hsl(87.6 61.2% 20.2%);--sl-color-lime-950: hsl(86.5 60.6% 13.9%);--sl-color-green-50: hsl(138.5 76.5% 96.7%);--sl-color-green-100: hsl(140.6 84.2% 92.5%);--sl-color-green-200: hsl(141 78.9% 85.1%);--sl-color-green-300: hsl(141.7 76.6% 73.1%);--sl-color-green-400: hsl(141.9 69.2% 58%);--sl-color-green-500: hsl(142.1 70.6% 45.3%);--sl-color-green-600: hsl(142.1 76.2% 36.3%);--sl-color-green-700: hsl(142.4 71.8% 29.2%);--sl-color-green-800: hsl(142.8 64.2% 24.1%);--sl-color-green-900: hsl(143.8 61.2% 20.2%);--sl-color-green-950: hsl(144.3 60.7% 12%);--sl-color-emerald-50: hsl(151.8 81% 95.9%);--sl-color-emerald-100: hsl(149.3 80.4% 90%);--sl-color-emerald-200: hsl(152.4 76% 80.4%);--sl-color-emerald-300: hsl(156.2 71.6% 66.9%);--sl-color-emerald-400: hsl(158.1 64.4% 51.6%);--sl-color-emerald-500: hsl(160.1 84.1% 39.4%);--sl-color-emerald-600: hsl(161.4 93.5% 30.4%);--sl-color-emerald-700: hsl(162.9 93.5% 24.3%);--sl-color-emerald-800: hsl(163.1 88.1% 19.8%);--sl-color-emerald-900: hsl(164.2 85.7% 16.5%);--sl-color-emerald-950: hsl(164.3 87.5% 9.4%);--sl-color-teal-50: hsl(166.2 76.5% 96.7%);--sl-color-teal-100: hsl(167.2 85.5% 89.2%);--sl-color-teal-200: hsl(168.4 83.8% 78.2%);--sl-color-teal-300: hsl(170.6 76.9% 64.3%);--sl-color-teal-400: hsl(172.5 66% 50.4%);--sl-color-teal-500: hsl(173.4 80.4% 40%);--sl-color-teal-600: hsl(174.7 83.9% 31.6%);--sl-color-teal-700: hsl(175.3 77.4% 26.1%);--sl-color-teal-800: hsl(176.1 69.4% 21.8%);--sl-color-teal-900: hsl(175.9 60.8% 19%);--sl-color-teal-950: hsl(176.5 58.6% 11.4%);--sl-color-cyan-50: hsl(183.2 100% 96.3%);--sl-color-cyan-100: hsl(185.1 95.9% 90.4%);--sl-color-cyan-200: hsl(186.2 93.5% 81.8%);--sl-color-cyan-300: hsl(187 92.4% 69%);--sl-color-cyan-400: hsl(187.9 85.7% 53.3%);--sl-color-cyan-500: hsl(188.7 94.5% 42.7%);--sl-color-cyan-600: hsl(191.6 91.4% 36.5%);--sl-color-cyan-700: hsl(192.9 82.3% 31%);--sl-color-cyan-800: hsl(194.4 69.6% 27.1%);--sl-color-cyan-900: hsl(196.4 63.6% 23.7%);--sl-color-cyan-950: hsl(196.8 61% 16.1%);--sl-color-sky-50: hsl(204 100% 97.1%);--sl-color-sky-100: hsl(204 93.8% 93.7%);--sl-color-sky-200: hsl(200.6 94.4% 86.1%);--sl-color-sky-300: hsl(199.4 95.5% 73.9%);--sl-color-sky-400: hsl(198.4 93.2% 59.6%);--sl-color-sky-500: hsl(198.6 88.7% 48.4%);--sl-color-sky-600: hsl(200.4 98% 39.4%);--sl-color-sky-700: hsl(201.3 96.3% 32.2%);--sl-color-sky-800: hsl(201 90% 27.5%);--sl-color-sky-900: hsl(202 80.3% 23.9%);--sl-color-sky-950: hsl(202.3 73.8% 16.5%);--sl-color-blue-50: hsl(213.8 100% 96.9%);--sl-color-blue-100: hsl(214.3 94.6% 92.7%);--sl-color-blue-200: hsl(213.3 96.9% 87.3%);--sl-color-blue-300: hsl(211.7 96.4% 78.4%);--sl-color-blue-400: hsl(213.1 93.9% 67.8%);--sl-color-blue-500: hsl(217.2 91.2% 59.8%);--sl-color-blue-600: hsl(221.2 83.2% 53.3%);--sl-color-blue-700: hsl(224.3 76.3% 48%);--sl-color-blue-800: hsl(225.9 70.7% 40.2%);--sl-color-blue-900: hsl(224.4 64.3% 32.9%);--sl-color-blue-950: hsl(226.2 55.3% 18.4%);--sl-color-indigo-50: hsl(225.9 100% 96.7%);--sl-color-indigo-100: hsl(226.5 100% 93.9%);--sl-color-indigo-200: hsl(228 96.5% 88.8%);--sl-color-indigo-300: hsl(229.7 93.5% 81.8%);--sl-color-indigo-400: hsl(234.5 89.5% 73.9%);--sl-color-indigo-500: hsl(238.7 83.5% 66.7%);--sl-color-indigo-600: hsl(243.4 75.4% 58.6%);--sl-color-indigo-700: hsl(244.5 57.9% 50.6%);--sl-color-indigo-800: hsl(243.7 54.5% 41.4%);--sl-color-indigo-900: hsl(242.2 47.4% 34.3%);--sl-color-indigo-950: hsl(243.5 43.6% 22.9%);--sl-color-violet-50: hsl(250 100% 97.6%);--sl-color-violet-100: hsl(251.4 91.3% 95.5%);--sl-color-violet-200: hsl(250.5 95.2% 91.8%);--sl-color-violet-300: hsl(252.5 94.7% 85.1%);--sl-color-violet-400: hsl(255.1 91.7% 76.3%);--sl-color-violet-500: hsl(258.3 89.5% 66.3%);--sl-color-violet-600: hsl(262.1 83.3% 57.8%);--sl-color-violet-700: hsl(263.4 70% 50.4%);--sl-color-violet-800: hsl(263.4 69.3% 42.2%);--sl-color-violet-900: hsl(263.5 67.4% 34.9%);--sl-color-violet-950: hsl(265.1 61.5% 21.4%);--sl-color-purple-50: hsl(270 100% 98%);--sl-color-purple-100: hsl(268.7 100% 95.5%);--sl-color-purple-200: hsl(268.6 100% 91.8%);--sl-color-purple-300: hsl(269.2 97.4% 85.1%);--sl-color-purple-400: hsl(270 95.2% 75.3%);--sl-color-purple-500: hsl(270.7 91% 65.1%);--sl-color-purple-600: hsl(271.5 81.3% 55.9%);--sl-color-purple-700: hsl(272.1 71.7% 47.1%);--sl-color-purple-800: hsl(272.9 67.2% 39.4%);--sl-color-purple-900: hsl(273.6 65.6% 32%);--sl-color-purple-950: hsl(276 59.5% 16.5%);--sl-color-fuchsia-50: hsl(289.1 100% 97.8%);--sl-color-fuchsia-100: hsl(287 100% 95.5%);--sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%);--sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%);--sl-color-fuchsia-400: hsl(292 91.4% 72.5%);--sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%);--sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%);--sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%);--sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%);--sl-color-fuchsia-900: hsl(296.7 63.6% 28%);--sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%);--sl-color-pink-50: hsl(327.3 73.3% 97.1%);--sl-color-pink-100: hsl(325.7 77.8% 94.7%);--sl-color-pink-200: hsl(325.9 84.6% 89.8%);--sl-color-pink-300: hsl(327.4 87.1% 81.8%);--sl-color-pink-400: hsl(328.6 85.5% 70.2%);--sl-color-pink-500: hsl(330.4 81.2% 60.4%);--sl-color-pink-600: hsl(333.3 71.4% 50.6%);--sl-color-pink-700: hsl(335.1 77.6% 42%);--sl-color-pink-800: hsl(335.8 74.4% 35.3%);--sl-color-pink-900: hsl(335.9 69% 30.4%);--sl-color-pink-950: hsl(336.2 65.4% 15.9%);--sl-color-rose-50: hsl(355.7 100% 97.3%);--sl-color-rose-100: hsl(355.6 100% 94.7%);--sl-color-rose-200: hsl(352.7 96.1% 90%);--sl-color-rose-300: hsl(352.6 95.7% 81.8%);--sl-color-rose-400: hsl(351.3 94.5% 71.4%);--sl-color-rose-500: hsl(349.7 89.2% 60.2%);--sl-color-rose-600: hsl(346.8 77.2% 49.8%);--sl-color-rose-700: hsl(345.3 82.7% 40.8%);--sl-color-rose-800: hsl(343.4 79.7% 34.7%);--sl-color-rose-900: hsl(341.5 75.5% 30.4%);--sl-color-rose-950: hsl(341.3 70.1% 17.1%);--sl-color-primary-50: var(--sl-color-sky-50);--sl-color-primary-100: var(--sl-color-sky-100);--sl-color-primary-200: var(--sl-color-sky-200);--sl-color-primary-300: var(--sl-color-sky-300);--sl-color-primary-400: var(--sl-color-sky-400);--sl-color-primary-500: var(--sl-color-sky-500);--sl-color-primary-600: var(--sl-color-sky-600);--sl-color-primary-700: var(--sl-color-sky-700);--sl-color-primary-800: var(--sl-color-sky-800);--sl-color-primary-900: var(--sl-color-sky-900);--sl-color-primary-950: var(--sl-color-sky-950);--sl-color-success-50: var(--sl-color-green-50);--sl-color-success-100: var(--sl-color-green-100);--sl-color-success-200: var(--sl-color-green-200);--sl-color-success-300: var(--sl-color-green-300);--sl-color-success-400: var(--sl-color-green-400);--sl-color-success-500: var(--sl-color-green-500);--sl-color-success-600: var(--sl-color-green-600);--sl-color-success-700: var(--sl-color-green-700);--sl-color-success-800: var(--sl-color-green-800);--sl-color-success-900: var(--sl-color-green-900);--sl-color-success-950: var(--sl-color-green-950);--sl-color-warning-50: var(--sl-color-amber-50);--sl-color-warning-100: var(--sl-color-amber-100);--sl-color-warning-200: var(--sl-color-amber-200);--sl-color-warning-300: var(--sl-color-amber-300);--sl-color-warning-400: var(--sl-color-amber-400);--sl-color-warning-500: var(--sl-color-amber-500);--sl-color-warning-600: var(--sl-color-amber-600);--sl-color-warning-700: var(--sl-color-amber-700);--sl-color-warning-800: var(--sl-color-amber-800);--sl-color-warning-900: var(--sl-color-amber-900);--sl-color-warning-950: var(--sl-color-amber-950);--sl-color-danger-50: var(--sl-color-red-50);--sl-color-danger-100: var(--sl-color-red-100);--sl-color-danger-200: var(--sl-color-red-200);--sl-color-danger-300: var(--sl-color-red-300);--sl-color-danger-400: var(--sl-color-red-400);--sl-color-danger-500: var(--sl-color-red-500);--sl-color-danger-600: var(--sl-color-red-600);--sl-color-danger-700: var(--sl-color-red-700);--sl-color-danger-800: var(--sl-color-red-800);--sl-color-danger-900: var(--sl-color-red-900);--sl-color-danger-950: var(--sl-color-red-950);--sl-color-neutral-50: var(--sl-color-gray-50);--sl-color-neutral-100: var(--sl-color-gray-100);--sl-color-neutral-200: var(--sl-color-gray-200);--sl-color-neutral-300: var(--sl-color-gray-300);--sl-color-neutral-400: var(--sl-color-gray-400);--sl-color-neutral-500: var(--sl-color-gray-500);--sl-color-neutral-600: var(--sl-color-gray-600);--sl-color-neutral-700: var(--sl-color-gray-700);--sl-color-neutral-800: var(--sl-color-gray-800);--sl-color-neutral-900: var(--sl-color-gray-900);--sl-color-neutral-950: var(--sl-color-gray-950);--sl-color-neutral-0: hsl(0, 0%, 100%);--sl-color-neutral-1000: hsl(0, 0%, 0%);--sl-border-radius-small: .1875rem;--sl-border-radius-medium: .25rem;--sl-border-radius-large: .5rem;--sl-border-radius-x-large: 1rem;--sl-border-radius-circle: 50%;--sl-border-radius-pill: 9999px;--sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);--sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);--sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);--sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);--sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);--sl-spacing-3x-small: .125rem;--sl-spacing-2x-small: .25rem;--sl-spacing-x-small: .5rem;--sl-spacing-small: .75rem;--sl-spacing-medium: 1rem;--sl-spacing-large: 1.25rem;--sl-spacing-x-large: 1.75rem;--sl-spacing-2x-large: 2.25rem;--sl-spacing-3x-large: 3rem;--sl-spacing-4x-large: 4.5rem;--sl-transition-x-slow: 1s;--sl-transition-slow: .5s;--sl-transition-medium: .25s;--sl-transition-fast: .15s;--sl-transition-x-fast: 50ms;--sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;--sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--sl-font-serif: Georgia, "Times New Roman", serif;--sl-font-size-2x-small: .625rem;--sl-font-size-x-small: .75rem;--sl-font-size-small: .875rem;--sl-font-size-medium: 1rem;--sl-font-size-large: 1.25rem;--sl-font-size-x-large: 1.5rem;--sl-font-size-2x-large: 2.25rem;--sl-font-size-3x-large: 3rem;--sl-font-size-4x-large: 4.5rem;--sl-font-weight-light: 300;--sl-font-weight-normal: 400;--sl-font-weight-semibold: 500;--sl-font-weight-bold: 700;--sl-letter-spacing-denser: -.03em;--sl-letter-spacing-dense: -.015em;--sl-letter-spacing-normal: normal;--sl-letter-spacing-loose: .075em;--sl-letter-spacing-looser: .15em;--sl-line-height-denser: 1;--sl-line-height-dense: 1.4;--sl-line-height-normal: 1.8;--sl-line-height-loose: 2.2;--sl-line-height-looser: 2.6;--sl-focus-ring-color: var(--sl-color-primary-600);--sl-focus-ring-style: solid;--sl-focus-ring-width: 3px;--sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);--sl-focus-ring-offset: 1px;--sl-button-font-size-small: var(--sl-font-size-x-small);--sl-button-font-size-medium: var(--sl-font-size-small);--sl-button-font-size-large: var(--sl-font-size-medium);--sl-input-height-small: 1.875rem;--sl-input-height-medium: 2.5rem;--sl-input-height-large: 3.125rem;--sl-input-background-color: var(--sl-color-neutral-0);--sl-input-background-color-hover: var(--sl-input-background-color);--sl-input-background-color-focus: var(--sl-input-background-color);--sl-input-background-color-disabled: var(--sl-color-neutral-100);--sl-input-border-color: var(--sl-color-neutral-300);--sl-input-border-color-hover: var(--sl-color-neutral-400);--sl-input-border-color-focus: var(--sl-color-primary-500);--sl-input-border-color-disabled: var(--sl-color-neutral-300);--sl-input-border-width: 1px;--sl-input-required-content: "*";--sl-input-required-content-offset: -2px;--sl-input-required-content-color: var(--sl-input-label-color);--sl-input-border-radius-small: var(--sl-border-radius-medium);--sl-input-border-radius-medium: var(--sl-border-radius-medium);--sl-input-border-radius-large: var(--sl-border-radius-medium);--sl-input-font-family: var(--sl-font-sans);--sl-input-font-weight: var(--sl-font-weight-normal);--sl-input-font-size-small: var(--sl-font-size-small);--sl-input-font-size-medium: var(--sl-font-size-medium);--sl-input-font-size-large: var(--sl-font-size-large);--sl-input-letter-spacing: var(--sl-letter-spacing-normal);--sl-input-color: var(--sl-color-neutral-700);--sl-input-color-hover: var(--sl-color-neutral-700);--sl-input-color-focus: var(--sl-color-neutral-700);--sl-input-color-disabled: var(--sl-color-neutral-900);--sl-input-icon-color: var(--sl-color-neutral-500);--sl-input-icon-color-hover: var(--sl-color-neutral-600);--sl-input-icon-color-focus: var(--sl-color-neutral-600);--sl-input-placeholder-color: var(--sl-color-neutral-500);--sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);--sl-input-spacing-small: var(--sl-spacing-small);--sl-input-spacing-medium: var(--sl-spacing-medium);--sl-input-spacing-large: var(--sl-spacing-large);--sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);--sl-input-focus-ring-offset: 0;--sl-input-filled-background-color: var(--sl-color-neutral-100);--sl-input-filled-background-color-hover: var(--sl-color-neutral-100);--sl-input-filled-background-color-focus: var(--sl-color-neutral-100);--sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);--sl-input-filled-color: var(--sl-color-neutral-800);--sl-input-filled-color-hover: var(--sl-color-neutral-800);--sl-input-filled-color-focus: var(--sl-color-neutral-700);--sl-input-filled-color-disabled: var(--sl-color-neutral-800);--sl-input-label-font-size-small: var(--sl-font-size-small);--sl-input-label-font-size-medium: var(--sl-font-size-medium);--sl-input-label-font-size-large: var(--sl-font-size-large);--sl-input-label-color: inherit;--sl-input-help-text-font-size-small: var(--sl-font-size-x-small);--sl-input-help-text-font-size-medium: var(--sl-font-size-small);--sl-input-help-text-font-size-large: var(--sl-font-size-medium);--sl-input-help-text-color: var(--sl-color-neutral-500);--sl-toggle-size-small: .875rem;--sl-toggle-size-medium: 1.125rem;--sl-toggle-size-large: 1.375rem;--sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);--sl-panel-background-color: var(--sl-color-neutral-0);--sl-panel-border-color: var(--sl-color-neutral-200);--sl-panel-border-width: 1px;--sl-tooltip-border-radius: var(--sl-border-radius-medium);--sl-tooltip-background-color: var(--sl-color-neutral-800);--sl-tooltip-color: var(--sl-color-neutral-0);--sl-tooltip-font-family: var(--sl-font-sans);--sl-tooltip-font-weight: var(--sl-font-weight-normal);--sl-tooltip-font-size: var(--sl-font-size-small);--sl-tooltip-line-height: var(--sl-line-height-dense);--sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);--sl-tooltip-arrow-size: 6px;--sl-z-index-drawer: 700;--sl-z-index-dialog: 800;--sl-z-index-dropdown: 900;--sl-z-index-toast: 950;--sl-z-index-tooltip: 1000}@supports (scrollbar-gutter: stable){.sl-scroll-lock{scrollbar-gutter:var(--sl-scroll-lock-gutter)!important}.sl-scroll-lock body{overflow:hidden!important}}@supports not (scrollbar-gutter: stable){.sl-scroll-lock body{padding-right:var(--sl-scroll-lock-size)!important;overflow:hidden!important}}.sl-toast-stack{position:fixed;top:0;inset-inline-end:0;z-index:var(--sl-z-index-toast);width:28rem;max-width:100%;max-height:100%;overflow:auto}.sl-toast-stack sl-alert{margin:var(--sl-spacing-medium)}.sl-toast-stack sl-alert::part(base){box-shadow:var(--sl-shadow-large)}
package/nve-designsystem.d.ts CHANGED
@@ -1,5 +1,3 @@
1
- /** Alle komponenter som er tilgjengelige, i alfabetisk rekkefølge. */
2
- /** Denne filen blir genererert av npm run add-component */
3
1
  export { default as NveAccordion } from './components/nve-accordion/nve-accordion.component';
4
2
  export { default as NveAccordionItem } from './components/nve-accordion-item/nve-accordion-item.component';
5
3
  export { default as NveAlert } from './components/nve-alert/nve-alert.component';
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  },
8
8
  "license": "MIT",
9
9
  "homepage": "https://github.com/NVE/Designsystem/",
10
- "version": "1.4.0",
10
+ "version": "1.4.4",
11
11
  "customElements": "custom-elements.json",
12
12
  "exports": {
13
13
  ".": {