@oslokommune/punkt-css 12.42.4 → 12.42.7

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 (14) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/dist/css/components/listbox.css +11 -5
  3. package/dist/css/components/listbox.min.css +1 -1
  4. package/dist/css/components/modal.css +2 -0
  5. package/dist/css/components/modal.min.css +1 -1
  6. package/dist/css/pkt-components.css +13 -5
  7. package/dist/css/pkt-components.min.css +1 -1
  8. package/dist/css/pkt-docs.css +13 -5
  9. package/dist/css/pkt-docs.min.css +1 -1
  10. package/dist/css/pkt.css +13 -5
  11. package/dist/css/pkt.min.css +1 -1
  12. package/dist/scss/components/_listbox.scss +13 -6
  13. package/dist/scss/components/_modal.scss +2 -0
  14. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -5,6 +5,43 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [12.42.7](https://github.com/oslokommune/punkt/compare/12.42.6...12.42.7) (2025-06-18)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ * Modal dekker over sideinnholdet i gammel Safari (eldre enn 15.4) (#2643).
18
+
19
+
20
+ ### Chores
21
+ Ingen
22
+
23
+ ---
24
+
25
+
26
+ ## [12.42.5](https://github.com/oslokommune/punkt/compare/12.42.4...12.42.5) (2025-06-18)
27
+
28
+ ### ⚠ BREAKING CHANGES
29
+ Ingen
30
+
31
+ ### Features
32
+ Ingen
33
+
34
+ ### Bug Fixes
35
+ * Consent: Oppdater UKE cookie banner og legg til nye features (#2641). Bonus: Kvitte oss med avhengighet til CookieEvents fra CookieManager
36
+ Bonus 2: Kjapp fiks på Safari 15-problemer med Combobox…
37
+
38
+
39
+ ### Chores
40
+ Ingen
41
+
42
+ ---
43
+
44
+
8
45
  ## [12.42.4](https://github.com/oslokommune/punkt/compare/12.42.3...12.42.4) (2025-06-17)
9
46
 
10
47
  ### ⚠ BREAKING CHANGES
package/dist/css/components/listbox.css CHANGED
@@ -30,8 +30,10 @@ pkt-listbox {
30
30
  flex-grow: 1;
31
31
  overflow-y: auto;
32
32
  }
33
- .pkt-listbox .pkt-listbox__options:not(:is(:has(*))) {
34
- display: none;
33
+ @supports selector(:not(:has(*))) {
34
+ .pkt-listbox .pkt-listbox__options:not(:is(:has(*))) {
35
+ display: none;
36
+ }
35
37
  }
36
38
  .pkt-listbox .pkt-listbox__option {
37
39
  margin: 0;
@@ -45,6 +47,9 @@ pkt-listbox {
45
47
  .pkt-listbox .pkt-listbox__option-label {
46
48
  grid-area: label;
47
49
  }
50
+ .pkt-listbox .pkt-listbox__option pkt-icon[name=check-big] {
51
+ height: 1rem;
52
+ }
48
53
  .pkt-listbox .pkt-listbox__option-description {
49
54
  padding-top: 0.25rem;
50
55
  grid-area: description;
@@ -64,7 +69,6 @@ pkt-listbox {
64
69
  padding-left: 10px;
65
70
  }
66
71
  .pkt-listbox .pkt-listbox__option--selected {
67
- grid-area: check;
68
72
  padding-left: 0.25rem;
69
73
  }
70
74
  .pkt-listbox .pkt-listbox__option--selected:focus {
@@ -95,8 +99,10 @@ pkt-listbox {
95
99
  flex-grow: 0;
96
100
  flex-shrink: 1;
97
101
  }
98
- .pkt-listbox .pkt-listbox__banners:not(:is(:has(*))) {
99
- display: none;
102
+ @supports selector(:not(:has(*))) {
103
+ .pkt-listbox .pkt-listbox__banners:not(:is(:has(*))) {
104
+ display: none;
105
+ }
100
106
  }
101
107
  .pkt-listbox .pkt-listbox__banner {
102
108
  line-height: 1.5;
package/dist/css/components/listbox.min.css CHANGED
@@ -1 +1 @@
1
- pkt-listbox{display:contents}.pkt-listbox{display:none;position:absolute;flex-direction:column;top:100%;left:0;width:100%;visibility:hidden;overflow:hidden;list-style:none;margin:0;overflow-y:auto;border:2px solid var(--pkt-color-border-gray);background-color:#fff;max-height:18rem}.pkt-listbox.pkt-listbox__open{display:flex;visibility:visible;z-index:4}.pkt-listbox .pkt-listbox__options{padding:.25rem;margin:0;list-style:none;flex-grow:1;overflow-y:auto}.pkt-listbox .pkt-listbox__options:not(:is(:has(*))){display:none}.pkt-listbox .pkt-listbox__option{margin:0;padding:.75rem 20px;display:grid;grid-template-areas:"check label" ". description";grid-template-columns:min-content 1fr;align-items:center;column-gap:.25rem}.pkt-listbox .pkt-listbox__option-label{grid-area:label}.pkt-listbox .pkt-listbox__option-description{padding-top:.25rem;grid-area:description}.pkt-listbox .pkt-listbox__option:focus{padding:10px 1.125rem;border:2px solid var(--pkt-color-brand-warm-blue-1000);outline:.25rem solid var(--pkt-color-border-states-focus);text-decoration:none}.pkt-listbox .pkt-listbox__option--checkBox{grid-area:check;padding:.75rem .5rem .75rem .75rem;column-gap:.5rem}.pkt-listbox .pkt-listbox__option--checkBox:focus{padding-left:10px}.pkt-listbox .pkt-listbox__option--selected{grid-area:check;padding-left:.25rem}.pkt-listbox .pkt-listbox__option--selected:focus{padding-left:2px}.pkt-listbox .pkt-listbox__option--highlighted{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-listbox .pkt-listbox__option[data-disabled]{cursor:not-allowed;color:var(--pkt-color-grays-gray-500)}.pkt-listbox .pkt-listbox__option{margin-bottom:.125rem;overflow-wrap:break-word;hyphens:auto;cursor:pointer}.pkt-listbox .pkt-listbox__option:first-child:not(.pkt-listbox__search,.pkt-listbox__banners){margin-top:.125rem}.pkt-listbox .pkt-listbox__option:hover:not(.pkt-listbox__search){background-color:var(--pkt-color-surface-default-light-blue)}.pkt-listbox .pkt-listbox__banners{padding:.25rem;margin:0;flex-grow:0;flex-shrink:1}.pkt-listbox .pkt-listbox__banners:not(:is(:has(*))){display:none}.pkt-listbox .pkt-listbox__banner{line-height:1.5;display:flex;align-items:center;gap:.5rem;padding:.75rem;width:100%;box-sizing:border-box}.pkt-listbox .pkt-listbox__banner--new-option,.pkt-listbox .pkt-listbox__banner--user-message{background-color:var(--pkt-color-surface-default-gray)}.pkt-listbox .pkt-listbox__banner--maximum-reached{background-color:var(--pkt-color-brand-light-beige-1000)}.pkt-listbox .pkt-listbox__banner-icon{height:1.5rem;width:1.5rem}.pkt-listbox .pkt-listbox__search{display:flex;align-items:center;padding:.375rem;width:100%;box-sizing:border-box;background-color:var(--pkt-color-surface-default-gray)}.pkt-listbox .pkt-listbox__search:focus-visible,.pkt-listbox .pkt-listbox__search:focus,.pkt-listbox .pkt-listbox__search:active{border:none;outline:none}.pkt-listbox .pkt-listbox__search:focus-within,.pkt-listbox .pkt-listbox__search:active{padding:.25rem;border:2px solid var(--pkt-color-brand-warm-blue-1000);outline:.25rem solid var(--pkt-color-border-states-focus)}.pkt-listbox .pkt-listbox__search:focus-within input,.pkt-listbox .pkt-listbox__search:active input{outline:none}.pkt-listbox .pkt-listbox__search-icon{cursor:default;display:flex;align-items:center;padding-right:.25rem}.pkt-listbox .pkt-listbox__search-icon .pkt-icon{width:1.25rem;height:1.25rem}.pkt-listbox .pkt-listbox__search input{background-color:var(--pkt-color-surface-default-gray);border:none;color:var(--pkt-color-text-body-default);padding:.75rem .75rem .75rem .5rem;line-height:inherit;width:100%;box-sizing:border-box;margin:0}.pkt-listbox .pkt-listbox__search input::placeholder{color:var(--pkt-color-text-body-default)}
1
+ pkt-listbox{display:contents}.pkt-listbox{display:none;position:absolute;flex-direction:column;top:100%;left:0;width:100%;visibility:hidden;overflow:hidden;list-style:none;margin:0;overflow-y:auto;border:2px solid var(--pkt-color-border-gray);background-color:#fff;max-height:18rem}.pkt-listbox.pkt-listbox__open{display:flex;visibility:visible;z-index:4}.pkt-listbox .pkt-listbox__options{padding:.25rem;margin:0;list-style:none;flex-grow:1;overflow-y:auto}@supports selector(:not(:has(*))){.pkt-listbox .pkt-listbox__options:not(:is(:has(*))){display:none}}.pkt-listbox .pkt-listbox__option{margin:0;padding:.75rem 20px;display:grid;grid-template-areas:"check label" ". description";grid-template-columns:min-content 1fr;align-items:center;column-gap:.25rem}.pkt-listbox .pkt-listbox__option-label{grid-area:label}.pkt-listbox .pkt-listbox__option pkt-icon[name=check-big]{height:1rem}.pkt-listbox .pkt-listbox__option-description{padding-top:.25rem;grid-area:description}.pkt-listbox .pkt-listbox__option:focus{padding:10px 1.125rem;border:2px solid var(--pkt-color-brand-warm-blue-1000);outline:.25rem solid var(--pkt-color-border-states-focus);text-decoration:none}.pkt-listbox .pkt-listbox__option--checkBox{grid-area:check;padding:.75rem .5rem .75rem .75rem;column-gap:.5rem}.pkt-listbox .pkt-listbox__option--checkBox:focus{padding-left:10px}.pkt-listbox .pkt-listbox__option--selected{padding-left:.25rem}.pkt-listbox .pkt-listbox__option--selected:focus{padding-left:2px}.pkt-listbox .pkt-listbox__option--highlighted{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-listbox .pkt-listbox__option[data-disabled]{cursor:not-allowed;color:var(--pkt-color-grays-gray-500)}.pkt-listbox .pkt-listbox__option{margin-bottom:.125rem;overflow-wrap:break-word;hyphens:auto;cursor:pointer}.pkt-listbox .pkt-listbox__option:first-child:not(.pkt-listbox__search,.pkt-listbox__banners){margin-top:.125rem}.pkt-listbox .pkt-listbox__option:hover:not(.pkt-listbox__search){background-color:var(--pkt-color-surface-default-light-blue)}.pkt-listbox .pkt-listbox__banners{padding:.25rem;margin:0;flex-grow:0;flex-shrink:1}@supports selector(:not(:has(*))){.pkt-listbox .pkt-listbox__banners:not(:is(:has(*))){display:none}}.pkt-listbox .pkt-listbox__banner{line-height:1.5;display:flex;align-items:center;gap:.5rem;padding:.75rem;width:100%;box-sizing:border-box}.pkt-listbox .pkt-listbox__banner--new-option,.pkt-listbox .pkt-listbox__banner--user-message{background-color:var(--pkt-color-surface-default-gray)}.pkt-listbox .pkt-listbox__banner--maximum-reached{background-color:var(--pkt-color-brand-light-beige-1000)}.pkt-listbox .pkt-listbox__banner-icon{height:1.5rem;width:1.5rem}.pkt-listbox .pkt-listbox__search{display:flex;align-items:center;padding:.375rem;width:100%;box-sizing:border-box;background-color:var(--pkt-color-surface-default-gray)}.pkt-listbox .pkt-listbox__search:focus-visible,.pkt-listbox .pkt-listbox__search:focus,.pkt-listbox .pkt-listbox__search:active{border:none;outline:none}.pkt-listbox .pkt-listbox__search:focus-within,.pkt-listbox .pkt-listbox__search:active{padding:.25rem;border:2px solid var(--pkt-color-brand-warm-blue-1000);outline:.25rem solid var(--pkt-color-border-states-focus)}.pkt-listbox .pkt-listbox__search:focus-within input,.pkt-listbox .pkt-listbox__search:active input{outline:none}.pkt-listbox .pkt-listbox__search-icon{cursor:default;display:flex;align-items:center;padding-right:.25rem}.pkt-listbox .pkt-listbox__search-icon .pkt-icon{width:1.25rem;height:1.25rem}.pkt-listbox .pkt-listbox__search input{background-color:var(--pkt-color-surface-default-gray);border:none;color:var(--pkt-color-text-body-default);padding:.75rem .75rem .75rem .5rem;line-height:inherit;width:100%;box-sizing:border-box;margin:0}.pkt-listbox .pkt-listbox__search input::placeholder{color:var(--pkt-color-text-body-default)}
package/dist/css/components/modal.css CHANGED
@@ -6,6 +6,7 @@
6
6
  padding: 0;
7
7
  background-color: transparent;
8
8
  opacity: 0;
9
+ display: none;
9
10
  transition: translate 0.2s ease-in-out, opacity 0.2s ease-in-out, overlay 0.2s ease-in-out allow-discrete, display 0.2s ease-in-out allow-discrete;
10
11
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
11
12
  position: fixed;
@@ -14,6 +15,7 @@
14
15
  outline: none;
15
16
  }
16
17
  .pkt-modal[open] {
18
+ display: block;
17
19
  opacity: 1;
18
20
  }
19
21
  @starting-style {
package/dist/css/components/modal.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-modal{border:none;padding:0;background-color:rgba(0,0,0,0);opacity:0;transition:translate .2s ease-in-out,opacity .2s ease-in-out,overlay .2s ease-in-out allow-discrete,display .2s ease-in-out allow-discrete;box-shadow:0 4px 8px rgba(0,0,0,.2);position:fixed}.pkt-modal:focus{outline:none}.pkt-modal[open]{opacity:1}@starting-style{.pkt-modal[open]{opacity:0}}.pkt-modal__wrapper{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr}.pkt-modal__dialog{box-shadow:0 4px 8px rgba(0,0,0,.2);translate:0 10%}.pkt-modal__dialog[open]{translate:0 0}@starting-style{.pkt-modal__dialog[open]{translate:0 -10%}}.pkt-modal__dialog .pkt-modal__wrapper{max-height:90vh;max-height:90svh}@supports not (selector(::backdrop)){.pkt-modal__dialog{top:50%;left:50%;transform:translate(-50%, -50%)}}.pkt-modal__drawer{top:0;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;margin:0;overflow-y:auto}.pkt-modal__drawer .pkt-modal__wrapper{min-height:100vh;min-height:100dvh}.pkt-modal__drawer[open]{translate:0 0}.pkt-modal__drawer--right{left:auto;right:0;margin-right:0;translate:100% 0}@starting-style{.pkt-modal__drawer--right[open]{translate:100% 0}}.pkt-modal__drawer--left{left:0;right:auto;margin-left:0;translate:-100% 0}@starting-style{.pkt-modal__drawer--left[open]{translate:-100% 0}}.pkt-modal::backdrop{opacity:0;background-color:rgba(0,0,0,.55);transition:opacity .2s ease-out,overlay .2s ease-out allow-discrete,display .2s allow-discrete}.pkt-modal[open]::backdrop{opacity:1}@starting-style{.pkt-modal[open]::backdrop{opacity:0}}@supports not (selector(::backdrop)){.pkt-modal{position:fixed}.pkt-modal+.backdrop{background-color:rgba(0,0,0,.55);position:fixed;top:0;left:0;width:100vw;height:100vh}}.pkt-modal .pkt-modal__container{padding-top:2rem;background:var(--pkt-color-background-default);overflow-y:auto}.pkt-modal .pkt-modal__header{display:grid;grid-template-columns:1fr 4rem;grid-template-rows:4rem 1fr;grid-template-areas:"header close" "header empty";justify-content:flex-start;width:100%}.pkt-modal .pkt-modal__header-background{background:var(--pkt-color-background-default);grid-area:empty}.pkt-modal .pkt-modal__headingText{background:var(--pkt-color-background-default);grid-area:header;padding:2rem 0 0 2.5rem;margin:0;color:var(--pkt-color-text-body-default)}.pkt-modal .pkt-modal__closeButton{grid-area:close;display:flex;flex-direction:row-reverse;align-self:flex-start}.pkt-modal .pkt-modal__noCloseButton{background:var(--pkt-color-background-default);grid-area:close}.pkt-modal .pkt-modal__closeButton--blue{height:100%;background:var(--pkt-color-background-default)}.pkt-modal .pkt-modal__closeButton--blue .pkt-btn{margin:.25rem}.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn{height:4rem;width:4rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--pkt-color-surface-strong-dark-blue);background-color:var(--pkt-color-brand-yellow-1000);border:4px solid var(--pkt-color-brand-yellow-1000);outline:0}.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn:hover,.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn:focus{background-color:var(--pkt-color-brand-warm-blue-1000);border-color:var(--pkt-color-brand-warm-blue-1000);color:var(--pkt-color-background-default)}.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn:hover .pkt-icon,.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn:focus .pkt-icon{color:var(--pkt-color-background-default)}.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn:focus-visible{outline:0;border-color:var(--pkt-color-border-states-focus)}.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn .pkt-btn__icon{width:2rem;height:2rem}.pkt-modal .pkt-modal__content{display:flex;flex-direction:column;flex-grow:1;gap:1rem;overflow-y:auto;padding:2rem 2.5rem;padding-top:0;position:relative;color:var(--pkt-color-text-body-default);background:linear-gradient(var(--pkt-color-white) 30%, transparent) top,linear-gradient(transparent, var(--pkt-color-border-subtle) 60%) bottom,radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), transparent) top,radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), transparent) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px}body.pkt-modal--open{overflow:hidden;scrollbar-gutter:stable}.pkt-modal--small{width:480px}.pkt-modal--medium{width:36rem}.pkt-modal--large{width:640px}.pkt-modal__btn-wrapper{padding-top:1.5rem;display:flex;justify-content:flex-start;gap:1rem;flex-wrap:wrap;width:100%}@media screen and (max-width: 640px){.pkt-modal[open]{line-height:1.5rem}.pkt-modal[open] .pkt-modal__headingText{font-size:1.375rem}.pkt-modal[open] .pkt-modal__content{letter-spacing:-0.2px;font-size:1rem}.pkt-modal--large{width:100vw}}@media screen and (max-width: 480px){.pkt-modal--small{width:100vw}}@media screen and (max-width: 36rem){.pkt-modal--medium{width:100vw}}@media screen and (max-width: 480px){.pkt-modal__btn-wrapper{display:grid;grid-template-columns:1fr;justify-content:center;align-items:center}.pkt-modal__btn-wrapper .pkt-btn{justify-content:center}}.pkt-modal--noShadow{box-shadow:none}.pkt-modal--transparentBackdrop::backdrop,.pkt-modal--transparentBackdrop[open]::backdrop{background-color:rgba(0,0,0,0)}@supports not (selector(::backdrop)){.pkt-modal--transparentBackdrop+.backdrop{background-color:rgba(0,0,0,0)}}.pkt-modal.pkt-modal--removePadding .pkt-modal__headingText,.pkt-modal.pkt-modal--removePadding .pkt-modal__content,.pkt-modal.pkt-modal--removePadding .pkt-modal__container{padding:0}.pkt-modal.pkt-modal--noHeadingText .pkt-modal__container{padding-top:1rem}.pkt-modal .pkt-modal__container .pkt-modal__btn-wrapper button.pkt-btn:not(.pkt-inputwrapper__helptext-expandable>.pkt-btn):not(.pkt-header__user-btn):not(.pkt-searchinput__button){margin:0}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}
1
+ .pkt-modal{border:none;padding:0;background-color:rgba(0,0,0,0);opacity:0;display:none;transition:translate .2s ease-in-out,opacity .2s ease-in-out,overlay .2s ease-in-out allow-discrete,display .2s ease-in-out allow-discrete;box-shadow:0 4px 8px rgba(0,0,0,.2);position:fixed}.pkt-modal:focus{outline:none}.pkt-modal[open]{display:block;opacity:1}@starting-style{.pkt-modal[open]{opacity:0}}.pkt-modal__wrapper{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr}.pkt-modal__dialog{box-shadow:0 4px 8px rgba(0,0,0,.2);translate:0 10%}.pkt-modal__dialog[open]{translate:0 0}@starting-style{.pkt-modal__dialog[open]{translate:0 -10%}}.pkt-modal__dialog .pkt-modal__wrapper{max-height:90vh;max-height:90svh}@supports not (selector(::backdrop)){.pkt-modal__dialog{top:50%;left:50%;transform:translate(-50%, -50%)}}.pkt-modal__drawer{top:0;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;margin:0;overflow-y:auto}.pkt-modal__drawer .pkt-modal__wrapper{min-height:100vh;min-height:100dvh}.pkt-modal__drawer[open]{translate:0 0}.pkt-modal__drawer--right{left:auto;right:0;margin-right:0;translate:100% 0}@starting-style{.pkt-modal__drawer--right[open]{translate:100% 0}}.pkt-modal__drawer--left{left:0;right:auto;margin-left:0;translate:-100% 0}@starting-style{.pkt-modal__drawer--left[open]{translate:-100% 0}}.pkt-modal::backdrop{opacity:0;background-color:rgba(0,0,0,.55);transition:opacity .2s ease-out,overlay .2s ease-out allow-discrete,display .2s allow-discrete}.pkt-modal[open]::backdrop{opacity:1}@starting-style{.pkt-modal[open]::backdrop{opacity:0}}@supports not (selector(::backdrop)){.pkt-modal{position:fixed}.pkt-modal+.backdrop{background-color:rgba(0,0,0,.55);position:fixed;top:0;left:0;width:100vw;height:100vh}}.pkt-modal .pkt-modal__container{padding-top:2rem;background:var(--pkt-color-background-default);overflow-y:auto}.pkt-modal .pkt-modal__header{display:grid;grid-template-columns:1fr 4rem;grid-template-rows:4rem 1fr;grid-template-areas:"header close" "header empty";justify-content:flex-start;width:100%}.pkt-modal .pkt-modal__header-background{background:var(--pkt-color-background-default);grid-area:empty}.pkt-modal .pkt-modal__headingText{background:var(--pkt-color-background-default);grid-area:header;padding:2rem 0 0 2.5rem;margin:0;color:var(--pkt-color-text-body-default)}.pkt-modal .pkt-modal__closeButton{grid-area:close;display:flex;flex-direction:row-reverse;align-self:flex-start}.pkt-modal .pkt-modal__noCloseButton{background:var(--pkt-color-background-default);grid-area:close}.pkt-modal .pkt-modal__closeButton--blue{height:100%;background:var(--pkt-color-background-default)}.pkt-modal .pkt-modal__closeButton--blue .pkt-btn{margin:.25rem}.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn{height:4rem;width:4rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--pkt-color-surface-strong-dark-blue);background-color:var(--pkt-color-brand-yellow-1000);border:4px solid var(--pkt-color-brand-yellow-1000);outline:0}.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn:hover,.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn:focus{background-color:var(--pkt-color-brand-warm-blue-1000);border-color:var(--pkt-color-brand-warm-blue-1000);color:var(--pkt-color-background-default)}.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn:hover .pkt-icon,.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn:focus .pkt-icon{color:var(--pkt-color-background-default)}.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn:focus-visible{outline:0;border-color:var(--pkt-color-border-states-focus)}.pkt-modal .pkt-modal__closeButton--yellow-filled .pkt-btn .pkt-btn__icon{width:2rem;height:2rem}.pkt-modal .pkt-modal__content{display:flex;flex-direction:column;flex-grow:1;gap:1rem;overflow-y:auto;padding:2rem 2.5rem;padding-top:0;position:relative;color:var(--pkt-color-text-body-default);background:linear-gradient(var(--pkt-color-white) 30%, transparent) top,linear-gradient(transparent, var(--pkt-color-border-subtle) 60%) bottom,radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), transparent) top,radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), transparent) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px}body.pkt-modal--open{overflow:hidden;scrollbar-gutter:stable}.pkt-modal--small{width:480px}.pkt-modal--medium{width:36rem}.pkt-modal--large{width:640px}.pkt-modal__btn-wrapper{padding-top:1.5rem;display:flex;justify-content:flex-start;gap:1rem;flex-wrap:wrap;width:100%}@media screen and (max-width: 640px){.pkt-modal[open]{line-height:1.5rem}.pkt-modal[open] .pkt-modal__headingText{font-size:1.375rem}.pkt-modal[open] .pkt-modal__content{letter-spacing:-0.2px;font-size:1rem}.pkt-modal--large{width:100vw}}@media screen and (max-width: 480px){.pkt-modal--small{width:100vw}}@media screen and (max-width: 36rem){.pkt-modal--medium{width:100vw}}@media screen and (max-width: 480px){.pkt-modal__btn-wrapper{display:grid;grid-template-columns:1fr;justify-content:center;align-items:center}.pkt-modal__btn-wrapper .pkt-btn{justify-content:center}}.pkt-modal--noShadow{box-shadow:none}.pkt-modal--transparentBackdrop::backdrop,.pkt-modal--transparentBackdrop[open]::backdrop{background-color:rgba(0,0,0,0)}@supports not (selector(::backdrop)){.pkt-modal--transparentBackdrop+.backdrop{background-color:rgba(0,0,0,0)}}.pkt-modal.pkt-modal--removePadding .pkt-modal__headingText,.pkt-modal.pkt-modal--removePadding .pkt-modal__content,.pkt-modal.pkt-modal--removePadding .pkt-modal__container{padding:0}.pkt-modal.pkt-modal--noHeadingText .pkt-modal__container{padding-top:1rem}.pkt-modal .pkt-modal__container .pkt-modal__btn-wrapper button.pkt-btn:not(.pkt-inputwrapper__helptext-expandable>.pkt-btn):not(.pkt-header__user-btn):not(.pkt-searchinput__button){margin:0}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}
package/dist/css/pkt-components.css CHANGED
@@ -1928,8 +1928,10 @@ pkt-listbox {
1928
1928
  flex-grow: 1;
1929
1929
  overflow-y: auto;
1930
1930
  }
