@fremtind/jokul 0.66.1 → 0.66.2

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

@@ -1 +1 @@
-: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-area-wrapper{--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:.1875rem;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-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-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/0.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{height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:inherit;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}@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{position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper:focus-within,.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-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(--text-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(--border-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--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))}
+: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-area-wrapper{--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:.1875rem;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-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-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{height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:inherit;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}@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{position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper:focus-within,.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-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(--text-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(--border-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--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-area/text-area.scss

@@ -23,6 +23,7 @@
 
         @include jkl.motion;
         transition-property: height, min-height, max-height, padding;
+
         @include shared.input-styles;
     }
 
@@ -71,6 +72,7 @@
             &-count {
                 padding: var(--jkl-text-input-padding);
                 color: var(--text-color);
+
                 @include jkl.text-style("small");
             }
 
@@ -87,6 +89,7 @@
                     height: $progress-bar-height;
                     background-color: var(--border-color);
                     transition-property: width;
+
                     @include jkl.motion("standard", "lazy");
                 }
             }

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

@@ -1,5 +1,4 @@
 @forward "text-input";
-
 @use "../icon" as icon;
 @use "../icon-button" as icon-button;
 @use "../input-group" as input-group;

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

@@ -71,7 +71,7 @@
 .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 / 0.75);
+  --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);

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

@@ -1 +1 @@
-: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{--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:.1875rem;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-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: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/0.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-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}@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}
+: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{--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:.1875rem;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-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: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-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}@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/text-input/text-input.scss

