@fremtind/jokul 5.0.0-next.1 → 5.0.0-next.3

package/styles/components/text-area/text-area.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-text-area-wrapper{overflow:hidden;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:var(--jkl-color-background-input-base);--border-color:var(--jkl-color-border-input);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);max-width:100%;position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-input-focus)}.jkl-text-area-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-background-alert-error);--text-color:var(--jkl-color-text-on-alert);--placeholder-color:color(from currentColor sRGB r g b/75%)}.jkl-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]),.jkl-text-area-wrapper:hover{--border-color:var(--jkl-color-border-input-focus);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]),.jkl-text-area-wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-area-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-area-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-area-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-area-wrapper{border:.125rem inset ButtonText}}.jkl-text-area{--text-input-height:var(--jkl-unit-60);--progress-bar-height:0.25rem;height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:inherit;font:var(--jkl-text-style-text-medium);height:var(--text-input-height);max-height:var(--text-input-height);min-height:var(--text-input-height);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) transparent;transition-duration:var(--jkl-motion-timing-productive);transition-property:height,min-height,max-height,padding;transition-timing-function:var(--jkl-motion-easing-standard);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}@media screen and (forced-colors:active){.jkl-text-area__text-area{border:none;outline:none}.jkl-text-area__text-area:focus-visible{outline:none}}.jkl-text-area__text-area::placeholder{color:var(--placeholder-color);opacity:1}.jkl-text-area .jkl-text-area-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-area-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-area-wrapper{padding-bottom:calc(var(--text-input-height) + var(--progress-bar-height));position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{bottom:0;left:0;pointer-events:none;position:absolute;right:0}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{color:var(--text-color);font:var(--jkl-text-style-text-small);padding:var(--jkl-text-input-padding)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:transparent;height:var(--progress-bar-height);overflow:hidden;width:100%}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{background-color:var(--border-color);content:"";display:block;height:var(--progress-bar-height);transition-duration:var(--jkl-motion-timing-lazy);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard);width:var(--progress-width,100%)}.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:3lh;--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:4lh;--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:5lh;--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:6lh;--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:7lh;--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:8lh;--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:9lh;--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:10lh;--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))}}
+@layer jokul.components{.jkl-text-area-wrapper{overflow:hidden;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-color:var(--jkl-color-border-default);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);max-width:100%;position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-text-area-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--placeholder-color:color(from currentColor sRGB r g b/75%)}.jkl-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]),.jkl-text-area-wrapper:hover{--border-color:var(--jkl-color-border-strong);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]),.jkl-text-area-wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-area-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-area-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-area-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-area-wrapper{border:.125rem inset ButtonText}}.jkl-text-area{--text-input-height:var(--jkl-unit-60);--progress-bar-height:0.25rem;height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:inherit;font:var(--jkl-text-style-text-medium);height:var(--text-input-height);max-height:var(--text-input-height);min-height:var(--text-input-height);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) transparent;transition-duration:var(--jkl-motion-timing-productive);transition-property:height,min-height,max-height,padding;transition-timing-function:var(--jkl-motion-easing-standard);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}@media screen and (forced-colors:active){.jkl-text-area__text-area{border:none;outline:none}.jkl-text-area__text-area:focus-visible{outline:none}}.jkl-text-area__text-area::placeholder{color:var(--placeholder-color);opacity:1}.jkl-text-area .jkl-text-area-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-area-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-area-wrapper{padding-bottom:calc(var(--text-input-height) + var(--progress-bar-height));position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{bottom:0;left:0;pointer-events:none;position:absolute;right:0}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{color:var(--text-color);font:var(--jkl-text-style-text-small);padding:var(--jkl-text-input-padding)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:transparent;height:var(--progress-bar-height);overflow:hidden;width:100%}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{background-color:var(--border-color);content:"";display:block;height:var(--progress-bar-height);transition-duration:var(--jkl-motion-timing-lazy);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard);width:var(--progress-width,100%)}.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:3lh;--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:4lh;--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:5lh;--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:6lh;--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:7lh;--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:8lh;--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:9lh;--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:10lh;--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.css

