@fremtind/jokul 4.7.4 → 4.7.5

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

@@ -11,7 +11,7 @@
             margin-block-end: 0.25lh;
         }
 
-        .jkl-segmented-control-item {
+        .jkl-segmented-control-item.jkl-radio-button {
             --jkl-segmented-control-border-width: 1px;
             --jkl-segmented-controls-border-radius: 2lh;
 
@@ -23,7 +23,7 @@
             border: var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-separator);
             border-radius: 0; // Gjør det enklere å behandle separering senere
             margin-inline-end: calc(var(--jkl-segmented-control-border-width) * -1);
-            margin-block-end: 0.5lh;
+            margin-block: 0;
 
             @include jkl.motion("easeInBounceOut", "expressive", border background);
 

package/styles/components/system-message/system-message.css

@@ -117,7 +117,7 @@
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-upa0dbl 400ms forwards;
+    animation: jkl-dismiss-u44cn0z 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -147,7 +147,7 @@
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-upa0dbl {
+  @keyframes jkl-dismiss-u44cn0z {
     from {
       opacity: 1;
       transform: translateY(0);

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-system-message{--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-spacing-20);--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items:start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-upa0dbl .4s forwards;transition:block .4s .4s}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-upa0dbl{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}
+@layer jokul.components{.jkl-system-message{--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-spacing-20);--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items:start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-u44cn0z .4s forwards;transition:block .4s .4s}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-u44cn0z{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}

package/styles/components/tag/tag.css

@@ -15,6 +15,7 @@
   color: var(--text-color);
   border-radius: 0.25rem;
   display: inline-flex;
+  inline-size: fit-content;
   align-items: center;
   white-space: nowrap;
   padding: var(--padding);

package/styles/components/tag/tag.min.css

@@ -1 +1 @@
-.jkl-tag{--padding:var(--jkl-unit-02) var(--jkl-unit-10);--gap:var(--jkl-unit-05);--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items:center;background-color:var(--background-color);border-radius:.25rem;color:var(--text-color);display:inline-flex;font-weight:700;gap:var(--gap);padding:var(--padding);white-space:nowrap}.jkl-tag--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-tag--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-tag--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-tag--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-tag{border:2px CanvasText;border-style:none none dotted}.jkl-tag--info{border-style:dotted}.jkl-tag--warning{border-style:dashed}.jkl-tag--error{border-style:double;border-width:4px}.jkl-tag--success{border-style:solid}}
+.jkl-tag{--padding:var(--jkl-unit-02) var(--jkl-unit-10);--gap:var(--jkl-unit-05);--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items:center;background-color:var(--background-color);border-radius:.25rem;color:var(--text-color);display:inline-flex;font-weight:700;gap:var(--gap);inline-size:-webkit-fit-content;inline-size:fit-content;padding:var(--padding);white-space:nowrap}.jkl-tag--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-tag--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-tag--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-tag--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-tag{border:2px CanvasText;border-style:none none dotted}.jkl-tag--info{border-style:dotted}.jkl-tag--warning{border-style:dashed}.jkl-tag--error{border-style:double;border-width:4px}.jkl-tag--success{border-style:solid}}

package/styles/components/tag/tag.scss

@@ -14,6 +14,7 @@
     color: var(--text-color);
     border-radius: jkl.rem(4px);
     display: inline-flex;
+    inline-size: fit-content;
     align-items: center;
     white-space: nowrap;
     padding: var(--padding);

package/styles/components/toast/toast.css

@@ -135,12 +135,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uz2mavj 200ms ease-out forwards;
+    animation: jkl-entering-ulxdn3s 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uz2mavv 150ms ease-in forwards;
+    animation: jkl-exiting-ulxdn4r 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-uz2mavj {
+  @keyframes jkl-entering-ulxdn3s {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -150,7 +150,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uz2mavv {
+  @keyframes jkl-exiting-ulxdn4r {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);

package/styles/components/toast/toast.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw));--jkl-icon-weight:300}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-uz2mavj .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uz2mavv .15s ease-in forwards}@keyframes jkl-entering-uz2mavj{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uz2mavv{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
+@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw));--jkl-icon-weight:300}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-ulxdn3s .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-ulxdn4r .15s ease-in forwards}@keyframes jkl-entering-ulxdn3s{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-ulxdn4r{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}

package/styles/styles.css

@@ -481,7 +481,7 @@
     --color: var(--jkl-color-text-default);
   }
   .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: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uu1y9qv forwards;
