@asante-org/atlascopco-vt-litesitegenerator 3.0.28 → 3.0.29

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 (12) hide show
  1. package/dist/index.esm.scss +42 -118
  2. package/dist/index.scss +42 -118
  3. package/dist/src/components/lsg/LsgAccordion/LsgAccordion.d.ts +3 -18
  4. package/dist/src/components/lsg/LsgAccordion/LsgAccordion.stories.d.ts +2 -4
  5. package/dist/themes/theme-1.css +134 -105
  6. package/dist/themes/theme-1.css.map +1 -1
  7. package/dist/themes/theme-2.css +133 -103
  8. package/dist/themes/theme-2.css.map +1 -1
  9. package/dist/themes/theme-3.css +133 -116
  10. package/dist/themes/theme-3.css.map +1 -1
  11. package/dist/tsconfig.tsbuildinfo +1 -1
  12. package/package.json +1 -1
package/dist/index.esm.scss CHANGED
@@ -2663,23 +2663,23 @@
2663
2663
  min-width: 0;
2664
2664
  }
2665
2665
  .lsg-accordion__heading,
2666
- .lsg-accordion .cmp-accordion__header {
2666
+ .lsg-accordion > .cmp-accordion__item > .cmp-accordion__header {
2667
2667
  margin: 0;
2668
2668
  padding: 0;
2669
2669
  font: inherit;
2670
2670
  }
2671
2671
  .lsg-accordion__header {
2672
2672
  box-sizing: border-box;
2673
- width: 100%;
2674
2673
  display: flex;
2675
2674
  align-items: center;
2676
2675
  justify-content: space-between;
2676
+ width: 100%;
2677
2677
  min-width: 0;
2678
2678
  margin: 0;
2679
2679
  padding: 0;
2680
+ color: inherit;
2680
2681
  background: transparent;
2681
2682
  border: 0;
2682
- color: inherit;
2683
2683
  font: inherit;
2684
2684
  text-align: left;
2685
2685
  cursor: pointer;
@@ -2703,8 +2703,8 @@
2703
2703
  .lsg-accordion__icon {
2704
2704
  position: relative;
2705
2705
  box-sizing: border-box;
2706
- flex: 0 0 auto;
2707
2706
  display: inline-flex;
2707
+ flex: 0 0 auto;
2708
2708
  align-items: center;
2709
2709
  justify-content: center;
2710
2710
  width: var(--lsg-accordion-icon-size, 20px);
@@ -2716,29 +2716,29 @@
2716
2716
  width: 100%;
2717
2717
  height: 100%;
2718
2718
  overflow: visible;
2719
+ fill: none;
2719
2720
  stroke: currentColor;
2720
- stroke-width: 2;
2721
+ stroke-width: 1.5;
2721
2722
  stroke-linecap: round;
2722
2723
  stroke-linejoin: round;
2723
- fill: none;
2724
2724
  transition: transform 180ms ease;
2725
2725
  }
2726
- .lsg-accordion__icon-ring, .lsg-accordion__icon-arrow-stem {
2726
+ .lsg-accordion__icon-ring, .lsg-accordion__icon-arrow {
2727
2727
  display: none;
2728
2728
  }
2729
- .lsg-accordion--icon-plus .lsg-accordion__icon-chevron, .lsg-accordion--icon-plus .lsg-accordion__icon-arrow-stem {
2729
+ .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-vertical, .lsg-accordion__header.cmp-accordion__button--expanded .lsg-accordion__icon-plus-vertical {
2730
2730
  display: none;
2731
2731
  }
2732
- .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-vertical, .lsg-accordion--icon-chevron .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-chevron .lsg-accordion__icon-plus-vertical {
2732
+ .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-vertical, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-vertical {
2733
2733
  display: none;
2734
2734
  }
2735
- .lsg-accordion__icon--open .lsg-accordion__icon-plus-vertical, .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-vertical, .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-line {
2736
- display: none;
2735
+ .lsg-accordion--icon-arrow .lsg-accordion__icon-arrow, .lsg-accordion--icon-arrow .lsg-accordion__icon-arrow {
2736
+ display: block;
2737
2737
  }
2738
- .lsg-accordion--icon-arrow .lsg-accordion__icon:not(.lsg-accordion__icon--open) .lsg-accordion__icon-svg, .lsg-accordion--icon-chevron .lsg-accordion__icon:not(.lsg-accordion__icon--open) .lsg-accordion__icon-svg, .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg, .lsg-accordion--icon-chevron .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg {
2738
+ .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg, .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg {
2739
2739
  transform: rotate(180deg);
2740
2740
  }
2741
- .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg, .lsg-accordion--icon-chevron .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg {
2741
+ .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg, .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg {
2742
2742
  transform: none;
2743
2743
  }
2744
2744
  .lsg-accordion__panel {
@@ -2748,7 +2748,7 @@
2748
2748
  .lsg-accordion__panel--open, .lsg-accordion__panel.cmp-accordion__panel--expanded {
2749
2749
  display: block;
2750
2750
  }
2751
- .lsg-accordion__panel[hidden], .lsg-accordion__panel.cmp-accordion__panel--hidden {
2751
+ .lsg-accordion__panel.cmp-accordion__panel--hidden, .lsg-accordion__panel[hidden] {
2752
2752
  display: none;
2753
2753
  }
2754
2754
  .lsg-accordion__content {
@@ -2774,61 +2774,23 @@
2774
2774
  }
2775
2775
  .lsg-accordion__content img {
2776
2776
  display: block;
2777
- width: 100%;
2778
2777
  max-width: 100%;
2779
2778
  height: auto;
2780
2779
  }
2781
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon {
2782
- transition: transform 180ms ease;
2783
- }
2784
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon .lsg-accordion__icon-svg, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon .lsg-accordion__icon-svg {
2785
- visibility: hidden;
2786
- }
2787
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon::before, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon::before {
2788
- content: "";
2789
- position: absolute;
2790
- left: 50%;
2791
- top: 20%;
2792
- width: 2px;
2793
- height: 60%;
2794
- border-radius: 999px;
2795
- background: currentColor;
2796
- transform: translateX(-50%);
2797
- }
2798
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon::after, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon::after {
2799
- content: "";
2800
- position: absolute;
2801
- left: 50%;
2802
- top: 18%;
2803
- width: 8px;
2804
- height: 8px;
2805
- border-top: 2px solid currentColor;
2806
- border-left: 2px solid currentColor;
2807
- transform: translateX(-50%) rotate(45deg);
2808
- }
2809
- .lsg-accordion--bordered .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon.cmp-accordion__icon, .lsg-accordion--faq .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon.cmp-accordion__icon {
2810
- transform: rotate(180deg);
2811
- }
2812
- .lsg-accordion--bordered .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon.cmp-accordion__icon, .lsg-accordion--faq .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon.cmp-accordion__icon {
2813
- transform: none;
2814
- }
2815
2780
  @media (prefers-reduced-motion: reduce) {
2816
- .lsg-accordion__icon-svg, .lsg-accordion__icon.cmp-accordion__icon {
2781
+ .lsg-accordion__icon-svg {
2817
2782
  transition: none;
2818
2783
  }
2819
2784
  }
2820
2785
 
2821
- :root[data-lsg-theme=theme-2] .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
2822
- .lsg-themed-component--theme-2 .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
2823
- :root[data-lsg-theme=theme-3] .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
2824
- .lsg-themed-component--theme-3 .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon {
2825
- order: 2;
2786
+ .lsg-accordion--icon-plus .lsg-accordion__icon::before,
2787
+ .lsg-accordion--icon-plus .lsg-accordion__icon::after {
2788
+ content: none !important;
2789
+ display: none !important;
2826
2790
  }
2827
2791
 
2828
- :root[data-lsg-theme=theme-3] .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
2829
- .lsg-themed-component--theme-3 .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon {
2830
- border: 2px solid currentColor;
2831
- border-radius: 50%;
2792
+ .lsg-accordion--icon-plus .lsg-accordion__icon-svg {
2793
+ display: block !important;
2832
2794
  }
2833
2795
 
2834
2796
  .lsg-tabs {
@@ -7672,23 +7634,23 @@
7672
7634
  min-width: 0;
7673
7635
  }
7674
7636
  .lsg-accordion__heading,
7675
- .lsg-accordion .cmp-accordion__header {
7637
+ .lsg-accordion > .cmp-accordion__item > .cmp-accordion__header {
7676
7638
  margin: 0;
7677
7639
  padding: 0;
7678
7640
  font: inherit;
7679
7641
  }
7680
7642
  .lsg-accordion__header {
7681
7643
  box-sizing: border-box;
7682
- width: 100%;
7683
7644
  display: flex;
7684
7645
  align-items: center;
7685
7646
  justify-content: space-between;
7647
+ width: 100%;
7686
7648
  min-width: 0;
7687
7649
  margin: 0;
7688
7650
  padding: 0;
7651
+ color: inherit;
7689
7652
  background: transparent;
7690
7653
  border: 0;
7691
- color: inherit;
7692
7654
  font: inherit;
7693
7655
  text-align: left;
7694
7656
  cursor: pointer;
@@ -7712,8 +7674,8 @@
7712
7674
  .lsg-accordion__icon {
7713
7675
  position: relative;
7714
7676
  box-sizing: border-box;
7715
- flex: 0 0 auto;
7716
7677
  display: inline-flex;
7678
+ flex: 0 0 auto;
7717
7679
  align-items: center;
7718
7680
  justify-content: center;
7719
7681
  width: var(--lsg-accordion-icon-size, 20px);
@@ -7725,29 +7687,29 @@
7725
7687
  width: 100%;
7726
7688
  height: 100%;
7727
7689
  overflow: visible;
7690
+ fill: none;
7728
7691
  stroke: currentColor;
7729
- stroke-width: 2;
7692
+ stroke-width: 1.5;
7730
7693
  stroke-linecap: round;
7731
7694
  stroke-linejoin: round;
7732
- fill: none;
7733
7695
  transition: transform 180ms ease;
7734
7696
  }
7735
- .lsg-accordion__icon-ring, .lsg-accordion__icon-arrow-stem {
7697
+ .lsg-accordion__icon-ring, .lsg-accordion__icon-arrow {
7736
7698
  display: none;
7737
7699
  }
7738
- .lsg-accordion--icon-plus .lsg-accordion__icon-chevron, .lsg-accordion--icon-plus .lsg-accordion__icon-arrow-stem {
7700
+ .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-vertical, .lsg-accordion__header.cmp-accordion__button--expanded .lsg-accordion__icon-plus-vertical {
7739
7701
  display: none;
7740
7702
  }
7741
- .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-vertical, .lsg-accordion--icon-chevron .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-chevron .lsg-accordion__icon-plus-vertical {
7703
+ .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-vertical, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-vertical {
7742
7704
  display: none;
7743
7705
  }
7744
- .lsg-accordion__icon--open .lsg-accordion__icon-plus-vertical, .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-vertical, .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-line {
7745
- display: none;
7706
+ .lsg-accordion--icon-arrow .lsg-accordion__icon-arrow, .lsg-accordion--icon-arrow .lsg-accordion__icon-arrow {
7707
+ display: block;
7746
7708
  }
7747
- .lsg-accordion--icon-arrow .lsg-accordion__icon:not(.lsg-accordion__icon--open) .lsg-accordion__icon-svg, .lsg-accordion--icon-chevron .lsg-accordion__icon:not(.lsg-accordion__icon--open) .lsg-accordion__icon-svg, .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg, .lsg-accordion--icon-chevron .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg {
7709
+ .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg, .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg {
7748
7710
  transform: rotate(180deg);
7749
7711
  }
7750
- .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg, .lsg-accordion--icon-chevron .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg {
7712
+ .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg, .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg {
7751
7713
  transform: none;
7752
7714
  }
7753
7715
  .lsg-accordion__panel {
@@ -7757,7 +7719,7 @@
7757
7719
  .lsg-accordion__panel--open, .lsg-accordion__panel.cmp-accordion__panel--expanded {
7758
7720
  display: block;
7759
7721
  }
7760
- .lsg-accordion__panel[hidden], .lsg-accordion__panel.cmp-accordion__panel--hidden {
7722
+ .lsg-accordion__panel.cmp-accordion__panel--hidden, .lsg-accordion__panel[hidden] {
7761
7723
  display: none;
7762
7724
  }
7763
7725
  .lsg-accordion__content {
@@ -7783,61 +7745,23 @@
7783
7745
  }
7784
7746
  .lsg-accordion__content img {
7785
7747
  display: block;
7786
- width: 100%;
7787
7748
  max-width: 100%;
7788
7749
  height: auto;
7789
7750
  }
7790
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon {
7791
- transition: transform 180ms ease;
7792
- }
7793
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon .lsg-accordion__icon-svg, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon .lsg-accordion__icon-svg {
7794
- visibility: hidden;
7795
- }
7796
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon::before, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon::before {
7797
- content: "";
7798
- position: absolute;
7799
- left: 50%;
7800
- top: 20%;
7801
- width: 2px;
7802
- height: 60%;
7803
- border-radius: 999px;
7804
- background: currentColor;
7805
- transform: translateX(-50%);
7806
- }
7807
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon::after, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon::after {
7808
- content: "";
7809
- position: absolute;
7810
- left: 50%;
7811
- top: 18%;
7812
- width: 8px;
7813
- height: 8px;
7814
- border-top: 2px solid currentColor;
7815
- border-left: 2px solid currentColor;
7816
- transform: translateX(-50%) rotate(45deg);
7817
- }
7818
- .lsg-accordion--bordered .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon.cmp-accordion__icon, .lsg-accordion--faq .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon.cmp-accordion__icon {
7819
- transform: rotate(180deg);
7820
- }
7821
- .lsg-accordion--bordered .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon.cmp-accordion__icon, .lsg-accordion--faq .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon.cmp-accordion__icon {
7822
- transform: none;
7823
- }
7824
7751
  @media (prefers-reduced-motion: reduce) {
7825
- .lsg-accordion__icon-svg, .lsg-accordion__icon.cmp-accordion__icon {
7752
+ .lsg-accordion__icon-svg {
7826
7753
  transition: none;
7827
7754
  }
7828
7755
  }
7829
7756
 
7830
- :root[data-lsg-theme=theme-2] .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
7831
- .lsg-themed-component--theme-2 .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
7832
- :root[data-lsg-theme=theme-3] .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
7833
- .lsg-themed-component--theme-3 .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon {
7834
- order: 2;
7757
+ .lsg-accordion--icon-plus .lsg-accordion__icon::before,
7758
+ .lsg-accordion--icon-plus .lsg-accordion__icon::after {
7759
+ content: none !important;
7760
+ display: none !important;
7835
7761
  }
7836
7762
 
7837
- :root[data-lsg-theme=theme-3] .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
7838
- .lsg-themed-component--theme-3 .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon {
7839
- border: 2px solid currentColor;
7840
- border-radius: 50%;
7763
+ .lsg-accordion--icon-plus .lsg-accordion__icon-svg {
7764
+ display: block !important;
7841
7765
  }
7842
7766
  :root {
7843
7767
  --atlascopco-blue-1: #f5fbfc;
package/dist/index.scss CHANGED
@@ -2663,23 +2663,23 @@
2663
2663
  min-width: 0;
2664
2664
  }
2665
2665
  .lsg-accordion__heading,
2666
- .lsg-accordion .cmp-accordion__header {
2666
+ .lsg-accordion > .cmp-accordion__item > .cmp-accordion__header {
2667
2667
  margin: 0;
2668
2668
  padding: 0;
2669
2669
  font: inherit;
2670
2670
  }
2671
2671
  .lsg-accordion__header {
2672
2672
  box-sizing: border-box;
2673
- width: 100%;
2674
2673
  display: flex;
2675
2674
  align-items: center;
2676
2675
  justify-content: space-between;
2676
+ width: 100%;
2677
2677
  min-width: 0;
2678
2678
  margin: 0;
2679
2679
  padding: 0;
2680
+ color: inherit;
2680
2681
  background: transparent;
2681
2682
  border: 0;
2682
- color: inherit;
2683
2683
  font: inherit;
2684
2684
  text-align: left;
2685
2685
  cursor: pointer;
@@ -2703,8 +2703,8 @@
2703
2703
  .lsg-accordion__icon {
2704
2704
  position: relative;
2705
2705
  box-sizing: border-box;
2706
- flex: 0 0 auto;
2707
2706
  display: inline-flex;
2707
+ flex: 0 0 auto;
2708
2708
  align-items: center;
2709
2709
  justify-content: center;
2710
2710
  width: var(--lsg-accordion-icon-size, 20px);
@@ -2716,29 +2716,29 @@
2716
2716
  width: 100%;
2717
2717
  height: 100%;
2718
2718
  overflow: visible;
2719
+ fill: none;
2719
2720
  stroke: currentColor;
2720
- stroke-width: 2;
2721
+ stroke-width: 1.5;
2721
2722
  stroke-linecap: round;
2722
2723
  stroke-linejoin: round;
2723
- fill: none;
2724
2724
  transition: transform 180ms ease;
2725
2725
  }
2726
- .lsg-accordion__icon-ring, .lsg-accordion__icon-arrow-stem {
2726
+ .lsg-accordion__icon-ring, .lsg-accordion__icon-arrow {
2727
2727
  display: none;
2728
2728
  }
2729
- .lsg-accordion--icon-plus .lsg-accordion__icon-chevron, .lsg-accordion--icon-plus .lsg-accordion__icon-arrow-stem {
2729
+ .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-vertical, .lsg-accordion__header.cmp-accordion__button--expanded .lsg-accordion__icon-plus-vertical {
2730
2730
  display: none;
2731
2731
  }
2732
- .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-vertical, .lsg-accordion--icon-chevron .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-chevron .lsg-accordion__icon-plus-vertical {
2732
+ .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-vertical, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-vertical {
2733
2733
  display: none;
2734
2734
  }
2735
- .lsg-accordion__icon--open .lsg-accordion__icon-plus-vertical, .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-vertical, .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-line {
2736
- display: none;
2735
+ .lsg-accordion--icon-arrow .lsg-accordion__icon-arrow, .lsg-accordion--icon-arrow .lsg-accordion__icon-arrow {
2736
+ display: block;
2737
2737
  }
2738
- .lsg-accordion--icon-arrow .lsg-accordion__icon:not(.lsg-accordion__icon--open) .lsg-accordion__icon-svg, .lsg-accordion--icon-chevron .lsg-accordion__icon:not(.lsg-accordion__icon--open) .lsg-accordion__icon-svg, .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg, .lsg-accordion--icon-chevron .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg {
2738
+ .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg, .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg {
2739
2739
  transform: rotate(180deg);
2740
2740
  }
2741
- .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg, .lsg-accordion--icon-chevron .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg {
2741
+ .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg, .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg {
2742
2742
  transform: none;
2743
2743
  }
2744
2744
  .lsg-accordion__panel {
@@ -2748,7 +2748,7 @@
2748
2748
  .lsg-accordion__panel--open, .lsg-accordion__panel.cmp-accordion__panel--expanded {
2749
2749
  display: block;
2750
2750
  }
2751
- .lsg-accordion__panel[hidden], .lsg-accordion__panel.cmp-accordion__panel--hidden {
2751
+ .lsg-accordion__panel.cmp-accordion__panel--hidden, .lsg-accordion__panel[hidden] {
2752
2752
  display: none;
2753
2753
  }
2754
2754
  .lsg-accordion__content {
@@ -2774,61 +2774,23 @@
2774
2774
  }
2775
2775
  .lsg-accordion__content img {
2776
2776
  display: block;
2777
- width: 100%;
2778
2777
  max-width: 100%;
2779
2778
  height: auto;
2780
2779
  }
2781
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon {
2782
- transition: transform 180ms ease;
2783
- }
2784
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon .lsg-accordion__icon-svg, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon .lsg-accordion__icon-svg {
2785
- visibility: hidden;
2786
- }
2787
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon::before, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon::before {
2788
- content: "";
2789
- position: absolute;
2790
- left: 50%;
2791
- top: 20%;
2792
- width: 2px;
2793
- height: 60%;
2794
- border-radius: 999px;
2795
- background: currentColor;
2796
- transform: translateX(-50%);
2797
- }
2798
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon::after, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon::after {
2799
- content: "";
2800
- position: absolute;
2801
- left: 50%;
2802
- top: 18%;
2803
- width: 8px;
2804
- height: 8px;
2805
- border-top: 2px solid currentColor;
2806
- border-left: 2px solid currentColor;
2807
- transform: translateX(-50%) rotate(45deg);
2808
- }
2809
- .lsg-accordion--bordered .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon.cmp-accordion__icon, .lsg-accordion--faq .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon.cmp-accordion__icon {
2810
- transform: rotate(180deg);
2811
- }
2812
- .lsg-accordion--bordered .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon.cmp-accordion__icon, .lsg-accordion--faq .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon.cmp-accordion__icon {
2813
- transform: none;
2814
- }
2815
2780
  @media (prefers-reduced-motion: reduce) {
2816
- .lsg-accordion__icon-svg, .lsg-accordion__icon.cmp-accordion__icon {
2781
+ .lsg-accordion__icon-svg {
2817
2782
  transition: none;
2818
2783
  }
2819
2784
  }
2820
2785
 
2821
- :root[data-lsg-theme=theme-2] .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
2822
- .lsg-themed-component--theme-2 .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
2823
- :root[data-lsg-theme=theme-3] .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
2824
- .lsg-themed-component--theme-3 .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon {
2825
- order: 2;
2786
+ .lsg-accordion--icon-plus .lsg-accordion__icon::before,
2787
+ .lsg-accordion--icon-plus .lsg-accordion__icon::after {
2788
+ content: none !important;
2789
+ display: none !important;
2826
2790
  }
2827
2791
 
2828
- :root[data-lsg-theme=theme-3] .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
2829
- .lsg-themed-component--theme-3 .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon {
2830
- border: 2px solid currentColor;
2831
- border-radius: 50%;
2792
+ .lsg-accordion--icon-plus .lsg-accordion__icon-svg {
2793
+ display: block !important;
2832
2794
  }
2833
2795
 
2834
2796
  .lsg-tabs {
@@ -7672,23 +7634,23 @@
7672
7634
  min-width: 0;
7673
7635
  }
7674
7636
  .lsg-accordion__heading,
7675
- .lsg-accordion .cmp-accordion__header {
7637
+ .lsg-accordion > .cmp-accordion__item > .cmp-accordion__header {
7676
7638
  margin: 0;
7677
7639
  padding: 0;
7678
7640
  font: inherit;
7679
7641
  }
7680
7642
  .lsg-accordion__header {
7681
7643
  box-sizing: border-box;
7682
- width: 100%;
7683
7644
  display: flex;
7684
7645
  align-items: center;
7685
7646
  justify-content: space-between;
7647
+ width: 100%;
7686
7648
  min-width: 0;
7687
7649
  margin: 0;
7688
7650
  padding: 0;
7651
+ color: inherit;
7689
7652
  background: transparent;
7690
7653
  border: 0;
7691
- color: inherit;
7692
7654
  font: inherit;
7693
7655
  text-align: left;
7694
7656
  cursor: pointer;
@@ -7712,8 +7674,8 @@
7712
7674
  .lsg-accordion__icon {
7713
7675
  position: relative;
7714
7676
  box-sizing: border-box;
7715
- flex: 0 0 auto;
7716
7677
  display: inline-flex;
7678
+ flex: 0 0 auto;
7717
7679
  align-items: center;
7718
7680
  justify-content: center;
7719
7681
  width: var(--lsg-accordion-icon-size, 20px);
@@ -7725,29 +7687,29 @@
7725
7687
  width: 100%;
7726
7688
  height: 100%;
7727
7689
  overflow: visible;
7690
+ fill: none;
7728
7691
  stroke: currentColor;
7729
- stroke-width: 2;
7692
+ stroke-width: 1.5;
7730
7693
  stroke-linecap: round;
7731
7694
  stroke-linejoin: round;
7732
- fill: none;
7733
7695
  transition: transform 180ms ease;
7734
7696
  }
7735
- .lsg-accordion__icon-ring, .lsg-accordion__icon-arrow-stem {
7697
+ .lsg-accordion__icon-ring, .lsg-accordion__icon-arrow {
7736
7698
  display: none;
7737
7699
  }
7738
- .lsg-accordion--icon-plus .lsg-accordion__icon-chevron, .lsg-accordion--icon-plus .lsg-accordion__icon-arrow-stem {
7700
+ .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-vertical, .lsg-accordion__header.cmp-accordion__button--expanded .lsg-accordion__icon-plus-vertical {
7739
7701
  display: none;
7740
7702
  }
7741
- .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-vertical, .lsg-accordion--icon-chevron .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-chevron .lsg-accordion__icon-plus-vertical {
7703
+ .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-vertical, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-horizontal, .lsg-accordion--icon-arrow .lsg-accordion__icon-plus-vertical {
7742
7704
  display: none;
7743
7705
  }
7744
- .lsg-accordion__icon--open .lsg-accordion__icon-plus-vertical, .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-vertical, .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-line {
7745
- display: none;
7706
+ .lsg-accordion--icon-arrow .lsg-accordion__icon-arrow, .lsg-accordion--icon-arrow .lsg-accordion__icon-arrow {
7707
+ display: block;
7746
7708
  }
7747
- .lsg-accordion--icon-arrow .lsg-accordion__icon:not(.lsg-accordion__icon--open) .lsg-accordion__icon-svg, .lsg-accordion--icon-chevron .lsg-accordion__icon:not(.lsg-accordion__icon--open) .lsg-accordion__icon-svg, .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg, .lsg-accordion--icon-chevron .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg {
7709
+ .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg, .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon-svg {
7748
7710
  transform: rotate(180deg);
7749
7711
  }
7750
- .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg, .lsg-accordion--icon-chevron .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg {
7712
+ .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg, .lsg-accordion--icon-arrow .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-svg {
7751
7713
  transform: none;
7752
7714
  }
7753
7715
  .lsg-accordion__panel {
@@ -7757,7 +7719,7 @@
7757
7719
  .lsg-accordion__panel--open, .lsg-accordion__panel.cmp-accordion__panel--expanded {
7758
7720
  display: block;
7759
7721
  }
7760
- .lsg-accordion__panel[hidden], .lsg-accordion__panel.cmp-accordion__panel--hidden {
7722
+ .lsg-accordion__panel.cmp-accordion__panel--hidden, .lsg-accordion__panel[hidden] {
7761
7723
  display: none;
7762
7724
  }
7763
7725
  .lsg-accordion__content {
@@ -7783,61 +7745,23 @@
7783
7745
  }
7784
7746
  .lsg-accordion__content img {
7785
7747
  display: block;
7786
- width: 100%;
7787
7748
  max-width: 100%;
7788
7749
  height: auto;
7789
7750
  }
7790
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon {
7791
- transition: transform 180ms ease;
7792
- }
7793
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon .lsg-accordion__icon-svg, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon .lsg-accordion__icon-svg {
7794
- visibility: hidden;
7795
- }
7796
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon::before, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon::before {
7797
- content: "";
7798
- position: absolute;
7799
- left: 50%;
7800
- top: 20%;
7801
- width: 2px;
7802
- height: 60%;
7803
- border-radius: 999px;
7804
- background: currentColor;
7805
- transform: translateX(-50%);
7806
- }
7807
- .lsg-accordion--bordered .lsg-accordion__icon.cmp-accordion__icon::after, .lsg-accordion--faq .lsg-accordion__icon.cmp-accordion__icon::after {
7808
- content: "";
7809
- position: absolute;
7810
- left: 50%;
7811
- top: 18%;
7812
- width: 8px;
7813
- height: 8px;
7814
- border-top: 2px solid currentColor;
7815
- border-left: 2px solid currentColor;
7816
- transform: translateX(-50%) rotate(45deg);
7817
- }
7818
- .lsg-accordion--bordered .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon.cmp-accordion__icon, .lsg-accordion--faq .lsg-accordion__header[aria-expanded=false] .lsg-accordion__icon.cmp-accordion__icon {
7819
- transform: rotate(180deg);
7820
- }
7821
- .lsg-accordion--bordered .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon.cmp-accordion__icon, .lsg-accordion--faq .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon.cmp-accordion__icon {
7822
- transform: none;
7823
- }
7824
7751
  @media (prefers-reduced-motion: reduce) {
7825
- .lsg-accordion__icon-svg, .lsg-accordion__icon.cmp-accordion__icon {
7752
+ .lsg-accordion__icon-svg {
7826
7753
  transition: none;
7827
7754
  }
7828
7755
  }
7829
7756
 
7830
- :root[data-lsg-theme=theme-2] .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
7831
- .lsg-themed-component--theme-2 .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
7832
- :root[data-lsg-theme=theme-3] .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
7833
- .lsg-themed-component--theme-3 .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon {
7834
- order: 2;
7757
+ .lsg-accordion--icon-plus .lsg-accordion__icon::before,
7758
+ .lsg-accordion--icon-plus .lsg-accordion__icon::after {
7759
+ content: none !important;
7760
+ display: none !important;
7835
7761
  }
7836
7762
 
7837
- :root[data-lsg-theme=theme-3] .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon,
7838
- .lsg-themed-component--theme-3 .lsg-accordion .lsg-accordion__icon.cmp-accordion__icon {
7839
- border: 2px solid currentColor;
7840
- border-radius: 50%;
7763
+ .lsg-accordion--icon-plus .lsg-accordion__icon-svg {
7764
+ display: block !important;
7841
7765
  }
7842
7766
  :root {
7843
7767
  --atlascopco-blue-1: #f5fbfc;
package/dist/src/components/lsg/LsgAccordion/LsgAccordion.d.ts CHANGED
@@ -2,32 +2,17 @@ import React from "react";
2
2
  import "./LsgAccordion.scss";
3
3
  export interface LsgAccordionItem {
4
4
  id: string;
5
- /** Mandatory accordion item title. Mirrors the required AEM item title. */
6
5
  title: string;
7
- /** Arbitrary panel content. In AEM this maps to an authorable container panel. */
8
6
  content: React.ReactNode;
9
- /** Explicit initial expansion for this item. Mirrors Core Accordion expandedItems. */
10
7
  defaultOpen?: boolean;
11
8
  }
12
- export type LsgAccordionIconStyle = "plus" | "arrow" | "chevron";
9
+ export type LsgAccordionIconStyle = "plus" | "arrow";
13
10
  export interface LsgAccordionProps {
14
11
  items: LsgAccordionItem[];
15
- /** Allow multiple panels to remain open. Default: true. */
12
+ /** Mirrors Core Accordion singleExpansion behaviour. Default: true. */
16
13
  allowMultiple?: boolean;
17
- /**
18
- * Expand the first item initially when no item has an explicit defaultOpen value.
19
- * Mirrors the AEM "First Item Expanded by Default" behaviour setting.
20
- * Default: false.
21
- */
22
- firstItemExpanded?: boolean;
23
- /**
24
- * Presentation icon treatment. AEM should source this from the LSG
25
- * configurator / policy / style system rather than normal accordion content.
26
- * `chevron` is retained as a backwards-compatible alias for `arrow`.
27
- */
14
+ /** Presentation only. AEM Core remains the runtime behaviour owner. */
28
15
  iconStyle?: LsgAccordionIconStyle;
29
- /** @deprecated Figma defines theme-driven presentation, not default/bordered/faq variants. */
30
- variant?: "default" | "bordered" | "faq";
31
16
  className?: string;
32
17
  }
33
18
  export declare const LsgAccordion: React.FC<LsgAccordionProps>;
package/dist/src/components/lsg/LsgAccordion/LsgAccordion.stories.d.ts CHANGED
@@ -4,8 +4,6 @@ declare const meta: Meta<typeof LsgAccordion>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof LsgAccordion>;
6
6
  export declare const PlusMinus: Story;
7
- export declare const Arrows: Story;
8
- export declare const FirstItemExpandedByDefault: Story;
9
- export declare const AllClosed: Story;
10
- export declare const ExplicitExpandedItem: Story;
7
+ export declare const Arrow: Story;
11
8
  export declare const SingleExpansion: Story;
9
+ export declare const AllClosed: Story;