@fremtind/jokul 1.7.1 → 1.7.2

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 (36) 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 +6 -6
  5. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  6. package/styles/components/countdown/countdown.css +2 -2
  7. package/styles/components/countdown/countdown.min.css +1 -1
  8. package/styles/components/feedback/feedback.css +2 -2
  9. package/styles/components/feedback/feedback.min.css +1 -1
  10. package/styles/components/file-input/file-input.css +11 -11
  11. package/styles/components/file-input/file-input.min.css +1 -1
  12. package/styles/components/input-group/input-group.css +2 -2
  13. package/styles/components/input-group/input-group.min.css +1 -1
  14. package/styles/components/loader/loader.css +6 -6
  15. package/styles/components/loader/loader.min.css +1 -1
  16. package/styles/components/loader/skeleton-loader.css +5 -5
  17. package/styles/components/loader/skeleton-loader.min.css +1 -1
  18. package/styles/components/message/message.css +2 -2
  19. package/styles/components/message/message.min.css +1 -1
  20. package/styles/components/progress-bar/progress-bar.css +1 -1
  21. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  22. package/styles/components/radio-button/radio-button.css +2 -2
  23. package/styles/components/radio-button/radio-button.min.css +1 -1
  24. package/styles/components/radio-panel/radio-panel.css +2 -2
  25. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  26. package/styles/components/segmented-control/segmented-control.css +4 -4
  27. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  28. package/styles/components/system-message/system-message.css +2 -2
  29. package/styles/components/system-message/system-message.min.css +1 -1
  30. package/styles/components/toast/toast.css +4 -4
  31. package/styles/components/toast/toast.min.css +1 -1
  32. package/styles/core/core.css +7 -0
  33. package/styles/core/core.min.css +1 -1
  34. package/styles/core/global/_base-class.scss +8 -0
  35. package/styles/styles.css +36 -36
  36. package/styles/styles.min.css +1 -1
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-uf2xeca forwards;
600
+ animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u27tyea 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-uf2xeca {
688
+ @keyframes jkl-support-icon-entrance-u27tyea {
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-uf2xecn;
1088
+ animation-name: jkl-loader-left-spin-u27tyeg;
1089
1089
  margin-right: 1.71em;
1090
1090
  }
1091
1091
  .jkl-loader__dot--middle {
1092
- animation-name: jkl-loader-middle-spin-uf2xedj;
1092
+ animation-name: jkl-loader-middle-spin-u27tyff;
1093
1093
  margin-right: 1.9em;
1094
1094
  }
1095
1095
  .jkl-loader__dot--right {
1096
- animation-name: jkl-loader-right-spin-uf2xedo;
1096
+ animation-name: jkl-loader-right-spin-u27tyg2;
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-uf2xecn {
1123
+ @keyframes jkl-loader-left-spin-u27tyeg {
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-uf2xedj {
1137
+ @keyframes jkl-loader-middle-spin-u27tyff {
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-uf2xedo {
1154
+ @keyframes jkl-loader-right-spin-u27tyg2 {
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-uf2xedv;
1202
+ animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u27tygy;
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-uf2xee8;
1232
+ animation: 2s ease infinite jkl-blink-u27tygz;
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-uf2xee8;
1286
+ animation: 2s ease-in-out infinite jkl-blink-u27tygz;
1287
1287
  }
1288
1288
  }
1289
- @keyframes jkl-sweep-uf2xedv {
1289
+ @keyframes jkl-sweep-u27tygy {
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-uf2xee8 {
1297
+ @keyframes jkl-blink-u27tygz {
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-uf2xeey {
1517
+ @keyframes jkl-checkbox-checked-u27tyh9 {
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-uf2xeft {
1531
+ @keyframes jkl-checkbox-indeterminate-u27tyi8 {
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-uf2xeey 150ms ease-in-out forwards;
1560
+ animation: jkl-checkbox-checked-u27tyh9 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-uf2xeft 150ms ease-in-out forwards;
1564
+ animation: jkl-checkbox-indeterminate-u27tyi8 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-uf2xeg2 {
1735
+ @keyframes jkl-checkbox-checked-u27tyif {
1736
1736
  0% {
1737
1737
  width: 0;
1738
1738
  height: 0;
@@ -1796,7 +1796,7 @@ 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-uf2xeg2 150ms ease-in-out forwards;
1799
+ animation: jkl-checkbox-checked-u27tyif 150ms ease-in-out forwards;
1800
1800
  opacity: 1;
1801
1801
  }
1802
1802
  .jkl-checkbox-panel:has([aria-invalid=true]) {
@@ -2491,10 +2491,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
2491
2491
  }
2492
2492
  }
2493
2493
  .jkl-countdown__tracker {
2494
- animation: jkl-downcount-uf2xegk var(--duration) linear forwards;
2494
+ animation: jkl-downcount-u27tyii var(--duration) linear forwards;
2495
2495
  animation-play-state: var(--play-state, running);
2496
2496
  }
2497
- @keyframes jkl-downcount-uf2xegk {
2497
+ @keyframes jkl-downcount-u27tyii {
2498
2498
  from {
2499
2499
  width: 100%;
2500
2500
  }
@@ -3170,7 +3170,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3170
3170
  }
3171
3171
  }
3172
3172
 
3173
- @keyframes jkl-show-uf2xeh1 {
3173
+ @keyframes jkl-show-u27tyja {
3174
3174
  from {
3175
3175
  transform: translate3d(0, 0.5rem, 0);
3176
3176
  opacity: 0;
@@ -3205,7 +3205,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3205
3205
  }
3206
3206
  }
3207
3207
  .jkl-feedback__fade-in {
3208
- animation: jkl-show-uf2xeh1 0.25s ease-out;
3208
+ animation: jkl-show-u27tyja 0.25s ease-out;
3209
3209
  }
3210
3210
  .jkl-feedback__buttons {
3211
3211
  display: flex;
@@ -3447,7 +3447,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3447
3447
  --background-color: var(--jkl-color-background-alert-success);
3448
3448
  }
3449
3449
  .jkl-message--dismissed {
3450
- animation: jkl-dismiss-uf2xehe 400ms ease-in-out forwards;
3450
+ animation: jkl-dismiss-u27tyk9 400ms ease-in-out forwards;
3451
3451
  transition: visibility 0ms 400ms;
3452
3452
  visibility: hidden;
3453
3453
  }
@@ -3467,7 +3467,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3467
3467
  }
3468
3468
  }
3469
3469
 
3470
- @keyframes jkl-dismiss-uf2xehe {
3470
+ @keyframes jkl-dismiss-u27tyk9 {
3471
3471
  from {
3472
3472
  opacity: 1;
3473
3473
  transform: translate3d(0, 0, 0);
@@ -3524,7 +3524,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3524
3524
  --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
3525
3525
  }
3526
3526
 
3527
- @keyframes jkl-dot-in-uf2xehj {
3527
+ @keyframes jkl-dot-in-u27tyl7 {
3528
3528
  0% {
3529
3529
  transform: scale(0.8);
3530
3530
  }
@@ -3570,7 +3570,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3570
3570
  }
3571
3571
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
3572
3572
  --dot-color: var(--jkl-color-border-action);
3573
- animation: jkl-dot-in-uf2xehj 150ms ease;
3573
+ animation: jkl-dot-in-u27tyl7 150ms ease;
3574
3574
  }
3575
3575
  @media screen and (forced-colors: active) {
3576
3576
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -4722,7 +4722,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4722
4722
  transition-timing-function: ease;
4723
4723
  transition-duration: 150ms;
4724
4724
  }
4725
- @keyframes jkl-downcount-uf2xei3 {
4725
+ @keyframes jkl-downcount-u27tym3 {
4726
4726
  from {
4727
4727
  width: 100%;
4728
4728
  }
@@ -4732,7 +4732,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4732
4732
  }
4733
4733
  }
4734
4734
  @layer jokul.components {
4735
- @keyframes jkl-dot-in-uf2xeic {
4735
+ @keyframes jkl-dot-in-u27tymh {
4736
4736
  0% {
4737
4737
  transform: scale(0.8);
4738
4738
  }
@@ -4780,7 +4780,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4780
4780
  }
4781
4781
  }
4782
4782
  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
4783
- animation: jkl-dot-in-uf2xeic 150ms ease;
4783
+ animation: jkl-dot-in-u27tymh 150ms ease;
4784
4784
  }
4785
4785
  .jkl-radio-panel:has(:checked) {
4786
4786
  --radio-dot-color: var(--jkl-color-border-action);
@@ -5082,7 +5082,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5082
5082
  margin-bottom: 0;
5083
5083
  }
5084
5084
  .jkl-system-message--dismissed {
5085
- animation: jkl-dismiss-uf2xejb 400ms forwards;
5085
+ animation: jkl-dismiss-u27tynd 400ms forwards;
5086
5086
  transition: block 400ms 400ms;
5087
5087
  }
5088
5088
  .jkl-system-message--info {
@@ -5113,7 +5113,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5113
5113
  }
5114
5114
  }
5115
5115
 
5116
- @keyframes jkl-dismiss-uf2xejb {
5116
+ @keyframes jkl-dismiss-u27tynd {
5117
5117
  from {
5118
5118
  opacity: 1;
5119
5119
  transform: translateY(0);
@@ -6007,14 +6007,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6007
6007
 
6008
6008
  .jkl-toast[data-animation=entering],
6009
6009
  .jkl-toast[data-animation=queued] {
6010
- animation: jkl-entering-uf2xejo 200ms ease-out forwards;
6010
+ animation: jkl-entering-u27tyno 200ms ease-out forwards;
6011
6011
  }
6012
6012
 
6013
6013
  .jkl-toast[data-animation=exiting] {
6014
- animation: jkl-exiting-uf2xekc 150ms ease-in forwards;
6014
+ animation: jkl-exiting-u27tyol 150ms ease-in forwards;
6015
6015
  }
6016
6016
 
6017
- @keyframes jkl-entering-uf2xejo {
6017
+ @keyframes jkl-entering-u27tyno {
6018
6018
  from {
6019
6019
  opacity: 0;
6020
6020
  transform: translate3d(0, 50%, 0);
@@ -6024,7 +6024,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6024
6024
  transform: translate3d(0, 0, 0);
6025
6025
  }
6026
6026
  }
6027
- @keyframes jkl-exiting-uf2xekc {
6027
+ @keyframes jkl-exiting-u27tyol {
6028
6028
  from {
6029
6029
  opacity: 1;
6030
6030
  transform: translate3d(0, 0, 0);