@fremtind/jokul 5.1.0 → 5.2.1

package/styles/components.css

@@ -69,8 +69,7 @@
 }
 @layer jokul.components {
   .jkl-text-input-wrapper {
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
-        var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
     --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
     --jkl-text-input-action-button-size: var(--jkl-unit-60);
@@ -245,31 +244,11 @@
   .jkl-icon--animated {
     display: block;
   }
-  .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;
-  }
-  @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 {
-    background-color: var(--jkl-color-error-background-contrast);
-    color: var(--jkl-color-error-text-on-contrast);
+    color: var(--jkl-color-error-background-contrast);
   }
   .jkl-icon-green-check {
-    background-color: var(--jkl-color-success-background-contrast);
-    color: var(--jkl-color-success-text-on-contrast);
+    color: var(--jkl-color-success-background-contrast);
   }
   .jkl-animated-horizontal-arrows,
   .jkl-animated-vertical-arrows {
@@ -446,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-uq1yop7 forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u3lbpkn forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -500,7 +479,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uq1yop7 {
+  @keyframes jkl-support-icon-entrance-u3lbpkn {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -860,22 +839,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uq1yoq6;
+    animation-name: jkl-loader-left-spin-u3lbplf;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uq1yoqp;
+    animation-name: jkl-loader-middle-spin-u3lbpll;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uq1yori;
+    animation-name: jkl-loader-right-spin-u3lbplm;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uq1yoq6 {
+  @keyframes jkl-loader-left-spin-u3lbplf {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -889,7 +868,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uq1yoqp {
+  @keyframes jkl-loader-middle-spin-u3lbpll {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -906,7 +885,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uq1yori {
+  @keyframes jkl-loader-right-spin-u3lbplm {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -946,7 +925,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uq1yorn;
+      animation: 2s ease infinite jkl-blink-u3lbpls;
     }
   }
   .jkl-skeleton-input {
@@ -994,10 +973,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uq1yorn;
+      animation: 2s ease-in-out infinite jkl-blink-u3lbpls;
     }
   }
-  @keyframes jkl-blink-uq1yorn {
+  @keyframes jkl-blink-u3lbpls {
     0% {
       opacity: 1;
     }
@@ -1072,14 +1051,21 @@
     --border-color: var(--jkl-color-border-subdued);
     --background-color: transparent;
   }
-  .jkl-card[data-clickable=true] {
+  .jkl-card:where(button) {
+    border: none;
+    outline: none;
+    font: inherit;
+    line-height: inherit;
+    text-align: inherit;
+  }
+  .jkl-card[data-clickable=true], .jkl-card:is(a, button:not(disabled)) {
     cursor: pointer;
   }
-  .jkl-card[data-clickable=true]: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[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;
   }
@@ -1502,8 +1488,7 @@
     display: flex;
     gap: 1ch;
     cursor: pointer;
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
-        var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
     --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
     --jkl-text-input-action-button-size: var(--jkl-unit-60);
@@ -2155,10 +2140,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uq1yot2 var(--duration) linear forwards;
+    animation: jkl-downcount-u3lbpmj var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uq1yot2 {
+  @keyframes jkl-downcount-u3lbpmj {
     from {
       width: 100%;
     }
@@ -2659,12 +2644,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uq1yotg 0.25s ease-out;
+    animation: jkl-show-u3lbpmr 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uq1yotg {
+  @keyframes jkl-show-u3lbpmr {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2876,7 +2861,7 @@
     --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uq1you8 var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-u3lbpms var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -2898,7 +2883,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-uq1you8 {
+  @keyframes jkl-dismiss-u3lbpms {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -3030,8 +3015,7 @@
 @layer jokul.components {
   .jkl-text-area-wrapper {
     overflow: hidden;
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
-        var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
     --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
     --jkl-text-input-action-button-size: var(--jkl-unit-60);
@@ -3848,8 +3832,7 @@
     align-items: flex-start;
   }
   .jkl-number-input__wrapper {
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
-        var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
     --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
     --jkl-text-input-action-button-size: var(--jkl-unit-60);
@@ -4500,7 +4483,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-uq1youi {
+  @keyframes jkl-downcount-u3lbpmy {
     from {
       width: 100%;
     }
@@ -4757,20 +4740,26 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   min-width: unset;
+  --inset-size: 1ex;
+  --separator-color: var(--jkl-color-border-subdued);
+  position: relative;
 }
 .jkl-search:has(button.jkl-search-submit) button.jkl-search-submit::before {
   content: "";
   position: absolute;
-  width: 1px;
-  inset: 0;
-  inset-block: 20%;
-  background-color: var(--jkl-color-border-subdued);
+  block-size: calc(100% * var(--inset-size));
+  top: 0;
+  left: 0;
+  inset-block: var(--inset-size);
+  border-inline-end: 1px solid var(--separator-color);
+  z-index: 1;
   transition-timing-function: var(--jkl-motion-easing-standard);
   transition-duration: var(--jkl-motion-timing-productive);
-  transition-property: inset;
+  transition-property: inset, border-color;
 }
-.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover::before {
-  inset-block: 0;
+.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover, .jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:focus-within {
+  --inset-size: 1px;
+  --separator-color: var(--jkl-color-border-subdued);
 }
 
 @layer jokul.components {
@@ -4995,7 +4984,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uq1yovm var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-u3lbpny var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -5033,7 +5022,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uq1yovm {
+  @keyframes jkl-dismiss-u3lbpny {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5861,12 +5850,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-uq1yow1 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-u3lbpox var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uq1yow6 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-u3lbppv var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uq1yow1 {
+  @keyframes jkl-entering-u3lbpox {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5876,7 +5865,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uq1yow6 {
+  @keyframes jkl-exiting-u3lbppv {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -7460,7 +7449,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
 
 @layer jokul.components {
   :where(.jkl-text) {
-    font-weight: var(--jkl-font-weight-normal);
     line-height: var(--jkl-line-height-relaxed);
   }
   .jkl-text[data-text-size] {
@@ -7468,15 +7456,19 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
   .jkl-text[data-text-size=xs] {
     font: var(--jkl-text-style-text-micro);
+    font-weight: inherit;
   }
   .jkl-text[data-text-size=s] {
     font: var(--jkl-text-style-paragraph-small);
+    font-weight: inherit;
   }
   .jkl-text[data-text-size=m] {
     font: var(--jkl-text-style-paragraph-medium);
+    font-weight: inherit;
   }
   .jkl-text[data-text-size=l] {
     font: var(--jkl-text-style-paragraph-large);
+    font-weight: inherit;
   }
   .jkl-text[data-bold],
   strong.jkl-text[data-text-size] {