@fremtind/jokul 3.1.0 → 3.2.0

package/styles/components/select/select.css

@@ -42,9 +42,6 @@
 .jkl-select {
   display: block;
   position: relative;
-  /* --------
-     VARIANTS
-     -------- */
 }
 .jkl-select {
   outline: 0;
@@ -231,6 +228,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
   --jkl-icon-size: 1.25rem;
   --jkl-icon-opsz: 20;
 }
+.jkl-select {
+  /* --------
+     VARIANTS
+     -------- */
+}
 .jkl-select--inline {
   display: inline-block;
   vertical-align: top;

package/styles/components/select/select.min.css

@@ -1 +1 @@
-[data-density=compact],[data-layout-density=compact]{--jkl-select-input-height:calc(var(--jkl-unit-10)*4);--jkl-select-arrow-right:calc(var(--jkl-unit-10)*0.5);--jkl-select-button-padding:calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*4) calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-search-input-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-native-padding:calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*3) calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*0.5);--jkl-select-option-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-font-size:var(--jkl-small-font-size);--jkl-select-line-height:var(--jkl-small-line-height);--jkl-select-font-weight:var(--jkl-small-font-weight)}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:calc(var(--jkl-unit-10)*6);--jkl-select-arrow-right:0.5rem;--jkl-select-button-padding:0.5rem 2.25rem 0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-select-search-input-padding:var(--jkl-select-button-padding);--jkl-select-native-padding:0 calc(var(--jkl-unit-10)*5) 0 0.5rem;--jkl-select-option-padding:0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-select-font-size:var(--jkl-body-font-size);--jkl-select-line-height:var(--jkl-body-line-height);--jkl-select-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:2.75rem}}.jkl-select{border-style:none;display:block;position:relative}.jkl-select,.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select{border-style:revert}.jkl-select,.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:revert;outline-style:revert}}.jkl-select :focus-visible{outline:none}.jkl-select .jkl-tooltip-question-button:focus{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-select select{-webkit-appearance:none;appearance:none}.jkl-select select::ms-expand{display:none}.jkl-select select:-moz-focusring{color:#0000;text-shadow:0 0 0 var(--jkl-color-text-subdued)}.jkl-select select option{background-color:var(--jkl-color-background-container-high);color:var(--jkl-color-text-subdued);font-family:sans-serif;font-weight:400}.jkl-select__outer-wrapper{max-width:100%;min-width:7rem;position:relative;width:15rem}.jkl-select__search-input{box-sizing:border-box;color:var(--jkl-color-text-subdued);padding:var(--jkl-select-search-input-padding)}.jkl-select__button,.jkl-select__search-input{background-color:initial;border:.0625rem solid var(--jkl-color-border-input);border-radius:.1875rem;box-shadow:0 0 0 .0625rem #0000;color:var(--jkl-color-text-subdued);cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);height:var(--jkl-select-input-height);line-height:var(--jkl-select-line-height);overflow:hidden;text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;white-space:nowrap;width:100%}.jkl-select__button--active-value,.jkl-select__search-input--active-value{color:var(--jkl-color-text-default)}.jkl-select__button:hover,.jkl-select__search-input:hover{border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select__button:hover~.jkl-select__arrow,.jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-select__button:focus-visible,.jkl-select__search-input:focus-visible{outline:none}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:has(:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__button,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__search-input{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-select__button{padding:var(--jkl-select-button-padding)}.jkl-select select.jkl-select__button{padding:var(--jkl-select-native-padding)}.jkl-select__arrow{color:var(--jkl-color-text-default);pointer-events:none;position:absolute;right:var(--jkl-select-arrow-right);top:50%;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-select__arrow,.jkl-select__arrow path,.jkl-select__arrow svg{stroke:CanvasText;fill:CanvasText}}.jkl-select:has([aria-invalid=true]) .jkl-select__arrow{color:var(--jkl-color-text-on-alert)}.jkl-select__options-menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);border-radius:0 0 .1875rem .1875rem;border-top:none;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-select-max-shown-options, 5) + .5)*var(--jkl-select-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-select__option-wrapper{list-style-type:none;margin:0;padding:0;-webkit-overflow-scrolling:touch}.jkl-select__option{background-color:inherit;border:0;color:unset;cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);line-height:var(--jkl-select-line-height);min-height:var(--jkl-select-input-height);padding:var(--jkl-select-option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-select__option:focus,:not([data-focus=controlled])>.jkl-select__option:hover{background-color:var(--jkl-color-background-interactive-hover);color:var(--jkl-color-text-default)}.jkl-select__option-description{color:var(--jkl-color-text-subdued);display:block;font-size:1rem;font-weight:400;line-height:1.5rem;width:100%;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-select--inline{display:inline-block;vertical-align:top}.jkl-select--open .jkl-select__button,.jkl-select--open .jkl-select__search-input{background-color:var(--jkl-color-background-container-high);border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select--open .jkl-select__button:hover~.jkl-select__arrow,.jkl-select--open .jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% - .1875rem))}.jkl-select--invalid .jkl-select__button,.jkl-select--invalid .jkl-select__search-input{background-color:var(--jkl-color-background-alert-error);color:var(--jkl-color-text-on-alert-subdued)}.jkl-select--invalid .jkl-select__button--active-value,.jkl-select--invalid .jkl-select__search-input--active-value{color:revert}@media screen and (forced-colors:active){.jkl-select .jkl-select__button,.jkl-select .jkl-select__search-input{background-color:Canvas;border:2px solid ButtonText;color:initial;outline:revert}.jkl-select .jkl-select__button:hover,.jkl-select .jkl-select__search-input:hover{border-color:Highlight}.jkl-select .jkl-select__option{border-bottom:1px solid Canvas;border-top:1px solid Canvas;color:initial}.jkl-select .jkl-select__option:focus,.jkl-select .jkl-select__option:hover{border-bottom:1px solid SelectedItem;border-top:1px solid SelectedItem;--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}}
+[data-density=compact],[data-layout-density=compact]{--jkl-select-input-height:calc(var(--jkl-unit-10)*4);--jkl-select-arrow-right:calc(var(--jkl-unit-10)*0.5);--jkl-select-button-padding:calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*4) calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-search-input-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-native-padding:calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*3) calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*0.5);--jkl-select-option-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-font-size:var(--jkl-small-font-size);--jkl-select-line-height:var(--jkl-small-line-height);--jkl-select-font-weight:var(--jkl-small-font-weight)}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:calc(var(--jkl-unit-10)*6);--jkl-select-arrow-right:0.5rem;--jkl-select-button-padding:0.5rem 2.25rem 0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-select-search-input-padding:var(--jkl-select-button-padding);--jkl-select-native-padding:0 calc(var(--jkl-unit-10)*5) 0 0.5rem;--jkl-select-option-padding:0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-select-font-size:var(--jkl-body-font-size);--jkl-select-line-height:var(--jkl-body-line-height);--jkl-select-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:2.75rem}}.jkl-select{border-style:none;display:block;position:relative}.jkl-select,.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select{border-style:revert}.jkl-select,.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:revert;outline-style:revert}}.jkl-select :focus-visible{outline:none}.jkl-select .jkl-tooltip-question-button:focus{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-select select{-webkit-appearance:none;appearance:none}.jkl-select select::ms-expand{display:none}.jkl-select select:-moz-focusring{color:#0000;text-shadow:0 0 0 var(--jkl-color-text-subdued)}.jkl-select select option{background-color:var(--jkl-color-background-container-high);color:var(--jkl-color-text-subdued);font-family:sans-serif;font-weight:400}.jkl-select__outer-wrapper{max-width:100%;min-width:7rem;position:relative;width:15rem}.jkl-select__search-input{box-sizing:border-box;color:var(--jkl-color-text-subdued);padding:var(--jkl-select-search-input-padding)}.jkl-select__button,.jkl-select__search-input{background-color:initial;border:.0625rem solid var(--jkl-color-border-input);border-radius:.1875rem;box-shadow:0 0 0 .0625rem #0000;color:var(--jkl-color-text-subdued);cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);height:var(--jkl-select-input-height);line-height:var(--jkl-select-line-height);overflow:hidden;text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;white-space:nowrap;width:100%}.jkl-select__button--active-value,.jkl-select__search-input--active-value{color:var(--jkl-color-text-default)}.jkl-select__button:hover,.jkl-select__search-input:hover{border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select__button:hover~.jkl-select__arrow,.jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-select__button:focus-visible,.jkl-select__search-input:focus-visible{outline:none}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:has(:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__button,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__search-input{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-select__button{padding:var(--jkl-select-button-padding)}.jkl-select select.jkl-select__button{padding:var(--jkl-select-native-padding)}.jkl-select__arrow{color:var(--jkl-color-text-default);pointer-events:none;position:absolute;right:var(--jkl-select-arrow-right);top:50%;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-select__arrow,.jkl-select__arrow path,.jkl-select__arrow svg{fill:CanvasText;stroke:CanvasText}}.jkl-select:has([aria-invalid=true]) .jkl-select__arrow{color:var(--jkl-color-text-on-alert)}.jkl-select__options-menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);border-radius:0 0 .1875rem .1875rem;border-top:none;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-select-max-shown-options, 5) + .5)*var(--jkl-select-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-select__option-wrapper{list-style-type:none;margin:0;padding:0;-webkit-overflow-scrolling:touch}.jkl-select__option{background-color:inherit;border:0;color:unset;cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);line-height:var(--jkl-select-line-height);min-height:var(--jkl-select-input-height);padding:var(--jkl-select-option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-select__option:focus,:not([data-focus=controlled])>.jkl-select__option:hover{background-color:var(--jkl-color-background-interactive-hover);color:var(--jkl-color-text-default)}.jkl-select__option-description{color:var(--jkl-color-text-subdued);display:block;font-size:1rem;font-weight:400;line-height:1.5rem;width:100%;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-select--inline{display:inline-block;vertical-align:top}.jkl-select--open .jkl-select__button,.jkl-select--open .jkl-select__search-input{background-color:var(--jkl-color-background-container-high);border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select--open .jkl-select__button:hover~.jkl-select__arrow,.jkl-select--open .jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% - .1875rem))}.jkl-select--invalid .jkl-select__button,.jkl-select--invalid .jkl-select__search-input{background-color:var(--jkl-color-background-alert-error);color:var(--jkl-color-text-on-alert-subdued)}.jkl-select--invalid .jkl-select__button--active-value,.jkl-select--invalid .jkl-select__search-input--active-value{color:revert}@media screen and (forced-colors:active){.jkl-select .jkl-select__button,.jkl-select .jkl-select__search-input{background-color:Canvas;border:2px solid ButtonText;color:initial;outline:revert}.jkl-select .jkl-select__button:hover,.jkl-select .jkl-select__search-input:hover{border-color:Highlight}.jkl-select .jkl-select__option{border-bottom:1px solid Canvas;border-top:1px solid Canvas;color:initial}.jkl-select .jkl-select__option:focus,.jkl-select .jkl-select__option:hover{border-bottom:1px solid SelectedItem;border-top:1px solid SelectedItem;--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}}

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

@@ -144,7 +144,7 @@
   margin-bottom: 0;
 }
 .jkl-system-message--dismissed {
-  animation: jkl-dismiss-uv1m2jy 400ms forwards;
+  animation: jkl-dismiss-u1jkmey 400ms forwards;
   transition: block 400ms 400ms;
 }
 .jkl-system-message--info {
@@ -175,7 +175,7 @@
   }
 }
 
