@fremtind/jokul 5.0.5 → 5.2.0

package/styles/components/list/list.min.css

@@ -1 +1 @@
-@charset "UTF-8";@layer jokul.components{.jkl-list{--list-text-color:var(--jkl-color-text-default);list-style-type:"•";margin:0;padding-left:var(--jkl-unit-20)}.jkl-list>.jkl-list__item>.jkl-list{margin:var(--jkl-unit-10) 0}.jkl-list:has(.jkl-list__item--iconed){padding:0}.jkl-list--ordered{padding-left:revert}.jkl-list--ordered>.jkl-list__item{list-style:decimal;padding-left:revert}.jkl-list--ordered .jkl-list--ordered>.jkl-list__item{list-style:lower-alpha}.jkl-list__item{color:var(--jkl-list-text-color);padding-left:var(--jkl-unit-15)}.jkl-list__item::marker{color:var(--jkl-list-text-color)}.jkl-list__item--iconed{display:flex;list-style:none;padding-left:0;position:relative}.jkl-list__item--iconed:before{display:inline-block;font-family:Jokul Icons,Jokul Icons Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;-webkit-font-smoothing:antialiased;border-radius:999px;box-sizing:border-box;display:inline-grid;flex-shrink:0;font-size:1em;height:1.1875em;line-height:1;margin-right:.5em;margin-top:.2em;place-items:center;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard);width:1.1875em;--jkl-icon-weight:var(--jkl-icon-weight-bold)}.jkl-list__item--check:before{content:"\e5ca";content:"\e5ca"/"";alt:" ";background-color:var(--jkl-color-success-background-contrast);color:var(--jkl-color-success-text-on-contrast)}.jkl-list__item--cross:before{content:"\e5cd";content:"\e5cd"/"";alt:" ";background-color:var(--jkl-color-error-background-contrast);color:var(--jkl-color-error-text-on-contrast)}@media screen and (forced-colors:active){.jkl-list .jkl-list__item--check:before,.jkl-list .jkl-list__item--cross:before{background-color:Canvas;border:1px solid CanvasText;color:CanvasText}}}
+@charset "UTF-8";@layer jokul.components{.jkl-list{--list-text-color:var(--jkl-color-text-default);list-style-type:"•";margin:0;padding-left:var(--jkl-unit-20)}.jkl-list>.jkl-list__item>.jkl-list{margin:var(--jkl-unit-10) 0}.jkl-list:has(.jkl-list__item--iconed){padding:0}.jkl-list--ordered{padding-left:revert}.jkl-list--ordered>.jkl-list__item{list-style:decimal;padding-left:revert}.jkl-list--ordered .jkl-list--ordered>.jkl-list__item{list-style:lower-alpha}.jkl-list__item{color:var(--jkl-list-text-color);padding-left:var(--jkl-unit-15)}.jkl-list__item::marker{color:var(--jkl-list-text-color)}.jkl-list__item--iconed{display:flex;list-style:none;padding-left:0;position:relative}.jkl-list__item--iconed:before{display:inline-block;font-family:var(--jkl-font-family-icons);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;-webkit-font-smoothing:antialiased;border-radius:999px;box-sizing:border-box;display:inline-grid;flex-shrink:0;font-size:1em;height:1.1875em;line-height:1;margin-right:.5em;margin-top:.2em;place-items:center;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard);width:1.1875em;--jkl-icon-weight:var(--jkl-icon-weight-bold)}.jkl-list__item--check:before{content:"\e5ca";content:"\e5ca"/"";alt:" ";background-color:var(--jkl-color-success-background-contrast);color:var(--jkl-color-success-text-on-contrast)}.jkl-list__item--cross:before{content:"\e5cd";content:"\e5cd"/"";alt:" ";background-color:var(--jkl-color-error-background-contrast);color:var(--jkl-color-error-text-on-contrast)}@media screen and (forced-colors:active){.jkl-list .jkl-list__item--check:before,.jkl-list .jkl-list__item--cross:before{background-color:Canvas;border:1px solid CanvasText;color:CanvasText}}}

package/styles/components/loader/loader.css

