@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.
- package/build/build-stats.html +1 -1
- package/build/cjs/components/card/types.cjs.map +1 -1
- package/build/cjs/components/card/types.d.cts +1 -0
- package/build/cjs/components/flex/Flex.cjs +1 -1
- package/build/cjs/components/flex/Flex.cjs.map +1 -1
- package/build/cjs/components/flex/types.cjs +1 -1
- package/build/cjs/components/flex/types.cjs.map +1 -1
- package/build/es/components/card/types.d.ts +1 -0
- package/build/es/components/card/types.js.map +1 -1
- package/build/es/components/flex/Flex.js +1 -1
- package/build/es/components/flex/Flex.js.map +1 -1
- package/build/es/components/flex/types.js +1 -1
- package/build/es/components/flex/types.js.map +1 -1
- package/package.json +1 -1
- package/styles/components/card/card.css +10 -3
- package/styles/components/card/card.min.css +1 -1
- package/styles/components/card/card.scss +10 -1
- package/styles/components/combobox/combobox.css +0 -1
- package/styles/components/combobox/combobox.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/number-input/number-input.css +0 -1
- package/styles/components/number-input/number-input.min.css +1 -1
- 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 +2 -2
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/text-area/text-area.css +0 -1
- package/styles/components/text-area/text-area.min.css +1 -1
- package/styles/components/text-input/text-input.css +0 -1
- package/styles/components/text-input/text-input.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 +34 -31
- package/styles/components.min.css +1 -1
- package/styles/shared/input/shared-input-styles.scss +0 -1
package/styles/components.css
CHANGED
|
@@ -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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
976
|
+
animation: 2s ease-in-out infinite jkl-blink-uyv6113;
|
|
978
977
|
}
|
|
979
978
|
}
|
|
980
|
-
@keyframes jkl-blink-
|
|
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
|
|
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-
|
|
2143
|
+
animation: jkl-downcount-uyv6122 var(--duration) linear forwards;
|
|
2139
2144
|
animation-play-state: var(--play-state, running);
|
|
2140
2145
|
}
|
|
2141
|
-
@keyframes jkl-downcount-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
5856
|
+
animation: jkl-exiting-uyv6172 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
|
|
5854
5857
|
}
|
|
5855
|
-
@keyframes jkl-entering-
|
|
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-
|
|
5868
|
+
@keyframes jkl-exiting-uyv6172 {
|
|
5866
5869
|
from {
|
|
5867
5870
|
opacity: 1;
|
|
5868
5871
|
transform: translate3d(0, 0, 0);
|