@fremtind/jokul 5.0.0-next.2 → 5.0.0-next.3

package/styles/components.css

@@ -224,7 +224,7 @@
 @layer jokul.components {
   .jkl-icon {
     --jkl-icon-fill: 0;
-    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
+    font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
     font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
@@ -431,7 +431,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-ufcxafr forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uzxqoz4 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -485,7 +485,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-ufcxafr {
+  @keyframes jkl-support-icon-entrance-uzxqoz4 {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -659,7 +659,7 @@
     margin-block-start: -0.1em;
     padding-inline-start: 0.2em;
     vertical-align: middle;
-    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
+    font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
     font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
@@ -833,22 +833,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-ufcxag3;
+    animation-name: jkl-loader-left-spin-uzxqozz;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-ufcxaga;
+    animation-name: jkl-loader-middle-spin-uzxqp0i;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-ufcxaha;
+    animation-name: jkl-loader-right-spin-uzxqp16;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-ufcxag3 {
+  @keyframes jkl-loader-left-spin-uzxqozz {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -862,7 +862,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-ufcxaga {
+  @keyframes jkl-loader-middle-spin-uzxqp0i {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -879,7 +879,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-ufcxaha {
+  @keyframes jkl-loader-right-spin-uzxqp16 {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -919,7 +919,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-ufcxahy;
+      animation: 2s ease infinite jkl-blink-uzxqp25;
     }
   }
   .jkl-skeleton-input {
@@ -967,10 +967,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-ufcxahy;
+      animation: 2s ease-in-out infinite jkl-blink-uzxqp25;
     }
   }
-  @keyframes jkl-blink-ufcxahy {
+  @keyframes jkl-blink-uzxqp25 {
     0% {
       opacity: 1;
     }
@@ -1222,7 +1222,7 @@
   .jkl-checkbox__label::before {
     content: "check_box_outline_blank";
     margin-inline-end: 0.25em;
-    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
+    font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
     font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
@@ -2014,10 +2014,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-ufcxaj2 var(--duration) linear forwards;
+    animation: jkl-downcount-uzxqp35 var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-ufcxaj2 {
+  @keyframes jkl-downcount-uzxqp35 {
     from {
       width: 100%;
     }
@@ -2501,12 +2501,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-ufcxajq 0.25s ease-out;
+    animation: jkl-show-uzxqp3r 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-ufcxajq {
+  @keyframes jkl-show-uzxqp3r {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2719,7 +2719,7 @@
     --border-color: var(--jkl-color-success-border-subdued);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-ufcxak2 var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-uzxqp4p var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -2741,7 +2741,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-ufcxak2 {
+  @keyframes jkl-dismiss-uzxqp4p {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -2826,7 +2826,7 @@
   .jkl-radio-button__label::before {
     content: "radio_button_unchecked";
     margin-inline-end: 0.25em;
-    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
+    font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
     font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
@@ -3400,7 +3400,7 @@
   }
   .jkl-link-list ul .jkl-link-list-link::after {
     content: "arrow_forward"/"";
-    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
+    font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
     font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
@@ -3703,7 +3703,7 @@
   grid-column: 2;
   grid-row: 1/span 999;
   translate: 0;
-  font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
+  font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
   font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
   font-feature-settings: "liga";
   -webkit-font-feature-settings: "liga";
@@ -4071,7 +4071,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-ufcxakc {
+  @keyframes jkl-downcount-uzxqp57 {
     from {
       width: 100%;
     }
@@ -4247,7 +4247,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   justify-content: center;
   height: 100%;
   grid-column: 1;
-  font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", monospace;
+  font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", monospace;
 }
 .jkl-search .input-wrapper:has(.clear-button) {
   grid-template-columns: 1.3em 1fr 1.3em;
@@ -4277,7 +4277,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   grid-row: 1;
   grid-column: 1;
   z-index: 1;
-  font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
+  font-family: "Jokul Material Symbols", "Jokul Material Symbols Fallback", sans-serif;
   font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
   font-feature-settings: "liga";
   -webkit-font-feature-settings: "liga";
@@ -4571,7 +4571,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-ufcxalc var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uzxqp5t var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -4609,7 +4609,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-ufcxalc {
+  @keyframes jkl-dismiss-uzxqp5t {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5165,7 +5165,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-table-of-contents ol .jkl-table-of-contents-link::before {
     content: counter(table-of-contents, decimal-leading-zero);
-    font-family: "Fremtind Grotesk Mono", "Adjusted Courier New Fallback", -apple-system, BlinkMacSystemFont, monospace;
+    font-family: var(--jkl-font-family-mono);
     color: inherit;
     font-size: var(--jkl-small-font-size);
   }
@@ -5412,12 +5412,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-ufcxall var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-uzxqp5w var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-ufcxalu var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-uzxqp68 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-ufcxall {
+  @keyframes jkl-entering-uzxqp5w {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5427,7 +5427,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-ufcxalu {
+  @keyframes jkl-exiting-uzxqp68 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -7012,6 +7012,93 @@ 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: var(--jkl-text-style-text-micro);
+  }
+  .jkl-text[data-text-size=s] {
+    font: var(--jkl-text-style-paragraph-small);
+  }
+  .jkl-text[data-text-size=m] {
+    font: var(--jkl-text-style-paragraph-medium);
+  }
+  .jkl-text[data-text-size=l] {
+    font: var(--jkl-text-style-paragraph-large);
+  }
+  .jkl-text[data-bold],
+  strong.jkl-text[data-text-size] {
+    font-weight: var(--jkl-typography-weight-bold);
+  }
+  .jkl-text[data-short] {
+    line-height: var(--jkl-line-height-tight);
+  }
+  :is(code, kbd, samp, var).jkl-text {
+    font-family: var(--jkl-font-family-mono);
+  }
+  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: var(--jkl-text-style-heading-5);
+  }
+  :where(.jkl-heading-xs) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=s],
+  .jkl-heading-s {
+    font: var(--jkl-text-style-heading-4);
+  }
+  :where(.jkl-heading-s) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=m],
+  .jkl-heading-m {
+    font: var(--jkl-text-style-heading-3);
+  }
+  :where(.jkl-heading-m) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=l],
+  .jkl-heading-l {
+    font: var(--jkl-text-style-heading-2);
+  }
+  :where(.jkl-heading-l) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=xl],
+  .jkl-heading-xl {
+    font: var(--jkl-text-style-heading-1);
+  }
+  :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;