@@ -19,22 +19,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-ulk48wj;
+    animation-name: jkl-loader-left-spin-ux3wvmp;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-ulk48wz;
+    animation-name: jkl-loader-middle-spin-ux3wvmt;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-ulk48xf;
+    animation-name: jkl-loader-right-spin-ux3wvn3;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-ulk48wj {
+  @keyframes jkl-loader-left-spin-ux3wvmp {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -48,7 +48,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-ulk48wz {
+  @keyframes jkl-loader-middle-spin-ux3wvmt {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -65,7 +65,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-ulk48xf {
+  @keyframes jkl-loader-right-spin-ux3wvn3 {
     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{animation:2.5s linear infinite;background-color:currentColor;display:block;height:var(--jkl-loader-dot-size);transform-origin:center;width:var(--jkl-loader-dot-size)}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-ulk48wj;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-ulk48wz;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-ulk48xf}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-ulk48wj{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-ulk48wz{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-ulk48xf{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{animation:2.5s linear infinite;background-color:currentColor;display:block;height:var(--jkl-loader-dot-size);transform-origin:center;width:var(--jkl-loader-dot-size)}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-ux3wvmp;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-ux3wvmt;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-ux3wvn3}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-ux3wvmp{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-ux3wvmt{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-ux3wvn3{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-u5vxndq;
+      animation: 2s ease infinite jkl-blink-updsk5j;
     }
   }
   .jkl-skeleton-input {
@@ -74,10 +74,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u5vxndq;
+      animation: 2s ease-in-out infinite jkl-blink-updsk5j;
     }
   }
-  @keyframes jkl-blink-u5vxndq {
+  @keyframes jkl-blink-updsk5j {
     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%;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent 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)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-u5vxndq 2s ease infinite;border:1px solid CanvasText}}.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{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.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-u5vxndq 2s ease-in-out infinite}}@keyframes jkl-blink-u5vxndq{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%;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent 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)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-updsk5j 2s ease infinite;border:1px solid CanvasText}}.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{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.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-updsk5j 2s ease-in-out infinite}}@keyframes jkl-blink-updsk5j{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-ud7k6m1 var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-u9p3nc8 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-ud7k6m1 {
+  @keyframes jkl-dismiss-u9p3nc8 {
     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);align-items:start;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;color:var(--text-color);display:grid;font:var(--jkl-text-style-paragraph-medium);grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;max-width:35rem;padding:var(--jkl-message-padding);width:100%}.jkl-message:has(.jkl-message__title){font:var(--jkl-text-style-heading-5)}.jkl-message__icon{color:var(--icon-color);grid-area:icon;margin-right:var(--jkl-message-gap)}@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{background-color:transparent;border-style:none;color:inherit;display:grid;grid-area:dismiss;justify-self:end;outline:0;outline-style:none;padding:0;place-content:center;position:relative}.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;outline:revert;outline-style:revert}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.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:"";display:block;height:var(--jkl-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-message-dismiss-button-size)}.jkl-message__dismiss-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover{stroke:ButtonText}.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-ud7k6m1 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-ud7k6m1{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);align-items:start;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;color:var(--text-color);display:grid;font:var(--jkl-text-style-paragraph-medium);grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;max-width:35rem;padding:var(--jkl-message-padding);width:100%}.jkl-message:has(.jkl-message__title){font:var(--jkl-text-style-heading-5)}.jkl-message__icon{color:var(--icon-color);grid-area:icon;margin-right:var(--jkl-message-gap)}@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{background-color:transparent;border-style:none;color:inherit;display:grid;grid-area:dismiss;justify-self:end;outline:0;outline-style:none;padding:0;place-content:center;position:relative}.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;outline:revert;outline-style:revert}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.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:"";display:block;height:var(--jkl-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-message-dismiss-button-size)}.jkl-message__dismiss-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover{stroke:ButtonText}.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-u9p3nc8 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-u9p3nc8{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}}

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

@@ -22,6 +22,7 @@
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     max-width: 100%;
+    overflow: hidden;
     position: relative;
     display: flex;
     align-items: center;
@@ -37,7 +38,6 @@
     --background-color: var(--jkl-color-background-container);
   }
   .jkl-number-input__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
