@fremtind/jokul 0.9.0 → 0.10.0

package/src/components/loader/styles/skeleton-loader.css

@@ -36,7 +36,7 @@
   bottom: 0;
   width: 12.5rem;
   background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
-  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u9opbea;
+  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-ughevs8;
 }
 @media (width >= 0) and (max-width: 679px) {
   .jkl-skeleton-animation {
@@ -67,7 +67,7 @@
 @media screen and (forced-colors: active) {
   .jkl-skeleton-element {
     border: 1px solid CanvasText;
-    animation: 2s ease infinite jkl-blink-u9opbeu;
+    animation: 2s ease infinite jkl-blink-ughevsp;
   }
 }
 
@@ -123,11 +123,11 @@
 }
 @media screen and (forced-colors: active) {
   .jkl-skeleton-table {
-    animation: 2s ease-in-out infinite jkl-blink-u9opbeu;
+    animation: 2s ease-in-out infinite jkl-blink-ughevsp;
   }
 }
 
-@keyframes jkl-sweep-u9opbea {
+@keyframes jkl-sweep-ughevs8 {
   0% {
     transform: translateX(calc(0vw - 200px));
   }
@@ -135,7 +135,7 @@
     transform: translateX(calc(100vw + 400px));
   }
 }
-@keyframes jkl-blink-u9opbeu {
+@keyframes jkl-blink-ughevsp {
   0% {
     opacity: 1;
   }

package/src/components/loader/styles/skeleton-loader.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}}[data-theme=light]{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}}[data-theme=dark]{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}.jkl-skeleton-animation{--jkl-skeleton-sweep-duration:3s;overflow:hidden;position:relative}.jkl-skeleton-animation:after{animation:var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u9opbea;background:linear-gradient(89.17deg,#f9f9f900 .8%,var(--jkl-skeleton-sweeper-color) 50.09%,#f9f9f900 96.31%);bottom:0;content:" ";position:absolute;top:0;width:12.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-animation{width:9.375rem}}@media screen and (prefers-reduced-motion:reduce){.jkl-skeleton-animation:after{background:none}}@media screen and (forced-colors:active){.jkl-skeleton-animation:after{animation:none}}.jkl-skeleton-animation--compact:after{width:9.375rem}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-u9opbeu 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-u9opbeu 2s ease-in-out infinite}}@keyframes jkl-sweep-u9opbea{0%{transform:translateX(-200px)}80%,to{transform:translateX(calc(100vw + 400px))}}@keyframes jkl-blink-u9opbeu{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}
+@media screen and (prefers-color-scheme:light){:root{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}}[data-theme=light]{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}}[data-theme=dark]{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}.jkl-skeleton-animation{--jkl-skeleton-sweep-duration:3s;overflow:hidden;position:relative}.jkl-skeleton-animation:after{animation:var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-ughevs8;background:linear-gradient(89.17deg,#f9f9f900 .8%,var(--jkl-skeleton-sweeper-color) 50.09%,#f9f9f900 96.31%);bottom:0;content:" ";position:absolute;top:0;width:12.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-animation{width:9.375rem}}@media screen and (prefers-reduced-motion:reduce){.jkl-skeleton-animation:after{background:none}}@media screen and (forced-colors:active){.jkl-skeleton-animation:after{animation:none}}.jkl-skeleton-animation--compact:after{width:9.375rem}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-ughevsp 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-ughevsp 2s ease-in-out infinite}}@keyframes jkl-sweep-ughevs8{0%{transform:translateX(-200px)}80%,to{transform:translateX(calc(100vw + 400px))}}@keyframes jkl-blink-ughevsp{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}

package/src/components/radio-button/styles/radio-button.css

@@ -44,7 +44,7 @@
   --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
 }
 
-@keyframes jkl-dot-in-u8irt39 {
+@keyframes jkl-dot-in-u09uvyn {
   0% {
     transform: scale(0.8);
   }
@@ -87,7 +87,7 @@
 }
 .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
   --dot-color: var(--jkl-color-border-action);
-  animation: jkl-dot-in-u8irt39 150ms ease;
+  animation: jkl-dot-in-u09uvyn 150ms ease;
 }
 @media screen and (forced-colors: active) {
   .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {

package/src/components/radio-button/styles/radio-button.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:0.25rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-u8irt39{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:#0000;--background-color:#0000;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);position:relative}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{opacity:0;position:absolute;top:-6px}.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-u8irt39 .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:0.25rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-u09uvyn{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:#0000;--background-color:#0000;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);position:relative}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{opacity:0;position:absolute;top:-6px}.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-u09uvyn .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}

package/src/components/text-input/styles/_index.scss

@@ -0,0 +1 @@
+@forward "text-input";

package/src/components/text-input/styles/text-input.css

@@ -0,0 +1,513 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-text-input-border-color: #636060;
+    --jkl-text-input-text-color: #1b1917;
+    --jkl-text-input-placeholder-color: #636060;
+    --jkl-text-input-unit-color: #1b1917;
+    --jkl-text-input-background-color: #ffffff;
+    --jkl-text-input-focus-color: #1b1917;
+    --jkl-text-input-error-background-color: #f6b3b3;
+    --jkl-text-input-error-text-color: #1b1917;
+    --jkl-text-input-error-placeholder-color: #636060;
+    --jkl-text-input-selection-color: rgba(27, 25, 23, 0.2);
+    --jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
+    --jkl-text-area-counter-count-color: #636060;
+  }
+}
+[data-theme=light] {
+  --jkl-text-input-border-color: #636060;
+  --jkl-text-input-text-color: #1b1917;
+  --jkl-text-input-placeholder-color: #636060;
+  --jkl-text-input-unit-color: #1b1917;
+  --jkl-text-input-background-color: #ffffff;
+  --jkl-text-input-focus-color: #1b1917;
+  --jkl-text-input-error-background-color: #f6b3b3;
+  --jkl-text-input-error-text-color: #1b1917;
+  --jkl-text-input-error-placeholder-color: #636060;
+  --jkl-text-input-selection-color: rgba(27, 25, 23, 0.2);
+  --jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
+  --jkl-text-area-counter-count-color: #636060;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-text-input-border-color: #c8c5c3;
+    --jkl-text-input-text-color: #f9f9f9;
+    --jkl-text-input-placeholder-color: #c8c5c3;
+    --jkl-text-input-unit-color: #f9f9f9;
+    --jkl-text-input-background-color: #313030;
+    --jkl-text-input-focus-color: #f9f9f9;
+    --jkl-text-input-selection-color: rgba(249, 249, 249, 0.25);
+    --jkl-text-input-error-background-color: #f6b3b3;
+    --jkl-text-input-error-text-color: #1b1917;
+    --jkl-text-input-error-placeholder-color: #636060;
+    --jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
+    --jkl-text-area-counter-count-color: #c8c5c3;
+  }
+}
+[data-theme=dark] {
+  --jkl-text-input-border-color: #c8c5c3;
+  --jkl-text-input-text-color: #f9f9f9;
+  --jkl-text-input-placeholder-color: #c8c5c3;
+  --jkl-text-input-unit-color: #f9f9f9;
+  --jkl-text-input-background-color: #313030;
+  --jkl-text-input-focus-color: #f9f9f9;
+  --jkl-text-input-selection-color: rgba(249, 249, 249, 0.25);
+  --jkl-text-input-error-background-color: #f6b3b3;
+  --jkl-text-input-error-text-color: #1b1917;
+  --jkl-text-input-error-placeholder-color: #636060;
+  --jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
+  --jkl-text-area-counter-count-color: #c8c5c3;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-text-input-font-size: var(--jkl-body-font-size);
+  --jkl-text-input-line-height: var(--jkl-body-line-height);
+  --jkl-text-input-font-weight: var(--jkl-body-font-weight);
+  --jkl-text-input-height: 3rem;
+  --jkl-text-input-vertical-padding: 0.5rem;
+  --jkl-text-input-horizontal-padding: 0.75rem;
+  --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--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.5rem;
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-text-input-height: 2.75rem;
+    --jkl-text-input-action-button-size: 2.75rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-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-input-action-button {
+  flex-shrink: 0;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  cursor: pointer;
+  padding: var(--jkl-text-input-action-button-padding);
+  height: var(--jkl-text-input-action-button-size);
+  width: var(--jkl-text-input-action-button-size);
+  color: var(--jkl-text-input-border-color);
+  margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-text-input-action-button:active, .jkl-text-input-action-button:hover, .jkl-text-input-action-button:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-text-input-action-button {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-text-input-action-button:active, .jkl-text-input-action-button:hover, .jkl-text-input-action-button:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-text-input-action-button .jkl-icon-button__icon {
+  height: var(--jkl-text-input-action-button-icon-size);
+  width: var(--jkl-text-input-action-button-icon-size);
+}
+.jkl-text-input-action-button:hover {
+  color: var(--jkl-text-input-focus-color);
+}
+@media screen and (forced-colors: active) {
+  .jkl-text-input-action-button:hover {
+    border: 0.125rem inset ButtonText;
+  }
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus {
+  position: relative;
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus::after {
+  content: "";
+  position: absolute;
+  inset: var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position);
+  box-shadow: inset 0 0 0 0.125rem var(--jkl-text-input-focus-color);
+}
+
+@media screen and (forced-colors: active) {
+  .jkl-text-input-action-button {
+    border: revert;
+    background-color: revert;
+  }
+}
+@media screen and (forced-colors: active) {
+  .jkl-text-input-action-button {
+    stroke: ButtonText;
+  }
+  .jkl-text-input-action-button svg, .jkl-text-input-action-button path {
+    stroke: ButtonText;
+  }
+}
+
+.jkl-text-input-wrapper {
+  border-radius: 0.1875rem;
+  box-sizing: border-box;
+  max-width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--jkl-text-input-height);
+  font-size: var(--jkl-text-input-font-size);
+  line-height: var(--jkl-text-input-line-height);
+  font-weight: var(--jkl-text-input-font-weight);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: color, box-shadow, background-color;
+  color: var(--jkl-text-input-text-color);
+  box-shadow: inset 0 0 0 0.0625rem var(--jkl-text-input-border-color), 0 0 0 0.0625rem transparent;
+  background-color: transparent;
+}
+.jkl-text-input-wrapper:hover {
+  box-shadow: inset 0 0 0 0.0625rem var(--jkl-text-input-focus-color), 0 0 0 0.0625rem var(--jkl-text-input-focus-color);
+  border-color: var(--jkl-text-input-focus-color);
+}
+.jkl-text-input-wrapper:focus-within {
+  background-color: var(--jkl-text-input-background-color);
+  box-shadow: inset 0 0 0 0.0625rem var(--jkl-text-input-focus-color), 0 0 0 0.0625rem var(--jkl-text-input-focus-color);
+  border-color: var(--jkl-text-input-focus-color);
+}
+.jkl-text-input-wrapper[data-invalid=true] {
+  background-color: var(--jkl-text-input-error-background-color);
+  color: var(--jkl-text-input-error-text-color);
+}
+
+.jkl-text-input {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.jkl-text-input__input {
+  padding: var(--jkl-text-input-padding);
+  width: 100%;
+  background: none;
+  -webkit-appearance: none;
+  color: var(--jkl-color);
+  font-size: var(--jkl-text-input-font-size);
+  line-height: var(--jkl-text-input-line-height);
+  font-weight: var(--jkl-text-input-font-weight);
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-text-input__input:active, .jkl-text-input__input:hover, .jkl-text-input__input:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-text-input__input {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-text-input__input:active, .jkl-text-input__input:hover, .jkl-text-input__input:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-text-input__input input[type=number]::-webkit-outer-spin-button,
+.jkl-text-input__input input[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+.jkl-text-input__input input[type=number] {
+  -moz-appearance: textfield;
+}
+.jkl-text-input__input::placeholder {
+  opacity: 1;
+  color: var(--jkl-text-input-placeholder-color);
+}
+.jkl-text-input__input::selection {
+  background-color: var(--jkl-text-input-selection-color);
+}
+[data-theme=dark] .jkl-text-input__input::selection {
+  background-color: var(--jkl-text-input-selection-color);
+}
+.jkl-text-input__input[aria-invalid=true] {
+  color: var(--jkl-text-input-error-text-color);
+}
+.jkl-text-input__input[aria-invalid=true]::placeholder {
+  color: var(--jkl-text-input-error-placeholder-color);
+}
+.jkl-text-input__input[aria-invalid=true]::selection {
+  background-color: var(--jkl-text-input-error-selection-color);
+}
+.jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input-action-button {
+  color: var(--jkl-text-input-error-placeholder-color);
+}
+.jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input-action-button:hover {
+  color: var(--jkl-text-input-error-text-color);
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input-action-button:focus::after {
+  box-shadow: inset 0 0 0 0.125rem var(--jkl-text-input-error-text-color);
+}
+
+.jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input__unit {
+  color: var(--jkl-text-input-error-text-color);
+}
+.jkl-text-input__input--align-right {
+  text-align: right;
+}
+.jkl-text-input__unit {
+  padding-inline-end: var(--jkl-text-input-horizontal-padding);
+  padding-block: var(--jkl-text-input-vertical-padding);
+  color: var(--jkl-text-input-unit-color);
+}
+.jkl-text-input__action-button {
+  margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+}
+.jkl-text-input--inline {
+  display: inline-block;
+  vertical-align: middle;
+  margin: -0.125rem 0.25rem;
+}
+
+.jkl-text-area {
+  height: auto;
+  width: 100%;
+}
+.jkl-text-area__text-area {
+  scrollbar-color: var(--jkl-color) transparent;
+  box-sizing: border-box;
+  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);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: height, min-height, max-height, padding;
+  background: none;
+  -webkit-appearance: none;
+  color: var(--jkl-color);
+  font-size: var(--jkl-text-input-font-size);
+  line-height: var(--jkl-text-input-line-height);
+  font-weight: var(--jkl-text-input-font-weight);
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-text-area__text-area:active, .jkl-text-area__text-area:hover, .jkl-text-area__text-area:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-text-area__text-area {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-text-area__text-area:active, .jkl-text-area__text-area:hover, .jkl-text-area__text-area:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button,
+.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+.jkl-text-area__text-area input[type=number] {
+  -moz-appearance: textfield;
+}
+.jkl-text-area__text-area::placeholder {
+  opacity: 1;
+  color: var(--jkl-text-input-placeholder-color);
+}
+.jkl-text-area__text-area::selection {
+  background-color: var(--jkl-text-input-selection-color);
+}
+[data-theme=dark] .jkl-text-area__text-area::selection {
+  background-color: var(--jkl-text-input-selection-color);
+}
+.jkl-text-area__text-area[aria-invalid=true] {
+  color: var(--jkl-text-input-error-text-color);
+}
+.jkl-text-area__text-area[aria-invalid=true]::placeholder {
+  color: var(--jkl-text-input-error-placeholder-color);
+}
+.jkl-text-area__text-area[aria-invalid=true]::selection {
+  background-color: var(--jkl-text-input-error-selection-color);
+}
+.jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input-action-button {
+  color: var(--jkl-text-input-error-placeholder-color);
+}
+.jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input-action-button:hover {
+  color: var(--jkl-text-input-error-text-color);
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input-action-button:focus::after {
+  box-shadow: inset 0 0 0 0.125rem var(--jkl-text-input-error-text-color);
+}
+
+.jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input__unit {
+  color: var(--jkl-text-input-error-text-color);
+}
+.jkl-text-area .jkl-text-input-wrapper {
+  height: auto;
+  max-height: 100%;
+}
+.jkl-text-area--start-open .jkl-text-input-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-input-wrapper {
+  position: relative;
+}
+.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper[data-has-content=true], .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper:focus-within {
+  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;
+  left: 0;
+  right: 0;
+}
+.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count {
+  padding: var(--jkl-text-input-padding);
+  color: var(--jkl-text-area-counter-count-color);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress {
+  background-color: transparent;
+  height: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress::after {
+  content: "";
+  width: var(--progress-width, 100%);
+  display: block;
+  height: 0.25rem;
+  background-color: var(--jkl-color);
+  transition-property: width;
+  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:has(.jkl-text-area__counter) [aria-invalid=true] ~ .jkl-text-area__counter {
+  color: var(--jkl-text-input-error-text-color);
+}
+
+.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);
+  --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));
+  max-height: 100%;
+}
+
+.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);
+  --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));
+  max-height: 100%;
+}
+
+.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);
+  --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));
+  max-height: 100%;
+}
+
+.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);
+  --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));
+  max-height: 100%;
+}
+
+.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);
+  --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));
+  max-height: 100%;
+}
+
+.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);
+  --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));
+  max-height: 100%;
+}
+
+.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);
+  --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));
+  max-height: 100%;
+}
+
+.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);
+  --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));
+  max-height: 100%;
+}

