@fremtind/jokul 6.1.0-next.2 → 6.1.0-next.4

package/styles/components.css

@@ -425,7 +425,7 @@
     display: inline-flex;
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uce8fth forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u8trttj forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -479,7 +479,27 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uce8fth {
+  h1.jkl-label-heading {
+    font: var(--jkl-text-style-heading-3);
+    margin-block: 0;
+  }
+  h1.jkl-label-heading > .jkl-label {
+    margin: 0;
+  }
+  .jkl-input-group > h1.jkl-label-heading,
+  .jkl-field-group__legend:has(.jkl-label-heading) {
+    margin-block-end: var(--jkl-spacing-32);
+  }
+  .jkl-input-group > h1.jkl-label-heading:has(+ .jkl-input-group-description),
+  .jkl-field-group__legend:has(.jkl-label-heading):has(+ .jkl-input-group-description) {
+    margin-block-end: var(--jkl-spacing-4);
+  }
+  .jkl-input-group > h1.jkl-label-heading + .jkl-input-group-description,
+  .jkl-field-group__legend:has(.jkl-label-heading) + .jkl-input-group-description {
+    font: var(--jkl-text-style-paragraph-medium);
+    margin-block-end: var(--jkl-spacing-32);
+  }
+  @keyframes jkl-support-icon-entrance-u8trttj {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -700,7 +720,6 @@
     --jkl-button-padding-icon-button: var(--jkl-unit-10);
     --jkl-button-tertiary-padding-icon: var(--jkl-unit-05);
     --jkl-button-text-ink-offset: 0.1em;
-    --button-min-width: 9ch;
     --jkl-icon-weight: var(--jkl-icon-weight-bold);
     --text-color: var(--jkl-color-text-default);
     --background-color: transparent;
@@ -727,7 +746,7 @@
     transition-property: background-color;
   }
   .jkl-button:has(.jkl-button__text) {
-    min-width: var(--button-min-width);
+    min-width: var(--button-min-width, 9ch);
   }
   .jkl-button:has(.jkl-button__text):has(.jkl-icon) {
     min-width: initial;
@@ -839,22 +858,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uce8fu6;
+    animation-name: jkl-loader-left-spin-u8trtud;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uce8fud;
+    animation-name: jkl-loader-middle-spin-u8trtuw;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uce8fv1;
+    animation-name: jkl-loader-right-spin-u8trtvq;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uce8fu6 {
+  @keyframes jkl-loader-left-spin-u8trtud {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -868,7 +887,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uce8fud {
+  @keyframes jkl-loader-middle-spin-u8trtuw {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -885,7 +904,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uce8fv1 {
+  @keyframes jkl-loader-right-spin-u8trtvq {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -925,7 +944,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uce8fv6;
+      animation: 2s ease infinite jkl-blink-u8trtw4;
     }
   }
   .jkl-skeleton-input {
@@ -973,10 +992,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uce8fv6;
+      animation: 2s ease-in-out infinite jkl-blink-u8trtw4;
     }
   }
-  @keyframes jkl-blink-uce8fv6 {
+  @keyframes jkl-blink-u8trtw4 {
     0% {
       opacity: 1;
     }
@@ -996,6 +1015,18 @@
     }
   }
 }
+@layer jokul.components {
+  .jkl-button-group {
+    --button-min-width: 15ch;
+    container: --jkl-button-group/inline-size;
+    width: 100%;
+  }
+  @container --jkl-button-group (width < 35ch) {
+    .jkl-button-group > .jkl-button {
+      align-self: stretch;
+    }
+  }
+}
 @layer jokul.components {
   .jkl-card {
     --padding-s: var(--jkl-unit-10);
@@ -2124,10 +2155,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uce8fw5 var(--duration) linear forwards;
+    animation: jkl-downcount-u8trtx3 var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uce8fw5 {
+  @keyframes jkl-downcount-u8trtx3 {
     from {
       width: 100%;
     }
@@ -2300,26 +2331,34 @@
   .jkl-date-input .jkl-calendar:popover-open {
     display: block;
   }
-  @media screen and (min-width: 600px) {
+  @media screen and (width >= 600px) {
     .jkl-date-input .jkl-calendar__labels {
       display: none;
     }
     .jkl-date-input .jkl-calendar {
       width: max-content;
+      box-sizing: border-box;
+      overflow-y: auto;
       margin-block: var(--jkl-unit-10);
       margin-left: 0;
       position-anchor: --calendar-trigger;
       top: anchor(bottom);
       left: anchor(left);
-      position-try-fallbacks: --fallback-calendar-position;
+      position-try-fallbacks: --fallback-calendar-top, --fallback-calendar-center;
     }
   }
 }
-@position-try --fallback-calendar-position {
+@position-try --fallback-calendar-top {
   bottom: anchor(top);
   top: unset;
   margin-top: 10px;
 }
+@position-try --fallback-calendar-center {
+  inset: 0;
+  margin: auto;
+  height: fit-content;
+  max-height: calc(100dvh - 2 * var(--jkl-unit-20));
+}
 @layer jokul.components {
   .jkl-calendar__labels {
     margin-block-end: var(--jkl-unit-20);
@@ -3548,12 +3587,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uce8fwu 0.25s ease-out;
+    animation: jkl-show-u8trtxc 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uce8fwu {
+  @keyframes jkl-show-u8trtxc {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -3765,7 +3804,7 @@
     --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uce8fxr var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-u8trtxe var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -3787,7 +3826,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-uce8fxr {
+  @keyframes jkl-dismiss-u8trtxe {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -5090,7 +5129,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-uce8fyp {
+  @keyframes jkl-downcount-u8trtxs {
     from {
       width: 100%;
     }
@@ -5116,7 +5155,7 @@
   .jkl-segmented-control .jkl-segmented-control-legend {
     margin-block-end: 0.25lh;
   }
-  .jkl-segmented-control .jkl-segmented-control-item {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button {
     --jkl-segmented-control-border-width: 1px;
     --jkl-segmented-controls-border-radius: 2lh;
     cursor: pointer;
@@ -5127,46 +5166,46 @@
     border: var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-subdued);
     border-radius: 0;
     margin-inline-end: calc(var(--jkl-segmented-control-border-width) * -1);
-    margin-block-end: 0.5lh;
+    margin-block: 0;
     transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
     transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: border background;
   }
-  .jkl-segmented-control .jkl-segmented-control-item label {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button label {
     cursor: pointer;
     padding: var(--jkl-segmented-controls-padding);
   }
-  .jkl-segmented-control .jkl-segmented-control-item:hover {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:hover {
     background-color: color-mix(in srgb, currentColor 6%, transparent);
     border-color: var(--jkl-color-border-default);
     z-index: 2;
   }
-  .jkl-segmented-control .jkl-segmented-control-item:has(input:checked) {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input:checked) {
     background-color: var(--jkl-color-background-container);
     border-color: var(--jkl-color-border-subdued);
     z-index: 1;
   }
-  .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]) {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input[data-separated=true]) {
     border-radius: var(--jkl-segmented-controls-border-radius);
     margin-inline-start: var(--jkl-segmented-controls-margin);
   }
-  .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]):first-of-type {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input[data-separated=true]):first-of-type {
     margin-inline-start: 0;
   }
-  .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]) + span + .jkl-segmented-control-item {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input[data-separated=true]) + span + .jkl-segmented-control-item {
     border-end-start-radius: var(--jkl-segmented-controls-border-radius);
     border-start-start-radius: var(--jkl-segmented-controls-border-radius);
     margin-inline-start: var(--jkl-segmented-controls-margin);
   }
-  .jkl-segmented-control .jkl-segmented-control-item:first-of-type {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:first-of-type {
     border-end-start-radius: var(--jkl-segmented-controls-border-radius);
     border-start-start-radius: var(--jkl-segmented-controls-border-radius);
   }
-  .jkl-segmented-control .jkl-segmented-control-item:last-of-type {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:last-of-type {
     border-end-end-radius: var(--jkl-segmented-controls-border-radius);
     border-start-end-radius: var(--jkl-segmented-controls-border-radius);
   }
-  .jkl-segmented-control .jkl-segmented-control-item:has(+ span + .jkl-segmented-control-item > input[data-separated=true]) {
+  .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(+ span + .jkl-segmented-control-item > input[data-separated=true]) {
     border-end-end-radius: var(--jkl-segmented-controls-border-radius);
     border-start-end-radius: var(--jkl-segmented-controls-border-radius);
   }
@@ -5330,7 +5369,7 @@
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uce8fzk var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-u8trtyy var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -5368,7 +5407,7 @@
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uce8fzk {
+  @keyframes jkl-dismiss-u8trtyy {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5720,12 +5759,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uce8g07 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-u8trtzh var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uce8g0b var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-u8trtzp var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uce8g07 {
+  @keyframes jkl-entering-u8trtzh {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5735,7 +5774,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uce8g0b {
+  @keyframes jkl-exiting-u8trtzp {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);