@fremtind/jokul 0.58.0 → 0.58.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 (39) hide show
  1. package/build/build-stats.html +1 -1
  2. package/build/cjs/components/chip/Chip.cjs +1 -1
  3. package/build/cjs/components/chip/Chip.cjs.map +1 -1
  4. package/build/cjs/components/chip/types.d.cts +2 -2
  5. package/build/es/components/chip/Chip.js +1 -1
  6. package/build/es/components/chip/Chip.js.map +1 -1
  7. package/build/es/components/chip/types.d.ts +2 -2
  8. package/build/style.css +1 -1
  9. package/package.json +2 -2
  10. package/styles/components/button/button.css +3 -3
  11. package/styles/components/button/button.min.css +1 -1
  12. package/styles/components/checkbox/checkbox.css +4 -4
  13. package/styles/components/checkbox/checkbox.min.css +1 -1
  14. package/styles/components/checkbox-panel/checkbox-panel.css +2 -2
  15. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  16. package/styles/components/countdown/countdown.css +2 -2
  17. package/styles/components/countdown/countdown.min.css +1 -1
  18. package/styles/components/feedback/feedback.css +2 -2
  19. package/styles/components/feedback/feedback.min.css +1 -1
  20. package/styles/components/input-group/input-group.css +2 -2
  21. package/styles/components/input-group/input-group.min.css +1 -1
  22. package/styles/components/loader/loader.css +6 -6
  23. package/styles/components/loader/loader.min.css +1 -1
  24. package/styles/components/loader/skeleton-loader.css +5 -5
  25. package/styles/components/loader/skeleton-loader.min.css +1 -1
  26. package/styles/components/message/message.css +2 -2
  27. package/styles/components/message/message.min.css +1 -1
  28. package/styles/components/progress-bar/progress-bar.css +1 -1
  29. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  30. package/styles/components/radio-button/radio-button.css +2 -2
  31. package/styles/components/radio-button/radio-button.min.css +1 -1
  32. package/styles/components/radio-panel/radio-panel.css +2 -2
  33. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  34. package/styles/components/system-message/system-message.css +2 -2
  35. package/styles/components/system-message/system-message.min.css +1 -1
  36. package/styles/components/toast/toast.css +4 -4
  37. package/styles/components/toast/toast.min.css +1 -1
  38. package/styles/styles.css +39 -39
  39. package/styles/styles.min.css +1 -1
package/styles/styles.css CHANGED
@@ -786,7 +786,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
786
786
  --color: var(--jkl-color-text-default);
787
787
  }
788
788
  .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 {
789
- animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u1zvs8a forwards;
789
+ animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-ubr97xh forwards;
790
790
  }
791
791
  .jkl-form-support-label--sr-only {
792
792
  border: 0 !important;
@@ -861,7 +861,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
861
861
  white-space: nowrap !important; /* 3 */
862
862
  }
863
863
 