@@ -12,8 +12,8 @@
     --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
     --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
     --text-color: var(--jkl-color-text-default);
-    --background-color: var(--jkl-color-background-input-base);
-    --border-color: var(--jkl-color-border-input);
+    --background-color: transparent;
+    --border-color: var(--jkl-color-border-default);
     --placeholder-color: var(--jkl-color-text-subdued);
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
@@ -30,15 +30,15 @@
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
   }
   .jkl-text-input-wrapper:focus-within, .jkl-text-input-wrapper:has([data-focused=true]) {
-    --background-color: var(--jkl-color-background-input-focus);
+    --background-color: var(--jkl-color-background-container);
   }
   .jkl-text-input-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
-    --background-color: var(--jkl-color-background-alert-error);
-    --text-color: var(--jkl-color-text-on-alert);
+    --background-color: var(--jkl-color-error-background-container);
+    --text-color: var(--jkl-color-error-text-default);
     --placeholder-color: color(from currentColor sRGB r g b / 75%);
   }
   .jkl-text-input-wrapper:hover, .jkl-text-input-wrapper:focus-within, .jkl-text-input-wrapper:has([data-focused=true]) {
-    --border-color: var(--jkl-color-border-input-focus);
+    --border-color: var(--jkl-color-border-strong);
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
   }
   @media screen and (forced-colors: active) {
@@ -47,11 +47,11 @@
     }
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-text-input-wrapper > .jkl-icon-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: -8px;
   }
   @media screen and (forced-colors: active) {

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-text-input-wrapper{--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:var(--jkl-color-background-input-base);--border-color:var(--jkl-color-border-input);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);max-width:100%;position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-input-focus)}.jkl-text-input-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-background-alert-error);--text-color:var(--jkl-color-text-on-alert);--placeholder-color:color(from currentColor sRGB r g b/75%)}.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]),.jkl-text-input-wrapper:hover{--border-color:var(--jkl-color-border-input-focus);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]),.jkl-text-input-wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-input-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input-wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@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{border:.125rem inset ButtonText}}.jkl-text-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-text-input__input{-webkit-appearance:none;background:none;border-style:none;color:inherit;font:var(--jkl-text-style-text-medium);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}@media screen and (forced-colors:active){.jkl-text-input__input{border:none;outline:none}.jkl-text-input__input:focus-visible{outline:none}}.jkl-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.jkl-text-input__input--align-right{text-align:right}.jkl-text-input__unit{-webkit-padding-end:var(--jkl-text-input-horizontal-padding);padding-block:var(--jkl-text-input-vertical-padding);padding-inline-end:var(--jkl-text-input-horizontal-padding)}.jkl-text-input__action-button{-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input--inline{display:inline-block;margin:-.125rem .25rem;vertical-align:middle}}
+@layer jokul.components{.jkl-text-input-wrapper{--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-color:var(--jkl-color-border-default);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);max-width:100%;position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-text-input-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--placeholder-color:color(from currentColor sRGB r g b/75%)}.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]),.jkl-text-input-wrapper:hover{--border-color:var(--jkl-color-border-strong);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]),.jkl-text-input-wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-input-wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input-wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@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{border:.125rem inset ButtonText}}.jkl-text-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-text-input__input{-webkit-appearance:none;background:none;border-style:none;color:inherit;font:var(--jkl-text-style-text-medium);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}@media screen and (forced-colors:active){.jkl-text-input__input{border:none;outline:none}.jkl-text-input__input:focus-visible{outline:none}}.jkl-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.jkl-text-input__input--align-right{text-align:right}.jkl-text-input__unit{-webkit-padding-end:var(--jkl-text-input-horizontal-padding);padding-block:var(--jkl-text-input-vertical-padding);padding-inline-end:var(--jkl-text-input-horizontal-padding)}.jkl-text-input__action-button{-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input--inline{display:inline-block;margin:-.125rem .25rem;vertical-align:middle}}

package/styles/components/toast/toast.css

