@fremtind/jokul 2.1.1 → 2.1.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 +2 -2
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-utiplae forwards;
600
+ animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u6qljmj 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-utiplae {
688
+ @keyframes jkl-support-icon-entrance-u6qljmj {
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-utiplbe;
1088
+ animation-name: jkl-loader-left-spin-u6qljmk;
1089
1089
  margin-right: 1.71em;
1090
1090
  }
1091
1091
  .jkl-loader__dot--middle {
1092
- animation-name: jkl-loader-middle-spin-utiplc0;
1092
+ animation-name: jkl-loader-middle-spin-u6qljmu;
1093
1093
  margin-right: 1.9em;
1094
1094
  }
1095
1095
  .jkl-loader__dot--right {
1096
- animation-name: jkl-loader-right-spin-utiplcf;
1096
+ animation-name: jkl-loader-right-spin-u6qljnp;
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-utiplbe {
1123
+ @keyframes jkl-loader-left-spin-u6qljmk {
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-utiplc0 {
1137
+ @keyframes jkl-loader-middle-spin-u6qljmu {
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-utiplcf {
1154
+ @keyframes jkl-loader-right-spin-u6qljnp {
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-utiplcr;
1202
+ animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u6qljnv;
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-utipld9;
1232
+ animation: 2s ease infinite jkl-blink-u6qljo7;
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-utipld9;
1286
+ animation: 2s ease-in-out infinite jkl-blink-u6qljo7;
1287
1287
  }
1288
1288
  }
1289
- @keyframes jkl-sweep-utiplcr {
1289
+ @keyframes jkl-sweep-u6qljnv {
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-utipld9 {
1297
+ @keyframes jkl-blink-u6qljo7 {
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-utipldl {
1517
+ @keyframes jkl-checkbox-checked-u6qljon {
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-utiplei {
1531
+ @keyframes jkl-checkbox-indeterminate-u6qljpd {
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-utipldl 150ms ease-in-out forwards;
1560
+ animation: jkl-checkbox-checked-u6qljon 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-utiplei 150ms ease-in-out forwards;
1564
+ animation: jkl-checkbox-indeterminate-u6qljpd 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-utiplek {
1735
+ @keyframes jkl-checkbox-checked-u6qljpy {
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-utiplek 150ms ease-in-out forwards;
1799
+ animation: jkl-checkbox-checked-u6qljpy 150ms ease-in-out forwards;
1800
1800
  opacity: 1;
1801
1801
  }
1802
1802
  .jkl-checkbox-panel:has([aria-invalid=true]) {
@@ -2493,10 +2493,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
2493
2493
  }
2494
2494
  }
2495
2495
  .jkl-countdown__tracker {
2496
- animation: jkl-downcount-utiplf7 var(--duration) linear forwards;
2496
+ animation: jkl-downcount-u6qljqp var(--duration) linear forwards;
2497
2497
  animation-play-state: var(--play-state, running);
2498
2498
  }
2499
- @keyframes jkl-downcount-utiplf7 {
2499
+ @keyframes jkl-downcount-u6qljqp {
2500
2500
  from {
2501
2501
  width: 100%;
2502
2502
  }
@@ -3172,7 +3172,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3172
3172
  }
3173
3173
  }
3174
3174
 
3175
- @keyframes jkl-show-utiplg3 {
3175
+ @keyframes jkl-show-u6qljr5 {
3176
3176
  from {
3177
3177
  transform: translate3d(0, 0.5rem, 0);
3178
3178
  opacity: 0;
@@ -3207,7 +3207,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3207
3207
  }
3208
3208
  }
3209
3209
  .jkl-feedback__fade-in {
3210
- animation: jkl-show-utiplg3 0.25s ease-out;
3210
+ animation: jkl-show-u6qljr5 0.25s ease-out;
3211
3211
  }
3212
3212
  .jkl-feedback__buttons {
3213
3213
  display: flex;
@@ -3449,7 +3449,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3449
3449
  --background-color: var(--jkl-color-background-alert-success);
3450
3450
  }
3451
3451
  .jkl-message--dismissed {
3452
- animation: jkl-dismiss-utiplh2 400ms ease-in-out forwards;
3452
+ animation: jkl-dismiss-u6qljr7 400ms ease-in-out forwards;
3453
3453
  transition: visibility 0ms 400ms;
3454
3454
  visibility: hidden;
3455
3455
  }
@@ -3469,7 +3469,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3469
3469
  }
3470
3470
  }
3471
3471
 
3472
- @keyframes jkl-dismiss-utiplh2 {
3472
+ @keyframes jkl-dismiss-u6qljr7 {
3473
3473
  from {
3474
3474
  opacity: 1;
3475
3475
  transform: translate3d(0, 0, 0);
@@ -3526,7 +3526,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3526
3526
  --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
3527
3527
  }
3528
3528
 
3529
- @keyframes jkl-dot-in-utiplhs {
3529
+ @keyframes jkl-dot-in-u6qljrl {
3530
3530
  0% {
3531
3531
  transform: scale(0.8);
3532
3532
  }
@@ -3572,7 +3572,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3572
3572
  }
3573
3573
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
3574
3574
  --dot-color: var(--jkl-color-border-action);
3575
- animation: jkl-dot-in-utiplhs 150ms ease;
3575
+ animation: jkl-dot-in-u6qljrl 150ms ease;
3576
3576
  }
3577
3577
  @media screen and (forced-colors: active) {
3578
3578
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -4724,7 +4724,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4724
4724
  transition-timing-function: ease;
4725
4725
  transition-duration: 150ms;
4726
4726
  }
4727
- @keyframes jkl-downcount-utipli4 {
4727
+ @keyframes jkl-downcount-u6qljrn {
4728
4728
  from {
4729
4729
  width: 100%;
4730
4730
  }
@@ -4734,7 +4734,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4734
4734
  }
4735
4735
  }
4736
4736
  @layer jokul.components {
4737
- @keyframes jkl-dot-in-utiplio {
4737
+ @keyframes jkl-dot-in-u6qljrp {
4738
4738
  0% {
4739
4739
  transform: scale(0.8);
4740
4740
  }
@@ -4782,7 +4782,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4782
4782
  }
4783
4783
  }
4784
4784
  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
4785
- animation: jkl-dot-in-utiplio 150ms ease;
4785
+ animation: jkl-dot-in-u6qljrp 150ms ease;
4786
4786
  }
4787
4787
  .jkl-radio-panel:has(:checked) {
4788
4788
  --radio-dot-color: var(--jkl-color-border-action);
@@ -5084,7 +5084,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5084
5084
  margin-bottom: 0;
5085
5085
  }
5086
5086
  .jkl-system-message--dismissed {
5087
- animation: jkl-dismiss-utipliy 400ms forwards;
5087
+ animation: jkl-dismiss-u6qljsp 400ms forwards;
5088
5088
  transition: block 400ms 400ms;
5089
5089
  }
5090
5090
  .jkl-system-message--info {
@@ -5115,7 +5115,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5115
5115
  }
5116
5116
  }
5117
5117
 
5118
- @keyframes jkl-dismiss-utipliy {
5118
+ @keyframes jkl-dismiss-u6qljsp {
5119
5119
  from {
5120
5120
  opacity: 1;
5121
5121
  transform: translateY(0);
@@ -6009,14 +6009,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6009
6009
 
6010
6010
  .jkl-toast[data-animation=entering],
6011
6011
  .jkl-toast[data-animation=queued] {
6012
- animation: jkl-entering-utipljk 200ms ease-out forwards;
6012
+ animation: jkl-entering-u6qljt8 200ms ease-out forwards;
6013
6013
  }
6014
6014
 
6015
6015
  .jkl-toast[data-animation=exiting] {
6016
- animation: jkl-exiting-utiplkk 150ms ease-in forwards;
6016
+ animation: jkl-exiting-u6qljtl 150ms ease-in forwards;
6017
6017
  }
6018
6018
 
6019
- @keyframes jkl-entering-utipljk {
6019
+ @keyframes jkl-entering-u6qljt8 {
6020
6020
  from {
6021
6021
  opacity: 0;
6022
6022
  transform: translate3d(0, 50%, 0);
@@ -6026,7 +6026,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6026
6026
  transform: translate3d(0, 0, 0);
6027
6027
  }
6028
6028
  }
6029
- @keyframes jkl-exiting-utiplkk {
6029
+ @keyframes jkl-exiting-u6qljtl {
6030
6030
  from {
6031
6031
  opacity: 1;
6032
6032
  transform: translate3d(0, 0, 0);