-    --background-color: var(--jkl-color-error-background-container);
     --text-color: var(--jkl-color-error-text-default);
     --border-color: var(--jkl-color-error-border-default);
     --placeholder-color: var(--jkl-color-error-text-subdued);

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-number-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-number-input__wrapper{--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-color:var(--jkl-color-border-default);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);max-width:100%;position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-number-input__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-default);--placeholder-color:var(--jkl-color-error-text-subdued)}.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]),.jkl-number-input__wrapper:hover{--border-color:var(--jkl-color-border-strong);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]),.jkl-number-input__wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-number-input__wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-number-input__wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-number-input__wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-number-input__wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-number-input__wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-number-input__wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-number-input__wrapper{border:.125rem inset ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-number-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-number-input__wrapper:has(.jkl-number-input__input:invalid):not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-background-alert-error);--text-color:var(--jkl-color-text-on-alert);--placeholder-color:color(from currentColor sRGB r g b/75%)}.jkl-number-input__wrapper--stepper{--jkl-number-input-stepper-min-width:calc(3ch + var(--jkl-text-input-horizontal-padding)*2);--jkl-number-input-stepper-text-color:var(--text-color);display:grid;grid-template-columns:-webkit-max-content minmax(var(--jkl-number-input-stepper-min-width),1fr) -webkit-max-content;grid-template-columns:max-content minmax(var(--jkl-number-input-stepper-min-width),1fr) max-content;overflow:hidden}.jkl-number-input__wrapper--stepper:has(button[data-direction]:focus-visible){overflow:visible}.jkl-number-input__input{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield;-webkit-appearance:none;background:none;border-style:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);width:100%}.jkl-number-input__input:active,.jkl-number-input__input:focus,.jkl-number-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-number-input__input{border-style:revert;outline:revert;outline-style:revert}.jkl-number-input__input:active,.jkl-number-input__input:focus,.jkl-number-input__input:hover{outline:revert;outline-style:revert}}.jkl-number-input__input input[type=number]::-webkit-inner-spin-button,.jkl-number-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-number-input__input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-number-input__input{border:none;outline:none}.jkl-number-input__input:focus-visible{outline:none}}.jkl-number-input__input::placeholder{color:var(--placeholder-color);opacity:1}.jkl-number-input__input::-webkit-inner-spin-button,.jkl-number-input__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.jkl-number-input__input--align-right{text-align:right}.jkl-number-input__input--stepper{box-sizing:border-box;min-inline-size:var(--jkl-number-input-stepper-min-width);text-align:center}.jkl-number-input button[data-direction]{--text-color:var(--jkl-number-input-stepper-text-color);aspect-ratio:1;display:inline-grid;height:100%;padding:0;place-items:center;text-align:center}.jkl-number-input button[data-direction]:before{background-color:var(--jkl-color-border-separator);content:"";inset-block:20%;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:inset;transition-timing-function:var(--jkl-motion-easing-standard);width:1px}.jkl-number-input button[data-direction]:focus-visible:before,.jkl-number-input button[data-direction]:hover:before{inset-block:.0625rem}.jkl-number-input button[data-direction]:disabled{cursor:not-allowed;opacity:.4}.jkl-number-input button[data-direction=decrement]:before{inset-inline-end:0}.jkl-number-input button[data-direction=increment]:before{inset-inline-start:0}.jkl-number-input button[data-direction].jkl-button{border-radius:0}.jkl-number-input button[data-direction].jkl-button .jkl-icon{-webkit-margin-before:.4ex;margin-block-start:.4ex}}
+@layer jokul.components{.jkl-number-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-number-input__wrapper{--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-color:var(--jkl-color-border-default);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);max-width:100%;overflow:hidden;position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-number-input__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-default);--placeholder-color:var(--jkl-color-error-text-subdued)}.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]),.jkl-number-input__wrapper:hover{--border-color:var(--jkl-color-border-strong);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]),.jkl-number-input__wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-number-input__wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-number-input__wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-number-input__wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-number-input__wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-number-input__wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-number-input__wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-number-input__wrapper{border:.125rem inset ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-number-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-number-input__wrapper:has(.jkl-number-input__input:invalid):not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-background-alert-error);--text-color:var(--jkl-color-text-on-alert);--placeholder-color:color(from currentColor sRGB r g b/75%)}.jkl-number-input__wrapper--stepper{--jkl-number-input-stepper-min-width:calc(3ch + var(--jkl-text-input-horizontal-padding)*2);--jkl-number-input-stepper-text-color:var(--text-color);display:grid;grid-template-columns:-webkit-max-content minmax(var(--jkl-number-input-stepper-min-width),1fr) -webkit-max-content;grid-template-columns:max-content minmax(var(--jkl-number-input-stepper-min-width),1fr) max-content;overflow:hidden}.jkl-number-input__wrapper--stepper:has(button[data-direction]:focus-visible){overflow:visible}.jkl-number-input__input{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield;-webkit-appearance:none;background:none;border-style:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);width:100%}.jkl-number-input__input:active,.jkl-number-input__input:focus,.jkl-number-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-number-input__input{border-style:revert;outline:revert;outline-style:revert}.jkl-number-input__input:active,.jkl-number-input__input:focus,.jkl-number-input__input:hover{outline:revert;outline-style:revert}}.jkl-number-input__input input[type=number]::-webkit-inner-spin-button,.jkl-number-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-number-input__input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-number-input__input{border:none;outline:none}.jkl-number-input__input:focus-visible{outline:none}}.jkl-number-input__input::placeholder{color:var(--placeholder-color);opacity:1}.jkl-number-input__input::-webkit-inner-spin-button,.jkl-number-input__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.jkl-number-input__input--align-right{text-align:right}.jkl-number-input__input--stepper{box-sizing:border-box;min-inline-size:var(--jkl-number-input-stepper-min-width);text-align:center}.jkl-number-input button[data-direction]{--text-color:var(--jkl-number-input-stepper-text-color);aspect-ratio:1;display:inline-grid;height:100%;padding:0;place-items:center;text-align:center}.jkl-number-input button[data-direction]:before{background-color:var(--jkl-color-border-separator);content:"";inset-block:20%;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:inset;transition-timing-function:var(--jkl-motion-easing-standard);width:1px}.jkl-number-input button[data-direction]:focus-visible:before,.jkl-number-input button[data-direction]:hover:before{inset-block:.0625rem}.jkl-number-input button[data-direction]:disabled{cursor:not-allowed;opacity:.4}.jkl-number-input button[data-direction=decrement]:before{inset-inline-end:0}.jkl-number-input button[data-direction=increment]:before{inset-inline-start:0}.jkl-number-input button[data-direction].jkl-button{border-radius:0}.jkl-number-input button[data-direction].jkl-button .jkl-icon{-webkit-margin-before:.4ex;margin-block-start:.4ex}}

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-uyih509 {
+  @keyframes jkl-downcount-uuq6pct {
     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);overflow:hidden;width:100%}.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@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;outline:0;outline-style:none}.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;outline:revert;outline-style:revert}.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-duration:var(--jkl-motion-timing-productive);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard)}@keyframes jkl-downcount-uyih509{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);overflow:hidden;width:100%}.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@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;outline:0;outline-style:none}.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;outline:revert;outline-style:revert}.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-duration:var(--jkl-motion-timing-productive);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard)}@keyframes jkl-downcount-uuq6pct{0%{width:100%}to{width:0}}}

