@fremtind/jokul 6.1.0-next.3 → 6.1.0-next.5

package/styles/components/autosuggest/autosuggest.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-autosuggest{--border-radius:var(--jkl-border-radius-s);--jkl-autosuggest-menu-padding:var(--jkl-unit-20) var(--jkl-unit-10) 0;--jkl-autosuggest-controller-button-width:auto;--jkl-autosuggest-controller-button-padding:0 var(--jkl-unit-15);--jkl-autosuggest-controller-button-icon-size:1.25rem;--jkl-autosuggest-option-padding:var(--jkl-unit-10);--jkl-autosuggest-option-height:min(var(--jkl-unit-60), 3rem);display:flex;flex-direction:column;align-items:flex-start;position:relative}.jkl-autosuggest[aria-expanded=true] .jkl-text-input-wrapper{border-radius:var(--border-radius) var(--border-radius) 0 0}.jkl-autosuggest__no-hits-message{padding:var(--jkl-autosuggest-option-padding);font:var(--jkl-text-style-text-small);color:var(--jkl-color-text-subdued)}.jkl-autosuggest__menu{background-color:var(--jkl-color-background-container);border:.125rem solid var(--jkl-color-border-strong);border-top:none;border-radius:0 0 var(--border-radius) var(--border-radius);box-sizing:border-box;position:absolute;inset:100% -.0625rem auto;margin:0;padding:0;max-height:60vh;overflow-y:auto;width:calc(100% + .125rem);z-index:7000;-webkit-overflow-scrolling:touch}.jkl-autosuggest__item-list{list-style-type:none;margin:0;padding:0}.jkl-autosuggest__item{font:var(--jkl-text-style-text-small);color:unset;display:flex;align-items:center;box-sizing:border-box;border:0;background-color:initial;min-height:var(--jkl-autosuggest-option-height);text-align:left;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color,background-color;position:relative;padding:var(--jkl-autosuggest-option-padding);cursor:pointer}.jkl-autosuggest__item--active,.jkl-autosuggest__item:focus,.jkl-autosuggest__item:hover{color:var(--jkl-color-text-default);background-color:var(--jkl-color-background-container-accent)}}
+@layer jokul.components{.jkl-autosuggest{--border-radius:var(--jkl-border-radius-s);--jkl-autosuggest-menu-padding:var(--jkl-unit-20) var(--jkl-unit-10) 0;--jkl-autosuggest-controller-button-width:auto;--jkl-autosuggest-controller-button-padding:0 var(--jkl-unit-15);--jkl-autosuggest-controller-button-icon-size:1.25rem;--jkl-autosuggest-option-padding:var(--jkl-unit-10);--jkl-autosuggest-option-height:min(var(--jkl-unit-60), 3rem);display:flex;flex-direction:column;align-items:flex-start;position:relative}.jkl-autosuggest[aria-expanded=true] .jkl-text-input-wrapper{border-radius:var(--border-radius) var(--border-radius) 0 0}.jkl-autosuggest__no-hits-message{padding:var(--jkl-autosuggest-option-padding);font:var(--jkl-text-style-text-small);color:var(--jkl-color-text-subdued)}.jkl-autosuggest__menu{background-color:var(--jkl-color-background-container);border:.125rem solid var(--jkl-color-border-strong);border-top:none;border-radius:0 0 var(--border-radius) var(--border-radius);box-sizing:border-box;position:absolute;inset:100% -.0625rem auto;margin:0;padding:0;max-height:60vh;overflow-y:auto;width:calc(100% + .125rem);z-index:7000;-webkit-overflow-scrolling:touch}.jkl-autosuggest__item-list{list-style-type:none;margin:0;padding:0}.jkl-autosuggest__item{font:var(--jkl-text-style-text-small);color:unset;display:flex;align-items:center;box-sizing:border-box;border:0;background-color:transparent;min-height:var(--jkl-autosuggest-option-height);text-align:left;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color,background-color;position:relative;padding:var(--jkl-autosuggest-option-padding);cursor:pointer}.jkl-autosuggest__item--active,.jkl-autosuggest__item:focus,.jkl-autosuggest__item:hover{color:var(--jkl-color-text-default);background-color:var(--jkl-color-background-container-accent)}}

package/styles/components/beta/nav-link/navlink.min.css

@@ -1 +1 @@
-.jkl-navlink--beta{--background-color:var(--jkl-color-background-container);--border-color:#0000;--border-radius:var(--jkl-border-radius-s);display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:2em;color:inherit;text-decoration:none;background-color:var(--background-color);padding:var(--jkl-spacing-s);border:1px solid var(--border-color);border-radius:var(--border-radius);font:var(--jkl-text-style-paragraph-medium);transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color}.jkl-navlink--beta .description,.jkl-navlink--beta .title{grid-column:1}.jkl-navlink--beta:has(.description) .title{font-weight:700}.jkl-navlink--beta:after{content:"arrow_forward"/"";grid-column:2;grid-row:1/span 999;translate:0;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out);transition-duration:var(--jkl-motion-timing-productive);transition-property:translate}.jkl-navlink--beta[data-outlined=true]{--background-color:#0000;--border-color:var(--jkl-color-border-subdued)}.jkl-navlink--beta:focus-visible,.jkl-navlink--beta:hover{background-color:var(--jkl-color-background-container-accent)}.jkl-navlink--beta:focus-visible:after,.jkl-navlink--beta:hover:after{translate:4px 0}.jkl-navlink--beta:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}
+.jkl-navlink--beta{--background-color:var(--jkl-color-background-container);--border-color:transparent;--border-radius:var(--jkl-border-radius-s);display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:2em;color:inherit;text-decoration:none;background-color:var(--background-color);padding:var(--jkl-spacing-s);border:1px solid var(--border-color);border-radius:var(--border-radius);font:var(--jkl-text-style-paragraph-medium);transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color}.jkl-navlink--beta .description,.jkl-navlink--beta .title{grid-column:1}.jkl-navlink--beta:has(.description) .title{font-weight:700}.jkl-navlink--beta:after{content:"arrow_forward"/"";grid-column:2;grid-row:1/span 999;translate:0;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out);transition-duration:var(--jkl-motion-timing-productive);transition-property:translate}.jkl-navlink--beta[data-outlined=true]{--background-color:transparent;--border-color:var(--jkl-color-border-subdued)}.jkl-navlink--beta:focus-visible,.jkl-navlink--beta:hover{background-color:var(--jkl-color-background-container-accent)}.jkl-navlink--beta:focus-visible:after,.jkl-navlink--beta:hover:after{translate:4px 0}.jkl-navlink--beta:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}

