@navikt/ds-css 4.1.7 → 4.3.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 (22) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/chat.css +30 -16
  3. package/dist/component/chat.css +30 -16
  4. package/dist/component/chat.min.css +1 -1
  5. package/dist/component/expansioncard.css +6 -3
  6. package/dist/component/expansioncard.min.css +1 -1
  7. package/dist/component/helptext.css +1 -1
  8. package/dist/component/helptext.min.css +1 -1
  9. package/dist/component/index.css +36 -20
  10. package/dist/component/index.min.css +2 -2
  11. package/dist/component/popover.css +1 -0
  12. package/dist/component/popover.min.css +1 -1
  13. package/dist/components.css +35 -19
  14. package/dist/components.min.css +2 -2
  15. package/dist/global/tokens.css +1 -1
  16. package/dist/index.css +36 -20
  17. package/dist/index.min.css +2 -2
  18. package/expansioncard.css +6 -3
  19. package/help-text.css +1 -1
  20. package/package.json +2 -2
  21. package/popover.css +1 -0
  22. package/tokens.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 4.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#2069](https://github.com/navikt/aksel/pull/2069) [`99c08b8e4`](https://github.com/navikt/aksel/commit/99c08b8e4ab33acd20a21719986452652ffe3c57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Popover og Helptext har nå luft mot siden av skjerm på mindre flater