@@ -27,11 +27,13 @@
     left: var(--jkl-unit-30);
   }
   .jkl-toast {
-    --background-color: var(--jkl-color-background-container-high);
+    --background-color: var(--jkl-color-background-container);
     --text-color: var(--jkl-color-text-default);
+    --border-color: transparent;
     --jkl-toast-padding: var(--jkl-unit-20);
     color: var(--text-color);
     background-color: var(--background-color);
+    border: 1px solid var(--border-color);
     border-radius: 4px;
     box-sizing: border-box;
     align-items: start;
@@ -97,20 +99,25 @@
     position: absolute;
     inset: calc((var(--tap-size) - 100%) / 2 * -1);
   }
-  .jkl-toast--info, .jkl-toast--warning, .jkl-toast--error, .jkl-toast--success {
-    --text-color: var(--jkl-color-text-on-alert);
-  }
   .jkl-toast--info {
-    --background-color: var(--jkl-color-background-alert-info);
+    --background-color: var(--jkl-color-info-background-container);
+    --text-color: var(--jkl-color-info-text-default);
+    --border-color: var(--jkl-color-info-border-subdued);
   }
   .jkl-toast--warning {
-    --background-color: var(--jkl-color-background-alert-warning);
+    --background-color: var(--jkl-color-warning-background-container);
+    --text-color: var(--jkl-color-warning-text-default);
+    --border-color: var(--jkl-color-warning-border-subdued);
   }
   .jkl-toast--error {
-    --background-color: var(--jkl-color-background-alert-error);
+    --background-color: var(--jkl-color-error-background-container);
+    --text-color: var(--jkl-color-error-text-default);
+    --border-color: var(--jkl-color-error-border-subdued);
   }
   .jkl-toast--success {
-    --background-color: var(--jkl-color-background-alert-success);
+    --background-color: var(--jkl-color-success-background-container);
+    --text-color: var(--jkl-color-success-text-default);
+    --border-color: var(--jkl-color-success-border-subdued);
   }
   @media screen and (forced-colors: active) {
     .jkl-toast {
@@ -129,12 +136,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uv80qec var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-upsce9t var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uv80qev var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-upsceap var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uv80qec {
+  @keyframes jkl-entering-upsce9t {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -144,7 +151,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uv80qev {
+  @keyframes jkl-exiting-upsceap {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);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:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font:var(--jkl-text-style-paragraph-medium);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw))}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font:var(--jkl-text-style-heading-5)}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@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-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);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-uv80qec var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uv80qev var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-uv80qec{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uv80qev{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
+@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);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:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:transparent;--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font:var(--jkl-text-style-paragraph-medium);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw))}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font:var(--jkl-text-style-heading-5)}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@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-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-toast--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-toast--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-toast--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}@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-upsce9t var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-upsceap var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-upsce9t{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-upsceap{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}

package/styles/components/toast/toast.scss

@@ -31,12 +31,14 @@
     }
 
     .jkl-toast {
-        --background-color: var(--jkl-color-background-container-high);
+        --background-color: var(--jkl-color-background-container);
         --text-color: var(--jkl-color-text-default);
+        --border-color: transparent;
         --jkl-toast-padding: var(--jkl-unit-20);
 
         color: var(--text-color);
         background-color: var(--background-color);
+        border: 1px solid var(--border-color);
         border-radius: 4px;
         box-sizing: border-box;
         align-items: start;
@@ -103,27 +105,28 @@
             }
         }
 
