@fremtind/jokul 5.5.2 → 5.5.4

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 (65) hide show
  1. package/build/build-stats.html +1 -1
  2. package/build/cjs/components/datepicker/DatePicker.cjs +1 -1
  3. package/build/cjs/components/datepicker/DatePicker.cjs.map +1 -1
  4. package/build/cjs/components/popover/Popover.cjs +1 -1
  5. package/build/cjs/components/popover/Popover.cjs.map +1 -1
  6. package/build/cjs/components/popover/types.d.cts +13 -0
  7. package/build/cjs/hooks/index.cjs +1 -1
  8. package/build/cjs/hooks/index.d.cts +1 -0
  9. package/build/cjs/hooks/useMergeRefs/useMergeRefs.cjs +2 -0
  10. package/build/cjs/hooks/useMergeRefs/useMergeRefs.cjs.map +1 -0
  11. package/build/cjs/hooks/useMergeRefs/useMergeRefs.d.cts +8 -0
  12. package/build/cjs/utilities/index.cjs +1 -1
  13. package/build/cjs/utilities/index.d.cts +1 -0
  14. package/build/cjs/utilities/mergeRefs.cjs +1 -1
  15. package/build/cjs/utilities/mergeRefs.cjs.map +1 -1
  16. package/build/cjs/utilities/mergeRefs.d.cts +0 -8
  17. package/build/es/components/datepicker/DatePicker.js +1 -1
  18. package/build/es/components/datepicker/DatePicker.js.map +1 -1
  19. package/build/es/components/popover/Popover.js +1 -1
  20. package/build/es/components/popover/Popover.js.map +1 -1
  21. package/build/es/components/popover/types.d.ts +13 -0
  22. package/build/es/hooks/index.d.ts +1 -0
  23. package/build/es/hooks/index.js +1 -1
  24. package/build/es/hooks/useMergeRefs/useMergeRefs.d.ts +8 -0
  25. package/build/es/hooks/useMergeRefs/useMergeRefs.js +2 -0
  26. package/build/es/hooks/useMergeRefs/useMergeRefs.js.map +1 -0
  27. package/build/es/utilities/index.d.ts +1 -0
  28. package/build/es/utilities/index.js +1 -1
  29. package/build/es/utilities/mergeRefs.d.ts +0 -8
  30. package/build/es/utilities/mergeRefs.js +1 -1
  31. package/build/es/utilities/mergeRefs.js.map +1 -1
  32. package/package.json +1 -1
  33. package/styles/base.css +4 -2
  34. package/styles/base.min.css +1 -1
  35. package/styles/components/countdown/countdown.css +2 -2
  36. package/styles/components/countdown/countdown.min.css +1 -1
  37. package/styles/components/feedback/feedback.css +2 -2
  38. package/styles/components/feedback/feedback.min.css +1 -1
  39. package/styles/components/file-input/file-input.css +9 -9
  40. package/styles/components/file-input/file-input.min.css +1 -1
  41. package/styles/components/input-group/input-group.css +2 -2
  42. package/styles/components/input-group/input-group.min.css +1 -1
  43. package/styles/components/loader/loader.css +6 -6
  44. package/styles/components/loader/loader.min.css +1 -1
  45. package/styles/components/loader/skeleton-loader.css +3 -3
  46. package/styles/components/loader/skeleton-loader.min.css +1 -1
  47. package/styles/components/message/message.css +2 -2
  48. package/styles/components/message/message.min.css +1 -1
  49. package/styles/components/popover/popover.css +4 -0
  50. package/styles/components/popover/popover.min.css +1 -1
  51. package/styles/components/popover/popover.scss +5 -0
  52. package/styles/components/progress-bar/progress-bar.css +1 -1
  53. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  54. package/styles/components/segmented-control/segmented-control.css +13 -13
  55. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  56. package/styles/components/segmented-control/segmented-control.scss +2 -2
  57. package/styles/components/system-message/system-message.css +2 -2
  58. package/styles/components/system-message/system-message.min.css +1 -1
  59. package/styles/components/toast/toast.css +4 -4
  60. package/styles/components/toast/toast.min.css +1 -1
  61. package/styles/components.css +39 -35
  62. package/styles/components.min.css +1 -1
  63. package/styles/tailwind.css +2 -2
  64. package/styles/theme/_tokens.scss +2 -2
  65. package/styles/theme/brands/dnb/_fonts.scss +2 -0
