@fremtind/jokul 0.37.10 → 0.37.12

package/styles/components/message/message.scss

@@ -16,14 +16,14 @@ $_dismiss-hover-color: jkl.$color-stein;
     --jkl-message-icon-size: #{jkl.rem(24px)};
     --jkl-message-icon-left: #{jkl.rem(16px)};
     --jkl-message-icon-top: #{jkl.rem(24px)};
-    --jkl-message-title-margin: 0 0 #{jkl.$spacing-4} 0;
+    --jkl-message-title-margin: 0 0 #{jkl.$unit-05} 0;
     --jkl-message-dismiss-button-size: #{jkl.rem(44px)};
-    --jkl-message-gap: #{jkl.$spacing-12};
-    --jkl-message-padding: #{jkl.$spacing-16} #{jkl.$spacing-12};
+    --jkl-message-gap: #{jkl.$unit-15};
+    --jkl-message-padding: #{jkl.$unit-20} #{jkl.$unit-15};
 
     @include jkl.from-medium-device {
-        --jkl-message-gap: #{jkl.$spacing-16};
-        --jkl-message-padding: #{jkl.$spacing-24} #{jkl.$spacing-16};
+        --jkl-message-gap: #{jkl.$unit-20};
+        --jkl-message-padding: #{jkl.$unit-30} #{jkl.$unit-20};
     }
 }
 
@@ -35,8 +35,8 @@ $_dismiss-hover-color: jkl.$color-stein;
     --jkl-message-icon-left: #{jkl.rem(6px)};
     --jkl-message-icon-top: #{jkl.rem(14px)};
     --jkl-message-dismiss-button-size: #{jkl.rem(32px)};
-    --jkl-message-gap: #{jkl.$spacing-8};
-    --jkl-message-padding: #{jkl.$spacing-12} #{jkl.$spacing-8};
+    --jkl-message-gap: #{jkl.$unit-10};
+    --jkl-message-padding: #{jkl.$unit-15} #{jkl.$unit-10};
 }
 
 .jkl-message {
@@ -89,7 +89,6 @@ $_dismiss-hover-color: jkl.$color-stein;
         grid-area: dismiss;
         justify-self: end;
         position: relative;
-        margin-left: var(--jkl-message-gap);
 
         background-color: transparent;
         padding: 0;
@@ -97,6 +96,9 @@ $_dismiss-hover-color: jkl.$color-stein;
 
         color: inherit;
 
+        display: grid;
+        place-content: center;
+
         @include jkl.reset-outline;
         @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
         @include jkl.forced-colors-mode {
@@ -105,14 +107,14 @@ $_dismiss-hover-color: jkl.$color-stein;
 
         // Sørg for å ha en stor nok touch target.
         &::after {
-            --tap-increment: calc(
-                (var(--jkl-message-dismiss-button-size) - #{jkl.rem(20px)}) / 2 *
-                    - 1
-            );
             content: "";
             position: absolute;
-            inset: var(--tap-increment) var(--tap-increment)
-                var(--tap-increment) var(--tap-increment);
+            display: block;
+            width: var(--jkl-message-dismiss-button-size);
+            height: var(--jkl-message-dismiss-button-size);
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
         }
 
         &:hover {
@@ -121,7 +123,7 @@ $_dismiss-hover-color: jkl.$color-stein;
         }
 
         &:focus-visible {
-            @include jkl.focus-outline(0);
+            @include jkl.focus-outline;
         }
     }
 
@@ -183,5 +185,5 @@ $_dismiss-hover-color: jkl.$color-stein;
 }
 
 .jkl-form-error-message {
-    padding-bottom: jkl.$spacing-40;
+    padding-bottom: jkl.$unit-50;
 }

package/styles/components/modal/modal.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
  */
 :root,
 [data-layout-density=comfortable],
@@ -11,19 +11,19 @@
   --jkl-modal-title-font-size: var(--jkl-heading-3-font-size);
   --jkl-modal-title-line-height: var(--jkl-heading-3-line-height);
   --jkl-modal-title-font-weight: var(--jkl-heading-3-font-weight);
-  --jkl-modal-padding: 2.5rem;
+  --jkl-modal-padding: calc(var(--jkl-unit-10) * 5);
   --jkl-modal-min-width: 13.75rem;
   --jkl-modal-max-width: 41.25rem;
-  --jkl-modal-header-margin: 0 0 1.5rem;
-  --jkl-modal-actions-margin: 2.5rem 0 0 0;
+  --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 3);
+  --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 5) 0 0 0;
 }
 @media (width >= 0) and (max-width: 679px) {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-modal-padding: 2rem;
-    --jkl-modal-header-margin: 0 0 1rem;
-    --jkl-modal-actions-margin: 2rem 0 0 0;
+    --jkl-modal-padding: calc(var(--jkl-unit-10) * 4);
+    --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 2);
+    --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 4) 0 0 0;
   }
 }
 
@@ -35,9 +35,9 @@
   --jkl-modal-title-font-size: var(--jkl-heading-4-font-size);
   --jkl-modal-title-line-height: var(--jkl-heading-4-line-height);
   --jkl-modal-title-font-weight: var(--jkl-heading-4-font-weight);
