@fremtind/jokul 6.0.0-next.2 → 6.0.0-next.4

package/styles/components/flex/flex.min.css

@@ -1 +1 @@
-@layer jokul.components{:root{--container-m:43.75rem;--container-l:60rem;--container-xl:75rem;--container-2xl:90rem;--container-full:100%}}@layer jokul.components{:is(.jkl-flex){box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:wrap}:where(.fill>*){flex-grow:1}:where(.jkl-flex>*){--jkl-flex-gap:0px;--jkl-flex-layout:auto;box-sizing:border-box;flex-basis:calc((8.33333% - (12/var(--jkl-flex-layout) - 1)*var(--jkl-flex-gap)/12)*var(--jkl-flex-layout));min-width:calc(var(--jkl-flex-layout)*0px);min-height:calc(var(--jkl-flex-layout)*0px)}:where(.wrap-nowrap>*){flex-shrink:calc(var(--jkl-flex-layout)*0)}}@layer jokul.components{.display-inline-flex{display:inline-flex}.flex-wrap-wrap-reverse{flex-wrap:wrap-reverse}.flex-wrap-nowrap{flex-wrap:nowrap}.flex-direction-column{flex-direction:column}.flex-direction-column-reverse{flex-direction:column-reverse}.flex-direction-row-reverse{flex-direction:row-reverse}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}.align-items-start{align-items:start}.align-items-center{align-items:center}.align-items-end{align-items:end}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.align-content-start{align-content:start}.align-content-center{align-content:center}.align-content-end{align-content:end}.align-content-stretch{align-content:stretch}.align-content-baseline{align-content:baseline}.align-content-space-around{align-content:space-around}.align-content-space-between{align-content:space-between}.align-content-space-evenly{align-content:space-evenly}.justify-content-start{justify-content:start}.justify-content-center{justify-content:center}.justify-content-end{justify-content:end}.justify-content-space-around{justify-content:space-around}.justify-content-space-between{justify-content:space-between}.justify-content-space-evenly{justify-content:space-evenly}:is(.center-m,.center-l,.center-xl,.center-2xl){box-sizing:border-box;margin-inline:auto;width:calc(100% - var(--jkl-unit-50))}@media (width >= 0){.center-small{max-width:var(--container-m)}}@media (width >= 680px){.center-medium{max-width:var(--container-l)}}@media (width >= 1200px){.center-large{max-width:var(--container-xl)}}@media (width >= 1600px){.center-xl{max-width:var(--container-2xl)}}.screen-small-2\.10>:where(:nth-child(odd)){--jkl-flex-layout:2}.screen-small-2\.10>:where(:nth-child(2n)){--jkl-flex-layout:10}.screen-small-10\.2>:where(:nth-child(odd)){--jkl-flex-layout:10}.screen-small-10\.2>:where(:nth-child(2n)){--jkl-flex-layout:2}.screen-small-3\.9>:where(:nth-child(odd)){--jkl-flex-layout:3}.screen-small-3\.9>:where(:nth-child(2n)){--jkl-flex-layout:9}.screen-small-9\.3>:where(:nth-child(odd)){--jkl-flex-layout:9}.screen-small-9\.3>:where(:nth-child(2n)){--jkl-flex-layout:3}.screen-small-4\.8>:where(:nth-child(odd)){--jkl-flex-layout:4}.screen-small-4\.8>:where(:nth-child(2n)){--jkl-flex-layout:8}.screen-small-8\.4>:where(:nth-child(odd)){--jkl-flex-layout:8}.screen-small-8\.4>:where(:nth-child(2n)){--jkl-flex-layout:4}.screen-small-5\.7>:where(:nth-child(odd)){--jkl-flex-layout:5}.screen-small-5\.7>:where(:nth-child(2n)){--jkl-flex-layout:7}.screen-small-7\.5>:where(:nth-child(odd)){--jkl-flex-layout:7}.screen-small-7\.5>:where(:nth-child(2n)){--jkl-flex-layout:5}.screen-small-0>*{--jkl-flex-layout:auto}.screen-small-1>*{--jkl-flex-layout:12}.screen-small-2>*{--jkl-flex-layout:6}.screen-small-3>*{--jkl-flex-layout:4}.screen-small-4>*{--jkl-flex-layout:3}.screen-small-6>*{--jkl-flex-layout:2}.screen-small-row-gap-none{row-gap:var(--jkl-spacing-none)}.screen-small-col-gap-none{column-gap:var(--jkl-spacing-none)}.screen-small-col-gap-none>*{--jkl-flex-gap:var(--jkl-spacing-none)}.screen-small-row-gap-2xs{row-gap:var(--jkl-spacing-2xs)}.screen-small-col-gap-2xs{column-gap:var(--jkl-spacing-2xs)}.screen-small-col-gap-2xs>*{--jkl-flex-gap:var(--jkl-spacing-2xs)}.screen-small-row-gap-xs{row-gap:var(--jkl-spacing-xs)}.screen-small-col-gap-xs{column-gap:var(--jkl-spacing-xs)}.screen-small-col-gap-xs>*{--jkl-flex-gap:var(--jkl-spacing-xs)}.screen-small-row-gap-s{row-gap:var(--jkl-spacing-s)}.screen-small-col-gap-s{column-gap:var(--jkl-spacing-s)}.screen-small-col-gap-s>*{--jkl-flex-gap:var(--jkl-spacing-s)}.screen-small-row-gap-m{row-gap:var(--jkl-spacing-m)}.screen-small-col-gap-m{column-gap:var(--jkl-spacing-m)}.screen-small-col-gap-m>*{--jkl-flex-gap:var(--jkl-spacing-m)}.screen-small-row-gap-l{row-gap:var(--jkl-spacing-l)}.screen-small-col-gap-l{column-gap:var(--jkl-spacing-l)}.screen-small-col-gap-l>*{--jkl-flex-gap:var(--jkl-spacing-l)}.screen-small-row-gap-xl{row-gap:var(--jkl-spacing-xl)}.screen-small-col-gap-xl{column-gap:var(--jkl-spacing-xl)}.screen-small-col-gap-xl>*{--jkl-flex-gap:var(--jkl-spacing-xl)}.screen-small-row-gap-2xl{row-gap:var(--jkl-spacing-2xl)}.screen-small-col-gap-2xl{column-gap:var(--jkl-spacing-2xl)}.screen-small-col-gap-2xl>*{--jkl-flex-gap:var(--jkl-spacing-2xl)}.screen-small-row-gap-0{row-gap:var(--jkl-spacing-0)}.screen-small-col-gap-0{column-gap:var(--jkl-spacing-0)}.screen-small-col-gap-0>*{--jkl-flex-gap:var(--jkl-spacing-0)}.screen-small-row-gap-2{row-gap:var(--jkl-spacing-2)}.screen-small-col-gap-2{column-gap:var(--jkl-spacing-2)}.screen-small-col-gap-2>*{--jkl-flex-gap:var(--jkl-spacing-2)}.screen-small-row-gap-4{row-gap:var(--jkl-spacing-4)}.screen-small-col-gap-4{column-gap:var(--jkl-spacing-4)}.screen-small-col-gap-4>*{--jkl-flex-gap:var(--jkl-spacing-4)}.screen-small-row-gap-8{row-gap:var(--jkl-spacing-8)}.screen-small-col-gap-8{column-gap:var(--jkl-spacing-8)}.screen-small-col-gap-8>*{--jkl-flex-gap:var(--jkl-spacing-8)}.screen-small-row-gap-12{row-gap:var(--jkl-spacing-12)}.screen-small-col-gap-12{column-gap:var(--jkl-spacing-12)}.screen-small-col-gap-12>*{--jkl-flex-gap:var(--jkl-spacing-12)}.screen-small-row-gap-16{row-gap:var(--jkl-spacing-16)}.screen-small-col-gap-16{column-gap:var(--jkl-spacing-16)}.screen-small-col-gap-16>*{--jkl-flex-gap:var(--jkl-spacing-16)}.screen-small-row-gap-20{row-gap:var(--jkl-spacing-20)}.screen-small-col-gap-20{column-gap:var(--jkl-spacing-20)}.screen-small-col-gap-20>*{--jkl-flex-gap:var(--jkl-spacing-20)}.screen-small-row-gap-24{row-gap:var(--jkl-spacing-24)}.screen-small-col-gap-24{column-gap:var(--jkl-spacing-24)}.screen-small-col-gap-24>*{--jkl-flex-gap:var(--jkl-spacing-24)}.screen-small-row-gap-28{row-gap:var(--jkl-spacing-28)}.screen-small-col-gap-28{column-gap:var(--jkl-spacing-28)}.screen-small-col-gap-28>*{--jkl-flex-gap:var(--jkl-spacing-28)}.screen-small-row-gap-32{row-gap:var(--jkl-spacing-32)}.screen-small-col-gap-32{column-gap:var(--jkl-spacing-32)}.screen-small-col-gap-32>*{--jkl-flex-gap:var(--jkl-spacing-32)}.screen-small-row-gap-40{row-gap:var(--jkl-spacing-40)}.screen-small-col-gap-40{column-gap:var(--jkl-spacing-40)}.screen-small-col-gap-40>*{--jkl-flex-gap:var(--jkl-spacing-40)}.screen-small-row-gap-48{row-gap:var(--jkl-spacing-48)}.screen-small-col-gap-48{column-gap:var(--jkl-spacing-48)}.screen-small-col-gap-48>*{--jkl-flex-gap:var(--jkl-spacing-48)}.screen-small-row-gap-56{row-gap:var(--jkl-spacing-56)}.screen-small-col-gap-56{column-gap:var(--jkl-spacing-56)}.screen-small-col-gap-56>*{--jkl-flex-gap:var(--jkl-spacing-56)}.screen-small-row-gap-64{row-gap:var(--jkl-spacing-64)}.screen-small-col-gap-64{column-gap:var(--jkl-spacing-64)}.screen-small-col-gap-64>*{--jkl-flex-gap:var(--jkl-spacing-64)}.screen-small-row-gap-72{row-gap:var(--jkl-spacing-72)}.screen-small-col-gap-72{column-gap:var(--jkl-spacing-72)}.screen-small-col-gap-72>*{--jkl-flex-gap:var(--jkl-spacing-72)}.screen-small-row-gap-80{row-gap:var(--jkl-spacing-80)}.screen-small-col-gap-80{column-gap:var(--jkl-spacing-80)}.screen-small-col-gap-80>*{--jkl-flex-gap:var(--jkl-spacing-80)}.screen-small-row-gap-104{row-gap:var(--jkl-spacing-104)}.screen-small-col-gap-104{column-gap:var(--jkl-spacing-104)}.screen-small-col-gap-104>*{--jkl-flex-gap:var(--jkl-spacing-104)}.screen-small-row-gap-168{row-gap:var(--jkl-spacing-168)}.screen-small-col-gap-168{column-gap:var(--jkl-spacing-168)}.screen-small-col-gap-168>*{--jkl-flex-gap:var(--jkl-spacing-168)}@media (width >= 680px){.screen-medium-2\.10>:where(:nth-child(odd)){--jkl-flex-layout:2}.screen-medium-2\.10>:where(:nth-child(2n)){--jkl-flex-layout:10}.screen-medium-10\.2>:where(:nth-child(odd)){--jkl-flex-layout:10}.screen-medium-10\.2>:where(:nth-child(2n)){--jkl-flex-layout:2}.screen-medium-3\.9>:where(:nth-child(odd)){--jkl-flex-layout:3}.screen-medium-3\.9>:where(:nth-child(2n)){--jkl-flex-layout:9}.screen-medium-9\.3>:where(:nth-child(odd)){--jkl-flex-layout:9}.screen-medium-9\.3>:where(:nth-child(2n)){--jkl-flex-layout:3}.screen-medium-4\.8>:where(:nth-child(odd)){--jkl-flex-layout:4}.screen-medium-4\.8>:where(:nth-child(2n)){--jkl-flex-layout:8}.screen-medium-8\.4>:where(:nth-child(odd)){--jkl-flex-layout:8}.screen-medium-8\.4>:where(:nth-child(2n)){--jkl-flex-layout:4}.screen-medium-5\.7>:where(:nth-child(odd)){--jkl-flex-layout:5}.screen-medium-5\.7>:where(:nth-child(2n)){--jkl-flex-layout:7}.screen-medium-7\.5>:where(:nth-child(odd)){--jkl-flex-layout:7}.screen-medium-7\.5>:where(:nth-child(2n)){--jkl-flex-layout:5}.screen-medium-0>*{--jkl-flex-layout:auto}.screen-medium-1>*{--jkl-flex-layout:12}.screen-medium-2>*{--jkl-flex-layout:6}.screen-medium-3>*{--jkl-flex-layout:4}.screen-medium-4>*{--jkl-flex-layout:3}.screen-medium-6>*{--jkl-flex-layout:2}.screen-medium-row-gap-none{row-gap:var(--jkl-spacing-none)}.screen-medium-col-gap-none{column-gap:var(--jkl-spacing-none)}.screen-medium-col-gap-none>*{--jkl-flex-gap:var(--jkl-spacing-none)}.screen-medium-row-gap-2xs{row-gap:var(--jkl-spacing-2xs)}.screen-medium-col-gap-2xs{column-gap:var(--jkl-spacing-2xs)}.screen-medium-col-gap-2xs>*{--jkl-flex-gap:var(--jkl-spacing-2xs)}.screen-medium-row-gap-xs{row-gap:var(--jkl-spacing-xs)}.screen-medium-col-gap-xs{column-gap:var(--jkl-spacing-xs)}.screen-medium-col-gap-xs>*{--jkl-flex-gap:var(--jkl-spacing-xs)}.screen-medium-row-gap-s{row-gap:var(--jkl-spacing-s)}.screen-medium-col-gap-s{column-gap:var(--jkl-spacing-s)}.screen-medium-col-gap-s>*{--jkl-flex-gap:var(--jkl-spacing-s)}.screen-medium-row-gap-m{row-gap:var(--jkl-spacing-m)}.screen-medium-col-gap-m{column-gap:var(--jkl-spacing-m)}.screen-medium-col-gap-m>*{--jkl-flex-gap:var(--jkl-spacing-m)}.screen-medium-row-gap-l{row-gap:var(--jkl-spacing-l)}.screen-medium-col-gap-l{column-gap:var(--jkl-spacing-l)}.screen-medium-col-gap-l>*{--jkl-flex-gap:var(--jkl-spacing-l)}.screen-medium-row-gap-xl{row-gap:var(--jkl-spacing-xl)}.screen-medium-col-gap-xl{column-gap:var(--jkl-spacing-xl)}.screen-medium-col-gap-xl>*{--jkl-flex-gap:var(--jkl-spacing-xl)}.screen-medium-row-gap-2xl{row-gap:var(--jkl-spacing-2xl)}.screen-medium-col-gap-2xl{column-gap:var(--jkl-spacing-2xl)}.screen-medium-col-gap-2xl>*{--jkl-flex-gap:var(--jkl-spacing-2xl)}.screen-medium-row-gap-0{row-gap:var(--jkl-spacing-0)}.screen-medium-col-gap-0{column-gap:var(--jkl-spacing-0)}.screen-medium-col-gap-0>*{--jkl-flex-gap:var(--jkl-spacing-0)}.screen-medium-row-gap-2{row-gap:var(--jkl-spacing-2)}.screen-medium-col-gap-2{column-gap:var(--jkl-spacing-2)}.screen-medium-col-gap-2>*{--jkl-flex-gap:var(--jkl-spacing-2)}.screen-medium-row-gap-4{row-gap:var(--jkl-spacing-4)}.screen-medium-col-gap-4{column-gap:var(--jkl-spacing-4)}.screen-medium-col-gap-4>*{--jkl-flex-gap:var(--jkl-spacing-4)}.screen-medium-row-gap-8{row-gap:var(--jkl-spacing-8)}.screen-medium-col-gap-8{column-gap:var(--jkl-spacing-8)}.screen-medium-col-gap-8>*{--jkl-flex-gap:var(--jkl-spacing-8)}.screen-medium-row-gap-12{row-gap:var(--jkl-spacing-12)}.screen-medium-col-gap-12{column-gap:var(--jkl-spacing-12)}.screen-medium-col-gap-12>*{--jkl-flex-gap:var(--jkl-spacing-12)}.screen-medium-row-gap-16{row-gap:var(--jkl-spacing-16)}.screen-medium-col-gap-16{column-gap:var(--jkl-spacing-16)}.screen-medium-col-gap-16>*{--jkl-flex-gap:var(--jkl-spacing-16)}.screen-medium-row-gap-20{row-gap:var(--jkl-spacing-20)}.screen-medium-col-gap-20{column-gap:var(--jkl-spacing-20)}.screen-medium-col-gap-20>*{--jkl-flex-gap:var(--jkl-spacing-20)}.screen-medium-row-gap-24{row-gap:var(--jkl-spacing-24)}.screen-medium-col-gap-24{column-gap:var(--jkl-spacing-24)}.screen-medium-col-gap-24>*{--jkl-flex-gap:var(--jkl-spacing-24)}.screen-medium-row-gap-28{row-gap:var(--jkl-spacing-28)}.screen-medium-col-gap-28{column-gap:var(--jkl-spacing-28)}.screen-medium-col-gap-28>*{--jkl-flex-gap:var(--jkl-spacing-28)}.screen-medium-row-gap-32{row-gap:var(--jkl-spacing-32)}.screen-medium-col-gap-32{column-gap:var(--jkl-spacing-32)}.screen-medium-col-gap-32>*{--jkl-flex-gap:var(--jkl-spacing-32)}.screen-medium-row-gap-40{row-gap:var(--jkl-spacing-40)}.screen-medium-col-gap-40{column-gap:var(--jkl-spacing-40)}.screen-medium-col-gap-40>*{--jkl-flex-gap:var(--jkl-spacing-40)}.screen-medium-row-gap-48{row-gap:var(--jkl-spacing-48)}.screen-medium-col-gap-48{column-gap:var(--jkl-spacing-48)}.screen-medium-col-gap-48>*{--jkl-flex-gap:var(--jkl-spacing-48)}.screen-medium-row-gap-56{row-gap:var(--jkl-spacing-56)}.screen-medium-col-gap-56{column-gap:var(--jkl-spacing-56)}.screen-medium-col-gap-56>*{--jkl-flex-gap:var(--jkl-spacing-56)}.screen-medium-row-gap-64{row-gap:var(--jkl-spacing-64)}.screen-medium-col-gap-64{column-gap:var(--jkl-spacing-64)}.screen-medium-col-gap-64>*{--jkl-flex-gap:var(--jkl-spacing-64)}.screen-medium-row-gap-72{row-gap:var(--jkl-spacing-72)}.screen-medium-col-gap-72{column-gap:var(--jkl-spacing-72)}.screen-medium-col-gap-72>*{--jkl-flex-gap:var(--jkl-spacing-72)}.screen-medium-row-gap-80{row-gap:var(--jkl-spacing-80)}.screen-medium-col-gap-80{column-gap:var(--jkl-spacing-80)}.screen-medium-col-gap-80>*{--jkl-flex-gap:var(--jkl-spacing-80)}.screen-medium-row-gap-104{row-gap:var(--jkl-spacing-104)}.screen-medium-col-gap-104{column-gap:var(--jkl-spacing-104)}.screen-medium-col-gap-104>*{--jkl-flex-gap:var(--jkl-spacing-104)}.screen-medium-row-gap-168{row-gap:var(--jkl-spacing-168)}.screen-medium-col-gap-168{column-gap:var(--jkl-spacing-168)}.screen-medium-col-gap-168>*{--jkl-flex-gap:var(--jkl-spacing-168)}}@media (width >= 1200px){.screen-large-2\.10>:where(:nth-child(odd)){--jkl-flex-layout:2}.screen-large-2\.10>:where(:nth-child(2n)){--jkl-flex-layout:10}.screen-large-10\.2>:where(:nth-child(odd)){--jkl-flex-layout:10}.screen-large-10\.2>:where(:nth-child(2n)){--jkl-flex-layout:2}.screen-large-3\.9>:where(:nth-child(odd)){--jkl-flex-layout:3}.screen-large-3\.9>:where(:nth-child(2n)){--jkl-flex-layout:9}.screen-large-9\.3>:where(:nth-child(odd)){--jkl-flex-layout:9}.screen-large-9\.3>:where(:nth-child(2n)){--jkl-flex-layout:3}.screen-large-4\.8>:where(:nth-child(odd)){--jkl-flex-layout:4}.screen-large-4\.8>:where(:nth-child(2n)){--jkl-flex-layout:8}.screen-large-8\.4>:where(:nth-child(odd)){--jkl-flex-layout:8}.screen-large-8\.4>:where(:nth-child(2n)){--jkl-flex-layout:4}.screen-large-5\.7>:where(:nth-child(odd)){--jkl-flex-layout:5}.screen-large-5\.7>:where(:nth-child(2n)){--jkl-flex-layout:7}.screen-large-7\.5>:where(:nth-child(odd)){--jkl-flex-layout:7}.screen-large-7\.5>:where(:nth-child(2n)){--jkl-flex-layout:5}.screen-large-0>*{--jkl-flex-layout:auto}.screen-large-1>*{--jkl-flex-layout:12}.screen-large-2>*{--jkl-flex-layout:6}.screen-large-3>*{--jkl-flex-layout:4}.screen-large-4>*{--jkl-flex-layout:3}.screen-large-6>*{--jkl-flex-layout:2}.screen-large-row-gap-none{row-gap:var(--jkl-spacing-none)}.screen-large-col-gap-none{column-gap:var(--jkl-spacing-none)}.screen-large-col-gap-none>*{--jkl-flex-gap:var(--jkl-spacing-none)}.screen-large-row-gap-2xs{row-gap:var(--jkl-spacing-2xs)}.screen-large-col-gap-2xs{column-gap:var(--jkl-spacing-2xs)}.screen-large-col-gap-2xs>*{--jkl-flex-gap:var(--jkl-spacing-2xs)}.screen-large-row-gap-xs{row-gap:var(--jkl-spacing-xs)}.screen-large-col-gap-xs{column-gap:var(--jkl-spacing-xs)}.screen-large-col-gap-xs>*{--jkl-flex-gap:var(--jkl-spacing-xs)}.screen-large-row-gap-s{row-gap:var(--jkl-spacing-s)}.screen-large-col-gap-s{column-gap:var(--jkl-spacing-s)}.screen-large-col-gap-s>*{--jkl-flex-gap:var(--jkl-spacing-s)}.screen-large-row-gap-m{row-gap:var(--jkl-spacing-m)}.screen-large-col-gap-m{column-gap:var(--jkl-spacing-m)}.screen-large-col-gap-m>*{--jkl-flex-gap:var(--jkl-spacing-m)}.screen-large-row-gap-l{row-gap:var(--jkl-spacing-l)}.screen-large-col-gap-l{column-gap:var(--jkl-spacing-l)}.screen-large-col-gap-l>*{--jkl-flex-gap:var(--jkl-spacing-l)}.screen-large-row-gap-xl{row-gap:var(--jkl-spacing-xl)}.screen-large-col-gap-xl{column-gap:var(--jkl-spacing-xl)}.screen-large-col-gap-xl>*{--jkl-flex-gap:var(--jkl-spacing-xl)}.screen-large-row-gap-2xl{row-gap:var(--jkl-spacing-2xl)}.screen-large-col-gap-2xl{column-gap:var(--jkl-spacing-2xl)}.screen-large-col-gap-2xl>*{--jkl-flex-gap:var(--jkl-spacing-2xl)}.screen-large-row-gap-0{row-gap:var(--jkl-spacing-0)}.screen-large-col-gap-0{column-gap:var(--jkl-spacing-0)}.screen-large-col-gap-0>*{--jkl-flex-gap:var(--jkl-spacing-0)}.screen-large-row-gap-2{row-gap:var(--jkl-spacing-2)}.screen-large-col-gap-2{column-gap:var(--jkl-spacing-2)}.screen-large-col-gap-2>*{--jkl-flex-gap:var(--jkl-spacing-2)}.screen-large-row-gap-4{row-gap:var(--jkl-spacing-4)}.screen-large-col-gap-4{column-gap:var(--jkl-spacing-4)}.screen-large-col-gap-4>*{--jkl-flex-gap:var(--jkl-spacing-4)}.screen-large-row-gap-8{row-gap:var(--jkl-spacing-8)}.screen-large-col-gap-8{column-gap:var(--jkl-spacing-8)}.screen-large-col-gap-8>*{--jkl-flex-gap:var(--jkl-spacing-8)}.screen-large-row-gap-12{row-gap:var(--jkl-spacing-12)}.screen-large-col-gap-12{column-gap:var(--jkl-spacing-12)}.screen-large-col-gap-12>*{--jkl-flex-gap:var(--jkl-spacing-12)}.screen-large-row-gap-16{row-gap:var(--jkl-spacing-16)}.screen-large-col-gap-16{column-gap:var(--jkl-spacing-16)}.screen-large-col-gap-16>*{--jkl-flex-gap:var(--jkl-spacing-16)}.screen-large-row-gap-20{row-gap:var(--jkl-spacing-20)}.screen-large-col-gap-20{column-gap:var(--jkl-spacing-20)}.screen-large-col-gap-20>*{--jkl-flex-gap:var(--jkl-spacing-20)}.screen-large-row-gap-24{row-gap:var(--jkl-spacing-24)}.screen-large-col-gap-24{column-gap:var(--jkl-spacing-24)}.screen-large-col-gap-24>*{--jkl-flex-gap:var(--jkl-spacing-24)}.screen-large-row-gap-28{row-gap:var(--jkl-spacing-28)}.screen-large-col-gap-28{column-gap:var(--jkl-spacing-28)}.screen-large-col-gap-28>*{--jkl-flex-gap:var(--jkl-spacing-28)}.screen-large-row-gap-32{row-gap:var(--jkl-spacing-32)}.screen-large-col-gap-32{column-gap:var(--jkl-spacing-32)}.screen-large-col-gap-32>*{--jkl-flex-gap:var(--jkl-spacing-32)}.screen-large-row-gap-40{row-gap:var(--jkl-spacing-40)}.screen-large-col-gap-40{column-gap:var(--jkl-spacing-40)}.screen-large-col-gap-40>*{--jkl-flex-gap:var(--jkl-spacing-40)}.screen-large-row-gap-48{row-gap:var(--jkl-spacing-48)}.screen-large-col-gap-48{column-gap:var(--jkl-spacing-48)}.screen-large-col-gap-48>*{--jkl-flex-gap:var(--jkl-spacing-48)}.screen-large-row-gap-56{row-gap:var(--jkl-spacing-56)}.screen-large-col-gap-56{column-gap:var(--jkl-spacing-56)}.screen-large-col-gap-56>*{--jkl-flex-gap:var(--jkl-spacing-56)}.screen-large-row-gap-64{row-gap:var(--jkl-spacing-64)}.screen-large-col-gap-64{column-gap:var(--jkl-spacing-64)}.screen-large-col-gap-64>*{--jkl-flex-gap:var(--jkl-spacing-64)}.screen-large-row-gap-72{row-gap:var(--jkl-spacing-72)}.screen-large-col-gap-72{column-gap:var(--jkl-spacing-72)}.screen-large-col-gap-72>*{--jkl-flex-gap:var(--jkl-spacing-72)}.screen-large-row-gap-80{row-gap:var(--jkl-spacing-80)}.screen-large-col-gap-80{column-gap:var(--jkl-spacing-80)}.screen-large-col-gap-80>*{--jkl-flex-gap:var(--jkl-spacing-80)}.screen-large-row-gap-104{row-gap:var(--jkl-spacing-104)}.screen-large-col-gap-104{column-gap:var(--jkl-spacing-104)}.screen-large-col-gap-104>*{--jkl-flex-gap:var(--jkl-spacing-104)}.screen-large-row-gap-168{row-gap:var(--jkl-spacing-168)}.screen-large-col-gap-168{column-gap:var(--jkl-spacing-168)}.screen-large-col-gap-168>*{--jkl-flex-gap:var(--jkl-spacing-168)}}@media (width >= 1600px){.screen-xl-2\.10>:where(:nth-child(odd)){--jkl-flex-layout:2}.screen-xl-2\.10>:where(:nth-child(2n)){--jkl-flex-layout:10}.screen-xl-10\.2>:where(:nth-child(odd)){--jkl-flex-layout:10}.screen-xl-10\.2>:where(:nth-child(2n)){--jkl-flex-layout:2}.screen-xl-3\.9>:where(:nth-child(odd)){--jkl-flex-layout:3}.screen-xl-3\.9>:where(:nth-child(2n)){--jkl-flex-layout:9}.screen-xl-9\.3>:where(:nth-child(odd)){--jkl-flex-layout:9}.screen-xl-9\.3>:where(:nth-child(2n)){--jkl-flex-layout:3}.screen-xl-4\.8>:where(:nth-child(odd)){--jkl-flex-layout:4}.screen-xl-4\.8>:where(:nth-child(2n)){--jkl-flex-layout:8}.screen-xl-8\.4>:where(:nth-child(odd)){--jkl-flex-layout:8}.screen-xl-8\.4>:where(:nth-child(2n)){--jkl-flex-layout:4}.screen-xl-5\.7>:where(:nth-child(odd)){--jkl-flex-layout:5}.screen-xl-5\.7>:where(:nth-child(2n)){--jkl-flex-layout:7}.screen-xl-7\.5>:where(:nth-child(odd)){--jkl-flex-layout:7}.screen-xl-7\.5>:where(:nth-child(2n)){--jkl-flex-layout:5}.screen-xl-0>*{--jkl-flex-layout:auto}.screen-xl-1>*{--jkl-flex-layout:12}.screen-xl-2>*{--jkl-flex-layout:6}.screen-xl-3>*{--jkl-flex-layout:4}.screen-xl-4>*{--jkl-flex-layout:3}.screen-xl-6>*{--jkl-flex-layout:2}.screen-xl-row-gap-none{row-gap:var(--jkl-spacing-none)}.screen-xl-col-gap-none{column-gap:var(--jkl-spacing-none)}.screen-xl-col-gap-none>*{--jkl-flex-gap:var(--jkl-spacing-none)}.screen-xl-row-gap-2xs{row-gap:var(--jkl-spacing-2xs)}.screen-xl-col-gap-2xs{column-gap:var(--jkl-spacing-2xs)}.screen-xl-col-gap-2xs>*{--jkl-flex-gap:var(--jkl-spacing-2xs)}.screen-xl-row-gap-xs{row-gap:var(--jkl-spacing-xs)}.screen-xl-col-gap-xs{column-gap:var(--jkl-spacing-xs)}.screen-xl-col-gap-xs>*{--jkl-flex-gap:var(--jkl-spacing-xs)}.screen-xl-row-gap-s{row-gap:var(--jkl-spacing-s)}.screen-xl-col-gap-s{column-gap:var(--jkl-spacing-s)}.screen-xl-col-gap-s>*{--jkl-flex-gap:var(--jkl-spacing-s)}.screen-xl-row-gap-m{row-gap:var(--jkl-spacing-m)}.screen-xl-col-gap-m{column-gap:var(--jkl-spacing-m)}.screen-xl-col-gap-m>*{--jkl-flex-gap:var(--jkl-spacing-m)}.screen-xl-row-gap-l{row-gap:var(--jkl-spacing-l)}.screen-xl-col-gap-l{column-gap:var(--jkl-spacing-l)}.screen-xl-col-gap-l>*{--jkl-flex-gap:var(--jkl-spacing-l)}.screen-xl-row-gap-xl{row-gap:var(--jkl-spacing-xl)}.screen-xl-col-gap-xl{column-gap:var(--jkl-spacing-xl)}.screen-xl-col-gap-xl>*{--jkl-flex-gap:var(--jkl-spacing-xl)}.screen-xl-row-gap-2xl{row-gap:var(--jkl-spacing-2xl)}.screen-xl-col-gap-2xl{column-gap:var(--jkl-spacing-2xl)}.screen-xl-col-gap-2xl>*{--jkl-flex-gap:var(--jkl-spacing-2xl)}.screen-xl-row-gap-0{row-gap:var(--jkl-spacing-0)}.screen-xl-col-gap-0{column-gap:var(--jkl-spacing-0)}.screen-xl-col-gap-0>*{--jkl-flex-gap:var(--jkl-spacing-0)}.screen-xl-row-gap-2{row-gap:var(--jkl-spacing-2)}.screen-xl-col-gap-2{column-gap:var(--jkl-spacing-2)}.screen-xl-col-gap-2>*{--jkl-flex-gap:var(--jkl-spacing-2)}.screen-xl-row-gap-4{row-gap:var(--jkl-spacing-4)}.screen-xl-col-gap-4{column-gap:var(--jkl-spacing-4)}.screen-xl-col-gap-4>*{--jkl-flex-gap:var(--jkl-spacing-4)}.screen-xl-row-gap-8{row-gap:var(--jkl-spacing-8)}.screen-xl-col-gap-8{column-gap:var(--jkl-spacing-8)}.screen-xl-col-gap-8>*{--jkl-flex-gap:var(--jkl-spacing-8)}.screen-xl-row-gap-12{row-gap:var(--jkl-spacing-12)}.screen-xl-col-gap-12{column-gap:var(--jkl-spacing-12)}.screen-xl-col-gap-12>*{--jkl-flex-gap:var(--jkl-spacing-12)}.screen-xl-row-gap-16{row-gap:var(--jkl-spacing-16)}.screen-xl-col-gap-16{column-gap:var(--jkl-spacing-16)}.screen-xl-col-gap-16>*{--jkl-flex-gap:var(--jkl-spacing-16)}.screen-xl-row-gap-20{row-gap:var(--jkl-spacing-20)}.screen-xl-col-gap-20{column-gap:var(--jkl-spacing-20)}.screen-xl-col-gap-20>*{--jkl-flex-gap:var(--jkl-spacing-20)}.screen-xl-row-gap-24{row-gap:var(--jkl-spacing-24)}.screen-xl-col-gap-24{column-gap:var(--jkl-spacing-24)}.screen-xl-col-gap-24>*{--jkl-flex-gap:var(--jkl-spacing-24)}.screen-xl-row-gap-28{row-gap:var(--jkl-spacing-28)}.screen-xl-col-gap-28{column-gap:var(--jkl-spacing-28)}.screen-xl-col-gap-28>*{--jkl-flex-gap:var(--jkl-spacing-28)}.screen-xl-row-gap-32{row-gap:var(--jkl-spacing-32)}.screen-xl-col-gap-32{column-gap:var(--jkl-spacing-32)}.screen-xl-col-gap-32>*{--jkl-flex-gap:var(--jkl-spacing-32)}.screen-xl-row-gap-40{row-gap:var(--jkl-spacing-40)}.screen-xl-col-gap-40{column-gap:var(--jkl-spacing-40)}.screen-xl-col-gap-40>*{--jkl-flex-gap:var(--jkl-spacing-40)}.screen-xl-row-gap-48{row-gap:var(--jkl-spacing-48)}.screen-xl-col-gap-48{column-gap:var(--jkl-spacing-48)}.screen-xl-col-gap-48>*{--jkl-flex-gap:var(--jkl-spacing-48)}.screen-xl-row-gap-56{row-gap:var(--jkl-spacing-56)}.screen-xl-col-gap-56{column-gap:var(--jkl-spacing-56)}.screen-xl-col-gap-56>*{--jkl-flex-gap:var(--jkl-spacing-56)}.screen-xl-row-gap-64{row-gap:var(--jkl-spacing-64)}.screen-xl-col-gap-64{column-gap:var(--jkl-spacing-64)}.screen-xl-col-gap-64>*{--jkl-flex-gap:var(--jkl-spacing-64)}.screen-xl-row-gap-72{row-gap:var(--jkl-spacing-72)}.screen-xl-col-gap-72{column-gap:var(--jkl-spacing-72)}.screen-xl-col-gap-72>*{--jkl-flex-gap:var(--jkl-spacing-72)}.screen-xl-row-gap-80{row-gap:var(--jkl-spacing-80)}.screen-xl-col-gap-80{column-gap:var(--jkl-spacing-80)}.screen-xl-col-gap-80>*{--jkl-flex-gap:var(--jkl-spacing-80)}.screen-xl-row-gap-104{row-gap:var(--jkl-spacing-104)}.screen-xl-col-gap-104{column-gap:var(--jkl-spacing-104)}.screen-xl-col-gap-104>*{--jkl-flex-gap:var(--jkl-spacing-104)}.screen-xl-row-gap-168{row-gap:var(--jkl-spacing-168)}.screen-xl-col-gap-168{column-gap:var(--jkl-spacing-168)}.screen-xl-col-gap-168>*{--jkl-flex-gap:var(--jkl-spacing-168)}}}
+@layer jokul.components{.jkl-flex{--wrap:initial;--gap:initial;--align-items:initial;--align-content:initial;--justify-content:initial;--flex-direction:initial;box-sizing:border-box;display:flex;flex-direction:var(--flex-direction);flex-wrap:var(--wrap);gap:var(--gap);align-items:var(--align-items);align-content:var(--align-content);justify-content:var(--justify-content)}}

