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

package/styles/components/checkbox-panel/checkbox-panel.css

@@ -3,7 +3,7 @@
  */
 @layer jokul.components {
   .jkl-input-panel {
-    --outer-border-color: var(--jkl-color-border-input);
+    --outer-border-color: var(--jkl-color-border-default);
     --outer-border-thickness: 0.0625rem;
     --background-color: transparent;
     --padding-inline: var(--jkl-unit-25);
@@ -13,8 +13,8 @@
     display: flex;
     flex-direction: column;
     interpolate-size: allow-keywords;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: box-shadow;
   }
   .jkl-input-panel__header {
@@ -26,28 +26,27 @@
     position: relative;
     padding: var(--jkl-unit-20) var(--padding-inline);
   }
-  .jkl-input-panel__header__amount {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
-  }
-  .jkl-input-panel__header label,
   .jkl-input-panel__header .jkl-radio-button,
   .jkl-input-panel__header .jkl-checkbox {
-    position: unset;
+    grid-column: 1/-1;
+    grid-row: 1;
+    inline-size: 100%;
   }
-  .jkl-input-panel__header label::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
+  .jkl-input-panel__header label {
     inline-size: 100%;
-    block-size: 100%;
+  }
+  .jkl-input-panel__header__amount {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: end;
+    pointer-events: none;
+    position: relative;
+    z-index: 1;
+    font: var(--jkl-text-style-text-medium);
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-input-panel__description {
     height: 0;
@@ -55,57 +54,33 @@
     padding-inline: var(--padding-inline);
     padding-block-end: var(--jkl-spacing-none);
     line-height: initial;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-paragraph-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: height;
   }
   .jkl-input-panel:has(:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-input-panel:has(:checked), .jkl-input-panel[data-always-open=true], .jkl-input-panel:not([data-always-open]) {
-    --background-color: var(--jkl-color-background-container-high);
+    --background-color: var(--jkl-color-background-container);
   }
   .jkl-input-panel:has(:checked) .jkl-input-panel__description, .jkl-input-panel[data-always-open=true] .jkl-input-panel__description, .jkl-input-panel:not([data-always-open]) .jkl-input-panel__description {
     height: auto;
     padding-block-end: var(--jkl-unit-20);
   }
   .jkl-input-panel:has(input:hover) {
-    --outer-border-color: var(--jkl-color-border-separator-hover);
+    --outer-border-color: var(--jkl-color-border-strong);
     --outer-border-thickness: 0.125rem;
     cursor: pointer;
   }
 }
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-checkbox-error-color: #ab2e43;
-    }
-  }
-  [data-theme=light] {
-    --jkl-checkbox-error-color: #ab2e43;
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-checkbox-error-color: #d79ba5;
-    }
-  }
-  [data-theme=dark] {
-    --jkl-checkbox-error-color: #d79ba5;
-  }
   .jkl-checkbox {
-    --box-color: var(--jkl-color-border-action);
-    --check-color: var(--jkl-color-border-action);
     --text-color: var(--jkl-color-text-default);
     --background-color: transparent;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
     display: flex;
     flex-wrap: wrap;
     color: var(--text-color);
@@ -113,51 +88,79 @@
   }
   .jkl-checkbox__input {
     position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    inset: 0 auto 0 0;
-    width: 1lh;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    block-size: 1lh;
+    inline-size: 1lh;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    z-index: 1;
+    appearance: none;
+    background: transparent;
+    border: 0;
+  }
+  .jkl-checkbox__input {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-checkbox__input:active, .jkl-checkbox__input:hover, .jkl-checkbox__input:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox__input {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-checkbox__input:active, .jkl-checkbox__input:hover, .jkl-checkbox__input:focus {
+      outline: revert;
+      outline-style: revert;
+    }
   }
   .jkl-checkbox__label {
     cursor: pointer;
     display: flex;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-  }
-  .jkl-checkbox__label:hover, .jkl-checkbox__label:active {
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-checkbox__label::before {
     content: "check_box_outline_blank";
     margin-inline-end: 0.25em;
-    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+    font-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
     font-size: 1.3em;
-    font-weight: var(--jkl-icon-weight, 300);
+    font-weight: 400;
     line-height: 1;
     display: inline-block;
     -webkit-font-smoothing: antialiased;
-    transition-timing-function: ease;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: font-variation-settings, transform;
   }
-  .jkl-checkbox__label:has(+ :checked)::before {
+  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-checkbox__input:is(:hover, :active) + .jkl-checkbox__label, .jkl-checkbox__label:hover, .jkl-checkbox__label:active {
+    --jkl-icon-weight: var(--jkl-font-weight-bold);
+  }
+  .jkl-checkbox__input:checked + .jkl-checkbox__label::before {
     content: "check_box";
     --jkl-icon-fill: 1;
   }
-  .jkl-checkbox__label:has(+ :indeterminate:not(:checked))::before {
+  .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label::before {
     content: "indeterminate_check_box";
     --jkl-icon-fill: 1;
   }
-  .jkl-checkbox__label:has(+ [aria-invalid=true])::before {
-    color: var(--jkl-checkbox-error-color);
+  .jkl-checkbox__input[aria-invalid=true] + .jkl-checkbox__label::before {
+    color: var(--jkl-color-error-background-contrast);
   }
   .jkl-checkbox + .jkl-checkbox {
     margin-top: 0.75em;
@@ -174,4 +177,7 @@
     /* Visuell justering ettersom ikonet ikke fyller bounding box helt */
     margin-inline-start: -0.1em;
   }
+  .jkl-checkbox-panel .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
+    outline: none;
+  }
 }

package/styles/components/checkbox-panel/checkbox-panel.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:transparent;--padding-inline:var(--jkl-unit-25);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:.15s;transition-property:box-shadow;transition-timing-function:ease}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-unit-20) var(--padding-inline);position:relative}.jkl-input-panel__header__amount{align-items:center;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;height:100%;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;font-weight:700}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button,.jkl-input-panel__header label{position:unset}.jkl-input-panel__header label:after{block-size:100%;content:"";inline-size:100%;left:0;position:absolute;top:0}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-spacing-none);font-size:var(--jkl-font-size-3);font-weight:400;line-height:normal;line-height:var(--jkl-line-height-relaxed);padding-block-end:var(--jkl-spacing-none);--jkl-icon-weight:300;transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked),.jkl-input-panel:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:has(:checked) .jkl-input-panel__description,.jkl-input-panel:not([data-always-open]) .jkl-input-panel__description,.jkl-input-panel[data-always-open=true] .jkl-input-panel__description{height:auto;-webkit-padding-after:var(--jkl-unit-20);padding-block-end:var(--jkl-unit-20)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-checkbox-error-color:#ab2e43}}[data-theme=light]{--jkl-checkbox-error-color:#ab2e43}@media screen and (prefers-color-scheme:dark){:root{--jkl-checkbox-error-color:#d79ba5}}[data-theme=dark]{--jkl-checkbox-error-color:#d79ba5}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:transparent;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--text-color);display:flex;flex-wrap:wrap;position:relative}.jkl-checkbox__input{inset:0 auto 0 0;opacity:0;pointer-events:none;position:absolute;width:1lh}.jkl-checkbox__label{cursor:pointer;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);transition-duration:.15s;transition-property:color;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:400}.jkl-checkbox__label:before{content:"check_box_outline_blank";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-checkbox__label:has(+:checked):before{content:"check_box";--jkl-icon-fill:1}.jkl-checkbox__label:has(+:indeterminate:not(:checked)):before{content:"indeterminate_check_box";--jkl-icon-fill:1}.jkl-checkbox__label:has(+[aria-invalid=true]):before{color:var(--jkl-checkbox-error-color)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}}@layer jokul.components{.jkl-checkbox-panel .jkl-checkbox{-webkit-margin-start:-.1em;margin-inline-start:-.1em}}
+@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-default);--outer-border-thickness:0.0625rem;--background-color:transparent;--padding-inline:var(--jkl-unit-25);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:var(--jkl-motion-timing-productive);transition-property:box-shadow;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-unit-20) var(--padding-inline);position:relative}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button{grid-column:1/-1;grid-row:1;inline-size:100%}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header__amount{align-items:center;display:flex;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);grid-column:2;grid-row:1;height:100%;justify-self:end;pointer-events:none;position:relative;z-index:1}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-spacing-none);line-height:normal;font:var(--jkl-text-style-paragraph-medium);padding-block-end:var(--jkl-spacing-none);transition-duration:var(--jkl-motion-timing-productive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-input-panel:has(:checked),.jkl-input-panel:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container)}.jkl-input-panel:has(:checked) .jkl-input-panel__description,.jkl-input-panel:not([data-always-open]) .jkl-input-panel__description,.jkl-input-panel[data-always-open=true] .jkl-input-panel__description{height:auto;-webkit-padding-after:var(--jkl-unit-20);padding-block-end:var(--jkl-unit-20)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-strong);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{.jkl-checkbox{--text-color:var(--jkl-color-text-default);--background-color:transparent;color:var(--text-color);display:flex;flex-wrap:wrap;font:var(--jkl-text-style-text-medium);position:relative}.jkl-checkbox__input{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-checkbox__input{border-style:revert;outline:revert;outline-style:revert}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{cursor:pointer;display:flex;font:var(--jkl-text-style-text-medium);transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__label:before{content:"check_box_outline_blank";-webkit-margin-end:.25em;display:inline-block;font-family:Jokul Icons,Jokul Icons Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-checkbox__input:is(:hover,:active)+.jkl-checkbox__label,.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-checkbox__input:checked+.jkl-checkbox__label:before{content:"check_box";--jkl-icon-fill:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label:before{content:"indeterminate_check_box";--jkl-icon-fill:1}.jkl-checkbox__input[aria-invalid=true]+.jkl-checkbox__label:before{color:var(--jkl-color-error-background-contrast)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}}@layer jokul.components{.jkl-checkbox-panel .jkl-checkbox{-webkit-margin-start:-.1em;margin-inline-start:-.1em}.jkl-checkbox-panel .jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:none}}

package/styles/components/checkbox-panel/checkbox-panel.scss

@@ -1,7 +1,7 @@
 @use "sass:string";
 @use "../input-panel/input-panel";
 @use "../checkbox/checkbox";
-@use "../../core/jkl";
+@use "../../jkl";
 
 $_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id()};
 
@@ -10,4 +10,8 @@ $_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id()};
         /* Visuell justering ettersom ikonet ikke fyller bounding box helt */
         margin-inline-start: -0.1em;
     }
