npm - @fremtind/jokul - Versions diffs - 5.0.0-next.1 → 5.0.0-next.2 - Mend

@fremtind/jokul 5.0.0-next.1 → 5.0.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/styles/components/summary-table/summary-table.scss CHANGED Viewed

@@ -39,9 +39,9 @@
         & > tfoot {
             border-top: jkl.rem(1px) solid
-                var(--jkl-color-border-separator-strong);
+                var(--jkl-color-border-strong);
             border-bottom: jkl.rem(1px) solid
-                var(--jkl-color-border-separator-strong);
+                var(--jkl-color-border-strong);
             padding-top: var(--jkl-unit-10);
             th,

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

@@ -9,12 +9,14 @@
     --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-spacing-20);
-    --background-color: var(--jkl-color-background-alert-neutral);
-    --text-color: var(--jkl-color-text-on-alert);
+    --jkl-system-message-message-margin: 0 var(--jkl-unit-20);
+    --background-color: var(--jkl-color-background-container);
+    --text-color: var(--jkl-color-text-default);
+    --border-color: var(--jkl-color-border-subdued);
     width: 100%;
     background-color: var(--background-color);
     color: var(--text-color);
+    border: 1px solid var(--border-color);
     transition-behavior: allow-discrete;
     box-sizing: border-box;
   }
@@ -110,7 +112,7 @@
     }
   }
   .jkl-system-message__dismiss-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   @media screen and (forced-colors: active) {
@@ -123,20 +125,28 @@
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u297jx9 var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uyfjq5k 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-background-alert-info);
+    --background-color: var(--jkl-color-info-background-container);
+    --text-color: var(--jkl-color-info-text-default);
+    --border-color: var(--jkl-color-info-border-subdued);
   }
   .jkl-system-message--warning {
-    --background-color: var(--jkl-color-background-alert-warning);
+    --background-color: var(--jkl-color-warning-background-container);
+    --text-color: var(--jkl-color-warning-text-default);
+    --border-color: var(--jkl-color-warning-border-subdued);
   }
   .jkl-system-message--error {
-    --background-color: var(--jkl-color-background-alert-error);
+    --background-color: var(--jkl-color-error-background-container);
+    --text-color: var(--jkl-color-error-text-default);
+    --border-color: var(--jkl-color-error-border-subdued);
   }
   .jkl-system-message--success {
-    --background-color: var(--jkl-color-background-alert-success);
+    --background-color: var(--jkl-color-success-background-container);
+    --text-color: var(--jkl-color-success-text-default);
+    --border-color: var(--jkl-color-success-border-subdued);
   }
   @media screen and (forced-colors: active) {
     .jkl-system-message {
@@ -153,7 +163,7 @@
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u297jx9 {
+  @keyframes jkl-dismiss-uyfjq5k {
     from {
       opacity: 1;
       transform: translateY(0);

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

	@@ -1 +1 @@
1	- @layer jokul.components{.jkl-system-message{--jkl-system-message-icon-height:var(--jkl-unit-30);--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-~~spacing~~-20);--background-color:var(--jkl-color-background-~~alert-neutral~~);--text-color:var(--jkl-color-text-on-~~alert~~);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{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@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:transparent;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;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-interactive-hover)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.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-~~action~~);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-~~u297jx9~~ 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-background-~~alert~~-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-~~alert~~-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-~~alert~~-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-~~alert~~-success)}@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-~~u297jx9~~{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}
1	+ @layer jokul.components{.jkl-system-message{--jkl-system-message-icon-height:var(--jkl-unit-30);--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-unit-20);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-subdued);background-color:var(--background-color);border:1px solid var(--border-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{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@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:transparent;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;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-interactive-hover)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.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-uyfjq5k var(--jkl-motion-timing-lazy) forwards;transition:block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy)}.jkl-system-message--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-system-message--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-system-message--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-system-message--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}@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-uyfjq5k{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}

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

@@ -15,13 +15,15 @@ $_dismiss-animation-duration: jkl.timing("lazy");
                 6.5px
             )} -#{jkl.rem(18px)} -#{jkl.rem(6.5px)}
             auto;