package/styles/components/button/button.css

@@ -11,7 +11,6 @@
     --jkl-button-padding-icon-button: var(--jkl-unit-10);
     --jkl-button-tertiary-padding-icon: var(--jkl-unit-05);
     --jkl-button-text-ink-offset: 0.1em;
-    --button-min-width: 9ch;
     --jkl-icon-weight: var(--jkl-icon-weight-bold);
     --text-color: var(--jkl-color-text-default);
     --background-color: transparent;
@@ -38,7 +37,7 @@
     transition-property: background-color;
   }
   .jkl-button:has(.jkl-button__text) {
-    min-width: var(--button-min-width);
+    min-width: var(--button-min-width, 9ch);
   }
   .jkl-button:has(.jkl-button__text):has(.jkl-icon) {
     min-width: initial;
@@ -98,7 +97,7 @@
     outline-offset: 3px;
   }
   .jkl-button:hover {
-    background-color: color-mix(in srgb, var(--background-color), var(--text-color) 15%);
+    background-color: color-mix(in srgb, var(--background-color, transparent), var(--hover-accent-color, var(--jkl-color-background-contrast)) var(--jkl-opacity-hover, 10%));
   }
   @media (forced-colors: active) {
     .jkl-button:hover {
@@ -112,6 +111,7 @@
   .jkl-button--primary {
     --background-color: var(--jkl-color-background-contrast);
     --text-color: var(--jkl-color-text-on-contrast);
+    --hover-accent-color: var(--jkl-color-text-on-contrast);
   }
   @media (forced-colors: active) {
     .jkl-button--primary {

package/styles/components/button/button.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-button{--jkl-button-font-size:var(--jkl-typography-body-base-font-size);--jkl-button-line-height:var(--jkl-typography-body-base-line-height);--jkl-button-padding-block:var(--jkl-unit-10);--jkl-button-padding-text:var(--jkl-unit-30);--jkl-button-padding-icon:var(--jkl-unit-20);--jkl-button-padding-icon-button:var(--jkl-unit-10);--jkl-button-tertiary-padding-icon:var(--jkl-unit-05);--jkl-button-text-ink-offset:0.1em;--button-min-width:9ch;--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:#0000;--border-radius:0;--border-width:0.0625rem;display:inline-block;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);-webkit-user-select:none;user-select:none;background:var(--background-color);color:var(--text-color);border:unset;text-decoration:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);padding-inline:var(--jkl-button-padding-text);padding-block:var(--jkl-button-padding-block);position:relative;overflow:hidden;max-width:100%;animation:a .3s linear;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color}.jkl-button:has(.jkl-button__text){min-width:var(--button-min-width)}.jkl-button:has(.jkl-button__text):has(.jkl-icon){min-width:auto}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive);transition-property:translate;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--jkl-unit-02);pointer-events:none}.jkl-button__loader{transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive);transition-property:opacity,translate;position:absolute;top:50%;left:50%;translate:-50% 350%;opacity:0;pointer-events:none}.jkl-button__text{display:block;min-width:0;max-width:100%;-webkit-padding-before:var(--jkl-button-text-ink-offset);padding-block-start:var(--jkl-button-text-ink-offset);-webkit-margin-before:calc(var(--jkl-button-text-ink-offset)*-1);margin-block-start:calc(var(--jkl-button-text-ink-offset)*-1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.jkl-button[data-loading=true] .jkl-button__label{--button-loading-offset:calc(-100% - var(--jkl-button-padding-block)*2 - var(--jkl-button-text-ink-offset));translate:0 var(--button-loading-offset)}.jkl-button[data-loading=true] .jkl-button__loader{translate:-50% -50%;opacity:1}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-button:hover{background-color:color-mix(in srgb,var(--background-color),var(--text-color) 15%)}@media (forced-colors:active){.jkl-button:hover{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-contrast);--text-color:var(--jkl-color-text-on-contrast)}@media (forced-colors:active){.jkl-button--primary{border:calc(var(--border-width)*2) solid Highlight}}.jkl-button--secondary{border:var(--border-width) solid var(--text-color)}.jkl-button--tertiary{border-bottom:var(--border-width) solid var(--text-color);padding-inline:var(--jkl-button-tertiary-padding-icon)}.jkl-button--tertiary:has(.jkl-icon:first-child){padding-inline:var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon)*2)}.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:calc(var(--jkl-button-tertiary-padding-icon)*2) var(--jkl-button-tertiary-padding-icon)}}
+@layer jokul.components{.jkl-button{--jkl-button-font-size:var(--jkl-typography-body-base-font-size);--jkl-button-line-height:var(--jkl-typography-body-base-line-height);--jkl-button-padding-block:var(--jkl-unit-10);--jkl-button-padding-text:var(--jkl-unit-30);--jkl-button-padding-icon:var(--jkl-unit-20);--jkl-button-padding-icon-button:var(--jkl-unit-10);--jkl-button-tertiary-padding-icon:var(--jkl-unit-05);--jkl-button-text-ink-offset:0.1em;--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;display:inline-block;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);-webkit-user-select:none;user-select:none;background:var(--background-color);color:var(--text-color);border:unset;text-decoration:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);padding-inline:var(--jkl-button-padding-text);padding-block:var(--jkl-button-padding-block);position:relative;overflow:hidden;max-width:100%;animation:a .3s linear;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color}.jkl-button:has(.jkl-button__text){min-width:var(--button-min-width,9ch)}.jkl-button:has(.jkl-button__text):has(.jkl-icon){min-width:auto}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive);transition-property:translate;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--jkl-unit-02);pointer-events:none}.jkl-button__loader{transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive);transition-property:opacity,translate;position:absolute;top:50%;left:50%;translate:-50% 350%;opacity:0;pointer-events:none}.jkl-button__text{display:block;min-width:0;max-width:100%;-webkit-padding-before:var(--jkl-button-text-ink-offset);padding-block-start:var(--jkl-button-text-ink-offset);-webkit-margin-before:calc(var(--jkl-button-text-ink-offset)*-1);margin-block-start:calc(var(--jkl-button-text-ink-offset)*-1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.jkl-button[data-loading=true] .jkl-button__label{--button-loading-offset:calc(-100% - var(--jkl-button-padding-block)*2 - var(--jkl-button-text-ink-offset));translate:0 var(--button-loading-offset)}.jkl-button[data-loading=true] .jkl-button__loader{translate:-50% -50%;opacity:1}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-button:hover{background-color:color-mix(in srgb,var(--background-color,transparent),var(--hover-accent-color,var(--jkl-color-background-contrast)) var(--jkl-opacity-hover,10%))}@media (forced-colors:active){.jkl-button:hover{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-contrast);--text-color:var(--jkl-color-text-on-contrast);--hover-accent-color:var(--jkl-color-text-on-contrast)}@media (forced-colors:active){.jkl-button--primary{border:calc(var(--border-width)*2) solid Highlight}}.jkl-button--secondary{border:var(--border-width) solid var(--text-color)}.jkl-button--tertiary{border-bottom:var(--border-width) solid var(--text-color);padding-inline:var(--jkl-button-tertiary-padding-icon)}.jkl-button--tertiary:has(.jkl-icon:first-child){padding-inline:var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon)*2)}.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:calc(var(--jkl-button-tertiary-padding-icon)*2) var(--jkl-button-tertiary-padding-icon)}}

