@fremtind/jokul 0.28.0 → 0.29.0

package/styles/components/select/select.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-select-border-color:#636060;--jkl-select-text-color:#636060;--jkl-select-text-disabled-color:#636060;--jkl-select-text-active-value-color:#1b1917;--jkl-select-background-color:transparent;--jkl-select-open-background-color:#fff;--jkl-select-focus-color:#1b1917;--jkl-select-error-background-color:#f6b3b3;--jkl-select-error-text-color:#636060;--jkl-select-hover-option-color:#1b1917;--jkl-select-hover-option-background-color:#e0dbd4;--jkl-select-option-description-color:#636060;--jkl-select-search-input-selection-color:rgba(27,25,23,.2);--jkl-select-search-input-error-selection-color:rgba(27,25,23,.2);--jkl-select-arrow-color:#1b1917}}[data-theme=light]{--jkl-select-border-color:#636060;--jkl-select-text-color:#636060;--jkl-select-text-disabled-color:#636060;--jkl-select-text-active-value-color:#1b1917;--jkl-select-background-color:transparent;--jkl-select-open-background-color:#fff;--jkl-select-focus-color:#1b1917;--jkl-select-error-background-color:#f6b3b3;--jkl-select-error-text-color:#636060;--jkl-select-hover-option-color:#1b1917;--jkl-select-hover-option-background-color:#e0dbd4;--jkl-select-option-description-color:#636060;--jkl-select-search-input-selection-color:rgba(27,25,23,.2);--jkl-select-search-input-error-selection-color:rgba(27,25,23,.2);--jkl-select-arrow-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-select-border-color:#c8c5c3;--jkl-select-text-color:#c8c5c3;--jkl-select-text-disabled-color:#c8c5c3;--jkl-select-text-active-value-color:#f9f9f9;--jkl-select-background-color:transparent;--jkl-select-open-background-color:#313030;--jkl-select-focus-color:#f9f9f9;--jkl-select-error-background-color:#f6b3b3;--jkl-select-error-text-color:#636060;--jkl-select-hover-option-color:#f9f9f9;--jkl-select-hover-option-background-color:#444141;--jkl-select-option-description-color:#ece9e5;--jkl-select-search-input-selection-color:hsla(0,0%,98%,.25);--jkl-select-search-input-error-selection-color:rgba(27,25,23,.2);--jkl-select-arrow-color:#f9f9f9}}[data-theme=dark]{--jkl-select-border-color:#c8c5c3;--jkl-select-text-color:#c8c5c3;--jkl-select-text-disabled-color:#c8c5c3;--jkl-select-text-active-value-color:#f9f9f9;--jkl-select-background-color:transparent;--jkl-select-open-background-color:#313030;--jkl-select-focus-color:#f9f9f9;--jkl-select-error-background-color:#f6b3b3;--jkl-select-error-text-color:#636060;--jkl-select-hover-option-color:#f9f9f9;--jkl-select-hover-option-background-color:#444141;--jkl-select-option-description-color:#ece9e5;--jkl-select-search-input-selection-color:hsla(0,0%,98%,.25);--jkl-select-search-input-error-selection-color:rgba(27,25,23,.2);--jkl-select-arrow-color:#f9f9f9}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:3rem;--jkl-select-arrow-right:0.5rem;--jkl-select-button-padding:0.5rem 2.25rem 0.5rem 0.75rem;--jkl-select-search-input-padding:var(--jkl-select-button-padding);--jkl-select-native-padding:0 2.5rem 0 0.5rem;--jkl-select-option-padding:0.5rem 0.75rem;--jkl-select-font-size:var(--jkl-body-font-size);--jkl-select-line-height:var(--jkl-body-line-height);--jkl-select-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-select-input-height:2rem;--jkl-select-arrow-right:0.25rem;--jkl-select-button-padding:0.25rem 2rem 0.25rem 0.5rem;--jkl-select-search-input-padding:0.25rem 0.5rem;--jkl-select-native-padding:0.25rem 1.5rem 0.25rem 0.25rem;--jkl-select-option-padding:0.25rem 0.5rem;--jkl-select-font-size:var(--jkl-small-font-size);--jkl-select-line-height:var(--jkl-small-line-height);--jkl-select-font-weight:var(--jkl-small-font-weight)}.jkl-select{border-style:none;display:block;outline:0;outline-style:none;position:relative}.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select{border-style:revert;outline:revert;outline-style:revert}.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:revert;outline-style:revert}}.jkl-select :focus{outline:none}.jkl-select select{-webkit-appearance:none;appearance:none}.jkl-select select::ms-expand{display:none}.jkl-select select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--jkl-select-text-color)}.jkl-select select option{background-color:var(--jkl-select-open-background-color);color:var(--jkl-select-text-color);font-family:sans-serif;font-weight:400}.jkl-select select option:disabled{color:var(--jkl-select-text-disabled-color)}.jkl-select__outer-wrapper{max-width:100%;min-width:7rem;position:relative;width:15rem}.jkl-select__search-input{box-sizing:border-box;color:var(--jkl-select-text-color);padding:var(--jkl-select-search-input-padding)}.jkl-select__search-input::selection{background-color:var(--jkl-select-search-input-selection-color)}[data-theme=dark] .jkl-select__search-input::selection{background-color:var(--jkl-select-search-input-selection-color)}.jkl-select__button,.jkl-select__search-input{background-color:var(--jkl-select-background-color);border:.0625rem solid var(--jkl-select-border-color);border-radius:.1875rem;box-shadow:0 0 0 .0625rem transparent;color:var(--jkl-select-text-color);cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);height:var(--jkl-select-input-height);line-height:var(--jkl-select-line-height);overflow:hidden;text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;white-space:nowrap;width:100%}.jkl-select__button--active-value,.jkl-select__search-input--active-value{color:var(--jkl-select-text-active-value-color)}.jkl-select__button:focus,.jkl-select__search-input:focus{background-color:var(--jkl-select-open-background-color);border-color:var(--jkl-select-focus-color);box-shadow:0 0 0 .0625rem var(--jkl-select-focus-color);color:var(--jkl-select-focus-color)}.jkl-select__button:hover,.jkl-select__search-input:hover{border-color:var(--jkl-select-focus-color);box-shadow:0 0 0 .0625rem var(--jkl-select-focus-color)}.jkl-select__button:hover~.jkl-select__arrow,.jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-select__button{padding:var(--jkl-select-button-padding)}.jkl-select select.jkl-select__button{padding:var(--jkl-select-native-padding)}.jkl-select__arrow{color:var(--jkl-select-arrow-color);pointer-events:none;position:absolute;right:var(--jkl-select-arrow-right);top:50%;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-select__arrow,.jkl-select__arrow path,.jkl-select__arrow svg{stroke:CanvasText;fill:CanvasText}}.jkl-select__options-menu{background-color:var(--jkl-select-open-background-color);border:.125rem solid var(--jkl-select-focus-color);border-radius:0 0 .1875rem .1875rem;border-top:none;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-select-max-shown-options, 5) + .5)*var(--jkl-select-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-select__option-wrapper{list-style-type:none;margin:0;padding:0;-webkit-overflow-scrolling:touch}.jkl-select__option{background-color:inherit;border:0;color:unset;cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);line-height:var(--jkl-select-line-height);min-height:var(--jkl-select-input-height);padding:var(--jkl-select-option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-select__option:focus,:not([data-focus=controlled])>.jkl-select__option:hover{background-color:var(--jkl-select-hover-option-background-color);color:var(--jkl-select-hover-option-color)}.jkl-select__option-description{color:var(--jkl-select-option-description-color);display:block;font-size:1rem;font-weight:400;line-height:1.5rem;width:100%;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-select--inline{display:inline-block;vertical-align:top}.jkl-select--open .jkl-select__button,.jkl-select--open .jkl-select__search-input{background-color:var(--jkl-select-open-background-color);border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--jkl-select-focus-color);box-shadow:0 0 0 .0625rem var(--jkl-select-focus-color)}.jkl-select--open .jkl-select__button:hover~.jkl-select__arrow,.jkl-select--open .jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% - .1875rem))}.jkl-select--invalid .jkl-select__button,.jkl-select--invalid .jkl-select__search-input{background-color:var(--jkl-select-error-background-color);color:var(--jkl-select-error-text-color)}.jkl-select--invalid .jkl-select__button--active-value,.jkl-select--invalid .jkl-select__search-input--active-value{color:revert}.jkl-select--invalid .jkl-select__search-input::selection{background-color:var(--jkl-select-search-input-error-selection-color)}@media screen and (forced-colors:active){.jkl-select .jkl-select__button,.jkl-select .jkl-select__search-input{background-color:Canvas;border:2px solid ButtonText;color:CanvasText;outline:revert}.jkl-select .jkl-select__button:hover,.jkl-select .jkl-select__search-input:hover{border-color:Highlight}.jkl-select .jkl-select__option{border-bottom:1px solid Canvas;border-top:1px solid Canvas;color:CanvasText}.jkl-select .jkl-select__option:focus,.jkl-select .jkl-select__option:hover{border-bottom:1px solid SelectedItem;border-top:1px solid SelectedItem;--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}}
+.jkl-select{border-style:none;display:block;outline:0;outline-style:none;position:relative}.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select{border-style:revert;outline:revert;outline-style:revert}.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:revert;outline-style:revert}}.jkl .jkl-select,.jkl-select[data-density=comfortable],.jkl-select[data-layout-density=comfortable],[data-density=comfortable] .jkl-select,[data-layout-density=comfortable] .jkl-select{--jkl-select-input-height:3rem;--jkl-select-arrow-right:0.5rem;--jkl-select-button-padding:0.5rem 2.25rem 0.5rem 0.75rem;--jkl-select-search-input-padding:var(--jkl-select-button-padding);--jkl-select-native-padding:0 2.5rem 0 0.5rem;--jkl-select-option-padding:0.5rem 0.75rem;--jkl-select-font-size:var(--jkl-body-font-size);--jkl-select-line-height:var(--jkl-body-line-height);--jkl-select-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){.jkl .jkl-select,.jkl-select[data-density=comfortable],.jkl-select[data-layout-density=comfortable],[data-density=comfortable] .jkl-select,[data-layout-density=comfortable] .jkl-select{--jkl-select-input-height:2.75rem}}.jkl-select[data-density=compact],.jkl-select[data-layout-density=compact],[data-density=compact] .jkl-select,[data-layout-density=compact] .jkl-select{--jkl-select-input-height:2rem;--jkl-select-arrow-right:0.25rem;--jkl-select-button-padding:0.25rem 2rem 0.25rem 0.5rem;--jkl-select-search-input-padding:0.25rem 0.5rem;--jkl-select-native-padding:0.25rem 1.5rem 0.25rem 0.25rem;--jkl-select-option-padding:0.25rem 0.5rem;--jkl-select-font-size:var(--jkl-small-font-size);--jkl-select-line-height:var(--jkl-small-line-height);--jkl-select-font-weight:var(--jkl-small-font-weight)}.jkl-select :focus{outline:none}.jkl-select select{-webkit-appearance:none;appearance:none}.jkl-select select::ms-expand{display:none}.jkl-select select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--jkl-color-text-subdued)}.jkl-select select option{background-color:var(--jkl-color-background-container-high);color:var(--jkl-color-text-subdued);font-family:sans-serif;font-weight:400}.jkl-select__outer-wrapper{max-width:100%;min-width:7rem;position:relative;width:15rem}.jkl-select__search-input{box-sizing:border-box;color:var(--jkl-color-text-subdued);padding:var(--jkl-select-search-input-padding)}.jkl-select__search-input::selection{background-color:color-mix(in oklab,var(--jkl-color-text-subdued) 25%,var(--jkl-color-background-container) 15%)}.jkl-select__button,.jkl-select__search-input{background-color:transparent;border:.0625rem solid var(--jkl-color-border-input);border-radius:.1875rem;box-shadow:0 0 0 .0625rem transparent;color:var(--jkl-color-text-subdued);cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);height:var(--jkl-select-input-height);line-height:var(--jkl-select-line-height);overflow:hidden;text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;white-space:nowrap;width:100%}.jkl-select__button--active-value,.jkl-select__search-input--active-value{color:var(--jkl-color-text-default)}.jkl-select__button:focus,.jkl-select__search-input:focus{background-color:var(--jkl-color-background-container-high);border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus);color:var(--jkl-color-border-input-focus)}.jkl-select__button:hover,.jkl-select__search-input:hover{border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select__button:hover~.jkl-select__arrow,.jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-select__button{padding:var(--jkl-select-button-padding)}.jkl-select select.jkl-select__button{padding:var(--jkl-select-native-padding)}.jkl-select__arrow{color:var(--jkl-color-text-default);pointer-events:none;position:absolute;right:var(--jkl-select-arrow-right);top:50%;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-select__arrow,.jkl-select__arrow path,.jkl-select__arrow svg{stroke:CanvasText;fill:CanvasText}}:has([aria-invalid=true]) .jkl-select__arrow{color:var(--jkl-color-text-on-alert)}.jkl-select__options-menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);border-radius:0 0 .1875rem .1875rem;border-top:none;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-select-max-shown-options, 5) + .5)*var(--jkl-select-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-select__option-wrapper{list-style-type:none;margin:0;padding:0;-webkit-overflow-scrolling:touch}.jkl-select__option{background-color:inherit;border:0;color:unset;cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);line-height:var(--jkl-select-line-height);min-height:var(--jkl-select-input-height);padding:var(--jkl-select-option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-select__option:focus,:not([data-focus=controlled])>.jkl-select__option:hover{background-color:var(--jkl-color-background-interactive-hover);color:var(--jkl-color-text-default)}.jkl-select__option-description{color:var(--jkl-color-text-subdued);display:block;font-size:1rem;font-weight:400;line-height:1.5rem;width:100%;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-select--inline{display:inline-block;vertical-align:top}.jkl-select--open .jkl-select__button,.jkl-select--open .jkl-select__search-input{background-color:var(--jkl-color-background-container-high);border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select--open .jkl-select__button:hover~.jkl-select__arrow,.jkl-select--open .jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% - .1875rem))}.jkl-select--invalid .jkl-select__button,.jkl-select--invalid .jkl-select__search-input{background-color:var(--jkl-color-background-alert-error);color:var(--jkl-color-text-on-alert-subdued)}.jkl-select--invalid .jkl-select__button--active-value,.jkl-select--invalid .jkl-select__search-input--active-value{color:revert}@media screen and (forced-colors:active){.jkl-select .jkl-select__button,.jkl-select .jkl-select__search-input{background-color:Canvas;border:2px solid ButtonText;color:CanvasText;outline:revert}.jkl-select .jkl-select__button:hover,.jkl-select .jkl-select__search-input:hover{border-color:Highlight}.jkl-select .jkl-select__option{border-bottom:1px solid Canvas;border-top:1px solid Canvas;color:CanvasText}.jkl-select .jkl-select__option:focus,.jkl-select .jkl-select__option:hover{border-bottom:1px solid SelectedItem;border-top:1px solid SelectedItem;--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}}

package/styles/components/select/select.scss

@@ -4,88 +4,40 @@
 @use "../../core/jkl";
 @use "../../core/jkl/colors";
 
-$_select-focus-color: jkl.$color-granitt;
-$_select-search-input-selection-color: color.scale(
-    $color: $_select-focus-color,
-    $alpha: -80%,
-);
-
-$_select-focus-color--inverted: jkl.$color-snohvit;
-$_select-search-input-selection-color--inverted: color.scale(
-    $color: $_select-focus-color--inverted,
-    $alpha: -75%,
-);
-
-@include jkl.light-mode-variables {
-    --jkl-select-border-color: #{jkl.$color-stein};
-    --jkl-select-text-color: #{jkl.$color-stein};
-    --jkl-select-text-disabled-color: #{jkl.$color-stein};
-    --jkl-select-text-active-value-color: #{jkl.$color-granitt};
-    --jkl-select-background-color: transparent;
-    --jkl-select-open-background-color: #{jkl.$color-hvit};
-    --jkl-select-focus-color: #{$_select-focus-color};
-    --jkl-select-error-background-color: #{jkl.$color-feil};
-    --jkl-select-error-text-color: #{jkl.$color-stein};
-    --jkl-select-hover-option-color: #{jkl.$color-granitt};
-    --jkl-select-hover-option-background-color: #{jkl.$color-varde};
-    --jkl-select-option-description-color: #{jkl.$color-stein};
-    --jkl-select-search-input-selection-color: #{$_select-search-input-selection-color};
-    --jkl-select-search-input-error-selection-color: #{$_select-search-input-selection-color};
-    --jkl-select-arrow-color: #{jkl.$color-granitt};
-}
+.jkl-select {
+    display: block;
+    position: relative;
 
-@include jkl.dark-mode-variables {
-    --jkl-select-border-color: #{jkl.$color-svaberg};
-    --jkl-select-text-color: #{jkl.$color-svaberg};
-    --jkl-select-text-disabled-color: #{jkl.$color-svaberg};
-    --jkl-select-text-active-value-color: #{jkl.$color-snohvit};
-    --jkl-select-background-color: transparent;
-    --jkl-select-open-background-color: #{jkl.$color-skifer};
-    --jkl-select-focus-color: #{$_select-focus-color--inverted};
-    --jkl-select-error-background-color: #{jkl.$color-feil};
-    --jkl-select-error-text-color: #{jkl.$color-stein};
-    --jkl-select-hover-option-color: #{jkl.$color-snohvit};
-    --jkl-select-hover-option-background-color: #{jkl.$color-fjellgra};
-    --jkl-select-option-description-color: #{jkl.$color-dis};
-    --jkl-select-search-input-selection-color: #{$_select-search-input-selection-color--inverted};
-    --jkl-select-search-input-error-selection-color: #{$_select-search-input-selection-color};
-    --jkl-select-arrow-color: #{jkl.$color-snohvit};
-}
+    @include jkl.reset-outline;
 
-@include jkl.comfortable-density-variables {
-    --jkl-select-input-height: #{jkl.rem(48px)};
-    --jkl-select-arrow-right: #{jkl.$spacing-8};
-    --jkl-select-button-padding: #{jkl.$spacing-8} #{jkl.rem(36px)} #{jkl.$spacing-8}
-        #{jkl.$spacing-12};
-    --jkl-select-search-input-padding: var(--jkl-select-button-padding);
-    --jkl-select-native-padding: 0 #{jkl.$spacing-40} 0 #{jkl.$spacing-8};
-    --jkl-select-option-padding: #{jkl.$spacing-8} #{jkl.$spacing-12};
+    @include jkl.comfortable-density {
+        --jkl-select-input-height: #{jkl.rem(48px)};
+        --jkl-select-arrow-right: #{jkl.$spacing-8};
+        --jkl-select-button-padding: #{jkl.$spacing-8} #{jkl.rem(36px)} #{jkl.$spacing-8}
+            #{jkl.$spacing-12};
+        --jkl-select-search-input-padding: var(--jkl-select-button-padding);
+        --jkl-select-native-padding: 0 #{jkl.$spacing-40} 0 #{jkl.$spacing-8};
+        --jkl-select-option-padding: #{jkl.$spacing-8} #{jkl.$spacing-12};
 
-    @include jkl.declare-font-variables("jkl-select", "body");
+        @include jkl.declare-font-variables("jkl-select", "body");
 
-    @include jkl.small-device {
-        --jkl-select-input-height: #{jkl.rem(44px)};
+        @include jkl.small-device {
+            --jkl-select-input-height: #{jkl.rem(44px)};
+        }
     }
-}
-
-@include jkl.compact-density-variables {
-    --jkl-select-input-height: #{jkl.rem(32px)};
-    --jkl-select-arrow-right: #{jkl.rem(4px)};
-    --jkl-select-button-padding: #{jkl.$spacing-4} #{jkl.$spacing-32} #{jkl.$spacing-4}
-        #{jkl.$spacing-8};
-    --jkl-select-search-input-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
-    --jkl-select-native-padding: #{jkl.$spacing-4} #{jkl.$spacing-24} #{jkl.$spacing-4}
-        #{jkl.$spacing-4};
-    --jkl-select-option-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
-
-    @include jkl.declare-font-variables("jkl-select", "small");
-}
-
-.jkl-select {
-    display: block;
-    position: relative;
 
-    @include jkl.reset-outline;
+    @include jkl.compact-density {
+        --jkl-select-input-height: #{jkl.rem(32px)};
+        --jkl-select-arrow-right: #{jkl.rem(4px)};
+        --jkl-select-button-padding: #{jkl.$spacing-4} #{jkl.$spacing-32} #{jkl.$spacing-4}
+            #{jkl.$spacing-8};
+        --jkl-select-search-input-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
+        --jkl-select-native-padding: #{jkl.$spacing-4} #{jkl.$spacing-24} #{jkl.$spacing-4}
+            #{jkl.$spacing-4};
+        --jkl-select-option-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
+
+        @include jkl.declare-font-variables("jkl-select", "small");
+    }
 
     & *:focus {
         outline: none;
@@ -100,18 +52,14 @@ $_select-search-input-selection-color--inverted: color.scale(
 
         &:-moz-focusring {
             color: transparent;
-            text-shadow: 0 0 0 var(--jkl-select-text-color);
+            text-shadow: 0 0 0 var(--jkl-color-text-subdued);
         }
 
         & option {
             font-weight: normal;
             font-family: sans-serif;
-            color: var(--jkl-select-text-color);
-            background-color: var(--jkl-select-open-background-color);
-
-            &:disabled {
-                color: var(--jkl-select-text-disabled-color);
-            }
+            color: var(--jkl-color-text-subdued);
+            background-color: var(--jkl-color-background-container-high);
         }
     }
 
@@ -125,16 +73,14 @@ $_select-search-input-selection-color--inverted: color.scale(
     &__search-input {
         box-sizing: border-box;
         padding: var(--jkl-select-search-input-padding);
-        color: var(--jkl-select-text-color);
+        color: var(--jkl-color-text-subdued);
 
         &::selection {
-            background-color: var(--jkl-select-search-input-selection-color);
-
-            [data-theme="dark"] & {
-                background-color: var(
-                    --jkl-select-search-input-selection-color
-                );
-            }
+            background-color: color-mix(
+                in oklab,
+                var(--jkl-color-text-subdued) 25%,
+                var(--jkl-color-background-container) 15%
+            );
         }
     }
 
@@ -143,13 +89,13 @@ $_select-search-input-selection-color--inverted: color.scale(
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        background-color: var(--jkl-select-background-color);
-        color: var(--jkl-select-text-color);
+        background-color: transparent;
+        color: var(--jkl-color-text-subdued);
         cursor: pointer;
 
         height: var(--jkl-select-input-height);
         border-radius: jkl.rem(3px);
-        border: jkl.rem(1px) solid var(--jkl-select-border-color);
+        border: jkl.rem(1px) solid var(--jkl-color-border-input);
         box-shadow: 0 0 0 jkl.rem(1px) transparent;
         text-align: left;
         width: 100%;
@@ -160,19 +106,19 @@ $_select-search-input-selection-color--inverted: color.scale(
         @include jkl.use-font-variables("jkl-select");
 
         &--active-value {
-            color: var(--jkl-select-text-active-value-color);
+            color: var(--jkl-color-text-default);
         }
 
         &:focus {
-            border-color: var(--jkl-select-focus-color);
-            color: var(--jkl-select-focus-color);
-            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-select-focus-color);
-            background-color: var(--jkl-select-open-background-color);
+            border-color: var(--jkl-color-border-input-focus);
+            color: var(--jkl-color-border-input-focus);
+            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
+            background-color: var(--jkl-color-background-container-high);
         }
 
         &:hover {
-            border-color: var(--jkl-select-focus-color);
-            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-select-focus-color);
+            border-color: var(--jkl-color-border-input-focus);
+            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
 
             & ~ .jkl-select__arrow {
                 transform: translateY(calc(-50% + #{jkl.rem(3px)}));
@@ -193,7 +139,7 @@ $_select-search-input-selection-color--inverted: color.scale(
         position: absolute;
         right: var(--jkl-select-arrow-right);
         top: 50%;
-        color: var(--jkl-select-arrow-color);
+        color: var(--jkl-color-text-default);
 
         transform: translateY(-50%);
         transition-property: transform, color;
@@ -203,6 +149,10 @@ $_select-search-input-selection-color--inverted: color.scale(
             $stroke: CanvasText,
             $fill: CanvasText
         );
+
+        :has([aria-invalid="true"]) & {
+            color: var(--jkl-color-text-on-alert);
+        }
     }
 
     &__options-menu {
@@ -212,8 +162,8 @@ $_select-search-input-selection-color--inverted: color.scale(
         top: 100%;
         z-index: jkl.$z-index--dropdown;
 
-        background-color: var(--jkl-select-open-background-color);
-        border: jkl.rem(2px) solid var(--jkl-select-focus-color);
+        background-color: var(--jkl-color-background-container-high);
+        border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
         border-top: none;
         border-radius: 0 0 jkl.rem(3px) jkl.rem(3px);
         box-sizing: border-box;
@@ -257,12 +207,12 @@ $_select-search-input-selection-color--inverted: color.scale(
         markeres ved hover som normalt. */
         &:focus,
         :not([data-focus="controlled"]) > &:hover {
-            color: var(--jkl-select-hover-option-color);
-            background-color: var(--jkl-select-hover-option-background-color);
+            color: var(--jkl-color-text-default);
+            background-color: var(--jkl-color-background-interactive-hover);
         }
 
         &-description {
-            color: var(--jkl-select-option-description-color);
+            color: var(--jkl-color-text-subdued);
             display: block;
             width: 100%;
             @include jkl.text-style("small");
@@ -283,9 +233,9 @@ $_select-search-input-selection-color--inverted: color.scale(
         .jkl-select__button {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
-            border-color: var(--jkl-select-focus-color);
-            background-color: var(--jkl-select-open-background-color);
-            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-select-focus-color);
+            border-color: var(--jkl-color-border-input-focus);
+            background-color: var(--jkl-color-background-container-high);
+            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
 
             &:hover ~ .jkl-select__arrow {
                 transform: translateY(calc(-50% + #{jkl.rem(-3px)}));
@@ -296,20 +246,13 @@ $_select-search-input-selection-color--inverted: color.scale(
     &--invalid {
         .jkl-select__search-input,
         .jkl-select__button {
-            background-color: var(--jkl-select-error-background-color);
-            color: var(--jkl-select-error-text-color);
+            background-color: var(--jkl-color-background-alert-error);
+            color: var(--jkl-color-text-on-alert-subdued);
 
             &--active-value {
                 color: revert;
             }
         }
-
-        /* Color of text selection */
-        .jkl-select__search-input::selection {
-            background-color: var(
-                --jkl-select-search-input-error-selection-color
-            );
-        }
     }
 
     @include jkl.forced-colors-mode {

package/styles/components/summary-table/summary-table.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
 @media screen and (prefers-color-scheme: light) {
   :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
 :root,
 [data-layout-density=comfortable],
@@ -135,7 +135,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
   margin-bottom: 0;
 }
 .jkl-system-message--dismissed {
-  animation: jkl-dismiss-ui4we2r 400ms ease-in forwards;
+  animation: jkl-dismiss-uyqz0xw 400ms ease-in forwards;
   transition: visibility 0ms 400ms;
   visibility: hidden;
 }
@@ -167,7 +167,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
   }
 }
 
-@keyframes jkl-dismiss-ui4we2r {
+@keyframes jkl-dismiss-uyqz0xw {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);

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

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

package/styles/components/table/table.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
 .jkl-table-caption--sr-only {
   border: 0 !important;

package/styles/components/tabs/tabs.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
 :root,
 [data-layout-density=comfortable],

package/styles/components/tag/tag.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
 :root,
 [data-layout-density=comfortable],

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
 @media screen and (prefers-color-scheme: light) {
   :root {
@@ -266,7 +266,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-act
   background-color: var(--jkl-text-input-error-selection-color);
 }
 .jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input-action-button {
-  color: var(--jkl-text-input-error-placeholder-color);
+  color: var(--jkl-color-text-on-alert);
 }
 .jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input-action-button:hover {
   color: var(--jkl-text-input-error-text-color);
@@ -363,7 +363,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input__in
   background-color: var(--jkl-text-input-error-selection-color);
 }
 .jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input-action-button {
-  color: var(--jkl-text-input-error-placeholder-color);
+  color: var(--jkl-color-text-on-alert);
 }
 .jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input-action-button:hover {
   color: var(--jkl-text-input-error-text-color);

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

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-text-input-border-color:#636060;--jkl-text-input-text-color:#1b1917;--jkl-text-input-placeholder-color:#636060;--jkl-text-input-unit-color:#1b1917;--jkl-text-input-background-color:#fff;--jkl-text-input-focus-color:#1b1917;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-selection-color:rgba(27,25,23,.2);--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#636060}}[data-theme=light]{--jkl-text-input-border-color:#636060;--jkl-text-input-text-color:#1b1917;--jkl-text-input-placeholder-color:#636060;--jkl-text-input-unit-color:#1b1917;--jkl-text-input-background-color:#fff;--jkl-text-input-focus-color:#1b1917;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-selection-color:rgba(27,25,23,.2);--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#636060}@media screen and (prefers-color-scheme:dark){:root{--jkl-text-input-border-color:#c8c5c3;--jkl-text-input-text-color:#f9f9f9;--jkl-text-input-placeholder-color:#c8c5c3;--jkl-text-input-unit-color:#f9f9f9;--jkl-text-input-background-color:#313030;--jkl-text-input-focus-color:#f9f9f9;--jkl-text-input-selection-color:hsla(0,0%,98%,.25);--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#c8c5c3}}[data-theme=dark]{--jkl-text-input-border-color:#c8c5c3;--jkl-text-input-text-color:#f9f9f9;--jkl-text-input-placeholder-color:#c8c5c3;--jkl-text-input-unit-color:#f9f9f9;--jkl-text-input-background-color:#313030;--jkl-text-input-focus-color:#f9f9f9;--jkl-text-input-selection-color:hsla(0,0%,98%,.25);--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#c8c5c3}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.5rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}.jkl-text-input-action-button{align-items:center;background-color:transparent;border-style:none;box-sizing:border-box;color:var(--jkl-text-input-border-color);cursor:pointer;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1);outline:0;outline-style:none;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size)}.jkl-text-input-action-button:active,.jkl-text-input-action-button:focus,.jkl-text-input-action-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input-action-button{border-style:revert;outline:revert;outline-style:revert}.jkl-text-input-action-button:active,.jkl-text-input-action-button:focus,.jkl-text-input-action-button:hover{outline:revert;outline-style:revert}}.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-input-action-button:hover{color:var(--jkl-text-input-focus-color)}@media screen and (forced-colors:active){.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus{position:relative}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-focus-color);content:"";inset:var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position);position:absolute}@media screen and (forced-colors:active){.jkl-text-input-action-button{background-color:revert;border:revert;stroke:ButtonText}.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText}}.jkl-text-input-wrapper{align-items:center;background-color:transparent;border-radius:.1875rem;box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--jkl-text-input-text-color);display:flex;font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-width:100%;position:relative;transition-duration:.15s;transition-property:color,box-shadow,background-color;transition-timing-function:ease}.jkl-text-input-wrapper:hover{border-color:var(--jkl-text-input-focus-color);box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-focus-color),0 0 0 .0625rem var(--jkl-text-input-focus-color)}.jkl-text-input-wrapper:focus-within{background-color:var(--jkl-text-input-background-color);border-color:var(--jkl-text-input-focus-color);box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-focus-color),0 0 0 .0625rem var(--jkl-text-input-focus-color)}.jkl-text-input-wrapper[data-invalid=true]{background-color:var(--jkl-text-input-error-background-color);color:var(--jkl-text-input-error-text-color)}.jkl-text-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-text-input__input{-webkit-appearance:none;background:none;border-style:none;color:var(--jkl-color);font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);line-height:var(--jkl-text-input-line-height);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);width:100%}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input__input{border-style:revert;outline:revert;outline-style:revert}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:revert;outline-style:revert}}.jkl-text-input__input input[type=number]::-webkit-inner-spin-button,.jkl-text-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-input__input input[type=number]{-moz-appearance:textfield}.jkl-text-input__input::placeholder{color:var(--jkl-text-input-placeholder-color);opacity:1}.jkl-text-input__input::selection{background-color:var(--jkl-text-input-selection-color)}[data-theme=dark] .jkl-text-input__input::selection{background-color:var(--jkl-text-input-selection-color)}.jkl-text-input__input[aria-invalid=true]{color:var(--jkl-text-input-error-text-color)}.jkl-text-input__input[aria-invalid=true]::placeholder{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-input__input[aria-invalid=true]::selection{background-color:var(--jkl-text-input-error-selection-color)}.jkl-text-input__input[aria-invalid=true]~.jkl-text-input-action-button{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-input__input[aria-invalid=true]~.jkl-text-input-action-button:hover{color:var(--jkl-text-input-error-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input__input[aria-invalid=true]~.jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-error-text-color)}.jkl-text-input__input[aria-invalid=true]~.jkl-text-input__unit{color:var(--jkl-text-input-error-text-color)}.jkl-text-input__input--align-right{text-align:right}.jkl-text-input__unit{color:var(--jkl-text-input-unit-color);padding-block:var(--jkl-text-input-vertical-padding);padding-inline-end:var(--jkl-text-input-horizontal-padding)}.jkl-text-input__action-button{margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input--inline{display:inline-block;margin:-.125rem .25rem;vertical-align:middle}.jkl-text-area{height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:var(--jkl-color);font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-height:var(--jkl-text-input-height);min-height:var(--jkl-text-input-height);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) transparent;transition-duration:.15s;transition-property:height,min-height,max-height,padding;transition-timing-function:ease;width:100%}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{border-style:revert;outline:revert;outline-style:revert}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}.jkl-text-area__text-area::placeholder{color:var(--jkl-text-input-placeholder-color);opacity:1}.jkl-text-area__text-area::selection{background-color:var(--jkl-text-input-selection-color)}[data-theme=dark] .jkl-text-area__text-area::selection{background-color:var(--jkl-text-input-selection-color)}.jkl-text-area__text-area[aria-invalid=true]{color:var(--jkl-text-input-error-text-color)}.jkl-text-area__text-area[aria-invalid=true]::placeholder{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-area__text-area[aria-invalid=true]::selection{background-color:var(--jkl-text-input-error-selection-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button:hover{color:var(--jkl-text-input-error-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-error-text-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input__unit{color:var(--jkl-text-input-error-text-color)}.jkl-text-area .jkl-text-input-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-input-wrapper{max-height:100%}.jkl-text-area--auto-expand .jkl-text-area__text-area{overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper{position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper:focus-within,.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper[data-has-content=true]{padding-bottom:calc(var(--jkl-text-input-height) + .25rem)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{color:var(--jkl-text-area-counter-count-color);font-size:1rem;font-weight:400;line-height:1.5rem;padding:var(--jkl-text-input-padding);--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:transparent;height:.25rem;overflow:hidden;width:100%}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{background-color:var(--jkl-color);content:"";display:block;height:.25rem;transition-duration:.4s;transition-property:width;transition-timing-function:ease;width:var(--progress-width,100%)}.jkl-text-area:has(.jkl-text-area__counter):focus-within .jkl-text-area__counter{opacity:1;transition-delay:.15s}.jkl-text-area:has(.jkl-text-area__counter) [aria-invalid=true]~.jkl-text-area__counter{color:var(--jkl-text-input-error-text-color)}.jkl-text-area--start-open .jkl-text-area__text-area--3-rows,.jkl-text-area__text-area--3-rows:focus,.jkl-text-area__text-area--3-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*3);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--4-rows,.jkl-text-area__text-area--4-rows:focus,.jkl-text-area__text-area--4-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*4);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--5-rows,.jkl-text-area__text-area--5-rows:focus,.jkl-text-area__text-area--5-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*5);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--6-rows,.jkl-text-area__text-area--6-rows:focus,.jkl-text-area__text-area--6-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*6);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--7-rows,.jkl-text-area__text-area--7-rows:focus,.jkl-text-area__text-area--7-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*7);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--8-rows,.jkl-text-area__text-area--8-rows:focus,.jkl-text-area__text-area--8-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*8);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--9-rows,.jkl-text-area__text-area--9-rows:focus,.jkl-text-area__text-area--9-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*9);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--10-rows,.jkl-text-area__text-area--10-rows:focus,.jkl-text-area__text-area--10-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*10);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}
+@media screen and (prefers-color-scheme:light){:root{--jkl-text-input-border-color:#636060;--jkl-text-input-text-color:#1b1917;--jkl-text-input-placeholder-color:#636060;--jkl-text-input-unit-color:#1b1917;--jkl-text-input-background-color:#fff;--jkl-text-input-focus-color:#1b1917;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-selection-color:rgba(27,25,23,.2);--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#636060}}[data-theme=light]{--jkl-text-input-border-color:#636060;--jkl-text-input-text-color:#1b1917;--jkl-text-input-placeholder-color:#636060;--jkl-text-input-unit-color:#1b1917;--jkl-text-input-background-color:#fff;--jkl-text-input-focus-color:#1b1917;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-selection-color:rgba(27,25,23,.2);--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#636060}@media screen and (prefers-color-scheme:dark){:root{--jkl-text-input-border-color:#c8c5c3;--jkl-text-input-text-color:#f9f9f9;--jkl-text-input-placeholder-color:#c8c5c3;--jkl-text-input-unit-color:#f9f9f9;--jkl-text-input-background-color:#313030;--jkl-text-input-focus-color:#f9f9f9;--jkl-text-input-selection-color:hsla(0,0%,98%,.25);--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#c8c5c3}}[data-theme=dark]{--jkl-text-input-border-color:#c8c5c3;--jkl-text-input-text-color:#f9f9f9;--jkl-text-input-placeholder-color:#c8c5c3;--jkl-text-input-unit-color:#f9f9f9;--jkl-text-input-background-color:#313030;--jkl-text-input-focus-color:#f9f9f9;--jkl-text-input-selection-color:hsla(0,0%,98%,.25);--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#c8c5c3}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.5rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}.jkl-text-input-action-button{align-items:center;background-color:transparent;border-style:none;box-sizing:border-box;color:var(--jkl-text-input-border-color);cursor:pointer;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1);outline:0;outline-style:none;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size)}.jkl-text-input-action-button:active,.jkl-text-input-action-button:focus,.jkl-text-input-action-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input-action-button{border-style:revert;outline:revert;outline-style:revert}.jkl-text-input-action-button:active,.jkl-text-input-action-button:focus,.jkl-text-input-action-button:hover{outline:revert;outline-style:revert}}.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-input-action-button:hover{color:var(--jkl-text-input-focus-color)}@media screen and (forced-colors:active){.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus{position:relative}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-focus-color);content:"";inset:var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position);position:absolute}@media screen and (forced-colors:active){.jkl-text-input-action-button{background-color:revert;border:revert;stroke:ButtonText}.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText}}.jkl-text-input-wrapper{align-items:center;background-color:transparent;border-radius:.1875rem;box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--jkl-text-input-text-color);display:flex;font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-width:100%;position:relative;transition-duration:.15s;transition-property:color,box-shadow,background-color;transition-timing-function:ease}.jkl-text-input-wrapper:hover{border-color:var(--jkl-text-input-focus-color);box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-focus-color),0 0 0 .0625rem var(--jkl-text-input-focus-color)}.jkl-text-input-wrapper:focus-within{background-color:var(--jkl-text-input-background-color);border-color:var(--jkl-text-input-focus-color);box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-focus-color),0 0 0 .0625rem var(--jkl-text-input-focus-color)}.jkl-text-input-wrapper[data-invalid=true]{background-color:var(--jkl-text-input-error-background-color);color:var(--jkl-text-input-error-text-color)}.jkl-text-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-text-input__input{-webkit-appearance:none;background:none;border-style:none;color:var(--jkl-color);font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);line-height:var(--jkl-text-input-line-height);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);width:100%}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input__input{border-style:revert;outline:revert;outline-style:revert}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:revert;outline-style:revert}}.jkl-text-input__input input[type=number]::-webkit-inner-spin-button,.jkl-text-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-input__input input[type=number]{-moz-appearance:textfield}.jkl-text-input__input::placeholder{color:var(--jkl-text-input-placeholder-color);opacity:1}.jkl-text-input__input::selection{background-color:var(--jkl-text-input-selection-color)}[data-theme=dark] .jkl-text-input__input::selection{background-color:var(--jkl-text-input-selection-color)}.jkl-text-input__input[aria-invalid=true]{color:var(--jkl-text-input-error-text-color)}.jkl-text-input__input[aria-invalid=true]::placeholder{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-input__input[aria-invalid=true]::selection{background-color:var(--jkl-text-input-error-selection-color)}.jkl-text-input__input[aria-invalid=true]~.jkl-text-input-action-button{color:var(--jkl-color-text-on-alert)}.jkl-text-input__input[aria-invalid=true]~.jkl-text-input-action-button:hover{color:var(--jkl-text-input-error-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input__input[aria-invalid=true]~.jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-error-text-color)}.jkl-text-input__input[aria-invalid=true]~.jkl-text-input__unit{color:var(--jkl-text-input-error-text-color)}.jkl-text-input__input--align-right{text-align:right}.jkl-text-input__unit{color:var(--jkl-text-input-unit-color);padding-block:var(--jkl-text-input-vertical-padding);padding-inline-end:var(--jkl-text-input-horizontal-padding)}.jkl-text-input__action-button{margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input--inline{display:inline-block;margin:-.125rem .25rem;vertical-align:middle}.jkl-text-area{height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:var(--jkl-color);font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-height:var(--jkl-text-input-height);min-height:var(--jkl-text-input-height);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) transparent;transition-duration:.15s;transition-property:height,min-height,max-height,padding;transition-timing-function:ease;width:100%}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{border-style:revert;outline:revert;outline-style:revert}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}.jkl-text-area__text-area::placeholder{color:var(--jkl-text-input-placeholder-color);opacity:1}.jkl-text-area__text-area::selection{background-color:var(--jkl-text-input-selection-color)}[data-theme=dark] .jkl-text-area__text-area::selection{background-color:var(--jkl-text-input-selection-color)}.jkl-text-area__text-area[aria-invalid=true]{color:var(--jkl-text-input-error-text-color)}.jkl-text-area__text-area[aria-invalid=true]::placeholder{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-area__text-area[aria-invalid=true]::selection{background-color:var(--jkl-text-input-error-selection-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button{color:var(--jkl-color-text-on-alert)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button:hover{color:var(--jkl-text-input-error-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-error-text-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input__unit{color:var(--jkl-text-input-error-text-color)}.jkl-text-area .jkl-text-input-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-input-wrapper{max-height:100%}.jkl-text-area--auto-expand .jkl-text-area__text-area{overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper{position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper:focus-within,.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper[data-has-content=true]{padding-bottom:calc(var(--jkl-text-input-height) + .25rem)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{color:var(--jkl-text-area-counter-count-color);font-size:1rem;font-weight:400;line-height:1.5rem;padding:var(--jkl-text-input-padding);--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:transparent;height:.25rem;overflow:hidden;width:100%}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{background-color:var(--jkl-color);content:"";display:block;height:.25rem;transition-duration:.4s;transition-property:width;transition-timing-function:ease;width:var(--progress-width,100%)}.jkl-text-area:has(.jkl-text-area__counter):focus-within .jkl-text-area__counter{opacity:1;transition-delay:.15s}.jkl-text-area:has(.jkl-text-area__counter) [aria-invalid=true]~.jkl-text-area__counter{color:var(--jkl-text-input-error-text-color)}.jkl-text-area--start-open .jkl-text-area__text-area--3-rows,.jkl-text-area__text-area--3-rows:focus,.jkl-text-area__text-area--3-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*3);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--4-rows,.jkl-text-area__text-area--4-rows:focus,.jkl-text-area__text-area--4-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*4);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--5-rows,.jkl-text-area__text-area--5-rows:focus,.jkl-text-area__text-area--5-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*5);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--6-rows,.jkl-text-area__text-area--6-rows:focus,.jkl-text-area__text-area--6-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*6);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--7-rows,.jkl-text-area__text-area--7-rows:focus,.jkl-text-area__text-area--7-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*7);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--8-rows,.jkl-text-area__text-area--8-rows:focus,.jkl-text-area__text-area--8-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*8);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--9-rows,.jkl-text-area__text-area--9-rows:focus,.jkl-text-area__text-area--9-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*9);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--10-rows,.jkl-text-area__text-area--10-rows:focus,.jkl-text-area__text-area--10-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*10);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}

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

@@ -134,7 +134,7 @@ $_text-input-selection-color--inverted: color.scale(
         }
 
         & ~ .jkl-text-input-action-button {
-            color: var(--jkl-text-input-error-placeholder-color);
+            color: var(--jkl-color-text-on-alert);
 
             &:hover {
                 color: var(--jkl-text-input-error-text-color);

package/styles/components/toast/toast.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
 :root,
 [data-layout-density=comfortable],
@@ -195,14 +195,14 @@
 
 .jkl-toast[data-animation=entering],
 .jkl-toast[data-animation=queued] {
-  animation: jkl-entering-uhbc6p6 200ms ease-out forwards;
+  animation: jkl-entering-uetok5c 200ms ease-out forwards;
 }
 
 .jkl-toast[data-animation=exiting] {
-  animation: jkl-exiting-uhbc6q5 150ms ease-in forwards;
+  animation: jkl-exiting-uetok66 150ms ease-in forwards;
 }
 
-@keyframes jkl-entering-uhbc6p6 {
+@keyframes jkl-entering-uetok5c {
   from {
     opacity: 0;
     transform: translate3d(0, 50%, 0);
@@ -212,7 +212,7 @@
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes jkl-exiting-uhbc6q5 {
+@keyframes jkl-exiting-uetok66 {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);

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

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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
 @media screen and (prefers-color-scheme: light) {
   :root {

package/styles/components/tooltip/tooltip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
 .jkl .jkl-tooltip-content,
 .jkl-tooltip-content[data-layout-density=comfortable],

package/styles/core/_color-tokens.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
 
 @use "jkl";
@@ -31,6 +31,7 @@
     --jkl-color-text-interactive: #{jkl.$color-brand-granitt};
     --jkl-color-text-interactive-hover: #{jkl.$color-brand-stein};
     --jkl-color-text-on-alert: #{jkl.$color-brand-granitt};
+    --jkl-color-text-on-alert-subdued: #{jkl.$color-brand-fjellgra};
     --jkl-color-border-action: #{jkl.$color-brand-granitt};
     --jkl-color-border-input: #{jkl.$color-brand-stein};
     --jkl-color-border-input-focus: #{jkl.$color-brand-granitt};
@@ -65,6 +66,7 @@
     --jkl-color-text-interactive: #{jkl.$color-brand-snohvit};
     --jkl-color-text-interactive-hover: #{jkl.$color-brand-svaberg};
     --jkl-color-text-on-alert: #{jkl.$color-brand-granitt};
+    --jkl-color-text-on-alert-subdued: #{jkl.$color-brand-fjellgra};
     --jkl-color-border-action: #{jkl.$color-brand-snohvit};
     --jkl-color-border-input: #{jkl.$color-brand-svaberg};
     --jkl-color-border-input-focus: #{jkl.$color-brand-snohvit};