-        --jkl-system-message-message-margin: 0 var(--jkl-spacing-20);
-        --background-color: var(--jkl-color-background-alert-neutral);
-        --text-color: var(--jkl-color-text-on-alert);
+        --jkl-system-message-message-margin: 0 var(--jkl-unit-20);
+        --background-color: var(--jkl-color-background-container);
+        --text-color: var(--jkl-color-text-default);
+        --border-color: var(--jkl-color-border-subdued);
         width: 100%;
         background-color: var(--background-color);
         color: var(--text-color);
+        border: 1px solid var(--border-color);
         transition-behavior: allow-discrete;
         box-sizing: border-box;
@@ -106,19 +108,27 @@ $_dismiss-animation-duration: jkl.timing("lazy");
         }
         &--info {
-            --background-color: var(--jkl-color-background-alert-info);
+            --background-color: var(--jkl-color-info-background-container);
+            --text-color: var(--jkl-color-info-text-default);
+            --border-color: var(--jkl-color-info-border-subdued);
         }
         &--warning {
-            --background-color: var(--jkl-color-background-alert-warning);
+            --background-color: var(--jkl-color-warning-background-container);
+            --text-color: var(--jkl-color-warning-text-default);
+            --border-color: var(--jkl-color-warning-border-subdued);
         }
         &--error {
-            --background-color: var(--jkl-color-background-alert-error);
+            --background-color: var(--jkl-color-error-background-container);
+            --text-color: var(--jkl-color-error-text-default);
+            --border-color: var(--jkl-color-error-border-subdued);
         }
         &--success {
-            --background-color: var(--jkl-color-background-alert-success);
+            --background-color: var(--jkl-color-success-background-container);
+            --text-color: var(--jkl-color-success-text-default);
+            --border-color: var(--jkl-color-success-border-subdued);
         }
         @include jkl.forced-colors-mode {

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

@@ -16,7 +16,7 @@
                 border-bottom: none;
                 box-shadow: inset 0 0 0 #000,
-                    inset 0 var(--jkl-border-width-1) 0 var(--jkl-color-border-separator-strong);
+                    inset 0 var(--jkl-border-width-1) 0 var(--jkl-color-border-strong);
                 background-clip: padding-box;
                 // legg til litt (nesten-cirka 16px) over headingen

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

@@ -5,9 +5,9 @@ $_focus-ring-width: jkl.rem(2px);
 @layer jokul.components {
     .jkl-table-row {
-        --jkl-table-row-border-color: var(--jkl-color-border-separator);
+        --jkl-table-row-border-color: var(--jkl-color-border-subdued);
         --jkl-table-row-border-none-color: transparent;
-        --jkl-table-row-hover-border-color: var(--jkl-color-border-separator-strong);
+        --jkl-table-row-hover-border-color: var(--jkl-color-border-strong);
         --jkl-table-row-highlight-color: var(--jkl-color-background-interactive-selected);
         border-bottom: solid $_border-size var(--jkl-table-row-border-color);

package/styles/components/table/table.css CHANGED Viewed

@@ -103,7 +103,7 @@
     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-separator-strong);
+    box-shadow: inset 0 0 0 #000, inset 0 var(--jkl-border-width-1) 0 var(--jkl-color-border-strong);
     background-clip: padding-box;
     vertical-align: bottom;
     height: 2.3em;
@@ -273,9 +273,9 @@
 }
 @layer jokul.components {
   .jkl-table-row {
-    --jkl-table-row-border-color: var(--jkl-color-border-separator);
+    --jkl-table-row-border-color: var(--jkl-color-border-subdued);
     --jkl-table-row-border-none-color: transparent;
-    --jkl-table-row-hover-border-color: var(--jkl-color-border-separator-strong);
+    --jkl-table-row-hover-border-color: var(--jkl-color-border-strong);
     --jkl-table-row-highlight-color: var(--jkl-color-background-interactive-selected);
     border-bottom: solid 0.0625rem var(--jkl-table-row-border-color);
   }

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

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

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

@@ -4,7 +4,7 @@
 @layer jokul.components {
   .jkl-table-of-contents {
     --ordered-item-padding: var(--jkl-unit-10);
-    --border: 1px solid var(--jkl-color-border-separator);
+    --border: 1px solid var(--jkl-color-border-subdued);
     --text-color: var(--jkl-color-text-default);
   }
   .jkl-table-of-contents .jkl-table-of-contents-title {

package/styles/components/table-of-contents/table-of-contents.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer jokul.components{.jkl-table-of-contents{--ordered-item-padding:var(--jkl-unit-10);--border:1px solid var(--jkl-color-border-~~separator~~);--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:Fremtind Grotesk Mono,Adjusted Courier New Fallback,-apple-system,BlinkMacSystemFont,monospace;font-size:var(--jkl-small-font-size)}}
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:Fremtind Grotesk Mono,Adjusted Courier New Fallback,-apple-system,BlinkMacSystemFont,monospace;font-size:var(--jkl-small-font-size)}}

package/styles/components/table-of-contents/table-of-contents.scss CHANGED Viewed

@@ -3,7 +3,7 @@
 @layer jokul.components {
     .jkl-table-of-contents {
         --ordered-item-padding: var(--jkl-unit-10);
-        --border: 1px solid var(--jkl-color-border-separator);
+        --border: 1px solid var(--jkl-color-border-subdued);
         --text-color: var(--jkl-color-text-default);
         .jkl-table-of-contents-title {

package/styles/components/tabs/tabs.css CHANGED Viewed

@@ -8,8 +8,8 @@
   .jkl-tablist {
     --padding-inline-end: var(--jkl-unit-50);
     --text-color: var(--jkl-color-text-interactive);
-    --line-color: var(--jkl-color-border-separator);
-    --indicator-color: var(--jkl-color-border-separator-hover);
+    --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;
@@ -82,7 +82,7 @@
     --text-color: var(--jkl-color-text-interactive-hover);
   }
   .jkl-tab:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: -2px;
   }
   .jkl-tab[aria-selected=true] {

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

	@@ -1 +1 @@
1	- @layer jokul.components{.jkl-tabs{width:100%}.jkl-tablist{--padding-inline-end:var(--jkl-unit-50);--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{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:transparent;border:none;border-style:none;color:var(--text-color);cursor:pointer;font:var(--jkl-text-style-text-medium);outline:0;outline-style:none;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: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: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))}}}
1	+ @layer jokul.components{.jkl-tabs{width:100%}.jkl-tablist{--padding-inline-end:var(--jkl-unit-50);--text-color:var(--jkl-color-text-interactive);--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:transparent;border:none;border-style:none;color:var(--text-color);cursor:pointer;font:var(--jkl-text-style-text-medium);outline:0;outline-style:none;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: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-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))}}}

