@oslokommune/punkt-css 17.0.7 → 17.0.10

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 (36) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/dist/css/components/combobox.css +12 -18
  3. package/dist/css/components/combobox.min.css +1 -1
  4. package/dist/css/components/tag.css +61 -45
  5. package/dist/css/components/tag.min.css +1 -1
  6. package/dist/css/pkt-base.css +106 -107
  7. package/dist/css/pkt-base.min.css +1 -1
  8. package/dist/css/pkt-components.css +73 -629
  9. package/dist/css/pkt-components.min.css +1 -1
  10. package/dist/css/pkt-docs.css +207 -441
  11. package/dist/css/pkt-docs.min.css +1 -1
  12. package/dist/css/pkt-elements.css +26 -72
  13. package/dist/css/pkt-elements.min.css +1 -1
  14. package/dist/css/pkt.css +207 -441
  15. package/dist/css/pkt.layer.css +24474 -0
  16. package/dist/css/pkt.layer.min.css +1 -0
  17. package/dist/css/pkt.min.css +1 -1
  18. package/dist/scss/base/_defaults.scss +5 -0
  19. package/dist/scss/base/_index.scss +1 -0
  20. package/dist/scss/base/_link.scss +136 -0
  21. package/dist/scss/base/_typography.scss +0 -139
  22. package/dist/scss/components/_combobox.scss +40 -41
  23. package/dist/scss/components/_index.scss +0 -2
  24. package/dist/scss/components/_tag.scss +37 -0
  25. package/dist/scss/elements/_index.scss +0 -1
  26. package/dist/scss/pkt.layer.scss +8 -0
  27. package/package.json +2 -2
  28. package/dist/css/components/preview.css +0 -180
  29. package/dist/css/components/preview.min.css +0 -1
  30. package/dist/css/components/textinput.css +0 -385
  31. package/dist/css/components/textinput.min.css +0 -1
  32. package/dist/css/elements/select.css +0 -419
  33. package/dist/css/elements/select.min.css +0 -1
  34. package/dist/scss/components/_preview.scss +0 -191
  35. package/dist/scss/components/_textinput.scss +0 -13
  36. 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.1.0](https://github.com/oslokommune/punkt/compare/17.0.9...17.1.0) (2026-08-20)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ * Trekk ut .pkt-link til egen _link.scss, pluss litt rydding (#3599). Fjernet klasse .pkt-display-contents. Github-søk viser at den hverken er i bruk av oss eller andre. Den har alltid bare vært ubrukt alias for .pkt-contents.
18
+
19
+
20
+ ### Chores
21
+ Ingen
22
+
23
+ ---
24
+
25
+
26
+ ## [17.0.8](https://github.com/oslokommune/punkt/compare/17.0.7...17.0.8) (2026-08-17)
27
+
28
+ ### ⚠ BREAKING CHANGES
29
+ Ingen
30
+
31
+ ### Features
32
+ Ingen
33
+
34
+ ### Bug Fixes
35
+ * @layer-støtte også i SASS (scss) (#3590).
36
+ * Flytt preview-stiler fra css-pakken til docs (#3589).
37
+ * 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.
38
+ * 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.
39
+
40
+
41
+ ### Chores
42
+ Ingen
43
+
44
+ ---
45
+
46
+
8
47
  ## [17.0.7](https://github.com/oslokommune/punkt/compare/17.0.6...17.0.7) (2026-08-14)
9
48
 
10
49
  ### ⚠ BREAKING CHANGES
package/dist/css/components/combobox.css CHANGED
@@ -194,59 +194,53 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
194
194
  .pkt-combobox__wrapper .pkt-listbox__open {
195
195
  margin-block-start: 0.5rem;
196
196
  }
197
-
198
- .pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within {
197
+ .pkt-combobox__wrapper.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within {
199
198
  outline: 4px solid var(--pkt-color-border-states-focus);
200
199
  }
201
-
202
- .pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search),
203
- .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
200
+ .pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search), .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
204
201
  padding: 0.5rem 1rem;
205
202
  letter-spacing: -0.2px;
206
203
  font-weight: 300;
207
204
  font-size: 1rem;
208
205
  line-height: 1.5rem;
209
206
  }
210
- .pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,
211
- .pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner,
212
- .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
213
- .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
207
+ .pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,
208
+ .pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner, .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
209
+ .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
214
210
  padding: 0.5rem 1rem;
215
211
  letter-spacing: -0.2px;
216
212
  font-weight: 300;
217
213
  font-size: 1rem;
218
214
  line-height: 1.5rem;
219
215
  }
220
- .pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input,
221
- .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
216
+ .pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input, .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
222
217
  padding: 0.5rem 0.75rem;
223
218
  letter-spacing: -0.2px;
224
219
  font-weight: 300;
225
220
  font-size: 1rem;
226
221
  line-height: 1.5rem;
227
222
  }
228
-
229
- .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
223
+ .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
230
224
  padding: 0.375rem 0.75rem;
