@fremtind/jokul 5.0.3 → 5.0.5

package/styles/components.css

@@ -244,29 +244,31 @@
   .jkl-icon--animated {
     display: block;
   }
-  .jkl-icon-red-cross {
-    --red-cross-circle: var(--jkl-color-error-background-contrast);
-    --red-cross-path: var(--jkl-color-error-text-on-contrast);
+  .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;
   }
-  .jkl-icon-red-cross path {
-    fill: var(--red-cross-path);
+  @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 circle {
-    fill: var(--red-cross-circle);
+  .jkl-icon-red-cross {
+    background-color: var(--jkl-color-error-background-contrast);
+    color: var(--jkl-color-error-text-on-contrast);
   }
   .jkl-icon-green-check {
-    --green-check-circle: var(--jkl-color-success-background-contrast);
-    --green-check-path: var(--jkl-color-success-text-on-contrast);
-    width: 1.3em;
-    height: 1.3em;
-  }
-  .jkl-icon-green-check path {
-    fill: var(--green-check-path);
-  }
-  .jkl-icon-green-check circle {
-    fill: var(--green-check-circle);
+    background-color: var(--jkl-color-success-background-contrast);
+    color: var(--jkl-color-success-text-on-contrast);
   }
   .jkl-animated-horizontal-arrows,
   .jkl-animated-vertical-arrows {
@@ -431,7 +433,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: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u2cy78g forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uumgn13 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -485,7 +487,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-u2cy78g {
+  @keyframes jkl-support-icon-entrance-uumgn13 {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -538,6 +540,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);
@@ -844,22 +847,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-u2cy79c;
+    animation-name: jkl-loader-left-spin-uumgn1i;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-u2cy79d;
+    animation-name: jkl-loader-middle-spin-uumgn1z;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-u2cy7a7;
+    animation-name: jkl-loader-right-spin-uumgn2n;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-u2cy79c {
+  @keyframes jkl-loader-left-spin-uumgn1i {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -873,7 +876,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-u2cy79d {
+  @keyframes jkl-loader-middle-spin-uumgn1z {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -890,7 +893,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-u2cy7a7 {
+  @keyframes jkl-loader-right-spin-uumgn2n {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -930,7 +933,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-u2cy7at;
+      animation: 2s ease infinite jkl-blink-uumgn2s;
     }
   }
   .jkl-skeleton-input {
@@ -978,10 +981,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u2cy7at;
+      animation: 2s ease-in-out infinite jkl-blink-uumgn2s;
     }
   }
-  @keyframes jkl-blink-u2cy7at {
+  @keyframes jkl-blink-uumgn2s {
     0% {
       opacity: 1;
     }
@@ -1294,7 +1297,6 @@
   .jkl-input-panel__header .jkl-checkbox {
     grid-column: 1/-1;
     grid-row: 1;
-    inline-size: 100%;
   }
   .jkl-input-panel__header label {
     inline-size: 100%;
@@ -2120,10 +2122,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u2cy7bj var(--duration) linear forwards;
+    animation: jkl-downcount-uumgn3u var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u2cy7bj {
+  @keyframes jkl-downcount-uumgn3u {
     from {
       width: 100%;
     }
@@ -2624,12 +2626,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-u2cy7c5 0.25s ease-out;
+    animation: jkl-show-uumgn4b 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-u2cy7c5 {
+  @keyframes jkl-show-uumgn4b {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2841,7 +2843,7 @@
     --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-u2cy7cv var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-uumgn4l var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -2863,7 +2865,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-u2cy7cv {
+  @keyframes jkl-dismiss-uumgn4l {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -3500,7 +3502,7 @@
     padding: 0;
     margin: 0;
     height: min-content;
-    border-radius: var(--jkl-unit-05);
+    border-radius: var(--jkl-border-radius-s);
     overflow: hidden;
     background-color: var(--background);
   }
@@ -3637,7 +3639,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);
@@ -3721,9 +3723,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;
@@ -4249,14 +4252,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;
@@ -4319,8 +4316,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);
@@ -4464,7 +4459,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-u2cy7db {
+  @keyframes jkl-downcount-uumgn5e {
     from {
       width: 100%;
     }
@@ -4958,7 +4953,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u2cy7eq var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uumgn6x var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -4996,7 +4991,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u2cy7eq {
+  @keyframes jkl-dismiss-uumgn6x {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5824,12 +5819,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-u2cy7fk var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-uumgn7v var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-u2cy7g2 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-uumgn84 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-u2cy7fk {
+  @keyframes jkl-entering-uumgn7v {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5839,7 +5834,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-u2cy7g2 {
+  @keyframes jkl-exiting-uumgn84 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -7507,11 +7502,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);
+    border-radius: var(--jkl-border-radius-s);
     anchor-name: --help-box;
   }
   .jkl-help-popover[data-position=top] {