864
- @keyframes jkl-support-icon-entrance-u1zvs8a {
864
+ @keyframes jkl-support-icon-entrance-ubr97xh {
865
865
  0% {
866
866
  margin-right: 0;
867
867
  opacity: 0;
@@ -1120,12 +1120,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1120
1120
  initial-value: 0;
1121
1121
  inherits: false;
1122
1122
  }
1123
- @keyframes button-fade-u1zvs8h {
1123
+ @keyframes button-fade-ubr97yn {
1124
1124
  from {
1125
1125
  --jkl-button-flash-opacity: 0.5;
1126
1126
  }
1127
1127
  }
1128
- @keyframes button-grow-u1zvs8e {
1128
+ @keyframes button-grow-ubr97y4 {
1129
1129
  to {
1130
1130
  --jkl-button-flash-radius: 150%;
1131
1131
  }
@@ -1211,7 +1211,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1211
1211
  --hover-opacity: 0.15;
1212
1212
  }
1213
1213
  .jkl-button.jkl-button--pressed {
1214
- animation-name: button-fade-u1zvs8h, button-grow-u1zvs8e;
1214
+ animation-name: button-fade-ubr97yn, button-grow-ubr97y4;
1215
1215
  }
1216
1216
  .jkl-button--primary, .jkl-button--secondary, .jkl-button--ghost {
1217
1217
  --border-radius: 999px;
@@ -1249,15 +1249,15 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1249
1249
  animation: 2500ms linear infinite;
1250
1250
  }
1251
1251
  .jkl-loader__dot--left {
1252
- animation-name: jkl-loader-left-spin-u1zvs8u;
1252
+ animation-name: jkl-loader-left-spin-ubr97z6;
1253
1253
  margin-right: 1.71em;
1254
1254
  }
1255
1255
  .jkl-loader__dot--middle {
1256
- animation-name: jkl-loader-middle-spin-u1zvs9e;
1256
+ animation-name: jkl-loader-middle-spin-ubr97zh;
1257
1257
  margin-right: 1.9em;
1258
1258
  }
1259
1259
  .jkl-loader__dot--right {
1260
- animation-name: jkl-loader-right-spin-u1zvsaa;
1260
+ animation-name: jkl-loader-right-spin-ubr97zo;
1261
1261
  }
1262
1262
  @media screen and (forced-colors: active) {
1263
1263
  .jkl-loader__dot {
@@ -1285,7 +1285,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1285
1285
  margin-right: 0.3em;
1286
1286
  }
1287
1287
 
1288
- @keyframes jkl-loader-left-spin-u1zvs8u {
1288
+ @keyframes jkl-loader-left-spin-ubr97z6 {
1289
1289
  0% {
1290
1290
  transform: rotate(0) scale(0);
1291
1291
  }
@@ -1299,7 +1299,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1299
1299
  transform: rotate(180deg) scale(0);
1300
1300
  }
1301
1301
  }
1302
- @keyframes jkl-loader-middle-spin-u1zvs9e {
1302
+ @keyframes jkl-loader-middle-spin-ubr97zh {
1303
1303
  0% {
1304
1304
  transform: rotate(20deg) scale(0);
1305
1305
  }
@@ -1316,7 +1316,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1316
1316
  transform: rotate(200deg) scale(0);
1317
1317
  }
1318
1318
  }
1319
- @keyframes jkl-loader-right-spin-u1zvsaa {
1319
+ @keyframes jkl-loader-right-spin-ubr97zo {
1320
1320
  0% {
1321
1321
  transform: rotate(40deg) scale(0);
1322
1322
  }
@@ -1364,7 +1364,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1364
1364
  bottom: 0;
1365
1365
  width: 12.5rem;
1366
1366
  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%);
1367
- animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u1zvsaw;
1367
+ animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-ubr9800;
1368
1368
  }
1369
1369
  @media (width >= 0) and (max-width: 679px) {
1370
1370
  .jkl-skeleton-animation {
@@ -1395,7 +1395,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1395
1395
  @media screen and (forced-colors: active) {
1396
1396
  .jkl-skeleton-element {
1397
1397
  border: 1px solid CanvasText;
1398
- animation: 2s ease infinite jkl-blink-u1zvsbw;
1398
+ animation: 2s ease infinite jkl-blink-ubr980j;
1399
1399
  }
1400
1400
  }
1401
1401
 
@@ -1451,11 +1451,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1451
1451
  }
1452
1452
  @media screen and (forced-colors: active) {
1453
1453
  .jkl-skeleton-table {
1454
- animation: 2s ease-in-out infinite jkl-blink-u1zvsbw;
1454
+ animation: 2s ease-in-out infinite jkl-blink-ubr980j;
1455
1455
  }
1456
1456
  }
1457
1457
 
1458
- @keyframes jkl-sweep-u1zvsaw {
1458
+ @keyframes jkl-sweep-ubr9800 {
1459
1459
  0% {
1460
1460
  transform: translateX(calc(0vw - 200px));
1461
1461
  }
@@ -1463,7 +1463,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1463
1463
  transform: translateX(calc(100vw + 400px));
1464
1464
  }
1465
1465
  }
1466
- @keyframes jkl-blink-u1zvsbw {
1466
+ @keyframes jkl-blink-ubr980j {
1467
1467
  0% {
1468
1468
  opacity: 1;
1469
1469
  }
@@ -1927,7 +1927,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
1927
1927
  --jkl-checkbox-line-height: 1.5rem;
1928
1928
  }
1929
1929
 
1930
- @keyframes jkl-checkbox-checked-u1zvscr {
1930
+ @keyframes jkl-checkbox-checked-ubr980x {
1931
1931
  0% {
1932
1932
  width: 0;
1933
1933
  height: 0;
@@ -1941,7 +1941,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
1941
1941
  height: 58%;
1942
1942
  }
1943
1943
  }
1944
- @keyframes jkl-checkbox-indeterminate-u1zvsde {
1944
+ @keyframes jkl-checkbox-indeterminate-ubr981l {
1945
1945
  0% {
1946
1946
  width: 0;
1947
1947
  }
@@ -1970,11 +1970,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
1970
1970
  left: calc(-0.5 * var(--jkl-checkbox-box-size));
1971
1971
  }
1972
1972
  .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
1973
- animation: jkl-checkbox-checked-u1zvscr 150ms ease-in-out forwards;
1973
+ animation: jkl-checkbox-checked-ubr980x 150ms ease-in-out forwards;
1974
1974
  opacity: 1;
1975
1975
  }
1976
1976
  .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
1977
- animation: jkl-checkbox-indeterminate-u1zvsde 150ms ease-in-out forwards;
1977
+ animation: jkl-checkbox-indeterminate-ubr981l 150ms ease-in-out forwards;
1978
1978
  opacity: 1;
1979
1979
  }
1980
1980
  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
@@ -2145,7 +2145,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2145
2145
  --outer-border-thickness: 0.125rem;
2146
2146
  }
2147
2147
 
2148
- @keyframes jkl-checkbox-checked-u1zvsdy {
2148
+ @keyframes jkl-checkbox-checked-ubr9826 {
2149
2149
  0% {
2150
2150
  width: 0;
2151
2151
  height: 0;
@@ -2208,7 +2208,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2208
2208
  }
2209
2209
  }
2210
2210
  .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
2211
- animation: jkl-checkbox-checked-u1zvsdy 150ms ease-in-out forwards;
2211
+ animation: jkl-checkbox-checked-ubr9826 150ms ease-in-out forwards;
2212
2212
  opacity: 1;
2213
2213
  }
2214
2214
  .jkl-checkbox-panel:has([aria-invalid=true]) {
@@ -2904,11 +2904,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
2904
2904
  }
2905
2905
  }
2906
2906
  .jkl-countdown__tracker {
2907
- animation: jkl-downcount-u1zvse8 var(--duration) linear forwards;
2907
+ animation: jkl-downcount-ubr982v var(--duration) linear forwards;
2908
2908
  animation-play-state: var(--play-state, running);
2909
2909
  }
2910
2910
 
2911
- @keyframes jkl-downcount-u1zvse8 {
2911
+ @keyframes jkl-downcount-ubr982v {
2912
2912
  from {
2913
2913
  width: 100%;
2914
2914
  }
@@ -3584,7 +3584,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3584
3584
  padding: 1rem 0 2.5rem 0;
3585
3585
  }
3586
3586
 
3587
- @keyframes jkl-show-u1zvsex {
3587
+ @keyframes jkl-show-ubr983h {
3588
3588
  from {
3589
3589
  transform: translate3d(0, 0.5rem, 0);
3590
3590
  opacity: 0;
@@ -3619,7 +3619,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3619
3619
  }
3620
3620
  }
3621
3621
  .jkl-feedback__fade-in {
3622
- animation: jkl-show-u1zvsex 0.25s ease-out;
3622
+ animation: jkl-show-ubr983h 0.25s ease-out;
3623
3623
  }
3624
3624
  .jkl-feedback__buttons {
3625
3625
  display: flex;
@@ -3861,7 +3861,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3861
3861
  --background-color: var(--jkl-color-background-alert-success);
3862
3862
  }
3863
3863
  .jkl-message--dismissed {
3864
- animation: jkl-dismiss-u1zvsf4 400ms ease-in-out forwards;
3864
+ animation: jkl-dismiss-ubr983v 400ms ease-in-out forwards;
3865
3865
  transition: visibility 0ms 400ms;
3866
3866
  visibility: hidden;
3867
3867
  }
@@ -3881,7 +3881,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3881
3881
  }
3882
3882
  }
3883
3883
 
3884
- @keyframes jkl-dismiss-u1zvsf4 {
3884
+ @keyframes jkl-dismiss-ubr983v {
3885
3885
  from {
3886
3886
  opacity: 1;
3887
3887
  transform: translate3d(0, 0, 0);
@@ -3937,7 +3937,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3937
3937
  --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
3938
3938
  }
3939
3939
 
3940
- @keyframes jkl-dot-in-u1zvsfi {
3940
+ @keyframes jkl-dot-in-ubr9844 {
3941
3941
  0% {
3942
3942
  transform: scale(0.8);
3943
3943
  }
@@ -3983,7 +3983,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3983
3983
  }
3984
3984
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
3985
3985
  --dot-color: var(--jkl-color-border-action);
3986
- animation: jkl-dot-in-u1zvsfi 150ms ease;
3986
+ animation: jkl-dot-in-ubr9844 150ms ease;
3987
3987
  }
3988
3988
  @media screen and (forced-colors: active) {
3989
3989
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -5080,7 +5080,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5080
5080
  transition-duration: 150ms;
5081
5081
  }
5082
5082
 
5083
- @keyframes jkl-downcount-u1zvsg5 {
5083
+ @keyframes jkl-downcount-ubr9847 {
5084
5084
  from {
5085
5085
  width: 100%;
5086
5086
  }
@@ -5088,7 +5088,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5088
5088
  width: 0%;
5089
5089
  }
5090
5090
  }
5091
- @keyframes jkl-dot-in-u1zvsgg {
5091
+ @keyframes jkl-dot-in-ubr984e {
5092
5092
  0% {
5093
5093
  transform: scale(0.8);
5094
5094
  }
@@ -5136,7 +5136,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5136
5136
  }
5137
5137
  }
5138
5138
  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
5139
- animation: jkl-dot-in-u1zvsgg 150ms ease;
5139
+ animation: jkl-dot-in-ubr984e 150ms ease;
5140
5140
  }
5141
5141
  .jkl-radio-panel:has(:checked) {
5142
5142
  --radio-dot-color: var(--jkl-color-border-action);
@@ -5348,7 +5348,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5348
5348
  margin-bottom: 0;
5349
5349
  }
5350
5350
  .jkl-system-message--dismissed {
5351
- animation: jkl-dismiss-u1zvsh4 400ms ease-in forwards;
5351
+ animation: jkl-dismiss-ubr984s 400ms ease-in forwards;
5352
5352
  transition: visibility 0ms 400ms;
5353
5353
  visibility: hidden;
5354
5354
  }
@@ -5380,7 +5380,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5380
5380
  }
5381
5381
  }
5382
5382
 
5383
- @keyframes jkl-dismiss-u1zvsh4 {
5383
+ @keyframes jkl-dismiss-ubr984s {
5384
5384
  from {
5385
5385
  opacity: 1;
5386
5386
  transform: translate3d(0, 0, 0);
@@ -6250,14 +6250,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6250
6250
 
6251
6251
  .jkl-toast[data-animation=entering],
6252
6252
  .jkl-toast[data-animation=queued] {
6253
- animation: jkl-entering-u1zvshk 200ms ease-out forwards;
6253
+ animation: jkl-entering-ubr985f 200ms ease-out forwards;
6254
6254
  }
6255
6255
 
6256
6256
  .jkl-toast[data-animation=exiting] {
6257
- animation: jkl-exiting-u1zvshn 150ms ease-in forwards;
6257
+ animation: jkl-exiting-ubr985z 150ms ease-in forwards;
6258
6258
  }
6259
6259
 
6260
- @keyframes jkl-entering-u1zvshk {
6260
+ @keyframes jkl-entering-ubr985f {
6261
6261
  from {
6262
6262
  opacity: 0;
6263
6263
  transform: translate3d(0, 50%, 0);
@@ -6267,7 +6267,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6267
6267
  transform: translate3d(0, 0, 0);
6268
6268
  }
6269
6269
  }
6270
- @keyframes jkl-exiting-u1zvshn {
6270
+ @keyframes jkl-exiting-ubr985z {
6271
6271
  from {
6272
6272
  opacity: 1;
6273
6273
  transform: translate3d(0, 0, 0);