@fremtind/jokul 0.37.9 → 0.37.11

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

@@ -40,13 +40,13 @@
 .jkl-system-message__content {
   box-sizing: border-box;
   padding: var(--jkl-system-message-content-padding);
-  display: flex;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
   align-items: flex-start;
   width: 100%;
   margin: 0 auto;
 }
 .jkl-system-message__icon {
-  align-self: flex-start;
   height: var(--jkl-system-message-icon-height);
   margin: var(--jkl-system-message-icon-padding);
   flex-shrink: 0;
@@ -69,15 +69,22 @@
   background-color: transparent;
   padding: 0;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-start;
+  display: grid;
+  place-content: center;
+  position: relative;
   flex-shrink: 0;
+  margin-top: 0.1875rem;
+  color: inherit;
+}
+.jkl-system-message__dismiss-button::after {
+  content: "";
+  position: absolute;
+  display: block;
   width: var(--jkl-system-message-dismiss-button-size);
   height: var(--jkl-system-message-dismiss-button-size);
-  margin: var(--jkl-system-message-dismiss-button-margin);
-  color: inherit;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 @media screen and (forced-colors: active) {
   .jkl-system-message__dismiss-button {
@@ -123,21 +130,21 @@
     stroke: ButtonText;
   }
 }
-html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus {
-  outline: 2px solid #1b1917;
+.jkl-system-message__dismiss-button:focus-visible {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 @media screen and (forced-colors: active) {
-  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus {
+  .jkl-system-message__dismiss-button:focus-visible {
     outline: 2px solid ButtonText;
     outline-offset: 2px;
   }
 }
-
 .jkl-system-message__message, .jkl-system-message__message:last-child {
   margin-bottom: 0;
 }
 .jkl-system-message--dismissed {
-  animation: jkl-dismiss-us428ur 400ms ease-in forwards;
+  animation: jkl-dismiss-u5mgpsa 400ms ease-in forwards;
   transition: visibility 0ms 400ms;
   visibility: hidden;
 }
@@ -169,7 +176,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
   }
 }
 
-@keyframes jkl-dismiss-us428ur {
+@keyframes jkl-dismiss-u5mgpsa {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);

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

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:flex;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{align-self:flex-start;flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{align-items:center;align-self:flex-start;background-color:transparent;color:inherit;cursor:pointer;display:flex;flex-shrink:0;height:var(--jkl-system-message-dismiss-button-size);justify-content:center;margin:var(--jkl-system-message-dismiss-button-margin);padding:0;width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus{outline:2px solid #1b1917}@media screen and (forced-colors:active){html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-us428ur .4s ease-in forwards;transition:visibility 0s .4s;visibility:hidden}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-us428ur{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-u5mgpsa .4s ease-in forwards;transition:visibility 0s .4s;visibility:hidden}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-u5mgpsa{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}

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

@@ -5,7 +5,6 @@
 
 $_dismiss-animation-name: jkl-dismiss-#{string.unique-id()};
 $_dismiss-animation-duration: jkl.timing("lazy");
-$_dismiss-focus-border-color: jkl.$color-granitt;
 $_dismiss-hover-color: jkl.$color-stein;
 
 @include jkl.comfortable-density-variables {
@@ -44,14 +43,14 @@ $_dismiss-hover-color: jkl.$color-stein;
     &__content {
         box-sizing: border-box;
         padding: var(--jkl-system-message-content-padding);
-        display: flex;
+        display: grid;
+        grid-template-columns: min-content 1fr min-content;
         align-items: flex-start;
         width: 100%;
         margin: 0 auto;
     }
 
     &__icon {
-        align-self: flex-start;
         height: var(--jkl-system-message-icon-height);
         margin: var(--jkl-system-message-icon-padding);
         flex-shrink: 0;
@@ -68,18 +67,25 @@ $_dismiss-hover-color: jkl.$color-stein;
         background-color: transparent;
         padding: 0;
         cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        align-self: flex-start;
+        display: grid;
+        place-content: center;
+        position: relative;
         flex-shrink: 0;
+        margin-top: jkl.rem(3px); // visual alignment with text
+        color: inherit;
 
         // Sørg for å ha en stor nok touch target.
-        width: var(--jkl-system-message-dismiss-button-size);
-        height: var(--jkl-system-message-dismiss-button-size);
-        margin: var(--jkl-system-message-dismiss-button-margin);
+        &::after {
+            content: "";
+            position: absolute;
+            display: block;
+            width: var(--jkl-system-message-dismiss-button-size);
+            height: var(--jkl-system-message-dismiss-button-size);
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
 
-        color: inherit;
         @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
         @include jkl.forced-colors-mode {
             background-color: ButtonFace;
@@ -92,14 +98,12 @@ $_dismiss-hover-color: jkl.$color-stein;
             @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
         }
 
-        &:focus {
-            @include jkl.keyboard-navigation {
-                outline: 2px solid $_dismiss-focus-border-color;
+        &:focus-visible {
+            @include jkl.focus-outline;
 
-                @include jkl.forced-colors-mode {
-                    outline: 2px solid ButtonText;
-                    outline-offset: 2px;
-                }
+            @include jkl.forced-colors-mode {
+                outline: 2px solid ButtonText;
+                outline-offset: 2px;
             }
         }
     }

package/styles/components/tabs/tabs.css

@@ -111,7 +111,7 @@
   --text-color: var(--jkl-color-text-interactive-hover);
 }
 .jkl-tab:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-action);
   outline-offset: -2px;
 }
 .jkl-tab[aria-selected=true] {

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

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-spacing-8) var(--jkl-spacing-40) var(--jkl-spacing-12) var(--jkl-spacing-2);--jkl-tab-font-size:var(--jkl-body-font-size);--jkl-tab-line-height:var(--jkl-body-line-height);--jkl-tab-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-spacing-8) var(--jkl-spacing-24) var(--jkl-spacing-12) var(--jkl-spacing-2)}}[data-density=compact],[data-layout-density=compact]{--jkl-tab-font-size:var(--jkl-small-font-size);--jkl-tab-line-height:var(--jkl-small-line-height);--jkl-tab-font-weight:var(--jkl-small-font-weight);--jkl-tab-padding:var(--jkl-spacing-2) var(--jkl-spacing-32) var(--jkl-spacing-4) 0}.jkl-tabs{overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none}.jkl-tabs::-webkit-scrollbar{display:none}.jkl-tablist{--text-color:var(--jkl-color-text-interactive);--line-color:var(--jkl-color-border-separator);--indicator-color:var(--jkl-color-border-separator-hover);border-bottom:1px solid var(--line-color);display:inline-flex;flex-direction:row;margin:0;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:0;position:relative;width:100%}.jkl-tablist__indicator{background-color:var(--indicator-color);height:2px;position:absolute;transition-duration:.4s;transition-property:left,width;transition-timing-function:ease;will-change:left,width}@media screen and (forced-colors:active){.jkl-tablist__indicator{background-color:Highlight}.jkl-tablist{border-color:GrayText}}.jkl-tab{background-color:transparent;border:none;border-style:none;color:var(--text-color);cursor:pointer;font-size:var(--jkl-tab-font-size);font-weight:var(--jkl-tab-font-weight);line-height:var(--jkl-tab-line-height);outline:0;outline-style:none;padding:var(--jkl-tab-padding);position:relative;scroll-margin-inline-start:var(--jkl-spacing-16);scroll-snap-align:start;text-decoration:none;white-space:nowrap}.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{border-style:revert;outline:revert;outline-style:revert}.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-interactive-hover)}.jkl-tab:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:-2px}.jkl-tab[aria-selected=true]{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-spacing-8) var(--jkl-spacing-40) var(--jkl-spacing-12) var(--jkl-spacing-2);--jkl-tab-font-size:var(--jkl-body-font-size);--jkl-tab-line-height:var(--jkl-body-line-height);--jkl-tab-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-spacing-8) var(--jkl-spacing-24) var(--jkl-spacing-12) var(--jkl-spacing-2)}}[data-density=compact],[data-layout-density=compact]{--jkl-tab-font-size:var(--jkl-small-font-size);--jkl-tab-line-height:var(--jkl-small-line-height);--jkl-tab-font-weight:var(--jkl-small-font-weight);--jkl-tab-padding:var(--jkl-spacing-2) var(--jkl-spacing-32) var(--jkl-spacing-4) 0}.jkl-tabs{overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none}.jkl-tabs::-webkit-scrollbar{display:none}.jkl-tablist{--text-color:var(--jkl-color-text-interactive);--line-color:var(--jkl-color-border-separator);--indicator-color:var(--jkl-color-border-separator-hover);border-bottom:1px solid var(--line-color);display:inline-flex;flex-direction:row;margin:0;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:0;position:relative;width:100%}.jkl-tablist__indicator{background-color:var(--indicator-color);height:2px;position:absolute;transition-duration:.4s;transition-property:left,width;transition-timing-function:ease;will-change:left,width}@media screen and (forced-colors:active){.jkl-tablist__indicator{background-color:Highlight}.jkl-tablist{border-color:GrayText}}.jkl-tab{background-color:transparent;border:none;border-style:none;color:var(--text-color);cursor:pointer;font-size:var(--jkl-tab-font-size);font-weight:var(--jkl-tab-font-weight);line-height:var(--jkl-tab-line-height);outline:0;outline-style:none;padding:var(--jkl-tab-padding);position:relative;scroll-margin-inline-start:var(--jkl-spacing-16);scroll-snap-align:start;text-decoration:none;white-space:nowrap}.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{border-style:revert;outline:revert;outline-style:revert}.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-interactive-hover)}.jkl-tab:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-2px}.jkl-tab[aria-selected=true]{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}

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

