@oslokommune/punkt-css 12.29.6 → 12.29.8

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 (9) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/css/components/tag.css +53 -38
  3. package/dist/css/components/tag.min.css +1 -1
  4. package/dist/css/pkt-components.css +53 -38
  5. package/dist/css/pkt-components.min.css +1 -1
  6. package/dist/css/pkt.css +53 -38
  7. package/dist/css/pkt.min.css +1 -1
  8. package/dist/scss/components/_tag.scss +50 -35
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [12.29.8](https://github.com/oslokommune/punkt/compare/12.29.7...12.29.8) (2025-03-26)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ * PktTag støtte for å brekke over flere linjer (#2343).
18
+
19
+
20
+ ### Chores
21
+ Ingen
22
+
23
+ ---
24
+
25
+
8
26
  ## [12.29.6](https://github.com/oslokommune/punkt/compare/12.29.5...12.29.6) (2025-03-25)
9
27
 
10
28
  ### ⚠ BREAKING CHANGES
package/dist/css/components/tag.css CHANGED
@@ -15,19 +15,31 @@
15
15
  --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
16
16
  }
17
17
 
18
+ pkt-tag {
19
+ display: inline-block;
20
+ vertical-align: middle;
21
+ }
22
+
23
+ pkt-tag > .pkt-tag {
24
+ display: flex;
25
+ }
26
+
18
27
  .pkt-tag {
19
28
  width: fit-content;
20
29
  background: var(--pkt-color-surface-default-light-blue);
21
30
  padding: 0.25rem 0.5rem;
22
31
  display: inline-flex;
23
32
  align-items: center;
24
- height: 1.875rem;
33
+ height: auto;
25
34
  column-gap: 0;
26
35
  color: var(--pkt-color-tag-text-normal);
36
+ border: 0;
37
+ margin: 0;
27
38
  letter-spacing: -0.2px;
28
39
  font-weight: 500;
29
40
  font-size: 0.875rem;
30
41
  line-height: 1.375rem;
42
+ line-height: 1.875rem;
31
43
  }
32
44
  .pkt-tag.pkt-btn:hover, .pkt-tag.pkt-tag--hover {
33
45
  background-color: var(--pkt-color-surface-strong-blue);
@@ -35,7 +47,7 @@
35
47
  text-decoration: underline;
36
48
  border-color: transparent;
37
49
  }
