@fremtind/jokul 4.1.0 → 4.1.2

package/styles/core/jkl/legacy/_tokens.scss

@@ -3,6 +3,15 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+$border-width-1: 0.0625rem !default;
+$border-width-2: 0.125rem !default;
+$border-width-3: 0.1875rem !default;
+$border-radius-none: 0 !default;
+$border-radius-xs: 0.25rem !default;
+$border-radius-s: 0.5rem !default;
+$border-radius-m: 0.75rem !default;
+$border-radius-l: 1rem !default;
+$border-radius-full: 9999px !default;
 $breakpoint-small: 0 !default;
 $breakpoint-medium: 680px !default;
 $breakpoint-large: 1200px !default;
@@ -157,22 +166,22 @@ $typography-style-heading-5-base-font-size: var(--jkl-font-size-4) !default;
 $typography-style-heading-5-base-line-height: var(--jkl-line-height-tight) !default;
 $typography-style-heading-5-base-font-weight: 700 !default;
 $typography-style-paragraph-large-small-font-size: var(--jkl-font-size-5) !default;
-$typography-style-paragraph-large-small-line-height: var(--jkl-line-height-tight) !default;
+$typography-style-paragraph-large-small-line-height: var(--jkl-line-height-relaxed) !default;
 $typography-style-paragraph-large-small-font-weight: 400 !default;
 $typography-style-paragraph-large-base-font-size: var(--jkl-font-size-5) !default;
-$typography-style-paragraph-large-base-line-height: var(--jkl-line-height-tight) !default;
+$typography-style-paragraph-large-base-line-height: var(--jkl-line-height-relaxed) !default;
 $typography-style-paragraph-large-base-font-weight: 400 !default;
 $typography-style-paragraph-medium-small-font-size: var(--jkl-font-size-3) !default;
-$typography-style-paragraph-medium-small-line-height: var(--jkl-line-height-tight) !default;
+$typography-style-paragraph-medium-small-line-height: var(--jkl-line-height-relaxed) !default;
 $typography-style-paragraph-medium-small-font-weight: 400 !default;
 $typography-style-paragraph-medium-base-font-size: var(--jkl-font-size-3) !default;
-$typography-style-paragraph-medium-base-line-height: var(--jkl-line-height-tight) !default;
+$typography-style-paragraph-medium-base-line-height: var(--jkl-line-height-relaxed) !default;
 $typography-style-paragraph-medium-base-font-weight: 400 !default;
 $typography-style-paragraph-small-small-font-size: var(--jkl-font-size-2) !default;
-$typography-style-paragraph-small-small-line-height: var(--jkl-line-height-tight) !default;
+$typography-style-paragraph-small-small-line-height: var(--jkl-line-height-relaxed) !default;
 $typography-style-paragraph-small-small-font-weight: 400 !default;
 $typography-style-paragraph-small-base-font-size: var(--jkl-font-size-2) !default;
-$typography-style-paragraph-small-base-line-height: var(--jkl-line-height-tight) !default;
+$typography-style-paragraph-small-base-line-height: var(--jkl-line-height-relaxed) !default;
 $typography-style-paragraph-small-base-font-weight: 400 !default;
 $typography-style-text-large-small-font-size: var(--jkl-font-size-5) !default;
 $typography-style-text-large-small-line-height: var(--jkl-line-height-tight) !default;