package/styles/components/flex/flex.scss

@@ -1,287 +1,21 @@
-@charset "UTF-8";
-@use "sass:math";
-@use "sass:map";
-@use "sass:list";
+@use "../../jkl";
 
-// ==========================================================================
-// 1. Konfigurasjon
-// ==========================================================================
-
-// Angir globale CSS custom properties for maksimale container-bredder.
 @layer jokul.components {
-    :root {
-        --container-m: 43.75rem;
-        --container-l: 60rem;
-        --container-xl: 75rem;
-        --container-2xl: 90rem;
-        --container-full: 100%;
-    }
-}
-
-$jokul-breakpoints: (
-    "small": 0,
-    "medium": 680px,
-    "large": 1200px,
-    "xl": 1600px,
-);
-$jokul-semantic-spacing: (
-    "none",
-    "2xs",
-    "xs",
-    "s",
-    "m",
-    "l",
-    "xl",
-    "2xl",
-);
-$jokul-static-spacing: (
-    "0",
-    "2",
-    "4",
-    "8",
-    "12",
-    "16",
-    "20",
-    "24",
-    "28",
-    "32",
-    "40",
-    "48",
-    "56",
-    "64",
-    "72",
-    "80",
-    "104",
-    "168",
-);
-$jokul-spacing: list.join($jokul-semantic-spacing, $jokul-static-spacing, comma);
-
-// Map for å generere klasser for uniforme (jevnt fordelte) kolonner.
-// Nøkkelen (key) representerer antall elementer, og verdien (value) er hvor mange
-// av de 12 grid-kolonnene hvert element skal oppta.
-$uniform-layouts: (
-    "0": "auto",
-    // Automatisk bredde basert på innhold
-    "1": 12,
-    // 1 element i full bredde
-    "2": 6,
-    // 2 elementer, 50% bredde hver
-    "3": 4,
-    // 3 elementer, 33.3% bredde hver
-    "4": 3,
-    // 4 elementer, 25% bredde hver
-    "6": 2,
-    // 6 elementer, 16.6% bredde hver
-);
-
-// Map for å generere asymmetriske layout-klasser (f.eks. .s-2\.10).
-// Nøkkelen (key) er klassens suffiks, og verdien (value) angir bredden i antall
-// grid-kolonner for elementer på oddetallsplassering (1, 3, 5, ...).
-// Bredden for partallselementer beregnes automatisk (12 - verdi).
-$asymmetric-layouts: (
-    "2\\.10": 2,
-    "10\\.2": 10,
-    "3\\.9": 3,
-    "9\\.3": 9,
-    "4\\.8": 4,
-    "8\\.4": 8,
-    "5\\.7": 5,
-    "7\\.5": 7,
-);
-
-// Sass-map for å generere generiske hjelpeklasser (utility classes).
-// Hver nøkkel på toppnivå er en CSS-egenskap, og de nøstede map-ene
-// definerer klassenavn og tilhørende verdi.
-$utility-classes: (
-    "display": (inline-flex,
-    ),
-    "flex-wrap": (wrap-reverse,
-        nowrap,
-    ),
-    "flex-direction": (column,
-        column-reverse,
-        row-reverse,
-    ),
-    "text-align": (left,
-        center,
-        right,
-    ),
-    "align-items": (start,
-        center,
-        end,
-        baseline,
-        stretch,
-    ),
-    "align-content": (start,
-        center,
-        end,
-        stretch,
-        baseline,
-        space-around,
-        space-between,
-        space-evenly,
-    ),
-    "justify-content": (start,
-        center,
-        end,
-        space-around,
-        space-between,
-        space-evenly,
-    ),
-);
-
-// Map som definerer maksimale bredder for sentrerte containere (`.center-*`).
-// Brukes til å generere responsive breddebegrensninger.
-$containers: (
-    "small": var(--container-m),
-    "medium": var(--container-l),
-    "large": var(--container-xl),
-    "xl": var(--container-2xl),
-);
-
-// ==========================================================================
-// 2. Verktøy (Mixins)
-// ==========================================================================
-
-/// Mixin som genererer hjelpeklasser for de forskjellige egenskapene et
-/// flex-element kan ha. For eksempel vil man for `align-items`-egenskapen
-/// få generert ut hjelpeklasser som `.align-items-end`.
-/// @output Hjelpeklasser for de vanligste flex-egenskapene
-@mixin generate-utility-classes() {
-    @each $property, $values in $utility-classes {
-        @each $value in $values {
-            .#{$property}-#{$value} {
-                #{$property}: $value;
-            }
-        }
-    }
-}
-
-// Mixin for å generere responsive layout-klasser basert på $asymmetric-layouts og $uniform-layouts.
-@mixin generate-layout-classes($breakpoint) {
-
-    // --- Asymmetriske layouts ---
-    // Genererer klasser for layouts der oddetalls- og partalls-elementer har ulik bredde.
-    @each $layout, $odd-child-columns in $asymmetric-layouts {
-        $even-child-columns: 12 - $odd-child-columns;
-
-        .screen-#{$breakpoint}-#{$layout} {
-            > :where(:nth-child(odd)) {
-                --jkl-flex-layout: #{$odd-child-columns};
-            }
-
-            > :where(:nth-child(even)) {
-                --jkl-flex-layout: #{$even-child-columns};
-            }
-        }
-    }
-
-    // --- Uniforme layouts ---
-    // Genererer klasser for layouts der alle elementer har lik bredde.
-    @each $layout, $value in $uniform-layouts {
-        .screen-#{$breakpoint}-#{$layout} > * {
-            --jkl-flex-layout: #{$value};
-        }
-    }
-}
-
-
-// Mixin for å generere klasser for `row-gap` og `column-gap`.
-@mixin generate-gap-classes($breakpoint) {
-    @each $spacing in $jokul-spacing {
-        .screen-#{$breakpoint}-row-gap-#{$spacing} {
-            row-gap: var(--jkl-spacing-#{$spacing});
-        }
-
-        .screen-#{$breakpoint}-col-gap-#{$spacing} {
-            column-gap: var(--jkl-spacing-#{$spacing});
-
-            // Setter en custom property for å kunne kalkulere nøyaktig kolonnebredde
-            // i `flex-basis`, justert for `column-gap`.
-            & > * {
-                --jkl-flex-gap: var(--jkl-spacing-#{$spacing});
-            }
-        }
-    }
-}
+    .jkl-flex {
+        --wrap: initial;
+        --gap: initial;
+        --align-items: initial;
+        --align-content: initial;
+        --justify-content: initial;
+        --flex-direction: initial;
 
-// ==========================================================================
-// 3. Kjernestiler
-// ==========================================================================
-
-@layer jokul.components {
-
-    // Basisstil for alle flex-containere.
-    :is(.jkl-flex) {
         box-sizing: border-box;
         display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-    }
-
-    // Sørger for at direkte barn av .fill-elementer fyller tilgjengelig plass.
-    // :where brukes for å holde spesifisiteten lav.
-    :where(.fill > *) {
-        flex-grow: 1;
-    }
-
-    // Definerer standardoppførsel for alle direkte elementer av en `.flex`-container.
-    :where(.jkl-flex > *) {
-        --jkl-flex-gap: 0px; // Standard gap er null.
-        --jkl-flex-layout: auto; // Standard layout er automatisk bredde.
-
-        box-sizing: border-box;
-
-        // Kalkulerer `flex-basis` for å lage et grid-system som tar hensyn til `gap`.
-        // Formelen fordeler bredden basert på antall kolonner definert av `--jkl-flex-layout`.
-        flex-basis: calc((100% - (12 / var(--jkl-flex-layout) - 1) * var(--jkl-flex-gap)) / 12 * var(--jkl-flex-layout));
-
-        // Sørger for at elementene kan krympe, for å unngå at de flyter ut av containeren.
-        min-width: calc(var(--jkl-flex-layout) * 0px);
-        min-height: calc(var(--jkl-flex-layout) * 0px);
-    }
-
-    // Hindrer at elementer krymper når `flex-wrap: nowrap` er satt.
-    :where(.wrap-nowrap > *) {
-        flex-shrink: calc(var(--jkl-flex-layout) * 0);
-    }
-}
-
-// ==========================================================================
-// 4. CSS-generering
-// ==========================================================================
-
-@layer jokul.components {
-    @include generate-utility-classes;
-
-    // Stiler for sentrerte containere.
-    :is(.center-m, .center-l, .center-xl, .center-2xl) {
-        box-sizing: border-box;
-        margin-inline: auto;
-        width: calc(100% - var(--jkl-unit-50));
-    }
-
-    // Genererer responsive `max-width` for hver container-størrelse.
-    @each $size, $width in $containers {
-        @media (width >=#{map.get($jokul-breakpoints, $size)}) {
-            .center-#{$size} {
-                max-width: $width;
-            }
-        }
-    }
-
-    // Itererer gjennom alle definerte breakpoints for å generere responsive layout- og gap-klasser.
-    @each $breakpoint, $width in $jokul-breakpoints {
-        @if $breakpoint =="small" {
-            @include generate-layout-classes($breakpoint);
-            @include generate-gap-classes($breakpoint);
-        }
-
-        @else {
-            @media (width >=#{$width}) {
-                @include generate-layout-classes($breakpoint);
-                @include generate-gap-classes($breakpoint);
-            }
-        }
+        flex-direction: var(--flex-direction);
+        flex-wrap: var(--wrap);
+        gap: var(--gap);
+        align-items: var(--align-items);
+        align-content: var(--align-content);
+        justify-content: var(--justify-content);
     }
 }

package/styles/components/input-group/input-group.css

@@ -74,7 +74,7 @@
     display: inline-flex;
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-ue7sw3r forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-us22tmt forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -128,7 +128,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-ue7sw3r {
+  @keyframes jkl-support-icon-entrance-us22tmt {
     0% {
       margin-right: 0;
       opacity: 0;

package/styles/components/input-group/input-group.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-field-group{border-style:none}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}}@layer jokul.components{.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}.jkl-form-support-label{--jkl-form-support-label-margin:var(--jkl-unit-10) 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0;--color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-lazy);display:flex;margin:var(--jkl-form-support-label-margin);color:var(--color);transition-property:color;transition-delay:var(--jkl-motion-timing-productive)}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{opacity:0;height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin)}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error{background-color:var(--jkl-color-error-background-container);padding-block:var(--jkl-unit-05);padding-inline:var(--jkl-unit-05) var(--jkl-unit-10);border-radius:var(--jkl-border-radius-xs);color:var(--jkl-color-error-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon{color:var(--jkl-color-error-background-contrast)}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default);display:inline-flex}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:var(--jkl-motion-timing-lazy) cubic-bezier(0,0,.3,1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-ue7sw3r forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.jkl-label{display:block;margin:0 0 var(--jkl-spacing-8) 0;color:var(--jkl-color-text-default)}.jkl-label--medium,.jkl-label--small{font:var(--jkl-text-style-text-medium)}.jkl-label--large{font:var(--jkl-text-style-text-large)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.jkl-label .jkl-help{position:relative;top:-.1ex}.jkl-input-group-description{font:var(--jkl-text-style-text-small);color:var(--jkl-color-text-subdued);-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8);max-inline-size:50ch;text-wrap:pretty}.jkl-label:has(+.jkl-input-group-description){-webkit-margin-after:var(--jkl-spacing-4);margin-block-end:var(--jkl-spacing-4)}@keyframes jkl-support-icon-entrance-ue7sw3r{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:var(--jkl-spacing-8)}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{transform:scale(1);opacity:1;margin-right:var(--jkl-spacing-8)}}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}}
+@layer jokul.components{.jkl-field-group{border-style:none}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}}@layer jokul.components{.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}.jkl-form-support-label{--jkl-form-support-label-margin:var(--jkl-unit-10) 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0;--color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-lazy);display:flex;margin:var(--jkl-form-support-label-margin);color:var(--color);transition-property:color;transition-delay:var(--jkl-motion-timing-productive)}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{opacity:0;height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin)}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error{background-color:var(--jkl-color-error-background-container);padding-block:var(--jkl-unit-05);padding-inline:var(--jkl-unit-05) var(--jkl-unit-10);border-radius:var(--jkl-border-radius-xs);color:var(--jkl-color-error-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon{color:var(--jkl-color-error-background-contrast)}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default);display:inline-flex}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:var(--jkl-motion-timing-lazy) cubic-bezier(0,0,.3,1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-us22tmt forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.jkl-label{display:block;margin:0 0 var(--jkl-spacing-8) 0;color:var(--jkl-color-text-default)}.jkl-label--medium,.jkl-label--small{font:var(--jkl-text-style-text-medium)}.jkl-label--large{font:var(--jkl-text-style-text-large)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.jkl-label .jkl-help{position:relative;top:-.1ex}.jkl-input-group-description{font:var(--jkl-text-style-text-small);color:var(--jkl-color-text-subdued);-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8);max-inline-size:50ch;text-wrap:pretty}.jkl-label:has(+.jkl-input-group-description){-webkit-margin-after:var(--jkl-spacing-4);margin-block-end:var(--jkl-spacing-4)}@keyframes jkl-support-icon-entrance-us22tmt{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:var(--jkl-spacing-8)}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{transform:scale(1);opacity:1;margin-right:var(--jkl-spacing-8)}}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}}

