@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.
- package/build/build-stats.html +1 -1
- package/build/cjs/components/datepicker/DatePicker.cjs +1 -1
- package/build/cjs/components/datepicker/DatePicker.cjs.map +1 -1
- package/build/cjs/components/popover/Popover.cjs +1 -1
- package/build/cjs/components/popover/Popover.cjs.map +1 -1
- package/build/cjs/components/popover/types.d.cts +13 -0
- package/build/cjs/hooks/index.cjs +1 -1
- package/build/cjs/hooks/index.d.cts +1 -0
- package/build/cjs/hooks/useMergeRefs/useMergeRefs.cjs +2 -0
- package/build/cjs/hooks/useMergeRefs/useMergeRefs.cjs.map +1 -0
- package/build/cjs/hooks/useMergeRefs/useMergeRefs.d.cts +8 -0
- package/build/cjs/utilities/index.cjs +1 -1
- package/build/cjs/utilities/index.d.cts +1 -0
- package/build/cjs/utilities/mergeRefs.cjs +1 -1
- package/build/cjs/utilities/mergeRefs.cjs.map +1 -1
- package/build/cjs/utilities/mergeRefs.d.cts +0 -8
- package/build/es/components/datepicker/DatePicker.js +1 -1
- package/build/es/components/datepicker/DatePicker.js.map +1 -1
- package/build/es/components/popover/Popover.js +1 -1
- package/build/es/components/popover/Popover.js.map +1 -1
- package/build/es/components/popover/types.d.ts +13 -0
- package/build/es/hooks/index.d.ts +1 -0
- package/build/es/hooks/index.js +1 -1
- package/build/es/hooks/useMergeRefs/useMergeRefs.d.ts +8 -0
- package/build/es/hooks/useMergeRefs/useMergeRefs.js +2 -0
- package/build/es/hooks/useMergeRefs/useMergeRefs.js.map +1 -0
- package/build/es/utilities/index.d.ts +1 -0
- package/build/es/utilities/index.js +1 -1
- package/build/es/utilities/mergeRefs.d.ts +0 -8
- package/build/es/utilities/mergeRefs.js +1 -1
- package/build/es/utilities/mergeRefs.js.map +1 -1
- package/package.json +1 -1
- package/styles/base.css +4 -2
- package/styles/base.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 -9
- 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/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +3 -3
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/popover/popover.css +4 -0
- package/styles/components/popover/popover.min.css +1 -1
- package/styles/components/popover/popover.scss +5 -0
- package/styles/components/progress-bar/progress-bar.css +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.css +13 -13
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.scss +2 -2
- 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/components.css +39 -35
- package/styles/components.min.css +1 -1
- package/styles/tailwind.css +2 -2
- package/styles/theme/_tokens.scss +2 -2
- package/styles/theme/brands/dnb/_fonts.scss +2 -0
package/styles/components.css
CHANGED
|
@@ -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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
976
|
+
animation: 2s ease-in-out infinite jkl-blink-uj1zbqo;
|
|
977
977
|
}
|
|
978
978
|
}
|
|
979
|
-
@keyframes jkl-blink-
|
|
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-
|
|
2127
|
+
animation: jkl-downcount-uj1zbro var(--duration) linear forwards;
|
|
2128
2128
|
animation-play-state: var(--play-state, running);
|
|
2129
2129
|
}
|
|
2130
|
-
@keyframes jkl-downcount-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
5845
|
+
animation: jkl-exiting-uj1zbty var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
|
|
5842
5846
|
}
|
|
5843
|
-
@keyframes jkl-entering-
|
|
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-
|
|
5857
|
+
@keyframes jkl-exiting-uj1zbty {
|
|
5854
5858
|
from {
|
|
5855
5859
|
opacity: 1;
|
|
5856
5860
|
transform: translate3d(0, 0, 0);
|