+    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-ud5nn77 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -547,7 +547,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uu1y9qv {
+  @keyframes jkl-support-icon-entrance-ud5nn77 {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -909,22 +909,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uu1y9r3;
+    animation-name: jkl-loader-left-spin-ud5nn7m;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uu1y9rq;
+    animation-name: jkl-loader-middle-spin-ud5nn8g;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uu1y9sl;
+    animation-name: jkl-loader-right-spin-ud5nn8x;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uu1y9r3 {
+  @keyframes jkl-loader-left-spin-ud5nn7m {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -938,7 +938,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uu1y9rq {
+  @keyframes jkl-loader-middle-spin-ud5nn8g {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -955,7 +955,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uu1y9sl {
+  @keyframes jkl-loader-right-spin-ud5nn8x {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -995,7 +995,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uu1y9t8;
+      animation: 2s ease infinite jkl-blink-ud5nn9o;
     }
   }
   .jkl-skeleton-input {
@@ -1043,10 +1043,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uu1y9t8;
+      animation: 2s ease-in-out infinite jkl-blink-ud5nn9o;
     }
   }
-  @keyframes jkl-blink-uu1y9t8 {
+  @keyframes jkl-blink-ud5nn9o {
     0% {
       opacity: 1;
     }
@@ -1068,10 +1068,10 @@
 }
 @layer jokul.components {
   .jkl-card {
-    --padding-s: var(--jkl-unit-05);
-    --padding-m: var(--jkl-unit-15);
-    --padding-l: var(--jkl-unit-20);
-    --padding-xl: var(--jkl-unit-30);
+    --padding-s: var(--jkl-unit-10);
+    --padding-m: var(--jkl-unit-20);
+    --padding-l: var(--jkl-unit-30);
+    --padding-xl: var(--jkl-unit-40);
     --border-radius: var(--jkl-border-radius-m);
     --border-color: transparent;
     --border-width: 0.0625rem;
@@ -1097,14 +1097,6 @@
     transition-duration: 100ms;
     transition-property: border-color, border-size;
   }
-  @media (min-width: 680px) {
-    .jkl-card {
-      --padding-s: var(--jkl-unit-10);
-      --padding-m: var(--jkl-unit-20);
-      --padding-l: var(--jkl-unit-30);
-      --padding-xl: var(--jkl-unit-40);
-    }
-  }
   .jkl-card[data-padding=s] {
     --padding: var(--padding-s);
   }
@@ -1196,6 +1188,7 @@
   color: var(--text-color);
   border-radius: 0.25rem;
   display: inline-flex;
+  inline-size: fit-content;
   align-items: center;
   white-space: nowrap;
   padding: var(--padding);
@@ -1404,30 +1397,21 @@
     font-weight: 700;
   }
   .jkl-input-panel__description {
-    height: 0;
-    overflow: hidden;
     padding-inline: var(--padding-inline);
-    padding-block-end: var(--jkl-spacing-none);
+    padding-block-end: var(--jkl-unit-20);
     line-height: initial;
     font-size: var(--jkl-font-size-3);
     line-height: var(--jkl-line-height-relaxed);
     font-weight: 400;
     --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
-    transition-property: height;
   }
   .jkl-input-panel:has(:focus-visible) {
     outline: 3px solid var(--jkl-color-border-action);
     outline-offset: 3px;
   }
-  .jkl-input-panel:has(:checked), .jkl-input-panel[data-always-open=true], .jkl-input-panel:not([data-always-open]) {
+  .jkl-input-panel:has(:checked) {
     --background-color: var(--jkl-color-background-container-high);
   }
-  .jkl-input-panel:has(:checked) .jkl-input-panel__description, .jkl-input-panel[data-always-open=true] .jkl-input-panel__description, .jkl-input-panel:not([data-always-open]) .jkl-input-panel__description {
-    height: auto;
-    padding-block-end: var(--jkl-unit-20);
-  }
   .jkl-input-panel:has(input:hover) {
     --outer-border-color: var(--jkl-color-border-separator-hover);
     --outer-border-thickness: 0.125rem;
@@ -2151,10 +2135,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uu1y9uo var(--duration) linear forwards;
+    animation: jkl-downcount-ud5nnaf var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uu1y9uo {
+  @keyframes jkl-downcount-ud5nnaf {
     from {
       width: 100%;
     }
@@ -2673,12 +2657,12 @@
     --jkl-icon-size: 1.2em;
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uu1y9ur 0.25s ease-out;
+    animation: jkl-show-ud5nnb9 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uu1y9ur {
+  @keyframes jkl-show-ud5nnb9 {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2893,7 +2877,7 @@
     --background-color: var(--jkl-color-background-alert-success);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uu1y9vj 400ms ease-in-out forwards;
+    animation: jkl-dismiss-ud5nnbe 400ms ease-in-out forwards;
     transition: visibility 0ms 400ms;
     visibility: hidden;
   }
@@ -2915,7 +2899,7 @@
   .jkl-form-error-message {
     padding-bottom: calc(var(--jkl-unit-base) * 5);
   }
-  @keyframes jkl-dismiss-uu1y9vj {
+  @keyframes jkl-dismiss-ud5nnbe {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -4591,7 +4575,7 @@
     transition-timing-function: ease;
     transition-duration: 150ms;
   }
-  @keyframes jkl-downcount-uu1y9w2 {
+  @keyframes jkl-downcount-ud5nnbv {
     from {
       width: 100%;
     }
@@ -4881,7 +4865,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   .jkl-segmented-control .jkl-segmented-control-legend {
     margin-block-end: 0.25lh;
   }
-  .jkl-segmented-control .jkl-segmented-control-item {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button {
     --jkl-segmented-control-border-width: 1px;
     --jkl-segmented-controls-border-radius: 2lh;
     cursor: pointer;
@@ -4892,46 +4876,46 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     border: var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-separator);
     border-radius: 0;
     margin-inline-end: calc(var(--jkl-segmented-control-border-width) * -1);
-    margin-block-end: 0.5lh;
+    margin-block: 0;
     transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
     transition-duration: 250ms;
     transition-property: border background;
   }
-  .jkl-segmented-control .jkl-segmented-control-item label {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button label {
     cursor: pointer;
     padding: var(--jkl-segmented-controls-padding);
   }
-  .jkl-segmented-control .jkl-segmented-control-item:hover {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:hover {
     background-color: var(--jkl-color-background-interactive-hover);
     border-color: var(--jkl-color-border-separator-hover);
     z-index: 2;
   }
-  .jkl-segmented-control .jkl-segmented-control-item:has(input:checked) {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input:checked) {
     background-color: var(--jkl-color-background-container-high);
     border-color: var(--jkl-color-border-separator);
     z-index: 1;
   }
-  .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]) {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input[data-separated=true]) {
     border-radius: var(--jkl-segmented-controls-border-radius);
     margin-inline-start: var(--jkl-segmented-controls-margin);
   }
-  .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]):first-of-type {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input[data-separated=true]):first-of-type {
     margin-inline-start: 0;
   }
-  .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]) + span + .jkl-segmented-control-item {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button: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);
     margin-inline-start: var(--jkl-segmented-controls-margin);
   }
-  .jkl-segmented-control .jkl-segmented-control-item:first-of-type {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button: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 {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button: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]) {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button: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);
   }
@@ -5095,7 +5079,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uu1y9xc 400ms forwards;
+    animation: jkl-dismiss-ud5nnd1 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -5125,7 +5109,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uu1y9xc {
+  @keyframes jkl-dismiss-ud5nnd1 {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5962,12 +5946,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uu1y9y3 200ms ease-out forwards;
+    animation: jkl-entering-ud5nnde 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uu1y9yd 150ms ease-in forwards;
+    animation: jkl-exiting-ud5nndr 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-uu1y9y3 {
+  @keyframes jkl-entering-ud5nnde {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5977,7 +5961,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uu1y9yd {
+  @keyframes jkl-exiting-ud5nndr {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);