@fremtind/jokul 4.1.2 → 4.1.4

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

@@ -3,6 +3,7 @@
  */
 @layer jokul.components {
   .jkl-text-area-wrapper {
+    overflow: hidden;
     --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
         var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
@@ -91,6 +92,8 @@
     }
   }
   .jkl-text-area {
+    --text-input-height: var(--jkl-unit-60);
+    --progress-bar-height: 0.25rem;
     height: auto;
     width: 100%;
   }
@@ -100,9 +103,9 @@
     resize: none;
     width: 100%;
     padding: var(--jkl-text-input-padding);
-    max-height: var(--jkl-text-input-height);
-    height: var(--jkl-text-input-height);
-    min-height: var(--jkl-text-input-height);
+    max-height: var(--text-input-height);
+    height: var(--text-input-height);
+    min-height: var(--text-input-height);
     transition-timing-function: ease;
     transition-duration: 150ms;
     transition-property: height, min-height, max-height, padding;
@@ -166,9 +169,7 @@
   }
   .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[data-has-content=true], .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper:focus-within {
-    padding-bottom: calc(var(--jkl-text-input-height) + 0.25rem);
+    padding-bottom: calc(var(--text-input-height) + var(--progress-bar-height));
   }
   .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter {
     pointer-events: none;
@@ -187,7 +188,7 @@
   }
   .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress {
     background-color: transparent;
-    height: 0.25rem;
+    height: var(--progress-bar-height);
     width: 100%;
     overflow: hidden;
   }
@@ -195,7 +196,7 @@
     content: "";
     width: var(--progress-width, 100%);
     display: block;
-    height: 0.25rem;
+    height: var(--progress-bar-height);
     background-color: var(--border-color);
     transition-property: width;
     transition-timing-function: ease;
@@ -204,7 +205,7 @@
   .jkl-text-area__text-area--3-rows:focus,
   .jkl-text-area__text-area--3-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--3-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 3);
+    --height: 3lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -213,7 +214,7 @@
   .jkl-text-area__text-area--4-rows:focus,
   .jkl-text-area__text-area--4-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--4-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 4);
+    --height: 4lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -222,7 +223,7 @@
   .jkl-text-area__text-area--5-rows:focus,
   .jkl-text-area__text-area--5-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--5-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 5);
+    --height: 5lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -231,7 +232,7 @@
   .jkl-text-area__text-area--6-rows:focus,
   .jkl-text-area__text-area--6-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--6-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 6);
+    --height: 6lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -240,7 +241,7 @@
   .jkl-text-area__text-area--7-rows:focus,
   .jkl-text-area__text-area--7-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--7-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 7);
+    --height: 7lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -249,7 +250,7 @@
   .jkl-text-area__text-area--8-rows:focus,
   .jkl-text-area__text-area--8-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--8-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 8);
+    --height: 8lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -258,7 +259,7 @@
   .jkl-text-area__text-area--9-rows:focus,
   .jkl-text-area__text-area--9-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--9-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 9);
+    --height: 9lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -267,7 +268,7 @@
   .jkl-text-area__text-area--10-rows:focus,
   .jkl-text-area__text-area--10-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--10-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 10);
