@fremtind/jokul 4.4.0 → 4.5.0

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-button{--jkl-button-font-size:var(--jkl-typography-body-base-font-size);--jkl-button-line-height:var(--jkl-typography-body-base-line-height);--jkl-button-padding-block:var(--jkl-unit-10);--jkl-button-padding-text:var(--jkl-unit-30);--jkl-button-padding-icon:var(--jkl-unit-20);--jkl-button-padding-icon-button:var(--jkl-unit-10);--jkl-button-tertiary-padding-icon:var(--jkl-unit-05);--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;display:inline-block;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;background:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;font-weight:700;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:a .3s linear;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button:has(.jkl-button__text){min-width:9.5ch}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:calc(var(--jkl-unit-base)*.25);pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease;width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-button:hover{background-color:color-mix(in srgb,var(--background-color),var(--text-color) 15%)}@media (forced-colors:active){.jkl-button:hover{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}@media (forced-colors:active){.jkl-button--primary{border:calc(var(--border-width)*2) solid Highlight}}.jkl-button--secondary{border:var(--border-width) solid var(--text-color)}.jkl-button--tertiary{border-bottom:var(--border-width) solid var(--text-color);padding-inline:var(--jkl-button-tertiary-padding-icon)}.jkl-button--tertiary:has(.jkl-icon:first-child){padding-inline:var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon)*2)}.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:calc(var(--jkl-button-tertiary-padding-icon)*2) var(--jkl-button-tertiary-padding-icon)}}
+@layer jokul.components{.jkl-button{--jkl-button-font-size:var(--jkl-typography-body-base-font-size);--jkl-button-line-height:var(--jkl-typography-body-base-line-height);--jkl-button-padding-block:var(--jkl-unit-10);--jkl-button-padding-text:var(--jkl-unit-30);--jkl-button-padding-icon:var(--jkl-unit-20);--jkl-button-padding-icon-button:var(--jkl-unit-10);--jkl-button-tertiary-padding-icon:var(--jkl-unit-05);--jkl-button-text-ink-offset:0.1em;--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;display:inline-block;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;background:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;font-weight:700;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:a .3s linear;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button:has(.jkl-button__text){min-width:9.5ch}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:calc(var(--jkl-unit-base)*.25);pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease;width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{display:block;max-width:100%;width:100%;-webkit-padding-before:var(--jkl-button-text-ink-offset);padding-block-start:var(--jkl-button-text-ink-offset);-webkit-margin-before:calc(var(--jkl-button-text-ink-offset)*-1);margin-block-start:calc(var(--jkl-button-text-ink-offset)*-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-button:hover{background-color:color-mix(in srgb,var(--background-color),var(--text-color) 15%)}@media (forced-colors:active){.jkl-button:hover{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}@media (forced-colors:active){.jkl-button--primary{border:calc(var(--border-width)*2) solid Highlight}}.jkl-button--secondary{border:var(--border-width) solid var(--text-color)}.jkl-button--tertiary{border-bottom:var(--border-width) solid var(--text-color);padding-inline:var(--jkl-button-tertiary-padding-icon)}.jkl-button--tertiary:has(.jkl-icon:first-child){padding-inline:var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon)*2)}.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:calc(var(--jkl-button-tertiary-padding-icon)*2) var(--jkl-button-tertiary-padding-icon)}}

package/styles/components/button/button.scss

@@ -11,6 +11,7 @@
         --jkl-button-padding-icon: var(--jkl-unit-20);
         --jkl-button-padding-icon-button: var(--jkl-unit-10);
         --jkl-button-tertiary-padding-icon: var(--jkl-unit-05);
+        --jkl-button-text-ink-offset: 0.1em;
         --jkl-icon-weight: var(--jkl-icon-weight-bold);
         --text-color: var(--jkl-color-text-default);
         --background-color: transparent;
@@ -83,8 +84,13 @@
             // Håndter tekster som er lenger enn knappen
             // Knappen vokser til teksten, men kan f.eks. begrenses
             // av sidebredde på mobil
+            display: block;
             width: 100%;
             max-width: 100%;
+            // Gir diakritiske tegn litt ekstra plass i tekstboksen uten
+            // å endre knappens totale høyde.
+            padding-block-start: var(--jkl-button-text-ink-offset);
+            margin-block-start: calc(var(--jkl-button-text-ink-offset) * -1);
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
@@ -104,11 +110,9 @@
         }
 
         &:hover {
-            background-color: color-mix(
-                in srgb,
-                var(--background-color),
-                var(--text-color) 15%
-            );
+            background-color: color-mix(in srgb,
+                    var(--background-color),
+                    var(--text-color) 15%);
 
             @media (forced-colors: active) {
                 @include jkl.focus-outline;
@@ -139,15 +143,11 @@
             padding-inline: var(--jkl-button-tertiary-padding-icon);
 
             &:has(.jkl-icon:first-child) {
-                padding-inline: var(--jkl-button-tertiary-padding-icon)
-                    calc(var(--jkl-button-tertiary-padding-icon) * 2);
+                padding-inline: var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon) * 2);
             }
 
             &:has(.jkl-icon:last-child) {
-                padding-inline: calc(
-                        var(--jkl-button-tertiary-padding-icon) * 2
-                    )
-                    var(--jkl-button-tertiary-padding-icon);
+                padding-inline: calc(var(--jkl-button-tertiary-padding-icon) * 2) var(--jkl-button-tertiary-padding-icon);
             }
         }
     }

package/styles/components/card/card.css

