@fremtind/jokul 6.1.0 → 6.1.2

package/styles/components/tag/tag.css

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

package/styles/components/tag/tag.min.css

@@ -1 +1 @@
-.jkl-tag{--padding:var(--jkl-unit-02) var(--jkl-unit-10);--gap:var(--jkl-unit-05);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-subdued);font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);background-color:var(--background-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:.25rem;display:inline-flex;align-items:center;white-space:nowrap;padding:var(--padding);gap:var(--gap)}.jkl-tag--info{--background-color:var(--jkl-color-info-background-container-accent);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-tag--warning{--background-color:var(--jkl-color-warning-background-container-accent);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-tag--error{--background-color:var(--jkl-color-error-background-container-accent);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-tag--success{--background-color:var(--jkl-color-success-background-container-accent);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}@media screen and (forced-colors:active){.jkl-tag{border:2px CanvasText;border-style:none none dotted}.jkl-tag--info{border-style:dotted}.jkl-tag--warning{border-style:dashed}.jkl-tag--error{border-style:double;border-width:4px}.jkl-tag--success{border-style:solid}}
+.jkl-tag{--padding:var(--jkl-unit-02) var(--jkl-unit-10);--gap:var(--jkl-unit-05);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-subdued);font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);background-color:var(--background-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:.25rem;display:inline-flex;inline-size:-webkit-fit-content;inline-size:fit-content;align-items:center;white-space:nowrap;padding:var(--padding);gap:var(--gap)}.jkl-tag--info{--background-color:var(--jkl-color-info-background-container-accent);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-tag--warning{--background-color:var(--jkl-color-warning-background-container-accent);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-tag--error{--background-color:var(--jkl-color-error-background-container-accent);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-tag--success{--background-color:var(--jkl-color-success-background-container-accent);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}@media screen and (forced-colors:active){.jkl-tag{border:2px CanvasText;border-style:none none dotted}.jkl-tag--info{border-style:dotted}.jkl-tag--warning{border-style:dashed}.jkl-tag--error{border-style:double;border-width:4px}.jkl-tag--success{border-style:solid}}

package/styles/components/tag/tag.scss

@@ -17,6 +17,7 @@
     border: 1px solid var(--border-color);
     border-radius: jkl.rem(4px);
     display: inline-flex;
+    inline-size: fit-content;
     align-items: center;
     white-space: nowrap;
     padding: var(--padding);

package/styles/components/toast/toast.css

@@ -161,12 +161,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-ub1xt5t var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-u0l9a7q var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-ub1xt6b var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-u0l9a8o var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-ub1xt5t {
+  @keyframes jkl-entering-u0l9a7q {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -176,7 +176,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-ub1xt6b {
+  @keyframes jkl-exiting-u0l9a8o {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-toast-region{z-index:10000;background:#0000;display:flex;justify-content:center;position:fixed;bottom:var(--jkl-unit-30);right:0;left:0;width:100%;pointer-events:none}.jkl-toast-region__toasts{min-width:18rem;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:var(--jkl-unit-20)}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:#0000;--jkl-toast-padding:var(--jkl-unit-20);color:var(--text-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;align-items:start;overflow:hidden;width:clamp(15em,100%,min(30rem,85vw));padding:var(--jkl-toast-padding);position:relative;font:var(--jkl-text-style-paragraph-medium)}.jkl-toast__progress{position:absolute;inset:0 0 auto}.jkl-toast .jkl-countdown{--track-color:#0000;--bar-color:var(--jkl-color-background-contrast);border-radius:0}@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-grow:1;flex-basis:100vw}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font:var(--jkl-text-style-heading-5)}.jkl-toast__dismiss-button{background-color:initial;padding:0;color:inherit}@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:"";position:absolute;inset:calc((var(--tap-size) - 100%)/2*-1)}.jkl-toast--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-toast--info .jkl-countdown{--bar-color:var(--jkl-color-info-background-contrast)}.jkl-toast--info .jkl-toast__icon{color:var(--jkl-color-info-background-contrast)}.jkl-toast--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-toast--warning .jkl-countdown{--bar-color:var(--jkl-color-warning-background-contrast)}.jkl-toast--warning .jkl-toast__icon{color:var(--jkl-color-warning-background-contrast)}.jkl-toast--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-toast--error .jkl-countdown{--bar-color:var(--jkl-color-error-background-contrast)}.jkl-toast--error .jkl-toast__icon{color:var(--jkl-color-error-background-contrast)}.jkl-toast--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}.jkl-toast--success .jkl-countdown{--bar-color:var(--jkl-color-success-background-contrast)}.jkl-toast--success .jkl-toast__icon{color:var(--jkl-color-success-background-contrast)}@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-ub1xt5t var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-ub1xt6b var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-ub1xt5t{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-ub1xt6b{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
+@layer jokul.components{.jkl-toast-region{z-index:10000;background:#0000;display:flex;justify-content:center;position:fixed;bottom:var(--jkl-unit-30);right:0;left:0;width:100%;pointer-events:none}.jkl-toast-region__toasts{min-width:18rem;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:var(--jkl-unit-20)}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:#0000;--jkl-toast-padding:var(--jkl-unit-20);color:var(--text-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;align-items:start;overflow:hidden;width:clamp(15em,100%,min(30rem,85vw));padding:var(--jkl-toast-padding);position:relative;font:var(--jkl-text-style-paragraph-medium)}.jkl-toast__progress{position:absolute;inset:0 0 auto}.jkl-toast .jkl-countdown{--track-color:#0000;--bar-color:var(--jkl-color-background-contrast);border-radius:0}@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-grow:1;flex-basis:100vw}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font:var(--jkl-text-style-heading-5)}.jkl-toast__dismiss-button{background-color:initial;padding:0;color:inherit}@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:"";position:absolute;inset:calc((var(--tap-size) - 100%)/2*-1)}.jkl-toast--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-toast--info .jkl-countdown{--bar-color:var(--jkl-color-info-background-contrast)}.jkl-toast--info .jkl-toast__icon{color:var(--jkl-color-info-background-contrast)}.jkl-toast--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-toast--warning .jkl-countdown{--bar-color:var(--jkl-color-warning-background-contrast)}.jkl-toast--warning .jkl-toast__icon{color:var(--jkl-color-warning-background-contrast)}.jkl-toast--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-toast--error .jkl-countdown{--bar-color:var(--jkl-color-error-background-contrast)}.jkl-toast--error .jkl-toast__icon{color:var(--jkl-color-error-background-contrast)}.jkl-toast--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}.jkl-toast--success .jkl-countdown{--bar-color:var(--jkl-color-success-background-contrast)}.jkl-toast--success .jkl-toast__icon{color:var(--jkl-color-success-background-contrast)}@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-u0l9a7q var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-u0l9a8o var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-u0l9a7q{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-u0l9a8o{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}

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-ufbqplk forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uvtehqq 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-ufbqplk {
+  @keyframes jkl-support-icon-entrance-uvtehqq {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -839,22 +839,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-ufbqply;
+    animation-name: jkl-loader-left-spin-uvtehr2;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-ufbqpmd;
+    animation-name: jkl-loader-middle-spin-uvtehs2;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-ufbqpn6;
+    animation-name: jkl-loader-right-spin-uvtehsr;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-ufbqply {
+  @keyframes jkl-loader-left-spin-uvtehr2 {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -868,7 +868,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-ufbqpmd {
+  @keyframes jkl-loader-middle-spin-uvtehs2 {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -885,7 +885,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-ufbqpn6 {
+  @keyframes jkl-loader-right-spin-uvtehsr {
     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-ufbqpnf;
+      animation: 2s ease infinite jkl-blink-uvtehtq;
     }
   }
   .jkl-skeleton-input {
@@ -973,10 +973,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-ufbqpnf;
+      animation: 2s ease-in-out infinite jkl-blink-uvtehtq;
     }
   }
-  @keyframes jkl-blink-ufbqpnf {
+  @keyframes jkl-blink-uvtehtq {
     0% {
       opacity: 1;
     }
@@ -998,10 +998,10 @@
 }
 @layer jokul.components {
   .jkl-card {
-    --padding-s: var(--jkl-unit-05);
-    --padding-m: var(--jkl-unit-15);
-    --padding-l: var(--jkl-unit-20);
-    --padding-xl: var(--jkl-unit-30);
+    --padding-s: var(--jkl-unit-10);
+    --padding-m: var(--jkl-unit-20);
+    --padding-l: var(--jkl-unit-30);
+    --padding-xl: var(--jkl-unit-40);
     --border-radius: var(--jkl-border-radius-m);
     --border-color: transparent;
     --border-width: 0.0625rem;
@@ -1027,14 +1027,6 @@
     transition-duration: var(--jkl-motion-timing-snappy);
     transition-property: border-color, border-size;
   }
-  @media (min-width: 680px) {
-    .jkl-card {
-      --padding-s: var(--jkl-unit-10);
-      --padding-m: var(--jkl-unit-20);
-      --padding-l: var(--jkl-unit-30);
-      --padding-xl: var(--jkl-unit-40);
-    }
-  }
   .jkl-card[data-padding=s] {
     --padding: var(--padding-s);
   }
@@ -1058,14 +1050,14 @@
     line-height: inherit;
     text-align: inherit;
   }
-  .jkl-card[data-clickable=true], .jkl-card:is(a, button:not(disabled)) {
+  .jkl-card[data-clickable=true], .jkl-card:is(a, button:not(:disabled)) {
     cursor: pointer;
   }
-  .jkl-card[data-clickable=true]:hover, .jkl-card:is(a, button:not(disabled)):hover {
+  .jkl-card[data-clickable=true]:hover, .jkl-card:is(a, button:not(:disabled)):hover {
     --border-color: var(--jkl-color-border-strong);
     --border-width: 0.125rem;
   }
-  .jkl-card[data-clickable=true]:focus-visible, .jkl-card:is(a, button:not(disabled)):focus-visible {
+  .jkl-card[data-clickable=true]:focus-visible, .jkl-card:is(a, button:not(:disabled)):focus-visible {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
@@ -1127,6 +1119,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);
@@ -2131,10 +2124,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-ufbqpno var(--duration) linear forwards;
+    animation: jkl-downcount-uvtehur var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-ufbqpno {
+  @keyframes jkl-downcount-uvtehur {
     from {
       width: 100%;
     }
@@ -3555,12 +3548,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-ufbqpo5 0.25s ease-out;
+    animation: jkl-show-uvtehvd 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-ufbqpo5 {
+  @keyframes jkl-show-uvtehvd {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -3772,7 +3765,7 @@
     --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-ufbqpou var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-uvtehwc var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -3794,7 +3787,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-ufbqpou {
+  @keyframes jkl-dismiss-uvtehwc {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -5097,7 +5090,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-ufbqppb {
+  @keyframes jkl-downcount-uvtehwu {
     from {
       width: 100%;
     }
@@ -5337,7 +5330,7 @@
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-ufbqpr2 var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uvtehxr var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -5375,7 +5368,7 @@
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-ufbqpr2 {
+  @keyframes jkl-dismiss-uvtehxr {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5727,12 +5720,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-ufbqprn var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-uvtehy2 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-ufbqpsa var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-uvtehya var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-ufbqprn {
+  @keyframes jkl-entering-uvtehy2 {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5742,7 +5735,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-ufbqpsa {
+  @keyframes jkl-exiting-uvtehya {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);