@fremtind/jokul 0.45.3 → 0.47.0

package/styles/components/toast/toast.css

@@ -185,14 +185,14 @@
 
 .jkl-toast[data-animation=entering],
 .jkl-toast[data-animation=queued] {
-  animation: jkl-entering-uphyht7 200ms ease-out forwards;
+  animation: jkl-entering-ufj529t 200ms ease-out forwards;
 }
 
 .jkl-toast[data-animation=exiting] {
-  animation: jkl-exiting-uphyhu5 150ms ease-in forwards;
+  animation: jkl-exiting-ufj52a8 150ms ease-in forwards;
 }
 
-@keyframes jkl-entering-uphyht7 {
+@keyframes jkl-entering-ufj529t {
   from {
     opacity: 0;
     transform: translate3d(0, 50%, 0);
@@ -202,7 +202,7 @@
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes jkl-exiting-uphyhu5 {
+@keyframes jkl-exiting-ufj52a8 {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);

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

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

package/styles/shared/input/shared-input-styles.css

@@ -0,0 +1,106 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 18 Dec 2024 12:25:37 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.375rem;
+}
+@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;
+}

package/styles/shared/input/shared-input-styles.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.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}

package/styles/shared/input/shared-input-styles.scss

@@ -0,0 +1,251 @@
+@use "sass:color";
+@use "../../core/jkl";
+
+$_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 wrapper-styles {
+    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;
+    }
+}
+
+@mixin 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);
+        }
+    }
+}