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

package/styles/components.css

@@ -111,6 +111,31 @@
       border: 0.125rem solid ButtonText;
     }
   }
+  .jkl-text-input-wrapper:has(> :is(input, textarea):disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-text-input-wrapper:has(> :is(input, textarea):disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-text-input-wrapper:has(> :is(input, textarea):disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-text-input-wrapper:has(> :is(input, textarea):read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
+  .jkl-text-input-wrapper:has(> :is(input, textarea):read-only:not(:disabled)):hover, .jkl-text-input-wrapper:has(> :is(input, textarea):read-only:not(:disabled)):focus-within, .jkl-text-input-wrapper:has(> :is(input, textarea):read-only:not(:disabled)):has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
+  }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible) {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
@@ -425,7 +450,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-u8trttj forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uhyh5jl forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -479,6 +504,36 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     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 > .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;
@@ -499,7 +554,7 @@
     font: var(--jkl-text-style-paragraph-medium);
     margin-block-end: var(--jkl-spacing-32);
   }
-  @keyframes jkl-support-icon-entrance-u8trttj {
+  @keyframes jkl-support-icon-entrance-uhyh5jl {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -806,7 +861,7 @@
     outline-offset: 3px;
   }
   .jkl-button:hover {
-    background-color: color-mix(in srgb, var(--background-color), var(--text-color) 15%);
+    background-color: color-mix(in srgb, var(--background-color, transparent), var(--hover-accent-color, var(--jkl-color-background-contrast)) var(--jkl-opacity-hover, 10%));
   }
   @media (forced-colors: active) {
     .jkl-button:hover {
@@ -820,6 +875,7 @@
   .jkl-button--primary {
     --background-color: var(--jkl-color-background-contrast);
     --text-color: var(--jkl-color-text-on-contrast);
+    --hover-accent-color: var(--jkl-color-text-on-contrast);
   }
   @media (forced-colors: active) {
     .jkl-button--primary {
@@ -858,22 +914,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-u8trtud;
+    animation-name: jkl-loader-left-spin-uhyh5jv;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-u8trtuw;
+    animation-name: jkl-loader-middle-spin-uhyh5ku;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-u8trtvq;
+    animation-name: jkl-loader-right-spin-uhyh5lh;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-u8trtud {
+  @keyframes jkl-loader-left-spin-uhyh5jv {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -887,7 +943,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-u8trtuw {
+  @keyframes jkl-loader-middle-spin-uhyh5ku {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -904,7 +960,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-u8trtvq {
+  @keyframes jkl-loader-right-spin-uhyh5lh {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -944,7 +1000,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-u8trtw4;
+      animation: 2s ease infinite jkl-blink-uhyh5m0;
     }
   }
   .jkl-skeleton-input {
@@ -992,10 +1048,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u8trtw4;
+      animation: 2s ease-in-out infinite jkl-blink-uhyh5m0;
     }
   }
-  @keyframes jkl-blink-u8trtw4 {
+  @keyframes jkl-blink-uhyh5m0 {
     0% {
       opacity: 1;
     }
@@ -1156,42 +1212,22 @@
   padding: var(--padding);
   gap: var(--gap);
 }
-.jkl-tag--info {
-  --background-color: var(--jkl-color-info-background-container-accent);
-  --text-color: var(--jkl-color-info-text-default);
-  --border-color: var(--jkl-color-info-border-subdued);
-}
-.jkl-tag--warning {
-  --background-color: var(--jkl-color-warning-background-container-accent);
-  --text-color: var(--jkl-color-warning-text-default);
-  --border-color: var(--jkl-color-warning-border-subdued);
-}
-.jkl-tag--error {
-  --background-color: var(--jkl-color-error-background-container-accent);
-  --text-color: var(--jkl-color-error-text-default);
-  --border-color: var(--jkl-color-error-border-subdued);
-}
-.jkl-tag--success {
-  --background-color: var(--jkl-color-success-background-container-accent);
-  --text-color: var(--jkl-color-success-text-default);
-  --border-color: var(--jkl-color-success-border-subdued);
-}
 @media screen and (forced-colors: active) {
   .jkl-tag {
     border: 2px none CanvasText;
     border-bottom-style: dotted;
   }
-  .jkl-tag--info {
+  .jkl-tag[data-color=info] {
     border-style: dotted;
   }
-  .jkl-tag--warning {
+  .jkl-tag[data-color=warning] {
     border-style: dashed;
   }
-  .jkl-tag--error {
+  .jkl-tag[data-color=error] {
     border-style: double;
     border-width: 4px;
   }
-  .jkl-tag--success {
+  .jkl-tag[data-color=success] {
     border-style: solid;
   }
 }
@@ -1294,6 +1330,21 @@
   .jkl-checkbox--inline:not(:last-of-type) {
     margin-right: var(--jkl-unit-30);
   }
+  .jkl-checkbox:has(> .jkl-checkbox__input:disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-checkbox:has(> .jkl-checkbox__input:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox:has(> .jkl-checkbox__input:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
 }
 @layer jokul.components {
   .jkl-input-panel {
@@ -1377,6 +1428,23 @@
     --outer-border-thickness: 0.125rem;
     cursor: pointer;
   }
+  .jkl-input-panel:has(.jkl-input-panel__header input:disabled) {
+    --outer-border-color: var(--jkl-color-border-default);
+    --outer-border-thickness: 0.0625rem;
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-input-panel:has(.jkl-input-panel__header input:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-input-panel:has(.jkl-input-panel__header input:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
 }
 @layer jokul.components {
   .jkl-checkbox-panel .jkl-checkbox {
@@ -1410,6 +1478,9 @@
   gap: var(--gap);
   padding: 0 var(--padding-inline);
   min-height: var(--height);
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
+  transition-property: background-color;
 }
 @media screen and (forced-colors: active) {
   .jkl-chip {
@@ -1417,27 +1488,17 @@
     border-bottom-style: dotted;
   }
 }
-.jkl-chip::after {
-  content: "";
-  opacity: 0;
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background-color: var(--text-color);
-  transition-timing-function: var(--jkl-motion-easing-standard);
-  transition-duration: var(--jkl-motion-timing-productive);
-  transition-property: opacity;
-}
 .jkl-chip:focus-visible {
   outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 3px;
 }
-.jkl-chip:hover::after {
-  opacity: 0.15;
+.jkl-chip:hover {
+  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-chip--filter[aria-pressed=true] {
   --background-color: var(--jkl-color-background-contrast);
   --text-color: var(--jkl-color-text-on-contrast);
+  --hover-accent-color: var(--jkl-color-text-on-contrast);
   --border-color: var(--jkl-color-border-strong);
 }
 @media screen and (forced-colors: active) {
@@ -1545,6 +1606,31 @@
       border: 0.125rem solid ButtonText;
     }
   }
+  .jkl-combobox__wrapper:has(> :is(input, textarea):disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-combobox__wrapper:has(> :is(input, textarea):disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-combobox__wrapper:has(> :is(input, textarea):disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-combobox__wrapper:has(> :is(input, textarea):read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
+  .jkl-combobox__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):hover, .jkl-combobox__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):focus-within, .jkl-combobox__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
+  }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-area__text-area:focus-visible) {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
@@ -1603,6 +1689,26 @@
   .jkl-combobox__wrapper:hover ~ .jkl-combobox__arrow {
     transform: translateY(calc(-50% + 0.1875rem));
   }
+  .jkl-combobox__wrapper:has(.jkl-combobox__search-input:disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-combobox__wrapper:has(.jkl-combobox__search-input:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-combobox__wrapper:has(.jkl-combobox__search-input:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-combobox__wrapper:has(.jkl-combobox__search-input:read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
   .jkl-combobox__search-input {
     border: none;
     outline: none;
@@ -2155,10 +2261,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u8trtx3 var(--duration) linear forwards;
+    animation: jkl-downcount-uhyh5nf var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u8trtx3 {
+  @keyframes jkl-downcount-uhyh5nf {
     from {
       width: 100%;
     }
@@ -2214,6 +2320,31 @@
       border: 0.125rem solid ButtonText;
     }
   }
+  .jkl-date-input__wrapper:has(> :is(input, textarea):disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-date-input__wrapper:has(> :is(input, textarea):disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-date-input__wrapper:has(> :is(input, textarea):disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-date-input__wrapper:has(> :is(input, textarea):read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
+  .jkl-date-input__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):hover, .jkl-date-input__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):focus-within, .jkl-date-input__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
+  }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-date-input__wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-date-input__wrapper:has(.jkl-text-area__text-area:focus-visible) {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
@@ -2391,19 +2522,30 @@
   .jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)), .jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)) * {
     cursor: pointer;
   }
-  .jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)):has(.day:not(:checked)):hover::after {
-    background-color: color-mix(in srgb, currentColor 15%, transparent);
+  .jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)):has(.day:not(:disabled)):hover::after {
+    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-calendar .jkl-button--calendar:has(.day:disabled) {
-    opacity: 0.5;
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
   }
-  .jkl-calendar .jkl-button--calendar:has(.day:disabled), .jkl-calendar .jkl-button--calendar:has(.day:disabled) * {
+  .jkl-calendar .jkl-button--calendar:has(.day:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
     cursor: not-allowed;
   }
+  @media screen and (forced-colors: active) {
+    .jkl-calendar .jkl-button--calendar:has(.day:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
   .jkl-calendar .jkl-button--calendar:has(.day:checked) {
     color: var(--jkl-color-text-on-contrast);
   }
   .jkl-calendar .jkl-button--calendar:has(.day:checked)::after {
+    --hover-accent-color: var(--jkl-color-text-on-contrast);
+    --background-color: var(--jkl-color-background-contrast);
     background-color: var(--jkl-color-background-contrast);
   }
   .jkl-calendar .jkl-button--calendar:has(.day:focus-visible, .day:focus) {
@@ -2475,6 +2617,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%);
@@ -2573,8 +2732,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);
@@ -2583,208 +2757,313 @@
   .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]::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-search {
+    width: 100%;
+  }
+  .jkl-search .jkl-input-group {
+    display: contents;
+  }
+  .jkl-search__wrapper {
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-vertical-padding: var(--jkl-unit-15);
+    --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
+    --jkl-text-input-action-button-size: var(--jkl-unit-60);
+    --jkl-text-input-action-button-icon-size: var(--jkl-unit-30);
+    --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
+    --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
+    --text-color: var(--jkl-color-text-default);
+    --background-color: transparent;
+    --border-color: var(--jkl-color-border-default);
+    --placeholder-color: var(--jkl-color-text-subdued);
+    border-radius: var(--jkl-border-radius-s);
+    box-sizing: border-box;
+    max-width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    font: var(--jkl-text-style-text-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+    transition-property: color, box-shadow, background-color;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
+  }
+  .jkl-search__wrapper:focus-within, .jkl-search__wrapper:has([data-focused=true]) {
+    --background-color: var(--jkl-color-background-container);
+  }
+  .jkl-search__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
+    --text-color: var(--jkl-color-error-text-default);
+    --border-color: var(--jkl-color-error-border-default);
+    --placeholder-color: var(--jkl-color-error-text-subdued);
+  }
+  .jkl-search__wrapper:hover, .jkl-search__wrapper:focus-within, .jkl-search__wrapper:has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-strong);
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search__wrapper:hover, .jkl-search__wrapper:focus-within, .jkl-search__wrapper:has([data-focused=true]) {
+      border: 0.125rem solid ButtonText;
+    }
+  }
+  .jkl-search__wrapper:has(> :is(input, textarea):disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-search__wrapper:has(> :is(input, textarea):disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search__wrapper:has(> :is(input, textarea):disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-search__wrapper:has(> :is(input, textarea):read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
+  .jkl-search__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):hover, .jkl-search__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):focus-within, .jkl-search__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
+  }
+  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-search__wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-search__wrapper:has(.jkl-text-area__text-area:focus-visible) {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-search__wrapper > .jkl-icon-button:focus-visible {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: -8px;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search__wrapper > .jkl-icon-button:focus-visible {
+      --border-color: ButtonText;
+    }
+  }
+  .jkl-search__wrapper > .jkl-text-input-action-button {
+    flex-shrink: 0;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    padding: var(--jkl-text-input-action-button-padding);
+    height: var(--jkl-text-input-action-button-size);
+    width: var(--jkl-text-input-action-button-size);
+    margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+  }
+  .jkl-search__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-search__wrapper > .jkl-text-input-action-button:hover {
+    color: var(--jkl-color-text-subdued);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search__wrapper > .jkl-text-input-action-button:hover {
+      border: 0.125rem inset ButtonText;
+    }
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search__wrapper {
+      border: 0.125rem inset ButtonText;
+    }
+  }
+  .jkl-search__wrapper {
+    gap: 0.25em;
+    padding-inline: var(--jkl-text-input-horizontal-padding);
+  }
+  .jkl-search__wrapper:has(.jkl-search-submit) {
+    padding-inline-end: 0;
+  }
+  .jkl-search__wrapper::before {
+    content: attr(data-icon)/"";
+    flex: none;
+    inline-size: 1.3em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--jkl-font-family-icons);
+  }
+  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-search__wrapper:has(> input[type=search]:focus-visible) {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-search input[type=search] {
+    background: none;
+    -webkit-appearance: none;
+    color: inherit;
+    font: var(--jkl-text-style-text-medium);
+  }
+  .jkl-search input[type=search] {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-search input[type=search]:active, .jkl-search input[type=search]:hover, .jkl-search input[type=search]:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search input[type=search] {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-search input[type=search]:active, .jkl-search input[type=search]:hover, .jkl-search input[type=search]:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-search input[type=search] input[type=number]::-webkit-outer-spin-button,
+  .jkl-search input[type=search] input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  .jkl-search input[type=search] input[type=number] {
+    -moz-appearance: textfield;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search input[type=search] {
+      outline: none;
+      border: none;
+    }
+    .jkl-search input[type=search]:focus-visible {
+      outline: none;
+    }
+  }
+  .jkl-search input[type=search]::placeholder {
+    opacity: 1;
+    color: var(--placeholder-color);
+  }
+  .jkl-search input[type=search] {
+    flex: 1 1 0;
+    min-width: 0;
+    padding-block: var(--jkl-text-input-vertical-padding);
+  }
+  .jkl-search input[type=search]::-webkit-search-cancel-button, .jkl-search input[type=search]::-webkit-calendar-picker-indicator, .jkl-search input[type=search]::-webkit-search-results-button {
+    appearance: none;
+    display: none !important;
+  }
+  .jkl-search:has(input:not(:valid), input:placeholder-shown) .jkl-search__clear-button {
+    display: none;
+  }
+  .jkl-search__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%;
+  }
+  .jkl-search__clear-button::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;
+    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-search__clear-button::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;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+    transition-property: opacity;
   }
-  .jkl-option[data-multiple][aria-selected=true]::before {
-    --jkl-icon-fill: 1;
-    content: "check_box"/"";
+  .jkl-search__clear-button:hover::after {
+    opacity: 0.15;
   }
-  .jkl-option__label {
-    flex-grow: 999;
+  .jkl-search__clear-button:focus-visible {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
   }
-  .jkl-option__media {
+}
+@layer jokul.components {
+  .jkl-search button.jkl-search-submit {
+    --border-radius: 0;
+    flex: none;
+    align-self: stretch;
+    min-width: unset;
+    border-start-end-radius: var(--jkl-border-radius-s);
+    border-end-end-radius: var(--jkl-border-radius-s);
+    --inset-size: 1ex;
+    --separator-color: var(--jkl-color-border-subdued);
     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) {
+  .jkl-search button.jkl-search-submit::before {
+    content: "";
     position: absolute;
-    inset: 0;
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-  }
-}
-.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);
-  width: 100%;
-  font: var(--jkl-text-style-text-medium);
-}
-.jkl-search .jkl-input-group {
-  display: contents;
-}
-.jkl-search input[type=search] {
-  appearance: none;
-  padding: 0;
-  background-color: transparent;
-  color: var(--jkl-color-text-default);
-  grid-column: 2/3;
-}
-.jkl-search input[type=search] {
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-search input[type=search]:active, .jkl-search input[type=search]:hover, .jkl-search input[type=search]:focus {
-  outline: 0;
-  outline-style: none;
-}
-@media screen and (forced-colors: active) {
-  .jkl-search input[type=search] {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
+    block-size: calc(100% * var(--inset-size));
+    top: 0;
+    left: 0;
+    inset-block: var(--inset-size);
+    border-inline-end: 1px solid var(--separator-color);
+    z-index: 1;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+    transition-property: inset, border-color;
   }
-  .jkl-search input[type=search]:active, .jkl-search input[type=search]:hover, .jkl-search input[type=search]:focus {
-    outline: revert;
-    outline-style: revert;
+  .jkl-search button.jkl-search-submit:hover, .jkl-search button.jkl-search-submit:focus-within {
+    --inset-size: 1px;
+    --separator-color: var(--jkl-color-border-subdued);
   }
 }
-.jkl-search input[type=search] {
-  font: var(--jkl-text-style-text-medium);
-}
-.jkl-search input[type=search]::-webkit-search-cancel-button, .jkl-search input[type=search]::-webkit-calendar-picker-indicator, .jkl-search input[type=search]::-webkit-search-results-button {
-  appearance: none;
-  display: none !important;
-}
-.jkl-search .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));
-}
-.jkl-search .input-wrapper::before {
-  content: attr(data-icon)/"";
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  grid-column: 1;
-  font-family: var(--jkl-font-family-icons);
-}
-.jkl-search .input-wrapper:has(.clear-button) {
-  grid-template-columns: 1.3em 1fr 1.3em;
-}
-.jkl-search .input-wrapper:has(input:focus-visible) {
-  outline: 3px solid var(--jkl-color-border-strong);
-  outline-offset: 3px;
-  background-color: var(--jkl-color-background-container);
-}
-.jkl-search:has(input:not(:valid), input:placeholder-shown) .clear-button {
-  display: none;
-}
-.jkl-search .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%;
-}
-.jkl-search .clear-button::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;
-  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-search .clear-button::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;
-  transition-timing-function: var(--jkl-motion-easing-standard);
-  transition-duration: var(--jkl-motion-timing-productive);
-  transition-property: opacity;
-}
-.jkl-search .clear-button:hover::after {
-  opacity: 0.15;
-}
-.jkl-search .clear-button:focus-visible {
-  outline: 3px solid var(--jkl-color-border-strong);
-  outline-offset: 3px;
-}
-
-.jkl-search:has(button.jkl-search-submit) {
-  display: grid;
-  grid-template-columns: 1fr max-content;
-  align-items: end;
-}
-.jkl-search:has(button.jkl-search-submit) .jkl-input-group-description,
-.jkl-search:has(button.jkl-search-submit) .jkl-label,
-.jkl-search:has(button.jkl-search-submit) .input-wrapper {
-  grid-column: 1/2;
-}
-.jkl-search:has(button.jkl-search-submit) .input-wrapper {
-  border-inline-end: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit {
-  height: 100%;
-  border: var(--border);
-  border-inline-start: 0;
-  border-radius: var(--jkl-border-radius-s);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  min-width: unset;
-  --inset-size: 1ex;
-  --separator-color: var(--jkl-color-border-subdued);
-  position: relative;
-}
-.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit::before {
-  content: "";
-  position: absolute;
-  block-size: calc(100% * var(--inset-size));
-  top: 0;
-  left: 0;
-  inset-block: var(--inset-size);
-  border-inline-end: 1px solid var(--separator-color);
-  z-index: 1;
-  transition-timing-function: var(--jkl-motion-easing-standard);
-  transition-duration: var(--jkl-motion-timing-productive);
-  transition-property: inset, border-color;
-}
-.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover, .jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:focus-within {
-  --inset-size: 1px;
-  --separator-color: var(--jkl-color-border-subdued);
-}
-
 @layer jokul.components {
   :where(.jkl-text) {
     line-height: var(--jkl-line-height-relaxed);
@@ -3229,10 +3508,10 @@
   }
   .jkl-table-row--clickable {
     outline: 0;
+    cursor: pointer;
   }
   .jkl-table-row--clickable:hover, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--clickable:focus {
-    cursor: pointer;
-    background-color: var(--jkl-table-row-highlight-color);
+    background-color: color-mix(in srgb, var(--background-color, transparent), var(--hover-accent-color, var(--jkl-color-background-contrast)) var(--jkl-opacity-hover, 10%));
     border-top: double 0.0625rem var(--jkl-table-row-hover-border-color);
     border-bottom: double 0.0625rem var(--jkl-table-row-hover-border-color);
   }
@@ -3401,7 +3680,7 @@
   }
   @media (hover: hover) {
     .jkl-expandable-panel__wrapper .jkl-expander:hover {
-      background-color: var(--jkl-color-background-container-accent);
+      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-expandable-panel__focus-container {
@@ -3587,12 +3866,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-u8trtxc 0.25s ease-out;
+    animation: jkl-show-uhyh5nu 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-u8trtxc {
+  @keyframes jkl-show-uhyh5nu {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -3783,28 +4062,8 @@
   .jkl-message--full {
     max-width: 100%;
   }
-  .jkl-message--info {
-    --background-color: var(--jkl-color-info-background-container);
-    --text-color: var(--jkl-color-info-text-default);
-    --icon-color: var(--jkl-color-info-background-contrast);
-  }
-  .jkl-message--warning {
-    --background-color: var(--jkl-color-warning-background-container);
-    --text-color: var(--jkl-color-warning-text-default);
-    --icon-color: var(--jkl-color-warning-background-contrast);
-  }
-  .jkl-message--error {
-    --background-color: var(--jkl-color-error-background-container);
-    --text-color: var(--jkl-color-error-text-default);
-    --icon-color: var(--jkl-color-error-background-contrast);
-  }
-  .jkl-message--success {
-    --background-color: var(--jkl-color-success-background-container);
-    --text-color: var(--jkl-color-success-text-default);
-    --icon-color: var(--jkl-color-success-background-contrast);
-  }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-u8trtxe var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-uhyh5o9 var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -3812,13 +4071,13 @@
     .jkl-message {
       border: 2px solid CanvasText;
     }
-    .jkl-message--info {
+    .jkl-message[data-color=info] {
       border-style: dotted;
     }
-    .jkl-message--warning {
+    .jkl-message[data-color=warning] {
       border-style: dashed;
     }
-    .jkl-message--error {
+    .jkl-message[data-color=error] {
       border-style: double;
       border-width: 4px;
     }
@@ -3826,7 +4085,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-u8trtxe {
+  @keyframes jkl-dismiss-uhyh5o9 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -3954,6 +4213,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-text-area-wrapper {
@@ -4000,6 +4274,31 @@
       border: 0.125rem solid ButtonText;
     }
   }
+  .jkl-text-area-wrapper:has(> :is(input, textarea):disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-text-area-wrapper:has(> :is(input, textarea):disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-text-area-wrapper:has(> :is(input, textarea):disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-text-area-wrapper:has(> :is(input, textarea):read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
+  .jkl-text-area-wrapper:has(> :is(input, textarea):read-only:not(:disabled)):hover, .jkl-text-area-wrapper:has(> :is(input, textarea):read-only:not(:disabled)):focus-within, .jkl-text-area-wrapper:has(> :is(input, textarea):read-only:not(:disabled)):has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
+  }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible) {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
@@ -4437,6 +4736,21 @@
     margin-top: calc(-1 * var(--jkl-unit-15));
     margin-bottom: var(--jkl-unit-20);
   }
+  .jkl-file-input:disabled .jkl-file-input__dropzone {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-file-input:disabled .jkl-file-input__dropzone * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-file-input:disabled .jkl-file-input__dropzone {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
 }
 @layer jokul.components {
   .jkl-link-list {
@@ -4496,7 +4810,7 @@
     transition-property: translate;
   }
   .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible) {
-    background-color: var(--jkl-color-background-container-accent);
+    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-link-list ul .jkl-link-list-link:is(:hover, :focus-visible)::after {
     translate: 4px 0;
@@ -4653,7 +4967,7 @@
     flex-shrink: 0;
   }
   .jkl-menu-item:hover, .jkl-menu-item:focus-visible {
-    --background-color: var(--jkl-color-background-container-accent);
+    background-color: color-mix(in srgb, var(--background-color, transparent), var(--hover-accent-color, var(--jkl-color-background-contrast)) var(--jkl-opacity-hover, 10%));
   }
 }
 @layer jokul.components {
@@ -4757,6 +5071,51 @@
     transform: translateX(-0.3rem);
   }
 }
+@layer jokul.components {
+  .jkl-notification-badge {
+    --jkl-notification-badge-color: var(--jkl-color-background-contrast);
+    position-anchor: var(--jkl-notification-badge-anchor-name);
+    background: var(--jkl-notification-badge-color);
+    color: var(--jkl-color-text-on-contrast);
+    text-box-trim: trim-both;
+    overflow: hidden;
+    display: inline-block;
+    border-radius: var(--jkl-border-radius-full);
+    font: var(--jkl-text-style-text-micro);
+    font-weight: var(--jkl-font-weight-bold);
+    min-inline-size: 2ch;
+    text-align: center;
+    padding: var(--jkl-spacing-2);
+    pointer-events: none;
+    align-self: center;
+  }
+  .jkl-notification-badge--dot {
+    min-inline-size: unset;
+    inline-size: 1ch;
+    padding: 0;
+    aspect-ratio: 1;
+  }
+  .jkl-notification-badge[data-urgent=true] {
+    --jkl-notification-badge-color: var(
+        --jkl-color-error-background-contrast
+    );
+  }
+  .jkl-notification-badge-anchor {
+    anchor-name: var(--jkl-notification-badge-anchor-name);
+  }
+  @supports (position-anchor: --jkl-notification-badge-anchor) {
+    .jkl-notification-badge-anchor + .jkl-notification-badge {
+      position: absolute;
+      inset-inline-end: calc(anchor(end) - 0.5ch);
+      inset-block-start: calc(anchor(start) - 1ch);
+    }
+    .jkl-notification-badge-anchor + .jkl-notification-badge--dot {
+      --dot-inset: min(1ch, anchor-size(inline) / 8);
+      inset-inline-end: calc(anchor(end) + var(--dot-inset));
+      inset-block-start: calc(anchor(start) - 0.3ch);
+    }
+  }
+}
 @layer jokul.components {
   .jkl-number-input {
     display: flex;
@@ -4806,6 +5165,31 @@
       border: 0.125rem solid ButtonText;
     }
   }
+  .jkl-number-input__wrapper:has(> :is(input, textarea):disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-number-input__wrapper:has(> :is(input, textarea):disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input__wrapper:has(> :is(input, textarea):disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-number-input__wrapper:has(> :is(input, textarea):read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
+  .jkl-number-input__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):hover, .jkl-number-input__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):focus-within, .jkl-number-input__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
+  }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-area__text-area:focus-visible) {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
@@ -4951,9 +5335,20 @@
     inset-block: 0.0625rem;
   }
   .jkl-number-input button[data-direction]:disabled {
-    opacity: 0.4;
+    opacity: var(--jkl-nested-disabled-opacity, 0.4);
+    cursor: not-allowed;
+  }
+  .jkl-number-input button[data-direction]:disabled * {
+    --jkl-nested-disabled-opacity: 1;
     cursor: not-allowed;
   }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input button[data-direction]:disabled {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
   .jkl-number-input button[data-direction=decrement]::before {
     inset-inline-end: 0;
   }
@@ -5129,7 +5524,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-u8trtxs {
+  @keyframes jkl-downcount-uhyh5oy {
     from {
       width: 100%;
     }
@@ -5185,6 +5580,22 @@
     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, 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);
@@ -5369,45 +5780,25 @@
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u8trtyy var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uhyh5ph 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-u8trtyy {
+  @keyframes jkl-dismiss-uhyh5ph {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5548,6 +5939,8 @@
     scroll-snap-align: start;
     text-decoration: none;
     white-space: nowrap;
+    display: inline-flex;
+    gap: var(--jkl-unit-10);
   }
   .jkl-tab {
     outline: 0;
@@ -5627,7 +6020,8 @@
   .jkl-toast {
     --background-color: var(--jkl-color-background-container);
     --text-color: var(--jkl-color-text-default);
-    --border-color: transparent;
+    --icon-color: var(--jkl-color-background-contrast);
+    --border-color: var(--jkl-color-border-subdued);
     --jkl-toast-padding: var(--jkl-unit-20);
     color: var(--text-color);
     background-color: var(--background-color);
@@ -5658,6 +6052,9 @@
       stroke: CanvasText;
     }
   }
+  .jkl-toast__icon {
+    color: var(--icon-color);
+  }
   .jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon {
     margin-block-start: 0.0625rem;
   }
@@ -5698,73 +6095,29 @@
     position: absolute;
     inset: calc((var(--tap-size) - 100%) / 2 * -1);
   }
-  .jkl-toast--info {
-    --background-color: var(--jkl-color-info-background-container);
-    --text-color: var(--jkl-color-info-text-default);
-    --border-color: var(--jkl-color-info-border-subdued);
-  }
-  .jkl-toast--info .jkl-countdown {
-    --bar-color: var(--jkl-color-info-background-contrast);
-  }
-  .jkl-toast--info .jkl-toast__icon {
-    color: var(--jkl-color-info-background-contrast);
-  }
-  .jkl-toast--warning {
-    --background-color: var(--jkl-color-warning-background-container);
-    --text-color: var(--jkl-color-warning-text-default);
-    --border-color: var(--jkl-color-warning-border-subdued);
-  }
-  .jkl-toast--warning .jkl-countdown {
-    --bar-color: var(--jkl-color-warning-background-contrast);
-  }
-  .jkl-toast--warning .jkl-toast__icon {
-    color: var(--jkl-color-warning-background-contrast);
-  }
-  .jkl-toast--error {
-    --background-color: var(--jkl-color-error-background-container);
-    --text-color: var(--jkl-color-error-text-default);
-    --border-color: var(--jkl-color-error-border-subdued);
-  }
-  .jkl-toast--error .jkl-countdown {
-    --bar-color: var(--jkl-color-error-background-contrast);
-  }
-  .jkl-toast--error .jkl-toast__icon {
-    color: var(--jkl-color-error-background-contrast);
-  }
-  .jkl-toast--success {
-    --background-color: var(--jkl-color-success-background-container);
-    --text-color: var(--jkl-color-success-text-default);
-    --border-color: var(--jkl-color-success-border-subdued);
-  }
-  .jkl-toast--success .jkl-countdown {
-    --bar-color: var(--jkl-color-success-background-contrast);
-  }
-  .jkl-toast--success .jkl-toast__icon {
-    color: var(--jkl-color-success-background-contrast);
-  }
   @media screen and (forced-colors: active) {
     .jkl-toast {
       border: 2px solid CanvasText;
     }
-    .jkl-toast--info {
+    .jkl-toast[data-color=info] {
       border-style: dotted;
     }
-    .jkl-toast--warning {
+    .jkl-toast[data-color=warning] {
       border-style: dashed;
     }
-    .jkl-toast--error {
+    .jkl-toast[data-color=error] {
       border-style: double;
       border-width: 4px;
     }
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-u8trtzh var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-uhyh5qe var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-u8trtzp var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-uhyh5r7 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-u8trtzh {
+  @keyframes jkl-entering-uhyh5qe {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5774,7 +6127,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-u8trtzp {
+  @keyframes jkl-exiting-uhyh5r7 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -5943,14 +6296,19 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --knob-position: calc(var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding) * 2);
 }
 .jkl-toggle-switch[disabled] {
-  cursor: revert;
-  --text-color: var(--jkl-color-text-subdued);
-  --switch-border-color: var(--jkl-color-border-subdued);
-  --knob-border-color: var(--jkl-color-border-subdued);
+  opacity: var(--jkl-nested-disabled-opacity, 0.5);
+  cursor: not-allowed;
 }
-.jkl-toggle-switch[disabled][aria-pressed=true], [aria-checked=true] > .jkl-toggle-switch[disabled] {
-  --indicator-color: var(--jkl-color-border-subdued);
-  --switch-border-color: var(--indicator-color);
+.jkl-toggle-switch[disabled] * {
+  --jkl-nested-disabled-opacity: 1;
+  cursor: not-allowed;
+}
+@media screen and (forced-colors: active) {
+  .jkl-toggle-switch[disabled] {
+    opacity: 1;
+    color: GrayText;
+    border-color: GrayText;
+  }
 }
 
 .jkl-toggle-switch-widget {