@@ -16,6 +16,7 @@
     &__input {
         padding: var(--jkl-text-input-padding);
         width: 100%;
+
         @include shared.input-styles;
 
         &--align-right {

package/styles/components/toast/_index.scss

@@ -1,4 +1,3 @@
 @forward "toast";
-
 @use "../icon" as icon;
 @use "../icon-button" as icon-button;

package/styles/components/toast/toast.css

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

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

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*2)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*1.5)}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background: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;grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-toast__progress{grid-area:progress;margin-bottom:calc(var(--jkl-unit-10)*2);margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:transparent;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:calc(var(--jkl-unit-10)*1.5)}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 calc(var(--jkl-unit-10)*.5) 0;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color: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-uw6wn5e .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uw6wn5r .15s ease-in forwards}@keyframes jkl-entering-uw6wn5e{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uw6wn5r{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;grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-toast__progress{grid-area:progress;margin-bottom:calc(var(--jkl-unit-10)*2);margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:transparent;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:calc(var(--jkl-unit-10)*1.5)}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 calc(var(--jkl-unit-10)*.5) 0;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color: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-uc014u9 .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uc014uv .15s ease-in forwards}@keyframes jkl-entering-uc014u9{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uc014uv{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}

package/styles/components/toast/toast.scss

@@ -82,6 +82,7 @@
     &__icon {
         grid-area: icon;
         margin-right: jkl.$unit-15;
+
         @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
     }
 
@@ -97,6 +98,7 @@
 
     &__title {
         margin: 0 0 jkl.$unit-05 0;
+
         @include jkl.text-style("heading-4");
 
         & ~ .jkl-toast__message {
@@ -115,7 +117,9 @@
         cursor: pointer;
 
         color: inherit;
+
         @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
+
         @include jkl.forced-colors-mode {
             background-color: ButtonFace;
         }

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

@@ -1,3 +1,2 @@
 @forward "toggle-switch";
-
 @use "../icon" as icon;

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

@@ -57,6 +57,7 @@ $_slider-rounded: jkl.rem(100px);
 
     &__legend {
         margin-bottom: jkl.$spacing-xs;
+
         @include jkl.use-font-variables("jkl-slider-legend");
 
         &--sr-only {
@@ -108,6 +109,7 @@ $_slider-rounded: jkl.rem(100px);
         position: absolute;
         transition-property: width, transform;
         border-radius: $_slider-rounded;
+
         @include jkl.motion(standard, expressive);
     }
 

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

@@ -1,6 +1,5 @@
 @charset "UTF-8";
 @use "../../core/jkl";
-
 @use "./toggle-slider";
 
 @include jkl.comfortable-density-variables {
@@ -47,7 +46,6 @@
     touch-action: none; // Forhindrer at siden flytter på seg når man drar i toggle
 
     @include jkl.use-font-variables("jkl-toggle");
-
     @include jkl.reset-outline;
 
     @include jkl.forced-colors-mode {

package/styles/components/tooltip/_index.scss

@@ -1,4 +1,3 @@
 @forward "tooltip";
 @forward "popuptip";
-
 @use "../icon" as icon;

package/styles/core/_color-tokens.scss

@@ -13,10 +13,10 @@
     --jkl-color-background-container-high: #{jkl.$color-brand-hvit};
     --jkl-color-background-container-inverted: #{jkl.$color-brand-granitt};
     --jkl-color-background-container-subdued: #{jkl.$color-brand-svaberg};
-    --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+    --jkl-color-background-input-base: rgb(0 0 0 / 0%);
     --jkl-color-background-input-focus: #{jkl.$color-brand-hvit};
     --jkl-color-background-action: #{jkl.$color-brand-granitt};
-    --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+    --jkl-color-background-interactive: rgb(0 0 0 / 0%);
     --jkl-color-background-interactive-hover: #{jkl.$color-brand-dis};
     --jkl-color-background-interactive-selected: #{jkl.$color-brand-varde};
     --jkl-color-background-alert-neutral: #{jkl.$color-brand-varde};
@@ -40,6 +40,7 @@
     --jkl-color-border-separator-hover: #{jkl.$color-brand-granitt};
     --jkl-color-border-subdued: #{jkl.$color-brand-svaberg};
 }
+
 @include jkl.dark-mode-variables {
     --jkl-color-background-page: #{jkl.$color-brand-granitt};
     --jkl-color-background-page-variant: #{jkl.$color-brand-granitt};
@@ -48,10 +49,10 @@
     --jkl-color-background-container-high: #{jkl.$color-brand-skifer};
     --jkl-color-background-container-inverted: #{jkl.$color-brand-snohvit};
     --jkl-color-background-container-subdued: #{jkl.$color-brand-stein};
-    --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+    --jkl-color-background-input-base: rgb(0 0 0 / 0%);
     --jkl-color-background-input-focus: #{jkl.$color-brand-skifer};
     --jkl-color-background-action: #{jkl.$color-brand-snohvit};
-    --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+    --jkl-color-background-interactive: rgb(0 0 0 / 0%);
     --jkl-color-background-interactive-hover: #{jkl.$color-brand-fjellgra};
     --jkl-color-background-interactive-selected: #{jkl.$color-brand-stein};
     --jkl-color-background-alert-neutral: #{jkl.$color-brand-varde};

package/styles/core/_index.scss

@@ -1,6 +1,5 @@
 @forward "normalize";
 @forward "reset";
-
 @forward "tokens";
 @forward "legacy-tokens";
 @forward "color-tokens";

package/styles/core/_spacing.scss

@@ -6,9 +6,11 @@
 
 @function get-class-name($spacing-combination) {
     $class-name: "jkl-spacing";
+
     @each $spacing in $spacing-combination {
         $class-name: "#{$class-name}-#{$spacing}";
     }
+
     @return $class-name;
 }
 

package/styles/core/core.css

@@ -465,10 +465,10 @@ th {
     --jkl-color-background-container-high: #ffffff;
     --jkl-color-background-container-inverted: #1b1917;
     --jkl-color-background-container-subdued: #c8c5c3;
-    --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+    --jkl-color-background-input-base: rgb(0 0 0 / 0%);
     --jkl-color-background-input-focus: #ffffff;
     --jkl-color-background-action: #1b1917;
-    --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+    --jkl-color-background-interactive: rgb(0 0 0 / 0%);
     --jkl-color-background-interactive-hover: #ece9e5;
     --jkl-color-background-interactive-selected: #e0dbd4;
     --jkl-color-background-alert-neutral: #e0dbd4;
@@ -501,10 +501,10 @@ th {
   --jkl-color-background-container-high: #ffffff;
   --jkl-color-background-container-inverted: #1b1917;
   --jkl-color-background-container-subdued: #c8c5c3;
-  --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+  --jkl-color-background-input-base: rgb(0 0 0 / 0%);
   --jkl-color-background-input-focus: #ffffff;
   --jkl-color-background-action: #1b1917;
-  --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+  --jkl-color-background-interactive: rgb(0 0 0 / 0%);
   --jkl-color-background-interactive-hover: #ece9e5;
   --jkl-color-background-interactive-selected: #e0dbd4;
   --jkl-color-background-alert-neutral: #e0dbd4;
@@ -538,10 +538,10 @@ th {
     --jkl-color-background-container-high: #313030;
     --jkl-color-background-container-inverted: #f9f9f9;
     --jkl-color-background-container-subdued: #636060;
-    --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+    --jkl-color-background-input-base: rgb(0 0 0 / 0%);
     --jkl-color-background-input-focus: #313030;
     --jkl-color-background-action: #f9f9f9;
-    --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+    --jkl-color-background-interactive: rgb(0 0 0 / 0%);
     --jkl-color-background-interactive-hover: #444141;
     --jkl-color-background-interactive-selected: #636060;
     --jkl-color-background-alert-neutral: #e0dbd4;
@@ -574,10 +574,10 @@ th {
   --jkl-color-background-container-high: #313030;
   --jkl-color-background-container-inverted: #f9f9f9;
   --jkl-color-background-container-subdued: #636060;
-  --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+  --jkl-color-background-input-base: rgb(0 0 0 / 0%);
   --jkl-color-background-input-focus: #313030;
   --jkl-color-background-action: #f9f9f9;
-  --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+  --jkl-color-background-interactive: rgb(0 0 0 / 0%);
   --jkl-color-background-interactive-hover: #444141;
   --jkl-color-background-interactive-selected: #636060;
   --jkl-color-background-alert-neutral: #e0dbd4;

package/styles/core/core.scss

@@ -2,12 +2,13 @@
 @use "sass:map";
 @use "jkl";
 @use "jkl/typography";
-@use "./_index";
+@use "." as styles;
 
 /* Used by menu to figure out if it should render a compact or comfortable view */
 @include jkl.comfortable-density-variables {
     --jkl-density: "comfortable";
 }
+
 @include jkl.compact-density-variables {
     --jkl-density: "compact";
 }

package/styles/core/jkl/_motion.scss

@@ -56,6 +56,7 @@ $_timings: (
 @mixin motion($name: "standard", $mode: "productive", $properties...) {
     transition-timing-function: easing($name);
     transition-duration: timing($mode);
+
     @if list.length($properties) > 0 {
         transition-property: $properties;
     }

package/styles/core/jkl/_spacing.scss

@@ -205,6 +205,7 @@ $positions: (top, bottom, left, right);
             @include _single-spacing(list.nth($steps, 2), $position);
         }
     }
+
     @if list.length($steps) > 2 {
         @include screens.from-large-device {
             @include _single-spacing(list.nth($steps, 3), $position);

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

@@ -86,7 +86,7 @@ $_action-button-focus-position--compact: 0;
         --text-color: var(--jkl-color-text-on-alert);
         // Vi har ingen god måte å få tak i kun light mode-versjon av subdued
         // så vi bruker tekstfargen med litt gjennomsiktighet
-        --placeholder-color: color(from currentColor sRGB r g b / 0.75);
+        --placeholder-color: color(from currentColor sRGB r g b / 75%);
     }
 
     &:hover,