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

package/styles/components/combobox/combobox.scss

@@ -1,14 +1,12 @@
 @use "sass:color";
 @use "sass:math";
-@use "../../core/jkl";
-@use "../../core/jkl/colors";
+@use "../../jkl";
 @use "../../shared/input/shared-input-styles" as shared;
 
 @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);
@@ -48,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);
                 }
             }
 
@@ -66,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;
@@ -78,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 {
@@ -93,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 {
@@ -110,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);
@@ -120,7 +114,7 @@
 
             &:focus,
             &:hover {
-                background-color: var(--jkl-color-background-interactive-hover);
+                background-color: color-mix(in srgb, currentColor 10%, transparent);
             }
 
             &-description {
@@ -141,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 {
@@ -159,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/cookie-consent/cookie-consent.css

@@ -16,11 +16,7 @@
     transition: 0.2s;
   }
   .jkl-cookie-consent-modal__info-text {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-cookie-consent-modal__checkbox {
     margin-bottom: var(--jkl-unit-10);

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{background:rgba(0,0,0,.3);inset:0;position:fixed;transition:.2s}.jkl-cookie-consent-modal__info-text{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300;--jkl-icon-size:1.2em}.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{background:rgba(0,0,0,.3);inset:0;position:fixed;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/cookie-consent/cookie-consent.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@use "../../core/jkl";
+@use "../../jkl";
 
 $_card-corner-radius: jkl.rem(2px);
 $_container-width: jkl.rem(660px);

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-u57v9wq var(--duration) linear forwards;
+    animation: jkl-downcount-u551uxt var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u57v9wq {
+  @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-u57v9wq var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-u57v9wq{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 "../../core/jkl";
+@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;
 
@@ -41,19 +43,19 @@
         }
 
         &[aria-current="date"] {
-            font-weight: jkl.$typography-weight-bold;
+            font-weight: jkl.$font-weight-bold;
         }
 
         // 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

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-calendar-navigation-dropdown {
@@ -16,7 +16,7 @@
             appearance: none;
 
             @include jkl.text-style("text-small") {
-                font-weight: jkl.$typography-weight-bold;
+                font-weight: jkl.$font-weight-bold;
             }
 
             background-color: transparent;
@@ -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-navigation.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-calendar-navigation {

package/styles/components/datepicker/_calendar-table.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-calendar-table {

package/styles/components/datepicker/_calendar.scss

@@ -1,18 +1,17 @@
-@use "../../core/jkl";
+@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 {
@@ -47,11 +51,8 @@
   }
   .jkl-calendar-navigation-dropdown__select {
     appearance: none;
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
+    font: var(--jkl-text-style-text-small);
+    font-weight: var(--jkl-font-weight-bold);
     background-color: transparent;
     color: inherit;
     border-radius: 0;
@@ -85,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 {
@@ -102,10 +103,7 @@
 }
 @layer jokul.components {
   .jkl-calendar-table th {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     padding-bottom: var(--jkl-unit-10);
   }
   .jkl-calendar-table td {
@@ -120,15 +118,16 @@
   }
 }
 @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-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     appearance: none;
     position: relative;
     box-sizing: border-box;
@@ -143,8 +142,8 @@
     margin: var(--jkl-calendar-date-margin);
     padding: 0;
     padding-top: var(--jkl-unit-02);
-    transition-timing-function: ease-out;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-entrance);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: color, background-color, box-shadow;
   }
   .jkl-calendar-date-button {
@@ -168,23 +167,20 @@
     }
   }
   .jkl-calendar-date-button[data-adjacent=true] {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     padding: 0;
     color: var(--jkl-color-text-subdued);
   }
   .jkl-calendar-date-button[aria-current=date] {
-    font-weight: 700;
+    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 {
@@ -194,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;font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;background-color:transparent;border:none;border-radius:0;color:inherit;font-weight:700;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-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;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);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;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;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:75ms;transition-property:color,background-color,box-shadow;transition-timing-function:ease-out;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]{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--jkl-color-text-subdued);padding:0}.jkl-calendar-date-button[aria-current=date]{font-weight:700}.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/datepicker/datepicker.scss

@@ -4,7 +4,7 @@
 @use "calendar-navigation-dropdown";
 @use "calendar-table";
 @use "calendar-date-button";
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-datepicker {

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

@@ -20,7 +20,7 @@
     display: unset;
   }
   .jkl-description-list__term {
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-description-list__detail {
     margin-left: 0;
@@ -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:700}.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

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@use "../../core/jkl";
+@use "../../jkl";
 
 @mixin _horizontal-list {
     .jkl-description-list__term {
@@ -37,7 +37,7 @@
         }
 
         &__term {
-            font-weight: jkl.$typography-weight-bold;
+            font-weight: jkl.$font-weight-bold;
         }
 
         &__detail {
@@ -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;
@@ -94,17 +97,17 @@
   }
   .jkl-expander--open .jkl-expander__label {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
   .jkl-expander--open .jkl-expander__chevron {
     transform: rotate(-0.5turn);
-    transition-timing-function: ease;
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-snappy);
   }
   @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:700;letter-spacing:-.014em}.jkl-expander--open .jkl-expander__chevron{transform:rotate(-.5turn);transition-duration:.1s;transition-timing-function:ease}@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}}}