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

package/styles/components/select/select.css

@@ -9,8 +9,7 @@
     --border-radius: var(--jkl-border-radius-s);
     --min-option-height: min(var(--jkl-unit-60), 3rem);
     /* Vi må trekke fra bredden til rammen for å få riktig høyde */
-    --button-padding: calc(var(--jkl-unit-15) - var(--border-width))
-        calc(0.75em - var(--border-width));
+    --button-padding: calc(var(--jkl-unit-15) - var(--border-width)) calc(0.75em - var(--border-width));
     --option-padding: var(--jkl-unit-05) 0.75em;
     display: block;
     position: relative;
@@ -39,7 +38,7 @@
     outline: none;
   }
   .jkl-select .jkl-tooltip-question-button:focus {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 0;
   }
   .jkl-select select {
@@ -53,7 +52,7 @@
     font-weight: normal;
     font-family: sans-serif;
     color: var(--jkl-color-text-subdued);
-    background-color: var(--jkl-color-background-container-high);
+    background-color: var(--jkl-color-background-container);
   }
   .jkl-select__outer-wrapper {
     position: relative;
@@ -74,7 +73,7 @@
     cursor: pointer;
     height: var(--jkl-select-input-height);
     border-radius: var(--border-radius);
-    border: var(--border-width) solid var(--jkl-color-border-input);
+    border: var(--border-width) solid var(--jkl-color-border-default);
     box-shadow: 0 0 0 0.0625rem transparent;
     text-align: left;
     width: 100%;
@@ -90,8 +89,8 @@
     color: var(--jkl-color-text-default);
   }
   .jkl-select__search-input:hover, .jkl-select__button:hover {
-    border-color: var(--jkl-color-border-input-focus);
-    box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
+    border-color: var(--jkl-color-border-strong);
+    box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-strong);
   }
   .jkl-select__search-input:hover ~ .jkl-select__arrow, .jkl-select__button:hover ~ .jkl-select__arrow {
     transform: translateY(calc(-50% + 0.1875rem));
@@ -100,12 +99,12 @@
     outline: none;
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:has(:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:has(:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__button,
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__search-input {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-select__arrow {
@@ -130,7 +129,7 @@
     }
   }
   .jkl-select:has([aria-invalid=true]) .jkl-select__arrow {
-    color: var(--jkl-color-text-on-alert);
+    color: var(--jkl-color-error-text-default);
   }
   .jkl-select__options-menu {
     position: absolute;
@@ -138,8 +137,8 @@
     right: -0.0625rem;
     top: 100%;
     z-index: 7000;
-    background-color: var(--jkl-color-background-container-high);
-    border: 0.125rem solid var(--jkl-color-border-input-focus);
+    background-color: var(--jkl-color-background-container);
+    border: 0.125rem solid var(--jkl-color-border-strong);
     border-top: none;
     border-radius: 0 0 var(--border-radius) var(--border-radius);
     box-sizing: border-box;
@@ -175,7 +174,7 @@
   }
   .jkl-select__option:focus, :not([data-focus=controlled]) > .jkl-select__option:hover {
     color: var(--jkl-color-text-default);
-    background-color: var(--jkl-color-background-interactive-hover);
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
   }
   .jkl-select__option-description {
     color: var(--jkl-color-text-subdued);
@@ -196,9 +195,9 @@
   .jkl-select--open .jkl-select__button {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    border-color: var(--jkl-color-border-input-focus);
-    background-color: var(--jkl-color-background-container-high);
-    box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
+    border-color: var(--jkl-color-border-strong);
+    background-color: var(--jkl-color-background-container);
+    box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-strong);
   }
   .jkl-select--open .jkl-select__search-input:hover ~ .jkl-select__arrow,
   .jkl-select--open .jkl-select__button:hover ~ .jkl-select__arrow {
@@ -206,8 +205,8 @@
   }
   .jkl-select--invalid .jkl-select__search-input,
   .jkl-select--invalid .jkl-select__button {
-    background-color: var(--jkl-color-background-alert-error);
-    color: var(--jkl-color-text-on-alert-subdued);
+    background-color: var(--jkl-color-error-background-container);
+    color: var(--jkl-color-error-text-subdued);
   }
   .jkl-select--invalid .jkl-select__search-input--active-value,
   .jkl-select--invalid .jkl-select__button--active-value {

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-select{--jkl-select-arrow-right:var(--jkl-unit-05);--border-width:0.0625rem;--border-radius:var(--jkl-border-radius-s);--min-option-height:min(var(--jkl-unit-60),3rem);--button-padding:calc(var(--jkl-unit-15) - var(--border-width)) calc(0.75em - var(--border-width));--option-padding:var(--jkl-unit-05) 0.75em;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-visible{outline:none}.jkl-select .jkl-tooltip-question-button:focus{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-select select{-webkit-appearance:none;appearance: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)}.jkl-select__button,.jkl-select__search-input{background-color:transparent;border:var(--border-width) solid var(--jkl-color-border-input);border-radius:var(--border-radius);box-shadow:0 0 0 .0625rem transparent;color:var(--jkl-color-text-subdued);cursor:pointer;height:var(--jkl-select-input-height);overflow:hidden;padding:var(--button-padding);text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;-webkit-padding-end:2.05em;font:var(--jkl-text-style-text-medium);padding-inline-end:2.05em;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,border-color,box-shadow;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-select__button--active-value,.jkl-select__search-input--active-value{color:var(--jkl-color-text-default)}.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:focus-visible,.jkl-select__search-input:focus-visible{outline:none}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:has(:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__button,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__search-input{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-select__arrow{color:var(--jkl-color-text-default);pointer-events:none;position:absolute;right:.75em;top:50%;transform:translateY(-50%);transition-duration:var(--jkl-motion-timing-productive);transition-property:transform,color;transition-timing-function:var(--jkl-motion-easing-standard)}@media screen and (forced-colors:active){.jkl-select__arrow,.jkl-select__arrow path,.jkl-select__arrow svg{fill:CanvasText;stroke:CanvasText}}.jkl-select: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 var(--border-radius) var(--border-radius);border-top:none;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-select-max-shown-options, 5) + .5)*var(--min-option-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:var(--jkl-motion-timing-productive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);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:var(--jkl-text-style-text-medium);min-height:var(--min-option-height);padding:var(--option-padding);position:relative;text-align:left;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,background-color;transition-timing-function:var(--jkl-motion-easing-standard);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:var(--jkl-text-style-text-small);width:100%}.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:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}}}
+@layer jokul.components{.jkl-select{--jkl-select-arrow-right:var(--jkl-unit-05);--border-width:0.0625rem;--border-radius:var(--jkl-border-radius-s);--min-option-height:min(var(--jkl-unit-60),3rem);--button-padding:calc(var(--jkl-unit-15) - var(--border-width)) calc(0.75em - var(--border-width));--option-padding:var(--jkl-unit-05) 0.75em;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-visible{outline:none}.jkl-select .jkl-tooltip-question-button:focus{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-select select{-webkit-appearance:none;appearance: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);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)}.jkl-select__button,.jkl-select__search-input{background-color:transparent;border:var(--border-width) solid var(--jkl-color-border-default);border-radius:var(--border-radius);box-shadow:0 0 0 .0625rem transparent;color:var(--jkl-color-text-subdued);cursor:pointer;height:var(--jkl-select-input-height);overflow:hidden;padding:var(--button-padding);text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;-webkit-padding-end:2.05em;font:var(--jkl-text-style-text-medium);padding-inline-end:2.05em;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,border-color,box-shadow;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-select__button--active-value,.jkl-select__search-input--active-value{color:var(--jkl-color-text-default)}.jkl-select__button:hover,.jkl-select__search-input:hover{border-color:var(--jkl-color-border-strong);box-shadow:0 0 0 .0625rem var(--jkl-color-border-strong)}.jkl-select__button:hover~.jkl-select__arrow,.jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-select__button:focus-visible,.jkl-select__search-input:focus-visible{outline:none}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:has(:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__button,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__search-input{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-select__arrow{color:var(--jkl-color-text-default);pointer-events:none;position:absolute;right:.75em;top:50%;transform:translateY(-50%);transition-duration:var(--jkl-motion-timing-productive);transition-property:transform,color;transition-timing-function:var(--jkl-motion-easing-standard)}@media screen and (forced-colors:active){.jkl-select__arrow,.jkl-select__arrow path,.jkl-select__arrow svg{fill:CanvasText;stroke:CanvasText}}.jkl-select:has([aria-invalid=true]) .jkl-select__arrow{color:var(--jkl-color-error-text-default)}.jkl-select__options-menu{background-color:var(--jkl-color-background-container);border:.125rem solid var(--jkl-color-border-strong);border-radius:0 0 var(--border-radius) var(--border-radius);border-top:none;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-select-max-shown-options, 5) + .5)*var(--min-option-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:var(--jkl-motion-timing-productive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);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:var(--jkl-text-style-text-medium);min-height:var(--min-option-height);padding:var(--option-padding);position:relative;text-align:left;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,background-color;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-select__option:focus,:not([data-focus=controlled])>.jkl-select__option:hover{background-color:color-mix(in srgb,currentColor 10%,transparent);color:var(--jkl-color-text-default)}.jkl-select__option-description{color:var(--jkl-color-text-subdued);display:block;font:var(--jkl-text-style-text-small);width:100%}.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);border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--jkl-color-border-strong);box-shadow:0 0 0 .0625rem var(--jkl-color-border-strong)}.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-error-background-container);color:var(--jkl-color-error-text-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:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}}}

package/styles/components/select/select.scss

@@ -11,8 +11,7 @@
         --min-option-height: min(var(--jkl-unit-60), 3rem);
 
         /* Vi må trekke fra bredden til rammen for å få riktig høyde */
-        --button-padding: calc(var(--jkl-unit-15) - var(--border-width))
-            calc(0.75em - var(--border-width));
+        --button-padding: calc(var(--jkl-unit-15) - var(--border-width)) calc(0.75em - var(--border-width));
         --option-padding: var(--jkl-unit-05) 0.75em;
 
         display: block;
@@ -31,16 +30,16 @@
         & select {
             appearance: none;
 
-        &:-moz-focusring {
-            color: transparent;
-            text-shadow: 0 0 0 var(--jkl-color-text-subdued);
-        }
+            &:-moz-focusring {
+                color: transparent;
+                text-shadow: 0 0 0 var(--jkl-color-text-subdued);
+            }
 
             & option {
                 font-weight: normal;
                 font-family: sans-serif;
                 color: var(--jkl-color-text-subdued);
-                background-color: var(--jkl-color-background-container-high);
+                background-color: var(--jkl-color-background-container);
             }
         }
 
@@ -67,7 +66,7 @@
 
             height: var(--jkl-select-input-height);
             border-radius: var(--border-radius);
-            border: var(--border-width) solid var(--jkl-color-border-input);
+            border: var(--border-width) solid var(--jkl-color-border-default);
             box-shadow: 0 0 0 jkl.rem(1px) transparent;
             text-align: left;
             width: 100%;
@@ -87,9 +86,8 @@
             }
 
             &:hover {
-                border-color: var(--jkl-color-border-input-focus);
-                box-shadow: 0 0 0 jkl.rem(1px)
-                    var(--jkl-color-border-input-focus);
+                border-color: var(--jkl-color-border-strong);
+                box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-strong);
 
                 & ~ .jkl-select__arrow {
                     transform: translateY(calc(-50% + #{jkl.rem(3px)}));
@@ -129,13 +127,11 @@
             transition-property: transform, color;
 
             @include jkl.motion;
-            @include jkl.forced-colors-svg-fallback(
-                $stroke: CanvasText,
-                $fill: CanvasText
-            );
+            @include jkl.forced-colors-svg-fallback($stroke: CanvasText,
+                $fill: CanvasText);
 
             .jkl-select:has([aria-invalid="true"]) & {
-                color: var(--jkl-color-text-on-alert);
+                color: var(--jkl-color-error-text-default);
             }
         }
 
@@ -146,18 +142,15 @@
             top: 100%;
             z-index: jkl.$z-index--dropdown;
 
-            background-color: var(--jkl-color-background-container-high);
-            border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
+            background-color: var(--jkl-color-background-container);
+            border: jkl.rem(2px) solid var(--jkl-color-border-strong);
             border-top: none;
             border-radius: 0 0 var(--border-radius) var(--border-radius);
             box-sizing: border-box;
 
             overflow-y: auto;
             // Sett makshøyde på listen til høyden av (maxShownOptions + 0.5) ganger høyden på ett enlinjes valg
-            max-height: calc(
-                calc(var(--jkl-select-max-shown-options, 5) + 0.5) *
-                    var(--min-option-height)
-            );
+            max-height: calc(calc(var(--jkl-select-max-shown-options, 5) + 0.5) * var(--min-option-height));
 
             transition-property: height;
 
@@ -193,7 +186,9 @@
             &:focus,
             :not([data-focus="controlled"]) > &:hover {
                 color: var(--jkl-color-text-default);
-                background-color: var(--jkl-color-background-interactive-hover);
+                background-color: color-mix(in srgb,
+                        currentColor 10%,
+                        transparent);
             }
 
             &-description {
@@ -219,10 +214,9 @@
             .jkl-select__button {
                 border-bottom-left-radius: 0;
                 border-bottom-right-radius: 0;
-                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);
+                border-color: var(--jkl-color-border-strong);
+                background-color: var(--jkl-color-background-container);
+                box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-strong);
 
                 &:hover ~ .jkl-select__arrow {
                     transform: translateY(calc(-50% + #{jkl.rem(-3px)}));
@@ -233,8 +227,8 @@
         &--invalid {
             .jkl-select__search-input,
             .jkl-select__button {
-                background-color: var(--jkl-color-background-alert-error);
-                color: var(--jkl-color-text-on-alert-subdued);
+                background-color: var(--jkl-color-error-background-container);
+                color: var(--jkl-color-error-text-subdued);
 
                 &--active-value {
                     color: revert;
@@ -243,6 +237,7 @@
         }
 
         @include jkl.forced-colors-mode {
+
             // Vi er en button (hvis ikke native) og får ButtonText, men vi later som vi er en select, og den har CanvasText
             & .jkl-select__button,
             & .jkl-select__search-input {

package/styles/components/summary-table/development/summary-table-example.scss

@@ -1,4 +1,4 @@
-@use "../../jkl";
+@use "../../../jkl";
 
 .summary-table-example {
     max-width: 500px;

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

@@ -32,8 +32,8 @@
     font-weight: var(--jkl-font-weight-normal);
   }
   .jkl-summary-table > tfoot {
-    border-top: 0.0625rem solid var(--jkl-color-border-separator-strong);
-    border-bottom: 0.0625rem solid var(--jkl-color-border-separator-strong);
+    border-top: 0.0625rem solid var(--jkl-color-border-strong);
+    border-bottom: 0.0625rem solid var(--jkl-color-border-strong);
     padding-top: var(--jkl-unit-10);
   }
   .jkl-summary-table > tfoot th,

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-summary-table{display:flex;flex-direction:column;font:var(--jkl-text-style-text-medium);overflow-wrap:anywhere;width:100%}.jkl-summary-table tr{display:flex;justify-content:space-between;padding-bottom:var(--jkl-unit-10)}.jkl-summary-table td,.jkl-summary-table th{flex-basis:50%;padding-right:var(--jkl-unit-20)}.jkl-summary-table td:first-child,.jkl-summary-table th:first-child{text-align:left}.jkl-summary-table td:last-child,.jkl-summary-table th:last-child{padding-right:0;text-align:right}.jkl-summary-table>tbody th{font-weight:var(--jkl-font-weight-normal)}.jkl-summary-table>tfoot{border-bottom:.0625rem solid var(--jkl-color-border-separator-strong);border-top:.0625rem solid var(--jkl-color-border-separator-strong);padding-top:var(--jkl-unit-10)}.jkl-summary-table>tfoot td,.jkl-summary-table>tfoot th{font-weight:var(--jkl-font-weight-bold)}}
+@layer jokul.components{.jkl-summary-table{display:flex;flex-direction:column;font:var(--jkl-text-style-text-medium);overflow-wrap:anywhere;width:100%}.jkl-summary-table tr{display:flex;justify-content:space-between;padding-bottom:var(--jkl-unit-10)}.jkl-summary-table td,.jkl-summary-table th{flex-basis:50%;padding-right:var(--jkl-unit-20)}.jkl-summary-table td:first-child,.jkl-summary-table th:first-child{text-align:left}.jkl-summary-table td:last-child,.jkl-summary-table th:last-child{padding-right:0;text-align:right}.jkl-summary-table>tbody th{font-weight:var(--jkl-font-weight-normal)}.jkl-summary-table>tfoot{border-bottom:.0625rem solid var(--jkl-color-border-strong);border-top:.0625rem solid var(--jkl-color-border-strong);padding-top:var(--jkl-unit-10)}.jkl-summary-table>tfoot td,.jkl-summary-table>tfoot th{font-weight:var(--jkl-font-weight-bold)}}

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

@@ -39,9 +39,9 @@
 
         & > tfoot {
             border-top: jkl.rem(1px) solid
-                var(--jkl-color-border-separator-strong);
+                var(--jkl-color-border-strong);
             border-bottom: jkl.rem(1px) solid
-                var(--jkl-color-border-separator-strong);
+                var(--jkl-color-border-strong);
             padding-top: var(--jkl-unit-10);
 
             th,

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

@@ -7,14 +7,16 @@
     --jkl-system-message-icon-padding: 0.1875rem 0 0 0;
     --jkl-system-message-content-padding: var(--jkl-unit-30);
     --jkl-system-message-dismiss-button-size: var(--jkl-unit-40);
-    --jkl-system-message-dismiss-button-margin: -0.40625rem -1.125rem -0.40625rem
-        auto;
-    --jkl-system-message-message-margin: 0 var(--jkl-spacing-20);
-    --background-color: var(--jkl-color-background-alert-neutral);
-    --text-color: var(--jkl-color-text-on-alert);
+    --jkl-system-message-dismiss-button-margin: -0.40625rem
+    -1.125rem -0.40625rem auto;
+    --jkl-system-message-message-margin: 0 var(--jkl-unit-20);
+    --background-color: var(--jkl-color-background-container);
+    --text-color: var(--jkl-color-text-default);
+    --border-color: var(--jkl-color-border-subdued);
     width: 100%;
     background-color: var(--background-color);
     color: var(--text-color);
+    border: 1px solid var(--border-color);
     transition-behavior: allow-discrete;
     box-sizing: border-box;
   }
@@ -99,7 +101,7 @@
     }
   }
   .jkl-system-message__dismiss-button:hover {
-    color: var(--jkl-color-text-interactive-hover);
+    color: var(--jkl-color-text-subdued);
   }
   @media screen and (forced-colors: active) {
     .jkl-system-message__dismiss-button:hover {
@@ -110,7 +112,7 @@
     }
   }
   .jkl-system-message__dismiss-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   @media screen and (forced-colors: active) {
@@ -123,20 +125,28 @@
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u297jx9 var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uotvg97 var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
-    --background-color: var(--jkl-color-background-alert-info);
+    --background-color: var(--jkl-color-info-background-container);
+    --text-color: var(--jkl-color-info-text-default);
+    --border-color: var(--jkl-color-info-border-subdued);
   }
   .jkl-system-message--warning {
-    --background-color: var(--jkl-color-background-alert-warning);
+    --background-color: var(--jkl-color-warning-background-container);
+    --text-color: var(--jkl-color-warning-text-default);
+    --border-color: var(--jkl-color-warning-border-subdued);
   }
   .jkl-system-message--error {
-    --background-color: var(--jkl-color-background-alert-error);
+    --background-color: var(--jkl-color-error-background-container);
+    --text-color: var(--jkl-color-error-text-default);
+    --border-color: var(--jkl-color-error-border-subdued);
   }
   .jkl-system-message--success {
-    --background-color: var(--jkl-color-background-alert-success);
+    --background-color: var(--jkl-color-success-background-container);
+    --text-color: var(--jkl-color-success-text-default);
+    --border-color: var(--jkl-color-success-border-subdued);
   }
   @media screen and (forced-colors: active) {
     .jkl-system-message {
@@ -153,7 +163,7 @@
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u297jx9 {
+  @keyframes jkl-dismiss-uotvg97 {
     from {
       opacity: 1;
       transform: translateY(0);

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-system-message{--jkl-system-message-icon-height:var(--jkl-unit-30);--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-spacing-20);--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);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font:var(--jkl-text-style-text-medium);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-u297jx9 var(--jkl-motion-timing-lazy) forwards;transition:block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy)}.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-u297jx9{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}
+@layer jokul.components{.jkl-system-message{--jkl-system-message-icon-height:var(--jkl-unit-30);--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-unit-20);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-subdued);background-color:var(--background-color);border:1px solid var(--border-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font:var(--jkl-text-style-text-medium);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-uotvg97 var(--jkl-motion-timing-lazy) forwards;transition:block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy)}.jkl-system-message--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-system-message--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-system-message--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-system-message--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}@media screen and (forced-colors:active){.jkl-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-uotvg97{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}