@fremtind/jokul 5.2.3 → 6.0.0-next.1

package/styles/components/select/select.scss

@@ -1,374 +1,125 @@
 @charset "UTF-8";
-@use "sass:color";
-@use "sass:math";
 @use "../../jkl";
 
 @layer jokul.components {
     .jkl-select {
-        --jkl-select-arrow-right: var(--jkl-unit-05);
+        --border-color: var(--jkl-color-border-default);
+        --background-color: transparent;
+        --color: var(--jkl-color-text-default);
+        --box-shadow: 0 0 0 #{jkl.rem(1px)} transparent;
         --border-width: #{jkl.rem(1px)};
-        --border-radius: var(--jkl-border-radius-s);
-        --min-option-height: min(var(--jkl-unit-60), #{jkl.rem(48px)});
+        --button-padding: calc(var(--jkl-unit-15) - var(--border-width));
 
-        /* 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-10);
+        anchor-scope: --select-button;
 
-        display: block;
-        position: relative;
-
-        @include jkl.reset-outline;
-
-        & *:focus-visible {
-            outline: none;
-        }
-
-        & .jkl-tooltip-question-button:focus {
-            @include jkl.focus-outline($offset: 0);
-        }
-
-        & select {
-            appearance: none;
-
-            &:-moz-focusring {
-                color: transparent;
-                text-shadow: 0 0 0 var(--jkl-color-text-subdued);
-            }
-
-            & option {
-                font-weight: normal;
-                font-family: sans-serif;
-                color: var(--jkl-color-text-subdued);
-                background-color: var(--jkl-color-background-container);
-            }
-        }
-
-        &__outer-wrapper {
-            position: relative;
-            width: 15rem;
-            min-width: 7rem;
-            max-width: 100%;
-        }
-
-        &__search-input {
-            box-sizing: border-box;
-            color: var(--jkl-color-text-subdued);
-        }
-
-        &__search-input,
         &__button {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            background-color: transparent;
-            color: var(--jkl-color-text-subdued);
-            cursor: pointer;
-
-            height: var(--jkl-select-input-height);
-            border-radius: var(--border-radius);
-            border: var(--border-width) solid var(--jkl-color-border-default);
-            box-shadow: 0 0 0 jkl.rem(1px) transparent;
-            text-align: left;
-            width: 100%;
-
+            display: grid;
+            gap: var(--jkl-spacing-8);
+            grid-template-columns: 1fr auto;
+            align-items: center;
             padding: var(--button-padding);
+            border: var(--border-width) solid var(--border-color);
+            border-radius: var(--jkl-border-radius-s);
+            background-color: var(--background-color);
+            color: var(--color);
+            anchor-name: --select-button;
+            box-shadow: var(--box-shadow);
+            field-sizing: content;
 
-            /* Øk padding for å gi plass til ikonet */
-            padding-inline-end: calc(0.75em + 1.3em);
-
-            transition-property: color, border-color, box-shadow;
-
-            @include jkl.motion;
             @include jkl.text-style("text-medium");
 
-            &--active-value {
-                color: var(--jkl-color-text-default);
-            }
+            min-width: var(--width, 20ch);
+            max-width: 100%;
+            text-align: left;
 
             &:hover {
-                border-color: var(--jkl-color-border-strong);
-                box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-strong);
-
-                & ~ .jkl-select__arrow {
-                    transform: translateY(calc(-50% + #{jkl.rem(3px)}));
-                }
+                --border-color: var(--jkl-color-border-strong);
+                --box-shadow: 0 0 0 #{jkl.rem(1px)} var(--border-color);
             }
 
             &:focus-visible {
-                outline: none;
-            }
-        }
-
-        @include jkl.keyboard-navigation {
-            &__search-input,
-            &__button {
-                &:focus-visible,
-                &:has(:focus-visible) {
-                    @include jkl.focus-outline;
-                }
+                @include jkl.focus-outline;
             }
 
-            &:has(:focus-visible) {
-                .jkl-select__button,
-                .jkl-select__search-input {
-                    @include jkl.focus-outline;
-                }
+            &[aria-invalid] {
+                --color: var(--jkl-color-error-text-default);
+                --border-color: var(--jkl-color-error-border-default);
+                --box-shadow: 0 0 0 #{jkl.rem(1px)} var(--border-color);
             }
         }
 
-        &__arrow {
-            pointer-events: none;
-            position: absolute;
-            right: 0.75em;
-            top: 50%;
-            color: var(--jkl-color-text-default);
-
-            transform: translateY(-50%);
-            transition-property: transform, color;
-
-            @include jkl.motion;
-            @include jkl.forced-colors-svg-fallback(
-                $stroke: CanvasText,
-                $fill: CanvasText
-            );
+        &__popover {
+            /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+            --shadow-color: rgb(49 48 48 / 20%);
+            --shadow-color: light-dark(rgb(49 48 48 / 20%), rgb(0 0 0 / 50%));
 
-            .jkl-select:has([aria-invalid="true"]) & {
-                color: var(--jkl-color-error-text-default);
-            }
-        }
-
-        &__options-menu {
-            background-color: var(--jkl-color-background-container);
-            border: jkl.rem(2px) solid var(--jkl-color-border-strong);
-            border-radius: 0 0 var(--border-radius) var(--border-radius);
+            z-index: var(--jkl-floating-z-index, #{jkl.$z-index--modal});
+            margin-block: var(--jkl-spacing-xs);
+            min-inline-size: anchor-size(width);
             box-sizing: border-box;
-            // Strekker seg ut over kantene på trigger-knappen for å dekke
-            // den 1px brede borderen, slik at listen visuelt henger sammen
-            // med inputfeltet.
-            margin-inline: jkl.rem(-1px);
-            width: calc(100% + #{jkl.rem(2px)});
-            // Definerer egne tokens her fordi listen rendres i en portal og
-            // ikke arver kaskaderte custom properties fra `.jkl-select`.
-            --min-option-height: min(var(--jkl-unit-60), 3rem);
-            --option-padding: var(--jkl-unit-05) 0.75em;
-
-            overflow-y: auto;
-            // Sett makshøyde på listen til høyden av (maxShownOptions + 0.5) ganger høyden på ett enlinjes valg
-            max-height: calc(
-                calc(var(--jkl-select-max-shown-options, 5) + 0.5) *
-                    var(--min-option-height)
-            );
+            padding: var(--jkl-spacing-24);
+            border: none;
+            background-color: var(--jkl-color-background-container);
+            position: fixed;
 
-            // Standard: lista ligger under triggeren — flat topp, runde
-            // bunnhjørner, ingen border på toppen som ville duplisert
-            // knappens border.
-            &[data-popover-placement="bottom"] {
-                border-top: none;
-                border-radius: 0 0 var(--jkl-border-radius-s)
-                    var(--jkl-border-radius-s);
+            // Hindrer display: flex fra Flex-komponenten å overstyre oppførselen til popover
+            &:not(:popover-open) {
+                display: none;
             }
 
-            // Når `flip` snur lista over knappen byttes flat side og runde
-            // hjørner, slik at lista og knappen fortsatt henger sammen
-            // visuelt.
-            &[data-popover-placement="top"] {
-                border-bottom: none;
-                border-radius: var(--jkl-border-radius-s)
-                    var(--jkl-border-radius-s) 0 0;
+            [role="listbox"] {
+                display: grid;
+                grid-template-columns: auto 1fr auto;
+                grid-auto-rows: min-content;
+                gap: var(--jkl-spacing-8);
             }
-        }
-
-        &__option-wrapper {
-            margin: 0;
-            padding: 0;
 
-            list-style-type: none;
-            -webkit-overflow-scrolling: touch;
-        }
-
-        &__option {
-            color: unset;
-            border: 0; // removes native styling
-            width: 100%;
-            background-color: inherit;
-            min-height: var(--min-option-height);
-            text-align: left;
-            transition-property: color, background-color;
-            position: relative;
-            padding: var(--option-padding);
-            cursor: pointer;
-
-            @include jkl.motion;
-            @include jkl.text-style("text-medium");
-
-            /* For å unngå "dobbel" markering skrur vi av markering på hover i React-
-        komponenten med data-focus="controlled". Uten dette satt vil valgene
-        markeres ved hover som normalt. */
-            &:focus,
-            :not([data-focus="controlled"]) > &:hover {
-                color: var(--jkl-color-text-default);
-                background-color: var(--jkl-color-background-container-accent);
-            }
-
-            &-description {
-                color: var(--jkl-color-text-subdued);
-                display: block;
+            @include jkl.screen-to(499px) {
+                margin: 0;
+                inset: 0;
                 width: 100%;
+                height: 100%;
+                padding-bottom: calc(env(safe-area-inset-bottom) + var(--jkl-spacing-24));
 
-                @include jkl.text-style("text-small");
-            }
-        }
-
-        /* --------
-       VARIANTS
-       -------- */
-
-        &--inline {
-            display: inline-block;
-            vertical-align: top;
-        }
-
-        &--open {
-            .jkl-select__search-input,
-            .jkl-select__button {
-                border-color: var(--jkl-color-border-strong);
-                background-color: var(--jkl-color-background-container);
-                box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-strong);
-
-                &:hover ~ .jkl-select__arrow {
-                    transform: translateY(calc(-50% + #{jkl.rem(-3px)}));
+                & [role="listbox"] {
+                    flex-grow: 999;
+                    overflow-y: auto;
                 }
-            }
 
-            // Lista ligger under (default): flat bunn på input/knapp.
-            .jkl-select__outer-wrapper[data-popover-placement="bottom"] {
-                .jkl-select__search-input,
-                .jkl-select__button {
-                    border-bottom-left-radius: 0;
-                    border-bottom-right-radius: 0;
+                & header,
+                & .jkl-button--primary {
+                    flex-shrink: 0;
                 }
             }
 
-            // Lista ligger over: flat topp på input/knapp.
-            .jkl-select__outer-wrapper[data-popover-placement="top"] {
-                .jkl-select__search-input,
-                .jkl-select__button {
-                    border-top-left-radius: 0;
-                    border-top-right-radius: 0;
+            @include jkl.screen-from(500px) {
+                position-anchor: --select-button;
+                position-area: bottom span-right;
+                position-try: normal flip-block;
+                box-shadow: 0 4px 20px 0 var(--shadow-color);
+                border-radius: var(--jkl-border-radius-s);
+                z-index: var(--jkl-floating-z-index, #{jkl.$z-index--floating});
+                padding: var(--jkl-spacing-8);
+                inset: auto;
+                margin-inline: 0;
+                max-height: 45dvh;
+                overscroll-behavior: none;
+
+                @supports (max-height: round(up, 45dvh, 24px)) {
+                    // Forsøk å alltid vise litt av neste valg hvis det ikke er plass
+                    // til å vise alle valgene i popover-en
+                    max-height: round(up, 45dvh, 24px);
                 }
-            }
-        }
 
-        &--invalid {
-            .jkl-select__search-input,
-            .jkl-select__button {
-                color: var(--jkl-color-error-text-default);
-                border-color: var(--jkl-color-error-border-default);
-
-                &--active-value {
-                    color: revert;
+                & header,
+                & .jkl-button--primary {
+                    display: none;
                 }
             }
         }
 
-        @include jkl.forced-colors-mode {
-            // Vi er en button (hvis ikke native) og får ButtonText, men vi later som vi er en select, og den har CanvasText
-            & .jkl-select__button,
-            & .jkl-select__search-input {
-                color: CanvasText;
-                border: 2px solid ButtonText;
-                background-color: Canvas;
-                outline: revert;
-
-                &:hover {
-                    border-color: Highlight;
-                }
-            }
+        select {
+            display: none;
         }
     }
-
-    // Options rendres i portal og er ikke descendants av `.jkl-select`,
-    // så forced-colors-reglene må stå på topp-nivå for å treffe dem.
-    @include jkl.forced-colors-mode {
-        .jkl-select__option {
-            color: CanvasText;
-
-            border-top: 1px solid Canvas;
-            border-bottom: 1px solid Canvas;
-
-            &:hover,
-            &:focus {
-                border-top: 1px solid SelectedItem;
-                border-bottom: 1px solid SelectedItem;
-
-                @include jkl.no-grow-bold;
-            }
-        }
-    }
-
-    // Listen rendres i en portal via `Popover`. Vi nøytraliserer Popover sin
-    // standard padding/bakgrunn/skygge slik at `.jkl-select__options-menu`
-    // selv styrer ramme og bakgrunn — også når Select brukes inne i en
-    // Card, ExpandablePanel eller andre containere med overflow-clip.
-    // Select skal følge samme lagdeling som andre dropdown-/menykomponenter,
-    // men kan løftes av en portal-kontekst som Modal via `--jkl-floating-z-index`.
-    .jkl-popover.jkl-select__popover {
-        background: none;
-        box-shadow: none;
-        border-radius: 0;
-        z-index: var(--jkl-floating-z-index, #{jkl.$z-index--dropdown});
-    }
-
-    // Mild fade + slide-in når lista mounter i portalen. Animeres på
-    // selve listbox-en — ikke på popover-wrapperen — fordi wrapperen
-    // bærer floating-ui sin posisjonerings-`transform`. Hadde vi animert
-    // wrapperen ville `translateY` overstyrt floating-ui's transform i
-    // animasjonsvinduet, og lista ville blinket i (0,0).
-    @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);
-
-            // Når lista flippes opp animerer vi fra motsatt retning slik
-            // at bevegelsen alltid kommer fra triggeren.
-            &[data-popover-placement="top"] {
-                animation-name: jkl-select-options-menu-in-from-top;
-            }
-        }
-    }
-
-    @keyframes jkl-select-options-menu-in {
-        from {
-            opacity: 0;
-            transform: translateY(jkl.rem(-4px));
-        }
-
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    @keyframes jkl-select-options-menu-in-from-top {
-        from {
-            opacity: 0;
-            transform: translateY(jkl.rem(4px));
-        }
-
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    // Options rendres i en portal og er ikke lenger descendants av
-    // `.jkl-select`, så regelen `.jkl-select & *:focus-visible { outline:
-    // none }` treffer dem ikke. Vi gjenoppretter fokus-visualiseringen
-    // (background-color via &:focus) ved å eksplisitt fjerne den native
-    // outlinen på options i portalen.
-    .jkl-select__option:focus-visible {
-        outline: none;
-    }
 }

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-summary-table{display:flex;flex-direction:column;font:var(--jkl-text-style-text-medium);overflow-wrap:anywhere;width:100%}.jkl-summary-table tr{display:flex;justify-content:space-between;padding-bottom:var(--jkl-unit-10)}.jkl-summary-table td,.jkl-summary-table th{flex-basis:50%;padding-right:var(--jkl-unit-20)}.jkl-summary-table td:first-child,.jkl-summary-table th:first-child{text-align:left}.jkl-summary-table td:last-child,.jkl-summary-table th:last-child{padding-right:0;text-align:right}.jkl-summary-table>tbody th{font-weight:var(--jkl-font-weight-normal)}.jkl-summary-table>tfoot{border-bottom:.0625rem solid var(--jkl-color-border-strong);border-top:.0625rem solid var(--jkl-color-border-strong);padding-top:var(--jkl-unit-10)}.jkl-summary-table>tfoot td,.jkl-summary-table>tfoot th{font-weight:var(--jkl-font-weight-bold)}}
+@layer jokul.components{.jkl-summary-table{display:flex;flex-direction:column;overflow-wrap:anywhere;width:100%;font:var(--jkl-text-style-text-medium)}.jkl-summary-table tr{display:flex;justify-content:space-between;padding-bottom:var(--jkl-unit-10)}.jkl-summary-table td,.jkl-summary-table th{flex-basis:50%;padding-right:var(--jkl-unit-20)}.jkl-summary-table td:first-child,.jkl-summary-table th:first-child{text-align:left}.jkl-summary-table td:last-child,.jkl-summary-table th:last-child{text-align:right;padding-right:0}.jkl-summary-table>tbody th{font-weight:var(--jkl-font-weight-normal)}.jkl-summary-table>tfoot{border-top:.0625rem solid var(--jkl-color-border-strong);border-bottom:.0625rem solid var(--jkl-color-border-strong);padding-top:var(--jkl-unit-10)}.jkl-summary-table>tfoot td,.jkl-summary-table>tfoot th{font-weight:var(--jkl-font-weight-bold)}}

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

@@ -120,7 +120,7 @@
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uh6b107 var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uxwwxv3 var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -158,7 +158,7 @@
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uh6b107 {
+  @keyframes jkl-dismiss-uxwwxv3 {
     from {
       opacity: 1;
       transform: translateY(0);

package/styles/components/system-message/system-message.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-system-message{--jkl-system-message-icon-height:var(--jkl-unit-30);--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-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);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{color:var(--icon-color);flex-shrink:0;height:var(--jkl-system-message-icon-height)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font:var(--jkl-text-style-text-medium);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:initial;color:inherit;display:grid;flex-shrink:0;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover,.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-uh6b107 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);--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);--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);--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);--icon-color:var(--jkl-color-success-background-contrast)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-uh6b107{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}
+@layer jokul.components{.jkl-system-message{--jkl-system-message-icon-height:var(--jkl-unit-30);--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-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);width:100%;background-color:var(--background-color);color:var(--text-color);transition-behavior:allow-discrete;box-sizing:border-box}.jkl-system-message__content{box-sizing:border-box;padding:var(--jkl-system-message-content-padding);display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;align-items:flex-start;width:100%;margin:0 auto}.jkl-system-message__icon{height:var(--jkl-system-message-icon-height);color:var(--icon-color);flex-shrink:0}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font:var(--jkl-text-style-text-medium);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:initial;padding:0;display:grid;place-content:center;position:relative;flex-shrink:0;color:inherit}.jkl-system-message__dismiss-button: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%)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{outline:0;border-style:none;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{outline:revert;border-style:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover,.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-uxwwxv3 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);--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);--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);--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);--icon-color:var(--jkl-color-success-background-contrast)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-uxwwxv3{0%{opacity:1;transform:translateY(0);filter:saturate(1);display:block}to{opacity:0;transform:translateY(-10%);filter:saturate(.7);display:none}}}

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

@@ -1 +1,3 @@
-@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:initial}.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)}.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}.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}}@layer jokul.components{}@layer jokul.components{@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:#0000;border-radius:.1875rem;border-style:none;color:var(--jkl-link-color);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:#0000;--jkl-table-row-hover-border-color:var(--jkl-color-border-strong);--jkl-table-row-highlight-color:color-mix(in srgb,currentColor 15%,#0000);border-bottom:.0625rem solid var(--jkl-table-row-border-color)}.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 #0000}: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)}}@layer jokul.components{@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,.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,.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,.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;width:1px!important;white-space:nowrap!important}.jkl-table-cell{--jkl-table-cell-padding:var(--jkl-unit-15);--jkl-table-expand-padding:var(--jkl-unit-20);padding:var(--jkl-table-cell-padding);position:relative;text-align:left;vertical-align:top;font:var(--jkl-text-style-text-medium)}}@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:initial}.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{display:flex;align-items:center;width:-webkit-fit-content;width:fit-content;margin-left:auto;margin-block:calc(var(--jkl-table-cell-padding)*-1);padding:var(--jkl-table-expand-padding)}.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)}.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;width:1px!important;white-space:nowrap!important}.jkl-table-head--sticky>.jkl-table-row{position:-webkit-sticky;position:sticky;top:var(--jkl-table-head-sticky-offset,0);z-index:1;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);background-clip:padding-box;vertical-align:bottom;height:2.3em}.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{display:flex;gap:var(--jkl-spacing-4);align-items:center}.jkl-table-header__arrows[data-align=center]{justify-content:center}.jkl-table-header__arrows[data-align=right]{justify-content:end}}@layer jokul.components{}@layer jokul.components{@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;gap:var(--jkl-unit-15);flex-direction:column;width:100%}@media (min-width:680px){.jkl-table-pagination{flex-direction:row;gap:var(--jkl-unit-30);justify-content:space-between;align-items:center}}.jkl-table-pagination__left{flex-shrink:1}.jkl-table-pagination__right{flex-grow:1;display:flex;flex-wrap:nowrap}.jkl-table-pagination__total-rows{white-space:nowrap}.jkl-table-pagination__picker{display:flex;flex-direction:row;align-items:center;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{flex-grow:1;display:flex;flex-direction:column;justify-content:center;flex-wrap:wrap;gap:var(--jkl-unit-20)}@media (min-width:680px){.jkl-table-pagination__nav{flex-direction:row;align-items:center;justify-content:flex-end}}.jkl-table-pagination__nav ul{list-style:none;display:flex;flex-wrap:nowrap;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:#0000;color:var(--jkl-link-color);border-radius:.1875rem;-webkit-user-select:none;user-select:none;padding:0;height:2rem;min-width:2rem;outline:0;border-style:none;outline-style: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{outline:revert;border-style: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{text-align:center;vertical-align:bottom;display:inline-block;height:2rem;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:#0000;--jkl-table-row-hover-border-color:var(--jkl-color-border-strong);--jkl-table-row-highlight-color:color-mix(in srgb,
+            currentColor 15%,
+            #0000);border-bottom:.0625rem solid var(--jkl-table-row-border-color)}.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 #0000}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row:hover{border-top:.0625rem double var(--jkl-table-row-hover-border-color);border-bottom:.0625rem double var(--jkl-table-row-hover-border-color)}}@layer jokul.components{@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-top:var(--jkl-unit-15);padding-bottom: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-top:var(--jkl-unit-15);padding-bottom: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-property:border,padding;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)}.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-property:border;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)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:hover{border-top:.0625rem solid var(--jkl-table-row-hover-border-color);border-bottom:.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-top:.0625rem solid var(--jkl-table-row-hover-border-color);border-bottom:.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{cursor:pointer;background-color:var(--jkl-table-row-highlight-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color);border-bottom:.0625rem double var(--jkl-table-row-hover-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-top:.0625rem solid var(--jkl-table-row-hover-border-color);border-bottom:.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-top:.0625rem solid var(--jkl-table-row-hover-border-color);border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color)}@media screen and (forced-colors:active){.jkl-table-row--clickable{outline:revert;color:ButtonText}.jkl-table-row--clickable:hover{background-color:ButtonFace}}.jkl-table-row--clicked,.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-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:var(--jkl-motion-easing-entrance);transition-duration:var(--jkl-motion-timing-lazy);display:block}}.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;width:1px!important;white-space:nowrap!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,.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;width:1px!important;white-space:nowrap!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,.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-of-contents/table-of-contents.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-table-of-contents{--ordered-item-padding:var(--jkl-unit-10);--border:1px solid var(--jkl-color-border-subdued);--text-color:var(--jkl-color-text-default)}.jkl-table-of-contents .jkl-table-of-contents-title{-webkit-margin-after:var(--jkl-unit-05);font:var(--jkl-text-style-paragraph-small);margin-block-end:var(--jkl-unit-05)}.jkl-table-of-contents .jkl-table-of-contents-item{display:flex}.jkl-table-of-contents .jkl-table-of-contents-item:not(:last-of-type) .jkl-table-of-contents-link{-webkit-border-after:var(--border);border-block-end:var(--border)}.jkl-table-of-contents .jkl-table-of-contents-link{align-items:center;box-sizing:border-box;color:var(--text-color);display:flex;gap:var(--jkl-unit-20);text-decoration:none;text-wrap:balance;width:100%}.jkl-table-of-contents:has(ol) .jkl-table-of-contents-title{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-of-contents ol{border-block:var(--border);counter-reset:table-of-contents;display:flex;flex-direction:column;height:-webkit-min-content;height:min-content;margin:0;padding:0;width:100%}.jkl-table-of-contents ol:has(.jkl-table-of-contents-link:is(:hover,:focus-visible)){--text-color:rgb(from currentColor r g b/60%)}.jkl-table-of-contents ol:has(.jkl-table-of-contents-link:is(:hover,:focus-visible)) .jkl-table-of-contents-link:is(:hover,:focus-visible){--text-color:rgb(from currentColor r g b/100%)}.jkl-table-of-contents ol .jkl-table-of-contents-item{counter-increment:table-of-contents}.jkl-table-of-contents ol .jkl-table-of-contents-link{-webkit-padding-end:var(--jkl-unit-20);padding-block:var(--ordered-item-padding);padding-inline-end:var(--jkl-unit-20);transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-table-of-contents ol .jkl-table-of-contents-link:before{color:inherit;content:counter(table-of-contents,decimal-leading-zero);font-family:var(--jkl-font-family-mono);font-size:var(--jkl-small-font-size)}}
+@layer jokul.components{.jkl-table-of-contents{--ordered-item-padding:var(--jkl-unit-10);--border:1px solid var(--jkl-color-border-subdued);--text-color:var(--jkl-color-text-default)}.jkl-table-of-contents .jkl-table-of-contents-title{-webkit-margin-after:var(--jkl-unit-05);margin-block-end:var(--jkl-unit-05);font:var(--jkl-text-style-paragraph-small)}.jkl-table-of-contents .jkl-table-of-contents-item{display:flex}.jkl-table-of-contents .jkl-table-of-contents-item:not(:last-of-type) .jkl-table-of-contents-link{-webkit-border-after:var(--border);border-block-end:var(--border)}.jkl-table-of-contents .jkl-table-of-contents-link{display:flex;align-items:center;gap:var(--jkl-unit-20);width:100%;text-decoration:none;color:var(--text-color);text-wrap:balance;box-sizing:border-box}.jkl-table-of-contents:has(ol) .jkl-table-of-contents-title{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;width:1px!important;white-space:nowrap!important}.jkl-table-of-contents ol{display:flex;flex-direction:column;width:100%;padding:0;margin:0;height:-webkit-min-content;height:min-content;border-block:var(--border);counter-reset:table-of-contents}.jkl-table-of-contents ol:has(.jkl-table-of-contents-link:is(:hover,:focus-visible)){--text-color:rgb(from currentColor r g b / 60%)}.jkl-table-of-contents ol:has(.jkl-table-of-contents-link:is(:hover,:focus-visible)) .jkl-table-of-contents-link:is(:hover,:focus-visible){--text-color:rgb(from currentColor r g b / 100%)}.jkl-table-of-contents ol .jkl-table-of-contents-item{counter-increment:table-of-contents}.jkl-table-of-contents ol .jkl-table-of-contents-link{-webkit-padding-end:var(--jkl-unit-20);padding-inline-end:var(--jkl-unit-20);padding-block:var(--ordered-item-padding);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:var(--jkl-font-family-mono);color:inherit;font-size:var(--jkl-small-font-size)}}

package/styles/components/tabs/tabs.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-tabs{width:100%}.jkl-tablist{--padding-inline-end:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--line-color:var(--jkl-color-border-subdued);--indicator-color:var(--jkl-color-border-default);border-bottom:1px solid var(--line-color);display:inline-flex;flex-direction:row;margin:0;max-width:100%;overflow:scroll hidden;padding:0;position:relative;scroll-snap-type:x proximity;scrollbar-width:none;width:-webkit-fit-content;width:fit-content}@media screen and (forced-colors:active){.jkl-tablist{border-color:GrayText}}.jkl-tablist::-webkit-scrollbar{display:none}@supports (position-anchor:--active-tab){.jkl-tablist:after{background-color:var(--indicator-color);content:"";height:2px;inset-block-start:calc(anchor(end) - 2px);inset-inline-start:calc(anchor(--active-tab start));position:absolute;position-anchor:--active-tab;transition-duration:var(--jkl-motion-timing-lazy);transition-timing-function:var(--jkl-motion-easing-standard);width:calc(anchor-size(inline) - var(--padding-inline-end))}}.jkl-tab{--padding-inline-end:var(--jkl-unit-50);background-color:initial;border:none;border-style:none;color:var(--text-color);font:var(--jkl-text-style-text-medium);padding:var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);position:relative;scroll-margin-inline-start:var(--jkl-unit-20);scroll-snap-align:start;text-decoration:none;white-space:nowrap}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{border-style:revert}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-subdued)}.jkl-tab:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-2px}.jkl-tab[aria-selected=true]{anchor-name:--active-tab;--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}@supports not (position-anchor:--active-tab){.jkl-tab[aria-selected=true]{position:relative}.jkl-tab[aria-selected=true]:after{background-color:var(--indicator-color);content:"";height:2px;inset-block-end:0;inset-inline-start:0;position:absolute;transition-duration:var(--jkl-motion-timing-lazy);transition-timing-function:var(--jkl-motion-easing-standard);width:calc(100% - var(--padding-inline-end))}}}
+@layer jokul.components{.jkl-tabs{width:100%}.jkl-tablist{--padding-inline-end:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--line-color:var(--jkl-color-border-subdued);--indicator-color:var(--jkl-color-border-default);scroll-snap-type:x proximity;overflow:scroll hidden;scrollbar-width:none;position:relative;display:inline-flex;flex-direction:row;padding:0;margin:0;border-bottom:1px solid var(--line-color);width:-webkit-fit-content;width:fit-content;max-width:100%}@media screen and (forced-colors:active){.jkl-tablist{border-color:GrayText}}.jkl-tablist::-webkit-scrollbar{display:none}@supports (position-anchor:--active-tab){.jkl-tablist:after{content:"";position:absolute;position-anchor:--active-tab;height:2px;width:calc(anchor-size(inline) - var(--padding-inline-end));inset-block-start:calc(anchor(end) - 2px);inset-inline-start:calc(anchor(--active-tab start));background-color:var(--indicator-color);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-lazy)}}.jkl-tab{--padding-inline-end:var(--jkl-unit-50);font:var(--jkl-text-style-text-medium);color:var(--text-color);padding:var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);border:none;background-color:initial;position:relative;scroll-margin-inline-start:var(--jkl-unit-20);scroll-snap-align:start;text-decoration:none;white-space:nowrap;border-style:none}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{border-style:revert}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-subdued)}.jkl-tab:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-2px}.jkl-tab[aria-selected=true]{anchor-name:--active-tab;--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}@supports not (position-anchor:--active-tab){.jkl-tab[aria-selected=true]{position:relative}.jkl-tab[aria-selected=true]:after{content:"";position:absolute;height:2px;width:calc(100% - var(--padding-inline-end));inset-block-end:0;inset-inline-start:0;background-color:var(--indicator-color);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-lazy)}}}