package/styles/components/loader/loader.css

@@ -19,22 +19,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-utxzhjj;
+    animation-name: jkl-loader-left-spin-ud5bf4e;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-utxzhjm;
+    animation-name: jkl-loader-middle-spin-ud5bf56;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-utxzhkd;
+    animation-name: jkl-loader-right-spin-ud5bf5c;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-utxzhjj {
+  @keyframes jkl-loader-left-spin-ud5bf4e {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -48,7 +48,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-utxzhjm {
+  @keyframes jkl-loader-middle-spin-ud5bf56 {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -65,7 +65,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-utxzhkd {
+  @keyframes jkl-loader-right-spin-ud5bf5c {
     0% {
       transform: rotate(40deg) scale(0);
     }

package/styles/components/loader/loader.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{display:block;transform-origin:center;background-color:currentColor;height:var(--jkl-loader-dot-size);width:var(--jkl-loader-dot-size);animation:2.5s linear infinite}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-utxzhjj;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-utxzhjm;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-utxzhkd}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-utxzhjj{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-utxzhjm{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-utxzhkd{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}
+@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{display:block;transform-origin:center;background-color:currentColor;height:var(--jkl-loader-dot-size);width:var(--jkl-loader-dot-size);animation:2.5s linear infinite}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-ud5bf4e;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-ud5bf56;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-ud5bf5c}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-ud5bf4e{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-ud5bf56{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-ud5bf5c{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}

package/styles/components/loader/skeleton-loader.css

@@ -26,7 +26,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-ujaljuq;
+      animation: 2s ease infinite jkl-blink-uujffrj;
     }
   }
   .jkl-skeleton-input {
@@ -74,10 +74,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-ujaljuq;
+      animation: 2s ease-in-out infinite jkl-blink-uujffrj;
     }
   }
-  @keyframes jkl-blink-ujaljuq {
+  @keyframes jkl-blink-uujffrj {
     0% {
       opacity: 1;
     }

package/styles/components/loader/skeleton-loader.min.css

@@ -1 +1 @@
-@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-page);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb;-webkit-mask-position:center;mask-position:center;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep}.jkl-skeleton-element{border-radius:.125rem;background-color:var(--jkl-skeleton-element-color)}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{border:1px solid CanvasText;animation:jkl-blink-ujaljuq 2s ease infinite}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:var(--jkl-spacing-12)}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:var(--jkl-spacing-8)}}.jkl-skeleton-input--compact:after{gap:var(--jkl-spacing-8)}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid var(--jkl-skeleton-element-color)}.jkl-skeleton-table__header,.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-10)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:var(--jkl-unit-10) var(--jkl-unit-05)}.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-05)}}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-ujaljuq 2s ease-in-out infinite}}@keyframes jkl-blink-ujaljuq{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}}
+@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-page);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb;-webkit-mask-position:center;mask-position:center;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep}.jkl-skeleton-element{border-radius:.125rem;background-color:var(--jkl-skeleton-element-color)}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{border:1px solid CanvasText;animation:jkl-blink-uujffrj 2s ease infinite}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:var(--jkl-spacing-12)}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:var(--jkl-spacing-8)}}.jkl-skeleton-input--compact:after{gap:var(--jkl-spacing-8)}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid var(--jkl-skeleton-element-color)}.jkl-skeleton-table__header,.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-10)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:var(--jkl-unit-10) var(--jkl-unit-05)}.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-05)}}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-uujffrj 2s ease-in-out infinite}}@keyframes jkl-blink-uujffrj{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}}