@@ -425,7 +425,7 @@
425
425
  display: inline-flex;
426
426
  }
427
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 {
428
- animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uiipvoz forwards;
428
+ animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uj1zbog forwards;
429
429
  }
430
430
  .jkl-form-support-label--sr-only {
431
431
  border: 0 !important;
@@ -479,7 +479,7 @@
479
479
  .jkl-label:has(+ .jkl-input-group-description) {
480
480
  margin-block-end: var(--jkl-spacing-4);
481
481
  }
482
- @keyframes jkl-support-icon-entrance-uiipvoz {
482
+ @keyframes jkl-support-icon-entrance-uj1zbog {
483
483
  0% {
484
484
  margin-right: 0;
485
485
  opacity: 0;
@@ -839,22 +839,22 @@
839
839
  animation: 2500ms linear infinite;
840
840
  }
841
841
  .jkl-loader__dot--left {
842
- animation-name: jkl-loader-left-spin-uiipvp7;
842
+ animation-name: jkl-loader-left-spin-uj1zbol;
843
843
  margin-right: calc(var(--jkl-loader-spacing) * 0.9);
844
844
  }
845
845
  .jkl-loader__dot--middle {
846
- animation-name: jkl-loader-middle-spin-uiipvpm;
846
+ animation-name: jkl-loader-middle-spin-uj1zbp5;
847
847
  margin-right: var(--jkl-loader-spacing);
848
848
  }
849
849
  .jkl-loader__dot--right {
850
- animation-name: jkl-loader-right-spin-uiipvpv;
850
+ animation-name: jkl-loader-right-spin-uj1zbpv;
851
851
  }
852
852
  @media screen and (forced-colors: active) {
853
853
  .jkl-loader__dot {
854
854
  background-color: CanvasText;
855
855
  }
856
856
  }
857
- @keyframes jkl-loader-left-spin-uiipvp7 {
857
+ @keyframes jkl-loader-left-spin-uj1zbol {
858
858
  0% {
859
859
  transform: rotate(0) scale(0);
860
860
  }
@@ -868,7 +868,7 @@
868
868
  transform: rotate(180deg) scale(0);
869
869
  }
870
870
  }
871
- @keyframes jkl-loader-middle-spin-uiipvpm {
871
+ @keyframes jkl-loader-middle-spin-uj1zbp5 {
872
872
  0% {
873
873
  transform: rotate(20deg) scale(0);
874
874
  }
@@ -885,7 +885,7 @@
885
885
  transform: rotate(200deg) scale(0);
886
886
  }
887
887
  }
888
- @keyframes jkl-loader-right-spin-uiipvpv {
888
+ @keyframes jkl-loader-right-spin-uj1zbpv {
889
889
  0% {
890
890
  transform: rotate(40deg) scale(0);
891
891
  }
@@ -925,7 +925,7 @@
925
925
  @media screen and (forced-colors: active) {
926
926
  .jkl-skeleton-element {
927
927
  border: 1px solid CanvasText;
928
- animation: 2s ease infinite jkl-blink-uiipvq8;
928
+ animation: 2s ease infinite jkl-blink-uj1zbqo;
929
929
  }
930
930
  }
931
931
  .jkl-skeleton-input {
@@ -973,10 +973,10 @@
973
973
  }
974
974
  @media screen and (forced-colors: active) {
975
975
  .jkl-skeleton-table {
976
- animation: 2s ease-in-out infinite jkl-blink-uiipvq8;
976
+ animation: 2s ease-in-out infinite jkl-blink-uj1zbqo;
977
977
  }
978
978
  }
979
- @keyframes jkl-blink-uiipvq8 {
979
+ @keyframes jkl-blink-uj1zbqo {
980
980
  0% {
981
981
  opacity: 1;
982
982
  }
@@ -2124,10 +2124,10 @@
2124
2124
  }
2125
2125
  }
2126
2126
  .jkl-countdown__tracker {
2127
- animation: jkl-downcount-uiipvrj var(--duration) linear forwards;
2127
+ animation: jkl-downcount-uj1zbro var(--duration) linear forwards;
2128
2128
  animation-play-state: var(--play-state, running);
2129
2129
  }
2130
- @keyframes jkl-downcount-uiipvrj {
2130
+ @keyframes jkl-downcount-uj1zbro {
2131
2131
  from {
2132
2132
  width: 100%;
2133
2133
  }
@@ -2391,6 +2391,10 @@
2391
2391
  background-color: var(--jkl-color-background-container);
2392
2392
  border-radius: var(--jkl-border-radius-s);
2393
2393
  }
2394
+ .jkl-popover--fit-available-height {
2395
+ box-sizing: border-box;
2396
+ overflow-y: auto;
2397
+ }
2394
2398
  .jkl-popover:focus-visible {
2395
2399
  outline: 3px solid var(--jkl-color-border-strong);
2396
2400
  outline-offset: 3px;
@@ -2628,12 +2632,12 @@
2628
2632
  font: var(--jkl-text-style-paragraph-small);
2629
2633
  }
2630
2634
  .jkl-feedback__fade-in {
2631
- animation: jkl-show-uiipvrz 0.25s ease-out;
2635
+ animation: jkl-show-uj1zbrz 0.25s ease-out;
2632
2636
  }
2633
2637
  .jkl-feedback__buttons {
2634
2638
  display: flex;
2635
2639
  }
2636
- @keyframes jkl-show-uiipvrz {
2640
+ @keyframes jkl-show-uj1zbrz {
2637
2641
  from {
2638
2642
  transform: translate3d(0, 0.5rem, 0);
2639
2643
  opacity: 0;
@@ -2845,7 +2849,7 @@
2845
2849
  --icon-color: var(--jkl-color-success-background-contrast);
2846
2850
  }
2847
2851
  .jkl-message--dismissed {
2848
- animation: jkl-dismiss-uiipvsy var(--jkl-motion-timing-lazy) ease-in-out forwards;
2852
+ animation: jkl-dismiss-uj1zbs2 var(--jkl-motion-timing-lazy) ease-in-out forwards;
2849
2853
  transition: visibility 0ms var(--jkl-motion-timing-lazy);
2850
2854
  visibility: hidden;
2851
2855
  }
@@ -2867,7 +2871,7 @@
2867
2871
  .jkl-form-error-message {
2868
2872
  padding-bottom: var(--jkl-unit-50);
2869
2873
  }
2870
- @keyframes jkl-dismiss-uiipvsy {
2874
+ @keyframes jkl-dismiss-uj1zbs2 {
2871
2875
  from {
2872
2876
  opacity: 1;
2873
2877
  transform: translate3d(0, 0, 0);
@@ -4455,7 +4459,7 @@
4455
4459
  transition-timing-function: var(--jkl-motion-easing-standard);
4456
4460
  transition-duration: var(--jkl-motion-timing-productive);
4457
4461
  }
4458
- @keyframes jkl-downcount-uiipvtm {
4462
+ @keyframes jkl-downcount-uj1zbs9 {
4459
4463
  from {
4460
4464
  width: 100%;
4461
4465
  }
@@ -4755,7 +4759,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
4755
4759
  .jkl-segmented-control .jkl-segmented-control-legend {
4756
4760
  margin-block-end: 0.25lh;
4757
4761
  }
4758
- .jkl-segmented-control .jkl-segmented-control-item {
4762
+ .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button {
4759
4763
  --jkl-segmented-control-border-width: 1px;
4760
4764
  --jkl-segmented-controls-border-radius: 2lh;
4761
4765
  cursor: pointer;
@@ -4766,46 +4770,46 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
4766
4770
  border: var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-subdued);
4767
4771
  border-radius: 0;
4768
4772
  margin-inline-end: calc(var(--jkl-segmented-control-border-width) * -1);
4769
- margin-block-end: 0.5lh;
4773
+ margin-block: 0;
4770
4774
  transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
4771
4775
  transition-duration: var(--jkl-motion-timing-expressive);
4772
4776
  transition-property: border background;
4773
4777
  }
4774
- .jkl-segmented-control .jkl-segmented-control-item label {
4778
+ .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button label {
4775
4779
  cursor: pointer;
4776
4780
  padding: var(--jkl-segmented-controls-padding);
4777
4781
  }
4778
- .jkl-segmented-control .jkl-segmented-control-item:hover {
4782
+ .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:hover {
4779
4783
  background-color: color-mix(in srgb, currentColor 6%, transparent);
4780
4784
  border-color: var(--jkl-color-border-default);
4781
4785
  z-index: 2;
4782
4786
  }
4783
- .jkl-segmented-control .jkl-segmented-control-item:has(input:checked) {
4787
+ .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input:checked) {
4784
4788
  background-color: var(--jkl-color-background-container);
4785
4789
  border-color: var(--jkl-color-border-subdued);
4786
4790
  z-index: 1;
4787
4791
  }
4788
- .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]) {
4792
+ .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input[data-separated=true]) {
4789
4793
  border-radius: var(--jkl-segmented-controls-border-radius);
4790
4794
  margin-inline-start: var(--jkl-segmented-controls-margin);
4791
4795
  }
4792
- .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]):first-of-type {
4796
+ .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input[data-separated=true]):first-of-type {
4793
4797
  margin-inline-start: 0;
4794
4798
  }
4795
- .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]) + span + .jkl-segmented-control-item {
4799
+ .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input[data-separated=true]) + span + .jkl-segmented-control-item {
4796
4800
  border-end-start-radius: var(--jkl-segmented-controls-border-radius);
4797
4801
  border-start-start-radius: var(--jkl-segmented-controls-border-radius);
4798
4802
  margin-inline-start: var(--jkl-segmented-controls-margin);
4799
4803
  }
4800
- .jkl-segmented-control .jkl-segmented-control-item:first-of-type {
4804
+ .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:first-of-type {
4801
4805
  border-end-start-radius: var(--jkl-segmented-controls-border-radius);
4802
4806
  border-start-start-radius: var(--jkl-segmented-controls-border-radius);
4803
4807
  }
4804
- .jkl-segmented-control .jkl-segmented-control-item:last-of-type {
4808
+ .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:last-of-type {
4805
4809
  border-end-end-radius: var(--jkl-segmented-controls-border-radius);
4806
4810
  border-start-end-radius: var(--jkl-segmented-controls-border-radius);
4807
4811
  }
4808
- .jkl-segmented-control .jkl-segmented-control-item:has(+ span + .jkl-segmented-control-item > input[data-separated=true]) {
4812
+ .jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(+ span + .jkl-segmented-control-item > input[data-separated=true]) {
4809
4813
  border-end-end-radius: var(--jkl-segmented-controls-border-radius);
4810
4814
  border-start-end-radius: var(--jkl-segmented-controls-border-radius);
4811
4815
  }
@@ -4969,7 +4973,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
4969
4973
  margin-bottom: 0;
4970
4974
  }
4971
4975
  .jkl-system-message--dismissed {
4972
- animation: jkl-dismiss-uiipvu8 var(--jkl-motion-timing-lazy) forwards;
4976
+ animation: jkl-dismiss-uj1zbt0 var(--jkl-motion-timing-lazy) forwards;
4973
4977
  transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
4974
4978
  }
4975
4979
  .jkl-system-message--info {
@@ -5007,7 +5011,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
5007
5011
  border-width: 4px;
5008
5012
  }
5009
5013
  }
5010
- @keyframes jkl-dismiss-uiipvu8 {
5014
+ @keyframes jkl-dismiss-uj1zbt0 {
5011
5015
  from {
5012
5016
  opacity: 1;
5013
5017
  transform: translateY(0);
@@ -5835,12 +5839,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
5835
5839
  }
5836
5840
  .jkl-toast[data-animation=entering],
5837
5841
  .jkl-toast[data-animation=queued] {
5838
- animation: jkl-entering-uiipvus var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
5842
+ animation: jkl-entering-uj1zbtj var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
5839
5843
  }
5840
5844
  .jkl-toast[data-animation=exiting] {
5841
- animation: jkl-exiting-uiipvvp var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
5845
+ animation: jkl-exiting-uj1zbty var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
5842
5846
  }
5843
- @keyframes jkl-entering-uiipvus {
5847
+ @keyframes jkl-entering-uj1zbtj {
5844
5848
  from {
5845
5849
  opacity: 0;
5846
5850
  transform: translate3d(0, 50%, 0);
@@ -5850,7 +5854,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
5850
5854
  transform: translate3d(0, 0, 0);
5851
5855
  }
5852
5856
  }
5853
- @keyframes jkl-exiting-uiipvvp {
5857
+ @keyframes jkl-exiting-uj1zbty {
5854
5858
  from {
5855
5859
  opacity: 1;
5856
5860
  transform: translate3d(0, 0, 0);