@fremtind/jokul 0.64.0 → 0.64.2

package/styles/components/tabs/tabs.css

@@ -7,6 +7,7 @@
 [data-density=comfortable] {
   --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15)
       var(--jkl-unit-02);
+  --jkl-tab-padding-inline-end: var(--jkl-unit-50);
   --jkl-tab-font-size: var(--jkl-body-font-size);
   --jkl-tab-line-height: var(--jkl-body-line-height);
   --jkl-tab-font-weight: var(--jkl-body-font-weight);
@@ -17,6 +18,7 @@
   [data-density=comfortable] {
     --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-30)
         var(--jkl-unit-15) var(--jkl-unit-02);
+    --jkl-tab-padding-inline-end: var(--jkl-unit-30);
   }
 }
 
@@ -27,6 +29,7 @@
   --jkl-tab-font-weight: var(--jkl-small-font-weight);
   --jkl-tab-padding: var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05)
       0;
+  --jkl-tab-padding-inline-end: var(--jkl-unit-40);
 }
 
 .jkl-tabs {
@@ -49,20 +52,6 @@
   width: fit-content;
   max-width: 100%;
 }
-.jkl-tablist__indicator {
-  position: absolute;
-  height: 2px;
-  background-color: var(--indicator-color);
-  transition-timing-function: ease;
-  transition-duration: 400ms;
-  transition-property: left, width;
-  will-change: left, width;
-}
-@media screen and (forced-colors: active) {
-  .jkl-tablist__indicator {
-    background-color: Highlight;
-  }
-}
 @media screen and (forced-colors: active) {
   .jkl-tablist {
     border-color: GrayText;
@@ -71,6 +60,20 @@
 .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(--jkl-tab-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: ease;
+    transition-duration: 400ms;
+  }
+}
 
 .jkl-tab {
   font-size: var(--jkl-tab-font-size);
@@ -115,7 +118,24 @@
   outline-offset: -2px;
 }
 .jkl-tab[aria-selected=true] {
+  anchor-name: --active-tab;
   --jkl-icon-weight: 500;
   font-weight: 700;
   letter-spacing: -0.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(--jkl-tab-padding-inline-end));
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    background-color: var(--indicator-color);
+    transition-timing-function: ease;
+    transition-duration: 400ms;
+  }
 }

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

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15) var(--jkl-unit-02);--jkl-tab-font-size:var(--jkl-body-font-size);--jkl-tab-line-height:var(--jkl-body-line-height);--jkl-tab-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-unit-10) var(--jkl-unit-30) var(--jkl-unit-15) var(--jkl-unit-02)}}[data-density=compact],[data-layout-density=compact]{--jkl-tab-font-size:var(--jkl-small-font-size);--jkl-tab-line-height:var(--jkl-small-line-height);--jkl-tab-font-weight:var(--jkl-small-font-weight);--jkl-tab-padding:var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05) 0}.jkl-tabs{width:100%}.jkl-tablist{--text-color:var(--jkl-color-text-interactive);--line-color:var(--jkl-color-border-separator);--indicator-color:var(--jkl-color-border-separator-hover);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}.jkl-tablist__indicator{background-color:var(--indicator-color);height:2px;position:absolute;transition-duration:.4s;transition-property:left,width;transition-timing-function:ease;will-change:left,width}@media screen and (forced-colors:active){.jkl-tablist__indicator{background-color:Highlight}.jkl-tablist{border-color:GrayText}}.jkl-tablist::-webkit-scrollbar{display:none}.jkl-tab{background-color:transparent;border:none;border-style:none;color:var(--text-color);cursor:pointer;font-size:var(--jkl-tab-font-size);font-weight:var(--jkl-tab-font-weight);line-height:var(--jkl-tab-line-height);outline:0;outline-style:none;padding:var(--jkl-tab-padding);position:relative;scroll-margin-inline-start:var(--jkl-unit-20);scroll-snap-align:start;text-decoration:none;white-space:nowrap}.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;outline:revert;outline-style:revert}.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-interactive-hover)}.jkl-tab:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-2px}.jkl-tab[aria-selected=true]{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15) var(--jkl-unit-02);--jkl-tab-padding-inline-end:var(--jkl-unit-50);--jkl-tab-font-size:var(--jkl-body-font-size);--jkl-tab-line-height:var(--jkl-body-line-height);--jkl-tab-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-unit-10) var(--jkl-unit-30) var(--jkl-unit-15) var(--jkl-unit-02);--jkl-tab-padding-inline-end:var(--jkl-unit-30)}}[data-density=compact],[data-layout-density=compact]{--jkl-tab-font-size:var(--jkl-small-font-size);--jkl-tab-line-height:var(--jkl-small-line-height);--jkl-tab-font-weight:var(--jkl-small-font-weight);--jkl-tab-padding:var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05) 0;--jkl-tab-padding-inline-end:var(--jkl-unit-40)}.jkl-tabs{width:100%}.jkl-tablist{--text-color:var(--jkl-color-text-interactive);--line-color:var(--jkl-color-border-separator);--indicator-color:var(--jkl-color-border-separator-hover);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{content:"";position:absolute;position-anchor:--active-tab;background-color:var(--indicator-color);height:2px;inset-block-start:calc(anchor(end) - 2px);inset-inline-start:calc(anchor(--active-tab start));transition-duration:.4s;transition-timing-function:ease;width:calc(anchor-size(inline) - var(--jkl-tab-padding-inline-end))}}.jkl-tab{background-color:transparent;border:none;border-style:none;color:var(--text-color);cursor:pointer;font-size:var(--jkl-tab-font-size);font-weight:var(--jkl-tab-font-weight);line-height:var(--jkl-tab-line-height);outline:0;outline-style:none;padding:var(--jkl-tab-padding);position:relative;scroll-margin-inline-start:var(--jkl-unit-20);scroll-snap-align:start;text-decoration:none;white-space:nowrap}.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;outline:revert;outline-style:revert}.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-interactive-hover)}.jkl-tab:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-2px}.jkl-tab[aria-selected=true]{anchor-name:--active-tab;--jkl-icon-weight:500;font-weight:700;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:.4s;transition-timing-function:ease;width:calc(100% - var(--jkl-tab-padding-inline-end))}}