38
- .pkt-tag.pkt-btn:hover > svg, .pkt-tag.pkt-tag--hover > svg {
50
+ .pkt-tag.pkt-btn:hover svg, .pkt-tag.pkt-tag--hover svg {
39
51
  --fg-color: var(--pkt-color-tag-text-hover);
40
52
  }
41
53
  .pkt-tag.pkt-btn:focus, .pkt-tag.pkt-tag--focus {
@@ -44,14 +56,14 @@
44
56
  outline: 4px solid var(--pkt-color-border-states-focus);
45
57
  color: var(--pkt-color-tag-text-focus);
46
58
  }
47
- .pkt-tag.pkt-btn:focus > svg, .pkt-tag.pkt-tag--focus > svg {
59
+ .pkt-tag.pkt-btn:focus svg, .pkt-tag.pkt-tag--focus svg {
48
60
  --fg-color: var(--pkt-color-tag-text-focus);
49
61
  }
50
62
  .pkt-tag.pkt-btn:active, .pkt-tag.pkt-tag--active, .pkt-tag.pkt-tag--active:hover {
51
63
  background-color: var(--pkt-color-surface-strong-blue);
52
64
  color: var(--pkt-color-tag-text-active);
53
65
  }
54
- .pkt-tag.pkt-btn:active > svg, .pkt-tag.pkt-tag--active > svg, .pkt-tag.pkt-tag--active:hover > svg {
66
+ .pkt-tag.pkt-btn:active svg, .pkt-tag.pkt-tag--active svg, .pkt-tag.pkt-tag--active:hover svg {
55
67
  --fg-color: var(--pkt-color-tag-text-active);
56
68
  }
57
69
  .pkt-tag__icon {
@@ -71,21 +83,21 @@
71
83
  background-color: var(--pkt-color-surface-strong-green);
72
84
  color: var(--pkt-color-tag-text-hover);
73
85
  }
74
- .pkt-tag--green.pkt-btn:hover > svg, .pkt-tag--green.pkt-tag--hover > svg {
86
+ .pkt-tag--green.pkt-btn:hover svg, .pkt-tag--green.pkt-tag--hover svg {
75
87
  --fg-color: var(--pkt-color-tag-text-hover);
76
88
  }
77
89
  .pkt-tag--green.pkt-btn:focus, .pkt-tag--green.pkt-tag--focus {
78
90
  background-color: var(--pkt-color-surface-strong-green);
79
91
  color: var(--pkt-color-tag-text-focus);
80
92
  }
81
- .pkt-tag--green.pkt-btn:focus > svg, .pkt-tag--green.pkt-tag--focus > svg {
93
+ .pkt-tag--green.pkt-btn:focus svg, .pkt-tag--green.pkt-tag--focus svg {
82
94
  --fg-color: var(--pkt-color-tag-text-focus);
83
95
  }
84
96
  .pkt-tag--green.pkt-btn:active, .pkt-tag--green.pkt-tag--active {
85
97
  background-color: var(--pkt-color-surface-strong-green);
86
98
  color: var(--pkt-color-tag-text-active);
87
99
  }
88
- .pkt-tag--green.pkt-btn:active > svg, .pkt-tag--green.pkt-tag--active > svg {
100
+ .pkt-tag--green.pkt-btn:active svg, .pkt-tag--green.pkt-tag--active svg {
89
101
  --fg-color: var(--pkt-color-tag-text-active);
90
102
  }
91
103
  .pkt-tag--yellow {
@@ -95,21 +107,21 @@
95
107
  background-color: var(--pkt-color-surface-strong-yellow);
96
108
  color: var(--pkt-color-tag-text-hover);
97
109
  }
98
- .pkt-tag--yellow.pkt-btn:hover > svg, .pkt-tag--yellow.pkt-tag--hover > svg {
110
+ .pkt-tag--yellow.pkt-btn:hover svg, .pkt-tag--yellow.pkt-tag--hover svg {
99
111
  --fg-color: var(--pkt-color-tag-text-hover);
100
112
  }
101
113
  .pkt-tag--yellow.pkt-btn:focus, .pkt-tag--yellow.pkt-tag--focus {
102
114
  background-color: var(--pkt-color-surface-strong-yellow);
103
115
  color: var(--pkt-color-tag-text-focus);
104
116
  }
105
- .pkt-tag--yellow.pkt-btn:focus > svg, .pkt-tag--yellow.pkt-tag--focus > svg {
117
+ .pkt-tag--yellow.pkt-btn:focus svg, .pkt-tag--yellow.pkt-tag--focus svg {
106
118
  --fg-color: var(--pkt-color-tag-text-focus);
107
119
  }
108
120
  .pkt-tag--yellow.pkt-btn:active, .pkt-tag--yellow.pkt-tag--active {
109
121
  background-color: var(--pkt-color-surface-strong-yellow);
110
122
  color: var(--pkt-color-tag-text-active);
111
123
  }
112
- .pkt-tag--yellow.pkt-btn:active > svg, .pkt-tag--yellow.pkt-tag--active > svg {
124
+ .pkt-tag--yellow.pkt-btn:active svg, .pkt-tag--yellow.pkt-tag--active svg {
113
125
  --fg-color: var(--pkt-color-tag-text-active);
114
126
  }
115
127
  .pkt-tag--red {
@@ -119,21 +131,21 @@
119
131
  background-color: var(--pkt-color-surface-strong-red);
120
132
  color: var(--pkt-color-tag-text-hover);
121
133
  }
122
- .pkt-tag--red.pkt-btn:hover > svg, .pkt-tag--red.pkt-tag--hover > svg {
134
+ .pkt-tag--red.pkt-btn:hover svg, .pkt-tag--red.pkt-tag--hover svg {
123
135
  --fg-color: var(--pkt-color-tag-text-hover);
124
136
  }
125
137
  .pkt-tag--red.pkt-btn:focus, .pkt-tag--red.pkt-tag--focus {
126
138
  background-color: var(--pkt-color-surface-strong-red);
127
139
  color: var(--pkt-color-tag-text-focus);
128
140
  }
129
- .pkt-tag--red.pkt-btn:focus > svg, .pkt-tag--red.pkt-tag--focus > svg {
141
+ .pkt-tag--red.pkt-btn:focus svg, .pkt-tag--red.pkt-tag--focus svg {
130
142
  --fg-color: var(--pkt-color-tag-text-focus);
131
143
  }
132
144
  .pkt-tag--red.pkt-btn:active, .pkt-tag--red.pkt-tag--active {
133
145
  background-color: var(--pkt-color-surface-strong-red);
134
146
  color: var(--pkt-color-tag-text-active);
135
147
  }
136
- .pkt-tag--red.pkt-btn:active > svg, .pkt-tag--red.pkt-tag--active > svg {
148
+ .pkt-tag--red.pkt-btn:active svg, .pkt-tag--red.pkt-tag--active svg {
137
149
  --fg-color: var(--pkt-color-tag-text-active);
138
150
  }
139
151
  .pkt-tag--beige {
@@ -143,21 +155,21 @@
143
155
  background-color: var(--pkt-color-surface-strong-beige);
144
156
  color: var(--pkt-color-tag-text-hover);
145
157
  }
146
- .pkt-tag--beige.pkt-btn:hover > svg, .pkt-tag--beige.pkt-tag--hover > svg {
158
+ .pkt-tag--beige.pkt-btn:hover svg, .pkt-tag--beige.pkt-tag--hover svg {
147
159
  --fg-color: var(--pkt-color-tag-text-hover);
148
160
  }
149
161
  .pkt-tag--beige.pkt-btn:focus, .pkt-tag--beige.pkt-tag--focus {
150
162
  background-color: var(--pkt-color-surface-strong-beige);
151
163
  color: var(--pkt-color-tag-text-focus);
152
164
  }
153
- .pkt-tag--beige.pkt-btn:focus > svg, .pkt-tag--beige.pkt-tag--focus > svg {
165
+ .pkt-tag--beige.pkt-btn:focus svg, .pkt-tag--beige.pkt-tag--focus svg {
154
166
  --fg-color: var(--pkt-color-tag-text-focus);
155
167
  }
156
168
  .pkt-tag--beige.pkt-btn:active, .pkt-tag--beige.pkt-tag--active {
157
169
  background-color: var(--pkt-color-surface-strong-beige);
158
170
  color: var(--pkt-color-tag-text-active);
159
171
  }
160
- .pkt-tag--beige.pkt-btn:active > svg, .pkt-tag--beige.pkt-tag--active > svg {
172
+ .pkt-tag--beige.pkt-btn:active svg, .pkt-tag--beige.pkt-tag--active svg {
161
173
  --fg-color: var(--pkt-color-tag-text-active);
162
174
  }
163
175
  .pkt-tag--gray, .pkt-tag--grey {
@@ -167,21 +179,21 @@
167
179
  background-color: var(--pkt-color-surface-strong-gray);
168
180
  color: var(--pkt-color-tag-text-hover);
169
181
  }
170
- .pkt-tag--gray.pkt-btn:hover > svg, .pkt-tag--gray.pkt-tag--hover > svg, .pkt-tag--grey.pkt-btn:hover > svg, .pkt-tag--grey.pkt-tag--hover > svg {
182
+ .pkt-tag--gray.pkt-btn:hover svg, .pkt-tag--gray.pkt-tag--hover svg, .pkt-tag--grey.pkt-btn:hover svg, .pkt-tag--grey.pkt-tag--hover svg {
171
183
  --fg-color: var(--pkt-color-tag-text-hover);
172
184
  }
173
185
  .pkt-tag--gray.pkt-btn:focus, .pkt-tag--gray.pkt-tag--focus, .pkt-tag--grey.pkt-btn:focus, .pkt-tag--grey.pkt-tag--focus {
174
186
  background-color: var(--pkt-color-surface-strong-gray);
175
187
  color: var(--pkt-color-tag-text-active);
176
188
  }
177
- .pkt-tag--gray.pkt-btn:focus > svg, .pkt-tag--gray.pkt-tag--focus > svg, .pkt-tag--grey.pkt-btn:focus > svg, .pkt-tag--grey.pkt-tag--focus > svg {
189
+ .pkt-tag--gray.pkt-btn:focus svg, .pkt-tag--gray.pkt-tag--focus svg, .pkt-tag--grey.pkt-btn:focus svg, .pkt-tag--grey.pkt-tag--focus svg {
178
190
  --fg-color: var(--pkt-color-tag-text-active);
179
191
  }
180
192
  .pkt-tag--gray.pkt-btn:active, .pkt-tag--gray.pkt-tag--active, .pkt-tag--grey.pkt-btn:active, .pkt-tag--grey.pkt-tag--active {
181
193
  background-color: var(--pkt-color-surface-strong-gray);
182
194
  color: var(--pkt-color-tag-text-active);
183
195
  }
184
- .pkt-tag--gray.pkt-btn:active > svg, .pkt-tag--gray.pkt-tag--active > svg, .pkt-tag--grey.pkt-btn:active > svg, .pkt-tag--grey.pkt-tag--active > svg {
196
+ .pkt-tag--gray.pkt-btn:active svg, .pkt-tag--gray.pkt-tag--active svg, .pkt-tag--grey.pkt-btn:active svg, .pkt-tag--grey.pkt-tag--active svg {
185
197
  --fg-color: var(--pkt-color-tag-text-active);
186
198
  }
187
199
  .pkt-tag--blue-light {
@@ -191,21 +203,21 @@
191
203
  background-color: var(--pkt-color-surface-strong-blue);
192
204
  color: var(--pkt-color-tag-text-hover);
193
205
  }
194
- .pkt-tag--blue-light.pkt-btn:hover > svg, .pkt-tag--blue-light.pkt-tag--hover > svg {
206
+ .pkt-tag--blue-light.pkt-btn:hover svg, .pkt-tag--blue-light.pkt-tag--hover svg {
195
207
  --fg-color: var(--pkt-color-tag-text-hover);
196
208
  }
197
209
  .pkt-tag--blue-light.pkt-btn:focus, .pkt-tag--blue-light.pkt-tag--focus {
198
210
  background-color: var(--pkt-color-surface-strong-blue);
199
211
  color: var(--pkt-color-tag-text-focus);
200
212
  }
201
- .pkt-tag--blue-light.pkt-btn:focus > svg, .pkt-tag--blue-light.pkt-tag--focus > svg {
213
+ .pkt-tag--blue-light.pkt-btn:focus svg, .pkt-tag--blue-light.pkt-tag--focus svg {
202
214
  --fg-color: var(--pkt-color-tag-text-focus);
203
215
  }
204
216
  .pkt-tag--blue-light.pkt-btn:active, .pkt-tag--blue-light.pkt-tag--active {
205
217
  background-color: var(--pkt-color-surface-strong-blue);
206
218
  color: var(--pkt-color-tag-text-active);
207
219
  }
208
- .pkt-tag--blue-light.pkt-btn:active > svg, .pkt-tag--blue-light.pkt-tag--active > svg {
220
+ .pkt-tag--blue-light.pkt-btn:active svg, .pkt-tag--blue-light.pkt-tag--active svg {
209
221
  --fg-color: var(--pkt-color-tag-text-active);
210
222
  }
211
223
  .pkt-tag--blue-dark {
@@ -216,24 +228,11 @@
216
228
  background-color: var(--pkt-color-brand-warm-blue-1000);
217
229
  color: var(--pkt-color-brand-neutrals-200);
218
230
  }
219
- .pkt-tag--blue-dark .pkt-icon > svg {
231
+ .pkt-tag--blue-dark.pkt-btn:hover svg, .pkt-tag--blue-dark.pkt-btn:focus svg, .pkt-tag--blue-dark.pkt-tag--hover svg {
220
232
  --fg-color: var(--pkt-color-brand-neutrals-200);
221
233
  }
222
- .pkt-tag--small {
223
- padding: 0.25rem;
224
- height: 1.375rem;
225
- }
226
- .pkt-tag--medium {
227
- padding: 0.25rem 0.5rem;
228
- height: 1.875rem;
229
- }
230
- .pkt-tag--large {
231
- padding: 0.25rem 0.5rem;
232
- height: 2.25rem;
233
- letter-spacing: -0.2px;
234
- font-weight: 500;
235
- font-size: 1.125rem;
236
- line-height: 1.75rem;
234
+ .pkt-tag--blue-dark svg {
235
+ --fg-color: var(--pkt-color-brand-neutrals-200);
237
236
  }
238
237
  .pkt-tag--normal-text {
239
238
  letter-spacing: -0.2px;
@@ -246,4 +245,20 @@
246
245
  font-weight: 300;
247
246
  font-size: 0.875rem;
248
247
  line-height: 1.375rem;
248
+ }
249
+ .pkt-tag--small {
250
+ padding: 0.25rem;
251
+ line-height: 1.375rem;
252
+ }
253
+ .pkt-tag--medium {
254
+ padding: 0.25rem 0.5rem;
255
+ line-height: 1.875rem;
256
+ }
257
+ .pkt-tag--large {
258
+ padding: 0.25rem 0.5rem;
259
+ letter-spacing: -0.2px;
260
+ font-weight: 500;
261
+ font-size: 1.125rem;
262
+ line-height: 1.75rem;
263
+ line-height: 2.25rem;
249
264
  }
package/dist/css/components/tag.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-tag{width:fit-content;background:var(--pkt-color-surface-default-light-blue);padding:.25rem .5rem;display:inline-flex;align-items:center;height:1.875rem;column-gap:0;color:var(--pkt-color-tag-text-normal);letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-tag.pkt-btn:hover,.pkt-tag.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover);text-decoration:underline;border-color:rgba(0,0,0,0)}.pkt-tag.pkt-btn:hover>svg,.pkt-tag.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-btn:focus,.pkt-tag.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);border-color:var(--pkt-color-text-action-active);outline:4px solid var(--pkt-color-border-states-focus);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:focus>svg,.pkt-tag.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:active,.pkt-tag.pkt-tag--active,.pkt-tag.pkt-tag--active:hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-btn:active>svg,.pkt-tag.pkt-tag--active>svg,.pkt-tag.pkt-tag--active:hover>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag__icon{width:16px;height:16px;margin-right:.5rem}.pkt-tag__close-btn{width:16px;height:16px;margin-left:.5rem}.pkt-tag--green{background:var(--pkt-color-surface-strong-light-green)}.pkt-tag--green.pkt-btn:hover,.pkt-tag--green.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-hover)}.pkt-tag--green.pkt-btn:hover>svg,.pkt-tag--green.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--green.pkt-btn:focus,.pkt-tag--green.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-focus)}.pkt-tag--green.pkt-btn:focus>svg,.pkt-tag--green.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--green.pkt-btn:active,.pkt-tag--green.pkt-tag--active{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-active)}.pkt-tag--green.pkt-btn:active>svg,.pkt-tag--green.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--yellow{background:var(--pkt-color-surface-default-yellow)}.pkt-tag--yellow.pkt-btn:hover,.pkt-tag--yellow.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-hover)}.pkt-tag--yellow.pkt-btn:hover>svg,.pkt-tag--yellow.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--yellow.pkt-btn:focus,.pkt-tag--yellow.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-focus)}.pkt-tag--yellow.pkt-btn:focus>svg,.pkt-tag--yellow.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--yellow.pkt-btn:active,.pkt-tag--yellow.pkt-tag--active{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-active)}.pkt-tag--yellow.pkt-btn:active>svg,.pkt-tag--yellow.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--red{background:var(--pkt-color-surface-default-red)}.pkt-tag--red.pkt-btn:hover,.pkt-tag--red.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-hover)}.pkt-tag--red.pkt-btn:hover>svg,.pkt-tag--red.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--red.pkt-btn:focus,.pkt-tag--red.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-focus)}.pkt-tag--red.pkt-btn:focus>svg,.pkt-tag--red.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--red.pkt-btn:active,.pkt-tag--red.pkt-tag--active{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-active)}.pkt-tag--red.pkt-btn:active>svg,.pkt-tag--red.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--beige{background:var(--pkt-color-surface-default-light-beige)}.pkt-tag--beige.pkt-btn:hover,.pkt-tag--beige.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-hover)}.pkt-tag--beige.pkt-btn:hover>svg,.pkt-tag--beige.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--beige.pkt-btn:focus,.pkt-tag--beige.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-focus)}.pkt-tag--beige.pkt-btn:focus>svg,.pkt-tag--beige.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--beige.pkt-btn:active,.pkt-tag--beige.pkt-tag--active{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-active)}.pkt-tag--beige.pkt-btn:active>svg,.pkt-tag--beige.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--gray,.pkt-tag--grey{background:var(--pkt-color-surface-default-gray)}.pkt-tag--gray.pkt-btn:hover,.pkt-tag--gray.pkt-tag--hover,.pkt-tag--grey.pkt-btn:hover,.pkt-tag--grey.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-hover)}.pkt-tag--gray.pkt-btn:hover>svg,.pkt-tag--gray.pkt-tag--hover>svg,.pkt-tag--grey.pkt-btn:hover>svg,.pkt-tag--grey.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--gray.pkt-btn:focus,.pkt-tag--gray.pkt-tag--focus,.pkt-tag--grey.pkt-btn:focus,.pkt-tag--grey.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag--gray.pkt-btn:focus>svg,.pkt-tag--gray.pkt-tag--focus>svg,.pkt-tag--grey.pkt-btn:focus>svg,.pkt-tag--grey.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--gray.pkt-btn:active,.pkt-tag--gray.pkt-tag--active,.pkt-tag--grey.pkt-btn:active,.pkt-tag--grey.pkt-tag--active{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag--gray.pkt-btn:active>svg,.pkt-tag--gray.pkt-tag--active>svg,.pkt-tag--grey.pkt-btn:active>svg,.pkt-tag--grey.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--blue-light{background:var(--pkt-color-surface-subtle-light-blue)}.pkt-tag--blue-light.pkt-btn:hover,.pkt-tag--blue-light.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover)}.pkt-tag--blue-light.pkt-btn:hover>svg,.pkt-tag--blue-light.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--blue-light.pkt-btn:focus,.pkt-tag--blue-light.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-focus)}.pkt-tag--blue-light.pkt-btn:focus>svg,.pkt-tag--blue-light.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--blue-light.pkt-btn:active,.pkt-tag--blue-light.pkt-tag--active{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag--blue-light.pkt-btn:active>svg,.pkt-tag--blue-light.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--blue-dark{background:var(--pkt-color-brand-dark-blue-1000);color:var(--pkt-color-brand-neutrals-200)}.pkt-tag--blue-dark.pkt-btn:hover,.pkt-tag--blue-dark.pkt-btn:focus,.pkt-tag--blue-dark.pkt-tag--hover{background-color:var(--pkt-color-brand-warm-blue-1000);color:var(--pkt-color-brand-neutrals-200)}.pkt-tag--blue-dark .pkt-icon>svg{--fg-color: var(--pkt-color-brand-neutrals-200)}.pkt-tag--small{padding:.25rem;height:1.375rem}.pkt-tag--medium{padding:.25rem .5rem;height:1.875rem}.pkt-tag--large{padding:.25rem .5rem;height:2.25rem;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:1.75rem}.pkt-tag--normal-text{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-tag--thin-text{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}
1
+ .pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}pkt-tag{display:inline-block;vertical-align:middle}pkt-tag>.pkt-tag{display:flex}.pkt-tag{width:fit-content;background:var(--pkt-color-surface-default-light-blue);padding:.25rem .5rem;display:inline-flex;align-items:center;height:auto;column-gap:0;color:var(--pkt-color-tag-text-normal);border:0;margin:0;letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem;line-height:1.875rem}.pkt-tag.pkt-btn:hover,.pkt-tag.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover);text-decoration:underline;border-color:rgba(0,0,0,0)}.pkt-tag.pkt-btn:hover svg,.pkt-tag.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-btn:focus,.pkt-tag.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);border-color:var(--pkt-color-text-action-active);outline:4px solid var(--pkt-color-border-states-focus);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:focus svg,.pkt-tag.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:active,.pkt-tag.pkt-tag--active,.pkt-tag.pkt-tag--active:hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-btn:active svg,.pkt-tag.pkt-tag--active svg,.pkt-tag.pkt-tag--active:hover svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag__icon{width:16px;height:16px;margin-right:.5rem}.pkt-tag__close-btn{width:16px;height:16px;margin-left:.5rem}.pkt-tag--green{background:var(--pkt-color-surface-strong-light-green)}.pkt-tag--green.pkt-btn:hover,.pkt-tag--green.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-hover)}.pkt-tag--green.pkt-btn:hover svg,.pkt-tag--green.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--green.pkt-btn:focus,.pkt-tag--green.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-focus)}.pkt-tag--green.pkt-btn:focus svg,.pkt-tag--green.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--green.pkt-btn:active,.pkt-tag--green.pkt-tag--active{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-active)}.pkt-tag--green.pkt-btn:active svg,.pkt-tag--green.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--yellow{background:var(--pkt-color-surface-default-yellow)}.pkt-tag--yellow.pkt-btn:hover,.pkt-tag--yellow.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-hover)}.pkt-tag--yellow.pkt-btn:hover svg,.pkt-tag--yellow.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--yellow.pkt-btn:focus,.pkt-tag--yellow.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-focus)}.pkt-tag--yellow.pkt-btn:focus svg,.pkt-tag--yellow.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--yellow.pkt-btn:active,.pkt-tag--yellow.pkt-tag--active{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-active)}.pkt-tag--yellow.pkt-btn:active svg,.pkt-tag--yellow.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--red{background:var(--pkt-color-surface-default-red)}.pkt-tag--red.pkt-btn:hover,.pkt-tag--red.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-hover)}.pkt-tag--red.pkt-btn:hover svg,.pkt-tag--red.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--red.pkt-btn:focus,.pkt-tag--red.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-focus)}.pkt-tag--red.pkt-btn:focus svg,.pkt-tag--red.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--red.pkt-btn:active,.pkt-tag--red.pkt-tag--active{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-active)}.pkt-tag--red.pkt-btn:active svg,.pkt-tag--red.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--beige{background:var(--pkt-color-surface-default-light-beige)}.pkt-tag--beige.pkt-btn:hover,.pkt-tag--beige.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-hover)}.pkt-tag--beige.pkt-btn:hover svg,.pkt-tag--beige.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--beige.pkt-btn:focus,.pkt-tag--beige.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-focus)}.pkt-tag--beige.pkt-btn:focus svg,.pkt-tag--beige.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--beige.pkt-btn:active,.pkt-tag--beige.pkt-tag--active{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-active)}.pkt-tag--beige.pkt-btn:active svg,.pkt-tag--beige.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--gray,.pkt-tag--grey{background:var(--pkt-color-surface-default-gray)}.pkt-tag--gray.pkt-btn:hover,.pkt-tag--gray.pkt-tag--hover,.pkt-tag--grey.pkt-btn:hover,.pkt-tag--grey.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-hover)}.pkt-tag--gray.pkt-btn:hover svg,.pkt-tag--gray.pkt-tag--hover svg,.pkt-tag--grey.pkt-btn:hover svg,.pkt-tag--grey.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--gray.pkt-btn:focus,.pkt-tag--gray.pkt-tag--focus,.pkt-tag--grey.pkt-btn:focus,.pkt-tag--grey.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag--gray.pkt-btn:focus svg,.pkt-tag--gray.pkt-tag--focus svg,.pkt-tag--grey.pkt-btn:focus svg,.pkt-tag--grey.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--gray.pkt-btn:active,.pkt-tag--gray.pkt-tag--active,.pkt-tag--grey.pkt-btn:active,.pkt-tag--grey.pkt-tag--active{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag--gray.pkt-btn:active svg,.pkt-tag--gray.pkt-tag--active svg,.pkt-tag--grey.pkt-btn:active svg,.pkt-tag--grey.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--blue-light{background:var(--pkt-color-surface-subtle-light-blue)}.pkt-tag--blue-light.pkt-btn:hover,.pkt-tag--blue-light.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover)}.pkt-tag--blue-light.pkt-btn:hover svg,.pkt-tag--blue-light.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--blue-light.pkt-btn:focus,.pkt-tag--blue-light.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-focus)}.pkt-tag--blue-light.pkt-btn:focus svg,.pkt-tag--blue-light.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--blue-light.pkt-btn:active,.pkt-tag--blue-light.pkt-tag--active{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag--blue-light.pkt-btn:active svg,.pkt-tag--blue-light.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--blue-dark{background:var(--pkt-color-brand-dark-blue-1000);color:var(--pkt-color-brand-neutrals-200)}.pkt-tag--blue-dark.pkt-btn:hover,.pkt-tag--blue-dark.pkt-btn:focus,.pkt-tag--blue-dark.pkt-tag--hover{background-color:var(--pkt-color-brand-warm-blue-1000);color:var(--pkt-color-brand-neutrals-200)}.pkt-tag--blue-dark.pkt-btn:hover svg,.pkt-tag--blue-dark.pkt-btn:focus svg,.pkt-tag--blue-dark.pkt-tag--hover svg{--fg-color: var(--pkt-color-brand-neutrals-200)}.pkt-tag--blue-dark svg{--fg-color: var(--pkt-color-brand-neutrals-200)}.pkt-tag--normal-text{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-tag--thin-text{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-tag--small{padding:.25rem;line-height:1.375rem}.pkt-tag--medium{padding:.25rem .5rem;line-height:1.875rem}.pkt-tag--large{padding:.25rem .5rem;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:1.75rem;line-height:2.25rem}
package/dist/css/pkt-components.css CHANGED
@@ -2404,19 +2404,31 @@ pkt-messagebox {
2404
2404
  --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
2405
2405
  }
2406
2406
 
2407
+ pkt-tag {
2408
+ display: inline-block;
2409
+ vertical-align: middle;
2410
+ }
2411
+
2412
+ pkt-tag > .pkt-tag {
2413
+ display: flex;
2414
+ }
2415
+
2407
2416
  .pkt-tag {
2408
2417
  width: fit-content;
2409
2418
  background: var(--pkt-color-surface-default-light-blue);
2410
2419
  padding: 0.25rem 0.5rem;
2411
2420
  display: inline-flex;
2412
2421
  align-items: center;
2413
- height: 1.875rem;
2422
+ height: auto;
2414
2423
  column-gap: 0;
2415
2424
  color: var(--pkt-color-tag-text-normal);
2425
+ border: 0;
2426
+ margin: 0;
2416
2427
  letter-spacing: -0.2px;
2417
2428
  font-weight: 500;
2418
2429
  font-size: 0.875rem;
2419
2430
  line-height: 1.375rem;
2431
+ line-height: 1.875rem;
2420
2432
  }
2421
2433
  .pkt-tag.pkt-btn:hover, .pkt-tag.pkt-tag--hover {
2422
2434
  background-color: var(--pkt-color-surface-strong-blue);
@@ -2424,7 +2436,7 @@ pkt-messagebox {
2424
2436
  text-decoration: underline;
2425
2437
  border-color: transparent;
2426
2438
  }
2427
- .pkt-tag.pkt-btn:hover > svg, .pkt-tag.pkt-tag--hover > svg {
2439
+ .pkt-tag.pkt-btn:hover svg, .pkt-tag.pkt-tag--hover svg {
2428
2440
  --fg-color: var(--pkt-color-tag-text-hover);
2429
2441
  }
2430
2442
  .pkt-tag.pkt-btn:focus, .pkt-tag.pkt-tag--focus {
@@ -2433,14 +2445,14 @@ pkt-messagebox {
2433
2445
  outline: 4px solid var(--pkt-color-border-states-focus);
2434
2446
  color: var(--pkt-color-tag-text-focus);
2435
2447
  }
2436
- .pkt-tag.pkt-btn:focus > svg, .pkt-tag.pkt-tag--focus > svg {
2448
+ .pkt-tag.pkt-btn:focus svg, .pkt-tag.pkt-tag--focus svg {
2437
2449
  --fg-color: var(--pkt-color-tag-text-focus);
2438
2450
  }
2439
2451
  .pkt-tag.pkt-btn:active, .pkt-tag.pkt-tag--active, .pkt-tag.pkt-tag--active:hover {
2440
2452
  background-color: var(--pkt-color-surface-strong-blue);
2441
2453
  color: var(--pkt-color-tag-text-active);
2442
2454
  }
2443
- .pkt-tag.pkt-btn:active > svg, .pkt-tag.pkt-tag--active > svg, .pkt-tag.pkt-tag--active:hover > svg {
2455
+ .pkt-tag.pkt-btn:active svg, .pkt-tag.pkt-tag--active svg, .pkt-tag.pkt-tag--active:hover svg {
2444
2456
  --fg-color: var(--pkt-color-tag-text-active);
2445
2457
  }
2446
2458
  .pkt-tag__icon {
@@ -2460,21 +2472,21 @@ pkt-messagebox {
2460
2472
  background-color: var(--pkt-color-surface-strong-green);
2461
2473
  color: var(--pkt-color-tag-text-hover);
2462
2474
  }
2463
- .pkt-tag--green.pkt-btn:hover > svg, .pkt-tag--green.pkt-tag--hover > svg {
2475
+ .pkt-tag--green.pkt-btn:hover svg, .pkt-tag--green.pkt-tag--hover svg {
2464
2476
  --fg-color: var(--pkt-color-tag-text-hover);
2465
2477
  }
2466
2478
  .pkt-tag--green.pkt-btn:focus, .pkt-tag--green.pkt-tag--focus {
2467
2479
  background-color: var(--pkt-color-surface-strong-green);
2468
2480
  color: var(--pkt-color-tag-text-focus);
2469
2481
  }
2470
- .pkt-tag--green.pkt-btn:focus > svg, .pkt-tag--green.pkt-tag--focus > svg {
2482
+ .pkt-tag--green.pkt-btn:focus svg, .pkt-tag--green.pkt-tag--focus svg {
2471
2483
  --fg-color: var(--pkt-color-tag-text-focus);
2472
2484
  }
2473
2485
  .pkt-tag--green.pkt-btn:active, .pkt-tag--green.pkt-tag--active {
2474
2486
  background-color: var(--pkt-color-surface-strong-green);
2475
2487
  color: var(--pkt-color-tag-text-active);
2476
2488
  }
2477
- .pkt-tag--green.pkt-btn:active > svg, .pkt-tag--green.pkt-tag--active > svg {
2489
+ .pkt-tag--green.pkt-btn:active svg, .pkt-tag--green.pkt-tag--active svg {
2478
2490
  --fg-color: var(--pkt-color-tag-text-active);
2479
2491
  }
2480
2492
  .pkt-tag--yellow {
@@ -2484,21 +2496,21 @@ pkt-messagebox {
2484
2496
  background-color: var(--pkt-color-surface-strong-yellow);
2485
2497
  color: var(--pkt-color-tag-text-hover);
2486
2498
  }
2487
- .pkt-tag--yellow.pkt-btn:hover > svg, .pkt-tag--yellow.pkt-tag--hover > svg {
2499
+ .pkt-tag--yellow.pkt-btn:hover svg, .pkt-tag--yellow.pkt-tag--hover svg {
2488
2500
  --fg-color: var(--pkt-color-tag-text-hover);
2489
2501
  }
2490
2502
  .pkt-tag--yellow.pkt-btn:focus, .pkt-tag--yellow.pkt-tag--focus {
2491
2503
  background-color: var(--pkt-color-surface-strong-yellow);
2492
2504
  color: var(--pkt-color-tag-text-focus);
2493
2505
  }
2494
- .pkt-tag--yellow.pkt-btn:focus > svg, .pkt-tag--yellow.pkt-tag--focus > svg {
2506
+ .pkt-tag--yellow.pkt-btn:focus svg, .pkt-tag--yellow.pkt-tag--focus svg {
2495
2507
  --fg-color: var(--pkt-color-tag-text-focus);
2496
2508
  }
2497
2509
  .pkt-tag--yellow.pkt-btn:active, .pkt-tag--yellow.pkt-tag--active {
2498
2510
  background-color: var(--pkt-color-surface-strong-yellow);
2499
2511
  color: var(--pkt-color-tag-text-active);
2500
2512
  }
2501
- .pkt-tag--yellow.pkt-btn:active > svg, .pkt-tag--yellow.pkt-tag--active > svg {
2513
+ .pkt-tag--yellow.pkt-btn:active svg, .pkt-tag--yellow.pkt-tag--active svg {
2502
2514
  --fg-color: var(--pkt-color-tag-text-active);
2503
2515
  }
2504
2516
  .pkt-tag--red {
@@ -2508,21 +2520,21 @@ pkt-messagebox {
2508
2520
  background-color: var(--pkt-color-surface-strong-red);
2509
2521
  color: var(--pkt-color-tag-text-hover);
2510
2522
  }
2511
- .pkt-tag--red.pkt-btn:hover > svg, .pkt-tag--red.pkt-tag--hover > svg {
2523
+ .pkt-tag--red.pkt-btn:hover svg, .pkt-tag--red.pkt-tag--hover svg {
2512
2524
  --fg-color: var(--pkt-color-tag-text-hover);
2513
2525
  }
2514
2526
  .pkt-tag--red.pkt-btn:focus, .pkt-tag--red.pkt-tag--focus {
2515
2527
  background-color: var(--pkt-color-surface-strong-red);
2516
2528
  color: var(--pkt-color-tag-text-focus);
2517
2529
  }
2518
- .pkt-tag--red.pkt-btn:focus > svg, .pkt-tag--red.pkt-tag--focus > svg {
2530
+ .pkt-tag--red.pkt-btn:focus svg, .pkt-tag--red.pkt-tag--focus svg {
2519
2531
  --fg-color: var(--pkt-color-tag-text-focus);
2520
2532
  }
2521
2533
  .pkt-tag--red.pkt-btn:active, .pkt-tag--red.pkt-tag--active {
2522
2534
  background-color: var(--pkt-color-surface-strong-red);
2523
2535
  color: var(--pkt-color-tag-text-active);
2524
2536
  }
2525
- .pkt-tag--red.pkt-btn:active > svg, .pkt-tag--red.pkt-tag--active > svg {
2537
+ .pkt-tag--red.pkt-btn:active svg, .pkt-tag--red.pkt-tag--active svg {
2526
2538
  --fg-color: var(--pkt-color-tag-text-active);
2527
2539
  }
2528
2540
  .pkt-tag--beige {
@@ -2532,21 +2544,21 @@ pkt-messagebox {
2532
2544
  background-color: var(--pkt-color-surface-strong-beige);
2533
2545
  color: var(--pkt-color-tag-text-hover);
2534
2546
  }
2535
- .pkt-tag--beige.pkt-btn:hover > svg, .pkt-tag--beige.pkt-tag--hover > svg {
2547
+ .pkt-tag--beige.pkt-btn:hover svg, .pkt-tag--beige.pkt-tag--hover svg {
2536
2548
  --fg-color: var(--pkt-color-tag-text-hover);
2537
2549
  }
2538
2550
  .pkt-tag--beige.pkt-btn:focus, .pkt-tag--beige.pkt-tag--focus {
2539
2551
  background-color: var(--pkt-color-surface-strong-beige);
2540
2552
  color: var(--pkt-color-tag-text-focus);
2541
2553
  }
2542
- .pkt-tag--beige.pkt-btn:focus > svg, .pkt-tag--beige.pkt-tag--focus > svg {
2554
+ .pkt-tag--beige.pkt-btn:focus svg, .pkt-tag--beige.pkt-tag--focus svg {
2543
2555
  --fg-color: var(--pkt-color-tag-text-focus);
2544
2556
  }
2545
2557
  .pkt-tag--beige.pkt-btn:active, .pkt-tag--beige.pkt-tag--active {
2546
2558
  background-color: var(--pkt-color-surface-strong-beige);
2547
2559
  color: var(--pkt-color-tag-text-active);
2548
2560
  }
2549
- .pkt-tag--beige.pkt-btn:active > svg, .pkt-tag--beige.pkt-tag--active > svg {
2561
+ .pkt-tag--beige.pkt-btn:active svg, .pkt-tag--beige.pkt-tag--active svg {
2550
2562
  --fg-color: var(--pkt-color-tag-text-active);
2551
2563
  }
2552
2564
  .pkt-tag--gray, .pkt-tag--grey {
@@ -2556,21 +2568,21 @@ pkt-messagebox {
2556
2568
  background-color: var(--pkt-color-surface-strong-gray);
2557
2569
  color: var(--pkt-color-tag-text-hover);
2558
2570
  }
2559
- .pkt-tag--gray.pkt-btn:hover > svg, .pkt-tag--gray.pkt-tag--hover > svg, .pkt-tag--grey.pkt-btn:hover > svg, .pkt-tag--grey.pkt-tag--hover > svg {
2571
+ .pkt-tag--gray.pkt-btn:hover svg, .pkt-tag--gray.pkt-tag--hover svg, .pkt-tag--grey.pkt-btn:hover svg, .pkt-tag--grey.pkt-tag--hover svg {
2560
2572
  --fg-color: var(--pkt-color-tag-text-hover);
2561
2573
  }
2562
2574
  .pkt-tag--gray.pkt-btn:focus, .pkt-tag--gray.pkt-tag--focus, .pkt-tag--grey.pkt-btn:focus, .pkt-tag--grey.pkt-tag--focus {
2563
2575
  background-color: var(--pkt-color-surface-strong-gray);
2564
2576
  color: var(--pkt-color-tag-text-active);
2565
2577
  }
2566
- .pkt-tag--gray.pkt-btn:focus > svg, .pkt-tag--gray.pkt-tag--focus > svg, .pkt-tag--grey.pkt-btn:focus > svg, .pkt-tag--grey.pkt-tag--focus > svg {
2578
+ .pkt-tag--gray.pkt-btn:focus svg, .pkt-tag--gray.pkt-tag--focus svg, .pkt-tag--grey.pkt-btn:focus svg, .pkt-tag--grey.pkt-tag--focus svg {
2567
2579
  --fg-color: var(--pkt-color-tag-text-active);
2568
2580
  }
2569
2581
  .pkt-tag--gray.pkt-btn:active, .pkt-tag--gray.pkt-tag--active, .pkt-tag--grey.pkt-btn:active, .pkt-tag--grey.pkt-tag--active {
2570
2582
  background-color: var(--pkt-color-surface-strong-gray);
2571
2583
  color: var(--pkt-color-tag-text-active);
2572
2584
  }
2573
- .pkt-tag--gray.pkt-btn:active > svg, .pkt-tag--gray.pkt-tag--active > svg, .pkt-tag--grey.pkt-btn:active > svg, .pkt-tag--grey.pkt-tag--active > svg {
2585
+ .pkt-tag--gray.pkt-btn:active svg, .pkt-tag--gray.pkt-tag--active svg, .pkt-tag--grey.pkt-btn:active svg, .pkt-tag--grey.pkt-tag--active svg {
2574
2586
  --fg-color: var(--pkt-color-tag-text-active);
2575
2587
  }
2576
2588
  .pkt-tag--blue-light {
@@ -2580,21 +2592,21 @@ pkt-messagebox {
2580
2592
  background-color: var(--pkt-color-surface-strong-blue);
2581
2593
  color: var(--pkt-color-tag-text-hover);
2582
2594
  }
2583
- .pkt-tag--blue-light.pkt-btn:hover > svg, .pkt-tag--blue-light.pkt-tag--hover > svg {
2595
+ .pkt-tag--blue-light.pkt-btn:hover svg, .pkt-tag--blue-light.pkt-tag--hover svg {
2584
2596
  --fg-color: var(--pkt-color-tag-text-hover);
2585
2597
  }
2586
2598
  .pkt-tag--blue-light.pkt-btn:focus, .pkt-tag--blue-light.pkt-tag--focus {
2587
2599
  background-color: var(--pkt-color-surface-strong-blue);
2588
2600
  color: var(--pkt-color-tag-text-focus);
2589
2601
  }
2590
- .pkt-tag--blue-light.pkt-btn:focus > svg, .pkt-tag--blue-light.pkt-tag--focus > svg {
2602
+ .pkt-tag--blue-light.pkt-btn:focus svg, .pkt-tag--blue-light.pkt-tag--focus svg {
2591
2603
  --fg-color: var(--pkt-color-tag-text-focus);
2592
2604
  }
2593
2605
  .pkt-tag--blue-light.pkt-btn:active, .pkt-tag--blue-light.pkt-tag--active {
2594
2606
  background-color: var(--pkt-color-surface-strong-blue);
2595
2607
  color: var(--pkt-color-tag-text-active);
2596
2608
  }
2597
- .pkt-tag--blue-light.pkt-btn:active > svg, .pkt-tag--blue-light.pkt-tag--active > svg {
2609
+ .pkt-tag--blue-light.pkt-btn:active svg, .pkt-tag--blue-light.pkt-tag--active svg {
2598
2610
  --fg-color: var(--pkt-color-tag-text-active);
2599
2611
  }
2600
2612
  .pkt-tag--blue-dark {
@@ -2605,24 +2617,11 @@ pkt-messagebox {
2605
2617
  background-color: var(--pkt-color-brand-warm-blue-1000);
2606
2618
  color: var(--pkt-color-brand-neutrals-200);
2607
2619
  }
2608
- .pkt-tag--blue-dark .pkt-icon > svg {
2620
+ .pkt-tag--blue-dark.pkt-btn:hover svg, .pkt-tag--blue-dark.pkt-btn:focus svg, .pkt-tag--blue-dark.pkt-tag--hover svg {
2609
2621
  --fg-color: var(--pkt-color-brand-neutrals-200);
2610
2622
  }
2611
- .pkt-tag--small {
2612
- padding: 0.25rem;
2613
- height: 1.375rem;
2614
- }
2615
- .pkt-tag--medium {
2616
- padding: 0.25rem 0.5rem;
2617
- height: 1.875rem;
2618
- }
2619
- .pkt-tag--large {
2620
- padding: 0.25rem 0.5rem;
2621
- height: 2.25rem;
2622
- letter-spacing: -0.2px;
2623
- font-weight: 500;
2624
- font-size: 1.125rem;
2625
- line-height: 1.75rem;
2623
+ .pkt-tag--blue-dark svg {
2624
+ --fg-color: var(--pkt-color-brand-neutrals-200);
2626
2625
  }
2627
2626
  .pkt-tag--normal-text {
2628
2627
  letter-spacing: -0.2px;
@@ -2636,6 +2635,22 @@ pkt-messagebox {
2636
2635
  font-size: 0.875rem;
2637
2636
  line-height: 1.375rem;
2638
2637
  }
2638
+ .pkt-tag--small {
2639
+ padding: 0.25rem;
2640
+ line-height: 1.375rem;
2641
+ }
2642
+ .pkt-tag--medium {
2643
+ padding: 0.25rem 0.5rem;
2644
+ line-height: 1.875rem;
2645
+ }
2646
+ .pkt-tag--large {
2647
+ padding: 0.25rem 0.5rem;
2648
+ letter-spacing: -0.2px;
2649
+ font-weight: 500;
2650
+ font-size: 1.125rem;
2651
+ line-height: 1.75rem;
2652
+ line-height: 2.25rem;
2653
+ }
2639
2654
 
2640
2655
  /*
2641
2656
  * Header element