package/styles/components/button/button.scss

@@ -12,7 +12,6 @@
         --jkl-button-padding-icon-button: var(--jkl-unit-10);
         --jkl-button-tertiary-padding-icon: var(--jkl-unit-05);
         --jkl-button-text-ink-offset: 0.1em;
-        --button-min-width: 9ch;
         --jkl-icon-weight: var(--jkl-icon-weight-bold);
         --text-color: var(--jkl-color-text-default);
         --background-color: transparent;
@@ -43,7 +42,7 @@
         @include jkl.motion("standard", "productive", background-color);
 
         &:has(.jkl-button__text) {
-            min-width: var(--button-min-width);
+            min-width: var(--button-min-width, 9ch);
         }
 
         &:has(.jkl-button__text):has(.jkl-icon) {
@@ -116,9 +115,7 @@
         }
 
         &:hover {
-            background-color: color-mix(in srgb,
-                    var(--background-color),
-                    var(--text-color) 15%);
+            @include jkl.hover-bg;
 
             @media (forced-colors: active) {
                 @include jkl.focus-outline;
@@ -134,6 +131,7 @@
         &--primary {
             --background-color: var(--jkl-color-background-contrast);
             --text-color: var(--jkl-color-text-on-contrast);
+            --hover-accent-color: var(--jkl-color-text-on-contrast);
 
             @media (forced-colors: active) {
                 border: calc(var(--border-width) * 2) solid Highlight;

package/styles/components/button-group/_index.scss

@@ -0,0 +1 @@
+@forward "button-group";

package/styles/components/button-group/button-group.css

@@ -0,0 +1,12 @@
+@layer jokul.components {
+  .jkl-button-group {
+    --button-min-width: 15ch;
+    container: --jkl-button-group/inline-size;
+    width: 100%;
+  }
+  @container --jkl-button-group (width < 35ch) {
+    .jkl-button-group > .jkl-button {
+      align-self: stretch;
+    }
+  }
+}

package/styles/components/button-group/button-group.min.css

@@ -0,0 +1 @@
+@layer jokul.components{.jkl-button-group{--button-min-width:15ch;container:--jkl-button-group/inline-size;width:100%}@container --jkl-button-group (width < 35ch){.jkl-button-group>.jkl-button{align-self:stretch}}}

package/styles/components/button-group/button-group.scss

@@ -0,0 +1,14 @@
+@layer jokul.components {
+    .jkl-button-group {
+        --button-min-width: 15ch;
+
+        container: --jkl-button-group / inline-size;
+        width: 100%;
+    }
+
+    @container --jkl-button-group (width < 35ch) {
+        .jkl-button-group > .jkl-button {
+            align-self: stretch;
+        }
+    }
+}

package/styles/components/card/card.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-card{--padding-s:var(--jkl-unit-10);--padding-m:var(--jkl-unit-20);--padding-l:var(--jkl-unit-30);--padding-xl:var(--jkl-unit-40);--border-radius:var(--jkl-border-radius-m);--border-color:#0000;--border-width:0.0625rem;--background-color:var(--jkl-color-background-container);position:relative;overflow:hidden;display:block;background-color:var(--background-color);box-sizing:border-box;padding:var(--padding,var(--padding-s));text-decoration:none;color:var(--jkl-color-text-default)}.jkl-card,.jkl-card:after{border-radius:var(--border-radius)}.jkl-card:after{content:"";position:absolute;inset:0;pointer-events:none;border:var(--border-width) solid var(--border-color);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-snappy);transition-property:border-color,border-size}.jkl-card[data-padding=s]{--padding:var(--padding-s)}.jkl-card[data-padding=m]{--padding:var(--padding-m)}.jkl-card[data-padding=l]{--padding:var(--padding-l)}.jkl-card[data-padding=xl]{--padding:var(--padding-xl)}.jkl-card--outlined{--border-color:var(--jkl-color-border-subdued);--background-color:#0000}.jkl-card:where(button){border:none;outline:none;font:inherit;line-height:inherit;text-align:inherit}.jkl-card:is(a,button:not(:disabled)),.jkl-card[data-clickable=true]{cursor:pointer}.jkl-card:is(a,button:not(:disabled)):hover,.jkl-card[data-clickable=true]:hover{--border-color:var(--jkl-color-border-strong);--border-width:0.125rem}.jkl-card:is(a,button:not(:disabled)):focus-visible,.jkl-card[data-clickable=true]:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-card-image{--margin:calc(var(--padding, 0)*-1);width:calc(100% + var(--padding, 0)*2);aspect-ratio:var(--image-aspect-ratio,3/2);margin-inline:var(--margin,0);object-fit:cover}.jkl-card-image--top{margin-top:var(--margin,0)}.jkl-card-image--bottom{margin-bottom:var(--margin,0)}.jkl-card-image--full{margin-block:var(--margin,0)}}
+@layer jokul.components{.jkl-card{--padding-s:var(--jkl-unit-10);--padding-m:var(--jkl-unit-20);--padding-l:var(--jkl-unit-30);--padding-xl:var(--jkl-unit-40);--border-radius:var(--jkl-border-radius-m);--border-color:transparent;--border-width:0.0625rem;--background-color:var(--jkl-color-background-container);position:relative;overflow:hidden;display:block;background-color:var(--background-color);border-radius:var(--border-radius);box-sizing:border-box;padding:var(--padding,var(--padding-s));text-decoration:none;color:var(--jkl-color-text-default)}.jkl-card:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--border-radius);border:var(--border-width) solid var(--border-color);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-snappy);transition-property:border-color,border-size}.jkl-card[data-padding=s]{--padding:var(--padding-s)}.jkl-card[data-padding=m]{--padding:var(--padding-m)}.jkl-card[data-padding=l]{--padding:var(--padding-l)}.jkl-card[data-padding=xl]{--padding:var(--padding-xl)}.jkl-card--outlined{--border-color:var(--jkl-color-border-subdued);--background-color:transparent}.jkl-card:where(button){border:none;outline:none;font:inherit;line-height:inherit;text-align:inherit}.jkl-card:is(a,button:not(:disabled)),.jkl-card[data-clickable=true]{cursor:pointer}.jkl-card:is(a,button:not(:disabled)):hover,.jkl-card[data-clickable=true]:hover{--border-color:var(--jkl-color-border-strong);--border-width:0.125rem}.jkl-card:is(a,button:not(:disabled)):focus-visible,.jkl-card[data-clickable=true]:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-card-image{--margin:calc(var(--padding, 0)*-1);width:calc(100% + var(--padding, 0)*2);aspect-ratio:var(--image-aspect-ratio,3/2);margin-inline:var(--margin,0);object-fit:cover}.jkl-card-image--top{margin-top:var(--margin,0)}.jkl-card-image--bottom{margin-bottom:var(--margin,0)}.jkl-card-image--full{margin-block:var(--margin,0)}}

package/styles/components/checkbox/checkbox.css

@@ -99,4 +99,19 @@
   .jkl-checkbox--inline:not(:last-of-type) {
     margin-right: var(--jkl-unit-30);
   }
+  .jkl-checkbox:has(> .jkl-checkbox__input:disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-checkbox:has(> .jkl-checkbox__input:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox:has(> .jkl-checkbox__input:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
 }

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-checkbox{--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-background-contrast);--background-color:#0000;font:var(--jkl-text-style-text-medium);display:flex;flex-wrap:wrap;color:var(--text-color);position:relative}.jkl-checkbox__input{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:1lh;inline-size:1lh;margin:0;padding:0;cursor:pointer;z-index:1;-webkit-appearance:none;appearance:none;background:#0000;border:0;border-style:none}.jkl-checkbox__input,.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}.jkl-checkbox__input,.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{color:var(--text-color);cursor:pointer;display:flex;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color}.jkl-checkbox__label:before{color:var(--icon-color);content:"check_box_outline_blank"/"";-webkit-margin-end:.25em;margin-inline-end:.25em;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform}.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{--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-background-contrast);--background-color:transparent;font:var(--jkl-text-style-text-medium);display:flex;flex-wrap:wrap;color:var(--text-color);position:relative}.jkl-checkbox__input{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:1lh;inline-size:1lh;margin:0;padding:0;cursor:pointer;z-index:1;-webkit-appearance:none;appearance:none;background:transparent;border:0;outline:0;border-style:none;outline-style:none}.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{outline:revert;border-style:revert;outline-style:revert}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{color:var(--text-color);cursor:pointer;display:flex;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color}.jkl-checkbox__label:before{color:var(--icon-color);content:"check_box_outline_blank"/"";-webkit-margin-end:.25em;margin-inline-end:.25em;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform}.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)}.jkl-checkbox:has(>.jkl-checkbox__input:disabled){opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-checkbox:has(>.jkl-checkbox__input:disabled) *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-checkbox:has(>.jkl-checkbox__input:disabled){opacity:1;color:GrayText;border-color:GrayText}}}

package/styles/components/checkbox/checkbox.scss

@@ -89,4 +89,8 @@
             }
         }
     }
+
+    .jkl-checkbox:has(> .jkl-checkbox__input:disabled) {
+        @include jkl.disabled-control;
+    }
 }

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