-        &--info,
-        &--warning,
-        &--error,
-        &--success {
-            --text-color: var(--jkl-color-text-on-alert);
-        }
-
         &--info {
-            --background-color: var(--jkl-color-background-alert-info);
+            --background-color: var(--jkl-color-info-background-container);
+            --text-color: var(--jkl-color-info-text-default);
+            --border-color: var(--jkl-color-info-border-subdued);
         }
 
         &--warning {
-            --background-color: var(--jkl-color-background-alert-warning);
+            --background-color: var(--jkl-color-warning-background-container);
+            --text-color: var(--jkl-color-warning-text-default);
+            --border-color: var(--jkl-color-warning-border-subdued);
         }
 
         &--error {
-            --background-color: var(--jkl-color-background-alert-error);
+            --background-color: var(--jkl-color-error-background-container);
+            --text-color: var(--jkl-color-error-text-default);
+            --border-color: var(--jkl-color-error-border-subdued);
         }
 
         &--success {
-            --background-color: var(--jkl-color-background-alert-success);
+            --background-color: var(--jkl-color-success-background-container);
+            --text-color: var(--jkl-color-success-text-default);
+            --border-color: var(--jkl-color-success-border-subdued);
         }
 
         @include jkl.forced-colors-mode {

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

@@ -4,12 +4,12 @@
 $_slider-rounded: jkl.rem(100px);
 
 .jkl-toggle-slider {
-    --jkl-slider-bg: var(--jkl-color-background-container-low);
-    --jkl-slider-pill: var(--jkl-color-background-container-high);
+    --jkl-slider-bg: var(--jkl-color-background-page);
+    --jkl-slider-pill: var(--jkl-color-background-container);
     --jkl-slider-text: var(--jkl-color-text-default);
     --jkl-slider-text--active: var(--jkl-color-text-default);
-    --jkl-slider-focus-color: var(--jkl-color-border-action);
-    --jkl-slider-hover-color: var(--jkl-color-border-action);
+    --jkl-slider-focus-color: var(--jkl-color-border-strong);
+    --jkl-slider-hover-color: var(--jkl-color-border-strong);
 
     @include jkl.use-font-variables("jkl-slider");
 

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

@@ -2,12 +2,12 @@
  * Do not edit directly, this file was auto-generated.
  */
 .jkl-toggle-slider {
-  --jkl-slider-bg: var(--jkl-color-background-container-low);
-  --jkl-slider-pill: var(--jkl-color-background-container-high);
+  --jkl-slider-bg: var(--jkl-color-background-page);
+  --jkl-slider-pill: var(--jkl-color-background-container);
   --jkl-slider-text: var(--jkl-color-text-default);
   --jkl-slider-text--active: var(--jkl-color-text-default);
-  --jkl-slider-focus-color: var(--jkl-color-border-action);
-  --jkl-slider-hover-color: var(--jkl-color-border-action);
+  --jkl-slider-focus-color: var(--jkl-color-border-strong);
+  --jkl-slider-hover-color: var(--jkl-color-border-strong);
   font-size: var(--jkl-slider-font-size);
   line-height: var(--jkl-slider-line-height);
   font-weight: var(--jkl-slider-font-weight);
@@ -106,14 +106,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --jkl-toggle-switch-width: var(--jkl-unit-60);
   --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
   --border-width: 0.0625rem;
-  --switch-padding: 0.25rem;
+  --switch-padding: var(--jkl-unit-05);
   --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);
+  --switch-border-color: var(--jkl-color-border-strong);
+  --indicator-color: var(--jkl-color-background-container);
+  --knob-border-color: var(--jkl-color-border-strong);
+  --knob-color: var(--jkl-color-background-container);
   --text-color: var(--jkl-color-text-default);
-  --icon-color: var(--jkl-color-text-inverted);
+  --icon-color: var(--jkl-color-text-on-action);
   background: transparent;
   color: var(--text-color);
   padding: 0;
@@ -153,8 +153,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
 }
 .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);