package/styles/components/radio-button/radio-button.css

@@ -5,6 +5,8 @@
   .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);
   }
   .jkl-radio-button {
@@ -64,14 +66,16 @@
   .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 {
-    content: "radio_button_unchecked";
+    color: var(--icon-color);
+    content: "radio_button_unchecked"/"";
     margin-inline-end: 0.25em;
-    font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+    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";
@@ -79,6 +83,7 @@
     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);
@@ -93,7 +98,7 @@
     --jkl-icon-weight: var(--jkl-font-weight-bold);
   }
   .jkl-radio-button__input:checked + .jkl-radio-button__label::before {
-    content: "radio_button_checked";
+    content: "radio_button_checked"/"";
   }
   .jkl-radio-button__input[aria-invalid=true] + .jkl-radio-button__label::before {
     color: var(--jkl-color-error-background-contrast);

package/styles/components/radio-button/radio-button.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-radio-button{border-style:none;display:flex;font:var(--jkl-text-style-text-medium);outline:0;outline-style:none;position:relative}.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;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.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;outline:revert;outline-style:revert}.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;transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-radio-button__label:before{content:"radio_button_unchecked";-webkit-margin-end:.25em;display:inline-block;font-family:Jokul Icons,Jokul Icons Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.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-bottom:var(--jkl-unit-10);margin-left:1.75em;margin-top:.25lh}}
+@layer jokul.components{.jkl-radio-button{display:flex;position:relative;--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-background-contrast);border-style:none;font:var(--jkl-text-style-text-medium);outline:0;outline-style:none}.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;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.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;outline:revert;outline-style:revert}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:revert;outline-style:revert}}.jkl-radio-button__label{color:var(--text-color);cursor:pointer;display:flex;transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-radio-button__label:before{color:var(--icon-color);content:"radio_button_unchecked"/"";-webkit-margin-end:.25em;display:inline-block;flex-shrink:0;font-family:var(--jkl-font-family-icons);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.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-bottom:var(--jkl-unit-10);margin-left:1.75em;margin-top:.25lh}}

