@fremtind/jokul 4.6.0 → 4.7.0

package/styles/styles.css

@@ -481,7 +481,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-uw1i6bw forwards;
+    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u5wtga8 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -547,7 +547,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uw1i6bw {
+  @keyframes jkl-support-icon-entrance-u5wtga8 {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -840,7 +840,8 @@
     text-overflow: ellipsis;
   }
   .jkl-button[data-loading=true] .jkl-button__label {
-    translate: 0 -120%;
+    --button-loading-offset: calc(-100% - var(--jkl-button-padding-block) * 2 - var(--jkl-button-text-ink-offset));
+    translate: 0 var(--button-loading-offset);
   }
   .jkl-button[data-loading=true] .jkl-button__loader {
     translate: -50% -50%;
@@ -903,22 +904,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uw1i6c3;
+    animation-name: jkl-loader-left-spin-u5wtgaz;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uw1i6cy;
+    animation-name: jkl-loader-middle-spin-u5wtgbc;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uw1i6dq;
+    animation-name: jkl-loader-right-spin-u5wtgbf;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uw1i6c3 {
+  @keyframes jkl-loader-left-spin-u5wtgaz {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -932,7 +933,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uw1i6cy {
+  @keyframes jkl-loader-middle-spin-u5wtgbc {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -949,7 +950,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uw1i6dq {
+  @keyframes jkl-loader-right-spin-u5wtgbf {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -989,7 +990,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uw1i6e4;
+      animation: 2s ease infinite jkl-blink-u5wtgbu;
     }
   }
   .jkl-skeleton-input {
@@ -1037,10 +1038,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uw1i6e4;
+      animation: 2s ease-in-out infinite jkl-blink-u5wtgbu;
     }
   }
-  @keyframes jkl-blink-uw1i6e4 {
+  @keyframes jkl-blink-u5wtgbu {
     0% {
       opacity: 1;
     }
@@ -2144,10 +2145,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uw1i6f0 var(--duration) linear forwards;
+    animation: jkl-downcount-u5wtgca var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uw1i6f0 {
+  @keyframes jkl-downcount-u5wtgca {
     from {
       width: 100%;
     }
@@ -2659,12 +2660,12 @@
     --jkl-icon-size: 1.2em;
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uw1i6fq 0.25s ease-out;
+    animation: jkl-show-u5wtgcd 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uw1i6fq {
+  @keyframes jkl-show-u5wtgcd {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2879,7 +2880,7 @@
     --background-color: var(--jkl-color-background-alert-success);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uw1i6gf 400ms ease-in-out forwards;
+    animation: jkl-dismiss-u5wtgcw 400ms ease-in-out forwards;
     transition: visibility 0ms 400ms;
     visibility: hidden;
   }
@@ -2901,7 +2902,7 @@
   .jkl-form-error-message {
     padding-bottom: calc(var(--jkl-unit-base) * 5);
   }
-  @keyframes jkl-dismiss-uw1i6gf {
+  @keyframes jkl-dismiss-u5wtgcw {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -3336,7 +3337,7 @@
     transition-timing-function: ease;
     transition-duration: 100ms;
     transition-property: background-color, border-color, color;
-    color: var(--jkl-color-text-default);
+    color: var(--text-color);
     padding: var(--jkl-file-padding);
     border: var(--border);
     border-radius: var(--border-radius);
@@ -4528,7 +4529,7 @@
     transition-timing-function: ease;
     transition-duration: 150ms;
   }
-  @keyframes jkl-downcount-uw1i6h8 {
+  @keyframes jkl-downcount-u5wtgd2 {
     from {
       width: 100%;
     }
@@ -4918,8 +4919,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
 }
 @layer jokul.components {
   .jkl-system-message {
-    --jkl-system-message-icon-height: var(--jkl-unit-30);
-    --jkl-system-message-icon-padding: 0.1875rem 0 0 0;
     --jkl-system-message-content-padding: var(--jkl-unit-30);
     --jkl-system-message-dismiss-button-size: var(--jkl-unit-40);
     --jkl-system-message-dismiss-button-margin: -0.40625rem -1.125rem -0.40625rem
@@ -4934,19 +4933,18 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     box-sizing: border-box;
   }
   .jkl-system-message__content {
+    font-size: var(--jkl-font-size-3);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
     box-sizing: border-box;
     padding: var(--jkl-system-message-content-padding);
     display: grid;
     grid-template-columns: min-content 1fr min-content;
-    align-items: flex-start;
+    align-items: start;
     width: 100%;
     margin: 0 auto;
   }
-  .jkl-system-message__icon {
-    height: var(--jkl-system-message-icon-height);
-    margin: var(--jkl-system-message-icon-padding);
-    flex-shrink: 0;
-  }
   @media screen and (forced-colors: active) {
     .jkl-system-message__icon {
       stroke: CanvasText;
@@ -4956,10 +4954,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     }
   }
   .jkl-system-message__message {
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
     margin: var(--jkl-system-message-message-margin);
   }
   .jkl-system-message__dismiss-button {
@@ -4969,8 +4963,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     display: grid;
     place-content: center;
     position: relative;
-    flex-shrink: 0;
-    margin-top: 0.1875rem;
     color: inherit;
   }
   .jkl-system-message__dismiss-button::after {
@@ -5041,7 +5033,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uw1i6i9 400ms forwards;
+    animation: jkl-dismiss-u5wtgeh 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -5071,7 +5063,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uw1i6i9 {
+  @keyframes jkl-dismiss-u5wtgeh {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5908,12 +5900,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-uw1i6in 200ms ease-out forwards;
+    animation: jkl-entering-u5wtgf4 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uw1i6iv 150ms ease-in forwards;
+    animation: jkl-exiting-u5wtgft 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-uw1i6in {
+  @keyframes jkl-entering-u5wtgf4 {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5923,7 +5915,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uw1i6iv {
+  @keyframes jkl-exiting-u5wtgft {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -7511,6 +7503,122 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   transform: translate(0, -50%);
 }
 
+@layer jokul.components {
+  :where(.jkl-text) {
+    font-weight: var(--jkl-typography-weight-normal);
+    line-height: var(--jkl-line-height-relaxed);
+  }
+  .jkl-text[data-text-size] {
+    margin-block: 0;
+  }
+  .jkl-text[data-text-size=xs] {
+    font-size: var(--jkl-font-size-1);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+  .jkl-text[data-text-size=s] {
+    font-size: var(--jkl-font-size-2);
+    line-height: var(--jkl-line-height-relaxed);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+    --jkl-icon-size: 1.2em;
+  }
+  .jkl-text[data-text-size=m] {
+    font-size: var(--jkl-font-size-3);
+    line-height: var(--jkl-line-height-relaxed);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+  .jkl-text[data-text-size=l] {
+    font-size: var(--jkl-font-size-5);
+    line-height: var(--jkl-line-height-relaxed);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+  .jkl-text[data-bold],
+  strong.jkl-text[data-text-size] {
+    font-weight: var(--jkl-typography-weight-bold);
+    --jkl-icon-weight: 400;
+  }
+  .jkl-text[data-short] {
+    line-height: var(--jkl-line-height-tight);
+  }
+  :is(code, kbd, samp, var).jkl-text {
+    font-family: "Fremtind Grotesk Mono", "Adjusted Courier New Fallback", -apple-system, BlinkMacSystemFont, monospace;
+  }
+  label.jkl-text {
+    display: block;
+    margin-block-end: var(--jkl-spacing-8);
+  }
+}
+@layer jokul.components {
+  :where(.jkl-title) {
+    font-weight: var(--jkl-typography-weight-normal);
+    line-height: var(--jkl-line-height-tight);
+  }
+  .jkl-title[data-text-size] {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=xs],
+  .jkl-heading-xs {
+    font-size: var(--jkl-font-size-4);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 700;
+    --jkl-icon-weight: 400;
+  }
+  :where(.jkl-heading-xs) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=s],
+  .jkl-heading-s {
+    font-size: var(--jkl-font-size-5);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 700;
+    --jkl-icon-weight: 400;
+  }
+  :where(.jkl-heading-s) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=m],
+  .jkl-heading-m {
+    font-size: var(--jkl-font-size-6);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 700;
+    --jkl-icon-weight: 400;
+  }
+  :where(.jkl-heading-m) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=l],
+  .jkl-heading-l {
+    font-size: var(--jkl-font-size-7);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+  :where(.jkl-heading-l) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=xl],
+  .jkl-heading-xl {
+    font-size: var(--jkl-font-size-8);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+  :where(.jkl-heading-xl) {
+    margin-block: 0;
+  }
+  :is(label, legend).jkl-title[data-text-size] {
+    font-weight: var(--jkl-typography-weight-normal);
+    line-height: var(--jkl-line-height-relaxed);
+  }
+  label.jkl-title[data-text-size] {
+    display: block;
+    margin-block-end: var(--jkl-spacing-8);
+  }
+}
 @layer jokul.components {
   .jkl-help {
     anchor-scope: all;