-  --jkl-modal-padding: 1.5rem;
-  --jkl-modal-header-margin: 0 0 0.75rem;
-  --jkl-modal-actions-margin: 1.5rem 0 0 0;
+  --jkl-modal-padding: calc(var(--jkl-unit-10) * 3);
+  --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 1.5);
+  --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 3) 0 0 0;
   --jkl-modal-min-width: 13.75rem;
 }
 
@@ -82,7 +82,7 @@
 }
 @media (width >= 0) and (max-width: 679px) {
   .jkl-modal {
-    margin: auto 1.5rem;
+    margin: auto calc(var(--jkl-unit-10) * 3);
   }
 }
 
@@ -111,5 +111,5 @@
   margin: var(--jkl-modal-actions-margin);
   display: flex;
   flex-direction: row;
-  gap: 1rem;
+  gap: calc(var(--jkl-unit-10) * 2);
 }

package/styles/components/modal/modal.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-modal-body-font-size:var(--jkl-body-font-size);--jkl-modal-body-line-height:var(--jkl-body-line-height);--jkl-modal-body-font-weight:var(--jkl-body-font-weight);--jkl-modal-title-font-size:var(--jkl-heading-3-font-size);--jkl-modal-title-line-height:var(--jkl-heading-3-line-height);--jkl-modal-title-font-weight:var(--jkl-heading-3-font-weight);--jkl-modal-padding:2.5rem;--jkl-modal-min-width:13.75rem;--jkl-modal-max-width:41.25rem;--jkl-modal-header-margin:0 0 1.5rem;--jkl-modal-actions-margin:2.5rem 0 0 0}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-modal-padding:2rem;--jkl-modal-header-margin:0 0 1rem;--jkl-modal-actions-margin:2rem 0 0 0}}[data-density=compact],[data-layout-density=compact]{--jkl-modal-body-font-size:var(--jkl-small-font-size);--jkl-modal-body-line-height:var(--jkl-small-line-height);--jkl-modal-body-font-weight:var(--jkl-small-font-weight);--jkl-modal-title-font-size:var(--jkl-heading-4-font-size);--jkl-modal-title-line-height:var(--jkl-heading-4-line-height);--jkl-modal-title-font-weight:var(--jkl-heading-4-font-weight);--jkl-modal-padding:1.5rem;--jkl-modal-header-margin:0 0 0.75rem;--jkl-modal-actions-margin:1.5rem 0 0 0;--jkl-modal-min-width:13.75rem}.jkl-modal-container,.jkl-modal-overlay{inset:0;position:fixed}.jkl-modal-container{display:flex;z-index:9000}.jkl-modal-container[aria-hidden=true]{display:none}.jkl-modal-overlay{background-color:rgba(27,25,23,.8)}.jkl-modal{background-color:var(--jkl-color-background-container-high);border-radius:.125rem;box-shadow:0 .25rem .75rem rgba(37,42,49,.03);display:flex;flex-direction:column;margin:auto;max-height:90vh;max-width:var(--jkl-modal-max-width);min-width:var(--jkl-modal-min-width);overflow:auto;padding:var(--jkl-modal-padding);position:relative;width:100%;z-index:9000}@media screen and (forced-colors:active){.jkl-modal{border-color:CanvasText}}@media (width >= 0) and (max-width:679px){.jkl-modal{margin:auto 1.5rem}}.jkl-modal-header{align-items:center;display:flex;flex-direction:row;gap:var(--jkl-modal-gap);justify-content:space-between;margin:var(--jkl-modal-header-margin)}.jkl-modal-body{font-size:var(--jkl-modal-body-font-size);font-weight:var(--jkl-modal-body-font-weight);line-height:var(--jkl-modal-body-line-height)}.jkl-modal-title{font-size:var(--jkl-modal-title-font-size);font-weight:var(--jkl-modal-title-font-weight);line-height:var(--jkl-modal-title-line-height)}.jkl-modal-actions{display:flex;flex-direction:row;gap:1rem;margin:var(--jkl-modal-actions-margin)}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-modal-body-font-size:var(--jkl-body-font-size);--jkl-modal-body-line-height:var(--jkl-body-line-height);--jkl-modal-body-font-weight:var(--jkl-body-font-weight);--jkl-modal-title-font-size:var(--jkl-heading-3-font-size);--jkl-modal-title-line-height:var(--jkl-heading-3-line-height);--jkl-modal-title-font-weight:var(--jkl-heading-3-font-weight);--jkl-modal-padding:calc(var(--jkl-unit-10)*5);--jkl-modal-min-width:13.75rem;--jkl-modal-max-width:41.25rem;--jkl-modal-header-margin:0 0 calc(var(--jkl-unit-10)*3);--jkl-modal-actions-margin:calc(var(--jkl-unit-10)*5) 0 0 0}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-modal-padding:calc(var(--jkl-unit-10)*4);--jkl-modal-header-margin:0 0 calc(var(--jkl-unit-10)*2);--jkl-modal-actions-margin:calc(var(--jkl-unit-10)*4) 0 0 0}}[data-density=compact],[data-layout-density=compact]{--jkl-modal-body-font-size:var(--jkl-small-font-size);--jkl-modal-body-line-height:var(--jkl-small-line-height);--jkl-modal-body-font-weight:var(--jkl-small-font-weight);--jkl-modal-title-font-size:var(--jkl-heading-4-font-size);--jkl-modal-title-line-height:var(--jkl-heading-4-line-height);--jkl-modal-title-font-weight:var(--jkl-heading-4-font-weight);--jkl-modal-padding:calc(var(--jkl-unit-10)*3);--jkl-modal-header-margin:0 0 calc(var(--jkl-unit-10)*1.5);--jkl-modal-actions-margin:calc(var(--jkl-unit-10)*3) 0 0 0;--jkl-modal-min-width:13.75rem}.jkl-modal-container,.jkl-modal-overlay{inset:0;position:fixed}.jkl-modal-container{display:flex;z-index:9000}.jkl-modal-container[aria-hidden=true]{display:none}.jkl-modal-overlay{background-color:rgba(27,25,23,.8)}.jkl-modal{background-color:var(--jkl-color-background-container-high);border-radius:.125rem;box-shadow:0 .25rem .75rem rgba(37,42,49,.03);display:flex;flex-direction:column;margin:auto;max-height:90vh;max-width:var(--jkl-modal-max-width);min-width:var(--jkl-modal-min-width);overflow:auto;padding:var(--jkl-modal-padding);position:relative;width:100%;z-index:9000}@media screen and (forced-colors:active){.jkl-modal{border-color:CanvasText}}@media (width >= 0) and (max-width:679px){.jkl-modal{margin:auto calc(var(--jkl-unit-10)*3)}}.jkl-modal-header{align-items:center;display:flex;flex-direction:row;gap:var(--jkl-modal-gap);justify-content:space-between;margin:var(--jkl-modal-header-margin)}.jkl-modal-body{font-size:var(--jkl-modal-body-font-size);font-weight:var(--jkl-modal-body-font-weight);line-height:var(--jkl-modal-body-line-height)}.jkl-modal-title{font-size:var(--jkl-modal-title-font-size);font-weight:var(--jkl-modal-title-font-weight);line-height:var(--jkl-modal-title-line-height)}.jkl-modal-actions{display:flex;flex-direction:row;gap:calc(var(--jkl-unit-10)*2);margin:var(--jkl-modal-actions-margin)}