package/styles/components/tag/tag.min.css

@@ -1 +1 @@
-.jkl-tag{--padding:var(--jkl-unit-02) var(--jkl-unit-10);--gap:var(--jkl-unit-05);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-subdued);align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:.25rem;color:var(--text-color);display:inline-flex;font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);gap:var(--gap);padding:var(--padding);white-space:nowrap}.jkl-tag--info{--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-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-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-accent);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}@media screen and (forced-colors:active){.jkl-tag{border:2px CanvasText;border-style:none none dotted}.jkl-tag--info{border-style:dotted}.jkl-tag--warning{border-style:dashed}.jkl-tag--error{border-style:double;border-width:4px}.jkl-tag--success{border-style:solid}}
+.jkl-tag{--padding:var(--jkl-unit-02) var(--jkl-unit-10);--gap:var(--jkl-unit-05);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-subdued);font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);background-color:var(--background-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:.25rem;display:inline-flex;align-items:center;white-space:nowrap;padding:var(--padding);gap:var(--gap)}.jkl-tag--info{--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-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-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-accent);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}@media screen and (forced-colors:active){.jkl-tag{border:2px CanvasText;border-style:none none dotted}.jkl-tag--info{border-style:dotted}.jkl-tag--warning{border-style:dashed}.jkl-tag--error{border-style:double;border-width:4px}.jkl-tag--success{border-style:solid}}