+    --height: 10lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-text-area-wrapper{--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:var(--jkl-color-background-input-base);--border-color:var(--jkl-color-border-input);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;border-radius:var(--jkl-border-radius-s);box-sizing:border-box;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);max-width:100%;position:relative;--jkl-icon-weight:300;background-color:var(--background-color);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;color:var(--text-color);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-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-area-wrapper{border:.125rem inset ButtonText}}.jkl-text-area{height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;box-sizing:border-box;color:inherit;font-size:var(--jkl-font-size-3);font-weight:400;height:var(--jkl-text-input-height);line-height:var(--jkl-line-height-tight);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) transparent;transition-duration:.15s;transition-property:height,min-height,max-height,padding;transition-timing-function:ease;width:100%;--jkl-icon-weight:300;border-style:none;outline:0;outline-style:none}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{border-style:revert;outline:revert;outline-style:revert}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-area__text-area{border:none;outline:none}.jkl-text-area__text-area:focus-visible{outline:none}}.jkl-text-area__text-area::placeholder{color:var(--placeholder-color);opacity:1}.jkl-text-area .jkl-text-area-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-area-wrapper{max-height:100%}.jkl-text-area--auto-expand .jkl-text-area__text-area{overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper{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:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);padding:var(--jkl-text-input-padding);--jkl-icon-weight:300}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:transparent;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))}}
+@layer jokul.components{.jkl-text-area-wrapper{overflow:hidden;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:var(--jkl-color-background-input-base);--border-color:var(--jkl-color-border-input);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;border-radius:var(--jkl-border-radius-s);box-sizing:border-box;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);max-width:100%;position:relative;--jkl-icon-weight:300;background-color:var(--background-color);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;color:var(--text-color);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-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-area-wrapper{border:.125rem inset ButtonText}}.jkl-text-area{--text-input-height:var(--jkl-unit-60);--progress-bar-height:0.25rem;height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;box-sizing:border-box;color:inherit;font-size:var(--jkl-font-size-3);font-weight:400;height:var(--text-input-height);line-height:var(--jkl-line-height-tight);max-height:var(--text-input-height);min-height:var(--text-input-height);padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) transparent;transition-duration:.15s;transition-property:height,min-height,max-height,padding;transition-timing-function:ease;width:100%;--jkl-icon-weight:300;border-style:none;outline:0;outline-style:none}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{border-style:revert;outline:revert;outline-style:revert}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-area__text-area{border:none;outline:none}.jkl-text-area__text-area:focus-visible{outline:none}}.jkl-text-area__text-area::placeholder{color:var(--placeholder-color);opacity:1}.jkl-text-area .jkl-text-area-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-area-wrapper{max-height:100%}.jkl-text-area--auto-expand .jkl-text-area__text-area{overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper{padding-bottom:calc(var(--text-input-height) + var(--progress-bar-height));position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{bottom:0;left:0;pointer-events:none;position:absolute;right:0}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{color:var(--text-color);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);padding:var(--jkl-text-input-padding);--jkl-icon-weight:300}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:transparent;height:var(--progress-bar-height);overflow:hidden;width:100%}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{background-color:var(--border-color);content:"";display:block;height:var(--progress-bar-height);transition-duration:.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:3lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--4-rows,.jkl-text-area__text-area--4-rows:focus,.jkl-text-area__text-area--4-rows:not(:placeholder-shown){--height:4lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--5-rows,.jkl-text-area__text-area--5-rows:focus,.jkl-text-area__text-area--5-rows:not(:placeholder-shown){--height:5lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--6-rows,.jkl-text-area__text-area--6-rows:focus,.jkl-text-area__text-area--6-rows:not(:placeholder-shown){--height:6lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--7-rows,.jkl-text-area__text-area--7-rows:focus,.jkl-text-area__text-area--7-rows:not(:placeholder-shown){--height:7lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--8-rows,.jkl-text-area__text-area--8-rows:focus,.jkl-text-area__text-area--8-rows:not(:placeholder-shown){--height:8lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--9-rows,.jkl-text-area__text-area--9-rows:focus,.jkl-text-area__text-area--9-rows:not(:placeholder-shown){--height:9lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--10-rows,.jkl-text-area__text-area--10-rows:focus,.jkl-text-area__text-area--10-rows:not(:placeholder-shown){--height:10lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}}

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

@@ -5,10 +5,15 @@
 
 @layer jokul.components {
     .jkl-text-area-wrapper {
+        overflow: hidden;
+
         @include shared.wrapper_styles;
     }
 
     .jkl-text-area {
+        --text-input-height: var(--jkl-unit-60);
+        --progress-bar-height: #{jkl.rem(4px)};
+
         height: auto;
         width: 100%;
 
@@ -18,9 +23,9 @@
             resize: none; // Fjern mulighet for resizing av feltet
             width: 100%;
             padding: var(--jkl-text-input-padding);
-            max-height: var(--jkl-text-input-height);
-            height: var(--jkl-text-input-height);
-            min-height: var(--jkl-text-input-height);
+            max-height: var(--text-input-height);
+            height: var(--text-input-height);
+            min-height: var(--text-input-height);
 
             @include jkl.motion;
             transition-property: height, min-height, max-height, padding;
@@ -46,15 +51,9 @@
         }
 
         &:has(.jkl-text-area__counter) {
-            $progress-bar-height: jkl.rem(4px);
-
             .jkl-text-area-wrapper {
                 position: relative;
-
-                &[data-has-content="true"],
-                &:focus-within {
-                    padding-bottom: calc(var(--jkl-text-input-height) + #{$progress-bar-height});
-                }
+                padding-bottom: calc(var(--text-input-height) + var(--progress-bar-height));
             }
 
             .jkl-text-area__counter {
@@ -74,7 +73,7 @@
 
                 &-progress {
                     background-color: transparent;
-                    height: $progress-bar-height;
+                    height: var(--progress-bar-height);
                     width: 100%;
                     overflow: hidden;
 
@@ -82,7 +81,7 @@
                         content: "";
                         width: var(--progress-width, 100%);
                         display: block;
-                        height: $progress-bar-height;
+                        height: var(--progress-bar-height);
                         background-color: var(--border-color);
                         transition-property: width;
 
@@ -99,7 +98,7 @@
         .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 {
-            --height: calc(var(--jkl-text-input-line-height) * #{$num});
+            --height: #{$num}lh;
             --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
 
             // (#2751) Ekspanderende får inline style med height auto,

package/styles/components/toast/toast.css

@@ -135,12 +135,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-ug3sokg 200ms ease-out forwards;
+    animation: jkl-entering-u3aotnq 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-ug3soks 150ms ease-in forwards;
+    animation: jkl-exiting-u3aotol 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-ug3sokg {
+  @keyframes jkl-entering-u3aotnq {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -150,7 +150,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-ug3soks {
+  @keyframes jkl-exiting-u3aotol {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);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:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw));--jkl-icon-weight:300}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@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-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);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-ug3sokg .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-ug3soks .15s ease-in forwards}@keyframes jkl-entering-ug3sokg{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-ug3soks{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
+@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);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:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw));--jkl-icon-weight:300}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@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-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);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-u3aotnq .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-u3aotol .15s ease-in forwards}@keyframes jkl-entering-u3aotnq{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-u3aotol{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}

package/styles/styles.css

@@ -468,7 +468,7 @@
     --color: var(--jkl-color-text-default);
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u6ii6b2 forwards;
+    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uisbn1v forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -536,7 +536,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-u6ii6b2 {
+  @keyframes jkl-support-icon-entrance-uisbn1v {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -888,22 +888,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-u6ii6bl;
+    animation-name: jkl-loader-left-spin-uisbn2n;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-u6ii6ck;
+    animation-name: jkl-loader-middle-spin-uisbn3a;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-u6ii6co;
+    animation-name: jkl-loader-right-spin-uisbn3o;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-u6ii6bl {
+  @keyframes jkl-loader-left-spin-uisbn2n {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -917,7 +917,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-u6ii6ck {
+  @keyframes jkl-loader-middle-spin-uisbn3a {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -934,7 +934,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-u6ii6co {
+  @keyframes jkl-loader-right-spin-uisbn3o {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -974,7 +974,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-u6ii6db;
+      animation: 2s ease infinite jkl-blink-uisbn4i;
     }
   }
   .jkl-skeleton-input {
@@ -1022,10 +1022,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u6ii6db;
+      animation: 2s ease-in-out infinite jkl-blink-uisbn4i;
     }
   }
-  @keyframes jkl-blink-u6ii6db {
+  @keyframes jkl-blink-uisbn4i {
     0% {
       opacity: 1;
     }
@@ -1688,7 +1688,6 @@
     top: calc(100% - 1px);
     overflow-y: auto;
     position: absolute;
-    color: var(--jkl-color-text-default);
     z-index: 7000;
     left: -0.0625rem;
     right: -0.0625rem;
@@ -1708,6 +1707,7 @@
     display: flex;
     align-items: center;
     border: 0;
+    color: var(--jkl-color-text-default);
     background-color: var(--jkl-color-background-interactive);
     transition-property: color, background-color;
     cursor: pointer;
@@ -2012,10 +2012,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u6ii6en var(--duration) linear forwards;
+    animation: jkl-downcount-uisbn5f var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u6ii6en {
+  @keyframes jkl-downcount-uisbn5f {
     from {
       width: 100%;
     }
@@ -2508,12 +2508,12 @@
     --jkl-icon-size: 1.2em;
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-u6ii6f7 0.25s ease-out;
+    animation: jkl-show-uisbn5z 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-u6ii6f7 {
+  @keyframes jkl-show-uisbn5z {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2730,7 +2730,7 @@
     --background-color: var(--jkl-color-background-alert-success);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-u6ii6fs 400ms ease-in-out forwards;
+    animation: jkl-dismiss-uisbn6q 400ms ease-in-out forwards;
     transition: visibility 0ms 400ms;
     visibility: hidden;
   }
@@ -2752,7 +2752,7 @@
   .jkl-form-error-message {
     padding-bottom: calc(var(--jkl-unit-base) * 5);
   }
-  @keyframes jkl-dismiss-u6ii6fs {
+  @keyframes jkl-dismiss-uisbn6q {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -2865,6 +2865,7 @@
 }
 @layer jokul.components {
   .jkl-text-area-wrapper {
+    overflow: hidden;
     --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
         var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
@@ -2953,6 +2954,8 @@
     }
   }
   .jkl-text-area {
+    --text-input-height: var(--jkl-unit-60);
+    --progress-bar-height: 0.25rem;
     height: auto;
     width: 100%;
   }
@@ -2962,9 +2965,9 @@
     resize: none;
     width: 100%;
     padding: var(--jkl-text-input-padding);
-    max-height: var(--jkl-text-input-height);
-    height: var(--jkl-text-input-height);
-    min-height: var(--jkl-text-input-height);
+    max-height: var(--text-input-height);
+    height: var(--text-input-height);
+    min-height: var(--text-input-height);
     transition-timing-function: ease;
     transition-duration: 150ms;
     transition-property: height, min-height, max-height, padding;
@@ -3028,9 +3031,7 @@
   }
   .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[data-has-content=true], .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper:focus-within {
-    padding-bottom: calc(var(--jkl-text-input-height) + 0.25rem);
+    padding-bottom: calc(var(--text-input-height) + var(--progress-bar-height));
   }
   .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter {
     pointer-events: none;
@@ -3049,7 +3050,7 @@
   }
   .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress {
     background-color: transparent;
-    height: 0.25rem;
+    height: var(--progress-bar-height);
     width: 100%;
     overflow: hidden;
   }
@@ -3057,7 +3058,7 @@
     content: "";
     width: var(--progress-width, 100%);
     display: block;
-    height: 0.25rem;
+    height: var(--progress-bar-height);
     background-color: var(--border-color);
     transition-property: width;
     transition-timing-function: ease;
@@ -3066,7 +3067,7 @@
   .jkl-text-area__text-area--3-rows:focus,
   .jkl-text-area__text-area--3-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--3-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 3);
+    --height: 3lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -3075,7 +3076,7 @@
   .jkl-text-area__text-area--4-rows:focus,
   .jkl-text-area__text-area--4-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--4-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 4);
+    --height: 4lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -3084,7 +3085,7 @@
   .jkl-text-area__text-area--5-rows:focus,
   .jkl-text-area__text-area--5-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--5-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 5);
+    --height: 5lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -3093,7 +3094,7 @@
   .jkl-text-area__text-area--6-rows:focus,
   .jkl-text-area__text-area--6-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--6-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 6);
+    --height: 6lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -3102,7 +3103,7 @@
   .jkl-text-area__text-area--7-rows:focus,
   .jkl-text-area__text-area--7-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--7-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 7);
+    --height: 7lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -3111,7 +3112,7 @@
   .jkl-text-area__text-area--8-rows:focus,
   .jkl-text-area__text-area--8-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--8-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 8);
+    --height: 8lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -3120,7 +3121,7 @@
   .jkl-text-area__text-area--9-rows:focus,
   .jkl-text-area__text-area--9-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--9-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 9);
+    --height: 9lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -3129,7 +3130,7 @@
   .jkl-text-area__text-area--10-rows:focus,
   .jkl-text-area__text-area--10-rows:not(:placeholder-shown),
   .jkl-text-area--start-open .jkl-text-area__text-area--10-rows {
-    --height: calc(var(--jkl-text-input-line-height) * 10);
+    --height: 10lh;
     --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
     min-height: calc(var(--height) + var(--vertical-padding));
     height: calc(var(--height) + var(--vertical-padding));
@@ -4100,7 +4101,7 @@
     transition-timing-function: ease;
     transition-duration: 150ms;
   }
-  @keyframes jkl-downcount-u6ii6gf {
+  @keyframes jkl-downcount-uisbn78 {
     from {
       width: 100%;
     }
@@ -4610,7 +4611,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u6ii6ha 400ms forwards;
+    animation: jkl-dismiss-uisbn8l 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -4640,7 +4641,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u6ii6ha {
+  @keyframes jkl-dismiss-uisbn8l {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5477,12 +5478,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-u6ii6i8 200ms ease-out forwards;
+    animation: jkl-entering-uisbn95 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-u6ii6iq 150ms ease-in forwards;
+    animation: jkl-exiting-uisbn99 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-u6ii6i8 {
+  @keyframes jkl-entering-uisbn95 {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5492,7 +5493,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-u6ii6iq {
+  @keyframes jkl-exiting-uisbn99 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);