@fremtind/jokul 4.5.1 → 4.6.1

package/styles/styles.css

@@ -277,28 +277,42 @@
     display: block;
   }
   .jkl-icon-red-cross {
-    --red-cross-circle: var(--jkl-color-background-alert-error);
-    --red-cross-path: var(--jkl-color-text-on-alert);
     width: 1.3em;
     height: 1.3em;
+    box-sizing: border-box;
+    border-radius: 999px;
+    background-color: var(--jkl-color-background-alert-error);
+    color: var(--jkl-color-text-on-alert);
+    display: inline-grid;
+    place-items: center;
+    font-size: 1em;
+    --jkl-icon-weight: var(--jkl-icon-weight-bold);
   }
-  .jkl-icon-red-cross path {
-    fill: var(--red-cross-path);
-  }
-  .jkl-icon-red-cross circle {
-    fill: var(--red-cross-circle);
+  @media screen and (forced-colors: active) {
+    .jkl-icon-red-cross {
+      background-color: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+    }
   }
   .jkl-icon-green-check {
-    --green-check-circle: var(--jkl-color-background-alert-success);
-    --green-check-path: var(--jkl-color-text-on-alert);
     width: 1.3em;
     height: 1.3em;
+    box-sizing: border-box;
+    border-radius: 999px;
+    background-color: var(--jkl-color-background-alert-success);
+    color: var(--jkl-color-text-on-alert);
+    display: inline-grid;
+    place-items: center;
+    font-size: 1em;
+    --jkl-icon-weight: var(--jkl-icon-weight-bold);
   }
-  .jkl-icon-green-check path {
-    fill: var(--green-check-path);
-  }
-  .jkl-icon-green-check circle {
-    fill: var(--green-check-circle);
+  @media screen and (forced-colors: active) {
+    .jkl-icon-green-check {
+      background-color: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+    }
   }
   .jkl-animated-horizontal-arrows,
   .jkl-animated-vertical-arrows {
@@ -467,7 +481,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: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uuk6hei forwards;
+    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u12odmy forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -533,7 +547,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uuk6hei {
+  @keyframes jkl-support-icon-entrance-u12odmy {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -826,7 +840,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%;
@@ -889,22 +904,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uuk6hep;
+    animation-name: jkl-loader-left-spin-u12odnj;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uuk6hf8;
+    animation-name: jkl-loader-middle-spin-u12odoj;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uuk6hfe;
+    animation-name: jkl-loader-right-spin-u12odok;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uuk6hep {
+  @keyframes jkl-loader-left-spin-u12odnj {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -918,7 +933,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uuk6hf8 {
+  @keyframes jkl-loader-middle-spin-u12odoj {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -935,7 +950,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uuk6hfe {
+  @keyframes jkl-loader-right-spin-u12odok {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -975,7 +990,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uuk6hg8;
+      animation: 2s ease infinite jkl-blink-u12odox;
     }
   }
   .jkl-skeleton-input {
@@ -1023,10 +1038,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uuk6hg8;
+      animation: 2s ease-in-out infinite jkl-blink-u12odox;
     }
   }
-  @keyframes jkl-blink-uuk6hg8 {
+  @keyframes jkl-blink-u12odox {
     0% {
       opacity: 1;
     }
@@ -1841,32 +1856,9 @@
   }
 }
 /*
- * NOTE: These icon also exists as a copy in the jkl-icons-react package.
- *       If you're here to change them, consider changing them there as well, or
- *       finding a technical solution to sharing the SVG markup
+ * NOTE: These markers should stay visually aligned with GreenCheckIcon and
+ *       RedCrossIcon in the icon package.
  */
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --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-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");
-  }
-}
-[data-theme=light] {
-  --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-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");
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --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='%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='%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");
-  }
-}
-[data-theme=dark] {
-  --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='%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='%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");
-}
-
 @layer jokul.components {
   .jkl-list {
     --list-text-color: var(--jkl-color-text-default);
@@ -1904,32 +1896,49 @@
     padding-left: 0;
   }
   .jkl-list__item--iconed::before {
-    text-indent: -9999px;
-    background-size: contain;
-    width: 1em;
-    height: 1em;
+    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+    font-feature-settings: "liga";
+    -webkit-font-feature-settings: "liga";
+    font-size: 1.3em;
+    font-weight: var(--jkl-icon-weight, 300);
+    line-height: 1;
+    display: inline-block;
+    -webkit-font-smoothing: antialiased;
+    transition-timing-function: ease;
+    transition-duration: 75ms;
+    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;
+    color: var(--jkl-color-text-on-alert);
+    --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);
+    background-color: var(--jkl-color-background-alert-success);
   }
   .jkl-list__item--cross::before {
-    content: "❌";
-    content: "❌"/"";
+    content: "\e5cd";
+    content: "\e5cd"/"";
     alt: " ";
-    background-image: var(--jkl-list-marker-cross);
+    background-color: var(--jkl-color-background-alert-error);
   }
   @media screen and (forced-colors: active) {
-    .jkl-list .jkl-list__item--check::before {
-      background-image: _check(CanvasText, Canvas);
-    }
-    .jkl-list .jkl-list__item--cross::before {
-      background-image: _cross(CanvasText, Canvas);
+    .jkl-list .jkl-list__item--check::before, .jkl-list .jkl-list__item--cross::before {
+      background-color: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
     }
   }
 }
@@ -2136,10 +2145,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uuk6hho var(--duration) linear forwards;
+    animation: jkl-downcount-u12odqd var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uuk6hho {
+  @keyframes jkl-downcount-u12odqd {
     from {
       width: 100%;
     }
@@ -2651,12 +2660,12 @@
     --jkl-icon-size: 1.2em;
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uuk6hhz 0.25s ease-out;
+    animation: jkl-show-u12odqm 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uuk6hhz {
+  @keyframes jkl-show-u12odqm {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2871,7 +2880,7 @@
     --background-color: var(--jkl-color-background-alert-success);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uuk6hiy 400ms ease-in-out forwards;
+    animation: jkl-dismiss-u12odqu 400ms ease-in-out forwards;
     transition: visibility 0ms 400ms;
     visibility: hidden;
   }
@@ -2893,7 +2902,7 @@
   .jkl-form-error-message {
     padding-bottom: calc(var(--jkl-unit-base) * 5);
   }
-  @keyframes jkl-dismiss-uuk6hiy {
+  @keyframes jkl-dismiss-u12odqu {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -3328,7 +3337,7 @@
     transition-timing-function: ease;
     transition-duration: 100ms;
     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);
@@ -3958,6 +3967,225 @@
   border-block-end: var(--separator);
 }
 
+@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: var(--jkl-color-background-input-base);
+    --border-color: var(--jkl-color-border-input);
+    --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-size: var(--jkl-font-size-3);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    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-input-focus);
+  }
+  .jkl-number-input__wrapper[data-invalid=true]: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:hover, .jkl-number-input__wrapper:focus-within, .jkl-number-input__wrapper:has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-input-focus);
+    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-action);
+    outline-offset: 3px;
+  }
+  .jkl-number-input__wrapper > .jkl-icon-button:focus-visible {
+    outline: 3px solid var(--jkl-color-border-action);
+    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-interactive-hover);
+  }
+  @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-action);
+    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-size: var(--jkl-font-size-3);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+  .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: ease;
+    transition-duration: 150ms;
+    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;
+  }
+}
 @layer jokul.components {
   .jkl-pagination {
     display: flex;
@@ -4301,7 +4529,7 @@
     transition-timing-function: ease;
     transition-duration: 150ms;
   }
-  @keyframes jkl-downcount-uuk6hj4 {
+  @keyframes jkl-downcount-u12odr4 {
     from {
       width: 100%;
     }
@@ -4814,7 +5042,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uuk6hjy 400ms forwards;
+    animation: jkl-dismiss-u12ods5 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -4844,7 +5072,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uuk6hjy {
+  @keyframes jkl-dismiss-u12ods5 {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5681,12 +5909,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-uuk6hk0 200ms ease-out forwards;
+    animation: jkl-entering-u12odsd 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uuk6hkt 150ms ease-in forwards;
+    animation: jkl-exiting-u12odsx 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-uuk6hk0 {
+  @keyframes jkl-entering-u12odsd {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5696,7 +5924,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uuk6hkt {
+  @keyframes jkl-exiting-u12odsx {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);