@fremtind/jokul 5.0.0-next.0 → 5.0.0-next.10

package/styles/components/system-message/system-message.scss

@@ -1,7 +1,6 @@
 @charset "UTF-8";
 @use "sass:string";
-@use "../../core/jkl";
-@use "../../core/jkl/colors";
+@use "../../jkl";
 
 $_dismiss-animation-name: jkl-dismiss-#{string.unique-id()};
 $_dismiss-animation-duration: jkl.timing("lazy");
@@ -13,146 +12,157 @@ $_dismiss-animation-duration: jkl.timing("lazy");
         --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: -#{jkl.rem(
-                6.5px
-            )} -#{jkl.rem(18px)} -#{jkl.rem(6.5px)}
-            auto;
-        --jkl-system-message-message-margin: 0 var(--jkl-spacing-20);
-        --background-color: var(--jkl-color-background-alert-neutral);
-        --text-color: var(--jkl-color-text-on-alert);
+ 6.5px)
+    }
 
-        width: 100%;
-        background-color: var(--background-color);
-        color: var(--text-color);
-        transition-behavior: allow-discrete;
+    -#{jkl.rem(18px)} -#{jkl.rem(6.5px)} auto;
+    --jkl-system-message-message-margin: 0 var(--jkl-unit-20);
+    --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;
+
+    &__content {
         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;
+        width: 100%;
+        margin: 0 auto;
+    }
 
-        &__content {
-            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;
-            width: 100%;
-            margin: 0 auto;
-        }
+    &__icon {
+        height: var(--jkl-system-message-icon-height);
+        margin: var(--jkl-system-message-icon-padding);
+        flex-shrink: 0;
+
+        @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
+    }
 
-        &__icon {
-            height: var(--jkl-system-message-icon-height);
-            margin: var(--jkl-system-message-icon-padding);
-            flex-shrink: 0;
+    &__message {
+        @include jkl.text-style("text-medium");
+        margin: var(--jkl-system-message-message-margin);
+    }
 
-            @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
+    &__dismiss-button {
+        background-color: transparent;
+        padding: 0;
+        cursor: pointer;
+        display: grid;
+        place-content: center;
+        position: relative;
+        flex-shrink: 0;
+        margin-top: jkl.rem(3px); // visual alignment with text
+        color: inherit;
+
+        // Sørg for å ha en stor nok touch target.
+        &::after {
+            content: "";
+            position: absolute;
+            display: block;
+            width: var(--jkl-system-message-dismiss-button-size);
+            height: var(--jkl-system-message-dismiss-button-size);
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
         }
 
-        &__message {
-            @include jkl.text-style("text-medium");
-            margin: var(--jkl-system-message-message-margin);
+        @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
+
+        @include jkl.forced-colors-mode {
+            background-color: ButtonFace;
         }
 
-        &__dismiss-button {
-            background-color: transparent;
-            padding: 0;
-            cursor: pointer;
-            display: grid;
-            place-content: center;
-            position: relative;
-            flex-shrink: 0;
-            margin-top: jkl.rem(3px); // visual alignment with text
-            color: inherit;
-
-            // Sørg for å ha en stor nok touch target.
-            &::after {
-                content: "";
-                position: absolute;
-                display: block;
-                width: var(--jkl-system-message-dismiss-button-size);
-                height: var(--jkl-system-message-dismiss-button-size);
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-            }
+        @include jkl.reset-outline;
+
+        &:hover {
+            color: var(--jkl-color-text-subdued);
 
             @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
+        }
+
+        &:focus-visible {
+            @include jkl.focus-outline;
 
             @include jkl.forced-colors-mode {
-                background-color: ButtonFace;
+                outline: 2px solid ButtonText;
+                outline-offset: 2px;
             }
+        }
+    }
 
-            @include jkl.reset-outline;
+    &__message,
+    &__message:last-child {
+        margin-bottom: 0;
+    }
 
-            &:hover {
-                color: var(--jkl-color-text-interactive-hover);
+    &--dismissed {
+        animation: $_dismiss-animation-name jkl.timing("lazy") forwards;
+        transition: block jkl.timing("lazy") jkl.timing("lazy");
+    }
 
-                @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
-            }
+    &--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);
+    }
 
-            &:focus-visible {
-                @include jkl.focus-outline;
+    &--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);
+    }
 