@@ -7,7 +7,7 @@
     --padding-m: var(--jkl-unit-15);
     --padding-l: var(--jkl-unit-20);
     --padding-xl: var(--jkl-unit-30);
-    --border-radius: 0.25rem;
+    --border-radius: var(--jkl-border-radius-m);
     --border-color: transparent;
     --border-width: 0.0625rem;
     --background-color: transparent;

package/styles/components/card/card.min.css

@@ -1 +1 @@
-@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);--border-radius:0.25rem;--border-color:transparent;--border-width:0.0625rem;--background-color:transparent;background-color:var(--background-color);border-radius:var(--border-radius);box-sizing:border-box;color:var(--jkl-color-text-default);display:block;overflow:hidden;padding:var(--padding,var(--padding-s));position:relative;text-decoration:none}.jkl-card:after{border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);content:"";inset:0;pointer-events:none;position:absolute;transition-duration:.1s;transition-property:border-color,border-size;transition-timing-function:ease}@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)}.jkl-card[data-padding=m]{--padding:var(--padding-m)}.jkl-card[data-padding=l]{--padding:var(--padding-l)}.jkl-card[data-padding=xl]{--padding:var(--padding-xl)}.jkl-card--high{--background-color:var(--jkl-color-background-container-high)}.jkl-card--low{--background-color:var(--jkl-color-background-container-low)}.jkl-card--outlined{--border-color:var(--jkl-color-border-separator)}.jkl-card[data-clickable=true]{cursor:pointer}.jkl-card[data-clickable=true]:hover{--border-color:var(--jkl-color-border-separator-hover);--border-width:0.125rem}.jkl-card[data-clickable=true]:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-card-image{--margin:calc(var(--padding, 0)*-1);aspect-ratio:var(--image-aspect-ratio,3/2);margin-inline:var(--margin,0);object-fit:cover;width:calc(100% + var(--padding, 0)*2)}.jkl-card-image--top{margin-top:var(--margin,0)}.jkl-card-image--bottom{margin-bottom:var(--margin,0)}.jkl-card-image--full{margin-block:var(--margin,0)}}
+@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);--border-radius:var(--jkl-border-radius-m);--border-color:transparent;--border-width:0.0625rem;--background-color:transparent;background-color:var(--background-color);border-radius:var(--border-radius);box-sizing:border-box;color:var(--jkl-color-text-default);display:block;overflow:hidden;padding:var(--padding,var(--padding-s));position:relative;text-decoration:none}.jkl-card:after{border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);content:"";inset:0;pointer-events:none;position:absolute;transition-duration:.1s;transition-property:border-color,border-size;transition-timing-function:ease}@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)}.jkl-card[data-padding=m]{--padding:var(--padding-m)}.jkl-card[data-padding=l]{--padding:var(--padding-l)}.jkl-card[data-padding=xl]{--padding:var(--padding-xl)}.jkl-card--high{--background-color:var(--jkl-color-background-container-high)}.jkl-card--low{--background-color:var(--jkl-color-background-container-low)}.jkl-card--outlined{--border-color:var(--jkl-color-border-separator)}.jkl-card[data-clickable=true]{cursor:pointer}.jkl-card[data-clickable=true]:hover{--border-color:var(--jkl-color-border-separator-hover);--border-width:0.125rem}.jkl-card[data-clickable=true]:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-card-image{--margin:calc(var(--padding, 0)*-1);aspect-ratio:var(--image-aspect-ratio,3/2);margin-inline:var(--margin,0);object-fit:cover;width:calc(100% + var(--padding, 0)*2)}.jkl-card-image--top{margin-top:var(--margin,0)}.jkl-card-image--bottom{margin-bottom:var(--margin,0)}.jkl-card-image--full{margin-block:var(--margin,0)}}

package/styles/components/card/card.scss

@@ -7,7 +7,7 @@
         --padding-m: var(--jkl-unit-15);
         --padding-l: var(--jkl-unit-20);
         --padding-xl: var(--jkl-unit-30);
-        --border-radius: #{jkl.rem(4px)};
+        --border-radius: var(--jkl-border-radius-m);
         --border-color: transparent;
         --border-width: #{jkl.rem(1px)};
         --background-color: transparent;

package/styles/components/checkbox/checkbox.css

