@fremtind/jokul 5.0.0-next.9 → 5.0.1

package/styles/components/combobox/combobox.scss

@@ -13,8 +13,8 @@
         --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-option-padding: var(--jkl-unit-10);
+        --jkl-combobox-option-height: min(var(--jkl-unit-60), #{jkl.rem(48px)});
         --jkl-combobox-search-input-height: #{jkl.rem(28px)};
 
         @include jkl.small-device {
@@ -106,15 +106,14 @@
             color: var(--jkl-color-text-default);
             background-color: transparent;
             transition-property: color, background-color;
-            cursor: pointer;
+            min-height: var(--jkl-combobox-option-height);
             padding: var(--jkl-combobox-option-padding);
             width: 100%;
             text-align: left;
-            line-height: var(--jkl-combobox-option-line-height);
 
             &:focus,
             &:hover {
-                background-color: color-mix(in srgb, currentColor 10%, transparent);
+                background-color: var(--jkl-color-background-container-accent)
             }
 
             &-description {

package/styles/components/countdown/countdown.css

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

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);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-u2h1is7 var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-u2h1is7{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-u71s7o3 var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-u71s7o3{0%{width:100%}to{width:0}}}

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

@@ -49,14 +49,12 @@
         // Other dates
         &:hover:not(:disabled) {
             background-color: color-mix(in srgb, currentColor 10%, transparent);
-            cursor: pointer;
         }
 
         // Selected date
         &[aria-pressed="true"] {
             background-color: var(--jkl-color-background-contrast);
             color: var(--jkl-color-text-on-contrast);
-            cursor: pointer;
 
             &:hover {
                 color: var(--jkl-color);

package/styles/components/datepicker/datepicker.css

@@ -176,12 +176,10 @@
   }
   .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);

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

@@ -1 +1 @@
-@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}}}
+@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)}.jkl-calendar-date-button[aria-pressed=true]{background-color:var(--jkl-color-background-contrast);color:var(--jkl-color-text-on-contrast)}.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/expander/_index.scss

@@ -1,4 +1,5 @@
 @forward "expandable";
+@forward "accordion";
 
 // Expander-komponenten avhenger av de følgende pakkene
 @use "../icon";

package/styles/components/expander/accordion.css

@@ -0,0 +1,21 @@
+@layer jokul.components {
+  .jkl-accordion {
+    background-color: var(--jkl-color-background-container);
+    border-radius: var(--jkl-border-radius-s);
+    padding-inline-start: unset;
+    list-style-type: unset;
+    overflow: clip;
+  }
+  .jkl-accordion .jkl-expandable-panel {
+    border-radius: unset;
+    border: unset;
+    background-color: transparent;
+  }
+  .jkl-accordion .jkl-expandable-panel__wrapper:not(:last-of-type) {
+    border-block-end: 1px solid var(--jkl-color-border-subdued);
+  }
+  .jkl-accordion[data-outlined=true] {
+    border: 1px solid var(--jkl-color-border-subdued);
+    background-color: transparent;
+  }
+}

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

@@ -0,0 +1 @@
+@layer jokul.components{.jkl-accordion{background-color:var(--jkl-color-background-container);border-radius:var(--jkl-border-radius-s);-webkit-padding-start:unset;list-style-type:unset;overflow:clip;padding-inline-start:unset}.jkl-accordion .jkl-expandable-panel{background-color:transparent;border:unset;border-radius:unset}.jkl-accordion .jkl-expandable-panel__wrapper:not(:last-of-type){-webkit-border-after:1px solid var(--jkl-color-border-subdued);border-block-end:1px solid var(--jkl-color-border-subdued)}.jkl-accordion[data-outlined=true]{background-color:transparent;border:1px solid var(--jkl-color-border-subdued)}}

package/styles/components/expander/accordion.scss

