@fremtind/jokul 4.4.0 → 4.5.0

package/styles/styles.css

@@ -467,7 +467,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-u5ixgyl forwards;
+    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u0o407z forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -533,7 +533,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-u5ixgyl {
+  @keyframes jkl-support-icon-entrance-u0o407z {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -751,6 +751,7 @@
     --jkl-button-padding-icon: var(--jkl-unit-20);
     --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;
     --jkl-icon-weight: var(--jkl-icon-weight-bold);
     --text-color: var(--jkl-color-text-default);
     --background-color: transparent;
@@ -815,8 +816,11 @@
     pointer-events: none;
   }
   .jkl-button__text {
+    display: block;
     width: 100%;
     max-width: 100%;
+    padding-block-start: var(--jkl-button-text-ink-offset);
+    margin-block-start: calc(var(--jkl-button-text-ink-offset) * -1);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -885,22 +889,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-u5ixgyo;
+    animation-name: jkl-loader-left-spin-u0o408j;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-u5ixgz7;
+    animation-name: jkl-loader-middle-spin-u0o4092;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-u5ixgzh;
+    animation-name: jkl-loader-right-spin-u0o409n;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-u5ixgyo {
+  @keyframes jkl-loader-left-spin-u0o408j {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -914,7 +918,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-u5ixgz7 {
+  @keyframes jkl-loader-middle-spin-u0o4092 {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -931,7 +935,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-u5ixgzh {
+  @keyframes jkl-loader-right-spin-u0o409n {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -971,7 +975,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-u5ixh01;
+      animation: 2s ease infinite jkl-blink-u0o409o;
     }
   }
   .jkl-skeleton-input {
@@ -1019,10 +1023,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u5ixh01;
+      animation: 2s ease-in-out infinite jkl-blink-u0o409o;
     }
   }
-  @keyframes jkl-blink-u5ixh01 {
+  @keyframes jkl-blink-u0o409o {
     0% {
       opacity: 1;
     }
@@ -1048,7 +1052,7 @@
     --padding-m: var(--jkl-unit-15);
     --padding-l: var(--jkl-unit-20);
     --padding-xl: var(--jkl-unit-30);
-    --border-radius: 0.25rem;
+    --border-radius: var(--jkl-border-radius-m);
     --border-color: transparent;
     --border-width: 0.0625rem;
     --background-color: transparent;
@@ -1242,14 +1246,37 @@
   }
   .jkl-checkbox__input {
     position: absolute;
-    opacity: 0;
     inset-block-start: 0;
     inset-inline-start: 0;
     block-size: 1lh;
     inline-size: 1lh;
     margin: 0;
+    padding: 0;
     cursor: pointer;
     z-index: 1;
+    appearance: none;
+    background: transparent;
+    border: 0;
+  }
+  .jkl-checkbox__input {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-checkbox__input:active, .jkl-checkbox__input:hover, .jkl-checkbox__input:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox__input {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-checkbox__input:active, .jkl-checkbox__input:hover, .jkl-checkbox__input:focus {
+      outline: revert;
+      outline-style: revert;
+    }
   }
   .jkl-checkbox__label {
     cursor: pointer;
@@ -1278,6 +1305,10 @@
     transition-duration: 75ms;
     transition-property: font-variation-settings, transform;
   }
+  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
   .jkl-checkbox__input:is(:hover, :active) + .jkl-checkbox__label, .jkl-checkbox__label:hover, .jkl-checkbox__label:active {
     --jkl-icon-weight: 400;
   }
@@ -1388,6 +1419,9 @@
     /* Visuell justering ettersom ikonet ikke fyller bounding box helt */
     margin-inline-start: -0.1em;
   }
+  .jkl-checkbox-panel .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
+    outline: none;
+  }
 }
 .jkl-chip {
   --padding-inline: var(--jkl-unit-15);
@@ -1618,6 +1652,7 @@
     outline: none;
     padding: 0;
     flex: 1 1 1ch;
+    min-width: 0;
     max-height: var(--jkl-combobox-search-input-height);
     background: none;
     -webkit-appearance: none;
@@ -1739,10 +1774,12 @@
   }
   .jkl-combobox__chips {
     display: flex;
+    flex: 1 1 auto;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--jkl-combobox-chips-gap);
-    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
     padding: var(--jkl-text-input-padding);
   }
   .jkl-combobox__chips .jkl-chip {
@@ -2099,10 +2136,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u5ixh1h var(--duration) linear forwards;
+    animation: jkl-downcount-u0o40ag var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u5ixh1h {
+  @keyframes jkl-downcount-u0o40ag {
     from {
       width: 100%;
     }
@@ -2392,6 +2429,17 @@
     background-color: var(--jkl-color-background-container-high);
     border-radius: var(--jkl-border-radius-s);
   }
+  .jkl-popover:focus-visible {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
+  .jkl-popover-trigger:focus {
+    outline: 0;
+  }
+  .jkl-popover-trigger:focus-visible {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
 }
 @layer jokul.components {
   .jkl-description-list {
@@ -2483,34 +2531,34 @@
   .jkl-expandable__wrapper {
     --border-radius: 0.25rem;
     --outline-offset: 3px;
+    --stroke-outline-offset: 3px;
+    --border-top-left-radius: var(--border-radius);
+    --border-top-right-radius: var(--border-radius);
+    --border-bottom-left-radius: var(--border-radius);
+    --border-bottom-right-radius: var(--border-radius);
+    position: relative;
+  }
+  .jkl-expandable__wrapper + .jkl-expandable__wrapper {
     --border-top-left-radius: 0;
     --border-top-right-radius: 0;
-    --border-bottom-left-radius: 0;
-    --border-bottom-right-radius: 0;
-    position: relative;
+    --stroke-outline-offset: -1px;
   }
   .jkl-expandable__wrapper + .jkl-expandable__wrapper .jkl-expandable--stroke {
     border-top: none;
   }
-  .jkl-expandable__wrapper:first-child {
-    --border-top-left-radius: var(--border-radius);
-    --border-top-right-radius: var(--border-radius);
-  }
-  .jkl-expandable__wrapper:last-child {
-    --border-bottom-left-radius: var(--border-radius);
-    --border-bottom-right-radius: var(--border-radius);
+  .jkl-expandable__wrapper:has(+ .jkl-expandable__wrapper) {
+    --border-bottom-left-radius: 0;
+    --border-bottom-right-radius: 0;
+    --stroke-outline-offset: -1px;
   }
   .jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke) {
-    --outline-offset: -1px;
+    --outline-offset: var(--stroke-outline-offset);
   }
   .jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container {
     outline: 3px solid var(--jkl-color-border-action);
     outline-offset: 3px;
     outline-offset: var(--outline-offset);
   }
-  .jkl-expandable__wrapper:has(:focus-visible):first-child:last-child {
-    --outline-offset: 3px;
-  }
   .jkl-expandable__focus-container {
     border-radius: var(--border-radius);
     position: absolute;
@@ -2603,12 +2651,12 @@
     --jkl-icon-size: 1.2em;
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-u5ixh1k 0.25s ease-out;
+    animation: jkl-show-u0o40ao 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-u5ixh1k {
+  @keyframes jkl-show-u0o40ao {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2654,10 +2702,6 @@
     transition-duration: 150ms;
     transition-property: opacity;
   }
-  .jkl-feedback-smiley-option::after {
-    inset: -0.125rem -0.125rem -0.125rem -0.125rem;
-    box-shadow: 0 0 0 0.125rem currentColor;
-  }
   .jkl-feedback-smiley-option::before {
     inset: 0;
     box-shadow: 0 0.125rem 1.875rem rgba(0, 0, 0, 0.1);
@@ -2672,8 +2716,10 @@
   input:checked + .jkl-feedback-smiley-option::before {
     opacity: 1;
   }
-  html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-feedback-smiley-option::after {
-    opacity: 1;
+  input:focus-visible + .jkl-feedback-smiley-option {
+    border-radius: var(--jkl-border-radius-full);
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
   }
 }
 @layer jokul.components {
@@ -2825,7 +2871,7 @@
     --background-color: var(--jkl-color-background-alert-success);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-u5ixh2h 400ms ease-in-out forwards;
+    animation: jkl-dismiss-u0o40b9 400ms ease-in-out forwards;
     transition: visibility 0ms 400ms;
     visibility: hidden;
   }
@@ -2847,7 +2893,7 @@
   .jkl-form-error-message {
     padding-bottom: calc(var(--jkl-unit-base) * 5);
   }
-  @keyframes jkl-dismiss-u5ixh2h {
+  @keyframes jkl-dismiss-u0o40b9 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -2901,14 +2947,37 @@
   }
   .jkl-radio-button__input {
     position: absolute;
-    opacity: 0;
     inset-block-start: 0;
     inset-inline-start: 0;
     block-size: 1lh;
     inline-size: 1lh;
     margin: 0;
+    padding: 0;
     cursor: pointer;
     z-index: 1;
+    appearance: none;
+    background: transparent;
+    border: 0;
+  }
+  .jkl-radio-button__input {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-radio-button__input:active, .jkl-radio-button__input:hover, .jkl-radio-button__input:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-radio-button__input {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-radio-button__input:active, .jkl-radio-button__input:hover, .jkl-radio-button__input:focus {
+      outline: revert;
+      outline-style: revert;
+    }
   }
   .jkl-radio-button__label {
     cursor: pointer;
@@ -2937,6 +3006,11 @@
     transition-duration: 75ms;
     transition-property: font-variation-settings, transform;
   }
+  .jkl-radio-button__input:focus-visible + .jkl-radio-button__label::before {
+    border-radius: var(--jkl-border-radius-full);
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
   .jkl-radio-button__input:is(:hover, :active) + .jkl-radio-button__label, .jkl-radio-button__label:hover, .jkl-radio-button__label:active {
     --jkl-icon-weight: 400;
   }
@@ -3506,7 +3580,6 @@
     margin: 0;
     height: min-content;
     border-radius: var(--jkl-unit-05);
-    overflow: hidden;
     background: var(--jkl-color-background-container-low);
   }
   .jkl-link-list ul .jkl-link-list-link {
@@ -3552,6 +3625,10 @@
   .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible)::after {
     translate: 4px 0;
   }
+  .jkl-link-list ul .jkl-link-list-link:focus-visible {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
   .jkl-link-list .jkl-link-list-item {
     display: flex;
   }
@@ -4195,12 +4272,36 @@
       background-color: CanvasText;
     }
   }
+  .jkl-progress-bar {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-progress-bar:active, .jkl-progress-bar:hover, .jkl-progress-bar:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-progress-bar {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-progress-bar:active, .jkl-progress-bar:hover, .jkl-progress-bar:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-progress-bar:focus-visible {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
   .jkl-progress-bar__tracker {
     transition-property: width;
     transition-timing-function: ease;
     transition-duration: 150ms;
   }
-  @keyframes jkl-downcount-u5ixh3f {
+  @keyframes jkl-downcount-u0o40c3 {
     from {
       width: 100%;
     }
@@ -4214,6 +4315,9 @@
     /* Visuell justering pga. rundt ikon */
     margin-inline-start: -0.15em;
   }
+  .jkl-radio-panel .jkl-radio-button__input:focus-visible + .jkl-radio-button__label::before {
+    outline: none;
+  }
 }
 .jkl-select--beta {
   --border-color: var(--jkl-color-border-input);
@@ -4710,7 +4814,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u5ixh4w 400ms forwards;
+    animation: jkl-dismiss-u0o40dq 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -4740,7 +4844,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u5ixh4w {
+  @keyframes jkl-dismiss-u0o40dq {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5577,12 +5681,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-u5ixh4y 200ms ease-out forwards;
+    animation: jkl-entering-u0o40ee 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-u5ixh5i 150ms ease-in forwards;
+    animation: jkl-exiting-u0o40f9 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-u5ixh4y {
+  @keyframes jkl-entering-u0o40ee {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5592,7 +5696,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-u5ixh5i {
+  @keyframes jkl-exiting-u0o40f9 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -7056,7 +7160,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --jkl-toggle-switch-width: var(--jkl-unit-60);
   --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
   --border-width: 0.0625rem;
-  --switch-padding: 0.25rem;
+  --switch-padding: var(--jkl-unit-05);
   --knob-position: 0;
   --switch-border-color: var(--jkl-color-border-action);
   --indicator-color: var(--jkl-color-background-container-high);
@@ -7129,7 +7233,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --jkl-toggle-switch-height: var(--jkl-unit-40);
   --jkl-toggle-switch-width: var(--jkl-unit-60);
   --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
-  --jkl-toggle-switch-indicator-spacing: 0;
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -7177,13 +7280,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   position: absolute;
   top: 50%;
   right: 100%;
-  margin-right: var(--jkl-toggle-switch-indicator-spacing);
+  font-size: var(--jkl-unit-20);
   transform: translate(0, -50%);
 }
-.jkl-toggle-switch-widget__indicator > .jkl-icon__icon {
-  position: absolute;
-  inset: 0;
-}
 
 @layer jokul.components {
   .jkl-help {