+  --indicator-color: var(--jkl-color-background-action);
+  --knob-color: var(--jkl-color-text-on-action);
   --knob-position: calc(
       var(--jkl-toggle-switch-width) - var(
               --jkl-toggle-switch-knob-size
@@ -176,7 +176,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --jkl-toggle-switch-height: var(--jkl-unit-40);
   --jkl-toggle-switch-width: var(--jkl-unit-60);
   --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
-  --jkl-toggle-switch-indicator-spacing: 0;
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -198,7 +197,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
 }
 .jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget {
-  outline: 3px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 3px;
 }
 .jkl-toggle-switch-widget__slider {
@@ -224,10 +223,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   position: absolute;
   top: 50%;
   right: 100%;
-  margin-right: var(--jkl-toggle-switch-indicator-spacing);
+  font-size: var(--jkl-unit-20);
   transform: translate(0, -50%);
-}
-.jkl-toggle-switch-widget__indicator > .jkl-icon__icon {
-  position: absolute;
-  inset: 0;
 }

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

@@ -1,3 +1,3 @@
-.jkl-toggle-slider{--jkl-slider-bg:var(--jkl-color-background-container-low);--jkl-slider-pill:var(--jkl-color-background-container-high);--jkl-slider-text:var(--jkl-color-text-default);--jkl-slider-text--active:var(--jkl-color-text-default);--jkl-slider-focus-color:var(--jkl-color-border-action);--jkl-slider-hover-color:var(--jkl-color-border-action);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:var(--jkl-spacing-8)}.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:var(--jkl-unit-02) var(--jkl-unit-20);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:400;color:var(--jkl-slider-pill-text--active);font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-toggle-slider__pill{background-color:var(--jkl-slider-pill);border-radius:6.25rem;height:100%;position:absolute;transition-duration:var(--jkl-motion-timing-expressive);transition-property:width,transform;transition-timing-function:var(--jkl-motion-easing-standard)}@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}}.jkl-toggle-switch{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);--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:var(--jkl-text-style-text-medium);gap:var(--jkl-unit-10);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-slider{--jkl-slider-bg:var(--jkl-color-background-page);--jkl-slider-pill:var(--jkl-color-background-container);--jkl-slider-text:var(--jkl-color-text-default);--jkl-slider-text--active:var(--jkl-color-text-default);--jkl-slider-focus-color:var(--jkl-color-border-strong);--jkl-slider-hover-color:var(--jkl-color-border-strong);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:var(--jkl-spacing-8)}.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:var(--jkl-unit-02) var(--jkl-unit-20);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:400;color:var(--jkl-slider-pill-text--active);font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-toggle-slider__pill{background-color:var(--jkl-slider-pill);border-radius:6.25rem;height:100%;position:absolute;transition-duration:var(--jkl-motion-timing-expressive);transition-property:width,transform;transition-timing-function:var(--jkl-motion-easing-standard)}@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}}.jkl-toggle-switch{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);--border-width:0.0625rem;--switch-padding:var(--jkl-unit-05);--knob-position:0;--switch-border-color:var(--jkl-color-border-strong);--indicator-color:var(--jkl-color-background-container);--knob-border-color:var(--jkl-color-border-strong);--knob-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-text-on-action);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:var(--jkl-text-style-text-medium);gap:var(--jkl-unit-10);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-action);--knob-color:var(--jkl-color-text-on-action);--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{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);--jkl-toggle-switch-indicator-spacing:0;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);font-size:var(--jkl-font-size-1);height:var(--jkl-toggle-switch-knob-size);position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard);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}
+          ) - 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{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);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-strong);outline-offset:3px}.jkl-toggle-switch-widget__slider{box-sizing:border-box;color:var(--icon-color);font-size:var(--jkl-font-size-1);height:var(--jkl-toggle-switch-knob-size);position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard);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{font-size:var(--jkl-unit-20);position:absolute;right:100%;top:50%;transform:translateY(-50%)}

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

@@ -7,14 +7,14 @@
     --jkl-toggle-switch-width: var(--jkl-unit-60);
     --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
     --border-width: #{jkl.rem(1px)};
-    --switch-padding: #{jkl.rem(4px)};
+    --switch-padding: var(--jkl-unit-05);
     --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);
+    --switch-border-color: var(--jkl-color-border-strong);
+    --indicator-color: var(--jkl-color-background-container);
+    --knob-border-color: var(--jkl-color-border-strong);
+    --knob-color: var(--jkl-color-background-container);
     --text-color: var(--jkl-color-text-default);
-    --icon-color: var(--jkl-color-text-inverted);
+    --icon-color: var(--jkl-color-text-on-action);
 
     background: transparent;
     color: var(--text-color);
