@fremtind/jokul 4.6.1 → 4.7.1

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-u12odmy forwards;
+    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uuo87ie 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-u12odmy {
+  @keyframes jkl-support-icon-entrance-uuo87ie {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -904,22 +904,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-u12odnj;
+    animation-name: jkl-loader-left-spin-uuo87ix;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-u12odoj;
+    animation-name: jkl-loader-middle-spin-uuo87jb;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-u12odok;
+    animation-name: jkl-loader-right-spin-uuo87js;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-u12odnj {
+  @keyframes jkl-loader-left-spin-uuo87ix {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -933,7 +933,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-u12odoj {
+  @keyframes jkl-loader-middle-spin-uuo87jb {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -950,7 +950,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-u12odok {
+  @keyframes jkl-loader-right-spin-uuo87js {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -990,7 +990,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-u12odox;
+      animation: 2s ease infinite jkl-blink-uuo87ju;
     }
   }
   .jkl-skeleton-input {
@@ -1038,10 +1038,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u12odox;
+      animation: 2s ease-in-out infinite jkl-blink-uuo87ju;
     }
   }
-  @keyframes jkl-blink-u12odox {
+  @keyframes jkl-blink-uuo87ju {
     0% {
       opacity: 1;
     }
@@ -2145,10 +2145,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u12odqd var(--duration) linear forwards;
+    animation: jkl-downcount-uuo87ky var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u12odqd {
+  @keyframes jkl-downcount-uuo87ky {
     from {
       width: 100%;
     }
@@ -2568,6 +2568,18 @@
     outline-offset: 3px;
     outline-offset: var(--outline-offset);
   }
+  .jkl-expandable__wrapper .jkl-expander {
+    padding: var(--jkl-unit-20);
+    width: 100%;
+  }
+  .jkl-expandable__wrapper .jkl-expander__label {
+    flex-grow: 1;
+  }
+  @media (hover: hover) {
+    .jkl-expandable__wrapper .jkl-expander:hover {
+      background-color: var(--jkl-color-background-interactive-selected);
+    }
+  }
   .jkl-expandable__focus-container {
     border-radius: var(--border-radius);
     position: absolute;
@@ -2579,8 +2591,6 @@
     appearance: none;
     border: none;
     text-align: left;
-    width: 100%;
-    padding: var(--jkl-unit-20);
     cursor: pointer;
     color: var(--jkl-color);
     display: flex;
@@ -2592,9 +2602,6 @@
   .jkl-expander::-webkit-details-marker {
     display: none;
   }
-  .jkl-expander__label {
-    flex-grow: 1;
-  }
   .jkl-expander__chevron {
     user-select: none;
     transition-property: transform;
@@ -2611,11 +2618,6 @@
     transition-timing-function: ease;
     transition-duration: 100ms;
   }
-  @media (hover: hover) {
-    .jkl-expander:hover {
-      background-color: var(--jkl-color-background-interactive-selected);
-    }
-  }
   .jkl-expander {
     outline: 0;
     border-style: none;
@@ -2660,12 +2662,12 @@
     --jkl-icon-size: 1.2em;
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-u12odqm 0.25s ease-out;
+    animation: jkl-show-uuo87l5 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-u12odqm {
+  @keyframes jkl-show-uuo87l5 {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2880,7 +2882,7 @@
     --background-color: var(--jkl-color-background-alert-success);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-u12odqu 400ms ease-in-out forwards;
+    animation: jkl-dismiss-uuo87lo 400ms ease-in-out forwards;
     transition: visibility 0ms 400ms;
     visibility: hidden;
   }
@@ -2902,7 +2904,7 @@
   .jkl-form-error-message {
     padding-bottom: calc(var(--jkl-unit-base) * 5);
   }
-  @keyframes jkl-dismiss-u12odqu {
+  @keyframes jkl-dismiss-uuo87lo {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -4366,21 +4368,23 @@
     color: var(--jkl-color-text-on-alert);
   }
   .jkl-select__options-menu {
-    position: absolute;
-    left: -0.0625rem;
-    right: -0.0625rem;
-    top: 100%;
-    z-index: 7000;
     background-color: var(--jkl-color-background-container-high);
     border: 0.125rem solid var(--jkl-color-border-input-focus);
-    border-top: none;
-    border-radius: 0 0 var(--border-radius) var(--border-radius);
     box-sizing: border-box;
+    margin-inline: -0.0625rem;
+    width: calc(100% + 0.125rem);
+    --min-option-height: min(var(--jkl-unit-60), 3rem);
+    --option-padding: var(--jkl-unit-05) 0.75em;
     overflow-y: auto;
     max-height: calc((var(--jkl-select-max-shown-options, 5) + 0.5) * var(--min-option-height));
-    transition-property: height;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+  }
+  .jkl-select__options-menu[data-popover-placement=bottom] {
+    border-top: none;
+    border-radius: 0 0 var(--jkl-border-radius-s) var(--jkl-border-radius-s);
+  }
+  .jkl-select__options-menu[data-popover-placement=top] {
+    border-bottom: none;
+    border-radius: var(--jkl-border-radius-s) var(--jkl-border-radius-s) 0 0;
   }
   .jkl-select__option-wrapper {
     margin: 0;
@@ -4433,8 +4437,6 @@
   }
   .jkl-select--open .jkl-select__search-input,
   .jkl-select--open .jkl-select__button {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
     border-color: var(--jkl-color-border-input-focus);
     background-color: var(--jkl-color-background-container-high);
     box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
@@ -4443,6 +4445,16 @@
   .jkl-select--open .jkl-select__button:hover ~ .jkl-select__arrow {
     transform: translateY(calc(-50% + -0.1875rem));
   }
+  .jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=bottom] .jkl-select__search-input,
+  .jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=bottom] .jkl-select__button {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=top] .jkl-select__search-input,
+  .jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=top] .jkl-select__button {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
   .jkl-select--invalid .jkl-select__search-input,
   .jkl-select--invalid .jkl-select__button {
     background-color: var(--jkl-color-background-alert-error);
@@ -4462,12 +4474,14 @@
     .jkl-select .jkl-select__button:hover, .jkl-select .jkl-select__search-input:hover {
       border-color: Highlight;
     }
-    .jkl-select .jkl-select__option {
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-select__option {
       color: CanvasText;
       border-top: 1px solid Canvas;
       border-bottom: 1px solid Canvas;
     }
-    .jkl-select .jkl-select__option:hover, .jkl-select .jkl-select__option:focus {
+    .jkl-select__option:hover, .jkl-select__option:focus {
       border-top: 1px solid SelectedItem;
       border-bottom: 1px solid SelectedItem;
       --jkl-icon-weight: 400;
@@ -4475,6 +4489,43 @@
       letter-spacing: -0.014em;
     }
   }
+  .jkl-popover.jkl-select__popover {
+    background: none;
+    box-shadow: none;
+    border-radius: 0;
+    z-index: 7000;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .jkl-select__options-menu {
+      animation: jkl-select-options-menu-in var(--jkl-motion-timing-snappy) var(--jkl-motion-easing-standard);
+    }
+    .jkl-select__options-menu[data-popover-placement=top] {
+      animation-name: jkl-select-options-menu-in-from-top;
+    }
+  }
+  @keyframes jkl-select-options-menu-in {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes jkl-select-options-menu-in-from-top {
+    from {
+      opacity: 0;
+      transform: translateY(0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .jkl-select__option:focus-visible {
+    outline: none;
+  }
 }
 @layer jokul.components {
   .jkl-progress-bar {
@@ -4529,7 +4580,7 @@
     transition-timing-function: ease;
     transition-duration: 150ms;
   }
-  @keyframes jkl-downcount-u12odr4 {
+  @keyframes jkl-downcount-uuo87lr {
     from {
       width: 100%;
     }
@@ -4919,8 +4970,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
@@ -4935,19 +4984,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;
@@ -4957,10 +5005,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 {
@@ -4970,8 +5014,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 {
@@ -5042,7 +5084,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u12ods5 400ms forwards;
+    animation: jkl-dismiss-uuo87mz 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -5072,7 +5114,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u12ods5 {
+  @keyframes jkl-dismiss-uuo87mz {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5909,12 +5951,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-u12odsd 200ms ease-out forwards;
+    animation: jkl-entering-uuo87n4 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-u12odsx 150ms ease-in forwards;
+    animation: jkl-exiting-uuo87nj 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-u12odsd {
+  @keyframes jkl-entering-uuo87n4 {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5924,7 +5966,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-u12odsx {
+  @keyframes jkl-exiting-uuo87nj {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -7512,6 +7554,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;