@fremtind/jokul 5.0.0-next.11 → 5.0.0-next.13

package/styles/components.css

@@ -9,8 +9,8 @@
     --jkl-autosuggest-controller-button-width: auto;
     --jkl-autosuggest-controller-button-padding: 0 var(--jkl-unit-15);
     --jkl-autosuggest-controller-button-icon-size: 1.25rem;
-    --jkl-autosuggest-option-padding: var(--jkl-unit-10) 0.75em;
-    --jkl-autosuggest-option-height: 3rem;
+    --jkl-autosuggest-option-padding: var(--jkl-unit-10);
+    --jkl-autosuggest-option-height: min(var(--jkl-unit-60), 3rem);
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -50,6 +50,7 @@
     color: unset;
     display: flex;
     align-items: center;
+    box-sizing: border-box;
     border: 0;
     background-color: transparent;
     min-height: var(--jkl-autosuggest-option-height);
@@ -63,7 +64,7 @@
   }
   .jkl-autosuggest__item:focus, .jkl-autosuggest__item--active, .jkl-autosuggest__item:hover {
     color: var(--jkl-color-text-default);
-    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    background-color: var(--jkl-color-background-container-accent);
   }
 }
 @layer jokul.components {
@@ -431,7 +432,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-uglesc0 forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uj7cado forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -485,7 +486,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uglesc0 {
+  @keyframes jkl-support-icon-entrance-uj7cado {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -833,22 +834,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uglesca;
+    animation-name: jkl-loader-left-spin-uj7cae5;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uglesce;
+    animation-name: jkl-loader-middle-spin-uj7caf0;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uglesct;
+    animation-name: jkl-loader-right-spin-uj7cafb;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uglesca {
+  @keyframes jkl-loader-left-spin-uj7cae5 {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -862,7 +863,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uglesce {
+  @keyframes jkl-loader-middle-spin-uj7caf0 {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -879,7 +880,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uglesct {
+  @keyframes jkl-loader-right-spin-uj7cafb {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -919,7 +920,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uglesd3;
+      animation: 2s ease infinite jkl-blink-uj7cafy;
     }
   }
   .jkl-skeleton-input {
@@ -967,10 +968,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uglesd3;
+      animation: 2s ease-in-out infinite jkl-blink-uj7cafy;
     }
   }
-  @keyframes jkl-blink-uglesd3 {
+  @keyframes jkl-blink-uj7cafy {
     0% {
       opacity: 1;
     }
@@ -1120,22 +1121,22 @@
   gap: var(--gap);
 }
 .jkl-tag--info {
-  --background-color: var(--jkl-color-info-background-container);
+  --background-color: var(--jkl-color-info-background-container-accent);
   --text-color: var(--jkl-color-info-text-default);
   --border-color: var(--jkl-color-info-border-subdued);
 }
 .jkl-tag--warning {
-  --background-color: var(--jkl-color-warning-background-container);
+  --background-color: var(--jkl-color-warning-background-container-accent);
   --text-color: var(--jkl-color-warning-text-default);
   --border-color: var(--jkl-color-warning-border-subdued);
 }
 .jkl-tag--error {
-  --background-color: var(--jkl-color-error-background-container);
+  --background-color: var(--jkl-color-error-background-container-accent);
   --text-color: var(--jkl-color-error-text-default);
   --border-color: var(--jkl-color-error-border-subdued);
 }
 .jkl-tag--success {
-  --background-color: var(--jkl-color-success-background-container);
+  --background-color: var(--jkl-color-success-background-container-accent);
   --text-color: var(--jkl-color-success-text-default);
   --border-color: var(--jkl-color-success-border-subdued);
 }
@@ -1161,7 +1162,7 @@
 
 @layer jokul.components {
   .jkl-checkbox {
-    --text-color: var(--jkl-color-text-default);
+    --text-color: var(--jkl-color-background-contrast);
     --background-color: transparent;
     font: var(--jkl-text-style-text-medium);
     display: flex;
@@ -1414,8 +1415,8 @@
     --jkl-combobox-chips-gap: var(--jkl-unit-05);
     --jkl-combobox-search-input-padding: var(--jkl-combobox-button-padding);
     --jkl-combobox-native-padding: 0 var(--jkl-unit-50) 0 var(--jkl-unit-10);
-    --jkl-combobox-option-padding: var(--jkl-unit-10) var(--jkl-unit-15);
-    --jkl-combobox-option-line-height: 2rem;
+    --jkl-combobox-option-padding: var(--jkl-unit-10);
+    --jkl-combobox-option-height: min(var(--jkl-unit-60), 3rem);
     --jkl-combobox-search-input-height: 1.75rem;
   }
   @media (width >= 0) and (max-width: 679px) {
@@ -1652,13 +1653,13 @@
     background-color: transparent;
     transition-property: color, background-color;
     cursor: pointer;
+    min-height: var(--jkl-combobox-option-height);
     padding: var(--jkl-combobox-option-padding);
     width: 100%;
     text-align: left;
-    line-height: var(--jkl-combobox-option-line-height);
   }
   .jkl-combobox__option:focus, .jkl-combobox__option:hover {
-    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    background-color: var(--jkl-color-background-container-accent);
   }
   .jkl-combobox__option-description {
     font: var(--jkl-text-style-text-small);
@@ -1846,6 +1847,11 @@
   .jkl-modal-overlay {
     background-color: rgba(27, 25, 23, 0.8);
     opacity: 0;
+  }
+  .jkl-modal-overlay--transparent {
+    background-color: transparent;
+  }
+  .jkl-modal-overlay {
     transition-timing-function: var(--jkl-motion-easing-entrance);
     transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: opacity;
@@ -2021,10 +2027,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uglesdl var(--duration) linear forwards;
+    animation: jkl-downcount-uj7caha var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uglesdl {
+  @keyframes jkl-downcount-uj7caha {
     from {
       width: 100%;
     }
@@ -2429,7 +2435,7 @@
   }
   @media (hover: hover) {
     .jkl-expandable__wrapper .jkl-expander:hover {
-      background-color: color-mix(in srgb, currentColor 15%, transparent);
+      background-color: var(--jkl-color-background-container-accent);
     }
   }
   .jkl-expandable__focus-container {
@@ -2510,12 +2516,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uglesea 0.25s ease-out;
+    animation: jkl-show-uj7cai1 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uglesea {
+  @keyframes jkl-show-uj7cai1 {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2589,16 +2595,15 @@
     --jkl-message-dismiss-button-size: var(--jkl-unit-50);
     --jkl-message-gap: var(--jkl-unit-20);
     --jkl-message-padding: var(--jkl-unit-25) var(--jkl-unit-15);
+    --icon-color: var(--jkl-color-background-contrast);
     --background-color: var(--jkl-color-background-container);
     --text-color: var(--jkl-color-text-default);
-    --border-color: var(--jkl-color-border-subdued);
     width: 100%;
     max-width: 35rem;
     padding: var(--jkl-message-padding);
     background-color: var(--background-color);
     color: var(--text-color);
-    border: 1px solid var(--border-color);
-    border-radius: 0.25rem;
+    border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     display: grid;
     align-items: start;
@@ -2612,6 +2617,7 @@
   .jkl-message__icon {
     grid-area: icon;
     margin-right: var(--jkl-message-gap);
+    color: var(--icon-color);
   }
   @media screen and (forced-colors: active) {
     .jkl-message__icon {
@@ -2710,25 +2716,25 @@
   .jkl-message--info {
     --background-color: var(--jkl-color-info-background-container);
     --text-color: var(--jkl-color-info-text-default);
-    --border-color: var(--jkl-color-info-border-subdued);
+    --icon-color: var(--jkl-color-info-background-contrast);
   }
   .jkl-message--warning {
     --background-color: var(--jkl-color-warning-background-container);
     --text-color: var(--jkl-color-warning-text-default);
-    --border-color: var(--jkl-color-warning-border-subdued);
+    --icon-color: var(--jkl-color-warning-background-contrast);
   }
   .jkl-message--error {
     --background-color: var(--jkl-color-error-background-container);
     --text-color: var(--jkl-color-error-text-default);
-    --border-color: var(--jkl-color-error-border-subdued);
+    --icon-color: var(--jkl-color-error-background-contrast);
   }
   .jkl-message--success {
     --background-color: var(--jkl-color-success-background-container);
     --text-color: var(--jkl-color-success-text-default);
-    --border-color: var(--jkl-color-success-border-subdued);
+    --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uglesf4 var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-uj7caid var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -2750,7 +2756,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-uglesf4 {
+  @keyframes jkl-dismiss-uj7caid {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -2763,10 +2769,6 @@
 }
 @layer jokul.components {
   .jkl-radio-button {
-    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
-    --jkl-radio-button-error-color: #ab2e43;
-    --jkl-radio-button-error-color: light-dark(#ab2e43, #d79ba5);
-    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     display: flex;
     position: relative;
   }
@@ -2860,7 +2862,7 @@
     content: "radio_button_checked";
   }
   .jkl-radio-button__input[aria-invalid=true] + .jkl-radio-button__label::before {
-    color: var(--jkl-color-error-text-default);
+    color: var(--jkl-color-error-background-contrast);
   }
   .jkl-radio-button + .jkl-radio-button, .jkl-dormant-form-support-label + .jkl-radio-button, .jkl-form-support-label + .jkl-radio-button {
     margin-top: 0.75lh;
@@ -3426,7 +3428,7 @@
     transition-property: translate;
   }
   .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible) {
-    background-color: color-mix(in srgb, var(--text-color) 15%);
+    background-color: var(--jkl-color-background-container-accent);
   }
   .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible)::after {
     translate: 4px 0;
@@ -3580,7 +3582,7 @@
     flex-shrink: 0;
   }
   .jkl-menu-item:hover, .jkl-menu-item:focus-visible {
-    --background-color: color-mix(in srgb, currentColor 18%, transparent);
+    --background-color: var(--jkl-color-background-container-accent);
   }
 }
 @layer jokul.components {
@@ -3800,7 +3802,7 @@
     --min-option-height: min(var(--jkl-unit-60), 3rem);
     /* Vi må trekke fra bredden til rammen for å få riktig høyde */
     --button-padding: calc(var(--jkl-unit-15) - var(--border-width)) calc(0.75em - var(--border-width));
-    --option-padding: var(--jkl-unit-05) 0.75em;
+    --option-padding: var(--jkl-unit-10);
     display: block;
     position: relative;
   }
@@ -3964,7 +3966,7 @@
   }
   .jkl-select__option:focus, :not([data-focus=controlled]) > .jkl-select__option:hover {
     color: var(--jkl-color-text-default);
-    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    background-color: var(--jkl-color-background-container-accent);
   }
   .jkl-select__option-description {
     color: var(--jkl-color-text-subdued);
@@ -4079,7 +4081,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-uglesfa {
+  @keyframes jkl-downcount-uj7caj9 {
     from {
       width: 100%;
     }
@@ -4458,19 +4460,16 @@ 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 auto;
+    --jkl-system-message-dismiss-button-margin: -0.40625rem -1.125rem -0.40625rem auto;
     --jkl-system-message-message-margin: 0 var(--jkl-unit-20);
+    --icon-color: var(--jkl-color-background-contrast);
     --background-color: var(--jkl-color-background-container);
     --text-color: var(--jkl-color-text-default);
-    --border-color: var(--jkl-color-border-subdued);
     width: 100%;
     background-color: var(--background-color);
     color: var(--text-color);
-    border: 1px solid var(--border-color);
     transition-behavior: allow-discrete;
     box-sizing: border-box;
   }
@@ -4485,7 +4484,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-system-message__icon {
     height: var(--jkl-system-message-icon-height);
-    margin: var(--jkl-system-message-icon-padding);
+    color: var(--icon-color);
     flex-shrink: 0;
   }
   @media screen and (forced-colors: active) {
@@ -4508,7 +4507,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     place-content: center;
     position: relative;
     flex-shrink: 0;
-    margin-top: 0.1875rem;
     color: inherit;
   }
   .jkl-system-message__dismiss-button::after {
@@ -4579,28 +4577,28 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uglesfo var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uj7cak0 var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
     --background-color: var(--jkl-color-info-background-container);
     --text-color: var(--jkl-color-info-text-default);
-    --border-color: var(--jkl-color-info-border-subdued);
+    --icon-color: var(--jkl-color-info-background-contrast);
   }
   .jkl-system-message--warning {
     --background-color: var(--jkl-color-warning-background-container);
     --text-color: var(--jkl-color-warning-text-default);
-    --border-color: var(--jkl-color-warning-border-subdued);
+    --icon-color: var(--jkl-color-warning-background-contrast);
   }
   .jkl-system-message--error {
     --background-color: var(--jkl-color-error-background-container);
     --text-color: var(--jkl-color-error-text-default);
-    --border-color: var(--jkl-color-error-border-subdued);
+    --icon-color: var(--jkl-color-error-background-contrast);
   }
   .jkl-system-message--success {
     --background-color: var(--jkl-color-success-background-container);
     --text-color: var(--jkl-color-success-text-default);
-    --border-color: var(--jkl-color-success-border-subdued);
+    --icon-color: var(--jkl-color-success-background-contrast);
   }
   @media screen and (forced-colors: active) {
     .jkl-system-message {
@@ -4617,7 +4615,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uglesfo {
+  @keyframes jkl-dismiss-uj7cak0 {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5422,12 +5420,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-uglesgn var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-uj7cak2 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-ugleshk var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-uj7cakq var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uglesgn {
+  @keyframes jkl-entering-uj7cak2 {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5437,7 +5435,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-ugleshk {
+  @keyframes jkl-exiting-uj7cakq {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);