@@ -83,6 +83,23 @@
     --outer-border-thickness: 0.125rem;
     cursor: pointer;
   }
+  .jkl-input-panel:has(.jkl-input-panel__header input:disabled) {
+    --outer-border-color: var(--jkl-color-border-default);
+    --outer-border-thickness: 0.0625rem;
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-input-panel:has(.jkl-input-panel__header input:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-input-panel:has(.jkl-input-panel__header input:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
 }
 @layer jokul.components {
   .jkl-checkbox {
@@ -182,6 +199,21 @@
   .jkl-checkbox--inline:not(:last-of-type) {
     margin-right: var(--jkl-unit-30);
   }
+  .jkl-checkbox:has(> .jkl-checkbox__input:disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-checkbox:has(> .jkl-checkbox__input:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox:has(> .jkl-checkbox__input:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
 }
 @layer jokul.components {
   .jkl-checkbox-panel .jkl-checkbox {

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-default);--outer-border-thickness:0.0625rem;--background-color:#0000;--padding-inline:var(--jkl-unit-25);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);border-radius:var(--jkl-border-radius-s);background-color:var(--background-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:box-shadow}.jkl-input-panel__header{display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;align-items:center;gap:.5rem;cursor:pointer;position:relative;padding:var(--jkl-unit-20) var(--padding-inline)}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button{grid-column:1/-1;grid-row:1}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header label:after{content:"";position:absolute;inset:0}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button,.jkl-input-panel__header label{position:unset}.jkl-input-panel__header input[type=checkbox],.jkl-input-panel__header input[type=radio]{inset-block-start:var(--jkl-unit-20);inset-inline-start:var(--padding-inline)}.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{padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-unit-20);padding-block-end:var(--jkl-unit-20);line-height:normal;font:var(--jkl-text-style-paragraph-medium)}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container)}.jkl-input-panel:has(input[aria-invalid=true]){--outer-border-color:var(--jkl-color-error-border-default)}.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);--icon-color:var(--jkl-color-background-contrast);--background-color:#0000;font:var(--jkl-text-style-text-medium);display:flex;flex-wrap:wrap;color:var(--text-color);position:relative}.jkl-checkbox__input{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:1lh;inline-size:1lh;margin:0;padding:0;cursor:pointer;z-index:1;-webkit-appearance:none;appearance:none;background:#0000;border:0;border-style:none}.jkl-checkbox__input,.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}.jkl-checkbox__input,.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{color:var(--text-color);cursor:pointer;display:flex;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color}.jkl-checkbox__label:before{color:var(--icon-color);content:"check_box_outline_blank"/"";-webkit-margin-end:.25em;margin-inline-end:.25em;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform}.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)}.jkl-checkbox-panel .jkl-checkbox{-webkit-margin-start:-.1em;margin-inline-start:-.1em}}@layer jokul.components{.jkl-checkbox-panel .jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:none}}
+@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);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);border-radius:var(--jkl-border-radius-s);background-color:var(--background-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:box-shadow}.jkl-input-panel__header{display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;align-items:center;gap:.5rem;cursor:pointer;position:relative;padding:var(--jkl-unit-20) var(--padding-inline)}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button{grid-column:1/-1;grid-row:1}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header label:after{content:"";position:absolute;inset:0}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button,.jkl-input-panel__header label{position:unset}.jkl-input-panel__header input[type=checkbox],.jkl-input-panel__header input[type=radio]{inset-block-start:var(--jkl-unit-20);inset-inline-start:var(--padding-inline)}.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{padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-unit-20);padding-block-end:var(--jkl-unit-20);line-height:normal;font:var(--jkl-text-style-paragraph-medium)}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container)}.jkl-input-panel:has(input[aria-invalid=true]){--outer-border-color:var(--jkl-color-error-border-default)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-strong);--outer-border-thickness:0.125rem;cursor:pointer}.jkl-input-panel:has(.jkl-input-panel__header input:disabled){--outer-border-color:var(--jkl-color-border-default);--outer-border-thickness:0.0625rem;opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-input-panel:has(.jkl-input-panel__header input:disabled) *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-input-panel:has(.jkl-input-panel__header input:disabled){opacity:1;color:GrayText;border-color:GrayText}}}@layer jokul.components{.jkl-checkbox{--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-background-contrast);--background-color:transparent;font:var(--jkl-text-style-text-medium);display:flex;flex-wrap:wrap;color:var(--text-color);position:relative}.jkl-checkbox__input{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:1lh;inline-size:1lh;margin:0;padding:0;cursor:pointer;z-index:1;-webkit-appearance:none;appearance:none;background:transparent;border:0;outline:0;border-style:none;outline-style:none}.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{outline:revert;border-style:revert;outline-style:revert}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{color:var(--text-color);cursor:pointer;display:flex;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color}.jkl-checkbox__label:before{color:var(--icon-color);content:"check_box_outline_blank"/"";-webkit-margin-end:.25em;margin-inline-end:.25em;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform}.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)}.jkl-checkbox:has(>.jkl-checkbox__input:disabled){opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-checkbox:has(>.jkl-checkbox__input:disabled) *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-checkbox:has(>.jkl-checkbox__input:disabled){opacity:1;color:GrayText;border-color:GrayText}}}@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/chip/chip.css