-@keyframes jkl-dismiss-uv1m2jy {
+@keyframes jkl-dismiss-u1jkmey {
   from {
     opacity: 1;
     transform: translateY(0);

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

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--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-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:initial;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:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover,.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-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-uv1m2jy .4s forwards;transition:block .4s .4s}.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-uv1m2jy{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--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-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:initial;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:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover,.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-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-u1jkmey .4s forwards;transition:block .4s .4s}.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-u1jkmey{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/table/_table-pagination.scss

@@ -2,14 +2,15 @@
 
 .jkl-table-pagination {
     display: flex;
-    gap: jkl.$unit-20;
+    gap: var(--jkl-unit-15);
     flex-direction: column;
     width: 100%;
 
     @include jkl.from-medium-device {
         flex-direction: row;
-        gap: jkl.$unit-15;
+        gap: var(--jkl-unit-30);
         justify-content: space-between;
+        align-items: center;
     }
 
     &__left {
@@ -22,6 +23,10 @@
         flex-wrap: nowrap;
     }
 
+    &__total-rows {
+        white-space: nowrap;
+    }
+
     &__picker {
         display: flex;
         flex-direction: row;
@@ -29,7 +34,7 @@
         white-space: nowrap;
 
         &--page {
-            padding-inline-end: jkl.$unit-30;
+            padding-inline-end: var(--jkl-unit-30);
             width: min(12rem, 100%);
 
             @include jkl.from-medium-device {
@@ -43,7 +48,7 @@
     }
 
     &__picker-label {
-        margin-inline-end: jkl.$unit-10;
+        margin-inline-end: var(--jkl-unit-10);
     }
 
     &__nav {
@@ -118,4 +123,4 @@
             @include jkl.no-grow-bold;
         }
     }
-}
+}

package/styles/components/table/table.css

@@ -218,15 +218,16 @@
 
 .jkl-table-pagination {
   display: flex;
-  gap: calc(var(--jkl-unit-10) * 2);
+  gap: var(--jkl-unit-15);
   flex-direction: column;
   width: 100%;
 }
 @media (min-width: 680px) {
   .jkl-table-pagination {
     flex-direction: row;
-    gap: calc(var(--jkl-unit-10) * 1.5);
+    gap: var(--jkl-unit-30);
     justify-content: space-between;
+    align-items: center;
   }
 }
 .jkl-table-pagination__left {
@@ -237,6 +238,9 @@
   display: flex;
   flex-wrap: nowrap;
 }
+.jkl-table-pagination__total-rows {
+  white-space: nowrap;
+}
 .jkl-table-pagination__picker {
   display: flex;
   flex-direction: row;
@@ -244,7 +248,7 @@
   white-space: nowrap;
 }
 .jkl-table-pagination__picker--page {
-  padding-inline-end: calc(var(--jkl-unit-10) * 3);
+  padding-inline-end: var(--jkl-unit-30);
   width: min(12rem, 100%);
 }
 @media (min-width: 680px) {
@@ -256,7 +260,7 @@
   width: min(4rem, 100%);
 }
 .jkl-table-pagination__picker-label {
-  margin-inline-end: 0.5rem;
+  margin-inline-end: var(--jkl-unit-10);
 }
 .jkl-table-pagination__nav {
   flex-grow: 1;
@@ -368,11 +372,13 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
 
 .jkl-table-row {
   border-bottom: solid 0.0625rem var(--jkl-table-row-border-color);
-  /* stylelint-disable-next-line selector-not-notation */
 }
 .jkl-table-head > .jkl-table-row {
   border-bottom: solid 0.0625rem var(--jkl-table-row-hover-border-color);
 }
+.jkl-table-row {
+  /* stylelint-disable-next-line selector-not-notation */
+}
 :not(.jkl-table-head, .jkl-table-foot) > .jkl-table-row {
   border-top: solid 0.0625rem transparent;
 }
@@ -418,7 +424,6 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   transition-property: border, padding;
   transition-timing-function: ease;
   transition-duration: 150ms;
-  /* stylelint-disable-next-line selector-max-specificity -- selector needs to nest itself to select sub tables with the same properties */
 }
 .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);
@@ -432,6 +437,9 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
 .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 {
+  /* stylelint-disable-next-line selector-max-specificity -- selector needs to nest itself to select sub tables with the same properties */
+}
 .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable + tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable {
   transition-property: border;
   transition-timing-function: ease;

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

@@ -1 +1 @@
-.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}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-table-cell-font-size:var(--jkl-body-font-size);--jkl-table-cell-line-height:var(--jkl-body-line-height);--jkl-table-cell-font-weight:var(--jkl-body-font-weight);--jkl-table-cell-padding:0.6875rem 0.5rem}[data-density=compact],[data-layout-density=compact]{--jkl-table-cell-font-size:var(--jkl-small-font-size);--jkl-table-cell-line-height:var(--jkl-small-line-height);--jkl-table-cell-font-weight:var(--jkl-small-font-weight);--jkl-table-cell-padding:0.3125rem 0.5rem}.jkl-table-cell{font-size:var(--jkl-table-cell-font-size);font-weight:var(--jkl-table-cell-font-weight);line-height:var(--jkl-table-cell-line-height);padding:var(--jkl-table-cell-padding);position:relative;text-align:left;vertical-align:top}.jkl-table-cell--vertical-align-center{vertical-align:initial}.jkl-table-cell--align-center{text-align:center}.jkl-table-cell--align-right{text-align:right}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell--align-right{text-align:unset}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell--align-right{text-align:unset}.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{display:none}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font-size:1rem;font-weight:700;line-height:1.5rem;--jkl-icon-weight:400;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font-size:1rem;font-weight:700;line-height:1.5rem;--jkl-icon-weight:400;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}@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;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)}@media screen and (prefers-color-scheme:light){:root{--jkl-table-head-sticky-color:var(--jkl-background-color)}}[data-theme=light]{--jkl-table-head-sticky-color:var(--jkl-background-color)}@media screen and (prefers-color-scheme:dark){:root{--jkl-table-head-sticky-color:var(--jkl-background-color)}}[data-theme=dark]{--jkl-table-head-sticky-color:var(--jkl-background-color)}.jkl-table-head--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table-head--sticky>.jkl-table-row{background-clip:padding-box;background-color:var(--jkl-table-head-sticky-color);border-bottom:none;box-shadow:inset 0 0 0 #000,inset 0 -.0625rem 0 var(--jkl-table-row-hover-border-color);height:2.3em;position:-webkit-sticky;position:sticky;top:0;vertical-align:bottom;z-index:1}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-table-header-font-size:var(--jkl-body-font-size);--jkl-table-header-line-height:var(--jkl-body-line-height);--jkl-table-header-font-weight:var(--jkl-body-font-weight);--jkl-table-header-padding:0 0.5rem 0.4375rem 0.5rem}[data-density=compact],[data-layout-density=compact]{--jkl-table-header-font-size:var(--jkl-small-font-size);--jkl-table-header-line-height:var(--jkl-small-line-height);--jkl-table-header-font-weight:var(--jkl-small-font-weight);--jkl-table-header-padding:0 0.5rem 0.1875rem 0.5rem}.jkl-table-header{font-size:var(--jkl-table-header-font-size);font-weight:var(--jkl-table-header-font-weight);line-height:var(--jkl-table-header-line-height);padding:var(--jkl-table-header-padding);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:700}.jkl-table-header--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.jkl-table-header--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-header__arrows{display:inline-block;margin-bottom:calc(var(--jkl-unit-10)*.25);margin-left:calc(var(--jkl-unit-10)*.5);opacity:0;transition-duration:75ms;transition-property:opacity;transition-timing-function:ease-out;vertical-align:middle;width:1.2em}.jkl-table-header__arrows--active{opacity:1}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-header{display:none}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-header{display:none}.jkl-table-pagination{display:flex;flex-direction:column;gap:calc(var(--jkl-unit-10)*2);width:100%}@media (min-width:680px){.jkl-table-pagination{flex-direction:row;gap:calc(var(--jkl-unit-10)*1.5);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__picker{align-items:center;display:flex;flex-direction:row;white-space:nowrap}.jkl-table-pagination__picker--page{-webkit-padding-end:calc(var(--jkl-unit-10)*3);padding-inline-end:calc(var(--jkl-unit-10)*3);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:.5rem;margin-inline-end:.5rem}.jkl-table-pagination__nav{display:flex;flex-direction:column;flex-grow:1;flex-wrap:wrap;gap:calc(var(--jkl-unit-10)*2);justify-content:center}@media (min-width:680px){.jkl-table-pagination__nav{align-items:center;flex-direction:row;justify-content:flex-end}}.jkl-table-pagination__nav ul{display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0}.jkl-table-pagination__nav li{margin:0;padding:0}.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{background:#0000;border-radius:.1875rem;border-style:none;color:var(--jkl-link-color);cursor:pointer;height:2rem;min-width:2rem;outline:0;outline-style:none;padding:0;-webkit-user-select:none;user-select:none}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{border-style:revert;outline:revert;outline-style:revert}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:revert;outline-style:revert}}.jkl-table-pagination__next:hover:not(:focus),.jkl-table-pagination__page:hover:not(:focus),.jkl-table-pagination__previous:hover:not(:focus){color:var(--jkl-link-hover-color)}html:not([data-mousenavigation]) .jkl-table-pagination__next:focus,html:not([data-mousenavigation]) .jkl-table-pagination__page:focus,html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus{outline:.125rem solid var(--jkl-link-active-color)}.jkl-table-pagination__next,.jkl-table-pagination__previous{padding-top:.125rem}.jkl-table-pagination__ellipsis{display:inline-block;height:2rem;text-align:center;vertical-align:bottom;width:2rem}.jkl-table-pagination__page--active{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}@media screen and (prefers-color-scheme:light){:root{--jkl-table-row-border-color:#c8c5c3;--jkl-table-row-border-none-color:#c8c5c300;--jkl-table-row-hover-border-color:#1b1917;--jkl-table-row-highlight-color:#ece9e5}}[data-theme=light]{--jkl-table-row-border-color:#c8c5c3;--jkl-table-row-border-none-color:#c8c5c300;--jkl-table-row-hover-border-color:#1b1917;--jkl-table-row-highlight-color:#ece9e5}@media screen and (prefers-color-scheme:dark){:root{--jkl-table-row-border-color:#636060;--jkl-table-row-border-none-color:#63606000;--jkl-table-row-hover-border-color:#f9f9f9;--jkl-table-row-highlight-color:#444141}}[data-theme=dark]{--jkl-table-row-border-color:#636060;--jkl-table-row-border-none-color:#63606000;--jkl-table-row-hover-border-color:#f9f9f9;--jkl-table-row-highlight-color:#444141}.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color)}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row{border-top:.0625rem solid #0000}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row:hover{border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color)}@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:.75rem;padding-top:.75rem}.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:.75rem;padding-top:.75rem}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:first-of-type{border-top:.0625rem solid var(--jkl-table-row-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:.15s;transition-property:border,padding;transition-timing-function:ease}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable.jkl-table-row--expanded{border-bottom-color:var(--jkl-table-row-border-none-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable .jkl-table-row-expand-button{margin-left:auto}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr{background-color:var(--jkl-table-row-highlight-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr .jkl-table-row{border-bottom-color:var(--jkl-table-row-hover-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:.15s;transition-property:border;transition-timing-function:ease}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+[aria-hidden=false] .jkl-table-row{border-top-color:var(--jkl-table-row-border-none-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}.jkl-table-row--clickable{outline:0}.jkl-table-row--clickable:hover,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--clickable:focus{background-color:var(--jkl-table-row-highlight-color);border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color);cursor:pointer}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}@media screen and (forced-colors:active){.jkl-table-row--clickable{color:ButtonText;outline:revert}.jkl-table-row--clickable:hover{background-color:ButtonFace}}.jkl-table-row--clicked,.jkl-table-row--clicked.jkl-table-row--expandable+[aria-hidden=false]{background-color:var(--jkl-table-row-highlight-color)}@media screen and (forced-colors:active){.jkl-table-row--clicked{background-color:ButtonFace}}.jkl-expandable-table-row__expanded-row{display:none;transition-duration:.25s;transition-property:height;transition-timing-function:ease-in}.jkl-expandable-table-row__expanded-row--expanded{display:block;transition-duration:.4s;transition-timing-function:ease-out}.jkl-table{border-collapse:collapse;position:relative}.jkl-table--full-width{width:100%}.jkl-table--collapse-to-list[data-collapse]{display:block}.jkl-table--collapse-to-list[data-collapse]>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list[data-collapse]>thead,.jkl-table--collapse-to-list[data-collapse]>thead>tr,.jkl-table--collapse-to-list[data-collapse]>thead>tr>th{display:none}.jkl-table--collapse-to-list[data-collapse]>tbody,.jkl-table--collapse-to-list[data-collapse]>tbody>tr,.jkl-table--collapse-to-list[data-collapse]>tbody>tr>td,.jkl-table--collapse-to-list[data-collapse]>tfoot,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr>td{display:block}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list{display:block}.jkl-table--collapse-to-list>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list>thead,.jkl-table--collapse-to-list>thead>tr,.jkl-table--collapse-to-list>thead>tr>th{display:none}.jkl-table--collapse-to-list>tbody,.jkl-table--collapse-to-list>tbody>tr,.jkl-table--collapse-to-list>tbody>tr>td,.jkl-table--collapse-to-list>tfoot,.jkl-table--collapse-to-list>tfoot>tr,.jkl-table--collapse-to-list>tfoot>tr>td{display:block}}
+.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}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-table-cell-font-size:var(--jkl-body-font-size);--jkl-table-cell-line-height:var(--jkl-body-line-height);--jkl-table-cell-font-weight:var(--jkl-body-font-weight);--jkl-table-cell-padding:0.6875rem 0.5rem}[data-density=compact],[data-layout-density=compact]{--jkl-table-cell-font-size:var(--jkl-small-font-size);--jkl-table-cell-line-height:var(--jkl-small-line-height);--jkl-table-cell-font-weight:var(--jkl-small-font-weight);--jkl-table-cell-padding:0.3125rem 0.5rem}.jkl-table-cell{font-size:var(--jkl-table-cell-font-size);font-weight:var(--jkl-table-cell-font-weight);line-height:var(--jkl-table-cell-line-height);padding:var(--jkl-table-cell-padding);position:relative;text-align:left;vertical-align:top}.jkl-table-cell--vertical-align-center{vertical-align:initial}.jkl-table-cell--align-center{text-align:center}.jkl-table-cell--align-right{text-align:right}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell--align-right{text-align:unset}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell--align-right{text-align:unset}.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{display:none}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font-size:1rem;font-weight:700;line-height:1.5rem;--jkl-icon-weight:400;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font-size:1rem;font-weight:700;line-height:1.5rem;--jkl-icon-weight:400;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}@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;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)}@media screen and (prefers-color-scheme:light){:root{--jkl-table-head-sticky-color:var(--jkl-background-color)}}[data-theme=light]{--jkl-table-head-sticky-color:var(--jkl-background-color)}@media screen and (prefers-color-scheme:dark){:root{--jkl-table-head-sticky-color:var(--jkl-background-color)}}[data-theme=dark]{--jkl-table-head-sticky-color:var(--jkl-background-color)}.jkl-table-head--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table-head--sticky>.jkl-table-row{background-clip:padding-box;background-color:var(--jkl-table-head-sticky-color);border-bottom:none;box-shadow:inset 0 0 0 #000,inset 0 -.0625rem 0 var(--jkl-table-row-hover-border-color);height:2.3em;position:-webkit-sticky;position:sticky;top:0;vertical-align:bottom;z-index:1}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-table-header-font-size:var(--jkl-body-font-size);--jkl-table-header-line-height:var(--jkl-body-line-height);--jkl-table-header-font-weight:var(--jkl-body-font-weight);--jkl-table-header-padding:0 0.5rem 0.4375rem 0.5rem}[data-density=compact],[data-layout-density=compact]{--jkl-table-header-font-size:var(--jkl-small-font-size);--jkl-table-header-line-height:var(--jkl-small-line-height);--jkl-table-header-font-weight:var(--jkl-small-font-weight);--jkl-table-header-padding:0 0.5rem 0.1875rem 0.5rem}.jkl-table-header{font-size:var(--jkl-table-header-font-size);font-weight:var(--jkl-table-header-font-weight);line-height:var(--jkl-table-header-line-height);padding:var(--jkl-table-header-padding);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:700}.jkl-table-header--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.jkl-table-header--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-header__arrows{display:inline-block;margin-bottom:calc(var(--jkl-unit-10)*.25);margin-left:calc(var(--jkl-unit-10)*.5);opacity:0;transition-duration:75ms;transition-property:opacity;transition-timing-function:ease-out;vertical-align:middle;width:1.2em}.jkl-table-header__arrows--active{opacity:1}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-header{display:none}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-header{display:none}.jkl-table-pagination{display:flex;flex-direction:column;gap:var(--jkl-unit-15);width:100%}@media (min-width:680px){.jkl-table-pagination{align-items:center;flex-direction:row;gap:var(--jkl-unit-30);justify-content:space-between}}.jkl-table-pagination__left{flex-shrink:1}.jkl-table-pagination__right{display:flex;flex-grow:1;flex-wrap:nowrap}.jkl-table-pagination__total-rows{white-space:nowrap}.jkl-table-pagination__picker{align-items:center;display:flex;flex-direction:row;white-space:nowrap}.jkl-table-pagination__picker--page{-webkit-padding-end:var(--jkl-unit-30);padding-inline-end:var(--jkl-unit-30);width:min(12rem,100%)}@media (min-width:680px){.jkl-table-pagination__picker--page{justify-content:flex-end}}.jkl-table-pagination__picker--page .jkl-table-pagination__picker-input{width:min(4rem,100%)}.jkl-table-pagination__picker-label{-webkit-margin-end:var(--jkl-unit-10);margin-inline-end:var(--jkl-unit-10)}.jkl-table-pagination__nav{display:flex;flex-direction:column;flex-grow:1;flex-wrap:wrap;gap:calc(var(--jkl-unit-10)*2);justify-content:center}@media (min-width:680px){.jkl-table-pagination__nav{align-items:center;flex-direction:row;justify-content:flex-end}}.jkl-table-pagination__nav ul{display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0}.jkl-table-pagination__nav li{margin:0;padding:0}.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{background:#0000;border-radius:.1875rem;border-style:none;color:var(--jkl-link-color);cursor:pointer;height:2rem;min-width:2rem;outline:0;outline-style:none;padding:0;-webkit-user-select:none;user-select:none}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{border-style:revert;outline:revert;outline-style:revert}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:revert;outline-style:revert}}.jkl-table-pagination__next:hover:not(:focus),.jkl-table-pagination__page:hover:not(:focus),.jkl-table-pagination__previous:hover:not(:focus){color:var(--jkl-link-hover-color)}html:not([data-mousenavigation]) .jkl-table-pagination__next:focus,html:not([data-mousenavigation]) .jkl-table-pagination__page:focus,html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus{outline:.125rem solid var(--jkl-link-active-color)}.jkl-table-pagination__next,.jkl-table-pagination__previous{padding-top:.125rem}.jkl-table-pagination__ellipsis{display:inline-block;height:2rem;text-align:center;vertical-align:bottom;width:2rem}.jkl-table-pagination__page--active{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}@media screen and (prefers-color-scheme:light){:root{--jkl-table-row-border-color:#c8c5c3;--jkl-table-row-border-none-color:#c8c5c300;--jkl-table-row-hover-border-color:#1b1917;--jkl-table-row-highlight-color:#ece9e5}}[data-theme=light]{--jkl-table-row-border-color:#c8c5c3;--jkl-table-row-border-none-color:#c8c5c300;--jkl-table-row-hover-border-color:#1b1917;--jkl-table-row-highlight-color:#ece9e5}@media screen and (prefers-color-scheme:dark){:root{--jkl-table-row-border-color:#636060;--jkl-table-row-border-none-color:#63606000;--jkl-table-row-hover-border-color:#f9f9f9;--jkl-table-row-highlight-color:#444141}}[data-theme=dark]{--jkl-table-row-border-color:#636060;--jkl-table-row-border-none-color:#63606000;--jkl-table-row-hover-border-color:#f9f9f9;--jkl-table-row-highlight-color:#444141}.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color)}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row{border-top:.0625rem solid #0000}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row:hover{border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color)}@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:.75rem;padding-top:.75rem}.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:.75rem;padding-top:.75rem}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:first-of-type{border-top:.0625rem solid var(--jkl-table-row-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:.15s;transition-property:border,padding;transition-timing-function:ease}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable.jkl-table-row--expanded{border-bottom-color:var(--jkl-table-row-border-none-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable .jkl-table-row-expand-button{margin-left:auto}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr{background-color:var(--jkl-table-row-highlight-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr .jkl-table-row{border-bottom-color:var(--jkl-table-row-hover-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:.15s;transition-property:border;transition-timing-function:ease}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+[aria-hidden=false] .jkl-table-row{border-top-color:var(--jkl-table-row-border-none-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}.jkl-table-row--clickable{outline:0}.jkl-table-row--clickable:hover,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--clickable:focus{background-color:var(--jkl-table-row-highlight-color);border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color);cursor:pointer}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}@media screen and (forced-colors:active){.jkl-table-row--clickable{color:ButtonText;outline:revert}.jkl-table-row--clickable:hover{background-color:ButtonFace}}.jkl-table-row--clicked,.jkl-table-row--clicked.jkl-table-row--expandable+[aria-hidden=false]{background-color:var(--jkl-table-row-highlight-color)}@media screen and (forced-colors:active){.jkl-table-row--clicked{background-color:ButtonFace}}.jkl-expandable-table-row__expanded-row{display:none;transition-duration:.25s;transition-property:height;transition-timing-function:ease-in}.jkl-expandable-table-row__expanded-row--expanded{display:block;transition-duration:.4s;transition-timing-function:ease-out}.jkl-table{border-collapse:collapse;position:relative}.jkl-table--full-width{width:100%}.jkl-table--collapse-to-list[data-collapse]{display:block}.jkl-table--collapse-to-list[data-collapse]>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list[data-collapse]>thead,.jkl-table--collapse-to-list[data-collapse]>thead>tr,.jkl-table--collapse-to-list[data-collapse]>thead>tr>th{display:none}.jkl-table--collapse-to-list[data-collapse]>tbody,.jkl-table--collapse-to-list[data-collapse]>tbody>tr,.jkl-table--collapse-to-list[data-collapse]>tbody>tr>td,.jkl-table--collapse-to-list[data-collapse]>tfoot,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr>td{display:block}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list{display:block}.jkl-table--collapse-to-list>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list>thead,.jkl-table--collapse-to-list>thead>tr,.jkl-table--collapse-to-list>thead>tr>th{display:none}.jkl-table--collapse-to-list>tbody,.jkl-table--collapse-to-list>tbody>tr,.jkl-table--collapse-to-list>tbody>tr>td,.jkl-table--collapse-to-list>tfoot,.jkl-table--collapse-to-list>tfoot>tr,.jkl-table--collapse-to-list>tfoot>tr>td{display:block}}

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

@@ -1 +1 @@
-@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15) var(--jkl-unit-02);--jkl-tab-padding-inline-end:var(--jkl-unit-50);--jkl-tab-font-size:var(--jkl-body-font-size);--jkl-tab-line-height:var(--jkl-body-line-height);--jkl-tab-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-unit-10) var(--jkl-unit-30) var(--jkl-unit-15) var(--jkl-unit-02);--jkl-tab-padding-inline-end:var(--jkl-unit-30)}}[data-density=compact],[data-layout-density=compact]{--jkl-tab-font-size:var(--jkl-small-font-size);--jkl-tab-line-height:var(--jkl-small-line-height);--jkl-tab-font-weight:var(--jkl-small-font-weight);--jkl-tab-padding:var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05) 0;--jkl-tab-padding-inline-end:var(--jkl-unit-40)}.jkl-tabs{width:100%}.jkl-tablist{--text-color:var(--jkl-color-text-interactive);--line-color:var(--jkl-color-border-separator);--indicator-color:var(--jkl-color-border-separator-hover);border-bottom:1px solid var(--line-color);display:inline-flex;flex-direction:row;margin:0;max-width:100%;overflow:scroll hidden;padding:0;position:relative;scroll-snap-type:x proximity;scrollbar-width:none;width:-webkit-fit-content;width:fit-content}@media screen and (forced-colors:active){.jkl-tablist{border-color:GrayText}}.jkl-tablist::-webkit-scrollbar{display:none}@supports (position-anchor:--active-tab){.jkl-tablist:after{content:"";position:absolute;position-anchor:--active-tab;background-color:var(--indicator-color);height:2px;inset-block-start:calc(anchor(end) - 2px);inset-inline-start:calc(anchor(--active-tab start));transition-duration:.4s;transition-timing-function:ease;width:calc(anchor-size(inline) - var(--jkl-tab-padding-inline-end))}}.jkl-tab{background-color:initial;border:none;border-style:none;color:var(--text-color);cursor:pointer;font-size:var(--jkl-tab-font-size);font-weight:var(--jkl-tab-font-weight);line-height:var(--jkl-tab-line-height);padding:var(--jkl-tab-padding);position:relative;scroll-margin-inline-start:var(--jkl-unit-20);scroll-snap-align:start;text-decoration:none;white-space:nowrap}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{border-style:revert}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-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:700;letter-spacing:-.014em}@supports not (position-anchor:--active-tab){.jkl-tab[aria-selected=true]{position:relative}.jkl-tab[aria-selected=true]:after{background-color:var(--indicator-color);content:"";height:2px;inset-block-end:0;inset-inline-start:0;position:absolute;transition-duration:.4s;transition-timing-function:ease;width:calc(100% - var(--jkl-tab-padding-inline-end))}}}
+@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15) var(--jkl-unit-02);--jkl-tab-padding-inline-end:var(--jkl-unit-50);--jkl-tab-font-size:var(--jkl-body-font-size);--jkl-tab-line-height:var(--jkl-body-line-height);--jkl-tab-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-unit-10) var(--jkl-unit-30) var(--jkl-unit-15) var(--jkl-unit-02);--jkl-tab-padding-inline-end:var(--jkl-unit-30)}}[data-density=compact],[data-layout-density=compact]{--jkl-tab-font-size:var(--jkl-small-font-size);--jkl-tab-line-height:var(--jkl-small-line-height);--jkl-tab-font-weight:var(--jkl-small-font-weight);--jkl-tab-padding:var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05) 0;--jkl-tab-padding-inline-end:var(--jkl-unit-40)}.jkl-tabs{width:100%}.jkl-tablist{--text-color:var(--jkl-color-text-interactive);--line-color:var(--jkl-color-border-separator);--indicator-color:var(--jkl-color-border-separator-hover);border-bottom:1px solid var(--line-color);display:inline-flex;flex-direction:row;margin:0;max-width:100%;overflow:scroll hidden;padding:0;position:relative;scroll-snap-type:x proximity;scrollbar-width:none;width:-webkit-fit-content;width:fit-content}@media screen and (forced-colors:active){.jkl-tablist{border-color:GrayText}}.jkl-tablist::-webkit-scrollbar{display:none}@supports (position-anchor:--active-tab){.jkl-tablist:after{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:.4s;transition-timing-function:ease;width:calc(anchor-size(inline) - var(--jkl-tab-padding-inline-end))}}.jkl-tab{background-color:initial;border:none;border-style:none;color:var(--text-color);cursor:pointer;font-size:var(--jkl-tab-font-size);font-weight:var(--jkl-tab-font-weight);line-height:var(--jkl-tab-line-height);padding:var(--jkl-tab-padding);position:relative;scroll-margin-inline-start:var(--jkl-unit-20);scroll-snap-align:start;text-decoration:none;white-space:nowrap}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{border-style:revert}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-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:700;letter-spacing:-.014em}@supports not (position-anchor:--active-tab){.jkl-tab[aria-selected=true]{position:relative}.jkl-tab[aria-selected=true]:after{background-color:var(--indicator-color);content:"";height:2px;inset-block-end:0;inset-inline-start:0;position:absolute;transition-duration:.4s;transition-timing-function:ease;width:calc(100% - var(--jkl-tab-padding-inline-end))}}}

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

