@fremtind/jokul 6.1.0-next.3 → 6.1.0-next.5

package/styles/components/search/search.scss

@@ -1,120 +1,115 @@
 @use "../../jkl/index" as jkl;
+@use "../../shared/input/shared-input-styles" as shared;
 @use "../icon/base-styles" as icon;
 
-.jkl-search {
-    --icon-size: var(--jkl-text-input-height);
-    --border-radius: var(--jkl-border-radius-s);
-    --border-width: 1px;
-    --border: var(--border-width) solid var(--jkl-color-border-default);
+@layer jokul.components {
+    .jkl-search {
+        width: 100%;
 
-    width: 100%;
-
-    @include jkl.text-style("text-medium");
-
-    .jkl-input-group {
-        display: contents;
-    }
-
-    input[type="search"] {
-        appearance: none;
-        padding: 0;
-        background-color: transparent;
-        color: var(--jkl-color-text-default);
-        grid-column: 2 / 3;
-
-        @include jkl.reset-outline;
-        @include jkl.text-style("text-medium");
-
-        &::-webkit-search-cancel-button,
-        &::-webkit-calendar-picker-indicator,
-        &::-webkit-search-results-button {
-            appearance: none;
-            display: none !important;
+        .jkl-input-group {
+            display: contents;
         }
-    }
 
-    .input-wrapper {
-        box-sizing: border-box;
-        display: grid;
-        grid-template-columns: 1.3em 1fr;
-        gap: 0.25em;
-        border: var(--border);
-        border-radius: var(--border-radius);
-        padding-inline-end: 0;
-        padding: calc(var(--jkl-unit-15) - var(--border-width));
-
-        &::before {
-            content: attr(data-icon) / "";
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            grid-column: 1;
-
-            @include jkl.use-font-family("Jokul Icons");
+        &__wrapper {
+            @include shared.wrapper-styles;
+
+            gap: 0.25em;
+            padding-inline: var(--jkl-text-input-horizontal-padding);
+
+            // Submit-knappen ligger inntil rammen, så den skal ikke ha padding utenfor seg
+            &:has(.jkl-search-submit) {
+                padding-inline-end: 0;
+            }
+
+            &::before {
+                content: attr(data-icon) / "";
+                flex: none;
+                inline-size: 1.3em;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+
+                @include jkl.use-font-family("Jokul Icons");
+            }
+
+            // Fokus-hookene i `wrapper-styles` peker på TextInput og TextArea, så søkefeltet
+            // må koble seg på selv. Avgrenset til selve inputen, ellers får wrapperen en ring
+            // i tillegg til ringen på knappene inni den.
+            @include jkl.keyboard-navigation {
+                &:has(> input[type="search"]:focus-visible) {
+                    @include jkl.focus-outline;
+                }
+            }
         }
 
-        &:has(.clear-button) {
-            grid-template-columns: 1.3em 1fr 1.3em;
-        }
+        input[type="search"] {
+            @include shared.input-styles;
 
-        &:has(input:focus-visible) {
-            @include jkl.focus-outline;
-            background-color: var(--jkl-color-background-container);
-        }
-    }
-
-    // Nettlesere har ulik støtte for begge disse metodene, så begge må være med per 12. november 2025
-    &:has(input:not(:valid), input:placeholder-shown) {
-        .clear-button {
-            display: none;
-        }
-    }
-
-    .clear-button {
-        position: relative;
-        display: grid;
-        appearance: none;
-        background-color: transparent;
-        border: 0;
-        height: 100%;
-        padding: 0;
-        color: var(--jkl-color-text-default);
-        border-radius: 100%;
-
-        &::before {
-            content: "close" / "";
-            display: inline-grid;
-            align-items: center;
-            justify-content: center;
-            place-self: center;
-            align-self: center;
-            grid-row: 1;
-            grid-column: 1;
-            z-index: 1;
-
-            @include icon.base-styles;
-        }
+            flex: 1 1 0;
+            min-width: 0;
+            padding-block: var(--jkl-text-input-vertical-padding);
 
-        &::after {
-            --tap-size: 1.25lh;
-            content: "";
-            position: absolute;
-            inset: calc((var(--tap-size) - 100%) / 2 * -1);
-            background-color: var(--jkl-color-text-default);
-            opacity: 0;
-            border-radius: inherit;
-
-            @include jkl.motion;
-            transition-property: opacity;
+            &::-webkit-search-cancel-button,
+            &::-webkit-calendar-picker-indicator,
+            &::-webkit-search-results-button {
+                appearance: none;
+                display: none !important;
+            }
         }
 
-        &:hover::after {
-            opacity: 0.15;
+        // Nettlesere har ulik støtte for begge disse metodene, så begge må være med per 12. november 2025
+        &:has(input:not(:valid), input:placeholder-shown) {
+            .jkl-search__clear-button {
+                display: none;
+            }
         }
 
-        &:focus-visible {
-            @include jkl.focus-outline;
+        &__clear-button {
+            position: relative;
+            display: grid;
+            flex: none;
+            align-self: stretch;
+            appearance: none;
+            background-color: transparent;
+            border: 0;
+            padding: 0;
+            color: var(--text-color);
+            border-radius: 100%;
+
+            &::before {
+                content: "close" / "";
+                display: inline-grid;
+                align-items: center;
+                justify-content: center;
+                place-self: center;
+                align-self: center;
+                grid-row: 1;
+                grid-column: 1;
+                z-index: 1;
+
+                @include icon.base-styles;
+            }
+
+            &::after {
+                --tap-size: 1.25lh;
+                content: "";
+                position: absolute;
+                inset: calc((var(--tap-size) - 100%) / 2 * -1);
+                background-color: var(--text-color);
+                opacity: 0;
+                border-radius: inherit;
+
+                @include jkl.motion;
+                transition-property: opacity;
+            }
+
+            &:hover::after {
+                opacity: 0.15;
+            }
+
+            &:focus-visible {
+                @include jkl.focus-outline;
+            }
         }
     }
 }

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

@@ -118,6 +118,21 @@
     margin-top: 0.25lh;
     margin-bottom: var(--jkl-unit-10);
   }
+  .jkl-radio-button:has(> .jkl-radio-button__input:disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-radio-button:has(> .jkl-radio-button__input:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-radio-button:has(> .jkl-radio-button__input:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
 }
 @layer jokul.components {
   .jkl-field-group {
@@ -192,7 +207,7 @@
     display: inline-flex;
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uktv6hp forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uo6yfl1 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -246,7 +261,57 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uktv6hp {
+  .jkl-input-group:has(:is(.jkl-text-input__input,
+  .jkl-text-area__text-area,
+  .jkl-number-input__input,
+  .jkl-date-input__input,
+  .jkl-combobox__search-input,
+  input[type=search]):read-only:not(:disabled)) > .jkl-label > .jkl-label__text::before,
+  .jkl-input-group:has(:is(.jkl-text-input__input,
+  .jkl-text-area__text-area,
+  .jkl-number-input__input,
+  .jkl-date-input__input,
+  .jkl-combobox__search-input,
+  input[type=search]):read-only:not(:disabled)) > .jkl-label:not(:has(> .jkl-label__text))::before {
+    font-family: var(--jkl-font-family-icons);
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
+    font-feature-settings: "liga";
+    -webkit-font-feature-settings: "liga";
+    font-size: 1.3em;
+    font-weight: 400;
+    line-height: 1;
+    display: inline-block;
+    flex-shrink: 0;
+    -webkit-font-smoothing: antialiased;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-energetic);
+    transition-property: font-variation-settings, transform;
+    content: "lock"/"";
+    vertical-align: text-bottom;
+    margin-inline-end: var(--jkl-spacing-4);
+    color: var(--jkl-color-text-subdued);
+  }
+  h1.jkl-label-heading {
+    font: var(--jkl-text-style-heading-3);
+    margin-block: 0;
+  }
+  h1.jkl-label-heading > .jkl-label {
+    margin: 0;
+  }
+  .jkl-input-group > h1.jkl-label-heading,
+  .jkl-field-group__legend:has(.jkl-label-heading) {
+    margin-block-end: var(--jkl-spacing-32);
+  }
+  .jkl-input-group > h1.jkl-label-heading:has(+ .jkl-input-group-description),
+  .jkl-field-group__legend:has(.jkl-label-heading):has(+ .jkl-input-group-description) {
+    margin-block-end: var(--jkl-spacing-4);
+  }
+  .jkl-input-group > h1.jkl-label-heading + .jkl-input-group-description,
+  .jkl-field-group__legend:has(.jkl-label-heading) + .jkl-input-group-description {
+    font: var(--jkl-text-style-paragraph-medium);
+    margin-block-end: var(--jkl-spacing-32);
+  }
+  @keyframes jkl-support-icon-entrance-uo6yfl1 {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -454,7 +519,7 @@
   .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;
@@ -465,46 +530,62 @@
     border: var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-subdued);
     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: var(--jkl-motion-easing-ease-in-bounce-out);
     transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: border background;
   }
-  .jkl-segmented-control .jkl-segmented-control-item label {
+  .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: color-mix(in srgb, currentColor 6%, transparent);
     border-color: var(--jkl-color-border-default);
     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);
     border-color: var(--jkl-color-border-subdued);
     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:disabled) {
+    border-color: var(--jkl-color-border-subdued);
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(> input:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(> input:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .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);
   }

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

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

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-subdued);
             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);
 
@@ -44,6 +44,12 @@
                 z-index: 1;
             }
 
+            &:has(> input:disabled) {
+                border-color: var(--jkl-color-border-subdued);
+
+                @include jkl.disabled-control;
+            }
+
             // Kontrollerer border og margin på separerte items + border-radius til neste sibling
             &:has(input[data-separated="true"]) {
                 border-radius: var(--jkl-segmented-controls-border-radius);

package/styles/components/select/option.css

@@ -34,8 +34,23 @@
     color: var(--icon-color);
     content: "check"/"";
   }
-  .jkl-option:hover, .jkl-option:focus-visible {
-    background-color: var(--jkl-color-background-container-accent);
+  .jkl-option:is(:hover, :focus-visible):not(:disabled):not([aria-disabled=true]) {
+    background-color: color-mix(in srgb, var(--background-color, transparent), var(--hover-accent-color, var(--jkl-color-background-contrast)) var(--jkl-opacity-hover, 10%));
+  }
+  .jkl-option:disabled, .jkl-option[aria-disabled=true] {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-option:disabled *, .jkl-option[aria-disabled=true] * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-option:disabled, .jkl-option[aria-disabled=true] {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
   }
   .jkl-option[aria-selected=true]::before {
     --icon-color: var(--jkl-color-background-contrast);

package/styles/components/select/option.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-option{--icon-color:#0000;--text-color:var(--jkl-color-text-default);grid-column:1/-1;display:grid;grid-template-columns:subgrid;padding:var(--jkl-spacing-8);background-color:initial;color:var(--text-color);border:none;border-radius:var(--jkl-border-radius-s);outline:none;align-items:start;text-align:left}.jkl-option:before{font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;color:var(--icon-color);content:"check"/""}.jkl-option:focus-visible,.jkl-option:hover{background-color:var(--jkl-color-background-container-accent)}.jkl-option[aria-selected=true]:before{content:"check"/""}.jkl-option[aria-selected=true]:before,.jkl-option[data-multiple]{--icon-color:var(--jkl-color-background-contrast)}.jkl-option[data-multiple]:before{content:"check_box_outline_blank"/""}.jkl-option[data-multiple][aria-selected=true]:before{--jkl-icon-fill:1;content:"check_box"/""}.jkl-option__label{flex-grow:999}.jkl-option__media{position:relative;width:var(--media-size,2em);min-width:2em;aspect-ratio:1;flex-shrink:0;overflow:hidden;border-radius:var(--jkl-border-radius-xs)}.jkl-option__media :is(img,picture,video){position:absolute;inset:0;object-fit:cover;width:100%;height:100%}}
+@layer jokul.components{.jkl-option{--icon-color:transparent;--text-color:var(--jkl-color-text-default);grid-column:1/-1;display:grid;grid-template-columns:subgrid;padding:var(--jkl-spacing-8);background-color:transparent;color:var(--text-color);border:none;border-radius:var(--jkl-border-radius-s);outline:none;align-items:start;text-align:left}.jkl-option:before{font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;color:var(--icon-color);content:"check"/""}.jkl-option:is(:hover,:focus-visible):not(:disabled):not([aria-disabled=true]){background-color:color-mix(in srgb,var(--background-color,transparent),var(--hover-accent-color,var(--jkl-color-background-contrast)) var(--jkl-opacity-hover,10%))}.jkl-option:disabled,.jkl-option[aria-disabled=true]{opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-option:disabled *,.jkl-option[aria-disabled=true] *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-option:disabled,.jkl-option[aria-disabled=true]{opacity:1;color:GrayText;border-color:GrayText}}.jkl-option[aria-selected=true]:before{--icon-color:var(--jkl-color-background-contrast);content:"check"/""}.jkl-option[data-multiple]{--icon-color:var(--jkl-color-background-contrast)}.jkl-option[data-multiple]:before{content:"check_box_outline_blank"/""}.jkl-option[data-multiple][aria-selected=true]:before{--jkl-icon-fill:1;content:"check_box"/""}.jkl-option__label{flex-grow:999}.jkl-option__media{position:relative;width:var(--media-size,2em);min-width:2em;aspect-ratio:1;flex-shrink:0;overflow:hidden;border-radius:var(--jkl-border-radius-xs)}.jkl-option__media :is(img,picture,video){position:absolute;inset:0;object-fit:cover;width:100%;height:100%}}

package/styles/components/select/option.scss

@@ -26,9 +26,12 @@
         }
 
 
-        &:hover,
-        &:focus-visible {
-            background-color: var(--jkl-color-background-container-accent);
+        &:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
+            @include jkl.hover-bg;
+        }
+
+        @include jkl.disabled-selectors {
+            @include jkl.disabled-control;
         }
 
         &[aria-selected="true"]::before {

package/styles/components/select/select.css

@@ -42,6 +42,23 @@
     --border-color: var(--jkl-color-error-border-default);
     --box-shadow: 0 0 0 0.0625rem var(--border-color);
   }
+  .jkl-select__button:disabled {
+    --border-color: var(--jkl-color-border-default);
+    --box-shadow: 0 0 0 0.0625rem transparent;
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-select__button:disabled * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-select__button:disabled {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
   .jkl-select__popover {
     /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
     --shadow-color: rgb(49 48 48 / 20%);

package/styles/components/select/select.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-select{--border-color:var(--jkl-color-border-default);--background-color:#0000;--color:var(--jkl-color-text-default);--box-shadow:0 0 0 0.0625rem #0000;--border-width:0.0625rem;--button-padding:calc(var(--jkl-unit-15) - var(--border-width));anchor-scope:--select-button}.jkl-select__button{display:grid;gap:var(--jkl-spacing-8);grid-template-columns:1fr auto;align-items:center;padding:var(--button-padding);border:var(--border-width) solid var(--border-color);border-radius:var(--jkl-border-radius-s);background-color:var(--background-color);color:var(--color);anchor-name:--select-button;box-shadow:var(--box-shadow);field-sizing:content;font:var(--jkl-text-style-text-medium);min-width:var(--width,20ch);max-width:100%;text-align:left}.jkl-select__button:hover{--border-color:var(--jkl-color-border-strong);--box-shadow:0 0 0 0.0625rem var(--border-color)}.jkl-select__button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-select__button[aria-invalid]{--color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-default);--box-shadow:0 0 0 0.0625rem var(--border-color)}.jkl-select__popover{--shadow-color:#31303033;--shadow-color:light-dark(#31303033, #00000080);z-index:var(--jkl-floating-z-index,9000);margin-block:var(--jkl-spacing-xs);min-inline-size:anchor-size(width);box-sizing:border-box;padding:var(--jkl-spacing-24);border:none;background-color:var(--jkl-color-background-container);position:fixed}.jkl-select__popover:not(:popover-open){display:none}.jkl-select__popover [role=listbox]{display:grid;grid-template-columns:auto 1fr auto;grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:498px){.jkl-select__popover{margin:0;inset:0;width:100%;height:100%;padding-bottom:calc(env(safe-area-inset-bottom) + var(--jkl-spacing-24))}.jkl-select__popover [role=listbox]{flex-grow:999;overflow-y:auto}.jkl-select__popover .jkl-button--primary,.jkl-select__popover header{flex-shrink:0}}@media (min-width:500px){.jkl-select__popover{position-anchor:--select-button;position-area:bottom span-right;position-try:normal flip-block;box-shadow:0 4px 20px 0 var(--shadow-color);border-radius:var(--jkl-border-radius-s);z-index:var(--jkl-floating-z-index,10000);padding:var(--jkl-spacing-8);inset:auto;margin-inline:0;max-height:45dvh;overscroll-behavior:none}@supports (max-height:round(up,45dvh,24px)){.jkl-select__popover{max-height:round(up,45dvh,24px)}}.jkl-select__popover .jkl-button--primary,.jkl-select__popover header{display:none}}.jkl-select select{display:none}}
+@layer jokul.components{.jkl-select{--border-color:var(--jkl-color-border-default);--background-color:transparent;--color:var(--jkl-color-text-default);--box-shadow:0 0 0 0.0625rem transparent;--border-width:0.0625rem;--button-padding:calc(var(--jkl-unit-15) - var(--border-width));anchor-scope:--select-button}.jkl-select__button{display:grid;gap:var(--jkl-spacing-8);grid-template-columns:1fr auto;align-items:center;padding:var(--button-padding);border:var(--border-width) solid var(--border-color);border-radius:var(--jkl-border-radius-s);background-color:var(--background-color);color:var(--color);anchor-name:--select-button;box-shadow:var(--box-shadow);field-sizing:content;font:var(--jkl-text-style-text-medium);min-width:var(--width,20ch);max-width:100%;text-align:left}.jkl-select__button:hover{--border-color:var(--jkl-color-border-strong);--box-shadow:0 0 0 0.0625rem var(--border-color)}.jkl-select__button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-select__button[aria-invalid]{--color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-default);--box-shadow:0 0 0 0.0625rem var(--border-color)}.jkl-select__button:disabled{--border-color:var(--jkl-color-border-default);--box-shadow:0 0 0 0.0625rem transparent;opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-select__button:disabled *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-select__button:disabled{opacity:1;color:GrayText;border-color:GrayText}}.jkl-select__popover{--shadow-color:rgba(49,48,48,.2);--shadow-color:light-dark(rgba(49,48,48,.2), rgba(0,0,0,.5));z-index:var(--jkl-floating-z-index,9000);margin-block:var(--jkl-spacing-xs);min-inline-size:anchor-size(width);box-sizing:border-box;padding:var(--jkl-spacing-24);border:none;background-color:var(--jkl-color-background-container);position:fixed}.jkl-select__popover:not(:popover-open){display:none}.jkl-select__popover [role=listbox]{display:grid;grid-template-columns:auto 1fr auto;grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:498px){.jkl-select__popover{margin:0;inset:0;width:100%;height:100%;padding-bottom:calc(env(safe-area-inset-bottom) + var(--jkl-spacing-24))}.jkl-select__popover [role=listbox]{flex-grow:999;overflow-y:auto}.jkl-select__popover .jkl-button--primary,.jkl-select__popover header{flex-shrink:0}}@media (min-width:500px){.jkl-select__popover{position-anchor:--select-button;position-area:bottom span-right;position-try:normal flip-block;box-shadow:0 4px 20px 0 var(--shadow-color);border-radius:var(--jkl-border-radius-s);z-index:var(--jkl-floating-z-index,10000);padding:var(--jkl-spacing-8);inset:auto;margin-inline:0;max-height:45dvh;overscroll-behavior:none}@supports (max-height:round(up,45dvh,24px)){.jkl-select__popover{max-height:round(up,45dvh,24px)}}.jkl-select__popover .jkl-button--primary,.jkl-select__popover header{display:none}}.jkl-select select{display:none}}

package/styles/components/select/select.scss

@@ -46,6 +46,13 @@
                 --border-color: var(--jkl-color-error-border-default);
                 --box-shadow: 0 0 0 #{jkl.rem(1px)} var(--border-color);
             }
+
+            &:disabled {
+                --border-color: var(--jkl-color-border-default);
+                --box-shadow: 0 0 0 #{jkl.rem(1px)} transparent;
+
+                @include jkl.disabled-control;
+            }
         }
 
         &__popover {

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

@@ -120,45 +120,25 @@
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uvr6m64 var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uk81f95 var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
-  .jkl-system-message--info {
-    --background-color: var(--jkl-color-info-background-container);
-    --text-color: var(--jkl-color-info-text-default);
-    --icon-color: var(--jkl-color-info-background-contrast);
-  }
-  .jkl-system-message--warning {
-    --background-color: var(--jkl-color-warning-background-container);
-    --text-color: var(--jkl-color-warning-text-default);
-    --icon-color: var(--jkl-color-warning-background-contrast);
-  }
-  .jkl-system-message--error {
-    --background-color: var(--jkl-color-error-background-container);
-    --text-color: var(--jkl-color-error-text-default);
-    --icon-color: var(--jkl-color-error-background-contrast);
-  }
-  .jkl-system-message--success {
-    --background-color: var(--jkl-color-success-background-container);
-    --text-color: var(--jkl-color-success-text-default);
-    --icon-color: var(--jkl-color-success-background-contrast);
-  }
   @media screen and (forced-colors: active) {
     .jkl-system-message {
       border: 2px solid CanvasText;
     }
-    .jkl-system-message--info {
+    .jkl-system-message[data-color=info] {
       border-style: dotted;
     }
-    .jkl-system-message--warning {
+    .jkl-system-message[data-color=warning] {
       border-style: dashed;
     }
-    .jkl-system-message--error {
+    .jkl-system-message[data-color=error] {
       border-style: double;
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uvr6m64 {
+  @keyframes jkl-dismiss-uk81f95 {
     from {
       opacity: 1;
       transform: translateY(0);