@@ -24,6 +24,9 @@
   gap: var(--gap);
   padding: 0 var(--padding-inline);
   min-height: var(--height);
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
+  transition-property: background-color;
 }
 @media screen and (forced-colors: active) {
   .jkl-chip {
@@ -31,27 +34,17 @@
     border-bottom-style: dotted;
   }
 }
-.jkl-chip::after {
-  content: "";
-  opacity: 0;
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background-color: var(--text-color);
-  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-strong);
   outline-offset: 3px;
 }
-.jkl-chip:hover::after {
-  opacity: 0.15;
+.jkl-chip:hover {
+  background-color: color-mix(in srgb, var(--background-color, transparent), var(--hover-accent-color, var(--jkl-color-background-contrast)) var(--jkl-opacity-hover, 10%));
 }
 .jkl-chip--filter[aria-pressed=true] {
   --background-color: var(--jkl-color-background-contrast);
   --text-color: var(--jkl-color-text-on-contrast);
+  --hover-accent-color: var(--jkl-color-text-on-contrast);
   --border-color: var(--jkl-color-border-strong);
 }
 @media screen and (forced-colors: active) {

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-subdued);--background-color:var(--jkl-color-background-container);--border-width:0.0625rem;font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);position:relative;background-color:var(--background-color);color:var(--text-color);border:var(--border-width) solid var(--border-color);border-radius:99999px;display:inline-flex;align-items:center;text-align:initial;white-space:nowrap;gap:var(--gap);padding:0 var(--padding-inline);min-height:var(--height)}@media screen and (forced-colors:active){.jkl-chip{border:2px CanvasText;border-style:none none dotted}}.jkl-chip:after{content:"";opacity:0;position:absolute;inset:0;border-radius:inherit;background-color:var(--text-color);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-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)}
+.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;font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);position:relative;background-color:var(--background-color);color:var(--text-color);border:var(--border-width) solid var(--border-color);border-radius:99999px;display:inline-flex;align-items:center;text-align:initial;white-space:nowrap;gap:var(--gap);padding:0 var(--padding-inline);min-height:var(--height);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color}@media screen and (forced-colors:active){.jkl-chip{border:2px CanvasText;border-style:none none dotted}}.jkl-chip:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-chip:hover{background-color:color-mix(in srgb,var(--background-color,transparent),var(--hover-accent-color,var(--jkl-color-background-contrast)) var(--jkl-opacity-hover,10%))}.jkl-chip--filter[aria-pressed=true]{--background-color:var(--jkl-color-background-contrast);--text-color:var(--jkl-color-text-on-contrast);--hover-accent-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

@@ -28,36 +28,26 @@
     padding: 0 var(--padding-inline);
     min-height: var(--height);
 
+    @include jkl.motion("standard", "productive", background-color);
+
     @include jkl.forced-colors-mode {
         border: 2px none CanvasText;
         border-bottom-style: dotted;
     }
 
-    &::after {
-        content: "";
-        opacity: 0;
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        background-color: var(--text-color);
-
-        @include jkl.motion("standard", "productive", opacity);
-    }
-
     &:focus-visible {
         @include jkl.focus-outline;
     }
 
     &:hover {
-        &::after {
-            opacity: 0.15;
-        }
+        @include jkl.hover-bg;
     }
 
     &--filter {
         &[aria-pressed="true"] {
             --background-color: var(--jkl-color-background-contrast);
             --text-color: var(--jkl-color-text-on-contrast);
+            --hover-accent-color: var(--jkl-color-text-on-contrast);
             --border-color: var(--jkl-color-border-strong);
 
             @include jkl.forced-colors-mode {

package/styles/components/combobox/combobox.css

@@ -96,6 +96,31 @@
       border: 0.125rem solid ButtonText;
     }
   }
+  .jkl-combobox__wrapper:has(> :is(input, textarea):disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-combobox__wrapper:has(> :is(input, textarea):disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-combobox__wrapper:has(> :is(input, textarea):disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-combobox__wrapper:has(> :is(input, textarea):read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
+  .jkl-combobox__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):hover, .jkl-combobox__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):focus-within, .jkl-combobox__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
+  }
   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-strong);
     outline-offset: 3px;
@@ -154,6 +179,26 @@
   .jkl-combobox__wrapper:hover ~ .jkl-combobox__arrow {
     transform: translateY(calc(-50% + 0.1875rem));
   }
+  .jkl-combobox__wrapper:has(.jkl-combobox__search-input:disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-combobox__wrapper:has(.jkl-combobox__search-input:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-combobox__wrapper:has(.jkl-combobox__search-input:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-combobox__wrapper:has(.jkl-combobox__search-input:read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
   .jkl-combobox__search-input {
     border: none;
     outline: none;

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);--jkl-combobox-option-height:min(var(--jkl-unit-60), 3rem);--jkl-combobox-search-input-height:1.75rem}@media (width >= 0) and (max-width:679px){.jkl-combobox{--jkl-combobox-input-height:2.75rem}}.jkl-combobox{position:relative;border-style:none}.jkl-combobox,.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}.jkl-combobox,.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{gap:1ch;cursor:pointer;--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:#0000;--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;max-width:100%;position:relative;display:flex;align-items:center;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 .0625rem var(--border-color),0 0 0 .0625rem #0000}.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])){--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{flex-shrink:0;display:flex;box-sizing:border-box;align-items:center;justify-content:center;padding:var(--jkl-text-input-action-button-padding);height:var(--jkl-text-input-action-button-size);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-combobox__wrapper>.jkl-text-input-action-button:hover{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){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px;background-color:var(--jkl-color-background-container)}.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{border:none;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:var(--jkl-text-style-text-medium);border-style:none}.jkl-combobox__search-input,.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}.jkl-combobox__search-input,.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{outline:none;border:none}.jkl-combobox__search-input:focus-visible{outline:none}}.jkl-combobox__search-input::placeholder{opacity:1;color:var(--placeholder-color)}.jkl-combobox__arrow{pointer-events:none;transform:translateY(-50%);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){.jkl-combobox__arrow,.jkl-combobox__arrow path,.jkl-combobox__arrow svg{stroke:CanvasText;fill:CanvasText}}.jkl-combobox__menu{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;position:absolute;z-index:7000;left:-.0625rem;right:-.0625rem;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;max-height:calc((var(--jkl-combobox-max-shown-options, 5) + .5)*var(--jkl-combobox-input-height))}.jkl-combobox__option{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:initial;transition-property:color,background-color;min-height:var(--jkl-combobox-option-height);padding:var(--jkl-combobox-option-padding);width:100%;text-align:left}.jkl-combobox__option:focus,.jkl-combobox__option:hover{background-color:var(--jkl-color-background-container-accent)}.jkl-combobox__option-description{font:var(--jkl-text-style-text-small);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{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:var(--jkl-combobox-chips-gap);min-width:0;box-sizing:border-box;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__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{position:absolute;background-color:initial;width:94%;padding-right:0}.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);--jkl-combobox-option-height:min(var(--jkl-unit-60), 3rem);--jkl-combobox-search-input-height:1.75rem}@media (width >= 0) and (max-width:679px){.jkl-combobox{--jkl-combobox-input-height:2.75rem}}.jkl-combobox{position:relative;outline:0;border-style:none;outline-style:none}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox{outline:revert;border-style: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{gap:1ch;cursor:pointer;--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);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;max-width:100%;position:relative;display:flex;align-items:center;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 .0625rem var(--border-color),0 0 0 .0625rem transparent}.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])){--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}}.jkl-combobox__wrapper:has(>:is(input,textarea):disabled){opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-combobox__wrapper:has(>:is(input,textarea):disabled) *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-combobox__wrapper:has(>:is(input,textarea):disabled){opacity:1;color:GrayText;border-color:GrayText}}.jkl-combobox__wrapper:has(>:is(input,textarea):read-only:not(:disabled)){--border-color:var(--jkl-color-border-subdued);--background-color:transparent;cursor:default}.jkl-combobox__wrapper:has(>:is(input,textarea):read-only:not(:disabled)):focus-within,.jkl-combobox__wrapper:has(>:is(input,textarea):read-only:not(:disabled)):has([data-focused=true]),.jkl-combobox__wrapper:has(>:is(input,textarea):read-only:not(:disabled)):hover{--border-color:var(--jkl-color-border-subdued);--background-color:transparent;box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent}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{flex-shrink:0;display:flex;box-sizing:border-box;align-items:center;justify-content:center;padding:var(--jkl-text-input-action-button-padding);height:var(--jkl-text-input-action-button-size);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){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px;background-color:var(--jkl-color-background-container)}.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__wrapper:has(.jkl-combobox__search-input:disabled){opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-combobox__wrapper:has(.jkl-combobox__search-input:disabled) *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-combobox__wrapper:has(.jkl-combobox__search-input:disabled){opacity:1;color:GrayText;border-color:GrayText}}.jkl-combobox__wrapper:has(.jkl-combobox__search-input:read-only:not(:disabled)){--border-color:var(--jkl-color-border-subdued);--background-color:transparent;cursor:default}.jkl-combobox__search-input{border:none;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:var(--jkl-text-style-text-medium);outline:0;border-style:none;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{outline:revert;border-style: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{outline:none;border:none}.jkl-combobox__search-input:focus-visible{outline:none}}.jkl-combobox__search-input::placeholder{opacity:1;color:var(--placeholder-color)}.jkl-combobox__arrow{pointer-events:none;transform:translateY(-50%);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){.jkl-combobox__arrow,.jkl-combobox__arrow path,.jkl-combobox__arrow svg{stroke:CanvasText;fill:CanvasText}}.jkl-combobox__menu{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;position:absolute;z-index:7000;left:-.0625rem;right:-.0625rem;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;max-height:calc((var(--jkl-combobox-max-shown-options, 5) + .5)*var(--jkl-combobox-input-height))}.jkl-combobox__option{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:transparent;transition-property:color,background-color;min-height:var(--jkl-combobox-option-height);padding:var(--jkl-combobox-option-padding);width:100%;text-align:left}.jkl-combobox__option:focus,.jkl-combobox__option:hover{background-color:var(--jkl-color-background-container-accent)}.jkl-combobox__option-description{font:var(--jkl-text-style-text-small);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{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:var(--jkl-combobox-chips-gap);min-width:0;box-sizing:border-box;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__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{position:absolute;background-color:transparent;width:94%;padding-right:0}.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}}

package/styles/components/combobox/combobox.scss

@@ -58,6 +58,17 @@
             &:hover ~ .jkl-combobox__arrow {
                 transform: translateY(calc(-50% + #{jkl.rem(3px)}));
             }
+
+            // Søkefeltet ligger inne i __chips, så barnekombinatoren i `wrapper-styles`
+            // treffer ikke. Combobox må derfor koble på tilstandene selv.
+            &:has(.jkl-combobox__search-input:disabled) {
+                @include jkl.disabled-control;
+            }
+
+            // En disabled input er også `:read-only`, så den må ekskluderes eksplisitt.
+            &:has(.jkl-combobox__search-input:read-only:not(:disabled)) {
+                @include jkl.read-only-control;
+            }
         }
 
         &__search-input {

package/styles/components/cookie-consent/cookie-consent.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-cookie-consent-modal{position:fixed;z-index:9000!important}.jkl-cookie-consent-modal[aria-hidden=true]{display:none}.jkl-cookie-consent-modal>.jkl-cookie-consent-modal__overlay{position:fixed;background:#0000004d;inset:0;transition:.2s}.jkl-cookie-consent-modal__info-text{font:var(--jkl-text-style-paragraph-small)}.jkl-cookie-consent-modal__checkbox{margin-bottom:var(--jkl-unit-10);margin-top:var(--jkl-unit-30)}}
+@layer jokul.components{.jkl-cookie-consent-modal{position:fixed;z-index:9000!important}.jkl-cookie-consent-modal[aria-hidden=true]{display:none}.jkl-cookie-consent-modal>.jkl-cookie-consent-modal__overlay{position:fixed;background:rgba(0,0,0,.3);inset:0;transition:.2s}.jkl-cookie-consent-modal__info-text{font:var(--jkl-text-style-paragraph-small)}.jkl-cookie-consent-modal__checkbox{margin-bottom:var(--jkl-unit-10);margin-top:var(--jkl-unit-30)}}

package/styles/components/countdown/countdown.css

@@ -26,10 +26,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uxffhyd var(--duration) linear forwards;
+    animation: jkl-downcount-uy563pg var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uxffhyd {
+  @keyframes jkl-downcount-uy563pg {
     from {
       width: 100%;
     }

package/styles/components/countdown/countdown.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);width:100%;overflow:hidden}.jkl-countdown__tracker{display:block;height:var(--bar-height);background-color:var(--bar-color)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-uxffhyd var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-uxffhyd{0%{width:100%}to{width:0}}}
+@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);width:100%;overflow:hidden}.jkl-countdown__tracker{display:block;height:var(--bar-height);background-color:var(--bar-color)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-uy563pg var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-uy563pg{0%{width:100%}to{width:0}}}

package/styles/components/date-input/calendar/calendar.css

@@ -33,19 +33,30 @@
   .jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)), .jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)) * {
     cursor: pointer;
   }
-  .jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)):has(.day:not(:checked)):hover::after {
-    background-color: color-mix(in srgb, currentColor 15%, transparent);
+  .jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)):has(.day:not(:disabled)):hover::after {
+    background-color: color-mix(in srgb, var(--background-color, transparent), var(--hover-accent-color, var(--jkl-color-background-contrast)) var(--jkl-opacity-hover, 10%));
   }
   .jkl-calendar .jkl-button--calendar:has(.day:disabled) {
-    opacity: 0.5;
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
   }
