@fremtind/jokul 0.37.10 → 0.37.12

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

@@ -30,7 +30,7 @@
         justify-content: center;
         align-items: center;
         background-color: transparent;
-        color: var(--jkl-calendar-text-color);
+        color: var(--jkl-color);
         width: jkl.rem(40px);
         height: jkl.rem(40px);
 
@@ -40,11 +40,8 @@
             color: var(--jkl-calendar-navigation-arrow-focus-color);
         }
 
-        @include jkl.keyboard-navigation {
-            &:focus {
-                outline: jkl.rem(2px) solid var(--jkl-calendar-focus-color);
-                outline-offset: jkl.rem(-2px);
-            }
+        &:focus-visible {
+            @include jkl.focus-outline($offset: -2px);
         }
 
         &:disabled {

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

@@ -6,7 +6,7 @@
 
     th {
         @include jkl.text-style("small");
-        padding-bottom: var(--jkl-spacing-8);
+        padding-bottom: var(--jkl-unit-10);
     }
 
     // Calendar table styles

package/styles/components/datepicker/_calendar.scss

@@ -1,41 +1,27 @@
 @use "../../core/jkl";
 
-@include jkl.light-mode-variables {
-    --jkl-calendar-text-color: #{jkl.$color-granitt};
-    --jkl-calendar-background-color: #{jkl.$color-hvit};
-    --jkl-calendar-border-color: #{jkl.$color-granitt};
-    --jkl-calendar-focus-color: #{jkl.$color-granitt};
-}
-
-@include jkl.dark-mode-variables {
-    --jkl-calendar-text-color: #{jkl.$color-snohvit};
-    --jkl-calendar-background-color: #{jkl.$color-skifer};
-    --jkl-calendar-border-color: #{jkl.$color-snohvit};
-    --jkl-calendar-focus-color: #{jkl.$color-snohvit};
-}
-
 @include jkl.comfortable-density-variables {
-    --jkl-calendar-padding: var(--jkl-spacing-12) var(--jkl-spacing-16)
-        var(--jkl-spacing-16);
-    --jkl-calendar-gap: var(--jkl-spacing-12);
+    --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-spacing-4) var(--jkl-spacing-8)
-            var(--jkl-spacing-16);
+        --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10)
+            var(--jkl-unit-20);
     }
 }
 
 @include jkl.compact-density-variables {
-    --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8)
-        var(--jkl-spacing-16);
+    --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10)
+        var(--jkl-unit-20);
     --jkl-calendar-gap: 0;
 }
 
 .jkl-calendar {
     display: block;
-    background-color: var(--jkl-calendar-background-color);
-    color: var(--jkl-calendar-text-color);
+    background-color: var(--jkl-color-background-container-high);
+    color: var(--jkl-color);
 
     &__padding {
         display: flex;

package/styles/components/datepicker/datepicker.css

@@ -1,64 +1,34 @@
 /**
  * Do not edit directly
- * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-calendar-text-color: #1b1917;
-    --jkl-calendar-background-color: #ffffff;
-    --jkl-calendar-border-color: #1b1917;
-    --jkl-calendar-focus-color: #1b1917;
-  }
-}
-[data-theme=light] {
-  --jkl-calendar-text-color: #1b1917;
-  --jkl-calendar-background-color: #ffffff;
-  --jkl-calendar-border-color: #1b1917;
-  --jkl-calendar-focus-color: #1b1917;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-calendar-text-color: #f9f9f9;
-    --jkl-calendar-background-color: #313030;
-    --jkl-calendar-border-color: #f9f9f9;
-    --jkl-calendar-focus-color: #f9f9f9;
-  }
-}
-[data-theme=dark] {
-  --jkl-calendar-text-color: #f9f9f9;
-  --jkl-calendar-background-color: #313030;
-  --jkl-calendar-border-color: #f9f9f9;
-  --jkl-calendar-focus-color: #f9f9f9;
-}
-
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --jkl-calendar-padding: var(--jkl-spacing-12) var(--jkl-spacing-16)
-      var(--jkl-spacing-16);
-  --jkl-calendar-gap: var(--jkl-spacing-12);
+  --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) {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8)
-        var(--jkl-spacing-16);
+    --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10)
+        var(--jkl-unit-20);
   }
 }
 
 [data-layout-density=compact],
 [data-density=compact] {
-  --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8)
-      var(--jkl-spacing-16);
+  --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10)
+      var(--jkl-unit-20);
   --jkl-calendar-gap: 0;
 }
 
 .jkl-calendar {
   display: block;
-  background-color: var(--jkl-calendar-background-color);
-  color: var(--jkl-calendar-text-color);
+  background-color: var(--jkl-color-background-container-high);
+  color: var(--jkl-color);
 }
 .jkl-calendar__padding {
   display: flex;
@@ -114,7 +84,7 @@
   justify-content: center;
   align-items: center;
   background-color: transparent;
-  color: var(--jkl-calendar-text-color);
+  color: var(--jkl-color);
   width: 2.5rem;
   height: 2.5rem;
 }
@@ -141,11 +111,10 @@
 .jkl-calendar-navigation__arrow:hover {
   color: var(--jkl-calendar-navigation-arrow-focus-color);
 }
-html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navigation__arrow:focus {
-  outline: 0.125rem solid var(--jkl-calendar-focus-color);
-  outline-offset: -0.125rem;
+.jkl-calendar-navigation__arrow:focus-visible {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: -2px;
 }
-
 .jkl-calendar-navigation__arrow:disabled {
   color: var(--jkl-calendar-disabled-day-color);
 }
@@ -202,17 +171,16 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navig
   color: var(--jkl-select-text-color);
   background-color: var(--jkl-select-open-background-color);
 }
-html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navigation-dropdown__select:focus {
-  outline: 0.125rem solid var(--jkl-calendar-focus-color);
-  outline-offset: 1px;
+.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 {
-  margin-inline-start: var(--jkl-spacing-8);
+  margin-inline-start: var(--jkl-unit-10);
 }
 
 .jkl-calendar-table th {
@@ -222,7 +190,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navig
   --jkl-icon-weight: 300;
   --jkl-icon-size: 1.25rem;
   --jkl-icon-opsz: 20;
-  padding-bottom: var(--jkl-spacing-8);
+  padding-bottom: var(--jkl-unit-10);
 }
 .jkl-calendar-table td {
   text-align: center;
@@ -317,10 +285,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navig
   width: var(--jkl-calendar-date-size);
   border-radius: 50%;
   background-color: transparent;
-  color: var(--jkl-calendar-text-color);
+  color: var(--jkl-color);
   margin: var(--jkl-calendar-date-margin);
   padding: 0;
-  padding-top: 0.125rem;
+  padding-top: calc(var(--jkl-unit-10) * 0.25);
   transition-timing-function: ease-out;
   transition-duration: 75ms;
   transition-property: color, background-color, box-shadow;
@@ -368,14 +336,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navig
   cursor: pointer;
 }
 .jkl-calendar-date-button[aria-pressed=true]:hover {
-  color: var(--jkl-calendar-text-color);
+  color: var(--jkl-color);
 }
 .jkl-calendar-date-button:disabled {
   color: var(--jkl-calendar-disabled-day-color);
 }
-html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-button:focus {
-  outline: 0.125rem solid var(--jkl-calendar-focus-color);
-  outline-offset: 0.125rem;
+.jkl-calendar-date-button:focus-visible {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 
 @media screen and (prefers-color-scheme: light) {

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

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-calendar-text-color:#1b1917;--jkl-calendar-background-color:#fff;--jkl-calendar-border-color:#1b1917;--jkl-calendar-focus-color:#1b1917}}[data-theme=light]{--jkl-calendar-text-color:#1b1917;--jkl-calendar-background-color:#fff;--jkl-calendar-border-color:#1b1917;--jkl-calendar-focus-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-calendar-text-color:#f9f9f9;--jkl-calendar-background-color:#313030;--jkl-calendar-border-color:#f9f9f9;--jkl-calendar-focus-color:#f9f9f9}}[data-theme=dark]{--jkl-calendar-text-color:#f9f9f9;--jkl-calendar-background-color:#313030;--jkl-calendar-border-color:#f9f9f9;--jkl-calendar-focus-color:#f9f9f9}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-padding:var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-16);--jkl-calendar-gap:var(--jkl-spacing-12)}@media (width >= 0) and (max-width:374px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-padding:var(--jkl-spacing-4) var(--jkl-spacing-8) var(--jkl-spacing-16)}}[data-density=compact],[data-layout-density=compact]{--jkl-calendar-padding:var(--jkl-spacing-4) var(--jkl-spacing-8) var(--jkl-spacing-16);--jkl-calendar-gap:0}.jkl-calendar{background-color:var(--jkl-calendar-background-color);color:var(--jkl-calendar-text-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}}@media screen and (prefers-color-scheme:light){:root{--jkl-calendar-disabled-day-color:#c8c5c3;--jkl-calendar-navigation-arrow-focus-color:#636060}}[data-theme=light]{--jkl-calendar-navigation-arrow-focus-color:#636060}@media screen and (prefers-color-scheme:dark){:root{--jkl-calendar-disabled-day-color:#636060;--jkl-calendar-navigation-arrow-focus-color:#c8c5c3}}[data-theme=dark]{--jkl-calendar-navigation-arrow-focus-color:#c8c5c3}.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__arrow{align-items:center;background-color:transparent;border-style:none;color:var(--jkl-calendar-text-color);cursor:pointer;display:inline-flex;height:2.5rem;justify-content:center;margin:0 0 0 -.5rem;outline:0;outline-style:none;padding:0;position:relative;width:2.5rem}.jkl-calendar-navigation__arrow:active,.jkl-calendar-navigation__arrow:focus,.jkl-calendar-navigation__arrow:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-calendar-navigation__arrow{border-style:revert;outline:revert;outline-style:revert}.jkl-calendar-navigation__arrow:active,.jkl-calendar-navigation__arrow:focus,.jkl-calendar-navigation__arrow:hover{outline:revert;outline-style:revert}}.jkl-calendar-navigation__arrow:hover{color:var(--jkl-calendar-navigation-arrow-focus-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navigation__arrow:focus{outline:.125rem solid var(--jkl-calendar-focus-color);outline-offset:-.125rem}.jkl-calendar-navigation__arrow:disabled{color:var(--jkl-calendar-disabled-day-color)}.jkl-calendar-navigation-dropdown{--chevron-size:1.5rem;align-items:center;display:inline-flex}.jkl-calendar-navigation-dropdown>*{cursor:pointer}.jkl-calendar-navigation-dropdown__select{-webkit-appearance:none;appearance:none;font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;background-color:transparent;border:none;border-radius:0;border-style:none;color:inherit;font-weight:700;height:2.5rem;margin:0;outline:0;outline-style:none;padding:0;padding-inline-end:var(--chevron-size);text-align:end;text-align-last:end}.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-select-open-background-color);color:var(--jkl-select-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navigation-dropdown__select:focus{outline:.125rem solid var(--jkl-calendar-focus-color);outline-offset:1px}.jkl-calendar-navigation-dropdown__chevron{margin-left:calc(var(--chevron-size)*-1);pointer-events:none}.jkl-calendar-navigation-dropdown+.jkl-calendar-navigation-dropdown{margin-inline-start:var(--jkl-spacing-8)}.jkl-calendar-table th{font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;padding-bottom:var(--jkl-spacing-8)}.jkl-calendar-table td{text-align:center}.jkl-calendar-table td+td,.jkl-calendar-table th+th{padding-left:.25rem}.jkl-calendar-table tr+tr>td{padding-top:.25rem}@media screen and (prefers-color-scheme:light){:root{--jkl-calendar-adjacent-month-color:#636060;--jkl-calendar-disabled-day-color:#c8c5c3;--jkl-calendar-active-day-color:#fff;--jkl-calendar-hover-date-background-color:#ece9e5;--jkl-calendar-selected-date-background-color:#1b1917}}[data-theme=light]{--jkl-calendar-adjacent-month-color:#636060;--jkl-calendar-disabled-day-color:#c8c5c3;--jkl-calendar-active-day-color:#fff;--jkl-calendar-hover-date-background-color:#ece9e5;--jkl-calendar-selected-date-background-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-calendar-adjacent-month-color:#c8c5c3;--jkl-calendar-disabled-day-color:#636060;--jkl-calendar-active-day-color:#000;--jkl-calendar-hover-date-background-color:#636060;--jkl-calendar-selected-date-background-color:#f9f9f9}}[data-theme=dark]{--jkl-calendar-adjacent-month-color:#c8c5c3;--jkl-calendar-disabled-day-color:#636060;--jkl-calendar-active-day-color:#000;--jkl-calendar-hover-date-background-color:#636060;--jkl-calendar-selected-date-background-color:#f9f9f9}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-date-size:2.375rem;--jkl-calendar-date-font-size:var(--jkl-body-font-size);--jkl-calendar-date-line-height:var(--jkl-body-line-height);--jkl-calendar-date-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-date-size:2.25rem;--jkl-calendar-date-font-size:var(--jkl-small-font-size);--jkl-calendar-date-line-height:var(--jkl-small-line-height);--jkl-calendar-date-font-weight:var(--jkl-small-font-weight)}}@media (width >= 0) and (max-width:374px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-date-size:2rem}}[data-density=compact],[data-layout-density=compact]{--jkl-calendar-date-size:2rem;--jkl-calendar-date-font-size:var(--jkl-small-font-size);--jkl-calendar-date-line-height:var(--jkl-small-line-height);--jkl-calendar-date-font-weight:var(--jkl-small-font-weight)}.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-calendar-text-color);display:inline-flex;font-size:var(--jkl-calendar-date-font-size);font-weight:var(--jkl-calendar-date-font-weight);height:var(--jkl-calendar-date-size);justify-content:center;line-height:var(--jkl-calendar-date-line-height);margin:var(--jkl-calendar-date-margin);outline:0;outline-style:none;padding:.125rem 0 0;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:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;color:var(--jkl-calendar-adjacent-month-color);padding:0}.jkl-calendar-date-button[aria-current=date]{font-weight:700}.jkl-calendar-date-button:hover:not(:disabled){background-color:var(--jkl-calendar-hover-date-background-color);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]{background-color:var(--jkl-calendar-selected-date-background-color);color:var(--jkl-calendar-active-day-color);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]:hover{color:var(--jkl-calendar-text-color)}.jkl-calendar-date-button:disabled{color:var(--jkl-calendar-disabled-day-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-button:focus{outline:.125rem solid var(--jkl-calendar-focus-color);outline-offset:.125rem}@media screen and (prefers-color-scheme:light){:root{--jkl-datepicker-focus-color:#1b1917}}[data-theme=light]{--jkl-datepicker-focus-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-datepicker-focus-color:#f9f9f9}}[data-theme=dark]{--jkl-datepicker-focus-color:#f9f9f9}.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}.jkl-datepicker--open .jkl-text-input-wrapper{border-color:var(--jkl-text-input-focus-color);box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-focus-color),0 0 0 .0625rem var(--jkl-text-input-focus-color)}@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}}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--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){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-padding:var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20)}}[data-density=compact],[data-layout-density=compact]{--jkl-calendar-padding:var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);--jkl-calendar-gap:0}.jkl-calendar{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}}@media screen and (prefers-color-scheme:light){:root{--jkl-calendar-disabled-day-color:#c8c5c3;--jkl-calendar-navigation-arrow-focus-color:#636060}}[data-theme=light]{--jkl-calendar-navigation-arrow-focus-color:#636060}@media screen and (prefers-color-scheme:dark){:root{--jkl-calendar-disabled-day-color:#636060;--jkl-calendar-navigation-arrow-focus-color:#c8c5c3}}[data-theme=dark]{--jkl-calendar-navigation-arrow-focus-color:#c8c5c3}.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__arrow{align-items:center;background-color:transparent;border-style:none;color:var(--jkl-color);cursor:pointer;display:inline-flex;height:2.5rem;justify-content:center;margin:0 0 0 -.5rem;outline:0;outline-style:none;padding:0;position:relative;width:2.5rem}.jkl-calendar-navigation__arrow:active,.jkl-calendar-navigation__arrow:focus,.jkl-calendar-navigation__arrow:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-calendar-navigation__arrow{border-style:revert;outline:revert;outline-style:revert}.jkl-calendar-navigation__arrow:active,.jkl-calendar-navigation__arrow:focus,.jkl-calendar-navigation__arrow:hover{outline:revert;outline-style:revert}}.jkl-calendar-navigation__arrow:hover{color:var(--jkl-calendar-navigation-arrow-focus-color)}.jkl-calendar-navigation__arrow:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-2px}.jkl-calendar-navigation__arrow:disabled{color:var(--jkl-calendar-disabled-day-color)}.jkl-calendar-navigation-dropdown{--chevron-size:1.5rem;align-items:center;display:inline-flex}.jkl-calendar-navigation-dropdown>*{cursor:pointer}.jkl-calendar-navigation-dropdown__select{-webkit-appearance:none;appearance:none;font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;background-color:transparent;border:none;border-radius:0;border-style:none;color:inherit;font-weight:700;height:2.5rem;margin:0;outline:0;outline-style:none;padding:0;padding-inline-end:var(--chevron-size);text-align:end;text-align-last:end}.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-select-open-background-color);color:var(--jkl-select-text-color)}.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{margin-inline-start:var(--jkl-unit-10)}.jkl-calendar-table th{font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;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:.25rem}.jkl-calendar-table tr+tr>td{padding-top:.25rem}@media screen and (prefers-color-scheme:light){:root{--jkl-calendar-adjacent-month-color:#636060;--jkl-calendar-disabled-day-color:#c8c5c3;--jkl-calendar-active-day-color:#fff;--jkl-calendar-hover-date-background-color:#ece9e5;--jkl-calendar-selected-date-background-color:#1b1917}}[data-theme=light]{--jkl-calendar-adjacent-month-color:#636060;--jkl-calendar-disabled-day-color:#c8c5c3;--jkl-calendar-active-day-color:#fff;--jkl-calendar-hover-date-background-color:#ece9e5;--jkl-calendar-selected-date-background-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-calendar-adjacent-month-color:#c8c5c3;--jkl-calendar-disabled-day-color:#636060;--jkl-calendar-active-day-color:#000;--jkl-calendar-hover-date-background-color:#636060;--jkl-calendar-selected-date-background-color:#f9f9f9}}[data-theme=dark]{--jkl-calendar-adjacent-month-color:#c8c5c3;--jkl-calendar-disabled-day-color:#636060;--jkl-calendar-active-day-color:#000;--jkl-calendar-hover-date-background-color:#636060;--jkl-calendar-selected-date-background-color:#f9f9f9}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-date-size:2.375rem;--jkl-calendar-date-font-size:var(--jkl-body-font-size);--jkl-calendar-date-line-height:var(--jkl-body-line-height);--jkl-calendar-date-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-date-size:2.25rem;--jkl-calendar-date-font-size:var(--jkl-small-font-size);--jkl-calendar-date-line-height:var(--jkl-small-line-height);--jkl-calendar-date-font-weight:var(--jkl-small-font-weight)}}@media (width >= 0) and (max-width:374px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-date-size:2rem}}[data-density=compact],[data-layout-density=compact]{--jkl-calendar-date-size:2rem;--jkl-calendar-date-font-size:var(--jkl-small-font-size);--jkl-calendar-date-line-height:var(--jkl-small-line-height);--jkl-calendar-date-font-weight:var(--jkl-small-font-weight)}.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-size:var(--jkl-calendar-date-font-size);font-weight:var(--jkl-calendar-date-font-weight);height:var(--jkl-calendar-date-size);justify-content:center;line-height:var(--jkl-calendar-date-line-height);margin:var(--jkl-calendar-date-margin);outline:0;outline-style:none;padding:0;padding-top:calc(var(--jkl-unit-10)*.25);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:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;color:var(--jkl-calendar-adjacent-month-color);padding:0}.jkl-calendar-date-button[aria-current=date]{font-weight:700}.jkl-calendar-date-button:hover:not(:disabled){background-color:var(--jkl-calendar-hover-date-background-color);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]{background-color:var(--jkl-calendar-selected-date-background-color);color:var(--jkl-calendar-active-day-color);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]:hover{color:var(--jkl-color)}.jkl-calendar-date-button:disabled{color:var(--jkl-calendar-disabled-day-color)}.jkl-calendar-date-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (prefers-color-scheme:light){:root{--jkl-datepicker-focus-color:#1b1917}}[data-theme=light]{--jkl-datepicker-focus-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-datepicker-focus-color:#f9f9f9}}[data-theme=dark]{--jkl-datepicker-focus-color:#f9f9f9}.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}.jkl-datepicker--open .jkl-text-input-wrapper{border-color:var(--jkl-text-input-focus-color);box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-focus-color),0 0 0 .0625rem var(--jkl-text-input-focus-color)}@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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
 .jkl-description-list__term {
   font-weight: 700;

package/styles/components/expander/deprecated/expander.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
 .jkl-old-expander {
   --color: var(--jkl-color-text-interactive);
@@ -38,8 +38,8 @@
 }
 .jkl-old-expander:focus-visible {
   border: none;
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-old-expander:focus-visible .jkl-old-expander__arrow {
   transform: translateY(0.1875rem);

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

@@ -1 +1 @@
-.jkl-old-expander{--color:var(--jkl-color-text-interactive);background-color:transparent;border-style:none;color:var(--color);cursor:pointer;list-style:none;min-width:unset;outline:0;outline-style:none;padding:0;position:relative;transition:transform .1s cubic-bezier(.6,.2,.35,1),border .1s cubic-bezier(.6,.2,.35,1)}.jkl-old-expander:active,.jkl-old-expander:focus,.jkl-old-expander:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-old-expander{border-style:revert;outline:revert;outline-style:revert}.jkl-old-expander:active,.jkl-old-expander:focus,.jkl-old-expander:hover{outline:revert;outline-style:revert}}.jkl-old-expander::-webkit-details-marker{display:none}.jkl-old-expander:focus-visible{border:none;outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-old-expander:focus-visible .jkl-old-expander__arrow{transform:translateY(.1875rem)}.jkl-old-expander:focus-visible,.jkl-old-expander:hover{--color:var(--jkl-color-text-interactive-hover)}.jkl-old-expander--expanded{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-old-expander--icon-only .jkl-old-expander__arrow{margin:.25rem .5rem}.jkl-old-expander .jkl-old-expander__arrow{display:inline-block;margin-bottom:-.15em;margin-left:.125rem;transition-duration:.15s;transition-property:transform;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-old-expander,.jkl-old-expander:after{border-left-style:none;border-right-style:none;border-top-style:none}}.jkl-expand-section__content-wrapper{transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-expand-section__content{height:auto;padding:1rem 0 2.5rem}
+.jkl-old-expander{--color:var(--jkl-color-text-interactive);background-color:transparent;border-style:none;color:var(--color);cursor:pointer;list-style:none;min-width:unset;outline:0;outline-style:none;padding:0;position:relative;transition:transform .1s cubic-bezier(.6,.2,.35,1),border .1s cubic-bezier(.6,.2,.35,1)}.jkl-old-expander:active,.jkl-old-expander:focus,.jkl-old-expander:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-old-expander{border-style:revert;outline:revert;outline-style:revert}.jkl-old-expander:active,.jkl-old-expander:focus,.jkl-old-expander:hover{outline:revert;outline-style:revert}}.jkl-old-expander::-webkit-details-marker{display:none}.jkl-old-expander:focus-visible{border:none;outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-old-expander:focus-visible .jkl-old-expander__arrow{transform:translateY(.1875rem)}.jkl-old-expander:focus-visible,.jkl-old-expander:hover{--color:var(--jkl-color-text-interactive-hover)}.jkl-old-expander--expanded{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-old-expander--icon-only .jkl-old-expander__arrow{margin:.25rem .5rem}.jkl-old-expander .jkl-old-expander__arrow{display:inline-block;margin-bottom:-.15em;margin-left:.125rem;transition-duration:.15s;transition-property:transform;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-old-expander,.jkl-old-expander:after{border-left-style:none;border-right-style:none;border-top-style:none}}.jkl-expand-section__content-wrapper{transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-expand-section__content{height:auto;padding:1rem 0 2.5rem}

package/styles/components/expander/expandable.css

@@ -1,9 +1,8 @@
 /**
  * Do not edit directly
- * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
 .jkl-expandable {
-  --border-radius: 0.25rem;
   background-color: var(--jkl-color-background-container-low);
   border-radius: var(--border-radius);
   box-sizing: border-box;
@@ -26,22 +25,39 @@
   border: 1px solid var(--jkl-color-border-separator);
   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;
+  --outline-offset: 3px;
+  position: relative;
 }
-.jkl-expandable--stroke + .jkl-expandable--stroke {
+.jkl-expandable__wrapper + .jkl-expandable__wrapper .jkl-expandable--stroke {
   border-top: none;
 }
-.jkl-expandable--stroke:first-child {
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
+.jkl-expandable__wrapper:first-child {
+  --border-top-left-radius: var(--border-radius);
+  --border-top-right-radius: var(--border-radius);
 }
-.jkl-expandable--stroke:last-child {
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
+.jkl-expandable__wrapper:last-child {
+  --border-bottom-left-radius: var(--border-radius);
+  --border-bottom-right-radius: var(--border-radius);
 }
-@media (hover: hover) {
-  .jkl-expandable:hover .jkl-expander {
-    background-color: var(--jkl-color-background-interactive-selected);
-  }
+.jkl-expandable__wrapper:has(:focus-visible):has(.jkl-expandable--stroke) {
+  --outline-offset: -1px;
+}
+.jkl-expandable__wrapper:has(: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);
+  position: absolute;
+  inset: 0;
 }
 
 .jkl-expander {
@@ -53,6 +69,7 @@
   width: 100%;
   padding: 1rem;
   cursor: pointer;
+  color: var(--jkl-color);
   display: flex;
   gap: 0.5rem;
   align-items: center;
@@ -85,4 +102,24 @@
   .jkl-expander:hover {
     background-color: var(--jkl-color-background-interactive-hover);
   }
+}
+.jkl-expander {
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-expander:active, .jkl-expander:hover, .jkl-expander:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-expander {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-expander:active, .jkl-expander:hover, .jkl-expander:focus {
+    outline: revert;
+    outline-style: revert;
+  }
 }

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

@@ -1 +1 @@
-.jkl-expandable{--border-radius:0.25rem;background-color:var(--jkl-color-background-container-low);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:1rem}.jkl-expandable--stroke{background-color:transparent;border:1px solid var(--jkl-color-border-separator);border-radius:0}.jkl-expandable--stroke+.jkl-expandable--stroke{border-top:none}.jkl-expandable--stroke:first-child{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.jkl-expandable--stroke:last-child{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}@media (hover:hover){.jkl-expandable:hover .jkl-expander{background-color:var(--jkl-color-background-interactive-selected)}}.jkl-expander{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;gap:.5rem;list-style:none;padding:1rem;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:500;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-hover)}}
+.jkl-expandable{background-color:var(--jkl-color-background-container-low);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:1rem}.jkl-expandable--stroke{background-color:transparent;border:1px solid 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;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(:focus-visible):has(.jkl-expandable--stroke){--outline-offset:-1px}.jkl-expandable__wrapper:has(: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:1rem;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:500;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-hover)}}.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,8 +1,6 @@
 @use "../../core/jkl";
 
 .jkl-expandable {
-    --border-radius: #{jkl.rem(4px)};
-
     background-color: var(--jkl-color-background-container-low);
     border-radius: var(--border-radius);
     box-sizing: border-box;
@@ -30,28 +28,55 @@
         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)};
+        --outline-offset: 3px;
+
+        position: relative;
 
         & + & {
             // Matches every expandable that follows directly after another
-            border-top: none;
+            .jkl-expandable--stroke {
+                border-top: none;
+            }
         }
 
         &:first-child {
-            border-top-left-radius: var(--border-radius);
-            border-top-right-radius: var(--border-radius);
+            --border-top-left-radius: var(--border-radius);
+            --border-top-right-radius: var(--border-radius);
         }
 
         &:last-child {
-            border-bottom-left-radius: var(--border-radius);
-            border-bottom-right-radius: var(--border-radius);
+            --border-bottom-left-radius: var(--border-radius);
+            --border-bottom-right-radius: var(--border-radius);
         }
-    }
 
-    @media (hover: hover) {
-        &:hover .jkl-expander {
-            background-color: var(--jkl-color-background-interactive-selected);
+        &:has(:focus-visible) {
+            &:has(.jkl-expandable--stroke) {
+                --outline-offset: -1px;
+            }
+
+            .jkl-expandable__focus-container {
+                @include jkl.focus-outline;
+                outline-offset: var(--outline-offset);
+            }
+        }
+
+        &:has(:focus-visible):first-child:last-child {
+            --outline-offset: 3px;
         }
     }
+
+    &__focus-container {
+        border-radius: var(--border-radius);
+        position: absolute;
+        inset: 0;
+    }
 }
 
 .jkl-expander {
@@ -63,6 +88,7 @@
     width: 100%;
     padding: jkl.rem(16px);
     cursor: pointer;
+    color: var(--jkl-color);
 
     display: flex;
     gap: jkl.rem(8px);
@@ -102,4 +128,6 @@
             background-color: var(--jkl-color-background-interactive-hover);
         }
     }
+
+    @include jkl.reset-outline;
 }

package/styles/components/feedback/feedback.css

@@ -1,8 +1,8 @@
 /**
  * Do not edit directly
- * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
-@keyframes jkl-show-ubf8hm4 {
+@keyframes jkl-show-u1kcp5r {
   from {
     transform: translate3d(0, 0.5rem, 0);
     opacity: 0;
@@ -22,7 +22,7 @@
 }
 .jkl-feedback__step-counter {
   color: var(--jkl-color-text-subdued);
-  margin-bottom: 1rem;
+  margin-bottom: calc(var(--jkl-unit-10) * 2);
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 400;
@@ -37,7 +37,7 @@
   }
 }
 .jkl-feedback__fade-in {
-  animation: jkl-show-ubf8hm4 0.25s ease-out;
+  animation: jkl-show-u1kcp5r 0.25s ease-out;
 }
 .jkl-feedback__buttons {
   display: flex;

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

@@ -1 +1 @@
-@keyframes jkl-show-ubf8hm4{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:1rem;--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-ubf8hm4 .25s ease-out}.jkl-feedback__buttons{display:flex}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;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:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.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}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after{opacity:1}
+@keyframes jkl-show-u1kcp5r{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:calc(var(--jkl-unit-10)*2);--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-u1kcp5r .25s ease-out}.jkl-feedback__buttons{display:flex}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;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:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.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}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after{opacity:1}

package/styles/components/feedback/feedback.scss

@@ -28,7 +28,7 @@ $_show-animation-name: jkl-show-#{string.unique-id()};
 
     &__step-counter {
         color: var(--jkl-color-text-subdued);
-        margin-bottom: jkl.$spacing-16;
+        margin-bottom: jkl.$unit-20;
         @include jkl.text-style("body");
     }
 
@@ -42,7 +42,7 @@ $_show-animation-name: jkl-show-#{string.unique-id()};
 }
 
 .jkl-feedback-smileys {
-    margin-top: jkl.$spacing-8;
+    margin-top: jkl.$unit-10;
     display: flex;
     justify-content: space-between;
     width: 100%;

package/styles/components/file-input/_file.scss

@@ -2,19 +2,19 @@
 @use "../../core/jkl/colors";
 
 @include jkl.comfortable-density-variables {
-    --jkl-file-padding: #{jkl.$spacing-24};
-    --jkl-file-thumbnail-size: #{jkl.rem(64px)};
-    --jkl-file-gap: #{jkl.$spacing-16};
+    --jkl-file-padding: #{jkl.$unit-30};
+    --jkl-file-thumbnail-size: #{jkl.$unit-80};
+    --jkl-file-gap: #{jkl.$unit-20};
     --jkl-file-font-size: #{jkl.rem(20px)};
-    --jkl-file-line-height: #{jkl.rem(32px)};
+    --jkl-file-line-height: #{jkl.$unit-40};
 }
 
 @include jkl.compact-density-variables {
     --jkl-file-padding: #{jkl.$spacing-12};
     --jkl-file-thumbnail-size: #{jkl.rem(44px)};
-    --jkl-file-gap: #{jkl.$spacing-8};
-    --jkl-file-font-size: #{jkl.rem(16px)};
-    --jkl-file-line-height: #{jkl.rem(24px)};
+    --jkl-file-gap: #{jkl.$unit-10};
+    --jkl-file-font-size: #{jkl.$unit-20};
+    --jkl-file-line-height: #{jkl.$unit-30};
 }
 
 .jkl-file {
@@ -75,10 +75,8 @@
             @include jkl.no-grow-bold;
         }
 
-        @include jkl.keyboard-navigation {
-            &:focus {
-                outline: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
-            }
+        &:focus-visible {
+            @include jkl.focus-outline($offset: 0);
         }
 
         @include jkl.forced-colors-mode {
@@ -87,10 +85,16 @@
         }
     }
 
-    &__delete {
-        padding: 0 var(--jkl-spacing-24);
+    &__delete.jkl-icon-button {
+        padding: 0 var(--jkl-unit-30);
         align-items: stretch;
 
+        @include jkl.reset-outline;
+
+        &:focus-visible {
+            @include jkl.focus-outline($offset: 0);
+        }
+
         &:hover {
             background-color: var(--jkl-color-background-interactive-hover);
         }
@@ -140,7 +144,7 @@
         flex-direction: column;
         flex: 1 1 auto;
         overflow-wrap: break-word;
-        gap: var(--jkl-spacing-8);
+        gap: var(--jkl-unit-10);
     }
 
     &__title {
@@ -161,7 +165,7 @@
     &__description {
         display: flex;
         flex-wrap: nowrap;
-        gap: jkl.$spacing-12;
+        gap: jkl.$unit-15;
         align-items: center;
         justify-content: flex-start;
     }