package/styles/components/tabs/tabs.scss

@@ -4,11 +4,13 @@
 @include jkl.comfortable-density-variables {
     --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15)
         var(--jkl-unit-02);
+    --jkl-tab-padding-inline-end: var(--jkl-unit-50);
 
     @include jkl.declare-font-variables("jkl-tab", "body");
     @include jkl.small-device {
         --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-30)
             var(--jkl-unit-15) var(--jkl-unit-02);
+        --jkl-tab-padding-inline-end: var(--jkl-unit-30);
     }
 }
 
@@ -17,6 +19,7 @@
 
     --jkl-tab-padding: var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05)
         0;
+    --jkl-tab-padding-inline-end: var(--jkl-unit-40);
 }
 
 .jkl-tabs {
@@ -40,19 +43,6 @@
     width: fit-content;
     max-width: 100%;
 
-    &__indicator {
-        position: absolute;
-        height: 2px;
-        background-color: var(--indicator-color);
-        @include jkl.motion("standard", "lazy");
-        transition-property: left, width;
-        will-change: left, width;
-
-        @include jkl.forced-colors-mode {
-            background-color: Highlight;
-        }
-    }
-
     @include jkl.forced-colors-mode {
         border-color: GrayText;
     }
@@ -60,6 +50,22 @@
     &::-webkit-scrollbar {
         display: none;
     }
+
+    @supports (position-anchor: --active-tab) {
+        &::after {
+            content: "";
+            position: absolute;
+            position-anchor: --active-tab;
+            height: 2px;
+            width: calc(
+                anchor-size(inline) - var(--jkl-tab-padding-inline-end)
+            );
+            inset-block-start: calc(anchor(end) - 2px);
+            inset-inline-start: calc(anchor(--active-tab start));
+            background-color: var(--indicator-color);
+            @include jkl.motion("standard", "lazy");
+        }
+    }
 }
 
 .jkl-tab {
@@ -86,6 +92,22 @@
     }
 
     &[aria-selected="true"] {
+        anchor-name: --active-tab;
         @include jkl.no-grow-bold;
+
+        @supports not (position-anchor: --active-tab) {
+            position: relative;
+
+            &::after {
+                content: "";
+                position: absolute;
+                height: 2px;
+                width: calc(100% - var(--jkl-tab-padding-inline-end));
+                inset-block-end: 0;
+                inset-inline-start: 0;
+                background-color: var(--indicator-color);
+                @include jkl.motion("standard", "lazy");
+            }
+        }
     }
 }

