@fremtind/jokul 3.7.0 → 3.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.
- 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/cjs/components-beta/select/Select.cjs +1 -1
- package/build/cjs/components-beta/select/Select.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/build/es/components-beta/select/Select.js +1 -1
- package/build/es/components-beta/select/Select.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 +7 -7
- 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 +9 -15
- 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/input-panel/input-panel.css +1 -1
- package/styles/components/input-panel/input-panel.min.css +1 -1
- package/styles/components/input-panel/input-panel.scss +3 -2
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +3 -9
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.scss +1 -11
- 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 +3 -3
- 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/core/core.css +1 -1
- package/styles/core/core.min.css +1 -1
- package/styles/core/resets/_reset.scss +1 -1
- package/styles/styles.css +35 -44
- package/styles/styles.min.css +2 -2
- package/build/cjs/components/autosuggest/stories/countryList.cjs +0 -2
- package/build/cjs/components/autosuggest/stories/countryList.cjs.map +0 -1
- package/build/cjs/components/autosuggest/stories/countryList.d.cts +0 -4
- package/build/cjs/components/table/stories/data.cjs +0 -2
- package/build/cjs/components/table/stories/data.cjs.map +0 -1
- package/build/cjs/components/table/stories/data.d.cts +0 -8
- package/build/es/components/autosuggest/stories/countryList.d.ts +0 -4
- package/build/es/components/autosuggest/stories/countryList.js +0 -2
- package/build/es/components/autosuggest/stories/countryList.js.map +0 -1
- package/build/es/components/table/stories/data.d.ts +0 -8
- package/build/es/components/table/stories/data.js +0 -2
- package/build/es/components/table/stories/data.js.map +0 -1
package/styles/styles.css
CHANGED
|
@@ -541,7 +541,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
|
|
|
541
541
|
--color: var(--jkl-color-text-default);
|
|
542
542
|
}
|
|
543
543
|
.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 {
|
|
544
|
-
animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-
|
|
544
|
+
animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uybq957 forwards;
|
|
545
545
|
}
|
|
546
546
|
.jkl-form-support-label--sr-only {
|
|
547
547
|
border: 0 !important;
|
|
@@ -629,7 +629,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
|
|
|
629
629
|
text-wrap: pretty;
|
|
630
630
|
}
|
|
631
631
|
|
|
632
|
-
@keyframes jkl-support-icon-entrance-
|
|
632
|
+
@keyframes jkl-support-icon-entrance-uybq957 {
|
|
633
633
|
0% {
|
|
634
634
|
margin-right: 0;
|
|
635
635
|
opacity: 0;
|
|
@@ -1029,15 +1029,15 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1029
1029
|
animation: 2500ms linear infinite;
|
|
1030
1030
|
}
|
|
1031
1031
|
.jkl-loader__dot--left {
|
|
1032
|
-
animation-name: jkl-loader-left-spin-
|
|
1032
|
+
animation-name: jkl-loader-left-spin-uybq95o;
|
|
1033
1033
|
margin-right: 1.71em;
|
|
1034
1034
|
}
|
|
1035
1035
|
.jkl-loader__dot--middle {
|
|
1036
|
-
animation-name: jkl-loader-middle-spin-
|
|
1036
|
+
animation-name: jkl-loader-middle-spin-uybq966;
|
|
1037
1037
|
margin-right: 1.9em;
|
|
1038
1038
|
}
|
|
1039
1039
|
.jkl-loader__dot--right {
|
|
1040
|
-
animation-name: jkl-loader-right-spin-
|
|
1040
|
+
animation-name: jkl-loader-right-spin-uybq96p;
|
|
1041
1041
|
}
|
|
1042
1042
|
@media screen and (forced-colors: active) {
|
|
1043
1043
|
.jkl-loader__dot {
|
|
@@ -1064,7 +1064,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1064
1064
|
.jkl-loader--small > .jkl-loader__dot--middle {
|
|
1065
1065
|
margin-right: 0.3em;
|
|
1066
1066
|
}
|
|
1067
|
-
@keyframes jkl-loader-left-spin-
|
|
1067
|
+
@keyframes jkl-loader-left-spin-uybq95o {
|
|
1068
1068
|
0% {
|
|
1069
1069
|
transform: rotate(0) scale(0);
|
|
1070
1070
|
}
|
|
@@ -1078,7 +1078,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1078
1078
|
transform: rotate(180deg) scale(0);
|
|
1079
1079
|
}
|
|
1080
1080
|
}
|
|
1081
|
-
@keyframes jkl-loader-middle-spin-
|
|
1081
|
+
@keyframes jkl-loader-middle-spin-uybq966 {
|
|
1082
1082
|
0% {
|
|
1083
1083
|
transform: rotate(20deg) scale(0);
|
|
1084
1084
|
}
|
|
@@ -1095,7 +1095,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1095
1095
|
transform: rotate(200deg) scale(0);
|
|
1096
1096
|
}
|
|
1097
1097
|
}
|
|
1098
|
-
@keyframes jkl-loader-right-spin-
|
|
1098
|
+
@keyframes jkl-loader-right-spin-uybq96p {
|
|
1099
1099
|
0% {
|
|
1100
1100
|
transform: rotate(40deg) scale(0);
|
|
1101
1101
|
}
|
|
@@ -1143,7 +1143,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1143
1143
|
@media screen and (forced-colors: active) {
|
|
1144
1144
|
.jkl-skeleton-element {
|
|
1145
1145
|
border: 1px solid CanvasText;
|
|
1146
|
-
animation: 2s ease infinite jkl-blink-
|
|
1146
|
+
animation: 2s ease infinite jkl-blink-uybq97h;
|
|
1147
1147
|
}
|
|
1148
1148
|
}
|
|
1149
1149
|
.jkl-skeleton-input {
|
|
@@ -1189,18 +1189,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1189
1189
|
padding: 0.75rem 0.25rem;
|
|
1190
1190
|
}
|
|
1191
1191
|
}
|
|
1192
|
-
.jkl-skeleton-table--compact::after__header {
|
|
1193
|
-
padding: 0.5rem 0.25rem;
|
|
1194
|
-
}
|
|
1195
|
-
.jkl-skeleton-table--compact::after__row {
|
|
1196
|
-
padding: 0.75rem 0.25rem;
|
|
1197
|
-
}
|
|
1198
1192
|
@media screen and (forced-colors: active) {
|
|
1199
1193
|
.jkl-skeleton-table {
|
|
1200
|
-
animation: 2s ease-in-out infinite jkl-blink-
|
|
1194
|
+
animation: 2s ease-in-out infinite jkl-blink-uybq97h;
|
|
1201
1195
|
}
|
|
1202
1196
|
}
|
|
1203
|
-
@keyframes jkl-blink-
|
|
1197
|
+
@keyframes jkl-blink-uybq97h {
|
|
1204
1198
|
0% {
|
|
1205
1199
|
opacity: 1;
|
|
1206
1200
|
}
|
|
@@ -1420,7 +1414,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1420
1414
|
--jkl-checkbox-box-size: 1.125rem;
|
|
1421
1415
|
--jkl-checkbox-line-height: 1.5rem;
|
|
1422
1416
|
}
|
|
1423
|
-
@keyframes jkl-checkbox-checked-
|
|
1417
|
+
@keyframes jkl-checkbox-checked-uybq97j {
|
|
1424
1418
|
0% {
|
|
1425
1419
|
width: 0;
|
|
1426
1420
|
height: 0;
|
|
@@ -1434,7 +1428,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1434
1428
|
height: 58%;
|
|
1435
1429
|
}
|
|
1436
1430
|
}
|
|
1437
|
-
@keyframes jkl-checkbox-indeterminate-
|
|
1431
|
+
@keyframes jkl-checkbox-indeterminate-uybq986 {
|
|
1438
1432
|
0% {
|
|
1439
1433
|
width: 0;
|
|
1440
1434
|
}
|
|
@@ -1463,11 +1457,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1463
1457
|
left: calc(-0.5 * var(--jkl-checkbox-box-size));
|
|
1464
1458
|
}
|
|
1465
1459
|
.jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
|
|
1466
|
-
animation: jkl-checkbox-checked-
|
|
1460
|
+
animation: jkl-checkbox-checked-uybq97j 150ms ease-in-out forwards;
|
|
1467
1461
|
opacity: 1;
|
|
1468
1462
|
}
|
|
1469
1463
|
.jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
|
|
1470
|
-
animation: jkl-checkbox-indeterminate-
|
|
1464
|
+
animation: jkl-checkbox-indeterminate-uybq986 150ms ease-in-out forwards;
|
|
1471
1465
|
opacity: 1;
|
|
1472
1466
|
}
|
|
1473
1467
|
.jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
|
|
@@ -1578,7 +1572,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1578
1572
|
--check-color: var(--jkl-color-text-on-alert);
|
|
1579
1573
|
}
|
|
1580
1574
|
}
|
|
1581
|
-
@layer components {
|
|
1575
|
+
@layer jokul.components {
|
|
1582
1576
|
.jkl-input-panel {
|
|
1583
1577
|
--outer-border-color: var(--jkl-color-border-input);
|
|
1584
1578
|
--outer-border-thickness: 0.0625rem;
|
|
@@ -1653,7 +1647,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1653
1647
|
cursor: pointer;
|
|
1654
1648
|
}
|
|
1655
1649
|
}
|
|
1656
|
-
@keyframes jkl-checkbox-checked-
|
|
1650
|
+
@keyframes jkl-checkbox-checked-uybq98n {
|
|
1657
1651
|
0% {
|
|
1658
1652
|
width: 0;
|
|
1659
1653
|
height: 0;
|
|
@@ -1717,7 +1711,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
|
|
|
1717
1711
|
}
|
|
1718
1712
|
}
|
|
1719
1713
|
.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
|
|
1720
|
-
animation: jkl-checkbox-checked-
|
|
1714
|
+
animation: jkl-checkbox-checked-uybq98n 150ms ease-in-out forwards;
|
|
1721
1715
|
opacity: 1;
|
|
1722
1716
|
}
|
|
1723
1717
|
.jkl-checkbox-panel:has([aria-invalid=true]) {
|
|
@@ -2325,10 +2319,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
2325
2319
|
}
|
|
2326
2320
|
}
|
|
2327
2321
|
.jkl-countdown__tracker {
|
|
2328
|
-
animation: jkl-downcount-
|
|
2322
|
+
animation: jkl-downcount-uybq99l var(--duration) linear forwards;
|
|
2329
2323
|
animation-play-state: var(--play-state, running);
|
|
2330
2324
|
}
|
|
2331
|
-
@keyframes jkl-downcount-
|
|
2325
|
+
@keyframes jkl-downcount-uybq99l {
|
|
2332
2326
|
from {
|
|
2333
2327
|
width: 100%;
|
|
2334
2328
|
}
|
|
@@ -2886,7 +2880,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
2886
2880
|
}
|
|
2887
2881
|
}
|
|
2888
2882
|
|
|
2889
|
-
@keyframes jkl-show-
|
|
2883
|
+
@keyframes jkl-show-uybq99t {
|
|
2890
2884
|
from {
|
|
2891
2885
|
transform: translate3d(0, 0.5rem, 0);
|
|
2892
2886
|
opacity: 0;
|
|
@@ -2921,7 +2915,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
|
|
|
2921
2915
|
}
|
|
2922
2916
|
}
|
|
2923
2917
|
.jkl-feedback__fade-in {
|
|
2924
|
-
animation: jkl-show-
|
|
2918
|
+
animation: jkl-show-uybq99t 0.25s ease-out;
|
|
2925
2919
|
}
|
|
2926
2920
|
.jkl-feedback__buttons {
|
|
2927
2921
|
display: flex;
|
|
@@ -3163,7 +3157,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3163
3157
|
--background-color: var(--jkl-color-background-alert-success);
|
|
3164
3158
|
}
|
|
3165
3159
|
.jkl-message--dismissed {
|
|
3166
|
-
animation: jkl-dismiss-
|
|
3160
|
+
animation: jkl-dismiss-uybq9a8 400ms ease-in-out forwards;
|
|
3167
3161
|
transition: visibility 0ms 400ms;
|
|
3168
3162
|
visibility: hidden;
|
|
3169
3163
|
}
|
|
@@ -3183,7 +3177,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3183
3177
|
}
|
|
3184
3178
|
}
|
|
3185
3179
|
|
|
3186
|
-
@keyframes jkl-dismiss-
|
|
3180
|
+
@keyframes jkl-dismiss-uybq9a8 {
|
|
3187
3181
|
from {
|
|
3188
3182
|
opacity: 1;
|
|
3189
3183
|
transform: translate3d(0, 0, 0);
|
|
@@ -3240,7 +3234,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3240
3234
|
--jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
|
|
3241
3235
|
}
|
|
3242
3236
|
|
|
3243
|
-
@keyframes jkl-dot-in-
|
|
3237
|
+
@keyframes jkl-dot-in-uybq9af {
|
|
3244
3238
|
0% {
|
|
3245
3239
|
transform: scale(0.8);
|
|
3246
3240
|
}
|
|
@@ -3286,7 +3280,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
|
|
|
3286
3280
|
}
|
|
3287
3281
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
3288
3282
|
--dot-color: var(--jkl-color-border-action);
|
|
3289
|
-
animation: jkl-dot-in-
|
|
3283
|
+
animation: jkl-dot-in-uybq9af 150ms ease;
|
|
3290
3284
|
}
|
|
3291
3285
|
@media screen and (forced-colors: active) {
|
|
3292
3286
|
.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
|
|
@@ -4261,9 +4255,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrap
|
|
|
4261
4255
|
.jkl-select select {
|
|
4262
4256
|
appearance: none;
|
|
4263
4257
|
}
|
|
4264
|
-
.jkl-select select::ms-expand {
|
|
4265
|
-
display: none;
|
|
4266
|
-
}
|
|
4267
4258
|
.jkl-select select:-moz-focusring {
|
|
4268
4259
|
color: transparent;
|
|
4269
4260
|
text-shadow: 0 0 0 var(--jkl-color-text-subdued);
|
|
@@ -4499,7 +4490,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4499
4490
|
transition-timing-function: ease;
|
|
4500
4491
|
transition-duration: 150ms;
|
|
4501
4492
|
}
|
|
4502
|
-
@keyframes jkl-downcount-
|
|
4493
|
+
@keyframes jkl-downcount-uybq9ap {
|
|
4503
4494
|
from {
|
|
4504
4495
|
width: 100%;
|
|
4505
4496
|
}
|
|
@@ -4509,7 +4500,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4509
4500
|
}
|
|
4510
4501
|
}
|
|
4511
4502
|
@layer jokul.components {
|
|
4512
|
-
@keyframes jkl-dot-in-
|
|
4503
|
+
@keyframes jkl-dot-in-uybq9av {
|
|
4513
4504
|
0% {
|
|
4514
4505
|
transform: scale(0.8);
|
|
4515
4506
|
}
|
|
@@ -4557,7 +4548,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
|
|
|
4557
4548
|
}
|
|
4558
4549
|
}
|
|
4559
4550
|
.jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
|
|
4560
|
-
animation: jkl-dot-in-
|
|
4551
|
+
animation: jkl-dot-in-uybq9av 150ms ease;
|
|
4561
4552
|
}
|
|
4562
4553
|
.jkl-radio-panel:has(:checked) {
|
|
4563
4554
|
--radio-dot-color: var(--jkl-color-border-action);
|
|
@@ -5126,7 +5117,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
|
|
|
5126
5117
|
margin-bottom: 0;
|
|
5127
5118
|
}
|
|
5128
5119
|
.jkl-system-message--dismissed {
|
|
5129
|
-
animation: jkl-dismiss-
|
|
5120
|
+
animation: jkl-dismiss-uybq9bj 400ms forwards;
|
|
5130
5121
|
transition: block 400ms 400ms;
|
|
5131
5122
|
}
|
|
5132
5123
|
.jkl-system-message--info {
|
|
@@ -5157,7 +5148,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
|
|
|
5157
5148
|
}
|
|
5158
5149
|
}
|
|
5159
5150
|
|
|
5160
|
-
@keyframes jkl-dismiss-
|
|
5151
|
+
@keyframes jkl-dismiss-uybq9bj {
|
|
5161
5152
|
from {
|
|
5162
5153
|
opacity: 1;
|
|
5163
5154
|
transform: translateY(0);
|
|
@@ -6116,14 +6107,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
6116
6107
|
|
|
6117
6108
|
.jkl-toast[data-animation=entering],
|
|
6118
6109
|
.jkl-toast[data-animation=queued] {
|
|
6119
|
-
animation: jkl-entering-
|
|
6110
|
+
animation: jkl-entering-uybq9c0 200ms ease-out forwards;
|
|
6120
6111
|
}
|
|
6121
6112
|
|
|
6122
6113
|
.jkl-toast[data-animation=exiting] {
|
|
6123
|
-
animation: jkl-exiting-
|
|
6114
|
+
animation: jkl-exiting-uybq9cj 150ms ease-in forwards;
|
|
6124
6115
|
}
|
|
6125
6116
|
|
|
6126
|
-
@keyframes jkl-entering-
|
|
6117
|
+
@keyframes jkl-entering-uybq9c0 {
|
|
6127
6118
|
from {
|
|
6128
6119
|
opacity: 0;
|
|
6129
6120
|
transform: translate3d(0, 50%, 0);
|
|
@@ -6133,7 +6124,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
|
|
|
6133
6124
|
transform: translate3d(0, 0, 0);
|
|
6134
6125
|
}
|
|
6135
6126
|
}
|
|
6136
|
-
@keyframes jkl-exiting-
|
|
6127
|
+
@keyframes jkl-exiting-uybq9cj {
|
|
6137
6128
|
from {
|
|
6138
6129
|
opacity: 1;
|
|
6139
6130
|
transform: translate3d(0, 0, 0);
|