@@ -206,10 +206,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrap
   padding-bottom: calc(var(--jkl-text-input-height) + 0.25rem);
 }
 .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter {
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: opacity;
-  opacity: 0;
   pointer-events: none;
   position: absolute;
   bottom: 0;
@@ -242,10 +238,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrap
   transition-timing-function: ease;
   transition-duration: 400ms;
 }
-.jkl-text-area:has(.jkl-text-area__counter):focus-within .jkl-text-area__counter {
-  opacity: 1;
-  transition-delay: 150ms;
-}
 
 .jkl-text-area__text-area--3-rows:focus,
 .jkl-text-area__text-area--3-rows:not(:placeholder-shown),

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

@@ -2,4 +2,4 @@
       --jkl-text-input-horizontal-padding
   );--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.375rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(
       --jkl-text-input-horizontal-padding
-  );--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}.jkl-text-area-wrapper{--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:.1875rem;box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem #0000;box-sizing:border-box;color:var(--text-color);display:flex;font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-width:100%;position:relative;transition-duration:.15s;transition-property:color,box-shadow,background-color;transition-timing-function:ease}.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-area-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}.jkl-text-area{height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:inherit;font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-height:var(--jkl-text-input-height);min-height:var(--jkl-text-input-height);padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) #0000;transition-duration:.15s;transition-property:height,min-height,max-height,padding;transition-timing-function:ease;width:100%}.jkl-text-area__text-area,.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}.jkl-text-area__text-area,.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{position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper:focus-within,.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper[data-has-content=true]{padding-bottom:calc(var(--jkl-text-input-height) + .25rem)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{color:var(--text-color);font-size:1rem;font-weight:400;line-height:1.5rem;padding:var(--jkl-text-input-padding);--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:initial;height:.25rem;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:.25rem;transition-duration:.4s;transition-property:width;transition-timing-function:ease;width:var(--progress-width,100%)}.jkl-text-area:has(.jkl-text-area__counter):focus-within .jkl-text-area__counter{opacity:1;transition-delay:.15s}.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:calc(var(--jkl-text-input-line-height)*3);--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:calc(var(--jkl-text-input-line-height)*4);--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:calc(var(--jkl-text-input-line-height)*5);--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:calc(var(--jkl-text-input-line-height)*6);--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:calc(var(--jkl-text-input-line-height)*7);--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:calc(var(--jkl-text-input-line-height)*8);--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:calc(var(--jkl-text-input-line-height)*9);--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:calc(var(--jkl-text-input-line-height)*10);--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-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}.jkl-text-area-wrapper{--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:.1875rem;box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem #0000;box-sizing:border-box;color:var(--text-color);display:flex;font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-width:100%;position:relative;transition-duration:.15s;transition-property:color,box-shadow,background-color;transition-timing-function:ease}.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-area-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}.jkl-text-area{height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:inherit;font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-height:var(--jkl-text-input-height);min-height:var(--jkl-text-input-height);padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) #0000;transition-duration:.15s;transition-property:height,min-height,max-height,padding;transition-timing-function:ease;width:100%}.jkl-text-area__text-area,.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}.jkl-text-area__text-area,.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{position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper:focus-within,.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper[data-has-content=true]{padding-bottom:calc(var(--jkl-text-input-height) + .25rem)}.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-size:1rem;font-weight:400;line-height:1.5rem;padding:var(--jkl-text-input-padding);--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:initial;height:.25rem;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:.25rem;transition-duration:.4s;transition-property:width;transition-timing-function:ease;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:calc(var(--jkl-text-input-line-height)*3);--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:calc(var(--jkl-text-input-line-height)*4);--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:calc(var(--jkl-text-input-line-height)*5);--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:calc(var(--jkl-text-input-line-height)*6);--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:calc(var(--jkl-text-input-line-height)*7);--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:calc(var(--jkl-text-input-line-height)*8);--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:calc(var(--jkl-text-input-line-height)*9);--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:calc(var(--jkl-text-input-line-height)*10);--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-area/text-area.scss

@@ -52,16 +52,11 @@
 
             &[data-has-content="true"],
             &:focus-within {
-                padding-bottom: calc(
-                    var(--jkl-text-input-height) + #{$progress-bar-height}
-                );
+                padding-bottom: calc(var(--jkl-text-input-height) + #{$progress-bar-height});
             }
         }
 
         .jkl-text-area__counter {
-            @include jkl.motion;
-            transition-property: opacity;
-            opacity: 0;
 
             pointer-events: none; // La brukeren klikke gjennom telleren når feltet er kollapset
             position: absolute;
@@ -94,18 +89,12 @@
                 }
             }
         }
