@fremtind/jokul 0.46.0 → 0.48.0

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

@@ -280,236 +280,4 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input__in
   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);
-}
-.jkl-text-area__text-area {
-  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;
-}
-@media screen and (forced-colors: active) {
-  .jkl-text-area__text-area {
-    outline: none;
-    border: none;
-  }
-  .jkl-text-area__text-area:focus-visible {
-    outline: none;
-  }
-}
-.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-color-text-on-alert);
-}
-.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-icon-size: 1.25rem;
-  --jkl-icon-opsz: 20;
-}
-.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/styles/components/text-input/text-input.min.css

@@ -1 +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.375rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}.jkl-text-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[data-invalid=true]{background-color:var(--jkl-text-input-error-background-color);color:var(--jkl-text-input-error-text-color)}.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)}@media screen and (forced-colors:active){.jkl-text-input-wrapper:hover{border:.125rem solid ButtonText}}.jkl-text-input-wrapper:has(:active){background-color:var(--jkl-text-input-background-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{--jkl-color-border-action:ButtonText}}.jkl-text-input-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input-wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-text-input-focus-color)}@media screen and (forced-colors:active){.jkl-text-input-wrapper,.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}.jkl-text-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-text-input__input{-webkit-appearance:none;background:none;border-style:none;color: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}@media screen and (forced-colors:active){.jkl-text-input__input{border:none;outline:none}.jkl-text-input__input:focus-visible{outline:none}}.jkl-text-input__input::placeholder{color:var(--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-color-text-on-alert)}.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{-webkit-padding-end:var(--jkl-text-input-horizontal-padding);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{-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input--inline{display:inline-block;margin:-.125rem .25rem;vertical-align:middle}.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}@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(--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-color-text-on-alert)}.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{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-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:initial;height:.25rem;overflow:hidden;width:100%}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{background-color:var(--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))}
+@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.375rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}.jkl-text-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[data-invalid=true]{background-color:var(--jkl-text-input-error-background-color);color:var(--jkl-text-input-error-text-color)}.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)}@media screen and (forced-colors:active){.jkl-text-input-wrapper:hover{border:.125rem solid ButtonText}}.jkl-text-input-wrapper:has(:active){background-color:var(--jkl-text-input-background-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{--jkl-color-border-action:ButtonText}}.jkl-text-input-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input-wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-text-input-focus-color)}@media screen and (forced-colors:active){.jkl-text-input-wrapper,.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}.jkl-text-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-text-input__input{-webkit-appearance:none;background:none;border-style:none;color: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}@media screen and (forced-colors:active){.jkl-text-input__input{border:none;outline:none}.jkl-text-input__input:focus-visible{outline:none}}.jkl-text-input__input::placeholder{color:var(--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-color-text-on-alert)}.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{-webkit-padding-end:var(--jkl-text-input-horizontal-padding);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{-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input--inline{display:inline-block;margin:-.125rem .25rem;vertical-align:middle}

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

@@ -2,254 +2,10 @@
 @use "sass:color";
 @use "../../core/jkl";
 @use "../../core/jkl/colors";
-
-$_text-input-height: jkl.rem(48px);
-$_text-input-height--mobile: jkl.rem(44px);
-$_text-input-height--compact: jkl.rem(32px);
-$_text-input-vertical-padding: jkl.$spacing-xs;
-$_text-input-vertical-padding--compact: jkl.$spacing-2xs;
-$_text-input-horizontal-padding: jkl.$spacing-s;
-$_text-input-horizontal-padding--compact: jkl.$spacing-xs;
-
-$_action-button-size: jkl.rem(48px);
-$_action-button-size--mobile: jkl.rem(44px);
-$_action-button-size--compact: jkl.rem(32px);
-$_action-button-icon-size: jkl.rem(20px);
-$_action-button-icon-size--compact: jkl.rem(18px);
-$_action-button-padding: jkl.$spacing-xs 0;
-$_action-button-padding--compact: 0;
-$_action-button-focus-position: jkl.rem(6px);
-$_action-button-focus-position--compact: 0;
-
-$_text-input-focus-color: jkl.$color-granitt;
-$_text-input-selection-color: color.scale(
-    $color: $_text-input-focus-color,
-    $alpha: -80%,
-);
-
-$_text-input-focus-color--inverted: jkl.$color-snohvit;
-$_text-input-selection-color--inverted: color.scale(
-    $color: $_text-input-focus-color--inverted,
-    $alpha: -75%,
-);
-
-@include jkl.light-mode-variables {
-    --jkl-text-input-border-color: #{jkl.$color-stein};
-    --jkl-text-input-text-color: #{jkl.$color-granitt};
-    --jkl-text-input-placeholder-color: #{jkl.$color-stein};
-    --jkl-text-input-unit-color: #{jkl.$color-granitt};
-    --jkl-text-input-background-color: #{jkl.$color-hvit};
-    --jkl-text-input-focus-color: #{$_text-input-focus-color};
-    --jkl-text-input-error-background-color: #{jkl.$color-feil};
-    --jkl-text-input-error-text-color: #{jkl.$color-granitt};
-    --jkl-text-input-error-placeholder-color: #{jkl.$color-stein};
-    --jkl-text-input-selection-color: #{$_text-input-selection-color};
-    --jkl-text-input-error-selection-color: #{$_text-input-selection-color};
-    --jkl-text-area-counter-count-color: #{jkl.$color-stein};
-}
-
-@include jkl.dark-mode-variables {
-    --jkl-text-input-border-color: #{jkl.$color-svaberg};
-    --jkl-text-input-text-color: #{jkl.$color-snohvit};
-    --jkl-text-input-placeholder-color: #{jkl.$color-svaberg};
-    --jkl-text-input-unit-color: #{jkl.$color-snohvit};
-    --jkl-text-input-background-color: #{jkl.$color-skifer};
-    --jkl-text-input-focus-color: #{$_text-input-focus-color--inverted};
-    --jkl-text-input-selection-color: #{$_text-input-selection-color--inverted};
-    --jkl-text-input-error-background-color: #{jkl.$color-feil};
-    --jkl-text-input-error-text-color: #{jkl.$color-granitt};
-    --jkl-text-input-error-placeholder-color: #{jkl.$color-stein};
-    --jkl-text-input-error-selection-color: #{$_text-input-selection-color};
-    --jkl-text-area-counter-count-color: #{jkl.$color-svaberg};
-}
-
-@include jkl.comfortable-density-variables {
-    @include jkl.declare-font-variables("jkl-text-input", "body");
-
-    --jkl-text-input-height: #{$_text-input-height};
-    --jkl-text-input-vertical-padding: #{$_text-input-vertical-padding};
-    --jkl-text-input-horizontal-padding: #{$_text-input-horizontal-padding};
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
-        var(--jkl-text-input-horizontal-padding);
-    --jkl-text-input-action-button-size: #{$_action-button-size};
-    --jkl-text-input-action-button-icon-size: #{$_action-button-icon-size};
-    --jkl-text-input-action-button-padding: #{$_action-button-padding};
-    --jkl-text-input-action-button-focus-position: #{$_action-button-focus-position};
-
-    @include jkl.small-device {
-        --jkl-text-input-height: #{$_text-input-height--mobile};
-        --jkl-text-input-action-button-size: #{$_action-button-size--mobile};
-    }
-}
-
-@include jkl.compact-density-variables {
-    @include jkl.declare-font-variables("jkl-text-input", "small");
-
-    --jkl-text-input-height: #{$_text-input-height--compact};
-    --jkl-text-input-vertical-padding: #{$_text-input-vertical-padding--compact};
-    --jkl-text-input-horizontal-padding: #{$_text-input-horizontal-padding--compact};
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
-        var(--jkl-text-input-horizontal-padding);
-    --jkl-text-input-action-button-size: #{$_action-button-size--compact};
-    --jkl-text-input-action-button-icon-size: #{$_action-button-icon-size--compact};
-    --jkl-text-input-action-button-padding: #{$_action-button-padding--compact};
-    --jkl-text-input-action-button-focus-position: #{$_action-button-focus-position--compact};
-}
-
-@mixin _shared-input-styles {
-    background: none;
-    -webkit-appearance: none;
-    color: var(--jkl-color);
-
-    @include jkl.use-font-variables("jkl-text-input");
-    @include jkl.reset-outline;
-    @include jkl.remove-inner-outer-button;
-
-    @include jkl.forced-colors-mode {
-        outline: none;
-        border: none;
-
-        &:focus-visible {
-            outline: none;
-        }
-    }
-
-    // Placeholder text style
-    &::placeholder {
-        opacity: 1;
-        color: var(--jkl-text-input-placeholder-color);
-    }
-
-    // Color of text selection
-    &::selection {
-        background-color: var(--jkl-text-input-selection-color);
-
-        [data-theme="dark"] & {
-            background-color: var(--jkl-text-input-selection-color);
-        }
-    }
-
-    //  Invalid state
-    &[aria-invalid="true"] {
-        color: var(--jkl-text-input-error-text-color);
-
-        &::placeholder {
-            color: var(--jkl-text-input-error-placeholder-color);
-        }
-
-        // Color of text selection
-        &::selection {
-            background-color: var(--jkl-text-input-error-selection-color);
-        }
-
-        & ~ .jkl-text-input-action-button {
-            color: var(--jkl-color-text-on-alert);
-
-            &:hover {
-                color: var(--jkl-text-input-error-text-color);
-            }
-
-            &:focus {
-                @include jkl.keyboard-navigation {
-                    &::after {
-                        box-shadow: inset 0 0 0 jkl.rem(2px)
-                            var(--jkl-text-input-error-text-color);
-                    }
-                }
-            }
-        }
-
-        & ~ .jkl-text-input__unit {
-            color: var(--jkl-text-input-error-text-color);
-        }
-    }
-}
+@use "../../shared/input/styles/shared-input-styles" as shared;
 
 .jkl-text-input-wrapper {
-    border-radius: jkl.rem(3px);
-    box-sizing: border-box;
-    max-width: 100%;
-
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: var(--jkl-text-input-height);
-
-    @include jkl.use-font-variables("jkl-text-input");
-    @include jkl.motion;
-    transition-property: color, box-shadow, background-color;
-
-    color: var(--jkl-text-input-text-color);
-    box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-border-color),
-        0 0 0 jkl.rem(1px) transparent;
-    background-color: transparent;
-
-    &[data-invalid="true"] {
-        background-color: var(--jkl-text-input-error-background-color);
-        color: var(--jkl-text-input-error-text-color);
-    }
-
-    &:hover {
-        box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color),
-            0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color);
-        border-color: var(--jkl-text-input-focus-color);
-
-        @include jkl.forced-colors-mode {
-            border: jkl.rem(2px) solid ButtonText;
-        }
-    }
-
-    &:has(:active) {
-        background-color: var(--jkl-text-input-background-color);
-    }
-
-    @include jkl.keyboard-navigation {
-        &:has(.jkl-text-input__input:focus-visible),
-        &:has(.jkl-text-area__text-area:focus-visible) {
-            @include jkl.focus-outline;
-        }
-    }
-
-    > .jkl-icon-button:focus-visible {
-        @include jkl.focus-outline($offset: -8px);
-
-        @include jkl.forced-colors-mode {
-            --jkl-color-border-action: ButtonText;
-        }
-    }
-
-    > .jkl-text-input-action-button {
-        flex-shrink: 0;
-        display: flex;
-        box-sizing: border-box;
-        align-items: center;
-        justify-content: center;
-        padding: var(--jkl-text-input-action-button-padding);
-        height: var(--jkl-text-input-action-button-size);
-        width: var(--jkl-text-input-action-button-size);
-
-        // Unngå for langt mellomrom mellom ikon og teksten i feltet
-        margin-inline-start: calc(
-            var(--jkl-text-input-horizontal-padding) * -1
-        );
-
-        .jkl-icon-button__icon {
-            height: var(--jkl-text-input-action-button-icon-size);
-            width: var(--jkl-text-input-action-button-icon-size);
-        }
-
-        &:hover {
-            color: var(--jkl-text-input-focus-color);
-
-            @include jkl.forced-colors-mode {
-                border: jkl.rem(2px) inset ButtonText;
-            }
-        }
-    }
-
-    @include jkl.forced-colors-mode {
-        border: jkl.rem(2px) inset ButtonText;
-    }
+    @include shared.wrapper_styles;
 }
 
 .jkl-text-input {
@@ -260,7 +16,7 @@ $_text-input-selection-color--inverted: color.scale(
     &__input {
         padding: var(--jkl-text-input-padding);
         width: 100%;
-        @include _shared-input-styles;
+        @include shared.input-styles;
 
         &--align-right {
             text-align: right;
@@ -285,118 +41,3 @@ $_text-input-selection-color--inverted: color.scale(
         margin: jkl.rem(-2px) jkl.rem(4px);
     }
 }
-
-.jkl-text-area {
-    height: auto;
-    width: 100%;
-
-    &__text-area {
-        scrollbar-color: var(--jkl-color) transparent; // Unngå at scrollbar ligger oppå rammen
-        box-sizing: border-box;
-        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);
-
-        @include jkl.motion;
-        transition-property: height, min-height, max-height, padding;
-        @include _shared-input-styles;
-    }
-
-    .jkl-text-input-wrapper {
-        height: auto;
-        max-height: 100%;
-    }
-
-    &--start-open {
-        .jkl-text-input-wrapper {
-            max-height: 100%;
-        }
-    }
-
-    &--auto-expand {
-        .jkl-text-area__text-area {
-            overflow: hidden; // Skjul scrollbar når høyden autojusteres
-        }
-    }
-
-    &:has(.jkl-text-area__counter) {
-        $progress-bar-height: jkl.rem(4px);
-
-        .jkl-text-input-wrapper {
-            position: relative;
-
-            &[data-has-content="true"],
-            &:focus-within {
-                padding-bottom: calc(
-                    var(--jkl-text-input-height) + #{$progress-bar-height}
-                );
-            }
-        }
-
-        .jkl-text-area__counter {
-            @include jkl.motion;
-            transition-property: opacity;
-            opacity: 0;
-
-            pointer-events: none; // La brukeren klikke gjennom telleren når feltet er kollapset
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-
-            &-count {
-                padding: var(--jkl-text-input-padding);
-                color: var(--jkl-text-area-counter-count-color);
-                @include jkl.text-style("small");
-            }
-
-            &-progress {
-                background-color: transparent;
-                height: $progress-bar-height;
-                width: 100%;
-                overflow: hidden;
-
-                &::after {
-                    content: "";
-                    width: var(--progress-width, 100%);
-                    display: block;
-                    height: $progress-bar-height;
-                    background-color: var(--jkl-color);
-                    transition-property: width;
-                    @include jkl.motion("standard", "lazy");
-                }
-            }
-        }
-
-        &:focus-within .jkl-text-area__counter {
-            opacity: 1;
-            transition-delay: jkl.timing(
-                "productive"
-            ); // Vent med å fade inn til feltet er ekspandert
-        }
-
-        [aria-invalid="true"] ~ .jkl-text-area__counter {
-            color: var(--jkl-text-input-error-text-color);
-        }
-    }
-}
-
-// Nytteklasser for tekstfelt med $num antall rader
-@for $num from 3 through 10 {
-    .jkl-text-area__text-area--#{$num}-rows:focus,
-    .jkl-text-area__text-area--#{$num}-rows:not(:placeholder-shown),
-    .jkl-text-area--start-open .jkl-text-area__text-area--#{$num}-rows {
-        --height: calc(var(--jkl-text-input-line-height) * #{$num});
-        --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
-
-        // (#2751) Ekspanderende får inline style med height auto,
-        //         som gir et "hopp" dersom det er en teller og vi
-        //         ikke har en minimumshøyde.
-        min-height: calc(var(--height) + var(--vertical-padding)); // (#2751)
-        height: calc(var(--height) + var(--vertical-padding));
-        max-height: 100%;
-    }
-}