@@ -0,0 +1,24 @@
+@layer jokul.components {
+    .jkl-accordion {
+        background-color: var(--jkl-color-background-container);
+        border-radius: var(--jkl-border-radius-s);
+        padding-inline-start: unset;
+        list-style-type: unset;
+        overflow: clip;
+
+        .jkl-expandable-panel {
+            border-radius: unset;
+            border: unset;
+            background-color: transparent;
+        }
+
+        .jkl-expandable-panel__wrapper:not(:last-of-type) {
+            border-block-end: 1px solid var(--jkl-color-border-subdued);
+        }
+
+        &[data-outlined="true"] {
+            border: 1px solid var(--jkl-color-border-subdued);
+            background-color: transparent;
+        }
+    }
+}

package/styles/components/expander/expandable.css

@@ -2,81 +2,84 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.components {
-  .jkl-expandable {
+  .jkl-expandable-panel {
     background-color: var(--jkl-color-background-container);
     border: 1px solid transparent;
-    border-radius: var(--border-radius);
+    border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     width: 100%;
     overflow: hidden;
   }
-  .jkl-expandable__content[data-expanded=true] {
+  @media screen and (forced-colors: active) {
+    .jkl-expandable-panel {
+      border: 1px solid CanvasText;
+    }
+  }
+  .jkl-expandable-panel__content[data-expanded=true] {
     height: auto;
   }
-  .jkl-expandable__content[data-expanded=false] {
+  .jkl-expandable-panel__content[data-expanded=false] {
     height: 0;
   }
-  .jkl-expandable[data-visible-content=true] .jkl-expander {
+  .jkl-expandable-panel[data-visible-content=true] .jkl-expander {
     border-bottom: 1px solid transparent;
   }
-  .jkl-expandable__content-wrapper {
+  .jkl-expandable-panel__content-wrapper {
     padding: var(--jkl-unit-20);
   }
-  .jkl-expandable--stroke {
+  .jkl-expandable-panel--outlined {
     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);
   }
-  .jkl-expandable__wrapper {
-    --border-radius: 0.25rem;
+  .jkl-expandable-panel__wrapper {
+    --border-radius: var(--jkl-border-radius-m);
     --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 {
+  .jkl-expandable-panel__wrapper + .jkl-expandable-panel__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) {
+  .jkl-expandable-panel__wrapper:has(+ .jkl-expandable-panel__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) {
+  .jkl-expandable-panel__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable-panel--outlined) {
     --outline-offset: var(--stroke-outline-offset);
   }
-  .jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container {
+  .jkl-expandable-panel__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable-panel__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);
+  .jkl-expandable-panel__wrapper .jkl-expander {
+    padding: var(--jkl-unit-20);
+    width: 100%;
+  }
+  .jkl-expandable-panel__wrapper .jkl-expander__label {
+    flex-grow: 1;
+  }
+  @media (hover: hover) {
+    .jkl-expandable-panel__wrapper .jkl-expander:hover {
+      background-color: var(--jkl-color-background-container-accent);
+    }
+  }
+  .jkl-expandable-panel__focus-container {
     position: absolute;
     inset: 0;
   }
   .jkl-expander {
-    --hover-background-color: color-mix(in srgb,
-            currentColor 15%,
-            transparent);
     box-sizing: border-box;
     background: none;
     appearance: none;
     border: none;
     text-align: left;
-    width: 100%;
-    padding: var(--jkl-unit-20);
     cursor: pointer;
     color: var(--jkl-color);
+    -webkit-tap-highlight-color: transparent;
     display: flex;
     gap: 0.5rem;
     align-items: center;
@@ -86,9 +89,6 @@
   .jkl-expander::-webkit-details-marker {
     display: none;
   }
-  .jkl-expander__label {
-    flex-grow: 1;
-  }
   .jkl-expander__chevron {
     user-select: none;
     transition-property: transform;
@@ -105,11 +105,6 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-snappy);
   }
-  @media (hover: hover) {
-    .jkl-expander:hover {
-      background-color: var(--hover-background-color);
-    }
-  }
   .jkl-expander {
     outline: 0;
     border-style: none;

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

@@ -1 +1 @@
-@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}}}
+@layer jokul.components{.jkl-expandable-panel{background-color:var(--jkl-color-background-container);border:1px solid transparent;border-radius:var(--jkl-border-radius-s);box-sizing:border-box;overflow:hidden;width:100%}@media screen and (forced-colors:active){.jkl-expandable-panel{border:1px solid CanvasText}}.jkl-expandable-panel__content[data-expanded=true]{height:auto}.jkl-expandable-panel__content[data-expanded=false]{height:0}.jkl-expandable-panel[data-visible-content=true] .jkl-expander{border-bottom:1px solid transparent}.jkl-expandable-panel__content-wrapper{padding:var(--jkl-unit-20)}.jkl-expandable-panel--outlined{background-color:transparent;border-color:var(--jkl-color-border-subdued)}.jkl-expandable-panel__wrapper{--border-radius:var(--jkl-border-radius-m);--outline-offset:3px;--stroke-outline-offset:3px;position:relative}.jkl-expandable-panel__wrapper+.jkl-expandable-panel__wrapper{--border-top-left-radius:0;--border-top-right-radius:0;--stroke-outline-offset:-1px}.jkl-expandable-panel__wrapper:has(+.jkl-expandable-panel__wrapper){--border-bottom-left-radius:0;--border-bottom-right-radius:0;--stroke-outline-offset:-1px}.jkl-expandable-panel__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable-panel--outlined){--outline-offset:var(--stroke-outline-offset)}.jkl-expandable-panel__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable-panel__focus-container{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px;outline-offset:var(--outline-offset)}.jkl-expandable-panel__wrapper .jkl-expander{padding:var(--jkl-unit-20);width:100%}.jkl-expandable-panel__wrapper .jkl-expander__label{flex-grow:1}@media (hover:hover){.jkl-expandable-panel__wrapper .jkl-expander:hover{background-color:var(--jkl-color-background-container-accent)}}.jkl-expandable-panel__focus-container{inset:0;position:absolute}.jkl-expander{-webkit-appearance:none;appearance:none;background:none;border:none;box-sizing:border-box;color:var(--jkl-color);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;align-items:center;display:flex;gap:.5rem;list-style:none}.jkl-expander::-webkit-details-marker{display:none}.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)}.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}}}

package/styles/components/expander/expandable.scss

@@ -1,16 +1,20 @@
 @use "../../jkl";
 
 @layer jokul.components {
-    .jkl-expandable {
+    .jkl-expandable-panel {
         background-color: var(--jkl-color-background-container);
         // A transparent border will be visible in forced colors mode and replace
         // the role of the background-color in separating the component from other content
         border: 1px solid transparent;
-        border-radius: var(--border-radius);
+        border-radius: var(--jkl-border-radius-s);
         box-sizing: border-box;
         width: 100%;
         overflow: hidden;
 
+        @include jkl.forced-colors-mode {
+            border: 1px solid CanvasText;
+        }
+
         &__content[data-expanded="true"] {
             height: auto;
         }
@@ -27,22 +31,15 @@
             padding: var(--jkl-unit-20)
         }
 
-        &--stroke {
+        &--outlined {
             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);
         }
 
         &__wrapper {
-            --border-radius: #{jkl.rem(4px)};
+            --border-radius: var(--jkl-border-radius-m);
             --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;
 
@@ -50,11 +47,6 @@
                 --border-top-left-radius: 0;
                 --border-top-right-radius: 0;
                 --stroke-outline-offset: -1px;
-
-                // Matches every expandable that follows directly after another
-                .jkl-expandable--stroke {
-                    border-top: none;
-                }
             }
 
             &:has(+ &) {
@@ -64,38 +56,47 @@
             }
 
             &:has(.jkl-expander:focus-visible) {
-                &:has(.jkl-expandable--stroke) {
+                &:has(.jkl-expandable-panel--outlined) {
                     --outline-offset: var(--stroke-outline-offset);
                 }
 
-                .jkl-expandable__focus-container {
+                .jkl-expandable-panel__focus-container {
                     @include jkl.focus-outline;
                     outline-offset: var(--outline-offset);
                 }
             }
+
+            .jkl-expander {
+                padding: var(--jkl-unit-20);
+                width: 100%;
+
+                &__label {
+                    flex-grow: 1;
+                }
+
+                @media (hover: hover) {
+                    &:hover {
+                        background-color: var(--jkl-color-background-container-accent);
+                    }
+                }
+            }
         }
 
         &__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;
         border: none;
         text-align: left;
-        width: 100%;
-        padding: var(--jkl-unit-20);
         cursor: pointer;
         color: var(--jkl-color);
+        -webkit-tap-highlight-color: transparent;
 
         display: flex;
         gap: jkl.rem(8px);
@@ -108,10 +109,6 @@
             display: none;
         }
 
-        &__label {
-            flex-grow: 1;
-        }
-
         &__chevron {
             user-select: none;
             transition-property: transform;
@@ -131,12 +128,6 @@
             }
         }
 
-        @media (hover: hover) {
-            &:hover {
-                background-color: var(--hover-background-color);
-            }
-        }
-
         @include jkl.reset-outline;
     }
-}
+}

