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

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;
@@ -81,15 +79,16 @@
     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) {
@@ -98,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) {
@@ -126,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 {
@@ -145,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;
@@ -160,6 +159,7 @@
     outline: none;
     padding: 0;
     flex: 1 1 1ch;
+    min-width: 0;
     max-height: var(--jkl-combobox-search-input-height);
     background: none;
     -webkit-appearance: none;
@@ -233,8 +233,8 @@
     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));
@@ -247,7 +247,7 @@
     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);
@@ -256,7 +256,7 @@
     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: var(--jkl-text-style-text-small);
@@ -272,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 {
@@ -286,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;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-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;border-style:none;color:inherit;flex:1 1 1ch;font:var(--jkl-text-style-text-medium);max-height:var(--jkl-combobox-search-input-height);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-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: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:var(--jkl-color-background-interactive);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:var(--jkl-color-background-interactive-hover)}.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;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}}

package/styles/components/combobox/combobox.scss

@@ -6,8 +6,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: #{jkl.rem(48px)};
         --jkl-combobox-actions-right: var(--jkl-unit-10);
         --jkl-combobox-actions-top: var(--jkl-unit-05);
@@ -47,7 +46,7 @@
             @include jkl.keyboard-navigation {
                 &:has(:focus-visible) {
                     @include jkl.focus-outline;
-                    background-color: var(--jkl-color-background-input-focus);
+                    background-color: var(--jkl-color-background-container);
                 }
             }
 
@@ -65,6 +64,7 @@
             outline: none;
             padding: 0;
             flex: 1 1 1ch;
+            min-width: 0;
             max-height: var(--jkl-combobox-search-input-height);
 
             @include shared.input-styles;
@@ -77,10 +77,8 @@
             @include jkl.motion;
             transition-property: transform, color;
 
-            @include jkl.forced-colors-svg-fallback(
-                $stroke: CanvasText,
-                $fill: CanvasText
-            );
+            @include jkl.forced-colors-svg-fallback($stroke: CanvasText,
+                $fill: CanvasText);
         }
 
         &__menu {
@@ -92,14 +90,11 @@
             z-index: jkl.$z-index--dropdown;
             left: jkl.rem(-1px);
             right: jkl.rem(-1px);
-            background-color: var(--jkl-color-background-container-high);
-            border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
+            background-color: var(--jkl-color-background-container);
+            border: jkl.rem(2px) solid var(--jkl-color-border-strong);
             border-radius: 0 0 jkl.rem(3px) jkl.rem(3px);
             box-sizing: border-box;
-            max-height: calc(
-                calc(var(--jkl-combobox-max-shown-options, 5) + 0.5) *
-                    var(--jkl-combobox-input-height)
-            );
+            max-height: calc(calc(var(--jkl-combobox-max-shown-options, 5) + 0.5) * var(--jkl-combobox-input-height));
         }
 
         &__option {
@@ -109,7 +104,7 @@
             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);
