@fremtind/jokul 0.30.3 → 0.30.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 (30) hide show
  1. package/package.json +2 -2
  2. package/styles/components/button/button.css +5 -2
  3. package/styles/components/button/button.min.css +1 -1
  4. package/styles/components/button/button.scss +4 -0
  5. package/styles/components/checkbox/checkbox.css +4 -4
  6. package/styles/components/checkbox/checkbox.min.css +1 -1
  7. package/styles/components/feedback/feedback.css +2 -2
  8. package/styles/components/feedback/feedback.min.css +1 -1
  9. package/styles/components/input-group/input-group.css +2 -2
  10. package/styles/components/input-group/input-group.min.css +1 -1
  11. package/styles/components/input-panel/checkbox-panel.css +2 -2
  12. package/styles/components/input-panel/checkbox-panel.min.css +1 -1
  13. package/styles/components/input-panel/radio-panel.css +2 -2
  14. package/styles/components/input-panel/radio-panel.min.css +1 -1
  15. package/styles/components/loader/loader.css +6 -6
  16. package/styles/components/loader/loader.min.css +1 -1
  17. package/styles/components/loader/skeleton-loader.css +5 -5
  18. package/styles/components/loader/skeleton-loader.min.css +1 -1
  19. package/styles/components/message/message.css +2 -2
  20. package/styles/components/message/message.min.css +1 -1
  21. package/styles/components/progress-bar/progress-bar.css +2 -2
  22. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  23. package/styles/components/radio-button/radio-button.css +2 -2
  24. package/styles/components/radio-button/radio-button.min.css +1 -1
  25. package/styles/components/system-message/system-message.css +2 -2
  26. package/styles/components/system-message/system-message.min.css +1 -1
  27. package/styles/components/toast/toast.css +4 -4
  28. package/styles/components/toast/toast.min.css +1 -1
  29. package/styles/styles.css +40 -37
  30. package/styles/styles.min.css +1 -1
package/styles/styles.css CHANGED
@@ -521,6 +521,7 @@
521
521
  --background-color: transparent;
522
522
  --border-radius: 0;
523
523
  --border-width: 0.0625rem;
524
+ display: block;
524
525
  cursor: pointer;
525
526
  user-select: none;
526
527
  background-color: var(--background-color);
@@ -567,6 +568,7 @@
567
568
  transition-timing-function: ease;
568
569
  transition-duration: 250ms;
569
570
  transition-property: translate;
571
+ width: 100%;
570
572
  display: flex;
571
573
  flex-direction: row;
572
574
  align-items: center;
@@ -585,6 +587,7 @@
585
587
  pointer-events: none;
586
588
  }
587
589
  .jkl-button__text {
590
+ width: 100%;
588
591
  max-width: 100%;
589
592
  overflow: hidden;
590
593
  white-space: nowrap;
@@ -617,7 +620,7 @@
617
620
  height: 1rem;
618
621
  }
619
622
  html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
620
- animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-uydibi1;
623
+ animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-uacknlz;
621
624
  }
622
625
  :not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
623
626
  scale: 1.05;
@@ -661,7 +664,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
661
664
  --background-color: var(--jkl-color-background-interactive-hover);
662
665
  }
663
666
 
