@fremtind/jokul 2.1.4 → 2.1.6
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.
- package/build/build-stats.html +1 -1
- package/build/cjs/components/cookie-consent/CookieConsent.cjs +1 -1
- package/build/cjs/components/cookie-consent/CookieConsent.cjs.map +1 -1
- package/build/es/components/cookie-consent/CookieConsent.js +1 -1
- package/build/es/components/cookie-consent/CookieConsent.js.map +1 -1
- package/package.json +1 -1
- package/styles/components/checkbox/checkbox.css +4 -4
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox-panel/checkbox-panel.css +6 -6
- package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file-input/file-input.css +11 -17
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +5 -11
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.scss +0 -10
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/radio-button/radio-button.css +2 -2
- package/styles/components/radio-button/radio-button.min.css +1 -1
- package/styles/components/radio-panel/radio-panel.css +2 -2
- package/styles/components/radio-panel/radio-panel.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.css +4 -4
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/select/select.css +0 -3
- package/styles/components/select/select.min.css +1 -1
- package/styles/components/select/select.scss +0 -4
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/styles.css +36 -45
- 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-
|
|
600
|
+
animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-usivtjs 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-
|
|
688
|
+
@keyframes jkl-support-icon-entrance-usivtjs {
|
|
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-
|
|
1088
|
+
animation-name: jkl-loader-left-spin-usivtks;
|
|
1089
1089
|
margin-right: 1.71em;
|
|
1090
1090
|
}
|
|
1091
1091
|
.jkl-loader__dot--middle {
|
|
1092
|
-
animation-name: jkl-loader-middle-spin-
|
|
1092
|
+
animation-name: jkl-loader-middle-spin-usivtlo;
|
|
1093
1093
|
margin-right: 1.9em;
|
|
1094
1094
|
}
|
|
1095
1095
|
.jkl-loader__dot--right {
|
|
1096
|
-
animation-name: jkl-loader-right-spin-
|
|
1096
|
+
animation-name: jkl-loader-right-spin-usivtlp;
|
|
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-
|
|
1123
|
+
@keyframes jkl-loader-left-spin-usivtks {
|
|
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-
|
|
1137
|
+
@keyframes jkl-loader-middle-spin-usivtlo {
|
|
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-
|
|
1154
|
+
@keyframes jkl-loader-right-spin-usivtlp {
|
|
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-
|
|
1202
|
+
animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-usivtlu;
|
|
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-
|
|
1232
|
+
animation: 2s ease infinite jkl-blink-usivtm1;
|
|
1233
1233
|
}
|
|
1234
1234
|
}
|
|
1235
1235
|
.jkl-skeleton-input {
|
|
@@ -1275,18 +1275,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1275
1275
|
padding: 0.75rem 0.25rem;
|
|
1276
1276
|
}
|
|
1277
1277
|
}
|
|
1278
|
-
.jkl-skeleton-table--compact::after__header {
|
|
1279
|
-
padding: 0.5rem 0.25rem;
|
|
1280
|
-
}
|
|
1281
|
-
.jkl-skeleton-table--compact::after__row {
|
|
1282
|
-
padding: 0.75rem 0.25rem;
|
|
1283
|
-
}
|
|
1284
1278
|
@media screen and (forced-colors: active) {
|
|
1285
1279
|
.jkl-skeleton-table {
|
|
1286
|
-
animation: 2s ease-in-out infinite jkl-blink-
|
|
1280
|
+
animation: 2s ease-in-out infinite jkl-blink-usivtm1;
|
|
1287
1281
|
}
|
|
1288
1282
|
}
|
|
1289
|
-
@keyframes jkl-sweep-
|
|
1283
|
+
@keyframes jkl-sweep-usivtlu {
|
|
1290
1284
|
0% {
|
|
1291
1285
|
transform: translateX(calc(0vw - 200px));
|
|
1292
1286
|
}
|
|
@@ -1294,7 +1288,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1294
1288
|
transform: translateX(calc(100vw + 400px));
|
|
1295
1289
|
}
|
|
1296
1290
|
}
|
|
1297
|
-
@keyframes jkl-blink-
|
|
1291
|
+
@keyframes jkl-blink-usivtm1 {
|
|
1298
1292
|
0% {
|
|
1299
1293
|
opacity: 1;
|
|
1300
1294
|
}
|
|
@@ -1514,7 +1508,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1514
1508
|
--jkl-checkbox-box-size: 1.125rem;
|
|
1515
1509
|
--jkl-checkbox-line-height: 1.5rem;
|
|
1516
1510
|
}
|
|
1517
|
-
@keyframes jkl-checkbox-checked-
|
|
1511
|
+
@keyframes jkl-checkbox-checked-usivtmu {
|
|
1518
1512
|
0% {
|
|
1519
1513
|
width: 0;
|
|
1520
1514
|
height: 0;
|
|
@@ -1528,7 +1522,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1528
1522
|
height: 58%;
|
|
1529
1523
|
}
|
|
1530
1524
|
}
|
|
1531
|
-
@keyframes jkl-checkbox-indeterminate-
|
|
1525
|
+
@keyframes jkl-checkbox-indeterminate-usivtnr {
|
|
1532
1526
|
0% {
|
|
1533
1527
|
width: 0;
|
|
1534
1528
|
}
|
|
@@ -1557,11 +1551,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1557
1551
|
left: calc(-0.5 * var(--jkl-checkbox-box-size));
|
|
1558
1552
|
}
|
|
1559
1553
|
.jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
|
|
1560
|
-
animation: jkl-checkbox-checked-
|
|
1554
|
+
animation: jkl-checkbox-checked-usivtmu 150ms ease-in-out forwards;
|
|
1561
1555
|
opacity: 1;
|
|
1562
1556
|
}
|
|
1563
1557
|
.jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
|
|
1564
|
-
animation: jkl-checkbox-indeterminate-
|
|
1558
|
+
animation: jkl-checkbox-indeterminate-usivtnr 150ms ease-in-out forwards;
|
|
1565
1559
|
opacity: 1;
|
|
1566
1560
|
}
|
|
1567
1561
|
.jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
|
|
@@ -1732,7 +1726,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1732
1726
|
--outer-border-thickness: 0.125rem;
|
|
1733
1727
|
}
|
|
1734
1728
|
|
|
1735
|
-
@keyframes jkl-checkbox-checked-
|
|
1729
|
+
@keyframes jkl-checkbox-checked-usivtoi {
|
|
1736
1730
|
0% {
|
|
1737
1731
|
width: 0;
|
|
1738
1732
|
height: 0;
|
|
@@ -1796,7 +1790,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1796
1790
|
}
|
|
1797
1791
|
}
|
|
1798
1792
|
.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
|
|
1799
|
-
animation: jkl-checkbox-checked-
|
|
1793
|
+
animation: jkl-checkbox-checked-usivtoi 150ms ease-in-out forwards;
|
|
1800
1794
|
opacity: 1;
|
|
1801
1795
|
}
|
|
1802
1796
|
.jkl-checkbox-panel:has([aria-invalid=true]) {
|
|
@@ -2493,10 +2487,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
2493
2487
|
}
|
|
2494
2488
|
}
|
|
2495
2489
|
.jkl-countdown__tracker {
|
|
2496
|
-
animation: jkl-downcount-
|
|
2490
|
+
animation: jkl-downcount-usivtox var(--duration) linear forwards;
|
|
2497
2491
|
animation-play-state: var(--play-state, running);
|
|
2498
2492
|
}
|
|
2499
|
-
@keyframes jkl-downcount-
|
|
2493
|
+
@keyframes jkl-downcount-usivtox {
|
|
2500
2494
|
from {
|
|
2501
2495
|
width: 100%;
|
|
2502
2496
|
}
|
|
@@ -3172,7 +3166,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
3172
3166
|
}
|
|
3173
3167
|
}
|
|
3174
3168
|
|
|
3175
|
-
@keyframes jkl-show-
|
|
3169
|
+
@keyframes jkl-show-usivtpr {
|
|
3176
3170
|
from {
|
|
3177
3171
|
transform: translate3d(0, 0.5rem, 0);
|
|
3178
3172
|
opacity: 0;
|
|
@@ -3207,7 +3201,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
3207
3201
|
}
|
|
3208
3202
|
}
|
|
3209
3203
|
.jkl-feedback__fade-in {
|
|
3210
|
-
animation: jkl-show-
|
|
3204
|
+
animation: jkl-show-usivtpr 0.25s ease-out;
|
|
3211
3205
|
}
|
|
3212
3206
|
.jkl-feedback__buttons {
|
|
3213
3207
|
display: flex;
|
|
@@ -3449,7 +3443,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3449
3443
|
--background-color: var(--jkl-color-background-alert-success);
|
|
3450
3444
|
}
|
|
3451
3445
|
.jkl-message--dismissed {
|
|
3452
|
-
animation: jkl-dismiss-
|
|
3446
|
+
animation: jkl-dismiss-usivtpz 400ms ease-in-out forwards;
|
|
3453
3447
|
transition: visibility 0ms 400ms;
|
|
3454
3448
|
visibility: hidden;
|
|
3455
3449
|
}
|
|
@@ -3469,7 +3463,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3469
3463
|
}
|
|
3470
3464
|
}
|
|
3471
3465
|
|
|
3472
|
-
@keyframes jkl-dismiss-
|
|
3466
|
+
@keyframes jkl-dismiss-usivtpz {
|
|
3473
3467
|
from {
|
|
3474
3468
|
opacity: 1;
|
|
3475
3469
|
transform: translate3d(0, 0, 0);
|
|
@@ -3526,7 +3520,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3526
3520
|
--jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
|
|
3527
3521
|
}
|
|
3528
3522
|
|
|
3529
|
-
@keyframes jkl-dot-in-
|
|
3523
|
+
@keyframes jkl-dot-in-usivtqc {
|
|
3530
3524
|
0% {
|
|
3531
3525
|
transform: scale(0.8);
|
|
3532
3526
|
}
|
|
@@ -3572,7 +3566,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3572
3566
|
}
|
|
3573
3567
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
3574
3568
|
--dot-color: var(--jkl-color-border-action);
|
|
3575
|
-
animation: jkl-dot-in-
|
|
3569
|
+
animation: jkl-dot-in-usivtqc 150ms ease;
|
|
3576
3570
|
}
|
|
3577
3571
|
@media screen and (forced-colors: active) {
|
|
3578
3572
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
@@ -4491,9 +4485,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrap
|
|
|
4491
4485
|
.jkl-select select {
|
|
4492
4486
|
appearance: none;
|
|
4493
4487
|
}
|
|
4494
|
-
.jkl-select select::ms-expand {
|
|
4495
|
-
display: none;
|
|
4496
|
-
}
|
|
4497
4488
|
.jkl-select select:-moz-focusring {
|
|
4498
4489
|
color: transparent;
|
|
4499
4490
|
text-shadow: 0 0 0 var(--jkl-color-text-subdued);
|
|
@@ -4724,7 +4715,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4724
4715
|
transition-timing-function: ease;
|
|
4725
4716
|
transition-duration: 150ms;
|
|
4726
4717
|
}
|
|
4727
|
-
@keyframes jkl-downcount-
|
|
4718
|
+
@keyframes jkl-downcount-usivtqr {
|
|
4728
4719
|
from {
|
|
4729
4720
|
width: 100%;
|
|
4730
4721
|
}
|
|
@@ -4734,7 +4725,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4734
4725
|
}
|
|
4735
4726
|
}
|
|
4736
4727
|
@layer jokul.components {
|
|
4737
|
-
@keyframes jkl-dot-in-
|
|
4728
|
+
@keyframes jkl-dot-in-usivtrc {
|
|
4738
4729
|
0% {
|
|
4739
4730
|
transform: scale(0.8);
|
|
4740
4731
|
}
|
|
@@ -4782,7 +4773,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4782
4773
|
}
|
|
4783
4774
|
}
|
|
4784
4775
|
.jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
|
|
4785
|
-
animation: jkl-dot-in-
|
|
4776
|
+
animation: jkl-dot-in-usivtrc 150ms ease;
|
|
4786
4777
|
}
|
|
4787
4778
|
.jkl-radio-panel:has(:checked) {
|
|
4788
4779
|
--radio-dot-color: var(--jkl-color-border-action);
|
|
@@ -5084,7 +5075,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
5084
5075
|
margin-bottom: 0;
|
|
5085
5076
|
}
|
|
5086
5077
|
.jkl-system-message--dismissed {
|
|
5087
|
-
animation: jkl-dismiss-
|
|
5078
|
+
animation: jkl-dismiss-usivtrt 400ms forwards;
|
|
5088
5079
|
transition: block 400ms 400ms;
|
|
5089
5080
|
}
|
|
5090
5081
|
.jkl-system-message--info {
|
|
@@ -5115,7 +5106,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
5115
5106
|
}
|
|
5116
5107
|
}
|
|
5117
5108
|
|
|
5118
|
-
@keyframes jkl-dismiss-
|
|
5109
|
+
@keyframes jkl-dismiss-usivtrt {
|
|
5119
5110
|
from {
|
|
5120
5111
|
opacity: 1;
|
|
5121
5112
|
transform: translateY(0);
|
|
@@ -6009,14 +6000,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
6009
6000
|
|
|
6010
6001
|
.jkl-toast[data-animation=entering],
|
|
6011
6002
|
.jkl-toast[data-animation=queued] {
|
|
6012
|
-
animation: jkl-entering-
|
|
6003
|
+
animation: jkl-entering-usivtsa 200ms ease-out forwards;
|
|
6013
6004
|
}
|
|
6014
6005
|
|
|
6015
6006
|
.jkl-toast[data-animation=exiting] {
|
|
6016
|
-
animation: jkl-exiting-
|
|
6007
|
+
animation: jkl-exiting-usivtsl 150ms ease-in forwards;
|
|
6017
6008
|
}
|
|
6018
6009
|
|
|
6019
|
-
@keyframes jkl-entering-
|
|
6010
|
+
@keyframes jkl-entering-usivtsa {
|
|
6020
6011
|
from {
|
|
6021
6012
|
opacity: 0;
|
|
6022
6013
|
transform: translate3d(0, 50%, 0);
|
|
@@ -6026,7 +6017,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
6026
6017
|
transform: translate3d(0, 0, 0);
|
|
6027
6018
|
}
|
|
6028
6019
|
}
|
|
6029
|
-
@keyframes jkl-exiting-
|
|
6020
|
+
@keyframes jkl-exiting-usivtsl {
|
|
6030
6021
|
from {
|
|
6031
6022
|
opacity: 1;
|
|
6032
6023
|
transform: translate3d(0, 0, 0);
|