@@ -34,14 +34,37 @@
   }
   .jkl-checkbox__input {
     position: absolute;
-    opacity: 0;
     inset-block-start: 0;
     inset-inline-start: 0;
     block-size: 1lh;
     inline-size: 1lh;
     margin: 0;
+    padding: 0;
     cursor: pointer;
     z-index: 1;
+    appearance: none;
+    background: transparent;
+    border: 0;
+  }
+  .jkl-checkbox__input {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-checkbox__input:active, .jkl-checkbox__input:hover, .jkl-checkbox__input:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox__input {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-checkbox__input:active, .jkl-checkbox__input:hover, .jkl-checkbox__input:focus {
+      outline: revert;
+      outline-style: revert;
+    }
   }
   .jkl-checkbox__label {
     cursor: pointer;
@@ -70,6 +93,10 @@
     transition-duration: 75ms;
     transition-property: font-variation-settings, transform;
   }
+  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
   .jkl-checkbox__input:is(:hover, :active) + .jkl-checkbox__label, .jkl-checkbox__label:hover, .jkl-checkbox__label:active {
     --jkl-icon-weight: 400;
   }

package/styles/components/checkbox/checkbox.min.css

@@ -1 +1 @@
-@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-checkbox-error-color:#ab2e43}}[data-theme=light]{--jkl-checkbox-error-color:#ab2e43}@media screen and (prefers-color-scheme:dark){:root{--jkl-checkbox-error-color:#d79ba5}}[data-theme=dark]{--jkl-checkbox-error-color:#d79ba5}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:transparent;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--text-color);display:flex;flex-wrap:wrap;position:relative}.jkl-checkbox__input{block-size:1lh;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;position:absolute;z-index:1}.jkl-checkbox__label{cursor:pointer;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);transition-duration:.15s;transition-property:color;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-checkbox__label:before{content:"check_box_outline_blank";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols 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),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-checkbox__input:is(:hover,:active)+.jkl-checkbox__label,.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:400}.jkl-checkbox__input:checked+.jkl-checkbox__label:before{content:"check_box";--jkl-icon-fill:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label:before{content:"indeterminate_check_box";--jkl-icon-fill:1}.jkl-checkbox__input[aria-invalid=true]+.jkl-checkbox__label:before{color:var(--jkl-checkbox-error-color)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}}
+@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-checkbox-error-color:#ab2e43}}[data-theme=light]{--jkl-checkbox-error-color:#ab2e43}@media screen and (prefers-color-scheme:dark){:root{--jkl-checkbox-error-color:#d79ba5}}[data-theme=dark]{--jkl-checkbox-error-color:#d79ba5}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:transparent;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--text-color);display:flex;flex-wrap:wrap;position:relative}.jkl-checkbox__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-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-checkbox__input{border-style:revert;outline:revert;outline-style:revert}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{cursor:pointer;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);transition-duration:.15s;transition-property:color;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-checkbox__label:before{content:"check_box_outline_blank";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols 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),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:is(:hover,:active)+.jkl-checkbox__label,.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:400}.jkl-checkbox__input:checked+.jkl-checkbox__label:before{content:"check_box";--jkl-icon-fill:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label:before{content:"indeterminate_check_box";--jkl-icon-fill:1}.jkl-checkbox__input[aria-invalid=true]+.jkl-checkbox__label:before{color:var(--jkl-checkbox-error-color)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}}

package/styles/components/checkbox/checkbox.scss

@@ -29,14 +29,19 @@
         &__input {
             // Keep the real input on top of the icon so automation tools can target it.
             position: absolute;
-            opacity: 0;
             inset-block-start: 0;
             inset-inline-start: 0;
             block-size: 1lh;
             inline-size: 1lh;
             margin: 0;
+            padding: 0;
             cursor: pointer;
             z-index: 1;
+            appearance: none;
+            background: transparent;
+            border: 0;
+
+            @include jkl.reset-outline;
         }
 
         &__label {
@@ -56,6 +61,10 @@
             }
         }
 
+        &__input:focus-visible + &__label::before {
+            @include jkl.focus-outline;
+        }
+
         &__input:is(:hover, :active) + &__label,
         &__label:hover,
         &__label:active {

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

@@ -115,14 +115,37 @@
   }
   .jkl-checkbox__input {
     position: absolute;
-    opacity: 0;
     inset-block-start: 0;
     inset-inline-start: 0;
     block-size: 1lh;
     inline-size: 1lh;
     margin: 0;
+    padding: 0;
     cursor: pointer;
     z-index: 1;
+    appearance: none;
+    background: transparent;
+    border: 0;
+  }
+  .jkl-checkbox__input {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-checkbox__input:active, .jkl-checkbox__input:hover, .jkl-checkbox__input:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox__input {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-checkbox__input:active, .jkl-checkbox__input:hover, .jkl-checkbox__input:focus {
+      outline: revert;
+      outline-style: revert;
+    }
   }
   .jkl-checkbox__label {
     cursor: pointer;
@@ -151,6 +174,10 @@
     transition-duration: 75ms;
     transition-property: font-variation-settings, transform;
   }
+  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
   .jkl-checkbox__input:is(:hover, :active) + .jkl-checkbox__label, .jkl-checkbox__label:hover, .jkl-checkbox__label:active {
     --jkl-icon-weight: 400;
   }
@@ -180,4 +207,7 @@
     /* Visuell justering ettersom ikonet ikke fyller bounding box helt */
     margin-inline-start: -0.1em;
   }