-                @include jkl.forced-colors-mode {
-                    outline: 2px solid ButtonText;
-                    outline-offset: 2px;
-                }
-            }
-        }
+    &--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);
+    }
 
-        &__message,
-        &__message:last-child {
-            margin-bottom: 0;
-        }
+    &--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);
+    }
 
-        &--dismissed {
-            animation: $_dismiss-animation-name jkl.timing("lazy") forwards;
-            transition: block jkl.timing("lazy") jkl.timing("lazy");
-        }
+    @include jkl.forced-colors-mode {
+        border: 2px solid CanvasText;
 
         &--info {
-            --background-color: var(--jkl-color-background-alert-info);
+            border-style: dotted;
         }
 
         &--warning {
-            --background-color: var(--jkl-color-background-alert-warning);
+            border-style: dashed;
         }
 
         &--error {
-            --background-color: var(--jkl-color-background-alert-error);
-        }
-
-        &--success {
-            --background-color: var(--jkl-color-background-alert-success);
-        }
-
-        @include jkl.forced-colors-mode {
-            border: 2px solid CanvasText;
-
-            &--info {
-                border-style: dotted;
-            }
-
-            &--warning {
-                border-style: dashed;
-            }
-
-            &--error {
-                border-style: double;
-                border-width: 4px;
-            }
+            border-style: double;
+            border-width: 4px;
         }
     }
+}
 
-    @keyframes #{$_dismiss-animation-name} {
-        from {
-            opacity: 1;
-            transform: translateY(0);
-            filter: saturate(1);
-            display: block;
-        }
+@keyframes #{$_dismiss-animation-name} {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+        filter: saturate(1);
+        display: block;
+    }
 
-        to {
-            opacity: 0;
-            transform: translateY(-10%);
-            filter: saturate(0.7);
-            display: none;
-        }
+    to {
+        opacity: 0;
+        transform: translateY(-10%);
+        filter: saturate(0.7);
+        display: none;
     }
 }
+}

package/styles/components/table/_table-caption.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-table-caption {

package/styles/components/table/_table-cell.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-table-cell {

package/styles/components/table/_table-head.scss

@@ -1,16 +1,6 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
-    @include jkl.light-mode-variables {
-        --jkl-table-head-sticky-color: var(--jkl-background-color);
-    }
-
-    @include jkl.dark-mode-variables {
-        --jkl-table-head-sticky-color: var(--jkl-background-color);
-    }
-
-    $_border-size: jkl.rem(-1px);
-
     .jkl-table-head {
         &--sr-only {
             @include jkl.screenreader-only;
@@ -21,12 +11,12 @@
                 position: sticky;
                 top: var(--jkl-table-head-sticky-offset, 0);
                 z-index: 1;
-                background-color: var(--jkl-table-head-sticky-color);
+                background-color: var(--jkl-table-head-sticky-color, var(--jkl-color-background-page));
 
                 border-bottom: none;
 
                 box-shadow: inset 0 0 0 #000,
-                    inset 0 $_border-size 0 var(--jkl-color-border-separator-strong);
+                    inset 0 var(--jkl-border-width-1) 0 var(--jkl-color-border-strong);
                 background-clip: padding-box;
 
                 // legg til litt (nesten-cirka 16px) over headingen

package/styles/components/table/_table-header.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-table-header {
@@ -6,7 +6,7 @@
         --jkl-table-header-padding-block: var(--jkl-unit-10);
 
         @include jkl.text-style("text-small") {
-            font-weight: jkl.$typography-weight-bold;
+            font-weight: jkl.$font-weight-bold;
         };
 
         padding-block: var(--jkl-table-header-padding-block);
@@ -23,7 +23,7 @@
         }
 
         &--bold {
-            font-weight: var(--jkl-typography-weight-bold);
+            font-weight: var(--jkl-font-weight-bold);
         }
 
         &__arrows {
@@ -50,4 +50,4 @@
             }
         }
     }
-}
+}