1931
- .pkt-listbox .pkt-listbox__options:not(:is(:has(*))) {
1932
- display: none;
1931
+ @supports selector(:not(:has(*))) {
1932
+ .pkt-listbox .pkt-listbox__options:not(:is(:has(*))) {
1933
+ display: none;
1934
+ }
1933
1935
  }
1934
1936
  .pkt-listbox .pkt-listbox__option {
1935
1937
  margin: 0;
@@ -1943,6 +1945,9 @@ pkt-listbox {
1943
1945
  .pkt-listbox .pkt-listbox__option-label {
1944
1946
  grid-area: label;
1945
1947
  }
1948
+ .pkt-listbox .pkt-listbox__option pkt-icon[name=check-big] {
1949
+ height: 1rem;
1950
+ }
1946
1951
  .pkt-listbox .pkt-listbox__option-description {
1947
1952
  padding-top: 0.25rem;
1948
1953
  grid-area: description;
@@ -1962,7 +1967,6 @@ pkt-listbox {
1962
1967
  padding-left: 10px;
1963
1968
  }
1964
1969
  .pkt-listbox .pkt-listbox__option--selected {
1965
- grid-area: check;
1966
1970
  padding-left: 0.25rem;
1967
1971
  }
1968
1972
  .pkt-listbox .pkt-listbox__option--selected:focus {
@@ -1993,8 +1997,10 @@ pkt-listbox {
1993
1997
  flex-grow: 0;
1994
1998
  flex-shrink: 1;
1995
1999
  }
1996
- .pkt-listbox .pkt-listbox__banners:not(:is(:has(*))) {
1997
- display: none;
2000
+ @supports selector(:not(:has(*))) {
2001
+ .pkt-listbox .pkt-listbox__banners:not(:is(:has(*))) {
2002
+ display: none;
2003
+ }
1998
2004
  }
1999
2005
  .pkt-listbox .pkt-listbox__banner {
2000
2006
  line-height: 1.5;
@@ -2202,6 +2208,7 @@ pkt-listbox {
2202
2208
  padding: 0;
2203
2209
  background-color: transparent;
2204
2210
  opacity: 0;
2211
+ display: none;
2205
2212
  transition: translate 0.2s ease-in-out, opacity 0.2s ease-in-out, overlay 0.2s ease-in-out allow-discrete, display 0.2s ease-in-out allow-discrete;
2206
2213
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
2207
2214
  position: fixed;
@@ -2210,6 +2217,7 @@ pkt-listbox {
2210
2217
  outline: none;
2211
2218
  }
2212
2219
  .pkt-modal[open] {
2220
+ display: block;
2213
2221
  opacity: 1;
2214
2222
  }
2215
2223
  @starting-style {