+  .jkl-checkbox-panel .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
+    outline: none;
+  }
 }

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--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:.15s;transition-property:box-shadow;transition-timing-function:ease}.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;inline-size:100%}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header__amount{align-items:center;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;grid-column:2;grid-row:1;height:100%;justify-self:end;line-height:var(--jkl-line-height-tight);pointer-events:none;position:relative;z-index:1;--jkl-icon-weight:300;font-weight:700}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-spacing-none);font-size:var(--jkl-font-size-3);font-weight:400;line-height:normal;line-height:var(--jkl-line-height-relaxed);padding-block-end:var(--jkl-spacing-none);--jkl-icon-weight:300;transition-duration:.15s;transition-property:height;transition-timing-function:ease}.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:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container-high)}.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-separator-hover);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-checkbox-error-color:#ab2e43}}[data-theme=light]{--jkl-checkbox-error-color:#ab2e43}@media screen and (prefers-color-scheme:dark){:root{--jkl-checkbox-error-color:#d79ba5}}[data-theme=dark]{--jkl-checkbox-error-color:#d79ba5}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:transparent;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--text-color);display:flex;flex-wrap:wrap;position:relative}.jkl-checkbox__input{block-size:1lh;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;position:absolute;z-index:1}.jkl-checkbox__label{cursor:pointer;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);transition-duration:.15s;transition-property:color;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-checkbox__label:before{content:"check_box_outline_blank";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols 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),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-checkbox__input:is(:hover,:active)+.jkl-checkbox__label,.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:400}.jkl-checkbox__input:checked+.jkl-checkbox__label:before{content:"check_box";--jkl-icon-fill:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label:before{content:"indeterminate_check_box";--jkl-icon-fill:1}.jkl-checkbox__input[aria-invalid=true]+.jkl-checkbox__label:before{color:var(--jkl-checkbox-error-color)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}}@layer jokul.components{.jkl-checkbox-panel .jkl-checkbox{-webkit-margin-start:-.1em;margin-inline-start:-.1em}}
+@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--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:.15s;transition-property:box-shadow;transition-timing-function:ease}.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;inline-size:100%}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header__amount{align-items:center;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;grid-column:2;grid-row:1;height:100%;justify-self:end;line-height:var(--jkl-line-height-tight);pointer-events:none;position:relative;z-index:1;--jkl-icon-weight:300;font-weight:700}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-spacing-none);font-size:var(--jkl-font-size-3);font-weight:400;line-height:normal;line-height:var(--jkl-line-height-relaxed);padding-block-end:var(--jkl-spacing-none);--jkl-icon-weight:300;transition-duration:.15s;transition-property:height;transition-timing-function:ease}.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:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container-high)}.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-separator-hover);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-checkbox-error-color:#ab2e43}}[data-theme=light]{--jkl-checkbox-error-color:#ab2e43}@media screen and (prefers-color-scheme:dark){:root{--jkl-checkbox-error-color:#d79ba5}}[data-theme=dark]{--jkl-checkbox-error-color:#d79ba5}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:transparent;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--text-color);display:flex;flex-wrap:wrap;position:relative}.jkl-checkbox__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-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-checkbox__input{border-style:revert;outline:revert;outline-style:revert}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{cursor:pointer;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);transition-duration:.15s;transition-property:color;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-checkbox__label:before{content:"check_box_outline_blank";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols 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),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:is(:hover,:active)+.jkl-checkbox__label,.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:400}.jkl-checkbox__input:checked+.jkl-checkbox__label:before{content:"check_box";--jkl-icon-fill:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label:before{content:"indeterminate_check_box";--jkl-icon-fill:1}.jkl-checkbox__input[aria-invalid=true]+.jkl-checkbox__label:before{color:var(--jkl-checkbox-error-color)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}}@layer jokul.components{.jkl-checkbox-panel .jkl-checkbox{-webkit-margin-start:-.1em;margin-inline-start:-.1em}.jkl-checkbox-panel .jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:none}}

package/styles/components/checkbox-panel/checkbox-panel.scss

@@ -10,4 +10,8 @@ $_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id()};
         /* Visuell justering ettersom ikonet ikke fyller bounding box helt */
         margin-inline-start: -0.1em;
     }
+
+    .jkl-checkbox-panel .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
+        outline: none;
+    }
 }

package/styles/components/combobox/combobox.css

@@ -163,6 +163,7 @@
     outline: none;
     padding: 0;
     flex: 1 1 1ch;
+    min-width: 0;
     max-height: var(--jkl-combobox-search-input-height);
     background: none;
     -webkit-appearance: none;
