@asante-org/atlascopco-vt-litesitegenerator 3.6.19 → 3.6.21

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 (37) hide show
  1. package/dist/index.esm.js +359 -545
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.esm.scss +295 -552
  4. package/dist/index.js +361 -543
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.scss +295 -552
  7. package/dist/lsg-clientlib.css +2106 -0
  8. package/dist/lsg-clientlib.css.map +1 -0
  9. package/dist/lsg-clientlib.js +524 -0
  10. package/dist/lsg-clientlib.js.map +1 -0
  11. package/dist/src/components/lsg/LsgCarousel/LsgCarousel.d.ts +12 -33
  12. package/dist/src/components/lsg/LsgCarousel/LsgCarousel.stories.d.ts +3 -18
  13. package/dist/src/components/lsg/LsgCarousel/LsgCarouselController.d.ts +1 -46
  14. package/dist/src/components/lsg/LsgCarousel/bootLsgCarousel.d.ts +9 -2
  15. package/dist/src/components/lsg/LsgTable/LsgTable.d.ts +19 -0
  16. package/dist/src/components/lsg/LsgTable/LsgTable.stories.d.ts +8 -0
  17. package/dist/src/components/lsg/LsgTable/index.d.ts +2 -0
  18. package/dist/src/components/lsg/index.d.ts +2 -0
  19. package/dist/src/index.d.ts +5 -5
  20. package/dist/src/themes/createThemeComponents.d.ts +1 -0
  21. package/dist/src/themes/theme-1/components.d.ts +2 -1
  22. package/dist/src/themes/theme-2/components.d.ts +2 -1
  23. package/dist/src/themes/theme-3/components.d.ts +2 -1
  24. package/dist/themes/theme-1.css +645 -298
  25. package/dist/themes/theme-1.css.map +1 -1
  26. package/dist/themes/theme-1.js +49 -217
  27. package/dist/themes/theme-1.js.map +1 -1
  28. package/dist/themes/theme-2.css +362 -479
  29. package/dist/themes/theme-2.css.map +1 -1
  30. package/dist/themes/theme-2.js +49 -217
  31. package/dist/themes/theme-2.js.map +1 -1
  32. package/dist/themes/theme-3.css +268 -495
  33. package/dist/themes/theme-3.css.map +1 -1
  34. package/dist/themes/theme-3.js +49 -217
  35. package/dist/themes/theme-3.js.map +1 -1
  36. package/dist/tsconfig.tsbuildinfo +1 -1
  37. package/package.json +1 -1
@@ -573,33 +573,19 @@
573
573
  }
574
574
 