@@ -119,7 +114,7 @@
 
             &:focus,
             &:hover {
-                background-color: var(--jkl-color-background-interactive-hover);
+                background-color: color-mix(in srgb, currentColor 10%, transparent);
             }
 
             &-description {
@@ -140,10 +135,12 @@
 
         &__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-chip {
@@ -158,13 +155,13 @@
         &--invalid {
             .jkl-combobox__search-input,
             .jkl-combobox__wrapper {
-                background-color: var(--jkl-color-background-alert-error);
+                background-color: var(--jkl-color-error-background-container);
             }
 
             .jkl-combobox__search-input,
             .jkl-combobox__button,
             .jkl-combobox__wrapper {
-                color: var(--jkl-color-text-on-alert);
+                color: var(--jkl-color-error-text-default);
             }
         }
 

package/styles/components/countdown/countdown.css

@@ -3,8 +3,8 @@
  */
 @layer jokul.components {
   .jkl-countdown {
-    --track-color: var(--jkl-color-border-separator);
-    --bar-color: var(--jkl-color-border-input-focus);
+    --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;
@@ -26,10 +26,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-usqgar2 var(--duration) linear forwards;
+    animation: jkl-downcount-u551uxt var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-usqgar2 {
+  @keyframes jkl-downcount-u551uxt {
     from {
       width: 100%;
     }

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-usqgar2 var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-usqgar2{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);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-u551uxt var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-u551uxt{0%{width:100%}to{width:0}}}

package/styles/components/datepicker/_calendar-date-button.scss

@@ -1,14 +1,14 @@
 @use "../../jkl";
 
 @layer jokul.components {
-    // Custom tweaks for iPhone SE
-    @include jkl.screen-to(375px) {
-        --jkl-calendar-date-size: var(--jkl-unit-40);
-    }
-
     .jkl-calendar-date-button {
         --jkl-calendar-date-size: var(--jkl-unit-50);
 
+        // Custom tweaks for iPhone SE
+        @include jkl.screen-to(375px) {
+            --jkl-calendar-date-size: var(--jkl-unit-40);
+        }
+
         @include jkl.text-style("text-small");
 
         appearance: none;
@@ -30,7 +30,9 @@
         padding-top: var(--jkl-unit-02); // adjust visual alignment of text
 
         @include jkl.motion("entrance", "energetic");
-        transition-property: color, background-color, box-shadow;
+        transition-property: color,
+        background-color,
+        box-shadow;
 
         @include jkl.reset-outline;
 
@@ -46,14 +48,14 @@
 
         // Other dates
         &:hover:not(:disabled) {
-            background-color: var(--jkl-color-background-interactive-hover);
+            background-color: color-mix(in srgb, currentColor 10%, transparent);
             cursor: pointer;
         }
 
         // Selected date
         &[aria-pressed="true"] {
-            background-color: var(--jkl-color-background-container-inverted);
-            color: var(--jkl-color-text-inverted);
+            background-color: var(--jkl-color-background-contrast);
+            color: var(--jkl-color-text-on-contrast);
             cursor: pointer;
 
             &:hover {

package/styles/components/datepicker/_calendar-navigation-dropdown.scss

@@ -34,7 +34,7 @@
 
             & option {
                 color: var(--jkl-color-text-default);
-                background-color: var(--jkl-color-background-container-high);
+                background-color: var(--jkl-color-background-container);
                 text-align: left;
             }
 

package/styles/components/datepicker/_calendar.scss

@@ -1,18 +1,17 @@
 @use "../../jkl";
 
 @layer jokul.components {
-
-    // Custom tweaks for iPhone SE
-    @include jkl.screen-to(375px) {
-        --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
-    }
-
     .jkl-calendar {
         --jkl-calendar-padding: var(--jkl-unit-15) var(--jkl-unit-20) var(--jkl-unit-20);
         --jkl-calendar-gap: var(--jkl-unit-15);
 
+        // Custom tweaks for iPhone SE
+        @include jkl.screen-to(375px) {
+            --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
+        }
+
         display: block;
-        background-color: var(--jkl-color-background-container-high);
+        background-color: var(--jkl-color-background-container);
         color: var(--jkl-color);
 
         &__padding {

package/styles/components/datepicker/datepicker.css

@@ -2,14 +2,18 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.components {
-  @media (width >= 0) and (max-width: 374px) {
-    --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
-  }
   .jkl-calendar {
     --jkl-calendar-padding: var(--jkl-unit-15) var(--jkl-unit-20) var(--jkl-unit-20);
     --jkl-calendar-gap: var(--jkl-unit-15);
+  }
+  @media (width >= 0) and (max-width: 374px) {
+    .jkl-calendar {
+      --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
+    }
+  }
+  .jkl-calendar {
     display: block;
-    background-color: var(--jkl-color-background-container-high);
+    background-color: var(--jkl-color-background-container);
     color: var(--jkl-color);
   }
   .jkl-calendar__padding {
@@ -82,11 +86,11 @@
   }
   .jkl-calendar-navigation-dropdown__select option {
     color: var(--jkl-color-text-default);
-    background-color: var(--jkl-color-background-container-high);
+    background-color: var(--jkl-color-background-container);
     text-align: left;
   }
   .jkl-calendar-navigation-dropdown__select:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-calendar-navigation-dropdown__chevron {
@@ -114,11 +118,15 @@
   }
 }
 @layer jokul.components {
+  .jkl-calendar-date-button {
+    --jkl-calendar-date-size: var(--jkl-unit-50);
+  }
   @media (width >= 0) and (max-width: 374px) {
-    --jkl-calendar-date-size: var(--jkl-unit-40);
+    .jkl-calendar-date-button {
+      --jkl-calendar-date-size: var(--jkl-unit-40);
+    }
   }
   .jkl-calendar-date-button {
-    --jkl-calendar-date-size: var(--jkl-unit-50);
     font: var(--jkl-text-style-text-small);
     appearance: none;
     position: relative;
@@ -167,12 +175,12 @@
     font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-calendar-date-button:hover:not(:disabled) {
-    background-color: var(--jkl-color-background-interactive-hover);
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
     cursor: pointer;
   }
   .jkl-calendar-date-button[aria-pressed=true] {
-    background-color: var(--jkl-color-background-container-inverted);
-    color: var(--jkl-color-text-inverted);
+    background-color: var(--jkl-color-background-contrast);
+    color: var(--jkl-color-text-on-contrast);
     cursor: pointer;
   }
   .jkl-calendar-date-button[aria-pressed=true]:hover {
@@ -182,7 +190,7 @@
     color: color(from var(--jkl-color-text-subdued) srgb r g b/70%);
   }
   .jkl-calendar-date-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
 }

package/styles/components/datepicker/datepicker.min.css

@@ -1 +1 @@
-@layer jokul.components{@media (width >= 0) and (max-width:374px){--jkl-calendar-padding:var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20)}.jkl-calendar{--jkl-calendar-padding:var(--jkl-unit-15) var(--jkl-unit-20) var(--jkl-unit-20);--jkl-calendar-gap:var(--jkl-unit-15);background-color:var(--jkl-color-background-container-high);color:var(--jkl-color);display:block}.jkl-calendar__padding{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--jkl-calendar-gap)}@media screen and (forced-colors:active){.jkl-calendar__padding{border:1px solid CanvasText}}}@layer jokul.components{.jkl-calendar-navigation{align-items:center;border:0;box-sizing:border-box;display:flex;justify-content:space-between;margin:0;padding:0;width:100%}.jkl-calendar-navigation-dropdown{--chevron-size:1.5rem;align-items:center;display:inline-flex}}@layer jokul.components{.jkl-calendar-navigation-dropdown>*{cursor:pointer}.jkl-calendar-navigation-dropdown__select{-webkit-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;color:inherit;font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);height:2.5rem;margin:0;padding:0;text-align:end;text-align-last:end;-webkit-padding-end:var(--chevron-size);border-style:none;outline:0;outline-style:none;padding-inline-end:var(--chevron-size)}.jkl-calendar-navigation-dropdown__select:active,.jkl-calendar-navigation-dropdown__select:focus,.jkl-calendar-navigation-dropdown__select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-calendar-navigation-dropdown__select{border-style:revert;outline:revert;outline-style:revert}.jkl-calendar-navigation-dropdown__select:active,.jkl-calendar-navigation-dropdown__select:focus,.jkl-calendar-navigation-dropdown__select:hover{outline:revert;outline-style:revert}}.jkl-calendar-navigation-dropdown__select option{background-color:var(--jkl-color-background-container-high);color:var(--jkl-color-text-default);text-align:left}.jkl-calendar-navigation-dropdown__select:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-calendar-navigation-dropdown__chevron{margin-left:calc(var(--chevron-size)*-1);pointer-events:none}.jkl-calendar-navigation-dropdown+.jkl-calendar-navigation-dropdown{-webkit-margin-start:var(--jkl-unit-10);margin-inline-start:var(--jkl-unit-10)}}@layer jokul.components{.jkl-calendar-table th{font:var(--jkl-text-style-text-small);padding-bottom:var(--jkl-unit-10)}.jkl-calendar-table td{text-align:center}.jkl-calendar-table td+td,.jkl-calendar-table th+th{padding-left:calc(var(--jkl-unit-10)/2)}.jkl-calendar-table tr+tr>td{padding-top:calc(var(--jkl-unit-10)/2)}}@layer jokul.components{@media (width >= 0) and (max-width:374px){--jkl-calendar-date-size:var(--jkl-unit-40)}.jkl-calendar-date-button{--jkl-calendar-date-size:var(--jkl-unit-50);align-items:center;-webkit-appearance:none;appearance:none;background-color:transparent;border-radius:50%;border-style:none;box-sizing:border-box;color:var(--jkl-color);display:inline-flex;font:var(--jkl-text-style-text-small);height:var(--jkl-calendar-date-size);justify-content:center;margin:var(--jkl-calendar-date-margin);outline:0;outline-style:none;padding:0;padding-top:var(--jkl-unit-02);position:relative;transition-duration:var(--jkl-motion-timing-energetic);transition-property:color,background-color,box-shadow;transition-timing-function:var(--jkl-motion-easing-entrance);width:var(--jkl-calendar-date-size)}.jkl-calendar-date-button:active,.jkl-calendar-date-button:focus,.jkl-calendar-date-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-calendar-date-button{border-style:revert;outline:revert;outline-style:revert}.jkl-calendar-date-button:active,.jkl-calendar-date-button:focus,.jkl-calendar-date-button:hover{outline:revert;outline-style:revert}}.jkl-calendar-date-button[data-adjacent=true]{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);padding:0}.jkl-calendar-date-button[aria-current=date]{font-weight:var(--jkl-font-weight-bold)}.jkl-calendar-date-button:hover:not(:disabled){background-color:var(--jkl-color-background-interactive-hover);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]{background-color:var(--jkl-color-background-container-inverted);color:var(--jkl-color-text-inverted);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]:hover{color:var(--jkl-color)}.jkl-calendar-date-button:disabled{color:color(from var(--jkl-color-text-subdued) srgb r g b/70%)}.jkl-calendar-date-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}}@layer jokul.components{.jkl-datepicker{align-items:flex-start;border-style:none;display:flex;flex-direction:column;outline:0;outline-style:none;position:relative}.jkl-datepicker:active,.jkl-datepicker:focus,.jkl-datepicker:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-datepicker{border-style:revert;outline:revert;outline-style:revert}.jkl-datepicker:active,.jkl-datepicker:focus,.jkl-datepicker:hover{outline:revert;outline-style:revert}}.jkl-datepicker__input-wrapper{display:contents;position:relative}.jkl-datepicker .jkl-datepicker__input{padding-bottom:calc(var(--jkl-text-input-vertical-padding) - .08em);padding-top:calc(var(--jkl-text-input-vertical-padding) + .08em)}.jkl-datepicker__calendar-wrapper{left:0;position:absolute;top:calc(100% + .875rem);z-index:7000}@media (width >= 0) and (max-width:679px){.jkl-datepicker__calendar-wrapper{left:-1.15rem}}@media (width >= 0) and (max-width:374px){.jkl-datepicker__calendar-wrapper{left:-2.5rem}}}
+@layer jokul.components{.jkl-calendar{--jkl-calendar-padding:var(--jkl-unit-15) var(--jkl-unit-20) var(--jkl-unit-20);--jkl-calendar-gap:var(--jkl-unit-15)}@media (width >= 0) and (max-width:374px){.jkl-calendar{--jkl-calendar-padding:var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20)}}.jkl-calendar{background-color:var(--jkl-color-background-container);color:var(--jkl-color);display:block}.jkl-calendar__padding{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--jkl-calendar-gap)}@media screen and (forced-colors:active){.jkl-calendar__padding{border:1px solid CanvasText}}}@layer jokul.components{.jkl-calendar-navigation{align-items:center;border:0;box-sizing:border-box;display:flex;justify-content:space-between;margin:0;padding:0;width:100%}.jkl-calendar-navigation-dropdown{--chevron-size:1.5rem;align-items:center;display:inline-flex}}@layer jokul.components{.jkl-calendar-navigation-dropdown>*{cursor:pointer}.jkl-calendar-navigation-dropdown__select{-webkit-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;color:inherit;font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);height:2.5rem;margin:0;padding:0;text-align:end;text-align-last:end;-webkit-padding-end:var(--chevron-size);border-style:none;outline:0;outline-style:none;padding-inline-end:var(--chevron-size)}.jkl-calendar-navigation-dropdown__select:active,.jkl-calendar-navigation-dropdown__select:focus,.jkl-calendar-navigation-dropdown__select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-calendar-navigation-dropdown__select{border-style:revert;outline:revert;outline-style:revert}.jkl-calendar-navigation-dropdown__select:active,.jkl-calendar-navigation-dropdown__select:focus,.jkl-calendar-navigation-dropdown__select:hover{outline:revert;outline-style:revert}}.jkl-calendar-navigation-dropdown__select option{background-color:var(--jkl-color-background-container);color:var(--jkl-color-text-default);text-align:left}.jkl-calendar-navigation-dropdown__select:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-calendar-navigation-dropdown__chevron{margin-left:calc(var(--chevron-size)*-1);pointer-events:none}.jkl-calendar-navigation-dropdown+.jkl-calendar-navigation-dropdown{-webkit-margin-start:var(--jkl-unit-10);margin-inline-start:var(--jkl-unit-10)}}@layer jokul.components{.jkl-calendar-table th{font:var(--jkl-text-style-text-small);padding-bottom:var(--jkl-unit-10)}.jkl-calendar-table td{text-align:center}.jkl-calendar-table td+td,.jkl-calendar-table th+th{padding-left:calc(var(--jkl-unit-10)/2)}.jkl-calendar-table tr+tr>td{padding-top:calc(var(--jkl-unit-10)/2)}}@layer jokul.components{.jkl-calendar-date-button{--jkl-calendar-date-size:var(--jkl-unit-50)}@media (width >= 0) and (max-width:374px){.jkl-calendar-date-button{--jkl-calendar-date-size:var(--jkl-unit-40)}}.jkl-calendar-date-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:transparent;border-radius:50%;border-style:none;box-sizing:border-box;color:var(--jkl-color);display:inline-flex;font:var(--jkl-text-style-text-small);height:var(--jkl-calendar-date-size);justify-content:center;margin:var(--jkl-calendar-date-margin);outline:0;outline-style:none;padding:0;padding-top:var(--jkl-unit-02);position:relative;transition-duration:var(--jkl-motion-timing-energetic);transition-property:color,background-color,box-shadow;transition-timing-function:var(--jkl-motion-easing-entrance);width:var(--jkl-calendar-date-size)}.jkl-calendar-date-button:active,.jkl-calendar-date-button:focus,.jkl-calendar-date-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-calendar-date-button{border-style:revert;outline:revert;outline-style:revert}.jkl-calendar-date-button:active,.jkl-calendar-date-button:focus,.jkl-calendar-date-button:hover{outline:revert;outline-style:revert}}.jkl-calendar-date-button[data-adjacent=true]{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);padding:0}.jkl-calendar-date-button[aria-current=date]{font-weight:var(--jkl-font-weight-bold)}.jkl-calendar-date-button:hover:not(:disabled){background-color:color-mix(in srgb,currentColor 10%,transparent);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]{background-color:var(--jkl-color-background-contrast);color:var(--jkl-color-text-on-contrast);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]:hover{color:var(--jkl-color)}.jkl-calendar-date-button:disabled{color:color(from var(--jkl-color-text-subdued) srgb r g b/70%)}.jkl-calendar-date-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}@layer jokul.components{.jkl-datepicker{align-items:flex-start;border-style:none;display:flex;flex-direction:column;outline:0;outline-style:none;position:relative}.jkl-datepicker:active,.jkl-datepicker:focus,.jkl-datepicker:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-datepicker{border-style:revert;outline:revert;outline-style:revert}.jkl-datepicker:active,.jkl-datepicker:focus,.jkl-datepicker:hover{outline:revert;outline-style:revert}}.jkl-datepicker__input-wrapper{display:contents;position:relative}.jkl-datepicker .jkl-datepicker__input{padding-bottom:calc(var(--jkl-text-input-vertical-padding) - .08em);padding-top:calc(var(--jkl-text-input-vertical-padding) + .08em)}.jkl-datepicker__calendar-wrapper{left:0;position:absolute;top:calc(100% + .875rem);z-index:7000}@media (width >= 0) and (max-width:679px){.jkl-datepicker__calendar-wrapper{left:-1.15rem}}@media (width >= 0) and (max-width:374px){.jkl-datepicker__calendar-wrapper{left:-2.5rem}}}