8
+
9
+ ### Patch Changes
10
+
11
+ - [#2067](https://github.com/navikt/aksel/pull/2067) [`d39ed906c`](https://github.com/navikt/aksel/commit/d39ed906c61149ac823ebab2e8974a105e592163) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Nested ExpansionCard fikk styling fra parent
12
+
13
+ ## 4.2.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [#2048](https://github.com/navikt/aksel/pull/2048) [`b1625ba38`](https://github.com/navikt/aksel/commit/b1625ba3882b430d678d0623922d7fb56aa724b3) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Oppdatert Chat
18
+
19
+ - :sparkles: Ny prop `size` som kan settes til "small" for en mer kompakt layout
20
+ - :sparkles: Ny prop `variant` som erstatter `backgroundColor` og `avatarBgColor`
21
+ - :sparkles: `avatar` er nå valgfritt
22
+ - :wheelchair: Forbedret UU
23
+ - :lipstick: Oppdatert utseende
24
+
3
25
  ## 4.1.7
4
26
 
5
27
  ### Patch Changes
package/chat.css CHANGED
@@ -1,14 +1,12 @@
1
1
  .navds-chat {
2
2
  display: flex;
3
3
  align-items: flex-end;
4
- gap: var(--a-spacing-4);
5
- padding-right: var(--a-spacing-16);
4
+ gap: var(--a-spacing-3);
5
+ max-width: 40.75rem;
6
6
  }
7
7
 
8
8
  .navds-chat--right {
9
9
  flex-direction: row-reverse;
10
- padding-right: 0;
11
- padding-left: var(--a-spacing-16);
12
10
  }
13
11
 
14
12
  .navds-chat__bubble-wrapper {
@@ -26,15 +24,19 @@
26
24
 
27
25
  .navds-chat__avatar {
28
26
  align-items: center;
29
- background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
30
- color: var(--ac-chat-avatar-color, var(--a-text-default));
27
+ box-shadow: var(--a-shadow-xsmall);
28
+ background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
29
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
31
30
  border-radius: var(--a-border-radius-full);
31
+ color: var(--ac-chat-avatar-color, var(--a-text-default));
32
32
  display: flex;
33
33
  flex-shrink: 0;
34
34
  justify-content: center;
35
35
  overflow: hidden;
36
- height: 3rem;
37
- width: 3rem;
36
+ height: 2.5rem;
37
+ width: 2.5rem;
38
+ font-size: 1.06rem;
39
+ letter-spacing: 0.024rem;
38
40
  }
39
41
 
40
42
  .navds-chat__avatar svg {
@@ -44,11 +46,11 @@
44
46
  }
45
47
 
46
48
  .navds-chat__bubble {
47
- padding: 1rem;
48
- box-shadow: var(--a-shadow-small);
49
+ padding: var(--a-spacing-4);
50
+ box-shadow: var(--a-shadow-xsmall);
49
51
  width: fit-content;
50
- max-width: 37.5rem;
51
- background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
52
+ background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
53
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
52
54
  border-radius: var(--a-border-radius-xlarge);
53
55
  border-bottom-left-radius: 2px;
54
56
  display: flex;
@@ -61,11 +63,27 @@
61
63
  border-bottom-right-radius: 2px;
62
64
  }
63
65
 
66
+ .navds-chat--small .navds-chat__bubble {
67
+ padding: var(--a-spacing-3);
68
+ }
69
+
70
+ .navds-chat--info .navds-chat__bubble,
71
+ .navds-chat--info .navds-chat__avatar {
72
+ background-color: var(--a-surface-info-subtle);
73
+ }
74
+
75
+ .navds-chat--neutral .navds-chat__bubble,
76
+ .navds-chat--neutral .navds-chat__avatar {
77
+ background-color: var(--a-surface-default);
78
+ }
79
+
64
80
  .navds-chat__top-text {
65
81
  color: var(--ac-chat-top-text, var(--a-text-default));
66
82
  display: flex;
67
83
  gap: var(--a-spacing-2);
68
84
  align-items: baseline;
85
+ font-weight: normal;
86
+ margin: 0;
69
87
  }
70
88
 
71
89
  .navds-chat--right .navds-chat__top-text {
@@ -87,7 +105,3 @@
87
105
  .navds-chat--right .navds-chat__top-text--left {
88
106
  align-self: flex-start;
89
107
  }
90
-
91
- .navds-chat__name {
92
- font-weight: var(--a-font-weight-bold);
93
- }
package/dist/component/chat.css CHANGED
@@ -1,14 +1,12 @@
1
1
  .navds-chat {
2
2
  display: flex;
3
3
  align-items: flex-end;
4
- gap: var(--a-spacing-4);
5
- padding-right: var(--a-spacing-16);
4
+ gap: var(--a-spacing-3);
5
+ max-width: 40.75rem;
6
6
  }
7
7
 
8
8
  .navds-chat--right {
9
9
  flex-direction: row-reverse;
10
- padding-right: 0;
11
- padding-left: var(--a-spacing-16);
12
10
  }
13
11
 
14
12
  .navds-chat__bubble-wrapper {
@@ -26,15 +24,19 @@
26
24
 
27
25
  .navds-chat__avatar {
28
26
  align-items: center;
29
- background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
30
- color: var(--ac-chat-avatar-color, var(--a-text-default));
27
+ box-shadow: var(--a-shadow-xsmall);
28
+ background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
29
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
31
30
  border-radius: var(--a-border-radius-full);
31
+ color: var(--ac-chat-avatar-color, var(--a-text-default));
32
32
  display: flex;
33
33
  flex-shrink: 0;
34
34
  justify-content: center;
35
35
  overflow: hidden;
36
- height: 3rem;
37
- width: 3rem;
36
+ height: 2.5rem;
37
+ width: 2.5rem;
38
+ font-size: 1.06rem;
39
+ letter-spacing: 0.024rem;
38
40
  }
39
41
 
40
42
  .navds-chat__avatar svg {
@@ -44,11 +46,11 @@
44
46
  }
45
47
 
46
48
  .navds-chat__bubble {
47
- padding: 1rem;
48
- box-shadow: var(--a-shadow-small);
49
+ padding: var(--a-spacing-4);
50
+ box-shadow: var(--a-shadow-xsmall);
49
51
  width: fit-content;
50
- max-width: 37.5rem;
51
- background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
52
+ background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
53
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
52
54
  border-radius: var(--a-border-radius-xlarge);
53
55
  border-bottom-left-radius: 2px;
54
56
  display: flex;
@@ -61,11 +63,27 @@
61
63
  border-bottom-right-radius: 2px;
62
64
  }
63
65
 
66
+ .navds-chat--small .navds-chat__bubble {
67
+ padding: var(--a-spacing-3);
68
+ }
69
+
70
+ .navds-chat--info .navds-chat__bubble,
71
+ .navds-chat--info .navds-chat__avatar {
72
+ background-color: var(--a-surface-info-subtle);
73
+ }
74
+
75
+ .navds-chat--neutral .navds-chat__bubble,
76
+ .navds-chat--neutral .navds-chat__avatar {
77
+ background-color: var(--a-surface-default);
78
+ }
79
+
64
80
  .navds-chat__top-text {
65
81
  color: var(--ac-chat-top-text, var(--a-text-default));
66
82
  display: flex;
67
83
  gap: var(--a-spacing-2);
68
84
  align-items: baseline;
85
+ font-weight: normal;
86
+ margin: 0;
69
87
  }
70
88
 
71
89
  .navds-chat--right .navds-chat__top-text {
@@ -87,7 +105,3 @@
87
105
  .navds-chat--right .navds-chat__top-text--left {
88
106
  align-self: flex-start;
89
107
  }
90
-
91
- .navds-chat__name {
92
- font-weight: var(--a-font-weight-bold);
93
- }
package/dist/component/chat.min.css CHANGED
@@ -1 +1 @@
1
- .navds-chat{align-items:flex-end;display:flex;gap:var(--a-spacing-4);padding-right:var(--a-spacing-16)}.navds-chat--right{flex-direction:row-reverse;padding-left:var(--a-spacing-16);padding-right:0}.navds-chat__bubble-wrapper{display:flex;flex-direction:column;gap:var(--a-spacing-3);list-style:none;margin:0;padding:0}.navds-chat--right .navds-chat__bubble-wrapper{align-items:flex-end}.navds-chat__avatar{align-items:center;background:var(--ac-chat-avatar-bg,var(--a-bg-subtle));border-radius:var(--a-border-radius-full);color:var(--ac-chat-avatar-color,var(--a-text-default));display:flex;flex-shrink:0;height:3rem;justify-content:center;overflow:hidden;width:3rem}.navds-chat__avatar svg{align-self:center;height:100%;width:100%}.navds-chat__bubble{background-color:var(--ac-chat-bubble-bg,var(--a-bg-subtle));border-radius:var(--a-border-radius-xlarge);border-bottom-left-radius:2px;box-shadow:var(--a-shadow-small);display:flex;flex-direction:column;gap:var(--a-spacing-2);max-width:37.5rem;padding:1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-chat--right .navds-chat__bubble{border-radius:var(--a-border-radius-xlarge);border-bottom-right-radius:2px}.navds-chat__top-text{align-items:baseline;color:var(--ac-chat-top-text,var(--a-text-default));display:flex;gap:var(--a-spacing-2)}.navds-chat--right .navds-chat__top-text{align-self:flex-end}.navds-chat--top-text-left .navds-chat__top-text{align-self:flex-start}.navds-chat--left .navds-chat__top-text--right,.navds-chat--top-text-right .navds-chat__top-text{align-self:flex-end}.navds-chat--right .navds-chat__top-text--left{align-self:flex-start}.navds-chat__name{font-weight:var(--a-font-weight-bold)}
1
+ .navds-chat{align-items:flex-end;display:flex;gap:var(--a-spacing-3);max-width:40.75rem}.navds-chat--right{flex-direction:row-reverse}.navds-chat__bubble-wrapper{display:flex;flex-direction:column;gap:var(--a-spacing-3);list-style:none;margin:0;padding:0}.navds-chat--right .navds-chat__bubble-wrapper{align-items:flex-end}.navds-chat__avatar{align-items:center;background-color:var(--ac-chat-avatar-bg,var(--a-surface-neutral-subtle));border:1px solid var(--ac-chat-border-color,var(--a-border-subtle));border-radius:var(--a-border-radius-full);box-shadow:var(--a-shadow-xsmall);color:var(--ac-chat-avatar-color,var(--a-text-default));display:flex;flex-shrink:0;font-size:1.06rem;height:2.5rem;justify-content:center;letter-spacing:.024rem;overflow:hidden;width:2.5rem}.navds-chat__avatar svg{align-self:center;height:100%;width:100%}.navds-chat__bubble{background-color:var(--ac-chat-bubble-bg,var(--a-surface-neutral-subtle));border:1px solid var(--ac-chat-border-color,var(--a-border-subtle));border-radius:var(--a-border-radius-xlarge);border-bottom-left-radius:2px;box-shadow:var(--a-shadow-xsmall);display:flex;flex-direction:column;gap:var(--a-spacing-2);padding:var(--a-spacing-4);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-chat--right .navds-chat__bubble{border-radius:var(--a-border-radius-xlarge);border-bottom-right-radius:2px}.navds-chat--small .navds-chat__bubble{padding:var(--a-spacing-3)}.navds-chat--info .navds-chat__avatar,.navds-chat--info .navds-chat__bubble{background-color:var(--a-surface-info-subtle)}.navds-chat--neutral .navds-chat__avatar,.navds-chat--neutral .navds-chat__bubble{background-color:var(--a-surface-default)}.navds-chat__top-text{align-items:baseline;color:var(--ac-chat-top-text,var(--a-text-default));display:flex;font-weight:400;gap:var(--a-spacing-2);margin:0}.navds-chat--right .navds-chat__top-text{align-self:flex-end}.navds-chat--top-text-left .navds-chat__top-text{align-self:flex-start}.navds-chat--left .navds-chat__top-text--right,.navds-chat--top-text-right .navds-chat__top-text{align-self:flex-end}.navds-chat--right .navds-chat__top-text--left{align-self:flex-start}
package/dist/component/expansioncard.css CHANGED
@@ -78,7 +78,7 @@
78
78
  margin-top: var(--a-spacing-1);
79
79
  }
80
80
 
81
- .navds-expansioncard--small :where(.navds-expansioncard__title--small) {
81
+ .navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
82
82
  margin-top: var(--a-spacing-05);
83
83
  }
84
84
 
@@ -117,7 +117,7 @@
117
117
  transition: transform 150ms ease-in-out;
118
118
  }
119
119
 
120
- .navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
120
+ .navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
121
121
  transform: translateY(0) rotate(180deg);
122
122
  }
123
123
 
@@ -137,7 +137,10 @@
137
137
  }
138
138
  }
139
139
 
140
- .navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
140
+ .navds-expansioncard--open
141
+ > :where(.navds-expansioncard__header)
142
+ > :where(.navds-expansioncard__header-button):hover
143
+ :where(.navds-expansioncard__header-chevron) {
141
144
  transform: translateY(-1px) rotate(180deg);
142
145
  }
143
146
 
package/dist/component/expansioncard.min.css CHANGED
@@ -1,3 +1,3 @@
1
1
  .navds-expansioncard{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-color,var(--a-border-default));--__ac-expansioncard-border-radius:var(--ac-expansioncard-border-radius,var(--a-border-radius-large));--__ac-expansioncard-border-width:1px;background-color:var(--ac-expansioncard-bg,var(--a-surface-default));border-radius:var(--__ac-expansioncard-border-radius);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.navds-expansioncard--open{--__ac-expansioncard-border-color:var(
2
2
  --ac-expansioncard-border-open-color,var(--ac-expansioncard-border-color,var(--a-border-default))
3
- )}.navds-expansioncard:hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}:where(.navds-expansioncard.navds-expansioncard--open):hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}.navds-expansioncard__header{background-color:var(--ac-expansioncard-header-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-radius:var(--__ac-expansioncard-border-radius);display:flex;gap:var(--a-spacing-4);justify-content:space-between;padding:var(--a-spacing-4) var(--a-spacing-6);position:relative;width:100%}.navds-expansioncard--small>:where(.navds-expansioncard__header){padding:var(--a-spacing-3) var(--a-spacing-4)}.navds-expansioncard__header:hover{background-color:var(--ac-expansioncard-header-bg-hover,var(--a-surface-hover));box-shadow:0 0 0 1px var(--__ac-expansioncard-border-color)}.navds-expansioncard--open>:where(.navds-expansioncard__header){background-color:var(--ac-expansioncard-header-open-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.navds-expansioncard--open>:where(.navds-expansioncard__header):hover{background-color:var(--ac-expansioncard-header-bg-hover,var(--a-surface-hover));box-shadow:1px 0 0 0 var(--__ac-expansioncard-border-color),-1px 0 0 0 var(--__ac-expansioncard-border-color),0 -1px 0 0 var(--__ac-expansioncard-border-color)}.navds-expansioncard__title--small{margin-top:10px}.navds-expansioncard__title--medium{margin-top:var(--a-spacing-2)}.navds-expansioncard__title--large{margin-top:var(--a-spacing-1)}.navds-expansioncard--small :where(.navds-expansioncard__title--small){margin-top:var(--a-spacing-05)}.navds-expansioncard--small :where(.navds-expansioncard__title--medium,.navds-expansioncard__title--large){margin-top:0}.navds-expansioncard__header-button{align-self:flex-start;background:transparent;border:none;border-radius:var(--ac-expansioncard-button-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;font-size:1.5rem;margin:0;min-height:3rem;min-width:3rem;place-content:center}.navds-expansioncard--small>:where(.navds-expansioncard__header)>:where(.navds-expansioncard__header-button){min-height:2rem;min-width:2rem}:where(.navds-expansioncard__header):hover>:where(.navds-expansioncard__header-button){background-color:var(--a-surface-hover)}.navds-expansioncard__header-chevron{transition:-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out;transition:transform .15s ease-in-out,-webkit-transform .15s ease-in-out}.navds-expansioncard--open :where(.navds-expansioncard__header-chevron){-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}.navds-expansioncard__header-button:hover>:where(.navds-expansioncard__header-chevron){-webkit-transform:translateY(1px);transform:translateY(1px)}.navds-expansioncard__header-button:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-expansioncard__header-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron){-webkit-transform:translateY(-1px) rotate(180deg);transform:translateY(-1px) rotate(180deg)}.navds-expansioncard__header-button:after{content:"";cursor:pointer;height:100%;inset:0;position:absolute;width:100%;z-index:1}.navds-expansioncard__content{border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-end-end-radius:var(--__ac-expansioncard-border-radius);border-end-start-radius:var(--__ac-expansioncard-border-radius);border-top:none;padding:var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6)}.navds-expansioncard--small>:where(.navds-expansioncard__content){padding:var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4)}.navds-expansioncard__content--closed{display:none}:where(.navds-expansioncard__header):hover+.navds-expansioncard__content{box-shadow:1px 0 0 0 var(--__ac-expansioncard-border-color),-1px 0 0 0 var(--__ac-expansioncard-border-color),0 1px 0 0 var(--__ac-expansioncard-border-color)}.navds-expansioncard__content-inner{-webkit-animation:fadeExpansionCard .25s ease;animation:fadeExpansionCard .25s ease}.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner){-webkit-animation:none;animation:none}@-webkit-keyframes fadeExpansionCard{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeExpansionCard{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
3
+ )}.navds-expansioncard:hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}:where(.navds-expansioncard.navds-expansioncard--open):hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}.navds-expansioncard__header{background-color:var(--ac-expansioncard-header-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-radius:var(--__ac-expansioncard-border-radius);display:flex;gap:var(--a-spacing-4);justify-content:space-between;padding:var(--a-spacing-4) var(--a-spacing-6);position:relative;width:100%}.navds-expansioncard--small>:where(.navds-expansioncard__header){padding:var(--a-spacing-3) var(--a-spacing-4)}.navds-expansioncard__header:hover{background-color:var(--ac-expansioncard-header-bg-hover,var(--a-surface-hover));box-shadow:0 0 0 1px var(--__ac-expansioncard-border-color)}.navds-expansioncard--open>:where(.navds-expansioncard__header){background-color:var(--ac-expansioncard-header-open-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.navds-expansioncard--open>:where(.navds-expansioncard__header):hover{background-color:var(--ac-expansioncard-header-bg-hover,var(--a-surface-hover));box-shadow:1px 0 0 0 var(--__ac-expansioncard-border-color),-1px 0 0 0 var(--__ac-expansioncard-border-color),0 -1px 0 0 var(--__ac-expansioncard-border-color)}.navds-expansioncard__title--small{margin-top:10px}.navds-expansioncard__title--medium{margin-top:var(--a-spacing-2)}.navds-expansioncard__title--large{margin-top:var(--a-spacing-1)}.navds-expansioncard--small>:where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small){margin-top:var(--a-spacing-05)}.navds-expansioncard--small :where(.navds-expansioncard__title--medium,.navds-expansioncard__title--large){margin-top:0}.navds-expansioncard__header-button{align-self:flex-start;background:transparent;border:none;border-radius:var(--ac-expansioncard-button-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;font-size:1.5rem;margin:0;min-height:3rem;min-width:3rem;place-content:center}.navds-expansioncard--small>:where(.navds-expansioncard__header)>:where(.navds-expansioncard__header-button){min-height:2rem;min-width:2rem}:where(.navds-expansioncard__header):hover>:where(.navds-expansioncard__header-button){background-color:var(--a-surface-hover)}.navds-expansioncard__header-chevron{transition:-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out;transition:transform .15s ease-in-out,-webkit-transform .15s ease-in-out}.navds-expansioncard--open>:where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron){-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}.navds-expansioncard__header-button:hover>:where(.navds-expansioncard__header-chevron){-webkit-transform:translateY(1px);transform:translateY(1px)}.navds-expansioncard__header-button:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-expansioncard__header-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-expansioncard--open>:where(.navds-expansioncard__header)>:where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron){-webkit-transform:translateY(-1px) rotate(180deg);transform:translateY(-1px) rotate(180deg)}.navds-expansioncard__header-button:after{content:"";cursor:pointer;height:100%;inset:0;position:absolute;width:100%;z-index:1}.navds-expansioncard__content{border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-end-end-radius:var(--__ac-expansioncard-border-radius);border-end-start-radius:var(--__ac-expansioncard-border-radius);border-top:none;padding:var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6)}.navds-expansioncard--small>:where(.navds-expansioncard__content){padding:var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4)}.navds-expansioncard__content--closed{display:none}:where(.navds-expansioncard__header):hover+.navds-expansioncard__content{box-shadow:1px 0 0 0 var(--__ac-expansioncard-border-color),-1px 0 0 0 var(--__ac-expansioncard-border-color),0 1px 0 0 var(--__ac-expansioncard-border-color)}.navds-expansioncard__content-inner{-webkit-animation:fadeExpansionCard .25s ease;animation:fadeExpansionCard .25s ease}.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner){-webkit-animation:none;animation:none}@-webkit-keyframes fadeExpansionCard{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeExpansionCard{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
package/dist/component/helptext.css CHANGED
@@ -33,7 +33,7 @@
33
33
 
34
34
  .navds-help-text__popover.navds-popover {
35
35
  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
36
- max-width: min(65ch, 90vw);
36
+ max-width: min(65ch, calc(100vw - 1.5rem));
37
37
 
38
38
  --ac-popover-border: var(--a-border-info);
39
39
  }
package/dist/component/helptext.min.css CHANGED
@@ -1 +1 @@
1
- .navds-help-text__button{align-items:center;background-color:transparent;border:0;border-radius:var(--a-border-radius-full);color:var(--ac-help-text-button-color,var(--a-surface-action));cursor:pointer;display:flex;font-size:1.5rem;justify-content:center;margin:0;padding:0}.navds-help-text__button:focus-visible{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-help-text__button:focus{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:none}}.navds-help-text__icon{border-radius:var(--a-border-radius-full)}.navds-help-text__popover.navds-popover,.navds-help-text__popover>.navds-popover__arrow{background-color:var(--ac-help-text-popover-bg,var(--a-surface-info-subtle))}.navds-help-text__popover.navds-popover{--ac-popover-border:var(--a-border-info);max-width:min(65ch,90vw)}.navds-help-text__icon--filled{display:none}.navds-help-text__button:where(:hover,:focus-visible,[aria-expanded=true])>.navds-help-text__icon{display:none}.navds-help-text__button:where(:hover,:focus-visible,[aria-expanded=true])>.navds-help-text__icon--filled{display:inherit}@supports not selector(:focus-visible){.navds-help-text__button:where(:focus)>.navds-help-text__icon{display:none}.navds-help-text__button:where(:focus)>.navds-help-text__icon--filled{display:inherit}}
1
+ .navds-help-text__button{align-items:center;background-color:transparent;border:0;border-radius:var(--a-border-radius-full);color:var(--ac-help-text-button-color,var(--a-surface-action));cursor:pointer;display:flex;font-size:1.5rem;justify-content:center;margin:0;padding:0}.navds-help-text__button:focus-visible{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-help-text__button:focus{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:none}}.navds-help-text__icon{border-radius:var(--a-border-radius-full)}.navds-help-text__popover.navds-popover,.navds-help-text__popover>.navds-popover__arrow{background-color:var(--ac-help-text-popover-bg,var(--a-surface-info-subtle))}.navds-help-text__popover.navds-popover{--ac-popover-border:var(--a-border-info);max-width:min(65ch,calc(100vw - 1.5rem))}.navds-help-text__icon--filled{display:none}.navds-help-text__button:where(:hover,:focus-visible,[aria-expanded=true])>.navds-help-text__icon{display:none}.navds-help-text__button:where(:hover,:focus-visible,[aria-expanded=true])>.navds-help-text__icon--filled{display:inherit}@supports not selector(:focus-visible){.navds-help-text__button:where(:focus)>.navds-help-text__icon{display:none}.navds-help-text__button:where(:focus)>.navds-help-text__icon--filled{display:inherit}}
package/dist/component/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Mon, 19 Jun 2023 11:05:07 GMT
4
+ * Generated on Wed, 21 Jun 2023 11:52:08 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-05: 0.125rem;
@@ -1697,13 +1697,11 @@ body,
1697
1697
  .navds-chat {
1698
1698
  display: flex;
1699
1699
  align-items: flex-end;
1700
- gap: var(--a-spacing-4);
1701
- padding-right: var(--a-spacing-16);
1700
+ gap: var(--a-spacing-3);
1701
+ max-width: 40.75rem;
1702
1702
  }
1703
1703
  .navds-chat--right {
1704
1704
  flex-direction: row-reverse;
1705
- padding-right: 0;
1706
- padding-left: var(--a-spacing-16);
1707
1705
  }
1708
1706
  .navds-chat__bubble-wrapper {
1709
1707
  list-style: none;
@@ -1718,15 +1716,19 @@ body,
1718
1716
  }
1719
1717
  .navds-chat__avatar {
1720
1718
  align-items: center;
1721
- background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
1722
- color: var(--ac-chat-avatar-color, var(--a-text-default));
1719
+ box-shadow: var(--a-shadow-xsmall);
1720
+ background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
1721
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
1723
1722
  border-radius: var(--a-border-radius-full);
1723
+ color: var(--ac-chat-avatar-color, var(--a-text-default));
1724
1724
  display: flex;
1725
1725
  flex-shrink: 0;
1726
1726
  justify-content: center;
1727
1727
  overflow: hidden;
1728
- height: 3rem;
1729
- width: 3rem;
1728
+ height: 2.5rem;
1729
+ width: 2.5rem;
1730
+ font-size: 1.06rem;
1731
+ letter-spacing: 0.024rem;
1730
1732
  }
1731
1733
  .navds-chat__avatar svg {
1732
1734
  align-self: center;
@@ -1734,11 +1736,11 @@ body,
1734
1736
  width: 100%;
1735
1737
  }
1736
1738
  .navds-chat__bubble {
1737
- padding: 1rem;
1738
- box-shadow: var(--a-shadow-small);
1739
+ padding: var(--a-spacing-4);
1740
+ box-shadow: var(--a-shadow-xsmall);
1739
1741
  width: fit-content;
1740
- max-width: 37.5rem;
1741
- background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
1742
+ background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
1743
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
1742
1744
  border-radius: var(--a-border-radius-xlarge);
1743
1745
  border-bottom-left-radius: 2px;
1744
1746
  display: flex;
@@ -1749,11 +1751,24 @@ body,
1749
1751
  border-radius: var(--a-border-radius-xlarge);
1750
1752
  border-bottom-right-radius: 2px;
1751
1753
  }
1754
+ .navds-chat--small .navds-chat__bubble {
1755
+ padding: var(--a-spacing-3);
1756
+ }
1757
+ .navds-chat--info .navds-chat__bubble,
1758
+ .navds-chat--info .navds-chat__avatar {
1759
+ background-color: var(--a-surface-info-subtle);
1760
+ }
1761
+ .navds-chat--neutral .navds-chat__bubble,
1762
+ .navds-chat--neutral .navds-chat__avatar {
1763
+ background-color: var(--a-surface-default);
1764
+ }
1752
1765
  .navds-chat__top-text {
1753
1766
  color: var(--ac-chat-top-text, var(--a-text-default));
1754
1767
  display: flex;
1755
1768
  gap: var(--a-spacing-2);
1756
1769
  align-items: baseline;
1770
+ font-weight: normal;
1771
+ margin: 0;
1757
1772
  }
1758
1773
  .navds-chat--right .navds-chat__top-text {
1759
1774
  align-self: flex-end;
@@ -1770,9 +1785,6 @@ body,
1770
1785
  .navds-chat--right .navds-chat__top-text--left {
1771
1786
  align-self: flex-start;
1772
1787
  }
1773
- .navds-chat__name {
1774
- font-weight: var(--a-font-weight-bold);
1775
- }
1776
1788
  .navds-chips {
1777
1789
  display: flex;
1778
1790
  gap: var(--a-spacing-2);
@@ -2175,7 +2187,7 @@ body,
2175
2187
  .navds-expansioncard__title--large {
2176
2188
  margin-top: var(--a-spacing-1);
2177
2189
  }
2178
- .navds-expansioncard--small :where(.navds-expansioncard__title--small) {
2190
+ .navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
2179
2191
  margin-top: var(--a-spacing-05);
2180
2192
  }
2181
2193
  .navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
@@ -2207,7 +2219,7 @@ body,
2207
2219
  .navds-expansioncard__header-chevron {
2208
2220
  transition: transform 150ms ease-in-out;
2209
2221
  }
2210
- .navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
2222
+ .navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
2211
2223
  transform: translateY(0) rotate(180deg);
2212
2224
  }
2213
2225
  .navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
@@ -2223,7 +2235,10 @@ body,
2223
2235
  box-shadow: var(--a-shadow-focus);
2224
2236
  }
2225
2237
  }
2226
- .navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
2238
+ .navds-expansioncard--open
2239
+ > :where(.navds-expansioncard__header)
2240
+ > :where(.navds-expansioncard__header-button):hover
2241
+ :where(.navds-expansioncard__header-chevron) {
2227
2242
  transform: translateY(-1px) rotate(180deg);
2228
2243
  }
2229
2244
  .navds-expansioncard__header-button::after {
@@ -3219,7 +3234,7 @@ body,
3219
3234
  }
3220
3235
  .navds-help-text__popover.navds-popover {
3221
3236
  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
3222
- max-width: min(65ch, 90vw);
3237
+ max-width: min(65ch, calc(100vw - 1.5rem));
3223
3238
 
3224
3239
  --ac-popover-border: var(--a-border-info);
3225
3240
  }
@@ -3575,6 +3590,7 @@ button.navds-internalheader__title:active,
3575
3590
  border: 1px solid;
3576
3591
  border-color: var(--ac-popover-border, var(--a-border-default));
3577
3592
  border-radius: var(--a-border-radius-medium);
3593
+ max-width: calc(100vw - var(--a-spacing-6));
3578
3594
  }
3579
3595
  .navds-popover__content {
3580
3596
  padding: var(--a-spacing-4);