@@ -38,8 +38,8 @@
 
     &[aria-pressed="true"],
     [aria-checked="true"] > & {
-        --indicator-color: var(--jkl-color-background-container-inverted);
-        --knob-color: var(--jkl-color-text-inverted);
+        --indicator-color: var(--jkl-color-background-action);
+        --knob-color: var(--jkl-color-text-on-action);
         --knob-position: calc(
             var(--jkl-toggle-switch-width) - var(
                     --jkl-toggle-switch-knob-size
@@ -66,7 +66,6 @@
     --jkl-toggle-switch-height: var(--jkl-unit-40);
     --jkl-toggle-switch-width: var(--jkl-unit-60);
     --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
-    --jkl-toggle-switch-indicator-spacing: 0;
 
     position: relative;
     box-sizing: border-box;
@@ -116,13 +115,7 @@
         position: absolute;
         top: 50%;
         right: 100%;
-        margin-right: var(--jkl-toggle-switch-indicator-spacing);
+        font-size: var(--jkl-unit-20);
         transform: translate(0, -50%);
-
-        & > .jkl-icon__icon {
-            // Uten dette får ikonet feil alignment. Mulig bug i ikonpakken?
-            position: absolute;
-            inset: 0;
-        }
     }
 }

package/styles/components/tooltip/tooltip.css

@@ -12,10 +12,10 @@
   }
   .jkl-tooltip-content {
     --content-padding: var(--jkl-unit-15);
-    --background-color: var(--jkl-color-background-container-inverted);
+    --background-color: var(--jkl-color-background-action);
     font: var(--jkl-text-style-paragraph-small);
     background-color: var(--background-color);
-    color: var(--jkl-color-text-inverted);
+    color: var(--jkl-color-text-on-action);
     display: inline-block;
     min-width: min-content;
     max-width: min(19.375rem, 100%);
@@ -66,7 +66,7 @@
     --button-color: var(--jkl-color-text-interactive-hover);
   }
   .jkl-tooltip-question-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 0;
   }
   .jkl-tooltip-question-button::after {

package/styles/components/tooltip/tooltip.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-container-inverted);background-color:var(--background-color);color:var(--jkl-color-text-inverted);display:inline-block;font:var(--jkl-text-style-paragraph-small);max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--content-padding);position:absolute;z-index:10000}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{align-items:baseline;background-color:transparent;border-radius:9999px;border-style:none;color:var(--jkl-color-text-interactive);cursor:pointer;display:inline-flex;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(min(.25em,.375rem));transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-exit)}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert;outline:revert;outline-style:revert}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{--button-color:var(--jkl-color-text-interactive-hover)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}}
+@layer jokul.components{.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-action);background-color:var(--background-color);color:var(--jkl-color-text-on-action);display:inline-block;font:var(--jkl-text-style-paragraph-small);max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--content-padding);position:absolute;z-index:10000}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{align-items:baseline;background-color:transparent;border-radius:9999px;border-style:none;color:var(--jkl-color-text-interactive);cursor:pointer;display:inline-flex;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(min(.25em,.375rem));transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-exit)}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert;outline:revert;outline-style:revert}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{--button-color:var(--jkl-color-text-interactive-hover)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}}

package/styles/components/tooltip/tooltip.scss

@@ -18,11 +18,11 @@ $_focus-ring-width: jkl.rem(2px);
 
     .jkl-tooltip-content {
         --content-padding: var(--jkl-unit-15);
-        --background-color: var(--jkl-color-background-container-inverted);
+        --background-color: var(--jkl-color-background-action);
 
         @include jkl.text-style("paragraph-small");
         background-color: var(--background-color);
-        color: var(--jkl-color-text-inverted);
+        color: var(--jkl-color-text-on-action);
         display: inline-block;
         min-width: min-content;
         max-width: min(jkl.rem(310px),
@@ -70,4 +70,4 @@ $_focus-ring-width: jkl.rem(2px);
             min-height: 44px;
         }
     }
-}
+}

package/styles/components/typography/_index.scss

@@ -0,0 +1,2 @@
+@forward "text";
+@forward "title";

package/styles/components/typography/text.css

