@fremtind/jokul 0.37.10 → 0.37.12

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
 @media screen and (prefers-color-scheme: light) {
   :root {
@@ -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

@@ -1,17 +1,17 @@
 /**
  * Do not edit directly
- * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --jkl-toast-padding: 1rem;
+  --jkl-toast-padding: calc(var(--jkl-unit-10) * 2);
 }
 @media (width >= 0) and (max-width: 679px) {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-toast-padding: 0.75rem;
+    --jkl-toast-padding: calc(var(--jkl-unit-10) * 1.5);
   }
 }
 
@@ -26,7 +26,7 @@
   display: flex;
   justify-content: center;
   position: fixed;
-  bottom: 1.5rem;
+  bottom: calc(var(--jkl-unit-10) * 3);
   right: 0;
   left: 0;
   width: 100%;
@@ -38,11 +38,11 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  gap: calc(var(--jkl-unit-10) * 2);
 }
 .jkl-toast-region--left {
   justify-content: flex-start;
-  left: 1.5rem;
+  left: calc(var(--jkl-unit-10) * 3);
 }
 
 .jkl-toast {
@@ -85,7 +85,7 @@
 }
 .jkl-toast__progress {
   grid-area: progress;
-  margin-bottom: 1rem;
+  margin-bottom: calc(var(--jkl-unit-10) * 2);
   margin-inline: calc(-1 * var(--jkl-toast-padding));
 }
 .jkl-toast__progress .jkl-countdown {
@@ -95,8 +95,8 @@
 }
 .jkl-toast__icon {
   grid-area: icon;
-  width: 1.5rem;
-  margin-right: 1rem;
+  width: calc(var(--jkl-unit-10) * 3);
+  margin-right: calc(var(--jkl-unit-10) * 2);
 }
 @media screen and (forced-colors: active) {
   .jkl-toast__icon {
@@ -113,7 +113,7 @@
   margin-top: -0.125rem;
 }
 .jkl-toast__title {
-  margin: 0 0 0.25rem 0;
+  margin: 0 0 calc(var(--jkl-unit-10) * 0.5) 0;
   font-size: 1.125rem;
   line-height: 1.5rem;
   font-weight: 700;
@@ -195,14 +195,14 @@
 
 .jkl-toast[data-animation=entering],
 .jkl-toast[data-animation=queued] {
-  animation: jkl-entering-uergdyx 200ms ease-out forwards;
+  animation: jkl-entering-ubbn06b 200ms ease-out forwards;
 }
 
 .jkl-toast[data-animation=exiting] {
-  animation: jkl-exiting-uergdz0 150ms ease-in forwards;
+  animation: jkl-exiting-ubbn06n 150ms ease-in forwards;
 }
 
-@keyframes jkl-entering-uergdyx {
+@keyframes jkl-entering-ubbn06b {
   from {
     opacity: 0;
     transform: translate3d(0, 50%, 0);
@@ -212,7 +212,7 @@
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes jkl-exiting-uergdz0 {
+@keyframes jkl-exiting-ubbn06n {
   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-uergdyx .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uergdz0 .15s ease-in forwards}@keyframes jkl-entering-uergdyx{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uergdz0{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:transparent;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;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: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:transparent;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:calc(var(--jkl-unit-10)*2);width:calc(var(--jkl-unit-10)*3)}@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: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-ubbn06b .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-ubbn06n .15s ease-in forwards}@keyframes jkl-entering-ubbn06b{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-ubbn06n{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}

package/styles/components/toast/toast.scss

@@ -4,15 +4,15 @@
 @use "../../core/jkl/colors";
 
 @include jkl.comfortable-density-variables {
-    --jkl-toast-padding: #{jkl.$spacing-16};
+    --jkl-toast-padding: #{jkl.$unit-20};
 
     @include jkl.small-device {
-        --jkl-toast-padding: #{jkl.$spacing-12};
+        --jkl-toast-padding: #{jkl.$unit-15};
     }
 }
 
 @include jkl.compact-density-variables {
-    --jkl-toast-padding: #{jkl.$spacing-8};
+    --jkl-toast-padding: #{jkl.$unit-10};
 }
 
 .jkl-toast-region {
@@ -21,7 +21,7 @@
     display: flex;
     justify-content: center;
     position: fixed;
-    bottom: jkl.$spacing-24;
+    bottom: jkl.$unit-30;
     right: 0;
     left: 0;
     width: 100%;
@@ -33,12 +33,12 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: jkl.$spacing-16;
+        gap: jkl.$unit-20;
     }
 
     &--left {
         justify-content: flex-start;
-        left: jkl.$spacing-24;
+        left: jkl.$unit-30;
     }
 }
 
@@ -76,7 +76,7 @@
 
     &__progress {
         grid-area: progress;
-        margin-bottom: jkl.$spacing-16;
+        margin-bottom: jkl.$unit-20;
         margin-inline: calc(
             -1 * var(--jkl-toast-padding)
         ); // Motvirk padding for å gå kant i kant.
@@ -90,8 +90,8 @@
 
     &__icon {
         grid-area: icon;
-        width: jkl.$spacing-24;
-        margin-right: jkl.$spacing-16;
+        width: jkl.$unit-30;
+        margin-right: jkl.$unit-20;
         @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
     }
 
@@ -106,7 +106,7 @@
     }
 
     &__title {
-        margin: 0 0 jkl.$spacing-4 0;
+        margin: 0 0 jkl.$unit-05 0;
         @include jkl.text-style("heading-4");
 
         & ~ .jkl-toast__message {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
 @media screen and (prefers-color-scheme: light) {
   :root {
@@ -165,7 +165,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --jkl-toggle-switch-width: 3rem;
   --jkl-toggle-switch-knob-size: 1.25rem;
   --jkl-toggle-switch-indicator-spacing: 0;
-  --jkl-toggle-switch-help-label-spacing: var(--jkl-spacing-2);
+  --jkl-toggle-switch-help-label-spacing: var(--jkl-unit-02);
 }
 
 [data-layout-density=compact],
@@ -198,7 +198,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  gap: var(--jkl-spacing-8);
+  gap: var(--jkl-unit-10);
   touch-action: none;
   font-size: var(--jkl-toggle-font-size);
   line-height: var(--jkl-toggle-line-height);
@@ -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;

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

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-slider-bg:#e0dbd4;--jkl-slider-pill:#f9f9f9;--jkl-slider-pill-text:#1b1917;--jkl-slider-pill-text--active:#000;--jkl-slider-focus-color:#000;--jkl-slider-hover-color:#000}}[data-theme=light]{--jkl-slider-bg:#e0dbd4;--jkl-slider-pill:#f9f9f9;--jkl-slider-pill-text:#1b1917;--jkl-slider-pill-text--active:#000;--jkl-slider-focus-color:#000;--jkl-slider-hover-color:#000}@media screen and (prefers-color-scheme:dark){:root{--jkl-slider-bg:#444141;--jkl-slider-pill:#1b1917;--jkl-slider-pill-text:#f9f9f9;--jkl-slider-pill-text--active:#fff;--jkl-slider-focus-color:#c8c5c3;--jkl-slider-hover-color:#fff}}[data-theme=dark]{--jkl-slider-bg:#444141;--jkl-slider-pill:#1b1917;--jkl-slider-pill-text:#f9f9f9;--jkl-slider-pill-text--active:#fff;--jkl-slider-focus-color:#c8c5c3;--jkl-slider-hover-color:#fff}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-slider-font-size:var(--jkl-body-font-size);--jkl-slider-line-height:var(--jkl-body-line-height);--jkl-slider-font-weight:var(--jkl-body-font-weight);--jkl-slider-legend-font-size:var(--jkl-body-font-size);--jkl-slider-legend-line-height:var(--jkl-body-line-height);--jkl-slider-legend-font-weight:700}[data-density=compact],[data-layout-density=compact]{--jkl-slider-font-size:var(--jkl-small-font-size);--jkl-slider-line-height:var(--jkl-small-line-height);--jkl-slider-font-weight:var(--jkl-small-font-weight);--jkl-slider-legend-font-size:var(--jkl-small-font-size);--jkl-slider-legend-line-height:var(--jkl-small-line-height);--jkl-slider-legend-font-weight:700}.jkl-toggle-slider{align-items:flex-start;display:flex;flex-direction:column;font-size:var(--jkl-slider-font-size);font-weight:var(--jkl-slider-font-weight);line-height:var(--jkl-slider-line-height);overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;width:100%}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:focus-within .jkl-toggle-slider__pill{box-shadow:inset 0 0 0 .125rem var(--jkl-slider-focus-color)}.jkl-toggle-slider__legend{font-size:var(--jkl-slider-legend-font-size);font-weight:var(--jkl-slider-legend-font-weight);line-height:var(--jkl-slider-legend-line-height);margin-bottom:.5rem}.jkl-toggle-slider__legend--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-toggle-slider__inputs{background-color:var(--jkl-slider-bg);border:2px solid var(--jkl-slider-bg);border-radius:6.25rem;display:flex;overflow:hidden;position:relative}.jkl-toggle-slider__input{opacity:0;position:absolute}.jkl-toggle-slider__label{align-items:center;color:var(--jkl-slider-pill-text);cursor:pointer;display:flex;justify-content:center;padding:.125rem 1rem;z-index:1;-webkit-tap-highlight-color:transparent;min-width:30px}.jkl-toggle-slider__label:hover{color:var(--jkl-slider-hover-color)}.jkl-toggle-slider__label--selected{--jkl-icon-weight:500;color:var(--jkl-slider-pill-text--active);font-weight:700;letter-spacing:-.014em}.jkl-toggle-slider__pill{background-color:var(--jkl-slider-pill);border-radius:6.25rem;height:100%;position:absolute;transition-duration:.25s;transition-property:width,transform;transition-timing-function:ease}@media (min-width:680px){.jkl-toggle-slider{align-items:center;flex-direction:row}.jkl-toggle-slider__legend{margin-bottom:0;margin-right:1.2em}}@media screen and (forced-colors:active){.jkl-toggle-slider .jkl-toggle-slider__inputs{background-color:Canvas}.jkl-toggle-slider .jkl-toggle-slider__pill{background-color:ButtonFace}}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toggle-font-size:var(--jkl-body-font-size);--jkl-toggle-line-height:var(--jkl-body-line-height);--jkl-toggle-font-weight:var(--jkl-body-font-weight);--jkl-toggle-switch-height:1.75rem;--jkl-toggle-switch-width:3rem;--jkl-toggle-switch-knob-size:1.25rem;--jkl-toggle-switch-indicator-spacing:0;--jkl-toggle-switch-help-label-spacing:var(--jkl-spacing-2)}[data-density=compact],[data-layout-density=compact]{--jkl-toggle-font-size:var(--jkl-small-font-size);--jkl-toggle-line-height:var(--jkl-small-line-height);--jkl-toggle-font-weight:var(--jkl-small-font-weight);--jkl-toggle-switch-height:1.25rem;--jkl-toggle-switch-width:2.25rem;--jkl-toggle-switch-knob-size:0.75rem;--jkl-toggle-switch-indicator-spacing:-0.125rem;--jkl-toggle-switch-help-label-spacing:0}.jkl-toggle-switch{--border-width:0.0625rem;--switch-padding:0.25rem;--knob-position:0;--switch-border-color:var(--jkl-color-border-action);--indicator-color:var(--jkl-color-background-container-high);--knob-border-color:var(--jkl-color-border-action);--knob-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-text-inverted);background:transparent;color:var(--text-color);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;align-items:center;border-style:none;display:flex;flex-direction:row-reverse;font-size:var(--jkl-toggle-font-size);font-weight:var(--jkl-toggle-font-weight);gap:var(--jkl-spacing-8);line-height:var(--jkl-toggle-line-height);outline:0;outline-style:none;touch-action:none}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-toggle-switch{border-style:revert;outline:revert;outline-style:revert}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-toggle-switch{border-color:transparent;border-style:none}}.jkl-toggle-switch[aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch{--indicator-color:var(--jkl-color-background-container-inverted);--knob-color:var(--jkl-color-text-inverted);--knob-position:calc(var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding)*2)}.jkl-toggle-switch[disabled]{cursor:revert;--text-color:var(--jkl-color-text-subdued);--switch-border-color:var(--jkl-color-border-subdued);--knob-border-color:var(--jkl-color-border-subdued)}.jkl-toggle-switch[disabled][aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch[disabled]{--indicator-color:var(--jkl-color-border-subdued)}.jkl-toggle-switch-widget{align-items:center;background-color:var(--indicator-color);border:var(--border-width) solid var(--switch-border-color);border-radius:9999px;box-sizing:border-box;display:flex;flex-direction:row;height:var(--jkl-toggle-switch-height);overflow:hidden;padding:var(--switch-padding);pointer-events:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--jkl-toggle-switch-width)}@media screen and (forced-colors:active){.jkl-toggle-switch-widget{border:.0625rem solid ButtonText}}.jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-toggle-switch-widget__slider{box-sizing:border-box;color:var(--icon-color);height:var(--jkl-toggle-switch-knob-size);position:relative;transition-duration:.15s;transition-property:translate;transition-timing-function:ease;translate:var(--knob-position);width:var(--jkl-toggle-switch-knob-size)}.jkl-toggle-switch-widget__knob{background-color:var(--knob-color);border:var(--border-width) solid var(--knob-border-color);border-radius:9999px;inset:0;position:absolute}.jkl-toggle-switch-widget__indicator{margin-right:var(--jkl-toggle-switch-indicator-spacing);position:absolute;right:100%;top:50%;transform:translateY(-50%)}.jkl-toggle-switch-widget__indicator>.jkl-icon__icon{inset:0;position:absolute}
+@media screen and (prefers-color-scheme:light){:root{--jkl-slider-bg:#e0dbd4;--jkl-slider-pill:#f9f9f9;--jkl-slider-pill-text:#1b1917;--jkl-slider-pill-text--active:#000;--jkl-slider-focus-color:#000;--jkl-slider-hover-color:#000}}[data-theme=light]{--jkl-slider-bg:#e0dbd4;--jkl-slider-pill:#f9f9f9;--jkl-slider-pill-text:#1b1917;--jkl-slider-pill-text--active:#000;--jkl-slider-focus-color:#000;--jkl-slider-hover-color:#000}@media screen and (prefers-color-scheme:dark){:root{--jkl-slider-bg:#444141;--jkl-slider-pill:#1b1917;--jkl-slider-pill-text:#f9f9f9;--jkl-slider-pill-text--active:#fff;--jkl-slider-focus-color:#c8c5c3;--jkl-slider-hover-color:#fff}}[data-theme=dark]{--jkl-slider-bg:#444141;--jkl-slider-pill:#1b1917;--jkl-slider-pill-text:#f9f9f9;--jkl-slider-pill-text--active:#fff;--jkl-slider-focus-color:#c8c5c3;--jkl-slider-hover-color:#fff}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-slider-font-size:var(--jkl-body-font-size);--jkl-slider-line-height:var(--jkl-body-line-height);--jkl-slider-font-weight:var(--jkl-body-font-weight);--jkl-slider-legend-font-size:var(--jkl-body-font-size);--jkl-slider-legend-line-height:var(--jkl-body-line-height);--jkl-slider-legend-font-weight:700}[data-density=compact],[data-layout-density=compact]{--jkl-slider-font-size:var(--jkl-small-font-size);--jkl-slider-line-height:var(--jkl-small-line-height);--jkl-slider-font-weight:var(--jkl-small-font-weight);--jkl-slider-legend-font-size:var(--jkl-small-font-size);--jkl-slider-legend-line-height:var(--jkl-small-line-height);--jkl-slider-legend-font-weight:700}.jkl-toggle-slider{align-items:flex-start;display:flex;flex-direction:column;font-size:var(--jkl-slider-font-size);font-weight:var(--jkl-slider-font-weight);line-height:var(--jkl-slider-line-height);overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;width:100%}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:focus-within .jkl-toggle-slider__pill{box-shadow:inset 0 0 0 .125rem var(--jkl-slider-focus-color)}.jkl-toggle-slider__legend{font-size:var(--jkl-slider-legend-font-size);font-weight:var(--jkl-slider-legend-font-weight);line-height:var(--jkl-slider-legend-line-height);margin-bottom:.5rem}.jkl-toggle-slider__legend--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-toggle-slider__inputs{background-color:var(--jkl-slider-bg);border:2px solid var(--jkl-slider-bg);border-radius:6.25rem;display:flex;overflow:hidden;position:relative}.jkl-toggle-slider__input{opacity:0;position:absolute}.jkl-toggle-slider__label{align-items:center;color:var(--jkl-slider-pill-text);cursor:pointer;display:flex;justify-content:center;padding:.125rem 1rem;z-index:1;-webkit-tap-highlight-color:transparent;min-width:30px}.jkl-toggle-slider__label:hover{color:var(--jkl-slider-hover-color)}.jkl-toggle-slider__label--selected{--jkl-icon-weight:500;color:var(--jkl-slider-pill-text--active);font-weight:700;letter-spacing:-.014em}.jkl-toggle-slider__pill{background-color:var(--jkl-slider-pill);border-radius:6.25rem;height:100%;position:absolute;transition-duration:.25s;transition-property:width,transform;transition-timing-function:ease}@media (min-width:680px){.jkl-toggle-slider{align-items:center;flex-direction:row}.jkl-toggle-slider__legend{margin-bottom:0;margin-right:1.2em}}@media screen and (forced-colors:active){.jkl-toggle-slider .jkl-toggle-slider__inputs{background-color:Canvas}.jkl-toggle-slider .jkl-toggle-slider__pill{background-color:ButtonFace}}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toggle-font-size:var(--jkl-body-font-size);--jkl-toggle-line-height:var(--jkl-body-line-height);--jkl-toggle-font-weight:var(--jkl-body-font-weight);--jkl-toggle-switch-height:1.75rem;--jkl-toggle-switch-width:3rem;--jkl-toggle-switch-knob-size:1.25rem;--jkl-toggle-switch-indicator-spacing:0;--jkl-toggle-switch-help-label-spacing:var(--jkl-unit-02)}[data-density=compact],[data-layout-density=compact]{--jkl-toggle-font-size:var(--jkl-small-font-size);--jkl-toggle-line-height:var(--jkl-small-line-height);--jkl-toggle-font-weight:var(--jkl-small-font-weight);--jkl-toggle-switch-height:1.25rem;--jkl-toggle-switch-width:2.25rem;--jkl-toggle-switch-knob-size:0.75rem;--jkl-toggle-switch-indicator-spacing:-0.125rem;--jkl-toggle-switch-help-label-spacing:0}.jkl-toggle-switch{--border-width:0.0625rem;--switch-padding:0.25rem;--knob-position:0;--switch-border-color:var(--jkl-color-border-action);--indicator-color:var(--jkl-color-background-container-high);--knob-border-color:var(--jkl-color-border-action);--knob-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-text-inverted);background:transparent;color:var(--text-color);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;align-items:center;border-style:none;display:flex;flex-direction:row-reverse;font-size:var(--jkl-toggle-font-size);font-weight:var(--jkl-toggle-font-weight);gap:var(--jkl-unit-10);line-height:var(--jkl-toggle-line-height);outline:0;outline-style:none;touch-action:none}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-toggle-switch{border-style:revert;outline:revert;outline-style:revert}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-toggle-switch{border-color:transparent;border-style:none}}.jkl-toggle-switch[aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch{--indicator-color:var(--jkl-color-background-container-inverted);--knob-color:var(--jkl-color-text-inverted);--knob-position:calc(var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding)*2)}.jkl-toggle-switch[disabled]{cursor:revert;--text-color:var(--jkl-color-text-subdued);--switch-border-color:var(--jkl-color-border-subdued);--knob-border-color:var(--jkl-color-border-subdued)}.jkl-toggle-switch[disabled][aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch[disabled]{--indicator-color:var(--jkl-color-border-subdued)}.jkl-toggle-switch-widget{align-items:center;background-color:var(--indicator-color);border:var(--border-width) solid var(--switch-border-color);border-radius:9999px;box-sizing:border-box;display:flex;flex-direction:row;height:var(--jkl-toggle-switch-height);overflow:hidden;padding:var(--switch-padding);pointer-events:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--jkl-toggle-switch-width)}@media screen and (forced-colors:active){.jkl-toggle-switch-widget{border:.0625rem solid ButtonText}}.jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-toggle-switch-widget__slider{box-sizing:border-box;color:var(--icon-color);height:var(--jkl-toggle-switch-knob-size);position:relative;transition-duration:.15s;transition-property:translate;transition-timing-function:ease;translate:var(--knob-position);width:var(--jkl-toggle-switch-knob-size)}.jkl-toggle-switch-widget__knob{background-color:var(--knob-color);border:var(--border-width) solid var(--knob-border-color);border-radius:9999px;inset:0;position:absolute}.jkl-toggle-switch-widget__indicator{margin-right:var(--jkl-toggle-switch-indicator-spacing);position:absolute;right:100%;top:50%;transform:translateY(-50%)}.jkl-toggle-switch-widget__indicator>.jkl-icon__icon{inset:0;position:absolute}

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

@@ -10,7 +10,7 @@
     --jkl-toggle-switch-width: #{jkl.rem(48px)};
     --jkl-toggle-switch-knob-size: #{jkl.rem(20px)};
     --jkl-toggle-switch-indicator-spacing: 0;
-    --jkl-toggle-switch-help-label-spacing: var(--jkl-spacing-2);
+    --jkl-toggle-switch-help-label-spacing: var(--jkl-unit-02);
 }
 
 @include jkl.compact-density-variables {
@@ -43,7 +43,7 @@
     display: flex;
     flex-direction: row-reverse;
     align-items: center;
-    gap: var(--jkl-spacing-8);
+    gap: var(--jkl-unit-10);
     touch-action: none; // Forhindrer at siden flytter på seg når man drar i toggle
 
     @include jkl.use-font-variables("jkl-toggle");