@fremtind/jokul 1.6.0 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/package.json +1 -1
  2. package/styles/components/checkbox/checkbox.css +4 -4
  3. package/styles/components/checkbox/checkbox.min.css +1 -1
  4. package/styles/components/checkbox-panel/checkbox-panel.css +190 -5
  5. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -3
  6. package/styles/components/checkbox-panel/checkbox-panel.scss +3 -5
  7. package/styles/components/countdown/countdown.css +2 -2
  8. package/styles/components/countdown/countdown.min.css +1 -1
  9. package/styles/components/feedback/feedback.css +2 -2
  10. package/styles/components/feedback/feedback.min.css +1 -1
  11. package/styles/components/file-input/file-input.css +11 -11
  12. package/styles/components/file-input/file-input.min.css +1 -1
  13. package/styles/components/input-group/input-group.css +2 -2
  14. package/styles/components/input-group/input-group.min.css +1 -1
  15. package/styles/components/loader/loader.css +6 -6
  16. package/styles/components/loader/loader.min.css +1 -1
  17. package/styles/components/loader/skeleton-loader.css +5 -5
  18. package/styles/components/loader/skeleton-loader.min.css +1 -1
  19. package/styles/components/message/message.css +2 -2
  20. package/styles/components/message/message.min.css +1 -1
  21. package/styles/components/progress-bar/progress-bar.css +1 -1
  22. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  23. package/styles/components/radio-button/radio-button.css +2 -2
  24. package/styles/components/radio-button/radio-button.min.css +1 -1
  25. package/styles/components/radio-panel/radio-panel.css +2 -2
  26. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  27. package/styles/components/segmented-control/segmented-control.css +4 -4
  28. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  29. package/styles/components/system-message/system-message.css +2 -2
  30. package/styles/components/system-message/system-message.min.css +1 -1
  31. package/styles/components/toast/toast.css +4 -4
  32. package/styles/components/toast/toast.min.css +1 -1
  33. package/styles/styles.css +37 -39
  34. package/styles/styles.min.css +1 -3
package/styles/styles.css CHANGED
@@ -597,7 +597,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
597
597
  --color: var(--jkl-color-text-default);
598
598
  }
599
599
  .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 {
600
- animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-udvg9mn forwards;
600
+ animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uy8zi63 forwards;
601
601
  }
602
602
  .jkl-form-support-label--sr-only {
603
603
  border: 0 !important;
@@ -685,7 +685,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
685
685
  text-wrap: pretty;
686
686
  }
687
687
 