package/styles/components/message/message.css

@@ -147,7 +147,7 @@
     --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-udonvlj var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-umylw1e var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -169,7 +169,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-udonvlj {
+  @keyframes jkl-dismiss-umylw1e {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);

package/styles/components/message/message.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-message{--jkl-message-icon-left:var(--jkl-unit-20);--jkl-message-icon-top:var(--jkl-unit-30);--jkl-message-title-margin:0 0 var(--jkl-unit-05) 0;--jkl-message-dismiss-button-size:var(--jkl-unit-50);--jkl-message-gap:var(--jkl-unit-20);--jkl-message-padding:var(--jkl-unit-25) var(--jkl-unit-15);--icon-color:var(--jkl-color-background-contrast);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);width:100%;max-width:35rem;padding:var(--jkl-message-padding);background-color:var(--background-color);color:var(--text-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;display:grid;align-items:start;grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;font:var(--jkl-text-style-paragraph-medium)}.jkl-message:has(.jkl-message__title){font:var(--jkl-text-style-heading-5)}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap);color:var(--icon-color)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font:var(--jkl-text-style-paragraph-medium);margin-top:-.125rem}.jkl-message__title{font:var(--jkl-text-style-heading-5);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{grid-area:dismiss;justify-self:end;position:relative;background-color:initial;padding:0;color:inherit;display:grid;place-content:center;outline:0;border-style:none;outline-style:none}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{border-style:revert}.jkl-message__dismiss-button,.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{content:"";position:absolute;display:block;width:var(--jkl-message-dismiss-button-size);height:var(--jkl-message-dismiss-button-size);top:50%;left:50%;transform:translate(-50%,-50%)}.jkl-message__dismiss-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover,.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-message--full{max-width:100%}.jkl-message--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--icon-color:var(--jkl-color-info-background-contrast)}.jkl-message--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--icon-color:var(--jkl-color-warning-background-contrast)}.jkl-message--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--icon-color:var(--jkl-color-error-background-contrast)}.jkl-message--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--icon-color:var(--jkl-color-success-background-contrast)}.jkl-message--dismissed{animation:jkl-dismiss-udonvlj var(--jkl-motion-timing-lazy) ease-in-out forwards;transition:visibility 0s var(--jkl-motion-timing-lazy);visibility:hidden}@media screen and (forced-colors:active){.jkl-message{border:2px solid CanvasText}.jkl-message--info{border-style:dotted}.jkl-message--warning{border-style:dashed}.jkl-message--error{border-style:double;border-width:4px}}.jkl-form-error-message{padding-bottom:var(--jkl-unit-50)}@keyframes jkl-dismiss-udonvlj{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}}
+@layer jokul.components{.jkl-message{--jkl-message-icon-left:var(--jkl-unit-20);--jkl-message-icon-top:var(--jkl-unit-30);--jkl-message-title-margin:0 0 var(--jkl-unit-05) 0;--jkl-message-dismiss-button-size:var(--jkl-unit-50);--jkl-message-gap:var(--jkl-unit-20);--jkl-message-padding:var(--jkl-unit-25) var(--jkl-unit-15);--icon-color:var(--jkl-color-background-contrast);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);width:100%;max-width:35rem;padding:var(--jkl-message-padding);background-color:var(--background-color);color:var(--text-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;display:grid;align-items:start;grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;font:var(--jkl-text-style-paragraph-medium)}.jkl-message:has(.jkl-message__title){font:var(--jkl-text-style-heading-5)}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap);color:var(--icon-color)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font:var(--jkl-text-style-paragraph-medium);margin-top:-.125rem}.jkl-message__title{font:var(--jkl-text-style-heading-5);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{grid-area:dismiss;justify-self:end;position:relative;background-color:initial;padding:0;color:inherit;display:grid;place-content:center;outline:0;border-style:none;outline-style:none}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{border-style:revert}.jkl-message__dismiss-button,.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{content:"";position:absolute;display:block;width:var(--jkl-message-dismiss-button-size);height:var(--jkl-message-dismiss-button-size);top:50%;left:50%;transform:translate(-50%,-50%)}.jkl-message__dismiss-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover,.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-message--full{max-width:100%}.jkl-message--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--icon-color:var(--jkl-color-info-background-contrast)}.jkl-message--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--icon-color:var(--jkl-color-warning-background-contrast)}.jkl-message--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--icon-color:var(--jkl-color-error-background-contrast)}.jkl-message--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--icon-color:var(--jkl-color-success-background-contrast)}.jkl-message--dismissed{animation:jkl-dismiss-umylw1e var(--jkl-motion-timing-lazy) ease-in-out forwards;transition:visibility 0s var(--jkl-motion-timing-lazy);visibility:hidden}@media screen and (forced-colors:active){.jkl-message{border:2px solid CanvasText}.jkl-message--info{border-style:dotted}.jkl-message--warning{border-style:dashed}.jkl-message--error{border-style:double;border-width:4px}}.jkl-form-error-message{padding-bottom:var(--jkl-unit-50)}@keyframes jkl-dismiss-umylw1e{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}}