package/styles/components/tabs/tabs.scss CHANGED Viewed

@@ -9,8 +9,8 @@
     .jkl-tablist {
         --padding-inline-end: var(--jkl-unit-50);
         --text-color: var(--jkl-color-text-interactive);
-        --line-color: var(--jkl-color-border-separator);
-        --indicator-color: var(--jkl-color-border-separator-hover);
+        --line-color: var(--jkl-color-border-subdued);
+        --indicator-color: var(--jkl-color-border-default);
         scroll-snap-type: x proximity;
         overflow: scroll hidden;

package/styles/components/tag/tag.css CHANGED Viewed

@@ -4,12 +4,14 @@
 .jkl-tag {
   --padding: var(--jkl-unit-02) var(--jkl-unit-10);
   --gap: var(--jkl-unit-05);
-  --background-color: var(--jkl-color-background-alert-neutral);
-  --text-color: var(--jkl-color-text-on-alert);
+  --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: 0.25rem;
   display: inline-flex;
   align-items: center;
@@ -18,16 +20,24 @@
   gap: var(--gap);
 }
 .jkl-tag--info {
-  --background-color: var(--jkl-color-background-alert-info);
+  --background-color: var(--jkl-color-info-background-container);
+  --text-color: var(--jkl-color-info-text-default);
+  --border-color: var(--jkl-color-info-border-subdued);
 }
 .jkl-tag--warning {
-  --background-color: var(--jkl-color-background-alert-warning);
+  --background-color: var(--jkl-color-warning-background-container);
+  --text-color: var(--jkl-color-warning-text-default);
+  --border-color: var(--jkl-color-warning-border-subdued);
 }
 .jkl-tag--error {
-  --background-color: var(--jkl-color-background-alert-error);
+  --background-color: var(--jkl-color-error-background-container);
+  --text-color: var(--jkl-color-error-text-default);
+  --border-color: var(--jkl-color-error-border-subdued);
 }
 .jkl-tag--success {
-  --background-color: var(--jkl-color-background-alert-success);
+  --background-color: var(--jkl-color-success-background-container);
+  --text-color: var(--jkl-color-success-text-default);
+  --border-color: var(--jkl-color-success-border-subdued);
 }
 @media screen and (forced-colors: active) {
   .jkl-tag {

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

	@@ -1 +1 @@
1	- .jkl-tag{--padding:var(--jkl-unit-02) var(--jkl-unit-10);--gap:var(--jkl-unit-05);--background-color:var(--jkl-color-background-~~alert-neutral~~);--text-color:var(--jkl-color-text-on-~~alert~~);align-items:center;background-color:var(--background-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-background-~~alert~~-info)}.jkl-tag--warning{--background-color:var(--jkl-color-background-~~alert~~-warning)}.jkl-tag--error{--background-color:var(--jkl-color-background-~~alert~~-error)}.jkl-tag--success{--background-color:var(--jkl-color-background-~~alert~~-success)}@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}}
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);--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);--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);--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);--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}}

