@fremtind/jokul 6.1.3 → 6.1.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/date-input/DateInput.cjs +1 -1
- package/build/cjs/components/date-input/DateInput.cjs.map +1 -1
- 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/date-input/DateInput.js +1 -1
- package/build/es/components/date-input/DateInput.js.map +1 -1
- 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/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/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 +35 -35
- package/styles/components.min.css +2 -2
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-ucdpkvp 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-ucdpkvp {
|
|
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-ucdpkwb;
|
|
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-ucdpkx8;
|
|
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-ucdpkxy;
|
|
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-ucdpkwb {
|
|
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-ucdpkx8 {
|
|
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-ucdpkxy {
|
|
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-ucdpky9;
|
|
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-ucdpky9;
|
|
977
977
|
}
|
|
978
978
|
}
|
|
979
|
-
@keyframes jkl-blink-
|
|
979
|
+
@keyframes jkl-blink-ucdpky9 {
|
|
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-ucdpkzh var(--duration) linear forwards;
|
|
2128
2128
|
animation-play-state: var(--play-state, running);
|
|
2129
2129
|
}
|
|
2130
|
-
@keyframes jkl-downcount-
|
|
2130
|
+
@keyframes jkl-downcount-ucdpkzh {
|
|
2131
2131
|
from {
|
|
2132
2132
|
width: 100%;
|
|
2133
2133
|
}
|
|
@@ -3556,12 +3556,12 @@
|
|
|
3556
3556
|
font: var(--jkl-text-style-paragraph-small);
|
|
3557
3557
|
}
|
|
3558
3558
|
.jkl-feedback__fade-in {
|
|
3559
|
-
animation: jkl-show-
|
|
3559
|
+
animation: jkl-show-ucdpl07 0.25s ease-out;
|
|
3560
3560
|
}
|
|
3561
3561
|
.jkl-feedback__buttons {
|
|
3562
3562
|
display: flex;
|
|
3563
3563
|
}
|
|
3564
|
-
@keyframes jkl-show-
|
|
3564
|
+
@keyframes jkl-show-ucdpl07 {
|
|
3565
3565
|
from {
|
|
3566
3566
|
transform: translate3d(0, 0.5rem, 0);
|
|
3567
3567
|
opacity: 0;
|
|
@@ -3773,7 +3773,7 @@
|
|
|
3773
3773
|
--icon-color: var(--jkl-color-success-background-contrast);
|
|
3774
3774
|
}
|
|
3775
3775
|
.jkl-message--dismissed {
|
|
3776
|
-
animation: jkl-dismiss-
|
|
3776
|
+
animation: jkl-dismiss-ucdpl0z var(--jkl-motion-timing-lazy) ease-in-out forwards;
|
|
3777
3777
|
transition: visibility 0ms var(--jkl-motion-timing-lazy);
|
|
3778
3778
|
visibility: hidden;
|
|
3779
3779
|
}
|
|
@@ -3795,7 +3795,7 @@
|
|
|
3795
3795
|
.jkl-form-error-message {
|
|
3796
3796
|
padding-bottom: var(--jkl-unit-50);
|
|
3797
3797
|
}
|
|
3798
|
-
@keyframes jkl-dismiss-
|
|
3798
|
+
@keyframes jkl-dismiss-ucdpl0z {
|
|
3799
3799
|
from {
|
|
3800
3800
|
opacity: 1;
|
|
3801
3801
|
transform: translate3d(0, 0, 0);
|
|
@@ -5098,7 +5098,7 @@
|
|
|
5098
5098
|
transition-timing-function: var(--jkl-motion-easing-standard);
|
|
5099
5099
|
transition-duration: var(--jkl-motion-timing-productive);
|
|
5100
5100
|
}
|
|
5101
|
-
@keyframes jkl-downcount-
|
|
5101
|
+
@keyframes jkl-downcount-ucdpl1a {
|
|
5102
5102
|
from {
|
|
5103
5103
|
width: 100%;
|
|
5104
5104
|
}
|
|
@@ -5124,7 +5124,7 @@
|
|
|
5124
5124
|
.jkl-segmented-control .jkl-segmented-control-legend {
|
|
5125
5125
|
margin-block-end: 0.25lh;
|
|
5126
5126
|
}
|
|
5127
|
-
.jkl-segmented-control .jkl-segmented-control-item {
|
|
5127
|
+
.jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button {
|
|
5128
5128
|
--jkl-segmented-control-border-width: 1px;
|
|
5129
5129
|
--jkl-segmented-controls-border-radius: 2lh;
|
|
5130
5130
|
cursor: pointer;
|
|
@@ -5135,46 +5135,46 @@
|
|
|
5135
5135
|
border: var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-subdued);
|
|
5136
5136
|
border-radius: 0;
|
|
5137
5137
|
margin-inline-end: calc(var(--jkl-segmented-control-border-width) * -1);
|
|
5138
|
-
margin-block
|
|
5138
|
+
margin-block: 0;
|
|
5139
5139
|
transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
|
|
5140
5140
|
transition-duration: var(--jkl-motion-timing-expressive);
|
|
5141
5141
|
transition-property: border background;
|
|
5142
5142
|
}
|
|
5143
|
-
.jkl-segmented-control .jkl-segmented-control-item label {
|
|
5143
|
+
.jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button label {
|
|
5144
5144
|
cursor: pointer;
|
|
5145
5145
|
padding: var(--jkl-segmented-controls-padding);
|
|
5146
5146
|
}
|
|
5147
|
-
.jkl-segmented-control .jkl-segmented-control-item:hover {
|
|
5147
|
+
.jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:hover {
|
|
5148
5148
|
background-color: color-mix(in srgb, currentColor 6%, transparent);
|
|
5149
5149
|
border-color: var(--jkl-color-border-default);
|
|
5150
5150
|
z-index: 2;
|
|
5151
5151
|
}
|
|
5152
|
-
.jkl-segmented-control .jkl-segmented-control-item:has(input:checked) {
|
|
5152
|
+
.jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input:checked) {
|
|
5153
5153
|
background-color: var(--jkl-color-background-container);
|
|
5154
5154
|
border-color: var(--jkl-color-border-subdued);
|
|
5155
5155
|
z-index: 1;
|
|
5156
5156
|
}
|
|
5157
|
-
.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]) {
|
|
5157
|
+
.jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input[data-separated=true]) {
|
|
5158
5158
|
border-radius: var(--jkl-segmented-controls-border-radius);
|
|
5159
5159
|
margin-inline-start: var(--jkl-segmented-controls-margin);
|
|
5160
5160
|
}
|
|
5161
|
-
.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]):first-of-type {
|
|
5161
|
+
.jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input[data-separated=true]):first-of-type {
|
|
5162
5162
|
margin-inline-start: 0;
|
|
5163
5163
|
}
|
|
5164
|
-
.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]) + span + .jkl-segmented-control-item {
|
|
5164
|
+
.jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(input[data-separated=true]) + span + .jkl-segmented-control-item {
|
|
5165
5165
|
border-end-start-radius: var(--jkl-segmented-controls-border-radius);
|
|
5166
5166
|
border-start-start-radius: var(--jkl-segmented-controls-border-radius);
|
|
5167
5167
|
margin-inline-start: var(--jkl-segmented-controls-margin);
|
|
5168
5168
|
}
|
|
5169
|
-
.jkl-segmented-control .jkl-segmented-control-item:first-of-type {
|
|
5169
|
+
.jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:first-of-type {
|
|
5170
5170
|
border-end-start-radius: var(--jkl-segmented-controls-border-radius);
|
|
5171
5171
|
border-start-start-radius: var(--jkl-segmented-controls-border-radius);
|
|
5172
5172
|
}
|
|
5173
|
-
.jkl-segmented-control .jkl-segmented-control-item:last-of-type {
|
|
5173
|
+
.jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:last-of-type {
|
|
5174
5174
|
border-end-end-radius: var(--jkl-segmented-controls-border-radius);
|
|
5175
5175
|
border-start-end-radius: var(--jkl-segmented-controls-border-radius);
|
|
5176
5176
|
}
|
|
5177
|
-
.jkl-segmented-control .jkl-segmented-control-item:has(+ span + .jkl-segmented-control-item > input[data-separated=true]) {
|
|
5177
|
+
.jkl-segmented-control .jkl-segmented-control-item.jkl-radio-button:has(+ span + .jkl-segmented-control-item > input[data-separated=true]) {
|
|
5178
5178
|
border-end-end-radius: var(--jkl-segmented-controls-border-radius);
|
|
5179
5179
|
border-start-end-radius: var(--jkl-segmented-controls-border-radius);
|
|
5180
5180
|
}
|
|
@@ -5338,7 +5338,7 @@
|
|
|
5338
5338
|
margin-bottom: 0;
|
|
5339
5339
|
}
|
|
5340
5340
|
.jkl-system-message--dismissed {
|
|
5341
|
-
animation: jkl-dismiss-
|
|
5341
|
+
animation: jkl-dismiss-ucdpl2x var(--jkl-motion-timing-lazy) forwards;
|
|
5342
5342
|
transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
|
|
5343
5343
|
}
|
|
5344
5344
|
.jkl-system-message--info {
|
|
@@ -5376,7 +5376,7 @@
|
|
|
5376
5376
|
border-width: 4px;
|
|
5377
5377
|
}
|
|
5378
5378
|
}
|
|
5379
|
-
@keyframes jkl-dismiss-
|
|
5379
|
+
@keyframes jkl-dismiss-ucdpl2x {
|
|
5380
5380
|
from {
|
|
5381
5381
|
opacity: 1;
|
|
5382
5382
|
transform: translateY(0);
|
|
@@ -5728,12 +5728,12 @@
|
|
|
5728
5728
|
}
|
|
5729
5729
|
.jkl-toast[data-animation=entering],
|
|
5730
5730
|
.jkl-toast[data-animation=queued] {
|
|
5731
|
-
animation: jkl-entering-
|
|
5731
|
+
animation: jkl-entering-ucdpl3p var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
|
|
5732
5732
|
}
|
|
5733
5733
|
.jkl-toast[data-animation=exiting] {
|
|
5734
|
-
animation: jkl-exiting-
|
|
5734
|
+
animation: jkl-exiting-ucdpl4c var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
|
|
5735
5735
|
}
|
|
5736
|
-
@keyframes jkl-entering-
|
|
5736
|
+
@keyframes jkl-entering-ucdpl3p {
|
|
5737
5737
|
from {
|
|
5738
5738
|
opacity: 0;
|
|
5739
5739
|
transform: translate3d(0, 50%, 0);
|
|
@@ -5743,7 +5743,7 @@
|
|
|
5743
5743
|
transform: translate3d(0, 0, 0);
|
|
5744
5744
|
}
|
|
5745
5745
|
}
|
|
5746
|
-
@keyframes jkl-exiting-
|
|
5746
|
+
@keyframes jkl-exiting-ucdpl4c {
|
|
5747
5747
|
from {
|
|
5748
5748
|
opacity: 1;
|
|
5749
5749
|
transform: translate3d(0, 0, 0);
|