231
225
  letter-spacing: -0.2px;
232
226
  font-weight: 300;
233
227
  font-size: 0.875rem;
234
228
  line-height: 1.375rem;
235
229
  }
236
- .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
237
- .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
230
+ .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
231
+ .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
238
232
  padding: 0.375rem 0.75rem;
239
233
  letter-spacing: -0.2px;
240
234
  font-weight: 300;
241
235
  font-size: 0.875rem;
242
236
  line-height: 1.375rem;
243
237
  }
244
- .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,
245
- .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon {
238
+ .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,
239
+ .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon {
246
240
  width: 1.125rem;
247
241
  height: 1.125rem;
248
242
  }
249
- .pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
243
+ .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
250
244
  padding: 0.375rem 0.5rem;
251
245
  letter-spacing: -0.2px;
252
246
  font-weight: 300;
package/dist/css/components/combobox.min.css CHANGED
@@ -1 +1 @@
1
- pkt-combobox,.pkt-combobox-component{display:block;max-width:31rem;width:100%}pkt-combobox[fullwidth],pkt-combobox--fullwidth,.pkt-combobox-component[fullwidth],.pkt-combobox-component--fullwidth{max-width:100%}.pkt-combobox__wrapper{position:relative;width:100%}.pkt-combobox__wrapper .pkt-combobox{position:relative;display:flex;flex-direction:column;width:100%}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn{position:absolute;right:.25rem;height:100%;min-width:1.125rem;min-height:1.125rem;padding:.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg{width:1.5rem;height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]){background-color:inherit;border-color:rgba(0,0,0,0)}.pkt-combobox__wrapper .pkt-combobox__value{padding-inline-start:.5rem}.pkt-combobox__wrapper .pkt-combobox__input{display:flex;align-items:center;position:relative;margin:0;padding:.5rem 2rem .5rem .5rem;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);color:var(--pkt-color-input-text-normal);min-height:3rem;gap:.375rem;flex-wrap:wrap;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem;line-height:1.25}.pkt-combobox__wrapper .pkt-combobox__input-div{display:contents}.pkt-combobox__wrapper .pkt-combobox__input--fullwidth{width:100%}.pkt-combobox__wrapper .pkt-combobox__input--small{min-height:2.625rem;padding:.375rem 2.5rem .375rem .375rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__input--small .pkt-combobox__arrow-icon svg{width:1.25rem;height:1.25rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall{min-height:2.25rem;padding:.25rem 2.25rem .25rem .25rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon{padding:.25rem .5rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon svg{width:1.125rem;height:1.125rem}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error){border-color:var(--pkt-color-input-border-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error)>.pkt-combobox__value{color:var(--pkt-color-input-text-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon{--fg-color: var(--pkt-color-brand-warm-blue-1000)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon:not(.pkt-combobox__arrow-icon--open) svg{transform:translateY(0.25rem)}.pkt-combobox__wrapper .pkt-combobox__input--error,.pkt-combobox__wrapper .pkt-combobox__input--error:hover,.pkt-combobox__wrapper .pkt-combobox__input--error:focus,.pkt-combobox__wrapper .pkt-combobox__input--error:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-combobox__wrapper .pkt-combobox__input:focus,.pkt-combobox__wrapper .pkt-combobox__input:focus-within,.pkt-combobox__wrapper .pkt-combobox__input:focus-visible,.pkt-combobox__wrapper .pkt-combobox__input--open{border-color:var(--pkt-color-input-border-active);outline:2px solid var(--pkt-color-input-border-active)}.pkt-combobox__wrapper .pkt-combobox__input--disabled,.pkt-combobox__wrapper .pkt-combobox__input--disabled:hover,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus-within{background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-border-states-disabled);color:var(--pkt-color-text-action-disabled);cursor:inherit}.pkt-combobox__wrapper .pkt-combobox__input input{border:none;font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit;background:rgba(0,0,0,0);letter-spacing:inherit;line-height:1.4rem;padding:0 0 0 .5rem;margin:0;flex:1;min-width:3rem}.pkt-combobox__wrapper .pkt-combobox__input input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-combobox__wrapper .pkt-combobox__input input:focus,.pkt-combobox__wrapper .pkt-combobox__input input:active{outline:none}.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tag-list{display:contents;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__arrow-icon{position:absolute;right:.25rem;min-width:1.125rem;min-height:1.125rem;padding:.5rem;transform:rotate(0deg);transition:transform .3s ease;pointer-events:none}.pkt-combobox__wrapper .pkt-combobox__arrow-icon svg{width:1.5rem;height:1.5rem;transition:transform .1s ease-in-out}.pkt-combobox__wrapper .pkt-combobox__arrow-icon--open{transform:rotate(180deg);transition:transform .3s ease}.pkt-combobox__wrapper .pkt-combobox__tags-outside{display:flex;flex-wrap:wrap;gap:.375rem}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list{display:flex;flex-wrap:wrap;gap:.375rem;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__placeholder{color:var(--pkt-color-text-placeholder);opacity:1;padding-inline-start:.5rem}.pkt-combobox__wrapper .pkt-listbox__open{margin-block-start:.5rem}.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search),.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search){padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner{padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input{padding:.5rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search){padding:.375rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner{padding:.375rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon{width:1.125rem;height:1.125rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input{padding:.375rem .5rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}
1
+ pkt-combobox,.pkt-combobox-component{display:block;max-width:31rem;width:100%}pkt-combobox[fullwidth],pkt-combobox--fullwidth,.pkt-combobox-component[fullwidth],.pkt-combobox-component--fullwidth{max-width:100%}.pkt-combobox__wrapper{position:relative;width:100%}.pkt-combobox__wrapper .pkt-combobox{position:relative;display:flex;flex-direction:column;width:100%}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn{position:absolute;right:.25rem;height:100%;min-width:1.125rem;min-height:1.125rem;padding:.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg{width:1.5rem;height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]){background-color:inherit;border-color:rgba(0,0,0,0)}.pkt-combobox__wrapper .pkt-combobox__value{padding-inline-start:.5rem}.pkt-combobox__wrapper .pkt-combobox__input{display:flex;align-items:center;position:relative;margin:0;padding:.5rem 2rem .5rem .5rem;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);color:var(--pkt-color-input-text-normal);min-height:3rem;gap:.375rem;flex-wrap:wrap;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem;line-height:1.25}.pkt-combobox__wrapper .pkt-combobox__input-div{display:contents}.pkt-combobox__wrapper .pkt-combobox__input--fullwidth{width:100%}.pkt-combobox__wrapper .pkt-combobox__input--small{min-height:2.625rem;padding:.375rem 2.5rem .375rem .375rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__input--small .pkt-combobox__arrow-icon svg{width:1.25rem;height:1.25rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall{min-height:2.25rem;padding:.25rem 2.25rem .25rem .25rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon{padding:.25rem .5rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon svg{width:1.125rem;height:1.125rem}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error){border-color:var(--pkt-color-input-border-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error)>.pkt-combobox__value{color:var(--pkt-color-input-text-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon{--fg-color: var(--pkt-color-brand-warm-blue-1000)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon:not(.pkt-combobox__arrow-icon--open) svg{transform:translateY(0.25rem)}.pkt-combobox__wrapper .pkt-combobox__input--error,.pkt-combobox__wrapper .pkt-combobox__input--error:hover,.pkt-combobox__wrapper .pkt-combobox__input--error:focus,.pkt-combobox__wrapper .pkt-combobox__input--error:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-combobox__wrapper .pkt-combobox__input:focus,.pkt-combobox__wrapper .pkt-combobox__input:focus-within,.pkt-combobox__wrapper .pkt-combobox__input:focus-visible,.pkt-combobox__wrapper .pkt-combobox__input--open{border-color:var(--pkt-color-input-border-active);outline:2px solid var(--pkt-color-input-border-active)}.pkt-combobox__wrapper .pkt-combobox__input--disabled,.pkt-combobox__wrapper .pkt-combobox__input--disabled:hover,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus-within{background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-border-states-disabled);color:var(--pkt-color-text-action-disabled);cursor:inherit}.pkt-combobox__wrapper .pkt-combobox__input input{border:none;font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit;background:rgba(0,0,0,0);letter-spacing:inherit;line-height:1.4rem;padding:0 0 0 .5rem;margin:0;flex:1;min-width:3rem}.pkt-combobox__wrapper .pkt-combobox__input input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-combobox__wrapper .pkt-combobox__input input:focus,.pkt-combobox__wrapper .pkt-combobox__input input:active{outline:none}.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tag-list{display:contents;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__arrow-icon{position:absolute;right:.25rem;min-width:1.125rem;min-height:1.125rem;padding:.5rem;transform:rotate(0deg);transition:transform .3s ease;pointer-events:none}.pkt-combobox__wrapper .pkt-combobox__arrow-icon svg{width:1.5rem;height:1.5rem;transition:transform .1s ease-in-out}.pkt-combobox__wrapper .pkt-combobox__arrow-icon--open{transform:rotate(180deg);transition:transform .3s ease}.pkt-combobox__wrapper .pkt-combobox__tags-outside{display:flex;flex-wrap:wrap;gap:.375rem}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list{display:flex;flex-wrap:wrap;gap:.375rem;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__placeholder{color:var(--pkt-color-text-placeholder);opacity:1;padding-inline-start:.5rem}.pkt-combobox__wrapper .pkt-listbox__open{margin-block-start:.5rem}.pkt-combobox__wrapper.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search),.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search){padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner,.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner{padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input,.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input{padding:.5rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search){padding:.375rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner{padding:.375rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon{width:1.125rem;height:1.125rem}.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input{padding:.375rem .5rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}
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}