+
+    .jkl-checkbox-panel .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
+        outline: none;
+    }
 }

package/styles/components/checkbox-panel/development/styles.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl/" as jkl;
+@use "../../../jkl" as jkl;
 
 .input-panel-example {
     &__season-tag {

package/styles/components/chip/chip.css

@@ -7,14 +7,11 @@
   --height: var(--jkl-unit-40);
   --gap: var(--jkl-unit-05);
   --text-color: var(--jkl-color-text-default);
-  --border-color: var(--jkl-color-border-separator);
-  --background-color: transparent;
+  --border-color: var(--jkl-color-border-subdued);
+  --background-color: var(--jkl-color-background-container);
   --border-width: 0.0625rem;
-  font-size: var(--jkl-font-size-2);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  font-weight: 700;
+  font: var(--jkl-text-style-text-small);
+  font-weight: var(--jkl-font-weight-bold);
   cursor: pointer;
   position: relative;
   background-color: var(--background-color);
@@ -42,21 +39,21 @@
   inset: 0;
   border-radius: inherit;
   background-color: var(--text-color);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: opacity;
 }
 .jkl-chip:focus-visible {
-  outline: 3px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 3px;
 }
 .jkl-chip:hover::after {
   opacity: 0.15;
 }
 .jkl-chip--filter[aria-pressed=true] {
-  --background-color: var(--jkl-color-background-action);
-  --text-color: var(--jkl-color-text-on-action);
-  --border-color: var(--text-color);
+  --background-color: var(--jkl-color-background-contrast);
+  --text-color: var(--jkl-color-text-on-contrast);
+  --border-color: var(--jkl-color-border-strong);
 }
 @media screen and (forced-colors: active) {
   .jkl-chip--filter[aria-pressed=true] {

package/styles/components/chip/chip.min.css

@@ -1 +1 @@
-.jkl-chip{--padding-inline:var(--jkl-unit-15);--padding-icon:var(--jkl-unit-10);--height:var(--jkl-unit-40);--gap:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-separator);--background-color:transparent;--border-width:0.0625rem;font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items:center;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:99999px;color:var(--text-color);cursor:pointer;display:inline-flex;font-weight:700;gap:var(--gap);min-height:var(--height);padding:0 var(--padding-inline);position:relative;text-align:initial;white-space:nowrap}@media screen and (forced-colors:active){.jkl-chip{border:2px CanvasText;border-style:none none dotted}}.jkl-chip:after{background-color:var(--text-color);border-radius:inherit;content:"";inset:0;opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-chip:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-chip:hover:after{opacity:.15}.jkl-chip--filter[aria-pressed=true]{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action);--border-color:var(--text-color)}@media screen and (forced-colors:active){.jkl-chip--filter[aria-pressed=true]{forced-color-adjust:none;--background-color:CanvasText;--text-color:Canvas}}.jkl-chip:has(.jkl-icon){-webkit-padding-end:var(--padding-icon);padding-inline-end:var(--padding-icon)}
+.jkl-chip{--padding-inline:var(--jkl-unit-15);--padding-icon:var(--jkl-unit-10);--height:var(--jkl-unit-40);--gap:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-subdued);--background-color:var(--jkl-color-background-container);--border-width:0.0625rem;align-items:center;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:99999px;color:var(--text-color);cursor:pointer;display:inline-flex;font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);gap:var(--gap);min-height:var(--height);padding:0 var(--padding-inline);position:relative;text-align:initial;white-space:nowrap}@media screen and (forced-colors:active){.jkl-chip{border:2px CanvasText;border-style:none none dotted}}.jkl-chip:after{background-color:var(--text-color);border-radius:inherit;content:"";inset:0;opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-chip:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-chip:hover:after{opacity:.15}.jkl-chip--filter[aria-pressed=true]{--background-color:var(--jkl-color-background-contrast);--text-color:var(--jkl-color-text-on-contrast);--border-color:var(--jkl-color-border-strong)}@media screen and (forced-colors:active){.jkl-chip--filter[aria-pressed=true]{forced-color-adjust:none;--background-color:CanvasText;--text-color:Canvas}}.jkl-chip:has(.jkl-icon){-webkit-padding-end:var(--padding-icon);padding-inline-end:var(--padding-icon)}

package/styles/components/chip/chip.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@use "../../core/jkl";
+@use "../../jkl";
 
 .jkl-chip {
     --padding-inline: var(--jkl-unit-15);
@@ -7,13 +7,13 @@
     --height: var(--jkl-unit-40);
     --gap: var(--jkl-unit-05);
     --text-color: var(--jkl-color-text-default);
-    --border-color: var(--jkl-color-border-separator);
-    --background-color: transparent;
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: var(--jkl-color-background-container);
     --border-width: #{jkl.rem(1px)};
 
     @include jkl.text-style("text-small") {
-        font-weight: jkl.$typography-font-weight-bold;
-    };
+        font-weight: jkl.$font-weight-bold;
+    }
 
     cursor: pointer;
     position: relative;
@@ -57,9 +57,9 @@
 
     &--filter {
         &[aria-pressed="true"] {
-            --background-color: var(--jkl-color-background-action);
-            --text-color: var(--jkl-color-text-on-action);
-            --border-color: var(--text-color);
+            --background-color: var(--jkl-color-background-contrast);
+            --text-color: var(--jkl-color-text-on-contrast);
+            --border-color: var(--jkl-color-border-strong);
 
             @include jkl.forced-colors-mode {
                 forced-color-adjust: none;

package/styles/components/combobox/combobox.css

@@ -5,8 +5,7 @@
 @layer jokul.components {
   .jkl-combobox {
     --jkl-combobox-button-padding: var(--jkl-unit-10);
-    --jkl-combobox-button-active-value-padding: var(--jkl-unit-10)
-        var(--jkl-unit-05) var(--jkl-unit-5) var(--jkl-unit-10);
+    --jkl-combobox-button-active-value-padding: var(--jkl-unit-10) var(--jkl-unit-05) var(--jkl-unit-5) var(--jkl-unit-10);
     --jkl-combobox-input-height: 3rem;
     --jkl-combobox-actions-right: var(--jkl-unit-10);
     --jkl-combobox-actions-top: var(--jkl-unit-05);
@@ -54,8 +53,7 @@
     display: flex;
     gap: 1ch;
     cursor: pointer;
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
-        var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
     --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
     --jkl-text-input-action-button-size: var(--jkl-unit-60);
@@ -63,8 +61,8 @@
     --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
     --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
     --text-color: var(--jkl-color-text-default);
-    --background-color: var(--jkl-color-background-input-base);
-    --border-color: var(--jkl-color-border-input);
+    --background-color: transparent;
+    --border-color: var(--jkl-color-border-default);
     --placeholder-color: var(--jkl-color-text-subdued);
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
@@ -72,27 +70,25 @@
     position: relative;
     display: flex;
     align-items: center;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-text-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color, box-shadow, background-color;
     background-color: var(--background-color);
     color: var(--text-color);
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
   }
   .jkl-combobox__wrapper:focus-within, .jkl-combobox__wrapper:has([data-focused=true]) {
-    --background-color: var(--jkl-color-background-input-focus);
+    --background-color: var(--jkl-color-background-container);
   }
   .jkl-combobox__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
-    --background-color: var(--jkl-color-background-alert-error);
-    --text-color: var(--jkl-color-text-on-alert);
-    --placeholder-color: color(from currentColor sRGB r g b / 75%);
+    --background-color: var(--jkl-color-error-background-container);
+    --text-color: var(--jkl-color-error-text-default);
+    --border-color: var(--jkl-color-error-border-default);
+    --placeholder-color: var(--jkl-color-error-text-subdued);
   }
   .jkl-combobox__wrapper:hover, .jkl-combobox__wrapper:focus-within, .jkl-combobox__wrapper:has([data-focused=true]) {
-    --border-color: var(--jkl-color-border-input-focus);
+    --border-color: var(--jkl-color-border-strong);
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
   }
   @media screen and (forced-colors: active) {
@@ -101,11 +97,11 @@
     }
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-area__text-area:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-combobox__wrapper > .jkl-icon-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: -8px;
   }
   @media screen and (forced-colors: active) {
@@ -129,7 +125,7 @@
     width: var(--jkl-text-input-action-button-icon-size);
   }
   .jkl-combobox__wrapper > .jkl-text-input-action-button:hover {
-    color: var(--jkl-color-text-interactive-hover);
+    color: var(--jkl-color-text-subdued);
   }
   @media screen and (forced-colors: active) {
     .jkl-combobox__wrapper > .jkl-text-input-action-button:hover {
@@ -148,9 +144,9 @@
     padding: 0.46875rem;
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
-    background-color: var(--jkl-color-background-input-focus);
+    background-color: var(--jkl-color-background-container);
   }
   .jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible) {
     outline: none;
@@ -163,14 +159,12 @@
     outline: none;
     padding: 0;
     flex: 1 1 1ch;
+    min-width: 0;
     max-height: var(--jkl-combobox-search-input-height);
     background: none;
     -webkit-appearance: none;
     color: inherit;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-combobox__search-input {
     outline: 0;
@@ -215,8 +209,8 @@
   .jkl-combobox__arrow {
     pointer-events: none;
     transform: translateY(-50%);
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: transform, color;
   }
   @media screen and (forced-colors: active) {
@@ -230,8 +224,8 @@
     }
   }
   .jkl-combobox__menu {
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: height;
     top: calc(100% - 1px);
     overflow-y: auto;
@@ -239,24 +233,21 @@
     z-index: 7000;
     left: -0.0625rem;
     right: -0.0625rem;
-    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-radius: 0 0 0.1875rem 0.1875rem;
     box-sizing: border-box;
     max-height: calc((var(--jkl-combobox-max-shown-options, 5) + 0.5) * var(--jkl-combobox-input-height));
   }
   .jkl-combobox__option {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-text-small);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     display: flex;
     align-items: center;
     border: 0;
     color: var(--jkl-color-text-default);
-    background-color: var(--jkl-color-background-interactive);
+    background-color: transparent;
     transition-property: color, background-color;
     cursor: pointer;
     padding: var(--jkl-combobox-option-padding);
@@ -265,13 +256,10 @@
     line-height: var(--jkl-combobox-option-line-height);
   }
   .jkl-combobox__option:focus, .jkl-combobox__option:hover {
-    background-color: var(--jkl-color-background-interactive-hover);
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
   }
   .jkl-combobox__option-description {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: var(--jkl-color-text-subdued);
     display: block;
     width: 100%;
@@ -284,10 +272,12 @@
   }
   .jkl-combobox__chips {
     display: flex;
+    flex: 1 1 auto;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--jkl-combobox-chips-gap);
-    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
     padding: var(--jkl-text-input-padding);
   }
   .jkl-combobox__chips .jkl-chip {
@@ -298,12 +288,12 @@
   }
   .jkl-combobox--invalid .jkl-combobox__search-input,
   .jkl-combobox--invalid .jkl-combobox__wrapper {
-    background-color: var(--jkl-color-background-alert-error);
+    background-color: var(--jkl-color-error-background-container);
   }
   .jkl-combobox--invalid .jkl-combobox__search-input,
   .jkl-combobox--invalid .jkl-combobox__button,
   .jkl-combobox--invalid .jkl-combobox__wrapper {
-    color: var(--jkl-color-text-on-alert);
+    color: var(--jkl-color-error-text-default);
   }
   .jkl-combobox--menu-closed .jkl-combobox__search-input {
     position: absolute;

package/styles/components/combobox/combobox.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-combobox{--jkl-combobox-button-padding:var(--jkl-unit-10);--jkl-combobox-button-active-value-padding:var(--jkl-unit-10) var(--jkl-unit-05) var(--jkl-unit-5) var(--jkl-unit-10);--jkl-combobox-input-height:3rem;--jkl-combobox-actions-right:var(--jkl-unit-10);--jkl-combobox-actions-top:var(--jkl-unit-05);--jkl-combobox-chips-gap:var(--jkl-unit-05);--jkl-combobox-search-input-padding:var(--jkl-combobox-button-padding);--jkl-combobox-native-padding:0 var(--jkl-unit-50) 0 var(--jkl-unit-10);--jkl-combobox-option-padding:var(--jkl-unit-10) var(--jkl-unit-15);--jkl-combobox-option-line-height:2rem;--jkl-combobox-search-input-height:1.75rem}@media (width >= 0) and (max-width:679px){.jkl-combobox{--jkl-combobox-input-height:2.75rem}}.jkl-combobox{border-style:none;outline:0;outline-style:none;position:relative}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox{border-style:revert;outline:revert;outline-style:revert}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:revert;outline-style:revert}}.jkl-combobox .jkl-combobox__option:focus{outline:none}.jkl-combobox__wrapper{cursor:pointer;gap:1ch;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:var(--jkl-color-background-input-base);--border-color:var(--jkl-color-border-input);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;border-radius:var(--jkl-border-radius-s);box-sizing:border-box;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);max-width:100%;position:relative;--jkl-icon-weight:300;background-color:var(--background-color);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;color:var(--text-color);transition-duration:.15s;transition-property:color,box-shadow,background-color;transition-timing-function:ease}.jkl-combobox__wrapper:focus-within,.jkl-combobox__wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-input-focus)}.jkl-combobox__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-background-alert-error);--text-color:var(--jkl-color-text-on-alert);--placeholder-color:color(from currentColor sRGB r g b/75%)}.jkl-combobox__wrapper:focus-within,.jkl-combobox__wrapper:has([data-focused=true]),.jkl-combobox__wrapper:hover{--border-color:var(--jkl-color-border-input-focus);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-combobox__wrapper:focus-within,.jkl-combobox__wrapper:has([data-focused=true]),.jkl-combobox__wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-combobox__wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-combobox__wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-combobox__wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-combobox__wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-combobox__wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-combobox__wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-combobox__wrapper{border:.125rem inset ButtonText}}.jkl-combobox__wrapper--active-value .jkl-combobox__chips{padding:.46875rem}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(:focus-visible){background-color:var(--jkl-color-background-input-focus);outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible){outline:none}.jkl-combobox__wrapper:hover~.jkl-combobox__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-combobox__search-input{-webkit-appearance:none;background:none;border:none;color:inherit;flex:1 1 1ch;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);max-height:var(--jkl-combobox-search-input-height);outline:none;padding:0;--jkl-icon-weight:300;border-style:none;outline:0;outline-style:none}.jkl-combobox__search-input:active,.jkl-combobox__search-input:focus,.jkl-combobox__search-input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox__search-input{border-style:revert;outline:revert;outline-style:revert}.jkl-combobox__search-input:active,.jkl-combobox__search-input:focus,.jkl-combobox__search-input:hover{outline:revert;outline-style:revert}}.jkl-combobox__search-input input[type=number]::-webkit-inner-spin-button,.jkl-combobox__search-input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-combobox__search-input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-combobox__search-input{border:none;outline:none}.jkl-combobox__search-input:focus-visible{outline:none}}.jkl-combobox__search-input::placeholder{color:var(--placeholder-color);opacity:1}.jkl-combobox__arrow{pointer-events:none;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-combobox__arrow,.jkl-combobox__arrow path,.jkl-combobox__arrow svg{fill:CanvasText;stroke:CanvasText}}.jkl-combobox__menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);border-radius:0 0 .1875rem .1875rem;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-combobox-max-shown-options, 5) + .5)*var(--jkl-combobox-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:calc(100% - 1px);transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-combobox__option{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items:center;background-color:var(--jkl-color-background-interactive);border:0;color:var(--jkl-color-text-default);cursor:pointer;display:flex;line-height:var(--jkl-combobox-option-line-height);padding:var(--jkl-combobox-option-padding);text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-combobox__option:focus,.jkl-combobox__option:hover{background-color:var(--jkl-color-background-interactive-hover)}.jkl-combobox__option-description{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--jkl-color-text-subdued);display:block;width:100%}.jkl-combobox__option--selected{justify-content:space-between}.jkl-combobox__no-option{padding:var(--jkl-combobox-option-padding)}.jkl-combobox__chips{align-items:center;display:flex;flex-wrap:wrap;gap:var(--jkl-combobox-chips-gap);padding:var(--jkl-text-input-padding);width:100%}.jkl-combobox__chips .jkl-chip{white-space:break-spaces}.jkl-combobox__chips .jkl-chip .jkl-tooltip-trigger{font-weight:700}.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{background-color:var(--jkl-color-background-alert-error)}.jkl-combobox--invalid .jkl-combobox__button,.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{color:var(--jkl-color-text-on-alert)}.jkl-combobox--menu-closed .jkl-combobox__search-input{background-color:transparent;padding-right:0;position:absolute;width:94%}.jkl-combobox--menu-open .jkl-combobox__wrapper{border-bottom-left-radius:0;border-bottom-right-radius:0}.jkl-combobox--menu-open .jkl-combobox__wrapper:hover .jkl-combobox__actions{transform:translateY(-.1875rem)}.jkl-combobox--menu-open .jkl-combobox__search-input{cursor:text}}
+@layer jokul.components{.jkl-combobox{--jkl-combobox-button-padding:var(--jkl-unit-10);--jkl-combobox-button-active-value-padding:var(--jkl-unit-10) var(--jkl-unit-05) var(--jkl-unit-5) var(--jkl-unit-10);--jkl-combobox-input-height:3rem;--jkl-combobox-actions-right:var(--jkl-unit-10);--jkl-combobox-actions-top:var(--jkl-unit-05);--jkl-combobox-chips-gap:var(--jkl-unit-05);--jkl-combobox-search-input-padding:var(--jkl-combobox-button-padding);--jkl-combobox-native-padding:0 var(--jkl-unit-50) 0 var(--jkl-unit-10);--jkl-combobox-option-padding:var(--jkl-unit-10) var(--jkl-unit-15);--jkl-combobox-option-line-height:2rem;--jkl-combobox-search-input-height:1.75rem}@media (width >= 0) and (max-width:679px){.jkl-combobox{--jkl-combobox-input-height:2.75rem}}.jkl-combobox{border-style:none;outline:0;outline-style:none;position:relative}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox{border-style:revert;outline:revert;outline-style:revert}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:revert;outline-style:revert}}.jkl-combobox .jkl-combobox__option:focus{outline:none}.jkl-combobox__wrapper{cursor:pointer;gap:1ch;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-color:var(--jkl-color-border-default);--placeholder-color:var(--jkl-color-text-subdued);align-items:center;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);max-width:100%;position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-combobox__wrapper:focus-within,.jkl-combobox__wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-combobox__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-default);--placeholder-color:var(--jkl-color-error-text-subdued)}.jkl-combobox__wrapper:focus-within,.jkl-combobox__wrapper:has([data-focused=true]),.jkl-combobox__wrapper:hover{--border-color:var(--jkl-color-border-strong);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-combobox__wrapper:focus-within,.jkl-combobox__wrapper:has([data-focused=true]),.jkl-combobox__wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-combobox__wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-combobox__wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-combobox__wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-combobox__wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-combobox__wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-combobox__wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-combobox__wrapper{border:.125rem inset ButtonText}}.jkl-combobox__wrapper--active-value .jkl-combobox__chips{padding:.46875rem}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(:focus-visible){background-color:var(--jkl-color-background-container);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible){outline:none}.jkl-combobox__wrapper:hover~.jkl-combobox__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-combobox__search-input{-webkit-appearance:none;background:none;border:none;border-style:none;color:inherit;flex:1 1 1ch;font:var(--jkl-text-style-text-medium);max-height:var(--jkl-combobox-search-input-height);min-width:0;outline:none;outline:0;outline-style:none;padding:0}.jkl-combobox__search-input:active,.jkl-combobox__search-input:focus,.jkl-combobox__search-input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox__search-input{border-style:revert;outline:revert;outline-style:revert}.jkl-combobox__search-input:active,.jkl-combobox__search-input:focus,.jkl-combobox__search-input:hover{outline:revert;outline-style:revert}}.jkl-combobox__search-input input[type=number]::-webkit-inner-spin-button,.jkl-combobox__search-input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-combobox__search-input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-combobox__search-input{border:none;outline:none}.jkl-combobox__search-input:focus-visible{outline:none}}.jkl-combobox__search-input::placeholder{color:var(--placeholder-color);opacity:1}.jkl-combobox__arrow{pointer-events:none;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-combobox__arrow,.jkl-combobox__arrow path,.jkl-combobox__arrow svg{fill:CanvasText;stroke:CanvasText}}.jkl-combobox__menu{background-color:var(--jkl-color-background-container);border:.125rem solid var(--jkl-color-border-strong);border-radius:0 0 .1875rem .1875rem;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-combobox-max-shown-options, 5) + .5)*var(--jkl-combobox-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:calc(100% - 1px);transition-duration:var(--jkl-motion-timing-productive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);z-index:7000}.jkl-combobox__option{align-items:center;background-color:transparent;border:0;color:var(--jkl-color-text-default);cursor:pointer;display:flex;font:var(--jkl-text-style-text-small);line-height:var(--jkl-combobox-option-line-height);padding:var(--jkl-combobox-option-padding);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-combobox__option:focus,.jkl-combobox__option:hover{background-color:color-mix(in srgb,currentColor 10%,transparent)}.jkl-combobox__option-description{color:var(--jkl-color-text-subdued);display:block;font:var(--jkl-text-style-text-small);width:100%}.jkl-combobox__option--selected{justify-content:space-between}.jkl-combobox__no-option{padding:var(--jkl-combobox-option-padding)}.jkl-combobox__chips{align-items:center;box-sizing:border-box;display:flex;flex:1 1 auto;flex-wrap:wrap;gap:var(--jkl-combobox-chips-gap);min-width:0;padding:var(--jkl-text-input-padding)}.jkl-combobox__chips .jkl-chip{white-space:break-spaces}.jkl-combobox__chips .jkl-chip .jkl-tooltip-trigger{font-weight:700}.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{background-color:var(--jkl-color-error-background-container)}.jkl-combobox--invalid .jkl-combobox__button,.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{color:var(--jkl-color-error-text-default)}.jkl-combobox--menu-closed .jkl-combobox__search-input{background-color:transparent;padding-right:0;position:absolute;width:94%}.jkl-combobox--menu-open .jkl-combobox__wrapper{border-bottom-left-radius:0;border-bottom-right-radius:0}.jkl-combobox--menu-open .jkl-combobox__wrapper:hover .jkl-combobox__actions{transform:translateY(-.1875rem)}.jkl-combobox--menu-open .jkl-combobox__search-input{cursor:text}}