@@ -284,10 +285,12 @@
   }
   .jkl-combobox__chips {
     display: flex;
+    flex: 1 1 auto;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--jkl-combobox-chips-gap);
-    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
     padding: var(--jkl-text-input-padding);
   }
   .jkl-combobox__chips .jkl-chip {

package/styles/components/combobox/combobox.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-combobox{--jkl-combobox-button-padding:var(--jkl-unit-10);--jkl-combobox-button-active-value-padding:var(--jkl-unit-10) var(--jkl-unit-05) var(--jkl-unit-5) var(--jkl-unit-10);--jkl-combobox-input-height:3rem;--jkl-combobox-actions-right:var(--jkl-unit-10);--jkl-combobox-actions-top:var(--jkl-unit-05);--jkl-combobox-chips-gap:var(--jkl-unit-05);--jkl-combobox-search-input-padding:var(--jkl-combobox-button-padding);--jkl-combobox-native-padding:0 var(--jkl-unit-50) 0 var(--jkl-unit-10);--jkl-combobox-option-padding:var(--jkl-unit-10) var(--jkl-unit-15);--jkl-combobox-option-line-height:2rem;--jkl-combobox-search-input-height:1.75rem}@media (width >= 0) and (max-width:679px){.jkl-combobox{--jkl-combobox-input-height:2.75rem}}.jkl-combobox{border-style:none;outline:0;outline-style:none;position:relative}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox{border-style:revert;outline:revert;outline-style:revert}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:revert;outline-style:revert}}.jkl-combobox .jkl-combobox__option:focus{outline:none}.jkl-combobox__wrapper{cursor:pointer;gap:1ch;--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:var(--jkl-color-background-input-base);--border-color:var(--jkl-color-border-input);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;border-radius:var(--jkl-border-radius-s);box-sizing:border-box;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);max-width:100%;position:relative;--jkl-icon-weight:300;background-color:var(--background-color);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;color:var(--text-color);transition-duration:.15s;transition-property:color,box-shadow,background-color;transition-timing-function:ease}.jkl-combobox__wrapper:focus-within,.jkl-combobox__wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-input-focus)}.jkl-combobox__wrapper[data-invalid=true]: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-combobox__wrapper:focus-within,.jkl-combobox__wrapper:has([data-focused=true]),.jkl-combobox__wrapper:hover{--border-color:var(--jkl-color-border-input-focus);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-combobox__wrapper:focus-within,.jkl-combobox__wrapper:has([data-focused=true]),.jkl-combobox__wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-combobox__wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-combobox__wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-combobox__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-combobox__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-combobox__wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-combobox__wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-combobox__wrapper{border:.125rem inset ButtonText}}.jkl-combobox__wrapper--active-value .jkl-combobox__chips{padding:.46875rem}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(:focus-visible){background-color:var(--jkl-color-background-input-focus);outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible){outline:none}.jkl-combobox__wrapper:hover~.jkl-combobox__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-combobox__search-input{-webkit-appearance:none;background:none;border:none;color:inherit;flex:1 1 1ch;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);max-height:var(--jkl-combobox-search-input-height);outline:none;padding:0;--jkl-icon-weight:300;border-style:none;outline:0;outline-style:none}.jkl-combobox__search-input:active,.jkl-combobox__search-input:focus,.jkl-combobox__search-input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox__search-input{border-style:revert;outline:revert;outline-style:revert}.jkl-combobox__search-input:active,.jkl-combobox__search-input:focus,.jkl-combobox__search-input:hover{outline:revert;outline-style:revert}}.jkl-combobox__search-input input[type=number]::-webkit-inner-spin-button,.jkl-combobox__search-input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-combobox__search-input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-combobox__search-input{border:none;outline:none}.jkl-combobox__search-input:focus-visible{outline:none}}.jkl-combobox__search-input::placeholder{color:var(--placeholder-color);opacity:1}.jkl-combobox__arrow{pointer-events:none;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-combobox__arrow,.jkl-combobox__arrow path,.jkl-combobox__arrow svg{fill:CanvasText;stroke:CanvasText}}.jkl-combobox__menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);border-radius:0 0 .1875rem .1875rem;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-combobox-max-shown-options, 5) + .5)*var(--jkl-combobox-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:calc(100% - 1px);transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-combobox__option{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(--jkl-color-background-interactive);border:0;color:var(--jkl-color-text-default);cursor:pointer;display:flex;line-height:var(--jkl-combobox-option-line-height);padding:var(--jkl-combobox-option-padding);text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-combobox__option:focus,.jkl-combobox__option:hover{background-color:var(--jkl-color-background-interactive-hover)}.jkl-combobox__option-description{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--jkl-color-text-subdued);display:block;width:100%}.jkl-combobox__option--selected{justify-content:space-between}.jkl-combobox__no-option{padding:var(--jkl-combobox-option-padding)}.jkl-combobox__chips{align-items:center;display:flex;flex-wrap:wrap;gap:var(--jkl-combobox-chips-gap);padding:var(--jkl-text-input-padding);width:100%}.jkl-combobox__chips .jkl-chip{white-space:break-spaces}.jkl-combobox__chips .jkl-chip .jkl-tooltip-trigger{font-weight:700}.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{background-color:var(--jkl-color-background-alert-error)}.jkl-combobox--invalid .jkl-combobox__button,.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{color:var(--jkl-color-text-on-alert)}.jkl-combobox--menu-closed .jkl-combobox__search-input{background-color:transparent;padding-right:0;position:absolute;width:94%}.jkl-combobox--menu-open .jkl-combobox__wrapper{border-bottom-left-radius:0;border-bottom-right-radius:0}.jkl-combobox--menu-open .jkl-combobox__wrapper:hover .jkl-combobox__actions{transform:translateY(-.1875rem)}.jkl-combobox--menu-open .jkl-combobox__search-input{cursor:text}}
+@layer jokul.components{.jkl-combobox{--jkl-combobox-button-padding:var(--jkl-unit-10);--jkl-combobox-button-active-value-padding:var(--jkl-unit-10) var(--jkl-unit-05) var(--jkl-unit-5) var(--jkl-unit-10);--jkl-combobox-input-height:3rem;--jkl-combobox-actions-right:var(--jkl-unit-10);--jkl-combobox-actions-top:var(--jkl-unit-05);--jkl-combobox-chips-gap:var(--jkl-unit-05);--jkl-combobox-search-input-padding:var(--jkl-combobox-button-padding);--jkl-combobox-native-padding:0 var(--jkl-unit-50) 0 var(--jkl-unit-10);--jkl-combobox-option-padding:var(--jkl-unit-10) var(--jkl-unit-15);--jkl-combobox-option-line-height:2rem;--jkl-combobox-search-input-height:1.75rem}@media (width >= 0) and (max-width:679px){.jkl-combobox{--jkl-combobox-input-height:2.75rem}}.jkl-combobox{border-style:none;outline:0;outline-style:none;position:relative}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox{border-style:revert;outline:revert;outline-style:revert}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:revert;outline-style:revert}}.jkl-combobox .jkl-combobox__option:focus{outline:none}.jkl-combobox__wrapper{cursor:pointer;gap:1ch;--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:var(--jkl-color-background-input-base);--border-color:var(--jkl-color-border-input);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;border-radius:var(--jkl-border-radius-s);box-sizing:border-box;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);max-width:100%;position:relative;--jkl-icon-weight:300;background-color:var(--background-color);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;color:var(--text-color);transition-duration:.15s;transition-property:color,box-shadow,background-color;transition-timing-function:ease}.jkl-combobox__wrapper:focus-within,.jkl-combobox__wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-input-focus)}.jkl-combobox__wrapper[data-invalid=true]: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-combobox__wrapper:focus-within,.jkl-combobox__wrapper:has([data-focused=true]),.jkl-combobox__wrapper:hover{--border-color:var(--jkl-color-border-input-focus);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-combobox__wrapper:focus-within,.jkl-combobox__wrapper:has([data-focused=true]),.jkl-combobox__wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-combobox__wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-combobox__wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-combobox__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-combobox__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-combobox__wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-combobox__wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-combobox__wrapper{border:.125rem inset ButtonText}}.jkl-combobox__wrapper--active-value .jkl-combobox__chips{padding:.46875rem}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(:focus-visible){background-color:var(--jkl-color-background-input-focus);outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible){outline:none}.jkl-combobox__wrapper:hover~.jkl-combobox__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-combobox__search-input{-webkit-appearance:none;background:none;border:none;color:inherit;flex:1 1 1ch;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);max-height:var(--jkl-combobox-search-input-height);min-width:0;outline:none;padding:0;--jkl-icon-weight:300;border-style:none;outline:0;outline-style:none}.jkl-combobox__search-input:active,.jkl-combobox__search-input:focus,.jkl-combobox__search-input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox__search-input{border-style:revert;outline:revert;outline-style:revert}.jkl-combobox__search-input:active,.jkl-combobox__search-input:focus,.jkl-combobox__search-input:hover{outline:revert;outline-style:revert}}.jkl-combobox__search-input input[type=number]::-webkit-inner-spin-button,.jkl-combobox__search-input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-combobox__search-input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-combobox__search-input{border:none;outline:none}.jkl-combobox__search-input:focus-visible{outline:none}}.jkl-combobox__search-input::placeholder{color:var(--placeholder-color);opacity:1}.jkl-combobox__arrow{pointer-events:none;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-combobox__arrow,.jkl-combobox__arrow path,.jkl-combobox__arrow svg{fill:CanvasText;stroke:CanvasText}}.jkl-combobox__menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);border-radius:0 0 .1875rem .1875rem;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-combobox-max-shown-options, 5) + .5)*var(--jkl-combobox-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:calc(100% - 1px);transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-combobox__option{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(--jkl-color-background-interactive);border:0;color:var(--jkl-color-text-default);cursor:pointer;display:flex;line-height:var(--jkl-combobox-option-line-height);padding:var(--jkl-combobox-option-padding);text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-combobox__option:focus,.jkl-combobox__option:hover{background-color:var(--jkl-color-background-interactive-hover)}.jkl-combobox__option-description{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--jkl-color-text-subdued);display:block;width:100%}.jkl-combobox__option--selected{justify-content:space-between}.jkl-combobox__no-option{padding:var(--jkl-combobox-option-padding)}.jkl-combobox__chips{align-items:center;box-sizing:border-box;display:flex;flex:1 1 auto;flex-wrap:wrap;gap:var(--jkl-combobox-chips-gap);min-width:0;padding:var(--jkl-text-input-padding)}.jkl-combobox__chips .jkl-chip{white-space:break-spaces}.jkl-combobox__chips .jkl-chip .jkl-tooltip-trigger{font-weight:700}.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{background-color:var(--jkl-color-background-alert-error)}.jkl-combobox--invalid .jkl-combobox__button,.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{color:var(--jkl-color-text-on-alert)}.jkl-combobox--menu-closed .jkl-combobox__search-input{background-color:transparent;padding-right:0;position:absolute;width:94%}.jkl-combobox--menu-open .jkl-combobox__wrapper{border-bottom-left-radius:0;border-bottom-right-radius:0}.jkl-combobox--menu-open .jkl-combobox__wrapper:hover .jkl-combobox__actions{transform:translateY(-.1875rem)}.jkl-combobox--menu-open .jkl-combobox__search-input{cursor:text}}

