@fremtind/jokul 5.2.0 → 5.2.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 (50) hide show
  1. package/build/build-stats.html +1 -1
  2. package/build/cjs/components/card/types.cjs.map +1 -1
  3. package/build/cjs/components/card/types.d.cts +1 -0
  4. package/build/cjs/components/flex/Flex.cjs +1 -1
  5. package/build/cjs/components/flex/Flex.cjs.map +1 -1
  6. package/build/cjs/components/flex/types.cjs +1 -1
  7. package/build/cjs/components/flex/types.cjs.map +1 -1
  8. package/build/es/components/card/types.d.ts +1 -0
  9. package/build/es/components/card/types.js.map +1 -1
  10. package/build/es/components/flex/Flex.js +1 -1
  11. package/build/es/components/flex/Flex.js.map +1 -1
  12. package/build/es/components/flex/types.js +1 -1
  13. package/build/es/components/flex/types.js.map +1 -1
  14. package/package.json +1 -1
  15. package/styles/components/card/card.css +10 -3
  16. package/styles/components/card/card.min.css +1 -1
  17. package/styles/components/card/card.scss +10 -1
  18. package/styles/components/combobox/combobox.css +0 -1
  19. package/styles/components/combobox/combobox.min.css +1 -1
  20. package/styles/components/countdown/countdown.css +2 -2
  21. package/styles/components/countdown/countdown.min.css +1 -1
  22. package/styles/components/feedback/feedback.css +2 -2
  23. package/styles/components/feedback/feedback.min.css +1 -1
  24. package/styles/components/file-input/file-input.css +9 -9
  25. package/styles/components/file-input/file-input.min.css +1 -1
  26. package/styles/components/input-group/input-group.css +2 -2
  27. package/styles/components/input-group/input-group.min.css +1 -1
  28. package/styles/components/loader/loader.css +6 -6
  29. package/styles/components/loader/loader.min.css +1 -1
  30. package/styles/components/loader/skeleton-loader.css +3 -3
  31. package/styles/components/loader/skeleton-loader.min.css +1 -1
  32. package/styles/components/message/message.css +2 -2
  33. package/styles/components/message/message.min.css +1 -1
  34. package/styles/components/number-input/number-input.css +0 -1
  35. package/styles/components/number-input/number-input.min.css +1 -1
  36. package/styles/components/progress-bar/progress-bar.css +1 -1
  37. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  38. package/styles/components/segmented-control/segmented-control.css +2 -2
  39. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  40. package/styles/components/system-message/system-message.css +2 -2
  41. package/styles/components/system-message/system-message.min.css +1 -1
  42. package/styles/components/text-area/text-area.css +0 -1
  43. package/styles/components/text-area/text-area.min.css +1 -1
  44. package/styles/components/text-input/text-input.css +0 -1
  45. package/styles/components/text-input/text-input.min.css +1 -1
  46. package/styles/components/toast/toast.css +4 -4
  47. package/styles/components/toast/toast.min.css +1 -1
  48. package/styles/components.css +34 -31
  49. package/styles/components.min.css +1 -1
  50. package/styles/shared/input/shared-input-styles.scss +0 -1
@@ -83,7 +83,6 @@
83
83
  border-radius: var(--jkl-border-radius-s);
84
84
  box-sizing: border-box;
85
85
  max-width: 100%;
86
- overflow: hidden;
87
86
  position: relative;
88
87
  display: flex;
89
88
  align-items: center;
@@ -426,7 +425,7 @@
426
425
  display: inline-flex;
427
426
  }
428
427
  .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 {
429
- animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u52kgej forwards;
428
+ animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uyv60yu forwards;
430
429
  }