package/styles/components/progress-bar/progress-bar.css

@@ -54,7 +54,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-u5i3566 {
+  @keyframes jkl-downcount-uwcy9fv {
     from {
       width: 100%;
     }

package/styles/components/progress-bar/progress-bar.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-progress-bar{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);width:100%;overflow:hidden}.jkl-progress-bar__tracker{display:block;height:var(--bar-height);background-color:var(--bar-color)}@media screen and (forced-colors:active){.jkl-progress-bar{background-color:Canvas}.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar{border-style:none}.jkl-progress-bar,.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-progress-bar{border-style:revert}.jkl-progress-bar,.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:revert;outline-style:revert}}.jkl-progress-bar:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-progress-bar__tracker{transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive)}@keyframes jkl-downcount-u5i3566{0%{width:100%}to{width:0}}}
+@layer jokul.components{.jkl-progress-bar{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);width:100%;overflow:hidden}.jkl-progress-bar__tracker{display:block;height:var(--bar-height);background-color:var(--bar-color)}@media screen and (forced-colors:active){.jkl-progress-bar{background-color:Canvas}.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar{border-style:none}.jkl-progress-bar,.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-progress-bar{border-style:revert}.jkl-progress-bar,.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:revert;outline-style:revert}}.jkl-progress-bar:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-progress-bar__tracker{transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive)}@keyframes jkl-downcount-uwcy9fv{0%{width:100%}to{width:0}}}