package/styles/components/radio-button/radio-button.scss

@@ -8,6 +8,9 @@
         display: flex;
         position: relative;
 
+        --text-color: var(--jkl-color-text-default);
+        --icon-color: var(--jkl-color-background-contrast);
+
         @include jkl.text-style("text-medium");
         @include jkl.reset-outline;
 
@@ -32,13 +35,14 @@
         &__label {
             cursor: pointer;
             display: flex;
+            color: var(--text-color);
 
             @include jkl.motion;
             transition-property: color;
 
-
             &::before {
-                content: "radio_button_unchecked";
+                color: var(--icon-color);
+                content: "radio_button_unchecked" / "";
                 margin-inline-end: 0.25em;
 
                 @include icon.base-styles;
@@ -58,7 +62,7 @@
         }
 
         &__input:checked + &__label::before {
-            content: "radio_button_checked";
+            content: "radio_button_checked" / "";
         }
 
         &__input[aria-invalid="true"] + &__label::before {

package/styles/components/radio-panel/radio-panel.css

@@ -34,6 +34,21 @@
   .jkl-input-panel__header label {
     inline-size: 100%;
   }
+  .jkl-input-panel__header label::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+  .jkl-input-panel__header label,
+  .jkl-input-panel__header .jkl-radio-button,
+  .jkl-input-panel__header .jkl-checkbox {
+    position: unset;
+  }
+  .jkl-input-panel__header input[type=checkbox],
+  .jkl-input-panel__header input[type=radio] {
+    inset-block-start: var(--jkl-unit-20);
+    inset-inline-start: var(--padding-inline);
+  }
   .jkl-input-panel__header__amount {
     display: flex;
     height: 100%;
@@ -69,6 +84,9 @@
     height: auto;
     padding-block-end: var(--jkl-unit-20);
   }
+  .jkl-input-panel:has(input[aria-invalid=true]) {
+    --outer-border-color: var(--jkl-color-error-border-default);
+  }
   .jkl-input-panel:has(input:hover) {
     --outer-border-color: var(--jkl-color-border-strong);
     --outer-border-thickness: 0.125rem;

package/styles/components/radio-panel/radio-panel.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-default);--outer-border-thickness:0.0625rem;--background-color:transparent;--padding-inline:var(--jkl-unit-25);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:var(--jkl-motion-timing-productive);transition-property:box-shadow;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-unit-20) var(--padding-inline);position:relative}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button{grid-column:1/-1;grid-row:1}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header__amount{align-items:center;display:flex;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);grid-column:2;grid-row:1;height:100%;justify-self:end;pointer-events:none;position:relative;z-index:1}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-spacing-none);line-height:normal;font:var(--jkl-text-style-paragraph-medium);padding-block-end:var(--jkl-spacing-none);transition-duration:var(--jkl-motion-timing-productive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-input-panel:has(:checked),.jkl-input-panel:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container)}.jkl-input-panel:has(:checked) .jkl-input-panel__description,.jkl-input-panel:not([data-always-open]) .jkl-input-panel__description,.jkl-input-panel[data-always-open=true] .jkl-input-panel__description{height:auto;-webkit-padding-after:var(--jkl-unit-20);padding-block-end:var(--jkl-unit-20)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-strong);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{.jkl-radio-panel .jkl-radio-button{-webkit-margin-start:-.15em;margin-inline-start:-.15em}.jkl-radio-panel .jkl-radio-button__input:focus-visible+.jkl-radio-button__label:before{outline:none}}
+@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-default);--outer-border-thickness:0.0625rem;--background-color:transparent;--padding-inline:var(--jkl-unit-25);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:var(--jkl-motion-timing-productive);transition-property:box-shadow;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-unit-20) var(--padding-inline);position:relative}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button{grid-column:1/-1;grid-row:1}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header label:after{content:"";inset:0;position:absolute}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button,.jkl-input-panel__header label{position:unset}.jkl-input-panel__header input[type=checkbox],.jkl-input-panel__header input[type=radio]{inset-block-start:var(--jkl-unit-20);inset-inline-start:var(--padding-inline)}.jkl-input-panel__header__amount{align-items:center;display:flex;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);grid-column:2;grid-row:1;height:100%;justify-self:end;pointer-events:none;position:relative;z-index:1}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-spacing-none);line-height:normal;font:var(--jkl-text-style-paragraph-medium);padding-block-end:var(--jkl-spacing-none);transition-duration:var(--jkl-motion-timing-productive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-input-panel:has(:checked),.jkl-input-panel:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container)}.jkl-input-panel:has(:checked) .jkl-input-panel__description,.jkl-input-panel:not([data-always-open]) .jkl-input-panel__description,.jkl-input-panel[data-always-open=true] .jkl-input-panel__description{height:auto;-webkit-padding-after:var(--jkl-unit-20);padding-block-end:var(--jkl-unit-20)}.jkl-input-panel:has(input[aria-invalid=true]){--outer-border-color:var(--jkl-color-error-border-default)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-strong);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{.jkl-radio-panel .jkl-radio-button{-webkit-margin-start:-.15em;margin-inline-start:-.15em}.jkl-radio-panel .jkl-radio-button__input:focus-visible+.jkl-radio-button__label:before{outline:none}}