package/styles/components/feedback/feedback.css

@@ -20,12 +20,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uoowg9t 0.25s ease-out;
+    animation: jkl-show-unvalhh 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uoowg9t {
+  @keyframes jkl-show-unvalhh {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;

package/styles/components/feedback/feedback.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-paragraph-small);margin-bottom:var(--jkl-unit-20)}.jkl-feedback__fade-in{animation:jkl-show-uoowg9t .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-uoowg9t{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:var(--jkl-spacing-12);justify-content:space-between;margin-top:var(--jkl-unit-10);max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:var(--jkl-motion-timing-productive);transition-property:transform,color;transition-timing-function:var(--jkl-motion-easing-standard);width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}input:focus-visible+.jkl-feedback-smiley-option{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}
+@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-paragraph-small);margin-bottom:var(--jkl-unit-20)}.jkl-feedback__fade-in{animation:jkl-show-unvalhh .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-unvalhh{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:var(--jkl-spacing-12);justify-content:space-between;margin-top:var(--jkl-unit-10);max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:var(--jkl-motion-timing-productive);transition-property:transform,color;transition-timing-function:var(--jkl-motion-easing-standard);width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}input:focus-visible+.jkl-feedback-smiley-option{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}

package/styles/components/feedback/feedback.scss

@@ -102,7 +102,6 @@ $_show-animation-name: jkl-show-#{string.unique-id()};
 
         input:focus-visible + & {
             border-radius: var(--jkl-border-radius-full);
-
             @include jkl.focus-outline;
         }
     }