-  .jkl-calendar .jkl-button--calendar:has(.day:disabled), .jkl-calendar .jkl-button--calendar:has(.day:disabled) * {
+  .jkl-calendar .jkl-button--calendar:has(.day:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
     cursor: not-allowed;
   }
+  @media screen and (forced-colors: active) {
+    .jkl-calendar .jkl-button--calendar:has(.day:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
   .jkl-calendar .jkl-button--calendar:has(.day:checked) {
     color: var(--jkl-color-text-on-contrast);
   }
   .jkl-calendar .jkl-button--calendar:has(.day:checked)::after {
+    --hover-accent-color: var(--jkl-color-text-on-contrast);
+    --background-color: var(--jkl-color-background-contrast);
     background-color: var(--jkl-color-background-contrast);
   }
   .jkl-calendar .jkl-button--calendar:has(.day:focus-visible, .day:focus) {

package/styles/components/date-input/calendar/calendar.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-calendar__labels{-webkit-margin-after:var(--jkl-unit-20);margin-block-end:var(--jkl-unit-20)}.jkl-calendar__navigation{margin-bottom:var(--jkl-unit-20)}.jkl-calendar .jkl-button--calendar{aspect-ratio:1;box-sizing:border-box;display:flex;place-items:center;place-content:center;padding:0;border-radius:50%;position:relative}.jkl-calendar .jkl-button--calendar span{z-index:2}.jkl-calendar .jkl-button--calendar:after{content:"";display:block;border-radius:50%;width:4ch;aspect-ratio:1;position:absolute;box-sizing:border-box}.jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)),.jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)) *{cursor:pointer}.jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)):has(.day:not(:checked)):hover:after{background-color:color-mix(in srgb,currentColor 15%,#0000)}.jkl-calendar .jkl-button--calendar:has(.day:disabled){opacity:.5}.jkl-calendar .jkl-button--calendar:has(.day:disabled),.jkl-calendar .jkl-button--calendar:has(.day:disabled) *{cursor:not-allowed}.jkl-calendar .jkl-button--calendar:has(.day:checked){color:var(--jkl-color-text-on-contrast)}.jkl-calendar .jkl-button--calendar:has(.day:checked):after{background-color:var(--jkl-color-background-contrast)}.jkl-calendar .jkl-button--calendar:has(.day:focus-visible,.day:focus){outline:3px solid var(--jkl-color-border-strong)}.jkl-calendar .jkl-button--calendar .day{position:absolute;opacity:0;width:100%;height:100%}}
+@layer jokul.components{.jkl-calendar__labels{-webkit-margin-after:var(--jkl-unit-20);margin-block-end:var(--jkl-unit-20)}.jkl-calendar__navigation{margin-bottom:var(--jkl-unit-20)}.jkl-calendar .jkl-button--calendar{aspect-ratio:1;box-sizing:border-box;display:flex;place-items:center;place-content:center;padding:0;border-radius:50%;position:relative}.jkl-calendar .jkl-button--calendar span{z-index:2}.jkl-calendar .jkl-button--calendar:after{content:"";display:block;border-radius:50%;width:4ch;aspect-ratio:1;position:absolute;box-sizing:border-box}.jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)),.jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)) *{cursor:pointer}.jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)):has(.day:not(:disabled)):hover:after{background-color:color-mix(in srgb,var(--background-color,transparent),var(--hover-accent-color,var(--jkl-color-background-contrast)) var(--jkl-opacity-hover,10%))}.jkl-calendar .jkl-button--calendar:has(.day:disabled){opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-calendar .jkl-button--calendar:has(.day:disabled) *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-calendar .jkl-button--calendar:has(.day:disabled){opacity:1;color:GrayText;border-color:GrayText}}.jkl-calendar .jkl-button--calendar:has(.day:checked){color:var(--jkl-color-text-on-contrast)}.jkl-calendar .jkl-button--calendar:has(.day:checked):after{--hover-accent-color:var(--jkl-color-text-on-contrast);--background-color:var(--jkl-color-background-contrast);background-color:var(--jkl-color-background-contrast)}.jkl-calendar .jkl-button--calendar:has(.day:focus-visible,.day:focus){outline:3px solid var(--jkl-color-border-strong)}.jkl-calendar .jkl-button--calendar .day{position:absolute;opacity:0;width:100%;height:100%}}

package/styles/components/date-input/calendar/calendar.scss

@@ -1,4 +1,4 @@
-@use "../../../jkl/index";
+@use "../../../jkl";
 
 @layer jokul.components {
     .jkl-calendar {
@@ -39,27 +39,23 @@
                     cursor: pointer;
                 }
 
-                &:has(.day:not(:checked)):hover {
+                &:has(.day:not(:disabled)):hover {
                     &::after {
-                        background-color: color-mix(in srgb,
-                        currentColor 15%,
-                        transparent);
+                        @include jkl.hover-bg;
                     }
                 }
             }
 
             &:has(.day:disabled) {
-                opacity: 0.5;
-
-                &, * {
-                    cursor: not-allowed;
-                }
+                @include jkl.disabled-control;
             }
 
             &:has(.day:checked) {
                 color: var(--jkl-color-text-on-contrast);
 
                 &::after {
+                    --hover-accent-color: var(--jkl-color-text-on-contrast);
+                    --background-color: var(--jkl-color-background-contrast);
                     background-color: var(--jkl-color-background-contrast);
                 }
             }