package/styles/components/toast/toast.css

@@ -185,14 +185,14 @@
 
 .jkl-toast[data-animation=entering],
 .jkl-toast[data-animation=queued] {
-  animation: jkl-entering-u410oid 200ms ease-out forwards;
+  animation: jkl-entering-u9jzeih 200ms ease-out forwards;
 }
 
 .jkl-toast[data-animation=exiting] {
-  animation: jkl-exiting-u410ojc 150ms ease-in forwards;
+  animation: jkl-exiting-u9jzejf 150ms ease-in forwards;
 }
 
-@keyframes jkl-entering-u410oid {
+@keyframes jkl-entering-u9jzeih {
   from {
     opacity: 0;
     transform: translate3d(0, 50%, 0);
@@ -202,7 +202,7 @@
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes jkl-exiting-u410ojc {
+@keyframes jkl-exiting-u9jzejf {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);

package/styles/components/toast/toast.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*2)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*1.5)}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:transparent;bottom:calc(var(--jkl-unit-10)*3);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:calc(var(--jkl-unit-10)*2);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:calc(var(--jkl-unit-10)*3)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);display:grid;font-size:1.125rem;font-weight:400;grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-toast__progress{grid-area:progress;margin-bottom:calc(var(--jkl-unit-10)*2);margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:transparent;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:calc(var(--jkl-unit-10)*1.5)}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 calc(var(--jkl-unit-10)*.5) 0;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-toast-gap);padding:0;position:relative}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-increment:-0.75rem;border-radius:.1875rem;content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-u410oid .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-u410ojc .15s ease-in forwards}@keyframes jkl-entering-u410oid{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-u410ojc{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*2)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*1.5)}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:transparent;bottom:calc(var(--jkl-unit-10)*3);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:calc(var(--jkl-unit-10)*2);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:calc(var(--jkl-unit-10)*3)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);display:grid;font-size:1.125rem;font-weight:400;grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-toast__progress{grid-area:progress;margin-bottom:calc(var(--jkl-unit-10)*2);margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:transparent;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:calc(var(--jkl-unit-10)*1.5)}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 calc(var(--jkl-unit-10)*.5) 0;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-toast-gap);padding:0;position:relative}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-increment:-0.75rem;border-radius:.1875rem;content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-u9jzeih .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-u9jzejf .15s ease-in forwards}@keyframes jkl-entering-u9jzeih{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-u9jzejf{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}

package/styles/styles.css

@@ -783,7 +783,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
   --color: var(--jkl-color-text-default);
 }
 .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u829ruf forwards;
+  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u38vjm8 forwards;
 }
 .jkl-form-support-label--sr-only {
   border: 0 !important;
@@ -858,7 +858,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
   white-space: nowrap !important; /* 3 */
 }
 