package/styles/components/search/search-with-submit-button.css

@@ -19,18 +19,24 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   min-width: unset;
+  --inset-size: 1ex;
+  --separator-color: var(--jkl-color-border-subdued);
+  position: relative;
 }
 .jkl-search:has(button.jkl-search-submit) button.jkl-search-submit::before {
   content: "";
   position: absolute;
-  width: 1px;
-  inset: 0;
-  inset-block: 20%;
-  background-color: var(--jkl-color-border-subdued);
+  block-size: calc(100% * var(--inset-size));
+  top: 0;
+  left: 0;
+  inset-block: var(--inset-size);
+  border-inline-end: 1px solid var(--separator-color);
+  z-index: 1;
   transition-timing-function: var(--jkl-motion-easing-standard);
   transition-duration: var(--jkl-motion-timing-productive);
-  transition-property: inset;
+  transition-property: inset, border-color;
 }
-.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover::before {
-  inset-block: 0;
+.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover, .jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:focus-within {
+  --inset-size: 1px;
+  --separator-color: var(--jkl-color-border-subdued);
 }

package/styles/components/search/search-with-submit-button.min.css

@@ -1 +1 @@
-.jkl-search:has(button.jkl-search-submit){align-items:end;display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.jkl-search:has(button.jkl-search-submit) .input-wrapper{-webkit-border-end:0;border-bottom-right-radius:0;border-inline-end:0;border-top-right-radius:0}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit{border:var(--border);height:100%;-webkit-border-start:0;border-inline-start:0;border-radius:var(--jkl-border-radius-s);border-bottom-left-radius:0;border-top-left-radius:0;min-width:unset}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:before{background-color:var(--jkl-color-border-subdued);content:"";inset:0;inset-block:20%;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:inset;transition-timing-function:var(--jkl-motion-easing-standard);width:1px}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover:before{inset-block:0}
+.jkl-search:has(button.jkl-search-submit){align-items:end;display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.jkl-search:has(button.jkl-search-submit) .input-wrapper{-webkit-border-end:0;border-bottom-right-radius:0;border-inline-end:0;border-top-right-radius:0}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit{border:var(--border);height:100%;-webkit-border-start:0;border-inline-start:0;border-radius:var(--jkl-border-radius-s);border-bottom-left-radius:0;border-top-left-radius:0;min-width:unset;--inset-size:1ex;--separator-color:var(--jkl-color-border-subdued);position:relative}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:before{block-size:calc(100%*var(--inset-size));content:"";left:0;position:absolute;top:0;inset-block:var(--inset-size);-webkit-border-end:1px solid var(--separator-color);border-inline-end:1px solid var(--separator-color);transition-duration:var(--jkl-motion-timing-productive);transition-property:inset,border-color;transition-timing-function:var(--jkl-motion-easing-standard);z-index:1}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:focus-within,.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover{--inset-size:1px;--separator-color:var(--jkl-color-border-subdued)}

package/styles/components/search/search-with-submit-button.scss

@@ -21,20 +21,6 @@
         border-bottom-left-radius: 0;
         min-width: unset;
 
-        &::before {
-            content: "";
-            position: absolute;
-            width: 1px;
-            inset: 0;
-            inset-block: 20%;
-            background-color: var(--jkl-color-border-subdued);
-
-            @include jkl.motion;
-            transition-property: inset;
-        }
-
-        &:hover::before {
-            inset-block: 0;
-        }
+        @include shared.input-separator;
     }
 }

package/styles/components/search/search.css

@@ -60,7 +60,7 @@
   justify-content: center;
   height: 100%;
   grid-column: 1;
-  font-family: "Jokul Icons", "Jokul Icons Fallback", monospace;
+  font-family: var(--jkl-font-family-icons);
 }
 .jkl-search .input-wrapper:has(.clear-button) {
   grid-template-columns: 1.3em 1fr 1.3em;
@@ -89,7 +89,7 @@
   grid-row: 1;
   grid-column: 1;
   z-index: 1;
-  font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+  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";
@@ -97,6 +97,7 @@
   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);