@@ -266,6 +275,21 @@ $typography-small-base-line-height: 1.5rem !default;
 $typography-small-base-font-weight: 400 !default;
 
 $tokens: (
+  'border': (
+    'width': (
+      '1': $border-width-1,
+      '2': $border-width-2,
+      '3': $border-width-3
+    ),
+    'radius': (
+      'none': $border-radius-none,
+      'xs': $border-radius-xs,
+      's': $border-radius-s,
+      'm': $border-radius-m,
+      'l': $border-radius-l,
+      'full': $border-radius-full
+    )
+  ),
   'breakpoint': (
     'small': $breakpoint-small,
     'medium': $breakpoint-medium,

package/styles/core/theme/_legacy-tokens.scss

@@ -5,6 +5,15 @@
 
 @layer jokul.theme {
     :root {
+        --jkl-border-width-1: 0.0625rem;
+        --jkl-border-width-2: 0.125rem;
+        --jkl-border-width-3: 0.1875rem;
+        --jkl-border-radius-none: 0;
+        --jkl-border-radius-xs: 0.25rem;
+        --jkl-border-radius-s: 0.5rem;
+        --jkl-border-radius-m: 0.75rem;
+        --jkl-border-radius-l: 1rem;
+        --jkl-border-radius-full: 9999px;
         --jkl-breakpoint-small: 0;
         --jkl-breakpoint-medium: 680px;
         --jkl-breakpoint-large: 1200px;
@@ -159,22 +168,22 @@
         --jkl-typography-style-heading-5-base-line-height: var(--jkl-line-height-tight);
         --jkl-typography-style-heading-5-base-font-weight: 700;
         --jkl-typography-style-paragraph-large-small-font-size: var(--jkl-font-size-5);
-        --jkl-typography-style-paragraph-large-small-line-height: var(--jkl-line-height-tight);
+        --jkl-typography-style-paragraph-large-small-line-height: var(--jkl-line-height-relaxed);
         --jkl-typography-style-paragraph-large-small-font-weight: 400;
         --jkl-typography-style-paragraph-large-base-font-size: var(--jkl-font-size-5);
-        --jkl-typography-style-paragraph-large-base-line-height: var(--jkl-line-height-tight);
+        --jkl-typography-style-paragraph-large-base-line-height: var(--jkl-line-height-relaxed);
         --jkl-typography-style-paragraph-large-base-font-weight: 400;
         --jkl-typography-style-paragraph-medium-small-font-size: var(--jkl-font-size-3);
-        --jkl-typography-style-paragraph-medium-small-line-height: var(--jkl-line-height-tight);
+        --jkl-typography-style-paragraph-medium-small-line-height: var(--jkl-line-height-relaxed);
         --jkl-typography-style-paragraph-medium-small-font-weight: 400;
         --jkl-typography-style-paragraph-medium-base-font-size: var(--jkl-font-size-3);
-        --jkl-typography-style-paragraph-medium-base-line-height: var(--jkl-line-height-tight);
+        --jkl-typography-style-paragraph-medium-base-line-height: var(--jkl-line-height-relaxed);
         --jkl-typography-style-paragraph-medium-base-font-weight: 400;
         --jkl-typography-style-paragraph-small-small-font-size: var(--jkl-font-size-2);
-        --jkl-typography-style-paragraph-small-small-line-height: var(--jkl-line-height-tight);
+        --jkl-typography-style-paragraph-small-small-line-height: var(--jkl-line-height-relaxed);
         --jkl-typography-style-paragraph-small-small-font-weight: 400;
         --jkl-typography-style-paragraph-small-base-font-size: var(--jkl-font-size-2);
-        --jkl-typography-style-paragraph-small-base-line-height: var(--jkl-line-height-tight);
+        --jkl-typography-style-paragraph-small-base-line-height: var(--jkl-line-height-relaxed);
         --jkl-typography-style-paragraph-small-base-font-weight: 400;
         --jkl-typography-style-text-large-small-font-size: var(--jkl-font-size-5);
         --jkl-typography-style-text-large-small-line-height: var(--jkl-line-height-tight);

package/styles/shared/input/shared-input-styles.scss

@@ -9,7 +9,7 @@
     --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);
+    --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);

package/styles/styles.css

@@ -81,7 +81,7 @@
     --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);
+    --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);
@@ -468,7 +468,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-uai7f53 forwards;
+    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u6ii6b2 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -536,7 +536,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uai7f53 {
+  @keyframes jkl-support-icon-entrance-u6ii6b2 {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -888,22 +888,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uai7f5e;
+    animation-name: jkl-loader-left-spin-u6ii6bl;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uai7f5r;
+    animation-name: jkl-loader-middle-spin-u6ii6ck;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uai7f5y;
+    animation-name: jkl-loader-right-spin-u6ii6co;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uai7f5e {
+  @keyframes jkl-loader-left-spin-u6ii6bl {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -917,7 +917,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uai7f5r {
+  @keyframes jkl-loader-middle-spin-u6ii6ck {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -934,7 +934,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uai7f5y {
+  @keyframes jkl-loader-right-spin-u6ii6co {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -974,7 +974,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uai7f60;
+      animation: 2s ease infinite jkl-blink-u6ii6db;
     }
   }
   .jkl-skeleton-input {
@@ -1022,10 +1022,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uai7f60;
+      animation: 2s ease-in-out infinite jkl-blink-u6ii6db;
     }
   }
-  @keyframes jkl-blink-uai7f60 {
+  @keyframes jkl-blink-u6ii6db {
     0% {
       opacity: 1;
     }
@@ -1513,7 +1513,7 @@
     --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);
+    --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);
@@ -2012,10 +2012,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uai7f77 var(--duration) linear forwards;
+    animation: jkl-downcount-u6ii6en var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uai7f77 {
+  @keyframes jkl-downcount-u6ii6en {
     from {
       width: 100%;
     }
@@ -2508,12 +2508,12 @@
     --jkl-icon-size: 1.2em;
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uai7f7r 0.25s ease-out;
+    animation: jkl-show-u6ii6f7 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uai7f7r {
+  @keyframes jkl-show-u6ii6f7 {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2730,7 +2730,7 @@
     --background-color: var(--jkl-color-background-alert-success);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uai7f8j 400ms ease-in-out forwards;
+    animation: jkl-dismiss-u6ii6fs 400ms ease-in-out forwards;
     transition: visibility 0ms 400ms;
     visibility: hidden;
   }
@@ -2752,7 +2752,7 @@
   .jkl-form-error-message {
     padding-bottom: calc(var(--jkl-unit-base) * 5);
   }
-  @keyframes jkl-dismiss-uai7f8j {
+  @keyframes jkl-dismiss-u6ii6fs {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -2872,7 +2872,7 @@
     --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);
+    --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);
@@ -3136,6 +3136,251 @@
     max-height: 100%;
   }
 }
+@layer jokul.components {
+  .jkl-file {
+    --jkl-file-padding: var(--jkl-unit-10);
+    --jkl-file-thumbnail-width: var(--jkl-unit-70);
+    --jkl-file-thumbnail-max-height: var(--jkl-unit-90);
+    --jkl-file-thumbnail-aspect-ratio: 1;
+    --jkl-file-gap: var(--jkl-unit-10) var(--jkl-unit-20);
+    --jkl-file-button-width: var(--jkl-unit-50);
+    --text-color: var(--jkl-color-text-default);
+    --border: 1px solid var(--jkl-color-border-separator);
+    --border-radius: 2px;
+    --bg: transparent;
+    --transition-time: 250ms;
+  }
+  .jkl-file__content {
+    transition-timing-function: ease;
+    transition-duration: 100ms;
+    transition-property: background-color, border-color, color;
+    color: var(--jkl-color-text-default);
+    padding: var(--jkl-file-padding);
+    border: var(--border);
+    border-radius: var(--border-radius);
+    background: var(--bg);
+    display: grid;
+    grid-template-columns: var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);
+    grid-template-areas: "image text button";
+    gap: var(--jkl-file-gap);
+    align-items: center;
+    height: fit-content;
+  }
+  .jkl-file__content__name {
+    font-size: var(--jkl-font-size-2);
+    line-height: var(--jkl-line-height-relaxed);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+    --jkl-icon-size: 1.2em;
+    grid-area: text;
+    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
+    word-break: break-word;
+  }
+  .jkl-file__content__name__size {
+    word-break: keep-all;
+  }
+  .jkl-file__content__delete {
+    aspect-ratio: 1;
+    grid-area: button;
+  }
+  .jkl-file__content__thumbnail {
+    width: 100%;
+    aspect-ratio: var(--jkl-file-thumbnail-aspect-ratio);
+    object-fit: cover;
+    max-height: var(--jkl-file-thumbnail-max-height);
+    grid-area: image;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--jkl-color-background-container-low);
+    border-radius: 2px;
+    overflow: hidden;
+    container-type: inline-size;
+    anchor-name: --thumb;
+    anchor-scope: all;
+    outline: 1px solid color-mix(in srgb, currentColor 3%, transparent);
+  }
+  .jkl-file__content__thumbnail::before, .jkl-file__content__thumbnail::after {
+    position: absolute;
+    z-index: 1;
+  }
+  .jkl-file__content__thumbnail::after {
+    content: ""/"Laster opp";
+    position-anchor: --thumb;
+    position-area: center;
+    height: 25%;
+    border-radius: 1px;
+    aspect-ratio: 1;
+    scale: 0;
+    background: var(--text-color);
+    animation: spin 5s infinite forwards linear;
+    transition: display var(--transition-time) allow-discrete ease-in, scale var(--transition-time) ease-in;
+  }
+  @starting-style {
+    .jkl-file__content__thumbnail::after {
+      scale: 0;
+    }
+  }
+  .jkl-file__content__thumbnail img {
+    opacity: 1;
+    transition: opacity var(--transition-time) ease-in-out;
+  }
+  .jkl-file__content__thumbnail img[src] {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .jkl-file[class*=card] {
+    --jkl-file-thumbnail-width: 100%;
+    --jkl-file-thumbnail-aspect-ratio: 16/9;
+  }
+  .jkl-file[class*=card] .jkl-file__content {
+    grid-template-columns: 1fr var(--jkl-file-button-width);
+    grid-template-rows: var(--jkl-file-thumbnail-max-height) auto;
+    grid-template-areas: "image image" "text button";
+  }
+  .jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src]))::before {
+    font-size: var(--jkl-font-size-2);
+    line-height: var(--jkl-line-height-relaxed);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+    --jkl-icon-size: 1.2em;
+    content: attr(data-filetype);
+  }
+  .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img {
+    opacity: 0;
+  }
+  .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail::after {
+    display: block;
+    scale: 1;
+  }
+  .jkl-file[data-state=error] {
+    --bg: var(--jkl-color-functional-error);
+  }
+  .jkl-file[data-state=error],
+  .jkl-file[data-state=error] a,
+  .jkl-file[data-state=error] a:hover,
+  .jkl-file[data-state=error] button,
+  .jkl-file[data-state=error] span {
+    --text-color: var(--jkl-color-text-on-alert);
+    --link-color: var(--text-color);
+    --jkl-color-border-action: currentColor;
+  }
+  @keyframes spin {
+    from {
+      transform: rotate(0turn);
+    }
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}
+@layer jokul.components {
+  .jkl-file-input {
+    --jkl-file-input-dropzone-padding: var(--jkl-unit-30);
+    --jkl-file-input-dropzone-gap: var(--jkl-unit-30);
+    --jkl-file-cta-gap: var(--jkl-unit-30);
+    --jkl-file-cta-with-files-gap: var(--jkl-unit-15);
+    --jkl-file-list-gap: var(--jkl-unit-10);
+  }
+  .jkl-file-input__dropzone {
+    --border-color: var(--jkl-color-border-input);
+    --background-color: transparent;
+    border: var(--border-color) 1px dashed;
+    border-radius: 0.25rem;
+    padding: var(--jkl-file-input-dropzone-padding);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: var(--jkl-file-input-dropzone-gap);
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: background-color;
+    background-color: var(--background-color);
+  }
+  .jkl-file-input__dropzone--enter {
+    --border-color: var(--jkl-color-border-input-focus);
+    --background-color: var(--jkl-color-background-container-high);
+    border-style: solid;
+  }
+  .jkl-file-input__dropzone__drag-text {
+    font-size: var(--jkl-font-size-2);
+    line-height: var(--jkl-line-height-relaxed);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+    --jkl-icon-size: 1.2em;
+  }
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-file-input__dropzone__drag-text {
+      display: none;
+    }
+  }
+  .jkl-file-input__call-to-action {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+  .jkl-file-input__call-to-action:has(:focus-visible) .jkl-button {
+    transform: scale(1.05);
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
+  .jkl-file-input__call-to-action:has(:focus-visible) .jkl-button:active {
+    transform: scale(1);
+  }
+  .jkl-file-input__dropzone-hint {
+    margin-top: var(--jkl-unit-30);
+  }
+  .jkl-file-input--has-files .jkl-file-input__dropzone-hint {
+    display: none;
+  }
+  .jkl-file-input__max-size-text {
+    font-size: var(--jkl-font-size-2);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+    color: var(--jkl-color-text-subdued);
+    margin-top: var(--jkl-unit-30);
+  }
+  .jkl-file-input__files {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--jkl-file-list-gap);
+  }
+  .jkl-file-input--small .jkl-file-input__dropzone-hint {
+    margin: 0;
+    display: block;
+  }
+  .jkl-file-input--small .jkl-file-input__dropzone {
+    padding: var(--jkl-unit-20);
+    gap: var(--jkl-unit-20);
+    margin-bottom: var(--jkl-unit-20);
+    justify-content: flex-start;
+    flex-direction: row;
+    max-width: fit-content;
+  }
+  .jkl-file-input--small .jkl-file-input__call-to-action {
+    font-size: var(--jkl-font-size-2);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+    gap: calc(var(--jkl-unit-base) * 1.5);
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+  .jkl-file-input--small .jkl-file-input__max-size-text {
+    margin-top: calc(-1 * var(--jkl-unit-15));
+    margin-bottom: var(--jkl-unit-20);
+  }
+}
 @layer jokul.components {
   .jkl-link-list {
     --border: 1px solid var(--jkl-color-border-separator);
@@ -3855,7 +4100,7 @@
     transition-timing-function: ease;
     transition-duration: 150ms;
   }
-  @keyframes jkl-downcount-uai7f8p {
+  @keyframes jkl-downcount-u6ii6gf {
     from {
       width: 100%;
     }
@@ -4365,7 +4610,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uai7fa8 400ms forwards;
+    animation: jkl-dismiss-u6ii6ha 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -4395,7 +4640,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uai7fa8 {
+  @keyframes jkl-dismiss-u6ii6ha {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5232,12 +5477,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-uai7fb2 200ms ease-out forwards;
+    animation: jkl-entering-u6ii6i8 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uai7fbt 150ms ease-in forwards;
+    animation: jkl-exiting-u6ii6iq 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-uai7fb2 {
+  @keyframes jkl-entering-u6ii6i8 {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5247,7 +5492,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uai7fbt {
+  @keyframes jkl-exiting-u6ii6iq {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);