@@ -78,7 +78,7 @@
   --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;
+  --jkl-text-input-action-button-focus-position: 0.375rem;
 }
 @media (width >= 0) and (max-width: 679px) {
   :root,
@@ -105,7 +105,44 @@
   --jkl-text-input-action-button-focus-position: 0;
 }
 
-.jkl-text-input-action-button {
+.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[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 {
+  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:has(:active) {
+  background-color: var(--jkl-text-input-background-color);
+}
+.jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible), .jkl-text-input-wrapper:has(.jkl-text-area__text-area: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;
+}
+.jkl-text-input-wrapper > .jkl-text-input-action-button {
   flex-shrink: 0;
   display: flex;
   box-sizing: border-box;
@@ -116,78 +153,33 @@
   width: var(--jkl-text-input-action-button-size);
   margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
 }
-.jkl-text-input-action-button .jkl-icon-button__icon {
+.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-action-button:hover {
+.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-action-button:hover {
+  .jkl-text-input-wrapper > .jkl-text-input-action-button:hover {
     border: 0.125rem inset ButtonText;
   }
 }
-.jkl-text-input-action-button:focus-visible {
-  outline: none !important;
-}
-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 {
+  .jkl-text-input-wrapper > .jkl-text-input-action-button {
     border: revert;
     background-color: revert;
   }
 }
 @media screen and (forced-colors: active) {
-  .jkl-text-input-action-button {
+  .jkl-text-input-wrapper > .jkl-text-input-action-button {
     stroke: ButtonText;
   }
-  .jkl-text-input-action-button svg, .jkl-text-input-action-button path {
+  .jkl-text-input-wrapper > .jkl-text-input-action-button svg, .jkl-text-input-wrapper > .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;

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:rgba(27,25,23,.2);--jkl-text-input-error-selection-color:rgba(27,25,23,.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:#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:rgba(27,25,23,.2);--jkl-text-input-error-selection-color:rgba(27,25,23,.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:hsla(0,0%,98%,.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,.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:hsla(0,0%,98%,.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,.2);--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;box-sizing:border-box;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);padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size)}.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}}.jkl-text-input-action-button:focus-visible{outline:none!important}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{background-color:revert;border:revert;stroke:ButtonText}.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText}}.jkl-text-input-wrapper{align-items:center;background-color:transparent;border-radius:.1875rem;box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-border-color),0 0 0 .0625rem transparent;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: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);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[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);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);width:100%}.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;outline:revert;outline-style:revert}.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-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{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);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) transparent;transition-duration:.15s;transition-property:height,min-height,max-height,padding;transition-timing-function:ease;width:100%}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{border-style:revert;outline:revert;outline-style:revert}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}.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:transparent;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:rgba(27,25,23,.2);--jkl-text-input-error-selection-color:rgba(27,25,23,.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:#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:rgba(27,25,23,.2);--jkl-text-input-error-selection-color:rgba(27,25,23,.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:hsla(0,0%,98%,.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,.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:hsla(0,0%,98%,.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,.2);--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:transparent;border-radius:.1875rem;box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-border-color),0 0 0 .0625rem transparent;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)}.jkl-text-input-wrapper:has(:active){background-color:var(--jkl-text-input-background-color)}.jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible),.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}.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;margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1);padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size)}.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-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-text-input-action-button{background-color:revert;border:revert}}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-text-input-action-button{stroke:ButtonText}.jkl-text-input-wrapper>.jkl-text-input-action-button path,.jkl-text-input-wrapper>.jkl-text-input-action-button svg{stroke: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);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);width:100%}.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;outline:revert;outline-style:revert}.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-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{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);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) transparent;transition-duration:.15s;transition-property:height,min-height,max-height,padding;transition-timing-function:ease;width:100%}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{border-style:revert;outline:revert;outline-style:revert}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}.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:transparent;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))}

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

@@ -18,7 +18,7 @@ $_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(8px);
+$_action-button-focus-position: jkl.rem(6px);
 $_action-button-focus-position--compact: 0;
 
 $_text-input-focus-color: jkl.$color-granitt;
@@ -156,63 +156,6 @@ $_text-input-selection-color--inverted: color.scale(
     }
 }
 
-.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;
-        }
-    }
-
-    &:focus-visible {
-        // The default icon-button focus looks pretty terrible when the button
-        // is inside an input field so make sure to remove it.
-        outline: none !important;
-    }
-
-    &:focus {
-        @include jkl.keyboard-navigation {
-            position: relative;
-
-            &::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 jkl.rem(2px)
-                    var(--jkl-text-input-focus-color);
-            }
-        }
-    }
-
-    @include jkl.forced-colors-mode {
-        border: revert;
-        background-color: revert;
-    }
-
-    @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
-}
-
 .jkl-text-input-wrapper {
     border-radius: jkl.rem(3px);
     box-sizing: border-box;
@@ -232,22 +175,64 @@ $_text-input-selection-color--inverted: color.scale(
         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);
     }
 
-    &:focus-within {
+    &:has(:active) {
         background-color: var(--jkl-text-input-background-color);
-        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);
     }
 
-    &[data-invalid="true"] {
-        background-color: var(--jkl-text-input-error-background-color);
-        color: var(--jkl-text-input-error-text-color);
+    &: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);
+    }
+
+    > .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: revert;
+            background-color: revert;
+        }
+
+        @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
     }
 }
 

