@fremtind/jokul 1.2.3 → 1.3.0

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 (52) hide show
  1. package/build/build-stats.html +1 -1
  2. package/build/cjs/components/expander/ExpandablePanel.cjs +1 -1
  3. package/build/cjs/components/expander/ExpandablePanel.cjs.map +1 -1
  4. package/build/cjs/components/expander/ExpandablePanelContent.cjs +1 -1
  5. package/build/cjs/components/expander/ExpandablePanelContent.cjs.map +1 -1
  6. package/build/cjs/components/expander/Expander.cjs +1 -1
  7. package/build/cjs/components/expander/Expander.cjs.map +1 -1
  8. package/build/cjs/components/expander/types.d.cts +6 -1
  9. package/build/cjs/components/image/Image.cjs +1 -1
  10. package/build/cjs/components/image/Image.cjs.map +1 -1
  11. package/build/es/components/expander/ExpandablePanel.js +1 -1
  12. package/build/es/components/expander/ExpandablePanel.js.map +1 -1
  13. package/build/es/components/expander/ExpandablePanelContent.js +1 -1
  14. package/build/es/components/expander/ExpandablePanelContent.js.map +1 -1
  15. package/build/es/components/expander/Expander.js +1 -1
  16. package/build/es/components/expander/Expander.js.map +1 -1
  17. package/build/es/components/expander/types.d.ts +6 -1
  18. package/build/es/components/image/Image.js +1 -1
  19. package/build/es/components/image/Image.js.map +1 -1
  20. package/package.json +1 -1
  21. package/styles/components/checkbox/checkbox.css +4 -4
  22. package/styles/components/checkbox/checkbox.min.css +1 -1
  23. package/styles/components/checkbox-panel/checkbox-panel.css +2 -2
  24. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  25. package/styles/components/countdown/countdown.css +2 -2
  26. package/styles/components/countdown/countdown.min.css +1 -1
  27. package/styles/components/feedback/feedback.css +2 -2
  28. package/styles/components/feedback/feedback.min.css +1 -1
  29. package/styles/components/file-input/file-input.css +11 -11
  30. package/styles/components/file-input/file-input.min.css +1 -1
  31. package/styles/components/input-group/input-group.css +2 -2
  32. package/styles/components/input-group/input-group.min.css +1 -1
  33. package/styles/components/loader/loader.css +6 -6
  34. package/styles/components/loader/loader.min.css +1 -1
  35. package/styles/components/loader/skeleton-loader.css +5 -5
  36. package/styles/components/loader/skeleton-loader.min.css +1 -1
  37. package/styles/components/message/message.css +2 -2
  38. package/styles/components/message/message.min.css +1 -1
  39. package/styles/components/progress-bar/progress-bar.css +1 -1
  40. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  41. package/styles/components/radio-button/radio-button.css +2 -2
  42. package/styles/components/radio-button/radio-button.min.css +1 -1
  43. package/styles/components/radio-panel/radio-panel.css +2 -2
  44. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  45. package/styles/components/segmented-control/segmented-control.css +4 -4
  46. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  47. package/styles/components/system-message/system-message.css +2 -2
  48. package/styles/components/system-message/system-message.min.css +1 -1
  49. package/styles/components/toast/toast.css +4 -4
  50. package/styles/components/toast/toast.min.css +1 -1
  51. package/styles/styles.css +36 -36
  52. package/styles/styles.min.css +1 -1
package/styles/styles.css CHANGED
@@ -599,7 +599,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
599
599
  --color: var(--jkl-color-text-default);
600
600
  }
601
601
  .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 {
602
- animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u6s4z11 forwards;
602
+ animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u3atmpx forwards;
603
603
  }
604
604
  .jkl-form-support-label--sr-only {
605
605
  border: 0 !important;
@@ -674,7 +674,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
674
674
  white-space: nowrap !important; /* 3 */
675
675
  }
676
676
 