431
430
  .jkl-form-support-label--sr-only {
432
431
  border: 0 !important;
@@ -480,7 +479,7 @@
480
479
  .jkl-label:has(+ .jkl-input-group-description) {
481
480
  margin-block-end: var(--jkl-spacing-4);
482
481
  }
483
- @keyframes jkl-support-icon-entrance-u52kgej {
482
+ @keyframes jkl-support-icon-entrance-uyv60yu {
484
483
  0% {
485
484
  margin-right: 0;
486
485
  opacity: 0;
@@ -840,22 +839,22 @@
840
839
  animation: 2500ms linear infinite;
841
840
  }
842
841
  .jkl-loader__dot--left {
843
- animation-name: jkl-loader-left-spin-u52kgfe;
842
+ animation-name: jkl-loader-left-spin-uyv60zl;
844
843
  margin-right: calc(var(--jkl-loader-spacing) * 0.9);
845
844
  }
846
845
  .jkl-loader__dot--middle {
847
- animation-name: jkl-loader-middle-spin-u52kgg7;
846
+ animation-name: jkl-loader-middle-spin-uyv6104;
848
847
  margin-right: var(--jkl-loader-spacing);
849
848
  }
850
849
  .jkl-loader__dot--right {
851
- animation-name: jkl-loader-right-spin-u52kggo;
850
+ animation-name: jkl-loader-right-spin-uyv610e;
852
851
  }
853
852
  @media screen and (forced-colors: active) {
854
853
  .jkl-loader__dot {
855
854
  background-color: CanvasText;
856
855
  }
857
856
  }
858
- @keyframes jkl-loader-left-spin-u52kgfe {
857
+ @keyframes jkl-loader-left-spin-uyv60zl {
859
858
  0% {
860
859
  transform: rotate(0) scale(0);
861
860
  }
@@ -869,7 +868,7 @@
869
868
  transform: rotate(180deg) scale(0);
870
869
  }
871
870
  }
872
- @keyframes jkl-loader-middle-spin-u52kgg7 {
871
+ @keyframes jkl-loader-middle-spin-uyv6104 {
873
872
  0% {
874
873
  transform: rotate(20deg) scale(0);
875
874
  }
@@ -886,7 +885,7 @@
886
885
  transform: rotate(200deg) scale(0);
887
886
  }
888
887
  }
889
- @keyframes jkl-loader-right-spin-u52kggo {
888
+ @keyframes jkl-loader-right-spin-uyv610e {
890
889
  0% {
891
890
  transform: rotate(40deg) scale(0);
892
891
  }
@@ -926,7 +925,7 @@
926
925
  @media screen and (forced-colors: active) {
927
926
  .jkl-skeleton-element {
928
927
  border: 1px solid CanvasText;
929
- animation: 2s ease infinite jkl-blink-u52kghh;
928
+ animation: 2s ease infinite jkl-blink-uyv6113;
930
929
  }
931
930
  }
932
931
  .jkl-skeleton-input {
@@ -974,10 +973,10 @@
974
973
  }
975
974
  @media screen and (forced-colors: active) {
976
975
  .jkl-skeleton-table {
977
- animation: 2s ease-in-out infinite jkl-blink-u52kghh;
976
+ animation: 2s ease-in-out infinite jkl-blink-uyv6113;
978
977
  }
979
978
  }
980
- @keyframes jkl-blink-u52kghh {
979
+ @keyframes jkl-blink-uyv6113 {
981
980
  0% {
982
981
  opacity: 1;
983
982
  }
@@ -1052,14 +1051,21 @@
1052
1051
  --border-color: var(--jkl-color-border-subdued);
1053
1052
  --background-color: transparent;
1054
1053
  }
1055
- .jkl-card[data-clickable=true] {
1054
+ .jkl-card:where(button) {
1055
+ border: none;
1056
+ outline: none;
1057
+ font: inherit;
1058
+ line-height: inherit;
1059
+ text-align: inherit;
1060
+ }
1061
+ .jkl-card[data-clickable=true], .jkl-card:is(a, button:not(disabled)) {
1056
1062
  cursor: pointer;
1057
1063
  }
1058
- .jkl-card[data-clickable=true]:hover {
1064
+ .jkl-card[data-clickable=true]:hover, .jkl-card:is(a, button:not(disabled)):hover {
1059
1065
  --border-color: var(--jkl-color-border-strong);
1060
1066
  --border-width: 0.125rem;
1061
1067
  }
1062
- .jkl-card[data-clickable=true]:focus-visible {
1068
+ .jkl-card[data-clickable=true]:focus-visible, .jkl-card:is(a, button:not(disabled)):focus-visible {
1063
1069
  outline: 3px solid var(--jkl-color-border-strong);
1064
1070
  outline-offset: 3px;
1065
1071
  }
@@ -1496,7 +1502,6 @@
1496
1502
  border-radius: var(--jkl-border-radius-s);
1497
1503
  box-sizing: border-box;
1498
1504
  max-width: 100%;
1499
- overflow: hidden;
1500
1505
  position: relative;
1501
1506
  display: flex;
1502
1507
  align-items: center;
@@ -2135,10 +2140,10 @@
2135
2140
  }
2136
2141
  }
2137
2142
  .jkl-countdown__tracker {
2138
- animation: jkl-downcount-u52kgid var(--duration) linear forwards;
2143
+ animation: jkl-downcount-uyv6122 var(--duration) linear forwards;
2139
2144
  animation-play-state: var(--play-state, running);
2140
2145
  }
2141
- @keyframes jkl-downcount-u52kgid {
2146
+ @keyframes jkl-downcount-uyv6122 {
2142
2147
  from {
2143
2148
  width: 100%;
2144
2149
  }
@@ -2639,12 +2644,12 @@
2639
2644
  font: var(--jkl-text-style-paragraph-small);
2640
2645
  }
2641
2646
  .jkl-feedback__fade-in {
2642
- animation: jkl-show-u52kgiu 0.25s ease-out;
2647
+ animation: jkl-show-uyv6131 0.25s ease-out;
2643
2648
  }
2644
2649
  .jkl-feedback__buttons {
2645
2650
  display: flex;
2646
2651
  }
2647
- @keyframes jkl-show-u52kgiu {
2652
+ @keyframes jkl-show-uyv6131 {
2648
2653
  from {
2649
2654
  transform: translate3d(0, 0.5rem, 0);
2650
2655
  opacity: 0;
@@ -2856,7 +2861,7 @@
2856
2861
  --icon-color: var(--jkl-color-success-background-contrast);
2857
2862
  }
2858
2863
  .jkl-message--dismissed {
2859
- animation: jkl-dismiss-u52kgj9 var(--jkl-motion-timing-lazy) ease-in-out forwards;
2864
+ animation: jkl-dismiss-uyv613n var(--jkl-motion-timing-lazy) ease-in-out forwards;
2860
2865
  transition: visibility 0ms var(--jkl-motion-timing-lazy);
2861
2866
  visibility: hidden;
2862
2867
  }
@@ -2878,7 +2883,7 @@
2878
2883
  .jkl-form-error-message {
2879
2884
  padding-bottom: var(--jkl-unit-50);
2880
2885
  }
2881
- @keyframes jkl-dismiss-u52kgj9 {
2886
+ @keyframes jkl-dismiss-uyv613n {
2882
2887
  from {
2883
2888
  opacity: 1;
2884
2889
  transform: translate3d(0, 0, 0);
@@ -3024,7 +3029,6 @@
3024
3029
  border-radius: var(--jkl-border-radius-s);
3025
3030
  box-sizing: border-box;
3026
3031
  max-width: 100%;
3027
- overflow: hidden;
3028
3032
  position: relative;
3029
3033
  display: flex;
3030
3034
  align-items: center;
@@ -3842,7 +3846,6 @@
3842
3846
  border-radius: var(--jkl-border-radius-s);
3843
3847
  box-sizing: border-box;
3844
3848
  max-width: 100%;
3845
- overflow: hidden;
3846
3849
  position: relative;
3847
3850
  display: flex;
3848
3851
  align-items: center;
@@ -4480,7 +4483,7 @@
4480
4483
  transition-timing-function: var(--jkl-motion-easing-standard);
4481
4484
  transition-duration: var(--jkl-motion-timing-productive);
4482
4485
  }
4483
- @keyframes jkl-downcount-u52kgk8 {
4486
+ @keyframes jkl-downcount-uyv614f {
4484
4487
  from {
4485
4488
  width: 100%;
4486
4489
  }
@@ -4981,7 +4984,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
4981
4984
  margin-bottom: 0;
4982
4985
  }
4983
4986
  .jkl-system-message--dismissed {
4984
- animation: jkl-dismiss-u52kgkq var(--jkl-motion-timing-lazy) forwards;
4987
+ animation: jkl-dismiss-uyv615j var(--jkl-motion-timing-lazy) forwards;
4985
4988
  transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
4986
4989
  }
4987
4990
  .jkl-system-message--info {
@@ -5019,7 +5022,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
5019
5022
  border-width: 4px;
5020
5023
  }
5021
5024
  }
5022
- @keyframes jkl-dismiss-u52kgkq {
5025
+ @keyframes jkl-dismiss-uyv615j {
5023
5026
  from {
5024
5027
  opacity: 1;
5025
5028
  transform: translateY(0);
@@ -5847,12 +5850,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
5847
5850
  }
5848
5851
  .jkl-toast[data-animation=entering],
5849
5852
  .jkl-toast[data-animation=queued] {
5850
- animation: jkl-entering-u52kgle var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
5853
+ animation: jkl-entering-uyv6162 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
5851
5854
  }
5852
5855
  .jkl-toast[data-animation=exiting] {
5853
- animation: jkl-exiting-u52kgls var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
5856
+ animation: jkl-exiting-uyv6172 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
5854
5857
  }
5855
- @keyframes jkl-entering-u52kgle {
5858
+ @keyframes jkl-entering-uyv6162 {
5856
5859
  from {
5857
5860
  opacity: 0;
5858
5861
  transform: translate3d(0, 50%, 0);
@@ -5862,7 +5865,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
5862
5865
  transform: translate3d(0, 0, 0);
5863
5866
  }
5864
5867
  }
5865
- @keyframes jkl-exiting-u52kgls {
5868
+ @keyframes jkl-exiting-uyv6172 {
5866
5869
  from {
5867
5870
  opacity: 1;
5868
5871
  transform: translate3d(0, 0, 0);