-
-        &:focus-within .jkl-text-area__counter {
-            opacity: 1;
-            transition-delay: jkl.timing(
-                "productive"
-            ); // Vent med å fade inn til feltet er ekspandert
-        }
     }
 }
 
 // Nytteklasser for tekstfelt med $num antall rader
 @for $num from 3 through 10 {
+
     .jkl-text-area__text-area--#{$num}-rows:focus,
     .jkl-text-area__text-area--#{$num}-rows:not(:placeholder-shown),
     .jkl-text-area--start-open .jkl-text-area__text-area--#{$num}-rows {

package/styles/components/toast/toast.css

@@ -187,14 +187,14 @@
 
 .jkl-toast[data-animation=entering],
 .jkl-toast[data-animation=queued] {
-  animation: jkl-entering-u7w4n9n 200ms ease-out forwards;
+  animation: jkl-entering-uqszo9i 200ms ease-out forwards;
 }
 
 .jkl-toast[data-animation=exiting] {
-  animation: jkl-exiting-u7w4n9w 150ms ease-in forwards;
+  animation: jkl-exiting-uqszoa6 150ms ease-in forwards;
 }
 
-@keyframes jkl-entering-u7w4n9n {
+@keyframes jkl-entering-uqszo9i {
   from {
     opacity: 0;
     transform: translate3d(0, 50%, 0);
@@ -204,7 +204,7 @@
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes jkl-exiting-u7w4n9w {
+@keyframes jkl-exiting-uqszoa6 {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);

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

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

package/styles/components-beta/select/select.css

@@ -99,11 +99,6 @@
   text-align: left;
   width: 100%;
   transition-property: color, border-color, box-shadow;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  font-size: var(--jkl-select-font-size);
-  line-height: var(--jkl-select-line-height);
-  font-weight: var(--jkl-select-font-weight);
 }
 .jkl-select--beta select:has(option:checked[value=""]) {
   --color: var(--jkl-color-text-subdued);
@@ -119,6 +114,13 @@
 .jkl-select--beta select:focus-visible {
   outline: none;
 }
+.jkl-select--beta select {
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  font-size: var(--jkl-select-font-size);
+  line-height: var(--jkl-select-line-height);
+  font-weight: var(--jkl-select-font-weight);
+}
 html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) {
   outline: 3px solid var(--jkl-color-border-action);
   outline-offset: 3px;

package/styles/components-beta/select/select.min.css

@@ -1 +1 @@
-[data-density=compact],[data-layout-density=compact]{--jkl-select-input-height:calc(var(--jkl-unit-10)*4);--jkl-select-button-padding:calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*4) calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-arrow-right:calc(var(--jkl-unit-10)*0.5);--jkl-select-search-input-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-native-padding:calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*3) calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*0.5);--jkl-select-option-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-font-size:var(--jkl-small-font-size);--jkl-select-line-height:var(--jkl-small-line-height);--jkl-select-font-weight:var(--jkl-small-font-weight)}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:calc(var(--jkl-unit-10)*6);--jkl-select-button-padding:0.5rem 2.25rem 0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-select-arrow-right:calc(var(--jkl-unit-10)*0.25);--jkl-select-search-input-padding:var(--jkl-select-button-padding);--jkl-select-native-padding:0 calc(var(--jkl-unit-10)*5) 0 0.5rem;--jkl-select-option-padding:0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-select-font-size:var(--jkl-body-font-size);--jkl-select-line-height:var(--jkl-body-line-height);--jkl-select-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:2.75rem}}.jkl-select--beta{--border-color:var(--jkl-color-border-input);--background-color:var(#0000);--color:var(--jkl-color-text-default);--box-shadow:0 0 0 jkl.rem(1px) #0000;border-style:none;display:block;position:relative}.jkl-select--beta,.jkl-select--beta:active,.jkl-select--beta:focus,.jkl-select--beta:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select--beta{border-style:revert}.jkl-select--beta,.jkl-select--beta:active,.jkl-select--beta:focus,.jkl-select--beta:hover{outline:revert;outline-style:revert}}.jkl-select--beta :focus-visible{outline:none}.jkl-select--beta .jkl-tooltip-question-button:focus{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-select--beta-wrapper{align-items:center;display:grid;grid-template-columns:1fr auto}.jkl-select--beta .jkl-icon,.jkl-select--beta select{grid-row:1}.jkl-select--beta select{-webkit-appearance:none;appearance:none;background-color:var(--background-color);border:.0625rem solid;border-radius:.1875rem;box-shadow:var(--box-shadow);color:var(--color);cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);grid-column:1/-1;height:var(--jkl-select-input-height);line-height:var(--jkl-select-line-height);overflow:hidden;padding:var(--jkl-select-button-padding);text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;white-space:nowrap;width:100%}.jkl-select--beta select:has(option:checked[value=""]){--color:var(--jkl-color-text-subdued)}.jkl-select--beta select:hover{--border-color:var(--jkl-color-border-input-focus);--box-shadow:0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus)}.jkl-select--beta select:invalid{--background-color:var(--jkl-color-background-alert-error);--color:var(--jkl-color-text-on-alert-subdued)}.jkl-select--beta select:focus-visible{outline:none}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) select{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-select--beta .jkl-icon{grid-column:2;pointer-events:none;-webkit-padding-end:var(--jkl-select-arrow-right);padding-inline-end:var(--jkl-select-arrow-right)}
+[data-density=compact],[data-layout-density=compact]{--jkl-select-input-height:calc(var(--jkl-unit-10)*4);--jkl-select-button-padding:calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*4) calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-arrow-right:calc(var(--jkl-unit-10)*0.5);--jkl-select-search-input-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-native-padding:calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*3) calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*0.5);--jkl-select-option-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-font-size:var(--jkl-small-font-size);--jkl-select-line-height:var(--jkl-small-line-height);--jkl-select-font-weight:var(--jkl-small-font-weight)}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:calc(var(--jkl-unit-10)*6);--jkl-select-button-padding:0.5rem 2.25rem 0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-select-arrow-right:calc(var(--jkl-unit-10)*0.25);--jkl-select-search-input-padding:var(--jkl-select-button-padding);--jkl-select-native-padding:0 calc(var(--jkl-unit-10)*5) 0 0.5rem;--jkl-select-option-padding:0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-select-font-size:var(--jkl-body-font-size);--jkl-select-line-height:var(--jkl-body-line-height);--jkl-select-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:2.75rem}}.jkl-select--beta{--border-color:var(--jkl-color-border-input);--background-color:var(#0000);--color:var(--jkl-color-text-default);--box-shadow:0 0 0 jkl.rem(1px) #0000;border-style:none;display:block;position:relative}.jkl-select--beta,.jkl-select--beta:active,.jkl-select--beta:focus,.jkl-select--beta:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select--beta{border-style:revert}.jkl-select--beta,.jkl-select--beta:active,.jkl-select--beta:focus,.jkl-select--beta:hover{outline:revert;outline-style:revert}}.jkl-select--beta :focus-visible{outline:none}.jkl-select--beta .jkl-tooltip-question-button:focus{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-select--beta-wrapper{align-items:center;display:grid;grid-template-columns:1fr auto}.jkl-select--beta .jkl-icon,.jkl-select--beta select{grid-row:1}.jkl-select--beta select{-webkit-appearance:none;appearance:none;background-color:var(--background-color);border:.0625rem solid;border-radius:.1875rem;box-shadow:var(--box-shadow);color:var(--color);cursor:pointer;grid-column:1/-1;height:var(--jkl-select-input-height);overflow:hidden;padding:var(--jkl-select-button-padding);text-align:left;text-overflow:ellipsis;transition-property:color,border-color,box-shadow;white-space:nowrap;width:100%}.jkl-select--beta select:has(option:checked[value=""]){--color:var(--jkl-color-text-subdued)}.jkl-select--beta select:hover{--border-color:var(--jkl-color-border-input-focus);--box-shadow:0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus)}.jkl-select--beta select:invalid{--background-color:var(--jkl-color-background-alert-error);--color:var(--jkl-color-text-on-alert-subdued)}.jkl-select--beta select:focus-visible{outline:none}.jkl-select--beta select{font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);line-height:var(--jkl-select-line-height);transition-duration:.15s;transition-timing-function:ease}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) select{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-select--beta .jkl-icon{grid-column:2;pointer-events:none;-webkit-padding-end:var(--jkl-select-arrow-right);padding-inline-end:var(--jkl-select-arrow-right)}