@fremtind/jokul 5.0.5 → 5.2.0

package/styles/components.css

@@ -83,6 +83,7 @@
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     max-width: 100%;
+    overflow: hidden;
     position: relative;
     display: flex;
     align-items: center;
@@ -98,7 +99,6 @@
     --background-color: var(--jkl-color-background-container);
   }
   .jkl-text-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);
@@ -225,7 +225,7 @@
 @layer jokul.components {
   .jkl-icon {
     --jkl-icon-fill: 0;
-    font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+    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";
@@ -233,6 +233,7 @@
     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);
@@ -244,31 +245,11 @@
   .jkl-icon--animated {
     display: block;
   }
-  .jkl-icon-red-cross,
-  .jkl-icon-green-check {
-    width: 1.3em;
-    height: 1.3em;
-    box-sizing: border-box;
-    border-radius: 999px;
-    display: inline-grid;
-    place-items: center;
-    font-size: 1em;
-  }
-  @media screen and (forced-colors: active) {
-    .jkl-icon-red-cross,
-    .jkl-icon-green-check {
-      background-color: Canvas;
-      color: CanvasText;
-      border: 1px solid CanvasText;
-    }
-  }
   .jkl-icon-red-cross {
-    background-color: var(--jkl-color-error-background-contrast);
-    color: var(--jkl-color-error-text-on-contrast);
+    color: var(--jkl-color-error-background-contrast);
   }
   .jkl-icon-green-check {
-    background-color: var(--jkl-color-success-background-contrast);
-    color: var(--jkl-color-success-text-on-contrast);
+    color: var(--jkl-color-success-background-contrast);
   }
   .jkl-animated-horizontal-arrows,
   .jkl-animated-vertical-arrows {
@@ -403,7 +384,8 @@
   .jkl-form-support-label {
     --jkl-form-support-label-margin: var(--jkl-unit-10) 0 0;
     --jkl-form-support-label-icon-size: 1.25rem;
-    --jkl-form-support-label-icon-margin: 0 -1.25rem -0.375rem 0;
+    --jkl-form-support-label-icon-margin: 0 -1.25rem -0.375rem
+        0;
     --color: var(--jkl-color-text-subdued);
     font: var(--jkl-text-style-text-small);
     transition-timing-function: var(--jkl-motion-easing-standard);
@@ -429,11 +411,22 @@
       fill: Canvas;
     }
   }
+  .jkl-form-support-label--error {
+    background-color: var(--jkl-color-error-background-container);
+    padding-block: var(--jkl-unit-05);
+    padding-inline: var(--jkl-unit-05) var(--jkl-unit-10);
+    border-radius: var(--jkl-border-radius-xs);
+    color: var(--jkl-color-error-text-default);
+  }
+  .jkl-form-support-label--error .jkl-form-support-label__icon {
+    color: var(--jkl-color-error-background-contrast);
+  }
   .jkl-form-support-label--error, .jkl-form-support-label--warning, .jkl-form-support-label--success {
     --color: var(--jkl-color-text-default);
+    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-uumgn13 forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u52kgej forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -487,7 +480,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uumgn13 {
+  @keyframes jkl-support-icon-entrance-u52kgej {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -635,8 +628,8 @@
 }
 @layer jokul.components {
   .jkl-link {
-    --link-color: var(--jkl-color-text-default);
-    color: inherit;
+    --link-color: var(--jkl-color-text-accent);
+    color: var(--link-color);
     outline: none;
     text-decoration: none;
     transition-timing-function: var(--jkl-motion-easing-standard);
@@ -655,7 +648,7 @@
     margin-block-start: -0.1em;
     padding-inline-start: 0.2em;
     vertical-align: middle;
-    font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+    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";
@@ -663,6 +656,7 @@
     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);
@@ -693,7 +687,6 @@
     padding: 0;
     margin: 0;
     background: none;
-    line-height: inherit;
     font: inherit;
     text-align: inherit;
   }
@@ -847,22 +840,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uumgn1i;
+    animation-name: jkl-loader-left-spin-u52kgfe;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uumgn1z;
+    animation-name: jkl-loader-middle-spin-u52kgg7;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uumgn2n;
+    animation-name: jkl-loader-right-spin-u52kggo;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uumgn1i {
+  @keyframes jkl-loader-left-spin-u52kgfe {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -876,7 +869,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uumgn1z {
+  @keyframes jkl-loader-middle-spin-u52kgg7 {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -893,7 +886,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uumgn2n {
+  @keyframes jkl-loader-right-spin-u52kggo {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -933,7 +926,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uumgn2s;
+      animation: 2s ease infinite jkl-blink-u52kghh;
     }
   }
   .jkl-skeleton-input {
@@ -981,10 +974,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uumgn2s;
+      animation: 2s ease-in-out infinite jkl-blink-u52kghh;
     }
   }
-  @keyframes jkl-blink-uumgn2s {
+  @keyframes jkl-blink-u52kghh {
     0% {
       opacity: 1;
     }
@@ -1175,7 +1168,8 @@
 
 @layer jokul.components {
   .jkl-checkbox {
-    --text-color: var(--jkl-color-background-contrast);
+    --text-color: var(--jkl-color-text-default);
+    --icon-color: var(--jkl-color-background-contrast);
     --background-color: transparent;
     font: var(--jkl-text-style-text-medium);
     display: flex;
@@ -1218,6 +1212,7 @@
     }
   }
   .jkl-checkbox__label {
+    color: var(--text-color);
     cursor: pointer;
     display: flex;
     transition-timing-function: var(--jkl-motion-easing-standard);
@@ -1225,9 +1220,10 @@
     transition-property: color;
   }
   .jkl-checkbox__label::before {
-    content: "check_box_outline_blank";
+    color: var(--icon-color);
+    content: "check_box_outline_blank"/"";
     margin-inline-end: 0.25em;
-    font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+    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";
@@ -1235,6 +1231,7 @@
     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);
@@ -1248,11 +1245,11 @@
     --jkl-icon-weight: var(--jkl-font-weight-bold);
   }
   .jkl-checkbox__input:checked + .jkl-checkbox__label::before {
-    content: "check_box";
+    content: "check_box"/"";
     --jkl-icon-fill: 1;
   }
   .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label::before {
-    content: "indeterminate_check_box";
+    content: "indeterminate_check_box"/"";
     --jkl-icon-fill: 1;
   }
   .jkl-checkbox__input[aria-invalid=true] + .jkl-checkbox__label::before {
@@ -1301,6 +1298,21 @@
   .jkl-input-panel__header label {
     inline-size: 100%;
   }
+  .jkl-input-panel__header label::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+  .jkl-input-panel__header label,
+  .jkl-input-panel__header .jkl-radio-button,
+  .jkl-input-panel__header .jkl-checkbox {
+    position: unset;
+  }
+  .jkl-input-panel__header input[type=checkbox],
+  .jkl-input-panel__header input[type=radio] {
+    inset-block-start: var(--jkl-unit-20);
+    inset-inline-start: var(--padding-inline);
+  }
   .jkl-input-panel__header__amount {
     display: flex;
     height: 100%;
@@ -1336,6 +1348,9 @@
     height: auto;
     padding-block-end: var(--jkl-unit-20);
   }
+  .jkl-input-panel:has(input[aria-invalid=true]) {
+    --outer-border-color: var(--jkl-color-error-border-default);
+  }
   .jkl-input-panel:has(input:hover) {
     --outer-border-color: var(--jkl-color-border-strong);
     --outer-border-thickness: 0.125rem;
@@ -1418,7 +1433,8 @@
 @layer jokul.components {
   .jkl-combobox {
     --jkl-combobox-button-padding: var(--jkl-unit-10);
-    --jkl-combobox-button-active-value-padding: var(--jkl-unit-10) var(--jkl-unit-05) var(--jkl-unit-5) var(--jkl-unit-10);
+    --jkl-combobox-button-active-value-padding: var(--jkl-unit-10)
+        var(--jkl-unit-05) var(--jkl-unit-5) var(--jkl-unit-10);
     --jkl-combobox-input-height: 3rem;
     --jkl-combobox-actions-right: var(--jkl-unit-10);
     --jkl-combobox-actions-top: var(--jkl-unit-05);
@@ -1480,6 +1496,7 @@
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     max-width: 100%;
+    overflow: hidden;
     position: relative;
     display: flex;
     align-items: center;
@@ -1495,7 +1512,6 @@
     --background-color: var(--jkl-color-background-container);
   }
   .jkl-combobox__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);
@@ -1699,10 +1715,6 @@
     font-weight: 700;
   }
   .jkl-combobox--invalid .jkl-combobox__search-input,
-  .jkl-combobox--invalid .jkl-combobox__wrapper {
-    background-color: var(--jkl-color-error-background-container);
-  }
-  .jkl-combobox--invalid .jkl-combobox__search-input,
   .jkl-combobox--invalid .jkl-combobox__button,
   .jkl-combobox--invalid .jkl-combobox__wrapper {
     color: var(--jkl-color-error-text-default);
@@ -1783,7 +1795,7 @@
     padding-left: 0;
   }
   .jkl-list__item--iconed::before {
-    font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+    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";
@@ -1791,6 +1803,7 @@
     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);
@@ -2122,10 +2135,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uumgn3u var(--duration) linear forwards;
+    animation: jkl-downcount-u52kgid var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uumgn3u {
+  @keyframes jkl-downcount-u52kgid {
     from {
       width: 100%;
     }
@@ -2626,12 +2639,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uumgn4b 0.25s ease-out;
+    animation: jkl-show-u52kgiu 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uumgn4b {
+  @keyframes jkl-show-u52kgiu {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2843,7 +2856,7 @@
     --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uumgn4l var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-u52kgj9 var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -2865,7 +2878,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-uumgn4l {
+  @keyframes jkl-dismiss-u52kgj9 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -2880,6 +2893,8 @@
   .jkl-radio-button {
     display: flex;
     position: relative;
+    --text-color: var(--jkl-color-text-default);
+    --icon-color: var(--jkl-color-background-contrast);
     font: var(--jkl-text-style-text-medium);
   }
   .jkl-radio-button {
@@ -2939,14 +2954,16 @@
   .jkl-radio-button__label {
     cursor: pointer;
     display: flex;
+    color: var(--text-color);
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color;
   }
   .jkl-radio-button__label::before {
-    content: "radio_button_unchecked";
+    color: var(--icon-color);
+    content: "radio_button_unchecked"/"";
     margin-inline-end: 0.25em;
-    font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+    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";
@@ -2954,6 +2971,7 @@
     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);
@@ -2968,7 +2986,7 @@
     --jkl-icon-weight: var(--jkl-font-weight-bold);
   }
   .jkl-radio-button__input:checked + .jkl-radio-button__label::before {
-    content: "radio_button_checked";
+    content: "radio_button_checked"/"";
   }
   .jkl-radio-button__input[aria-invalid=true] + .jkl-radio-button__label::before {
     color: var(--jkl-color-error-background-contrast);
@@ -3006,6 +3024,7 @@
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     max-width: 100%;
+    overflow: hidden;
     position: relative;
     display: flex;
     align-items: center;
@@ -3021,7 +3040,6 @@
     --background-color: var(--jkl-color-background-container);
   }
   .jkl-text-area-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);
@@ -3524,7 +3542,7 @@
   }
   .jkl-link-list ul .jkl-link-list-link::after {
     content: "arrow_forward"/"";
-    font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+    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";
@@ -3532,6 +3550,7 @@
     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);
@@ -3823,6 +3842,7 @@
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     max-width: 100%;
+    overflow: hidden;
     position: relative;
     display: flex;
     align-items: center;
@@ -3838,7 +3858,6 @@
     --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);
@@ -4042,7 +4061,7 @@
   grid-column: 2;
   grid-row: 1/span 999;
   translate: 0;
-  font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+  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";
@@ -4050,6 +4069,7 @@
   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);
@@ -4129,7 +4149,8 @@
     --border-radius: var(--jkl-border-radius-s);
     --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));
+    --button-padding: calc(var(--jkl-unit-15) - var(--border-width))
+        calc(0.75em - var(--border-width));
     --option-padding: var(--jkl-unit-10);
     display: block;
     position: relative;
@@ -4336,8 +4357,8 @@
   }
   .jkl-select--invalid .jkl-select__search-input,
   .jkl-select--invalid .jkl-select__button {
-    background-color: var(--jkl-color-error-background-container);
-    color: var(--jkl-color-error-text-subdued);
+    color: var(--jkl-color-error-text-default);
+    border-color: var(--jkl-color-error-border-default);
   }
   .jkl-select--invalid .jkl-select__search-input--active-value,
   .jkl-select--invalid .jkl-select__button--active-value {
@@ -4459,7 +4480,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-uumgn5e {
+  @keyframes jkl-downcount-u52kgk8 {
     from {
       width: 100%;
     }
@@ -4635,7 +4656,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   justify-content: center;
   height: 100%;
   grid-column: 1;
-  font-family: "Jokul Icons", "Jokul Icons Fallback", monospace;
+  font-family: var(--jkl-font-family-icons);
 }
 .jkl-search .input-wrapper:has(.clear-button) {
   grid-template-columns: 1.3em 1fr 1.3em;
@@ -4664,7 +4685,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   grid-row: 1;
   grid-column: 1;
   z-index: 1;
-  font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+  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";
@@ -4672,6 +4693,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   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);
@@ -4715,20 +4737,26 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta 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;
-  width: 1px;
-  inset: 0;
-  inset-block: 20%;
-  background-color: var(--jkl-color-border-subdued);
+  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;
+  transition-property: inset, border-color;
 }
-.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover::before {
-  inset-block: 0;
+.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 {
@@ -4953,7 +4981,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uumgn6x var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-u52kgkq var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -4991,7 +5019,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uumgn6x {
+  @keyframes jkl-dismiss-u52kgkq {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5819,12 +5847,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-uumgn7v var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-u52kgle var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uumgn84 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-u52kgls var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uumgn7v {
+  @keyframes jkl-entering-u52kgle {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5834,7 +5862,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uumgn84 {
+  @keyframes jkl-exiting-u52kgls {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -7346,6 +7374,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
 .jkl-toggle-switch[aria-pressed=true], [aria-checked=true] > .jkl-toggle-switch {
   --indicator-color: var(--jkl-color-background-contrast);
   --knob-color: var(--jkl-color-text-on-contrast);
+  --switch-border-color: var(--indicator-color);
+  --knob-border-color: var(--knob-color);
   --knob-position: calc(var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding) * 2);
 }
 .jkl-toggle-switch[disabled] {
@@ -7356,6 +7386,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
 }
 .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-widget {
@@ -7415,7 +7446,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
 
 @layer jokul.components {
   :where(.jkl-text) {
-    font-weight: var(--jkl-font-weight-normal);
     line-height: var(--jkl-line-height-relaxed);
   }
   .jkl-text[data-text-size] {
@@ -7423,15 +7453,19 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
   .jkl-text[data-text-size=xs] {
     font: var(--jkl-text-style-text-micro);
+    font-weight: inherit;
   }
   .jkl-text[data-text-size=s] {
     font: var(--jkl-text-style-paragraph-small);
+    font-weight: inherit;
   }
   .jkl-text[data-text-size=m] {
     font: var(--jkl-text-style-paragraph-medium);
+    font-weight: inherit;
   }
   .jkl-text[data-text-size=l] {
     font: var(--jkl-text-style-paragraph-large);
+    font-weight: inherit;
   }
   .jkl-text[data-bold],
   strong.jkl-text[data-text-size] {
@@ -7440,6 +7474,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   .jkl-text[data-short] {
     line-height: var(--jkl-line-height-tight);
   }
+  .jkl-text[data-center] {
+    text-align: center;
+  }
+  .jkl-text[data-subdued] {
+    color: var(--jkl-color-text-subdued);
+  }
   :is(code, kbd, samp, var).jkl-text {
     font-family: var(--jkl-font-family-mono);
   }
@@ -7477,6 +7517,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
     display: block;
     margin-block-end: var(--jkl-spacing-8);
   }
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size][data-center] {
+    text-align: center;
+  }
 }
 @layer jokul.components {
   .jkl-help {
@@ -7508,7 +7551,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
     background-color: var(--jkl-color-background-contrast);
     color: var(--jkl-color-text-on-contrast);
     border-radius: var(--jkl-border-radius-s);
-    anchor-name: --help-box;
   }
   .jkl-help-popover[data-position=top] {
     position-area: top center;