package/styles/components/combobox/combobox.scss

@@ -66,6 +66,7 @@
             outline: none;
             padding: 0;
             flex: 1 1 1ch;
+            min-width: 0;
             max-height: var(--jkl-combobox-search-input-height);
 
             @include shared.input-styles;
@@ -141,10 +142,12 @@
 
         &__chips {
             display: flex;
+            flex: 1 1 auto;
             flex-wrap: wrap;
             align-items: center;
             gap: var(--jkl-combobox-chips-gap);
-            width: 100%;
+            min-width: 0;
+            box-sizing: border-box;
             padding: var(--jkl-text-input-padding);
 
             .jkl-chip {

package/styles/components/countdown/countdown.css

@@ -26,10 +26,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-ujh7hux var(--duration) linear forwards;
+    animation: jkl-downcount-u3htdho var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-ujh7hux {
+  @keyframes jkl-downcount-u3htdho {
     from {
       width: 100%;
     }

package/styles/components/countdown/countdown.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-ujh7hux var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-ujh7hux{0%{width:100%}to{width:0}}}
+@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-u3htdho var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-u3htdho{0%{width:100%}to{width:0}}}

package/styles/components/expander/expandable.css

@@ -31,34 +31,34 @@
   .jkl-expandable__wrapper {
     --border-radius: 0.25rem;
     --outline-offset: 3px;
+    --stroke-outline-offset: 3px;
+    --border-top-left-radius: var(--border-radius);
+    --border-top-right-radius: var(--border-radius);
+    --border-bottom-left-radius: var(--border-radius);
+    --border-bottom-right-radius: var(--border-radius);
+    position: relative;
+  }
+  .jkl-expandable__wrapper + .jkl-expandable__wrapper {
     --border-top-left-radius: 0;
     --border-top-right-radius: 0;
-    --border-bottom-left-radius: 0;
-    --border-bottom-right-radius: 0;
-    position: relative;
+    --stroke-outline-offset: -1px;
   }
   .jkl-expandable__wrapper + .jkl-expandable__wrapper .jkl-expandable--stroke {
     border-top: none;
   }
-  .jkl-expandable__wrapper:first-child {
-    --border-top-left-radius: var(--border-radius);
-    --border-top-right-radius: var(--border-radius);
-  }
-  .jkl-expandable__wrapper:last-child {
-    --border-bottom-left-radius: var(--border-radius);
-    --border-bottom-right-radius: var(--border-radius);
+  .jkl-expandable__wrapper:has(+ .jkl-expandable__wrapper) {
+    --border-bottom-left-radius: 0;
+    --border-bottom-right-radius: 0;
+    --stroke-outline-offset: -1px;
   }
   .jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke) {
-    --outline-offset: -1px;
+    --outline-offset: var(--stroke-outline-offset);
   }
   .jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container {
     outline: 3px solid var(--jkl-color-border-action);
     outline-offset: 3px;
     outline-offset: var(--outline-offset);
   }
-  .jkl-expandable__wrapper:has(:focus-visible):first-child:last-child {
-    --outline-offset: 3px;
-  }
   .jkl-expandable__focus-container {
     border-radius: var(--border-radius);
     position: absolute;

package/styles/components/expander/expandable.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-expandable{background-color:var(--jkl-color-background-container-low);border:1px solid transparent;border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden;width:100%}.jkl-expandable__content[data-expanded=true]{height:auto}.jkl-expandable__content[data-expanded=false]{height:0}.jkl-expandable[data-visible-content=true] .jkl-expander{border-bottom:1px solid transparent}.jkl-expandable__content-wrapper{padding:var(--jkl-unit-20)}.jkl-expandable--stroke{background-color:transparent;border-color:var(--jkl-color-border-separator);border-radius:0;border-radius:var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius)}.jkl-expandable__wrapper{--border-radius:0.25rem;--outline-offset:3px;--border-top-left-radius:0;--border-top-right-radius:0;--border-bottom-left-radius:0;--border-bottom-right-radius:0;position:relative}.jkl-expandable__wrapper+.jkl-expandable__wrapper .jkl-expandable--stroke{border-top:none}.jkl-expandable__wrapper:first-child{--border-top-left-radius:var(--border-radius);--border-top-right-radius:var(--border-radius)}.jkl-expandable__wrapper:last-child{--border-bottom-left-radius:var(--border-radius);--border-bottom-right-radius:var(--border-radius)}.jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke){--outline-offset:-1px}.jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container{outline:3px solid var(--jkl-color-border-action);outline-offset:3px;outline-offset:var(--outline-offset)}.jkl-expandable__wrapper:has(:focus-visible):first-child:last-child{--outline-offset:3px}.jkl-expandable__focus-container{border-radius:var(--border-radius);inset:0;position:absolute}.jkl-expander{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;box-sizing:border-box;color:var(--jkl-color);cursor:pointer;display:flex;gap:.5rem;list-style:none;padding:var(--jkl-unit-20);text-align:left;width:100%}.jkl-expander::-webkit-details-marker{display:none}.jkl-expander__label{flex-grow:1}.jkl-expander__chevron{text-align:right;transform:rotate(0turn);transition-property:transform;-webkit-user-select:none;user-select:none}.jkl-expander--open .jkl-expander__label{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}.jkl-expander--open .jkl-expander__chevron{transform:rotate(-.5turn);transition-duration:.1s;transition-timing-function:ease}@media (hover:hover){.jkl-expander:hover{background-color:var(--jkl-color-background-interactive-selected)}}.jkl-expander{border-style:none;outline:0;outline-style:none}.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-expander{border-style:revert;outline:revert;outline-style:revert}.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:revert;outline-style:revert}}}
+@layer jokul.components{.jkl-expandable{background-color:var(--jkl-color-background-container-low);border:1px solid transparent;border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden;width:100%}.jkl-expandable__content[data-expanded=true]{height:auto}.jkl-expandable__content[data-expanded=false]{height:0}.jkl-expandable[data-visible-content=true] .jkl-expander{border-bottom:1px solid transparent}.jkl-expandable__content-wrapper{padding:var(--jkl-unit-20)}.jkl-expandable--stroke{background-color:transparent;border-color:var(--jkl-color-border-separator);border-radius:0;border-radius:var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius)}.jkl-expandable__wrapper{--border-radius:0.25rem;--outline-offset:3px;--stroke-outline-offset:3px;--border-top-left-radius:var(--border-radius);--border-top-right-radius:var(--border-radius);--border-bottom-left-radius:var(--border-radius);--border-bottom-right-radius:var(--border-radius);position:relative}.jkl-expandable__wrapper+.jkl-expandable__wrapper{--border-top-left-radius:0;--border-top-right-radius:0;--stroke-outline-offset:-1px}.jkl-expandable__wrapper+.jkl-expandable__wrapper .jkl-expandable--stroke{border-top:none}.jkl-expandable__wrapper:has(+.jkl-expandable__wrapper){--border-bottom-left-radius:0;--border-bottom-right-radius:0;--stroke-outline-offset:-1px}.jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke){--outline-offset:var(--stroke-outline-offset)}.jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container{outline:3px solid var(--jkl-color-border-action);outline-offset:3px;outline-offset:var(--outline-offset)}.jkl-expandable__focus-container{border-radius:var(--border-radius);inset:0;position:absolute}.jkl-expander{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;box-sizing:border-box;color:var(--jkl-color);cursor:pointer;display:flex;gap:.5rem;list-style:none;padding:var(--jkl-unit-20);text-align:left;width:100%}.jkl-expander::-webkit-details-marker{display:none}.jkl-expander__label{flex-grow:1}.jkl-expander__chevron{text-align:right;transform:rotate(0turn);transition-property:transform;-webkit-user-select:none;user-select:none}.jkl-expander--open .jkl-expander__label{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}.jkl-expander--open .jkl-expander__chevron{transform:rotate(-.5turn);transition-duration:.1s;transition-timing-function:ease}@media (hover:hover){.jkl-expander:hover{background-color:var(--jkl-color-background-interactive-selected)}}.jkl-expander{border-style:none;outline:0;outline-style:none}.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-expander{border-style:revert;outline:revert;outline-style:revert}.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:revert;outline-style:revert}}}