package/styles/components/segmented-control/segmented-control.css

@@ -192,7 +192,7 @@
     display: inline-flex;
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u02pk7x forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-ud8a0xm forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -246,7 +246,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-u02pk7x {
+  @keyframes jkl-support-icon-entrance-ud8a0xm {
     0% {
       margin-right: 0;
       opacity: 0;

package/styles/components/segmented-control/segmented-control.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-radio-button{display:flex;position:relative;--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-background-contrast);font:var(--jkl-text-style-text-medium);border-style:none}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:1lh;inline-size:1lh;margin:0;padding:0;cursor:pointer;z-index:1;-webkit-appearance:none;appearance:none;background:#0000;border:0;border-style:none}.jkl-radio-button__input,.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button__input{border-style:revert}.jkl-radio-button__input,.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:revert;outline-style:revert}}.jkl-radio-button__label{cursor:pointer;display:flex;color:var(--text-color);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color}.jkl-radio-button__label:before{color:var(--icon-color);content:"radio_button_unchecked"/"";-webkit-margin-end:.25em;margin-inline-end:.25em;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label:before{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-radio-button__input:is(:hover,:active)+.jkl-radio-button__label,.jkl-radio-button__label:active,.jkl-radio-button__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-radio-button__input:checked+.jkl-radio-button__label:before{content:"radio_button_checked"/""}.jkl-radio-button__input[aria-invalid=true]+.jkl-radio-button__label:before{color:var(--jkl-color-error-background-contrast)}.jkl-dormant-form-support-label+.jkl-radio-button,.jkl-form-support-label+.jkl-radio-button,.jkl-radio-button+.jkl-radio-button{margin-top:.75lh}.jkl-radio-button--inline{display:inline-flex;margin-right:var(--jkl-unit-30)}.jkl-dormant-form-support-label+.jkl-radio-button--inline,.jkl-form-support-label+.jkl-radio-button--inline,.jkl-radio-button--inline+.jkl-radio-button--inline{margin-top:0}.jkl-radio-button+.jkl-form-support-label{margin-left:1.75em;margin-top:.25lh;margin-bottom:var(--jkl-unit-10)}.jkl-field-group{border-style:none}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-field-group{border-style:revert}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}}@layer jokul.components{.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}.jkl-form-support-label{--jkl-form-support-label-margin:var(--jkl-unit-10) 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0;--color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-lazy);display:flex;margin:var(--jkl-form-support-label-margin);color:var(--color);transition-property:color;transition-delay:var(--jkl-motion-timing-productive)}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{opacity:0;height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin)}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error{background-color:var(--jkl-color-error-background-container);padding-block:var(--jkl-unit-05);padding-inline:var(--jkl-unit-05) var(--jkl-unit-10);border-radius:var(--jkl-border-radius-xs);color:var(--jkl-color-error-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon{color:var(--jkl-color-error-background-contrast)}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default);display:inline-flex}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:var(--jkl-motion-timing-lazy) cubic-bezier(0,0,.3,1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u02pk7x forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.jkl-label{display:block;margin:0 0 var(--jkl-spacing-8) 0;color:var(--jkl-color-text-default)}.jkl-label--medium,.jkl-label--small{font:var(--jkl-text-style-text-medium)}.jkl-label--large{font:var(--jkl-text-style-text-large)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.jkl-label .jkl-help{position:relative;top:-.1ex}.jkl-input-group-description{font:var(--jkl-text-style-text-small);color:var(--jkl-color-text-subdued);-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8);max-inline-size:50ch;text-wrap:pretty}.jkl-label:has(+.jkl-input-group-description){-webkit-margin-after:var(--jkl-spacing-4);margin-block-end:var(--jkl-spacing-4)}@keyframes jkl-support-icon-entrance-u02pk7x{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:var(--jkl-spacing-8)}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{transform:scale(1);opacity:1;margin-right:var(--jkl-spacing-8)}}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}}@layer jokul.components{.jkl-icon{--jkl-icon-fill:0;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform}.jkl-icon--filled{--jkl-icon-fill:1}.jkl-icon--animated{display:block}.jkl-icon-red-cross{color:var(--jkl-color-error-background-contrast)}.jkl-icon-green-check{color:var(--jkl-color-success-background-contrast)}.jkl-animated-horizontal-arrows,.jkl-animated-vertical-arrows{overflow:hidden;width:1.3em;height:1.3em}.jkl-animated-horizontal-arrows__slider,.jkl-animated-vertical-arrows__slider{display:flex;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive);transition-delay:calc(var(--jkl-motion-timing-expressive)*.33333);transition-property:transform}.jkl-animated-horizontal-arrows__arrow,.jkl-animated-vertical-arrows__arrow{flex-shrink:0}.jkl-animated-vertical-arrows__slider{flex-direction:column;height:2.6em}.jkl-animated-vertical-arrows__slider[data-show=up]{transform:translateZ(0)}.jkl-animated-vertical-arrows__slider[data-show=down],[data-toggled=true] .jkl-animated-vertical-arrows__slider{transform:translate3d(0,-50%,0)}.jkl-animated-horizontal-arrows__slider{flex-direction:row;width:2.6em}.jkl-animated-horizontal-arrows__slider[data-show=left]{transform:translateZ(0)}.jkl-animated-horizontal-arrows__slider[data-show=right]{transform:translate3d(-50%,0,0)}.jkl-icons-animated__plus{transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out);transition-duration:var(--jkl-motion-timing-expressive);transition-property:transform;transform-origin:50% 50%}.jkl-icons-animated__plus--plus{transform:rotate(0)}.jkl-icons-animated__plus--close{transform:rotate(135deg)}.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-contrast);font:var(--jkl-text-style-paragraph-small);background-color:var(--background-color);color:var(--jkl-color-text-on-contrast);display:inline-block;border-radius:var(--jkl-border-radius-s);min-width:-webkit-min-content;min-width:min-content;max-width:min(19.375rem,100%);padding:var(--content-padding);position:absolute;z-index:10000}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{transition-timing-function:var(--jkl-motion-easing-exit);transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;cursor:pointer;position:relative;background-color:initial;padding:0;display:inline-flex;align-items:baseline;color:var(--jkl-color-text-default);transform:translateY(min(.25em,.375rem));border-radius:9999px;outline:0;border-style:none;outline-style:none}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert}.jkl-tooltip-question-button,.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{color:var(--jkl-color-text-subdued)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-tooltip-question-button:after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;min-width:44px;min-height:44px}}.jkl-popuptip__content-wrapper:focus{outline:none}@layer jokul.components{.jkl-segmented-control{--jkl-segmented-controls-padding:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-segmented-controls-margin:1.5ch}.jkl-segmented-control .jkl-segmented-control-legend{-webkit-margin-after:.25lh;margin-block-end:.25lh}.jkl-segmented-control .jkl-segmented-control-item{--jkl-segmented-control-border-width:1px;--jkl-segmented-controls-border-radius:2lh;cursor:pointer;position:relative;display:inline-flex;align-items:center;background-color:initial;border:var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-subdued);border-radius:0;-webkit-margin-end:calc(var(--jkl-segmented-control-border-width)*-1);margin-inline-end:calc(var(--jkl-segmented-control-border-width)*-1);-webkit-margin-after:.5lh;margin-block-end:.5lh;transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out);transition-duration:var(--jkl-motion-timing-expressive);transition-property:border background}.jkl-segmented-control .jkl-segmented-control-item label{cursor:pointer;padding:var(--jkl-segmented-controls-padding)}.jkl-segmented-control .jkl-segmented-control-item:hover{background-color:color-mix(in srgb,currentColor 6%,#0000);border-color:var(--jkl-color-border-default);z-index:2}.jkl-segmented-control .jkl-segmented-control-item:has(input:checked){background-color:var(--jkl-color-background-container);border-color:var(--jkl-color-border-subdued);z-index:1}.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]){border-radius:var(--jkl-segmented-controls-border-radius);-webkit-margin-start:var(--jkl-segmented-controls-margin);margin-inline-start:var(--jkl-segmented-controls-margin)}.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]):first-of-type{-webkit-margin-start:0;margin-inline-start:0}.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true])+span+.jkl-segmented-control-item{border-end-start-radius:var(--jkl-segmented-controls-border-radius);border-start-start-radius:var(--jkl-segmented-controls-border-radius);-webkit-margin-start:var(--jkl-segmented-controls-margin);margin-inline-start:var(--jkl-segmented-controls-margin)}.jkl-segmented-control .jkl-segmented-control-item:first-of-type{border-end-start-radius:var(--jkl-segmented-controls-border-radius);border-start-start-radius:var(--jkl-segmented-controls-border-radius)}.jkl-segmented-control .jkl-segmented-control-item:last-of-type{border-end-end-radius:var(--jkl-segmented-controls-border-radius);border-start-end-radius:var(--jkl-segmented-controls-border-radius)}.jkl-segmented-control .jkl-segmented-control-item:has(+span+.jkl-segmented-control-item>input[data-separated=true]){border-end-end-radius:var(--jkl-segmented-controls-border-radius);border-start-end-radius:var(--jkl-segmented-controls-border-radius)}}
+@layer jokul.components{.jkl-radio-button{display:flex;position:relative;--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-background-contrast);font:var(--jkl-text-style-text-medium);border-style:none}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:1lh;inline-size:1lh;margin:0;padding:0;cursor:pointer;z-index:1;-webkit-appearance:none;appearance:none;background:#0000;border:0;border-style:none}.jkl-radio-button__input,.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button__input{border-style:revert}.jkl-radio-button__input,.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:revert;outline-style:revert}}.jkl-radio-button__label{cursor:pointer;display:flex;color:var(--text-color);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color}.jkl-radio-button__label:before{color:var(--icon-color);content:"radio_button_unchecked"/"";-webkit-margin-end:.25em;margin-inline-end:.25em;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label:before{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-radio-button__input:is(:hover,:active)+.jkl-radio-button__label,.jkl-radio-button__label:active,.jkl-radio-button__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-radio-button__input:checked+.jkl-radio-button__label:before{content:"radio_button_checked"/""}.jkl-radio-button__input[aria-invalid=true]+.jkl-radio-button__label:before{color:var(--jkl-color-error-background-contrast)}.jkl-dormant-form-support-label+.jkl-radio-button,.jkl-form-support-label+.jkl-radio-button,.jkl-radio-button+.jkl-radio-button{margin-top:.75lh}.jkl-radio-button--inline{display:inline-flex;margin-right:var(--jkl-unit-30)}.jkl-dormant-form-support-label+.jkl-radio-button--inline,.jkl-form-support-label+.jkl-radio-button--inline,.jkl-radio-button--inline+.jkl-radio-button--inline{margin-top:0}.jkl-radio-button+.jkl-form-support-label{margin-left:1.75em;margin-top:.25lh;margin-bottom:var(--jkl-unit-10)}.jkl-field-group{border-style:none}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-field-group{border-style:revert}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}}@layer jokul.components{.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}.jkl-form-support-label{--jkl-form-support-label-margin:var(--jkl-unit-10) 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0;--color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-lazy);display:flex;margin:var(--jkl-form-support-label-margin);color:var(--color);transition-property:color;transition-delay:var(--jkl-motion-timing-productive)}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{opacity:0;height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin)}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error{background-color:var(--jkl-color-error-background-container);padding-block:var(--jkl-unit-05);padding-inline:var(--jkl-unit-05) var(--jkl-unit-10);border-radius:var(--jkl-border-radius-xs);color:var(--jkl-color-error-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon{color:var(--jkl-color-error-background-contrast)}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default);display:inline-flex}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:var(--jkl-motion-timing-lazy) cubic-bezier(0,0,.3,1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-ud8a0xm forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.jkl-label{display:block;margin:0 0 var(--jkl-spacing-8) 0;color:var(--jkl-color-text-default)}.jkl-label--medium,.jkl-label--small{font:var(--jkl-text-style-text-medium)}.jkl-label--large{font:var(--jkl-text-style-text-large)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.jkl-label .jkl-help{position:relative;top:-.1ex}.jkl-input-group-description{font:var(--jkl-text-style-text-small);color:var(--jkl-color-text-subdued);-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8);max-inline-size:50ch;text-wrap:pretty}.jkl-label:has(+.jkl-input-group-description){-webkit-margin-after:var(--jkl-spacing-4);margin-block-end:var(--jkl-spacing-4)}@keyframes jkl-support-icon-entrance-ud8a0xm{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:var(--jkl-spacing-8)}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{transform:scale(1);opacity:1;margin-right:var(--jkl-spacing-8)}}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}}@layer jokul.components{.jkl-icon{--jkl-icon-fill:0;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform}.jkl-icon--filled{--jkl-icon-fill:1}.jkl-icon--animated{display:block}.jkl-icon-red-cross{color:var(--jkl-color-error-background-contrast)}.jkl-icon-green-check{color:var(--jkl-color-success-background-contrast)}.jkl-animated-horizontal-arrows,.jkl-animated-vertical-arrows{overflow:hidden;width:1.3em;height:1.3em}.jkl-animated-horizontal-arrows__slider,.jkl-animated-vertical-arrows__slider{display:flex;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive);transition-delay:calc(var(--jkl-motion-timing-expressive)*.33333);transition-property:transform}.jkl-animated-horizontal-arrows__arrow,.jkl-animated-vertical-arrows__arrow{flex-shrink:0}.jkl-animated-vertical-arrows__slider{flex-direction:column;height:2.6em}.jkl-animated-vertical-arrows__slider[data-show=up]{transform:translateZ(0)}.jkl-animated-vertical-arrows__slider[data-show=down],[data-toggled=true] .jkl-animated-vertical-arrows__slider{transform:translate3d(0,-50%,0)}.jkl-animated-horizontal-arrows__slider{flex-direction:row;width:2.6em}.jkl-animated-horizontal-arrows__slider[data-show=left]{transform:translateZ(0)}.jkl-animated-horizontal-arrows__slider[data-show=right]{transform:translate3d(-50%,0,0)}.jkl-icons-animated__plus{transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out);transition-duration:var(--jkl-motion-timing-expressive);transition-property:transform;transform-origin:50% 50%}.jkl-icons-animated__plus--plus{transform:rotate(0)}.jkl-icons-animated__plus--close{transform:rotate(135deg)}.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-contrast);font:var(--jkl-text-style-paragraph-small);background-color:var(--background-color);color:var(--jkl-color-text-on-contrast);display:inline-block;border-radius:var(--jkl-border-radius-s);min-width:-webkit-min-content;min-width:min-content;max-width:min(19.375rem,100%);padding:var(--content-padding);position:absolute;z-index:10000}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{transition-timing-function:var(--jkl-motion-easing-exit);transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;cursor:pointer;position:relative;background-color:initial;padding:0;display:inline-flex;align-items:baseline;color:var(--jkl-color-text-default);transform:translateY(min(.25em,.375rem));border-radius:9999px;outline:0;border-style:none;outline-style:none}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert}.jkl-tooltip-question-button,.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{color:var(--jkl-color-text-subdued)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-tooltip-question-button:after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;min-width:44px;min-height:44px}}.jkl-popuptip__content-wrapper:focus{outline:none}@layer jokul.components{.jkl-segmented-control{--jkl-segmented-controls-padding:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-segmented-controls-margin:1.5ch}.jkl-segmented-control .jkl-segmented-control-legend{-webkit-margin-after:.25lh;margin-block-end:.25lh}.jkl-segmented-control .jkl-segmented-control-item{--jkl-segmented-control-border-width:1px;--jkl-segmented-controls-border-radius:2lh;cursor:pointer;position:relative;display:inline-flex;align-items:center;background-color:initial;border:var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-subdued);border-radius:0;-webkit-margin-end:calc(var(--jkl-segmented-control-border-width)*-1);margin-inline-end:calc(var(--jkl-segmented-control-border-width)*-1);-webkit-margin-after:.5lh;margin-block-end:.5lh;transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out);transition-duration:var(--jkl-motion-timing-expressive);transition-property:border background}.jkl-segmented-control .jkl-segmented-control-item label{cursor:pointer;padding:var(--jkl-segmented-controls-padding)}.jkl-segmented-control .jkl-segmented-control-item:hover{background-color:color-mix(in srgb,currentColor 6%,#0000);border-color:var(--jkl-color-border-default);z-index:2}.jkl-segmented-control .jkl-segmented-control-item:has(input:checked){background-color:var(--jkl-color-background-container);border-color:var(--jkl-color-border-subdued);z-index:1}.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]){border-radius:var(--jkl-segmented-controls-border-radius);-webkit-margin-start:var(--jkl-segmented-controls-margin);margin-inline-start:var(--jkl-segmented-controls-margin)}.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]):first-of-type{-webkit-margin-start:0;margin-inline-start:0}.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true])+span+.jkl-segmented-control-item{border-end-start-radius:var(--jkl-segmented-controls-border-radius);border-start-start-radius:var(--jkl-segmented-controls-border-radius);-webkit-margin-start:var(--jkl-segmented-controls-margin);margin-inline-start:var(--jkl-segmented-controls-margin)}.jkl-segmented-control .jkl-segmented-control-item:first-of-type{border-end-start-radius:var(--jkl-segmented-controls-border-radius);border-start-start-radius:var(--jkl-segmented-controls-border-radius)}.jkl-segmented-control .jkl-segmented-control-item:last-of-type{border-end-end-radius:var(--jkl-segmented-controls-border-radius);border-start-end-radius:var(--jkl-segmented-controls-border-radius)}.jkl-segmented-control .jkl-segmented-control-item:has(+span+.jkl-segmented-control-item>input[data-separated=true]){border-end-end-radius:var(--jkl-segmented-controls-border-radius);border-start-end-radius:var(--jkl-segmented-controls-border-radius)}}