@fremtind/jokul 0.27.6 → 0.28.1

package/styles/components/select/select.css

@@ -1,85 +1,34 @@
 @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
  */
-@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: #ffffff;
-    --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, 0.2);
-    --jkl-select-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
-    --jkl-select-arrow-color: #1b1917;
-  }
+.jkl-select {
+  display: block;
+  position: relative;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+  /* --------
+     VARIANTS
+     -------- */
+}
+.jkl-select:active, .jkl-select:hover, .jkl-select:focus {
+  outline: 0;
+  outline-style: none;
 }
-[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: #ffffff;
-  --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, 0.2);
-  --jkl-select-search-input-error-selection-color: rgba(27, 25, 23, 0.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: rgba(249, 249, 249, 0.25);
-    --jkl-select-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
-    --jkl-select-arrow-color: #f9f9f9;
+@media screen and (forced-colors: active) {
+  .jkl-select {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-select:active, .jkl-select:hover, .jkl-select:focus {
+    outline: revert;
+    outline-style: revert;
   }
 }
-[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: rgba(249, 249, 249, 0.25);
-  --jkl-select-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
-  --jkl-select-arrow-color: #f9f9f9;
-}
-
-:root,
-[data-layout-density=comfortable],
-[data-density=comfortable] {
+.jkl .jkl-select, .jkl-select[data-layout-density=comfortable], .jkl-select[data-density=comfortable], [data-layout-density=comfortable] .jkl-select, [data-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
@@ -92,15 +41,11 @@
   --jkl-select-font-weight: var(--jkl-body-font-weight);
 }
 @media (width >= 0) and (max-width: 679px) {
-  :root,
-  [data-layout-density=comfortable],
-  [data-density=comfortable] {
+  .jkl .jkl-select, .jkl-select[data-layout-density=comfortable], .jkl-select[data-density=comfortable], [data-layout-density=comfortable] .jkl-select, [data-density=comfortable] .jkl-select {
     --jkl-select-input-height: 2.75rem;
   }
 }
-
-[data-layout-density=compact],
-[data-density=compact] {
+.jkl-select[data-layout-density=compact], .jkl-select[data-density=compact], [data-layout-density=compact] .jkl-select, [data-density=compact] .jkl-select {
   --jkl-select-input-height: 2rem;
   --jkl-select-arrow-right: 0.25rem;
   --jkl-select-button-padding: 0.25rem 2rem 0.25rem
@@ -113,32 +58,6 @@
   --jkl-select-line-height: var(--jkl-small-line-height);
   --jkl-select-font-weight: var(--jkl-small-font-weight);
 }
-
-.jkl-select {
-  display: block;
-  position: relative;
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-  /* --------
-     VARIANTS
-     -------- */
-}
-.jkl-select:active, .jkl-select:hover, .jkl-select:focus {
-  outline: 0;
-  outline-style: none;
-}
-@media screen and (forced-colors: active) {
-  .jkl-select {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
-  }
-  .jkl-select:active, .jkl-select:hover, .jkl-select:focus {
-    outline: revert;
-    outline-style: revert;
-  }
-}
 .jkl-select *:focus {
   outline: none;
 }
@@ -150,16 +69,13 @@
 }
 .jkl-select select:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 var(--jkl-select-text-color);
+  text-shadow: 0 0 0 var(--jkl-color-text-subdued);
 }
 .jkl-select select option {
   font-weight: normal;
   font-family: sans-serif;
-  color: var(--jkl-select-text-color);
-  background-color: var(--jkl-select-open-background-color);
-}
-.jkl-select select option:disabled {
-  color: var(--jkl-select-text-disabled-color);
+  color: var(--jkl-color-text-subdued);
+  background-color: var(--jkl-color-background-container-high);
 }
 .jkl-select__outer-wrapper {
   position: relative;
@@ -170,24 +86,21 @@
 .jkl-select__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);
 }
 .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);
+  background-color: color-mix(in oklab, var(--jkl-color-text-subdued) 25%, var(--jkl-color-background-container) 15%);
 }
 .jkl-select__search-input, .jkl-select__button {
   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: 0.1875rem;
-  border: 0.0625rem solid var(--jkl-select-border-color);
+  border: 0.0625rem solid var(--jkl-color-border-input);
   box-shadow: 0 0 0 0.0625rem transparent;
   text-align: left;
   width: 100%;
@@ -199,17 +112,17 @@
   font-weight: var(--jkl-select-font-weight);
 }
 .jkl-select__search-input--active-value, .jkl-select__button--active-value {
-  color: var(--jkl-select-text-active-value-color);
+  color: var(--jkl-color-text-default);
 }
 .jkl-select__search-input:focus, .jkl-select__button:focus {
-  border-color: var(--jkl-select-focus-color);
-  color: var(--jkl-select-focus-color);
-  box-shadow: 0 0 0 0.0625rem 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 0.0625rem var(--jkl-color-border-input-focus);
+  background-color: var(--jkl-color-background-container-high);
 }
 .jkl-select__search-input:hover, .jkl-select__button:hover {
-  border-color: var(--jkl-select-focus-color);
-  box-shadow: 0 0 0 0.0625rem var(--jkl-select-focus-color);
+  border-color: var(--jkl-color-border-input-focus);
+  box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
 }
 .jkl-select__search-input:hover ~ .jkl-select__arrow, .jkl-select__button:hover ~ .jkl-select__arrow {
   transform: translateY(calc(-50% + 0.1875rem));
@@ -225,7 +138,7 @@
   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;
   transition-timing-function: ease;
@@ -241,14 +154,17 @@
     fill: CanvasText;
   }
 }
+:has([aria-invalid=true]) .jkl-select__arrow {
+  color: var(--jkl-color-text-on-alert);
+}
 .jkl-select__options-menu {
   position: absolute;
   left: -0.0625rem;
   right: -0.0625rem;
   top: 100%;
   z-index: 7000;
-  background-color: var(--jkl-select-open-background-color);
-  border: 0.125rem solid var(--jkl-select-focus-color);
+  background-color: var(--jkl-color-background-container-high);
+  border: 0.125rem solid var(--jkl-color-border-input-focus);
   border-top: none;
   border-radius: 0 0 0.1875rem 0.1875rem;
   box-sizing: border-box;
@@ -285,11 +201,11 @@
   markeres ved hover som normalt. */
 }
 .jkl-select__option:focus, :not([data-focus=controlled]) > .jkl-select__option: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);
 }
 .jkl-select__option-description {
-  color: var(--jkl-select-option-description-color);
+  color: var(--jkl-color-text-subdued);
   display: block;
   width: 100%;
   font-size: 1rem;
@@ -307,29 +223,23 @@
 .jkl-select--open .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 0.0625rem 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 0.0625rem var(--jkl-color-border-input-focus);
 }
 .jkl-select--open .jkl-select__search-input:hover ~ .jkl-select__arrow,
 .jkl-select--open .jkl-select__button:hover ~ .jkl-select__arrow {
   transform: translateY(calc(-50% + -0.1875rem));
 }
-.jkl-select--invalid {
-  /* Color of text selection */
-}
 .jkl-select--invalid .jkl-select__search-input,
 .jkl-select--invalid .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);
 }
 .jkl-select--invalid .jkl-select__search-input--active-value,
 .jkl-select--invalid .jkl-select__button--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 {
     color: CanvasText;

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 {