package/styles/components/modal/modal.scss

@@ -5,16 +5,16 @@
     @include jkl.declare-font-variables("jkl-modal-body", "body");
     @include jkl.declare-font-variables("jkl-modal-title", "heading-3");
 
-    --jkl-modal-padding: #{jkl.$spacing-40};
+    --jkl-modal-padding: #{jkl.$unit-50};
     --jkl-modal-min-width: #{jkl.rem(220px)};
     --jkl-modal-max-width: #{jkl.rem(660px)};
-    --jkl-modal-header-margin: 0 0 #{jkl.$spacing-24};
-    --jkl-modal-actions-margin: #{jkl.$spacing-40} 0 0 0;
+    --jkl-modal-header-margin: 0 0 #{jkl.$unit-30};
+    --jkl-modal-actions-margin: #{jkl.$unit-50} 0 0 0;
 
     @include jkl.small-device {
-        --jkl-modal-padding: #{jkl.$spacing-32};
-        --jkl-modal-header-margin: 0 0 #{jkl.$spacing-16};
-        --jkl-modal-actions-margin: #{jkl.$spacing-32} 0 0 0;
+        --jkl-modal-padding: #{jkl.$unit-40};
+        --jkl-modal-header-margin: 0 0 #{jkl.$unit-20};
+        --jkl-modal-actions-margin: #{jkl.$unit-40} 0 0 0;
     }
 }
 
@@ -22,9 +22,9 @@
     @include jkl.declare-font-variables("jkl-modal-body", "small");
     @include jkl.declare-font-variables("jkl-modal-title", "heading-4");
 
-    --jkl-modal-padding: #{jkl.$spacing-24};
-    --jkl-modal-header-margin: 0 0 #{jkl.$spacing-12};
-    --jkl-modal-actions-margin: #{jkl.$spacing-24} 0 0 0;
+    --jkl-modal-padding: #{jkl.$unit-30};
+    --jkl-modal-header-margin: 0 0 #{jkl.$unit-15};
+    --jkl-modal-actions-margin: #{jkl.$unit-30} 0 0 0;
     --jkl-modal-min-width: #{jkl.rem(220px)};
 }
 
@@ -71,7 +71,7 @@
     }
 
     @include jkl.small-device {
-        margin: auto jkl.$spacing-24;
+        margin: auto jkl.$unit-30;
     }
 }
 
@@ -96,5 +96,5 @@
     margin: var(--jkl-modal-actions-margin);
     display: flex;
     flex-direction: row;
-    gap: jkl.$spacing-16;
+    gap: jkl.$unit-20;
 }

