@fremtind/jokul 6.0.0 → 6.1.0-next.1

package/styles/components.css

@@ -425,7 +425,7 @@
     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-unb8laj forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-ug6fz8j forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -479,7 +479,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-unb8laj {
+  @keyframes jkl-support-icon-entrance-ug6fz8j {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -839,22 +839,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-unb8lbd;
+    animation-name: jkl-loader-left-spin-ug6fz8x;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-unb8lbe;
+    animation-name: jkl-loader-middle-spin-ug6fz9p;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-unb8lc4;
+    animation-name: jkl-loader-right-spin-ug6fzap;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-unb8lbd {
+  @keyframes jkl-loader-left-spin-ug6fz8x {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -868,7 +868,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-unb8lbe {
+  @keyframes jkl-loader-middle-spin-ug6fz9p {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -885,7 +885,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-unb8lc4 {
+  @keyframes jkl-loader-right-spin-ug6fzap {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -925,7 +925,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-unb8lcs;
+      animation: 2s ease infinite jkl-blink-ug6fzb9;
     }
   }
   .jkl-skeleton-input {
@@ -973,10 +973,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-unb8lcs;
+      animation: 2s ease-in-out infinite jkl-blink-ug6fzb9;
     }
   }
-  @keyframes jkl-blink-unb8lcs {
+  @keyframes jkl-blink-ug6fzb9 {
     0% {
       opacity: 1;
     }
@@ -1127,6 +1127,7 @@
   border: 1px solid var(--border-color);
   border-radius: 0.25rem;
   display: inline-flex;
+  inline-size: fit-content;
   align-items: center;
   white-space: nowrap;
   padding: var(--padding);
@@ -1333,27 +1334,18 @@
     font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-input-panel__description {
-    height: 0;
-    overflow: hidden;
     padding-inline: var(--padding-inline);
-    padding-block-end: var(--jkl-spacing-none);
+    padding-block-end: var(--jkl-unit-20);
     line-height: initial;
     font: var(--jkl-text-style-paragraph-medium);
-    transition-timing-function: var(--jkl-motion-easing-standard);
-    transition-duration: var(--jkl-motion-timing-productive);
-    transition-property: height;
   }
   .jkl-input-panel:has(:focus-visible) {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
-  .jkl-input-panel:has(:checked), .jkl-input-panel[data-always-open=true], .jkl-input-panel:not([data-always-open]) {
+  .jkl-input-panel:has(:checked) {
     --background-color: var(--jkl-color-background-container);
   }
-  .jkl-input-panel:has(:checked) .jkl-input-panel__description, .jkl-input-panel[data-always-open=true] .jkl-input-panel__description, .jkl-input-panel:not([data-always-open]) .jkl-input-panel__description {
-    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);
   }
@@ -2140,10 +2132,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-unb8ldw var(--duration) linear forwards;
+    animation: jkl-downcount-ug6fzbp var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-unb8ldw {
+  @keyframes jkl-downcount-ug6fzbp {
     from {
       width: 100%;
     }
@@ -3564,12 +3556,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-unb8lew 0.25s ease-out;
+    animation: jkl-show-ug6fzbx 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-unb8lew {
+  @keyframes jkl-show-ug6fzbx {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -3781,7 +3773,7 @@
     --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-unb8lfk var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-ug6fzby var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -3803,7 +3795,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-unb8lfk {
+  @keyframes jkl-dismiss-ug6fzby {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -4945,17 +4937,19 @@
   }
 }
 .jkl-navlink--beta {
-  --border-radius: 4px;
-  --separator: 1px solid var(--jkl-color-border-subdued);
+  --background-color: var(--jkl-color-background-container);
+  --border-color: transparent;
+  --border-radius: var(--jkl-border-radius-s);
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   column-gap: 2em;
   color: inherit;
   text-decoration: none;
-  background-color: var(--jkl-color-background-page);
+  background-color: var(--background-color);
   padding: var(--jkl-spacing-s);
-  border-radius: 0;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
   font: var(--jkl-text-style-paragraph-medium);
   transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
   transition-duration: var(--jkl-motion-timing-productive);
@@ -4990,22 +4984,19 @@
   transition-duration: var(--jkl-motion-timing-productive);
   transition-property: translate;
 }
+.jkl-navlink--beta[data-outlined=true] {
+  --background-color: transparent;
+  --border-color: var(--jkl-color-border-subdued);
+}
 .jkl-navlink--beta:hover, .jkl-navlink--beta:focus-visible {
-  background-color: color-mix(in srgb, currentColor 15%, transparent);
+  background-color: var(--jkl-color-background-container-accent);
 }
 .jkl-navlink--beta:hover::after, .jkl-navlink--beta:focus-visible::after {
   translate: 4px 0;
 }
-.jkl-navlink--beta:first-of-type {
-  border-start-start-radius: var(--border-radius);
-  border-start-end-radius: var(--border-radius);
-}
-.jkl-navlink--beta:last-of-type {
-  border-end-start-radius: var(--border-radius);
-  border-end-end-radius: var(--border-radius);
-}
-.jkl-navlink--beta:has(+ .jkl-navlink--beta) {
-  border-block-end: var(--separator);
+.jkl-navlink--beta:focus-visible {
+  outline: 3px solid var(--jkl-color-border-strong);
+  outline-offset: 3px;
 }
 
 @layer jokul.components {
@@ -5107,7 +5098,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-unb8lfm {
+  @keyframes jkl-downcount-ug6fzc9 {
     from {
       width: 100%;
     }
@@ -5347,7 +5338,7 @@
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-unb8lgi var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-ug6fzdj var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -5385,7 +5376,7 @@
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-unb8lgi {
+  @keyframes jkl-dismiss-ug6fzdj {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5737,12 +5728,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-unb8lhe var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-ug6fze7 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-unb8lib var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-ug6fzes var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-unb8lhe {
+  @keyframes jkl-entering-ug6fze7 {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5752,7 +5743,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-unb8lib {
+  @keyframes jkl-exiting-ug6fzes {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);