@@ -0,0 +1,38 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  :where(.jkl-text) {
+    font-weight: var(--jkl-typography-weight-normal);
+    line-height: var(--jkl-line-height-relaxed);
+  }
+  .jkl-text[data-text-size] {
+    margin-block: 0;
+  }
+  .jkl-text[data-text-size=xs] {
+    font: var(--jkl-text-style-text-micro);
+  }
+  .jkl-text[data-text-size=s] {
+    font: var(--jkl-text-style-paragraph-small);
+  }
+  .jkl-text[data-text-size=m] {
+    font: var(--jkl-text-style-paragraph-medium);
+  }
+  .jkl-text[data-text-size=l] {
+    font: var(--jkl-text-style-paragraph-large);
+  }
+  .jkl-text[data-bold],
+  strong.jkl-text[data-text-size] {
+    font-weight: var(--jkl-typography-weight-bold);
+  }
+  .jkl-text[data-short] {
+    line-height: var(--jkl-line-height-tight);
+  }
+  :is(code, kbd, samp, var).jkl-text {
+    font-family: var(--jkl-font-family-mono);
+  }
+  label.jkl-text {
+    display: block;
+    margin-block-end: var(--jkl-spacing-8);
+  }
+}

package/styles/components/typography/text.min.css

@@ -0,0 +1 @@
+@layer jokul.components{:where(.jkl-text){font-weight:var(--jkl-typography-weight-normal);line-height:var(--jkl-line-height-relaxed)}.jkl-text[data-text-size]{margin-block:0}.jkl-text[data-text-size=xs]{font:var(--jkl-text-style-text-micro)}.jkl-text[data-text-size=s]{font:var(--jkl-text-style-paragraph-small)}.jkl-text[data-text-size=m]{font:var(--jkl-text-style-paragraph-medium)}.jkl-text[data-text-size=l]{font:var(--jkl-text-style-paragraph-large)}.jkl-text[data-bold],strong.jkl-text[data-text-size]{font-weight:var(--jkl-typography-weight-bold)}.jkl-text[data-short]{line-height:var(--jkl-line-height-tight)}:is(code,kbd,samp,var).jkl-text{font-family:var(--jkl-font-family-mono)}label.jkl-text{display:block;-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8)}}

package/styles/components/typography/text.scss

@@ -0,0 +1,54 @@
+@use "../../jkl";
+
+// Hver `size` mapper til en komplett tekst-stil fra `$text-styles` i
+// `core/jkl/_typography.scss` — både font-size, line-height, font-weight
+// og ikon-variabler settes via `jkl.text-style`-mixinen.
+$_size-styles: (
+    "xs": "text-micro",
+    "s": "paragraph-small",
+    "m": "paragraph-medium",
+    "l": "paragraph-large",
+);
+
+@layer jokul.components {
+    :where(.jkl-text) {
+        font-weight: var(--jkl-typography-weight-normal);
+        line-height: var(--jkl-line-height-relaxed);
+    }
+
+    // Scope margin-resetten til komponenten via `data-text-size` så vi ikke
+    // overstyrer margin på elementer som bare bruker `.jkl-text` som
+    // hjelpeklasse.
+    .jkl-text[data-text-size] {
+        margin-block: 0;
+    }
+
+    @each $name, $style in $_size-styles {
+        .jkl-text[data-text-size="#{$name}"] {
+            @include jkl.text-style($style);
+        }
+    }
+
+    // `bold` og `<strong>` skal sette både font-weight og ikon-weight
+    // (samme mønster som `.jkl-bold` og `.jkl strong`). Spesifisiteten må
+    // være lik eller høyere enn `.jkl-text[data-text-size="…"]` som ellers
+    // tvinger normal weight via `jkl.text-style`-mixinen.
+    .jkl-text[data-bold],
+    strong.jkl-text[data-text-size] {
+        font-weight: var(--jkl-typography-weight-bold);
+    }
+
+    .jkl-text[data-short] {
+        line-height: var(--jkl-line-height-tight);
+    }
+
+    :is(code, kbd, samp, var).jkl-text {
+        @include jkl.use-font-family("Jokul Mono");
+    }
+
+    // Labels er blokk-nivå og har bunnmarg til feltet de beskriver.
+    label.jkl-text {
+        display: block;
+        margin-block-end: var(--jkl-spacing-8);
+    }
+}