package/styles/components/file/file.css

@@ -19,7 +19,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-snappy);
     transition-property: background-color, border-color, color;
-    color: var(--jkl-color-text-default);
+    color: var(--text-color);
     padding: var(--jkl-file-padding);
     border: var(--border);
     border-radius: var(--border-radius);
@@ -124,6 +124,9 @@
     --link-color: var(--text-color);
     --jkl-color-border-strong: currentColor;
   }
+  .jkl-file[data-state=error] .jkl-file__content {
+    border-color: var(--jkl-color-error-border-default);
+  }
   @keyframes spin {
     from {
       transform: rotate(0turn);

package/styles/components/file/file.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-width:var(--jkl-unit-70);--jkl-file-thumbnail-max-height:var(--jkl-unit-90);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-subdued);--border-radius:2px;--bg:transparent;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__content{align-items:center;background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--jkl-color-text-default);display:grid;gap:var(--jkl-file-gap);grid-template-areas:"image text button";grid-template-columns:var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file__content__name{font:var(--jkl-text-style-paragraph-small);grid-area:text;word-break:break-word}.jkl-file__content__name__size{word-break:keep-all}.jkl-file__content__delete{aspect-ratio:1;grid-area:button}.jkl-file__content__thumbnail{align-items:center;anchor-name:--thumb;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-page);border-radius:2px;container-type:inline-size;display:flex;grid-area:image;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);object-fit:cover;overflow:hidden;position:relative;width:100%;anchor-scope:all;outline:1px solid color-mix(in srgb,currentColor 3%,transparent)}.jkl-file__content__thumbnail:after,.jkl-file__content__thumbnail:before{position:absolute;z-index:1}.jkl-file__content__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__content__thumbnail:after{scale:0}}.jkl-file__content__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__content__thumbnail img[src]{height:100%;object-fit:cover;width:100%}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/9}.jkl-file[class*=card] .jkl-file__content{grid-template-areas:"image image" "text button";grid-template-columns:1fr var(--jkl-file-button-width);grid-template-rows:var(--jkl-file-thumbnail-max-height) auto}.jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src])):before{content:attr(data-filetype);font:var(--jkl-text-style-paragraph-small)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail:after{display:block;scale:1}.jkl-file[data-state=error]{--bg:var(--jkl-color-error-background-container)}.jkl-file[data-state=error],.jkl-file[data-state=error] a,.jkl-file[data-state=error] a:hover,.jkl-file[data-state=error] button,.jkl-file[data-state=error] span{--text-color:var(--jkl-color-error-text-default);--link-color:var(--text-color);--jkl-color-border-strong:currentColor}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}
+@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-width:var(--jkl-unit-70);--jkl-file-thumbnail-max-height:var(--jkl-unit-90);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-subdued);--border-radius:2px;--bg:transparent;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__content{align-items:center;background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--text-color);display:grid;gap:var(--jkl-file-gap);grid-template-areas:"image text button";grid-template-columns:var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file__content__name{font:var(--jkl-text-style-paragraph-small);grid-area:text;word-break:break-word}.jkl-file__content__name__size{word-break:keep-all}.jkl-file__content__delete{aspect-ratio:1;grid-area:button}.jkl-file__content__thumbnail{align-items:center;anchor-name:--thumb;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-page);border-radius:2px;container-type:inline-size;display:flex;grid-area:image;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);object-fit:cover;overflow:hidden;position:relative;width:100%;anchor-scope:all;outline:1px solid color-mix(in srgb,currentColor 3%,transparent)}.jkl-file__content__thumbnail:after,.jkl-file__content__thumbnail:before{position:absolute;z-index:1}.jkl-file__content__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__content__thumbnail:after{scale:0}}.jkl-file__content__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__content__thumbnail img[src]{height:100%;object-fit:cover;width:100%}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/9}.jkl-file[class*=card] .jkl-file__content{grid-template-areas:"image image" "text button";grid-template-columns:1fr var(--jkl-file-button-width);grid-template-rows:var(--jkl-file-thumbnail-max-height) auto}.jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src])):before{content:attr(data-filetype);font:var(--jkl-text-style-paragraph-small)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail:after{display:block;scale:1}.jkl-file[data-state=error]{--bg:var(--jkl-color-error-background-container)}.jkl-file[data-state=error],.jkl-file[data-state=error] a,.jkl-file[data-state=error] a:hover,.jkl-file[data-state=error] button,.jkl-file[data-state=error] span{--text-color:var(--jkl-color-error-text-default);--link-color:var(--text-color);--jkl-color-border-strong:currentColor}.jkl-file[data-state=error] .jkl-file__content{border-color:var(--jkl-color-error-border-default)}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}

package/styles/components/file/file.scss

@@ -23,7 +23,7 @@
                 color
             );
 
-            color: var(--jkl-color-text-default);
+            color: var(--text-color);
             padding: var(--jkl-file-padding);
             border: var(--border);
             border-radius: var(--border-radius);
@@ -156,6 +156,10 @@
                 --link-color: var(--text-color);
                 --jkl-color-border-strong: currentColor;
             }
+
+            .jkl-file__content {
+                border-color: var(--jkl-color-error-border-default);
+            }
         }
     }