688
- @keyframes jkl-support-icon-entrance-udvg9mn {
688
+ @keyframes jkl-support-icon-entrance-uy8zi63 {
689
689
  0% {
690
690
  margin-right: 0;
691
691
  opacity: 0;
@@ -1085,15 +1085,15 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1085
1085
  animation: 2500ms linear infinite;
1086
1086
  }
1087
1087
  .jkl-loader__dot--left {
1088
- animation-name: jkl-loader-left-spin-udvg9nd;
1088
+ animation-name: jkl-loader-left-spin-uy8zi6e;
1089
1089
  margin-right: 1.71em;
1090
1090
  }
1091
1091
  .jkl-loader__dot--middle {
1092
- animation-name: jkl-loader-middle-spin-udvg9o7;
1092
+ animation-name: jkl-loader-middle-spin-uy8zi6n;
1093
1093
  margin-right: 1.9em;
1094
1094
  }
1095
1095
  .jkl-loader__dot--right {
1096
- animation-name: jkl-loader-right-spin-udvg9of;
1096
+ animation-name: jkl-loader-right-spin-uy8zi6x;
1097
1097
  }
1098
1098
  @media screen and (forced-colors: active) {
1099
1099
  .jkl-loader__dot {
@@ -1120,7 +1120,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1120
1120
  .jkl-loader--small > .jkl-loader__dot--middle {
1121
1121
  margin-right: 0.3em;
1122
1122
  }
1123
- @keyframes jkl-loader-left-spin-udvg9nd {
1123
+ @keyframes jkl-loader-left-spin-uy8zi6e {
1124
1124
  0% {
1125
1125
  transform: rotate(0) scale(0);
1126
1126
  }
@@ -1134,7 +1134,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1134
1134
  transform: rotate(180deg) scale(0);
1135
1135
  }
1136
1136
  }
1137
- @keyframes jkl-loader-middle-spin-udvg9o7 {
1137
+ @keyframes jkl-loader-middle-spin-uy8zi6n {
1138
1138
  0% {
1139
1139
  transform: rotate(20deg) scale(0);
1140
1140
  }
@@ -1151,7 +1151,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1151
1151
  transform: rotate(200deg) scale(0);
1152
1152
  }
1153
1153
  }
1154
- @keyframes jkl-loader-right-spin-udvg9of {
1154
+ @keyframes jkl-loader-right-spin-uy8zi6x {
1155
1155
  0% {
1156
1156
  transform: rotate(40deg) scale(0);
1157
1157
  }
@@ -1199,7 +1199,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1199
1199
  bottom: 0;
1200
1200
  width: 12.5rem;
1201
1201
  background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
1202
- animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-udvg9os;
1202
+ animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uy8zi7p;
1203
1203
  }
1204
1204
  @media (width >= 0) and (max-width: 679px) {
1205
1205
  .jkl-skeleton-animation {
@@ -1229,7 +1229,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1229
1229
  @media screen and (forced-colors: active) {
1230
1230
  .jkl-skeleton-element {
1231
1231
  border: 1px solid CanvasText;
1232
- animation: 2s ease infinite jkl-blink-udvg9p6;
1232
+ animation: 2s ease infinite jkl-blink-uy8zi7u;
1233
1233
  }
1234
1234
  }
1235
1235
  .jkl-skeleton-input {
@@ -1283,10 +1283,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1283
1283
  }
1284
1284
  @media screen and (forced-colors: active) {
1285
1285
  .jkl-skeleton-table {
1286
- animation: 2s ease-in-out infinite jkl-blink-udvg9p6;
1286
+ animation: 2s ease-in-out infinite jkl-blink-uy8zi7u;
1287
1287
  }
1288
1288
  }
1289
- @keyframes jkl-sweep-udvg9os {
1289
+ @keyframes jkl-sweep-uy8zi7p {
1290
1290
  0% {
1291
1291
  transform: translateX(calc(0vw - 200px));
1292
1292
  }
@@ -1294,7 +1294,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1294
1294
  transform: translateX(calc(100vw + 400px));
1295
1295
  }
1296
1296
  }
1297
- @keyframes jkl-blink-udvg9p6 {
1297
+ @keyframes jkl-blink-uy8zi7u {
1298
1298
  0% {
1299
1299
  opacity: 1;
1300
1300
  }
@@ -1514,7 +1514,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1514
1514
  --jkl-checkbox-box-size: 1.125rem;
1515
1515
  --jkl-checkbox-line-height: 1.5rem;
1516
1516
  }
1517
- @keyframes jkl-checkbox-checked-udvg9pz {
1517
+ @keyframes jkl-checkbox-checked-uy8zi8q {
1518
1518
  0% {
1519
1519
  width: 0;
1520
1520
  height: 0;
@@ -1528,7 +1528,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1528
1528
  height: 58%;
1529
1529
  }
1530
1530
  }
1531
- @keyframes jkl-checkbox-indeterminate-udvg9qm {
1531
+ @keyframes jkl-checkbox-indeterminate-uy8zi9g {
1532
1532
  0% {
1533
1533
  width: 0;
1534
1534
  }
@@ -1557,11 +1557,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1557
1557
  left: calc(-0.5 * var(--jkl-checkbox-box-size));
1558
1558
  }
1559
1559
  .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
1560
- animation: jkl-checkbox-checked-udvg9pz 150ms ease-in-out forwards;
1560
+ animation: jkl-checkbox-checked-uy8zi8q 150ms ease-in-out forwards;
1561
1561
  opacity: 1;
1562
1562
  }
1563
1563
  .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
1564
- animation: jkl-checkbox-indeterminate-udvg9qm 150ms ease-in-out forwards;
1564
+ animation: jkl-checkbox-indeterminate-uy8zi9g 150ms ease-in-out forwards;
1565
1565
  opacity: 1;
1566
1566
  }
1567
1567
  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
@@ -1732,7 +1732,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1732
1732
  --outer-border-thickness: 0.125rem;
1733
1733
  }
1734
1734
 
1735
- @keyframes jkl-checkbox-checked-udvg9rj {
1735
+ @keyframes jkl-checkbox-checked-uy8zi9z {
1736
1736
  0% {
1737
1737
  width: 0;
1738
1738
  height: 0;
@@ -1796,13 +1796,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1796
1796
  }
1797
1797
  }
1798
1798
  .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
1799
- animation: jkl-checkbox-checked-udvg9rj 150ms ease-in-out forwards;
1799
+ animation: jkl-checkbox-checked-uy8zi9z 150ms ease-in-out forwards;
1800
1800
  opacity: 1;
1801
1801
  }
1802
1802
  .jkl-checkbox-panel:has([aria-invalid=true]) {
1803
- --checkbox-background-color: var(
1804
- --jkl-color-background-alert-error
1805
- );
1803
+ --checkbox-background-color: var(--jkl-color-background-alert-error);
1806
1804
  --checkbox-check-color: var(--jkl-color-text-on-alert);
1807
1805
  }
1808
1806
  }
@@ -2493,10 +2491,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
2493
2491
  }
2494
2492
  }
2495
2493
  .jkl-countdown__tracker {
2496
- animation: jkl-downcount-udvg9sa var(--duration) linear forwards;
2494
+ animation: jkl-downcount-uy8ziaj var(--duration) linear forwards;
2497
2495
  animation-play-state: var(--play-state, running);
2498
2496
  }
2499
- @keyframes jkl-downcount-udvg9sa {
2497
+ @keyframes jkl-downcount-uy8ziaj {
2500
2498
  from {
2501
2499
  width: 100%;
2502
2500
  }
@@ -3110,7 +3108,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3110
3108
  }
3111
3109
  }
3112
3110
 
3113
- @keyframes jkl-show-udvg9sz {
3111
+ @keyframes jkl-show-uy8zibf {
3114
3112
  from {
3115
3113
  transform: translate3d(0, 0.5rem, 0);
3116
3114
  opacity: 0;
@@ -3145,7 +3143,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3145
3143
  }
3146
3144
  }
3147
3145
  .jkl-feedback__fade-in {
3148
- animation: jkl-show-udvg9sz 0.25s ease-out;
3146
+ animation: jkl-show-uy8zibf 0.25s ease-out;
3149
3147
  }
3150
3148
  .jkl-feedback__buttons {
3151
3149
  display: flex;
@@ -3387,7 +3385,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3387
3385
  --background-color: var(--jkl-color-background-alert-success);
3388
3386
  }
3389
3387
  .jkl-message--dismissed {
3390
- animation: jkl-dismiss-udvg9tv 400ms ease-in-out forwards;
3388
+ animation: jkl-dismiss-uy8zibi 400ms ease-in-out forwards;
3391
3389
  transition: visibility 0ms 400ms;
3392
3390
  visibility: hidden;
3393
3391
  }
@@ -3407,7 +3405,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3407
3405
  }
3408
3406
  }
3409
3407
 
3410
- @keyframes jkl-dismiss-udvg9tv {
3408
+ @keyframes jkl-dismiss-uy8zibi {
3411
3409
  from {
3412
3410
  opacity: 1;
3413
3411
  transform: translate3d(0, 0, 0);
@@ -3464,7 +3462,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3464
3462
  --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
3465
3463
  }
3466
3464
 
3467
- @keyframes jkl-dot-in-udvg9uc {
3465
+ @keyframes jkl-dot-in-uy8ziby {
3468
3466
  0% {
3469
3467
  transform: scale(0.8);
3470
3468
  }
@@ -3510,7 +3508,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3510
3508
  }
3511
3509
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
3512
3510
  --dot-color: var(--jkl-color-border-action);
3513
- animation: jkl-dot-in-udvg9uc 150ms ease;
3511
+ animation: jkl-dot-in-uy8ziby 150ms ease;
3514
3512
  }
3515
3513
  @media screen and (forced-colors: active) {
3516
3514
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -4598,7 +4596,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4598
4596
  transition-timing-function: ease;
4599
4597
  transition-duration: 150ms;
4600
4598
  }
4601
- @keyframes jkl-downcount-udvg9v5 {
4599
+ @keyframes jkl-downcount-uy8zicq {
4602
4600
  from {
4603
4601
  width: 100%;
4604
4602
  }
@@ -4608,7 +4606,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4608
4606
  }
4609
4607
  }
4610
4608
  @layer jokul.components {
4611
- @keyframes jkl-dot-in-udvg9vf {
4609
+ @keyframes jkl-dot-in-uy8zidg {
4612
4610
  0% {
4613
4611
  transform: scale(0.8);
4614
4612
  }
@@ -4656,7 +4654,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4656
4654
  }
4657
4655
  }
4658
4656
  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
4659
- animation: jkl-dot-in-udvg9vf 150ms ease;
4657
+ animation: jkl-dot-in-uy8zidg 150ms ease;
4660
4658
  }
4661
4659
  .jkl-radio-panel:has(:checked) {
4662
4660
  --radio-dot-color: var(--jkl-color-border-action);
@@ -4958,7 +4956,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4958
4956
  margin-bottom: 0;
4959
4957
  }
4960
4958
  .jkl-system-message--dismissed {
4961
- animation: jkl-dismiss-udvg9wa 400ms forwards;
4959
+ animation: jkl-dismiss-uy8zie2 400ms forwards;
4962
4960
  transition: block 400ms 400ms;
4963
4961
  }
4964
4962
  .jkl-system-message--info {
@@ -4989,7 +4987,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4989
4987
  }
4990
4988
  }
4991
4989
 
4992
- @keyframes jkl-dismiss-udvg9wa {
4990
+ @keyframes jkl-dismiss-uy8zie2 {
4993
4991
  from {
4994
4992
  opacity: 1;
4995
4993
  transform: translateY(0);
@@ -5883,14 +5881,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
5883
5881
 
5884
5882
  .jkl-toast[data-animation=entering],
5885
5883
  .jkl-toast[data-animation=queued] {
5886
- animation: jkl-entering-udvg9we 200ms ease-out forwards;
5884
+ animation: jkl-entering-uy8zieb 200ms ease-out forwards;
5887
5885
  }
5888
5886
 
5889
5887
  .jkl-toast[data-animation=exiting] {
5890
- animation: jkl-exiting-udvg9x0 150ms ease-in forwards;
5888
+ animation: jkl-exiting-uy8zief 150ms ease-in forwards;
5891
5889
  }
5892
5890
 
5893
- @keyframes jkl-entering-udvg9we {
5891
+ @keyframes jkl-entering-uy8zieb {
5894
5892
  from {
5895
5893
  opacity: 0;
5896
5894
  transform: translate3d(0, 50%, 0);
@@ -5900,7 +5898,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
5900
5898
  transform: translate3d(0, 0, 0);
5901
5899
  }
5902
5900
  }
5903
- @keyframes jkl-exiting-udvg9x0 {
5901
+ @keyframes jkl-exiting-uy8zief {
5904
5902
  from {
5905
5903
  opacity: 1;
5906
5904
  transform: translate3d(0, 0, 0);