@oslokommune/punkt-css 17.0.6 → 17.0.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 (42) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/dist/css/components/tag.css +61 -45
  3. package/dist/css/components/tag.min.css +1 -1
  4. package/dist/css/pkt-base.css +13213 -13213
  5. package/dist/css/pkt-base.min.css +1 -1
  6. package/dist/css/pkt-components.css +61 -611
  7. package/dist/css/pkt-components.min.css +1 -1
  8. package/dist/css/pkt-docs.css +13240 -13467
  9. package/dist/css/pkt-docs.min.css +1 -1
  10. package/dist/css/pkt-elements.css +26 -72
  11. package/dist/css/pkt-elements.min.css +1 -1
  12. package/dist/css/pkt-grid.css +2232 -0
  13. package/dist/css/pkt-grid.min.css +1 -0
  14. package/dist/css/pkt-tokens.css +273 -0
  15. package/dist/css/pkt-tokens.min.css +1 -0
  16. package/dist/css/pkt-utilities.css +11335 -0
  17. package/dist/css/pkt-utilities.min.css +1 -0
  18. package/dist/css/pkt.css +13240 -13467
  19. package/dist/css/pkt.layer.css +24478 -0
  20. package/dist/css/pkt.layer.min.css +1 -0
  21. package/dist/css/pkt.min.css +1 -1
  22. package/dist/scss/base/_colors-tokens.scss +106 -0
  23. package/dist/scss/base/_colors-utilities.scss +43 -0
  24. package/dist/scss/base/_colors.scss +2 -144
  25. package/dist/scss/base/_index.scss +10 -3
  26. package/dist/scss/components/_index.scss +0 -2
  27. package/dist/scss/components/_tag.scss +37 -0
  28. package/dist/scss/elements/_index.scss +0 -1
  29. package/dist/scss/pkt-grid.scss +6 -0
  30. package/dist/scss/pkt-tokens.scss +5 -0
  31. package/dist/scss/pkt-utilities.scss +6 -0
  32. package/dist/scss/pkt.layer.scss +8 -0
  33. package/package.json +2 -2
  34. package/dist/css/components/preview.css +0 -180
  35. package/dist/css/components/preview.min.css +0 -1
  36. package/dist/css/components/textinput.css +0 -385
  37. package/dist/css/components/textinput.min.css +0 -1
  38. package/dist/css/elements/select.css +0 -419
  39. package/dist/css/elements/select.min.css +0 -1
  40. package/dist/scss/components/_preview.scss +0 -191
  41. package/dist/scss/components/_textinput.scss +0 -13
  42. package/dist/scss/elements/_select.scss +0 -13