package/styles/components/pagination/pagination.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-pagination {
   display: flex;
@@ -30,8 +30,8 @@
   color: var(--jkl-color-text-interactive-hover);
 }
 .jkl-pagination-button:focus-visible {
-  outline: 0.125rem solid var(--jkl-color-border-action);
-  outline-offset: 0;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-pagination-button--current {
   --jkl-icon-weight: 500;

package/styles/components/pagination/pagination.min.css

@@ -1 +1 @@
-.jkl-pagination{display:flex}.jkl-pagination__pages{align-items:center;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0}.jkl-pagination-button{all:unset;border-radius:.1875rem;color:var(--jkl-color-text-interactive);cursor:pointer;display:flex;height:2rem;justify-content:center;min-width:2rem;text-align:center;-webkit-user-select:none;user-select:none}.jkl-pagination-button:hover:not(:focus){color:var(--jkl-color-text-interactive-hover)}.jkl-pagination-button:focus-visible{outline:.125rem solid var(--jkl-color-border-action);outline-offset:0}.jkl-pagination-button--current{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-pagination-button--elipsis{display:block;height:2rem;text-align:center;-webkit-user-select:none;user-select:none;width:2rem}
+.jkl-pagination{display:flex}.jkl-pagination__pages{align-items:center;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0}.jkl-pagination-button{all:unset;border-radius:.1875rem;color:var(--jkl-color-text-interactive);cursor:pointer;display:flex;height:2rem;justify-content:center;min-width:2rem;text-align:center;-webkit-user-select:none;user-select:none}.jkl-pagination-button:hover:not(:focus){color:var(--jkl-color-text-interactive-hover)}.jkl-pagination-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-pagination-button--current{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-pagination-button--elipsis{display:block;height:2rem;text-align:center;-webkit-user-select:none;user-select:none;width:2rem}

package/styles/components/pagination/pagination.scss

@@ -32,7 +32,7 @@ $_button-size: jkl.rem(32px);
     }
 
     &:focus-visible {
-        @include jkl.focus-outline(0, jkl.rem(2px));
+        @include jkl.focus-outline;
     }
 
     &--current {

package/styles/components/popover/popover.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-popover {
   padding: var(--popover-padding, 0);

package/styles/components/progress-bar/progress-bar.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-progress-bar,
 .jkl-countdown {
@@ -37,11 +37,11 @@
 }
 
 .jkl-countdown__tracker {
-  animation: jkl-downcount-u1xsmzg var(--duration) linear forwards;
+  animation: jkl-downcount-uox67j4 var(--duration) linear forwards;
   animation-play-state: var(--play-state, running);
 }
 
-@keyframes jkl-downcount-u1xsmzg {
+@keyframes jkl-downcount-uox67j4 {
   from {
     width: 100%;
   }

package/styles/components/progress-bar/progress-bar.min.css

@@ -1 +1 @@
-.jkl-countdown,.jkl-progress-bar{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker,.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown,.jkl-progress-bar{background-color:Canvas}.jkl-countdown__tracker,.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar__tracker{transition-duration:.15s;transition-property:width;transition-timing-function:ease}.jkl-countdown__tracker{animation:jkl-downcount-u1xsmzg var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-u1xsmzg{0%{width:100%}to{width:0}}
+.jkl-countdown,.jkl-progress-bar{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker,.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown,.jkl-progress-bar{background-color:Canvas}.jkl-countdown__tracker,.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar__tracker{transition-duration:.15s;transition-property:width;transition-timing-function:ease}.jkl-countdown__tracker{animation:jkl-downcount-uox67j4 var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-uox67j4{0%{width:100%}to{width:0}}

package/styles/components/radio-button/radio-button.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
  */
 :root,
 [data-layout-density=comfortable],
@@ -35,7 +35,7 @@
   --jkl-radio-button-height: 1.75rem;
   --jkl-radio-button-line-height: 1.5rem;
   --jkl-radio-button-size: 1.125rem;
-  --jkl-radio-button-text-margin: 0.25rem 0;
+  --jkl-radio-button-text-margin: calc(var(--jkl-unit-10) * 0.5) 0;
   --jkl-radio-button-text-transform: translate3d(0, 0, 0);
   --jkl-radio-button-dot-margin: 0.4375rem 0.5rem 0.4375rem 0;
   --jkl-radio-button-dot-size: 0.625rem;
@@ -44,7 +44,7 @@
   --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
 }
 
-@keyframes jkl-dot-in-uyv9n7m {
+@keyframes jkl-dot-in-u1ltqco {
   0% {
     transform: scale(0.8);
   }
@@ -89,7 +89,7 @@
 }
 .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
   --dot-color: var(--jkl-color-border-action);
-  animation: jkl-dot-in-uyv9n7m 150ms ease;
+  animation: jkl-dot-in-u1ltqco 150ms ease;
 }
 @media screen and (forced-colors: active) {
   .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -104,8 +104,8 @@
   --background-color: var(--jkl-color-background-input-focus);
 }
 .jkl-radio-button__input:focus-visible + .jkl-radio-button__label > .jkl-radio-button__dot {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-radio-button--error .jkl-radio-button__input:focus-visible + .jkl-radio-button__label {
   --background-color: var(--jkl-color-background-alert-error);

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

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:0.25rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-uyv9n7m{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:transparent;--background-color:transparent;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);outline:0;outline-style:none;position:relative}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{opacity:0;position:absolute;top:-6px}.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-uyv9n7m .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:calc(var(--jkl-unit-10)*0.5) 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-u1ltqco{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:transparent;--background-color:transparent;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);outline:0;outline-style:none;position:relative}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{opacity:0;position:absolute;top:-6px}.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-u1ltqco .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}

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

@@ -36,7 +36,7 @@ $_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
         --jkl-radio-button-height: #{$_mobile-radio-button-height};
         --jkl-radio-button-line-height: #{$_mobile-radio-button-line-height};
         --jkl-radio-button-size: #{$_mobile-radio-button-size};
-        --jkl-radio-button-text-margin: #{jkl.$spacing-8} 0;
+        --jkl-radio-button-text-margin: #{jkl.$unit-10} 0;
         --jkl-radio-button-text-transform: translate3d(0, 0, 0);
         --jkl-radio-button-dot-margin: #{jkl.rem(10px)} #{jkl.$spacing-xs} #{jkl.rem(
                 10px
@@ -54,7 +54,7 @@ $_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
     --jkl-radio-button-height: #{$_compact-radio-button-height};
     --jkl-radio-button-line-height: #{$_compact-radio-button-line-height};
     --jkl-radio-button-size: #{$_compact-radio-button-size};
-    --jkl-radio-button-text-margin: #{jkl.$spacing-4} 0;
+    --jkl-radio-button-text-margin: #{jkl.$unit-05} 0;
     --jkl-radio-button-text-transform: translate3d(0, 0, 0);
     --jkl-radio-button-dot-margin: #{jkl.rem(7px)} #{jkl.$spacing-xs} #{jkl.rem(
             7px
@@ -209,8 +209,8 @@ $_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
     }
 
     + .jkl-form-support-label {
-        margin-left: calc(var(--jkl-radio-button-size) + #{jkl.$spacing-8});
+        margin-left: calc(var(--jkl-radio-button-size) + #{jkl.$unit-10});
         margin-top: jkl.rem(-6px);
-        margin-bottom: jkl.$spacing-8;
+        margin-bottom: jkl.$unit-10;
     }
 }

package/styles/components/select/select.css

@@ -1,18 +1,18 @@
 @charset "UTF-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
  */
 [data-layout-density=compact],
 [data-density=compact] {
-  --jkl-select-input-height: 2rem;
-  --jkl-select-arrow-right: 0.25rem;
-  --jkl-select-button-padding: 0.25rem 2rem 0.25rem
+  --jkl-select-input-height: calc(var(--jkl-unit-10) * 4);
+  --jkl-select-arrow-right: calc(var(--jkl-unit-10) * 0.5);
+  --jkl-select-button-padding: calc(var(--jkl-unit-10) * 0.5) calc(var(--jkl-unit-10) * 4) calc(var(--jkl-unit-10) * 0.5)
       0.5rem;
-  --jkl-select-search-input-padding: 0.25rem 0.5rem;
-  --jkl-select-native-padding: 0.25rem 1.5rem 0.25rem
-      0.25rem;
-  --jkl-select-option-padding: 0.25rem 0.5rem;
+  --jkl-select-search-input-padding: calc(var(--jkl-unit-10) * 0.5) 0.5rem;
+  --jkl-select-native-padding: calc(var(--jkl-unit-10) * 0.5) calc(var(--jkl-unit-10) * 3) calc(var(--jkl-unit-10) * 0.5)
+      calc(var(--jkl-unit-10) * 0.5);
+  --jkl-select-option-padding: calc(var(--jkl-unit-10) * 0.5) 0.5rem;
   --jkl-select-font-size: var(--jkl-small-font-size);
   --jkl-select-line-height: var(--jkl-small-line-height);
   --jkl-select-font-weight: var(--jkl-small-font-weight);
@@ -21,13 +21,13 @@
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --jkl-select-input-height: 3rem;
+  --jkl-select-input-height: calc(var(--jkl-unit-10) * 6);
   --jkl-select-arrow-right: 0.5rem;
   --jkl-select-button-padding: 0.5rem 2.25rem 0.5rem
-      0.75rem;
+      calc(var(--jkl-unit-10) * 1.5);
   --jkl-select-search-input-padding: var(--jkl-select-button-padding);
-  --jkl-select-native-padding: 0 2.5rem 0 0.5rem;
-  --jkl-select-option-padding: 0.5rem 0.75rem;
+  --jkl-select-native-padding: 0 calc(var(--jkl-unit-10) * 5) 0 0.5rem;
+  --jkl-select-option-padding: 0.5rem calc(var(--jkl-unit-10) * 1.5);
   --jkl-select-font-size: var(--jkl-body-font-size);
   --jkl-select-line-height: var(--jkl-body-line-height);
   --jkl-select-font-weight: var(--jkl-body-font-weight);
@@ -70,6 +70,10 @@
 .jkl-select *:focus {
   outline: none;
 }
+.jkl-select .jkl-tooltip-question-button:focus {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 0;
+}
 .jkl-select select {
   appearance: none;
 }
@@ -124,10 +128,8 @@
   color: var(--jkl-color-text-default);
 }
 .jkl-select__search-input:focus, .jkl-select__button:focus {
-  border-color: var(--jkl-color-border-input-focus);
-  color: var(--jkl-color-border-input-focus);
-  box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
-  background-color: var(--jkl-color-background-container-high);
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-select__search-input:hover, .jkl-select__button:hover {
   border-color: var(--jkl-color-border-input-focus);
@@ -163,7 +165,7 @@
     fill: CanvasText;
   }
 }
-:has([aria-invalid=true]) .jkl-select__arrow {
+.jkl-select:has([aria-invalid=true]) .jkl-select__arrow {
   color: var(--jkl-color-text-on-alert);
 }
 .jkl-select__options-menu {

package/styles/components/select/select.min.css

@@ -1 +1 @@
-[data-density=compact],[data-layout-density=compact]{--jkl-select-input-height:2rem;--jkl-select-arrow-right:0.25rem;--jkl-select-button-padding:0.25rem 2rem 0.25rem 0.5rem;--jkl-select-search-input-padding:0.25rem 0.5rem;--jkl-select-native-padding:0.25rem 1.5rem 0.25rem 0.25rem;--jkl-select-option-padding:0.25rem 0.5rem;--jkl-select-font-size:var(--jkl-small-font-size);--jkl-select-line-height:var(--jkl-small-line-height);--jkl-select-font-weight:var(--jkl-small-font-weight)}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:3rem;--jkl-select-arrow-right:0.5rem;--jkl-select-button-padding:0.5rem 2.25rem 0.5rem 0.75rem;--jkl-select-search-input-padding:var(--jkl-select-button-padding);--jkl-select-native-padding:0 2.5rem 0 0.5rem;--jkl-select-option-padding:0.5rem 0.75rem;--jkl-select-font-size:var(--jkl-body-font-size);--jkl-select-line-height:var(--jkl-body-line-height);--jkl-select-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:2.75rem}}.jkl-select{border-style:none;display:block;outline:0;outline-style:none;position:relative}.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select{border-style:revert;outline:revert;outline-style:revert}.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:revert;outline-style:revert}}.jkl-select :focus{outline:none}.jkl-select select{-webkit-appearance:none;appearance:none}.jkl-select select::ms-expand{display:none}.jkl-select select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--jkl-color-text-subdued)}.jkl-select select option{background-color:var(--jkl-color-background-container-high);color:var(--jkl-color-text-subdued);font-family:sans-serif;font-weight:400}.jkl-select__outer-wrapper{max-width:100%;min-width:7rem;position:relative;width:15rem}.jkl-select__search-input{box-sizing:border-box;color:var(--jkl-color-text-subdued);padding:var(--jkl-select-search-input-padding)}.jkl-select__search-input::selection{background-color:color-mix(in oklab,var(--jkl-color-text-subdued) 25%,var(--jkl-color-background-container) 15%)}.jkl-select__button,.jkl-select__search-input{background-color:transparent;border:.0625rem solid var(--jkl-color-border-input);border-radius:.1875rem;box-shadow:0 0 0 .0625rem transparent;color:var(--jkl-color-text-subdued);cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);height:var(--jkl-select-input-height);line-height:var(--jkl-select-line-height);overflow:hidden;text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;white-space:nowrap;width:100%}.jkl-select__button--active-value,.jkl-select__search-input--active-value{color:var(--jkl-color-text-default)}.jkl-select__button:focus,.jkl-select__search-input:focus{background-color:var(--jkl-color-background-container-high);border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus);color:var(--jkl-color-border-input-focus)}.jkl-select__button:hover,.jkl-select__search-input:hover{border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select__button:hover~.jkl-select__arrow,.jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-select__button{padding:var(--jkl-select-button-padding)}.jkl-select select.jkl-select__button{padding:var(--jkl-select-native-padding)}.jkl-select__arrow{color:var(--jkl-color-text-default);pointer-events:none;position:absolute;right:var(--jkl-select-arrow-right);top:50%;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-select__arrow,.jkl-select__arrow path,.jkl-select__arrow svg{stroke:CanvasText;fill:CanvasText}}:has([aria-invalid=true]) .jkl-select__arrow{color:var(--jkl-color-text-on-alert)}.jkl-select__options-menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);border-radius:0 0 .1875rem .1875rem;border-top:none;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-select-max-shown-options, 5) + .5)*var(--jkl-select-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-select__option-wrapper{list-style-type:none;margin:0;padding:0;-webkit-overflow-scrolling:touch}.jkl-select__option{background-color:inherit;border:0;color:unset;cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);line-height:var(--jkl-select-line-height);min-height:var(--jkl-select-input-height);padding:var(--jkl-select-option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-select__option:focus,:not([data-focus=controlled])>.jkl-select__option:hover{background-color:var(--jkl-color-background-interactive-hover);color:var(--jkl-color-text-default)}.jkl-select__option-description{color:var(--jkl-color-text-subdued);display:block;font-size:1rem;font-weight:400;line-height:1.5rem;width:100%;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-select--inline{display:inline-block;vertical-align:top}.jkl-select--open .jkl-select__button,.jkl-select--open .jkl-select__search-input{background-color:var(--jkl-color-background-container-high);border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select--open .jkl-select__button:hover~.jkl-select__arrow,.jkl-select--open .jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% - .1875rem))}.jkl-select--invalid .jkl-select__button,.jkl-select--invalid .jkl-select__search-input{background-color:var(--jkl-color-background-alert-error);color:var(--jkl-color-text-on-alert-subdued)}.jkl-select--invalid .jkl-select__button--active-value,.jkl-select--invalid .jkl-select__search-input--active-value{color:revert}@media screen and (forced-colors:active){.jkl-select .jkl-select__button,.jkl-select .jkl-select__search-input{background-color:Canvas;border:2px solid ButtonText;color:CanvasText;outline:revert}.jkl-select .jkl-select__button:hover,.jkl-select .jkl-select__search-input:hover{border-color:Highlight}.jkl-select .jkl-select__option{border-bottom:1px solid Canvas;border-top:1px solid Canvas;color:CanvasText}.jkl-select .jkl-select__option:focus,.jkl-select .jkl-select__option:hover{border-bottom:1px solid SelectedItem;border-top:1px solid SelectedItem;--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}}
+[data-density=compact],[data-layout-density=compact]{--jkl-select-input-height:calc(var(--jkl-unit-10)*4);--jkl-select-arrow-right:calc(var(--jkl-unit-10)*0.5);--jkl-select-button-padding:calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*4) calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-search-input-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-native-padding:calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*3) calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*0.5);--jkl-select-option-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-select-font-size:var(--jkl-small-font-size);--jkl-select-line-height:var(--jkl-small-line-height);--jkl-select-font-weight:var(--jkl-small-font-weight)}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:calc(var(--jkl-unit-10)*6);--jkl-select-arrow-right:0.5rem;--jkl-select-button-padding:0.5rem 2.25rem 0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-select-search-input-padding:var(--jkl-select-button-padding);--jkl-select-native-padding:0 calc(var(--jkl-unit-10)*5) 0 0.5rem;--jkl-select-option-padding:0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-select-font-size:var(--jkl-body-font-size);--jkl-select-line-height:var(--jkl-body-line-height);--jkl-select-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:2.75rem}}.jkl-select{border-style:none;display:block;outline:0;outline-style:none;position:relative}.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select{border-style:revert;outline:revert;outline-style:revert}.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:revert;outline-style:revert}}.jkl-select :focus{outline:none}.jkl-select .jkl-tooltip-question-button:focus{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-select select{-webkit-appearance:none;appearance:none}.jkl-select select::ms-expand{display:none}.jkl-select select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--jkl-color-text-subdued)}.jkl-select select option{background-color:var(--jkl-color-background-container-high);color:var(--jkl-color-text-subdued);font-family:sans-serif;font-weight:400}.jkl-select__outer-wrapper{max-width:100%;min-width:7rem;position:relative;width:15rem}.jkl-select__search-input{box-sizing:border-box;color:var(--jkl-color-text-subdued);padding:var(--jkl-select-search-input-padding)}.jkl-select__search-input::selection{background-color:color-mix(in oklab,var(--jkl-color-text-subdued) 25%,var(--jkl-color-background-container) 15%)}.jkl-select__button,.jkl-select__search-input{background-color:transparent;border:.0625rem solid var(--jkl-color-border-input);border-radius:.1875rem;box-shadow:0 0 0 .0625rem transparent;color:var(--jkl-color-text-subdued);cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);height:var(--jkl-select-input-height);line-height:var(--jkl-select-line-height);overflow:hidden;text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;white-space:nowrap;width:100%}.jkl-select__button--active-value,.jkl-select__search-input--active-value{color:var(--jkl-color-text-default)}.jkl-select__button:focus,.jkl-select__search-input:focus{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-select__button:hover,.jkl-select__search-input:hover{border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select__button:hover~.jkl-select__arrow,.jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-select__button{padding:var(--jkl-select-button-padding)}.jkl-select select.jkl-select__button{padding:var(--jkl-select-native-padding)}.jkl-select__arrow{color:var(--jkl-color-text-default);pointer-events:none;position:absolute;right:var(--jkl-select-arrow-right);top:50%;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-select__arrow,.jkl-select__arrow path,.jkl-select__arrow svg{stroke:CanvasText;fill:CanvasText}}.jkl-select:has([aria-invalid=true]) .jkl-select__arrow{color:var(--jkl-color-text-on-alert)}.jkl-select__options-menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);border-radius:0 0 .1875rem .1875rem;border-top:none;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-select-max-shown-options, 5) + .5)*var(--jkl-select-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-select__option-wrapper{list-style-type:none;margin:0;padding:0;-webkit-overflow-scrolling:touch}.jkl-select__option{background-color:inherit;border:0;color:unset;cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);line-height:var(--jkl-select-line-height);min-height:var(--jkl-select-input-height);padding:var(--jkl-select-option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-select__option:focus,:not([data-focus=controlled])>.jkl-select__option:hover{background-color:var(--jkl-color-background-interactive-hover);color:var(--jkl-color-text-default)}.jkl-select__option-description{color:var(--jkl-color-text-subdued);display:block;font-size:1rem;font-weight:400;line-height:1.5rem;width:100%;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-select--inline{display:inline-block;vertical-align:top}.jkl-select--open .jkl-select__button,.jkl-select--open .jkl-select__search-input{background-color:var(--jkl-color-background-container-high);border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select--open .jkl-select__button:hover~.jkl-select__arrow,.jkl-select--open .jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% - .1875rem))}.jkl-select--invalid .jkl-select__button,.jkl-select--invalid .jkl-select__search-input{background-color:var(--jkl-color-background-alert-error);color:var(--jkl-color-text-on-alert-subdued)}.jkl-select--invalid .jkl-select__button--active-value,.jkl-select--invalid .jkl-select__search-input--active-value{color:revert}@media screen and (forced-colors:active){.jkl-select .jkl-select__button,.jkl-select .jkl-select__search-input{background-color:Canvas;border:2px solid ButtonText;color:CanvasText;outline:revert}.jkl-select .jkl-select__button:hover,.jkl-select .jkl-select__search-input:hover{border-color:Highlight}.jkl-select .jkl-select__option{border-bottom:1px solid Canvas;border-top:1px solid Canvas;color:CanvasText}.jkl-select .jkl-select__option:focus,.jkl-select .jkl-select__option:hover{border-bottom:1px solid SelectedItem;border-top:1px solid SelectedItem;--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}}

package/styles/components/select/select.scss

@@ -5,26 +5,26 @@
 @use "../../core/jkl/colors";
 
 @include jkl.compact-density-variables {
-    --jkl-select-input-height: #{jkl.rem(32px)};
-    --jkl-select-arrow-right: #{jkl.rem(4px)};
-    --jkl-select-button-padding: #{jkl.$spacing-4} #{jkl.$spacing-32} #{jkl.$spacing-4}
-        #{jkl.$spacing-8};
-    --jkl-select-search-input-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
-    --jkl-select-native-padding: #{jkl.$spacing-4} #{jkl.$spacing-24} #{jkl.$spacing-4}
-        #{jkl.$spacing-4};
-    --jkl-select-option-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
+    --jkl-select-input-height: #{jkl.$unit-40};
+    --jkl-select-arrow-right: #{jkl.$unit-05};
+    --jkl-select-button-padding: #{jkl.$unit-05} #{jkl.$unit-40} #{jkl.$unit-05}
+        #{jkl.$unit-10};
+    --jkl-select-search-input-padding: #{jkl.$unit-05} #{jkl.$unit-10};
+    --jkl-select-native-padding: #{jkl.$unit-05} #{jkl.$unit-30} #{jkl.$unit-05}
+        #{jkl.$unit-05};
+    --jkl-select-option-padding: #{jkl.$unit-05} #{jkl.$unit-10};
 
     @include jkl.declare-font-variables("jkl-select", "small");
 }
 
 @include jkl.comfortable-density-variables {
-    --jkl-select-input-height: #{jkl.rem(48px)};
-    --jkl-select-arrow-right: #{jkl.$spacing-8};
-    --jkl-select-button-padding: #{jkl.$spacing-8} #{jkl.rem(36px)} #{jkl.$spacing-8}
-        #{jkl.$spacing-12};
+    --jkl-select-input-height: #{jkl.$unit-60};
+    --jkl-select-arrow-right: #{jkl.$unit-10};
+    --jkl-select-button-padding: #{jkl.$unit-10} #{jkl.rem(36px)} #{jkl.$unit-10}
+        #{jkl.$unit-15};
     --jkl-select-search-input-padding: var(--jkl-select-button-padding);
-    --jkl-select-native-padding: 0 #{jkl.$spacing-40} 0 #{jkl.$spacing-8};
-    --jkl-select-option-padding: #{jkl.$spacing-8} #{jkl.$spacing-12};
+    --jkl-select-native-padding: 0 #{jkl.$unit-50} 0 #{jkl.$unit-10};
+    --jkl-select-option-padding: #{jkl.$unit-10} #{jkl.$unit-15};
 
     @include jkl.declare-font-variables("jkl-select", "body");
 
@@ -43,6 +43,10 @@
         outline: none;
     }
 
+    & .jkl-tooltip-question-button:focus {
+        @include jkl.focus-outline($offset: 0);
+    }
+
     & select {
         appearance: none;
 
@@ -110,10 +114,7 @@
         }
 
         &:focus {
-            border-color: var(--jkl-color-border-input-focus);
-            color: var(--jkl-color-border-input-focus);
-            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
-            background-color: var(--jkl-color-background-container-high);
+            @include jkl.focus-outline;
         }
 
         &:hover {
@@ -150,7 +151,7 @@
             $fill: CanvasText
         );
 
-        :has([aria-invalid="true"]) & {
+        .jkl-select:has([aria-invalid="true"]) & {
             color: var(--jkl-color-text-on-alert);
         }
     }

package/styles/components/summary-table/summary-table.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
  */
 @media screen and (prefers-color-scheme: light) {
   :root {