@fremtind/jokul 4.1.2 → 4.1.3

package/styles/components/toast/toast.css

@@ -135,12 +135,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-ug3sokg 200ms ease-out forwards;
+    animation: jkl-entering-uqcgchv 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-ug3soks 150ms ease-in forwards;
+    animation: jkl-exiting-uqcgci2 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-ug3sokg {
+  @keyframes jkl-entering-uqcgchv {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -150,7 +150,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-ug3soks {
+  @keyframes jkl-exiting-uqcgci2 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);

package/styles/components/toast/toast.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw));--jkl-icon-weight:300}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-ug3sokg .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-ug3soks .15s ease-in forwards}@keyframes jkl-entering-ug3sokg{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-ug3soks{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
+@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw));--jkl-icon-weight:300}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-uqcgchv .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uqcgci2 .15s ease-in forwards}@keyframes jkl-entering-uqcgchv{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uqcgci2{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}

package/styles/styles.css

@@ -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-u6ii6b2 forwards;
+    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uk5k8s2 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-u6ii6b2 {
+  @keyframes jkl-support-icon-entrance-uk5k8s2 {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -888,22 +888,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-u6ii6bl;
+    animation-name: jkl-loader-left-spin-uk5k8sz;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-u6ii6ck;
+    animation-name: jkl-loader-middle-spin-uk5k8ti;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-u6ii6co;
+    animation-name: jkl-loader-right-spin-uk5k8tv;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-u6ii6bl {
+  @keyframes jkl-loader-left-spin-uk5k8sz {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -917,7 +917,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-u6ii6ck {
+  @keyframes jkl-loader-middle-spin-uk5k8ti {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -934,7 +934,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-u6ii6co {
+  @keyframes jkl-loader-right-spin-uk5k8tv {
     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-u6ii6db;
+      animation: 2s ease infinite jkl-blink-uk5k8tz;
     }
   }
   .jkl-skeleton-input {
@@ -1022,10 +1022,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u6ii6db;
+      animation: 2s ease-in-out infinite jkl-blink-uk5k8tz;
     }
   }
-  @keyframes jkl-blink-u6ii6db {
+  @keyframes jkl-blink-uk5k8tz {
     0% {
       opacity: 1;
     }
@@ -1688,7 +1688,6 @@
     top: calc(100% - 1px);
     overflow-y: auto;
     position: absolute;
-    color: var(--jkl-color-text-default);
     z-index: 7000;
     left: -0.0625rem;
     right: -0.0625rem;
@@ -1708,6 +1707,7 @@
     display: flex;
     align-items: center;
     border: 0;
+    color: var(--jkl-color-text-default);
     background-color: var(--jkl-color-background-interactive);
     transition-property: color, background-color;
     cursor: pointer;
@@ -2012,10 +2012,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u6ii6en var(--duration) linear forwards;
+    animation: jkl-downcount-uk5k8u9 var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u6ii6en {
+  @keyframes jkl-downcount-uk5k8u9 {
     from {
       width: 100%;
     }
@@ -2508,12 +2508,12 @@
     --jkl-icon-size: 1.2em;
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-u6ii6f7 0.25s ease-out;
+    animation: jkl-show-uk5k8ue 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-u6ii6f7 {
+  @keyframes jkl-show-uk5k8ue {
     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-u6ii6fs 400ms ease-in-out forwards;
+    animation: jkl-dismiss-uk5k8uf 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-u6ii6fs {
+  @keyframes jkl-dismiss-uk5k8uf {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -4100,7 +4100,7 @@
     transition-timing-function: ease;
     transition-duration: 150ms;
   }
-  @keyframes jkl-downcount-u6ii6gf {
+  @keyframes jkl-downcount-uk5k8uz {
     from {
       width: 100%;
     }
@@ -4610,7 +4610,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u6ii6ha 400ms forwards;
+    animation: jkl-dismiss-uk5k8w7 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -4640,7 +4640,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u6ii6ha {
+  @keyframes jkl-dismiss-uk5k8w7 {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5477,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-u6ii6i8 200ms ease-out forwards;
+    animation: jkl-entering-uk5k8we 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-u6ii6iq 150ms ease-in forwards;
+    animation: jkl-exiting-uk5k8x7 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-u6ii6i8 {
+  @keyframes jkl-entering-uk5k8we {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5492,7 +5492,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-u6ii6iq {
+  @keyframes jkl-exiting-uk5k8x7 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);