package/CHANGELOG.md CHANGED
@@ -5,6 +5,45 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [17.0.8](https://github.com/oslokommune/punkt/compare/17.0.7...17.0.8) (2026-08-17)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ * @layer-støtte også i SASS (scss) (#3590).
18
+ * Flytt preview-stiler fra css-pakken til docs (#3589).
19
+ * Fjern ubrukte klasser .pkt-select og .pkt-textinput (#3587). Disse har ikke vært brukt på årevis, om i det hele tatt. Ingen breaking changes. Høvler ca **6kb** av CSS-bundle. Denne er trygg, disse stilene har aldri funket. Det er ingen referanser til dem og all bruk av dem ville resultert i ødelagt stilsetting.
20
+ * Fjern pkt-tag sin avhengighet til pkt-btn (#3586). Dette har bitt oss i stumpen flere ganger, på tide å gjøre noe med det. Har fjernet pkt-btn-klassen helt fra pkt-tag, og button vil ikke lenger påvirke tag slik det har gjort før.
21
+
22
+
23
+ ### Chores
24
+ Ingen
25
+
26
+ ---
27
+
28
+
29
+ ## [17.0.7](https://github.com/oslokommune/punkt/compare/17.0.6...17.0.7) (2026-08-14)
30
+
31
+ ### ⚠ BREAKING CHANGES
32
+ Ingen
33
+
34
+ ### Features
35
+ Ingen
36
+
37
+ ### Bug Fixes
38
+ * Bedre organisering av tokens, hjelpere og verktøy (#3585).
39
+
40
+
41
+ ### Chores
42
+ Ingen
43
+
44
+ ---
45
+
46
+
8
47
  ## [17.0.6](https://github.com/oslokommune/punkt/compare/17.0.5...17.0.6) (2026-08-13)
9
48
 
10
49
  ### ⚠ BREAKING CHANGES
package/dist/css/components/tag.css CHANGED
@@ -24,8 +24,22 @@ pkt-tag > .pkt-tag {
24
24
  display: flex;
25
25
  }
26
26
 
27
+ button.pkt-tag {
28
+ appearance: none;
29
+ border-radius: 0;
30
+ cursor: pointer;
31
+ font-family: inherit;
32
+ justify-content: center;
33
+ text-align: left;
34
+ text-decoration: none;
35
+ text-decoration-thickness: 1px;
36
+ text-underline-offset: 0.3em;
37
+ user-select: none;
38
+ }
39
+
27
40
  .pkt-tag {
28
41
  width: fit-content;
42
+ vertical-align: middle;
29
43
  background: var(--pkt-color-surface-default-light-blue);
30
44
  padding: 0 0.5rem;
31
45
  display: inline-flex;
@@ -45,29 +59,29 @@ pkt-tag > .pkt-tag {
45
59
  padding: 0;
46
60
  line-height: inherit;
47
61
  }
48
- .pkt-tag.pkt-btn:hover, .pkt-tag.pkt-tag--hover {
62
+ .pkt-tag.pkt-btn:hover, .pkt-tag:is(button):hover, .pkt-tag.pkt-tag--hover {
49
63
  background-color: var(--pkt-color-surface-strong-blue);
50
64
  color: var(--pkt-color-tag-text-hover);
51
65
  text-decoration: underline;
52
66
  border-color: transparent;
53
67
  }
54
- .pkt-tag.pkt-btn:hover svg, .pkt-tag.pkt-tag--hover svg {
68
+ .pkt-tag.pkt-btn:hover svg, .pkt-tag:is(button):hover svg, .pkt-tag.pkt-tag--hover svg {
55
69
  --fg-color: var(--pkt-color-tag-text-hover);
56
70
  }
57
- .pkt-tag.pkt-btn:focus, .pkt-tag.pkt-tag--focus {
71
+ .pkt-tag.pkt-btn:focus, .pkt-tag:is(button):focus, .pkt-tag.pkt-tag--focus {
58
72
  background-color: var(--pkt-color-surface-strong-blue);
59
73
  border-color: var(--pkt-color-text-action-active);
60
74
  outline: 4px solid var(--pkt-color-border-states-focus);
61
75
  color: var(--pkt-color-tag-text-focus);
62
76
  }
63
- .pkt-tag.pkt-btn:focus svg, .pkt-tag.pkt-tag--focus svg {
77
+ .pkt-tag.pkt-btn:focus svg, .pkt-tag:is(button):focus svg, .pkt-tag.pkt-tag--focus svg {
64
78
  --fg-color: var(--pkt-color-tag-text-focus);
65
79
  }
66
- .pkt-tag.pkt-btn:active, .pkt-tag.pkt-tag--active, .pkt-tag.pkt-tag--active:hover {
80
+ .pkt-tag.pkt-btn:active, .pkt-tag:is(button):active, .pkt-tag.pkt-tag--active, .pkt-tag.pkt-tag--active:hover {
67
81
  background-color: var(--pkt-color-surface-strong-blue);
68
82
  color: var(--pkt-color-tag-text-active);
69
83
  }
70
- .pkt-tag.pkt-btn:active svg, .pkt-tag.pkt-tag--active svg, .pkt-tag.pkt-tag--active:hover svg {
84
+ .pkt-tag.pkt-btn:active svg, .pkt-tag:is(button):active svg, .pkt-tag.pkt-tag--active svg, .pkt-tag.pkt-tag--active:hover svg {
71
85
  --fg-color: var(--pkt-color-tag-text-active);
72
86
  }
73
87
  .pkt-tag__icon {
@@ -83,145 +97,145 @@ pkt-tag > .pkt-tag {
83
97
  .pkt-tag.pkt-tag--green {
84
98
  background: var(--pkt-color-surface-strong-light-green);
85
99
  }
86
- .pkt-tag.pkt-tag--green.pkt-btn:hover, .pkt-tag.pkt-tag--green.pkt-tag--hover {
100
+ .pkt-tag.pkt-tag--green.pkt-btn:hover, .pkt-tag.pkt-tag--green:is(button):hover, .pkt-tag.pkt-tag--green.pkt-tag--hover {
87
101
  background-color: var(--pkt-color-surface-strong-green);
88
102
  color: var(--pkt-color-tag-text-hover);
89
103
  }
90
- .pkt-tag.pkt-tag--green.pkt-btn:hover svg, .pkt-tag.pkt-tag--green.pkt-tag--hover svg {
104
+ .pkt-tag.pkt-tag--green.pkt-btn:hover svg, .pkt-tag.pkt-tag--green:is(button):hover svg, .pkt-tag.pkt-tag--green.pkt-tag--hover svg {
91
105
  --fg-color: var(--pkt-color-tag-text-hover);
92
106
  }
93
- .pkt-tag.pkt-tag--green.pkt-btn:focus, .pkt-tag.pkt-tag--green.pkt-tag--focus {
107
+ .pkt-tag.pkt-tag--green.pkt-btn:focus, .pkt-tag.pkt-tag--green:is(button):focus, .pkt-tag.pkt-tag--green.pkt-tag--focus {
94
108
  background-color: var(--pkt-color-surface-strong-green);
95
109
  color: var(--pkt-color-tag-text-focus);
96
110
  }
97
- .pkt-tag.pkt-tag--green.pkt-btn:focus svg, .pkt-tag.pkt-tag--green.pkt-tag--focus svg {
111
+ .pkt-tag.pkt-tag--green.pkt-btn:focus svg, .pkt-tag.pkt-tag--green:is(button):focus svg, .pkt-tag.pkt-tag--green.pkt-tag--focus svg {
98
112
  --fg-color: var(--pkt-color-tag-text-focus);
99
113
  }
100
- .pkt-tag.pkt-tag--green.pkt-btn:active, .pkt-tag.pkt-tag--green.pkt-tag--active {
114
+ .pkt-tag.pkt-tag--green.pkt-btn:active, .pkt-tag.pkt-tag--green:is(button):active, .pkt-tag.pkt-tag--green.pkt-tag--active {
101
115
  background-color: var(--pkt-color-surface-strong-green);
102
116
  color: var(--pkt-color-tag-text-active);
103
117
  }
104
- .pkt-tag.pkt-tag--green.pkt-btn:active svg, .pkt-tag.pkt-tag--green.pkt-tag--active svg {
118
+ .pkt-tag.pkt-tag--green.pkt-btn:active svg, .pkt-tag.pkt-tag--green:is(button):active svg, .pkt-tag.pkt-tag--green.pkt-tag--active svg {
105
119
  --fg-color: var(--pkt-color-tag-text-active);
106
120
  }
107
121
  .pkt-tag.pkt-tag--yellow {
108
122
  background: var(--pkt-color-surface-default-yellow);
109
123
  }
110
- .pkt-tag.pkt-tag--yellow.pkt-btn:hover, .pkt-tag.pkt-tag--yellow.pkt-tag--hover {
124
+ .pkt-tag.pkt-tag--yellow.pkt-btn:hover, .pkt-tag.pkt-tag--yellow:is(button):hover, .pkt-tag.pkt-tag--yellow.pkt-tag--hover {
111
125
  background-color: var(--pkt-color-surface-strong-yellow);
112
126
  color: var(--pkt-color-tag-text-hover);
113
127
  }
114
- .pkt-tag.pkt-tag--yellow.pkt-btn:hover svg, .pkt-tag.pkt-tag--yellow.pkt-tag--hover svg {
128
+ .pkt-tag.pkt-tag--yellow.pkt-btn:hover svg, .pkt-tag.pkt-tag--yellow:is(button):hover svg, .pkt-tag.pkt-tag--yellow.pkt-tag--hover svg {
115
129
  --fg-color: var(--pkt-color-tag-text-hover);
116
130
  }
117
- .pkt-tag.pkt-tag--yellow.pkt-btn:focus, .pkt-tag.pkt-tag--yellow.pkt-tag--focus {
131
+ .pkt-tag.pkt-tag--yellow.pkt-btn:focus, .pkt-tag.pkt-tag--yellow:is(button):focus, .pkt-tag.pkt-tag--yellow.pkt-tag--focus {
118
132
  background-color: var(--pkt-color-surface-strong-yellow);
119
133
  color: var(--pkt-color-tag-text-focus);
120
134
  }
121
- .pkt-tag.pkt-tag--yellow.pkt-btn:focus svg, .pkt-tag.pkt-tag--yellow.pkt-tag--focus svg {
135
+ .pkt-tag.pkt-tag--yellow.pkt-btn:focus svg, .pkt-tag.pkt-tag--yellow:is(button):focus svg, .pkt-tag.pkt-tag--yellow.pkt-tag--focus svg {
122
136
  --fg-color: var(--pkt-color-tag-text-focus);
123
137
  }
124
- .pkt-tag.pkt-tag--yellow.pkt-btn:active, .pkt-tag.pkt-tag--yellow.pkt-tag--active {
138
+ .pkt-tag.pkt-tag--yellow.pkt-btn:active, .pkt-tag.pkt-tag--yellow:is(button):active, .pkt-tag.pkt-tag--yellow.pkt-tag--active {
125
139
  background-color: var(--pkt-color-surface-strong-yellow);
126
140
  color: var(--pkt-color-tag-text-active);
127
141
  }
128
- .pkt-tag.pkt-tag--yellow.pkt-btn:active svg, .pkt-tag.pkt-tag--yellow.pkt-tag--active svg {
142
+ .pkt-tag.pkt-tag--yellow.pkt-btn:active svg, .pkt-tag.pkt-tag--yellow:is(button):active svg, .pkt-tag.pkt-tag--yellow.pkt-tag--active svg {
129
143
  --fg-color: var(--pkt-color-tag-text-active);
130
144
  }
131
145
  .pkt-tag.pkt-tag--red {
132
146
  background: var(--pkt-color-surface-default-red);
133
147
  }
134
- .pkt-tag.pkt-tag--red.pkt-btn:hover, .pkt-tag.pkt-tag--red.pkt-tag--hover {
148
+ .pkt-tag.pkt-tag--red.pkt-btn:hover, .pkt-tag.pkt-tag--red:is(button):hover, .pkt-tag.pkt-tag--red.pkt-tag--hover {
135
149
  background-color: var(--pkt-color-surface-strong-red);
136
150
  color: var(--pkt-color-tag-text-hover);
137
151
  }
138
- .pkt-tag.pkt-tag--red.pkt-btn:hover svg, .pkt-tag.pkt-tag--red.pkt-tag--hover svg {
152
+ .pkt-tag.pkt-tag--red.pkt-btn:hover svg, .pkt-tag.pkt-tag--red:is(button):hover svg, .pkt-tag.pkt-tag--red.pkt-tag--hover svg {
139
153
  --fg-color: var(--pkt-color-tag-text-hover);
140
154
  }
141
- .pkt-tag.pkt-tag--red.pkt-btn:focus, .pkt-tag.pkt-tag--red.pkt-tag--focus {
155
+ .pkt-tag.pkt-tag--red.pkt-btn:focus, .pkt-tag.pkt-tag--red:is(button):focus, .pkt-tag.pkt-tag--red.pkt-tag--focus {
142
156
  background-color: var(--pkt-color-surface-strong-red);
143
157
  color: var(--pkt-color-tag-text-focus);
144
158
  }
145
- .pkt-tag.pkt-tag--red.pkt-btn:focus svg, .pkt-tag.pkt-tag--red.pkt-tag--focus svg {
159
+ .pkt-tag.pkt-tag--red.pkt-btn:focus svg, .pkt-tag.pkt-tag--red:is(button):focus svg, .pkt-tag.pkt-tag--red.pkt-tag--focus svg {
146
160
  --fg-color: var(--pkt-color-tag-text-focus);
147
161
  }
148
- .pkt-tag.pkt-tag--red.pkt-btn:active, .pkt-tag.pkt-tag--red.pkt-tag--active {
162
+ .pkt-tag.pkt-tag--red.pkt-btn:active, .pkt-tag.pkt-tag--red:is(button):active, .pkt-tag.pkt-tag--red.pkt-tag--active {
149
163
  background-color: var(--pkt-color-surface-strong-red);
150
164
  color: var(--pkt-color-tag-text-active);
151
165
  }
152
- .pkt-tag.pkt-tag--red.pkt-btn:active svg, .pkt-tag.pkt-tag--red.pkt-tag--active svg {
166
+ .pkt-tag.pkt-tag--red.pkt-btn:active svg, .pkt-tag.pkt-tag--red:is(button):active svg, .pkt-tag.pkt-tag--red.pkt-tag--active svg {
153
167
  --fg-color: var(--pkt-color-tag-text-active);
154
168
  }
155
169
  .pkt-tag.pkt-tag--beige {
156
170
  background: var(--pkt-color-surface-default-light-beige);
157
171
  }
158
- .pkt-tag.pkt-tag--beige.pkt-btn:hover, .pkt-tag.pkt-tag--beige.pkt-tag--hover {
172
+ .pkt-tag.pkt-tag--beige.pkt-btn:hover, .pkt-tag.pkt-tag--beige:is(button):hover, .pkt-tag.pkt-tag--beige.pkt-tag--hover {
159
173
  background-color: var(--pkt-color-surface-strong-beige);
160
174
  color: var(--pkt-color-tag-text-hover);
161
175
  }
162
- .pkt-tag.pkt-tag--beige.pkt-btn:hover svg, .pkt-tag.pkt-tag--beige.pkt-tag--hover svg {
176
+ .pkt-tag.pkt-tag--beige.pkt-btn:hover svg, .pkt-tag.pkt-tag--beige:is(button):hover svg, .pkt-tag.pkt-tag--beige.pkt-tag--hover svg {
163
177
  --fg-color: var(--pkt-color-tag-text-hover);
164
178
  }
165
- .pkt-tag.pkt-tag--beige.pkt-btn:focus, .pkt-tag.pkt-tag--beige.pkt-tag--focus {
179
+ .pkt-tag.pkt-tag--beige.pkt-btn:focus, .pkt-tag.pkt-tag--beige:is(button):focus, .pkt-tag.pkt-tag--beige.pkt-tag--focus {
166
180
  background-color: var(--pkt-color-surface-strong-beige);
167
181
  color: var(--pkt-color-tag-text-focus);
168
182
  }
169
- .pkt-tag.pkt-tag--beige.pkt-btn:focus svg, .pkt-tag.pkt-tag--beige.pkt-tag--focus svg {
183
+ .pkt-tag.pkt-tag--beige.pkt-btn:focus svg, .pkt-tag.pkt-tag--beige:is(button):focus svg, .pkt-tag.pkt-tag--beige.pkt-tag--focus svg {
170
184
  --fg-color: var(--pkt-color-tag-text-focus);
171
185
  }
172
- .pkt-tag.pkt-tag--beige.pkt-btn:active, .pkt-tag.pkt-tag--beige.pkt-tag--active {
186
+ .pkt-tag.pkt-tag--beige.pkt-btn:active, .pkt-tag.pkt-tag--beige:is(button):active, .pkt-tag.pkt-tag--beige.pkt-tag--active {
173
187
  background-color: var(--pkt-color-surface-strong-beige);
174
188
  color: var(--pkt-color-tag-text-active);
175
189
  }
176
- .pkt-tag.pkt-tag--beige.pkt-btn:active svg, .pkt-tag.pkt-tag--beige.pkt-tag--active svg {
190
+ .pkt-tag.pkt-tag--beige.pkt-btn:active svg, .pkt-tag.pkt-tag--beige:is(button):active svg, .pkt-tag.pkt-tag--beige.pkt-tag--active svg {
177
191
  --fg-color: var(--pkt-color-tag-text-active);
178
192
  }
179
193
  .pkt-tag.pkt-tag--gray, .pkt-tag.pkt-tag--grey {
180
194
  background: var(--pkt-color-surface-default-gray);
181
195
  }
182
- .pkt-tag.pkt-tag--gray.pkt-btn:hover, .pkt-tag.pkt-tag--gray.pkt-tag--hover, .pkt-tag.pkt-tag--grey.pkt-btn:hover, .pkt-tag.pkt-tag--grey.pkt-tag--hover {
196
+ .pkt-tag.pkt-tag--gray.pkt-btn:hover, .pkt-tag.pkt-tag--gray:is(button):hover, .pkt-tag.pkt-tag--gray.pkt-tag--hover, .pkt-tag.pkt-tag--grey.pkt-btn:hover, .pkt-tag.pkt-tag--grey:is(button):hover, .pkt-tag.pkt-tag--grey.pkt-tag--hover {
183
197
  background-color: var(--pkt-color-surface-strong-gray);
184
198
  color: var(--pkt-color-tag-text-hover);
185
199
  }
186
- .pkt-tag.pkt-tag--gray.pkt-btn:hover svg, .pkt-tag.pkt-tag--gray.pkt-tag--hover svg, .pkt-tag.pkt-tag--grey.pkt-btn:hover svg, .pkt-tag.pkt-tag--grey.pkt-tag--hover svg {
200
+ .pkt-tag.pkt-tag--gray.pkt-btn:hover svg, .pkt-tag.pkt-tag--gray:is(button):hover svg, .pkt-tag.pkt-tag--gray.pkt-tag--hover svg, .pkt-tag.pkt-tag--grey.pkt-btn:hover svg, .pkt-tag.pkt-tag--grey:is(button):hover svg, .pkt-tag.pkt-tag--grey.pkt-tag--hover svg {
187
201
  --fg-color: var(--pkt-color-tag-text-hover);
188
202
  }
189
- .pkt-tag.pkt-tag--gray.pkt-btn:focus, .pkt-tag.pkt-tag--gray.pkt-tag--focus, .pkt-tag.pkt-tag--grey.pkt-btn:focus, .pkt-tag.pkt-tag--grey.pkt-tag--focus {
203
+ .pkt-tag.pkt-tag--gray.pkt-btn:focus, .pkt-tag.pkt-tag--gray:is(button):focus, .pkt-tag.pkt-tag--gray.pkt-tag--focus, .pkt-tag.pkt-tag--grey.pkt-btn:focus, .pkt-tag.pkt-tag--grey:is(button):focus, .pkt-tag.pkt-tag--grey.pkt-tag--focus {
190
204
  background-color: var(--pkt-color-surface-strong-gray);
191
205
  color: var(--pkt-color-tag-text-active);
192
206
  }
193
- .pkt-tag.pkt-tag--gray.pkt-btn:focus svg, .pkt-tag.pkt-tag--gray.pkt-tag--focus svg, .pkt-tag.pkt-tag--grey.pkt-btn:focus svg, .pkt-tag.pkt-tag--grey.pkt-tag--focus svg {
207
+ .pkt-tag.pkt-tag--gray.pkt-btn:focus svg, .pkt-tag.pkt-tag--gray:is(button):focus svg, .pkt-tag.pkt-tag--gray.pkt-tag--focus svg, .pkt-tag.pkt-tag--grey.pkt-btn:focus svg, .pkt-tag.pkt-tag--grey:is(button):focus svg, .pkt-tag.pkt-tag--grey.pkt-tag--focus svg {
194
208
  --fg-color: var(--pkt-color-tag-text-active);
195
209
  }
196
- .pkt-tag.pkt-tag--gray.pkt-btn:active, .pkt-tag.pkt-tag--gray.pkt-tag--active, .pkt-tag.pkt-tag--grey.pkt-btn:active, .pkt-tag.pkt-tag--grey.pkt-tag--active {
210
+ .pkt-tag.pkt-tag--gray.pkt-btn:active, .pkt-tag.pkt-tag--gray:is(button):active, .pkt-tag.pkt-tag--gray.pkt-tag--active, .pkt-tag.pkt-tag--grey.pkt-btn:active, .pkt-tag.pkt-tag--grey:is(button):active, .pkt-tag.pkt-tag--grey.pkt-tag--active {
197
211
  background-color: var(--pkt-color-surface-strong-gray);
198
212
  color: var(--pkt-color-tag-text-active);
199
213
  }
200
- .pkt-tag.pkt-tag--gray.pkt-btn:active svg, .pkt-tag.pkt-tag--gray.pkt-tag--active svg, .pkt-tag.pkt-tag--grey.pkt-btn:active svg, .pkt-tag.pkt-tag--grey.pkt-tag--active svg {
214
+ .pkt-tag.pkt-tag--gray.pkt-btn:active svg, .pkt-tag.pkt-tag--gray:is(button):active svg, .pkt-tag.pkt-tag--gray.pkt-tag--active svg, .pkt-tag.pkt-tag--grey.pkt-btn:active svg, .pkt-tag.pkt-tag--grey:is(button):active svg, .pkt-tag.pkt-tag--grey.pkt-tag--active svg {
201
215
  --fg-color: var(--pkt-color-tag-text-active);
202
216
  }
203
217
  .pkt-tag.pkt-tag--blue-light {
204
218
  background: var(--pkt-color-surface-subtle-light-blue);
205
219
  }
206
- .pkt-tag.pkt-tag--blue-light.pkt-btn:hover, .pkt-tag.pkt-tag--blue-light.pkt-tag--hover {
220
+ .pkt-tag.pkt-tag--blue-light.pkt-btn:hover, .pkt-tag.pkt-tag--blue-light:is(button):hover, .pkt-tag.pkt-tag--blue-light.pkt-tag--hover {
207
221
  background-color: var(--pkt-color-surface-strong-blue);
208
222
  color: var(--pkt-color-tag-text-hover);
209
223
  }
210
- .pkt-tag.pkt-tag--blue-light.pkt-btn:hover svg, .pkt-tag.pkt-tag--blue-light.pkt-tag--hover svg {
224
+ .pkt-tag.pkt-tag--blue-light.pkt-btn:hover svg, .pkt-tag.pkt-tag--blue-light:is(button):hover svg, .pkt-tag.pkt-tag--blue-light.pkt-tag--hover svg {
211
225
  --fg-color: var(--pkt-color-tag-text-hover);
212
226
  }
213
- .pkt-tag.pkt-tag--blue-light.pkt-btn:focus, .pkt-tag.pkt-tag--blue-light.pkt-tag--focus {
227
+ .pkt-tag.pkt-tag--blue-light.pkt-btn:focus, .pkt-tag.pkt-tag--blue-light:is(button):focus, .pkt-tag.pkt-tag--blue-light.pkt-tag--focus {
214
228
  background-color: var(--pkt-color-surface-strong-blue);
215
229
  color: var(--pkt-color-tag-text-focus);
216
230
  }
217
- .pkt-tag.pkt-tag--blue-light.pkt-btn:focus svg, .pkt-tag.pkt-tag--blue-light.pkt-tag--focus svg {
231
+ .pkt-tag.pkt-tag--blue-light.pkt-btn:focus svg, .pkt-tag.pkt-tag--blue-light:is(button):focus svg, .pkt-tag.pkt-tag--blue-light.pkt-tag--focus svg {
218
232
  --fg-color: var(--pkt-color-tag-text-focus);
219
233
  }
220
- .pkt-tag.pkt-tag--blue-light.pkt-btn:active, .pkt-tag.pkt-tag--blue-light.pkt-tag--active {
234
+ .pkt-tag.pkt-tag--blue-light.pkt-btn:active, .pkt-tag.pkt-tag--blue-light:is(button):active, .pkt-tag.pkt-tag--blue-light.pkt-tag--active {
221
235
  background-color: var(--pkt-color-surface-strong-blue);
222
236
  color: var(--pkt-color-tag-text-active);
223
237
  }
224
- .pkt-tag.pkt-tag--blue-light.pkt-btn:active svg, .pkt-tag.pkt-tag--blue-light.pkt-tag--active svg {
238
+ .pkt-tag.pkt-tag--blue-light.pkt-btn:active svg, .pkt-tag.pkt-tag--blue-light:is(button):active svg, .pkt-tag.pkt-tag--blue-light.pkt-tag--active svg {
225
239
  --fg-color: var(--pkt-color-tag-text-active);
226
240
  }
227
241
  .pkt-tag.pkt-tag--blue-dark {
@@ -229,13 +243,15 @@ pkt-tag > .pkt-tag {
229
243
  color: var(--pkt-color-brand-neutrals-200);
230
244
  --fg-color: var(--pkt-color-brand-neutrals-200);
231
245
  }
232
- .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover {
246
+ .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover, .pkt-tag.pkt-tag--blue-dark:is(button):hover, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus, .pkt-tag.pkt-tag--blue-dark:is(button):focus, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover {
233
247
  background-color: var(--pkt-color-brand-warm-blue-1000) !important;
234
248
  color: var(--pkt-color-brand-neutrals-200) !important;
235
249
  }
236
250
  .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,
237
- .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover svg, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,
238
- .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus svg, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover,
251
+ .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover svg, .pkt-tag.pkt-tag--blue-dark:is(button):hover,
252
+ .pkt-tag.pkt-tag--blue-dark:is(button):hover svg, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,
253
+ .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus svg, .pkt-tag.pkt-tag--blue-dark:is(button):focus,
254
+ .pkt-tag.pkt-tag--blue-dark:is(button):focus svg, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover,
239
255
  .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover svg {
240
256
  --fg-color: var(--pkt-color-brand-neutrals-200) !important;
241
257
  }
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{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:0 .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.875rem}.pkt-tag p{margin:0;padding:0;line-height:inherit}.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-inline-end:.5rem}.pkt-tag__close-btn{width:16px;height:16px;margin-inline-start:.5rem}.pkt-tag.pkt-tag--green{background:var(--pkt-color-surface-strong-light-green)}.pkt-tag.pkt-tag--green.pkt-btn:hover,.pkt-tag.pkt-tag--green.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--green.pkt-btn:hover svg,.pkt-tag.pkt-tag--green.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--green.pkt-btn:focus,.pkt-tag.pkt-tag--green.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--green.pkt-btn:focus svg,.pkt-tag.pkt-tag--green.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--green.pkt-btn:active,.pkt-tag.pkt-tag--green.pkt-tag--active{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--green.pkt-btn:active svg,.pkt-tag.pkt-tag--green.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--yellow{background:var(--pkt-color-surface-default-yellow)}.pkt-tag.pkt-tag--yellow.pkt-btn:hover,.pkt-tag.pkt-tag--yellow.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--yellow.pkt-btn:hover svg,.pkt-tag.pkt-tag--yellow.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--yellow.pkt-btn:focus,.pkt-tag.pkt-tag--yellow.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--yellow.pkt-btn:focus svg,.pkt-tag.pkt-tag--yellow.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--yellow.pkt-btn:active,.pkt-tag.pkt-tag--yellow.pkt-tag--active{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--yellow.pkt-btn:active svg,.pkt-tag.pkt-tag--yellow.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--red{background:var(--pkt-color-surface-default-red)}.pkt-tag.pkt-tag--red.pkt-btn:hover,.pkt-tag.pkt-tag--red.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--red.pkt-btn:hover svg,.pkt-tag.pkt-tag--red.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--red.pkt-btn:focus,.pkt-tag.pkt-tag--red.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--red.pkt-btn:focus svg,.pkt-tag.pkt-tag--red.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--red.pkt-btn:active,.pkt-tag.pkt-tag--red.pkt-tag--active{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--red.pkt-btn:active svg,.pkt-tag.pkt-tag--red.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--beige{background:var(--pkt-color-surface-default-light-beige)}.pkt-tag.pkt-tag--beige.pkt-btn:hover,.pkt-tag.pkt-tag--beige.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--beige.pkt-btn:hover svg,.pkt-tag.pkt-tag--beige.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--beige.pkt-btn:focus,.pkt-tag.pkt-tag--beige.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--beige.pkt-btn:focus svg,.pkt-tag.pkt-tag--beige.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--beige.pkt-btn:active,.pkt-tag.pkt-tag--beige.pkt-tag--active{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--beige.pkt-btn:active svg,.pkt-tag.pkt-tag--beige.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray,.pkt-tag.pkt-tag--grey{background:var(--pkt-color-surface-default-gray)}.pkt-tag.pkt-tag--gray.pkt-btn:hover,.pkt-tag.pkt-tag--gray.pkt-tag--hover,.pkt-tag.pkt-tag--grey.pkt-btn:hover,.pkt-tag.pkt-tag--grey.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--gray.pkt-btn:hover svg,.pkt-tag.pkt-tag--gray.pkt-tag--hover svg,.pkt-tag.pkt-tag--grey.pkt-btn:hover svg,.pkt-tag.pkt-tag--grey.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--gray.pkt-btn:focus,.pkt-tag.pkt-tag--gray.pkt-tag--focus,.pkt-tag.pkt-tag--grey.pkt-btn:focus,.pkt-tag.pkt-tag--grey.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray.pkt-btn:focus svg,.pkt-tag.pkt-tag--gray.pkt-tag--focus svg,.pkt-tag.pkt-tag--grey.pkt-btn:focus svg,.pkt-tag.pkt-tag--grey.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray.pkt-btn:active,.pkt-tag.pkt-tag--gray.pkt-tag--active,.pkt-tag.pkt-tag--grey.pkt-btn:active,.pkt-tag.pkt-tag--grey.pkt-tag--active{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray.pkt-btn:active svg,.pkt-tag.pkt-tag--gray.pkt-tag--active svg,.pkt-tag.pkt-tag--grey.pkt-btn:active svg,.pkt-tag.pkt-tag--grey.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--blue-light{background:var(--pkt-color-surface-subtle-light-blue)}.pkt-tag.pkt-tag--blue-light.pkt-btn:hover,.pkt-tag.pkt-tag--blue-light.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--blue-light.pkt-btn:hover svg,.pkt-tag.pkt-tag--blue-light.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--blue-light.pkt-btn:focus,.pkt-tag.pkt-tag--blue-light.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--blue-light.pkt-btn:focus svg,.pkt-tag.pkt-tag--blue-light.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--blue-light.pkt-btn:active,.pkt-tag.pkt-tag--blue-light.pkt-tag--active{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--blue-light.pkt-btn:active svg,.pkt-tag.pkt-tag--blue-light.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--blue-dark{background:var(--pkt-color-brand-dark-blue-1000);color:var(--pkt-color-brand-neutrals-200);--fg-color: var(--pkt-color-brand-neutrals-200)}.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover{background-color:var(--pkt-color-brand-warm-blue-1000) !important;color:var(--pkt-color-brand-neutrals-200) !important}.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover svg,.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus svg,.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover,.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover svg{--fg-color: var(--pkt-color-brand-neutrals-200) !important}.pkt-tag.pkt-tag--small{padding:0 .25rem;line-height:1.375rem}.pkt-tag.pkt-tag--medium{padding:0 .5rem;line-height:1.875rem}.pkt-tag.pkt-tag--large{padding:0 .5rem;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:2.25rem}.pkt-tag.pkt-tag--normal-text{letter-spacing:-0.2px;font-weight:500;font-size:.875rem}.pkt-tag.pkt-tag--thin-text{letter-spacing:-0.2px;font-weight:300;font-size:.875rem}
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}button.pkt-tag{appearance:none;border-radius:0;cursor:pointer;font-family:inherit;justify-content:center;text-align:left;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.3em;user-select:none}.pkt-tag{width:fit-content;vertical-align:middle;background:var(--pkt-color-surface-default-light-blue);padding:0 .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.875rem}.pkt-tag p{margin:0;padding:0;line-height:inherit}.pkt-tag.pkt-btn:hover,.pkt-tag:is(button):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:is(button):hover svg,.pkt-tag.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-btn:focus,.pkt-tag:is(button):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:is(button):focus svg,.pkt-tag.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:active,.pkt-tag:is(button):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:is(button):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-inline-end:.5rem}.pkt-tag__close-btn{width:16px;height:16px;margin-inline-start:.5rem}.pkt-tag.pkt-tag--green{background:var(--pkt-color-surface-strong-light-green)}.pkt-tag.pkt-tag--green.pkt-btn:hover,.pkt-tag.pkt-tag--green:is(button):hover,.pkt-tag.pkt-tag--green.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--green.pkt-btn:hover svg,.pkt-tag.pkt-tag--green:is(button):hover svg,.pkt-tag.pkt-tag--green.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--green.pkt-btn:focus,.pkt-tag.pkt-tag--green:is(button):focus,.pkt-tag.pkt-tag--green.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--green.pkt-btn:focus svg,.pkt-tag.pkt-tag--green:is(button):focus svg,.pkt-tag.pkt-tag--green.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--green.pkt-btn:active,.pkt-tag.pkt-tag--green:is(button):active,.pkt-tag.pkt-tag--green.pkt-tag--active{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--green.pkt-btn:active svg,.pkt-tag.pkt-tag--green:is(button):active svg,.pkt-tag.pkt-tag--green.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--yellow{background:var(--pkt-color-surface-default-yellow)}.pkt-tag.pkt-tag--yellow.pkt-btn:hover,.pkt-tag.pkt-tag--yellow:is(button):hover,.pkt-tag.pkt-tag--yellow.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--yellow.pkt-btn:hover svg,.pkt-tag.pkt-tag--yellow:is(button):hover svg,.pkt-tag.pkt-tag--yellow.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--yellow.pkt-btn:focus,.pkt-tag.pkt-tag--yellow:is(button):focus,.pkt-tag.pkt-tag--yellow.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--yellow.pkt-btn:focus svg,.pkt-tag.pkt-tag--yellow:is(button):focus svg,.pkt-tag.pkt-tag--yellow.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--yellow.pkt-btn:active,.pkt-tag.pkt-tag--yellow:is(button):active,.pkt-tag.pkt-tag--yellow.pkt-tag--active{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--yellow.pkt-btn:active svg,.pkt-tag.pkt-tag--yellow:is(button):active svg,.pkt-tag.pkt-tag--yellow.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--red{background:var(--pkt-color-surface-default-red)}.pkt-tag.pkt-tag--red.pkt-btn:hover,.pkt-tag.pkt-tag--red:is(button):hover,.pkt-tag.pkt-tag--red.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--red.pkt-btn:hover svg,.pkt-tag.pkt-tag--red:is(button):hover svg,.pkt-tag.pkt-tag--red.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--red.pkt-btn:focus,.pkt-tag.pkt-tag--red:is(button):focus,.pkt-tag.pkt-tag--red.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--red.pkt-btn:focus svg,.pkt-tag.pkt-tag--red:is(button):focus svg,.pkt-tag.pkt-tag--red.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--red.pkt-btn:active,.pkt-tag.pkt-tag--red:is(button):active,.pkt-tag.pkt-tag--red.pkt-tag--active{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--red.pkt-btn:active svg,.pkt-tag.pkt-tag--red:is(button):active svg,.pkt-tag.pkt-tag--red.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--beige{background:var(--pkt-color-surface-default-light-beige)}.pkt-tag.pkt-tag--beige.pkt-btn:hover,.pkt-tag.pkt-tag--beige:is(button):hover,.pkt-tag.pkt-tag--beige.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--beige.pkt-btn:hover svg,.pkt-tag.pkt-tag--beige:is(button):hover svg,.pkt-tag.pkt-tag--beige.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--beige.pkt-btn:focus,.pkt-tag.pkt-tag--beige:is(button):focus,.pkt-tag.pkt-tag--beige.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--beige.pkt-btn:focus svg,.pkt-tag.pkt-tag--beige:is(button):focus svg,.pkt-tag.pkt-tag--beige.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--beige.pkt-btn:active,.pkt-tag.pkt-tag--beige:is(button):active,.pkt-tag.pkt-tag--beige.pkt-tag--active{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--beige.pkt-btn:active svg,.pkt-tag.pkt-tag--beige:is(button):active svg,.pkt-tag.pkt-tag--beige.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray,.pkt-tag.pkt-tag--grey{background:var(--pkt-color-surface-default-gray)}.pkt-tag.pkt-tag--gray.pkt-btn:hover,.pkt-tag.pkt-tag--gray:is(button):hover,.pkt-tag.pkt-tag--gray.pkt-tag--hover,.pkt-tag.pkt-tag--grey.pkt-btn:hover,.pkt-tag.pkt-tag--grey:is(button):hover,.pkt-tag.pkt-tag--grey.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--gray.pkt-btn:hover svg,.pkt-tag.pkt-tag--gray:is(button):hover svg,.pkt-tag.pkt-tag--gray.pkt-tag--hover svg,.pkt-tag.pkt-tag--grey.pkt-btn:hover svg,.pkt-tag.pkt-tag--grey:is(button):hover svg,.pkt-tag.pkt-tag--grey.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--gray.pkt-btn:focus,.pkt-tag.pkt-tag--gray:is(button):focus,.pkt-tag.pkt-tag--gray.pkt-tag--focus,.pkt-tag.pkt-tag--grey.pkt-btn:focus,.pkt-tag.pkt-tag--grey:is(button):focus,.pkt-tag.pkt-tag--grey.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray.pkt-btn:focus svg,.pkt-tag.pkt-tag--gray:is(button):focus svg,.pkt-tag.pkt-tag--gray.pkt-tag--focus svg,.pkt-tag.pkt-tag--grey.pkt-btn:focus svg,.pkt-tag.pkt-tag--grey:is(button):focus svg,.pkt-tag.pkt-tag--grey.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray.pkt-btn:active,.pkt-tag.pkt-tag--gray:is(button):active,.pkt-tag.pkt-tag--gray.pkt-tag--active,.pkt-tag.pkt-tag--grey.pkt-btn:active,.pkt-tag.pkt-tag--grey:is(button):active,.pkt-tag.pkt-tag--grey.pkt-tag--active{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--gray.pkt-btn:active svg,.pkt-tag.pkt-tag--gray:is(button):active svg,.pkt-tag.pkt-tag--gray.pkt-tag--active svg,.pkt-tag.pkt-tag--grey.pkt-btn:active svg,.pkt-tag.pkt-tag--grey:is(button):active svg,.pkt-tag.pkt-tag--grey.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--blue-light{background:var(--pkt-color-surface-subtle-light-blue)}.pkt-tag.pkt-tag--blue-light.pkt-btn:hover,.pkt-tag.pkt-tag--blue-light:is(button):hover,.pkt-tag.pkt-tag--blue-light.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--blue-light.pkt-btn:hover svg,.pkt-tag.pkt-tag--blue-light:is(button):hover svg,.pkt-tag.pkt-tag--blue-light.pkt-tag--hover svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-tag--blue-light.pkt-btn:focus,.pkt-tag.pkt-tag--blue-light:is(button):focus,.pkt-tag.pkt-tag--blue-light.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--blue-light.pkt-btn:focus svg,.pkt-tag.pkt-tag--blue-light:is(button):focus svg,.pkt-tag.pkt-tag--blue-light.pkt-tag--focus svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-tag--blue-light.pkt-btn:active,.pkt-tag.pkt-tag--blue-light:is(button):active,.pkt-tag.pkt-tag--blue-light.pkt-tag--active{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--blue-light.pkt-btn:active svg,.pkt-tag.pkt-tag--blue-light:is(button):active svg,.pkt-tag.pkt-tag--blue-light.pkt-tag--active svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag.pkt-tag--blue-dark{background:var(--pkt-color-brand-dark-blue-1000);color:var(--pkt-color-brand-neutrals-200);--fg-color: var(--pkt-color-brand-neutrals-200)}.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,.pkt-tag.pkt-tag--blue-dark:is(button):hover,.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,.pkt-tag.pkt-tag--blue-dark:is(button):focus,.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover{background-color:var(--pkt-color-brand-warm-blue-1000) !important;color:var(--pkt-color-brand-neutrals-200) !important}.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover svg,.pkt-tag.pkt-tag--blue-dark:is(button):hover,.pkt-tag.pkt-tag--blue-dark:is(button):hover svg,.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus svg,.pkt-tag.pkt-tag--blue-dark:is(button):focus,.pkt-tag.pkt-tag--blue-dark:is(button):focus svg,.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover,.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover svg{--fg-color: var(--pkt-color-brand-neutrals-200) !important}.pkt-tag.pkt-tag--small{padding:0 .25rem;line-height:1.375rem}.pkt-tag.pkt-tag--medium{padding:0 .5rem;line-height:1.875rem}.pkt-tag.pkt-tag--large{padding:0 .5rem;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:2.25rem}.pkt-tag.pkt-tag--normal-text{letter-spacing:-0.2px;font-weight:500;font-size:.875rem}.pkt-tag.pkt-tag--thin-text{letter-spacing:-0.2px;font-weight:300;font-size:.875rem}