@fremtind/jokul 5.0.4 → 5.1.0

package/styles/components.css

@@ -69,7 +69,8 @@
 }
 @layer jokul.components {
   .jkl-text-input-wrapper {
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --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);
@@ -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);
@@ -403,7 +404,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 +431,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-ugips9c forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uq1yop7 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -487,7 +500,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-ugips9c {
+  @keyframes jkl-support-icon-entrance-uq1yop7 {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -540,6 +553,7 @@
     background-color: var(--background-color);
     color: var(--jkl-color-text-on-contrast);
     display: inline-block;
+    border-radius: var(--jkl-border-radius-s);
     min-width: min-content;
     max-width: min(19.375rem, 100%);
     padding: var(--content-padding);
@@ -634,8 +648,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);
@@ -654,7 +668,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";
@@ -662,6 +676,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);
@@ -692,7 +707,6 @@
     padding: 0;
     margin: 0;
     background: none;
-    line-height: inherit;
     font: inherit;
     text-align: inherit;
   }
@@ -846,22 +860,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-ugipsac;
+    animation-name: jkl-loader-left-spin-uq1yoq6;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-ugipsbb;
+    animation-name: jkl-loader-middle-spin-uq1yoqp;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-ugipsbd;
+    animation-name: jkl-loader-right-spin-uq1yori;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-ugipsac {
+  @keyframes jkl-loader-left-spin-uq1yoq6 {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -875,7 +889,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-ugipsbb {
+  @keyframes jkl-loader-middle-spin-uq1yoqp {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -892,7 +906,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-ugipsbd {
+  @keyframes jkl-loader-right-spin-uq1yori {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -932,7 +946,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-ugipsc0;
+      animation: 2s ease infinite jkl-blink-uq1yorn;
     }
   }
   .jkl-skeleton-input {
@@ -980,10 +994,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-ugipsc0;
+      animation: 2s ease-in-out infinite jkl-blink-uq1yorn;
     }
   }
-  @keyframes jkl-blink-ugipsc0 {
+  @keyframes jkl-blink-uq1yorn {
     0% {
       opacity: 1;
     }
@@ -1174,7 +1188,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;
@@ -1217,6 +1232,7 @@
     }
   }
   .jkl-checkbox__label {
+    color: var(--text-color);
     cursor: pointer;
     display: flex;
     transition-timing-function: var(--jkl-motion-easing-standard);
@@ -1224,9 +1240,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";
@@ -1234,6 +1251,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);
@@ -1247,11 +1265,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 {
@@ -1300,6 +1318,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%;
@@ -1335,6 +1368,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;
@@ -1417,7 +1453,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);
@@ -1465,7 +1502,8 @@
     display: flex;
     gap: 1ch;
     cursor: pointer;
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --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);
@@ -1494,7 +1532,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);
@@ -1698,10 +1735,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);
@@ -1782,7 +1815,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";
@@ -1790,6 +1823,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);
@@ -2121,10 +2155,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-ugipsd8 var(--duration) linear forwards;
+    animation: jkl-downcount-uq1yot2 var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-ugipsd8 {
+  @keyframes jkl-downcount-uq1yot2 {
     from {
       width: 100%;
     }
@@ -2625,12 +2659,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-ugipsdr 0.25s ease-out;
+    animation: jkl-show-uq1yotg 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-ugipsdr {
+  @keyframes jkl-show-uq1yotg {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2842,7 +2876,7 @@
     --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-ugipsdt var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-uq1you8 var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -2864,7 +2898,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-ugipsdt {
+  @keyframes jkl-dismiss-uq1you8 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -2879,6 +2913,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 {
@@ -2938,14 +2974,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";
@@ -2953,6 +2991,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);
@@ -2967,7 +3006,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);
@@ -2991,7 +3030,8 @@
 @layer jokul.components {
   .jkl-text-area-wrapper {
     overflow: hidden;
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --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);
@@ -3020,7 +3060,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);
@@ -3523,7 +3562,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";
@@ -3531,6 +3570,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);
@@ -3638,7 +3678,7 @@
 @layer jokul.components {
   .jkl-menu-item {
     --jkl-menu-item-height: var(--jkl-unit-60);
-    --jkl-menu-item-padding: var(--jkl-unit-15) var(--jkl-unit-30);
+    --jkl-menu-item-padding: var(--jkl-unit-15) var(--jkl-unit-20);
     --background-color: transparent;
     background-color: var(--background-color);
     color: var(--jkl-color-text-default);
@@ -3722,9 +3762,10 @@
     align-items: flex-start;
     flex-wrap: nowrap;
     box-shadow: 0 0.25rem 1.25rem rgba(49, 48, 48, 0.2);
-    border-radius: 0.125rem;
+    border-radius: var(--jkl-border-radius-s);
     border: 2px solid var(--border-color);
     z-index: 7000;
+    padding-block: var(--jkl-unit-15);
   }
   .jkl-menu:focus-visible {
     outline: none;
@@ -3807,7 +3848,8 @@
     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-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);
@@ -3836,7 +3878,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);
@@ -4040,7 +4081,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";
@@ -4048,6 +4089,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);
@@ -4127,7 +4169,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;
@@ -4250,14 +4293,8 @@
     color: var(--jkl-color-error-text-default);
   }
   .jkl-select__options-menu {
-    position: absolute;
-    left: -0.0625rem;
-    right: -0.0625rem;
-    top: 100%;
-    z-index: 7000;
     background-color: var(--jkl-color-background-container);
     border: 0.125rem solid var(--jkl-color-border-strong);
-    border-top: none;
     border-radius: 0 0 var(--border-radius) var(--border-radius);
     box-sizing: border-box;
     margin-inline: -0.0625rem;
@@ -4320,8 +4357,6 @@
   }
   .jkl-select--open .jkl-select__search-input,
   .jkl-select--open .jkl-select__button {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
     border-color: var(--jkl-color-border-strong);
     background-color: var(--jkl-color-background-container);
     box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-strong);
@@ -4342,8 +4377,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 {
@@ -4465,7 +4500,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-ugipse6 {
+  @keyframes jkl-downcount-uq1youi {
     from {
       width: 100%;
     }
@@ -4641,7 +4676,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;
@@ -4670,7 +4705,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";
@@ -4678,6 +4713,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);
@@ -4959,7 +4995,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-ugipsen var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uq1yovm var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -4997,7 +5033,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-ugipsen {
+  @keyframes jkl-dismiss-uq1yovm {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5825,12 +5861,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-ugipsfm var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-uq1yow1 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-ugipsg9 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-uq1yow6 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-ugipsfm {
+  @keyframes jkl-entering-uq1yow1 {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5840,7 +5876,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-ugipsg9 {
+  @keyframes jkl-exiting-uq1yow6 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -7352,6 +7388,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] {
@@ -7362,6 +7400,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 {
@@ -7446,6 +7485,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);
   }
@@ -7483,6 +7528,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,12 +7556,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   .jkl-help-popover {
     width: max-content;
     max-width: min(40ch, 80vw);
-    padding: var(--jkl-unit-30);
+    padding: var(--jkl-unit-15);
     margin: var(--jkl-unit-05);
     position-anchor: --trigger;
     background-color: var(--jkl-color-background-contrast);
     color: var(--jkl-color-text-on-contrast);
-    anchor-name: --help-box;
+    border-radius: var(--jkl-border-radius-s);
   }
   .jkl-help-popover[data-position=top] {
     position-area: top center;