664
- @keyframes jkl-tertiary-flash-uydibi1 {
667
+ @keyframes jkl-tertiary-flash-uacknlz {
665
668
  0% {
666
669
  opacity: 0.5;
667
670
  scale: 1;
@@ -686,15 +689,15 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
686
689
  animation: 2500ms linear infinite;
687
690
  }
688
691
  .jkl-loader__dot--left {
689
- animation-name: jkl-loader-left-spin-uydibip;
692
+ animation-name: jkl-loader-left-spin-uacknmz;
690
693
  margin-right: 1.71em;
691
694
  }
692
695
  .jkl-loader__dot--middle {
693
- animation-name: jkl-loader-middle-spin-uydibjj;
696
+ animation-name: jkl-loader-middle-spin-uacknnv;
694
697
  margin-right: 1.9em;
695
698
  }
696
699
  .jkl-loader__dot--right {
697
- animation-name: jkl-loader-right-spin-uydibk5;
700
+ animation-name: jkl-loader-right-spin-uacknoe;
698
701
  }
699
702
  @media screen and (forced-colors: active) {
700
703
  .jkl-loader__dot {
@@ -722,7 +725,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
722
725
  margin-right: 0.3em;
723
726
  }
724
727
 
725
- @keyframes jkl-loader-left-spin-uydibip {
728
+ @keyframes jkl-loader-left-spin-uacknmz {
726
729
  0% {
727
730
  transform: rotate(0) scale(0);
728
731
  }
@@ -736,7 +739,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
736
739
  transform: rotate(180deg) scale(0);
737
740
  }
738
741
  }
739
- @keyframes jkl-loader-middle-spin-uydibjj {
742
+ @keyframes jkl-loader-middle-spin-uacknnv {
740
743
  0% {
741
744
  transform: rotate(20deg) scale(0);
742
745
  }
@@ -753,7 +756,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
753
756
  transform: rotate(200deg) scale(0);
754
757
  }
755
758
  }
756
- @keyframes jkl-loader-right-spin-uydibk5 {
759
+ @keyframes jkl-loader-right-spin-uacknoe {
757
760
  0% {
758
761
  transform: rotate(40deg) scale(0);
759
762
  }
@@ -801,7 +804,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
801
804
  bottom: 0;
802
805
  width: 12.5rem;
803
806
  background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
804
- animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uydibkv;
807
+ animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uacknon;
805
808
  }
806
809
  @media (width >= 0) and (max-width: 679px) {
807
810
  .jkl-skeleton-animation {
@@ -832,7 +835,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
832
835
  @media screen and (forced-colors: active) {
833
836
  .jkl-skeleton-element {
834
837
  border: 1px solid CanvasText;
835
- animation: 2s ease infinite jkl-blink-uydiblj;
838
+ animation: 2s ease infinite jkl-blink-uacknot;
836
839
  }
837
840
  }
838
841
 
@@ -888,11 +891,11 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
888
891
  }
889
892
  @media screen and (forced-colors: active) {
890
893
  .jkl-skeleton-table {
891
- animation: 2s ease-in-out infinite jkl-blink-uydiblj;
894
+ animation: 2s ease-in-out infinite jkl-blink-uacknot;
892
895
  }
893
896
  }
894
897
 
895
- @keyframes jkl-sweep-uydibkv {
898
+ @keyframes jkl-sweep-uacknon {
896
899
  0% {
897
900
  transform: translateX(calc(0vw - 200px));
898
901
  }
@@ -900,7 +903,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
900
903
  transform: translateX(calc(100vw + 400px));
901
904
  }
902
905
  }
903
- @keyframes jkl-blink-uydiblj {
906
+ @keyframes jkl-blink-uacknot {
904
907
  0% {
905
908
  opacity: 1;
906
909
  }
@@ -1465,7 +1468,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
1465
1468
  --jkl-checkbox-line-height: 1.5rem;
1466
1469
  }
1467
1470
 
1468
- @keyframes jkl-checkbox-checked-uydibm7 {
1471
+ @keyframes jkl-checkbox-checked-uacknpq {
1469
1472
  0% {
1470
1473
  width: 0;
1471
1474
  height: 0;
@@ -1479,7 +1482,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
1479
1482
  height: 58%;
1480
1483
  }
1481
1484
  }
1482
- @keyframes jkl-checkbox-indeterminate-uydibn6 {
1485
+ @keyframes jkl-checkbox-indeterminate-uacknqn {
1483
1486
  0% {
1484
1487
  width: 0;
1485
1488
  }
@@ -1507,11 +1510,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
1507
1510
  top: -6px;
1508
1511
  }
1509
1512
  .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
1510
- animation: jkl-checkbox-checked-uydibm7 150ms ease-in-out forwards;
1513
+ animation: jkl-checkbox-checked-uacknpq 150ms ease-in-out forwards;
1511
1514
  opacity: 1;
1512
1515
  }
1513
1516
  .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
1514
- animation: jkl-checkbox-indeterminate-uydibn6 150ms ease-in-out forwards;
1517
+ animation: jkl-checkbox-indeterminate-uacknqn 150ms ease-in-out forwards;
1515
1518
  opacity: 1;
1516
1519
  }
1517
1520
  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
@@ -2037,7 +2040,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2037
2040
  --color: var(--jkl-color-text-default);
2038
2041
  }
2039
2042
  .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 {
2040
- animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uydibnr forwards;
2043
+ animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uacknr9 forwards;
2041
2044
  }
2042
2045
  .jkl-form-support-label--sr-only {
2043
2046
  border: 0 !important;
@@ -2112,7 +2115,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2112
2115
  white-space: nowrap !important; /* 3 */
2113
2116
  }
2114
2117
 
2115
- @keyframes jkl-support-icon-entrance-uydibnr {
2118
+ @keyframes jkl-support-icon-entrance-uacknr9 {
2116
2119
  0% {
2117
2120
  margin-right: 0;
2118
2121
  opacity: 0;
@@ -3536,7 +3539,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
3536
3539
  padding: 1rem 0 2.5rem 0;
3537
3540
  }
3538
3541
 
3539
- @keyframes jkl-show-uydibod {
3542
+ @keyframes jkl-show-uacknrz {
3540
3543
  from {
3541
3544
  transform: translate3d(0, 0.5rem, 0);
3542
3545
  opacity: 0;
@@ -3571,7 +3574,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
3571
3574
  }
3572
3575
  }
3573
3576
  .jkl-feedback__fade-in {
3574
- animation: jkl-show-uydibod 0.25s ease-out;
3577
+ animation: jkl-show-uacknrz 0.25s ease-out;
3575
3578
  }
3576
3579
 
3577
3580
  .jkl-feedback-smileys {
@@ -3806,7 +3809,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3806
3809
  --background-color: var(--jkl-color-background-alert-success);
3807
3810
  }
3808
3811
  .jkl-message--dismissed {
3809
- animation: jkl-dismiss-uydiboe 400ms ease-in-out forwards;
3812
+ animation: jkl-dismiss-uacknsw 400ms ease-in-out forwards;
3810
3813
  transition: visibility 0ms 400ms;
3811
3814
  visibility: hidden;
3812
3815
  }
@@ -3826,7 +3829,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3826
3829
  }
3827
3830
  }
3828
3831
 
3829
- @keyframes jkl-dismiss-uydiboe {
3832
+ @keyframes jkl-dismiss-uacknsw {
3830
3833
  from {
3831
3834
  opacity: 1;
3832
3835
  transform: translate3d(0, 0, 0);
@@ -3882,7 +3885,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3882
3885
  --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
3883
3886
  }
3884
3887
 
3885
- @keyframes jkl-dot-in-uydibp3 {
3888
+ @keyframes jkl-dot-in-uackntq {
3886
3889
  0% {
3887
3890
  transform: scale(0.8);
3888
3891
  }
@@ -3925,7 +3928,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3925
3928
  }
3926
3929
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
3927
3930
  --dot-color: var(--jkl-color-border-action);
3928
- animation: jkl-dot-in-uydibp3 150ms ease;
3931
+ animation: jkl-dot-in-uackntq 150ms ease;
3929
3932
  }
3930
3933
  @media screen and (forced-colors: active) {
3931
3934
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -4075,7 +4078,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4075
4078
  --background-color: var(--jkl-color-background-container-high);
4076
4079
  }
4077
4080
 
4078
- @keyframes jkl-dot-in-uydibpq {
4081
+ @keyframes jkl-dot-in-uackntr {
4079
4082
  0% {
4080
4083
  transform: scale(0.8);
4081
4084
  }
@@ -4123,7 +4126,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4123
4126
  }
4124
4127
  }
4125
4128
  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
4126
- animation: jkl-dot-in-uydibpq 150ms ease;
4129
+ animation: jkl-dot-in-uackntr 150ms ease;
4127
4130
  }
4128
4131
  .jkl-radio-panel:has(:checked) {
4129
4132
  --radio-dot-color: var(--jkl-color-border-action);
@@ -4135,7 +4138,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4135
4138
  --radio-dot-color: var(--jkl-color-text-on-alert);
4136
4139
  }
4137
4140
 
4138
- @keyframes jkl-checkbox-checked-uydibqb {
4141
+ @keyframes jkl-checkbox-checked-uacknub {
4139
4142
  0% {
4140
4143
  width: 0;
4141
4144
  height: 0;
@@ -4198,7 +4201,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4198
4201
  }
4199
4202
  }
4200
4203
  .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
4201
- animation: jkl-checkbox-checked-uydibqb 150ms ease-in-out forwards;
4204
+ animation: jkl-checkbox-checked-uacknub 150ms ease-in-out forwards;
4202
4205
  opacity: 1;
4203
4206
  }
4204
4207
  .jkl-checkbox-panel:has([aria-invalid=true]) {
@@ -4962,11 +4965,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4962
4965
  }
4963
4966
 
4964
4967
  .jkl-countdown__tracker {
4965
- animation: jkl-downcount-uydibr9 var(--duration) linear forwards;
4968
+ animation: jkl-downcount-uacknuk var(--duration) linear forwards;
4966
4969
  animation-play-state: var(--play-state, running);
4967
4970
  }
4968
4971
 
4969
- @keyframes jkl-downcount-uydibr9 {
4972
+ @keyframes jkl-downcount-uacknuk {
4970
4973
  from {
4971
4974
  width: 100%;
4972
4975
  }
@@ -5165,7 +5168,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
5165
5168
  margin-bottom: 0;
5166
5169
  }
5167
5170
  .jkl-system-message--dismissed {
5168
- animation: jkl-dismiss-uydibrn 400ms ease-in forwards;
5171
+ animation: jkl-dismiss-uacknur 400ms ease-in forwards;
5169
5172
  transition: visibility 0ms 400ms;
5170
5173
  visibility: hidden;
5171
5174
  }
@@ -5197,7 +5200,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
5197
5200
  }
5198
5201
  }
5199
5202
 
5200
- @keyframes jkl-dismiss-uydibrn {
5203
+ @keyframes jkl-dismiss-uacknur {
5201
5204
  from {
5202
5205
  opacity: 1;
5203
5206
  transform: translate3d(0, 0, 0);
@@ -6072,14 +6075,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6072
6075
 
6073
6076
  .jkl-toast[data-animation=entering],
6074
6077
  .jkl-toast[data-animation=queued] {
6075
- animation: jkl-entering-uydibsi 200ms ease-out forwards;
6078
+ animation: jkl-entering-uacknuu 200ms ease-out forwards;
6076
6079
  }
6077
6080
 
6078
6081
  .jkl-toast[data-animation=exiting] {
6079
- animation: jkl-exiting-uydibt8 150ms ease-in forwards;
6082
+ animation: jkl-exiting-uacknv6 150ms ease-in forwards;
6080
6083
  }
6081
6084
 
6082
- @keyframes jkl-entering-uydibsi {
6085
+ @keyframes jkl-entering-uacknuu {
6083
6086
  from {
6084
6087
  opacity: 0;
6085
6088
  transform: translate3d(0, 50%, 0);
@@ -6089,7 +6092,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6089
6092
  transform: translate3d(0, 0, 0);
6090
6093
  }
6091
6094
  }
6092
- @keyframes jkl-exiting-uydibt8 {
6095
+ @keyframes jkl-exiting-uacknv6 {
6093
6096
  from {
6094
6097
  opacity: 1;
6095
6098
  transform: translate3d(0, 0, 0);