package/styles/components/tag/tag.scss CHANGED Viewed

@@ -4,14 +4,16 @@
 .jkl-tag {
     --padding: var(--jkl-unit-02) var(--jkl-unit-10);
     --gap: var(--jkl-unit-05);
-    --background-color: var(--jkl-color-background-alert-neutral);
-    --text-color: var(--jkl-color-text-on-alert);
+    --background-color: var(--jkl-color-background-container);
+    --text-color: var(--jkl-color-text-default);
+    --border-color: var(--jkl-color-border-subdued);
     @include jkl.text-style("text-small") {
         font-weight: jkl.$font-weight-bold;
     };
     background-color: var(--background-color);
     color: var(--text-color);
+    border: 1px solid var(--border-color);
     border-radius: jkl.rem(4px);
     display: inline-flex;
     align-items: center;
@@ -20,19 +22,27 @@
     gap: var(--gap);
     &--info {
-        --background-color: var(--jkl-color-background-alert-info);
+        --background-color: var(--jkl-color-info-background-container);
+        --text-color: var(--jkl-color-info-text-default);
+        --border-color: var(--jkl-color-info-border-subdued);
     }
     &--warning {
-        --background-color: var(--jkl-color-background-alert-warning);
+        --background-color: var(--jkl-color-warning-background-container);
+        --text-color: var(--jkl-color-warning-text-default);
+        --border-color: var(--jkl-color-warning-border-subdued);
     }
     &--error {
-        --background-color: var(--jkl-color-background-alert-error);
+        --background-color: var(--jkl-color-error-background-container);
+        --text-color: var(--jkl-color-error-text-default);
+        --border-color: var(--jkl-color-error-border-subdued);
     }
     &--success {
-        --background-color: var(--jkl-color-background-alert-success);
+        --background-color: var(--jkl-color-success-background-container);
+        --text-color: var(--jkl-color-success-text-default);
+        --border-color: var(--jkl-color-success-border-subdued);
     }
     @include jkl.forced-colors-mode {

package/styles/components/text-area/text-area.css CHANGED Viewed

@@ -13,8 +13,8 @@
     --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
     --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
     --text-color: var(--jkl-color-text-default);
-    --background-color: var(--jkl-color-background-input-base);
-    --border-color: var(--jkl-color-border-input);
+    --background-color: transparent;
+    --border-color: var(--jkl-color-border-default);
     --placeholder-color: var(--jkl-color-text-subdued);
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
@@ -31,15 +31,15 @@
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
   }
   .jkl-text-area-wrapper:focus-within, .jkl-text-area-wrapper:has([data-focused=true]) {
-    --background-color: var(--jkl-color-background-input-focus);
+    --background-color: var(--jkl-color-background-container);
   }
   .jkl-text-area-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
-    --background-color: var(--jkl-color-background-alert-error);
-    --text-color: var(--jkl-color-text-on-alert);
+    --background-color: var(--jkl-color-error-background-container);
+    --text-color: var(--jkl-color-error-text-default);
     --placeholder-color: color(from currentColor sRGB r g b / 75%);
   }
   .jkl-text-area-wrapper:hover, .jkl-text-area-wrapper:focus-within, .jkl-text-area-wrapper:has([data-focused=true]) {
-    --border-color: var(--jkl-color-border-input-focus);
+    --border-color: var(--jkl-color-border-strong);
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
   }
   @media screen and (forced-colors: active) {
@@ -48,11 +48,11 @@
     }
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-text-area-wrapper > .jkl-icon-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: -8px;
   }
   @media screen and (forced-colors: active) {

package/styles/components/text-area/text-area.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer jokul.components{.jkl-text-area-wrapper{overflow:hidden;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:~~var(--jkl-color-background-input-base)~~;--border-color:var(--jkl-color-border-~~input~~);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);max-width:100%;position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-~~input-focus~~)}.jkl-text-area-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-background-~~alert-error~~);--text-color:var(--jkl-color-text-~~on-alert~~);--placeholder-color:color(from currentColor sRGB r g b/75%)}.jkl-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]),.jkl-text-area-wrapper:hover{--border-color:var(--jkl-color-border-~~input-focus~~);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]),.jkl-text-area-wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-~~action~~);outline-offset:3px}.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-~~action~~);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-area-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)-1)}.jkl-text-area-wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-area-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-area-wrapper{border:.125rem inset ButtonText}}.jkl-text-area{--text-input-height:var(--jkl-unit-60);--progress-bar-height:0.25rem;height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:inherit;font:var(--jkl-text-style-text-medium);height:var(--text-input-height);max-height:var(--text-input-height);min-height:var(--text-input-height);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) transparent;transition-duration:var(--jkl-motion-timing-productive);transition-property:height,min-height,max-height,padding;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{border-style:revert;outline:revert;outline-style:revert}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-area__text-area{border:none;outline:none}.jkl-text-area__text-area:focus-visible{outline:none}}.jkl-text-area__text-area::placeholder{color:var(--placeholder-color);opacity:1}.jkl-text-area .jkl-text-area-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-area-wrapper{max-height:100%}.jkl-text-area--auto-expand .jkl-text-area__text-area{overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper{padding-bottom:calc(var(--text-input-height) + var(--progress-bar-height));position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{bottom:0;left:0;pointer-events:none;position:absolute;right:0}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{color:var(--text-color);font:var(--jkl-text-style-text-small);padding:var(--jkl-text-input-padding)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:transparent;height:var(--progress-bar-height);overflow:hidden;width:100%}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{background-color:var(--border-color);content:"";display:block;height:var(--progress-bar-height);transition-duration:var(--jkl-motion-timing-lazy);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard);width:var(--progress-width,100%)}.jkl-text-area--start-open .jkl-text-area__text-area--3-rows,.jkl-text-area__text-area--3-rows:focus,.jkl-text-area__text-area--3-rows:not(:placeholder-shown){--height:3lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--4-rows,.jkl-text-area__text-area--4-rows:focus,.jkl-text-area__text-area--4-rows:not(:placeholder-shown){--height:4lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--5-rows,.jkl-text-area__text-area--5-rows:focus,.jkl-text-area__text-area--5-rows:not(:placeholder-shown){--height:5lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--6-rows,.jkl-text-area__text-area--6-rows:focus,.jkl-text-area__text-area--6-rows:not(:placeholder-shown){--height:6lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--7-rows,.jkl-text-area__text-area--7-rows:focus,.jkl-text-area__text-area--7-rows:not(:placeholder-shown){--height:7lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--8-rows,.jkl-text-area__text-area--8-rows:focus,.jkl-text-area__text-area--8-rows:not(:placeholder-shown){--height:8lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--9-rows,.jkl-text-area__text-area--9-rows:focus,.jkl-text-area__text-area--9-rows:not(:placeholder-shown){--height:9lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--10-rows,.jkl-text-area__text-area--10-rows:focus,.jkl-text-area__text-area--10-rows:not(:placeholder-shown){--height:10lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}}
1	+ @layer jokul.components{.jkl-text-area-wrapper{overflow:hidden;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-color:var(--jkl-color-border-default);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);max-width:100%;position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-text-area-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--placeholder-color:color(from currentColor sRGB r g b/75%)}.jkl-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]),.jkl-text-area-wrapper:hover{--border-color:var(--jkl-color-border-strong);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]),.jkl-text-area-wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-area-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)-1)}.jkl-text-area-wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-area-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-area-wrapper{border:.125rem inset ButtonText}}.jkl-text-area{--text-input-height:var(--jkl-unit-60);--progress-bar-height:0.25rem;height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:inherit;font:var(--jkl-text-style-text-medium);height:var(--text-input-height);max-height:var(--text-input-height);min-height:var(--text-input-height);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) transparent;transition-duration:var(--jkl-motion-timing-productive);transition-property:height,min-height,max-height,padding;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{border-style:revert;outline:revert;outline-style:revert}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-area__text-area{border:none;outline:none}.jkl-text-area__text-area:focus-visible{outline:none}}.jkl-text-area__text-area::placeholder{color:var(--placeholder-color);opacity:1}.jkl-text-area .jkl-text-area-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-area-wrapper{max-height:100%}.jkl-text-area--auto-expand .jkl-text-area__text-area{overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper{padding-bottom:calc(var(--text-input-height) + var(--progress-bar-height));position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{bottom:0;left:0;pointer-events:none;position:absolute;right:0}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{color:var(--text-color);font:var(--jkl-text-style-text-small);padding:var(--jkl-text-input-padding)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:transparent;height:var(--progress-bar-height);overflow:hidden;width:100%}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{background-color:var(--border-color);content:"";display:block;height:var(--progress-bar-height);transition-duration:var(--jkl-motion-timing-lazy);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard);width:var(--progress-width,100%)}.jkl-text-area--start-open .jkl-text-area__text-area--3-rows,.jkl-text-area__text-area--3-rows:focus,.jkl-text-area__text-area--3-rows:not(:placeholder-shown){--height:3lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--4-rows,.jkl-text-area__text-area--4-rows:focus,.jkl-text-area__text-area--4-rows:not(:placeholder-shown){--height:4lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--5-rows,.jkl-text-area__text-area--5-rows:focus,.jkl-text-area__text-area--5-rows:not(:placeholder-shown){--height:5lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--6-rows,.jkl-text-area__text-area--6-rows:focus,.jkl-text-area__text-area--6-rows:not(:placeholder-shown){--height:6lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--7-rows,.jkl-text-area__text-area--7-rows:focus,.jkl-text-area__text-area--7-rows:not(:placeholder-shown){--height:7lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--8-rows,.jkl-text-area__text-area--8-rows:focus,.jkl-text-area__text-area--8-rows:not(:placeholder-shown){--height:8lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--9-rows,.jkl-text-area__text-area--9-rows:focus,.jkl-text-area__text-area--9-rows:not(:placeholder-shown){--height:9lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--10-rows,.jkl-text-area__text-area--10-rows:focus,.jkl-text-area__text-area--10-rows:not(:placeholder-shown){--height:10lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}}

package/styles/components/text-input/text-input.css CHANGED Viewed

@@ -12,8 +12,8 @@
     --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
     --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
     --text-color: var(--jkl-color-text-default);
-    --background-color: var(--jkl-color-background-input-base);
-    --border-color: var(--jkl-color-border-input);
+    --background-color: transparent;
+    --border-color: var(--jkl-color-border-default);
     --placeholder-color: var(--jkl-color-text-subdued);
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
@@ -30,15 +30,15 @@
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
   }
   .jkl-text-input-wrapper:focus-within, .jkl-text-input-wrapper:has([data-focused=true]) {
-    --background-color: var(--jkl-color-background-input-focus);
+    --background-color: var(--jkl-color-background-container);
   }
   .jkl-text-input-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
-    --background-color: var(--jkl-color-background-alert-error);
-    --text-color: var(--jkl-color-text-on-alert);
+    --background-color: var(--jkl-color-error-background-container);
+    --text-color: var(--jkl-color-error-text-default);
     --placeholder-color: color(from currentColor sRGB r g b / 75%);
   }
   .jkl-text-input-wrapper:hover, .jkl-text-input-wrapper:focus-within, .jkl-text-input-wrapper:has([data-focused=true]) {
-    --border-color: var(--jkl-color-border-input-focus);
+    --border-color: var(--jkl-color-border-strong);
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
   }
   @media screen and (forced-colors: active) {
@@ -47,11 +47,11 @@
     }
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-text-input-wrapper > .jkl-icon-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: -8px;
   }
   @media screen and (forced-colors: active) {

package/styles/components/text-input/text-input.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer jokul.components{.jkl-text-input-wrapper{--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:~~var(--jkl-color-background-input-base)~~;--border-color:var(--jkl-color-border-~~input~~);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);max-width:100%;position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-~~input-focus~~)}.jkl-text-input-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-background-~~alert-error~~);--text-color:var(--jkl-color-text-~~on-alert~~);--placeholder-color:color(from currentColor sRGB r g b/75%)}.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]),.jkl-text-input-wrapper:hover{--border-color:var(--jkl-color-border-~~input-focus~~);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]),.jkl-text-input-wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-~~action~~);outline-offset:3px}.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-~~action~~);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-input-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)-1)}.jkl-text-input-wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-input-wrapper{border:.125rem inset ButtonText}}.jkl-text-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-text-input__input{-webkit-appearance:none;background:none;border-style:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);width:100%}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input__input{border-style:revert;outline:revert;outline-style:revert}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:revert;outline-style:revert}}.jkl-text-input__input input[type=number]::-webkit-inner-spin-button,.jkl-text-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-input__input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-input__input{border:none;outline:none}.jkl-text-input__input:focus-visible{outline:none}}.jkl-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.jkl-text-input__input--align-right{text-align:right}.jkl-text-input__unit{-webkit-padding-end:var(--jkl-text-input-horizontal-padding);padding-block:var(--jkl-text-input-vertical-padding);padding-inline-end:var(--jkl-text-input-horizontal-padding)}.jkl-text-input__action-button{-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)-1)}.jkl-text-input--inline{display:inline-block;margin:-.125rem .25rem;vertical-align:middle}}
1	+ @layer jokul.components{.jkl-text-input-wrapper{--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-color:var(--jkl-color-border-default);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);max-width:100%;position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-text-input-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--placeholder-color:color(from currentColor sRGB r g b/75%)}.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]),.jkl-text-input-wrapper:hover{--border-color:var(--jkl-color-border-strong);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]),.jkl-text-input-wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-input-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)-1)}.jkl-text-input-wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-input-wrapper{border:.125rem inset ButtonText}}.jkl-text-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-text-input__input{-webkit-appearance:none;background:none;border-style:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);width:100%}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input__input{border-style:revert;outline:revert;outline-style:revert}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:revert;outline-style:revert}}.jkl-text-input__input input[type=number]::-webkit-inner-spin-button,.jkl-text-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-input__input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-input__input{border:none;outline:none}.jkl-text-input__input:focus-visible{outline:none}}.jkl-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.jkl-text-input__input--align-right{text-align:right}.jkl-text-input__unit{-webkit-padding-end:var(--jkl-text-input-horizontal-padding);padding-block:var(--jkl-text-input-vertical-padding);padding-inline-end:var(--jkl-text-input-horizontal-padding)}.jkl-text-input__action-button{-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)-1)}.jkl-text-input--inline{display:inline-block;margin:-.125rem .25rem;vertical-align:middle}}