nve-designsystem 3.14.0 → 3.15.0

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 (8) hide show
  1. package/components/nve-icon/offline-icons.js +1 -0
  2. package/components/nve-link-card/nve-link-card.component.d.ts +5 -2
  3. package/components/nve-link-card/nve-link-card.component.js +3 -3
  4. package/components/nve-link-card/nve-link-card.styles.js +66 -61
  5. package/custom-elements.json +474 -480
  6. package/package.json +1 -1
  7. package/vscode.css-custom-data.json +8 -4
  8. package/vscode.html-custom-data.json +50 -55
package/components/nve-icon/offline-icons.js CHANGED
@@ -9,6 +9,7 @@ var e = {
9
9
  error: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"#000000\"><path d=\"M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>",
10
10
  info: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"#000000\"><path d=\"M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>",
11
11
  lock: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"#000000\"><path d=\"M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z\"/></svg>",
12
+ mail: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#000000\"><path d=\"M80-160v-640h800v640H80Zm400-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z\"/></svg>",
12
13
  open_in_new: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"#000000\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z\"/></svg>",
13
14
  warning: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"#000000\"><path d=\"m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z\"/></svg>"
14
15
  };
package/components/nve-link-card/nve-link-card.component.d.ts CHANGED
@@ -4,8 +4,13 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
4
4
  * Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.
5
5
  * For å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.
6
6
  *
7
+ * Ikonet lengst til venstre i kortet kan settes med <slot name="icon"> og kan være hvilket som helst element.
8
+ * Ikonet til høyre styres av clickAction-propen og vises automatisk.
9
+ *
7
10
  * @csspart link-card Topp-element
8
11
  * @csspart label Overskriften
12
+ * @csspart additional-text Tilleggsbeskrivelse under overskriften
13
+ * @slot icon Ikon til venstre i kortet (valgfritt)
9
14
  */