package/styles/components/table/_table-pagination.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-table-pagination {

package/styles/components/table/_table-row.scss

@@ -1,14 +1,16 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 $_border-size: jkl.rem(1px);
 $_focus-ring-width: jkl.rem(2px);
 
 @layer jokul.components {
     .jkl-table-row {
-        --jkl-table-row-border-color: var(--jkl-color-border-separator);
+        --jkl-table-row-border-color: var(--jkl-color-border-subdued);
         --jkl-table-row-border-none-color: transparent;
-        --jkl-table-row-hover-border-color: var(--jkl-color-border-separator-strong);
-        --jkl-table-row-highlight-color: var(--jkl-color-background-interactive-selected);
+        --jkl-table-row-hover-border-color: var(--jkl-color-border-strong);
+        --jkl-table-row-highlight-color: color-mix(in srgb,
+                currentColor 15%,
+                transparent);
 
         border-bottom: solid $_border-size var(--jkl-table-row-border-color);
 

package/styles/components/table/table.css

@@ -24,10 +24,7 @@
     position: relative;
     text-align: left;
     vertical-align: top;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-table-cell:has(.jkl-button) {
     --jkl-table-cell-padding: var(--jkl-unit-05);
@@ -62,19 +59,13 @@
     .jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text)::before {
       content: attr(data-th);
       display: block;
-      font-size: var(--jkl-font-size-4);
-      line-height: var(--jkl-line-height-tight);
-      font-weight: 700;
-      --jkl-icon-weight: 400;
+      font: var(--jkl-text-style-heading-5);
     }
   }
   .jkl-table--collapse-to-list[data-collapse] .jkl-table-cell:not(.jkl-table-cell--expand-without-text)::before {
     content: attr(data-th);
     display: block;
-    font-size: var(--jkl-font-size-4);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 700;
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-heading-5);
   }
   @media (min-width: 680px) {
     .jkl-table--collapse-to-list:not([data-collapse]) .jkl-table-cell--expand-without-text .jkl-expand-button__text {
@@ -94,22 +85,6 @@
   }
 }
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-table-head-sticky-color: var(--jkl-background-color);
-    }
-  }
-  [data-theme=light] {
-    --jkl-table-head-sticky-color: var(--jkl-background-color);
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-table-head-sticky-color: var(--jkl-background-color);
-    }
-  }
-  [data-theme=dark] {
-    --jkl-table-head-sticky-color: var(--jkl-background-color);
-  }
   .jkl-table-head--sr-only {
     border: 0 !important;
     clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
@@ -126,9 +101,9 @@
     position: sticky;
     top: var(--jkl-table-head-sticky-offset, 0);
     z-index: 1;
-    background-color: var(--jkl-table-head-sticky-color);
+    background-color: var(--jkl-table-head-sticky-color, var(--jkl-color-background-page));
     border-bottom: none;
-    box-shadow: inset 0 0 0 #000, inset 0 -0.0625rem 0 var(--jkl-color-border-separator-strong);
+    box-shadow: inset 0 0 0 #000, inset 0 var(--jkl-border-width-1) 0 var(--jkl-color-border-strong);
     background-clip: padding-box;
     vertical-align: bottom;
     height: 2.3em;
@@ -138,11 +113,8 @@
   .jkl-table-header {
     --jkl-table-header-padding-inline: var(--jkl-unit-15);
     --jkl-table-header-padding-block: var(--jkl-unit-10);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
+    font: var(--jkl-text-style-text-small);
+    font-weight: var(--jkl-font-weight-bold);
     padding-block: var(--jkl-table-header-padding-block);
     padding-inline: var(--jkl-table-header-padding-inline);
     text-align: left;
@@ -155,7 +127,7 @@
     text-align: right;
   }
   .jkl-table-header--bold {
-    font-weight: var(--jkl-typography-weight-bold);
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-table-header__arrows {
     display: flex;
@@ -227,7 +199,7 @@
     flex-direction: column;
     justify-content: center;
     flex-wrap: wrap;
-    gap: calc(var(--jkl-unit-base) * 2);
+    gap: var(--jkl-unit-20);
   }
   @media (min-width: 680px) {
     .jkl-table-pagination__nav {
@@ -295,16 +267,18 @@
   }
   .jkl-table-pagination__page--active {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
 }
 @layer jokul.components {
   .jkl-table-row {
-    --jkl-table-row-border-color: var(--jkl-color-border-separator);
+    --jkl-table-row-border-color: var(--jkl-color-border-subdued);
     --jkl-table-row-border-none-color: transparent;
-    --jkl-table-row-hover-border-color: var(--jkl-color-border-separator-strong);
-    --jkl-table-row-highlight-color: var(--jkl-color-background-interactive-selected);
+    --jkl-table-row-hover-border-color: var(--jkl-color-border-strong);
+    --jkl-table-row-highlight-color: color-mix(in srgb,
+            currentColor 15%,
+            transparent);
     border-bottom: solid 0.0625rem var(--jkl-table-row-border-color);
   }
   .jkl-table-head > .jkl-table-row {
@@ -356,8 +330,8 @@
   }
   .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable {
     transition-property: border, padding;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
   .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable.jkl-table-row--expanded {
     border-bottom-color: var(--jkl-table-row-border-none-color);
@@ -376,8 +350,8 @@
   }
   .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable + tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable {
     transition-property: border;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
   .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable + [aria-hidden=false] .jkl-table-row {
     border-top-color: var(--jkl-table-row-border-none-color);
@@ -437,13 +411,13 @@
   }
   .jkl-expandable-table-row__expanded-row {
     display: none;
-    transition-timing-function: ease-in;
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-exit);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: height;
   }
   .jkl-expandable-table-row__expanded-row--expanded {
-    transition-timing-function: ease-out;
-    transition-duration: 400ms;
+    transition-timing-function: var(--jkl-motion-easing-entrance);
+    transition-duration: var(--jkl-motion-timing-lazy);
     display: block;
   }
 }

package/styles/components/table/table.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-table-caption--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table-cell{--jkl-table-cell-padding:var(--jkl-unit-15);--jkl-table-expand-padding:var(--jkl-unit-20);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);padding:var(--jkl-table-cell-padding);position:relative;text-align:left;vertical-align:top;--jkl-icon-weight:300}}@layer jokul.components{.jkl-table-cell:has(.jkl-button){--jkl-table-cell-padding:var(--jkl-unit-05)}.jkl-table-cell:has(.jkl-button) .jkl-button{padding-block:var(--jkl-unit-10)}.jkl-table-cell:has(.jkl-button) .jkl-button .jkl-button__text{overflow:visible}.jkl-table-cell--vertical-align-center{vertical-align:baseline}.jkl-table-cell--align-center{text-align:center}.jkl-table-cell--align-right{text-align:right}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell--align-right{text-align:unset}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell--align-right{text-align:unset}.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{display:none}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}@media (min-width:680px){.jkl-table--collapse-to-list:not([data-collapse]) .jkl-table-cell--expand-without-text .jkl-expand-button__text{display:none}}.jkl-table-cell .jkl-table-row-expand-button{align-items:center;display:flex;margin-left:auto;margin-block:calc(var(--jkl-table-cell-padding)*-1);padding:var(--jkl-table-expand-padding);width:-webkit-fit-content;width:fit-content}.jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):hover .jkl-table-row-expand-button,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):focus .jkl-table-row-expand-button{color:var(--expand-button-focus-color)}}@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-table-head-sticky-color:var(--jkl-background-color)}}[data-theme=light]{--jkl-table-head-sticky-color:var(--jkl-background-color)}@media screen and (prefers-color-scheme:dark){:root{--jkl-table-head-sticky-color:var(--jkl-background-color)}}[data-theme=dark]{--jkl-table-head-sticky-color:var(--jkl-background-color)}.jkl-table-head--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table-head--sticky>.jkl-table-row{background-clip:padding-box;background-color:var(--jkl-table-head-sticky-color);border-bottom:none;box-shadow:inset 0 0 0 #000,inset 0 -.0625rem 0 var(--jkl-color-border-separator-strong);height:2.3em;position:-webkit-sticky;position:sticky;top:var(--jkl-table-head-sticky-offset,0);vertical-align:bottom;z-index:1}}@layer jokul.components{.jkl-table-header{--jkl-table-header-padding-inline:var(--jkl-unit-15);--jkl-table-header-padding-block:var(--jkl-unit-10);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;font-weight:700;padding-block:var(--jkl-table-header-padding-block);padding-inline:var(--jkl-table-header-padding-inline);text-align:left;white-space:nowrap}.jkl-table-header--align-center{text-align:center}.jkl-table-header--align-right{text-align:right}.jkl-table-header--bold{font-weight:var(--jkl-typography-weight-bold)}.jkl-table-header__arrows{align-items:center;display:flex;gap:var(--jkl-spacing-4)}.jkl-table-header__arrows[data-align=center]{justify-content:center}.jkl-table-header__arrows[data-align=right]{justify-content:end}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-header{display:none}}}@layer jokul.components{.jkl-table-pagination{display:flex;flex-direction:column;gap:var(--jkl-unit-15);width:100%}@media (min-width:680px){.jkl-table-pagination{align-items:center;flex-direction:row;gap:var(--jkl-unit-30);justify-content:space-between}}.jkl-table-pagination__left{flex-shrink:1}.jkl-table-pagination__right{display:flex;flex-grow:1;flex-wrap:nowrap}.jkl-table-pagination__total-rows{white-space:nowrap}.jkl-table-pagination__picker{align-items:center;display:flex;flex-direction:row;white-space:nowrap}.jkl-table-pagination__picker--page{-webkit-padding-end:var(--jkl-unit-30);padding-inline-end:var(--jkl-unit-30);width:min(12rem,100%)}@media (min-width:680px){.jkl-table-pagination__picker--page{justify-content:flex-end}}.jkl-table-pagination__picker--page .jkl-table-pagination__picker-input{width:min(4rem,100%)}.jkl-table-pagination__picker-label{-webkit-margin-end:var(--jkl-unit-10);margin-inline-end:var(--jkl-unit-10)}.jkl-table-pagination__nav{display:flex;flex-direction:column;flex-grow:1;flex-wrap:wrap;gap:calc(var(--jkl-unit-base)*2);justify-content:center}@media (min-width:680px){.jkl-table-pagination__nav{align-items:center;flex-direction:row;justify-content:flex-end}}.jkl-table-pagination__nav ul{display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0}.jkl-table-pagination__nav li{margin:0;padding:0}.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{background:transparent;border-radius:.1875rem;border-style:none;color:var(--jkl-link-color);cursor:pointer;height:2rem;min-width:2rem;outline:0;outline-style:none;padding:0;-webkit-user-select:none;user-select:none}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{border-style:revert;outline:revert;outline-style:revert}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:revert;outline-style:revert}}.jkl-table-pagination__next:hover:not(:focus),.jkl-table-pagination__page:hover:not(:focus),.jkl-table-pagination__previous:hover:not(:focus){color:var(--jkl-link-hover-color)}html:not([data-mousenavigation]) .jkl-table-pagination__next:focus,html:not([data-mousenavigation]) .jkl-table-pagination__page:focus,html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus{outline:.125rem solid var(--jkl-link-active-color)}.jkl-table-pagination__next,.jkl-table-pagination__previous{padding-top:.125rem}.jkl-table-pagination__ellipsis{display:inline-block;height:2rem;text-align:center;vertical-align:bottom;width:2rem}.jkl-table-pagination__page--active{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}.jkl-table-row{--jkl-table-row-border-color:var(--jkl-color-border-separator);--jkl-table-row-border-none-color:transparent;--jkl-table-row-hover-border-color:var(--jkl-color-border-separator-strong);--jkl-table-row-highlight-color:var(--jkl-color-background-interactive-selected);border-bottom:.0625rem solid var(--jkl-table-row-border-color)}}@layer jokul.components{.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color)}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row{border-top:.0625rem solid transparent}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row:hover{border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list>.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}}.jkl-table--collapse-to-list[data-collapse]>.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row{padding-bottom:var(--jkl-unit-15);padding-top:var(--jkl-unit-15)}.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:first-of-type{border-top:.0625rem solid var(--jkl-table-row-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row{padding-bottom:var(--jkl-unit-15);padding-top:var(--jkl-unit-15)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:first-of-type{border-top:.0625rem solid var(--jkl-table-row-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:.15s;transition-property:border,padding;transition-timing-function:ease}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable.jkl-table-row--expanded{border-bottom-color:var(--jkl-table-row-border-none-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable .jkl-table-row-expand-button{margin-left:auto}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr{background-color:var(--jkl-table-row-highlight-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr .jkl-table-row{border-bottom-color:var(--jkl-table-row-hover-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:.15s;transition-property:border;transition-timing-function:ease}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+[aria-hidden=false] .jkl-table-row{border-top-color:var(--jkl-table-row-border-none-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}.jkl-table-row--clickable{outline:0}.jkl-table-row--clickable:hover,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--clickable:focus{background-color:var(--jkl-table-row-highlight-color);border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color);cursor:pointer}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}@media screen and (forced-colors:active){.jkl-table-row--clickable{color:ButtonText;outline:revert}.jkl-table-row--clickable:hover{background-color:ButtonFace}}.jkl-table-row--clicked{background-color:var(--jkl-table-row-highlight-color)}.jkl-table-row--clicked.jkl-table-row--expandable+[aria-hidden=false]{background-color:var(--jkl-table-row-highlight-color)}@media screen and (forced-colors:active){.jkl-table-row--clicked{background-color:ButtonFace}}.jkl-expandable-table-row__expanded-row{display:none;transition-duration:.25s;transition-property:height;transition-timing-function:ease-in}.jkl-expandable-table-row__expanded-row--expanded{display:block;transition-duration:.4s;transition-timing-function:ease-out}}.jkl-table{border-collapse:collapse;position:relative}.jkl-table--full-width{width:100%}.jkl-table--collapse-to-list[data-collapse]{display:block}.jkl-table--collapse-to-list[data-collapse]>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list[data-collapse]>thead,.jkl-table--collapse-to-list[data-collapse]>thead>tr,.jkl-table--collapse-to-list[data-collapse]>thead>tr>th{display:none}.jkl-table--collapse-to-list[data-collapse]>tbody,.jkl-table--collapse-to-list[data-collapse]>tbody>tr,.jkl-table--collapse-to-list[data-collapse]>tbody>tr>td{display:block}.jkl-table--collapse-to-list[data-collapse]>tfoot,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr>td{display:block}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list{display:block}.jkl-table--collapse-to-list>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list>thead,.jkl-table--collapse-to-list>thead>tr,.jkl-table--collapse-to-list>thead>tr>th{display:none}.jkl-table--collapse-to-list>tbody,.jkl-table--collapse-to-list>tbody>tr,.jkl-table--collapse-to-list>tbody>tr>td{display:block}.jkl-table--collapse-to-list>tfoot,.jkl-table--collapse-to-list>tfoot>tr,.jkl-table--collapse-to-list>tfoot>tr>td{display:block}}
+@layer jokul.components{.jkl-table-caption--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table-cell{--jkl-table-cell-padding:var(--jkl-unit-15);--jkl-table-expand-padding:var(--jkl-unit-20);font:var(--jkl-text-style-text-medium);padding:var(--jkl-table-cell-padding);position:relative;text-align:left;vertical-align:top}}@layer jokul.components{.jkl-table-cell:has(.jkl-button){--jkl-table-cell-padding:var(--jkl-unit-05)}.jkl-table-cell:has(.jkl-button) .jkl-button{padding-block:var(--jkl-unit-10)}.jkl-table-cell:has(.jkl-button) .jkl-button .jkl-button__text{overflow:visible}.jkl-table-cell--vertical-align-center{vertical-align:baseline}.jkl-table-cell--align-center{text-align:center}.jkl-table-cell--align-right{text-align:right}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell--align-right{text-align:unset}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell--align-right{text-align:unset}.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{display:none}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font:var(--jkl-text-style-heading-5)}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font:var(--jkl-text-style-heading-5)}@media (min-width:680px){.jkl-table--collapse-to-list:not([data-collapse]) .jkl-table-cell--expand-without-text .jkl-expand-button__text{display:none}}.jkl-table-cell .jkl-table-row-expand-button{align-items:center;display:flex;margin-left:auto;margin-block:calc(var(--jkl-table-cell-padding)*-1);padding:var(--jkl-table-expand-padding);width:-webkit-fit-content;width:fit-content}.jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):hover .jkl-table-row-expand-button,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):focus .jkl-table-row-expand-button{color:var(--expand-button-focus-color)}}@layer jokul.components{.jkl-table-head--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table-head--sticky>.jkl-table-row{background-clip:padding-box;background-color:var(--jkl-table-head-sticky-color,var(--jkl-color-background-page));border-bottom:none;box-shadow:inset 0 0 0 #000,inset 0 var(--jkl-border-width-1) 0 var(--jkl-color-border-strong);height:2.3em;position:-webkit-sticky;position:sticky;top:var(--jkl-table-head-sticky-offset,0);vertical-align:bottom;z-index:1}}@layer jokul.components{.jkl-table-header{--jkl-table-header-padding-inline:var(--jkl-unit-15);--jkl-table-header-padding-block:var(--jkl-unit-10);font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);padding-block:var(--jkl-table-header-padding-block);padding-inline:var(--jkl-table-header-padding-inline);text-align:left;white-space:nowrap}.jkl-table-header--align-center{text-align:center}.jkl-table-header--align-right{text-align:right}.jkl-table-header--bold{font-weight:var(--jkl-font-weight-bold)}.jkl-table-header__arrows{align-items:center;display:flex;gap:var(--jkl-spacing-4)}.jkl-table-header__arrows[data-align=center]{justify-content:center}.jkl-table-header__arrows[data-align=right]{justify-content:end}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-header{display:none}}}@layer jokul.components{.jkl-table-pagination{display:flex;flex-direction:column;gap:var(--jkl-unit-15);width:100%}@media (min-width:680px){.jkl-table-pagination{align-items:center;flex-direction:row;gap:var(--jkl-unit-30);justify-content:space-between}}.jkl-table-pagination__left{flex-shrink:1}.jkl-table-pagination__right{display:flex;flex-grow:1;flex-wrap:nowrap}.jkl-table-pagination__total-rows{white-space:nowrap}.jkl-table-pagination__picker{align-items:center;display:flex;flex-direction:row;white-space:nowrap}.jkl-table-pagination__picker--page{-webkit-padding-end:var(--jkl-unit-30);padding-inline-end:var(--jkl-unit-30);width:min(12rem,100%)}@media (min-width:680px){.jkl-table-pagination__picker--page{justify-content:flex-end}}.jkl-table-pagination__picker--page .jkl-table-pagination__picker-input{width:min(4rem,100%)}.jkl-table-pagination__picker-label{-webkit-margin-end:var(--jkl-unit-10);margin-inline-end:var(--jkl-unit-10)}.jkl-table-pagination__nav{display:flex;flex-direction:column;flex-grow:1;flex-wrap:wrap;gap:var(--jkl-unit-20);justify-content:center}@media (min-width:680px){.jkl-table-pagination__nav{align-items:center;flex-direction:row;justify-content:flex-end}}.jkl-table-pagination__nav ul{display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0}.jkl-table-pagination__nav li{margin:0;padding:0}.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{background:transparent;border-radius:.1875rem;border-style:none;color:var(--jkl-link-color);cursor:pointer;height:2rem;min-width:2rem;outline:0;outline-style:none;padding:0;-webkit-user-select:none;user-select:none}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{border-style:revert;outline:revert;outline-style:revert}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:revert;outline-style:revert}}.jkl-table-pagination__next:hover:not(:focus),.jkl-table-pagination__page:hover:not(:focus),.jkl-table-pagination__previous:hover:not(:focus){color:var(--jkl-link-hover-color)}html:not([data-mousenavigation]) .jkl-table-pagination__next:focus,html:not([data-mousenavigation]) .jkl-table-pagination__page:focus,html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus{outline:.125rem solid var(--jkl-link-active-color)}.jkl-table-pagination__next,.jkl-table-pagination__previous{padding-top:.125rem}.jkl-table-pagination__ellipsis{display:inline-block;height:2rem;text-align:center;vertical-align:bottom;width:2rem}.jkl-table-pagination__page--active{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-table-row{--jkl-table-row-border-color:var(--jkl-color-border-subdued);--jkl-table-row-border-none-color:transparent;--jkl-table-row-hover-border-color:var(--jkl-color-border-strong);--jkl-table-row-highlight-color:color-mix(in srgb,currentColor 15%,transparent);border-bottom:.0625rem solid var(--jkl-table-row-border-color)}}@layer jokul.components{.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color)}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row{border-top:.0625rem solid transparent}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row:hover{border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list>.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}}.jkl-table--collapse-to-list[data-collapse]>.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row{padding-bottom:var(--jkl-unit-15);padding-top:var(--jkl-unit-15)}.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:first-of-type{border-top:.0625rem solid var(--jkl-table-row-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row{padding-bottom:var(--jkl-unit-15);padding-top:var(--jkl-unit-15)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:first-of-type{border-top:.0625rem solid var(--jkl-table-row-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:var(--jkl-motion-timing-productive);transition-property:border,padding;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable.jkl-table-row--expanded{border-bottom-color:var(--jkl-table-row-border-none-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable .jkl-table-row-expand-button{margin-left:auto}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr{background-color:var(--jkl-table-row-highlight-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr .jkl-table-row{border-bottom-color:var(--jkl-table-row-hover-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:var(--jkl-motion-timing-productive);transition-property:border;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+[aria-hidden=false] .jkl-table-row{border-top-color:var(--jkl-table-row-border-none-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}.jkl-table-row--clickable{outline:0}.jkl-table-row--clickable:hover,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--clickable:focus{background-color:var(--jkl-table-row-highlight-color);border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color);cursor:pointer}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}@media screen and (forced-colors:active){.jkl-table-row--clickable{color:ButtonText;outline:revert}.jkl-table-row--clickable:hover{background-color:ButtonFace}}.jkl-table-row--clicked{background-color:var(--jkl-table-row-highlight-color)}.jkl-table-row--clicked.jkl-table-row--expandable+[aria-hidden=false]{background-color:var(--jkl-table-row-highlight-color)}@media screen and (forced-colors:active){.jkl-table-row--clicked{background-color:ButtonFace}}.jkl-expandable-table-row__expanded-row{display:none;transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-exit)}.jkl-expandable-table-row__expanded-row--expanded{display:block;transition-duration:var(--jkl-motion-timing-lazy);transition-timing-function:var(--jkl-motion-easing-entrance)}}.jkl-table{border-collapse:collapse;position:relative}.jkl-table--full-width{width:100%}.jkl-table--collapse-to-list[data-collapse]{display:block}.jkl-table--collapse-to-list[data-collapse]>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list[data-collapse]>thead,.jkl-table--collapse-to-list[data-collapse]>thead>tr,.jkl-table--collapse-to-list[data-collapse]>thead>tr>th{display:none}.jkl-table--collapse-to-list[data-collapse]>tbody,.jkl-table--collapse-to-list[data-collapse]>tbody>tr,.jkl-table--collapse-to-list[data-collapse]>tbody>tr>td{display:block}.jkl-table--collapse-to-list[data-collapse]>tfoot,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr>td{display:block}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list{display:block}.jkl-table--collapse-to-list>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list>thead,.jkl-table--collapse-to-list>thead>tr,.jkl-table--collapse-to-list>thead>tr>th{display:none}.jkl-table--collapse-to-list>tbody,.jkl-table--collapse-to-list>tbody>tr,.jkl-table--collapse-to-list>tbody>tr>td{display:block}.jkl-table--collapse-to-list>tfoot,.jkl-table--collapse-to-list>tfoot>tr,.jkl-table--collapse-to-list>tfoot>tr>td{display:block}}

package/styles/components/table/table.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@use "../../core/jkl";
+@use "../../jkl";
 @use "table-caption";
 @use "table-cell";
 @use "table-head";

package/styles/components/table-of-contents/table-of-contents.css

@@ -4,16 +4,12 @@
 @layer jokul.components {
   .jkl-table-of-contents {
     --ordered-item-padding: var(--jkl-unit-10);
-    --border: 1px solid var(--jkl-color-border-separator);
+    --border: 1px solid var(--jkl-color-border-subdued);
     --text-color: var(--jkl-color-text-default);
   }
   .jkl-table-of-contents .jkl-table-of-contents-title {
     margin-block-end: var(--jkl-unit-05);
-    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;
+    font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-table-of-contents .jkl-table-of-contents-item {
     display: flex;
@@ -65,13 +61,13 @@
   .jkl-table-of-contents ol .jkl-table-of-contents-link {
     padding-inline-end: var(--jkl-unit-20);
     padding-block: var(--ordered-item-padding);
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color;
   }
   .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);
   }