-@keyframes jkl-support-icon-entrance-u829ruf {
+@keyframes jkl-support-icon-entrance-u38vjm8 {
   0% {
     margin-right: 0;
     opacity: 0;
@@ -1139,12 +1139,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   initial-value: 0;
   inherits: false;
 }
-@keyframes button-fade-u829rvb {
+@keyframes button-fade-u38vjmh {
   from {
     --jkl-button-flash-opacity: 0.5;
   }
 }
-@keyframes button-grow-u829rv9 {
+@keyframes button-grow-u38vjmc {
   to {
     --jkl-button-flash-radius: 150%;
   }
@@ -1230,7 +1230,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   --hover-opacity: 0.15;
 }
 .jkl-button.jkl-button--pressed {
-  animation-name: button-fade-u829rvb, button-grow-u829rv9;
+  animation-name: button-fade-u38vjmh, button-grow-u38vjmc;
 }
 .jkl-button--primary, .jkl-button--secondary, .jkl-button--ghost {
   --border-radius: 999px;
@@ -1268,15 +1268,15 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   animation: 2500ms linear infinite;
 }
 .jkl-loader__dot--left {
-  animation-name: jkl-loader-left-spin-u829rw1;
+  animation-name: jkl-loader-left-spin-u38vjmo;
   margin-right: 1.71em;
 }
 .jkl-loader__dot--middle {
-  animation-name: jkl-loader-middle-spin-u829rwi;
+  animation-name: jkl-loader-middle-spin-u38vjn1;
   margin-right: 1.9em;
 }
 .jkl-loader__dot--right {
-  animation-name: jkl-loader-right-spin-u829rwk;
+  animation-name: jkl-loader-right-spin-u38vjnv;
 }
 @media screen and (forced-colors: active) {
   .jkl-loader__dot {
@@ -1304,7 +1304,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   margin-right: 0.3em;
 }
 
-@keyframes jkl-loader-left-spin-u829rw1 {
+@keyframes jkl-loader-left-spin-u38vjmo {
   0% {
     transform: rotate(0) scale(0);
   }
@@ -1318,7 +1318,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
     transform: rotate(180deg) scale(0);
   }
 }
-@keyframes jkl-loader-middle-spin-u829rwi {
+@keyframes jkl-loader-middle-spin-u38vjn1 {
   0% {
     transform: rotate(20deg) scale(0);
   }
@@ -1335,7 +1335,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
     transform: rotate(200deg) scale(0);
   }
 }
-@keyframes jkl-loader-right-spin-u829rwk {
+@keyframes jkl-loader-right-spin-u38vjnv {
   0% {
     transform: rotate(40deg) scale(0);
   }
@@ -1383,7 +1383,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   bottom: 0;
   width: 12.5rem;
   background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
-  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u829rwv;
+  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u38vjoa;
 }
 @media (width >= 0) and (max-width: 679px) {
   .jkl-skeleton-animation {
@@ -1414,7 +1414,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
 @media screen and (forced-colors: active) {
   .jkl-skeleton-element {
     border: 1px solid CanvasText;
-    animation: 2s ease infinite jkl-blink-u829rx9;
+    animation: 2s ease infinite jkl-blink-u38vjp1;
   }
 }
 
@@ -1470,11 +1470,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
 }
 @media screen and (forced-colors: active) {
   .jkl-skeleton-table {
-    animation: 2s ease-in-out infinite jkl-blink-u829rx9;
+    animation: 2s ease-in-out infinite jkl-blink-u38vjp1;
   }
 }
 
-@keyframes jkl-sweep-u829rwv {
+@keyframes jkl-sweep-u38vjoa {
   0% {
     transform: translateX(calc(0vw - 200px));
   }
@@ -1482,7 +1482,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
     transform: translateX(calc(100vw + 400px));
   }
 }
-@keyframes jkl-blink-u829rx9 {
+@keyframes jkl-blink-u38vjp1 {
   0% {
     opacity: 1;
   }
@@ -1946,7 +1946,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   --jkl-checkbox-line-height: 1.5rem;
 }
 
-@keyframes jkl-checkbox-checked-u829rxs {
+@keyframes jkl-checkbox-checked-u38vjpb {
   0% {
     width: 0;
     height: 0;
@@ -1960,7 +1960,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
     height: 58%;
   }
 }
-@keyframes jkl-checkbox-indeterminate-u829rxx {
+@keyframes jkl-checkbox-indeterminate-u38vjpw {
   0% {
     width: 0;
   }
@@ -1989,11 +1989,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   left: calc(-0.5 * var(--jkl-checkbox-box-size));
 }
 .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-  animation: jkl-checkbox-checked-u829rxs 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-u38vjpb 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-  animation: jkl-checkbox-indeterminate-u829rxx 150ms ease-in-out forwards;
+  animation: jkl-checkbox-indeterminate-u38vjpw 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
@@ -2164,7 +2164,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   --outer-border-thickness: 0.125rem;
 }
 
-@keyframes jkl-checkbox-checked-u829rxz {
+@keyframes jkl-checkbox-checked-u38vjqt {
   0% {
     width: 0;
     height: 0;
@@ -2227,7 +2227,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   }
 }
 .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
-  animation: jkl-checkbox-checked-u829rxz 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-u38vjqt 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox-panel:has([aria-invalid=true]) {
@@ -2920,11 +2920,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   }
 }
 .jkl-countdown__tracker {
-  animation: jkl-downcount-u829ryf var(--duration) linear forwards;
+  animation: jkl-downcount-u38vjrc var(--duration) linear forwards;
   animation-play-state: var(--play-state, running);
 }
 
-@keyframes jkl-downcount-u829ryf {
+@keyframes jkl-downcount-u38vjrc {
   from {
     width: 100%;
   }
@@ -3596,7 +3596,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   padding: 1rem 0 2.5rem 0;
 }
 
-@keyframes jkl-show-u829ryx {
+@keyframes jkl-show-u38vjrh {
   from {
     transform: translate3d(0, 0.5rem, 0);
     opacity: 0;
@@ -3631,7 +3631,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   }
 }
 .jkl-feedback__fade-in {
-  animation: jkl-show-u829ryx 0.25s ease-out;
+  animation: jkl-show-u38vjrh 0.25s ease-out;
 }
 .jkl-feedback__buttons {
   display: flex;
@@ -3873,7 +3873,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   --background-color: var(--jkl-color-background-alert-success);
 }
 .jkl-message--dismissed {
-  animation: jkl-dismiss-u829rz9 400ms ease-in-out forwards;
+  animation: jkl-dismiss-u38vjsf 400ms ease-in-out forwards;
   transition: visibility 0ms 400ms;
   visibility: hidden;
 }
@@ -3893,7 +3893,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   }
 }
 
-@keyframes jkl-dismiss-u829rz9 {
+@keyframes jkl-dismiss-u38vjsf {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -3949,7 +3949,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
 }
 
-@keyframes jkl-dot-in-u829s04 {
+@keyframes jkl-dot-in-u38vjtf {
   0% {
     transform: scale(0.8);
   }
@@ -3995,7 +3995,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 }
 .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
   --dot-color: var(--jkl-color-border-action);
-  animation: jkl-dot-in-u829s04 150ms ease;
+  animation: jkl-dot-in-u38vjtf 150ms ease;
 }
 @media screen and (forced-colors: active) {
   .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -5086,7 +5086,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
   transition-duration: 150ms;
 }
 
-@keyframes jkl-downcount-u829s0y {
+@keyframes jkl-downcount-u38vjuf {
   from {
     width: 100%;
   }
@@ -5094,7 +5094,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
     width: 0%;
   }
 }
-@keyframes jkl-dot-in-u829s1p {
+@keyframes jkl-dot-in-u38vjuv {
   0% {
     transform: scale(0.8);
   }
@@ -5142,7 +5142,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
   }
 }
 .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
-  animation: jkl-dot-in-u829s1p 150ms ease;
+  animation: jkl-dot-in-u38vjuv 150ms ease;
 }
 .jkl-radio-panel:has(:checked) {
   --radio-dot-color: var(--jkl-color-border-action);
@@ -5354,7 +5354,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
   margin-bottom: 0;
 }
 .jkl-system-message--dismissed {
-  animation: jkl-dismiss-u829s1x 400ms ease-in forwards;
+  animation: jkl-dismiss-u38vjvb 400ms ease-in forwards;
   transition: visibility 0ms 400ms;
   visibility: hidden;
 }
@@ -5386,7 +5386,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
   }
 }
 
-@keyframes jkl-dismiss-u829s1x {
+@keyframes jkl-dismiss-u38vjvb {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -5961,6 +5961,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
 [data-density=comfortable] {
   --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15)
       var(--jkl-unit-02);
+  --jkl-tab-padding-inline-end: var(--jkl-unit-50);
   --jkl-tab-font-size: var(--jkl-body-font-size);
   --jkl-tab-line-height: var(--jkl-body-line-height);
   --jkl-tab-font-weight: var(--jkl-body-font-weight);
@@ -5971,6 +5972,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   [data-density=comfortable] {
     --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-30)
         var(--jkl-unit-15) var(--jkl-unit-02);
+    --jkl-tab-padding-inline-end: var(--jkl-unit-30);
   }
 }
 
@@ -5981,6 +5983,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   --jkl-tab-font-weight: var(--jkl-small-font-weight);
   --jkl-tab-padding: var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05)
       0;
+  --jkl-tab-padding-inline-end: var(--jkl-unit-40);
 }
 
 .jkl-tabs {
@@ -6003,20 +6006,6 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   width: fit-content;
   max-width: 100%;
 }
-.jkl-tablist__indicator {
-  position: absolute;
-  height: 2px;
-  background-color: var(--indicator-color);
-  transition-timing-function: ease;
-  transition-duration: 400ms;
-  transition-property: left, width;
-  will-change: left, width;
-}
-@media screen and (forced-colors: active) {
-  .jkl-tablist__indicator {
-    background-color: Highlight;
-  }
-}
 @media screen and (forced-colors: active) {
   .jkl-tablist {
     border-color: GrayText;
@@ -6025,6 +6014,20 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
 .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(--jkl-tab-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: ease;
+    transition-duration: 400ms;
+  }
+}
 
 .jkl-tab {
   font-size: var(--jkl-tab-font-size);
@@ -6069,10 +6072,27 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   outline-offset: -2px;
 }
 .jkl-tab[aria-selected=true] {
+  anchor-name: --active-tab;
   --jkl-icon-weight: 500;
   font-weight: 700;
   letter-spacing: -0.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(--jkl-tab-padding-inline-end));
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    background-color: var(--indicator-color);
+    transition-timing-function: ease;
+    transition-duration: 400ms;
+  }
+}
 
 :root,
 [data-layout-density=comfortable],
@@ -6257,14 +6277,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
 
 .jkl-toast[data-animation=entering],
 .jkl-toast[data-animation=queued] {
-  animation: jkl-entering-u829s2m 200ms ease-out forwards;
+  animation: jkl-entering-u38vjvl 200ms ease-out forwards;
 }
 
 .jkl-toast[data-animation=exiting] {
-  animation: jkl-exiting-u829s3l 150ms ease-in forwards;
+  animation: jkl-exiting-u38vjw4 150ms ease-in forwards;
 }
 
-@keyframes jkl-entering-u829s2m {
+@keyframes jkl-entering-u38vjvl {
   from {
     opacity: 0;
     transform: translate3d(0, 50%, 0);
@@ -6274,7 +6294,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes jkl-exiting-u829s3l {
+@keyframes jkl-exiting-u38vjw4 {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);