package/styles/components/expander/expandable.scss

@@ -38,14 +38,18 @@
         &__wrapper {
             --border-radius: #{jkl.rem(4px)};
             --outline-offset: 3px;
-            --border-top-left-radius: 0;
-            --border-top-right-radius: 0;
-            --border-bottom-left-radius: 0;
-            --border-bottom-right-radius: 0;
+            --stroke-outline-offset: 3px;
+            --border-top-left-radius: var(--border-radius);
+            --border-top-right-radius: var(--border-radius);
+            --border-bottom-left-radius: var(--border-radius);
+            --border-bottom-right-radius: var(--border-radius);
 
             position: relative;
 
             & + & {
+                --border-top-left-radius: 0;
+                --border-top-right-radius: 0;
+                --stroke-outline-offset: -1px;
 
                 // Matches every expandable that follows directly after another
                 .jkl-expandable--stroke {
@@ -53,19 +57,15 @@
                 }
             }
 
-            &:first-child {
-                --border-top-left-radius: var(--border-radius);
-                --border-top-right-radius: var(--border-radius);
-            }
-
-            &:last-child {
-                --border-bottom-left-radius: var(--border-radius);
-                --border-bottom-right-radius: var(--border-radius);
+            &:has(+ &) {
+                --border-bottom-left-radius: 0;
+                --border-bottom-right-radius: 0;
+                --stroke-outline-offset: -1px;
             }
 
             &:has(.jkl-expander:focus-visible) {
                 &:has(.jkl-expandable--stroke) {
-                    --outline-offset: -1px;
+                    --outline-offset: var(--stroke-outline-offset);
                 }
 
                 .jkl-expandable__focus-container {
@@ -73,10 +73,6 @@
                     outline-offset: var(--outline-offset);
                 }
             }
-
-            &:has(:focus-visible):first-child:last-child {
-                --outline-offset: 3px;
-            }
         }
 
         &__focus-container {

package/styles/components/feedback/feedback.css

@@ -24,12 +24,12 @@
     --jkl-icon-size: 1.2em;
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uit2odr 0.25s ease-out;
+    animation: jkl-show-uivdlls 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uit2odr {
+  @keyframes jkl-show-uivdlls {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -75,10 +75,6 @@
     transition-duration: 150ms;
     transition-property: opacity;
   }
-  .jkl-feedback-smiley-option::after {
-    inset: -0.125rem -0.125rem -0.125rem -0.125rem;
-    box-shadow: 0 0 0 0.125rem currentColor;
-  }
   .jkl-feedback-smiley-option::before {
     inset: 0;
     box-shadow: 0 0.125rem 1.875rem rgba(0, 0, 0, 0.1);
@@ -93,7 +89,9 @@
   input:checked + .jkl-feedback-smiley-option::before {
     opacity: 1;
   }
-  html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-feedback-smiley-option::after {
-    opacity: 1;
+  input:focus-visible + .jkl-feedback-smiley-option {
+    border-radius: var(--jkl-border-radius-full);
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
   }
 }

package/styles/components/feedback/feedback.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);margin-bottom:var(--jkl-unit-20);--jkl-icon-weight:300;--jkl-icon-size:1.2em}.jkl-feedback__fade-in{animation:jkl-show-uit2odr .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-uit2odr{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:var(--jkl-unit-10);max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after{opacity:1}}
+@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);margin-bottom:var(--jkl-unit-20);--jkl-icon-weight:300;--jkl-icon-size:1.2em}.jkl-feedback__fade-in{animation:jkl-show-uivdlls .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-uivdlls{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:var(--jkl-unit-10);max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}input:focus-visible+.jkl-feedback-smiley-option{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-action);outline-offset:3px}}

package/styles/components/feedback/feedback.scss

@@ -82,11 +82,6 @@ $_show-animation-name: jkl-show-#{string.unique-id()};
             transition-property: opacity;
         }
 
-        &::after {
-            inset: jkl.rem(-2px) jkl.rem(-2px) jkl.rem(-2px) jkl.rem(-2px);
-            box-shadow: 0 0 0 jkl.rem(2px) currentColor;
-        }
-
         &::before {
             inset: 0;
             box-shadow: 0 jkl.rem(2px) jkl.rem(30px) rgb(0 0 0 / 10%);
@@ -105,10 +100,9 @@ $_show-animation-name: jkl-show-#{string.unique-id()};
             }
         }
 
-        input:focus + &::after {
-            @include jkl.keyboard-navigation {
-                opacity: 1;
-            }
+        input:focus-visible + & {
+            border-radius: var(--jkl-border-radius-full);
+            @include jkl.focus-outline;
         }
     }
 }