677
- @keyframes jkl-support-icon-entrance-u6s4z11 {
677
+ @keyframes jkl-support-icon-entrance-u3atmpx {
678
678
  0% {
679
679
  margin-right: 0;
680
680
  opacity: 0;
@@ -1070,15 +1070,15 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1070
1070
  animation: 2500ms linear infinite;
1071
1071
  }
1072
1072
  .jkl-loader__dot--left {
1073
- animation-name: jkl-loader-left-spin-u6s4z1y;
1073
+ animation-name: jkl-loader-left-spin-u3atmqf;
1074
1074
  margin-right: 1.71em;
1075
1075
  }
1076
1076
  .jkl-loader__dot--middle {
1077
- animation-name: jkl-loader-middle-spin-u6s4z28;
1077
+ animation-name: jkl-loader-middle-spin-u3atmr6;
1078
1078
  margin-right: 1.9em;
1079
1079
  }
1080
1080
  .jkl-loader__dot--right {
1081
- animation-name: jkl-loader-right-spin-u6s4z2y;
1081
+ animation-name: jkl-loader-right-spin-u3atms3;
1082
1082
  }
1083
1083
  @media screen and (forced-colors: active) {
1084
1084
  .jkl-loader__dot {
@@ -1106,7 +1106,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1106
1106
  margin-right: 0.3em;
1107
1107
  }
1108
1108
 
1109
- @keyframes jkl-loader-left-spin-u6s4z1y {
1109
+ @keyframes jkl-loader-left-spin-u3atmqf {
1110
1110
  0% {
1111
1111
  transform: rotate(0) scale(0);
1112
1112
  }
@@ -1120,7 +1120,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1120
1120
  transform: rotate(180deg) scale(0);
1121
1121
  }
1122
1122
  }
1123
- @keyframes jkl-loader-middle-spin-u6s4z28 {
1123
+ @keyframes jkl-loader-middle-spin-u3atmr6 {
1124
1124
  0% {
1125
1125
  transform: rotate(20deg) scale(0);
1126
1126
  }
@@ -1137,7 +1137,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1137
1137
  transform: rotate(200deg) scale(0);
1138
1138
  }
1139
1139
  }
1140
- @keyframes jkl-loader-right-spin-u6s4z2y {
1140
+ @keyframes jkl-loader-right-spin-u3atms3 {
1141
1141
  0% {
1142
1142
  transform: rotate(40deg) scale(0);
1143
1143
  }
@@ -1185,7 +1185,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1185
1185
  bottom: 0;
1186
1186
  width: 12.5rem;
1187
1187
  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%);
1188
- animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u6s4z38;
1188
+ animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u3atmsj;
1189
1189
  }
1190
1190
  @media (width >= 0) and (max-width: 679px) {
1191
1191
  .jkl-skeleton-animation {
@@ -1216,7 +1216,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1216
1216
  @media screen and (forced-colors: active) {
1217
1217
  .jkl-skeleton-element {
1218
1218
  border: 1px solid CanvasText;
1219
- animation: 2s ease infinite jkl-blink-u6s4z3x;
1219
+ animation: 2s ease infinite jkl-blink-u3atmti;
1220
1220
  }
1221
1221
  }
1222
1222
 
@@ -1272,11 +1272,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1272
1272
  }
1273
1273
  @media screen and (forced-colors: active) {
1274
1274
  .jkl-skeleton-table {
1275
- animation: 2s ease-in-out infinite jkl-blink-u6s4z3x;
1275
+ animation: 2s ease-in-out infinite jkl-blink-u3atmti;
1276
1276
  }
1277
1277
  }
1278
1278
 
1279
- @keyframes jkl-sweep-u6s4z38 {
1279
+ @keyframes jkl-sweep-u3atmsj {
1280
1280
  0% {
1281
1281
  transform: translateX(calc(0vw - 200px));
1282
1282
  }
@@ -1284,7 +1284,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1284
1284
  transform: translateX(calc(100vw + 400px));
1285
1285
  }
1286
1286
  }
1287
- @keyframes jkl-blink-u6s4z3x {
1287
+ @keyframes jkl-blink-u3atmti {
1288
1288
  0% {
1289
1289
  opacity: 1;
1290
1290
  }
@@ -1501,7 +1501,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1501
1501
  --jkl-checkbox-line-height: 1.5rem;
1502
1502
  }
1503
1503
 
1504
- @keyframes jkl-checkbox-checked-u6s4z4s {
1504
+ @keyframes jkl-checkbox-checked-u3atmu1 {
1505
1505
  0% {
1506
1506
  width: 0;
1507
1507
  height: 0;
@@ -1515,7 +1515,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1515
1515
  height: 58%;
1516
1516
  }
1517
1517
  }
1518
- @keyframes jkl-checkbox-indeterminate-u6s4z57 {
1518
+ @keyframes jkl-checkbox-indeterminate-u3atmuq {
1519
1519
  0% {
1520
1520
  width: 0;
1521
1521
  }
@@ -1544,11 +1544,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1544
1544
  left: calc(-0.5 * var(--jkl-checkbox-box-size));
1545
1545
  }
1546
1546
  .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
1547
- animation: jkl-checkbox-checked-u6s4z4s 150ms ease-in-out forwards;
1547
+ animation: jkl-checkbox-checked-u3atmu1 150ms ease-in-out forwards;
1548
1548
  opacity: 1;
1549
1549
  }
1550
1550
  .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
1551
- animation: jkl-checkbox-indeterminate-u6s4z57 150ms ease-in-out forwards;
1551
+ animation: jkl-checkbox-indeterminate-u3atmuq 150ms ease-in-out forwards;
1552
1552
  opacity: 1;
1553
1553
  }
1554
1554
  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
@@ -1719,7 +1719,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1719
1719
  --outer-border-thickness: 0.125rem;
1720
1720
  }
1721
1721
 
1722
- @keyframes jkl-checkbox-checked-u6s4z60 {
1722
+ @keyframes jkl-checkbox-checked-u3atmv1 {
1723
1723
  0% {
1724
1724
  width: 0;
1725
1725
  height: 0;
@@ -1782,7 +1782,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1782
1782
  }
1783
1783
  }
1784
1784
  .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
1785
- animation: jkl-checkbox-checked-u6s4z60 150ms ease-in-out forwards;
1785
+ animation: jkl-checkbox-checked-u3atmv1 150ms ease-in-out forwards;
1786
1786
  opacity: 1;
1787
1787
  }
1788
1788
  .jkl-checkbox-panel:has([aria-invalid=true]) {
@@ -2482,11 +2482,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
2482
2482
  }
2483
2483
  }
2484
2484
  .jkl-countdown__tracker {
2485
- animation: jkl-downcount-u6s4z68 var(--duration) linear forwards;
2485
+ animation: jkl-downcount-u3atmvy var(--duration) linear forwards;
2486
2486
  animation-play-state: var(--play-state, running);
2487
2487
  }
2488
2488
 
2489
- @keyframes jkl-downcount-u6s4z68 {
2489
+ @keyframes jkl-downcount-u3atmvy {
2490
2490
  from {
2491
2491
  width: 100%;
2492
2492
  }
@@ -3099,7 +3099,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3099
3099
  }
3100
3100
  }
3101
3101
 
3102
- @keyframes jkl-show-u6s4z75 {
3102
+ @keyframes jkl-show-u3atmwh {
3103
3103
  from {
3104
3104
  transform: translate3d(0, 0.5rem, 0);
3105
3105
  opacity: 0;
@@ -3134,7 +3134,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3134
3134
  }
3135
3135
  }
3136
3136
  .jkl-feedback__fade-in {
3137
- animation: jkl-show-u6s4z75 0.25s ease-out;
3137
+ animation: jkl-show-u3atmwh 0.25s ease-out;
3138
3138
  }
3139
3139
  .jkl-feedback__buttons {
3140
3140
  display: flex;
@@ -3376,7 +3376,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3376
3376
  --background-color: var(--jkl-color-background-alert-success);
3377
3377
  }
3378
3378
  .jkl-message--dismissed {
3379
- animation: jkl-dismiss-u6s4z7k 400ms ease-in-out forwards;
3379
+ animation: jkl-dismiss-u3atmxc 400ms ease-in-out forwards;
3380
3380
  transition: visibility 0ms 400ms;
3381
3381
  visibility: hidden;
3382
3382
  }
@@ -3396,7 +3396,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3396
3396
  }
3397
3397
  }
3398
3398
 
3399
- @keyframes jkl-dismiss-u6s4z7k {
3399
+ @keyframes jkl-dismiss-u3atmxc {
3400
3400
  from {
3401
3401
  opacity: 1;
3402
3402
  transform: translate3d(0, 0, 0);
@@ -3453,7 +3453,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3453
3453
  --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
3454
3454
  }
3455
3455
 
3456
- @keyframes jkl-dot-in-u6s4z87 {
3456
+ @keyframes jkl-dot-in-u3atmy9 {
3457
3457
  0% {
3458
3458
  transform: scale(0.8);
3459
3459
  }
@@ -3499,7 +3499,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3499
3499
  }
3500
3500
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
3501
3501
  --dot-color: var(--jkl-color-border-action);
3502
- animation: jkl-dot-in-u6s4z87 150ms ease;
3502
+ animation: jkl-dot-in-u3atmy9 150ms ease;
3503
3503
  }
3504
3504
  @media screen and (forced-colors: active) {
3505
3505
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -4590,7 +4590,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4590
4590
  transition-duration: 150ms;
4591
4591
  }
4592
4592
 
4593
- @keyframes jkl-downcount-u6s4z8w {
4593
+ @keyframes jkl-downcount-u3atmya {
4594
4594
  from {
4595
4595
  width: 100%;
4596
4596
  }
@@ -4598,7 +4598,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4598
4598
  width: 0%;
4599
4599
  }
4600
4600
  }
4601
- @keyframes jkl-dot-in-u6s4z9k {
4601
+ @keyframes jkl-dot-in-u3atmz2 {
4602
4602
  0% {
4603
4603
  transform: scale(0.8);
4604
4604
  }
@@ -4646,7 +4646,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4646
4646
  }
4647
4647
  }
4648
4648
  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
4649
- animation: jkl-dot-in-u6s4z9k 150ms ease;
4649
+ animation: jkl-dot-in-u3atmz2 150ms ease;
4650
4650
  }
4651
4651
  .jkl-radio-panel:has(:checked) {
4652
4652
  --radio-dot-color: var(--jkl-color-border-action);
@@ -4949,7 +4949,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4949
4949
  margin-bottom: 0;
4950
4950
  }
4951
4951
  .jkl-system-message--dismissed {
4952
- animation: jkl-dismiss-u6s4zad 400ms forwards;
4952
+ animation: jkl-dismiss-u3atmzn 400ms forwards;
4953
4953
  transition: block 400ms 400ms;
4954
4954
  }
4955
4955
  .jkl-system-message--info {
@@ -4980,7 +4980,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4980
4980
  }
4981
4981
  }
4982
4982
 
4983
- @keyframes jkl-dismiss-u6s4zad {
4983
+ @keyframes jkl-dismiss-u3atmzn {
4984
4984
  from {
4985
4985
  opacity: 1;
4986
4986
  transform: translateY(0);
@@ -5880,14 +5880,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
5880
5880
 
5881
5881
  .jkl-toast[data-animation=entering],
5882
5882
  .jkl-toast[data-animation=queued] {
5883
- animation: jkl-entering-u6s4zb5 200ms ease-out forwards;
5883
+ animation: jkl-entering-u3atn07 200ms ease-out forwards;
5884
5884
  }
5885
5885
 
5886
5886
  .jkl-toast[data-animation=exiting] {
5887
- animation: jkl-exiting-u6s4zb7 150ms ease-in forwards;
5887
+ animation: jkl-exiting-u3atn0r 150ms ease-in forwards;
5888
5888
  }
5889
5889
 
5890
- @keyframes jkl-entering-u6s4zb5 {
5890
+ @keyframes jkl-entering-u3atn07 {
5891
5891
  from {
5892
5892
  opacity: 0;
5893
5893
  transform: translate3d(0, 50%, 0);
@@ -5897,7 +5897,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
5897
5897
  transform: translate3d(0, 0, 0);
5898
5898
  }
5899
5899
  }
5900
- @keyframes jkl-exiting-u6s4zb7 {
5900
+ @keyframes jkl-exiting-u3atn0r {
5901
5901
  from {
5902
5902
  opacity: 1;
5903
5903
  transform: translate3d(0, 0, 0);