@fremtind/jokul 4.7.0 → 4.7.2

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-u5wtga8 forwards;
+    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-ucys3ui 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-u5wtga8 {
+  @keyframes jkl-support-icon-entrance-ucys3ui {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -766,6 +766,7 @@
     --jkl-button-padding-icon-button: var(--jkl-unit-10);
     --jkl-button-tertiary-padding-icon: var(--jkl-unit-05);
     --jkl-button-text-ink-offset: 0.1em;
+    --button-min-width: 9ch;
     --jkl-icon-weight: var(--jkl-icon-weight-bold);
     --text-color: var(--jkl-color-text-default);
     --background-color: transparent;
@@ -796,7 +797,10 @@
     transition-property: background-color;
   }
   .jkl-button:has(.jkl-button__text) {
-    min-width: 9.5ch;
+    min-width: var(--button-min-width);
+  }
+  .jkl-button:has(.jkl-button__text):has(.jkl-icon) {
+    min-width: initial;
   }
   .jkl-button:has(.jkl-icon:first-child) {
     padding-inline-start: var(--jkl-button-padding-icon);
@@ -815,6 +819,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: center;
     gap: calc(var(--jkl-unit-base) * 0.25);
     pointer-events: none;
   }
@@ -831,7 +836,7 @@
   }
   .jkl-button__text {
     display: block;
-    width: 100%;
+    min-width: 0;
     max-width: 100%;
     padding-block-start: var(--jkl-button-text-ink-offset);
     margin-block-start: calc(var(--jkl-button-text-ink-offset) * -1);
@@ -904,22 +909,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-u5wtgaz;
+    animation-name: jkl-loader-left-spin-ucys3ve;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-u5wtgbc;
+    animation-name: jkl-loader-middle-spin-ucys3we;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-u5wtgbf;
+    animation-name: jkl-loader-right-spin-ucys3wx;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-u5wtgaz {
+  @keyframes jkl-loader-left-spin-ucys3ve {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -933,7 +938,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-u5wtgbc {
+  @keyframes jkl-loader-middle-spin-ucys3we {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -950,7 +955,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-u5wtgbf {
+  @keyframes jkl-loader-right-spin-ucys3wx {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -990,7 +995,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-u5wtgbu;
+      animation: 2s ease infinite jkl-blink-ucys3xe;
     }
   }
   .jkl-skeleton-input {
@@ -1038,10 +1043,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u5wtgbu;
+      animation: 2s ease-in-out infinite jkl-blink-ucys3xe;
     }
   }
-  @keyframes jkl-blink-u5wtgbu {
+  @keyframes jkl-blink-ucys3xe {
     0% {
       opacity: 1;
     }
@@ -2145,10 +2150,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u5wtgca var(--duration) linear forwards;
+    animation: jkl-downcount-ucys3yv var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u5wtgca {
+  @keyframes jkl-downcount-ucys3yv {
     from {
       width: 100%;
     }
@@ -2513,12 +2518,16 @@
 @layer jokul.components {
   .jkl-expandable {
     background-color: var(--jkl-color-background-container-low);
-    border: 1px solid transparent;
     border-radius: var(--border-radius);
     box-sizing: border-box;
     width: 100%;
     overflow: hidden;
   }
+  @media screen and (forced-colors: active) {
+    .jkl-expandable {
+      border: 1px solid CanvasText;
+    }
+  }
   .jkl-expandable__content[data-expanded=true] {
     height: auto;
   }
@@ -2532,13 +2541,13 @@
     padding: var(--jkl-unit-20);
   }
   .jkl-expandable--stroke {
-    border-color: var(--jkl-color-border-separator);
+    border: 1px solid var(--jkl-color-border-separator);
     background-color: transparent;
     border-radius: 0;
     border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
   }
   .jkl-expandable__wrapper {
-    --border-radius: 0.25rem;
+    --border-radius: var(--jkl-border-radius-m);
     --outline-offset: 3px;
     --stroke-outline-offset: 3px;
     --border-top-left-radius: var(--border-radius);
@@ -2568,6 +2577,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,10 +2600,9 @@
     appearance: none;
     border: none;
     text-align: left;
-    width: 100%;
-    padding: var(--jkl-unit-20);
     cursor: pointer;
     color: var(--jkl-color);
+    -webkit-tap-highlight-color: transparent;
     display: flex;
     gap: 0.5rem;
     align-items: center;
@@ -2592,9 +2612,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 +2628,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 +2672,12 @@
     --jkl-icon-size: 1.2em;
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-u5wtgcd 0.25s ease-out;
+    animation: jkl-show-ucys3ze 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-u5wtgcd {
+  @keyframes jkl-show-ucys3ze {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2880,7 +2892,7 @@
     --background-color: var(--jkl-color-background-alert-success);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-u5wtgcw 400ms ease-in-out forwards;
+    animation: jkl-dismiss-ucys3zh 400ms ease-in-out forwards;
     transition: visibility 0ms 400ms;
     visibility: hidden;
   }
@@ -2902,7 +2914,7 @@
   .jkl-form-error-message {
     padding-bottom: calc(var(--jkl-unit-base) * 5);
   }
-  @keyframes jkl-dismiss-u5wtgcw {
+  @keyframes jkl-dismiss-ucys3zh {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -4366,21 +4378,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 +4447,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 +4455,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 +4484,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 +4499,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 +4590,7 @@
     transition-timing-function: ease;
     transition-duration: 150ms;
   }
-  @keyframes jkl-downcount-u5wtgd2 {
+  @keyframes jkl-downcount-ucys400 {
     from {
       width: 100%;
     }
@@ -5033,7 +5094,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u5wtgeh 400ms forwards;
+    animation: jkl-dismiss-ucys41b 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -5063,7 +5124,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u5wtgeh {
+  @keyframes jkl-dismiss-ucys41b {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5900,12 +5961,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-u5wtgf4 200ms ease-out forwards;
+    animation: jkl-entering-ucys41s 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-u5wtgft 150ms ease-in forwards;
+    animation: jkl-exiting-ucys42l 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-u5wtgf4 {
+  @keyframes jkl-entering-ucys41s {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5915,7 +5976,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-u5wtgft {
+  @keyframes jkl-exiting-ucys42l {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);