package/styles/components/description-list/description-list.css

@@ -58,6 +58,6 @@
   }
   .jkl-description-list[data-separators=true] .seperator:not(:first-of-type) {
     margin-block: var(--jkl-unit-15);
-    border-top: 1px solid var(--jkl-color-border-separator);
+    border-top: 1px solid var(--jkl-color-border-subdued);
   }
 }

package/styles/components/description-list/description-list.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-description-list{display:grid;grid-template-columns:1fr;row-gap:var(--jkl-unit-05)}.jkl-description-list .seperator{display:none}.jkl-description-list__detail+.seperator{border:0 solid transparent;grid-column:1/-1;margin-block:var(--jkl-unit-05);width:100%}.jkl-description-list__detail+.seperator:not(:first-of-type){display:unset}.jkl-description-list__term{font-weight:var(--jkl-font-weight-bold)}.jkl-description-list__detail{margin-left:0}@media (min-width:60ch){.jkl-description-list[data-alignment=horizontal]{column-gap:1.5em;grid-auto-flow:column;grid-template-columns:fit-content(40%) 1fr}.jkl-description-list[data-alignment=horizontal] .jkl-description-list__term{grid-column-start:1;margin:0;overflow-wrap:break-word}.jkl-description-list[data-alignment=horizontal] .jkl-description-list__detail{grid-column-start:2}.jkl-description-list[data-alignment=justified]{column-gap:1.5em;grid-auto-flow:column;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.jkl-description-list[data-alignment=justified] .jkl-description-list__term{grid-column-start:1;margin:0;overflow-wrap:break-word}.jkl-description-list[data-alignment=justified] .jkl-description-list__detail{grid-column-start:2}.jkl-description-list[data-alignment=justified] .jkl-description-list__detail{text-align:end}}.jkl-description-list[data-separators=true] .seperator:not(:first-of-type){border-top:1px solid var(--jkl-color-border-separator);margin-block:var(--jkl-unit-15)}}
+@layer jokul.components{.jkl-description-list{display:grid;grid-template-columns:1fr;row-gap:var(--jkl-unit-05)}.jkl-description-list .seperator{display:none}.jkl-description-list__detail+.seperator{border:0 solid transparent;grid-column:1/-1;margin-block:var(--jkl-unit-05);width:100%}.jkl-description-list__detail+.seperator:not(:first-of-type){display:unset}.jkl-description-list__term{font-weight:var(--jkl-font-weight-bold)}.jkl-description-list__detail{margin-left:0}@media (min-width:60ch){.jkl-description-list[data-alignment=horizontal]{column-gap:1.5em;grid-auto-flow:column;grid-template-columns:fit-content(40%) 1fr}.jkl-description-list[data-alignment=horizontal] .jkl-description-list__term{grid-column-start:1;margin:0;overflow-wrap:break-word}.jkl-description-list[data-alignment=horizontal] .jkl-description-list__detail{grid-column-start:2}.jkl-description-list[data-alignment=justified]{column-gap:1.5em;grid-auto-flow:column;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.jkl-description-list[data-alignment=justified] .jkl-description-list__term{grid-column-start:1;margin:0;overflow-wrap:break-word}.jkl-description-list[data-alignment=justified] .jkl-description-list__detail{grid-column-start:2}.jkl-description-list[data-alignment=justified] .jkl-description-list__detail{text-align:end}}.jkl-description-list[data-separators=true] .seperator:not(:first-of-type){border-top:1px solid var(--jkl-color-border-subdued);margin-block:var(--jkl-unit-15)}}

package/styles/components/description-list/description-list.scss

@@ -69,7 +69,7 @@
         &[data-separators="true"] {
             .seperator:not(:first-of-type) {
                 margin-block: var(--jkl-unit-15);
-                border-top: 1px solid var(--jkl-color-border-separator);
+                border-top: 1px solid var(--jkl-color-border-subdued);
             }
         }
     }