package/styles/components/search/search.min.css

@@ -1 +1 @@
-.jkl-search{--icon-size:var(--jkl-text-input-height);--border-radius:var(--jkl-border-radius-s);--border-width:1px;--border:var(--border-width) solid var(--jkl-color-border-default);font:var(--jkl-text-style-text-medium);width:100%}.jkl-search input[type=search]{-webkit-appearance:none;appearance:none;background-color:transparent;color:var(--jkl-color-text-default);grid-column:2/3;padding:0}.jkl-search input[type=search]{border-style:none;outline:0;outline-style:none}.jkl-search input[type=search]:active,.jkl-search input[type=search]:focus,.jkl-search input[type=search]:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-search input[type=search]{border-style:revert;outline:revert;outline-style:revert}.jkl-search input[type=search]:active,.jkl-search input[type=search]:focus,.jkl-search input[type=search]:hover{outline:revert;outline-style:revert}}.jkl-search input[type=search]{font:var(--jkl-text-style-text-medium)}.jkl-search input[type=search]::-webkit-calendar-picker-indicator,.jkl-search input[type=search]::-webkit-search-cancel-button,.jkl-search input[type=search]::-webkit-search-results-button{-webkit-appearance:none;appearance:none;display:none!important}.jkl-search .input-wrapper{border:var(--border);border-radius:var(--border-radius);box-sizing:border-box;display:grid;gap:.25em;grid-template-columns:1.3em 1fr;-webkit-padding-end:0;padding-inline-end:0;padding:calc(var(--jkl-unit-15) - var(--border-width))}.jkl-search .input-wrapper:before{align-items:center;content:attr(data-icon)/"";display:inline-flex;font-family:Jokul Icons,Jokul Icons Fallback,monospace;grid-column:1;height:100%;justify-content:center}.jkl-search .input-wrapper:has(.clear-button){grid-template-columns:1.3em 1fr 1.3em}.jkl-search:has(input:not(:valid),input:placeholder-shown) .clear-button{display:none}.jkl-search .clear-button{-webkit-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:100%;color:var(--jkl-color-text-default);display:grid;height:100%;padding:0;position:relative}.jkl-search .clear-button:before{align-items:center;content:"close"/"";display:inline-grid;justify-content:center;place-self:center;align-self:center;display:inline-block;font-family:Jokul Icons,Jokul Icons Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;grid-column:1;grid-row:1;line-height:1;z-index:1;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-search .clear-button:after{--tap-size:1.25lh;background-color:var(--jkl-color-text-default);border-radius:inherit;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-search .clear-button:hover:after{opacity:.15}.jkl-search .clear-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}
+.jkl-search{--icon-size:var(--jkl-text-input-height);--border-radius:var(--jkl-border-radius-s);--border-width:1px;--border:var(--border-width) solid var(--jkl-color-border-default);font:var(--jkl-text-style-text-medium);width:100%}.jkl-search input[type=search]{-webkit-appearance:none;appearance:none;background-color:transparent;color:var(--jkl-color-text-default);grid-column:2/3;padding:0}.jkl-search input[type=search]{border-style:none;outline:0;outline-style:none}.jkl-search input[type=search]:active,.jkl-search input[type=search]:focus,.jkl-search input[type=search]:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-search input[type=search]{border-style:revert;outline:revert;outline-style:revert}.jkl-search input[type=search]:active,.jkl-search input[type=search]:focus,.jkl-search input[type=search]:hover{outline:revert;outline-style:revert}}.jkl-search input[type=search]{font:var(--jkl-text-style-text-medium)}.jkl-search input[type=search]::-webkit-calendar-picker-indicator,.jkl-search input[type=search]::-webkit-search-cancel-button,.jkl-search input[type=search]::-webkit-search-results-button{-webkit-appearance:none;appearance:none;display:none!important}.jkl-search .input-wrapper{border:var(--border);border-radius:var(--border-radius);box-sizing:border-box;display:grid;gap:.25em;grid-template-columns:1.3em 1fr;-webkit-padding-end:0;padding-inline-end:0;padding:calc(var(--jkl-unit-15) - var(--border-width))}.jkl-search .input-wrapper:before{align-items:center;content:attr(data-icon)/"";display:inline-flex;font-family:var(--jkl-font-family-icons);grid-column:1;height:100%;justify-content:center}.jkl-search .input-wrapper:has(.clear-button){grid-template-columns:1.3em 1fr 1.3em}.jkl-search:has(input:not(:valid),input:placeholder-shown) .clear-button{display:none}.jkl-search .clear-button{-webkit-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:100%;color:var(--jkl-color-text-default);display:grid;height:100%;padding:0;position:relative}.jkl-search .clear-button:before{align-items:center;content:"close"/"";display:inline-grid;justify-content:center;place-self:center;align-self:center;display:inline-block;flex-shrink:0;font-family:var(--jkl-font-family-icons);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;grid-column:1;grid-row:1;line-height:1;z-index:1;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-search .clear-button:after{--tap-size:1.25lh;background-color:var(--jkl-color-text-default);border-radius:inherit;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-search .clear-button:hover:after{opacity:.15}.jkl-search .clear-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}

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

@@ -5,6 +5,8 @@
   .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);
   }
   .jkl-radio-button {
@@ -64,14 +66,16 @@
   .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 {
-    content: "radio_button_unchecked";
+    color: var(--icon-color);
+    content: "radio_button_unchecked"/"";
     margin-inline-end: 0.25em;
-    font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+    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";
@@ -79,6 +83,7 @@
     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);
@@ -93,7 +98,7 @@
     --jkl-icon-weight: var(--jkl-font-weight-bold);
   }
   .jkl-radio-button__input:checked + .jkl-radio-button__label::before {
-    content: "radio_button_checked";
+    content: "radio_button_checked"/"";
   }
   .jkl-radio-button__input[aria-invalid=true] + .jkl-radio-button__label::before {
     color: var(--jkl-color-error-background-contrast);
@@ -145,7 +150,8 @@
   .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;
+    --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);
@@ -171,11 +177,22 @@
       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--warning, .jkl-form-support-label--success {
     --color: var(--jkl-color-text-default);
+    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-uajay78 forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uen0992 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -229,7 +246,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uajay78 {
+  @keyframes jkl-support-icon-entrance-uen0992 {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -269,7 +286,7 @@
 @layer jokul.components {
   .jkl-icon {
     --jkl-icon-fill: 0;
-    font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+    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";
@@ -277,6 +294,7 @@
     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);
@@ -288,31 +306,11 @@
   .jkl-icon--animated {
     display: block;
   }
-  .jkl-icon-red-cross,
-  .jkl-icon-green-check {
-    width: 1.3em;
-    height: 1.3em;
-    box-sizing: border-box;
-    border-radius: 999px;
-    display: inline-grid;
-    place-items: center;
-    font-size: 1em;
-  }
-  @media screen and (forced-colors: active) {
-    .jkl-icon-red-cross,
-    .jkl-icon-green-check {
-      background-color: Canvas;
-      color: CanvasText;
-      border: 1px solid CanvasText;
-    }
-  }
   .jkl-icon-red-cross {
-    background-color: var(--jkl-color-error-background-contrast);
-    color: var(--jkl-color-error-text-on-contrast);
+    color: var(--jkl-color-error-background-contrast);
   }
   .jkl-icon-green-check {
-    background-color: var(--jkl-color-success-background-contrast);
-    color: var(--jkl-color-success-text-on-contrast);
+    color: var(--jkl-color-success-background-contrast);
   }
   .jkl-animated-horizontal-arrows,
   .jkl-animated-vertical-arrows {