package/styles/components/toast/toast.css

@@ -195,14 +195,14 @@
 
 .jkl-toast[data-animation=entering],
 .jkl-toast[data-animation=queued] {
-  animation: jkl-entering-u605vvb 200ms ease-out forwards;
+  animation: jkl-entering-uhtkh4w 200ms ease-out forwards;
 }
 
 .jkl-toast[data-animation=exiting] {
-  animation: jkl-exiting-u605vvc 150ms ease-in forwards;
+  animation: jkl-exiting-uhtkh5f 150ms ease-in forwards;
 }
 
-@keyframes jkl-entering-u605vvb {
+@keyframes jkl-entering-uhtkh4w {
   from {
     opacity: 0;
     transform: translate3d(0, 50%, 0);
@@ -212,7 +212,7 @@
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes jkl-exiting-u605vvc {
+@keyframes jkl-exiting-uhtkh5f {
   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:1rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:0.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:transparent;bottom:1.5rem;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:1rem;min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:1.5rem}.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;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}}@media (width >= 0) and (max-width:679px){.jkl-toast{grid-template-areas:"progress progress" "icon dismiss" "content content"}}@media (min-width:680px){.jkl-toast{grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto}}.jkl-toast__progress{grid-area:progress;margin-bottom:1rem;margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:transparent;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:1rem;width:1.5rem}@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 .25rem;--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:transparent;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-u605vvb .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-u605vvc .15s ease-in forwards}@keyframes jkl-entering-u605vvb{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-u605vvc{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:1rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:0.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:transparent;bottom:1.5rem;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:1rem;min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:1.5rem}.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;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}}@media (width >= 0) and (max-width:679px){.jkl-toast{grid-template-areas:"progress progress" "icon dismiss" "content content"}}@media (min-width:680px){.jkl-toast{grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto}}.jkl-toast__progress{grid-area:progress;margin-bottom:1rem;margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:transparent;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:1rem;width:1.5rem}@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 .25rem;--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:transparent;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-uhtkh4w .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uhtkh5f .15s ease-in forwards}@keyframes jkl-entering-uhtkh4w{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uhtkh5f{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}

package/styles/components/toggle-switch/toggle-switch.css

@@ -270,8 +270,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
 }
 .jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-toggle-switch-widget__slider {
   position: relative;