package/styles/components/expander/expandable.css

@@ -3,7 +3,7 @@
  */
 @layer jokul.components {
   .jkl-expandable {
-    background-color: var(--jkl-color-background-container-low);
+    background-color: var(--jkl-color-background-container);
     border: 1px solid transparent;
     border-radius: var(--border-radius);
     box-sizing: border-box;
@@ -23,7 +23,7 @@
     padding: var(--jkl-unit-20);
   }
   .jkl-expandable--stroke {
-    border-color: var(--jkl-color-border-separator);
+    border-color: var(--jkl-color-border-subdued);
     background-color: transparent;
     border-radius: 0;
     border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
@@ -31,40 +31,43 @@
   .jkl-expandable__wrapper {
     --border-radius: 0.25rem;
     --outline-offset: 3px;
+    --stroke-outline-offset: 3px;
+    --border-top-left-radius: var(--border-radius);
+    --border-top-right-radius: var(--border-radius);
+    --border-bottom-left-radius: var(--border-radius);
+    --border-bottom-right-radius: var(--border-radius);
+    position: relative;
+  }
+  .jkl-expandable__wrapper + .jkl-expandable__wrapper {
     --border-top-left-radius: 0;
     --border-top-right-radius: 0;
-    --border-bottom-left-radius: 0;
-    --border-bottom-right-radius: 0;
-    position: relative;
+    --stroke-outline-offset: -1px;
   }
   .jkl-expandable__wrapper + .jkl-expandable__wrapper .jkl-expandable--stroke {
     border-top: none;
   }
-  .jkl-expandable__wrapper:first-child {
-    --border-top-left-radius: var(--border-radius);
-    --border-top-right-radius: var(--border-radius);
-  }
-  .jkl-expandable__wrapper:last-child {
-    --border-bottom-left-radius: var(--border-radius);
-    --border-bottom-right-radius: var(--border-radius);
+  .jkl-expandable__wrapper:has(+ .jkl-expandable__wrapper) {
+    --border-bottom-left-radius: 0;
+    --border-bottom-right-radius: 0;
+    --stroke-outline-offset: -1px;
   }
   .jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke) {
-    --outline-offset: -1px;
+    --outline-offset: var(--stroke-outline-offset);
   }
   .jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
     outline-offset: var(--outline-offset);
   }
-  .jkl-expandable__wrapper:has(:focus-visible):first-child:last-child {
-    --outline-offset: 3px;
-  }
   .jkl-expandable__focus-container {
     border-radius: var(--border-radius);
     position: absolute;
     inset: 0;
   }
   .jkl-expander {
+    --hover-background-color: color-mix(in srgb,
+            currentColor 15%,
+            transparent);
     box-sizing: border-box;
     background: none;
     appearance: none;
@@ -104,7 +107,7 @@
   }
   @media (hover: hover) {
     .jkl-expander:hover {
-      background-color: var(--jkl-color-background-interactive-selected);
+      background-color: var(--hover-background-color);
     }
   }
   .jkl-expander {

package/styles/components/expander/expandable.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-expandable{background-color:var(--jkl-color-background-container-low);border:1px solid transparent;border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden;width:100%}.jkl-expandable__content[data-expanded=true]{height:auto}.jkl-expandable__content[data-expanded=false]{height:0}.jkl-expandable[data-visible-content=true] .jkl-expander{border-bottom:1px solid transparent}.jkl-expandable__content-wrapper{padding:var(--jkl-unit-20)}.jkl-expandable--stroke{background-color:transparent;border-color:var(--jkl-color-border-separator);border-radius:0;border-radius:var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius)}.jkl-expandable__wrapper{--border-radius:0.25rem;--outline-offset:3px;--border-top-left-radius:0;--border-top-right-radius:0;--border-bottom-left-radius:0;--border-bottom-right-radius:0;position:relative}.jkl-expandable__wrapper+.jkl-expandable__wrapper .jkl-expandable--stroke{border-top:none}.jkl-expandable__wrapper:first-child{--border-top-left-radius:var(--border-radius);--border-top-right-radius:var(--border-radius)}.jkl-expandable__wrapper:last-child{--border-bottom-left-radius:var(--border-radius);--border-bottom-right-radius:var(--border-radius)}.jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke){--outline-offset:-1px}.jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container{outline:3px solid var(--jkl-color-border-action);outline-offset:3px;outline-offset:var(--outline-offset)}.jkl-expandable__wrapper:has(:focus-visible):first-child:last-child{--outline-offset:3px}.jkl-expandable__focus-container{border-radius:var(--border-radius);inset:0;position:absolute}.jkl-expander{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;box-sizing:border-box;color:var(--jkl-color);cursor:pointer;display:flex;gap:.5rem;list-style:none;padding:var(--jkl-unit-20);text-align:left;width:100%}.jkl-expander::-webkit-details-marker{display:none}.jkl-expander__label{flex-grow:1}.jkl-expander__chevron{text-align:right;transform:rotate(0turn);transition-property:transform;-webkit-user-select:none;user-select:none}.jkl-expander--open .jkl-expander__label{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-expander--open .jkl-expander__chevron{transform:rotate(-.5turn);transition-duration:var(--jkl-motion-timing-snappy);transition-timing-function:var(--jkl-motion-easing-standard)}@media (hover:hover){.jkl-expander:hover{background-color:var(--jkl-color-background-interactive-selected)}}.jkl-expander{border-style:none;outline:0;outline-style:none}.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-expander{border-style:revert;outline:revert;outline-style:revert}.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:revert;outline-style:revert}}}
+@layer jokul.components{.jkl-expandable{background-color:var(--jkl-color-background-container);border:1px solid transparent;border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden;width:100%}.jkl-expandable__content[data-expanded=true]{height:auto}.jkl-expandable__content[data-expanded=false]{height:0}.jkl-expandable[data-visible-content=true] .jkl-expander{border-bottom:1px solid transparent}.jkl-expandable__content-wrapper{padding:var(--jkl-unit-20)}.jkl-expandable--stroke{background-color:transparent;border-color:var(--jkl-color-border-subdued);border-radius:0;border-radius:var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius)}.jkl-expandable__wrapper{--border-radius:0.25rem;--outline-offset:3px;--stroke-outline-offset:3px;--border-top-left-radius:var(--border-radius);--border-top-right-radius:var(--border-radius);--border-bottom-left-radius:var(--border-radius);--border-bottom-right-radius:var(--border-radius);position:relative}.jkl-expandable__wrapper+.jkl-expandable__wrapper{--border-top-left-radius:0;--border-top-right-radius:0;--stroke-outline-offset:-1px}.jkl-expandable__wrapper+.jkl-expandable__wrapper .jkl-expandable--stroke{border-top:none}.jkl-expandable__wrapper:has(+.jkl-expandable__wrapper){--border-bottom-left-radius:0;--border-bottom-right-radius:0;--stroke-outline-offset:-1px}.jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke){--outline-offset:var(--stroke-outline-offset)}.jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px;outline-offset:var(--outline-offset)}.jkl-expandable__focus-container{border-radius:var(--border-radius);inset:0;position:absolute}.jkl-expander{--hover-background-color:color-mix(in srgb,currentColor 15%,transparent);align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;box-sizing:border-box;color:var(--jkl-color);cursor:pointer;display:flex;gap:.5rem;list-style:none;padding:var(--jkl-unit-20);text-align:left;width:100%}.jkl-expander::-webkit-details-marker{display:none}.jkl-expander__label{flex-grow:1}.jkl-expander__chevron{text-align:right;transform:rotate(0turn);transition-property:transform;-webkit-user-select:none;user-select:none}.jkl-expander--open .jkl-expander__label{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-expander--open .jkl-expander__chevron{transform:rotate(-.5turn);transition-duration:var(--jkl-motion-timing-snappy);transition-timing-function:var(--jkl-motion-easing-standard)}@media (hover:hover){.jkl-expander:hover{background-color:var(--hover-background-color)}}.jkl-expander{border-style:none;outline:0;outline-style:none}.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-expander{border-style:revert;outline:revert;outline-style:revert}.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:revert;outline-style:revert}}}