10
15
  export default class NveLinkCard extends LitElement implements INveComponent {
11
16
  /** Tittel som vises øverst på kortet */
@@ -22,8 +27,6 @@ export default class NveLinkCard extends LitElement implements INveComponent {
22
27
  clickAction: 'internal' | 'download' | 'external' | 'mail';
23
28
  /** Lenken som brukes for handlinger som intern/ekstern navigering eller e-post */
24
29
  href: string | undefined;
25
- /** Brukes for å legge :visited style når lenken kommer fra eksternt rammeverk som f.eks RouterLink i Vue */
26
- visited: boolean;
27
30
  static styles: import('lit').CSSResult[];
28
31
  /**
29
32
  * Returnerer ikonnavnet som vises på kortet basert på clickAction.
package/components/nve-link-card/nve-link-card.component.js CHANGED
@@ -8,7 +8,7 @@ import c from "./nve-link-card.styles.js";
8
8
  //#region src/components/nve-link-card/nve-link-card.component.ts
9
9
  var l = class extends n {
10
10
  constructor(...e) {
11
- super(...e), this.label = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0, this.visited = !1;
11
+ super(...e), this.label = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0;
12
12
  }
13
13
  static {
14
14
  this.styles = [c];
@@ -24,6 +24,7 @@ var l = class extends n {
24
24
  }
25
25
  renderContent() {
26
26
  return t`
27
+ <slot name="icon"></slot>
27
28
  <div class="link-card__content">
28
29
  <div part="label" class="link-card__label">${this.label}</div>
29
30
  ${this.additionalText ? t`<div part="additional-text" class="link-card__additional-text">${this.additionalText}</div>` : e}
@@ -37,7 +38,6 @@ var l = class extends n {
37
38
  testId="${s(this.testId)}"
38
39
  class=${o({
39
40
  "link-card": !0,
40
- "link-card--visited": this.visited,
41
41
  [`link-card--${this.size}`]: !0,
42
42
  [`link-card--${this.variant}`]: !0
43
43
  })}
@@ -56,7 +56,7 @@ var l = class extends n {
56
56
  `;
57
57
  }
58
58
  };
59
- a([r()], l.prototype, "label", void 0), a([r()], l.prototype, "additionalText", void 0), a([r()], l.prototype, "size", void 0), a([r()], l.prototype, "variant", void 0), a([r()], l.prototype, "testId", void 0), a([r({ type: String })], l.prototype, "clickAction", void 0), a([r()], l.prototype, "href", void 0), a([r({ type: Boolean })], l.prototype, "visited", void 0), l = a([i("nve-link-card")], l);
59
+ a([r()], l.prototype, "label", void 0), a([r()], l.prototype, "additionalText", void 0), a([r()], l.prototype, "size", void 0), a([r()], l.prototype, "variant", void 0), a([r()], l.prototype, "testId", void 0), a([r({ type: String })], l.prototype, "clickAction", void 0), a([r()], l.prototype, "href", void 0), l = a([i("nve-link-card")], l);
60
60
  var u = l;
61
61
  //#endregion
62
62
  export { u as default };
package/components/nve-link-card/nve-link-card.styles.js CHANGED
@@ -2,125 +2,130 @@ import { u as e } from "../../chunks/lit.js";
2
2
  //#region src/components/nve-link-card/nve-link-card.styles.ts
3
3
  var t = e`
4
4
  .link-card {
5
- border-radius: var(--border-radius-small);
6
- padding: var(--spacing-medium, 16px) var(--spacing-large, 24px);
7
- transition: background 0.3s ease;
8
- border: 2px solid transparent;
9
5
  display: flex;
10
6
  flex-direction: row;
11
7
  justify-content: space-between;
12
8
  align-items: center;
9
+ padding: var(--spacing-medium) var(--spacing-large);
10
+ gap: var(--spacing-medium);
11
+ border-radius: var(--border-radius-small);
12
+ border: var(--border-width-stronger) solid transparent;
13
+ background: var(--color-neutrals-background-primary);
13
14
  cursor: pointer;
14
15
  text-decoration: none;
16
+ transition:
17
+ background 0.3s ease,
18
+ border-color 0.3s ease;
15
19
  }
16
20
 
17
- /*bruker color på a, ikke på link-card fordi link-card overskriver standard lenke farge i remmeverker som next js som har sin egen
18
- wrappar rundt lenke og som støtter :visited*/
21
+ /* Setter farge på <a> for å sikre riktig lenkefarge uansett rammeverk eller browser */
19
22
  a {
20
- color: var(--color-neutrals-foreground-primary, #0d0d0e);
23
+ color: var(--color-neutrals-foreground-primary);
21
24
  }
22
25
 
23
- .link-card--visited,
24
- a:visited {
25
- color: var(--color-interactive-links-visited);
26
+ .link-card:hover {
27
+ border-color: var(--color-neutrals-border-subtle);
28
+ background: var(--color-neutrals-background-primary);
26
29
  }
27
30
 
28
- .link-card:focus {
29
- outline: var(--color-interactive-primary-foreground-border-focus, #008ffb) solid 2px;
31
+ .link-card:active {
32
+ border-color: var(--color-neutrals-border-mute);
30
33
  }
31
34
 
32
- .link-card:hover .link-card__label {
33
- text-decoration: underline;
34
- }
35
-
36
- .link-card:active {
37
- outline: var(--color-interactive-primary-foreground-border-focus, #008ffb) solid 2px;
35
+ .link-card:focus-visible {
36
+ outline: var(--color-interactive-primary-border-focus) solid 2px;
38
37
  }
39
38
 
40
39
  .link-card--small {
41
- padding: var(--spacing-small) var(--spacing-medium) var(--spacing-small) var(--spacing-medium);
40
+ padding: var(--spacing-small) var(--spacing-medium);
41
+ gap: var(--spacing-x-small);
42
42
  min-height: var(--sizing-2x-small);
43
43
  }
44
44
 
45
45
  .link-card--medium {
46
- padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-large);
46
+ padding: var(--spacing-medium) var(--spacing-large);
47
47
  min-height: var(--sizing-2x-small);
48
48
  }
49
49
 
50
50
  .link-card--large {
51
- padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-large);
51
+ padding: var(--spacing-large);
52
52
  min-height: var(--sizing-x-small);
53
53
  }
54
54
 
55
- .link-card__label {
56
- font-size: 1rem;
57
- font-family: 'Source Sans 3';
58
- font-style: normal;
59
- font-weight: 400;
60
- line-height: 150%;
61
- }
62
-
63
- .link-card--visited .link-card__label,
64
- .link-card:visited .link-card__label {
65
- color: var(--color-interactive-links-visited);
55
+ .link-card--primary {
56
+ background: var(--color-neutrals-background-primary);
66
57
  }
67
58
 
68
- .link-card__label--small {
69
- font-size: 0.875rem;
59
+ .link-card--contrast {
60
+ background: var(--color-neutrals-background-primary-contrast);
70
61
  }
71
62
 
72
- .link-card__label--large {
73
- font-size: 1.125rem;
63
+ .link-card--secondary {
64
+ background: var(--color-neutrals-background-secondary);
74
65
  }
75
66
 
76
67
  .link-card__content {
77
68
  display: flex;
78
69
  flex-direction: column;
79
- justify-content: space-between;
70
+ justify-content: center;
71
+ flex: 1;
80
72
  }
81
73
 
82
- .link-card__additional-text {
83
- color: inherit;
84
- font-family: 'Source Sans 3';
85
- font-style: normal;
86
- font-weight: 400;
87
- line-height: 120%;
88
- padding-top: 4px;
89
- font-size: 0.875rem;
74
+ .link-card__label {
75
+ font: var(--typography-heading-x-small);
76
+ color: var(--color-neutrals-foreground-primary);
77
+ transition:
78
+ color 0.3s ease,
79
+ text-decoration-thickness 0.3s,
80
+ text-underline-offset 0.3s;
90
81
  }
91
82
 
92
- .link-card--visited .link-card__additional-text,
93
- a:visited .link-card__additional-text {
94
- color: var(--color-interactive-links-visited);
83
+ .link-card:hover .link-card__label {
84
+ color: var(--color-brand-foreground-primary);
85
+ text-decoration: underline;
86
+ text-decoration-style: solid;
87
+ text-decoration-thickness: 5%;
88
+ text-underline-offset: 16%;
95
89
  }
96
90
 
97
- .link-card--primary {
98
- background: var(--color-neutrals-background-primary, #fff);
91
+ .link-card:active .link-card__label {
92
+ text-decoration-thickness: 10%;
93
+ text-underline-offset: 16%;
99
94
  }
100
95
 
101
- .link-card--primary:hover {
102
- background: var(--color-neutrals-background-secondary, #e4e5e7);
96
+ .link-card--small .link-card__label {
97
+ font: var(--typography-label-small);
103
98
  }
104
99
 
105
- .link-card--contrast {
106
- background: var(--color-neutrals-background-primary-contrast, #f7f7f8);
100
+ .link-card--large .link-card__label {
101
+ font: var(--typography-heading-x-small);
107
102
  }
108
103
 
109
- .link-card--contrast:hover {
110
- background: var(--color-neutrals-background-secondary, #e4e5e7);
104
+ .link-card__additional-text {
105
+ color: var(--color-neutrals-foreground-subtle);
106
+ font: var(--typography-body-compact-x-small-compact);
107
+ overflow: hidden;
108
+ display: -webkit-box;
109
+ -webkit-line-clamp: 1;
110
+ -webkit-box-orient: vertical;
111
+ text-overflow: ellipsis;
111
112
  }
112
113
 
113
- .link-card--secondary {
114
- background: var(--color-neutrals-background-secondary, #e4e5e7);
114
+ .link-card--small .link-card__additional-text {
115
+ font: var(--typography-body-compact-x-small-compact);
115
116
  }
116
117
 
117
- .link-card--secondary:hover {
118
- border: 2px solid var(--color-neutrals-foreground-primary, #0d0d0e);
118
+ .link-card--large .link-card__additional-text {
119
+ font: var(--typography-body-compact-small-compact);
120
+ }
121
+
122
+ .link-card ::slotted([slot='icon']) {
123
+ --icon-size: 24px;
119
124
  }
120
125
 
121
126
  nve-icon {
122
127
  --icon-size: 24px;
123
- color: var(--color-neutrals-foreground-primary);
128
+ color: var(--color-brand-foreground-primary);
124
129
  }
125
130
  `;
126
131
  //#endregion