package/src/components/text-input/styles/text-input.min.css

@@ -0,0 +1 @@
+@media screen and (prefers-color-scheme:light){:root{--jkl-text-input-border-color:#636060;--jkl-text-input-text-color:#1b1917;--jkl-text-input-placeholder-color:#636060;--jkl-text-input-unit-color:#1b1917;--jkl-text-input-background-color:#fff;--jkl-text-input-focus-color:#1b1917;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-selection-color:#1b191733;--jkl-text-input-error-selection-color:#1b191733;--jkl-text-area-counter-count-color:#636060}}[data-theme=light]{--jkl-text-input-border-color:#636060;--jkl-text-input-text-color:#1b1917;--jkl-text-input-placeholder-color:#636060;--jkl-text-input-unit-color:#1b1917;--jkl-text-input-background-color:#fff;--jkl-text-input-focus-color:#1b1917;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-selection-color:#1b191733;--jkl-text-input-error-selection-color:#1b191733;--jkl-text-area-counter-count-color:#636060}@media screen and (prefers-color-scheme:dark){:root{--jkl-text-input-border-color:#c8c5c3;--jkl-text-input-text-color:#f9f9f9;--jkl-text-input-placeholder-color:#c8c5c3;--jkl-text-input-unit-color:#f9f9f9;--jkl-text-input-background-color:#313030;--jkl-text-input-focus-color:#f9f9f9;--jkl-text-input-selection-color:#f9f9f940;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-error-selection-color:#1b191733;--jkl-text-area-counter-count-color:#c8c5c3}}[data-theme=dark]{--jkl-text-input-border-color:#c8c5c3;--jkl-text-input-text-color:#f9f9f9;--jkl-text-input-placeholder-color:#c8c5c3;--jkl-text-input-unit-color:#f9f9f9;--jkl-text-input-background-color:#313030;--jkl-text-input-focus-color:#f9f9f9;--jkl-text-input-selection-color:#f9f9f940;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-error-selection-color:#1b191733;--jkl-text-area-counter-count-color:#c8c5c3}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--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.5rem}@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-input-action-button{align-items:center;background-color:initial;border-style:none;box-sizing:border-box;color:var(--jkl-text-input-border-color);cursor:pointer;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1);outline:0;outline-style:none;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size)}.jkl-text-input-action-button:active,.jkl-text-input-action-button:focus,.jkl-text-input-action-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input-action-button{border-style:revert}.jkl-text-input-action-button,.jkl-text-input-action-button:active,.jkl-text-input-action-button:focus,.jkl-text-input-action-button:hover{outline:revert;outline-style:revert}}.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-input-action-button:hover{color:var(--jkl-text-input-focus-color)}@media screen and (forced-colors:active){.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus{position:relative}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-focus-color);content:"";inset:var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position);position:absolute}@media screen and (forced-colors:active){.jkl-text-input-action-button{stroke:ButtonText;background-color:revert;border:revert}.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText}}.jkl-text-input-wrapper{align-items:center;background-color:initial;border-radius:.1875rem;box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-border-color),0 0 0 .0625rem #0000;box-sizing:border-box;color:var(--jkl-text-input-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-input-wrapper:focus-within,.jkl-text-input-wrapper:hover{border-color:var(--jkl-text-input-focus-color);box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-focus-color),0 0 0 .0625rem var(--jkl-text-input-focus-color)}.jkl-text-input-wrapper:focus-within{background-color:var(--jkl-text-input-background-color)}.jkl-text-input-wrapper[data-invalid=true]{background-color:var(--jkl-text-input-error-background-color);color:var(--jkl-text-input-error-text-color)}.jkl-text-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-text-input__input{-webkit-appearance:none;background:none;border-style:none;color:var(--jkl-color);font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);line-height:var(--jkl-text-input-line-height);padding:var(--jkl-text-input-padding);width:100%}.jkl-text-input__input,.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input__input{border-style:revert}.jkl-text-input__input,.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:revert;outline-style:revert}}.jkl-text-input__input input[type=number]::-webkit-inner-spin-button,.jkl-text-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-input__input input[type=number]{-moz-appearance:textfield}.jkl-text-input__input::placeholder{color:var(--jkl-text-input-placeholder-color);opacity:1}.jkl-text-input__input::selection{background-color:var(--jkl-text-input-selection-color)}[data-theme=dark] .jkl-text-input__input::selection{background-color:var(--jkl-text-input-selection-color)}.jkl-text-input__input[aria-invalid=true]{color:var(--jkl-text-input-error-text-color)}.jkl-text-input__input[aria-invalid=true]::placeholder{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-input__input[aria-invalid=true]::selection{background-color:var(--jkl-text-input-error-selection-color)}.jkl-text-input__input[aria-invalid=true]~.jkl-text-input-action-button{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-input__input[aria-invalid=true]~.jkl-text-input-action-button:hover{color:var(--jkl-text-input-error-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input__input[aria-invalid=true]~.jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-error-text-color)}.jkl-text-input__input[aria-invalid=true]~.jkl-text-input__unit{color:var(--jkl-text-input-error-text-color)}.jkl-text-input__input--align-right{text-align:right}.jkl-text-input__unit{color:var(--jkl-text-input-unit-color);padding-block:var(--jkl-text-input-vertical-padding);padding-inline-end:var(--jkl-text-input-horizontal-padding)}.jkl-text-input__action-button{margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input--inline{display:inline-block;margin:-.125rem .25rem;vertical-align:middle}.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:var(--jkl-color);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}.jkl-text-area__text-area::placeholder{color:var(--jkl-text-input-placeholder-color);opacity:1}.jkl-text-area__text-area::selection{background-color:var(--jkl-text-input-selection-color)}[data-theme=dark] .jkl-text-area__text-area::selection{background-color:var(--jkl-text-input-selection-color)}.jkl-text-area__text-area[aria-invalid=true]{color:var(--jkl-text-input-error-text-color)}.jkl-text-area__text-area[aria-invalid=true]::placeholder{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-area__text-area[aria-invalid=true]::selection{background-color:var(--jkl-text-input-error-selection-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button:hover{color:var(--jkl-text-input-error-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-error-text-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input__unit{color:var(--jkl-text-input-error-text-color)}.jkl-text-area .jkl-text-input-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-input-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-input-wrapper{position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper:focus-within,.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-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{--jkl-icon-weight:300;color:var(--jkl-text-area-counter-count-color);font-size:1rem;font-weight:400;line-height:1.5rem;padding:var(--jkl-text-input-padding)}.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(--jkl-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:has(.jkl-text-area__counter) [aria-invalid=true]~.jkl-text-area__counter{color:var(--jkl-text-input-error-text-color)}.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))}