@fremtind/jokul 5.0.0-next.9 → 5.0.1

package/styles/components.css

@@ -9,8 +9,8 @@
     --jkl-autosuggest-controller-button-width: auto;
     --jkl-autosuggest-controller-button-padding: 0 var(--jkl-unit-15);
     --jkl-autosuggest-controller-button-icon-size: 1.25rem;
-    --jkl-autosuggest-option-padding: var(--jkl-unit-10) 0.75em;
-    --jkl-autosuggest-option-height: 3rem;
+    --jkl-autosuggest-option-padding: var(--jkl-unit-10);
+    --jkl-autosuggest-option-height: min(var(--jkl-unit-60), 3rem);
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -50,6 +50,7 @@
     color: unset;
     display: flex;
     align-items: center;
+    box-sizing: border-box;
     border: 0;
     background-color: transparent;
     min-height: var(--jkl-autosuggest-option-height);
@@ -63,7 +64,7 @@
   }
   .jkl-autosuggest__item:focus, .jkl-autosuggest__item--active, .jkl-autosuggest__item:hover {
     color: var(--jkl-color-text-default);
-    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    background-color: var(--jkl-color-background-container-accent);
   }
 }
 @layer jokul.components {
@@ -321,7 +322,6 @@
 @layer jokul.components {
   .jkl-icon-button {
     background-color: transparent;
-    cursor: pointer;
     color: inherit;
     position: relative;
     transition-property: box-shadow;
@@ -431,7 +431,7 @@
     --color: var(--jkl-color-text-default);
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uccvk73 forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uhpq1dc forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -485,7 +485,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uccvk73 {
+  @keyframes jkl-support-icon-entrance-uhpq1dc {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -624,7 +624,6 @@
   .jkl-breadcrumb__item {
     margin-bottom: var(--jkl-unit-10);
     white-space: nowrap;
-    cursor: pointer;
   }
   .jkl-breadcrumb__item-separator {
     padding-left: var(--jkl-unit-10);
@@ -647,15 +646,9 @@
     text-decoration-thickness: 0.05em;
     text-decoration-color: rgb(from currentColor r g b/70%);
   }
-  .jkl-link__icon {
-    margin-inline-start: 0.2em;
-    margin-block-start: -0.1em;
-    vertical-align: middle;
-  }
-  .jkl-link--external::after, .jkl-link[target=_blank]::after, .jkl-link[download]::after {
+  .jkl-link::after {
     --jkl-icon-fill: 0;
     --jkl-icon-size: 1em;
-    content: "\e89e"/"(Åpnes i ny fane)";
     margin-block-start: -0.1em;
     padding-inline-start: 0.2em;
     vertical-align: middle;
@@ -673,6 +666,9 @@
     transition-property: font-variation-settings, transform;
     display: inline;
   }
+  .jkl-link--external::after, .jkl-link[target=_blank]::after {
+    content: "\e89e"/"(Åpnes i ny fane)";
+  }
   .jkl-link[download]::after {
     content: "\f090"/"(Last ned fil)";
   }
@@ -688,6 +684,16 @@
       --link-color: HighLight;
     }
   }
+  button.jkl-link {
+    appearance: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    background: none;
+    line-height: inherit;
+    font: inherit;
+    text-align: inherit;
+  }
 }
 @layer jokul.components {
   .jkl-button {
@@ -699,6 +705,7 @@
     --jkl-button-padding-icon-button: var(--jkl-unit-10);
     --jkl-button-tertiary-padding-icon: var(--jkl-unit-05);
     --jkl-button-text-ink-offset: 0.1em;
+    --button-min-width: 9ch;
     --jkl-icon-weight: var(--jkl-icon-weight-bold);
     --text-color: var(--jkl-color-text-default);
     --background-color: transparent;
@@ -707,7 +714,6 @@
     display: inline-block;
     font: var(--jkl-text-style-text-medium);
     font-weight: var(--jkl-font-weight-bold);
-    cursor: pointer;
     user-select: none;
     background: var(--background-color);
     color: var(--text-color);
@@ -726,7 +732,10 @@
     transition-property: background-color;
   }
   .jkl-button:has(.jkl-button__text) {
-    min-width: 9.5ch;
+    min-width: var(--button-min-width);
+  }
+  .jkl-button:has(.jkl-button__text):has(.jkl-icon) {
+    min-width: initial;
   }
   .jkl-button:has(.jkl-icon:first-child) {
     padding-inline-start: var(--jkl-button-padding-icon);
@@ -745,6 +754,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: center;
     gap: var(--jkl-unit-02);
     pointer-events: none;
   }
@@ -761,7 +771,7 @@
   }
   .jkl-button__text {
     display: block;
-    width: 100%;
+    min-width: 0;
     max-width: 100%;
     padding-block-start: var(--jkl-button-text-ink-offset);
     margin-block-start: calc(var(--jkl-button-text-ink-offset) * -1);
@@ -770,7 +780,8 @@
     text-overflow: ellipsis;
   }
   .jkl-button[data-loading=true] .jkl-button__label {
-    translate: 0 -120%;
+    --button-loading-offset: calc(-100% - var(--jkl-button-padding-block) * 2 - var(--jkl-button-text-ink-offset));
+    translate: 0 var(--button-loading-offset);
   }
   .jkl-button[data-loading=true] .jkl-button__loader {
     translate: -50% -50%;
@@ -833,22 +844,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uccvk7r;
+    animation-name: jkl-loader-left-spin-uhpq1di;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uccvk88;
+    animation-name: jkl-loader-middle-spin-uhpq1ds;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uccvk96;
+    animation-name: jkl-loader-right-spin-uhpq1em;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uccvk7r {
+  @keyframes jkl-loader-left-spin-uhpq1di {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -862,7 +873,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uccvk88 {
+  @keyframes jkl-loader-middle-spin-uhpq1ds {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -879,7 +890,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uccvk96 {
+  @keyframes jkl-loader-right-spin-uhpq1em {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -919,7 +930,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uccvk9z;
+      animation: 2s ease infinite jkl-blink-uhpq1fc;
     }
   }
   .jkl-skeleton-input {
@@ -967,10 +978,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uccvk9z;
+      animation: 2s ease-in-out infinite jkl-blink-uhpq1fc;
     }
   }
-  @keyframes jkl-blink-uccvk9z {
+  @keyframes jkl-blink-uhpq1fc {
     0% {
       opacity: 1;
     }
@@ -1120,22 +1131,22 @@
   gap: var(--gap);
 }
 .jkl-tag--info {
-  --background-color: var(--jkl-color-info-background-container);
+  --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);
+  --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);
+  --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);
+  --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);
 }
@@ -1161,7 +1172,7 @@
 
 @layer jokul.components {
   .jkl-checkbox {
-    --text-color: var(--jkl-color-text-default);
+    --text-color: var(--jkl-color-background-contrast);
     --background-color: transparent;
     font: var(--jkl-text-style-text-medium);
     display: flex;
@@ -1350,7 +1361,6 @@
   --border-width: 0.0625rem;
   font: var(--jkl-text-style-text-small);
   font-weight: var(--jkl-font-weight-bold);
-  cursor: pointer;
   position: relative;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -1414,8 +1424,8 @@
     --jkl-combobox-chips-gap: var(--jkl-unit-05);
     --jkl-combobox-search-input-padding: var(--jkl-combobox-button-padding);
     --jkl-combobox-native-padding: 0 var(--jkl-unit-50) 0 var(--jkl-unit-10);
-    --jkl-combobox-option-padding: var(--jkl-unit-10) var(--jkl-unit-15);
-    --jkl-combobox-option-line-height: 2rem;
+    --jkl-combobox-option-padding: var(--jkl-unit-10);
+    --jkl-combobox-option-height: min(var(--jkl-unit-60), 3rem);
     --jkl-combobox-search-input-height: 1.75rem;
   }
   @media (width >= 0) and (max-width: 679px) {
@@ -1651,14 +1661,13 @@
     color: var(--jkl-color-text-default);
     background-color: transparent;
     transition-property: color, background-color;
-    cursor: pointer;
+    min-height: var(--jkl-combobox-option-height);
     padding: var(--jkl-combobox-option-padding);
     width: 100%;
     text-align: left;
-    line-height: var(--jkl-combobox-option-line-height);
   }
   .jkl-combobox__option:focus, .jkl-combobox__option:hover {
-    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    background-color: var(--jkl-color-background-container-accent);
   }
   .jkl-combobox__option-description {
     font: var(--jkl-text-style-text-small);
@@ -1738,12 +1747,6 @@
 }
 @layer jokul.components {
   .jkl-list {
-    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
-    --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
-    --jkl-list-marker-cross: light-dark(url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23DE9E9E'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A"));
-    --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
-    --jkl-list-marker-check: light-dark(url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394B79B'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A"));
-    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     --list-text-color: var(--jkl-color-text-default);
     list-style-type: "•";
     padding-left: var(--jkl-unit-20);
@@ -1779,32 +1782,138 @@
     padding-left: 0;
   }
   .jkl-list__item--iconed::before {
-    text-indent: -9999px;
-    background-size: contain;
-    width: 1em;
-    height: 1em;
+    font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+    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;
+    -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;
+    display: inline-grid;
+    place-items: center;
+    width: 1.1875em;
+    height: 1.1875em;
+    box-sizing: border-box;
     flex-shrink: 0;
     margin-right: 0.5em;
     margin-top: 0.2em;
+    font-size: 1em;
+    line-height: 1;
+    border-radius: 999px;
+    --jkl-icon-weight: var(--jkl-icon-weight-bold);
   }
   .jkl-list__item--check::before {
-    content: "✓";
-    content: "✓"/"";
+    content: "\e5ca";
+    content: "\e5ca"/"";
     alt: " ";
-    background-image: var(--jkl-list-marker-check);
+    color: var(--jkl-color-success-text-on-contrast);
+    background-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-list__item--cross::before {
-    content: "❌";
-    content: "❌"/"";
+    content: "\e5cd";
+    content: "\e5cd"/"";
     alt: " ";
-    background-image: var(--jkl-list-marker-cross);
+    color: var(--jkl-color-error-text-on-contrast);
+    background-color: var(--jkl-color-error-background-contrast);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-list .jkl-list__item--check::before, .jkl-list .jkl-list__item--cross::before {
+      background-color: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+    }
+  }
+}
+@layer jokul.components {
+  .jkl-modal-container,
+  .jkl-modal-overlay {
+    position: fixed;
+    inset: 0;
+  }
+  .jkl-modal-container {
+    z-index: 9000;
+    display: flex;
+  }
+  .jkl-modal-container[aria-hidden=true] {
+    display: none;
+  }
+  .jkl-modal-overlay {
+    background-color: rgba(27, 25, 23, 0.8);
+  }
+  .jkl-modal {
+    --jkl-modal-padding: var(--jkl-unit-50);
+    --jkl-modal-min-width: 13.75rem;
+    --jkl-modal-max-width: 41.25rem;
+    margin: auto;
+    z-index: 9000;
+    position: relative;
+    background-color: var(--jkl-color-background-container);
+    border-radius: var(--jkl-border-radius-l);
+    box-shadow: 0 0.25rem 0.75rem rgba(37, 42, 49, 0.03);
+    width: 100%;
+    min-width: var(--jkl-modal-min-width);
+    max-width: var(--jkl-modal-max-width);
+    max-height: 90vh;
+    overflow: auto;
+    padding: var(--jkl-modal-padding);
+    display: flex;
+    flex-direction: column;
   }
   @media screen and (forced-colors: active) {
-    .jkl-list .jkl-list__item--check::before {
-      background-image: _check(CanvasText, Canvas);
+    .jkl-modal {
+      border-color: CanvasText;
+    }
+  }
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-modal {
+      margin: auto var(--jkl-unit-30);
+    }
+  }
+  .jkl-modal-header {
+    --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);
+  }
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-modal-header {
+      --jkl-modal-header-margin: 0 0 var(--jkl-unit-15);
+    }
+  }
+  .jkl-modal-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: var(--jkl-modal-header-margin);
+    gap: var(--jkl-modal-gap);
+  }
+  .jkl-modal-body {
+    font: var(--jkl-text-style-paragraph-medium);
+  }
+  .jkl-modal-title {
+    font: var(--jkl-text-style-heading-3);
+  }
+  .jkl-modal-actions {
+    --jkl-modal-actions-margin: var(--jkl-unit-50) 0 0 0;
+  }
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-modal-actions {
+      --jkl-modal-actions-margin: var(--jkl-unit-40) 0 0 0;
     }
-    .jkl-list .jkl-list__item--cross::before {
-      background-image: _cross(CanvasText, Canvas);
+  }
+  .jkl-modal-actions {
+    margin: var(--jkl-modal-actions-margin);
+    display: flex;
+    flex-direction: column;
+    gap: var(--jkl-unit-20);
+  }
+  @media (min-width: 60ch) {
+    .jkl-modal-actions {
+      flex-direction: row-reverse;
+      align-self: flex-end;
     }
   }
 }
@@ -1830,6 +1939,11 @@
   .jkl-modal-overlay {
     background-color: rgba(27, 25, 23, 0.8);
     opacity: 0;
+  }
+  .jkl-modal-overlay--transparent {
+    background-color: transparent;
+  }
+  .jkl-modal-overlay {
     transition-timing-function: var(--jkl-motion-easing-entrance);
     transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: opacity;
@@ -2005,10 +2119,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uccvkax var(--duration) linear forwards;
+    animation: jkl-downcount-uhpq1gp var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uccvkax {
+  @keyframes jkl-downcount-uhpq1gp {
     from {
       width: 100%;
     }
@@ -2192,12 +2306,10 @@
   }
   .jkl-calendar-date-button:hover:not(:disabled) {
     background-color: color-mix(in srgb, currentColor 10%, transparent);
-    cursor: pointer;
   }
   .jkl-calendar-date-button[aria-pressed=true] {
     background-color: var(--jkl-color-background-contrast);
     color: var(--jkl-color-text-on-contrast);
-    cursor: pointer;
   }
   .jkl-calendar-date-button[aria-pressed=true]:hover {
     color: var(--jkl-color);
@@ -2347,81 +2459,84 @@
   }
 }
 @layer jokul.components {
-  .jkl-expandable {
+  .jkl-expandable-panel {
     background-color: var(--jkl-color-background-container);
     border: 1px solid transparent;
-    border-radius: var(--border-radius);
+    border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     width: 100%;
     overflow: hidden;
   }
-  .jkl-expandable__content[data-expanded=true] {
+  @media screen and (forced-colors: active) {
+    .jkl-expandable-panel {
+      border: 1px solid CanvasText;
+    }
+  }
+  .jkl-expandable-panel__content[data-expanded=true] {
     height: auto;
   }
-  .jkl-expandable__content[data-expanded=false] {
+  .jkl-expandable-panel__content[data-expanded=false] {
     height: 0;
   }
-  .jkl-expandable[data-visible-content=true] .jkl-expander {
+  .jkl-expandable-panel[data-visible-content=true] .jkl-expander {
     border-bottom: 1px solid transparent;
   }
-  .jkl-expandable__content-wrapper {
+  .jkl-expandable-panel__content-wrapper {
     padding: var(--jkl-unit-20);
   }
-  .jkl-expandable--stroke {
+  .jkl-expandable-panel--outlined {
     border-color: var(--jkl-color-border-subdued);
     background-color: transparent;
-    border-radius: 0;
-    border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
   }
-  .jkl-expandable__wrapper {
-    --border-radius: 0.25rem;
+  .jkl-expandable-panel__wrapper {
+    --border-radius: var(--jkl-border-radius-m);
     --outline-offset: 3px;
     --stroke-outline-offset: 3px;
-    --border-top-left-radius: var(--border-radius);
-    --border-top-right-radius: var(--border-radius);
-    --border-bottom-left-radius: var(--border-radius);
-    --border-bottom-right-radius: var(--border-radius);
     position: relative;
   }
-  .jkl-expandable__wrapper + .jkl-expandable__wrapper {
+  .jkl-expandable-panel__wrapper + .jkl-expandable-panel__wrapper {
     --border-top-left-radius: 0;
     --border-top-right-radius: 0;
     --stroke-outline-offset: -1px;
   }
-  .jkl-expandable__wrapper + .jkl-expandable__wrapper .jkl-expandable--stroke {
-    border-top: none;
-  }
-  .jkl-expandable__wrapper:has(+ .jkl-expandable__wrapper) {
+  .jkl-expandable-panel__wrapper:has(+ .jkl-expandable-panel__wrapper) {
     --border-bottom-left-radius: 0;
     --border-bottom-right-radius: 0;
     --stroke-outline-offset: -1px;
   }
-  .jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke) {
+  .jkl-expandable-panel__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable-panel--outlined) {
     --outline-offset: var(--stroke-outline-offset);
   }
-  .jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container {
+  .jkl-expandable-panel__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable-panel__focus-container {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
     outline-offset: var(--outline-offset);
   }
-  .jkl-expandable__focus-container {
-    border-radius: var(--border-radius);
+  .jkl-expandable-panel__wrapper .jkl-expander {
+    padding: var(--jkl-unit-20);
+    width: 100%;
+  }
+  .jkl-expandable-panel__wrapper .jkl-expander__label {
+    flex-grow: 1;
+  }
+  @media (hover: hover) {
+    .jkl-expandable-panel__wrapper .jkl-expander:hover {
+      background-color: var(--jkl-color-background-container-accent);
+    }
+  }
+  .jkl-expandable-panel__focus-container {
     position: absolute;
     inset: 0;
   }
   .jkl-expander {
-    --hover-background-color: color-mix(in srgb,
-            currentColor 15%,
-            transparent);
     box-sizing: border-box;
     background: none;
     appearance: none;
     border: none;
     text-align: left;
-    width: 100%;
-    padding: var(--jkl-unit-20);
     cursor: pointer;
     color: var(--jkl-color);
+    -webkit-tap-highlight-color: transparent;
     display: flex;
     gap: 0.5rem;
     align-items: center;
@@ -2431,9 +2546,6 @@
   .jkl-expander::-webkit-details-marker {
     display: none;
   }
-  .jkl-expander__label {
-    flex-grow: 1;
-  }
   .jkl-expander__chevron {
     user-select: none;
     transition-property: transform;
@@ -2450,11 +2562,6 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-snappy);
   }
-  @media (hover: hover) {
-    .jkl-expander:hover {
-      background-color: var(--hover-background-color);
-    }
-  }
   .jkl-expander {
     outline: 0;
     border-style: none;
@@ -2476,6 +2583,27 @@
     }
   }
 }
+@layer jokul.components {
+  .jkl-accordion {
+    background-color: var(--jkl-color-background-container);
+    border-radius: var(--jkl-border-radius-s);
+    padding-inline-start: unset;
+    list-style-type: unset;
+    overflow: clip;
+  }
+  .jkl-accordion .jkl-expandable-panel {
+    border-radius: unset;
+    border: unset;
+    background-color: transparent;
+  }
+  .jkl-accordion .jkl-expandable-panel__wrapper:not(:last-of-type) {
+    border-block-end: 1px solid var(--jkl-color-border-subdued);
+  }
+  .jkl-accordion[data-outlined=true] {
+    border: 1px solid var(--jkl-color-border-subdued);
+    background-color: transparent;
+  }
+}
 @layer jokul.components {
   .jkl-feedback {
     max-width: 34.375rem;
@@ -2495,12 +2623,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uccvkbl 0.25s ease-out;
+    animation: jkl-show-uhpq1hl 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uccvkbl {
+  @keyframes jkl-show-uhpq1hl {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2574,16 +2702,15 @@
     --jkl-message-dismiss-button-size: var(--jkl-unit-50);
     --jkl-message-gap: var(--jkl-unit-20);
     --jkl-message-padding: var(--jkl-unit-25) var(--jkl-unit-15);
+    --icon-color: var(--jkl-color-background-contrast);
     --background-color: var(--jkl-color-background-container);
     --text-color: var(--jkl-color-text-default);
-    --border-color: var(--jkl-color-border-subdued);
     width: 100%;
     max-width: 35rem;
     padding: var(--jkl-message-padding);
     background-color: var(--background-color);
     color: var(--text-color);
-    border: 1px solid var(--border-color);
-    border-radius: 0.25rem;
+    border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     display: grid;
     align-items: start;
@@ -2597,6 +2724,7 @@
   .jkl-message__icon {
     grid-area: icon;
     margin-right: var(--jkl-message-gap);
+    color: var(--icon-color);
   }
   @media screen and (forced-colors: active) {
     .jkl-message__icon {
@@ -2626,7 +2754,6 @@
     position: relative;
     background-color: transparent;
     padding: 0;
-    cursor: pointer;
     color: inherit;
     display: grid;
     place-content: center;
@@ -2695,25 +2822,25 @@
   .jkl-message--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);
+    --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);
-    --border-color: var(--jkl-color-warning-border-subdued);
+    --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);
-    --border-color: var(--jkl-color-error-border-subdued);
+    --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);
-    --border-color: var(--jkl-color-success-border-subdued);
+    --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uccvkcf var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-uhpq1i8 var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -2735,7 +2862,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-uccvkcf {
+  @keyframes jkl-dismiss-uhpq1i8 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -2748,10 +2875,6 @@
 }
 @layer jokul.components {
   .jkl-radio-button {
-    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
-    --jkl-radio-button-error-color: #ab2e43;
-    --jkl-radio-button-error-color: light-dark(#ab2e43, #d79ba5);
-    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     display: flex;
     position: relative;
   }
@@ -2845,7 +2968,7 @@
     content: "radio_button_checked";
   }
   .jkl-radio-button__input[aria-invalid=true] + .jkl-radio-button__label::before {
-    color: var(--jkl-color-error-text-default);
+    color: var(--jkl-color-error-background-contrast);
   }
   .jkl-radio-button + .jkl-radio-button, .jkl-dormant-form-support-label + .jkl-radio-button, .jkl-form-support-label + .jkl-radio-button {
     margin-top: 0.75lh;
@@ -3146,7 +3269,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-snappy);
     transition-property: background-color, border-color, color;
-    color: var(--jkl-color-text-default);
+    color: var(--text-color);
     padding: var(--jkl-file-padding);
     border: var(--border);
     border-radius: var(--border-radius);
@@ -3251,6 +3374,9 @@
     --link-color: var(--text-color);
     --jkl-color-border-strong: currentColor;
   }
+  .jkl-file[data-state=error] .jkl-file__content {
+    border-color: var(--jkl-color-error-border-default);
+  }
   @keyframes spin {
     from {
       transform: rotate(0turn);
@@ -3357,6 +3483,7 @@
 }
 @layer jokul.components {
   .jkl-link-list {
+    --background: var(--jkl-color-background-container);
     --border: 1px solid var(--jkl-color-border-subdued);
     --text-color: var(--jkl-color-text-default);
     font: var(--jkl-text-style-paragraph-medium);
@@ -3374,7 +3501,7 @@
     height: min-content;
     border-radius: var(--jkl-unit-05);
     overflow: hidden;
-    background-color: var(--jkl-color-background-container);
+    background-color: var(--background);
   }
   .jkl-link-list ul .jkl-link-list-link {
     display: flex;
@@ -3411,7 +3538,7 @@
     transition-property: translate;
   }
   .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible) {
-    background-color: color-mix(in srgb, var(--text-color) 15%);
+    background-color: var(--jkl-color-background-container-accent);
   }
   .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible)::after {
     translate: 4px 0;
@@ -3420,6 +3547,10 @@
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
+  .jkl-link-list[data-outlined=true] ul {
+    border: var(--border);
+    --background: transparent;
+  }
   .jkl-link-list .jkl-link-list-item {
     display: flex;
   }
@@ -3510,7 +3641,6 @@
     background-color: var(--background-color);
     color: var(--jkl-color-text-default);
     text-decoration: none;
-    cursor: pointer;
     box-sizing: border-box;
     user-select: none;
     font: var(--jkl-text-style-text-medium);
@@ -3565,7 +3695,7 @@
     flex-shrink: 0;
   }
   .jkl-menu-item:hover, .jkl-menu-item:focus-visible {
-    --background-color: color-mix(in srgb, currentColor 18%, transparent);
+    --background-color: var(--jkl-color-background-container-accent);
   }
 }
 @layer jokul.components {
@@ -3668,6 +3798,217 @@
     transform: translateX(-0.3rem);
   }
 }
+@layer jokul.components {
+  .jkl-number-input {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .jkl-number-input__wrapper {
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-vertical-padding: var(--jkl-unit-15);
+    --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
+    --jkl-text-input-action-button-size: var(--jkl-unit-60);
+    --jkl-text-input-action-button-icon-size: var(--jkl-unit-30);
+    --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
+    --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
+    --text-color: var(--jkl-color-text-default);
+    --background-color: transparent;
+    --border-color: var(--jkl-color-border-default);
+    --placeholder-color: var(--jkl-color-text-subdued);
+    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-number-input__wrapper:focus-within, .jkl-number-input__wrapper:has([data-focused=true]) {
+    --background-color: var(--jkl-color-background-container);
+  }
+  .jkl-number-input__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
+    --background-color: var(--jkl-color-error-background-container);
+    --text-color: var(--jkl-color-error-text-default);
+    --border-color: var(--jkl-color-error-border-default);
+    --placeholder-color: var(--jkl-color-error-text-subdued);
+  }
+  .jkl-number-input__wrapper:hover, .jkl-number-input__wrapper:focus-within, .jkl-number-input__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-number-input__wrapper:hover, .jkl-number-input__wrapper:focus-within, .jkl-number-input__wrapper:has([data-focused=true]) {
+      border: 0.125rem solid ButtonText;
+    }
+  }
+  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;
+  }
+  .jkl-number-input__wrapper > .jkl-icon-button:focus-visible {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: -8px;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input__wrapper > .jkl-icon-button:focus-visible {
+      --border-color: ButtonText;
+    }
+  }
+  .jkl-number-input__wrapper > .jkl-text-input-action-button {
+    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-number-input__wrapper > .jkl-text-input-action-button .jkl-icon-button__icon {
+    height: var(--jkl-text-input-action-button-icon-size);
+    width: var(--jkl-text-input-action-button-icon-size);
+  }
+  .jkl-number-input__wrapper > .jkl-text-input-action-button:hover {
+    color: var(--jkl-color-text-subdued);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input__wrapper > .jkl-text-input-action-button:hover {
+      border: 0.125rem inset ButtonText;
+    }
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input__wrapper {
+      border: 0.125rem inset ButtonText;
+    }
+  }
+  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-number-input__input:focus-visible) {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-number-input__wrapper:has(.jkl-number-input__input:invalid):not(:focus-within):not(:has([data-focused=true])) {
+    --background-color: var(--jkl-color-background-alert-error);
+    --text-color: var(--jkl-color-text-on-alert);
+    --placeholder-color: color(from currentColor sRGB r g b / 75%);
+  }
+  .jkl-number-input__wrapper--stepper {
+    --jkl-number-input-stepper-min-width: calc(3ch + (var(--jkl-text-input-horizontal-padding) * 2));
+    --jkl-number-input-stepper-text-color: var(--text-color);
+    display: grid;
+    grid-template-columns: max-content minmax(var(--jkl-number-input-stepper-min-width), 1fr) max-content;
+    overflow: hidden;
+  }
+  .jkl-number-input__wrapper--stepper:has(button[data-direction]:focus-visible) {
+    overflow: visible;
+  }
+  .jkl-number-input__input {
+    padding: var(--jkl-text-input-padding);
+    width: 100%;
+    appearance: textfield;
+    -moz-appearance: textfield;
+    background: none;
+    -webkit-appearance: none;
+    color: inherit;
+    font: var(--jkl-text-style-text-medium);
+  }
+  .jkl-number-input__input {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-number-input__input:active, .jkl-number-input__input:hover, .jkl-number-input__input:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input__input {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-number-input__input:active, .jkl-number-input__input:hover, .jkl-number-input__input:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-number-input__input input[type=number]::-webkit-outer-spin-button,
+  .jkl-number-input__input input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  .jkl-number-input__input input[type=number] {
+    -moz-appearance: textfield;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input__input {
+      outline: none;
+      border: none;
+    }
+    .jkl-number-input__input:focus-visible {
+      outline: none;
+    }
+  }
+  .jkl-number-input__input::placeholder {
+    opacity: 1;
+    color: var(--placeholder-color);
+  }
+  .jkl-number-input__input::-webkit-inner-spin-button, .jkl-number-input__input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  .jkl-number-input__input--align-right {
+    text-align: right;
+  }
+  .jkl-number-input__input--stepper {
+    box-sizing: border-box;
+    min-inline-size: var(--jkl-number-input-stepper-min-width);
+    text-align: center;
+  }
+  .jkl-number-input button[data-direction] {
+    --text-color: var(--jkl-number-input-stepper-text-color);
+    aspect-ratio: 1;
+    padding: 0;
+    display: inline-grid;
+    place-items: center;
+    text-align: center;
+    height: 100%;
+  }
+  .jkl-number-input button[data-direction]::before {
+    content: "";
+    position: absolute;
+    width: 1px;
+    inset-block: 20%;
+    background-color: var(--jkl-color-border-separator);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+    transition-property: inset;
+  }
+  .jkl-number-input button[data-direction]:hover::before, .jkl-number-input button[data-direction]:focus-visible::before {
+    inset-block: 0.0625rem;
+  }
+  .jkl-number-input button[data-direction]:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .jkl-number-input button[data-direction=decrement]::before {
+    inset-inline-end: 0;
+  }
+  .jkl-number-input button[data-direction=increment]::before {
+    inset-inline-start: 0;
+  }
+  .jkl-number-input button[data-direction].jkl-button {
+    border-radius: 0;
+  }
+  .jkl-number-input button[data-direction].jkl-button .jkl-icon {
+    margin-block-start: 0.4ex;
+  }
+}
 .jkl-navlink--beta {
   --border-radius: 4px;
   --separator: 1px solid var(--jkl-color-border-subdued);
@@ -3746,13 +4087,13 @@
   .jkl-pagination-button {
     --button-size: var(--jkl-unit-40);
     all: unset;
+    cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     height: var(--button-size);
     min-width: var(--button-size);
     text-align: center;
-    cursor: pointer;
     user-select: none;
     border-radius: 0.1875rem;
     color: var(--jkl-color-text-default);
@@ -3785,7 +4126,7 @@
     --min-option-height: min(var(--jkl-unit-60), 3rem);
     /* Vi må trekke fra bredden til rammen for å få riktig høyde */
     --button-padding: calc(var(--jkl-unit-15) - var(--border-width)) calc(0.75em - var(--border-width));
-    --option-padding: var(--jkl-unit-05) 0.75em;
+    --option-padding: var(--jkl-unit-10);
     display: block;
     position: relative;
   }
@@ -3917,11 +4258,20 @@
     border-top: none;
     border-radius: 0 0 var(--border-radius) var(--border-radius);
     box-sizing: border-box;
+    margin-inline: -0.0625rem;
+    width: calc(100% + 0.125rem);
+    --min-option-height: min(var(--jkl-unit-60), 3rem);
+    --option-padding: var(--jkl-unit-05) 0.75em;
     overflow-y: auto;
     max-height: calc((var(--jkl-select-max-shown-options, 5) + 0.5) * var(--min-option-height));
-    transition-property: height;
-    transition-timing-function: var(--jkl-motion-easing-standard);
-    transition-duration: var(--jkl-motion-timing-productive);
+  }
+  .jkl-select__options-menu[data-popover-placement=bottom] {
+    border-top: none;
+    border-radius: 0 0 var(--jkl-border-radius-s) var(--jkl-border-radius-s);
+  }
+  .jkl-select__options-menu[data-popover-placement=top] {
+    border-bottom: none;
+    border-radius: var(--jkl-border-radius-s) var(--jkl-border-radius-s) 0 0;
   }
   .jkl-select__option-wrapper {
     margin: 0;
@@ -3949,7 +4299,7 @@
   }
   .jkl-select__option:focus, :not([data-focus=controlled]) > .jkl-select__option:hover {
     color: var(--jkl-color-text-default);
-    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    background-color: var(--jkl-color-background-container-accent);
   }
   .jkl-select__option-description {
     color: var(--jkl-color-text-subdued);
@@ -3978,6 +4328,16 @@
   .jkl-select--open .jkl-select__button:hover ~ .jkl-select__arrow {
     transform: translateY(calc(-50% + -0.1875rem));
   }
+  .jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=bottom] .jkl-select__search-input,
+  .jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=bottom] .jkl-select__button {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=top] .jkl-select__search-input,
+  .jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=top] .jkl-select__button {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
   .jkl-select--invalid .jkl-select__search-input,
   .jkl-select--invalid .jkl-select__button {
     background-color: var(--jkl-color-error-background-container);
@@ -3997,12 +4357,14 @@
     .jkl-select .jkl-select__button:hover, .jkl-select .jkl-select__search-input:hover {
       border-color: Highlight;
     }
-    .jkl-select .jkl-select__option {
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-select__option {
       color: CanvasText;
       border-top: 1px solid Canvas;
       border-bottom: 1px solid Canvas;
     }
-    .jkl-select .jkl-select__option:hover, .jkl-select .jkl-select__option:focus {
+    .jkl-select__option:hover, .jkl-select__option:focus {
       border-top: 1px solid SelectedItem;
       border-bottom: 1px solid SelectedItem;
       --jkl-icon-weight: 400;
@@ -4010,6 +4372,43 @@
       letter-spacing: -0.014em;
     }
   }
+  .jkl-popover.jkl-select__popover {
+    background: none;
+    box-shadow: none;
+    border-radius: 0;
+    z-index: 7000;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .jkl-select__options-menu {
+      animation: jkl-select-options-menu-in var(--jkl-motion-timing-snappy) var(--jkl-motion-easing-standard);
+    }
+    .jkl-select__options-menu[data-popover-placement=top] {
+      animation-name: jkl-select-options-menu-in-from-top;
+    }
+  }
+  @keyframes jkl-select-options-menu-in {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes jkl-select-options-menu-in-from-top {
+    from {
+      opacity: 0;
+      transform: translateY(0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .jkl-select__option:focus-visible {
+    outline: none;
+  }
 }
 @layer jokul.components {
   .jkl-progress-bar {
@@ -4064,7 +4463,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-uccvkd9 {
+  @keyframes jkl-downcount-uhpq1j6 {
     from {
       width: 100%;
     }
@@ -4256,7 +4655,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   border: 0;
   height: 100%;
   padding: 0;
-  cursor: pointer;
   color: var(--jkl-color-text-default);
   border-radius: 100%;
 }
@@ -4443,19 +4841,16 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
 @layer jokul.components {
   .jkl-system-message {
     --jkl-system-message-icon-height: var(--jkl-unit-30);
-    --jkl-system-message-icon-padding: 0.1875rem 0 0 0;
     --jkl-system-message-content-padding: var(--jkl-unit-30);
     --jkl-system-message-dismiss-button-size: var(--jkl-unit-40);
-    --jkl-system-message-dismiss-button-margin: -0.40625rem
-    -1.125rem -0.40625rem auto;
+    --jkl-system-message-dismiss-button-margin: -0.40625rem -1.125rem -0.40625rem auto;
     --jkl-system-message-message-margin: 0 var(--jkl-unit-20);
+    --icon-color: var(--jkl-color-background-contrast);
     --background-color: var(--jkl-color-background-container);
     --text-color: var(--jkl-color-text-default);
-    --border-color: var(--jkl-color-border-subdued);
     width: 100%;
     background-color: var(--background-color);
     color: var(--text-color);
-    border: 1px solid var(--border-color);
     transition-behavior: allow-discrete;
     box-sizing: border-box;
   }
@@ -4470,7 +4865,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-system-message__icon {
     height: var(--jkl-system-message-icon-height);
-    margin: var(--jkl-system-message-icon-padding);
+    color: var(--icon-color);
     flex-shrink: 0;
   }
   @media screen and (forced-colors: active) {
@@ -4488,12 +4883,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   .jkl-system-message__dismiss-button {
     background-color: transparent;
     padding: 0;
-    cursor: pointer;
     display: grid;
     place-content: center;
     position: relative;
     flex-shrink: 0;
-    margin-top: 0.1875rem;
     color: inherit;
   }
   .jkl-system-message__dismiss-button::after {
@@ -4564,28 +4957,28 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uccvkdz var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uhpq1kd 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);
-    --border-color: var(--jkl-color-info-border-subdued);
+    --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);
-    --border-color: var(--jkl-color-warning-border-subdued);
+    --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);
-    --border-color: var(--jkl-color-error-border-subdued);
+    --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);
-    --border-color: var(--jkl-color-success-border-subdued);
+    --icon-color: var(--jkl-color-success-background-contrast);
   }
   @media screen and (forced-colors: active) {
     .jkl-system-message {
@@ -4602,7 +4995,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uccvkdz {
+  @keyframes jkl-dismiss-uhpq1kd {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -4838,7 +5231,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     background: transparent;
     color: var(--jkl-link-color);
     border-radius: 0.1875rem;
-    cursor: pointer;
     user-select: none;
     padding: 0;
     height: 2rem;
@@ -5215,7 +5607,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     padding: var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);
     border: none;
     background-color: transparent;
-    cursor: pointer;
     position: relative;
     scroll-margin-inline-start: var(--jkl-unit-20);
     scroll-snap-align: start;
@@ -5305,7 +5696,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     color: var(--text-color);
     background-color: var(--background-color);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     align-items: start;
     overflow: hidden;
@@ -5315,12 +5706,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     font: var(--jkl-text-style-paragraph-medium);
   }
   .jkl-toast__progress {
-    --bar-color: var(--jkl-color-background-contrast);
-    --track-color: transparent;
-    border-radius: 0;
     position: absolute;
     inset: 0 0 auto;
   }
+  .jkl-toast .jkl-countdown {
+    --track-color: transparent;
+    --bar-color: var(--jkl-color-background-contrast);
+    border-radius: 0;
+  }
   @media screen and (forced-colors: active) {
     .jkl-toast__icon {
       stroke: CanvasText;
@@ -5348,7 +5741,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   .jkl-toast__dismiss-button {
     background-color: transparent;
     padding: 0;
-    cursor: pointer;
     color: inherit;
   }
   @media screen and (forced-colors: active) {
@@ -5375,21 +5767,45 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     --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;
@@ -5407,12 +5823,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uccvkeo var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-uhpq1kj var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uccvkff var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-uhpq1le var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uccvkeo {
+  @keyframes jkl-entering-uhpq1kj {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5422,7 +5838,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uccvkff {
+  @keyframes jkl-exiting-uhpq1le {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -6897,7 +7313,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   background: transparent;
   color: var(--text-color);
   padding: 0;
-  cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   display: flex;
   flex-direction: row-reverse;
@@ -7004,7 +7419,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
 
 @layer jokul.components {
   :where(.jkl-text) {
-    font-weight: var(--jkl-typography-weight-normal);
+    font-weight: var(--jkl-font-weight-normal);
     line-height: var(--jkl-line-height-relaxed);
   }
   .jkl-text[data-text-size] {
@@ -7024,7 +7439,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
   .jkl-text[data-bold],
   strong.jkl-text[data-text-size] {
-    font-weight: var(--jkl-typography-weight-bold);
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-text[data-short] {
     line-height: var(--jkl-line-height-tight);
@@ -7038,53 +7453,31 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
 }
 @layer jokul.components {
-  :where(.jkl-title) {
-    font-weight: var(--jkl-typography-weight-normal);
-    line-height: var(--jkl-line-height-tight);
-  }
-  .jkl-title[data-text-size] {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=xs] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=xs],
-  .jkl-heading-xs {
     font: var(--jkl-text-style-heading-5);
   }
-  :where(.jkl-heading-xs) {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=s] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=s],
-  .jkl-heading-s {
     font: var(--jkl-text-style-heading-4);
   }
-  :where(.jkl-heading-s) {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=m] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=m],
-  .jkl-heading-m {
     font: var(--jkl-text-style-heading-3);
   }
-  :where(.jkl-heading-m) {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=l] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=l],
-  .jkl-heading-l {
     font: var(--jkl-text-style-heading-2);
   }
-  :where(.jkl-heading-l) {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=xl] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=xl],
-  .jkl-heading-xl {
     font: var(--jkl-text-style-heading-1);
   }
-  :where(.jkl-heading-xl) {
-    margin-block: 0;
-  }
-  :is(label, legend).jkl-title[data-text-size] {
-    font-weight: var(--jkl-typography-weight-normal);
+  :is(label, legend)[data-text-size] {
+    font-weight: var(--jkl-font-weight-normal);
     line-height: var(--jkl-line-height-relaxed);
   }
-  label.jkl-title[data-text-size] {
+  :is(label)[data-text-size] {
     display: block;
     margin-block-end: var(--jkl-spacing-8);
   }