575
575
  .lsg-carousel {
576
- --lsg-carousel-bg: var(--lsg-carousel-background, var(--lsg-color-primary));
577
- --lsg-carousel-color: var(--lsg-carousel-foreground, var(--lsg-color-white));
578
- --lsg-carousel-accent: var(--lsg-carousel-color);
579
- --lsg-carousel-shell-max: 1440px;
580
- --lsg-carousel-pad-inline: clamp(16px, 13.2vw, 190px);
581
- --lsg-carousel-pad-block: 64px;
582
- --lsg-carousel-column-gap: clamp(32px, 5.2vw, 75px);
583
- --lsg-carousel-row-gap: 32px;
584
- --lsg-carousel-gutter: max(
585
- var(--lsg-carousel-pad-inline),
586
- calc((100% - var(--lsg-carousel-shell-max)) / 2 + var(--lsg-carousel-pad-inline))
587
- );
588
- --lsg-carousel-content-width: clamp(280px, 33.3vw, 480px);
576
+ --lsg-carousel-bg: var(--lsg-color-primary);
577
+ --lsg-carousel-color: var(--lsg-color-white);
589
578
  --lsg-carousel-gap: 18px;
590
579
  --lsg-carousel-slide-gap: var(--lsg-carousel-gap);
591
- --lsg-carousel-card-width: 380px;
592
- --lsg-carousel-card-height: 410px;
593
- --lsg-carousel-slide-basis: var(--lsg-carousel-card-width);
594
- --lsg-carousel-media-height: var(--lsg-carousel-card-height);
580
+ --lsg-carousel-slide-basis: 50%;
581
+ --lsg-carousel-media-height: 440px;
595
582
  --lsg-carousel-media-radius: var(--lsg-theme-radius, 0px);
596
- --lsg-carousel-cards-max: 988px;
597
583
  --lsg-carousel-arrow-size: 40px;
598
- --lsg-carousel-arrow-offset: 24px;
599
584
  --lsg-carousel-dot-size: 8px;
600
585
  --lsg-carousel-dot-gap: 6px;
586
+ --lsg-carousel-content-width: 510px;
601
587
  width: 100%;
602
- overflow-x: clip;
588
+ overflow: hidden;
603
589
  background: var(--lsg-carousel-bg);
604
590
  color: var(--lsg-carousel-color);
605
591
  font-family: var(--lsg-font-family-primary, inherit);
@@ -608,51 +594,35 @@
608
594
  .lsg-carousel__shell {
609
595
  box-sizing: border-box;
610
596
  display: grid;
611
- grid-template-columns: [full-start] var(--lsg-carousel-gutter) minmax(0, var(--lsg-carousel-content-width)) minmax(0, 1fr) [full-end];
612
- grid-template-areas: "gutter content media";
597
+ grid-template-columns: minmax(0, var(--lsg-carousel-content-width)) minmax(0, 1fr);
598
+ grid-template-areas: "content media";
599
+ gap: clamp(32px, 5vw, 80px);
613
600
  width: 100%;
601
+ max-width: 1440px;
614
602
  min-height: 625px;
615
- padding-block: var(--lsg-carousel-pad-block);
603
+ margin: 0 auto;
604
+ padding: 64px clamp(32px, 8vw, 128px);
616
605
  }
617
606
 
618
607
  .lsg-carousel--media-left .lsg-carousel__shell {
619
- grid-template-columns: [full-start] minmax(0, 1fr) minmax(0, var(--lsg-carousel-content-width)) var(--lsg-carousel-gutter) [full-end];
620
- grid-template-areas: "media content gutter";
608
+ grid-template-columns: minmax(0, 1fr) minmax(0, var(--lsg-carousel-content-width));
609
+ grid-template-areas: "media content";
621
610
  }
622
611
 
623
612
  .lsg-carousel--full-width .lsg-carousel__shell {
624
- grid-template-columns: [full-start] var(--lsg-carousel-gutter) minmax(0, 1fr) var(--lsg-carousel-gutter) [full-end];
625
- grid-template-areas: ". content ." "media media media";
626
- row-gap: var(--lsg-carousel-row-gap);
613
+ grid-template-columns: minmax(0, 1fr);
614
+ grid-template-areas: "content" "media";
627
615
  min-height: 0;
628
616
  }
629
617
 
630
- .lsg-carousel__content {
631
- grid-area: content;
632
- min-width: 0;
633
- align-self: center;
634
- overflow: hidden;
635
- padding-inline-end: var(--lsg-carousel-column-gap);
636
- direction: ltr;
637
- }
638
-
639
- .lsg-carousel--media-left .lsg-carousel__content {
640
- padding-inline-start: var(--lsg-carousel-column-gap);
641
- padding-inline-end: 0;
642
- }
643
-
644
- .lsg-carousel--full-width .lsg-carousel__content {
645
- padding-inline: 0;
646
- }
647
-
648
- .lsg-carousel__content-track {
649
- display: flex;
650
- gap: 0 !important;
618
+ :root[data-lsg-theme=theme-1] .lsg-carousel--full-width,
619
+ .lsg-themed-component--theme-1 .lsg-carousel--full-width {
620
+ --lsg-carousel-slide-gap: 16px;
651
621
  }
652
622
 
653
- .lsg-carousel__content-slide {
623
+ .lsg-carousel__content {
624
+ grid-area: content;
654
625
  min-width: 0;
655
- flex: 0 0 100%;
656
626
  display: flex;
657
627
  flex-direction: column;
658
628
  align-items: flex-start;
@@ -682,6 +652,7 @@
682
652
 
683
653
  .lsg-carousel__heading {
684
654
  margin: 0;
655
+ color: inherit;
685
656
  font-family: var(--lsg-type-heading-family, var(--lsg-font-family-primary, inherit));
686
657
  font-size: var(--lsg-size-H1, 45px);
687
658
  font-weight: var(--lsg-font-weight-semibold, 600);
@@ -690,6 +661,7 @@
690
661
 
691
662
  .lsg-carousel__body {
692
663
  margin: 0;
664
+ color: inherit;
693
665
  font-size: var(--lsg-size-body, 18px);
694
666
  font-weight: var(--lsg-font-weight-regular, 400);
695
667
  line-height: 1.5;
@@ -701,53 +673,35 @@
701
673
  margin-top: 8px;
702
674
  }
703
675
 
704
- .lsg-carousel__content-slide > .cmp-lsg-title:first-child:has(+ .cmp-lsg-title) {
705
- font-size: var(--lsg-type-pretitle-desktop-size, 18px);
706
- font-weight: var(--lsg-font-weight-semibold, 600);
707
- line-height: var(--lsg-type-pretitle-desktop-line-height, 1.2);
708
- text-transform: uppercase;
709
- }
710
-
711
- .lsg-carousel__content-slide > .cmp-lsg-title:nth-child(2),
712
- .lsg-carousel__content-slide > .cmp-lsg-title:first-child:not(:has(+ .cmp-lsg-title)) {
713
- font-family: var(--lsg-type-heading-family, var(--lsg-font-family-primary, inherit));
714
- font-size: var(--lsg-size-H1, 45px);
715
- font-weight: var(--lsg-font-weight-semibold, 600);
716
- line-height: 1.1;
717
- }
718
-
719
- .lsg-carousel__content-slide > .cmp-lsg-text {
720
- font-size: var(--lsg-size-body, 18px);
721
- font-weight: var(--lsg-font-weight-regular, 400);
722
- line-height: 1.5;
676
+ .lsg-carousel__pre-title .cmp-title__element {
677
+ margin: 0;
678
+ color: inherit;
679
+ font: inherit;
680
+ line-height: inherit;
681
+ text-transform: inherit;
723
682
  }
724
683
 
725
- .lsg-carousel__pre-title .cmp-title__element,
726
- .lsg-carousel__heading .cmp-title__element,
727
- .lsg-carousel__content-slide > .cmp-lsg-title .cmp-title__element {
684
+ .lsg-carousel__heading .cmp-title__element {
728
685
  margin: 0;
686
+ color: inherit;
729
687
  font: inherit;
730
688
  line-height: inherit;
731
- text-transform: inherit;
732
689
  word-break: inherit;
733
690
  }
734
691
 
735
692
  .lsg-carousel__body .cmp-text,
736
- .lsg-carousel__body .cmp-text p,
737
- .lsg-carousel__content-slide > .cmp-lsg-text .cmp-text,
738
- .lsg-carousel__content-slide > .cmp-lsg-text .cmp-text p {
693
+ .lsg-carousel__body .cmp-text p {
739
694
  margin: 0;
695
+ color: inherit;
740
696
  font: inherit;
741
697
  line-height: inherit;
742
698
  }
743
699
 
744
- .lsg-carousel__body .cmp-text p,
745
- .lsg-carousel__content-slide > .cmp-lsg-text .cmp-text p {
700
+ .lsg-carousel__body .cmp-text p {
746
701
  word-break: break-word;
747
702
  }
748
703
 
749
- .lsg-carousel__actions .lsg-button-container,
750
- .lsg-carousel__content-slide > .cmp-lsg-button .lsg-button-container {
704
+ .lsg-carousel__actions .lsg-button-container {
751
705
  display: flex;
752
706
  flex: 0 0 auto;
753
707
  width: auto;
@@ -755,8 +709,7 @@
755
709
  padding: 0;
756
710
  }
757
711
 
758
- .lsg-carousel__actions .lsg-button,
759
- .lsg-carousel__content-slide > .cmp-lsg-button .lsg-button {
712
+ .lsg-carousel__actions .lsg-button {
760
713
  flex: 0 0 auto;
761
714
  }
762
715
 
@@ -872,25 +825,16 @@
872
825
  line-height: 1.4;
873
826
  }
874
827
 
875
- .lsg-carousel__controls,
876
828
  .lsg-carousel__navigation {
877
829
  display: flex;
878
830
  align-items: center;
879
- justify-content: space-between;
831
+ justify-content: center;
880
832
  gap: 16px;
881
- width: var(--lsg-carousel-slide-basis);
882
833
  min-height: var(--lsg-carousel-arrow-size);
883
834
  }
884
835
 
885
- .lsg-carousel--media-left .lsg-carousel__controls,
886
- .lsg-carousel--media-left .lsg-carousel__navigation {
887
- flex-direction: row-reverse;
888
- margin-inline-start: auto;
889
- }
890
-
891
- .lsg-carousel__nav {
892
- display: inline-flex;
893
- overflow: hidden;
836
+ .lsg-carousel__navigation > * {
837
+ grid-row: 1;
894
838
  }
895
839
 
896
840
  .lsg-carousel__arrow {
@@ -902,9 +846,9 @@
902
846
  flex: 0 0 var(--lsg-carousel-arrow-size);
903
847
  padding: 0;
904
848
  border: 0;
905
- border-radius: 0;
906
- background: var(--lsg-carousel-accent);
907
- color: var(--lsg-carousel-bg);
849
+ border-radius: var(--lsg-theme-radius, 0px);
850
+ background: transparent;
851
+ color: inherit;
908
852
  cursor: pointer;
909
853
  }
910
854
  .lsg-carousel__arrow:focus-visible {
@@ -912,20 +856,6 @@
912
856
  outline-offset: 2px;
913
857
  }
914
858
 
915
- .lsg-carousel__arrow--prev {
916
- border-radius: var(--lsg-theme-radius) 0 0 var(--lsg-theme-radius);
917
- }
918
-
919
- .lsg-carousel__arrow--next {
920
- border-radius: 0 var(--lsg-theme-radius) var(--lsg-theme-radius) 0;
921
- }
922
-
923
- .lsg-carousel__arrow--at-start,
924
- .lsg-carousel__arrow--at-end {
925
- background: color-mix(in srgb, var(--lsg-carousel-accent) 22%, transparent);
926
- color: color-mix(in srgb, var(--lsg-carousel-color) 60%, transparent);
927
- }
928
-
929
859
  .lsg-carousel__arrow-icon {
930
860
  display: block;
931
861
  width: 23px;
@@ -975,125 +905,12 @@
975
905
  outline-offset: 2px;
976
906
  }
977
907
 
978
- .lsg-carousel--full-width .lsg-carousel__media-column {
979
- display: grid;
980
- align-items: center;
981
- grid-template-columns: minmax(calc(var(--lsg-carousel-arrow-size) + var(--lsg-carousel-arrow-offset)), var(--lsg-carousel-gutter)) minmax(0, 1fr) minmax(calc(var(--lsg-carousel-arrow-size) + var(--lsg-carousel-arrow-offset)), var(--lsg-carousel-gutter));
982
- gap: 0;
983
- }
984
-
985
- .lsg-carousel--full-width .lsg-carousel__controls,
986
- .lsg-carousel--full-width .lsg-carousel__navigation,
987
- .lsg-carousel--full-width .lsg-carousel__nav {
988
- display: contents;
989
- }
990
-
991
- .lsg-carousel--full-width .lsg-carousel__viewport {
992
- grid-area: 1/2;
993
- width: 100%;
994
- max-width: var(--lsg-carousel-cards-max);
995
- justify-self: center;
996
- }
997
-
998
- .lsg-carousel--full-width .lsg-carousel__arrow {
999
- border-radius: 50%;
1000
- }
1001
-
1002
- .lsg-carousel--full-width .lsg-carousel__arrow--prev {
1003
- grid-area: 1/1;
1004
- justify-self: end;
1005
- }
1006
-
1007
- .lsg-carousel--full-width .lsg-carousel__arrow--next {
1008
- grid-area: 1/3;
1009
- justify-self: start;
1010
- }
1011
-
1012
- .lsg-carousel--full-width .lsg-carousel__pagination {
1013
- grid-area: 2/1/2/-1;
1014
- justify-self: center;
1015
- margin-top: 24px;
1016
- }
1017
-
1018
- .lsg-carousel--bg-white {
1019
- --lsg-carousel-background: var(--lsg-color-white);
1020
- --lsg-carousel-foreground: var(--lsg-color-dark);
1021
- }
1022
-
1023
- .lsg-carousel--bg-light {
1024
- --lsg-carousel-background: var(--lsg-color-light);
1025
- --lsg-carousel-foreground: var(--lsg-color-dark);
1026
- }
1027
-
1028
- .lsg-carousel--bg-primary {
1029
- --lsg-carousel-background: var(--lsg-color-primary);
1030
- --lsg-carousel-foreground: var(--lsg-color-white);
1031
- }
1032
-
1033
- .lsg-carousel--bg-secondary {
1034
- --lsg-carousel-background: var(--lsg-color-secondary);
1035
- --lsg-carousel-foreground: var(--lsg-color-white);
1036
- }
1037
-
1038
- .lsg-carousel--bg-tertiary {
1039
- --lsg-carousel-background: var(--lsg-color-tertiary);
1040
- --lsg-carousel-foreground: var(--lsg-color-white);
1041
- }
1042
-
1043
- .lsg-carousel--bg-dark {
1044
- --lsg-carousel-background: var(--lsg-color-dark);
1045
- --lsg-carousel-foreground: var(--lsg-color-white);
1046
- }
1047
-
1048
- .lsg-carousel--bg-black {
1049
- --lsg-carousel-background: var(--lsg-color-black);
1050
- --lsg-carousel-foreground: var(--lsg-color-white);
1051
- }
1052
-
1053
- .lsg-carousel--author {
1054
- padding: var(--lsg-carousel-pad-block) var(--lsg-carousel-pad-inline);
1055
- }
1056
- .lsg-carousel--author .lsg-carousel__author-hint {
1057
- display: flex;
1058
- flex-direction: column;
1059
- gap: 4px;
1060
- margin-bottom: 12px;
1061
- padding: 8px 12px;
1062
- border: 1px dashed color-mix(in srgb, var(--lsg-carousel-color) 40%, transparent);
1063
- font-size: 14px;
1064
- line-height: 1.4;
1065
- }
1066
- .lsg-carousel--author .lsg-carousel__author-hint strong {
1067
- font-weight: var(--lsg-font-weight-semibold, 600);
1068
- }
1069
- .lsg-carousel--author .lsg-carousel__author-item {
1070
- display: grid;
1071
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
1072
- gap: 24px;
1073
- align-items: start;
1074
- margin-bottom: 24px;
1075
- padding: 16px;
1076
- border: 1px solid color-mix(in srgb, var(--lsg-carousel-color) 25%, transparent);
1077
- }
1078
- .lsg-carousel--author .lsg-carousel__author-context .layout-container-spacing-wrapper,
1079
- .lsg-carousel--author .lsg-carousel__author-media .layout-container-spacing-wrapper,
1080
- .lsg-carousel--author .lsg-carousel__author-context .parsys,
1081
- .lsg-carousel--author .lsg-carousel__author-media .parsys {
1082
- min-height: 96px;
1083
- }
1084
- .lsg-carousel--author .lsg-carousel__author-media img,
1085
- .lsg-carousel--author .lsg-carousel__author-media video {
1086
- max-width: 100%;
1087
- height: auto;
1088
- }
1089
-
1090
908
  @media (max-width: 767px) {
1091
909
  .lsg-carousel {
1092
- --lsg-carousel-pad-inline: 16px;
1093
- --lsg-carousel-gap: 21px;
1094
- --lsg-carousel-card-width: 293px;
1095
- --lsg-carousel-card-height: 393px;
1096
- --lsg-carousel-dot-size: 8px;
910
+ --lsg-carousel-gap: 18px;
911
+ --lsg-carousel-slide-basis: 300px;
912
+ --lsg-carousel-media-height: 400px;
913
+ --lsg-carousel-dot-size: 6px;
1097
914
  }
1098
915
  .lsg-carousel__shell,
1099
916
  .lsg-carousel--media-left .lsg-carousel__shell,
@@ -1102,62 +919,33 @@
1102
919
  flex-direction: column;
1103
920
  gap: 24px;
1104
921
  min-height: 0;
1105
- padding: var(--lsg-carousel-pad-block) var(--lsg-carousel-pad-inline);
922
+ padding: 64px 16px;
1106
923
  }
1107
- .lsg-carousel__media-column,
1108
- .lsg-carousel--full-width .lsg-carousel__media-column {
1109
- order: 1;
1110
- display: flex;
1111
- flex-direction: column;
1112
- gap: 16px;
1113
- align-self: stretch;
1114
- margin-inline-end: calc(-1 * var(--lsg-carousel-pad-inline));
924
+ .lsg-carousel__content {
925
+ gap: 24px;
1115
926
  }
1116
- .lsg-carousel__content,
1117
- .lsg-carousel--media-left .lsg-carousel__content,
1118
- .lsg-carousel--full-width .lsg-carousel__content {
1119
- order: 2;
927
+ .lsg-carousel__pre-title {
928
+ font-size: var(--lsg-type-pretitle-mobile-size, 16px);
929
+ line-height: var(--lsg-type-pretitle-mobile-line-height, 1.2);
930
+ }
931
+ .lsg-carousel__heading {
932
+ font-size: var(--lsg-type-h2-mobile-size, 30px);
933
+ }
934
+ .lsg-carousel__media-column {
935
+ width: calc(100% + 16px);
1120
936
  align-self: stretch;
1121
- padding-inline: 0;
1122
937
  }
1123
- .lsg-carousel__viewport,
1124
- .lsg-carousel--media-left .lsg-carousel__viewport {
1125
- direction: ltr;
938
+ .lsg-carousel__viewport {
939
+ overflow: hidden;
1126
940
  }
1127
941
  .lsg-carousel--full-width .lsg-carousel__slide {
1128
942
  flex-basis: var(--lsg-carousel-slide-basis);
1129
943
  }
1130
- .lsg-carousel__controls,
1131
- .lsg-carousel--media-left .lsg-carousel__controls,
1132
- .lsg-carousel--full-width .lsg-carousel__controls,
1133
- .lsg-carousel__navigation,
1134
- .lsg-carousel--media-left .lsg-carousel__navigation,
1135
- .lsg-carousel--full-width .lsg-carousel__navigation {
1136
- display: flex;
1137
- flex-direction: row;
1138
- justify-content: center;
1139
- width: calc(100% - var(--lsg-carousel-pad-inline));
1140
- margin-inline-start: 0;
1141
- }
1142
- .lsg-carousel__nav,
1143
- .lsg-carousel--full-width .lsg-carousel__nav {
1144
- display: none;
944
+ .lsg-carousel__navigation {
945
+ width: calc(100% - 16px);
1145
946
  }
1146
- .lsg-carousel--full-width .lsg-carousel__pagination {
1147
- margin-top: 0;
1148
- }
1149
- .lsg-carousel__pre-title,
1150
- .lsg-carousel__content-slide > .cmp-lsg-title:first-child:has(+ .cmp-lsg-title) {
1151
- font-size: var(--lsg-type-pretitle-mobile-size, 16px);
1152
- line-height: var(--lsg-type-pretitle-mobile-line-height, 1.2);
1153
- }
1154
- .lsg-carousel__heading,
1155
- .lsg-carousel__content-slide > .cmp-lsg-title:nth-child(2),
1156
- .lsg-carousel__content-slide > .cmp-lsg-title:first-child:not(:has(+ .cmp-lsg-title)) {
1157
- font-size: var(--lsg-type-h2-mobile-size, 30px);
1158
- }
1159
- .lsg-carousel--author .lsg-carousel__author-item {
1160
- grid-template-columns: minmax(0, 1fr);
947
+ .lsg-carousel__actions {
948
+ margin-top: 8px;
1161
949
  }
1162
950
  }
1163
951
  .lsg-card,
@@ -3796,6 +3584,90 @@
3796
3584
  display: block;
3797
3585
  }
3798
3586
 
3587
+ .table-focus,
3588
+ .table-focus * {
3589
+ box-sizing: border-box;
3590
+ }
3591
+
3592
+ .table-focus {
3593
+ --lsg-table-background-color: var(--lsg-color-primary);
3594
+ --lsg-table-accent-color: var(--lsg-color-black);
3595
+ width: 100%;
3596
+ max-width: 100%;
3597
+ overflow-x: auto;
3598
+ color: var(--lsg-table-accent-color);
3599
+ font-family: var(--lsg-font-family-primary);
3600
+ }
3601
+ .table-focus.background-color-white {
3602
+ --lsg-table-background-color: var(--lsg-color-white);
3603
+ }
3604
+ .table-focus.accent-color-white {
3605
+ --lsg-table-accent-color: var(--lsg-color-white);
3606
+ }
3607
+ .table-focus.background-color-black {
3608
+ --lsg-table-background-color: var(--lsg-color-black);
3609
+ }
3610
+ .table-focus.accent-color-black {
3611
+ --lsg-table-accent-color: var(--lsg-color-black);
3612
+ }
3613
+ .table-focus.background-color-primary {
3614
+ --lsg-table-background-color: var(--lsg-color-primary);
3615
+ }
3616
+ .table-focus.accent-color-primary {
3617
+ --lsg-table-accent-color: var(--lsg-color-primary);
3618
+ }
3619
+ .table-focus.background-color-secondary {
3620
+ --lsg-table-background-color: var(--lsg-color-secondary);
3621
+ }
3622
+ .table-focus.accent-color-secondary {
3623
+ --lsg-table-accent-color: var(--lsg-color-secondary);
3624
+ }
3625
+ .table-focus.background-color-tertiary {
3626
+ --lsg-table-background-color: var(--lsg-color-tertiary);
3627
+ }
3628
+ .table-focus.accent-color-tertiary {
3629
+ --lsg-table-accent-color: var(--lsg-color-tertiary);
3630
+ }
3631
+ .table-focus.background-color-light {
3632
+ --lsg-table-background-color: var(--lsg-color-light);
3633
+ }
3634
+ .table-focus.accent-color-light {
3635
+ --lsg-table-accent-color: var(--lsg-color-light);
3636
+ }
3637
+ .table-focus.background-color-dark {
3638
+ --lsg-table-background-color: var(--lsg-color-dark);
3639
+ }
3640
+ .table-focus.accent-color-dark {
3641
+ --lsg-table-accent-color: var(--lsg-color-dark);
3642
+ }
3643
+ .table-focus table {
3644
+ width: 100%;
3645
+ margin: 0;
3646
+ border: 0;
3647
+ border-collapse: separate;
3648
+ border-spacing: 0;
3649
+ background: transparent;
3650
+ color: inherit;
3651
+ font: inherit;
3652
+ }
3653
+ .table-focus tr,
3654
+ .table-focus td,
3655
+ .table-focus th {
3656
+ border: 0;
3657
+ }
3658
+ .table-focus td,
3659
+ .table-focus th {
3660
+ vertical-align: middle;
3661
+ word-break: break-word;
3662
+ }
3663
+ .table-focus p {
3664
+ margin: 0;
3665
+ }
3666
+
3667
+ .table-caption {
3668
+ font-family: var(--lsg-font-family-primary);
3669
+ }
3670
+
3799
3671
  .lsg-video {
3800
3672
  position: relative;
3801
3673
  width: 100%;
@@ -7381,225 +7253,6 @@
7381
7253
  }
7382
7254
  }
7383
7255
 
7384
- :root[data-lsg-theme=theme-3] .lsg-carousel,
7385
- .lsg-themed-component--theme-3 .lsg-carousel {
7386
- --lsg-carousel-accent: var(--lsg-carousel-color);
7387
- --lsg-carousel-gap: 22px;
7388
- --lsg-carousel-card-width: 535px;
7389
- --lsg-carousel-card-height: 342px;
7390
- --lsg-carousel-media-radius: var(--lsg-theme-radius, 25px);
7391
- --lsg-carousel-dot-gap: 11px;
7392
- --lsg-carousel-t3-arrow-width: 52px;
7393
- --lsg-carousel-t3-arrow-height: 28px;
7394
- --lsg-carousel-t3-arrow-inset: 60px;
7395
- }
7396
- :root[data-lsg-theme=theme-3] .lsg-carousel__content,
7397
- .lsg-themed-component--theme-3 .lsg-carousel__content {
7398
- align-self: stretch;
7399
- }
7400
- :root[data-lsg-theme=theme-3] .lsg-carousel__content-track,
7401
- .lsg-themed-component--theme-3 .lsg-carousel__content-track {
7402
- height: 100%;
7403
- }
7404
- :root[data-lsg-theme=theme-3] .lsg-carousel__content-slide,
7405
- .lsg-themed-component--theme-3 .lsg-carousel__content-slide {
7406
- height: 100%;
7407
- justify-content: flex-start;
7408
- gap: 18px;
7409
- }
7410
- :root[data-lsg-theme=theme-3] .lsg-carousel__body,
7411
- :root[data-lsg-theme=theme-3] .lsg-carousel__content-slide > .cmp-lsg-text,
7412
- .lsg-themed-component--theme-3 .lsg-carousel__body,
7413
- .lsg-themed-component--theme-3 .lsg-carousel__content-slide > .cmp-lsg-text {
7414
- margin-top: auto;
7415
- }
7416
- :root[data-lsg-theme=theme-3] .lsg-carousel__pre-title-marker,
7417
- .lsg-themed-component--theme-3 .lsg-carousel__pre-title-marker {
7418
- display: block;
7419
- }
7420
- :root[data-lsg-theme=theme-3] .lsg-carousel__pre-title,
7421
- :root[data-lsg-theme=theme-3] .lsg-carousel__content-slide > .cmp-lsg-title:first-child:has(+ .cmp-lsg-title),
7422
- .lsg-themed-component--theme-3 .lsg-carousel__pre-title,
7423
- .lsg-themed-component--theme-3 .lsg-carousel__content-slide > .cmp-lsg-title:first-child:has(+ .cmp-lsg-title) {
7424
- letter-spacing: 0.06em;
7425
- }
7426
- :root[data-lsg-theme=theme-3] .lsg-carousel__content-slide > .cmp-lsg-title:first-child:has(+ .cmp-lsg-title),
7427
- .lsg-themed-component--theme-3 .lsg-carousel__content-slide > .cmp-lsg-title:first-child:has(+ .cmp-lsg-title) {
7428
- display: flex;
7429
- align-items: center;
7430
- gap: 8px;
7431
- }
7432
- :root[data-lsg-theme=theme-3] .lsg-carousel__content-slide > .cmp-lsg-title:first-child:has(+ .cmp-lsg-title)::before,
7433
- .lsg-themed-component--theme-3 .lsg-carousel__content-slide > .cmp-lsg-title:first-child:has(+ .cmp-lsg-title)::before {
7434
- content: "";
7435
- width: 8px;
7436
- height: 8px;
7437
- flex: 0 0 8px;
7438
- border-radius: 50%;
7439
- background: currentColor;
7440
- }
7441
- :root[data-lsg-theme=theme-3] .lsg-carousel__actions,
7442
- :root[data-lsg-theme=theme-3] .lsg-carousel__content-slide > .cmp-lsg-button .lsg-button-container,
7443
- .lsg-themed-component--theme-3 .lsg-carousel__actions,
7444
- .lsg-themed-component--theme-3 .lsg-carousel__content-slide > .cmp-lsg-button .lsg-button-container {
7445
- display: flex;
7446
- align-items: center;
7447
- gap: 12px;
7448
- }
7449
- :root[data-lsg-theme=theme-3] .lsg-carousel__cta.lsg-button,
7450
- :root[data-lsg-theme=theme-3] .lsg-carousel__actions .lsg-button,
7451
- :root[data-lsg-theme=theme-3] .lsg-carousel__content-slide > .cmp-lsg-button .lsg-button,
7452
- .lsg-themed-component--theme-3 .lsg-carousel__cta.lsg-button,
7453
- .lsg-themed-component--theme-3 .lsg-carousel__actions .lsg-button,
7454
- .lsg-themed-component--theme-3 .lsg-carousel__content-slide > .cmp-lsg-button .lsg-button {
7455
- border-radius: var(--lsg-theme-radius, 999px);
7456
- text-transform: uppercase;
7457
- }
7458
- :root[data-lsg-theme=theme-3] .lsg-carousel__actions::after,
7459
- :root[data-lsg-theme=theme-3] .lsg-carousel__content-slide > .cmp-lsg-button .lsg-button-container::after,
7460
- .lsg-themed-component--theme-3 .lsg-carousel__actions::after,
7461
- .lsg-themed-component--theme-3 .lsg-carousel__content-slide > .cmp-lsg-button .lsg-button-container::after {
7462
- content: "";
7463
- flex: 0 0 auto;
7464
- box-sizing: border-box;
7465
- width: 44px;
7466
- height: 44px;
7467
- border: 1px solid currentColor;
7468
- border-radius: 50%;
7469
- background-image: url("data:image/svg+xml,%3Csvg%20width='23'%20height='20'%20viewBox='0%200%2023%2020'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20fill='%23ffffff'%20d='M17.8812%208.71443L11.1762%201.81818L12.9439%200L22.6667%2010.0001L12.9439%2020L11.1762%2018.1818L17.8812%2011.2857H0V8.71443H17.8812Z'/%3E%3C/svg%3E");
7470
- background-repeat: no-repeat;
7471
- background-position: center;
7472
- background-size: 18px 16px;
7473
- }
7474
- :root[data-lsg-theme=theme-3] .lsg-carousel__controls,
7475
- .lsg-themed-component--theme-3 .lsg-carousel__controls {
7476
- order: -1;
7477
- width: 100%;
7478
- justify-content: flex-end;
7479
- padding-inline-end: var(--lsg-carousel-t3-arrow-inset);
7480
- }
7481
- :root[data-lsg-theme=theme-3] .lsg-carousel--media-left .lsg-carousel__controls,
7482
- .lsg-themed-component--theme-3 .lsg-carousel--media-left .lsg-carousel__controls {
7483
- flex-direction: row;
7484
- justify-content: flex-start;
7485
- margin-inline-start: 0;
7486
- padding-inline-start: var(--lsg-carousel-t3-arrow-inset);
7487
- padding-inline-end: 0;
7488
- }
7489
- :root[data-lsg-theme=theme-3] .lsg-carousel__arrow,
7490
- .lsg-themed-component--theme-3 .lsg-carousel__arrow {
7491
- width: var(--lsg-carousel-t3-arrow-width);
7492
- height: var(--lsg-carousel-t3-arrow-height);
7493
- flex-basis: var(--lsg-carousel-t3-arrow-width);
7494
- background: var(--lsg-color-white);
7495
- color: var(--lsg-color-tertiary);
7496
- }
7497
- :root[data-lsg-theme=theme-3] .lsg-carousel__arrow .lsg-carousel__arrow-icon,
7498
- .lsg-themed-component--theme-3 .lsg-carousel__arrow .lsg-carousel__arrow-icon {
7499
- width: 16px;
7500
- height: 14px;
7501
- }
7502
- :root[data-lsg-theme=theme-3] .lsg-carousel__pagination,
7503
- .lsg-themed-component--theme-3 .lsg-carousel__pagination {
7504
- display: none;
7505
- }
7506
- :root[data-lsg-theme=theme-3] .lsg-carousel__media-label,
7507
- .lsg-themed-component--theme-3 .lsg-carousel__media-label {
7508
- top: 14px;
7509
- left: 14px;
7510
- min-height: 26px;
7511
- border: 0;
7512
- border-radius: 999px;
7513
- background: color-mix(in srgb, var(--lsg-color-white) 28%, transparent);
7514
- color: var(--lsg-color-white);
7515
- font-size: 12px;
7516
- font-weight: var(--lsg-font-weight-semibold, 600);
7517
- letter-spacing: 0.06em;
7518
- text-transform: uppercase;
7519
- }
7520
- :root[data-lsg-theme=theme-3] .lsg-carousel--full-width,
7521
- .lsg-themed-component--theme-3 .lsg-carousel--full-width {
7522
- --lsg-carousel-card-height: 342px;
7523
- }
7524
- :root[data-lsg-theme=theme-3] .lsg-carousel--full-width .lsg-carousel__media-column,
7525
- .lsg-themed-component--theme-3 .lsg-carousel--full-width .lsg-carousel__media-column {
7526
- display: flex;
7527
- flex-direction: column;
7528
- }
7529
- :root[data-lsg-theme=theme-3] .lsg-carousel--full-width .lsg-carousel__controls,
7530
- .lsg-themed-component--theme-3 .lsg-carousel--full-width .lsg-carousel__controls {
7531
- display: flex;
7532
- order: -1;
7533
- width: 100%;
7534
- justify-content: flex-end;
7535
- padding-inline: 0;
7536
- }
7537
- :root[data-lsg-theme=theme-3] .lsg-carousel--full-width .lsg-carousel__nav,
7538
- .lsg-themed-component--theme-3 .lsg-carousel--full-width .lsg-carousel__nav {
7539
- display: inline-flex;
7540
- border-radius: 999px;
7541
- overflow: hidden;
7542
- }
7543
- :root[data-lsg-theme=theme-3] .lsg-carousel--full-width .lsg-carousel__viewport,
7544
- .lsg-themed-component--theme-3 .lsg-carousel--full-width .lsg-carousel__viewport {
7545
- grid-area: auto;
7546
- max-width: none;
7547
- justify-self: auto;
7548
- }
7549
- :root[data-lsg-theme=theme-3] .lsg-carousel--full-width .lsg-carousel__arrow,
7550
- .lsg-themed-component--theme-3 .lsg-carousel--full-width .lsg-carousel__arrow {
7551
- border-radius: 0;
7552
- }
7553
- :root[data-lsg-theme=theme-3] .lsg-carousel--full-width .lsg-carousel__content-slide,
7554
- .lsg-themed-component--theme-3 .lsg-carousel--full-width .lsg-carousel__content-slide {
7555
- height: auto;
7556
- justify-content: flex-start;
7557
- }
7558
- :root[data-lsg-theme=theme-3] .lsg-carousel--full-width .lsg-carousel__body,
7559
- :root[data-lsg-theme=theme-3] .lsg-carousel--full-width .lsg-carousel__content-slide > .cmp-lsg-text,
7560
- .lsg-themed-component--theme-3 .lsg-carousel--full-width .lsg-carousel__body,
7561
- .lsg-themed-component--theme-3 .lsg-carousel--full-width .lsg-carousel__content-slide > .cmp-lsg-text {
7562
- margin-top: 0;
7563
- }
7564
- @media (max-width: 767px) {
7565
- :root[data-lsg-theme=theme-3] .lsg-carousel,
7566
- .lsg-themed-component--theme-3 .lsg-carousel {
7567
- --lsg-carousel-card-width: 293px;
7568
- --lsg-carousel-card-height: 210px;
7569
- }
7570
- :root[data-lsg-theme=theme-3] .lsg-carousel__content-track,
7571
- .lsg-themed-component--theme-3 .lsg-carousel__content-track {
7572
- height: auto;
7573
- }
7574
- :root[data-lsg-theme=theme-3] .lsg-carousel__content-slide,
7575
- .lsg-themed-component--theme-3 .lsg-carousel__content-slide {
7576
- height: auto;
7577
- gap: 24px;
7578
- }
7579
- :root[data-lsg-theme=theme-3] .lsg-carousel__body,
7580
- :root[data-lsg-theme=theme-3] .lsg-carousel__content-slide > .cmp-lsg-text,
7581
- .lsg-themed-component--theme-3 .lsg-carousel__body,
7582
- .lsg-themed-component--theme-3 .lsg-carousel__content-slide > .cmp-lsg-text {
7583
- margin-top: 0;
7584
- }
7585
- :root[data-lsg-theme=theme-3] .lsg-carousel__controls,
7586
- :root[data-lsg-theme=theme-3] .lsg-carousel--media-left .lsg-carousel__controls,
7587
- :root[data-lsg-theme=theme-3] .lsg-carousel--full-width .lsg-carousel__controls,
7588
- .lsg-themed-component--theme-3 .lsg-carousel__controls,
7589
- .lsg-themed-component--theme-3 .lsg-carousel--media-left .lsg-carousel__controls,
7590
- .lsg-themed-component--theme-3 .lsg-carousel--full-width .lsg-carousel__controls {
7591
- order: 1;
7592
- justify-content: center;
7593
- padding-inline: 0;
7594
- }
7595
- :root[data-lsg-theme=theme-3] .lsg-carousel__nav,
7596
- :root[data-lsg-theme=theme-3] .lsg-carousel--full-width .lsg-carousel__nav,
7597
- .lsg-themed-component--theme-3 .lsg-carousel__nav,
7598
- .lsg-themed-component--theme-3 .lsg-carousel--full-width .lsg-carousel__nav {
7599
- display: inline-flex;
7600
- }
7601
- }
7602
-
7603
7256
  :root[data-lsg-theme=theme-3] .lsg-hero__controls-wrap,
7604
7257
  .lsg-themed-component--theme-3 .lsg-hero__controls-wrap {
7605
7258
  display: none;
@@ -8857,6 +8510,126 @@
8857
8510
  -webkit-mask-image: none;
8858
8511
  mask-image: none;
8859
8512
  }
8513
+ :root[data-lsg-theme=theme-3] .table-focus,
8514
+ .lsg-themed-component--theme-3 .table-focus {
8515
+ padding: var(--lsg-spacing-size-XS);
8516
+ background: var(--lsg-color-light);
8517
+ border-radius: var(--lsg-theme-radius);
8518
+ }
8519
+ :root[data-lsg-theme=theme-3] .table-focus table,
8520
+ .lsg-themed-component--theme-3 .table-focus table {
8521
+ min-width: 345px;
8522
+ }
8523
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:first-child > td,
8524
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:first-child > th,
8525
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:first-child > td,
8526
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:first-child > th {
8527
+ height: 34px;
8528
+ padding: 10px 8px;
8529
+ background: color-mix(in srgb, var(--lsg-table-background-color) 20%, transparent);
8530
+ color: var(--lsg-table-accent-color);
8531
+ font-size: 12px;
8532
+ font-weight: var(--lsg-font-weight-semibold);
8533
+ line-height: 1.2;
8534
+ text-align: center;
8535
+ }
8536
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:first-child > :first-child,
8537
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:first-child > :first-child {
8538
+ min-width: 160px;
8539
+ padding-right: 14px;
8540
+ padding-left: 14px;
8541
+ border-top-left-radius: var(--lsg-theme-radius);
8542
+ border-bottom-left-radius: var(--lsg-theme-radius);
8543
+ font-size: 14.5px;
8544
+ line-height: 1.6;
8545
+ text-align: left;
8546
+ }
8547
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:first-child > :last-child,
8548
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:first-child > :last-child {
8549
+ border-top-right-radius: var(--lsg-theme-radius);
8550
+ border-bottom-right-radius: var(--lsg-theme-radius);
8551
+ }
8552
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:not(:first-child) > td,
8553
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:not(:first-child) > th,
8554
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:not(:first-child) > td,
8555
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:not(:first-child) > th {
8556
+ height: 34px;
8557
+ padding: 10px 8px;
8558
+ border-bottom: 0.5px solid color-mix(in srgb, var(--lsg-color-black) 50%, transparent);
8559
+ color: var(--lsg-table-accent-color);
8560
+ font-size: 12px;
8561
+ font-weight: var(--lsg-font-weight-regular);
8562
+ line-height: 1.2;
8563
+ text-align: center;
8564
+ }
8565
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:not(:first-child) > :first-child,
8566
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:not(:first-child) > :first-child {
8567
+ width: 160px;
8568
+ min-width: 160px;
8569
+ padding-right: var(--lsg-spacing-size-SM);
8570
+ padding-left: var(--lsg-spacing-size-SM);
8571
+ font-weight: var(--lsg-font-weight-semibold);
8572
+ text-align: left;
8573
+ }
8574
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:last-child > td,
8575
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:last-child > th,
8576
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:last-child > td,
8577
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:last-child > th {
8578
+ border-bottom: 0;
8579
+ }
8580
+ @media (min-width: 768px) {
8581
+ :root[data-lsg-theme=theme-3] .table-focus,
8582
+ .lsg-themed-component--theme-3 .table-focus {
8583
+ padding: var(--lsg-spacing-size-MD) var(--lsg-spacing-size-MD) 0;
8584
+ }
8585
+ :root[data-lsg-theme=theme-3] .table-focus table,
8586
+ .lsg-themed-component--theme-3 .table-focus table {
8587
+ min-width: 800px;
8588
+ }
8589
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:first-child > td,
8590
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:first-child > th,
8591
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:not(:first-child) > td,
8592
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:not(:first-child) > th,
8593
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:first-child > td,
8594
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:first-child > th,
8595
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:not(:first-child) > td,
8596
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:not(:first-child) > th {
8597
+ height: 75px;
8598
+ min-width: 200px;
8599
+ width: auto;
8600
+ padding: var(--lsg-spacing-size-XS) var(--lsg-spacing-size-LG);
8601
+ }
8602
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:first-child > td,
8603
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:first-child > th,
8604
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:first-child > td,
8605
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:first-child > th {
8606
+ font-size: var(--lsg-size-H5);
8607
+ line-height: 1.2;
8608
+ }
8609
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:first-child > :first-child,
8610
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:first-child > :first-child {
8611
+ padding-right: var(--lsg-spacing-size-LG);
8612
+ padding-left: var(--lsg-spacing-size-LG);
8613
+ font-size: var(--lsg-size-H5);
8614
+ line-height: 1.2;
8615
+ }
8616
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:not(:first-child) > td,
8617
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:not(:first-child) > th,
8618
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:not(:first-child) > td,
8619
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:not(:first-child) > th {
8620
+ border-bottom-width: 1px;
8621
+ font-size: var(--lsg-size-body);
8622
+ line-height: 1.5;
8623
+ }
8624
+ :root[data-lsg-theme=theme-3] .table-focus tbody > tr:not(:first-child) > :first-child,
8625
+ .lsg-themed-component--theme-3 .table-focus tbody > tr:not(:first-child) > :first-child {
8626
+ padding-right: var(--lsg-spacing-size-LG);
8627
+ padding-left: var(--lsg-spacing-size-LG);
8628
+ font-size: var(--lsg-size-H6);
8629
+ font-weight: var(--lsg-font-weight-semibold);
8630
+ line-height: 1.2;
8631
+ }
8632
+ }
8860
8633
 
8861
8634
  :root {
8862
8635
  --lsg-color-primary: #1d4ed8;